diff --git a/.gitea/workflows/deploy.yml b/.gitea/workflows/deploy.yml
new file mode 100644
index 000000000..6d405c2f8
--- /dev/null
+++ b/.gitea/workflows/deploy.yml
@@ -0,0 +1,33 @@
+name: Deploy Frontend
+
+on:
+  push:
+    branches:
+      - deploy
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup SSH
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/deploy_key
+          chmod 600 ~/.ssh/deploy_key
+          ssh-keyscan -p 28 -H 192.168.0.4 >> ~/.ssh/known_hosts
+
+      - name: Deploy
+        run: |
+          ssh -i ~/.ssh/deploy_key -p 28 onasys@192.168.0.4 << 'EOF'
+            cd ~/frontend
+            git restore .
+            git clean -fd
+            git pull origin deploy
+            pnpm install
+            pnpm turbo build
+            pm2 reload all
+          EOF
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000..ea1cd8dc1
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,88 @@
+{
+    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
+    // 기존 특성에 대한 설명을 보려면 가리킵니다.
+    // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:as 디버그",
+            "runtimeExecutable": "pnpm",
+            "runtimeArgs": [
+                "run",
+                "dev:as"
+            ],
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "cwd": "${workspaceFolder}",
+            "console": "integratedTerminal",
+            "sourceMaps": true,
+            "env": {
+                "NODE_OPTIONS": "--inspect"
+            }
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:cs 디버그",
+            "runtimeExecutable": "pnpm",
+            "runtimeArgs": [
+                "run",
+                "dev:cs"
+            ],
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "cwd": "${workspaceFolder}",
+            "console": "integratedTerminal",
+            "sourceMaps": true,
+            "env": {
+                "NODE_OPTIONS": "--inspect"
+            }
+        },
+        {
+            "type": "node",
+            "request": "attach",
+            "name": "dev:cs 서버 연결 (attach)",
+            "port": 9229,
+            "restart": true,
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "sourceMaps": true,
+            "resolveSourceMapLocations": [
+                "${workspaceFolder}/apps/cs/**",
+                "!**/node_modules/**"
+            ]
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "dev:cs 클라이언트 디버그 (Chrome)",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}/apps/cs",
+            "sourceMaps": true
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:st 디버그",
+            "runtimeExecutable": "pnpm",
+            "runtimeArgs": [
+                "run",
+                "dev:st"
+            ],
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "cwd": "${workspaceFolder}",
+            "console": "integratedTerminal",
+            "sourceMaps": true,
+            "env": {
+                "NODE_OPTIONS": "--inspect"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..f60bf453a
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "chat.tools.terminal.autoApprove": {
+        "pnpm": true
+    }
+}
\ No newline at end of file
diff --git a/apps/_template/.env.example b/apps/_template/.env.example
index f9794a6f8..318a30511 100644
--- a/apps/_template/.env.example
+++ b/apps/_template/.env.example
@@ -1,8 +1,8 @@
-# apps/as/shared/config/env.ts 참고
+# src/shared/config/env.ts 참고
 NEXT_PUBLIC_PORT=
 NEXT_PUBLIC_PROXY_HOST=
 NEXT_PUBLIC_SITE_ID=
-NEXT_PUBLIC_SERVER_API_URL=
+SERVER_API_URL=
 
 # 401 시 브라우저 리다이렉트 대상
 NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL=/auth/login
diff --git a/apps/_template/README.md b/apps/_template/README.md
index 7e14528f8..c48c1534a 100644
--- a/apps/_template/README.md
+++ b/apps/_template/README.md
@@ -1,4 +1,4 @@
-# AS Application
+# Template Application
 
 Next.js 애플리케이션 with FSD(Feature Sliced Design) 아키텍처
 
@@ -13,46 +13,40 @@ Next.js 애플리케이션 with FSD(Feature Sliced Design) 아키텍처
 - **HTTP 클라이언트**: Axios
 - **날짜 처리**: Day.js
 
-## 프로젝트 구조 (FSD)
+## 프로젝트 구조 (FSD + Next.js App Router)
 
-이 프로젝트는 **Feature-Sliced Design v2.1**을 따르며, 계층적 아키텍처로 구성되어 있습니다.
+이 프로젝트는 **Feature-Sliced Design v2.1**과 **FSD 공식 Next.js 가이드**에 맞춰 구성되어 있습니다. Next.js `app/`은 라우트만 담당하고, 실제 레이어는 `src/` 아래에 있습니다.
 
 ```
-as/
-├── app/                    # App 레이어 (Next.js App Router)
-│   ├── (routes)/          # 라우트 구조
-│   ├── layout.tsx         # 루트 레이아웃
-│   ├── page.tsx           # 홈 페이지
-│   ├── globals.css        # 글로벌 스타일
-│   └── providers.tsx      # 전역 providers
+_template/
+├── app/                    # Next.js App Router (루트) — 라우트·레이아웃 진입점만
+│   ├── layout.tsx         # 루트 레이아웃 (src/app에서 providers, styles import)
+│   └── (with-base-layout)/
+│       ├── layout.tsx     # BaseLayout 래퍼 (src/app/layouts에서 import)
+│       └── page.tsx       # re-export: export { MainPage as default } from '@/pages/home'
 │
-├── widgets/               # Widgets 레이어
-│   └── [widget-name]/     # 큰 독립적 UI 블록 (여러 페이지에서 재사용)
-│       ├── ui/
-│       ├── model/
-│       └── index.ts
+├── pages/                  # 빈 폴더 + README (Next.js가 src/pages를 Pages Router로 쓰지 않도록)
+│   └── README.md
 │
-├── features/              # Features 레이어
-│   └── [feature-name]/    # 사용자 상호작용 기능 (여러 페이지에서 재사용)
-│       ├── ui/
-│       ├── api/
-│       ├── model/
-│       └── index.ts
-│
-├── entities/              # Entities 레이어
-│   └── [entity-name]/     # 비즈니스 엔티티 (User, Product 등)
-│       ├── model/
-│       ├── api/
-│       ├── ui/
-│       └── index.ts
-│
-└── shared/                # Shared 레이어
-    ├── ui/               # UI Kit (비즈니스 로직 없는 공통 컴포넌트)
-    ├── api/              # API 클라이언트 설정
-    ├── lib/              # 내부 라이브러리 (dates, colors 등)
-    ├── config/           # 환경 설정, feature flags
-    ├── types/            # 공통 타입 정의
-    └── routes/           # 라우트 상수
+└── src/                    # FSD 레이어 (실제 코드)
+    ├── app/                # App 레이어 (슬라이스 없음, 세그먼트만)
+    │   ├── providers/      # 전역 Providers (QueryClient 등)
+    │   ├── styles/         # 글로벌 스타일 (globals.css)
+    │   └── layouts/        # 공통 레이아웃 컴포넌트 (BaseLayoutWrapper)
+    │
+    ├── pages/              # Pages 레이어 (페이지 슬라이스)
+    │   └── home/
+    │       ├── ui/
+    │       └── index.ts    # Public API
+    │
+    ├── widgets/            # Widgets 레이어
+    ├── features/           # Features 레이어
+    ├── entities/           # Entities 레이어
+    └── shared/             # Shared 레이어
+        ├── ui/
+        ├── api/
+        ├── lib/
+        └── config/
 ```
 
 ### 계층 구조 이해하기
@@ -86,10 +80,10 @@ shared/    ↓ 가장 낮은 책임, 의존성 없음
 - **특징**: 슬라이스가 없고 세그먼트로만 구성
 - **의존성**: 모든 하위 레이어 사용 가능
 
-### 2. Pages (app 디렉토리)
+### 2. Pages (src/pages)
 - **목적**: 웹사이트나 애플리케이션을 구성하는 페이지/화면
 - **내용**: 페이지 UI, 로딩 상태, 에러 바운더리, 데이터 fetching
-- **특징**: 한 페이지당 한 슬라이스 (유사한 페이지는 그룹화 가능)
+- **특징**: 한 페이지당 한 슬라이스 (유사한 페이지는 그룹화 가능). Next.js `app/`의 route 파일에서 re-export
 - **의존성**: `widgets`, `features`, `entities`, `shared` 사용 가능
 
 > 💡 **FSD v2.1 권장사항**: "pages-first" 접근 방식을 따라, 재사용되지 않는 큰 UI 블록과 비즈니스 로직은 페이지 슬라이스에 유지하세요.
@@ -118,29 +112,6 @@ shared/    ↓ 가장 낮은 책임, 의존성 없음
 - **특징**: 비즈니스 로직 없음, 슬라이스가 없고 세그먼트로만 구성
 - **의존성**: 외부 라이브러리만 사용 가능 (다른 레이어 불가)
 
-## 레이어 간 Import 규칙
-
-> **핵심 규칙**: 슬라이스 내의 모듈(파일)은 **오직 하위 레이어**에 있는 다른 슬라이스만 import할 수 있습니다.
-
-예시:
-- `features/auth-login/ui/form.tsx`는 `entities/user`와 `shared/ui`를 import 가능
-- 하지만 다른 `features/post-create`나 상위 레이어인 `widgets`는 import 불가
-- 같은 슬라이스 내부(`features/auth-login/`)의 다른 파일들은 자유롭게 import 가능
-
-## Public API 규칙
-
-> **슬라이스 외부의 모듈은 슬라이스의 Public API만 참조할 수 있으며, 내부 파일 구조에 직접 접근할 수 없습니다.**
-
-모든 슬라이스(및 슬라이스가 없는 레이어의 세그먼트)는 반드시 `index.ts`를 통해 Public API를 정의해야 합니다.
-
-```typescript
-// ✅ 올바른 import
-import { LoginForm } from 'features/auth-login';
-
-// ❌ 잘못된 import (내부 구조 직접 접근)
-import { LoginForm } from 'features/auth-login/ui/login-form';
-```
-
 ## 시작하기
 
 ```bash
@@ -174,16 +145,16 @@ NEXT_PUBLIC_API_URL=http://localhost:3000/api
 ```typescript
 // ✅ 올바른 import (하위 레이어)
 // features/auth-login/ui/form.tsx
-import { User } from 'entities/user';
-import { Button } from 'shared/ui/button';
+import { User } from "entities/user";
+import { Button } from "shared/ui/button";
 
 // ❌ 잘못된 import (같은 레이어)
 // features/auth-login/ui/form.tsx
-import { PostForm } from 'features/post-create';  // 금지!
+import { PostForm } from "features/post-create";  // 금지!
 
 // ❌ 잘못된 import (상위 레이어)
 // features/auth-login/ui/form.tsx
-import { Header } from 'widgets/header';  // 금지!
+import { Header } from "widgets/header";  // 금지!
 ```
 
 ### 2. Public API 규칙
@@ -192,10 +163,10 @@ import { Header } from 'widgets/header';  // 금지!
 
 ```typescript
 // ✅ 올바른 import (Public API 사용)
-import { LoginForm } from 'features/auth-login';
+import { LoginForm } from "features/auth-login";
 
 // ❌ 잘못된 import (내부 구조 직접 접근)
-import { LoginForm } from 'features/auth-login/ui/login-form';
+import { LoginForm } from "features/auth-login/ui/login-form";
 ```
 
 **Public API 작성 시 주의사항**:
@@ -205,44 +176,12 @@ import { LoginForm } from 'features/auth-login/ui/login-form';
 
 ```typescript
 // ❌ 나쁜 예시
-export * from './ui/Comment';
-export * from './model/comments';
+export * from "./ui/Comment";
+export * from "./model/comments";
 
 // ✅ 좋은 예시
-export { Comment } from './ui/comment';
-export { CommentForm } from './ui/comment-form';
-export { useComments } from './model/use-comments';
-export type { Comment, CommentFormData } from './model/types';
-```
-
-### 3. 슬라이스 독립성
-
-- **Zero Coupling**: 같은 레이어의 슬라이스들은 서로 독립적이어야 합니다
-- **High Cohesion**: 슬라이스는 주요 목표와 관련된 대부분의 코드를 포함해야 합니다
-- 예외: Entities 레이어에서 필요한 경우 `@x` 표기법으로 cross-import 가능
-
-### 4. 세그먼트 명명 규칙
-
-세그먼트 이름은 **목적**을 설명해야 하며, **본질**을 설명하면 안 됩니다:
-
-- ❌ **나쁜 이름**: `components`, `hooks`, `types` (무엇인지만 설명)
-- ✅ **좋은 이름**: `ui`, `api`, `model`, `lib` (왜 있는지 설명)
-
-## 코드 규칙
-
-- TypeScript 사용 (strict mode)
-- 함수형 컴포넌트 사용
-- Named exports 선호
-- Tailwind CSS 사용
-- ESLint + Prettier 적용
-- Public API는 명시적으로 정의 (와일드카드 export 지양)
-
-## 아키텍처 린팅
-
-코드베이스의 FSD 규칙 준수를 자동으로 검증하려면 [Steiger](https://github.com/feature-sliced/steiger)를 사용하세요.
-
-```bash
-# Steiger 설치 및 실행
-pnpm add -D @feature-sliced/steiger
-npx steiger src
+export { Comment } from "./ui/comment";
+export { CommentForm } from "./ui/comment-form";
+export { useComments } from "./model/use-comments";
+export type { Comment, CommentFormData } from "./model/types";
 ```
diff --git a/apps/_template/app/(with-base-layout)/layout.tsx b/apps/_template/app/(with-base-layout)/layout.tsx
index 1d182a0ee..1ff36f8ec 100644
--- a/apps/_template/app/(with-base-layout)/layout.tsx
+++ b/apps/_template/app/(with-base-layout)/layout.tsx
@@ -1,31 +1,10 @@
-"use client";
-
-import { useCallback } from "react";
-import { usePathname, useRouter } from "next/navigation";
-import { useQueryClient } from "@tanstack/react-query";
-import { BaseLayout } from "@common/components";
-import type { MenuItem } from "@/entities/menu";
-import { PageLayout } from "@/shared/ui/page-layout";
-
-export default function WithBaseLayout({ children }: { children: React.ReactNode }) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const queryClient = useQueryClient();
-
-  const handleMenuClick = useCallback(
-    (item: MenuItem) => {
-      router.push(item.urlPath);
-    },
-    [router],
-  );
-
-  return (
-    <BaseLayout
-      queryClient={queryClient}
-      currentPath={pathname ?? ""}
-      handleMenuClick={handleMenuClick}
-    >
-      <PageLayout>{children}</PageLayout>
-    </BaseLayout>
-  );
-}
+import type { ReactNode } from "react";
+import { BaseLayoutWrapper } from "@/app/layouts/base-layout";
+
+interface WithBaseLayoutProps {
+  children: ReactNode;
+}
+
+export default function WithBaseLayout({ children }: WithBaseLayoutProps) {
+  return <BaseLayoutWrapper>{children}</BaseLayoutWrapper>;
+}
diff --git a/apps/_template/app/(with-base-layout)/page.tsx b/apps/_template/app/(with-base-layout)/page.tsx
index e118e732e..82a918b59 100644
--- a/apps/_template/app/(with-base-layout)/page.tsx
+++ b/apps/_template/app/(with-base-layout)/page.tsx
@@ -1,9 +1 @@
-"use client";
-
-export default function MainPage() {
-  return (
-    <div className="flex h-full flex-col items-center justify-center py-10">
-      <h1 className="mb-4 text-3xl font-bold">Home</h1>
-    </div>
-  );
-}
+export { MainPage as default } from "@/pages/home";
diff --git a/apps/_template/app/layout.tsx b/apps/_template/app/layout.tsx
index d152e0da3..a6eecfc27 100644
--- a/apps/_template/app/layout.tsx
+++ b/apps/_template/app/layout.tsx
@@ -1,14 +1,7 @@
 import type { Metadata } from "next";
-import { Noto_Sans_KR } from "next/font/google";
-import { Providers } from "./providers";
-import "./globals.css";
-
-const notoSansKR = Noto_Sans_KR({
-  subsets: ["latin"],
-  weight: ["100", "300", "400", "500", "700", "900"],
-  display: "swap",
-  variable: "--font-noto-sans-kr",
-});
+import { cookies } from "next/headers";
+import { Providers } from "@/app/providers";
+import "@/app/styles/globals.css";
 
 export const metadata: Metadata = {
   title: "행정지원시스템",
@@ -19,10 +12,12 @@ interface RootLayoutProps {
   children: React.ReactNode;
 }
 
-export default function RootLayout({ children }: RootLayoutProps) {
+export default async function RootLayout({ children }: RootLayoutProps) {
+  const theme = (await cookies()).get("site-theme-key");
+
   return (
-    <html lang="ko" className={notoSansKR.variable}>
-      <body className={`${notoSansKR.className} antialiased`}>
+    <html lang="ko" data-theme={theme?.value}>
+      <body>
         <Providers>{children}</Providers>
       </body>
     </html>
diff --git a/apps/_template/middleware.ts b/apps/_template/middleware.ts
new file mode 100644
index 000000000..e6bbba40a
--- /dev/null
+++ b/apps/_template/middleware.ts
@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from "next/server";
+import { PORT, PROXY_HOST, SERVER_API_URL, SITE_ID } from "@/shared/config";
+
+const serverApiUrl = process.env.SERVER_API_URL ?? "http://localhost:3000";
+
+// CSP 헤더 설정 함수 (img-src만)
+function addSecurityHeaders(response: NextResponse): NextResponse {
+  response.headers.set("Content-Security-Policy", "img-src 'self' data: https: blob:;");
+  return response;
+}
+
+export function middleware(req: NextRequest) {
+  const pathname = req.nextUrl.pathname;
+  const searchParams = req.nextUrl.searchParams;
+
+  const logMessages: string[] = [
+    `[Middleware Request] ${new Date().toISOString()}`,
+    `[Environment]\n  Mode: ${process.env.NODE_ENV}\n  Port: ${PORT}\n  Proxy Host: ${PROXY_HOST}\n  Server API URL: ${SERVER_API_URL}\n  Site ID: ${SITE_ID}`,
+    `[Request]\n  Original Pathname: ${pathname}`,
+  ];
+
+  if (pathname.startsWith("/server")) {
+    const queryParams = searchParams.toString();
+    const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
+      queryParams ? `?${queryParams}` : ""
+    }`;
+
+    logMessages.push(`  Rewritten URL: ${newUrl}`);
+    logMessages.push("\n--------------------------------\n");
+    console.log(logMessages.join("\n"));
+
+    const response = NextResponse.rewrite(new URL(newUrl));
+    return addSecurityHeaders(response);
+  }
+
+  // if (pathname === "/") {
+  //   const response = NextResponse.redirect(new URL("/dashboard", req.url));
+  //   return addSecurityHeaders(response);
+  // }
+
+  logMessages.push("\n--------------------------------\n");
+  console.log(logMessages.join("\n"));
+
+  const response = NextResponse.next();
+  return addSecurityHeaders(response);
+}
+
+export const config = {
+  matcher: ["/server/:path*", "/"],
+};
diff --git a/apps/_template/package.json b/apps/_template/package.json
index fb27f8af7..7f1f98585 100644
--- a/apps/_template/package.json
+++ b/apps/_template/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "as",
+  "name": "template",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,13 +19,13 @@
     "@tanstack/react-table": "^8.21.2",
     "axios": "^1.8.1",
     "dayjs": "^1.11.13",
-    "next": "15.3.8",
+    "next": "15.5.18",
     "react-hook-form": "^7.54.2",
     "zod": "^3.24.2"
   },
   "devDependencies": {
     "eslint": "^9.0.0",
-    "eslint-config-next": "15.4.0",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
@@ -33,4 +33,4 @@
     "tailwindcss": "^3.4.14",
     "typescript": "^5.7.2"
   }
-}
\ No newline at end of file
+}
diff --git a/apps/_template/pages/README.md b/apps/_template/pages/README.md
new file mode 100644
index 000000000..e011944c3
--- /dev/null
+++ b/apps/_template/pages/README.md
@@ -0,0 +1,9 @@
+# 이 폴더는 비워 둡니다 (FSD + Next.js App Router)
+
+Next.js가 `src/pages`를 **Pages Router**용 `pages` 디렉터리로 인식하지 않도록,  
+프로젝트 루트에 **빈 `pages` 폴더**를 두는 것이 FSD 공식 가이드 권장사항입니다.
+
+- 실제 페이지(FSD Pages 레이어)는 **`src/pages`**에 있습니다.
+- Next.js 라우트는 **`app/`** 에서 `src/pages`를 re-export 하는 방식으로 연결됩니다.
+
+[Feature-Sliced Design - Usage with Next.js (App Router)](https://feature-sliced.design/docs/guides/tech/with-nextjs)
diff --git a/apps/_template/shared/config/env.ts b/apps/_template/shared/config/env.ts
deleted file mode 100644
index 4f08c722a..000000000
--- a/apps/_template/shared/config/env.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
-export const PROXY_HOST =
-  process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL;
-export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "AS";
-export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
-export const ACCESS_TOKEN =
-  process.env.NEXT_PUBLIC_ACCESS_TOKEN || "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";
diff --git a/apps/_template/src/app/layouts/base-layout.tsx b/apps/_template/src/app/layouts/base-layout.tsx
new file mode 100644
index 000000000..1081134e0
--- /dev/null
+++ b/apps/_template/src/app/layouts/base-layout.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useCallback } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import { BaseLayout } from "@common/components";
+import type { MenuItem } from "@/entities/menu";
+import { PageLayout } from "@/shared/ui/page-layout";
+
+interface BaseLayoutWrapperProps {
+  children: React.ReactNode;
+}
+
+export function BaseLayoutWrapper({ children }: BaseLayoutWrapperProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const queryClient = useQueryClient();
+
+  const handleMenuClick = useCallback(
+    (item: MenuItem) => {
+      router.push(item.urlPath);
+    },
+    [router],
+  );
+
+  return (
+    <BaseLayout
+      queryClient={queryClient}
+      currentPath={pathname ?? ""}
+      handleMenuClick={handleMenuClick}
+    >
+      <PageLayout>{children}</PageLayout>
+    </BaseLayout>
+  );
+}
diff --git a/apps/_template/app/providers.tsx b/apps/_template/src/app/providers/index.tsx
similarity index 96%
rename from apps/_template/app/providers.tsx
rename to apps/_template/src/app/providers/index.tsx
index bc12c443b..05bac42cc 100644
--- a/apps/_template/app/providers.tsx
+++ b/apps/_template/src/app/providers/index.tsx
@@ -1,18 +1,18 @@
-"use client";
-
-import { QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { queryClient } from "@/shared/lib";
-
-interface ProvidersProps {
-  children: React.ReactNode;
-}
-
-export function Providers({ children }: ProvidersProps) {
-  return (
-    <QueryClientProvider client={queryClient}>
-      {children}
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
-  );
-}
+"use client";
+
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { queryClient } from "@/shared/lib";
+
+interface ProvidersProps {
+  children: React.ReactNode;
+}
+
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
diff --git a/apps/_template/app/globals.css b/apps/_template/src/app/styles/globals.css
similarity index 84%
rename from apps/_template/app/globals.css
rename to apps/_template/src/app/styles/globals.css
index 60bc92fb6..e557f947b 100644
--- a/apps/_template/app/globals.css
+++ b/apps/_template/src/app/styles/globals.css
@@ -10,6 +10,6 @@ html,
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: var(--font-noto-sans-kr), sans-serif;
+  font-family: "Noto Sans KR", sans-serif;
   font-size: 10px;
 }
diff --git a/apps/_template/entities/README.md b/apps/_template/src/entities/README.md
similarity index 100%
rename from apps/_template/entities/README.md
rename to apps/_template/src/entities/README.md
diff --git a/apps/_template/entities/menu/index.ts b/apps/_template/src/entities/menu/index.ts
similarity index 100%
rename from apps/_template/entities/menu/index.ts
rename to apps/_template/src/entities/menu/index.ts
diff --git a/apps/_template/entities/menu/model/types.ts b/apps/_template/src/entities/menu/model/types.ts
similarity index 100%
rename from apps/_template/entities/menu/model/types.ts
rename to apps/_template/src/entities/menu/model/types.ts
diff --git a/apps/_template/src/features/README.md b/apps/_template/src/features/README.md
new file mode 100644
index 000000000..329175c45
--- /dev/null
+++ b/apps/_template/src/features/README.md
@@ -0,0 +1,133 @@
+# Features Layer
+
+**Features**는 앱의 주요 사용자 상호작용과 기능을 구현하는 레이어입니다. 사용자가 실제로 수행하는 작업들로, 주로 비즈니스 엔티티와 관련이 있습니다.
+
+## 목적
+
+- 사용자가 중요하게 생각하는 주요 상호작용 구현
+- 재사용 가능한 비즈니스 기능 제공
+- 여러 페이지에서 사용되는 기능의 중복 제거
+
+## Feature로 만들어야 하는 경우
+
+> ⚠️ **중요**: 모든 것을 feature로 만들 필요는 없습니다.
+
+Feature로 만드는 것이 좋은 지표:
+
+- **여러 페이지에서 재사용됨**: 예를 들어, 여러 에디터가 있고 모두 댓글 기능이 있다면, 댓글은 재사용 가능한 feature입니다
+- **중요한 비즈니스 기능**: 신규 프로젝트 참여자가 Features 폴더를 보고 앱의 주요 기능을 빠르게 파악할 수 있어야 합니다
+
+Feature가 너무 많으면 중요한 기능이 묻히므로, 신규 참여자의 경험을 최적화하여 결정하세요.
+
+## 구조
+
+각 feature 슬라이스는 다음 세그먼트로 구성됩니다:
+
+```
+features/
+└── [feature-name]/
+    ├── ui/            # 상호작용을 수행하는 UI (폼, 버튼 등)
+    ├── api/           # 액션 수행에 필요한 API 호출 (선택적)
+    ├── model/         # 검증 및 내부 상태 관리 (선택적)
+    ├── lib/           # 유틸리티 함수 (선택적)
+    ├── config/        # feature flags (선택적)
+    └── index.ts       # Public API
+```
+
+### 세그먼트 설명
+
+- **ui**: 사용자 상호작용을 위한 UI 컴포넌트 (폼, 모달, 버튼 등)
+- **api**: feature 실행에 필요한 API 요청 함수
+- **model**: 폼 검증, 내부 상태, 비즈니스 로직
+- **lib**: feature 내부에서만 사용되는 유틸리티
+- **config**: feature flags, feature별 설정값
+- **index.ts**: 슬라이스의 Public API (외부에서 사용할 수 있는 것만 export)
+
+## 예시
+
+```typescript
+// features/auth-login/ui/login-form.tsx
+import { useState } from 'react';
+import { loginUser } from '../api/login-user';
+import type { LoginCredentials } from '../model/types';
+
+export function LoginForm() {
+  const [credentials, setCredentials] = useState<LoginCredentials>({
+    email: '',
+    password: ''
+  });
+
+  const handleSubmit = async (e: React.SubmitEvent) => {
+    e.preventDefault();
+    await loginUser(credentials);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="email"
+        value={credentials.email}
+        onChange={(e) => setCredentials({ ...credentials, email: e.target.value })}
+      />
+      <input
+        type="password"
+        value={credentials.password}
+        onChange={(e) => setCredentials({ ...credentials, password: e.target.value })}
+      />
+      <button type="submit">로그인</button>
+    </form>
+  );
+}
+
+// features/auth-login/api/login-user.ts
+import type { LoginCredentials } from '../model/types';
+
+export async function loginUser(credentials: LoginCredentials) {
+  const response = await fetch('/api/auth/login', {
+    method: 'POST',
+    body: JSON.stringify(credentials),
+  });
+  return response.json();
+}
+
+// features/auth-login/model/types.ts
+export interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+// features/auth-login/index.ts
+export { LoginForm } from './ui/login-form';
+export { loginUser } from './api/login-user';
+export type { LoginCredentials } from './model/types';
+```
+
+## 레이어 의존성 규칙
+
+✅ **허용되는 의존성**:
+
+- `shared` 레이어의 모듈
+- `entities` 레이어의 모듈
+- 같은 feature 슬라이스 내의 다른 세그먼트
+
+❌ **금지된 의존성**:
+
+- 다른 `features` 슬라이스 (feature 간 직접 의존 금지)
+- `widgets` 레이어
+- `pages` 레이어
+- `app` 레이어
+
+> 💡 **팁**: 여러 features가 공통 기능을 필요로 한다면, 그 기능을 `shared` 레이어로 이동시키거나 `entities` 레이어에서 관리하세요.
+
+## 명명 규칙
+
+- 소문자와 대시 사용: `auth-login`, `post-create`, `comment-edit`
+- 동사 형태 권장: 사용자 액션을 나타내는 이름 사용
+- 명확하고 구체적으로: 기능의 목적이 명확하게 드러나도록
+
+## 주의사항
+
+1. **하나의 기능에만 집중**: 각 feature는 단일 사용자 시나리오를 구현해야 합니다
+2. **재사용성 고려**: 여러 페이지에서 사용될 수 있도록 설계
+3. **독립성 유지**: 다른 features에 의존하지 않고 독립적으로 작동
+4. **적절한 추상화**: 너무 많은 feature를 만들지 말고, 중요한 기능 위주로 구성
diff --git a/apps/_template/src/pages/home/index.ts b/apps/_template/src/pages/home/index.ts
new file mode 100644
index 000000000..97a463408
--- /dev/null
+++ b/apps/_template/src/pages/home/index.ts
@@ -0,0 +1 @@
+export { MainPage } from "./ui/main-page";
diff --git a/apps/_template/src/pages/home/ui/main-page.tsx b/apps/_template/src/pages/home/ui/main-page.tsx
new file mode 100644
index 000000000..f757224dc
--- /dev/null
+++ b/apps/_template/src/pages/home/ui/main-page.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+export function MainPage() {
+  return (
+    <div className="flex h-full flex-col items-center justify-center py-10">
+      <h1 className="mb-4 text-3xl font-bold">Home</h1>
+    </div>
+  );
+}
diff --git a/apps/_template/shared/README.md b/apps/_template/src/shared/README.md
similarity index 100%
rename from apps/_template/shared/README.md
rename to apps/_template/src/shared/README.md
diff --git a/apps/_template/shared/api/client.ts b/apps/_template/src/shared/api/client.ts
similarity index 100%
rename from apps/_template/shared/api/client.ts
rename to apps/_template/src/shared/api/client.ts
diff --git a/apps/_template/shared/api/index.ts b/apps/_template/src/shared/api/index.ts
similarity index 100%
rename from apps/_template/shared/api/index.ts
rename to apps/_template/src/shared/api/index.ts
diff --git a/apps/_template/src/shared/config/env.ts b/apps/_template/src/shared/config/env.ts
new file mode 100644
index 000000000..a1825f415
--- /dev/null
+++ b/apps/_template/src/shared/config/env.ts
@@ -0,0 +1,8 @@
+export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
+export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
+export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "AS";
+export const SERVER_API_URL = process.env.SERVER_API_URL;
+export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
+export const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "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";
diff --git a/apps/_template/shared/config/index.ts b/apps/_template/src/shared/config/index.ts
similarity index 100%
rename from apps/_template/shared/config/index.ts
rename to apps/_template/src/shared/config/index.ts
diff --git a/apps/_template/shared/lib/dayjs.ts b/apps/_template/src/shared/lib/dayjs.ts
similarity index 100%
rename from apps/_template/shared/lib/dayjs.ts
rename to apps/_template/src/shared/lib/dayjs.ts
diff --git a/apps/_template/shared/lib/index.ts b/apps/_template/src/shared/lib/index.ts
similarity index 100%
rename from apps/_template/shared/lib/index.ts
rename to apps/_template/src/shared/lib/index.ts
diff --git a/apps/_template/shared/lib/query-client.ts b/apps/_template/src/shared/lib/query-client.ts
similarity index 100%
rename from apps/_template/shared/lib/query-client.ts
rename to apps/_template/src/shared/lib/query-client.ts
diff --git a/apps/_template/shared/model/index.ts b/apps/_template/src/shared/model/index.ts
similarity index 100%
rename from apps/_template/shared/model/index.ts
rename to apps/_template/src/shared/model/index.ts
diff --git a/apps/_template/shared/ui/index.ts b/apps/_template/src/shared/ui/index.ts
similarity index 100%
rename from apps/_template/shared/ui/index.ts
rename to apps/_template/src/shared/ui/index.ts
diff --git a/apps/_template/shared/ui/page-layout.tsx b/apps/_template/src/shared/ui/page-layout.tsx
similarity index 100%
rename from apps/_template/shared/ui/page-layout.tsx
rename to apps/_template/src/shared/ui/page-layout.tsx
diff --git a/apps/_template/widgets/README.md b/apps/_template/src/widgets/README.md
similarity index 100%
rename from apps/_template/widgets/README.md
rename to apps/_template/src/widgets/README.md
diff --git a/apps/_template/tailwind.config.ts b/apps/_template/tailwind.config.ts
index c02405aca..d19dec7ed 100644
--- a/apps/_template/tailwind.config.ts
+++ b/apps/_template/tailwind.config.ts
@@ -18,9 +18,6 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
       },
-      fontFamily: {
-        sans: ["var(--font-noto-sans-kr)", "Noto Sans KR", "sans-serif"],
-      },
     },
   },
   plugins: [],
diff --git a/apps/_template/tsconfig.json b/apps/_template/tsconfig.json
index 15b023415..dab9b0b8e 100644
--- a/apps/_template/tsconfig.json
+++ b/apps/_template/tsconfig.json
@@ -19,13 +19,7 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"],
-      "@/app/*": ["./app/*"],
-      "@/shared/*": ["./shared/*"],
-      "@/entities/*": ["./entities/*"],
-      "@/features/*": ["./features/*"],
-      "@/widgets/*": ["./widgets/*"],
-      "@/pages/*": ["./pages/*"],
+      "@/*": ["./src/*"],
       "@common/components": ["../../packages/common/components/dist/"],
       "@common/network": ["../../packages/common/network/"]
     }
diff --git a/apps/as/.eslintrc.json b/apps/as/.eslintrc.json
new file mode 100644
index 000000000..ea782d70a
--- /dev/null
+++ b/apps/as/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/apps/dm/.gitignore b/apps/as/.gitignore
similarity index 68%
rename from apps/dm/.gitignore
rename to apps/as/.gitignore
index c1b3c4e38..e43ec0981 100644
--- a/apps/dm/.gitignore
+++ b/apps/as/.gitignore
@@ -1,13 +1,10 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+/node_modules
 /.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
+.pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -27,9 +24,9 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
-# env files (can opt-in for committing if needed)
+# local env files
+.env.*
 
 # vercel
 .vercel
diff --git a/apps/as/.gitkeep b/apps/as/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/as/.prettierrc b/apps/as/.prettierrc
new file mode 100644
index 000000000..059b4e33c
--- /dev/null
+++ b/apps/as/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": false,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/apps/as/README.md b/apps/as/README.md
new file mode 100644
index 000000000..c48c1534a
--- /dev/null
+++ b/apps/as/README.md
@@ -0,0 +1,187 @@
+# Template Application
+
+Next.js 애플리케이션 with FSD(Feature Sliced Design) 아키텍처
+
+## 기술 스택
+
+- **프레임워크**: Next.js 15 + TypeScript
+- **스타일링**: Tailwind CSS
+- **상태관리**: Zustand
+- **데이터 페칭**: TanStack Query (React Query)
+- **폼 관리**: React Hook Form + Zod
+- **테이블**: TanStack Table
+- **HTTP 클라이언트**: Axios
+- **날짜 처리**: Day.js
+
+## 프로젝트 구조 (FSD + Next.js App Router)
+
+이 프로젝트는 **Feature-Sliced Design v2.1**과 **FSD 공식 Next.js 가이드**에 맞춰 구성되어 있습니다. Next.js `app/`은 라우트만 담당하고, 실제 레이어는 `src/` 아래에 있습니다.
+
+```
+_template/
+├── app/                    # Next.js App Router (루트) — 라우트·레이아웃 진입점만
+│   ├── layout.tsx         # 루트 레이아웃 (src/app에서 providers, styles import)
+│   └── (with-base-layout)/
+│       ├── layout.tsx     # BaseLayout 래퍼 (src/app/layouts에서 import)
+│       └── page.tsx       # re-export: export { MainPage as default } from '@/pages/home'
+│
+├── pages/                  # 빈 폴더 + README (Next.js가 src/pages를 Pages Router로 쓰지 않도록)
+│   └── README.md
+│
+└── src/                    # FSD 레이어 (실제 코드)
+    ├── app/                # App 레이어 (슬라이스 없음, 세그먼트만)
+    │   ├── providers/      # 전역 Providers (QueryClient 등)
+    │   ├── styles/         # 글로벌 스타일 (globals.css)
+    │   └── layouts/        # 공통 레이아웃 컴포넌트 (BaseLayoutWrapper)
+    │
+    ├── pages/              # Pages 레이어 (페이지 슬라이스)
+    │   └── home/
+    │       ├── ui/
+    │       └── index.ts    # Public API
+    │
+    ├── widgets/            # Widgets 레이어
+    ├── features/           # Features 레이어
+    ├── entities/           # Entities 레이어
+    └── shared/             # Shared 레이어
+        ├── ui/
+        ├── api/
+        ├── lib/
+        └── config/
+```
+
+### 계층 구조 이해하기
+
+FSD는 **3단계 계층**으로 구성됩니다:
+
+1. **Layers (레이어)**: 책임과 의존성에 따른 수평적 분리 (app, pages, widgets, features, entities, shared)
+2. **Slices (슬라이스)**: 비즈니스 도메인에 따른 수직적 분리 (user, product, auth-login 등)
+3. **Segments (세그먼트)**: 기술적 목적에 따른 분리 (ui, api, model, lib 등)
+
+> 📚 각 레이어의 자세한 설명은 해당 폴더의 README.md를 참고하세요.
+
+## FSD 레이어 설명
+
+FSD는 계층적 아키텍처로, 각 레이어는 책임의 범위와 의존성의 정도에 따라 구분됩니다. 7개의 표준화된 레이어가 있으며, 프로젝트에 필요한 레이어만 사용하면 됩니다.
+
+### 레이어 계층 구조 (위에서 아래로)
+
+```
+app/       ↑ 가장 높은 책임, 가장 많은 의존성
+pages/     |
+widgets/   |
+features/  |
+entities/  |
+shared/    ↓ 가장 낮은 책임, 의존성 없음
+```
+
+### 1. App
+- **목적**: 앱 전체에 영향을 주는 기술적/비즈니스적 사항
+- **내용**: Context providers, 글로벌 스타일, 스토어 설정, 라우터 설정, 애널리틱스
+- **특징**: 슬라이스가 없고 세그먼트로만 구성
+- **의존성**: 모든 하위 레이어 사용 가능
+
+### 2. Pages (src/pages)
+- **목적**: 웹사이트나 애플리케이션을 구성하는 페이지/화면
+- **내용**: 페이지 UI, 로딩 상태, 에러 바운더리, 데이터 fetching
+- **특징**: 한 페이지당 한 슬라이스 (유사한 페이지는 그룹화 가능). Next.js `app/`의 route 파일에서 re-export
+- **의존성**: `widgets`, `features`, `entities`, `shared` 사용 가능
+
+> 💡 **FSD v2.1 권장사항**: "pages-first" 접근 방식을 따라, 재사용되지 않는 큰 UI 블록과 비즈니스 로직은 페이지 슬라이스에 유지하세요.
+
+### 3. Widgets
+- **목적**: 큰 규모의 독립적인 UI 블록
+- **내용**: 여러 features와 entities를 조합한 복합 UI
+- **사용 시기**: 여러 페이지에서 재사용되거나, 페이지에 여러 개의 큰 독립적 블록이 있을 때
+- **의존성**: `features`, `entities`, `shared` 사용 가능 (다른 `widgets` 불가)
+
+### 4. Features
+- **목적**: 사용자가 수행하는 주요 상호작용과 비즈니스 기능
+- **내용**: 사용자 시나리오 (예: 로그인, 상품 검색, 댓글 작성)
+- **사용 시기**: 여러 페이지에서 재사용되는 기능
+- **의존성**: `entities`, `shared` 사용 가능 (다른 `features` 불가)
+
+### 5. Entities
+- **목적**: 비즈니스가 다루는 실제 개념 (User, Product, Order 등)
+- **내용**: 데이터 모델, 타입, API 요청, 엔티티의 시각적 표현
+- **특징**: 비즈니스 용어로 명명
+- **의존성**: 다른 `entities`, `shared` 사용 가능
+
+### 6. Shared
+- **목적**: 애플리케이션의 기반 제공
+- **내용**: API 클라이언트, UI Kit, 유틸리티 라이브러리, 글로벌 설정
+- **특징**: 비즈니스 로직 없음, 슬라이스가 없고 세그먼트로만 구성
+- **의존성**: 외부 라이브러리만 사용 가능 (다른 레이어 불가)
+
+## 시작하기
+
+```bash
+# 의존성 설치
+pnpm install
+
+# 개발 서버 실행
+pnpm run dev
+
+# 프로덕션 빌드
+pnpm run build
+
+# 프로덕션 서버 실행
+pnpm start
+```
+
+## 환경 변수
+
+`.env.local` 파일 생성:
+
+```env
+NEXT_PUBLIC_API_URL=http://localhost:3000/api
+```
+
+## FSD 핵심 규칙
+
+### 1. Import 규칙
+
+> **슬라이스 내의 모듈(파일)은 오직 하위 레이어에 있는 슬라이스만 import할 수 있습니다.**
+
+```typescript
+// ✅ 올바른 import (하위 레이어)
+// features/auth-login/ui/form.tsx
+import { User } from "entities/user";
+import { Button } from "shared/ui/button";
+
+// ❌ 잘못된 import (같은 레이어)
+// features/auth-login/ui/form.tsx
+import { PostForm } from "features/post-create";  // 금지!
+
+// ❌ 잘못된 import (상위 레이어)
+// features/auth-login/ui/form.tsx
+import { Header } from "widgets/header";  // 금지!
+```
+
+### 2. Public API 규칙
+
+> **슬라이스 외부에서는 Public API(index.ts)를 통해서만 접근해야 합니다.**
+
+```typescript
+// ✅ 올바른 import (Public API 사용)
+import { LoginForm } from "features/auth-login";
+
+// ❌ 잘못된 import (내부 구조 직접 접근)
+import { LoginForm } from "features/auth-login/ui/login-form";
+```
+
+**Public API 작성 시 주의사항**:
+- 와일드카드 re-export(`export * from`) 사용 지양
+- 필요한 것만 명시적으로 export
+- 슬라이스의 인터페이스를 명확하게 표현
+
+```typescript
+// ❌ 나쁜 예시
+export * from "./ui/Comment";
+export * from "./model/comments";
+
+// ✅ 좋은 예시
+export { Comment } from "./ui/comment";
+export { CommentForm } from "./ui/comment-form";
+export { useComments } from "./model/use-comments";
+export type { Comment, CommentFormData } from "./model/types";
+```
diff --git a/apps/as/app/(with-base-layout)/acntg-code-management/page.tsx b/apps/as/app/(with-base-layout)/acntg-code-management/page.tsx
new file mode 100644
index 000000000..c22d0f0b4
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/acntg-code-management/page.tsx
@@ -0,0 +1 @@
+export { AcntgCodeManagementPage as default } from "@/pages/acntg-code-management";
diff --git a/apps/as/app/(with-base-layout)/approval-line-management/page.tsx b/apps/as/app/(with-base-layout)/approval-line-management/page.tsx
new file mode 100644
index 000000000..956e03dae
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/approval-line-management/page.tsx
@@ -0,0 +1 @@
+export { ApprovalLineManagementPage as default } from "@/pages/approval-line-management";
diff --git a/apps/as/app/(with-base-layout)/checklist-management/page.tsx b/apps/as/app/(with-base-layout)/checklist-management/page.tsx
new file mode 100644
index 000000000..1c8de0adc
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/checklist-management/page.tsx
@@ -0,0 +1 @@
+export { ChecklistManagementPage as default } from "@/pages/checklist-management";
diff --git a/apps/as/app/(with-base-layout)/cnstp-code-management/page.tsx b/apps/as/app/(with-base-layout)/cnstp-code-management/page.tsx
new file mode 100644
index 000000000..d20a49e4f
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/cnstp-code-management/page.tsx
@@ -0,0 +1 @@
+export { CnstpCodeManagementPage as default } from "@/pages/cnstp-code-management";
diff --git a/apps/as/app/(with-base-layout)/esntl-atch-file-mng/page.tsx b/apps/as/app/(with-base-layout)/esntl-atch-file-mng/page.tsx
new file mode 100644
index 000000000..9516e46c5
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/esntl-atch-file-mng/page.tsx
@@ -0,0 +1 @@
+export { EsntlAtchFileMngPage as default } from "@/pages/esntl-atch-file-mng";
diff --git a/apps/as/app/(with-base-layout)/instl-sncn/[id]/modify/page.tsx b/apps/as/app/(with-base-layout)/instl-sncn/[id]/modify/page.tsx
new file mode 100644
index 000000000..e4718eceb
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/instl-sncn/[id]/modify/page.tsx
@@ -0,0 +1,10 @@
+import { CnfmModifyPage } from "@/pages/instl-sncn";
+
+export default async function InstlSncnModifyPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  return <CnfmModifyPage id={id} />;
+}
diff --git a/apps/as/app/(with-base-layout)/instl-sncn/[id]/page.tsx b/apps/as/app/(with-base-layout)/instl-sncn/[id]/page.tsx
new file mode 100644
index 000000000..3f25c4a3e
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/instl-sncn/[id]/page.tsx
@@ -0,0 +1,10 @@
+import { CnfmViewPage } from "@/pages/instl-sncn";
+
+export default async function InstlSncnViewPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  return <CnfmViewPage id={id} />;
+}
diff --git a/apps/as/app/(with-base-layout)/instl-sncn/page.tsx b/apps/as/app/(with-base-layout)/instl-sncn/page.tsx
new file mode 100644
index 000000000..7cd7bf82e
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/instl-sncn/page.tsx
@@ -0,0 +1,3 @@
+import { CnfmListPage } from "@/pages/instl-sncn";
+
+export default CnfmListPage;
diff --git a/apps/as/app/(with-base-layout)/instl-sncn/register/page.tsx b/apps/as/app/(with-base-layout)/instl-sncn/register/page.tsx
new file mode 100644
index 000000000..ffe6a71a4
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/instl-sncn/register/page.tsx
@@ -0,0 +1,5 @@
+import { CnfmRegistPage } from "@/pages/instl-sncn";
+
+export default function Page(props: any) {
+	return <CnfmRegistPage {...props} />;
+}
diff --git a/apps/as/app/(with-base-layout)/layout.tsx b/apps/as/app/(with-base-layout)/layout.tsx
new file mode 100644
index 000000000..71dd294a8
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/layout.tsx
@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+import { BaseLayoutWrapper } from "@/app/layouts/base-layout";
+
+interface WithBaseLayoutProps {
+  children: ReactNode;
+}
+
+export default function WithBaseLayout({ children }: WithBaseLayoutProps) {
+  return <BaseLayoutWrapper>{children}</BaseLayoutWrapper>;
+}
diff --git a/apps/as/app/(with-base-layout)/page.tsx b/apps/as/app/(with-base-layout)/page.tsx
new file mode 100644
index 000000000..82a918b59
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/page.tsx
@@ -0,0 +1 @@
+export { MainPage as default } from "@/pages/home";
diff --git a/apps/as/app/(with-base-layout)/rvw-mnpw-mng/page.tsx b/apps/as/app/(with-base-layout)/rvw-mnpw-mng/page.tsx
new file mode 100644
index 000000000..01cf17fb5
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/rvw-mnpw-mng/page.tsx
@@ -0,0 +1 @@
+export { RvwMnpwMngPage as default } from "@/pages/rvw-mnpw-mng";
diff --git a/apps/as/app/README.md b/apps/as/app/README.md
new file mode 100644
index 000000000..5ab63ea34
--- /dev/null
+++ b/apps/as/app/README.md
@@ -0,0 +1,169 @@
+# App Layer
+
+**App**은 애플리케이션 전체에 영향을 미치는 기술적, 비즈니스적 사항을 다루는 최상위 레이어입니다.
+
+## 목적
+
+- 애플리케이션의 진입점(entrypoint) 제공
+- 전역 Context Providers 설정
+- 라우터 구성
+- 글로벌 스타일 정의
+- 전역 상태 저장소 설정
+- 애널리틱스 및 모니터링 설정
+
+## 특징
+
+- **슬라이스 없음**: App 레이어는 Shared처럼 슬라이스가 없고 세그먼트로만 구성됩니다
+- **전체 앱 관심사**: 특정 비즈니스 도메인이 아닌 앱 전체와 관련된 코드만 포함
+- **최상위 레이어**: 모든 하위 레이어의 모듈을 자유롭게 import 가능
+
+## 구조 (Next.js App Router)
+
+Next.js를 사용하는 경우, App 레이어는 주로 `app/` 디렉토리로 표현됩니다:
+
+```
+app/
+├── (routes)/              # 라우트 그룹 및 페이지
+│   ├── (auth)/
+│   │   ├── login/
+│   │   │   └── page.tsx
+│   │   └── register/
+│   │       └── page.tsx
+│   └── (main)/
+│       ├── dashboard/
+│       │   └── page.tsx
+│       └── settings/
+│           └── page.tsx
+├── layout.tsx            # 루트 레이아웃
+├── page.tsx              # 홈 페이지
+├── globals.css           # 글로벌 스타일
+├── providers.tsx         # 전역 Providers 설정
+└── error.tsx             # 글로벌 에러 핸들러
+```
+
+### 일반적인 FSD 세그먼트 구조
+
+FSD 표준 세그먼트를 사용하는 경우:
+
+```
+app/
+├── entrypoint/           # 애플리케이션 진입점 (프레임워크별)
+│   └── index.tsx
+├── providers/            # Context Providers
+│   ├── query-provider.tsx
+│   ├── theme-provider.tsx
+│   └── index.tsx
+├── styles/               # 글로벌 스타일
+│   ├── globals.css
+│   └── theme.css
+├── store/                # 글로벌 상태 저장소 설정
+│   └── index.ts
+└── routes/               # 라우터 설정
+    └── index.tsx
+```
+
+## 예시
+
+### Next.js Providers 설정
+
+```typescript
+// app/providers.tsx
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ThemeProvider } from 'next-themes';
+import { useState } from 'react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+      },
+    },
+  }));
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        {children}
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+}
+
+// app/layout.tsx
+import { Providers } from './providers';
+import './globals.css';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ko">
+      <body>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}
+```
+
+### 글로벌 설정
+
+```typescript
+// app/config/analytics.ts
+export function initAnalytics() {
+  if (typeof window !== 'undefined') {
+    // 애널리틱스 초기화
+  }
+}
+
+// app/config/monitoring.ts
+export function initMonitoring() {
+  // 에러 모니터링 설정
+}
+```
+
+## Next.js App Router와 FSD
+
+Next.js의 `app/` 디렉토리는 FSD의 **App 레이어**와 **Pages 레이어**를 동시에 담당합니다:
+
+- **루트 레벨 파일들** (`layout.tsx`, `providers.tsx`, `globals.css`): App 레이어
+- **라우트 폴더들** (`dashboard/`, `login/` 등): Pages 레이어
+
+각 페이지별 비즈니스 로직은:
+- 재사용되지 않는 UI는 페이지 슬라이스(`app/dashboard/` 등) 안에 유지
+- 재사용되는 기능은 `features/` 레이어로 분리
+- 여러 페이지에서 재사용되는 큰 UI 블록은 `widgets/` 레이어로 분리
+
+## 레이어 의존성 규칙
+
+✅ **허용되는 의존성**:
+- 모든 하위 레이어 (`pages`, `widgets`, `features`, `entities`, `shared`)
+- 같은 `app` 레이어 내의 다른 세그먼트
+- 외부 라이브러리
+
+❌ **금지된 의존성**:
+- 없음 (App은 최상위 레이어)
+
+## 주의사항
+
+1. **비대화 방지**: App 레이어가 너무 커지면 관리가 어려워집니다. 대부분의 로직은 하위 레이어에 배치하세요
+2. **전역 관심사만**: 특정 페이지나 기능에만 관련된 코드는 해당 레이어로 이동
+3. **라우터 레벨 로직**: 라우터 및 서버 레벨 로직은 이 레이어에 유지
+4. **Processes 레이어 사용 지양**: Processes 레이어는 deprecated되었으므로 해당 로직은 `app`이나 `features`에 배치
+
+## FSD v2.1 권장사항
+
+최신 FSD 버전(v2.1)은 **"pages-first"** 접근 방식을 권장합니다:
+
+- 더 많은 코드를 페이지 슬라이스에 유지
+- 큰 UI 블록과 재사용되지 않는 비즈니스 로직은 즉시 추출하지 말고 페이지에 보관
+- 실제로 재사용이 필요할 때만 `features`나 `widgets`로 분리
+
+이 접근 방식은 과도한 추상화를 방지하고 코드를 더 쉽게 탐색할 수 있게 합니다.
diff --git a/apps/as/app/api/proxy/[...url]/route.ts b/apps/as/app/api/proxy/[...url]/route.ts
new file mode 100644
index 000000000..15abf4c72
--- /dev/null
+++ b/apps/as/app/api/proxy/[...url]/route.ts
@@ -0,0 +1,111 @@
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  REFRESH_TOKEN,
+  SERVER_API_URL,
+  SITE_ID,
+} from "@/shared/config";
+
+async function handler(
+  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");
+
+  // silent refresh
+  if (isRefreshHandler) {
+    const refreshToken = cookieStore.get(REFRESH_TOKEN);
+    headers[CLAIM_NAME] = refreshToken?.value ?? "";
+
+    if (!headers[CLAIM_NAME]) {
+      return NextResponse.json({ message: "Can't refresh" }, { status: 401 });
+    }
+  }
+
+  try {
+    if (!isRefreshHandler) {
+      body = await request.json();
+    }
+
+    const targetUrl = `${SERVER_API_URL}/${params.url.join("/")}`;
+    console.log(`[Proxy API] ${method} ${params.url.join("/")} -> ${targetUrl}`);
+    console.log(`[Proxy API] Headers:`, headers);
+    if (!isRefreshHandler) {
+      console.log(`[Proxy API] Body:`, body);
+    }
+
+    const result = await fetch(targetUrl, {
+      method,
+      headers,
+      body: JSON.stringify(body),
+    });
+
+    console.log(`[Proxy API] Response Status: ${result.status}`);
+    console.log(`[Proxy API] Response Headers:`, {
+      [ACCESS_TOKEN]: result.headers.get(ACCESS_TOKEN),
+      [REFRESH_TOKEN]: result.headers.get(REFRESH_TOKEN) ? '***hidden***' : undefined,
+      [AUTH_USER_ID]: result.headers.get(AUTH_USER_ID),
+    });
+
+    if (!result.ok) {
+      console.error(`[Proxy API] Request failed with status ${result.status}`);
+      return NextResponse.json({ message: "Invalid Credentials" }, { status: 401 });
+    }
+
+    const accessToken = result.headers.get(ACCESS_TOKEN);
+    const refreshToken = result.headers.get(REFRESH_TOKEN);
+    const userId = result.headers.get(AUTH_USER_ID);
+
+    if (accessToken && userId) {
+      console.log(`[Proxy API] Login successful for user: ${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 actualHost = forwardedHost || host || new URL(request.url).hostname.toString();
+
+      // 운영 환경에서 domain 설정
+      const domain = actualHost.includes("hasuon.or.kr") ? ".hasuon.or.kr" : actualHost;
+
+      if (refreshToken) {
+        cookieStore.set(REFRESH_TOKEN, refreshToken, {
+          httpOnly: true,
+          sameSite: "strict",
+          domain: domain,
+          path: "/",
+        });
+      }
+
+      return response;
+    }
+
+    return NextResponse.json({ message: "Invalid Credentials" }, { status: 401 });
+  } catch (error) {
+    console.error(`[Proxy API] Error caught in handler:`, error);
+    return NextResponse.json({ message: "Server Error", error }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request, props: { params: Promise<{ url: string[] }> }) {
+  const params = await props.params;
+  return handler(request, params, "POST");
+}
+
+export async function PUT(request: Request, props: { params: Promise<{ url: string[] }> }) {
+  const params = await props.params;
+  return handler(request, params, "PUT");
+}
diff --git a/apps/cs/app/auth/login/page.tsx b/apps/as/app/auth/login/page.tsx
similarity index 100%
rename from apps/cs/app/auth/login/page.tsx
rename to apps/as/app/auth/login/page.tsx
diff --git a/apps/as/app/layout.tsx b/apps/as/app/layout.tsx
new file mode 100644
index 000000000..3b64ab52f
--- /dev/null
+++ b/apps/as/app/layout.tsx
@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import { cookies } from "next/headers";
+
+import { Providers } from "@/app/providers";
+
+import "@/app/styles/globals.css";
+
+export const metadata: Metadata = {
+  title: "행정지원시스템",
+  description: "행정지원시스템",
+};
+
+interface RootLayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function RootLayout({ children }: RootLayoutProps) {
+  const theme = (await cookies()).get("site-theme-key");
+
+  return (
+    <html lang="ko" data-theme={theme?.value}>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/as/docs/approval-line-management/SPEC.md b/apps/as/docs/approval-line-management/SPEC.md
new file mode 100644
index 000000000..1ae5e65ae
--- /dev/null
+++ b/apps/as/docs/approval-line-management/SPEC.md
@@ -0,0 +1,407 @@
+# 화면설계서: 결재선 관리
+
+## 1. 기본 정보
+
+| 항목       | 내용                                         |
+| ---------- | -------------------------------------------- |
+| 버전       | 0.3                                          |
+| 프로세스명 | UI설계                                       |
+| 화면명     | 결재선 관리                                  |
+| 화면 유형  | [v] 조회 [v] 입력 [v] 수정 [v] 삭제 [ ] 출력 |
+| 메뉴 경로  | 디지털행정지원 > 시스템관리 > 결재선 관리    |
+
+---
+
+## 2. 화면 목적
+
+전자결재 처리에 사용할 **결재서식**(템플릿)을 등록·관리하고, 각 서식별로 **결재선**(결재구분·결재자·순서)을 구성한다. 상단의 결재서식 목록에서 하나를 선택하면 하단 영역에 해당 서식의 결재선이 표시되며, 사용자는 **그리드 인라인 폼**으로 결재자를 등록·수정한다. **행 추가 또는 한 행 수정 중에는 다른 행을 편집할 수 없다**(단일 행 편집 잠금). 드래그로 순서를 변경한 뒤 **[결재선 저장]** 으로 서버에 반영한다.
+
+---
+
+## 3. 화면 구성
+
+### 3-1. 전체 레이아웃
+
+```
+┌───────────────────────────────────────────────────────────────────────────────────────────────┐
+│  페이지 타이틀: 결재선 관리                                 브레드크럼: 디지털행정지원 > … >  │
+├───────────────────────────────────────────────────────────────────────────────────────────────┤
+│  [영역 A] 전자결재선 관리 목록                              [서식 등록]                       │
+│  ┌──────────────────────────────────────────────────────────────────────┐                     │
+│  │ 전자결재서식아이디 | 결재서식명 | 문서구분 | 등록일시 | 관리         │                     │
+│  ├──────────────────────────────────────────────────────────────────────┤                     │
+│  │  TMPL-0001 (선택 행 강조)  …                            [수정][삭제] │                     │
+│  └──────────────────────────────────────────────────────────────────────┘                     │
+├───────────────────────────────────────────────────────────────────────────────────────────────┤
+│  [영역 B] 결재선 관리                                선택된 서식: TMPL-0001  [결재선 저장]    │
+│  ┌─────────────────────────────────────────────────────────────────────────────────────────┐  │
+│  │ [영역 B-2] 결재선 그리드 (인라인 편집 + 행 드래그 — @dnd-kit)                           │  │
+│  │ ⋮⋮ | 결재선아이디 | 결재순서 | 결재구분 ▼  | 결재자 [선택]    | 등록일시 | 관리         │  │
+│  │ ⋮⋮ | APLN-0001    | [ 1 ]    | [검토자 ▼]  | [김민수  ][선택] | …        | [저장][삭제] │  │
+│  │ ⋮⋮ | (신규)       | [ 2 ]    | [승인자 ▼]  | [       ][선택]  | —        | [저장][취소] │  │
+│  └─────────────────────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                  [행 추가]    │
+│  ※ 결재자 등록·수정은 그리드 셀에서 직접 입력. 검토인력만 [선택] 팝업/다이얼로그              │
+│  ※ 행 추가·수정 중: 해당 행만 편집 가능, 나머지 행·[행 추가]·드래그 비활성                    │
+└───────────────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+### 3-2. 화면 데이터 흐름
+
+```
+BEGIN
+
+  // 최초 진입
+  CALL GET /as-elapr-service/api/v1/elapr-tmplt
+  DISPLAY 결재서식 그리드 (영역 A)
+  DISPLAY 빈 상태 안내 (영역 B)            // 서식 미선택 시 그리드·툴바 비활성
+
+  // 영역 A: 서식 행 선택
+  ON 영역 A 행 CLICK DO
+      SET 선택된 서식 = 행.elaprTmpltId
+      CALL GET /as-elapr-service/api/v1/elapr-apln?elaprTmpltId={id}
+      DISPLAY 결재선 그리드 (영역 B-2) — 조회 모드
+  END ON
+
+  // 영역 A: 신규 서식 등록
+  ON [서식 등록] 버튼 CLICK DO
+      OPEN 결재서식 등록 다이얼로그
+      ON 확인 DO
+          CALL POST /as-elapr-service/api/v1/elapr-tmplt
+          CALL GET /as-elapr-service/api/v1/elapr-tmplt
+      END ON
+  END ON
+
+  // 영역 A: 서식 수정·삭제 (다이얼로그 유지)
+  ON 영역 A [수정] / [삭제] DO
+      (기존과 동일 — PUT / DELETE elapr-tmplt)
+  END ON
+
+  // 영역 B: 행 추가 (인라인 신규 행)
+  ON [행 추가] 버튼 CLICK DO
+      VALIDATE 서식 선택됨
+      VALIDATE 편집 중인 행 없음 (editingRowKey == null)
+      ADD 영역 B-2 그리드 맨 아래 편집 가능 행
+          SET editingRowKey = rowKey (draft-{timestamp})
+          SET 편집상태 = 신규
+          SET aplnId = 미설정 (POST 저장 시 서버 fn_gen_apln_id 발급)
+          SET atrzSeqNo = 현재 행 수 + 1
+          SET atrzSeComCd, aprvrUuid = 빈 값
+      DISABLE 나머지 행 편집 · [행 추가] · 드래그 · [결재선 저장](정책에 따라)
+  END ON
+
+  // 영역 B-2: 기존 행 수정 진입
+  ON 행별 [수정] CLICK DO
+      VALIDATE 편집 중인 행 없음
+      SET editingRowId = 행.aplnId
+      SET 해당 행만 편집 모드
+      DISABLE 나머지 행 편집 · [행 추가] · 드래그
+  END ON
+
+  // 영역 B-2: 인라인 편집
+  ON 그리드 셀 변경 DO
+      VALIDATE 변경 대상 행 == editingRowId
+      SET 해당 행 dirty = true
+  END ON
+
+  ON 셀 [선택] (검토인력) CLICK DO
+      OPEN 검토인력 선택 다이얼로그 (단일 선택)
+      ON 선택 DO
+          SET 행.aprvrUuid = 선택인력.uuid
+          SET 행.aprvrNm = 선택인력.성명   // UI 표시용 (응답 DTO에 없음 — 로컬 보조 필드)
+      END ON
+  END ON
+
+  // 영역 B-2: 행별 저장
+  ON 행별 [저장] CLICK DO
+      VALIDATE atrzSeComCd, aprvrUuid, atrzSeqNo
+      IF 편집상태 = 신규 THEN
+          CALL POST /as-elapr-service/api/v1/elapr-apln
+      ELSE
+          CALL PUT /as-elapr-service/api/v1/elapr-apln/{aplnId}
+      END IF
+      CALL GET /as-elapr-service/api/v1/elapr-apln?elaprTmpltId={id}
+      CLEAR editingRowId
+      ENABLE 전체 행 조회 모드 · [행 추가] · 드래그
+  END ON
+
+  // 영역 B: 결재선 저장 (드래그 순서 일괄 반영)
+  ON [결재선 저장] 버튼 CLICK DO
+      VALIDATE 서식 선택됨
+      VALIDATE 편집 중인 행 없음
+      REORDER atrzSeqNo = 그리드 행 순서 (1..n)
+      FOR EACH dirty 또는 순서 변경된 행 DO
+          CALL PUT /as-elapr-service/api/v1/elapr-apln/{aplnId}  // atrzSeqNo 등 반영
+      END FOR
+      FOR EACH 신규 미저장 행 DO
+          CALL POST /as-elapr-service/api/v1/elapr-apln
+      END FOR
+      CALL GET /as-elapr-service/api/v1/elapr-apln?elaprTmpltId={id}
+      TOAST "결재선이 저장되었습니다."
+  END ON
+
+  // 영역 B-2: 행 드래그
+  ON 영역 B-2 행 DRAG END DO
+      VALIDATE 편집 중인 행 없음
+      REORDER 그리드 행
+      SET 각 행 atrzSeqNo = 행 인덱스 + 1 (UI 즉시 반영, 서버는 [결재선 저장] 또는 행별 [저장])
+  END ON
+
+  // 영역 B-2: 행 삭제
+  ON 행별 [삭제] CLICK DO
+      CONFIRM "선택한 결재선을 삭제하시겠습니까?"
+      IF 서버 저장된 행 THEN
+          CALL DELETE /as-elapr-service/api/v1/elapr-apln/{aplnId}
+      END IF
+      REMOVE 그리드 행 (신규 미저장 행은 API 호출 없이 제거)
+      CALL GET /as-elapr-service/api/v1/elapr-apln?elaprTmpltId={id}
+  END ON
+
+  ON 행별 [취소] CLICK DO   // 신규·수정 공통
+      IF 편집상태 = 신규 THEN REMOVE 임시 행
+      ELSE RESTORE 행 스냅샷 (수정 취소)
+      CLEAR editingRowId
+      ENABLE 전체 행 조회 모드 · [행 추가] · 드래그
+  END ON
+
+END
+```
+
+---
+
+## 4. 영역 A: 전자결재선 관리 목록
+
+선택된 결재서식이 영역 B의 작업 대상이 된다. 행 클릭으로 선택 상태를 표시(좌측 컬러 바·배경 강조)한다.
+
+### 4-1. 헤더 / 툴바
+
+| 항목        | 내용                                            |
+| ----------- | ----------------------------------------------- |
+| 섹션 타이틀 | 전자결재선 관리 목록                            |
+| 우측 버튼   | **[서식 등록]** — 결재서식 등록 다이얼로그 오픈 |
+
+### 4-2. 그리드 컬럼
+
+| 컬럼명             | Field          | 타입   | 비고                                    |
+| ------------------ | -------------- | ------ | --------------------------------------- |
+| 전자결재서식아이디 | `elaprTmpltId` | string | 등록 시 서버(DB 함수) 자동 발급         |
+| 결재서식명         | `elaprTmpltNm` | string |                                         |
+| 문서구분           | `docSeComNm`   | string | 코드 `docSeComCd`, 상위코드 `ASDOCSECD` |
+| 등록일시           | `regDt`        | string | `yyyy-MM-dd HH:mm:ss`                   |
+| 관리               | —              | —      | 행별 **[수정] · [삭제]** 버튼           |
+
+- 행 클릭 시: `elaprTmpltId` 선택 → 영역 B 라벨·B-2 그리드 갱신.
+- 페이지네이션: Spring `Pageable` (`page`, `size`, `sort`).
+
+### 4-3. 버튼
+
+| 버튼명    | 위치           | 동작                                            |
+| --------- | -------------- | ----------------------------------------------- |
+| 서식 등록 | 섹션 우측 상단 | 결재서식 등록 다이얼로그 오픈                   |
+| 수정      | 행별           | 결재서식 수정 다이얼로그 (기존 값 초기화)       |
+| 삭제      | 행별           | 확인 후 삭제. 선택 중인 서식이면 영역 B 초기화. |
+
+### 4-4. 다이얼로그(개요)
+
+| 다이얼로그명       | 트리거      | 입력 항목                                       | 비고                                      |
+| ------------------ | ----------- | ----------------------------------------------- | ----------------------------------------- |
+| 결재서식 등록      | [서식 등록] | `elaprTmpltNm`, `docSeComCd`                    | `elaprTmpltExpln` 선택, ID는 저장 후 응답 |
+| 결재서식 수정      | 행별 [수정] | `elaprTmpltNm`, `docSeComCd`, `elaprTmpltExpln` | ID는 변경 불가                            |
+| 결재서식 삭제 확인 | 행별 [삭제] | (확인/취소)                                     |                                           |
+
+---
+
+## 5. 영역 B: 결재선 관리
+
+영역 A에서 선택된 `elaprTmpltId` 기준으로 결재선을 관리한다. **등록·수정은 B-2 그리드 인라인 폼**으로 수행하며, 검토인력 지정만 **[선택]** 보조 다이얼로그를 사용한다.
+
+### 5-1. 헤더 / 툴바
+
+| 항목        | 내용                                                                                                                        |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------- |
+| 섹션 타이틀 | 결재선 관리                                                                                                                 |
+| 우측 라벨   | `선택된 서식: {elaprTmpltId}` — 미선택 시 영역 B 비활성                                                                     |
+| 우측 버튼   | **[행 추가]** — 편집 중인 행이 없을 때만 활성 · **[결재선 저장]** — 편집 중인 행이 없을 때만 활성(순서·미저장 행 일괄 반영) |
+
+### 5-2. 영역 B-2: 결재선 그리드 (인라인 편집)
+
+#### 그리드 컬럼
+
+| 컬럼명        | Field         | 입력 UI (편집 모드)                                                                       | 비고                                           |
+| ------------- | ------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------- |
+| (드래그 핸들) | —             | —                                                                                         | `useSortable` 연동                             |
+| 결재선아이디  | `aplnId`      | 읽기 전용                                                                                 | 신규 행: `—`, 저장 후 서버 `aplnId` 표시       |
+| 결재순서번호  | `atrzSeqNo`   | 읽기 전용 (그리드 행 순서 1부터 표시)                                                     | 저장 시 행 순서 기준 자동 채번                 |
+| 결재구분      | `atrzSeComCd` | Select (`ATRZSECD` 공통코드)                                                              | 표시명 `atrzSeComNm` (조회 행)                 |
+| 결재자        | `aprvrUuid`   | 읽기 전용 이름 + **[선택]** 버튼                                                          | 응답에 성명 없음 — 선택 시 로컬 `aprvrNm` 유지 |
+| 등록일시      | `regDt`       | 읽기 전용                                                                                 | 신규 행은 `—`                                  |
+| 관리          | —             | 편집 중인 행: **[저장] [취소]** · 조회 행: **[수정] [삭제]** (다른 행 편집 중이면 비활성) |
+
+#### 인라인 편집 정책
+
+| 항목                | 내용                                                                                                                            |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| **단일 행 편집**    | **행 추가 또는 한 행 수정 중에는 다른 행을 편집할 수 없다.** `editingRowId` 로 현재 편집 행 1건만 허용.                         |
+| 편집 잠금 시 비활성 | 다른 행: 셀·[수정]·[삭제] 비활성 · `[행 추가]` 비활성 · 행 드래그 비활성 · (선택) `[결재선 저장]` 비활성                        |
+| 편집 해제           | 행별 **[저장]** 성공 또는 **[취소]** 시 `editingRowId` 초기화 후 전체 조회 모드 복귀                                            |
+| 조회 행             | 편집 중이 아닐 때 읽기 전용. **[수정]** 클릭 시 해당 행만 편집 모드 진입                                                        |
+| 신규 행             | `[행 추가]` 시 맨 아래 편집 행 1건 생성 (`editingRowId` = 임시 키)                                                              |
+| 필수값              | `atrzSeComCd`, `aprvrUuid`                                                                                                      |
+| 순서 중복           | 저장 시 행 순서로 자동 채번하므로 중복 없음                                                                                     |
+| 결재구분 코드       | `ATRZSECD` — 예: `ATRZ01` 검토자, `ATRZ02` 승인자, `ATRZ03` 최종승인자                                                          |
+| **순서 제약**       | `ATRZ01`은 최상단 블록, `ATRZ03`은 최하단 블록. 드래그 종료·저장 시 `validateAtrzOrder`로 검증, 위반 시 적용/저장 불가 (결재구분 변경 시에는 미검증) |
+| 저장 단위           | 행별 **[저장]** (단건 POST/PUT) 또는 툴바 **[결재선 저장]** (일괄)                                                              |
+
+#### 행 드래그 정렬 (`@dnd-kit` + `useSortable`)
+
+| 항목       | 내용                                                                                                    |
+| ---------- | ------------------------------------------------------------------------------------------------------- |
+| 목적       | 결재 단계 순서를 그리드에서 직접 변경                                                                   |
+| 라이브러리 | `@dnd-kit/core`, `@dnd-kit/sortable` — 테이블 행 POC 후 확정                                            |
+| 저장 시점  | 드래그는 클라이언트 상태만 변경 → **[결재선 저장]** 또는 행별 **[저장]** 시 `atrzSeqNo` PUT             |
+| 편집 중    | `editingRowKey != null` 이면 드래그 **불가**                                                            |
+| 순서 제약  | 드래그 종료 시 `validateAtrzOrder` — 실패하면 순서 변경 미적용 + 안내. 결재구분 미선택 행은 드래그 불가 |
+
+### 5-3. 보조 다이얼로그 (검토인력만)
+
+| 다이얼로그명  | 트리거                  | 결과                               |
+| ------------- | ----------------------- | ---------------------------------- |
+| 검토인력 선택 | 그리드 결재자 셀 [선택] | `aprvrUuid` 및 UI용 `aprvrNm` 반영 |
+
+> 결재자 **등록·수정 다이얼로그는 사용하지 않음** (v0.2 변경).
+
+---
+
+## 6. API/DTO 명세
+
+### 6-1. 공통
+
+| 항목        | 내용                                                          |
+| ----------- | ------------------------------------------------------------- |
+| 서비스      | `as-elapr-service`                                            |
+| Base prefix | `/as-elapr-service/api/v1` (프록시 경유)                      |
+| 인증        | JWT (`Authorization` 헤더)                                    |
+| 페이징      | Spring `Pageable`: `page`, `size`, `sort` → `PageResponse<T>` |
+| 엔티티      | `@/entities/elapr` (`elaprTmpltService`, `elaprAplnService`)  |
+
+### 6-2. 전자결재서식 (영역 A) — `elapr-tmplt`
+
+| 기능      | Method | URL                           | Request / Query                            | Response           | 클라이언트                   |
+| --------- | ------ | ----------------------------- | ------------------------------------------ | ------------------ | ---------------------------- |
+| 목록 조회 | GET    | `/elapr-tmplt`                | Query: `ElaprTmpltSearchParams` + Pageable | `Page<ElaprTmplt>` | `elaprTmpltService.findPage` |
+| 단건 조회 | GET    | `/elapr-tmplt/{elaprTmpltId}` | —                                          | `ElaprTmplt`       | `elaprTmpltService.findById` |
+| 등록      | POST   | `/elapr-tmplt`                | `ElaprTmpltSaveRequest`                    | `ElaprTmplt` (201) | `elaprTmpltService.create`   |
+| 수정      | PUT    | `/elapr-tmplt/{elaprTmpltId}` | `ElaprTmpltUpdateRequest`                  | `ElaprTmplt`       | `elaprTmpltService.update`   |
+| 삭제      | DELETE | `/elapr-tmplt/{elaprTmpltId}` | —                                          | 204                | `elaprTmpltService.remove`   |
+
+**ElaprTmplt (응답)**
+
+| Field             | 타입    | 설명               |
+| ----------------- | ------- | ------------------ |
+| `elaprTmpltId`    | string  | 전자결재서식아이디 |
+| `elaprTmpltNm`    | string  | 결재서식명         |
+| `elaprTmpltExpln` | string? | 서식 설명          |
+| `docSeComCd`      | string? | 문서구분 코드      |
+| `docSeComNm`      | string? | 문서구분명         |
+| `regDt`           | string? | 등록일시           |
+
+**ElaprTmpltSaveRequest**: `elaprTmpltNm`\_, `elaprTmpltExpln?`, `docSeComCd?`
+
+**ElaprTmpltUpdateRequest**: `elaprTmpltNm`\*, `elaprTmpltExpln?`, `docSeComCd?`
+
+**ElaprTmpltSearchParams**: `elaprTmpltNm?`, `docSeComCd?`, `regDtStart?`, `regDtEnd?` + `page`, `size`, `sort`
+
+### 6-3. 결재선 (영역 B) — `elapr-apln`
+
+| 기능      | Method | URL                    | Request / Query                 | Response          | 클라이언트                  |
+| --------- | ------ | ---------------------- | ------------------------------- | ----------------- | --------------------------- |
+| 목록 조회 | GET    | `/elapr-apln`          | Query: `elaprTmpltId`, Pageable | `Page<ElaprApln>` | `elaprAplnService.findPage` |
+| 단건 조회 | GET    | `/elapr-apln/{aplnId}` | —                               | `ElaprApln`       | `elaprAplnService.findById` |
+| 등록      | POST   | `/elapr-apln`          | `ElaprAplnSaveRequest`          | `ElaprApln` (201) | `elaprAplnService.create`   |
+| 수정      | PUT    | `/elapr-apln/{aplnId}` | `ElaprAplnUpdateRequest`        | `ElaprApln`       | `elaprAplnService.update`   |
+| 삭제      | DELETE | `/elapr-apln/{aplnId}` | —                               | 204               | `elaprAplnService.remove`   |
+
+> **일괄 저장 API 없음** — UI의 [결재선 저장]은 변경된 행에 대해 POST/PUT을 순차(또는 병렬) 호출하는 클라이언트 오케스트레이션으로 구현.
+
+**ElaprApln (응답)**
+
+| Field          | 타입    | 설명               |
+| -------------- | ------- | ------------------ |
+| `aplnId`       | string  | 결재선아이디       |
+| `elaprTmpltId` | string  | 전자결재서식아이디 |
+| `aprvrUuid`    | string? | 결재자 UUID        |
+| `atrzSeComCd`  | string? | 결재구분 코드      |
+| `atrzSeComNm`  | string? | 결재구분명         |
+| `atrzSeqNo`    | number? | 결재순서번호       |
+| `regDt`        | string? | 등록일시           |
+
+**ElaprAplnSaveRequest**: `elaprTmpltId`\_, `aprvrUuid?`, `atrzSeComCd?`, `atrzSeqNo?`
+
+**ElaprAplnUpdateRequest**: `elaprTmpltId`\*, `aprvrUuid?`, `atrzSeComCd?`, `atrzSeqNo?`
+
+### 6-4. 검토인력 (보조)
+
+| 기능               | Method | URL | 비고                        |
+| ------------------ | ------ | --- | --------------------------- |
+| 검토인력 목록 조회 | TBD    | TBD | 사용자 서비스 또는 별도 API |
+
+### 6-5. Backend ↔ 화면 필드 매핑 (구 SPEC 대비)
+
+| 구 SPEC 필드      | 백엔드 필드                                          |
+| ----------------- | ---------------------------------------------------- |
+| `elctAtrzTmpltId` | `elaprTmpltId`                                       |
+| `atrzTmpltNm`     | `elaprTmpltNm`                                       |
+| `docSeNm`         | `docSeComNm`                                         |
+| `atrzLineId`      | `aplnId`                                             |
+| `atrzSeNm`        | `atrzSeComNm`                                        |
+| `atrzUserNm`      | (없음) `aprvrUuid` + 사용자 조회/선택 시 로컬 표시명 |
+
+---
+
+## 7. UI 구현 가이드
+
+### 7-1. 기술 스택·원칙
+
+- **공통 컴포넌트**: `@common/components`
+- **테이블**: `@tanstack/react-table` + 인라인 편집 셀 (`Select`, `Input`, `Button`)
+- **드래그**: `@dnd-kit` — B-2 행 정렬 (POC 필수)
+- **데이터**: React Query — `@/entities/elapr` hooks
+- **상태**: 선택된 `elaprTmpltId`, `editingRowId` (단일 행 편집 잠금), B-2 행 배열(dirty·신규·`aprvrNm`·수정 전 스냅샷)
+- **모의 데이터**: API 연동 전 `@faker-js/faker`
+
+### 7-2. 모듈·파일 배치(제안)
+
+| 구분   | 경로                                                                                   |
+| ------ | -------------------------------------------------------------------------------------- |
+| 라우트 | `apps/as/app/(with-base-layout)/approval-line-management/page.tsx`                     |
+| 페이지 | `apps/as/src/pages/approval-line-management/` (Public API: page만 export)              |
+| UI     | `.../ui/elapr-tmplt-list.tsx`, `elapr-tmplt-form-dialog.tsx`, `elapr-apln-grid.tsx` 등 |
+| model  | `.../model/columns.tsx`, `apln-row-types.ts`, `mock-reviewers.ts`                      |
+| lib    | `.../lib/use-apln-rows.ts`, `validators.ts`, `use-dnd-sensors.ts`                      |
+| 엔티티 | `apps/as/src/entities/elapr/`                                                          |
+
+### 7-3. 영역별 UI 매핑
+
+| 영역   | 주요 UI                                                                                      |
+| ------ | -------------------------------------------------------------------------------------------- |
+| A      | DataTable + 행 선택 + 서식 등록/수정 다이얼로그                                              |
+| B 헤더 | 상태 라벨 + `행 추가`, `결재선 저장`                                                         |
+| B-2    | 인라인 편집 DataTable + `editingRowId` 단일 행 잠금 + 드래그 핸들 + 행별 수정/저장/삭제/취소 |
+| 공통   | 서식 Dialog, 검토인력 선택 Dialog만                                                          |
+
+### 7-4. 데이터 흐름(요약)
+
+- **진입**: `useElaprTmpltPage` → 영역 A. B 비활성.
+- **서식 선택**: `useElaprAplnPage({ elaprTmpltId })` → B-2.
+- **행 추가**: `editingRowId` 없을 때만 가능 → 신규 행 1건 편집 잠금 → 저장/취소 후 해제.
+- **인라인 수정**: [수정]으로 `editingRowId` 설정 → 해당 행만 편집 → `useUpdateElaprApln` 후 해제.
+- **드래그**: `editingRowId == null` 일 때만 가능 → 로컬 `atrzSeqNo` 재부여 → 일괄 PUT.
+- **삭제**: `useDeleteElaprApln` 또는 신규 행 로컬 제거.
+
+### 7-5. 미확정 / 검증 필요
+
+- 검토인력 API 경로·DTO.
+- `@dnd-kit` + react-table 행 인라인 Input 동시 적용 POC.
+- 결재자 성명 표시: `aprvrUuid` → 사용자명 조회 API.
+- 영역 A·B 페이지네이션·검색 UI 노출 여부.
+- 권한(역할별 CRUD).
diff --git a/apps/as/docs/checklist-management/SPEC.md b/apps/as/docs/checklist-management/SPEC.md
new file mode 100644
index 000000000..927b6c53a
--- /dev/null
+++ b/apps/as/docs/checklist-management/SPEC.md
@@ -0,0 +1,487 @@
+# 화면설계서: 체크리스트관리
+
+## 1. 기본 정보
+
+| 항목       | 내용                                         |
+| ---------- | -------------------------------------------- |
+| 버전       | 0.1                                          |
+| 프로세스명 | UI설계                                       |
+| 화면명     | 체크리스트관리                               |
+| 화면 유형  | [v] 조회 [v] 입력 [v] 수정 [v] 삭제 [ ] 출력 |
+| 메뉴 경로  | 디지털행정지원 > 시스템관리 > 체크리스트관리 |
+
+---
+
+## 2. 화면 목적
+
+업무별·문서별 **점검표**(체크리스트)를 등록·관리하고, **점검항목** 마스터를 유지한다. 상단 좌측에서 점검표를 선택하면 하단 **체크리스트 항목** 영역에 해당 점검표의 검토 구성(계층형 검토내용)을 편집한다. 상단 우측 **점검항목 관리**는 점검표에 연결할 항목 풀을 등록·수정·삭제한다.
+
+---
+
+## 3. 화면 구성
+
+### 3-1. 전체 레이아웃
+
+```
+┌───────────────────────────────────────────────────────────────────────────────────────────────┐
+│  페이지 타이틀: 체크리스트관리                              브레드크럼: 디지털행정지원 > … >  │
+├──────────────────────────────────────────────┬────────────────────────────────────────────────┤
+│  [영역 A] 점검표 관리                        │  [영역 B] 점검항목 관리                        │
+│                              [점검표 추가]   │                              [점검항목 추가]   │
+│  ┌────────────────────────────────────────┐  │  ┌──────────────────────────────────────────┐  │
+│  │ 점검표일련번호 | 점검표명 | 문서구분   │  │  │ 점검항목코드 | 점검항목명 | 사용여부     │  │
+│  │ 업무구분 | 사용여부 | 등록일시 | 관리  │  │  │ 등록일시 | 관리                          │  │
+│  ├────────────────────────────────────────┤  │  ├──────────────────────────────────────────┤  │
+│  │ 1 (선택 행 강조)         [관리] [삭제] │  │  │ ITEM_001 요건검토 …         [관리][삭제] │  │
+│  │                                        │  │  │ ITEM_002 법령검토 …         [관리][삭제] │  │
+│  └────────────────────────────────────────┘  │  └──────────────────────────────────────────┘  │
+├──────────────────────────────────────────────┴────────────────────────────────────────────────┤
+│  [영역 C] 체크리스트 항목                                         [미리보기]  [추가]  [저장]  │
+│  ┌─────────────────────────────────────────────────────────────────────────────────────────┐  │
+│  │ 점검항목 ▼        | 주요 검토내용            | 사용 여부            | 구분  | 관리      │  │
+│  │ L1 [요건검토 ▼]   | (입력)                   | ○예 ○아니오          | 1단계 | [하위추가]│  │
+│  │ L2 [요건검토 ▼]   | (입력)                   | ○예 ○아니오          | 2단계 | [삭제]    │  │
+│  └─────────────────────────────────────────────────────────────────────────────────────────┘  │
+└───────────────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+### 3-2. 화면 데이터 흐름
+
+```
+BEGIN
+
+  // 최초 진입
+  CALL GET /as-checklist-service/api/v1/cklst
+  DISPLAY 점검표 그리드 (영역 A)
+  CALL GET /as-checklist-service/api/v1/cklst-artcl
+  DISPLAY 점검항목 그리드 (영역 B)
+  DISPLAY 빈 상태 안내 (영역 C)            // 점검표 미선택 시 C 비활성
+
+  // 영역 A: 점검표 행 선택
+  ON 영역 A 행 CLICK DO
+      SET 선택된 점검표 = 행.cklstSn
+      CALL GET /as-checklist-service/api/v1/cklst-rvw?cklstSn={cklstSn}
+      // TBD: 점검표 단위 전체 검토 트리 조회 API — 현재는 항목별 by-artcl 조합 또는 클라이언트 병합
+      DISPLAY 체크리스트 항목 그리드 (영역 C)
+  END ON
+
+  // 영역 A: 점검표 추가
+  ON [점검표 추가] 버튼 CLICK DO
+      OPEN 점검표 추가 다이얼로그
+      ON [저장] DO
+          VALIDATE cklstNm, taskSeComCd
+          CALL POST /as-checklist-service/api/v1/cklst
+          CALL GET /as-checklist-service/api/v1/cklst
+          CLOSE 다이얼로그
+      END ON
+      ON [취소] / [닫기] DO
+          CLOSE 다이얼로그
+      END ON
+  END ON
+
+  // 영역 A: 점검표 수정·삭제
+  ON 영역 A 행 [관리] CLICK DO
+      OPEN 점검표 수정 다이얼로그 (기존 값 초기화)
+      ON [저장] DO
+          CALL PUT /as-checklist-service/api/v1/cklst/{cklstSn}
+          CALL GET /as-checklist-service/api/v1/cklst
+      END ON
+  END ON
+
+  ON 영역 A 행 [삭제] CLICK DO
+      CONFIRM "선택한 점검표를 삭제하시겠습니까?"
+      CALL DELETE /as-checklist-service/api/v1/cklst/{cklstSn}
+      IF 삭제 대상 == 선택된 점검표 THEN RESET 영역 C
+      CALL GET /as-checklist-service/api/v1/cklst
+  END ON
+
+  // 영역 B: 점검항목 추가
+  ON [점검항목 추가] 버튼 CLICK DO
+      OPEN 점검항목 추가 다이얼로그
+      ON [저장] DO
+          VALIDATE cklstArtclNm
+          // TBD: cklstSn 필수 — UI에 소속 점검표 선택 없음. 백엔드 정책 확인
+          CALL POST /as-checklist-service/api/v1/cklst-artcl
+          CALL GET /as-checklist-service/api/v1/cklst-artcl
+          CLOSE 다이얼로그
+      END ON
+  END ON
+
+  // 영역 B: 점검항목 수정·삭제
+  ON 영역 B 행 [관리] CLICK DO
+      OPEN 점검항목 수정 다이얼로그
+      ON [저장] DO
+          CALL PUT /as-checklist-service/api/v1/cklst-artcl/{cklstArtclSn}/{cklstSn}
+      END ON
+  END ON
+
+  ON 영역 B 행 [삭제] CLICK DO
+      CONFIRM "선택한 점검항목을 삭제하시겠습니까?"
+      CALL DELETE /as-checklist-service/api/v1/cklst-artcl/{cklstArtclSn}/{cklstSn}
+      CALL GET /as-checklist-service/api/v1/cklst-artcl
+  END ON
+
+  // 영역 C: 검토 행 추가
+  ON [추가] 버튼 CLICK DO
+      VALIDATE 선택된 점검표 존재
+      ADD 영역 C 그리드 맨 아래 편집 가능 행 (1단계, rvwCnLvNo=1)
+  END ON
+
+  // 영역 C: 하위 검토 추가
+  ON 행 [하위추가] CLICK DO
+      ADD 부모행 하위 편집 행 (2단계, upCklstRvwSn=부모.cklstRvwSn, rvwCnLvNo=2)
+  END ON
+
+  // 영역 C: 일괄 저장
+  ON [저장] 버튼 CLICK DO
+      VALIDATE 선택된 점검표 존재
+      FOR EACH 신규·변경된 검토 행 DO
+          IF 신규 THEN
+              CALL POST /as-checklist-service/api/v1/cklst-rvw
+          ELSE
+              CALL PUT /as-checklist-service/api/v1/cklst-rvw/{cklstRvwSn}/{cklstArtclSn}/{cklstSn}
+          END IF
+      END FOR
+      CALL GET /as-checklist-service/api/v1/cklst-rvw?cklstSn={cklstSn}
+      TOAST "체크리스트 항목이 저장되었습니다."
+  END ON
+
+  // 영역 C: 행 삭제
+  ON 행 [삭제] CLICK DO
+      CONFIRM "선택한 항목을 삭제하시겠습니까?"
+      IF 서버 저장된 행 THEN
+          CALL DELETE /as-checklist-service/api/v1/cklst-rvw/{cklstRvwSn}/{cklstArtclSn}/{cklstSn}
+      END IF
+      REMOVE 그리드 행 (미저장 행은 API 호출 없이 제거)
+  END ON
+
+  // 영역 C: 미리보기
+  ON [미리보기] 버튼 CLICK DO
+      OPEN 체크리스트 미리보기 다이얼로그 (읽기 전용 트리)
+      // TBD: 미리보기 UI·API
+  END ON
+
+END
+```
+
+---
+
+## 4. 영역 A: 점검표 관리
+
+선택된 점검표가 영역 C의 편집 대상이 된다. 행 클릭으로 선택 상태를 표시한다.
+
+### 4-1. 헤더 / 툴바
+
+| 항목        | 내용                                       |
+| ----------- | ------------------------------------------ |
+| 섹션 타이틀 | 점검표 관리                                |
+| 우측 버튼   | **[점검표 추가]** — 점검표 등록 다이얼로그 |
+
+### 4-2. 그리드 컬럼
+
+| 컬럼명           | Field         | 타입   | 비고                                                 |
+| ---------------- | ------------- | ------ | ---------------------------------------------------- |
+| 점검표일련번호   | `cklstSn`     | number | PK                                                   |
+| 점검표명         | `cklstNm`     | string |                                                      |
+| 문서구분공통코드 | `docSeComCd`  | string | 코드명 표시 — `ASDOCSECD` 등 공통코드 (TBD 상위코드) |
+| 업무구분공통코드 | `taskSeComCd` | string | RE/SF/SP 등 — 공통코드 (TBD 상위코드)                |
+| 사용여부         | `useYn`       | string | `Y`→예, `N`→아니오                                   |
+| 등록일시         | `regDt`       | string | `yyyy-MM-dd HH:mm:ss`                                |
+| 관리             | —             | —      | 행별 **[관리] · [삭제]**                             |
+
+- 행 클릭 시: `cklstSn` 선택 → 영역 C 헤더·그리드 갱신.
+- 페이지네이션: Spring `Pageable` (`page`, `size`, `sort`).
+
+### 4-3. 버튼
+
+| 버튼명      | 위치           | 동작                                              |
+| ----------- | -------------- | ------------------------------------------------- |
+| 점검표 추가 | 섹션 우측 상단 | 점검표 추가 다이얼로그 오픈                       |
+| 관리        | 행별           | 점검표 수정 다이얼로그 (기존 값 초기화)           |
+| 삭제        | 행별           | 확인 후 삭제. 선택 중인 점검표이면 영역 C 초기화. |
+
+### 4-4. 다이얼로그: 점검표 추가 / 수정
+
+| 표시명   | 입력 유형        | 필수 | 기본값 | API 파라미터 매핑 | 비고                                             |
+| -------- | ---------------- | ---- | ------ | ----------------- | ------------------------------------------------ |
+| 점검표명 | Text             | Y    | —      | `cklstNm`         | placeholder: "예: 설치인가 체크리스트"           |
+| 문서구분 | Select(공통코드) | N    | —      | `docSeComCd`      | 예: FNRS, INSTL, PWRK, DESIGN                    |
+| 업무구분 | Select(공통코드) | Y    | —      | `taskSeComCd`     | 예: RE(재이용수), SF(하수처리시설), SP(하수관로) |
+| 사용여부 | Select           | N    | Y      | `useYn`           | Y/N, UI 표시: 예/아니오                          |
+
+| 버튼명 | 동작                                   |
+| ------ | -------------------------------------- |
+| 저장   | POST(등록) 또는 PUT(수정) 후 목록 갱신 |
+| 취소   | 다이얼로그 닫기, 입력값 폐기           |
+| 닫기   | 다이얼로그 닫기                        |
+
+---
+
+## 5. 영역 B: 점검항목 관리
+
+점검표 하단(영역 C)에서 선택할 **점검항목** 마스터를 관리한다.
+
+### 5-1. 헤더 / 툴바
+
+| 항목        | 내용                                           |
+| ----------- | ---------------------------------------------- |
+| 섹션 타이틀 | 점검항목 관리                                  |
+| 우측 버튼   | **[점검항목 추가]** — 점검항목 등록 다이얼로그 |
+
+### 5-2. 그리드 컬럼
+
+| 컬럼명       | Field          | 타입   | 비고                                  |
+| ------------ | -------------- | ------ | ------------------------------------- |
+| 점검항목코드 | `cklstArtclSn` | number | UI mock `ITEM_001` 형식 표시 여부 TBD |
+| 점검항목명   | `cklstArtclNm` | string |                                       |
+| 사용여부     | `useYn`        | string | `Y`→예, `N`→아니오                    |
+| 등록일시     | `regDt`        | string | `yyyy-MM-dd HH:mm:ss`                 |
+| 관리         | —              | —      | 행별 **[관리] · [삭제]**              |
+
+> **TBD**: 백엔드 `CklstArtcl`은 복합 PK(`cklstArtclSn`, `cklstSn`)이며 등록 시 `cklstSn` 필수. UI 다이얼로그에는 `cklstSn` 입력이 없음 — 소속 점검표 지정 방식·전역 마스터 여부 백엔드 정책 확인.
+
+### 5-3. 다이얼로그: 점검항목 추가 / 수정
+
+| 표시명     | 입력 유형 | 필수 | 기본값 | API 파라미터 매핑 | 비고                        |
+| ---------- | --------- | ---- | ------ | ----------------- | --------------------------- |
+| 점검항목명 | Text      | Y    | —      | `cklstArtclNm`    | placeholder: "예: 법령검토" |
+| 사용여부   | Select    | N    | Y      | `useYn`           | Y/N                         |
+
+| 버튼명 | 동작                                   |
+| ------ | -------------------------------------- |
+| 저장   | POST(등록) 또는 PUT(수정) 후 목록 갱신 |
+| 취소   | 다이얼로그 닫기                        |
+| 닫기   | 다이얼로그 닫기                        |
+
+---
+
+## 6. 영역 C: 체크리스트 항목 (선택된 점검표)
+
+영역 A에서 선택된 `cklstSn` 기준으로 **점검표검토**(계층형 검토내용)를 구성한다.
+
+### 6-1. 헤더 / 툴바
+
+| 항목        | 내용                                                                 |
+| ----------- | -------------------------------------------------------------------- |
+| 섹션 타이틀 | 체크리스트 항목 (선택된 점검표: {cklstNm})                           |
+| 우측 버튼   | **[미리보기]** · **[추가]** · **[저장]** — 점검표 미선택 시 C 비활성 |
+
+### 6-2. 그리드 컬럼
+
+| 컬럼명        | Field          | 입력 UI                               | 비고                                 |
+| ------------- | -------------- | ------------------------------------- | ------------------------------------ |
+| 점검항목      | `cklstArtclSn` | Select (영역 B 항목 목록)             | L1/L2 접두 표시, `cklstArtclNm` 라벨 |
+| 주요 검토내용 | `rvwCn`        | Text / Textarea                       | 최대 4000자                          |
+| 사용 여부     | `useYn`        | Radio (예/아니오)                     | `Y` / `N`                            |
+| 구분          | `rvwCnLvNo`    | 읽기 전용                             | 1→1단계, 2→2단계, 3→3단계            |
+| 관리          | —              | **[하위추가]** (1·2단계, 저장 후) · **[삭제]** | 3단계 행은 [하위추가] 미표시         |
+
+#### 계층 정책
+
+| 항목           | 내용                                                                 |
+| -------------- | -------------------------------------------------------------------- |
+| 최대 깊이      | 3단계 (`rvwCnLvNo`: 1, 2, 3)                                         |
+| 상위-하위 연결 | `upCklstRvwSn` — 2단계 행은 부모 1단계 `cklstRvwSn` 참조             |
+| 정렬           | `sortSeq` — 동일 레벨 내 순서 (TBD: UI 드래그 정렬 여부)             |
+| 체크 사용      | `bchckUseYn` — 미리보기·실사용 화면 체크박스 노출 여부 (TBD UI 반영) |
+
+### 6-3. 버튼
+
+| 버튼명   | 동작                                                 |
+| -------- | ---------------------------------------------------- |
+| 추가     | 1단계 검토 행 1건 추가 (편집 가능)                   |
+| 저장     | 변경·신규 검토 행 일괄 POST/PUT (일괄 저장 API 없음) |
+| 미리보기 | 선택 점검표 체크리스트 읽기 전용 미리보기 (TBD)      |
+| 하위추가 | 선택 1·2단계 행 아래 하위 단계(2·3단계) 자식 행 추가 |
+| 삭제     | 확인 후 DELETE 또는 미저장 행 로컬 제거              |
+
+---
+
+## 7. API/DTO 명세
+
+### 7-1. 공통
+
+| 항목          | 내용                                                          |
+| ------------- | ------------------------------------------------------------- |
+| 서비스        | `as-checklist-service`                                        |
+| Base prefix   | `/as-checklist-service/api/v1` (게이트웨이 프록시 경유)       |
+| 인증          | JWT (`Authorization` 헤더), `X-Site-Id`, `token-id`           |
+| 페이징        | Spring `Pageable`: `page`, `size`, `sort` → `PageResponse<T>` |
+| 엔티티        | `@/entities/cklst` (`cklstMngService`, `cklstArtclService`, `cklstRvwService`) |
+
+### 7-2. 점검표 (영역 A) — `cklst`
+
+| 기능      | Method | URL                | Request / Query                   | Response           | 클라이언트                 |
+| --------- | ------ | ------------------ | --------------------------------- | ------------------ | -------------------------- |
+| 목록 조회 | GET    | `/cklst`           | `CklstMngSearchParams` + Pageable | `Page<CklstMng>`   | `cklstMngService.findPage` |
+| 단건 조회 | GET    | `/cklst/{cklstSn}` | —                                 | `CklstMng`         | `cklstMngService.findById` |
+| 등록      | POST   | `/cklst`           | `CklstMngSaveRequest`             | `number` (cklstSn) | `cklstMngService.create`   |
+| 수정      | PUT    | `/cklst/{cklstSn}` | `CklstMngSaveRequest`             | `number` (cklstSn) | `cklstMngService.update`   |
+| 삭제      | DELETE | `/cklst/{cklstSn}` | —                                 | `number` (cklstSn) | `cklstMngService.remove`   |
+
+**CklstMng (응답)**
+
+| Field         | 타입    | 설명             |
+| ------------- | ------- | ---------------- |
+| `cklstSn`     | number  | 점검표일련번호   |
+| `cklstNm`     | string  | 점검표명         |
+| `taskSeComCd` | string  | 업무구분공통코드 |
+| `useYn`       | string? | 사용여부         |
+| `docSeComCd`  | string? | 문서구분공통코드 |
+| `rgtr`        | string? | 등록자 UUID      |
+| `rgtrNm`      | string? | 등록자명         |
+| `mdfr`        | string? | 수정자 UUID      |
+| `regDt`       | string? | 등록일시         |
+| `mdfcnDt`     | string? | 수정일시         |
+
+**CklstMngSaveRequest**: `cklstNm`\*, `taskSeComCd`\*, `useYn?`, `docSeComCd?`
+
+**CklstMngSearchParams**: `cklstNm?`, `taskSeComCd?`, `useYn?`, `docSeComCd?` + `page`, `size`, `sort`
+
+**React Query hooks**: `useCklstMngPage`, `useCklstMng`, `useCreateCklstMng`, `useUpdateCklstMng`, `useDeleteCklstMng`
+
+### 7-3. 점검표항목 (영역 B) — `cklst-artcl`
+
+| 기능               | Method | URL                                     | Request / Query                     | Response           | 클라이언트                        |
+| ------------------ | ------ | --------------------------------------- | ----------------------------------- | ------------------ | --------------------------------- |
+| 목록 조회 (페이징) | GET    | `/cklst-artcl`                          | `CklstArtclSearchParams` + Pageable | `Page<CklstArtcl>` | `cklstArtclService.findPage`      |
+| 점검표별 전체 목록 | GET    | `/cklst-artcl/by-cklst/{cklstSn}`       | —                                   | `CklstArtcl[]`     | `cklstArtclService.findByCklstSn` |
+| 단건 조회          | GET    | `/cklst-artcl/{cklstArtclSn}/{cklstSn}` | —                                   | `CklstArtcl`       | `cklstArtclService.findById`      |
+| 등록               | POST   | `/cklst-artcl`                          | `CklstArtclSaveRequest`             | `CklstArtclId`     | `cklstArtclService.create`        |
+| 수정               | PUT    | `/cklst-artcl/{cklstArtclSn}/{cklstSn}` | `CklstArtclUpdateRequest`           | `CklstArtclId`     | `cklstArtclService.update`        |
+| 삭제               | DELETE | `/cklst-artcl/{cklstArtclSn}/{cklstSn}` | —                                   | `CklstArtclId`     | `cklstArtclService.remove`        |
+
+**CklstArtcl (응답)**
+
+| Field             | 타입    | 설명               |
+| ----------------- | ------- | ------------------ |
+| `cklstArtclSn`    | number  | 점검표항목일련번호 |
+| `cklstSn`         | number  | 점검표일련번호     |
+| `cklstArtclNm`    | string? | 점검표항목명       |
+| `useYn`           | string? | 사용여부           |
+| `rgtr` / `rgtrNm` | string? | 등록자             |
+| `regDt`           | string? | 등록일시           |
+
+**CklstArtclSaveRequest**: `cklstSn`\*, `cklstArtclNm?`, `useYn?`
+
+**CklstArtclUpdateRequest**: `cklstArtclNm?`, `useYn?`
+
+**CklstArtclId**: `{ cklstArtclSn: number; cklstSn: number }`
+
+**React Query hooks**: `useCklstArtclPage`, `useCklstArtclList`, `useCklstArtcl`, `useCreateCklstArtcl`, `useUpdateCklstArtcl`, `useDeleteCklstArtcl`
+
+### 7-4. 점검표검토 (영역 C) — `cklst-rvw`
+
+| 기능                  | Method | URL                                                | Request / Query                | Response         | 클라이언트                      |
+| --------------------- | ------ | -------------------------------------------------- | ------------------------------ | ---------------- | ------------------------------- |
+| 목록 조회 (페이징)    | GET    | `/cklst-rvw`                                       | `CklstRvwSearchParams` + Pageable | `Page<CklstRvw>` | `cklstRvwService.findPage`      |
+| 항목별 검토 전체 목록 | GET    | `/cklst-rvw/by-artcl/{cklstSn}/{cklstArtclSn}`     | —                              | `CklstRvw[]`     | `cklstRvwService.findByArtcl`   |
+| 단건 조회             | GET    | `/cklst-rvw/{cklstRvwSn}/{cklstArtclSn}/{cklstSn}` | —                              | `CklstRvw`       | `cklstRvwService.findById`      |
+| 등록                  | POST   | `/cklst-rvw`                                       | `CklstRvwSaveRequest`          | `CklstRvwId`     | `cklstRvwService.create`        |
+| 수정                  | PUT    | `/cklst-rvw/{cklstRvwSn}/{cklstArtclSn}/{cklstSn}` | `CklstRvwUpdateRequest`        | `CklstRvwId`     | `cklstRvwService.update`        |
+| 삭제                  | DELETE | `/cklst-rvw/{cklstRvwSn}/{cklstArtclSn}/{cklstSn}` | —                              | `CklstRvwId`     | `cklstRvwService.remove`        |
+
+**CklstRvw (응답)**
+
+| Field          | 타입    | 설명                   |
+| -------------- | ------- | ---------------------- |
+| `cklstRvwSn`   | number  | 점검표검토일련번호     |
+| `cklstArtclSn` | number  | 점검표항목일련번호     |
+| `cklstSn`      | number  | 점검표일련번호         |
+| `upCklstRvwSn` | number? | 상위점검표검토일련번호 |
+| `rvwCnLvNo`    | number? | 검토내용레벨번호       |
+| `rvwCn`        | string? | 검토내용               |
+| `bchckUseYn`   | string? | 체크사용여부           |
+| `sortSeq`      | number? | 정렬순서               |
+| `useYn`        | string? | 사용여부               |
+| `regDt`        | string? | 등록일시               |
+
+**CklstRvwSaveRequest**: `cklstArtclSn`\*, `cklstSn`\*, `upCklstRvwSn?`, `rvwCnLvNo?`, `rvwCn?`, `bchckUseYn?`, `sortSeq?`, `useYn?`
+
+**CklstRvwUpdateRequest**: `upCklstRvwSn?`, `rvwCnLvNo?`, `rvwCn?`, `bchckUseYn?`, `sortSeq?`, `useYn?`
+
+**CklstRvwSearchParams**: `cklstSn?`, `cklstArtclSn?`, `useYn?` + `page`, `size`, `sort`
+
+**CklstRvwId**: `{ cklstRvwSn: number; cklstArtclSn: number; cklstSn: number }`
+
+**React Query hooks**: `useCklstRvwPage`, `useCklstRvwByArtcl`, `useCklstRvw`, `useCreateCklstRvw`, `useUpdateCklstRvw`, `useDeleteCklstRvw`
+
+### 7-5. 공통코드 (보조)
+
+| UI 필드  | 코드 그룹 (TBD) | 예시 값                                      |
+| -------- | --------------- | -------------------------------------------- |
+| 문서구분 | `ASDOCSECD` 등  | FNRS, INSTL, PWRK, DESIGN                    |
+| 업무구분 | TBD             | RE(재이용수), SF(하수처리시설), SP(하수관로) |
+| 사용여부 | 고정            | Y, N                                         |
+
+공통코드 조회: `@/entities/code` — `codeService`, `CodeSelect`
+
+---
+
+## 8. UI 구현 가이드
+
+### 8-1. 기술 스택·원칙
+
+- **공통 컴포넌트**: `@common/components` (`Dialog`, `Button`, `Input`, `Select`, `RadioGroup` 등)
+- **테이블**: `@tanstack/react-table` + `useDataTable`
+- **데이터**: React Query — `@/entities/cklst` hooks (`useCklstRvwPage` 등 영역 C 포함)
+- **공통코드**: `@/entities/code` — `CodeSelect`, `findCodeLabel`
+- **상태**: 선택된 `cklstSn`, 영역 C 검토 행 배열(신규·dirty·계층 트리)
+- **모의 데이터**: API 연동 전 `@faker-js/faker`
+
+### 8-2. 모듈·파일 배치(제안)
+
+| 구분   | 경로                                                                                                                                                              |
+| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 라우트 | `apps/as/app/(with-base-layout)/checklist-management/page.tsx`                                                                                                    |
+| 페이지 | `apps/as/src/pages/checklist-management/` (Public API: page만 export)                                                                                             |
+| UI     | `.../ui/cklst-mng-list.tsx`, `cklst-mng-form-dialog.tsx`, `cklst-artcl-list.tsx`, `cklst-artcl-form-dialog.tsx`, `cklst-rvw-grid.tsx`, `cklst-preview-dialog.tsx` |
+| model  | `.../model/cklst-mng-columns.tsx`, `cklst-artcl-columns.tsx`, `cklst-rvw-row-types.ts`                                                                            |
+| lib    | `.../lib/use-cklst-rvw-rows.ts`, `validators.ts`, `build-rvw-tree.ts`                                                                                             |
+| 엔티티 | `apps/as/src/entities/cklst/` (`cklstMng`, `cklstArtcl`, `cklstRvw` 서비스·hooks)                                                                                 |
+| 페이지 | `apps/as/src/pages/checklist-management/` — `/checklist-management`                                                                                              |
+| 문서   | `apps/as/docs/checklist-management/SPEC.md`                                                                                                                       |
+
+### 8-3. 영역별 UI 매핑
+
+| 영역 | 주요 UI                                                                      |
+| ---- | ---------------------------------------------------------------------------- |
+| A    | DataTable + 행 선택 + 점검표 추가/수정 Dialog                                |
+| B    | DataTable + 점검항목 추가/수정 Dialog                                        |
+| C    | 계층형 편집 그리드(1·2단계) + [추가][저장][미리보기] + 행별 [하위추가][삭제] |
+| 공통 | `CodeSelect` (문서구분·업무구분), 사용여부 Y/N Select/Radio                  |
+
+### 8-4. 다이얼로그·라우팅
+
+| 다이얼로그명        | 트리거          | API 연동                  |
+| ------------------- | --------------- | ------------------------- |
+| 점검표 추가         | [점검표 추가]   | `useCreateCklstMng`       |
+| 점검표 수정         | 행 [관리]       | `useUpdateCklstMng`       |
+| 점검표 삭제 확인    | 행 [삭제]       | `useDeleteCklstMng`       |
+| 점검항목 추가       | [점검항목 추가] | `useCreateCklstArtcl`     |
+| 점검항목 수정       | 행 [관리]       | `useUpdateCklstArtcl`     |
+| 체크리스트 미리보기 | [미리보기]      | TBD — 읽기 전용 트리 렌더 |
+
+라우트: `/checklist-management` (메뉴 URL은 CMS 등록값과 일치시킴)
+
+### 8-5. 데이터 흐름(요약)
+
+- **진입**: `useCklstMngPage` → 영역 A, `useCklstArtclPage` → 영역 B. C 비활성.
+- **점검표 선택**: `cklstSn` 설정 → 영역 C 활성 → `useCklstRvwPage({ cklstSn })` → 트리 그리드 표시.
+- **점검표 CRUD**: Dialog → `useCreateCklstMng` / `useUpdateCklstMng` / `useDeleteCklstMng`.
+- **점검항목 CRUD**: Dialog → `useCreateCklstArtcl` / `useUpdateCklstArtcl` / `useDeleteCklstArtcl`.
+- **검토 저장**: [저장] → 신규 POST / 기존 PUT 순차 호출 (일괄 API 없음).
+- **영역 C 점검항목 Select**: `useCklstArtclList(cklstSn)` 또는 영역 B 전체 목록과 교차 — **TBD**.
+
+### 8-6. 미확정 / 검증 필요
+
+- [ ] 영역 B 점검항목 등록 시 `cklstSn` 필수 vs UI 무소속 마스터 — 백엔드·기획 확인
+- [ ] `점검항목코드`(ITEM_001) 표시 형식 vs `cklstArtclSn` 숫자 PK
+- [ ] 영역 C 전체 검토 트리 조회: `cklstSn` 단위 일괄 API 부재 — `by-artcl` 다건 호출 또는 백엔드 확장
+- [x] `@/entities/cklst` — `cklstRvwService`·hooks 구현
+- [x] `pages/checklist-management` — 영역 A·B·C UI 구현 (`/checklist-management`)
+- [ ] 문서구분·업무구분 공통코드 상위코드 ID (`ASDOCSECD` 등)
+- [ ] [미리보기] 다이얼로그 UI·데이터 소스
+- [ ] `bchckUseYn` UI 반영 여부
+- [ ] 영역 A·B 페이지네이션·검색 UI 노출 여부
+- [ ] 권한(역할별 CRUD)
diff --git a/apps/as/docs/code-management/SPEC.md b/apps/as/docs/code-management/SPEC.md
new file mode 100644
index 000000000..e745ab071
--- /dev/null
+++ b/apps/as/docs/code-management/SPEC.md
@@ -0,0 +1,385 @@
+# 화면설계서: 코드관리
+
+## 1. 기본 정보
+
+| 항목       | 내용                                         |
+| ---------- | -------------------------------------------- |
+| 버전       | 0.1                                          |
+| 프로세스명 | UI설계                                       |
+| 화면명     | 코드관리                                     |
+| 화면 유형  | [v] 조회 [v] 입력 [v] 수정 [v] 삭제 [ ] 출력 |
+| 메뉴 경로  | 디지털행정지원 > 사이트관리 > 코드관리       |
+
+---
+
+## 2. 화면 목적
+
+설치인가 등 AS 업무에서 참조하는 **공종구분코드**(공종코드)와 **회계구분코드**(회계코드)를 한 화면에서 조회·등록·수정·삭제한다. 좌측 **공종코드 관리**와 우측 **회계코드 관리**는 독립된 목록·CRUD 영역이며, 각 섹션은 자체 API(`cnstp-se`, `acntg-se`)와 연동한다.
+
+---
+
+## 3. 화면 구성
+
+### 3-1. 전체 레이아웃
+
+```
+┌───────────────────────────────────────────────────────────────────────────────────────────────────┐
+│  페이지 타이틀: 코드관리                      브레드크럼: 디지털행정지원 > 사이트관리 > 코드관리  │
+├──────────────────────────────────────────────────┬────────────────────────────────────────────────┤
+│  [영역 A] 공종코드 관리                          │  [영역 B] 회계코드 관리                        │
+│                                         [등록]   │                                       [등록]   │
+│  ┌────────────────────────────────────────────┐  │  ┌──────────────────────────────────────────┐  │
+│  │ 코드 | 코드명 | 설명 | 사용여부 | 관리     │  │  │ 코드 | 코드명 | 설명 | 사용여부 | 관리   │  │
+│  ├────────────────────────────────────────────┤  │  ├──────────────────────────────────────────┤  │
+│  │ WC001 공공하수처리시설 …  사용 [수정][삭제]│  │  │ AC101 시설비 …         사용 [수정][삭제] │  │
+│  │ WC002 하수관로정비 …      사용 [수정][삭제]│  │  │ AC102 용역비 …         사용 [수정][삭제] │  │
+│  │ WC003 재이용시설 …        사용 [수정][삭제]│  │  │ AC103 운영비 …       미사용 [수정][삭제] │  │
+│  └────────────────────────────────────────────┘  │  └──────────────────────────────────────────┘  │
+│  « 1 2 3 … »                                     │  « 1 2 3 … »                                   │
+└──────────────────────────────────────────────────┴────────────────────────────────────────────────┘
+```
+
+### 3-2. 화면 데이터 흐름
+
+```
+BEGIN
+
+  // 최초 진입 — 좌·우 독립 조회
+  CALL cnstpSeMngService.findAll({ page, size })
+  DISPLAY 공종코드 그리드 (영역 A)
+
+  CALL acntgSeMngService.findAll({ page, size })
+  DISPLAY 회계코드 그리드 (영역 B)
+
+  // 영역 A: 공종코드 등록
+  ON 영역 A [등록] 버튼 CLICK DO
+      OPEN 공종코드 등록 다이얼로그
+      ON [저장] DO
+          VALIDATE cnstpSeCd
+          CALL cnstpSeMngService.save(CnstpSeMngSaveRequestDto)
+          CALL cnstpSeMngService.findAll
+          CLOSE 다이얼로그
+      END ON
+      ON [취소] / [닫기] DO
+          CLOSE 다이얼로그
+      END ON
+  END ON
+
+  // 영역 A: 공종코드 수정
+  ON 영역 A 행 [수정] CLICK DO
+      CALL cnstpSeMngService.findById(cnstpSeCd)
+      OPEN 공종코드 수정 다이얼로그 (기존 값 초기화)
+      ON [저장] DO
+          CALL cnstpSeMngService.update(cnstpSeCd, CnstpSeMngSaveRequestDto)
+          CALL cnstpSeMngService.findAll
+          CLOSE 다이얼로그
+      END ON
+  END ON
+
+  // 영역 A: 공종코드 삭제
+  ON 영역 A 행 [삭제] CLICK DO
+      CONFIRM "선택한 공종코드를 삭제하시겠습니까?"
+      CALL cnstpSeMngService.delete(cnstpSeCd)
+      CALL cnstpSeMngService.findAll
+  END ON
+
+  // 영역 B: 회계코드 등록
+  ON 영역 B [등록] 버튼 CLICK DO
+      OPEN 회계코드 등록 다이얼로그
+      ON [저장] DO
+          VALIDATE acntgSeCd, acntgSeCdNm
+          CALL acntgSeMngService.save(AcntgSeMngSaveRequestDto)
+          CALL acntgSeMngService.findAll
+          CLOSE 다이얼로그
+      END ON
+      ON [취소] / [닫기] DO
+          CLOSE 다이얼로그
+      END ON
+  END ON
+
+  // 영역 B: 회계코드 수정
+  ON 영역 B 행 [수정] CLICK DO
+      CALL acntgSeMngService.findById(acntgSeCd)
+      OPEN 회계코드 수정 다이얼로그 (기존 값 초기화)
+      ON [저장] DO
+          CALL acntgSeMngService.update(acntgSeCd, AcntgSeMngSaveRequestDto)
+          CALL acntgSeMngService.findAll
+          CLOSE 다이얼로그
+      END ON
+  END ON
+
+  // 영역 B: 회계코드 삭제
+  ON 영역 B 행 [삭제] CLICK DO
+      CONFIRM "선택한 회계코드를 삭제하시겠습니까?"
+      CALL acntgSeMngService.delete(acntgSeCd)
+      CALL acntgSeMngService.findAll
+  END ON
+
+END
+```
+
+---
+
+## 4. 영역 A: 공종코드 관리
+
+백엔드 **공종구분코드**(`CnstpSeMng`) CRUD. 계층 구조(`upCnstpCd`, `cdLvNo`)를 지원하나, 본 화면은 **평면 목록**으로 표시.
+
+### 4-1. 헤더 / 툴바
+
+| 항목        | 내용                                  |
+| ----------- | ------------------------------------- |
+| 섹션 타이틀 | 공종코드 관리                         |
+| 우측 버튼   | **[등록]** — 공종코드 등록 다이얼로그 |
+
+### 4-2. 그리드 컬럼
+
+| 컬럼명   | Field         | 타입   | 비고                     |
+| -------- | ------------- | ------ | ------------------------ |
+| 코드     | `cnstpSeCd`   | string | PK, 최대 10자            |
+| 코드명   | `cnstpSeCdNm` | string | 최대 100자               |
+| 설명     | `expln`       | string | 최대 1000자, 선택        |
+| 사용여부 | `useYn`       | string | `Y`→사용, `N`→미사용     |
+| 관리     | —             | —      | 행별 **[수정] · [삭제]** |
+
+- 행 클릭 시 별도 상세 이동 없음. 수정은 **[수정]** 버튼으로 다이얼로그 진입.
+- 페이지네이션: Spring `Pageable` (`page`, `size`, `sort`) — **UI 노출**. 기본 `size: 10`, `@common/components` 공통 페이지네이션 컴포넌트 사용.
+
+### 4-3. 버튼
+
+| 버튼명 | 위치           | 동작                                     |
+| ------ | -------------- | ---------------------------------------- |
+| 등록   | 섹션 우측 상단 | 공종코드 등록 다이얼로그 오픈            |
+| 수정   | 행별           | 상세 조회 후 수정 다이얼로그 (값 초기화) |
+| 삭제   | 행별           | 확인 후 삭제, 목록 갱신                  |
+
+### 4-4. 다이얼로그: 공종코드 등록 / 수정
+
+다이얼로그 입력 필드는 **코드 · 코드명 · 설명 · 사용여부** 4개만 노출한다.
+
+| 표시명   | 입력 유형 | 필수 | 기본값 | API 파라미터 매핑 | 비고                            |
+| -------- | --------- | ---- | ------ | ----------------- | ------------------------------- |
+| 코드     | Input     | Y    | —      | `cnstpSeCd`       | 등록 시 입력, 수정 시 읽기 전용 |
+| 코드명   | Input     | N    | —      | `cnstpSeCdNm`     | 최대 100자                      |
+| 설명     | Input     | N    | —      | `expln`           | 최대 1000자                     |
+| 사용여부 | Radio     | N    | Y      | `useYn`           | `Y`→사용, `N`→미사용            |
+
+> UI에 노출하지 않는 API 필드(`upCnstpCd`, `cdLvNo`): 등록 시 `cdLvNo: 1` 등 기본값 전송, 수정 시 `findById` 응답값 유지.
+
+| 버튼명 | 동작                                             |
+| ------ | ------------------------------------------------ |
+| 저장   | POST(등록) 또는 PUT(수정) 후 `findAll` 목록 갱신 |
+| 취소   | 다이얼로그 닫기, 입력값 폐기                     |
+| 닫기   | 다이얼로그 닫기                                  |
+
+---
+
+## 5. 영역 B: 회계코드 관리
+
+백엔드 **회계구분관리**(`AcntgSeMng`) CRUD. 영역 A와 동일한 **평면 목록** UI 패턴을 따른다.
+
+### 5-1. 헤더 / 툴바
+
+| 항목        | 내용                                  |
+| ----------- | ------------------------------------- |
+| 섹션 타이틀 | 회계코드 관리                         |
+| 우측 버튼   | **[등록]** — 회계코드 등록 다이얼로그 |
+
+### 5-2. 그리드 컬럼
+
+| 컬럼명   | Field         | 타입   | 비고                     |
+| -------- | ------------- | ------ | ------------------------ |
+| 코드     | `acntgSeCd`   | string | PK, 최대 10자            |
+| 코드명   | `acntgSeCdNm` | string | 최대 100자               |
+| 설명     | `expln`       | string | 최대 1000자, 선택        |
+| 사용여부 | `useYn`       | string | `Y`→사용, `N`→미사용     |
+| 관리     | —             | —      | 행별 **[수정] · [삭제]** |
+
+- 페이지네이션: 영역 A와 동일 — **UI 노출**, 기본 `size: 10`.
+
+### 5-3. 버튼
+
+| 버튼명 | 위치           | 동작                                     |
+| ------ | -------------- | ---------------------------------------- |
+| 등록   | 섹션 우측 상단 | 회계코드 등록 다이얼로그 오픈            |
+| 수정   | 행별           | 상세 조회 후 수정 다이얼로그 (값 초기화) |
+| 삭제   | 행별           | 확인 후 삭제, 목록 갱신                  |
+
+### 5-4. 다이얼로그: 회계코드 등록 / 수정
+
+다이얼로그 입력 필드는 **코드 · 코드명 · 설명 · 사용여부** 4개만 노출한다. (영역 A와 동일 패턴)
+
+| 표시명   | 입력 유형 | 필수 | 기본값 | API 파라미터 매핑 | 비고                            |
+| -------- | --------- | ---- | ------ | ----------------- | ------------------------------- |
+| 코드     | Input     | Y    | —      | `acntgSeCd`       | 등록 시 입력, 수정 시 읽기 전용 |
+| 코드명   | Input     | Y    | —      | `acntgSeCdNm`     | 최대 100자                      |
+| 설명     | Input     | N    | —      | `expln`           | 최대 1000자                     |
+| 사용여부 | Radio     | N    | Y      | `useYn`           | `Y`→사용, `N`→미사용            |
+
+> UI에 노출하지 않는 API 필드(`upAcntgSeCd`, `cdLvNo`): 등록 시 `cdLvNo: 1` 등 기본값 전송, 수정 시 `findById` 응답값 유지.
+
+| 버튼명 | 동작                                             |
+| ------ | ------------------------------------------------ |
+| 저장   | POST(등록) 또는 PUT(수정) 후 `findAll` 목록 갱신 |
+| 취소   | 다이얼로그 닫기, 입력값 폐기                     |
+| 닫기   | 다이얼로그 닫기                                  |
+
+---
+
+## 6. API/DTO 명세
+
+### 6-1. 공통
+
+| 항목        | 내용                                                                               |
+| ----------- | ---------------------------------------------------------------------------------- |
+| 서비스      | `as-service`                                                                       |
+| Base prefix | `/as-service/api/v1` (`ENDPOINT.AS_COMMON_SERVICE`)                                |
+| 인증        | JWT (`Authorization` 헤더), `X-Site-Id`, `token-id`                                |
+| 페이징      | Spring `Pageable`: `page`, `size`, `sort` → `PageResponse<T>`                      |
+| 엔티티      | `@/entities/cnstp` (`cnstpSeMngService`), `@/entities/acntg` (`acntgSeMngService`) |
+
+**부가 API (본 화면 목록 외 참조용)**
+
+| 리소스       | Method | URL                   | Response              | 용도                              |
+| ------------ | ------ | --------------------- | --------------------- | --------------------------------- |
+| 공종구분코드 | GET    | `/cnstp-se/list/tree` | `CnstpSeMngTreeDto[]` | 계층 트리 (타 화면·상위코드 선택) |
+| 회계구분관리 | GET    | `/acntg-se/list/tree` | `AcntgSeMngTreeDto[]` | 계층 트리 (타 화면·상위코드 선택) |
+
+### 6-2. 공종구분코드 (영역 A) — `cnstp-se`
+
+| 기능      | Method | URL                     | Request / Query                  | Response                      | 클라이언트                   |
+| --------- | ------ | ----------------------- | -------------------------------- | ----------------------------- | ---------------------------- |
+| 목록 조회 | GET    | `/cnstp-se`             | `CnstpSeMngSearchDto` + Pageable | `Page<CnstpSeMngResponseDto>` | `cnstpSeMngService.findAll`  |
+| 트리 조회 | GET    | `/cnstp-se/list/tree`   | —                                | `CnstpSeMngTreeDto[]`         | `cnstpSeMngService.findTree` |
+| 상세 조회 | GET    | `/cnstp-se/{cnstpSeCd}` | —                                | `CnstpSeMngResponseDto`       | `cnstpSeMngService.findById` |
+| 등록      | POST   | `/cnstp-se`             | `CnstpSeMngSaveRequestDto`       | `string` (cnstpSeCd)          | `cnstpSeMngService.save`     |
+| 수정      | PUT    | `/cnstp-se/{cnstpSeCd}` | `CnstpSeMngSaveRequestDto`       | `string` (cnstpSeCd)          | `cnstpSeMngService.update`   |
+| 삭제      | DELETE | `/cnstp-se/{cnstpSeCd}` | —                                | `string` (cnstpSeCd)          | `cnstpSeMngService.delete`   |
+
+**CnstpSeMngResponseDto**
+
+| Field         | 타입    | 설명               |
+| ------------- | ------- | ------------------ |
+| `cnstpSeCd`   | string  | 공종구분코드       |
+| `cnstpSeCdNm` | string  | 공종구분코드명     |
+| `upCnstpCd`   | string? | 상위공종코드       |
+| `cdLvNo`      | number  | 코드레벨번호       |
+| `useYn`       | string  | 사용여부           |
+| `expln`       | string? | 설명 (최대 1000자) |
+| `rgtr`        | string? | 등록자 UUID        |
+| `rgtrNm`      | string? | 등록자명           |
+| `mdfr`        | string? | 수정자 UUID        |
+| `regDt`       | string? | 등록일시           |
+| `mdfcnDt`     | string? | 수정일시           |
+
+**CnstpSeMngSaveRequestDto**: `cnstpSeCd`, `cnstpSeCdNm?`, `upCnstpCd?`, `cdLvNo?`, `useYn?`, `expln?`
+
+**CnstpSeMngSearchDto**: `cnstpSeCd?`, `cnstpSeCdNm?`, `useYn?` + `page`, `size`, `sort`
+
+**React Query hooks**: `useCnstpSeMngPage`, `useCnstpSeMngTree`, `useCnstpSeMng`, `useSaveCnstpSeMng`, `useUpdateCnstpSeMng`, `useDeleteCnstpSeMng`
+
+### 6-3. 회계구분관리 (영역 B) — `acntg-se`
+
+| 기능      | Method | URL                     | Request / Query                  | Response                      | 클라이언트                   |
+| --------- | ------ | ----------------------- | -------------------------------- | ----------------------------- | ---------------------------- |
+| 목록 조회 | GET    | `/acntg-se`             | `AcntgSeMngSearchDto` + Pageable | `Page<AcntgSeMngResponseDto>` | `acntgSeMngService.findAll`  |
+| 트리 조회 | GET    | `/acntg-se/list/tree`   | —                                | `AcntgSeMngTreeDto[]`         | `acntgSeMngService.findTree` |
+| 상세 조회 | GET    | `/acntg-se/{acntgSeCd}` | —                                | `AcntgSeMngResponseDto`       | `acntgSeMngService.findById` |
+| 등록      | POST   | `/acntg-se`             | `AcntgSeMngSaveRequestDto`       | `string` (acntgSeCd)          | `acntgSeMngService.save`     |
+| 수정      | PUT    | `/acntg-se/{acntgSeCd}` | `AcntgSeMngSaveRequestDto`       | `string` (acntgSeCd)          | `acntgSeMngService.update`   |
+| 삭제      | DELETE | `/acntg-se/{acntgSeCd}` | —                                | `string` (acntgSeCd)          | `acntgSeMngService.delete`   |
+
+**AcntgSeMngResponseDto**
+
+| Field         | 타입    | 설명               |
+| ------------- | ------- | ------------------ |
+| `acntgSeCd`   | string  | 회계구분코드       |
+| `acntgSeCdNm` | string  | 회계구분코드명     |
+| `upAcntgSeCd` | string? | 상위회계구분코드   |
+| `cdLvNo`      | number  | 코드레벨번호       |
+| `useYn`       | string  | 사용여부           |
+| `expln`       | string? | 설명 (최대 1000자) |
+| `rgtr`        | string? | 등록자 UUID        |
+| `rgtrNm`      | string? | 등록자명           |
+| `mdfr`        | string? | 수정자 UUID        |
+| `regDt`       | string? | 등록일시           |
+| `mdfcnDt`     | string? | 수정일시           |
+
+**AcntgSeMngSaveRequestDto**: `acntgSeCd`, `acntgSeCdNm`, `upAcntgSeCd?`, `cdLvNo`, `useYn?`, `expln?`
+
+**AcntgSeMngSearchDto**: `acntgSeCd?`, `acntgSeCdNm?`, `useYn?` + `page`, `size`, `sort`
+
+**React Query hooks**: `useAcntgSeMngPage`, `useAcntgSeMngTree`, `useAcntgSeMng`, `useSaveAcntgSeMng`, `useUpdateAcntgSeMng`, `useDeleteAcntgSeMng`
+
+---
+
+## 7. UI 구현 가이드
+
+### 7-1. 기술 스택·원칙
+
+- Next.js App Router, React Query (`@tanstack/react-query`)
+- `@common/components` — `Card`, `Button`, `Dialog`, `DataTable` / `useDataTable`
+- `@tanstack/react-table` — 컬럼 정의는 `model/*-table-columns.tsx` 분리
+- 기존 entity 레이어 재사용: `@/entities/cnstp`, `@/entities/acntg` (service·queries·interface 구현 완료)
+- 좌·우 2열 레이아웃: `grid grid-cols-1 lg:grid-cols-2 gap-4` (모바일 1열 스택)
+- 삭제 전 `confirm` / Toast 피드백 — 프로젝트 공통 패턴 준수
+- 목록 하단 **페이지네이션 UI 노출** — 영역 A·B 각각 독립 page state
+- **검색 필터 UI 미제공** — `findAll` 호출 시 `page`, `size`만 전달
+- **등록/수정 다이얼로그** — 코드·코드명·설명은 `Input`, 사용여부는 `Radio` (4필드만 노출)
+- 상위 코드 삭제 시 **하위 코드 연쇄 삭제 UI·로직 미구현** — 단건 삭제만 수행
+
+### 7-2. 모듈·파일 배치
+
+| 구분              | 경로 (제안)                                                          |
+| ----------------- | -------------------------------------------------------------------- |
+| 라우트            | `apps/as/src/app/(authenticated)/site/code-management/page.tsx`      |
+| 페이지 컴포넌트   | `apps/as/src/pages/code-management/ui/code-management-page.tsx`      |
+| 공종 그리드 컬럼  | `apps/as/src/pages/code-management/model/cnstp-se-table-columns.tsx` |
+| 회계 그리드 컬럼  | `apps/as/src/pages/code-management/model/acntg-se-table-columns.tsx` |
+| 공종 등록/수정 폼 | `apps/as/src/pages/code-management/ui/cnstp-se-form-dialog.tsx`      |
+| 회계 등록/수정 폼 | `apps/as/src/pages/code-management/ui/acntg-se-form-dialog.tsx`      |
+| API·타입 (기존)   | `@/entities/cnstp`, `@/entities/acntg`                               |
+
+### 7-3. 영역별 UI 매핑
+
+| 영역         | UI 컴포넌트                           | 데이터 소스                                 | 비고                           |
+| ------------ | ------------------------------------- | ------------------------------------------- | ------------------------------ |
+| A            | `CnstpSeSection` + Table + Pagination | `useCnstpSeMngPage({ page, size })`         | 독립 page state·mutation       |
+| B            | `AcntgSeSection` + Table + Pagination | `useAcntgSeMngPage({ page, size })`         | A와 상호 의존 없음             |
+| A 다이얼로그 | `CnstpSeFormDialog`                   | `useCnstpSeMng`, `useSave/UpdateCnstpSeMng` | Input 4필드 + Radio 사용여부   |
+| B 다이얼로그 | `AcntgSeFormDialog`                   | `useAcntgSeMng`, `useSave/UpdateAcntgSeMng` | Input 4필드 + Radio 사용여부   |
+
+### 7-4. 다이얼로그·라우팅
+
+| 다이얼로그    | 트리거           | 라우팅               |
+| ------------- | ---------------- | -------------------- |
+| 공종코드 등록 | 영역 A [등록]    | URL 변경 없음 (모달) |
+| 공종코드 수정 | 영역 A 행 [수정] | URL 변경 없음 (모달) |
+| 회계코드 등록 | 영역 B [등록]    | URL 변경 없음 (모달) |
+| 회계코드 수정 | 영역 B 행 [수정] | URL 변경 없음 (모달) |
+
+### 7-5. 데이터 흐름 (구현 관점)
+
+```
+BEGIN
+
+  // 페이지 마운트 — 검색 조건 없이 page·size만 전달
+  const cnstpQuery = useCnstpSeMngPage({ page: 0, size: 20 })
+  const acntgQuery = useAcntgSeMngPage({ page: 0, size: 20 })
+
+  DISPLAY CodeManagementPage
+    ├─ CnstpSeSection(data=cnstpQuery.data, pagination)
+    └─ AcntgSeSection(data=acntgQuery.data, pagination)
+
+  // 페이지 변경
+  ON pagination page/size CHANGE DO
+      refetch cnstpQuery | acntgQuery with new page, size
+  END ON
+
+  // mutation 성공 시
+  ON save/update/delete SUCCESS DO
+      invalidateQueries cnstp-se | acntg-se baseKey
+      TOAST "저장되었습니다." | "삭제되었습니다."
+  END ON
+
+END
+```
diff --git a/apps/as/docs/essential-attachment-file-management/SPEC.md b/apps/as/docs/essential-attachment-file-management/SPEC.md
new file mode 100644
index 000000000..72e7c06b7
--- /dev/null
+++ b/apps/as/docs/essential-attachment-file-management/SPEC.md
@@ -0,0 +1,284 @@
+# 화면설계서: 필수첨부파일관리
+
+## 1. 기본 정보
+
+| 항목       | 내용                                           |
+| ---------- | ---------------------------------------------- |
+| 버전       | 0.1                                            |
+| 프로세스명 | UI설계                                         |
+| 화면명     | 필수첨부파일관리                               |
+| 화면 유형  | [v] 조회 [v] 입력 [v] 수정 [v] 삭제 [ ] 출력   |
+| 메뉴 경로  | 디지털행정지원 > 사이트관리 > 필수첨부파일관리 |
+
+---
+
+## 2. 화면 목적
+
+문서(업무) 구분별로 **필수 첨부파일** 항목을 등록·조회·수정·삭제한다. 상단 검색 영역에서 **문서구분**으로 목록을 필터링하고, **등록** 또는 행별 **수정**·**삭제**로 마스터 데이터를 유지한다. 등록·수정 시 **필수첨부파일아이디**는 클라이언트에서 입력(또는 생성)하여 요청 본문에 포함한다.
+
+---
+
+## 3. 화면 구성
+
+### 3-1. 전체 레이아웃
+
+```
+┌──────────────────────────────────────────────────────────────────────────────────────────────────────┐
+│  페이지 타이틀: 필수첨부파일관리                                 브레드크럼: 디지털행정지원 > … >    │
+├──────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│  [영역 A] 검색 / 액션                                                                                │
+│  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐  │
+│  │ 문서구분 [전체 ▼]  [조회]                                                              [등록]  │  │
+│  └────────────────────────────────────────────────────────────────────────────────────────────────┘  │
+├──────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│  [영역 B] 필수첨부파일 목록                                                                          │
+│  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐  │
+│  │ 필수첨부파일아이디 | 문서구분 | 필수첨부파일명 | 필수첨부여부 | 비고 | 등록일시 | 수정일시 | 관리 │
+│  ├────────────────────────────────────────────────────────────────────────────────────────────────┤  │
+│  │ EAF-0001 | 설치인가 | 사업계획서 | 예 | 서명본 첨부 | 2026-04-22 10:10:00 | — | [수정][삭제]   │  │
+│  │ EAF-0002 | 기본계획 | 변경사유서 | 예 | — | 2026-04-22 11:00:00 | — | [수정][삭제]             │  │
+│  └────────────────────────────────────────────────────────────────────────────────────────────────┘  │
+└──────────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+  (모달) [다이얼로그 C] 필수첨부파일 등록 / 수정
+  ┌──────────────────────────────────────────────────────┐
+  │ 필수첨부파일 등록                            [닫기]  │
+  ├──────────────────────────────────────────────────────┤
+  │ 필수첨부파일아이디(자동발급)  [EAF-0004]             │
+  │ 문서구분                      [설치인가 ▼]           │
+  │ 필수첨부파일명                [예: 사업계획서]       │
+  │ 필수첨부여부                  [ ] 예 [ ] 아니오      │
+  │ 비고                          [비고를 입력하세요]    │
+  ├──────────────────────────────────────────────────────┤
+  │                                      [취소]  [저장]  │
+  └──────────────────────────────────────────────────────┘
+```
+
+### 3-2. 화면 데이터 흐름
+
+```
+BEGIN
+
+  // 최초 진입
+  CALL 필수첨부파일 목록 조회 (findPage)
+  DISPLAY 필수첨부파일 그리드 (영역 B)
+
+  // 영역 A: 검색
+  ON [조회] 버튼 CLICK DO
+      CALL 필수첨부파일 목록 조회 (문서구분 = 선택값, findPage)
+      DISPLAY 필수첨부파일 그리드 (영역 B)
+  END ON
+
+  // 영역 A: 등록
+  ON [등록] 버튼 CLICK DO
+      OPEN 필수첨부파일 등록 다이얼로그 (다이얼로그 C)
+      ON [저장] DO
+          CONFIRM "등록하시겠습니까?"
+          VALIDATE 문서구분, 필수첨부파일명, 필수첨부여부
+          CALL 필수첨부파일 등록 (create)
+          CALL 필수첨부파일 목록 조회
+          CLOSE 다이얼로그
+          TOAST "저장되었습니다."
+      END ON
+      ON [취소] / [닫기] DO
+          CLOSE 다이얼로그
+      END ON
+  END ON
+
+  // 영역 B: 수정
+  ON 행 [수정] CLICK DO
+      OPEN 필수첨부파일 수정 다이얼로그 (기존 값 초기화)
+      ON [저장] DO
+          VALIDATE 문서구분, 필수첨부파일명, 필수첨부여부
+          CALL 필수첨부파일 수정 (update)
+          CALL 필수첨부파일 목록 조회
+          CLOSE 다이얼로그
+      END ON
+  END ON
+
+  // 영역 B: 삭제
+  ON 행 [삭제] CLICK DO
+      CONFIRM "삭제하시겠습니까?"
+      CALL 필수첨부파일 삭제 (remove)
+      CALL 필수첨부파일 목록 조회
+  END ON
+
+END
+```
+
+---
+
+## 4. 영역 A: 검색 / 액션
+
+문서구분 조건으로 목록을 조회하고, 신규 등록 다이얼로그를 연다.
+
+### 4-1. 검색 필드
+
+| 표시명   | 입력 유형  | 필수 | 기본값 | API 파라미터 매핑 | 비고                           |
+| -------- | ---------- | ---- | ------ | ----------------- | ------------------------------ |
+| 문서구분 | CodeSelect | N    | 전체   | `docSeComCd?`     | "전체" 선택 시 파라미터 미전송 |
+
+### 4-2. 버튼
+
+| 버튼명 | 위치           | 동작                                            |
+| ------ | -------------- | ----------------------------------------------- |
+| 조회   | 검색 필드 우측 | 현재 검색 조건으로 영역 B 목록 갱신             |
+| 등록   | 영역 우측 끝   | 필수첨부파일 등록 다이얼로그(다이얼로그 C) 오픈 |
+
+---
+
+## 5. 영역 B: 필수첨부파일 목록
+
+필수 첨부파일 마스터를 테이블로 표시한다. 페이지네이션 UI 적용.
+
+### 5-1. 헤더
+
+| 항목        | 내용              |
+| ----------- | ----------------- |
+| 섹션 타이틀 | 필수첨부파일 목록 |
+
+### 5-2. 그리드 컬럼
+
+| 컬럼명             | Field               | 타입   | 비고                                  |
+| ------------------ | ------------------- | ------ | ------------------------------------- |
+| 필수첨부파일아이디 | `esntlAtchFileId`   | string | 예: `EAF-0001`, 클라이언트 생성/입력  |
+| 문서구분           | `docSeComCd`        | string | 코드명 표시 — 공통코드 (TBD 상위코드) |
+| 필수첨부파일명     | `esntlAtchFileNm`   | string |                                       |
+| 필수첨부여부       | `esntlAtchYn`       | string | `Y`→예, `N`→아니오                    |
+| 비고               | `esntlAtchFileRmrk` | string | 없으면 `—` 표시                       |
+| 등록일시           | `regDt`             | string | `yyyy-MM-dd HH:mm:ss`                 |
+| 수정일시           | `mdfcnDt`           | string | 미수정 시 빈 값 또는 `—`              |
+| 관리               | —                   | —      | 행별 **[수정] · [삭제]**              |
+
+- 행 클릭 시 별도 상세 화면 없음. 편집은 **[수정]** 버튼으로 다이얼로그 C를 연다.
+
+### 5-3. 버튼
+
+| 버튼명 | 위치 | 동작                                   |
+| ------ | ---- | -------------------------------------- |
+| 수정   | 행별 | 필수첨부파일 수정 다이얼로그 (기존 값) |
+| 삭제   | 행별 | 확인 후 삭제 API 호출 → 목록 갱신      |
+
+---
+
+## 6. 다이얼로그 C: 필수첨부파일 등록 / 수정
+
+등록·수정 공용 폼 다이얼로그. 등록 시 제목 **「필수첨부파일 등록」**, 수정 시 **「필수첨부파일 수정」**.
+
+### 6-1. 폼 필드
+
+| 표시명             | 입력 유형  | 필수 | 기본값 | API 파라미터 매핑   | 비고                             |
+| ------------------ | ---------- | ---- | ------ | ------------------- | -------------------------------- |
+| 필수첨부파일아이디 | (Readonly) | Y    | —      | `esntlAtchFileId`   | 등록 시 미노출                   |
+| 문서구분           | CodeSelect | Y    | —      | `docSeComCd`        | 예: 설치인가, 기본계획           |
+| 필수첨부파일명     | Text       | Y    | —      | `esntlAtchFileNm`   | placeholder: "예: 사업계획서"    |
+| 필수첨부여부       | RadioGroup | Y    | Y      | `esntlAtchYn`       | Y/N, UI 표시: 예/아니오          |
+| 비고               | Textarea   | N    | —      | `esntlAtchFileRmrk` | placeholder: "비고를 입력하세요" |
+
+### 6-2. 버튼
+
+| 버튼명 | 동작                                   |
+| ------ | -------------------------------------- |
+| 저장   | POST(등록) 또는 PUT(수정) 후 목록 갱신 |
+| 취소   | 다이얼로그 닫기, 입력값 폐기           |
+| 닫기   | 다이얼로그 닫기 (헤더 우측)            |
+
+---
+
+## 7. API/DTO 명세
+
+### 7-1. 공통
+
+| 항목        | 내용                                                  |
+| ----------- | ----------------------------------------------------- |
+| 서비스      | AS Common Service                                     |
+| Base prefix | `/as-service/api/v1/esntl-atch-file`                  |
+| 인증        | JWT (`Authorization`), `X-Site-Id` 등                 |
+| 페이징      | Spring `Pageable` 사용 (`page`, `size`, `sort`)       |
+| 엔티티      | `@/entities/esntl` (`esntl-service.ts`, `queries.ts`) |
+
+### 7-2. 필수첨부파일 API
+
+| 기능      | Method | URL                  | Request DTO                   | Response DTO                        | API (클라이언트 함수명) |
+| --------- | ------ | -------------------- | ----------------------------- | ----------------------------------- | ----------------------- |
+| 트리 조회 | GET    | `/list/tree`         | Query: `docSeComCd`(필수)     | `EsntlAtchFileMngTreeResponseDto[]` | `findTree`              |
+| 목록 조회 | GET    | `/`                  | Query: Search + Pageable      | `PageResponse<EsntlAtchFileMng>`    | `findPage`              |
+| 단건 조회 | GET    | `/{esntlAtchFileId}` | Path: `esntlAtchFileId`       | `EsntlAtchFileMng`                  | `findById`              |
+| 등록      | POST   | `/`                  | `EsntlAtchFileMngSaveRequest` | `string` (생성된 ID)                | `create`                |
+| 수정      | PUT    | `/{esntlAtchFileId}` | `EsntlAtchFileMngSaveRequest` | `string` (수정된 ID)                | `update`                |
+| 삭제      | DELETE | `/{esntlAtchFileId}` | Path: `esntlAtchFileId`       | `string` (삭제된 ID)                | `remove`                |
+
+**응답 DTO**
+
+| Field               | 타입    | 설명                             |
+| ------------------- | ------- | -------------------------------- |
+| `esntlAtchFileId`   | string  | 필수첨부파일아이디               |
+| `docSeComCd`        | string  | 문서구분공통코드                 |
+| `esntlAtchFileNm`   | string  | 필수첨부파일명                   |
+| `esntlAtchYn`       | string  | 필수첨부여부 (Y/N)               |
+| `esntlAtchFileRmrk` | string? | 필수첨부파일비고                 |
+| `rgtr`              | string? | 등록자 UUID                      |
+| `rgtrNm`            | string? | 등록자명                         |
+| `mdfr`              | string? | 수정자 UUID                      |
+| `regDt`             | string? | 등록일시 (`yyyy-MM-dd HH:mm:ss`) |
+| `mdfcnDt`           | string? | 수정일시                         |
+
+**저장 Request**
+
+| Field               | 필수 | 설명               |
+| ------------------- | ---- | ------------------ |
+| `esntlAtchFileId`   | Y    | 필수첨부파일아이디 |
+| `docSeComCd`        | N    | 문서구분           |
+| `esntlAtchFileNm`   | N    | 필수첨부파일명     |
+| `esntlAtchYn`       | N    | 필수첨부여부       |
+| `esntlAtchFileRmrk` | N    | 비고               |
+
+**검색 Query**
+
+| Field             | 필수 | 설명                          |
+| ----------------- | ---- | ----------------------------- |
+| `docSeComCd`      | N    | 문서구분 (전체 시 미전송)     |
+| `esntlAtchFileNm` | N    | 필수첨부파일명 부분/일치 검색 |
+| `esntlAtchYn`     | N    | 필수첨부여부 (`Y`/`N`)        |
+| `page`            | N    | 페이지 번호 (0-base)          |
+| `size`            | N    | 페이지 크기 (기본값: 100)     |
+| `sort`            | N    | 정렬 조건 (예: `regDt,desc`)  |
+
+### 7-3. 공통코드
+
+| UI 필드      | 코드 그룹 | 예시 값            |
+| ------------ | --------- | ------------------ |
+| 문서구분     | ASDOCSECD | 설치인가, 기본계획 |
+| 필수첨부여부 | 고정      | Y(예), N(아니오)   |
+
+---
+
+## 8. UI 구현 가이드
+
+### 8-1. 기술 스택·원칙
+
+- **공통 컴포넌트**: `@common/components` (`Dialog`, `Button`, `Input`, `Select`, `Textarea`, `Label` 등)
+- **테이블**: `@tanstack/react-table` + `useDataTable`
+- **폼**: `react-hook-form`
+- **데이터**: React Query — `@/entities/esntl/api/queries.ts` 훅 사용
+- **공통코드**: `@/entities/code` — `CodeSelect`, `findCodeLabel`
+- **확인**: `@frontend-opensource/use-react-hooks` — `useConfirm` (등록·삭제 확인)
+
+### 8-2. 모듈·파일 배치
+
+| 구분   | 경로                                                                                                 |
+| ------ | ---------------------------------------------------------------------------------------------------- |
+| 라우트 | `apps/as/app/(with-base-layout)/esntl-atch-file-mng/page.tsx`                                        |
+| 페이지 | `apps/as/src/pages/esntl-atch-file-mng/` (Public API: page만 export)                                 |
+| UI     | `.../ui/esntl-atch-file-mng-page.tsx`, `esntl-atch-file-list.tsx`, `esntl-atch-file-form-dialog.tsx` |
+| model  | `.../model/esntl-atch-file-columns.tsx`, `esntl-atch-file-search-params.ts`                          |
+| 엔티티 | `apps/as/src/entities/esntl/` (`esntl-service.ts`, `queries.ts`, `esntl-interface.ts`)               |
+| 문서   | `apps/as/docs/essential-attachment-file-management/SPEC.md`                                          |
+
+### 8-3. 데이터 흐름(요약)
+
+- **진입**: 검색 params 기본값(`docSeComCd` = 전체) → 목록 query → 영역 B DataTable.
+- **조회**: [조회] 클릭 시 search state 반영 → 목록 query refetch.
+- **등록**: [등록] → Dialog `mode=create` → [저장] → POST → 목록 invalidate.
+- **수정**: [수정] → Dialog `mode=edit` + row 초기값 → [저장] → PUT → 목록 invalidate.
+- **삭제**: confirm → DELETE → 목록 invalidate.
diff --git a/apps/as/docs/review-manpower-management/SPEC.md b/apps/as/docs/review-manpower-management/SPEC.md
new file mode 100644
index 000000000..be0211783
--- /dev/null
+++ b/apps/as/docs/review-manpower-management/SPEC.md
@@ -0,0 +1,370 @@
+# 화면설계서: 검토인력관리
+
+## 1. 기본 정보
+
+| 항목       | 내용                                         |
+| ---------- | -------------------------------------------- |
+| 버전       | 0.2                                          |
+| 프로세스명 | UI설계                                       |
+| 화면명     | 검토인력관리                                 |
+| 화면 유형  | [v] 조회 [v] 입력 [ ] 수정 [v] 삭제 [ ] 출력 |
+| 메뉴 경로  | 디지털행정지원 > 사이트관리 > 검토인력관리   |
+
+---
+
+## 2. 화면 목적
+
+조직도에서 **한 명의 사용자**를 선택한 뒤, 결재 단계(접수·검토·승인·최종승인)별 **인원 배치** 영역에 즉시 등록한다. 등록·목록 갱신은 별도 저장 버튼 없이 **[선택 인원 배치]** 클릭 시 `rvw-mnpw` API로 바로 반영한다. 좌측 조직도는 CMS 조직·사용자 트리 API를, 우측 배치 목록은 검토인력관리 API를 사용한다.
+
+---
+
+## 3. 화면 구성
+
+### 3-1. 전체 레이아웃
+
+```
+┌──────────────────────────────────────────────────────────────────────────────────────────────────┐
+│  페이지 타이틀: 검토인력관리              브레드크럼: 디지털행정지원 > 사이트관리 > 검토인력관리 │
+├─────────────────────────────────┬──────────────────────────────────────────────────────────────────┤
+│  [영역 A] 조직도                │  [영역 B] 인원 배치 (결재구분별 4블록, 세로 스택)                │
+│  제목: 조직도                   │                                                                  │
+│  [A-1] 검색:                    │  ┌─ [B-1] 접수 ───────────── count ─ [선택 인원 배치] ─┐         │
+│  [성명·부서 검색] [조회][초기화]│  │  (배치 목록 또는 빈 상태 문구)                       │        │
+│  선택 안내:                     │  └──────────────────────────────────────────────────────┘        │
+│  "선택된 인원: {이름}           │  ┌─ [B-2] 검토 ───────────── count ─ [선택 인원 배치] ──┐        │
+│   ({부서} / {직급})"            │  └──────────────────────────────────────────────────────┘        │
+│  [A-2] 조직 트리 + 사용자 행    │  ┌─ [B-3] 승인 ───────────── count ─ [선택 인원 배치] ──┐        │
+│  ┌────────────────────┐         │  └──────────────────────────────────────────────────────┘        │
+│  │ 조직 트리 + 사용자 │         │  ┌─ [B-4] 최종승인 ───────── count ─ [선택 인원 배치] ──┐        │
+│  │ (단일 선택 강조)   │         │  └──────────────────────────────────────────────────────┘        │
+│  └────────────────────┘         │                                                                  │
+└─────────────────────────────────┴──────────────────────────────────────────────────────────────────┘
+```
+
+### 3-2. 화면 데이터 흐름
+
+```
+BEGIN
+
+  // 최초 진입
+  CALL userOgnzService.findOgnzUserTree()
+  DISPLAY 조직도 트리 (영역 A)
+
+  CALL rvwMnpwMngService.findPage({ size: 충분히 큰 값 })   // 또는 atrzSeComCd별 분할 조회
+  GROUP BY atrzSeComCd
+  DISPLAY 인원 배치 4블록 (영역 B-1 ~ B-4) + 건수 뱃지
+
+  // 영역 A-1: 조직도 검색 (클라이언트 필터 — 서버 API 없음)
+  ON [조회] 버튼 CLICK / 검색 폼 SUBMIT DO
+      SET displayTree = filterOgnzUserTree(원본트리, keyword)
+      SET expandedOgnzSnIds = collectExpandedOgnzSnIds(displayTree)   // 매칭 노드 자동 펼침
+      DISPLAY 필터된 트리 (영역 A-2)
+  END ON
+
+  ON [초기화] 버튼 CLICK DO
+      RESET keyword = ""
+      RESET displayTree = 원본트리
+      RESET expandedOgnzSnIds = 빈 Set (또는 기본 접힘)
+      DISPLAY 전체 트리 (영역 A-2)
+  END ON
+
+  // 영역 A-2: 사용자 단일 선택
+  ON 조직도 사용자 행 CLICK DO
+      VALIDATE 동일 행 재클릭이 아닌 경우만 변경
+      SET selectedPerson = { userUuid, userNm, ognzSn, ognzNm, jbgdSeCd, ... }
+      DISPLAY "선택된 인원: {userNm} ({ognzNm} / {직급명})"
+  END ON
+
+  // 영역 B-k: 선택 인원 즉시 배치
+  ON [B-k] [선택 인원 배치] 버튼 CLICK DO
+      VALIDATE selectedPerson 존재
+      SET targetAtrzSeComCd = 블록 k 에 매핑된 결재구분 코드 (§4-2 표)
+      CALL rvwMnpwMngService.save({
+        atrzSeComCd: targetAtrzSeComCd,
+        ognzSn: selectedPerson.ognzSn,
+        userUuid: selectedPerson.userUuid
+      })
+      ON 성공 DO
+          CALL rvwMnpwMngService.findPage (또는 해당 블록 목록만 갱신)
+          DISPLAY [B-k] 배치 목록·건수 뱃지 갱신
+          TOAST "배치되었습니다."
+      END ON
+      ON 실패(이미 존재) DO
+          TOAST (백엔드 메시지 연동)
+      END ON
+  END ON
+
+  // 영역 B-k: 배치 인원 제거 (UI 상 삭제 UX — 스크린샷 미표기, API는 제공됨)
+  ON 배치 인원 [삭제] / [제거] CLICK DO
+      CONFIRM "해당 인원을 배치에서 제거하시겠습니까?"
+      CALL rvwMnpwMngService.delete(atrzSeComCd, ognzSn, userUuid)
+      CALL rvwMnpwMngService.findPage
+      DISPLAY [B-k] 목록·뱃지 갱신
+  END ON
+
+END
+```
+
+---
+
+## 4. 영역 A — 조직도
+
+### 4-1. 표시·상호작용
+
+| 요소             | 내용                                                                  |
+| ---------------- | --------------------------------------------------------------------- |
+| 섹션 제목        | 조직도                                                                |
+| 검색 폼 (A-1)    | 성명·부서 키워드 입력 + **[조회]** + **[초기화]** — §4-3              |
+| 선택 안내 문구   | `선택된 인원: {userNm} ({ognzNm} / {직급표시})` — 미선택 시 안내 문구 |
+| 트리 (A-2)       | 본부 → 팀 계층 + 팀 소속 사용자 목록 (`displayTree` 기준 표시)        |
+| 선택 규칙        | **사용자 1명만** 선택 가능 (라디오형 단일 선택)                       |
+| 선택 시각 피드백 | 선택된 사용자 행 강조(배경·테두리)                                    |
+| 로딩/오류/빈값   | Skeleton / 오류 문구 / "등록된 조직/사용자가 없습니다."               |
+| 검색 결과 없음   | 필터 후 매칭 노드·사용자 0건. "조회된 인원이 없습니다." 문구 노출     |
+
+### 4-2. 조직도 데이터 매핑
+
+| UI 표시         | 트리 DTO 필드 (`OgnzUserTreeResponseDto`) | 비고                                      |
+| --------------- | ----------------------------------------- | ----------------------------------------- |
+| 조직명          | `ognzNm`                                  | 접기/펼치기 노드                          |
+| 사용자명        | `users[].userNm`                          | 클릭 시 선택                              |
+| 부서(안내 문구) | `ognzNm` (소속 팀 노드)                   | 선택 시 `selectedPerson.ognzNm`           |
+| 직급(안내 문구) | `users[].jbgdSeCd` 또는 `jbpsSeCd`        | 공통코드 라벨 변환                        |
+| 저장용 조직 SN  | `ognzSn`                                  | 사용자가 속한 **리프/팀 노드**의 `ognzSn` |
+| 저장용 사용자   | `users[].userUnqId`                       | API body `userUuid`로 전달 (§6-3)         |
+
+### 4-3. 조직도 검색 (영역 A-1)
+
+결재선 관리 `AprvrPickerDialog`와 동일한 **클라이언트 사이드 필터** 패턴을 사용한다. 별도 검색 API는 없으며, `useOgnzUserTree`로 받은 **원본 트리**를 `filterOgnzUserTree`로 가공해 `displayTree`에 반영한다.
+
+#### 필드 정의
+
+| 표시명         | 입력 유형 | 필수 | 기본값 | API 파라미터 매핑 | 비고                                      |
+| -------------- | --------- | ---- | ------ | ----------------- | ----------------------------------------- |
+| 성명·부서 검색 | Text      | N    | (빈값) | — (클라이언트만)  | `placeholder="성명·부서 검색"`            |
+| 조회           | Button    | —    | —      | —                 | `type="submit"` — 폼 제출 시 필터 적용    |
+| 초기화         | Button    | —    | —      | —                 | `type="button"` — 키워드·트리·펼침 초기화 |
+
+#### 필터 규칙 (`filterOgnzUserTree`)
+
+| 대상             | 매칭 조건                                             |
+| ---------------- | ----------------------------------------------------- |
+| 조직명           | `ognzNm`에 키워드 포함 (대소문자 무시)                |
+| 사용자명         | `userNm`에 키워드 포함 (대소문자 무시)                |
+| 조직 매칭 시     | 해당 노드 **소속 사용자 전원** 유지                   |
+| 사용자만 매칭 시 | 매칭 사용자만 남기고 상위 조직 노드는 유지(경로 보존) |
+| 하위 조직        | 재귀 필터 — 자식·손자 노드 매칭 시 상위도 표시        |
+| 키워드 빈값      | 원본 트리 전체 반환                                   |
+
+#### 조회 후 트리 펼침 (`collectExpandedOgnzSnIds`)
+
+- **[조회]** 성공 후 필터 결과 트리의 **모든 노드** `ognzSn`을 `expandedOgnzSnIds`에 넣어 자동 펼침
+- 검색 결과에서 사용자·하위 조직을 바로 확인할 수 있도록 함
+
+#### 초기화 동작
+
+| 상태                | 초기화 후 값                            |
+| ------------------- | --------------------------------------- |
+| `keyword`           | `""`                                    |
+| `displayTree`       | `useOgnzUserTree` 원본 `data`           |
+| `expandedOgnzSnIds` | `new Set()` (전체 접힘)                 |
+| `selectedPerson`    | **유지** — 검색 초기화와 선택 해제 분리 |
+
+#### 버튼
+
+| 버튼명 | 동작                                                      |
+| ------ | --------------------------------------------------------- |
+| 조회   | `filterOgnzUserTree(data, keyword)` → `displayTree` 갱신  |
+| 초기화 | 키워드·표시 트리·펼침 상태 리셋 (§3-2 `ON [초기화]` 블록) |
+
+---
+
+## 5. 영역 B — 인원 배치
+
+### 5-1. 블록 공통
+
+| 요소               | 내용                                              |
+| ------------------ | ------------------------------------------------- |
+| 블록 제목          | 접수 / 검토 / 승인 / 최종승인                     |
+| 건수 뱃지          | 해당 `atrzSeComCd`에 배치된 인원 수               |
+| 액션 버튼          | **[선택 인원 배치]** — 클릭 시 즉시 `save` (§3-2) |
+| 빈 상태            | "배치된 인원이 없습니다."                         |
+| 배치 목록(있을 때) | 인원명·부서·직급 등                               |
+
+### 5-2. 결재구분 ↔ 블록 매핑
+
+| 블록 | UI 제목  | `atrzSeComCd` | 비고                                                           |
+| ---- | -------- | ------------- | -------------------------------------------------------------- |
+| B-1  | 접수     | `ATRZ00`      | 결재선 관리 `ATRZ_RECEIVER_CD`와 동일                          |
+| B-2  | 검토     | `ATRZ01`      | 결재선 `ATRZ_REVIEWER_1_CD`. `ATRZ02` 별도 블록 여부 — **TBD** |
+| B-3  | 승인     | `ATRZ03`      | 결재선 `ATRZ_APPROVER_CD`                                      |
+| B-4  | 최종승인 | `ATRZ99`      | 결재선 `ATRZ_FINAL_CD`                                         |
+
+공통코드 마스터 `ATRZSE` / 화면 셀렉트용 `ATRZSECD`와 정합성은 배포 환경 코드표로 최종 확인.
+
+### 5-3. 배치 목록 항목 (표시)
+
+| 표시명   | Field (응답 DTO) | 비고                         |
+| -------- | ---------------- | ---------------------------- |
+| 사용자명 | `userUuidNm`     | `@CodeName` 미적용 시 TBD    |
+| 결재구분 | `atrzSeComCdNm`  | 블록 제목과 중복 — 생략 가능 |
+| 조직 SN  | `ognzSn`         | 삭제 API path에 사용         |
+| 사용자   | `userUuid`       | 삭제 API path에 사용         |
+
+### 5-4. 버튼
+
+| 버튼명         | 위치        | 동작                              |
+| -------------- | ----------- | --------------------------------- |
+| 선택 인원 배치 | 각 B-k 헤더 | `save` 후 목록·뱃지 갱신 (§3-2)   |
+| 제거           | 목록 항목   | `delete` 후 목록·뱃지 갱신 (§3-2) |
+
+### 5-5. 검증·제약
+
+| 규칙          | 내용                                                                |
+| ------------- | ------------------------------------------------------------------- |
+| 선택 필수     | `[선택 인원 배치]` 시 `selectedPerson` 없으면 버튼 비활성 또는 안내 |
+| 단일 선택     | 조직도에서 사용자 1명만 `selectedPerson` 유지                       |
+| 중복 등록     | 동일 PK `(atrzSeComCd, ognzSn, userUuid)` 재등록 시 서버 오류       |
+| 다건 배치     | 동일 블록에 서로 다른 사용자·조직은 **복수 행** 가능 (PK가 다름)    |
+| 결재구분 변경 | 본 화면 주 흐름은 `save`만                                          |
+
+---
+
+## 6. API/DTO 명세
+
+### 6-1. 공통
+
+| 항목          | 내용                                                          |
+| ------------- | ------------------------------------------------------------- |
+| 인증          | JWT (`Authorization` 헤더)                                    |
+| 페이징        | Spring `Pageable`: `page`, `size`, `sort` → `PageResponse<T>` |
+| 프론트 엔티티 | `@/entities/user-organization`, `@/entities/rvw-mnpw`         |
+
+### 6-2. 조직·사용자 트리 (영역 A) — `user-ognz`
+
+| 항목        | 내용                            |
+| ----------- | ------------------------------- |
+| 서비스      | `cms-service`                   |
+| Base prefix | `/cms-service/api/v1/user-ognz` |
+
+| 기능             | Method | URL         | Request DTO | Response DTO                | API                                |
+| ---------------- | ------ | ----------- | ----------- | --------------------------- | ---------------------------------- |
+| 조직·사용자 트리 | GET    | `/treeuser` | —           | `OgnzUserTreeResponseDto[]` | `userOgnzService.findOgnzUserTree` |
+
+**`OgnzUserTreeResponseDto`**: `ognzSn`, `upOgnzSn`, `ognzNm`, `users[]`, `children[]`
+
+**`OgnzUserTreeUserDto`**: `userUnqId`, `userNm`, `jbpsSeCd`, `jbgdSeCd`
+
+**React Query**: `useOgnzUserTree`
+
+### 6-3. 검토인력관리 (영역 B) — `rvw-mnpw`
+
+| 항목        | 내용                                  |
+| ----------- | ------------------------------------- |
+| 서비스      | `as-service`                          |
+| Base prefix | `/as-service/api/v1/rvw-mnpw`         |
+| ENDPOINT    | `ENDPOINT.AS_COMMON_SERVICE.RVW_MNPW` |
+
+| 기능            | Method | URL                                  | Request DTO / Query              | Response DTO                  | API                          |
+| --------------- | ------ | ------------------------------------ | -------------------------------- | ----------------------------- | ---------------------------- |
+| 목록 조회       | GET    | `/`                                  | `RvwMnpwMngSearchDto` + Pageable | `Page<RvwMnpwMngResponseDto>` | `rvwMnpwMngService.findPage` |
+| 상세 조회       | GET    | `/{atrzSeComCd}/{ognzSn}/{userUuid}` | Path                             | `RvwMnpwMngResponseDto`       | `rvwMnpwMngService.findById` |
+| 등록(즉시 배치) | POST   | `/`                                  | `RvwMnpwMngSaveRequestDto`       | `RvwMnpwMngResponseDto` (201) | `rvwMnpwMngService.save`     |
+| 결재구분 변경   | PUT    | `/{atrzSeComCd}/{ognzSn}/{userUuid}` | `RvwMnpwMngUpdateRequestDto`     | `RvwMnpwMngResponseDto`       | `rvwMnpwMngService.update`   |
+| 삭제            | DELETE | `/{atrzSeComCd}/{ognzSn}/{userUuid}` | Path                             | `string`                      | `rvwMnpwMngService.delete`   |
+
+**`RvwMnpwMngSearchDto`**: `atrzSeComCd?`, `ognzSn?`, `userUuid?` + `page`, `size`, `sort`
+
+**`RvwMnpwMngSaveRequestDto`**: `atrzSeComCd*`, `ognzSn*`, `userUuid*`
+
+**`RvwMnpwMngUpdateRequestDto`**: `newAtrzSeComCd*` — 본 화면 기본 흐름에서는 미사용
+
+**`RvwMnpwMngResponseDto`**: `atrzSeComCd`, `atrzSeComCdNm?`, `ognzSn`, `userUuid`, `userUuidNm?`, `rgtr?`, `regDt?`
+
+### 6-4. 조직도 ↔ 검토인력 필드 매핑 (저장 시)
+
+| 조직도 (`OgnzUserTreeUserDto` + 노드) | `RvwMnpwMngSaveRequestDto` | 비고                  |
+| ------------------------------------- | -------------------------- | --------------------- |
+| (블록 k의 `atrzSeComCd`)              | `atrzSeComCd`              | §5-2 표               |
+| 소속 팀 `ognzSn`                      | `ognzSn`                   |                       |
+| `userUnqId`                           | `userUuid`                 | 문자열(UUID)로 직렬화 |
+
+---
+
+## 7. UI 구현 가이드
+
+### 7-1. 기술 스택·원칙
+
+- **공통 컴포넌트**: `@common/components` (`Button`, `Badge`, `Card` 또는 섹션 레이아웃)
+- **데이터**: React Query — `useOgnzUserTree`, `useRvwMnpwMngPage`, `useSaveRvwMnpwMng`, `useDeleteRvwMnpwMng`
+- **상태**: `selectedPerson`(단일), `keyword`, `displayTree`, `expandedOgnzSnIds`, 블록별 배치 목록(서버 데이터 파생)
+- **조직도 검색**: `filterOgnzUserTree`, `collectExpandedOgnzSnIds` (`widgets/ognz-user-tree/lib` 또는 페이지 `lib`)
+- **저장 UX**: 별도 화면 저장 없음 — **[선택 인원 배치]** = `save` mutation 즉시 호출
+- **조직도 UI**: 결재선 관리 `ognz-user-tree.tsx`를 **widgets**로 승격해 공통화
+
+### 7-2. 모듈·파일 배치(제안)
+
+| 구분     | 경로                                                                               |
+| -------- | ---------------------------------------------------------------------------------- |
+| 라우트   | `apps/as/app/(with-base-layout)/rvw-mnpw-mng/page.tsx`                             |
+| 페이지   | `apps/as/src/pages/rvw-mnpw-mng/`                                                  |
+| UI       | `.../ui/rvw-mnpw-mng-page.tsx`, `rvw-mnpw-assignment-panel.tsx` 등                 |
+| model    | `.../model/selected-ognz-user.ts`, `rvw-mnpw-block-config.ts` (`atrzSeComCd` 상수) |
+| lib      | `.../lib/group-rvw-mnpw-by-atrz-se.ts` (목록 → B-1~B-4 분배)                       |
+| **위젯** | `apps/as/src/widgets/ognz-user-tree/` — 아래 이전 대상                             |
+| 엔티티   | `entities/user-organization/`, `entities/rvw-mnpw/` (구현 완료)                    |
+
+#### widgets/ognz-user-tree 이전 (결재선 → 공통)
+
+| 현재 (결재선 관리)                                     | 이전 후 (widgets)                                                                    |
+| ------------------------------------------------------ | ------------------------------------------------------------------------------------ |
+| `pages/approval-line-management/ui/ognz-user-tree.tsx` | `widgets/ognz-user-tree/ui/ognz-user-tree.tsx`                                       |
+| `pages/.../ui/ognz-user-tree-node.tsx`                 | `widgets/ognz-user-tree/ui/ognz-user-tree-node.tsx`                                  |
+| `pages/.../model/reviewer-option.ts`                   | `widgets/ognz-user-tree/model/selected-ognz-user.ts` (이름·필드 확장: `ognzSn` 필수) |
+| `pages/.../lib/filter-ognz-user-tree.ts`               | `widgets/ognz-user-tree/lib/filter-ognz-user-tree.ts` (**필수** — 검색 공통화)       |
+| `widgets/ognz-user-tree/index.ts`                      | `OgnzUserTree`, `OgnzUserTreeNode`, 타입 export                                      |
+
+결재선 `AprvrPickerDialog`는 `@/widgets/ognz-user-tree` import로 교체. 검토인력관리 페이지는 **인라인 조직도**(다이얼로그 없음)로 동일 위젯 사용.
+
+**`SelectedOgnzUser`** — `ReviewerOption` 확장:
+
+```typescript
+export interface SelectedOgnzUser {
+  userUuid: string; // OgnzUserTreeUserDto.userUnqId
+  userNm: string;
+  ognzSn: number;
+  ognzNm: string;
+  jbgdSeCd?: string;
+  jbpsSeCd?: string;
+}
+```
+
+### 7-3. 영역별 UI 매핑
+
+| 영역 | 주요 UI                                                              |
+| ---- | -------------------------------------------------------------------- |
+| A-1  | 검색 폼 (`Input` + 조회/초기화) — `AprvrPickerDialog` 90~103행 패턴  |
+| A-2  | `OgnzUserTree(nodes={displayTree})` + 선택 안내 + `useOgnzUserTree`  |
+| B-k  | 제목·Badge(count)·`선택 인원 배치`·배치 목록(또는 empty)             |
+| 공통 | 페이지 헤더·브레드크럼·2열 레이아웃 (`grid` / `flex`, 모바일은 스택) |
+
+### 7-4. 다이얼로그·라우팅
+
+| 항목       | 내용                                |
+| ---------- | ----------------------------------- |
+| 다이얼로그 | **없음** (조직도 인라인, 즉시 저장) |
+| 라우팅     | 메뉴 `검토인력관리` 단일 페이지     |
+
+### 7-5. 데이터 흐름(구현 요약)
+
+- **진입**: `useOgnzUserTree` → `displayTree = data` + `useRvwMnpwMngPage({ page: 0, size: N })` → 4패널.
+- **검색**: `keyword` 로컬 상태 → **[조회]** 시 `filterOgnzUserTree` + `collectExpandedOgnzSnIds` → `OgnzUserTree`에 `displayTree` 전달.
+- **초기화**: `keyword`·`displayTree`·`expandedOgnzSnIds` 리셋 (`selectedPerson` 유지).
+- **선택**: 트리 `onSelect` → `selectedPerson` (반드시 `ognzSn` 포함).
+- **배치**: `useSaveRvwMnpwMng().mutate({ atrzSeComCd, ognzSn, userUuid })` → `onSuccess`에서 `rvw-mnpw` query invalidate.
+- **삭제**: 목록 항목에서 `useDeleteRvwMnpwMng` — UI 확정 후 연결.
+
+### 7-6. 미확정 / 검증 필요
+
+- [ ] `ATRZ02`(검토2) 별도 블록 필요 여부
+- [ ] 권한(역할별 CRUD)
diff --git a/apps/as/eslint.config.mjs b/apps/as/eslint.config.mjs
new file mode 100644
index 000000000..19ccdfae3
--- /dev/null
+++ b/apps/as/eslint.config.mjs
@@ -0,0 +1,33 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import baseEsLintConfig from "../../eslint.config.mjs";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...baseEsLintConfig,
+  {
+    rules: {
+      "react-hooks/exhaustive-deps": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-wrapper-object-types": "warn",
+    },
+  },
+];
+
+export default eslintConfig;
diff --git a/apps/as/middleware.ts b/apps/as/middleware.ts
new file mode 100644
index 000000000..94a1d0381
--- /dev/null
+++ b/apps/as/middleware.ts
@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { AUTH_USER_ID, CLAIM_NAME, PORT, PROXY_HOST, SERVER_API_URL, SITE_ID } from "@/shared/config";
+
+const serverApiUrl = process.env.SERVER_API_URL;
+
+// CSP 헤더 설정 함수 (img-src만)
+function addSecurityHeaders(response: NextResponse): NextResponse {
+  response.headers.set("Content-Security-Policy", "img-src 'self' data: https: blob:;");
+  return response;
+}
+
+export function middleware(req: NextRequest) {
+  const pathname = req.nextUrl.pathname;
+  const searchParams = req.nextUrl.searchParams;
+
+  const logMessages: string[] = [
+    `[Middleware Request] ${new Date().toISOString()}`,
+    `[Environment]\n  Mode: ${process.env.NODE_ENV}\n  Port: ${PORT}\n  Proxy Host: ${PROXY_HOST}\n  Server API URL: ${SERVER_API_URL}\n  Site ID: ${SITE_ID}`,
+    `[Request]\n  Original Pathname: ${pathname}`,
+  ];
+
+  if (pathname.startsWith("/server")) {
+    const queryParams = searchParams.toString();
+    const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
+      queryParams ? `?${queryParams}` : ""
+    }`;
+
+    logMessages.push(`  Rewritten URL: ${newUrl}`);
+    logMessages.push("\n--------------------------------\n");
+    console.log(logMessages.join("\n"));
+
+    const response = NextResponse.rewrite(new URL(newUrl));
+    return addSecurityHeaders(response);
+  }
+
+  
+  // tus-js-client PATCH 요청: Location 헤더로 /server 없이 반환된 경로 직접 처리
+  // (예: /attach-service/api/v1/tus/upload/{id})
+  if (pathname.startsWith("/attach-service")) {
+    const requestHeaders = new Headers(req.headers);
+    const token = req.cookies.get(CLAIM_NAME)?.value;
+    const userId = req.cookies.get(AUTH_USER_ID)?.value;
+    const newUrl = `${serverApiUrl}${pathname}`;
+
+    if (token) requestHeaders.set(CLAIM_NAME, token);
+    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
+
+    logMessages.push(`  [TUS Proxy] Rewritten URL: ${newUrl}`);
+    logMessages.push("\n--------------------------------\n");
+    console.log(logMessages.join("\n"));
+
+    const response = NextResponse.rewrite(new URL(newUrl), {
+      headers: requestHeaders,
+    });
+    return addSecurityHeaders(response);
+  }
+
+  // if (pathname === "/") {
+  //   const response = NextResponse.redirect(new URL("/dashboard", req.url));
+  //   return addSecurityHeaders(response);
+  // }
+
+  logMessages.push("\n--------------------------------\n");
+  console.log(logMessages.join("\n"));
+
+  const response = NextResponse.next();
+  return addSecurityHeaders(response);
+}
+
+export const config = {
+  matcher: ["/server/:path*", "/attach-service/:path*", "/"],
+};
diff --git a/apps/as/next-env.d.ts b/apps/as/next-env.d.ts
deleted file mode 100644
index 1b3be0840..000000000
--- a/apps/as/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/as/next.config.ts b/apps/as/next.config.ts
new file mode 100644
index 000000000..8864de0e7
--- /dev/null
+++ b/apps/as/next.config.ts
@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ["@common/assets"],
+};
+
+export default nextConfig;
diff --git a/apps/as/package.json b/apps/as/package.json
new file mode 100644
index 000000000..5122cbbb5
--- /dev/null
+++ b/apps/as/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "as",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3003",
+    "build": "next build",
+    "start": "next start -p 3003",
+    "lint": "next lint",
+    "lint:fsd": "steiger ."
+  },
+  "dependencies": {
+    "@common/assets": "workspace:*",
+    "@common/auth": "workspace:*",
+    "@common/components": "workspace:*",
+    "@common/network": "workspace:*",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@faker-js/faker": "^9.9.0",
+    "@frontend-opensource/use-react-hooks": "^1.1.4",
+    "@hookform/resolvers": "^4.1.3",
+    "@tanstack/react-query": "^5.75.5",
+    "@tanstack/react-query-devtools": "^5.75.5",
+    "@tanstack/react-table": "^8.21.2",
+    "axios": "^1.8.1",
+    "dayjs": "^1.11.13",
+    "js-cookie": "^3.0.5",
+    "lucide-react": "^0.474.0",
+    "next": "15.5.18",
+    "react-hook-form": "^7.54.2",
+    "tus-js-client": "^4.3.1",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/js-cookie": "^3.0.6",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "15.3.8",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "steiger": "^0.5.11",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.7.2"
+  }
+}
diff --git a/apps/as/pages/README.md b/apps/as/pages/README.md
new file mode 100644
index 000000000..e011944c3
--- /dev/null
+++ b/apps/as/pages/README.md
@@ -0,0 +1,9 @@
+# 이 폴더는 비워 둡니다 (FSD + Next.js App Router)
+
+Next.js가 `src/pages`를 **Pages Router**용 `pages` 디렉터리로 인식하지 않도록,  
+프로젝트 루트에 **빈 `pages` 폴더**를 두는 것이 FSD 공식 가이드 권장사항입니다.
+
+- 실제 페이지(FSD Pages 레이어)는 **`src/pages`**에 있습니다.
+- Next.js 라우트는 **`app/`** 에서 `src/pages`를 re-export 하는 방식으로 연결됩니다.
+
+[Feature-Sliced Design - Usage with Next.js (App Router)](https://feature-sliced.design/docs/guides/tech/with-nextjs)
diff --git a/apps/dm_new/postcss.config.mjs b/apps/as/postcss.config.mjs
similarity index 100%
rename from apps/dm_new/postcss.config.mjs
rename to apps/as/postcss.config.mjs
diff --git a/apps/as/public/images/bg_login.jpg b/apps/as/public/images/bg_login.jpg
new file mode 100755
index 000000000..b7793d16a
Binary files /dev/null and b/apps/as/public/images/bg_login.jpg differ
diff --git a/apps/as/src/app/layouts/base-layout.tsx b/apps/as/src/app/layouts/base-layout.tsx
new file mode 100644
index 000000000..fc84a5e3e
--- /dev/null
+++ b/apps/as/src/app/layouts/base-layout.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { useCallback } from "react";
+import { usePathname, useRouter } from "next/navigation";
+
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useMenuStore } from "@/shared/lib";
+import { PageLayout } from "@/shared/ui/page-layout";
+import type { MenuItem } from "@/entities/menu";
+import { BaseLayout } from "@common/components";
+
+interface BaseLayoutWrapperProps {
+  children: React.ReactNode;
+}
+
+export function BaseLayoutWrapper({ children }: BaseLayoutWrapperProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const queryClient = useQueryClient();
+
+  const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);
+
+  const handleMenuClick = useCallback(
+    (item: MenuItem) => {
+      setCurrentMenuInfo(item);
+      router.push(item.urlPath);
+    },
+    [router, setCurrentMenuInfo],
+  );
+
+  return (
+    <BaseLayout
+      queryClient={queryClient}
+      currentPath={pathname ?? ""}
+      handleMenuClick={handleMenuClick}
+    >
+      <PageLayout>{children}</PageLayout>
+    </BaseLayout>
+  );
+}
diff --git a/apps/as/src/app/providers/index.tsx b/apps/as/src/app/providers/index.tsx
new file mode 100644
index 000000000..20ec0b72e
--- /dev/null
+++ b/apps/as/src/app/providers/index.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { ConfirmProvider } from "@frontend-opensource/use-react-hooks";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+import { queryClient } from "@/shared/lib";
+import { StoreProvider } from "@/shared/providers";
+import { AlertDialog } from "@/shared/ui/alert-dialog";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { AuthWrapper } from "@/entities/auth";
+import { MenuWrapper } from "@/entities/menu";
+
+interface ProvidersProps {
+  children: React.ReactNode;
+}
+
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <StoreProvider>
+        <ConfirmProvider>
+          <AuthWrapper>
+            <MenuWrapper>{children}</MenuWrapper>
+            <AlertDialog />
+            <ConfirmDialog />
+          </AuthWrapper>
+        </ConfirmProvider>
+      </StoreProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
diff --git a/apps/as/src/app/styles/globals.css b/apps/as/src/app/styles/globals.css
new file mode 100644
index 000000000..e557f947b
--- /dev/null
+++ b/apps/as/src/app/styles/globals.css
@@ -0,0 +1,15 @@
+@import "@common/assets/styles/base.css";
+@import "@common/assets/styles/diveicon.css";
+@import "@common/components/index.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: "Noto Sans KR", sans-serif;
+  font-size: 10px;
+}
diff --git a/apps/as/src/entities/README.md b/apps/as/src/entities/README.md
new file mode 100644
index 000000000..b28c10790
--- /dev/null
+++ b/apps/as/src/entities/README.md
@@ -0,0 +1,114 @@
+# Entities Layer
+
+**Entities**는 프로젝트가 다루는 실제 비즈니스 개념을 나타내는 레이어입니다. 비즈니스에서 제품을 설명할 때 사용하는 용어들(예: User, Product, Order)이 주로 엔티티가 됩니다.
+
+## 목적
+
+- 비즈니스 엔티티의 데이터 모델 및 타입 정의
+- 엔티티 관련 API 요청 함수 관리
+- 엔티티의 시각적 표현 제공 (재사용 가능한 UI)
+- 여러 페이지에서 동일한 외관을 재사용할 수 있도록 지원
+
+## 구조
+
+각 엔티티 슬라이스는 다음 세그먼트로 구성됩니다:
+
+```
+entities/
+└── [entity-name]/
+    ├── model/         # 데이터 저장소, 검증 스키마, 상태 관리
+    ├── api/           # 엔티티 관련 API 요청 함수
+    ├── ui/            # 엔티티 시각적 표현 (선택적)
+    ├── lib/           # 엔티티 관련 유틸리티 (선택적)
+    ├── @x/            # 다른 엔티티로부터의 cross-import용 Public API (선택적)
+    └── index.ts       # Public API
+```
+
+### 세그먼트 설명
+
+- **model**: 데이터 모델, 타입 정의, 상태 저장소 (Zustand 등)
+- **api**: 백엔드 API 호출 함수
+- **ui**: 엔티티를 표시하는 UI 컴포넌트 (완전한 UI 블록이 아니라 재사용 가능한 표현)
+- **lib**: 엔티티 관련 유틸리티 함수
+- **@x**: 다른 엔티티가 이 엔티티를 import할 때 사용하는 명시적 cross-import API
+- **index.ts**: 슬라이스의 Public API (외부에서 사용할 수 있는 것만 export)
+
+## 예시
+
+```typescript
+// entities/user/model/user.ts
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: 'admin' | 'user';
+}
+
+// entities/user/api/get-user.ts
+import type { User } from '../model/user';
+
+export async function getUser(id: string): Promise<User> {
+  const response = await fetch(`/api/users/${id}`);
+  return response.json();
+}
+
+// entities/user/ui/user-card.tsx
+import type { User } from '../model/user';
+
+interface UserCardProps {
+  user: User;
+  onClick?: () => void;
+}
+
+export function UserCard({ user, onClick }: UserCardProps) {
+  return (
+    <div onClick={onClick}>
+      <h3>{user.name}</h3>
+      <p>{user.email}</p>
+    </div>
+  );
+}
+
+// entities/user/index.ts
+export { type User } from './model/user';
+export { getUser } from './api/get-user';
+export { UserCard } from './ui/user-card';
+```
+
+## 엔티티 간 관계
+
+엔티티가 서로 연결되어 있을 때는 `@x` 표기법을 사용하여 명시적으로 cross-import를 관리하는 것이 권장됩니다:
+
+```typescript
+// entities/artist/model/artist.ts
+import type { Song } from 'entities/song/@x/artist';
+
+export interface Artist {
+  name: string;
+  songs: Array<Song>;
+}
+
+// entities/song/@x/artist.ts
+export type { Song } from '../model/song';
+```
+
+> `@x` 폴더를 사용하면 엔티티 간 연결을 명확하게 만들어 함께 리팩터링이 필요한 코드를 쉽게 찾을 수 있습니다.
+
+## 레이어 의존성 규칙
+
+✅ **허용되는 의존성**:
+- `shared` 레이어의 모듈
+- 같은 엔티티 슬라이스 내의 다른 세그먼트
+- 다른 엔티티 슬라이스 (필요한 경우, `@x` 표기법 권장)
+
+❌ **금지된 의존성**:
+- `features` 레이어
+- `widgets` 레이어
+- `pages` 레이어
+- `app` 레이어
+
+## 주의사항
+
+1. **UI 컴포넌트는 완전한 비즈니스 로직을 포함하지 않음**: UI는 주로 props나 slots를 통해 다양한 비즈니스 로직을 연결할 수 있도록 설계
+2. **엔티티 간 비즈니스 로직은 상위 레이어에**: 엔티티 간 상호작용의 비즈니스 로직은 Features나 Pages 레이어에서 처리
+3. **데이터 관리에 집중**: 복잡한 비즈니스 로직보다는 데이터 모델, 검증, 저장에 집중
diff --git a/apps/as/src/entities/acntg/api/acntg-service.ts b/apps/as/src/entities/acntg/api/acntg-service.ts
new file mode 100644
index 000000000..957113dec
--- /dev/null
+++ b/apps/as/src/entities/acntg/api/acntg-service.ts
@@ -0,0 +1,58 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import {
+  ACNTG_SE_SAVE_MODE,
+  type AcntgSeMngPutRequestDto,
+  type AcntgSeMngResponseDto,
+  type AcntgSeMngSaveRequestDto,
+  type AcntgSeMngSearchDto,
+  type AcntgSeMngService,
+  type AcntgSeMngTreeDto,
+} from "../model/acntg-interface";
+
+const BASE = ENDPOINT.AS_COMMON_SERVICE.ACNTG_SE;
+
+async function findAll(params: AcntgSeMngSearchDto): Promise<PageResponse<AcntgSeMngResponseDto>> {
+  const response = await client.get<PageResponse<AcntgSeMngResponseDto>>(BASE, { params });
+  return response.data;
+}
+
+async function findTree(): Promise<AcntgSeMngTreeDto[]> {
+  const response = await client.get<AcntgSeMngTreeDto[]>(`${BASE}/list/tree`);
+  return response.data;
+}
+
+async function findById(acntgSeCd: string): Promise<AcntgSeMngResponseDto> {
+  const response = await client.get<AcntgSeMngResponseDto>(`${BASE}/${acntgSeCd}`);
+  return response.data;
+}
+
+async function saveMulti(body: AcntgSeMngSaveRequestDto[]): Promise<AcntgSeMngResponseDto[]> {
+  const response = await client.post<AcntgSeMngResponseDto[]>(BASE, body);
+  return response.data;
+}
+
+async function update(acntgSeCd: string, body: AcntgSeMngPutRequestDto): Promise<string> {
+  const response = await client.put<string>(`${BASE}/${acntgSeCd}`, {
+    ...body,
+    acntgSeCd,
+    mode: ACNTG_SE_SAVE_MODE.UPDATE,
+  });
+  return response.data;
+}
+
+async function deleteAcntgSeCd(acntgSeCd: string): Promise<string> {
+  const response = await client.delete<string>(`${BASE}/${acntgSeCd}`);
+  return response.data;
+}
+
+export const acntgSeMngService = {
+  findAll,
+  findTree,
+  findById,
+  saveMulti,
+  update,
+  delete: deleteAcntgSeCd,
+} satisfies AcntgSeMngService;
diff --git a/apps/as/src/entities/acntg/api/queries.ts b/apps/as/src/entities/acntg/api/queries.ts
new file mode 100644
index 000000000..c2bcc7f9f
--- /dev/null
+++ b/apps/as/src/entities/acntg/api/queries.ts
@@ -0,0 +1,73 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+  AcntgSeMngPutRequestDto,
+  AcntgSeMngSaveRequestDto,
+  AcntgSeMngSearchDto,
+} from "../model/acntg-interface";
+
+import { acntgSeMngService } from "./acntg-service";
+
+const acntgSeMngBaseKey = [ENDPOINT.AS_COMMON_SERVICE.ACNTG_SE] as const;
+
+export function useAcntgSeMngPage(params: AcntgSeMngSearchDto) {
+  return useQuery({
+    queryKey: [...acntgSeMngBaseKey, "findAll", params],
+    queryFn: () => acntgSeMngService.findAll(params),
+  });
+}
+
+export function useAcntgSeMngTree() {
+  return useQuery({
+    queryKey: [...acntgSeMngBaseKey, "findTree"],
+    queryFn: () => acntgSeMngService.findTree(),
+    staleTime: Infinity,
+  });
+}
+
+export function useAcntgSeMng(acntgSeCd: string | null | undefined) {
+  return useQuery({
+    queryKey: [...acntgSeMngBaseKey, "findById", acntgSeCd],
+    queryFn: () => acntgSeMngService.findById(acntgSeCd!),
+    enabled: Boolean(acntgSeCd),
+  });
+}
+
+export function useSaveMultiAcntgSeMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: AcntgSeMngSaveRequestDto[]) => acntgSeMngService.saveMulti(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: acntgSeMngBaseKey });
+    },
+  });
+}
+
+export function useUpdateAcntgSeMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ acntgSeCd, body }: { acntgSeCd: string; body: AcntgSeMngPutRequestDto }) =>
+      acntgSeMngService.update(acntgSeCd, body),
+    onSuccess: (_data, { acntgSeCd }) => {
+      queryClient.invalidateQueries({ queryKey: acntgSeMngBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...acntgSeMngBaseKey, "findById", acntgSeCd],
+      });
+    },
+  });
+}
+
+export function useDeleteAcntgSeMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (acntgSeCd: string) => acntgSeMngService.delete(acntgSeCd),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: acntgSeMngBaseKey });
+    },
+  });
+}
diff --git a/apps/as/src/entities/acntg/index.ts b/apps/as/src/entities/acntg/index.ts
new file mode 100644
index 000000000..bd5083917
--- /dev/null
+++ b/apps/as/src/entities/acntg/index.ts
@@ -0,0 +1,19 @@
+export { acntgSeMngService } from "./api/acntg-service";
+export {
+  useAcntgSeMng,
+  useAcntgSeMngPage,
+  useAcntgSeMngTree,
+  useDeleteAcntgSeMng,
+  useSaveMultiAcntgSeMng,
+  useUpdateAcntgSeMng,
+} from "./api/queries";
+export type {
+  AcntgSeMngResponseDto,
+  AcntgSeMngSaveRequestDto,
+  AcntgSeMngSearchDto,
+  AcntgSeMngService,
+  AcntgSeMngTreeDto,
+  AcntgSeSaveMode,
+  BizCstTreeDto,
+} from "./model/acntg-interface";
+export { ACNTG_SE_SAVE_MODE } from "./model/acntg-interface";
diff --git a/apps/as/src/entities/acntg/model/acntg-interface.ts b/apps/as/src/entities/acntg/model/acntg-interface.ts
new file mode 100644
index 000000000..c1457208d
--- /dev/null
+++ b/apps/as/src/entities/acntg/model/acntg-interface.ts
@@ -0,0 +1,86 @@
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+export const ACNTG_SE_SAVE_MODE = {
+  CREATE: "C",
+  UPDATE: "U",
+  DELETE: "D",
+} as const;
+
+export type AcntgSeSaveMode = (typeof ACNTG_SE_SAVE_MODE)[keyof typeof ACNTG_SE_SAVE_MODE];
+
+/** 백엔드 AcntgSeMngResponseDto */
+export interface AcntgSeMngResponseDto {
+  acntgSeCd: string;
+  acntgSeCdNm: string;
+  upAcntgSeCd?: string;
+  cdLvNo: number;
+  useYn: string;
+  expln?: string;
+  rgtr?: string;
+  rgtrNm?: string;
+  mdfr?: string;
+  regDt?: string;
+  mdfcnDt?: string;
+}
+
+/** 백엔드 AcntgSeMngSearchDto + Pageable */
+export interface AcntgSeMngSearchDto extends PageableParams {
+  acntgSeCd?: string;
+  acntgSeCdNm?: string;
+  useYn?: string;
+}
+
+/** 백엔드 AcntgSeMngSaveRequestDto */
+export interface AcntgSeMngSaveRequestDto {
+  acntgSeCd: string;
+  mode: AcntgSeSaveMode;
+  acntgSeCdNm: string;
+  upAcntgSeCd?: string;
+  cdLvNo: number;
+  useYn?: string;
+  expln?: string;
+}
+
+/** PUT /{acntgSeCd} 요청 (mode는 서비스에서 U로 설정) */
+export interface AcntgSeMngPutRequestDto {
+  acntgSeCd: string;
+  acntgSeCdNm: string;
+  upAcntgSeCd?: string;
+  cdLvNo: number;
+  useYn?: string;
+  expln?: string;
+}
+
+/** 백엔드 AcntgSeMngTreeDto */
+export interface AcntgSeMngTreeDto {
+  indAcntgSeCdNm: string;
+  acntgSeCd: string;
+  acntgSeCdNm: string;
+  upAcntgSeCd?: string;
+  useYn: string;
+  treeLevel: number;
+  treePath: string;
+}
+
+/** 백엔드 BizCstTreeDto (InstlSncnMngDetResponseDto 등에서 참조) */
+export interface BizCstTreeDto {
+  indAcntgSeCdNm: string;
+  acntgSeCd: string;
+  acntgSeCdNm: string;
+  useYn: string;
+  treeLevel: number;
+  treePath: string;
+  bscPlanAmt?: number;
+  bgtRfltAmt?: number;
+  tstmDesignAmt?: number;
+}
+
+/** Controller public 메서드명·시그니처와 동일 */
+export interface AcntgSeMngService {
+  findAll(params: AcntgSeMngSearchDto): Promise<PageResponse<AcntgSeMngResponseDto>>;
+  findTree(): Promise<AcntgSeMngTreeDto[]>;
+  findById(acntgSeCd: string): Promise<AcntgSeMngResponseDto>;
+  saveMulti(body: AcntgSeMngSaveRequestDto[]): Promise<AcntgSeMngResponseDto[]>;
+  update(acntgSeCd: string, body: AcntgSeMngPutRequestDto): Promise<string>;
+  delete(acntgSeCd: string): Promise<string>;
+}
diff --git a/apps/as/src/entities/auth/api/auth-service.ts b/apps/as/src/entities/auth/api/auth-service.ts
new file mode 100644
index 000000000..0c1730054
--- /dev/null
+++ b/apps/as/src/entities/auth/api/auth-service.ts
@@ -0,0 +1,79 @@
+import { ACCESS_TOKEN, AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "@/shared/config";
+import { getRemainingMs } from "@common/auth";
+
+import { clearAuthToken, setToken, setupRefreshTimer } from "../lib/token-manager";
+import type { AuthPayload, AuthService } from "../model/auth-interface";
+
+async function login(payload: AuthPayload): Promise<void> {
+  const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+
+  const data = await response.json();
+
+  const accessToken = data[ACCESS_TOKEN];
+  const tokenId = data[AUTH_USER_ID];
+
+  if (!accessToken || !tokenId) {
+    throw new Error("인증 토큰을 받지 못했습니다.");
+  }
+
+  setToken(CLAIM_NAME, accessToken);
+  setToken(AUTH_USER_ID, tokenId);
+
+  const remainingMs = getRemainingMs(accessToken);
+  if (remainingMs > 0) {
+    setupRefreshTimer(silentRefresh, remainingMs);
+  }
+}
+
+async function silentRefresh(): Promise<void> {
+  console.log(`[silentRefresh] Called at ${new Date().toISOString()}`);
+  try {
+    const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`, {
+      method: "PUT",
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new Error(data?.message ?? "토큰 갱신에 실패했습니다.");
+    }
+
+    const accessToken = data[ACCESS_TOKEN];
+    const tokenId = data[AUTH_USER_ID];
+
+    if (!accessToken || !tokenId) {
+      throw new Error("갱신된 인증 토큰을 받지 못했습니다.");
+    }
+
+    setToken(CLAIM_NAME, accessToken);
+    setToken(AUTH_USER_ID, tokenId);
+
+    const remainingMs = getRemainingMs(accessToken);
+    if (remainingMs > 0) {
+      setupRefreshTimer(silentRefresh, remainingMs);
+    }
+  } catch (error) {
+    console.error(`[silentRefresh] Failed at ${new Date().toISOString()}`, error);
+    clearAuthToken();
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent("auth:logout"));
+    }
+  }
+}
+
+async function logout(): Promise<void> {
+  clearAuthToken();
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new CustomEvent("auth:logout"));
+  }
+}
+
+export const authService: AuthService = {
+  login,
+  silentRefresh,
+  logout,
+};
diff --git a/apps/as/src/entities/auth/index.ts b/apps/as/src/entities/auth/index.ts
new file mode 100644
index 000000000..7f0d0081a
--- /dev/null
+++ b/apps/as/src/entities/auth/index.ts
@@ -0,0 +1,3 @@
+export { authService } from "./api/auth-service";
+export { AuthWrapper } from "./lib/auth-wrapper";
+export { tokenManager } from "./lib/token-manager";
diff --git a/apps/as/src/entities/auth/lib/auth-wrapper.tsx b/apps/as/src/entities/auth/lib/auth-wrapper.tsx
new file mode 100644
index 000000000..ef454dfb9
--- /dev/null
+++ b/apps/as/src/entities/auth/lib/auth-wrapper.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+import { isAxiosError } from "axios";
+
+import { client } from "@/shared/api";
+import { AUTH_LOGIN_REDIRECT_URL, AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "@/shared/config";
+import { useUserStore } from "@/shared/lib";
+import type { IUserInfo } from "@/shared/store";
+import { getRemainingMs } from "@common/auth";
+import { isAtLoginRedirectUrl } from "@common/network";
+
+import { authService } from "../api/auth-service";
+
+import { getToken, setupRefreshTimer } from "./token-manager";
+
+const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
+  const router = useRouter();
+  const userInfo = useUserStore((state) => state.userInfo);
+  const setUserInfo = useUserStore((state) => state.setUserInfo);
+
+  useEffect(() => {
+    const token = getToken(CLAIM_NAME);
+    if (token) {
+      const remainingMs = getRemainingMs(token);
+      if (remainingMs > 0) {
+        console.log(`[AuthWrapper] Refresh timer set: ${remainingMs}ms (${remainingMs / 1000}s)`);
+        setupRefreshTimer(authService.silentRefresh, remainingMs);
+      }
+    }
+
+    if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) return;
+
+    async function authCheck() {
+      const userId = getToken(AUTH_USER_ID);
+      if (!userId) {
+        router.replace(AUTH_LOGIN_REDIRECT_URL);
+        return;
+      }
+
+      if (userInfo) return;
+
+      const response = await client.get<IUserInfo>(`${ENDPOINT.USER_SERVICE.USERS}/info/me`);
+      setUserInfo(response.data);
+    }
+
+    authCheck().catch((error) => {
+      if (isAxiosError(error) && error.response?.status === 401) return;
+      console.error(error);
+      setUserInfo(null);
+      if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+        router.replace(AUTH_LOGIN_REDIRECT_URL);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    function handleAuthLogout() {
+      setUserInfo(null);
+      if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+        router.replace(AUTH_LOGIN_REDIRECT_URL);
+      }
+    }
+
+    window.addEventListener("auth:logout", handleAuthLogout);
+    return () => window.removeEventListener("auth:logout", handleAuthLogout);
+  }, []);
+
+  return <>{children}</>;
+};
+
+export { AuthWrapper };
diff --git a/apps/as/src/entities/auth/lib/token-manager.ts b/apps/as/src/entities/auth/lib/token-manager.ts
new file mode 100644
index 000000000..d449e711b
--- /dev/null
+++ b/apps/as/src/entities/auth/lib/token-manager.ts
@@ -0,0 +1,15 @@
+import { authConfig } from "@/shared/config/auth";
+import { createTokenManager } from "@common/auth";
+
+export const tokenManager = createTokenManager(authConfig);
+
+export const {
+  getToken,
+  setToken,
+  removeToken,
+  setupRefreshTimer,
+  clearAuthToken,
+  getAccessToken,
+  getRefreshToken,
+  getUserId,
+} = tokenManager;
diff --git a/apps/as/src/entities/auth/model/auth-interface.ts b/apps/as/src/entities/auth/model/auth-interface.ts
new file mode 100644
index 000000000..fb6e10630
--- /dev/null
+++ b/apps/as/src/entities/auth/model/auth-interface.ts
@@ -0,0 +1,10 @@
+export interface AuthPayload {
+  userId: string;
+  password: string;
+}
+
+export interface AuthService {
+  login(payload: AuthPayload): Promise<void>;
+  silentRefresh(): Promise<void>;
+  logout(): Promise<void>;
+}
diff --git a/apps/as/src/entities/cklst/api/cklst-artcl-service.ts b/apps/as/src/entities/cklst/api/cklst-artcl-service.ts
new file mode 100644
index 000000000..dda8defd5
--- /dev/null
+++ b/apps/as/src/entities/cklst/api/cklst-artcl-service.ts
@@ -0,0 +1,70 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import type {
+  CklstArtcl,
+  CklstArtclId,
+  CklstArtclSaveRequest,
+  CklstArtclSearchParams,
+  CklstArtclService,
+  CklstArtclUpdateRequest,
+} from "../model/cklst-artcl-interface";
+
+async function findPage(params: CklstArtclSearchParams): Promise<PageResponse<CklstArtcl>> {
+  const response = await client.get<PageResponse<CklstArtcl>>(
+    ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_ARTCL,
+    { params },
+  );
+  return response.data;
+}
+
+async function findByCklstSn(cklstSn: number): Promise<CklstArtcl[]> {
+  const response = await client.get<CklstArtcl[]>(
+    `${ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_ARTCL}/by-cklst/${cklstSn}`,
+  );
+  return response.data;
+}
+
+async function findById(cklstArtclSn: number, cklstSn: number): Promise<CklstArtcl> {
+  const response = await client.get<CklstArtcl>(
+    `${ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_ARTCL}/${cklstArtclSn}/${cklstSn}`,
+  );
+  return response.data;
+}
+
+async function create(body: CklstArtclSaveRequest): Promise<CklstArtclId> {
+  const response = await client.post<CklstArtclId>(
+    ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_ARTCL,
+    body,
+  );
+  return response.data;
+}
+
+async function update(
+  cklstArtclSn: number,
+  cklstSn: number,
+  body: CklstArtclUpdateRequest,
+): Promise<CklstArtclId> {
+  const response = await client.put<CklstArtclId>(
+    `${ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_ARTCL}/${cklstArtclSn}/${cklstSn}`,
+    body,
+  );
+  return response.data;
+}
+
+async function remove(cklstArtclSn: number, cklstSn: number): Promise<CklstArtclId> {
+  const response = await client.delete<CklstArtclId>(
+    `${ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_ARTCL}/${cklstArtclSn}/${cklstSn}`,
+  );
+  return response.data;
+}
+
+export const cklstArtclService = {
+  findPage,
+  findByCklstSn,
+  findById,
+  create,
+  update,
+  remove,
+} satisfies CklstArtclService;
diff --git a/apps/as/src/entities/cklst/api/cklst-mng-service.ts b/apps/as/src/entities/cklst/api/cklst-mng-service.ts
new file mode 100644
index 000000000..fdae4e8ff
--- /dev/null
+++ b/apps/as/src/entities/cklst/api/cklst-mng-service.ts
@@ -0,0 +1,58 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import type {
+  CklstMng,
+  CklstMngSaveRequest,
+  CklstMngSearchParams,
+  CklstMngService,
+  CklstTreeNode,
+  CklstTreeSearchParams,
+} from "../model/cklst-mng-interface";
+
+async function findPage(params: CklstMngSearchParams): Promise<PageResponse<CklstMng>> {
+  const response = await client.get<PageResponse<CklstMng>>(ENDPOINT.AS_CHECKLIST_SERVICE.CKLST, {
+    params,
+  });
+  return response.data;
+}
+
+async function findById(cklstSn: number): Promise<CklstMng> {
+  const response = await client.get<CklstMng>(`${ENDPOINT.AS_CHECKLIST_SERVICE.CKLST}/${cklstSn}`);
+  return response.data;
+}
+
+async function findTree(params: CklstTreeSearchParams): Promise<CklstTreeNode[]> {
+  const response = await client.get<CklstTreeNode[]>(`${ENDPOINT.AS_CHECKLIST_SERVICE.CKLST}/list/tree`, {
+    params,
+  });
+  return response.data;
+}
+
+async function create(body: CklstMngSaveRequest): Promise<number> {
+  const response = await client.post<number>(ENDPOINT.AS_CHECKLIST_SERVICE.CKLST, body);
+  return response.data;
+}
+
+async function update(cklstSn: number, body: CklstMngSaveRequest): Promise<number> {
+  const response = await client.put<number>(
+    `${ENDPOINT.AS_CHECKLIST_SERVICE.CKLST}/${cklstSn}`,
+    body,
+  );
+  return response.data;
+}
+
+async function remove(cklstSn: number): Promise<number> {
+  const response = await client.delete<number>(`${ENDPOINT.AS_CHECKLIST_SERVICE.CKLST}/${cklstSn}`);
+  return response.data;
+}
+
+export const cklstMngService = {
+  findPage,
+  findById,
+  findTree,
+  create,
+  update,
+  remove,
+} satisfies CklstMngService;
diff --git a/apps/as/src/entities/cklst/api/cklst-rvw-service.ts b/apps/as/src/entities/cklst/api/cklst-rvw-service.ts
new file mode 100644
index 000000000..0039bfbc1
--- /dev/null
+++ b/apps/as/src/entities/cklst/api/cklst-rvw-service.ts
@@ -0,0 +1,79 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import type {
+  CklstRvw,
+  CklstRvwId,
+  CklstRvwSaveRequest,
+  CklstRvwSearchParams,
+  CklstRvwService,
+  CklstRvwUpdateRequest,
+} from "../model/cklst-rvw-interface";
+
+async function findPage(params: CklstRvwSearchParams): Promise<PageResponse<CklstRvw>> {
+  const response = await client.get<PageResponse<CklstRvw>>(
+    ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_RVW,
+    { params },
+  );
+  return response.data;
+}
+
+async function findByArtcl(cklstSn: number, cklstArtclSn: number): Promise<CklstRvw[]> {
+  const response = await client.get<CklstRvw[]>(
+    `${ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_RVW}/by-artcl/${cklstSn}/${cklstArtclSn}`,
+  );
+  return response.data;
+}
+
+async function findById(
+  cklstRvwSn: number,
+  cklstArtclSn: number,
+  cklstSn: number,
+): Promise<CklstRvw> {
+  const response = await client.get<CklstRvw>(
+    `${ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_RVW}/${cklstRvwSn}/${cklstArtclSn}/${cklstSn}`,
+  );
+  return response.data;
+}
+
+async function create(body: CklstRvwSaveRequest): Promise<CklstRvwId> {
+  const response = await client.post<CklstRvwId>(
+    ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_RVW,
+    body,
+  );
+  return response.data;
+}
+
+async function update(
+  cklstRvwSn: number,
+  cklstArtclSn: number,
+  cklstSn: number,
+  body: CklstRvwUpdateRequest,
+): Promise<CklstRvwId> {
+  const response = await client.put<CklstRvwId>(
+    `${ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_RVW}/${cklstRvwSn}/${cklstArtclSn}/${cklstSn}`,
+    body,
+  );
+  return response.data;
+}
+
+async function remove(
+  cklstRvwSn: number,
+  cklstArtclSn: number,
+  cklstSn: number,
+): Promise<CklstRvwId> {
+  const response = await client.delete<CklstRvwId>(
+    `${ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_RVW}/${cklstRvwSn}/${cklstArtclSn}/${cklstSn}`,
+  );
+  return response.data;
+}
+
+export const cklstRvwService = {
+  findPage,
+  findByArtcl,
+  findById,
+  create,
+  update,
+  remove,
+} satisfies CklstRvwService;
diff --git a/apps/as/src/entities/cklst/api/queries.ts b/apps/as/src/entities/cklst/api/queries.ts
new file mode 100644
index 000000000..33280c41a
--- /dev/null
+++ b/apps/as/src/entities/cklst/api/queries.ts
@@ -0,0 +1,281 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+  CklstArtclSaveRequest,
+  CklstArtclSearchParams,
+  CklstArtclUpdateRequest,
+} from "../model/cklst-artcl-interface";
+import type { CklstMngSaveRequest, CklstMngSearchParams } from "../model/cklst-mng-interface";
+import type {
+  CklstRvwSaveRequest,
+  CklstRvwSearchParams,
+  CklstRvwUpdateRequest,
+} from "../model/cklst-rvw-interface";
+
+import { cklstArtclService } from "./cklst-artcl-service";
+import { cklstMngService } from "./cklst-mng-service";
+import { cklstRvwService } from "./cklst-rvw-service";
+
+const cklstMngBaseKey = [ENDPOINT.AS_CHECKLIST_SERVICE.CKLST] as const;
+const cklstArtclBaseKey = [ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_ARTCL] as const;
+const cklstRvwBaseKey = [ENDPOINT.AS_CHECKLIST_SERVICE.CKLST_RVW] as const;
+
+export function useCklstMngPage(params: CklstMngSearchParams) {
+  return useQuery({
+    queryKey: [...cklstMngBaseKey, "page", params],
+    queryFn: () => cklstMngService.findPage(params),
+  });
+}
+
+export function useCklstMng(cklstSn: number | null | undefined) {
+  return useQuery({
+    queryKey: [...cklstMngBaseKey, cklstSn],
+    queryFn: () => cklstMngService.findById(cklstSn!),
+    enabled: cklstSn != null,
+  });
+}
+
+export function useCreateCklstMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: CklstMngSaveRequest) => cklstMngService.create(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: cklstMngBaseKey });
+    },
+  });
+}
+
+export function useUpdateCklstMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ cklstSn, body }: { cklstSn: number; body: CklstMngSaveRequest }) =>
+      cklstMngService.update(cklstSn, body),
+    onSuccess: (_data, { cklstSn }) => {
+      queryClient.invalidateQueries({ queryKey: cklstMngBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstMngBaseKey, cklstSn],
+      });
+    },
+  });
+}
+
+export function useDeleteCklstMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (cklstSn: number) => cklstMngService.remove(cklstSn),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: cklstMngBaseKey });
+    },
+  });
+}
+
+export function useCklstArtclPage(params: CklstArtclSearchParams) {
+  const { cklstSn } = params;
+
+  return useQuery({
+    queryKey: [...cklstArtclBaseKey, "page", params],
+    queryFn: () => cklstArtclService.findPage(params),
+    enabled: cklstSn != null,
+  });
+}
+
+export function useCklstArtclList(cklstSn: number | null | undefined) {
+  return useQuery({
+    queryKey: [...cklstArtclBaseKey, "by-cklst", cklstSn],
+    queryFn: () => cklstArtclService.findByCklstSn(cklstSn!),
+    enabled: cklstSn != null,
+  });
+}
+
+export function useCklstArtcl(params: {
+  cklstArtclSn: number | null | undefined;
+  cklstSn: number | null | undefined;
+}) {
+  const { cklstArtclSn, cklstSn } = params;
+
+  return useQuery({
+    queryKey: [...cklstArtclBaseKey, cklstArtclSn, cklstSn],
+    queryFn: () => cklstArtclService.findById(cklstArtclSn!, cklstSn!),
+    enabled: cklstArtclSn != null && cklstSn != null,
+  });
+}
+
+export function useCreateCklstArtcl() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: CklstArtclSaveRequest) => cklstArtclService.create(body),
+    onSuccess: (_data, { cklstSn }) => {
+      queryClient.invalidateQueries({ queryKey: cklstArtclBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstArtclBaseKey, "page", { cklstSn }],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstArtclBaseKey, "by-cklst", cklstSn],
+      });
+    },
+  });
+}
+
+export function useUpdateCklstArtcl() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      cklstArtclSn,
+      cklstSn,
+      body,
+    }: {
+      cklstArtclSn: number;
+      cklstSn: number;
+      body: CklstArtclUpdateRequest;
+    }) => cklstArtclService.update(cklstArtclSn, cklstSn, body),
+    onSuccess: (_data, { cklstArtclSn, cklstSn }) => {
+      queryClient.invalidateQueries({ queryKey: cklstArtclBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstArtclBaseKey, cklstArtclSn, cklstSn],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstArtclBaseKey, "page", { cklstSn }],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstArtclBaseKey, "by-cklst", cklstSn],
+      });
+    },
+  });
+}
+
+export function useDeleteCklstArtcl() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      cklstArtclSn,
+      cklstSn,
+    }: {
+      cklstArtclSn: number;
+      cklstSn: number;
+    }) => cklstArtclService.remove(cklstArtclSn, cklstSn),
+    onSuccess: (_data, { cklstSn }) => {
+      queryClient.invalidateQueries({ queryKey: cklstArtclBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstArtclBaseKey, "page", { cklstSn }],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstArtclBaseKey, "by-cklst", cklstSn],
+      });
+    },
+  });
+}
+
+export function useCklstRvwPage(params: CklstRvwSearchParams) {
+  const { cklstSn } = params;
+
+  return useQuery({
+    queryKey: [...cklstRvwBaseKey, "page", params],
+    queryFn: () => cklstRvwService.findPage(params),
+    enabled: cklstSn != null,
+  });
+}
+
+export function useCklstRvwByArtcl(
+  cklstSn: number | null | undefined,
+  cklstArtclSn: number | null | undefined,
+) {
+  return useQuery({
+    queryKey: [...cklstRvwBaseKey, "by-artcl", cklstSn, cklstArtclSn],
+    queryFn: () => cklstRvwService.findByArtcl(cklstSn!, cklstArtclSn!),
+    enabled: cklstSn != null && cklstArtclSn != null,
+  });
+}
+
+export function useCklstRvw(params: {
+  cklstRvwSn: number | null | undefined;
+  cklstArtclSn: number | null | undefined;
+  cklstSn: number | null | undefined;
+}) {
+  const { cklstRvwSn, cklstArtclSn, cklstSn } = params;
+
+  return useQuery({
+    queryKey: [...cklstRvwBaseKey, cklstRvwSn, cklstArtclSn, cklstSn],
+    queryFn: () => cklstRvwService.findById(cklstRvwSn!, cklstArtclSn!, cklstSn!),
+    enabled: cklstRvwSn != null && cklstArtclSn != null && cklstSn != null,
+  });
+}
+
+export function useCreateCklstRvw() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: CklstRvwSaveRequest) => cklstRvwService.create(body),
+    onSuccess: (_data, { cklstSn, cklstArtclSn }) => {
+      queryClient.invalidateQueries({ queryKey: cklstRvwBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstRvwBaseKey, "page", { cklstSn }],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstRvwBaseKey, "by-artcl", cklstSn, cklstArtclSn],
+      });
+    },
+  });
+}
+
+export function useUpdateCklstRvw() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      cklstRvwSn,
+      cklstArtclSn,
+      cklstSn,
+      body,
+    }: {
+      cklstRvwSn: number;
+      cklstArtclSn: number;
+      cklstSn: number;
+      body: CklstRvwUpdateRequest;
+    }) => cklstRvwService.update(cklstRvwSn, cklstArtclSn, cklstSn, body),
+    onSuccess: (_data, { cklstRvwSn, cklstArtclSn, cklstSn }) => {
+      queryClient.invalidateQueries({ queryKey: cklstRvwBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstRvwBaseKey, cklstRvwSn, cklstArtclSn, cklstSn],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstRvwBaseKey, "page", { cklstSn }],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstRvwBaseKey, "by-artcl", cklstSn, cklstArtclSn],
+      });
+    },
+  });
+}
+
+export function useDeleteCklstRvw() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      cklstRvwSn,
+      cklstArtclSn,
+      cklstSn,
+    }: {
+      cklstRvwSn: number;
+      cklstArtclSn: number;
+      cklstSn: number;
+    }) => cklstRvwService.remove(cklstRvwSn, cklstArtclSn, cklstSn),
+    onSuccess: (_data, { cklstSn, cklstArtclSn }) => {
+      queryClient.invalidateQueries({ queryKey: cklstRvwBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstRvwBaseKey, "page", { cklstSn }],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [...cklstRvwBaseKey, "by-artcl", cklstSn, cklstArtclSn],
+      });
+    },
+  });
+}
diff --git a/apps/as/src/entities/cklst/index.ts b/apps/as/src/entities/cklst/index.ts
new file mode 100644
index 000000000..12796cd18
--- /dev/null
+++ b/apps/as/src/entities/cklst/index.ts
@@ -0,0 +1,46 @@
+export { cklstArtclService } from "./api/cklst-artcl-service";
+export { cklstMngService } from "./api/cklst-mng-service";
+export { cklstRvwService } from "./api/cklst-rvw-service";
+export {
+  useCklstArtcl,
+  useCklstArtclList,
+  useCklstArtclPage,
+  useCklstMng,
+  useCklstMngPage,
+  useCklstRvw,
+  useCklstRvwByArtcl,
+  useCklstRvwPage,
+  useCreateCklstArtcl,
+  useCreateCklstMng,
+  useCreateCklstRvw,
+  useDeleteCklstArtcl,
+  useDeleteCklstMng,
+  useDeleteCklstRvw,
+  useUpdateCklstArtcl,
+  useUpdateCklstMng,
+  useUpdateCklstRvw,
+} from "./api/queries";
+export type {
+  CklstArtcl,
+  CklstArtclId,
+  CklstArtclSaveRequest,
+  CklstArtclSearchParams,
+  CklstArtclService,
+  CklstArtclUpdateRequest,
+} from "./model/cklst-artcl-interface";
+export type {
+  CklstMng,
+  CklstMngSaveRequest,
+  CklstMngSearchParams,
+  CklstMngService,
+  CklstTreeNode,
+  CklstTreeSearchParams,
+} from "./model/cklst-mng-interface";
+export type {
+  CklstRvw,
+  CklstRvwId,
+  CklstRvwSaveRequest,
+  CklstRvwSearchParams,
+  CklstRvwService,
+  CklstRvwUpdateRequest,
+} from "./model/cklst-rvw-interface";
diff --git a/apps/as/src/entities/cklst/model/cklst-artcl-interface.ts b/apps/as/src/entities/cklst/model/cklst-artcl-interface.ts
new file mode 100644
index 000000000..9d6e0e055
--- /dev/null
+++ b/apps/as/src/entities/cklst/model/cklst-artcl-interface.ts
@@ -0,0 +1,48 @@
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+export interface CklstArtclId {
+  cklstArtclSn: number;
+  cklstSn: number;
+}
+
+export interface CklstArtcl {
+  cklstArtclSn: number;
+  cklstSn: number;
+  cklstArtclNm?: string;
+  useYn?: "Y" | "N";
+  rgtr?: string;
+  rgtrNm?: string;
+  mdfr?: string;
+  regDt?: string;
+  mdfcnDt?: string;
+}
+
+export interface CklstArtclSearchParams extends PageableParams {
+  cklstSn?: number;
+  cklstArtclNm?: string;
+  useYn?: "Y" | "N";
+}
+
+export interface CklstArtclSaveRequest {
+  cklstSn: number;
+  cklstArtclNm?: string;
+  useYn?: "Y" | "N";
+}
+
+export interface CklstArtclUpdateRequest {
+  cklstArtclNm?: string;
+  useYn?: "Y" | "N";
+}
+
+export interface CklstArtclService {
+  findPage(params: CklstArtclSearchParams): Promise<PageResponse<CklstArtcl>>;
+  findByCklstSn(cklstSn: number): Promise<CklstArtcl[]>;
+  findById(cklstArtclSn: number, cklstSn: number): Promise<CklstArtcl>;
+  create(body: CklstArtclSaveRequest): Promise<CklstArtclId>;
+  update(
+    cklstArtclSn: number,
+    cklstSn: number,
+    body: CklstArtclUpdateRequest,
+  ): Promise<CklstArtclId>;
+  remove(cklstArtclSn: number, cklstSn: number): Promise<CklstArtclId>;
+}
diff --git a/apps/as/src/entities/cklst/model/cklst-mng-interface.ts b/apps/as/src/entities/cklst/model/cklst-mng-interface.ts
new file mode 100644
index 000000000..f6c80e630
--- /dev/null
+++ b/apps/as/src/entities/cklst/model/cklst-mng-interface.ts
@@ -0,0 +1,57 @@
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+export interface CklstMng {
+  cklstSn: number;
+  cklstNm: string;
+  taskSeComCd: string;
+  useYn?: "Y" | "N";
+  docSeComCd?: string;
+  rgtr?: string;
+  rgtrNm?: string;
+  mdfr?: string;
+  regDt?: string;
+  mdfcnDt?: string;
+}
+
+export interface CklstTreeNode {
+  cklstSn: number;
+  cklstNm: string;
+  cklstArtclSn: number;
+  cklstArtclNm: string;
+  cklstRvwSn: number;
+  upCklstRvwSn: number | null;
+  treeLevel: number;
+  rvwCn: string;
+  bchckUseYn: "Y" | "N";
+  sortSeq: number;
+  // optional: backend may include the taskSeComCd per node
+  taskSeComCd?: string;
+}
+
+export interface CklstTreeSearchParams {
+  docSeComCd?: string;
+  taskSeComCd?: string;
+}
+
+export interface CklstMngSearchParams extends PageableParams {
+  cklstNm?: string;
+  taskSeComCd?: string;
+  useYn?: "Y" | "N";
+  docSeComCd?: string;
+}
+
+export interface CklstMngSaveRequest {
+  cklstNm: string;
+  taskSeComCd: string;
+  useYn?: "Y" | "N";
+  docSeComCd?: string;
+}
+
+export interface CklstMngService {
+  findPage(params: CklstMngSearchParams): Promise<PageResponse<CklstMng>>;
+  findById(cklstSn: number): Promise<CklstMng>;
+  findTree(params: CklstTreeSearchParams): Promise<CklstTreeNode[]>;
+  create(body: CklstMngSaveRequest): Promise<number>;
+  update(cklstSn: number, body: CklstMngSaveRequest): Promise<number>;
+  remove(cklstSn: number): Promise<number>;
+}
diff --git a/apps/as/src/entities/cklst/model/cklst-rvw-interface.ts b/apps/as/src/entities/cklst/model/cklst-rvw-interface.ts
new file mode 100644
index 000000000..2a9ddc7d5
--- /dev/null
+++ b/apps/as/src/entities/cklst/model/cklst-rvw-interface.ts
@@ -0,0 +1,64 @@
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+export interface CklstRvwId {
+  cklstRvwSn: number;
+  cklstArtclSn: number;
+  cklstSn: number;
+}
+
+export interface CklstRvw {
+  cklstRvwSn: number;
+  cklstArtclSn: number;
+  cklstSn: number;
+  upCklstRvwSn?: number;
+  rvwCnLvNo?: number;
+  rvwCn?: string;
+  bchckUseYn?: "Y" | "N";
+  sortSeq?: number;
+  useYn?: "Y" | "N";
+  rgtr?: string;
+  rgtrNm?: string;
+  mdfr?: string;
+  regDt?: string;
+  mdfcnDt?: string;
+}
+
+export interface CklstRvwSearchParams extends PageableParams {
+  cklstSn?: number;
+  cklstArtclSn?: number;
+  useYn?: "Y" | "N";
+}
+
+export interface CklstRvwSaveRequest {
+  cklstArtclSn: number;
+  cklstSn: number;
+  upCklstRvwSn?: number;
+  rvwCnLvNo?: number;
+  rvwCn?: string;
+  bchckUseYn?: "Y" | "N";
+  sortSeq?: number;
+  useYn?: "Y" | "N";
+}
+
+export interface CklstRvwUpdateRequest {
+  upCklstRvwSn?: number;
+  rvwCnLvNo?: number;
+  rvwCn?: string;
+  bchckUseYn?: "Y" | "N";
+  sortSeq?: number;
+  useYn?: "Y" | "N";
+}
+
+export interface CklstRvwService {
+  findPage(params: CklstRvwSearchParams): Promise<PageResponse<CklstRvw>>;
+  findByArtcl(cklstSn: number, cklstArtclSn: number): Promise<CklstRvw[]>;
+  findById(cklstRvwSn: number, cklstArtclSn: number, cklstSn: number): Promise<CklstRvw>;
+  create(body: CklstRvwSaveRequest): Promise<CklstRvwId>;
+  update(
+    cklstRvwSn: number,
+    cklstArtclSn: number,
+    cklstSn: number,
+    body: CklstRvwUpdateRequest,
+  ): Promise<CklstRvwId>;
+  remove(cklstRvwSn: number, cklstArtclSn: number, cklstSn: number): Promise<CklstRvwId>;
+}
diff --git a/apps/as/src/entities/cnstp/api/cnstp-service.ts b/apps/as/src/entities/cnstp/api/cnstp-service.ts
new file mode 100644
index 000000000..f39be006a
--- /dev/null
+++ b/apps/as/src/entities/cnstp/api/cnstp-service.ts
@@ -0,0 +1,58 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import {
+  CNSTP_SE_SAVE_MODE,
+  type CnstpSeMngPutRequestDto,
+  type CnstpSeMngResponseDto,
+  type CnstpSeMngSaveRequestDto,
+  type CnstpSeMngSearchDto,
+  type CnstpSeMngService,
+  type CnstpSeMngTreeDto,
+} from "../model/cnstp-interface";
+
+const BASE = ENDPOINT.AS_COMMON_SERVICE.CNSTP_SE;
+
+async function findAll(params: CnstpSeMngSearchDto): Promise<PageResponse<CnstpSeMngResponseDto>> {
+  const response = await client.get<PageResponse<CnstpSeMngResponseDto>>(BASE, { params });
+  return response.data;
+}
+
+async function findTree(): Promise<CnstpSeMngTreeDto[]> {
+  const response = await client.get<CnstpSeMngTreeDto[]>(`${BASE}/list/tree`);
+  return response.data;
+}
+
+async function findById(cnstpSeCd: string): Promise<CnstpSeMngResponseDto> {
+  const response = await client.get<CnstpSeMngResponseDto>(`${BASE}/${cnstpSeCd}`);
+  return response.data;
+}
+
+async function saveMulti(body: CnstpSeMngSaveRequestDto[]): Promise<CnstpSeMngResponseDto[]> {
+  const response = await client.post<CnstpSeMngResponseDto[]>(BASE, body);
+  return response.data;
+}
+
+async function update(cnstpSeCd: string, body: CnstpSeMngPutRequestDto): Promise<string> {
+  const response = await client.put<string>(`${BASE}/${cnstpSeCd}`, {
+    ...body,
+    cnstpSeCd,
+    mode: CNSTP_SE_SAVE_MODE.UPDATE,
+  });
+  return response.data;
+}
+
+async function deleteCnstpSeCd(cnstpSeCd: string): Promise<string> {
+  const response = await client.delete<string>(`${BASE}/${cnstpSeCd}`);
+  return response.data;
+}
+
+export const cnstpSeMngService = {
+  findAll,
+  findTree,
+  findById,
+  saveMulti,
+  update,
+  delete: deleteCnstpSeCd,
+} satisfies CnstpSeMngService;
diff --git a/apps/as/src/entities/cnstp/api/queries.ts b/apps/as/src/entities/cnstp/api/queries.ts
new file mode 100644
index 000000000..2ebb44dea
--- /dev/null
+++ b/apps/as/src/entities/cnstp/api/queries.ts
@@ -0,0 +1,73 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+  CnstpSeMngPutRequestDto,
+  CnstpSeMngSaveRequestDto,
+  CnstpSeMngSearchDto,
+} from "../model/cnstp-interface";
+
+import { cnstpSeMngService } from "./cnstp-service";
+
+const cnstpSeMngBaseKey = [ENDPOINT.AS_COMMON_SERVICE.CNSTP_SE] as const;
+
+export function useCnstpSeMngPage(params: CnstpSeMngSearchDto) {
+  return useQuery({
+    queryKey: [...cnstpSeMngBaseKey, "findAll", params],
+    queryFn: () => cnstpSeMngService.findAll(params),
+  });
+}
+
+export function useCnstpSeMngTree() {
+  return useQuery({
+    queryKey: [...cnstpSeMngBaseKey, "findTree"],
+    queryFn: () => cnstpSeMngService.findTree(),
+    staleTime: Infinity,
+  });
+}
+
+export function useCnstpSeMng(cnstpSeCd: string | null | undefined) {
+  return useQuery({
+    queryKey: [...cnstpSeMngBaseKey, "findById", cnstpSeCd],
+    queryFn: () => cnstpSeMngService.findById(cnstpSeCd!),
+    enabled: Boolean(cnstpSeCd),
+  });
+}
+
+export function useSaveMultiCnstpSeMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: CnstpSeMngSaveRequestDto[]) => cnstpSeMngService.saveMulti(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: cnstpSeMngBaseKey });
+    },
+  });
+}
+
+export function useUpdateCnstpSeMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ cnstpSeCd, body }: { cnstpSeCd: string; body: CnstpSeMngPutRequestDto }) =>
+      cnstpSeMngService.update(cnstpSeCd, body),
+    onSuccess: (_data, { cnstpSeCd }) => {
+      queryClient.invalidateQueries({ queryKey: cnstpSeMngBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...cnstpSeMngBaseKey, "findById", cnstpSeCd],
+      });
+    },
+  });
+}
+
+export function useDeleteCnstpSeMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (cnstpSeCd: string) => cnstpSeMngService.delete(cnstpSeCd),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: cnstpSeMngBaseKey });
+    },
+  });
+}
diff --git a/apps/as/src/entities/cnstp/index.ts b/apps/as/src/entities/cnstp/index.ts
new file mode 100644
index 000000000..ea76468b3
--- /dev/null
+++ b/apps/as/src/entities/cnstp/index.ts
@@ -0,0 +1,19 @@
+export { cnstpSeMngService } from "./api/cnstp-service";
+export {
+  useCnstpSeMng,
+  useCnstpSeMngPage,
+  useCnstpSeMngTree,
+  useDeleteCnstpSeMng,
+  useSaveMultiCnstpSeMng,
+  useUpdateCnstpSeMng,
+} from "./api/queries";
+export type {
+  BizSclTreeDto,
+  CnstpSeMngResponseDto,
+  CnstpSeMngSaveRequestDto,
+  CnstpSeMngSearchDto,
+  CnstpSeMngService,
+  CnstpSeMngTreeDto,
+  CnstpSeSaveMode,
+} from "./model/cnstp-interface";
+export { CNSTP_SE_SAVE_MODE } from "./model/cnstp-interface";
diff --git a/apps/as/src/entities/cnstp/model/cnstp-interface.ts b/apps/as/src/entities/cnstp/model/cnstp-interface.ts
new file mode 100644
index 000000000..def16901a
--- /dev/null
+++ b/apps/as/src/entities/cnstp/model/cnstp-interface.ts
@@ -0,0 +1,86 @@
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+export const CNSTP_SE_SAVE_MODE = {
+  CREATE: "C",
+  UPDATE: "U",
+  DELETE: "D",
+} as const;
+
+export type CnstpSeSaveMode = (typeof CNSTP_SE_SAVE_MODE)[keyof typeof CNSTP_SE_SAVE_MODE];
+
+/** 백엔드 CnstpSeMngResponseDto */
+export interface CnstpSeMngResponseDto {
+  cnstpSeCd: string;
+  cnstpSeCdNm: string;
+  upCnstpCd?: string;
+  cdLvNo: number;
+  useYn: string;
+  expln?: string;
+  rgtr?: string;
+  rgtrNm?: string;
+  mdfr?: string;
+  regDt?: string;
+  mdfcnDt?: string;
+}
+
+/** 백엔드 CnstpSeMngSearchDto + Pageable */
+export interface CnstpSeMngSearchDto extends PageableParams {
+  cnstpSeCd?: string;
+  cnstpSeCdNm?: string;
+  useYn?: string;
+}
+
+/** 백엔드 CnstpSeMngSaveRequestDto */
+export interface CnstpSeMngSaveRequestDto {
+  cnstpSeCd: string;
+  mode: CnstpSeSaveMode;
+  cnstpSeCdNm?: string;
+  upCnstpCd?: string;
+  cdLvNo?: number;
+  useYn?: string;
+  expln?: string;
+}
+
+/** PUT /{cnstpSeCd} 요청 (mode는 서비스에서 U로 설정) */
+export interface CnstpSeMngPutRequestDto {
+  cnstpSeCd: string;
+  cnstpSeCdNm?: string;
+  upCnstpCd?: string;
+  cdLvNo?: number;
+  useYn?: string;
+  expln?: string;
+}
+
+/** 백엔드 CnstpSeMngTreeDto */
+export interface CnstpSeMngTreeDto {
+  indCnstpSeCdNm: string;
+  cnstpSeCd: string;
+  cnstpSeCdNm: string;
+  upCnstpCd?: string;
+  useYn: string;
+  treeLevel: number;
+  treePath: string;
+}
+
+/** 백엔드 BizSclTreeDto */
+export interface BizSclTreeDto {
+  indCnstpSeCdNm: string;
+  cnstpSeCd: string;
+  cnstpSeCdNm: string;
+  useYn: string;
+  treeLevel: number;
+  treePath: string;
+  bscPlanQty?: number;
+  bgtRfltQty?: number;
+  tstmDesignQty?: number;
+}
+
+/** Controller public 메서드명·시그니처와 동일 */
+export interface CnstpSeMngService {
+  findAll(params: CnstpSeMngSearchDto): Promise<PageResponse<CnstpSeMngResponseDto>>;
+  findTree(): Promise<CnstpSeMngTreeDto[]>;
+  findById(cnstpSeCd: string): Promise<CnstpSeMngResponseDto>;
+  saveMulti(body: CnstpSeMngSaveRequestDto[]): Promise<CnstpSeMngResponseDto[]>;
+  update(cnstpSeCd: string, body: CnstpSeMngPutRequestDto): Promise<string>;
+  delete(cnstpSeCd: string): Promise<string>;
+}
diff --git a/apps/as/src/entities/code/api/code-service.ts b/apps/as/src/entities/code/api/code-service.ts
new file mode 100644
index 000000000..2545330dd
--- /dev/null
+++ b/apps/as/src/entities/code/api/code-service.ts
@@ -0,0 +1,27 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+
+import type { Code, CodeService } from "../model/code-interface";
+
+async function getList(upCd: string): Promise<Code[]> {
+  const response = await client.get<Code[]>(`${ENDPOINT.CMS_SERVICE.CODE}/${upCd}`);
+  return response.data;
+}
+
+async function getListByUseYn(upCd: string, useYn: string): Promise<Code[]> {
+  const response = await client.get<Code[]>(`${ENDPOINT.CMS_SERVICE.CODE}/${upCd}/${useYn}`);
+  return response.data;
+}
+
+async function getCodeName(upCd: string, lwpoCd: string): Promise<string> {
+  const response = await client.get<string>(
+    `${ENDPOINT.CMS_SERVICE.CODE}/${upCd}/lwpoCd/${lwpoCd}`,
+  );
+  return response.data;
+}
+
+export const codeService = {
+  getList,
+  getListByUseYn,
+  getCodeName,
+} satisfies CodeService;
diff --git a/apps/as/src/entities/code/api/queries.ts b/apps/as/src/entities/code/api/queries.ts
new file mode 100644
index 000000000..15dd51559
--- /dev/null
+++ b/apps/as/src/entities/code/api/queries.ts
@@ -0,0 +1,36 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import { codeService } from "./code-service";
+
+const codeBaseKey = [ENDPOINT.CMS_SERVICE.CODE] as const;
+
+const CODE_STALE_TIME = 1000 * 60 * 10;
+
+export function useCodeList(upCd: string | undefined) {
+  return useQuery({
+    queryKey: [...codeBaseKey, upCd],
+    queryFn: () => codeService.getList(upCd!),
+    enabled: Boolean(upCd),
+    staleTime: CODE_STALE_TIME,
+  });
+}
+
+export function useCodeListByUseYn(upCd: string | undefined, useYn: string) {
+  return useQuery({
+    queryKey: [...codeBaseKey, upCd, useYn],
+    queryFn: () => codeService.getListByUseYn(upCd!, useYn),
+    enabled: Boolean(upCd && useYn),
+    staleTime: CODE_STALE_TIME,
+  });
+}
+
+export function useCodeName(upCd: string | undefined, lwpoCd: string | undefined) {
+  return useQuery({
+    queryKey: [...codeBaseKey, upCd, "name", lwpoCd],
+    queryFn: () => codeService.getCodeName(upCd!, lwpoCd!),
+    enabled: Boolean(upCd && lwpoCd),
+    staleTime: CODE_STALE_TIME,
+  });
+}
diff --git a/apps/as/src/entities/code/index.ts b/apps/as/src/entities/code/index.ts
new file mode 100644
index 000000000..0f1e5e050
--- /dev/null
+++ b/apps/as/src/entities/code/index.ts
@@ -0,0 +1,5 @@
+export { codeService } from "./api/code-service";
+export { useCodeList, useCodeListByUseYn, useCodeName } from "./api/queries";
+export { findCodeLabel } from "./lib/find-code-label";
+export type { Code, CodeService } from "./model/code-interface";
+export { CodeSelect } from "./ui/code-select";
diff --git a/apps/as/src/entities/code/lib/find-code-label.ts b/apps/as/src/entities/code/lib/find-code-label.ts
new file mode 100644
index 000000000..6753a7758
--- /dev/null
+++ b/apps/as/src/entities/code/lib/find-code-label.ts
@@ -0,0 +1,7 @@
+import type { Code } from "../model/code-interface";
+
+export function findCodeLabel(codes: Code[] | undefined, lwpoCd?: string): string {
+  if (!lwpoCd) return "";
+  if (!codes?.length) return lwpoCd;
+  return codes.find((c) => c.lwpoCd === lwpoCd)?.lwpoCdNm ?? lwpoCd;
+}
diff --git a/apps/as/src/entities/code/model/code-interface.ts b/apps/as/src/entities/code/model/code-interface.ts
new file mode 100644
index 000000000..30b0664a6
--- /dev/null
+++ b/apps/as/src/entities/code/model/code-interface.ts
@@ -0,0 +1,14 @@
+/** cms-service CodeResponseDto */
+export interface Code {
+  lwpoCd: string;
+  upCd: string;
+  lwpoCdNm: string;
+  unit?: string;
+  prntLwpoCd?: string;
+}
+
+export interface CodeService {
+  getList(upCd: string): Promise<Code[]>;
+  getListByUseYn(upCd: string, useYn: string): Promise<Code[]>;
+  getCodeName(upCd: string, lwpoCd: string): Promise<string>;
+}
diff --git a/apps/as/src/entities/code/ui/code-select.tsx b/apps/as/src/entities/code/ui/code-select.tsx
new file mode 100644
index 000000000..e803e9285
--- /dev/null
+++ b/apps/as/src/entities/code/ui/code-select.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import {
+  cn,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+
+import { useCodeList, useCodeListByUseYn } from "../api/queries";
+
+interface CodeSelectProps extends React.ComponentPropsWithoutRef<typeof Select> {
+  upCd: string;
+  useYn?: string;
+  placeholder?: string;
+  className?: string;
+}
+
+function CodeSelect({
+  upCd,
+  useYn,
+  placeholder = "선택",
+  className,
+  ...props
+}: CodeSelectProps) {
+  const listQuery = useCodeList(useYn ? undefined : upCd);
+  const listByUseYnQuery = useCodeListByUseYn(useYn ? upCd : undefined, useYn ?? "");
+
+  const codes = useYn ? listByUseYnQuery.data : listQuery.data;
+  const isLoading = useYn ? listByUseYnQuery.isPending : listQuery.isPending;
+
+  return (
+    <Select {...props} disabled={props.disabled || isLoading}>
+      <SelectTrigger className={cn("w-[12rem]", className)}>
+        <SelectValue placeholder={isLoading ? "로딩 중…" : placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {codes?.map((item) => (
+          <SelectItem key={item.lwpoCd} value={item.lwpoCd}>
+            {item.lwpoCdNm}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export { CodeSelect };
diff --git a/apps/as/src/entities/elapr/api/elapr-apln-service.ts b/apps/as/src/entities/elapr/api/elapr-apln-service.ts
new file mode 100644
index 000000000..a61b95f95
--- /dev/null
+++ b/apps/as/src/entities/elapr/api/elapr-apln-service.ts
@@ -0,0 +1,54 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import type {
+  ElaprApln,
+  ElaprAplnListParams,
+  ElaprAplnReorderRequest,
+  ElaprAplnSaveRequest,
+  ElaprAplnService,
+  ElaprAplnUpdateRequest,
+} from "../model/elapr-apln-interface";
+
+async function findPage(params: ElaprAplnListParams): Promise<PageResponse<ElaprApln>> {
+  const response = await client.get<PageResponse<ElaprApln>>(ENDPOINT.AS_ELAPR_SERVICE.ELAPR_APLN, {
+    params,
+  });
+  return response.data;
+}
+
+async function findById(aplnId: string): Promise<ElaprApln> {
+  const response = await client.get<ElaprApln>(`${ENDPOINT.AS_ELAPR_SERVICE.ELAPR_APLN}/${aplnId}`);
+  return response.data;
+}
+
+async function saveMulti(body: ElaprAplnSaveRequest[]): Promise<ElaprApln[]> {
+  const response = await client.post<ElaprApln[]>(ENDPOINT.AS_ELAPR_SERVICE.ELAPR_APLN, body);
+  return response.data;
+}
+
+async function update(aplnId: string, body: ElaprAplnUpdateRequest): Promise<ElaprApln> {
+  const response = await client.put<ElaprApln>(
+    `${ENDPOINT.AS_ELAPR_SERVICE.ELAPR_APLN}/${aplnId}`,
+    body,
+  );
+  return response.data;
+}
+
+async function remove(aplnId: string): Promise<void> {
+  await client.delete(`${ENDPOINT.AS_ELAPR_SERVICE.ELAPR_APLN}/${aplnId}`);
+}
+
+async function reorder(body: ElaprAplnReorderRequest): Promise<void> {
+  await client.put(`${ENDPOINT.AS_ELAPR_SERVICE.ELAPR_APLN}/reorder`, body);
+}
+
+export const elaprAplnService = {
+  findPage,
+  findById,
+  saveMulti,
+  update,
+  remove,
+  reorder,
+} satisfies ElaprAplnService;
diff --git a/apps/as/src/entities/elapr/api/elapr-dmnd-service.ts b/apps/as/src/entities/elapr/api/elapr-dmnd-service.ts
new file mode 100644
index 000000000..8b2e67fa2
--- /dev/null
+++ b/apps/as/src/entities/elapr/api/elapr-dmnd-service.ts
@@ -0,0 +1,17 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+  ElaprDmndResponse,
+  ElaprDmndSaveRequest,
+  ElaprDmndService,
+} from "../model/elapr-dmnd-interface";
+
+async function create(body: ElaprDmndSaveRequest): Promise<ElaprDmndResponse> {
+  const response = await client.post<ElaprDmndResponse>(ENDPOINT.AS_ELAPR_SERVICE.ELAPR_DMND, body);
+  return response.data;
+}
+
+export const ElaprDmndApi: ElaprDmndService = {
+  create,
+};
diff --git a/apps/as/src/entities/elapr/api/elapr-prgrs-service.ts b/apps/as/src/entities/elapr/api/elapr-prgrs-service.ts
new file mode 100644
index 000000000..97f925113
--- /dev/null
+++ b/apps/as/src/entities/elapr/api/elapr-prgrs-service.ts
@@ -0,0 +1,7 @@
+import { client } from "@/shared/api";
+
+export async function processElaprPrgrs(elaprPrgrsId: string, atrzPrgrsSttsComCd = "ATRZ_STTS_003"): Promise<void> {
+  await client.put(`/as-elapr-service/api/v1/elapr-prgrs-stts/${elaprPrgrsId}/process`, {
+    atrzPrgrsSttsComCd,
+  });
+}
diff --git a/apps/as/src/entities/elapr/api/elapr-tmplt-service.ts b/apps/as/src/entities/elapr/api/elapr-tmplt-service.ts
new file mode 100644
index 000000000..d9fcac55a
--- /dev/null
+++ b/apps/as/src/entities/elapr/api/elapr-tmplt-service.ts
@@ -0,0 +1,51 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import type {
+  ElaprTmplt,
+  ElaprTmpltSaveRequest,
+  ElaprTmpltSearchParams,
+  ElaprTmpltService,
+  ElaprTmpltUpdateRequest,
+} from "../model/elapr-tmplt-interface";
+
+async function findPage(params: ElaprTmpltSearchParams): Promise<PageResponse<ElaprTmplt>> {
+  const response = await client.get<PageResponse<ElaprTmplt>>(
+    ENDPOINT.AS_ELAPR_SERVICE.ELAPR_TMPLT,
+    { params },
+  );
+  return response.data;
+}
+
+async function findById(elaprTmpltId: string): Promise<ElaprTmplt> {
+  const response = await client.get<ElaprTmplt>(
+    `${ENDPOINT.AS_ELAPR_SERVICE.ELAPR_TMPLT}/${elaprTmpltId}`,
+  );
+  return response.data;
+}
+
+async function create(body: ElaprTmpltSaveRequest): Promise<ElaprTmplt> {
+  const response = await client.post<ElaprTmplt>(ENDPOINT.AS_ELAPR_SERVICE.ELAPR_TMPLT, body);
+  return response.data;
+}
+
+async function update(elaprTmpltId: string, body: ElaprTmpltUpdateRequest): Promise<ElaprTmplt> {
+  const response = await client.put<ElaprTmplt>(
+    `${ENDPOINT.AS_ELAPR_SERVICE.ELAPR_TMPLT}/${elaprTmpltId}`,
+    body,
+  );
+  return response.data;
+}
+
+async function remove(elaprTmpltId: string): Promise<void> {
+  await client.delete(`${ENDPOINT.AS_ELAPR_SERVICE.ELAPR_TMPLT}/${elaprTmpltId}`);
+}
+
+export const elaprTmpltService = {
+  findPage,
+  findById,
+  create,
+  update,
+  remove,
+} satisfies ElaprTmpltService;
diff --git a/apps/as/src/entities/elapr/api/queries.ts b/apps/as/src/entities/elapr/api/queries.ts
new file mode 100644
index 000000000..59a6bb91b
--- /dev/null
+++ b/apps/as/src/entities/elapr/api/queries.ts
@@ -0,0 +1,176 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+  ElaprAplnListParams,
+  ElaprAplnReorderRequest,
+  ElaprAplnSaveRequest,
+  ElaprAplnUpdateRequest,
+} from "../model/elapr-apln-interface";
+import type {
+  ElaprTmpltSaveRequest,
+  ElaprTmpltSearchParams,
+  ElaprTmpltUpdateRequest,
+} from "../model/elapr-tmplt-interface";
+
+import { elaprAplnService } from "./elapr-apln-service";
+import { elaprTmpltService } from "./elapr-tmplt-service";
+
+const elaprTmpltBaseKey = [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_TMPLT] as const;
+const elaprAplnBaseKey = [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_APLN] as const;
+
+export function useElaprTmpltPage(params: ElaprTmpltSearchParams) {
+  return useQuery({
+    queryKey: [...elaprTmpltBaseKey, "page", params],
+    queryFn: () => elaprTmpltService.findPage(params),
+  });
+}
+
+export function useElaprTmplt(elaprTmpltId: string | null | undefined) {
+  return useQuery({
+    queryKey: [...elaprTmpltBaseKey, elaprTmpltId],
+    queryFn: () => elaprTmpltService.findById(elaprTmpltId!),
+    enabled: Boolean(elaprTmpltId),
+  });
+}
+
+export function useCreateElaprTmplt() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: ElaprTmpltSaveRequest) => elaprTmpltService.create(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: elaprTmpltBaseKey });
+    },
+  });
+}
+
+export function useUpdateElaprTmplt() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      elaprTmpltId,
+      body,
+    }: {
+      elaprTmpltId: string;
+      body: ElaprTmpltUpdateRequest;
+    }) => elaprTmpltService.update(elaprTmpltId, body),
+    onSuccess: (_data, { elaprTmpltId }) => {
+      queryClient.invalidateQueries({ queryKey: elaprTmpltBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...elaprTmpltBaseKey, elaprTmpltId],
+      });
+    },
+  });
+}
+
+export function useDeleteElaprTmplt() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (elaprTmpltId: string) => elaprTmpltService.remove(elaprTmpltId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: elaprTmpltBaseKey });
+    },
+  });
+}
+
+export function useElaprAplnPage(params: ElaprAplnListParams) {
+  const { elaprTmpltId } = params;
+
+  return useQuery({
+    queryKey: [...elaprAplnBaseKey, "page", params],
+    queryFn: () => elaprAplnService.findPage(params),
+    enabled: Boolean(elaprTmpltId),
+  });
+}
+
+export function useElaprApln(aplnId: string | null | undefined) {
+  return useQuery({
+    queryKey: [...elaprAplnBaseKey, aplnId],
+    queryFn: () => elaprAplnService.findById(aplnId!),
+    enabled: Boolean(aplnId),
+  });
+}
+
+export function useSaveMultiElaprApln() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      body,
+    }: {
+      body: ElaprAplnSaveRequest[];
+      elaprTmpltId: string;
+    }) => elaprAplnService.saveMulti(body),
+    onSuccess: (_data, { elaprTmpltId }) => {
+      queryClient.invalidateQueries({ queryKey: elaprAplnBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...elaprAplnBaseKey, "page", { elaprTmpltId }],
+      });
+    },
+  });
+}
+
+export function useUpdateElaprApln() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      aplnId,
+      body,
+    }: {
+      aplnId: string;
+      body: ElaprAplnUpdateRequest;
+    }) => elaprAplnService.update(aplnId, body),
+    onSuccess: (_data, { body, aplnId }) => {
+      queryClient.invalidateQueries({ queryKey: elaprAplnBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...elaprAplnBaseKey, aplnId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [...elaprAplnBaseKey, "page", { elaprTmpltId: body.elaprTmpltId }],
+      });
+    },
+  });
+}
+
+export function useDeleteElaprApln() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      aplnId,
+    }: {
+      aplnId: string;
+      elaprTmpltId: string;
+    }) => elaprAplnService.remove(aplnId),
+    onSuccess: (_data, { elaprTmpltId }) => {
+      queryClient.invalidateQueries({ queryKey: elaprAplnBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...elaprAplnBaseKey, "page", { elaprTmpltId }],
+      });
+    },
+  });
+}
+
+export function useReorderElaprApln() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      body,
+    }: {
+      body: ElaprAplnReorderRequest;
+      elaprTmpltId: string;
+    }) => elaprAplnService.reorder(body),
+    onSuccess: (_data, { elaprTmpltId }) => {
+      queryClient.invalidateQueries({ queryKey: elaprAplnBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...elaprAplnBaseKey, "page", { elaprTmpltId }],
+      });
+    },
+  });
+}
diff --git a/apps/as/src/entities/elapr/index.ts b/apps/as/src/entities/elapr/index.ts
new file mode 100644
index 000000000..caa639e51
--- /dev/null
+++ b/apps/as/src/entities/elapr/index.ts
@@ -0,0 +1,33 @@
+export { elaprAplnService } from "./api/elapr-apln-service";
+export { elaprTmpltService } from "./api/elapr-tmplt-service";
+export {
+  useCreateElaprTmplt,
+  useDeleteElaprApln,
+  useDeleteElaprTmplt,
+  useElaprApln,
+  useElaprAplnPage,
+  useElaprTmplt,
+  useElaprTmpltPage,
+  useReorderElaprApln,
+  useSaveMultiElaprApln,
+  useUpdateElaprApln,
+  useUpdateElaprTmplt,
+} from "./api/queries";
+export {
+  ELAPR_APLN_SAVE_MODE,
+  type ElaprApln,
+  type ElaprAplnListParams,
+  type ElaprAplnReorderItem,
+  type ElaprAplnReorderRequest,
+  type ElaprAplnSaveMode,
+  type ElaprAplnSaveRequest,
+  type ElaprAplnService,
+  type ElaprAplnUpdateRequest,
+} from "./model/elapr-apln-interface";
+export type {
+  ElaprTmplt,
+  ElaprTmpltSaveRequest,
+  ElaprTmpltSearchParams,
+  ElaprTmpltService,
+  ElaprTmpltUpdateRequest,
+} from "./model/elapr-tmplt-interface";
diff --git a/apps/as/src/entities/elapr/model/elapr-apln-interface.ts b/apps/as/src/entities/elapr/model/elapr-apln-interface.ts
new file mode 100644
index 000000000..a41add2cd
--- /dev/null
+++ b/apps/as/src/entities/elapr/model/elapr-apln-interface.ts
@@ -0,0 +1,62 @@
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+export const ELAPR_APLN_SAVE_MODE = {
+  CREATE: "C",
+  UPDATE: "U",
+  DELETE: "D",
+} as const;
+
+export type ElaprAplnSaveMode =
+  (typeof ELAPR_APLN_SAVE_MODE)[keyof typeof ELAPR_APLN_SAVE_MODE];
+
+export interface ElaprApln {
+  aplnId: string;
+  elaprTmpltId: string;
+  aprvrUuid?: string;
+  aprvrNm?: string;
+  atrzSeComCd?: string;
+  atrzSeComNm?: string;
+  atrzSeqNo?: number;
+  regDt?: string;
+  rgtrUuid?: string;
+  mdfcnDt?: string;
+  mdfrUuid?: string;
+}
+
+export interface ElaprAplnListParams extends PageableParams {
+  elaprTmpltId?: string;
+}
+
+export interface ElaprAplnSaveRequest {
+  mode: ElaprAplnSaveMode;
+  aplnId?: string;
+  elaprTmpltId?: string;
+  aprvrUuid?: string;
+  atrzSeComCd?: string;
+  atrzSeqNo?: number;
+}
+
+export interface ElaprAplnUpdateRequest {
+  elaprTmpltId: string;
+  aprvrUuid?: string;
+  atrzSeComCd?: string;
+  atrzSeqNo?: number;
+}
+
+export interface ElaprAplnReorderItem {
+  aplnId: string;
+  atrzSeqNo: number;
+}
+
+export interface ElaprAplnReorderRequest {
+  items: ElaprAplnReorderItem[];
+}
+
+export interface ElaprAplnService {
+  findPage(params: ElaprAplnListParams): Promise<PageResponse<ElaprApln>>;
+  findById(aplnId: string): Promise<ElaprApln>;
+  saveMulti(body: ElaprAplnSaveRequest[]): Promise<ElaprApln[]>;
+  update(aplnId: string, body: ElaprAplnUpdateRequest): Promise<ElaprApln>;
+  remove(aplnId: string): Promise<void>;
+  reorder(body: ElaprAplnReorderRequest): Promise<void>;
+}
diff --git a/apps/as/src/entities/elapr/model/elapr-dmnd-interface.ts b/apps/as/src/entities/elapr/model/elapr-dmnd-interface.ts
new file mode 100644
index 000000000..249d98bf9
--- /dev/null
+++ b/apps/as/src/entities/elapr/model/elapr-dmnd-interface.ts
@@ -0,0 +1,22 @@
+export interface ElaprDmndSaveRequest {
+  elaprDocNo: string;
+  elaprTmpltId: string;
+  dmndTtl: string;
+  dmndCn: string;
+}
+
+export interface ElaprDmndResponse {
+  elaprDmndId: string;
+  elaprDocNo: string;
+  elaprTmpltId: string;
+  dmndTtl: string;
+  dmndCn: string;
+  atrzSttsComCd: string;
+  rqstrUuid: string;
+  regDt: string;
+  updtDt: string;
+}
+
+export interface ElaprDmndService {
+  create(body: ElaprDmndSaveRequest): Promise<ElaprDmndResponse>;
+}
diff --git a/apps/as/src/entities/elapr/model/elapr-tmplt-interface.ts b/apps/as/src/entities/elapr/model/elapr-tmplt-interface.ts
new file mode 100644
index 000000000..4d87d97e8
--- /dev/null
+++ b/apps/as/src/entities/elapr/model/elapr-tmplt-interface.ts
@@ -0,0 +1,40 @@
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+export interface ElaprTmplt {
+  elaprTmpltId: string;
+  elaprTmpltNm: string;
+  elaprTmpltExpln?: string;
+  docSeComCd?: string;
+  docSeComNm?: string;
+  regDt?: string;
+  rgtrUuid?: string;
+  mdfcnDt?: string;
+  mdfrUuid?: string;
+}
+
+export interface ElaprTmpltSearchParams extends PageableParams {
+  elaprTmpltNm?: string;
+  docSeComCd?: string;
+  regDtStart?: string;
+  regDtEnd?: string;
+}
+
+export interface ElaprTmpltSaveRequest {
+  elaprTmpltNm: string;
+  elaprTmpltExpln?: string;
+  docSeComCd?: string;
+}
+
+export interface ElaprTmpltUpdateRequest {
+  elaprTmpltNm: string;
+  elaprTmpltExpln?: string;
+  docSeComCd?: string;
+}
+
+export interface ElaprTmpltService {
+  findPage(params: ElaprTmpltSearchParams): Promise<PageResponse<ElaprTmplt>>;
+  findById(elaprTmpltId: string): Promise<ElaprTmplt>;
+  create(body: ElaprTmpltSaveRequest): Promise<ElaprTmplt>;
+  update(elaprTmpltId: string, body: ElaprTmpltUpdateRequest): Promise<ElaprTmplt>;
+  remove(elaprTmpltId: string): Promise<void>;
+}
diff --git a/apps/as/src/entities/esntl/api/esntl-service.ts b/apps/as/src/entities/esntl/api/esntl-service.ts
new file mode 100644
index 000000000..458940399
--- /dev/null
+++ b/apps/as/src/entities/esntl/api/esntl-service.ts
@@ -0,0 +1,68 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import type {
+  EsntlAtchFileMng,
+  EsntlAtchFileMngSaveRequest,
+  EsntlAtchFileMngSearchParams,
+  EsntlAtchFileMngService,
+  EsntlAtchFileMngTreeResponseDto,
+  EsntlAtchFileMngTreeSearchParams,
+} from "../model/esntl-interface";
+
+async function findTree(
+  params: EsntlAtchFileMngTreeSearchParams,
+): Promise<EsntlAtchFileMngTreeResponseDto[]> {
+  const response = await client.get<EsntlAtchFileMngTreeResponseDto[]>(
+    `${ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE}/list/tree`,
+    { params },
+  );
+  return response.data;
+}
+
+async function findPage(
+  params: EsntlAtchFileMngSearchParams,
+): Promise<PageResponse<EsntlAtchFileMng>> {
+  const response = await client.get<PageResponse<EsntlAtchFileMng>>(
+    ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE,
+    { params },
+  );
+  return response.data;
+}
+
+async function findById(esntlAtchFileId: string): Promise<EsntlAtchFileMng> {
+  const response = await client.get<EsntlAtchFileMng>(
+    `${ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE}/${esntlAtchFileId}`,
+  );
+  return response.data;
+}
+
+async function create(body: EsntlAtchFileMngSaveRequest): Promise<string> {
+  const response = await client.post<string>(ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE, body);
+  return response.data;
+}
+
+async function update(esntlAtchFileId: string, body: EsntlAtchFileMngSaveRequest): Promise<string> {
+  const response = await client.put<string>(
+    `${ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE}/${esntlAtchFileId}`,
+    body,
+  );
+  return response.data;
+}
+
+async function remove(esntlAtchFileId: string): Promise<string> {
+  const response = await client.delete<string>(
+    `${ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE}/${esntlAtchFileId}`,
+  );
+  return response.data;
+}
+
+export const esntlAtchFileMngService = {
+  findTree,
+  findPage,
+  findById,
+  create,
+  update,
+  remove,
+} satisfies EsntlAtchFileMngService;
diff --git a/apps/as/src/entities/esntl/api/queries.ts b/apps/as/src/entities/esntl/api/queries.ts
new file mode 100644
index 000000000..48e30fc68
--- /dev/null
+++ b/apps/as/src/entities/esntl/api/queries.ts
@@ -0,0 +1,79 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+  EsntlAtchFileMngSaveRequest,
+  EsntlAtchFileMngSearchParams,
+  EsntlAtchFileMngTreeSearchParams,
+} from "../model/esntl-interface";
+
+import { esntlAtchFileMngService } from "./esntl-service";
+
+const esntlAtchFileMngBaseKey = [ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE] as const;
+
+export function useEsntlAtchFileMngTree(params: EsntlAtchFileMngTreeSearchParams) {
+  return useQuery({
+    queryKey: [...esntlAtchFileMngBaseKey, "tree", params],
+    queryFn: () => esntlAtchFileMngService.findTree(params),
+    enabled: Boolean(params.docSeComCd),
+    staleTime: Infinity,
+  });
+}
+
+export function useEsntlAtchFileMngPage(params: EsntlAtchFileMngSearchParams) {
+  return useQuery({
+    queryKey: [...esntlAtchFileMngBaseKey, "page", params],
+    queryFn: () => esntlAtchFileMngService.findPage(params),
+  });
+}
+
+export function useEsntlAtchFileMng(esntlAtchFileId: string | null | undefined) {
+  return useQuery({
+    queryKey: [...esntlAtchFileMngBaseKey, esntlAtchFileId],
+    queryFn: () => esntlAtchFileMngService.findById(esntlAtchFileId!),
+    enabled: Boolean(esntlAtchFileId),
+  });
+}
+
+export function useCreateEsntlAtchFileMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: EsntlAtchFileMngSaveRequest) => esntlAtchFileMngService.create(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: esntlAtchFileMngBaseKey });
+    },
+  });
+}
+
+export function useUpdateEsntlAtchFileMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      esntlAtchFileId,
+      body,
+    }: {
+      esntlAtchFileId: string;
+      body: EsntlAtchFileMngSaveRequest;
+    }) => esntlAtchFileMngService.update(esntlAtchFileId, body),
+    onSuccess: (_data, { esntlAtchFileId }) => {
+      queryClient.invalidateQueries({ queryKey: esntlAtchFileMngBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...esntlAtchFileMngBaseKey, esntlAtchFileId],
+      });
+    },
+  });
+}
+
+export function useDeleteEsntlAtchFileMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (esntlAtchFileId: string) => esntlAtchFileMngService.remove(esntlAtchFileId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: esntlAtchFileMngBaseKey });
+    },
+  });
+}
diff --git a/apps/as/src/entities/esntl/index.ts b/apps/as/src/entities/esntl/index.ts
new file mode 100644
index 000000000..f359e1b44
--- /dev/null
+++ b/apps/as/src/entities/esntl/index.ts
@@ -0,0 +1,17 @@
+export { esntlAtchFileMngService } from "./api/esntl-service";
+export {
+  useCreateEsntlAtchFileMng,
+  useDeleteEsntlAtchFileMng,
+  useEsntlAtchFileMng,
+  useEsntlAtchFileMngPage,
+  useEsntlAtchFileMngTree,
+  useUpdateEsntlAtchFileMng,
+} from "./api/queries";
+export type {
+  EsntlAtchFileMng,
+  EsntlAtchFileMngSaveRequest,
+  EsntlAtchFileMngSearchParams,
+  EsntlAtchFileMngService,
+  EsntlAtchFileMngTreeResponseDto,
+  EsntlAtchFileMngTreeSearchParams,
+} from "./model/esntl-interface";
diff --git a/apps/as/src/entities/esntl/model/esntl-interface.ts b/apps/as/src/entities/esntl/model/esntl-interface.ts
new file mode 100644
index 000000000..56fd8b1dd
--- /dev/null
+++ b/apps/as/src/entities/esntl/model/esntl-interface.ts
@@ -0,0 +1,83 @@
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+/** 필수첨부파일관리 트리 조회 응답 DTO */
+export interface EsntlAtchFileMngTreeResponseDto {
+  /** 필수첨부파일아이디 */
+  esntlAtchFileId: string;
+  /** 문서구분공통코드 */
+  docSeComCd: string;
+  /** 필수첨부파일명 */
+  esntlAtchFileNm: string;
+  /** 필수첨부여부 ("Y" | "N") */
+  esntlAtchYn: "Y" | "N";
+  /** 필수첨부파일비고 (파일형식 등) */
+  esntlAtchFileRmrk: string;
+}
+
+/** 필수첨부파일관리 엔티티 (목록/상세 공용 응답 DTO) */
+export interface EsntlAtchFileMng {
+  /** 필수첨부파일아이디 */
+  esntlAtchFileId: string;
+  /** 문서구분공통코드 */
+  docSeComCd: string;
+  /** 필수첨부파일명 */
+  esntlAtchFileNm: string;
+  /** 필수첨부여부 ("Y" | "N") */
+  esntlAtchYn: "Y" | "N";
+  /** 필수첨부파일비고 */
+  esntlAtchFileRmrk?: string;
+  /** 등록자UUID */
+  rgtr?: string;
+  /** 등록자명 */
+  rgtrNm?: string;
+  /** 수정자UUID */
+  mdfr?: string;
+  /** 등록일시 (yyyy-MM-dd HH:mm:ss) */
+  regDt?: string;
+  /** 수정일시 */
+  mdfcnDt?: string;
+}
+
+/** 필수첨부파일관리 트리 조회 파라미터 */
+export interface EsntlAtchFileMngTreeSearchParams {
+  /** 문서구분공통코드 (예: "INSTL") */
+  docSeComCd: string;
+}
+
+/** 필수첨부파일관리 목록 조회 파라미터 (페이징 포함) */
+export interface EsntlAtchFileMngSearchParams extends PageableParams {
+  /** 문서구분공통코드 (예: "INSTL") */
+  docSeComCd?: string;
+  /** 필수첨부파일명 */
+  esntlAtchFileNm?: string;
+  /** 필수첨부여부 ("Y" | "N") */
+  esntlAtchYn?: "Y" | "N";
+}
+
+/** 필수첨부파일관리 서비스 인터페이스 */
+export interface EsntlAtchFileMngService {
+  /** 필수첨부파일 트리 조회 */
+  findTree(params: EsntlAtchFileMngTreeSearchParams): Promise<EsntlAtchFileMngTreeResponseDto[]>;
+  /** 필수첨부파일관리 목록 조회 (페이징) */
+  findPage(params: EsntlAtchFileMngSearchParams): Promise<PageResponse<EsntlAtchFileMng>>;
+  /** 필수첨부파일관리 상세 조회 */
+  findById(esntlAtchFileId: string): Promise<EsntlAtchFileMng>;
+  /** 필수첨부파일관리 등록 */
+  create(body: EsntlAtchFileMngSaveRequest): Promise<string>;
+  /** 필수첨부파일관리 수정 */
+  update(esntlAtchFileId: string, body: EsntlAtchFileMngSaveRequest): Promise<string>;
+  /** 필수첨부파일관리 삭제 */
+  remove(esntlAtchFileId: string): Promise<string>;
+}
+
+/** 필수첨부파일관리 저장 요청 DTO */
+export interface EsntlAtchFileMngSaveRequest {
+  /** 문서구분공통코드 */
+  docSeComCd: string;
+  /** 필수첨부파일명 */
+  esntlAtchFileNm?: string;
+  /** 필수첨부여부 ("Y" | "N") */
+  esntlAtchYn?: "Y" | "N";
+  /** 필수첨부파일비고 */
+  esntlAtchFileRmrk?: string;
+}
diff --git a/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts b/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts
new file mode 100644
index 000000000..208e0172d
--- /dev/null
+++ b/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts
@@ -0,0 +1,41 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  InstlSncnApplySaveRequestDto,
+  InstlSncnMng,
+  InstlSncnMngSearchParams,
+  InstlSncnMngService,
+  SpringPage,
+  InstlSncnMngDetResponse,
+} from "../model/instl-sncn-interface";
+
+export class InstlSncnApiService implements InstlSncnMngService {
+  public async getPage(params: InstlSncnMngSearchParams): Promise<SpringPage<InstlSncnMng>> {
+    const response = await client.get<SpringPage<InstlSncnMng>>(ENDPOINT.AS_INSTL_SERVICE.INSTL_SNCN, {
+      params,
+    });
+    return response.data;
+  }
+
+  public async getById(id: string): Promise<InstlSncnMngDetResponse> {
+    const response = await client.get<InstlSncnMngDetResponse>(`${ENDPOINT.AS_INSTL_SERVICE.INSTL_SNCN}/${id}`);
+    return response.data;
+  }
+
+  public async saveApply(payload: InstlSncnApplySaveRequestDto): Promise<string> {
+    const response = await client.post<string>(
+      `${ENDPOINT.AS_INSTL_SERVICE.INSTL_SNCN}/save-apply`,
+      payload,
+    );
+    return response.data;
+  }
+  public async techReview(payload: InstlSncnApplySaveRequestDto): Promise<string> {
+    const response = await client.post<string>(
+      `${ENDPOINT.AS_INSTL_SERVICE.INSTL_SNCN}/tech-review`,
+      payload,
+    );
+    return response.data;
+  }
+}
+
+export const InstlSncnApi = new InstlSncnApiService();
diff --git a/apps/as/src/entities/instl-sncn/index.ts b/apps/as/src/entities/instl-sncn/index.ts
new file mode 100644
index 000000000..cd340d42d
--- /dev/null
+++ b/apps/as/src/entities/instl-sncn/index.ts
@@ -0,0 +1,12 @@
+export { InstlSncnApi } from "./api/instl-sncn-service";
+export {
+  INSTL_SNCN_REGISTER_SELECTION_KEY,
+  type InstlSncnApplySaveRequestDto,
+  type InstlSncnBizCstSaveRequestDto,
+  type InstlSncnBzScaleSaveDto,
+  type InstlSncnCklstResultSaveDto,
+  type InstlSncnMng,
+  type InstlSncnMngSearchParams,
+  type SpringPage,
+  type ElaprDocPrgrsClientResponseDto,
+} from "./model/instl-sncn-interface";
diff --git a/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts b/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts
new file mode 100644
index 000000000..81c769f98
--- /dev/null
+++ b/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts
@@ -0,0 +1,149 @@
+export const INSTL_SNCN_REGISTER_SELECTION_KEY = "instlSncnRegisterSelection";
+
+export interface SpringPage<T> {
+  content: T[];
+  totalElements: number;
+  totalPages: number;
+  number: number;
+  size: number;
+  first: boolean;
+  last: boolean;
+  numberOfElements: number;
+}
+
+export interface InstlSncnMngSearchParams {
+  bizNm?: string;
+  taskSeComCd?: string;
+  sidoComCd?: string;
+  sggComCd?: string;
+  page?: number;
+  size?: number;
+  sort?: string;
+}
+
+export interface InstlSncnMng {
+  gugun: string;
+  sido: string;
+  instlSncnDocNo: string;
+  admdstCd: string;
+  sidoNm?: string;
+  sggNm?: string;
+  chrgrNm?: string;
+  instNm?: string;
+  envoSeComCd: string;
+  sncnSeComCd: string;
+  envoSeCdNm: string;
+  taskSeComCd: string;
+  taskSeCdNm: string;
+  bgtBizCd: string;
+  bgtAplyYr: string;
+  bizNm: string;
+  bizBgngYr: string;
+  bizEndYr: string;
+  bizCn: string;
+  aplcntNm: string;
+  aplcntMblTelno: string;
+  aplcntOgdpNm: string;
+  aplcntEmlAddr: string;
+  dsgnrNm: string;
+  dsgnrTelno: string;
+  dsgnrOgdpNm: string;
+  dsgnrEmlAddr: string;
+  atchFileGroupId: string;
+  prgrsSttsComCd: string;
+  prgrsSttsCdNm: string;
+  regDt: string;
+  mdfcnDt: string;
+  rgtrNm: string;
+}
+
+/** 설치인가 신청 - 사업규모 저장 DTO(배열 원소) */
+export interface InstlSncnBzScaleSaveDto {
+  /** 공종구분코드 */
+  cnstpSeCd: string;
+  /** 기본계획(A) */
+  bscPl: number;
+  /** 예산반영(B) */
+  budgetReflct: number;
+  /** 금회설계시(C) */
+  thtiDsgn: number;
+  /** 증감(C-B) */
+  diff: number;
+}
+
+/** 설치인가 신청 - 총사업비 저장 DTO(배열 원소) */
+export interface InstlSncnBizCstSaveRequestDto {
+  /** 회계구분코드 */
+  acntgSeCd: string;
+  /** 기본계획금액 */
+  bscPlanAmt: number;
+  /** 예산반영금액 */
+  bgtRfltAmt: number;
+  /** 금회설계금액 */
+  tstmDesignAmt: number;
+}
+
+/** 설치인가 신청 - 체크리스트 결과 저장 DTO(배열 원소) */
+export interface InstlSncnCklstResultSaveDto {
+  cklstSn: number;
+  cklstArtclSn: number;
+  cklstRvwSn: number;
+  rvwStpComCd: string;
+  selected: "Y" | "N" | null;
+  picRvwCn?: string | null;
+}
+
+/** 설치인가 신청 - 필수첨부파일 저장 DTO(배열 원소) */
+export interface InstlSncnEsntlAtchFileSaveDto {
+  esntlAtchFileId: string;
+  atchFileGroupId: string;
+}
+
+/** 설치인가 신청 - 통합 저장 요청 DTO */
+export interface InstlSncnApplySaveRequestDto {
+  instlSncnMng: InstlSncnMng;
+  bzScaleList: InstlSncnBzScaleSaveDto[];
+  bizCstList: InstlSncnBizCstSaveRequestDto[];
+  cklstResultList: InstlSncnCklstResultSaveDto[];
+  esntlAtchFileList: InstlSncnEsntlAtchFileSaveDto[];
+}
+
+export type ReviewStepCode = "LOCAL" | "ENV" | "KECO";
+
+
+
+/** 전자결재 진행상태 (클라이언트 응답용) */
+export interface ElaprDocPrgrsClientResponseDto {
+  elaprDocNo?: string;
+  elaprDmndId?: string;
+  elaprPrgrsId?: string;
+  atrzSeqNo?: number;
+  atrzSeComCd?: string;
+  atrzSeComNm?: string;
+  aprvrUuid?: string;
+  aprvrUuidNm?: string;
+  atrzPrgrsSttsComCd?: string;
+  atrzPrgrsSttsComNm?: string;
+  rjctRsn?: string | null;
+  atrzDt?: string | null;
+  jbpsSeNm?: string;
+  jbgdSeNm?: string;
+  ognzNm?: string;
+}
+
+// det 응답에 전자결재 진행상태 목록을 포함
+export interface InstlSncnMngDetResponse {
+  detDto: InstlSncnMng;
+  bizSclList: any[];
+  bizCstList: any[];
+  cklstResultList?: any[];
+  esntlFileList: any[];
+  etcFileList: any[];
+  elaprDocPrgrsList?: ElaprDocPrgrsClientResponseDto[] | null;
+}
+
+export interface InstlSncnMngService {
+  getPage: (params: InstlSncnMngSearchParams) => Promise<SpringPage<InstlSncnMng>>;
+  getById: (id: string) => Promise<InstlSncnMngDetResponse>;
+  saveApply: (payload: InstlSncnApplySaveRequestDto) => Promise<string>;
+}
diff --git a/apps/as/src/entities/menu-authority/@x/menu.ts b/apps/as/src/entities/menu-authority/@x/menu.ts
new file mode 100644
index 000000000..df6d6b3c0
--- /dev/null
+++ b/apps/as/src/entities/menu-authority/@x/menu.ts
@@ -0,0 +1 @@
+export { MenuAuthorityApi } from "../api/menu-authority-service";
diff --git a/apps/as/src/entities/menu-authority/api/menu-authority-service.ts b/apps/as/src/entities/menu-authority/api/menu-authority-service.ts
new file mode 100644
index 000000000..0aab142fd
--- /dev/null
+++ b/apps/as/src/entities/menu-authority/api/menu-authority-service.ts
@@ -0,0 +1,19 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+  MenuAuthorityService,
+  PageMenuAuthority,
+} from "../model/menu-authority-interface";
+
+export class MenuAuthorityApiService implements MenuAuthorityService {
+  /** MenuAuthrtApiController GET /api/v1/menu-authrts/pageinfo/{menuCd} */
+  async getPageMenuAuthority(menuCd: number): Promise<PageMenuAuthority[]> {
+    const response = await client.get<PageMenuAuthority[]>(
+      `${ENDPOINT.CMS_SERVICE.MENU_AUTHRTS}/pageinfo/${menuCd}`,
+    );
+    return response.data;
+  }
+}
+
+export const MenuAuthorityApi = new MenuAuthorityApiService();
diff --git a/apps/as/src/entities/menu-authority/index.ts b/apps/as/src/entities/menu-authority/index.ts
new file mode 100644
index 000000000..ce3b8781f
--- /dev/null
+++ b/apps/as/src/entities/menu-authority/index.ts
@@ -0,0 +1,2 @@
+export { MenuAuthorityApi } from "./api/menu-authority-service";
+export type { PageMenuAuthority } from "./model/menu-authority-interface";
diff --git a/apps/as/src/entities/menu-authority/model/menu-authority-interface.ts b/apps/as/src/entities/menu-authority/model/menu-authority-interface.ts
new file mode 100644
index 000000000..f61abbe66
--- /dev/null
+++ b/apps/as/src/entities/menu-authority/model/menu-authority-interface.ts
@@ -0,0 +1,12 @@
+/** MenuAuthrtApiController GET /pageinfo/{menuCd} 응답 DTO */
+export interface PageMenuAuthority {
+  mngAuthrtYn: string;
+  inqAuthrtYn: string;
+  regAuthrtYn: string;
+  mdfcnAuthrtYn: string;
+  delAuthrtYn: string;
+}
+
+export interface MenuAuthorityService {
+  getPageMenuAuthority(menuCd: number): Promise<PageMenuAuthority[]>;
+}
diff --git a/apps/as/src/entities/menu/api/menu-service.ts b/apps/as/src/entities/menu/api/menu-service.ts
new file mode 100644
index 000000000..40c6c9327
--- /dev/null
+++ b/apps/as/src/entities/menu/api/menu-service.ts
@@ -0,0 +1,18 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+
+import { mapMenuTreeResponse } from "../lib/map-menu-tree-response";
+import type { MenuTreeResponseDto } from "../model/menu-tree-response";
+import type { MenuItem } from "../model/types";
+
+export class MenuApiService {
+  /** MenuRoleApiController GET /api/v1/menu-roles/{siteId} */
+  async getMenuRoles(siteId: string): Promise<MenuItem[]> {
+    const response = await client.get<MenuTreeResponseDto[]>(
+      `${ENDPOINT.CMS_SERVICE.MENU_ROLES}/${siteId}`,
+    );
+    return response.data.map(mapMenuTreeResponse);
+  }
+}
+
+export const MenuApi = new MenuApiService();
diff --git a/apps/as/src/entities/menu/index.ts b/apps/as/src/entities/menu/index.ts
new file mode 100644
index 000000000..eb1813456
--- /dev/null
+++ b/apps/as/src/entities/menu/index.ts
@@ -0,0 +1,4 @@
+export { MenuApi } from "./api/menu-service";
+export { MenuWrapper } from "./lib/menu-wrapper";
+export { getCurrentMenu } from "./lib/utils";
+export { type MenuItem } from "./model/types";
diff --git a/apps/as/src/entities/menu/lib/map-menu-tree-response.ts b/apps/as/src/entities/menu/lib/map-menu-tree-response.ts
new file mode 100644
index 000000000..edbf57eb6
--- /dev/null
+++ b/apps/as/src/entities/menu/lib/map-menu-tree-response.ts
@@ -0,0 +1,28 @@
+import type { MenuTreeResponseDto } from "../model/menu-tree-response";
+import type { MenuItem } from "../model/types";
+
+function isRequiredUrlPath(menuLnkgTypeCd: string): boolean {
+  return menuLnkgTypeCd === "BOARD" || menuLnkgTypeCd === "CONTENTS";
+}
+
+export function mapMenuTreeResponse(dto: MenuTreeResponseDto): MenuItem {
+  return {
+    menuCd: dto.menuCd,
+    menuKornNm: dto.menuKornNm,
+    menuEngNm: dto.menuEngNm,
+    parentId: dto.parentId,
+    sortSeq: dto.sortSeq,
+    iconNm: dto.iconNm,
+    children: dto.children?.map(mapMenuTreeResponse) ?? null,
+    levelNo: dto.levelNo,
+    urlPath: dto.urlPath,
+    menuLnkgTypeCd: dto.menuLnkgTypeCd,
+    menuLnkgSn: dto.menuLnkgSn,
+    menuPath: dto.menuPath,
+    qrcd: dto.qrcd,
+    useYn: dto.useYn,
+    otptYn: dto.otptYn,
+    newWndwYn: dto.newWndwYn,
+    requiredUrlPath: isRequiredUrlPath(dto.menuLnkgTypeCd),
+  };
+}
diff --git a/apps/as/src/entities/menu/lib/menu-wrapper.tsx b/apps/as/src/entities/menu/lib/menu-wrapper.tsx
new file mode 100644
index 000000000..c1a4d2b1f
--- /dev/null
+++ b/apps/as/src/entities/menu/lib/menu-wrapper.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect } from "react";
+import { usePathname, useRouter } from "next/navigation";
+
+import { SITE_ID } from "@/shared/config";
+import { getCookie, useAlertStore, useMenuStore } from "@/shared/lib";
+import { MenuAuthorityApi } from "@/entities/menu-authority/@x/menu";
+
+import { MenuApi } from "../api/menu-service";
+
+import { getCurrentMenu } from "./utils";
+
+function MenuWrapper({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const alert = useAlertStore((state) => state.setMessage);
+  const { pageMenuAuthority, setCurrentMenuInfo, setPageMenuAuthority } =
+    useMenuStore((state) => state);
+
+  const getCurrentMenuInfo = async () => {
+    const menuRoles = await MenuApi.getMenuRoles(SITE_ID);
+    if (!menuRoles) return;
+    return getCurrentMenu(menuRoles, pathname ?? "");
+  };
+
+  const getPageMenuAuthority = async () => {
+    const menuCd = getCookie("menu-code-key");
+    if (!menuCd) return;
+    const response = await MenuAuthorityApi.getPageMenuAuthority(
+      parseInt(menuCd, 10),
+    );
+    return response;
+  };
+
+  const checkInquiryAuthority = () => {
+    return pageMenuAuthority?.inqAuthrtYn === "Y";
+  };
+
+  useEffect(() => {
+    (async () => {
+      const currentMenu = await getCurrentMenuInfo();
+      if (currentMenu) setCurrentMenuInfo(currentMenu);
+
+      const response = await getPageMenuAuthority();
+      if (response?.length) setPageMenuAuthority(response[0]!);
+    })();
+  }, [pathname]);
+
+  useEffect(() => {
+    if (!pageMenuAuthority) return;
+    const inquiryAuthority = checkInquiryAuthority();
+    if (!inquiryAuthority) {
+      alert("페이지에 대한 조회 권한이 없습니다.", () => router.push("/"));
+    }
+  }, [pageMenuAuthority]);
+
+  return <>{children}</>;
+}
+
+export { MenuWrapper };
diff --git a/apps/as/src/entities/menu/lib/utils.ts b/apps/as/src/entities/menu/lib/utils.ts
new file mode 100644
index 000000000..d62ccbd93
--- /dev/null
+++ b/apps/as/src/entities/menu/lib/utils.ts
@@ -0,0 +1,21 @@
+import type { MenuItem } from "../model/types";
+
+export function getCurrentMenu(
+  menus: MenuItem[],
+  pathname: string,
+): MenuItem | null {
+  for (const menu of menus) {
+    if (
+      menu.urlPath !== "" &&
+      (menu.urlPath === pathname || pathname.startsWith(menu.urlPath))
+    ) {
+      return menu;
+    }
+
+    if (menu.children) {
+      const child = getCurrentMenu(menu.children, pathname);
+      if (child) return child;
+    }
+  }
+  return null;
+}
diff --git a/apps/as/src/entities/menu/model/menu-tree-response.ts b/apps/as/src/entities/menu/model/menu-tree-response.ts
new file mode 100644
index 000000000..dc57c90da
--- /dev/null
+++ b/apps/as/src/entities/menu/model/menu-tree-response.ts
@@ -0,0 +1,21 @@
+/** MenuRoleApiController GET /api/v1/menu-roles/{siteId} 응답 DTO */
+export interface MenuTreeResponseDto {
+  menuCd: number;
+  menuKornNm: string;
+  menuEngNm: string;
+  parentId: number | null;
+  sortSeq: number;
+  iconNm?: string;
+  children: MenuTreeResponseDto[] | null;
+  levelNo: number;
+  urlPath: string;
+  menuLnkgTypeCd: string;
+  menuLnkgSn: number;
+  menuPath: string;
+  qrcd: string;
+  useYn: string;
+  otptYn: string;
+  newWndwYn: string;
+  menuHlpCn?: string;
+  menuSubKornNm?: string;
+}
diff --git a/apps/as/src/entities/menu/model/types.ts b/apps/as/src/entities/menu/model/types.ts
new file mode 100644
index 000000000..9692821e3
--- /dev/null
+++ b/apps/as/src/entities/menu/model/types.ts
@@ -0,0 +1,19 @@
+export interface MenuItem {
+  menuCd: number;
+  menuKornNm: string;
+  menuEngNm: string;
+  parentId: number | null;
+  sortSeq: number;
+  iconNm?: string;
+  children: MenuItem[] | null;
+  levelNo: number;
+  urlPath: string;
+  menuLnkgTypeCd: string;
+  menuLnkgSn: number;
+  menuPath: string;
+  qrcd: string;
+  useYn: string;
+  otptYn: string;
+  newWndwYn: string;
+  requiredUrlPath: boolean;
+}
diff --git a/apps/as/src/entities/rvw-mnpw/api/queries.ts b/apps/as/src/entities/rvw-mnpw/api/queries.ts
new file mode 100644
index 000000000..6e075e4d5
--- /dev/null
+++ b/apps/as/src/entities/rvw-mnpw/api/queries.ts
@@ -0,0 +1,87 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+  RvwMnpwMngSaveRequestDto,
+  RvwMnpwMngSearchDto,
+  RvwMnpwMngUpdateRequestDto,
+} from "../model/rvw-mnpw-interface";
+
+import { rvwMnpwMngService } from "./rvw-mnpw-service";
+
+const rvwMnpwMngBaseKey = [ENDPOINT.AS_COMMON_SERVICE.RVW_MNPW] as const;
+
+export function useRvwMnpwMngPage(params: RvwMnpwMngSearchDto, options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: [...rvwMnpwMngBaseKey, "findPage", params],
+    queryFn: () => rvwMnpwMngService.findPage(params),
+    enabled: options?.enabled,
+  });
+}
+
+export function useRvwMnpwMng(
+  atrzSeComCd: string | null | undefined,
+  ognzSn: number | null | undefined,
+  userUuid: string | null | undefined,
+) {
+  return useQuery({
+    queryKey: [...rvwMnpwMngBaseKey, "findById", atrzSeComCd, ognzSn, userUuid],
+    queryFn: () => rvwMnpwMngService.findById(atrzSeComCd!, ognzSn!, userUuid!),
+    enabled: Boolean(atrzSeComCd && ognzSn != null && userUuid),
+  });
+}
+
+export function useSaveRvwMnpwMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: RvwMnpwMngSaveRequestDto) => rvwMnpwMngService.save(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: rvwMnpwMngBaseKey });
+    },
+  });
+}
+
+export function useUpdateRvwMnpwMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      atrzSeComCd,
+      ognzSn,
+      userUuid,
+      body,
+    }: {
+      atrzSeComCd: string;
+      ognzSn: number;
+      userUuid: string;
+      body: RvwMnpwMngUpdateRequestDto;
+    }) => rvwMnpwMngService.update(atrzSeComCd, ognzSn, userUuid, body),
+    onSuccess: (_data, { atrzSeComCd, ognzSn, userUuid }) => {
+      queryClient.invalidateQueries({ queryKey: rvwMnpwMngBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...rvwMnpwMngBaseKey, "findById", atrzSeComCd, ognzSn, userUuid],
+      });
+    },
+  });
+}
+
+export function useDeleteRvwMnpwMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      atrzSeComCd,
+      ognzSn,
+      userUuid,
+    }: {
+      atrzSeComCd: string;
+      ognzSn: number;
+      userUuid: string;
+    }) => rvwMnpwMngService.delete(atrzSeComCd, ognzSn, userUuid),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: rvwMnpwMngBaseKey });
+    },
+  });
+}
diff --git a/apps/as/src/entities/rvw-mnpw/api/rvw-mnpw-service.ts b/apps/as/src/entities/rvw-mnpw/api/rvw-mnpw-service.ts
new file mode 100644
index 000000000..4f756787f
--- /dev/null
+++ b/apps/as/src/entities/rvw-mnpw/api/rvw-mnpw-service.ts
@@ -0,0 +1,66 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import type {
+  RvwMnpwMngResponseDto,
+  RvwMnpwMngSaveRequestDto,
+  RvwMnpwMngSearchDto,
+  RvwMnpwMngService,
+  RvwMnpwMngUpdateRequestDto,
+} from "../model/rvw-mnpw-interface";
+
+const BASE = ENDPOINT.AS_COMMON_SERVICE.RVW_MNPW;
+
+function pkPath(atrzSeComCd: string, ognzSn: number, userUuid: string): string {
+  return `${BASE}/${atrzSeComCd}/${ognzSn}/${userUuid}`;
+}
+
+async function findPage(params: RvwMnpwMngSearchDto): Promise<PageResponse<RvwMnpwMngResponseDto>> {
+  const response = await client.get<PageResponse<RvwMnpwMngResponseDto>>(BASE, { params });
+  return response.data;
+}
+
+async function findById(
+  atrzSeComCd: string,
+  ognzSn: number,
+  userUuid: string,
+): Promise<RvwMnpwMngResponseDto> {
+  const response = await client.get<RvwMnpwMngResponseDto>(pkPath(atrzSeComCd, ognzSn, userUuid));
+  return response.data;
+}
+
+async function save(body: RvwMnpwMngSaveRequestDto): Promise<RvwMnpwMngResponseDto> {
+  const response = await client.post<RvwMnpwMngResponseDto>(BASE, body);
+  return response.data;
+}
+
+async function update(
+  atrzSeComCd: string,
+  ognzSn: number,
+  userUuid: string,
+  body: RvwMnpwMngUpdateRequestDto,
+): Promise<RvwMnpwMngResponseDto> {
+  const response = await client.put<RvwMnpwMngResponseDto>(
+    pkPath(atrzSeComCd, ognzSn, userUuid),
+    body,
+  );
+  return response.data;
+}
+
+async function deleteRvwMnpw(
+  atrzSeComCd: string,
+  ognzSn: number,
+  userUuid: string,
+): Promise<string> {
+  const response = await client.delete<string>(pkPath(atrzSeComCd, ognzSn, userUuid));
+  return response.data;
+}
+
+export const rvwMnpwMngService = {
+  findPage,
+  findById,
+  save,
+  update,
+  delete: deleteRvwMnpw,
+} satisfies RvwMnpwMngService;
diff --git a/apps/as/src/entities/rvw-mnpw/index.ts b/apps/as/src/entities/rvw-mnpw/index.ts
new file mode 100644
index 000000000..14dd27dfc
--- /dev/null
+++ b/apps/as/src/entities/rvw-mnpw/index.ts
@@ -0,0 +1,15 @@
+export {
+  useDeleteRvwMnpwMng,
+  useRvwMnpwMng,
+  useRvwMnpwMngPage,
+  useSaveRvwMnpwMng,
+  useUpdateRvwMnpwMng,
+} from "./api/queries";
+export { rvwMnpwMngService } from "./api/rvw-mnpw-service";
+export type {
+  RvwMnpwMngResponseDto,
+  RvwMnpwMngSaveRequestDto,
+  RvwMnpwMngSearchDto,
+  RvwMnpwMngService,
+  RvwMnpwMngUpdateRequestDto,
+} from "./model/rvw-mnpw-interface";
diff --git a/apps/as/src/entities/rvw-mnpw/model/rvw-mnpw-interface.ts b/apps/as/src/entities/rvw-mnpw/model/rvw-mnpw-interface.ts
new file mode 100644
index 000000000..92cbff071
--- /dev/null
+++ b/apps/as/src/entities/rvw-mnpw/model/rvw-mnpw-interface.ts
@@ -0,0 +1,48 @@
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+/** 백엔드 RvwMnpwMngResponseDto */
+export interface RvwMnpwMngResponseDto {
+  atrzSeComCd: string;
+  atrzSeComCdNm?: string;
+  ognzSn: number;
+  userUuid: string;
+  userUuidNm?: string;
+  ognzNm?: string;
+  jbpsSeNm?: string;
+  jbgdSeNm?: string;
+  rgtr?: string;
+  regDt?: string;
+}
+
+/** 백엔드 RvwMnpwMngSearchDto + Pageable */
+export interface RvwMnpwMngSearchDto extends PageableParams {
+  atrzSeComCd?: string;
+  ognzSn?: number;
+  userUuid?: string;
+}
+
+/** 백엔드 RvwMnpwMngSaveRequestDto */
+export interface RvwMnpwMngSaveRequestDto {
+  atrzSeComCd: string;
+  ognzSn: number;
+  userUuid: string;
+}
+
+/** 백엔드 RvwMnpwMngUpdateRequestDto */
+export interface RvwMnpwMngUpdateRequestDto {
+  newAtrzSeComCd: string;
+}
+
+/** Controller public 메서드명·시그니처와 동일 */
+export interface RvwMnpwMngService {
+  findPage(params: RvwMnpwMngSearchDto): Promise<PageResponse<RvwMnpwMngResponseDto>>;
+  findById(atrzSeComCd: string, ognzSn: number, userUuid: string): Promise<RvwMnpwMngResponseDto>;
+  save(body: RvwMnpwMngSaveRequestDto): Promise<RvwMnpwMngResponseDto>;
+  update(
+    atrzSeComCd: string,
+    ognzSn: number,
+    userUuid: string,
+    body: RvwMnpwMngUpdateRequestDto,
+  ): Promise<RvwMnpwMngResponseDto>;
+  delete(atrzSeComCd: string, ognzSn: number, userUuid: string): Promise<string>;
+}
diff --git a/apps/as/src/entities/user-organization/api/queries.ts b/apps/as/src/entities/user-organization/api/queries.ts
new file mode 100644
index 000000000..726903dd7
--- /dev/null
+++ b/apps/as/src/entities/user-organization/api/queries.ts
@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import { userOgnzService } from "./user-ognz-service";
+
+const userOgnzTreeBaseKey = [ENDPOINT.CMS_SERVICE.USER_ORGANIZATION, "treeuser"] as const;
+
+export function useOgnzUserTree(options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: userOgnzTreeBaseKey,
+    queryFn: () => userOgnzService.findOgnzUserTree(),
+    enabled: options?.enabled ?? true,
+  });
+}
diff --git a/apps/as/src/entities/user-organization/api/user-ognz-service.ts b/apps/as/src/entities/user-organization/api/user-ognz-service.ts
new file mode 100644
index 000000000..55a4b0355
--- /dev/null
+++ b/apps/as/src/entities/user-organization/api/user-ognz-service.ts
@@ -0,0 +1,18 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+  OgnzUserTreeResponseDto,
+  UserOgnzService,
+} from "../model/ognz-user-tree-interface";
+
+async function findOgnzUserTree(): Promise<OgnzUserTreeResponseDto[]> {
+  const response = await client.get<OgnzUserTreeResponseDto[]>(
+    `${ENDPOINT.CMS_SERVICE.USER_ORGANIZATION}/treeuser`,
+  );
+  return response.data;
+}
+
+export const userOgnzService = {
+  findOgnzUserTree,
+} satisfies UserOgnzService;
diff --git a/apps/as/src/entities/user-organization/index.ts b/apps/as/src/entities/user-organization/index.ts
new file mode 100644
index 000000000..26c43cfa7
--- /dev/null
+++ b/apps/as/src/entities/user-organization/index.ts
@@ -0,0 +1,7 @@
+export { useOgnzUserTree } from "./api/queries";
+export { userOgnzService } from "./api/user-ognz-service";
+export type {
+  OgnzUserTreeResponseDto,
+  OgnzUserTreeUserDto,
+  UserOgnzService,
+} from "./model/ognz-user-tree-interface";
diff --git a/apps/as/src/entities/user-organization/model/ognz-user-tree-interface.ts b/apps/as/src/entities/user-organization/model/ognz-user-tree-interface.ts
new file mode 100644
index 000000000..47e75d944
--- /dev/null
+++ b/apps/as/src/entities/user-organization/model/ognz-user-tree-interface.ts
@@ -0,0 +1,25 @@
+/** OgnzUserTreeResponseDto.UserDto */
+export interface OgnzUserTreeUserDto {
+  userUnqId: string;
+  userNm: string;
+  jbpsSeCd: string;
+  jbgdSeCd: string;
+  jbpsSeNm: string;
+  jbgdSeNm: string;
+}
+
+/** OgnzUserTreeResponseDto */
+export interface OgnzUserTreeResponseDto {
+  ognzSn: number;
+  upOgnzSn: number | null;
+  ognzNm: string;
+  ognzExpln?: string;
+  sortSeq?: number;
+  useYn?: string;
+  users: OgnzUserTreeUserDto[];
+  children: OgnzUserTreeResponseDto[];
+}
+
+export interface UserOgnzService {
+  findOgnzUserTree(): Promise<OgnzUserTreeResponseDto[]>;
+}
diff --git a/apps/_template/features/README.md b/apps/as/src/features/README.md
similarity index 100%
rename from apps/_template/features/README.md
rename to apps/as/src/features/README.md
diff --git a/apps/as/src/pages/acntg-code-management/index.ts b/apps/as/src/pages/acntg-code-management/index.ts
new file mode 100644
index 000000000..ee4bfa445
--- /dev/null
+++ b/apps/as/src/pages/acntg-code-management/index.ts
@@ -0,0 +1 @@
+export { AcntgCodeManagementPage } from "./ui/acntg-code-management-page";
diff --git a/apps/as/src/pages/acntg-code-management/lib/acntg-se-grid.ts b/apps/as/src/pages/acntg-code-management/lib/acntg-se-grid.ts
new file mode 100644
index 000000000..c0ca7abc7
--- /dev/null
+++ b/apps/as/src/pages/acntg-code-management/lib/acntg-se-grid.ts
@@ -0,0 +1,245 @@
+import type { AcntgSeMngResponseDto } from "@/entities/acntg";
+
+import type {
+  AcntgDisplaySlot,
+  AcntgSeBaseEntry,
+  AcntgSeGridState,
+} from "../model/acntg-se-grid-types";
+import type { AcntgSeRow } from "../model/acntg-se-row-types";
+import { buildAcntgDisplayRows } from "../model/build-acntg-display-rows";
+
+export function createLoadedRowKey(index: number, acntgSeCd: string): string {
+  return `loaded-${index}-${acntgSeCd}`;
+}
+
+export function createDraftRowKey(): string {
+  return `draft-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+export function createEmptyGridState(): AcntgSeGridState {
+  return {
+    baseByKey: {},
+    structure: [],
+    drafts: {},
+    patches: {},
+    deletedKeys: new Set(),
+  };
+}
+
+function toInitialRow(entry: AcntgSeBaseEntry): AcntgSeRow {
+  return {
+    ...entry,
+    isNew: false,
+    isDirty: false,
+    isDeleted: false,
+  };
+}
+
+export function buildStructureFromBaseRows(
+  baseByKey: Record<string, AcntgSeBaseEntry>,
+): AcntgDisplaySlot[] {
+  const rows = Object.values(baseByKey).map(toInitialRow);
+  const display = buildAcntgDisplayRows(rows);
+  const cdToRowKey = new Map(rows.map((row) => [row.acntgSeCd, row.rowKey]));
+
+  return display.map(({ row, depth }) => ({
+    rowKey: row.rowKey,
+    depth,
+    parentRowKey: row.upAcntgSeCd?.trim() ? (cdToRowKey.get(row.upAcntgSeCd.trim()) ?? null) : null,
+  }));
+}
+
+export function hydrateGridFromServer(content: AcntgSeMngResponseDto[]): AcntgSeGridState {
+  const baseByKey: Record<string, AcntgSeBaseEntry> = {};
+
+  content.forEach((item, index) => {
+    const rowKey = createLoadedRowKey(index, item.acntgSeCd);
+    baseByKey[rowKey] = { ...item, rowKey };
+  });
+
+  return {
+    baseByKey,
+    structure: buildStructureFromBaseRows(baseByKey),
+    drafts: {},
+    patches: {},
+    deletedKeys: new Set(),
+  };
+}
+
+export function resolveParentAcntgSeCd(
+  state: AcntgSeGridState,
+  parentRowKey: string | null,
+): string | undefined {
+  if (!parentRowKey) return undefined;
+  const parent = mergeAcntgRow(state, parentRowKey);
+  const cd = parent?.acntgSeCd?.trim();
+  return cd || undefined;
+}
+
+export function mergeAcntgRow(state: AcntgSeGridState, rowKey: string): AcntgSeRow | null {
+  const draft = state.drafts[rowKey];
+  if (draft) {
+    return {
+      rowKey,
+      acntgSeCd: draft.acntgSeCd,
+      acntgSeCdNm: draft.acntgSeCdNm,
+      expln: draft.expln,
+      useYn: draft.useYn,
+      cdLvNo: draft.cdLvNo,
+      upAcntgSeCd: resolveParentAcntgSeCd(state, draft.parentRowKey),
+      isNew: true,
+      isDirty: true,
+      isDeleted: false,
+    };
+  }
+
+  const base = state.baseByKey[rowKey];
+  if (!base) return null;
+
+  const patch = state.patches[rowKey] ?? {};
+  const hasPatch = Object.keys(patch).length > 0;
+
+  return {
+    ...base,
+    ...patch,
+    rowKey,
+    isNew: false,
+    isDirty: hasPatch,
+    isDeleted: state.deletedKeys.has(rowKey),
+  };
+}
+
+export function mergeAllAcntgRows(state: AcntgSeGridState): AcntgSeRow[] {
+  const keys = new Set([...Object.keys(state.baseByKey), ...Object.keys(state.drafts)]);
+
+  return [...keys]
+    .map((rowKey) => mergeAcntgRow(state, rowKey))
+    .filter((row): row is AcntgSeRow => row != null);
+}
+
+export function hasAcntgGridPendingChanges(state: AcntgSeGridState): boolean {
+  return (
+    state.deletedKeys.size > 0 ||
+    Object.keys(state.drafts).length > 0 ||
+    Object.keys(state.patches).length > 0
+  );
+}
+
+export function collectDescendantRowKeys(
+  structure: AcntgDisplaySlot[],
+  rootRowKey: string,
+): Set<string> {
+  const result = new Set<string>([rootRowKey]);
+  const queue = [rootRowKey];
+
+  while (queue.length > 0) {
+    const parentKey = queue.shift()!;
+    for (const slot of structure) {
+      if (slot.parentRowKey === parentKey && !result.has(slot.rowKey)) {
+        result.add(slot.rowKey);
+        queue.push(slot.rowKey);
+      }
+    }
+  }
+
+  return result;
+}
+
+export function insertRootSlot(
+  structure: AcntgDisplaySlot[],
+  slot: AcntgDisplaySlot,
+): AcntgDisplaySlot[] {
+  const firstRootIndex = structure.findIndex((item) => item.parentRowKey === null);
+  if (firstRootIndex === -1) return [slot, ...structure];
+  return [...structure.slice(0, firstRootIndex), slot, ...structure.slice(firstRootIndex)];
+}
+
+export function insertChildSlot(
+  structure: AcntgDisplaySlot[],
+  parentRowKey: string,
+  slot: AcntgDisplaySlot,
+): AcntgDisplaySlot[] {
+  const parentIndex = structure.findIndex((item) => item.rowKey === parentRowKey);
+  if (parentIndex === -1) return [...structure, slot];
+
+  const insertAt = parentIndex + 1;
+  return [...structure.slice(0, insertAt), slot, ...structure.slice(insertAt)];
+}
+
+export function removeSlotsFromStructure(
+  structure: AcntgDisplaySlot[],
+  rowKeysToRemove: Set<string>,
+): AcntgDisplaySlot[] {
+  return structure.filter((slot) => !rowKeysToRemove.has(slot.rowKey));
+}
+
+export function patchAcntgGridRow(
+  state: AcntgSeGridState,
+  rowKey: string,
+  patch: Partial<AcntgSeRow>,
+): AcntgSeGridState {
+  const draft = state.drafts[rowKey];
+  if (draft) {
+    return {
+      ...state,
+      drafts: {
+        ...state.drafts,
+        [rowKey]: {
+          ...draft,
+          ...(patch.acntgSeCd !== undefined ? { acntgSeCd: patch.acntgSeCd } : {}),
+          ...(patch.acntgSeCdNm !== undefined ? { acntgSeCdNm: patch.acntgSeCdNm ?? "" } : {}),
+          ...(patch.expln !== undefined ? { expln: patch.expln ?? "" } : {}),
+          ...(patch.useYn !== undefined ? { useYn: patch.useYn } : {}),
+        },
+      },
+    };
+  }
+
+  const { rowKey: _rk, isNew: _n, isDirty: _d, isDeleted: _del, ...dtoPatch } = patch;
+
+  return {
+    ...state,
+    patches: {
+      ...state.patches,
+      [rowKey]: { ...state.patches[rowKey], ...dtoPatch },
+    },
+  };
+}
+
+export function markAcntgRowsDeleted(
+  state: AcntgSeGridState,
+  rootRowKey: string,
+): AcntgSeGridState {
+  const keysToDelete = collectDescendantRowKeys(state.structure, rootRowKey);
+  const deletedKeys = new Set(state.deletedKeys);
+  for (const key of keysToDelete) {
+    deletedKeys.add(key);
+  }
+  return { ...state, deletedKeys };
+}
+
+export function validateDraftParentAcntgSeCd(
+  state: AcntgSeGridState,
+  rowKey: string,
+): string | null {
+  const draft = state.drafts[rowKey];
+  if (!draft?.parentRowKey) return null;
+
+  const parent = mergeAcntgRow(state, draft.parentRowKey);
+  if (!parent?.acntgSeCd?.trim()) {
+    return "하위 항목을 추가하려면 상위 코드를 먼저 입력하세요.";
+  }
+
+  return null;
+}
+
+export function removeDraftFromGrid(state: AcntgSeGridState, rowKey: string): AcntgSeGridState {
+  const { [rowKey]: _removed, ...restDrafts } = state.drafts;
+  const keysToRemove = collectDescendantRowKeys(state.structure, rowKey);
+
+  return {
+    ...state,
+    drafts: restDrafts,
+    structure: removeSlotsFromStructure(state.structure, keysToRemove),
+  };
+}
diff --git a/apps/as/src/pages/acntg-code-management/lib/build-save-multi-payload.ts b/apps/as/src/pages/acntg-code-management/lib/build-save-multi-payload.ts
new file mode 100644
index 000000000..f18634b51
--- /dev/null
+++ b/apps/as/src/pages/acntg-code-management/lib/build-save-multi-payload.ts
@@ -0,0 +1,62 @@
+import { ACNTG_SE_SAVE_MODE, type AcntgSeMngSaveRequestDto } from "@/entities/acntg";
+
+import type { AcntgSeRow } from "../model/acntg-se-row-types";
+
+import { getVisibleRows } from "./row-state";
+
+function compareCdLvNoDesc(a: AcntgSeRow, b: AcntgSeRow): number {
+  return (b.cdLvNo ?? 1) - (a.cdLvNo ?? 1);
+}
+
+function compareCdLvNoAsc(a: AcntgSeRow, b: AcntgSeRow): number {
+  return (a.cdLvNo ?? 1) - (b.cdLvNo ?? 1);
+}
+
+export function buildSaveMultiPayload(rows: AcntgSeRow[]): AcntgSeMngSaveRequestDto[] {
+  const payload: AcntgSeMngSaveRequestDto[] = [];
+
+  const deletedRows = rows.filter((row) => row.isDeleted && !row.isNew).sort(compareCdLvNoDesc);
+
+  for (const row of deletedRows) {
+    payload.push({
+      mode: ACNTG_SE_SAVE_MODE.DELETE,
+      acntgSeCd: row.acntgSeCd,
+      acntgSeCdNm: row.acntgSeCdNm?.trim() || "",
+      upAcntgSeCd: row.upAcntgSeCd,
+      cdLvNo: row.cdLvNo,
+      useYn: row.useYn,
+      expln: row.expln?.trim() || undefined,
+    });
+  }
+
+  const visibleRows = getVisibleRows(rows).sort(compareCdLvNoAsc);
+
+  for (const row of visibleRows) {
+    if (row.isNew) {
+      payload.push({
+        mode: ACNTG_SE_SAVE_MODE.CREATE,
+        acntgSeCd: row.acntgSeCd.trim(),
+        acntgSeCdNm: row.acntgSeCdNm.trim(),
+        upAcntgSeCd: row.upAcntgSeCd,
+        cdLvNo: row.cdLvNo,
+        useYn: row.useYn,
+        expln: row.expln?.trim() || undefined,
+      });
+      continue;
+    }
+
+    if (row.isDirty) {
+      payload.push({
+        mode: ACNTG_SE_SAVE_MODE.UPDATE,
+        acntgSeCd: row.acntgSeCd.trim(),
+        acntgSeCdNm: row.acntgSeCdNm.trim(),
+        upAcntgSeCd: row.upAcntgSeCd,
+        cdLvNo: row.cdLvNo,
+        useYn: row.useYn,
+        expln: row.expln?.trim() || undefined,
+      });
+    }
+  }
+
+  return payload;
+}
diff --git a/apps/as/src/pages/acntg-code-management/lib/row-state.ts b/apps/as/src/pages/acntg-code-management/lib/row-state.ts
new file mode 100644
index 000000000..908df1f70
--- /dev/null
+++ b/apps/as/src/pages/acntg-code-management/lib/row-state.ts
@@ -0,0 +1,5 @@
+import type { AcntgSeRow } from "../model/acntg-se-row-types";
+
+export function getVisibleRows(rows: AcntgSeRow[]): AcntgSeRow[] {
+  return rows.filter((row) => !row.isDeleted);
+}
diff --git a/apps/as/src/pages/acntg-code-management/lib/use-acntg-se-rows.ts b/apps/as/src/pages/acntg-code-management/lib/use-acntg-se-rows.ts
new file mode 100644
index 000000000..5fd9f85c5
--- /dev/null
+++ b/apps/as/src/pages/acntg-code-management/lib/use-acntg-se-rows.ts
@@ -0,0 +1,172 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import type { AcntgSeMngResponseDto } from "@/entities/acntg";
+
+import type { AcntgSeGridState } from "../model/acntg-se-grid-types";
+import type { AcntgSeRow } from "../model/acntg-se-row-types";
+
+import {
+  createDraftRowKey,
+  createEmptyGridState,
+  hasAcntgGridPendingChanges,
+  hydrateGridFromServer,
+  insertChildSlot,
+  insertRootSlot,
+  markAcntgRowsDeleted,
+  mergeAcntgRow,
+  mergeAllAcntgRows,
+  patchAcntgGridRow,
+  removeDraftFromGrid,
+  validateDraftParentAcntgSeCd,
+} from "./acntg-se-grid";
+import { buildSaveMultiPayload } from "./build-save-multi-payload";
+
+function validateAcntgSeRow(row: AcntgSeRow): string | null {
+  if (!row.acntgSeCd.trim()) return "코드를 입력하세요.";
+  if (!row.acntgSeCdNm?.trim()) return "코드명을 입력하세요.";
+  const parentCd = row.upAcntgSeCd?.trim();
+  if (parentCd && row.acntgSeCd.trim() === parentCd) {
+    return "상위 코드와 동일한 코드는 사용할 수 없습니다.";
+  }
+  return null;
+}
+
+interface UseAcntgSeRowsOptions {
+  serverContent: AcntgSeMngResponseDto[] | undefined;
+  onAlert: (message: string) => void;
+  onSave: (payload: ReturnType<typeof buildSaveMultiPayload>) => Promise<void>;
+}
+
+export function useAcntgSeRows({ serverContent, onAlert, onSave }: UseAcntgSeRowsOptions) {
+  const [grid, setGrid] = useState<AcntgSeGridState>(createEmptyGridState);
+  const hasPendingRef = useRef(false);
+
+  hasPendingRef.current = hasAcntgGridPendingChanges(grid);
+
+  useEffect(() => {
+    if (serverContent == null) return;
+    if (hasPendingRef.current) return;
+    setGrid(hydrateGridFromServer(serverContent));
+  }, [serverContent]);
+
+  const displayRows = useMemo(() => {
+    return grid.structure
+      .filter((slot) => !grid.deletedKeys.has(slot.rowKey))
+      .map((slot) => {
+        const row = mergeAcntgRow(grid, slot.rowKey);
+        return row ? { row, depth: slot.depth } : null;
+      })
+      .filter((item): item is { row: AcntgSeRow; depth: number } => item != null);
+  }, [grid]);
+
+  const canSave = hasAcntgGridPendingChanges(grid);
+
+  const updateRow = useCallback((rowKey: string, patch: Partial<AcntgSeRow>) => {
+    setGrid((prev) => patchAcntgGridRow(prev, rowKey, patch));
+  }, []);
+
+  const addRootRow = useCallback(() => {
+    const rowKey = createDraftRowKey();
+    setGrid((prev) => ({
+      ...prev,
+      drafts: {
+        ...prev.drafts,
+        [rowKey]: {
+          rowKey,
+          parentRowKey: null,
+          cdLvNo: 1,
+          acntgSeCd: "",
+          acntgSeCdNm: "",
+          expln: "",
+          useYn: "Y",
+        },
+      },
+      structure: insertRootSlot(prev.structure, { rowKey, depth: 0, parentRowKey: null }),
+    }));
+  }, []);
+
+  const addChildRow = useCallback((parent: AcntgSeRow) => {
+    const rowKey = createDraftRowKey();
+    const slot = {
+      rowKey,
+      depth: 0,
+      parentRowKey: parent.rowKey,
+    };
+
+    setGrid((prev) => {
+      const parentSlot = prev.structure.find((item) => item.rowKey === parent.rowKey);
+      const depth = (parentSlot?.depth ?? 0) + 1;
+
+      return {
+        ...prev,
+        drafts: {
+          ...prev.drafts,
+          [rowKey]: {
+            rowKey,
+            parentRowKey: parent.rowKey,
+            cdLvNo: (parent.cdLvNo ?? 1) + 1,
+            acntgSeCd: "",
+            acntgSeCdNm: "",
+            expln: "",
+            useYn: "Y",
+          },
+        },
+        structure: insertChildSlot(prev.structure, parent.rowKey, {
+          ...slot,
+          depth,
+        }),
+      };
+    });
+  }, []);
+
+  const removeDraft = useCallback((rowKey: string) => {
+    setGrid((prev) => removeDraftFromGrid(prev, rowKey));
+  }, []);
+
+  const markDeleted = useCallback((rowKey: string) => {
+    setGrid((prev) => markAcntgRowsDeleted(prev, rowKey));
+  }, []);
+
+  const resetFromServer = useCallback((content: AcntgSeMngResponseDto[]) => {
+    setGrid(hydrateGridFromServer(content));
+  }, []);
+
+  const save = useCallback(async () => {
+    const mergedRows = mergeAllAcntgRows(grid);
+    const payload = buildSaveMultiPayload(mergedRows);
+    if (payload.length === 0) return false;
+
+    for (const row of mergedRows) {
+      if (!row.isDeleted && (row.isNew || row.isDirty)) {
+        const parentCodeError = validateDraftParentAcntgSeCd(grid, row.rowKey);
+        if (parentCodeError) {
+          onAlert(parentCodeError);
+          return false;
+        }
+
+        const fieldError = validateAcntgSeRow(row);
+        if (fieldError) {
+          onAlert(fieldError);
+          return false;
+        }
+      }
+    }
+
+    await onSave(payload);
+    return true;
+  }, [grid, onAlert, onSave]);
+
+  return {
+    displayRows,
+    canSave,
+    updateRow,
+    addRootRow,
+    addChildRow,
+    removeDraft,
+    markDeleted,
+    resetFromServer,
+    save,
+  };
+}
diff --git a/apps/as/src/pages/acntg-code-management/model/acntg-se-grid-types.ts b/apps/as/src/pages/acntg-code-management/model/acntg-se-grid-types.ts
new file mode 100644
index 000000000..a115c122d
--- /dev/null
+++ b/apps/as/src/pages/acntg-code-management/model/acntg-se-grid-types.ts
@@ -0,0 +1,34 @@
+import type { AcntgSeMngResponseDto } from "@/entities/acntg";
+
+export interface AcntgDisplaySlot {
+  rowKey: string;
+  depth: number;
+  parentRowKey: string | null;
+}
+
+export interface AcntgSeDraft {
+  rowKey: string;
+  parentRowKey: string | null;
+  cdLvNo: number;
+  acntgSeCd: string;
+  acntgSeCdNm: string;
+  expln: string;
+  useYn: string;
+}
+
+export interface AcntgSeBaseEntry extends AcntgSeMngResponseDto {
+  rowKey: string;
+}
+
+export interface AcntgSeGridState {
+  baseByKey: Record<string, AcntgSeBaseEntry>;
+  structure: AcntgDisplaySlot[];
+  drafts: Record<string, AcntgSeDraft>;
+  patches: Record<string, Partial<AcntgSeMngResponseDto>>;
+  deletedKeys: Set<string>;
+}
+
+export interface AcntgSeDisplayItem {
+  rowKey: string;
+  depth: number;
+}
diff --git a/apps/as/src/pages/acntg-code-management/model/acntg-se-row-types.ts b/apps/as/src/pages/acntg-code-management/model/acntg-se-row-types.ts
new file mode 100644
index 000000000..7ee397014
--- /dev/null
+++ b/apps/as/src/pages/acntg-code-management/model/acntg-se-row-types.ts
@@ -0,0 +1,8 @@
+import type { AcntgSeMngResponseDto } from "@/entities/acntg";
+
+export interface AcntgSeRow extends AcntgSeMngResponseDto {
+  rowKey: string;
+  isNew: boolean;
+  isDirty: boolean;
+  isDeleted: boolean;
+}
diff --git a/apps/as/src/pages/acntg-code-management/model/build-acntg-display-rows.ts b/apps/as/src/pages/acntg-code-management/model/build-acntg-display-rows.ts
new file mode 100644
index 000000000..e0e55d02a
--- /dev/null
+++ b/apps/as/src/pages/acntg-code-management/model/build-acntg-display-rows.ts
@@ -0,0 +1,77 @@
+import type { AcntgSeRow } from "./acntg-se-row-types";
+
+export interface AcntgSeDisplayRow {
+  row: AcntgSeRow;
+  depth: number;
+}
+
+export function formatCdLvNo(lvNo?: number): string {
+  return `${lvNo ?? 1}단계`;
+}
+
+export function canAddChildRow(): boolean {
+  return true;
+}
+
+export function formatTreeBranchPrefix(depth: number): string {
+  if (depth <= 0) return "";
+  const vertical = "\u2502 ";
+  const branch = "\u251C\u2500";
+  return vertical.repeat(depth - 1) + branch;
+}
+
+function isRootRow(row: AcntgSeRow): boolean {
+  return (row.cdLvNo ?? 1) === 1 && !row.upAcntgSeCd?.trim();
+}
+
+function rowOrderIndex(rows: AcntgSeRow[], row: AcntgSeRow): number {
+  return rows.findIndex((candidate) => candidate.rowKey === row.rowKey);
+}
+
+function pushDisplayRow(
+  result: AcntgSeDisplayRow[],
+  displayedRowKeys: Set<string>,
+  row: AcntgSeRow,
+  depth: number,
+) {
+  if (displayedRowKeys.has(row.rowKey)) return;
+  displayedRowKeys.add(row.rowKey);
+  result.push({ row, depth });
+}
+
+export function buildAcntgDisplayRows(rows: AcntgSeRow[]): AcntgSeDisplayRow[] {
+  const result: AcntgSeDisplayRow[] = [];
+  const displayedRowKeys = new Set<string>();
+
+  const roots = rows.filter(isRootRow);
+
+  function appendSubtree(parent: AcntgSeRow, depth: number) {
+    const children = rows
+      .filter(
+        (row) =>
+          row.rowKey !== parent.rowKey &&
+          row.upAcntgSeCd != null &&
+          row.upAcntgSeCd === parent.acntgSeCd &&
+          row.acntgSeCd !== parent.acntgSeCd,
+      )
+      .sort((a, b) => rowOrderIndex(rows, a) - rowOrderIndex(rows, b));
+
+    for (const child of children) {
+      pushDisplayRow(result, displayedRowKeys, child, depth);
+      appendSubtree(child, depth + 1);
+    }
+  }
+
+  for (const root of roots) {
+    pushDisplayRow(result, displayedRowKeys, root, 0);
+    appendSubtree(root, 1);
+  }
+
+  const orphans = rows.filter((row) => !displayedRowKeys.has(row.rowKey));
+
+  for (const orphan of orphans) {
+    pushDisplayRow(result, displayedRowKeys, orphan, Math.max(0, (orphan.cdLvNo ?? 1) - 1));
+  }
+
+  return result;
+}
diff --git a/apps/as/src/pages/acntg-code-management/ui/acntg-code-management-page.tsx b/apps/as/src/pages/acntg-code-management/ui/acntg-code-management-page.tsx
new file mode 100644
index 000000000..d480ced59
--- /dev/null
+++ b/apps/as/src/pages/acntg-code-management/ui/acntg-code-management-page.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { useCallback } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { useAlertStore } from "@/shared/lib";
+import { useAcntgSeMngPage, useSaveMultiAcntgSeMng } from "@/entities/acntg";
+import {
+  Button,
+  Skeleton,
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@common/components";
+
+import { useAcntgSeRows } from "../lib/use-acntg-se-rows";
+import type { AcntgSeRow } from "../model/acntg-se-row-types";
+
+import { AcntgSeRowComponent } from "./acntg-se-row";
+
+function AcntgCodeManagementPage() {
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
+
+  const pageQuery = useAcntgSeMngPage({
+    page: 0,
+    size: 500,
+    sort: "cdLvNo,asc",
+  });
+
+  const saveMultiMutation = useSaveMultiAcntgSeMng();
+
+  const handlePersist = useCallback(
+    async (payload: Parameters<typeof saveMultiMutation.mutateAsync>[0]) => {
+      await saveMultiMutation.mutateAsync(payload);
+    },
+    [saveMultiMutation],
+  );
+
+  const {
+    displayRows,
+    canSave,
+    updateRow,
+    addRootRow,
+    addChildRow,
+    removeDraft,
+    markDeleted,
+    resetFromServer,
+    save,
+  } = useAcntgSeRows({
+    serverContent: pageQuery.data?.content,
+    onAlert: alert,
+    onSave: handlePersist,
+  });
+
+  const handleDelete = async (row: AcntgSeRow) => {
+    if (!(await confirm("삭제하시겠습니까?"))) return;
+
+    if (row.isNew) {
+      removeDraft(row.rowKey);
+      return;
+    }
+
+    markDeleted(row.rowKey);
+  };
+
+  const handleSave = async () => {
+    if (!(await confirm("저장하시겠습니까?"))) return;
+
+    const saved = await save();
+    if (!saved) return;
+
+    alert("저장되었습니다.");
+    const result = await pageQuery.refetch();
+    resetFromServer(result.data?.content ?? []);
+  };
+
+  const isSaving = saveMultiMutation.isPending;
+
+  return (
+    <div className="space-y-6 px-[1.8rem] pb-6">
+      <section className="card card-border mx-0 bg-background pb-6 pt-0">
+        <div className="card-header flex flex-wrap items-center justify-between gap-3">
+          <h3 className="text-2xl font-semibold">회계코드 관리</h3>
+          <div className="flex flex-wrap items-center gap-3">
+            <Button type="button" color="green" onClick={addRootRow}>
+              코드 추가
+            </Button>
+            <Button type="button" disabled={!canSave || isSaving} onClick={handleSave}>
+              저장
+            </Button>
+          </div>
+        </div>
+
+        {pageQuery.isPending ? (
+          <div className="flex flex-col gap-2 px-4 pb-4">
+            <Skeleton className="h-[4rem]" />
+            <Skeleton className="h-[16rem]" />
+          </div>
+        ) : displayRows.length === 0 ? (
+          <p className="py-8 text-center text-lg text-muted-foreground">
+            등록된 코드가 없습니다. [코드 추가]로 1단계 코드를 등록하세요.
+          </p>
+        ) : (
+          <div className="max-h-[60rem] overflow-y-auto pt-3">
+            <Table className="w-full">
+              <colgroup>
+                <col width="15%" />
+                <col width="20%" />
+                <col width="35%" />
+                <col width="12%" />
+                <col width="8%" />
+                <col width="10%" />
+              </colgroup>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>코드</TableHead>
+                  <TableHead>코드명</TableHead>
+                  <TableHead>설명</TableHead>
+                  <TableHead>사용 여부</TableHead>
+                  <TableHead>구분</TableHead>
+                  <TableHead>관리</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {displayRows.map(({ row, depth }) => (
+                  <AcntgSeRowComponent
+                    key={row.rowKey}
+                    row={row}
+                    depth={depth}
+                    onChange={(patch) => updateRow(row.rowKey, patch)}
+                    onAddChild={() => addChildRow(row)}
+                    onDelete={() => handleDelete(row)}
+                  />
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+export { AcntgCodeManagementPage };
diff --git a/apps/as/src/pages/acntg-code-management/ui/acntg-se-row.tsx b/apps/as/src/pages/acntg-code-management/ui/acntg-se-row.tsx
new file mode 100644
index 000000000..69b53ec60
--- /dev/null
+++ b/apps/as/src/pages/acntg-code-management/ui/acntg-se-row.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import {
+  Button,
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  TableCell,
+  TableRow,
+} from "@common/components";
+
+import type { AcntgSeRow } from "../model/acntg-se-row-types";
+import {
+  canAddChildRow,
+  formatCdLvNo,
+  formatTreeBranchPrefix,
+} from "../model/build-acntg-display-rows";
+
+interface AcntgSeRowProps {
+  row: AcntgSeRow;
+  depth: number;
+  onChange: (patch: Partial<AcntgSeRow>) => void;
+  onAddChild: () => void;
+  onDelete: () => void;
+}
+
+function AcntgSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: AcntgSeRowProps) {
+  const levelLabel = formatCdLvNo(row.cdLvNo);
+  const branchPrefix = formatTreeBranchPrefix(depth);
+
+  return (
+    <TableRow>
+      <TableCell>
+        <div className="flex min-w-[10rem] items-center gap-1">
+          {branchPrefix ? (
+            <span className="shrink-0 font-mono text-muted">{branchPrefix}</span>
+          ) : null}
+          <Input
+            value={row.acntgSeCd}
+            onChange={(e) => onChange({ acntgSeCd: e.target.value })}
+            placeholder="코드"
+            maxLength={10}
+            disabled={!row.isNew}
+            className="flex-1"
+          />
+        </div>
+      </TableCell>
+      <TableCell>
+        <Input
+          value={row.acntgSeCdNm ?? ""}
+          onChange={(e) => onChange({ acntgSeCdNm: e.target.value })}
+          placeholder="코드명"
+          maxLength={100}
+        />
+      </TableCell>
+      <TableCell>
+        <Input
+          value={row.expln ?? ""}
+          onChange={(e) => onChange({ expln: e.target.value })}
+          placeholder="설명"
+          maxLength={1000}
+        />
+      </TableCell>
+      <TableCell align="center">
+        <RadioGroup
+          value={row.useYn === "N" ? "N" : "Y"}
+          onValueChange={(v) => onChange({ useYn: v })}
+          className="flex justify-center gap-4"
+        >
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="Y" id={`${row.rowKey}-use-y`} />
+            <Label htmlFor={`${row.rowKey}-use-y`}>예</Label>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="N" id={`${row.rowKey}-use-n`} />
+            <Label htmlFor={`${row.rowKey}-use-n`}>아니오</Label>
+          </div>
+        </RadioGroup>
+      </TableCell>
+      <TableCell align="center">{levelLabel}</TableCell>
+      <TableCell align="center">
+        <div className="flex justify-center gap-2">
+          <Button
+            type="button"
+            size="sm"
+            color="white"
+            disabled={!canAddChildRow()}
+            onClick={onAddChild}
+          >
+            하위추가
+          </Button>
+          <Button type="button" size="sm" color="gray" onClick={onDelete}>
+            삭제
+          </Button>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export { AcntgSeRowComponent };
diff --git a/apps/as/src/pages/approval-line-management/index.ts b/apps/as/src/pages/approval-line-management/index.ts
new file mode 100644
index 000000000..9355f01aa
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/index.ts
@@ -0,0 +1 @@
+export { ApprovalLineManagementPage } from "./ui/approval-line-management-page";
diff --git a/apps/as/src/pages/approval-line-management/lib/assign-atrz-seq.ts b/apps/as/src/pages/approval-line-management/lib/assign-atrz-seq.ts
new file mode 100644
index 000000000..6b5b63bd4
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/lib/assign-atrz-seq.ts
@@ -0,0 +1,6 @@
+import type { ElaprAplnRow } from "../model/apln-row-types";
+
+/** 그리드 행 순서(1-based)로 결재순서번호 일괄 채번 */
+export function assignAtrzSeqNumbers(rows: ElaprAplnRow[]): ElaprAplnRow[] {
+  return rows.map((row, index) => ({ ...row, atrzSeqNo: index + 1 }));
+}
diff --git a/apps/as/src/pages/approval-line-management/lib/build-save-multi-payload.ts b/apps/as/src/pages/approval-line-management/lib/build-save-multi-payload.ts
new file mode 100644
index 000000000..0c66b7623
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/lib/build-save-multi-payload.ts
@@ -0,0 +1,70 @@
+import { ELAPR_APLN_SAVE_MODE, type ElaprApln, type ElaprAplnSaveRequest } from "@/entities/elapr";
+
+import { assignAtrzSeqNumbers } from "./assign-atrz-seq";
+import { getVisibleRows } from "./validators";
+import type { ElaprAplnRow } from "../model/apln-row-types";
+
+function rowDiffersFromServer(row: ElaprAplnRow, serverRow: ElaprApln): boolean {
+  return (
+    row.aprvrUuid !== serverRow.aprvrUuid ||
+    row.atrzSeComCd !== serverRow.atrzSeComCd ||
+    row.atrzSeqNo !== serverRow.atrzSeqNo
+  );
+}
+
+function shouldIncludeUpdate(row: ElaprAplnRow, serverRows: ElaprApln[]): boolean {
+  if (row.isDirty) return true;
+  if (!row.aplnId) return false;
+
+  const serverRow = serverRows.find((s) => s.aplnId === row.aplnId);
+  if (!serverRow) return false;
+
+  return rowDiffersFromServer(row, serverRow);
+}
+
+export function buildSaveMultiPayload(
+  rows: ElaprAplnRow[],
+  elaprTmpltId: string,
+  serverRows: ElaprApln[],
+): ElaprAplnSaveRequest[] {
+  const payload: ElaprAplnSaveRequest[] = [];
+
+  for (const row of rows) {
+    if (row.isDeleted && row.aplnId) {
+      payload.push({
+        mode: ELAPR_APLN_SAVE_MODE.DELETE,
+        aplnId: row.aplnId,
+      });
+    }
+  }
+
+  const visibleWithSeq = assignAtrzSeqNumbers(getVisibleRows(rows));
+
+  for (const row of visibleWithSeq) {
+    if (row.isNew) {
+      payload.push({
+        mode: ELAPR_APLN_SAVE_MODE.CREATE,
+        elaprTmpltId,
+        aprvrUuid: row.aprvrUuid,
+        atrzSeComCd: row.atrzSeComCd,
+        atrzSeqNo: row.atrzSeqNo,
+      });
+      continue;
+    }
+
+    if (!row.aplnId) continue;
+
+    if (shouldIncludeUpdate(row, serverRows)) {
+      payload.push({
+        mode: ELAPR_APLN_SAVE_MODE.UPDATE,
+        aplnId: row.aplnId,
+        elaprTmpltId,
+        aprvrUuid: row.aprvrUuid,
+        atrzSeComCd: row.atrzSeComCd,
+        atrzSeqNo: row.atrzSeqNo,
+      });
+    }
+  }
+
+  return payload;
+}
diff --git a/apps/as/src/pages/approval-line-management/lib/has-unsaved-changes.ts b/apps/as/src/pages/approval-line-management/lib/has-unsaved-changes.ts
new file mode 100644
index 000000000..46efa59f3
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/lib/has-unsaved-changes.ts
@@ -0,0 +1,32 @@
+import type { ElaprApln } from "@/entities/elapr";
+
+import { assignAtrzSeqNumbers } from "./assign-atrz-seq";
+import { getVisibleRows } from "./validators";
+import type { ElaprAplnRow } from "../model/apln-row-types";
+
+function rowDiffersFromServer(row: ElaprAplnRow, serverRow: ElaprApln): boolean {
+  return (
+    row.aprvrUuid !== serverRow.aprvrUuid ||
+    row.atrzSeComCd !== serverRow.atrzSeComCd ||
+    row.atrzSeqNo !== serverRow.atrzSeqNo
+  );
+}
+
+export function hasUnsavedChanges(rows: ElaprAplnRow[], serverRows: ElaprApln[]): boolean {
+  if (rows.some((row) => row.isDeleted && row.aplnId)) return true;
+  if (rows.some((row) => row.isNew && !row.isDeleted)) return true;
+
+  const visibleWithSeq = assignAtrzSeqNumbers(getVisibleRows(rows));
+
+  for (const row of visibleWithSeq) {
+    if (row.isNew) continue;
+    if (!row.aplnId) continue;
+    if (row.isDirty) return true;
+
+    const serverRow = serverRows.find((s) => s.aplnId === row.aplnId);
+    if (!serverRow) continue;
+    if (rowDiffersFromServer(row, serverRow)) return true;
+  }
+
+  return false;
+}
diff --git a/apps/as/src/pages/approval-line-management/lib/use-apln-rows.ts b/apps/as/src/pages/approval-line-management/lib/use-apln-rows.ts
new file mode 100644
index 000000000..01c71ce3b
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/lib/use-apln-rows.ts
@@ -0,0 +1,186 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { arrayMove } from "@dnd-kit/sortable";
+
+import type { ElaprApln } from "@/entities/elapr";
+
+import type { ElaprAplnRow } from "../model/apln-row-types";
+
+import { assignAtrzSeqNumbers } from "./assign-atrz-seq";
+import { getVisibleRows } from "./validators";
+
+function toRow(item: ElaprApln): ElaprAplnRow {
+  return {
+    ...item,
+    rowKey: item.aplnId,
+    aprvrNm: item.aprvrNm,
+    isNew: false,
+    isDirty: false,
+    isDeleted: false,
+  };
+}
+
+interface UseAplnRowsOptions {
+  elaprTmpltId: string | null;
+  serverRows: ElaprApln[] | undefined;
+}
+
+export function createDraftRowKey(): string {
+  return `draft-${Date.now()}`;
+}
+
+export function useAplnRows({ elaprTmpltId, serverRows }: UseAplnRowsOptions) {
+  const [rows, setRows] = useState<ElaprAplnRow[]>([]);
+  const [editingRowKey, setEditingRowKey] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!elaprTmpltId) {
+      setRows([]);
+      setEditingRowKey(null);
+      return;
+    }
+    setRows((serverRows ?? []).map(toRow));
+    setEditingRowKey(null);
+  }, [elaprTmpltId, serverRows]);
+
+  const isEditingLocked = editingRowKey != null;
+  const visibleRows = getVisibleRows(rows);
+
+  const addRow = useCallback(() => {
+    if (!elaprTmpltId || isEditingLocked) return;
+
+    const rowKey = createDraftRowKey();
+
+    setRows((prev) => [
+      ...prev,
+      {
+        rowKey,
+        elaprTmpltId,
+        atrzSeComCd: "",
+        aprvrUuid: "",
+        aprvrNm: "",
+        isNew: true,
+        isDirty: true,
+        isDeleted: false,
+      },
+    ]);
+    setEditingRowKey(rowKey);
+  }, [elaprTmpltId, isEditingLocked]);
+
+  const startEdit = useCallback(
+    (rowKey: string) => {
+      if (isEditingLocked) return;
+      setEditingRowKey(rowKey);
+      setRows((prev) =>
+        prev.map((row) => (row.rowKey === rowKey ? { ...row, snapshot: { ...row } } : row)),
+      );
+    },
+    [isEditingLocked],
+  );
+
+  const updateRow = useCallback(
+    (rowKey: string, patch: Partial<ElaprAplnRow>) => {
+      if (editingRowKey !== rowKey) return;
+      setRows((prev) =>
+        prev.map((row) => (row.rowKey === rowKey ? { ...row, ...patch, isDirty: true } : row)),
+      );
+    },
+    [editingRowKey],
+  );
+
+  const cancelEdit = useCallback(() => {
+    if (!editingRowKey) return;
+
+    setRows((prev) => {
+      const target = prev.find((r) => r.rowKey === editingRowKey);
+      if (target?.isNew) {
+        return prev.filter((r) => r.rowKey !== editingRowKey);
+      }
+      return prev.map((row) => {
+        if (row.rowKey !== editingRowKey) return row;
+        if (row.snapshot) {
+          const { snapshot: _s, isNew: _n, isDirty: _d, isDeleted: _del, ...restored } = row.snapshot;
+          return { ...restored, isNew: false, isDirty: false, isDeleted: false };
+        }
+        return { ...row, isDirty: false };
+      });
+    });
+    setEditingRowKey(null);
+  }, [editingRowKey]);
+
+  const commitEdit = useCallback(
+    (rowKey: string) => {
+      setRows((prev) =>
+        prev.map((row) => {
+          if (row.rowKey !== rowKey) return row;
+          const { snapshot: _s, ...committed } = row;
+          return { ...committed, isDirty: true };
+        }),
+      );
+      setEditingRowKey(null);
+    },
+    [],
+  );
+
+  const markDeleted = useCallback((rowKey: string) => {
+    setRows((prev) => {
+      const target = prev.find((r) => r.rowKey === rowKey);
+      if (!target) return prev;
+
+      if (target.isNew) {
+        return prev.filter((r) => r.rowKey !== rowKey);
+      }
+
+      return prev.map((row) =>
+        row.rowKey === rowKey ? { ...row, isDeleted: true, isDirty: true } : row,
+      );
+    });
+    setEditingRowKey((key) => (key === rowKey ? null : key));
+  }, []);
+
+  const reorderRows = useCallback(
+    (activeKey: string, overKey: string): ElaprAplnRow[] => {
+      if (isEditingLocked) return [];
+
+      let payloadRows: ElaprAplnRow[] = [];
+
+      setRows((prev) => {
+        const visible = getVisibleRows(prev);
+        const oldIndex = visible.findIndex((r) => r.rowKey === activeKey);
+        const newIndex = visible.findIndex((r) => r.rowKey === overKey);
+        if (oldIndex < 0 || newIndex < 0) return prev;
+
+        const reorderedVisible = assignAtrzSeqNumbers(arrayMove(visible, oldIndex, newIndex)).map(
+          (row) => ({ ...row, isDirty: true }),
+        );
+
+        const visibleKeys = new Set(reorderedVisible.map((r) => r.rowKey));
+        const deletedRows = prev.filter((r) => r.isDeleted);
+        const merged = [...reorderedVisible, ...deletedRows.filter((r) => !visibleKeys.has(r.rowKey))];
+
+        payloadRows = reorderedVisible;
+        return merged;
+      });
+
+      return payloadRows;
+    },
+    [isEditingLocked],
+  );
+
+  return {
+    rows,
+    visibleRows,
+    setRows,
+    editingRowKey,
+    isEditingLocked,
+    addRow,
+    startEdit,
+    updateRow,
+    cancelEdit,
+    commitEdit,
+    markDeleted,
+    reorderRows,
+  };
+}
diff --git a/apps/as/src/pages/approval-line-management/lib/use-dnd-sensors.ts b/apps/as/src/pages/approval-line-management/lib/use-dnd-sensors.ts
new file mode 100644
index 000000000..7c4e82ba9
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/lib/use-dnd-sensors.ts
@@ -0,0 +1,11 @@
+import { KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+
+export function useDndSensors() {
+  return useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+}
diff --git a/apps/as/src/pages/approval-line-management/lib/validators.ts b/apps/as/src/pages/approval-line-management/lib/validators.ts
new file mode 100644
index 000000000..4e301afa9
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/lib/validators.ts
@@ -0,0 +1,85 @@
+import type { ElaprAplnRow } from "../model/apln-row-types";
+
+const ATRZ_RECEIVER_CD = "ATRZ01";
+const ATRZ_FINAL_CD = "ATRZ99";
+
+export function getVisibleRows(rows: ElaprAplnRow[]): ElaprAplnRow[] {
+  return rows.filter((row) => !row.isDeleted);
+}
+
+/** 접수자·최종승인자 위치·중복 검증 (최종 저장 시점) */
+export function validateAtrzOrder(rows: ElaprAplnRow[]): string | null {
+  const visibleRows = getVisibleRows(rows);
+
+  const receiverCount = visibleRows.filter((row) => row.atrzSeComCd === ATRZ_RECEIVER_CD).length;
+  if (receiverCount === 0) {
+    return "접수자는 반드시 등록해야 합니다.";
+  }
+  if (receiverCount > 1) {
+    return "접수자는 한 명만 등록할 수 있습니다.";
+  }
+
+  const finalCount = visibleRows.filter((row) => row.atrzSeComCd === ATRZ_FINAL_CD).length;
+  if (finalCount === 0) {
+    return "최종승인자는 반드시 등록해야 합니다.";
+  }
+  if (finalCount > 1) {
+    return "최종승인자는 한 명만 등록할 수 있습니다.";
+  }
+
+  if (receiverCount === 1 && visibleRows[0]?.atrzSeComCd !== ATRZ_RECEIVER_CD) {
+    return "접수자는 결재선 첫 번째에 배치해야 합니다.";
+  }
+
+  if (finalCount === 1) {
+    const lastRow = visibleRows[visibleRows.length - 1];
+    if (lastRow?.atrzSeComCd !== ATRZ_FINAL_CD) {
+      return "최종승인자는 결재선 마지막에 배치해야 합니다.";
+    }
+  }
+
+  return null;
+}
+
+export function validateAplnRow(row: ElaprAplnRow): string | null {
+  if (!row.atrzSeComCd?.trim()) {
+    return "결재구분을 선택해 주세요.";
+  }
+  if (!row.aprvrUuid?.trim()) {
+    return "결재자를 선택해 주세요.";
+  }
+  return null;
+}
+
+export function validateAllRowsForSave(
+  rows: ElaprAplnRow[],
+  isEditingLocked: boolean,
+): string | null {
+  if (isEditingLocked) {
+    return "편집 중인 행을 먼저 저장하거나 취소해 주세요.";
+  }
+
+  const visibleRows = getVisibleRows(rows);
+  if (visibleRows.length === 0) {
+    return "저장할 결재선이 없습니다.";
+  }
+
+  for (const row of visibleRows) {
+    const fieldError = validateAplnRow(row);
+    if (fieldError) return fieldError;
+  }
+
+  return null;
+}
+
+export function validateUniqueSeqNo(rows: ElaprAplnRow[]): string | null {
+  const seqSet = new Set<number>();
+  for (const row of getVisibleRows(rows)) {
+    if (row.atrzSeqNo == null) continue;
+    if (seqSet.has(row.atrzSeqNo)) {
+      return "동일 서식 내 결재순서번호가 중복됩니다.";
+    }
+    seqSet.add(row.atrzSeqNo);
+  }
+  return null;
+}
diff --git a/apps/as/src/pages/approval-line-management/model/apln-row-types.ts b/apps/as/src/pages/approval-line-management/model/apln-row-types.ts
new file mode 100644
index 000000000..cabc7bb08
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/model/apln-row-types.ts
@@ -0,0 +1,16 @@
+import type { ElaprApln } from "@/entities/elapr";
+
+/** 그리드 로컬 행 — API 응답 + UI 보조 필드 */
+export interface ElaprAplnRow extends Omit<ElaprApln, "aplnId"> {
+  /** React key · DnD · 편집 잠금용 — 서버 aplnId와 분리 */
+  rowKey: string;
+  aplnId?: string;
+  /** 결재자 표시명 — 응답 DTO 또는 선택 시 로컬 유지 */
+  aprvrNm?: string;
+  isNew?: boolean;
+  isDirty?: boolean;
+  /** 소프트 삭제 — 최종 저장 시 mode:D */
+  isDeleted?: boolean;
+  /** 수정 취소용 스냅샷 */
+  snapshot?: ElaprAplnRow;
+}
diff --git a/apps/as/src/pages/approval-line-management/model/columns.tsx b/apps/as/src/pages/approval-line-management/model/columns.tsx
new file mode 100644
index 000000000..a7beb668b
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/model/columns.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { createColumnHelper } from "@tanstack/react-table";
+
+import type { ElaprTmplt } from "@/entities/elapr";
+import { Button } from "@common/components";
+
+const columnHelper = createColumnHelper<ElaprTmplt>();
+
+interface CreateTmpltColumnsOptions {
+  onEdit: (row: ElaprTmplt) => void;
+  onDelete: (row: ElaprTmplt) => void;
+}
+
+export function createTmpltColumns({ onEdit, onDelete }: CreateTmpltColumnsOptions) {
+  return [
+    columnHelper.accessor("elaprTmpltId", {
+      header: "전자결재서식아이디",
+      meta: { align: "left" },
+    }),
+    columnHelper.accessor("elaprTmpltNm", {
+      header: "결재서식명",
+      meta: { align: "left" },
+    }),
+    columnHelper.accessor("docSeComNm", {
+      header: "문서구분",
+      cell: ({ getValue, row }) => getValue() ?? row.original.docSeComCd ?? "—",
+    }),
+    columnHelper.accessor("regDt", {
+      header: "등록일시",
+      cell: ({ getValue }) => getValue() ?? "—",
+    }),
+    columnHelper.display({
+      id: "actions",
+      header: "관리",
+      cell: ({ row }) => (
+        <div className="flex justify-center gap-2" onClick={(e) => e.stopPropagation()}>
+          <Button type="button" size="sm" color="white" onClick={() => onEdit(row.original)}>
+            수정
+          </Button>
+          <Button type="button" size="sm" color="gray" onClick={() => onDelete(row.original)}>
+            삭제
+          </Button>
+        </div>
+      ),
+    }),
+  ];
+}
diff --git a/apps/as/src/pages/approval-line-management/model/reviewer-option.ts b/apps/as/src/pages/approval-line-management/model/reviewer-option.ts
new file mode 100644
index 000000000..cb79bbf13
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/model/reviewer-option.ts
@@ -0,0 +1,15 @@
+import type { RvwMnpwMngResponseDto } from "@/entities/rvw-mnpw";
+
+export interface ReviewerOption {
+  uuid: string;
+  name: string;
+  deptNm: string;
+}
+
+export function fromRvwMnpwMng(item: RvwMnpwMngResponseDto): ReviewerOption {
+  return {
+    uuid: item.userUuid,
+    name: item.userUuidNm ?? "",
+    deptNm: item.ognzNm ?? "",
+  };
+}
diff --git a/apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx b/apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx
new file mode 100644
index 000000000..11b9373ac
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useState } from "react";
+
+import type { ElaprTmplt } from "@/entities/elapr";
+
+import { ElaprAplnGrid } from "./elapr-apln-grid";
+import { ElaprTmpltList } from "./elapr-tmplt-list";
+
+function ApprovalLineManagementPage() {
+  const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
+
+  return (
+    <div className="space-y-6 px-[1.8rem] pb-6">
+      <ElaprTmpltList
+        selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
+        onSelectTmplt={setSelectedTmplt}
+      />
+      <ElaprAplnGrid elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null} />
+    </div>
+  );
+}
+
+export { ApprovalLineManagementPage };
diff --git a/apps/as/src/pages/approval-line-management/ui/aprvr-picker-dialog.tsx b/apps/as/src/pages/approval-line-management/ui/aprvr-picker-dialog.tsx
new file mode 100644
index 000000000..38f7c810d
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/ui/aprvr-picker-dialog.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { useRvwMnpwMngPage } from "@/entities/rvw-mnpw";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Skeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@common/components";
+
+import { fromRvwMnpwMng, type ReviewerOption } from "../model/reviewer-option";
+
+const PAGE_SIZE = 500;
+
+interface AprvrPickerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  atrzSeComCd: string;
+  onSelect: (reviewer: ReviewerOption) => void;
+}
+
+function AprvrPickerDialog({
+  open,
+  onOpenChange,
+  atrzSeComCd,
+  onSelect,
+}: AprvrPickerDialogProps) {
+  const { data, isPending, isError } = useRvwMnpwMngPage(
+    {
+      atrzSeComCd,
+      page: 0,
+      size: PAGE_SIZE,
+      sort: "userUuidNm,asc",
+    },
+    { enabled: open },
+  );
+
+  const items = data?.content ?? [];
+
+  const handleSelect = (item: (typeof items)[number]) => {
+    onSelect(fromRvwMnpwMng(item));
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[56rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>검토인력 선택</DialogTitle>
+        </DialogHeader>
+
+        <div className="h-[36rem] overflow-auto">
+          {isPending ? (
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-[4rem]" />
+              <Skeleton className="h-[16rem]" />
+            </div>
+          ) : isError ? (
+            <p className="py-8 text-center text-lg text-muted-foreground">
+              검토인력 목록을 불러오지 못했습니다.
+            </p>
+          ) : items.length === 0 ? (
+            <p className="py-8 text-center text-lg text-muted-foreground">
+              배치된 검토인력이 없습니다.
+            </p>
+          ) : (
+            <Table className="w-full">
+              <colgroup>
+                <col width="25%" />
+                <col width="25%" />
+                <col width="15%" />
+                <col width="15%" />
+                <col width="20%" />
+              </colgroup>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>성명</TableHead>
+                  <TableHead>부서</TableHead>
+                  <TableHead>직위</TableHead>
+                  <TableHead>직급</TableHead>
+                  <TableHead>선택</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {items.map((item) => (
+                  <TableRow
+                    key={`${item.atrzSeComCd}-${item.ognzSn}-${item.userUuid}`}
+                  >
+                    <TableCell align="center">
+                      {item.userUuidNm || item.userUuid}
+                    </TableCell>
+                    <TableCell align="center">{item.ognzNm || "-"}</TableCell>
+                    <TableCell align="center">{item.jbpsSeNm || "-"}</TableCell>
+                    <TableCell align="center">{item.jbgdSeNm || "-"}</TableCell>
+                    <TableCell align="center">
+                      <Button type="button" size="sm" onClick={() => handleSelect(item)}>
+                        선택
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button type="button" color="white" onClick={() => onOpenChange(false)}>
+            닫기
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { AprvrPickerDialog };
diff --git a/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx b/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx
new file mode 100644
index 000000000..c2393715b
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx
@@ -0,0 +1,247 @@
+"use client";
+
+import { useState } from "react";
+
+import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { useAlertStore } from "@/shared/lib";
+import { useElaprAplnPage, useSaveMultiElaprApln } from "@/entities/elapr";
+import {
+  Button,
+  Skeleton,
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@common/components";
+
+import { buildSaveMultiPayload } from "../lib/build-save-multi-payload";
+import { hasUnsavedChanges } from "../lib/has-unsaved-changes";
+import { useAplnRows } from "../lib/use-apln-rows";
+import { useDndSensors } from "../lib/use-dnd-sensors";
+import {
+  validateAllRowsForSave,
+  validateAplnRow,
+  validateAtrzOrder,
+  validateUniqueSeqNo,
+} from "../lib/validators";
+import type { ElaprAplnRow } from "../model/apln-row-types";
+import type { ReviewerOption } from "../model/reviewer-option";
+
+import { AprvrPickerDialog } from "./aprvr-picker-dialog";
+import { SortableAplnRow } from "./sortable-apln-row";
+
+interface ElaprAplnGridProps {
+  elaprTmpltId: string | null;
+}
+
+function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
+  const { confirm } = useConfirm();
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [pickingRowKey, setPickingRowKey] = useState<string | null>(null);
+
+  const alert = useAlertStore((state) => state.setMessage);
+
+  const aplnQuery = useElaprAplnPage({
+    elaprTmpltId: elaprTmpltId ?? undefined,
+    page: 0,
+    size: 200,
+    sort: "atrzSeqNo,asc",
+  });
+
+  const saveMultiMutation = useSaveMultiElaprApln();
+
+  const {
+    rows,
+    visibleRows,
+    editingRowKey,
+    isEditingLocked,
+    addRow,
+    startEdit,
+    updateRow,
+    cancelEdit,
+    commitEdit,
+    markDeleted,
+    reorderRows,
+  } = useAplnRows({
+    elaprTmpltId,
+    serverRows: aplnQuery.data?.content,
+  });
+
+  const sensors = useDndSensors();
+  const isDisabled = !elaprTmpltId;
+  const serverRows = aplnQuery.data?.content ?? [];
+  const canSave = hasUnsavedChanges(rows, serverRows);
+  const pickingRow = pickingRowKey ? rows.find((r) => r.rowKey === pickingRowKey) : undefined;
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    reorderRows(String(active.id), String(over.id));
+  };
+
+  const handleRowChange = (row: ElaprAplnRow, patch: Partial<ElaprAplnRow>) => {
+    updateRow(row.rowKey, patch);
+  };
+
+  const handleRowSave = (row: ElaprAplnRow) => {
+    const fieldError = validateAplnRow(row);
+    if (fieldError) {
+      alert(fieldError);
+      return;
+    }
+
+    commitEdit(row.rowKey);
+  };
+
+  const handleRowDelete = async (row: ElaprAplnRow) => {
+    markDeleted(row.rowKey);
+  };
+
+  const handleSaveAll = async () => {
+    if (!elaprTmpltId) return;
+
+    const rowsError = validateAllRowsForSave(rows, isEditingLocked);
+    if (rowsError) {
+      alert(rowsError);
+      return;
+    }
+
+    const orderError = validateAtrzOrder(rows);
+    if (orderError) {
+      alert(orderError);
+      return;
+    }
+
+    const seqError = validateUniqueSeqNo(rows);
+    if (seqError) {
+      alert(seqError);
+      return;
+    }
+
+    const payload = buildSaveMultiPayload(rows, elaprTmpltId, serverRows);
+    if (payload.length === 0) {
+      alert("저장할 변경 사항이 없습니다.");
+      return;
+    }
+
+    if (!(await confirm("결재선을 저장하시겠습니까?"))) return;
+
+    await saveMultiMutation.mutateAsync({ body: payload, elaprTmpltId });
+    alert("결재선이 저장되었습니다.");
+    await aplnQuery.refetch();
+  };
+
+  const handleReviewerSelect = (reviewer: ReviewerOption) => {
+    if (!pickingRowKey) return;
+    updateRow(pickingRowKey, {
+      aprvrUuid: reviewer.uuid,
+      aprvrNm: reviewer.name,
+    });
+    setPickingRowKey(null);
+  };
+
+  return (
+    <section className="card card-border mx-0 pt-0">
+      <div className="card-header flex flex-wrap items-center justify-between gap-3">
+        <h3 className="text-2xl font-semibold">결재선 관리</h3>
+        <div className="flex flex-wrap items-center gap-3">
+          <Button
+            type="button"
+            color="green"
+            disabled={isDisabled || isEditingLocked}
+            onClick={addRow}
+          >
+            결재선 추가
+          </Button>
+          <Button
+            type="button"
+            disabled={isDisabled || isEditingLocked || !canSave || saveMultiMutation.isPending}
+            onClick={handleSaveAll}
+          >
+            결재선 저장
+          </Button>
+        </div>
+      </div>
+
+      {aplnQuery.isPending && elaprTmpltId ? (
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-[4rem]" />
+          <Skeleton className="h-[16rem]" />
+        </div>
+      ) : !elaprTmpltId ? (
+        <p className="py-8 text-center text-lg text-muted-foreground">
+          상단 목록에서 결재서식을 선택해 주세요.
+        </p>
+      ) : visibleRows.length === 0 ? (
+        <p className="py-8 text-center text-lg text-muted-foreground">
+          등록된 결재선이 없습니다. [결재선 추가]로 결재자를 등록하세요.
+        </p>
+      ) : (
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+          <Table className="w-full">
+            <colgroup>
+              <col width="10%" />
+              <col width="30%" />
+              <col width="10%" />
+              <col width="10%" />
+              <col width="15%" />
+              <col width="15%" />
+              <col width="10%" />
+            </colgroup>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-10" />
+                <TableHead>결재선아이디</TableHead>
+                <TableHead>결재순서</TableHead>
+                <TableHead>결재구분</TableHead>
+                <TableHead>결재자</TableHead>
+                <TableHead>등록일시</TableHead>
+                <TableHead>관리</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <SortableContext
+                items={visibleRows.map((r) => r.rowKey)}
+                strategy={verticalListSortingStrategy}
+              >
+                {visibleRows.map((row, index) => (
+                  <SortableAplnRow
+                    key={row.rowKey}
+                    row={row}
+                    displaySeqNo={index + 1}
+                    isEditing={editingRowKey === row.rowKey}
+                    isLocked={isEditingLocked}
+                    dragDisabled={isEditingLocked || !row.atrzSeComCd}
+                    onStartEdit={() => startEdit(row.rowKey)}
+                    onSave={() => handleRowSave(row)}
+                    onCancel={cancelEdit}
+                    onDelete={() => handleRowDelete(row)}
+                    onChange={(patch) => handleRowChange(row, patch)}
+                    onPickAprvr={() => {
+                      setPickingRowKey(row.rowKey);
+                      setPickerOpen(true);
+                    }}
+                  />
+                ))}
+              </SortableContext>
+            </TableBody>
+          </Table>
+        </DndContext>
+      )}
+
+      <AprvrPickerDialog
+        open={pickerOpen}
+        onOpenChange={setPickerOpen}
+        atrzSeComCd={pickingRow?.atrzSeComCd ?? ""}
+        onSelect={handleReviewerSelect}
+      />
+    </section>
+  );
+}
+
+export { ElaprAplnGrid };
diff --git a/apps/as/src/pages/approval-line-management/ui/elapr-tmplt-form-dialog.tsx b/apps/as/src/pages/approval-line-management/ui/elapr-tmplt-form-dialog.tsx
new file mode 100644
index 000000000..3e7f36de1
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/ui/elapr-tmplt-form-dialog.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+
+import { CodeSelect } from "@/entities/code";
+import type { ElaprTmplt } from "@/entities/elapr";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Textarea,
+} from "@common/components";
+
+export interface ElaprTmpltFormValues {
+  elaprTmpltId?: string;
+  elaprTmpltNm: string;
+  docSeComCd: string;
+  elaprTmpltExpln: string;
+}
+
+interface ElaprTmpltFormDialogProps {
+  mode: "create" | "edit";
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initial?: ElaprTmplt | null;
+  isSubmitting?: boolean;
+  onSubmit: (values: ElaprTmpltFormValues) => void;
+}
+
+function ElaprTmpltFormDialog({
+  mode,
+  open,
+  onOpenChange,
+  initial,
+  isSubmitting,
+  onSubmit,
+}: ElaprTmpltFormDialogProps) {
+  const { register, handleSubmit, reset, getValues, setValue, watch } =
+    useForm<ElaprTmpltFormValues>({
+      defaultValues: {
+        elaprTmpltNm: "",
+        docSeComCd: "",
+        elaprTmpltExpln: "",
+      },
+    });
+
+  const docSeComCd = watch("docSeComCd");
+
+  useEffect(() => {
+    if (!open) return;
+
+    if (mode === "edit" && initial) {
+      reset({
+        elaprTmpltId: initial.elaprTmpltId,
+        elaprTmpltNm: initial.elaprTmpltNm,
+        docSeComCd: initial.docSeComCd ?? "",
+        elaprTmpltExpln: initial.elaprTmpltExpln ?? "",
+      });
+      return;
+    }
+
+    reset({
+      elaprTmpltNm: "",
+      docSeComCd: "",
+      elaprTmpltExpln: "",
+    });
+  }, [open, mode, initial, reset]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[52rem]">
+        <DialogHeader>
+          <DialogTitle>{mode === "create" ? "결재서식 등록" : "결재서식 수정"}</DialogTitle>
+        </DialogHeader>
+        <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
+          {mode === "edit" ? (
+            <div className="space-y-2">
+              <Label htmlFor="elaprTmpltId">전자결재서식아이디</Label>
+              <p className="p-2 text-xl">{getValues("elaprTmpltId")}</p>
+            </div>
+          ) : null}
+          <div className="space-y-2">
+            <Label htmlFor="elaprTmpltNm">결재서식명</Label>
+            <Input id="elaprTmpltNm" {...register("elaprTmpltNm", { required: true })} />
+          </div>
+          <div className="space-y-2">
+            <Label>문서구분</Label>
+            <CodeSelect
+              upCd="ASDOCSECD"
+              value={docSeComCd}
+              onValueChange={(v) => setValue("docSeComCd", v)}
+              placeholder="문서구분 선택"
+              className="w-full"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="elaprTmpltExpln">서식 설명</Label>
+            <Textarea
+              id="elaprTmpltExpln"
+              rows={3}
+              {...register("elaprTmpltExpln")}
+              className="!text-xl"
+            />
+          </div>
+          <DialogFooter>
+            <Button type="button" color="white" onClick={() => onOpenChange(false)}>
+              취소
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {mode === "create" ? "등록" : "저장"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ElaprTmpltFormDialog };
diff --git a/apps/as/src/pages/approval-line-management/ui/elapr-tmplt-list.tsx b/apps/as/src/pages/approval-line-management/ui/elapr-tmplt-list.tsx
new file mode 100644
index 000000000..7955f8b6b
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/ui/elapr-tmplt-list.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
+
+import { useDataTable } from "@/shared/lib";
+import {
+  type ElaprTmplt,
+  useCreateElaprTmplt,
+  useDeleteElaprTmplt,
+  useElaprTmpltPage,
+  useUpdateElaprTmplt,
+} from "@/entities/elapr";
+import { Button } from "@common/components";
+
+import { createTmpltColumns } from "../model/columns";
+
+import { ElaprTmpltFormDialog, type ElaprTmpltFormValues } from "./elapr-tmplt-form-dialog";
+
+interface ElaprTmpltListProps {
+  selectedTmpltId: string | null;
+  onSelectTmplt: (tmplt: ElaprTmplt | null) => void;
+}
+
+function ElaprTmpltList({ selectedTmpltId, onSelectTmplt }: ElaprTmpltListProps) {
+  const { confirm } = useConfirm();
+  const [dialogMode, setDialogMode] = useState<"create" | "edit" | null>(null);
+  const [editingTmplt, setEditingTmplt] = useState<ElaprTmplt | null>(null);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  const tmpltQuery = useElaprTmpltPage({
+    page: 0,
+    size: 50,
+    sort: "regDt,desc",
+  });
+
+  const createMutation = useCreateElaprTmplt();
+  const updateMutation = useUpdateElaprTmplt();
+  const deleteMutation = useDeleteElaprTmplt();
+
+  const columns = useMemo(
+    () =>
+      createTmpltColumns({
+        onEdit: (row) => {
+          setEditingTmplt(row);
+          setDialogMode("edit");
+        },
+        onDelete: async (row) => {
+          if (!(await confirm("선택한 결재서식을 삭제하시겠습니까?"))) return;
+          await deleteMutation.mutateAsync(row.elaprTmpltId);
+          if (selectedTmpltId === row.elaprTmpltId) {
+            onSelectTmplt(null);
+          }
+        },
+      }),
+    [confirm, deleteMutation, onSelectTmplt, selectedTmpltId],
+  );
+
+  const { tableComponent } = useDataTable({
+    query: tmpltQuery,
+    tableOptions: {
+      columns,
+      state: { rowSelection },
+      enableRowSelection: true,
+      enableMultiRowSelection: false,
+      getRowId: (row) => row.elaprTmpltId,
+      onRowSelectionChange: (updater) => {
+        const next = typeof updater === "function" ? updater(rowSelection) : updater;
+        setRowSelection(next);
+        const selectedId = Object.keys(next)[0];
+        if (!selectedId) {
+          onSelectTmplt(null);
+          return;
+        }
+        const selected = tmpltQuery.data?.content.find((t) => t.elaprTmpltId === selectedId);
+        onSelectTmplt(selected ?? null);
+      },
+      getCoreRowModel: getCoreRowModel(),
+    },
+    dataTableOptions: {
+      onRowClick: (row) => {
+        setRowSelection({ [row.elaprTmpltId]: true });
+        onSelectTmplt(row);
+      },
+    },
+  });
+
+  const handleFormSubmit = async (values: ElaprTmpltFormValues) => {
+    if (dialogMode === "create") {
+      const created = await createMutation.mutateAsync({
+        elaprTmpltNm: values.elaprTmpltNm,
+        docSeComCd: values.docSeComCd || undefined,
+        elaprTmpltExpln: values.elaprTmpltExpln || undefined,
+      });
+      onSelectTmplt(created);
+      setRowSelection({ [created.elaprTmpltId]: true });
+    } else if (dialogMode === "edit" && editingTmplt) {
+      await updateMutation.mutateAsync({
+        elaprTmpltId: editingTmplt.elaprTmpltId,
+        body: {
+          elaprTmpltNm: values.elaprTmpltNm,
+          docSeComCd: values.docSeComCd || undefined,
+          elaprTmpltExpln: values.elaprTmpltExpln || undefined,
+        },
+      });
+    }
+    setDialogMode(null);
+    setEditingTmplt(null);
+  };
+
+  return (
+    <section className="card card-border mx-0 bg-background pt-0">
+      <div className="card-header flex items-center justify-between">
+        <h3 className="text-2xl font-semibold">전자결재선 관리 목록</h3>
+        <Button type="button" color="green" onClick={() => setDialogMode("create")}>
+          서식 등록
+        </Button>
+      </div>
+      {tableComponent}
+      {dialogMode && (
+        <ElaprTmpltFormDialog
+          mode={dialogMode}
+          open={Boolean(dialogMode)}
+          onOpenChange={(open) => {
+            if (!open) {
+              setDialogMode(null);
+              setEditingTmplt(null);
+            }
+          }}
+          initial={dialogMode === "edit" ? editingTmplt : null}
+          isSubmitting={createMutation.isPending || updateMutation.isPending}
+          onSubmit={handleFormSubmit}
+        />
+      )}
+    </section>
+  );
+}
+
+export { ElaprTmpltList };
diff --git a/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx b/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx
new file mode 100644
index 000000000..fcb315bdb
--- /dev/null
+++ b/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Equal } from "lucide-react";
+
+import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
+import { Button, TableCell, TableRow } from "@common/components";
+
+import type { ElaprAplnRow } from "../model/apln-row-types";
+
+interface SortableAplnRowProps {
+  row: ElaprAplnRow;
+  displaySeqNo: number;
+  isEditing: boolean;
+  isLocked: boolean;
+  dragDisabled: boolean;
+  onStartEdit: () => void;
+  onSave: () => void;
+  onCancel: () => void;
+  onDelete: () => void;
+  onChange: (patch: Partial<ElaprAplnRow>) => void;
+  onPickAprvr: () => void;
+}
+
+function SortableAplnRow({
+  row,
+  displaySeqNo,
+  isEditing,
+  isLocked,
+  dragDisabled,
+  onStartEdit,
+  onSave,
+  onCancel,
+  onDelete,
+  onChange,
+  onPickAprvr,
+}: SortableAplnRowProps) {
+  const { data: atrzSeCodes } = useCodeList("ATRZSE");
+
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: row.rowKey,
+    disabled: dragDisabled,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.6 : 1,
+  };
+
+  const rowDisabled = isLocked && !isEditing;
+  const atrzSeLabel = row.atrzSeComNm || findCodeLabel(atrzSeCodes, row.atrzSeComCd);
+
+  return (
+    <TableRow ref={setNodeRef} style={style} className={isEditing ? "bg-accent/30" : undefined}>
+      <TableCell align="center" className="w-10">
+        <Button
+          type="button"
+          size="icon"
+          className="cursor-grab !bg-transparent text-muted-foreground disabled:cursor-not-allowed disabled:opacity-40"
+          disabled={dragDisabled}
+          {...attributes}
+          {...listeners}
+          aria-label="순서 변경"
+        >
+          <Equal className="!size-6" />
+        </Button>
+      </TableCell>
+      <TableCell align="center">{row.isNew ? "-" : (row.aplnId ?? "-")}</TableCell>
+      <TableCell align="center">{displaySeqNo}</TableCell>
+      <TableCell align="center">
+        {isEditing ? (
+          <CodeSelect
+            upCd="ATRZSE"
+            className="min-w-[120px]"
+            value={row.atrzSeComCd ?? ""}
+            onValueChange={(v) =>
+              onChange({
+                atrzSeComCd: v,
+                atrzSeComNm: findCodeLabel(atrzSeCodes, v),
+              })
+            }
+            placeholder="결재구분"
+          />
+        ) : (
+          atrzSeLabel || "-"
+        )}
+      </TableCell>
+      <TableCell align="center">
+        <div className="flex items-center justify-center gap-4">
+          <span>{row.aprvrNm || row.aprvrUuid || "-"}</span>
+          {isEditing && (
+            <Button type="button" size="sm" onClick={onPickAprvr}>
+              선택
+            </Button>
+          )}
+        </div>
+      </TableCell>
+      <TableCell align="center">{row.isNew ? "-" : (row.regDt ?? "-")}</TableCell>
+      <TableCell align="center">
+        <div className="flex justify-center gap-2">
+          {isEditing ? (
+            <>
+              <Button type="button" size="sm" onClick={onSave}>
+                확인
+              </Button>
+              <Button type="button" size="sm" color="white" onClick={onCancel}>
+                취소
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                type="button"
+                size="sm"
+                color="white"
+                disabled={rowDisabled}
+                onClick={onStartEdit}
+              >
+                수정
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                color="gray"
+                disabled={rowDisabled}
+                onClick={onDelete}
+              >
+                삭제
+              </Button>
+            </>
+          )}
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export { SortableAplnRow };
diff --git a/apps/as/src/pages/auth/login/index.ts b/apps/as/src/pages/auth/login/index.ts
new file mode 100644
index 000000000..2093c3d8d
--- /dev/null
+++ b/apps/as/src/pages/auth/login/index.ts
@@ -0,0 +1 @@
+export { LoginPage } from "./ui/login-page";
diff --git a/apps/as/src/pages/auth/login/ui/login-page.tsx b/apps/as/src/pages/auth/login/ui/login-page.tsx
new file mode 100644
index 000000000..be1c65e13
--- /dev/null
+++ b/apps/as/src/pages/auth/login/ui/login-page.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+import { authService } from "@/entities/auth";
+import { images } from "@common/assets";
+
+import "./login.css";
+
+function LoginPage() {
+  const [errorMessage, setErrorMessage] = useState<string>("");
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setErrorMessage(""); // 에러 메시지 초기화
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const userId = formData.get("id") as string;
+    const password = formData.get("password") as string;
+
+    try {
+      await authService.login({ userId, password });
+      window.location.href = "/";
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "로그인에 실패했습니다.";
+      setErrorMessage(message);
+    }
+  };
+
+  return (
+    <div className="login fx">
+      <div className="left_box fx">
+        <div className="text">
+          <h1>
+            유역하수도통합플랫폼
+            <br />
+            <span>디지털 행정지원 시스템</span>
+          </h1>
+          <p>유역하수도통합플랫폼 디지털행정지원 시스템에 오신 것을 환영합니다.</p>
+        </div>
+        <div className="img">
+          <Image src={images.logo} width={229} height={46} alt="logo" />
+        </div>
+      </div>
+      <form id="loginForm" name="loginForm" method="post" onSubmit={handleSubmit}>
+        <div className="login_box fx">
+          <ul className="fx">
+            <li>
+              <h2>ID</h2>
+              <div className="input_st st1">
+                <i className="diveicon di-account-box" />
+                <input
+                  type="text"
+                  className="id"
+                  title="아이디를 입력하세요."
+                  id="id"
+                  name="id"
+                  maxLength={12}
+                />
+              </div>
+            </li>
+            <li>
+              <h2>PASSWORD</h2>
+              <div className="input_st st2">
+                <i className="diveicon di-key" />
+                <input
+                  type="password"
+                  className="input_style"
+                  maxLength={25}
+                  title="비밀번호를 입력하세요."
+                  id="password"
+                  name="password"
+                />
+              </div>
+            </li>
+          </ul>
+          <div className="bottom_box fx">
+            <div className="checks fx">
+              <input type="checkbox" name="checkId" title="로그인ID 저장여부" id="checkId" />
+              <label htmlFor="checkId">아이디저장</label>
+            </div>
+            {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
+          </div>
+          {errorMessage && (
+            <div className="error_message">
+              <span>{errorMessage}</span>
+            </div>
+          )}
+          <button type="submit" className="login_btn fx">
+            <span>LOGIN</span>
+          </button>
+          <div className="footer">
+            <div className="copy fx">
+              <p>copyright © 2023 KECO. All rights reserved.</p>
+            </div>
+            <div className="fot_btn fx">
+              <a href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do" target="_blank">
+                개인정보처리방침
+              </a>
+              <a href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do" target="_blank">
+                저작권정책안내
+              </a>
+              <a href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do" target="_blank">
+                이메일무단수집거부
+              </a>
+            </div>
+            <p className="addr fx">
+              <span>주소 : (22689) 인천광역시 서구 환경로 42(경서동 종합환경연구단지)</span>
+              <span>전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723, 3722</span>
+              <span>팩스 :032-590-3729</span>
+            </p>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export { LoginPage };
diff --git a/apps/as/src/pages/auth/login/ui/login.css b/apps/as/src/pages/auth/login/ui/login.css
new file mode 100755
index 000000000..e8029fdb1
--- /dev/null
+++ b/apps/as/src/pages/auth/login/ui/login.css
@@ -0,0 +1,325 @@
+/**
+* OLYM Cascading Style Sheets
+* File Name : login.css
+* Description : 로그인 스타일시트
+* Author : Web business Team / Choi Hyun Mi
+* Email : desingtj@olym.co.kr
+* Date : 2023.07.20
+* Update : 2023.07.26
+* Copyright(c) 2023 OLYM Communications. All Rights Reserved.
+*/
+html,
+body {
+  background: #fff;
+}
+.fx {
+  display: flex;
+  -ms-display: flex;
+  -webkit-display: flex;
+  box-sizing: border-box;
+}
+.login {
+  width: 100%;
+  height: 100vh;
+}
+.login .left_box {
+  width: 100%;
+  background: url(../../../../../public/images/bg_login.jpg) no-repeat
+    center/cover;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 7% 5% 5% 5%;
+}
+.login .left_box .text h1 {
+  font-size: 53px;
+  color: #fff;
+}
+.login .left_box .text h1 span {
+  font-weight: 800;
+}
+.login .left_box .text p {
+  margin-top: 40px;
+  font-size: 18px;
+  color: #fff;
+}
+.login .login_box {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4% 12% 4% 6%;
+}
+.login .login_box > ul {
+  flex-direction: column;
+  gap: 40px;
+}
+.login .login_box > ul > li h2 {
+  font-size: 22px;
+  font-weight: 600;
+  color: #2640a5;
+  margin-bottom: 14px;
+}
+.login .login_box > ul > li .input_st {
+  position: relative;
+}
+.login .login_box > ul > li .input_st .diveicon {
+  position: absolute;
+  top: 50%;
+  left: 28px;
+  transform: translateY(-50%);
+  font-family: "Xeicon";
+  font-size: 25px;
+  color: #003288;
+}
+.login .login_box > ul > li input {
+  width: 100%;
+  padding: 20px 20px 20px 70px;
+  background: #f7f7f7;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 5px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #000;
+  height: auto;
+}
+.login .login_box > ul > li input:focus {
+  outline: 1px solid #3c5fe5;
+}
+.login .login_box > ul > li input::placeholder {
+  color: #afabab;
+  font-weight: 500;
+}
+.login .login_box .bottom_box {
+  justify-content: space-between;
+  gap: 20px;
+  padding: 50px 0 45px 0;
+}
+.login .login_box .bottom_box .checks {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.login .login_box .bottom_box .checks input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+}
+.login .login_box .bottom_box .checks label {
+  font-size: 14px;
+}
+.login .login_box .bottom_box .pw_message {
+  align-items: center;
+  gap: 5px;
+  color: #636363;
+  font-weight: 500;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 5px;
+}
+.login .login_box .bottom_box .pw_message i {
+  color: #327af5;
+  font-size: 20px;
+}
+.login .login_box .error_message {
+  margin: 20px 0;
+  padding: 12px 20px;
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 5px;
+  color: #c33;
+  font-size: 14px;
+  text-align: center;
+}
+.login .login_box .error_message span {
+  display: block;
+  font-weight: 500;
+}
+.login .login_box .login_btn {
+  position: relative;
+  border-radius: 5px;
+  padding: 24px 15px;
+  background: linear-gradient(
+    to left,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  color: #fff;
+  cursor: pointer;
+}
+.login .login_box .login_btn span {
+  font-family: "Montserrat";
+  font-size: 19px;
+  font-weight: 700;
+  position: relative;
+}
+.login .login_box .login_btn i {
+  font-size: 22px;
+  transform: translateY(-2px);
+}
+.login .login_box .login_btn:before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: linear-gradient(
+    to right,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  transition: opacity 0.5s;
+}
+.login .login_box .login_btn:hover::before {
+  opacity: 1;
+}
+.login .footer .copy {
+  margin-top: 36px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 3%;
+}
+.login .footer .copy p {
+  font-size: 13px;
+  color: #d4d4d4;
+  width: 44%;
+  text-align: center;
+}
+.login .footer .copy::before,
+.login .login_box .copy::after {
+  content: "";
+  width: 20%;
+  height: 1px;
+  background: #d4d4d4;
+}
+.login .footer .fot_btn {
+  gap: 20px;
+  margin: 30px 0 10px 0;
+}
+.login .footer .fot_btn a {
+  color: #333;
+  font-weight: 700;
+  font-size: 13px;
+}
+.login .footer .fot_btn a:hover {
+  color: #003288;
+}
+.login .footer .addr {
+  color: #666;
+  font-size: 13px;
+  gap: 3px 20px;
+  flex-wrap: wrap;
+}
+/* 비밀번호 변경 팝업창 */
+.login .modal .modal_container {
+  width: 750px;
+}
+.login .pw_desc {
+  padding: 10px 10px 30px 10px;
+  color: #666;
+}
+.login .pw_desc p {
+  font-size: 1.25rem;
+  color: #000;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+.login .pw_desc span {
+  color: #f60;
+  font-weight: 700;
+}
+.login .modal .form_write {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  padding: 20px 50px;
+}
+@media (max-width: 1024px) {
+  .login {
+    flex-direction: column;
+    height: auto;
+  }
+  .login .left_box {
+    padding: 30px;
+    flex-direction: column-reverse;
+    gap: 20px;
+  }
+  .login .left_box .text h1 {
+    font-size: 30px;
+    line-height: 1.2em;
+  }
+  .login .left_box .text p {
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .login .left_box .img img {
+    height: 40px;
+  }
+  .login .login_box {
+    padding: 30px;
+  }
+  .login .login_box > ul {
+    gap: 20px;
+  }
+  .login .login_box > ul > li h2 {
+    margin-bottom: 7px;
+  }
+  .login .login_box > ul > li .input_st::after {
+    left: 15px;
+    font-size: 20px;
+  }
+  .login .login_box > ul > li input {
+    padding: 15px 10px 15px 50px;
+    font-size: 16px;
+  }
+  .login .login_box .bottom_box {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 30px 0;
+  }
+  .login .login_box .bottom_box .id_save label {
+    font-size: 14px;
+  }
+  .login .login_box .login_btn {
+    padding: 15px;
+  }
+  .login .login_box .login_btn span {
+    font-size: 16px;
+  }
+  .login .login_box .login_btn i {
+    font-size: 18px;
+    transform: translateY(-1px);
+  }
+  .login .login_box .copy p {
+    width: 100%;
+  }
+  .login .login_box .copy::before,
+  .login .login_box .copy::after {
+    display: none;
+  }
+  .login .footer .addr {
+    font-size: 11px;
+    gap: 3px 10px;
+  }
+  .login .modal .modal_container {
+    width: 90%;
+  }
+  .login .pw_desc {
+    padding: 0 0 20px 0;
+  }
+  .login .modal .form_write {
+    padding: 10px;
+  }
+}
+/* // login */
diff --git a/apps/as/src/pages/checklist-management/index.ts b/apps/as/src/pages/checklist-management/index.ts
new file mode 100644
index 000000000..fbd074ed9
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/index.ts
@@ -0,0 +1 @@
+export { ChecklistManagementPage } from "./ui/checklist-management-page";
diff --git a/apps/as/src/pages/checklist-management/model/build-rvw-display-rows.ts b/apps/as/src/pages/checklist-management/model/build-rvw-display-rows.ts
new file mode 100644
index 000000000..f82fc9a96
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/model/build-rvw-display-rows.ts
@@ -0,0 +1,90 @@
+import type { CklstRvwRow } from "./cklst-rvw-row-types";
+
+export const MAX_RVW_CN_LV_NO = 3;
+
+export interface CklstRvwDisplayRow {
+  row: CklstRvwRow;
+  depth: number;
+}
+
+export function formatRvwCnLvNo(lvNo?: number): string {
+  if (lvNo === 3) return "3단계";
+  if (lvNo === 2) return "2단계";
+  return "1단계";
+}
+
+export function canAddChildRow(lvNo?: number): boolean {
+  return (lvNo ?? 1) < MAX_RVW_CN_LV_NO;
+}
+
+const TREE_BRANCH_ENTITY = {
+  horizontal: "&boxh;",
+  vertical: "&boxv;",
+  branch: "&boxvr;",
+} as const;
+
+const TREE_BRANCH_ENTITY_CHARS: Record<string, string> = {
+  [TREE_BRANCH_ENTITY.horizontal]: "\u2500",
+  [TREE_BRANCH_ENTITY.vertical]: "\u2502",
+  [TREE_BRANCH_ENTITY.branch]: "\u251C",
+};
+
+function decodeTreeBranchEntityCodes(value: string): string {
+  return Object.entries(TREE_BRANCH_ENTITY_CHARS).reduce(
+    (text, [entity, char]) => text.replaceAll(entity, char),
+    value,
+  );
+}
+
+export function formatTreeBranchPrefix(depth: number): string {
+  if (depth === 1)
+    return decodeTreeBranchEntityCodes(
+      `${TREE_BRANCH_ENTITY.branch}${TREE_BRANCH_ENTITY.horizontal}`,
+    );
+  if (depth === 2) {
+    return decodeTreeBranchEntityCodes(
+      `${TREE_BRANCH_ENTITY.vertical} ${TREE_BRANCH_ENTITY.branch}${TREE_BRANCH_ENTITY.horizontal}`,
+    );
+  }
+  return "";
+}
+
+function compareSortSeq(a: CklstRvwRow, b: CklstRvwRow): number {
+  return (a.sortSeq ?? 0) - (b.sortSeq ?? 0);
+}
+
+export function buildRvwDisplayRows(rows: CklstRvwRow[]): CklstRvwDisplayRow[] {
+  const result: CklstRvwDisplayRow[] = [];
+
+  const roots = rows
+    .filter((row) => (row.rvwCnLvNo ?? 1) === 1 && row.upCklstRvwSn == null)
+    .sort(compareSortSeq);
+
+  function appendSubtree(parent: CklstRvwRow, depth: number) {
+    const children = rows
+      .filter((row) => row.upCklstRvwSn != null && row.upCklstRvwSn === parent.cklstRvwSn)
+      .sort(compareSortSeq);
+
+    for (const child of children) {
+      result.push({ row: child, depth });
+      if (depth < MAX_RVW_CN_LV_NO - 1) {
+        appendSubtree(child, depth + 1);
+      }
+    }
+  }
+
+  for (const root of roots) {
+    result.push({ row: root, depth: 0 });
+    appendSubtree(root, 1);
+  }
+
+  const orphans = rows.filter(
+    (row) => !result.some((display) => display.row.rowKey === row.rowKey),
+  );
+
+  for (const orphan of orphans.sort(compareSortSeq)) {
+    result.push({ row: orphan, depth: Math.max(0, (orphan.rvwCnLvNo ?? 1) - 1) });
+  }
+
+  return result;
+}
diff --git a/apps/as/src/pages/checklist-management/model/cklst-artcl-columns.tsx b/apps/as/src/pages/checklist-management/model/cklst-artcl-columns.tsx
new file mode 100644
index 000000000..cc519945e
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/model/cklst-artcl-columns.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { createColumnHelper } from "@tanstack/react-table";
+
+import type { CklstArtcl } from "@/entities/cklst";
+import { Button } from "@common/components";
+
+const columnHelper = createColumnHelper<CklstArtcl>();
+
+interface CreateCklstArtclColumnsOptions {
+  onEdit: (row: CklstArtcl) => void;
+  onDelete: (row: CklstArtcl) => void;
+}
+
+export function createCklstArtclColumns({ onEdit, onDelete }: CreateCklstArtclColumnsOptions) {
+  return [
+    columnHelper.accessor("cklstArtclSn", {
+      header: "점검항목코드",
+      meta: { align: "center" },
+    }),
+    columnHelper.accessor("cklstArtclNm", {
+      header: "점검항목명",
+      cell: ({ getValue }) => getValue() ?? "-",
+    }),
+    columnHelper.accessor("useYn", {
+      header: "사용여부",
+      cell: ({ getValue }) => {
+        const value = getValue();
+        return value === "Y" ? "예" : value === "N" ? "아니오" : "-";
+      },
+    }),
+    columnHelper.accessor("regDt", {
+      header: "등록일시",
+      cell: ({ getValue }) => getValue() ?? "-",
+    }),
+    columnHelper.display({
+      id: "actions",
+      header: "관리",
+      cell: ({ row }) => (
+        <div className="flex justify-center gap-2">
+          <Button type="button" size="sm" color="white" onClick={() => onEdit(row.original)}>
+            관리
+          </Button>
+          <Button type="button" size="sm" color="gray" onClick={() => onDelete(row.original)}>
+            삭제
+          </Button>
+        </div>
+      ),
+    }),
+  ];
+}
diff --git a/apps/as/src/pages/checklist-management/model/cklst-mng-columns.tsx b/apps/as/src/pages/checklist-management/model/cklst-mng-columns.tsx
new file mode 100644
index 000000000..fd74d47ce
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/model/cklst-mng-columns.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { createColumnHelper } from "@tanstack/react-table";
+
+import type { CklstMng } from "@/entities/cklst";
+import { Button } from "@common/components";
+
+type CklstMngRow = CklstMng & {
+  docSeComNm?: string;
+  taskSeCdNm?: string;
+};
+
+const columnHelper = createColumnHelper<CklstMngRow>();
+
+interface CreateCklstMngColumnsOptions {
+  onEdit: (row: CklstMngRow) => void;
+  onDelete: (row: CklstMngRow) => void;
+}
+
+export function createCklstMngColumns({ onEdit, onDelete }: CreateCklstMngColumnsOptions) {
+  return [
+    columnHelper.accessor("cklstSn", {
+      header: "점검표일련번호",
+      meta: { align: "center" },
+    }),
+    columnHelper.accessor("cklstNm", {
+      header: "점검표명",
+      meta: { align: "left" },
+    }),
+    columnHelper.accessor("docSeComNm", {
+      header: "문서구분",
+      cell: ({ getValue, row }) => getValue() ?? row.original.docSeComCd ?? "-",
+    }),
+    columnHelper.accessor("taskSeCdNm", {
+      header: "업무구분",
+      cell: ({ getValue, row }) => getValue() ?? row.original.taskSeComCd ?? "-",
+    }),
+    columnHelper.accessor("useYn", {
+      header: "사용여부",
+      cell: ({ getValue }) => {
+        const value = getValue();
+        return value === "Y" ? "예" : value === "N" ? "아니오" : "-";
+      },
+    }),
+    columnHelper.accessor("regDt", {
+      header: "등록일시",
+      cell: ({ getValue }) => getValue() ?? "-",
+    }),
+    columnHelper.display({
+      id: "actions",
+      header: "관리",
+      cell: ({ row }) => (
+        <div className="flex justify-center gap-2" onClick={(e) => e.stopPropagation()}>
+          <Button type="button" size="sm" color="white" onClick={() => onEdit(row.original)}>
+            관리
+          </Button>
+          <Button type="button" size="sm" color="gray" onClick={() => onDelete(row.original)}>
+            삭제
+          </Button>
+        </div>
+      ),
+    }),
+  ];
+}
diff --git a/apps/as/src/pages/checklist-management/model/cklst-rvw-row-types.ts b/apps/as/src/pages/checklist-management/model/cklst-rvw-row-types.ts
new file mode 100644
index 000000000..d77ecc200
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/model/cklst-rvw-row-types.ts
@@ -0,0 +1,8 @@
+import type { CklstRvw } from "@/entities/cklst";
+
+export interface CklstRvwRow extends Omit<CklstRvw, "cklstRvwSn"> {
+  cklstRvwSn?: number;
+  rowKey: string;
+  isNew: boolean;
+  isDirty: boolean;
+}
diff --git a/apps/as/src/pages/checklist-management/ui/checklist-management-page.tsx b/apps/as/src/pages/checklist-management/ui/checklist-management-page.tsx
new file mode 100644
index 000000000..d49d7ed6a
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/ui/checklist-management-page.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+
+import type { CklstMng } from "@/entities/cklst";
+
+import { CklstArtclList } from "./cklst-artcl-list";
+import { CklstMngList } from "./cklst-mng-list";
+import { CklstRvwGrid } from "./cklst-rvw-grid";
+
+function ChecklistManagementPage() {
+  const [selectedCklst, setSelectedCklst] = useState<CklstMng | null>(null);
+
+  return (
+    <div className="space-y-6 px-[1.8rem] pb-6">
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
+        <CklstMngList
+          selectedCklstSn={selectedCklst?.cklstSn ?? null}
+          onSelectCklst={setSelectedCklst}
+        />
+        <CklstArtclList cklstSn={selectedCklst?.cklstSn} />
+      </div>
+      <CklstRvwGrid selectedCklst={selectedCklst} />
+    </div>
+  );
+}
+
+export { ChecklistManagementPage };
diff --git a/apps/as/src/pages/checklist-management/ui/cklst-artcl-form-dialog.tsx b/apps/as/src/pages/checklist-management/ui/cklst-artcl-form-dialog.tsx
new file mode 100644
index 000000000..0ce48cd1a
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/ui/cklst-artcl-form-dialog.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+
+import type { CklstArtcl } from "@/entities/cklst";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+
+export interface CklstArtclFormValues {
+  cklstArtclNm: string;
+  useYn: "Y" | "N";
+}
+
+interface CklstArtclFormDialogProps {
+  mode: "create" | "edit";
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initial?: CklstArtcl | null;
+  isSubmitting?: boolean;
+  onSubmit: (values: CklstArtclFormValues) => void;
+}
+
+function CklstArtclFormDialog({
+  mode,
+  open,
+  onOpenChange,
+  initial,
+  isSubmitting,
+  onSubmit,
+}: CklstArtclFormDialogProps) {
+  const { register, handleSubmit, reset, setValue, watch } = useForm<CklstArtclFormValues>({
+    defaultValues: {
+      cklstArtclNm: "",
+      useYn: "Y",
+    },
+  });
+
+  const useYn = watch("useYn");
+
+  useEffect(() => {
+    if (!open) return;
+
+    if (mode === "edit" && initial) {
+      reset({
+        cklstArtclNm: initial.cklstArtclNm ?? "",
+        useYn: initial.useYn ?? "Y",
+      });
+      return;
+    }
+
+    reset({
+      cklstArtclNm: "",
+      useYn: "Y",
+    });
+  }, [open, mode, initial, reset]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[40rem]">
+        <DialogHeader>
+          <DialogTitle>{mode === "create" ? "점검항목 추가" : "점검항목 수정"}</DialogTitle>
+        </DialogHeader>
+        <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
+          <div className="space-y-2">
+            <Label htmlFor="cklstArtclNm">점검항목명</Label>
+            <Input
+              id="cklstArtclNm"
+              placeholder="예: 법령검토"
+              {...register("cklstArtclNm", { required: true })}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>사용여부</Label>
+            <Select value={useYn} onValueChange={(v) => setValue("useYn", v as "Y" | "N")}>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="사용여부" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="Y">예</SelectItem>
+                <SelectItem value="N">아니오</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <DialogFooter>
+            <Button type="button" color="white" onClick={() => onOpenChange(false)}>
+              취소
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              저장
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { CklstArtclFormDialog };
diff --git a/apps/as/src/pages/checklist-management/ui/cklst-artcl-list.tsx b/apps/as/src/pages/checklist-management/ui/cklst-artcl-list.tsx
new file mode 100644
index 000000000..480ab9508
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/ui/cklst-artcl-list.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+
+import { matchQueryStatus } from "@/shared/lib";
+import { NoData } from "@/shared/ui/no-data";
+import {
+  type CklstArtcl,
+  useCklstArtclList,
+  useCreateCklstArtcl,
+  useDeleteCklstArtcl,
+  useUpdateCklstArtcl,
+} from "@/entities/cklst";
+import { Button, DataTable, Skeleton } from "@common/components";
+
+import { createCklstArtclColumns } from "../model/cklst-artcl-columns";
+
+import { CklstArtclFormDialog, type CklstArtclFormValues } from "./cklst-artcl-form-dialog";
+
+interface CklstArtclListProps {
+  cklstSn?: number;
+}
+
+function CklstArtclList({ cklstSn }: CklstArtclListProps) {
+  const { confirm } = useConfirm();
+  const [dialogMode, setDialogMode] = useState<"create" | "edit" | null>(null);
+  const [editingArtcl, setEditingArtcl] = useState<CklstArtcl | null>(null);
+
+  const artclQuery = useCklstArtclList(cklstSn);
+  const createMutation = useCreateCklstArtcl();
+  const updateMutation = useUpdateCklstArtcl();
+  const deleteMutation = useDeleteCklstArtcl();
+
+  const columns = useMemo(
+    () =>
+      createCklstArtclColumns({
+        onEdit: (row) => {
+          setEditingArtcl(row);
+          setDialogMode("edit");
+        },
+        onDelete: async (row) => {
+          if (!(await confirm("선택한 점검항목을 삭제하시겠습니까?"))) return;
+          await deleteMutation.mutateAsync({
+            cklstArtclSn: row.cklstArtclSn,
+            cklstSn: row.cklstSn,
+          });
+        },
+      }),
+    [confirm, deleteMutation],
+  );
+
+  const table = useReactTable({
+    data: artclQuery.data ?? [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => `${row.cklstArtclSn}-${row.cklstSn}`,
+  });
+
+  const tableComponent = matchQueryStatus(artclQuery, {
+    Pending: (
+      <div className="flex flex-col gap-2">
+        <Skeleton className="h-[4rem]" />
+        <Skeleton className="h-[12rem]" />
+      </div>
+    ),
+    Empty: <NoData />,
+    Success: () => <DataTable table={table} />,
+  });
+
+  const handleFormSubmit = async (values: CklstArtclFormValues) => {
+    if (!cklstSn) return;
+
+    if (dialogMode === "create") {
+      await createMutation.mutateAsync({
+        cklstSn,
+        cklstArtclNm: values.cklstArtclNm,
+        useYn: values.useYn,
+      });
+    } else if (dialogMode === "edit" && editingArtcl) {
+      await updateMutation.mutateAsync({
+        cklstArtclSn: editingArtcl.cklstArtclSn,
+        cklstSn: editingArtcl.cklstSn,
+        body: {
+          cklstArtclNm: values.cklstArtclNm,
+          useYn: values.useYn,
+        },
+      });
+    }
+
+    setDialogMode(null);
+    setEditingArtcl(null);
+  };
+
+  const isDisabled = !cklstSn;
+
+  return (
+    <section className="card card-border mx-0 bg-background pt-0">
+      <div className="card-header flex items-center justify-between">
+        <h3 className="text-2xl font-semibold">점검항목 관리</h3>
+        <Button
+          type="button"
+          color="green"
+          disabled={isDisabled}
+          onClick={() => setDialogMode("create")}
+        >
+          점검항목 추가
+        </Button>
+      </div>
+      {isDisabled ? (
+        <p className="py-8 text-center text-lg text-muted-foreground">
+          점검표를 선택하면 점검항목을 관리할 수 있습니다.
+        </p>
+      ) : (
+        tableComponent
+      )}
+      {dialogMode && (
+        <CklstArtclFormDialog
+          mode={dialogMode}
+          open={Boolean(dialogMode)}
+          onOpenChange={(open) => {
+            if (!open) {
+              setDialogMode(null);
+              setEditingArtcl(null);
+            }
+          }}
+          initial={dialogMode === "edit" ? editingArtcl : null}
+          isSubmitting={createMutation.isPending || updateMutation.isPending}
+          onSubmit={handleFormSubmit}
+        />
+      )}
+    </section>
+  );
+}
+
+export { CklstArtclList };
diff --git a/apps/as/src/pages/checklist-management/ui/cklst-mng-form-dialog.tsx b/apps/as/src/pages/checklist-management/ui/cklst-mng-form-dialog.tsx
new file mode 100644
index 000000000..8ff919256
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/ui/cklst-mng-form-dialog.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+
+import type { CklstMng } from "@/entities/cklst";
+import { CodeSelect } from "@/entities/code";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+
+export interface CklstMngFormValues {
+  cklstNm: string;
+  docSeComCd: string;
+  taskSeComCd: string;
+  useYn: "Y" | "N";
+}
+
+interface CklstMngFormDialogProps {
+  mode: "create" | "edit";
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initial?: CklstMng | null;
+  isSubmitting?: boolean;
+  onSubmit: (values: CklstMngFormValues) => void;
+}
+
+function CklstMngFormDialog({
+  mode,
+  open,
+  onOpenChange,
+  initial,
+  isSubmitting,
+  onSubmit,
+}: CklstMngFormDialogProps) {
+  const { register, handleSubmit, reset, setValue, watch } = useForm<CklstMngFormValues>({
+    defaultValues: {
+      cklstNm: "",
+      docSeComCd: "",
+      taskSeComCd: "",
+      useYn: "Y",
+    },
+  });
+
+  const docSeComCd = watch("docSeComCd");
+  const useYn = watch("useYn");
+
+  useEffect(() => {
+    if (!open) return;
+
+    if (mode === "edit" && initial) {
+      reset({
+        cklstNm: initial.cklstNm,
+        docSeComCd: initial.docSeComCd ?? "",
+        taskSeComCd: initial.taskSeComCd,
+        useYn: initial.useYn ?? "Y",
+      });
+      return;
+    }
+
+    reset({
+      cklstNm: "",
+      docSeComCd: "",
+      taskSeComCd: "",
+      useYn: "Y",
+    });
+  }, [open, mode, initial, reset]);
+
+  useEffect(() => {
+    if (mode === "create" && docSeComCd) {
+      setValue("taskSeComCd", "");
+    }
+  }, [docSeComCd, mode, setValue]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[52rem]">
+        <DialogHeader>
+          <DialogTitle>{mode === "create" ? "점검표 추가" : "점검표 수정"}</DialogTitle>
+        </DialogHeader>
+        <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
+          <div className="space-y-2">
+            <Label htmlFor="cklstNm">점검표명</Label>
+            <Input
+              id="cklstNm"
+              placeholder="점검표명 입력"
+              {...register("cklstNm", { required: true })}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>문서구분</Label>
+            <CodeSelect
+              upCd="ASDOCSECD"
+              value={docSeComCd}
+              onValueChange={(v) => setValue("docSeComCd", v)}
+              placeholder="문서구분 선택"
+              className="w-full"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>업무구분</Label>
+            <CodeSelect
+              upCd={docSeComCd || "ASDOCSECD"}
+              value={watch("taskSeComCd")}
+              onValueChange={(v) => setValue("taskSeComCd", v)}
+              placeholder="업무구분 선택"
+              className="w-full"
+              disabled={!docSeComCd}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>사용여부</Label>
+            <Select value={useYn} onValueChange={(v) => setValue("useYn", v as "Y" | "N")}>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="사용여부" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="Y">예</SelectItem>
+                <SelectItem value="N">아니오</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <DialogFooter>
+            <Button type="button" color="white" onClick={() => onOpenChange(false)}>
+              취소
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              저장
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { CklstMngFormDialog };
diff --git a/apps/as/src/pages/checklist-management/ui/cklst-mng-list.tsx b/apps/as/src/pages/checklist-management/ui/cklst-mng-list.tsx
new file mode 100644
index 000000000..921295ac2
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/ui/cklst-mng-list.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
+
+import { useDataTable } from "@/shared/lib";
+import {
+  type CklstMng,
+  useCklstMngPage,
+  useCreateCklstMng,
+  useDeleteCklstMng,
+  useUpdateCklstMng,
+} from "@/entities/cklst";
+import { Button } from "@common/components";
+
+import { createCklstMngColumns } from "../model/cklst-mng-columns";
+
+import { CklstMngFormDialog, type CklstMngFormValues } from "./cklst-mng-form-dialog";
+
+interface CklstMngListProps {
+  selectedCklstSn: number | null;
+  onSelectCklst: (cklst: CklstMng | null) => void;
+}
+
+function CklstMngList({ selectedCklstSn, onSelectCklst }: CklstMngListProps) {
+  const { confirm } = useConfirm();
+  const [dialogMode, setDialogMode] = useState<"create" | "edit" | null>(null);
+  const [editingCklst, setEditingCklst] = useState<CklstMng | null>(null);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>(() =>
+    selectedCklstSn != null ? { [String(selectedCklstSn)]: true } : {},
+  );
+
+  const mngQuery = useCklstMngPage({
+    page: 0,
+    size: 50,
+    sort: "regDt,desc",
+  });
+
+  const createMutation = useCreateCklstMng();
+  const updateMutation = useUpdateCklstMng();
+  const deleteMutation = useDeleteCklstMng();
+
+  const columns = useMemo(
+    () =>
+      createCklstMngColumns({
+        onEdit: (row) => {
+          setEditingCklst(row);
+          setDialogMode("edit");
+        },
+        onDelete: async (row) => {
+          if (!(await confirm("선택한 점검표를 삭제하시겠습니까?"))) return;
+          await deleteMutation.mutateAsync(row.cklstSn);
+          if (selectedCklstSn === row.cklstSn) {
+            onSelectCklst(null);
+            setRowSelection({});
+          }
+        },
+      }),
+    [confirm, deleteMutation, onSelectCklst, selectedCklstSn],
+  );
+
+  const { tableComponent } = useDataTable({
+    query: mngQuery,
+    tableOptions: {
+      columns,
+      state: { rowSelection },
+      enableRowSelection: true,
+      enableMultiRowSelection: false,
+      getRowId: (row) => String(row.cklstSn),
+      onRowSelectionChange: (updater) => {
+        const next = typeof updater === "function" ? updater(rowSelection) : updater;
+        setRowSelection(next);
+        const selectedId = Object.keys(next)[0];
+        if (!selectedId) {
+          onSelectCklst(null);
+          return;
+        }
+        const selected = mngQuery.data?.content.find((c) => String(c.cklstSn) === selectedId);
+        onSelectCklst(selected ?? null);
+      },
+      getCoreRowModel: getCoreRowModel(),
+    },
+    dataTableOptions: {
+      onRowClick: (row) => {
+        setRowSelection({ [String(row.cklstSn)]: true });
+        onSelectCklst(row);
+      },
+    },
+  });
+
+  const handleFormSubmit = async (values: CklstMngFormValues) => {
+    const body = {
+      cklstNm: values.cklstNm,
+      taskSeComCd: values.taskSeComCd,
+      useYn: values.useYn,
+      docSeComCd: values.docSeComCd || undefined,
+    };
+
+    if (dialogMode === "create") {
+      const cklstSn = await createMutation.mutateAsync(body);
+      const { data } = await mngQuery.refetch();
+      const created = data?.content.find((c) => c.cklstSn === cklstSn);
+      if (created) {
+        onSelectCklst(created);
+        setRowSelection({ [String(created.cklstSn)]: true });
+      }
+    } else if (dialogMode === "edit" && editingCklst) {
+      await updateMutation.mutateAsync({ cklstSn: editingCklst.cklstSn, body });
+      const { data } = await mngQuery.refetch();
+      const updated = data?.content.find((c) => c.cklstSn === editingCklst.cklstSn);
+      if (updated && selectedCklstSn === editingCklst.cklstSn) {
+        onSelectCklst(updated);
+      }
+    }
+
+    setDialogMode(null);
+    setEditingCklst(null);
+  };
+
+  return (
+    <section className="card card-border mx-0 bg-background pt-0">
+      <div className="card-header flex items-center justify-between">
+        <h3 className="text-2xl font-semibold">점검표 관리</h3>
+        <Button type="button" color="green" onClick={() => setDialogMode("create")}>
+          점검표 추가
+        </Button>
+      </div>
+      {tableComponent}
+      {dialogMode && (
+        <CklstMngFormDialog
+          mode={dialogMode}
+          open={Boolean(dialogMode)}
+          onOpenChange={(open) => {
+            if (!open) {
+              setDialogMode(null);
+              setEditingCklst(null);
+            }
+          }}
+          initial={dialogMode === "edit" ? editingCklst : null}
+          isSubmitting={createMutation.isPending || updateMutation.isPending}
+          onSubmit={handleFormSubmit}
+        />
+      )}
+    </section>
+  );
+}
+
+export { CklstMngList };
diff --git a/apps/as/src/pages/checklist-management/ui/cklst-preview-dialog.tsx b/apps/as/src/pages/checklist-management/ui/cklst-preview-dialog.tsx
new file mode 100644
index 000000000..42f2edcf8
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/ui/cklst-preview-dialog.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import type { CklstArtcl } from "@/entities/cklst";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@common/components";
+
+import { buildRvwDisplayRows, formatTreeBranchPrefix } from "../model/build-rvw-display-rows";
+import type { CklstRvwRow } from "../model/cklst-rvw-row-types";
+
+interface CklstPreviewDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  cklstNm: string;
+  rows: CklstRvwRow[];
+  artclOptions: CklstArtcl[];
+}
+
+function CklstPreviewDialog({
+  open,
+  onOpenChange,
+  cklstNm,
+  rows,
+  artclOptions,
+}: CklstPreviewDialogProps) {
+  const displayRows = buildRvwDisplayRows(rows);
+
+  function getArtclLabel(cklstArtclSn: number): string {
+    const artcl = artclOptions.find((item) => item.cklstArtclSn === cklstArtclSn);
+    return artcl?.cklstArtclNm ?? String(cklstArtclSn);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[64rem]">
+        <DialogHeader>
+          <DialogTitle>체크리스트 미리보기 — {cklstNm}</DialogTitle>
+        </DialogHeader>
+        {displayRows.length === 0 ? (
+          <p className="py-6 text-center text-muted-foreground">표시할 항목이 없습니다.</p>
+        ) : (
+          <Table>
+            <colgroup>
+              <col width="25%" />
+              <col width="50%" />
+              <col width="25%" />
+            </colgroup>
+            <TableHeader>
+              <TableRow>
+                <TableHead align="left">점검항목</TableHead>
+                <TableHead align="left">주요 검토내용</TableHead>
+                <TableHead>검토 여부</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {displayRows.map(({ row, depth }) => {
+                const branchPrefix = formatTreeBranchPrefix(depth);
+
+                if (row.useYn === "N") return null;
+
+                return (
+                  <TableRow key={row.rowKey}>
+                    <TableCell align="left">
+                      <span className="inline-flex items-center gap-1">
+                        {branchPrefix ? (
+                          <span className="font-mono text-muted">{branchPrefix}</span>
+                        ) : null}
+                        <span>{getArtclLabel(row.cklstArtclSn)}</span>
+                      </span>
+                    </TableCell>
+                    <TableCell>{row.rvwCn ?? "—"}</TableCell>
+                    <TableCell align="center">
+                      <RadioGroup className="flex items-center justify-center">
+                        <div className="flex items-center gap-1">
+                          <RadioGroupItem value="Y" id={`${row.rowKey}-use-y`} />
+                          <Label htmlFor={`${row.rowKey}-use-y`}>예</Label>
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <RadioGroupItem value="N" id={`${row.rowKey}-use-n`} />
+                          <Label htmlFor={`${row.rowKey}-use-n`}>아니오</Label>
+                        </div>
+                      </RadioGroup>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { CklstPreviewDialog };
diff --git a/apps/as/src/pages/checklist-management/ui/cklst-rvw-grid.tsx b/apps/as/src/pages/checklist-management/ui/cklst-rvw-grid.tsx
new file mode 100644
index 000000000..8eca3ce21
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/ui/cklst-rvw-grid.tsx
@@ -0,0 +1,324 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { useAlertStore } from "@/shared/lib";
+import type { CklstMng, CklstRvw } from "@/entities/cklst";
+import {
+  useCklstArtclList,
+  useCklstRvwPage,
+  useCreateCklstRvw,
+  useDeleteCklstRvw,
+  useUpdateCklstRvw,
+} from "@/entities/cklst";
+import {
+  Button,
+  Skeleton,
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@common/components";
+
+import { buildRvwDisplayRows, MAX_RVW_CN_LV_NO } from "../model/build-rvw-display-rows";
+import type { CklstRvwRow } from "../model/cklst-rvw-row-types";
+
+import { CklstPreviewDialog } from "./cklst-preview-dialog";
+import { CklstRvwRowComponent } from "./cklst-rvw-row";
+
+interface CklstRvwGridProps {
+  selectedCklst: CklstMng | null;
+}
+
+function toRow(item: CklstRvw): CklstRvwRow {
+  return {
+    ...item,
+    rowKey: `${item.cklstRvwSn}-${item.cklstArtclSn}-${item.cklstSn}`,
+    isNew: false,
+    isDirty: false,
+  };
+}
+
+function createDraftRowKey(): string {
+  return `draft-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+function validateRvwRow(row: CklstRvwRow): string | null {
+  if (!row.cklstArtclSn) return "점검항목을 선택하세요.";
+  if (!row.rvwCn?.trim()) return "주요 검토내용을 입력하세요.";
+  return null;
+}
+
+function CklstRvwGrid({ selectedCklst }: CklstRvwGridProps) {
+  const { confirm } = useConfirm();
+  const [rows, setRows] = useState<CklstRvwRow[]>([]);
+  const [previewOpen, setPreviewOpen] = useState(false);
+
+  const alert = useAlertStore((state) => state.setMessage);
+  const cklstSn = selectedCklst?.cklstSn ?? null;
+
+  const rvwQuery = useCklstRvwPage({
+    cklstSn: cklstSn ?? undefined,
+    page: 0,
+    size: 500,
+    sort: "sortSeq,asc",
+  });
+
+  const artclQuery = useCklstArtclList(cklstSn);
+  const createMutation = useCreateCklstRvw();
+  const updateMutation = useUpdateCklstRvw();
+  const deleteMutation = useDeleteCklstRvw();
+
+  const artclOptions = useMemo(
+    () => (artclQuery.data ?? []).filter((artcl) => artcl.useYn !== "N"),
+    [artclQuery.data],
+  );
+
+  useEffect(() => {
+    if (!cklstSn) {
+      setRows([]);
+      return;
+    }
+    setRows((rvwQuery.data?.content ?? []).map(toRow));
+  }, [cklstSn, rvwQuery.data?.content]);
+
+  const displayRows = useMemo(() => buildRvwDisplayRows(rows), [rows]);
+
+  const getDirtyRows = useCallback(() => rows.filter((row) => row.isDirty || row.isNew), [rows]);
+
+  const updateRow = useCallback((rowKey: string, patch: Partial<CklstRvwRow>) => {
+    setRows((prev) =>
+      prev.map((row) => (row.rowKey === rowKey ? { ...row, ...patch, isDirty: true } : row)),
+    );
+  }, []);
+
+  const removeRowLocal = useCallback((rowKey: string) => {
+    setRows((prev) => prev.filter((row) => row.rowKey !== rowKey));
+  }, []);
+
+  const addRootRow = useCallback(() => {
+    if (!cklstSn) return;
+
+    const maxSort = rows.reduce((max, row) => Math.max(max, row.sortSeq ?? 0), 0);
+
+    setRows((prev) => [
+      ...prev,
+      {
+        rowKey: createDraftRowKey(),
+        cklstSn,
+        cklstArtclSn: artclOptions[0]?.cklstArtclSn ?? 0,
+        rvwCnLvNo: 1,
+        rvwCn: "",
+        useYn: "Y",
+        sortSeq: maxSort + 1,
+        isNew: true,
+        isDirty: true,
+      },
+    ]);
+  }, [artclOptions, cklstSn, rows]);
+
+  const addChildRow = useCallback(
+    (parent: CklstRvwRow) => {
+      if (!cklstSn || parent.isNew || parent.cklstRvwSn == null) {
+        alert("상위 행을 먼저 저장한 후 하위 항목을 추가할 수 있습니다.");
+        return;
+      }
+
+      const parentLv = parent.rvwCnLvNo ?? 1;
+      if (parentLv >= MAX_RVW_CN_LV_NO) {
+        alert("최대 3단계까지 추가할 수 있습니다.");
+        return;
+      }
+
+      const maxSort = rows.reduce((max, row) => Math.max(max, row.sortSeq ?? 0), 0);
+
+      setRows((prev) => [
+        ...prev,
+        {
+          rowKey: createDraftRowKey(),
+          cklstSn,
+          cklstArtclSn: parent.cklstArtclSn,
+          upCklstRvwSn: parent.cklstRvwSn,
+          rvwCnLvNo: parentLv + 1,
+          rvwCn: "",
+          useYn: "Y",
+          sortSeq: maxSort + 1,
+          isNew: true,
+          isDirty: true,
+        },
+      ]);
+    },
+    [alert, cklstSn, rows],
+  );
+
+  const handleDelete = async (row: CklstRvwRow) => {
+    if (
+      !(await confirm(
+        "선택한 항목을 삭제하시겠습니까?\n삭제한 항목은 되돌릴 수 없으며, 하위 항목까지 모두 삭제됩니다.",
+      ))
+    )
+      return;
+
+    if (row.isNew) {
+      removeRowLocal(row.rowKey);
+      return;
+    }
+
+    const children = rows.filter((r) => r.upCklstRvwSn === row.cklstRvwSn);
+    if (children.length > 0) {
+      for (const child of children) {
+        await deleteMutation.mutateAsync({
+          cklstRvwSn: child.cklstRvwSn!,
+          cklstArtclSn: child.cklstArtclSn,
+          cklstSn: child.cklstSn,
+        });
+      }
+    }
+
+    await deleteMutation.mutateAsync({
+      cklstRvwSn: row.cklstRvwSn!,
+      cklstArtclSn: row.cklstArtclSn,
+      cklstSn: row.cklstSn,
+    });
+    await rvwQuery.refetch();
+  };
+
+  const handleSave = async () => {
+    if (!cklstSn) return;
+
+    const dirty = getDirtyRows().sort((a, b) => (a.rvwCnLvNo ?? 1) - (b.rvwCnLvNo ?? 1));
+
+    for (const row of dirty) {
+      const fieldError = validateRvwRow(row);
+      if (fieldError) {
+        alert(fieldError);
+        return;
+      }
+
+      if (!(await confirm("체크리스트 항목을 저장하시겠습니까?"))) return;
+
+      if (row.isNew) {
+        await createMutation.mutateAsync({
+          cklstSn: row.cklstSn,
+          cklstArtclSn: row.cklstArtclSn,
+          upCklstRvwSn: row.upCklstRvwSn,
+          rvwCnLvNo: row.rvwCnLvNo,
+          rvwCn: row.rvwCn,
+          useYn: row.useYn,
+          sortSeq: row.sortSeq,
+          bchckUseYn: "Y",
+        });
+      } else if (row.cklstRvwSn != null) {
+        await updateMutation.mutateAsync({
+          cklstRvwSn: row.cklstRvwSn,
+          cklstArtclSn: row.cklstArtclSn,
+          cklstSn: row.cklstSn,
+          body: {
+            upCklstRvwSn: row.upCklstRvwSn,
+            rvwCnLvNo: row.rvwCnLvNo,
+            rvwCn: row.rvwCn,
+            useYn: row.useYn,
+            sortSeq: row.sortSeq,
+            bchckUseYn: row.bchckUseYn,
+          },
+        });
+      }
+    }
+
+    alert("체크리스트 항목이 저장되었습니다.");
+    await rvwQuery.refetch();
+  };
+
+  const isDisabled = !selectedCklst;
+  const isSaving = createMutation.isPending || updateMutation.isPending || deleteMutation.isPending;
+
+  return (
+    <section className="card card-border mx-0 pt-0">
+      <div className="card-header flex flex-wrap items-center justify-between gap-3">
+        <h3 className="text-2xl font-semibold">체크리스트 항목</h3>
+        <div className="flex flex-wrap items-center gap-3">
+          <Button
+            type="button"
+            color="white"
+            disabled={isDisabled}
+            onClick={() => setPreviewOpen(true)}
+          >
+            미리보기
+          </Button>
+          <Button type="button" color="green" disabled={isDisabled} onClick={addRootRow}>
+            체크리스트 추가
+          </Button>
+          <Button
+            type="button"
+            disabled={getDirtyRows().length === 0 || isDisabled || isSaving}
+            onClick={handleSave}
+          >
+            저장
+          </Button>
+        </div>
+      </div>
+
+      {rvwQuery.isPending && cklstSn ? (
+        <div className="flex flex-col gap-2 px-4 pb-4">
+          <Skeleton className="h-[4rem]" />
+          <Skeleton className="h-[16rem]" />
+        </div>
+      ) : isDisabled ? (
+        <p className="py-8 text-center text-lg text-muted-foreground">
+          점검표를 선택하면 체크리스트 항목을 편집할 수 있습니다.
+        </p>
+      ) : displayRows.length === 0 ? (
+        <p className="py-8 text-center text-lg text-muted-foreground">
+          등록된 항목이 없습니다. [추가]로 1단계 항목을 등록하세요.
+        </p>
+      ) : (
+        <Table className="w-full">
+          <colgroup>
+            <col width="20%" />
+            <col width="50%" />
+            <col width="15%" />
+            <col width="5%" />
+            <col width="10%" />
+          </colgroup>
+          <TableHeader>
+            <TableRow>
+              <TableHead>점검항목</TableHead>
+              <TableHead>주요 검토내용</TableHead>
+              <TableHead>사용 여부</TableHead>
+              <TableHead>구분</TableHead>
+              <TableHead>관리</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {displayRows.map(({ row, depth }) => (
+              <CklstRvwRowComponent
+                key={row.rowKey}
+                row={row}
+                depth={depth}
+                artclOptions={artclOptions}
+                onChange={(patch) => updateRow(row.rowKey, patch)}
+                onAddChild={() => addChildRow(row)}
+                onDelete={() => handleDelete(row)}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      )}
+
+      {selectedCklst && (
+        <CklstPreviewDialog
+          open={previewOpen}
+          onOpenChange={setPreviewOpen}
+          cklstNm={selectedCklst.cklstNm}
+          rows={rows}
+          artclOptions={artclOptions}
+        />
+      )}
+    </section>
+  );
+}
+
+export { CklstRvwGrid };
diff --git a/apps/as/src/pages/checklist-management/ui/cklst-rvw-row.tsx b/apps/as/src/pages/checklist-management/ui/cklst-rvw-row.tsx
new file mode 100644
index 000000000..9ea9094ce
--- /dev/null
+++ b/apps/as/src/pages/checklist-management/ui/cklst-rvw-row.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import type { CklstArtcl } from "@/entities/cklst";
+import {
+  Button,
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  TableCell,
+  TableRow,
+} from "@common/components";
+
+import {
+  canAddChildRow,
+  formatRvwCnLvNo,
+  formatTreeBranchPrefix,
+} from "../model/build-rvw-display-rows";
+import type { CklstRvwRow } from "../model/cklst-rvw-row-types";
+
+interface CklstRvwRowProps {
+  row: CklstRvwRow;
+  depth: number;
+  artclOptions: CklstArtcl[];
+  onChange: (patch: Partial<CklstRvwRow>) => void;
+  onAddChild: () => void;
+  onDelete: () => void;
+}
+
+function CklstRvwRowComponent({
+  row,
+  depth,
+  artclOptions,
+  onChange,
+  onAddChild,
+  onDelete,
+}: CklstRvwRowProps) {
+  const levelLabel = formatRvwCnLvNo(row.rvwCnLvNo);
+  const branchPrefix = formatTreeBranchPrefix(depth);
+
+  return (
+    <TableRow>
+      <TableCell>
+        <div className="flex min-w-[12rem] items-center gap-1">
+          {branchPrefix ? (
+            <span className="shrink-0 font-mono text-muted">{branchPrefix}</span>
+          ) : null}
+          <Select
+            value={row.cklstArtclSn ? String(row.cklstArtclSn) : ""}
+            onValueChange={(v) => onChange({ cklstArtclSn: Number(v), isDirty: true })}
+            disabled={!row.isNew}
+          >
+            <SelectTrigger className="w-full flex-1">
+              <SelectValue placeholder="점검항목 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              {artclOptions.map((artcl) => (
+                <SelectItem key={artcl.cklstArtclSn} value={String(artcl.cklstArtclSn)}>
+                  {artcl.cklstArtclNm ?? artcl.cklstArtclSn}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </TableCell>
+      <TableCell>
+        <Input
+          value={row.rvwCn ?? ""}
+          onChange={(e) => onChange({ rvwCn: e.target.value, isDirty: true })}
+          placeholder="주요 검토내용"
+        />
+      </TableCell>
+      <TableCell align="center">
+        <RadioGroup
+          value={row.useYn ?? "Y"}
+          onValueChange={(v) => onChange({ useYn: v as "Y" | "N", isDirty: true })}
+          className="flex justify-center gap-4"
+        >
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="Y" id={`${row.rowKey}-use-y`} />
+            <Label htmlFor={`${row.rowKey}-use-y`}>예</Label>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="N" id={`${row.rowKey}-use-n`} />
+            <Label htmlFor={`${row.rowKey}-use-n`}>아니오</Label>
+          </div>
+        </RadioGroup>
+      </TableCell>
+      <TableCell align="center">{levelLabel}</TableCell>
+      <TableCell align="center">
+        <div className="flex justify-center gap-2">
+          <Button
+            type="button"
+            size="sm"
+            color="white"
+            disabled={row.isNew || !canAddChildRow(row.rvwCnLvNo)}
+            onClick={onAddChild}
+          >
+            하위추가
+          </Button>
+          <Button type="button" size="sm" color="gray" onClick={onDelete}>
+            삭제
+          </Button>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export { CklstRvwRowComponent };
diff --git a/apps/as/src/pages/cnstp-code-management/index.ts b/apps/as/src/pages/cnstp-code-management/index.ts
new file mode 100644
index 000000000..2ed1cb4ba
--- /dev/null
+++ b/apps/as/src/pages/cnstp-code-management/index.ts
@@ -0,0 +1 @@
+export { CnstpCodeManagementPage } from "./ui/cnstp-code-management-page";
diff --git a/apps/as/src/pages/cnstp-code-management/lib/build-save-multi-payload.ts b/apps/as/src/pages/cnstp-code-management/lib/build-save-multi-payload.ts
new file mode 100644
index 000000000..20ec66853
--- /dev/null
+++ b/apps/as/src/pages/cnstp-code-management/lib/build-save-multi-payload.ts
@@ -0,0 +1,62 @@
+import { CNSTP_SE_SAVE_MODE, type CnstpSeMngSaveRequestDto } from "@/entities/cnstp";
+
+import type { CnstpSeRow } from "../model/cnstp-se-row-types";
+
+import { getVisibleRows } from "./row-state";
+
+function compareCdLvNoDesc(a: CnstpSeRow, b: CnstpSeRow): number {
+  return (b.cdLvNo ?? 1) - (a.cdLvNo ?? 1);
+}
+
+function compareCdLvNoAsc(a: CnstpSeRow, b: CnstpSeRow): number {
+  return (a.cdLvNo ?? 1) - (b.cdLvNo ?? 1);
+}
+
+export function buildSaveMultiPayload(rows: CnstpSeRow[]): CnstpSeMngSaveRequestDto[] {
+  const payload: CnstpSeMngSaveRequestDto[] = [];
+
+  const deletedRows = rows.filter((row) => row.isDeleted && !row.isNew).sort(compareCdLvNoDesc);
+
+  for (const row of deletedRows) {
+    payload.push({
+      mode: CNSTP_SE_SAVE_MODE.DELETE,
+      cnstpSeCd: row.cnstpSeCd,
+      cnstpSeCdNm: row.cnstpSeCdNm?.trim() || undefined,
+      upCnstpCd: row.upCnstpCd,
+      cdLvNo: row.cdLvNo,
+      useYn: row.useYn,
+      expln: row.expln?.trim() || undefined,
+    });
+  }
+
+  const visibleRows = getVisibleRows(rows).sort(compareCdLvNoAsc);
+
+  for (const row of visibleRows) {
+    if (row.isNew) {
+      payload.push({
+        mode: CNSTP_SE_SAVE_MODE.CREATE,
+        cnstpSeCd: row.cnstpSeCd.trim(),
+        cnstpSeCdNm: row.cnstpSeCdNm?.trim() || undefined,
+        upCnstpCd: row.upCnstpCd,
+        cdLvNo: row.cdLvNo,
+        useYn: row.useYn,
+        expln: row.expln?.trim() || undefined,
+      });
+      continue;
+    }
+
+    if (row.isDirty) {
+      payload.push({
+        mode: CNSTP_SE_SAVE_MODE.UPDATE,
+        cnstpSeCd: row.cnstpSeCd.trim(),
+        cnstpSeCdNm: row.cnstpSeCdNm?.trim() || undefined,
+        upCnstpCd: row.upCnstpCd,
+        cdLvNo: row.cdLvNo,
+        useYn: row.useYn,
+        expln: row.expln?.trim() || undefined,
+      });
+    }
+  }
+
+  return payload;
+}
diff --git a/apps/as/src/pages/cnstp-code-management/lib/cnstp-se-grid.ts b/apps/as/src/pages/cnstp-code-management/lib/cnstp-se-grid.ts
new file mode 100644
index 000000000..6b1bd99f9
--- /dev/null
+++ b/apps/as/src/pages/cnstp-code-management/lib/cnstp-se-grid.ts
@@ -0,0 +1,245 @@
+import type { CnstpSeMngResponseDto } from "@/entities/cnstp";
+
+import { buildCnstpDisplayRows } from "../model/build-cnstp-display-rows";
+import type {
+  CnstpDisplaySlot,
+  CnstpSeBaseEntry,
+  CnstpSeGridState,
+} from "../model/cnstp-se-grid-types";
+import type { CnstpSeRow } from "../model/cnstp-se-row-types";
+
+export function createLoadedRowKey(index: number, cnstpSeCd: string): string {
+  return `loaded-${index}-${cnstpSeCd}`;
+}
+
+export function createDraftRowKey(): string {
+  return `draft-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+export function createEmptyGridState(): CnstpSeGridState {
+  return {
+    baseByKey: {},
+    structure: [],
+    drafts: {},
+    patches: {},
+    deletedKeys: new Set(),
+  };
+}
+
+function toInitialRow(entry: CnstpSeBaseEntry): CnstpSeRow {
+  return {
+    ...entry,
+    isNew: false,
+    isDirty: false,
+    isDeleted: false,
+  };
+}
+
+export function buildStructureFromBaseRows(
+  baseByKey: Record<string, CnstpSeBaseEntry>,
+): CnstpDisplaySlot[] {
+  const rows = Object.values(baseByKey).map(toInitialRow);
+  const display = buildCnstpDisplayRows(rows);
+  const cdToRowKey = new Map(rows.map((row) => [row.cnstpSeCd, row.rowKey]));
+
+  return display.map(({ row, depth }) => ({
+    rowKey: row.rowKey,
+    depth,
+    parentRowKey: row.upCnstpCd?.trim() ? (cdToRowKey.get(row.upCnstpCd.trim()) ?? null) : null,
+  }));
+}
+
+export function hydrateGridFromServer(content: CnstpSeMngResponseDto[]): CnstpSeGridState {
+  const baseByKey: Record<string, CnstpSeBaseEntry> = {};
+
+  content.forEach((item, index) => {
+    const rowKey = createLoadedRowKey(index, item.cnstpSeCd);
+    baseByKey[rowKey] = { ...item, rowKey };
+  });
+
+  return {
+    baseByKey,
+    structure: buildStructureFromBaseRows(baseByKey),
+    drafts: {},
+    patches: {},
+    deletedKeys: new Set(),
+  };
+}
+
+export function resolveParentCnstpSeCd(
+  state: CnstpSeGridState,
+  parentRowKey: string | null,
+): string | undefined {
+  if (!parentRowKey) return undefined;
+  const parent = mergeCnstpRow(state, parentRowKey);
+  const cd = parent?.cnstpSeCd?.trim();
+  return cd || undefined;
+}
+
+export function mergeCnstpRow(state: CnstpSeGridState, rowKey: string): CnstpSeRow | null {
+  const draft = state.drafts[rowKey];
+  if (draft) {
+    return {
+      rowKey,
+      cnstpSeCd: draft.cnstpSeCd,
+      cnstpSeCdNm: draft.cnstpSeCdNm,
+      expln: draft.expln,
+      useYn: draft.useYn,
+      cdLvNo: draft.cdLvNo,
+      upCnstpCd: resolveParentCnstpSeCd(state, draft.parentRowKey),
+      isNew: true,
+      isDirty: true,
+      isDeleted: false,
+    };
+  }
+
+  const base = state.baseByKey[rowKey];
+  if (!base) return null;
+
+  const patch = state.patches[rowKey] ?? {};
+  const hasPatch = Object.keys(patch).length > 0;
+
+  return {
+    ...base,
+    ...patch,
+    rowKey,
+    isNew: false,
+    isDirty: hasPatch,
+    isDeleted: state.deletedKeys.has(rowKey),
+  };
+}
+
+export function mergeAllCnstpRows(state: CnstpSeGridState): CnstpSeRow[] {
+  const keys = new Set([...Object.keys(state.baseByKey), ...Object.keys(state.drafts)]);
+
+  return [...keys]
+    .map((rowKey) => mergeCnstpRow(state, rowKey))
+    .filter((row): row is CnstpSeRow => row != null);
+}
+
+export function hasCnstpGridPendingChanges(state: CnstpSeGridState): boolean {
+  return (
+    state.deletedKeys.size > 0 ||
+    Object.keys(state.drafts).length > 0 ||
+    Object.keys(state.patches).length > 0
+  );
+}
+
+export function collectDescendantRowKeys(
+  structure: CnstpDisplaySlot[],
+  rootRowKey: string,
+): Set<string> {
+  const result = new Set<string>([rootRowKey]);
+  const queue = [rootRowKey];
+
+  while (queue.length > 0) {
+    const parentKey = queue.shift()!;
+    for (const slot of structure) {
+      if (slot.parentRowKey === parentKey && !result.has(slot.rowKey)) {
+        result.add(slot.rowKey);
+        queue.push(slot.rowKey);
+      }
+    }
+  }
+
+  return result;
+}
+
+export function insertRootSlot(
+  structure: CnstpDisplaySlot[],
+  slot: CnstpDisplaySlot,
+): CnstpDisplaySlot[] {
+  const firstRootIndex = structure.findIndex((item) => item.parentRowKey === null);
+  if (firstRootIndex === -1) return [slot, ...structure];
+  return [...structure.slice(0, firstRootIndex), slot, ...structure.slice(firstRootIndex)];
+}
+
+export function insertChildSlot(
+  structure: CnstpDisplaySlot[],
+  parentRowKey: string,
+  slot: CnstpDisplaySlot,
+): CnstpDisplaySlot[] {
+  const parentIndex = structure.findIndex((item) => item.rowKey === parentRowKey);
+  if (parentIndex === -1) return [...structure, slot];
+
+  const insertAt = parentIndex + 1;
+  return [...structure.slice(0, insertAt), slot, ...structure.slice(insertAt)];
+}
+
+export function removeSlotsFromStructure(
+  structure: CnstpDisplaySlot[],
+  rowKeysToRemove: Set<string>,
+): CnstpDisplaySlot[] {
+  return structure.filter((slot) => !rowKeysToRemove.has(slot.rowKey));
+}
+
+export function patchCnstpGridRow(
+  state: CnstpSeGridState,
+  rowKey: string,
+  patch: Partial<CnstpSeRow>,
+): CnstpSeGridState {
+  const draft = state.drafts[rowKey];
+  if (draft) {
+    return {
+      ...state,
+      drafts: {
+        ...state.drafts,
+        [rowKey]: {
+          ...draft,
+          ...(patch.cnstpSeCd !== undefined ? { cnstpSeCd: patch.cnstpSeCd } : {}),
+          ...(patch.cnstpSeCdNm !== undefined ? { cnstpSeCdNm: patch.cnstpSeCdNm ?? "" } : {}),
+          ...(patch.expln !== undefined ? { expln: patch.expln ?? "" } : {}),
+          ...(patch.useYn !== undefined ? { useYn: patch.useYn } : {}),
+        },
+      },
+    };
+  }
+
+  const { rowKey: _rk, isNew: _n, isDirty: _d, isDeleted: _del, ...dtoPatch } = patch;
+
+  return {
+    ...state,
+    patches: {
+      ...state.patches,
+      [rowKey]: { ...state.patches[rowKey], ...dtoPatch },
+    },
+  };
+}
+
+export function markCnstpRowsDeleted(
+  state: CnstpSeGridState,
+  rootRowKey: string,
+): CnstpSeGridState {
+  const keysToDelete = collectDescendantRowKeys(state.structure, rootRowKey);
+  const deletedKeys = new Set(state.deletedKeys);
+  for (const key of keysToDelete) {
+    deletedKeys.add(key);
+  }
+  return { ...state, deletedKeys };
+}
+
+export function validateDraftParentCnstpSeCd(
+  state: CnstpSeGridState,
+  rowKey: string,
+): string | null {
+  const draft = state.drafts[rowKey];
+  if (!draft?.parentRowKey) return null;
+
+  const parent = mergeCnstpRow(state, draft.parentRowKey);
+  if (!parent?.cnstpSeCd?.trim()) {
+    return "하위 항목을 추가하려면 상위 코드를 먼저 입력하세요.";
+  }
+
+  return null;
+}
+
+export function removeDraftFromGrid(state: CnstpSeGridState, rowKey: string): CnstpSeGridState {
+  const { [rowKey]: _removed, ...restDrafts } = state.drafts;
+  const keysToRemove = collectDescendantRowKeys(state.structure, rowKey);
+
+  return {
+    ...state,
+    drafts: restDrafts,
+    structure: removeSlotsFromStructure(state.structure, keysToRemove),
+  };
+}
diff --git a/apps/as/src/pages/cnstp-code-management/lib/row-state.ts b/apps/as/src/pages/cnstp-code-management/lib/row-state.ts
new file mode 100644
index 000000000..b7a98aca7
--- /dev/null
+++ b/apps/as/src/pages/cnstp-code-management/lib/row-state.ts
@@ -0,0 +1,5 @@
+import type { CnstpSeRow } from "../model/cnstp-se-row-types";
+
+export function getVisibleRows(rows: CnstpSeRow[]): CnstpSeRow[] {
+  return rows.filter((row) => !row.isDeleted);
+}
diff --git a/apps/as/src/pages/cnstp-code-management/lib/use-cnstp-se-rows.ts b/apps/as/src/pages/cnstp-code-management/lib/use-cnstp-se-rows.ts
new file mode 100644
index 000000000..7e4320c8f
--- /dev/null
+++ b/apps/as/src/pages/cnstp-code-management/lib/use-cnstp-se-rows.ts
@@ -0,0 +1,167 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import type { CnstpSeMngResponseDto } from "@/entities/cnstp";
+
+import type { CnstpSeGridState } from "../model/cnstp-se-grid-types";
+import type { CnstpSeRow } from "../model/cnstp-se-row-types";
+
+import { buildSaveMultiPayload } from "./build-save-multi-payload";
+import {
+  createDraftRowKey,
+  createEmptyGridState,
+  hasCnstpGridPendingChanges,
+  hydrateGridFromServer,
+  insertChildSlot,
+  insertRootSlot,
+  markCnstpRowsDeleted,
+  mergeAllCnstpRows,
+  mergeCnstpRow,
+  patchCnstpGridRow,
+  removeDraftFromGrid,
+  validateDraftParentCnstpSeCd,
+} from "./cnstp-se-grid";
+
+function validateCnstpSeRow(row: CnstpSeRow): string | null {
+  if (!row.cnstpSeCd.trim()) return "코드를 입력하세요.";
+  const parentCd = row.upCnstpCd?.trim();
+  if (parentCd && row.cnstpSeCd.trim() === parentCd) {
+    return "상위 코드와 동일한 코드는 사용할 수 없습니다.";
+  }
+  return null;
+}
+
+interface UseCnstpSeRowsOptions {
+  serverContent: CnstpSeMngResponseDto[] | undefined;
+  onAlert: (message: string) => void;
+  onSave: (payload: ReturnType<typeof buildSaveMultiPayload>) => Promise<void>;
+}
+
+export function useCnstpSeRows({ serverContent, onAlert, onSave }: UseCnstpSeRowsOptions) {
+  const [grid, setGrid] = useState<CnstpSeGridState>(createEmptyGridState);
+  const hasPendingRef = useRef(false);
+
+  hasPendingRef.current = hasCnstpGridPendingChanges(grid);
+
+  useEffect(() => {
+    if (serverContent == null) return;
+    if (hasPendingRef.current) return;
+    setGrid(hydrateGridFromServer(serverContent));
+  }, [serverContent]);
+
+  const displayRows = useMemo(() => {
+    return grid.structure
+      .filter((slot) => !grid.deletedKeys.has(slot.rowKey))
+      .map((slot) => {
+        const row = mergeCnstpRow(grid, slot.rowKey);
+        return row ? { row, depth: slot.depth } : null;
+      })
+      .filter((item): item is { row: CnstpSeRow; depth: number } => item != null);
+  }, [grid]);
+
+  const canSave = hasCnstpGridPendingChanges(grid);
+
+  const updateRow = useCallback((rowKey: string, patch: Partial<CnstpSeRow>) => {
+    setGrid((prev) => patchCnstpGridRow(prev, rowKey, patch));
+  }, []);
+
+  const addRootRow = useCallback(() => {
+    const rowKey = createDraftRowKey();
+    setGrid((prev) => ({
+      ...prev,
+      drafts: {
+        ...prev.drafts,
+        [rowKey]: {
+          rowKey,
+          parentRowKey: null,
+          cdLvNo: 1,
+          cnstpSeCd: "",
+          cnstpSeCdNm: "",
+          expln: "",
+          useYn: "Y",
+        },
+      },
+      structure: insertRootSlot(prev.structure, { rowKey, depth: 0, parentRowKey: null }),
+    }));
+  }, []);
+
+  const addChildRow = useCallback((parent: CnstpSeRow) => {
+    const rowKey = createDraftRowKey();
+
+    setGrid((prev) => {
+      const parentSlot = prev.structure.find((item) => item.rowKey === parent.rowKey);
+      const depth = (parentSlot?.depth ?? 0) + 1;
+
+      return {
+        ...prev,
+        drafts: {
+          ...prev.drafts,
+          [rowKey]: {
+            rowKey,
+            parentRowKey: parent.rowKey,
+            cdLvNo: (parent.cdLvNo ?? 1) + 1,
+            cnstpSeCd: "",
+            cnstpSeCdNm: "",
+            expln: "",
+            useYn: "Y",
+          },
+        },
+        structure: insertChildSlot(prev.structure, parent.rowKey, {
+          rowKey,
+          depth,
+          parentRowKey: parent.rowKey,
+        }),
+      };
+    });
+  }, []);
+
+  const removeDraft = useCallback((rowKey: string) => {
+    setGrid((prev) => removeDraftFromGrid(prev, rowKey));
+  }, []);
+
+  const markDeleted = useCallback((rowKey: string) => {
+    setGrid((prev) => markCnstpRowsDeleted(prev, rowKey));
+  }, []);
+
+  const resetFromServer = useCallback((content: CnstpSeMngResponseDto[]) => {
+    setGrid(hydrateGridFromServer(content));
+  }, []);
+
+  const save = useCallback(async () => {
+    const mergedRows = mergeAllCnstpRows(grid);
+    const payload = buildSaveMultiPayload(mergedRows);
+    if (payload.length === 0) return false;
+
+    for (const row of mergedRows) {
+      if (!row.isDeleted && (row.isNew || row.isDirty)) {
+        const parentCodeError = validateDraftParentCnstpSeCd(grid, row.rowKey);
+        if (parentCodeError) {
+          onAlert(parentCodeError);
+          return false;
+        }
+
+        const fieldError = validateCnstpSeRow(row);
+        if (fieldError) {
+          onAlert(fieldError);
+          return false;
+        }
+      }
+    }
+
+    await onSave(payload);
+    return true;
+  }, [grid, onAlert, onSave]);
+
+  return {
+    displayRows,
+    canSave,
+    updateRow,
+    addRootRow,
+    addChildRow,
+    removeDraft,
+    markDeleted,
+    resetFromServer,
+    save,
+  };
+}
diff --git a/apps/as/src/pages/cnstp-code-management/model/build-cnstp-display-rows.ts b/apps/as/src/pages/cnstp-code-management/model/build-cnstp-display-rows.ts
new file mode 100644
index 000000000..1667b2aa4
--- /dev/null
+++ b/apps/as/src/pages/cnstp-code-management/model/build-cnstp-display-rows.ts
@@ -0,0 +1,77 @@
+import type { CnstpSeRow } from "./cnstp-se-row-types";
+
+export interface CnstpSeDisplayRow {
+  row: CnstpSeRow;
+  depth: number;
+}
+
+export function formatCdLvNo(lvNo?: number): string {
+  return `${lvNo ?? 1}단계`;
+}
+
+export function canAddChildRow(): boolean {
+  return true;
+}
+
+export function formatTreeBranchPrefix(depth: number): string {
+  if (depth <= 0) return "";
+  const vertical = "\u2502 ";
+  const branch = "\u251C\u2500";
+  return vertical.repeat(depth - 1) + branch;
+}
+
+function isRootRow(row: CnstpSeRow): boolean {
+  return (row.cdLvNo ?? 1) === 1 && !row.upCnstpCd?.trim();
+}
+
+function rowOrderIndex(rows: CnstpSeRow[], row: CnstpSeRow): number {
+  return rows.findIndex((candidate) => candidate.rowKey === row.rowKey);
+}
+
+function pushDisplayRow(
+  result: CnstpSeDisplayRow[],
+  displayedRowKeys: Set<string>,
+  row: CnstpSeRow,
+  depth: number,
+) {
+  if (displayedRowKeys.has(row.rowKey)) return;
+  displayedRowKeys.add(row.rowKey);
+  result.push({ row, depth });
+}
+
+export function buildCnstpDisplayRows(rows: CnstpSeRow[]): CnstpSeDisplayRow[] {
+  const result: CnstpSeDisplayRow[] = [];
+  const displayedRowKeys = new Set<string>();
+
+  const roots = rows.filter(isRootRow);
+
+  function appendSubtree(parent: CnstpSeRow, depth: number) {
+    const children = rows
+      .filter(
+        (row) =>
+          row.rowKey !== parent.rowKey &&
+          row.upCnstpCd != null &&
+          row.upCnstpCd === parent.cnstpSeCd &&
+          row.cnstpSeCd !== parent.cnstpSeCd,
+      )
+      .sort((a, b) => rowOrderIndex(rows, a) - rowOrderIndex(rows, b));
+
+    for (const child of children) {
+      pushDisplayRow(result, displayedRowKeys, child, depth);
+      appendSubtree(child, depth + 1);
+    }
+  }
+
+  for (const root of roots) {
+    pushDisplayRow(result, displayedRowKeys, root, 0);
+    appendSubtree(root, 1);
+  }
+
+  const orphans = rows.filter((row) => !displayedRowKeys.has(row.rowKey));
+
+  for (const orphan of orphans) {
+    pushDisplayRow(result, displayedRowKeys, orphan, Math.max(0, (orphan.cdLvNo ?? 1) - 1));
+  }
+
+  return result;
+}
diff --git a/apps/as/src/pages/cnstp-code-management/model/cnstp-se-grid-types.ts b/apps/as/src/pages/cnstp-code-management/model/cnstp-se-grid-types.ts
new file mode 100644
index 000000000..7cff8922a
--- /dev/null
+++ b/apps/as/src/pages/cnstp-code-management/model/cnstp-se-grid-types.ts
@@ -0,0 +1,29 @@
+import type { CnstpSeMngResponseDto } from "@/entities/cnstp";
+
+export interface CnstpDisplaySlot {
+  rowKey: string;
+  depth: number;
+  parentRowKey: string | null;
+}
+
+export interface CnstpSeDraft {
+  rowKey: string;
+  parentRowKey: string | null;
+  cdLvNo: number;
+  cnstpSeCd: string;
+  cnstpSeCdNm: string;
+  expln: string;
+  useYn: string;
+}
+
+export interface CnstpSeBaseEntry extends CnstpSeMngResponseDto {
+  rowKey: string;
+}
+
+export interface CnstpSeGridState {
+  baseByKey: Record<string, CnstpSeBaseEntry>;
+  structure: CnstpDisplaySlot[];
+  drafts: Record<string, CnstpSeDraft>;
+  patches: Record<string, Partial<CnstpSeMngResponseDto>>;
+  deletedKeys: Set<string>;
+}
diff --git a/apps/as/src/pages/cnstp-code-management/model/cnstp-se-row-types.ts b/apps/as/src/pages/cnstp-code-management/model/cnstp-se-row-types.ts
new file mode 100644
index 000000000..509662c27
--- /dev/null
+++ b/apps/as/src/pages/cnstp-code-management/model/cnstp-se-row-types.ts
@@ -0,0 +1,8 @@
+import type { CnstpSeMngResponseDto } from "@/entities/cnstp";
+
+export interface CnstpSeRow extends CnstpSeMngResponseDto {
+  rowKey: string;
+  isNew: boolean;
+  isDirty: boolean;
+  isDeleted: boolean;
+}
diff --git a/apps/as/src/pages/cnstp-code-management/ui/cnstp-code-management-page.tsx b/apps/as/src/pages/cnstp-code-management/ui/cnstp-code-management-page.tsx
new file mode 100644
index 000000000..25ad711cb
--- /dev/null
+++ b/apps/as/src/pages/cnstp-code-management/ui/cnstp-code-management-page.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { useCallback } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { useAlertStore } from "@/shared/lib";
+import { useCnstpSeMngPage, useSaveMultiCnstpSeMng } from "@/entities/cnstp";
+import {
+  Button,
+  Skeleton,
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@common/components";
+
+import { useCnstpSeRows } from "../lib/use-cnstp-se-rows";
+import type { CnstpSeRow } from "../model/cnstp-se-row-types";
+
+import { CnstpSeRowComponent } from "./cnstp-se-row";
+
+function CnstpCodeManagementPage() {
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
+
+  const pageQuery = useCnstpSeMngPage({
+    page: 0,
+    size: 500,
+    sort: "cdLvNo,asc",
+  });
+
+  const saveMultiMutation = useSaveMultiCnstpSeMng();
+
+  const handlePersist = useCallback(
+    async (payload: Parameters<typeof saveMultiMutation.mutateAsync>[0]) => {
+      await saveMultiMutation.mutateAsync(payload);
+    },
+    [saveMultiMutation],
+  );
+
+  const {
+    displayRows,
+    canSave,
+    updateRow,
+    addRootRow,
+    addChildRow,
+    removeDraft,
+    markDeleted,
+    resetFromServer,
+    save,
+  } = useCnstpSeRows({
+    serverContent: pageQuery.data?.content,
+    onAlert: alert,
+    onSave: handlePersist,
+  });
+
+  const handleDelete = async (row: CnstpSeRow) => {
+    if (!(await confirm("삭제하시겠습니까?"))) return;
+
+    if (row.isNew) {
+      removeDraft(row.rowKey);
+      return;
+    }
+
+    markDeleted(row.rowKey);
+  };
+
+  const handleSave = async () => {
+    if (!(await confirm("저장하시겠습니까?"))) return;
+
+    const saved = await save();
+    if (!saved) return;
+
+    alert("저장되었습니다.");
+    const result = await pageQuery.refetch();
+    resetFromServer(result.data?.content ?? []);
+  };
+
+  const isSaving = saveMultiMutation.isPending;
+
+  return (
+    <div className="space-y-6 px-[1.8rem] pb-6">
+      <section className="card card-border mx-0 bg-background pb-6 pt-0">
+        <div className="card-header flex flex-wrap items-center justify-between gap-3">
+          <h3 className="text-2xl font-semibold">공종코드 관리</h3>
+          <div className="flex flex-wrap items-center gap-3">
+            <Button type="button" color="green" onClick={addRootRow}>
+              코드 추가
+            </Button>
+            <Button type="button" disabled={!canSave || isSaving} onClick={handleSave}>
+              저장
+            </Button>
+          </div>
+        </div>
+
+        {pageQuery.isPending ? (
+          <div className="flex flex-col gap-2 px-4 pb-4">
+            <Skeleton className="h-[4rem]" />
+            <Skeleton className="h-[16rem]" />
+          </div>
+        ) : displayRows.length === 0 ? (
+          <p className="py-8 text-center text-lg text-muted-foreground">
+            등록된 코드가 없습니다. [코드 추가]로 1단계 코드를 등록하세요.
+          </p>
+        ) : (
+          <div className="max-h-[60rem] overflow-y-auto pt-3">
+            <Table className="w-full">
+              <colgroup>
+                <col width="15%" />
+                <col width="20%" />
+                <col width="35%" />
+                <col width="12%" />
+                <col width="8%" />
+                <col width="10%" />
+              </colgroup>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>코드</TableHead>
+                  <TableHead>코드명</TableHead>
+                  <TableHead>설명</TableHead>
+                  <TableHead>사용 여부</TableHead>
+                  <TableHead>구분</TableHead>
+                  <TableHead>관리</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {displayRows.map(({ row, depth }) => (
+                  <CnstpSeRowComponent
+                    key={row.rowKey}
+                    row={row}
+                    depth={depth}
+                    onChange={(patch) => updateRow(row.rowKey, patch)}
+                    onAddChild={() => addChildRow(row)}
+                    onDelete={() => handleDelete(row)}
+                  />
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+export { CnstpCodeManagementPage };
diff --git a/apps/as/src/pages/cnstp-code-management/ui/cnstp-se-row.tsx b/apps/as/src/pages/cnstp-code-management/ui/cnstp-se-row.tsx
new file mode 100644
index 000000000..090e7d2ba
--- /dev/null
+++ b/apps/as/src/pages/cnstp-code-management/ui/cnstp-se-row.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import {
+  Button,
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  TableCell,
+  TableRow,
+} from "@common/components";
+
+import {
+  canAddChildRow,
+  formatCdLvNo,
+  formatTreeBranchPrefix,
+} from "../model/build-cnstp-display-rows";
+import type { CnstpSeRow } from "../model/cnstp-se-row-types";
+
+interface CnstpSeRowProps {
+  row: CnstpSeRow;
+  depth: number;
+  onChange: (patch: Partial<CnstpSeRow>) => void;
+  onAddChild: () => void;
+  onDelete: () => void;
+}
+
+function CnstpSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: CnstpSeRowProps) {
+  const levelLabel = formatCdLvNo(row.cdLvNo);
+  const branchPrefix = formatTreeBranchPrefix(depth);
+
+  return (
+    <TableRow>
+      <TableCell>
+        <div className="flex min-w-[10rem] items-center gap-1">
+          {branchPrefix ? (
+            <span className="shrink-0 font-mono text-muted">{branchPrefix}</span>
+          ) : null}
+          <Input
+            value={row.cnstpSeCd}
+            onChange={(e) => onChange({ cnstpSeCd: e.target.value })}
+            placeholder="코드"
+            maxLength={10}
+            disabled={!row.isNew}
+            className="flex-1"
+          />
+        </div>
+      </TableCell>
+      <TableCell>
+        <Input
+          value={row.cnstpSeCdNm ?? ""}
+          onChange={(e) => onChange({ cnstpSeCdNm: e.target.value })}
+          placeholder="코드명"
+          maxLength={100}
+        />
+      </TableCell>
+      <TableCell>
+        <Input
+          value={row.expln ?? ""}
+          onChange={(e) => onChange({ expln: e.target.value })}
+          placeholder="설명"
+          maxLength={1000}
+        />
+      </TableCell>
+      <TableCell align="center">
+        <RadioGroup
+          value={row.useYn === "N" ? "N" : "Y"}
+          onValueChange={(v) => onChange({ useYn: v })}
+          className="flex justify-center gap-4"
+        >
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="Y" id={`${row.rowKey}-use-y`} />
+            <Label htmlFor={`${row.rowKey}-use-y`}>예</Label>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="N" id={`${row.rowKey}-use-n`} />
+            <Label htmlFor={`${row.rowKey}-use-n`}>아니오</Label>
+          </div>
+        </RadioGroup>
+      </TableCell>
+      <TableCell align="center">{levelLabel}</TableCell>
+      <TableCell align="center">
+        <div className="flex justify-center gap-2">
+          <Button
+            type="button"
+            size="sm"
+            color="white"
+            disabled={!canAddChildRow()}
+            onClick={onAddChild}
+          >
+            하위추가
+          </Button>
+          <Button type="button" size="sm" color="gray" onClick={onDelete}>
+            삭제
+          </Button>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export { CnstpSeRowComponent };
diff --git a/apps/as/src/pages/esntl-atch-file-mng/index.ts b/apps/as/src/pages/esntl-atch-file-mng/index.ts
new file mode 100644
index 000000000..73333e63c
--- /dev/null
+++ b/apps/as/src/pages/esntl-atch-file-mng/index.ts
@@ -0,0 +1 @@
+export { EsntlAtchFileMngPage } from "./ui/esntl-atch-file-mng-page";
diff --git a/apps/as/src/pages/esntl-atch-file-mng/model/esntl-atch-file-columns.tsx b/apps/as/src/pages/esntl-atch-file-mng/model/esntl-atch-file-columns.tsx
new file mode 100644
index 000000000..ad5f32c62
--- /dev/null
+++ b/apps/as/src/pages/esntl-atch-file-mng/model/esntl-atch-file-columns.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { createColumnHelper } from "@tanstack/react-table";
+
+import type { Code } from "@/entities/code";
+import { findCodeLabel } from "@/entities/code";
+import type { EsntlAtchFileMng } from "@/entities/esntl";
+import { Button } from "@common/components";
+
+const columnHelper = createColumnHelper<EsntlAtchFileMng>();
+
+interface CreateEsntlAtchFileColumnsOptions {
+  docSeCodes: Code[] | undefined;
+  onEdit: (row: EsntlAtchFileMng) => void;
+  onDelete: (row: EsntlAtchFileMng) => void;
+}
+
+function formatYn(value: string | undefined) {
+  if (value === "Y") return "예";
+  if (value === "N") return "아니오";
+  return "—";
+}
+
+function formatOptional(value: string | undefined) {
+  return value?.trim() ? value : "—";
+}
+
+export function createEsntlAtchFileColumns({
+  docSeCodes,
+  onEdit,
+  onDelete,
+}: CreateEsntlAtchFileColumnsOptions) {
+  return [
+    columnHelper.accessor("esntlAtchFileId", {
+      header: "필수첨부파일아이디",
+      meta: { align: "center" },
+    }),
+    columnHelper.accessor("docSeComCd", {
+      header: "문서구분",
+      cell: ({ getValue }) => findCodeLabel(docSeCodes, getValue()) || getValue() || "—",
+    }),
+    columnHelper.accessor("esntlAtchFileNm", {
+      header: "필수첨부파일명",
+      meta: { align: "left" },
+    }),
+    columnHelper.accessor("esntlAtchYn", {
+      header: "필수첨부여부",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatYn(getValue()),
+    }),
+    columnHelper.accessor("esntlAtchFileRmrk", {
+      header: "비고",
+      meta: { align: "left" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("regDt", {
+      header: "등록일시",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("mdfcnDt", {
+      header: "수정일시",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.display({
+      id: "actions",
+      header: "관리",
+      cell: ({ row }) => (
+        <div className="flex justify-center gap-2" onClick={(e) => e.stopPropagation()}>
+          <Button type="button" size="sm" color="white" onClick={() => onEdit(row.original)}>
+            수정
+          </Button>
+          <Button type="button" size="sm" color="gray" onClick={() => onDelete(row.original)}>
+            삭제
+          </Button>
+        </div>
+      ),
+    }),
+  ];
+}
diff --git a/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-form-dialog.tsx b/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-form-dialog.tsx
new file mode 100644
index 000000000..0f1faf8a1
--- /dev/null
+++ b/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-form-dialog.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+
+import { CodeSelect } from "@/entities/code";
+import type { EsntlAtchFileMng } from "@/entities/esntl";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Textarea,
+} from "@common/components";
+
+export interface EsntlAtchFileFormValues {
+  docSeComCd: string;
+  esntlAtchFileNm: string;
+  esntlAtchYn: "Y" | "N";
+  esntlAtchFileRmrk: string;
+}
+
+interface EsntlAtchFileFormDialogProps {
+  mode: "create" | "edit";
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initial?: EsntlAtchFileMng | null;
+  isSubmitting?: boolean;
+  onSubmit: (values: EsntlAtchFileFormValues) => void;
+}
+
+function EsntlAtchFileFormDialog({
+  mode,
+  open,
+  onOpenChange,
+  initial,
+  isSubmitting,
+  onSubmit,
+}: EsntlAtchFileFormDialogProps) {
+  const { register, handleSubmit, reset, setValue, watch } = useForm<EsntlAtchFileFormValues>({
+    defaultValues: {
+      docSeComCd: "",
+      esntlAtchFileNm: "",
+      esntlAtchYn: "Y",
+      esntlAtchFileRmrk: "",
+    },
+  });
+
+  const docSeComCd = watch("docSeComCd");
+  const esntlAtchYn = watch("esntlAtchYn");
+
+  useEffect(() => {
+    if (!open) return;
+
+    if (mode === "edit" && initial) {
+      reset({
+        docSeComCd: initial.docSeComCd ?? "",
+        esntlAtchFileNm: initial.esntlAtchFileNm ?? "",
+        esntlAtchYn: initial.esntlAtchYn ?? "Y",
+        esntlAtchFileRmrk: initial.esntlAtchFileRmrk ?? "",
+      });
+      return;
+    }
+
+    reset({
+      docSeComCd: "",
+      esntlAtchFileNm: "",
+      esntlAtchYn: "Y",
+      esntlAtchFileRmrk: "",
+    });
+  }, [open, mode, initial, reset]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[52rem]">
+        <DialogHeader>
+          <DialogTitle>{mode === "create" ? "필수첨부파일 등록" : "필수첨부파일 수정"}</DialogTitle>
+        </DialogHeader>
+        <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
+          {mode === "edit" && initial ? (
+            <div className="space-y-2">
+              <Label htmlFor="esntlAtchFileId">필수첨부파일아이디</Label>
+              <p id="esntlAtchFileId" className="p-1 text-[1.3rem]">
+                {initial.esntlAtchFileId}
+              </p>
+            </div>
+          ) : null}
+          <div className="space-y-2">
+            <Label>문서구분</Label>
+            <CodeSelect
+              upCd="ASDOCSECD"
+              value={docSeComCd}
+              onValueChange={(v) => setValue("docSeComCd", v, { shouldValidate: true })}
+              placeholder="문서구분 선택"
+              className="w-full"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="esntlAtchFileNm">필수첨부파일명</Label>
+            <Input
+              id="esntlAtchFileNm"
+              placeholder="예: 사업계획서"
+              {...register("esntlAtchFileNm", { required: true })}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>필수첨부여부</Label>
+            <RadioGroup
+              value={esntlAtchYn}
+              onValueChange={(v) =>
+                setValue("esntlAtchYn", v as "Y" | "N", { shouldValidate: true })
+              }
+              className="flex gap-6"
+            >
+              <div className="flex items-center gap-2">
+                <RadioGroupItem value="Y" id="esntlAtchYn-y" />
+                <Label htmlFor="esntlAtchYn-y">예</Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <RadioGroupItem value="N" id="esntlAtchYn-n" />
+                <Label htmlFor="esntlAtchYn-n">아니오</Label>
+              </div>
+            </RadioGroup>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="esntlAtchFileRmrk">비고</Label>
+            <Textarea
+              id="esntlAtchFileRmrk"
+              rows={3}
+              placeholder="비고를 입력하세요"
+              {...register("esntlAtchFileRmrk")}
+              className="!text-xl"
+            />
+          </div>
+          <DialogFooter>
+            <Button type="button" color="white" onClick={() => onOpenChange(false)}>
+              취소
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              저장
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { EsntlAtchFileFormDialog };
diff --git a/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-list.tsx b/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-list.tsx
new file mode 100644
index 000000000..661b3a822
--- /dev/null
+++ b/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-list.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+
+import { useDataTable } from "@/shared/lib";
+import { useCodeList } from "@/entities/code";
+import {
+  type EsntlAtchFileMng,
+  type EsntlAtchFileMngSearchParams,
+  useCreateEsntlAtchFileMng,
+  useDeleteEsntlAtchFileMng,
+  useEsntlAtchFileMngPage,
+  useUpdateEsntlAtchFileMng,
+} from "@/entities/esntl";
+import { Button } from "@common/components";
+
+import { createEsntlAtchFileColumns } from "../model/esntl-atch-file-columns";
+
+import {
+  EsntlAtchFileFormDialog,
+  type EsntlAtchFileFormValues,
+} from "./esntl-atch-file-form-dialog";
+
+interface EsntlAtchFileListProps {
+  searchParams: EsntlAtchFileMngSearchParams;
+  pagination: PaginationState;
+  onPaginationChange: (pagination: PaginationState) => void;
+}
+
+function EsntlAtchFileList({
+  searchParams,
+  pagination,
+  onPaginationChange,
+}: EsntlAtchFileListProps) {
+  const { confirm } = useConfirm();
+  const { data: docSeCodes } = useCodeList("ASDOCSECD");
+
+  const [dialogMode, setDialogMode] = useState<"create" | "edit" | null>(null);
+  const [editingRow, setEditingRow] = useState<EsntlAtchFileMng | null>(null);
+
+  const createMutation = useCreateEsntlAtchFileMng();
+  const updateMutation = useUpdateEsntlAtchFileMng();
+  const deleteMutation = useDeleteEsntlAtchFileMng();
+
+  const queryParams = useMemo(() => {
+    return {
+      docSeComCd: searchParams.docSeComCd,
+      page: pagination.pageIndex,
+      size: pagination.pageSize,
+      sort: searchParams.sort,
+    };
+  }, [searchParams, pagination]);
+
+  const pageQuery = useEsntlAtchFileMngPage(queryParams);
+
+  const handleDelete = useCallback(
+    async (row: EsntlAtchFileMng) => {
+      if (!(await confirm("삭제하시겠습니까?"))) return;
+      await deleteMutation.mutateAsync(row.esntlAtchFileId);
+    },
+    [confirm, deleteMutation],
+  );
+
+  const columns = useMemo(
+    () =>
+      createEsntlAtchFileColumns({
+        docSeCodes,
+        onEdit: (row) => {
+          setEditingRow(row);
+          setDialogMode("edit");
+        },
+        onDelete: handleDelete,
+      }),
+    [docSeCodes, handleDelete],
+  );
+
+  const { tableComponent } = useDataTable({
+    query: pageQuery,
+    tableOptions: {
+      columns,
+      state: { pagination },
+      onPaginationChange: (updater) => {
+        const next = typeof updater === "function" ? updater(pagination) : updater;
+        onPaginationChange(next);
+      },
+      getCoreRowModel: getCoreRowModel(),
+      manualPagination: true,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
+  });
+
+  const handleFormSubmit = async (values: EsntlAtchFileFormValues) => {
+    if (!values.docSeComCd || !values.esntlAtchFileNm || !values.esntlAtchYn) return;
+
+    const body = {
+      docSeComCd: values.docSeComCd,
+      esntlAtchFileNm: values.esntlAtchFileNm,
+      esntlAtchYn: values.esntlAtchYn,
+      esntlAtchFileRmrk: values.esntlAtchFileRmrk || undefined,
+    };
+
+    if (dialogMode === "create") {
+      if (!(await confirm("등록하시겠습니까?"))) return;
+      await createMutation.mutateAsync(body);
+    } else if (dialogMode === "edit" && editingRow) {
+      await updateMutation.mutateAsync({
+        esntlAtchFileId: editingRow.esntlAtchFileId,
+        body,
+      });
+    }
+
+    setDialogMode(null);
+    setEditingRow(null);
+  };
+
+  const handleOpenCreate = () => {
+    setEditingRow(null);
+    setDialogMode("create");
+  };
+
+  return (
+    <section className="card card-border mx-0 bg-background pt-0">
+      <div className="card-header flex items-center justify-between">
+        <h3 className="text-2xl font-semibold">필수첨부파일 목록</h3>
+        <Button type="button" color="green" onClick={handleOpenCreate}>
+          등록
+        </Button>
+      </div>
+      {tableComponent}
+      {dialogMode ? (
+        <EsntlAtchFileFormDialog
+          mode={dialogMode}
+          open={Boolean(dialogMode)}
+          onOpenChange={(open) => {
+            if (!open) {
+              setDialogMode(null);
+              setEditingRow(null);
+            }
+          }}
+          initial={dialogMode === "edit" ? editingRow : null}
+          isSubmitting={createMutation.isPending || updateMutation.isPending}
+          onSubmit={handleFormSubmit}
+        />
+      ) : null}
+    </section>
+  );
+}
+
+export { EsntlAtchFileList };
diff --git a/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-mng-page.tsx b/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-mng-page.tsx
new file mode 100644
index 000000000..425169983
--- /dev/null
+++ b/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-mng-page.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { useState } from "react";
+
+import type { PaginationState } from "@tanstack/react-table";
+
+import { useCodeList } from "@/entities/code";
+import type { EsntlAtchFileMngSearchParams } from "@/entities/esntl";
+import {
+  Button,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+
+import { EsntlAtchFileList } from "./esntl-atch-file-list";
+
+const ALL_DOC_SE_VALUE = "__ALL__";
+const ESNTL_ATCH_FILE_ALL_DOC_SE = "";
+
+const DEFAULT_ESNTL_ATCH_FILE_PAGE_INDEX = 0;
+const DEFAULT_ESNTL_ATCH_FILE_PAGE_SIZE = 10;
+const DEFAULT_ESNTL_ATCH_FILE_SORT = "regDt,desc";
+
+const DEFAULT_SEARCH_PARAMS = {
+  page: DEFAULT_ESNTL_ATCH_FILE_PAGE_INDEX,
+  size: DEFAULT_ESNTL_ATCH_FILE_PAGE_SIZE,
+  sort: DEFAULT_ESNTL_ATCH_FILE_SORT,
+};
+
+function EsntlAtchFileMngPage() {
+  const { data: docSeCodes, isPending: isDocSeLoading } = useCodeList("ASDOCSECD");
+
+  const [docSeComCd, setDocSeComCd] = useState(ESNTL_ATCH_FILE_ALL_DOC_SE);
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: DEFAULT_ESNTL_ATCH_FILE_PAGE_INDEX,
+    pageSize: DEFAULT_ESNTL_ATCH_FILE_PAGE_SIZE,
+  });
+  const [searchParams, setSearchParams] =
+    useState<EsntlAtchFileMngSearchParams>(DEFAULT_SEARCH_PARAMS);
+
+  const handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setPagination((prev) => ({ ...prev, pageIndex: DEFAULT_ESNTL_ATCH_FILE_PAGE_INDEX }));
+    setSearchParams({
+      ...DEFAULT_SEARCH_PARAMS,
+      docSeComCd,
+    });
+  };
+
+  return (
+    <div className="space-y-6 px-[1.8rem] pb-6">
+      <section className="card card-border mx-0 bg-background">
+        <form className="flex flex-wrap items-end gap-4 p-4" onSubmit={handleSearch}>
+          <div className="flex flex-wrap items-center gap-3">
+            <Label htmlFor="docSeComCd">문서구분</Label>
+            <Select
+              value={docSeComCd || ALL_DOC_SE_VALUE}
+              onValueChange={(value) =>
+                setDocSeComCd(value === ALL_DOC_SE_VALUE ? ESNTL_ATCH_FILE_ALL_DOC_SE : value)
+              }
+              disabled={isDocSeLoading}
+            >
+              <SelectTrigger id="docSeComCd" className="w-[20rem]">
+                <SelectValue placeholder={isDocSeLoading ? "로딩 중…" : "전체"} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ALL_DOC_SE_VALUE}>전체</SelectItem>
+                {docSeCodes?.map((item) => (
+                  <SelectItem key={item.lwpoCd} value={item.lwpoCd}>
+                    {item.lwpoCdNm}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button type="submit">조회</Button>
+          </div>
+        </form>
+      </section>
+
+      <EsntlAtchFileList
+        searchParams={searchParams}
+        pagination={pagination}
+        onPaginationChange={setPagination}
+      />
+    </div>
+  );
+}
+
+export { EsntlAtchFileMngPage };
diff --git a/apps/as/src/pages/home/index.ts b/apps/as/src/pages/home/index.ts
new file mode 100644
index 000000000..97a463408
--- /dev/null
+++ b/apps/as/src/pages/home/index.ts
@@ -0,0 +1 @@
+export { MainPage } from "./ui/main-page";
diff --git a/apps/as/src/pages/home/ui/main-page.tsx b/apps/as/src/pages/home/ui/main-page.tsx
new file mode 100644
index 000000000..f757224dc
--- /dev/null
+++ b/apps/as/src/pages/home/ui/main-page.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+export function MainPage() {
+  return (
+    <div className="flex h-full flex-col items-center justify-center py-10">
+      <h1 className="mb-4 text-3xl font-bold">Home</h1>
+    </div>
+  );
+}
diff --git a/apps/as/src/pages/instl-sncn/index.ts b/apps/as/src/pages/instl-sncn/index.ts
new file mode 100644
index 000000000..570133ba4
--- /dev/null
+++ b/apps/as/src/pages/instl-sncn/index.ts
@@ -0,0 +1,4 @@
+export { CnfmListPage } from "./ui/cnfm-list-page";
+export { CnfmViewPage } from "./ui/cnfm-view-page";
+export { CnfmRegistPage } from "./ui/cnfm-regist-page";
+export { CnfmModifyPage } from "./ui/cnfm-modify-page";
diff --git a/apps/as/src/pages/instl-sncn/ui/cnfm-list-page.tsx b/apps/as/src/pages/instl-sncn/ui/cnfm-list-page.tsx
new file mode 100644
index 000000000..8597baf69
--- /dev/null
+++ b/apps/as/src/pages/instl-sncn/ui/cnfm-list-page.tsx
@@ -0,0 +1,415 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { dayjs } from "@/shared/lib";
+import { useCodeList } from "@/entities/code";
+import {
+  INSTL_SNCN_REGISTER_SELECTION_KEY,
+  InstlSncnApi,
+  type InstlSncnMngSearchParams,
+} from "@/entities/instl-sncn";
+
+import "./cnfm-page.css";
+
+const TASK_OPTIONS = [
+  { value: "", label: "전체" },
+  { value: "SF", label: "하수처리시설" },
+  { value: "SP", label: "하수관로" },
+  { value: "RE", label: "재이용수" },
+];
+
+const SIDO_OPTIONS = [
+  { value: "", label: "전체" },
+  { value: "11", label: "서울특별시" },
+  { value: "26", label: "부산광역시" },
+  { value: "27", label: "대구광역시" },
+  { value: "28", label: "인천광역시" },
+  { value: "29", label: "광주광역시" },
+  { value: "30", label: "대전광역시" },
+  { value: "31", label: "울산광역시" },
+  { value: "36", label: "세종특별자치시" },
+  { value: "41", label: "경기도" },
+  { value: "43", label: "충청북도" },
+  { value: "44", label: "충청남도" },
+  { value: "45", label: "전라북도" },
+  { value: "46", label: "전라남도" },
+  { value: "47", label: "경상북도" },
+  { value: "48", label: "경상남도" },
+  { value: "50", label: "제주특별자치도" },
+];
+
+type StepCode = "SV" | "ST" | "ER" | "TE" | "TR" | "TP" | "TA";
+
+const STEPS: { code: StepCode; label: string }[] = [
+  { code: "SV", label: "저장" },
+  { code: "ST", label: "신청완료" },
+  { code: "ER", label: "환경청 검토" },
+  { code: "TE", label: "기술검토" },
+  { code: "TR", label: "검토결과 회신" },
+  { code: "TP", label: "기술평가" },
+  { code: "TA", label: "최종승인" },
+];
+
+const PAGE_GROUP_SIZE = 5;
+
+function CnfmListPage() {
+  const router = useRouter();
+  const [bizNm, setBizNm] = useState("");
+  const [taskSeComCd, setTaskSeComCd] = useState("");
+  const [sidoComCd, setSidoComCd] = useState("");
+  const [sggComCd, setSggComCd] = useState("");
+  const [search, setSearch] = useState<InstlSncnMngSearchParams>({
+    bizNm: "",
+    taskSeComCd: "",
+    sidoComCd: "",
+    sggComCd: "",
+  });
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const [taskDialogOpen, setTaskDialogOpen] = useState(false);
+  const [selectedTaskSeComCd, setSelectedTaskSeComCd] = useState<string[]>([]);
+
+  const { data: fnrsCodeList = [] } = useCodeList("INSTL");
+
+  useEffect(() => {
+    if (!taskDialogOpen) return;
+    if (selectedTaskSeComCd.length) return;
+    if (fnrsCodeList.length === 0) return; 
+   // setSelectedTaskSeComCd([fnrsCodeList[0].lwpoCd]);
+  }, [taskDialogOpen, selectedTaskSeComCd, fnrsCodeList]);
+
+  const query = useQuery({
+    queryKey: ["instl-sncn-list", search, pageIndex, pageSize],
+    queryFn: () =>
+      InstlSncnApi.getPage({
+        ...search,
+        page: pageIndex,
+        size: pageSize,
+        sort: "regDt,desc",
+      }),
+  });
+
+  const totalPages = query.data?.totalPages ?? 0;
+
+  const pageGroupStart = Math.floor(pageIndex / PAGE_GROUP_SIZE) * PAGE_GROUP_SIZE;
+  const pageNumbers = useMemo(() => {
+    const end = Math.min(pageGroupStart + PAGE_GROUP_SIZE, totalPages);
+    return Array.from({ length: end - pageGroupStart }, (_, i) => pageGroupStart + i);
+  }, [pageGroupStart, totalPages]);
+
+  const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setPageIndex(0);
+    setSearch({ bizNm, taskSeComCd, sidoComCd, sggComCd });
+  };
+
+  const handleOpenTaskDialog = () => {
+    //setSelectedTaskSeComCd((prev) => (prev && prev.length ? prev : [fnrsCodeList[0]?.lwpoCd || ""]));
+    setTaskDialogOpen(true);
+  };
+
+  const handleConfirmTaskDialog = () => {
+    if (!selectedTaskSeComCd || selectedTaskSeComCd.length === 0) {
+      alert("하나 이상의 업무구분을 선택하세요.");
+      return;
+    }
+
+    // prepare arrays of selected codes and names
+    const selectedCodes = selectedTaskSeComCd;
+    const selectedNames = selectedTaskSeComCd.map((code) => fnrsCodeList.find((item) => item.lwpoCd === code)?.lwpoCdNm || "");
+    sessionStorage.setItem(
+      INSTL_SNCN_REGISTER_SELECTION_KEY,
+      JSON.stringify({
+        taskSeComCdList: selectedCodes,
+        taskSeComCdNmList: selectedNames 
+      })
+    );
+    setTaskDialogOpen(false);
+    router.push("/instl-sncn/register");
+  };
+
+  return (
+    <div className="cnfm-page-wrap">
+      {/* 검색 영역 */}
+      <div className="cnfm-card">
+        <form onSubmit={handleSearch} className="cnfm-search-bar">
+          <div className="cnfm-search-field">
+            <label className="cnfm-search-label" htmlFor="sidoComCd">시도</label>
+            <select
+              id="sidoComCd"
+              className="cnfm-select"
+              value={sidoComCd}
+              onChange={(e) => setSidoComCd(e.target.value)}
+            >
+              {SIDO_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="cnfm-search-field">
+            <label className="cnfm-search-label" htmlFor="sggComCd">시군구</label>
+            <select
+              id="sggComCd"
+              className="cnfm-select"
+              value={sggComCd}
+              onChange={(e) => setSggComCd(e.target.value)}
+            >
+              <option value="">전체</option>
+            </select>
+          </div>
+
+          <div className="cnfm-search-field cnfm-search-field--grow">
+            <label className="cnfm-search-label" htmlFor="bizNm">사업명</label>
+            <input
+              id="bizNm"
+              type="text"
+              className="cnfm-input"
+              value={bizNm}
+              onChange={(e) => setBizNm(e.target.value)}
+              placeholder="사업명을 입력하세요"
+            />
+          </div>
+
+          <div className="cnfm-search-field">
+            <label className="cnfm-search-label" htmlFor="taskSeComCd">구분</label>
+            <select
+              id="taskSeComCd"
+              className="cnfm-select cnfm-select--wide"
+              value={taskSeComCd}
+              onChange={(e) => setTaskSeComCd(e.target.value)}
+            >
+              {TASK_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+          </div>
+
+          <button type="submit" className="cnfm-btn-search">검색</button>
+        </form>
+      </div>
+
+      {/* 목록 영역 */}
+      <div className="cnfm-card mt-4">
+        <div className="cnfm-list-header">
+          <h3 className="cnfm-list-title">설치인가 목록</h3>
+          <div className="cnfm-list-actions">
+            <button
+              type="button"
+              className="cnfm-btn-register"
+              onClick={handleOpenTaskDialog}
+            >
+              ✎ 신청
+            </button>
+            <select
+              className="cnfm-select"
+              value={pageSize}
+              onChange={(e) => {
+                setPageIndex(0);
+                setPageSize(Number(e.target.value));
+              }}
+            >
+              {[10, 20, 30, 50].map((size) => (
+                <option key={size} value={size}>{size}개</option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table">
+            <thead>
+              <tr>
+                <th>시도</th>
+                <th>시군구</th>
+                <th>사업명</th>
+                <th>구분</th>
+                <th>담당자</th>
+                <th>해당기관</th>
+                <th>진행상황</th>
+                <th>신청일</th>
+              </tr>
+            </thead>
+            <tbody>
+              {query.isLoading && (
+                <tr>
+                  <td colSpan={8} className="cnfm-td-empty">조회 중입니다...</td>
+                </tr>
+              )}
+              {!query.isLoading && (query.data?.content?.length ?? 0) === 0 && (
+                <tr>
+                  <td colSpan={8} className="cnfm-td-empty">조회 결과가 없습니다.</td>
+                </tr>
+              )}
+              {(query.data?.content ?? []).map((row) => {
+                const currentStepIndex = STEPS.findIndex((s) => s.code === row.prgrsSttsComCd);
+                return (
+                  <tr
+                    key={row.instlSncnDocNo}
+                    className="cnfm-row-clickable"
+                    onClick={() => router.push(`/instl-sncn/${row.instlSncnDocNo}`)}
+                  >
+                    <td>{row.sido || "-"}</td>
+                    <td>{row.gugun|| "-"}</td>
+                    <td className="text-left">{row.bizNm || "-"}</td>
+                    <td>{row.taskSeCdNm || row.taskSeComCd || "-"}</td>
+                    <td>{row.aplcntNm || "-"}</td>
+                    <td>{row.envoSeCdNm || "-"}</td>
+                    <td>
+                      <div className="cnfm-step-wrap">
+                        <div className="cnfm-step-row">
+                          {STEPS.slice(0, 4).map((step, index) => {
+                            const state =
+                              index < currentStepIndex
+                                ? "completed"
+                                : index === currentStepIndex
+                                ? "current"
+                                : "pending";
+                            return (
+                              <span key={step.code} className={`cnfm-step-badge cnfm-step-badge--${state}`}>
+                                <span className={`cnfm-step-dot cnfm-step-dot--${state}`} />
+                                {step.label}
+                              </span>
+                            );
+                          })}
+                        </div>
+                        <div className="cnfm-step-row">
+                          {STEPS.slice(4).map((step, i) => {
+                            const index = i + 4;
+                            const state =
+                              index < currentStepIndex
+                                ? "completed"
+                                : index === currentStepIndex
+                                ? "current"
+                                : "pending";
+                            return (
+                              <span key={step.code} className={`cnfm-step-badge cnfm-step-badge--${state}`}>
+                                <span className={`cnfm-step-dot cnfm-step-dot--${state}`} />
+                                {step.label}
+                              </span>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    </td>
+                    <td>{row.regDt ? dayjs(row.regDt).format("YYYY-MM-DD") : "-"}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        {/* 페이지네이션 */}
+        <div className="cnfm-pagination">
+          <button
+            type="button"
+            className="cnfm-page-btn"
+            onClick={() => setPageIndex(0)}
+            disabled={pageIndex === 0}
+          >
+            «
+          </button>
+          <button
+            type="button"
+            className="cnfm-page-btn"
+            onClick={() => setPageIndex((prev) => Math.max(0, prev - 1))}
+            disabled={pageIndex === 0}
+          >
+            ‹
+          </button>
+
+          {pageNumbers.map((pageNo) => (
+            <button
+              type="button"
+              key={pageNo}
+              className={`cnfm-page-btn ${pageNo === pageIndex ? "active" : ""}`}
+              onClick={() => setPageIndex(pageNo)}
+            >
+              {pageNo + 1}
+            </button>
+          ))}
+
+          <button
+            type="button"
+            className="cnfm-page-btn"
+            onClick={() => setPageIndex((prev) => Math.min(Math.max(0, totalPages - 1), prev + 1))}
+            disabled={pageIndex >= totalPages - 1}
+          >
+            ›
+          </button>
+          <button
+            type="button"
+            className="cnfm-page-btn"
+            onClick={() => setPageIndex(Math.max(0, totalPages - 1))}
+            disabled={pageIndex >= totalPages - 1}
+          >
+            »
+          </button>
+        </div>
+      </div>
+
+      {taskDialogOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
+          <div className="w-[72rem] max-w-[95vw] overflow-hidden rounded-md border bg-white shadow-xl">
+            <div className="flex items-center justify-between border-b px-6 py-4">
+              <h4 className="text-[2rem] font-bold text-gray-700">업무구분 선택</h4>
+              <button
+                type="button"
+                className="rounded border border-gray-300 px-4 py-1 text-[1.2rem] text-gray-600 hover:bg-gray-50"
+                onClick={() => setTaskDialogOpen(false)}
+              >
+                닫기
+              </button>
+            </div>
+
+            <div className="px-6 py-5">
+              <div className="flex flex-wrap items-center gap-8 text-[1.5rem]">
+                {fnrsCodeList.map((item) => (
+                  <label key={item.lwpoCd} className="flex cursor-pointer items-center gap-2">
+                    <input
+                      type="checkbox"
+                      name="taskSeComCdSelect"
+                      value={item.lwpoCd}
+                      checked={selectedTaskSeComCd.includes(item.lwpoCd)}
+                      onChange={() => {
+                        setSelectedTaskSeComCd((prev) =>
+                          prev.includes(item.lwpoCd) ? prev.filter((v) => v !== item.lwpoCd) : [...prev, item.lwpoCd],
+                        );
+                      }}
+                    />
+                    {item.lwpoCdNm}
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2 border-t px-6 py-4">
+              <button
+                type="button"
+                className="rounded border border-gray-300 px-5 py-2 text-[1.3rem] text-gray-700 hover:bg-gray-50"
+                onClick={() => setTaskDialogOpen(false)}
+              >
+                취소
+              </button>
+                <button
+                type="button"
+                className="rounded bg-blue-500 px-5 py-2 text-[1.3rem] font-semibold text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:bg-gray-300"
+                onClick={handleConfirmTaskDialog}
+                disabled={!selectedTaskSeComCd || selectedTaskSeComCd.length === 0}
+              >
+                확인
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { CnfmListPage };
diff --git a/apps/as/src/pages/instl-sncn/ui/cnfm-modify-page.tsx b/apps/as/src/pages/instl-sncn/ui/cnfm-modify-page.tsx
new file mode 100644
index 000000000..0aaf6de0e
--- /dev/null
+++ b/apps/as/src/pages/instl-sncn/ui/cnfm-modify-page.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { CnfmRegistPage } from "./cnfm-regist-page";
+
+import { InstlSncnApi } from "@/entities/instl-sncn";
+
+import "./cnfm-page.css";
+
+function CnfmModifyPage({ id }: { id: string }) {
+  const query = useQuery({
+    // share cache with view page
+    queryKey: ["instl-sncn-detail", id],
+    queryFn: () => InstlSncnApi.getById(id),
+  });
+
+  if (query.isLoading) {
+    return <div className="mt-6 text-[1.4rem]">수정 정보를 불러오는 중입니다...</div>;
+  }
+
+  if (!query.data) {
+    return <div className="mt-6 text-[1.4rem]">수정 대상을 찾을 수 없습니다.</div>;
+  }
+
+  const data = query.data;
+
+  if (!data) return <div className="mt-6 text-[1.4rem]">수정 대상을 찾을 수 없습니다.</div>;
+
+  return (
+    <div className="mt-6">
+      <CnfmRegistPage initialData={data} />
+    </div>
+  );
+}
+
+export { CnfmModifyPage };
diff --git a/apps/as/src/pages/instl-sncn/ui/cnfm-page.css b/apps/as/src/pages/instl-sncn/ui/cnfm-page.css
new file mode 100644
index 000000000..49d7a6bce
--- /dev/null
+++ b/apps/as/src/pages/instl-sncn/ui/cnfm-page.css
@@ -0,0 +1,490 @@
+/* ============================
+   페이지 레이아웃
+============================= */
+.cnfm-page-wrap {
+  padding: 2rem 2.4rem;
+}
+
+/* ============================
+   카드
+============================= */
+.cnfm-card {
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #ffffff;
+  padding: 1.6rem 2rem;
+}
+
+.cnfm-card.mt-4 {
+  margin-top: 1.6rem;
+}
+
+/* ============================
+   검색 바
+============================= */
+.cnfm-search-bar {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+  flex-wrap: wrap;
+}
+
+.cnfm-search-field {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.cnfm-search-field--grow {
+  flex: 1;
+  min-width: 18rem;
+}
+
+.cnfm-search-label {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #374151;
+  white-space: nowrap;
+}
+
+.cnfm-input {
+  height: 3.6rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  padding: 0 1rem;
+  font-size: 1.3rem;
+  color: #111827;
+  width: 100%;
+  outline: none;
+  background: #fff;
+}
+
+.cnfm-input:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+}
+
+.cnfm-select {
+  height: 3.6rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  padding: 0 0.8rem;
+  font-size: 1.3rem;
+  color: #111827;
+  background: #fff;
+  min-width: 11rem;
+  cursor: pointer;
+  outline: none;
+}
+
+.cnfm-select--wide {
+  min-width: 16rem;
+}
+
+.cnfm-select:focus {
+  border-color: #3b82f6;
+}
+
+.cnfm-btn-search {
+  height: 3.6rem;
+  padding: 0 2rem;
+  background: #3b82f6;
+  color: #fff;
+  font-size: 1.3rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.cnfm-btn-search:hover {
+  background: #2563eb;
+}
+
+/* ============================
+   목록 헤더
+============================= */
+.cnfm-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.2rem;
+}
+
+.cnfm-list-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.cnfm-list-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.cnfm-btn-register {
+  height: 3.4rem;
+  padding: 0 1.6rem;
+  background: #22c55e;
+  color: #fff;
+  font-size: 1.3rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.cnfm-btn-register:hover {
+  background: #16a34a;
+}
+
+/* ============================
+   테이블
+============================= */
+.cnfm-table-wrap {
+  overflow-x: auto;
+}
+
+.cnfm-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 1.3rem;
+}
+
+.cnfm-table th,
+.cnfm-table td {
+  border-bottom: 1px solid #e5e7eb;
+  padding: 1.2rem 0.8rem;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.cnfm-table thead th {
+  background: #f8fafc;
+  color: #374151;
+  font-weight: 600;
+  font-size: 1.25rem;
+  border-bottom: 2px solid #e2e8f0;
+}
+
+.cnfm-table tbody td {
+  color: #111827;
+}
+
+.cnfm-td-empty {
+  padding: 3rem 0;
+  color: #9ca3af;
+  font-size: 1.3rem;
+}
+
+.cnfm-row-clickable {
+  cursor: pointer;
+}
+
+.cnfm-row-clickable:hover {
+  background: #f8fafc;
+}
+
+/* ============================
+   진행상황 스텝 배지
+============================= */
+.cnfm-step-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-start;
+}
+
+.cnfm-step-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: nowrap;
+}
+
+.cnfm-step-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border-radius: 9999px;
+  padding: 0.3rem 0.9rem;
+  font-size: 1.15rem;
+  font-weight: 500;
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+
+.cnfm-step-badge--completed {
+  background: #dbeafe;
+  border-color: #93c5fd;
+  color: #1d4ed8;
+}
+
+.cnfm-step-badge--current {
+  background: #fed7aa;
+  border-color: #fb923c;
+  color: #c2410c;
+  font-weight: 700;
+}
+
+.cnfm-step-badge--pending {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+  color: #9ca3af;
+}
+
+.cnfm-step-dot {
+  display: inline-block;
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.cnfm-step-dot--completed {
+  background: #3b82f6;
+}
+
+.cnfm-step-dot--current {
+  background: #f97316;
+}
+
+.cnfm-step-dot--pending {
+  background: #d1d5db;
+}
+
+/* ============================
+   페이지네이션
+============================= */
+.cnfm-pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 1.6rem;
+  padding-bottom: 0.4rem;
+}
+
+.cnfm-page-btn {
+  min-width: 3.2rem;
+  height: 3.2rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  background: #fff;
+  font-size: 1.3rem;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.15s;
+  padding: 0 0.6rem;
+}
+
+.cnfm-page-btn:hover:not(:disabled) {
+  border-color: #3b82f6;
+  color: #3b82f6;
+}
+
+.cnfm-page-btn.active {
+  border-color: #3b82f6;
+  background: #3b82f6;
+  color: #fff;
+  font-weight: 700;
+}
+
+.cnfm-page-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================
+   폼 테이블 (상세/등록 페이지용)
+============================= */
+.cnfm-form-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 1.3rem;
+}
+
+.cnfm-form-table th,
+.cnfm-form-table td {
+  border: 1px solid #e5e7eb;
+  padding: 0.9rem 1rem;
+}
+
+.cnfm-form-table th {
+  width: 16rem;
+  background: #f9fafb;
+  text-align: left;
+  font-weight: 700;
+}
+
+.cnfm-form-table td {
+  background: #fff;
+}
+
+.cnfm-action-row {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1.8rem;
+}
+
+/* ============================
+   기존 호환 클래스 유지
+============================= */
+.cnfm-section-title {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+@media (max-width: 1100px) {
+  .cnfm-search-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .cnfm-search-field {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .cnfm-search-field--grow {
+    width: 100%;
+  }
+}
+
+
+.cnfm-section-title {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.cnfm-search-grid {
+  display: grid;
+  grid-template-columns: 8rem 1fr 6rem 16rem auto auto;
+  gap: 1.2rem;
+  align-items: center;
+}
+
+.cnfm-table-wrap {
+  overflow-x: auto;
+}
+
+.cnfm-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 1.3rem;
+}
+
+.cnfm-table th,
+.cnfm-table td {
+  border: 1px solid #e5e7eb;
+  padding: 1rem 0.8rem;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.cnfm-table thead th {
+  background: #f3f4f6;
+  color: #111827;
+  font-weight: 700;
+}
+
+.cnfm-row-clickable {
+  cursor: pointer;
+}
+
+.cnfm-row-clickable:hover {
+  background: #f9fafb;
+}
+
+.cnfm-step {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.cnfm-step-badge {
+  border-radius: 9999px;
+  border: 1px solid #d1d5db;
+  background: #f9fafb;
+  color: #6b7280;
+  font-size: 1.1rem;
+  padding: 0.25rem 0.65rem;
+}
+
+.cnfm-step-badge.completed {
+  border-color: #93c5fd;
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.cnfm-step-badge.current {
+  border-color: #16a34a;
+  background: #dcfce7;
+  color: #166534;
+  font-weight: 700;
+}
+
+.cnfm-pagination {
+  display: flex;
+  justify-content: center;
+  gap: 0.6rem;
+  margin-top: 1.2rem;
+}
+
+.cnfm-pagination button {
+  min-width: 3.2rem;
+  height: 3.2rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: #fff;
+  font-size: 1.3rem;
+}
+
+.cnfm-pagination button.active {
+  border-color: #2563eb;
+  background: #2563eb;
+  color: #fff;
+  font-weight: 700;
+}
+
+.cnfm-form-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 1.3rem;
+}
+
+.cnfm-form-table th,
+.cnfm-form-table td {
+  border: 1px solid #e5e7eb;
+  padding: 0.9rem 1rem;
+}
+
+.cnfm-form-table th {
+  width: 16rem;
+  background: #f9fafb;
+  text-align: left;
+  font-weight: 700;
+}
+
+.cnfm-form-table td {
+  background: #fff;
+}
+
+.cnfm-action-row {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1.8rem;
+}
+
+@media (max-width: 1100px) {
+  .cnfm-search-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/apps/as/src/pages/instl-sncn/ui/cnfm-regist-page.tsx b/apps/as/src/pages/instl-sncn/ui/cnfm-regist-page.tsx
new file mode 100644
index 000000000..8b736b028
--- /dev/null
+++ b/apps/as/src/pages/instl-sncn/ui/cnfm-regist-page.tsx
@@ -0,0 +1,1909 @@
+"use client";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import { type HttpResponse, Upload } from "tus-js-client";
+
+import { AUTH_USER_ID, CLAIM_NAME, ENDPOINT, PROXY_HOST } from "@/shared/config";
+import { getCookie, setCookie, useAlertStore, useUserStore } from "@/shared/lib";
+import { deleteAttachment  } from "@/shared/lib/attach";
+import { formatFileSize } from "@/shared/lib/file-utils";
+import type { AcntgSeMngTreeDto } from "@/entities/acntg";
+import { acntgSeMngService } from "@/entities/acntg";
+import type { CklstTreeNode } from "@/entities/cklst";
+import { cklstMngService } from "@/entities/cklst";
+import type { CnstpSeMngTreeDto } from "@/entities/cnstp";
+import { cnstpSeMngService } from "@/entities/cnstp";
+import {
+  esntlAtchFileMngService,
+  type EsntlAtchFileMngTreeResponseDto,
+} from "@/entities/esntl";
+import {
+  INSTL_SNCN_REGISTER_SELECTION_KEY,
+  InstlSncnApi,
+  type InstlSncnApplySaveRequestDto,
+  type InstlSncnBizCstSaveRequestDto,
+  type InstlSncnBzScaleSaveDto,
+  type InstlSncnMng,
+} from "@/entities/instl-sncn";
+import { EtcAttachments,NumCell, PrivacyConsent, ReadCell } from "@/widgets/cnfm";
+import { Button, Input } from "@common/components";
+
+import "./cnfm-page.css";
+
+/* ------------------------------------------------------------------ */
+/* 타입                                                                  */
+/* ------------------------------------------------------------------ */
+type BzScaleRow = {
+  bscPl: string; // 예산반영(A)
+  budgetReflct: string; // 표준사업비(B)
+  thtiDsgn: string; // 금회설계시(C)
+};
+
+type BzAmtRow = {
+  bscPl: string;
+  budgetReflct: string;
+  thtiDsgn: string;
+};
+
+type RequiredAttachKey = string;
+
+type RequiredAttachItem = {
+  key: RequiredAttachKey;
+  esntlAtchFileNm: string;
+  esntlAtchYn: "Y" | "N";
+  esntlAtchFileRmrk: string;
+  atflCd: string;
+  atflId: string;
+  fileName: string;
+  uploading: boolean;
+};
+
+const emptyScale = (): BzScaleRow => ({ bscPl: "", budgetReflct: "", thtiDsgn: "" });
+const emptyAmt = (): BzAmtRow => ({ bscPl: "", budgetReflct: "", thtiDsgn: "" });
+
+const num = (v: string) => parseFloat(v.replace(/,/g, "") || "0");
+const fmt = (v: number) => (isNaN(v) ? "" : v.toLocaleString());
+const DEFAULT_RVW_STP_COM_CD = "LOCAL"; //검토단계공통코드: RVWSTP ( 상세 코드 : LOCAL.지자체,ENV.환경청,KECO.환경공단)
+const DEFAULT_SNCN_SE_COM_CD = "CNFM";
+type ReviewStepCode = "LOCAL" | "ENV" | "KECO";
+const REVIEW_STEP_CODES: ReviewStepCode[] = ["LOCAL", "ENV", "KECO"];
+const ROLE_TO_REVIEW_STEP: Record<string, ReviewStepCode> = {
+  ROLE_USER05: "LOCAL",
+  ROLE_USER04: "LOCAL",
+  ROLE_USER03: "ENV",
+  ROLE_USER02: "KECO",
+  ROLE_USER01: "KECO",
+};
+const REVIEW_STEP_ROLE_RANK: Record<ReviewStepCode, number> = {
+  LOCAL: 1,
+  ENV: 2,
+  KECO: 3,
+};
+const INSTL_PROGRESS_ORDER = [
+  "SV",
+  "ST",
+  "LE",
+  "ER",
+  "EE",
+  "TE",
+  "TS",
+  "TR",
+  "TP",
+  "EP",
+  "TA",
+  "TB",
+];
+
+const getProgressStepCount = (prgrsSttsComCd?: string): number => {
+  const idx = INSTL_PROGRESS_ORDER.indexOf(prgrsSttsComCd ?? "ST");
+  if (idx <= INSTL_PROGRESS_ORDER.indexOf("ST")) return 1;
+  if (idx <= INSTL_PROGRESS_ORDER.indexOf("ER")) return 2;
+  return 3;
+};
+
+const getRoleStepCount = (dtlInstCd?: string): number => {
+  const mapped = dtlInstCd ? ROLE_TO_REVIEW_STEP[dtlInstCd] : undefined;
+  return mapped ? REVIEW_STEP_ROLE_RANK[mapped] : 0;
+};
+
+// 업무구분 코드 -> 표시명 매핑 (체크리스트 그룹 표시용)
+const TASK_CODE_LABELS: Record<string, string> = {
+  RE: "재이용수",
+  SP: "하수관로",
+  SF: "하수처리시설",
+};
+
+const normalizeChecklistResultRows = (payload: any): any[] => {
+  // expect flat `cklstResultList` only
+  const raw = payload?.cklstResultList ?? [];
+  return Array.isArray(raw) ? raw : [];
+};
+
+/* ------------------------------------------------------------------ */
+/* 메인 컴포넌트                                                          */
+/* ------------------------------------------------------------------ */
+/**
+ * initialData 매핑 안내 
+ * - initialData 데이터는 cnfm-modify-page에서 서버로부터 받아온 상세 데이터를 그대로 전달받거나, cnfm-regist-page에서 수정 모드로 진입할 때 전달받을 수 있습니다.
+ * - 이 컴포넌트는 수정 모드로 호출될 때 `initialData`를 받습니다.
+ * - 서버 응답은 두 가지 형태 중 하나일 수 있습니다:
+ *   1) 상세 객체 그대로: { ...detFields }
+ *   2) 래퍼 형태: { detDto: { ...detFields }, bizSclList: [...], bizCstList: [...], cklstResultList: [...], esntlFileList: [...], etcFileList: [...] }
+ *
+ * - 주요 detFields (det 또는 detDto 내부):
+ *   - bizNm, bizBgngYr, bizEndYr, bizCn
+ *   - sncnSeComCd or envoSeComCd or envoSeCd (설치구분)
+ *   - dsgnrNm, dsgnrOgdpNm (소속), dsgnrTelno, dsgnrEmlAddr
+ *   - privacyAgree ("Y" | "N")
+ *   - aplcntNm, aplcntMblTelno, aplcntOgdpNm, aplcntEmlAddr
+ *
+ * - 주요 배열 (위치: 최상위  내부)
+ *   - bizSclList: [{ cnstpSeCd, bscPl|bscPlanQty, budgetReflct|bgtRfltQty, thtiDsgn|tstmDesignQty }, ...]
+ *   - bizCstList: [{ acntgSeCd, bscPlanAmt|bscPl, bgtRfltAmt|budgetReflct, tstmDesignAmt|thtiDsgn }, ...]
+ *   - cklstResultList: [{ cklstSn, cklstArtclSn, cklstRvwSn, rvwStpComCd, rvwRsltAnmlyYn: 'Y'|'N'|null, ... }, ...]
+ *   - esntlFileList: [{ esntlAtchFileId, esntlAtchFileNm, esntlAtchYn, atflCd, atflId, orgnlFileNm, ... }, ...]
+ *   - etcFileList: [{ atflId, orgnlFileNm, atflFlieSz, upldUserNm, atflCd, ... }, ...]
+ *
+ * - 주의사항:
+ *   - 필드명이 서버의 버전이나 API 경로에 따라 달라질 수 있어(예: bscPl vs bscPlanQty) 코드에서 양쪽을 모두 확인합니다.
+ *   - 일부 배열/속성은 최상위에 있거나 detDto 내부에 있을 수 있으므로 둘 다 우선순위로 체크합니다.
+ */
+function CnfmRegistPage({ initialData }: { initialData?: any } = {}) {
+  const router = useRouter();
+  const userInfo = useUserStore((state) => state.userInfo);
+  // userInfo?.dtlInstCd 테스트 코드 ENV.ROLE_USER03 , KECO 권한 테스트용 (실제 권한에 맞게 변경 필요)
+  /*
+  const userInfo = {
+    ...userInfo2,
+    dtlInstCd: "ROLE_USER03", //ROLE_USER03, ROLE_USER02, ROLE_USER01 KECO 권한 테스트용 (실제 권한에 맞게 변경 필요)
+  };
+  */
+  const alert = useAlertStore((state) => state.setMessage);
+  const qc = useQueryClient();
+  const currentDet = useMemo(() => initialData?.detDto ?? initialData, [initialData]);
+  const isModifyMode = Boolean(currentDet?.instlSncnDocNo);
+  const currentPrgrsSttsComCd = (currentDet?.prgrsSttsComCd as string | undefined) ?? "ST";
+  const roleBasedMaxStepCount = getRoleStepCount(userInfo?.dtlInstCd);
+  const progressBasedMaxStepCount = getProgressStepCount(currentPrgrsSttsComCd);
+  const visibleStepCount = isModifyMode
+    ? Math.min(progressBasedMaxStepCount, roleBasedMaxStepCount)
+    : 1;
+  const visibleReviewStepCodes = useMemo(
+    () => REVIEW_STEP_CODES.slice(0, visibleStepCount),
+    [visibleStepCount],
+  );
+  const editableReviewStep = useMemo(() => {
+    if (!isModifyMode) return "LOCAL" as ReviewStepCode;
+    const step = userInfo?.dtlInstCd ? ROLE_TO_REVIEW_STEP[userInfo.dtlInstCd] : undefined;
+    if (!step) return null;
+    return visibleReviewStepCodes.includes(step) ? step : null;
+  }, [isModifyMode, userInfo?.dtlInstCd, visibleReviewStepCodes]);
+  const [selectedReviewStep, setSelectedReviewStep] = useState<ReviewStepCode>("LOCAL");
+  
+
+  useEffect(() => {
+    if (visibleReviewStepCodes.length === 0) return;
+    // Only set default/initial selection when visible steps or editable step change.
+    // Do NOT include `selectedReviewStep` in deps to avoid overwriting user clicks.
+    setSelectedReviewStep((current) => {
+      // keep current if still visible
+      if (current && visibleReviewStepCodes.includes(current)) return current;
+      // prefer editable step if available
+      if (editableReviewStep) return editableReviewStep;
+      // otherwise pick the last visible step
+      return visibleReviewStepCodes[visibleReviewStepCodes.length - 1];
+    });
+  }, [editableReviewStep, visibleReviewStepCodes]);
+
+  const docId = useMemo(() => {
+    return currentDet?.instlSncnDocNo ?? "";
+  }, [currentDet]);
+
+  const [docSeComCd] = useState("INSTL");
+  const [taskSeComCdNm, setTaskSeComCdNm] = useState<string>(
+    () => (currentDet?.taskSeComCdNm as string) ?? "",
+  );
+  const [taskSeComCd, setTaskSeComCd] = useState<string>(() => (currentDet?.taskSeComCd as string) ?? "RE");
+
+  useEffect(() => {
+    // do not override server-provided initialData (modify mode)
+    if (currentDet) return;
+
+    const raw = sessionStorage.getItem(INSTL_SNCN_REGISTER_SELECTION_KEY); 
+    if (!raw) return;
+
+    try {
+      const parsed = JSON.parse(raw) as {
+        taskSeComCdList?: string[];
+        taskSeComCdNmList?: string[];
+      };
+ 
+      setTaskSeComCd(parsed.taskSeComCdList?.join(",") || "RE");
+      setTaskSeComCdNm(parsed.taskSeComCdNmList?.join(",") || "재이용수");
+    } catch {
+      // noop
+    } finally {
+      sessionStorage.removeItem(INSTL_SNCN_REGISTER_SELECTION_KEY);
+    }
+  }, [currentDet]);
+  /* ── 기본 정보 ── */
+  const [bzNm, setBzNm] = useState("");
+  const [bzBgngYr, setBzBgngYr] = useState("");
+  const [bzEndYr, setBzEndYr] = useState("");
+  const [bzCn, setBzCn] = useState("");
+  const [sncnSeComCd, setSncnSeComCd] = useState("CNFM");
+
+  /* ── 설계자 정보 ── */
+  const [dsgnrNm, setDsgnrNm] = useState("");
+  const [dsgnrPsitn, setDsgnrPsitn] = useState("");
+  const [dsgnrTelno, setDsgnrTelno] = useState("");
+  const [dsgnrEmlAddr, setDsgnrEmlAddr] = useState("");
+
+  /* ── 신청자 정보 (수정 모드 매핑용) ── */
+  const [aplcntNm, setAplcntNm] = useState("");
+  const [aplcntMblTelno, setAplcntMblTelno] = useState("");
+  const [aplcntOgdpNm, setAplcntOgdpNm] = useState("");
+  const [aplcntEmlAddr, setAplcntEmlAddr] = useState("");
+
+  /* ── 개인정보 동의 ── */
+  const [privacyAgree, setPrivacyAgree] = useState<"Y" | "N">("N");
+
+  const { data: requiredAttachmentDefs = [] } = useQuery<EsntlAtchFileMngTreeResponseDto[]>({
+    queryKey: ["esntlAtchFileTree", docSeComCd],
+    queryFn: () => esntlAtchFileMngService.findTree({ docSeComCd }),
+    enabled: Boolean(docSeComCd),
+    staleTime: Infinity,
+  });
+
+  // selected task code for header filtering (null = none selected)
+  const [selectedTaskCode, setSelectedTaskCode] = useState<string | null>(null);
+  
+  
+
+  
+
+
+  const [requiredFiles, setRequiredFiles] = useState<Record<RequiredAttachKey, RequiredAttachItem>>({});
+  const requiredFileInputRefs = useRef<Record<RequiredAttachKey, HTMLInputElement | null>>({});
+
+  useEffect(() => {
+    if (requiredAttachmentDefs.length === 0) return;
+
+    setRequiredFiles((prev) => {
+      const next: Record<RequiredAttachKey, RequiredAttachItem> = {};
+      for (const item of requiredAttachmentDefs) {
+        const key = item.esntlAtchFileId;
+        const prevItem = prev[key];
+        next[key] = {
+          key,
+          esntlAtchFileNm: item.esntlAtchFileNm,
+          esntlAtchYn: item.esntlAtchYn,
+          esntlAtchFileRmrk: item.esntlAtchFileRmrk,
+          atflCd: prevItem?.atflCd ?? "",
+          atflId: prevItem?.atflId ?? "",
+          fileName: prevItem?.fileName ?? "",
+          uploading: prevItem?.uploading ?? false,
+        };
+      }
+      return next;
+    });
+  }, [requiredAttachmentDefs]);
+
+  const uploadRequiredFile = (file: File, key: RequiredAttachKey) => {
+    setRequiredFiles((prev) => ({
+      ...prev,
+      [key]: { ...prev[key], uploading: true },
+    }));
+
+    setCookie("atfl-cd-key", "");
+
+    const upload = new Upload(file, {
+      endpoint: `${PROXY_HOST}${ENDPOINT.ATTACH_SERVICE.TUS_UPLOAD}`,
+      chunkSize: 10 * 1024 * 1024,
+      headers: {
+        [CLAIM_NAME]: getCookie(CLAIM_NAME) ?? "",
+        [AUTH_USER_ID]: getCookie(AUTH_USER_ID) ?? "",
+      },
+      metadata: {
+        filename: file.name,
+        filetype: file.type,
+      },
+      onError(error: Error) {
+        console.error("필수 첨부파일 업로드 실패", error);
+        setRequiredFiles((prev) => ({
+          ...prev,
+          [key]: { ...prev[key], uploading: false },
+        }));
+        alert("필수 첨부파일 업로드 중 오류가 발생했습니다.");
+      },
+      onAfterResponse(_req: unknown, res: HttpResponse) {
+        const fileInfo = res.getHeader("X-File-Info");
+        if (typeof fileInfo !== "string") return;
+
+        const parsed = JSON.parse(fileInfo) as { atflCd?: string; atflId?: string };
+        const atflCd = parsed.atflCd ?? "";
+        const atflId = parsed.atflId ?? "";
+        if (atflCd) setCookie("atfl-cd-key", atflCd);
+
+        setRequiredFiles((prev) => ({
+          ...prev,
+          [key]: {
+            ...prev[key],
+            atflCd,
+            atflId,
+            fileName: file.name,
+            uploading: false,
+          },
+        }));
+      },
+      onSuccess() {
+        setRequiredFiles((prev) => ({
+          ...prev,
+          [key]: { ...prev[key], uploading: false },
+        }));
+      },
+    });
+
+    upload.start();
+  };
+
+    /* ── 기타 첨부파일 ── */
+    type EtcFile = {
+      id: string;
+      name: string;
+      ext: string;
+      size: string;
+      uploader: string;
+      atflCd: string;
+      atflId: string;
+    };
+    const [etcFiles, setEtcFiles] = useState<EtcFile[]>([]);
+    const [etcNoticeOpen, setEtcNoticeOpen] = useState(true);
+    const [etcFileGroupId, setEtcFileGroupId] = useState("");
+    const [etcUploading, setEtcUploading] = useState(false);
+    const etcFileGroupIdRef = useRef("");
+    const initialMappedRef = useRef(false);
+
+  // 초기 데이터가 주어지면 폼 상태로 매핑 (수정 모드에서 사용)
+  useEffect(() => {
+    if (!initialData) return;
+    if (initialMappedRef.current) return;
+
+    try {
+      const det = (currentDet ?? {}) as any;
+
+      const bizSclList = initialData.bizSclList ?? [];
+      const bizCstList = initialData.bizCstList ?? [];
+      //const cklstResultList = initialData.cklstResultList ?? [];
+      const esntlFileList = initialData.esntlFileList ?? [];
+      const etcFileList = initialData.etcFileList ?? [];
+      
+
+      // 기본 정보 및 설계자 정보
+      setBzNm(det.bizNm ?? "");
+      setBzBgngYr(det.bizBgngYr ?? "");
+      setBzEndYr(det.bizEndYr ?? "");
+      setBzCn(det.bizCn ?? "");
+      setSncnSeComCd(det.sncnSeComCd ?? det.envoSeComCd ?? det.envoSeCd ?? DEFAULT_SNCN_SE_COM_CD);
+
+      // 설계자
+      setDsgnrNm(det.dsgnrNm ?? "");
+      setDsgnrPsitn(det.dsgnrOgdpNm ?? "");
+      setDsgnrTelno(det.dsgnrTelno ?? "");
+      setDsgnrEmlAddr(det.dsgnrEmlAddr ?? "");
+
+      // 개인정보 동의
+      if (det.privacyAgree) setPrivacyAgree(det.privacyAgree === "Y" ? "Y" : "N");
+
+      // 신청자
+      setAplcntNm(det.aplcntNm ?? "");
+      setAplcntMblTelno(det.aplcntMblTelno ?? "");
+      setAplcntOgdpNm(det.aplcntOgdpNm ?? "");
+      setAplcntEmlAddr(det.aplcntEmlAddr ?? "");
+      // 수정모드 기타첨부파일
+      if (Array.isArray(etcFileList)) {
+        setEtcFiles(
+          etcFileList
+            .filter((f: any) => f && typeof f === "object")
+            .map((f: any) => {
+              const fileName = f.orgnlFileNm ?? f.physFileNm ?? "";
+              const ext = fileName && typeof fileName === "string" && fileName.includes(".") ? fileName.split(".").pop() ?? "" : "";
+              return {
+                id: f.atflId ,
+                name: fileName,
+                ext,
+                size: f.atflFlieSz ?? 0,
+                uploader: det.rgtrNm ?? "",
+                atflCd: f.atflCd ?? "",
+                atflId: f.atflId ?? "",
+              };
+            }),
+        );
+      }
+
+      // 수정모드시 기타첨부 그룹아이디 적용 (중복 매핑 방지)
+      // - det.atchFileGroupId 또는 det.atflCd 우선, 없으면 etcFileList 첫 항목의 atflCd 사용
+      const existingGroup = (det.atchFileGroupId ) || (Array.isArray(etcFileList) && etcFileList[0]?.atflCd) || "";
+      //console.log("etcFileGroupIdRef.current 초기화1:", existingGroup);
+      if (existingGroup && etcFileGroupIdRef.current !== existingGroup) {
+        etcFileGroupIdRef.current = existingGroup;
+        setEtcFileGroupId((prev) => prev || existingGroup);
+      }
+     // console.log("etcFileGroupIdRef.current 초기화:", etcFileGroupIdRef.current);
+
+      // 수정모드인 경우 서버가 전달한 업무구분(단일 혹은 콤마로 결합된 복수)을 상태로 복원
+       setTaskSeComCd(det.taskSeComCd);
+       setTaskSeComCdNm(det.taskSeCdNm );
+
+      // 매핑 완료 플래그 설정 — 이후 동일 컴포넌트 인스턴스에서 재매핑 방지
+      initialMappedRef.current = true;
+
+      //수정모드 필수첨부파일: requiredFiles는 requiredAttachmentDefs 로 초기화되므로 atflCd/atflId만 덮어쓴다
+      if (Array.isArray(esntlFileList)) {
+        setRequiredFiles((prev) => {
+          const next = { ...prev };
+          for (const f of esntlFileList) {
+            if (!f || typeof f !== "object") continue;
+            const key = f.esntlAtchFileId ?? f.esntlAtchFileId;
+            if (!key) continue;
+            const existing = next[key] ?? {
+              key,
+              esntlAtchFileNm: f.esntlAtchFileNm ?? "",
+              esntlAtchYn: f.esntlAtchYn ?? "N",
+              esntlAtchFileRmrk: "",
+              atflCd: "",
+              atflId: "",
+              fileName: "",
+              uploading: false,
+            };
+
+            next[key] = {
+              ...existing,
+              atflCd: f.atflCd ?? existing.atflCd,
+              atflId: f.atflId ?? existing.atflId,
+              fileName: f.orgnlFileNm ?? existing.fileName,
+              uploading: false,
+            };
+          }
+          return next;
+        });
+      }
+
+      // 사업규모 매핑
+      if (Array.isArray(bizSclList)) {
+        const map: Record<string, BzScaleRow> = {};
+        for (const row of bizSclList) {
+          if (!row.cnstpSeCd) continue;
+          map[row.cnstpSeCd] = {
+            bscPl: String(row.bscPl ?? row.bscPlanQty ?? ""),
+            budgetReflct: String(row.budgetReflct ?? row.bgtRfltQty ?? ""),
+            thtiDsgn: String(row.thtiDsgn ?? row.tstmDesignQty ?? ""),
+          };
+        }
+        setBzScaleMap(map);
+      }
+
+      // 총사업비 매핑
+      if (Array.isArray(bizCstList)) {
+        const map: Record<string, BzAmtRow> = {};
+        for (const row of bizCstList) {
+          if (!row.acntgSeCd) continue;
+          map[row.acntgSeCd] = {
+            bscPl: String(row.bscPlanAmt ?? row.bscPl ?? ""),
+            budgetReflct: String(row.bgtRfltAmt ?? row.budgetReflct ?? ""),
+            thtiDsgn: String(row.tstmDesignAmt ?? row.thtiDsgn ?? ""),
+          };
+        }
+        setAmtMap(map);
+      } 
+    } catch (err) {
+      console.error("initialData 매핑 실패", err);
+    }
+  }, [initialData]);
+
+    /** 기타첨부파일 삭제 핸들러: 백엔드에 DELETE 요청을 보내 소프트삭제 처리 후 상태 갱신 */
+    const handleDeleteEtcFile = async (fileId: string, atflId: string) => {
+    try {
+      if (atflId) {
+        await deleteAttachment(atflId);
+      }
+    } catch (error) {
+      console.error("기타 첨부파일 삭제 실패", error);
+      alert("파일 삭제 중 오류가 발생했습니다.");
+      return;
+    }
+
+    setEtcFiles((prev) => {
+      const next = prev.filter((x) => x.id !== fileId);
+      if (next.length === 0) {
+        setEtcFileGroupId("");
+        etcFileGroupIdRef.current = "";
+      }
+      return next;
+    });
+  };
+
+  const handleRequiredFileChange = (key: RequiredAttachKey, e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    uploadRequiredFile(file, key);
+    e.target.value = "";
+  };
+ 
+  const uploadEtcFile = (file: File): Promise<EtcFile> =>
+    new Promise((resolve, reject) => {
+      let uploadedAtflCd = "";
+      let uploadedAtflId = "";
+      console.log("기타첨부파일 업로드 시작:", file.name ,etcFileGroupIdRef.current);
+      const upload = new Upload(file, {
+        endpoint: `${PROXY_HOST}${ENDPOINT.ATTACH_SERVICE.TUS_UPLOAD}`,
+        chunkSize: 10 * 1024 * 1024,
+        headers: {
+          [CLAIM_NAME]: getCookie(CLAIM_NAME) ?? "",
+          [AUTH_USER_ID]: getCookie(AUTH_USER_ID) ?? "",
+        },
+        metadata: {
+          filename: file.name,
+          filetype: file.type,
+          atflCd: etcFileGroupIdRef.current || "",
+        },
+        onError(error: Error) {
+          reject(error);
+        },
+        onAfterResponse(_req: unknown, res: HttpResponse) {
+          const fileInfo = res.getHeader("X-File-Info");
+          if (typeof fileInfo !== "string") return;
+
+          const parsed = JSON.parse(fileInfo) as { atflCd?: string; atflId?: string };
+          uploadedAtflCd = parsed.atflCd ?? "";
+          uploadedAtflId = parsed.atflId ?? "";
+
+          if (uploadedAtflCd) {
+            etcFileGroupIdRef.current = uploadedAtflCd;
+            setEtcFileGroupId((prev) => prev || uploadedAtflCd);
+          }
+        },
+        onSuccess() {
+          const ext = file.name.includes(".") ? file.name.split(".").pop() ?? "" : "";
+          resolve({
+            id: uploadedAtflId || `${Date.now()}_${Math.random()}`,
+            name: file.name,
+            ext,
+            size: formatFileSize(file.size),
+            uploader: userInfo?.userName ?? "알 수 없음",
+            atflCd: uploadedAtflCd,
+            atflId: uploadedAtflId,
+          });
+        },
+      });
+
+      upload.start();
+    });
+
+  const handleEtcFilesChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files ?? []);
+    if (files.length === 0) return;
+
+    setEtcUploading(true);
+    const uploadedRows: EtcFile[] = [];
+    const failedNames: string[] = [];
+
+    for (const file of files) {
+      try {
+        const uploaded = await uploadEtcFile(file);
+        uploadedRows.push(uploaded);
+      } catch (error) {
+        console.error("기타 첨부파일 업로드 실패", error);
+        failedNames.push(file.name);
+      }
+    }
+
+    if (uploadedRows.length > 0) {
+      setEtcFiles((prev) => [...prev, ...uploadedRows]);
+      if (!etcFileGroupId && uploadedRows[0].atflCd) {
+        setEtcFileGroupId(uploadedRows[0].atflCd);
+        etcFileGroupIdRef.current = uploadedRows[0].atflCd;
+      }
+      // 업로드 후 상세 페이지가 최신화되도록 해당 상세 쿼리 무효화
+      try {
+        if (docId) qc.invalidateQueries({ queryKey: ["instl-sncn-detail", docId] });
+        else qc.invalidateQueries({ queryKey: ["instl-sncn-detail"] });
+      } catch (_e) {
+        // noop: 무효화 실패는 치명적이지 않음
+      }
+    }
+
+    if (failedNames.length > 0) {
+      alert(`일부 파일 업로드에 실패했습니다. (${failedNames.join(", ")})`);
+    }
+
+    setEtcUploading(false);
+    e.target.value = "";
+  };
+
+  /* ── 체크리스트 ── */
+  type CheckResultVal = "Y" | "N" | null;
+  const [checkResults, setCheckResults] = useState<Record<string, CheckResultVal>>({});
+  const [checkComments, setCheckComments] = useState<Record<string, string>>({});
+  const cklstRowRefs = useRef<Record<string, HTMLTableRowElement | null>>({});
+  const [pendingInvalidKey, setPendingInvalidKey] = useState<string | null>(null);
+
+  const { data: cklstTree = [] } = useQuery<CklstTreeNode[]>({
+    queryKey: ["cklstTree", docSeComCd, taskSeComCd],
+    queryFn: async () => {
+      // support comma-separated task codes (e.g. "RE,SP") by splitting
+      const raw = taskSeComCd ?? "";
+      const codes = raw
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean);
+
+      if (codes.length === 0) return [] as CklstTreeNode[];
+      if (codes.length === 1) {
+        return await cklstMngService.findTree({ docSeComCd, taskSeComCd: codes[0] });
+      }
+
+      const results = await Promise.all(
+        codes.map((code) => cklstMngService.findTree({ docSeComCd, taskSeComCd: code })),
+      );
+      const flat = results.flat();
+      // dedupe by cklstRvwSn, keep first occurrence
+      const map = new Map<number, CklstTreeNode>();
+      for (const row of flat) {
+        if (!map.has(row.cklstRvwSn)) map.set(row.cklstRvwSn, row);
+      }
+      return Array.from(map.values());
+    },
+    enabled: Boolean(docSeComCd) && Boolean(taskSeComCd),
+    staleTime: Infinity,
+  });
+
+  const cklstRows = useMemo(() => {
+    // bchckUseYn 필터 제거: 부모가 있는 자식 노드(bchckUseYn=N)도 트리에 포함
+    // cklstTree 내의 피드 taskSeComCd 에 따라서 그룹핑 되도록 해줘
+    
+    const useRows = selectedTaskCode
+      ? cklstTree.filter((r) => (r as any).taskSeComCd === selectedTaskCode)
+      : cklstTree;
+    if (useRows.length === 0) return [] as CklstTreeNode[];
+
+    // artcl 단위로 분리하지 않고 전체 rows에서 단일 childMap을 구성한다.
+    // upCklstRvwSn이 다른 artcl 소속 노드를 부모로 가질 수 있으므로
+    // artcl 경계를 넘는 부모-자식 관계도 처리해야 한다.
+    const childMap = new Map<number | null, CklstTreeNode[]>();
+    for (const row of useRows) {
+      const parent = row.upCklstRvwSn ?? null;
+      if (!childMap.has(parent)) childMap.set(parent, []);
+      childMap.get(parent)!.push(row);
+    }
+
+    for (const list of childMap.values()) {
+      list.sort((a, b) =>
+        a.cklstArtclSn !== b.cklstArtclSn
+          ? a.cklstArtclSn - b.cklstArtclSn
+          : a.sortSeq !== b.sortSeq
+            ? a.sortSeq - b.sortSeq
+            : a.cklstRvwSn - b.cklstRvwSn,
+      );
+    }
+
+    const ordered: CklstTreeNode[] = [];
+    const walk = (parent: number | null) => {
+      const children = childMap.get(parent) ?? [];
+      for (const child of children) {
+        ordered.push(child);
+        walk(child.cklstRvwSn);
+      }
+    };
+    walk(null);
+
+    return ordered;
+  }, [cklstTree, selectedTaskCode]);
+
+  // when cklstTree changes, default selectedTaskCode to first available code
+  useEffect(() => {
+    const codes = Array.from(
+      new Set((cklstTree ?? []).map((r) => (r as any).taskSeComCd).filter(Boolean)),
+    );
+    
+    if (codes.length === 0) {
+      if (selectedTaskCode !== null) setSelectedTaskCode(null);
+      return;
+    }
+
+    // if there's no selection yet, or the current selection is not in the new codes,
+    // pick the first available code
+    if (!selectedTaskCode || !codes.includes(selectedTaskCode)) {
+      setSelectedTaskCode(codes[0]);
+    }
+  }, [cklstTree, selectedTaskCode]);
+
+  const cklstKey = (row: CklstTreeNode, rvwStpComCd?: string) => {
+    const stepCode = rvwStpComCd ?? DEFAULT_RVW_STP_COM_CD;
+    const taskCode = (row as any).taskSeComCd ?? "";
+    return `${taskCode}_${row.cklstSn}_${row.cklstArtclSn}_${row.cklstRvwSn}_${stepCode}`;
+  };
+
+  useEffect(() => {
+    setCheckResults((prev) => {
+      const next: Record<string, CheckResultVal> = { ...prev };
+      let changed = false;
+
+      cklstRows.forEach((row) => {
+        visibleReviewStepCodes.forEach((stepCode) => {
+          const key = cklstKey(row, stepCode);
+          if (!Object.prototype.hasOwnProperty.call(next, key)) {
+            next[key] = null;
+            changed = true;
+          }
+        });
+      });
+
+      // 행이 없어졌을 때 stale key만 정리
+      // build liveKeys from full cklstTree so inputs for other taskSeComCd are preserved
+      const liveKeys = new Set<string>();
+      (cklstTree ?? []).forEach((row) => {
+        visibleReviewStepCodes.forEach((stepCode) => {
+          liveKeys.add(cklstKey(row, stepCode));
+        });
+      });
+
+      Object.keys(next).forEach((key) => {
+        const keyStep = key.split("_").pop();
+        if (
+          keyStep &&
+          visibleReviewStepCodes.includes(keyStep as ReviewStepCode) &&
+          !liveKeys.has(key)
+        ) {
+          delete next[key];
+          changed = true;
+        }
+      });
+
+      if (!changed) {
+        const prevKeys = Object.keys(prev);
+        const nextKeys = Object.keys(next);
+        if (prevKeys.length !== nextKeys.length) {
+          changed = true;
+        } else {
+          for (const key of nextKeys) {
+            if (prev[key] !== next[key]) {
+              changed = true;
+              break;
+            }
+          }
+        }
+      }
+
+      return changed ? next : prev;
+    });
+  }, [cklstTree, visibleReviewStepCodes]);
+
+  // when a previously-missing invalid key is set (due to switching task code),
+  // try to scroll/focus it after the rows have re-rendered
+  useEffect(() => {
+    if (!pendingInvalidKey) return;
+    const el = cklstRowRefs.current[pendingInvalidKey];
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+      const firstRadio = el.querySelector<HTMLInputElement>(`input[name="chk_${pendingInvalidKey}"]`);
+      firstRadio?.focus();
+      setPendingInvalidKey(null);
+    }
+    // otherwise, wait for cklstRows update (effect will re-run when pendingInvalidKey remains set)
+  }, [pendingInvalidKey, cklstRows]);
+
+  // 수정 모드에서 서버의 체크리스트 결과값을 폼 상태로 반영
+  useEffect(() => {
+    if (!initialData || cklstRows.length === 0) return; 
+    const results = normalizeChecklistResultRows(initialData);
+    if (!Array.isArray(results) || results.length === 0) return;
+
+    const lookup = new Map<string, string>();
+    const commentLookup = new Map<string, string>();
+    const stepCodesInResult = new Set<ReviewStepCode>();
+    for (const r of results) {
+      const stepCode = (r.rvwStpComCd ?? DEFAULT_RVW_STP_COM_CD) as ReviewStepCode;
+      if (!REVIEW_STEP_CODES.includes(stepCode)) continue;
+      stepCodesInResult.add(stepCode);
+      const key = `${r.taskSeComCd ?? ""}_${r.cklstSn}_${r.cklstArtclSn ?? ""}_${r.cklstRvwSn}_${stepCode}`;
+      if (r.rvwRsltAnmlyYn === "Y" || r.rvwRsltAnmlyYn === "N") lookup.set(key, r.rvwRsltAnmlyYn);
+      if (r.picRvwCn) commentLookup.set(key, String(r.picRvwCn));
+    }
+
+    setCheckResults((prev) => {
+      const next = { ...prev };
+      let changed = false;
+      const targetStepCodes = Array.from(
+        new Set<ReviewStepCode>([...visibleReviewStepCodes, ...stepCodesInResult]),
+      );
+
+      for (const row of cklstRows) {
+        targetStepCodes.forEach((stepCode) => {
+          const k = cklstKey(row, stepCode);
+          const v = lookup.get(k);
+          // only apply server-provided value when we don't already have a user-entered value
+          if (v && (next[k] === null || next[k] === undefined)) {
+            next[k] = v as CheckResultVal;
+            changed = true;
+          }
+        });
+      }
+      return changed ? next : prev;
+    });
+    // set comment state separately to avoid rerendering conflicts
+    setCheckComments((prev) => {
+      const next: Record<string, string> = { ...prev };
+      let changed = false;
+      for (const [k, v] of commentLookup.entries()) {
+        // only set comment if none exists yet (preserve user edits)
+        if (!next[k]) {
+          next[k] = v;
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [initialData, cklstRows, visibleReviewStepCodes]);
+
+  const cklstStats = useMemo(() => {
+    if (!selectedReviewStep) {
+      return { total: 0, completed: 0, percent: 0 };
+    }
+    // only include rows that are marked for checkbox use (bchckUseYn === "Y")
+    const relevantRows = cklstRows.filter((row) => row.bchckUseYn === "Y");
+    const total = relevantRows.length;
+    const completed = relevantRows.reduce((acc, row) => {
+      const val = checkResults[cklstKey(row, selectedReviewStep)] ?? "";
+      return acc + (val ? 1 : 0);
+    }, 0);
+    const percent = total > 0 ? Math.round((completed / total) * 100) : 0;
+    return { total, completed, percent };
+  }, [cklstRows, checkResults, selectedReviewStep]);
+
+
+  const toCklstSaveDtoList = () => {
+    const persistedStepCodeSet = new Set<ReviewStepCode>();
+    normalizeChecklistResultRows(initialData).forEach((r: any) => {
+      const code = r?.rvwStpComCd as ReviewStepCode | undefined;
+      if (code && REVIEW_STEP_CODES.includes(code)) persistedStepCodeSet.add(code);
+    });
+    // Always persist currently visible review steps as well
+    visibleReviewStepCodes.forEach((code) => persistedStepCodeSet.add(code));
+
+    // only persist rows that are enabled for checkbox (`bchckUseYn === "Y")
+      // only persist rows that are enabled for checkbox (`bchckUseYn === "Y")
+      // Use full cklstTree so items not currently visible (other task codes) are included
+      const relevantRows = (cklstTree ?? []).filter((row) => row.bchckUseYn === "Y");
+
+    // Ensure we generate DTOs grouped by all known task codes (TASK_CODE_LABELS keys)
+    const allTaskCodes = Object.keys(TASK_CODE_LABELS);
+
+    return allTaskCodes.flatMap((taskCode) =>
+      Array.from(persistedStepCodeSet).flatMap((rvwStpComCd) =>
+        relevantRows
+          .filter((row) => ((row as any).taskSeComCd ?? "") === taskCode)
+          .map((row) => ({
+            taskSeComCd: taskCode,
+            cklstSn: row.cklstSn,
+            cklstArtclSn: row.cklstArtclSn,
+            cklstRvwSn: row.cklstRvwSn,
+            rvwStpComCd: rvwStpComCd,
+            selected: checkResults[cklstKey(row, rvwStpComCd)] ?? null,
+            picRvwCn: checkComments[cklstKey(row, rvwStpComCd)] ?? null,
+          })),
+      ),
+    );
+  };
+
+  // removed map-shaped payload generation — server now expects `cklstResultList` only
+
+  const toEsntlAtchFileSaveDtoList = () =>
+    Object.values(requiredFiles)
+      .filter((item) => Boolean(item.atflCd) && Boolean(item.atflId))
+      .map((item) => ({
+        esntlAtchFileId: item.key,
+        atchFileGroupId: item.atflCd,
+      }));
+
+  /* ── 사업규모 (공종구분 트리 연동) ── */
+  // cnstpSeCd → { bscPl, budgetReflct, thtiDsgn } 단일 map
+  const [bzScaleMap, setBzScaleMap] = useState<Record<string, BzScaleRow>>({});
+
+  /* ── 공종구분 트리 로드 ── */
+  const { data: cnstpTree = [] } = useQuery<CnstpSeMngTreeDto[]>({
+    queryKey: ["cnstpTree"],
+    queryFn: () => cnstpSeMngService.findTree(),
+    staleTime: Infinity,
+  });
+
+  /* ── 공종구분 리프 노드 집합 ── */
+  const cnstpLeafSet = useMemo(() => {
+    const parentCodes = new Set(cnstpTree.map((n) => n.upCnstpCd).filter(Boolean) as string[]);
+    return new Set(cnstpTree.filter((n) => !parentCodes.has(n.cnstpSeCd)).map((n) => n.cnstpSeCd));
+  }, [cnstpTree]);
+
+  const subtotalScale = (node: CnstpSeMngTreeDto, col: keyof BzScaleRow): number =>
+    cnstpTree
+      .filter((n) => cnstpLeafSet.has(n.cnstpSeCd) && n.treePath.split("|").includes(node.cnstpSeCd))
+      .reduce((sum, n) => sum + num((bzScaleMap[n.cnstpSeCd] ?? emptyScale())[col]), 0);
+
+  const scaleNodeVal = (node: CnstpSeMngTreeDto, col: keyof BzScaleRow): number =>
+    cnstpLeafSet.has(node.cnstpSeCd)
+      ? num((bzScaleMap[node.cnstpSeCd] ?? emptyScale())[col])
+      : subtotalScale(node, col);
+
+  const handleScaleInput = (cnstpSeCd: string, col: keyof BzScaleRow, val: string) =>
+    setBzScaleMap((prev) => ({
+      ...prev,
+      [cnstpSeCd]: { ...(prev[cnstpSeCd] ?? emptyScale()), [col]: val },
+    }));
+
+  /** 사업규모 맵 -> 백엔드 저장용 배열 DTO 변환 */
+  const toBzScaleSaveDtoList = (): InstlSncnBzScaleSaveDto[] =>
+    cnstpTree
+      .filter((node) => cnstpLeafSet.has(node.cnstpSeCd))
+      .map((node) => {
+        const row = bzScaleMap[node.cnstpSeCd] ?? emptyScale();
+        const bscPl = num(row.bscPl);
+        const budgetReflct = num(row.budgetReflct);
+        const thtiDsgn = num(row.thtiDsgn);
+
+        return {
+          cnstpSeCd: node.cnstpSeCd,
+          bscPl,
+          budgetReflct,
+          thtiDsgn,
+          diff: thtiDsgn - budgetReflct,
+        };
+      });
+
+  /* ── 총사업비 (회계구분 트리 연동) ── */
+  // acntgSeCd → { bscPl, budgetReflct, thtiDsgn } 단일 map
+  const [amtMap, setAmtMap] = useState<Record<string, BzAmtRow>>({});
+
+  /* ── 회계구분 트리 로드 ── */
+  const { data: acntgTree = [] } = useQuery<AcntgSeMngTreeDto[]>({
+    queryKey: ["acntgTree"],
+    queryFn: () => acntgSeMngService.findTree(),
+    staleTime: Infinity, // 코드 데이터 — 앱 수명 동안 재요청 불필요
+  });
+
+  /* ── 리프 노드 집합 (자식이 없는 노드 = 직접 입력 가능) ── */
+  const leafSet = useMemo(() => {
+    const parentCodes = new Set(acntgTree.map((n) => n.upAcntgSeCd).filter(Boolean) as string[]);
+    return new Set(acntgTree.filter((n) => !parentCodes.has(n.acntgSeCd)).map((n) => n.acntgSeCd));
+  }, [acntgTree]);
+
+  /**
+   * treePath 기반 소계 계산
+   * - 이 노드의 acntgSeCd 가 treePath 안에 포함된 리프 노드들의 합산
+   * - 새로운 하위 레벨이 추가돼도 자동으로 포함됨
+   */
+  const subtotal = (node: AcntgSeMngTreeDto, col: keyof BzAmtRow): number =>
+    acntgTree
+      .filter((n) => leafSet.has(n.acntgSeCd) && n.treePath.split("|").includes(node.acntgSeCd))
+      .reduce((sum, n) => sum + num((amtMap[n.acntgSeCd] ?? emptyAmt())[col]), 0);
+
+  /** 노드 값 반환 — 리프이면 입력값, 부모이면 소계 */
+  const nodeVal = (node: AcntgSeMngTreeDto, col: keyof BzAmtRow): number =>
+    leafSet.has(node.acntgSeCd)
+      ? num((amtMap[node.acntgSeCd] ?? emptyAmt())[col])
+      : subtotal(node, col);
+
+  /** 단일 셀 입력 핸들러 */
+  const handleAmtInput = (acntgSeCd: string, col: keyof BzAmtRow, val: string) =>
+    setAmtMap((prev) => ({
+      ...prev,
+      [acntgSeCd]: { ...(prev[acntgSeCd] ?? emptyAmt()), [col]: val },
+    }));
+
+  /** 총사업비 맵 -> 백엔드 저장용 배열 DTO 변환 */
+  const toBizCstSaveDtoList = (): InstlSncnBizCstSaveRequestDto[] =>
+    acntgTree
+      .filter((node) => leafSet.has(node.acntgSeCd))
+      .map((node) => {
+        const row = amtMap[node.acntgSeCd] ?? emptyAmt();
+        return {
+          acntgSeCd: node.acntgSeCd,
+          bscPlanAmt: num(row.bscPl),
+          bgtRfltAmt: num(row.budgetReflct),
+          tstmDesignAmt: num(row.thtiDsgn),
+        };
+      });
+
+  /**
+   * indAcntgSeCdNm 의 앞 공백 수를 파싱해 padding px 값으로 반환
+   * (공백 4칸 = 1 depth = 1rem)
+   */
+  const indentPx = (indNm: string): number => {
+    const spaces = indNm.length - indNm.trimStart().length;
+    return (spaces / 4) * 16; // 4공백 = 16px
+  };
+
+  /** 트리 행 스타일 분류 */
+  const rowStyle = (node: AcntgSeMngTreeDto) => {
+    if (node.treeLevel === 1) return "bg-blue-50 font-bold";
+    if (node.treeLevel === 2) return "bg-gray-100 font-semibold";
+    if (!leafSet.has(node.acntgSeCd)) return "font-semibold"; // 중간 부모 (예: 하수관로)
+    return "";
+  };
+
+  /** 공종 트리 행 스타일 분류 */
+  const scaleRowStyle = (node: CnstpSeMngTreeDto) => {
+    if (node.treeLevel === 1) return "bg-gray-50 font-semibold";
+    if (!cnstpLeafSet.has(node.cnstpSeCd)) return "font-semibold";
+    return "";
+  };
+
+  /* ── 증감 라벨 ── */
+  const diffLabel = (v: number) => (v > 0 ? `+${fmt(v)}` : fmt(v));
+
+  /* ── 검증 ── */
+  function fnValidation(mode: "SAVE" | "PRESENTN") {
+    
+    if (!bzNm.trim()) {
+      alert("사업명을 입력하세요.");
+      return false;
+    }
+    if (!bzBgngYr || !bzEndYr) {
+      alert("사업기간을 입력하세요.");
+      return false;
+    }
+    if (!bzCn.trim()) {
+      alert("사업내용을 입력하세요.");
+      return false;
+    }
+    if (mode === "PRESENTN" && privacyAgree !== "Y") {
+      alert("개인정보 제공에 동의하셔야 제출이 가능합니다.");
+      return false;
+    }
+         
+       
+    if (!editableReviewStep) {
+      alert("현재 사용자 권한/진행상태 조합에서 입력 가능한 체크리스트 단계가 없습니다.");
+      return false;
+    }
+
+    // 현재 입력 단계의 체크리스트 미선택 항목이 있으면 진행 불가
+    /*
+    const hasUncheckedChecklist = cklstRows.some(
+      (row) => !checkResults[cklstKey(row, editableReviewStep)],
+    );
+    if (hasUncheckedChecklist) {
+      alert("체크리스트를 모두 체크하세요.");
+      return false;
+    } 
+      */
+    // 저장 시: 필수 첨부파일(esntlAtchYn=Y) 업로드 여부 검증
+    if (mode === "SAVE") {
+      const missingRequiredFile = requiredAttachmentDefs.find((item) => {
+        if (item.esntlAtchYn !== "Y") return false;
+        const uploaded = requiredFiles[item.esntlAtchFileId];
+        return !(uploaded?.atflCd && uploaded?.atflId);
+      });
+      if (missingRequiredFile) {
+        alert(`${missingRequiredFile.esntlAtchFileNm} 파일을 첨부하세요.`);
+        return false;
+      }
+
+      // 저장 시: bchckUseYn =="Y" 인 경우, 화면에 표시되는 모든 review step에 대해
+      // 검토 결과가 선택되어 있어야 함 (visibleReviewStepCodes 기준)
+      // check across all checklist items (not only currently visible rows)
+      const allRelevant = (cklstTree ?? []).filter((row) => row.bchckUseYn === "Y");
+      const missingRow = allRelevant.find((row) =>
+        visibleReviewStepCodes.some((step) => !checkResults[cklstKey(row, step)]),
+      );
+      if (missingRow) {
+        const missingStep = visibleReviewStepCodes.find((step) => !checkResults[cklstKey(missingRow, step)])!;
+        const invalidKey = cklstKey(missingRow, missingStep);
+        console.warn("검토 결과 미선택 항목 발견:", invalidKey, missingRow, missingStep);
+
+        const invalidRowEl = cklstRowRefs.current[invalidKey];
+        if (invalidRowEl) {
+          invalidRowEl.scrollIntoView({ behavior: "smooth", block: "center" });
+          const firstRadio = invalidRowEl.querySelector<HTMLInputElement>(`input[name="chk_${invalidKey}"]`);
+          firstRadio?.focus();
+        } else {
+          // row not visible: switch header filter to the missing row's task code,
+          // then focus after render via pendingInvalidKey
+          const taskCode = (missingRow as any).taskSeComCd ?? null;
+          if (taskCode) setSelectedTaskCode(taskCode);
+          setPendingInvalidKey(invalidKey);
+        }
+
+        alert(`체크리스트 항목 "${missingRow.rvwCn}"의 검토결과를 선택하세요.`);
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  const toInstlSncnMngPayload = (prgrsSttsComCd: "SV" | "ST"| "ER"): InstlSncnMng => ({
+    instlSncnDocNo: docId ?? "",
+    admdstCd: "",
+    sidoNm: "",
+    sggNm: "",
+    chrgrNm: "",
+    instNm: "",
+    envoSeComCd: currentDet?.envoSeComCd ?? "",
+    sncnSeComCd: sncnSeComCd || DEFAULT_SNCN_SE_COM_CD,
+    envoSeCdNm: "",
+    taskSeComCd,
+    taskSeCdNm: taskSeComCdNm,
+    bgtBizCd: "",
+    bgtAplyYr: "",
+    bizNm: bzNm,
+    bizBgngYr: bzBgngYr,
+    bizEndYr: bzEndYr,
+    bizCn: bzCn,
+    aplcntNm: aplcntNm || userInfo?.userName || "",
+    aplcntMblTelno: aplcntMblTelno || (userInfo?.mphn ?? userInfo?.telno ?? ""),
+    aplcntOgdpNm: aplcntOgdpNm || (userInfo?.instSeNm ?? ""),
+    aplcntEmlAddr: aplcntEmlAddr || (userInfo?.email ?? ""),
+    dsgnrNm,
+    dsgnrTelno,
+    dsgnrOgdpNm: dsgnrPsitn,
+    dsgnrEmlAddr,
+    atchFileGroupId: etcFileGroupId,
+    prgrsSttsComCd,
+    prgrsSttsCdNm: "",
+    regDt: "",
+    mdfcnDt: "",
+    rgtrNm: "",
+    gugun: "",
+    sido: ""
+  });
+
+  async function handleSave() {
+    if (!fnValidation("SAVE")) return;
+    // 저장 시에는 `cklstResultList`만 전송합니다 (map 필드 제거)
+    const payload: InstlSncnApplySaveRequestDto = {
+      instlSncnMng: toInstlSncnMngPayload("SV"), // 저장 시 진행상태는 SV (임시저장)
+      bzScaleList: toBzScaleSaveDtoList(),
+      bizCstList: toBizCstSaveDtoList(),
+      cklstResultList: toCklstSaveDtoList(),
+      esntlAtchFileList: toEsntlAtchFileSaveDtoList(),
+    };
+
+    try {
+      const issuedDocNo = await InstlSncnApi.saveApply(payload);
+      alert(`저장되었습니다. 문서번호: ${issuedDocNo}`);
+    } catch (error) {
+      console.error("저장 API 호출 실패", error);
+      const serverMessage =
+        axios.isAxiosError(error) && error.response?.data?.message
+          ? (error.response.data as { message: string }).message
+          : "저장 중 오류가 발생했습니다.";
+      alert(serverMessage);
+    }
+  }
+
+  async function handleSubmit() {
+    if (!fnValidation("SAVE")) return;
+
+  const payload: InstlSncnApplySaveRequestDto = {
+      instlSncnMng: toInstlSncnMngPayload("SV"), // 저장 시 진행상태는 SV (임시저장)
+      bzScaleList: toBzScaleSaveDtoList(),
+      bizCstList: toBizCstSaveDtoList(),
+      cklstResultList: toCklstSaveDtoList(),
+      esntlAtchFileList: toEsntlAtchFileSaveDtoList(),
+    };  
+
+  try {
+      const issuedDocNo = await InstlSncnApi.saveApply(payload);
+      alert(`제출 되었습니다. 문서번호: ${issuedDocNo}`);
+    } catch (error) {
+      console.error("저장 API 호출 실패", error);
+      const serverMessage =
+        axios.isAxiosError(error) && error.response?.data?.message
+          ? (error.response.data as { message: string }).message
+          : "저장 중 오류가 발생했습니다.";
+      alert(serverMessage);
+    }
+  }
+
+  /* ---------------------------------------------------------------- */
+  return (
+    <div className="mt-6 space-y-4">
+      {/* ── 프로세스 스텝 바 ── */}
+      <div className="cnfm-card p-4">
+        <div className="cnfm-step-row flex-wrap gap-y-2">
+          {["설치인가 신청", "기술검토/조치계획 검토", "기술검토 회신", "인가승인"].map(
+            (label, i) => (
+              <span key={label} className="flex items-center gap-1">
+                <span
+                  className={`cnfm-step-badge ${i === 0 ? "cnfm-step-badge--current" : "cnfm-step-badge--pending"}`}
+                >
+                  <span
+                    className={`cnfm-step-dot ${i === 0 ? "cnfm-step-dot--current" : "cnfm-step-dot--pending"}`}
+                  />
+                  {label}
+                </span>
+                {i < 3 && <span className="text-[1.2rem] text-gray-400">›</span>}
+              </span>
+            ),
+          )}
+        </div>
+      </div>
+
+      {/* ── 타이틀 + 액션 버튼 ── */}
+      <div className="cnfm-card flex items-center justify-between p-4">
+        <h2 className="cnfm-section-title">■ 설치인가 신청/수정</h2>
+        <div className="flex gap-2">
+          <Button color="white" onClick={handleSave}>
+            저장
+          </Button>
+          <Button onClick={handleSubmit}>제출</Button>
+        </div>
+      </div>
+
+      {/* ── 기본 정보 ── */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">기본 정보</h3>
+        <table className="cnfm-form-table">
+          <tbody>
+            <tr>
+              <th style={{ textAlign: "center" }}>
+                <span className="text-red-500">*</span> 사업명
+              </th>
+              <td>
+                <div className="flex gap-2">
+                  <Input
+                    placeholder="사업명을 입력하거나 사업찾기를 이용하세요"
+                    className="flex-1 !text-[1.3rem]"
+                    value={bzNm}
+                    onChange={(e) => setBzNm(e.target.value)}
+                  />
+                  <button className="cnfm-btn-search whitespace-nowrap">🔍 사업찾기</button>
+                </div>
+              </td>
+              <th  style={{ textAlign: "center" }}>
+                <span className="text-red-500">*</span> 사업기간
+              </th>
+              <td>
+                <div className="flex items-center gap-2">
+                  <Input
+                    placeholder="시작연도(YYYY)"
+                    className="w-[14rem] !text-[1.3rem]"
+                    value={bzBgngYr}
+                    onChange={(e) => setBzBgngYr(e.target.value)}
+                  />
+                  <span className="text-gray-500">~</span>
+                  <Input
+                    placeholder="종료연도(YYYY)"
+                    className="w-[14rem] !text-[1.3rem]"
+                    value={bzEndYr}
+                    onChange={(e) => setBzEndYr(e.target.value)}
+                  />
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th  style={{ textAlign: "center" }}>
+                <span className="text-red-500">*</span> 사업내용
+              </th>
+              <td colSpan={3}>
+                <textarea
+                  className="cnfm-input h-[6rem] w-full resize-y"
+                  placeholder="사업 내용을 입력하세요"
+                  value={bzCn}
+                  onChange={(e) => setBzCn(e.target.value)}
+                />
+              </td>
+            </tr>
+            <tr>
+              <th  style={{ textAlign: "center" }}>구분</th>
+              <td>
+                <div className="flex gap-4 text-[1.3rem]">{taskSeComCdNm}</div>
+                <input type="hidden" name="taskSeComCd" value={taskSeComCd} />
+              </td>
+              <th  style={{ textAlign: "center" }}>신청 지자체</th>
+              <td>
+                <span className="inline-block min-w-[16rem] whitespace-nowrap text-[1.3rem] text-gray-500">
+                  {isModifyMode
+                    ? `${currentDet?.sido ?? "-"} ${currentDet?.gugun ?? "-"}`
+                    : userInfo?.laeSeNm ?? "\u00A0"}
+                </span>
+              </td>
+            </tr>
+            <tr>
+              <th  style={{ textAlign: "center" }}><span className="text-red-500">*</span>사업구분</th>
+              <td colSpan={3}>
+                <div className="flex gap-4 text-[1.3rem]">
+                  {[
+                    ["1", "설치인가"],
+                    ["2", "설치승인"],
+                    ["3", "폐지승인"],
+                  ].map(([val, label]) => (
+                    <label key={val} className="flex cursor-pointer items-center gap-1">
+                      <input
+                        type="radio"
+                        name="sncnSeComCd"
+                        value={val}
+                        checked={sncnSeComCd === val}
+                        onChange={() => setSncnSeComCd(val)}
+                      />
+                      {label}
+                    </label>
+                  ))}
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* ── 신청자 / 설계자 정보 ── */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">신청자 정보</h3>
+        <table className="cnfm-form-table">
+          <tbody>
+            <tr>
+              <th rowSpan={2} style={{ textAlign: "center" }} className="text-center align-middle w-[6.5rem]">신청자</th>
+              <th  style={{ textAlign: "center" }}>이름</th>
+              <td>
+                <span className="inline-block min-w-[16rem] whitespace-nowrap text-[1.3rem] text-gray-500">{aplcntNm || userInfo?.userName || "\u00A0"}</span>
+              </td>
+              <th  style={{ textAlign: "center" }}>전화번호</th>
+              <td>
+                <span className="inline-block min-w-[16rem] whitespace-nowrap text-[1.3rem] text-gray-500">{aplcntMblTelno || userInfo?.mphn || userInfo?.telno || "\u00A0"}</span>
+              </td>
+            </tr>
+            <tr>
+              <th  style={{ textAlign: "center" }}>부서</th>
+              <td>
+                <span className="text-[1.3rem] text-gray-500">{aplcntOgdpNm || userInfo?.instSeNm || "\u00A0"}</span>
+              </td>
+              
+              <th  style={{ textAlign: "center" }}>이메일</th>
+              <td>
+                <span className="text-[1.3rem] text-gray-500">{aplcntEmlAddr || userInfo?.email || "\u00A0"}</span>
+              </td>
+            </tr>
+
+            <tr>
+              <th rowSpan={2}  style={{ textAlign: "center" }}>설계자</th>
+              <th  style={{ textAlign: "center" }}>이름</th>
+              <td>
+                <Input
+                  placeholder="설계자 성명"
+                  className="!text-[1.3rem]"
+                  value={dsgnrNm}
+                  onChange={(e) => setDsgnrNm(e.target.value)}
+                />
+              </td>
+               <th  style={{ textAlign: "center" }}>전화번호</th>
+              <td>
+                <Input
+                  placeholder="설계자 전화번호"
+                  className="!text-[1.3rem]"
+                  value={dsgnrTelno}
+                  onChange={(e) => setDsgnrTelno(e.target.value)}
+                />
+              </td>
+            </tr>
+            <tr>
+              <th style={{ textAlign: "center" }}>소속</th>
+              <td>
+                <Input
+                  placeholder="소속명"
+                  className="!text-[1.3rem]"
+                  value={dsgnrPsitn}
+                  onChange={(e) => setDsgnrPsitn(e.target.value)}
+                />
+              </td>
+             
+              <th  style={{ textAlign: "center" }}>이메일</th>
+              <td>
+                <Input
+                  placeholder="설계자 이메일"
+                  className="!text-[1.3rem]"
+                  value={dsgnrEmlAddr}
+                  onChange={(e) => setDsgnrEmlAddr(e.target.value)}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* ── 개인정보 동의 (위젯으로 분리) ── */}
+      <PrivacyConsent value={privacyAgree} onChange={setPrivacyAgree}>
+        <p className="mb-1 font-semibold">[ 개인정보 수집항목 ]</p>
+        <div>
+          * 필수항목 : 소속기관, 소속부서, 담당자, 직급, 사무실 번호, FAX 번호<br />
+          ․ 선택항목 : 휴대폰 번호, 이메일 주소<br />
+          ․ 기타항목 : IP Address, 쿠키, 시스템 접속 및 이용 기록<br />
+          ※ 시스템 이용과정에서 기타 항목의 정보들이 자동으로 생성되어 수집될 수 있습니다.
+        </div>
+
+        <p className="mt-4 font-semibold">[ 개인정보 이용목적 ]</p>
+        <div>
+          ․ 국가하수도정보시스템 웹서비스 이용에 따른 본인 확인 절차에 이용<br />
+          ․ 국가하수도정보시스템 사용에 필요한 권한 부여<br />
+          ․ 사용자별 맞춤 컨텐츠 (처리시설의 운영 데이터 조회, 수질현황 데이터 조회,   예산 편성 / 예산편성 등) 제공에 이용
+        </div>
+
+        <div className="tit mt-4">● 개인정보의 보유 및 이용기간</div>
+        <div>
+          ․ 수집된 고객의 개인정보는 2년 동안 보유하며 그 이후에는 문서를 파쇄합니다.<br />
+          ․ 정보제공자가 개인정보 파쇄를 요청할 경우 즉시 파쇄합니다.
+        </div>
+
+        <br />
+        <div className="tit">● 개인정보 제공 거부에 따른 제한사항</div>
+        <div>
+          ․ 귀하는 개인정보 제공 동의를 거부할 권리가 있으나, 동의 거부 시 국가하수도정보시스템 이용 서비스에 제한이 있을 수 있습니다.
+        </div>
+      </PrivacyConsent>
+
+      {/* ── 사업규모 ── */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">사업규모</h3>
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table">
+            <thead>
+              <tr>
+                <th rowSpan={2} className="w-[30rem]">
+                  구분
+                </th>
+                <th>기본계획(A)</th>
+                <th>예산반영(B)</th>
+                <th>금회설계시(C)</th>
+                <th>증감(C-B)</th>
+              </tr>
+            </thead>
+            <tbody>
+              {cnstpTree.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="cnfm-td-empty">
+                    조회된 사업규모 항목이 없습니다.
+                  </td>
+                </tr>
+              ) : (
+                cnstpTree.map((node) => {
+                  const isLeaf = cnstpLeafSet.has(node.cnstpSeCd);
+                  const bscPl = scaleNodeVal(node, "bscPl");
+                  const budgetReflct = scaleNodeVal(node, "budgetReflct");
+                  const thtiDsgn = scaleNodeVal(node, "thtiDsgn");
+                  const diffVal = thtiDsgn - budgetReflct;
+                  const pl = indentPx(node.indCnstpSeCdNm);
+
+                  return (
+                    <tr key={node.cnstpSeCd} className={scaleRowStyle(node)}>
+                      <td
+                        className="bg-gray-50 pl-2 text-left"
+                        style={{ paddingLeft: `${pl + 8}px` }}
+                      >
+                        {node.cnstpSeCdNm}
+                      </td>
+
+                      {isLeaf
+                        ? (["bscPl", "budgetReflct", "thtiDsgn"] as const).map((col) => (
+                            <td key={col}>
+                              <input
+                                type="text"
+                                className="cnfm-input w-full text-right"
+                                value={(bzScaleMap[node.cnstpSeCd] ?? emptyScale())[col]}
+                                onChange={(e) =>
+                                  handleScaleInput(node.cnstpSeCd, col, e.target.value)
+                                }
+                              />
+                            </td>
+                          ))
+                        : ([bscPl, budgetReflct, thtiDsgn] as number[]).map((val, idx) => (
+                            <ReadCell key={`${node.cnstpSeCd}_${idx}`} value={fmt(val)} />
+                          ))}
+
+                      <ReadCell value={diffLabel(diffVal)} />
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* ── 총사업비 ── */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">
+          총사업비 <span className="text-[1.2rem] font-normal text-gray-400">(단위: 백만원)</span>
+        </h3>
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table w-full table-fixed">
+            <thead>
+              <tr>
+                <th colSpan={2} className="w-[30rem]" rowSpan={2}>
+                  구분
+                </th>
+                <th rowSpan={2}>예산반영(A)</th>
+                <th rowSpan={2}>표준사업비(B)</th>
+                <th rowSpan={2}>금회설계시(C)</th>
+                <th colSpan={2}>증감</th>
+              </tr>
+              <tr>
+                <th className="w-[12rem]">(C-B)</th>
+                <th className="w-[6rem]">%</th>
+              </tr>
+            </thead>
+            <tbody>
+              {acntgTree.map((node) => {
+                const isLeaf = leafSet.has(node.acntgSeCd);
+                // level 1,2 는 colSpan=2, level 3+ 는 왼쪽 빈셀 + 이름
+                const useColSpan = node.treeLevel <= 2;
+
+                const bscPl = nodeVal(node, "bscPl");
+                const budgetReflct = nodeVal(node, "budgetReflct");
+                const thtiDsgn = nodeVal(node, "thtiDsgn");
+                const diffVal = thtiDsgn - budgetReflct;
+
+                // indAcntgSeCdNm 압 공백으로 paddig 계산
+                const pl = indentPx(node.indAcntgSeCdNm);
+                // level 4+ (신설, 교체/보수 등) 서브 아이콘
+                const showSubIcon = node.treeLevel >= 4;
+
+                return (
+                  <tr key={node.acntgSeCd} className={rowStyle(node)}>
+                    {useColSpan ? (
+                      <td colSpan={2} className="pl-2 text-left">
+                        {node.acntgSeCdNm}
+                      </td>
+                    ) : (
+                      <>
+                        <td className="w-[4rem]"></td>
+                        <td
+                          className={`bg-gray-50 text-left ${isLeaf ? "text-gray-700" : ""}`}
+                          style={{ paddingLeft: `${pl + 8}px` }}
+                        >
+                          {showSubIcon && <span className="mr-1 text-gray-400">└</span>}
+                          {node.acntgSeCdNm}
+                        </td>
+                      </>
+                    )}
+
+                    {/* 리프 노드: 직접 입력 / 부모 노드: 소계 읽기 전용 */}
+                    {isLeaf
+                      ? [
+                          ["bscPl", bscPl] as const,
+                          ["budgetReflct", budgetReflct] as const,
+                          ["thtiDsgn", thtiDsgn] as const,
+                        ].map(([col]) => (
+                          <NumCell
+                            key={col}
+                            value={(amtMap[node.acntgSeCd] ?? emptyAmt())[col]}
+                            onChange={(v) => handleAmtInput(node.acntgSeCd, col, v)}
+                          />
+                        ))
+                      : (
+                          [
+                            ["bscPl", bscPl],
+                            ["budgetReflct", budgetReflct],
+                            ["thtiDsgn", thtiDsgn],
+                          ] as [keyof BzAmtRow, number][]
+                        ).map(([col, val]) => <ReadCell key={col} value={fmt(val)} />)}
+
+                    {/* 증감 (C-B) */}
+                    <ReadCell value={diffLabel(diffVal)} />
+
+                    {/* % 증감률 전체 행 표시 */}
+                    <ReadCell
+                      value={
+                        budgetReflct !== 0
+                          ? fmt(Math.round((diffVal / budgetReflct) * 100)) + "%"
+                          : "-"
+                      }
+                    />
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* ── 체크리스트 ── */}
+      <div className="cnfm-card p-4">
+        <div className="mb-3 flex items-center justify-between">
+          <h3 className="text-[1.5rem] font-bold text-gray-700">체크리스트</h3>
+          <div className="flex gap-2 items-center">
+            {Array.from(new Set((cklstTree ?? []).map((r) => (r as any).taskSeComCd).filter(Boolean))).map(
+              (code) => {
+                const name = TASK_CODE_LABELS[code] ?? code;
+                const active = selectedTaskCode === code;
+                return (
+                  <button
+                    key={code}
+                    type="button"
+                    className={`rounded border px-3 py-1 text-[1.2rem] font-semibold ${
+                      active ? "border-blue-500 bg-blue-50 text-blue-700" : "border-gray-300 bg-white text-gray-600"
+                    }`}
+                    onClick={() => setSelectedTaskCode(code)}
+                  >
+                    {name}
+                  </button>
+                );
+              },
+            )}
+            <div className="text-[1.1rem] text-gray-500">{`(${cklstStats.completed}/${cklstStats.total})`}</div>
+          </div>
+        </div>
+        <div className="mb-3 flex flex-wrap gap-2">
+          {visibleReviewStepCodes.length === 0 ? (
+            <span className="text-[1.2rem] text-gray-500">
+              현재 사용자 권한/진행상태 조합에서 표시 가능한 체크리스트 단계가 없습니다.
+            </span>
+          ) : (
+            visibleReviewStepCodes.map((stepCode) => {
+              const isSelected = selectedReviewStep === stepCode;
+              const isEditable = editableReviewStep === stepCode;
+              return (
+                <button
+                  key={stepCode}
+                  type="button"
+                  className={`rounded border px-3 py-1 text-[1.2rem] font-semibold ${
+                    isSelected
+                      ? "border-blue-500 bg-blue-50 text-blue-700"
+                      : "border-gray-300 bg-white text-gray-600"
+                  }`}
+                  onClick={() => setSelectedReviewStep(stepCode)}
+                >
+                  {stepCode}
+                  {isEditable ? " (입력)" : " (참고)"}
+                </button>
+              );
+            })
+          )}
+        </div>
+        <div className="mb-2 text-[1.25rem] text-gray-500">
+          체크리스트 진행상황 [{selectedReviewStep}] — 총합: <strong>{cklstStats.total}</strong> · 완료: {" "}
+          <strong>{cklstStats.completed}</strong> · 진행률: <strong>{cklstStats.percent}%</strong>
+        </div>
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table">
+            <thead>
+              <tr>
+                <th className="w-[20rem]" rowSpan={2}>
+                  검토항목
+                </th>
+                <th rowSpan={2}>주요 검토내용</th>
+                <th colSpan={2}>검토 결과(✓)</th>
+                {selectedReviewStep !== "LOCAL" ? (
+                  <th rowSpan={2} className="w-[20rem]">
+                    기술검토 의견
+                  </th>
+                ) : null}
+              </tr>
+              <tr>
+                <th className="w-[9rem]">
+                  <button
+                    type="button"
+                    className="w-full rounded border border-green-300 bg-green-500 px-3 py-1 text-[1.1rem] font-semibold text-white hover:bg-green-600"
+                    disabled={editableReviewStep !== selectedReviewStep}
+                    onClick={() =>
+                      setCheckResults((prev) => ({
+                        ...prev,
+                        ...Object.fromEntries(
+                          cklstRows.map((row) => [cklstKey(row, selectedReviewStep), "Y" as const]),
+                        ),
+                      }))
+                    }
+                  >
+                    전체 예
+                  </button>
+                </th>
+                <th className="w-[9rem]">
+                  <button
+                    type="button"
+                    className="w-full rounded border border-red-300 bg-red-500 px-3 py-1 text-[1.1rem] font-semibold text-white hover:bg-red-600"
+                    disabled={editableReviewStep !== selectedReviewStep}
+                    onClick={() =>
+                      setCheckResults((prev) => ({
+                        ...prev,
+                        ...Object.fromEntries(
+                          cklstRows.map((row) => [cklstKey(row, selectedReviewStep), "N" as const]),
+                        ),
+                      }))
+                    }
+                  >
+                    전체 아니오
+                  </button>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {cklstRows.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="cnfm-td-empty">
+                    조회된 체크리스트 항목이 없습니다.
+                  </td>
+                </tr>
+              ) : (
+                cklstRows.map((row) => {
+                  const key = cklstKey(row, selectedReviewStep);
+                  const rvwPaddingLeft = `${Math.max(0, row.treeLevel - 1) * 16 + 8}px`;
+                    //bchckUseYn 의 값이 "Y"인 항목은 라디오 박스가 보이고 없으면 안보이게 처리
+                  const showRadios = row.bchckUseYn === "Y";
+                  return (
+                    <tr
+                      key={key}
+                      ref={(el) => {
+                        cklstRowRefs.current[key] = el;
+                      }}
+                    >
+                      <td className="text-center text-[1.2rem]">{row.cklstArtclNm}</td>
+                      <td className="!text-left pl-2 text-[1.2rem] text-gray-600" style={{ paddingLeft: rvwPaddingLeft }}>
+                        {row.treeLevel > 1 ? "└ " : ""}
+                        {row.rvwCn}
+                      </td>
+                      {!showRadios ? (
+                        <>
+                          <td className="text-center"></td>
+                          <td className="text-center"></td>
+                        </>
+                      ) : (
+                        <>
+                          <td className="text-center">
+                            <label className="flex cursor-pointer items-center justify-center gap-1 text-[1.2rem] text-green-600">
+                              <input
+                                type="radio"
+                                name={`chk_${key}`}
+                                value="Y"
+                                checked={checkResults[key] === "Y"}
+                                disabled={editableReviewStep !== selectedReviewStep}
+                                onChange={() => setCheckResults((prev) => ({ ...prev, [key]: "Y" }))}
+                              />
+                            </label>
+                          </td>
+                          <td className="text-center">
+                            <label className="flex cursor-pointer items-center justify-center gap-1 text-[1.2rem] text-red-500">
+                              <input
+                                type="radio"
+                                name={`chk_${key}`}
+                                value="N"
+                                checked={checkResults[key] === "N"}
+                                disabled={editableReviewStep !== selectedReviewStep}
+                                onChange={() => setCheckResults((prev) => ({ ...prev, [key]: "N" }))}
+                              />
+                            </label>
+                          </td>
+                        </>
+                      )}
+                      
+                      {showRadios && selectedReviewStep !== "LOCAL" ? ( 
+                        <td className="text-left">
+                          <textarea
+                            className="cnfm-input w-full"
+                            value={checkComments[key] ?? ""}
+                            readOnly={editableReviewStep !== selectedReviewStep}
+                            onChange={(e) =>
+                              setCheckComments((prev) => ({ ...prev, [key]: e.target.value }))
+                            }
+                          />
+                        </td>
+                      ) : null}
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* ── 필수 첨부파일 ── */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">필수 첨부파일</h3>
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table">
+            <thead>
+              <tr>
+                <th>필수 자료명</th>
+                <th>파일형식</th>
+                <th>파일첨부</th>
+              </tr>
+            </thead>
+            <tbody>
+              {requiredAttachmentDefs.length === 0 ? (
+                <tr>
+                  <td colSpan={3} className="cnfm-td-empty">
+                    조회된 필수 첨부파일 항목이 없습니다.
+                  </td>
+                </tr>
+              ) : (
+                requiredAttachmentDefs.map((item) => {
+                  const key = item.esntlAtchFileId;
+                  const requiredFile = requiredFiles[key];
+                  const fileFormat = (item.esntlAtchFileRmrk || "").replaceAll(",", "/") || "-";
+
+                  return (
+                    <tr key={key}>
+                      <td className="pl-2">
+                        <div className="w-full text-left">
+                          {item.esntlAtchFileNm}
+                          {item.esntlAtchYn === "Y" ? <span className="ml-1 text-red-500">*</span> : null}
+                        </div>
+                      </td>
+                      <td>{fileFormat}</td>
+                      <td>
+                        <div className="flex items-center justify-center gap-2">
+                          <input
+                            type="text"
+                            placeholder="첨부문서를 올려주세요"
+                            className="cnfm-input flex-1"
+                            value={requiredFile?.uploading ? "업로드 중..." : requiredFile?.fileName || ""}
+                            readOnly
+                          />
+                          <input
+                            ref={(el) => {
+                              requiredFileInputRefs.current[key] = el;
+                            }}
+                            type="file"
+                            className="hidden"
+                            onChange={(e) => handleRequiredFileChange(key, e)}
+                          />
+                          <button
+                            type="button"
+                            className="cnfm-btn-search text-[1.2rem]"
+                            onClick={() => requiredFileInputRefs.current[key]?.click()}
+                            disabled={requiredFile?.uploading}
+                          >
+                            {requiredFile?.uploading ? "업로드중" : "첨부하기"}
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* ── 기타 첨부파일 ── */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">기타 첨부파일</h3>
+
+        {/* 안내 문구 토글 */}
+        <div className="mb-3 overflow-hidden rounded border">
+          <button
+            type="button"
+            className="flex w-full items-center gap-2 bg-gray-50 px-3 py-2 text-[1.25rem] text-gray-600 hover:bg-gray-100"
+            onClick={() => setEtcNoticeOpen((prev) => !prev)}
+          >
+            <span className="text-gray-400">{etcNoticeOpen ? "▼" : "▶"}</span>
+            복수개의 파일을 등록하시려면 Zip파일 형식으로 압축하여 올려주십시오.
+          </button>
+        </div>
+
+        <EtcAttachments
+          etcFiles={etcFiles}
+          etcUploading={etcUploading}
+          onFilesChange={handleEtcFilesChange}
+          onDelete={(fileId, atflId) => void handleDeleteEtcFile(fileId, atflId)}
+        />
+      </div>
+
+      {/* ── 액션 버튼 ── */}
+      <div className="cnfm-action-row">
+        <Button color="white" onClick={() => router.push("/instl-sncn")}>
+          목록
+        </Button>
+        <Button color="white" onClick={handleSave}>
+          저장
+        </Button>
+        <Button onClick={handleSubmit}>제출</Button>
+      </div>
+    </div>
+  );
+}
+
+export { CnfmRegistPage };
diff --git a/apps/as/src/pages/instl-sncn/ui/cnfm-view-page.tsx b/apps/as/src/pages/instl-sncn/ui/cnfm-view-page.tsx
new file mode 100644
index 000000000..76aeb1d15
--- /dev/null
+++ b/apps/as/src/pages/instl-sncn/ui/cnfm-view-page.tsx
@@ -0,0 +1,891 @@
+"use client";
+
+/* eslint-disable @typescript-eslint/no-explicit-any, simple-import-sort/imports */
+
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@common/components";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+// InstlSncnApi imported below with types
+import { PROXY_HOST } from "@/shared/config";
+import { formatFileSize } from "@/shared/lib/file-utils";
+import axios from "axios";
+import { processElaprPrgrs } from "@/entities/elapr/api/elapr-prgrs-service";
+import { ElaprDmndApi } from "@/entities/elapr/api/elapr-dmnd-service";
+import { dayjs, useUserStore, useAlertStore } from "@/shared/lib";
+import { InstlSncnApi, type InstlSncnApplySaveRequestDto } from "@/entities/instl-sncn";
+import { client } from "@/shared/api";
+
+import "./cnfm-page.css";
+
+type ReviewStepCode = "LOCAL" | "ENV" | "KECO";
+const REVIEW_STEP_CODES: ReviewStepCode[] = ["LOCAL", "ENV", "KECO"];
+const ROLE_TO_REVIEW_STEP: Record<string, ReviewStepCode> = {
+  ROLE_USER05: "LOCAL",
+  ROLE_USER04: "LOCAL",
+  ROLE_USER03: "ENV",
+  ROLE_USER02: "KECO",
+  ROLE_USER01: "KECO",
+};
+const REVIEW_STEP_ROLE_RANK: Record<ReviewStepCode, number> = {
+  LOCAL: 1,
+  ENV: 2,
+  KECO: 3,
+};
+const INSTL_PROGRESS_ORDER = [
+  "SV",
+  "ST",
+  "LE",
+  "ER",
+  "EE",
+  "TE",
+  "TS",
+  "TR",
+  "TP",
+  "EP",
+  "TA",
+  "TB",
+];
+
+const getProgressStepCount = (prgrsSttsComCd?: string): number => {
+  const idx = INSTL_PROGRESS_ORDER.indexOf(prgrsSttsComCd ?? "ST");
+  if (idx <= INSTL_PROGRESS_ORDER.indexOf("ST")) return 1;
+  if (idx <= INSTL_PROGRESS_ORDER.indexOf("TP")) return 2;
+  return 3;
+};
+
+const getRoleStepCount = (dtlInstCd?: string): number => {
+  const mapped = dtlInstCd ? ROLE_TO_REVIEW_STEP[dtlInstCd] : undefined;
+  return mapped ? REVIEW_STEP_ROLE_RANK[mapped] : 0;
+};
+
+// 업무구분 코드 -> 표시명 매핑 (체크리스트 그룹 표시용)
+const TASK_CODE_LABELS: Record<string, string> = {
+  RE: "재이용수",
+  SP: "하수관로",
+  SF: "하수처리시설",
+};
+
+const normalizeChecklistResultMap = (
+  raw: unknown,
+): Record<ReviewStepCode, any[]> => {
+  const base: Record<ReviewStepCode, any[]> = { LOCAL: [], ENV: [], KECO: [] };
+  if (!raw) return base;
+
+  if (Array.isArray(raw)) {
+    raw.forEach((row: any) => {
+      const step = (row?.rvwStpComCd ?? "LOCAL") as ReviewStepCode;
+      if (REVIEW_STEP_CODES.includes(step)) {
+        base[step].push(row);
+      }
+    });
+    return base;
+  }
+
+  if (typeof raw === "object") {
+    REVIEW_STEP_CODES.forEach((step) => {
+      const rows = (raw as Record<string, unknown>)[step];
+      base[step] = Array.isArray(rows) ? (rows as any[]) : [];
+    });
+  }
+
+  return base;
+};
+
+function CnfmViewPage({ id }: { id: string }) {
+  const router = useRouter();
+  const userInfo = useUserStore((state) => state.userInfo);
+
+  const alert = useAlertStore((state) => state.setMessage);
+
+  const query = useQuery({
+    queryKey: ["instl-sncn-detail", id],
+    queryFn: () => InstlSncnApi.getById(id),
+  });
+
+  const data = (query.data ?? {}) as any;
+
+  // support API shape where payload includes detDto + lists
+  const det = data.detDto ?? data;
+  const bizSclList = data.bizSclList ?? [];
+  const bizCstList = data.bizCstList ?? [];
+  // API now provides a flat checklist result list: `cklstResultList`
+  const rawCklst = useMemo(() => data.cklstResultList ?? [], [data.cklstResultList]);
+
+  // ensure we have a flat array
+  const cklstAll = useMemo(() => (Array.isArray(rawCklst) ? (rawCklst as any[]) : []), [rawCklst]);
+
+  // build a step-keyed map from the flat list so the rest of the view can use same access pattern
+  const cklstResultMap = useMemo(() => {
+    const base: Record<ReviewStepCode, any[]> = { LOCAL: [], ENV: [], KECO: [] };
+    (cklstAll ?? []).forEach((row: any) => {
+      const step = (row?.rvwStpComCd ?? "LOCAL") as ReviewStepCode;
+      if (REVIEW_STEP_CODES.includes(step)) base[step].push(row);
+    });
+    return base;
+  }, [cklstAll]);
+  const esntlFileList = data.esntlFileList ?? [];
+  const etcFileList = data.etcFileList ?? [];
+  const elaprDocPrgrsList = (data.elaprDocPrgrsList ?? []) as any[];
+  const renderApproverCell = (code: string) => {
+    const row = elaprDocPrgrsList.find((r) => r.atrzSeComCd === code);
+    if (!row) return <div className="text-center">-</div>;
+    const status = row.atrzPrgrsSttsComCd ?? "";
+    const statusMap: Record<string, { label: string; badgeClass: string; icon: string }> = {
+      ATRZ_PRGRS_001: { label: "대기", badgeClass: "bg-gray-100 text-gray-700", icon: "⏳" },
+      ATRZ_PRGRS_002: { label: "요청", badgeClass: "bg-yellow-100 text-yellow-800", icon: "📨" },
+      ATRZ_PRGRS_003: { label: "승인", badgeClass: "bg-green-100 text-green-800", icon: "✔️" },
+      ATRZ_PRGRS_004: { label: "반려", badgeClass: "bg-red-100 text-red-800", icon: "✖️" },
+    };
+    const st = statusMap[status] ?? { label: status || "", badgeClass: "bg-gray-100 text-gray-700", icon: "" };
+    return (
+      <div className="text-center">
+        <div className="font-semibold">{row.aprvrUuidNm ?? "-"}</div>
+        <div className="text-[0.95rem] text-gray-500">
+          {row.ognzNm ? `${row.ognzNm}` : ""}
+          {row.jbpsSeNm || row.jbgdSeNm ? ` · ${row.jbpsSeNm ?? ""}${row.jbgdSeNm ? ` ${row.jbgdSeNm}` : ""}` : ""}
+        </div>
+        <div className="text-[0.9rem] mt-1 flex items-center justify-center gap-2">
+          {row.atrzDt ? <span className="text-gray-400">{dayjs(row.atrzDt).format("YYYY-MM-DD HH:mm:ss")}</span> : null}
+          {st.label ? (
+            <span
+              title={`${row.atrzPrgrsSttsComNm ?? st.label}${row.rjctRsn ? ` — 사유: ${row.rjctRsn}` : ""}${row.atrzDt ? ` · ${dayjs(row.atrzDt).format("YYYY-MM-DD HH:mm:ss")}` : ""}`}
+              className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-semibold ml-1 ${st.badgeClass}`}
+            >
+              <span className="mr-1">{st.icon}</span>
+              <span>{st.label}</span>
+            </span>
+          ) : null}
+        </div>
+      </div>
+    );
+  };
+  const orderedApprovers = useMemo(() => {
+    return (elaprDocPrgrsList ?? []).slice().sort((a: any, b: any) => {
+      const A = Number(a?.atrzSeqNo ?? 0);
+      const B = Number(b?.atrzSeqNo ?? 0);
+      return A - B;
+    });
+  }, [elaprDocPrgrsList]);
+
+  const handleApproveClick = async (elaprPrgrsId: any, atrzSeComCd: any) => {
+    if (!elaprPrgrsId) {
+      alert("결재 정보가 올바르지 않습니다.");
+      return;
+    }
+    try {
+      await processElaprPrgrs(String(elaprPrgrsId), "ATRZ_PRGRS_003"); //진행상태를 승인으로 업데이트
+      alert("결재가 완료되었습니다.");
+      try {
+        await query.refetch();
+      } catch (e) {
+        /* ignore refetch errors */
+      }
+    } catch (err: any) {
+      console.error("결재 처리 실패", err);
+      const msg = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : "결재 처리 중 오류가 발생했습니다.";
+      alert(msg);
+    }
+  };
+
+  const handleAssignApproverClick = async (elaprTmpltId: string) => {
+    try {
+      const payload = {
+        elaprDocNo: det.instlSncnDocNo,
+        elaprTmpltId: elaprTmpltId, /* 팝업에서 선택된 전자결제 템플릿 */
+        dmndTtl: det.bizNm, /* "구례 하수도 처리시설 2026", */
+        dmndCn: det.bizCn /*"구례 발주 하수도 처리시설 사업 2026년도 진행분 결제 요청 입니다."*/
+      };
+      // ElaprDmndApi 서비스를 통해 백엔드 연동
+      await ElaprDmndApi.create(payload);
+      alert("결재자 지정(결재요청 등록)이 완료되었습니다.");
+      try {
+        await query.refetch();
+      } catch (e) {
+        /* ignore refetch errors */
+      }
+    } catch (err: any) {
+      console.error("결재자 지정 실패", err);
+      const msg = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : "결재자 지정 중 오류가 발생했습니다.";
+      alert(msg);
+    }
+  };
+
+  const renderApproverRow = (row: any) => {
+    if (!row) return <div className="text-center">-</div>;
+    const status = row.atrzPrgrsSttsComCd ?? "";
+    const statusMap: Record<string, { label: string; badgeClass: string; icon: string }> = {
+      ATRZ_PRGRS_001: { label: "대기", badgeClass: "bg-gray-100 text-gray-700", icon: "⏳" },
+      ATRZ_PRGRS_002: { label: "요청", badgeClass: "bg-yellow-100 text-yellow-800", icon: "📨" },
+      ATRZ_PRGRS_003: { label: "승인", badgeClass: "bg-green-100 text-green-800", icon: "✔️" },
+      ATRZ_PRGRS_004: { label: "반려", badgeClass: "bg-red-100 text-red-800", icon: "✖️" },
+    };
+    const st = statusMap[status] ?? { label: status || "", badgeClass: "bg-gray-100 text-gray-700", icon: "" };
+    return (
+      <div className="text-center">
+        <div className="font-semibold">{row.aprvrUuidNm ?? "-"}</div>
+        <div className="text-[0.95rem] text-gray-500">
+          {row.ognzNm ? `${row.ognzNm}` : ""}
+          {row.jbpsSeNm || row.jbgdSeNm ? ` · ${row.jbpsSeNm ?? ""}${row.jbgdSeNm ? ` ${row.jbgdSeNm}` : ""}` : ""}
+        </div>
+        <div className="text-[0.9rem] mt-1 flex items-center justify-center gap-2">
+          {row.atrzDt ? <span className="text-gray-400">{dayjs(row.atrzDt).format("YYYY-MM-DD HH:mm:ss")}</span> : null}
+          {st.label ? (
+            <>
+              <span
+                title={`${row.atrzPrgrsSttsComNm ?? st.label}${row.rjctRsn ? ` — 사유: ${row.rjctRsn}` : ""}${row.atrzDt ? ` · ${dayjs(row.atrzDt).format("YYYY-MM-DD HH:mm:ss")}` : ""}`}
+                className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-semibold ml-1 ${st.badgeClass}`}
+              >
+                <span className="mr-1">{st.icon}</span>
+                <span>{st.label}</span>
+              </span>
+              {status === "ATRZ_PRGRS_002" && userInfo?.userUnqId === row.aprvrUuid ? (
+                <button
+                  type="button"
+                  onClick={() => handleApproveClick(row.elaprPrgrsId, row.atrzSeComCd)}
+                  className="ml-2 px-2 py-1 bg-blue-500 text-white text-xs rounded"
+                >
+                  결제
+                </button>
+              ) : null}
+            </>
+          ) : null}
+        </div>
+      </div>
+    );
+  };
+  const currentPrgrsSttsComCd = (det.prgrsSttsComCd as string | undefined) ?? "ST";
+  const roleBasedMaxStepCount = getRoleStepCount(userInfo?.dtlInstCd);
+  const progressBasedMaxStepCount = getProgressStepCount(currentPrgrsSttsComCd);
+  const visibleStepCount = Math.min(progressBasedMaxStepCount, roleBasedMaxStepCount);
+  const visibleReviewStepCodes = useMemo(
+    () => REVIEW_STEP_CODES.slice(0, visibleStepCount),
+    [visibleStepCount],
+  );
+  const [selectedReviewStep, setSelectedReviewStep] = useState<ReviewStepCode>("LOCAL");
+  // selected task code for header filtering (null = none selected)
+  const [selectedTaskCode, setSelectedTaskCode] = useState<string | null>(null);
+
+  // derive available task codes from checklist results
+  const taskCodes = useMemo(() => {
+    return Array.from(new Set((cklstAll ?? []).map((r: any) => (r as any).taskSeComCd).filter(Boolean)));
+  }, [cklstAll]);
+
+  useEffect(() => {
+    if (visibleReviewStepCodes.length === 0) return;
+    if (!visibleReviewStepCodes.includes(selectedReviewStep)) {
+      setSelectedReviewStep(visibleReviewStepCodes[visibleReviewStepCodes.length - 1]);
+    }
+  }, [selectedReviewStep, visibleReviewStepCodes]);
+
+  // when checklist result task codes change, default selectedTaskCode to first available code
+  useEffect(() => {
+    if (!taskCodes || taskCodes.length === 0) {
+      if (selectedTaskCode !== null) setSelectedTaskCode(null);
+      return;
+    }
+    if (!selectedTaskCode || !taskCodes.includes(selectedTaskCode)) {
+      setSelectedTaskCode(taskCodes[0]);
+    }
+  }, [taskCodes, selectedTaskCode]);
+
+  const selectedChecklistRows = useMemo(() => {
+    if (visibleReviewStepCodes.length === 0) return [];
+    const rows = (cklstResultMap[selectedReviewStep] ?? []).filter((r: any) =>
+      selectedTaskCode ? (r.taskSeComCd ?? "") === selectedTaskCode : true,
+    );
+    return rows
+      .slice()
+      .sort((a: any, b: any) =>
+        (a.cklstArtclSn ?? 0) - (b.cklstArtclSn ?? 0) || (a.sortSeq ?? 0) - (b.sortSeq ?? 0) || (a.cklstRvwSn ?? 0) - (b.cklstRvwSn ?? 0),
+      );
+  }, [cklstResultMap, selectedReviewStep, visibleReviewStepCodes.length, selectedTaskCode]);
+
+  const [viewCheckResults, setViewCheckResults] = useState<Record<string, string>>({});
+  const [viewCheckComments, setViewCheckComments] = useState<Record<string, string>>({});
+
+  const cklstStats = useMemo(() => {
+    if (!selectedReviewStep) return { total: 0, completed: 0, percent: 0 };
+    const rows = (cklstResultMap[selectedReviewStep] ?? []).filter((r: any) => r.bchckUseYn === "Y" && (selectedTaskCode ? (r.taskSeComCd ?? "") === selectedTaskCode : true));
+    const total = rows.length;
+    const completed = rows.reduce((acc: number, row: any) => {
+      const key = `${row.taskSeComCd ?? ""}_${row.cklstSn}_${row.cklstArtclSn ?? ""}_${row.cklstRvwSn}_${selectedReviewStep}`;
+      const val = (viewCheckResults[key] ?? row.rvwRsltAnmlyYn) ?? "";
+      return acc + (val ? 1 : 0);
+    }, 0);
+    const percent = total > 0 ? Math.round((completed / total) * 100) : 0;
+    return { total, completed, percent };
+  }, [cklstResultMap, viewCheckResults, selectedReviewStep, selectedTaskCode]);
+
+  const fnValidation = (mode: "SAVE" | "SUBMIT") => {
+    // 기본 검증: 필요하면 확장
+    return true;
+  };
+
+  const hadleTechReviewSubmit = async () => {
+    if (!fnValidation("SAVE")) return;
+
+    const cklstResultList = (cklstAll ?? [])
+      .filter((r: any) => r.bchckUseYn === "Y")
+      .map((row: any) => {
+        const key = `${row.taskSeComCd ?? ""}_${row.cklstSn}_${row.cklstArtclSn ?? ""}_${row.cklstRvwSn}_${selectedReviewStep}`;
+        const rvwRsltAnmlyYn = (viewCheckResults[key] ?? row.rvwRsltAnmlyYn) ?? null;
+        const picRvwCn = (viewCheckComments[key] ?? row.picRvwCn) ?? null;
+        return {
+          taskSeComCd: row.taskSeComCd ?? "",
+          cklstSn: row.cklstSn,
+          cklstArtclSn: row.cklstArtclSn,
+          cklstRvwSn: row.cklstRvwSn,
+          rvwStpComCd: selectedReviewStep,
+          rvwRsltAnmlyYn,
+          picRvwCn,
+        };
+      });
+
+    const payload: InstlSncnApplySaveRequestDto = {
+      // only map core management DTO and checklist results; other lists empty per request
+      instlSncnMng: { ...(det ?? {}), prgrsSttsComCd: "ER" } as any,
+      bzScaleList: [],
+      bizCstList: [],
+      cklstResultList,
+      esntlAtchFileList: [],
+    } as unknown as InstlSncnApplySaveRequestDto;
+
+    try {
+      const issuedDocNo = await InstlSncnApi.techReview(payload);
+      alert(`기술검토 등록이 완료되었습니다. 문서번호: ${issuedDocNo}`);
+    } catch (error) {
+      console.error("기술검토 등록 API 호출 실패", error);
+      const serverMessage =
+        axios.isAxiosError(error) && error.response?.data?.message
+          ? (error.response.data as { message: string }).message
+          : "저장 중 오류가 발생했습니다.";
+      alert(serverMessage);
+    }
+  };
+
+  useEffect(() => {
+    const results: Record<string, string> = {};
+    const comments: Record<string, string> = {};
+    (selectedChecklistRows ?? []).forEach((row: any) => {
+      const key = `${row.taskSeComCd ?? ""}_${row.cklstSn}_${row.cklstArtclSn ?? ""}_${row.cklstRvwSn}_${row.rvwStpComCd ?? "LOCAL"}`;
+      if (row.rvwRsltAnmlyYn === "Y" || row.rvwRsltAnmlyYn === "N") results[key] = row.rvwRsltAnmlyYn;
+      if (row.picRvwCn) comments[key] = String(row.picRvwCn);
+    });
+    setViewCheckResults(results);
+    setViewCheckComments(comments);
+  }, [selectedChecklistRows]);
+
+  if (query.isLoading) {
+    return <div className="mt-6 text-[1.4rem]">상세 정보를 불러오는 중입니다...</div>;
+  }
+
+  if (!query.data) {
+    return <div className="mt-6 text-[1.4rem]">상세 정보를 찾을 수 없습니다.</div>;
+  }
+
+  const fmt = (v: number | null | undefined) =>
+    typeof v === "number" ? v.toLocaleString() : v === null || v === undefined ? "" : String(v);
+
+  const indentPx = (indNm: string | undefined) => {
+    if (!indNm) return 0;
+    const spaces = indNm.length - indNm.trimStart().length;
+    return (spaces / 4) * 16;
+  };
+
+  /* formatFileSize moved to shared lib: @/shared/lib/file-utils */
+
+  return (
+    <div className="mt-6 space-y-4">
+      {/* orderedApprovers.length > 0 && ( */}
+      <div className="cnfm-card p-4">
+        <h3 className="text-[1.5rem] font-semibold">결재 정보</h3>
+        <div className="cnfm-table-wrap mt-3">
+          <table className="cnfm-table w-full">
+            <thead>
+              <tr>
+                {orderedApprovers.length === 0 ? (
+                  <>
+                    <th className="text-center">접수자</th>
+                    <th className="text-center">검토자</th>
+                    <th className="text-center">승인자</th>
+                    <th className="text-center">최종승인자</th>
+                  </>
+                ) : (
+                  orderedApprovers.map((r: any) => (
+                    <th key={String(r.elaprPrgrsId ?? r.atrzSeComCd)} className="text-center">
+                      {r.atrzSeComNm ?? r.atrzSeComCd}
+                    </th>
+                  ))
+                )}
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                {orderedApprovers.length === 0 ? (
+                  <>
+                    <td>{renderApproverCell("ATRZ01")}</td>
+                    <td>{renderApproverCell("ATRZ02")}</td>
+                    <td>{renderApproverCell("ATRZ03")}</td>
+                    <td>{renderApproverCell("ATRZ99")}</td>
+                  </>
+                ) : (
+                  orderedApprovers.map((r: any) => (
+                    <td key={String(r.elaprPrgrsId ?? r.atrzSeComCd)}>{renderApproverRow(r)}</td>
+                  ))
+                )}
+              </tr>
+            </tbody>
+          </table>
+          {/** 결제자 지정 버튼 */}
+          <div className="mt-4 text-right">
+            <Button
+              type="button"
+              onClick={() => handleAssignApproverClick("TMPLT20260611000001")}
+            >
+              결재자 지정
+            </Button>
+          </div>
+        </div>
+      </div>
+      {/* )} */}
+      <div className="cnfm-card p-4">
+        <h2 className="cnfm-section-title">설치인가 상세보기</h2>
+        <p className="mt-2 text-[1.3rem] text-gray-600">문서번호: <strong>{det.instlSncnDocNo}</strong></p>
+      </div>
+
+      <div className="cnfm-card p-4">
+        <h3 className="text-[1.5rem] font-semibold">기본 정보</h3>
+        <table className="cnfm-form-table mt-3">
+          <tbody>
+            <tr>
+              <th>사업명</th>
+              <td>{det.bizNm || "-"}</td>
+              <th>사업기간</th>
+              <td>{(det.bizBgngYr || "-") + " ~ " + (det.bizEndYr || "-")}</td>
+            </tr>
+            <tr>
+              <th>사업내용</th>
+              <td colSpan={3}>{det.bizCn || "-"}</td>
+            </tr>
+            <tr>
+              <th>구분</th>
+              <td>{det.taskSeCdNm || det.taskSeComCd || "-"}</td>
+              <th>신청지자체</th>
+              <td>{det.sido || "-"} {det.gugun || "-"}</td>
+            </tr>
+            <tr>
+              <th>사업구분</th>
+              <td colSpan={3}>{det.sncnSeCdNm || "-"}</td>
+            </tr>
+            <tr>
+              <th>진행상태</th>
+              <td>{det.prgrsSttsCdNm || det.prgrsSttsComCd || "-"}</td>
+              <th>예산사업코드</th>
+              <td>{det.bgtBizCd || "-"}</td>
+            </tr>
+
+          </tbody>
+        </table>
+      </div>
+
+      <div className="cnfm-card p-4">
+        <h3 className="text-[1.5rem] font-semibold">담당자 정보</h3>
+        <table className="cnfm-form-table mt-3">
+          <tbody>
+            <tr>
+              <th>신청자명</th>
+              <td>{det.aplcntNm || "-"}</td>
+              <th>신청자 연락처</th>
+              <td>{det.aplcntMblTelno || "-"}</td>
+            </tr>
+            <tr>
+              <th>신청자 소속</th>
+              <td>{det.aplcntOgdpNm || "-"}</td>
+              <th>신청자 이메일</th>
+              <td>{det.aplcntEmlAddr || "-"}</td>
+            </tr>
+            <tr>
+              <th>설계자명</th>
+              <td>{det.dsgnrNm || "-"}</td>
+              <th>설계자 연락처</th>
+              <td>{det.dsgnrTelno || "-"}</td>
+            </tr>
+            <tr>
+              <th>설계자 소속</th>
+              <td>{det.dsgnrOgdpNm || "-"}</td>
+              <th>설계자 이메일</th>
+              <td>{det.dsgnrEmlAddr || "-"}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div className="cnfm-card p-4">
+        <h3 className="text-[1.5rem] font-semibold">이력 정보</h3>
+        <table className="cnfm-form-table mt-3">
+          <tbody>
+            <tr>
+              <th>등록일시</th>
+              <td>{det.regDt ? dayjs(det.regDt).format("YYYY-MM-DD HH:mm:ss") : "-"}</td>
+              <th>수정일시</th>
+              <td>{det.mdfcnDt ? dayjs(det.mdfcnDt).format("YYYY-MM-DD HH:mm:ss") : "-"}</td>
+            </tr>
+            <tr>
+              <th>등록자명</th>
+              <td>{det.rgtrNm || "-"}</td>
+              <th>첨부파일그룹ID</th>
+              <td>{det.atchFileGroupId || "-"}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* 사업규모 */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">사업규모</h3>
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table">
+            <thead>
+              <tr>
+                <th className="w-[30rem]">구분</th>
+                <th>기본계획(A)</th>
+                <th>예산반영(B)</th>
+                <th>금회설계시(C)</th>
+                <th>증감(C-B)</th>
+              </tr>
+            </thead>
+            <tbody>
+              {bizSclList.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="cnfm-td-empty">조회된 사업규모 항목이 없습니다.</td>
+                </tr>
+              ) : (
+                bizSclList.map((node: any) => {
+                  const pl = indentPx(node.indCnstpSeCdNm);
+                  const bscPlanQty = Number(node.bscPlanQty) || 0;
+                  const budgetReflct = Number(node.bgtRfltQty) || 0;
+                  const tstmDesignQty = Number(node.tstmDesignQty) || 0;
+                  const diff = tstmDesignQty - budgetReflct;
+                  return (
+                    <tr key={node.cnstpSeCd} className={node.treeLevel === 1 ? "bg-gray-50 font-semibold" : ""}>
+                      <td className="bg-gray-50 pl-2 text-left" style={{ paddingLeft: `${pl + 8}px` }}>{node.cnstpSeCdNm}</td>
+                      <td><div className="text-right">{fmt(bscPlanQty)}</div></td>
+                      <td><div className="text-right">{fmt(budgetReflct)}</div></td>
+                      <td><div className="text-right">{fmt(tstmDesignQty)}</div></td>
+                      <td><div className="text-right">{diff > 0 ? `+${fmt(diff)}` : fmt(diff)}</div></td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* 총사업비 */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">총사업비 <span className="text-[1.2rem] font-normal text-gray-400">(단위: 백만원)</span></h3>
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table w-full table-fixed">
+            <thead>
+              <tr>
+                <th colSpan={2} className="w-[30rem]" rowSpan={2}>
+                  구분
+                </th>
+                <th rowSpan={2}>예산반영(A)</th>
+                <th rowSpan={2}>표준사업비(B)</th>
+                <th rowSpan={2}>금회설계시(C)</th>
+                <th colSpan={2}>증감</th>
+              </tr>
+              <tr>
+                <th className="w-[12rem]">(C-B)</th>
+                <th className="w-[6rem]">%</th>
+              </tr>
+            </thead>
+            <tbody>
+              {bizCstList.map((node: any) => {
+
+                const pl = indentPx(node.indAcntgSeCdNm);
+                const bscPlanAmt = Number(node.bscPlanAmt) || 0;
+                const budgetReflct = Number(node.bgtRfltAmt) || 0;
+                const tstmDesignAmt = Number(node.tstmDesignAmt) || 0;
+                const diff = tstmDesignAmt - budgetReflct;
+                const showSubIcon = node.treeLevel >= 4;
+                const isLeaf = !bizCstList.some((n: any) => n.upAcntgSeCd === node.acntgSeCd);
+                return (
+                  <tr
+                    key={node.acntgSeCd}
+                    className={
+                      node.treeLevel === 1
+                        ? "bg-blue-50 font-bold"
+                        : node.treeLevel === 2
+                          ? "bg-gray-100 font-semibold"
+                          : ""
+                    }
+                  >
+                    {node.treeLevel <= 2 ? (
+                      <td colSpan={2} className="pl-2 text-left">{node.acntgSeCdNm}</td>
+                    ) : (
+                      <>
+                        <td className="w-[4rem]"></td>
+                        <td
+                          className={`bg-gray-50 text-left ${isLeaf ? "text-gray-700" : ""}`}
+                          style={{ paddingLeft: `${pl + 8}px` }}
+                        >
+                          {showSubIcon && <span className="mr-1 text-gray-400">└</span>}
+                          {node.acntgSeCdNm}
+                        </td>
+                      </>
+                    )}
+
+                    <td>
+                      <div className="text-right">{fmt(bscPlanAmt)}</div>
+                    </td>
+                    <td>
+                      <div className="text-right">{fmt(budgetReflct)}</div>
+                    </td>
+                    <td>
+                      <div className="text-right">{fmt(tstmDesignAmt)}</div>
+                    </td>
+                    <td>
+                      <div className="text-right">{diff > 0 ? `+${fmt(diff)}` : fmt(diff)}</div>
+                    </td>
+                    <td>
+                      <div className="text-right">{budgetReflct !== 0 ? `${Math.round((diff / budgetReflct) * 100)}%` : "-"}</div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* 체크리스트 */}
+      <div className="cnfm-card p-4">
+        <div className="mb-3 flex items-center justify-between">
+          <h3 className="text-[1.5rem] font-bold text-gray-700">체크리스트</h3>
+          <div className="flex items-center gap-4">
+            <div className="flex gap-2 items-center">
+              {Array.from(new Set(taskCodes)).map((code) => {
+                const name = TASK_CODE_LABELS[code] ?? code;
+                const active = selectedTaskCode === code;
+                return (
+                  <button
+                    key={code}
+                    type="button"
+                    className={`rounded border px-3 py-1 text-[1.2rem] font-semibold ${active ? "border-blue-500 bg-blue-50 text-blue-700" : "border-gray-300 bg-white text-gray-600"
+                      }`}
+                    onClick={() => setSelectedTaskCode(code)}
+                  >
+                    {name}
+                  </button>
+                );
+              })}
+            </div>
+            <div className="text-[1.1rem] text-gray-500">{`(${cklstStats.completed}/${cklstStats.total})`}</div>
+          </div>
+        </div>
+        <div className="mb-3 flex flex-wrap gap-2">
+          {visibleReviewStepCodes.length === 0 ? (
+            <span className="text-[1.2rem] text-gray-500">
+              현재 사용자 권한/진행상태 조합에서 표시 가능한 체크리스트 단계가 없습니다.
+            </span>
+          ) : (
+            visibleReviewStepCodes.map((stepCode) => (
+              <button
+                key={stepCode}
+                type="button"
+                className={`rounded border px-3 py-1 text-[1.2rem] font-semibold ${selectedReviewStep === stepCode
+                  ? "border-blue-500 bg-blue-50 text-blue-700"
+                  : "border-gray-300 bg-white text-gray-600"
+                  }`}
+                onClick={() => setSelectedReviewStep(stepCode)}
+              >
+                {stepCode}
+              </button>
+            ))
+          )}
+        </div>
+        <div className="mb-2 text-[1.25rem] text-gray-500">
+          체크리스트 진행상황 [{selectedReviewStep}] — 총합: <strong>{cklstStats.total}</strong> · 완료: <strong>{cklstStats.completed}</strong> · 진행률: <strong>{cklstStats.percent}%</strong>
+        </div>
+        <div className="cnfm-table-wrap mt-3">
+          <table className="cnfm-table">
+            <thead>
+              <tr>
+                <th className="w-[20rem]" rowSpan={2}>검토항목</th>
+                <th rowSpan={2}>주요 검토내용</th>
+                <th colSpan={2}>검토 결과(✓)</th>
+                {selectedReviewStep !== "LOCAL" ? (
+                  <th rowSpan={2} className="w-[20rem]">기술검토 의견</th>
+                ) : null}
+              </tr>
+              <tr>
+                <th className="w-[9rem]">
+                  <button
+                    type="button"
+                  >
+                    예
+                  </button>
+                </th>
+                <th className="w-[9rem]">
+                  <button
+                    type="button"
+                  >
+                    아니오
+                  </button>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {selectedChecklistRows.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="cnfm-td-empty">조회된 체크리스트 항목이 없습니다.</td>
+                </tr>
+              ) : (
+                selectedChecklistRows.map((row: any) => {
+                  const key = `${row.taskSeComCd ?? ""}_${row.cklstSn}_${row.cklstArtclSn ?? ""}_${row.cklstRvwSn}_${row.rvwStpComCd ?? "LOCAL"}`;
+                  const hasResult = row.rvwRsltAnmlyYn === "Y" || row.rvwRsltAnmlyYn === "N";
+                  const showRadios = row.bchckUseYn === "Y";
+
+                  return (
+                    <tr key={key}>
+                      <td className="text-center text-[1.2rem]">{row.cklstArtclNm}</td>
+                      <td className="!text-left pl-2 text-[1.2rem] text-gray-600" style={{ paddingLeft: `${Math.max(0, row.treeLevel - 1) * 16 + 8}px` }}>{row.treeLevel > 1 ? "└ " : ""}{row.rvwCn}</td>
+                      {!showRadios ? (
+                        <>
+                          <td className="text-center">-</td>
+                          <td className="text-center">-</td>
+                        </>
+                      ) : (
+                        <>
+                          <td className="text-center">
+                            <input
+                              type="radio"
+                              name={`chk_${key}`}
+                              value="Y"
+                              checked={(viewCheckResults[key] ?? "") === "Y"}
+                              disabled={selectedReviewStep === "LOCAL"}
+                              onChange={() => setViewCheckResults((prev) => ({ ...prev, [key]: "Y" }))}
+                            />
+                          </td>
+                          <td className="text-center">
+                            <input
+                              type="radio"
+                              name={`chk_${key}`}
+                              value="N"
+                              checked={(viewCheckResults[key] ?? "") === "N"}
+                              disabled={selectedReviewStep === "LOCAL"}
+                              onChange={() => setViewCheckResults((prev) => ({ ...prev, [key]: "N" }))}
+                            />
+                          </td>
+                        </>
+                      )}
+                      {showRadios && selectedReviewStep !== "LOCAL" ? (
+                        <td className="text-left">
+                          <textarea
+                            className="cnfm-input w-full"
+                            value={viewCheckComments[key] ?? ""}
+                            onChange={(e) => setViewCheckComments((prev) => ({ ...prev, [key]: e.target.value }))}
+                          />
+                        </td>
+                      ) : null}
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* 필수 첨부파일 */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">필수 첨부파일</h3>
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table">
+            <thead>
+              <tr>
+                <th>필수 자료명</th>
+                <th>파일명</th>
+                <th className="w-[8rem] text-right">크기</th>
+              </tr>
+            </thead>
+            <tbody>
+              {esntlFileList.length === 0 ? (
+                <tr>
+                  <td colSpan={3} className="cnfm-td-empty">조회된 필수 첨부파일 항목이 없습니다.</td>
+                </tr>
+              ) : (
+                esntlFileList.map((f: any) => (
+                  <tr key={f.esntlAtchFileId}>
+                    <td className="pl-2">
+                      <div className="w-full text-left">
+                        {f.esntlAtchFileNm}
+                        {f.esntlAtchYn === "Y" ? <span className="ml-1 text-red-500">*</span> : null}
+                      </div>
+                    </td>
+                    <td>
+                      {f.atflCd ? (
+                        <a className="text-blue-600" href={`${PROXY_HOST}/attach-service/api/v1/atflcd/download/${f.atflCd}`} target="_blank" rel="noreferrer">{f.orgnlFileNm || "다운로드"}</a>
+                      ) : (
+                        <span className="text-gray-500">첨부없음</span>
+                      )}
+                    </td>
+                    <td className="w-[8rem] text-right"><div className="text-right">{formatFileSize(f.atflFlieSz)}</div></td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* 기타 첨부파일 */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">기타 첨부파일</h3>
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table">
+            <thead>
+              <tr>
+                <th>파일명</th>
+                <th className="w-[8rem] text-right">크기</th>
+              </tr>
+            </thead>
+            <tbody>
+              {etcFileList.length === 0 ? (
+                <tr>
+                  <td colSpan={2} className="cnfm-td-empty">등록된 기타첨부파일이 없습니다.</td>
+                </tr>
+              ) : (
+                etcFileList.map((f: any) => (
+                  <tr key={f.atflId}>
+                    <td>
+                      {f.orgnlFileNm ? (
+                        <a className="text-blue-600" href={`${PROXY_HOST}/attach-service/api/v1/atflcd/download/${f.atflCd}`} target="_blank" rel="noreferrer">{f.orgnlFileNm}</a>
+                      ) : (
+                        <span className="text-gray-700">{f.physFileNm || f.atflId}</span>
+                      )}
+                    </td>
+                    <td className="w-[8rem] text-right text-gray-500">{formatFileSize(f.atflFlieSz)}</td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="cnfm-action-row">
+        <Button color="white" onClick={() => router.push("/instl-sncn")}>목록</Button>
+        <Button onClick={() => router.push(`/instl-sncn/${id}/modify`)}>수정</Button>
+        <Button onClick={() => void hadleTechReviewSubmit()}>기술검토등록</Button>
+      </div>
+    </div>
+  );
+}
+
+export { CnfmViewPage };
diff --git a/apps/as/src/pages/rvw-mnpw-mng/index.ts b/apps/as/src/pages/rvw-mnpw-mng/index.ts
new file mode 100644
index 000000000..2b0f5d435
--- /dev/null
+++ b/apps/as/src/pages/rvw-mnpw-mng/index.ts
@@ -0,0 +1 @@
+export { RvwMnpwMngPage } from "./ui/rvw-mnpw-mng-page";
diff --git a/apps/as/src/pages/rvw-mnpw-mng/lib/group-rvw-mnpw-by-atrz-se.ts b/apps/as/src/pages/rvw-mnpw-mng/lib/group-rvw-mnpw-by-atrz-se.ts
new file mode 100644
index 000000000..a2777d29f
--- /dev/null
+++ b/apps/as/src/pages/rvw-mnpw-mng/lib/group-rvw-mnpw-by-atrz-se.ts
@@ -0,0 +1,18 @@
+import type { RvwMnpwMngResponseDto } from "@/entities/rvw-mnpw";
+
+import type { RvwMnpwBlockConfig } from "../model/rvw-mnpw-block-config";
+
+export function groupRvwMnpwByAtrzSe(
+  items: RvwMnpwMngResponseDto[],
+  blocks: RvwMnpwBlockConfig[],
+): Record<string, RvwMnpwMngResponseDto[]> {
+  const grouped = Object.fromEntries(
+    blocks.map((block) => [block.atrzSeComCd, [] as RvwMnpwMngResponseDto[]]),
+  );
+
+  for (const item of items) {
+    grouped[item.atrzSeComCd]?.push(item);
+  }
+
+  return grouped;
+}
diff --git a/apps/as/src/pages/rvw-mnpw-mng/model/rvw-mnpw-block-config.ts b/apps/as/src/pages/rvw-mnpw-mng/model/rvw-mnpw-block-config.ts
new file mode 100644
index 000000000..5a6c681e1
--- /dev/null
+++ b/apps/as/src/pages/rvw-mnpw-mng/model/rvw-mnpw-block-config.ts
@@ -0,0 +1,15 @@
+export interface RvwMnpwBlockConfig {
+  id: string;
+  title: string;
+  atrzSeComCd: string;
+}
+
+/** 결재선 관리 validators.ts ATRZ 코드와 동일 */
+export const RVW_MNPW_BLOCKS: RvwMnpwBlockConfig[] = [
+  { id: "receiver", title: "접수", atrzSeComCd: "ATRZ01" },
+  { id: "reviewer", title: "검토", atrzSeComCd: "ATRZ02" },
+  { id: "approver", title: "승인", atrzSeComCd: "ATRZ03" },
+  { id: "final", title: "최종승인", atrzSeComCd: "ATRZ99" },
+];
+
+export const RVW_MNPW_PAGE_SIZE = 500;
diff --git a/apps/as/src/pages/rvw-mnpw-mng/ui/ognz-panel.tsx b/apps/as/src/pages/rvw-mnpw-mng/ui/ognz-panel.tsx
new file mode 100644
index 000000000..172f9718b
--- /dev/null
+++ b/apps/as/src/pages/rvw-mnpw-mng/ui/ognz-panel.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { useOgnzUserTree } from "@/entities/user-organization";
+import {
+  collectExpandedOgnzSnIds,
+  filterOgnzUserTree,
+  OgnzUserTree,
+  type SelectedOgnzUser,
+} from "@/widgets/ognz-user-tree";
+import { Button, Input } from "@common/components";
+
+interface OgnzPanelProps {
+  selectedPerson: SelectedOgnzUser | null;
+  onSelectPerson: (person: SelectedOgnzUser) => void;
+}
+
+function OgnzPanel({ selectedPerson, onSelectPerson }: OgnzPanelProps) {
+  const [keyword, setKeyword] = useState("");
+  const [displayTree, setDisplayTree] = useState<ReturnType<typeof filterOgnzUserTree>>([]);
+  const [expandedOgnzSnIds, setExpandedOgnzSnIds] = useState<Set<number>>(new Set());
+  const [isSearchActive, setIsSearchActive] = useState(false);
+
+  const { data, isPending, isError } = useOgnzUserTree();
+
+  useEffect(() => {
+    setDisplayTree(data ?? []);
+  }, [data]);
+
+  const handleToggle = useCallback((ognzSn: number, isExpanded: boolean) => {
+    setExpandedOgnzSnIds((prev) => {
+      const next = new Set(prev);
+      if (isExpanded) next.add(ognzSn);
+      else next.delete(ognzSn);
+      return next;
+    });
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const filtered = filterOgnzUserTree(data ?? [], keyword);
+    setDisplayTree(filtered);
+    setExpandedOgnzSnIds(collectExpandedOgnzSnIds(filtered));
+    setIsSearchActive(keyword.trim().length > 0);
+  };
+
+  const handleReset = () => {
+    setKeyword("");
+    setDisplayTree(data ?? []);
+    setExpandedOgnzSnIds(new Set());
+    setIsSearchActive(false);
+  };
+
+  const handleSelect = (person: SelectedOgnzUser) => {
+    if (selectedPerson?.userUuid === person.userUuid) return;
+    onSelectPerson(person);
+  };
+
+  return (
+    <section className="card card-border mx-0 flex h-full flex-col pt-0">
+      <div className="card-header">
+        <h3 className="text-2xl font-semibold">조직도</h3>
+      </div>
+
+      <div className="flex flex-col gap-4 p-4">
+        <form onSubmit={handleSubmit} className="flex items-center gap-2">
+          <Input
+            className="!text-[1.3rem]"
+            placeholder="성명·부서 검색"
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value)}
+          />
+          <Button type="submit">조회</Button>
+          <Button type="button" color="white" onClick={handleReset}>
+            초기화
+          </Button>
+        </form>
+
+        <div className="min-h-[32rem] flex-1 overflow-auto">
+          <OgnzUserTree
+            nodes={displayTree}
+            isPending={isPending}
+            isError={isError}
+            isSearchActive={isSearchActive}
+            expandedOgnzSnIds={expandedOgnzSnIds}
+            selectedUserId={selectedPerson?.userUuid}
+            onToggle={handleToggle}
+            onSelect={handleSelect}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export { OgnzPanel };
diff --git a/apps/as/src/pages/rvw-mnpw-mng/ui/rvw-mnpw-asmt-panel.tsx b/apps/as/src/pages/rvw-mnpw-mng/ui/rvw-mnpw-asmt-panel.tsx
new file mode 100644
index 000000000..f9335e63e
--- /dev/null
+++ b/apps/as/src/pages/rvw-mnpw-mng/ui/rvw-mnpw-asmt-panel.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useMemo } from "react";
+
+import { useRvwMnpwMngPage } from "@/entities/rvw-mnpw";
+import type { SelectedOgnzUser } from "@/widgets/ognz-user-tree";
+import { Skeleton } from "@common/components";
+
+import { groupRvwMnpwByAtrzSe } from "../lib/group-rvw-mnpw-by-atrz-se";
+import { RVW_MNPW_BLOCKS, RVW_MNPW_PAGE_SIZE } from "../model/rvw-mnpw-block-config";
+
+import { RvwMnpwBlock } from "./rvw-mnpw-block";
+
+interface RvwMnpwAsmtPanelProps {
+  selectedPerson: SelectedOgnzUser | null;
+}
+
+function RvwMnpwAsmtPanel({ selectedPerson }: RvwMnpwAsmtPanelProps) {
+  const pageQuery = useRvwMnpwMngPage({
+    page: 0,
+    size: RVW_MNPW_PAGE_SIZE,
+    sort: "atrzSeComCd,asc",
+  });
+
+  const groupedItems = useMemo(
+    () => groupRvwMnpwByAtrzSe(pageQuery.data?.content ?? [], RVW_MNPW_BLOCKS),
+    [pageQuery.data?.content],
+  );
+
+  return (
+    <section className="card card-border mx-0 flex h-full flex-col pt-0">
+      <div className="card-header">
+        <h3 className="text-2xl font-semibold">인원 배치</h3>
+      </div>
+
+      <div className="flex flex-col gap-4 p-4">
+        {pageQuery.isPending ? (
+          <div className="flex flex-col gap-3">
+            <Skeleton className="h-[8rem]" />
+            <Skeleton className="h-[8rem]" />
+            <Skeleton className="h-[8rem]" />
+            <Skeleton className="h-[8rem]" />
+          </div>
+        ) : pageQuery.isError ? (
+          <p className="py-8 text-center text-lg text-muted-foreground">
+            인원 배치 목록을 불러오지 못했습니다.
+          </p>
+        ) : (
+          RVW_MNPW_BLOCKS.map((block) => (
+            <RvwMnpwBlock
+              key={block.id}
+              block={block}
+              items={groupedItems[block.atrzSeComCd] ?? []}
+              selectedPerson={selectedPerson}
+            />
+          ))
+        )}
+      </div>
+    </section>
+  );
+}
+
+export { RvwMnpwAsmtPanel };
diff --git a/apps/as/src/pages/rvw-mnpw-mng/ui/rvw-mnpw-block.tsx b/apps/as/src/pages/rvw-mnpw-mng/ui/rvw-mnpw-block.tsx
new file mode 100644
index 000000000..b3140e67a
--- /dev/null
+++ b/apps/as/src/pages/rvw-mnpw-mng/ui/rvw-mnpw-block.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { useAlertStore } from "@/shared/lib";
+import type { RvwMnpwMngResponseDto } from "@/entities/rvw-mnpw";
+import { useDeleteRvwMnpwMng, useSaveRvwMnpwMng } from "@/entities/rvw-mnpw";
+import type { SelectedOgnzUser } from "@/widgets/ognz-user-tree";
+import { Badge, Button } from "@common/components";
+
+import type { RvwMnpwBlockConfig } from "../model/rvw-mnpw-block-config";
+
+interface RvwMnpwBlockProps {
+  block: RvwMnpwBlockConfig;
+  items: RvwMnpwMngResponseDto[];
+  selectedPerson: SelectedOgnzUser | null;
+}
+
+function RvwMnpwBlock({ block, items, selectedPerson }: RvwMnpwBlockProps) {
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
+  const saveMutation = useSaveRvwMnpwMng();
+  const deleteMutation = useDeleteRvwMnpwMng();
+
+  const handleAssign = async () => {
+    if (!selectedPerson) return;
+
+    try {
+      await saveMutation.mutateAsync({
+        atrzSeComCd: block.atrzSeComCd,
+        ognzSn: selectedPerson.ognzSn,
+        userUuid: selectedPerson.userUuid,
+      });
+      alert("배치되었습니다.");
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "배치에 실패했습니다.";
+      alert(message);
+    }
+  };
+
+  const handleRemove = async (item: RvwMnpwMngResponseDto) => {
+    if (!(await confirm("해당 인원을 배치에서 제거하시겠습니까?"))) return;
+
+    try {
+      await deleteMutation.mutateAsync({
+        atrzSeComCd: item.atrzSeComCd,
+        ognzSn: item.ognzSn,
+        userUuid: item.userUuid,
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "제거에 실패했습니다.";
+      alert(message);
+    }
+  };
+
+  const isAssigning = saveMutation.isPending;
+  const isRemoving = deleteMutation.isPending;
+
+  return (
+    <section className="rounded-md border border-border bg-background p-4">
+      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <h4 className="text-xl font-semibold">{block.title}</h4>
+          <Badge color="gray">{items.length}</Badge>
+        </div>
+        <Button
+          type="button"
+          size="sm"
+          color="green"
+          disabled={!selectedPerson || isAssigning}
+          onClick={handleAssign}
+        >
+          선택 인원 배치
+        </Button>
+      </div>
+
+      {items.length === 0 ? (
+        <p className="py-4 text-center text-lg text-muted-foreground">배치된 인원이 없습니다.</p>
+      ) : (
+        <ul className="grid grid-cols-4 gap-2">
+          {items.map((item) => (
+            <li
+              key={`${item.atrzSeComCd}-${item.ognzSn}-${item.userUuid}`}
+              className="flex items-center justify-between gap-3 rounded-sm border border-border px-3 py-2"
+            >
+              <div className="flex min-w-0 flex-1 items-center gap-2">
+                <p className="text-[1.4rem] font-medium text-label">
+                  {item.userUuidNm || item.userUuid}
+                </p>
+                {item.ognzNm && item.jbpsSeNm && (
+                  <span className="text-lg text-muted-foreground">
+                    ({item.ognzNm} &middot; {item.jbpsSeNm})
+                  </span>
+                )}
+              </div>
+              <Button
+                type="button"
+                size="sm"
+                color="white"
+                disabled={isRemoving}
+                onClick={() => handleRemove(item)}
+              >
+                제거
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+export { RvwMnpwBlock };
diff --git a/apps/as/src/pages/rvw-mnpw-mng/ui/rvw-mnpw-mng-page.tsx b/apps/as/src/pages/rvw-mnpw-mng/ui/rvw-mnpw-mng-page.tsx
new file mode 100644
index 000000000..3e4234dcc
--- /dev/null
+++ b/apps/as/src/pages/rvw-mnpw-mng/ui/rvw-mnpw-mng-page.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useState } from "react";
+
+import type { SelectedOgnzUser } from "@/widgets/ognz-user-tree";
+
+import { OgnzPanel } from "./ognz-panel";
+import { RvwMnpwAsmtPanel } from "./rvw-mnpw-asmt-panel";
+
+function RvwMnpwMngPage() {
+  const [selectedPerson, setSelectedPerson] = useState<SelectedOgnzUser | null>(null);
+
+  return (
+    <div className="space-y-6 px-[1.8rem] pb-6">
+      {/* TBD: 역할별 CRUD 권한 — 메뉴·API 권한 연동 후 버튼 비활성 처리 */}
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(280px,1fr)_minmax(0,2.5fr)]">
+        <OgnzPanel selectedPerson={selectedPerson} onSelectPerson={setSelectedPerson} />
+        <RvwMnpwAsmtPanel selectedPerson={selectedPerson} />
+      </div>
+    </div>
+  );
+}
+
+export { RvwMnpwMngPage };
diff --git a/apps/as/src/shared/README.md b/apps/as/src/shared/README.md
new file mode 100644
index 000000000..2b247021d
--- /dev/null
+++ b/apps/as/src/shared/README.md
@@ -0,0 +1,149 @@
+# Shared Layer
+
+**Shared**는 애플리케이션의 기반을 형성하는 레이어입니다. 외부 세계(백엔드, 서드파티 라이브러리, 환경)와의 연결을 생성하고, 높은 응집력을 가진 자체 라이브러리를 정의하는 곳입니다.
+
+## 목적
+
+- 외부 시스템 및 라이브러리와의 통합
+- 프로젝트 전체에서 사용되는 공통 코드 제공
+- 비즈니스 로직이 없는 재사용 가능한 유틸리티 및 UI 제공
+- 글로벌 설정 및 환경 변수 관리
+
+## 특징
+
+- **슬라이스 없음**: Shared 레이어는 비즈니스 도메인이 없으므로 슬라이스로 나뉘지 않습니다
+- **세그먼트 구성**: 기술적 목적에 따라 세그먼트로 직접 구성됩니다
+- **자유로운 import**: Shared 내의 모든 파일은 서로를 참조하고 import할 수 있습니다
+
+## 구조
+
+```
+shared/
+├── ui/                # 애플리케이션 UI Kit
+│   ├── button/
+│   ├── input/
+│   ├── modal/
+│   └── index.ts
+├── api/               # API 클라이언트 및 백엔드 엔드포인트 함수
+│   ├── client.ts
+│   └── index.ts
+├── lib/               # 내부 라이브러리 모음
+│   ├── dates/         # 날짜 관련 유틸리티
+│   ├── colors/        # 색상 관련 유틸리티
+│   ├── text/          # 텍스트 처리 유틸리티
+│   └── index.ts
+├── config/            # 환경 변수, 글로벌 feature flags
+│   ├── env.ts
+│   └── index.ts
+├── types/             # 공통 타입 정의
+│   └── index.ts
+├── i18n/              # 번역 설정, 글로벌 번역 문자열
+│   └── index.ts
+└── routes/            # 라우트 상수 또는 패턴
+    └── index.ts
+```
+
+## 세그먼트 설명
+
+### 📁 ui
+애플리케이션의 UI Kit로, 비즈니스 로직을 포함하지 않는 재사용 가능한 UI 컴포넌트들입니다.
+
+- Button, Input, Modal 같은 기본 컴포넌트
+- 비즈니스 로직은 없지만 UI 로직은 포함 가능 (예: Autocomplete, SearchBar)
+- 비즈니스 테마 컴포넌트도 허용 (예: 회사 로고, 페이지 레이아웃)
+
+### 📁 api
+API 클라이언트 및 특정 백엔드 엔드포인트 요청 함수입니다.
+
+- HTTP 클라이언트 설정 (Axios, Fetch 등)
+- 인증 인터셉터
+- 공통 에러 핸들링
+
+### 📁 lib
+내부 라이브러리 모음으로, 각 라이브러리는 **하나의 관심사**에 집중해야 합니다.
+
+> ⚠️ **중요**: `helpers`나 `utils` 폴더처럼 덤프 폴더로 만들지 마세요. 각 라이브러리는 명확한 초점 영역(예: dates, colors, text)을 가져야 하며, README로 문서화해야 합니다.
+
+### 📁 config
+환경 변수, 글로벌 feature flags 및 앱 전체 설정입니다.
+
+### 📁 types
+프로젝트 전체에서 사용되는 공통 타입 정의입니다.
+
+### 📁 i18n
+번역 설정 코드 및 글로벌 번역 문자열입니다.
+
+### 📁 routes
+라우트 상수 또는 라우트 매칭 패턴입니다.
+
+## 예시
+
+```typescript
+// shared/ui/button/button.tsx
+interface ButtonProps {
+  children: React.ReactNode;
+  variant?: 'primary' | 'secondary';
+  onClick?: () => void;
+}
+
+export function Button({ children, variant = 'primary', onClick }: ButtonProps) {
+  return (
+    <button
+      className={variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500'}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+// shared/api/client.ts
+import axios from 'axios';
+
+export const apiClient = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
+  timeout: 10000,
+});
+
+// shared/lib/dates/format-date.ts
+import dayjs from 'dayjs';
+
+export function formatDate(date: Date, format: string = 'YYYY-MM-DD'): string {
+  return dayjs(date).format(format);
+}
+
+// shared/config/env.ts
+export const ENV = {
+  apiUrl: process.env.NEXT_PUBLIC_API_URL!,
+  isDev: process.env.NODE_ENV === 'development',
+} as const;
+```
+
+## 레이어 의존성 규칙
+
+✅ **허용되는 의존성**:
+- 같은 `shared` 레이어 내의 다른 세그먼트 (자유로운 cross-import)
+- 외부 라이브러리 및 패키지
+
+❌ **금지된 의존성**:
+- `entities` 레이어
+- `features` 레이어
+- `widgets` 레이어
+- `pages` 레이어
+- `app` 레이어
+
+> 💡 **원칙**: Shared는 가장 낮은 레이어이므로 상위 레이어에 의존하지 않습니다.
+
+## 세그먼트 명명 규칙
+
+세그먼트 이름은 **내용의 목적**을 설명해야 하며, **본질**을 설명하면 안 됩니다.
+
+❌ **나쁜 예시**: `components`, `hooks`, `types` (본질을 설명)
+✅ **좋은 예시**: `ui`, `api`, `lib/dates`, `config` (목적을 설명)
+
+## 주의사항
+
+1. **비즈니스 로직 없음**: Shared는 순수한 기술적 코드만 포함
+2. **높은 재사용성**: 앱 전체에서 사용될 수 있어야 함
+3. **명확한 라이브러리 구조**: `lib` 내부는 관심사별로 명확하게 분리
+4. **문서화**: 각 라이브러리는 README로 사용법과 목적을 문서화
diff --git a/apps/dm_new/src/shared/api/client.ts b/apps/as/src/shared/api/client.ts
similarity index 64%
rename from apps/dm_new/src/shared/api/client.ts
rename to apps/as/src/shared/api/client.ts
index cf37e6671..22008492b 100644
--- a/apps/dm_new/src/shared/api/client.ts
+++ b/apps/as/src/shared/api/client.ts
@@ -1,11 +1,13 @@
-import { Client } from "@common/network";
-import { BASE_URL } from "../config/api";
-import { SITE_ID } from "../config/env";
-import { setCookie } from "../lib";
-
-setCookie("site-id-key", SITE_ID);
-
-export const client = Client.getInstance({
-  baseURL: BASE_URL,
-  siteId: SITE_ID,
-});
+import { PROXY_HOST, SITE_ID } from "@/shared/config";
+import { Client } from "@common/network";
+
+import { setCookie } from "../lib";
+
+setCookie("site-id-key", SITE_ID);
+
+const BASE_URL = `${PROXY_HOST}/server`;
+
+export const client = Client.getInstance({
+  baseURL: BASE_URL,
+  siteId: SITE_ID,
+});
diff --git a/apps/dm_new/src/shared/api/index.ts b/apps/as/src/shared/api/index.ts
similarity index 97%
rename from apps/dm_new/src/shared/api/index.ts
rename to apps/as/src/shared/api/index.ts
index b7b9d6121..0b96ffaa1 100644
--- a/apps/dm_new/src/shared/api/index.ts
+++ b/apps/as/src/shared/api/index.ts
@@ -1 +1 @@
-export { client } from "./client";
+export { client } from "./client";
diff --git a/apps/as/src/shared/config/api.ts b/apps/as/src/shared/config/api.ts
new file mode 100644
index 000000000..cda8ce5fb
--- /dev/null
+++ b/apps/as/src/shared/config/api.ts
@@ -0,0 +1,38 @@
+export const ENDPOINT = {
+  ATTACH_SERVICE: {
+    TUS_UPLOAD: "/attach-service/api/v1/tus/upload",
+    ATTACHMENTS: "/attach-service/api/v1/atfl/attachments",
+  },
+  AS_COMMON_SERVICE: {
+    ACNTG_SE: "/as-service/api/v1/acntg-se",
+    CNSTP_SE: "/as-service/api/v1/cnstp-se",
+    ESNTL_ATCH_FILE: "/as-service/api/v1/esntl-atch-file",
+    RVW_MNPW: "/as-service/api/v1/rvw-mnpw",
+  },
+  AS_INSTL_SERVICE: {
+    INSTL_SNCN: "/as-service/api/v1/instl-sncn",
+  },
+  USER_SERVICE: {
+    LOGIN: "/user-service/login",
+    SILENT_REFRESH: "/user-service/api/v1/users/token/refresh",
+    USERS: "/user-service/api/v1/users",
+  },
+  AS_ELAPR_SERVICE: {
+    ELAPR_TMPLT: "/as-elapr-service/api/v1/elapr-tmplt",
+    ELAPR_APLN: "/as-elapr-service/api/v1/elapr-apln",
+    ELAPR_DMND: "/as-elapr-service/api/v1/elapr-dmnd",
+  },
+  AS_CHECKLIST_SERVICE: {
+    CKLST: "/as-service/api/v1/cklst",
+    CKLST_ARTCL: "/as-service/api/v1/cklst-artcl",
+    CKLST_RVW: "/as-service/api/v1/cklst-rvw",
+  },
+  CMS_SERVICE: {
+    CODE: "/cms-service/api/v1/code/cache",
+    MENU_ROLES: "/cms-service/api/v1/menu-roles",
+    MENU_AUTHRTS: "/cms-service/api/v1/menu-authrts",
+    USER_ORGANIZATION: "/cms-service/api/v1/user-ognz",
+  },
+};
+
+export const JWT_EXPIRATION_TIME = 1800000;
diff --git a/apps/as/src/shared/config/auth.ts b/apps/as/src/shared/config/auth.ts
new file mode 100644
index 000000000..441f481b4
--- /dev/null
+++ b/apps/as/src/shared/config/auth.ts
@@ -0,0 +1,11 @@
+import type { AuthConfig } from "@common/auth";
+
+import { ACCESS_TOKEN, AUTH_USER_ID, CLAIM_NAME, COOKIE_DOMAIN, REFRESH_TOKEN } from "./env";
+
+export const authConfig: AuthConfig = {
+  authUserId: AUTH_USER_ID || "token-id",
+  claimName: CLAIM_NAME || "Authorization",
+  cookieDomain: COOKIE_DOMAIN,
+  accessToken: ACCESS_TOKEN || "access-token",
+  refreshToken: REFRESH_TOKEN || "refresh-token",
+};
diff --git a/apps/as/src/shared/config/env.ts b/apps/as/src/shared/config/env.ts
new file mode 100644
index 000000000..dffee3972
--- /dev/null
+++ b/apps/as/src/shared/config/env.ts
@@ -0,0 +1,11 @@
+export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
+export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
+export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "AS";
+export const SERVER_API_URL = process.env.SERVER_API_URL;
+export const AUTH_LOGIN_REDIRECT_URL =
+  process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
+export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
+export const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "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 COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
diff --git a/apps/as/src/shared/config/index.ts b/apps/as/src/shared/config/index.ts
new file mode 100644
index 000000000..856d35f87
--- /dev/null
+++ b/apps/as/src/shared/config/index.ts
@@ -0,0 +1,2 @@
+export * from "./api";
+export * from "./env";
diff --git a/apps/as/src/shared/lib/attach.ts b/apps/as/src/shared/lib/attach.ts
new file mode 100644
index 000000000..ff449078f
--- /dev/null
+++ b/apps/as/src/shared/lib/attach.ts
@@ -0,0 +1,17 @@
+import { getCookie } from "@/shared/lib";
+import { CLAIM_NAME, AUTH_USER_ID } from "@/shared/config/env";
+import axios from "axios";
+import { PROXY_HOST, ENDPOINT } from "@/shared/config";
+
+/**
+ * Common helper to delete attachment using cookies for auth headers.
+ */
+export async function deleteAttachment(atflId: string): Promise<void> {
+  if (!atflId) return;
+  const headers: Record<string, string> = {
+    [CLAIM_NAME]: getCookie(CLAIM_NAME) ?? "",
+    [AUTH_USER_ID]: getCookie(AUTH_USER_ID) ?? "",
+  };
+  const url = `${PROXY_HOST}${ENDPOINT.ATTACH_SERVICE.ATTACHMENTS}/${atflId}`;
+  await axios.delete(url, { headers });
+}
diff --git a/apps/dm_new/src/shared/lib/cookie.ts b/apps/as/src/shared/lib/cookie.ts
similarity index 99%
rename from apps/dm_new/src/shared/lib/cookie.ts
rename to apps/as/src/shared/lib/cookie.ts
index 48254bb18..8f5d0011b 100644
--- a/apps/dm_new/src/shared/lib/cookie.ts
+++ b/apps/as/src/shared/lib/cookie.ts
@@ -1,6 +1,5 @@
 import Cookies from "js-cookie";
 
-
 export function getCookie(name: string): string | undefined {
   if (typeof window === "undefined") {
     return undefined;
diff --git a/apps/as/src/shared/lib/dayjs.ts b/apps/as/src/shared/lib/dayjs.ts
new file mode 100644
index 000000000..62c6cef6e
--- /dev/null
+++ b/apps/as/src/shared/lib/dayjs.ts
@@ -0,0 +1,13 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+
+import "dayjs/locale/ko";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(relativeTime);
+dayjs.locale("ko");
+
+export { dayjs };
diff --git a/apps/as/src/shared/lib/file-utils.ts b/apps/as/src/shared/lib/file-utils.ts
new file mode 100644
index 000000000..b92a46fae
--- /dev/null
+++ b/apps/as/src/shared/lib/file-utils.ts
@@ -0,0 +1,12 @@
+/* Shared file utilities for apps/as */
+
+/** 파일 크기는 byte 단위로 제공된다고 가정하고 크기에 따라서 KB, MB 단위로 표시 */
+export const formatFileSize = (bytes?: number | null): string => {
+  if (bytes === null || bytes === undefined) return "-";
+  const b = Number(bytes) || 0;
+  if (b >= 1024 * 1024) return `${(b / 1024 / 1024).toFixed(1)}MB`;
+  if (b >= 1024) return `${Math.round(b / 1024)}KB`;
+  return `${b}B`;
+};
+
+export default { formatFileSize };
diff --git a/apps/as/src/shared/lib/index.ts b/apps/as/src/shared/lib/index.ts
new file mode 100644
index 000000000..1c38f3c97
--- /dev/null
+++ b/apps/as/src/shared/lib/index.ts
@@ -0,0 +1,8 @@
+export { getCookie, removeCookie, setCookie } from "./cookie";
+export { dayjs } from "./dayjs";
+export { matchQueryStatus } from "./match-query-status";
+export { queryClient } from "./query-client";
+export { useAlertStore } from "./use-alert-store";
+export { useDataTable } from "./use-data-table";
+export { useMenuStore } from "./use-menu-store";
+export { useUserStore } from "./use-user-store";
diff --git a/apps/as/src/shared/lib/match-query-status.tsx b/apps/as/src/shared/lib/match-query-status.tsx
new file mode 100644
index 000000000..6afee04ea
--- /dev/null
+++ b/apps/as/src/shared/lib/match-query-status.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+
+import type { UseQueryResult } from "@tanstack/react-query";
+
+interface MatchQueryStatusOptions {
+  Pending: ReactNode;
+  Empty: ReactNode;
+  Success: () => ReactNode;
+  Error?: ReactNode;
+}
+
+export function matchQueryStatus<T>(
+  query: UseQueryResult<T>,
+  options: MatchQueryStatusOptions,
+): ReactNode {
+  if (query.isPending) return options.Pending;
+  if (query.isError) return options.Error ?? null;
+
+  const isEmpty =
+    query.data == null ||
+    (Array.isArray(query.data) && query.data.length === 0) ||
+    (typeof query.data === "object" &&
+      query.data !== null &&
+      "content" in query.data &&
+      Array.isArray((query.data as { content: unknown[] }).content) &&
+      (query.data as { content: unknown[] }).content.length === 0);
+
+  if (isEmpty) return options.Empty;
+
+  return options.Success();
+}
diff --git a/apps/as/src/shared/lib/query-client.ts b/apps/as/src/shared/lib/query-client.ts
new file mode 100644
index 000000000..0da2fb899
--- /dev/null
+++ b/apps/as/src/shared/lib/query-client.ts
@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 60 * 1000,
+    },
+  },
+});
diff --git a/apps/as/src/shared/lib/use-alert-store.ts b/apps/as/src/shared/lib/use-alert-store.ts
new file mode 100644
index 000000000..d248b8ad2
--- /dev/null
+++ b/apps/as/src/shared/lib/use-alert-store.ts
@@ -0,0 +1,16 @@
+import { useContext } from "react";
+
+import { useStore } from "zustand";
+
+import { StoreContext } from "../providers/store-provider";
+import type { AlertStore } from "../store/alert-store";
+
+export const useAlertStore = <T>(selector: (store: AlertStore) => T): T => {
+  const storeContext = useContext(StoreContext);
+
+  if (!storeContext) {
+    throw new Error("useAlertStore must be used within StoreProvider");
+  }
+
+  return useStore(storeContext.alertStore, selector);
+};
diff --git a/apps/as/src/shared/lib/use-data-table.tsx b/apps/as/src/shared/lib/use-data-table.tsx
new file mode 100644
index 000000000..54caf68c7
--- /dev/null
+++ b/apps/as/src/shared/lib/use-data-table.tsx
@@ -0,0 +1,45 @@
+import type { HTMLAttributes } from "react";
+
+import type { UseQueryResult } from "@tanstack/react-query";
+import { type TableOptions, useReactTable } from "@tanstack/react-table";
+
+import type { PageResponse } from "@/shared/model";
+import { NoData } from "@/shared/ui/no-data";
+import { DataTable, Skeleton } from "@common/components";
+
+import { matchQueryStatus } from "./match-query-status";
+
+interface DataTableOptions<T> {
+  variant?: "default" | "secondary" | "line";
+  className?: HTMLAttributes<HTMLTableElement>["className"];
+  viewPagination?: boolean;
+  onRowClick?: (row: T) => void;
+}
+
+interface UseDataTableOptions<T> {
+  query: UseQueryResult<PageResponse<T>>;
+  tableOptions: Omit<TableOptions<T>, "data" | "rowCount">;
+  dataTableOptions?: DataTableOptions<T>;
+}
+
+export function useDataTable<T>({ query, tableOptions, dataTableOptions }: UseDataTableOptions<T>) {
+  const table = useReactTable({
+    ...tableOptions,
+    data: query.data?.content ?? [],
+    rowCount: query.data?.totalElements ?? 0,
+  });
+
+  return {
+    tableComponent: matchQueryStatus(query, {
+      Pending: (
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-[4rem]" />
+          <Skeleton className="h-[16rem]" />
+        </div>
+      ),
+      Empty: <NoData />,
+      Success: () => <DataTable table={table} {...dataTableOptions} />,
+    }),
+    tableInstance: table,
+  };
+}
diff --git a/apps/as/src/shared/lib/use-menu-store.ts b/apps/as/src/shared/lib/use-menu-store.ts
new file mode 100644
index 000000000..2962f72da
--- /dev/null
+++ b/apps/as/src/shared/lib/use-menu-store.ts
@@ -0,0 +1,16 @@
+import { useContext } from "react";
+
+import { useStore } from "zustand";
+
+import { StoreContext } from "../providers/store-provider";
+import type { MenuStore } from "../store/menu-store";
+
+export const useMenuStore = <T>(selector: (store: MenuStore) => T): T => {
+  const storeContext = useContext(StoreContext);
+
+  if (!storeContext) {
+    throw new Error("useMenuStore must be used within StoreProvider");
+  }
+
+  return useStore(storeContext.menuStore, selector);
+};
diff --git a/apps/as/src/shared/lib/use-user-store.ts b/apps/as/src/shared/lib/use-user-store.ts
new file mode 100644
index 000000000..8aa5085a9
--- /dev/null
+++ b/apps/as/src/shared/lib/use-user-store.ts
@@ -0,0 +1,16 @@
+import { useContext } from "react";
+
+import { useStore } from "zustand";
+
+import { StoreContext } from "../providers";
+import type { UserStore } from "../store";
+
+export const useUserStore = <T>(selector: (store: UserStore) => T): T => {
+  const storeContext = useContext(StoreContext);
+
+  if (!storeContext) {
+    throw new Error("useUserStore must be used within StoreProvider");
+  }
+
+  return useStore(storeContext.userStore, selector);
+};
diff --git a/apps/as/src/shared/model/index.ts b/apps/as/src/shared/model/index.ts
new file mode 100644
index 000000000..01d2a5af1
--- /dev/null
+++ b/apps/as/src/shared/model/index.ts
@@ -0,0 +1,31 @@
+export interface BaseEntity {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface PaginationParams {
+  page: number;
+  limit: number;
+}
+
+export interface PaginationResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+  message?: string;
+}
+
+export interface ApiError {
+  message: string;
+  code?: string;
+  status?: number;
+}
+
+export type { PageableParams, PageResponse } from "./page";
diff --git a/apps/as/src/shared/model/page.ts b/apps/as/src/shared/model/page.ts
new file mode 100644
index 000000000..82a68bc0c
--- /dev/null
+++ b/apps/as/src/shared/model/page.ts
@@ -0,0 +1,32 @@
+interface SortConfig {
+  empty: boolean;
+  sorted: boolean;
+  unsorted: boolean;
+}
+
+export interface PageableParams {
+  page?: number;
+  size?: number;
+  sort?: string;
+}
+
+export interface PageResponse<T> {
+  content: T[];
+  pageable: {
+    sort: SortConfig;
+    offset: number;
+    pageNumber: number;
+    pageSize: number;
+    paged: boolean;
+    unpaged: boolean;
+  };
+  sort: SortConfig;
+  totalPages: number;
+  totalElements: number;
+  number: number;
+  numberOfElements: number;
+  size: number;
+  first: boolean;
+  last: boolean;
+  empty: boolean;
+}
diff --git a/apps/as/src/shared/providers/index.ts b/apps/as/src/shared/providers/index.ts
new file mode 100644
index 000000000..e19453b80
--- /dev/null
+++ b/apps/as/src/shared/providers/index.ts
@@ -0,0 +1 @@
+export { StoreContext, StoreProvider } from "./store-provider";
diff --git a/apps/as/src/shared/providers/store-provider.tsx b/apps/as/src/shared/providers/store-provider.tsx
new file mode 100644
index 000000000..dcb2972de
--- /dev/null
+++ b/apps/as/src/shared/providers/store-provider.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { createContext, useRef } from "react";
+
+import { createAlertStore, createMenuStore, createUserStore } from "../store";
+
+type StoreContextType = {
+  alertStore: ReturnType<typeof createAlertStore>;
+  menuStore: ReturnType<typeof createMenuStore>;
+  userStore: ReturnType<typeof createUserStore>;
+};
+
+export const StoreContext = createContext<StoreContextType | undefined>(undefined);
+
+export const StoreProvider = ({ children }: { children: React.ReactNode }) => {
+  const storeRef = useRef<StoreContextType | null>(null);
+  if (storeRef.current === null) {
+    storeRef.current = {
+      alertStore: createAlertStore(),
+      menuStore: createMenuStore(),
+      userStore: createUserStore(),
+    };
+  }
+
+  return <StoreContext.Provider value={storeRef.current}>{children}</StoreContext.Provider>;
+};
diff --git a/apps/as/src/shared/store/alert-store.ts b/apps/as/src/shared/store/alert-store.ts
new file mode 100644
index 000000000..0627a20d2
--- /dev/null
+++ b/apps/as/src/shared/store/alert-store.ts
@@ -0,0 +1,25 @@
+import { createStore } from "zustand/vanilla";
+
+export type AlertState = {
+  message: string;
+  callback?: () => void;
+};
+
+export type AlertActions = {
+  setMessage: (message: string, callback?: () => void) => void;
+};
+
+export type AlertStore = AlertState & AlertActions;
+
+export const defaultInitState: AlertState = {
+  message: "",
+  callback: undefined,
+};
+
+export const createAlertStore = (initState: AlertState = defaultInitState) => {
+  return createStore<AlertStore>()((set) => ({
+    ...initState,
+    setMessage: (message: string, callback?: () => void) =>
+      set(() => ({ message, callback })),
+  }));
+};
diff --git a/apps/as/src/shared/store/index.ts b/apps/as/src/shared/store/index.ts
new file mode 100644
index 000000000..bbaae9758
--- /dev/null
+++ b/apps/as/src/shared/store/index.ts
@@ -0,0 +1,3 @@
+export { type AlertStore,createAlertStore } from "./alert-store";
+export { createMenuStore, type MenuStore } from "./menu-store";
+export { createUserStore, type IUserInfo, type UserStore } from "./user-store";
diff --git a/apps/as/src/shared/store/menu-store.ts b/apps/as/src/shared/store/menu-store.ts
new file mode 100644
index 000000000..3b111df4b
--- /dev/null
+++ b/apps/as/src/shared/store/menu-store.ts
@@ -0,0 +1,37 @@
+import { createStore } from "zustand/vanilla";
+
+import type { MenuItem } from "@/entities/menu";
+
+interface PageMenuAuthority {
+  mngAuthrtYn: string;
+  inqAuthrtYn: string;
+  regAuthrtYn: string;
+  mdfcnAuthrtYn: string;
+  delAuthrtYn: string;
+}
+
+export type MenuState = {
+  currentMenuInfo: MenuItem | null;
+  pageMenuAuthority: PageMenuAuthority | null;
+};
+
+export type MenuActions = {
+  setCurrentMenuInfo: (menu: MenuItem) => void;
+  setPageMenuAuthority: (authority: PageMenuAuthority) => void;
+};
+
+export type MenuStore = MenuState & MenuActions;
+
+export const defaultInitState: MenuState = {
+  currentMenuInfo: null,
+  pageMenuAuthority: null,
+};
+
+export const createMenuStore = (initState: MenuState = defaultInitState) => {
+  return createStore<MenuStore>()((set) => ({
+    ...initState,
+    setCurrentMenuInfo: (menu: MenuItem) => set({ currentMenuInfo: menu }),
+    setPageMenuAuthority: (authority: PageMenuAuthority) =>
+      set({ pageMenuAuthority: authority }),
+  }));
+};
diff --git a/apps/as/src/shared/store/user-store.ts b/apps/as/src/shared/store/user-store.ts
new file mode 100644
index 000000000..1aeb02981
--- /dev/null
+++ b/apps/as/src/shared/store/user-store.ts
@@ -0,0 +1,67 @@
+import { createStore } from "zustand/vanilla";
+
+export interface IUserInfo {
+  regDt: string;
+  mdfcnDt: string;
+  rgtr: string;
+  mdfr: string;
+  adminRoleYn: string;
+  userUnqId: string;
+  userId: string;
+  userName: string;
+  email: string;
+  encryptedPassword: string;
+  refreshToken: string;
+  userStateCode: string;
+  lastLoginDate: string;
+  loginFailCount: number;
+  pswdHnt: string;
+  pswdAns: string;
+  mphn: string;
+  telno: string;
+  zip: string;
+  addr: string;
+  daddr: string;
+  laeSeCd: string;
+  ogdpSeCd: string;
+  aprvYn: string;
+  autzrId: string;
+  expryYmd: string;
+  lastPswdChgDt: string;
+  googleId: string;
+  kakaoId: string;
+  naverId: string;
+  isSocialUser: boolean;
+  hasPassword: boolean;
+  aprvYmd: string;
+  enoCd: string;
+  instSeCd: string;
+  dtlInstCd: string;
+  laeSeNm: string;
+  ogdpSeNm: string;
+  instSeNm: string;
+  userStateNm: string;
+  enoNm: string;
+  dtlInstNm: string;
+}
+
+export type UserState = {
+  userInfo: IUserInfo | null;
+};
+
+export type UserActions = {
+  setUserInfo: (userInfo: IUserInfo | null) => void;
+};
+
+export type UserStore = UserState & UserActions;
+
+export const defaultInitState: UserState = {
+  userInfo: null,
+};
+
+export const createUserStore = (initState: UserState = defaultInitState) => {
+  return createStore<UserStore>()((set) => ({
+    ...initState,
+    setUserInfo: (userInfo: IUserInfo | null) => set(() => ({ userInfo })),
+  }));
+};
diff --git a/apps/as/src/shared/ui/alert-dialog.tsx b/apps/as/src/shared/ui/alert-dialog.tsx
new file mode 100644
index 000000000..f331b65ff
--- /dev/null
+++ b/apps/as/src/shared/ui/alert-dialog.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+} from "@common/components";
+
+import { useAlertStore } from "../lib/use-alert-store";
+
+function AlertDialog() {
+  const { message, callback, setMessage } = useAlertStore((state) => state);
+  const handleOpenChange = () => {
+    setMessage("");
+    callback?.();
+  };
+  return (
+    <Dialog open={!!message} onOpenChange={handleOpenChange}>
+      <DialogContent aria-describedby={undefined}>
+        <div className="py-10">
+          <p className="text-foreground whitespace-pre-line text-center text-[1.4rem]">
+            {message}
+          </p>
+        </div>
+        <DialogFooter className="!justify-center">
+          <DialogClose asChild>
+            <Button>확인</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { AlertDialog };
diff --git a/apps/as/src/shared/ui/confirm-dialog.tsx b/apps/as/src/shared/ui/confirm-dialog.tsx
new file mode 100644
index 000000000..1b41e3c19
--- /dev/null
+++ b/apps/as/src/shared/ui/confirm-dialog.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import {
+  Button,
+  type ButtonProps,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+} from "@common/components";
+
+type ConfirmDialogProps = {
+  isOpen?: boolean;
+  confirmButtonProps?: ButtonProps & { label?: string };
+  cancelButtonProps?: ButtonProps & { label?: string };
+};
+
+function ConfirmDialog({ isOpen, confirmButtonProps, cancelButtonProps }: ConfirmDialogProps) {
+  const { message, isOpen: isGlobalOpen, onConfirm, onCancel } = useConfirm();
+  return (
+    <Dialog open={isOpen ?? isGlobalOpen} onOpenChange={onCancel}>
+      <DialogContent aria-describedby={undefined}>
+        <div className="py-10">
+          <p className="whitespace-pre-line text-center text-[1.4rem] text-foreground">{message}</p>
+        </div>
+        <DialogFooter className="!justify-center">
+          <DialogClose asChild>
+            <Button onClick={onConfirm} {...confirmButtonProps}>
+              {confirmButtonProps?.label ?? "확인"}
+            </Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button onClick={onCancel} color="white" {...cancelButtonProps}>
+              {cancelButtonProps?.label ?? "취소"}
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ConfirmDialog };
diff --git a/apps/as/src/shared/ui/index.ts b/apps/as/src/shared/ui/index.ts
new file mode 100644
index 000000000..7dbfe574f
--- /dev/null
+++ b/apps/as/src/shared/ui/index.ts
@@ -0,0 +1,2 @@
+export { PageLayout } from "./page-layout";
+export { NoData } from "./no-data";
diff --git a/apps/as/src/shared/ui/no-data.tsx b/apps/as/src/shared/ui/no-data.tsx
new file mode 100644
index 000000000..bd0accbb7
--- /dev/null
+++ b/apps/as/src/shared/ui/no-data.tsx
@@ -0,0 +1,9 @@
+function NoData({ message = "조회된 데이터가 없습니다." }: { message?: string }) {
+  return (
+    <div className="flex min-h-[120px] items-center justify-center text-muted-foreground">
+      <p className="text-lg">{message}</p>
+    </div>
+  );
+}
+
+export { NoData };
diff --git a/apps/as/src/shared/ui/page-layout.tsx b/apps/as/src/shared/ui/page-layout.tsx
new file mode 100644
index 000000000..6ee9013c4
--- /dev/null
+++ b/apps/as/src/shared/ui/page-layout.tsx
@@ -0,0 +1,23 @@
+import { PageTitle } from "@common/components";
+
+import { useMenuStore } from "../lib/use-menu-store";
+
+function PageLayout({ children }: { children: React.ReactNode }) {
+  const currentMenuInfo = useMenuStore((state) => state.currentMenuInfo);
+
+  const menuPaths = currentMenuInfo?.menuPath
+    ?.split(">")
+    .map((path) => path.trim());
+
+  return (
+    <div className="bg-container h-auto min-h-full pb-2">
+      <PageTitle
+        title={currentMenuInfo?.menuKornNm ?? ""}
+        menuPaths={menuPaths ?? []}
+      />
+      {children}
+    </div>
+  );
+}
+
+export { PageLayout };
diff --git a/apps/as/src/widgets/README.md b/apps/as/src/widgets/README.md
new file mode 100644
index 000000000..cd160abd9
--- /dev/null
+++ b/apps/as/src/widgets/README.md
@@ -0,0 +1,135 @@
+# Widgets Layer
+
+**Widgets**는 큰 규모의 독립적인 UI 블록을 위한 레이어입니다. 여러 features와 entities를 조합하여 완전한 기능을 제공하는 복합 컴포넌트를 담습니다.
+
+## 목적
+
+- 큰 규모의 독립적인 UI 블록 구성
+- 여러 features와 entities를 하나의 응집력 있는 UI로 결합
+- 여러 페이지에서 재사용되는 복잡한 UI 제공
+- 페이지 레벨 레이아웃 및 섹션 관리
+
+## Widget으로 만들어야 하는 경우
+
+Widget은 다음 조건에 해당할 때 사용하세요:
+
+✅ **Widget으로 만들기 좋은 경우**:
+- 여러 페이지에서 재사용되는 큰 UI 블록
+- 페이지에 여러 개의 큰 독립적 블록이 있고, 이것이 그 중 하나인 경우
+- 페이지 레벨 레이아웃 컴포넌트 (nested routing 시스템 사용 시)
+
+❌ **Widget으로 만들지 말아야 하는 경우**:
+- UI 블록이 페이지의 대부분을 차지하고 재사용되지 않는 경우 → 페이지 슬라이스 내부에 직접 배치
+- 작은 재사용 컴포넌트 → `shared/ui`에 배치
+
+## 구조
+
+각 widget 슬라이스는 다음 세그먼트로 구성됩니다:
+
+```
+widgets/
+└── [widget-name]/
+    ├── ui/            # 위젯의 메인 UI 컴포넌트
+    ├── model/         # 위젯 내부 상태 관리 (선택적)
+    ├── api/           # 위젯 전용 API 호출 (선택적)
+    ├── lib/           # 위젯 내부 유틸리티 (선택적)
+    └── index.ts       # Public API
+```
+
+### 세그먼트 설명
+
+- **ui**: 여러 features와 entities를 조합한 위젯 UI
+- **model**: 위젯 내부 상태 및 로직 (선택적)
+- **api**: 위젯이 필요로 하는 데이터 fetching (선택적)
+- **lib**: 위젯 내부에서만 사용되는 헬퍼 함수 (선택적)
+- **index.ts**: 슬라이스의 Public API (외부에서 사용할 수 있는 것만 export)
+
+## 예시
+
+```typescript
+// widgets/header/ui/header.tsx
+import { Logo } from 'shared/ui/logo';
+import { Navigation } from 'shared/ui/navigation';
+import { UserMenu } from 'features/user-menu';
+import { NotificationBell } from 'features/notifications';
+
+export function Header() {
+  return (
+    <header>
+      <Logo />
+      <Navigation />
+      <NotificationBell />
+      <UserMenu />
+    </header>
+  );
+}
+
+// widgets/product-list/ui/product-list.tsx
+import { useProducts } from '../api/use-products';
+import { ProductCard } from 'entities/product';
+import { AddToCartButton } from 'features/cart-add-item';
+
+export function ProductList() {
+  const { data: products, isLoading } = useProducts();
+
+  if (isLoading) return <div>로딩 중...</div>;
+
+  return (
+    <div>
+      {products.map((product) => (
+        <div key={product.id}>
+          <ProductCard product={product} />
+          <AddToCartButton productId={product.id} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// widgets/product-list/api/use-products.ts
+import { useQuery } from '@tanstack/react-query';
+import { getProducts } from 'entities/product';
+
+export function useProducts() {
+  return useQuery({
+    queryKey: ['products'],
+    queryFn: getProducts,
+  });
+}
+
+// widgets/product-list/index.ts
+export { ProductList } from './ui/product-list';
+```
+
+## 레이어 의존성 규칙
+
+✅ **허용되는 의존성**:
+- `shared` 레이어의 모듈
+- `entities` 레이어의 모듈
+- `features` 레이어의 모듈
+- 같은 widget 슬라이스 내의 다른 세그먼트
+
+❌ **금지된 의존성**:
+- 다른 `widgets` 슬라이스 (widget 간 직접 의존 금지)
+- `pages` 레이어
+- `app` 레이어
+
+## 명명 규칙
+
+- 소문자와 대시 사용: `header`, `sidebar`, `product-list`
+- 명사 형태 권장: UI 블록의 성격을 나타내는 이름 사용
+- 구체적으로: 위젯의 역할이 명확하게 드러나도록
+
+## Nested Routing 사용 시
+
+Remix 같은 nested routing 시스템을 사용한다면:
+- Widgets 레이어를 flat routing의 Pages 레이어처럼 사용 가능
+- 완전한 라우터 블록 생성 (데이터 fetching, loading states, error boundaries 포함)
+- 페이지 레이아웃을 이 레이어에 저장 가능
+
+## 주의사항
+
+1. **독립성 유지**: 각 위젯은 독립적으로 작동 가능해야 합니다
+2. **적절한 크기**: 너무 작은 컴포넌트는 `shared/ui`에, 재사용되지 않으면 `pages`에 배치
+3. **응집력**: 관련된 features와 entities를 의미 있게 조합
+4. **재사용 최적화**: 여러 페이지에서 동일한 방식으로 사용될 수 있도록 설계
diff --git a/apps/as/src/widgets/cnfm/index.ts b/apps/as/src/widgets/cnfm/index.ts
new file mode 100644
index 000000000..5ecdd1f34
--- /dev/null
+++ b/apps/as/src/widgets/cnfm/index.ts
@@ -0,0 +1 @@
+export * from './ui';
diff --git a/apps/as/src/widgets/cnfm/ui/attachments.tsx b/apps/as/src/widgets/cnfm/ui/attachments.tsx
new file mode 100644
index 000000000..dcd68209e
--- /dev/null
+++ b/apps/as/src/widgets/cnfm/ui/attachments.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import { formatFileSize } from "@/shared/lib/file-utils";
+
+type EtcFile = {
+  id: string;
+  name: string;
+  ext: string;
+  size: string;
+  uploader: string;
+  atflCd: string;
+  atflId: string;
+};
+
+type Props = {
+  etcFiles: EtcFile[];
+  etcUploading: boolean;
+  onFilesChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onDelete: (fileId: string, atflId: string) => void;
+};
+
+export function EtcAttachments({ etcFiles, etcUploading, onFilesChange, onDelete }: Props) {
+  return (
+    <div>
+      <div className="mb-3 flex flex-nowrap items-center gap-2">
+        <input
+          type="text"
+          className="cnfm-input min-w-0 flex-1"
+          placeholder="첨부문서를 등록해주세요"
+          value={
+            etcUploading ? "업로드 중..." : etcFiles.length > 0 ? `${etcFiles.length}개 파일 등록됨` : ""
+          }
+          readOnly
+        />
+        <label className="cnfm-btn-search shrink-0 cursor-pointer whitespace-nowrap text-[1.2rem] flex items-center">
+          {etcUploading ? "업로드중" : "첨부파일"}
+          <input type="file" className="hidden" multiple onChange={onFilesChange} disabled={etcUploading} />
+        </label>
+      </div>
+
+      <div className="cnfm-table-wrap">
+        <table className="cnfm-table">
+          <thead>
+            <tr>
+              <th>파일명</th>
+              <th>확장자</th>
+              <th>크기</th>
+              <th>등록자</th>
+              <th>액션</th>
+            </tr>
+          </thead>
+          <tbody>
+            {etcFiles.map((f) => (
+              <tr key={f.id}>
+                <td className="pr-2">{f.name}</td>
+                <td className="text-center">{f.ext}</td>
+                <td className="text-right">{(() => {
+                    const raw = f.size;
+                    if (typeof raw === "number") return formatFileSize(raw);
+                    const s = String(raw ?? "").trim();
+                    return /^[0-9]+$/.test(s) ? formatFileSize(Number(s)) : s;
+                  })()}</td>
+                <td className="text-center">{f.uploader}</td>
+                <td className="text-center">
+                  <button className="cnfm-btn-delete" onClick={() => onDelete(f.id, f.atflId)}>
+                    삭제
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default EtcAttachments;
diff --git a/apps/as/src/widgets/cnfm/ui/cells.tsx b/apps/as/src/widgets/cnfm/ui/cells.tsx
new file mode 100644
index 000000000..7aac164e5
--- /dev/null
+++ b/apps/as/src/widgets/cnfm/ui/cells.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+export const NumCell = ({ value, onChange }: { value: string; onChange: (v: string) => void }) => (
+  <td>
+    <input
+      type="text"
+      className="cnfm-input w-full min-w-0 text-right"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  </td>
+);
+
+export const ReadCell = ({ value }: { value: string | number }) => (
+  <td className="bg-gray-50 pr-2 text-right text-[1.25rem] font-semibold">{value}</td>
+);
+
+export default { NumCell, ReadCell };
diff --git a/apps/as/src/widgets/cnfm/ui/index.ts b/apps/as/src/widgets/cnfm/ui/index.ts
new file mode 100644
index 000000000..ff7d2ac04
--- /dev/null
+++ b/apps/as/src/widgets/cnfm/ui/index.ts
@@ -0,0 +1,3 @@
+export { NumCell, ReadCell } from './cells';
+export { PrivacyConsent } from './privacy-consent';
+export { EtcAttachments } from './attachments';
diff --git a/apps/as/src/widgets/cnfm/ui/privacy-consent.tsx b/apps/as/src/widgets/cnfm/ui/privacy-consent.tsx
new file mode 100644
index 000000000..347a811b2
--- /dev/null
+++ b/apps/as/src/widgets/cnfm/ui/privacy-consent.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+type Props = {
+  value: "Y" | "N";
+  onChange: (v: "Y" | "N") => void;
+  children?: React.ReactNode;
+};
+
+export function PrivacyConsent({ value, onChange, children }: Props) {
+  return (
+    <div className="cnfm-card p-4">
+      <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">개인정보 동의</h3>
+      <div className="mb-3 rounded border bg-gray-50 p-3 text-[1.25rem] leading-relaxed text-gray-600 max-h-80 overflow-auto whitespace-pre-wrap pr-2">
+        {children}
+      </div>
+
+      <div className="flex gap-6 text-[1.3rem]">
+        <label className="flex cursor-pointer items-center gap-2 font-semibold">
+          <input type="radio" name="privacyAgree" value="Y" checked={value === "Y"} onChange={() => onChange("Y")} />
+          예 (동의)
+        </label>
+        <label className="flex cursor-pointer items-center gap-2">
+          <input type="radio" name="privacyAgree" value="N" checked={value === "N"} onChange={() => onChange("N")} />
+          아니오 (미동의)
+        </label>
+      </div>
+    </div>
+  );
+}
+
+export default PrivacyConsent;
diff --git a/apps/as/src/widgets/ognz-user-tree/index.ts b/apps/as/src/widgets/ognz-user-tree/index.ts
new file mode 100644
index 000000000..e16df59e3
--- /dev/null
+++ b/apps/as/src/widgets/ognz-user-tree/index.ts
@@ -0,0 +1,4 @@
+export { collectExpandedOgnzSnIds, filterOgnzUserTree } from "./lib/filter-ognz-user-tree";
+export { type SelectedOgnzUser, toSelectedOgnzUser } from "./model/selected-ognz-user";
+export { OgnzUserTree } from "./ui/ognz-user-tree";
+export { OgnzUserTreeNode } from "./ui/ognz-user-tree-node";
diff --git a/apps/as/src/widgets/ognz-user-tree/lib/filter-ognz-user-tree.ts b/apps/as/src/widgets/ognz-user-tree/lib/filter-ognz-user-tree.ts
new file mode 100644
index 000000000..cf8be566e
--- /dev/null
+++ b/apps/as/src/widgets/ognz-user-tree/lib/filter-ognz-user-tree.ts
@@ -0,0 +1,44 @@
+import type { OgnzUserTreeResponseDto } from "@/entities/user-organization";
+
+export function filterOgnzUserTree(
+  nodes: OgnzUserTreeResponseDto[],
+  keyword: string,
+): OgnzUserTreeResponseDto[] {
+  const q = keyword.trim().toLowerCase();
+  if (!q) return nodes;
+
+  return nodes
+    .map((node) => {
+      const ognzMatches = node.ognzNm.toLowerCase().includes(q);
+      const filteredUsers = ognzMatches
+        ? node.users
+        : node.users.filter((user) => user.userNm.toLowerCase().includes(q));
+      const filteredChildren = filterOgnzUserTree(node.children ?? [], keyword);
+
+      if (ognzMatches || filteredUsers.length > 0 || filteredChildren.length > 0) {
+        return {
+          ...node,
+          users: filteredUsers,
+          children: filteredChildren,
+        };
+      }
+
+      return null;
+    })
+    .filter((node): node is OgnzUserTreeResponseDto => node !== null);
+}
+
+export function collectExpandedOgnzSnIds(nodes: OgnzUserTreeResponseDto[]): Set<number> {
+  const ids = new Set<number>();
+
+  function walk(list: OgnzUserTreeResponseDto[]) {
+    for (const node of list) {
+      const hasContent = (node.users?.length ?? 0) > 0 || (node.children?.length ?? 0) > 0;
+      if (hasContent) ids.add(node.ognzSn);
+      walk(node.children ?? []);
+    }
+  }
+
+  walk(nodes);
+  return ids;
+}
diff --git a/apps/as/src/widgets/ognz-user-tree/model/selected-ognz-user.ts b/apps/as/src/widgets/ognz-user-tree/model/selected-ognz-user.ts
new file mode 100644
index 000000000..98e305e7e
--- /dev/null
+++ b/apps/as/src/widgets/ognz-user-tree/model/selected-ognz-user.ts
@@ -0,0 +1,24 @@
+import type { OgnzUserTreeResponseDto, OgnzUserTreeUserDto } from "@/entities/user-organization";
+
+export interface SelectedOgnzUser {
+  userUuid: string;
+  userNm: string;
+  ognzSn: number;
+  ognzNm: string;
+  jbgdSeCd?: string;
+  jbpsSeCd?: string;
+}
+
+export function toSelectedOgnzUser(
+  user: OgnzUserTreeUserDto,
+  node: Pick<OgnzUserTreeResponseDto, "ognzSn" | "ognzNm">,
+): SelectedOgnzUser {
+  return {
+    userUuid: user.userUnqId,
+    userNm: user.userNm,
+    ognzSn: node.ognzSn,
+    ognzNm: node.ognzNm,
+    jbgdSeCd: user.jbgdSeCd || undefined,
+    jbpsSeCd: user.jbpsSeCd || undefined,
+  };
+}
diff --git a/apps/as/src/widgets/ognz-user-tree/ui/ognz-user-tree-node.tsx b/apps/as/src/widgets/ognz-user-tree/ui/ognz-user-tree-node.tsx
new file mode 100644
index 000000000..fc5c998e3
--- /dev/null
+++ b/apps/as/src/widgets/ognz-user-tree/ui/ognz-user-tree-node.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { ChevronRight } from "lucide-react";
+
+import type { OgnzUserTreeResponseDto } from "@/entities/user-organization";
+import {
+  Button,
+  cn,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@common/components";
+
+import { type SelectedOgnzUser, toSelectedOgnzUser } from "../model/selected-ognz-user";
+
+interface OgnzUserTreeNodeProps {
+  node: OgnzUserTreeResponseDto;
+  depth?: number;
+  expandedOgnzSnIds: Set<number>;
+  selectedUserId?: string;
+  showSelectButton?: boolean;
+  onToggle: (ognzSn: number, open: boolean) => void;
+  onSelect: (user: SelectedOgnzUser) => void;
+}
+
+function OgnzUserTreeNode({
+  node,
+  depth = 0,
+  expandedOgnzSnIds,
+  selectedUserId,
+  showSelectButton = false,
+  onToggle,
+  onSelect,
+}: OgnzUserTreeNodeProps) {
+  const hasUsers = (node.users?.length ?? 0) > 0;
+  const hasChildren = (node.children?.length ?? 0) > 0;
+  const isExpandable = hasUsers || hasChildren;
+  const isOpen = expandedOgnzSnIds.has(node.ognzSn);
+  const indent = depth * 16 + 8;
+
+  if (!isExpandable) {
+    return (
+      <div style={{ paddingInlineStart: indent }} className="py-1">
+        <span className="text-[1.4rem] font-medium text-label">{node.ognzNm}</span>
+      </div>
+    );
+  }
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={(open) => onToggle(node.ognzSn, open)}
+      className="w-full"
+    >
+      <div style={{ paddingInlineStart: indent }}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="group flex w-full items-center gap-2 rounded-sm p-2 text-left hover:bg-accent"
+          >
+            <ChevronRight
+              className={cn(
+                "size-5 shrink-0 text-label transition-transform",
+                isOpen && "rotate-90",
+              )}
+            />
+            <span className="text-[1.4rem] font-medium text-label">{node.ognzNm}</span>
+          </button>
+        </CollapsibleTrigger>
+      </div>
+
+      <CollapsibleContent>
+        {node.users.map((user) => {
+          const isSelected = selectedUserId === user.userUnqId;
+          const selectedUser = toSelectedOgnzUser(user, node);
+
+          return (
+            <div
+              key={user.userUnqId}
+              style={{ paddingInlineStart: indent + 24 }}
+              className={cn(
+                "group flex cursor-pointer items-center gap-2 rounded-sm p-2 hover:bg-accent",
+                isSelected && "!border !border-primary !bg-primary-transparent",
+              )}
+              onClick={() => onSelect(selectedUser)}
+            >
+              <span className="text-[1.4rem] text-label">{user.userNm}</span>
+              <span className="text-xl text-muted-foreground">({user.jbpsSeNm})</span>
+              {showSelectButton ? (
+                <Button
+                  type="button"
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onSelect(selectedUser);
+                  }}
+                >
+                  선택
+                </Button>
+              ) : null}
+            </div>
+          );
+        })}
+
+        {node.children.map((child) => (
+          <OgnzUserTreeNode
+            key={child.ognzSn}
+            node={child}
+            depth={depth + 1}
+            expandedOgnzSnIds={expandedOgnzSnIds}
+            selectedUserId={selectedUserId}
+            showSelectButton={showSelectButton}
+            onToggle={onToggle}
+            onSelect={onSelect}
+          />
+        ))}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export { OgnzUserTreeNode };
diff --git a/apps/as/src/widgets/ognz-user-tree/ui/ognz-user-tree.tsx b/apps/as/src/widgets/ognz-user-tree/ui/ognz-user-tree.tsx
new file mode 100644
index 000000000..968e9526c
--- /dev/null
+++ b/apps/as/src/widgets/ognz-user-tree/ui/ognz-user-tree.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import type { OgnzUserTreeResponseDto } from "@/entities/user-organization";
+import { Skeleton } from "@common/components";
+
+import type { SelectedOgnzUser } from "../model/selected-ognz-user";
+
+import { OgnzUserTreeNode } from "./ognz-user-tree-node";
+
+interface OgnzUserTreeProps {
+  nodes: OgnzUserTreeResponseDto[];
+  isPending?: boolean;
+  isError?: boolean;
+  isSearchActive?: boolean;
+  expandedOgnzSnIds: Set<number>;
+  selectedUserId?: string;
+  showSelectButton?: boolean;
+  onToggle: (ognzSn: number, open: boolean) => void;
+  onSelect: (user: SelectedOgnzUser) => void;
+}
+
+function OgnzUserTree({
+  nodes,
+  isPending,
+  isError,
+  isSearchActive = false,
+  expandedOgnzSnIds,
+  selectedUserId,
+  showSelectButton = false,
+  onToggle,
+  onSelect,
+}: OgnzUserTreeProps) {
+  if (isPending) {
+    return (
+      <div className="flex flex-col gap-2">
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-10 w-3/4" />
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <p className="py-8 text-center text-lg text-muted-foreground">
+        조직 사용자 목록을 불러오지 못했습니다.
+      </p>
+    );
+  }
+
+  if (nodes.length === 0) {
+    return (
+      <p className="py-8 text-center text-lg text-muted-foreground">
+        {isSearchActive ? "조회된 인원이 없습니다." : "등록된 조직/사용자가 없습니다."}
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col">
+      {nodes.map((node) => (
+        <OgnzUserTreeNode
+          key={node.ognzSn}
+          node={node}
+          expandedOgnzSnIds={expandedOgnzSnIds}
+          selectedUserId={selectedUserId}
+          showSelectButton={showSelectButton}
+          onToggle={onToggle}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  );
+}
+
+export { OgnzUserTree };
diff --git a/apps/as/tailwind.config.ts b/apps/as/tailwind.config.ts
new file mode 100644
index 000000000..cafc2124f
--- /dev/null
+++ b/apps/as/tailwind.config.ts
@@ -0,0 +1,22 @@
+import type { Config } from "tailwindcss";
+
+import presetConfig from "../../tailwind.config.preset";
+
+const config: Config = {
+  presets: [presetConfig],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "../../packages/common/components/dist/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
diff --git a/apps/as/tsconfig.json b/apps/as/tsconfig.json
new file mode 100644
index 000000000..dab9b0b8e
--- /dev/null
+++ b/apps/as/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@common/components": ["../../packages/common/components/dist/"],
+      "@common/network": ["../../packages/common/network/"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/cm/package.json b/apps/cm/package.json
index 9d4e1da8f..5eaca0435 100644
--- a/apps/cm/package.json
+++ b/apps/cm/package.json
@@ -12,6 +12,9 @@
     "@common/assets": "workspace:*",
     "@common/components": "workspace:*",
     "@common/config": "workspace:*",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/noto-sans-kr": "^5.2.5",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@fullcalendar/core": "^6.1.17",
@@ -34,7 +37,7 @@
     "dayjs": "^1.11.13",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.474.0",
-    "next": "15.3.8",
+    "next": "15.5.18",
     "next-qrcode": "^2.5.1",
     "next-themes": "^0.4.6",
     "react-chartjs-2": "^5.3.0",
@@ -52,7 +55,7 @@
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9.0.0",
-    "eslint-config-next": "15.4.0",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
@@ -60,4 +63,4 @@
     "tailwindcss": "^3.4.14",
     "typescript": "^5.7.2"
   }
-}
\ No newline at end of file
+}
diff --git a/apps/cm/src/pages/auth/login/ui/SignupModal.tsx b/apps/cm/src/pages/auth/login/ui/SignupModal.tsx
index d61949ccc..11d7d3544 100644
--- a/apps/cm/src/pages/auth/login/ui/SignupModal.tsx
+++ b/apps/cm/src/pages/auth/login/ui/SignupModal.tsx
@@ -14,7 +14,9 @@ interface SignupModalProps {
 }
 
 function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
-  const [currentStep, setCurrentStep] = useState<'agreement' | 'signup'>('agreement');
+  const [currentStep, setCurrentStep] = useState<"agreement" | "signup">(
+    "agreement",
+  );
   const [agreed, setAgreed] = useState(false);
   const [formData, setFormData] = useState({
     userId: "",
@@ -47,7 +49,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
   // 모달이 닫힐 때 초기화
   useEffect(() => {
     if (!open) {
-      setCurrentStep('agreement');
+      setCurrentStep("agreement");
       setAgreed(false);
       setFormData({
         userId: "",
@@ -81,17 +83,19 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
   const handleNextStep = () => {
     if (agreed) {
-      setCurrentStep('signup');
+      setCurrentStep("signup");
     }
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+  ) => {
     const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
-    
+    setFormData((prev) => ({ ...prev, [name]: value }));
+
     // 에러 초기화
     if (errors[name]) {
-      setErrors(prev => ({ ...prev, [name]: "" }));
+      setErrors((prev) => ({ ...prev, [name]: "" }));
     }
   };
 
@@ -102,20 +106,27 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
     if (!formData.userId) newErrors.userId = "아이디를 입력해주세요.";
     if (!formData.userName) newErrors.userName = "이름을 입력해주세요.";
     if (!formData.password) newErrors.password = "비밀번호를 입력해주세요.";
-    if (!formData.confirmPassword) newErrors.confirmPassword = "비밀번호 확인을 입력해주세요.";
+    if (!formData.confirmPassword)
+      newErrors.confirmPassword = "비밀번호 확인을 입력해주세요.";
     if (!formData.pswdHnt) newErrors.pswdHnt = "비밀번호 힌트를 입력해주세요.";
     if (!formData.laeSeCd) newErrors.laeSeCd = "법인구분을 선택해주세요.";
     if (!formData.ogdpSeCd) newErrors.ogdpSeCd = "기관구분을 선택해주세요.";
 
     // 비밀번호 확인
-    if (formData.password && formData.confirmPassword && formData.password !== formData.confirmPassword) {
+    if (
+      formData.password &&
+      formData.confirmPassword &&
+      formData.password !== formData.confirmPassword
+    ) {
       newErrors.confirmPassword = "비밀번호가 일치하지 않습니다.";
     }
 
     // 비밀번호 정규식 검증
-    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/;
+    const passwordRegex =
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/;
     if (formData.password && !passwordRegex.test(formData.password)) {
-      newErrors.password = "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.";
+      newErrors.password =
+        "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.";
     }
 
     // 이메일 형식 검증
@@ -124,8 +135,10 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
     }
 
     // 중복 체크 검증
-    if (idAvailable === false) newErrors.userId = "이미 사용 중인 아이디입니다.";
-    if (emailAvailable === false) newErrors.email = "이미 사용 중인 이메일입니다.";
+    if (idAvailable === false)
+      newErrors.userId = "이미 사용 중인 아이디입니다.";
+    if (emailAvailable === false)
+      newErrors.email = "이미 사용 중인 이메일입니다.";
 
     setErrors(newErrors);
     const isValid = Object.keys(newErrors).length === 0;
@@ -135,7 +148,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
   const checkUserIdDuplicate = async () => {
     if (!formData.userId) {
-      setErrors(prev => ({ ...prev, userId: "아이디를 입력해주세요." }));
+      setErrors((prev) => ({ ...prev, userId: "아이디를 입력해주세요." }));
       return;
     }
 
@@ -147,19 +160,25 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
       });
       const response = await signupClient.post<boolean>(
         `${ENDPOINT.USER_SERVICE.USERS}/existsUserId`,
-        { userId: formData.userId }
+        { userId: formData.userId },
       );
 
       const exists = response.data;
       setIdAvailable(!exists);
       if (exists) {
-        setErrors(prev => ({ ...prev, userId: "이미 사용 중인 아이디입니다." }));
+        setErrors((prev) => ({
+          ...prev,
+          userId: "이미 사용 중인 아이디입니다.",
+        }));
       } else {
-        setErrors(prev => ({ ...prev, userId: "" }));
+        setErrors((prev) => ({ ...prev, userId: "" }));
       }
     } catch (error) {
       console.error("아이디 중복 체크 오류:", error);
-      setErrors(prev => ({ ...prev, userId: "아이디 중복 체크 중 오류가 발생했습니다." }));
+      setErrors((prev) => ({
+        ...prev,
+        userId: "아이디 중복 체크 중 오류가 발생했습니다.",
+      }));
     } finally {
       setIsCheckingId(false);
     }
@@ -167,7 +186,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
   const checkEmailDuplicate = async () => {
     if (!formData.email) {
-      setErrors(prev => ({ ...prev, email: "이메일을 입력해주세요." }));
+      setErrors((prev) => ({ ...prev, email: "이메일을 입력해주세요." }));
       return;
     }
 
@@ -179,28 +198,34 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
       });
       const response = await signupClient.post<boolean>(
         `${ENDPOINT.USER_SERVICE.USERS}/exists`,
-        { email: formData.email }
+        { email: formData.email },
       );
 
       const exists = response.data;
       setEmailAvailable(!exists);
       if (exists) {
-        setErrors(prev => ({ ...prev, email: "이미 사용 중인 이메일입니다." }));
+        setErrors((prev) => ({
+          ...prev,
+          email: "이미 사용 중인 이메일입니다.",
+        }));
       } else {
-        setErrors(prev => ({ ...prev, email: "" }));
+        setErrors((prev) => ({ ...prev, email: "" }));
       }
     } catch (error) {
       console.error("이메일 중복 체크 오류:", error);
-      setErrors(prev => ({ ...prev, email: "이메일 중복 체크 중 오류가 발생했습니다." }));
+      setErrors((prev) => ({
+        ...prev,
+        email: "이메일 중복 체크 중 오류가 발생했습니다.",
+      }));
     } finally {
       setIsCheckingEmail(false);
     }
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.SubmitEvent) => {
     e.preventDefault();
     console.log("회원가입 버튼 클릭됨");
-    
+
     if (!validateForm()) {
       console.log("폼 검증 실패");
       return;
@@ -230,19 +255,19 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
       // SignupClient를 통해 익명사용자 회원가입 API 호출
       const signupClient = SignupClient.getInstance({
-        baseURL: BASE_URL
+        baseURL: BASE_URL,
       });
       const response = await signupClient.post(
         `${ENDPOINT.USER_SERVICE.USERS}/anonymouse/users/join`,
-        signupData
+        signupData,
       );
 
       console.log("회원가입 성공:", response.data);
-      
+
       // 성공 시 모달 닫기 및 콜백 호출
       onSuccess();
       onClose();
-      
+
       // 폼 초기화
       setFormData({
         userId: "",
@@ -267,13 +292,12 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
       setErrors({});
       setIdAvailable(null);
       setEmailAvailable(null);
-
     } catch (error: unknown) {
       console.error("회원가입 오류:", error);
       if (error instanceof Error) {
-        setErrors(prev => ({ ...prev, submit: error.message }));
+        setErrors((prev) => ({ ...prev, submit: error.message }));
       } else {
-        setErrors(prev => ({ ...prev, submit: "회원가입에 실패했습니다." }));
+        setErrors((prev) => ({ ...prev, submit: "회원가입에 실패했습니다." }));
       }
     } finally {
       setIsLoading(false);
@@ -286,36 +310,52 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
     <div className="modal-overlay" onClick={onClose}>
       <div className="modal-content" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
-          <h2>{currentStep === 'agreement' ? '개인정보제공동의' : '회원가입'}</h2>
-          <button className="close-button" onClick={onClose}>×</button>
+          <h2>
+            {currentStep === "agreement" ? "개인정보제공동의" : "회원가입"}
+          </h2>
+          <button className="close-button" onClick={onClose}>
+            ×
+          </button>
         </div>
-        
-        {currentStep === 'agreement' ? (
+
+        {currentStep === "agreement" ? (
           <div className="agreement-content">
             <div className="agreement-text">
               <h3>개인정보 수집 및 이용 동의</h3>
               <p>회원가입을 위해 다음과 같이 개인정보를 수집 및 이용합니다.</p>
-              
+
               <h4>1. 수집하는 개인정보 항목</h4>
               <ul>
-                <li>필수항목: 아이디, 이름, 비밀번호, 비밀번호 힌트, 법인구분, 기관구분</li>
-                <li>선택항목: 이메일, 휴대폰번호, 전화번호, 주소, 기관코드, 상세기관코드, 사업자등록번호</li>
+                <li>
+                  필수항목: 아이디, 이름, 비밀번호, 비밀번호 힌트, 법인구분,
+                  기관구분
+                </li>
+                <li>
+                  선택항목: 이메일, 휴대폰번호, 전화번호, 주소, 기관코드,
+                  상세기관코드, 사업자등록번호
+                </li>
               </ul>
-              
+
               <h4>2. 개인정보의 수집 및 이용목적</h4>
               <ul>
                 <li>회원가입 및 관리</li>
                 <li>서비스 제공 및 운영</li>
                 <li>고객상담 및 문의응답</li>
               </ul>
-              
+
               <h4>3. 개인정보의 보유 및 이용기간</h4>
-              <p>회원탈퇴 시까지 (단, 관련 법령에 따라 보존이 필요한 경우 해당 기간까지)</p>
-              
+              <p>
+                회원탈퇴 시까지 (단, 관련 법령에 따라 보존이 필요한 경우 해당
+                기간까지)
+              </p>
+
               <h4>4. 동의 거부권 및 거부 시 불이익</h4>
-              <p>개인정보 수집 및 이용에 대한 동의를 거부할 수 있으며, 동의 거부 시 회원가입이 제한됩니다.</p>
+              <p>
+                개인정보 수집 및 이용에 대한 동의를 거부할 수 있으며, 동의 거부
+                시 회원가입이 제한됩니다.
+              </p>
             </div>
-            
+
             <div className="agreement-checkbox">
               <label>
                 <input
@@ -326,13 +366,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                 <span>개인정보 수집 및 이용에 동의합니다.</span>
               </label>
             </div>
-            
+
             <div className="agreement-actions">
-              <button
-                type="button"
-                onClick={onClose}
-                className="cancel-button"
-              >
+              <button type="button" onClick={onClose} className="cancel-button">
                 취소
               </button>
               <button
@@ -349,7 +385,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
           <form onSubmit={handleSubmit} className="signup-form">
             <div className="form-section">
               <h3>기본 정보</h3>
-              
+
               <div className="form-row">
                 <div className="form-group">
                   <label htmlFor="userId">아이디 *</label>
@@ -373,8 +409,14 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                       {isCheckingId ? "확인중..." : "중복확인"}
                     </button>
                   </div>
-                  {idAvailable === true && <span className="success-message">사용 가능한 아이디입니다.</span>}
-                  {errors.userId && <span className="error-message">{errors.userId}</span>}
+                  {idAvailable === true && (
+                    <span className="success-message">
+                      사용 가능한 아이디입니다.
+                    </span>
+                  )}
+                  {errors.userId && (
+                    <span className="error-message">{errors.userId}</span>
+                  )}
                 </div>
               </div>
 
@@ -390,7 +432,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     placeholder="이름을 입력하세요"
                     disabled={isLoading}
                   />
-                  {errors.userName && <span className="error-message">{errors.userName}</span>}
+                  {errors.userName && (
+                    <span className="error-message">{errors.userName}</span>
+                  )}
                 </div>
               </div>
 
@@ -416,8 +460,14 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                       {isCheckingEmail ? "확인중..." : "중복확인"}
                     </button>
                   </div>
-                  {emailAvailable === true && <span className="success-message">사용 가능한 이메일입니다.</span>}
-                  {errors.email && <span className="error-message">{errors.email}</span>}
+                  {emailAvailable === true && (
+                    <span className="success-message">
+                      사용 가능한 이메일입니다.
+                    </span>
+                  )}
+                  {errors.email && (
+                    <span className="error-message">{errors.email}</span>
+                  )}
                 </div>
               </div>
 
@@ -434,7 +484,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={20}
                     disabled={isLoading}
                   />
-                  {errors.password && <span className="error-message">{errors.password}</span>}
+                  {errors.password && (
+                    <span className="error-message">{errors.password}</span>
+                  )}
                 </div>
               </div>
 
@@ -451,7 +503,11 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={20}
                     disabled={isLoading}
                   />
-                  {errors.confirmPassword && <span className="error-message">{errors.confirmPassword}</span>}
+                  {errors.confirmPassword && (
+                    <span className="error-message">
+                      {errors.confirmPassword}
+                    </span>
+                  )}
                 </div>
               </div>
 
@@ -468,7 +524,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={10}
                     disabled={isLoading}
                   />
-                  {errors.pswdHnt && <span className="error-message">{errors.pswdHnt}</span>}
+                  {errors.pswdHnt && (
+                    <span className="error-message">{errors.pswdHnt}</span>
+                  )}
                 </div>
               </div>
 
@@ -485,14 +543,16 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={100}
                     disabled={isLoading}
                   />
-                  {errors.pswdAns && <span className="error-message">{errors.pswdAns}</span>}
+                  {errors.pswdAns && (
+                    <span className="error-message">{errors.pswdAns}</span>
+                  )}
                 </div>
               </div>
             </div>
 
             <div className="form-section">
               <h3>연락처 정보</h3>
-              
+
               <div className="form-row">
                 <div className="form-group">
                   <label htmlFor="mphn">휴대폰 번호</label>
@@ -506,7 +566,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={11}
                     disabled={isLoading}
                   />
-                  {errors.mphn && <span className="error-message">{errors.mphn}</span>}
+                  {errors.mphn && (
+                    <span className="error-message">{errors.mphn}</span>
+                  )}
                 </div>
               </div>
 
@@ -523,14 +585,16 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={11}
                     disabled={isLoading}
                   />
-                  {errors.telno && <span className="error-message">{errors.telno}</span>}
+                  {errors.telno && (
+                    <span className="error-message">{errors.telno}</span>
+                  )}
                 </div>
               </div>
             </div>
 
             <div className="form-section">
               <h3>주소 정보</h3>
-              
+
               <div className="form-row">
                 <div className="form-group">
                   <label htmlFor="zip">우편번호</label>
@@ -544,7 +608,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={5}
                     disabled={isLoading}
                   />
-                  {errors.zip && <span className="error-message">{errors.zip}</span>}
+                  {errors.zip && (
+                    <span className="error-message">{errors.zip}</span>
+                  )}
                 </div>
               </div>
 
@@ -561,7 +627,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={200}
                     disabled={isLoading}
                   />
-                  {errors.addr && <span className="error-message">{errors.addr}</span>}
+                  {errors.addr && (
+                    <span className="error-message">{errors.addr}</span>
+                  )}
                 </div>
               </div>
 
@@ -578,14 +646,16 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={200}
                     disabled={isLoading}
                   />
-                  {errors.daddr && <span className="error-message">{errors.daddr}</span>}
+                  {errors.daddr && (
+                    <span className="error-message">{errors.daddr}</span>
+                  )}
                 </div>
               </div>
             </div>
 
             <div className="form-section">
               <h3>기관 정보</h3>
-              
+
               <div className="form-row">
                 <div className="form-group">
                   <label htmlFor="laeSeCd">법인구분 *</label>
@@ -601,7 +671,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     <option value="02">민간기업</option>
                     <option value="03">개인</option>
                   </select>
-                  {errors.laeSeCd && <span className="error-message">{errors.laeSeCd}</span>}
+                  {errors.laeSeCd && (
+                    <span className="error-message">{errors.laeSeCd}</span>
+                  )}
                 </div>
               </div>
 
@@ -621,7 +693,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     <option value="03">공공기관</option>
                     <option value="04">민간기업</option>
                   </select>
-                  {errors.ogdpSeCd && <span className="error-message">{errors.ogdpSeCd}</span>}
+                  {errors.ogdpSeCd && (
+                    <span className="error-message">{errors.ogdpSeCd}</span>
+                  )}
                 </div>
               </div>
 
@@ -638,7 +712,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={10}
                     disabled={isLoading}
                   />
-                  {errors.instSeCd && <span className="error-message">{errors.instSeCd}</span>}
+                  {errors.instSeCd && (
+                    <span className="error-message">{errors.instSeCd}</span>
+                  )}
                 </div>
               </div>
 
@@ -655,21 +731,25 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={10}
                     disabled={isLoading}
                   />
-                  {errors.dtlInstCd && <span className="error-message">{errors.dtlInstCd}</span>}
+                  {errors.dtlInstCd && (
+                    <span className="error-message">{errors.dtlInstCd}</span>
+                  )}
                 </div>
               </div>
             </div>
 
             {errors.submit && (
               <div className="form-row">
-                <div className="error-message submit-error">{errors.submit}</div>
+                <div className="error-message submit-error">
+                  {errors.submit}
+                </div>
               </div>
             )}
 
             <div className="form-actions">
               <button
                 type="button"
-                onClick={() => setCurrentStep('agreement')}
+                onClick={() => setCurrentStep("agreement")}
                 className="back-button"
                 disabled={isLoading}
               >
diff --git a/apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx b/apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx
index 4fb5fdf5d..8faf518f1 100644
--- a/apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx
+++ b/apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx
@@ -305,7 +305,7 @@ function UserSignupModal({ open, onClose, onSuccess }: UserSignupModalProps) {
     }
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.SubmitEvent) => {
     e.preventDefault();
     console.log("회원가입 버튼 클릭됨 - handleSubmit");
     console.log("현재 폼 데이터:", formData);
diff --git a/apps/cm/src/pages/auth/login/ui/login-page.tsx b/apps/cm/src/pages/auth/login/ui/login-page.tsx
index 297d28a8f..f7f613086 100644
--- a/apps/cm/src/pages/auth/login/ui/login-page.tsx
+++ b/apps/cm/src/pages/auth/login/ui/login-page.tsx
@@ -26,7 +26,7 @@ function LoginPage() {
     console.log("Modal states - OTP:", showOtpModal, "2FA:", showTwoFAModal);
   }, [showOtpModal, showTwoFAModal]);
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError("");
@@ -43,44 +43,54 @@ function LoginPage() {
       if (isOtpEnabled) {
         // 2FA 로그인 - Proxy를 통해 처리 (2FA 전용 엔드포인트 사용)
         console.log("Starting 2FA login...");
-        
-        const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN_2FA}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            userId,
-            password,
-            provider: 'password'
-          }),
-        });
+
+        const response = await fetch(
+          `/api/proxy${ENDPOINT.USER_SERVICE.LOGIN_2FA}`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              userId,
+              password,
+              provider: "password",
+            }),
+          },
+        );
 
         if (!response.ok) {
           const errorData = await response.json();
-          let errorMsg = errorData.message || '로그인 실패';
+          let errorMsg = errorData.message || "로그인 실패";
           if (Array.isArray(errorData.errors) && errorData.errors.length > 0) {
-            errorMsg = errorData.errors.map((e: { message: string }) => e.message).join(', ');
+            errorMsg = errorData.errors
+              .map((e: { message: string }) => e.message)
+              .join(", ");
           }
           throw new Error(errorMsg);
         }
 
         const data = await response.json();
         console.log("2FA login response:", data);
-        console.log("Response headers:", Object.fromEntries(response.headers.entries()));
-        
+        console.log(
+          "Response headers:",
+          Object.fromEntries(response.headers.entries()),
+        );
+
         // 2FA 로그인 응답에는 tempToken과 registered2FA만 포함됨
         if (!data.tempToken) {
           throw new Error("Missing tempToken in 2FA login response");
         }
 
         // 임시 토큰을 localStorage에 저장 (OTP 인증용)
-        localStorage.setItem('tempToken', data.tempToken);
+        localStorage.setItem("tempToken", data.tempToken);
         console.log("tempToken saved:", data.tempToken);
 
         if (data.registered2FA) {
           console.log("User has 2FA registered, showing OTP modal");
           setShowOtpModal(true);
         } else {
-          console.log("User doesn't have 2FA registered, showing 2FA setup modal");
+          console.log(
+            "User doesn't have 2FA registered, showing 2FA setup modal",
+          );
           setShowTwoFAModal(true);
         }
       } else {
@@ -91,7 +101,7 @@ function LoginPage() {
       }
     } catch (error: unknown) {
       console.error("Login error:", error);
-      
+
       // 에러 처리
       if (error instanceof Error) {
         setError(error.message);
@@ -147,9 +157,9 @@ function LoginPage() {
             <h1>
               유역하수도통합플랫폼
               <br />
-              <span>하수도 포탈</span>
+              <span>유역하수도 포탈</span>
             </h1>
-            <p>유역하수도통합플랫폼 하수도 포탈에 오신 것을 환영합니다.</p>
+            <p>유역하수도통합플랫폼 유역하수도포탈에 오신 것을 환영합니다.</p>
           </div>
           <div className="img">
             <Image src={images.logo} width={229} height={46} alt="logo" />
@@ -218,25 +228,36 @@ function LoginPage() {
                 <label htmlFor="checkTwoFA">OTP 인증</label>
               </div>
             </div>
-            <button 
-              type="submit" 
-              className="login_btn fx"
-              disabled={isLoading}
-            >
+            <button type="submit" className="login_btn fx" disabled={isLoading}>
               <span>{isLoading ? "로그인 중..." : "LOGIN"}</span>
             </button>
             {error && (
-              <div className="error-message" style={{ color: "red", textAlign: "center", marginTop: "10px" }}>
+              <div
+                className="error-message"
+                style={{ color: "red", textAlign: "center", marginTop: "10px" }}
+              >
                 {error}
               </div>
             )}
             {successMessage && (
-              <div className="success-message" style={{ color: "green", textAlign: "center", marginTop: "10px" }}>
+              <div
+                className="success-message"
+                style={{
+                  color: "green",
+                  textAlign: "center",
+                  marginTop: "10px",
+                }}
+              >
                 {successMessage}
               </div>
             )}
-            <div className="signup-link" style={{ textAlign: "center", marginTop: "15px" }}>
-              <span style={{ color: "#666", fontSize: "14px" }}>계정이 없으신가요? </span>
+            <div
+              className="signup-link"
+              style={{ textAlign: "center", marginTop: "15px" }}
+            >
+              <span style={{ color: "#666", fontSize: "14px" }}>
+                계정이 없으신가요?{" "}
+              </span>
               <button
                 type="button"
                 onClick={() => setShowSignupModal(true)}
@@ -246,7 +267,7 @@ function LoginPage() {
                   color: "#3b82f6",
                   textDecoration: "underline",
                   cursor: "pointer",
-                  fontSize: "14px"
+                  fontSize: "14px",
                 }}
               >
                 회원가입
@@ -282,8 +303,8 @@ function LoginPage() {
                   종합환경연구단지)
                 </span>
                 <span>
-                  전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
-                  3722
+                  전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계)
+                  032-590-3723, 3722
                 </span>
                 <span>팩스 :032-590-3729</span>
               </p>
diff --git a/apps/cm/src/pages/dashboard/lib/hooks/use-dnd-sensors.ts b/apps/cm/src/pages/dashboard/lib/hooks/use-dnd-sensors.ts
new file mode 100644
index 000000000..953bc874f
--- /dev/null
+++ b/apps/cm/src/pages/dashboard/lib/hooks/use-dnd-sensors.ts
@@ -0,0 +1,16 @@
+import {
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+
+export function useDndSensors() {
+  return useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+}
diff --git a/apps/cm/src/pages/dashboard/lib/hooks/use-panel-order.ts b/apps/cm/src/pages/dashboard/lib/hooks/use-panel-order.ts
new file mode 100644
index 000000000..412774210
--- /dev/null
+++ b/apps/cm/src/pages/dashboard/lib/hooks/use-panel-order.ts
@@ -0,0 +1,59 @@
+import { useState, useEffect } from "react";
+import { arrayMove } from "@dnd-kit/sortable";
+import type { DragEndEvent } from "@dnd-kit/core";
+import type { PanelItem } from "../../model/types";
+
+interface UsePanelOrderProps {
+  initialPanels: PanelItem[];
+  storageKey: string;
+}
+
+export function usePanelOrder({
+  initialPanels,
+  storageKey,
+}: UsePanelOrderProps) {
+  const [panels, setPanels] = useState<PanelItem[]>(initialPanels);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    if (isInitialized) return;
+
+    const saved = localStorage.getItem(storageKey);
+    if (saved) {
+      try {
+        const savedIds = JSON.parse(saved);
+        const restoredPanels = savedIds
+          .map((id: string) => initialPanels.find((p) => p.id === id))
+          .filter(Boolean);
+        if (restoredPanels.length === initialPanels.length) {
+          setPanels(restoredPanels);
+        }
+      } catch {
+        setPanels(initialPanels);
+      }
+    }
+    setIsInitialized(true);
+  }, [storageKey]);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setPanels((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        const newItems = arrayMove(items, oldIndex, newIndex);
+
+        // localStorage에 저장
+        localStorage.setItem(
+          storageKey,
+          JSON.stringify(newItems.map((item) => item.id)),
+        );
+
+        return newItems;
+      });
+    }
+  };
+
+  return { panels, handleDragEnd };
+}
diff --git a/apps/cm/src/pages/dashboard/model/panel-config.tsx b/apps/cm/src/pages/dashboard/model/panel-config.tsx
new file mode 100644
index 000000000..e995e41c6
--- /dev/null
+++ b/apps/cm/src/pages/dashboard/model/panel-config.tsx
@@ -0,0 +1,71 @@
+import FoFcltCntRt from "@/pages/dashboard/ui/fo-fclt-cnt-rt";
+import SnPplStatus from "@/pages/dashboard/ui/sn-ppl-status";
+import ReuseChart from "@/pages/dashboard/ui/reuse-chart";
+import FoWqltInflEffl from "@/pages/dashboard/ui/fo-wqlt-Infl-effl";
+import SnOldPpl from "@/pages/dashboard/ui/sn-old-ppl";
+import ReuseStatus from "@/pages/dashboard/ui/reuse-status";
+import SupportList from "@/pages/dashboard/ui/support-list";
+import DataStatusList from "@/pages/dashboard/ui/datastatus-list";
+import NoticeList from "@/pages/dashboard/ui/notice-list";
+import BannerList from "@/pages/dashboard/ui/banner-list";
+import type { PanelItem } from "./types";
+
+export function getInitialTopPanels(): PanelItem[] {
+  return [
+    {
+      id: "panel-1",
+      component: <FoFcltCntRt />,
+      className: "",
+    },
+    {
+      id: "panel-2",
+      component: <SnPplStatus />,
+      className: "",
+    },
+    {
+      id: "panel-3",
+      component: <ReuseChart />,
+      className: "",
+    },
+    {
+      id: "panel-4",
+      component: <FoWqltInflEffl />,
+      className: "",
+    },
+    {
+      id: "panel-5",
+      component: <SnOldPpl />,
+      className: "",
+    },
+    {
+      id: "panel-6",
+      component: <ReuseStatus />,
+      className: "",
+    },
+  ];
+}
+
+export function getInitialBottomPanels(): PanelItem[] {
+  return [
+    {
+      id: "panel-7",
+      component: <SupportList />,
+      className: "",
+    },
+    {
+      id: "panel-8",
+      component: <DataStatusList />,
+      className: "",
+    },
+    {
+      id: "panel-9",
+      component: <NoticeList />,
+      className: "",
+    },
+    {
+      id: "panel-10",
+      component: <BannerList />,
+      className: "",
+    },
+  ];
+}
diff --git a/apps/cm/src/pages/dashboard/model/types.ts b/apps/cm/src/pages/dashboard/model/types.ts
new file mode 100644
index 000000000..8cd41a37e
--- /dev/null
+++ b/apps/cm/src/pages/dashboard/model/types.ts
@@ -0,0 +1,7 @@
+export interface PanelItem {
+  id: string;
+  component: React.ReactNode;
+  className?: string;
+}
+
+export type PanelType = "top" | "bottom";
diff --git a/apps/cm/src/pages/dashboard/ui/banner-list.tsx b/apps/cm/src/pages/dashboard/ui/banner-list.tsx
index 865540672..6404faa85 100644
--- a/apps/cm/src/pages/dashboard/ui/banner-list.tsx
+++ b/apps/cm/src/pages/dashboard/ui/banner-list.tsx
@@ -1,10 +1,15 @@
 "use client";
 
-import { useRef } from "react";
+import { useRef, useState, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { ENDPOINT } from "@/shared/config";
-import { getImageUrlByAtflCd, getBannerList, type Banner } from "../api/banner-service";
+import {
+  getImageUrlByAtflCd,
+  getBannerList,
+  type Banner,
+} from "../api/banner-service";
 import { getCookie } from "@/shared/lib";
+import { useDragHandle } from "./sortable-panel";
 
 import {
   Carousel,
@@ -21,7 +26,13 @@ type BannerImageProps = {
 };
 
 const BannerList: React.FC = () => {
-  const siteId = getCookie("site-id-key") ?? "";
+  const { dragHandleProps, isDragging } = useDragHandle();
+  const [siteId, setSiteId] = useState<string>("");
+
+  useEffect(() => {
+    const id = getCookie("site-id-key") ?? "";
+    setSiteId(id);
+  }, []);
 
   const BannerImage = ({ atflCd, lnkgUrlAddr }: BannerImageProps) => {
     const { data: imageUrl, isLoading } = useQuery({
@@ -91,6 +102,19 @@ const BannerList: React.FC = () => {
     return maybe.status ?? maybe.response?.status;
   };
 
+  // siteId가 없을 때
+  if (!siteId) {
+    return (
+      <div className="card card-border">
+        <div className="relative flex h-[240px] w-full items-center justify-center bg-accent">
+          <div className="text-sm text-muted-foreground">
+            사이트 ID가 없습니다
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   // 401 에러 처리
   if (bannerError) {
     const is401Error =
@@ -133,21 +157,14 @@ const BannerList: React.FC = () => {
     );
   }
 
-  // siteId가 없을 때
-  if (!siteId) {
-    return (
-      <div className="card card-border">
-        <div className="relative flex h-[240px] w-full items-center justify-center bg-accent">
-          <div className="text-sm text-muted-foreground">
-            사이트 ID가 없습니다
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
-    <div className="card card-border"  style={{ height: "230px" }}>
+    <div className="card card-border" style={{ height: "230px" }}>
+      {/* 드래그 핸들 - 배너 위에 오버레이 */}
+      <div 
+        className={`absolute inset-0 z-10 cursor-grab active:cursor-grabbing ${isDragging ? 'bg-black/20' : 'bg-transparent'}`}
+        {...dragHandleProps}
+        title="배너를 드래그하여 패널 순서 변경"
+      />
       <Carousel
         plugins={[plugin.current]}
         opts={{ loop: true }}
diff --git a/apps/cm/src/pages/dashboard/ui/dashboard-page.tsx b/apps/cm/src/pages/dashboard/ui/dashboard-page.tsx
index 5f9ce3440..9d5e9179a 100644
--- a/apps/cm/src/pages/dashboard/ui/dashboard-page.tsx
+++ b/apps/cm/src/pages/dashboard/ui/dashboard-page.tsx
@@ -6,6 +6,8 @@ import { tokenManager } from "@/entities/auth/lib/token-manager";
 import { client } from "@/shared/api";
 import { ENDPOINT } from "@/shared/config";
 import { KoreaBasinMap } from "../lib/korea-basin-map";
+import { useDndSensors } from "../lib/hooks/use-dnd-sensors";
+import { usePanelOrder } from "../lib/hooks/use-panel-order";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -18,18 +20,15 @@ import {
   Tooltip,
   ArcElement,
 } from "chart.js";
-import SnPplStatus from "./sn-ppl-status";
-import SnOldPpl from "./sn-old-ppl";
-import FoFcltCntRt from "./fo-fclt-cnt-rt";
-import FoWqltInflEffl from "./fo-wqlt-Infl-effl";
-import ReuseChart from "./reuse-chart";
-import ReuseStatus from "./reuse-status";
-import NoticeList from "./notice-list";
-import BannerList from "./banner-list";
-import SupportList from "./support-list";
-import DataStatusList from "./datastatus-list";
+import { DndContext, closestCenter } from "@dnd-kit/core";
+import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
+import {
+  getInitialTopPanels,
+  getInitialBottomPanels,
+} from "../model/panel-config";
 import MyPostList from "./mypost-list";
 import ScheduleList from "./schedule-list";
+import { SortablePanel } from "./sortable-panel";
 
 // Chart.js 등록
 ChartJS.register(
@@ -41,7 +40,7 @@ ChartJS.register(
   Filler,
   Legend,
   Tooltip,
-  ArcElement
+  ArcElement,
 );
 
 interface UserInfo {
@@ -54,7 +53,29 @@ interface UserInfo {
 function DashboardPage() {
   const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
   const [error, setError] = useState("");
-  const router = useRouter();  
+  const [isMounted, setIsMounted] = useState(false);
+  const router = useRouter();
+
+  // dnd-kit 센서 설정
+  const sensors = useDndSensors();
+
+  // 패널 순서 관리
+  const { panels: topPanels, handleDragEnd: handleTopDragEnd } = usePanelOrder({
+    initialPanels: getInitialTopPanels(),
+    storageKey: "dashboard-top-panels-order",
+  });
+
+  const { panels: bottomPanels, handleDragEnd: handleBottomDragEnd } =
+    usePanelOrder({
+      initialPanels: getInitialBottomPanels(),
+      storageKey: "dashboard-bottom-panels-order",
+    });
+
+  // 클라이언트에서만 드래그 기능 활성화 (hydration 문제 방지)
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   useEffect(() => {
     const fetchUserInfo = async () => {
       console.log("fetchUserInfo called");
@@ -115,96 +136,149 @@ function DashboardPage() {
   return (
     <div className="p-2 sm:p-4 md:p-6">
       <div className="flex flex-col gap-1">
-        {/* 첫번째 라인 */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8 gap-1">
-          {/* 첫번쨰 열 */}
-          <div className="col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2 h-250 !p-0">
-            {/* 전국 하수처리시설 개소수 및 가동률 */}
-            <FoFcltCntRt />
-
-            {/* 오수관로 및 우수관로 현황 */}
-            <SnPplStatus />
-
-            {/* 하수처리수 재이용 (m³) */}
-            <ReuseChart />
+        {/* 첫번째 라인 - 좌측 6개 패널(2x3) + 우측 지도/사용자 정보 */}
+        <div className="flex flex-col gap-1 lg:flex-row">
+          {/* 좌측: 드래그 가능한 6개 패널 (2x3 그리드, 화면의 50%) */}
+          <div className="w-full lg:w-1/2">
+            {isMounted ? (
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleTopDragEnd}
+              >
+                <SortableContext
+                  items={topPanels.map((p) => p.id)}
+                  strategy={rectSortingStrategy}
+                >
+                  <div className="grid grid-cols-2 gap-1">
+                    {topPanels.map((panel) => (
+                      <SortablePanel
+                        key={panel.id}
+                        id={panel.id}
+                        className={panel.className}
+                      >
+                        {panel.component}
+                      </SortablePanel>
+                    ))}
+                  </div>
+                </SortableContext>
+              </DndContext>
+            ) : (
+              <div className="grid grid-cols-2 gap-1">
+                {topPanels.map((panel) => (
+                  <div key={panel.id} className={panel.className}>
+                    {panel.component}
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
 
-          {/* 두번쨰 열 */}
-          <div className="col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2 h-250 !p-0">
-            {/* 수계별 유입ㆍ방류수질 분석 */}
-            <FoWqltInflEffl />
+          {/* 우측: 고정된 지도와 사용자 정보 (화면의 50%) */}
+          <div className="flex w-full gap-1 lg:w-1/2">
+            {/* 지도영역 - 고정 (드래그 불가) */}
+            <div className="flex-1">
+              <KoreaBasinMap />
+            </div>
 
-            {/* 노후하수관로현황 */}
-            <SnOldPpl />
-
-            {/* 물재이용 현황 (재이용량, m³) */}
-            <ReuseStatus />
-          </div>
-
-          {/* 지도영역 */}
-          <div className="col-span-1 md:col-span-2 lg:col-span-1 xl:col-span-3">
-            <KoreaBasinMap />
-          </div>
-
-          {/* 사용자 정보 카드 */}
-          <div className="col-span-1 md:col-span-2 lg:col-span-1 xl:col-span-1 !p-0">
-            {error && <div className="mb-4 text-red-500">{error}</div>}
-            {userInfo ? (
-            <div className="card card_border login_info_box" style={{ minHeight: "150px", height: "auto" }}>
-              <div className="login_header" style={{ paddingLeft: "10px", paddingRight: "10px" }}>
-                <div className="login_avatar">
-                  <Image 
-                    src="/images/icon_loginID.png" 
-                    alt="프로필" 
-                    width={40}
-                    height={40}
-                    onError={(e) => {
-                      const target = e.target as HTMLImageElement;
-                      target.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23e1e5e9'/%3E%3Ctext x='20' y='26' font-size='20' text-anchor='middle' fill='%23999'%3E%3F%3C/text%3E%3C/svg%3E";
-                    }} 
-                  />
-                </div>
-                <div className="login_user_info">
-                  <div className="user_name">{userInfo.userName || "-"}</div>
-                  <div className="user_status">온라인</div>
-                  <div className="user_status text-xs sm:text-sm">
-                    <b>2FA 활성화:</b>{" "}
-                    {userInfo.twoFactorEnabled ? "예" : "아니오"}
+            {/* 사용자 정보 카드 - 고정 (드래그 불가) */}
+            <div className="flex w-full flex-col gap-1 !p-0 lg:w-[300px]">
+              {error && <div className="mb-4 text-red-500">{error}</div>}
+              {userInfo ? (
+                <div
+                  className="card card_border login_info_box"
+                  style={{ minHeight: "150px", height: "auto" }}
+                >
+                  <div
+                    className="login_header"
+                    style={{ paddingLeft: "10px", paddingRight: "10px" }}
+                  >
+                    <div className="login_avatar">
+                      <Image
+                        src="/images/icon_loginID.png"
+                        alt="프로필"
+                        width={40}
+                        height={40}
+                        onError={(e) => {
+                          const target = e.target as HTMLImageElement;
+                          target.src =
+                            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23e1e5e9'/%3E%3Ctext x='20' y='26' font-size='20' text-anchor='middle' fill='%23999'%3E%3F%3C/text%3E%3C/svg%3E";
+                        }}
+                      />
+                    </div>
+                    <div className="login_user_info">
+                      <div className="user_name">
+                        {userInfo.userName || "-"}
+                      </div>
+                      <div className="user_status">온라인</div>
+                      <div className="user_status text-xs sm:text-sm">
+                        <b>2FA 활성화:</b>{" "}
+                        {userInfo.twoFactorEnabled ? "예" : "아니오"}
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="login_actions"
+                    style={{ paddingLeft: "10px", paddingRight: "10px" }}
+                  >
+                    <button
+                      className="login_btn text-xs sm:text-sm"
+                      onClick={handleLogout}
+                    >
+                      로그아웃
+                    </button>
+                    <button
+                      className="signup_btn text-xs sm:text-sm"
+                      onClick={handleChangePassword}
+                    >
+                      마이페이지
+                    </button>
                   </div>
                 </div>
-              </div>
-                <div className="login_actions" style={{ paddingLeft: "10px", paddingRight: "10px" }}>
-                  <button className="login_btn text-xs sm:text-sm" onClick={handleLogout}>로그아웃</button>
-                  <button className="signup_btn text-xs sm:text-sm" onClick={handleChangePassword}>마이페이지</button>
-              </div>
+              ) : (
+                !error && <div>사용자 정보를 불러오는 중...</div>
+              )}
+
+              <ScheduleList />
+
+              <MyPostList />
             </div>
-            ) : (
-              !error && <div>사용자 정보를 불러오는 중...</div>
-            )}
-            
-            <ScheduleList />
-            
-            <MyPostList />
-          </div>          
-        </div>
-
-        {/* 두번째 라인 */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-1">
-          <div className="card card-border" style={{ height: "250px" }}>
-            <SupportList />
-          </div>
-          <div className="card card-border" style={{ height: "250px" }}>
-            <DataStatusList />
-          </div>
-          <div className="card card-border" style={{ height: "250px" }}>
-            <NoticeList />
-          </div>
-
-          {/* 배너 영역 */}
-          <div className="card card-border" style={{ height: "250px" }}>
-            <BannerList />
           </div>
         </div>
+
+        {/* 두번째 라인 - 드래그 가능한 4개 패널 */}
+        {isMounted ? (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleBottomDragEnd}
+          >
+            <SortableContext
+              items={bottomPanels.map((p) => p.id)}
+              strategy={rectSortingStrategy}
+            >
+              <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-4">
+                {bottomPanels.map((panel) => (
+                  <SortablePanel
+                    key={panel.id}
+                    id={panel.id}
+                    className="card card-border"
+                  >
+                    <div style={{ height: "250px" }}>{panel.component}</div>
+                  </SortablePanel>
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        ) : (
+          <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-4">
+            {bottomPanels.map((panel) => (
+              <div key={panel.id} className="card card-border">
+                <div style={{ height: "250px" }}>{panel.component}</div>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/apps/cm/src/pages/dashboard/ui/datastatus-list.tsx b/apps/cm/src/pages/dashboard/ui/datastatus-list.tsx
index bae89e338..74e10afea 100644
--- a/apps/cm/src/pages/dashboard/ui/datastatus-list.tsx
+++ b/apps/cm/src/pages/dashboard/ui/datastatus-list.tsx
@@ -5,6 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import { ENDPOINT } from "@/shared/config";
 import { getDataStatusList, type DataStatus } from "../api/datastatus-service";
 import type { PageableList } from "@/shared/model";
+import { useDragHandle } from "./sortable-panel";
 
 import {
   Carousel,
@@ -35,6 +36,7 @@ const getRegionInfo = (regionName: string) => {
 };
 
 const DataStatusList: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const plugin = useRef(
     Autoplay({ delay: 3000, stopOnInteraction: true })
   );
@@ -106,7 +108,11 @@ const DataStatusList: React.FC = () => {
 
   return (
     <>
-      <div className="card_title bottomline">
+      <div 
+        className={`card_title bottomline cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <div className="leftArea">
           <h4>자료현황</h4>
         </div>
diff --git a/apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx b/apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx
index 2a0264e43..5db22db6e 100644
--- a/apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx
+++ b/apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx
@@ -9,8 +9,10 @@ import { Doughnut } from "react-chartjs-2";
 import type { Chart as ChartJS } from "chart.js";
 // import type { mapOperFcltItem, mapBasinData } from "../model/fo-interface";
 import { OperationApi, operFcltStore, basinStore } from "../api/fo-service";
+import { useDragHandle } from "./sortable-panel";
 
 const FoFcltCntRt: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const [year, setYear] = useState<string | null>(null);
   const { selectedBasin, setSelectedBasin } = useStore(basinStore);
   const operFcltStatus = useStore(operFcltStore, (state) => state.operFcltStatus);
@@ -57,9 +59,18 @@ const FoFcltCntRt: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">수계별 시설운영 개소수 및 가동률</h3>
-        <BasinSelect selectedBasin={selectedBasin} onValueChange={onBasinChange} />
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <BasinSelect selectedBasin={selectedBasin} onValueChange={onBasinChange} />
+        </div>
       </div>
       <div className="h-70 p-4">
         <div className="flex gap-2 h-full">
diff --git a/apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx b/apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx
index 4c01fbdd0..6b416c5ed 100644
--- a/apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx
+++ b/apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx
@@ -14,6 +14,7 @@ import {
 import type { OperWqltContent } from "../model/fo-interface";
 import { OperationApi, basinStore } from "../api/fo-service";
 import { defaultInitOperWqltState } from "../api/fo-service";
+import { useDragHandle } from "./sortable-panel";
 
 // Chart.js 등록
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
@@ -21,6 +22,7 @@ ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, T
 type WaterQualityType = 'BOD' | 'TOC' | 'SS' | 'TP' | 'TN';
 
 const FoWqltInflEffl: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const { selectedBasin, setSelectedBasin } = useStore(basinStore);
   const [selectedTab, setSelectedTab] = useState<WaterQualityType>('BOD');  
   const [wqltData, setWqltData] = useState<OperWqltContent[]>([]);
@@ -195,9 +197,18 @@ const FoWqltInflEffl: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">수계별 유입ㆍ방류수질 분석</h3>
-        <BasinSelect  selectedBasin={selectedBasin} onValueChange={onBasinChange}  />
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <BasinSelect  selectedBasin={selectedBasin} onValueChange={onBasinChange}  />
+        </div>
       </div>
       <div className="h-70 p-0 flex items-center justify-center">
         <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
diff --git a/apps/cm/src/pages/dashboard/ui/notice-list.tsx b/apps/cm/src/pages/dashboard/ui/notice-list.tsx
index 502973225..73b2788df 100644
--- a/apps/cm/src/pages/dashboard/ui/notice-list.tsx
+++ b/apps/cm/src/pages/dashboard/ui/notice-list.tsx
@@ -10,9 +10,11 @@ import {
   noticePostTableColumns,
 } from "../model/table-columns";
 import { Button } from "@common/components";
+import { useDragHandle } from "./sortable-panel";
 
 
 const NoticeList: React.FC = () => {
+    const { dragHandleProps, isDragging } = useDragHandle();
     const router = useRouter();
     const noticePostQuery = useQuery({
         queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
@@ -51,9 +53,18 @@ const NoticeList: React.FC = () => {
 
   return (
     <div className="card card-border !p-0"  style={{ height: "220px" }}>
-      <div className="card-header !m-0 !border-none text-foreground">
+      <div 
+        className={`card-header !m-0 !border-none text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">공지사항</h3>
-        <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       {noticePostTableComponent}
     </div>
diff --git a/apps/cm/src/pages/dashboard/ui/reuse-chart.tsx b/apps/cm/src/pages/dashboard/ui/reuse-chart.tsx
index edcc19b97..55d9e6abb 100644
--- a/apps/cm/src/pages/dashboard/ui/reuse-chart.tsx
+++ b/apps/cm/src/pages/dashboard/ui/reuse-chart.tsx
@@ -8,6 +8,7 @@ import { Line } from 'react-chartjs-2';
 import { Button } from "@common/components";
 import type { ReuseStatusContent } from "../model/fo-interface";
 import { OperationApi, reuseStore } from "../api/fo-service";
+import { useDragHandle } from "./sortable-panel";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -36,6 +37,7 @@ ChartJS.register(
 
 
 const ReuseChart: React.FC = () => {  
+  const { dragHandleProps, isDragging } = useDragHandle();
   const [activeIndex, setActiveIndex] = useState(0);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const reuseStatusData = useStore(
@@ -183,9 +185,18 @@ const ReuseChart: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">{chartItems[activeIndex]?.title}</h3>
-        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       <div className="relative" style={{ maxWidth: 400, height: 180, marginLeft: 20 }}>
         <div className="h-full">
diff --git a/apps/cm/src/pages/dashboard/ui/reuse-status.tsx b/apps/cm/src/pages/dashboard/ui/reuse-status.tsx
index d1e7c4c15..6c596eba9 100644
--- a/apps/cm/src/pages/dashboard/ui/reuse-status.tsx
+++ b/apps/cm/src/pages/dashboard/ui/reuse-status.tsx
@@ -7,8 +7,10 @@ import { useStore } from "zustand";
 import { Button } from "@common/components";
 import type { ReuseStatusContent } from "../model/fo-interface";
 import { OperationApi, reuseStore} from "../api/fo-service";
+import { useDragHandle } from "./sortable-panel";
 
 const ReuseStatus: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   // const [reuseStatusData, setReuseStatusData] = useState<ReuseStatusContent[]>([]);
   const reuseStatusData = useStore(
     reuseStore,
@@ -32,9 +34,18 @@ const ReuseStatus: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">물재이용 현황 (재이용량, m³)</h3>
-        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       <div className="h-70 p-4">
         <div className="w-full h-full flex items-center justify-center">
diff --git a/apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx b/apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx
index b1a34139c..fa502e7c5 100644
--- a/apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx
+++ b/apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx
@@ -17,12 +17,14 @@ import { Bar } from "react-chartjs-2";
 import { Button } from "@common/components";
 import type { PplLengthContent, ChartDataSet, OldPplChartData } from "../model/sn-interface";
 import { SewerageApi, useOldPplStore,useMapOldPplStore, transformChartDataToMapData } from "../api/sn-service";
+import { useDragHandle } from "./sortable-panel";
 
 
 // ChartJS 컴포넌트 등록
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 export default function SnOldPpl() {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const [oldPplLenData, setOldPplLenData] = useState<PplLengthContent[]>([]);
   const {chartData, setChartData}  = useOldPplStore();
   const {setMapData}  = useMapOldPplStore();
@@ -170,9 +172,18 @@ export default function SnOldPpl() {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">노후 하수관로 현황</h3>
-        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       <div className="h-70 p-0 flex items-center justify-center">
         <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
diff --git a/apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx b/apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx
index 014f592c4..022430da0 100644
--- a/apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx
+++ b/apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx
@@ -17,6 +17,7 @@ import { Bar } from "react-chartjs-2";
 import { Button } from "@common/components";
 import type { PplLengthContent } from "../model/sn-interface";
 import { SewerageApi,useUsePplStore } from "../api/sn-service";
+import { useDragHandle } from "./sortable-panel";
 
 interface ChartDataSet {
   label: string;
@@ -29,6 +30,7 @@ interface ChartDataSet {
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 export default function SnPplStatus() {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const {chartData, setChartData}  = useUsePplStore();
   const [usgPplLenData, setUsgPplLenData]  = useState<PplLengthContent[]>([]);
   
@@ -157,10 +159,18 @@ export default function SnPplStatus() {
   };
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">오수관로 및 우수관로 현황</h3>
-        
-        <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       <div className="h-60 p-4">
         <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
diff --git a/apps/cm/src/pages/dashboard/ui/sortable-panel.tsx b/apps/cm/src/pages/dashboard/ui/sortable-panel.tsx
new file mode 100644
index 000000000..1fb891980
--- /dev/null
+++ b/apps/cm/src/pages/dashboard/ui/sortable-panel.tsx
@@ -0,0 +1,64 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { createContext, useContext } from "react";
+
+interface SortablePanelProps {
+  id: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface DragHandleContextValue {
+  dragHandleProps: React.HTMLAttributes<HTMLElement>;
+  isDragging: boolean;
+}
+
+const DragHandleContext = createContext<DragHandleContextValue | null>(null);
+
+export function SortablePanel({ id, children, className }: SortablePanelProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const contextValue: DragHandleContextValue = {
+    dragHandleProps: { ...attributes, ...listeners },
+    isDragging,
+  };
+
+  return (
+    <DragHandleContext.Provider value={contextValue}>
+      <div
+        ref={setNodeRef}
+        style={style}
+        className={className}
+      >
+        {children}
+      </div>
+    </DragHandleContext.Provider>
+  );
+}
+
+export function useDragHandle() {
+  const context = useContext(DragHandleContext);
+  
+  // Context가 없을 때 (서버 렌더링 또는 isMounted = false) 기본값 반환
+  if (!context) {
+    return {
+      dragHandleProps: {},
+      isDragging: false,
+    };
+  }
+  
+  return context;
+}
diff --git a/apps/cm/src/pages/dashboard/ui/support-list.tsx b/apps/cm/src/pages/dashboard/ui/support-list.tsx
index f62cce9b1..f37dad7eb 100644
--- a/apps/cm/src/pages/dashboard/ui/support-list.tsx
+++ b/apps/cm/src/pages/dashboard/ui/support-list.tsx
@@ -7,8 +7,10 @@ import { useDataTable } from "@/shared/lib";
 import type { PageableList } from "@/shared/model";
 import { supportTableColumns } from "../model/support-columns";
 import { getSupportList, type Support } from "../api/support-service";
+import { useDragHandle } from "./sortable-panel";
 
 const SupportList: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const supportQuery = useQuery<PageableList<Support>>({
     queryKey: [ENDPOINT.IC_SERVICE.GROUPING_STATISTICS],
     queryFn: async () => {
@@ -29,7 +31,11 @@ const SupportList: React.FC = () => {
 
   return (
     <div className="card card-border !p-0" style={{ height: "220px" }}>
-      <div className="card-header !m-0 !border-none text-foreground">
+      <div 
+        className={`card-header !m-0 !border-none text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">지원현황</h3>
       </div>
       {supportTableComponent}
diff --git a/apps/cm/src/pages/users/ui/users-form.tsx b/apps/cm/src/pages/users/ui/users-form.tsx
index 7920ce758..a8a5a86f3 100644
--- a/apps/cm/src/pages/users/ui/users-form.tsx
+++ b/apps/cm/src/pages/users/ui/users-form.tsx
@@ -102,35 +102,35 @@ function UsersForm<T extends UserSaveData | UserUpdateData>({
       return (
         authSeCd?.filter(
           (code) =>
-            code.lwpoCd === "ROLE_USER1" ||
-            code.lwpoCd === "ROLE_USER2" ||
-            code.lwpoCd === "ROLE_USER3",
+            code.lwpoCd === "ROLE_USER01" ||
+            code.lwpoCd === "ROLE_USER02" ||
+            code.lwpoCd === "ROLE_USER03",
         ) ?? []
       );
     if (watchOgdpSeCd === "3" || watchOgdpSeCd === "4")
       return (
         authSeCd?.filter(
           (code) =>
-            code.lwpoCd === "ROLE_USER4" || code.lwpoCd === "ROLE_USER5",
+            code.lwpoCd === "ROLE_USER04" || code.lwpoCd === "ROLE_USER05",
         ) ?? []
       );
     return [];
   }, [authSeCd, watchOgdpSeCd]);
 
   const laeSeCdSelectData = useMemo(() => {
-    if (watchDtlInstCd === "ROLE_USER1")
+    if (watchDtlInstCd === "ROLE_USER01") 
       return laeSeCd?.filter((code) => code.lwpoCd === "G102") ?? [];
-    if (watchDtlInstCd === "ROLE_USER2")
+    if (watchDtlInstCd === "ROLE_USER02")
       return laeSeCd?.filter((code) => code.lwpoCd === "G101") ?? [];
-    if (watchDtlInstCd === "ROLE_USER3")
+    if (watchDtlInstCd === "ROLE_USER03")
       return laeSeCd?.filter((code) => code.lwpoCd.startsWith("G2")) ?? [];
-    if (watchDtlInstCd === "ROLE_USER4")
+    if (watchDtlInstCd === "ROLE_USER04")
       return (
         laeSeCd?.filter(
           (code) => code.lwpoCd.startsWith("G3") && code.lwpoCd.length === 4,
         ) ?? []
       );
-    if (watchDtlInstCd === "ROLE_USER5")
+    if (watchDtlInstCd === "ROLE_USER05")
       return (
         laeSeCd?.filter(
           (code) => code.lwpoCd.startsWith("G3") && code.lwpoCd.length === 7,
@@ -622,8 +622,9 @@ function UsersForm<T extends UserSaveData | UserUpdateData>({
                           onValueChange={field.onChange}
                           disabled={
                             !(
-                              watchDtlInstCd === "ROLE_USER4" ||
-                              watchDtlInstCd === "ROLE_USER5"
+                              watchDtlInstCd === "ROLE_USER03" ||
+                              watchDtlInstCd === "ROLE_USER04" ||
+                              watchDtlInstCd === "ROLE_USER05"
                             )
                           }
                         >
diff --git a/apps/cm/src/pages/users/ui/users-page.tsx b/apps/cm/src/pages/users/ui/users-page.tsx
index 5362b8b42..5670eb9d3 100644
--- a/apps/cm/src/pages/users/ui/users-page.tsx
+++ b/apps/cm/src/pages/users/ui/users-page.tsx
@@ -102,7 +102,7 @@ function UsersPage() {
     },
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,
diff --git a/apps/common/features/package.json b/apps/common/features/package.json
index 14a96b6f8..6c87b8f74 100644
--- a/apps/common/features/package.json
+++ b/apps/common/features/package.json
@@ -28,7 +28,7 @@
     "chart.js": "^4.4.8",
     "dayjs": "^1.11.13",
     "js-cookie": "^3.0.5",
-    "next": "15.3.8",
+    "next": "15.5.18",
     "next-themes": "^0.4.6",
     "react-chartjs-2": "^5.3.0",
     "react-dnd": "^16.0.1",
@@ -46,7 +46,7 @@
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
-    "eslint-config-next": "15.1.7",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
diff --git a/apps/common/features/src/pages/(post)/faq/ui/faq-page.tsx b/apps/common/features/src/pages/(post)/faq/ui/faq-page.tsx
index 6255bb27a..6fb5dc96c 100644
--- a/apps/common/features/src/pages/(post)/faq/ui/faq-page.tsx
+++ b/apps/common/features/src/pages/(post)/faq/ui/faq-page.tsx
@@ -83,7 +83,7 @@ function FaqPage({ bbsId }: { bbsId: string }) {
     }
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     refetch();
   };
diff --git a/apps/common/features/src/pages/auth/login/ui/login-page.tsx b/apps/common/features/src/pages/auth/login/ui/login-page.tsx
index 4700a691b..95945c8ed 100644
--- a/apps/common/features/src/pages/auth/login/ui/login-page.tsx
+++ b/apps/common/features/src/pages/auth/login/ui/login-page.tsx
@@ -6,7 +6,7 @@ import { LoginApi } from "@/entities/auth";
 import "./login.css";
 
 function LoginPage() {
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     const formData = new FormData(e.target as HTMLFormElement);
diff --git a/apps/common/features/src/pages/search/ui/search-page.tsx b/apps/common/features/src/pages/search/ui/search-page.tsx
index dd1aec0b2..8324803d7 100644
--- a/apps/common/features/src/pages/search/ui/search-page.tsx
+++ b/apps/common/features/src/pages/search/ui/search-page.tsx
@@ -33,7 +33,7 @@ function SearchPage() {
     queryFn: () => SearchApi.searchPost({ keyword: keyword, siteId }),
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
     setKeyword(formData.get("keyword") as string);
@@ -84,7 +84,8 @@ function SearchPage() {
               <TabsList className="mx-auto">
                 <TabsTrigger value="all">
                   전체 (
-                  { (data?.contsList?.length ?? 0) + (data?.boardList?.totalElements ?? 0)}
+                  {(data?.contsList?.length ?? 0) +
+                    (data?.boardList?.totalElements ?? 0)}
                   건)
                 </TabsTrigger>
                 <TabsTrigger value="contents">
diff --git a/apps/common/features/src/widgets/post/ui/post-page.tsx b/apps/common/features/src/widgets/post/ui/post-page.tsx
index 7aaa390fc..922a0e910 100644
--- a/apps/common/features/src/widgets/post/ui/post-page.tsx
+++ b/apps/common/features/src/widgets/post/ui/post-page.tsx
@@ -134,7 +134,7 @@ function PostPage({ bbsId }: { bbsId: string }) {
     }
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,
diff --git a/apps/cs/.env.example b/apps/cs/.env.example
index 9f786831b..19231af8a 100644
--- a/apps/cs/.env.example
+++ b/apps/cs/.env.example
@@ -1,7 +1,8 @@
 # apps/cs/src/shared/config/env.ts 참고
 NEXT_PUBLIC_PORT=3000
 NEXT_PUBLIC_PROXY_HOST=http://localhost:3000
+SERVER_API_URL=http://192.168.0.102:8000
 NEXT_PUBLIC_SITE_ID=CS
 NEXT_PUBLIC_SUB_DOMAIN=http://localhost:3000
-NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000
-NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2
\ No newline at end of file
+NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2
+NEXT_PUBLIC_TINY_BASE_URL=
\ No newline at end of file
diff --git a/apps/cs/app/(auth)/auth/login/page.tsx b/apps/cs/app/(auth)/auth/login/page.tsx
new file mode 100644
index 000000000..8f9e6adc6
--- /dev/null
+++ b/apps/cs/app/(auth)/auth/login/page.tsx
@@ -0,0 +1,2 @@
+import { LoginPage } from "@/pages/auth/login";
+export default LoginPage;
diff --git a/apps/cs/app/(auth)/layout.tsx b/apps/cs/app/(auth)/layout.tsx
new file mode 100644
index 000000000..33651c590
--- /dev/null
+++ b/apps/cs/app/(auth)/layout.tsx
@@ -0,0 +1,17 @@
+import "@/app/styles/base.css";
+
+export const metadata = {
+    title: "유역하수도 통합 정보플랫폼",
+};
+
+export default function AuthLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="ko">
+            <body>{children}</body>
+        </html>
+    );
+}
diff --git a/apps/cs/app/(with-base-layout)/admin/page.tsx b/apps/cs/app/(main)/(with-base-layout)/admin/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/admin/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/admin/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/apilog/page.tsx b/apps/cs/app/(main)/(with-base-layout)/apilog/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/apilog/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/apilog/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/banner/page.tsx b/apps/cs/app/(main)/(with-base-layout)/banner/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/banner/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/banner/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/banner/register/[sequential]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/banner/register/[sequential]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/banner/register/[sequential]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/banner/register/[sequential]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/banner/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/banner/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/banner/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/banner/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsfaq/[bbsId]/[pstNo]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsfaq/[bbsId]/[pstNo]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsfaq/[bbsId]/[pstNo]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsfaq/[bbsId]/[pstNo]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsfaq/[bbsId]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsfaq/[bbsId]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsfaq/[bbsId]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsfaq/[bbsId]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsfaq/[bbsId]/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsfaq/[bbsId]/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsfaq/[bbsId]/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsfaq/[bbsId]/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/[pstNo]/modify/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/[pstNo]/modify/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/[pstNo]/modify/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/[pstNo]/modify/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/[pstNo]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/[pstNo]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/[pstNo]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/[pstNo]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsimage/[bbsId]/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/[pstNo]/modify/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/[pstNo]/modify/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/[pstNo]/modify/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/[pstNo]/modify/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/[pstNo]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/[pstNo]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/[pstNo]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/[pstNo]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsmovie/[bbsId]/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/[pstNo]/answer/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/[pstNo]/answer/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/[pstNo]/answer/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/[pstNo]/answer/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/[pstNo]/modify/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/[pstNo]/modify/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/[pstNo]/modify/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/[pstNo]/modify/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/[pstNo]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/[pstNo]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/[pstNo]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/[pstNo]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnormal/[bbsId]/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/[pstNo]/modify/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/[pstNo]/modify/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/[pstNo]/modify/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/[pstNo]/modify/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/[pstNo]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/[pstNo]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/[pstNo]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/[pstNo]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/(post)/bbsnotice/[bbsId]/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/register/[id]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/register/[id]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/register/[id]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/register/[id]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/bbs/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/bbs/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/bbs/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/bbs/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/board-statistics/page.tsx b/apps/cs/app/(main)/(with-base-layout)/board-statistics/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/board-statistics/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/board-statistics/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/code/page.tsx b/apps/cs/app/(main)/(with-base-layout)/code/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/code/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/code/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/contents/page.tsx b/apps/cs/app/(main)/(with-base-layout)/contents/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/contents/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/contents/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/contents/register/[sequential]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/contents/register/[sequential]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/contents/register/[sequential]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/contents/register/[sequential]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/contents/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/contents/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/contents/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/contents/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/dashboard/page.tsx b/apps/cs/app/(main)/(with-base-layout)/dashboard/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/dashboard/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/dashboard/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/file/page.tsx b/apps/cs/app/(main)/(with-base-layout)/file/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/file/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/file/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/groups/page.tsx b/apps/cs/app/(main)/(with-base-layout)/groups/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/groups/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/groups/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/image/page.tsx b/apps/cs/app/(main)/(with-base-layout)/image/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/image/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/image/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/image/register/[sequential]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/image/register/[sequential]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/image/register/[sequential]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/image/register/[sequential]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/image/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/image/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/image/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/image/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/layout.tsx b/apps/cs/app/(main)/(with-base-layout)/layout.tsx
similarity index 91%
rename from apps/cs/app/(with-base-layout)/layout.tsx
rename to apps/cs/app/(main)/(with-base-layout)/layout.tsx
index 3c1a527d7..acc583e2e 100644
--- a/apps/cs/app/(with-base-layout)/layout.tsx
+++ b/apps/cs/app/(main)/(with-base-layout)/layout.tsx
@@ -6,6 +6,7 @@ import { BaseLayout } from "@common/components";
 import type { MenuItem } from "@/entities/menu";
 import { useMenuStore } from "@/shared/lib";
 import { PageLayout } from "@/shared/ui/page-layout";
+import { tokenManager } from "@/entities/auth";
 
 export default function WithBaseLayout({
   children,
@@ -26,6 +27,7 @@ export default function WithBaseLayout({
   return (
     <BaseLayout
       queryClient={queryClient}
+      tokenManager={tokenManager}
       currentPath={pathname ?? ""}
       handleMenuClick={handleMenuClick}
     >
diff --git a/apps/cs/app/(with-base-layout)/link/page.tsx b/apps/cs/app/(main)/(with-base-layout)/link/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/link/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/link/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/link/register/[id]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/link/register/[id]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/link/register/[id]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/link/register/[id]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/link/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/link/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/link/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/link/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/linkLog/page.tsx b/apps/cs/app/(main)/(with-base-layout)/linkLog/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/linkLog/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/linkLog/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/linkParams/page.tsx b/apps/cs/app/(main)/(with-base-layout)/linkParams/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/linkParams/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/linkParams/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/linkStats/page.tsx b/apps/cs/app/(main)/(with-base-layout)/linkStats/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/linkStats/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/linkStats/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/linkTable/page.tsx b/apps/cs/app/(main)/(with-base-layout)/linkTable/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/linkTable/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/linkTable/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/loading.tsx b/apps/cs/app/(main)/(with-base-layout)/loading.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/loading.tsx
rename to apps/cs/app/(main)/(with-base-layout)/loading.tsx
diff --git a/apps/cs/app/(with-base-layout)/loginlog/page.tsx b/apps/cs/app/(main)/(with-base-layout)/loginlog/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/loginlog/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/loginlog/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/menu/page.tsx b/apps/cs/app/(main)/(with-base-layout)/menu/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/menu/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/menu/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/module/page.tsx b/apps/cs/app/(main)/(with-base-layout)/module/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/module/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/module/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/module/register/[sequential]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/module/register/[sequential]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/module/register/[sequential]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/module/register/[sequential]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/module/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/module/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/module/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/module/register/page.tsx
diff --git a/apps/cs/app/(main)/(with-base-layout)/ntftalk-history/page.tsx b/apps/cs/app/(main)/(with-base-layout)/ntftalk-history/page.tsx
new file mode 100644
index 000000000..3e2afeb35
--- /dev/null
+++ b/apps/cs/app/(main)/(with-base-layout)/ntftalk-history/page.tsx
@@ -0,0 +1,3 @@
+import { NtftalkHistoryPage } from "@/pages/ntftalk-history";
+
+export default NtftalkHistoryPage;
diff --git a/apps/cs/app/(main)/(with-base-layout)/ntftalk-temp/page.tsx b/apps/cs/app/(main)/(with-base-layout)/ntftalk-temp/page.tsx
new file mode 100644
index 000000000..04ff3524a
--- /dev/null
+++ b/apps/cs/app/(main)/(with-base-layout)/ntftalk-temp/page.tsx
@@ -0,0 +1,3 @@
+import { NtftalkTempPage } from "@/pages/ntftalk-temp";
+
+export default NtftalkTempPage;
diff --git a/apps/cs/app/(with-base-layout)/organization/page.tsx b/apps/cs/app/(main)/(with-base-layout)/organization/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/organization/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/organization/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/popup/page.tsx b/apps/cs/app/(main)/(with-base-layout)/popup/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/popup/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/popup/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/popup/register/[popupSn]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/popup/register/[popupSn]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/popup/register/[popupSn]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/popup/register/[popupSn]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/popup/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/popup/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/popup/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/popup/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/privacylog/page.tsx b/apps/cs/app/(main)/(with-base-layout)/privacylog/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/privacylog/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/privacylog/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/recent/page.tsx b/apps/cs/app/(main)/(with-base-layout)/recent/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/recent/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/recent/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/role/page.tsx b/apps/cs/app/(main)/(with-base-layout)/role/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/role/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/role/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/role/register/[roleId]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/role/register/[roleId]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/role/register/[roleId]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/role/register/[roleId]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/role/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/role/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/role/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/role/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/schedule/page.tsx b/apps/cs/app/(main)/(with-base-layout)/schedule/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/schedule/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/schedule/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/schedule/register/[schdlSn]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/schedule/register/[schdlSn]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/schedule/register/[schdlSn]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/schedule/register/[schdlSn]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/schedule/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/schedule/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/schedule/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/schedule/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/site/page.tsx b/apps/cs/app/(main)/(with-base-layout)/site/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/site/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/site/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/site/register/[id]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/site/register/[id]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/site/register/[id]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/site/register/[id]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/site/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/site/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/site/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/site/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/survey/[srvySn]/modify/page.tsx b/apps/cs/app/(main)/(with-base-layout)/survey/[srvySn]/modify/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/survey/[srvySn]/modify/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/survey/[srvySn]/modify/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/survey/[srvySn]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/survey/[srvySn]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/survey/[srvySn]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/survey/[srvySn]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/survey/page.tsx b/apps/cs/app/(main)/(with-base-layout)/survey/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/survey/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/survey/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/survey/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/survey/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/survey/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/survey/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/template/page.tsx b/apps/cs/app/(main)/(with-base-layout)/template/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/template/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/template/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/template/register/[sequential]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/template/register/[sequential]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/template/register/[sequential]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/template/register/[sequential]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/template/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/template/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/template/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/template/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/terms/page.tsx b/apps/cs/app/(main)/(with-base-layout)/terms/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/terms/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/terms/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/terms/register/[sequential]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/terms/register/[sequential]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/terms/register/[sequential]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/terms/register/[sequential]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/terms/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/terms/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/terms/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/terms/register/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/user-statistics/page.tsx b/apps/cs/app/(main)/(with-base-layout)/user-statistics/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/user-statistics/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/user-statistics/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/users/[userUnqId]/modify/page.tsx b/apps/cs/app/(main)/(with-base-layout)/users/[userUnqId]/modify/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/users/[userUnqId]/modify/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/users/[userUnqId]/modify/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/users/[userUnqId]/page.tsx b/apps/cs/app/(main)/(with-base-layout)/users/[userUnqId]/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/users/[userUnqId]/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/users/[userUnqId]/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/users/page.tsx b/apps/cs/app/(main)/(with-base-layout)/users/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/users/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/users/page.tsx
diff --git a/apps/cs/app/(with-base-layout)/users/register/page.tsx b/apps/cs/app/(main)/(with-base-layout)/users/register/page.tsx
similarity index 100%
rename from apps/cs/app/(with-base-layout)/users/register/page.tsx
rename to apps/cs/app/(main)/(with-base-layout)/users/register/page.tsx
diff --git a/apps/cs/app/(without-base-layout)/view/popup/[popupSn]/page.tsx b/apps/cs/app/(main)/(without-base-layout)/view/popup/[popupSn]/page.tsx
similarity index 100%
rename from apps/cs/app/(without-base-layout)/view/popup/[popupSn]/page.tsx
rename to apps/cs/app/(main)/(without-base-layout)/view/popup/[popupSn]/page.tsx
diff --git a/apps/cs/app/(without-base-layout)/view/survey-article/[srvySn]/page.tsx b/apps/cs/app/(main)/(without-base-layout)/view/survey-article/[srvySn]/page.tsx
similarity index 100%
rename from apps/cs/app/(without-base-layout)/view/survey-article/[srvySn]/page.tsx
rename to apps/cs/app/(main)/(without-base-layout)/view/survey-article/[srvySn]/page.tsx
diff --git a/apps/cs/app/(without-base-layout)/view/survey-result/[srvySn]/page.tsx b/apps/cs/app/(main)/(without-base-layout)/view/survey-result/[srvySn]/page.tsx
similarity index 100%
rename from apps/cs/app/(without-base-layout)/view/survey-result/[srvySn]/page.tsx
rename to apps/cs/app/(main)/(without-base-layout)/view/survey-result/[srvySn]/page.tsx
diff --git a/apps/cs/app/layout.tsx b/apps/cs/app/(main)/layout.tsx
similarity index 99%
rename from apps/cs/app/layout.tsx
rename to apps/cs/app/(main)/layout.tsx
index aa2049dcc..d0810e7fe 100644
--- a/apps/cs/app/layout.tsx
+++ b/apps/cs/app/(main)/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+
 import { App } from "@/app";
 
 export const metadata: Metadata = {
diff --git a/apps/cs/app/api/proxy/[...url]/route.ts b/apps/cs/app/api/proxy/[...url]/route.ts
index abd3ae007..0929ca57c 100644
--- a/apps/cs/app/api/proxy/[...url]/route.ts
+++ b/apps/cs/app/api/proxy/[...url]/route.ts
@@ -2,6 +2,7 @@ import {
   ACCESS_TOKEN,
   AUTH_USER_ID,
   CLAIM_NAME,
+  COOKIE_DOMAIN,
   REFRESH_TOKEN,
   SERVER_API_URL,
   SITE_ID,
@@ -60,18 +61,11 @@ async function handler(
         [AUTH_USER_ID]: userId,
       });
 
-      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;
-
       if (refreshToken) {
-        cookieStore.set(REFRESH_TOKEN, refreshToken, {
+        response.cookies.set(REFRESH_TOKEN, refreshToken, {
           httpOnly: true,
           sameSite: "strict",
-          domain: domain,
+          domain: getCookieDomain(),
           path: "/",
         });
       }
@@ -91,7 +85,6 @@ async function handler(
   }
 }
 
-
 export async function POST(
   request: Request,
   props: { params: Promise<{ url: string[] }> },
@@ -107,3 +100,14 @@ export async function PUT(
   const params = await props.params;
   return handler(request, params, "PUT");
 }
+
+function getCookieDomain(): string | undefined {
+  if (typeof window === "undefined") return undefined;
+
+  if (COOKIE_DOMAIN) return COOKIE_DOMAIN;
+
+  const { hostname } = window.location;
+  if (hostname === "localhost" || hostname === "127.0.0.1") return undefined;
+
+  return hostname;
+}
diff --git a/apps/cs/docs/spec/ntftalk/history/SPEC.md b/apps/cs/docs/spec/ntftalk/history/SPEC.md
new file mode 100644
index 000000000..51740470a
--- /dev/null
+++ b/apps/cs/docs/spec/ntftalk/history/SPEC.md
@@ -0,0 +1,164 @@
+# 화면설계서: 알림톡발송이력관리
+
+## 1. 기본 정보
+
+| 항목       | 내용                                         |
+| ---------- | -------------------------------------------- |
+| 버전       | 1.0                                          |
+| 프로세스명 | UI설계                                       |
+| 화면명     | 알림톡발송이력관리                           |
+| 화면 유형  | [x] 조회 [ ] 입력 [ ] 삭제 [ ] 수정 [ ] 출력 |
+| 메뉴 경로  | home > 시스템관리 > 알림톡발송이력관리       |
+
+---
+
+## 2. 화면 목적
+
+알림톡 발송 이력을 **기간·내용·수신자·결과·시스템** 조건으로 검색하고, **발송 시스템·알림 내용·수신자·수신 시각·성공 여부**를 목록으로 확인한다.
+
+---
+
+## 3. 화면 구성
+
+### 3-1. 전체 레이아웃
+
+```
+┌────────────────────────────────────────────────────────────────────┐
+│  페이지 제목: 알림톡발송이력관리           브레드크럼 (우측 상단)  │
+├────────────────────────────────────────────────────────────────────┤
+│  [영역 A] 검색 필터                                                │
+│   · 조회기간, 알림내용, 사용자, 결과, 시스템                       │
+│   · [조회], [초기화]                                               │
+├────────────────────────────────────────────────────────────────────┤
+│  [영역 B] 알림톡 발송 이력 그리드                                  │
+│   · 순번, 시스템, 알림내용, 수신자, 수신일, 결과                   │
+│   · 페이지네이션                                                   │
+└────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 4. 영역 A: 검색 필터
+
+### 4-1. 필드 정의
+
+| 표시명   | 입력 유형            | 필수 | 기본값        | API 파라미터 매핑                   | 비고                                        |
+| -------- | -------------------- | ---- | ------------- | ----------------------------------- | ------------------------------------------- |
+| 조회기간 | InputDateRangePicker | N    | 1개월 전~오늘 | `dateFrom`, `dateTo` (`yyyy-MM-dd`) | `src/shared/ui/input-date-range-picker.tsx` |
+| 알림내용 | 텍스트               | N    | 공백          | `content`                           |                                             |
+| 사용자   | 텍스트               | N    | 공백          | `recipientNum`                      |                                             |
+| 결과     | 드롭다운             | N    | 전체          | `successYn`                         | `SUCCESS` \| `FAIL` \| `ALL`                |
+| 시스템   | SiteSelect           | N    | 전체          | `system`                            | `src/entities/site/ui/site-select.tsx`      |
+
+### 4-2. 버튼
+
+| 버튼명 | 동작                                                             |
+| ------ | ---------------------------------------------------------------- |
+| 조회   | 현재 필터로 영역 B 목록을 재조회한다. 페이지는 1페이지로 초기화. |
+| 초기화 | 검색 필드를 기본값으로 되돌린다.                                 |
+
+---
+
+## 5. 영역 B: 알림톡 발송 이력 그리드
+
+### 5-1. 그리드 컬럼
+
+| 표시명   | Field          | 비고                                                                      |
+| -------- | -------------- | ------------------------------------------------------------------------- |
+| 순번     | —              | 클라이언트 표시용 인덱스(서버 필드 없음). 페이지네이션 시 오프셋 반영     |
+| 시스템   | `siteSystem`   | 응답 시 `templateCode` 앞 4자 기반 파생(행정지원·하수도통계·포털·기타)    |
+| 알림내용 | `content`      | 긴 텍스트 말줄임 처리. 툴팁 적용하여 전체 텍스트 확인 가능.               |
+| 수신자   | `recipientNum` | 실데이터·마스킹 규칙 **TBD**                                              |
+| 수신일   | `dateRslt`     | `YYYY-MM-DD HH:mm:ss` 형식 표시.                                          |
+| 결과     | `successYn`    | UI 표시: `SUCCESS` → 성공, `FAIL` → 실패(백엔드는 `reportCode` 기반 파생) |
+
+- 행 클릭 UX 없음.
+
+---
+
+## 6. API/DTO 명세
+
+### 6-1. 공통
+
+- 목록 응답: Spring `Page` 직렬화 형태 — 프론트 타입 `PageableList<NtftalkMmtLogHistory>` (`content`, `totalElements`, `totalPages`, `number`, `size` 등).
+- 목록 요청 쿼리: `Pageable` 표준 파라미터 `page`, `size`, `sort` (`PageableParams`).
+
+### 6-2. 알림톡 발송 이력 API
+
+Base: `/ntftalk-service/api/v1/ata/mmt-log-history`
+
+| 기능              | Method | URL                           | Request DTO                                                                                  | Response DTO                                                         | API(클라이언트 함수명)        |
+| ----------------- | ------ | ----------------------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ----------------------------- |
+| 목록 조회(페이징) | GET    | `/ata/mmt-log-history`        | Query: `AtaMmtLogHistorySearchDto` 필드 + `Pageable`(`page`,`size`,`sort`)                   | `Page<AtaMmtLogHistoryResponseDto>` → `NtftalkMmtLogHistoryPageList` | `getNtftalkMmtLogHistoryPage` |
+| 상세 조회         | GET    | `/ata/mmt-log-history/{mtPr}` | Path: `mtPr`                                                                                 | `AtaMmtLogHistoryResponseDto` → `NtftalkMmtLogHistory`               | `getNtftalkMmtLogHistory`     |
+| 등록              | POST   | `/ata/mmt-log-history`        | Body: `AtaMmtLogHistorySaveRequestDto` → `NtftalkMmtLogHistorySavePayload`                   | `AtaMmtLogHistoryResponseDto`                                        | `saveNtftalkMmtLogHistory`    |
+| 수정              | PUT    | `/ata/mmt-log-history/{mtPr}` | Path: `mtPr`, Body: `AtaMmtLogHistoryUpdateRequestDto` → `NtftalkMmtLogHistoryUpdatePayload` | `AtaMmtLogHistoryResponseDto`                                        | `updateNtftalkMmtLogHistory`  |
+| 삭제              | DELETE | `/ata/mmt-log-history/{mtPr}` | Path: `mtPr`                                                                                 | 없음(204)                                                            | `deleteNtftalkMmtLogHistory`  |
+
+#### 검색 Query ↔ TypeScript (`NtftalkMmtLogHistorySearchParams`)
+
+| Query (Java 필드) | TS 필드         | 설명                                 |
+| ----------------- | --------------- | ------------------------------------ |
+| `subject`         | `subject?`      | 메시지 제목                          |
+| `content`         | `content?`      | 전송 메시지 내용                     |
+| `recipientNum`    | `recipientNum?` | 수신자 전화번호                      |
+| `msgStatus`       | `msgStatus?`    | `1` 전송대기, `2` 결과대기, `3` 완료 |
+| `reportCode`      | `reportCode?`   | 전송 결과 코드(`1000`: 성공)         |
+| `dateFrom`        | `dateFrom?`     | `yyyy-MM-dd`                         |
+| `dateTo`          | `dateTo?`       | `yyyy-MM-dd`                         |
+| `system`          | `system?`       | `ADSS` \| `CWMS` \| `PORT` \| `ALL`  |
+| `successYn`       | `successYn?`    | `SUCCESS` \| `FAIL` \| `ALL`         |
+
+#### 응답 행 ↔ TypeScript (`NtftalkMmtLogHistory`)
+
+백엔드 `AtaMmtLogHistoryResponseDto`와 동일 필드명: `mtPr`, `mtRefkey`, `priority`, `dateClientReq`, `subject`, `content`, `callback`, `msgStatus`, `recipientNum`, `dateMtSent`, `dateRslt`, `dateMtReport`, `reportCode`, `countryCode`, `msgType`, `regDate`, `senderKey`, `templateCode`, `siteSystem`, `successYn`.
+
+---
+
+## 7. UI 구현 가이드
+
+### 7-1. 기술 스택·원칙
+
+- **UI**: `@common/components` 공통 컴포넌트
+- **테이블**: `@tanstack/react-table` + `useDataTable`(`src/shared/lib/use-data-table.tsx`)
+- **데이터**: `@tanstack/react-query` — 목록은 `getNtftalkMmtLogHistoryPage`, 무한 스크롤 vs 페이지 UI는 **TBD**
+- **레이아웃**: App Router `app/(with-base-layout)/ntftalk-history/page.tsx`에서 페이지 UI 마운트
+
+### 7-2. 모듈·파일 배치
+
+| 구분            | 경로                                                                                                                |
+| --------------- | ------------------------------------------------------------------------------------------------------------------- |
+| 라우트 엔트리   | `apps/cs/app/(with-base-layout)/ntftalk-history/page.tsx`                                                           |
+| 페이지 셸       | `apps/cs/src/pages/ntftalk-history/ui/ntftalk-history-page.tsx`                                                     |
+| 컬럼 정의       | `apps/cs/src/pages/ntftalk-history/model/*-table-columns.tsx`                                                       |
+| API·타입        | `apps/cs/src/entities/ntftalk/model/ntftalk-mmt-log-history-interface.ts`, `api/ntftalk-mmt-log-history-service.ts` |
+| 엔드포인트 상수 | `apps/cs/src/shared/config/api.ts` — `ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY`                                     |
+
+### 7-3. 영역별 UI 매핑
+
+| 영역 | 화면 요소    | 컴포넌트·훅                                      | 구현 비고                    |
+| ---- | ------------ | ------------------------------------------------ | ---------------------------- |
+| A    | 검색 폼      | `Input`, `Label`, `Select`, `Button`             |                              |
+| B    | 이력 그리드  | `useDataTable` + `ColumnDef`, `manualPagination` |                              |
+| 공통 | 로딩·빈 목록 | `LoadingWithAnimation`, 빈 데이터 안내           | 기타 목록 페이지와 동일 수준 |
+
+### 7-4. 데이터 흐름
+
+```
+BEGIN
+
+  // 최초 진입
+  CALL 알림톡발송이력목록조회(기본 검색 조건, page=0, size=10)
+  DISPLAY 알림톡 발송 이력 그리드 (영역 B)
+
+  ON [조회] 버튼 CLICK DO
+      CALL 알림톡발송이력목록조회(조회기간→dateFrom/dateTo, content, recipientNum, successYn, system, page=0)
+      DISPLAY 알림톡 발송 이력 그리드 (영역 B)
+  END ON
+
+  ON [초기화] 버튼 CLICK DO
+      RESET 검색 조건 → 기본값
+  END ON
+
+END
+```
diff --git a/apps/cs/docs/spec/ntftalk/temp/SPEC.md b/apps/cs/docs/spec/ntftalk/temp/SPEC.md
new file mode 100644
index 000000000..81f361925
--- /dev/null
+++ b/apps/cs/docs/spec/ntftalk/temp/SPEC.md
@@ -0,0 +1,338 @@
+# 화면설계서: 알림톡템플릿관리
+
+## 1. 기본 정보
+
+| 항목       | 내용                                         |
+| ---------- | -------------------------------------------- |
+| 버전       | 1.0                                          |
+| 프로세스명 | UI설계                                       |
+| 화면명     | 알림톡템플릿관리                             |
+| 화면 유형  | [x] 조회 [x] 입력 [x] 삭제 [ ] 수정 [ ] 출력 |
+| 메뉴 경로  | home > 시스템관리 > 알림톡템플릿관리         |
+
+---
+
+## 2. 화면 목적
+
+카카오 알림톡(또는 동일 채널) **템플릿 목록을 조회·관리**하고, 선택한 템플릿에 연결된 **치환 변수 목록**을 확인·관리한다.
+
+---
+
+## 3. 화면 구성
+
+### 3-1. 전체 레이아웃
+
+```
+┌──────────────────────────────────────────────────────────────────────────────┐
+│  페이지 제목: 알림톡템플릿관리                       브레드크럼 (우측 상단)  │
+├──────────────────────────────────────────────────────────────────────────────┤
+│  [영역 A] 검색 필터                                                          │
+│   · 1행: 템플릿코드, 템플릿명, 템플릿내용 (텍스트)                           │
+│   · 2행: 채널, 검수상태, 메시지유형 (드롭다운, 기본값: 전체) | 조회, 초기화  │
+├──────────────────────────────────────────────────────────────────────────────┤
+│  [영역 B] 알림톡 템플릿 관리                                                 │
+│   · 섹션 제목 + 툴바(템플릿갱신, 템플릿등록, 선택 검수요청, 선택삭제, 저장)  │
+│   · 템플릿 그리드 (체크박스 다중 선택)                                       │
+├──────────────────────────────────────────────────────────────────────────────┤
+│  [영역 C] 변수관리                                                           │
+│   · 섹션 제목 + 툴바(변수추가, 선택삭제, 저장)                               │
+│   · 변수 그리드                                                              │
+└──────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 4. 영역 A: 검색 필터
+
+### 4-1. 필드 정의
+
+| 표시명     | 입력 유형 | 필수 | 기본값 | API 파라미터 매핑  | 비고                                    |
+| ---------- | --------- | ---- | ------ | ------------------ | --------------------------------------- |
+| 템플릿코드 | 텍스트    | N    | 공백   | `templateCode`     |                                         |
+| 템플릿명   | 텍스트    | N    | 공백   | `templateName`     |                                         |
+| 템플릿내용 | 텍스트    | N    | 공백   | -                  | 현재 `NtftalkTempSearchParams`에 미정의 |
+| 채널       | 드롭다운  | N    | 전체   | `senderKey`        |                                         |
+| 검수상태   | 드롭다운  | N    | 전체   | `inspectionStatus` |                                         |
+| 메시지유형 | 드롭다운  | N    | 전체   | -                  | 현재 `NtftalkTempSearchParams`에 미정의 |
+
+### 4-2. 버튼
+
+| 버튼명 | 동작                                                                    |
+| ------ | ----------------------------------------------------------------------- |
+| 조회   | 현재 필터 조건으로 영역 B 목록을 재조회한다. 페이지는 1페이지로 초기화. |
+| 초기화 | 검색 필드를 기본값(공백·전체)으로 되돌린다.                             |
+
+---
+
+## 5. 영역 B: 알림톡 템플릿 관리
+
+### 5-1. 툴바 버튼
+
+| 버튼명        | 동작(요구사항)                                          |
+| ------------- | ------------------------------------------------------- |
+| 템플릿갱신    | API를 재조회하여 템플릿 목록을 갱신한다.                |
+| 템플릿등록    | 신규 템플릿 등록 다이얼로그를 오픈한다.                 |
+| 선택 검수요청 | 체크된 행에 대해 검수 요청 API를 호출한다.              |
+| 선택삭제      | 체크된 행을 삭제한다. 데이터베이스에는 삭제되지 않는다. |
+| 저장          | 그리드에서 변경된 내용을 일괄 저장한다.                 |
+
+※ 실제 API·권한은 백엔드 정책에 따른다.
+
+### 5-2. 그리드 컬럼
+
+| 표시명     | Field                   | 비고                                      |
+| ---------- | ----------------------- | ----------------------------------------- |
+| (선택)     | —                       | 체크박스, 다중 선택                       |
+| @채널      | `senderKey`             |                                           |
+| 템플릿코드 | `templateCode`          |                                           |
+| 템플릿명   | `templateName`          |                                           |
+| 메시지유형 | `templateMessageType`   |                                           |
+| 템플릿내용 | `templateContent`       | 긴 텍스트, 말줄임 처리                    |
+| 강조유형   | `templateEmphasizeType` |                                           |
+| 버튼정보   | `buttons`               |                                           |
+| 검수상태   | `inspectionStatus`      |                                           |
+| 상태       | `status`                |                                           |
+| 등록일자   | `createdAt`             | ISO datetime 문자열 (YYYY-MM-DD HH:mm:ss) |
+
+### 5-3. 행 상호작용
+
+- 행 **클릭** 시: 해당 템플릿의 상세 다이얼로그를 오픈한다.
+- 다중 체크는 **삭제·검수요청** 등 일괄 작업용으로 사용한다.
+
+---
+
+## 6. 영역 C: 변수관리
+
+알림톡 템플릿에 사용되는 공통 변수 목록을 관리한다.
+
+### 6-1. 툴바 버튼
+
+| 버튼명   | 동작                          |
+| -------- | ----------------------------- |
+| 변수추가 | 변수 행 추가(인라인).         |
+| 선택삭제 | 선택된 변수 행 삭제.          |
+| 저장     | 추가·수정·삭제 반영 API 호출. |
+
+### 6-2. 그리드 컬럼
+
+| 표시명   | Field     | 비고                                      |
+| -------- | --------- | ----------------------------------------- |
+| 순번     | —         | 화면 표시용 row index(서버 필드 없음)     |
+| 변수코드 | `varCd`   |                                           |
+| 변수명   | `varNm`   |                                           |
+| 설명     | `varDesc` |                                           |
+| 등록일자 | `regDt`   | ISO datetime 문자열 (YYYY-MM-DD HH:mm:ss) |
+| 등록자   | `regr`    |                                           |
+
+---
+
+## 7. API/DTO 명세
+
+### 7-1. 공통
+
+- Base Endpoint Prefix: `/ntftalk-service/api/v1`
+
+### 7-2. 템플릿 API
+
+Base: `ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP`(`/ntftalk-service/api/v1/ntftalk-temp`)
+
+| 기능             | Method | URL                            | Request DTO                                            | Response DTO          | API                  |
+| ---------------- | ------ | ------------------------------ | ------------------------------------------------------ | --------------------- | -------------------- |
+| 템플릿 목록 조회 | GET    | `/ntftalk-temp`                | `NtftalkTempSearchParams`                              | `NtftalkTempPageList` | `getNtftalkTempPage` |
+| 템플릿 상세 조회 | GET    | `/ntftalk-temp/{templateCode}` | Path: `templateCode`                                   | `NtftalkTemp`         | `getNtftalkTemp`     |
+| 템플릿 등록      | POST   | `/ntftalk-temp`                | `NtftalkTempSavePayload`                               | `NtftalkTemp`         | `saveNtftalkTemp`    |
+| 템플릿 수정      | PUT    | `/ntftalk-temp/{templateCode}` | Path: `templateCode`, Body: `NtftalkTempUpdatePayload` | `NtftalkTemp`         | `updateNtftalkTemp`  |
+| 템플릿 삭제      | DELETE | `/ntftalk-temp/{templateCode}` | Path: `templateCode`                                   | 없음                  | `deleteNtftalkTemp`  |
+
+### 7-3. 변수 API
+
+Base: `ENDPOINT.NTFTALK_SERVICE.NTFTALK_VAR`(`/ntftalk-service/api/v1/ntftalk-var`)
+
+| 기능           | Method | URL                    | Request DTO                                    | Response DTO         | API                 |
+| -------------- | ------ | ---------------------- | ---------------------------------------------- | -------------------- | ------------------- |
+| 변수 목록 조회 | GET    | `/ntftalk-var`         | `NtftalkVarSearchParams`                       | `NtftalkVarPageList` | `getNtftalkVarPage` |
+| 변수 상세 조회 | GET    | `/ntftalk-var/{varCd}` | Path: `varCd`                                  | `NtftalkVar`         | `getNtftalkVar`     |
+| 변수 등록      | POST   | `/ntftalk-var`         | `NtftalkVarSavePayload`                        | `NtftalkVar`         | `saveNtftalkVar`    |
+| 변수 수정      | PUT    | `/ntftalk-var/{varCd}` | Path: `varCd`, Body: `NtftalkVarUpdatePayload` | `NtftalkVar`         | `updateNtftalkVar`  |
+| 변수 삭제      | DELETE | `/ntftalk-var/{varCd}` | Path: `varCd`                                  | 없음                 | `deleteNtftalkVar`  |
+
+---
+
+## 8. UI 구현 가이드
+
+### 8-1. 기술 스택·원칙
+
+- **UI**: `@common/components` 공통 컴포넌트 사용
+- **테이블**: `@tanstack/react-table` + `useDataTable`(`src/shared/lib/use-data-table.tsx`)
+- **데이터**: `@tanstack/react-query`(등록/수정 폼에 검증이 필요하면 `react-hook-form` + `zod` 사용)
+- **레이아웃**: App Router `app/(with-base-layout)/.../page.tsx`에서 페이지 UI 컴포넌트만 마운트
+
+### 8-2. 모듈·파일 배치
+
+| 구분          | 경로                                                                    |
+| ------------- | ----------------------------------------------------------------------- |
+| 라우트 엔트리 | `apps/cs/app/(with-base-layout)/ntftalk-temp/page.tsx`                  |
+| 페이지 셸     | `apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-page.tsx`               |
+| 컬럼 정의     | `apps/cs/src/pages/ntftalk-temp/model/*-table-columns.tsx`              |
+| API·타입      | `apps/cs/src/entities/ntftalk/model/*-interface.ts`, `api/*-service.ts` |
+| 다이얼로그    | `apps/cs/src/pages/ntftalk-temp/ui/*-dialog.tsx`                        |
+
+### 8-3. 영역별 UI 매핑
+
+| 영역 | 화면 요소     | 권장 컴포넌트·훅                                             | 구현 비고                                                                                     |
+| ---- | ------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+| A    | 검색 폼       | `Input`, `Label`, `Select`, `Button`                         |                                                                                               |
+| B    | 템플릿 그리드 | `useDataTable` + `ColumnDef`, `RowSelectionState`(컬럼 선택) | `manualPagination`, `onRowClick` → **8-4** 상세 다이얼로그                                    |
+| B    | 툴바          | `Button` 그룹                                                | 검수요청·삭제 등 확인은 `useConfirm` + `src/shared/ui/confirm-dialog.tsx` 등 기존 패턴 재사용 |
+| C    | 변수 그리드   | `useDataTable` + `ColumnDef`, `Input` + `zod`                | **변수추가는 인라인**(6-1절). 선택 행 삭제·저장은 변수 API(7-3절)와 매핑. 검증은 `zod` 사용   |
+| 공통 | 로딩·빈 목록  | `LoadingWithAnimation`, 빈 데이터 안내 문구                  | 기타 목록 페이지와 동일 수준 처리                                                             |
+
+### 8-4. 다이얼로그·라우팅
+
+| UX                                | 구현 단위                 | 컨테이너·비고                                                                |
+| --------------------------------- | ------------------------- | ---------------------------------------------------------------------------- |
+| 템플릿등록 (5-1)                  | `NtftalkTempRegistDialog` | `Dialog` + 폼. `saveNtftalkTemp`(7-2)                                        |
+| 행 클릭 상세 (5-3)                | `NtftalkTempDetailDialog` | **별도 라우트가 아닌 다이얼로그**로 구현. `getNtftalkTemp`(7-2)로 상세 로드  |
+| 선택 검수요청·선택삭제·저장 (5-1) | mutation + confirm        | 각각 대응 API(7-2) 및 백엔드 정책에 따름. 미확정 엔드포인트는 **TBD**로 표기 |
+
+### 8-5. 데이터 흐름
+
+```
+BEGIN
+
+  // 최초 진입
+  CALL 템플릿목록조회(기본 검색 조건)
+  DISPLAY 알림톡템플릿그리드 (영역 B)
+
+  CALL 변수목록조회(검색 조건)
+  DISPLAY 변수그리드 (영역 C)
+
+  // 영역 A: 조회·초기화
+  ON [조회] 버튼 CLICK DO
+      CALL 템플릿목록조회(템플릿코드, 템플릿명, 템플릿내용, 채널, 검수상태, 메시지유형)  // → 영역 B 갱신, 페이지 1로 초기화
+  END ON
+
+  ON [초기화] 버튼 CLICK DO
+      RESET 검색 조건 → 기본값(공백·전체)
+  END ON
+
+  // 영역 B: 알림톡 템플릿 (7-2절 참고)
+  ON [템플릿갱신] CLICK DO
+      CALL 템플릿목록조회(현재 검색 조건)  // → 영역 B 갱신
+  END ON
+
+  ON [템플릿등록] CLICK DO
+      OPEN 템플릿등록 다이얼로그
+  END ON
+
+  ON 영역 B 행 CLICK DO
+      CALL 템플릿상세조회(선택된 templateCode)
+      DISPLAY 템플릿상세 다이얼로그
+  END ON
+
+  ON [선택 검수요청] CLICK DO
+      CONFIRM 사용자
+      CALL 검수요청 API(체크된 행)
+  END ON
+
+  ON [선택삭제] CLICK DO
+      CONFIRM 사용자
+      CALL 템플릿삭제 API(체크된 행)
+  END ON
+
+  ON [저장] CLICK DO
+      CALL 템플릿 일괄저장 API(그리드 변경분)
+  END ON
+
+  // 영역 C: 변수 (7-3절 참고)
+  ON [변수추가] CLICK DO
+      ADD 변수 행 (인라인 편집)
+  END ON
+
+  ON [선택삭제] CLICK DO (영역 C)
+      CONFIRM 사용자
+      CALL 변수삭제 API(선택 행)
+  END ON
+
+  ON [저장] CLICK DO (영역 C)
+      CALL 변수 등록·수정 API(변경분)
+  END ON
+
+END
+```
+
+---
+
+## 9. 템플릿 등록 다이얼로그
+
+대상 UI: `NtftalkTempRegistDialog` (`apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-regist-dialog.tsx`)
+
+### 9-1. 목적/오픈 조건
+
+- 목적: 신규 알림톡 템플릿 1건을 등록한다.
+- 오픈 조건: 영역 B 툴바의 `템플릿등록` 클릭 시 모달 오픈.
+- 저장 성공 시: 목록 캐시 무효화 후 영역 B 재조회 상태로 복귀(모달 닫힘).
+
+### 9-2. 다이얼로그 레이아웃
+
+```
+┌──────────────────────────────────────────────────────────────────────┐
+│ 알림 템플릿 등록                                                     │
+├──────────────────────────────────────────────────────────────────────┤
+│ 메시지 유형       [기본형(고정)]                                     │
+│ 채널              [Select(senderKey)]                                │
+│ 템플릿코드        [Input]                                            │
+│ 템플릿명          [Input]                                            │
+│ 보안템플릿여부    ( )설정  ( )미설정                                 │
+│ 템플릿내용        [+ 변수추가]                                       │
+│                   [Textarea]                                         │
+│ 버튼              Table(버튼타입|버튼명|버튼링크)                    │
+│                   [CodeSelect(upCd: NTFBUTTONTYPE) | Input | Input]  │
+│ 바로연결          Table(바로연결타입|바로연결명|바로연결링크)        │
+│                   [CodeSelect(upCd: NTFQRTYPE) | Input | Input]      │
+├──────────────────────────────────────────────────────────────────────┤
+│                                                       [저장] [취소]  │
+└──────────────────────────────────────────────────────────────────────┘
+```
+
+### 9-3. 필드 상세
+
+| 표시명         | Form Key                | 입력 유형   | 필수 | 기본값                                | 검증/제약            | 저장 Payload 매핑     |
+| -------------- | ----------------------- | ----------- | ---- | ------------------------------------- | -------------------- | --------------------- |
+| 메시지 유형    | `templateMessageType`   | 고정 텍스트 | Y    | `BA`                                  | UI에서 `기본형` 고정 | `templateMessageType` |
+| 채널           | `senderKey`             | Select      | Y    | `senderQuery.data.senderKey` 자동세팅 | 미선택 불가          | `senderKey`           |
+| 발신키 유형    | `senderKeyType`         | hidden 상수 | Y    | `S`                                   | submit 시 강제 `S`   | `senderKeyType`       |
+| 템플릿코드     | `templateCode`          | Input       | Y    | `""`                                  | 1자 이상             | `templateCode`        |
+| 템플릿명       | `templateName`          | Input       | Y    | `""`                                  | 1자 이상             | `templateName`        |
+| 보안템플릿여부 | `templateEmphasizeType` | Radio       | N    | `false`                               | `true` / `false`     | `pcflag`              |
+| 템플릿내용     | `templateContent`       | Textarea    | Y    | `""`                                  | 1자 이상             | `templateContent`     |
+| 버튼           | `buttons`               | Table       | N    | `[]`                                  | 빈 배열              | `buttons`             |
+| 바로연결       | `quickReplies`          | Table       | N    | `[]`                                  | 빈 배열              | `quickReplies`        |
+
+### 9-4. 버튼/이벤트 상세
+
+| 트리거           | 처리 로직                                       | 비고                                 |
+| ---------------- | ----------------------------------------------- | ------------------------------------ |
+| 템플릿등록(외부) | 다이얼로그 open = true, form reset              | 진입 시 초기화                       |
+| 저장             | zod 검증 통과 후 `saveNtftalkTemp` 호출         | 성공 시 `등록되었습니다.` 알림       |
+| 저장 성공        | `invalidateQueries([NTFTALK_TEMP])` → 모달 닫기 | 목록 최신화                          |
+| 저장 실패        | 공통 mutation error 처리                        | 에러 메시지 표시 정책 공통 모듈 따름 |
+| + 변수추가       | 변수 선택 팝업 open                             | 9-5 참조                             |
+
+### 9-5. 변수추가 팝업 상세
+
+| 항목        | 내용                                                                 |
+| ----------- | -------------------------------------------------------------------- |
+| 팝업명      | 변수 목록                                                            |
+| 데이터 소스 | `NtftalkVarApi.getNtftalkVarPage`                                    |
+| 조회 조건   | `sort=regDt,desc`, 페이지네이션(`pageIndex/pageSize`)                |
+| 선택 방식   | 다중 선택 (`RowSelectionState`)                                      |
+| [추가] 동작 | 선택된 `varCd`를 줄바꿈(`\n`)으로 `templateContent` 하단에 append    |
+| 유효성 체크 | 선택 0건: "추가할 변수를 선택해 주세요." / `varCd` 공백 포함 시 에러 |
+| [취소] 동작 | 팝업 닫기(선택값 유지 안 함)                                         |
+
+### 9-6. API 명세
+
+| 기능        | Method | URL             | Request DTO              | Response DTO  | 클라이언트 API                   |
+| ----------- | ------ | --------------- | ------------------------ | ------------- | -------------------------------- |
+| 템플릿 등록 | POST   | `/ntftalk-temp` | `NtftalkTempSavePayload` | `NtftalkTemp` | `NtftalkTempApi.saveNtftalkTemp` |
diff --git a/apps/cs/docs/표준단어정의서.md b/apps/cs/docs/표준단어정의서.md
deleted file mode 100644
index 6950eb84b..000000000
--- a/apps/cs/docs/표준단어정의서.md
+++ /dev/null
@@ -1,831 +0,0 @@
-# 표준단어정의서
-
-AI 이해용으로 정리된 표준단어명, 영문약어명, 영문명 목록입니다.
-
-| 표준단어명 | 표준단어 영문약어명 | 표준단어 영문명 |
-|-----------|-------------------|----------------|
-| BOD | BOD | Biochemical Oxygen Demand |
-| C/N비 | CNR | Carbon-Nitrogen Ratio |
-| COD | COD | Chemical Oxygen Demand |
-| F/M비 | FMR | Food-Microorganism Ratio |
-| GISD | GISDATA | Geographic Information System Data |
-| HTML | HTML | Hypertext Markup Language |
-| ID | ID | Id |
-| IP | IP | Internet Protocol |
-| KEY | KEY | Key |
-| ND | ND | Not Detected |
-| NON | NON | Non |
-| NTU | NTU | Nephelometry Turbidity Unit |
-| OPT | OPT | Opt |
-| PAC | PAC | Polyaluminium Chloride |
-| PH | PH | Hydrogen Exponent |
-| PKI | PKI | Public Key Infrastructure |
-| POOL | POOL | Pool |
-| SS | SS | Suspended Solids (Ss) |
-| TCE | TCE | Trichloroethane |
-| TM | TM | Transverse Mercator |
-| T-N | TN | Total Nitrogen |
-| TOC | TOC | Total Organic Carbon |
-| T-P | TP | Total Phosphorus |
-| URL | URL | Uniform Resource Locator |
-| 가구 | HSHD | Household |
-| 가능 | PSBL | Possible |
-| 가동 | OPR | Operation |
-| 가산 | ADTN | Addition |
-| 가성소다 | NAOH | Caustic Soda(Nach) |
-| 가축분뇨 | ANMA | Animal Manure |
-| 값 | VAL | Value |
-| 강도 | IN | Intensity |
-| 강우 | RAIN | Rain |
-| 개방 | OPN | Opening |
-| 개별 | INDIV | Individual |
-| 개보수비 | RPAFEE | Repair Fee |
-| 개설 | ESTBL | Establishment |
-| 개시 | STRT | Start |
-| 개정 | RVSN | Revision |
-| 개조 | REMDEL | Remodeling |
-| 개체 | INDVD | Individual |
-| 개체군 | POPU | Population |
-| 개폐 | RORGN | Reorganization |
-| 갱신 | UPDT | Update |
-| 건물 | BLDG | Building |
-| 건설 | CONC | Construction |
-| 건수 | NOCS | The Number Of Cases |
-| 건조 | DRY | Dry |
-| 검사 | INSP | Inspection |
-| 검사서 | EXRPT | Examination Report |
-| 검정 | RCGN | Recognition |
-| 검증 | VRFC | Verification |
-| 검출 | DETECT | Detection |
-| 검토 | RVW | Review |
-| 격자 | LATTC | Lattice |
-| 결과 | RSLT | Result |
-| 결의 | DCIS | Decision |
-| 결정 | DCSN | Decision |
-| 경계 | BNDRY | Boundary |
-| 경과 | PROC | Process |
-| 경도 | LOT | Longitude |
-| 경보 | ALARM | Alarm |
-| 경사판 | ICNTPT | Inclination plate |
-| 계 | SUM | Summation |
-| 계량기 | MRNR | Measuring Instrument |
-| 계량기분리 | METRSPRT | Meter Separation |
-| 계면 | SGLV | Sludge Level |
-| 계산식 | FMUL | Formula |
-| 계약 | CTRT | Contract |
-| 계약기간 | CNTRPD | Contract Period |
-| 계절 | SEASON | Season |
-| 계획 | PLAN | Plan |
-| 고도처리 | AWTR | Advanced Water Treatment |
-| 고시 | ANCMNT | Announcement |
-| 고액분리 | SLSPRT | Solid-Liquid Separation |
-| 고형물체류시간 | SRT | Solid Retention Time |
-| 공간데이터 | SPCEDATA | Space Data |
-| 공공 | PUBLIC | Public |
-| 공급 | SPLY | Supply |
-| 공기 | AIR | Air |
-| 공기여과 | ARFT | Air Filter |
-| 공문 | ODOC | Official Documnet |
-| 공법 | MSRC | Method Of Construction |
-| 공사 | CSTRN | Construction |
-| 공사비 | CONSTEXPN | Construction Expenses |
-| 공업지역 | MNFTR_ARA | Manufacturing Area |
-| 공용면적 | CMAR | Common Area |
-| 공통 | CMMN | Commonness |
-| 관 | PP | Pipe |
-| 관계 | REL | Relation |
-| 관련 | RLTN | Relation |
-| 관로 | PPLINE | Pipe Line |
-| 관리 | MNG | Management |
-| 관리기관 | MGC | Management Agency |
-| 관리자 | MNGR | Manager |
-| 관찰 | WTCH | Watch |
-| 관측 | OBSR | Observation |
-| 관측소 | OBSRVT | Observatory |
-| 교반기 | AGITOR | Agirator |
-| 교정 | CRRC | Correction |
-| 구간 | SCTN | Section |
-| 구동 | DRIVE | Drive |
-| 구분 | SE | Section |
-| 구성 | CMPSG | Composing |
-| 구역 | ZONE | Zone |
-| 구조 | STRCT | Structure |
-| 권역 | DSTR | District |
-| 권한 | AUTH | Authority |
-| 규격 | STNDRD | Standard |
-| 규모 | SCAL | Scale |
-| 규제 | REGL | Regulation |
-| 균등 | EQLTY | Equality |
-| 금액 | AMT | Amount |
-| 급수 | WSP | Water Supply |
-| 기간 | WHL | While |
-| 기관 | INST | Institution |
-| 기록 | RECD | Recording |
-| 기록부 | REGI | Register |
-| 기밀 | SCRET | Secret |
-| 기법 | TECQU | Techniques |
-| 기본 | BSIC | Basics |
-| 기본정보 | BASINF | Bassinfo |
-| 기본키 | PK | Primary Key |
-| 기상 | WETHER | Weather |
-| 기안 | DRFTG | Drafting |
-| 기재 | WRIT | Write |
-| 기점 | CDPNT | Cardinal Point |
-| 기존 | LGCY | Legacy |
-| 기준 | CRTR | Criteria |
-| 기타 | ETC | Etc |
-| 기한 | TERM | Term |
-| 기후 | CLMT | Climate |
-| 긴급 | EMRG | Emergency |
-| 날개벽 | WW | Wing Wall |
-| 날씨 | WETHR | Weather |
-| 날짜 | DATE | DATE |
-| 남조류 | BLAL | Blue-Green Algae |
-| 납 | PB | Plumbum |
-| 내려받기 | DWLD | Download |
-| 내부반송 | ITNRCC | Internal Recycl |
-| 내용 | CN | Content |
-| 내용연수 | SVLF | Service Life |
-| 냄새 | SMELL | Smell |
-| 년 | YY | Year |
-| 년간 | FAYR | For A Year |
-| 노즐 | NZL | Nozzle |
-| 노출 | EXPSR | Exposure |
-| 농도 | DNSTY | Density |
-| 농축 | TKN | Thickened |
-| 누적 | ACML | Accumulate |
-| 누출 | LKG | Leakage |
-| 눈 | SNW | Snow |
-| 단가 | UNPRC | Unit Price |
-| 단기 | SRTPD | Short Period |
-| 단순 | SIMPL | Simplicity |
-| 단위 | UNIT | Unit |
-| 대구역 | LZONE | Large Zone |
-| 대분류 | LCLAS | Large Classification |
-| 대장 | REGSTR | Register |
-| 대장균 | COLI | Coliform, Fecal Coliform |
-| 대장균군 | COLIB | Coliform Bacteria |
-| 대지면적 | SIAR | Site Area |
-| 대체 | RPLC | Replace |
-| 덮개 | COVR | Cover |
-| 데이타 | DAT | Data |
-| 도구 | UNT | Unit |
-| 도래 | ADVNT | Advent |
-| 도로 | ROAD | Road |
-| 도로명 | RN | Road Name |
-| 도시 | CTY | City |
-| 도엽 | MAPDMC | Map Demarcation |
-| 도표 | CHART | Chart |
-| 독성 | TOXCTY | Toxicity |
-| 동의 | AGRE | Agreement |
-| 동절기 | WSESN | The Winter Season |
-| 등급 | GRD | Grade |
-| 등기 | RG | Registered |
-| 등록 | REG | Registration |
-| 디바이스 | DVICE | Device |
-| 디코딩 | DCD | Decoding |
-| 레이어 | LYR | Layer |
-| 로그인 | LGN | Login |
-| 로우 | ROW | Row |
-| 마감 | DDLN | Deadline |
-| 마이크로필터 | MCRFT | Micro Filter |
-| 막 | MBRN | Membrane |
-| 만족도 | STFDG | Satisfaction Degree |
-| 맑음 | CLAR | Clear |
-| 매각 | SAL | Sale |
-| 맨홀 | MH | Manhole |
-| 맵 | MAP | Map |
-| 메인 | MAIN | Main |
-| 메일 | EMAIL | Email |
-| 메탄올 | MTN | Methanol(CH3OH) |
-| 명 | NM | Name |
-| 모니터링 | MTRG | Monitoring |
-| 모델 | MODL | Model |
-| 모델링 | MODLNG | Modeling |
-| 모래 | SAND | Sand |
-| 목 | MOK | Mok |
-| 무산소 | ANX | Anoxic |
-| 무산소조 | ANX_TANK | Anoxic Tank  |
-| 무인센서 | MNLSENSR | Manless Sensor |
-| 문서 | DCMT | Document |
-| 물 | WTR | Water |
-| 미급수 | NONWTRSPL | Non Water Supply |
-| 미생물 | BLGC | Biological |
-| 미세먼지 | PM | Particulate Matter |
-| 미세목 | MCRB | Micro Bar |
-| 민간위탁 | ETSVN | Entrustment To Civilian |
-| 민감 | SST | Sensitive |
-| 민원 | CVLCPT | Civil Complaint |
-| 바이러스 | VIRS | Virus |
-| 반기 | HT | Half Term |
-| 반류수 | SIDSWT | Side Stream Water |
-| 반송 | SNDBK | Send Back |
-| 반송수 | RCCWT | Recycled  Water |
-| 반송슬러지 | RTNSLG | Return Sludge |
-| 반영 | RFLT | Reflection |
-| 반응조 | RETNK | Reactant  Tank |
-| 반출 | EXPRT | Export |
-| 반토 | ALUM | Alumina |
-| 반환 | GVBK | Giving Back |
-| 받이 | INL | Inlet |
-| 발생 | OCRN | Occurrence |
-| 발전 | PWGNRT | Power Generation |
-| 발주기관 | ORNT | Order Institution |
-| 방류 | DCWTR | Discharge Water Stock Etc |
-| 방류구 | DSCHG | Discharge |
-| 방류수 | EFLEC | Effluence |
-| 방문 | VST | Visit |
-| 방문자 | VSTR | Visitor |
-| 방법 | MTHD | Method |
-| 방사 | RLSE | Release |
-| 배관 | PLINE | Pipeline |
-| 배분 | DSTRB | Distirbution |
-| 배설물 | EXCRTN | Excretion |
-| 배수 | DRNG | Drainage |
-| 배수구역 | DRANGZN | Drainage Zone |
-| 배출 | EXHST | Exhaust |
-| 배출가스 | EMGA | Emission Gases |
-| 배출구 | VENT | Vent |
-| 배출시설 | DHGP | Discharge Equipment |
-| 배출시험 | EXHTST | Exhaust Test |
-| 배출자 | DCHGR | Discharge Person |
-| 밸브 | VALVE | Valve |
-| 번호 | NO | Number |
-| 법 | LAW | Law |
-| 법적 | LGL | Legal |
-| 법정 | STTY | Statutory |
-| 법정동 | STDG | Statutory Dong(Administrative District) |
-| 법정리 | STLI | Statutory Li(Administrative District) |
-| 변경 | CHG | Change |
-| 변동 | FLCTN | Fluctuation |
-| 변속기 | TRMIS | Transmission |
-| 보고 | RPT | Report |
-| 보고서 | RPOT | Report |
-| 보관 | STORG | Storage |
-| 보수 | MEND | Mend |
-| 보유 | HOLD | Hold |
-| 보정 | RVSION | Revision |
-| 보조 | ASSISC | Assistance |
-| 보조금 | SBSIDY | Subsidy |
-| 복개 | COVE | Cover |
-| 복토 | CWTH | Covering With Soil |
-| 본류 | MI_RV | Main River |
-| 본번 | MNO | Main Number |
-| 부검 | ATPSY | Autopsy |
-| 부과 | LEVY | Levy |
-| 부과금 | LVYAMT | Levy  Amount |
-| 부기 | BUKIP | Bookkeeping |
-| 부담금 | ALOTM | Allotment |
-| 부번 | SNO | Sub Number |
-| 부산물 | BYPRD | By-Product |
-| 부서 | DEPT | Department |
-| 부숙화 | DECPZ | Decomposed  ~Ize |
-| 부적합 | IMPPRTY | Impropriety |
-| 부착 | ASN | Adhesion |
-| 부품 | CMPNT | Components |
-| 부하량 | LOADQTY | Load Quantity |
-| 분과 | DIVSN | Division |
-| 분뇨 | ENSO | Excreta, Night Soil |
-| 분류 | CL | Classification |
-| 분류군 | TAXON | Taxon |
-| 분리막 | SPRTMBR | Separation Membrane |
-| 분배 | DTRBT | Distribution |
-| 분배조 | DTRBT_TANK | Distribution Tank |
-| 분야 | RLM | Realm |
-| 분원성 | FECL | Fecal |
-| 분원성대장균군 | FCOLI | Fecal Coliform |
-| 분원성연쇄상구균 | FCSTRCCI | Fecal Streptococci |
-| 분할 | PRTIN | Partition |
-| 비밀번호 | PSWD | Password |
-| 비상 | EMGNY | Emergency |
-| 비정상 | ABNRM | Abnormality |
-| 사양 | SPECS | Specification |
-| 사업비 | WCT | Working Cost |
-| 사업장 | BPLC | Business Place |
-| 사여과지 | SAND_ FILTR | Sand Filter |
-| 사용 | USE | Use |
-| 사용가능 | USABLE | Usable |
-| 사용권 | RIOUS | Right Of Using |
-| 사용량 | USG | USAGE |
-| 사용자 | USER | User |
-| 사위 | FDG | Four Directions Girth |
-| 사유 | RESN | Reason |
-| 사이클 | CYCLE | Cycle |
-| 사이트 | SITE | Site |
-| 사진 | PHOT | Photograph |
-| 사항 | MATTR | Matter |
-| 사후 | AFTFAT | After Fact |
-| 삭제 | DEL | Deletion |
-| 산기관 | DFS | Diffuser |
-| 산업 | INDUST | Industrial |
-| 산화환원전위 | ORP | Oxidation Reduction Potential |
-| 살모넬라 | SLMN | Salmonella |
-| 삼원촉매장치 | TWCTLC | Three Way Catalytic Converter |
-| 상세 | DTL | Details |
-| 상세주소 | DADDR | Detailed Address |
-| 상수 | WT | Water |
-| 상업지역 | CMCL_ARA | Commercial Area |
-| 상태 | STUS | Status |
-| 상품 | GDS | Goods |
-| 상향류 | UFW | Upflow |
-| 상호 | CONM | Company Name |
-| 색도 | CRMTY | Chromaticity |
-| 생략 | OMS | Omission |
-| 생물 | LVB | Living Being |
-| 생물반응조 | BIRAT | Bioreactor  |
-| 생물서식처 | ORGNHBT | Organism Habitat |
-| 생물종 | BISP | Biological Species |
-| 생성 | CRT | Creation |
-| 생슬러지 | RSLG | Raw Sludge |
-| 생태 | ECLGY | Ecology |
-| 생태독성 |  ECTOX | ecotoxicity |
-| 서류 | PAPE | Papers |
-| 서명 | SIGN | Signing |
-| 서버 | SRVR | Server |
-| 서비스 | SRVC | Service |
-| 설계 | DESGN | Design |
-| 설계용량 | DESGN_CPCT | Design Capacity |
-| 설립 | FNDN | Foundation |
-| 설정 | STNG | Setting |
-| 설치 | INSTL | Installation |
-| 성격 | CHTR | Character |
-| 성공 | SCS | Success |
-| 성능 | PRFMNC | Performance |
-| 성능검사 | EFTST | Efficiency Test |
-| 성적서 | SCRRP | Score Report |
-| 세균 | BCLS | Bacillus |
-| 세목 | FB | Fine bar |
-| 세부 | DETAIL | Detail |
-| 세정 | WS | Washing |
-| 세정제 | CNML | Cleaning Material |
-| 소 | SML | Small |
-| 소독 | DSNF | Disinfection |
-| 소독제 | DSINF | Disinfectant |
-| 소분류 | SCLAS | Small Classification |
-| 소수점 | DCPT | Decimal Point |
-| 소요 | REQ | Required |
-| 소유 | OWN | Own |
-| 소유역 | SBASIN | Sub Basin |
-| 소재지 | PLAC | Place Of Location |
-| 소포 | ATFM | Antifoaming |
-| 소포수 | FBW | Foam Breaking Water |
-| 소포제 | ANAG | Antifoaming Agent |
-| 송부 | SENDNG | Sending |
-| 송신 | SNDM | Send Message |
-| 송풍기 | BLW | Blower |
-| 수 | CNT | Count |
-| 수거 | TKAWY | Take Away |
-| 수계 | WWBH | Watershed, Water Basin, Hydrosphere |
-| 수동 | HOPR | Hand Operation |
-| 수리학적 체류시간 | HRT | Hydraulic Retention Time |
-| 수문 | Gate | Gate |
-| 수산화나트륨 | SOHY | Sodium Hydroxide |
-| 수소이온 | HION | Hydrogen Ion |
-| 수신 | RCPTN | Reception |
-| 수용가 | RCPTR | Receptor |
-| 수위 | WAL | Water Level |
-| 수정 | MDFCN | Modification |
-| 수정자 | MDFR | Modifier |
-| 수제 | SPRDIKE | Superdike |
-| 수조 | Tank | Tank |
-| 수질 | QTWT | Quality Of Water |
-| 수질개선 | WTRQLIMP | Water Quality Improvement |
-| 수질기준 | WQST | Water Quality Standards |
-| 수질배출정보 | WTDI | Water Discharge Information |
-| 수집 | CLCT | Collection |
-| 순환 | CCL | Cycling |
-| 쉬겔라 | SHIGLA | Shigella |
-| 스컴 | SCM | Scum |
-| 스크린 | SCR | Screen |
-| 슬러지 | SLG | Sludge |
-| 슬러지 밀도지수 | SDI | sludge density index |
-| 슬러지 용량 지표 | SVI | Sludge Volume Index |
-| 습지 | WTLN | Wetland |
-| 승인 | APRV | Approval |
-| 승인권 | APPRVRGT | Right Of Approval |
-| 시각 | TIME | Time |
-| 시간 | HR | Hour |
-| 시군구 | SGG | Si/Gun/Gu |
-| 시나리오 | SCEN | Scenario |
-| 시도 | CTPV | Cities And Provinces |
-| 시료 | SMPL | Sample |
-| 시설 | FCLT | Facility |
-| 시설면적 | FCAR | Facility Area |
-| 시설물 | FCLTS | Facilities |
-| 시스템 | SYS | System |
-| 시안 | CYN | Cyaan |
-| 시운전 | TSTRN | Test Run |
-| 시작 | BGNG | Beginning |
-| 시점 | PTM | Point Time |
-| 시행 | ENFC | Enforcement |
-| 시험 | TEST | Test |
-| 신고 | DCLR | Declaration |
-| 신고자 | DCL | Declarer |
-| 신규 | NEW | New |
-| 신기술 | NTCH | New Technology |
-| 신뢰 | CNFDNC | Confidence |
-| 신뢰성 | CRDIBLTY | Credibility |
-| 실시 | OPRT | Operation |
-| 실적 | ACRS | Actual Result |
-| 실행 | EXCN | Execution |
-| 심사 | SRNG | Screening |
-| 심의 | DLBR | Deliberation |
-| 아황산환원혐기성포자형성균 | SFSRA | Spore Forming Sulfite Reducing Anaerobes |
-| 안정화 | STBLZT | Stabilization |
-| 암롤박스(컨테이너) | ARTCT | Arm roll type container |
-| 암모니아성질소 | NHN | Ammonia Nitrogen |
-| 압력 | PRESSR | Pressure |
-| 압송 | PUMPNG | Pumping |
-| 압축 | CMPRS | Compress |
-| 액비 | LQFERTLZ | Liquid Fertilizer |
-| 액상 | LIQD | Liquid |
-| 약 | GENTLE | Gentle |
-| 약품 | CMC | Chemical |
-| 약품비 | MEDFEE | Medicine Fee |
-| 약품사용 | USMD | Use  Medicines |
-| 업로드 | UPLD | Upload |
-| 업무 | DTY | Duty |
-| 없음 | NOT | Nothing |
-| 에너지 | ENR | Energy |
-| 에틸벤젠 | ETBNZN | Ethylbenzene |
-| 여과 | FILTR | Filteration |
-| 여과수 | FTWT | Filtered Water |
-| 여과재 | FTMTRL | Filter Material |
-| 여과형 | FILTRFOM | Filter Form |
-| 여부 | YN | Yes or No |
-| 여시니아균 | YERSNA | Yersinia |
-| 역률 | PWRER_FCT | Power Factor |
-| 역세척 | BWS | Back Wash |
-| 연결 | CONN | Connection |
-| 연계 | LINK | Link |
-| 연도 | YR | Year |
-| 연락 | CNTC | Contact |
-| 연령 | AGE | Age |
-| 연료화 | FUELZ | Fuelize |
-| 연월 | YM | Year and Month |
-| 염소 | CLRN | Chlorine |
-| 염소소독 | CHDI | Chlorine Disinfection |
-| 염소이온 | CLION | Chlorine Ion |
-| 염화제이철 | IRCLD | Iron(III) Chloride |
-| 예보 | FRCST | Forecast |
-| 예비 | PRPT | Preparation |
-| 예산 | BGT | Budget |
-| 예상 | EXPCT | Expectation |
-| 예약 | RSVT | Reservation |
-| 예외 | EXCPT | Exception |
-| 예정 | PRNG | Prearrangement |
-| 예찰 | PRDICT | Prediction |
-| 오류 | ERR | Error |
-| 오수받이 | HUS_INL | House Inlet |
-| 오염물질 | CNTMN | Contaminant |
-| 오염원 | POLUSRC | Pollution Source |
-| 오존 | OZN | Ozone |
-| 오프로드 | OFFRD | Off Road |
-| 옥살산 | OXACID | Oxalic Acid |
-| 와류 | VORTEX | Vortex |
-| 와류형 | VORTXFOM | Vortex From |
-| 완결 | COMPLT | Completion |
-| 완료 | CMPTN | Completion |
-| 완전 | PRFECT | Perfection |
-| 요건 | REQSIT | Requisite |
-| 요막액 | ALLNTFLD | Allantoic Fluid |
-| 요청 | DMND | Demand |
-| 용량 | CPCT | Capacity |
-| 용역 | SERVC | Service |
-| 용존산소 | DO | Dissolved Oxygen |
-| 용해 | DSLV | Dissolving |
-| 우량 | EXLT | Excellent |
-| 우수 | ST | Storm  |
-| 우수받이 | STRT_INL | Street Inlet |
-| 우수토구 | STM_OVFL_MUT | Storm Overflow Mouth |
-| 우회 | BP | BY PASS |
-| 운반 | CNVY | Conveyance |
-| 운영 | OPER | Operation |
-| 운영비 | OPEXP | Operation Expense |
-| 운행 | OPRAT | Operation |
-| 원격 | RMRT | Rmrt |
-| 원격감시체계 | TMS | Tele Monitoring System |
-| 원료 | MTRAL | Material |
-| 원수 | ORGWT | Origin'S Water |
-| 원인자 | ORGPR | The Origin Person |
-| 월 | MM | Month |
-| 위도 | LAT | Latitude |
-| 위반 | CNTR | Contravene |
-| 위촉 | ENTRST | Entrusting |
-| 위치 | LOC | Location |
-| 위탁 | CNSG | Consign |
-| 위탁자 | CONSGNR | Consignor |
-| 유기인 | ORGP | Organic Phosphorus |
-| 유량 | FLUX | Flux |
-| 유량조정조 | EQLZT__TANK | Equalization Tank |
-| 유입 | INFlOW | Inflow |
-| 유입수 | INFWTR | Influent Water |
-| 유주 | SWARMG | Swarming |
-| 유지 | MNTNC | Maintenance |
-| 유지용수공급 | MWRS | Maintenance Water Requirement Supply |
-| 유체 | FLUID | Fluid |
-| 유출 | EFFLUX | Efflux |
-| 유충 | LAVL | Larval |
-| 유형 | TY | Type |
-| 유효 | VLD | Validity |
-| 음용 | DKPS | For Drinking Purpose |
-| 읍면동 | EMD | Eup/Myun/Dong |
-| 응답 | RSPNS | Response |
-| 응집제 | COAG | Cohesive Agents |
-| 이관 | TRNSF | Transfer |
-| 이동 | MVMN | Movement |
-| 이력 | HST | History |
-| 이메일 | EML | Email |
-| 이상 | ABOVE | Above |
-| 이송 | TRSF | Transfer |
-| 이의 | OBJC | Objection |
-| 이차 | SCDR | Secondary |
-| 이차침전지 | SCDR_SDMT_TANK | Secondary Sedimaentation |
-| 이행 | MIG | Migratation |
-| 인건비 | PEXP | Personnel Expenses{Expenditure] |
-| 인계 | HNDVR | Handover |
-| 인계서 | HDOVDC | Handover Document |
-| 인구 | POPL | Population |
-| 인산 | PHACID | Phosphoric Acid |
-| 인산염인 | POP | phosphate |
-| 인양기 | LFT | Lifter |
-| 인원수 | NOPE | The Number of Persons |
-| 인증 | CERT | Certification |
-| 인처리 | PPRCS | Phosphorus  Process |
-| 인허가 | APVL | Approval |
-| 일 | DY | Day |
-| 일련번호 | SN | Serial Number |
-| 일반 | GNRL | General |
-| 일별 | DALY | Daily |
-| 일시 | DT | Date and Time |
-| 일자 | YMD | YEAR Month Day |
-| 일지 | DIARY | Diary |
-| 일차 | PRM | Primary |
-| 일차침전지 | PST_SDMT_TANK | Primary Sedimentation Tank |
-| 일평균 | DYRG | Day Average |
-| 임시 | TMPR | Temporary |
-| 임의 | RNDM | Random |
-| 입고 | WRHS | Warehousing |
-| 입력 | INPT | Input |
-| 잉여 | SPS | Surplus |
-| 잉여슬러지 | EC_SLG | Excess Sludge |
-| 자 | MAN | Man |
-| 자갈 | GRAVEL | Gravel |
-| 자료 | DATA | Data |
-| 자리 | DIGIT | Digit |
-| 자립화 | SLFRLI | Self Reliance |
-| 자연형 | NATRLFOM | Natural Form |
-| 자외선 | URLI | Ultraviolet Rays, Light |
-| 자재 | MTRIL | Material |
-| 자체 | ITSL | Itself |
-| 작성 | WRT | Writing |
-| 작업 | JOB | Job |
-| 잠금 | LOCK | Lock |
-| 장기 | LNGTR | Long Term |
-| 장소 | PLCE | Place |
-| 장착 | MNTNG | Mounting |
-| 재 | RE | Re |
-| 재이용 | REUSE | Reuse |
-| 재이용수 |   | Reuse Water |
-| 재활용 | RUSE | Reuse |
-| 저감 | REDUC | Reduction |
-| 저류조 | DTT_TANK | Detention Tank |
-| 저온 | LOWTMP | Low Temperature |
-| 저장 | STRG | Storage |
-| 저장소 | STORGE | Storage |
-| 적발 | DSCL | Disclose |
-| 적산 | ADD | Addition |
-| 적용 | APLCN | Application |
-| 적합 | STBLT | Suitability |
-| 전기 | ELCTY | Electricity |
-| 전기료 | ELFEE | Electricity Fee |
-| 전력 | PWRER | Power |
-| 전문 | SPCY | Specially |
-| 전산 | CMPUTT | Computation |
-| 전송 | TRSM | Transmission |
-| 전압 | VLTGE | Voltage |
-| 전용 | EXUSE | Exclusive Use |
-| 전원 | SELCT | Source Of Electricity |
-| 전처리 | PRETR | Pretreatment |
-| 점검 | CHCK | Check |
-| 접속 | CNTN | Connection |
-| 정밀 | PRCIS | Precision |
-| 정보 | INFO | Information |
-| 정산 | CLCLN | Calculation |
-| 정상 | NRMLT | Normality |
-| 정수장 | WPPW | Water Purification Plant, Waterworks |
-| 정제 | REFINE | Refining |
-| 정지 | STP | Stop |
-| 제거 | RMV | Removal |
-| 제수변 | SL_VALVE | Sluice Valve |
-| 제작 | MNFCT | Manufacture |
-| 제조사 | MKR | Maker |
-| 제출 | SBMSN | Submission |
-| 제한 | LIMT | Limitation |
-| 조류 | ALG | Algae |
-| 조목 | CSB | Coarse Bar |
-| 조사 | EXMN | Examination |
-| 조성 | MAKE | Make |
-| 조정 | EQLT | Equalization |
-| 조치 | ACTN | Action |
-| 조회 | INQ | Inquiry |
-| 존재 | EXST | Existence |
-| 종결 | TRMN | Termination |
-| 종균제 | MICBA | Microbial Agent |
-| 종료 | END | End |
-| 종류 | KND | Kind |
-| 종목 | IEM | Item |
-| 종별 | ASORT | Assortment |
-| 종사자 | ENFSN | Enfilade Person |
-| 종점 | TMNL | Terminal |
-| 좌표 | COOR | Coordinate |
-| 주간 | WIK | Week |
-| 주변 | CFR | Circumference |
-| 주소 | ADDR | Address |
-| 주입 | IJTN | Injection |
-| 주파수 | FQNC | Frequency |
-| 준공 | CMCN | Completion Of Construction |
-| 중권역 | MDSTRC | Medium District |
-| 중복 | DPCN | Duplication |
-| 중분류 | MLSFC | Middle Classification |
-| 중온 | MESPH | Mesophilic |
-| 중첩 | RETRTN | Reiteration |
-| 중화설비 | NUTEQP | Neutralization Equipment |
-| 중화제 | CNTAG | Counteragent |
-| 증가 | INCRS | Increase |
-| 지도점검표사본 | CITBMR | Copy of Instruction Checklist  |
-| 지방자치단체 | LGOV | Local Governments |
-| 지번 | LOTNO | Lot Number |
-| 지상 | GRND | Ground |
-| 지역 | ARA | Area |
-| 지질 | NTRFS | Nature Of Soil |
-| 지질도 | GEOMAP | Geological Map |
-| 지하 | UDGD | Underground |
-| 지하수 | GROU | Groundwater |
-| 지형 | TPGRPH | Topography |
-| 진공 | VCM | Vacuum |
-| 진단 | DGNSS | Diagnosis |
-| 진동 | VIBRAT | Vibration |
-| 진행 | PRGRE | Progress |
-| 질산 | NIACID | Nitric Acid. |
-| 질산성질소 | NO3N | Nitrate Nitrogen |
-| 집계 | TOT | Total |
-| 집계구 | SUMDST | Summation District |
-| 집행 | IMPL | Implementation |
-| 찌꺼기 | LEES | Lees |
-| 차아염소산 | NAOCL | Hypochlorous Acid |
-| 차집 | ITCT | Intercepting |
-| 착공 | BGNCST | Begin Construction |
-| 채수 | SAMWT | Sampling Of Water |
-| 채수기 | WTRSMPLR | Water Sampler |
-| 채수병 | WTRBOTL | Water Bottle |
-| 처리 | PRCS | Process |
-| 처리비 | PSSFEE | Process  Fee |
-| 처리수 | TRT_WT | Treated Water |
-| 처리수조 | TRT_WT_TANK | Treated Water Tank |
-| 처리시설 | TRTMTFCLT | Treatment Facility |
-| 처리자 | PRCR | Processor |
-| 처분 | DSPS | Disposition |
-| 철염 | FESLT | Ferric Salt |
-| 첨부 | ATCH | Attachment |
-| 첨부파일 | ATFI | Attachment File |
-| 초과 | EXCS | Excess |
-| 초기화 | INITL | Initialization |
-| 촉매 | CTLY | Catalyst |
-| 총계 | TSM | Summation |
-| 총대장균군 | TCOLFGRP | Total Coliform Group |
-| 총량 | TQT | Total Quantity |
-| 총면적 | GFA | Gross Floor Area |
-| 총사업비 | TPCO | Total Project Cost |
-| 총인구 | TPOPLTN | Total Population |
-| 총인처리시설 | TPFCT | Total Phosphorus facility |
-| 최근 | RCNT | Recent |
-| 최대값 | MAXV | Maximum Value |
-| 최소값 | MINV | Minimum Value |
-| 최적 | BMTB | Being The Most Suitable |
-| 최종 | LAST | Last |
-| 최초 | FRST | First |
-| 추출 | EXTR | Extraction |
-| 추출정보 | EXTRINFO | Extraction Information |
-| 축 | AXS | Axis |
-| 출력 | OTPT | Output |
-| 출발 | LVE | Leave |
-| 충전기 | CHRGR | Charger |
-| 취득 | ACQS | Acquisition |
-| 취소 | RTRCN | Retraction |
-| 측정 | MSUR | Measurement |
-| 측정기 | MSRR | Measurement Instrument |
-| 측정소 | MSRSTN | Measurement Station |
-| 침사지 | GTCB | Grit Chamber |
-| 침전 | SDMT | Sediment |
-| 침전지 | SDMT_TANK | sedimentation tank |
-| 컨베이어 | CVY | Conveyor |
-| 컬럼 | COL | Column |
-| 코드 | CD | Code |
-| 크기 | SZ | Size |
-| 크실렌 | XYLEN | Xylene |
-| 탄화 | CARB | Carbonization |
-| 탈거 | CRYOFF | Carry Off |
-| 탈리액 | SPNT | Supernatant |
-| 탈수 | DWTR | Dewatering |
-| 탈수기 | DEHYM | Dehydration  Machine |
-| 탈질 | DNTFCT | Denitrificatio |
-| 탈취 | DODRZ | Deodorization |
-| 탈취기 | DEODRZ | Deodorizer |
-| 탈취제 | DEODR | Deodorant |
-| 탈황제 | DSLFA | Desulfurizing  Agent |
-| 터널형 | YUNLTP | Tunnel Type |
-| 테이블 | TBL | Table |
-| 토구 | OTFL | Outfall |
-| 토지 | LAD | Land |
-| 토지면적 | LDAR | Land Area |
-| 통계 | STATS | Statistics |
-| 통보 | NTFCTN | Notification |
-| 통신 | COMM | Communication |
-| 통지 | AVTSMT | Avertissement |
-| 통합 | UNTY | Unity |
-| 특성 | CHRT | Character |
-| 특수 | SPECL | Special |
-| 특정유해물질 | SHCH | Specified Hazardous Chemicals |
-| 파일 | FILE | File |
-| 판정 | JGMT | Judgement |
-| 펌프 | PUMP | Pump |
-| 펌프장 | PUMP_STT | Pump Station |
-| 페놀 | PHNL | Phenol |
-| 평가 | EVL | Evaluation |
-| 폐기 | DSCD | Discard |
-| 폐기물 | WSTE | Waste |
-| 폐쇄 | CLSG | Closing |
-| 폐수 | WAWA | Waste Water |
-| 폐수처리 | WSWT | Wastewater Treatment |
-| 폐열 | WASTHET | Waste Heat |
-| 포기 | ARTN | Aeration |
-| 포트 | PORT | Port |
-| 폭기조 | ARTN_TANK | Aeration Tank |
-| 폴리머 | PLYMR | Polymer |
-| 폴리철 | FRRCSU | Ferric Sulfate |
-| 표고 | AL | Altitude |
-| 표기 | MARK | Mark |
-| 표시 | INDCT | Indication |
-| 표준 | STD | Standard |
-| 표출 | EPRSS | Expression |
-| 플래그 | FLAG | Flag |
-| 필드 | FILD | Field |
-| 필수 | ESNTL | Essential |
-| 필증 | CERFIN | Certificate Of Finishing |
-| 필터 | FLTER | Filter |
-| 하수 | SWGE | Sewage |
-| 하수도 | DRNGSYS | Drainage System |
-| 하수미처리 | SEWGUNTTM | Un Sewage Treatment |
-| 하수처리 | SEWGTRTM | Sewage Treatment |
-| 하수처리수 | STWTR | Sewage Treatment Water |
-| 하위 | LOWR | Lower |
-| 하향류 | DWFW | Downflow |
-| 할인 | DSCNT | Discount |
-| 함수율 | MISTR_CTNT | Moisture content |
-| 합계 | SMM | Summation |
-| 해당 | RLVT | Relevant |
-| 해석 | INTRPRTT | Interpretation |
-| 해양투기 | OCDU | Ocean Dumping |
-| 행망 | ADMNW | Administration Network |
-| 행정 | ADMN | Administration |
-| 행정구역 | ADMI | Administrative District |
-| 행정동 | DONG | Dong (Administrative District)  |
-| 허가 | PRMSN | Permission |
-| 허용 | PERM | Permission |
-| 현상 | PHNMN | Phenomenon |
-| 혐기 | AARB | Anaerobic |
-| 혐기조 | AARB_TANK | Anaerobic tank |
-| 협잡물 | CCMT | Concomitant |
-| 형태 | SHAP | Shape |
-| 호기 | ARB | Aerobic |
-| 호기조 | ARB_TANK | Aerobic Tank |
-| 호소수 | LMSHWT | Lake  And  Marsh   Water |
-| 호수 | LKE | Lake |
-| 호안 | RVTMNT | Revetment |
-| 호이스트 | HIST | Hoist |
-| 혼합 | CMPN | Compound |
-| 혼합액현탁고형물 | MLSS | Mixed liquor suspended solids |
-| 혼화지 | MXG_TNAK | Mixing tank |
-| 홈페이지 | HMPG | Homepage |
-| 홍수 | FLOOD | Flood |
-| 확인 | IDNTY | Identify |
-| 확인서 | CNFRMN | Confirmation |
-| 확인자 | IDFR | Identifier |
-| 확장자 | EXTN | Extension |
-| 확정 | CFMTN | Confirmation |
-| 환경 | ENVR | Environment |
-| 환경기초시설 | ENINF | Environmental Infrastructure |
-| 환원 | RSTORE | Restoration |
-| 활성탄 | AC | Activated Carbon |
-| 활성화 | PRMT | Promote/Facilitate |
-| 활용 | PRUS | Practical Use |
-| 황산 | ECCBT | Encyclopaedia Britannica (H2So4) |
-| 회사 | CO | Company |
-| 회수 | RTRVL | Retrieval |
-| 회신 | RPLY | Reply |
-| 효율 | EFC | Efficiency |
-| 효율성 | EFFCTV | Effectiveness |
-| 휴대 | MBL | Mobile |
-| 흡수정 | EXTTW | Extraction Well |
-| 흡착 | ADST | Adsorption |
diff --git a/apps/cs/eslint.config.mjs b/apps/cs/eslint.config.mjs
index 9109635e9..c2643e6aa 100644
--- a/apps/cs/eslint.config.mjs
+++ b/apps/cs/eslint.config.mjs
@@ -1,6 +1,7 @@
 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,9 +12,11 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...baseEsLintConfig,
   {
     rules: {
       "react-hooks/exhaustive-deps": "off",
+      "@typescript-eslint/no-unused-vars": "warn",
     },
   },
 ];
diff --git a/apps/cs/middleware.ts b/apps/cs/middleware.ts
index 3a79c1deb..98b741325 100644
--- a/apps/cs/middleware.ts
+++ b/apps/cs/middleware.ts
@@ -1,21 +1,25 @@
 import { NextRequest, NextResponse } from "next/server";
+
 import {
-  CLAIM_NAME,
   AUTH_USER_ID,
+  CLAIM_NAME,
   PORT,
   PROXY_HOST,
   SERVER_API_URL,
   SITE_ID,
 } from "./src/shared/config";
 
-const serverApiUrl =
-  process.env.NEXT_PUBLIC_SERVER_API_URL ?? "http://localhost:3000";
+const serverApiUrl = process.env.SERVER_API_URL ?? "http://localhost:3000";
 
-const linkBackendApiHost = process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST ?? "http://localhost:8080";
+const linkBackendApiHost =
+  process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST ?? "http://localhost:8080";
 
 // CSP 헤더 설정 함수 (img-src만)
 function addSecurityHeaders(response: NextResponse): NextResponse {
-  response.headers.set("Content-Security-Policy", "img-src 'self' data: https: blob:;");
+  response.headers.set(
+    "Content-Security-Policy",
+    "img-src 'self' data: https: blob:;",
+  );
   return response;
 }
 
@@ -37,7 +41,7 @@ export function middleware(req: NextRequest) {
 
     logMessages.push(`  Rewritten URL: ${newUrl}`);
     logMessages.push("\n--------------------------------\n");
-    console.log(logMessages.join("\n"));
+    // console.log(logMessages.join("\n"));
 
     const response = NextResponse.rewrite(new URL(newUrl));
     return addSecurityHeaders(response);
@@ -54,7 +58,7 @@ export function middleware(req: NextRequest) {
 
     logMessages.push(`  Rewritten URL: ${newUrl}`);
     logMessages.push("\n--------------------------------\n");
-    console.log(logMessages.join("\n"));
+    // console.log(logMessages.join("\n"));
 
     const response = NextResponse.rewrite(new URL(newUrl), {
       headers: requestHeaders,
@@ -66,7 +70,7 @@ export function middleware(req: NextRequest) {
     const requestHeaders = new Headers(req.headers);
     const token = req.cookies.get(CLAIM_NAME)?.value;
     const userId = req.cookies.get(AUTH_USER_ID)?.value;
-    
+
     // /api/link 경로를 제거하고 백엔드 API 경로로 변환
     const apiPath = pathname.replace("/api/link", "");
     const queryParams = searchParams.toString();
@@ -79,7 +83,7 @@ export function middleware(req: NextRequest) {
 
     logMessages.push(`  Link API Rewritten URL: ${newUrl}`);
     logMessages.push("\n--------------------------------\n");
-    console.log(logMessages.join("\n"));
+    // console.log(logMessages.join("\n"));
 
     const response = NextResponse.rewrite(new URL(newUrl), {
       headers: requestHeaders,
@@ -93,12 +97,17 @@ export function middleware(req: NextRequest) {
   }
 
   logMessages.push("\n--------------------------------\n");
-  console.log(logMessages.join("\n"));
-  
+  // console.log(logMessages.join("\n"));
+
   const response = NextResponse.next();
   return addSecurityHeaders(response);
 }
 
 export const config = {
-  matcher: ["/server/:path*", "/attach-service/:path*", "/api/link/:path*", "/"],
+  matcher: [
+    "/server/:path*",
+    "/attach-service/:path*",
+    "/api/link/:path*",
+    "/",
+  ],
 };
diff --git a/apps/cs/package.json b/apps/cs/package.json
index 03ec06fcf..b7e1421d8 100644
--- a/apps/cs/package.json
+++ b/apps/cs/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@common/assets": "workspace:*",
+    "@common/auth": "workspace:*",
     "@common/components": "workspace:*",
     "@common/config": "workspace:*",
     "@fontsource-variable/noto-sans-kr": "^5.2.5",
@@ -34,7 +35,7 @@
     "dayjs": "^1.11.13",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.474.0",
-    "next": "15.3.8",
+    "next": "15.5.18",
     "next-qrcode": "^2.5.1",
     "next-themes": "^0.4.6",
     "react-chartjs-2": "^5.3.0",
@@ -52,7 +53,8 @@
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9.0.0",
-    "eslint-config-next": "15.4.0",
+    "eslint-config-next": "15.3.8",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
@@ -60,4 +62,4 @@
     "tailwindcss": "^3.4.14",
     "typescript": "^5.7.2"
   }
-}
\ No newline at end of file
+}
diff --git a/apps/cs/src/app/providers/app-provider.tsx b/apps/cs/src/app/providers/app-provider.tsx
index efd1f308e..31d14ac79 100644
--- a/apps/cs/src/app/providers/app-provider.tsx
+++ b/apps/cs/src/app/providers/app-provider.tsx
@@ -14,8 +14,9 @@ import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 import { SelectPromptDialog } from "@/shared/ui/select-prompt-dialog";
 import { PromptProvider, StoreProvider } from "@/shared/providers";
 
+const queryClient = new QueryClient();
+
 const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
-  const queryClient = new QueryClient();
   return (
     <QueryClientProvider client={queryClient}>
       <StoreProvider>
diff --git a/apps/cs/src/entities/auth/api/auth-service.ts b/apps/cs/src/entities/auth/api/auth-service.ts
new file mode 100644
index 000000000..9837aac8e
--- /dev/null
+++ b/apps/cs/src/entities/auth/api/auth-service.ts
@@ -0,0 +1,112 @@
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  ENDPOINT,
+} from "@/shared/config";
+import { getRemainingMs } from "@common/auth";
+
+import {
+  clearAuthToken,
+  setToken,
+  setupRefreshTimer,
+} from "../lib/token-manager";
+import type { AuthPayload, AuthService } from "../model/auth-interface";
+
+function resolveLoginError(message: string | undefined): string {
+  switch (message) {
+    case "Invalid Credentials":
+      return "아이디와 비밀번호가 일치하지 않습니다.";
+    case "User not found":
+      return "존재하지 않는 아이디입니다.";
+    case "User is not active":
+      return "활성화되지 않은 계정입니다.";
+    case "User is not verified":
+      return "이메일 인증이 필요합니다.";
+    default:
+      return message ?? "로그인에 실패했습니다.";
+  }
+}
+
+async function login(payload: AuthPayload): Promise<void> {
+  const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+
+  const data = await response.json();
+
+  if (!response.ok) {
+    throw new Error(resolveLoginError(data?.message));
+  }
+
+  const accessToken = data[ACCESS_TOKEN] as string | undefined;
+  const tokenId = data[AUTH_USER_ID] as string | undefined;
+
+  if (!accessToken || !tokenId) {
+    throw new Error("인증 토큰을 받지 못했습니다.");
+  }
+
+  setToken(CLAIM_NAME, accessToken);
+  setToken(AUTH_USER_ID, tokenId);
+
+  const remainingMs = getRemainingMs(accessToken);
+  if (remainingMs > 0) {
+    setupRefreshTimer(silentRefresh, remainingMs);
+  }
+}
+
+async function silentRefresh(): Promise<void> {
+  console.log(`[silentRefresh] Called at ${new Date().toISOString()}`);
+  try {
+    const response = await fetch(
+      `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
+      { method: "PUT" },
+    );
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new Error(data?.message ?? "토큰 갱신에 실패했습니다.");
+    }
+
+    const accessToken = data[ACCESS_TOKEN] as string | undefined;
+    const tokenId = data[AUTH_USER_ID] as string | undefined;
+
+    if (!accessToken || !tokenId) {
+      throw new Error("갱신된 인증 토큰을 받지 못했습니다.");
+    }
+
+    setToken(CLAIM_NAME, accessToken);
+    setToken(AUTH_USER_ID, tokenId);
+
+    const remainingMs = getRemainingMs(accessToken);
+    if (remainingMs > 0) {
+      setupRefreshTimer(silentRefresh, remainingMs);
+    }
+  } catch (error) {
+    console.error(
+      `[silentRefresh] Failed at ${new Date().toISOString()}`,
+      error,
+    );
+    clearAuthToken();
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent("auth:logout"));
+    }
+    // re-throw하지 않음: setupRefreshTimer 콜백의 catch와 이중 처리 방지
+  }
+}
+
+async function logout(): Promise<void> {
+  clearAuthToken();
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new CustomEvent("auth:logout"));
+  }
+}
+
+export const authService: AuthService = {
+  login,
+  silentRefresh,
+  logout,
+};
diff --git a/apps/cs/src/entities/auth/api/login-service.ts b/apps/cs/src/entities/auth/api/login-service.ts
deleted file mode 100644
index 671c8bb4c..000000000
--- a/apps/cs/src/entities/auth/api/login-service.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { AxiosError } from "axios";
-import {
-  ENDPOINT,
-  JWT_EXPIRATION_TIME,
-  ACCESS_TOKEN,
-  AUTH_USER_ID,
-  CLAIM_NAME,
-} from "@/shared/config";
-import type { LoginService, ILogin } from "../model/login-interface";
-import { tokenManager } from "../lib/token-manager";
-
-export class LoginApiService implements LoginService {
-  private static instance: LoginApiService;
-
-  private constructor() {}
-
-  public static getInstance(): LoginApiService {
-    if (!LoginApiService.instance) {
-      LoginApiService.instance = new LoginApiService();
-    }
-    return LoginApiService.instance;
-  }
-
-  public async login(payload: ILogin): Promise<void> {
-    try {
-      const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
-        method: "POST",
-        body: JSON.stringify({
-          userId: payload.userId,
-          password: payload.password,
-        }),
-      });
-
-      const data = await response.json();
-      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('이메일 인증이 필요합니다.');
-        } else {
-          throw new Error(data.message);
-        } 
-      }
-
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-      tokenManager.setupRefreshTimer(
-        () => this.silentRefresh(),
-        JWT_EXPIRATION_TIME,
-      );
-    } catch (error) {
-      if (error instanceof AxiosError) {
-        throw new Error(`Login 실패 ${error.response?.data?.message}`);
-      }
-      throw new Error(`Login 실패 ${error}`);
-    }
-  }
-
-  public async silentRefresh(): Promise<void> {
-    try {
-      const response = await fetch(
-        `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-        { method: "PUT" },
-      );
-
-      const data = await response.json();
-      const accessToken = data[ACCESS_TOKEN];
-      const tokenId = data[AUTH_USER_ID];
-
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-    } catch (error) {
-      tokenManager.clearAuthToken();
-      if (error instanceof AxiosError) {
-        throw new Error(
-          `Silent refresh failed: ${error.response?.data?.message}`,
-        );
-      }
-      throw new Error(`Silent refresh failed: ${error}`);
-    }
-  }
-}
-
-export const LoginApi = LoginApiService.getInstance();
diff --git a/apps/cs/src/entities/auth/index.ts b/apps/cs/src/entities/auth/index.ts
index 97e142225..7f0d0081a 100644
--- a/apps/cs/src/entities/auth/index.ts
+++ b/apps/cs/src/entities/auth/index.ts
@@ -1,2 +1,3 @@
-export { LoginApi } from "./api/login-service";
+export { authService } from "./api/auth-service";
 export { AuthWrapper } from "./lib/auth-wrapper";
+export { tokenManager } from "./lib/token-manager";
diff --git a/apps/cs/src/entities/auth/lib/auth-wrapper.tsx b/apps/cs/src/entities/auth/lib/auth-wrapper.tsx
index 57ae75c34..4b6c181a8 100644
--- a/apps/cs/src/entities/auth/lib/auth-wrapper.tsx
+++ b/apps/cs/src/entities/auth/lib/auth-wrapper.tsx
@@ -1,47 +1,84 @@
 "use client";
 
 import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+import { isAxiosError } from "axios";
+
 import { client } from "@/shared/api";
-import type { IUserInfo } from "@/shared/store";
-import { getCookie, useUserStore } from "@/shared/lib";
-import { isAtLoginRedirectUrl } from "@common/network";
 import {
-  ENDPOINT,
-  AUTH_USER_ID,
   AUTH_LOGIN_REDIRECT_URL,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  ENDPOINT,
 } from "@/shared/config";
+import { useUserStore } from "@/shared/lib";
+import type { IUserInfo } from "@/shared/store";
+import { getRemainingMs } from "@common/auth";
+import { isAtLoginRedirectUrl } from "@common/network";
+
+import { authService } from "../api/auth-service";
+
+import { getToken, setupRefreshTimer } from "./token-manager";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const { userInfo, setUserInfo } = useUserStore((state) => state);
-
-  async function authCheck() {
-    if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
-      return;
-    }
-
-    const userId = getCookie(AUTH_USER_ID);
-    if (!userId) {
-      throw new Error("Missing required authentication tokens");
-    }
-
-    const response = await client.get<IUserInfo>(
-      `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
-    );
-    if (!userInfo) setUserInfo(response.data);
-  }
+  const router = useRouter();
+  const userInfo = useUserStore((state) => state.userInfo);
+  const setUserInfo = useUserStore((state) => state.setUserInfo);
 
   useEffect(() => {
-    (async () => {
-      try {
-        await authCheck();
-      } catch (error) {
-        console.error(error);
-        setUserInfo(null);
-        if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
-          window.location.assign(AUTH_LOGIN_REDIRECT_URL);
-        }
+    // 페이지 새로고침 시 silentRefresh 타이머 복구
+    const token = getToken(CLAIM_NAME);
+    if (token) {
+      const remainingMs = getRemainingMs(token);
+      if (remainingMs > 0) {
+        console.log(
+          `[AuthWrapper] Refresh timer set: ${remainingMs}ms (${remainingMs / 1000}s)`,
+        );
+        setupRefreshTimer(authService.silentRefresh, remainingMs);
       }
-    })();
+    }
+
+    if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) return;
+
+    async function authCheck() {
+      const userId = getToken(AUTH_USER_ID);
+      if (!userId) {
+        router.replace(AUTH_LOGIN_REDIRECT_URL);
+        return;
+      }
+
+      if (userInfo) return;
+
+      const response = await client.get<IUserInfo>(
+        `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
+      );
+      setUserInfo(response.data);
+    }
+
+    authCheck().catch((error) => {
+      // 401은 @common/network error-interceptor에서 이미 리다이렉트 처리됨
+      if (isAxiosError(error) && error.response?.status === 401) return;
+
+      console.error(error);
+      setUserInfo(null);
+      if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+        router.replace(AUTH_LOGIN_REDIRECT_URL);
+      }
+    });
+  }, []);
+
+  // silentRefresh 실패 시 auth:logout 이벤트를 수신해 로그인으로 이동
+  useEffect(() => {
+    function handleAuthLogout() {
+      setUserInfo(null);
+      if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+        router.replace(AUTH_LOGIN_REDIRECT_URL);
+      }
+    }
+
+    window.addEventListener("auth:logout", handleAuthLogout);
+    return () => window.removeEventListener("auth:logout", handleAuthLogout);
   }, []);
 
   return <>{children}</>;
diff --git a/apps/cs/src/entities/auth/lib/token-manager.ts b/apps/cs/src/entities/auth/lib/token-manager.ts
index dd9aea352..44aa888aa 100644
--- a/apps/cs/src/entities/auth/lib/token-manager.ts
+++ b/apps/cs/src/entities/auth/lib/token-manager.ts
@@ -1,82 +1,15 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config";
-import { getCookie, setCookie, removeCookie } from "@/shared/lib";
+import { createTokenManager } from "@common/auth";
+import { authConfig } from "@/shared/config/auth";
 
-export class TokenManager {
-  private static instance: TokenManager;
-  private refreshTimer: NodeJS.Timeout | null = null;
+export const tokenManager = createTokenManager(authConfig);
 
-  private constructor() {}
-
-  public static getInstance(): TokenManager {
-    if (!TokenManager.instance) {
-      TokenManager.instance = new TokenManager();
-    }
-    return TokenManager.instance;
-  }
-
-  public getToken(key: string): string | undefined {
-    return getCookie(key);
-  }
-
-  public setToken(key: string, value: string): void {
-    const domain = this.getCookieDomain();
-    
-    setCookie(key, value, {
-      secure: window.location.protocol === "https:",
-      sameSite: "lax",
-      domain: domain,
-      path: "/", // 모든 경로에서 접근 가능
-    });
-  }
-
-  
-  private getCookieDomain(): string | undefined {
-    const hostname = window.location.hostname;
-    
-    // 개발 환경에서는 localhost 도메인 사용
-    if (hostname === "localhost" || hostname === "127.0.0.1") {
-      return undefined; // localhost에서는 도메인 설정하지 않음
-    }
-    
-    // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
-    if (hostname.includes("hasuon.or.kr")) {
-      return ".hasuon.or.kr";
-    }
-    
-    // 기타 환경에서는 현재 호스트명 사용
-    return hostname;
-  }
-
-  public removeToken(key: string): void {
-    const domain = this.getCookieDomain();
-    removeCookie(key, { domain, path: "/" });
-  }
-
-  public setupRefreshTimer(
-    callback: () => Promise<void>,
-    expirationTime: number,
-  ): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-    }
-
-    this.refreshTimer = setTimeout(() => {
-      callback().catch((error) => {
-        console.error("Silent refresh failed:", error);
-        this.clearAuthToken();
-      });
-    }, expirationTime - 60000);
-  }
-
-  public clearAuthToken(): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-
-    this.removeToken(CLAIM_NAME);
-    this.removeToken(AUTH_USER_ID);
-  }
-}
-
-export const tokenManager = TokenManager.getInstance();
+export const {
+  getToken,
+  setToken,
+  removeToken,
+  setupRefreshTimer,
+  clearAuthToken,
+  getAccessToken,
+  getRefreshToken,
+  getUserId,
+} = tokenManager;
diff --git a/apps/cs/src/entities/auth/model/auth-interface.ts b/apps/cs/src/entities/auth/model/auth-interface.ts
new file mode 100644
index 000000000..c4b2d2691
--- /dev/null
+++ b/apps/cs/src/entities/auth/model/auth-interface.ts
@@ -0,0 +1,10 @@
+export interface AuthPayload {
+  userId: string;
+  password: string;
+}
+
+export interface AuthService {
+  login(payload: AuthPayload): Promise<void>;
+  silentRefresh(): Promise<void>;
+  logout(): Promise<void>;
+}
diff --git a/apps/cs/src/entities/auth/model/login-interface.ts b/apps/cs/src/entities/auth/model/login-interface.ts
deleted file mode 100644
index 5aaf53044..000000000
--- a/apps/cs/src/entities/auth/model/login-interface.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface ILogin {
-  userId: string;
-  password: string;
-}
-
-export interface LoginService {
-  login(payload: ILogin): Promise<void>;
-  silentRefresh(): Promise<void>;
-}
diff --git a/apps/cs/src/entities/code/model/lwpocode-interface.ts b/apps/cs/src/entities/code/model/lwpocode-interface.ts
index 2538c1c30..51137294a 100644
--- a/apps/cs/src/entities/code/model/lwpocode-interface.ts
+++ b/apps/cs/src/entities/code/model/lwpocode-interface.ts
@@ -1,5 +1,6 @@
 import { z } from "zod";
-import type { PageableParams, PageableList } from "@/shared/model";
+
+import type { PageableList, PageableParams } from "@/shared/model";
 
 export interface LwpoCodeParams extends PageableParams {
   upCd?: string;
@@ -36,15 +37,14 @@ export interface LwpoCodeDetail extends LwpoCodeFormData {
 }
 
 export const LwpoCodeFormSchema = z.object({
-  lwpoCd: z.string().max(10).nonempty(),
-  upCd: z.string().max(10).nonempty(),
+  lwpoCd: z.string().max(30).nonempty(),
+  upCd: z.string().max(30).nonempty(),
   lwpoCdNm: z.string().max(100).nonempty(),
   lwpoCdExpln: z.string().max(1000).nullish(),
-  unit: z.string().max(20).nullish(),
+  unit: z.string().max(50).nullish(),
   prntLwpoCd: z.string().max(10).nullish(),
   useYn: z.string(),
   sortSeq: z.number(),
-  delYn: z.string(),
 });
 
 export type LwpoCodeFormData = z.infer<typeof LwpoCodeFormSchema>;
diff --git a/apps/cs/src/entities/code/model/upcode-interface.ts b/apps/cs/src/entities/code/model/upcode-interface.ts
index 73bf4f3ae..3738a5d0e 100644
--- a/apps/cs/src/entities/code/model/upcode-interface.ts
+++ b/apps/cs/src/entities/code/model/upcode-interface.ts
@@ -32,10 +32,13 @@ export interface UpCodeDetail extends UpCodeFormData {
 }
 
 export const upCodeFormSchema = z.object({
-  upCd: z.string().max(10).nonempty(),
-  upCdNm: z.string().max(100).nonempty(),
+  upCd: z
+    .string()
+    .max(30, "최대 30자까지 입력할 수 있습니다.")
+    .nonempty("최소 1자 이상 입력해주세요."),
+  upCdNm: z.string().max(100).nonempty("최소 1자 이상 입력해주세요."),
   upCdExpln: z.string().max(1000).nullish(),
-  cdSe: z.string().max(10).nonempty(),
+  cdSe: z.string().max(30).nonempty(),
   siteId: z.string().max(2).nullish(),
   useYn: z.string(),
   delYn: z.string(),
diff --git a/apps/cs/src/entities/editor/model/editor-base-config.ts b/apps/cs/src/entities/editor/model/editor-base-config.ts
index ee465b675..f0684c5c8 100644
--- a/apps/cs/src/entities/editor/model/editor-base-config.ts
+++ b/apps/cs/src/entities/editor/model/editor-base-config.ts
@@ -1,4 +1,4 @@
-import { SERVER_API_URL } from "@/shared/config";
+import { TINY_BASE_URL } from "@/shared/config";
 
 export const editorBaseConfig = {
   // 폐쇄망 환경에서는 API 키 없이 자체 호스팅 모드 사용
@@ -7,7 +7,7 @@ export const editorBaseConfig = {
   licenseKey: "gpl",
   init: {
     language: "ko_KR",
-    language_url: '/tinymce/langs/ko_KR.js', // 직접 호스팅한 경우 경로 지정
+    language_url: "/tinymce/langs/ko_KR.js", // 직접 호스팅한 경우 경로 지정
     height: 500,
     // 폐쇄망 환경을 위한 설정
     base_url: "/tinymce",
@@ -38,7 +38,7 @@ export const editorBaseConfig = {
       "undo redo | blocks fontfamily fontsize | bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist blockquote | table",
       "link image",
     ],
-    images_upload_base_path: SERVER_API_URL,
+    images_upload_base_path: TINY_BASE_URL,
     file_picker_types: "image",
     // 폐쇄망 환경을 위한 추가 설정
     content_css: "/tinymce/skins/content/default/content.min.css",
diff --git a/apps/cs/src/entities/ntftalk/api/ntftalk-biztalk-service.ts b/apps/cs/src/entities/ntftalk/api/ntftalk-biztalk-service.ts
new file mode 100644
index 000000000..85f585360
--- /dev/null
+++ b/apps/cs/src/entities/ntftalk/api/ntftalk-biztalk-service.ts
@@ -0,0 +1,64 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import {
+  type NtftalkBiztalkCheckInspectionResponse,
+  type NtftalkBiztalkInspectionRequestItem,
+  type NtftalkBiztalkInspectionResponse,
+  type NtftalkBiztalkSender,
+  type NtftalkBiztalkService,
+  type NtftalkBiztalkSyncTemplatesParams,
+  type NtftalkBiztalkSyncTemplatesResponse,
+} from "../model/ntftalk-biztalk-interface";
+
+export const NtftalkBiztalkApi: NtftalkBiztalkService = {
+  async getSender(): Promise<NtftalkBiztalkSender> {
+    const response = await client.get<NtftalkBiztalkSender>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_BIZTALK}/sender`,
+    );
+    return response.data;
+  },
+
+  async syncTemplates(
+    params?: NtftalkBiztalkSyncTemplatesParams,
+  ): Promise<NtftalkBiztalkSyncTemplatesResponse> {
+    const response = await client.post<NtftalkBiztalkSyncTemplatesResponse>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_BIZTALK}/sync-templates`,
+      undefined,
+      {
+        params: {
+          senderKeyType: params?.senderKeyType,
+        },
+      },
+    );
+    return response.data;
+  },
+
+  async requestInspection(
+    requestList: NtftalkBiztalkInspectionRequestItem[],
+  ): Promise<NtftalkBiztalkInspectionResponse> {
+    const response = await client.post<NtftalkBiztalkInspectionResponse>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_BIZTALK}/request-inspection`,
+      requestList,
+    );
+    return response.data;
+  },
+
+  async cancelInspection(
+    requestList: NtftalkBiztalkInspectionRequestItem[],
+  ): Promise<NtftalkBiztalkInspectionResponse> {
+    const response = await client.post<NtftalkBiztalkInspectionResponse>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_BIZTALK}/cancel-inspection`,
+      requestList,
+    );
+    return response.data;
+  },
+
+  async checkInspection(
+    templateCode: string,
+  ): Promise<NtftalkBiztalkCheckInspectionResponse> {
+    const response = await client.get<NtftalkBiztalkCheckInspectionResponse>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_BIZTALK}/check-inspection/${encodeURIComponent(templateCode)}`,
+    );
+    return response.data;
+  },
+};
diff --git a/apps/cs/src/entities/ntftalk/api/ntftalk-mmt-log-history-service.ts b/apps/cs/src/entities/ntftalk/api/ntftalk-mmt-log-history-service.ts
new file mode 100644
index 000000000..ebfd90bdf
--- /dev/null
+++ b/apps/cs/src/entities/ntftalk/api/ntftalk-mmt-log-history-service.ts
@@ -0,0 +1,58 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import {
+  type NtftalkMmtLogHistory,
+  type NtftalkMmtLogHistoryPageList,
+  type NtftalkMmtLogHistorySavePayload,
+  type NtftalkMmtLogHistorySearchParams,
+  type NtftalkMmtLogHistoryService,
+  type NtftalkMmtLogHistoryUpdatePayload,
+} from "../model/ntftalk-mmt-log-history-interface";
+
+class NtftalkMmtLogHistoryApiService implements NtftalkMmtLogHistoryService {
+  async getNtftalkMmtLogHistoryPage(
+    params: NtftalkMmtLogHistorySearchParams,
+  ): Promise<NtftalkMmtLogHistoryPageList> {
+    const response = await client.get<NtftalkMmtLogHistoryPageList>(
+      `${ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  async getNtftalkMmtLogHistory(mtPr: number): Promise<NtftalkMmtLogHistory> {
+    const response = await client.get<NtftalkMmtLogHistory>(
+      `${ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY}/${mtPr}`,
+    );
+    return response.data;
+  }
+
+  async saveNtftalkMmtLogHistory(
+    payload: NtftalkMmtLogHistorySavePayload,
+  ): Promise<NtftalkMmtLogHistory> {
+    const response = await client.post<NtftalkMmtLogHistory>(
+      `${ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY}`,
+      payload,
+    );
+    return response.data;
+  }
+
+  async updateNtftalkMmtLogHistory(
+    mtPr: number,
+    payload: NtftalkMmtLogHistoryUpdatePayload,
+  ): Promise<NtftalkMmtLogHistory> {
+    const response = await client.put<NtftalkMmtLogHistory>(
+      `${ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY}/${mtPr}`,
+      payload,
+    );
+    return response.data;
+  }
+
+  async deleteNtftalkMmtLogHistory(mtPr: number): Promise<void> {
+    await client.delete(
+      `${ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY}/${mtPr}`,
+    );
+  }
+}
+
+export const NtftalkMmtLogHistoryApi = new NtftalkMmtLogHistoryApiService();
diff --git a/apps/cs/src/entities/ntftalk/api/ntftalk-temp-service.ts b/apps/cs/src/entities/ntftalk/api/ntftalk-temp-service.ts
new file mode 100644
index 000000000..91ccf6561
--- /dev/null
+++ b/apps/cs/src/entities/ntftalk/api/ntftalk-temp-service.ts
@@ -0,0 +1,64 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+
+import {
+  type NtftalkTemp,
+  type NtftalkTempDeleteMultiPayload,
+  type NtftalkTempPageList,
+  type NtftalkTempSavePayload,
+  type NtftalkTempSearchParams,
+  type NtftalkTempService,
+  type NtftalkTempUpdatePayload,
+} from "../model/ntftalk-temp-interface";
+
+class NtftalkTempApiService implements NtftalkTempService {
+  async getNtftalkTempPage(
+    params: NtftalkTempSearchParams,
+  ): Promise<NtftalkTempPageList> {
+    const response = await client.get<NtftalkTempPageList>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  async getNtftalkTemp(templateCode: string): Promise<NtftalkTemp> {
+    const response = await client.get<NtftalkTemp>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP}/${encodeURIComponent(templateCode)}`,
+    );
+    return response.data;
+  }
+
+  async saveNtftalkTemp(payload: NtftalkTempSavePayload): Promise<NtftalkTemp> {
+    const response = await client.post<NtftalkTemp>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP}`,
+      payload,
+    );
+    return response.data;
+  }
+
+  async updateNtftalkTemp(
+    templateCode: string,
+    payload: NtftalkTempUpdatePayload,
+  ): Promise<NtftalkTemp> {
+    const response = await client.put<NtftalkTemp>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP}/${encodeURIComponent(templateCode)}`,
+      payload,
+    );
+    return response.data;
+  }
+
+  async deleteNtftalkTemp(templateCode: string): Promise<void> {
+    await client.delete(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP}/${encodeURIComponent(templateCode)}`,
+    );
+  }
+
+  async deleteMultiNtftalkTemp(
+    payload: NtftalkTempDeleteMultiPayload,
+  ): Promise<void> {
+    await client.post(`${ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP}/delmulti`, payload);
+  }
+}
+
+export const NtftalkTempApi = new NtftalkTempApiService();
diff --git a/apps/cs/src/entities/ntftalk/api/ntftalk-var-service.ts b/apps/cs/src/entities/ntftalk/api/ntftalk-var-service.ts
new file mode 100644
index 000000000..88adfd477
--- /dev/null
+++ b/apps/cs/src/entities/ntftalk/api/ntftalk-var-service.ts
@@ -0,0 +1,59 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+
+import {
+  type NtftalkVar,
+  type NtftalkVarPageList,
+  type NtftalkVarSavePayload,
+  type NtftalkVarSearchParams,
+  type NtftalkVarService,
+  type NtftalkVarUpdatePayload,
+} from "../model/ntftalk-var-interface";
+
+class NtftalkVarApiService implements NtftalkVarService {
+  async getNtftalkVarPage(
+    params: NtftalkVarSearchParams,
+  ): Promise<NtftalkVarPageList> {
+    const response = await client.get<NtftalkVarPageList>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_VAR}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  async getNtftalkVar(varCd: string): Promise<NtftalkVar> {
+    const response = await client.get<NtftalkVar>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_VAR}/${encodeURIComponent(varCd)}`,
+    );
+    return response.data;
+  }
+
+  async saveNtftalkVar(
+    payload: NtftalkVarSavePayload[],
+  ): Promise<NtftalkVar[]> {
+    const response = await client.post<NtftalkVar[]>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_VAR}`,
+      payload,
+    );
+    return response.data;
+  }
+
+  async updateNtftalkVar(
+    varCd: string,
+    payload: NtftalkVarUpdatePayload,
+  ): Promise<NtftalkVar> {
+    const response = await client.put<NtftalkVar>(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_VAR}/${encodeURIComponent(varCd)}`,
+      payload,
+    );
+    return response.data;
+  }
+
+  async deleteNtftalkVar(varCd: string): Promise<void> {
+    await client.delete(
+      `${ENDPOINT.NTFTALK_SERVICE.NTFTALK_VAR}/${encodeURIComponent(varCd)}`,
+    );
+  }
+}
+
+export const NtftalkVarApi = new NtftalkVarApiService();
diff --git a/apps/cs/src/entities/ntftalk/index.ts b/apps/cs/src/entities/ntftalk/index.ts
new file mode 100644
index 000000000..0210af8a4
--- /dev/null
+++ b/apps/cs/src/entities/ntftalk/index.ts
@@ -0,0 +1,37 @@
+export { NtftalkVarApi } from "./api/ntftalk-var-service";
+export { NtftalkTempApi } from "./api/ntftalk-temp-service";
+export { NtftalkBiztalkApi } from "./api/ntftalk-biztalk-service";
+export { NtftalkMmtLogHistoryApi } from "./api/ntftalk-mmt-log-history-service";
+export type {
+  NtftalkVar,
+  NtftalkVarPageList,
+  NtftalkVarSavePayload,
+  NtftalkVarSearchParams,
+  NtftalkVarUpdatePayload,
+} from "./model/ntftalk-var-interface";
+export type {
+  NtftalkBiztalkCheckInspectionResponse,
+  NtftalkBiztalkInspectionRequestItem,
+  NtftalkBiztalkInspectionResponse,
+  NtftalkBiztalkSender,
+  NtftalkBiztalkSyncTemplatesParams,
+  NtftalkBiztalkSyncTemplatesResponse,
+} from "./model/ntftalk-biztalk-interface";
+export type {
+  NtftalkBtnTemp,
+  NtftalkBtnTempSavePayload,
+  NtftalkQuickTemp,
+  NtftalkQuickTempSavePayload,
+  NtftalkTemp,
+  NtftalkTempPageList,
+  NtftalkTempSavePayload,
+  NtftalkTempSearchParams,
+  NtftalkTempUpdatePayload,
+} from "./model/ntftalk-temp-interface";
+export type {
+  NtftalkMmtLogHistory,
+  NtftalkMmtLogHistoryPageList,
+  NtftalkMmtLogHistorySavePayload,
+  NtftalkMmtLogHistorySearchParams,
+  NtftalkMmtLogHistoryUpdatePayload,
+} from "./model/ntftalk-mmt-log-history-interface";
diff --git a/apps/cs/src/entities/ntftalk/model/ntftalk-biztalk-interface.ts b/apps/cs/src/entities/ntftalk/model/ntftalk-biztalk-interface.ts
new file mode 100644
index 000000000..824eb00d5
--- /dev/null
+++ b/apps/cs/src/entities/ntftalk/model/ntftalk-biztalk-interface.ts
@@ -0,0 +1,48 @@
+export interface NtftalkBiztalkSender {
+  senderKey: string;
+  name: string;
+  uuid: string;
+  status: string;
+}
+
+export interface NtftalkBiztalkSyncTemplatesParams {
+  senderKeyType?: string;
+}
+
+export interface NtftalkBiztalkSyncTemplatesResponse {
+  syncCount: number;
+  message: string;
+}
+
+export interface NtftalkBiztalkInspectionRequestItem {
+  senderKey: string;
+  templateCode: string;
+  senderKeyType: string;
+}
+
+export interface NtftalkBiztalkInspectionResponse {
+  processedCount: number;
+  message: string;
+}
+
+export interface NtftalkBiztalkCheckInspectionResponse {
+  templateCode: string;
+  approved: boolean;
+  message: string;
+}
+
+export interface NtftalkBiztalkService {
+  getSender(): Promise<NtftalkBiztalkSender>;
+  syncTemplates(
+    params?: NtftalkBiztalkSyncTemplatesParams,
+  ): Promise<NtftalkBiztalkSyncTemplatesResponse>;
+  requestInspection(
+    requestList: NtftalkBiztalkInspectionRequestItem[],
+  ): Promise<NtftalkBiztalkInspectionResponse>;
+  cancelInspection(
+    requestList: NtftalkBiztalkInspectionRequestItem[],
+  ): Promise<NtftalkBiztalkInspectionResponse>;
+  checkInspection(
+    templateCode: string,
+  ): Promise<NtftalkBiztalkCheckInspectionResponse>;
+}
diff --git a/apps/cs/src/entities/ntftalk/model/ntftalk-mmt-log-history-interface.ts b/apps/cs/src/entities/ntftalk/model/ntftalk-mmt-log-history-interface.ts
new file mode 100644
index 000000000..9f272d1ac
--- /dev/null
+++ b/apps/cs/src/entities/ntftalk/model/ntftalk-mmt-log-history-interface.ts
@@ -0,0 +1,84 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface NtftalkMmtLogHistorySearchParams extends PageableParams {
+  subject?: string;
+  content?: string;
+  recipientNum?: string;
+  /** 1:전송대기, 2:결과대기, 3:완료 */
+  msgStatus?: string;
+  /** 1000:성공 */
+  reportCode?: string;
+  /** yyyy-MM-dd */
+  dateFrom?: string;
+  /** yyyy-MM-dd */
+  dateTo?: string;
+  /** ADSS | CWMS | PORT | ALL */
+  system?: string;
+  /** SUCCESS | FAIL | ALL */
+  successYn?: string;
+}
+
+export interface NtftalkMmtLogHistory {
+  mtPr: number;
+  mtRefkey?: string | null;
+  priority?: string | null;
+  dateClientReq?: string | null;
+  subject?: string | null;
+  content?: string | null;
+  callback?: string | null;
+  msgStatus?: string | null;
+  recipientNum?: string | null;
+  dateMtSent?: string | null;
+  dateRslt?: string | null;
+  dateMtReport?: string | null;
+  reportCode?: string | null;
+  countryCode?: string | null;
+  msgType?: number | null;
+  regDate?: string | null;
+  senderKey?: string | null;
+  templateCode?: string | null;
+  siteSystem?: string | null;
+  successYn?: string | null;
+}
+
+export interface NtftalkMmtLogHistorySavePayload {
+  mtPr: number;
+  mtRefkey?: string;
+  priority?: string;
+  dateClientReq?: string;
+  subject: string;
+  content: string;
+  callback: string;
+  msgStatus?: string;
+  recipientNum: string;
+  reportCode?: string;
+  countryCode?: string;
+  msgType?: number;
+  senderKey: string;
+  templateCode?: string;
+  responseMethod?: string;
+}
+
+export interface NtftalkMmtLogHistoryUpdatePayload {
+  content: string;
+  recipientNum: string;
+  msgStatus?: string;
+  reportCode?: string;
+}
+
+export type NtftalkMmtLogHistoryPageList = PageableList<NtftalkMmtLogHistory>;
+
+export interface NtftalkMmtLogHistoryService {
+  getNtftalkMmtLogHistoryPage(
+    params: NtftalkMmtLogHistorySearchParams,
+  ): Promise<NtftalkMmtLogHistoryPageList>;
+  getNtftalkMmtLogHistory(mtPr: number): Promise<NtftalkMmtLogHistory>;
+  saveNtftalkMmtLogHistory(
+    payload: NtftalkMmtLogHistorySavePayload,
+  ): Promise<NtftalkMmtLogHistory>;
+  updateNtftalkMmtLogHistory(
+    mtPr: number,
+    payload: NtftalkMmtLogHistoryUpdatePayload,
+  ): Promise<NtftalkMmtLogHistory>;
+  deleteNtftalkMmtLogHistory(mtPr: number): Promise<void>;
+}
diff --git a/apps/cs/src/entities/ntftalk/model/ntftalk-temp-interface.ts b/apps/cs/src/entities/ntftalk/model/ntftalk-temp-interface.ts
new file mode 100644
index 000000000..5149ad230
--- /dev/null
+++ b/apps/cs/src/entities/ntftalk/model/ntftalk-temp-interface.ts
@@ -0,0 +1,122 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface NtftalkTempSearchParams extends PageableParams {
+  templateCode?: string;
+  templateName?: string;
+  /** 백엔드 스펙 확정 시 전달 */
+  templateContent?: string;
+  inspectionStatus?: string;
+  senderKey?: string;
+  status?: string;
+  /** 백엔드 스펙 확정 시 전달 */
+  templateMessageType?: string;
+}
+
+export interface NtftalkBtnTemp {
+  templateCode: string;
+  name: string;
+  ordering: number;
+  linkType: string;
+  linkMo: string;
+  linkPc: string;
+  linkAnd: string;
+  linkIos: string;
+}
+
+export interface NtftalkQuickTemp {
+  templateCode: string;
+  name: string;
+  linkType: string;
+  linkMo: string;
+  linkPc: string;
+  linkAnd: string;
+  linkIos: string;
+}
+
+export interface NtftalkTemp {
+  templateCode: string;
+  senderKey: string;
+  senderKeyType: string;
+  templateName: string;
+  templateContent: string;
+  templateMessageType: string;
+  templateMessageTypeNm: string;
+  templateEmphasizeType: string;
+  templateEmphasizeTypeNm: string;
+  templateImageUrl: string;
+  inspectionStatus: string;
+  inspectionStatusNm: string;
+  pcflag: string;
+  status: string;
+  statusNm: string;
+  createdAt: string;
+  modifiedAt: string;
+  buttons?: NtftalkBtnTemp[];
+  quickReplies?: NtftalkQuickTemp[];
+}
+
+export interface NtftalkBtnTempSavePayload {
+  templateCode?: string;
+  name: string;
+  ordering: number;
+  linkType: string;
+  linkMo?: string;
+  linkPc?: string;
+  linkAnd?: string;
+  linkIos?: string;
+}
+
+export interface NtftalkQuickTempSavePayload {
+  templateCode?: string;
+  name: string;
+  linkType: string;
+  linkMo?: string;
+  linkPc?: string;
+  linkAnd?: string;
+  linkIos?: string;
+}
+
+export interface NtftalkTempSavePayload {
+  templateCode: string;
+  senderKey: string;
+  senderKeyType: string;
+  templateName: string;
+  templateContent: string;
+  templateMessageType: string;
+  templateEmphasizeType: string;
+  templateImageUrl?: string;
+  inspectionStatus?: string;
+  pcflag?: string;
+  buttons?: NtftalkBtnTempSavePayload[];
+  quickReplies?: NtftalkQuickTempSavePayload[];
+}
+
+export interface NtftalkTempUpdatePayload {
+  templateName: string;
+  templateContent: string;
+  inspectionStatus?: string;
+  status?: string;
+  pcflag?: string;
+  buttons?: NtftalkBtnTempSavePayload[];
+  quickReplies?: NtftalkQuickTempSavePayload[];
+}
+
+export interface NtftalkTempDeleteMultiPayload {
+  templateCodes: string[];
+}
+
+export type NtftalkTempPageList = PageableList<NtftalkTemp>;
+
+export interface NtftalkTempService {
+  getNtftalkTempPage(
+    params: NtftalkTempSearchParams,
+  ): Promise<NtftalkTempPageList>;
+  getNtftalkTemp(templateCode: string): Promise<NtftalkTemp>;
+  saveNtftalkTemp(payload: NtftalkTempSavePayload): Promise<NtftalkTemp>;
+  updateNtftalkTemp(
+    templateCode: string,
+    payload: NtftalkTempUpdatePayload,
+  ): Promise<NtftalkTemp>;
+  deleteNtftalkTemp(templateCode: string): Promise<void>;
+  deleteMultiNtftalkTemp(payload: NtftalkTempDeleteMultiPayload): Promise<void>;
+}
diff --git a/apps/cs/src/entities/ntftalk/model/ntftalk-var-interface.ts b/apps/cs/src/entities/ntftalk/model/ntftalk-var-interface.ts
new file mode 100644
index 000000000..7bfc1d0e6
--- /dev/null
+++ b/apps/cs/src/entities/ntftalk/model/ntftalk-var-interface.ts
@@ -0,0 +1,56 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface NtftalkVarSearchParams extends PageableParams {
+  varCd?: string;
+  varNm?: string;
+  regr?: string;
+}
+
+export interface NtftalkVar {
+  varCd: string;
+  sender: string;
+  varNm: string;
+  varDesc: string;
+  regDt?: string;
+  regr: string;
+}
+
+export type NtftalkVarSavePayload =
+  | {
+      mode: "C";
+      varCd: string;
+      varNm: string;
+      sender?: string;
+      varDesc?: string;
+      regr?: string;
+    }
+  | {
+      mode: "U";
+      varCd: string;
+      varNm: string;
+      varDesc?: string;
+    }
+  | {
+      mode: "D";
+      varCd: string;
+    };
+
+export interface NtftalkVarUpdatePayload {
+  varNm: string;
+  varDesc?: string;
+}
+
+export type NtftalkVarPageList = PageableList<NtftalkVar>;
+
+export interface NtftalkVarService {
+  getNtftalkVarPage(
+    params: NtftalkVarSearchParams,
+  ): Promise<NtftalkVarPageList>;
+  getNtftalkVar(varCd: string): Promise<NtftalkVar>;
+  saveNtftalkVar(payload: NtftalkVarSavePayload[]): Promise<NtftalkVar[]>;
+  updateNtftalkVar(
+    varCd: string,
+    payload: NtftalkVarUpdatePayload,
+  ): Promise<NtftalkVar>;
+  deleteNtftalkVar(varCd: string): Promise<void>;
+}
diff --git a/apps/cs/src/entities/site/api/site-service.ts b/apps/cs/src/entities/site/api/site-service.ts
index a5d9d7cd6..342816d72 100644
--- a/apps/cs/src/entities/site/api/site-service.ts
+++ b/apps/cs/src/entities/site/api/site-service.ts
@@ -1,12 +1,13 @@
 import { client } from "@/shared/api";
 import { ENDPOINT } from "@/shared/config";
+
 import {
-  siteFormSchema,
-  type SiteService,
-  type SiteList,
   type SiteDetail,
-  type SiteParams,
   type SiteFormData,
+  siteFormSchema,
+  type SiteList,
+  type SiteParams,
+  type SiteService,
 } from "../model/site-interface";
 
 export class SiteApiService implements SiteService {
@@ -36,9 +37,10 @@ export class SiteApiService implements SiteService {
 
   public async updateSite(siteId: string, data: SiteFormData): Promise<void> {
     const validatedData = siteFormSchema.parse(data);
+    const { siteId: _, ...rest } = validatedData;
     const response = await client.put<void>(
       `${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`,
-      validatedData,
+      rest,
     );
     return response.data;
   }
diff --git a/apps/cs/src/entities/user/model/user-interface.ts b/apps/cs/src/entities/user/model/user-interface.ts
index 012fe9e92..5f4524eb0 100644
--- a/apps/cs/src/entities/user/model/user-interface.ts
+++ b/apps/cs/src/entities/user/model/user-interface.ts
@@ -1,4 +1,5 @@
 import { z } from "zod";
+
 import type { PageableList, PageableParams } from "@/shared/model";
 
 export const USER_STATE_CODE = {
@@ -153,6 +154,7 @@ export const userUpdateSchema = z.object({
   autzrId: z.string().uuid().optional(),
   expryYmd: z.string().max(8),
   instSeCd: z.string().optional(),
+  instSeNm: z.string().optional(),
   dtlInstCd: z.string().optional(),
   aprvYmd: z.string().max(8).optional(),
   enoCd: z.string().optional(),
diff --git a/apps/cs/src/pages/(post)/faq/ui/faq-page.tsx b/apps/cs/src/pages/(post)/faq/ui/faq-page.tsx
index f23a70663..1953ea763 100644
--- a/apps/cs/src/pages/(post)/faq/ui/faq-page.tsx
+++ b/apps/cs/src/pages/(post)/faq/ui/faq-page.tsx
@@ -101,7 +101,7 @@ function FaqPage({ bbsId }: { bbsId: string }) {
     alert("삭제되었습니다.");
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     refetch();
   };
diff --git a/apps/cs/src/pages/admin/ui/add-admin-dialog.tsx b/apps/cs/src/pages/admin/ui/add-admin-dialog.tsx
index c49d75530..5cebb8dfb 100644
--- a/apps/cs/src/pages/admin/ui/add-admin-dialog.tsx
+++ b/apps/cs/src/pages/admin/ui/add-admin-dialog.tsx
@@ -174,7 +174,7 @@ function AddAdminDialog() {
     }
   };
 
-  const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSearch = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     e.stopPropagation();
     setPagination({ pageIndex: 0, pageSize: 10 });
diff --git a/apps/cs/src/pages/admin/ui/admin-page.tsx b/apps/cs/src/pages/admin/ui/admin-page.tsx
index c2d3aa5af..4874f6525 100644
--- a/apps/cs/src/pages/admin/ui/admin-page.tsx
+++ b/apps/cs/src/pages/admin/ui/admin-page.tsx
@@ -1,17 +1,29 @@
 "use client";
 
 import { useState } from "react";
+
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   getCoreRowModel,
   type PaginationState,
+  type Row,
   type RowSelectionState,
   type Table,
-  type Row,
 } from "@tanstack/react-table";
+
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useDataTable } from "@/shared/lib";
+import { GroupApi } from "@/entities/group";
+import { GroupUsersApi } from "@/entities/group-user";
+import {
+  type AdminUserListResponse,
+  UserApi,
+  type UserSearchParams,
+} from "@/entities/user";
 import {
   Button,
+  Checkbox,
   Input,
   Label,
   Select,
@@ -19,18 +31,10 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  Checkbox,
 } from "@common/components";
-import { GroupApi } from "@/entities/group";
-import {
-  UserApi,
-  type UserSearchParams,
-  type AdminUserListResponse,
-} from "@/entities/user";
-import { GroupUsersApi } from "@/entities/group-user";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable, useAlertStore } from "@/shared/lib";
+
 import { columns } from "../model/table-columns";
+
 import { AddAdminDialog } from "./add-admin-dialog";
 
 function AdminPage() {
@@ -125,7 +129,7 @@ function AdminPage() {
     },
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,
diff --git a/apps/cs/src/pages/apilog/ui/apilog-page.tsx b/apps/cs/src/pages/apilog/ui/apilog-page.tsx
index ab98a1931..b2c273005 100644
--- a/apps/cs/src/pages/apilog/ui/apilog-page.tsx
+++ b/apps/cs/src/pages/apilog/ui/apilog-page.tsx
@@ -75,7 +75,7 @@ function ApiLogPage() {
     },
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,
diff --git a/apps/cs/src/pages/auth/login/ui/login-page.tsx b/apps/cs/src/pages/auth/login/ui/login-page.tsx
index fd1e2f809..6a7fe120d 100644
--- a/apps/cs/src/pages/auth/login/ui/login-page.tsx
+++ b/apps/cs/src/pages/auth/login/ui/login-page.tsx
@@ -2,14 +2,16 @@
 
 import { useState } from "react";
 import Image from "next/image";
+
+import { authService } from "@/entities/auth";
 import { images } from "@common/assets";
-import { LoginApi } from "@/entities/auth";
+
 import "./login.css";
 
 function LoginPage() {
   const [errorMessage, setErrorMessage] = useState<string>("");
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setErrorMessage(""); // 에러 메시지 초기화
 
@@ -18,7 +20,7 @@ function LoginPage() {
     const password = formData.get("password") as string;
 
     try {
-      await LoginApi.login({ userId, password });
+      await authService.login({ userId, password });
       window.location.href = "/dashboard";
     } catch (error) {
       const message =
@@ -32,11 +34,13 @@ function LoginPage() {
       <div className="left_box fx">
         <div className="text">
           <h1>
-            하수도정보시스템
+            유역하수도통합플랫폼
             <br />
-            <span>CMS 통합관리시스템</span>
+            <span>하수도플랫폼 통합관리(CMS)시스템</span>
           </h1>
-          <p>하수도정보시스템 CMS 통합관리시스템에 오신 것을 환영합니다.</p>
+          <p>
+            유역하수도통합플랫폼 통합관리(CMS)시스템에 오신 것을 환영합니다.
+          </p>
         </div>
         <div className="img">
           <Image src={images.logo} width={229} height={46} alt="logo" />
diff --git a/apps/cs/src/pages/banner/ui/banner-page.tsx b/apps/cs/src/pages/banner/ui/banner-page.tsx
index 81435f010..4e1e4733c 100644
--- a/apps/cs/src/pages/banner/ui/banner-page.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-page.tsx
@@ -1,20 +1,25 @@
 "use client";
 
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { useQuery } from "@tanstack/react-query";
+
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
+  type OnChangeFn,
   type PaginationState,
   type RowSelectionState,
 } from "@tanstack/react-table";
-import { Button, Input, Label } from "@common/components";
-import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
+
 import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
+import { useDataTable, useSearchParamsState } from "@/shared/lib";
+import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
+import { Button, Input, Label } from "@common/components";
+
 import { BannerApi } from "../api/banner-service";
+import { type Banner } from "../model/banner-interface";
 import { createColumns } from "../model/banner-table-columns";
-import { type Banner, type BannerParams } from "../model/banner-interface";
+
 import { PreviewBannerDialog } from "./preview-banner-dialog";
 
 type PostingTarget = {
@@ -22,50 +27,52 @@ type PostingTarget = {
   pstgTrgtNo: number;
 };
 
+const DEFAULT_PARAMS = {
+  bnrTtl: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
+
 function BannerPage() {
   const router = useRouter();
   const imageRefs = useRef<Map<number, string>>(new Map());
-
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
-  const [bnrTtl, setBnrTtl] = useState("");
-  const [searchParams, setSearchParams] = useState<BannerParams>({
-    bnrTtl: "",
-    sort: "regDt,desc",
-  });
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  const [bnrTtl, setBnrTtl] = useState(params.bnrTtl);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.BANNERS, searchParams, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.BANNERS, params],
     queryFn: () =>
       BannerApi.getBannerList({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
+        bnrTtl: params.bnrTtl,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
+    placeholderData: keepPreviousData,
   });
 
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setPagination({
-      ...pagination,
-      pageIndex: 0,
-    });
-    setSearchParams({
-      ...searchParams,
-      bnrTtl,
-    });
+    setParams({ bnrTtl, page: 0 });
   };
 
   const handleReset = () => {
     setBnrTtl("");
-    setSearchParams({
-      ...searchParams,
-      bnrTtl: "",
-    });
+    resetParams();
   };
 
   const handleRowClick = (row: Banner) => {
@@ -92,7 +99,7 @@ function BannerPage() {
       manualPagination: true,
       enableMultiRowSelection: true,
       getCoreRowModel: getCoreRowModel(),
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
       onRowSelectionChange: setRowSelection,
     },
     dataTableOptions: {
diff --git a/apps/cs/src/pages/bbs/ui/bbs-page.tsx b/apps/cs/src/pages/bbs/ui/bbs-page.tsx
index 509f83cb7..27d0fb879 100644
--- a/apps/cs/src/pages/bbs/ui/bbs-page.tsx
+++ b/apps/cs/src/pages/bbs/ui/bbs-page.tsx
@@ -2,12 +2,19 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { useQuery } from "@tanstack/react-query";
+
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
+  type OnChangeFn,
   type PaginationState,
   type RowSelectionState,
 } from "@tanstack/react-table";
+
+import { ENDPOINT } from "@/shared/config";
+import { useDataTable, useSearchParamsState } from "@/shared/lib";
+import { type Board, BoardApi } from "@/entities/board";
+import { CodeSelect } from "@/entities/code";
 import {
   Button,
   Input,
@@ -18,60 +25,57 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@common/components";
-import { CodeSelect } from "@/entities/code";
-import { BoardApi, type BoardParams } from "@/entities/board";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
-import { type Board } from "@/entities/board";
+
 import { columns } from "../model/table-columns";
 
+const DEFAULT_PARAMS = {
+  bbsTypeCd: "",
+  bbsNm: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
+
 function BbsPage() {
   const router = useRouter();
-
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [bbsTypeCd, setBbsTypeCd] = useState("");
-  const [bbsNm, setBbsNm] = useState("");
-  const [searchParams, setSearchParams] = useState<BoardParams>({
-    bbsTypeCd: "",
-    bbsNm: "",
-    sort: "regDt,desc",
-  });
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  const [bbsTypeCd, setBbsTypeCd] = useState(params.bbsTypeCd);
+  const [bbsNm, setBbsNm] = useState(params.bbsNm);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.BOARD_SERVICE.BBS, searchParams, pagination],
+    queryKey: [ENDPOINT.BOARD_SERVICE.BBS, params],
     queryFn: () =>
       BoardApi.getBoardList({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
+        bbsTypeCd: params.bbsTypeCd,
+        bbsNm: params.bbsNm,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
+    placeholderData: keepPreviousData,
   });
 
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setPagination({
-      ...pagination,
-      pageIndex: 0,
-    });
-    setSearchParams({
-      ...searchParams,
-      bbsTypeCd,
-      bbsNm,
-    });
+    setParams({ bbsTypeCd, bbsNm, page: 0 });
   };
 
   const handleReset = () => {
     setBbsTypeCd("");
     setBbsNm("");
-    setSearchParams({
-      ...searchParams,
-      bbsTypeCd: "",
-      bbsNm: "",
-    });
+    resetParams();
   };
 
   const handleRowClick = (row: Board) => {
@@ -89,7 +93,7 @@ function BbsPage() {
       manualPagination: true,
       enableMultiRowSelection: true,
       getCoreRowModel: getCoreRowModel(),
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
       onRowSelectionChange: setRowSelection,
     },
     dataTableOptions: {
diff --git a/apps/cs/src/pages/board-statistics/ui/board-statistics-page.tsx b/apps/cs/src/pages/board-statistics/ui/board-statistics-page.tsx
index 716c390ab..495f5d9f6 100644
--- a/apps/cs/src/pages/board-statistics/ui/board-statistics-page.tsx
+++ b/apps/cs/src/pages/board-statistics/ui/board-statistics-page.tsx
@@ -107,7 +107,7 @@ function BoardStatisticsPage() {
     setPresetDateRange("");
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     const params: BoardStatisticsParams = {
       siteId,
diff --git a/apps/cs/src/pages/code/model/upcode-table-columns.tsx b/apps/cs/src/pages/code/model/upcode-table-columns.tsx
index c35ea4d70..5c9108543 100644
--- a/apps/cs/src/pages/code/model/upcode-table-columns.tsx
+++ b/apps/cs/src/pages/code/model/upcode-table-columns.tsx
@@ -1,8 +1,11 @@
-import dayjs from "dayjs";
 import { useState } from "react";
+
 import type { ColumnDef } from "@tanstack/react-table";
-import { Button } from "@common/components";
+import dayjs from "dayjs";
+
 import type { UpCode } from "@/entities/code";
+import { Button } from "@common/components";
+
 import { UpCodeManagementDialog } from "../ui/upcode-dialog";
 
 export const columns: ColumnDef<UpCode>[] = [
@@ -24,7 +27,7 @@ export const columns: ColumnDef<UpCode>[] = [
     header: "상위코드명",
   },
   {
-    accessorKey: "cdSe",
+    accessorKey: "cdSeNm",
     header: "코드구분",
   },
   {
diff --git a/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx b/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx
index 3179303dd..69dd31aa2 100644
--- a/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx
+++ b/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx
@@ -103,7 +103,6 @@ const LwpoCodeManagementDialog = memo(
         prntLwpoCd: detailData?.prntLwpoCd ?? "",
         useYn: detailData?.useYn ?? "Y",
         sortSeq: detailData?.sortSeq ?? 0,
-        delYn: "N",
       },
     });
 
diff --git a/apps/cs/src/pages/code/ui/lwpocode-section.tsx b/apps/cs/src/pages/code/ui/lwpocode-section.tsx
index 61726a6b8..fb8fcd91c 100644
--- a/apps/cs/src/pages/code/ui/lwpocode-section.tsx
+++ b/apps/cs/src/pages/code/ui/lwpocode-section.tsx
@@ -65,7 +65,7 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
     dataTableOptions: { viewPagination: true },
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,
diff --git a/apps/cs/src/pages/code/ui/upcode-dialog.tsx b/apps/cs/src/pages/code/ui/upcode-dialog.tsx
index 6774bd17e..d54030cca 100644
--- a/apps/cs/src/pages/code/ui/upcode-dialog.tsx
+++ b/apps/cs/src/pages/code/ui/upcode-dialog.tsx
@@ -31,7 +31,13 @@ import {
 import { SiteSelect } from "@/entities/site";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore, useMutationWrapper } from "@/shared/lib";
-import { Form, FormField, FormItem, FormControl } from "@/shared/ui/form";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormControl,
+  FormMessage,
+} from "@/shared/ui/form";
 
 type UpCodeManagementDialogProps = {
   upCd?: string;
@@ -139,6 +145,7 @@ const UpCodeManagementDialog = memo(
                                 disabled={!isRegistration}
                               />
                             </FormControl>
+                            <FormMessage />
                           </FormItem>
                         )}
                       />
@@ -160,6 +167,7 @@ const UpCodeManagementDialog = memo(
                                 placeholder="상위코드명을 입력해주세요"
                               />
                             </FormControl>
+                            <FormMessage />
                           </FormItem>
                         )}
                       />
diff --git a/apps/cs/src/pages/code/ui/upcode-section.tsx b/apps/cs/src/pages/code/ui/upcode-section.tsx
index ef89d2d3a..cd67725cf 100644
--- a/apps/cs/src/pages/code/ui/upcode-section.tsx
+++ b/apps/cs/src/pages/code/ui/upcode-section.tsx
@@ -40,7 +40,7 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
     handleSelectedUpCd(row.upCd);
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,
diff --git a/apps/cs/src/pages/contents/ui/contents-page.tsx b/apps/cs/src/pages/contents/ui/contents-page.tsx
index 51ba5c7c0..bda7c9ed6 100644
--- a/apps/cs/src/pages/contents/ui/contents-page.tsx
+++ b/apps/cs/src/pages/contents/ui/contents-page.tsx
@@ -2,60 +2,64 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
-import { Button, Input, Label } from "@common/components";
 import {
-  ContentsApi,
-  type Contents,
-  type ContentsParams,
-} from "@/entities/content";
+  getCoreRowModel,
+  type OnChangeFn,
+  type PaginationState,
+} from "@tanstack/react-table";
+
 import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
+import { useDataTable, useSearchParamsState } from "@/shared/lib";
+import { type Contents, ContentsApi } from "@/entities/content";
+import { Button, Input, Label } from "@common/components";
+
 import { columns } from "../model/table-columns";
 
+const DEFAULT_PARAMS = {
+  contsTtl: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
+
 function ContentsPage() {
   const router = useRouter();
-
-  const [contsTtl, setContsTtl] = useState("");
-  const [searchParams, setSearchParams] = useState<ContentsParams>({
-    contsTtl: "",
-    sort: "regDt,desc",
-  });
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
+  const [contsTtl, setContsTtl] = useState(params.contsTtl);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.CONTENTS, searchParams, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.CONTENTS, params],
     queryFn: () =>
       ContentsApi.getContentsList({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
+        contsTtl: params.contsTtl,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
     placeholderData: keepPreviousData,
   });
 
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setPagination({
-      ...pagination,
-      pageIndex: 0,
-    });
-    setSearchParams({
-      ...searchParams,
-      contsTtl,
-    });
+    setParams({ contsTtl, page: 0 });
   };
 
   const handleReset = () => {
     setContsTtl("");
-    setSearchParams({
-      ...searchParams,
-      contsTtl: "",
-    });
+    resetParams();
   };
 
   const handleRowClick = (row: Contents) => {
@@ -69,7 +73,7 @@ function ContentsPage() {
       state: {
         pagination,
       },
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
       getCoreRowModel: getCoreRowModel(),
       manualPagination: true,
     },
diff --git a/apps/cs/src/pages/dashboard/ui/dashboard-page.tsx b/apps/cs/src/pages/dashboard/ui/dashboard-page.tsx
index d787a6ab7..466148ed4 100644
--- a/apps/cs/src/pages/dashboard/ui/dashboard-page.tsx
+++ b/apps/cs/src/pages/dashboard/ui/dashboard-page.tsx
@@ -354,7 +354,7 @@ function DashboardPage() {
               <div className="card-header text-foreground">
                 <h3 className="text-2xl font-medium">실시간 알림</h3>
               </div>
-              <div className="p-4">
+              <div className="p-4" style={{ height: "120px", overflowY: "auto" }}>
                 <div className="space-y-4 text-foreground">
                   {noticeUserList?.map((item) => (
                     <div
@@ -373,7 +373,7 @@ function DashboardPage() {
               <div className="card-header text-foreground">
                 <h3 className="text-2xl font-medium">일정 알림</h3>
               </div>
-              <div className="p-4">
+              <div className="p-4" style={{ height: "120px", overflowY: "auto" }}>
                 <div className="space-y-4 text-foreground">
                   {scheduleList && scheduleList.length > 0 ? (
                     scheduleList.map((schedule, index) => {
diff --git a/apps/cs/src/pages/file/ui/file-page.tsx b/apps/cs/src/pages/file/ui/file-page.tsx
index 8b5eba617..8669d6717 100644
--- a/apps/cs/src/pages/file/ui/file-page.tsx
+++ b/apps/cs/src/pages/file/ui/file-page.tsx
@@ -1,13 +1,16 @@
 "use client";
 
 import { useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
-import { useConfirm } from "@frontend-opensource/use-react-hooks";
-import { Button, Input, Label } from "@common/components";
-import { AttachmentApi, type AttachmentParams } from "@/entities/attachment";
-import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
+
 import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
+import { AttachmentApi, type AttachmentParams } from "@/entities/attachment";
+import { Button, Input, Label } from "@common/components";
+
 import { createColumns } from "../model/table-columns";
 
 function FilePage() {
@@ -65,7 +68,7 @@ function FilePage() {
     },
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,
diff --git a/apps/cs/src/pages/groups/ui/add-user-dialog.tsx b/apps/cs/src/pages/groups/ui/add-user-dialog.tsx
index 4f8a205ff..f2a1b68a2 100644
--- a/apps/cs/src/pages/groups/ui/add-user-dialog.tsx
+++ b/apps/cs/src/pages/groups/ui/add-user-dialog.tsx
@@ -149,7 +149,7 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) {
     }
   };
 
-  const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSearch = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     e.stopPropagation();
     setPagination({
diff --git a/apps/cs/src/pages/groups/ui/group-users-section.tsx b/apps/cs/src/pages/groups/ui/group-users-section.tsx
index 4b7170e3a..db8b5dec3 100644
--- a/apps/cs/src/pages/groups/ui/group-users-section.tsx
+++ b/apps/cs/src/pages/groups/ui/group-users-section.tsx
@@ -12,7 +12,7 @@ import {
   type RowSelectionState,
 } from "@tanstack/react-table";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
-import { Button,Input, Label  } from "@common/components";
+import { Button, Input, Label } from "@common/components";
 import { GroupUsersApi } from "@/entities/group-user";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore, useDataTable } from "@/shared/lib";
@@ -33,8 +33,8 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
     pageSize: 10,
   });
 
-    const [userNm, setUserNm] = useState("");
-    
+  const [userNm, setUserNm] = useState("");
+
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
   const query = useQuery({
@@ -50,7 +50,7 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
     placeholderData: keepPreviousData,
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,
@@ -116,27 +116,27 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
   return (
     <div className="flex-1">
       <div className="card card-border">
-      <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
-        <Label htmlFor="" className="mr-2 text-label">
-          이름
-        </Label>
-        <Input
-          className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
-          value={userNm}
-          onChange={(e) => setUserNm(e.target.value)}
-        />
-        <Button className="h-[3.2rem]" type="submit">
-          조회
-        </Button>
-        <Button
-          type="button"
-          color="white"
-          className="h-[3.2rem]"
-          onClick={handleReset}
-        >
-          초기화
-        </Button>
-      </form>
+        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
+          <Label htmlFor="" className="mr-2 text-label">
+            이름
+          </Label>
+          <Input
+            className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
+            value={userNm}
+            onChange={(e) => setUserNm(e.target.value)}
+          />
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="h-[3.2rem]"
+            onClick={handleReset}
+          >
+            초기화
+          </Button>
+        </form>
       </div>
       <div className="card card-border">
         <div className="card-header">
diff --git a/apps/cs/src/pages/groups/ui/groups-dialog.tsx b/apps/cs/src/pages/groups/ui/groups-dialog.tsx
index 9fca4ebdb..ac7f92916 100644
--- a/apps/cs/src/pages/groups/ui/groups-dialog.tsx
+++ b/apps/cs/src/pages/groups/ui/groups-dialog.tsx
@@ -43,7 +43,7 @@ const GroupsDialog = memo(
     const { data: group } = useQuery({
       queryKey: [ENDPOINT.CMS_SERVICE.GROUPS, groupId],
       queryFn: () => GroupApi.findGroupById(groupId!),
-      enabled: !!groupId && open, // open 시점 groupId가 있을 때만 상세 조회 API 호출
+      enabled: !isRegistration,
     });
 
     const { mutateAsync: createGroup } = useMutationWrapper({
@@ -92,8 +92,9 @@ const GroupsDialog = memo(
       };
 
     useEffect(() => {
-      if (open) form.reset();
-    }, [open]);
+      // 그룹 등록 및 취소 시 폼 초기화
+      if (isRegistration && !open) form.reset();
+    }, [groupId, open]);
 
     return (
       <Dialog open={open} onOpenChange={setOpen} {...props}>
diff --git a/apps/cs/src/pages/groups/ui/groups-section.tsx b/apps/cs/src/pages/groups/ui/groups-section.tsx
index 9c7f5b6ca..019a4a17f 100644
--- a/apps/cs/src/pages/groups/ui/groups-section.tsx
+++ b/apps/cs/src/pages/groups/ui/groups-section.tsx
@@ -8,13 +8,13 @@ import {
 } from "@tanstack/react-query";
 import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import { Button, Input, Label } from "@common/components";
-import { GroupApi , type GroupSearchParams} from "@/entities/group";
+import { GroupApi, type GroupSearchParams } from "@/entities/group";
 import { ENDPOINT } from "@/shared/config";
 import { useDataTable } from "@/shared/lib";
 import { createColumns } from "../model/groups-table-columns";
 import { GroupsDialog } from "./groups-dialog";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib"; 
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 
 type GroupsSectionProps = {
   handleSelectedGroup: (groupId: string) => void;
@@ -29,14 +29,12 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
   const [groupNm, setGroupNm] = useState("");
   const [searchParams, setSearchParams] = useState<GroupSearchParams>({
     groupNm: "",
-    delYn  :"N",
-    sort   : "groupId,desc",
+    delYn: "N",
+    sort: "groupId,desc",
   });
 
-
-
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.GROUPS,searchParams,  pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.GROUPS, searchParams, pagination],
     queryFn: () =>
       GroupApi.findPageGroup({
         ...searchParams,
@@ -64,7 +62,7 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
     }
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,
@@ -81,7 +79,7 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
     setSearchParams({
       ...searchParams,
       groupNm: "",
-      delYn:"N"
+      delYn: "N",
     });
   };
   const handleRowClick = (row: { groupId: string }) => {
@@ -109,41 +107,41 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
   return (
     <div className="flex-1">
       <div className="card card-border">
-      <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
-        <Label htmlFor="" className="mr-2 text-label">
-          그룹명
-        </Label>
-        <Input
-          className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
-          value={groupNm}
-          onChange={(e) => setGroupNm(e.target.value)}
-        />
-        <Button className="h-[3.2rem]" type="submit">
-          조회
-        </Button>
-        <Button
-          type="button"
-          color="white"
-          className="h-[3.2rem]"
-          onClick={handleReset}
-        >
-          초기화
-        </Button>
-      <Label htmlFor="delYn" className="ml-4 mr-2 text-label">
-        삭제여부
-      </Label>
-      <input
-        id="delYn"
-        type="checkbox"
-        checked={searchParams.delYn === "Y"}
-        onChange={(e) =>
-          setSearchParams({
-            ...searchParams,
-            delYn: e.target.checked ? "Y" : "N",
-          })
-        }
-      /> 
-      </form>
+        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
+          <Label htmlFor="" className="mr-2 text-label">
+            그룹명
+          </Label>
+          <Input
+            className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
+            value={groupNm}
+            onChange={(e) => setGroupNm(e.target.value)}
+          />
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="h-[3.2rem]"
+            onClick={handleReset}
+          >
+            초기화
+          </Button>
+          <Label htmlFor="delYn" className="ml-4 mr-2 text-label">
+            삭제여부
+          </Label>
+          <input
+            id="delYn"
+            type="checkbox"
+            checked={searchParams.delYn === "Y"}
+            onChange={(e) =>
+              setSearchParams({
+                ...searchParams,
+                delYn: e.target.checked ? "Y" : "N",
+              })
+            }
+          />
+        </form>
       </div>
       <div className="card card-border">
         <div className="card-header">
diff --git a/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx b/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx
index cde3cf641..02ca5739f 100644
--- a/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx
+++ b/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx
@@ -95,7 +95,7 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
     }
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
     const keyword = formData.get("keyword") as string;
diff --git a/apps/cs/src/pages/groups/ui/role-select.tsx b/apps/cs/src/pages/groups/ui/role-select.tsx
index 539888591..bede34ed8 100644
--- a/apps/cs/src/pages/groups/ui/role-select.tsx
+++ b/apps/cs/src/pages/groups/ui/role-select.tsx
@@ -16,7 +16,13 @@ type RoleSelectProps = React.ComponentPropsWithoutRef<typeof Select> & {
 function RoleSelect({ mngrYn = "N", ...props }: RoleSelectProps) {
   const { data: roles } = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.ROLES],
-    queryFn: () => RoleApi.getRoles(),
+    queryFn: () =>
+      RoleApi.getRoles({
+        keywordType: "useYn",
+        keyword: "Y",
+        page: 0,
+        size: 100,
+      }),
   });
 
   const options = roles?.content.filter((role) => role.mngrYn === mngrYn);
diff --git a/apps/cs/src/pages/image/ui/image-page.tsx b/apps/cs/src/pages/image/ui/image-page.tsx
index 6208f180b..72a0d4fcf 100644
--- a/apps/cs/src/pages/image/ui/image-page.tsx
+++ b/apps/cs/src/pages/image/ui/image-page.tsx
@@ -2,68 +2,73 @@
 
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+
 import { useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
+  type OnChangeFn,
   type PaginationState,
   type RowSelectionState,
 } from "@tanstack/react-table";
-import { Button, Input, Label } from "@common/components";
-import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
+
 import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
+import { useDataTable, useSearchParamsState } from "@/shared/lib";
+import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
+import { Button, Input, Label } from "@common/components";
+
 import { ImageApi } from "../api/image-service";
+import { type Image } from "../model/image-interface";
 import { columns } from "../model/image-table-columns";
-import { type Image, type ImageParams } from "../model/image-interface";
 
 type PostingTarget = {
   pstgTrgtNm: string;
   pstgTrgtNo: number;
 };
 
+const DEFAULT_PARAMS = {
+  keyword: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
+
 function ImagePage() {
   const router = useRouter();
-
-  const [keyword, setKeyword] = useState("");
-  const [searchParams, setSearchParams] = useState<ImageParams>({
-    keyword: "",
-    sort: "regDt,desc",
-  });
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
+  const [keyword, setKeyword] = useState(params.keyword);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.IMAGES, searchParams, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.IMAGES, params],
     queryFn: () =>
       ImageApi.getImageList({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
+        keyword: params.keyword,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
   });
 
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setPagination({
-      ...pagination,
-      pageIndex: 0,
-    });
-    setSearchParams({
-      ...searchParams,
-      keyword,
-    });
+    setParams({ keyword, page: 0 });
   };
 
   const handleReset = () => {
     setKeyword("");
-    setSearchParams({
-      ...searchParams,
-      keyword: "",
-    });
+    resetParams();
   };
 
   const handleRowClick = (row: Image) => {
@@ -81,7 +86,7 @@ function ImagePage() {
       manualPagination: true,
       enableMultiRowSelection: true,
       getCoreRowModel: getCoreRowModel(),
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
       onRowSelectionChange: setRowSelection,
     },
     dataTableOptions: {
diff --git a/apps/cs/src/pages/link/ui/link-page.tsx b/apps/cs/src/pages/link/ui/link-page.tsx
index c1b1052fe..a59b9e751 100644
--- a/apps/cs/src/pages/link/ui/link-page.tsx
+++ b/apps/cs/src/pages/link/ui/link-page.tsx
@@ -4,7 +4,17 @@ import "@common/assets/styles/grid.css";
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { Button, Input, Label, LoadingWithAnimation, Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@common/components";
+import {
+  Button,
+  Input,
+  Label,
+  LoadingWithAnimation,
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from "@common/components";
 import { getCoreRowModel } from "@tanstack/react-table";
 import { LinkApi, type Link, type LinkSearchParam } from "@/entities/link";
 import { useQuery } from "@tanstack/react-query";
@@ -14,147 +24,161 @@ import { useDataTable } from "@/shared/lib";
 import LinkExpiredAlert from "./LinkExpiredAlert";
 
 function LinkPage() {
-    const router = useRouter();
-    const queryClient = useQueryClient();
+  const router = useRouter();
+  const queryClient = useQueryClient();
 
-    const [linkSn, setLinkSn] = useState<string>('');
-    const [linkNm, setLinkNm] = useState<string>('');
-    const [linkClfsCd, setLinkClfsCd] = useState<string>('');
+  const [linkSn, setLinkSn] = useState<string>("");
+  const [linkNm, setLinkNm] = useState<string>("");
+  const [linkClfsCd, setLinkClfsCd] = useState<string>("");
 
-    const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
-        linkSn: '',
-        linkNm: '',
-        linkClfsCd: '',
+  const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
+    linkSn: "",
+    linkNm: "",
+    linkClfsCd: "",
+  });
+
+  const query = useQuery({
+    queryKey: [
+      `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`,
+      linkSearchParam,
+    ],
+    queryFn: () => LinkApi.getLinkList(linkSearchParam),
+  });
+
+  const handleResetSearchParam = () => {
+    setLinkSn("");
+    setLinkNm("");
+    setLinkClfsCd("ALL");
+    setLinkSearchParam({
+      ...linkSearchParam,
+      linkSn: "",
+      linkNm: "",
+      linkClfsCd: "ALL",
     });
+  };
 
-    const query = useQuery({
-        queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`, linkSearchParam],
-        queryFn: () => LinkApi.getLinkList(linkSearchParam),
+  const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLinkSearchParam({
+      ...linkSearchParam,
+      linkSn,
+      linkNm,
+      linkClfsCd,
     });
+  };
 
-    const handleResetSearchParam = () => {
-        setLinkSn('');
-        setLinkNm('');
-        setLinkClfsCd('ALL');
-        setLinkSearchParam({
-            ...linkSearchParam,
-            linkSn: '',
-            linkNm: '',
-            linkClfsCd: 'ALL',
-        });
-    };
-
-    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        setLinkSearchParam({
-            ...linkSearchParam,
-            linkSn,
-            linkNm,
-            linkClfsCd,
-        });
-    };
-
-    const handleRowClick = (link: Link) => {
-        queryClient.removeQueries({
-            queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`],
-        });
-        queryClient.removeQueries({
-            queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkInfo`],
-        });
-        router.push(`link/register/${link.link_sn}`);
-    };
-
-    const handleClickRegist = () => {
-        router.push('link/register');
-    };
-
-    const { tableComponent } = useDataTable({
-        query,
-        tableOptions: {
-            columns,
-            manualPagination: true,
-            enableMultiRowSelection: true,
-            getCoreRowModel: getCoreRowModel(),
-        },
-        dataTableOptions: {
-            onRowClick: handleRowClick,
-            viewPagination: true,
-        },
+  const handleRowClick = (link: Link) => {
+    queryClient.removeQueries({
+      queryKey: [
+        `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`,
+      ],
     });
+    queryClient.removeQueries({
+      queryKey: [
+        `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkInfo`,
+      ],
+    });
+    router.push(`link/register/${link.link_sn}`);
+  };
 
-    return (
-        <div className="card card-border !mt-6">
-            <div className="card card-border">
-                <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
-                    <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
-                        일련번호
-                    </Label>
-                    <Input
-                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-4"
-                        id="liSnSearchInput"
-                        value={linkSn}
-                        onChange={(e) => setLinkSn(e.target.value)}
-                        autoComplete="off"
-                    />
-                    <Label htmlFor="liNmSearchInput" className="mr-2 text-label">
-                        연계 명
-                    </Label>
-                    <Input
-                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-2"
-                        id="liNmSearchInput"
-                        value={linkNm}
-                        onChange={(e) => setLinkNm(e.target.value)}
-                        autoComplete="off"
-                    />
-                    <Label htmlFor="linkClfsCd" className="mr-2 text-label">
-                        연계 분류
-                    </Label>
-                    <Select onValueChange={(e) => setLinkClfsCd(e)} value={linkClfsCd}>
-                        <SelectTrigger id="linkClfsCd" className="w-[20rem] mr-4">
-                            <SelectValue placeholder="전체"></SelectValue>
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="ALL">전체</SelectItem>
-                            <SelectItem value="link0001">TIBERO 데이터베이스</SelectItem>
-                            <SelectItem value="link0002">ORACLE 데이터베이스</SelectItem>
-                            <SelectItem value="link0003">공공데이터 포털 API</SelectItem>
-                            <SelectItem value="link0004">한강홍수통제소 API</SelectItem>
-                            <SelectItem value="link0005">기상청 API</SelectItem>
-                            <SelectItem value="link0006">국가지하수정보센터 API</SelectItem>
-                            <SelectItem value="link0007">행정정보공동이용센터 연계</SelectItem>
-                        </SelectContent>
-                    </Select>
-                    <Button color="green" className="h-[3.2rem]" type="button" onClick={handleResetSearchParam}>
-                        초기화
-                    </Button>
-                    <Button className="h-[3.2rem]" type="submit">
-                        조회
-                    </Button>
-                </form>
-            </div>
-            <div className="card card-border flex flex-col h-[calc(100vh-28rem)]">
-                <div className="card-header">
-                    <h3 className="text-2xl font-medium text-label">연계 목록</h3>
-                        
-                    <div className="flex items-center">
-                        <LinkExpiredAlert linkList={query} />
-                        <Button onClick={handleClickRegist}>등록</Button>
-                    </div>
-                </div>
-                <div className="card !m-[1.2rem] overflow-auto h-full !p-0">
-                    {!query.isLoading ?
-                        <div>{tableComponent}</div>
-                        :
-                        <div className="[data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center h-full">
-                            <div className="relative size-[5rem]">
-                                <LoadingWithAnimation color="primary" />
-                            </div>
-                        </div>
-                    }
-                </div>
-            </div>
+  const handleClickRegist = () => {
+    router.push("link/register");
+  };
+
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      manualPagination: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
+    },
+  });
+
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
+        <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
+          <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
+            일련번호
+          </Label>
+          <Input
+            className="mr-4 h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+            id="liSnSearchInput"
+            value={linkSn}
+            onChange={(e) => setLinkSn(e.target.value)}
+            autoComplete="off"
+          />
+          <Label htmlFor="liNmSearchInput" className="mr-2 text-label">
+            연계 명
+          </Label>
+          <Input
+            className="mr-2 h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+            id="liNmSearchInput"
+            value={linkNm}
+            onChange={(e) => setLinkNm(e.target.value)}
+            autoComplete="off"
+          />
+          <Label htmlFor="linkClfsCd" className="mr-2 text-label">
+            연계 분류
+          </Label>
+          <Select onValueChange={(e) => setLinkClfsCd(e)} value={linkClfsCd}>
+            <SelectTrigger id="linkClfsCd" className="mr-4 w-[20rem]">
+              <SelectValue placeholder="전체"></SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ALL">전체</SelectItem>
+              <SelectItem value="link0001">TIBERO 데이터베이스</SelectItem>
+              <SelectItem value="link0002">ORACLE 데이터베이스</SelectItem>
+              <SelectItem value="link0003">공공데이터 포털 API</SelectItem>
+              <SelectItem value="link0004">한강홍수통제소 API</SelectItem>
+              <SelectItem value="link0005">기상청 API</SelectItem>
+              <SelectItem value="link0006">국가지하수정보센터 API</SelectItem>
+              <SelectItem value="link0007">
+                행정정보공동이용센터 연계
+              </SelectItem>
+            </SelectContent>
+          </Select>
+          <Button
+            color="green"
+            className="h-[3.2rem]"
+            type="button"
+            onClick={handleResetSearchParam}
+          >
+            초기화
+          </Button>
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+        </form>
+      </div>
+      <div className="card card-border flex h-[calc(100vh-28rem)] flex-col">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">연계 목록</h3>
+
+          <div className="flex items-center">
+            <LinkExpiredAlert linkList={query} />
+            <Button onClick={handleClickRegist}>등록</Button>
+          </div>
         </div>
-    );
+        <div className="card !m-[1.2rem] h-full overflow-auto !p-0">
+          {!query.isLoading ? (
+            <div>{tableComponent}</div>
+          ) : (
+            <div className="[data-theme='black']:bg-transparent flex h-full items-center justify-center rounded-lg p-10">
+              <div className="relative size-[5rem]">
+                <LoadingWithAnimation color="primary" />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
 }
 
-export { LinkPage };
\ No newline at end of file
+export { LinkPage };
diff --git a/apps/cs/src/pages/linkLog/ui/link-log-page.tsx b/apps/cs/src/pages/linkLog/ui/link-log-page.tsx
index dd39a4726..5a0637b72 100644
--- a/apps/cs/src/pages/linkLog/ui/link-log-page.tsx
+++ b/apps/cs/src/pages/linkLog/ui/link-log-page.tsx
@@ -3,10 +3,25 @@
 import "@common/assets/styles/grid.css";
 
 import { useState } from "react";
-import { Button, Input, Label, DatePicker, Select, SelectTrigger, SelectContent, SelectItem, SelectValue, LoadingWithAnimation } from "@common/components";
+import {
+  Button,
+  Input,
+  Label,
+  DatePicker,
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+  LoadingWithAnimation,
+} from "@common/components";
 import { useQuery } from "@tanstack/react-query";
 
-import { getCoreRowModel, type PaginationState, type RowSelectionState, } from "@tanstack/react-table";
+import {
+  getCoreRowModel,
+  type PaginationState,
+  type RowSelectionState,
+} from "@tanstack/react-table";
 import { LinkApi, type LinkSearchParam } from "@/entities/link";
 import { columns } from "../model/table-columns";
 import dayjs from "dayjs";
@@ -14,176 +29,200 @@ import { useAlertStore } from "@/shared/lib/use-alert-store";
 import { useDataTable } from "@/shared/lib";
 
 function LinkLogPage() {
-    const { setMessage: alert } = useAlertStore((state) => state);
+  const { setMessage: alert } = useAlertStore((state) => state);
 
-    const [linkSn, setLinkSn] = useState<string>('');
-    const [linkNm, setLinkNm] = useState<string>('');
-    const [isSucc, setIsSucc] = useState<string>('ALL');
-    const [startDate, setStartDate] = useState<string>(dayjs().subtract(7, "day").format('YYYY-MM-DD'));
-    const [endDate, setEndDate] = useState<string>(dayjs().format('YYYY-MM-DD'));
+  const [linkSn, setLinkSn] = useState<string>("");
+  const [linkNm, setLinkNm] = useState<string>("");
+  const [isSucc, setIsSucc] = useState<string>("ALL");
+  const [startDate, setStartDate] = useState<string>(
+    dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+  );
+  const [endDate, setEndDate] = useState<string>(dayjs().format("YYYY-MM-DD"));
 
-    const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
-        linkSn: '',
-        linkNm: '',
-        isSucc: '',
-        startDate: '',
-        endDate: '',
+  const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
+    linkSn: "",
+    linkNm: "",
+    isSucc: "",
+    startDate: "",
+    endDate: "",
+  });
+
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 100,
+  });
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  const query = useQuery({
+    queryKey: [
+      `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`,
+      linkSearchParam,
+      pagination,
+    ],
+    queryFn: () =>
+      LinkApi.getLinkLogList({
+        ...linkSearchParam,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+        isSucc,
+        startDate,
+        endDate,
+      }),
+  });
+
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+        rowSelection,
+      },
+      manualPagination: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setRowSelection,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
+  });
+
+  const handleResetSearchParam = () => {
+    setIsSucc("ALL");
+    setLinkNm("");
+    setLinkSn("");
+    setStartDate(dayjs().subtract(7, "day").format("YYYY-MM-DD"));
+    setEndDate(dayjs().format("YYYY-MM-DD"));
+    setLinkSearchParam({
+      ...linkSearchParam,
+      linkSn: "",
+      linkNm: "",
+      isSucc: "ALL",
+      startDate: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+      endDate: dayjs().format("YYYY-MM-DD"),
     });
+  };
 
-    const [pagination, setPagination] = useState<PaginationState>({
-        pageIndex: 0,
-        pageSize: 100,
-    });
+  const handleSubmit = async (e?: React.SubmitEvent<HTMLFormElement>) => {
+    e?.preventDefault();
 
-    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-
-    const query = useQuery({
-        queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`, linkSearchParam, pagination],
-        queryFn: () =>
-            LinkApi.getLinkLogList({
-                ...linkSearchParam,
-                page: pagination.pageIndex,
-                size: pagination.pageSize,
-                isSucc,
-                startDate,
-                endDate,
-            }),
-    });
-
-    const { tableComponent } = useDataTable({
-        query,
-        tableOptions: {
-            columns,
-            state: {
-                pagination,
-                rowSelection,
-            },
-            manualPagination: true,
-            enableMultiRowSelection: true,
-            getCoreRowModel: getCoreRowModel(),
-            onPaginationChange: setPagination,
-            onRowSelectionChange: setRowSelection,
-        },
-        dataTableOptions: {
-            viewPagination: true,
-        },
-    });
-
-    const handleResetSearchParam = () => {
-        setIsSucc('ALL');
-        setLinkNm('');
-        setLinkSn('');
-        setStartDate(dayjs().subtract(7, "day").format('YYYY-MM-DD'));
-        setEndDate(dayjs().format('YYYY-MM-DD'));
-        setLinkSearchParam({
-            ...linkSearchParam,
-            linkSn: '',
-            linkNm: '',
-            isSucc: 'ALL',
-            startDate: dayjs().subtract(7, "day").format('YYYY-MM-DD'),
-            endDate: dayjs().format('YYYY-MM-DD'),
+    if (startDate && endDate) {
+      if (startDate > endDate) {
+        alert("종료일이 시작일보다 이전일 수 없습니다.");
+        return;
+      } else {
+        setPagination({
+          ...pagination,
+          pageIndex: 0,
         });
-    };
+        setLinkSearchParam({
+          ...linkSearchParam,
+          linkSn,
+          linkNm,
+          isSucc,
+          startDate,
+          endDate,
+        });
+      }
+    } else {
+      alert("조회 날짜를 선택해주세요.");
+      return;
+    }
+  };
 
-    const handleSubmit = async (e?: React.FormEvent<HTMLFormElement>) => {
-        e?.preventDefault();
-
-        if (startDate && endDate) {
-
-            if (startDate > endDate) {
-                alert('종료일이 시작일보다 이전일 수 없습니다.');
-                return;
-            } else {
-                setPagination({
-                    ...pagination,
-                    pageIndex: 0,
-                });
-                setLinkSearchParam({
-                    ...linkSearchParam,
-                    linkSn,
-                    linkNm,
-                    isSucc,
-                    startDate,
-                    endDate,
-                });
-            }
-        } else {
-            alert('조회 날짜를 선택해주세요.');
-            return;
-        }
-    };
-
-    return (
-        <div className="card card-border !mt-6">
-            <div className="card card-border">
-                <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
-                    <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
-                        일련번호
-                    </Label>
-                    <Input
-                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-4"
-                        id="liSnSearchInput"
-                        value={linkSn}
-                        onChange={(e) => setLinkSn(e.target.value)}
-                        autoComplete="off"
-                    />
-                    <Label htmlFor="liNmSearchInput" className="mr-2 text-label">
-                        연계 명
-                    </Label>
-                    <Input
-                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-4"
-                        id="liNmSearchInput"
-                        value={linkNm}
-                        onChange={(e) => setLinkNm(e.target.value)}
-                        autoComplete="off"
-                    />
-                    <Label htmlFor="liResultCode" className="mr-2 text-label">
-                        실행결과
-                    </Label>
-                    <Select onValueChange={(e) => setIsSucc(e)} value={isSucc}>
-                        <SelectTrigger id="liResultCode" className="w-[10rem] mr-4">
-                            <SelectValue placeholder="전체"></SelectValue>
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="ALL">전체</SelectItem>
-                            <SelectItem value="SUCC">성공</SelectItem>
-                            <SelectItem value="FAIL">실패</SelectItem>
-                        </SelectContent>
-                    </Select>
-                    <Label htmlFor="sDateSearchInput" className="mx-2 text-label">
-                        시작일
-                    </Label>
-                    <DatePicker id="sDateSearchInput" mode={"single"} selected={dayjs(startDate).toDate()} onSelect={(e) => setStartDate(dayjs(e).format('YYYY-MM-DD'))} />
-                    <Label htmlFor="eDateSearchInput" className="mx-2 text-label">
-                        종료일
-                    </Label>
-                    <DatePicker id="eDateSearchInput" mode={"single"} className="mr-2" selected={dayjs(endDate).toDate()} onSelect={(e) => setEndDate(dayjs(e).format('YYYY-MM-DD'))} />
-                    <Button color="green" className="h-[3.2rem]" type="button" onClick={handleResetSearchParam}>
-                        초기화
-                    </Button>
-                    <Button className="h-[3.2rem]" type="submit">
-                        조회
-                    </Button>
-                </form>
-            </div>
-            <div className="card card-border flex flex-col h-[calc(100vh-28rem)]">
-                <div className="card-header">
-                    <h3 className="text-2xl font-medium text-label">로그 목록 (검색 조건에 따른 건수 : {query.data?.totalElements.toLocaleString('ko-KR') ?? 0} )</h3>
-                </div>
-                <div className="card !m-[1.2rem] overflow-auto h-full !p-0">
-                    {query.isLoading ?
-                        <div className="[data-theme='black']:bg-transparent rounded-lg p-10 h-full flex justify-center items-center">
-                            <div className="relative size-[5rem]">
-                                <LoadingWithAnimation color="primary" />
-                            </div>
-                        </div>
-                        :
-                        <div>{tableComponent}</div>
-                    }
-                </div>
-            </div>
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
+        <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
+          <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
+            일련번호
+          </Label>
+          <Input
+            className="mr-4 h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+            id="liSnSearchInput"
+            value={linkSn}
+            onChange={(e) => setLinkSn(e.target.value)}
+            autoComplete="off"
+          />
+          <Label htmlFor="liNmSearchInput" className="mr-2 text-label">
+            연계 명
+          </Label>
+          <Input
+            className="mr-4 h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+            id="liNmSearchInput"
+            value={linkNm}
+            onChange={(e) => setLinkNm(e.target.value)}
+            autoComplete="off"
+          />
+          <Label htmlFor="liResultCode" className="mr-2 text-label">
+            실행결과
+          </Label>
+          <Select onValueChange={(e) => setIsSucc(e)} value={isSucc}>
+            <SelectTrigger id="liResultCode" className="mr-4 w-[10rem]">
+              <SelectValue placeholder="전체"></SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ALL">전체</SelectItem>
+              <SelectItem value="SUCC">성공</SelectItem>
+              <SelectItem value="FAIL">실패</SelectItem>
+            </SelectContent>
+          </Select>
+          <Label htmlFor="sDateSearchInput" className="mx-2 text-label">
+            시작일
+          </Label>
+          <DatePicker
+            id="sDateSearchInput"
+            mode={"single"}
+            selected={dayjs(startDate).toDate()}
+            onSelect={(e) => setStartDate(dayjs(e).format("YYYY-MM-DD"))}
+          />
+          <Label htmlFor="eDateSearchInput" className="mx-2 text-label">
+            종료일
+          </Label>
+          <DatePicker
+            id="eDateSearchInput"
+            mode={"single"}
+            className="mr-2"
+            selected={dayjs(endDate).toDate()}
+            onSelect={(e) => setEndDate(dayjs(e).format("YYYY-MM-DD"))}
+          />
+          <Button
+            color="green"
+            className="h-[3.2rem]"
+            type="button"
+            onClick={handleResetSearchParam}
+          >
+            초기화
+          </Button>
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+        </form>
+      </div>
+      <div className="card card-border flex h-[calc(100vh-28rem)] flex-col">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">
+            로그 목록 (검색 조건에 따른 건수 :{" "}
+            {query.data?.totalElements.toLocaleString("ko-KR") ?? 0} )
+          </h3>
         </div>
-    )
-};
+        <div className="card !m-[1.2rem] h-full overflow-auto !p-0">
+          {query.isLoading ? (
+            <div className="[data-theme='black']:bg-transparent flex h-full items-center justify-center rounded-lg p-10">
+              <div className="relative size-[5rem]">
+                <LoadingWithAnimation color="primary" />
+              </div>
+            </div>
+          ) : (
+            <div>{tableComponent}</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
 
-export { LinkLogPage };
\ No newline at end of file
+export { LinkLogPage };
diff --git a/apps/cs/src/pages/linkParams/ui/link-params-page.tsx b/apps/cs/src/pages/linkParams/ui/link-params-page.tsx
index 319df80b2..001eb9953 100644
--- a/apps/cs/src/pages/linkParams/ui/link-params-page.tsx
+++ b/apps/cs/src/pages/linkParams/ui/link-params-page.tsx
@@ -1,20 +1,31 @@
-'use client';
+"use client";
 
 import { useState, useMemo } from "react";
 import {
-    Button,
-    DataTable,
-    Input,
-    Label,
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableRow,
-    LoadingWithAnimation,
+  Button,
+  DataTable,
+  Input,
+  Label,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  LoadingWithAnimation,
 } from "@common/components";
-import { getCoreRowModel, useReactTable, type PaginationState, type RowSelectionState, } from "@tanstack/react-table";
-import { LinkApi, type Link, type LinkSearchParam, type LinkVrblFormData, linkVrblFormSchema } from "@/entities/link";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type PaginationState,
+  type RowSelectionState,
+} from "@tanstack/react-table";
+import {
+  LinkApi,
+  type Link,
+  type LinkSearchParam,
+  type LinkVrblFormData,
+  linkVrblFormSchema,
+} from "@/entities/link";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { columns } from "../model/table-columns";
 import { vrblColumns } from "../model/vrbl-table-columns";
@@ -31,376 +42,388 @@ import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 import { useDataTable } from "@/shared/lib";
 
 function LinkParamsPage() {
-    const queryClient = useQueryClient();
+  const queryClient = useQueryClient();
 
-    const [linkSn, setLinkSn] = useState<string>('');
-    const [linkNm, setLinkNm] = useState<string>('');
+  const [linkSn, setLinkSn] = useState<string>("");
+  const [linkNm, setLinkNm] = useState<string>("");
 
-    const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
-        linkSn: '',
-        linkNm: ''
+  const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
+    linkSn: "",
+    linkNm: "",
+  });
+
+  const [selectedLink, setSelectedLink] = useState<{
+    linkSn: string;
+    linkNm: string;
+  }>({
+    linkSn: "",
+    linkNm: "",
+  });
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 100,
+  });
+
+  const { confirm } = useConfirm();
+
+  const [selectedVrblIds, setSelectedVrblIds] = useState<string[]>([]);
+  const [isDBdata, setIsDBData] = useState<boolean>(false);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+  const [onConfirm, setOnConfirm] = useState<boolean>(false);
+
+  const userUniqId = getCookie(AUTH_USER_ID) ?? "";
+  const { setMessage: alert } = useAlertStore((state) => state);
+
+  const dbIdList = ["link0001", "link0002", "link0007"];
+
+  // Link 목록 쿼리
+  const query = useQuery({
+    queryKey: ["api/link/getLinkList", linkSearchParam],
+    queryFn: () =>
+      LinkApi.getLinkList({
+        ...linkSearchParam,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+  });
+
+  // LinkVrbl 목록 쿼리 - 별도 관리
+  const linkVrblQuery = useQuery({
+    queryKey: ["linkVrblList", selectedLink.linkSn],
+    queryFn: () => LinkApi.getLinkVrblList(selectedLink.linkSn),
+    enabled: !!selectedLink.linkSn && !dbIdList.includes(selectedLink.linkSn),
+    staleTime: 0, // 항상 최신 데이터를 가져오도록 설정
+  });
+
+  const handleResetSearchParam = () => {
+    setSelectedLink({
+      linkSn: "",
+      linkNm: "",
     });
 
-    const [selectedLink, setSelectedLink] = useState<{
-        linkSn: string;
-        linkNm: string;
-    }>({
-        linkSn: '',
-        linkNm: ''
+    setLinkSn("");
+    setLinkNm("");
+    setLinkSearchParam({
+      ...linkSearchParam,
+      linkSn: "",
+      linkNm: "",
+    });
+  };
+
+  const handleConfirm = async (callback: () => Promise<void>) => {
+    setOnConfirm(true);
+    await callback();
+    setOnConfirm(false);
+  };
+
+  const { mutateAsync: insertLinkVrbl } = useMutation({
+    mutationFn: async (data: LinkVrblFormData) =>
+      await LinkApi.insertLinkVrbl({
+        ...data,
+        link_sn: selectedLink.linkSn,
+        mdfr_id: userUniqId,
+      }),
+    onSuccess: async () => {
+      // 쿼리 무효화를 통한 최신 데이터 가져오기
+      await queryClient.invalidateQueries({
+        queryKey: ["linkVrblList", selectedLink.linkSn],
+      });
+      setDialogOpen(false);
+      alert("저장되었습니다.");
+    },
+  });
+
+  const { mutateAsync: updateLinkVrbl } = useMutation({
+    mutationFn: async (data: LinkVrblFormData) =>
+      await LinkApi.updateLinkVrblInfo({
+        ...data,
+        link_sn: selectedLink.linkSn,
+        mdfr_id: userUniqId,
+      }),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["linkVrblList", selectedLink.linkSn],
+      });
+      setDialogOpen(false);
+      alert("저장되었습니다.");
+    },
+  });
+
+  const { mutateAsync: deleteLinkVrbl } = useMutation({
+    mutationFn: async (data: string[]) => await LinkApi.deleteLinkVrbl(data),
+    onSuccess: async () => {
+      await queryClient.refetchQueries({
+        queryKey: ["linkVrblList", selectedLink.linkSn],
+      });
+
+      setSelectedVrblIds([]);
+      alert("삭제되었습니다.");
+    },
+  });
+
+  // linkVrblQuery의 데이터를 사용
+  const tableData = useMemo(() => {
+    return linkVrblQuery.data?.content ?? [];
+  }, [linkVrblQuery.data]);
+
+  const vrblCols = useMemo(
+    () =>
+      vrblColumns({
+        selectedVrblIds,
+        setSelectedVrblIds,
+      }),
+    [selectedVrblIds],
+  );
+
+  const vrblTable = useReactTable({
+    data: tableData,
+    columns: vrblCols,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const form = useForm<LinkVrblFormData>({
+    resolver: zodResolver(linkVrblFormSchema),
+    defaultValues: {},
+  });
+
+  const handleRowClick = async (link: Link) => {
+    setSelectedLink({
+      linkSn: link.link_sn,
+      linkNm: link.link_nm,
     });
 
-    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+    setSelectedVrblIds([]);
 
-    const [pagination, setPagination] = useState<PaginationState>({
-        pageIndex: 0,
-        pageSize: 100,
+    if (dbIdList.includes(link.link_clsf_cd)) {
+      setIsDBData(true);
+    } else {
+      setIsDBData(false);
+    }
+  };
+
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    setSelectedLink({
+      linkSn: "",
+      linkNm: "",
     });
 
-    const { confirm } = useConfirm();
-
-    const [selectedVrblIds, setSelectedVrblIds] = useState<string[]>([]);
-    const [isDBdata, setIsDBData] = useState<boolean>(false);
-    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
-    const [onConfirm, setOnConfirm] = useState<boolean>(false);
-
-    const userUniqId = getCookie(AUTH_USER_ID) ?? "";
-    const { setMessage: alert } = useAlertStore((state) => state);
-
-    const dbIdList = ['link0001', 'link0002', 'link0007'];
-
-    // Link 목록 쿼리
-    const query = useQuery({
-        queryKey: ['api/link/getLinkList', linkSearchParam],
-        queryFn: () => LinkApi.getLinkList({
-            ...linkSearchParam,
-            page: pagination.pageIndex,
-            size: pagination.pageSize,
-        }),
+    setLinkSearchParam({
+      ...linkSearchParam,
+      linkSn,
+      linkNm,
     });
+  };
 
-    // LinkVrbl 목록 쿼리 - 별도 관리
-    const linkVrblQuery = useQuery({
-        queryKey: ['linkVrblList', selectedLink.linkSn],
-        queryFn: () => LinkApi.getLinkVrblList(selectedLink.linkSn),
-        enabled: !!selectedLink.linkSn && !dbIdList.includes(selectedLink.linkSn),
-        staleTime: 0, // 항상 최신 데이터를 가져오도록 설정
-    });
+  const fetchUserInfo = async () => {
+    const userData = await getUserInfo();
+    return userData.userName;
+  };
 
-    const handleResetSearchParam = () => {
-        setSelectedLink({
-            linkSn: '',
-            linkNm: ''
-        });
-
-        setLinkSn('');
-        setLinkNm('');
-        setLinkSearchParam({
-            ...linkSearchParam,
-            linkSn: '',
-            linkNm: ''
-        });
-    };
-
-    const handleConfirm = async (callback: () => Promise<void>) => {
-        setOnConfirm(true);
-        await callback();
-        setOnConfirm(false);
-    };
-
-    const { mutateAsync: insertLinkVrbl } = useMutation({
-        mutationFn: async (data: LinkVrblFormData) =>
-            await LinkApi.insertLinkVrbl({
-                ...data,
-                link_sn: selectedLink.linkSn,
-                mdfr_id: userUniqId,
-            }),
-        onSuccess: async () => {
-            // 쿼리 무효화를 통한 최신 데이터 가져오기
-            await queryClient.invalidateQueries({
-                queryKey: ['linkVrblList', selectedLink.linkSn]
-            });
-            setDialogOpen(false);
-            alert('저장되었습니다.');
+  const handleDeleteParam = async () => {
+    if (selectedVrblIds.length === 0) {
+      alert("삭제할 파라미터를 선택해 주세요.");
+    } else {
+      await handleConfirm(async () => {
+        if (await confirm("선택한 파라미터 정보를 삭제하시겠습니까?")) {
+          deleteLinkVrbl(selectedVrblIds);
         }
-    });
+      });
+    }
+  };
 
-    const { mutateAsync: updateLinkVrbl } = useMutation({
-        mutationFn: async (data: LinkVrblFormData) => await LinkApi.updateLinkVrblInfo({
-            ...data,
-            link_sn: selectedLink.linkSn,
-            mdfr_id: userUniqId,
-        }),
-        onSuccess: async () => {
-            await queryClient.invalidateQueries({
-                queryKey: ['linkVrblList', selectedLink.linkSn]
-            });
-            setDialogOpen(false);
-            alert('저장되었습니다.');
-        }
-    });
+  const handleVrblRowClick = async (data: LinkVrbl) => {
+    const linkVrblInfo = await LinkApi.getLinkVrblInfo(data.link_vrbl_sn);
 
-    const { mutateAsync: deleteLinkVrbl } = useMutation({
-        mutationFn: async (data: string[]) => await LinkApi.deleteLinkVrbl(data),
-        onSuccess: async () => {
-            await queryClient.refetchQueries({
-                queryKey: ['linkVrblList', selectedLink.linkSn]
-            });
-            
-            setSelectedVrblIds([]);
-            alert('삭제되었습니다.');
-        }
-    });
+    if (linkVrblInfo) {
+      let newData = { ...linkVrblInfo };
 
-    // linkVrblQuery의 데이터를 사용
-    const tableData = useMemo(() => {
-        return linkVrblQuery.data?.content ?? [];
-    }, [linkVrblQuery.data]);
+      if (linkVrblInfo.mdfr_id) {
+        const userName = await fetchUserInfo();
+        newData = {
+          ...linkVrblInfo,
+          mdfr_id: userName,
+        };
+      }
 
-    const vrblCols = useMemo(
-        () =>
-            vrblColumns({
-                selectedVrblIds,
-                setSelectedVrblIds,
-            }),
-        [selectedVrblIds]
-    );
+      form.reset(newData);
+    }
+    setDialogOpen(true);
+  };
 
-    const vrblTable = useReactTable({
-        data: tableData,
-        columns: vrblCols,
-        getCoreRowModel: getCoreRowModel(),
-    });
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+        rowSelection,
+      },
+      manualPagination: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setRowSelection,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
+    },
+  });
 
-    const form = useForm<LinkVrblFormData>({
-        resolver: zodResolver(linkVrblFormSchema),
-        defaultValues: {},
-    });
+  // LinkVrbl 데이터 표시 로직
+  const renderLinkVrblContent = () => {
+    if (isDBdata) {
+      return (
+        <div className="mt-14 flex flex-1 items-center justify-center text-3xl text-gray-500">
+          변수를 지원하지 않는 연계 데이터입니다.
+        </div>
+      );
+    }
 
-    const handleRowClick = async (link: Link) => {
-        setSelectedLink({
-            linkSn: link.link_sn,
-            linkNm: link.link_nm,
-        });
+    if (!selectedLink.linkSn) {
+      return (
+        <div className="mt-14 flex flex-1 items-center justify-center text-3xl text-gray-500">
+          연계 데이터를 선택해주세요.
+        </div>
+      );
+    }
 
-        setSelectedVrblIds([]);
-
-        if (dbIdList.includes(link.link_clsf_cd)) {
-            setIsDBData(true);
-        } else {
-            setIsDBData(false);
-        }
-    };
-
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-
-        setSelectedLink({
-            linkSn: '',
-            linkNm: ''
-        });
-
-        setLinkSearchParam({
-            ...linkSearchParam,
-            linkSn,
-            linkNm
-        });
-    };
-
-    const fetchUserInfo = async () => {
-        const userData = await getUserInfo();
-        return userData.userName;
-    };
-
-    const handleDeleteParam = async () => {
-        if (selectedVrblIds.length === 0) {
-            alert('삭제할 파라미터를 선택해 주세요.');
-        } else {
-            await handleConfirm(async () => {
-                if (await confirm('선택한 파라미터 정보를 삭제하시겠습니까?')) {
-                    deleteLinkVrbl(selectedVrblIds);
-                }
-            });
-        }
-    };
-
-    const handleVrblRowClick = async (data: LinkVrbl) => {
-        const linkVrblInfo = await LinkApi.getLinkVrblInfo(data.link_vrbl_sn);
-
-        if (linkVrblInfo) {
-            let newData = { ...linkVrblInfo };
-
-            if (linkVrblInfo.mdfr_id) {
-                const userName = await fetchUserInfo();
-                newData = {
-                    ...linkVrblInfo,
-                    mdfr_id: userName,
-                };
-            }
-
-            form.reset(newData);
-        }
-        setDialogOpen(true);
-    };
-
-    const { tableComponent } = useDataTable({
-        query,
-        tableOptions: {
-            columns,
-            state: {
-                pagination,
-                rowSelection,
-            },
-            manualPagination: true,
-            enableMultiRowSelection: true,
-            getCoreRowModel: getCoreRowModel(),
-            onPaginationChange: setPagination,
-            onRowSelectionChange: setRowSelection,
-        },
-        dataTableOptions: {
-            onRowClick: handleRowClick,
-            viewPagination: true,
-        },
-    });
-
-    // LinkVrbl 데이터 표시 로직
-    const renderLinkVrblContent = () => {
-        if (isDBdata) {
-            return (
-                <div className="flex items-center justify-center mt-14 text-gray-500 text-3xl flex-1">
-                    변수를 지원하지 않는 연계 데이터입니다.
-                </div>
-            );
-        }
-
-        if (!selectedLink.linkSn) {
-            return (
-                <div className="flex items-center justify-center mt-14 text-gray-500 text-3xl flex-1">
-                    연계 데이터를 선택해주세요.
-                </div>
-            );
-        }
-
-        if (linkVrblQuery.isLoading) {
-            return (
-                <div className="[data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center h-full">
-                    <div className="relative size-[5rem]">
-                        <LoadingWithAnimation color="primary" />
-                    </div>
-                </div>
-            );
-        }
-
-        return (
-            <>
-                <div className="mb-2 mt-14 flex justify-end items-center flex-none">
-                    {tableData.length > 0 && (
-                        <Button color="red" className="h-[3.2rem] mr-2" type="button" onClick={handleDeleteParam}>
-                            행 삭제
-                        </Button>
-                    )}
-                    <LinkParamsDialog
-                        selectedLink={selectedLink}
-                        form={form}
-                        insertLinkVrbl={insertLinkVrbl}
-                        dialogOpen={dialogOpen}
-                        onOpenChange={setDialogOpen}
-                        updateLinkVrbl={updateLinkVrbl}
-                    />
-                </div>
-                {tableData.length > 0 ? (
-                    <div className="overflow-auto flex-1 min-h-[300px]">
-                        <DataTable table={vrblTable} onRowClick={handleVrblRowClick} />
-                    </div>
-                ) : (
-                    <div className="flex items-center justify-center h-20 text-gray-500 text-3xl">
-                        등록된 연계 변수가 없습니다.
-                    </div>
-                )}
-            </>
-        );
-    };
+    if (linkVrblQuery.isLoading) {
+      return (
+        <div className="[data-theme='black']:bg-transparent flex h-full items-center justify-center rounded-lg p-10">
+          <div className="relative size-[5rem]">
+            <LoadingWithAnimation color="primary" />
+          </div>
+        </div>
+      );
+    }
 
     return (
-        <div className="card card-border !mt-6">
-            <div className="card card-border">
-                <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
-                    <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
-                        일련번호
-                    </Label>
-                    <Input
-                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-4"
-                        id="liSnSearchInput"
-                        value={linkSn}
-                        onChange={(e) => setLinkSn(e.target.value)}
-                        autoComplete="off"
-                    />
-                    <Label htmlFor="liNmSearchInput" className="mr-2 text-label">
-                        연계 명
-                    </Label>
-                    <Input
-                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-2"
-                        id="liNmSearchInput"
-                        value={linkNm}
-                        onChange={(e) => setLinkNm(e.target.value)}
-                        autoComplete="off"
-                    />
-                    <Button color="green" className="h-[3.2rem]" type="button" onClick={handleResetSearchParam}>
-                        초기화
-                    </Button>
-                    <Button className="h-[3.2rem]" type="submit">
-                        조회
-                    </Button>
-                </form>
-            </div>
-            <div className="card !mb-0 flex h-[calc(100vh-28rem)] gap-5 !p-0">
-                <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="card !m-[1.2rem] overflow-auto !p-0 h-full">
-                        {!query.isLoading ? (
-                            <div>{tableComponent}</div>
-                        ) : (
-                            <div className="[data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center h-full">
-                                <div className="relative size-[5rem]">
-                                    <LoadingWithAnimation color="primary" />
-                                </div>
-                            </div>
-                        )}
-                    </div>
-                </div>
-                <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="card !m-[1.2rem] !p-0 overflow-auto h-full flex flex-col">
-                        <Table variant="secondary" className="flex-none">
-                            <colgroup>
-                                <col width="20%" />
-                                <col width="80%" />
-                            </colgroup>
-                            <TableBody>
-                                <TableRow>
-                                    <TableHead>연계 일련번호</TableHead>
-                                    <TableCell>
-                                        {selectedLink.linkSn ? selectedLink.linkSn : '-'}
-                                    </TableCell>
-                                </TableRow>
-                                <TableRow>
-                                    <TableHead>연계 명</TableHead>
-                                    <TableCell>
-                                        {selectedLink.linkNm ? selectedLink.linkNm : '-'}
-                                    </TableCell>
-                                </TableRow>
-                            </TableBody>
-                        </Table>
-                        {renderLinkVrblContent()}
-                    </div>
-                </div>
-            </div>
-            <ConfirmDialog isOpen={onConfirm} />
+      <>
+        <div className="mb-2 mt-14 flex flex-none items-center justify-end">
+          {tableData.length > 0 && (
+            <Button
+              color="red"
+              className="mr-2 h-[3.2rem]"
+              type="button"
+              onClick={handleDeleteParam}
+            >
+              행 삭제
+            </Button>
+          )}
+          <LinkParamsDialog
+            selectedLink={selectedLink}
+            form={form}
+            insertLinkVrbl={insertLinkVrbl}
+            dialogOpen={dialogOpen}
+            onOpenChange={setDialogOpen}
+            updateLinkVrbl={updateLinkVrbl}
+          />
         </div>
+        {tableData.length > 0 ? (
+          <div className="min-h-[300px] flex-1 overflow-auto">
+            <DataTable table={vrblTable} onRowClick={handleVrblRowClick} />
+          </div>
+        ) : (
+          <div className="flex h-20 items-center justify-center text-3xl text-gray-500">
+            등록된 연계 변수가 없습니다.
+          </div>
+        )}
+      </>
     );
+  };
+
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
+        <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
+          <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
+            일련번호
+          </Label>
+          <Input
+            className="mr-4 h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+            id="liSnSearchInput"
+            value={linkSn}
+            onChange={(e) => setLinkSn(e.target.value)}
+            autoComplete="off"
+          />
+          <Label htmlFor="liNmSearchInput" className="mr-2 text-label">
+            연계 명
+          </Label>
+          <Input
+            className="mr-2 h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+            id="liNmSearchInput"
+            value={linkNm}
+            onChange={(e) => setLinkNm(e.target.value)}
+            autoComplete="off"
+          />
+          <Button
+            color="green"
+            className="h-[3.2rem]"
+            type="button"
+            onClick={handleResetSearchParam}
+          >
+            초기화
+          </Button>
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+        </form>
+      </div>
+      <div className="card !mb-0 flex h-[calc(100vh-28rem)] gap-5 !p-0">
+        <div className="card card-border !mx-0 flex w-1/2 flex-col">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">연계 목록</h3>
+          </div>
+          <div className="card !m-[1.2rem] h-full overflow-auto !p-0">
+            {!query.isLoading ? (
+              <div>{tableComponent}</div>
+            ) : (
+              <div className="[data-theme='black']:bg-transparent flex h-full items-center justify-center rounded-lg p-10">
+                <div className="relative size-[5rem]">
+                  <LoadingWithAnimation color="primary" />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="card card-border !mx-0 flex w-1/2 flex-col">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">연계 변수 정보</h3>
+          </div>
+          <div className="card !m-[1.2rem] flex h-full flex-col overflow-auto !p-0">
+            <Table variant="secondary" className="flex-none">
+              <colgroup>
+                <col width="20%" />
+                <col width="80%" />
+              </colgroup>
+              <TableBody>
+                <TableRow>
+                  <TableHead>연계 일련번호</TableHead>
+                  <TableCell>
+                    {selectedLink.linkSn ? selectedLink.linkSn : "-"}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead>연계 명</TableHead>
+                  <TableCell>
+                    {selectedLink.linkNm ? selectedLink.linkNm : "-"}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+            {renderLinkVrblContent()}
+          </div>
+        </div>
+      </div>
+      <ConfirmDialog isOpen={onConfirm} />
+    </div>
+  );
 }
 
-export { LinkParamsPage };
\ No newline at end of file
+export { LinkParamsPage };
diff --git a/apps/cs/src/pages/linkStats/ui/link-stats-page.tsx b/apps/cs/src/pages/linkStats/ui/link-stats-page.tsx
index f6168ba76..19163d24c 100644
--- a/apps/cs/src/pages/linkStats/ui/link-stats-page.tsx
+++ b/apps/cs/src/pages/linkStats/ui/link-stats-page.tsx
@@ -3,376 +3,429 @@
 import { useState, useEffect, useRef } from "react";
 import dayjs from "dayjs";
 import { LinkApi, type LinkStats, type LinkSearchParam } from "@/entities/link";
-import { Button, Label, DatePicker, LoadingWithAnimation } from "@common/components";
 import {
-    Chart as ChartJS,
-    CategoryScale,
-    LinearScale,
-    PointElement,
-    LineElement,
-    Tooltip,
-    Legend,
-    type ChartOptions,
-    type Chart,
+  Button,
+  Label,
+  DatePicker,
+  LoadingWithAnimation,
+} from "@common/components";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Tooltip,
+  Legend,
+  type ChartOptions,
+  type Chart,
 } from "chart.js";
 import { Line } from "react-chartjs-2";
-import { getCoreRowModel, type PaginationState, type RowSelectionState, } from "@tanstack/react-table";
+import {
+  getCoreRowModel,
+  type PaginationState,
+  type RowSelectionState,
+} from "@tanstack/react-table";
 import { columns } from "@/pages/linkLog/model/table-columns";
 import { useDataTable } from "@/shared/lib";
 import { useQuery } from "@tanstack/react-query";
 
 interface LinkStatsListObject {
-    linkSuccStats: LinkStats[] | null;
-    linkFailStats: LinkStats[] | null;
+  linkSuccStats: LinkStats[] | null;
+  linkFailStats: LinkStats[] | null;
 }
 
 function LinkStatsPage() {
+  const succChartRef = useRef<Chart<"line"> | null>(null);
+  const failChartRef = useRef<Chart<"line"> | null>(null);
 
-    const succChartRef = useRef<Chart<"line"> | null>(null);
-    const failChartRef = useRef<Chart<"line"> | null>(null);
+  const [startDate, setStartDate] = useState<string>(
+    dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+  );
+  const [endDate, setEndDate] = useState<string>(dayjs().format("YYYY-MM-DD"));
 
-    const [startDate, setStartDate] = useState<string>(dayjs().subtract(7, "day").format('YYYY-MM-DD'));
-    const [endDate, setEndDate] = useState<string>(dayjs().format('YYYY-MM-DD'));
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
-    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 100,
+  });
 
-    const [pagination, setPagination] = useState<PaginationState>({
-        pageIndex: 0,
-        pageSize: 100,
+  const [linkStatsList, setLinkStatsList] =
+    useState<LinkStatsListObject | null>(null);
+  const [logQueryParam, setLogQueryParam] = useState<{
+    isSucc: "SUCC" | "FAIL";
+    linkSn?: string;
+    linkNm?: string;
+  } | null>(null);
+
+  const query = useQuery({
+    queryKey: [
+      `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`,
+      logQueryParam,
+      pagination,
+    ],
+    queryFn: () =>
+      LinkApi.getLinkLogList({
+        ...logQueryParam,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+        startDate,
+        endDate,
+      }),
+    enabled: !!logQueryParam,
+  });
+
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+        rowSelection,
+      },
+      manualPagination: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setRowSelection,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
+  });
+
+  const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
+    linkSn: "",
+    linkNm: "",
+    startDate: "",
+    endDate: "",
+  });
+
+  ChartJS.register(
+    LineElement,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    Tooltip,
+    Legend,
+  );
+
+  const succData = {
+    labels: linkStatsList?.linkSuccStats?.map((e) => e.link_nm),
+    datasets: [
+      {
+        label: "연계 성공",
+        data: linkStatsList?.linkSuccStats?.map((e) => e.count),
+        fill: false,
+        borderColor: "rgb(53, 162, 235)",
+        backgroundColor: "rgb(53, 162, 235)",
+        tension: 0.1,
+        pointRadius: 6,
+        pointHoverRadius: 8,
+      },
+    ],
+  };
+
+  const succOptions: ChartOptions<"line"> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: "top",
+      },
+    },
+    scales: {
+      y: {
+        min: 0,
+      },
+    },
+  };
+
+  const failData = {
+    labels: linkStatsList?.linkFailStats?.map((e) => e.link_nm),
+    datasets: [
+      {
+        label: "연계 실패",
+        data: linkStatsList?.linkFailStats?.map((e) => e.count),
+        fill: false,
+        borderColor: "rgb(255, 99, 132)",
+        backgroundColor: "rgb(255, 99, 132)",
+        tension: 0.1,
+        pointRadius: 6,
+        pointHoverRadius: 8,
+      },
+    ],
+  };
+
+  const failOptions: ChartOptions<"line"> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: "top",
+      },
+    },
+    scales: {
+      y: {
+        min: 0,
+      },
+    },
+  };
+
+  const handleResetSearchParam = async () => {
+    setLinkSearchParam({
+      linkSn: "",
+      linkNm: "",
+      startDate: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+      endDate: dayjs().format("YYYY-MM-DD"),
     });
 
-    const [linkStatsList, setLinkStatsList] = useState<LinkStatsListObject | null>(null);
-    const [logQueryParam, setLogQueryParam] = useState<{
-        isSucc: 'SUCC' | 'FAIL';
-        linkSn?: string;
-        linkNm?: string;
-    } | null>(null);
-
-    const query = useQuery({
-        queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`, logQueryParam, pagination],
-        queryFn: () =>
-            LinkApi.getLinkLogList({
-                ...logQueryParam,
-                page: pagination.pageIndex,
-                size: pagination.pageSize,
-                startDate,
-                endDate,
-            }),
-        enabled: !!logQueryParam,
+    setLogQueryParam({
+      isSucc: "SUCC",
+      linkNm: "",
+      linkSn: "",
     });
 
+    setStartDate(dayjs().subtract(7, "day").format("YYYY-MM-DD"));
+    setEndDate(dayjs().format("YYYY-MM-DD"));
 
-    const { tableComponent } = useDataTable({
-        query,
-        tableOptions: {
-            columns,
-            state: {
-                pagination,
-                rowSelection,
-            },
-            manualPagination: true,
-            enableMultiRowSelection: true,
-            getCoreRowModel: getCoreRowModel(),
-            onPaginationChange: setPagination,
-            onRowSelectionChange: setRowSelection,
-        },
-        dataTableOptions: {
-            viewPagination: true,
-        },
+    const data = await LinkApi.getLinkStatsList({
+      ...linkSearchParam,
+      linkSn: "",
+      linkNm: "",
+      startDate: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+      endDate: dayjs().format("YYYY-MM-DD"),
     });
+    setLinkStatsList(data);
+  };
 
-    const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
-        linkSn: '',
-        linkNm: '',
-        startDate: '',
-        endDate: '',
-    });
+  const handleSubmit = async (e?: React.SubmitEvent<HTMLFormElement>) => {
+    e?.preventDefault();
 
-    ChartJS.register(
-        LineElement,
-        CategoryScale,
-        LinearScale,
-        PointElement,
-        Tooltip,
-        Legend
+    if (startDate && endDate) {
+      if (startDate > endDate) {
+        alert("종료일이 시작일보다 이전일 수 없습니다.");
+        return;
+      } else {
+        const data = await LinkApi.getLinkStatsList({
+          ...linkSearchParam,
+          startDate,
+          endDate,
+        });
+        setLinkStatsList(data);
+        setLogQueryParam({
+          isSucc: "SUCC",
+          linkNm: "",
+          linkSn: "",
+        });
+        setLinkSearchParam({
+          ...linkSearchParam,
+          startDate,
+          endDate,
+        });
+      }
+    } else {
+      alert("조회 날짜를 선택해주세요.");
+      return;
+    }
+  };
+
+  const handleSuccChartClick = async (
+    event: React.MouseEvent<HTMLCanvasElement>,
+  ) => {
+    if (!succChartRef.current) return;
+
+    const chart = succChartRef.current;
+
+    const points = chart.getElementsAtEventForMode(
+      event.nativeEvent,
+      "nearest",
+      { intersect: true },
+      false,
     );
 
-    const succData = {
-        labels: linkStatsList?.linkSuccStats?.map((e) => e.link_nm),
-        datasets: [
-            {
-                label: '연계 성공',
-                data: linkStatsList?.linkSuccStats?.map((e) => e.count),
-                fill: false,
-                borderColor: 'rgb(53, 162, 235)',
-                backgroundColor: 'rgb(53, 162, 235)',
-                tension: 0.1,
-                pointRadius: 6,
-                pointHoverRadius: 8,
-            },
-        ],
+    if (points[0] && linkStatsList?.linkSuccStats) {
+      const index = points[0].index;
+      setPagination({
+        ...pagination,
+        pageIndex: 0,
+        pageSize: 100,
+      });
+      setLogQueryParam({
+        isSucc: "SUCC",
+        linkNm: linkStatsList.linkSuccStats[index]?.link_nm,
+        linkSn: linkStatsList.linkSuccStats[index]?.link_sn,
+      });
+    }
+  };
+
+  const handleFailChartClick = async (
+    event: React.MouseEvent<HTMLCanvasElement>,
+  ) => {
+    if (!failChartRef.current) return;
+
+    const chart = failChartRef.current;
+
+    const points = chart.getElementsAtEventForMode(
+      event.nativeEvent,
+      "nearest",
+      { intersect: true },
+      false,
+    );
+
+    if (points[0] && linkStatsList?.linkFailStats) {
+      const index = points[0].index;
+      setPagination({
+        ...pagination,
+        pageIndex: 0,
+        pageSize: 100,
+      });
+      setLogQueryParam({
+        isSucc: "FAIL",
+        linkNm: linkStatsList.linkFailStats[index]?.link_nm,
+        linkSn: linkStatsList.linkFailStats[index]?.link_sn,
+      });
+    }
+  };
+
+  const handleSubmitToday = async () => {
+    const data = await LinkApi.getLinkStatsList({
+      ...linkSearchParam,
+      startDate: dayjs().format("YYYY-MM-DD"),
+      endDate: dayjs().format("YYYY-MM-DD"),
+    });
+    setEndDate(dayjs().format("YYYY-MM-DD"));
+    setStartDate(dayjs().format("YYYY-MM-DD"));
+    setLinkStatsList(data);
+    setLinkSearchParam({
+      ...linkSearchParam,
+      startDate: dayjs().format("YYYY-MM-DD"),
+      endDate: dayjs().format("YYYY-MM-DD"),
+    });
+    setLogQueryParam({
+      isSucc: "SUCC",
+      linkNm: "",
+      linkSn: "",
+    });
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await LinkApi.getLinkStatsList({
+        ...linkSearchParam,
+        startDate,
+        endDate,
+      });
+      setLinkStatsList(data);
     };
 
-    const succOptions: ChartOptions<'line'> = {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-            legend: {
-                position: 'top',
-            },
-        },
-        scales: {
-            y: {
-                min: 0,
-            },
-        },
-    };
+    setLinkSearchParam({
+      ...linkSearchParam,
+      startDate,
+      endDate,
+    });
 
-    const failData = {
-        labels: linkStatsList?.linkFailStats?.map((e) => e.link_nm),
-        datasets: [
-            {
-                label: '연계 실패',
-                data: linkStatsList?.linkFailStats?.map((e) => e.count),
-                fill: false,
-                borderColor: 'rgb(255, 99, 132)',
-                backgroundColor: 'rgb(255, 99, 132)',
-                tension: 0.1,
-                pointRadius: 6,
-                pointHoverRadius: 8,
-            },
-        ],
-    };
+    fetchData();
+  }, []);
 
-    const failOptions: ChartOptions<'line'> = {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-            legend: {
-                position: 'top',
-            },
-        },
-        scales: {
-            y: {
-                min: 0,
-            },
-        },
-    };
-
-    const handleResetSearchParam = async () => {
-        setLinkSearchParam({
-            linkSn: '',
-            linkNm: '',
-            startDate: dayjs().subtract(7, "day").format('YYYY-MM-DD'),
-            endDate: dayjs().format('YYYY-MM-DD'),
-        });
-
-        setLogQueryParam({
-            isSucc: 'SUCC',
-            linkNm: '',
-            linkSn: '',
-        });
-
-        setStartDate(dayjs().subtract(7, "day").format('YYYY-MM-DD'));
-        setEndDate(dayjs().format('YYYY-MM-DD'));
-
-        const data = await LinkApi.getLinkStatsList({
-            ...linkSearchParam,
-            linkSn: '',
-            linkNm: '',
-            startDate: dayjs().subtract(7, "day").format('YYYY-MM-DD'),
-            endDate: dayjs().format('YYYY-MM-DD'),
-        });
-        setLinkStatsList(data);
-    };
-
-    const handleSubmit = async (e?: React.FormEvent<HTMLFormElement>) => {
-        e?.preventDefault();
-
-        if (startDate && endDate) {
-
-            if (startDate > endDate) {
-                alert('종료일이 시작일보다 이전일 수 없습니다.');
-                return;
-            } else {
-                const data = await LinkApi.getLinkStatsList({
-                    ...linkSearchParam,
-                    startDate,
-                    endDate
-                });
-                setLinkStatsList(data);
-                setLogQueryParam({
-                    isSucc: 'SUCC',
-                    linkNm: '',
-                    linkSn: '',
-                });
-                setLinkSearchParam({
-                    ...linkSearchParam,
-                    startDate,
-                    endDate
-                });
-            }
-        } else {
-            alert('조회 날짜를 선택해주세요.');
-            return;
-        }
-    };
-
-    const handleSuccChartClick = async (event: React.MouseEvent<HTMLCanvasElement>) => {
-        if (!succChartRef.current) return;
-
-        const chart = succChartRef.current;
-
-        const points = chart.getElementsAtEventForMode(
-            event.nativeEvent,
-            "nearest",
-            { intersect: true },
-            false
-        );
-
-        if (points[0] && linkStatsList?.linkSuccStats) {
-            const index = points[0].index;
-            setPagination({
-                ...pagination,
-                pageIndex: 0,
-                pageSize: 100,
-            });
-            setLogQueryParam({
-                isSucc: 'SUCC',
-                linkNm: linkStatsList.linkSuccStats[index]?.link_nm,
-                linkSn: linkStatsList.linkSuccStats[index]?.link_sn,
-            });
-        }
-    };
-
-    const handleFailChartClick = async (event: React.MouseEvent<HTMLCanvasElement>) => {
-        if (!failChartRef.current) return;
-
-        const chart = failChartRef.current;
-
-        const points = chart.getElementsAtEventForMode(
-            event.nativeEvent,
-            "nearest",
-            { intersect: true },
-            false
-        );
-
-        if (points[0] && linkStatsList?.linkFailStats) {
-            const index = points[0].index;
-            setPagination({
-                ...pagination,
-                pageIndex: 0,
-                pageSize: 100,
-            });
-            setLogQueryParam({
-                isSucc: 'FAIL',
-                linkNm: linkStatsList.linkFailStats[index]?.link_nm,
-                linkSn: linkStatsList.linkFailStats[index]?.link_sn,
-            });
-        }
-    };
-
-    const handleSubmitToday = async () => {
-        const data = await LinkApi.getLinkStatsList({
-            ...linkSearchParam,
-            startDate: dayjs().format('YYYY-MM-DD'),
-            endDate: dayjs().format('YYYY-MM-DD'),
-        });
-        setEndDate(dayjs().format('YYYY-MM-DD'));
-        setStartDate(dayjs().format('YYYY-MM-DD'));
-        setLinkStatsList(data);
-        setLinkSearchParam({
-            ...linkSearchParam,
-            startDate: dayjs().format('YYYY-MM-DD'),
-            endDate: dayjs().format('YYYY-MM-DD'),
-        });
-        setLogQueryParam({
-            isSucc: 'SUCC',
-            linkNm: '',
-            linkSn: '',
-        });
-    };
-
-    useEffect(() => {
-        const fetchData = async () => {
-            const data = await LinkApi.getLinkStatsList({
-                ...linkSearchParam,
-                startDate,
-                endDate
-            });
-            setLinkStatsList(data);
-        };
-
-        setLinkSearchParam({
-            ...linkSearchParam,
-            startDate,
-            endDate
-        });
-
-        fetchData();
-    }, []);
-
-    return (
-        <div className="card !mb-0 !min-h-[calc(100vh-16.8rem)]">
-            <div className="card card-border">
-                <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
-                    <Label htmlFor="sDateSearchInput" className="mx-2 text-label">
-                        시작일
-                    </Label>
-                    <DatePicker id="sDateSearchInput" mode={"single"} selected={dayjs(startDate).toDate()} onSelect={(e) => setStartDate(dayjs(e).format('YYYY-MM-DD'))} />
-                    <Label htmlFor="eDateSearchInput" className="mx-2 text-label">
-                        종료일
-                    </Label>
-                    <DatePicker id="eDateSearchInput" mode={"single"} className="mr-2" selected={dayjs(endDate).toDate()} onSelect={(e) => setEndDate(dayjs(e).format('YYYY-MM-DD'))} />
-                    <Button color="green" className="h-[3.2rem]" type="button" onClick={handleResetSearchParam}>
-                        초기화
-                    </Button>
-                    <Button className="h-[3.2rem]" type="submit">
-                        조회
-                    </Button>
-                    <Button className="h-[3.2rem]" type="button" onClick={handleSubmitToday}>
-                        오늘 날짜로 조회
-                    </Button>
-                </form>
-            </div>
-            <div className="card card-border">
-                <div className="card !m-[1.2rem] !p-0 flex flex-col gap-y-8">
-                    <div className="card-header">
-                        <h3 className="text-2xl font-medium text-label">조회 일자 : {`${linkSearchParam.startDate} ~ ${linkSearchParam.endDate}`}</h3>
-                    </div>
-                    <div className="h-[32rem] w-full">
-                        <Line ref={succChartRef} data={succData} options={succOptions} onClick={handleSuccChartClick} />
-                    </div>
-                    <div className="h-[32rem]">
-                        <Line ref={failChartRef} data={failData} options={failOptions} onClick={handleFailChartClick} />
-                    </div>
-                </div>
-                <div className="card !m-[1.2rem] !p-0">
-                    <div className="card-header">
-                        <h3 className="text-2xl font-medium text-label">
-                            {logQueryParam?.linkNm ? `${logQueryParam.linkNm} 연계 ${logQueryParam.isSucc === 'FAIL' ? '실패' : '성공'} 로그 목록 (${linkSearchParam.startDate} ~ ${linkSearchParam.endDate}) - ${query.data?.totalElements.toLocaleString('ko-KR') ?? 0}건` : '로그 목록'}
-                        </h3>
-                    </div>
-                    <div className="card !m-[1.2rem] h-[40rem] overflow-auto !p-0">
-                        {logQueryParam?.linkNm ?
-                            query.isLoading ?
-                                <div className="[data-theme='black']:bg-transparent rounded-lg p-10 h-full flex justify-center items-center">
-                                    <div className="relative size-[5rem]">
-                                        <LoadingWithAnimation color="primary" />
-                                    </div>
-                                </div>
-                                :
-                                <div>{tableComponent}</div>
-                            :
-                            <div className="flex items-center justify-center h-full text-gray-500 text-3xl">
-                                차트 데이터를 선택해주세요.
-                            </div>
-                        }
-                    </div>
-                </div>
-            </div>
+  return (
+    <div className="card !mb-0 !min-h-[calc(100vh-16.8rem)]">
+      <div className="card card-border">
+        <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
+          <Label htmlFor="sDateSearchInput" className="mx-2 text-label">
+            시작일
+          </Label>
+          <DatePicker
+            id="sDateSearchInput"
+            mode={"single"}
+            selected={dayjs(startDate).toDate()}
+            onSelect={(e) => setStartDate(dayjs(e).format("YYYY-MM-DD"))}
+          />
+          <Label htmlFor="eDateSearchInput" className="mx-2 text-label">
+            종료일
+          </Label>
+          <DatePicker
+            id="eDateSearchInput"
+            mode={"single"}
+            className="mr-2"
+            selected={dayjs(endDate).toDate()}
+            onSelect={(e) => setEndDate(dayjs(e).format("YYYY-MM-DD"))}
+          />
+          <Button
+            color="green"
+            className="h-[3.2rem]"
+            type="button"
+            onClick={handleResetSearchParam}
+          >
+            초기화
+          </Button>
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+          <Button
+            className="h-[3.2rem]"
+            type="button"
+            onClick={handleSubmitToday}
+          >
+            오늘 날짜로 조회
+          </Button>
+        </form>
+      </div>
+      <div className="card card-border">
+        <div className="card !m-[1.2rem] flex flex-col gap-y-8 !p-0">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">
+              조회 일자 :{" "}
+              {`${linkSearchParam.startDate} ~ ${linkSearchParam.endDate}`}
+            </h3>
+          </div>
+          <div className="h-[32rem] w-full">
+            <Line
+              ref={succChartRef}
+              data={succData}
+              options={succOptions}
+              onClick={handleSuccChartClick}
+            />
+          </div>
+          <div className="h-[32rem]">
+            <Line
+              ref={failChartRef}
+              data={failData}
+              options={failOptions}
+              onClick={handleFailChartClick}
+            />
+          </div>
         </div>
-    )
-};
+        <div className="card !m-[1.2rem] !p-0">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">
+              {logQueryParam?.linkNm
+                ? `${logQueryParam.linkNm} 연계 ${logQueryParam.isSucc === "FAIL" ? "실패" : "성공"} 로그 목록 (${linkSearchParam.startDate} ~ ${linkSearchParam.endDate}) - ${query.data?.totalElements.toLocaleString("ko-KR") ?? 0}건`
+                : "로그 목록"}
+            </h3>
+          </div>
+          <div className="card !m-[1.2rem] h-[40rem] overflow-auto !p-0">
+            {logQueryParam?.linkNm ? (
+              query.isLoading ? (
+                <div className="[data-theme='black']:bg-transparent flex h-full items-center justify-center rounded-lg p-10">
+                  <div className="relative size-[5rem]">
+                    <LoadingWithAnimation color="primary" />
+                  </div>
+                </div>
+              ) : (
+                <div>{tableComponent}</div>
+              )
+            ) : (
+              <div className="flex h-full items-center justify-center text-3xl text-gray-500">
+                차트 데이터를 선택해주세요.
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
 
-export { LinkStatsPage };
\ No newline at end of file
+export { LinkStatsPage };
diff --git a/apps/cs/src/pages/linkTable/ui/link-table-page.tsx b/apps/cs/src/pages/linkTable/ui/link-table-page.tsx
index 0394e7bf6..3ccee78e8 100644
--- a/apps/cs/src/pages/linkTable/ui/link-table-page.tsx
+++ b/apps/cs/src/pages/linkTable/ui/link-table-page.tsx
@@ -1,20 +1,35 @@
-'use client';
+"use client";
 
 import { useState, useMemo } from "react";
 import {
-    Button,
-    DataTable,
-    Input,
-    Label,
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableRow,
-    LoadingWithAnimation,
+  Button,
+  DataTable,
+  Input,
+  Label,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  LoadingWithAnimation,
 } from "@common/components";
-import { getCoreRowModel, type PaginationState, type RowSelectionState, useReactTable } from "@tanstack/react-table";
-import { LinkApi, type Link, type LinkSearchParam, type LinkTable, type LinkTableColumns, type LinkTableColData, type LinkTableFormData, LinkTableColumnsSchema, LinkTableSchema } from "@/entities/link";
+import {
+  getCoreRowModel,
+  type PaginationState,
+  type RowSelectionState,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  LinkApi,
+  type Link,
+  type LinkSearchParam,
+  type LinkTable,
+  type LinkTableColumns,
+  type LinkTableColData,
+  type LinkTableFormData,
+  LinkTableColumnsSchema,
+  LinkTableSchema,
+} from "@/entities/link";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { columns } from "../../linkParams/model/table-columns";
 import { tableColumns } from "../model/table-columns";
@@ -31,680 +46,778 @@ import { FormItem, FormControl, FormField, Form } from "@/shared/ui/form";
 import { useDataTable } from "@/shared/lib";
 
 function LinkTablePage() {
-    const queryClient = useQueryClient();
+  const queryClient = useQueryClient();
 
-    const userUniqId = getCookie(AUTH_USER_ID) ?? "";
+  const userUniqId = getCookie(AUTH_USER_ID) ?? "";
 
-    const [linkSn, setLinkSn] = useState<string>('');
-    const [linkNm, setLinkNm] = useState<string>('');
+  const [linkSn, setLinkSn] = useState<string>("");
+  const [linkNm, setLinkNm] = useState<string>("");
 
-    const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
-        linkSn: '',
-        linkNm: ''
-    });
+  const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
+    linkSn: "",
+    linkNm: "",
+  });
 
-    const [selectedTableInfo, setSelectedTableInfo] = useState<LinkTable | null>(null);
-    const [tableColList, setTableColList] = useState<LinkTableColumns[]>([]);
-    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
-    const [selectedColIds, setSelectedColIds] = useState<string[]>([]);
+  const [selectedTableInfo, setSelectedTableInfo] = useState<LinkTable | null>(
+    null,
+  );
+  const [tableColList, setTableColList] = useState<LinkTableColumns[]>([]);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+  const [selectedColIds, setSelectedColIds] = useState<string[]>([]);
 
-    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
-    const [pagination, setPagination] = useState<PaginationState>({
-        pageIndex: 0,
-        pageSize: 100,
-    });
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 100,
+  });
 
-    const { setMessage: alert } = useAlertStore((state) => state);
+  const { setMessage: alert } = useAlertStore((state) => state);
 
-    const { confirm } = useConfirm();
-    const [onConfirm, setOnConfirm] = useState<boolean>(false);
+  const { confirm } = useConfirm();
+  const [onConfirm, setOnConfirm] = useState<boolean>(false);
 
-    const handleConfirm = async (callback: () => Promise<void>) => {
-        setOnConfirm(true);
-        await callback();
-        setOnConfirm(false);
-    };
+  const handleConfirm = async (callback: () => Promise<void>) => {
+    setOnConfirm(true);
+    await callback();
+    setOnConfirm(false);
+  };
 
-    const query = useQuery({
-        queryKey: ['/api/link/getLinkList', linkSearchParam],
-        queryFn: () => LinkApi.getLinkList({
-            ...linkSearchParam,
-            page: pagination.pageIndex,
-            size: pagination.pageSize,
-        }),
-    });
+  const query = useQuery({
+    queryKey: ["/api/link/getLinkList", linkSearchParam],
+    queryFn: () =>
+      LinkApi.getLinkList({
+        ...linkSearchParam,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+  });
 
-    const { mutateAsync: insertLinkTableCol } = useMutation({
-        mutationFn: async (data: LinkTableColData) => await LinkApi.insertLinkTableCol({
-            ...data,
-            mdfr_id: userUniqId,
-        }),
-        onSuccess: async () => {
-            if (selectedTableInfo) {
-                await queryClient.invalidateQueries({
-                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`]
-                });
-                await queryClient.invalidateQueries({
-                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`]
-                });
-
-                const tableData = await LinkApi.getLinkTableInfo(selectedTableInfo.link_sn);
-                const tableColList = await LinkApi.getLinkTableColList(selectedTableInfo.link_sn);
-
-                setSelectedTableInfo(tableData);
-                setTableColList(tableColList.content);
-                setSelectedColIds([]);
-                setDialogOpen(false);
-                alert('저장되었습니다.');
-            }
-        }
-    });
-
-    const { mutateAsync: updateLinkTableCol } = useMutation({
-        mutationFn: async (data: LinkTableColData) => await LinkApi.updateLinkTableCol({
-            ...data,
-            mdfr_id: userUniqId,
-        }),
-        onSuccess: async () => {
-            if (selectedTableInfo) {
-                await queryClient.invalidateQueries({
-                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`]
-                });
-                await queryClient.invalidateQueries({
-                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`]
-                });
-
-                const tableData = await LinkApi.getLinkTableInfo(selectedTableInfo.link_sn);
-                const tableColList = await LinkApi.getLinkTableColList(selectedTableInfo.link_sn);
-
-                setSelectedTableInfo(tableData);
-                setTableColList(tableColList.content);
-                setSelectedColIds([]);
-                setDialogOpen(false);
-                alert('수정되었습니다.');
-            }
-        }
-    });
-
-    const { mutateAsync: deleteLinkTableCol } = useMutation({
-        mutationFn: async (data: string[]) => await LinkApi.deleteLinkTableCol(data),
-        onSuccess: async () => {
-            if (selectedTableInfo) {
-                await queryClient.invalidateQueries({
-                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`]
-                });
-                await queryClient.invalidateQueries({
-                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`]
-                });
-
-                const tableData = await LinkApi.getLinkTableInfo(selectedTableInfo.link_sn);
-                const tableColList = await LinkApi.getLinkTableColList(selectedTableInfo.link_sn);
-
-                setSelectedTableInfo(tableData);
-                setTableColList(tableColList.content);
-                setSelectedColIds([]);
-                setDialogOpen(false);
-                alert('삭제되었습니다.');
-            }
-        }
-    });
-
-    const { mutateAsync: insertLinkTableInfo } = useMutation({
-        mutationFn: async (data: LinkTableFormData) => await LinkApi.insertLinkTableInfo(data),
-        onSuccess: async () => {
-            if (selectedTableInfo) {
-                await queryClient.invalidateQueries({
-                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`]
-                });
-                await queryClient.invalidateQueries({
-                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`]
-                });
-
-                const tableData = await LinkApi.getLinkTableInfo(selectedTableInfo.link_sn);
-                const tableColList = await LinkApi.getLinkTableColList(selectedTableInfo.link_sn);
-
-                tableForm.reset({
-                    link_sn: tableData.link_sn,
-                    link_nm: tableData.link_nm,
-                    tbl_sn: tableData.tbl_sn ?? "",
-                    sou_tbl_nm: tableData.sou_tbl_nm ?? "",
-                    sou_tbl_korn_nm: tableData.sou_tbl_korn_nm ?? "",
-                    sou_tbl_expln: tableData.sou_tbl_expln ?? "",
-                    trsf_tbl_expln: tableData.trsf_tbl_expln ?? "",
-                    trsf_tbl_nm: tableData.trsf_tbl_nm ?? "",
-                    trsf_tbl_korn_nm: tableData.trsf_tbl_korn_nm ?? "",
-                });
-                setSelectedTableInfo(tableData);
-                setTableColList(tableColList.content);
-                setSelectedColIds([]);
-                alert('저장되었습니다.');
-            }
-        }
-    });
-
-    const { mutateAsync: updateLinkTableInfo } = useMutation({
-        mutationFn: async (data: LinkTableFormData) => await LinkApi.updateLinkTableInfo(data),
-        onSuccess: async () => {
-            if (selectedTableInfo) {
-                await queryClient.invalidateQueries({
-                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`]
-                });
-                await queryClient.invalidateQueries({
-                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`]
-                });
-                
-                const tableData = await LinkApi.getLinkTableInfo(selectedTableInfo.link_sn);
-                const tableColList = await LinkApi.getLinkTableColList(selectedTableInfo.link_sn);
-
-                setSelectedTableInfo(tableData);
-                setTableColList(tableColList.content);
-                setSelectedColIds([]);
-                alert('수정되었습니다.');
-            }
-        }
-    });
-
-    const tableCol = useMemo(
-        () =>
-            tableColumns({ selectedColIds, setSelectedColIds }),
-        [selectedColIds]
-    );
-
-    const colTable = useReactTable({
-        data: tableColList,
-        columns: tableCol,
-        getCoreRowModel: getCoreRowModel(),
-    });
-
-    const form = useForm<LinkTableColData>({
-        resolver: zodResolver(LinkTableColumnsSchema),
-        defaultValues: {
-            pk_yn: "N"
-        }
-    });
-
-    const tableForm = useForm<LinkTableFormData>({
-        resolver: zodResolver(LinkTableSchema),
-        defaultValues: {},
-    });
-
-    const handleResetSearchParam = async () => {
-        setSelectedTableInfo(null);
-        setTableColList([]);
-        setLinkSn('');
-        setLinkNm('');
-        setLinkSearchParam({
-            ...linkSearchParam,
-            linkSn: '',
-            linkNm: '',
+  const { mutateAsync: insertLinkTableCol } = useMutation({
+    mutationFn: async (data: LinkTableColData) =>
+      await LinkApi.insertLinkTableCol({
+        ...data,
+        mdfr_id: userUniqId,
+      }),
+    onSuccess: async () => {
+      if (selectedTableInfo) {
+        await queryClient.invalidateQueries({
+          queryKey: [
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`,
+          ],
         });
-    };
-
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        setSelectedTableInfo(null);
-        setTableColList([]);
-
-        setLinkSearchParam({
-            ...linkSearchParam,
-            linkSn,
-            linkNm
+        await queryClient.invalidateQueries({
+          queryKey: [
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`,
+          ],
         });
-    };
 
-    const handleRowClick = async (data: Link) => {
-        const tableData = await LinkApi.getLinkTableInfo(data.link_sn);
-        const tableColList = await LinkApi.getLinkTableColList(data.link_sn);
+        const tableData = await LinkApi.getLinkTableInfo(
+          selectedTableInfo.link_sn,
+        );
+        const tableColList = await LinkApi.getLinkTableColList(
+          selectedTableInfo.link_sn,
+        );
 
         setSelectedTableInfo(tableData);
         setTableColList(tableColList.content);
         setSelectedColIds([]);
+        setDialogOpen(false);
+        alert("저장되었습니다.");
+      }
+    },
+  });
+
+  const { mutateAsync: updateLinkTableCol } = useMutation({
+    mutationFn: async (data: LinkTableColData) =>
+      await LinkApi.updateLinkTableCol({
+        ...data,
+        mdfr_id: userUniqId,
+      }),
+    onSuccess: async () => {
+      if (selectedTableInfo) {
+        await queryClient.invalidateQueries({
+          queryKey: [
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`,
+          ],
+        });
+        await queryClient.invalidateQueries({
+          queryKey: [
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`,
+          ],
+        });
+
+        const tableData = await LinkApi.getLinkTableInfo(
+          selectedTableInfo.link_sn,
+        );
+        const tableColList = await LinkApi.getLinkTableColList(
+          selectedTableInfo.link_sn,
+        );
+
+        setSelectedTableInfo(tableData);
+        setTableColList(tableColList.content);
+        setSelectedColIds([]);
+        setDialogOpen(false);
+        alert("수정되었습니다.");
+      }
+    },
+  });
+
+  const { mutateAsync: deleteLinkTableCol } = useMutation({
+    mutationFn: async (data: string[]) =>
+      await LinkApi.deleteLinkTableCol(data),
+    onSuccess: async () => {
+      if (selectedTableInfo) {
+        await queryClient.invalidateQueries({
+          queryKey: [
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`,
+          ],
+        });
+        await queryClient.invalidateQueries({
+          queryKey: [
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`,
+          ],
+        });
+
+        const tableData = await LinkApi.getLinkTableInfo(
+          selectedTableInfo.link_sn,
+        );
+        const tableColList = await LinkApi.getLinkTableColList(
+          selectedTableInfo.link_sn,
+        );
+
+        setSelectedTableInfo(tableData);
+        setTableColList(tableColList.content);
+        setSelectedColIds([]);
+        setDialogOpen(false);
+        alert("삭제되었습니다.");
+      }
+    },
+  });
+
+  const { mutateAsync: insertLinkTableInfo } = useMutation({
+    mutationFn: async (data: LinkTableFormData) =>
+      await LinkApi.insertLinkTableInfo(data),
+    onSuccess: async () => {
+      if (selectedTableInfo) {
+        await queryClient.invalidateQueries({
+          queryKey: [
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`,
+          ],
+        });
+        await queryClient.invalidateQueries({
+          queryKey: [
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`,
+          ],
+        });
+
+        const tableData = await LinkApi.getLinkTableInfo(
+          selectedTableInfo.link_sn,
+        );
+        const tableColList = await LinkApi.getLinkTableColList(
+          selectedTableInfo.link_sn,
+        );
 
         tableForm.reset({
-            link_sn: tableData.link_sn,
-            link_nm: tableData.link_nm,
-            tbl_sn: tableData.tbl_sn ?? "",
-            sou_tbl_nm: tableData.sou_tbl_nm ?? "",
-            sou_tbl_korn_nm: tableData.sou_tbl_korn_nm ?? "",
-            sou_tbl_expln: tableData.sou_tbl_expln ?? "",
-            trsf_tbl_expln: tableData.trsf_tbl_expln ?? "",
-            trsf_tbl_nm: tableData.trsf_tbl_nm ?? "",
-            trsf_tbl_korn_nm: tableData.trsf_tbl_korn_nm ?? "",
+          link_sn: tableData.link_sn,
+          link_nm: tableData.link_nm,
+          tbl_sn: tableData.tbl_sn ?? "",
+          sou_tbl_nm: tableData.sou_tbl_nm ?? "",
+          sou_tbl_korn_nm: tableData.sou_tbl_korn_nm ?? "",
+          sou_tbl_expln: tableData.sou_tbl_expln ?? "",
+          trsf_tbl_expln: tableData.trsf_tbl_expln ?? "",
+          trsf_tbl_nm: tableData.trsf_tbl_nm ?? "",
+          trsf_tbl_korn_nm: tableData.trsf_tbl_korn_nm ?? "",
         });
-    };
+        setSelectedTableInfo(tableData);
+        setTableColList(tableColList.content);
+        setSelectedColIds([]);
+        alert("저장되었습니다.");
+      }
+    },
+  });
 
-    const handleColumnRowClick = async (data: LinkTableColumns) => {
-        const colInfo = await LinkApi.getLinkTableColInfo({ colSn: data.col_sn, tblSn: data.tbl_sn });
+  const { mutateAsync: updateLinkTableInfo } = useMutation({
+    mutationFn: async (data: LinkTableFormData) =>
+      await LinkApi.updateLinkTableInfo(data),
+    onSuccess: async () => {
+      if (selectedTableInfo) {
+        await queryClient.invalidateQueries({
+          queryKey: [
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`,
+          ],
+        });
+        await queryClient.invalidateQueries({
+          queryKey: [
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`,
+          ],
+        });
 
-        if (colInfo) {
-            let newData = { ...colInfo };
+        const tableData = await LinkApi.getLinkTableInfo(
+          selectedTableInfo.link_sn,
+        );
+        const tableColList = await LinkApi.getLinkTableColList(
+          selectedTableInfo.link_sn,
+        );
 
-            if (colInfo.mdfr_id) {
-                const userName = await fetchUserInfo();
-                newData = {
-                    ...colInfo,
-                    mdfr_id: userName,
-                };
-            }
+        setSelectedTableInfo(tableData);
+        setTableColList(tableColList.content);
+        setSelectedColIds([]);
+        alert("수정되었습니다.");
+      }
+    },
+  });
 
-            form.reset(newData);
+  const tableCol = useMemo(
+    () => tableColumns({ selectedColIds, setSelectedColIds }),
+    [selectedColIds],
+  );
 
-        }
-        setDialogOpen(true)
-    };
+  const colTable = useReactTable({
+    data: tableColList,
+    columns: tableCol,
+    getCoreRowModel: getCoreRowModel(),
+  });
 
-    const fetchUserInfo = async () => {
-        const userData = await getUserInfo();
-        return userData.userName;
-    };
+  const form = useForm<LinkTableColData>({
+    resolver: zodResolver(LinkTableColumnsSchema),
+    defaultValues: {
+      pk_yn: "N",
+    },
+  });
 
-    const handleDeleteParam = async () => {
-        if (selectedColIds.length === 0) {
-            alert('삭제할 컬럼을 선택해 주세요.');
-        } else {
-            await handleConfirm(async () => {
-                if (await confirm('선택한 컬럼 정보를 삭제하시겠습니까?')) {
-                    deleteLinkTableCol(selectedColIds);
-                }
-            });
-        }
-    };
+  const tableForm = useForm<LinkTableFormData>({
+    resolver: zodResolver(LinkTableSchema),
+    defaultValues: {},
+  });
 
-    const handleTableSubmit = async (data: LinkTableFormData) => {
-        const regTblInfo = await LinkApi.countLinkTblNm(data.trsf_tbl_nm);
-        const confirmMsg = (regTblInfo.count > 0 && data.trsf_tbl_nm !== selectedTableInfo?.trsf_tbl_nm) ? `이미 사용중인 테이블 명입니다. 해당 테이블 명으로 ${!data.tbl_sn ? '저장' : '수정'}하시겠습니까?` : `${!data.tbl_sn ? '저장' : '수정'}하시겠습니까?`;
-        if (!data.tbl_sn) {
-            await handleConfirm(async () => {
-                if (await confirm(confirmMsg)) {
-                    insertLinkTableInfo({
-                        ...data,
-                        mdfr_id: userUniqId,
-                        tbl_sn: (regTblInfo.count > 0) ? regTblInfo.tbl_sn : "",
-                    });
-                }
-            });
-        } else {
-            await handleConfirm(async () => {
-                if (await confirm(confirmMsg)) {
-                    updateLinkTableInfo({
-                        ...data,
-                        tbl_sn: (regTblInfo.count > 0) ? regTblInfo.tbl_sn : "",
-                        mdfr_id: userUniqId,
-                    });
-                }
-            });
-        }
+  const handleResetSearchParam = async () => {
+    setSelectedTableInfo(null);
+    setTableColList([]);
+    setLinkSn("");
+    setLinkNm("");
+    setLinkSearchParam({
+      ...linkSearchParam,
+      linkSn: "",
+      linkNm: "",
+    });
+  };
 
-    };
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setSelectedTableInfo(null);
+    setTableColList([]);
 
-    const { tableComponent } = useDataTable({
-        query,
-        tableOptions: {
-            columns,
-            state: {
-                pagination,
-                rowSelection,
-            },
-            manualPagination: true,
-            enableMultiRowSelection: true,
-            getCoreRowModel: getCoreRowModel(),
-            onPaginationChange: setPagination,
-            onRowSelectionChange: setRowSelection,
-        },
-        dataTableOptions: {
-            onRowClick: handleRowClick,
-            viewPagination: true,
-        },
+    setLinkSearchParam({
+      ...linkSearchParam,
+      linkSn,
+      linkNm,
+    });
+  };
+
+  const handleRowClick = async (data: Link) => {
+    const tableData = await LinkApi.getLinkTableInfo(data.link_sn);
+    const tableColList = await LinkApi.getLinkTableColList(data.link_sn);
+
+    setSelectedTableInfo(tableData);
+    setTableColList(tableColList.content);
+    setSelectedColIds([]);
+
+    tableForm.reset({
+      link_sn: tableData.link_sn,
+      link_nm: tableData.link_nm,
+      tbl_sn: tableData.tbl_sn ?? "",
+      sou_tbl_nm: tableData.sou_tbl_nm ?? "",
+      sou_tbl_korn_nm: tableData.sou_tbl_korn_nm ?? "",
+      sou_tbl_expln: tableData.sou_tbl_expln ?? "",
+      trsf_tbl_expln: tableData.trsf_tbl_expln ?? "",
+      trsf_tbl_nm: tableData.trsf_tbl_nm ?? "",
+      trsf_tbl_korn_nm: tableData.trsf_tbl_korn_nm ?? "",
+    });
+  };
+
+  const handleColumnRowClick = async (data: LinkTableColumns) => {
+    const colInfo = await LinkApi.getLinkTableColInfo({
+      colSn: data.col_sn,
+      tblSn: data.tbl_sn,
     });
 
-    return (
-        <div className="card card-border !mt-6">
-            <div className="card card-border">
-                <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
-                    <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
-                        일련번호
-                    </Label>
-                    <Input
-                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-4"
-                        id="liSnSearchInput"
-                        value={linkSn}
-                        onChange={(e) => setLinkSn(e.target.value)}
-                        autoComplete="off"
-                    />
-                    <Label htmlFor="liNmSearchInput" className="mr-2 text-label">
-                        연계 명
-                    </Label>
-                    <Input
-                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-2"
-                        id="liNmSearchInput"
-                        value={linkNm}
-                        onChange={(e) => setLinkNm(e.target.value)}
-                        autoComplete="off"
-                    />
-                    <Button color="green" className="h-[3.2rem]" type="button" onClick={handleResetSearchParam}>
-                        초기화
-                    </Button>
-                    <Button className="h-[3.2rem]" type="submit">
-                        조회
-                    </Button>
-                </form>
-            </div>
-            <div className="card !mb-0 flex h-[calc(100vh-28rem)] gap-5 !p-0">
-                <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="card !m-[1.2rem] overflow-auto !p-0 h-full">
-                        {!query.isLoading ?
-                            <div>{tableComponent}</div>
-                            :
-                            <div className="[data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center h-full">
-                                <div className="relative size-[5rem]">
-                                    <LoadingWithAnimation color="primary" />
-                                </div>
-                            </div>
-                        }
-                    </div>
-                </div>
-                <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="card !m-[1.2rem] !p-0 h-full overflow-auto flex flex-col">
-                        <Form {...tableForm}>
-                            <form onSubmit={tableForm.handleSubmit(handleTableSubmit)}>
-                                {selectedTableInfo &&
-                                    <div className="flex justify-end mb-2">
-                                        <Button className="h-[3.2rem]" type="submit" color={selectedTableInfo.tbl_sn ? "green" : "primary"}>
-                                            {selectedTableInfo.tbl_sn ? "수정" : "저장"}
-                                        </Button>
-                                    </div>
-                                }
-                                <Table variant="secondary" className="flex-none">
-                                    <colgroup>
-                                        <col width="20%" />
-                                        <col width="80%" />
-                                    </colgroup>
-                                    <TableBody>
-                                        <TableRow>
-                                            <TableHead>연계 일련번호</TableHead>
-                                            <TableCell className="!p-2">
-                                                {selectedTableInfo ?
-                                                    <FormField
-                                                        control={tableForm.control}
-                                                        name="link_sn"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormControl>
-                                                                    <Input
-                                                                        {...field}
-                                                                        value={field.value ?? ""}
-                                                                        className="!text-[1.3rem] w-[400px]"
-                                                                        disabled
-                                                                    />
-                                                                </FormControl>
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                    :
-                                                    <span className="px-2 py-[1.2rem]">-</span>
-                                                }
-                                            </TableCell>
-                                        </TableRow>
-                                        <TableRow>
-                                            <TableHead>연계 명</TableHead>
-                                            <TableCell className="!p-2">
-                                                {selectedTableInfo ?
-                                                    <FormField
-                                                        control={tableForm.control}
-                                                        name="link_nm"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormControl>
-                                                                    <Input
-                                                                        {...field}
-                                                                        value={field.value ?? ""}
-                                                                        className="!text-[1.3rem] w-[400px]"
-                                                                        disabled
-                                                                    />
-                                                                </FormControl>
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                    :
-                                                    <span className="px-2 py-[1.2rem]">-</span>
-                                                }
-                                            </TableCell>
-                                        </TableRow>
-                                        <TableRow>
-                                            <TableHead>원천 테이블 명</TableHead>
-                                            <TableCell className="!p-2">
-                                                {selectedTableInfo ?
-                                                    <FormField
-                                                        control={tableForm.control}
-                                                        name="sou_tbl_nm"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormControl>
-                                                                    <Input
-                                                                        {...field}
-                                                                        value={field.value ?? ""}
-                                                                        className="!text-[1.3rem] w-[400px]"
-                                                                        placeholder={!field.value ? "-" : ""}
-                                                                        autoComplete="off"
-                                                                    />
-                                                                </FormControl>
-                                                                {tableForm.formState.errors.sou_tbl_nm && (
-                                                                    <p className="text-red-500 text-base pt-2">
-                                                                        {tableForm.formState.errors.sou_tbl_nm.message}
-                                                                    </p>
-                                                                )}
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                    :
-                                                    <span className="px-2 py-[1.2rem]">-</span>
-                                                }
-                                            </TableCell>
-                                        </TableRow>
-                                        <TableRow>
-                                            <TableHead>원천 테이블 한글명</TableHead>
-                                            <TableCell className="!p-2">
-                                                {selectedTableInfo ?
-                                                    <FormField
-                                                        control={tableForm.control}
-                                                        name="sou_tbl_korn_nm"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormControl>
-                                                                    <Input
-                                                                        {...field}
-                                                                        value={field.value ?? ""}
-                                                                        className="!text-[1.3rem] w-[400px]"
-                                                                        placeholder={!field.value ? "-" : ""}
-                                                                        autoComplete="off"
-                                                                    />
-                                                                </FormControl>
-                                                                {tableForm.formState.errors.sou_tbl_korn_nm && (
-                                                                    <p className="text-red-500 text-base pt-2">
-                                                                        {tableForm.formState.errors.sou_tbl_korn_nm.message}
-                                                                    </p>
-                                                                )}
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                    :
-                                                    <span className="px-2 py-[1.2rem]">-</span>
-                                                }
-                                            </TableCell>
-                                        </TableRow>
-                                        <TableRow>
-                                            <TableHead>원천 테이블 설명</TableHead>
-                                            <TableCell className="!p-2">
-                                                {selectedTableInfo ?
-                                                    <FormField
-                                                        control={tableForm.control}
-                                                        name="sou_tbl_expln"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormControl>
-                                                                    <Input
-                                                                        {...field}
-                                                                        value={field.value ?? ""}
-                                                                        className="!text-[1.3rem] w-[400px]"
-                                                                        placeholder={!field.value ? "-" : ""}
-                                                                        autoComplete="off"
-                                                                    />
-                                                                </FormControl>
-                                                                {tableForm.formState.errors.sou_tbl_expln && (
-                                                                    <p className="text-red-500 text-base pt-2">
-                                                                        {tableForm.formState.errors.sou_tbl_expln.message}
-                                                                    </p>
-                                                                )}
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                    :
-                                                    <span className="px-2 py-[1.2rem]">-</span>
-                                                }
-                                            </TableCell>
-                                        </TableRow>
-                                        <TableRow>
-                                            <TableHead>* 변환 테이블 명</TableHead>
-                                            <TableCell className="!p-2">
-                                                {selectedTableInfo ?
-                                                    <FormField
-                                                        control={tableForm.control}
-                                                        name="trsf_tbl_nm"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormControl>
-                                                                    <Input
-                                                                        {...field}
-                                                                        value={field.value ?? ""}
-                                                                        className="!text-[1.3rem] w-[400px]"
-                                                                        placeholder={!field.value ? "-" : ""}
-                                                                        autoComplete="off"
-                                                                    />
-                                                                </FormControl>
-                                                                {tableForm.formState.errors.trsf_tbl_nm && (
-                                                                    <p className="text-red-500 text-base pt-2">
-                                                                        {tableForm.formState.errors.trsf_tbl_nm.message}
-                                                                    </p>
-                                                                )}
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                    :
-                                                    <span className="px-2 py-[1.2rem]">-</span>
-                                                }
-                                            </TableCell>
-                                        </TableRow>
-                                        <TableRow>
-                                            <TableHead>* 변환 테이블 한글명</TableHead>
-                                            <TableCell className="!p-2">
-                                                {selectedTableInfo ?
-                                                    <FormField
-                                                        control={tableForm.control}
-                                                        name="trsf_tbl_korn_nm"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormControl>
-                                                                    <Input
-                                                                        {...field}
-                                                                        value={field.value ?? ""}
-                                                                        className="!text-[1.3rem] w-[400px]"
-                                                                        placeholder={!field.value ? "-" : ""}
-                                                                        autoComplete="off"
-                                                                    />
-                                                                </FormControl>
-                                                                {tableForm.formState.errors.trsf_tbl_korn_nm && (
-                                                                    <p className="text-red-500 text-base pt-2">
-                                                                        {tableForm.formState.errors.trsf_tbl_korn_nm.message}
-                                                                    </p>
-                                                                )}
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                    :
-                                                    <span className="px-2 py-[1.2rem]">-</span>
-                                                }
-                                            </TableCell>
-                                        </TableRow>
-                                        <TableRow>
-                                            <TableHead>변환 테이블 설명</TableHead>
-                                            <TableCell className="!p-2">
-                                                {selectedTableInfo ?
-                                                    <FormField
-                                                        control={tableForm.control}
-                                                        name="trsf_tbl_expln"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormControl>
-                                                                    <Input
-                                                                        {...field}
-                                                                        value={field.value ?? ""}
-                                                                        className="!text-[1.3rem] w-[400px]"
-                                                                        placeholder={!field.value ? "-" : ""}
-                                                                        autoComplete="off"
-                                                                    />
-                                                                </FormControl>
-                                                                {tableForm.formState.errors.trsf_tbl_expln && (
-                                                                    <p className="text-red-500 text-base pt-2">
-                                                                        {tableForm.formState.errors.trsf_tbl_expln.message}
-                                                                    </p>
-                                                                )}
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                    :
-                                                    <span className="px-2 py-[1.2rem]">-</span>
-                                                }
-                                            </TableCell>
-                                        </TableRow>
-                                    </TableBody>
-                                </Table>
-                            </form>
-                        </Form>
-                        {selectedTableInfo ?
-                            <>
-                                <div className="mb-2 mt-14 flex justify-end items-center flex-none">
-                                    {tableColList.length > 0 &&
-                                        <Button color="red" className="h-[3.2rem] mr-2" type="button" onClick={handleDeleteParam}>
-                                            행 삭제
-                                        </Button>
-                                    }
-                                    {selectedTableInfo.tbl_sn &&
-                                        <LinkTableDialog dialogOpen={dialogOpen} onOpenChange={setDialogOpen} form={form} tableInfo={selectedTableInfo} insertLinkTableCol={insertLinkTableCol} updateLinkTableCol={updateLinkTableCol} />
-                                    }
-                                </div>
-                                {selectedTableInfo.tbl_sn ?
-                                    (tableColList.length > 0 ?
-                                        <div className="flex-1 overflow-auto min-h-[300px]">
-                                            <DataTable table={colTable} onRowClick={handleColumnRowClick} />
-                                        </div>
-                                        :
-                                        <div className="flex items-center justify-center h-20 text-gray-500 text-3xl">
-                                            등록된 테이블 컬럼이 없습니다.
-                                        </div>)
-                                    :
-                                    <div className="flex items-center justify-center h-20 text-gray-500 text-3xl">
-                                        테이블 정보를 등록해주세요.
-                                    </div>
-                                }
-                            </>
-                            :
-                            <div className="flex items-center justify-center text-gray-500 text-3xl mt-14 flex-1">
-                                연계 데이터를 선택해주세요.
-                            </div>
-                        }
-                    </div>
-                </div>
-            </div>
-            <ConfirmDialog isOpen={onConfirm} />
-        </div >
-    )
-};
+    if (colInfo) {
+      let newData = { ...colInfo };
 
-export { LinkTablePage };
\ No newline at end of file
+      if (colInfo.mdfr_id) {
+        const userName = await fetchUserInfo();
+        newData = {
+          ...colInfo,
+          mdfr_id: userName,
+        };
+      }
+
+      form.reset(newData);
+    }
+    setDialogOpen(true);
+  };
+
+  const fetchUserInfo = async () => {
+    const userData = await getUserInfo();
+    return userData.userName;
+  };
+
+  const handleDeleteParam = async () => {
+    if (selectedColIds.length === 0) {
+      alert("삭제할 컬럼을 선택해 주세요.");
+    } else {
+      await handleConfirm(async () => {
+        if (await confirm("선택한 컬럼 정보를 삭제하시겠습니까?")) {
+          deleteLinkTableCol(selectedColIds);
+        }
+      });
+    }
+  };
+
+  const handleTableSubmit = async (data: LinkTableFormData) => {
+    const regTblInfo = await LinkApi.countLinkTblNm(data.trsf_tbl_nm);
+    const confirmMsg =
+      regTblInfo.count > 0 &&
+      data.trsf_tbl_nm !== selectedTableInfo?.trsf_tbl_nm
+        ? `이미 사용중인 테이블 명입니다. 해당 테이블 명으로 ${!data.tbl_sn ? "저장" : "수정"}하시겠습니까?`
+        : `${!data.tbl_sn ? "저장" : "수정"}하시겠습니까?`;
+    if (!data.tbl_sn) {
+      await handleConfirm(async () => {
+        if (await confirm(confirmMsg)) {
+          insertLinkTableInfo({
+            ...data,
+            mdfr_id: userUniqId,
+            tbl_sn: regTblInfo.count > 0 ? regTblInfo.tbl_sn : "",
+          });
+        }
+      });
+    } else {
+      await handleConfirm(async () => {
+        if (await confirm(confirmMsg)) {
+          updateLinkTableInfo({
+            ...data,
+            tbl_sn: regTblInfo.count > 0 ? regTblInfo.tbl_sn : "",
+            mdfr_id: userUniqId,
+          });
+        }
+      });
+    }
+  };
+
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+        rowSelection,
+      },
+      manualPagination: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setRowSelection,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
+    },
+  });
+
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
+        <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
+          <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
+            일련번호
+          </Label>
+          <Input
+            className="mr-4 h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+            id="liSnSearchInput"
+            value={linkSn}
+            onChange={(e) => setLinkSn(e.target.value)}
+            autoComplete="off"
+          />
+          <Label htmlFor="liNmSearchInput" className="mr-2 text-label">
+            연계 명
+          </Label>
+          <Input
+            className="mr-2 h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+            id="liNmSearchInput"
+            value={linkNm}
+            onChange={(e) => setLinkNm(e.target.value)}
+            autoComplete="off"
+          />
+          <Button
+            color="green"
+            className="h-[3.2rem]"
+            type="button"
+            onClick={handleResetSearchParam}
+          >
+            초기화
+          </Button>
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+        </form>
+      </div>
+      <div className="card !mb-0 flex h-[calc(100vh-28rem)] gap-5 !p-0">
+        <div className="card card-border !mx-0 flex w-1/2 flex-col">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">연계 목록</h3>
+          </div>
+          <div className="card !m-[1.2rem] h-full overflow-auto !p-0">
+            {!query.isLoading ? (
+              <div>{tableComponent}</div>
+            ) : (
+              <div className="[data-theme='black']:bg-transparent flex h-full items-center justify-center rounded-lg p-10">
+                <div className="relative size-[5rem]">
+                  <LoadingWithAnimation color="primary" />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="card card-border !mx-0 flex w-1/2 flex-col">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">
+              연계 테이블 정보
+            </h3>
+          </div>
+          <div className="card !m-[1.2rem] flex h-full flex-col overflow-auto !p-0">
+            <Form {...tableForm}>
+              <form onSubmit={tableForm.handleSubmit(handleTableSubmit)}>
+                {selectedTableInfo && (
+                  <div className="mb-2 flex justify-end">
+                    <Button
+                      className="h-[3.2rem]"
+                      type="submit"
+                      color={selectedTableInfo.tbl_sn ? "green" : "primary"}
+                    >
+                      {selectedTableInfo.tbl_sn ? "수정" : "저장"}
+                    </Button>
+                  </div>
+                )}
+                <Table variant="secondary" className="flex-none">
+                  <colgroup>
+                    <col width="20%" />
+                    <col width="80%" />
+                  </colgroup>
+                  <TableBody>
+                    <TableRow>
+                      <TableHead>연계 일련번호</TableHead>
+                      <TableCell className="!p-2">
+                        {selectedTableInfo ? (
+                          <FormField
+                            control={tableForm.control}
+                            name="link_sn"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <Input
+                                    {...field}
+                                    value={field.value ?? ""}
+                                    className="w-[400px] !text-[1.3rem]"
+                                    disabled
+                                  />
+                                </FormControl>
+                              </FormItem>
+                            )}
+                          />
+                        ) : (
+                          <span className="px-2 py-[1.2rem]">-</span>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableHead>연계 명</TableHead>
+                      <TableCell className="!p-2">
+                        {selectedTableInfo ? (
+                          <FormField
+                            control={tableForm.control}
+                            name="link_nm"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <Input
+                                    {...field}
+                                    value={field.value ?? ""}
+                                    className="w-[400px] !text-[1.3rem]"
+                                    disabled
+                                  />
+                                </FormControl>
+                              </FormItem>
+                            )}
+                          />
+                        ) : (
+                          <span className="px-2 py-[1.2rem]">-</span>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableHead>원천 테이블 명</TableHead>
+                      <TableCell className="!p-2">
+                        {selectedTableInfo ? (
+                          <FormField
+                            control={tableForm.control}
+                            name="sou_tbl_nm"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <Input
+                                    {...field}
+                                    value={field.value ?? ""}
+                                    className="w-[400px] !text-[1.3rem]"
+                                    placeholder={!field.value ? "-" : ""}
+                                    autoComplete="off"
+                                  />
+                                </FormControl>
+                                {tableForm.formState.errors.sou_tbl_nm && (
+                                  <p className="pt-2 text-base text-red-500">
+                                    {
+                                      tableForm.formState.errors.sou_tbl_nm
+                                        .message
+                                    }
+                                  </p>
+                                )}
+                              </FormItem>
+                            )}
+                          />
+                        ) : (
+                          <span className="px-2 py-[1.2rem]">-</span>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableHead>원천 테이블 한글명</TableHead>
+                      <TableCell className="!p-2">
+                        {selectedTableInfo ? (
+                          <FormField
+                            control={tableForm.control}
+                            name="sou_tbl_korn_nm"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <Input
+                                    {...field}
+                                    value={field.value ?? ""}
+                                    className="w-[400px] !text-[1.3rem]"
+                                    placeholder={!field.value ? "-" : ""}
+                                    autoComplete="off"
+                                  />
+                                </FormControl>
+                                {tableForm.formState.errors.sou_tbl_korn_nm && (
+                                  <p className="pt-2 text-base text-red-500">
+                                    {
+                                      tableForm.formState.errors.sou_tbl_korn_nm
+                                        .message
+                                    }
+                                  </p>
+                                )}
+                              </FormItem>
+                            )}
+                          />
+                        ) : (
+                          <span className="px-2 py-[1.2rem]">-</span>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableHead>원천 테이블 설명</TableHead>
+                      <TableCell className="!p-2">
+                        {selectedTableInfo ? (
+                          <FormField
+                            control={tableForm.control}
+                            name="sou_tbl_expln"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <Input
+                                    {...field}
+                                    value={field.value ?? ""}
+                                    className="w-[400px] !text-[1.3rem]"
+                                    placeholder={!field.value ? "-" : ""}
+                                    autoComplete="off"
+                                  />
+                                </FormControl>
+                                {tableForm.formState.errors.sou_tbl_expln && (
+                                  <p className="pt-2 text-base text-red-500">
+                                    {
+                                      tableForm.formState.errors.sou_tbl_expln
+                                        .message
+                                    }
+                                  </p>
+                                )}
+                              </FormItem>
+                            )}
+                          />
+                        ) : (
+                          <span className="px-2 py-[1.2rem]">-</span>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableHead>* 변환 테이블 명</TableHead>
+                      <TableCell className="!p-2">
+                        {selectedTableInfo ? (
+                          <FormField
+                            control={tableForm.control}
+                            name="trsf_tbl_nm"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <Input
+                                    {...field}
+                                    value={field.value ?? ""}
+                                    className="w-[400px] !text-[1.3rem]"
+                                    placeholder={!field.value ? "-" : ""}
+                                    autoComplete="off"
+                                  />
+                                </FormControl>
+                                {tableForm.formState.errors.trsf_tbl_nm && (
+                                  <p className="pt-2 text-base text-red-500">
+                                    {
+                                      tableForm.formState.errors.trsf_tbl_nm
+                                        .message
+                                    }
+                                  </p>
+                                )}
+                              </FormItem>
+                            )}
+                          />
+                        ) : (
+                          <span className="px-2 py-[1.2rem]">-</span>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableHead>* 변환 테이블 한글명</TableHead>
+                      <TableCell className="!p-2">
+                        {selectedTableInfo ? (
+                          <FormField
+                            control={tableForm.control}
+                            name="trsf_tbl_korn_nm"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <Input
+                                    {...field}
+                                    value={field.value ?? ""}
+                                    className="w-[400px] !text-[1.3rem]"
+                                    placeholder={!field.value ? "-" : ""}
+                                    autoComplete="off"
+                                  />
+                                </FormControl>
+                                {tableForm.formState.errors
+                                  .trsf_tbl_korn_nm && (
+                                  <p className="pt-2 text-base text-red-500">
+                                    {
+                                      tableForm.formState.errors
+                                        .trsf_tbl_korn_nm.message
+                                    }
+                                  </p>
+                                )}
+                              </FormItem>
+                            )}
+                          />
+                        ) : (
+                          <span className="px-2 py-[1.2rem]">-</span>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableHead>변환 테이블 설명</TableHead>
+                      <TableCell className="!p-2">
+                        {selectedTableInfo ? (
+                          <FormField
+                            control={tableForm.control}
+                            name="trsf_tbl_expln"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <Input
+                                    {...field}
+                                    value={field.value ?? ""}
+                                    className="w-[400px] !text-[1.3rem]"
+                                    placeholder={!field.value ? "-" : ""}
+                                    autoComplete="off"
+                                  />
+                                </FormControl>
+                                {tableForm.formState.errors.trsf_tbl_expln && (
+                                  <p className="pt-2 text-base text-red-500">
+                                    {
+                                      tableForm.formState.errors.trsf_tbl_expln
+                                        .message
+                                    }
+                                  </p>
+                                )}
+                              </FormItem>
+                            )}
+                          />
+                        ) : (
+                          <span className="px-2 py-[1.2rem]">-</span>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </form>
+            </Form>
+            {selectedTableInfo ? (
+              <>
+                <div className="mb-2 mt-14 flex flex-none items-center justify-end">
+                  {tableColList.length > 0 && (
+                    <Button
+                      color="red"
+                      className="mr-2 h-[3.2rem]"
+                      type="button"
+                      onClick={handleDeleteParam}
+                    >
+                      행 삭제
+                    </Button>
+                  )}
+                  {selectedTableInfo.tbl_sn && (
+                    <LinkTableDialog
+                      dialogOpen={dialogOpen}
+                      onOpenChange={setDialogOpen}
+                      form={form}
+                      tableInfo={selectedTableInfo}
+                      insertLinkTableCol={insertLinkTableCol}
+                      updateLinkTableCol={updateLinkTableCol}
+                    />
+                  )}
+                </div>
+                {selectedTableInfo.tbl_sn ? (
+                  tableColList.length > 0 ? (
+                    <div className="min-h-[300px] flex-1 overflow-auto">
+                      <DataTable
+                        table={colTable}
+                        onRowClick={handleColumnRowClick}
+                      />
+                    </div>
+                  ) : (
+                    <div className="flex h-20 items-center justify-center text-3xl text-gray-500">
+                      등록된 테이블 컬럼이 없습니다.
+                    </div>
+                  )
+                ) : (
+                  <div className="flex h-20 items-center justify-center text-3xl text-gray-500">
+                    테이블 정보를 등록해주세요.
+                  </div>
+                )}
+              </>
+            ) : (
+              <div className="mt-14 flex flex-1 items-center justify-center text-3xl text-gray-500">
+                연계 데이터를 선택해주세요.
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <ConfirmDialog isOpen={onConfirm} />
+    </div>
+  );
+}
+
+export { LinkTablePage };
diff --git a/apps/cs/src/pages/loginlog/ui/loginlog-page.tsx b/apps/cs/src/pages/loginlog/ui/loginlog-page.tsx
index d94d79c9a..baca00d74 100644
--- a/apps/cs/src/pages/loginlog/ui/loginlog-page.tsx
+++ b/apps/cs/src/pages/loginlog/ui/loginlog-page.tsx
@@ -77,7 +77,7 @@ function LoginlogPage() {
     },
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsManualLoading(true);
     setPagination({
diff --git a/apps/cs/src/pages/menu/ui/menu-history-dialog.tsx b/apps/cs/src/pages/menu/ui/menu-history-dialog.tsx
index a24b77308..78c34d440 100644
--- a/apps/cs/src/pages/menu/ui/menu-history-dialog.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-history-dialog.tsx
@@ -91,7 +91,7 @@ function MenuHistoryDialog({ menuCd }: MenuHistoryDialogProps) {
     },
   });
 
-  const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSearch = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     e.stopPropagation();
     query.refetch();
diff --git a/apps/cs/src/pages/menu/ui/organization-search-dialog.tsx b/apps/cs/src/pages/menu/ui/organization-search-dialog.tsx
index eb942fe11..6956d6465 100644
--- a/apps/cs/src/pages/menu/ui/organization-search-dialog.tsx
+++ b/apps/cs/src/pages/menu/ui/organization-search-dialog.tsx
@@ -59,7 +59,7 @@ function OrganizationSearchDialog({
     handleUserSelect(node.data as TreeUser);
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     e.stopPropagation();
     setTree(filterUserOrganizationTreeDataByKeyword(treeData ?? [], keyword));
diff --git a/apps/cs/src/pages/module/ui/module-page.tsx b/apps/cs/src/pages/module/ui/module-page.tsx
index 8593ba4b5..d97f213fb 100644
--- a/apps/cs/src/pages/module/ui/module-page.tsx
+++ b/apps/cs/src/pages/module/ui/module-page.tsx
@@ -2,45 +2,76 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
-import { Button, Input, Label } from "@common/components";
-import { CodeSelect } from "@/entities/code";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
 import {
-  AuthorizationsApi,
+  getCoreRowModel,
+  type OnChangeFn,
+  type PaginationState,
+} from "@tanstack/react-table";
+
+import { ENDPOINT } from "@/shared/config";
+import { useDataTable, useSearchParamsState } from "@/shared/lib";
+import {
   type Authorizations,
-  type AuthorizationsParams,
+  AuthorizationsApi,
 } from "@/entities/authorization";
+import { CodeSelect } from "@/entities/code";
+import { Button, Input, Label } from "@common/components";
+
 import { columns } from "../model/authorizations-table-columns";
 
+const DEFAULT_PARAMS = {
+  authorizationName: "",
+  httpMethodCode: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
+
 function ModulePage() {
   const router = useRouter();
-
-  const [authorizationName, setAuthorizationName] = useState("");
-  const [httpMethodCode, setHttpMethodCode] = useState("");
-  const [searchParams, setSearchParams] = useState<AuthorizationsParams>({
-    authorizationName: "",
-    httpMethodCode: "",
-    sort: "regDt,desc",
-  });
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
+  const [authorizationName, setAuthorizationName] = useState(
+    params.authorizationName,
+  );
+  const [httpMethodCode, setHttpMethodCode] = useState(params.httpMethodCode);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS, searchParams, pagination],
+    queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS, params],
     queryFn: () =>
       AuthorizationsApi.getAuthorizationsList({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
+        authorizationName: params.authorizationName,
+        httpMethodCode: params.httpMethodCode,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
     placeholderData: keepPreviousData,
   });
 
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setParams({ authorizationName, httpMethodCode, page: 0 });
+  };
+
+  const handleReset = () => {
+    setAuthorizationName("");
+    setHttpMethodCode("");
+    resetParams();
+  };
+
   const handleRowClick = (row: Authorizations) => {
     router.push(`/module/register/${row.authorizationNo}`);
   };
@@ -52,7 +83,7 @@ function ModulePage() {
       state: {
         pagination,
       },
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
       getCoreRowModel: getCoreRowModel(),
       manualPagination: true,
     },
@@ -62,29 +93,6 @@ function ModulePage() {
     },
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setPagination({
-      ...pagination,
-      pageIndex: 0,
-    });
-    setSearchParams({
-      ...searchParams,
-      authorizationName,
-      httpMethodCode,
-    });
-  };
-
-  const handleReset = () => {
-    setAuthorizationName("");
-    setHttpMethodCode("");
-    setSearchParams({
-      ...searchParams,
-      authorizationName: "",
-      httpMethodCode: "",
-    });
-  };
-
   return (
     <div className="card card-border !mt-6">
       <div className="card card-border">
diff --git a/apps/cs/src/pages/ntftalk-history/index.ts b/apps/cs/src/pages/ntftalk-history/index.ts
new file mode 100644
index 000000000..e9871422b
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-history/index.ts
@@ -0,0 +1 @@
+export { NtftalkHistoryPage } from "./ui/ntftalk-history-page";
diff --git a/apps/cs/src/pages/ntftalk-history/model/ntftalk-history-table-columns.tsx b/apps/cs/src/pages/ntftalk-history/model/ntftalk-history-table-columns.tsx
new file mode 100644
index 000000000..637285075
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-history/model/ntftalk-history-table-columns.tsx
@@ -0,0 +1,64 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { NtftalkMmtLogHistory } from "@/entities/ntftalk";
+
+function formatDateTime(value: string | null | undefined): string {
+  if (!value) return "—";
+  const normalized = value.includes("T")
+    ? value.replace("T", " ").slice(0, 19)
+    : value.slice(0, 19);
+  return normalized;
+}
+
+function formatResult(successYn: string | null | undefined): string {
+  if (!successYn) return "—";
+  if (successYn === "SUCCESS") return "성공";
+  if (successYn === "FAIL") return "실패";
+  return successYn;
+}
+
+export function createNtftalkHistoryColumns(): ColumnDef<NtftalkMmtLogHistory>[] {
+  return [
+    {
+      id: "rowNo",
+      header: "순번",
+      enableSorting: false,
+      cell: ({ row, table }) => {
+        const { pageIndex, pageSize } = table.getState().pagination;
+        return pageIndex * pageSize + row.index + 1;
+      },
+    },
+    {
+      accessorKey: "siteSystem",
+      header: "시스템",
+      cell: ({ getValue }) => (getValue() as string) || "—",
+    },
+    {
+      accessorKey: "content",
+      header: "알림내용",
+      cell: ({ getValue }) => {
+        const v = getValue() as string;
+        if (!v) return "—";
+        return (
+          <span className="line-clamp-2 max-w-[28rem] text-left" title={v}>
+            {v}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "recipientNum",
+      header: "수신자",
+      cell: ({ getValue }) => (getValue() as string) || "—",
+    },
+    {
+      accessorKey: "dateRslt",
+      header: "수신일",
+      cell: ({ getValue }) => formatDateTime(getValue() as string | null),
+    },
+    {
+      accessorKey: "successYn",
+      header: "결과",
+      cell: ({ getValue }) => formatResult(getValue() as string | null),
+    },
+  ];
+}
diff --git a/apps/cs/src/pages/ntftalk-history/ui/ntftalk-history-page.tsx b/apps/cs/src/pages/ntftalk-history/ui/ntftalk-history-page.tsx
new file mode 100644
index 000000000..80434a15f
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-history/ui/ntftalk-history-page.tsx
@@ -0,0 +1,258 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+import dayjs from "dayjs";
+
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useDataTable } from "@/shared/lib";
+import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
+import {
+  NtftalkMmtLogHistoryApi,
+  type NtftalkMmtLogHistorySearchParams,
+} from "@/entities/ntftalk";
+import { SiteSelect } from "@/entities/site";
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+
+import { createNtftalkHistoryColumns } from "../model/ntftalk-history-table-columns";
+
+type DateRange = {
+  from?: Date | null;
+  to?: Date | null;
+};
+
+type PresetPeriod = "" | "3M" | "6M" | "1Y" | "CUSTOM";
+
+function computeDateRangeFromPreset(
+  preset: Extract<PresetPeriod, "3M" | "6M" | "1Y">,
+): DateRange {
+  const to = dayjs().endOf("day").toDate();
+  const base = dayjs();
+  let fromDay: dayjs.Dayjs;
+  switch (preset) {
+    case "3M":
+      fromDay = base.subtract(3, "month");
+      break;
+    case "6M":
+      fromDay = base.subtract(6, "month");
+      break;
+    case "1Y":
+      fromDay = base.subtract(1, "year");
+      break;
+  }
+  return { from: fromDay.startOf("day").toDate(), to };
+}
+
+function isDateRangeOverOneYear(range: DateRange): boolean {
+  if (!range.from) return false;
+  const oneYearAgo = dayjs().subtract(1, "year").startOf("day");
+  return dayjs(range.from).isBefore(oneYearAgo);
+}
+
+function NtftalkHistoryPage() {
+  const alert = useAlertStore((state) => state.setMessage);
+  const [contentInput, setContentInput] = useState("");
+  const [recipientInput, setRecipientInput] = useState("");
+  const [presetPeriod, setPresetPeriod] = useState<PresetPeriod>("");
+  const [dateRange, setDateRange] = useState<DateRange>({
+    from: null,
+    to: null,
+  });
+  const [resultFilter, setResultFilter] = useState("ALL");
+  const [systemFilter, setSystemFilter] = useState("ALL");
+
+  const [searchParams, setSearchParams] =
+    useState<NtftalkMmtLogHistorySearchParams>({ sort: "dateMtReport,desc" });
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const listQuery = useQuery({
+    queryKey: [
+      ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY,
+      searchParams,
+      pagination,
+    ],
+    queryFn: () =>
+      NtftalkMmtLogHistoryApi.getNtftalkMmtLogHistoryPage({
+        ...searchParams,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    placeholderData: keepPreviousData,
+  });
+
+  const columns = useMemo(() => createNtftalkHistoryColumns(), []);
+
+  const { tableComponent } = useDataTable({
+    query: listQuery,
+    tableOptions: {
+      columns,
+      state: { pagination },
+      manualPagination: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
+  });
+
+  const buildSearchParamsFromInputs = (): NtftalkMmtLogHistorySearchParams => ({
+    sort: searchParams.sort ?? "dateMtReport,desc",
+    content: contentInput.trim() || undefined,
+    recipientNum: recipientInput.trim() || undefined,
+    successYn: resultFilter,
+    system: systemFilter,
+    dateFrom: dateRange.from
+      ? dayjs(dateRange.from).format("YYYY-MM-DD")
+      : undefined,
+    dateTo: dateRange.to ? dayjs(dateRange.to).format("YYYY-MM-DD") : undefined,
+  });
+
+  const handleSearch = (e: React.SubmitEvent) => {
+    e.preventDefault();
+    if (isDateRangeOverOneYear(dateRange)) {
+      alert("조회 기간은 오늘 기준 최대 1년까지만 선택할 수 있습니다.");
+      return;
+    }
+    setPagination((p) => ({ ...p, pageIndex: 0 }));
+    setSearchParams(buildSearchParamsFromInputs());
+  };
+
+  const handlePresetPeriodChange = (value: PresetPeriod) => {
+    setPresetPeriod(value);
+    if (value === "3M" || value === "6M" || value === "1Y") {
+      setDateRange(computeDateRangeFromPreset(value));
+    }
+  };
+
+  const handleDateRangeChange = (next: DateRange) => {
+    setDateRange(next);
+    setPresetPeriod("CUSTOM");
+  };
+
+  const handleReset = () => {
+    setContentInput("");
+    setRecipientInput("");
+    setPresetPeriod("");
+    setDateRange({ from: null, to: null });
+    setResultFilter("ALL");
+    setSystemFilter("ALL");
+    setPagination((p) => ({ ...p, pageIndex: 0 }));
+    setSearchParams({ sort: "dateMtReport,desc" });
+  };
+
+  return (
+    <div className="card card-border !mt-6 flex flex-col gap-4">
+      <div className="card card-border">
+        <form
+          onSubmit={handleSearch}
+          className="flex flex-col gap-4 p-2 md:flex-row md:items-end md:justify-between"
+        >
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-wrap items-end gap-4">
+              <div className="flex flex-wrap items-center gap-2">
+                <Label className="whitespace-nowrap text-label">조회기간</Label>
+                <Select
+                  value={presetPeriod}
+                  onValueChange={handlePresetPeriodChange}
+                >
+                  <SelectTrigger className="w-[16rem]">
+                    <SelectValue placeholder="기간 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="3M">3개월</SelectItem>
+                    <SelectItem value="6M">6개월</SelectItem>
+                    <SelectItem value="1Y">1년</SelectItem>
+                    <SelectItem value="CUSTOM">직접입력</SelectItem>
+                  </SelectContent>
+                </Select>
+                <InputDateRangePicker
+                  dateRange={dateRange}
+                  setDateRange={handleDateRangeChange}
+                  disabled={presetPeriod !== "CUSTOM"}
+                />
+              </div>
+            </div>
+            <div className="flex flex-wrap gap-6">
+              <div className="flex items-center gap-2">
+                <Label className="whitespace-nowrap text-label">알림내용</Label>
+                <Input
+                  className="w-[16rem]"
+                  value={contentInput}
+                  onChange={(e) => setContentInput(e.target.value)}
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Label className="whitespace-nowrap text-label">사용자</Label>
+                <Input
+                  className="w-[16rem]"
+                  value={recipientInput}
+                  onChange={(e) => setRecipientInput(e.target.value)}
+                  placeholder="수신자 번호"
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Label className="whitespace-nowrap text-label">결과</Label>
+                <Select value={resultFilter} onValueChange={setResultFilter}>
+                  <SelectTrigger className="w-[16rem]">
+                    <SelectValue placeholder="전체" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ALL">전체</SelectItem>
+                    <SelectItem value="SUCCESS">성공</SelectItem>
+                    <SelectItem value="FAIL">실패</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex items-center gap-2">
+                <Label className="whitespace-nowrap text-label">시스템</Label>
+                <SiteSelect
+                  className="w-[16rem]"
+                  value={systemFilter}
+                  onValueChange={(value) => setSystemFilter(value)}
+                  enabledAllSite
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex shrink-0 gap-2">
+            <Button className="h-[3.2rem]" type="submit">
+              조회
+            </Button>
+            <Button
+              type="button"
+              color="white"
+              className="h-[3.2rem]"
+              onClick={handleReset}
+            >
+              초기화
+            </Button>
+          </div>
+        </form>
+      </div>
+
+      <div className="card card-border">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">알림톡 발송 이력</h3>
+        </div>
+        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
+      </div>
+    </div>
+  );
+}
+
+export { NtftalkHistoryPage };
diff --git a/apps/cs/src/pages/ntftalk-temp/index.ts b/apps/cs/src/pages/ntftalk-temp/index.ts
new file mode 100644
index 000000000..a15c01db3
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/index.ts
@@ -0,0 +1 @@
+export { NtftalkTempPage } from "./ui/ntftalk-temp-page";
diff --git a/apps/cs/src/pages/ntftalk-temp/model/ntftalk-temp-save-schema.ts b/apps/cs/src/pages/ntftalk-temp/model/ntftalk-temp-save-schema.ts
new file mode 100644
index 000000000..911c4a277
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/model/ntftalk-temp-save-schema.ts
@@ -0,0 +1,14 @@
+import { z } from "zod";
+
+export const ntftalkTempSaveFormSchema = z.object({
+  templateCode: z.string().min(1, "템플릿코드를 입력하세요."),
+  senderKey: z.string().min(1, "채널(senderKey)을 입력하세요."),
+  senderKeyType: z.string().min(1, "발신키 유형을 입력하세요."),
+  templateName: z.string().min(1, "템플릿명을 입력하세요."),
+  templateContent: z.string().min(1, "템플릿내용을 입력하세요."),
+  templateMessageType: z.string().min(1, "메시지유형을 입력하세요."),
+  templateEmphasizeType: z.string().min(1, "강조유형을 입력하세요."),
+  templateImageUrl: z.string().optional(),
+});
+
+export type NtftalkTempSaveFormData = z.infer<typeof ntftalkTempSaveFormSchema>;
diff --git a/apps/cs/src/pages/ntftalk-temp/model/ntftalk-var-additional-schema.ts b/apps/cs/src/pages/ntftalk-temp/model/ntftalk-var-additional-schema.ts
new file mode 100644
index 000000000..e2368fe77
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/model/ntftalk-var-additional-schema.ts
@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+export const ntftalkVarAdditionalSchema = z.object({
+  draftVars: z.array(
+    z.object({
+      varCd: z.string().min(1, "변수코드를 입력하세요."),
+      varNm: z.string().min(1, "변수명을 입력하세요."),
+      varDesc: z.string().default(""),
+      sender: z.string().default(""),
+      regr: z.string().default(""),
+    }),
+  ),
+});
+
+export type NtftalkVarAdditionalFormData = z.infer<
+  typeof ntftalkVarAdditionalSchema
+>;
diff --git a/apps/cs/src/pages/ntftalk-temp/model/ntftalk-var-batch-payload.ts b/apps/cs/src/pages/ntftalk-temp/model/ntftalk-var-batch-payload.ts
new file mode 100644
index 000000000..91d715188
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/model/ntftalk-var-batch-payload.ts
@@ -0,0 +1,52 @@
+import { z } from "zod";
+
+import type { NtftalkVarSavePayload } from "@/entities/ntftalk";
+
+import type { NtftalkVarGridRow } from "./ntftalk-var-grid";
+
+export const varDraftRowSchema = z.object({
+  varCd: z.string().min(1),
+  varNm: z.string().min(1),
+  varDesc: z.string().optional(),
+  sender: z.string().optional(),
+});
+
+export function buildNtftalkVarBatchPayload(input: {
+  pendingDeleteVarCds: ReadonlySet<string>;
+  draftVars?: NtftalkVarGridRow[];
+  regr?: string;
+}): NtftalkVarSavePayload[] {
+  const { draftVars, pendingDeleteVarCds, regr } = input;
+  const payloads: NtftalkVarSavePayload[] = [];
+
+  if (!draftVars) {
+    for (const varCd of pendingDeleteVarCds) {
+      payloads.push({ mode: "D", varCd });
+    }
+    return payloads;
+  }
+
+  for (const d of draftVars) {
+    const parsed = varDraftRowSchema.safeParse({
+      varCd: d.varCd,
+      varNm: d.varNm,
+      varDesc: d.varDesc || undefined,
+      sender: d.sender || undefined,
+    });
+    if (!parsed.success) {
+      throw new Error(
+        parsed.error.issues[0]?.message ?? "유효하지 않은 입력입니다.",
+      );
+    }
+    payloads.push({
+      mode: "C",
+      varCd: parsed.data.varCd,
+      varNm: parsed.data.varNm,
+      varDesc: parsed.data.varDesc,
+      sender: parsed.data.sender,
+      regr,
+    });
+  }
+
+  return payloads;
+}
diff --git a/apps/cs/src/pages/ntftalk-temp/model/ntftalk-var-grid.ts b/apps/cs/src/pages/ntftalk-temp/model/ntftalk-var-grid.ts
new file mode 100644
index 000000000..914130e09
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/model/ntftalk-var-grid.ts
@@ -0,0 +1,17 @@
+import type { NtftalkVar } from "@/entities/ntftalk";
+
+export interface NtftalkVarGridRow extends NtftalkVar {
+  clientId?: string;
+}
+
+export function createEmptyVarDraft(clientId: string): NtftalkVarGridRow {
+  return {
+    clientId,
+    varCd: "",
+    varNm: "",
+    varDesc: "",
+    sender: "",
+    regDt: "",
+    regr: "",
+  };
+}
diff --git a/apps/cs/src/pages/ntftalk-temp/model/template-table-columns.tsx b/apps/cs/src/pages/ntftalk-temp/model/template-table-columns.tsx
new file mode 100644
index 000000000..e5d8a00fe
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/model/template-table-columns.tsx
@@ -0,0 +1,128 @@
+import { TooltipContent } from "@radix-ui/react-tooltip";
+import type { ColumnDef, Row, Table } from "@tanstack/react-table";
+
+import { InfoTooltip } from "@/shared/ui/info-tooltip";
+import type { NtftalkBiztalkSender, NtftalkTemp } from "@/entities/ntftalk";
+import { Checkbox, Tooltip, TooltipTrigger } from "@common/components";
+
+function formatButtons(row: NtftalkTemp): string {
+  if (!row.buttons?.length) return "—";
+  return row.buttons.map((b) => b.name).join(", ");
+}
+
+export function createTemplateColumns(
+  senderData: NtftalkBiztalkSender[],
+): ColumnDef<NtftalkTemp>[] {
+  return [
+    {
+      id: "select",
+      header: ({ table }: { table: Table<NtftalkTemp> }) => (
+        <div
+          className="flex justify-center"
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
+          role="presentation"
+        >
+          <Checkbox
+            checked={
+              table.getIsAllPageRowsSelected() ||
+              (table.getIsSomePageRowsSelected() && "indeterminate")
+            }
+            onCheckedChange={(value) =>
+              table.toggleAllPageRowsSelected(!!value)
+            }
+            aria-label="전체 선택"
+          />
+        </div>
+      ),
+      cell: ({ row }: { row: Row<NtftalkTemp> }) => (
+        <div
+          className="flex justify-center"
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
+          role="presentation"
+        >
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="행 선택"
+          />
+        </div>
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    },
+    {
+      accessorKey: "senderKey",
+      header: "@채널",
+      cell: ({ row }) => {
+        const sender = senderData.find(
+          (s) => s.senderKey === row.original.senderKey,
+        );
+        return sender ? sender.name : "—";
+      },
+    },
+    {
+      accessorKey: "templateCode",
+      header: "템플릿코드",
+    },
+    {
+      accessorKey: "templateName",
+      header: "템플릿명",
+    },
+    {
+      accessorKey: "templateMessageTypeNm",
+      header: "메시지유형",
+    },
+    {
+      accessorKey: "templateContent",
+      header: "템플릿내용",
+      cell: ({ getValue }) => {
+        const v = getValue() as string;
+        if (!v) return "—";
+        return (
+          <div className="relative flex max-w-[32rem] items-center gap-2">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <p className="line-clamp-2 flex-1 text-left" title={v}>
+                  {v}
+                </p>
+              </TooltipTrigger>
+              <TooltipContent className="absolute -top-1 left-1/2 z-10 flex min-h-[4rem] w-[36rem] -translate-x-1/2 translate-y-[-100%] items-center justify-center rounded-sm border border-border bg-background p-2">
+                <p>
+                  {v.split("\n").map((line, idx) => (
+                    <span key={idx}>
+                      {line}
+                      {idx !== v.split("\n").length - 1 && <br />}
+                    </span>
+                  ))}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "templateEmphasizeTypeNm",
+      header: "강조유형",
+    },
+    {
+      id: "buttons",
+      header: "버튼정보",
+      cell: ({ row }) => formatButtons(row.original),
+    },
+    {
+      accessorKey: "inspectionStatusNm",
+      header: "검수상태",
+    },
+    {
+      accessorKey: "statusNm",
+      header: "상태",
+    },
+    {
+      accessorKey: "createdAt",
+      header: "등록일자",
+    },
+  ];
+}
diff --git a/apps/cs/src/pages/ntftalk-temp/model/var-table-columns.tsx b/apps/cs/src/pages/ntftalk-temp/model/var-table-columns.tsx
new file mode 100644
index 000000000..19e02e78d
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/model/var-table-columns.tsx
@@ -0,0 +1,84 @@
+import type { ColumnDef, Row, Table } from "@tanstack/react-table";
+
+import { Checkbox } from "@common/components";
+
+import type { NtftalkVarGridRow } from "./ntftalk-var-grid";
+
+export interface VarColumnHandlers {
+  onDraftFieldChange: (
+    clientId: string,
+    field: "varCd" | "varNm" | "varDesc" | "sender",
+    value: string,
+  ) => void;
+}
+
+export function createVarColumns(): ColumnDef<NtftalkVarGridRow>[] {
+  return [
+    {
+      id: "select",
+      header: ({ table }: { table: Table<NtftalkVarGridRow> }) => (
+        <div
+          className="flex justify-center"
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
+          role="presentation"
+        >
+          <Checkbox
+            checked={
+              table.getIsAllPageRowsSelected() ||
+              (table.getIsSomePageRowsSelected() && "indeterminate")
+            }
+            onCheckedChange={(value) =>
+              table.toggleAllPageRowsSelected(!!value)
+            }
+            aria-label="전체 선택"
+          />
+        </div>
+      ),
+      cell: ({ row }: { row: Row<NtftalkVarGridRow> }) => (
+        <div
+          className="flex justify-center"
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
+          role="presentation"
+        >
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="행 선택"
+          />
+        </div>
+      ),
+      enableSorting: false,
+    },
+    {
+      id: "seq",
+      header: "순번",
+      cell: ({ row, table }) => {
+        const pageIndex = table.getState().pagination.pageIndex;
+        const pageSize = table.getState().pagination.pageSize;
+        return pageIndex * pageSize + row.index + 1;
+      },
+    },
+    {
+      accessorKey: "varCd",
+      header: "변수코드",
+    },
+    {
+      accessorKey: "varNm",
+      header: "변수명",
+    },
+    {
+      accessorKey: "varDesc",
+      header: "설명",
+    },
+    {
+      accessorKey: "regDt",
+      header: "등록일자",
+    },
+    {
+      accessorKey: "regr",
+      header: "등록자",
+    },
+  ];
+}
diff --git a/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-detail-dialog.tsx b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-detail-dialog.tsx
new file mode 100644
index 000000000..aa08f92ca
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-detail-dialog.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+import { NoData } from "@/shared/ui/no-data";
+import { NtftalkTempApi } from "@/entities/ntftalk";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  LoadingWithAnimation,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@common/components";
+
+interface NtftalkTempDetailDialogProps {
+  templateCode: string | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+function NtftalkTempDetailDialog({
+  templateCode,
+  open,
+  onOpenChange,
+}: NtftalkTempDetailDialogProps) {
+  const query = useQuery({
+    queryKey: [ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP, "detail", templateCode],
+    queryFn: () => NtftalkTempApi.getNtftalkTemp(templateCode!),
+    enabled: open && !!templateCode,
+  });
+
+  const d = query.data;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-h-[85vh] max-w-[96rem] overflow-y-auto"
+        aria-describedby={undefined}
+      >
+        <DialogHeader>
+          <DialogTitle>알림톡 템플릿 상세</DialogTitle>
+        </DialogHeader>
+        {query.isLoading && (
+          <div className="relative size-[5rem]">
+            <LoadingWithAnimation color="primary" />
+          </div>
+        )}
+        {query.isError && <NoData />}
+        {d && (
+          <Table variant="secondary">
+            <TableBody>
+              <TableRow>
+                <TableHead>메시지 유형</TableHead>
+                <TableCell>{d.templateMessageType}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHead>@채널</TableHead>
+                <TableCell>{d.senderKey}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHead>템플릿코드</TableHead>
+                <TableCell>{d.templateCode}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHead>템플릿명</TableHead>
+                <TableCell>{d.templateName}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHead>강조유형</TableHead>
+                <TableCell>{d.templateEmphasizeType}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHead>템플릿내용</TableHead>
+                <TableCell>{d.templateContent}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHead>검수상태</TableHead>
+                <TableCell>{d.inspectionStatus}</TableCell>
+              </TableRow>
+              {/* <TableRow>
+                <TableHead>보안템플릿 여부</TableHead>
+                <TableCell>{d.templateEmphasizeType}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHead>비즈톡센터 사용여부</TableHead>
+                <TableCell>{d.status}</TableCell>
+              </TableRow> */}
+              <TableRow>
+                <TableHead>등록일</TableHead>
+                <TableCell>{d.createdAt}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHead>템플릿 상태</TableHead>
+                <TableCell>{d.status}</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { NtftalkTempDetailDialog };
diff --git a/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-page.tsx b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-page.tsx
new file mode 100644
index 000000000..ac2cbfc6f
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-page.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { NtftalkTempTemplateSection } from "./ntftalk-temp-template-section";
+import { NtftalkVarSection } from "./ntftalk-temp-var-section";
+
+function NtftalkTempPage() {
+  return (
+    <div className="card card-border !mt-6 flex flex-col gap-4">
+      <NtftalkTempTemplateSection />
+      <NtftalkVarSection />
+    </div>
+  );
+}
+
+export { NtftalkTempPage };
diff --git a/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-regist-dialog.tsx b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-regist-dialog.tsx
new file mode 100644
index 000000000..f989a0165
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-regist-dialog.tsx
@@ -0,0 +1,435 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  type PaginationState,
+  type RowSelectionState,
+} from "@tanstack/react-table";
+
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/shared/ui/form";
+import { NoData } from "@/shared/ui/no-data";
+import {
+  NtftalkBiztalkApi,
+  NtftalkTempApi,
+  NtftalkVarApi,
+  type NtftalkVarSearchParams,
+} from "@/entities/ntftalk";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  LoadingWithAnimation,
+  RadioGroup,
+  RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Textarea,
+} from "@common/components";
+
+import {
+  type NtftalkTempSaveFormData,
+  ntftalkTempSaveFormSchema,
+} from "../model/ntftalk-temp-save-schema";
+import { createVarColumns } from "../model/var-table-columns";
+
+interface NtftalkTempRegistDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const TEMPLATE_MESSAGE_TYPE_BASIC = "BA";
+const SECURITY_TEMPLATE_EMPHASIZE_TYPE = {
+  enabled: "SECURITY",
+  disabled: "NONE",
+} as const;
+
+function NtftalkTempRegistDialog({
+  open,
+  onOpenChange,
+}: NtftalkTempRegistDialogProps) {
+  const [isVarDialogOpen, setIsVarDialogOpen] = useState(false);
+  const [varPagination, setVarPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [varRowSelection, setVarRowSelection] = useState<RowSelectionState>({});
+  const [varSearchParams] = useState<NtftalkVarSearchParams>({
+    sort: "regDt,desc",
+  });
+
+  const queryClient = useQueryClient();
+  const alert = useAlertStore((s) => s.setMessage);
+  const senderQuery = useQuery({
+    queryKey: [ENDPOINT.NTFTALK_SERVICE.NTFTALK_BIZTALK, "sender"],
+    queryFn: () => NtftalkBiztalkApi.getSender(),
+  });
+  const varQuery = useQuery({
+    queryKey: [
+      ENDPOINT.NTFTALK_SERVICE.NTFTALK_VAR,
+      varSearchParams,
+      varPagination,
+    ],
+    queryFn: () =>
+      NtftalkVarApi.getNtftalkVarPage({
+        ...varSearchParams,
+        page: varPagination.pageIndex,
+        size: varPagination.pageSize,
+      }),
+    placeholderData: keepPreviousData,
+    enabled: isVarDialogOpen,
+  });
+
+  const { tableComponent, tableInstance } = useDataTable({
+    query: varQuery,
+    tableOptions: {
+      columns: createVarColumns(),
+      state: { pagination: varPagination, rowSelection: varRowSelection },
+      manualPagination: true,
+      enableRowSelection: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setVarPagination,
+      onRowSelectionChange: setVarRowSelection,
+      getRowId: (row) => `srv:${row.varCd}`,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
+  });
+
+  const form = useForm<NtftalkTempSaveFormData>({
+    resolver: zodResolver(ntftalkTempSaveFormSchema),
+    defaultValues: {
+      templateCode: "",
+      senderKey: "",
+      senderKeyType: "S",
+      templateName: "",
+      templateContent: "",
+      templateMessageType: TEMPLATE_MESSAGE_TYPE_BASIC,
+      templateEmphasizeType: SECURITY_TEMPLATE_EMPHASIZE_TYPE.enabled,
+      templateImageUrl: "",
+    },
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    form.reset();
+  }, [open]);
+
+  const { mutateAsync: saveTemp, isPending } = useMutationWrapper({
+    mutationFn: (data: NtftalkTempSaveFormData) =>
+      NtftalkTempApi.saveNtftalkTemp({
+        ...data,
+        templateImageUrl: data.templateImageUrl || undefined,
+      }),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP],
+      });
+      alert("등록되었습니다.");
+      form.reset();
+      onOpenChange(false);
+    },
+  });
+
+  const onSubmit = form.handleSubmit((data) =>
+    saveTemp({
+      ...data,
+      senderKeyType: "S",
+      templateMessageType: TEMPLATE_MESSAGE_TYPE_BASIC,
+    }),
+  );
+
+  useEffect(() => {
+    if (!senderQuery.data) return;
+    if (form.getValues("senderKey")) return;
+    form.setValue("senderKey", senderQuery.data.senderKey);
+  }, [senderQuery.data, form]);
+
+  function handleInsertVariable() {
+    setIsVarDialogOpen(true);
+  }
+
+  function handleApplySelectedVariables() {
+    const rows = tableInstance.getSelectedRowModel().rows;
+    if (rows.length === 0) {
+      alert("추가할 변수를 선택해 주세요.");
+      return;
+    }
+
+    const varCodes = rows.map((row) => row.original.varCd?.trim() ?? "");
+    if (varCodes.some((varCd) => !varCd)) {
+      alert("선택 항목 중 변수코드가 없는 항목이 있습니다.");
+      return;
+    }
+
+    const currentValue = form.getValues("templateContent");
+    const tokens = varCodes.map((varCd) => `${varCd}`);
+    const appendValue = tokens.join("\n");
+    const nextValue = currentValue
+      ? `${currentValue}\n${appendValue}`
+      : appendValue;
+
+    form.setValue("templateContent", nextValue, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setVarRowSelection({});
+    setIsVarDialogOpen(false);
+  }
+
+  const varTableComponent = (() => {
+    if (varQuery.isLoading)
+      return (
+        <div className="relative size-[5rem]">
+          <LoadingWithAnimation color="primary" />
+        </div>
+      );
+    if (varQuery.isError) return <NoData />;
+    return tableComponent;
+  })();
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-h-[85vh] max-w-[64rem] overflow-y-auto"
+        aria-describedby={undefined}
+      >
+        <DialogHeader>
+          <DialogTitle>알림 템플릿 등록</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form id="ntftalk-temp-regist-form" onSubmit={onSubmit}>
+            <Table variant="secondary" className="w-full border">
+              <colgroup>
+                <col width="22%" />
+                <col width="78%" />
+              </colgroup>
+              <TableBody>
+                <TableRow>
+                  <TableHead className="px-3 py-2 text-left text-label">
+                    메시지 유형
+                  </TableHead>
+                  <TableCell>기본형</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead className="px-3 py-2 text-left text-label">
+                    채널
+                  </TableHead>
+                  <TableCell>
+                    <FormField
+                      control={form.control}
+                      name="senderKey"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Select
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            >
+                              <SelectTrigger>
+                                <SelectValue placeholder="채널을 선택하세요." />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {senderQuery.data && (
+                                  <SelectItem
+                                    value={senderQuery.data.senderKey}
+                                  >
+                                    {senderQuery.data.uuid}
+                                    {senderQuery.data
+                                      ? `(${senderQuery.data.name})`
+                                      : ""}
+                                  </SelectItem>
+                                )}
+                              </SelectContent>
+                            </Select>
+                          </FormControl>
+                          <FormMessage className="text-[1.2rem]" />
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead className="px-3 py-2 text-left text-label">
+                    템플릿코드
+                  </TableHead>
+                  <TableCell>
+                    <FormField
+                      control={form.control}
+                      name="templateCode"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+                          <FormMessage className="text-[1.2rem]" />
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead className="px-3 py-2 text-left text-label">
+                    템플릿명
+                  </TableHead>
+                  <TableCell>
+                    <FormField
+                      control={form.control}
+                      name="templateName"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+                          <FormMessage className="text-[1.2rem]" />
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead className="px-3 py-2 text-left text-label">
+                    보안템플릿여부
+                  </TableHead>
+                  <TableCell>
+                    <FormField
+                      control={form.control}
+                      name="templateEmphasizeType"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <RadioGroup
+                              value={field.value}
+                              onValueChange={field.onChange}
+                              className="flex items-center gap-8"
+                            >
+                              <div className="flex items-center gap-2">
+                                <RadioGroupItem
+                                  value={
+                                    SECURITY_TEMPLATE_EMPHASIZE_TYPE.enabled
+                                  }
+                                  id="security-enabled"
+                                />
+                                <Label htmlFor="security-enabled">설정</Label>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <RadioGroupItem
+                                  value={
+                                    SECURITY_TEMPLATE_EMPHASIZE_TYPE.disabled
+                                  }
+                                  id="security-disabled"
+                                />
+                                <Label htmlFor="security-disabled">
+                                  미설정
+                                </Label>
+                              </div>
+                            </RadioGroup>
+                          </FormControl>
+                          <FormMessage className="text-[1.2rem]" />
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead className="px-3 py-2 text-left align-top text-label">
+                    템플릿내용
+                  </TableHead>
+                  <TableCell>
+                    <FormField
+                      control={form.control}
+                      name="templateContent"
+                      render={({ field }) => (
+                        <FormItem>
+                          <div className="flex justify-end">
+                            <Button
+                              type="button"
+                              color="white"
+                              size="sm"
+                              onClick={handleInsertVariable}
+                            >
+                              + 변수추가
+                            </Button>
+                          </div>
+                          <FormControl>
+                            <Textarea
+                              className="min-h-[20rem] resize-none !text-[1.3rem]"
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage className="text-[1.2rem]" />
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </form>
+        </Form>
+        <DialogFooter>
+          <Button
+            type="submit"
+            form="ntftalk-temp-regist-form"
+            disabled={isPending}
+          >
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+      <Dialog open={isVarDialogOpen} onOpenChange={setIsVarDialogOpen}>
+        <DialogContent className="max-h-[80vh] max-w-[96rem] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>변수 목록</DialogTitle>
+          </DialogHeader>
+          {varTableComponent}
+          <DialogFooter>
+            <Button
+              type="button"
+              color="white"
+              onClick={() => setIsVarDialogOpen(false)}
+            >
+              취소
+            </Button>
+            <Button type="button" onClick={handleApplySelectedVariables}>
+              추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Dialog>
+  );
+}
+
+export { NtftalkTempRegistDialog };
diff --git a/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-template-section.tsx b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-template-section.tsx
new file mode 100644
index 000000000..fea00f6d9
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-template-section.tsx
@@ -0,0 +1,455 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+  type UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  type PaginationState,
+  type RowSelectionState,
+  type Table,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { NoData } from "@/shared/ui/no-data";
+import { CodeSelect } from "@/entities/code";
+import {
+  NtftalkBiztalkApi,
+  type NtftalkBiztalkInspectionRequestItem,
+  type NtftalkTemp,
+  NtftalkTempApi,
+  type NtftalkTempPageList,
+  type NtftalkTempSearchParams,
+} from "@/entities/ntftalk";
+import {
+  Button,
+  DataTable,
+  Input,
+  Label,
+  LoadingWithAnimation,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+
+import { createTemplateColumns } from "../model/template-table-columns";
+
+import { NtftalkTempDetailDialog } from "./ntftalk-temp-detail-dialog";
+import { NtftalkTempRegistDialog } from "./ntftalk-temp-regist-dialog";
+
+interface NtftalkTempTablePanelProps {
+  query: UseQueryResult<NtftalkTempPageList>;
+  table: Table<NtftalkTemp>;
+  onRowClick: (row: NtftalkTemp) => void;
+}
+
+function NtftalkTempTablePanel({
+  query,
+  table,
+  onRowClick,
+}: NtftalkTempTablePanelProps) {
+  if (query.isLoading) {
+    return (
+      <div className="flex items-center justify-center">
+        <div className="relative size-[5rem]">
+          <LoadingWithAnimation color="primary" />
+        </div>
+      </div>
+    );
+  }
+  if (query.isError) return <NoData />;
+  return <DataTable table={table} viewPagination onRowClick={onRowClick} />;
+}
+
+function NtftalkTempTemplateSection() {
+  const queryClient = useQueryClient();
+  const alert = useAlertStore((s) => s.setMessage);
+  const { confirm } = useConfirm();
+
+  const [templateCodeInput, setTemplateCodeInput] = useState("");
+  const [templateNameInput, setTemplateNameInput] = useState("");
+  const [templateContentInput, setTemplateContentInput] = useState("");
+  const [senderKeyFilter, setSenderKeyFilter] = useState("");
+  const [inspectionFilter, setInspectionFilter] = useState("");
+  const [messageTypeFilter, setMessageTypeFilter] = useState("");
+
+  const [searchParams, setSearchParams] = useState<NtftalkTempSearchParams>({
+    sort: "createdAt,desc",
+  });
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [pendingDeleteTemplateCodes, setPendingDeleteTemplateCodes] = useState(
+    () => new Set<string>(),
+  );
+
+  const [detailCode, setDetailCode] = useState<string | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [registOpen, setRegistOpen] = useState(false);
+
+  const tempQuery = useQuery({
+    queryKey: [ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP, searchParams, pagination],
+    queryFn: () =>
+      NtftalkTempApi.getNtftalkTempPage({
+        ...searchParams,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    placeholderData: keepPreviousData,
+  });
+
+  const senderQuery = useQuery({
+    queryKey: [ENDPOINT.NTFTALK_SERVICE.NTFTALK_BIZTALK, "sender"],
+    queryFn: () => NtftalkBiztalkApi.getSender(),
+  });
+
+  const senderKeyOptions = useMemo(() => {
+    if (senderQuery.data) return [senderQuery.data];
+    return [];
+  }, [senderQuery.data]);
+
+  const templateColumns = useMemo(
+    () => createTemplateColumns(senderQuery?.data ? [senderQuery.data] : []),
+    [senderQuery.data],
+  );
+
+  const visibleTemplates = useMemo(
+    () =>
+      (tempQuery.data?.content ?? []).filter(
+        (row) => !pendingDeleteTemplateCodes.has(row.templateCode),
+      ),
+    [tempQuery.data, pendingDeleteTemplateCodes],
+  );
+
+  const templateTable = useReactTable({
+    data: visibleTemplates,
+    columns: templateColumns,
+    state: { pagination, rowSelection },
+    manualPagination: true,
+    rowCount: tempQuery.data?.totalElements ?? 0,
+    pageCount: tempQuery.data?.totalPages ?? 0,
+    enableRowSelection: true,
+    enableMultiRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getRowId: (row) => row.templateCode,
+  });
+
+  const buildSearchParamsFromInputs = (): NtftalkTempSearchParams => ({
+    sort: searchParams.sort ?? "createdAt,desc",
+    templateCode: templateCodeInput.trim() || undefined,
+    templateName: templateNameInput.trim() || undefined,
+    templateContent: templateContentInput.trim() || undefined,
+    senderKey: senderKeyFilter,
+    inspectionStatus: inspectionFilter,
+    templateMessageType: messageTypeFilter,
+  });
+
+  const handleSearch = (e: React.SubmitEvent) => {
+    e.preventDefault();
+    setPendingDeleteTemplateCodes(new Set());
+    setRowSelection({});
+    setPagination((p) => ({ ...p, pageIndex: 0 }));
+    setSearchParams(buildSearchParamsFromInputs());
+  };
+
+  const handleReset = () => {
+    setTemplateCodeInput("");
+    setTemplateNameInput("");
+    setTemplateContentInput("");
+    setSenderKeyFilter("");
+    setInspectionFilter("");
+    setMessageTypeFilter("");
+    setPendingDeleteTemplateCodes(new Set());
+    setRowSelection({});
+    setPagination((p) => ({ ...p, pageIndex: 0 }));
+    setSearchParams({ sort: "createdAt,desc" });
+  };
+
+  const syncTemplatesMutation = useMutationWrapper({
+    mutationFn: () => NtftalkBiztalkApi.syncTemplates({ senderKeyType: "S" }),
+    onSuccess: async (data) => {
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: [ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP],
+        }),
+        queryClient.invalidateQueries({
+          queryKey: [ENDPOINT.NTFTALK_SERVICE.NTFTALK_BIZTALK, "sender"],
+        }),
+      ]);
+      alert(data.message);
+    },
+  });
+
+  const handleRefreshTemplates = () => {
+    setPendingDeleteTemplateCodes(new Set());
+    setRowSelection({});
+    syncTemplatesMutation.mutate();
+  };
+
+  const deleteMultiTemplatesMutation = useMutationWrapper({
+    mutationFn: (templateCodes: string[]) =>
+      NtftalkTempApi.deleteMultiNtftalkTemp({ templateCodes }),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP],
+      });
+      setPendingDeleteTemplateCodes(new Set());
+      setRowSelection({});
+      alert("저장되었습니다.");
+    },
+  });
+
+  const handleDeleteSelectedTemplates = async () => {
+    const rows = templateTable.getSelectedRowModel().rows;
+    if (rows.length === 0) {
+      alert("삭제할 템플릿을 선택해 주세요.");
+      return;
+    }
+    if (!(await confirm(`선택한 ${rows.length}건을 삭제하시겠습니까?`))) return;
+    const codes = rows.map((r) => r.original.templateCode);
+    setPendingDeleteTemplateCodes((prev) => {
+      const next = new Set(prev);
+      for (const code of codes) next.add(code);
+      return next;
+    });
+    setRowSelection({});
+  };
+
+  const inspectionRequestMutation = useMutationWrapper({
+    mutationFn: (requestList: NtftalkBiztalkInspectionRequestItem[]) =>
+      NtftalkBiztalkApi.requestInspection(requestList),
+    onSuccess: async (data) => {
+      await queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.NTFTALK_SERVICE.NTFTALK_TEMP],
+      });
+      setRowSelection({});
+      alert(data.message);
+    },
+  });
+
+  const handleInspectionRequest = async () => {
+    const rows = templateTable.getSelectedRowModel().rows;
+    const requestList: NtftalkBiztalkInspectionRequestItem[] = [];
+    for (const row of rows) {
+      const { senderKey, templateCode, senderKeyType } = row.original;
+      if (!senderKey || !templateCode) {
+        alert("선택 항목에 발신키 또는 템플릿코드가 없습니다.");
+        return;
+      }
+      requestList.push({
+        senderKey,
+        templateCode,
+        senderKeyType: senderKeyType || "S",
+      });
+    }
+
+    if (
+      !(await confirm(`선택한 ${requestList.length}건을 검수요청하시겠습니까?`))
+    )
+      return;
+    inspectionRequestMutation.mutate(requestList);
+  };
+
+  const handleSaveTemplateGrid = () => {
+    if (pendingDeleteTemplateCodes.size === 0) {
+      alert("저장할 변경 사항이 없습니다.");
+      return;
+    }
+    deleteMultiTemplatesMutation.mutate([...pendingDeleteTemplateCodes]);
+  };
+
+  return (
+    <>
+      <div className="card card-border">
+        <form
+          onSubmit={handleSearch}
+          className="flex items-end justify-between p-2"
+        >
+          <div className="flex flex-col gap-4">
+            <div className="flex w-full gap-6">
+              <div className="flex items-center gap-2">
+                <Label className="w-[6rem] whitespace-nowrap text-label">
+                  템플릿코드
+                </Label>
+                <Input
+                  className="w-[20rem]"
+                  value={templateCodeInput}
+                  onChange={(e) => setTemplateCodeInput(e.target.value)}
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Label className="w-[6rem] whitespace-nowrap text-label">
+                  템플릿명
+                </Label>
+                <Input
+                  className="w-[20rem]"
+                  value={templateNameInput}
+                  onChange={(e) => setTemplateNameInput(e.target.value)}
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Label className="w-[6rem] whitespace-nowrap text-label">
+                  템플릿내용
+                </Label>
+                <Input
+                  className="w-[20rem]"
+                  value={templateContentInput}
+                  onChange={(e) => setTemplateContentInput(e.target.value)}
+                />
+              </div>
+            </div>
+            <div className="flex w-full gap-6">
+              <div className="flex items-center gap-2">
+                <Label className="w-[6rem] whitespace-nowrap text-label">
+                  채널
+                </Label>
+                <Select
+                  value={senderKeyFilter}
+                  onValueChange={setSenderKeyFilter}
+                >
+                  <SelectTrigger className="w-[20rem]">
+                    <SelectValue placeholder="전체" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {senderKeyOptions?.map((k) => (
+                      <SelectItem key={k.senderKey} value={k.senderKey}>
+                        {k.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex items-center gap-2">
+                <Label className="w-[6rem] whitespace-nowrap text-label">
+                  검수상태
+                </Label>
+                <CodeSelect
+                  upCd="NTFINSPSTS"
+                  value={inspectionFilter}
+                  onValueChange={setInspectionFilter}
+                  placeholder="전체"
+                  className="w-[20rem]"
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Label className="w-[6rem] whitespace-nowrap text-label">
+                  메시지유형
+                </Label>
+                <CodeSelect
+                  upCd="NTFMSGTYPE"
+                  value={messageTypeFilter}
+                  onValueChange={setMessageTypeFilter}
+                  placeholder="전체"
+                  className="w-[20rem]"
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <Button className="h-[3.2rem]" type="submit">
+              조회
+            </Button>
+            <Button
+              type="button"
+              color="white"
+              className="h-[3.2rem]"
+              onClick={handleReset}
+            >
+              초기화
+            </Button>
+          </div>
+        </form>
+      </div>
+
+      <div className="card card-border">
+        <div className="card-header flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+          <h3 className="text-2xl font-medium text-label">
+            알림톡 템플릿 관리
+          </h3>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              type="button"
+              color="white"
+              onClick={handleRefreshTemplates}
+              disabled={syncTemplatesMutation.isPending}
+            >
+              템플릿갱신
+            </Button>
+            <Button
+              type="button"
+              color="green"
+              onClick={() => setRegistOpen(true)}
+            >
+              템플릿등록
+            </Button>
+            <Button
+              type="button"
+              color="gray"
+              onClick={handleInspectionRequest}
+              disabled={
+                inspectionRequestMutation.isPending ||
+                Object.keys(rowSelection).length === 0
+              }
+            >
+              선택 검수요청
+            </Button>
+            <Button
+              type="button"
+              color="red"
+              onClick={handleDeleteSelectedTemplates}
+              disabled={
+                deleteMultiTemplatesMutation.isPending ||
+                Object.keys(rowSelection).length === 0
+              }
+            >
+              선택삭제
+            </Button>
+            <Button
+              type="button"
+              onClick={handleSaveTemplateGrid}
+              disabled={deleteMultiTemplatesMutation.isPending}
+            >
+              저장
+            </Button>
+          </div>
+        </div>
+        <div className="card !m-[1.2rem] !p-0">
+          <NtftalkTempTablePanel
+            query={tempQuery}
+            table={templateTable}
+            onRowClick={(row) => {
+              setDetailCode(row.templateCode);
+              setDetailOpen(true);
+            }}
+          />
+        </div>
+      </div>
+
+      <NtftalkTempDetailDialog
+        templateCode={detailCode}
+        open={detailOpen}
+        onOpenChange={(o) => {
+          setDetailOpen(o);
+          if (!o) setDetailCode(null);
+        }}
+      />
+      <NtftalkTempRegistDialog open={registOpen} onOpenChange={setRegistOpen} />
+    </>
+  );
+}
+
+export { NtftalkTempTemplateSection };
diff --git a/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-var-section.tsx b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-var-section.tsx
new file mode 100644
index 000000000..6077be8ac
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-var-section.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import type { UseQueryResult } from "@tanstack/react-query";
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  type PaginationState,
+  type RowSelectionState,
+  type Table,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { NoData } from "@/shared/ui/no-data";
+import {
+  NtftalkVarApi,
+  type NtftalkVarPageList,
+  type NtftalkVarSavePayload,
+  type NtftalkVarSearchParams,
+} from "@/entities/ntftalk";
+import { Button, DataTable, LoadingWithAnimation } from "@common/components";
+
+import { buildNtftalkVarBatchPayload } from "../model/ntftalk-var-batch-payload";
+import { type NtftalkVarGridRow } from "../model/ntftalk-var-grid";
+import { createVarColumns } from "../model/var-table-columns";
+
+import { NtftalkVarAddDialog } from "./ntftalk-var-add-dialog";
+import { NtftalkVarEditDialog } from "./ntftalk-var-edit-dialog";
+
+interface NtftalkVarTablePanelProps {
+  query: UseQueryResult<NtftalkVarPageList>;
+  table: Table<NtftalkVarGridRow>;
+  onRowClick?: (row: NtftalkVarGridRow) => void;
+}
+
+function NtftalkVarTablePanel({
+  query,
+  table,
+  onRowClick,
+}: NtftalkVarTablePanelProps) {
+  if (query.isLoading) {
+    return (
+      <div className="flex items-center justify-center">
+        <div className="relative size-[5rem]">
+          <LoadingWithAnimation color="primary" />
+        </div>
+      </div>
+    );
+  }
+  if (query.isError) return <NoData />;
+  return <DataTable table={table} viewPagination onRowClick={onRowClick} />;
+}
+
+function NtftalkVarSection() {
+  const queryClient = useQueryClient();
+  const alert = useAlertStore((s) => s.setMessage);
+  const { confirm } = useConfirm();
+
+  const [varPagination, setVarPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [varSearchParams] = useState<NtftalkVarSearchParams>({
+    sort: "regDt,desc",
+  });
+  const [varRowSelection, setVarRowSelection] = useState<RowSelectionState>({});
+  const [pendingDeleteVarCds, setPendingDeleteVarCds] = useState(
+    () => new Set<string>(),
+  );
+  const [editTargetVarCd, setEditTargetVarCd] = useState<string | null>(null);
+  const [addVarDialogOpen, setAddVarDialogOpen] = useState(false);
+
+  const varQuery = useQuery({
+    queryKey: [
+      ENDPOINT.NTFTALK_SERVICE.NTFTALK_VAR,
+      varSearchParams,
+      varPagination,
+    ],
+    queryFn: () =>
+      NtftalkVarApi.getNtftalkVarPage({
+        ...varSearchParams,
+        page: varPagination.pageIndex,
+        size: varPagination.pageSize,
+      }),
+    placeholderData: keepPreviousData,
+  });
+
+  const varTableRows = useMemo((): NtftalkVarGridRow[] => {
+    return (varQuery.data?.content ?? []).filter(
+      (row) => !pendingDeleteVarCds.has(row.varCd),
+    );
+  }, [varQuery.data, pendingDeleteVarCds]);
+
+  const varTable = useReactTable({
+    data: varTableRows,
+    columns: createVarColumns(),
+    state: { pagination: varPagination, rowSelection: varRowSelection },
+    manualPagination: true,
+    rowCount: varQuery.data?.totalElements ?? 0,
+    pageCount: varQuery.data?.totalPages ?? 0,
+    enableRowSelection: true,
+    enableMultiRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    onPaginationChange: setVarPagination,
+    onRowSelectionChange: setVarRowSelection,
+    getRowId: (row) => `srv:${row.varCd}`,
+  });
+
+  const handleDeleteSelectedVars = async () => {
+    const selected = varTable.getSelectedRowModel().rows;
+    if (selected.length === 0) {
+      alert("삭제할 변수를 선택해 주세요.");
+      return;
+    }
+    if (!(await confirm(`선택한 ${selected.length}건을 삭제하시겠습니까?`)))
+      return;
+
+    const serverCodes = selected
+      .map((r) => r.original.varCd)
+      .filter((varCd): varCd is string => Boolean(varCd));
+
+    if (serverCodes.length) {
+      setPendingDeleteVarCds((prev) => {
+        const next = new Set(prev);
+        for (const code of serverCodes) next.add(code);
+        return next;
+      });
+    }
+    setVarRowSelection({});
+  };
+
+  const saveVarsMutation = useMutationWrapper({
+    mutationFn: (payload: NtftalkVarSavePayload[]) =>
+      NtftalkVarApi.saveNtftalkVar(payload),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.NTFTALK_SERVICE.NTFTALK_VAR],
+      });
+      setPendingDeleteVarCds(new Set());
+      setVarRowSelection({});
+      setAddVarDialogOpen(false);
+      alert("저장되었습니다.");
+    },
+  });
+
+  const handleVarRowClick = useCallback((row: NtftalkVarGridRow) => {
+    setEditTargetVarCd(row.varCd);
+  }, []);
+
+  const handleSaveVars = () => {
+    if (pendingDeleteVarCds.size === 0) {
+      alert("저장할 변경 사항이 없습니다.");
+      return;
+    }
+    let payload: NtftalkVarSavePayload[];
+    try {
+      payload = buildNtftalkVarBatchPayload({
+        pendingDeleteVarCds,
+      });
+    } catch (e) {
+      alert(e instanceof Error ? e.message : "유효하지 않은 입력입니다.");
+      return;
+    }
+    if (payload.length === 0) {
+      alert("저장할 변경 사항이 없습니다.");
+      return;
+    }
+    saveVarsMutation.mutate(payload);
+  };
+
+  return (
+    <div className="card card-border">
+      <div className="card-header flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <h3 className="text-2xl font-medium text-label">변수 관리</h3>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            type="button"
+            color="green"
+            className="h-[3.2rem]"
+            onClick={() => setAddVarDialogOpen(true)}
+          >
+            변수추가
+          </Button>
+          <Button
+            type="button"
+            color="red"
+            className="h-[3.2rem]"
+            onClick={handleDeleteSelectedVars}
+            disabled={Object.keys(varRowSelection).length === 0}
+          >
+            선택삭제
+          </Button>
+          <Button
+            type="button"
+            className="h-[3.2rem]"
+            onClick={handleSaveVars}
+            disabled={saveVarsMutation.isPending}
+          >
+            저장
+          </Button>
+        </div>
+      </div>
+      <div className="card !m-[1.2rem] !p-0">
+        <NtftalkVarTablePanel
+          query={varQuery}
+          table={varTable}
+          onRowClick={handleVarRowClick}
+        />
+      </div>
+      <NtftalkVarAddDialog
+        open={addVarDialogOpen}
+        onOpenChange={setAddVarDialogOpen}
+        onSave={saveVarsMutation.mutate}
+      />
+      <NtftalkVarEditDialog
+        varCd={editTargetVarCd}
+        open={editTargetVarCd !== null}
+        onOpenChange={(next) => {
+          if (!next) setEditTargetVarCd(null);
+        }}
+      />
+    </div>
+  );
+}
+
+export { NtftalkVarSection };
diff --git a/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-var-add-dialog.tsx b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-var-add-dialog.tsx
new file mode 100644
index 000000000..108495f30
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-var-add-dialog.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import { useEffect } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { useAlertStore, useUserStore } from "@/shared/lib";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/shared/ui/form";
+import type { NtftalkVarSavePayload } from "@/entities/ntftalk";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@common/components";
+
+import {
+  type NtftalkVarAdditionalFormData,
+  ntftalkVarAdditionalSchema,
+} from "../model/ntftalk-var-additional-schema";
+import { buildNtftalkVarBatchPayload } from "../model/ntftalk-var-batch-payload";
+import { createEmptyVarDraft } from "../model/ntftalk-var-grid";
+
+interface NtftalkVarAddDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (payload: NtftalkVarSavePayload[]) => void;
+}
+
+function NtftalkVarAddDialog({
+  open,
+  onOpenChange,
+  onSave,
+}: NtftalkVarAddDialogProps) {
+  const alert = useAlertStore((s) => s.setMessage);
+  const userInfo = useUserStore((s) => s.userInfo);
+
+  const form = useForm<NtftalkVarAdditionalFormData>({
+    resolver: zodResolver(ntftalkVarAdditionalSchema),
+    defaultValues: { draftVars: [] },
+  });
+  const { control, reset } = form;
+  const { fields, append } = useFieldArray({
+    control,
+    name: "draftVars",
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    reset({
+      draftVars: [createEmptyVarDraft(Date.now().toString())],
+    });
+  }, [open, reset]);
+
+  const onSubmit = form.handleSubmit((data) => {
+    const draftVars = data.draftVars ?? [];
+    let payload: NtftalkVarSavePayload[];
+    try {
+      payload = buildNtftalkVarBatchPayload({
+        draftVars,
+        pendingDeleteVarCds: new Set(),
+        regr: userInfo?.userName,
+      });
+    } catch (e) {
+      alert(e instanceof Error ? e.message : "유효하지 않은 입력입니다.");
+      return;
+    }
+    if (payload.length === 0) {
+      alert("저장할 변경 사항이 없습니다.");
+      return;
+    }
+    onSave(payload);
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-h-[85vh] max-w-[72rem] overflow-y-auto"
+        aria-describedby={undefined}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>변수 추가</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-3">
+          <Form {...form}>
+            <form id="ntftalk-var-add-form" onSubmit={onSubmit}>
+              <Table variant="secondary" className="w-full border">
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="min-w-[12rem] text-left text-label">
+                      변수코드
+                    </TableHead>
+                    <TableHead className="min-w-[12rem] text-left text-label">
+                      변수명
+                    </TableHead>
+                    <TableHead className="min-w-[16rem] text-left text-label">
+                      설명
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {fields.map((field, index) => (
+                    <TableRow key={field.id}>
+                      <TableCell className="align-top">
+                        <FormField
+                          control={control}
+                          name={`draftVars.${index}.varCd`}
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormControl>
+                                <Input {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </TableCell>
+                      <TableCell className="align-top">
+                        <FormField
+                          control={control}
+                          name={`draftVars.${index}.varNm`}
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormControl>
+                                <Input {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </TableCell>
+                      <TableCell className="align-top">
+                        <FormField
+                          control={control}
+                          name={`draftVars.${index}.varDesc`}
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormControl>
+                                <Input {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </form>
+          </Form>
+          <div className="flex justify-start">
+            <Button
+              type="button"
+              color="white"
+              size="sm"
+              onClick={() => append(createEmptyVarDraft(Date.now().toString()))}
+            >
+              + 행추가
+            </Button>
+          </div>
+        </div>
+        <DialogFooter className="gap-2 sm:gap-2">
+          <Button
+            type="button"
+            color="white"
+            onClick={() => onOpenChange(false)}
+          >
+            취소
+          </Button>
+          <Button type="submit" form="ntftalk-var-add-form">
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { NtftalkVarAddDialog };
diff --git a/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-var-edit-dialog.tsx b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-var-edit-dialog.tsx
new file mode 100644
index 000000000..4d1917674
--- /dev/null
+++ b/apps/cs/src/pages/ntftalk-temp/ui/ntftalk-var-edit-dialog.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { z } from "zod";
+
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/ui/form";
+import { NoData } from "@/shared/ui/no-data";
+import { NtftalkVarApi } from "@/entities/ntftalk";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  LoadingWithAnimation,
+  Textarea,
+} from "@common/components";
+
+const ntftalkVarEditFormSchema = z.object({
+  varCd: z.string().min(1, "변수코드를 입력해 주세요."),
+  varNm: z.string().min(1, "변수명을 입력해 주세요."),
+  varDesc: z.string().optional(),
+});
+
+type NtftalkVarEditFormValues = z.infer<typeof ntftalkVarEditFormSchema>;
+
+interface NtftalkVarEditDialogProps {
+  varCd: string | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+function NtftalkVarEditDialog({
+  varCd,
+  open,
+  onOpenChange,
+}: NtftalkVarEditDialogProps) {
+  const queryClient = useQueryClient();
+  const alert = useAlertStore((s) => s.setMessage);
+
+  const detailQuery = useQuery({
+    queryKey: [ENDPOINT.NTFTALK_SERVICE.NTFTALK_VAR, "detail", varCd],
+    queryFn: () => NtftalkVarApi.getNtftalkVar(varCd!),
+    enabled: open && !!varCd,
+  });
+
+  const form = useForm<NtftalkVarEditFormValues>({
+    resolver: zodResolver(ntftalkVarEditFormSchema),
+    defaultValues: { varCd: "", varNm: "", varDesc: "" },
+  });
+
+  useEffect(() => {
+    const d = detailQuery.data;
+    if (!d) return;
+    form.reset({
+      varCd: d.varCd,
+      varNm: d.varNm,
+      varDesc: d.varDesc || "",
+    });
+  }, [detailQuery.data, form]);
+
+  const saveMutation = useMutationWrapper({
+    mutationFn: () => {
+      const values = form.getValues();
+      return NtftalkVarApi.saveNtftalkVar([
+        {
+          mode: "U",
+          varCd: values.varCd,
+          varNm: values.varNm,
+          varDesc: values.varDesc || undefined,
+        },
+      ]);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.NTFTALK_SERVICE.NTFTALK_VAR],
+      });
+      alert("저장되었습니다.");
+      onOpenChange(false);
+    },
+  });
+
+  const handleSubmit = form.handleSubmit(() => saveMutation.mutate());
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-w-[56rem]"
+        aria-describedby={undefined}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>변수 수정</DialogTitle>
+        </DialogHeader>
+        {detailQuery.isLoading && (
+          <div className="relative flex justify-center py-8">
+            <div className="relative size-[5rem]">
+              <LoadingWithAnimation color="primary" />
+            </div>
+          </div>
+        )}
+        {detailQuery.isError && <NoData />}
+        {detailQuery.data && (
+          <Form {...form}>
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+              <div className="grid gap-2">
+                <Label>변수코드</Label>
+                <Input
+                  value={detailQuery.data.varCd}
+                  disabled
+                  className="bg-muted"
+                />
+              </div>
+              <FormField
+                control={form.control}
+                name="varNm"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>변수명</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="varDesc"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>설명</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        {...field}
+                        rows={4}
+                        className="min-h-[8rem] !text-[1.3rem]"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <DialogFooter className="gap-2 sm:gap-2">
+                <Button
+                  type="button"
+                  color="white"
+                  onClick={() => onOpenChange(false)}
+                >
+                  취소
+                </Button>
+                <Button type="submit" disabled={saveMutation.isPending}>
+                  저장
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { NtftalkVarEditDialog };
diff --git a/apps/cs/src/pages/popup/ui/popup-page.tsx b/apps/cs/src/pages/popup/ui/popup-page.tsx
index e55e5652b..6dd9e1721 100644
--- a/apps/cs/src/pages/popup/ui/popup-page.tsx
+++ b/apps/cs/src/pages/popup/ui/popup-page.tsx
@@ -2,70 +2,75 @@
 
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
+  type OnChangeFn,
   type PaginationState,
   type RowSelectionState,
 } from "@tanstack/react-table";
-import { Button, Input, Label } from "@common/components";
+
+import { ENDPOINT } from "@/shared/config";
+import { useDataTable, useSearchParamsState } from "@/shared/lib";
 import { AuthorityButton } from "@/entities/menu-authority";
 import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
+import { Button, Input, Label } from "@common/components";
+
 import { PopupApi } from "../api/popup-service";
+import type { Popup } from "../model/popup-interface";
 import { columns } from "../model/table-columns";
-import type { Popup, PopupParams } from "../model/popup-interface";
 
 type PostingTarget = {
   pstgTrgtNm: string;
   pstgTrgtNo: number;
 };
 
+const DEFAULT_PARAMS = {
+  keyword: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
+
 function PopupPage() {
   const router = useRouter();
-
-  const [keyword, setKeyword] = useState("");
-  const [searchParams, setSearchParams] = useState<PopupParams>({
-    keyword: "",
-    sort: "regDt,desc",
-  });
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
+  const [keyword, setKeyword] = useState(params.keyword);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.POPUPS, searchParams, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.POPUPS, params],
     queryFn: () =>
       PopupApi.getPopupList({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
+        keyword: params.keyword,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
     placeholderData: keepPreviousData,
   });
 
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setPagination({
-      ...pagination,
-      pageIndex: 0,
-    });
-    setSearchParams({
-      ...searchParams,
-      keyword,
-    });
+    setParams({ keyword, page: 0 });
   };
 
   const handleReset = () => {
     setKeyword("");
-    setSearchParams({
-      ...searchParams,
-      keyword: "",
-    });
+    resetParams();
   };
 
   const handleRowClick = (row: Popup) => {
@@ -82,7 +87,7 @@ function PopupPage() {
       },
       manualPagination: true,
       getCoreRowModel: getCoreRowModel(),
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
       onRowSelectionChange: setRowSelection,
     },
     dataTableOptions: {
diff --git a/apps/cs/src/pages/privacylog/ui/privacylog-page.tsx b/apps/cs/src/pages/privacylog/ui/privacylog-page.tsx
index ffce1c92d..f5f26bb98 100644
--- a/apps/cs/src/pages/privacylog/ui/privacylog-page.tsx
+++ b/apps/cs/src/pages/privacylog/ui/privacylog-page.tsx
@@ -77,7 +77,7 @@ function PrivacyLogPage() {
     },
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,
diff --git a/apps/cs/src/pages/recent/ui/recent-page.tsx b/apps/cs/src/pages/recent/ui/recent-page.tsx
index a2b0eeb00..7d74cc714 100644
--- a/apps/cs/src/pages/recent/ui/recent-page.tsx
+++ b/apps/cs/src/pages/recent/ui/recent-page.tsx
@@ -1,15 +1,35 @@
 "use client";
 
-import dayjs from "dayjs";
 import { useState } from "react";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
+  type OnChangeFn,
   type PaginationState,
   type RowSelectionState,
 } from "@tanstack/react-table";
+import dayjs from "dayjs";
+
+import { ENDPOINT } from "@/shared/config";
+import {
+  useAlertStore,
+  useDataTable,
+  useSearchParamsState,
+  useSelectPrompt,
+} from "@/shared/lib";
+import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
+import { BoardApi } from "@/entities/board";
+import { AuthorityButton } from "@/entities/menu-authority";
+import {
+  type DeletePost,
+  deleteReasonMessages,
+  PostApi,
+  type RecentPost,
+} from "@/entities/post";
+import { SortSelect } from "@/widgets/post";
 import {
   Button,
   Input,
@@ -20,76 +40,72 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@common/components";
-import { SortSelect } from "@/widgets/post";
-import {
-  PostApi,
-  deleteReasonMessages,
-  type DeletePost,
-  type RecentPost,
-  type RecentPostParams,
-} from "@/entities/post";
-import { BoardApi } from "@/entities/board";
-import { AuthorityButton } from "@/entities/menu-authority";
-import { ENDPOINT } from "@/shared/config";
-import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
-import { useAlertStore, useSelectPrompt, useDataTable } from "@/shared/lib";
+
 import { columns } from "../model/table-columns";
+
 import { MovePostDialog } from "./move-post-dialog";
 
 type DateRange = {
-  from?: Date | undefined;
-  to?: Date | undefined;
+  from?: Date | null | undefined;
+  to?: Date | null | undefined;
 };
 
 const selectData = Object.entries(deleteReasonMessages).map(
   ([label, value]) => ({ label, value }),
 );
 
+const DEFAULT_PARAMS = {
+  keywordType: "",
+  keyword: "",
+  bbsId: "",
+  delYn: "N",
+  frDateYmd: "",
+  toDateYmd: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
+
+function parseDateRange(frDateYmd: string, toDateYmd: string): DateRange {
+  return {
+    from: frDateYmd ? dayjs(frDateYmd, "YYYYMMDD").toDate() : undefined,
+    to: toDateYmd ? dayjs(toDateYmd, "YYYYMMDD").toDate() : undefined,
+  };
+}
+
 function RecentPage() {
   const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
   const { prompt } = useSelectPrompt(selectData);
   const { confirm } = useConfirm();
   const alert = useAlertStore((state) => state.setMessage);
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
 
-  const [tableSort, setTableSort] = useState("regDt,desc");
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [presetDateRange, setPresetDateRange] = useState("");
-  const [dateRange, setDateRange] = useState<DateRange>({
-    from: undefined,
-    to: undefined,
-  });
-  const [keywordType, setKeywordType] = useState("");
-  const [keyword, setKeyword] = useState("");
-  const [bbsId, setBbsId] = useState<string | null>(null);
-  const [delYn, setDelYn] = useState("N");
-  const [searchParams, setSearchParams] = useState<RecentPostParams>({
-    keywordType: "",
-    keyword: "",
-    bbsId: null,
-    delYn: "N",
-    frDateYmd: "",
-    toDateYmd: "",
-    sort: "regDt,desc",
-  });
-  const [isDeletePostData, setIsDeletePostData] = useState(false);
+  const [dateRange, setDateRange] = useState<DateRange>(() =>
+    parseDateRange(params.frDateYmd, params.toDateYmd),
+  );
+  const [keywordType, setKeywordType] = useState(params.keywordType);
+  const [keyword, setKeyword] = useState(params.keyword);
+  const [bbsId, setBbsId] = useState(params.bbsId);
+  const [delYn, setDelYn] = useState(params.delYn);
 
   const query = useQuery({
-    queryKey: [
-      ENDPOINT.BOARD_SERVICE.POSTS,
-      searchParams,
-      pagination,
-      tableSort,
-    ],
+    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS, params],
     queryFn: () =>
       PostApi.getRecentPostList({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
-        sort: tableSort,
+        keywordType: params.keywordType,
+        keyword: params.keyword,
+        bbsId: params.bbsId ? parseInt(params.bbsId) : null,
+        delYn: params.delYn,
+        frDateYmd: params.frDateYmd,
+        toDateYmd: params.toDateYmd,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
     placeholderData: keepPreviousData,
   });
@@ -99,9 +115,22 @@ function RecentPage() {
     queryFn: () => BoardApi.getBoardList(),
   });
 
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
+  const isDeletePostData = params.delYn === "Y";
+
   const handleRowClick = (row: RecentPost) => {
+    const from = `${pathname}${searchParams?.toString() ? `?${searchParams.toString()}` : ""}`;
     router.push(
-      `/bbs/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`,
+      `/bbs/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}?from=${encodeURIComponent(from)}`,
     );
   };
 
@@ -116,7 +145,7 @@ function RecentPage() {
       manualPagination: true,
       enableMultiRowSelection: true,
       getCoreRowModel: getCoreRowModel(),
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
       onRowSelectionChange: setRowSelection,
     },
     dataTableOptions: {
@@ -129,43 +158,30 @@ function RecentPage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setIsDeletePostData(delYn === "Y");
-    setPagination({
-      ...pagination,
-      pageIndex: 0,
-    });
-    setSearchParams({
-      ...searchParams,
+    setParams({
       keywordType,
       keyword,
-      bbsId: bbsId ? parseInt(bbsId) : null,
+      bbsId,
       delYn,
       frDateYmd: dateRange?.from
         ? dayjs(dateRange.from).format("YYYYMMDD")
         : "",
       toDateYmd: dateRange?.to ? dayjs(dateRange.to).format("YYYYMMDD") : "",
+      page: 0,
     });
   };
 
   const handleReset = () => {
     setKeywordType("");
     setKeyword("");
-    setBbsId(null);
+    setBbsId("");
     setDelYn("N");
+    setPresetDateRange("");
     setDateRange({
       from: undefined,
       to: undefined,
     });
-    setSearchParams({
-      ...searchParams,
-      keywordType: "",
-      keyword: "",
-      bbsId: null,
-      delYn: "N",
-      frDateYmd: "",
-      toDateYmd: "",
-    });
-    setIsDeletePostData(false);
+    resetParams();
   };
 
   const handlePresetDateRange = (value: string) => {
@@ -273,10 +289,7 @@ function RecentPage() {
             setDateRange={handleDateRangeChange}
           />
           <Label className="ml-4 mr-2 text-label">게시판</Label>
-          <Select
-            value={bbsId?.toString() || ""}
-            onValueChange={(value) => setBbsId(value ? value : null)}
-          >
+          <Select value={bbsId} onValueChange={setBbsId}>
             <SelectTrigger className="w-[12rem]">
               <SelectValue placeholder="선택" />
             </SelectTrigger>
@@ -289,7 +302,7 @@ function RecentPage() {
             </SelectContent>
           </Select>
           <Label className="ml-4 mr-2 text-label">상태</Label>
-          <Select value={delYn} onValueChange={(value) => setDelYn(value)}>
+          <Select value={delYn} onValueChange={setDelYn}>
             <SelectTrigger className="w-[10rem]">
               <SelectValue placeholder="선택" />
             </SelectTrigger>
@@ -376,10 +389,10 @@ function RecentPage() {
                 </>
               )}
               <Select
-                value={table.getState().pagination.pageSize.toString()}
-                onValueChange={(value) => {
-                  table.setPageSize(parseInt(value));
-                }}
+                value={params.size.toString()}
+                onValueChange={(value) =>
+                  setParams({ size: parseInt(value), page: 0 })
+                }
               >
                 <SelectTrigger className="h-[3.2rem] w-[12rem]">
                   <SelectValue placeholder="페이지 크기" />
@@ -392,7 +405,10 @@ function RecentPage() {
                   ))}
                 </SelectContent>
               </Select>
-              <SortSelect value={tableSort} onValueChange={setTableSort} />
+              <SortSelect
+                value={params.sort}
+                onValueChange={(value) => setParams({ sort: value })}
+              />
             </div>
           </div>
         </div>
diff --git a/apps/cs/src/pages/role/model/table-columns.tsx b/apps/cs/src/pages/role/model/table-columns.tsx
index 71da16cfe..dcebbc736 100644
--- a/apps/cs/src/pages/role/model/table-columns.tsx
+++ b/apps/cs/src/pages/role/model/table-columns.tsx
@@ -3,13 +3,8 @@ import { useState } from "react";
 import type { Role } from "@/entities/role";
 import type { ColumnDef } from "@tanstack/react-table";
 import { MappingRoleDialog } from "../ui/mapping-role-dialog";
-import { Button } from "@common/components";
 
-export const createColumns = ({
-  deleteRole,
-}: {
-  deleteRole: (roleId: string) => void;
-}): ColumnDef<Role>[] => [
+export const createColumns = (): ColumnDef<Role>[] => [
   {
     id: "no",
     header: "NO",
@@ -44,18 +39,7 @@ export const createColumns = ({
   {
     id: "action",
     header: "관리",
-    cell: ({ row }) => (
-      <div className="flex items-center justify-center gap-2">
-        <MappingRoleButton roleId={row.original.roleId} />
-        <Button
-          size="sm"
-          color="red"
-          onClick={() => deleteRole(row.original.roleId)}
-        >
-          삭제
-        </Button>
-      </div>
-    ),
+    cell: ({ row }) => <MappingRoleButton roleId={row.original.roleId} />,
   },
 ];
 
diff --git a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
index e327fb88e..165f5c942 100644
--- a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
+++ b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
@@ -83,7 +83,7 @@ function MappingRoleDialog({
     );
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
     const keyword = formData.get("keyword") as string;
diff --git a/apps/cs/src/pages/role/ui/modify-page.tsx b/apps/cs/src/pages/role/ui/modify-page.tsx
index 37f00836f..52c67f4b0 100644
--- a/apps/cs/src/pages/role/ui/modify-page.tsx
+++ b/apps/cs/src/pages/role/ui/modify-page.tsx
@@ -24,13 +24,6 @@ function ModifyPage({ roleId }: { roleId: string }) {
     },
   });
 
-  const { mutateAsync: deleteRole } = useMutationWrapper({
-    mutationFn: () => RoleApi.deleteRole(roleId),
-    onSuccess: () => {
-      alert("삭제되었습니다.", () => router.push("/role"));
-    },
-  });
-
   const form = useForm<RoleFormData>({
     resolver: zodResolver(roleFormSchema),
     values: {
@@ -47,12 +40,7 @@ function ModifyPage({ roleId }: { roleId: string }) {
       <div className="card-header">
         <h3 className="text-2xl font-medium text-label">권한 수정</h3>
       </div>
-      <RoleForm
-        roleId={roleId}
-        form={form}
-        handleSave={updateRole}
-        handleDelete={deleteRole}
-      />
+      <RoleForm roleId={roleId} form={form} handleSave={updateRole} />
     </div>
   );
 }
diff --git a/apps/cs/src/pages/role/ui/role-form.tsx b/apps/cs/src/pages/role/ui/role-form.tsx
index bb67adb42..7a4653a9d 100644
--- a/apps/cs/src/pages/role/ui/role-form.tsx
+++ b/apps/cs/src/pages/role/ui/role-form.tsx
@@ -26,7 +26,6 @@ type RoleFormProps = {
   roleId?: string;
   form: UseFormReturn<RoleFormData>;
   handleSave: (data: RoleFormData) => Promise<void>;
-  handleDelete?: () => Promise<void>;
 };
 
 function RoleForm({ roleId, form, handleSave, ...props }: RoleFormProps) {
diff --git a/apps/cs/src/pages/role/ui/role-page.tsx b/apps/cs/src/pages/role/ui/role-page.tsx
index 97c3d615b..a6c7ec2d1 100644
--- a/apps/cs/src/pages/role/ui/role-page.tsx
+++ b/apps/cs/src/pages/role/ui/role-page.tsx
@@ -2,44 +2,67 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { useQuery } from "@tanstack/react-query";
-import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
-import { Button, Input, Label } from "@common/components";
-import { RoleApi, type Role, type RoleParams } from "@/entities/role";
+
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  type OnChangeFn,
+  type PaginationState,
+} from "@tanstack/react-table";
+
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
+import { useDataTable, useSearchParamsState } from "@/shared/lib";
+import { type Role, RoleApi } from "@/entities/role";
+import { Button, Input, Label } from "@common/components";
+
 import { createColumns } from "../model/table-columns";
 
+const DEFAULT_PARAMS = {
+  keywordType: "roleName",
+  keyword: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
+
 function RolePage() {
   const router = useRouter();
-  const alert = useAlertStore((state) => state.setMessage);
-
-  const [keyword, setKeyword] = useState("");
-  const [searchParams, setSearchParams] = useState<RoleParams>({
-    keyword: "",
-    sort: "regDt,desc",
-  });
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
+  const [keyword, setKeyword] = useState(params.keyword);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.ROLES, searchParams, pagination],
+    queryKey: [ENDPOINT.USER_SERVICE.ROLES, params],
     queryFn: () =>
       RoleApi.getRoles({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
+        keywordType: params.keywordType,
+        keyword: params.keyword,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
+    placeholderData: keepPreviousData,
   });
 
-  const { mutateAsync: deleteRole } = useMutationWrapper({
-    mutationFn: (roleId: string) => RoleApi.deleteRole(roleId),
-    onSuccess: () => {
-      alert("삭제되었습니다.", query.refetch);
-    },
-  });
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setParams({ keyword, page: 0 });
+  };
+
+  const handleReset = () => {
+    setKeyword("");
+    resetParams();
+  };
 
   const handleRowClick = (row: Role) => {
     router.push(`/role/register/${row.roleId}`);
@@ -48,15 +71,13 @@ function RolePage() {
   const { tableComponent } = useDataTable({
     query,
     tableOptions: {
-      columns: createColumns({
-        deleteRole,
-      }),
+      columns: createColumns(),
       state: {
         pagination,
       },
       manualPagination: true,
       getCoreRowModel: getCoreRowModel(),
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
     },
     dataTableOptions: {
       onRowClick: handleRowClick,
@@ -64,26 +85,6 @@ function RolePage() {
     },
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setPagination({
-      ...pagination,
-      pageIndex: 0,
-    });
-    setSearchParams({
-      ...searchParams,
-      keyword,
-    });
-  };
-
-  const handleReset = () => {
-    setKeyword("");
-    setSearchParams({
-      ...searchParams,
-      keyword: "",
-    });
-  };
-
   return (
     <div className="card card-border !mt-6">
       <div className="card card-border">
diff --git a/apps/cs/src/pages/site/ui/site-page.tsx b/apps/cs/src/pages/site/ui/site-page.tsx
index 046c80142..20a38e998 100644
--- a/apps/cs/src/pages/site/ui/site-page.tsx
+++ b/apps/cs/src/pages/site/ui/site-page.tsx
@@ -1,54 +1,65 @@
 "use client";
 
-import "@common/assets/styles/grid.css";
-
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
-import { Button, Input, Label } from "@common/components";
-import { SiteApi, type Site, type SiteParams } from "@/entities/site";
+import {
+  getCoreRowModel,
+  type OnChangeFn,
+  type PaginationState,
+} from "@tanstack/react-table";
+
 import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
+import { useDataTable, useSearchParamsState } from "@/shared/lib";
+import { type Site, SiteApi } from "@/entities/site";
+import { Button, Input, Label } from "@common/components";
+
 import { columns } from "../model/table-columns";
 
+const DEFAULT_PARAMS = {
+  siteNm: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
+
 function SitePage() {
   const router = useRouter();
-  const [siteNm, setSiteNm] = useState("");
-  const [searchParams, setSearchParams] = useState<SiteParams>({
-    siteNm: "",
-    sort: "regDt,desc",
-  });
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
+  const [siteNm, setSiteNm] = useState(params.siteNm);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.SITES, searchParams, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.SITES, params],
     queryFn: () =>
       SiteApi.getSiteList({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
+        siteNm: params.siteNm,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
     placeholderData: keepPreviousData,
   });
 
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setSearchParams({
-      ...searchParams,
-      siteNm,
-    });
+    setParams({ siteNm, page: 0 });
   };
 
   const handleReset = () => {
     setSiteNm("");
-    setSearchParams({
-      ...searchParams,
-      siteNm: "",
-    });
+    resetParams();
   };
 
   const handleRowClick = (row: Site) => {
@@ -62,7 +73,7 @@ function SitePage() {
       state: {
         pagination,
       },
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
       getCoreRowModel: getCoreRowModel(),
       manualPagination: true,
     },
diff --git a/apps/cs/src/pages/survey/ui/survey-page.tsx b/apps/cs/src/pages/survey/ui/survey-page.tsx
index bce024f4f..f3e0481d5 100644
--- a/apps/cs/src/pages/survey/ui/survey-page.tsx
+++ b/apps/cs/src/pages/survey/ui/survey-page.tsx
@@ -2,19 +2,23 @@
 
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
+  type OnChangeFn,
   type PaginationState,
   type RowSelectionState,
 } from "@tanstack/react-table";
-import { Button, Input, Label } from "@common/components";
-import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
-import { AuthorityButton } from "@/entities/menu-authority";
+
 import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
+import { useDataTable, useSearchParamsState } from "@/shared/lib";
+import { AuthorityButton } from "@/entities/menu-authority";
+import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
+import { Button, Input, Label } from "@common/components";
+
 import { SurveyApi } from "../api/survey-service";
-import type { Survey, SurveyParams } from "../model/survey-interface";
+import type { Survey } from "../model/survey-interface";
 import { columns } from "../model/survey-table-columns";
 
 type PostingTarget = {
@@ -22,32 +26,53 @@ type PostingTarget = {
   pstgTrgtNo: number;
 };
 
+const DEFAULT_PARAMS = {
+  srvyTtl: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
+
 function SurveyPage() {
   const router = useRouter();
-
-  const [srvyTtl, setSrvyTtl] = useState("");
-  const [searchParams, setSearchParams] = useState<SurveyParams>({
-    srvyTtl: "",
-    sort: "regDt,desc",
-  });
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
+  const [srvyTtl, setSrvyTtl] = useState(params.srvyTtl);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.SURVEY, searchParams, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.SURVEY, params],
     queryFn: () =>
       SurveyApi.getSurveyList({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
+        srvyTtl: params.srvyTtl,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
     placeholderData: keepPreviousData,
   });
 
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setParams({ srvyTtl, page: 0 });
+  };
+
+  const handleReset = () => {
+    setSrvyTtl("");
+    resetParams();
+  };
+
   const handleRowClick = (row: Survey) => {
     router.push(`/survey/${row.srvySn}`);
   };
@@ -62,7 +87,7 @@ function SurveyPage() {
       },
       manualPagination: true,
       getCoreRowModel: getCoreRowModel(),
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
       onRowSelectionChange: setRowSelection,
     },
     dataTableOptions: {
@@ -71,26 +96,6 @@ function SurveyPage() {
     },
   });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setPagination({
-      ...pagination,
-      pageIndex: 0,
-    });
-    setSearchParams({
-      ...searchParams,
-      srvyTtl,
-    });
-  };
-
-  const handleReset = () => {
-    setSrvyTtl("");
-    setSearchParams({
-      ...searchParams,
-      srvyTtl: "",
-    });
-  };
-
   useEffect(() => {
     const postingTargets = table
       .getFilteredSelectedRowModel()
diff --git a/apps/cs/src/pages/template/ui/template-page.tsx b/apps/cs/src/pages/template/ui/template-page.tsx
index de3dca8ff..5db3f1572 100644
--- a/apps/cs/src/pages/template/ui/template-page.tsx
+++ b/apps/cs/src/pages/template/ui/template-page.tsx
@@ -2,58 +2,70 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
-import { Button, Input, Label } from "@common/components";
-import { CodeSelect } from "@/entities/code";
+import {
+  getCoreRowModel,
+  type OnChangeFn,
+  type PaginationState,
+} from "@tanstack/react-table";
+
 import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
+import { useDataTable, useSearchParamsState } from "@/shared/lib";
+import { CodeSelect } from "@/entities/code";
+import { Button, Input, Label } from "@common/components";
+
 import { TemplateApi } from "../api/template-service";
+import type { Template } from "../model/template-interface";
 import { columns } from "../model/template-table-columns";
-import type { Template, TemplateParams } from "../model/template-interface";
+
+const DEFAULT_PARAMS = {
+  keyword: "",
+  tmpltSeCd: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
 
 function TemplatePage() {
   const router = useRouter();
-  const [keyword, setKeyword] = useState("");
-  const [tmpltSeCd, setTmpltSeCd] = useState("");
-  const [searchParams, setSearchParams] = useState<TemplateParams>({
-    keyword: "",
-    tmpltSeCd: "",
-    sort: "regDt,desc",
-  });
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
+  const [keyword, setKeyword] = useState(params.keyword);
+  const [tmpltSeCd, setTmpltSeCd] = useState(params.tmpltSeCd);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.TEMPLATE, searchParams, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.TEMPLATE, params],
     queryFn: () =>
       TemplateApi.getTemplateList({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
+        keyword: params.keyword,
+        tmpltSeCd: params.tmpltSeCd,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
     placeholderData: keepPreviousData,
   });
 
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setSearchParams({
-      ...searchParams,
-      keyword,
-      tmpltSeCd,
-    });
+    setParams({ keyword, tmpltSeCd, page: 0 });
   };
 
   const handleReset = () => {
     setKeyword("");
     setTmpltSeCd("");
-    setSearchParams({
-      ...searchParams,
-      keyword: "",
-      tmpltSeCd: "",
-    });
+    resetParams();
   };
 
   const handleRowClick = (row: Template) => {
@@ -67,7 +79,7 @@ function TemplatePage() {
       state: {
         pagination,
       },
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
       getCoreRowModel: getCoreRowModel(),
       manualPagination: true,
     },
diff --git a/apps/cs/src/pages/terms/ui/terms-page.tsx b/apps/cs/src/pages/terms/ui/terms-page.tsx
index 08a6e2080..73b6b0d16 100644
--- a/apps/cs/src/pages/terms/ui/terms-page.tsx
+++ b/apps/cs/src/pages/terms/ui/terms-page.tsx
@@ -2,63 +2,70 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
-import { Button, Input, Label } from "@common/components";
-import { CodeSelect } from "@/entities/code";
+import {
+  getCoreRowModel,
+  type OnChangeFn,
+  type PaginationState,
+} from "@tanstack/react-table";
+
 import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
+import { useDataTable, useSearchParamsState } from "@/shared/lib";
+import { CodeSelect } from "@/entities/code";
+import { Button, Input, Label } from "@common/components";
+
 import { TermsApi } from "../api/terms-service";
+import type { Terms } from "../model/terms-interface";
 import { columns } from "../model/terms-table-columns";
-import type { TermsParams, Terms } from "../model/terms-interface";
+
+const DEFAULT_PARAMS = {
+  keyword: "",
+  trmsSeCd: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
 
 function TermsPage() {
   const router = useRouter();
-
-  const [keyword, setKeyword] = useState("");
-  const [trmsSeCd, setTrmsSeCd] = useState("");
-  const [searchParams, setSearchParams] = useState<TermsParams>({
-    keyword: "",
-    trmsSeCd: "",
-    sort: "regDt,desc",
-  });
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
+  const [keyword, setKeyword] = useState(params.keyword);
+  const [trmsSeCd, setTrmsSeCd] = useState(params.trmsSeCd);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.TERMS, searchParams, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.TERMS, params],
     queryFn: () =>
       TermsApi.getTermsList({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
+        keyword: params.keyword,
+        trmsSeCd: params.trmsSeCd,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
     placeholderData: keepPreviousData,
   });
 
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setPagination({
-      ...pagination,
-      pageIndex: 0,
-    });
-    setSearchParams({
-      ...searchParams,
-      keyword,
-      trmsSeCd,
-    });
+    setParams({ keyword, trmsSeCd, page: 0 });
   };
 
   const handleReset = () => {
     setKeyword("");
     setTrmsSeCd("");
-    setSearchParams({
-      ...searchParams,
-      keyword: "",
-      trmsSeCd: "",
-    });
+    resetParams();
   };
 
   const handleRowClick = (row: Terms) => {
@@ -72,7 +79,7 @@ function TermsPage() {
       state: {
         pagination,
       },
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
       getCoreRowModel: getCoreRowModel(),
       manualPagination: true,
     },
diff --git a/apps/cs/src/pages/user-statistics/ui/user-statistics-page.tsx b/apps/cs/src/pages/user-statistics/ui/user-statistics-page.tsx
index b4c821551..d562d0103 100644
--- a/apps/cs/src/pages/user-statistics/ui/user-statistics-page.tsx
+++ b/apps/cs/src/pages/user-statistics/ui/user-statistics-page.tsx
@@ -148,7 +148,7 @@ function UserStatisticsPage() {
     setPresetDateRange("");
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     const params: ConnectionStatisticsParams = {
       keywordType,
diff --git a/apps/cs/src/pages/users/index.ts b/apps/cs/src/pages/users/index.ts
index e518fb440..c4c302b85 100644
--- a/apps/cs/src/pages/users/index.ts
+++ b/apps/cs/src/pages/users/index.ts
@@ -1,3 +1,3 @@
-export { UsersPage } from "./ui/users-page";
 export { CreatePage } from "./ui/create-page";
 export { UserDetail } from "./ui/user-detail";
+export { UsersPage } from "./ui/users-page";
diff --git a/apps/cs/src/pages/users/model/table-columns.tsx b/apps/cs/src/pages/users/model/table-columns.tsx
index 1aad6de27..fbb05db39 100644
--- a/apps/cs/src/pages/users/model/table-columns.tsx
+++ b/apps/cs/src/pages/users/model/table-columns.tsx
@@ -1,5 +1,6 @@
-import dayjs from "dayjs";
 import type { ColumnDef } from "@tanstack/react-table";
+import dayjs from "dayjs";
+
 import {
   USER_STATE_CODE,
   type UserListResponse,
diff --git a/apps/cs/src/pages/users/ui/agency-search-dialog.tsx b/apps/cs/src/pages/users/ui/agency-search-dialog.tsx
index 9759d42be..5b56ad2e9 100644
--- a/apps/cs/src/pages/users/ui/agency-search-dialog.tsx
+++ b/apps/cs/src/pages/users/ui/agency-search-dialog.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+
 import {
   keepPreviousData,
   useQuery,
@@ -9,25 +10,26 @@ import {
   getPaginationRowModel,
   type PaginationState,
 } from "@tanstack/react-table";
+
+import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import {
+  type LwpoCode,
+  LwpoCodeApi,
+  type LwpoCodeParams,
+} from "@/entities/code";
+import {
+  Button,
   Dialog,
+  DialogClose,
   DialogContent,
-  DialogHeader,
   DialogFooter,
+  DialogHeader,
   DialogTitle,
   DialogTrigger,
-  DialogClose,
-  Button,
   Input,
   Label,
 } from "@common/components";
-import {
-  LwpoCodeApi,
-  type LwpoCode,
-  type LwpoCodeParams,
-} from "@/entities/code";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
 
 interface AgencySearchDialogProps {
   onSelectAgency: (data: { lwpoCd: string; lwpoCdNm: string }) => void;
diff --git a/apps/cs/src/pages/users/ui/create-page.tsx b/apps/cs/src/pages/users/ui/create-page.tsx
index 2d55a1cd2..33ec5ec0b 100644
--- a/apps/cs/src/pages/users/ui/create-page.tsx
+++ b/apps/cs/src/pages/users/ui/create-page.tsx
@@ -1,10 +1,13 @@
 "use client";
 
-import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
+import { useRouter } from "next/navigation";
+
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutationWrapper, useAlertStore } from "@/shared/lib";
-import { UserApi, userSaveSchema, type UserSaveData } from "@/entities/user";
+
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { UserApi, type UserSaveData, userSaveSchema } from "@/entities/user";
+
 import { UsersForm } from "./users-form";
 
 function CreatePage() {
diff --git a/apps/cs/src/pages/users/ui/modify-page.tsx b/apps/cs/src/pages/users/ui/modify-page.tsx
index fc93e4b05..b9b83b800 100644
--- a/apps/cs/src/pages/users/ui/modify-page.tsx
+++ b/apps/cs/src/pages/users/ui/modify-page.tsx
@@ -1,17 +1,20 @@
 "use client";
 
 import React from "react";
-import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
+import { useRouter } from "next/navigation";
+
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import {
   UserApi,
-  userUpdateSchema,
   type UserUpdateData,
+  userUpdateSchema,
 } from "@/entities/user";
-import { ENDPOINT } from "@/shared/config";
-import { useMutationWrapper, useAlertStore } from "@/shared/lib";
+
 import { UsersForm } from "./users-form";
 
 interface ModifyPageProps {
@@ -47,6 +50,7 @@ export function ModifyPage({ userUnqId }: ModifyPageProps) {
       aprvYn: userData?.aprvYn ?? "",
       expryYmd: userData?.expryYmd ?? "",
       instSeCd: userData?.instSeCd ?? "",
+      instSeNm: userData?.instSeNm ?? "",
       dtlInstCd: userData?.dtlInstCd ?? "",
       aprvYmd: userData?.aprvYmd ?? "",
       enoCd: userData?.enoCd ?? "",
diff --git a/apps/cs/src/pages/users/ui/user-detail.tsx b/apps/cs/src/pages/users/ui/user-detail.tsx
index fbfa016c2..1438c4864 100644
--- a/apps/cs/src/pages/users/ui/user-detail.tsx
+++ b/apps/cs/src/pages/users/ui/user-detail.tsx
@@ -1,9 +1,14 @@
 "use client";
 
-import dayjs from "dayjs";
 import { usePathname, useRouter } from "next/navigation";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import dayjs from "dayjs";
+
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { PasswordResetDialog, USER_STATE_CODE, UserApi } from "@/entities/user";
 import {
   Button,
   Table,
@@ -12,9 +17,6 @@ import {
   TableHead,
   TableRow,
 } from "@common/components";
-import { USER_STATE_CODE, UserApi, PasswordResetDialog } from "@/entities/user";
-import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 
 function UserDetail({ userUnqId }: { userUnqId: string }) {
   const router = useRouter();
diff --git a/apps/cs/src/pages/users/ui/users-form.tsx b/apps/cs/src/pages/users/ui/users-form.tsx
index 7920ce758..4e11b958c 100644
--- a/apps/cs/src/pages/users/ui/users-form.tsx
+++ b/apps/cs/src/pages/users/ui/users-form.tsx
@@ -1,42 +1,45 @@
-import { useState, useMemo, useCallback } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
-  useWatch,
   type Path,
   type PathValue,
   type UseFormReturn,
+  useWatch,
 } from "react-hook-form";
+
 import { useQuery } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import {
-  Button,
-  Input,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@common/components";
-import { FormWrapper } from "@/widgets/form-wrapper";
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/shared/ui/form";
 import { CodeApi, CodeSelect } from "@/entities/code";
 import {
   UserApi,
   type UserSaveData,
   type UserUpdateData,
 } from "@/entities/user";
+import { FormWrapper } from "@/widgets/form-wrapper";
 import {
-  FormField,
-  FormItem,
-  FormControl,
-  FormMessage,
-} from "@/shared/ui/form";
-import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
-import { ZipSearchDialog } from "./zip-search-dialog";
+  Button,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@common/components";
+
 import { AgencySearchDialog } from "./agency-search-dialog";
+import { ZipSearchDialog } from "./zip-search-dialog";
 
 type UsersFormProps<T extends UserSaveData | UserUpdateData> = {
   userId?: string;
@@ -61,7 +64,6 @@ function UsersForm<T extends UserSaveData | UserUpdateData>({
   const [isValidUserId, setIsValidUserId] = useState(false);
   const [isValidEmail, setIsValidEmail] = useState(false);
   const [passwordMatch, setPasswordMatch] = useState(true);
-  const [instSeCdNm, setInstSeCdNm] = useState("");
 
   const { data: authSeCd } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.CODE, "AUTHSECD"],
@@ -102,35 +104,35 @@ function UsersForm<T extends UserSaveData | UserUpdateData>({
       return (
         authSeCd?.filter(
           (code) =>
-            code.lwpoCd === "ROLE_USER1" ||
-            code.lwpoCd === "ROLE_USER2" ||
-            code.lwpoCd === "ROLE_USER3",
+            code.lwpoCd === "ROLE_USER01" ||
+            code.lwpoCd === "ROLE_USER02" ||
+            code.lwpoCd === "ROLE_USER03",
         ) ?? []
       );
     if (watchOgdpSeCd === "3" || watchOgdpSeCd === "4")
       return (
         authSeCd?.filter(
           (code) =>
-            code.lwpoCd === "ROLE_USER4" || code.lwpoCd === "ROLE_USER5",
+            code.lwpoCd === "ROLE_USER04" || code.lwpoCd === "ROLE_USER05",
         ) ?? []
       );
     return [];
   }, [authSeCd, watchOgdpSeCd]);
 
   const laeSeCdSelectData = useMemo(() => {
-    if (watchDtlInstCd === "ROLE_USER1")
+    if (watchDtlInstCd === "ROLE_USER01")
       return laeSeCd?.filter((code) => code.lwpoCd === "G102") ?? [];
-    if (watchDtlInstCd === "ROLE_USER2")
+    if (watchDtlInstCd === "ROLE_USER02")
       return laeSeCd?.filter((code) => code.lwpoCd === "G101") ?? [];
-    if (watchDtlInstCd === "ROLE_USER3")
+    if (watchDtlInstCd === "ROLE_USER03")
       return laeSeCd?.filter((code) => code.lwpoCd.startsWith("G2")) ?? [];
-    if (watchDtlInstCd === "ROLE_USER4")
+    if (watchDtlInstCd === "ROLE_USER04")
       return (
         laeSeCd?.filter(
           (code) => code.lwpoCd.startsWith("G3") && code.lwpoCd.length === 4,
         ) ?? []
       );
-    if (watchDtlInstCd === "ROLE_USER5")
+    if (watchDtlInstCd === "ROLE_USER05")
       return (
         laeSeCd?.filter(
           (code) => code.lwpoCd.startsWith("G3") && code.lwpoCd.length === 7,
@@ -163,7 +165,10 @@ function UsersForm<T extends UserSaveData | UserUpdateData>({
         "instSeCd" as Path<T>,
         data.lwpoCd as PathValue<T, Path<T>>,
       );
-      setInstSeCdNm(data.lwpoCdNm);
+      form.setValue(
+        "instSeNm" as Path<T>,
+        data.lwpoCdNm as PathValue<T, Path<T>>,
+      );
     },
     [form],
   );
@@ -622,8 +627,8 @@ function UsersForm<T extends UserSaveData | UserUpdateData>({
                           onValueChange={field.onChange}
                           disabled={
                             !(
-                              watchDtlInstCd === "ROLE_USER4" ||
-                              watchDtlInstCd === "ROLE_USER5"
+                              watchDtlInstCd === "ROLE_USER04" ||
+                              watchDtlInstCd === "ROLE_USER05"
                             )
                           }
                         >
@@ -650,10 +655,21 @@ function UsersForm<T extends UserSaveData | UserUpdateData>({
               <TableHead>기관/업체명</TableHead>
               <TableCell className="border">
                 <div className="flex items-center gap-2">
-                  <Input
-                    value={instSeCdNm}
-                    className="w-[24rem] !text-[1.3rem]"
-                    disabled
+                  <FormField
+                    control={form.control}
+                    name={"instSeNm" as Path<T>}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Input
+                            {...field}
+                            value={field.value ?? ""}
+                            className="w-[24rem] !text-[1.3rem]"
+                            disabled
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
                   />
                   <AgencySearchDialog onSelectAgency={handleAgencySelect} />
                 </div>
diff --git a/apps/cs/src/pages/users/ui/users-page.tsx b/apps/cs/src/pages/users/ui/users-page.tsx
index 5362b8b42..cabf8eb42 100644
--- a/apps/cs/src/pages/users/ui/users-page.tsx
+++ b/apps/cs/src/pages/users/ui/users-page.tsx
@@ -1,10 +1,21 @@
 "use client";
 
-import dayjs from "dayjs";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { useQuery } from "@tanstack/react-query";
-import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  type OnChangeFn,
+  type PaginationState,
+} from "@tanstack/react-table";
+import dayjs from "dayjs";
+
+import { ENDPOINT } from "@/shared/config";
+import { useDataTable, useSearchParamsState } from "@/shared/lib";
+import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
+import { CodeApi } from "@/entities/code";
+import { UserApi, type UserListResponse } from "@/entities/user";
 import {
   Button,
   Checkbox,
@@ -16,50 +27,47 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@common/components";
-import { CodeApi } from "@/entities/code";
-import {
-  UserApi,
-  type UserListResponse,
-  type UserSearchParams,
-} from "@/entities/user";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
-import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
+
 import { columns } from "../model/table-columns";
 
 type DateRange = {
-  from?: Date | undefined;
-  to?: Date | undefined;
+  from?: Date | null;
+  to?: Date | null;
 };
 
+const DEFAULT_PARAMS = {
+  keywordType: "all",
+  keyword: "",
+  userStateCode: "",
+  aprvYn: "",
+  grpId: "",
+  frDateYmd: "",
+  toDateYmd: "",
+  sort: "regDt,desc",
+  page: 0,
+  size: 10,
+};
+
+function parseDateRange(frDateYmd: string, toDateYmd: string): DateRange {
+  return {
+    from: frDateYmd ? dayjs(frDateYmd, "YYYYMMDD").toDate() : undefined,
+    to: toDateYmd ? dayjs(toDateYmd, "YYYYMMDD").toDate() : undefined,
+  };
+}
+
 function UsersPage() {
   const router = useRouter();
-
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  const { params, setParams, resetParams } =
+    useSearchParamsState(DEFAULT_PARAMS);
   const [presetDateRange, setPresetDateRange] = useState("");
-  const [dateRange, setDateRange] = useState<DateRange>({
-    from: undefined,
-    to: undefined,
-  });
-  const [keywordType, setKeywordType] = useState("all");
-  const [keyword, setKeyword] = useState("");
-  const [userStateCode, setUserStateCode] = useState("");
-  const [aprvYn, setAprvYn] = useState("");
-  const [grpId, setGrpId] = useState("");
-
-  const [searchParams, setSearchParams] = useState<UserSearchParams>({
-    keywordType: "all",
-    keyword: "",
-    userStateCode: "",
-    aprvYn: "",
-    grpId: "",
-    frDateYmd: "",
-    toDateYmd: "",
-    sort: "regDt,desc",
-  });
+  const [dateRange, setDateRange] = useState<DateRange>(() =>
+    parseDateRange(params.frDateYmd, params.toDateYmd),
+  );
+  const [keywordType, setKeywordType] = useState(params.keywordType);
+  const [keyword, setKeyword] = useState(params.keyword);
+  const [userStateCode, setUserStateCode] = useState(params.userStateCode);
+  const [aprvYn, setAprvYn] = useState(params.aprvYn);
+  const [grpId, setGrpId] = useState(params.grpId);
 
   const { data: userSttsStats } = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.USERS, "userStatusStatistics"],
@@ -67,13 +75,21 @@ function UsersPage() {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.USERS, searchParams, pagination],
+    queryKey: [ENDPOINT.USER_SERVICE.USERS, params],
     queryFn: () =>
       UserApi.findPageUser({
-        ...searchParams,
-        page: pagination.pageIndex,
-        size: pagination.pageSize,
+        keywordType: params.keywordType,
+        keyword: params.keyword,
+        userStateCode: params.userStateCode,
+        aprvYn: params.aprvYn,
+        grpId: params.grpId,
+        frDateYmd: params.frDateYmd,
+        toDateYmd: params.toDateYmd,
+        sort: params.sort,
+        page: params.page,
+        size: params.size,
       }),
+    placeholderData: keepPreviousData,
   });
 
   const { data: userStateCodes } = useQuery({
@@ -81,6 +97,16 @@ function UsersPage() {
     queryFn: () => CodeApi.getCode("USERSTTS"),
   });
 
+  const pagination: PaginationState = {
+    pageIndex: params.page,
+    pageSize: params.size,
+  };
+
+  const handlePaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setParams({ page: next.pageIndex, size: next.pageSize });
+  };
+
   const handleRowClick = (row: UserListResponse) => {
     router.push(`/users/${row.userUnqId}`);
   };
@@ -94,7 +120,7 @@ function UsersPage() {
       },
       manualPagination: true,
       getCoreRowModel: getCoreRowModel(),
-      onPaginationChange: setPagination,
+      onPaginationChange: handlePaginationChange,
     },
     dataTableOptions: {
       onRowClick: handleRowClick,
@@ -104,12 +130,7 @@ function UsersPage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setPagination({
-      ...pagination,
-      pageIndex: 0,
-    });
-    setSearchParams({
-      ...searchParams,
+    setParams({
       keywordType,
       keyword,
       userStateCode,
@@ -119,6 +140,7 @@ function UsersPage() {
         ? dayjs(dateRange.from).format("YYYYMMDD")
         : "",
       toDateYmd: dateRange?.to ? dayjs(dateRange.to).format("YYYYMMDD") : "",
+      page: 0,
     });
   };
 
@@ -128,20 +150,12 @@ function UsersPage() {
     setUserStateCode("");
     setAprvYn("");
     setGrpId("");
+    setPresetDateRange("");
     setDateRange({
       from: undefined,
       to: undefined,
     });
-    setSearchParams({
-      ...searchParams,
-      keywordType: "all",
-      keyword: "",
-      userStateCode: "",
-      aprvYn: "",
-      grpId: "",
-      frDateYmd: "",
-      toDateYmd: "",
-    });
+    resetParams();
   };
 
   const handlePresetDateRange = (value: string) => {
@@ -348,12 +362,9 @@ function UsersPage() {
             <h3 className="text-2xl font-medium text-label">회원 목록</h3>
             <div className="flex gap-2">
               <Select
-                defaultValue="regDt,desc"
+                value={params.sort}
                 onValueChange={(value) => {
-                  setSearchParams({
-                    ...searchParams,
-                    sort: value,
-                  });
+                  setParams({ sort: value });
                 }}
               >
                 <SelectTrigger>
diff --git a/apps/cs/src/pages/users/ui/zip-search-dialog.tsx b/apps/cs/src/pages/users/ui/zip-search-dialog.tsx
index bf2160ea8..de5ae9696 100644
--- a/apps/cs/src/pages/users/ui/zip-search-dialog.tsx
+++ b/apps/cs/src/pages/users/ui/zip-search-dialog.tsx
@@ -1,4 +1,5 @@
-import { useState, useRef, useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
+
 import {
   keepPreviousData,
   useQuery,
@@ -9,21 +10,23 @@ import {
   getPaginationRowModel,
   type PaginationState,
 } from "@tanstack/react-table";
+
+import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import {
+  Button,
   Dialog,
+  DialogClose,
   DialogContent,
-  DialogHeader,
   DialogFooter,
+  DialogHeader,
   DialogTitle,
   DialogTrigger,
-  DialogClose,
-  Button,
   Input,
   Label,
 } from "@common/components";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
-import { ZipApi, type Zip, type ZipSearchParams } from "../api/zip-service";
+
+import { type Zip, ZipApi, type ZipSearchParams } from "../api/zip-service";
 
 interface ZipSearchDialogProps {
   onSelectAddress: (data: { zip: string; addr: string }) => void;
diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts
index db8eda72c..e577c5bb1 100644
--- a/apps/cs/src/shared/config/api.ts
+++ b/apps/cs/src/shared/config/api.ts
@@ -66,6 +66,12 @@ export const ENDPOINT = {
     POST_EVALUATION: "/board-service/api/v1/pstEvl",
     STATISTICS: "/board-service/api/v1/stat/bbs",
   },
+  NTFTALK_SERVICE: {
+    NTFTALK_VAR: "/ntftalk-service/api/v1/ntftalk-var",
+    NTFTALK_TEMP: "/ntftalk-service/api/v1/ntftalk-temp",
+    NTFTALK_BIZTALK: "/ntftalk-service/api/v1/ntftalk-biztalk",
+    MMT_LOG_HISTORY: "/ntftalk-service/api/v1/ata/mmt-log-history",
+  },
 };
 
 export const JWT_EXPIRATION_TIME = 1800000;
diff --git a/apps/cs/src/shared/config/auth.ts b/apps/cs/src/shared/config/auth.ts
new file mode 100644
index 000000000..d903525af
--- /dev/null
+++ b/apps/cs/src/shared/config/auth.ts
@@ -0,0 +1,16 @@
+import type { AuthConfig } from "@common/auth";
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  COOKIE_DOMAIN,
+  REFRESH_TOKEN,
+} from "./env";
+
+export const authConfig: AuthConfig = {
+  authUserId: AUTH_USER_ID || "token-id",
+  claimName: CLAIM_NAME || "Authorization",
+  cookieDomain: COOKIE_DOMAIN,
+  accessToken: ACCESS_TOKEN || "access-token",
+  refreshToken: REFRESH_TOKEN || "refresh-token",
+};
diff --git a/apps/cs/src/shared/config/env.ts b/apps/cs/src/shared/config/env.ts
index 95d1a4477..f352e1bd7 100644
--- a/apps/cs/src/shared/config/env.ts
+++ b/apps/cs/src/shared/config/env.ts
@@ -1,7 +1,7 @@
 export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
 export const PROXY_HOST =
   process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL;
+export const SERVER_API_URL = process.env.SERVER_API_URL;
 export const AUTH_LOGIN_REDIRECT_URL =
   process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "CS";
@@ -11,3 +11,5 @@ 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 TINY_BASE_URL = process.env.NEXT_PUBLIC_TINY_BASE_URL;
+export const COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
diff --git a/apps/cs/src/shared/lib/index.ts b/apps/cs/src/shared/lib/index.ts
index 5ac79bf08..9dba3572a 100644
--- a/apps/cs/src/shared/lib/index.ts
+++ b/apps/cs/src/shared/lib/index.ts
@@ -1,8 +1,9 @@
-export { getCookie, setCookie, removeCookie } from "./cookie";
-export { useMutationWrapper } from "./use-mutation-wrapper";
+export { getCookie, removeCookie, setCookie } from "./cookie";
 export { useAlertStore } from "./use-alert-store";
 export { useDataTable } from "./use-data-table";
 export { useMenuStore } from "./use-menu-store";
-export { useUserStore } from "./use-user-store";
+export { useMutationWrapper } from "./use-mutation-wrapper";
 export { usePrompt } from "./use-prompt";
+export { useSearchParamsState } from "./use-search-params-state";
 export { useSelectPrompt } from "./use-select-prompt";
+export { useUserStore } from "./use-user-store";
diff --git a/apps/cs/src/shared/lib/use-search-params-state.ts b/apps/cs/src/shared/lib/use-search-params-state.ts
new file mode 100644
index 000000000..9ced811e9
--- /dev/null
+++ b/apps/cs/src/shared/lib/use-search-params-state.ts
@@ -0,0 +1,90 @@
+"use client";
+
+import { useCallback, useMemo, useRef } from "react";
+import { useSearchParams } from "next/navigation";
+
+/**
+ * 조회 조건을 URL searchParams와 동기화하는 훅.
+ *
+ * - URL이 단일 소스 오브 트루스(SSOT)이며, 새로고침·뒤로가기 시에도 조건이 유지된다.
+ * - 기본값과 동일한 값은 URL에서 제거해 쿼리스트링을 깨끗하게 유지한다.
+ * - `window.history.replaceState` 기반 shallow 갱신으로 서버 라운드트립 없이 동작한다.
+ * - 숫자 기본값이 주어진 키는 자동으로 `Number` 파싱한다.
+ *
+ * @example
+ * const { params, setParams, resetParams } = useSearchParamsState({
+ *   keyword: "",
+ *   page: 0,
+ *   size: 10,
+ * });
+ */
+export function useSearchParamsState<T extends Record<string, ParamValue>>(
+  defaults: T,
+): UseSearchParamsStateReturn<T> {
+  const searchParams = useSearchParams();
+  const defaultsRef = useRef(defaults);
+
+  const params = useMemo(
+    () => parseParams(searchParams, defaultsRef.current),
+    [searchParams],
+  );
+
+  const setParams = useCallback((partial: Partial<T>) => {
+    const next = new URLSearchParams(window.location.search);
+    for (const [key, value] of Object.entries(partial)) {
+      if (value === undefined || value === defaultsRef.current[key]) {
+        next.delete(key);
+      } else {
+        next.set(key, String(value));
+      }
+    }
+    replaceUrl(next);
+  }, []);
+
+  const resetParams = useCallback(() => {
+    const next = new URLSearchParams(window.location.search);
+    for (const key of Object.keys(defaultsRef.current)) {
+      next.delete(key);
+    }
+    replaceUrl(next);
+  }, []);
+
+  return { params, setParams, resetParams };
+}
+
+function parseParams<T extends Record<string, ParamValue>>(
+  searchParams: ReturnType<typeof useSearchParams>,
+  defaults: T,
+): T {
+  const result = { ...defaults };
+
+  for (const key of Object.keys(defaults) as (keyof T)[]) {
+    const raw = searchParams?.get(key as string) ?? null;
+    if (raw === null) continue;
+
+    if (typeof defaults[key] === "number") {
+      const parsed = Number(raw);
+      if (!Number.isNaN(parsed)) result[key] = parsed as T[keyof T];
+    } else {
+      result[key] = raw as T[keyof T];
+    }
+  }
+
+  return result;
+}
+
+function replaceUrl(searchParams: URLSearchParams) {
+  const qs = searchParams.toString();
+  const url = qs
+    ? `${window.location.pathname}?${qs}`
+    : window.location.pathname;
+  window.history.replaceState(null, "", url);
+}
+
+type ParamValue = string | number | null;
+
+interface UseSearchParamsStateReturn<T> {
+  params: T;
+  setParams: (partial: Partial<T>) => void;
+  resetParams: () => void;
+}
diff --git a/apps/cs/src/shared/ui/info-tooltip.tsx b/apps/cs/src/shared/ui/info-tooltip.tsx
index 2c43ecf9c..fc603e4ef 100644
--- a/apps/cs/src/shared/ui/info-tooltip.tsx
+++ b/apps/cs/src/shared/ui/info-tooltip.tsx
@@ -6,7 +6,7 @@ function InfoTooltip({ text }: { text: string }) {
       <TooltipTrigger asChild>
         <i className="diveicon di-info-circle" />
       </TooltipTrigger>
-      <TooltipContent>
+      <TooltipContent className="border border-border p-2">
         <p>
           {text.split("\n").map((line, idx) => (
             <span key={idx}>
diff --git a/apps/cs/src/shared/ui/input-date-range-picker.tsx b/apps/cs/src/shared/ui/input-date-range-picker.tsx
index 1ee2bc5e1..ec7c5b5b4 100644
--- a/apps/cs/src/shared/ui/input-date-range-picker.tsx
+++ b/apps/cs/src/shared/ui/input-date-range-picker.tsx
@@ -1,20 +1,24 @@
-import { InputDatePicker } from "@common/components";
 import { useEffect } from "react";
+
+import { InputDatePicker } from "@common/components";
+
 import { useAlertStore } from "../lib";
 
 type DateRange = {
-  from?: Date;
-  to?: Date;
+  from?: Date | null;
+  to?: Date | null;
 };
 
 type InputDateRangePickerProps = {
   dateRange: DateRange;
   setDateRange: (dateRange: DateRange) => void;
+  disabled?: boolean;
 };
 
 function InputDateRangePicker({
   dateRange,
   setDateRange,
+  disabled,
 }: InputDateRangePickerProps) {
   const alert = useAlertStore((state) => state.setMessage);
 
@@ -32,6 +36,7 @@ function InputDateRangePicker({
         onChange={(date) => {
           setDateRange({ ...dateRange, from: date });
         }}
+        disabled={disabled}
       />
       ~
       <InputDatePicker
@@ -39,6 +44,7 @@ function InputDateRangePicker({
         onChange={(date) => {
           setDateRange({ ...dateRange, to: date });
         }}
+        disabled={disabled}
       />
     </>
   );
diff --git a/apps/cs/src/widgets/post/ui/post-action.tsx b/apps/cs/src/widgets/post/ui/post-action.tsx
index 860d8dad8..c309d75d3 100644
--- a/apps/cs/src/widgets/post/ui/post-action.tsx
+++ b/apps/cs/src/widgets/post/ui/post-action.tsx
@@ -1,11 +1,13 @@
-import { toast } from "sonner";
 import { useEffect } from "react";
-import { useRouter, usePathname } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
 import { useClipboard } from "@frontend-opensource/use-react-hooks";
-import { Button } from "@common/components";
-import { deleteReasonMessages } from "@/entities/post";
-import { AuthorityButton } from "@/entities/menu-authority";
+import { toast } from "sonner";
+
 import { useMenuStore, useSelectPrompt, useUserStore } from "@/shared/lib";
+import { AuthorityButton } from "@/entities/menu-authority";
+import { deleteReasonMessages } from "@/entities/post";
+import { Button } from "@common/components";
 
 type PostActionProps = {
   bbsId: string;
@@ -21,11 +23,14 @@ const selectData = Object.entries(deleteReasonMessages).map(
 function PostAction({ children, handleDelete }: PostActionProps) {
   const router = useRouter();
   const pathname = usePathname();
+  const searchParams = useSearchParams();
   const { copyText, copied } = useClipboard();
   const { prompt } = useSelectPrompt(selectData);
   const bbsInfo = useMenuStore((state) => state.bbsInfo);
   const userInfo = useUserStore((state) => state.userInfo);
   const postPageLink = `/bbs/${bbsInfo?.bbsTypeCd.toLowerCase()}/${bbsInfo?.bbsId}`;
+  const from = searchParams?.get("from");
+  const backLink = from ?? postPageLink;
 
   const onDelete = async () => {
     const { resolved, value } = await prompt("삭제 사유를 입력해주세요.");
@@ -65,7 +70,7 @@ function PostAction({ children, handleDelete }: PostActionProps) {
           size="lg"
           color="white"
           type="button"
-          onClick={() => router.push(postPageLink)}
+          onClick={() => router.push(backLink)}
         >
           목록
         </Button>
diff --git a/apps/cs/src/widgets/post/ui/post-page.tsx b/apps/cs/src/widgets/post/ui/post-page.tsx
index 850513a94..4b6e374c0 100644
--- a/apps/cs/src/widgets/post/ui/post-page.tsx
+++ b/apps/cs/src/widgets/post/ui/post-page.tsx
@@ -135,7 +135,7 @@ function PostPage({ bbsId }: { bbsId: string }) {
     refetch();
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     refetch();
   };
diff --git a/apps/dc/package.json b/apps/dc/package.json
index 747cdf91e..db1470e5a 100644
--- a/apps/dc/package.json
+++ b/apps/dc/package.json
@@ -23,7 +23,7 @@
     "dayjs": "^1.11.13",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.474.0",
-    "next": "15.3.8",
+    "next": "15.5.18",
     "picocolors": "^1.1.1",
     "react-chartjs-2": "^5.3.0",
     "react-dnd": "^16.0.1",
@@ -41,7 +41,7 @@
     "@types/node": "^22.17.0",
     "@types/webpack": "^5.28.5",
     "eslint": "^9.0.0",
-    "eslint-config-next": "15.4.0",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
@@ -49,4 +49,4 @@
     "tailwindcss": "^3.4.14",
     "typescript": "^5.7.2"
   }
-}
\ No newline at end of file
+}
diff --git a/apps/dc/src/pages/auth/login/ui/login-page.tsx b/apps/dc/src/pages/auth/login/ui/login-page.tsx
index 92f5935ed..0164e4327 100644
--- a/apps/dc/src/pages/auth/login/ui/login-page.tsx
+++ b/apps/dc/src/pages/auth/login/ui/login-page.tsx
@@ -6,7 +6,7 @@ import { LoginApi } from "@/entities/auth";
 import "./login.css";
 
 function LoginPage() {
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     const formData = new FormData(e.target as HTMLFormElement);
diff --git a/apps/dc/src/pages/category/ui/category-page.tsx b/apps/dc/src/pages/category/ui/category-page.tsx
index 29f8ef71b..dfb262698 100644
--- a/apps/dc/src/pages/category/ui/category-page.tsx
+++ b/apps/dc/src/pages/category/ui/category-page.tsx
@@ -39,8 +39,10 @@ type TreeNode = {
 function CategoryPage() {
   const router = useRouter();
   const [treeData, setTreeData] = useState<NodeModel<TreeNode>[]>([]);
-  const [selectedParentNode, setSelectedParentNode] = useState<NodeModel<TreeNode> | null>(null);
-  const [selectedSubNode, setSelectedSubNode] = useState<NodeModel<TreeNode> | null>(null);
+  const [selectedParentNode, setSelectedParentNode] =
+    useState<NodeModel<TreeNode> | null>(null);
+  const [selectedSubNode, setSelectedSubNode] =
+    useState<NodeModel<TreeNode> | null>(null);
   const [categoryQuery, setSearchText] = useState<CategoryParams>({
     clsfSystmNm: "",
   });
@@ -48,7 +50,9 @@ function CategoryPage() {
   const [loading, setLoading] = useState(false);
   const { setMessage: showAlert } = useAlertStore((state) => state);
   const { confirm } = useConfirm();
-  const [dialog, setDialog] = useState<null | { type: "add" | "edit" | "delete" }>(null);
+  const [dialog, setDialog] = useState<null | {
+    type: "add" | "edit" | "delete";
+  }>(null);
   const userUnqId = useUserStore((state) => state.userInfo?.userUnqId || "");
   const userInfo = useUserStore((state) => state.userInfo);
   const [expandedIds, setExpandedIds] = useState<(string | number)[]>([]);
@@ -57,7 +61,8 @@ function CategoryPage() {
   const categoryNameInputRef = useRef<HTMLInputElement>(null);
   const [showCategoryNameError, setShowCategoryNameError] = useState(false);
   const [isAddingMode, setIsAddingMode] = useState(false);
-  const [addingParentNode, setAddingParentNode] = useState<NodeModel<TreeNode> | null>(null);
+  const [addingParentNode, setAddingParentNode] =
+    useState<NodeModel<TreeNode> | null>(null);
 
   const { data: categoryList, refetch } = useQuery({
     queryKey: [ENDPOINT.DC_SERVICE.CATEGORY],
@@ -70,20 +75,18 @@ function CategoryPage() {
     refetch();
   }, [refetch]);
 
-
-
   const handleDrop = (newTreeData: NodeModel<TreeNode>[]) => {
     setTreeData(newTreeData);
   };
 
   useEffect(() => {
-    const treeElement = document.querySelector('.tree-container');
+    const treeElement = document.querySelector(".tree-container");
     if (treeElement) {
-      expandedIds.forEach(id => {
+      expandedIds.forEach((id) => {
         const nodeElement = treeElement.querySelector(`[data-id="${id}"]`);
         if (nodeElement) {
-          const toggleButton = nodeElement.querySelector('.toggle-button');
-          if (toggleButton && !nodeElement.classList.contains('expanded')) {
+          const toggleButton = nodeElement.querySelector(".toggle-button");
+          if (toggleButton && !nodeElement.classList.contains("expanded")) {
             (toggleButton as HTMLElement).click();
           }
         }
@@ -91,7 +94,7 @@ function CategoryPage() {
     }
   }, [expandedIds]);
 
-  const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSearch = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!searchTerm.trim()) {
       showAlert("검색어를 입력해주세요");
@@ -99,7 +102,9 @@ function CategoryPage() {
     }
 
     const searchResults = treeData.filter((node) =>
-      (node.text ?? "").toLowerCase().includes((searchTerm ?? "").toLowerCase())
+      (node.text ?? "")
+        .toLowerCase()
+        .includes((searchTerm ?? "").toLowerCase()),
     );
 
     if (searchResults.length === 0) {
@@ -138,7 +143,7 @@ function CategoryPage() {
       setNewCategoryName("");
     } else {
       setSelectedSubNode(node);
-      const parentNode = treeData.find(n => n.id === node.parent) || null;
+      const parentNode = treeData.find((n) => n.id === node.parent) || null;
       setSelectedParentNode(parentNode);
       setNewCategoryName(node.text || "");
 
@@ -147,7 +152,7 @@ function CategoryPage() {
       const newExpandedIds = new Set(expandedIds);
       while (parentId && parentId !== 0 && parentId !== "0") {
         newExpandedIds.add(parentId);
-        const parentNode = treeData.find(n => n.id === parentId);
+        const parentNode = treeData.find((n) => n.id === parentId);
         if (parentNode) {
           parentId = parentNode.parent;
         } else {
@@ -230,7 +235,7 @@ function CategoryPage() {
         showAlert("수정할 분류 구조를 선택해주세요.");
         return;
       }
-     
+
       setLoading(true);
       try {
         await CategoryApi.updateCategory({
@@ -283,7 +288,7 @@ function CategoryPage() {
         showAlert("상위 분류를 선택해주세요.");
         return;
       }
-      
+
       setLoading(true);
       try {
         await CategoryApi.createCategory({
@@ -362,7 +367,7 @@ function CategoryPage() {
       // 백엔드에서 트리 구조로 반환하므로 flat 구조로 변환
       const flattenTree = (nodes: any[], parentId = "0"): any[] => {
         const result: any[] = [];
-        
+
         nodes.forEach((node) => {
           // 현재 노드를 flat 구조로 추가
           result.push({
@@ -371,65 +376,67 @@ function CategoryPage() {
             droppable: node.droppAble,
             text: node.clsfSystmNm,
           });
-          
+
           // 자식 노드들이 있으면 재귀적으로 처리
           if (node.children && node.children.length > 0) {
             result.push(...flattenTree(node.children, node.clsfSystmSn));
           }
         });
-        
+
         return result;
       };
-      
+
       const mappedData = flattenTree(categoryList);
-      
+
       // 트리 데이터를 영문순서, 한글순서로 정렬 (각 레벨별로)
       const sortTreeData = (nodes: typeof mappedData): typeof mappedData => {
         // 부모별로 그룹화
         const groupedByParent = new Map<string, typeof mappedData>();
-        
-        nodes.forEach(node => {
+
+        nodes.forEach((node) => {
           const parent = node.parent;
           if (!groupedByParent.has(parent)) {
             groupedByParent.set(parent, []);
           }
           groupedByParent.get(parent)!.push(node);
         });
-        
+
         // 각 그룹 내에서 정렬 (최상위 부모부터)
-        const sortedGroups = Array.from(groupedByParent.entries()).sort(([parentA], [parentB]) => {
-          // 최상위 부모("0")를 먼저 정렬
-          if (parentA === "0" && parentB !== "0") return -1;
-          if (parentA !== "0" && parentB === "0") return 1;
-          return 0;
-        });
-        
+        const sortedGroups = Array.from(groupedByParent.entries()).sort(
+          ([parentA], [parentB]) => {
+            // 최상위 부모("0")를 먼저 정렬
+            if (parentA === "0" && parentB !== "0") return -1;
+            if (parentA !== "0" && parentB === "0") return 1;
+            return 0;
+          },
+        );
+
         sortedGroups.forEach(([parent, children]) => {
           children.sort((a, b) => {
             const textA = a.text || "";
             const textB = b.text || "";
-            
+
             // 영문이 먼저 오도록 정렬
             const isEnglishA = /^[a-zA-Z]/.test(textA);
             const isEnglishB = /^[a-zA-Z]/.test(textB);
-            
+
             if (isEnglishA && !isEnglishB) return -1;
             if (!isEnglishA && isEnglishB) return 1;
-            
+
             // 같은 언어 내에서는 알파벳/가나다순 정렬
-            return textA.localeCompare(textB, ['ko', 'en']);
+            return textA.localeCompare(textB, ["ko", "en"]);
           });
         });
-        
+
         // 정렬된 결과를 다시 합치기 (순서 보장)
         const sortedData: typeof mappedData = [];
         sortedGroups.forEach(([parent, children]) => {
           sortedData.push(...children);
         });
-        
+
         return sortedData;
       };
-      
+
       // 각 레벨별로 정렬
       const sortedData = sortTreeData(mappedData);
       setTreeData(sortedData);
@@ -443,8 +450,12 @@ function CategoryPage() {
 
     const filterTree = (nodes: NodeModel<TreeNode>[]) => {
       return nodes.reduce((acc: NodeModel<TreeNode>[], node) => {
-        const nodeMatches = (node.text ?? "").toLowerCase().includes((searchTerm ?? "").toLowerCase());
-        const filteredChildren = node.droppable ? filterTree(treeData.filter(n => n.parent === node.id)) : [];
+        const nodeMatches = (node.text ?? "")
+          .toLowerCase()
+          .includes((searchTerm ?? "").toLowerCase());
+        const filteredChildren = node.droppable
+          ? filterTree(treeData.filter((n) => n.parent === node.id))
+          : [];
 
         if (nodeMatches || filteredChildren.length > 0) {
           acc.push(node);
@@ -466,14 +477,16 @@ function CategoryPage() {
     setAddingParentNode(null);
   };
 
-  useEffect(() => {
-  }, [userInfo, userUnqId]);
+  useEffect(() => {}, [userInfo, userUnqId]);
 
   return (
     <PageLayout pageTitle="자료관 분류 관리">
-      <div className="card !mb-0 flex flex-col !min-h-[calc(100vh-16.8rem)]">
+      <div className="card !mb-0 flex !min-h-[calc(100vh-16.8rem)] flex-col">
         <div className="card card-border">
-          <form onSubmit={handleSearch} className="flex items-center gap-2 p-2 mb-2">
+          <form
+            onSubmit={handleSearch}
+            className="mb-2 flex items-center gap-2 p-2"
+          >
             <label htmlFor="category-search" className="mr-2 text-label">
               분류명
             </label>
@@ -484,50 +497,55 @@ function CategoryPage() {
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
-            <Button className="h-[3.6rem] rounded-sm text-[1.3rem]" type="submit">
+            <Button
+              className="h-[3.6rem] rounded-sm text-[1.3rem]"
+              type="submit"
+            >
               검색
             </Button>
-            <Button 
-              type="button" 
-              className="h-[3.6rem] !bg-gray-600 hover:!bg-gray-600 flex items-center gap-2" 
+            <Button
+              type="button"
+              className="flex h-[3.6rem] items-center gap-2 !bg-gray-600 hover:!bg-gray-600"
               onClick={handleReset}
             >
-              <RotateCcw className="w-4 h-4" />
+              <RotateCcw className="h-4 w-4" />
               초기화
             </Button>
           </form>
         </div>
-        <div className="flex flex-1 gap-2 min-h-0">
-          <div className="card card-border w-[60%] flex flex-col">
+        <div className="flex min-h-0 flex-1 gap-2">
+          <div className="card card-border flex w-[60%] flex-col">
             <div className="card-header">
-              <h3 className="text-2xl font-medium text-label">자료관 분류 트리</h3>
+              <h3 className="text-2xl font-medium text-label">
+                자료관 분류 트리
+              </h3>
             </div>
-            <div 
-              className="p-4 flex-1 min-h-0 max-h-[60vh] overflow-y-auto tree-container"
+            <div
+              className="tree-container max-h-[60vh] min-h-0 flex-1 overflow-y-auto p-4"
               onDragOver={(e) => {
                 // 파일 드래그는 방지하되, 트리 내부 드래그는 허용
-                if (e.dataTransfer.types.includes('Files')) {
+                if (e.dataTransfer.types.includes("Files")) {
                   e.preventDefault();
                   e.stopPropagation();
                 }
               }}
               onDrop={(e) => {
                 // 파일 드롭은 방지하되, 트리 내부 드롭은 허용
-                if (e.dataTransfer.types.includes('Files')) {
+                if (e.dataTransfer.types.includes("Files")) {
                   e.preventDefault();
                   e.stopPropagation();
                 }
               }}
               onDragEnter={(e) => {
                 // 파일 드래그는 방지하되, 트리 내부 드래그는 허용
-                if (e.dataTransfer.types.includes('Files')) {
+                if (e.dataTransfer.types.includes("Files")) {
                   e.preventDefault();
                   e.stopPropagation();
                 }
               }}
               onDragLeave={(e) => {
                 // 파일 드래그는 방지하되, 트리 내부 드래그는 허용
-                if (e.dataTransfer.types.includes('Files')) {
+                if (e.dataTransfer.types.includes("Files")) {
                   e.preventDefault();
                   e.stopPropagation();
                 }
@@ -543,41 +561,50 @@ function CategoryPage() {
                   insertDroppableFirst={false}
                   canDrop={() => false}
                   render={(node, { depth, isOpen, onToggle }) => {
-                    const isExpanded = expandedIds.map(String).includes(String(node.id));
-                    const isSearchResult = searchTerm && (node.text ?? "").toLowerCase().includes(searchTerm.toLowerCase());
-                    
+                    const isExpanded = expandedIds
+                      .map(String)
+                      .includes(String(node.id));
+                    const isSearchResult =
+                      searchTerm &&
+                      (node.text ?? "")
+                        .toLowerCase()
+                        .includes(searchTerm.toLowerCase());
+
                     return (
                       <div
-                        ref={el => {
+                        ref={(el) => {
                           if (isSearchResult) {
-                            searchResultRefs.current = [...searchResultRefs.current, el];
+                            searchResultRefs.current = [
+                              ...searchResultRefs.current,
+                              el,
+                            ];
                           }
                         }}
                         data-id={node.id}
                         onDragOver={(e) => {
                           // 파일 드래그는 방지하되, 트리 내부 드래그는 허용
-                          if (e.dataTransfer.types.includes('Files')) {
+                          if (e.dataTransfer.types.includes("Files")) {
                             e.preventDefault();
                             e.stopPropagation();
                           }
                         }}
                         onDrop={(e) => {
                           // 파일 드롭은 방지하되, 트리 내부 드롭은 허용
-                          if (e.dataTransfer.types.includes('Files')) {
+                          if (e.dataTransfer.types.includes("Files")) {
                             e.preventDefault();
                             e.stopPropagation();
                           }
                         }}
                         onDragEnter={(e) => {
                           // 파일 드래그는 방지하되, 트리 내부 드래그는 허용
-                          if (e.dataTransfer.types.includes('Files')) {
+                          if (e.dataTransfer.types.includes("Files")) {
                             e.preventDefault();
                             e.stopPropagation();
                           }
                         }}
                         onDragLeave={(e) => {
                           // 파일 드래그는 방지하되, 트리 내부 드래그는 허용
-                          if (e.dataTransfer.types.includes('Files')) {
+                          if (e.dataTransfer.types.includes("Files")) {
                             e.preventDefault();
                             e.stopPropagation();
                           }
@@ -586,35 +613,46 @@ function CategoryPage() {
                           handleSelect(node);
                           if (node.droppable) {
                             onToggle();
-                            setExpandedIds(prev => {
+                            setExpandedIds((prev) => {
                               const idStr = String(node.id);
                               const prevStr = prev.map(String);
-                              const isCurrentlyExpanded = prevStr.includes(idStr);
+                              const isCurrentlyExpanded =
+                                prevStr.includes(idStr);
                               if (isCurrentlyExpanded) {
                                 // 닫는 동작: 하위 노드에 선택된 노드가 있으면 선택 해제
                                 // 하위 노드 id 목록 구하기
-                                const getDescendantIds = (parentId: string | number): (string | number)[] => {
-                                  const children = treeData.filter(n => n.parent === parentId);
-                                  let all = children.map(n => n.id);
-                                  children.forEach(child => {
-                                    all = all.concat(getDescendantIds(child.id));
+                                const getDescendantIds = (
+                                  parentId: string | number,
+                                ): (string | number)[] => {
+                                  const children = treeData.filter(
+                                    (n) => n.parent === parentId,
+                                  );
+                                  let all = children.map((n) => n.id);
+                                  children.forEach((child) => {
+                                    all = all.concat(
+                                      getDescendantIds(child.id),
+                                    );
                                   });
                                   return all;
                                 };
                                 const descendants = getDescendantIds(node.id);
                                 if (
                                   selectedSubNode &&
-                                  (descendants.includes(selectedSubNode.id) || selectedSubNode.id === node.id)
+                                  (descendants.includes(selectedSubNode.id) ||
+                                    selectedSubNode.id === node.id)
                                 ) {
                                   setSelectedSubNode(null);
                                   setSelectedParentNode(null);
                                   setNewCategoryName("");
                                 }
-                                return prevStr.filter(id => id !== idStr);
+                                return prevStr.filter((id) => id !== idStr);
                               } else {
                                 // 여는 동작: 자동 선택
                                 setSelectedSubNode(node);
-                                setSelectedParentNode(treeData.find(n => n.id === node.parent) || null);
+                                setSelectedParentNode(
+                                  treeData.find((n) => n.id === node.parent) ||
+                                    null,
+                                );
                                 setNewCategoryName(node.text || "");
                                 return [...prevStr, idStr];
                               }
@@ -622,68 +660,72 @@ function CategoryPage() {
                           }
                         }}
                         style={{ paddingLeft: `${depth * 16}px` }}
-                        className={`cursor-pointer py-3 border-b border-gray-200 flex items-center transition-colors
-                          ${String(selectedSubNode?.id) === String(node.id)
+                        className={`flex cursor-pointer items-center border-b border-gray-200 py-3 transition-colors ${
+                          String(selectedSubNode?.id) === String(node.id)
                             ? "bg-blue-100"
                             : isSearchResult
                               ? "bg-sky-100"
-                              : "hover:bg-gray-100"}
-                          ${isExpanded ? 'expanded' : ''}
-                        `}
+                              : "hover:bg-gray-100"
+                        } ${isExpanded ? "expanded" : ""} `}
                       >
                         {node.droppable && (
                           <span
                             onDragOver={(e) => {
                               // 파일 드래그는 방지하되, 트리 내부 드래그는 허용
-                              if (e.dataTransfer.types.includes('Files')) {
+                              if (e.dataTransfer.types.includes("Files")) {
                                 e.preventDefault();
                                 e.stopPropagation();
                               }
                             }}
                             onDrop={(e) => {
                               // 파일 드롭은 방지하되, 트리 내부 드롭은 허용
-                              if (e.dataTransfer.types.includes('Files')) {
+                              if (e.dataTransfer.types.includes("Files")) {
                                 e.preventDefault();
                                 e.stopPropagation();
                               }
                             }}
                             onDragEnter={(e) => {
                               // 파일 드래그는 방지하되, 트리 내부 드래그는 허용
-                              if (e.dataTransfer.types.includes('Files')) {
+                              if (e.dataTransfer.types.includes("Files")) {
                                 e.preventDefault();
                                 e.stopPropagation();
                               }
                             }}
                             onDragLeave={(e) => {
                               // 파일 드래그는 방지하되, 트리 내부 드래그는 허용
-                              if (e.dataTransfer.types.includes('Files')) {
+                              if (e.dataTransfer.types.includes("Files")) {
                                 e.preventDefault();
                                 e.stopPropagation();
                               }
                             }}
-                            onClick={e => {
+                            onClick={(e) => {
                               e.stopPropagation();
                               onToggle();
-                              setExpandedIds(prev => {
+                              setExpandedIds((prev) => {
                                 const idStr = String(node.id);
                                 const prevStr = prev.map(String);
-                                const isCurrentlyExpanded = prevStr.includes(idStr);
+                                const isCurrentlyExpanded =
+                                  prevStr.includes(idStr);
                                 if (isCurrentlyExpanded) {
-                                  return prevStr.filter(id => id !== idStr);
+                                  return prevStr.filter((id) => id !== idStr);
                                 } else {
                                   setSelectedSubNode(node);
-                                  setSelectedParentNode(treeData.find(n => n.id === node.parent) || null);
+                                  setSelectedParentNode(
+                                    treeData.find(
+                                      (n) => n.id === node.parent,
+                                    ) || null,
+                                  );
                                   setNewCategoryName(node.text || "");
                                   return [...prevStr, idStr];
                                 }
                               });
                             }}
-                            className="mr-2 flex items-center justify-center cursor-pointer toggle-button"
+                            className="toggle-button mr-2 flex cursor-pointer items-center justify-center"
                           >
                             {isExpanded ? (
-                              <ChevronDown className="w-4 h-4 text-gray-500" />
+                              <ChevronDown className="h-4 w-4 text-gray-500" />
                             ) : (
-                              <ChevronRight className="w-4 h-4 text-gray-400" />
+                              <ChevronRight className="h-4 w-4 text-gray-400" />
                             )}
                           </span>
                         )}
@@ -695,36 +737,46 @@ function CategoryPage() {
               </DndProvider>
             </div>
           </div>
-          <div className="card card-border flex-1 flex flex-col w-[60%] overflow-y-auto">
+          <div className="card card-border flex w-[60%] flex-1 flex-col overflow-y-auto">
             <div className="card-header">
               <h3 className="text-2xl font-medium text-label">분류 추가</h3>
             </div>
-            <div className="p-4 flex-1 flex flex-col">
+            <div className="flex flex-1 flex-col p-4">
               <div>
                 <div className="mb-[10px]">
-                  <label className="block text-md font-medium text-label mb-1">
+                  <label className="text-md mb-1 block font-medium text-label">
                     상위 항목
                   </label>
                   <input
                     type="text"
-                    className="w-full rounded border px-3 py-2 h-[3.2rem] !text-[1.3rem] bg-gray-200 cursor-not-allowed"
+                    className="h-[3.2rem] w-full cursor-not-allowed rounded border bg-gray-200 px-3 py-2 !text-[1.3rem]"
                     readOnly
                     placeholder="상위 분류를 선택해주세요"
-                    value={isAddingMode ? (addingParentNode?.text || "") : (selectedParentNode?.text || "")}
+                    value={
+                      isAddingMode
+                        ? addingParentNode?.text || ""
+                        : selectedParentNode?.text || ""
+                    }
                   />
                 </div>
 
                 <div className="mb-[10px]">
-                  <label className="block text-md font-medium text-label mb-1 flex items-center">
+                  <label className="text-md mb-1 block flex items-center font-medium text-label">
                     <span className="text-red-500">*</span> 분류 이름
                   </label>
                   <input
                     ref={categoryNameInputRef}
                     type="text"
-                    className={`w-full rounded border px-3 py-2 h-[3.2rem] !text-[1.3rem] ${
-                      showCategoryNameError ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+                    className={`h-[3.2rem] w-full rounded border px-3 py-2 !text-[1.3rem] ${
+                      showCategoryNameError
+                        ? "border-red-500 focus:border-red-500 focus:ring-red-500"
+                        : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                     }`}
-                    placeholder={isAddingMode ? "새로 추가할 분류 이름을 입력해주세요" : "분류 이름을 입력해주세요"}
+                    placeholder={
+                      isAddingMode
+                        ? "새로 추가할 분류 이름을 입력해주세요"
+                        : "분류 이름을 입력해주세요"
+                    }
                     value={newCategoryName}
                     onChange={(e) => {
                       setNewCategoryName(e.target.value);
@@ -735,17 +787,17 @@ function CategoryPage() {
                     readOnly={false}
                   />
                   {showCategoryNameError && (
-                    <p className="text-red-600 text-sm mt-2"></p>
+                    <p className="mt-2 text-sm text-red-600"></p>
                   )}
                 </div>
               </div>
-              <div className="flex-1 flex flex-col justify-end">
-                <div className="flex justify-end mt-10 gap-2">
+              <div className="flex flex-1 flex-col justify-end">
+                <div className="mt-10 flex justify-end gap-2">
                   {isAddingMode ? (
                     <>
                       <button
                         type="button"
-                        className="bg-primary text-white px-8 py-2 rounded-sm hover:bg-primary/80 text-md h-[3.2rem]"
+                        className="hover:bg-primary/80 text-md h-[3.2rem] rounded-sm bg-primary px-8 py-2 text-white"
                         onClick={() => setDialog({ type: "add" })}
                         disabled={loading}
                       >
@@ -753,7 +805,7 @@ function CategoryPage() {
                       </button>
                       <button
                         type="button"
-                        className="bg-gray-500 text-white px-8 py-2 rounded-sm hover:bg-gray-600 text-md h-[3.2rem]"
+                        className="text-md h-[3.2rem] rounded-sm bg-gray-500 px-8 py-2 text-white hover:bg-gray-600"
                         onClick={() => {
                           setIsAddingMode(false);
                           setAddingParentNode(null);
@@ -771,7 +823,7 @@ function CategoryPage() {
                     <>
                       <button
                         type="button"
-                        className="bg-primary text-white px-8 py-2 rounded-sm hover:bg-primary/80 text-md h-[3.2rem]"
+                        className="hover:bg-primary/80 text-md h-[3.2rem] rounded-sm bg-primary px-8 py-2 text-white"
                         onClick={handleAddCategory}
                         disabled={loading}
                       >
@@ -779,7 +831,7 @@ function CategoryPage() {
                       </button>
                       <button
                         type="button"
-                        className="bg-gray-600 text-white px-8 py-2 rounded-sm hover:bg-gray-700 text-md h-[3.2rem]"
+                        className="text-md h-[3.2rem] rounded-sm bg-gray-600 px-8 py-2 text-white hover:bg-gray-700"
                         onClick={handleEditCategory}
                         disabled={loading}
                       >
@@ -787,7 +839,7 @@ function CategoryPage() {
                       </button>
                       <button
                         type="button"
-                        className="bg-red-600 text-white px-8 py-2 rounded-sm hover:bg-red-700 text-md h-[3.2rem] cursor-pointer"
+                        className="text-md h-[3.2rem] cursor-pointer rounded-sm bg-red-600 px-8 py-2 text-white hover:bg-red-700"
                         onClick={handleDeleteCategory}
                         disabled={!selectedSubNode || loading}
                       >
@@ -807,10 +859,10 @@ function CategoryPage() {
           dialog?.type === "add"
             ? "분류를 추가하시겠습니까?"
             : dialog?.type === "edit"
-            ? "분류를 수정하시겠습니까?"
-            : dialog?.type === "delete"
-            ? "분류를 삭제하시겠습니까?"
-            : ""
+              ? "분류를 수정하시겠습니까?"
+              : dialog?.type === "delete"
+                ? "분류를 삭제하시겠습니까?"
+                : ""
         }
         loading={loading}
         onConfirm={handleDialogConfirm}
@@ -820,4 +872,4 @@ function CategoryPage() {
   );
 }
 
-export { CategoryPage };
\ No newline at end of file
+export { CategoryPage };
diff --git a/apps/dc/src/pages/chatbot/ui/chatbot-page.tsx b/apps/dc/src/pages/chatbot/ui/chatbot-page.tsx
index 60e014173..7c2002683 100644
--- a/apps/dc/src/pages/chatbot/ui/chatbot-page.tsx
+++ b/apps/dc/src/pages/chatbot/ui/chatbot-page.tsx
@@ -5,12 +5,15 @@ import { Button, Input } from "@common/components";
 import { PageLayout } from "@/shared/ui/page-layout";
 import { UserCircle, Bot } from "lucide-react";
 import { useSearchParams } from "next/navigation";
-import { askQuestion, downloadPdf } from "@/entities/datalibrary/api/flask-service";
+import {
+  askQuestion,
+  downloadPdf,
+} from "@/entities/datalibrary/api/flask-service";
 
 interface Message {
   role: "user" | "bot";
   text: string;
-  sources?: Array<{ 
+  sources?: Array<{
     pdf_path: string;
     original_filename: string;
     page: number;
@@ -39,39 +42,45 @@ function ChatBotPage() {
   // RAG 요청 함수
   const handleRagRequest = async (question: string) => {
     setLoading(true);
-    
+
     // "봇이 답변을 생성중입니다..." 메시지를 먼저 추가
-    setMessages(prev => [...prev, { role: "bot", text: "봇이 답변을 생성중입니다...", sources: [] }]);
-    
+    setMessages((prev) => [
+      ...prev,
+      { role: "bot", text: "봇이 답변을 생성중입니다...", sources: [] },
+    ]);
+
     try {
       const data = await askQuestion(question, sessionId);
-      const answer = data.answer || data.response || '답변을 찾을 수 없습니다.';
+      const answer = data.answer || data.response || "답변을 찾을 수 없습니다.";
       const sources = data.sources || [];
-      
+
       // session_id가 응답에 포함되어 있으면 저장
       if (data.session_id) {
         setSessionId(data.session_id);
       }
-      
+
       // 답변을 한 글자씩 실시간으로 표시
       for (let i = 0; i <= answer.length; i++) {
-        await new Promise(resolve => setTimeout(resolve, 30)); // 30ms 딜레이
-        setMessages(prev => {
+        await new Promise((resolve) => setTimeout(resolve, 30)); // 30ms 딜레이
+        setMessages((prev) => {
           const newMessages = [...prev];
           // 마지막 메시지(봇 메시지)를 실제 답변으로 교체
-          newMessages[newMessages.length - 1] = { 
-            role: "bot", 
-            text: answer.substring(0, i), 
-            sources: sources // 모든 출처 표시
+          newMessages[newMessages.length - 1] = {
+            role: "bot",
+            text: answer.substring(0, i),
+            sources: sources, // 모든 출처 표시
           };
           return newMessages;
         });
       }
     } catch (error) {
-      console.error('RAG 요청 오류:', error);
-      setMessages(prev => {
+      console.error("RAG 요청 오류:", error);
+      setMessages((prev) => {
         const newMessages = [...prev];
-        newMessages[newMessages.length - 1] = { role: "bot", text: '질문에 대한 답변을 생성하는 중 오류가 발생했습니다.' };
+        newMessages[newMessages.length - 1] = {
+          role: "bot",
+          text: "질문에 대한 답변을 생성하는 중 오류가 발생했습니다.",
+        };
         return newMessages;
       });
     } finally {
@@ -84,7 +93,7 @@ function ChatBotPage() {
     try {
       const blob = await downloadPdf(pdfPath, fileName);
       const url = window.URL.createObjectURL(blob);
-      const link = document.createElement('a');
+      const link = document.createElement("a");
       link.href = url;
       link.download = fileName;
       document.body.appendChild(link);
@@ -92,87 +101,98 @@ function ChatBotPage() {
       document.body.removeChild(link);
       window.URL.revokeObjectURL(url);
     } catch (error) {
-      console.error('파일 다운로드 오류:', error);
-      alert('파일 다운로드 중 오류가 발생했습니다.');
+      console.error("파일 다운로드 오류:", error);
+      alert("파일 다운로드 중 오류가 발생했습니다.");
     }
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!input.trim() || loading) return;
-    
+
     const question = input.trim();
-    setMessages(prev => [...prev, { role: "user", text: question }]);
+    setMessages((prev) => [...prev, { role: "user", text: question }]);
     setInput("");
-    
+
     // RAG 요청
     handleRagRequest(question);
   };
 
   return (
     <PageLayout pageTitle="하수도 GPT">
-      <div className="card card-border mt-6 flex flex-col h-[calc(100vh-16.8rem)]">
+      <div className="card card-border mt-6 flex h-[calc(100vh-16.8rem)] flex-col">
         <div className="card card-header flex-shrink-0">
           <h3 className="text-2xl font-medium text-label">하수도 GPT</h3>
         </div>
 
-        <div className="flex-1 overflow-y-auto p-4 space-y-3 min-h-0">
+        <div className="min-h-0 flex-1 space-y-3 overflow-y-auto p-4">
           {messages.map((msg, index) => (
             <div
               key={index}
-              className={`flex items-end gap-2 max-w-[75%] ${
+              className={`flex max-w-[75%] items-end gap-2 ${
                 msg.role === "user"
-                  ? "flex-row-reverse self-end ml-auto"
-                  : "self-start mr-auto"
+                  ? "ml-auto flex-row-reverse self-end"
+                  : "mr-auto self-start"
               }`}
             >
-              <span className="shrink-0 flex items-center">
+              <span className="flex shrink-0 items-center">
                 {msg.role === "user" ? (
-                  <UserCircle className="w-8 h-8 text-blue-400" />
+                  <UserCircle className="h-8 w-8 text-blue-400" />
                 ) : (
-                  <Bot className="w-8 h-8 text-gray-400" />
+                  <Bot className="h-8 w-8 text-gray-400" />
                 )}
               </span>
               <span
-                className={`p-3 rounded-md text-2xl whitespace-pre-wrap ${
-                  msg.role === "user"
-                    ? "bg-blue-100"
-                    : "bg-gray-100"
+                className={`whitespace-pre-wrap rounded-md p-3 text-2xl ${
+                  msg.role === "user" ? "bg-blue-100" : "bg-gray-100"
                 }`}
                 style={{ maxWidth: "calc(100% - 2.5rem)" }}
               >
                 {msg.text}
                 {/* 출처 표시: bot 답변에만 */}
-                {msg.role === "bot" && msg.sources && msg.sources.length > 0 && (
-                  <div className="mt-2 text-lg text-gray-500 space-y-1">
-                    <div className="font-semibold flex items-center gap-1">
-                      <span role="img" aria-label="출처">🔗</span> 출처
+                {msg.role === "bot" &&
+                  msg.sources &&
+                  msg.sources.length > 0 && (
+                    <div className="mt-2 space-y-1 text-lg text-gray-500">
+                      <div className="flex items-center gap-1 font-semibold">
+                        <span role="img" aria-label="출처">
+                          🔗
+                        </span>{" "}
+                        출처
+                      </div>
+                      <ul className="ml-2 list-inside list-disc">
+                        {msg.sources.map((src, i) => (
+                          <li key={i}>
+                            <button
+                              onClick={() =>
+                                handleSourceDownload(
+                                  src.pdf_path,
+                                  src.original_filename,
+                                )
+                              }
+                              className="text-left underline hover:text-blue-600"
+                            >
+                              {src.original_filename} (페이지 {src.page})
+                            </button>
+                          </li>
+                        ))}
+                      </ul>
                     </div>
-                    <ul className="list-disc list-inside ml-2">
-                      {msg.sources.map((src, i) => (
-                        <li key={i}>
-                          <button
-                            onClick={() => handleSourceDownload(src.pdf_path, src.original_filename)}
-                            className="underline hover:text-blue-600 text-left"
-                          >
-                            {src.original_filename} (페이지 {src.page})
-                          </button>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                )}
+                  )}
               </span>
             </div>
           ))}
-          
+
           {/* 로딩 상태 표시 - 실시간 답변 생성 중에는 표시하지 않음 */}
           {loading && messages.length === 0 && (
-            <div className="flex items-end gap-2 max-w-[75%] self-start mr-auto">
-              <span className="shrink-0 flex items-center">
-                <Bot className="w-8 h-8 text-gray-400" />
+            <div className="mr-auto flex max-w-[75%] items-end gap-2 self-start">
+              <span className="flex shrink-0 items-center">
+                <Bot className="h-8 w-8 text-gray-400" />
               </span>
-              <span className="p-3 rounded-md text-2xl bg-gray-100" style={{ maxWidth: "calc(100% - 2.5rem)" }}>
+              <span
+                className="rounded-md bg-gray-100 p-3 text-2xl"
+                style={{ maxWidth: "calc(100% - 2.5rem)" }}
+              >
                 답변을 생성하고 있습니다...
               </span>
             </div>
@@ -181,10 +201,10 @@ function ChatBotPage() {
 
         <form
           onSubmit={handleSubmit}
-          className="flex items-center gap-2 p-4 border-t flex-shrink-0"
+          className="flex flex-shrink-0 items-center gap-2 border-t p-4"
         >
           <Input
-            className="flex-1 h-[3.2rem] !text-[1.5rem]"
+            className="h-[3.2rem] flex-1 !text-[1.5rem]"
             placeholder="질문을 입력하세요..."
             value={input}
             onChange={(e) => setInput(e.target.value)}
@@ -199,4 +219,4 @@ function ChatBotPage() {
   );
 }
 
-export { ChatBotPage };
\ No newline at end of file
+export { ChatBotPage };
diff --git a/apps/dm/.env.local b/apps/dm/.env.local
index 88b6f8067..7e0ec15fc 100644
--- a/apps/dm/.env.local
+++ b/apps/dm/.env.local
@@ -1,12 +1,13 @@
 NEXT_PUBLIC_SITE_ID = DM
+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_PROXY_HOST = http://localhost:3015
+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
@@ -17,10 +18,9 @@ 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_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_GATEWAY_URL=http://localhost:8883  # 개발 서버 API
+CONTENTS_INTRO = 31
+CONTENTS_EXAMPLE = 32
 
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
 NEXT_PRIVATE_WR_ADDRESS_KEY = devU01TX0FVVEgyMDI1MDgyNTEwMzkwNDExNjEwNTM=
diff --git a/apps/dm/.env.mindone b/apps/dm/.env.mindone
index da6f80177..1a11ec6a9 100644
--- a/apps/dm/.env.mindone
+++ b/apps/dm/.env.mindone
@@ -1,24 +1,27 @@
 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_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
-
+CONTENTS_INTRO = 31
+CONTENTS_EXAMPLE = 32
 
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
 NEXT_PRIVATE_WR_ADDRESS_KEY = devU01TX0FVVEgyMDI1MDgyNTEwMzkwNDExNjEwNTM=
diff --git a/apps/dm/.env.production b/apps/dm/.env.production
index 5a401c89a..b09c7da8a 100644
--- a/apps/dm/.env.production
+++ b/apps/dm/.env.production
@@ -8,17 +8,18 @@ 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
+CONTENTS_INTRO = 24
+CONTENTS_EXAMPLE = 25
 
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
 NEXT_PRIVATE_WR_ADDRESS_KEY = U01TXOFVVEgyMDI1MDgyODE0MTAxNzExNjEyMjA=
diff --git a/apps/dm/AGENTS.md b/apps/dm/AGENTS.md
new file mode 100644
index 000000000..7eefb1676
--- /dev/null
+++ b/apps/dm/AGENTS.md
@@ -0,0 +1,38 @@
+## 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 
+- 한글이 깨지지 않도록 주의할 것
+
+## 주석 comment
+- 한글 주석을 삭제하지 말 것
+
+## Monorepo structure
+apps/
+  _template
+  as
+  cm
+  cs
+  dc
+  dm
+  dm_new
+  fo
+  sn
+  st
+  wr
+
diff --git a/apps/dm/app/(base-layout)/layout.tsx b/apps/dm/app/(base-layout)/layout.tsx
deleted file mode 100644
index 5caa088b0..000000000
--- a/apps/dm/app/(base-layout)/layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client";
-import Base from "../base";
-import "../globals.css";
-import { StoreProvider } from "../store";
-
-export default function BaseLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <StoreProvider>
-      <Base>{children}</Base>
-    </StoreProvider>
-  );
-}
diff --git a/apps/dm/app/(base-layout)/pages/sdmMng/sdmApplyList/page.tsx b/apps/dm/app/(base-layout)/pages/sdmMng/sdmApplyList/page.tsx
deleted file mode 100644
index 8c681876c..000000000
--- a/apps/dm/app/(base-layout)/pages/sdmMng/sdmApplyList/page.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-"use client"
-import { Table, TableBody, TableCell, TableRow } from '@common/components/ui/table';
-
-import { useDmStore } from '@/app/store';
-import { ContentsDiv, Title, UiModal, UiTable } from '@common/business_components/ui';
-import ListDiv from '@common/business_components/ui/list_div';
-import { useEffect, useState } from 'react';
-import { Toaster } from 'react-hot-toast';
-import SdmLogin from '../sdmLogin/page';
-import type { DemandCompBizType } from '@/app/store/sdmMng';
-import TransValueFormat from '@/app/common/transValueFormat';
-import { useRouter } from 'next/navigation';
-
-const TABLE_STYLES = {
-  header: "text-center border border-[var(--border)] bg-[rgb(234,243,251)] text-[rgb(100,119,132)] whitespace-pre-line",
-  cell: "text-right whitespace-pre-line",
-  fullWidth: "text-center border border-[var(--border)] bg-[rgb(234,243,251)] text-[rgb(100,119,132)] whitespace-pre-line",
-  table: "fixed w-full"
-} as const;
-
-type SdmApplyProps = {
-  sdmNo : string;
-}
-
-export default function SdmApplyList({}: SdmApplyProps) {
-
-  const router = useRouter();
-  
-  const {getSdmInfoStatusList, Sdm, Common} = useDmStore((state) => state);
-  const {successLogin, sdmInfoStatusList, upHeadSdmInfoStatus} = Sdm;
-  const {selectSidoData, selectSigunData} = Common;
-  const [isLogin, setIsLogin] = useState(false);
-  const [isLoginStorageInfo, setIsLoginStorageInfo] = useState(false);
-  const [sdmApplyDetail, setSdmApplyDetail] = useState<DemandCompBizType>({} as DemandCompBizType);
-  const [transformedList, setTransformedList] = useState<DemandCompBizType[]>([]);
-
-  useEffect(() => {
-    console.log('sessionStorage : ',sessionStorage.getItem('user'));
-    const user = sessionStorage.getItem('user');
-    if (user) {
-      setIsLoginStorageInfo(true);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (successLogin || isLoginStorageInfo) {
-      setIsLogin(true);
-      const user = sessionStorage.getItem('user');
-      if (user) {
-        try {
-          const userData = JSON.parse(user);
-          getSdmInfoStatusList(userData.dmdInfoId);
-        } catch (error) {
-          console.error('Error parsing user data:', error);
-        }
-      }
-    }
-  }, [successLogin, getSdmInfoStatusList, isLoginStorageInfo]);
-
-  // 데이터 변환을 위한 별도의 useEffect
-  useEffect(() => {
-    if (sdmInfoStatusList.length > 0) {
-
-      
-      const newTransformedList = sdmInfoStatusList.map((item: DemandCompBizType) => ({
-        ...item,
-        ctpvCd: selectSidoData.find(sido => sido.val === item.ctpvCd?.trim())?.text || '',
-        sggCd: selectSigunData.find(sigun => sigun.val === item.sggCd?.trim())?.text || '',
-      }));
-      setTransformedList(newTransformedList);
-    }
-  }, [sdmInfoStatusList, selectSidoData, selectSigunData]);
-
-  const onClickSdmStatus = (index: number | undefined) => {
-    if (index !== undefined) {
-      const selectedStatus = transformedList[index];
-      if (selectedStatus) {
-
-
-        setSdmApplyDetail(selectedStatus);
-      }
-    }
-  }
-
-  return (
-    <>
-      <Title title="수요신청현황" />
-      <ContentsDiv>
-        <ListDiv>
-          <div className="overflow-y-scroll h-[250px]">
-            <div className="h-[110%] w-[99%]">
-              <UiTable
-                headName='수요정보 신청현황'
-                tableData={transformedList} 
-                headlist={upHeadSdmInfoStatus} 
-                pageSize={0} 
-                total={0} 
-                cellClick={(index) => onClickSdmStatus(index)} 
-                onPageChange={() => {}}
-              />
-            </div>
-          </div>
-        </ListDiv>
-        <ListDiv>
-          <div className="card-header">
-            <h3 className="text-2xl font-medium text-label">수요신청 상세현황</h3>
-          </div>
-          <div className={`card !m-[1.2rem] !p-0r`}>
-            <Table variant="secondary" style={{ tableLayout: 'fixed', width: '100%' }}>
-              <TableBody>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>요구시기</TableCell>
-                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.dmndTmng?.toString()}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>요구수량(m³/일)</TableCell>
-                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.dmndQty} format="number"/>}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>사용용도</TableCell>
-                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.useUsgCd}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>희망단가(원/m³)</TableCell>
-                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.wntUntprc} format="number"/>}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={6} className={TABLE_STYLES.fullWidth}>요구수량</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>총대장균군수(개/100ml)</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{   sdmApplyDetail?.grssClfg!=-1?<TransValueFormat value={sdmApplyDetail?.grssClfg ?? ''} format="number"/>:''}  {sdmApplyDetail?.grssClfg?sdmApplyDetail.grssClfg!=-1? '이하':'불검출':'-'}  </TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>결합잔류염소(mg/L)​</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.combResdch ?? ''} format="number"/>}  {sdmApplyDetail?.combResdch?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>탁도(NTU)</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.trbt ?? ''} format="number"/>}  {sdmApplyDetail?.trbt?'이하':'-'}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>생물학적 산소요구량(BOD)(mg/L)</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.blgcOxygDmndQnt ?? ''} format="number"/>}  {sdmApplyDetail?.blgcOxygDmndQnt?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>냄새</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.smll} format="number"/>}  {sdmApplyDetail?.smll?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>색도(도)</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.crmty ?? ''} format="number"/>}  {sdmApplyDetail?.crmty?'이하':'-'}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>총질소(T-N)(mg/L)</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.tn ?? ''} format="number"/>}  {sdmApplyDetail?.tn?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>총인(T-P)(mg/L)​</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.tph ?? ''} format="number"/>}  {sdmApplyDetail?.tph?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>수소이온농도(pH)​</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.ph} format="number"/>}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>염화물(mgCL/L)​</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.clIonQnt ?? ''} format="number"/>}  {sdmApplyDetail?.clIonQnt?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>전기전도도(㎲/cm)​</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.cdtnv ?? ''} format="number"/>}  {sdmApplyDetail?.cdtnv?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>비고</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{sdmApplyDetail?.rmrk}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={6} className={TABLE_STYLES.fullWidth}>공급처 후보지​</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>후보지1</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{ sdmApplyDetail?.splyCndtList?.[0]?.ruseUtztnFcltNm ?? ""}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>후보지2</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{sdmApplyDetail?.splyCndtList?.[1]?.ruseUtztnFcltNm ?? ""}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>후보지3</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{sdmApplyDetail?.splyCndtList?.[2]?.ruseUtztnFcltNm ?? ""}</TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </div>
-        </ListDiv>
-        <ListDiv>
-          <div className="card-header">
-            <h3 className="text-2xl font-medium text-label">수요신청 진행상태</h3>
-          </div>
-          <div className={`card !m-[1.2rem] !p-0r`}>
-            <Table variant="secondary" style={{ tableLayout: 'fixed', width: '100%' }}>
-              <TableBody>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>진행상태</TableCell>
-                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.status?.toString()}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>공급처매칭결과</TableCell>
-                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.ruseUtztnFcltNm??''}</TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </div>
-        </ListDiv>
-      </ContentsDiv>
-      {!isLogin?
-        <UiModal
-          body={<SdmLogin/>}
-          bodyClass="sm:max-w-[90vw] w-[530px] h-[430px]"
-          open={!isLogin}
-          onOpenChange={(open) => {
-            if(!open){
-              setIsLogin(false)
-              router.push('/');
-            }
-          }}
-          noHeaderYn="Y"
-          noFooterYn="Y"
-        />
-      :null}
-      <Toaster position="top-center" />
-    </>
-  );
-}
diff --git a/apps/dm/app/(base-layout)/pages/sdmMng/sdmInfoInsert/modalSimilar/page.tsx b/apps/dm/app/(base-layout)/pages/sdmMng/sdmInfoInsert/modalSimilar/page.tsx
deleted file mode 100644
index 35836d07c..000000000
--- a/apps/dm/app/(base-layout)/pages/sdmMng/sdmInfoInsert/modalSimilar/page.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-"use client"
-
-import { useDmStore } from '@/app/store';
-import type { MoneyDetailType, SimilarCaseType } from '@/app/store/sdmMng';
-import { SelectBox, Title, UiTable } from '@common/business_components/ui';
-import { HeadMakeColSpan } from '@common/business_components/ui/table/HeadMakeColSpan';
-import { Table, TableBody, TableCell, TableHeader, TableRow } from '@common/components/ui/table';
-import { useEffect, useMemo, useState } from 'react';
-
-type modalType = {
-  sply: number | 0;
-  usageCd: string | '';
-  money: number | 0;
-};
-
-const searchUseTypeList = [
-  { text: '공급량', val: 'S' },
-  { text: '사용용도', val: 'U' },
-];
-
-export default function ModalSimilarPage({ sply = 0, usageCd = '', money = 0 }: modalType) {
-  const { Sdm, getSimilarCaseList } = useDmStore((state) => state);
-  const [searchUseType, setSearchUseType] = useState<{text: string, value: string}>({text: '공급량', value: 'S'});
-  const [moneyDetailList, setMoneyDetailList] = useState<MoneyDetailType[]>([]);
-  const {
-    upHeadSimilarCaseList,
-    similarCaseList,
-    upHeadMoneyDetailList,
-  } = Sdm;
-
-  const rowSpans = useMemo(() => {
-    const spans: { [key: number]: number } = {};
-    let currentValue = '';
-    let currentSpan = 0;
-    let startIndex = 0;
-
-    similarCaseList.forEach((item: SimilarCaseType, index: number) => {
-      if (item.ruseBizNm === currentValue
-        || item.bizBgngDate === currentValue
-        || item.bizEndDate === currentValue
-        || item.reqBizReuseFcltCst === currentValue) {
-        currentSpan++;
-        spans[startIndex] = currentSpan;
-      } else {
-        currentValue = item.ruseBizNm;
-        currentSpan = 1;
-        startIndex = index;
-        spans[index] = 1;
-      }
-    });
-
-    return spans;
-  }, [similarCaseList]);
-
-  const handleCellClick = (index: number) => {
-    setMoneyDetailList([{
-      reqBizGrssCst: similarCaseList[index]?.reqBizGrssCst ?? '',
-      reqBizReuseFcltCst: similarCaseList[index]?.reqBizReuseFcltCst ?? '',
-      reqBizPplCst: similarCaseList[index]?.reqBizPplCst ?? '',
-      reqBizArchCst: similarCaseList[index]?.reqBizArchCst ?? '',
-      reqBizMchnCst: similarCaseList[index]?.reqBizMchnCst ?? '',
-      reqBizMtrngCst: similarCaseList[index]?.reqBizMtrngCst ?? '',
-      reqBizGisCst: similarCaseList[index]?.reqBizGisCst ?? '',
-      reqBizCctvCst: similarCaseList[index]?.reqBizCctvCst ?? '',
-      reqBizCmcnCst: similarCaseList[index]?.reqBizCmcnCst ?? '',
-      reqBizWstCst: similarCaseList[index]?.reqBizWstCst ?? '',
-      reqBizDesignCst: similarCaseList[index]?.reqBizDesignCst ?? '',
-      reqBizSpvsCst: similarCaseList[index]?.reqBizSpvsCst ?? '',
-      reqBizSbsdCst: similarCaseList[index]?.reqBizSbsdCst ?? '',
-      reqBizEtc: similarCaseList[index]?.reqBizEtc ?? '',
-      prcmPlanNlep: similarCaseList[index]?.prcmPlanNlep ?? '',
-      prcmPlanLcep: similarCaseList[index]?.prcmPlanLcep ?? '',
-      prcmPlanBrdnCst: similarCaseList[index]?.prcmPlanBrdnCst ?? '',
-      prcmPlanEcqrRt: similarCaseList[index]?.prcmPlanEcqrRt ?? '',
-      prcmPlanGrssCst: similarCaseList[index]?.prcmPlanGrssCst ?? '',
-      clclnNlep: similarCaseList[index]?.clclnNlep ?? '',
-      clclnLcep: similarCaseList[index]?.clclnLcep ?? '',
-      clclnBrdnCst: similarCaseList[index]?.clclnBrdnCst ?? '',
-      clclnEcqrRt: similarCaseList[index]?.clclnEcqrRt ?? '',
-      clclnGrssCst: similarCaseList[index]?.clclnGrssCst ?? ''
-    }]);
-  }
-
-  useEffect(() => {
-    const type = searchUseType.value;
-    getSimilarCaseList(type, type === 'S' ? sply : type === 'U' ? usageCd : money);
-  }, [getSimilarCaseList, money, searchUseType, sply, usageCd]);
-
-  return (
-    <div className="align-top w-[1360px] h-full">
-      <Title title="유사사례 조회" />
-      <div className="overflow-x-auto h-[480px] w-full mt-8" tabIndex={0} aria-label="유사사례 테이블 영역">
-        <div className="w-[150%]">
-          <div className="card-header justify-self-start">
-            <h3 className="text-2xl font-medium text-label">유사사례</h3>
-            <SelectBox
-              tabIndex={0}
-              aria-label="검색 기준 선택"
-              selectArray={searchUseTypeList}
-              value={searchUseType.value}
-              onSelectValue={(val) => {
-                setSearchUseType({text: searchUseTypeList.find(item => item.val === val)?.text ?? '', value: val.toString()});
-              }}
-              className="w-[140px] ml-20"
-              label=""
-              selectClass="w-[140px]"
-            />
-          </div>
-          <div className={`card !m-[1.2rem] !p-0r`}>
-            <Table variant="secondary">
-              <TableHeader className="font-bold">
-                <HeadMakeColSpan upHeadList={upHeadSimilarCaseList} />
-              </TableHeader>
-              <TableBody className='text-center'>
-                {similarCaseList.length > 0 ? similarCaseList?.map((el: SimilarCaseType, index) => (
-                  <TableRow key={`similar-case-row-${index}-${el.ruseBizNm}-${el.bizBgngDate}`}>
-                    {upHeadSimilarCaseList.map((head) => (
-                      head.id && head.id.length > 1 && (
-                        <TableCell
-                          tabIndex={head.id === 'someClickableId' ? 0 : undefined}
-                          role="button"
-                          aria-label={`유사사례 ${head.id} 클릭 시 상세 정보 표시`}
-                          className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : typeof el[head.id as keyof SimilarCaseType] === 'number' ? 'text-right' : 'text-center'} cursor-pointer`}
-                          key={`similar-case-cell-${head.id}-${index}-${el.ruseBizNm}`}
-                          rowSpan={(head.id === 'businessName' || head.id ==='businessDuration' || head.id === 'money') ? rowSpans[index] : undefined}
-                          style={(head.id === 'businessName' || head.id === 'businessDuration' || head.id === 'money') && index > 0 && similarCaseList[index - 1]?.ruseBizNm === el.ruseBizNm ? { display: 'none' } : undefined}
-                          onClick={() => handleCellClick(index)}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              handleCellClick(index);
-                            }
-                          }}
-                        >
-                          {typeof el[head.id as keyof SimilarCaseType] !== 'number' 
-                            ? String(el[head.id as keyof SimilarCaseType] ?? '')
-                            : String(el[head.id as keyof SimilarCaseType]).includes('.') 
-                              ? String(el[head.id as keyof SimilarCaseType]).split('.').map((part, index) => 
-                              index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
-                            ).join('.')
-                          : String(el[head.id as keyof SimilarCaseType] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
-                        </TableCell>
-                      )
-                    ))}
-                  </TableRow>
-                )) : <></>}
-              </TableBody>
-            </Table>
-          </div>
-        </div>
-      </div>
-      <div className="overflow-x-auto h-[270px] w-full mt-8 overflow-y-hidden">
-        <div className="w-[130%]">
-          <UiTable
-            headName={"사업비 상세정보"}
-            tableData={moneyDetailList}
-            headlist={upHeadMoneyDetailList}
-            pageSize={0}
-            total={0}
-            cellClick={undefined}
-            onPageChange={() => {}}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/dm/app/(base-layout)/pages/sdmMng/sdmInfoInsert/page.tsx b/apps/dm/app/(base-layout)/pages/sdmMng/sdmInfoInsert/page.tsx
deleted file mode 100644
index df418b20f..000000000
--- a/apps/dm/app/(base-layout)/pages/sdmMng/sdmInfoInsert/page.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-"use client";
-
-/**
- *  수요정보등록 화면
- *
- * 🔗 사용 API
- * - 수요정보등록: POST /reuseFc/request/demandInfo
- */
-import { useDmStore } from "@/app/store";
-import { sdmInfoFormSchema, type DemandCompBizType, type SdmInfoFormData } from "@/app/store/sdmMng";
-import { SdmInfoRegForm } from "@/components/ui/sdmInfoInsertForm/component";
-import { UiModal } from "@common/business_components/ui/dialog_ui";
-import { Button } from "@common/components/ui";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useRouter, useSearchParams } from "next/navigation";
-import { Suspense, useEffect, useState } from "react";
-import { FormProvider, useForm, type SubmitHandler } from "react-hook-form";
-import toast, { Toaster } from "react-hot-toast";
-import SdmLogin from "../sdmLogin/page";
-
-
-
-function SdmInfoInsertContent() {
-  const searchParams = useSearchParams();
-  const { insertSdmInfoData, Sdm, setSubsInfo } = useDmStore((state) => state);
-  const { successLogin } = Sdm;
-  const [ismoneyDisabled, setIsmoneyDisabled] = useState(false);
-  const formSchema = sdmInfoFormSchema;
-
-  const [isLogin, setIsLogin] = useState(false);
-  const [facilityName, setFacilityName] = useState<string>("");
-  const [defaultValues, setDefaultValues] = useState<SdmInfoFormData>({
-    sdmNm: "",
-    demandYmd: new Date(),
-    demandQnty: "",
-    usePurpose: "",
-    money: "",
-    /**요구수질 */
-    reqWaterQlty: "",
-    grssClfg: null,
-    tn: null,
-    combResdch: null,
-    tph: null,
-    trbt: null,
-    ph: null,
-    bod: null,
-    /**컬럼확인필요 */
-    clIonQnt: null,
-    smll: "",
-    cdtnv: null,
-    crmty: null,
-    rmrk: "",
-    /** 후보지 제목 */
-    candidateTitle: [
-      { ruseUtztnFcltNm: "", ruseUtztnFcltCd: "" },
-      { ruseUtztnFcltNm: "", ruseUtztnFcltCd: "" },
-      { ruseUtztnFcltNm: "", ruseUtztnFcltCd: "" },
-    ],
-  });
-
-  useEffect(() => {
-    const user = sessionStorage.getItem("user");
-
-
-    setDefaultValues((prev) => ({
-      ...prev,
-      sdmNm: searchParams.get("dmdCoNm") || "",
-    }));
-    if (searchParams.get("dmdInfoId")) {
-      // const data = {
-      //   dmdCoNm: searchParams.get("dmdCoNm") || '',
-      //   ctpvCd: searchParams.get("ctpvCd") || '',
-      //   sggCd: searchParams.get("sggCd") || '',
-      //   dmdInfoId: searchParams.get("dmdInfoId") || '',
-      //   daddr: searchParams.get("daddr") || '',
-      //   telno: searchParams.get("telno") || '',
-      // }
-
-      // sessionStorage.setItem("user", JSON.stringify(data || {}));
-    }
-    //sessionStorage.setItem("user", JSON.parse(user||'') || "");
-    setIsLogin(user || searchParams.get("dmdInfoId") ? true : false);
-  }, [searchParams]);
-
-  useEffect(() => {
-    const local = localStorage.getItem("user");
-    if (local) {
-      setIsLogin(true);
-    }
-    setSubsInfo([]); // subsInfo 초기화 후보지 처음 화면 들어올때 초기화(스토어내 객체만)
-  }, [setSubsInfo]);
-
-  const form = useForm<SdmInfoFormData>({
-    resolver: zodResolver(formSchema),
-    defaultValues,
-    mode: "onSubmit",
-  });
-
-  const subsInfo = useDmStore((state) => state.map.subsInfo);
-
-  useEffect(() => {
-    //map.subsInfo 스토어 객체 값이 변경되면 해당 값이 폼에 자동으로 들어가도록 수정 대신 값이 있어야함
-    if (subsInfo.length > 0) {
-      form.setValue("candidateTitle", subsInfo);
-    }
-  }, [subsInfo, form]);
-
-  //후보지 팝업 값 셋팅
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.data?.type === "SET_SUBS_INFO") {
-        setSubsInfo(event.data.payload); // zustand로 값 설정
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [setSubsInfo]);
-
-  // 로그인 성공 시 모달 닫기 및 폼 업데이트
-  useEffect(() => {
-    if (successLogin) {
-      setIsLogin(true);
-      const user = sessionStorage.getItem("user");
-      if (user) {
-        try {
-          const userData = JSON.parse(user);
-          if (userData.dmdCoNm) {
-            setFacilityName(userData.dmdCoNm);
-            form.setValue("sdmNm", userData.dmdCoNm); // 수요처명(회사명)
-          }
-        } catch (error) {
-          console.error("Error parsing user data:", error);
-        }
-      }
-    }
-  }, [successLogin, form]);
-
-  useEffect(() => {
-    console.log("Form state changed:", form.formState.errors);
-  }, [form.formState.errors]);
-
-  // 체크박스 상태가 변경될 때마다 money 필드의 에러를 초기화
-  useEffect(() => {
-    if (ismoneyDisabled) {
-      form.clearErrors("money");
-      form.setValue("money", "");
-    }
-  }, [ismoneyDisabled, form]);
-  const router = useRouter();
-  const onSubmit: SubmitHandler<SdmInfoFormData> = async (data) => {
-    try {
-      const dmSubsInfo = data.candidateTitle?.filter(
-        (item) => item.ruseUtztnFcltNm && item.ruseUtztnFcltCd
-      );
-      // Transform form data to madata.candidateTitletch API schema
-      const apiData: DemandCompBizType = {
-        dmdInfoId:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.dmdInfoId?.toString() ||
-          searchParams.get("dmdInfoId") + (searchParams.get("bznmTotNo") || ""),
-        dmdInfoFk:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.dmdInfoId?.toString() ||
-          searchParams.get("dmdInfoId") + (searchParams.get("bznmTotNo") || ""),
-        dmdCoNm:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.dmdCoNm?.toString() || data.sdmNm,
-        ctpvCd:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.ctpvCd?.toString() ||
-          searchParams.get("ctpvCd") ||
-          "",
-        sggCd:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.sggCd?.toString() ||
-          searchParams.get("sggCd") ||
-          "",
-        daddr:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.daddr?.toString() ||
-          searchParams.get("daddr") ||
-          "",
-        telno:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.telno?.toString() ||
-          searchParams.get("telno") ||
-          "",
-        rgtr:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.rgtr?.toString() ||
-          searchParams.get("rgtr") ||
-          "",
-        useUsgCd: data.usePurpose || "",
-        wntUntprc: Number(data.money) || "",
-        dmndTmng: data.demandYmd || new Date(),
-        dmndQty: Number(data.demandQnty) || "",
-        grssClfg: data.grssClfg === null ? -1 : Number(data.grssClfg),
-        tn: Number(data.tn) || null,
-        combResdch: Number(data.combResdch) || null,
-        tph: Number(data.tph) || null,
-        trbt: Number(data.trbt) || null,
-        ph: data.ph || "",
-        blgcOxygDmndQnt: Number(data.bod) || null,
-        clIonQnt: Number(data.clIonQnt) || null,
-        smll: data.smll || "",
-        cdtnv: Number(data.cdtnv) || null,
-        crmty: Number(data.crmty) || null,
-        rmrk: data.rmrk || "",
-        bzmnNo: "",
-        dmdAplyPswd: "",
-        index: 0,
-        reqDt: "",
-        dmdInfoSn: 0,
-        status: "",
-        splyCndtList: dmSubsInfo || [],
-      };
-
-      await insertSdmInfoData(apiData);
-      setTimeout(() => {
-        router.push("/");
-      }, 1000); // 0.8초 후 이동
-    } catch (error) {
-      console.error("Error submitting form:", error);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-[#F2F2F2]">
-      <div className="container mx-auto px-4 py-8">
-        <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-gray-900 underline">
-            수요정보 등록
-          </h1>
-        </div>
-
-        <div className="max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6">
-          <FormProvider {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-              <SdmInfoRegForm
-                form={form}
-                onCheckboxChange={setIsmoneyDisabled}
-                facilityName={facilityName}
-              />
-              <div className="flex justify-center pt-4">
-                <Button
-                  color="sky"
-                  size={"sm"}
-                  type="submit"
-                  className="w-40 font-semibold py-2 px-4 rounded-md "
-                >
-                  수요정보 등록
-                </Button>
-              </div>
-            </form>
-          </FormProvider>
-        </div>
-      </div>
-
-      {!isLogin ? (
-        <UiModal
-          body={<SdmLogin />}
-          bodyClass="sm:max-w-[90vw] w-[530px] h-[430px]"
-          open={!isLogin}
-          onOpenChange={(open) => {
-            if (!open) {
-              toast.dismiss();
-              router.push("/");
-            }
-          }}
-          noHeaderYn="Y"
-          noFooterYn="Y"
-        />
-      ) : null}
-      <Toaster position="top-center" />
-    </div>
-  );
-}
-
-export default function MyForm() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <SdmInfoInsertContent />
-    </Suspense>
-  );
-}
diff --git a/apps/dm/app/(base-layout)/pages/sdmMng/sdmInsert/page.tsx b/apps/dm/app/(base-layout)/pages/sdmMng/sdmInsert/page.tsx
deleted file mode 100644
index 79eb07830..000000000
--- a/apps/dm/app/(base-layout)/pages/sdmMng/sdmInsert/page.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-"use client";
-
-import { useDmStore } from "@/app/store";
-import SdmInsertForm from '@common/business_components/ui/sdmInsertForm';
-import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
-import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useRef } from "react";
-import { Toaster } from "react-hot-toast";
-
-export default function MyForm() {
-  const { Common, initializeCommonData, getDemandCompList, insertSdmData, Sdm } = useDmStore((state) => state);
-  const { selectSidoData, selectSigunData } = Common;
-  const { demandCompList, successNextPage } = Sdm;
-  const router = useRouter();
-  const formDataRef = useRef<DemandCompType | null>(null);
-
-  useEffect(() => {
-    initializeCommonData();
-  }, [initializeCommonData]);
-
-  useEffect(() => {
-    if (successNextPage && formDataRef.current) {
-      const data = formDataRef.current;
-      console.log(data);
-      const queryParams = new URLSearchParams({
-        dmdCoNm: data.dmdCoNm || '',
-        ctpvCd: data.ctpvCd || '',
-        sggCd: data.sggCd || '',
-        dmdInfoId: data.dmdInfoId || '',
-        daddr: data.daddr || '',
-        telno: data.telno || '',
-      });
-      router.push(`/pages/sdmMng/sdmInfoInsert?${queryParams.toString()}`);
-    }
-  }, [successNextPage, router]);
-
-  const callback = useCallback((searchText: string, pageCnt: number) => {
-    searchText = searchText.trim();
-    if (searchText.length > 0) {
-      getDemandCompList(searchText, pageCnt);
-    }
-  }, [getDemandCompList]);
-
-  const handleInsertSdmData = useCallback((data: import('@common/business_components/ui/sdmInsertForm/form').DemandCompType) => {
-    const convertedData: DemandCompType = {
-      ...data,
-    };
-    formDataRef.current = convertedData;
-    insertSdmData(convertedData)
-  }, [insertSdmData]);
-
-  return (
-    <div className="min-h-screen bg-[#F2F2F2]">
-      <div className="pt-12">
-        <SdmInsertForm
-          selectSidoData={selectSidoData}
-          selectSigunData={selectSigunData}
-          dataList={demandCompList}
-          rtnValue={callback}
-          rtnInputData={handleInsertSdmData}
-          openNetwork={true}
-        />
-        <Toaster position="top-center" />
-      </div>
-    </div>
-  );
-}
diff --git a/apps/dm/app/(base-layout)/pages/sdmMng/sdmLogin/page.tsx b/apps/dm/app/(base-layout)/pages/sdmMng/sdmLogin/page.tsx
deleted file mode 100644
index 2fd6fc461..000000000
--- a/apps/dm/app/(base-layout)/pages/sdmMng/sdmLogin/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client'
-
-import { SdmLoginForm } from '@/components/ui/sdmLoginForm/component';
-
-export default function SdmLogin() {
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="text-center mb-8">
-        <h1 className="text-4xl font-bold text-gray-900 underline">
-          수요처 로그인
-        </h1>
-      </div>
-      <div className="max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6">
-        <SdmLoginForm />
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/apps/dm/app/(base-layout)/pages/sdmMng/sdmLogout/page.tsx b/apps/dm/app/(base-layout)/pages/sdmMng/sdmLogout/page.tsx
deleted file mode 100644
index 2c682bdbf..000000000
--- a/apps/dm/app/(base-layout)/pages/sdmMng/sdmLogout/page.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client";
-/**
- *  수요처 로그아웃 화면
- *
- * 🔗 사용 API
- *  
- */
-import { useDmStore } from "@/app/store";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-
-export default function SdmLogout() {
-  const router = useRouter();
-  const { actionLogout } = useDmStore((state) => state);
-
-  useEffect(() => {
-    actionLogout();
-    router.push("/pages/sdmMng/sdmInfoInsert");
-  }, [actionLogout, router]);
-
-  return null;
-}
diff --git a/apps/dm/app/(base-layout)/pages/wrAbout/page.tsx b/apps/dm/app/(base-layout)/pages/wrAbout/page.tsx
deleted file mode 100644
index da3324ffc..000000000
--- a/apps/dm/app/(base-layout)/pages/wrAbout/page.tsx
+++ /dev/null
@@ -1,339 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import Image from 'next/image';
-
-const NAVS = [
-  { id: 'card1', label: '물재이용이란' },
-  { id: 'card2', label: '물재이용 필요성' },
-  { id: 'card3', label: '빗물 재이용' },
-  { id: 'card4', label: '중수 재이용' },
-  { id: 'card5', label: '하수 재이용' },
-  { id: 'card6', label: '물재이용 목표' },
-];
-
-export default function WrAboutPage() {
-  const [activeIdx, setActiveIdx] = useState(0);
-  const navRefs = useRef<(HTMLLIElement | null)[]>([]);
-  const cardRefs = useRef<(HTMLElement | null)[]>([]);
-
-  // 클릭 시 이동
-  const handleNavClick = (idx: number) => {
-    setActiveIdx(idx);
-    const targetCard = cardRefs.current[idx];
-    if (targetCard) {
-      targetCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-  };
-
-  // 키보드 이벤트 처리
-  const handleKeyDown = (e: React.KeyboardEvent, idx: number) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleNavClick(idx);
-    }
-  };
-
-  useEffect(() => {
-    const observerOptions = {
-      root: null,
-      rootMargin: '-200px 0px 0px 0px', // 상단에서 200px 지점을 기준으로
-      threshold: 0
-    };
-
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          const idx = cardRefs.current.findIndex(ref => ref === entry.target);
-          if (idx !== -1) {
-            setActiveIdx(idx);
-          }
-        }
-      });
-    }, observerOptions);
-
-    // 각 카드 요소를 관찰
-    const cardsSnapshot = [...cardRefs.current];
-
-    cardsSnapshot.forEach((card) => {
-      if (card) {
-        observer.observe(card);
-      }
-    });
-  
-    return () => {
-      cardsSnapshot.forEach((card) => {
-        if (card) {
-          observer.unobserve(card);
-        }
-      });
-    };
-  }, []);
-
-  return (
-    <div className='bg-[#F2F2F2]'>
-      <main className="relative w-[950px] mx-auto pt-[100px] font-sans">
-        {/* 사이드바 */}
-        <nav className="fixed left-[290px] top-[195px] w-[210px] z-50" aria-label="물재이용 정보 섹션 내비게이션">
-          <ul role="list" className="relative space-y-6">
-            {NAVS.map((nav, idx) => (
-              <li
-                key={nav.id}
-                ref={(el) => { navRefs.current[idx] = el; }}
-                role="listitem"
-                tabIndex={0}
-                aria-current={idx === activeIdx ? 'true' : 'false'}
-                aria-label={`현재 위치: ${nav.label}`}
-                onClick={() => handleNavClick(idx)}
-                onKeyDown={(e) => handleKeyDown(e, idx)}
-                className={`font-NotoSansKR nav-item relative pl-6 text-2xl font-bold text-[#383838] cursor-pointer transition-all duration-300
-                after:content-[''] after:absolute after:top-6 after:left-[0.5rem] after:w-[2px] after:h-[24px] after:bg-[#C5C5C5] last:after:hidden 
-                ${idx === activeIdx ? 'text-4xl font-bold text-[#383838]' : ''}`}
-              >
-                <span className={`absolute left-[0.5rem] top-1 w-4 h-4 rounded-full -translate-x-1/2 transition-all duration-300
-                ${idx === activeIdx ? 'bg-blue-500 border-blue-500' : 'bg-white border-gray-400 border'}`}></span>
-                {nav.label}
-              </li>
-            ))}
-          </ul>
-        </nav>
-
-        <article ref={(el) => { cardRefs.current[0] = el; }} className="card-wrap pl-[100px] mb-24 !pt-0" id="card1" aria-labelledby="card1-title">
-          <h2 id="card1-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
-            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-            물재이용이란
-          </h2>
-          <section aria-labelledby="card1-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
-            <h1 id="card1-desc" className="font-NotoSansKR text-[#269DDA] text-5xl font-bold mb-8">물 재이용이 무엇인가요?</h1>
-            <p className="font-NotoSansKR text-[#231815] text-2xl mb-10 leading-relaxed">
-              물 재이용은 빗물, 오수, 하수처리수, 폐수처리수 및 발전소 온배수를<br />
-              물 재이용시설을 이용하여 처리하고, 그 처리된 물을 생활, 공업, 농업, 조경,<br />
-              하천 유지 등의 용도로 이용하는 것을 말합니다.
-            </p>
-            <Image
-              src="/img/wrAbout/img_01_1.png"
-              alt="이 이미지는 물 재이용 시스템의 개요를 나타냅니다. 가정, 공공기관, 하수처리장 등에서 발생한 생활하수, 빗물, 하수처리수를 물 재이용 시설에서 처리한 후, 청소나 화장실, 농업, 살수차, 하천 유지, 공장, 공원 및 골프장 등 다양한 용도로 활용하는 과정을 도식화한 것입니다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto mb-8 rounded"
-            />
-            <p className="font-NotoSansKR text-center font-normal text-2xl">
-              환경부는 2011년에 &apos;물의 재이용 촉진 및 지원에 관한 법률&apos;을 제정하여<br />
-              한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다.
-            </p>
-          </section>
-        </article>
-
-        {/* 카드2 */}
-        <article ref={(el) => { cardRefs.current[1] = el; }} className="card-wrap pl-[100px] mb-24" id="card2" aria-labelledby="card2-title">
-          <h2 id="card2-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
-            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-            물재이용 필요성
-          </h2>
-          <section aria-labelledby="card2-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
-            <h1 id="card2-desc" className="font-NotoSansKR text-[#D63F1F] text-5xl font-semibold mb-8">물 재이용, 왜 필요한가요?</h1>
-            <p className="font-NotoSansKR text-2xl font-normal mb-10 leading-relaxed">
-              빗물, 중수, 하수처리수는 지속적으로 이용 가능한 순환자원입니다.<br />
-              물 재이용을 통한 효율적인 수자원 활용은 물 스트레스국가인 우리나라에서<br />가뭄대응능력 향상 및 하천수질보전을 위해 반드시 필요한 일입니다.
-            </p>
-            <Image
-              src="/img/wrAbout/img_02_1.png"
-              alt="이 이미지는 기후변화로 인한 온도 상승 추이를 설명한다. 왼쪽에는 지구 그림과 온도계가 함께 표시되어 있으며, 지구 평균 기온은 지난 100년간 약 0.9℃ 상승했음을 나타낸다. 오른쪽에는 대한민국 지도와 함께 온도계가 있으며, 지난 100년간 약 1.8℃ 상승했음을 보여준다. 이는 지구 평균보다 2배 높은 수치이며, 자료 출처는 「기후변화 평가보고서 2020, 환경부·기상청」이다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto mb-8 w-[80%]"
-            />
-            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">
-              - 우리나라의 기후변화 진행속도는 세계 평균을 상회하고 있습니다.<br />
-              - 기후변화로 인한 국지적인 가뭄은 더욱 자주, 더욱 심하게 일어나고 있으며, 우리의 물 안보를 위협하고 있습니다.
-            </p>
-            <Image
-              src="/img/wrAbout/img_02_2.png"
-              alt="세계 평균 1인당 강수량은 15,044m³이며, 대한민국은 2,546m³로 약 1/6 수준입니다. 계절별 강수량은 봄 10%, 여름 70%, 가을 15%, 겨울 5%입니다. 이는 여름철에 강수량이 집중되는 문제를 나타냅니다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto mb-8"
-            />
-            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">
-              - 우리나라의 1인당 강수량은 2,546㎥ 으로 세계 평균 15,044㎥의 약 1/6 수준입니다.<br />
-              - 우리나라 강수량의 70%는 여름철에 집중되어 있어 이용 가능한 수자원확보가 어렵습니다.
-            </p>
-            <Image
-              src="/img/wrAbout/img_02_3.png"
-              alt="물 재이용은 환경을 보호하며 지속 가능한 발전이 가능하게 하고, 안정적인 수자원 확보, 깨끗하고 경제적인 공업용수 공급, 하천 수질 개선을 통한 생태계 회복에 기여합니다."
-              width={800}
-              height={400}
-              className="w-[93%] mx-auto"
-            />
-          </section>
-        </article>
-
-        {/* 카드3 */}
-        <article ref={(el) => { cardRefs.current[2] = el; }} className="card-wrap pl-[100px] mb-24" id="card3" aria-labelledby="card3-title">
-          <h2 id="card3-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
-            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-            빗물 재이용
-          </h2>
-          <section aria-labelledby="card3-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
-            <h1 id="card3-desc" className="font-NotoSansKR leading-snug text-[#269DDA] text-5xl font-bold mb-6">친환경 수자원 빗물,<br />편리하게 사용할 수 있어요!</h1>
-            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">가뭄을 극복하고 홍수를 예방하기 위해<br />비가 내릴 때 빗물을 모아두었다가 사용합니다.</p>
-            <Image
-              src="/img/wrAbout/img_03_1.png"
-              alt="주택 지붕에 내린 빗물을 저장조에 모아 조경용수, 화장실용수, 세척·살수용수로 재활용하는 과정을 보여줍니다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto mb-6"
-            />
-            <Image
-              src="/img/wrAbout/img_03_2.png"
-              alt="빗물이용"
-              width={200}
-              height={100}
-              className="mb-5 w-[20%]"
-            />
-            <p className="font-NotoSansKR text-2xl leading-relaxed">
-              - 의무 설치대상: 지붕면적 1,000㎡ 이상의 운동장, 체육관, 공공업무시설 등<br />
-              - 설 치 기 준: 집수시설, 처리시설, 빗물 저류조(지붕 집수면적 x 0.05m 이상)<br />
-              - 활 용 용 도: 골프장 등의 조경용수, 화장실용수, 세척·살수용수 등
-            </p>
-          </section>
-        </article>
-
-        {/* 카드4 */}
-        <article ref={(el) => { cardRefs.current[3] = el; }} className="card-wrap pl-[100px] mb-24" id="card4" aria-labelledby="card4-title">
-          <h2 id="card4-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
-            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-            중수 재이용
-          </h2>
-          <section aria-labelledby="card4-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
-            <h1 id="card4-desc" className="font-NotoSansKR leading-snug text-[#9771B0] text-5xl font-bold mb-6">요모조모 쓸모 많은 중수,<br />알뜰하게 재이용할 수 있어요!</h1>
-            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">한번 사용한 물을 중수도 시설을 통해 재생하여<br />개별적 또는 지역적으로 재이용할 수 있습니다.</p>
-            <Image
-              src="/img/wrAbout/img_04_1.png"
-              alt="욕실, 세면대, 주방, 세탁기 등에서 발생한 생활용수를 중수도 시설에서 처리하여 화장실 변기용수와 조경용수로 재이용하는 시스템 흐름도입니다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto mb-6"
-            />
-            <Image
-              src="/img/wrAbout/img_04_2.png"
-              alt="중수재이용"
-              width={200}
-              height={100}
-              className="mb-5 w-[20%]"
-            />
-            <p className="font-NotoSansKR text-2xl leading-relaxed">
-              - 의무 설치대상: 일정규모 이상의 대규모점포, 숙박/목욕장, 공장, 각종 개발사업 등<br />
-              - 의무 재이용량: 물 사용량의 10% 이상<br />
-              - 활 용 용 도: 청소·화장실용수, 세척·살수용수, 조경용수, 공업용수 등
-            </p>
-          </section>
-        </article>
-
-        {/* 카드5 */}
-        <article ref={(el) => { cardRefs.current[4] = el; }} className="card-wrap pl-[100px] mb-24" id="card5" aria-labelledby="card5-title">
-          <h2 id="card5-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
-            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-            하수 재이용
-          </h2>
-          <section aria-labelledby="card5-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
-            <h1 id="card5-desc" className="font-NotoSansKR leading-snug text-[#00818A] text-5xl font-bold mb-6">아직 할 일이 많은 하수처리수,<br />풍족하게 재이용할 수 있어요!</h1>
-            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">사용하고 버려져 공공하수처리장으로 모여든 물은<br />용도에 맞는 처리 후 재이용 할 수 있습니다.</p>
-            <Image
-              src="/img/wrAbout/img_05_1.png"
-              alt="주택과 건물에서 발생한 하수가 공공하수처리장을 거쳐 처리된 후, 물 재이용 시설에서 정화되어 공업용수, 하천유지용수, 농업용수, 세척·살수용수로 재활용됩니다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto mb-6"
-            />
-            <Image
-              src="/img/wrAbout/img_05_2.png"
-              alt="하수처리 재이용"
-              width={200}
-              height={100}
-              className="mb-5 w-[20%]"
-            />
-            <p className="font-NotoSansKR text-2xl leading-relaxed">
-              - 의무 이용대상: 공공하수처리장(시설용량 5,000㎥/일 이상)<br />
-              - 의무 재이용량: 일 하수처리량의 10% 이상<br />
-              - 활 용 용 도: 공업용수, 하천유지용수, 농업용수 등
-            </p>
-          </section>
-        </article>
-
-        {/* 카드6 */}
-        <article ref={(el) => { cardRefs.current[5] = el; }} className="card-wrap pl-[100px] mb-24" id="card6" aria-labelledby="card6-title">
-          <h2 id="card6-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
-            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-            물재이용 목표
-          </h2>
-          <section aria-labelledby="card6-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
-            <h1 id="card6-desc" className="font-NotoSansKR leading-snug text-[#269DDA] text-5xl font-bold mb-6">2030년 물 재이용 목표를 위해<br />모두의 관심과 노력이 필요합니다.</h1>
-            <p className="font-NotoSansKR text-2xl mb-6 leading-relaxed">
-              환경부는 2030년까지의 제2차 물 재이용 기본계획을 수립하여<br />한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다.
-            </p>
-            <Image
-              src="/img/wrAbout/img_06_1.png"
-              alt="지속가능한 물 재이용 정착으로 건전한 물순환 확산"
-              width={800}
-              height={400}
-              className="w-[80%] mx-auto mb-6"
-            />
-            <div className="flex gap-3 flex-wrap justify-between bg-gray-100 p-6 rounded-lg mb-8">
-              <div className="flex-1 text-center">
-                <Image
-                  src="/img/wrAbout/icon_01.png"
-                  alt=""
-                  width={70}
-                  height={70}
-                  className="mx-auto mb-4 w-[auto] h-[70px]"
-                />
-                <h3 className="font-NotoSansKR text-center font-medium text-nowrap mb-2 text-2xl">도시 물 순환이용<br />체계로의 전환</h3>
-                <ul className="font-NotoSansKR text-xl text-gray-600 leading-relaxed space-y-1">
-                  <li className="text-nowrap">- 지속가능한 물 순환이용체계 구축</li>
-                  <li>- 물 재이용시설 관리체계 강화</li>
-                </ul>
-              </div>
-              <div className="flex-1 text-center">
-                <Image
-                  src="/img/wrAbout/icon_02.png"
-                  alt=""
-                  width={70}
-                  height={70}
-                  className="mx-auto mb-4 w-[auto] h-[70px]"
-                />
-                <h3 className="font-NotoSansKR text-center font-medium text-nowrap mb-2 text-2xl">유역기반 하수처리수 재이용<br />수요확대 및 공급체계 구축</h3>
-                <ul className="font-NotoSansKR text-xl text-gray-600 leading-relaxed space-y-1">
-                  <li>- 유역기반 통합물관리 연계 강화</li>
-                  <li>- 하수처리수 재이용 공업용수 공급 활성화</li>
-                  <li>- 하수처리수 재이용을 활용한 물순환 촉진</li>
-                </ul>
-              </div>
-              <div className="flex-1 text-center">
-                <Image
-                  src="/img/wrAbout/icon_03.png"
-                  alt=""
-                  width={70}
-                  height={70}
-                  className="mx-auto mb-4 w-[auto] h-[70px]"
-                />
-                <h3 className="font-NotoSansKR text-center font-medium text-nowrap mb-2 text-2xl">물 재이용 인식제고<br />및 산업발전 기반 마련</h3>
-                <ul className="font-NotoSansKR text-xl text-gray-600 leading-relaxed space-y-1">
-                  <li>- 물 재이용 교육 및 대국민 홍보 강화</li>
-                  <li>- 핵심기술 육성 및 산업발전 지원 강화</li>
-                </ul>
-              </div>
-            </div>
-            <Image
-              src="/img/wrAbout/img_06_2.png"
-              alt="물 재이용량은 2014년 13.3억톤에서 2030년 25.9억톤까지 증가할 것으로 예상됩니다. 그에 따른 기대 효과로는 연간 상수대체 17.9억톤, 물산업 시장성장 약 2조3,541억 원, 건천화된 73개 하천 해소, 약 20,550명의 고용 효과가 포함됩니다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto"
-            />
-          </section>
-        </article>
-      </main>
-    </div>
-  );
-}
diff --git a/apps/dm/app/(base-layout)/pages/wrExample/page.tsx b/apps/dm/app/(base-layout)/pages/wrExample/page.tsx
deleted file mode 100644
index 4849c02b0..000000000
--- a/apps/dm/app/(base-layout)/pages/wrExample/page.tsx
+++ /dev/null
@@ -1,364 +0,0 @@
-import Image from "next/image";
-
-export default function WrExamplePage() {
-  return (
-    <div className="bg-[#F2F2F2]">
-      <div className="relative w-[950px] mx-auto pt-[50px] font-sans">
-        <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-          <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 rounded-full"></span>
-          물 재이용사례
-        </h2>
-      </div>
-      <div className="bg-[#F2F2F2] text-gray-800">
-        <div className="relative w-[950px] mx-auto pt-[50px] font-sans">
-          {/* 카드 1 */}
-          <div className="card-wrap mb-24" id="card1">
-            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-              사업사례 1 
-            </h2>
-            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
-              {/* 사업명 */}
-              <section>
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  경기권역 반도체 사업장 물 재이용 사업<br />
-                  : 삼성전자 반도체 사업장 하수재이용수 공급(재이용시설 설치, 공급망 구축 등)
-                </p>
-              </section>
-              {/* 사업 배경 및 목적 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 배경 및 목적</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  삼성전자는 환경경영전략 실현과 반도체 공장의 안정적 용수 공급을 위해 하수 재이용수를 공업용수로 도입하기로 결정
-                </p>
-              </section>
-              {/* 사업 주요 내용 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  1단계 사업[화성·오산(12만㎥/일) → 삼성 화성·기흥(29년 공급)]<br />
-                  2단계 사업[수원(21만㎥/일) → 삼성 평택(30년 공급)]
-                </p>
-              </section>
-              {/* 특이사항 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  본 사업은 광역 하수 재이용 공급망 구축의 첫 사업으로 초기 민관협의체를 구성·운영 후 관계기관(환경부, 경기도, 지자체, 공단, 수공, 삼성전자) 간 MOU 체결을 통해 사업을 추진하였으며, 반도체 사업장에 하수 재이용수를 공업용수로 공급하는 국내 첫 사업으로 위협부담 해소를 위해 사업을 단계별로 시행
-                </p>
-              </section>
-              {/* 단계별 시각 정보 */}
-              <section className="bg-white px-4 mt-8">
-                <Image 
-                  src="/img/wrExample/img_ex_01_1.png" 
-                  alt="사업단계 설명" 
-                  width={800}
-                  height={400}
-                  className="w-[100%] mx-auto mb-8" 
-                />
-              </section>
-            </div>
-          </div>
-
-          {/* 카드2 */}
-          <div className="card-wrap mb-24" id="card2">
-            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-              사업사례 2
-            </h2>
-            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
-              {/* 사업명 */}
-              <section>
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  경기도 파주시 하수재이용<br />
-                  : 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급<br /><br />
-                  *LG디스플레이(P10공장), 희성전자, 엔비텍 등
-                </p>
-              </section>
-              {/* 사업 방식 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 방식</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)
-                </p>
-              </section>
-              {/* 사업 주요 내용 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)<br />
-                  공급량 : 4만m³/일<br />
-                  관로 : 13.6km<br />
-                  사업비 : 651억원
-                </p>
-              </section>
-              {/* 특이사항 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례
-                </p>
-                <div className="grid grid-cols-1 gap-0 items-start">
-                  {/* 좌측 이미지 */}
-                  <div>
-                    <Image 
-                      src="/img/wrExample/img_ex_02_1.png" 
-                      alt="적용 성공사례 지도" 
-                      width={1000}
-                      height={1200}
-                      className="w-[100%] mx-auto" 
-                    />
-                  </div>
-
-                  {/* 우측 표 */}
-                  <div className="space-y-3">
-                    {/* 하수처리수 공급 */}
-                    <div>
-                      <table className="min-w-full h-[500px]text-center border border-black">
-                        <colgroup>
-                          <col style={{ width: "20%" }} />
-                          <col style={{ width: "40%" }} />
-                          <col style={{ width: "40%" }} />
-                        </colgroup>
-                        <tbody>
-                          <tr>
-                            <td colSpan={3} className="font-NotoSansKR bg-[#ffc000] h-[30px] text-xl text-white font-semibold text-center pt-[6px] pb-[6px] px-0">하수처리수 공급</td>
-                          </tr>
-                          <tr className="text-xl h-[30px]">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">위치</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">금촌하수</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">운정하수</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">시설용량</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">44,000㎥/일</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">60,000㎥/일</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">유입량</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">27,000㎥/일<br />자연유하</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">30,000㎥/일<br />이송펌프장</td>
-                          </tr>
-                        </tbody>
-                      </table>
-                      {/* 첫 화살표 (자연유하 / 관로이송) */}
-                      <div className="flex h-[30px] justify-between items-center my-3 px-4">
-                        <div className="flex text-xl items-center gap-1 text-orange-600 font-bold pl-6">
-                          <span className="font-NotoSansKR">자연유하: 161m</span>
-                          <Image 
-                            src="/img/wrExample/img_arrow_down_1.png" 
-                            alt="오른쪽 화살표" 
-                            width={24}
-                            height={24}
-                            className="h-6 w-6" 
-                          />
-                        </div>
-                        <div className="flex text-xl items-center gap-1 text-orange-600 font-bold">
-                          <Image 
-                            src="/img/wrExample/img_arrow_down_1.png" 
-                            alt="왼쪽 화살표" 
-                            width={24}
-                            height={24}
-                            className="h-6 w-6" 
-                          />
-                          <span className="font-NotoSansKR">관로이송: 3.2km</span>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 물재이용 처리시설 */}
-                    <div>
-                      <table className="min-w-full text-center border border-black">
-                        <colgroup>
-                          <col style={{ width: "50%" }} />
-                          <col style={{ width: "50%" }} />
-                        </colgroup>
-                        <tbody>
-                          <tr>
-                            <td colSpan={2} className="font-NotoSansKR bg-[#00b050] text-xl h-[30px] text-white font-semibold text-center pt-[6px] pb-[6px] px-0">물재이용 처리시설</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">유입유량</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">57,000㎥/일</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">재이용시설</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">40,000㎥/일</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">농축폐수처리</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">17,000㎥/일</td>
-                          </tr>
-                        </tbody>
-                      </table>
-                      {/* 두 번째 화살표 (공급관로) */}
-                      <div className="flex flex-col items-center my-3">
-                        <div className="flex h-[30px] items-center gap-1 text-xl text-blue-600 font-semibold">
-                          <span className="font-NotoSansKR">공급관로 L=10.4km</span>
-                          <Image 
-                            src="/img/wrExample/img_arrow_down_2.png" 
-                            alt="아래 화살표" 
-                            width={24}
-                            height={24}
-                            className="h-6 w-6" 
-                          />
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 수요처 공급 */}
-                    <div>
-                      <table className="min-w-full text-center border border-black">
-                        <colgroup>
-                          <col style={{ width: "50%" }} />
-                          <col style={{ width: "50%" }} />
-                        </colgroup>
-                        <tbody>
-                          <tr>
-                            <td colSpan={2} className="font-NotoSansKR bg-[#3399ff] h-[30px] text-xl text-white font-semibold text-center pt-[6px] pb-[6px] px-0">수요처 공급</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">수요처</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">LG디스플레이 외 2개사</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">수요량</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">40,000㎥/일</td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                </div>
-              </section>
-            </div>
-          </div>
-
-          {/* 카드3 */}
-          <div className="card-wrap mb-24" id="card3">
-            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-              사업사례 3
-            </h2>
-            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
-              {/* 사업명 */}
-              <section>
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  충남 보령 하수재이용<br />
-                  : 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진
-                </p>
-              </section>
-              {/* 사업 방식 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 방식</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결
-                </p>
-              </section>
-              {/* 사업 주요 내용 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)<br />
-                  공급량 : 1만m3/일<br />
-                  관로 : 8.7km<br />
-                  사업비 : 315억원(국비 216억원, 재원협의(안))
-                </p>
-              </section>
-              {/* 특이사항 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU (환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕
-                  으로 추진 되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모
-                </p>
-                <div className="p-2">
-                  <Image 
-                    src="/img/wrExample/img_ex_03_1.png" 
-                    alt="국가전력 기반시설 설명" 
-                    width={700}
-                    height={350}
-                    className="w-[100%] mx-auto" 
-                  />
-                </div>
-              </section>
-            </div>
-          </div>
-
-          {/* 카드4 */}
-          <div className="card-wrap mb-24" id="card4">
-            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-              사업사례 4
-            </h2>
-            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
-              {/* 사업명 */}
-              <section>
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  경기도 수원시 빗물이용과 중수도
-                </p>
-              </section>
-              {/* 사업 내용 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 내용</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  (빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로 비산먼지 저감<br />
-                  &nbsp;&nbsp;※ 시설 가동중 도로 노면 온도의 7.2 ~ 26.3℃ 감소 효과 확인(21.7월, 수원시청).<br />
-                  &nbsp;&nbsp;다만, 가뭄기나 강우량이 적을 경우 빗물을 원활히 공급하기 다소 곤란<br /><br />
-                  - (중수도) 수원시청, 장안구청, 월드컵경기장에 빗물 연계 중수도를 화장실·조경용수 등으로 사용하여 수도요금 절감(연 7백~30백만원)
-                </p>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-start p-2">
-                  <div>
-                    <Image 
-                      src="/img/wrExample/img_ex_04_1.png" 
-                      alt="월드컵경기장 인근도로 노면 살수 이미지" 
-                      width={350}
-                      height={250}
-                      className="w-[100%] mx-auto" 
-                    />
-                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜월드컵경기장 인근도로 노면 살수＞</span>
-                  </div>
-                  <div>
-                    <Image 
-                      src="/img/wrExample/img_ex_04_2.png" 
-                      alt="주유기 모양의 빗물 공급기 이미지" 
-                      width={350}
-                      height={250}
-                      className="w-[100%] mx-auto" 
-                    />
-                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜주유기 모양의 빗물 공급기＞</span>
-                  </div>
-                  <div>
-                    <Image 
-                      src="/img/wrExample/img_ex_04_3.png" 
-                      alt="빗물주유기에서 살수용수 공급 이미지" 
-                      width={350}
-                      height={250}
-                      className="w-[100%] mx-auto" 
-                    />
-                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜빗물주유기에서 살수용수 공급＞</span>
-                  </div>
-                  <div>
-                    <Image 
-                      src="/img/wrExample/img_ex_04_4.png" 
-                      alt="빗물 공급기 및 빗물분사장치 위치" 
-                      width={350}
-                      height={250}
-                      className="w-[100%] mx-auto" 
-                    />
-                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜빗물 공급기 및 빗물분사장치 위치＞</span>
-                  </div>
-                </div>
-              </section>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
diff --git a/apps/dm/app/(base-layout)/pages/wrOverview/page.tsx b/apps/dm/app/(base-layout)/pages/wrOverview/page.tsx
deleted file mode 100644
index 3e5825899..000000000
--- a/apps/dm/app/(base-layout)/pages/wrOverview/page.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import Image from "next/image";
-
-export default function WrOverviewPage() {
-  return (
-    <div className="bg-[#F2F2F2]">
-        <div className="relative w-[950px] mx-auto pt-[50px] font-sans">
-          {/* 카드 1 - 물재이용 사업 추진 절차 */}
-          <div className="card-wrap mb-24" id="card1">
-            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-              물재이용 사업 추진 절차 
-            </h2>
-            <div className="bg-white border border-gray-300 rounded-xl p-[60px] py-[50px]">
-              <table className="table-fixed w-full text-center text-sm">
-                <caption className="sr-only">물 재이용 추진 절차 상세 표</caption>
-                <colgroup>
-                  <col style={{ width: "28%" }} />
-                  <col style={{ width: "2%" }} />
-                  <col style={{ width: "35%" }} />
-                  <col style={{ width: "5%" }} />
-                  <col style={{ width: "30%" }} />
-                </colgroup>
-                <tbody>
-                  {/* 1단계 */}
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">타당성 조사</td><td></td><td></td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 2단계 */}
-                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">매칭시스템 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">사업계획(안) 수립</td><td></td><td></td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 3단계 */}
-                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">하수도정보시스템 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">국고지원 신청</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 4단계 */}
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">국고지원 확정 통보</td><td></td><td></td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 5단계 */}
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">사업계획 수립(실시설계)</td><td></td><td></td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 6단계 */}
-                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">(행정관) 기술검토 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">재원협의(지방환경관서장)</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 7단계 */}
-                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">(행정관) 기술검토 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">설치승인(시도지사)</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 8단계 */}
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">공사시행</td><td></td><td></td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 9단계 */}
-                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">(행정관) 기술검토 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">준공(국고정산)</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          {/* 카드 2 - 물재이용 매칭 시스템 */}
-          <div className="mt-36 card-wrap mb-24" id="card2">
-            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-              물재이용 매칭 시스템이란?
-            </h2>
-            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
-              {/* 개요 */}
-              <section>
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">개요</h2>
-                <p className="font-NotoSansKR text-2xl font-bold text-gray-800 leading-relaxed">
-                  기후변화 및 지자체의 개발속도 차이에 따라 물 자원의 수요-공급 불균형이 발생하여 빗물, 중수도, 하수처리 재처리수 등의 공급 여유가 있는 지자체의 재이용수를 부족한 지자체 수요처에 공급하여 불균형 해소를 통한 수자원 절약 및 물 자원 순환
-                </p>
-              </section>
-
-              {/* 구성 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">구성</h2>
-                <ul className=" font-NotoSansKR list-[square] pl-6 text-2xl font-bold text-gray-800 leading-relaxed space-y-2">
-                  <li>공급자: 하수처리장, 빗물이용시설, 중수도 등</li>
-                  <li>수요자: 산업체(냉각수), 공공시설(조경, 도로청소), 농민(농업용수) 등</li>
-                  <li>시스템: 수질, 수량, 거리 기반 매칭, 중개</li>
-                  <li>운영주체: 한국환경공단</li>
-                </ul>
-              </section>
-
-              {/* 절차 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
-                <p className="font-NotoSansKR text-2xl font-bold text-gray-800 leading-relaxed">
-                  ① 공급자 등록 → ② 수요자 조건 입력 → ③ 매칭 검토 → ④ 시스템 매칭 → ⑤ 계약·공급 이행
-                </p>
-              </section>
-
-              {/* 기대효과 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">기대효과</h2>
-                <ul className="font-NotoSansKR list-[square] pl-6 text-2xl font-bold text-gray-800 leading-relaxed space-y-2">
-                  <li>물 자원 수요-공급 조정을 통한 효율적 분배</li>
-                  <li>물 재이용시설 데이터 수집으로 체계적 관리</li>
-                  <li>지자체, 사업시행자 등 재이용 정보 획득 용이</li>
-                </ul>
-                <div className="text-center my-6">
-                  <Image 
-                    src="/img/wrOverview/img_ov_01_1.png" 
-                    alt="하수 재이용 시스템 흐름도. 저장탱크에서 재처리된 물이 손 씻기, 수도, 세정 등에 공급되며 재이용 활성화를 통해 최적의 물공급 방안이 마련되는 과정을 시각화함." 
-                    width={650}
-                    height={500}
-                    className="h-[500px] mx-auto mb-4 rounded" 
-                  />
-                  <p className="font-NotoSansKR text-2xl font-bold text-gray-800 mt-10">(하수 재이용 시스템 개요도)</p>
-                </div>
-              </section>
-              </div>
-        </div>
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/apps/dm/app/(base-layout)/pages/wrStatus/page.tsx b/apps/dm/app/(base-layout)/pages/wrStatus/page.tsx
deleted file mode 100644
index f8d9704d4..000000000
--- a/apps/dm/app/(base-layout)/pages/wrStatus/page.tsx
+++ /dev/null
@@ -1,387 +0,0 @@
-'use client';
-
-import { regionData, regionIdMap } from '@/app/common/comFunction';
-import { useDmStore } from '@/app/store';
-import type { DmStatusDataType } from '@/app/store/wrStatus/type';
-import { CHART_FORM, MainChart, type ChartConfig } from '@common/business_components';
-import React, { useEffect, useRef, useState,  useCallback } from 'react';
-import { setCookie } from "../../../../src/shared/lib";
-
-setCookie("site-id-key", process.env.NEXT_PUBLIC_SITE_ID || "DM");
-
-interface WrStatusChartProps {
-  chartForm: string;
-  chartConfig: ChartConfig;
-  chartData: any;
-  chartTitle: string;
-  chartClassName?: string;
-  graphSize?: number;
-  yFieldText? : string | undefined;
-  yFieldText2? : string | undefined;
-  showLegend? : boolean;
-  setXAxisYearTick ?: boolean;
-}
-
-export default function WrStatusPage() {
-
-
-
-
-  const { Common, dmStatus, getDmStatusData,initializeCommonData} = useDmStore((state) => state);
-  const { year:defaultYear, statusData,facilityTotals ,chartData} = dmStatus;
-  const [selectedRegion, setSelectedRegion] = useState<string | null>(null);
-  const [hoveredRegion, setHoveredRegion] = useState<string | null>(null);
-  const [tooltipPosition, setTooltipPosition] = useState<{ x: number; y: number } | null>(null);
-  const [chartOption, setChartOption] = useState<WrStatusChartProps>({} as WrStatusChartProps);
-
-  const svgContainerRef = useRef<HTMLDivElement>(null);
-  const colorLegend = [
-    { label: '하수', color: '#FF6B6B', key: 'sewage' },
-    { label: '빗물', color: '#4ECDC4', key: 'rainwater' },
-    { label: '중수도', color: '#45B7D1', key: 'reclaimed' },
-  ];
-  const facilityTotalsColor = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FED16A'];
-  // const [defaultYear, setDefaultYear] = useState<string>("");
-  // const defaultYear= '2023';
-
-
-  const handleMarkerClick = (regionId: string) => {
-    if (selectedRegion === regionId) {
-      setSelectedRegion(null);
-    } else {
-      setSelectedRegion(regionId);
-    }
-  };
-
-
-  useEffect(() => {
-    initializeCommonData();
-  }, [initializeCommonData]);
-
-  const createDonutMarker = useCallback((svg: SVGSVGElement, x: number, y: number, name: string, values: number[]) => {
-    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FED16A'];
-    const radius = 26;
-    const innerRadius = 18;
-    // const regionId = regionIdMap[name];
-    const regionId = regionIdMap[name];
-    if (!regionId) {
-      console.warn(`Invalid region name: ${name}`);
-      return;
-    }
-    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-    g.setAttribute('transform', `translate(${x}, ${y})`);
-    g.setAttribute('id', `marker-${name}`);
-    g.style.cursor = 'pointer';
-    g.setAttribute('role', 'button');
-    g.setAttribute('tabindex', '0');
-    g.setAttribute('aria-label', `${name} 지역 선택`);
-
-    const bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-    bg.setAttribute('r', radius.toString());
-    bg.setAttribute('fill', 'white');
-    bg.setAttribute('pointer-events', 'all');
-    g.appendChild(bg);
-
-    let startAngle = 0;
-    values.forEach((value, idx) => {
-      const endAngle = startAngle + value * 2 * Math.PI;
-      const x1 = radius * Math.sin(startAngle);
-      const y1 = -radius * Math.cos(startAngle);
-      const x2 = radius * Math.sin(endAngle);
-      const y2 = -radius * Math.cos(endAngle);
-      const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
-      const d = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} L 0 0 Z`;
-
-      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      path.setAttribute('d', d);
-      path.setAttribute('fill', colors[idx % colors.length] as string);
-      g.appendChild(path);
-
-      startAngle = endAngle;
-    });
-
-    const center = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-    center.setAttribute('r', innerRadius.toString());
-    center.setAttribute('fill', 'white');
-    g.appendChild(center);
-
-    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-    text.setAttribute('x', '0');
-    text.setAttribute('y', '2');
-    text.setAttribute('text-anchor', 'middle');
-    text.setAttribute('font-size', '13');
-    text.setAttribute('font-weight', 'bold');
-    text.setAttribute('dominant-baseline', 'middle');
-    text.setAttribute('fill', 'black');
-    text.textContent = name || '';
-    g.appendChild(text);
-    
-    g.addEventListener('mouseenter', (e) => {
-      setHoveredRegion(regionId);
-      setTooltipPosition({ x: e.clientX, y: e.clientY });
-    });
-
-    g.addEventListener('mouseleave', () => {
-      setHoveredRegion(null);
-      setTooltipPosition(null);
-    });
-
-    g.addEventListener('click', () => {
-      handleMarkerClick(regionId);
-    });
-
-    g.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-
-        const matrix = g.getScreenCTM();
-        if (!matrix) return; // 또는 console.warn('matrix is null'); return;
-
-        const point = svg.createSVGPoint();
-        point.x = 0;
-        point.y = 0;
-        const transformed = point.matrixTransform(matrix);
-
-        setTooltipPosition({ x: transformed.x, y: transformed.y });
-        setHoveredRegion(regionId);
-        handleMarkerClick(regionId);
-      }
-    });
-
-    svg.appendChild(g);
-  }, [handleMarkerClick, regionIdMap]);
-
-
-  useEffect(() => {
-    if(Common.selectSidoData&&Common.selectSidoData.length>1) {
-      getDmStatusData(Common.selectSidoData);
-    }
-  },[Common.selectSidoData, getDmStatusData])
-
-  useEffect(() => {
-    const loadSVG = async () => {
-      try {
-        const response = await fetch('/img/wrStatus/southKoreaMap.svg');
-        const svgText = await response.text();
-        
-        if (svgContainerRef.current) {
-          svgContainerRef.current.innerHTML = svgText;
-          
-          const svg = svgContainerRef.current.querySelector('svg') as SVGSVGElement;
-          if (svg) {
-            svg.style.width = '58%';
-            svg.style.height = 'auto';
-            svg.style.objectFit = 'contain';
-
-            // Set default fills
-            const paths = svg.querySelectorAll('path');
-            paths.forEach(path => {
-              if (!path.getAttribute('fill') || path.getAttribute('fill') === 'none') {
-                path.setAttribute('fill', '#ffffff');
-              }
-            });
-
-            // Create markers
-            regionData.forEach(region => {
-              createDonutMarker(svg, region.x, region.y, region.name, region.values);
-            });
-          }
-        }
-      } catch (error) {
-        console.error('SVG 로딩 실패:', error);
-        if (svgContainerRef.current) {
-          svgContainerRef.current.innerHTML = "<p className='text-red-500'>SVG 로딩 실패</p>";
-        }
-      }
-    };
-
-    loadSVG();
-  }, [createDonutMarker, regionData]);
-
-  useEffect(() => {
-    const svg = svgContainerRef.current?.querySelector('svg');
-    if (svg) {
-      const paths = svg.querySelectorAll('path');
-      paths.forEach(path => {
-        const pathId = path.getAttribute('id');
-        if (pathId) {
-          if (selectedRegion === pathId) {
-            path.setAttribute('fill', '#2563eb');
-          } else {
-            const original = '#ffffff';
-            path.setAttribute('fill', original);
-          }
-        }
-      });
-    }
-  }, [selectedRegion]);
-  useEffect(() => {
-    if(chartData.length>0){
-      const chartConfig = chartData.reduce((config, element) => {
-        config[element.label] = {
-          label: element.label,
-          color : "hsl(var(--chart-1))"
-        };
-        return config;
-      }, {} as Record<string, { label: string; color: string; }>) satisfies ChartConfig;
-    
-      const Option = {
-        chartForm : CHART_FORM.BAR,
-        chartConfig : chartConfig,
-        chartData : chartData,
-        chartTitle : '',
-        chartClassName : "w-full h-[350px] ",
-        graphSize : 10,
-        yFieldText : '시설(개소)',
-        showLegend : true
-      }
-      setChartOption(Option)
-    }else{
-      setChartOption({} as WrStatusChartProps)
-    }
-  }, [chartData]);
-
-  return (
-    <div className="flex h-screen bg-[#F2F2F2] text-gray-800">
-      {/* 우측 콘텐츠 영역 */}
-      <main className="flex-1 p-6 overflow-auto">
-        {/* 상단 제목 */}
-        <div className="mb-6 flex justify-between items-center">
-          <h2 className="text-2xl font-bold">물재이용 현황</h2>
-        </div>
-
-        {/* 콘텐츠 본문 */}
-        <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
-          {/* 지도 카드 */}
-          <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden max-h-[900px]">
-            {/* 타이틀 영역 */}
-            <div className="border-b border-[#DBE2E6] px-4 py-3">
-              <h3 className="text-[12px] font-semibold">{`재이용시설현황(${defaultYear})`}</h3>
-              <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설현황(개소)</p>
-            </div>
-            
-            {/* 본문 콘텐츠 */}
-            <div className="p-4">
-              <div className="bg-[#E2EDF3] p-4 rounded shadow relative">
-                <div className="flex justify-center">
-                  <div 
-                    ref={svgContainerRef}
-                    className="w-full max-w-5xl max-h-[680px] overflow-y-auto block mx-auto"
-                    aria-label="대한민국 지역별 재이용시설 분포도" 
-                    role="region" 
-                    tabIndex={0}
-                  />
-                </div>
-
-                {typeof window !== 'undefined' && hoveredRegion && tooltipPosition && (
-                  <div
-                    className="fixed bg-white text-[12px] text-gray-700 border border-gray-300 shadow-lg rounded px-3 py-2 z-50"
-                    style={{
-                      top: tooltipPosition.y + 10,
-                      left: tooltipPosition.x + 10,
-                      pointerEvents: 'none',
-                    }}
-                  >
-                    <div className="font-semibold mb-1">{hoveredRegion}</div>
-                    <div className="space-y-1">
-                      {colorLegend.map(({ label, color, key }) => (
-                        <div key={key+'' +color} className="flex items-center space-x-2">
-                          <span className="text-[12px] inline-block w-3 h-3 rounded-sm" style={{ backgroundColor: color }}></span>
-                          <span className="text-[12px]">
-                            {label}:{' '}
-                            {statusData?.find(d => d.region === hoveredRegion)?.[key as keyof DmStatusDataType] || '-'}
-                          </span>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                {/* 범례 */}
-                <div className="absolute bottom-2 right-2 bg-white rounded-lg shadow-md p-4 text-sm space-y-2">
-                  {facilityTotals?.map((item, index) => (
-                      <div key ={'fcltTotal' +index}className="flex items-center space-x-2">
-                      <span className="inline-block w-4 h-4 rounded-sm" style={{backgroundColor:facilityTotalsColor[index]}}></span>
-                      <span className="text-[12px] text-gray-900">{item}</span>
-                    </div>
-                    )) }
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* 우측 콘텐츠 (표 + 차트) */}
-          <div className="col-span-1 flex flex-col space-y-4">
-            {/* 재이용시설현황 표 */}
-            <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden">
-              {/* 타이틀 + 버튼 영역 */}
-              <div className="flex justify-between items-center border-b border-[#436d85] px-4 py-3">
-                <div>
-                  <h3 className="text-[12px] font-semibold">{`재이용시설현황(${defaultYear})`}</h3>
-                  <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설현황[개소(천m³/년)]</p>
-                </div>
-              </div>
-              <div className="p-4">
-                <div className="rounded border border-[#DBE2E6] shadow overflow-auto max-h-[292px] p-4">
-                  <table className="min-w-full text-sm text-center">
-                    <caption className="sr-only text-[12px]">행정구역별 하수, 빗물, 중수도, 온배수 재이용시설 수</caption>
-                    <thead className="bg-gray-50 text-xs text-gray-600 uppercase border-b">
-                      <tr>
-                        <th className="text-[12px] font-semibold px-4 py-2">번호</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">시도</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">하수재이용시설</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">빗물이용시설</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">중수도시설</th>
-                        {/* <th className="text-[12px] font-semibold px-4 py-2">하수(이용량,천𝓂³/년)</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">빗물(이용량,천𝓂³/년)</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">중수도(이용량,천𝓂³/년)</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">온배수(이용량,천𝓂³/년)</th> */}
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y">
-                      {statusData?.map((row, index) => (
-                        <tr key={index} className="hover:bg-gray-50">
-                          <td className="text-[12px] px-4 py-2 text-center">
-                            {index+1}
-                          </td>
-                          <td className="text-[12px]">{row.region}</td>
-                          <td className="text-[12px]">{row.sewage}</td>
-                          <td className="text-[12px]">{row.rainwater}</td>
-                          <td className="text-[12px]">{row.reclaimed}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-
-            {/* 재이용통계 차트 */}
-            <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden">
-              <div className="border-b border-[#DBE2E6] px-4 py-3">
-                <h3 className="text-[12px] font-semibold">{`재이용통계(${defaultYear})`}</h3>
-                <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설 현황 개소수 그래프</p>
-              </div>
-              <div className="p-4 bg-[#f9fbfd]">
-                <div className="h-[305px] text-gray-500">
-                {chartOption?
-                 <MainChart 
-                  chartForm={chartOption.chartForm}
-                  chartConfig={chartOption.chartConfig} 
-                  chartData={chartOption.chartData?.filter(item=>item.label!= '')} 
-                  chartTitle={chartOption.chartTitle} 
-                  chartClassName={chartOption.chartClassName}
-                  graphSize={chartOption.graphSize}
-                  yFieldText={chartOption.yFieldText}
-                  showLegend={chartOption.showLegend}
-                />
-              :<></>}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-};
diff --git a/apps/dm/app/(landing)/reuse/_components/BusinessSubNav.tsx b/apps/dm/app/(landing)/reuse/_components/BusinessSubNav.tsx
new file mode 100644
index 000000000..6b4246412
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/_components/BusinessSubNav.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+export type AnchorSection = {
+  id: string;
+  label: string;
+};
+
+export type BusinessSubNavMenu = {
+  key: string;
+  label: string;
+  href?: string;
+  current?: boolean;
+  defaultOpen?: boolean;
+  sections?: AnchorSection[];
+};
+
+type BusinessSubNavProps = {
+  menus?: BusinessSubNavMenu[];
+  offsetTop?: number;
+  className?: string;
+};
+
+export default function BusinessSubNav({
+  menus = [],
+  offsetTop = 120,
+  className = "",
+}: BusinessSubNavProps) {
+  const [activeId, setActiveId] = useState("");
+  const [openMenus, setOpenMenus] = useState<Record<string, boolean>>({});
+
+  const allSections = useMemo(
+    () => menus.flatMap((menu) => menu.sections ?? []),
+    [menus]
+  );
+
+  useEffect(() => {
+    const initialOpenState: Record<string, boolean> = {};
+
+    menus.forEach((menu) => {
+      initialOpenState[menu.key] = menu.defaultOpen ?? menu.current ?? false;
+    });
+
+    setOpenMenus(initialOpenState);
+  }, [menus]);
+
+  useEffect(() => {
+    if (!allSections.length) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((entry) => entry.isIntersecting)
+          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
+
+        if (visible[0]) {
+          setActiveId(visible[0].target.id);
+        }
+      },
+      {
+        rootMargin: `-${offsetTop}px 0px -55% 0px`,
+        threshold: [0.2, 0.35, 0.5, 0.7],
+      }
+    );
+
+    const targets = allSections
+      .map((section) => document.getElementById(section.id))
+      .filter(Boolean) as HTMLElement[];
+
+    targets.forEach((el) => observer.observe(el));
+
+    const hash = window.location.hash.replace("#", "");
+    const initialActive =
+      allSections.find((section) => section.id === hash)?.id ??
+      allSections[0]?.id ??
+      "";
+
+    setActiveId(initialActive);
+
+    return () => observer.disconnect();
+  }, [allSections, offsetTop]);
+
+    useEffect(() => {
+      if (!activeId) return;
+
+    const parentMenu = menus.find((menu) =>
+        (menu.sections ?? []).some((section) => section.id === activeId)
+    );
+
+    if (!parentMenu) return;
+
+    setOpenMenus(() => {
+        const nextOpenState: Record<string, boolean> = {};
+
+        menus.forEach((menu) => {
+        nextOpenState[menu.key] = menu.key === parentMenu.key;
+        });
+
+        return nextOpenState;
+    });
+  }, [activeId, menus]);
+
+  const handleMove = (id: string) => {
+    setActiveId(id);
+
+    const target = document.getElementById(id);
+    if (!target) return;
+
+    window.history.replaceState(null, "", `#${id}`);
+
+    const top = target.getBoundingClientRect().top + window.scrollY - offsetTop;
+
+    window.scrollTo({
+      top,
+      behavior: "smooth",
+    });
+  };
+
+  const toggleMenu = (key: string) => {
+    setOpenMenus((prev) => ({
+      ...prev,
+      [key]: !prev[key],
+    }));
+  };
+
+  if (!menus.length) return null;
+
+  return (
+    <aside className={`fixed right-2 top-[110px] z-50 w-[260px] ${className}`}>
+      <div className="overflow-hidden bg-white">
+        {menus.map((menu) => {
+          const isOpen = openMenus[menu.key] ?? false;
+          const hasChildren = (menu.sections?.length ?? 0) > 0;
+          const isCurrentGroup = (menu.sections ?? []).some(
+            (section) => section.id === activeId
+          );
+
+          return (
+            <div
+              key={menu.key}
+            >
+              <div className="flex items-center justify-between px-5 py-2">
+                {menu.href ? (
+                  <Link
+                    href={menu.href}
+                    className={[
+                      "text-[16px] font-medium tracking-[-0.02em]",
+                      isCurrentGroup || menu.current
+                        ? "text-sky-500"
+                        : "text-[#767676]",
+                    ].join(" ")}
+                  >
+                    {menu.label}
+                  </Link>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (hasChildren) toggleMenu(menu.key);
+                    }}
+                    className={[
+                      "text-left text-[16px] font-medium tracking-[-0.02em]",
+                      isCurrentGroup || menu.current
+                        ? "text-sky-500"
+                        : "text-[#767676]",
+                    ].join(" ")}
+                  >
+                    {menu.label}
+                  </button>
+                )}
+
+                {hasChildren && (
+                  <button
+                    type="button"
+                    onClick={() => toggleMenu(menu.key)}
+                    className={[
+                      "ml-2 shrink-0",
+                      isCurrentGroup || menu.current
+                        ? "text-sky-500"
+                        : "text-[#767676]",
+                    ].join(" ")}
+                    aria-label={`${menu.label} 드롭다운 토글`}
+                  >
+                    {isOpen ? (
+                      <ChevronUp className="h-5 w-5" />
+                    ) : (
+                      <ChevronDown className="h-5 w-5" />
+                    )}
+                  </button>
+                )}
+              </div>
+
+              {hasChildren && isOpen && (
+                <div className="relative px-5 pb-5">
+                  <div className="absolute left-[31px] top-[6px] bottom-[14px] w-[2px] bg-[#CDD5DB]" />
+
+                  <ul className="space-y-4 pl-2">
+                    {menu.sections!.map((section) => {
+                      const active = activeId === section.id;
+
+                      return (
+                        <li key={section.id}>
+                          <button
+                            type="button"
+                            onClick={() => handleMove(section.id)}
+                            className="flex items-start gap-3 text-left"
+                          >
+                            <span
+                              className={[
+                                "relative z-[1] mt-[6px] -ml-[2px] h-[11px] w-[11px] shrink-0 rounded-full border",
+                                active
+                                  ? "border-sky-500 bg-sky-500"
+                                  : "border-[#BFC7CF] bg-white",
+                              ].join(" ")}
+                            />
+                            <span
+                              className={[
+                                "break-keep text-[14px] leading-[1.45] transition-colors",
+                                active
+                                  ? "text-[#4A4A4A]"
+                                  : "text-[#D1D7DE] hover:text-[#7B8794]",
+                              ].join(" ")}
+                            >
+                              {section.label}
+                            </span>
+                          </button>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm_new/components/CaseTabsCarousel.tsx b/apps/dm/app/(landing)/reuse/_components/CaseTabsCarousel.tsx
similarity index 99%
rename from apps/dm_new/components/CaseTabsCarousel.tsx
rename to apps/dm/app/(landing)/reuse/_components/CaseTabsCarousel.tsx
index ece8f0848..e70bc3e02 100644
--- a/apps/dm_new/components/CaseTabsCarousel.tsx
+++ b/apps/dm/app/(landing)/reuse/_components/CaseTabsCarousel.tsx
@@ -33,8 +33,8 @@ type CaseItem = {
 };
 
 const TABS: { key: TabKey; label: string }[] = [
-  { key: "rain", label: "빗물 재이용 사례" },
-  { key: "reuse", label: "중수 재이용 사례" },
+  { key: "rain", label: "빗물이용시설 사례" },
+  { key: "reuse", label: "중수도 사례" },
   { key: "sewage", label: "하수 재이용 사례" },
   { key: "global", label: "해외 재이용 사례" },
 ];
@@ -59,7 +59,7 @@ const MOCK: Record<TabKey, CaseItem[]> = {
   ],
   reuse: Array.from({ length: 6 }).map((_, i) => ({
     id: `reuse-${i}`,
-    title: `중수 재이용 사례 ${i + 1}`,
+    title: `중수도 사례 ${i + 1}`,
     desc: "설명 문구가 들어갑니다. (최대 2~3줄) …",
     imageSrc: "/images/landing/sample_case.png",
     href: "#",
diff --git a/apps/dm_new/app/(landing)/reuse/_components/ImageSlider.tsx b/apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/_components/ImageSlider.tsx
rename to apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/_components/Lnb.tsx b/apps/dm/app/(landing)/reuse/_components/Lnb.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/_components/Lnb.tsx
rename to apps/dm/app/(landing)/reuse/_components/Lnb.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/_components/LoginStatus.tsx b/apps/dm/app/(landing)/reuse/_components/LoginStatus.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/_components/LoginStatus.tsx
rename to apps/dm/app/(landing)/reuse/_components/LoginStatus.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/_components/PostcodeModal.tsx b/apps/dm/app/(landing)/reuse/_components/PostcodeModal.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/_components/PostcodeModal.tsx
rename to apps/dm/app/(landing)/reuse/_components/PostcodeModal.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/_components/SideIndicator.tsx b/apps/dm/app/(landing)/reuse/_components/SideIndicator.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/_components/SideIndicator.tsx
rename to apps/dm/app/(landing)/reuse/_components/SideIndicator.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/_components/SubPageHeader.tsx b/apps/dm/app/(landing)/reuse/_components/SubPageHeader.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/_components/SubPageHeader.tsx
rename to apps/dm/app/(landing)/reuse/_components/SubPageHeader.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/_components/TopNav.tsx b/apps/dm/app/(landing)/reuse/_components/TopNav.tsx
similarity index 92%
rename from apps/dm_new/app/(landing)/reuse/_components/TopNav.tsx
rename to apps/dm/app/(landing)/reuse/_components/TopNav.tsx
index 17c6f5e04..65b914c91 100644
--- a/apps/dm_new/app/(landing)/reuse/_components/TopNav.tsx
+++ b/apps/dm/app/(landing)/reuse/_components/TopNav.tsx
@@ -9,7 +9,7 @@ import { useRouter } from "next/navigation";
 const NAV_ITEMS = [
   { href: "/reuse/intro/law", label: "물 재이용 소개" },
   { href: "/reuse/cases/rain", label: "물 재이용 현황" },
-  { href: "/reuse/business/rain/suwon", label: "물 재이용 사례" },
+  { href: "/reuse/business/rain", label: "물 재이용 사례" },
   { href: "/reuse/apply/place", label: "수요신청" },
 ];
 
@@ -53,7 +53,9 @@ function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) {
 
   // ✅ 유효성/서버 에러 표시용
   const [errors, setErrors] = useState<Partial<Record<FieldKey, string>>>({});
-  const [touched, setTouched] = useState<Partial<Record<FieldKey, boolean>>>({});
+  const [touched, setTouched] = useState<Partial<Record<FieldKey, boolean>>>(
+    {},
+  );
   const [submitting, setSubmitting] = useState(false);
 
   useEffect(() => {
@@ -99,7 +101,8 @@ function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) {
 
     if (!b) next.bizNo = "사업자등록번호를 입력해주세요.";
     else if (!isBizNoValid(b))
-      next.bizNo = "사업자등록번호 형식이 올바르지 않습니다. (예: 123-45-67890)";
+      next.bizNo =
+        "사업자등록번호 형식이 올바르지 않습니다. (예: 123-45-67890)";
 
     if (!noWorker && !w) next.workerNo = "종사자등록번호를 입력해주세요.";
 
@@ -115,7 +118,7 @@ function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) {
   const markAllTouched = () =>
     setTouched({ bizNo: true, workerNo: true, pw: true });
 
-  const submit = async (e: React.FormEvent) => {
+  const submit = async (e: React.SubmitEvent) => {
     e.preventDefault();
     markAllTouched();
 
@@ -138,7 +141,10 @@ function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) {
       // --- 데모: 비밀번호가 "1234"면 성공 처리(원하면 제거) ---
       const serverOk = pw.trim() === "1234";
       if (!serverOk) {
-        setErrors((p) => ({ ...p, pw: "잘못된 비밀번호입니다. (데모: 1234 입력 시 성공)" }));
+        setErrors((p) => ({
+          ...p,
+          pw: "잘못된 비밀번호입니다. (데모: 1234 입력 시 성공)",
+        }));
         setTouched((p) => ({ ...p, pw: true }));
         return;
       }
@@ -210,7 +216,9 @@ function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) {
                     validate();
                   }}
                   placeholder="사업자등록번호를 입력하세요. (예: 123-45-67890)"
-                  className={inputCls({ hasError: !!(touched.bizNo && errors.bizNo) })}
+                  className={inputCls({
+                    hasError: !!(touched.bizNo && errors.bizNo),
+                  })}
                 />
                 {touched.bizNo && errors.bizNo && (
                   <p className="mt-3 text-[14px] font-medium text-red-500">
@@ -251,7 +259,8 @@ function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) {
                   placeholder="종사자등록번호를 입력하세요."
                   className={inputCls({
                     disabled: noWorker,
-                    hasError: !noWorker && !!(touched.workerNo && errors.workerNo),
+                    hasError:
+                      !noWorker && !!(touched.workerNo && errors.workerNo),
                   })}
                 />
 
@@ -279,7 +288,9 @@ function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) {
                     validate();
                   }}
                   placeholder="비밀번호를 입력하세요."
-                  className={inputCls({ hasError: !!(touched.pw && errors.pw) })}
+                  className={inputCls({
+                    hasError: !!(touched.pw && errors.pw),
+                  })}
                 />
                 {touched.pw && errors.pw && (
                   <p className="mt-3 text-[14px] font-medium text-red-500">
@@ -305,7 +316,9 @@ function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) {
               {/* 비밀번호 초기화 요청 */}
               <button
                 type="button"
-                onClick={() => alert("TODO: 비밀번호 초기화 요청 화면/기능 연결")}
+                onClick={() =>
+                  alert("TODO: 비밀번호 초기화 요청 화면/기능 연결")
+                }
                 className="mx-auto block text-[14px] text-[#767676] hover:text-gray-900"
               >
                 비밀번호 초기화 요청
@@ -439,7 +452,10 @@ export default function TopNav() {
               ) : (
                 <>
                   <span className="text-base text-gray-700">
-                    <strong className="text-xl text-emerald-600">{userName}</strong>님 환영합니다.
+                    <strong className="text-xl text-emerald-600">
+                      {userName}
+                    </strong>
+                    님 환영합니다.
                   </span>
                   <button
                     type="button"
@@ -448,13 +464,13 @@ export default function TopNav() {
                   >
                     로그아웃
                     <span aria-hidden>
-                        <Image
-                          src="/images/landing/icon_logout.png"
-                          alt="로그아웃 아이콘"
-                          width={24}
-                          height={24}
-                          className="h-6 w-6 object-contain"
-                        />
+                      <Image
+                        src="/images/landing/icon_logout.png"
+                        alt="로그아웃 아이콘"
+                        width={24}
+                        height={24}
+                        className="h-6 w-6 object-contain"
+                      />
                     </span>
                   </button>
                 </>
diff --git a/apps/dm_new/app/(landing)/reuse/_constants/lnb.ts b/apps/dm/app/(landing)/reuse/_constants/lnb.ts
similarity index 96%
rename from apps/dm_new/app/(landing)/reuse/_constants/lnb.ts
rename to apps/dm/app/(landing)/reuse/_constants/lnb.ts
index 671dabd65..f88de62bc 100644
--- a/apps/dm_new/app/(landing)/reuse/_constants/lnb.ts
+++ b/apps/dm/app/(landing)/reuse/_constants/lnb.ts
@@ -23,7 +23,7 @@ export const LNB_CASES  = [
 // 물 재이용 사례처럼 2depth가 있는 메뉴
 export const LNB_BUSINESS: LnbItem[] = [
   {
-    label: "빗물 재이용 사례",
+    label: "빗물이용시설 사례",
     children: [
       { label: "경기도 수원시", href: "/reuse/business/rain/suwon" },
     //   { label: "충청남도 보령시", href: "/reuse/business/rain/bolyeong" },
@@ -31,7 +31,7 @@ export const LNB_BUSINESS: LnbItem[] = [
     ],
   },
   {
-    label: "중수 재이용 사례",
+    label: "중수도 사례",
     children: [{ label: "사례 목록", href: "/reuse/business/graywater" }],
   },
   {
diff --git a/apps/dm_new/app/(landing)/reuse/_hooks/useScrollSpy.ts b/apps/dm/app/(landing)/reuse/_hooks/useScrollSpy.ts
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/_hooks/useScrollSpy.ts
rename to apps/dm/app/(landing)/reuse/_hooks/useScrollSpy.ts
diff --git a/apps/dm_new/app/(landing)/reuse/_sections/Cases.tsx b/apps/dm/app/(landing)/reuse/_sections/Cases.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/_sections/Cases.tsx
rename to apps/dm/app/(landing)/reuse/_sections/Cases.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/_sections/Hero.tsx b/apps/dm/app/(landing)/reuse/_sections/Hero.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/_sections/Hero.tsx
rename to apps/dm/app/(landing)/reuse/_sections/Hero.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/_sections/IntroCards.tsx b/apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/_sections/IntroCards.tsx
rename to apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/_sections/ProcessFlow.tsx b/apps/dm/app/(landing)/reuse/_sections/ProcessFlow.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/_sections/ProcessFlow.tsx
rename to apps/dm/app/(landing)/reuse/_sections/ProcessFlow.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/apply/layout.tsx b/apps/dm/app/(landing)/reuse/apply/layout.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/apply/layout.tsx
rename to apps/dm/app/(landing)/reuse/apply/layout.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/apply/modal/CandidateSiteModal.tsx b/apps/dm/app/(landing)/reuse/apply/modal/CandidateSiteModal.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/apply/modal/CandidateSiteModal.tsx
rename to apps/dm/app/(landing)/reuse/apply/modal/CandidateSiteModal.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx b/apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx
similarity index 97%
rename from apps/dm_new/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx
rename to apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx
index f997d88e1..90fe5a798 100644
--- a/apps/dm_new/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx
+++ b/apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx
@@ -1,10 +1,12 @@
-// apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx (유사사례 모달)
+/**
+ * 유사사례 Modal
+ */
 "use client";
 
 import { useEffect, useMemo, useState, useId } from "react";
 import { createPortal } from "react-dom";
 
-type Criterion = "" | "supplyAmt" | "treatment" | "usePurpose";
+type Criterion = "" | "supplyAmt" | "treatment" | "usePurpose"; // 유사기준
 
 export type SimilarCaseRow = {
   caseId: string;
@@ -71,16 +73,18 @@ export default function SimilarCaseModal({
   onClose,
   rows,
   detailsByCaseId,
+  onSearch
 }: {
   open: boolean;
   onClose: () => void;
   rows: SimilarCaseRow[];
   detailsByCaseId: Record<string, SimilarCaseDetail | undefined>;
+  onSearch :(criterion: Criterion) => void;
 }) {
   const titleId = useId();
 
   const [mounted, setMounted] = useState(false);
-  const [criterion, setCriterion] = useState<Criterion>("");
+  const [criterion, setCriterion] = useState<Criterion>("supplyAmt");
   const [selectedCaseId, setSelectedCaseId] = useState<string>("");
 
   useEffect(() => setMounted(true), []);
@@ -88,7 +92,8 @@ export default function SimilarCaseModal({
   // 모달 열릴 때 초기화
   useEffect(() => {
     if (!open) return;
-    setCriterion("");
+    setCriterion("supplyAmt"); // 요구수량(㎥/d)
+    onSearch("supplyAmt");
     setSelectedCaseId("");
   }, [open]);
 
@@ -192,12 +197,14 @@ export default function SimilarCaseModal({
                   const v = e.target.value as Criterion;
                   setCriterion(v);
                   setSelectedCaseId("");
+
+                  if(v){
+                    onSearch(v);
+                  }
                 }}
                 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>
@@ -358,7 +365,7 @@ export default function SimilarCaseModal({
                   </tr>
                   <tr>
                     <th rowSpan={2} className={thBase}>
-                      총대장균군수<br />(개/100ml)
+                      총대장균군수<br />(개/100mL)
                     </th>
                     <th rowSpan={2} className={thBase}>
                       용도별 결합 잔류염소<br />(mg/L)
diff --git a/apps/dm_new/app/(landing)/reuse/apply/modal/WaterQualityRefModal.tsx b/apps/dm/app/(landing)/reuse/apply/modal/WaterQualityRefModal.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/apply/modal/WaterQualityRefModal.tsx
rename to apps/dm/app/(landing)/reuse/apply/modal/WaterQualityRefModal.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/apply/place/page.tsx b/apps/dm/app/(landing)/reuse/apply/place/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/apply/place/page.tsx
rename to apps/dm/app/(landing)/reuse/apply/place/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/apply/register/page.tsx b/apps/dm/app/(landing)/reuse/apply/register/page.tsx
similarity index 98%
rename from apps/dm_new/app/(landing)/reuse/apply/register/page.tsx
rename to apps/dm/app/(landing)/reuse/apply/register/page.tsx
index 2a9bbaf9a..21a5a027f 100644
--- a/apps/dm_new/app/(landing)/reuse/apply/register/page.tsx
+++ b/apps/dm/app/(landing)/reuse/apply/register/page.tsx
@@ -428,7 +428,7 @@ export default function DemandRegisterPage() {
             </FormRow>
             <Divider />
 
-            <FormRow label="요구수량(m²/d)" required>
+            <FormRow label="요구수량(㎥/d)" required>
               <TextInput value={reqQty} onChange={setReqQty} />
             </FormRow>
             <Divider />
@@ -438,7 +438,7 @@ export default function DemandRegisterPage() {
             </FormRow>
             <Divider />
 
-            <FormRow label="희망단가(원)" required>
+            <FormRow label="희망단가(원/㎥)" required>
               <TextInput value={hopePrice} onChange={setHopePrice} />
             </FormRow>
           </div>
@@ -464,7 +464,7 @@ export default function DemandRegisterPage() {
 
           <div className="border border-neutral-200 bg-white">
             <QualityRow
-              leftLabel="총대장균군수(개/mg)"
+              leftLabel="총대장균군수(개/100㎖)"
               leftRequired
               leftControl={
                 <div className="flex items-center gap-4">
@@ -633,6 +633,9 @@ export default function DemandRegisterPage() {
         onClose={() => setOpenSimilar(false)}
         rows={similarRows}
         detailsByCaseId={similarDetailsByCaseId}
+        onSearch={async (criterion) => {
+            console.log(criterion);
+          }}
       />
     </>
   );
diff --git a/apps/dm_new/app/(landing)/reuse/apply/status/page.tsx b/apps/dm/app/(landing)/reuse/apply/status/page.tsx
similarity index 97%
rename from apps/dm_new/app/(landing)/reuse/apply/status/page.tsx
rename to apps/dm/app/(landing)/reuse/apply/status/page.tsx
index b69b0fdd9..2e95c780b 100644
--- a/apps/dm_new/app/(landing)/reuse/apply/status/page.tsx
+++ b/apps/dm/app/(landing)/reuse/apply/status/page.tsx
@@ -3,6 +3,7 @@
 
 import { useEffect, useMemo, useRef, useState } from "react";
 import SubPageHeader from "../../_components/SubPageHeader";
+//import { useDmStore } from "@/app/store";
 
 type WaterDetail = {
   toc: string;
@@ -114,12 +115,17 @@ type PairField = { label: string; value: string };
 export default function DemandStatusPage() {
   const rows = useMemo(() => MOCK, []);
 
-  // ✅ rows가 빈 경우도 대비 (런타임 오류 방지)
+  // rows가 빈 경우도 대비 (런타임 오류 방지)
   const [selectedId, setSelectedId] = useState<number | null>(rows[0]?.id ?? null);
 
-  // ✅ 상세영역 스크롤 이동용
+  // 상세영역 스크롤 이동용
   const detailRef = useRef<HTMLDivElement | null>(null);
 
+  // update
+  /* const updateSdmInfoData = useDmStore(
+    (state) => state.updateSdmInfoData
+  ); */
+
   // ✅ selected 계산 안정화
   const selected = useMemo(() => {
     if (!rows.length) return null;
@@ -142,7 +148,7 @@ export default function DemandStatusPage() {
       { label: "요구시기", value: selected.detail.reqDate, required: true },
       { label: "요구수량(㎡/d)", value: selected.detail.reqQty },
       { label: "사용용도", value: selected.detail.usePurpose },
-      { label: "희망단가(원)", value: selected.detail.price },
+      { label: "희망단가(원/㎥)", value: selected.detail.price },
     ];
   }, [selected]);
 
@@ -151,7 +157,7 @@ export default function DemandStatusPage() {
     if (!selected) return [];
     const w = selected.detail.water;
     return [
-      { label: "총대장균군수(개/100mℓ)", value: w.coliform },
+      { label: "총대장균군수(개/100㎖)", value: w.coliform },
       { label: "결합잔류염소(mg/L)", value: "-" },
       { label: "탁도(NTU)", value: w.turbidity },
 
diff --git a/apps/dm/app/(landing)/reuse/business/_components/GlobalCaseSection.tsx b/apps/dm/app/(landing)/reuse/business/_components/GlobalCaseSection.tsx
new file mode 100644
index 000000000..5d981d7de
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/business/_components/GlobalCaseSection.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import CaseImageSlider from "@/components/CaseImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+export default function GlobalCaseSection() {
+  const title = "해외 재이용 사례";  
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+      <div className="mt-10 pb-[120px]">       
+        <section id="example-global-overview" className="scroll-mt-[120px]">
+            <SectionTitle>사례 개요</SectionTitle>
+
+            <CaseImageSlider
+            className="mt-8"
+            maxWidthClassName="max-w-[760px]"
+            slides={[
+                {
+                src: "/images/landing/business/globalCase/overview_01.png",
+                alt: "해외 재이용 사례 개요 1",
+                },
+            ]}
+            />
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-global-taiwan" className="scroll-mt-[120px]">
+            <SectionTitle>대만</SectionTitle>
+
+            <CaseImageSlider
+            className="mt-8"
+            maxWidthClassName="max-w-[760px]"
+            slides={[
+                {
+                src: "/images/landing/business/globalCase/taiwan_01.png",
+                alt: "대만 사례 1",
+                },
+            ]}
+            />
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-global-australia" className="scroll-mt-[120px]">
+            <SectionTitle>호주</SectionTitle>
+
+            <CaseImageSlider
+            className="mt-8"
+            maxWidthClassName="max-w-[760px]"
+            slides={[
+                {
+                src: "/images/landing/business/globalCase/australia_01.png",
+                alt: "호주 사례 1",
+                },
+            ]}
+            />
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-global-singapore" className="scroll-mt-[120px]">
+            <SectionTitle>싱가포르</SectionTitle>
+
+            <CaseImageSlider
+            className="mt-8"
+            maxWidthClassName="max-w-[760px]"
+            slides={[
+                {
+                src: "/images/landing/business/globalCase/singapore_01.png",
+                alt: "싱가포르 사례 1",
+                },
+            ]}
+            />
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-global-eu" className="scroll-mt-[120px]">
+            <SectionTitle>EU</SectionTitle>
+
+            <CaseImageSlider
+            className="mt-8"
+            maxWidthClassName="max-w-[760px]"
+            slides={[
+                {
+                src: "/images/landing/business/globalCase/eu_01.png",
+                alt: "EU 사례 1",
+                },
+            ]}
+            />
+        </section>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(landing)/reuse/business/_components/GreywaterExampleSection.tsx b/apps/dm/app/(landing)/reuse/business/_components/GreywaterExampleSection.tsx
new file mode 100644
index 000000000..35dfc1247
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/business/_components/GreywaterExampleSection.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function BlockTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="inline-block h-[14px] w-[24px] rounded-full bg-gradient-to-r from-sky-300 to-lime-300" />
+      <h4 className="text-[20px] font-semibold text-[#1A1A1A]">{children}</h4>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+type SupplyRow = {
+  facility: string;
+  usage: string;
+  amount: string;
+};
+
+function SupplyTable({ rows }: { rows: SupplyRow[] }) {
+  return (
+    <div className="mt-8 overflow-x-auto">
+      <table className="w-full min-w-[860px] border border-[#D8DDE3] text-center">
+        <thead>
+          <tr>
+            <th className="border border-[#D8DDE3] bg-[#14A9D9] px-4 py-2 text-[18px] font-medium text-white">
+              시설명
+            </th>
+            <th className="border border-[#D8DDE3] bg-[#40B5A5] px-4 py-2 text-[18px] font-medium text-white">
+              이용용도
+            </th>
+            <th className="border border-[#D8DDE3] bg-[#73BF4B] px-4 py-2 text-[18px] font-medium text-white">
+              공급량(㎥)
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => (
+            <tr key={`${row.facility}-${index}`}>
+              <td className="border border-[#D8DDE3] bg-white px-4 py-2 text-[16px] text-[#4F4F4F]">
+                {row.facility}
+              </td>
+              <td className="border border-[#D8DDE3] bg-white px-4 py-2 text-[16px] text-[#4F4F4F]">
+                {row.usage}
+              </td>
+              <td className="border border-[#D8DDE3] bg-white px-4 py-2 text-[16px] text-[#4F4F4F]">
+                {row.amount}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function InfoList({
+  projectName,
+  purpose,
+  totalCost,
+  treatment,
+}: {
+  projectName: string;
+  purpose: string;
+  totalCost: string;
+  treatment: string;
+}) {
+  return (
+    <div className="mt-10 space-y-10">
+      <div>
+        <BlockTitle>사업명</BlockTitle>
+        <ul className="mt-4 list-disc pl-8 text-16px] leading-[1.8] text-[#4F4F4F]">
+          <li>{projectName}</li>
+        </ul>
+      </div>
+
+      <div>
+        <BlockTitle>사업목적</BlockTitle>
+        <ul className="mt-4 list-disc pl-8 text-16px] leading-[1.8] text-[#4F4F4F]">
+          <li>{purpose}</li>
+        </ul>
+      </div>
+
+      <div>
+        <BlockTitle>사업 주요 내용</BlockTitle>
+        <ul className="mt-4 list-disc pl-8 text-16px] leading-[1.8] text-[#4F4F4F]">
+          <li>총사업비 : {totalCost}</li>
+          <li>처리공법 : {treatment}</li>
+        </ul>
+      </div>
+
+      <div>
+        <BlockTitle>사업량</BlockTitle>
+      </div>
+    </div>
+  );
+}
+
+export default function GreywaterExampleSection() {
+  const title = "중수도 사례";
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+      
+      <div className="mt-10 pb-[120px]">
+        <section id="example-greywater-ansan" className="scroll-mt-[120px]">
+            <SectionTitle>경기도 안산시</SectionTitle>
+
+            <InfoList
+            projectName="안산시 중수도 설치사업"
+            purpose="수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현"
+            totalCost="81억원"
+            treatment="MBR공법"
+            />
+
+            <SupplyTable
+            rows={[
+                { facility: "경기테크노파크", usage: "청소·화장실용수", amount: "40㎥/일" },
+                { facility: "올림픽수영장", usage: "청소·화장실/세척·살수용수", amount: "35㎥/일" },
+                { facility: "와스타디움", usage: "청소·화장실/조경용수", amount: "90㎥/일" },
+                { facility: "호수실내수영장", usage: "청소·화장실/조경/세척·살수용수", amount: "50㎥/일" },
+                { facility: "한양대학교 에리카캠퍼스", usage: "청소·화장실용수", amount: "370㎥/일" },
+            ]}
+            />
+        </section>
+
+        <Hr className="my-20" />
+
+        <section id="example-greywater-yongin" className="scroll-mt-[120px]">
+            <SectionTitle>경기도 용인시</SectionTitle>
+
+            <InfoList
+            projectName="용인시 중수도 설치사업"
+            purpose="물 부족 등의 비상상황에 대한 대비, 하수라도 사용할 집결 등 수자원의 효율적 활용"
+            totalCost="40억원"
+            treatment="MBR공법"
+            />
+
+            <SupplyTable
+            rows={[
+                { facility: "여성회관", usage: "청소·화장실용수", amount: "35㎥/일" },
+                { facility: "수지아르피아", usage: "청소·화장실용수", amount: "35㎥/일" },
+                { facility: "지상작전사령부", usage: "청소·화장실/조경/세척·살수용수", amount: "53㎥/일" },
+            ]}
+            />
+        </section>
+
+        <Hr className="my-20" />
+
+        <section id="example-greywater-pyeongtaek" className="scroll-mt-[120px]">
+            <SectionTitle>경기도 평택시</SectionTitle>
+
+            <InfoList
+            projectName="평택시 중수도 설치사업"
+            purpose="수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현"
+            totalCost="21억원"
+            treatment="MBR공법"
+            />
+
+            <SupplyTable
+            rows={[
+                {
+                facility: "평택대학교",
+                usage: "청소·화장실용수",
+                amount: "50㎥/일",
+                },
+            ]}
+            />
+        </section>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(landing)/reuse/business/_components/RainExampleSection.tsx b/apps/dm/app/(landing)/reuse/business/_components/RainExampleSection.tsx
new file mode 100644
index 000000000..0381b3ebc
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/business/_components/RainExampleSection.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import CaseImageSlider from "@/components/CaseImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+export default function RainExampleSection() {
+  const title = "빗물이용시설 사례";
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <section id="example-rain-suwon" className="mt-10 scroll-mt-[120px]">
+        <SectionTitle>경기도 수원시</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[760px]"
+          slides={[
+            {
+              src: "/images/landing/business/rain/rain_01.png",
+              alt: "수원시 사례 1",
+            },
+            {
+              src: "/images/landing/business/rain/rain_02.png",
+              alt: "수원시 사례 2",
+            },
+          ]}
+        />
+      </section>
+
+      <Hr className="my-16" />
+
+      <section id="example-rain-jeju" className="scroll-mt-[120px]">
+        <SectionTitle>제주특별자치도</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[760px]"
+          slides={[
+            {
+              src: "/images/landing/business/rain/jeju_01.png",
+              alt: "제주 사례 1",
+            },
+            {
+              src: "/images/landing/business/rain/jeju_02.png",
+              alt: "제주 사례 2",
+            },
+          ]}
+        />
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(landing)/reuse/business/_components/SewageExampleSection.tsx b/apps/dm/app/(landing)/reuse/business/_components/SewageExampleSection.tsx
new file mode 100644
index 000000000..72ac9741a
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/business/_components/SewageExampleSection.tsx
@@ -0,0 +1,256 @@
+"use client";
+
+import CaseImageSlider from "@/components/CaseImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+export default function SewageExampleSection() {
+  const title = "하수처리수 재이용 사례";
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <section id="example-sewage-bolyeong" className="scroll-mt-[120px]">
+            <SectionTitle>충청남도 보령시</SectionTitle>
+
+            <CaseImageSlider
+                className="mt-8"
+                maxWidthClassName="max-w-[760px]"
+                slides={[
+                    {
+                    src: "/images/landing/business/sewage/bolyeong_01.png",
+                    alt: "보령시 하수 재이용 1",
+                    },
+                ]}
+            />
+
+            <section className="mt-6">
+                <SectionTitle>사업명</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    충남 보령 하수재이용
+                    <br />: 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해
+                    보령하수처리시설의 하수처리수 재이용 사업 추진
+                </p>
+            </section>
+
+            <Hr className="my-11" />
+
+            <section className="mt-6">
+                <SectionTitle>사업 방식</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결
+                </p>
+            </section>
+
+            <section className="mt-6">
+                <SectionTitle>사업 주요 내용</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    처리공정 : 전처리 UF + 후처리 RO
+                    <br />
+                    시설용량 : 1만m³/일
+                    <br />
+                    관로 : 8.7km
+                    <br />
+                    사업비 : 315억원
+                    <br />
+                    위치: 충청남도 보령시 대청방조제로 322 일원
+                </p>
+            </section>
+
+            <Hr className="my-11" />
+
+            <section>
+                <SectionTitle>특이사항</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권
+                    가뭄 시 지역사회 기여 차원에서 기관간 MOU를 바탕으로 추진
+                </p>
+            </section>
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-sewage-cheongju" className="scroll-mt-[120px]">
+            <SectionTitle>청주시</SectionTitle>
+
+            <CaseImageSlider
+                className="mt-8"
+                maxWidthClassName="max-w-[760px]"
+                slides={[
+                    {
+                    src: "/images/landing/business/sewage/cheongju_01.png",
+                    alt: "청주시 하수 재이용 1",
+                    },
+                ]}
+            />
+
+            <section className="mt-6">
+                <SectionTitle>사업명</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">청주시 하수 재이용 시설</p>
+            </section>
+
+            <Hr className="my-11" />
+
+            <section>
+                <SectionTitle>사업 주요 내용</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    청주시 하수처리수 재이용 민간투자사업(BTO)
+                    <br />
+                    공급량 : 35,000㎥/일
+                    <br />
+                    공급관로 : 8.3㎞
+                    <br />
+                    사업비 : 622억원
+                    <br />
+                    수요처 : SK하이닉스 등 일반산업단지
+                    <br />
+                    지역 : 충청북도 청주시 흥덕구 가락리 135-9번지 일원
+                    <br />
+                    적용기술 : 분리막 UF, RO
+                </p>
+            </section>
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-sewage-guri" className="scroll-mt-[120px]">
+            <SectionTitle>구리시 도로자동청소시스템</SectionTitle>
+
+            <CaseImageSlider
+                className="mt-8"
+                maxWidthClassName="max-w-[760px]"
+                slides={[
+                    {
+                    src: "/images/landing/business/sewage/guri_01.png",
+                    alt: "구리시 도로자동청소시스템 1",
+                    },
+                    {
+                    src: "/images/landing/business/sewage/guri_02.png",
+                    alt: "구리시 도로자동청소시스템 2",
+                    },
+                ]}
+            />
+
+            <section className="mt-6">
+                <SectionTitle>사업명</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    구리시 도로자동청소시스템 설치사업
+                </p>
+            </section>
+
+            <Hr className="my-11" />
+
+            <section className="mt-6">
+                <SectionTitle>사업목적</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여
+                    미세먼지 저감 및 폭염 취약성 완화
+                </p>
+            </section>
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-sewage-hwanggu" className="scroll-mt-[120px]">
+            <SectionTitle>수원시 황구지천</SectionTitle>
+
+            <CaseImageSlider
+                className="mt-8"
+                maxWidthClassName="max-w-[760px]"
+                slides={[
+                    {
+                    src: "/images/landing/business/sewage/hwanggu_01.png",
+                    alt: "수원시 황구지천 하수 재이용 1",
+                    },
+                    {
+                    src: "/images/landing/business/sewage/hwanggu_02.png",
+                    alt: "수원시 황구지천 하수 재이용 2",
+                    },
+                    {
+                    src: "/images/landing/business/sewage/hwanggu_03.png",
+                    alt: "수원시 황구지천 하수 재이용 3",
+                    },
+                ]}
+            />
+
+            <section className="mt-6">
+                <SectionTitle>사업명</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    수원시 황구지천 하수처리수 재이용사업
+                </p>
+            </section>
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-sewage-paju" className="scroll-mt-[120px]">
+            <SectionTitle>파주시</SectionTitle>
+
+            <CaseImageSlider
+                className="mt-8"
+                maxWidthClassName="max-w-[760px]"
+                slides={[
+                    {
+                    src: "/images/landing/business/sewage/paju_01.png",
+                    alt: "파주시 하수 재이용 1",
+                    },
+                ]}
+            />
+
+            <section className="mt-6">
+                <SectionTitle>사업명</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    경기도 파주시 하수재이용
+                    <br />
+                    운정·금촌하수처리시설의 하수처리수를 막공법으로 재처리하여 파주 LCD
+                    산업단지에 공업용수 공급
+                </p>
+            </section>
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-sewage-yeosu" className="scroll-mt-[120px]">
+            <SectionTitle>여수시</SectionTitle>
+
+            <CaseImageSlider
+                className="mt-8"
+                maxWidthClassName="max-w-[760px]"
+                slides={[
+                    {
+                    src: "/images/landing/business/sewage/yeosu_01.png",
+                    alt: "여수시 하수 재이용 1",
+                    },
+                ]}
+            />
+
+            <section className="mt-6">
+                <SectionTitle>사업명</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    여수시 하수처리수 재이용 민간 투자사업(BTO)
+                </p>
+            </section>
+        </section>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm_new/app/(landing)/reuse/business/globalCase/australia/page.tsx b/apps/dm/app/(landing)/reuse/business/globalCase/australia/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/business/globalCase/australia/page.tsx
rename to apps/dm/app/(landing)/reuse/business/globalCase/australia/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/business/globalCase/eu/page.tsx b/apps/dm/app/(landing)/reuse/business/globalCase/eu/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/business/globalCase/eu/page.tsx
rename to apps/dm/app/(landing)/reuse/business/globalCase/eu/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/business/globalCase/overview/page.tsx b/apps/dm/app/(landing)/reuse/business/globalCase/overview/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/business/globalCase/overview/page.tsx
rename to apps/dm/app/(landing)/reuse/business/globalCase/overview/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/business/globalCase/singapore/page.tsx b/apps/dm/app/(landing)/reuse/business/globalCase/singapore/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/business/globalCase/singapore/page.tsx
rename to apps/dm/app/(landing)/reuse/business/globalCase/singapore/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/business/globalCase/taiwan/page.tsx b/apps/dm/app/(landing)/reuse/business/globalCase/taiwan/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/business/globalCase/taiwan/page.tsx
rename to apps/dm/app/(landing)/reuse/business/globalCase/taiwan/page.tsx
diff --git a/apps/dm/app/(landing)/reuse/business/layout.tsx b/apps/dm/app/(landing)/reuse/business/layout.tsx
new file mode 100644
index 000000000..9d0d95ab9
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/business/layout.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+// import { usePathname } from "next/navigation";
+// import Lnb from "../_components/Lnb";
+// import BusinessSubNav from "../_components/BusinessSubNav";
+import {
+  // fetchAnonymousMenu,
+  // findActiveTopMenu,
+  // type MenuItem,
+} from "@/app/store/common";
+
+export default function BusinessLayout({ children }: { children: ReactNode }) {
+  // const pathname = usePathname();
+  // const [menus, setMenus] = useState<MenuItem[]>([]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    (async () => {
+      try {
+        // const loaded = await fetchAnonymousMenu();
+        if (!isMounted) return;
+        // setMenus(loaded);
+      } catch {
+        if (!isMounted) return;
+        // setMenus([]);
+      }
+    })();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  // const currentTopMenu = useMemo(
+  //   () => findActiveTopMenu(menus, pathname),
+  //   [menus, pathname],
+  // );
+
+  // const businessMenus = useMemo(
+  //   () => currentTopMenu?.children ?? [],
+  //   [currentTopMenu],
+  // );
+
+  return (
+    <div className="bg-white min-w-[1440px]">
+      
+      {/* 좌측 LNB */}
+      {/* <Lnb /> */}
+
+      {/* 컨텐츠 영역 */}
+      <div className="pl-[260px] pt-[83px]">
+        <div className="mx-auto flex max-w-[1660px] gap-16 px-[60px] py-[60px]">
+
+          {/* 본문 */}
+          <main className="min-w-0 flex-1 max-w-[980px]">
+            {children}
+          </main>
+
+          {/* 우측 서브 메뉴 */}
+          <div className="w-[240px] shrink-0">
+            {/* <BusinessSubNav menus={businessMenus} /> */}
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dm/app/(landing)/reuse/business/page.tsx b/apps/dm/app/(landing)/reuse/business/page.tsx
new file mode 100644
index 000000000..660680c0c
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/business/page.tsx
@@ -0,0 +1,85 @@
+import SubPageHeader from "@/components/SubPageHeader";
+import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav";
+
+import RainExampleSection from "./_components/RainExampleSection";
+import GreywaterExampleSection from "./_components/GreywaterExampleSection";
+import SewageExampleSection from "./_components/SewageExampleSection";
+import GlobalCaseSection from "./_components/GlobalCaseSection";
+
+const menus: BusinessSubNavMenu[] = [
+  {
+    key: "example-rain",
+    label: "빗물이용시설 사례",
+    sections: [
+      { id: "example-rain-suwon", label: "경기도 수원시" },
+      { id: "example-rain-jeju", label: "제주특별자치도" },
+    ],
+  },
+  {
+    key: "example-greywater",
+    label: "중수도 사례",
+    defaultOpen: false,
+    sections: [
+      { id: "example-greywater-ansan", label: "경기도 안산시" },
+      { id: "example-greywater-yongin", label: "경기도 용인시" },
+      { id: "example-greywater-pyeongtaek", label: "경기도 평택시" },
+    ],
+  },
+  {
+    key: "example-sewage",
+    label: "하수처리수 재이용 사례",
+    defaultOpen: false,
+    sections: [
+      { id: "example-sewage-bolyeong", label: "충청남도 보령시" },
+      { id: "example-sewage-cheongju", label: "청주시" },
+      { id: "example-sewage-guri", label: "구리시 도로자동청소시스템" },
+      { id: "example-sewage-hwanggu", label: "수원시 황구지천" },
+      { id: "example-sewage-paju", label: "파주시" },
+      { id: "example-sewage-yeosu", label: "여수시" },
+    ],
+  },
+  {
+    key: "example-global",
+    label: "해외 재이용 사례",
+    defaultOpen: false,
+    sections: [
+      { id: "example-global-overview", label: "사례 개요" },
+      { id: "example-global-taiwan", label: "대만" },
+      { id: "example-global-australia", label: "호주" },
+      { id: "example-global-singapore", label: "싱가포르" },
+      { id: "example-global-eu", label: "EU" },
+    ],
+  },
+];
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+export default function ExamplePage() {
+  return (
+    <div className="relative">
+      {/* 상단 헤더 */}
+      <SubPageHeader
+        title="물 재이용 사례"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 사례" },
+        ]}
+      />
+
+      {/* 우측 앵커 네비 */}  
+      <BusinessSubNav menus={menus} offsetTop={120} />
+
+      <div className="max-w-[1300px] pb-24">
+        <RainExampleSection />
+        <Hr className="my-16" />
+        <GreywaterExampleSection />
+        <Hr className="my-16" />
+        <SewageExampleSection />
+        <Hr className="my-16" />
+        <GlobalCaseSection />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm_new/app/(landing)/reuse/business/rain/suwon/page.tsx b/apps/dm/app/(landing)/reuse/business/rain/suwon/page.tsx
similarity index 98%
rename from apps/dm_new/app/(landing)/reuse/business/rain/suwon/page.tsx
rename to apps/dm/app/(landing)/reuse/business/rain/suwon/page.tsx
index 3acba860b..d96772126 100644
--- a/apps/dm_new/app/(landing)/reuse/business/rain/suwon/page.tsx
+++ b/apps/dm/app/(landing)/reuse/business/rain/suwon/page.tsx
@@ -46,7 +46,7 @@ export default function GreywaterPage() {
         crumbs={[
             { label: "Home", href: "/reuse" },
             { label: "물 재이용 사례" },
-            { label: "빗물 재이용 사례" },
+            { label: "빗물이용시설 사례" },
             { label: "수원시", href: "/reuse/business/rain/suwon" },
         ]}
         hideFooterLine
diff --git a/apps/dm_new/app/(landing)/reuse/business/sewage/bolyeong/page.tsx b/apps/dm/app/(landing)/reuse/business/sewage/bolyeong/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/business/sewage/bolyeong/page.tsx
rename to apps/dm/app/(landing)/reuse/business/sewage/bolyeong/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/business/sewage/cheongju/page.tsx b/apps/dm/app/(landing)/reuse/business/sewage/cheongju/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/business/sewage/cheongju/page.tsx
rename to apps/dm/app/(landing)/reuse/business/sewage/cheongju/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/business/sewage/guri/page.tsx b/apps/dm/app/(landing)/reuse/business/sewage/guri/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/business/sewage/guri/page.tsx
rename to apps/dm/app/(landing)/reuse/business/sewage/guri/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/business/sewage/hwanggu/page.tsx b/apps/dm/app/(landing)/reuse/business/sewage/hwanggu/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/business/sewage/hwanggu/page.tsx
rename to apps/dm/app/(landing)/reuse/business/sewage/hwanggu/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/business/sewage/paju/page.tsx b/apps/dm/app/(landing)/reuse/business/sewage/paju/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/business/sewage/paju/page.tsx
rename to apps/dm/app/(landing)/reuse/business/sewage/paju/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/business/sewage/yeosu/page.tsx b/apps/dm/app/(landing)/reuse/business/sewage/yeosu/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/business/sewage/yeosu/page.tsx
rename to apps/dm/app/(landing)/reuse/business/sewage/yeosu/page.tsx
diff --git a/apps/dm/app/(landing)/reuse/cases/_components/GreywaterStatusSection.tsx b/apps/dm/app/(landing)/reuse/cases/_components/GreywaterStatusSection.tsx
new file mode 100644
index 000000000..1f5f93b44
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/cases/_components/GreywaterStatusSection.tsx
@@ -0,0 +1,461 @@
+"use client";
+
+import React from "react";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function SourceText() {
+  return (
+    <p className="mt-7 text-center text-[13px] text-neutral-500">
+      자료: 환경부(2024), 「2023 하수도 통계」
+    </p>
+  );
+}
+
+const tableStyles = {
+  container: "w-[1000px] mx-auto overflow-hidden",
+  table: "w-full table-fixed border-collapse text-center text-[16px]",
+  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
+  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
+  headerBg: "bg-[#E3E7EA]",
+};
+
+export default function GreywaterStatusSection() {
+  const title = "중수도(현황)";
+
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10 pb-[120px]">
+        {/* 1) 전체 중수도 설치 및 이용 현황 */}
+        <section
+          id="status-greywater-overall"
+          className="mt-10 scroll-mt-[120px]"
+        >
+          <SectionTitle>전체 중수도 설치 및 이용 현황</SectionTitle>
+
+          <div className="mt-10">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "130px" }} />
+                  <col style={{ width: "160px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th
+                      colSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      구분
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
+                      2018
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
+                      2019
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
+                      2020
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
+                      2021
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
+                      2022
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
+                      2023
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    {
+                      group: "전체",
+                      rows: [
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "576", "633", "682", "740", "819", "842"],
+                        ["건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>", "1,494.2", "1,514.4", "1,524.9", "989.1", "1,104.3", "1,015.4"],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "39.6", "40.0", "51.1", "47.1", "48.9", "50.7"],
+                        ["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "2,223.4", "1,165.2", "6,713.0", "4,681.7", "3,918.2", "898.4"],
+                      ],
+                    },
+                    {
+                      group: "법적 대상",
+                      rows: [
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "146", "154", "156", "170", "166", "169"],
+                        ["건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>", "674.9", "682.4", "736.1", "421.1", "434.9", "465.5"],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "20.0", "20.1", "31.2", "22.8", "21.2", "24.7"],
+                        ["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "1,819.4", "712.8", "6,479.9", "4,416.8", "3,663.1", "616.1"],
+                      ],
+                    },
+                    {
+                      group: "법적 비대상",
+                      rows: [
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "430", "479", "526", "570", "653", "673"],
+                        ["건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>", "819.3", "832.0", "788.8", "568.0", "669.4", "549.9"],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "19.6", "19.5", "19.9", "24.3", "27.7", "26.0"],
+                        ["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "404.0", "452.4", "233.1", "264.9", "255.1", "282.3"],
+                      ],
+                    },
+                  ].map((section, sIdx) => (
+                    <React.Fragment key={sIdx}>
+                      {section.rows.map((row, rIdx) => (
+                        <tr key={`${sIdx}-${rIdx}`} className="bg-white">
+                          {rIdx === 0 && (
+                            <td
+                              rowSpan={section.rows.length}
+                              className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
+                            >
+                              {section.group}
+                            </td>
+                          )}
+                          {row.map((val, i) => {
+                            const isFirstCol = i === 0;
+                            const isHighlightedCol = [1, 3, 5].includes(i);
+
+                            return (
+                              <td
+                                key={i}
+                                className={`${tableStyles.td} ${
+                                  isFirstCol ? "!font-bold !text-neutral-900" : ""
+                                } ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                                dangerouslySetInnerHTML={{ __html: val }}
+                              />
+                            );
+                          })}
+                        </tr>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 2) 공장 및 발전시설 내 중수도 설치 현황 */}
+        <section
+          id="status-greywater-factory"
+          className="scroll-mt-[120px]"
+        >
+          <SectionTitle>공장 및 발전시설 내 중수도 설치 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "130px" }} />
+                  <col style={{ width: "160px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th
+                      colSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      구분
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
+                      2018
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
+                      2019
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
+                      2020
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
+                      2021
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
+                      2022
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
+                      2023
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    {
+                      group: "전체",
+                      rows: [
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "125", "127", "139", "146", "151", "176"],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "141.3", "141.0", "146.7", "189.0", "190.3", "166.5"],
+                        ["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "33,712", "29,300", "33,110", "22,284", "21,593", "21,349"],
+                      ],
+                    },
+                    {
+                      group: "법적 대상",
+                      rows: [
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "59", "63", "78", "78", "82", "86"],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "108.6", "109.7", "118.1", "159.5", "142.6", "119.4"],
+                        ["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "24,847", "24,021", "28,055", "17,959", "12,241", "12,296"],
+                      ],
+                    },
+                    {
+                      group: "법적 비대상",
+                      rows: [
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "66", "64", "61", "68", "69", "90"],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "32.7", "31.4", "28.7", "29.5", "47.7", "47.1"],
+                        ["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "8,864.9", "5,278.8", "5,054.7", "4,324.6", "9,353.3", "9,052.4"],
+                      ],
+                    },
+                  ].map((section, sIdx) => (
+                    <React.Fragment key={sIdx}>
+                      {section.rows.map((row, rIdx) => (
+                        <tr key={`${sIdx}-${rIdx}`} className="bg-white">
+                          {rIdx === 0 && (
+                            <td
+                              rowSpan={section.rows.length}
+                              className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
+                            >
+                              {section.group}
+                            </td>
+                          )}
+                          {row.map((val, i) => {
+                            const isFirstCol = i === 0;
+                            const isHighlightedCol = [1, 3, 5].includes(i);
+
+                            return (
+                              <td
+                                key={i}
+                                className={`${tableStyles.td} ${
+                                  isFirstCol ? "!font-bold !text-neutral-900" : ""
+                                } ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                                dangerouslySetInnerHTML={{ __html: val }}
+                              />
+                            );
+                          })}
+                        </tr>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 3) 중수도 건축물별 이용량 현황 */}
+        <section
+          id="status-greywater-building"
+          className="scroll-mt-[120px]"
+        >
+          <SectionTitle>중수도 건축물별 이용량 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "160px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th
+                      rowSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      구분
+                    </th>
+                    <th
+                      colSpan={6}
+                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
+                    >
+                      이용량 (천m³/년)
+                    </th>
+                  </tr>
+                  <tr>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
+                      2018
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
+                      2019
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
+                      2020
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
+                      2021
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
+                      2022
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
+                      2023
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    ["공동주택", "804.0", "245.8", "255.1", "282.3", "255.1", "282.3"],
+                    ["판매시설", "1,447.5", "477.1", "802.1", "713.0", "972.3", "742.4"],
+                    ["숙박시설", "458.5", "0.4", "177.0", "102.0", "123.3", "140.9"],
+                    ["업무시설", "20.7", "0.3", "14.3", "44.9", "31.5", "37.4"],
+                    ["의료시설", "97.7", "7.2", "63.7", "55.7", "85.1", "70.4"],
+                    ["교육연구시설", "536.6", "1.5", "1,558.4", "772.2", "315.1", "66.7"],
+                    ["운수·물류시설", "759.2", "34.2", "459.8", "259.8", "252.8", "410.4"],
+                    ["기타", "453.1", "443.3", "3,126.8", "2,451.5", "1,880.8", "199.7"],
+                    ["합계", "35,936.3", "30,466.6", "37,487.2", "25,480.6", "24,345.8", "22,247.6"],
+                  ].map((row, idx) => (
+                    <tr
+                      key={idx}
+                      className={idx === 8 ? "bg-white font-bold" : "bg-white"}
+                    >
+                      {row.map((val, i) => (
+                        <td
+                          key={i}
+                          className={`${tableStyles.td} ${
+                            i === 0 ? "!font-bold !text-neutral-900" : ""
+                          } ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
+                        >
+                          {val}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 4) 중수도 용도별 이용량 현황 */}
+        <section
+          id="status-greywater-usage"
+          className="scroll-mt-[120px]"
+        >
+          <SectionTitle>중수도 용도별 이용량 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "160px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th
+                      rowSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      구분
+                    </th>
+                    <th
+                      colSpan={6}
+                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
+                    >
+                      이용량 (천m³/년)
+                    </th>
+                  </tr>
+                  <tr>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
+                      2018
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
+                      2019
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
+                      2020
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
+                      2021
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
+                      2022
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
+                      2023
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    ["공업용수", "33,082", "28,719", "32,312", "21,707", "20,991", "20,470"],
+                    ["세척·살수용수", "860.2", "146.5", "133.8", "100.7", "95.1", "149.9"],
+                    ["조경용수", "403.7", "99.3", "3,297.0", "2,611.1", "1,827.0", "1,116.7"],
+                    ["청소용수", "623.9", "764.2", "1,430.6", "879.7", "1,146.2", "286.0"],
+                    ["수세식화장실용수", "530.0", "646.6", "183.5", "161.2", "216.6", "147.6"],
+                    ["냉·난방용수", "150.1", "56.2", "57.5", "6.4", "0.9", "0.5"],
+                    ["친수용수", "120.8", "18.5", "29.3", "8.2", "4.1", "2.8"],
+                    ["기타", "165.6", "16.1", "43.2", "5.7", "64.0", "73.9"],
+                  ].map((row, idx) => (
+                    <tr key={idx} className="bg-white">
+                      {row.map((val, i) => (
+                        <td
+                          key={i}
+                          className={`${tableStyles.td} ${
+                            i === 0 ? "!font-bold !text-neutral-900" : ""
+                          } ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
+                        >
+                          {val}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(landing)/reuse/cases/_components/RainStatusSection.tsx b/apps/dm/app/(landing)/reuse/cases/_components/RainStatusSection.tsx
new file mode 100644
index 000000000..ec150d55b
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/cases/_components/RainStatusSection.tsx
@@ -0,0 +1,381 @@
+"use client";
+
+import React from "react";
+
+// 공통 섹션 타이틀 컴포넌트
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// 출처 텍스트
+function SourceText() {
+  return (
+    <p className="mt-7 text-center text-[13px] text-neutral-500">
+      자료: 환경부(2024), 「2023 하수도 통계」
+    </p>
+  );
+}
+
+const tableStyles = {
+  container: "w-[1000px] mx-auto overflow-hidden",
+  table: "w-full table-fixed border-collapse text-center text-[16px]",
+  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
+  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
+  headerBg: "bg-[#E3E7EA]",
+};
+
+export default function RainStatusSection() {
+  const title = "빗물이용시설(현황)";
+
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10 pb-[120px]">
+        {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
+        <section id="status-rain-building" className="mt-10 scroll-mt-[120px]">
+          <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
+
+          <div className="mt-10">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <thead>
+                  <tr>
+                    <th
+                      rowSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                      style={{ width: "160px" }}
+                    >
+                      구분
+                    </th>
+                    <th
+                      colSpan={6}
+                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
+                    >
+                      빗물이용량 (천m³/년)
+                    </th>
+                  </tr>
+                  <tr>
+                    <th
+                      className={`${tableStyles.th} bg-[#01ACE5] text-white`}
+                      style={{ width: "140px" }}
+                    >
+                      2018
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#17AFC7] text-white`}
+                      style={{ width: "140px" }}
+                    >
+                      2019
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#2CB2A9] text-white`}
+                      style={{ width: "140px" }}
+                    >
+                      2020
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#42B58B] text-white`}
+                      style={{ width: "140px" }}
+                    >
+                      2021
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#57B86D] text-white`}
+                      style={{ width: "140px" }}
+                    >
+                      2022
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#81C784] text-white`}
+                      style={{ width: "140px" }}
+                    >
+                      2023
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    ["골프장", "6,771.8", "6,417.4", "8,371.6", "10,215.4", "11,360", "10,191.6"],
+                    ["공공시설", "364", "325.2", "201.9", "244.6", "209.9", "299.6"],
+                    ["공동주택", "291", "840.5", "804.2", "2,393.0", "2,386", "2,428.4"],
+                    ["대규모점포", "169.9", "214.4", "58.4", "427.2", "371", "293.3"],
+                    ["체육시설", "52.6", "44.7", "48.6", "75.3", "71.8", "77.6"],
+                    ["학교", "33", "25.5", "22", "155.8", "165.4", "32.6"],
+                    ["기타", "311.6", "901.2", "344.5", "537.8", "564", "621.2"],
+                  ].map((row, idx) => (
+                    <tr key={idx} className="bg-white">
+                      {row.map((val, i) => (
+                        <td
+                          key={i}
+                          className={`${tableStyles.td} ${
+                            i === 0 ? "!font-bold !text-neutral-900" : ""
+                          } ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
+                        >
+                          {val}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */}
+        <section
+          id="status-rain-purpose-distribution"
+          className="scroll-mt-[120px]"
+        >
+          <SectionTitle>빗물이용시설의 용도별 분포 (2023년 기준)</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <thead>
+                  <tr>
+                    <th
+                      rowSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                      style={{ width: "160px" }}
+                    >
+                      용도
+                    </th>
+                    <th
+                      rowSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                      style={{ width: "84px" }}
+                    >
+                      개소수
+                      <br />
+                      (개소)
+                    </th>
+                    <th
+                      rowSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                      style={{ width: "84px" }}
+                    >
+                      저류용량
+                      <br />
+                      (천m³)
+                    </th>
+                    <th
+                      colSpan={8}
+                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
+                    >
+                      빗물이용량 (천m³/년)
+                    </th>
+                  </tr>
+                  <tr>
+                    <th
+                      className={`${tableStyles.th} bg-[#01ACE5] py-2 text-[13px] text-white`}
+                      style={{ width: "84px" }}
+                    >
+                      총사용량
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#10AED0] py-2 text-[13px] text-white`}
+                      style={{ width: "84px" }}
+                    >
+                      공공시설
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#20B0BA] py-2 text-[13px] text-white`}
+                      style={{ width: "84px" }}
+                    >
+                      공동주택
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#2FB2A5] py-2 text-[13px] text-white`}
+                      style={{ width: "84px" }}
+                    >
+                      대규모점포
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#3FB58F] py-2 text-[13px] text-white`}
+                      style={{ width: "84px" }}
+                    >
+                      체육시설
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#4EB77A] py-2 text-[13px] text-white`}
+                      style={{ width: "84px" }}
+                    >
+                      학교
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#5EB964] py-2 text-[13px] text-white`}
+                      style={{ width: "84px" }}
+                    >
+                      골프장
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#6DBB4F] py-2 text-[13px] text-white`}
+                      style={{ width: "84px" }}
+                    >
+                      기타
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    ["청소·환경정화용수", "195", "32.7", "108.8", "24.9", "5.8", "2.6", "4.4", "2.9", "-", "68.1"],
+                    ["세척·살수용수", "12", "1.4", "37", "35", "-", "-", "1.9", "-", "-", "0.2"],
+                    ["조경용수", "3,165", "7,440.8", "13,554.1", "168.1", "2,421.9", "290.7", "66.2", "29", "10,044", "534.3"],
+                    ["냉·난방수", "8", "1.6", "0.1", "-", "-", "-", "-", "0.1", "-", "-"],
+                    ["공업용수", "6", "14.9", "53.2", "52.8", "-", "-", "-", "-", "-", "0.4"],
+                    ["농업용수", "6.0", "0.5", "0.6", "-", "-", "-", "-", "-", "-", "0.6"],
+                    ["기타", "48", "306.1", "155.6", "2.8", "-", "-", "0.6", "0.5", "147.5", "4.2"],
+                    ["미기재", "103", "22.9", "34.8", "16.0", "0.6", "-", "4.6", "0.2", "-", "13.5"],
+                    ["합계", "3,543", "7,820.8", "13,944.7", "299.6", "2,428.4", "293.3", "77.6", "32.6", "10,191.6", "621.2"],
+                  ].map((row, idx) => (
+                    <tr
+                      key={idx}
+                      className={idx === 8 ? "bg-white font-bold" : "bg-white"}
+                    >
+                      {row.map((val, i) => {
+                        const isHighlightedCol = [1, 2].includes(i);
+
+                        return (
+                          <td
+                            key={i}
+                            className={`${tableStyles.td} ${
+                              i === 0 ? "!font-bold !text-neutral-900" : ""
+                            } ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                          >
+                            {val}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */}
+        <section
+          id="status-rain-purpose-usage"
+          className="scroll-mt-[120px]"
+        >
+          <SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <thead>
+                  <tr>
+                    <th
+                      rowSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                      style={{ width: "160px" }}
+                    >
+                      용도
+                    </th>
+                    <th
+                      colSpan={6}
+                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
+                    >
+                      빗물이용량 (천m³/년)
+                    </th>
+                  </tr>
+                  <tr>
+                    <th
+                      className={`${tableStyles.th} bg-[#01ACE5] text-white`}
+                      style={{ width: "140px" }}
+                    >
+                      2018
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#14AFCD] text-white`}
+                      style={{ width: "140px" }}
+                    >
+                      2019
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#28B2B4] text-white`}
+                      style={{ width: "140px" }}
+                    >
+                      2020
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#3CB59A] text-white`}
+                      style={{ width: "140px" }}
+                    >
+                      2021
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#50B880] text-white`}
+                      style={{ width: "140px" }}
+                    >
+                      2022
+                    </th>
+                    <th
+                      className={`${tableStyles.th} bg-[#6DBB4F] text-white`}
+                      style={{ width: "140px" }}
+                    >
+                      2023
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    ["청소·화장실용수", "126.5", "134.1", "96.5", "153.9", "140.5", "108.8"],
+                    ["세척·살수용수", "14.8", "14.6", "9.5", "49.8", "49.7", "37.0"],
+                    ["조경용수", "7,629.8", "8,496.2", "9,415.4", "13,360.4", "14,466.3", "13,554.1"],
+                    ["친수용수", "1.0", "0.1", "0.1", "0.1", "0.1", "0.1"],
+                    ["공업용수", "152.0", "77.0", "77.0", "75.4", "0.4", "53.2"],
+                    ["농업용수", "4.4", "4.3", "4.3", "4.3", "0.6", "0.6"],
+                    ["기타", "37.7", "42.6", "230.7", "394.3", "463.2", "155.6"],
+                  ].map((row, idx) => (
+                    <tr key={idx} className="bg-white">
+                      {row.map((val, i) => (
+                        <td
+                          key={i}
+                          className={`${tableStyles.td} ${
+                            i === 0 ? "!font-bold !text-neutral-900" : ""
+                          } ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
+                        >
+                          {val}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(landing)/reuse/cases/_components/SewageStatusSection.tsx b/apps/dm/app/(landing)/reuse/cases/_components/SewageStatusSection.tsx
new file mode 100644
index 000000000..0a2b34d5d
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/cases/_components/SewageStatusSection.tsx
@@ -0,0 +1,705 @@
+"use client";
+
+import React from "react";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function SourceText() {
+  return (
+    <p className="mt-7 text-center text-[13px] text-neutral-500">
+      자료: 환경부(2024), 「2023 하수도 통계」
+    </p>
+  );
+}
+
+const tableStyles = {
+  container: "w-[1000px] mx-auto overflow-hidden",
+  table: "w-full table-fixed border-collapse text-center text-[16px]",
+  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
+  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
+  headerBg: "bg-[#E3E7EA]",
+};
+
+export default function SewageStatusSection() {
+  const title = "하수처리수 재이용시설(현황)";
+
+  return (
+    <div className="relative bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        {/* 1) 연도별 하수처리수 재이용 현황 */}
+        <section id="status-treated-year" className="mt-10 scroll-mt-[120px]">
+          <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
+
+          <div className="mt-10">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "130px" }} />
+                  <col style={{ width: "180px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th
+                      colSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      구분
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
+                      2018
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
+                      2019
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
+                      2020
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
+                      2021
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
+                      2022
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
+                      2023
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    {
+                      group: "전체",
+                      rows: [
+                        [
+                          "개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
+                          "671",
+                          "681",
+                          "698",
+                          "704",
+                          "714",
+                          "717",
+                        ],
+                        [
+                          "하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
+                          "7,163.7",
+                          "7,140.4",
+                          "7,375.6",
+                          "7,335.8",
+                          "7,378.9",
+                          "7,537.2",
+                        ],
+                        [
+                          "재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
+                          "1,112.7",
+                          "1,148.7",
+                          "1,148.7",
+                          "1,127.0",
+                          "1,136.8",
+                          "1,137.5",
+                        ],
+                        [
+                          "재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>",
+                          "17.4",
+                          "16.5",
+                          "15.5",
+                          "14.1",
+                          "14.3",
+                          "14.4",
+                        ],
+                      ],
+                    },
+                    {
+                      group: "법적 대상",
+                      rows: [
+                        [
+                          "개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
+                          "68",
+                          "82",
+                          "94",
+                          "97",
+                          "101",
+                          "118",
+                        ],
+                        [
+                          "하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
+                          "761.2",
+                          "839.0",
+                          "935.3",
+                          "1,158.7",
+                          "1,220.6",
+                          "1,473.6",
+                        ],
+                        [
+                          "재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
+                          "162.2",
+                          "190.6",
+                          "218.5",
+                          "244.6",
+                          "247.2",
+                          "324.9",
+                        ],
+                        [
+                          "재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>",
+                          "24.7",
+                          "25.4",
+                          "27.8",
+                          "25.7",
+                          "24.2",
+                          "24.1",
+                        ],
+                      ],
+                    },
+                    {
+                      group: "법적 미대상",
+                      rows: [
+                        [
+                          "개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
+                          "603",
+                          "599",
+                          "604",
+                          "607",
+                          "613",
+                          "599",
+                        ],
+                        [
+                          "하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
+                          "6,402.5",
+                          "6,301.4",
+                          "6,440.3",
+                          "6,177.1",
+                          "6,158.3",
+                          "6,063.5",
+                        ],
+                        [
+                          "재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
+                          "950.6",
+                          "958.1",
+                          "926.2",
+                          "882.4",
+                          "889.5",
+                          "812.7",
+                        ],
+                        [
+                          "재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>",
+                          "16.5",
+                          "15.3",
+                          "13.6",
+                          "12.2",
+                          "12.6",
+                          "12.5",
+                        ],
+                      ],
+                    },
+                  ].map((section, sIdx) => (
+                    <React.Fragment key={sIdx}>
+                      {section.rows.map((row, rIdx) => (
+                        <tr key={`${sIdx}-${rIdx}`} className="bg-white">
+                          {rIdx === 0 && (
+                            <td
+                              rowSpan={section.rows.length}
+                              className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
+                            >
+                              {section.group}
+                            </td>
+                          )}
+                          {row.map((val, i) => {
+                            const isFirstCol = i === 0;
+                            const isHighlightedCol = [1, 3, 5].includes(i);
+
+                            return (
+                              <td
+                                key={i}
+                                className={`${tableStyles.td} ${
+                                  isFirstCol ? "!font-bold !text-neutral-900" : ""
+                                } ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                                dangerouslySetInnerHTML={{ __html: val }}
+                              />
+                            );
+                          })}
+                        </tr>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 2) 용도별 하수처리수 재이용 현황 */}
+        <section id="status-treated-usage" className="scroll-mt-[120px]">
+          <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "180px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      구분
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
+                      2018
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
+                      2019
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
+                      2020
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
+                      2021
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
+                      2022
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
+                      2023
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    { label: "총 재이용량", type: "total", values: ["1,112.7", "1,148.7", "1,144.7", "1,127.0", "1,136.8", "1,137.5"] },
+                    { label: "장내 재이용", type: "category", values: ["520.6", "519.8", "513.9", "520.3", "502.2", "490.0"] },
+                    { label: "세척수", type: "red-item", values: ["177.9", "174.4", "169.4", "180.9", "196.8", "191.2"] },
+                    { label: "냉각수", type: "red-item", values: ["45.5", "46.8", "50.4", "40.6", "38.3", "41.7"] },
+                    { label: "청소수", type: "red-item", values: ["17.6", "21.2", "21.2", "21.7", "20.8", "20.5"] },
+                    { label: "조경용수", type: "red-item", values: ["0.1", "0.1", "-", "-", "-", "-"] },
+                    { label: "회생용수", type: "red-item", values: ["15.8", "16.7", "17.8", "15.7", "14.4", "14.0"] },
+                    { label: "장내급수도", type: "red-item", values: ["2.4", "-", "-", "-", "-", "-"] },
+                    { label: "장내기타용수", type: "red-item", values: ["261.3", "260.6", "255.0", "261.1", "231.8", "222.6"] },
+                    { label: "장외 재이용", type: "category", values: ["592.1", "628.9", "630.8", "606.7", "634.6", "647.5"] },
+                    { label: "청소·화장실용수", type: "blue-item", values: ["0.6", "0.4", "0.4", "0.4", "0.4", "0.4"] },
+                    { label: "세척·살수용수", type: "blue-item", values: ["5.6", "9.9", "2.9", "2.1", "3.0", "3.6"] },
+                    { label: "조경용수", type: "blue-item", values: ["10.3", "16.4", "5.9", "4.5", "8.9", "9.5"] },
+                    { label: "친수용수", type: "blue-item", values: ["7.8", "3.1", "3.1", "3.0", "10.9", "10.5"] },
+                    { label: "하천유지용수", type: "blue-item", values: ["480.5", "482.5", "496.2", "442.7", "471.7", "484.0"] },
+                    { label: "농업용수", type: "blue-item", values: ["12.2", "11.9", "13.4", "10.7", "10.6", "11.4"] },
+                    { label: "지하수 충전", type: "blue-item", values: ["0.0", "0.0", "0.0", "13.4", "0.0", "0.0"] },
+                    { label: "공업용수", type: "blue-item", values: ["75.2", "104.6", "108.9", "129.9", "129.0", "128.1"] },
+                  ].map((row, idx) => {
+                    const isSubItem = row.type === "red-item" || row.type === "blue-item";
+                    const isLastInGroup = idx === 8 || idx === 17;
+
+                    return (
+                      <tr key={idx} className="bg-white">
+                        <td className={`${tableStyles.td} relative`}>
+                          {isSubItem ? (
+                            <>
+                              <div
+                                className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${
+                                  isLastInGroup ? "bottom-[0px]" : "bottom-[-2px]"
+                                }`}
+                              />
+                              <div
+                                className={`absolute left-[16px] w-[4px] z-20 ${
+                                  row.type === "red-item" ? "bg-[#FF8B8B]" : "bg-[#4ECBFF]"
+                                } top-[-2px] ${
+                                  isLastInGroup ? "bottom-[0px]" : "bottom-[-2px]"
+                                }`}
+                              />
+                              <span className="text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]">
+                                {row.label}
+                              </span>
+                            </>
+                          ) : (
+                            <span className="font-bold text-neutral-900 block w-full text-center">
+                              {row.label}
+                            </span>
+                          )}
+                        </td>
+
+                        {row.values.map((val, i) => (
+                          <td
+                            key={i}
+                            className={`${tableStyles.td} ${
+                              [0, 2, 4].includes(i) ? "bg-[#EAF5F5]" : ""
+                            }`}
+                          >
+                            {val}
+                          </td>
+                        ))}
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 3) 하수처리시설 설치 및 이용 현황 */}
+        <section id="status-treated-facility" className="scroll-mt-[120px]">
+          <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "130px" }} />
+                  <col style={{ width: "160px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th
+                      colSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      구분
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
+                      2018
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
+                      2019
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
+                      2020
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
+                      2021
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
+                      2022
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
+                      2023
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    {
+                      group: "전체",
+                      rows: [
+                        [
+                          "시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
+                          "671",
+                          "681",
+                          "698",
+                          "704",
+                          "714",
+                          "717",
+                        ],
+                        [
+                          "시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
+                          "25,846",
+                          "26,067",
+                          "26,244",
+                          "26,492",
+                          "26,586",
+                          "26,766",
+                        ],
+                        [
+                          "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
+                          "1,112.7",
+                          "1,148.7",
+                          "1,144.7",
+                          "1,127.0",
+                          "1,136.8",
+                          "1,137.5",
+                        ],
+                      ],
+                    },
+                    {
+                      group: "법적 대상",
+                      rows: [
+                        [
+                          "시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
+                          "68",
+                          "82",
+                          "94",
+                          "97",
+                          "101",
+                          "118",
+                        ],
+                        [
+                          "시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
+                          "3,088.9",
+                          "3,359.2",
+                          "3,612.6",
+                          "4,412.2",
+                          "4,692.3",
+                          "5,503.8",
+                        ],
+                        [
+                          "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
+                          "162.2",
+                          "190.6",
+                          "218.5",
+                          "244.6",
+                          "247.2",
+                          "324.9",
+                        ],
+                      ],
+                    },
+                    {
+                      group: "법적 미대상",
+                      rows: [
+                        [
+                          "시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
+                          "603",
+                          "599",
+                          "604",
+                          "607",
+                          "613",
+                          "599",
+                        ],
+                        [
+                          "시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
+                          "22,757",
+                          "22,708",
+                          "22,631",
+                          "22,080",
+                          "21,894",
+                          "21,262",
+                        ],
+                        [
+                          "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
+                          "950.6",
+                          "958.1",
+                          "926.2",
+                          "882.4",
+                          "889.5",
+                          "812.7",
+                        ],
+                      ],
+                    },
+                  ].map((section, sIdx) => (
+                    <React.Fragment key={sIdx}>
+                      {section.rows.map((row, rIdx) => (
+                        <tr key={`${sIdx}-${rIdx}`} className="bg-white">
+                          {rIdx === 0 && (
+                            <td
+                              rowSpan={section.rows.length}
+                              className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
+                            >
+                              {section.group}
+                            </td>
+                          )}
+                          {row.map((val, i) => {
+                            const isFirstCol = i === 0;
+                            const isHighlightedCol = [1, 3, 5].includes(i);
+
+                            return (
+                              <td
+                                key={i}
+                                className={`${tableStyles.td} ${
+                                  isFirstCol ? "!font-bold !text-neutral-900" : ""
+                                } ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                                dangerouslySetInnerHTML={{ __html: val }}
+                              />
+                            );
+                          })}
+                        </tr>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 4) 시도별 하수처리수 재이용 현황 */}
+        <section
+          id="status-treated-region"
+          className="scroll-mt-[120px]"
+        >
+          <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <div className="mb-2 text-right text-[13px] text-neutral-600">
+                (단위: 백만m³/일)
+              </div>
+
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "160px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th
+                      rowSpan={3}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      시도
+                    </th>
+                    <th
+                      rowSpan={3}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      연간
+                      <br />
+                      하수
+                      <br />
+                      처리량
+                    </th>
+                    <th
+                      colSpan={7}
+                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
+                    >
+                      재이용현황
+                    </th>
+                    <th
+                      rowSpan={3}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      재이용률
+                      <br />
+                      (%)
+                    </th>
+                    <th
+                      rowSpan={3}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      비고
+                    </th>
+                  </tr>
+                  <tr>
+                    <th
+                      rowSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      계
+                    </th>
+                    <th
+                      rowSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      장내
+                    </th>
+                    <th
+                      colSpan={5}
+                      className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}
+                    >
+                      장외
+                    </th>
+                  </tr>
+                  <tr>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>
+                      소계
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>
+                      하천유지용수
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>
+                      공업용수
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>
+                      농업용수
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>
+                      기타용수
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    ["합계", "7,537.2", "1,137.5", "490.0", "647.5", "484.0", "128.1", "11.4", "24.0", "15.1%", ""],
+                    ["서울특별시", "1,567.0", "114.9", "59.3", "55.6", "55.1", "-", "-", "0.5", "7.3%", ""],
+                    ["부산광역시", "491.5", "146.2", "120.7", "25.5", "25.3", "-", "-", "0.2", "29.7%", ""],
+                    ["대구광역시", "432.7", "102.4", "38.2", "64.2", "64.1", "-", "-", "0.1", "23.7%", ""],
+                    ["인천광역시", "302.3", "57.7", "11.6", "46.1", "29.2", "12.1", "0.5", "4.3", "19.1%", ""],
+                    ["광주광역시", "211.1", "28.7", "6.5", "22.3", "22.2", "-", "-", "0.1", "13.6%", ""],
+                    ["대전광역시", "244.6", "11.9", "11.9", "0.68", "0.0", "-", "-", "0.1", "4.9%", ""],
+                    ["울산광역시", "235.1", "36.1", "6.1", "29.9", "29.7", "0.2", "-", "-", "15.3%", ""],
+                    ["세종특별자치시", "38.5", "2.5", "2.0", "0.5", "0.4", "-", "0.2", "-", "6.6%", ""],
+                    ["경기도", "1,926.8", "313.3", "122.2", "191.0", "153.0", "33.3", "0.4", "4.3", "16.3%", ""],
+                    ["강원도", "230.4", "19.6", "15.4", "4.2", "2.1", "-", "-", "2.1", "8.5%", ""],
+                    ["충청북도", "190.9", "15.6", "6.3", "9.2", "7.4", "0.6", "-", "1.2", "8.2%", ""],
+                    ["충청남도", "241.5", "41.4", "9.8", "31.5", "17.7", "8.6", "4.5", "0.8", "17.1%", ""],
+                    ["전라북도", "292.4", "42.7", "7.5", "35.1", "33.5", "0.2", "1.0", "0.5", "14.6%", ""],
+                    ["전라남도", "254.0", "23.6", "12.3", "11.3", "8.7", "0.0", "1.0", "1.6", "9.3%", ""],
+                    ["경상북도", "378.4", "129.1", "33.7", "95.3", "20.8", "72.5", "0.8", "1.3", "34.1%", ""],
+                    ["경상남도", "411.3", "50.1", "25.0", "25.0", "14.7", "0.5", "3.0", "6.9", "12.2%", ""],
+                    ["제주특별자치도", "88.6", "1.7", "1.5", "0.12", "-", "-", "0.1", "-", "1.9%", ""],
+                  ].map((row, idx) => (
+                    <tr key={idx} className="bg-white">
+                      {row.map((val, i) => (
+                        <td
+                          key={i}
+                          className={`${tableStyles.td} ${
+                            i === 0 ? "!font-bold !text-neutral-900" : ""
+                          } ${[1, 3, 9].includes(i) ? "bg-[#EAF5F5]" : ""}`}
+                        >
+                          {val}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm_new/app/(landing)/reuse/cases/greywater/page.tsx b/apps/dm/app/(landing)/reuse/cases/greywater/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/cases/greywater/page.tsx
rename to apps/dm/app/(landing)/reuse/cases/greywater/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/cases/layout.tsx b/apps/dm/app/(landing)/reuse/cases/layout.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/cases/layout.tsx
rename to apps/dm/app/(landing)/reuse/cases/layout.tsx
diff --git a/apps/dm/app/(landing)/reuse/cases/page.tsx b/apps/dm/app/(landing)/reuse/cases/page.tsx
new file mode 100644
index 000000000..1043827dd
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/cases/page.tsx
@@ -0,0 +1,96 @@
+// DM 물 재이용 현황 페이지
+import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav";
+import SubPageHeader from "@/components/SubPageHeader";
+import RainStatusSection from "./_components/RainStatusSection";
+import GreywaterStatusSection from "./_components/GreywaterStatusSection";
+import SewageStatusSection from "./_components/SewageStatusSection";
+
+const menus: BusinessSubNavMenu[] = [
+  {
+    key: "status-rain",
+    label: "빗물이용시설(현황)",
+    sections: [
+      {
+        id: "status-rain-building",
+        label: "빗물이용시설의 건축물별 빗물이용량 현황",
+      },
+      {
+        id: "status-rain-purpose-distribution",
+        label: "빗물이용시설의 용도별 분포 (2023년 기준)",
+      },
+      {
+        id: "status-rain-purpose-usage",
+        label: "빗물이용시설의 용도별 빗물이용량 현황",
+      },
+    ],
+  },
+  {
+    key: "status-greywater",
+    label: "중수도(현황)",
+    defaultOpen: false,
+    sections: [
+      {
+        id: "status-greywater-overall",
+        label: "전체 중수도 설치 및 이용 현황",
+      },
+      {
+        id: "status-greywater-factory",
+        label: "공장 및 발전시설 내 중수도 설치 현황",
+      },
+      {
+        id: "status-greywater-building",
+        label: "중수도 건축물별 이용량 현황",
+      },
+      {
+        id: "status-greywater-usage",
+        label: "중수도 용도별 이용량 현황",
+      },
+    ],
+  },
+  {
+    key: "status-sewage",
+    label: "하수처리수 재이용시설(현황)",
+    defaultOpen: false,
+    sections: [
+      {
+        id: "status-treated-year",
+        label: "연도별 하수처리수 재이용 현황",
+      },
+      {
+        id: "status-treated-usage",
+        label: "용도별 하수처리수 재이용 현황",
+      },
+      {
+        id: "status-treated-facility",
+        label: "하수처리시설 설치 및 이용 현황",
+      },
+      {
+        id: "status-treated-region",
+        label: "시도별 하수처리수 재이용 현황",
+      },
+    ],
+  },
+];
+
+export default function StatusPage() {
+  return (
+    <div className="relative">
+      {/* 상단 헤더 */}
+      <SubPageHeader
+        title="물 재이용 현황"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 현황", href: "/status" },
+        ]}
+      />
+      {/* 우측 앵커 네비 */}
+      <BusinessSubNav menus={menus} offsetTop={120} />
+
+      <div className="max-w-[1300px] pb-24">
+        <RainStatusSection />
+        <GreywaterStatusSection />
+        <SewageStatusSection />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm_new/app/(landing)/reuse/cases/rain/page.tsx b/apps/dm/app/(landing)/reuse/cases/rain/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/cases/rain/page.tsx
rename to apps/dm/app/(landing)/reuse/cases/rain/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/cases/treated/page.tsx b/apps/dm/app/(landing)/reuse/cases/treated/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/cases/treated/page.tsx
rename to apps/dm/app/(landing)/reuse/cases/treated/page.tsx
diff --git a/apps/dm/app/(landing)/reuse/intro/_components/LawIntroSection.tsx b/apps/dm/app/(landing)/reuse/intro/_components/LawIntroSection.tsx
new file mode 100644
index 000000000..de39aa798
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/intro/_components/LawIntroSection.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import React from "react";
+import Image, { type StaticImageData } from "next/image";
+
+import lawPlan from "@/public/images/landing/intro/law_timeline.png";
+import planPerformance from "@/public/images/landing/intro/performance_left.png";
+import domesticChange from "@/public/images/landing/intro/domestic_textbox.png";
+import policyHistory from "@/public/images/landing/intro/policy_timeline.png";
+import lawRelation from "@/public/images/landing/intro/rel_note.png";
+import domesticLinkage from "@/public/images/landing/intro/linkage.png";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[120px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function LawIntroSection() {
+  const title = "물 재이용 법";
+
+  return (
+    <div className="bg-white">
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
+          <span className="relative z-10">{title}</span>
+          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <SectionShell
+          id="law-plan"
+          title="법률 제·개정 및 기본계획 수립"
+          className="mt-10"
+        >
+          <ImgCard src={lawPlan} alt="법률 제·개정 및 기본계획 수립" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="plan-performance"
+          title="제2차 계획 대비 실적 현황"
+        >
+          <ImgCard src={planPerformance} alt="제2차 계획 대비 실적 현황" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell id="domestic-change" title="우리나라의 수자원 현황 및 물이용 여건">
+          <ImgCard src={domesticChange} alt="우리나라의 수자원 현황 및 물이용 여건" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="policy-history"
+          title="물 재이용 정책 변화 추이"
+        >
+          <ImgCard src={policyHistory} alt="물 재이용 정책 변화 추이" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="law-relation"
+          title="타법령과의 관계 검토"
+        >
+          <ImgCard src={lawRelation} alt="타법령과의 관계 검토" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="domestic-linkage"
+          title="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요"
+        >
+          <ImgCard src={domesticLinkage} alt="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(landing)/reuse/intro/_components/RainIntroSection.tsx b/apps/dm/app/(landing)/reuse/intro/_components/RainIntroSection.tsx
new file mode 100644
index 000000000..4de564a54
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/intro/_components/RainIntroSection.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import React from "react";
+import Image, { type StaticImageData } from "next/image";
+
+import rainSummary from "@/public/images/landing/intro/rainreuse_intro.png";
+import rainDuty from "@/public/images/landing/intro/rainreuse_mandatory.png";
+import rainDesign from "@/public/images/landing/intro/rainwater_design.png";
+import rainStandard from "@/public/images/landing/intro/rainwater_standards.png";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[120px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function RainIntroSection() {
+  const title = "빗물 이용시설";
+
+  return (
+    <div className="mt-[120px] bg-white">
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
+          <span className="relative z-10">{title}</span>
+          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <SectionShell id="rain-intro" title="빗물 재이용 소개" className="mt-10">
+          <ImgCard src={rainSummary} alt="빗물 재이용 소개" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="rain-mandatory"
+          title="빗물이용시설 설치 관리 법적 의무 대상"
+        >
+          <ImgCard src={rainDuty} alt="빗물이용시설 설치 관리 법적 의무 대상" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell id="rain-design" title="빗물이용시설 설계 방안">
+          <ImgCard src={rainDesign} alt="빗물이용시설 설계 방안" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="rain-standards"
+          title="빗물이용시설 시설기준 및 관리기준"
+        >
+          <ImgCard src={rainStandard} alt="빗물이용시설 시설기준 및 관리기준" />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(landing)/reuse/intro/_components/ReuseWaterIntroSection.tsx b/apps/dm/app/(landing)/reuse/intro/_components/ReuseWaterIntroSection.tsx
new file mode 100644
index 000000000..03b01e398
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/intro/_components/ReuseWaterIntroSection.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import React from "react";
+import Image, { type StaticImageData } from "next/image";
+
+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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[120px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function ReuseWaterIntroSection() {
+  const title = "중수도";
+
+  return (
+    <div className="mt-[120px] bg-white">
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
+          <span className="relative z-10">{title}</span>
+          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <SectionShell
+          id="greywater-intro"
+          title="중수 재이용 소개"
+          className="mt-10"
+        >
+          <ImgCard src={greywaterIntro} alt="중수 재이용 소개" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="greywater-mandatory"
+          title="중수도 설치 의무 대상"
+        >
+          <ImgCard src={greywaterMandatory} alt="중수도 설치 의무 대상" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="greywater-standard"
+          title="중수도 시설기준 및 관리기준"
+        >
+          <ImgCard src={greywaterStandard} alt="중수도 시설기준 및 관리기준" />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(landing)/reuse/intro/_components/TreatedIntroSection.tsx b/apps/dm/app/(landing)/reuse/intro/_components/TreatedIntroSection.tsx
new file mode 100644
index 000000000..ff3ece0fc
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/intro/_components/TreatedIntroSection.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import React from "react";
+import Image, { type StaticImageData } from "next/image";
+
+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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[120px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function TreatedIntroSection() {
+  const title = "하수처리수";
+
+  return (
+    <div className="mt-[120px] bg-white">
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
+          <span className="relative z-10">{title}</span>
+          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <SectionShell
+          id="treatedwater-intro"
+          title="하수처리수 소개"
+          className="mt-10"
+        >
+          <ImgCard src={treatedwaterIntro} alt="하수처리수" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="treatedwater-mandatory"
+          title="하수처리수 재이용시설 의무 대상"
+        >
+          <ImgCard
+            src={treatedwaterMandatory}
+            alt="하수처리수 재이용시설 의무 대상"
+          />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm_new/app/(landing)/reuse/intro/greywater/page.tsx b/apps/dm/app/(landing)/reuse/intro/greywater/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/intro/greywater/page.tsx
rename to apps/dm/app/(landing)/reuse/intro/greywater/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/intro/law/page.tsx b/apps/dm/app/(landing)/reuse/intro/law/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/intro/law/page.tsx
rename to apps/dm/app/(landing)/reuse/intro/law/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/intro/layout.tsx b/apps/dm/app/(landing)/reuse/intro/layout.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/intro/layout.tsx
rename to apps/dm/app/(landing)/reuse/intro/layout.tsx
diff --git a/apps/dm/app/(landing)/reuse/intro/page.tsx b/apps/dm/app/(landing)/reuse/intro/page.tsx
new file mode 100644
index 000000000..5ee955604
--- /dev/null
+++ b/apps/dm/app/(landing)/reuse/intro/page.tsx
@@ -0,0 +1,86 @@
+// DM 물 재이용 소개 페이지
+import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav";
+import SubPageHeader from "@/components/SubPageHeader";
+import LawIntroSection from "./_components/LawIntroSection";
+import RainIntroSection from "./_components/RainIntroSection";
+import ReuseWaterIntroSection from "./_components/ReuseWaterIntroSection";
+import TreatedIntroSection from "./_components/TreatedIntroSection";
+
+const menus: BusinessSubNavMenu[] = [
+  {
+    key: "intro-law",
+    label: "물 재이용 법",
+    sections: [
+      { id: "law-plan", label: "법률 제·개정 및 기본계획 수립" },
+      { id: "plan-performance", label: "제2차 계획 대비 실적 현황" },
+      { id: "domestic-change", label: "우리나라의 수자원 현황 및 물이용 여건" },
+      { id: "policy-history", label: "물 재이용 정책 변화 추이" },
+      { id: "law-relation", label: "타법령과의 관계 검토" },
+      { id: "domestic-linkage", label: "주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" },
+    ],
+  },
+  {
+    key: "intro-rain",
+    label: "빗물 이용시설",
+    defaultOpen: false,
+    sections: [
+      { id: "rain-intro", label: "빗물 재이용 소개" },
+      {
+        id: "rain-mandatory",
+        label: "빗물이용시설 설치 관리 법적 의무 대상",
+      },
+      { id: "rain-design", label: "빗물이용시설 설계 방안" },
+      {
+        id: "rain-standards",
+        label: "빗물이용시설 시설기준 및 관리기준",
+      },
+    ],
+  },
+  {
+    key: "intro-greywater",
+    label: "중수도",
+    defaultOpen: false,
+    sections: [
+      { id: "greywater-intro", label: "중수 재이용 소개" },
+      { id: "greywater-mandatory", label: "중수도 설치 의무 대상" },
+      { id: "greywater-standard", label: "중수도 시설기준 및 관리기준" },
+    ],
+  },
+  {
+    key: "intro-treated",
+    label: "하수처리수",
+    defaultOpen: false,
+    sections: [
+      { id: "treatedwater-intro", label: "하수처리수 소개" },
+      {
+        id: "treatedwater-mandatory",
+        label: "하수처리수 재이용시설 의무 대상",
+      },
+    ],
+  },
+];
+
+export default function IntroPage() {
+  return (
+    <div className="relative">
+      {/* 상단 헤더 */}
+      <SubPageHeader
+        title="물 재이용 소개"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 소개", href: "/intro" },
+        ]}
+      />
+      {/* 우측 앵커 네비 */}
+      <BusinessSubNav menus={menus} offsetTop={120} />
+
+      {/* 본문 */}
+      <div className="max-w-[1300px] pb-24">
+        <LawIntroSection />
+        <RainIntroSection />
+        <ReuseWaterIntroSection />
+        <TreatedIntroSection />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm_new/app/(landing)/reuse/intro/rain/page.tsx b/apps/dm/app/(landing)/reuse/intro/rain/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/intro/rain/page.tsx
rename to apps/dm/app/(landing)/reuse/intro/rain/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/intro/treated/page.tsx b/apps/dm/app/(landing)/reuse/intro/treated/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/intro/treated/page.tsx
rename to apps/dm/app/(landing)/reuse/intro/treated/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/layout.tsx b/apps/dm/app/(landing)/reuse/layout.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/layout.tsx
rename to apps/dm/app/(landing)/reuse/layout.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/page.tsx b/apps/dm/app/(landing)/reuse/page.tsx
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/page.tsx
rename to apps/dm/app/(landing)/reuse/page.tsx
diff --git a/apps/dm_new/app/(landing)/reuse/reuse.module.css b/apps/dm/app/(landing)/reuse/reuse.module.css
similarity index 100%
rename from apps/dm_new/app/(landing)/reuse/reuse.module.css
rename to apps/dm/app/(landing)/reuse/reuse.module.css
diff --git a/apps/dm/app/(popup-layout)/map/popup/page.tsx b/apps/dm/app/(popup-layout)/map/popup/page.tsx
index e410ad2a7..bdce68a87 100644
--- a/apps/dm/app/(popup-layout)/map/popup/page.tsx
+++ b/apps/dm/app/(popup-layout)/map/popup/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Gis from "@common/business_components/ui/map/Gis";
+import "@/app/commonOrigin.css";
 import { useEffect, useRef, useState } from "react";
 import { mapService } from "../service";
 import GisApp from "@common/business_components/ui/map/lib/gis.core";
@@ -29,10 +30,15 @@ const Map = () => {
       ruseUtztnFcltCd: fclt.pbnstRuseFcltId,
     }));
 
+    if (!window.opener || typeof window.opener.postMessage !== "function") {
+      alert("부모 창을 찾을 수 없습니다. 팝업이 'noopener'로 열렸거나, 보안 정책으로 차단되었을 수 있어요.");
+      return;
+    }
+
     window.opener.postMessage(
       {
         type: "SET_SUBS_INFO",
-        payload: subsInfoList, // 또는 필요한 데이터
+        payload: subsInfoList, // 배열로 전송 (최대 3개)
       },
       "*"
     );
@@ -52,9 +58,23 @@ const Map = () => {
 
   //하수처리시설코드로 재이용시설 목록 조회
   const reuseData = async (ruseFcltPk: any) => {
+    if (!ruseFcltPk) {
+      console.warn("[reuseData] ruseFcltPk가 없습니다.");
+      return;
+    }
     try {
+      console.log("[reuseData] API 호출 - ruseFcltPk:", ruseFcltPk);
       const response = await mapService.getPbnstRuseFclts(ruseFcltPk);
-      const data = response.data || [];
+      console.log("[reuseData] API 응답 전체:", response);
+      // 응답이 배열이면 바로 사용, 객체면 .data 추출
+      const data = Array.isArray(response)
+        ? response
+        : Array.isArray(response?.data)
+          ? response.data
+          : response?.data
+            ? [response.data]
+            : [];
+      console.log("[reuseData] 파싱된 data:", data);
       setSelectedFclts((prev) => {
         const newItems = data.filter(
           (item: any) =>
@@ -62,7 +82,7 @@ const Map = () => {
             Object.keys(item).length > 0 &&
             !prev.some((f) => f.pbnstRuseFcltId === item.pbnstRuseFcltId)
         );
-        console.log(newItems);
+        console.log("[reuseData] 추가될 newItems:", newItems);
         return [...prev, ...newItems];
       });
     } catch (error) {
@@ -75,11 +95,45 @@ const Map = () => {
     fetchData();
   }, []);
 
+  // 부모창에 초기 선택값 요청 (팝업 열릴 때 기존 선택 목록 받아오기)
+  useEffect(() => {
+    const origin = window.location.origin;
+    if (window.opener) {
+      window.opener.postMessage({ type: "REQUEST_INIT_SUBS_INFO" }, origin);
+    }
+  }, []);
+
+  // 부모창에서 초기 선택값 수신
+  useEffect(() => {
+    const origin = window.location.origin;
+
+    const handler = (event: MessageEvent) => {
+      if (event.origin !== origin) return;
+
+      const data = event.data;
+      if (!data || typeof data !== "object") return;
+
+      if (data.type === "INIT_SUBS_INFO") {
+        const list = Array.isArray(data.payload) ? data.payload : [];
+        setSelectedFclts(
+          list.map((x) => ({
+            ruseUtztnFcltNm: x.ruseUtztnFcltNm ?? "",
+            pbnstRuseFcltId: x.ruseUtztnFcltCd ?? "",
+          }))
+        );
+      }
+    };
+
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, []);
+
   // 레이어 생성 후 초기화 처리
   const onCheckedLayersChange = () => {
     //수요처 ID
     const urlParams = new URLSearchParams(window.location.search);
     const dmdInfoId = urlParams.get("dmdInfoId");
+    console.log("[하이라이트] dmdInfoId:", dmdInfoId);
 
     //수요처 위치로 화면 이동
     const maps = gisMaps.current;
@@ -88,22 +142,42 @@ const Map = () => {
     const featureId = `${layerNm}.${dmdInfoId}`;
     let foundFeature: any = null;
 
+    // 현재 로드된 레이어 목록 출력
+    const allLayerNames = maps
+      .getLayers()
+      .getArray()
+      .map((l: any) => l.get("lyrTyNm") || l.get("name") || "(unnamed)");
+    console.log("[하이라이트] 전체 레이어 목록:", allLayerNames);
+    console.log("[하이라이트] 탐색 대상 레이어:", layerNm);
+    console.log("[하이라이트] 탐색 대상 featureId:", featureId);
+
     maps
       .getLayers()
       .getArray()
       .forEach((layer: any) => {
         if (layer.get("lyrTyNm") == layerNm) {
+          console.log("[하이라이트] 레이어 발견:", layerNm);
           const source = layer.getSource?.();
           if (source?.getFeatureById) {
             const feature = source.getFeatureById(String(featureId).trim());
+            console.log("[하이라이트] feature 탐색결과:", feature);
             if (feature) {
               foundFeature = feature;
               return;
-            } 
+            }
+            // feature 못 찾을 때 소스 내 전체 feature ID 출력
+            if (source?.getFeatures) {
+              const allIds = source.getFeatures().map((f: any) => f.getId());
+              console.log("[하이라이트] 소스 내 전체 feature ID:", allIds);
+            }
           }
         }
       });
 
+    if (!foundFeature) {
+      console.warn("[하이라이트] feature를 찾지 못했습니다. 위 레이어 목록/ID를 확인하세요.");
+    }
+
     if (foundFeature) {
       const geometry = foundFeature.getGeometry();
 
@@ -133,7 +207,7 @@ const Map = () => {
         { width: 30 }
       );
     } else {
-      alert("수요처의 좌표정보를 찾을수 없으므로, 상단 조회조건의 시설명을 입력하여 위치를 조회하시기 바랍니다.");
+      console.warn("수요처의 좌표정보를 찾을 수 없습니다. dmdInfoId:", dmdInfoId);
     }
 
     const formatNumber = (val: any) => {
@@ -185,6 +259,7 @@ const Map = () => {
 
   // 검색해서 재이용시설 선택하면 해당 시설로 화면 이동 처리
   useEffect(() => {
+    console.warn(selectDataPk);
     if (!selectDataPk || Object.keys(selectDataPk).length === 0) return;
     const maps = gisMaps.current;
     let foundFeature: any = null;
@@ -226,8 +301,12 @@ const Map = () => {
 
   // 재이용시설 클릭 시 선택 시설목록에 추가
   const onFeatureSelect = (data: any) => {
+    // feature의 모든 속성 출력 (어떤 키가 있는지 확인)
+    const properties = data.getProperties?.() ?? {};
+    console.log("[onFeatureSelect] feature 속성 전체:", properties);
     // 처리시설코드
     const swtrmtFcltCd = data.get("swtrmt_fclt_cd");
+    console.log("[onFeatureSelect] swtrmt_fclt_cd:", swtrmtFcltCd);
     reuseData(swtrmtFcltCd);
   };
 
diff --git a/apps/dm/app/(popup-layout)/map/popup/selectedFcltList.tsx b/apps/dm/app/(popup-layout)/map/popup/selectedFcltList.tsx
index bdf4d7e2c..121de004e 100644
--- a/apps/dm/app/(popup-layout)/map/popup/selectedFcltList.tsx
+++ b/apps/dm/app/(popup-layout)/map/popup/selectedFcltList.tsx
@@ -64,8 +64,6 @@ export default function SelectedFcltList({
     </>
   );
 
-  if (data.length === 0) return null;
-
   return (
     <div className="fixed right-40 top-[8rem] w-[40rem] max-h-[130rem] overflow-auto bg-white shadow-lg rounded p-4 border border-gray-300 z-50">
       <h3 className="bg-cyan-700 text-white text-xl font-bold mb-2 p-2">
diff --git a/apps/dm/app/(popup-layout)/map/service/map.ts b/apps/dm/app/(popup-layout)/map/service/map.ts
index 00e3ab561..dea14f0d0 100644
--- a/apps/dm/app/(popup-layout)/map/service/map.ts
+++ b/apps/dm/app/(popup-layout)/map/service/map.ts
@@ -6,7 +6,7 @@ import { DEV_URL_WR, DEV_URL_SN } from "@/components/ui/config";
 export type LyrStngProps = {
   lyr_sn: string
   lyr_nm: string
-  upper_lyr_sn: string  
+  upper_lyr_sn: string
   drawOrdr: string
   flterSql: string
   gobjTy: string
@@ -29,7 +29,7 @@ export type LyrStngProps = {
 export const mapService = {
   //레이어 설정 조회
   getLyrStngs: async () => {
-    const response = await fetch(`${DEV_URL_SN}/api/v1/map/lyrStngs/DM_NETWORK`, {
+    const response = await fetch(`${DEV_URL_SN}/map/lyrStngs/DM_NETWORK`, {
       method: 'GET',
       headers: {
         'Accept': 'application/json',
@@ -42,7 +42,7 @@ export const mapService = {
 
     return response.json();
   },
-  getPbnstRuseFclts: async (ruseFcltPk:any) => {
+  getPbnstRuseFclts: async (ruseFcltPk: any) => {
     const response = await fetch(`${DEV_URL_WR}/reuseFc/pubFc/${ruseFcltPk}`, {
       method: 'GET',
       headers: {
diff --git a/apps/dm/app/(with-layout)/apply/dmdco/page.tsx b/apps/dm/app/(with-layout)/apply/dmdco/page.tsx
new file mode 100644
index 000000000..a450e8582
--- /dev/null
+++ b/apps/dm/app/(with-layout)/apply/dmdco/page.tsx
@@ -0,0 +1,728 @@
+/**
+ * 수요처 등록/수정
+ */
+"use client";
+
+import { useEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
+import { useRouter } from "next/navigation";
+import SubPageHeader from "@/components/SubPageHeader";
+import PostcodeModal from "@/components/PostcodeModal";
+import type { AddrItem } from "@/app/store/sdmMng/postcode-service";
+import { useDmStore } from "@/app/store";
+import { fetchType, getFetch, postFetch, putFetch } from "@/components/ui/api";
+import { getCookie } from "@common/components/lib";
+
+type Option = { value: string; label: string };
+
+type SessionUser = {
+  dmdInfoId?: string;
+  dmdCoNm?: string;
+  zip?: string;
+  daddr?: string;
+  daddr2?: string;
+  telno?: string;
+  ctpvCd?: string;
+  sggCd?: string;
+  rgtr?: string;
+  [key: string]: unknown;
+};
+
+const TOKEN_ID_COOKIE = "token-id";
+const FALLBACK_UUID = "c475824c-0e82-4a06-a282-2b55a20df265";
+const normalizeRegionName = (value: string) => value.replace(/\s+/g, "").trim();
+const isSameRegionName = (left: string, right: string) => {
+  const a = normalizeRegionName(left);
+  const b = normalizeRegionName(right);
+  return Boolean(a && b && (a === b || a.includes(b) || b.includes(a)));
+};
+const formatKoreanPhoneNumber = (value: string) => {
+  const digits = value.replace(/\D/g, "").slice(0, 11); // 숫자만 추출하고 최대 11자리까지만 사용
+  if (!digits) return ""; // 입력이 비어 있으면 빈 문자열 반환
+
+  if (/^1\d{0,7}$/.test(digits)) { // 15xx/16xx/18xx 같은 대표번호 패턴
+    if (digits.length <= 4) return digits; // 아직 뒷자리가 부족하면 원문 유지
+    return `${digits.slice(0, 4)}-${digits.slice(4, 8)}`; // xxxx-xxxx
+  }
+
+  if (digits.startsWith("02")) { // 서울 지역번호(02)
+    const rest = digits.slice(2); // 국번/가입자번호 구간
+    if (!rest) return "02"; // 02만 입력된 상태
+    if (rest.length <= 3) return `02-${rest}`; // 02-xxx
+    if (rest.length <= 7) return `02-${rest.slice(0, 3)}-${rest.slice(3)}`; // 02-xxx-xxxx
+    return `02-${rest.slice(0, 4)}-${rest.slice(4, 8)}`; // 02-xxxx-xxxx
+  }
+
+  if (digits.startsWith("0")) { // 02 제외 일반 지역번호/휴대폰(010 포함)
+    const area = digits.slice(0, 3); // 앞 3자리 식별자
+    const rest = digits.slice(3); // 나머지 번호
+    if (!rest) return area; // 식별자만 입력된 상태
+    if (rest.length <= 3) return `${area}-${rest}`; // 0xx-xxx
+    if (rest.length <= 7) return `${area}-${rest.slice(0, 3)}-${rest.slice(3)}`; // 0xx-xxx-xxxx
+    return `${area}-${rest.slice(0, 4)}-${rest.slice(4, 8)}`; // 0xx-xxxx-xxxx
+  }
+
+  if (digits.length <= 4) return digits; // 예외 입력: 앞 4자리까지
+  if (digits.length <= 8) return `${digits.slice(0, 4)}-${digits.slice(4)}`; // xxxx-xxxx
+  return `${digits.slice(0, 4)}-${digits.slice(4, 8)}-${digits.slice(8, 11)}`; // xxxx-xxxx-xxx
+};
+
+function Divider() {
+  return <div className="h-px w-full bg-neutral-200" />;
+}
+
+function FormRow({
+  label,
+  required,
+  children,
+}: {
+  label: ReactNode;
+  required?: boolean;
+  children: ReactNode;
+}) {
+  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">
+        <div className="flex items-center gap-1 text-lg font-semibold text-neutral-800">
+          <span>{label}</span>
+          {required ? <span className="text-red-500">*</span> : null}
+        </div>
+      </div>
+
+      <div className="col-span-12 lg:col-span-10 px-6 py-6">{children}</div>
+    </div>
+  );
+}
+
+function TextInput({
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+  disabled,
+  inputRef,
+  className = "",
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  type?: string;
+  disabled?: boolean;
+  inputRef?: RefObject<HTMLInputElement | null>;
+  className?: string;
+}) {
+  return (
+    <input
+      ref={inputRef}
+      type={type}
+      value={value}
+      disabled={disabled}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className={[
+        "h-11 w-full rounded border border-neutral-300 bg-white px-3 text-sm text-neutral-800",
+        "placeholder:text-neutral-400 focus:border-neutral-400 focus:outline-none",
+        disabled ? "bg-neutral-100 text-neutral-400" : "",
+        className,
+      ].join(" ")}
+    />
+  );
+}
+
+function SelectBox({
+  value,
+  onChange,
+  options,
+  className = "",
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  options: Option[];
+  className?: string;
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className={[
+        "h-11 w-[220px] rounded border border-neutral-300 bg-white px-3 text-sm text-neutral-800",
+        "focus:border-neutral-400 focus:outline-none",
+        className,
+      ].join(" ")}
+    >
+      {options.map((o) => (
+        <option key={o.value} value={o.value}>
+          {o.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+export default function DemandPlaceRegisterPage() {
+  const router = useRouter();
+  const { Common, initializeCommonData } = useDmStore((state) => state);
+  const { selectSidoData, selectSigunData } = Common;
+
+  const [editMode, setEditMode] = useState(false);
+  const [sessionUser, setSessionUser] = useState<SessionUser | null>(null);
+
+  const [sido, setSido] = useState("");
+  const [sigungu, setSigungu] = useState("");
+
+  const [company, setCompany] = useState("");
+  const [bizNo, setBizNo] = useState("");
+  const [workerNo, setWorkerNo] = useState("");
+  const [noWorkerNo, setNoWorkerNo] = useState(true); // 종사업자번호 해당없음 default 선택으로 설정
+
+  const [zip, setZip] = useState("");
+  const [addr1, setAddr1] = useState("");
+  const [addr2, setAddr2] = useState("");
+  const [isPostcodeModalOpen, setIsPostcodeModalOpen] = useState(false);
+  const [focusDetailAddrOnClose, setFocusDetailAddrOnClose] = useState(false);
+  const detailAddrRef = useRef<HTMLInputElement | null>(null);
+
+  const [tel, setTel] = useState("");
+  const [currentPw, setCurrentPw] = useState("");
+  const [isCurrentPwVerified, setIsCurrentPwVerified] = useState(false);
+  const [isCheckingCurrentPw, setIsCheckingCurrentPw] = useState(false);
+  const [pw, setPw] = useState("");
+  const [pw2, setPw2] = useState("");
+
+  useEffect(() => {
+    initializeCommonData();
+  }, [initializeCommonData]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const rawUser = sessionStorage.getItem("user");
+    if (!rawUser) {
+      setEditMode(false);
+      setSessionUser(null);
+      return;
+    }
+
+    try {
+      const user = JSON.parse(rawUser) as SessionUser;
+      setSessionUser(user);
+      setEditMode(true);
+
+      const fullId = String(user.dmdInfoId ?? "").trim();
+      const bizDigits = fullId.slice(0, 10);
+      const workerDigits = fullId.slice(10, 14);
+
+      setBizNo(bizDigits);
+      if (workerDigits && workerDigits !== "0000") {
+        setNoWorkerNo(false);
+        setWorkerNo(workerDigits);
+      } else {
+        setNoWorkerNo(true);
+        setWorkerNo("");
+      }
+
+      setCompany(String(user.dmdCoNm ?? ""));
+      setZip(String(user.zip ?? ""));
+      setAddr1(String(user.daddr ?? ""));
+      setAddr2(String(user.daddr2 ?? ""));
+      setTel(formatKoreanPhoneNumber(String(user.telno ?? "")));
+      setSido(String(user.ctpvCd ?? ""));
+      setSigungu(String(user.sggCd ?? ""));
+    } catch {
+      setEditMode(false);
+      setSessionUser(null);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!focusDetailAddrOnClose || isPostcodeModalOpen) return;
+
+    if (!addr1.trim()) {
+      setFocusDetailAddrOnClose(false);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      detailAddrRef.current?.focus();
+      setFocusDetailAddrOnClose(false);
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [addr1, focusDetailAddrOnClose, isPostcodeModalOpen]);
+
+  useEffect(() => {
+    if (!editMode) return;
+    setIsCurrentPwVerified(false);
+  }, [bizNo, workerNo, noWorkerNo, editMode]);
+
+  const sidoOptions = useMemo<Option[]>(() => {
+    const mapped = selectSidoData
+      .filter((item) => item.val !== "0")
+      .map((item) => ({ value: item.val, label: item.text }));
+
+    return [{ value: "", label: "선택" }, ...mapped];
+  }, [selectSidoData]);
+
+  const sigunguOptions = useMemo<Option[]>(() => {
+    if (!sido) return [{ value: "", label: "선택" }];
+
+    const mapped = selectSigunData
+      .filter((item) => item.val.substring(0, 2) === sido)
+      .map((item) => ({ value: item.val, label: item.text }));
+
+    return [{ value: "", label: "선택" }, ...mapped];
+  }, [sido, selectSigunData]);
+
+  const formatBusinessNumber = (value: string) => {
+    const digitsOnly = value.replace(/\D/g, "").slice(0, 10);
+    if (digitsOnly.length <= 3) return digitsOnly;
+    if (digitsOnly.length <= 5) {
+      return `${digitsOnly.slice(0, 3)}-${digitsOnly.slice(3)}`;
+    }
+    return `${digitsOnly.slice(0, 3)}-${digitsOnly.slice(3, 5)}-${digitsOnly.slice(5)}`;
+  };
+
+  const checkDuplicate = async (fullDmdInfoId: string) => {
+    try {
+      const res = await getFetch(fetchType.WR, `/reuseFc/request/${fullDmdInfoId}`);
+      const responseData = (res?.data ?? res) as { dmdInfoId?: string } | undefined;
+      return Boolean(responseData?.dmdInfoId);
+    } catch {
+      return false;
+    }
+  };
+
+  const checkCurrentPassword = async () => {
+    const bizDigits = bizNo.replace(/\D/g, "").slice(0, 10);
+    const workerDigits = workerNo.replace(/\D/g, "").slice(0, 4);
+    const password = currentPw.trim();
+
+    if (!bizDigits) return alert("사업자등록번호를 입력해 주세요.");
+    if (!/^\d{10}$/.test(bizDigits)) {
+      return alert("사업자등록번호는 10자리 숫자만 입력 가능합니다.");
+    }
+    if (!noWorkerNo) {
+      if (!workerDigits) return alert("종사업자등록번호를 입력해 주세요.");
+      if (!/^\d{4}$/.test(workerDigits)) {
+        return alert("종사업자등록번호는 4자리 숫자만 입력 가능합니다.");
+      }
+    }
+    if (!password) return alert("기존 비밀번호를 입력해 주세요.");
+
+    const fullDmdInfoId = bizDigits + (noWorkerNo ? "0000" : workerDigits);
+    const payload = {
+      dmdInfoId: fullDmdInfoId,
+      dmdAplyPswd: password,
+    };
+
+    try {
+      setIsCheckingCurrentPw(true);
+      const response = await postFetch("/reuseFc/request/checkPassword", payload);
+      const rawResult = await response.json().catch(() => null);
+      const checkedCount =
+        typeof rawResult === "number"
+          ? rawResult
+          : typeof rawResult?.data === "number"
+            ? rawResult.data
+            : Number(rawResult ?? 0);
+
+      if (checkedCount >= 1) {
+        setIsCurrentPwVerified(true);
+        alert("기존 비밀번호가 확인되었습니다.");
+        return;
+      }
+
+      setIsCurrentPwVerified(false);
+      alert("기존 비밀번호가 일치하지 않습니다.");
+    } catch (error) {
+      setIsCurrentPwVerified(false);
+      console.error("Failed to check current password", error);
+      alert("기존 비밀번호 확인에 실패하였습니다.");
+    } finally {
+      setIsCheckingCurrentPw(false);
+    }
+  };
+
+  const onSubmit = async () => {
+    const bizDigits = bizNo.replace(/\D/g, "").slice(0, 10);
+    const workerDigits = workerNo.replace(/\D/g, "").slice(0, 4);
+    const telDigits = tel.replace(/\D/g, "");
+    const password = pw.trim();
+    const passwordConfirm = pw2.trim();
+
+    if (!sido || sido === "0") return alert("시도/시군구를 선택해 주세요.");
+    if (!sigungu || sigungu === "0") return alert("시도/시군구를 선택해 주세요.");
+    if (!company.trim()) return alert("회사명을 입력해 주세요.");
+    if (company.trim().length > 20) return alert("회사명은 20자 이내로 입력해주세요.");
+
+    if (!bizDigits) return alert("사업자등록번호를 입력해 주세요.");
+    if (!/^\d{10}$/.test(bizDigits)) {
+      return alert("사업자등록번호는 10자리 숫자만 입력 가능합니다.");
+    }
+
+    if (!noWorkerNo) {
+      if (!workerDigits) return alert("종사업자등록번호를 입력해 주세요.");
+      if (!/^\d{4}$/.test(workerDigits)) {
+        return alert("종사업자등록번호는 4자리 숫자만 입력 가능합니다.");
+      }
+    }
+
+    const baseAddress = addr1.trim();
+    const detailAddress = addr2.trim();
+    if (!baseAddress && !detailAddress) return alert("사업자주소를 입력해 주세요.");
+    if (baseAddress.length > 40) return alert("주소는 40자 이내로 입력해주세요.");
+    if (detailAddress.length > 40) return alert("상세 주소는 40자 이내로 입력해주세요.");
+
+    if (!telDigits) return alert("전화번호를 입력해 주세요.");
+    if (!/^\d{8,11}$/.test(telDigits)) {
+      return alert("전화번호는 8~11자리 숫자만 입력 가능합니다.");
+    }
+
+    if (!editMode) {
+      if (!password) return alert("비밀번호를 입력해 주세요.");
+      if (password.length < 8 || password.length > 16) {
+        return alert("비밀번호는 8자 이상 16자 이내로 입력해주세요.");
+      }
+      if (!passwordConfirm) return alert("비밀번호 확인을 입력해 주세요.");
+      if (password !== passwordConfirm) return alert("비밀번호가 일치하지 않습니다.");
+    } else { //수정
+      if (password || passwordConfirm) {
+        if (!password) return alert("비밀번호를 입력해 주세요.");
+        if (password.length < 8 || password.length > 16) {
+          return alert("비밀번호는 8자 이상 16자 이내로 입력해주세요.");
+        }
+        if (!passwordConfirm) return alert("비밀번호 확인을 입력해 주세요.");
+        if (password !== passwordConfirm) return alert("비밀번호가 일치하지 않습니다.");
+      }      
+    }
+
+    const fullDmdInfoId = bizDigits + (noWorkerNo ? "0000" : workerDigits);
+
+    if (!editMode) {
+      const isDuplicate = await checkDuplicate(fullDmdInfoId);
+      if (isDuplicate) return alert("이미 등록된 사업자등록번호입니다.");
+    } else if (!isCurrentPwVerified) {
+      return alert("기존 비밀번호 확인 후 수정해 주세요.");
+    }
+
+    const myUUID = getCookie(TOKEN_ID_COOKIE) || FALLBACK_UUID;
+
+    const payload: Record<string, unknown> = {
+      ctpvCd: sido,
+      sggCd: sigungu,
+      dmdCoNm: company.trim(),
+      dmdInfoId: fullDmdInfoId,
+      bzmnNo: bizDigits,
+      zip: zip.trim(),
+      daddr: baseAddress,
+      daddr2: detailAddress,
+      telno: telDigits,
+      rgtr: (sessionUser?.rgtr as string) || myUUID,
+    };
+
+    if (password) {
+      payload.dmdAplyPswd = password;
+    }
+
+    try {
+      if (editMode) {
+        payload.mdfr = myUUID;
+        await putFetch("/reuseFc/request", payload);
+
+        if (typeof window !== "undefined") {
+          const nextSessionUser = {
+            ...(sessionUser ?? {}),
+            ...payload,
+          };
+          delete nextSessionUser.dmdAplyPswd;
+          sessionStorage.setItem("user", JSON.stringify(nextSessionUser));
+        }
+
+        alert("수요처 수정 완료!");
+      } else {
+        await postFetch("/reuseFc/request", payload);
+
+        if (typeof window !== "undefined") {
+          const nextSessionUser = {
+            ...(sessionUser ?? {}),
+            ...payload,
+          };
+          delete nextSessionUser.dmdAplyPswd;
+          sessionStorage.setItem("user", JSON.stringify(nextSessionUser));
+        }
+
+        alert("수요처 등록 완료!");
+        router.push("/apply/dmdinfo"); // 수요정보등록
+      }
+
+      setPw("");
+      setPw2("");
+      setCurrentPw("");
+      setIsCurrentPwVerified(false);
+    } catch (error) {
+      console.error("Failed to submit demand place", error);
+      alert(editMode ? "수요처 수정에 실패하였습니다." : "수요처 등록에 실패하였습니다.");
+    }
+  };
+
+  const handleSelectAddress = (item: AddrItem) => {
+    setZip(item.zipNo);
+    setAddr1(item.roadAddr);
+    setFocusDetailAddrOnClose(true);
+    const matchedSido = selectSidoData.find(
+      (region) =>
+        region.val !== "0" &&
+        isSameRegionName(region.text ?? "", item.ctpvNm ?? ""),
+    );
+
+    if (matchedSido) {
+      setSido(matchedSido.val);
+      const matchedSigungu = selectSigunData.find(
+        (region) =>
+          region.val !== "0" &&
+          region.val.startsWith(matchedSido.val) &&
+          isSameRegionName(region.text ?? "", item.sggNm ?? ""),
+      );
+      setSigungu(matchedSigungu?.val ?? "");
+    }
+
+    setIsPostcodeModalOpen(false);
+  };
+
+  const pageTitle = editMode ? "수요처수정" : "수요처등록";
+
+  return (
+    <main className="min-w-0 flex-1">
+        <div className="relative">
+            {/* 서브 타이틀 + 브레드크럼 */}
+            <SubPageHeader
+                title={pageTitle}
+                crumbs={[
+                { label: "Home", href: "/main" },
+                { label: "수요신청", href: "/apply/dmdco" },
+                { label: pageTitle },
+                ]}
+            />
+
+            {/* 컨텐츠 영역 */}
+            <div className="max-w-[1320px] pb-24">
+                {/* 타이틀 */}
+                <div className="inline-block">
+                    <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+                    <span className="relative z-10">{pageTitle}</span>
+                    <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+                    </h2>
+                </div>
+                
+                {/* 구분선 */}
+                <Hr className="mt-[40px]" />
+
+                {/* 필수값 안내 */}
+                <p className="my-4 text-[16px] text-neutral-600 font-medium">
+                    <span className="text-red-500">*</span> 는 필수 값입니다.
+                </p>
+
+                <div className="border border-neutral-200 bg-white">
+                    <FormRow label="시도" required>
+                    <SelectBox
+                        value={sido}
+                        onChange={(v) => {
+                        setSido(v);
+                        setSigungu("");
+                        }}
+                        options={sidoOptions}
+                    />
+                    </FormRow>
+
+                    <Divider />
+
+                    <FormRow label="시군구" required>
+                    <select
+                        value={sigungu}
+                        onChange={(e) => setSigungu(e.target.value)}
+                        className="h-11 w-[220px] rounded border border-neutral-300 bg-white px-3 text-sm text-neutral-800 focus:border-neutral-400 focus:outline-none"
+                    >
+                        {sigunguOptions.map((o) => (
+                        <option key={o.value} value={o.value}>
+                            {o.label}
+                        </option>
+                        ))}
+                    </select>
+                    </FormRow>
+
+                    <Divider />
+
+                    <FormRow label="회사명" required>
+                    <div className="max-w-[420px]">
+                        <TextInput
+                        value={company}
+                        onChange={setCompany}
+                        placeholder="회사명을 입력해주세요."
+                        />
+                    </div>
+                    </FormRow>
+
+                    <Divider />
+
+                    <FormRow label="사업자등록번호" required>
+                    <div className="max-w-[420px]">
+                        <TextInput
+                        value={formatBusinessNumber(bizNo)}
+                        onChange={(v) => setBizNo(v.replace(/\D/g, "").slice(0, 10))}
+                        placeholder="사업자 등록번호를 입력해주세요."
+                        />
+                    </div>
+                    </FormRow>
+
+                    <Divider />
+
+                    <FormRow label="종사자등록번호">
+                    <div className="flex flex-wrap items-center gap-4">
+                        <div className="w-[420px] max-w-full">
+                        <TextInput
+                            value={workerNo}
+                            onChange={(v) => setWorkerNo(v.replace(/\D/g, "").slice(0, 4))}
+                            placeholder="종사자등록번호를 입력해주세요."
+                            disabled={noWorkerNo}
+                        />
+                        </div>
+
+                        <label className="flex items-center gap-2 text-sm text-neutral-700">
+                        <input
+                            type="checkbox"
+                            checked={noWorkerNo}
+                            onChange={(e) => {
+                            setNoWorkerNo(e.target.checked);
+                            if (e.target.checked) setWorkerNo("");
+                            }}
+                            className="h-4 w-4 rounded border-neutral-300"
+                        />
+                        해당없음
+                        </label>
+                    </div>
+                    </FormRow>
+
+                    <Divider />
+
+                    <FormRow label="사업자주소" required>
+                    <div className="max-w-[420px] space-y-2">
+                        <div className="flex gap-2">
+                        <div className="w-[180px]">
+                            <TextInput value={zip} onChange={setZip} placeholder="우편번호" />
+                        </div>
+                        <button
+                            type="button"
+                            onClick={() => setIsPostcodeModalOpen(true)}
+                            className="h-11 rounded bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
+                        >
+                            우편번호 검색
+                        </button>
+                        </div>
+
+                        <TextInput value={addr1} onChange={setAddr1} placeholder="주소" />
+                        <TextInput
+                        value={addr2}
+                        onChange={setAddr2}
+                        placeholder="상세 주소를 입력하세요."
+                        inputRef={detailAddrRef}
+                        />
+                    </div>
+                    </FormRow>
+
+                    <Divider />
+
+                    <FormRow label="전화번호" required>
+                    <div className="max-w-[420px]">
+                        <TextInput
+                        value={tel}
+                        onChange={(v) => setTel(formatKoreanPhoneNumber(v))}
+                        placeholder="전화번호를 입력하세요."
+                        />
+                    </div>
+                    </FormRow>
+
+                    <Divider />
+
+                    {editMode ? (
+                      <>
+                        <FormRow label="기존 비밀번호 확인" required>
+                        <div className="max-w-[520px]">
+                            <div className="flex gap-2">
+                              <div className="flex-1">
+                                <TextInput
+                                value={currentPw}
+                                onChange={(value) => {
+                                  setCurrentPw(value);
+                                  setIsCurrentPwVerified(false);
+                                }}
+                                placeholder="기존 비밀번호를 입력하세요."
+                                type="password"
+                                />
+                              </div>
+                              <button
+                                type="button"
+                                onClick={checkCurrentPassword}
+                                disabled={isCheckingCurrentPw}
+                                className="h-11 shrink-0 rounded bg-[#0B4EA2] px-4 text-base text-white hover:opacity-90 disabled:bg-neutral-400"
+                              >
+                                {isCheckingCurrentPw ? "확인 중..." : "확인"}
+                              </button>
+                            </div>
+                            <p className={`mt-2 text-sm ${isCurrentPwVerified ? "text-emerald-600" : "text-neutral-500"}`}>
+                              {isCurrentPwVerified ? "기존 비밀번호 확인이 완료되었습니다." : "수정 전 기존 비밀번호 확인이 필요합니다."}
+                            </p>
+                        </div>
+                        </FormRow>
+
+                        <Divider />
+                      </>
+                    ) : null}
+
+                    <FormRow label="비밀번호" required={!editMode}>
+                    <div className="max-w-[420px]">
+                        <TextInput
+                        value={pw}
+                        onChange={setPw}
+                        placeholder="비밀번호를 입력하세요."
+                        type="password"
+                        />
+                    </div>
+                    </FormRow>
+
+                    <Divider />
+
+                    <FormRow label="비밀번호 확인" required={!editMode}>
+                    <div className="max-w-[420px]">
+                        <TextInput
+                        value={pw2}
+                        onChange={setPw2}
+                        placeholder="비밀번호를 한번 더 입력하세요."
+                        type="password"
+                        />
+                    </div>
+                    </FormRow>
+                </div>
+
+                <div className="flex justify-center py-12">
+                    <button
+                    type="button"
+                    onClick={onSubmit}
+                    className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
+                    >
+                    {editMode ? "수요처 수정" : "수요처 등록"}
+                    </button>
+                </div>
+
+                <PostcodeModal
+                    open={isPostcodeModalOpen}
+                    onClose={() => setIsPostcodeModalOpen(false)}
+                    onSelect={handleSelectAddress}
+                />
+            </div>
+        </div>
+    </main>
+  );
+}
diff --git a/apps/dm/app/(with-layout)/apply/dmdinfo/page.tsx b/apps/dm/app/(with-layout)/apply/dmdinfo/page.tsx
new file mode 100644
index 000000000..43e89cc30
--- /dev/null
+++ b/apps/dm/app/(with-layout)/apply/dmdinfo/page.tsx
@@ -0,0 +1,933 @@
+/**
+ *  수요정보등록(수정) 화면
+ *
+ * 🔗 사용 API
+ * - 수요정보등록: POST /reuseFc/request/demandInfo
+ * - 수요정보조회: GET  /reuseFc/request/' + dmdInfoId - getSdmInfoStatusList
+ */
+"use client";
+
+import { useMemo, useState, useRef, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import SubPageHeader from "@/components/SubPageHeader";
+import WaterQualityRefModal from "../modal/WaterQualityRefModal";
+import CandidateSiteModal, { type CandidateSite } from "@/components/CandidateSiteModal";
+import { useDmStore } from "@/app/store";
+import type { SdmInfoFormData } from "@/app/store/sdmMng";
+import SimilarCaseModal, { type SimilarCaseDetail, type SimilarCaseRow } from "@/app/(landing)/reuse/apply/modal/SimilarCaseModal";
+//import type { SubsInfo } from "@/app/store/map/type";
+
+type PHRange = { min: string; max: string };
+
+export default function DemandRegisterPage() {
+  const router = useRouter();
+  const today = useMemo(() => {
+    const d = new Date();
+    const yyyy = d.getFullYear();
+    const mm = String(d.getMonth() + 1).padStart(2, "0");
+    const dd = String(d.getDate()).padStart(2, "0");
+    return `${yyyy}-${mm}-${dd}`;
+  }, []);
+
+  const [openRef, setOpenRef] = useState(false);
+
+  const [openCand, setOpenCand] = useState(false);
+  const [selectedCands, setSelectedCands] = useState<CandidateSite[]>([]);
+
+  // 기본정보
+  const [reqDate, setReqDate] = useState<string>(today);
+  const [reqQty, setReqQty] = useState<string>(""); // 요구수량(㎥/d)
+  const [usePurpose, setUsePurpose] = useState<string>(""); // 사용용도
+  const [hopePrice, setHopePrice] = useState<string>(""); // 희망단가
+
+  // 요구수질
+  const [coliform, setColiform] = useState<string>(""); // 총대장균군수
+  const [noDetect, setNoDetect] = useState<boolean>(false);
+
+  const [tn, setTn] = useState<string>(""); // 총질소(T-N)
+  const [residualCl, setResidualCl] = useState<string>(""); // 결합잔류염소
+  const [tp, setTp] = useState<string>(""); // 총인(T-P)
+  const [turbidity, setTurbidity] = useState<string>(""); // 탁도
+  const [ph, setPh] = useState<PHRange>({ min: "", max: "" }); // 수소이온농도(pH)
+  const [bod, setBod] = useState<string>(""); // 생물학적산소요구량(BOD)
+  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("");
+  //const [candidateList, setCandidateList] = useState<SubsInfo[]>([]);
+
+  const useTypesData = useDmStore((state) => state.Sdm.useTypesData); // 사용용도
+  const getUseTypesData = useDmStore((state) => state.getUseTypesData); // 사용용도 함수
+  const [openSimilar, setOpenSimilar] = useState(false); // 유사사례 modal open
+
+  // 후보지 팝업 메시지 핸들러
+  const candsRef = useRef<{ name: string; code: string }[]>([]);
+
+  useEffect(() => {
+    const origin = window.location.origin;
+
+    const handleMessage = (event: MessageEvent) => {
+      const data = event.data;
+      if (!data || typeof data !== "object") return;
+
+      if (data.type === "SET_SUBS_INFO") {
+        // 팝업에서 배열로 전송 (최대 3개)
+        const list = Array.isArray(data.payload) ? data.payload : [];
+        setCand1(list[0]?.ruseUtztnFcltNm ?? "");
+        setCand2(list[1]?.ruseUtztnFcltNm ?? "");
+        setCand3(list[2]?.ruseUtztnFcltNm ?? "");
+        // 추후 REQUEST_INIT_SUBS_INFO 응답용 ref 갱신
+        candsRef.current = list.map((x: any) => ({
+          name: x.ruseUtztnFcltNm ?? "",
+          code: x.ruseUtztnFcltCd ?? "",
+        }));
+      }
+
+      if (data.type === "REQUEST_INIT_SUBS_INFO") {
+        // 팝업이 현재 선택된 후보지 초기값을 요청하면 응답
+        const initList = candsRef.current
+          .filter((x) => x.name)
+          .map((x) => ({
+            ruseUtztnFcltNm: x.name,
+            ruseUtztnFcltCd: x.code,
+          }));
+        const target = event.source as Window | null;
+        target?.postMessage(
+          { type: "INIT_SUBS_INFO", payload: initList },
+          { targetOrigin: origin }
+        );
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+
+  // 유사사례
+  const similarCaseList = useDmStore((state) => state.Sdm.similarCaseList);
+  const getSimilarCaseList = useDmStore((state) => state.getSimilarCaseList);
+  const [farmText, setFarmText] = useState("이하");
+
+  const insertSdmInfoData = useDmStore( (state) => state.insertSdmInfoData ); // 수요정보등록
+
+  useEffect(() => {
+    getUseTypesData(); // 사용용도 조회
+  }, [getUseTypesData]);
+
+  // 후보지 선택 팝업이 window.postMessage로 넘긴 선택 결과를 받아
+  // 현재 화면의 후보지 입력칸(cand1~3)에 반영한다.
+  useEffect(() => {
+    // message 이벤트의 payload를 읽어 후보지 목록 상태를 갱신하는 핸들러
+    const handler = (event: MessageEvent) => {
+      if (!event.data) return;
+
+      if (event.data.type === "SET_SUBS_INFO") {
+        const list = event.data.payload || [];
+
+        // 최대 3개
+        setCand1(list[0]?.ruseUtztnFcltNm || "");
+        setCand2(list[1]?.ruseUtztnFcltNm || "");
+        setCand3(list[2]?.ruseUtztnFcltNm || "");
+        //setCandidateList(list);
+      }
+    };
+
+    window.addEventListener("message", handler);
+
+    return () => {
+      window.removeEventListener("message", handler);
+    };
+  }, []);
+
+  // option
+  // 'req':필수 / 'num' : 숫자 / 'num+[숫자] : 자릿수 
+  const validation = (val, text, option: string[] = []) => {
+    if (option.includes('req')) {
+      if (val.trim() === "" || val === undefined) {
+        alert(`${text} 항목은 필수 입력값입니다.`);
+        return false;
+      }
+    } else {
+      if (val.trim() === "") {
+        return true;
+      }
+    }
+
+    const numOption = option.find((opt) => opt.startsWith("num"));
+    if (numOption) {
+      const isDot = numOption.includes("Dot");
+
+      // 3. 숫자 체크
+      const regex = isDot ? /^\d+(\.\d+)?$/ : /^\d+$/;
+
+      if (!regex.test(val)) {
+        alert(
+          `${text}은(는) ${isDot ? "숫자 또는 소수" : "숫자"
+          }만 입력 가능합니다.`
+        );
+        return false;
+      }
+
+      // 4. 자리수 체크
+      const lengthStr = numOption.replace("numDot", "").replace("num", "");
+
+      if (lengthStr) {
+        const length = Number(lengthStr);
+
+        if (isDot) {
+          // 🔥 소수 자리수 체크 (소수점 기준)
+          const decimalPart = val.split(".")[1];
+
+          if (decimalPart && decimalPart.length > length) {
+            alert(`${text}은(는) 소수점 ${length}자리까지 가능합니다.`);
+            return false;
+          }
+        } else {
+          // 정수 자리수 체크
+          if (val.length !== length) {
+            alert(`${text}은(는) ${length}자리여야 합니다.`);
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  }
+
+  // 유사사례
+  const rows: SimilarCaseRow[] = similarCaseList.map((el, idx) => ({
+    caseId: String(idx),
+    projectName: el.ruseBizNm, // 사업명
+    period: `${el.bizBgngDate} ~ ${el.bizEndDate}`, // 사업기간
+
+    supplyFacilityType: el.splyFcltKnd, // 시설종류
+    supplyName: el.splyFcltNm,          // 공급처명
+    supplyCapacity: Number(el.splyFcltCpct), // 공급처 시설용량
+
+    demandName: el.dmdFcltNm,           // 수요처명
+    demandAddress: el.dmdFcltAddr,      // 수요처 주소
+
+    facilityCapacity: Number(el.ruseFcltCpct), // 재이용시설 시설용량
+    pipeKm: Number(el.ruseFcltPplLen),         // 재이용시설 관로길이
+    purpose: el.ruseFcltUsg,                   // 재이용시설 용도  
+
+    supplyAmt: Number(el.ruseFcltSplyCpct),    // 재이용시설 공급(용)량
+    treatment: el.ruseFcltPrcsMsrc,            // 재이용시설 처리공법
+    usePurpose: el.ruseFcltUsg,                // 재이용시설 용도   
+  }));
+
+  const detailsByCaseId: Record<string, SimilarCaseDetail> = {};
+  similarCaseList.forEach((el, idx) => {
+    detailsByCaseId[String(idx)] = {
+      coliform: el.grnteWqGrssClfg,
+      residualCl: el.grnteWqCombResdch,
+      turbidity: el.grnteWqTrbt,
+      bod: el.grnteWqBod,
+      odor: el.grnteWqSmll,
+      color: el.grnteWqCrmty,
+      tn: el.grnteWqTn,
+      tp: el.grnteWqTp,
+      ph: el.grnteWqPh,
+      chloride: el.grnteWqClIonQnt,
+      ec: el.grnteWqCndctStat,
+      note: el.grnteWqRmrk,
+
+      costTotal: Number(el.reqBizGrssCst),
+      costFacility: Number(el.reqBizReuseFcltCst),
+      costPipe: Number(el.reqBizPplCst),
+      costDesign: Number(el.reqBizDesignCst),
+      costSupervision: Number(el.reqBizSpvsCst),
+      costOther: Number(el.reqBizEtc),
+
+      fundingTotal: Number(el.prcmPlanGrssCst),
+      fundingNational: Number(el.prcmPlanNlep),
+      fundingLocal: Number(el.prcmPlanLcep),
+      fundingSelf: Number(el.prcmPlanBrdnCst),
+      fundingRate: Number(el.prcmPlanEcqrRt),
+    };
+  });
+
+  // 데이터 저장
+  const saveInfo = async () => {
+    if (!validation(reqQty, '요구수량', ['req', 'numDot'])) return false;
+    if (!validation(usePurpose, '사용용도', ['req'])) return false;
+    if (!validation(hopePrice, '희망단가', ['req', 'numDot'])) return false;
+    /*  if(!noDetect && !validation(coliform, '총대장균군수', ['req','numDot'])) return false;
+     if(!validation(residualCl, ['req', '결합잔류염소', 'numDot'])) return false;
+     if(!validation(turbidity, '탁도', ['req', 'numDot'])) return false;
+     if(!validation(bod, '생물화학적산소요구량', ['req', 'numDot'])) return false;
+     if(!validation(odor, '냄새', ['req'])) return false; */
+
+    // 필수는 아니지만 숫자로는 들어와야함.
+    /*   if(!validation(tn, '총질소', ['numDot'])) return false;
+      if(!validation(residualCl, '결합잔류염소', ['numDot'])) return false;
+      if(!validation(tp, '총인', ['numDot'])) return false;
+      if(!validation(ph.min, 'ph', ['numDot'])) return false;
+      if(!validation(ph.max, 'ph', ['numDot'])) return false;
+      if(!validation(chloride, '염화물', ['numDot'])) return false;
+      if(!validation(ec, '전기전도도', ['numDot'])) return false; */
+
+    const userStr = sessionStorage.getItem("user");
+    const user = userStr ? JSON.parse(userStr) : null;
+
+    if (user) {
+      // 후보지 목록 (candsRef에 코드까지 보관됨)
+      const splyCndtList = candsRef.current
+        .filter((x) => x.name)
+        .map((x) => ({
+          ruseUtztnFcltNm: x.name,
+          ruseUtztnFcltCd: x.code,
+        }));
+
+      const payload: SdmInfoFormData = {
+        dmndTmng: new Date(reqDate),
+        dmdInfoId: user.dmdInfoId,
+        dmndQty: Number(reqQty),
+        wntUntprc: Number(hopePrice),
+        useUsgCd: usePurpose,
+        // 수질
+        grssClfg: Number(coliform),
+        tn: Number(tn) || null,
+        combResdch: Number(residualCl) || null,
+        tph: Number(tp) || null,
+        trbt: Number(turbidity),
+        ph: ph.min || '' + ((ph.min || ph.max) ? '~' : '') + ph.max || '',
+        blgcOxygDmndQnt: Number(bod),
+        clIonQnt: Number(chloride) || null,
+        smll: odor,
+        cdtnv: Number(ec) || null,
+        crmty: Number(color) || null,
+        rmrk: remark,
+        splyCndtList, // 후보지 목록 추가
+      }
+      const success = await insertSdmInfoData(payload);
+      if (success) {
+        router.push("/apply/status");
+      }
+    }
+  }
+
+  // 후보지 조회 팝업 Open
+  const searchCandidate = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const dmdInfoId = JSON.parse(
+      sessionStorage.getItem("user") || "{}"
+    )?.dmdInfoId?.toString();
+
+    const url = `/map/popup?dmdInfoId=${encodeURIComponent(dmdInfoId)}`;
+    const width = window.screen.availWidth;
+    const height = window.screen.availHeight;
+    const left = 0;
+    const top = 0;
+    const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
+    window.open(url, "candidatePopup", popupOptions);
+  };
+
+  // 유사기준
+  const getCriterionCode = (criterion: string) => {
+    switch (criterion) {
+      case "supplyAmt":    return "S"; // 공급량
+      case "money":        return "M"; // 단가?
+      case "usePurpose":   return "U"; // 이용용도
+      default:             return "";
+    }
+  };
+
+  // 유사사례 Modal Open
+  const searchSimilarCase = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOpenSimilar(true);
+  };
+
+  // 수요정보 입력란 초기화
+  const initQualityForm = () => {
+    setColiform("");
+    setNoDetect(false); // 총대장균군수 불검출
+    setTn("");
+    setResidualCl("");
+    setTp("");
+    setTurbidity("");
+    setPh({ min: "", max: "" });
+    setBod("");
+    setChloride("");
+    setOdor("불쾌하지 않을 것");
+    setEc("");
+    setColor("");
+    setRemark("");
+    setFarmText("이하");
+  }
+
+  // 사용용도별 초기화
+  const fncSetOptionValue = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value;
+    initQualityForm();
+
+    switch (value) {
+      // 청소화장실용도
+      case '01':
+        setNoDetect(true); // 총대장균군수 불검출
+        setResidualCl('0.2'); // 잔류염소
+        setTurbidity('2');
+        setPh({ min: '5.8', max: '8.5' });
+        setBod('5');
+        setColor('20');
+        break;
+      // 세척살수용도  
+      case '02':
+        setColiform('1000');
+        setTurbidity('2'); // 탁도
+        setPh({ min: '5.8', max: '8.5' });
+        setBod('5');
+        break;
+      // 조경용도
+      case '03':
+        setColiform('1000');
+        setTurbidity('2');
+        setPh({ min: '5.8', max: '8.5' });
+        setBod('5');
+        setChloride('250'); // 염화물
+        break;
+      // 친수용도
+      case '04':
+        setNoDetect(true); // 총대장균군수 불검출
+        setResidualCl('0.1'); // 잔류염소
+        setTurbidity('2');
+        setBod('3');
+        setColor('10');
+        setTn('10'); // 총질소
+        setTp('0.5'); // 총인
+        setPh({ min: '5.8', max: '8.5' });
+        setChloride('0.5');
+        break;
+      // 지하수충전
+      case '05':
+        break;
+      // 농업용수
+      case '06':
+        setTurbidity('5');
+        setPh({ min: '5.8', max: '8.5' });
+        setBod('8');
+        setEc('2000');
+        setFarmText("이하 (** 간접:2000,직접:700 )");
+        break;
+      // 하천 등 유지용수
+      case '07':
+        setColiform('1000');
+        setBod('5');
+        setTn('20');
+        setTp('0.5');
+        setPh({ min: '5.8', max: '8.5' });
+        setChloride('0.5');
+        break;
+      // 공업용수
+      case '08':
+        setBod('20');
+        setPh({ min: '5.8', max: '8.5' });
+        break;
+      default:
+        console.log('잘못된 선택입니다.');
+    }
+
+    setUsePurpose(value);
+  }
+
+  const pageTitle = "수요정보등록";
+
+  return (
+    <>
+
+      <main className="min-w-0 flex-1">
+        <div className="relative">
+            {/* 서브 타이틀 + 브레드크럼 */}
+            <SubPageHeader
+                title={pageTitle}
+                crumbs={[
+                { label: "Home", href: "/main" },
+                { label: "수요신청", href: "/apply/dmdco" },
+                { label: pageTitle },
+                ]}
+            />
+
+            {/* 컨텐츠 영역 */}
+            <div className="max-w-[1320px] pb-24">
+                {/* 타이틀 */}
+                <div className="inline-block">
+                    <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+                    <span className="relative z-10">{pageTitle}</span>
+                    <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+                    </h2>
+                </div>
+                
+                {/* 구분선 */}
+                <Hr className="mt-[40px]" />
+
+                {/* 필수값 안내 */}
+                <p className="my-4 text-[16px] text-neutral-600 font-medium">
+                    <span className="text-red-500">*</span> 는 필수 값입니다.
+                </p>
+
+                {/* 기본정보 테이블 */}
+                <div className="border border-neutral-200 bg-white">
+                    <FormRow label="요구시기" required>
+                    <DateInput value={reqDate} onChange={setReqDate} />
+                    </FormRow>
+
+                    <Divider />
+
+                    <FormRow label="요구수량(㎥/d)" required>
+                    <TextInput value={reqQty} onChange={setReqQty} placeholder="" />
+                    </FormRow>
+
+                    <Divider />
+
+                    <FormRow label="사용용도" required>
+                    <select
+                        value={usePurpose}
+                        onChange={(e) => fncSetOptionValue(e)}
+                        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 value="">선택하세요</option>
+                        {useTypesData.map((item) => (
+                        <option key={item.val} value={item.val}>
+                            {item.text}
+                        </option>
+                        ))}
+                    </select>
+                    </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-2 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="총대장균군수(개/100㎖)"
+
+                    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={farmText} />}
+                    />
+                    <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>
+                      <span className="flex flex-col items-center leading-6">
+                        <span>공급처 후보지 선택</span>
+                        <span className="text-sm">(필수아님)</span>
+                      </span>
+                    </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={(e) => {
+                                searchCandidate(e);
+
+                                //splyList => 해당객체가 대민에서 선택한 후보처 리스트
+                                //setLastSub => 해당 스테이트가 선택한 마지막 후보처를 넣어야하는 스테이트
+                            }}
+                          >
+                            후보지 조회
+                          </button>
+
+                          <button
+                            type="button"
+                            className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-600"
+                            onClick={(e) => searchSimilarCase(e)}
+                          >
+                            유사사례
+                          </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: 저장 처리
+                        saveInfo();
+                    }}
+                    >
+                    수요정보 등록
+                    </button>
+                </div>
+            </div>
+        </div>
+      </main>
+
+      <SimilarCaseModal
+        open={openSimilar}
+        onClose={() => setOpenSimilar(false)}
+        rows={rows} // 실제 데이터
+        detailsByCaseId={detailsByCaseId}
+        onSearch={async (criterion) => {
+          const code = getCriterionCode(criterion); // 'S' 공급량, 'U' 사용용도
+          if (!code) return;
+          // 값은 상황에 맞게 (예시: usePurpose)
+          console.log(code+' req: '+reqQty+' purpose :'+usePurpose);
+          await getSimilarCaseList(code, code == 'S' ? reqQty : code == 'U' ? usePurpose : '');
+        }}
+      />
+
+      <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);
+        }}
+      />
+    </>
+  );
+}
+
+/* ----------------------------- UI helpers ----------------------------- */
+
+function Divider() {
+  return <div className="h-px w-full bg-neutral-200" />;
+}
+
+function LabelCell({
+  children,
+  required,
+}: {
+  children: React.ReactNode;
+  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">
+      <span className="inline-flex items-center gap-1">
+        {children}
+        {required ? <span className="text-red-500">*</span> : null}
+      </span>
+    </div>
+  );
+}
+
+function FormRow({
+  label,
+  required,
+  children,
+}: {
+  label: string;
+  required?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="grid grid-cols-12">
+      <LabelCell required={required}>{label}</LabelCell>
+      <div className="col-span-12 md:col-span-10 p-6">{children}</div>
+    </div>
+  );
+}
+
+function QualityRow({
+  leftLabel,
+  leftRequired,
+  leftControl,
+  rightLabel,
+  rightControl,
+}: {
+  leftLabel: React.ReactNode;
+  leftRequired?: boolean;
+  leftControl: React.ReactNode;
+  rightLabel: React.ReactNode;
+  rightControl: React.ReactNode;
+}) {
+  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">
+        <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">
+        <span className="leading-6">{rightLabel}</span>
+      </div>
+
+      {/* 우측 입력 */}
+      <div className="col-span-12 lg:col-span-4 p-6">{rightControl}</div>
+    </div>
+  );
+}
+
+function TextInput({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  className,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}) {
+  return (
+    <input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      disabled={disabled}
+      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",
+        disabled ? "cursor-not-allowed" : "",
+        className ?? "",
+      ].join(" ")}
+    />
+  );
+}
+
+function InlineSuffixInput({
+  value,
+  onChange,
+  suffix,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  suffix: string;
+}) {
+  return (
+    <div className="flex items-center gap-3">
+      <TextInput value={value} onChange={onChange} className="max-w-[200px]" />
+      <span className="text-sm text-neutral-600">{suffix}</span>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function DateInput({
+  value,
+  onChange,
+}: {
+  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
+        ref={ref}
+        type="date"
+        value={value}
+        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",
+          "[&::-webkit-calendar-picker-indicator]:w-10",
+          "[&::-webkit-calendar-picker-indicator]:h-full",
+          "[&::-webkit-calendar-picker-indicator]:cursor-pointer",
+        ].join(" ")}
+      />
+
+      {/* ✅ 클릭 가능한 아이콘 버튼 */}
+      <button
+        type="button"
+        onClick={openPicker}
+        className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-neutral-500 hover:text-neutral-700"
+        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" />
+        </svg>
+      </button>
+    </div>
+  );
+}
diff --git a/apps/dm_new/app/(with-layout)/apply/layout.tsx b/apps/dm/app/(with-layout)/apply/layout.tsx
similarity index 52%
rename from apps/dm_new/app/(with-layout)/apply/layout.tsx
rename to apps/dm/app/(with-layout)/apply/layout.tsx
index 49c8a6266..90f8c28c9 100644
--- a/apps/dm_new/app/(with-layout)/apply/layout.tsx
+++ b/apps/dm/app/(with-layout)/apply/layout.tsx
@@ -3,9 +3,14 @@ import Lnb from "@/components/Lnb";
 
 export default function ApplyLayout({ children }: { children: ReactNode }) {
   return (
-    <div className="flex gap-0">
+    <div className="relative">
+      {/* 우측 메뉴 */}
       <Lnb />
-      <main className="flex-1 px-[100px] pt-[80px]">{children}</main>
+
+      {/* 본문 */}
+      <div className="flex max-w-[1400px] gap-[56px] py-[50px]">
+        {children}
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/dm_new/app/(with-layout)/apply/modal/WaterQualityRefModal.tsx b/apps/dm/app/(with-layout)/apply/modal/WaterQualityRefModal.tsx
similarity index 100%
rename from apps/dm_new/app/(with-layout)/apply/modal/WaterQualityRefModal.tsx
rename to apps/dm/app/(with-layout)/apply/modal/WaterQualityRefModal.tsx
diff --git a/apps/dm/app/(with-layout)/apply/status/page.tsx b/apps/dm/app/(with-layout)/apply/status/page.tsx
new file mode 100644
index 000000000..40241ee4f
--- /dev/null
+++ b/apps/dm/app/(with-layout)/apply/status/page.tsx
@@ -0,0 +1,806 @@
+/**
+ * 수요신청현황
+ */
+"use client";
+
+import { useDmStore } from "@/app/store";
+import type { DemandCompBizType } from "@/app/store/sdmMng";
+import SubPageHeader from "@/components/SubPageHeader";
+import UiPageNations from "@common/business_components/ui/table/uiPageNations";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+type TopField = { label: string; key: string, value: string; required?: boolean };
+type PairField = { label: string; key: string, value: string };
+type SessionUser = { dmdInfoId?: string };
+
+const PAGE_SIZE = 10;
+
+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 formatNumberWithComma = (value: string | number | null | undefined) => {
+  if (value === null || value === undefined || value === "") return "-";
+
+  const normalized =
+    typeof value === "string" ? Number(value.replace(/,/g, "")) : Number(value);
+
+  if (Number.isNaN(normalized)) {
+    return String(value);
+  }
+
+  return normalized.toLocaleString("ko-KR");
+};
+
+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>;
+}
+
+function TextInput({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  className,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}) {
+  return (
+    <input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      disabled={disabled}
+      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",
+        disabled ? "cursor-not-allowed" : "",
+        className ?? "",
+      ].join(" ")}
+    />
+  );
+}
+
+function DateInput({
+  value,
+  onChange,
+}: {
+  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
+        ref={ref}
+        type="date"
+        value={value}
+        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",
+          "[&::-webkit-calendar-picker-indicator]:w-10",
+          "[&::-webkit-calendar-picker-indicator]:h-full",
+          "[&::-webkit-calendar-picker-indicator]:cursor-pointer",
+        ].join(" ")}
+      />
+
+      {/* ✅ 클릭 가능한 아이콘 버튼 */}
+      <button
+        type="button"
+        onClick={openPicker}
+        className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-neutral-500 hover:text-neutral-700"
+        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" />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+export default function DemandStatusPage() {
+  const { getSdmInfoStatusList, updateSdmInfoData, Sdm, Common, initializeCommonData } = useDmStore((state) => state);
+  const { successLogin, sdmInfoStatusList } = Sdm;
+  const { selectSidoData, selectSigunData } = Common;
+
+  const detailRef = useRef<HTMLDivElement | null>(null);
+
+  const [isLoginStorageInfo, setIsLoginStorageInfo] = useState(false);
+  const [selectedDmdInfoSn, setSelectedDmdInfoSn] = useState<number | "" | null>(null);
+  const [transformedSdmInfoStatusList, setTransformedSdmInfoStatusList] = useState<DemandCompBizType[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // 수정 유무
+  const [ isEditMode, setIsEditMode ] = useState(false);
+  // 수정용 (UI에서 바뀌는 값)
+  const [editData, setEditData] = useState<any>(null);
+  // 원본 백업 (취소용)
+  const [originData, setOriginData] = useState<any>(null);
+  // 사용용도
+  const useTypesData = useDmStore((state) => state.Sdm.useTypesData);
+  const getUseTypesData = useDmStore((state) => state.getUseTypesData);
+
+  useEffect(() => {
+    const user = sessionStorage.getItem("user");
+    if (user) {
+      setIsLoginStorageInfo(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    getUseTypesData(); // 용도코드 조회
+    initializeCommonData(); // 시도, 시군구 조회
+  }, [getUseTypesData, initializeCommonData]);
+
+  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]);
+
+  const pagedSdmInfoStatusList = useMemo(() => {
+    const startIndex = (currentPage - 1) * PAGE_SIZE;
+    return transformedSdmInfoStatusList.slice(startIndex, startIndex + PAGE_SIZE);
+  }, [currentPage, transformedSdmInfoStatusList]);
+
+  useEffect(() => {
+    const totalPages = Math.max(1, Math.ceil(transformedSdmInfoStatusList.length / PAGE_SIZE));
+    if (currentPage > totalPages) {
+      setCurrentPage(totalPages);
+    }
+  }, [currentPage, transformedSdmInfoStatusList.length]);
+
+  const topFields: TopField[] = useMemo(() => {
+    if (!selectedSdmInfoStatus) return [];
+
+    return [
+      { label: "요구시기", key: "dmndTmng", value: formatDate(selectedSdmInfoStatus.dmndTmng), required: true },
+      { label: "요구수량(㎥/d)", key: "dmndQty", value: formatNumberWithComma(selectedSdmInfoStatus.dmndQty) },
+      { label: "사용용도", key: "useUsgCd",  value: formatValue(selectedSdmInfoStatus.useUsgCd) },
+      { label: "희망단가(원/㎥)", key: "wntUntprc", value: formatNumberWithComma(selectedSdmInfoStatus.wntUntprc) },
+    ];
+  }, [selectedSdmInfoStatus]);
+
+  const waterFields: PairField[] = useMemo(() => {
+    if (!selectedSdmInfoStatus) return [];
+
+    return [
+      { label: "총대장균군수(개/100㎖)", key: "grssClfg", value: formatBelow(selectedSdmInfoStatus.grssClfg) },
+      { label: "결합잔류염소(mg/L)", key:"combResdch", value: formatBelow(selectedSdmInfoStatus.combResdch) },
+      { label: "탁도(NTU)", key:"trbt", value: formatBelow(selectedSdmInfoStatus.trbt) },
+
+      { label: "생물학적산소요구량(BOD)(mg/L)", key:"blgcOxygDmndQnt", value: formatBelow(selectedSdmInfoStatus.blgcOxygDmndQnt) },
+      { label: "냄새", key:"smll", value: formatValue(selectedSdmInfoStatus.smll) },
+      { label: "색도(도)", key:"crmty", value: formatBelow(selectedSdmInfoStatus.crmty) },
+
+      { label: "총질소(T-N)(mg/L)", key:"tn", value: formatBelow(selectedSdmInfoStatus.tn) },
+      { label: "총인(T-P)(mg/L)", key:"tph", value: formatBelow(selectedSdmInfoStatus.tph) },
+      { label: "수소이온농도(pH)", key:"ph", value: formatValue(selectedSdmInfoStatus.ph) },
+
+      { label: "염화물(mgCL/L)", key:"clIonQnt", value: formatBelow(selectedSdmInfoStatus.clIonQnt) },
+      { label: "전기전도도(μS/cm)", key:"cdtnv", value: formatBelow(selectedSdmInfoStatus.cdtnv) },
+      { label: "비고", key:"rmrk", value: formatValue(selectedSdmInfoStatus.rmrk) },
+    ];
+  }, [selectedSdmInfoStatus]);
+
+  const candidateNames = useMemo(() => {
+    const list = isEditMode
+    ? editData?.splyCndtList ?? []
+    : selectedSdmInfoStatus?.splyCndtList ?? [];
+    return [
+      list[0]?.ruseUtztnFcltNm ?? "",
+      list[1]?.ruseUtztnFcltNm ?? "",
+      list[2]?.ruseUtztnFcltNm ?? "",
+    ];
+  }, [isEditMode, editData, selectedSdmInfoStatus]);
+
+  const onSelectSdmInfoStatus = (dmdInfoSn: number | "") => {
+    if(isEditMode){
+      if(confirm('저장되지 않은 데이터는 사라집니다.\n진행하시겠습니까?')){
+        setIsEditMode(false);
+      }
+    }
+    setSelectedDmdInfoSn(dmdInfoSn);
+    requestAnimationFrame(() => {
+      if (!detailRef.current) return;
+      const headerOffset = 120;
+      const nextTop =
+        detailRef.current.getBoundingClientRect().top + window.scrollY - headerOffset;
+
+      window.scrollTo({
+        top: nextTop,
+        behavior: "smooth",
+      });
+    });
+  };
+
+  // ph 전후로 나눔
+  const getRange = (val: string) => {
+    const a = val.split('~')[0]||''; const b = val.split('~')[1]||'';
+    return { a, b };
+  };
+
+  const searchCandidate = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const dmdInfoId = JSON.parse(
+      sessionStorage.getItem("user") || "{}"
+    )?.dmdInfoId?.toString();
+
+    const url = `/map/popup?dmdInfoId=${encodeURIComponent(dmdInfoId)}`;
+    const width = window.screen.availWidth;
+    const height = window.screen.availHeight;
+    const left = 0;
+    const top = 0;
+    const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
+    window.open(url, "candidatePopup", popupOptions);
+  };
+
+  const saveInfo = () => {
+    if(confirm('수정된 데이터를 저장하시겠습니까?')){
+      const payload = {
+        ...editData,
+        splyCndtList : editData.splyCndtList ?? []
+      };
+      
+      updateSdmInfoData(payload).then((res) => {
+        if (res) {
+          const user = JSON.parse(sessionStorage.getItem("user") || "{}");
+          if (user?.dmdInfoId) {
+            getSdmInfoStatusList(user.dmdInfoId);
+          }
+          setIsEditMode(false);
+        }
+      });
+    }
+  }
+
+  useEffect(() => {
+    const handler = (event: MessageEvent) => {
+      if (!event.data) return;
+
+      if (event.data.type === "SET_SUBS_INFO") {
+        const list = event.data.payload || [];
+        setEditData((prev) => ({
+          ...prev,
+          splyCndtList: list,
+        }));
+      }
+    };
+
+    window.addEventListener("message", handler);
+
+    return () => {
+      window.removeEventListener("message", handler);
+    };
+  }, []);
+
+  const pageTitle = "수요신청현황";
+
+  return (
+    
+    <main className="min-w-0 flex-1">
+        <div className="relative">
+            {/* 서브 타이틀 + 브레드크럼 */}
+            <SubPageHeader
+                title={pageTitle}
+                crumbs={[
+                { label: "Home", href: "/main" },
+                { label: "수요신청", href: "/apply/dmdco" },
+                { label: pageTitle },
+                ]}
+            />
+
+            {/* 컨텐츠 영역 */}
+            <div className="max-w-[1320px] pb-24">
+                {/* 타이틀 */}
+                <div className="inline-block">
+                    <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+                    <span className="relative z-10">{pageTitle}</span>
+                    <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+                    </h2>
+                </div>
+                
+                <section className="mt-6">
+                    <div className="text-2xl font-bold text-slate-700 text-center w-full">수요정보 신청현황</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-[4%] px-3 py-3 text-center">NO.</th>
+                            <th className="w-[9%] px-3 py-3 text-center">시도</th>
+                            <th className="w-[9%] px-3 py-3 text-center">시군구</th>
+                            <th className="w-[13%] px-3 py-3 text-center">회사명</th>
+                            <th className="px-3 py-3 text-center">주소</th>
+                            <th className="w-[11%] px-3 py-3 text-center">전화번호</th>
+                            <th className="w-[9%] px-3 py-3 text-center">요구시기</th>
+                            <th className="w-[9%] px-3 py-3 text-center">등록일자</th>
+                            <th className="w-[9%] px-3 py-3 text-center">수정일자</th>
+                            <th className="w-[6%] px-3 py-3 text-center">진행상태</th>
+                            </tr>
+                        </thead>
+
+                        <tbody className="bg-white text-base text-slate-700">
+                            {transformedSdmInfoStatusList.length === 0 ? (
+                            <tr>
+                                <td colSpan={10} className="px-3 py-10 text-center text-slate-400">
+                                조회된 신청내역이 없습니다.
+                                </td>
+                            </tr>
+                            ) : (
+                            pagedSdmInfoStatusList.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 || (currentPage - 1) * PAGE_SIZE + 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">{formatDate(sdmInfoStatus.regDt)}</td>
+                                    <td className="px-3 py-3 text-center">{formatDate(sdmInfoStatus.mdfcnDt)}</td>
+                                    <td className="px-3 py-3 text-center">
+                                    <StatusBadge v={formatValue(sdmInfoStatus.status)} />
+                                    </td>
+                                </tr>
+                                );
+                            })
+                            )}
+                        </tbody>
+                        </table>
+                    </div>
+                    {transformedSdmInfoStatusList.length > 0 ? (
+                      <div
+                        className={[
+                          "mt-2 flex justify-center",
+                          "[&_nav]:mt-0 [&_nav]:text-sm",
+                          "[&_ul]:gap-0.5",
+                          "[&_a]:h-8 [&_a]:min-w-8 [&_a]:px-2 [&_a]:py-1 [&_a]:text-sm",
+                          "[&_svg]:h-4 [&_svg]:w-4",
+                          "[&_span]:text-sm",
+                        ].join(" ")}
+                      >
+                        <UiPageNations
+                          total={transformedSdmInfoStatusList.length}
+                          cur={currentPage}
+                          pageSize={PAGE_SIZE}
+                          onPageChange={setCurrentPage}
+                        />
+                      </div>
+                    ) : null}
+                </section>
+
+                <section className="mt-10 pb-16" ref={detailRef}>
+                <div className="flex justify-between items-center">
+                    <div className="text-2xl font-bold text-slate-700">수요신청 상세현황</div>
+                    {
+                        !isEditMode ? (
+                            <button
+                            type="button"
+                            className="h-8 rounded-md bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
+                            onClick={() => {
+                                if (!selectedSdmInfoStatus) return;
+                                if (selectedSdmInfoStatus.status !== "신청") {
+                                  alert("진행상태 '신청'인 경우에만 수정이 가능합니다.");
+                                  return;
+                                }
+                                setOriginData(selectedSdmInfoStatus);
+                                setEditData({...selectedSdmInfoStatus});
+                                setIsEditMode(true)}
+                            }
+                            >
+                            수정
+                            </button>
+                        ) : ( 
+                        <div className="flex gap-2">
+                            <button
+                            type="button"
+                            className="h-8 rounded-md bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
+                            onClick={() => {
+                                saveInfo();
+                            }}
+                            >
+                            저장
+                            </button>
+                            <button
+                            type="button"
+                            className="h-8 rounded-md bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
+                            onClick={() => {
+                                setEditData(originData);
+                                setIsEditMode(false)
+                            }}
+                            >
+                            취소
+                            </button>
+                        </div>
+                        )
+                    }
+                </div>
+
+                {!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>
+                            {
+                            !isEditMode ?
+                                <div className="col-span-8 px-4 py-4 flex items-center justify-center text-center">
+                                {field.key==='useUsgCd'? useTypesData.filter(item=>item.val===field.value)[0]?.text: field.value}
+                                </div>
+                            : <div className="col-span-8 px-4 py-4 flex items-center justify-center text-center">
+                                {field.key ==='dmndTmng'?
+                                <DateInput value={editData?.[field.key] ?? ""} onChange={(v) =>
+                                    setEditData((prev) => ({
+                                        ...prev,
+                                        [field.key]: v,
+                                    }))
+                                    } />
+                                : field.key ==='useUsgCd'?
+                                <select
+                                    value={editData?.[field.key] ?? ""}
+                                    onChange={(e) =>
+                                    setEditData((prev) => ({
+                                        ...prev,
+                                        [field.key]: 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 value="">선택하세요</option>
+                                    {useTypesData.map((item) => (
+                                        <option key={item.val} value={item.val}>
+                                        {item.text}
+                                        </option>
+                                    ))}
+                                </select>
+
+                                : <TextInput value={editData?.[field.key] ?? ""} onChange={(v) =>
+                                    setEditData((prev) => ({
+                                        ...prev,
+                                        [field.key]: v,
+                                    }))
+                                    }></TextInput> 
+                                }
+                                </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((field) => {
+                        const { a, b } = editData?.ph ? getRange(editData.ph) : { a: "", b: "" };
+                        return (
+                        <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">
+                            {
+                                !isEditMode ? field.value 
+                                :
+                                field.key === "grssClfg" ? (
+                                    <div className="flex items-center gap-4">
+                                    <TextInput
+                                        value={
+                                        editData?.grssClfg === -1
+                                            ? ""
+                                            : editData?.grssClfg ?? ""
+                                        }
+                                        onChange={(v) =>
+                                        setEditData((prev) => ({
+                                            ...prev,
+                                            grssClfg: v,
+                                        }))
+                                        }
+                                        disabled={editData?.grssClfg === -1}
+                                        className={
+                                        editData?.grssClfg === -1
+                                            ? "bg-neutral-100 text-neutral-400"
+                                            : ""
+                                        }
+                                    />
+                                    <label className="flex items-center gap-2 w-3/4 text-sm text-neutral-700">
+                                        <input
+                                        type="checkbox"
+                                        checked={editData?.grssClfg === -1}
+                                        onChange={(e) => {
+                                            const checked = e.target.checked;
+
+                                            setEditData((prev) => ({
+                                            ...prev,
+                                            grssClfg: checked ? -1 : "",
+                                            }));
+                                        }}
+                                        className="h-4 w-4 rounded border-neutral-300"
+                                        />
+                                        불검출
+                                    </label>
+                                    </div>
+                                ) : field.key === 'smll' ? (
+                                    <select
+                                    value={
+                                        editData?.smll === -1
+                                            ? ""
+                                            : editData?.smll ?? ""
+                                        }
+                                    onChange={(v) =>
+                                        setEditData((prev) => ({
+                                            ...prev,
+                                            grssClfg: v,
+                                        }))
+                                        }
+                                    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>
+                                ) : field.key === 'ph' ? (
+                                    <>
+                                    <TextInput
+                                        value={a}
+                                        onChange={(v) =>
+                                        setEditData((prev) => ({
+                                            ...prev,
+                                            [field.key]: `${v}~${b}`,
+                                        }))
+                                        }
+                                    />
+                                    ~
+                                    <TextInput
+                                        value={b}
+                                        onChange={(v) =>
+                                        setEditData((prev) => ({
+                                            ...prev,
+                                            [field.key]: `${a}~${v}`,
+                                        }))
+                                        }
+                                    />
+                                    </>
+                                ) : (
+                                    <>
+                                    <TextInput
+                                        value={editData?.[field.key] ?? ""}
+                                        onChange={(v) =>
+                                        setEditData((prev) => ({
+                                            ...prev,
+                                            [field.key]: v,
+                                        }))
+                                        }
+                                    />
+                                    {
+                                    field.key==='tn'||field.key === 'tph'||field.key === 'trbt'||field.key==='blgcOxygDmndQnt'||field.key==='clIonQnt'||field.key==='cdtnv'|| field.key=='crmty'
+                                    ?<>이하</>:<></>
+                                    }
+                                    </>
+                                )
+                                }
+                            </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">
+                        공급처 후보지
+                        {
+                            isEditMode &&
+                            <button
+                            type="button"
+                            className="h-8 w-25 ml-12 rounded-md bg-[#888] px-2 text-base text-white hover:bg-neutral-700"
+                            onClick={(e) => {
+                                searchCandidate(e);
+
+                                //splyList => 해당객체가 대민에서 선택한 후보처 리스트
+                                //setLastSub => 해당 스테이트가 선택한 마지막 후보처를 넣어야하는 스테이트
+                            }}>
+                            후보지 조회
+                            </button>
+                        }
+
+                        </div>
+
+                        {candidateNames.map((candidateName, index) => (
+                        isEditMode ? (
+                            <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">
+                                <TextInput
+                                value={candidateName}
+                                disabled={true}
+                                onChange={(v) => {
+                                    setEditData((prev) => {
+                                    const newList = [...(prev.splyCndtList || [])];
+                                    newList[index] = {
+                                        ...newList[index],
+                                        ruseUtztnFcltNm: v,
+                                    };
+                                    return {
+                                        ...prev,
+                                        splyCndtList: newList,
+                                    };
+                                    });
+                                }}
+                                />
+                            </div>
+                            </div>
+                        ) :
+                        <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>
+
+                        <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>
+        </div>
+    </main>
+  );
+}
diff --git a/apps/dm/app/(with-layout)/contents/page.tsx b/apps/dm/app/(with-layout)/contents/page.tsx
new file mode 100644
index 000000000..02b97af14
--- /dev/null
+++ b/apps/dm/app/(with-layout)/contents/page.tsx
@@ -0,0 +1,26 @@
+import { revalidateTag } from "next/cache";
+import { Button } from "@common/components/ui/button";
+
+export default async function Contents() {
+  /**
+   * 'dm-content-detail' 태그를 가진 캐시 데이터를 즉시 무효화하는 서버 액션입니다.
+   * 버튼 클릭 시 실행되며, 이후 이 태그를 사용하는 모든 페이지는 최신 데이터를 다시 가져옵니다.
+   */
+  async function revalidateAction() {
+    "use server";
+    revalidateTag("dm-content-detail");
+    console.log("Cache revalidated for tag: dm-content-detail");
+  }
+
+  return (
+    <div className="container mx-auto p-10">
+      <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200 text-center">
+        <h1 className="text-2xl font-bold mb-2">콘텐츠 관리 도구</h1>
+        <p className="text-gray-500 mb-6">변경된 콘텐츠 내용을 즉시 반영하려면 아래 버튼을 클릭하세요.</p>
+        <form action={revalidateAction}>
+          <Button type="submit" className="px-8">캐시 즉시 갱신 (dm-content-detail)</Button>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dm/app/(with-layout)/example/_components/GlobalCaseSection.tsx b/apps/dm/app/(with-layout)/example/_components/GlobalCaseSection.tsx
new file mode 100644
index 000000000..26998ce78
--- /dev/null
+++ b/apps/dm/app/(with-layout)/example/_components/GlobalCaseSection.tsx
@@ -0,0 +1,548 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export default function GlobalCaseSection() {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    const cleanups: Array<() => void> = [];
+    const sliders = Array.from(root.querySelectorAll(".image-slider"));
+
+    sliders.forEach((sliderElement) => {
+      const slider = sliderElement as HTMLElement;
+      const viewport = slider.querySelector(
+        ".image-slider-viewport",
+      ) as HTMLElement | null;
+      const track = slider.querySelector(".image-slider-track") as HTMLElement | null;
+      const dotsWrap = slider.querySelector(
+        ".image-slider-dots",
+      ) as HTMLElement | null;
+      const pages = Array.from(
+        slider.querySelectorAll(".image-slider-page"),
+      ) as HTMLElement[];
+
+      if (!viewport || !track || !dotsWrap || pages.length === 0) return;
+
+      let page = 0;
+      let dragging = false;
+      let isHover = false;
+      let startX = 0;
+      let deltaX = 0;
+      let timer: number | null = null;
+
+      const autoPlayMs = Number(slider.dataset.autoplay ?? "4500");
+      const canSlide = pages.length > 1;
+
+      if (!canSlide) {
+        dotsWrap.style.display = "none";
+      } else {
+        dotsWrap.style.display = "";
+      }
+
+      const render = () => {
+        track.style.transform = `translateX(-${page * 100}%)`;
+
+        Array.from(dotsWrap.querySelectorAll("button")).forEach((dot, index) => {
+          dot.classList.toggle("is-active", index === page);
+        });
+      };
+
+      const goTo = (nextPage: number) => {
+        if (!canSlide) return;
+
+        if (nextPage < 0) page = pages.length - 1;
+        else if (nextPage >= pages.length) page = 0;
+        else page = nextPage;
+
+        render();
+      };
+
+      const stopTimer = () => {
+        if (timer !== null) {
+          window.clearInterval(timer);
+          timer = null;
+        }
+      };
+
+      const startTimer = () => {
+        stopTimer();
+        if (!canSlide || dragging || isHover) return;
+
+        timer = window.setInterval(() => {
+          page = page + 1 >= pages.length ? 0 : page + 1;
+          render();
+        }, autoPlayMs);
+      };
+
+      const dotButtons = pages.map((_, index) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "image-slider-dot";
+
+        const onClick = () => {
+          goTo(index);
+          startTimer();
+        };
+
+        button.addEventListener("click", onClick);
+        dotsWrap.appendChild(button);
+
+        cleanups.push(() => {
+          button.removeEventListener("click", onClick);
+        });
+
+        return button;
+      });
+
+      const onMouseEnter = () => {
+        isHover = true;
+        stopTimer();
+      };
+
+      const onMouseLeave = () => {
+        isHover = false;
+        startTimer();
+      };
+
+      const onPointerDown = (event: PointerEvent) => {
+        if (!canSlide) return;
+
+        dragging = true;
+        startX = event.clientX;
+        deltaX = 0;
+        viewport.setPointerCapture(event.pointerId);
+      };
+
+      const onPointerMove = (event: PointerEvent) => {
+        if (!dragging) return;
+        deltaX = event.clientX - startX;
+      };
+
+      const onPointerUp = () => {
+        if (!dragging) return;
+
+        dragging = false;
+
+        if (deltaX > 50) goTo(page - 1);
+        if (deltaX < -50) goTo(page + 1);
+
+        deltaX = 0;
+        startTimer();
+      };
+
+      viewport.addEventListener("mouseenter", onMouseEnter);
+      viewport.addEventListener("mouseleave", onMouseLeave);
+      viewport.addEventListener("pointerdown", onPointerDown);
+      viewport.addEventListener("pointermove", onPointerMove);
+      viewport.addEventListener("pointerup", onPointerUp);
+      viewport.addEventListener("pointercancel", onPointerUp);
+
+      cleanups.push(() => {
+        stopTimer();
+        viewport.removeEventListener("mouseenter", onMouseEnter);
+        viewport.removeEventListener("mouseleave", onMouseLeave);
+        viewport.removeEventListener("pointerdown", onPointerDown);
+        viewport.removeEventListener("pointermove", onPointerMove);
+        viewport.removeEventListener("pointerup", onPointerUp);
+        viewport.removeEventListener("pointercancel", onPointerUp);
+        dotButtons.forEach((button) => button.remove());
+      });
+
+      render();
+      startTimer();
+    });
+
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  }, []);
+
+  const contentsHtml = `
+    <div class="contents-page">
+      <div class="page-title">
+        <h2>
+          <span class="title-text">해외 재이용 사례</span>
+          <span class="title-bg">&nbsp;</span>
+        </h2>
+      </div>
+
+      <div class="sections global-case-sections">
+        <section id="example-global-overview" class="section first">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>사례 개요</h3>
+          </div>
+
+          <div class="content-group global-content-group">
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>주요 국가 물 재이용 계획</h4>
+              </div>
+
+              <div class="global-notice-box">
+                <div class="global-notice-row">
+                  <img
+                    src="/images/landing/business/globalCase/icon_bullet_water.png"
+                    alt="bullet"
+                    class="global-water-bullet"
+                  />
+                  <div>
+                    <strong class="global-notice-title">우리나라 하수처리수 재이용률은 15% 수준</strong>
+                    <ul class="global-plain-list">
+                      <li>2024년 하수도 통계 기준 <b>15.6%</b>이며, 제2차 물 재이용 기본 계획을 고려한 <b class="global-text-dark">2030년 목표는 17%</b></li>
+                      <li>대만은 가뭄과 공업용수 증가에 대응하여 <b class="global-text-dark">현재 4.3% 수준이며, 16.5%까지 확대 계획 수립</b></li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <div class="global-table-wrap global-overview-table-wrap">
+                <table class="global-table overview-compare-table">
+                  <thead>
+                    <tr>
+                      <th class="th-gray">국가</th>
+                      <th class="th-blue">해외정보</th>
+                      <th class="th-teal-2">현재</th>
+                      <th class="th-green-2">미래(목표, 예측치)</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td class="country-cell">
+                        <div class="country-wrap">
+                          <img src="/images/landing/business/globalCase/flag_kr.png" alt="한국 국기" class="country-flag" />
+                          한국
+                        </div>
+                      </td>
+                      <td class="bg-cyan">12.1%</td>
+                      <td>15.6%</td>
+                      <td class="bg-green">17%</td>
+                    </tr>
+                    <tr>
+                      <td class="country-cell">
+                        <div class="country-wrap">
+                          <img src="/images/landing/business/globalCase/flag_tw.png" alt="대만 국기" class="country-flag" />
+                          대만
+                        </div>
+                      </td>
+                      <td class="bg-cyan">2.4%</td>
+                      <td>4.3%</td>
+                      <td class="bg-green">16.5%</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>주요 국가의 하수처리수 재이용률 (%)</h4>
+              </div>
+
+              <div class="global-description-box">
+                <ul class="global-plain-list">
+                  <li>전 세계적으로 물 재이용은 호주, 유럽, 아프리카, 미국 등 가뭄이 잦거나 심각한 가뭄이 발생한 국가에서 많이 이루어짐</li>
+                  <li>이스라엘, 쿠웨이트 등 중동 및 북아프리카 지역은 가용 수자원이 제한되어 있어 재이용량 비중도 매우 높은 편</li>
+                </ul>
+              </div>
+
+              <div class="global-table-wrap global-overview-table-wrap">
+                <table class="global-table reuse-rate-table">
+                  <thead>
+                    <tr>
+                      <th class="th-gray">국가명</th>
+                      <th class="th-blue">지역</th>
+                      <th class="th-green-2">재이용률</th>
+                      <th class="th-gray">국가명</th>
+                      <th class="th-blue">지역</th>
+                      <th class="th-green-2">재이용률</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr><td class="cell-strong">이스라엘</td><td class="bg-cyan">중동&북아프리카</td><td class="bg-green">92.3</td><td class="cell-strong">튀르키예</td><td class="bg-cyan">동유럽&중앙아시아</td><td class="bg-green">26.6</td></tr>
+                    <tr><td class="cell-strong">쿠웨이트</td><td class="bg-cyan">중동&북아프리카</td><td class="bg-green">89.3</td><td class="cell-strong">독일</td><td class="bg-cyan">서유럽</td><td class="bg-green">25.0</td></tr>
+                    <tr><td class="cell-strong">호주</td><td class="bg-cyan">동아시아&태평양</td><td class="bg-green">49.0</td><td class="cell-strong">스페인</td><td class="bg-cyan">서유럽</td><td class="bg-green">24.4</td></tr>
+                    <tr><td class="cell-strong">싱가포르</td><td class="bg-cyan">동아시아&태평양</td><td class="bg-green">44.4</td><td class="cell-strong">한국</td><td class="bg-cyan">동아시아&태평양</td><td class="bg-green">12.1</td></tr>
+                    <tr><td class="cell-strong">그리스</td><td class="bg-cyan">서유럽</td><td class="bg-green">39.1</td><td class="cell-strong">미국</td><td class="bg-cyan">북아메리카</td><td class="bg-green">13.1</td></tr>
+                    <tr><td class="cell-strong">사우디아라비아</td><td class="bg-cyan">중동&북아프리카</td><td class="bg-green">32.8</td><td class="cell-strong">프랑스</td><td class="bg-cyan">서유럽</td><td class="bg-green">9.5</td></tr>
+                    <tr><td class="cell-strong">이탈리아</td><td class="bg-cyan">서유럽</td><td class="bg-green">31.7</td><td class="cell-strong">대만</td><td class="bg-cyan">동아시아&태평양</td><td class="bg-green">2.4</td></tr>
+                    <tr><td class="cell-strong">룩셈부르크</td><td class="bg-cyan">서유럽</td><td class="bg-green">29.1</td><td class="cell-strong">일본</td><td class="bg-cyan">동아시아&태평양</td><td class="bg-green">0.8</td></tr>
+                    <tr><td class="cell-strong">포르투갈</td><td class="bg-cyan">서유럽</td><td class="bg-green">29.0</td><td class="cell-strong"></td><td class="bg-cyan"></td><td class="bg-green"></td></tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-global-taiwan" class="section">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>[대만] 국가 주도의 공업용수 공급</h3>
+          </div>
+
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/globalCase/taiwan_01.png" alt="대만 국가 주도의 공업용수 공급 1" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/globalCase/taiwan_02.png" alt="대만 국가 주도의 공업용수 공급 2" /></div>
+                  </div>
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/globalCase/taiwan_03.png" alt="대만 국가 주도의 공업용수 공급 3" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+
+          <div class="content-group global-content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>재생 수자원 개발법 제정 (2015년제정, 2022개정)</h4></div>
+              <ul class="content-rich-list">
+                <li class="depth-0">목적: 수자원 지속 가능성 향상, 재생 수자원 활용을 통해 물부족 문제 해결</li>
+                <li class="depth-0">내용: 재생 수자원 정의·분류, 이용 의무, 이용 제한, 수질 기준 등</li>
+              </ul>
+              <div class="info-card-grid">
+                <div class="info-card"><strong>제4조.</strong><p>물 소비 계획에 따른 재이용수 이용 관련 내용 (일정 비율 재이용수 사용 규정)</p></div>
+                <div class="info-card"><strong>제5조.</strong><p>재이용수의 운영자, 사용자 관련 내용 (지자체에서 하수 무상공급 제공 가능)</p></div>
+                <div class="info-card"><strong>제7조.</strong><p>재이용수 이용 범위, 이용량 재이용수 수질 기준 내용</p></div>
+                <div class="info-card"><strong>제8조.</strong><p>재이용수 사업 주체, 책임 등에 관한 내용 (광역인 경우, 정부가 지자체 지정)</p></div>
+              </div>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>대만정부 하수재이용 사업 시행</h4></div>
+              <ul class="content-rich-list">
+                <li class="depth-0">대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업 시행(안핑)</li>
+                <li class="depth-1">1,518억의 사업비 중 92% 국비, 지방비 8% 투입</li>
+                <li class="depth-1">재이용수는 24km 관로로 타이난 TSMC로 공급</li>
+                <li class="depth-0">안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능</li>
+                <li class="depth-0">공급단가는 수질과 운영조건에 따라 다르게 책정</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>대만 재이용 시설별 재이용수 공급단지</h4></div>
+              <div class="table-wrap global-table-padding">
+                <table class="contents-table global-price-table">
+                  <thead>
+                    <tr><th class="th-gray">사업</th><th class="th-blue">가격(NTD/㎥)</th><th class="th-green">가격(원/㎥)</th></tr>
+                  </thead>
+                  <tbody>
+                    <tr><td>Fongshan(가오슝)</td><td class="bg-cyan">23.39</td><td class="bg-green">1,038원</td></tr>
+                    <tr><td>Linhai(가오슝)</td><td class="bg-cyan">19.28</td><td class="bg-green">858원</td></tr>
+                    <tr><td>Anping(타이난)</td><td class="bg-cyan">38.28</td><td class="bg-green">1,699원</td></tr>
+                    <tr><td>Yongkang(타이난)</td><td class="bg-cyan">23.67</td><td class="bg-green">1,050원</td></tr>
+                    <tr><td>Rende(타이난)</td><td class="bg-cyan">28.26</td><td class="bg-green">1,254원</td></tr>
+                    <tr><td>Shuinan(타이중)</td><td class="bg-cyan">15.00</td><td class="bg-green">668원</td></tr>
+                    <tr><td>Quaitou(가오슝)</td><td class="bg-cyan">35.44</td><td class="bg-green">1,573원</td></tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>특이사항</h4></div>
+              <ul class="content-rich-list">
+                <li class="depth-0">대만은 강수량이 풍부하지만 지역별 편차로 수자원 확보에 어려움을 겪고 있으며, 특히 남부 지역은 우기와 건기의 강수 차이가 큼</li>
+                <li class="depth-0">최근 수년간 심각한 가뭄이 발생하면서 반도체 산업을 국가 핵심 산업으로 지정, 공업용수 수요가 크게 증가</li>
+                <li class="depth-0">주요 반도체 공장이 남부에 집중되어 있어 물 부족 문제가 지속적으로 발생, 2021년 가뭄 당시 산업단지 용수 공급에도 차질 발생</li>
+                <li class="depth-0">정부는 2023년부터 산업용수 추가 요금을 부과하고, 농업용수 규제를 강화하는 등 용수 관리 정책 시행</li>
+                <li class="depth-0">기후변화 대응을 위해 수자원 보호 및 재이용 정책을 지속적으로 확대</li>
+                <li class="depth-0">산업용수 다소비 산업과 하수처리수를 재이용수 주요 공급원으로 활용 계획</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-global-singapore" class="section">
+          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>[싱가포르] 수요가 높은 산업의 물 재이용 의무화</h3></div>
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/globalCase/singapore_01.png" alt="싱가포르 NEWater 사례 1" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/globalCase/singapore_02.png" alt="싱가포르 NEWater 사례 2" /></div>
+                  </div>
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/globalCase/singapore_03.png" alt="싱가포르 NEWater 사례 3" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+          <div class="content-group global-content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>싱가포르 NEWater 비중 확대</h4></div>
+              <ul class="content-rich-list">
+                <li class="depth-0">2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해 NEWater Visitor Center를 함께 건설</li>
+                <li class="depth-0">NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용</li>
+                <li class="depth-0">2060년까지 NEWater 비중 55%까지 높이는 것이 싱가포르의 목표</li>
+              </ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>싱가포르 재이용수 의무화 및 지원정책</h4></div>
+              <ul class="content-rich-list">
+                <li class="depth-0">공업용수 수요가 높은 산업에 대해 물 재이용을 의무화</li>
+                <li class="depth-1">반도체업계 전체 비 재이용수(non-domestic용수) 17% 차지 → 공업용수 수요 원인</li>
+                <li class="depth-1">2024년 1월 1일부터 연간 최소 60,000㎥를 소비하는 사업자는 재이용수 사용 의무화</li>
+                <li class="depth-1">반도체 공장의 경우 최소 50% 이상의 재이용수를 요구함(현재는 43% 정도)</li>
+                <li class="depth-0">재정 지원을 통해 재이용 활성화를 지원</li>
+                <li class="depth-1">재이용 설비를 기준으로 2025년까지 싱가포르 수자원공사의 2가지 금융상품 제공</li>
+                <li class="depth-2">1. Water Efficiency Fund</li>
+                <li class="depth-2">2. Industrial Water Solutions Demonstration Fund</li>
+                <li class="depth-1">2025년 기준 지원 한도 상향 → 물 재이용 활성 도모</li>
+                <li class="depth-3">* 투입비용 50% → 75% 지원 / WSDP: $400만 → $500만</li>
+                <li class="depth-3">* 물 효율이 높은 장비를 도입하는 데에도 최대 $300만 지원 가능</li>
+              </ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>특이사항</h4></div>
+              <ul class="content-rich-list">
+                <li class="depth-0">싱가포르는 천연 수자원이 많지 않아, 말레이시아 조호르와 1962년 맺은 협약으로 물을 수입해왔으며, 재이용수를 늘리기 위한 노력을 계속하고 있음</li>
+                <li class="depth-1">싱가포르는 국토 내에 호수와 하천이 적고 집수공간도 적어 빗물로 확보할 수 있는 수자원량은 전체 물 수요의 20%에 불과함</li>
+                <li class="depth-0">싱가포르는 2002년부터 하수 재이용수인 NEWater를 개발, 비음용수와 간접음용수로 활용하고 있음</li>
+                <li class="depth-1">재이용수를 NEWater라는 이름으로 명명하고 NEWater에 대한 신뢰 확보를 위해 NEWater 방문자 센터도 건설함</li>
+                <li class="depth-1">비음용수로 많이 사용하며 건기에는 NEWater를 저수지에 추가하여 원수와 섞음. 원수는 상수도에서 처리 한 후 가정에 수돗물로 공급함</li>
+                <li class="depth-1">NEWater는 전용 파이프를 통해 주로 웨이퍼 제조 공장, 산업단지, 상업용 건물에서 산업 및 냉각수로 사용. 제일 많이 사용하는 곳은 웨이퍼 제조 공장</li>
+                <li class="depth-0">2024년 4월 기준 1㎥ 당 공업용수 가격은 $1.66이며, Non-domestic 기준 NEWater 가격은 $2.41</li>
+                <li class="depth-0">공업용수 가격 $1.66은 수도요금(water tariff)과 수자원세(waterborne tax)로 구분됨. $1.66에는 $1만큼의 수자원세가 포함됨</li>
+                <li class="depth-0">2023년 싱가포르는 산업용수 수요가 높은 산업에 대해 물 재이용을 의무화했으며, 정부는 기금을 통해 물 재이용을 지원함</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-global-australia" class="section">
+          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>[호주] 생활 속 물 재이용 / 광역 물 재이용수 공급</h3></div>
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/globalCase/australia_01.png" alt="호주 생활 속 물 재이용 1" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/globalCase/australia_02.png" alt="호주 광역 물 재이용수 공급 2" /></div>
+                  </div>
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/globalCase/australia_03.png" alt="호주 광역 물 재이용수 공급 3" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+          <div class="content-group global-content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>생활용수로 재이용수의 적극 활용</h4></div>
+              <ul class="content-rich-list">
+                <li class="depth-0">재이용수를 공원, 골프장 등의 관계용수로 공급(초록색 지역)</li>
+                <li class="depth-0">Dual pipe로 재이용수를 특정 주거단지로 공급(보라색 지역)</li>
+                <li class="depth-0">현재 7,000여 가구가 재이용수를 사용</li>
+                <li class="depth-0">2030년까지 43,000가구로 확대 예정</li>
+              </ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>호주 재이용수 광역 활용(퀸즈랜드주 브리즈번)</h4></div>
+              <ul class="content-rich-list">
+                <li class="depth-0">SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해 설정한 광역 수로망</li>
+                <li class="depth-0">이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급</li>
+                <li class="depth-1">12개 댐, 32개 수처리 시설, 3개 재이용시설, 담수화 플랜트 1개, 저수지 28개와 <span class="global-accent">600km 이상의 물 공급 관로를 건설</span></li>
+                <li class="depth-1">지역적으로 강수량이 고르지 않아, <span class="global-accent">댐의 저수율이 불균등 할 때</span> 지역의 물 공급을 보충하는 중요한 역할 수행</li>
+              </ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>특이사항</h4></div>
+              <ul class="content-rich-list">
+                <li class="depth-0">호주는 2000~2009년 강수량 감소로 밀레니엄 가뭄이 발생하여 심각한 물 부족 현상이 발생함</li>
+                <li class="depth-0">호주는 해안 도시에 인구가 밀집하여 거주하고 있으며 인구 증가율이 타 선진국 대비 높아, 향후 도시에 공급할 수자원 확보가 필요함</li>
+                <li class="depth-0">호주정부는 1990년대부터 하·폐수가 방류될 경우의 환경 피해에 대해 인식하기 시작하고 배출규제와 위원회를 구성하기 시작</li>
+                <li class="depth-0">연방정부는 주에 인센티브를 주는 방식으로 물 정책을 장려하고 토지소유권과 물 권리를 구분하여 거래를 허용하고 물 재이용 활성화를 위한 Water Smart Australia 프로그램을 시행</li>
+                <li class="depth-0">호주의 용수공급 체계는 영국과 미국의 특성들이 존재하지만, 주의 특성과 주정부의 정책 방향에 따라 주마다 많은 차이가 있음</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-global-eu" class="section">
+          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>[EU] 법률을 제정, EU국가에서 물 재이용 유도</h3></div>
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/globalCase/eu_01.png" alt="EU 물 재이용 기술 사례" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/globalCase/eu_02.png" alt="EU 물 재이용 유도 사례" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+          <div class="content-group global-content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>물 재이용에 대한 법률을 제정(2020 제정, 2023 시행)</h4></div>
+              <ul class="content-rich-list">
+                <li class="depth-0">유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을 제정 (2020/741)</li>
+                <li class="depth-0">2023년부터 모든 EU국가에서 시행</li>
+              </ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>유럽연합 회원국 물 재이용 지원정책</h4></div>
+              <ul class="content-rich-list">
+                <li class="depth-0">유럽연합 차원에서 다양한 물 재이용 프로그램 자금 지원</li>
+                <li class="depth-1">2021년부터 3년간 Life RECYCLIO 프로그램 지원 → 세부내용 물 재이용 프로그램</li>
+                <li class="depth-2">1. 환경 관련 사업에 자금을 지원하는 Life 프로그램의 일환으로 80만 유로를 지원</li>
+                <li class="depth-2">2. 식품·농업 분야 물 재이용 확대를 위해 기술 이전 및 평가 실시</li>
+                <li class="depth-1">물 재이용 정책 수행을 위해 BOOST-INN 180만 유로를 지원</li>
+                <li class="depth-3">* 프랑스, 이탈리아, 스페인 등 유럽 선진국 솔루션 공유</li>
+                <li class="depth-0">EU산하 JRC(공동연구센터)에서 물 재이용 기술제공 지원</li>
+                <li class="depth-1">‘물 재이용 회원 관리 실무 커뮤니티(Water Reuse Management Community of Practice)’ 시범사업 수행<br />&nbsp;유럽 전역에 성공적인 모델 활용 및 혁신적인 물 재이용 솔루션을 확장할 수 있는 기술을 제공</li>
+              </ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>특이사항</h4></div>
+              <ul class="content-rich-list">
+                <li class="depth-0">2019년 기준 EU 인구의 38%가 물 부족의 영향을 받을 것으로 예상됨. 이 흐름대로면 2030년까지 유럽 유역 전반에 물 부족 문제가 발생하게 될 것으로 예상. 인구 증가, 도시화의 확대, 염분화 및 기후변화들이 수자원 문제들의 주요 요인이며, 식습관 변화와 산업용수 수요 증가 등으로 악화되고 있는 상황</li>
+                <li class="depth-0">유럽의 물 부족 상황은 지역에 따라 다르게 나타나 스페인을 비롯한 남부유럽에서 특히 심각함. 전반적으로 북유럽에 비해 남유럽의 물 스트레스가 심하며, 특히 스페인과 포르투갈, 프랑스 동부지역의 물 스트레스가 심각함</li>
+                <li class="depth-0">유럽 연합에서도 물 부족 문제를 인식하고 2000년 EU Water Framework Directive를 개발, 이후 2020년 재이용에 관한 법률을 제정</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  `;
+
+  return (
+    <div
+      ref={rootRef}
+      className="bg-white"
+      dangerouslySetInnerHTML={{ __html: contentsHtml }}
+    />
+  );
+}
diff --git a/apps/dm/app/(with-layout)/example/_components/GreywaterExampleSection.tsx b/apps/dm/app/(with-layout)/example/_components/GreywaterExampleSection.tsx
new file mode 100644
index 000000000..b3958df87
--- /dev/null
+++ b/apps/dm/app/(with-layout)/example/_components/GreywaterExampleSection.tsx
@@ -0,0 +1,415 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export default function GreywaterExampleSection() {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    const cleanups: Array<() => void> = [];
+    const sliders = Array.from(root.querySelectorAll(".image-slider"));
+
+    sliders.forEach((sliderElement) => {
+      const slider = sliderElement as HTMLElement;
+      const viewport = slider.querySelector(
+        ".image-slider-viewport",
+      ) as HTMLElement | null;
+      const track = slider.querySelector(".image-slider-track") as HTMLElement | null;
+      const dotsWrap = slider.querySelector(
+        ".image-slider-dots",
+      ) as HTMLElement | null;
+      const pages = Array.from(
+        slider.querySelectorAll(".image-slider-page"),
+      ) as HTMLElement[];
+
+      if (!viewport || !track || !dotsWrap || pages.length === 0) return;
+
+      let page = 0;
+      let dragging = false;
+      let isHover = false;
+      let startX = 0;
+      let deltaX = 0;
+      let timer: number | null = null;
+
+      const autoPlayMs = Number(slider.dataset.autoplay ?? "4500");
+      const canSlide = pages.length > 1;
+
+      if (!canSlide) {
+        dotsWrap.style.display = "none";
+      } else {
+        dotsWrap.style.display = "";
+      }
+
+      const render = () => {
+        track.style.transform = `translateX(-${page * 100}%)`;
+
+        Array.from(dotsWrap.querySelectorAll("button")).forEach((dot, index) => {
+          dot.classList.toggle("is-active", index === page);
+        });
+      };
+
+      const goTo = (nextPage: number) => {
+        if (!canSlide) return;
+
+        if (nextPage < 0) page = pages.length - 1;
+        else if (nextPage >= pages.length) page = 0;
+        else page = nextPage;
+
+        render();
+      };
+
+      const stopTimer = () => {
+        if (timer !== null) {
+          window.clearInterval(timer);
+          timer = null;
+        }
+      };
+
+      const startTimer = () => {
+        stopTimer();
+        if (!canSlide || dragging || isHover) return;
+
+        timer = window.setInterval(() => {
+          page = page + 1 >= pages.length ? 0 : page + 1;
+          render();
+        }, autoPlayMs);
+      };
+
+      const dotButtons = pages.map((_, index) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "image-slider-dot";
+
+        const onClick = () => {
+          goTo(index);
+          startTimer();
+        };
+
+        button.addEventListener("click", onClick);
+        dotsWrap.appendChild(button);
+
+        cleanups.push(() => {
+          button.removeEventListener("click", onClick);
+        });
+
+        return button;
+      });
+
+      const onMouseEnter = () => {
+        isHover = true;
+        stopTimer();
+      };
+
+      const onMouseLeave = () => {
+        isHover = false;
+        startTimer();
+      };
+
+      const onPointerDown = (event: PointerEvent) => {
+        if (!canSlide) return;
+
+        dragging = true;
+        startX = event.clientX;
+        deltaX = 0;
+        viewport.setPointerCapture(event.pointerId);
+      };
+
+      const onPointerMove = (event: PointerEvent) => {
+        if (!dragging) return;
+        deltaX = event.clientX - startX;
+      };
+
+      const onPointerUp = () => {
+        if (!dragging) return;
+
+        dragging = false;
+
+        if (deltaX > 50) goTo(page - 1);
+        if (deltaX < -50) goTo(page + 1);
+
+        deltaX = 0;
+        startTimer();
+      };
+
+      viewport.addEventListener("mouseenter", onMouseEnter);
+      viewport.addEventListener("mouseleave", onMouseLeave);
+      viewport.addEventListener("pointerdown", onPointerDown);
+      viewport.addEventListener("pointermove", onPointerMove);
+      viewport.addEventListener("pointerup", onPointerUp);
+      viewport.addEventListener("pointercancel", onPointerUp);
+
+      cleanups.push(() => {
+        stopTimer();
+        viewport.removeEventListener("mouseenter", onMouseEnter);
+        viewport.removeEventListener("mouseleave", onMouseLeave);
+        viewport.removeEventListener("pointerdown", onPointerDown);
+        viewport.removeEventListener("pointermove", onPointerMove);
+        viewport.removeEventListener("pointerup", onPointerUp);
+        viewport.removeEventListener("pointercancel", onPointerUp);
+        dotButtons.forEach((button) => button.remove());
+      });
+
+      render();
+      startTimer();
+    });
+
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  }, []);
+
+  const contentsHtml = `
+    <div class="contents-page">
+      <div class="page-title">
+        <h2>
+          <span class="title-text">중수도 사례</span>
+          <span class="title-bg">&nbsp;</span>
+        </h2>
+      </div>
+
+      <div class="sections greywater-example-sections">
+        <section id="example-greywater-ansan" class="section first">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>경기도 안산시</h3>
+          </div>
+
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업명</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>안산시 중수도 설치사업</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업목적</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업 주요 내용</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>총사업비 : 81억원</li>
+                <li>처리공법 : MBLM공법</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업량</h4>
+              </div>
+              <div class="table-wrap greywater-table-wrap">
+                <table class="contents-table greywater-table">
+                  <thead>
+                    <tr>
+                      <th class="th-blue">시설명</th>
+                      <th class="th-teal-greywater">이용용도</th>
+                      <th class="th-green">공급량(㎥)</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr><td>경기테크노파크</td><td>청소·화장실용수</td><td>40㎥/일</td></tr>
+                    <tr><td>올림픽수영장</td><td>청소·화장실/세척·살수용수</td><td>35㎥/일</td></tr>
+                    <tr><td>와스타디움</td><td>청소·화장실/조경용수</td><td>90㎥/일</td></tr>
+                    <tr><td>호수실내수영장</td><td>청소·화장실/조경/세척·살수용수</td><td>50㎥/일</td></tr>
+                    <tr><td>한양대학교 에리카캠퍼스</td><td>청소·화장실용수</td><td>370㎥/일</td></tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-greywater-yongin" class="section">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>경기도 용인시</h3>
+          </div>
+
+          
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업명</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>용인시 중수도 설치사업</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업목적</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>물 부족 등의 비상상황에 대한 대비, 하수라도 사용할 집결 등 수자원의 효율적 활용</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업 주요 내용</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>총사업비 : 40억원</li>
+                <li>처리공법 : MBLM공법</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업량</h4>
+              </div>
+              <div class="table-wrap greywater-table-wrap">
+                <table class="contents-table greywater-table">
+                  <thead>
+                    <tr>
+                      <th class="th-blue">시설명</th>
+                      <th class="th-teal-greywater">이용용도</th>
+                      <th class="th-green">공급량(㎥)</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr><td>여성회관</td><td>청소·화장실용수</td><td>35㎥/일</td></tr>
+                    <tr><td>수지아르피아</td><td>청소·화장실용수</td><td>35㎥/일</td></tr>
+                    <tr><td>지상작전사령부</td><td>청소·화장실/조경/세척·살수용수</td><td>53㎥/일</td></tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-greywater-pyeongtaek" class="section">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>경기도 평택시</h3>
+          </div>
+
+          
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업명</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>평택시 중수도 설치사업</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업목적</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업 주요 내용</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>총사업비 : 21억원</li>
+                <li>처리공법 : MBLM공법</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업량</h4>
+              </div>
+              <div class="table-wrap greywater-table-wrap">
+                <table class="contents-table greywater-table">
+                  <thead>
+                    <tr>
+                      <th class="th-blue">시설명</th>
+                      <th class="th-teal-greywater">이용용도</th>
+                      <th class="th-green">공급량(㎥)</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr><td>평택대학교</td><td>청소·화장실용수</td><td>50㎥/일</td></tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  `;
+
+  return (
+    <div
+      ref={rootRef}
+      className="bg-white"
+      dangerouslySetInnerHTML={{ __html: contentsHtml }}
+    />
+  );
+}
diff --git a/apps/dm/app/(with-layout)/example/_components/RainExampleSection.tsx b/apps/dm/app/(with-layout)/example/_components/RainExampleSection.tsx
new file mode 100644
index 000000000..483263c82
--- /dev/null
+++ b/apps/dm/app/(with-layout)/example/_components/RainExampleSection.tsx
@@ -0,0 +1,382 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export default function RainExampleSection() {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    const cleanups: Array<() => void> = [];
+    const sliders = Array.from(root.querySelectorAll(".image-slider"));
+
+    sliders.forEach((sliderElement) => {
+      const slider = sliderElement as HTMLElement;
+      const viewport = slider.querySelector(".image-slider-viewport") as HTMLElement | null;
+      const track = slider.querySelector(".image-slider-track") as HTMLElement | null;
+      const dotsWrap = slider.querySelector(".image-slider-dots") as HTMLElement | null;
+      const pages = Array.from(
+        slider.querySelectorAll(".image-slider-page"),
+      ) as HTMLElement[];
+
+      if (!viewport || !track || !dotsWrap || pages.length === 0) return;
+
+      let page = 0;
+      let dragging = false;
+      let isHover = false;
+      let startX = 0;
+      let deltaX = 0;
+      let timer: number | null = null;
+
+      const autoPlayMs = Number(slider.dataset.autoplay ?? "4500");
+      const canSlide = pages.length > 1;
+
+      if (!canSlide) {
+        dotsWrap.style.display = "none";
+      } else {
+        dotsWrap.style.display = "";
+      }
+
+      const render = () => {
+        track.style.transform = `translateX(-${page * 100}%)`;
+
+        Array.from(dotsWrap.querySelectorAll("button")).forEach((dot, index) => {
+          dot.classList.toggle("is-active", index === page);
+        });
+      };
+
+      const goTo = (nextPage: number) => {
+        if (!canSlide) return;
+
+        if (nextPage < 0) page = pages.length - 1;
+        else if (nextPage >= pages.length) page = 0;
+        else page = nextPage;
+
+        render();
+      };
+
+      const stopTimer = () => {
+        if (timer !== null) {
+          window.clearInterval(timer);
+          timer = null;
+        }
+      };
+
+      const startTimer = () => {
+        stopTimer();
+        if (!canSlide || dragging || isHover) return;
+
+        timer = window.setInterval(() => {
+          page = page + 1 >= pages.length ? 0 : page + 1;
+          render();
+        }, autoPlayMs);
+      };
+
+      const dotButtons = pages.map((_, index) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "image-slider-dot";
+
+        const onClick = () => {
+          goTo(index);
+          startTimer();
+        };
+
+        button.addEventListener("click", onClick);
+        dotsWrap.appendChild(button);
+
+        cleanups.push(() => {
+          button.removeEventListener("click", onClick);
+        });
+
+        return button;
+      });
+
+      const onMouseEnter = () => {
+        isHover = true;
+        stopTimer();
+      };
+
+      const onMouseLeave = () => {
+        isHover = false;
+        startTimer();
+      };
+
+      const onPointerDown = (event: PointerEvent) => {
+        if (!canSlide) return;
+
+        dragging = true;
+        startX = event.clientX;
+        deltaX = 0;
+        viewport.setPointerCapture(event.pointerId);
+      };
+
+      const onPointerMove = (event: PointerEvent) => {
+        if (!dragging) return;
+        deltaX = event.clientX - startX;
+      };
+
+      const onPointerUp = () => {
+        if (!dragging) return;
+
+        dragging = false;
+
+        if (deltaX > 50) goTo(page - 1);
+        if (deltaX < -50) goTo(page + 1);
+
+        deltaX = 0;
+        startTimer();
+      };
+
+      viewport.addEventListener("mouseenter", onMouseEnter);
+      viewport.addEventListener("mouseleave", onMouseLeave);
+      viewport.addEventListener("pointerdown", onPointerDown);
+      viewport.addEventListener("pointermove", onPointerMove);
+      viewport.addEventListener("pointerup", onPointerUp);
+      viewport.addEventListener("pointercancel", onPointerUp);
+
+      cleanups.push(() => {
+        stopTimer();
+        viewport.removeEventListener("mouseenter", onMouseEnter);
+        viewport.removeEventListener("mouseleave", onMouseLeave);
+        viewport.removeEventListener("pointerdown", onPointerDown);
+        viewport.removeEventListener("pointermove", onPointerMove);
+        viewport.removeEventListener("pointerup", onPointerUp);
+        viewport.removeEventListener("pointercancel", onPointerUp);
+        dotButtons.forEach((button) => button.remove());
+      });
+
+      render();
+      startTimer();
+    });
+
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  }, []);
+
+  const contentsHtml = `
+    <div class="contents-page">
+      <div class="page-title">
+        <h2>
+          <span class="title-text">빗물이용시설 사례</span>
+          <span class="title-bg">&nbsp;</span>
+        </h2>
+      </div>
+
+      <div class="sections rain-example-sections">
+        <section id="example-rain-suwon" class="section first">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>경기도 수원시</h3>
+          </div>
+
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide">
+                      <img src="/images/landing/business/rain/suwon_01.png" alt="수원시 빗물이용시설 사례 1" />
+                    </div>
+                    <div class="image-slide">
+                      <img src="/images/landing/business/rain/suwon_02.png" alt="수원시 빗물이용시설 사례 2" />
+                    </div>
+                  </div>
+                  <div class="image-slider-page">
+                    <div class="image-slide">
+                      <img src="/images/landing/business/rain/suwon_03.png" alt="수원시 빗물이용시설 사례 3" />
+                    </div>
+                    <div class="image-slide">
+                      <img src="/images/landing/business/rain/suwon_04.png" alt="수원시 빗물이용시설 사례 4" />
+                    </div>
+                  </div>
+                  <div class="image-slider-page">
+                    <div class="image-slide">
+                      <img src="/images/landing/business/rain/suwon_05.png" alt="수원시 빗물이용시설 사례 5" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업명</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>수원시 빗물이용시설 설치사업</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업목적</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물공급기를 설치하여 축서기 도시 열섬효과 및 도로 비산먼지 저감</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업 주요 내용</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>총사업비 : 20억원</li>
+                <li>위치 : 수원시 영통구, 팔달구 및 장안구 일원</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업량</h4>
+              </div>
+
+              <div class="table-wrap">
+                <table class="contents-table rain-table">
+                  <thead>
+                    <tr>
+                      <th class="th-blue">시설명</th>
+                      <th class="th-teal">저류조용량(㎥)</th>
+                      <th class="th-mint">빗물공급기</th>
+                      <th class="th-green">빗물분사장치(m)</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>광교중학교</td>
+                      <td>4,500</td>
+                      <td rowspan="4">1대</td>
+                      <td>160</td>
+                    </tr>
+                    <tr>
+                      <td>수원월드컵경기장</td>
+                      <td>12,000</td>
+                      <td>451</td>
+                    </tr>
+                    <tr>
+                      <td>수원종합운동장</td>
+                      <td>10,000</td>
+                      <td>231</td>
+                    </tr>
+                    <tr>
+                      <td>수원컨벤션센터</td>
+                      <td>3,600</td>
+                      <td>460</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-rain-jeju" class="section">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>제주특별자치도</h3>
+          </div>
+
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide">
+                      <img src="/images/landing/business/rain/jeju_01.png" alt="제주특별자치도 빗물이용시설 사례 1" />
+                    </div>
+                    <div class="image-slide">
+                      <img src="/images/landing/business/rain/jeju_02.png" alt="제주특별자치도 빗물이용시설 사례 2" />
+                    </div>
+                  </div>
+                  <div class="image-slider-page">
+                    <div class="image-slide">
+                      <img src="/images/landing/business/rain/jeju_03.png" alt="제주특별자치도 빗물이용시설 사례 3" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업명</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>제주특별자치도 중규모 빗물이용시설 설치사업</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업목적</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>강우시 비닐하우스에서 발생하는 대체수자원인 빗물을 순환 활용하고자 하는 사업으로, 지하수 사용 저감과 집중호우시 도로와 농경지 침수피해 예방</li>
+              </ul>
+            </div>
+
+            <div class="content-block">
+              <div class="block-title">
+                <span class="block-title-icon">
+                  <span class="bubble bubble-sky">&nbsp;</span>
+                  <span class="bubble bubble-green">&nbsp;</span>
+                </span>
+                <h4>사업 주요 내용</h4>
+              </div>
+              <ul class="bullet-list">
+                <li>총사업비 : 278억원</li>
+                <li>위치 : 제주특별자치도 서귀포시 남원읍 위미리 일원</li>
+                <li>사업량 : 저류조 7,000㎥, 배수갑 500㎡, 관로 21.7km</li>
+                <li>사업기간 : 2024. 5. ~ 2028. 12.</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  `;
+
+  return (
+    <div
+      ref={rootRef}
+      className="bg-white"
+      dangerouslySetInnerHTML={{ __html: contentsHtml }}
+    />
+  );
+}
diff --git a/apps/dm/app/(with-layout)/example/_components/SewageExampleSection.tsx b/apps/dm/app/(with-layout)/example/_components/SewageExampleSection.tsx
new file mode 100644
index 000000000..266a30060
--- /dev/null
+++ b/apps/dm/app/(with-layout)/example/_components/SewageExampleSection.tsx
@@ -0,0 +1,582 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export default function SewageExampleSection() {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    const cleanups: Array<() => void> = [];
+    const sliders = Array.from(root.querySelectorAll(".image-slider"));
+
+    sliders.forEach((sliderElement) => {
+      const slider = sliderElement as HTMLElement;
+      const viewport = slider.querySelector(
+        ".image-slider-viewport",
+      ) as HTMLElement | null;
+      const track = slider.querySelector(".image-slider-track") as HTMLElement | null;
+      const dotsWrap = slider.querySelector(
+        ".image-slider-dots",
+      ) as HTMLElement | null;
+      const pages = Array.from(
+        slider.querySelectorAll(".image-slider-page"),
+      ) as HTMLElement[];
+
+      if (!viewport || !track || !dotsWrap || pages.length === 0) return;
+
+      let page = 0;
+      let dragging = false;
+      let isHover = false;
+      let startX = 0;
+      let deltaX = 0;
+      let timer: number | null = null;
+
+      const autoPlayMs = Number(slider.dataset.autoplay ?? "4500");
+      const canSlide = pages.length > 1;
+
+      if (!canSlide) {
+        dotsWrap.style.display = "none";
+      } else {
+        dotsWrap.style.display = "";
+      }
+
+      const render = () => {
+        track.style.transform = `translateX(-${page * 100}%)`;
+
+        Array.from(dotsWrap.querySelectorAll("button")).forEach((dot, index) => {
+          dot.classList.toggle("is-active", index === page);
+        });
+      };
+
+      const goTo = (nextPage: number) => {
+        if (!canSlide) return;
+
+        if (nextPage < 0) page = pages.length - 1;
+        else if (nextPage >= pages.length) page = 0;
+        else page = nextPage;
+
+        render();
+      };
+
+      const stopTimer = () => {
+        if (timer !== null) {
+          window.clearInterval(timer);
+          timer = null;
+        }
+      };
+
+      const startTimer = () => {
+        stopTimer();
+        if (!canSlide || dragging || isHover) return;
+
+        timer = window.setInterval(() => {
+          page = page + 1 >= pages.length ? 0 : page + 1;
+          render();
+        }, autoPlayMs);
+      };
+
+      const dotButtons = pages.map((_, index) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "image-slider-dot";
+
+        const onClick = () => {
+          goTo(index);
+          startTimer();
+        };
+
+        button.addEventListener("click", onClick);
+        dotsWrap.appendChild(button);
+
+        cleanups.push(() => {
+          button.removeEventListener("click", onClick);
+        });
+
+        return button;
+      });
+
+      const onMouseEnter = () => {
+        isHover = true;
+        stopTimer();
+      };
+
+      const onMouseLeave = () => {
+        isHover = false;
+        startTimer();
+      };
+
+      const onPointerDown = (event: PointerEvent) => {
+        if (!canSlide) return;
+
+        dragging = true;
+        startX = event.clientX;
+        deltaX = 0;
+        viewport.setPointerCapture(event.pointerId);
+      };
+
+      const onPointerMove = (event: PointerEvent) => {
+        if (!dragging) return;
+        deltaX = event.clientX - startX;
+      };
+
+      const onPointerUp = () => {
+        if (!dragging) return;
+
+        dragging = false;
+
+        if (deltaX > 50) goTo(page - 1);
+        if (deltaX < -50) goTo(page + 1);
+
+        deltaX = 0;
+        startTimer();
+      };
+
+      viewport.addEventListener("mouseenter", onMouseEnter);
+      viewport.addEventListener("mouseleave", onMouseLeave);
+      viewport.addEventListener("pointerdown", onPointerDown);
+      viewport.addEventListener("pointermove", onPointerMove);
+      viewport.addEventListener("pointerup", onPointerUp);
+      viewport.addEventListener("pointercancel", onPointerUp);
+
+      cleanups.push(() => {
+        stopTimer();
+        viewport.removeEventListener("mouseenter", onMouseEnter);
+        viewport.removeEventListener("mouseleave", onMouseLeave);
+        viewport.removeEventListener("pointerdown", onPointerDown);
+        viewport.removeEventListener("pointermove", onPointerMove);
+        viewport.removeEventListener("pointerup", onPointerUp);
+        viewport.removeEventListener("pointercancel", onPointerUp);
+        dotButtons.forEach((button) => button.remove());
+      });
+
+      render();
+      startTimer();
+    });
+
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  }, []);
+
+  const contentsHtml = `
+    <div class="contents-page">
+      <div class="page-title">
+        <h2>
+          <span class="title-text">하수처리수 재이용 사례</span>
+          <span class="title-bg">&nbsp;</span>
+        </h2>
+      </div>
+
+      <div class="sections sewage-example-sections">
+        <section id="example-sewage-guri" class="section first">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>경기도 구리시</h3>
+          </div>
+
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/guri_01.png" alt="구리시 도로자동청소시스템" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/sewage/guri_02.png" alt="구리시 도로자동청소시스템 위치도" /></div>
+                  </div>
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/guri_03.png" alt="구리시 도로자동청소시스템 위치도2" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/sewage/guri_04.png" alt="구리시 도로자동청소시스템 원리" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
+              <ul class="bullet-list"><li>구리시 도로자동청소시스템 설치사업</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
+              <ul class="bullet-list"><li>고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여 미세먼지 저감 및 폭염 취약성 완화</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
+              <ul class="bullet-list">
+                <li>총사업비 : 61억원</li>
+                <li>위치 : 구리시 경춘로 및 갈매중앙로 일대 등</li>
+                <li>관로 : 5.8km</li>
+                <li>공급량 : 178㎥/일</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-sewage-bucheon" class="section">
+          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>경기도 부천시</h3></div>
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/bucheon_01.png" alt="부천시 하수 재이용수 생산시설" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/sewage/bucheon_02.png" alt="부천시 하수처리수 재이용 사례" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
+              <ul class="bullet-list"><li>부천시 하수 재이용수 생산시설 설치 운영</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
+              <ul class="bullet-list"><li>굴포하수처리시설 하수처리수 재이용수 생산시설 설치 운영을 통해 여월천 등 부천 관내 하천의 건천화 방지, 하천 생태계 보존 및 주민들에게 친수 공간 제공</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
+              <ul class="bullet-list">
+                <li>총사업비 : 212억원</li>
+                <li>위치 : 부천시 여월천, 삼정천, 심곡천 및 시민의 강</li>
+                <li>관로 : 23.6km</li>
+                <li>공급량 : 50,000㎥/일</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-sewage-suwon" class="section">
+          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>경기도 수원시</h3></div>
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/suwon_01.png" alt="수원시 황구지천1" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/sewage/suwon_02.png" alt="수원시 황구지천2" /></div>
+                  </div>
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/suwon_03.png" alt="수원시 황구지천 지도" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
+              <ul class="bullet-list"><li>수원시 황구지천 하수처리수 재이용사업</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
+              <ul class="bullet-list"><li>황구지천 공공하수처리시설 하수처리수 재이용사업으로 황구 호매실천 및 금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
+              <ul class="bullet-list">
+                <li>총사업비 : 110억원</li>
+                <li>위치 : 수원시 권선구 호매실천, 금곡천</li>
+                <li>관로 : 3.9km</li>
+                <li>공급량 : 25,000㎥/일(하수처리시설 용량 : 45,000㎥/일)</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-sewage-paju" class="section">
+          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>경기도 파주시</h3></div>
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/paju_01.png" alt="파주시 하수처리수 시설 전경1" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/sewage/paju_02.png" alt="파주시 하수처리수 시설 전경2" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
+              <ul class="bullet-list"><li>파주시 하수처리수 재이용사업</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
+              <ul class="bullet-list">
+                <li>운정 및 금촌하수처리시설의 하수처리수를 막공법으로 재처리하여 파주LCD산업단지 내 3개 업체에 공업용수를 공급(LG디스플레이, 희성전자, 엔비텍)</li>
+                <li>하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례</li>
+              </ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업방식</h4></div>
+              <ul class="bullet-list"><li>민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
+              <ul class="bullet-list">
+                <li>총사업비 : 651억원</li>
+                <li>위치 : 파주시 금촌동 714번지 일원</li>
+                <li>관로 : 13.6km</li>
+                <li>공급량 : 40,000㎥/일(시설용량 : 41,200㎥/일)</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-sewage-pohang" class="section">
+          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>경상북도 포항시</h3></div>
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/pohang_01.png" alt="포항시 하수처리수 전경1" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/sewage/pohang_02.png" alt="포항시 하수처리수 전경2" /></div>
+                  </div>
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/pohang_03.png" alt="포항시 하수처리수 재이용 공급계통" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
+              <ul class="bullet-list"><li>포항시 하수처리수 재이용사업</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
+              <ul class="bullet-list"><li>포항시 내 공단 개발 확대로 지속적이고 안정적인 공업용수 공급 추진(포스코, 동국산업 등)</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업방식</h4></div>
+              <ul class="bullet-list"><li>민간투자사업(운영사 : ㈜포웰, 한국수자원공사)</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
+              <ul class="bullet-list">
+                <li>총사업비 : 1,400억원</li>
+                <li>위치 : 포항시 남구 상도동 125번지 일원</li>
+                <li>관로 : 11.7km</li>
+                <li>공급량 : 100,000㎥/일(시설용량 : 100,000㎥/일)</li>
+                <li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O)</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-sewage-ulsan" class="section">
+          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>울산광역시</h3></div>
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/ulsan_01.png" alt="울산광역시 폐수처리수 전경1" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/sewage/ulsan_02.png" alt="울산광역시 폐수처리수 전경2" /></div>
+                  </div>
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/ulsan_03.png" alt="울산광역시 폐수처리수 시설1" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/sewage/ulsan_04.png" alt="울산광역시 폐수처리수 시설2" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
+              <ul class="bullet-list"><li>울산광역시 폐수처리수 재이용사업</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
+              <ul class="bullet-list"><li>’18년 갈수기시 낙동강 수질 악화로 울산석유화학단지 용수 공급 부족을 해소하기 위해 미포산단 내 한화케미칼 등 8개사 공업용수 공급</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업방식</h4></div>
+              <ul class="bullet-list"><li>민간투자사업(시행사 :울산화이텍워터(주))</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
+              <ul class="bullet-list">
+                <li>총사업비 : 1,729억원</li>
+                <li>위치 : 울산광역시 울주군 청량읍 상개로 14 일원</li>
+                <li>관로 : 11.7km</li>
+                <li>공급량 : 17,000㎥/일(시설용량 : 86,000㎥/일)</li>
+                <li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O, EDI)</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-sewage-yeosu" class="section">
+          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>전라남도 여수시</h3></div>
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/yeosu_01.png" alt="여수시 하수처리수 재이용시설1" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/sewage/yeosu_02.png" alt="여수시 하수처리수 재이용시설2" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
+              <ul class="bullet-list"><li>여수시 하수처리수 재이용사업</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
+              <ul class="bullet-list"><li>수요자가 원하는 양질의 공업용수를 저렴하게 공급하여 한정된 수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한 오염총량 저감 및 방류수역 수질개선을 위한 여수국가산단 내 공업용수 공급(GS칼텍스, YNCC 등)</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업방식</h4></div>
+              <ul class="bullet-list"><li>민간투자사업(시행사 : 여수그린허브(주), 운영사 : 테크로스)</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
+              <ul class="bullet-list">
+                <li>총사업비 : 750억원</li>
+                <li>위치 : 여수시 신월로 284 일원</li>
+                <li>관로 : 18.6km</li>
+                <li>공급량 : 50,000㎥/일(시설용량 : 50,000㎥/일)</li>
+                <li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O)</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-sewage-boryeong" class="section">
+          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>충청남도 보령시</h3></div>
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/boryeong_01.png" alt="보령시 하수처리수 재이용시설1" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/sewage/boryeong_02.png" alt="보령시 하수처리수 재이용시설2" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
+              <ul class="bullet-list"><li>보령시 하수처리수 재이용사업</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
+              <ul class="bullet-list">
+                <li>한국중부발전(주)의 보령 및 신보령화력발전소에 10,000㎥/일의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진</li>
+                <li>국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(기후에너지환경부, 충청남도, 보령시, 한국중부발전(주))를 바탕으로 추진되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모</li>
+              </ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업방식</h4></div>
+              <ul class="bullet-list"><li>재정사업(2017년 한국환경공단과 사업대행 위·수탁협약 체결)</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
+              <ul class="bullet-list">
+                <li>총사업비 : 315억원</li>
+                <li>위치 : 보령시 대천방조제로 322 일원</li>
+                <li>관로 : 8.7km</li>
+                <li>공급량 : 10,000㎥/일(시설용량 : 10,000㎥/일)</li>
+                <li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O)</li>
+              </ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>특이사항</h4></div>
+              <ul class="bullet-list"><li>국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕으로 추진 되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모</li></ul>
+            </div>
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="example-sewage-asan" class="section">
+          <div class="section-title"><span class="section-bar">&nbsp;</span><h3>충청남도 아산시</h3></div>
+          <div class="image-slider" data-autoplay="4500">
+            <div class="image-slider-inner">
+              <div class="image-slider-viewport">
+                <div class="image-slider-track">
+                  <div class="image-slider-page">
+                    <div class="image-slide"><img src="/images/landing/business/sewage/asan_01.png" alt="아산시 하수처리수 재이용시설" /></div>
+                    <div class="image-slide"><img src="/images/landing/business/sewage/asan_02.png" alt="아산시 하수처리수 재이용 공정도" /></div>
+                  </div>
+                </div>
+              </div>
+              <div class="image-slider-dots"></div>
+            </div>
+          </div>
+          <div class="content-group">
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업명</h4></div>
+              <ul class="bullet-list"><li>아산시 하수처리수 재이용사업</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업목적</h4></div>
+              <ul class="bullet-list"><li>신도시 개발에 따른 인구 급증으로 발생하는 하수를 재처리하여 탕정산업단지(삼성디스플레이)에 공업용수를 안정적으로 공급함으로써 지역기반 및 활성화를 도모</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업방식</h4></div>
+              <ul class="bullet-list"><li>민간투자사업(시행사 : 아산스마트원터, 운영사 : 한국수자원공사)</li></ul>
+            </div>
+            <div class="content-block">
+              <div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky">&nbsp;</span><span class="bubble bubble-green">&nbsp;</span></span><h4>사업 주요 내용</h4></div>
+              <ul class="bullet-list">
+                <li>총사업비 : 297억원</li>
+                <li>위치 : 아산시 탕정면 갈산리 807 일원</li>
+                <li>관로 : 4.2km</li>
+                <li>공급량 : 27,000㎥/일(시설용량 : 45,000㎥/일)</li>
+                <li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O)</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  `;
+
+  return (
+    <div
+      ref={rootRef}
+      className="bg-white"
+      dangerouslySetInnerHTML={{ __html: contentsHtml }}
+    />
+  );
+}
diff --git a/apps/dm/app/(with-layout)/example/exampleSection.tsx b/apps/dm/app/(with-layout)/example/exampleSection.tsx
new file mode 100644
index 000000000..42ae60f08
--- /dev/null
+++ b/apps/dm/app/(with-layout)/example/exampleSection.tsx
@@ -0,0 +1,8 @@
+import { ContentsPage } from "@/components/ui/contents";
+
+export default function ExampleSection() {
+  const contsSn = Number(process.env.CONTENTS_EXAMPLE ?? 32);
+  const menuCd = "24";
+
+  return <ContentsPage contsSn={contsSn} menuCd={menuCd} />;
+}
diff --git a/apps/dm/app/(with-layout)/example/globalCase/page.tsx b/apps/dm/app/(with-layout)/example/globalCase/page.tsx
new file mode 100644
index 000000000..82de30108
--- /dev/null
+++ b/apps/dm/app/(with-layout)/example/globalCase/page.tsx
@@ -0,0 +1,844 @@
+"use client";
+
+import SubPageHeader from "@/components/SubPageHeader";
+import CaseImageSlider from "@/components/CaseImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+export default function GlobalCasePage() {
+  return (
+    <div className="bg-white">
+      <SubPageHeader
+        title="해외 재이용 사례"
+        crumbs={[
+          { label: "Home", href: "/reuse" },
+          { label: "물 재이용 사례" },
+          { label: "해외 재이용 사례" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      />
+
+      <Hr className="my-7" />
+
+      {/* 사례 개요 */}
+      <section id="overview" className="scroll-mt-[120px]">
+        <SectionTitle>사례 개요</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[1240px]"
+          slides={[
+            {
+              src: "/images/landing/business/globalCase/overview_01.png",
+              alt: "해외 재이용 사례 개요 1",
+            },
+          ]}
+        />
+
+        <section className="mt-6">
+          <div className="rounded-md bg-[#e9f0f1] p-8">
+            <h3 className="text-xl font-bold leading-relaxed text-gray-800">
+              2024년 하수도 통계 기준 15.6%이며,
+              <br />
+              제2차 물 재이용 기본 계획을 고려한 2030년 목표는{" "}
+              <span className="font-extrabold">17%</span>
+            </h3>
+
+            <div className="mt-6 space-y-4">
+              <div className="flex items-center gap-4">
+                <span className="text-sm text-gray-600">’24년도</span>
+                <div className="relative h-7 rounded-r-lg">
+                  <div className="h-7 w-[112px] rounded-r-lg bg-gray-400" />
+                </div>
+                <span className="text-sm text-gray-700">15.6%</span>
+              </div>
+
+              <div className="flex items-center gap-4">
+                <span className="text-sm text-gray-600">’30년도</span>
+                <div className="relative">
+                  <div className="h-10 w-[327px] rounded-r-lg bg-gradient-to-r from-sky-500 to-green-500" />
+                </div>
+                <span className="text-xl font-bold text-gray-900">17%</span>
+              </div>
+            </div>
+          </div>
+
+          <ul className="mt-6 space-y-2 text-base text-gray-600">
+            <li>
+              • 우리나라의 하수 처리 재이용률은{" "}
+              <span className="text-sky-600">15% 수준</span>
+            </li>
+            <li>
+              • 대만은 가뭄과 공업용수 증가에 대응하여
+              <span className="text-sky-600">
+                {" "}
+                현재 4.3% 수준이며, 16.5%까지 확대 계획 수립
+              </span>
+            </li>
+          </ul>
+
+          <div className="mt-6 overflow-x-auto">
+            <table className="w-full min-w-[640px] text-center text-sm">
+              <thead>
+                <tr>
+                  <th className="rounded-t-lg bg-[#C2CAD2] px-4 py-3 text-black">
+                    국가
+                  </th>
+                  <th className="rounded-t-lg bg-sky-600 px-4 py-3 text-white">
+                    해외정보
+                  </th>
+                  <th className="rounded-t-lg bg-teal-500 px-4 py-3 text-white">
+                    현재
+                  </th>
+                  <th className="rounded-t-lg bg-green-500 px-4 py-3 text-white">
+                    미래(목표, 예측치)
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="border border-t-0 bg-white">
+                <tr className="border-t">
+                  <td className="px-4 py-3 font-medium">한국</td>
+                  <td className="bg-sky-50 px-4 py-3 text-gray-700">12.1%</td>
+                  <td className="px-4 py-3">15.6%</td>
+                  <td className="bg-sky-50 px-4 py-3 text-gray-700">17%</td>
+                </tr>
+                <tr className="border-t">
+                  <td className="px-4 py-3 font-medium">대만</td>
+                  <td className="bg-sky-50 px-4 py-3 text-gray-700">2.4%</td>
+                  <td className="px-4 py-3">4.3%</td>
+                  <td className="bg-sky-50 px-4 py-3 text-gray-700">16.5%</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section>
+          <SectionTitle>주요 국가의 하수처리수 재이용률 (%)</SectionTitle>
+
+          <ul className="mt-6 space-y-2 text-base text-gray-600">
+            <li>
+              • 전 세계적으로 물 재이용은 호주, 유럽, 아프리카, 미국 등 가뭄이
+              잦거나 심각한 가뭄이 발생한 국가에서 많이 이루어짐
+            </li>
+            <li>
+              • 이스라엘, 쿠웨이트 등 중동 및 북아프리카 지역은 가용 수자원이
+              제한되어 있어 재이용량 비중도 매우 높은 편
+            </li>
+          </ul>
+
+          <div className="mt-6 overflow-x-auto">
+            <table className="min-w-[900px] w-full text-center text-sm">
+              <thead>
+                <tr>
+                  <th className="rounded-t-lg bg-[#C2CAD2] px-4 py-3 text-black">
+                    국가명
+                  </th>
+                  <th className="rounded-t-lg bg-sky-600 px-4 py-3 text-white">
+                    지역
+                  </th>
+                  <th className="rounded-t-lg bg-green-500 px-4 py-3 text-white">
+                    재이용률
+                  </th>
+                  <th className="rounded-t-lg bg-[#C2CAD2] px-4 py-3 text-black">
+                    국가명
+                  </th>
+                  <th className="rounded-t-lg bg-sky-600 px-4 py-3 text-white">
+                    지역
+                  </th>
+                  <th className="rounded-t-lg bg-green-500 px-4 py-3 text-white">
+                    재이용률
+                  </th>
+                </tr>
+              </thead>
+
+              <tbody className="border border-t-0 bg-white">
+                {[
+                  {
+                    L: { c: "이스라엘", r: "중동&북아프리카", v: "92.3" },
+                    R: { c: "튀르키예", r: "동유럽&중앙아시아", v: "26.6" },
+                  },
+                  {
+                    L: { c: "쿠웨이트", r: "중동&북아프리카", v: "89.3" },
+                    R: { c: "독일", r: "서유럽", v: "25.0" },
+                  },
+                  {
+                    L: { c: "호주", r: "동아시아&태평양", v: "49.0" },
+                    R: { c: "스페인", r: "서유럽", v: "24.4" },
+                  },
+                  {
+                    L: { c: "싱가포르", r: "동아시아&태평양", v: "44.4" },
+                    R: { c: "한국", r: "동아시아&태평양", v: "12.1" },
+                  },
+                  {
+                    L: { c: "그리스", r: "서유럽", v: "39.1" },
+                    R: { c: "미국", r: "북아메리카", v: "13.1" },
+                  },
+                  {
+                    L: { c: "사우디아라비아", r: "중동&북아프리카", v: "32.8" },
+                    R: { c: "프랑스", r: "서유럽", v: "9.5" },
+                  },
+                  {
+                    L: { c: "이탈리아", r: "서유럽", v: "31.7" },
+                    R: { c: "대만", r: "동아시아&태평양", v: "2.4" },
+                  },
+                  {
+                    L: { c: "룩셈부르크", r: "서유럽", v: "29.1" },
+                    R: { c: "일본", r: "동아시아&태평양", v: "0.8" },
+                  },
+                  {
+                    L: { c: "포르투갈", r: "서유럽", v: "29.0" },
+                    R: { c: "", r: "", v: "" },
+                  },
+                ].map((row, idx) => (
+                  <tr key={idx} className="border-t">
+                    <td className="px-4 py-3 font-medium text-gray-700">
+                      {row.L.c}
+                    </td>
+                    <td className="bg-sky-50 px-4 py-3 text-gray-700">
+                      {row.L.r}
+                    </td>
+                    <td className="bg-green-50 px-4 py-3 text-gray-700">
+                      {row.L.v}
+                    </td>
+
+                    <td className="px-4 py-3 font-medium text-gray-700">
+                      {row.R.c}
+                    </td>
+                    <td className="bg-sky-50 px-4 py-3 text-gray-700">
+                      {row.R.r}
+                    </td>
+                    <td className="bg-green-50 px-4 py-3 text-gray-700">
+                      {row.R.v}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </section>
+
+      <Hr className="my-16" />
+
+      {/* 대만 */}
+      <section id="taiwan" className="scroll-mt-[120px]">
+        <SectionTitle>대만</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[1240px]"
+          slides={[
+            {
+              src: "/images/landing/business/globalCase/taiwan_01.png",
+              alt: "대만 사례 1",
+            },
+          ]}
+        />
+
+        <section className="mt-8">
+          <SectionTitle>재생 수자원 개발법 제정(2015년제정, 2022개정)</SectionTitle>
+          <div className="px-4">
+            <ul className="mt-6 space-y-2 text-base text-gray-600">
+              <li>
+                • 목적: 수자원 지속 가능성 향상, 재생 수자원 활용을 통해 물부족
+                문제 해결
+              </li>
+              <li>
+                • 내용: 재생 수자원 정의·분류, 이용 의무, 이용 제한, 수질 기준 등
+              </li>
+            </ul>
+
+            <div className="mt-5 rounded-sm bg-[#e9f0f1] p-8">
+              <ul className="space-y-1 text-2xl text-[#1A1A1A]">
+                <li>
+                  – 제4조. 물 소비 계획에 따른 재이용수 이용 관련 내용 (일정 비율
+                  재이용수 사용 규정)
+                </li>
+                <li>
+                  – 제5조. 재이용수의 운영자, 사용자 관련 내용 (지자체에서 하수
+                  무상공급 제공 가능)
+                </li>
+                <li>
+                  – 제7조. 재이용수 이용 범위, 이용량 재이용수 수질 기준 내용
+                  (식품, 제약산업 사용 불가)
+                </li>
+                <li>
+                  – 제8조. 재이용수 사업 주체, 책임 등에 관한 내용 (광역인 경우,
+                  정부가 지자체 지정)
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section className="mt-6">
+          <SectionTitle>대만정부 하수재이용 사업 시행</SectionTitle>
+          <div className="px-4">
+            <ul className="mt-6 space-y-4 text-base text-gray-600">
+              <li>
+                • 대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업
+                시행(안핑)
+                <br />
+                <ul className="ml-4 mt-2 list-inside text-[#767676]">
+                  <li>– 1,618억의 사업비 중 92% 국비, 지방비 8% 투입</li>
+                  <li>– 재이용수는 24km 관로로 타이난 TSMC로 공급</li>
+                </ul>
+              </li>
+              <li>• 안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능</li>
+              <li>• 공급단가는 수질과 운영조건에 따라 다르게 책정</li>
+            </ul>
+
+            <div className="mt-3 overflow-x-auto">
+              <p className="py-2 text-center text-2xl">
+                〈대만 재이용 시설별 재이용수 공급단지〉
+              </p>
+              <table className="min-w-[900px] w-full text-center text-sm">
+                <thead className="border">
+                  <tr>
+                    <th className="bg-[#C2CAD2] px-4 py-3 text-black">사업</th>
+                    <th className="bg-sky-600 px-4 py-3 text-white">
+                      가격(NTD/㎥)
+                    </th>
+                    <th className="bg-green-500 px-4 py-3 text-white">
+                      가격(원/㎥)
+                    </th>
+                  </tr>
+                </thead>
+
+                <tbody className="border border-t-0 bg-white text-[#4F4F4F]">
+                  <tr className="border-t">
+                    <td className="bg-white px-4 py-3">Fongshan(가오슝)</td>
+                    <td className="bg-[#EAF5F5] px-4 py-3">23.39</td>
+                    <td className="bg-[#E7F4E2] px-4 py-3">1,038원</td>
+                  </tr>
+                  <tr className="border-t">
+                    <td className="bg-white px-4 py-3">Linhai(가오슝)</td>
+                    <td className="bg-[#EAF5F5] px-4 py-3">19.28</td>
+                    <td className="bg-[#E7F4E2] px-4 py-3">858원</td>
+                  </tr>
+                  <tr className="border-t">
+                    <td className="bg-white px-4 py-3">Anping(타이난)</td>
+                    <td className="bg-[#EAF5F5] px-4 py-3">38.28</td>
+                    <td className="bg-[#E7F4E2] px-4 py-3">1,699원</td>
+                  </tr>
+                  <tr className="border-t">
+                    <td className="bg-white px-4 py-3">Yongkang(타이난)</td>
+                    <td className="bg-[#EAF5F5] px-4 py-3">23.67</td>
+                    <td className="bg-[#E7F4E2] px-4 py-3">1,050원</td>
+                  </tr>
+                  <tr className="border-t">
+                    <td className="bg-white px-4 py-3">Rende(타이난)</td>
+                    <td className="bg-[#EAF5F5] px-4 py-3">28.26</td>
+                    <td className="bg-[#E7F4E2] px-4 py-3">1,254원</td>
+                  </tr>
+                  <tr className="border-t">
+                    <td className="bg-white px-4 py-3">Shuinan(타이중)</td>
+                    <td className="bg-[#EAF5F5] px-4 py-3">15.00</td>
+                    <td className="bg-[#E7F4E2] px-4 py-3">668원</td>
+                  </tr>
+                  <tr className="border-t">
+                    <td className="bg-white px-4 py-3">Quaitou(가오슝)</td>
+                    <td className="bg-[#EAF5F5] px-4 py-3">35.44</td>
+                    <td className="bg-[#E7F4E2] px-4 py-3">1,573원</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section>
+          <SectionTitle>특이사항</SectionTitle>
+          <ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  대만은 풍부한 강수량에도, 지형적 특성으로 인해 수자원 확보에
+                  어려움을 겪고 있으며, 대만 남부지역의 경우 우기와 건기 사이의
+                  강수량 차이가 큼
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  대만은 최근 심각한 가뭄이 여러 해에 걸쳐서 발생하고 있으며,
+                  강수량 감소와 함께 대만 정부 주도하에 반도체 산업을 국가 핵심
+                  산업으로 선정하고 반도체 산업 육성 계획을 세움. 그 결과,
+                  2023년 파운드리 시장의 68.3%를 차지하는 반도체 강국으로
+                  성장했으며 이로 인한 공업용수 수요가 크게 증가
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  반도체 산업은 물 소비가 많아, 안정적인 용수공급이 매우
+                  중요한데 현재 19개의 반도체 공장이 물이 부족한 대만 남부지역에
+                  위치함. 2021년 가뭄 발생 당시, 산업단지 기업들도 용수 공급에
+                  어려움을 겪음. 이는 대만 남부 지역의 물 부족, 물 분배 등에
+                  대한 문제를 야기함
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  대만 정부는 산업단지 기업들에게 2023년부터 물에 대한
+                  추가요금 부과를 시작했으며, 농업용수에 대해서는 강력한
+                  억제정책을 시행함. 안정적인 용수 공급을 위해서 정부와
+                  기업에서 자체적으로 재이용수 시설에 대한 투자가 이루어지고
+                  있음.
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  대만은 2004년 기후변화로 인한 물 부족 상황을 해결하기 위해
+                  수자원 보호 전략을 승인하고, 2015년 대만 환경부는 재생 수자원
+                  개발법을 발표, 2022년에는 한 차례 개정
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  대만은 물 소비량이 많은 산업(high water consuming
+                  industries)과 하수처리장(municipal wastewater treatment
+                  plants), 두 곳을 재이용수의 주요 공급원으로 계획
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </section>
+      </section>
+
+      <Hr className="my-16" />
+
+      {/* 호주 */}
+      <section id="australia" className="scroll-mt-[120px]">
+        <SectionTitle>호주</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[1240px]"
+          slides={[
+            {
+              src: "/images/landing/business/globalCase/australia_01.png",
+              alt: "호주 사례 1",
+            },
+          ]}
+        />
+
+        <section className="mt-8">
+          <SectionTitle>생활용수로 재이용수의 적극 활용</SectionTitle>
+          <div className="mt-6 px-4">
+            <ul className="space-y-4 text-base text-[#4F4F4F]">
+              <li>– 재이용수를 공원, 골프장 등의 관개용수로 공급(초록색 지역)</li>
+              <li>
+                – Dual pipe로 재이용수를 특정 주거단지로 공급(보라색 지역)
+              </li>
+              <li>– 현재 7,000여 가구가 재이용수를 사용</li>
+              <li>– 2030년까지 43,000가구로 확대 예정</li>
+            </ul>
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section className="mt-6">
+          <SectionTitle>호주 재이용수 광역 활용(퀸즈랜드주 브리즈번)</SectionTitle>
+          <div className="px-4">
+            <ul className="mt-6 space-y-4 text-base text-gray-600">
+              <li>
+                • SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해
+                설정한 광역 수로망
+              </li>
+              <li>
+                • 이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급
+                <br />
+                <ul className="ml-4 mt-2 list-inside text-[#767676]">
+                  <li>– 1,618억의 사업비 중 92% 국비, 지방비 8% 투입</li>
+                  <li>– 재이용수는 24km 관로로 타이난 TSMC로 공급</li>
+                </ul>
+              </li>
+              <li>
+                • 12개 댐, 32개 수처리 시설, 3개 재이용시설, 담수화 플랜트 1개,
+                저수지 28개와 600km 이상의 물 공급 관로를 건설
+              </li>
+              <li>
+                • 지역적으로 강수량이 고르지 않아, 댐의 저수율이 불균등할 때
+                지역의 물 공급을 보충하는 중요한 역할을 수행
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section>
+          <SectionTitle>특이사항</SectionTitle>
+          <ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  호주는 2000~2009년 강수량 감소로 밀레니엄 가뭄이 발생하여
+                  심각한 물 부족 현상이 발생함
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  호주는 해안 도시에 인구가 밀집하여 거주하고 있으며 인구
+                  증가율이 타 선진국 대비 높아, 향후 도시에 공급할 수자원 확보가
+                  필요함
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  호주정부는 1990년대부터 하·폐수가 방류될 경우의 환경 피해에
+                  대해 인식하기 시작하고 배출규제와 위원회를 구성하기 시작
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  연방정부는 주에 인센티브를 주는 방식으로 물 정책을 장려하고
+                  토지소유권과 물 권리를 구분하여 거래를 허용하고 물 재이용
+                  활성화를 위한 Water Smart Australia 프로그램을 시행
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  호주의 용수공급 체계는 영국과 미국의 특성들이 존재하지만, 주의
+                  특성과 주 정부의 정책 방향에 따라 주마다도 많은 차이가 있음.
+                  특히 대부분의 주에서 수 자원 개발 기능과 수도 공급의 기능을
+                  분리하여 주정부 산하 기관에서 운영하는게 특징
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </section>
+      </section>
+
+      <Hr className="my-16" />
+
+      {/* 싱가포르 */}
+      <section id="singapore" className="scroll-mt-[120px]">
+        <SectionTitle>싱가포르</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[1240px]"
+          slides={[
+            {
+              src: "/images/landing/business/globalCase/singapore_01.png",
+              alt: "싱가포르 사례 1",
+            },
+          ]}
+        />
+
+        <section className="mt-8">
+          <SectionTitle>싱가포르 NEWater 비중 확대</SectionTitle>
+          <div className="mt-6 px-4">
+            <ul className="space-y-4 text-base text-gray-600">
+              <li>
+                • 2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해
+                NEWater Visitor Center를 함께 건설
+              </li>
+              <li>• NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용</li>
+              <li>
+                • 2060년까지 NEWater 비중 55%까지 높이는 것이 싱가포르의 목표
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section className="mt-6">
+          <SectionTitle>싱가포르 재이용수 의무화 및 지원정책</SectionTitle>
+          <div className="px-4">
+            <ul className="mt-6 space-y-4 text-base text-gray-600">
+              <li>
+                • 공업용수 수요가 높은 산업에 대해 물 재이용을 의무화
+                <br />
+                <ul className="ml-4 mt-2 list-inside text-sm text-[#767676]">
+                  <li>
+                    – 반도체업계 전체 비 재이용수(non-domestic용수) 17% 차지 →
+                    공업용수 수요 원인
+                  </li>
+                  <li>
+                    – 2024년 1월 1일부터 연간 최소 60,000㎥를 소비하는 사업자는
+                    재이용수 사용 의무화
+                  </li>
+                  <li>
+                    – 반도체 공장의 경우 최소 50% 이상의 재이용수를 요구함(현재는
+                    43% 정도)
+                  </li>
+                </ul>
+              </li>
+              <li>
+                • 재정 지원을 통해 재이용 활성화를 지원
+                <br />
+                <ul className="ml-4 mt-2 list-inside text-sm text-[#767676]">
+                  <li>
+                    – 재이용 설비를 기준으로 2025년까지 싱가포르 수자원공사의
+                    2가지 금융상품 제공
+                    <ul className="ml-4 mt-2 list-inside text-[#767676]">
+                      <li>1. Water Efficiency Fund</li>
+                      <li>2. Industrial Water Solutions Demonstration Fund</li>
+                    </ul>
+                  </li>
+                  <li className="mt-2">
+                    – 2025년 기준 지원 한도 상향 → 물 재이용 활성 도모
+                    <ul className="ml-4 mt-2 list-inside text-[#767676]">
+                      <li>
+                        투입비용 50% → 75% 지원 / WSDP: $400만 → $500만
+                      </li>
+                      <li>
+                        물 효율이 높은 장비를 도입하는 데에도 최대 $300만 지원
+                        가능
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section>
+          <SectionTitle>특이사항</SectionTitle>
+          <ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  싱가포르는 천연 수자원이 많지 않아, 말레이시아 조호르와 1962년
+                  맺은 협약으로 물을 수입해왔으며, 재이용수를 늘리기 위한 노력을
+                  계속하고 있음
+                  <br />
+                  <ul className="ml-4 mt-2 list-inside text-sm text-[#767676]">
+                    <li>
+                      - 싱가포르는 국토 내에 호수와 하천이적고 집수공간도 적어
+                      빗물로 확보할 수 있는 수자원량은 전체 물 수요의 20%에
+                      불과함
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  싱가포르는 도심에 저수지를 건설하 고 건물에 빗물이용시설을
+                  건설하여 빗물을 재이용하고 있음
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  싱가포르는 2002년부터 하수재이용수인 NEWater를 개발, 비음
+                  용수와 간접음용수로 활용하고 있음
+                  <br />
+                  <ul className="ml-4 mt-2 list-inside text-sm/6 text-[#767676]">
+                    <li>
+                      - 재이용수를 NEWater라는 이름으로 명명하고 NEWater에 대한
+                      신뢰 확보를 위해 NEWater 방문자 센터도 건설함
+                    </li>
+                    <li>
+                      - 비음용수로 많이 사용하며 건기에는 NEWater를 저수지에
+                      추가하여 원수와 섞음. 원수는 상수도에서 처리 한 후 가정에
+                      수돗물로 공급함
+                    </li>
+                    <li>
+                      - NEWater는 전용 파이프를 통해 주로 웨이퍼 제조 공장,
+                      산업단지, 상업용 건물에서 산업 및 냉각수로 사용. 제일 많이
+                      사용하는 곳은 웨이퍼 제조 공장
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  2024년 4월 기준 1㎥ 당 공업용수 가격은 $1.66이며,
+                  Non-domestic 기준 NEWater 가격은 $2.41
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  공업용수 가격 $1.66은 수도요금(water tariff)과 수자원세
+                  (waterborne tax)로 구분됨. $1.66에는 $1만큼의 수자원세가
+                  포함됨
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  2023년 싱가포르는 산업용수 수요가 높은 산업에 대해 물 재
+                  이용을 의무화했으며, 정부는 기금을 통해 물 재이용을 지원함
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </section>
+      </section>
+
+      <Hr className="my-16" />
+
+      {/* EU */}
+      <section id="eu" className="scroll-mt-[120px] pb-[200px]">
+        <SectionTitle>EU</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[1240px]"
+          slides={[
+            {
+              src: "/images/landing/business/globalCase/eu_01.png",
+              alt: "EU 사례 1",
+            },
+          ]}
+        />
+
+        <section className="mt-8">
+          <SectionTitle>물 재이용에 대한 법률을 제정(2020 제정, 2023 시행)</SectionTitle>
+          <div className="mt-6 px-4">
+            <ul className="space-y-4 text-base text-gray-600">
+              <li>
+                • 유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을
+                제정 (2020/741)
+              </li>
+              <li>• 2023년부터 모든 EU국가에서 시행</li>
+            </ul>
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section className="mt-6">
+          <SectionTitle>유럽연합 회원국 물 재이용 지원정책</SectionTitle>
+          <div className="px-4">
+            <ul className="mt-6 space-y-4 text-base text-gray-600">
+              <li>
+                • 유럽연합 차원에서 다양한 물 재이용 프로그램 자금 지원
+                <br />
+                <ul className="ml-4 mt-2 list-inside space-y-4 text-sm text-[#767676]">
+                  <li>
+                    – 2021년부터 3년간 Life RECYCLIO 프로그램 지원 → 세부내용
+                    물 재이용 프로그램
+                    <ul className="ml-4 mt-2 list-inside space-y-2 text-[#767676]">
+                      <li>
+                        1. 환경 관련 사업에 자금을 지원하는 Life 프로그램의
+                        일환으로 80만 유로를 지원
+                      </li>
+                      <li>
+                        2. 식품·농업 분야 물 재이용 확대를 위해 기술 이전 및 평가
+                        실시
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    – 물 재이용 정책 수행을 위해 BOOST-INN 180만 유로를 지원
+                    <ul className="ml-4 mt-2 list-inside space-y-2 text-[#767676]">
+                      <li>
+                        *프랑스, 이탈리아, 스페인 등 유럽 선진국 솔루션 공유
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li>
+                • EU산하 JRC(공동연구센터)에서 물 재이용 기술제공 지원
+                <br />
+                <ul className="ml-4 mt-2 list-inside space-y-2 text-sm text-[#767676]">
+                  <li>
+                    ‘물 재이용 회원 관리 실무 커뮤니티(Water Reuse Management
+                    Community of Practice)’ 시범사업 수행
+                  </li>
+                  <li>
+                    유럽 전역에 성공적인 모델 활용 및 혁신적인 물 재이용
+                    솔루션을 확장할 수 있는 기술을 제공
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section>
+          <SectionTitle>특이사항</SectionTitle>
+          <ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  2019년 기준 EU 인구의 38%가 물 부족의 영향을 받을 것으로
+                  예상됨. 이 흐름대로면 2030년까지 유럽 유역 전반에 물 부족
+                  문제가 발생하게 될 것으로 예상. 인구 증가, 도시화의 확대,
+                  염분화 및 기후변화들이 수자원 문제들의 주요 요인이며, 식습관
+                  변화와 산업용수 수요 증가 등으로 악화되고 있는 상황
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  유럽의 물 부족 상황은 지역에 따라 다르게 나타나 스페인을
+                  비롯한 남부유럽 에서 특히 심각함. 전반적으로 북유럽에 비해
+                  남유럽의 물 스트레스가 심하며, 특히 스페인과 포르투갈, 프랑스
+                  동부지역의 물 스트레스가 심각함
+                </li>
+              </ul>
+            </li>
+            <li>
+              <ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
+                <li>
+                  유럽 연합에서도 물 부족 문제를 인식하고 2000년 EU Water
+                  Framework Directive을 개발, 이후 2020년 재이용에 관한 법률을
+                  제정
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </section>
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/example/greywater/page.tsx b/apps/dm/app/(with-layout)/example/greywater/page.tsx
new file mode 100644
index 000000000..ab76d58d7
--- /dev/null
+++ b/apps/dm/app/(with-layout)/example/greywater/page.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import SubPageHeader from "@/components/SubPageHeader";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-10 w-[4px] bg-sky-500" />
+      <h3 className="text-[38px] font-bold leading-none text-neutral-900">
+        {children}
+      </h3>
+    </div>
+  );
+}
+
+function BlockTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="inline-block h-[14px] w-[24px] rounded-full bg-gradient-to-r from-sky-300 to-lime-300" />
+      <h4 className="text-[28px] font-bold text-[#2B2B2B]">{children}</h4>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+type SupplyRow = {
+  facility: string;
+  usage: string;
+  amount: string;
+};
+
+function SupplyTable({ rows }: { rows: SupplyRow[] }) {
+  return (
+    <div className="mt-8 overflow-x-auto">
+      <table className="w-full min-w-[860px] border border-[#D8DDE3] text-center">
+        <thead>
+          <tr>
+            <th className="border border-[#D8DDE3] bg-[#14A9D9] px-4 py-5 text-[24px] font-bold text-white">
+              시설명
+            </th>
+            <th className="border border-[#D8DDE3] bg-[#40B5A5] px-4 py-5 text-[24px] font-bold text-white">
+              이용용도
+            </th>
+            <th className="border border-[#D8DDE3] bg-[#73BF4B] px-4 py-5 text-[24px] font-bold text-white">
+              공급량(㎥)
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => (
+            <tr key={`${row.facility}-${index}`}>
+              <td className="border border-[#D8DDE3] bg-white px-4 py-4 text-[22px] text-[#4F4F4F]">
+                {row.facility}
+              </td>
+              <td className="border border-[#D8DDE3] bg-white px-4 py-4 text-[22px] text-[#4F4F4F]">
+                {row.usage}
+              </td>
+              <td className="border border-[#D8DDE3] bg-white px-4 py-4 text-[22px] text-[#4F4F4F]">
+                {row.amount}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function InfoList({
+  projectName,
+  purpose,
+  totalCost,
+  treatment,
+}: {
+  projectName: string;
+  purpose: string;
+  totalCost: string;
+  treatment: string;
+}) {
+  return (
+    <div className="mt-10 space-y-10">
+      <div>
+        <BlockTitle>사업명</BlockTitle>
+        <ul className="mt-4 list-disc pl-8 text-[22px] leading-[1.8] text-[#4F4F4F]">
+          <li>{projectName}</li>
+        </ul>
+      </div>
+
+      <div>
+        <BlockTitle>사업목적</BlockTitle>
+        <ul className="mt-4 list-disc pl-8 text-[22px] leading-[1.8] text-[#4F4F4F]">
+          <li>{purpose}</li>
+        </ul>
+      </div>
+
+      <div>
+        <BlockTitle>사업 주요 내용</BlockTitle>
+        <ul className="mt-4 list-disc pl-8 text-[22px] leading-[1.8] text-[#4F4F4F]">
+          <li>총사업비 : {totalCost}</li>
+          <li>처리공법 : {treatment}</li>
+        </ul>
+      </div>
+
+      <div>
+        <BlockTitle>사업량</BlockTitle>
+      </div>
+    </div>
+  );
+}
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">
+      <SubPageHeader
+        title="중수도 사례"
+        crumbs={[
+          { label: "Home", href: "/reuse" },
+          { label: "물 재이용 사례" },
+          { label: "중수도 사례" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      />
+
+      <Hr className="my-7" />
+
+      {/* 안산시 */}
+      <section id="ansan" className="scroll-mt-[120px]">
+        <SectionTitle>경기도 안산시</SectionTitle>
+
+        <InfoList
+          projectName="안산시 중수도 설치사업"
+          purpose="수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현"
+          totalCost="81억원"
+          treatment="MBR공법"
+        />
+
+        <SupplyTable
+          rows={[
+            {
+              facility: "경기테크노파크",
+              usage: "청소·화장실용수",
+              amount: "40㎥/일",
+            },
+            {
+              facility: "올림픽수영장",
+              usage: "청소·화장실/세척·살수용수",
+              amount: "35㎥/일",
+            },
+            {
+              facility: "와스타디움",
+              usage: "청소·화장실/조경용수",
+              amount: "90㎥/일",
+            },
+            {
+              facility: "호수실내수영장",
+              usage: "청소·화장실/조경/세척·살수용수",
+              amount: "50㎥/일",
+            },
+            {
+              facility: "한양대학교 에리카캠퍼스",
+              usage: "청소·화장실용수",
+              amount: "370㎥/일",
+            },
+          ]}
+        />
+      </section>
+
+      <Hr className="my-20" />
+
+      {/* 용인시 */}
+      <section id="yongin" className="scroll-mt-[120px]">
+        <SectionTitle>경기도 용인시</SectionTitle>
+
+        <InfoList
+          projectName="용인시 중수도 설치사업"
+          purpose="물 부족 등의 비상상황에 대한 대비, 하수라도 사용할 집결 등 수자원의 효율적 활용"
+          totalCost="40억원"
+          treatment="MBR공법"
+        />
+
+        <SupplyTable
+          rows={[
+            {
+              facility: "여성회관",
+              usage: "청소·화장실용수",
+              amount: "35㎥/일",
+            },
+            {
+              facility: "수지아르피아",
+              usage: "청소·화장실용수",
+              amount: "35㎥/일",
+            },
+            {
+              facility: "지상작전사령부",
+              usage: "청소·화장실/조경/세척·살수용수",
+              amount: "53㎥/일",
+            },
+          ]}
+        />
+      </section>
+
+      <Hr className="my-20" />
+
+      {/* 평택시 */}
+      <section id="pyeongtaek" className="scroll-mt-[120px] pb-[200px]">
+        <SectionTitle>경기도 평택시</SectionTitle>
+
+        <InfoList
+          projectName="평택시 중수도 설치사업"
+          purpose="수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현"
+          totalCost="21억원"
+          treatment="MBR공법"
+        />
+
+        <SupplyTable
+          rows={[
+            {
+              facility: "평택대학교",
+              usage: "청소·화장실용수",
+              amount: "50㎥/일",
+            },
+          ]}
+        />
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/example/layout.tsx b/apps/dm/app/(with-layout)/example/layout.tsx
new file mode 100644
index 000000000..7e6db8f54
--- /dev/null
+++ b/apps/dm/app/(with-layout)/example/layout.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Lnb from "@/components/Lnb";
+// import BusinessSubNav from "@/components/BusinessSubNav";
+
+export default function ExampleLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="relative">
+      <Lnb />
+      <div className="flex max-w-[1400px] gap-[56px] py-[50px]">
+        <main className="min-w-0 flex-1">
+          {children}
+        </main>
+
+        {/* 우측 메뉴 영역 */}
+        {/* <BusinessSubNav /> */}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/example/page.tsx b/apps/dm/app/(with-layout)/example/page.tsx
new file mode 100644
index 000000000..0bcd8f1de
--- /dev/null
+++ b/apps/dm/app/(with-layout)/example/page.tsx
@@ -0,0 +1,91 @@
+/**
+ * 물 재이용 사례
+ */
+export const dynamic = "force-dynamic";
+import SubPageHeader from "@/components/SubPageHeader";
+import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav";
+
+import ExampleSection from "./exampleSection";
+// import RainExampleSection from "./_components/RainExampleSection";
+// import GreywaterExampleSection from "./_components/GreywaterExampleSection";
+// import SewageExampleSection from "./_components/SewageExampleSection";
+// import GlobalCaseSection from "./_components/GlobalCaseSection";
+
+const menus: BusinessSubNavMenu[] = [
+  {
+    key: "example-rain",
+    label: "빗물이용시설 사례",
+    sections: [
+      { id: "example-rain-suwon", label: "경기도 수원시" },
+      { id: "example-rain-jeju", label: "제주특별자치도" },
+    ],
+  },
+  {
+    key: "example-greywater",
+    label: "중수도 사례",
+    defaultOpen: false,
+    sections: [
+      { id: "example-greywater-ansan", label: "경기도 안산시" },
+      { id: "example-greywater-yongin", label: "경기도 용인시" },
+      { id: "example-greywater-pyeongtaek", label: "경기도 평택시" },
+    ],
+  },
+  {
+    key: "example-sewage",
+    label: "하수처리수 재이용 사례",
+    defaultOpen: false,
+    sections: [
+      { id: "example-sewage-guri", label: "경기도 구리시" },
+      { id: "example-sewage-bucheon", label: "경기도 부천시" },
+      { id: "example-sewage-suwon", label: "경기도 수원시" },
+      { id: "example-sewage-paju", label: "경기도 파주시" },
+      { id: "example-sewage-pohang", label: "경기도 포항시" },
+      { id: "example-sewage-ulsan", label: "울산광역시" },
+      { id: "example-sewage-yeosu", label: "전라남도 여수시" },
+      { id: "example-sewage-boryeong", label: "충청남도 보령시" },
+      { id: "example-sewage-asan", label: "충청남도 아산시" },
+    ],
+  },
+  {
+    key: "example-global",
+    label: "해외 재이용 사례",
+    defaultOpen: false,
+    sections: [
+      { id: "example-global-overview", label: "사례 개요" },
+      { id: "example-global-taiwan", label: "대만" },
+      { id: "example-global-singapore", label: "싱가포르" },
+      { id: "example-global-australia", label: "호주" },
+      { id: "example-global-eu", label: "EU" },
+    ],
+  },
+];
+
+// function Hr({ className = "" }: { className?: string }) {
+//   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+// }
+
+export default function ExamplePage() {
+  return (
+    <div className="relative">
+      {/* 상단 헤더 */}
+      <SubPageHeader
+        title="물 재이용 사례"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 사례" },
+        ]}
+      />
+
+      {/* 우측 앵커 네비 */}  
+      <BusinessSubNav menus={menus} offsetTop={120} />
+
+      <div className="max-w-[1320px] pb-24">
+        <ExampleSection />
+        {/* <RainExampleSection />
+        <GreywaterExampleSection />
+        <SewageExampleSection />
+        <GlobalCaseSection /> */}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dm/app/(with-layout)/example/rain/page.tsx b/apps/dm/app/(with-layout)/example/rain/page.tsx
new file mode 100644
index 000000000..4bca21e81
--- /dev/null
+++ b/apps/dm/app/(with-layout)/example/rain/page.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import SubPageHeader from "@/components/SubPageHeader";
+import CaseImageSlider from "@/components/ImageSlider";
+import BusinessSubNav from "@/components/BusinessSubNav";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+export default function RainPage() {
+  return (
+    <div className="relative bg-white">
+      {/* ✅ 추가 */}
+      <BusinessSubNav />
+
+      <SubPageHeader
+        title="빗물이용시설 사례"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 사례", href: "/example/rain" },
+          { label: "빗물이용시설 사례" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      />
+
+      <Hr className="my-7" />
+
+      <section id="suwon" className="scroll-mt-[120px]">
+        <SectionTitle>경기도 수원시</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[760px]"
+          slides={[
+            { src: "/images/landing/business/rain/rain_01.png", alt: "수원시 사례 1" },
+            { src: "/images/landing/business/rain/rain_02.png", alt: "수원시 사례 2" },
+          ]}
+        />
+      </section>
+
+      <Hr className="my-16" />
+
+      <section id="jeju" className="scroll-mt-[120px] pb-[120px]">
+        <SectionTitle>제주특별자치도</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[760px]"
+          slides={[
+            { src: "/images/landing/business/rain/jeju_01.png", alt: "제주 사례 1" },
+            { src: "/images/landing/business/rain/jeju_02.png", alt: "제주 사례 2" },
+          ]}
+        />
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/example/sewage/page.tsx b/apps/dm/app/(with-layout)/example/sewage/page.tsx
new file mode 100644
index 000000000..13dded59d
--- /dev/null
+++ b/apps/dm/app/(with-layout)/example/sewage/page.tsx
@@ -0,0 +1,477 @@
+"use client";
+
+import SubPageHeader from "@/components/SubPageHeader";
+import CaseImageSlider from "@/components/CaseImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+export default function SewagePage() {
+  return (
+    <div className="bg-white">
+      <SubPageHeader
+        title="하수 재이용 사례"
+        crumbs={[
+          { label: "Home", href: "/reuse" },
+          { label: "물 재이용 사례" },
+          { label: "하수 재이용 사례" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      />
+
+      <Hr className="my-7" />
+
+      {/* 보령 */}
+      <section id="bolyeong" className="scroll-mt-[120px]">
+        <SectionTitle>충청남도 보령시</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[760px]"
+          slides={[
+            {
+              src: "/images/landing/business/sewage/bolyeong_01.png",
+              alt: "보령시 하수 재이용 1",
+            },
+          ]}
+        />
+
+        <section className="mt-6">
+          <SectionTitle>사업명</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            충남 보령 하수재이용
+            <br />: 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해
+            보령하수처리시설의 하수처리수 재이용 사업 추진
+          </p>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section className="mt-6">
+          <SectionTitle>사업 방식</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결
+          </p>
+        </section>
+
+        <section className="mt-6">
+          <SectionTitle>사업 주요 내용</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            처리공정 : 전처리 UF + 후처리 RO
+            <br />
+            시설용량 : 1만m³/일
+            <br />
+            관로 : 8.7km
+            <br />
+            사업비 : 315억원
+            <br />
+            위치: 충청남도 보령시 대청방조제로 322 일원
+          </p>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section>
+          <SectionTitle>특이사항</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권
+            가뭄 시 지역사회 기여 차원에서 기관간 MOU(환경부, 충청남도, 보령시,
+            한국중부발전㈜)를 바탕으로 추진 되어 경제성보다 공익성을 바탕으로
+            <br />
+            국가전력 기반시설의 안정적 운영 도모
+          </p>
+        </section>
+      </section>
+
+      <Hr className="my-16" />
+
+      {/* 청주 */}
+      <section id="cheongju" className="scroll-mt-[120px]">
+        <SectionTitle>청주시</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[760px]"
+          slides={[
+            {
+              src: "/images/landing/business/sewage/cheongju_01.png",
+              alt: "청주시 하수 재이용 1",
+            },
+          ]}
+        />
+
+        <section className="mt-6">
+          <SectionTitle>사업명</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            청주시 하수 재이용 시설
+          </p>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section>
+          <SectionTitle>사업 주요 내용</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            청주시 하수처리수 재이용 민간투자사업(BTO)
+            <br />
+            공급량 : 35,000㎥/일
+            <br />
+            공급관로 : 8.3㎞
+            <br />
+            사업비 : 622억원
+            <br />
+            수요처 : SK하이닉스 등 일반산업단지
+            <br />
+            지역 (위치) : 충청북도 청주시 흥덕구 가락리 135-9번지 일원
+            <br />
+            처리용량 : 35.000(m³/일)
+            <br />
+            적용기술 : 분리막 (UF : 전처리), (RO : 주처리)
+          </p>
+        </section>
+      </section>
+
+      <Hr className="my-16" />
+
+      {/* 구리 */}
+      <section id="guri" className="scroll-mt-[120px]">
+        <SectionTitle>구리시 도로자동청소시스템</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[760px]"
+          slides={[
+            {
+              src: "/images/landing/business/sewage/guri_01.png",
+              alt: "구리시 도로자동청소시스템 1",
+            },
+            {
+              src: "/images/landing/business/sewage/guri_02.png",
+              alt: "구리시 도로자동청소시스템 2",
+            },
+          ]}
+        />
+
+        <section className="mt-6">
+          <SectionTitle>사업명</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            구리시 도로자동청소시스템 설치사업
+          </p>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section className="mt-6">
+          <SectionTitle>사업목적</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생
+            재이용수 일부를 도로자동청소시스템에 활용하여 미세먼지 저감 및 폭염
+            취약성 완화
+          </p>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section className="mt-6">
+          <SectionTitle>사업 주요 내용</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            총사업비 : 61억원
+            <br />
+            위 치 : 구리시 경춘로 및 갈매중앙로 일대 등
+            <br />
+            관 로 : 5.8km
+            <br />
+            공급계획
+          </p>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section>
+          <SectionTitle>공급계획</SectionTitle>
+          <div className="mt-8 overflow-x-auto">
+            <table className="w-full border border-[#E3E7EA] text-center">
+              <thead>
+                <tr>
+                  <th className="border border-gray-300 bg-[#01ACE5] py-4 font-semibold text-white">
+                    시설명
+                  </th>
+                  <th className="border border-gray-300 bg-[#33B5C8] py-4 font-semibold text-white">
+                    재이용수 용도
+                  </th>
+                  <th className="border border-gray-300 bg-[#55BCA2] py-4 font-semibold text-white">
+                    공급량(㎥/일)
+                  </th>
+                  <th className="border border-gray-300 bg-[#6DBB4F] py-4 font-semibold text-white">
+                    원수
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td className="border border-gray-300 bg-white py-6 text-gray-700">
+                    도로자동청소시스템
+                  </td>
+                  <td className="border border-gray-300 bg-white py-6 text-gray-700">
+                    세척살수용수
+                  </td>
+                  <td className="border border-gray-300 bg-white py-6 text-gray-700">
+                    178
+                  </td>
+                  <td className="border border-gray-300 bg-white py-6 text-gray-700">
+                    구리 공공하수처리장 재이용수
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </section>
+
+      <Hr className="my-16" />
+
+      {/* 황구지천 */}
+      <section id="hwanggu" className="scroll-mt-[120px]">
+        <SectionTitle>수원시 황구지천</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[760px]"
+          slides={[
+            {
+              src: "/images/landing/business/sewage/hwanggu_01.png",
+              alt: "수원시 황구지천 하수 재이용 1",
+            },
+            {
+              src: "/images/landing/business/sewage/hwanggu_02.png",
+              alt: "수원시 황구지천 하수 재이용 2",
+            },
+            {
+              src: "/images/landing/business/sewage/hwanggu_03.png",
+              alt: "수원시 황구지천 하수 재이용 3",
+            },
+          ]}
+        />
+
+        <section className="mt-6">
+          <SectionTitle>사업명</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            수원시 황수원시 황구지천 하수처리수 재이용사업
+          </p>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section className="mt-6">
+          <SectionTitle>사업목적</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            황구지천 공공하수처리시설 하수처리수 재이용사업으로 향후 호매실천 및
+            금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전
+          </p>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section className="mt-6">
+          <SectionTitle>사업 주요 내용</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            총사업비 : 110억원
+            <br />
+            위 치 : 수원시 권선구 호매실천, 금곡천
+            <br />
+            관 로 : 3.9km
+            <br />
+            공 급 량 : 25,000㎥/일(하수처리시설 용량: 45,000㎥/일)
+            <br />
+          </p>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section>
+          <SectionTitle>공급계획</SectionTitle>
+          <div className="mt-8 overflow-x-auto">
+            <table className="w-full border border-[#E3E7EA] text-center">
+              <thead>
+                <tr>
+                  <th className="w-1/4 border border-gray-300 bg-[#E3E7EA] py-4 font-semibold text-black">
+                    구분
+                  </th>
+                  <th className="w-2/4 border border-gray-300 bg-[#1FA3C6] py-4 font-semibold text-white">
+                    공급량
+                  </th>
+                  <th className="w-2/4 border border-gray-300 bg-[#72B84F] py-4 font-semibold text-white">
+                    비고
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td
+                    rowSpan={3}
+                    className="border border-gray-300 bg-white font-medium text-gray-700"
+                  >
+                    하천 등 유지용수
+                  </td>
+                  <td className="border border-gray-300 bg-white py-6 text-lg font-medium text-gray-700">
+                    12,500m³/일
+                  </td>
+                  <td className="border border-gray-300 bg-white py-6 text-gray-700">
+                    호매실천 공급
+                  </td>
+                </tr>
+                <tr>
+                  <td className="border border-gray-300 bg-white py-6 text-lg font-medium text-gray-700">
+                    6,250m³/일
+                  </td>
+                  <td className="border border-gray-300 bg-white py-6 text-gray-700">
+                    금곡천1 공급
+                  </td>
+                </tr>
+                <tr>
+                  <td className="border border-gray-300 bg-white py-6 text-lg font-medium text-gray-700">
+                    6,250m³/일
+                  </td>
+                  <td className="border border-gray-300 bg-white py-6 text-gray-700">
+                    금곡천2 공급
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </section>
+
+      <Hr className="my-16" />
+
+      {/* 파주 */}
+      <section id="paju" className="scroll-mt-[120px]">
+        <SectionTitle>파주시</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[760px]"
+          slides={[
+            {
+              src: "/images/landing/business/sewage/paju_01.png",
+              alt: "파주시 하수 재이용 1",
+            },
+          ]}
+        />
+
+        <section className="mt-6">
+          <SectionTitle>사업명</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            경기도 파주시 하수재이용
+            <br />: 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로
+            재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급
+            <br />
+            *LG디스플레이(P10공장), 희성전자, 엔비텍 등
+          </p>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section className="mt-6">
+          <SectionTitle>사업 배경 및 목적</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)
+          </p>
+        </section>
+
+        <section className="mt-6">
+          <SectionTitle>사업 주요 내용</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            처리공정 : 전처리 UF + 후처리 RO
+            <br />
+            공급량 : 4만m³/일
+            <br />
+            관로 : 13.6km
+            <br />
+            사업비 : 651억원
+            <br />
+            위치 : 경기도 파주시 금촌동 714번지 일원
+            <br />
+            시설용량 : 41,20m³/일
+          </p>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section>
+          <SectionTitle>특이사항</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례
+          </p>
+        </section>
+      </section>
+
+      <Hr className="my-16" />
+
+      {/* 여수 */}
+      <section id="yeosu" className="scroll-mt-[120px] pb-[200px]">
+        <SectionTitle>여수시</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[760px]"
+          slides={[
+            {
+              src: "/images/landing/business/sewage/yeosu_01.png",
+              alt: "여수시 하수 재이용 1",
+            },
+          ]}
+        />
+
+        <section className="mt-6">
+          <SectionTitle>사업명</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            여수시 하수처리수 재이용 민간 투자사업(BTO)
+          </p>
+        </section>
+
+        <Hr className="my-11" />
+
+        <section className="mt-6">
+          <SectionTitle>사업 목적</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            수요자가 원하는 양질의 공업용수를 저렴하게 곰급하여 한정된
+            수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한
+            오염총량 저감 및 방류수역 수질개선
+          </p>
+        </section>
+
+        <section className="mt-6">
+          <SectionTitle>사업 주요 내용</SectionTitle>
+          <p className="mt-8 text-base text-gray-600">
+            총사업비 : GS칼텍스, YNCC(주) 등 750억원
+            <br />
+            시행사 : 여수그린허브(주)
+            <br />
+            운영사 : 테크로스
+            <br />
+            위치: 여수시 신월로 2844일원 (여수 하수처리시설 부지 내)
+            <br />
+            처리공법 : 전처리시설(MF) + 주처리시설(RO)
+            <br />
+            시설용량 및 공급량 : 5만m³/일
+            <br />
+            관로 : 18.6km
+          </p>
+        </section>
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx b/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx
new file mode 100644
index 000000000..0ca6ccf69
--- /dev/null
+++ b/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+export default function LawIntroSection() {
+  const contentsHtml = `
+    <div class="contents-page">
+      <div class="page-title">
+        <h2>
+          <span class="title-text">물재이용법</span>
+          <span class="title-bg">&nbsp;</span>
+        </h2>
+      </div>
+
+      <div class="sections">
+        <section id="law-plan" class="section first">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>법률 제·개정 및 기본계획 수립</h3>
+          </div>
+          <div class="image-wrap">
+            <img src="/images/landing/intro/law_timeline.png" alt="법률 제·개정 및 기본계획 수립" />
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="plan-performance" class="section">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>제2차 계획 대비 실적 현황</h3>
+          </div>
+          <div class="image-wrap">
+            <img src="/images/landing/intro/performance_left.png" alt="제2차 계획 대비 실적 현황" />
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="domestic-change" class="section">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>우리나라의 수자원 현황 및 물이용 여건</h3>
+          </div>
+          <div class="image-wrap">
+            <img src="/images/landing/intro/domestic_textbox.png" alt="우리나라의 수자원 현황 및 물이용 여건" />
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="policy-history" class="section">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>물 재이용 정책 변화 추이</h3>
+          </div>
+          <div class="image-wrap">
+            <img src="/images/landing/intro/policy_timeline.png" alt="물 재이용 정책 변화 추이" />
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="law-relation" class="section">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>타법령과의 관계 검토</h3>
+          </div>
+          <div class="image-wrap">
+            <img src="/images/landing/intro/rel_note.png" alt="타법령과의 관계 검토" />
+          </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <section id="domestic-linkage" class="section">
+          <div class="section-title">
+            <span class="section-bar">&nbsp;</span>
+            <h3>주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</h3>
+          </div>
+          <div class="image-wrap">
+            <img src="/images/landing/intro/linkage.png" alt="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" />
+          </div>
+        </section>
+      </div>
+    </div>
+  `;
+
+  return (
+    <div
+      className="bg-white"
+      dangerouslySetInnerHTML={{ __html: contentsHtml }}
+    />
+  );
+}
diff --git a/apps/dm/app/(with-layout)/intro/_components/RainIntroSection.tsx b/apps/dm/app/(with-layout)/intro/_components/RainIntroSection.tsx
new file mode 100644
index 000000000..bbf1b141a
--- /dev/null
+++ b/apps/dm/app/(with-layout)/intro/_components/RainIntroSection.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import React from "react";
+import Image, { type StaticImageData } from "next/image";
+
+import rainSummary from "@/public/images/landing/intro/rainreuse_intro.png";
+import rainDuty from "@/public/images/landing/intro/rainreuse_mandatory.png";
+import rainDesign from "@/public/images/landing/intro/rainwater_design.png";
+import rainStandard from "@/public/images/landing/intro/rainwater_standards.png";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[120px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function RainIntroSection() {
+  const title = "빗물이용시설";
+
+  return (
+    <div className="mt-[120px] bg-white">
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
+          <span className="relative z-10">{title}</span>
+          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <SectionShell id="rain-intro" title="빗물 재이용 소개" className="mt-10">
+          <ImgCard src={rainSummary} alt="빗물 재이용 소개" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="rain-mandatory"
+          title="빗물이용시설 설치 관리 법적 의무 대상"
+        >
+          <ImgCard src={rainDuty} alt="빗물이용시설 설치 관리 법적 의무 대상" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell id="rain-design" title="빗물이용시설 설계 방안">
+          <ImgCard src={rainDesign} alt="빗물이용시설 설계 방안" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="rain-standards"
+          title="빗물이용시설 시설기준 및 관리기준"
+        >
+          <ImgCard src={rainStandard} alt="빗물이용시설 시설기준 및 관리기준" />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/intro/_components/ReuseWaterIntroSection.tsx b/apps/dm/app/(with-layout)/intro/_components/ReuseWaterIntroSection.tsx
new file mode 100644
index 000000000..03b01e398
--- /dev/null
+++ b/apps/dm/app/(with-layout)/intro/_components/ReuseWaterIntroSection.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import React from "react";
+import Image, { type StaticImageData } from "next/image";
+
+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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[120px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function ReuseWaterIntroSection() {
+  const title = "중수도";
+
+  return (
+    <div className="mt-[120px] bg-white">
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
+          <span className="relative z-10">{title}</span>
+          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <SectionShell
+          id="greywater-intro"
+          title="중수 재이용 소개"
+          className="mt-10"
+        >
+          <ImgCard src={greywaterIntro} alt="중수 재이용 소개" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="greywater-mandatory"
+          title="중수도 설치 의무 대상"
+        >
+          <ImgCard src={greywaterMandatory} alt="중수도 설치 의무 대상" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="greywater-standard"
+          title="중수도 시설기준 및 관리기준"
+        >
+          <ImgCard src={greywaterStandard} alt="중수도 시설기준 및 관리기준" />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/intro/_components/TreatedIntroSection.tsx b/apps/dm/app/(with-layout)/intro/_components/TreatedIntroSection.tsx
new file mode 100644
index 000000000..19debe88f
--- /dev/null
+++ b/apps/dm/app/(with-layout)/intro/_components/TreatedIntroSection.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import React from "react";
+import Image, { type StaticImageData } from "next/image";
+
+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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[120px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function TreatedIntroSection() {
+  const title = "하수처리수 재이용";
+
+  return (
+    <div className="mt-[120px] bg-white">
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
+          <span className="relative z-10">{title}</span>
+          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <SectionShell
+          id="treatedwater-intro"
+          title="하수처리수 소개"
+          className="mt-10"
+        >
+          <ImgCard src={treatedwaterIntro} alt="하수처리수" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="treatedwater-mandatory"
+          title="하수처리수 재이용시설 의무 대상"
+        >
+          <ImgCard
+            src={treatedwaterMandatory}
+            alt="하수처리수 재이용시설 의무 대상"
+          />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/intro/introSection.tsx b/apps/dm/app/(with-layout)/intro/introSection.tsx
new file mode 100644
index 000000000..fd958073e
--- /dev/null
+++ b/apps/dm/app/(with-layout)/intro/introSection.tsx
@@ -0,0 +1,232 @@
+import { ContentsPage } from "@/components/ui/contents";
+
+export default function IntroSection() {
+  // const contentsHtml = `
+  //   <div class="contents-page">
+  //     <div class="page-title">
+  //       <h2>
+  //         <span class="title-text">물재이용법</span>
+  //         <span class="title-bg">&nbsp;</span>
+  //       </h2>
+  //     </div>
+
+  //     <div class="sections">
+  //       <section id="law-plan" class="section first">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>법률 제·개정 및 기본계획 수립</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/law_timeline.png" alt="법률 제·개정 및 기본계획 수립" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="plan-performance" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>제2차 계획 대비 실적 현황</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/performance_left.png" alt="제2차 계획 대비 실적 현황" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="domestic-change" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>우리나라의 수자원 현황 및 물이용 여건</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/domestic_textbox.png" alt="우리나라의 수자원 현황 및 물이용 여건" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="policy-history" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>물 재이용 정책 변화 추이</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/policy_timeline.png" alt="물 재이용 정책 변화 추이" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="law-relation" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>타법령과의 관계 검토</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/rel_note.png" alt="타법령과의 관계 검토" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="domestic-linkage" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/linkage.png" alt="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" />
+  //         </div>
+  //       </section>
+  //     </div>
+  //   </div>
+
+  //   <div class="contents-page" style="margin-top:120px;">
+  //     <div class="page-title">
+  //       <h2>
+  //         <span class="title-text">빗물이용시설</span>
+  //         <span class="title-bg">&nbsp;</span>
+  //       </h2>
+  //     </div>
+
+  //     <div class="sections">
+  //       <section id="rain-intro" class="section first">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>빗물 재이용 소개</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/rainreuse_intro.png" alt="빗물 재이용 소개" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="rain-mandatory" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>빗물이용시설 설치 관리 법적 의무 대상</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/rainreuse_mandatory.png" alt="빗물이용시설 설치 관리 법적 의무 대상" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="rain-design" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>빗물이용시설 설계 방안</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/rainwater_design.png" alt="빗물이용시설 설계 방안" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="rain-standards" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>빗물이용시설 시설기준 및 관리기준</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/rainwater_standards.png" alt="빗물이용시설 시설기준 및 관리기준" />
+  //         </div>
+  //       </section>
+  //     </div>
+  //   </div>
+
+  //   <div class="contents-page" style="margin-top:120px;">
+  //     <div class="page-title">
+  //       <h2>
+  //         <span class="title-text">중수도</span>
+  //         <span class="title-bg">&nbsp;</span>
+  //       </h2>
+  //     </div>
+
+  //     <div class="sections">
+  //       <section id="greywater-intro" class="section first">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>중수 재이용 소개</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/greywater_intro.png" alt="중수 재이용 소개" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="greywater-mandatory" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>중수도 설치 의무 대상</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/greywater_mandatory.png" alt="중수도 설치 의무 대상" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="greywater-standard" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>중수도 시설기준 및 관리기준</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/greywater_standard.png" alt="중수도 시설기준 및 관리기준" />
+  //         </div>
+  //       </section>
+  //     </div>
+  //   </div>
+
+  //   <div class="contents-page" style="margin-top:120px;">
+  //     <div class="page-title">
+  //       <h2>
+  //         <span class="title-text">하수처리수 재이용</span>
+  //         <span class="title-bg">&nbsp;</span>
+  //       </h2>
+  //     </div>
+
+  //     <div class="sections">
+  //       <section id="treatedwater-intro" class="section first">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>하수처리수 소개</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/treatedwater_intro.png" alt="하수처리수" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="treatedwater-mandatory" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar">&nbsp;</span>
+  //           <h3>하수처리수 재이용시설 의무 대상</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/treatedwater_mandatory.png" alt="하수처리수 재이용시설 의무 대상" />
+  //         </div>
+  //       </section>
+  //     </div>
+  //   </div>
+  // `;
+
+  const contsSn = Number(process.env.CONTENTS_INTRO ?? 31);
+  const menuCd = "24";
+
+  return <ContentsPage contsSn={contsSn} menuCd={menuCd} />;
+  // return (
+  //   <div
+  //     className="bg-white"
+  //     dangerouslySetInnerHTML={{ __html: contentsHtml }}
+  //   />
+  // );
+}
diff --git a/apps/dm/app/(with-layout)/intro/law/page.tsx b/apps/dm/app/(with-layout)/intro/law/page.tsx
new file mode 100644
index 000000000..63f504af4
--- /dev/null
+++ b/apps/dm/app/(with-layout)/intro/law/page.tsx
@@ -0,0 +1,163 @@
+// DM 물 재이용 소개(물 재이용 법) 페이지
+"use client";
+
+import Image, { type StaticImageData } from "next/image";
+import SubPageHeader from "@/components/SubPageHeader";
+// import BusinessSubNav from "@/components/BusinessSubNav";
+
+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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+type ImgCardProps = {
+  src: StaticImageData;
+  alt: string;
+};
+
+function ImgCard({ src, alt }: ImgCardProps) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+        priority={false}
+      />
+    </div>
+  );
+}
+
+type SectionShellProps = {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+function SectionShell({ id, title, children, className = "" }: SectionShellProps) {
+  return (
+    <section
+      id={id}
+      className={[
+        "scroll-mt-[140px]",
+        className,
+      ].join(" ")}
+    >
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function WaterReuseLawPage() {
+  return (
+    <div className="relative bg-white">
+      {/* <BusinessSubNav /> */}
+
+      <SubPageHeader
+        title="물 재이용 법"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 소개", href: "/intro/law" },
+          { label: "물 재이용 법" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      />
+
+      <div className="pr-0">
+        <Hr className="my-7" />
+
+        <SectionShell
+          id="law-plan"
+          title="법률 제·개정 및 기본계획 수립"
+          className="mt-6"
+        >
+          <ImgCard src={lawTimeline} alt="법률 제·개정 및 기본계획 수립" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="plan-performance"
+          title="제2차 계획 대비 실적 현황"
+        >
+          <ImgCard src={performanceLeft} alt="제2차 계획 대비 실적 현황" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="domestic-change"
+          title="국내 여건 변화"
+        >
+          <ImgCard src={domesticTextbox} alt="국내 여건 변화" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="policy-history"
+          title="물 재이용 정책 변화 추이"
+        >
+          <ImgCard src={policyTimeline} alt="물 재이용 정책 변화 추이" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="law-relation"
+          title="타법령과의 관계 검토"
+        >
+          <ImgCard src={relNote} alt="타법령과의 관계 검토" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="domestic-linkage"
+          title="국내 연계 현황"
+          className="pb-[250px]"
+        >
+          <div className="mx-[20px] mb-8">
+            <p className="mb-2 text-[24px] font-semibold">
+              주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요
+            </p>
+            <p className="text-[#4F4F4F]">
+              국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한
+              물 재이용 활성화로 정책 실효성 제고 필요
+              <br />
+              • 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획,
+              하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서
+              물이용 체계 구축 필요
+            </p>
+          </div>
+
+          <ImgCard src={linkage} alt="국내 연계 현황" />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/intro/layout.tsx b/apps/dm/app/(with-layout)/intro/layout.tsx
new file mode 100644
index 000000000..6ce4ebbe3
--- /dev/null
+++ b/apps/dm/app/(with-layout)/intro/layout.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Lnb from "@/components/Lnb";
+
+export default function ExampleLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="relative">
+      <Lnb />
+      <div className="flex max-w-[1400px] gap-[56px] py-[50px]">
+        <main className="min-w-0 flex-1">
+          {children}
+        </main>
+
+        {/* 우측 메뉴 영역 */}
+        {/* <BusinessSubNav /> */}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/intro/page.tsx b/apps/dm/app/(with-layout)/intro/page.tsx
new file mode 100644
index 000000000..eb67e7a7e
--- /dev/null
+++ b/apps/dm/app/(with-layout)/intro/page.tsx
@@ -0,0 +1,82 @@
+export const dynamic = "force-dynamic";
+
+// DM 물 재이용 소개 페이지
+import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav";
+import SubPageHeader from "@/components/SubPageHeader";
+import IntroSection from "./introSection";
+
+const menus: BusinessSubNavMenu[] = [
+  {
+    key: "intro-law",
+    label: "물재이용법",
+    sections: [
+      { id: "law-plan", label: "법률 제·개정 및 기본계획 수립" },
+      { id: "plan-performance", label: "제2차 계획 대비 실적 현황" },
+      { id: "domestic-change", label: "우리나라의 수자원 현황 및 물이용 여건" },
+      { id: "policy-history", label: "물 재이용 정책 변화 추이" },
+      { id: "law-relation", label: "타법령과의 관계 검토" },
+      { id: "domestic-linkage", label: "주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" },
+    ],
+  },
+  {
+    key: "intro-rain",
+    label: "빗물이용시설",
+    defaultOpen: false,
+    sections: [
+      { id: "rain-intro", label: "빗물 재이용 소개" },
+      {
+        id: "rain-mandatory",
+        label: "빗물이용시설 설치 관리 법적 의무 대상",
+      },
+      { id: "rain-design", label: "빗물이용시설 설계 방안" },
+      {
+        id: "rain-standards",
+        label: "빗물이용시설 시설기준 및 관리기준",
+      },
+    ],
+  },
+  {
+    key: "intro-greywater",
+    label: "중수도",
+    defaultOpen: false,
+    sections: [
+      { id: "greywater-intro", label: "중수 재이용 소개" },
+      { id: "greywater-mandatory", label: "중수도 설치 의무 대상" },
+      { id: "greywater-standard", label: "중수도 시설기준 및 관리기준" },
+    ],
+  },
+  {
+    key: "intro-treated",
+    label: "하수처리수 재이용",
+    defaultOpen: false,
+    sections: [
+      { id: "treatedwater-intro", label: "하수처리수 소개" },
+      {
+        id: "treatedwater-mandatory",
+        label: "하수처리수 재이용시설 의무 대상",
+      },
+    ],
+  },
+];
+
+export default function IntroPage() {
+  return (
+    <div className="relative">
+      {/* 상단 헤더 */}
+      <SubPageHeader
+        title="물 재이용 소개"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 소개", href: "/intro" },
+        ]}
+      />
+      {/* 우측 앵커 네비 */}
+      <BusinessSubNav menus={menus} offsetTop={120} />
+
+      {/* 본문 */}
+      <div className="max-w-[1320px] pb-24">
+        <IntroSection />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dm/app/(with-layout)/intro/rain/page.tsx b/apps/dm/app/(with-layout)/intro/rain/page.tsx
new file mode 100644
index 000000000..bbcf708e1
--- /dev/null
+++ b/apps/dm/app/(with-layout)/intro/rain/page.tsx
@@ -0,0 +1,139 @@
+// DM 물 재이용 소개(빗물 이용시설) 페이지
+"use client";
+
+import Image, { type StaticImageData } from "next/image";
+import SubPageHeader from "@/components/SubPageHeader";
+import BusinessSubNav from "@/components/BusinessSubNav";
+
+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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+type ImgCardProps = {
+  src: StaticImageData;
+  alt: string;
+};
+
+function ImgCard({ src, alt }: ImgCardProps) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+type SectionShellProps = {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: SectionShellProps) {
+  return (
+    <section
+      id={id}
+      className={["scroll-mt-[140px]", className].join(" ")}
+    >
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function RainwaterReusePage() {
+  return (
+    <div className="relative bg-white">
+      <BusinessSubNav />
+
+      <SubPageHeader
+        title="빗물 이용시설"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 소개", href: "/intro/law" },
+          { label: "빗물 이용시설" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      />
+
+      <div className="pr-0">
+        <Hr className="my-7" />
+
+        <SectionShell
+          id="rain-intro"
+          title="빗물 재이용 소개"
+          className="mt-6"
+        >
+          <ImgCard src={rainreuseIntro} alt="빗물 재이용 소개" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="rain-mandatory"
+          title="빗물이용시설 설치 관리 법적 의무 대상"
+        >
+          <ImgCard
+            src={rainreuseMandatory}
+            alt="빗물이용시설 설치 관리 법적 의무 대상"
+          />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="rain-design"
+          title="빗물이용시설 설계 방안"
+        >
+          <ImgCard
+            src={rainwaterDesign}
+            alt="빗물이용시설 설계 방안"
+          />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="rain-standards"
+          title="빗물이용시설 시설기준 및 관리기준"
+          className="pb-[200px]"
+        >
+          <ImgCard
+            src={rainwaterStandards}
+            alt="빗물이용시설 시설기준 및 관리기준"
+          />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/intro/reuseWater/page.tsx b/apps/dm/app/(with-layout)/intro/reuseWater/page.tsx
new file mode 100644
index 000000000..b7e0c6731
--- /dev/null
+++ b/apps/dm/app/(with-layout)/intro/reuseWater/page.tsx
@@ -0,0 +1,105 @@
+// DM 물 재이용 소개(중수도) 페이지
+"use client";
+import Image, { type StaticImageData } from "next/image";
+import SubPageHeader from "@/components/SubPageHeader";
+import BusinessSubNav from "@/components/BusinessSubNav";
+
+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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[140px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function ReusePage() {
+  return (
+    <div className="relative bg-white">
+      <BusinessSubNav />
+
+      <SubPageHeader
+        title="중수도"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 소개", href: "/intro/law" },
+          { label: "중수도" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      />
+
+      <div className="pr-0">
+        <Hr className="my-7" />
+
+        <SectionShell
+          id="reuse-intro"
+          title="중수 재이용 소개"
+          className="mt-6"
+        >
+          <ImgCard src={greywaterIntro} alt="중수 재이용 소개" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="reuse-mandatory"
+          title="중수도 설치 의무 대상"
+        >
+          <ImgCard src={greywaterMandatory} alt="중수도 설치 의무 대상" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="reuse-standard"
+          title="중수도 시설기준 및 관리기준"
+          className="pb-[200px]"
+        >
+          <ImgCard src={greywaterStandard} alt="중수도 시설기준 및 관리기준" />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/intro/treated/page.tsx b/apps/dm/app/(with-layout)/intro/treated/page.tsx
new file mode 100644
index 000000000..7f4280ff1
--- /dev/null
+++ b/apps/dm/app/(with-layout)/intro/treated/page.tsx
@@ -0,0 +1,98 @@
+// DM 물 재이용 소개(하수처리수) 페이지
+"use client";
+import Image, { type StaticImageData } from "next/image";
+import SubPageHeader from "@/components/SubPageHeader";
+import BusinessSubNav from "@/components/BusinessSubNav";
+
+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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[140px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function TreatedWaterPage() {
+  return (
+    <div className="relative bg-white">
+      <BusinessSubNav />
+
+      <SubPageHeader
+        title="하수처리수"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 소개", href: "/intro/law" },
+          { label: "하수처리수" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      />
+
+      <div className="pr-0">
+        <Hr className="my-7" />
+
+        <SectionShell
+          id="treated-intro"
+          title="하수처리수 개요"
+          className="mt-6"
+        >
+          <ImgCard src={treatedwaterIntro} alt="하수처리수 개요" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="treated-mandatory"
+          title="하수처리수 재이용시설 의무 대상"
+          className="pb-[300px]"
+        >
+          <ImgCard
+            src={treatedwaterMandatory}
+            alt="하수처리수 재이용시설 의무 대상"
+          />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/layout.tsx b/apps/dm/app/(with-layout)/layout.tsx
new file mode 100644
index 000000000..541a1baea
--- /dev/null
+++ b/apps/dm/app/(with-layout)/layout.tsx
@@ -0,0 +1,19 @@
+import "../reuse.module.css";
+import { StoreProvider } from "../store";
+import TopNav from "@/components/TopNav";
+
+export default function WithLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <StoreProvider>
+      <TopNav />
+
+      <div className="pt-[83px] flex">
+
+        {/* 본문 */}
+        <main className="ml-[260px] w-full">
+          {children}
+        </main>
+      </div>
+    </StoreProvider>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx b/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx
new file mode 100644
index 000000000..e1a22e48c
--- /dev/null
+++ b/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx
@@ -0,0 +1,484 @@
+/**
+ * 중수도
+ */
+"use client";
+
+import React from "react";
+import { useEffect } from "react";
+// import SubPageHeader from "@/components/SubPageHeader";
+import Image from "next/image";
+import { useDmStore } from "@/app/store";
+import { formatUsage } from "@/app/common/transValueFormat";
+import type {
+  DmStatusLawYearsType,
+  DmStatusBildTpYearsType,
+  DmStatusUsgYearsType,
+  TableHeaderType,
+} from "@/app/store/dm-status/type";
+import { Col2Name } from "@/app/store/dm-status/type";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function GreywaterIntroSummary() {
+  const items = [
+    {
+      icon: "/images/landing/icon_recycle.png",
+      title: "지속적인 인프라 확산",
+      desc: (
+          <>
+          전국 중수도 설치 시설은 2018년 대비 약 45% 증가하여,
+          <br />
+          현재 1,000여 개소에서 물 재이용이 활발히 이뤄지고 있습니다.)
+          </>
+      ),
+    },
+    {
+      icon: "/images/landing/icon_factory.png",
+      title: "조경용수의 핵심 자원",
+      desc: (
+          <>
+          전체 중수도 이용량의 약 96%가 공업용수로 활용되어,
+          <br />
+          산업 현장에서의 상수도 의존도를 낮추는 데 크게 기여하고 있습니다.
+          </>
+      ),
+    },
+    {
+      icon: "/images/landing/icon_faucet.png",
+      title: "민간·공공의 협력",
+      desc: (
+          <>
+          공업용 외에도 청소·화장실용수로 꾸준히 사용되며
+          <br />
+          우리 생활 곳곳에서 물 자원 낭비를 막고 있습니다.
+          </>
+      ),
+    },
+  ];
+
+  return (
+    <div className="mb-[70px] px-[160px]">
+      <div className="grid grid-cols-[1fr_400px] items-center gap-[60px]">
+        <div>
+          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.06em] text-neutral-900">
+            건물 안에서 흐르는 또 하나의 자원,
+            <br />
+            <span className="inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent">
+              중수도
+            </span>
+            가 물 절약을 실천합니다.
+          </h3>
+
+          <p className="mt-5 text-[16px] leading-[1.8] text-neutral-600">
+            중수도는 개별 건축물이나 단지 내에서 사용한 물을 다시 처리하여
+            <br />
+            청소, 조경, 공업용수로 사용하고 있습니다.
+          </p>
+
+          <div className="mt-10 space-y-8">
+            {items.map((item) => (
+              <div key={item.title} className="flex gap-3 items-center">
+                <div className="mt-1 flex h-12 w-12 shrink-0 items-center justify-center">
+                  <Image src={item.icon} alt="" width={48} height={48} />
+                </div>
+
+                <div>
+                  <strong className="block text-[18px] font-extrabold text-neutral-900">
+                    {item.title}
+                  </strong>
+                  <p className="mt-2 text-[16px] leading-[1.7] tracking-tighter text-neutral-600">
+                    {item.desc}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center">
+          <Image
+            src="/images/landing/greywater_status_img.png"
+            alt="중수도 재이용 개념도"
+            width={400}
+            height={343}
+            className="h-auto w-full max-w-[400px]"
+            priority
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const tableStyles = {
+  container: "w-[1000px] mx-auto overflow-hidden",
+  table: "w-full table-fixed border-collapse text-center text-[16px]",
+  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
+  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
+  headerBg: "bg-[#E3E7EA]",
+};
+
+const headerColors6 = [
+  "bg-[#01ACE5]",
+  "bg-[#17AFC7]",
+  "bg-[#2CB2A9]",
+  "bg-[#42B58B]",
+  "bg-[#57B86D]",
+  "bg-[#81C784]",
+];
+
+export default function GreywaterStatusSection() {
+  const getRswtrByLawYears = useDmStore((state) => state.getRswtrByLawYears);
+  const getRswtrByBildTpYears = useDmStore((state) => state.getRswtrByBildTpYears); 
+  const getRswtrByUsgYears = useDmStore((state) => state.getRswtrByUsgYears); 
+  const rswtrYears = useDmStore((state) => state.rswtr.rswtrYears);
+  const selectYear = rswtrYears.slice(-1)[0];
+  const rswtrByLawYearsHeader = useDmStore((state) => state.rswtr.rswtrByLawYearsHeader);
+  const rswtrByLawYears = useDmStore((state) => state.rswtr.rswtrByLawYears); // 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)
+  const rswtrByLawYearsFactory = useDmStore((state) => state.rswtr.rswtrByLawYearsFactory); // 공장 및 발전시설 내 중수도 설치 현황
+  const rswtrByBildTpYearsHeader = useDmStore((state) => state.rswtr.rswtrByBildTpYearsHeader);
+  const rswtrByBildTpYears = useDmStore((state) => state.rswtr.rswtrByBildTpYears);
+  const rswtrByUsgYearsHeader = useDmStore((state) => state.rswtr.rswtrByUsgYearsHeader);
+  const rswtrByUsgYears = useDmStore((state) => state.rswtr.rswtrByUsgYears); 
+  
+  // 출처 텍스트
+  function SourceText() {
+    return (
+      <p className="mt-7 text-center text-[13px] text-neutral-500">
+        자료: 하수도정보시스템 {selectYear} 하수도 통계
+      </p>
+    );
+  }
+
+
+  useEffect(() => {
+    void getRswtrByLawYears('nofactory'); // rswtrByLawYears: 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)
+    void getRswtrByLawYears('factory'); // rswtrByLawYearsFactory: 공장 및 발전시설 내 중수도 설치 현황
+    void getRswtrByBildTpYears();
+    void getRswtrByUsgYears();
+  }, [getRswtrByLawYears, getRswtrByBildTpYears, getRswtrByUsgYears]);
+
+  const renderPartHeaders = (headers: string[], headerColors: string[]) => {
+    return headers.map((header, index) => (
+      <th
+        key={header}
+        className={`${tableStyles.th} ${headerColors[index] ?? "bg-[#81C784]"} text-white`}
+      >
+        {header}
+      </th>
+    ));
+  };
+
+  const renderCells = (
+    rowIdx: number,
+    row: DmStatusLawYearsType,
+    data: DmStatusLawYearsType[],
+    headers: TableHeaderType[]
+  ) => {
+    const rowData = row as Record<string, string | number>;
+    const currentCol1 = String(rowData["COL1"] ?? "");
+
+    // 이전 값
+    const prevCol1 = rowIdx > 0 ? data[rowIdx - 1]?.COL1 : null;
+
+    // 현재 그룹의 rowspan 계산
+    const getRowSpan = () => {
+      let count = 0;
+      for (let i = rowIdx; i < data.length; i++) {
+        if (data[i]?.COL1 === currentCol1) count++;
+        else break;
+      }
+      return count;
+    };
+
+    return headers.map((header, index) => {
+      const value = rowData[header.id];
+
+      // COL1 처리 (rowspan 핵심)
+      if (header.id === "COL1") {
+        // 이전과 같으면 렌더링 안함
+        if (currentCol1 === prevCol1) return null;
+
+        return (
+          <td
+            key={`${rowIdx}-${header.id}`}
+            rowSpan={getRowSpan()}
+            className={`${tableStyles.td} !font-bold !text-neutral-900`}
+          >
+            {value}
+          </td>
+        );
+      } else if (header.id === "COL2") {
+        return (
+          <td
+            key={`${rowIdx}-${header.id}`}
+            className={`${tableStyles.td} !font-bold !text-neutral-900`}
+            dangerouslySetInnerHTML={{ __html: Col2Name[value as string] ?? "" }}
+          />
+        );
+      }
+      
+      return (
+        <td
+          key={`${rowIdx}-${header.id}`}
+          className={`${tableStyles.td} ${[1, 3, 5].includes(index) ? "bg-[#EAF5F5]" : ""}`}
+        >
+          {String(rowData["COL2"]).indexOf("CNT") > -1
+            ? Number(value).toLocaleString("ko-KR")
+            : formatUsage(value as string | number, 10000, 1) }
+        </td>
+      );
+    });
+  };
+
+  const renderBuildingUsageCells = (
+    row: DmStatusBildTpYearsType|DmStatusUsgYearsType,
+    headers: TableHeaderType[]
+  ) => {
+    const rowData = row as Record<string, string | number>;
+    const firstHeaderId = headers[0]?.id;
+    const rowKey = firstHeaderId ? String(rowData[firstHeaderId] ?? "") : "";
+
+    return headers.map((header, index) => {
+      const value = rowData[header.id];
+
+      return (
+        <td
+          key={`${rowKey}-${header.id}`}
+          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(index) ? "bg-[#EAF5F5]" : ""}`}
+        >
+          {index === 0 ? value : formatUsage(value as string | number, 10000, 1)}
+        </td>
+      );
+    });
+  };
+
+  const title = "중수도(현황)";
+
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-[70px] pb-[120px]">
+        {/* 1) 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) */}
+        <section>
+          {/* 인트로 영역 */}  
+          <GreywaterIntroSummary />
+
+          <div id="status-greywater-overall" className="mt-10 scroll-mt-[120px]">
+            <SectionTitle>전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)</SectionTitle>
+
+            <div className="mt-10">
+                <div className={tableStyles.container}>
+                <table className={tableStyles.table}>
+                    <colgroup>
+                    <col style={{ width: "130px" }} />
+                    <col style={{ width: "160px" }} />
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                    </colgroup>
+                    <thead>
+                    <tr>
+                        <th
+                        colSpan={2}
+                        className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                        >
+                        구분
+                        </th>
+                        {renderPartHeaders(rswtrYears, headerColors6)}
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {rswtrByLawYears.map((row, idx, arr) => (
+                        <tr key={idx}>
+                        {renderCells(idx, row, arr, rswtrByLawYearsHeader)}
+                        </tr>
+                    ))}
+                    </tbody>
+                </table>
+                </div>
+
+                <SourceText />
+            </div>
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 2) 공장 및 발전시설 내 중수도 설치 현황 */}
+        <section
+          id="status-greywater-factory"
+          className="scroll-mt-[120px]"
+        >
+          <SectionTitle>공장 및 발전시설 내 중수도 설치 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "130px" }} />
+                  <col style={{ width: "160px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th
+                      colSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      구분
+                    </th>
+                    {renderPartHeaders(rswtrYears, headerColors6)}
+                  </tr>
+                </thead>
+                <tbody>
+                  {rswtrByLawYearsFactory.map((row, idx, arr) => (
+                    <tr key={idx}>
+                      {renderCells(idx, row, arr, rswtrByLawYearsHeader)}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 3) 중수도 건축물별 이용량 현황 */}
+        <section
+          id="status-greywater-building"
+          className="scroll-mt-[120px]"
+        >
+          <SectionTitle>중수도 건축물별 이용량 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "160px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th
+                      rowSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      구분
+                    </th>
+                    <th
+                      colSpan={6}
+                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
+                    >
+                      이용량 (만m³/년)
+                    </th>
+                  </tr>
+                  <tr>
+                    {renderPartHeaders(rswtrYears, headerColors6)}
+                  </tr>
+                </thead>
+                <tbody>
+                  {rswtrByBildTpYears.map((row, idx) => (
+                    <tr key={idx} className="bg-white">
+                      {renderBuildingUsageCells(row, rswtrByBildTpYearsHeader)}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 4) 중수도 용도별 이용량 현황 */}
+        <section
+          id="status-greywater-usage"
+          className="scroll-mt-[120px]"
+        >
+          <SectionTitle>중수도 용도별 이용량 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "160px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th
+                      rowSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      구분
+                    </th>
+                    <th
+                      colSpan={6}
+                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
+                    >
+                      이용량 (만m³/년)
+                    </th>
+                  </tr>
+                  <tr>
+                    {renderPartHeaders(rswtrYears, headerColors6)}
+                  </tr>
+                </thead>
+                <tbody>
+                  {rswtrByUsgYears.map((row, idx) => (
+                    <tr key={idx} className="bg-white">
+                      {renderBuildingUsageCells(row, rswtrByUsgYearsHeader)}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx b/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx
new file mode 100644
index 000000000..6a534294d
--- /dev/null
+++ b/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx
@@ -0,0 +1,353 @@
+"use client";
+
+import { useEffect, useMemo } from "react";
+// import SubPageHeader from "@/components/SubPageHeader";
+import Image from "next/image";
+import { useDmStore } from "@/app/store";
+import { formatUsage } from "@/app/common/transValueFormat";
+import type {
+  DmStatusBildTpYearsType,
+  DmStatusUsgBildTpType,
+  DmStatusUsgYearsType,
+  TableHeaderType,
+} from "@/app/store/dm-status/type";
+
+
+// 공통 섹션 타이틀 컴포넌트
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+/* 인트로 영역 */
+function RainIntroSummary() {
+  const items = [
+    {
+      icon: "/images/landing/icon_chart.png",
+      title: "지속적인 이용량 증가",
+      desc: "2018년 약 797만m³이었던 빗물 이용량은 5년 사이 약 75% 증가하여 수자원 절약에 기여하고 있습니다.",
+    },
+    {
+      icon: "/images/landing/icon_hand.png",
+      title: "조경용수의 핵심 자원",
+      desc: "재이용되는 빗물의 약 97%가 조경용수로 활용되고 있으며 이는 공원, 아파트 단지 등의 녹지 관리에 중요한 역할을 합니다.",
+    },
+    {
+      icon: "/images/landing/icon_building.png",
+      title: "민간·공공의 협력",
+      desc: "골프장과 같은 대규모 스포츠 시설은 물론, 최근에는 공동주택·아파트 등 내 이용량이 급증하며 일상생활 속 빗물 활용이 확산되는 추세입니다.",
+    },
+  ];
+
+  return (
+    <div className="mb-[70px] px-[160px]">
+      <div className="grid grid-cols-[1fr_400px] items-center gap-[60px]">
+        {/* 좌측 */}
+        <div>
+          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.04em] text-neutral-900">
+            기후위기 시대의 수자원 확보,
+            <br />
+            <span className="inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent">
+              빗물 재이용
+            </span>
+            이 앞장섭니다.
+          </h3>
+
+          <p className="mt-5 text-[16px] leading-[1.8] tracking-[-0.04em] text-neutral-600">
+            2023년 기준 전국 3,500여 개 시설에서
+            <br />
+            연간 약 1,394만m³의 빗물을 소중한 자원으로 다시 활용하고 있습니다.
+          </p>
+
+          <div className="mt-10 space-y-8">
+            {items.map((item) => (
+              <div key={item.title} className="flex gap-3 items-center">
+                <div className="flex h-12 w-12 shrink-0 items-center justify-center">
+                  <Image
+                    src={item.icon}
+                    alt=""
+                    width={48}
+                    height={48}
+                    className="object-contain"
+                  />
+                </div>
+
+                <div>
+                  <strong className="block text-[18px] font-extrabold text-neutral-900">
+                    {item.title}
+                  </strong>
+                  <p className="mt-2 text-[16px] leading-[1.7] text-neutral-600 tracking-tighter">
+                    {item.desc}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 우측 이미지 */}
+        <div className="flex items-center justify-center">
+          <Image
+            src="/images/landing/rain_status_img.png"
+            alt="빗물 재이용 개념도"
+            width={400}
+            height={343}
+            className="h-auto w-full max-w-[400px] object-contain"
+            priority
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const tableStyles = {
+  container: "w-[1000px] mx-auto overflow-hidden",
+  table: "w-full table-fixed border-collapse text-center text-[16px]",
+  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
+  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
+  headerBg: "bg-[#E3E7EA]",
+};
+
+const headerColors6 = [
+  "bg-[#01ACE5]",
+  "bg-[#17AFC7]",
+  "bg-[#2CB2A9]",
+  "bg-[#42B58B]",
+  "bg-[#57B86D]",
+  "bg-[#81C784]",
+];
+const headerColors8 = [
+  "bg-[#01ACE5]",
+  "bg-[#10AED0]",
+  "bg-[#20B0BA]",
+  "bg-[#2FB2A5]",
+  "bg-[#3FB58F]",
+  "bg-[#4EB77A]",
+  "bg-[#5EB964]",
+  "bg-[#6DBB4F]",
+];
+export default function RainStatusSection() {
+  const getRainyByBildTpYears = useDmStore((state) => state.getRainyByBildTpYears);
+  const getRainyByUsgBildTp = useDmStore((state) => state.getRainyByUsgBildTp);
+  const getRainyByUsgYears = useDmStore((state) => state.getRainyByUsgYears);
+  const rainyYears = useDmStore((state) => state.rainy.rainyYears);
+  const selectYear = rainyYears.slice(-1)[0];
+  const rainyByBildTpYearsHeader = useDmStore((state) => state.rainy.rainyByBildTpYearsHeader);
+  const rainyByBildTpYears = useDmStore((state) => state.rainy.rainyByBildTpYears);
+  const rainyByUsgBildTpHeader = useDmStore((state) => state.rainy.rainyByUsgBildTpHeader);
+  const rainyByUsgBildTp = useDmStore((state) => state.rainy.rainyByUsgBildTp);
+  const rainyByUsgYearsHeader = useDmStore((state) => state.rainy.rainyByUsgYearsHeader);
+  const rainyByUsgYears = useDmStore((state) => state.rainy.rainyByUsgYears);
+  const partBildTpHeader = useMemo(
+    () => rainyByUsgBildTpHeader.slice(3).map((header) => header.title),
+    [rainyByUsgBildTpHeader]
+  );
+  
+
+  // 출처 텍스트
+  function SourceText() {
+    return (
+      <p className="mt-7 text-center text-[13px] text-neutral-500">
+        자료: 하수도정보시스템 {selectYear} 하수도 통계
+      </p>
+    );
+  }
+
+  useEffect(() => {
+    void getRainyByBildTpYears();
+    void getRainyByUsgBildTp();
+    void getRainyByUsgYears();
+  }, [getRainyByBildTpYears, getRainyByUsgBildTp, getRainyByUsgYears]);
+
+  const renderPartHeaders = (headers: string[], headerColors: string[]) => {
+    return headers.map((header, index) => (
+      <th
+        key={header}
+        className={`${tableStyles.th} ${headerColors[index] ?? "bg-[#81C784]"} text-white`}
+        style={{ width: "140px" }}
+      >
+        {header}
+      </th>
+    ));
+  };
+
+  const renderBuildingUsageCells = (
+    row: DmStatusBildTpYearsType | DmStatusUsgYearsType | DmStatusUsgYearsType,
+    headers: TableHeaderType[]
+  ) => {
+    const rowData = row as Record<string, string | number>;
+    const firstHeaderId = headers[0]?.id;
+    const rowKey = firstHeaderId ? String(rowData[firstHeaderId] ?? "") : "";
+
+    return headers.map((header, index) => {
+      const value = rowData[header.id];
+
+      return (
+        <td
+          key={`${rowKey}-${header.id}`}
+          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(index) ? "bg-[#EAF5F5]" : ""}`}
+        >
+          {index === 0 ? value : formatUsage(value as string | number, 1000, 1)}
+        </td>
+      );
+    });
+  };
+
+  const renderRainyByUsgBildTpCells = (row: DmStatusUsgBildTpType) => {
+    return rainyByUsgBildTpHeader.map((header, index) => {
+      const value = row[header.id as keyof DmStatusUsgBildTpType];
+      const displayValue =
+        index === 0
+          ? value
+          : header.id === "CNT"
+            ? Number(value).toLocaleString("ko-KR")
+            : formatUsage(value as string | number, 1000, 1);
+
+      return (
+        <td
+          key={`${row.USG_NM}-${header.id}`}
+          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 2].includes(index) ? "bg-[#EAF5F5]" : ""}`}
+        >
+          {displayValue == 0.0 ? "-" : displayValue}
+        </td>
+      );
+    });
+  };
+  
+  const title = "빗물이용시설(현황)";
+
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-[70px] pb-[120px]">
+        {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
+        <section>
+          {/* 인트로 영역 */}
+          <RainIntroSummary />
+          
+          <div id="status-rain-building" className="scroll-mt-[120px]">
+            <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
+
+            <div className="mt-10">
+                <div className={tableStyles.container}>
+                <table className={tableStyles.table}>
+                    <thead>
+                    <tr>
+                        <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>
+                        구분
+                        </th>
+                        <th colSpan={rainyYears.length || 6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                        빗물이용량 (천m³/년)
+                        </th>
+                    </tr>
+                    <tr>
+                        {renderPartHeaders(rainyYears, headerColors6)}
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {rainyByBildTpYears.map((row, idx) => (
+                        <tr key={idx} className="bg-white">
+                        {renderBuildingUsageCells(row, rainyByBildTpYearsHeader)}
+                        </tr>
+                    ))}
+                    </tbody>
+                </table>
+                </div>
+
+                <SourceText />
+            </div>
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 2) 빗물이용시설의 용도별 분포 (xxxx년 기준) */}
+        <section
+          id="status-rain-purpose-distribution"
+          className="scroll-mt-[120px]"
+        >
+          <SectionTitle>빗물이용시설의 용도별 분포 ({selectYear}년 기준)</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <thead>
+                  <tr>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>용도</th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "84px" }}>개소수<br />(개소)</th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "84px" }}>저류용량<br />(천m³)</th>
+                    <th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
+                  </tr>
+                  <tr>
+                    {renderPartHeaders(partBildTpHeader, headerColors8)}
+                  </tr>
+                </thead>
+                <tbody>
+                  {rainyByUsgBildTp.map((row, idx) => (
+                    <tr key={`${row.USG_NM}-${idx}`} className="bg-white">
+                      {renderRainyByUsgBildTpCells(row)}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */}
+        <section
+          id="status-rain-purpose-usage"
+          className="scroll-mt-[120px]"
+        >
+          <SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <thead>
+                  <tr>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>용도</th>
+                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
+                  </tr>
+                  <tr>
+                    {renderPartHeaders(rainyYears, headerColors6)}
+                  </tr>
+                </thead>
+                <tbody>
+                  {rainyByUsgYears.map((row, idx) => (
+                    <tr key={idx} className="bg-white">
+                      {renderBuildingUsageCells(row, rainyByUsgYearsHeader)}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx b/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx
new file mode 100644
index 000000000..f7eb49a84
--- /dev/null
+++ b/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx
@@ -0,0 +1,591 @@
+/**
+ * 하수처리수
+ */
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { useEffect } from "react";
+import { useDmStore } from "@/app/store";
+import { formatUsage } from "@/app/common/transValueFormat";
+import type {
+  DmStatusLawYearsType,
+  DmStatusBildTpYearsType,
+  DmStatusUsgYearsType,
+  DmStatusSidoUsgType,
+  TableHeaderType,
+} from "@/app/store/dm-status/type";
+import { Col2Name } from "@/app/store/dm-status/type";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function SewageIntroSummary() {
+  const items = [
+    {
+      icon: "/images/landing/icon_cycle_water.png",
+      title: "안정적인 재이용률 유지",
+      desc: (
+          <>
+          연간 약 1,136백만m³의 하수처리수가 재이용되고 있으며,
+          <br/>
+          약 15%에 달하는 높은 재이용률을 통해
+          <br/>
+          수자원 선순환 체계를 구축하고 있습니다.
+          </>
+      ),
+    },
+    {
+      icon: "/images/landing/icon_water_flow.png",
+      title: "메마른 하천을 살리는 물",
+      desc: (
+          <>
+          재이용되는 물의 가장 많은 부분이 하천유지용수로 사용되어
+          <br/>
+          도심 속 하천의 생태계를 보호하고 쾌적한 수변 환경을 조성합니다.
+          </>
+      ),
+    },
+    {
+      icon: "/images/landing/icon_location.png",
+      title: "지역별 균형 있는 활용",
+      desc: (
+          <>
+          전국적으로 고르게 시설이 확충되고 있으며, 특히 경기 지역을 중심으로
+          <br/>
+          대규모 공업용수 공급망을 구축하여
+          <br/>
+          지역 경제와 환경 보호를 동시에 실현하고 있습니다.
+          </>
+      ),
+    },
+  ];
+
+  return (
+    <div className="mb-[70px] px-[160px]">
+      <div className="grid grid-cols-[1fr_400px] items-center gap-0">
+        {/* 좌측 */}
+        <div>
+          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.14em] text-neutral-900">
+            버려지는 하수에서 찾는 새로운 가치,
+            <br />
+            <span className="inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent">
+              하수처리수 재이용
+            </span>
+            이 도시를 숨쉬게 합니다.
+          </h3>
+
+          <p className="mt-5 text-[16px] leading-[1.8] text-neutral-600">
+            하수처리장에서 정화된 물은 하천의 수량을 조절하고
+            <br />
+            산업 현장에 용수를 공급하는 소중한 자원입니다.
+          </p>
+
+          <div className="mt-10 space-y-8">
+            {items.map((item) => (
+              <div key={item.title} className="flex gap-4 items-center">
+                <div className="mt-1 flex h-12 w-12 shrink-0 items-center justify-center">
+                  <Image
+                    src={item.icon}
+                    alt=""
+                    width={48}
+                    height={48}
+                    className="object-contain"
+                  />
+                </div>
+
+                <div>
+                  <strong className="block text-[18px] font-extrabold text-neutral-900">
+                    {item.title}
+                  </strong>
+                  <p className="mt-2 text-[16px] leading-[1.7] text-neutral-600">
+                    {item.desc}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 우측 이미지 */}
+        <div className="flex items-center justify-center">
+          <Image
+            src="/images/landing/sewage_status_img.png"
+            alt="하수처리수 재이용 개념도"
+            width={420}
+            height={360}
+            className="h-auto w-full max-w-[420px] object-contain"
+            priority
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const tableStyles = {
+  container: "w-[1000px] mx-auto overflow-hidden",
+  table: "w-full table-fixed border-collapse text-center text-[16px]",
+  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
+  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
+  headerBg: "bg-[#E3E7EA]",
+};
+
+const headerColors6 = [
+  "bg-[#01ACE5]",
+  "bg-[#17AFC7]",
+  "bg-[#2CB2A9]",
+  "bg-[#42B58B]",
+  "bg-[#57B86D]",
+  "bg-[#81C784]",
+];
+
+export default function SewageStatusSection() {
+  const getPbnstByLawYears = useDmStore((state) => state.getPbnstByLawYears);
+  const getPbnstByUsgYears = useDmStore((state) => state.getPbnstByUsgYears); 
+  const getPbnstByCpcYears = useDmStore((state) => state.getPbnstByCpcYears); 
+  const getPbnstBySido = useDmStore((state) => state.getPbnstBySido); 
+  const pbnstYears = useDmStore((state) => state.pbnst.pbnstYears);
+  const selectYear = pbnstYears.slice(-1)[0];
+  const pbnstByLawYearsHeader = useDmStore((state) => state.pbnst.pbnstByLawYearsHeader);
+  const pbnstByLawYears = useDmStore((state) => state.pbnst.pbnstByLawYears); 
+  const pbnstByUsgYearsHeader = useDmStore((state) => state.pbnst.pbnstByUsgYearsHeader);
+  const pbnstByUsgYears = useDmStore((state) => state.pbnst.pbnstByUsgYears);
+  const pbnstByCpcYearsHeader = useDmStore((state) => state.pbnst.pbnstByCpcYearsHeader);
+  const pbnstByCpcYears = useDmStore((state) => state.pbnst.pbnstByCpcYears);
+  const pbnstBySidoHeader = useDmStore((state) => state.pbnst.pbnstBySidoHeader);
+  const pbnstBySido = useDmStore((state) => state.pbnst.pbnstBySido);
+
+  // 출처 텍스트
+  function SourceText() {
+    return (
+      <p className="mt-7 text-center text-[13px] text-neutral-500">
+        자료: 하수도정보시스템 {selectYear} 하수도 통계
+      </p>
+    );
+  }
+  
+  useEffect(() => {
+    void getPbnstByLawYears(); 
+    void getPbnstByUsgYears();
+    void getPbnstByCpcYears();
+    void getPbnstBySido();
+  }, [getPbnstByLawYears, getPbnstByUsgYears, getPbnstByCpcYears, getPbnstBySido]);
+
+  const renderPartHeaders = (headers: string[], headerColors: string[]) => {
+    return headers.map((header, index) => (
+      <th
+        key={header}
+        className={`${tableStyles.th} ${headerColors[index] ?? "bg-[#81C784]"} text-white`}
+      >
+        {header}
+      </th>
+    ));
+  };
+
+  const renderCells = (
+    rowIdx: number,
+    row: DmStatusLawYearsType,
+    data: DmStatusLawYearsType[],
+    headers: TableHeaderType[],
+    unitSize: number = 1, // 단위 변경 1000 인 경우, 100,000 -> 100 으로 변경
+  ) => {
+    const rowData = row as Record<string, string | number>;
+    const currentCol1 = String(rowData["COL1"] ?? "");
+
+    // 이전 값
+    const prevCol1 = rowIdx > 0 ? data[rowIdx - 1]?.COL1 : null;
+
+    // 현재 그룹의 rowspan 계산
+    const getRowSpan = () => {
+      let count = 0;
+      for (let i = rowIdx; i < data.length; i++) {
+        if (data[i]?.COL1 === currentCol1) count++;
+        else break;
+      }
+      return count;
+    };
+
+    return headers.map((header, index) => {
+      const value = rowData[header.id];
+
+      // COL1 처리 (rowspan 핵심)
+      if (header.id === "COL1") {
+        // 이전과 같으면 렌더링 안함
+        if (currentCol1 === prevCol1) return null;
+
+        return (
+          <td
+            key={`${rowIdx}-${header.id}`}
+            rowSpan={getRowSpan()}
+            className={`${tableStyles.td} !font-bold !text-neutral-900`}
+          >
+            {value}
+          </td>
+        );
+      } else if (header.id === "COL2") {
+        return (
+          <td
+            key={`${rowIdx}-${header.id}`}
+            className={`${tableStyles.td} !font-bold !text-neutral-900`}
+            dangerouslySetInnerHTML={{ __html: Col2Name[value as string] ?? "" }}
+          />
+        );
+      }
+      
+      return (
+        <td
+          key={`${rowIdx}-${header.id}`}
+          className={`${tableStyles.td} ${[0, 2, 4].includes(index) ? "bg-[#EAF5F5]" : ""}`}
+        >
+          {(String(rowData["COL2"]).indexOf("CNT") > -1)
+            ? Number(value).toLocaleString("ko-KR")
+            : ((String(rowData["COL2"]).indexOf("REUSERT") > -1)
+              ? formatUsage(value as string | number, 1, 1)
+              : formatUsage(value as string | number, unitSize, 1))
+          }
+        </td>
+      );
+    });
+  };
+
+  const renderPbnstUsgCells = (
+    rowIdx: number,
+    row: DmStatusBildTpYearsType | DmStatusUsgYearsType,
+    headers: TableHeaderType[]
+  ) => {
+    const rowData = row as Record<string, string | number>;
+    const isLastInGroup = rowIdx === 8 || rowIdx === 17;
+
+    const getType = (colNm:string) => {
+      const last3 = colNm.slice(-3); // 끝 3자리
+      const prefix = last3[0];       // S 또는 D
+
+      if (prefix === 'S') {
+        const num = parseInt(last3.slice(1), 10); // 숫자
+        if (num < 8) return 'red-item';
+        if (num >= 8) return 'blue-item';
+      }
+
+      return ''; // 조건 안 맞으면 빈값 (필요시 기본값)
+    };
+
+    return headers.map((header, index) => {
+      const value = rowData[header.id];
+      const colNm = String(rowData["COL_NM"] ?? "");
+      const type = getType(colNm);
+      const isSubItem = type === "red-item" || type === "blue-item";
+      
+      if (index === 0) {
+        // console.log(header.id, value);
+        return (
+          <td key={`${rowIdx}-${header.id}`} className={`${tableStyles.td} relative`}>
+            {isSubItem ? (
+              <>
+                <div
+                  className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${
+                    isLastInGroup ? "bottom-[0px]" : "bottom-[-2px]"
+                  }`}
+                />
+                <div
+                  className={`absolute left-[16px] w-[4px] z-20 ${
+                    type === "red-item" ? "bg-[#FF8B8B]" : "bg-[#4ECBFF]"
+                  } top-[-2px] ${
+                    isLastInGroup ? "bottom-[0px]" : "bottom-[-2px]"
+                  }`}
+                />
+                <span className="text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]">
+                  {value}
+                </span>
+              </>
+            ) : (
+              <span className="font-bold text-neutral-900 block w-full text-center">
+                {value}
+              </span>
+            )}
+          </td>
+        );  
+      } 
+
+      return (
+        <td
+          key={`${rowIdx}-${header.id}`}
+          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[0, 2, 4].includes(index) ? "bg-[#EAF5F5]" : ""}`}
+        >
+          {formatUsage(value as string | number, 1000, 1)}
+        </td>
+      );
+      
+    });
+  };
+
+  const renderSidoUsgCells = (
+    rowIdx: number,
+    row: DmStatusSidoUsgType,
+    headers: TableHeaderType[]
+  ) => {
+    const rowData = row as Record<string, string | number>;
+
+    return headers.map((header, index) => {
+      let value = rowData[header.id];
+      value = (index === 0||index ===9) ? value : formatUsage(value as string | number, 1000, 1);
+      value = value === "0.0"? "-" : value;
+
+      return (
+        <td
+          key={`${rowIdx}-${header.id}`}
+          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 9].includes(index) ? "bg-[#EAF5F5]" : ""}`}
+        >
+          {value}
+        </td>
+      );
+    });
+  };
+
+  const title = "하수처리수 재이용시설(현황)";
+
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-[70px] pb-[120px]">
+        {/* 1) 연도별 하수처리수 재이용 현황 */}
+        <section>
+            {/* 인트로 */}
+            <SewageIntroSummary />
+
+            <div id="status-treated-year" className="scroll-mt-[120px]">
+                <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
+                <div className="mt-10">
+                    <div className={tableStyles.container}>
+                    <table className={tableStyles.table}>
+                        <colgroup>
+                        <col style={{ width: "130px" }} />
+                        <col style={{ width: "180px" }} />
+                        <col />
+                        <col />
+                        <col />
+                        <col />
+                        <col />
+                        <col />
+                        </colgroup>
+                        <thead>
+                        <tr>
+                            <th
+                            colSpan={2}
+                            className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                            >
+                            구분
+                            </th>
+                            {renderPartHeaders(pbnstYears, headerColors6)}
+                        </tr>
+                        </thead>
+                        <tbody>
+                          {pbnstByLawYears.map((row, idx, arr) => (
+                              <tr key={idx}>
+                              {renderCells(idx, row, arr, pbnstByLawYearsHeader, 1000)}
+                              </tr>
+                          ))}
+                        </tbody>
+                    </table>
+                    </div>
+
+                    <SourceText />
+                </div>
+            </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 2) 용도별 하수처리수 재이용 현황 */}
+        <section id="status-treated-usage" className="scroll-mt-[120px]">
+          <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <div className="mb-2 text-right text-[13px] text-neutral-600">
+                (단위: 백만m³/일)
+              </div>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "180px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      구분
+                    </th>
+                    {renderPartHeaders(pbnstYears, headerColors6)}
+                  </tr>
+                </thead>
+                <tbody>
+                  {pbnstByUsgYears.map((row, idx) => (
+                      <tr key={idx}  className="bg-white">
+                      {renderPbnstUsgCells(idx, row, pbnstByUsgYearsHeader)}
+                      </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 3) 하수처리시설 설치 및 이용 현황 */}
+        <section id="status-treated-facility" className="scroll-mt-[120px]">
+          <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "130px" }} />
+                  <col style={{ width: "160px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th
+                      colSpan={2}
+                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
+                    >
+                      구분
+                    </th>
+                    {renderPartHeaders(pbnstYears, headerColors6)}
+                  </tr>
+                </thead>
+                <tbody>
+                  {pbnstByCpcYears.map((row, idx, arr) => (
+                      <tr key={idx}>
+                      {renderCells(idx, row, arr, pbnstByCpcYearsHeader, 10000)}
+                      </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 4) 시도별 하수처리수 재이용 현황 */}
+        <section
+          id="status-treated-region"
+          className="scroll-mt-[120px]"
+        >
+          <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
+
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <div className="mb-2 text-right text-[13px] text-neutral-600">
+                (단위: 백만m³/일)
+              </div>
+
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: "160px" }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}> 시도 </th>
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
+                      연간<br />하수<br />처리량
+                    </th>
+                    <th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`} >
+                      재이용현황
+                    </th>
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
+                      재이용률<br />(%)
+                    </th>
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
+                      비고
+                    </th>
+                  </tr>
+                  <tr>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
+                      계
+                    </th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
+                      장내
+                    </th>
+                    <th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`} >
+                      장외
+                    </th>
+                  </tr>
+                  <tr>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>
+                      소계
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>
+                      하천유지용수
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>
+                      공업용수
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>
+                      농업용수
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>
+                      기타용수
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {pbnstBySido.map((row, idx) => (
+                      <tr key={idx}  className="bg-white">
+                      {renderSidoUsgCells(idx, row, pbnstBySidoHeader)}
+                      </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <SourceText />
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dm/app/(with-layout)/status/greywater/page.tsx b/apps/dm/app/(with-layout)/status/greywater/page.tsx
new file mode 100644
index 000000000..7d9260d0a
--- /dev/null
+++ b/apps/dm/app/(with-layout)/status/greywater/page.tsx
@@ -0,0 +1,363 @@
+"use client";
+
+import SubPageHeader from "@/components/SubPageHeader";
+import React from "react";
+
+// 공통 섹션 타이틀 컴포넌트
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// 출처 텍스트
+function SourceText() {
+  return (
+    <p className="mt-7 text-center text-[13px] text-neutral-500">
+      자료: 환경부(2024), 「2023 하수도 통계」
+    </p>
+  );
+}
+
+/**
+ * 공통 테이블 스타일
+ * - table-fixed: 열 넓이를 고정하고 균등 분배하기 위해 추가
+ * - 폰트 사이즈: 16px로 수정
+ */
+const tableStyles = {
+  container: "w-[1000px] mx-auto overflow-hidden",
+  table: "w-full table-fixed border-collapse text-center text-[16px]",
+  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
+  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
+  headerBg: "bg-[#E3E7EA]",
+};
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">
+      <SubPageHeader
+        title="중수도(현황)"
+        crumbs={[
+          { label: "Home", href: "/reuse" },
+          { label: "물 재이용 현황", href: "/reuse/cases/rain" },
+          { label: "중수도(현황)" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      />
+
+      <div className="pr-0">
+        <Hr className="my-7" />
+
+      {/* 1) 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) */}
+      <section className="mt-10">
+        <SectionTitle>전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)</SectionTitle>
+        <div className="mt-10">
+          <div className={tableStyles.container}>
+            <table className={tableStyles.table}>
+              {/* colgroup으로 열 너비를 최상단에서 완벽히 제어합니다 */}
+              <colgroup>
+                <col style={{ width: '130px' }} />
+                <col style={{ width: '160px' }} />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
+                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  {
+                    group: "전체",
+                    rows: [
+                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "576", "633", "682", "740", "819", "842"],
+                      ["건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>", "1,494.2", "1,514.4", "1,524.9", "989.1", "1,104.3", "1,015.4"],
+                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "39.6", "40.0", "51.1", "47.1", "48.9", "50.7"],
+                      ["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "2,224.0", "1,166.0", "4,377.3", "3,196.5", "2,752.5", "898.0"],
+                    ]
+                  },
+                  {
+                    group: "법적 대상",
+                    rows: [
+                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "196", "214", "253", "273", "287", "325"],
+                      ["건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>", "649.7", "668.6", "720.9", "743.2", "760.4", "822.0"],
+                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "20.0", "20.5", "21.1", "21.1", "21.2", "24.7"],
+                      ["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "614.7", "491.9", "518.1", "362.5", "349.6", "654.1"],
+                    ]
+                  },
+                  {
+                    group: "법적 미대상",
+                    rows: [
+                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "380", "419", "429", "467", "532", "517"],
+                      ["건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>", "844.5", "845.8", "804.0", "245.8", "255.1", "282.3"],
+                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "19.6", "19.5", "30.0", "26.0", "27.7", "26.0"],
+                      ["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "1,609.3", "674.1", "3,859.2", "2,834.0", "2,402.9", "243.9"],
+                    ]
+                  }
+                ].map((section, sIdx) => (
+                  <React.Fragment key={sIdx}>
+                    {section.rows.map((row, rIdx) => (
+                      <tr key={`${sIdx}-${rIdx}`} className="bg-white">
+                        {rIdx === 0 && (
+                          <td 
+                            rowSpan={section.rows.length} 
+                            className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
+                          >
+                            {section.group}
+                          </td>
+                        )}
+                        {row.map((val, i) => {
+                          const isFirstCol = i === 0;
+                          const isHighlightedCol = [1, 3, 5].includes(i);
+                          return (
+                            <td 
+                              key={i} 
+                              className={`${tableStyles.td} ${isFirstCol ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                              dangerouslySetInnerHTML={{ __html: val }}
+                            />
+                          );
+                        })}
+                      </tr>
+                    ))}
+                  </React.Fragment>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <SourceText />
+        </div>
+      </section>
+
+        <Hr className="my-11" />
+
+      {/* 2) 공장 및 발전시설 내 중수도 설치 및 이용 현황 */}
+      <section>
+        <SectionTitle>공장 및 발전시설 내 중수도 설치 및 이용 현황</SectionTitle>
+        <div className="mt-8">
+          <div className={tableStyles.container}>
+            <table className={tableStyles.table}>
+              <colgroup>
+                <col style={{ width: '130px' }} />
+                <col style={{ width: '160px' }} />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
+                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  {
+                    group: "전체",
+                    rows: [
+                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "125", "127", "139", "146", "151", "176"],
+                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "141.3", "141.0", "146.7", "189.0", "190.3", "166.5"],
+                      ["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "33,712", "29,300", "33,110", "22,284", "21,593", "21,349"],
+                    ]
+                  },
+                  {
+                    group: "법적 대상",
+                    rows: [
+                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "59", "63", "78", "78", "82", "86"],
+                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "108.6", "109.7", "118.1", "159.5", "142.6", "119.4"],
+                      ["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "24,847", "24,021", "28,055", "17,959", "12,239", "12,297"],
+                    ]
+                  },
+                  {
+                    group: "법적 미대상",
+                    rows: [
+                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "66", "64", "61", "68", "69", "90"],
+                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "32.7", "31.4", "28.7", "29.5", "47.7", "47.1"],
+                      ["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "8,864.9", "5,278.8", "5,054.7", "4,324.6", "9,353.3", "9,052.4"],
+                    ]
+                  }
+                ].map((section, sIdx) => (
+                  <React.Fragment key={sIdx}>
+                    {section.rows.map((row, rIdx) => (
+                      <tr key={`${sIdx}-${rIdx}`} className="bg-white">
+                        {rIdx === 0 && (
+                          <td 
+                            rowSpan={section.rows.length} 
+                            className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
+                          >
+                            {section.group}
+                          </td>
+                        )}
+                        {row.map((val, i) => {
+                          const isFirstCol = i === 0;
+                          const isHighlightedCol = [1, 3, 5].includes(i);
+                          return (
+                            <td 
+                              key={i} 
+                              className={`${tableStyles.td} ${isFirstCol ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                              dangerouslySetInnerHTML={{ __html: val }}
+                            />
+                          );
+                        })}
+                      </tr>
+                    ))}
+                  </React.Fragment>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <SourceText />
+        </div>
+      </section>
+
+        <Hr className="my-11" />
+
+      {/* 3) 중수도 건축물별 이용량 현황 */}
+      <section className="pb-16">
+        <SectionTitle>중수도 건축물별 이용량 현황</SectionTitle>
+        <div className="mt-8">
+          <div className={tableStyles.container}>
+            <table className={tableStyles.table}>
+              <colgroup>
+                <col style={{ width: '160px' }} />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
+                  <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>이용량 (천m³/년)</th>
+                </tr>
+                <tr>
+                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  ["공장·발전시설", "33,712.3", "29,300.6", "33,109.9", "22,284.1", "21,593.3", "21,349.6"],
+                  ["교정시설", "1.3", "-", "0.4", "0.1", "0.1", "0.1"],
+                  ["대규모점포", "393.0", "241.5", "259.3", "211.5", "369.2", "119.2"],
+                  ["방송국·전신국", "9.7", "1.1", "12.7", "7.2", "7.4", "2.3"],
+                  ["숙박·목욕장", "269.6", "234.4", "250.3", "128.1", "125.8", "104.9"],
+                  ["업무시설", "338.2", "211.4", "268.0", "138.2", "116.4", "61.4"],
+                  ["운수·물류시설", "759.2", "34.2", "459.8", "259.8", "252.8", "410.4"],
+                  ["기타", "453.1", "443.3", "3,126.8", "2,451.5", "1,880.8", "199.7"],
+                  ["합계", "35,936.3", "30,466.6", "37,487.2", "25,480.6", "24,345.8", "22,247.6"],
+                ].map((row, idx) => (
+                  <tr key={idx} className={idx === 8 ? "bg-white font-bold" : "bg-white"}>
+                    {row.map((val, i) => (
+                      <td 
+                        key={i} 
+                        className={`${tableStyles.td} ${i === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
+                      >
+                        {val}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <SourceText />
+        </div>
+      </section>
+
+        <Hr className="my-11" />
+
+      {/* 4) 중수도 용도별 이용량 현황 */}
+      <section className="pb-[200px]">
+        <SectionTitle>중수도 용도별 이용량 현황</SectionTitle>
+        <div className="mt-8">
+          <div className={tableStyles.container}>
+            <table className={tableStyles.table}>
+              <colgroup>
+                <col style={{ width: '160px' }} />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
+                  <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>이용량 (천m³/년)</th>
+                </tr>
+                <tr>
+                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  ["공업용수", "33,082", "28,719", "32,312", "21,707", "20,991", "20,470"],
+                  ["세척·살수용수", "860.2", "146.5", "133.8", "100.7", "95.1", "149.9"],
+                  ["조경용수", "313.9", "326.4", "307.6", "67.3", "63.2", "65.9"],
+                  ["청소·화장실용수", "1,650.7", "1,272", "1,345.7", "1,340", "1,435.8", "1,459.7"],
+                  ["친수용수", "28.6", "0.5", "2,807.9", "2,258.1", "1,643.6", "9.1"],
+                  ["미기재", "0.2", "2.0", "580.1", "7.3", "116.2", "92.4"],
+                  ["합계", "35,935.6", "30,466.4", "37,487.1", "25,480.4", "24,344.9", "22,247"],
+                ].map((row, idx) => (
+                  <tr key={idx} className={idx === 6 ? "bg-white font-bold" : "bg-white"}>
+                    {row.map((val, i) => (
+                      <td 
+                        key={i} 
+                        className={`${tableStyles.td} ${i === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
+                      >
+                        {val}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <SourceText />
+        </div>
+      </section> 
+      </div>     
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/status/layout.tsx b/apps/dm/app/(with-layout)/status/layout.tsx
new file mode 100644
index 000000000..6ce4ebbe3
--- /dev/null
+++ b/apps/dm/app/(with-layout)/status/layout.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Lnb from "@/components/Lnb";
+
+export default function ExampleLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="relative">
+      <Lnb />
+      <div className="flex max-w-[1400px] gap-[56px] py-[50px]">
+        <main className="min-w-0 flex-1">
+          {children}
+        </main>
+
+        {/* 우측 메뉴 영역 */}
+        {/* <BusinessSubNav /> */}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/status/page.tsx b/apps/dm/app/(with-layout)/status/page.tsx
new file mode 100644
index 000000000..8bed3d04f
--- /dev/null
+++ b/apps/dm/app/(with-layout)/status/page.tsx
@@ -0,0 +1,96 @@
+// DM 물 재이용 현황 페이지
+import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav";
+import SubPageHeader from "@/components/SubPageHeader";
+import RainStatusSection from "./_components/RainStatusSection";
+import GreywaterStatusSection from "./_components/GreywaterStatusSection";
+import SewageStatusSection from "./_components/SewageStatusSection";
+
+const menus: BusinessSubNavMenu[] = [
+  {
+    key: "status-rain",
+    label: "빗물이용시설(현황)",
+    sections: [
+      {
+        id: "status-rain-building",
+        label: "빗물이용시설의 건축물별 빗물이용량 현황",
+      },
+      {
+        id: "status-rain-purpose-distribution",
+        label: "빗물이용시설의 용도별 분포",
+      },
+      {
+        id: "status-rain-purpose-usage",
+        label: "빗물이용시설의 용도별 빗물이용량 현황",
+      },
+    ],
+  },
+  {
+    key: "status-greywater",
+    label: "중수도(현황)",
+    defaultOpen: false,
+    sections: [
+      {
+        id: "status-greywater-overall",
+        label: "전체 중수도 설치 및 이용 현황",
+      },
+      {
+        id: "status-greywater-factory",
+        label: "공장 및 발전시설 내 중수도 설치 현황",
+      },
+      {
+        id: "status-greywater-building",
+        label: "중수도 건축물별 이용량 현황",
+      },
+      {
+        id: "status-greywater-usage",
+        label: "중수도 용도별 이용량 현황",
+      },
+    ],
+  },
+  {
+    key: "status-sewage",
+    label: "하수처리수 재이용시설(현황)",
+    defaultOpen: false,
+    sections: [
+      {
+        id: "status-treated-year",
+        label: "연도별 하수처리수 재이용 현황",
+      },
+      {
+        id: "status-treated-usage",
+        label: "용도별 하수처리수 재이용 현황",
+      },
+      {
+        id: "status-treated-facility",
+        label: "하수처리시설 설치 및 이용 현황",
+      },
+      {
+        id: "status-treated-region",
+        label: "시도별 하수처리수 재이용 현황",
+      },
+    ],
+  },
+];
+
+export default function StatusPage() {
+  return (
+    <div className="relative">
+      {/* 상단 헤더 */}
+      <SubPageHeader
+        title="물 재이용 현황"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 현황", href: "/status" },
+        ]}
+      />
+      {/* 우측 앵커 네비 */}
+      <BusinessSubNav menus={menus} offsetTop={120} />
+
+      <div className="max-w-[1320px] pb-24">
+        <RainStatusSection />
+        <GreywaterStatusSection />
+        <SewageStatusSection />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/status/rain/page.tsx b/apps/dm/app/(with-layout)/status/rain/page.tsx
new file mode 100644
index 000000000..88f041edf
--- /dev/null
+++ b/apps/dm/app/(with-layout)/status/rain/page.tsx
@@ -0,0 +1,260 @@
+"use client";
+
+import { useEffect, useMemo } from "react";
+import SubPageHeader from "@/components/SubPageHeader";
+import { useDmStore } from "@/app/store";
+import { formatUsage } from "@/app/common/transValueFormat";
+import type {
+  DmStatusBildTpYearsType,
+  DmStatusUsgBildTpType,
+  DmStatusUsgYearsType,
+  TableHeaderType,
+} from "@/app/store/dm-status/type";
+
+// 공통 섹션 타이틀 컴포넌트
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+
+
+const tableStyles = {
+  container: "w-[1000px] mx-auto overflow-hidden",
+  table: "w-full table-fixed border-collapse text-center text-[16px]",
+  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
+  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
+  headerBg: "bg-[#E3E7EA]",
+};
+
+const headerColors6 = [
+  "bg-[#01ACE5]",
+  "bg-[#17AFC7]",
+  "bg-[#2CB2A9]",
+  "bg-[#42B58B]",
+  "bg-[#57B86D]",
+  "bg-[#81C784]",
+];
+const headerColors8 = [
+  "bg-[#01ACE5]",
+  "bg-[#10AED0]",
+  "bg-[#20B0BA]",
+  "bg-[#2FB2A5]",
+  "bg-[#3FB58F]",
+  "bg-[#4EB77A]",
+  "bg-[#5EB964]",
+  "bg-[#6DBB4F]",
+];
+
+
+export default function RainwaterStatusPage() {
+  const getRainyByBildTpYears = useDmStore((state) => state.getRainyByBildTpYears);
+  const getRainyByUsgBildTp = useDmStore((state) => state.getRainyByUsgBildTp);
+  const getRainyByUsgYears = useDmStore((state) => state.getRainyByUsgYears);
+  const rainyYears = useDmStore((state) => state.rainy.rainyYears);
+  const selectYear = rainyYears.slice(-1)[0];
+  const rainyByBildTpYearsHeader = useDmStore((state) => state.rainy.rainyByBildTpYearsHeader);
+  const rainyByBildTpYears = useDmStore((state) => state.rainy.rainyByBildTpYears);
+  const rainyByUsgBildTpHeader = useDmStore((state) => state.rainy.rainyByUsgBildTpHeader);
+  const rainyByUsgBildTp = useDmStore((state) => state.rainy.rainyByUsgBildTp);
+  const rainyByUsgYearsHeader = useDmStore((state) => state.rainy.rainyByUsgYearsHeader);
+  const rainyByUsgYears = useDmStore((state) => state.rainy.rainyByUsgYears);
+  const partBildTpHeader = useMemo(
+    () => rainyByUsgBildTpHeader.slice(3).map((header) => header.title),
+    [rainyByUsgBildTpHeader]
+  );
+  
+
+  // 출처 텍스트
+  function SourceText() {
+    return (
+      <p className="mt-7 text-center text-[13px] text-neutral-500">
+        자료: 환경부(2024), 「{selectYear} 하수도 통계」
+      </p>
+    );
+  }
+
+  useEffect(() => {
+    void getRainyByBildTpYears();
+    void getRainyByUsgBildTp();
+    void getRainyByUsgYears();
+  }, [getRainyByBildTpYears, getRainyByUsgBildTp, getRainyByUsgYears]);
+
+  const renderPartHeaders = (headers: string[], headerColors: string[]) => {
+    return headers.map((header, index) => (
+      <th
+        key={header}
+        className={`${tableStyles.th} ${headerColors[index] ?? "bg-[#81C784]"} text-white`}
+        style={{ width: "140px" }}
+      >
+        {header}
+      </th>
+    ));
+  };
+
+  const renderBuildingUsageCells = (
+    row: DmStatusBildTpYearsType | DmStatusUsgYearsType | DmStatusUsgYearsType,
+    headers: TableHeaderType[]
+  ) => {
+    const rowData = row as Record<string, string | number>;
+    const firstHeaderId = headers[0]?.id;
+    const rowKey = firstHeaderId ? String(rowData[firstHeaderId] ?? "") : "";
+
+    return headers.map((header, index) => {
+      const value = rowData[header.id];
+
+      return (
+        <td
+          key={`${rowKey}-${header.id}`}
+          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(index) ? "bg-[#EAF5F5]" : ""}`}
+        >
+          {index === 0 ? value : formatUsage(value as string | number, 1000, 1)}
+        </td>
+      );
+    });
+  };
+
+  const renderRainyByUsgBildTpCells = (row: DmStatusUsgBildTpType) => {
+    return rainyByUsgBildTpHeader.map((header, index) => {
+      const value = row[header.id as keyof DmStatusUsgBildTpType];
+      const displayValue =
+        index === 0
+          ? value
+          : header.id === "CNT"
+            ? Number(value).toLocaleString("ko-KR")
+            : formatUsage(value as string | number, 1000, 1);
+
+      return (
+        <td
+          key={`${row.USG_NM}-${header.id}`}
+          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 2].includes(index) ? "bg-[#EAF5F5]" : ""}`}
+        >
+          {displayValue == 0.0 ? "-" : displayValue}
+        </td>
+      );
+    });
+  };
+
+  return (
+    <div className="bg-white">
+      <SubPageHeader
+        title="빗물이용시설(현황)"
+        crumbs={[
+          { label: "Home", href: "/reuse" },
+          { label: "물 재이용 현황", href: "/reuse/cases/rain" },
+          { label: "빗물이용시설(현황)" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      />
+
+      <div className="pr-[100px]">
+        <Hr className="my-7" />
+
+        {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
+        <section id="status-rain-building" className="mt-10 scroll-mt-[120px]">
+          <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
+          <div className="mt-10">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <thead>
+                  <tr>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>
+                      구분
+                    </th>
+                    <th colSpan={rainyYears.length || 6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      빗물이용량 (천m³/년)
+                    </th>
+                  </tr>
+                  <tr>
+                    {renderPartHeaders(rainyYears, headerColors6)}
+                  </tr>
+                </thead>
+                <tbody>
+                  {rainyByBildTpYears.map((row, idx) => (
+                    <tr key={idx} className="bg-white">
+                      {renderBuildingUsageCells(row, rainyByBildTpYearsHeader)}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */}
+        <section id="status-rain-purpose-distribution" className="scroll-mt-[120px]">
+          <SectionTitle>빗물이용시설의 용도별 분포 ({selectYear}년 기준)</SectionTitle>
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <thead>
+                  <tr>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>용도</th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "84px" }}>개소수<br />(개소)</th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "84px" }}>저류용량<br />(천m³)</th>
+                    <th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
+                  </tr>
+                  <tr>
+                    {renderPartHeaders(partBildTpHeader, headerColors8)}
+                  </tr>
+                </thead>
+                <tbody>
+                  {rainyByUsgBildTp.map((row, idx) => (
+                    <tr key={`${row.USG_NM}-${idx}`} className="bg-white">
+                      {renderRainyByUsgBildTpCells(row)}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className="my-11" />
+
+        {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */}
+        <section id="status-rain-purpose-usage" className="pb-[200px] scroll-mt-[120px]">
+          <SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
+          <div className="mt-8">
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <thead>
+                  <tr>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>용도</th>
+                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
+                  </tr>
+                  <tr>
+                    {renderPartHeaders(rainyYears, headerColors6)}
+                  </tr>
+                </thead>
+                <tbody>
+                  {rainyByUsgYears.map((row, idx) => (
+                    <tr key={idx} className="bg-white">
+                      {renderBuildingUsageCells(row, rainyByUsgYearsHeader)}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <SourceText />
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dm/app/(with-layout)/status/sewage/page.tsx b/apps/dm/app/(with-layout)/status/sewage/page.tsx
new file mode 100644
index 000000000..fdb1fe8f9
--- /dev/null
+++ b/apps/dm/app/(with-layout)/status/sewage/page.tsx
@@ -0,0 +1,418 @@
+"use client";
+
+import React from "react";
+import SubPageHeader from "@/components/SubPageHeader";
+
+// 공통 섹션 타이틀 컴포넌트
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// 출처 텍스트
+function SourceText() {
+  return (
+    <p className="mt-7 text-center text-[13px] text-neutral-500">
+      자료: 환경부(2024), 「2023 하수도 통계」
+    </p>
+  );
+}
+
+/**
+ * 공통 테이블 스타일
+ * - table-fixed: 열 넓이를 고정하고 균등 분배하기 위해 추가
+ * - 폰트 사이즈: 16px로 수정
+ */
+const tableStyles = {
+  container: "w-[1000px] mx-auto overflow-hidden",
+  table: "w-full table-fixed border-collapse text-center text-[16px]",
+  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
+  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
+  headerBg: "bg-[#E3E7EA]",
+};
+
+// export default function TreatedWaterPage() {
+//   return (
+//     <section id={id} className={`scroll-mt-[140px] ${className}`}>
+//       <SectionTitle>{title}</SectionTitle>
+//       <div className="mt-8">{children}</div>
+//     </section>
+//   );
+// }
+
+export default function TreatedStatusPage() {
+  return (
+    <div className="relative bg-white">
+      {/* <BusinessSubNav /> */}
+
+      <SubPageHeader
+        title="하수처리수 재이용시설(현황)"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 현황", href: "/status/rain" },
+          { label: "하수처리수 재이용시설(현황)" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      />
+
+      <div className="pr-0">
+        <Hr className="my-7" />
+
+      {/* 1) 연도별 하수처리수 재이용 현황 */}
+      <section className="mt-10">
+        <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
+        <div className="mt-10">
+          <div className={tableStyles.container}>
+            <table className={tableStyles.table}>
+              <colgroup>
+                <col style={{ width: '130px' }} />
+                <col style={{ width: '180px' }} />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
+                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  {
+                    group: "전체",
+                    rows: [
+                      ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "671", "681", "698", "704", "714", "717"],
+                      ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "7,163.7", "7,140.4", "7,375.6", "7,335.8", "7,378.9", "7,537.2"],
+                      ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "1,112.7", "1,148.7", "1,148.7", "1,127.0", "1,136.8", "1,137.5"],
+                      ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", "17.4", "16.5", "15.5", "14.1", "14.3", "14.4"],
+                    ]
+                  },
+                  {
+                    group: "법적 대상",
+                    rows: [
+                      ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "68", "82", "94", "97", "101", "118"],
+                      ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "761.2", "839.0", "935.3", "1,158.7", "1,220.6", "1,473.6"],
+                      ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "162.2", "190.6", "218.5", "244.6", "247.2", "324.9"],
+                      ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", "24.7", "25.4", "27.8", "25.7", "24.2", "24.1"],
+                    ]
+                  },
+                  {
+                    group: "법적 미대상",
+                    rows: [
+                      ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "603", "599", "604", "607", "613", "599"],
+                      ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "6,402.5", "6,301.4", "6,440.3", "6,177.1", "6,158.3", "6,063.5"],
+                      ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "950.6", "958.1", "926.2", "882.4", "889.5", "812.7"],
+                      ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", "16.5", "15.3", "13.6", "12.2", "12.6", "12.5"],
+                    ]
+                  }
+                ].map((section, sIdx) => (
+                  <React.Fragment key={sIdx}>
+                    {section.rows.map((row, rIdx) => (
+                      <tr key={`${sIdx}-${rIdx}`} className="bg-white">
+                        {rIdx === 0 && (
+                          <td 
+                            rowSpan={section.rows.length} 
+                            className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
+                          >
+                            {section.group}
+                          </td>
+                        )}
+                        {row.map((val, i) => {
+                          const isFirstCol = i === 0;
+                          const isHighlightedCol = [1, 3, 5].includes(i);
+                          return (
+                            <td 
+                              key={i} 
+                              className={`${tableStyles.td} ${isFirstCol ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                              dangerouslySetInnerHTML={{ __html: val }}
+                            />
+                          );
+                        })}
+                      </tr>
+                    ))}
+                  </React.Fragment>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <SourceText />
+        </div>
+      </section>
+
+        <Hr className="my-11" />
+
+      {/* 2) 용도별 하수처리수 재이용 현황 */}
+      <section>
+        <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
+        <div className="mt-8">
+          <div className={tableStyles.container}>
+            <table className={tableStyles.table}>
+              <colgroup>
+                <col style={{ width: '180px' }} />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
+                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  { label: "총 재이용량", type: "total", values: ["1,112.7", "1,148.7", "1,144.7", "1,127.0", "1,136.8", "1,137.5"] },
+                  { label: "장내 재이용", type: "category", values: ["520.6", "519.8", "513.9", "520.3", "502.2", "490.0"] },
+                  { label: "세척수", type: "red-item", values: ["177.9", "174.4", "169.4", "180.9", "196.8", "191.2"] },
+                  { label: "냉각수", type: "red-item", values: ["45.5", "46.8", "50.4", "40.6", "38.3", "41.7"] },
+                  { label: "청소수", type: "red-item", values: ["17.6", "21.2", "21.2", "21.7", "20.8", "20.5"] },
+                  { label: "조경용수", type: "red-item", values: ["0.1", "0.1", "-", "-", "-", "-"] },
+                  { label: "회생용수", type: "red-item", values: ["15.8", "16.7", "17.8", "15.7", "14.4", "14.0"] },
+                  { label: "장내급수도", type: "red-item", values: ["2.4", "-", "-", "-", "-", "-"] },
+                  { label: "장내기타용수", type: "red-item", values: ["261.3", "260.6", "255.0", "261.1", "231.8", "222.6"] },
+                  { label: "장외 재이용", type: "category", values: ["592.1", "628.9", "630.8", "606.7", "634.6", "647.5"] },
+                  { label: "청소·화장실용수", type: "blue-item", values: ["0.6", "0.4", "0.4", "0.4", "0.4", "0.4"] },
+                  { label: "세척·살수용수", type: "blue-item", values: ["5.6", "9.9", "2.9", "2.1", "3.0", "3.6"] },
+                  { label: "조경용수", type: "blue-item", values: ["10.3", "16.4", "5.9", "4.5", "8.9", "9.5"] },
+                  { label: "친수용수", type: "blue-item", values: ["7.8", "3.1", "3.1", "3.0", "10.9", "10.5"] },
+                  { label: "하천유지용수", type: "blue-item", values: ["480.5", "482.5", "496.2", "442.7", "471.7", "484.0"] },
+                  { label: "농업용수", type: "blue-item", values: ["12.2", "11.9", "13.4", "10.7", "10.6", "11.4"] },
+                  { label: "지하수 충전", type: "blue-item", values: ["0.0", "0.0", "0.0", "13.4", "0.0", "0.0"] },
+                  { label: "공업용수", type: "blue-item", values: ["75.2", "104.6", "108.9", "129.9", "129.0", "128.1"] },
+                ].map((row, idx) => {
+                  const isSubItem = row.type === "red-item" || row.type === "blue-item";
+                  const isLastInGroup = idx === 8 || idx === 17;
+
+                  return (
+                    <tr key={idx} className="bg-white">
+                      <td className={`${tableStyles.td} relative`}>
+                        {isSubItem ? (
+                          <>
+                            <div className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
+                            <div className={`absolute left-[16px] w-[4px] z-20 ${row.type === 'red-item' ? 'bg-[#FF8B8B]' : 'bg-[#4ECBFF]'} top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
+                            <span className="text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]">{row.label}</span>
+                          </>
+                        ) : (
+                          <span className="font-bold text-neutral-900 block w-full text-center">{row.label}</span>
+                        )}
+                      </td>
+                      {row.values.map((val, i) => (
+                        <td key={i} className={`${tableStyles.td} ${[0, 2, 4].includes(i) ? "bg-[#EAF5F5]" : ""}`}>
+                          {val}
+                        </td>
+                      ))}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+          <SourceText />
+        </div>
+      </section>
+
+        <Hr className="my-11" />
+
+      {/* 3) 하수처리시설 설치 및 이용 현황 */}
+      <section>
+        <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
+        <div className="mt-8">
+          <div className={tableStyles.container}>
+            <table className={tableStyles.table}>
+              <colgroup>
+                <col style={{ width: '130px' }} />
+                <col style={{ width: '160px' }} />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
+                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  {
+                    group: "전체",
+                    rows: [
+                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "671", "681", "698", "704", "714", "717"],
+                      ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "25,846", "26,067", "26,244", "26,492", "26,586", "26,766"],
+                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "1,112.7", "1,148.7", "1,144.7", "1,127.0", "1,136.8", "1,137.5"],
+                    ]
+                  },
+                  {
+                    group: "법적 대상",
+                    rows: [
+                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "68", "82", "94", "97", "101", "118"],
+                      ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "3,088.9", "3,359.2", "3,612.6", "4,412.2", "4,692.3", "5,503.8"],
+                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "162.2", "190.6", "218.5", "244.6", "247.2", "324.9"],
+                    ]
+                  },
+                  {
+                    group: "법적 미대상",
+                    rows: [
+                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "603", "599", "604", "607", "613", "599"],
+                      ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "22,757", "22,708", "22,631", "22,080", "21,894", "21,262"],
+                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "950.6", "958.1", "926.2", "882.4", "889.5", "812.7"],
+                    ]
+                  }
+                ].map((section, sIdx) => (
+                  <React.Fragment key={sIdx}>
+                    {section.rows.map((row, rIdx) => (
+                      <tr key={`${sIdx}-${rIdx}`} className="bg-white">
+                        {rIdx === 0 && (
+                          <td 
+                            rowSpan={section.rows.length} 
+                            className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
+                          >
+                            {section.group}
+                          </td>
+                        )}
+                        {row.map((val, i) => {
+                          const isFirstCol = i === 0;
+                          const isHighlightedCol = [1, 3, 5].includes(i);
+                          return (
+                            <td 
+                              key={i} 
+                              className={`${tableStyles.td} ${isFirstCol ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                              dangerouslySetInnerHTML={{ __html: val }}
+                            />
+                          );
+                        })}
+                      </tr>
+                    ))}
+                  </React.Fragment>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <SourceText />
+        </div>
+      </section>
+
+        <Hr className="my-11" />
+
+      {/* 4) 시도별 하수처리수 재이용 현황 */}
+      <section className="pb-[200px]">
+        <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
+        <div className="mt-8">
+          <div className={tableStyles.container}>
+            <div className="text-right text-[13px] mb-2 text-neutral-600">(단위: 백만m³/일)</div>
+            <table className={tableStyles.table}>
+              <colgroup>
+                <col style={{ width: '160px' }} />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+                <col />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>시도</th>
+                  <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>연간<br/>하수<br/>처리량</th>
+                  <th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>재이용현황</th>
+                  <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>재이용률<br/>(%)</th>
+                  <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>비고</th>
+                </tr>
+                <tr>
+                  <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>계</th>
+                  <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>장내</th>
+                  <th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}>장외</th>
+                </tr>
+                <tr>
+                  {/* 💡 하천유지용수는 14px, 나머지 하위 헤더는 16px로 적용 */}
+                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>소계</th>
+                  <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>하천유지용수</th>
+                  <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>공업용수</th>
+                  <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>농업용수</th>
+                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>기타용수</th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  ["합계", "7,537.2", "1,137.5", "490.0", "647.5", "484.0", "128.1", "11.4", "24.0", "15.1%", ""],
+                  ["서울특별시", "1,567.0", "114.9", "59.3", "55.6", "55.1", "-", "-", "0.5", "7.3%", ""],
+                  ["부산광역시", "491.5", "146.2", "120.7", "25.5", "25.3", "-", "-", "0.2", "29.7%", ""],
+                  ["대구광역시", "432.7", "102.4", "38.2", "64.2", "64.1", "-", "-", "0.1", "23.7%", ""],
+                  ["인천광역시", "302.3", "57.7", "11.6", "46.1", "29.2", "12.1", "0.5", "4.3", "19.1%", ""],
+                  ["광주광역시", "211.1", "28.7", "6.5", "22.3", "22.2", "-", "-", "0.1", "13.6%", ""],
+                  ["대전광역시", "244.6", "11.9", "11.9", "0.68", "0.0", "-", "-", "0.1", "4.9%", ""],
+                  ["울산광역시", "235.1", "36.1", "6.1", "29.9", "29.7", "0.2", "-", "-", "15.3%", ""],
+                  ["세종특별자치시", "38.5", "2.5", "2.0", "0.5", "0.4", "-", "0.2", "-", "6.6%", ""],
+                  ["경기도", "1,926.8", "313.3", "122.2", "191.0", "153.0", "33.3", "0.4", "4.3", "16.3%", ""],
+                  ["강원도", "230.4", "19.6", "15.4", "4.2", "2.1", "-", "-", "2.1", "8.5%", ""],
+                  ["충청북도", "190.9", "15.6", "6.3", "9.2", "7.4", "0.6", "-", "1.2", "8.2%", ""],
+                  ["충청남도", "241.5", "41.4", "9.8", "31.5", "17.7", "8.6", "4.5", "0.8", "17.1%", ""],
+                  ["전라북도", "292.4", "42.7", "7.5", "35.1", "33.5", "0.2", "1.0", "0.5", "14.6%", ""],
+                  ["전라남도", "254.0", "23.6", "12.3", "11.3", "8.7", "0.0", "1.0", "1.6", "9.3%", ""],
+                  ["경상북도", "378.4", "129.1", "33.7", "95.3", "20.8", "72.5", "0.8", "1.3", "34.1%", ""],
+                  ["경상남도", "411.3", "50.1", "25.0", "25.0", "14.7", "0.5", "3.0", "6.9", "12.2%", ""],
+                  ["제주특별자치도", "88.6", "1.7", "1.5", "0.12", "-", "-", "0.1", "-", "1.9%", ""],
+                ].map((row, idx) => (
+                  <tr key={idx} className="bg-white">
+                    {/* 💡 연간하수처리량(index 1), 장내(index 3), 재이용률(index 9) 컬러 하이라이트 적용 */}
+                    {row.map((val, i) => (
+                      <td 
+                        key={i} 
+                        className={`${tableStyles.td} ${i === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 9].includes(i) ? "bg-[#EAF5F5]" : ""}`}
+                      >
+                        {val}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <SourceText />
+        </div>
+      </section>
+
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm_new/app/api/postcode/route.ts b/apps/dm/app/api/postcode/route.ts
similarity index 100%
rename from apps/dm_new/app/api/postcode/route.ts
rename to apps/dm/app/api/postcode/route.ts
diff --git a/apps/dm/app/base.tsx b/apps/dm/app/base.tsx
deleted file mode 100644
index bae02acb2..000000000
--- a/apps/dm/app/base.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-
-import { BaseLayout } from "@common/components";
-import type { MenuItem } from "./store/common";
-import { useDmStore } from "./store";
-import { usePathname, useRouter } from "next/navigation";
-
-export default function Base({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const { getMenuAuth } = useDmStore((state) => state);
-
-  const router = useRouter();
-  const pathname = usePathname();
-
-  const handleClick = (id: MenuItem) => {
-    getMenuAuth(id.menuCd);
-    router.push(id.urlPath);
-  };
-
-  return (
-    <BaseLayout currentPath={pathname ?? ""} handleMenuClick={handleClick}>
-      {children}
-    </BaseLayout>
-  );
-}
diff --git a/apps/dm/app/common/transValueFormat.tsx b/apps/dm/app/common/transValueFormat.tsx
index 4d76d84e0..92f7024e4 100644
--- a/apps/dm/app/common/transValueFormat.tsx
+++ b/apps/dm/app/common/transValueFormat.tsx
@@ -23,4 +23,34 @@ export default function TransValueFormat({value='', format=''}: CommonProps) {
         : String(value ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</>
     : <>{value}</>
   )
-}
\ No newline at end of file
+}
+
+/**
+ * 천,만 등의 단위 변경 && 반올림 및 소숫점 자리수 지정
+ * @param value 
+ * @param unitSize 단위 변경 1000 인 경우, 100,000 -> 100 으로 변경
+ * @param decimalPlaces 어느 자리수에서 반올림할지 지정 1이면 소수 두번째 자리에서 반올림
+ * @returns 
+ */
+export const formatUsage = (
+    value: string | number,
+    unitSize: number = 1,
+    decimalPlaces: number = 0
+  ) => {
+    if (value === null || value === undefined || value === "") return "";
+    const numeric =
+      typeof value === "number" ? value : Number(String(value).replaceAll(",", ""));
+
+    if (Number.isNaN(numeric)) {
+      return String(value);
+    }
+
+    const scaledValue = numeric / unitSize;
+    const roundedValue =
+      Math.round(scaledValue * 10 ** decimalPlaces) / 10 ** decimalPlaces;
+
+    return roundedValue.toLocaleString("ko-KR", {
+      minimumFractionDigits: decimalPlaces,
+      maximumFractionDigits: decimalPlaces,
+    });
+  };
\ No newline at end of file
diff --git a/apps/dm_new/app/globals.css b/apps/dm/app/commonOrigin.css
similarity index 93%
rename from apps/dm_new/app/globals.css
rename to apps/dm/app/commonOrigin.css
index 2fee793a1..fdc8d0eb8 100644
--- a/apps/dm_new/app/globals.css
+++ b/apps/dm/app/commonOrigin.css
@@ -1,5 +1,4 @@
-/* @import "../../../packages/common/components/src/base.css"; */
-/* @import "../../../packages/common/components/src/base.css"; */
+@import "../../../packages/common/components/src/base.css";
 
 @tailwind base;
 @tailwind components;
@@ -80,4 +79,4 @@
 
 body {
   font-family: "NotoSansKR", sans-serif;
-}
+}
\ No newline at end of file
diff --git a/apps/dm/app/contents-page.css b/apps/dm/app/contents-page.css
new file mode 100644
index 000000000..0bc23308b
--- /dev/null
+++ b/apps/dm/app/contents-page.css
@@ -0,0 +1,565 @@
+.contents-page {
+  color: #0f172a;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.contents-page .page-title {
+  display: inline-block;
+}
+
+.contents-page .page-title h2 {
+  position: relative;
+  display: inline-block;
+  padding: 0 0.5rem;
+  font-size: 28px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.025em;
+  color: #0f172a;
+}
+
+.contents-page .page-title .title-text {
+  position: relative;
+  z-index: 1;
+}
+
+.contents-page .page-title .title-bg {
+  position: absolute;
+  left: 0;
+  bottom: -4px;
+  z-index: 0;
+  height: 12px;
+  width: 100%;
+  background: linear-gradient(to right, #7dd3fc, #86efac);
+}
+
+.contents-page .sections {
+  margin-top: 2.5rem;
+}
+
+.contents-page .section {
+  scroll-margin-top: 120px;
+}
+
+.contents-page .section.first {
+  margin-top: 2.5rem;
+}
+
+.contents-page .section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.contents-page .section-bar {
+  height: 20px;
+  width: 3px;
+  flex-shrink: 0;
+  background: #0ea5e9;
+}
+
+.contents-page .section-title h3 {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #171717;
+}
+
+.contents-page .image-wrap {
+  margin-top: 2rem;
+  width: 100%;
+  overflow-x: auto;
+}
+
+.contents-page .image-wrap img {
+  display: block;
+  margin: 0 auto;
+  max-width: none;
+  height: auto;
+}
+
+.contents-page .divider {
+  height: 2px;
+  width: 100%;
+  margin: 2.75rem 0;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.contents-page .rain-example-sections {
+  padding-bottom: 120px;
+}
+
+.contents-page .image-slider {
+  margin-top: 2rem;
+}
+
+.contents-page .image-slider-inner {
+  max-width: 1240px;
+  margin: 0 auto;
+}
+
+.contents-page .image-slider-viewport {
+  overflow: hidden;
+  user-select: none;
+  touch-action: pan-y;
+  cursor: grab;
+}
+
+.contents-page .image-slider-viewport:active {
+  cursor: grabbing;
+}
+
+.contents-page .image-slider-track {
+  display: flex;
+  transition: transform 0.5s ease-out;
+}
+
+.contents-page .image-slider-page {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem;
+  min-width: 100%;
+}
+
+.contents-page .image-slide {
+  position: relative;
+  height: 340px;
+  overflow: hidden;
+  border-radius: 20px;
+  background: #f5f5f5;
+}
+
+.contents-page .image-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.contents-page .image-slider-dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin-top: 1.25rem;
+}
+
+.contents-page .image-slider-dot {
+  width: 8px;
+  height: 8px;
+  border: 0;
+  border-radius: 9999px;
+  background: #d8dde3;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.contents-page .image-slider-dot.is-active {
+  background: #18bceb;
+}
+
+@media (max-width: 768px) {
+  .contents-page .image-slider-page {
+    grid-template-columns: 1fr;
+  }
+
+  .contents-page .image-slide {
+    height: 280px;
+  }
+}
+
+.contents-page .content-group {
+  margin-top: 2.5rem;
+  padding: 0 2.5rem;
+}
+
+.contents-page .content-block + .content-block {
+  margin-top: 2.25rem;
+}
+
+.contents-page .block-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.contents-page .block-title-icon {
+  position: relative;
+  display: inline-block;
+  width: 27px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.contents-page .block-title-icon .bubble {
+  position: absolute;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
+}
+
+.contents-page .block-title-icon .bubble-sky {
+  left: 0;
+  background: rgba(1, 172, 229, 0.4);
+}
+
+.contents-page .block-title-icon .bubble-green {
+  left: 7px;
+  background: rgba(109, 187, 79, 0.4);
+}
+
+.contents-page .block-title h4 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.contents-page .bullet-list {
+  margin-top: 1rem;
+  padding-left: 2rem;
+  color: #4f4f4f;
+  font-size: 16px;
+  line-height: 1.8;
+  list-style: disc;
+}
+
+.contents-page .table-wrap {
+  margin-top: 2rem;
+  overflow-x: auto;
+}
+
+.contents-page .contents-table {
+  width: 100%;
+  min-width: 860px;
+  border-collapse: collapse;
+  border: 1px solid #d8dde3;
+  text-align: center;
+}
+
+.contents-page .contents-table th,
+.contents-page .contents-table td {
+  border: 1px solid #d8dde3;
+  padding: 0.75rem 1rem;
+}
+
+.contents-page .contents-table th {
+  font-size: 18px;
+  font-weight: 500;
+  color: #fff;
+}
+
+.contents-page .contents-table td {
+  background: #fff;
+  font-size: 16px;
+  color: #4f4f4f;
+}
+
+.contents-page .contents-table .th-blue {
+  background: #14a9d9;
+}
+
+.contents-page .contents-table .th-teal {
+  background: #39b2bd;
+}
+
+.contents-page .contents-table .th-mint {
+  background: #58b99a;
+}
+
+.contents-page .contents-table .th-green {
+  background: #70bf4b;
+}
+
+.contents-page .contents-table .th-teal-greywater {
+  background: #40b5a5;
+}
+
+.contents-page .contents-table th.th-gray,
+.contents-page .global-table th.th-gray {
+  background: #bfc9d2;
+  color: #222;
+}
+
+.contents-page .contents-table th.th-blue,
+.contents-page .global-table th.th-blue {
+  background: #14a9d9;
+  color: #fff;
+}
+
+.contents-page .global-table th.th-teal-2 {
+  background: #55bda5;
+  color: #fff;
+}
+
+.contents-page .global-table th.th-green-2 {
+  background: #6ab84e;
+  color: #fff;
+}
+
+.contents-page .bg-cyan {
+  background: #eaf7f8 !important;
+}
+
+.contents-page .bg-green {
+  background: #eaf8e6 !important;
+}
+
+.contents-page .global-case-sections {
+  padding-bottom: 120px;
+}
+
+.contents-page .greywater-example-sections {
+  padding-bottom: 120px;
+}
+
+.contents-page .sewage-example-sections {
+  padding-bottom: 120px;
+}
+
+.contents-page .global-content-group {
+  gap: 0;
+}
+
+.contents-page .content-rich-list {
+  margin-top: 1rem;
+  color: #4f4f4f;
+  font-size: 16px;
+  line-height: 1.8;
+}
+
+.contents-page .content-rich-list li + li {
+  margin-top: 0.5rem;
+}
+
+.contents-page .content-rich-list .depth-0 {
+  margin-left: 1.5rem;
+  padding-left: 0.25rem;
+  list-style: disc;
+  font-weight: 600;
+  color: #555;
+}
+
+.contents-page .content-rich-list .depth-1 {
+  margin-left: 2.125rem;
+  list-style: none;
+  color: #777;
+}
+
+.contents-page .content-rich-list .depth-1::before {
+  content: "- ";
+}
+
+.contents-page .content-rich-list .depth-2 {
+  margin-left: 3.25rem;
+  list-style: none;
+  color: #666;
+}
+
+.contents-page .content-rich-list .depth-3 {
+  margin-left: 3.5rem;
+  list-style: none;
+  color: #777;
+}
+
+.contents-page .global-notice-box,
+.contents-page .global-description-box {
+  max-width: 1000px;
+  margin: 1.25rem auto 0;
+  border-radius: 20px;
+  background: #eaf7f8;
+}
+
+.contents-page .global-notice-box {
+  padding: 1.75rem 2rem;
+}
+
+.contents-page .global-description-box {
+  padding: 1.5rem 1.75rem;
+}
+
+.contents-page .global-notice-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.contents-page .global-water-bullet {
+  width: 27px;
+  height: 33px;
+  margin-top: 0.25rem;
+  flex-shrink: 0;
+}
+
+.contents-page .global-notice-title {
+  display: block;
+  font-size: 26px;
+  font-weight: 800;
+  color: #007fa4;
+}
+
+.contents-page .global-text-dark {
+  color: #1a1a1a;
+}
+
+.contents-page .global-plain-list {
+  margin-top: 1.25rem;
+  padding-left: 1.25rem;
+  list-style: disc;
+  color: #555;
+  font-size: 16px;
+  line-height: 1.7;
+}
+
+.contents-page .global-plain-list li + li {
+  margin-top: 0.5rem;
+}
+
+.contents-page .global-table-wrap {
+  overflow-x: auto;
+}
+
+.contents-page .global-overview-table-wrap {
+  max-width: 1000px;
+  margin: 1.25rem auto 0;
+}
+
+.contents-page .global-table {
+  width: 100%;
+  text-align: center;
+  border-collapse: collapse;
+}
+
+.contents-page .global-table th {
+  padding: 0.75rem 1rem;
+  font-size: 17px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.contents-page .overview-compare-table {
+  min-width: 760px;
+}
+
+.contents-page .overview-compare-table th {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  font-size: 18px;
+  font-weight: 500;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.contents-page .overview-compare-table td {
+  border: 1px solid #aeb9c2;
+  padding: 1rem;
+  font-size: 28px;
+  font-weight: 700;
+  color: #4f4f4f;
+  background: #fff;
+}
+
+.contents-page .overview-compare-table .country-cell {
+  font-size: 20px;
+  color: #333;
+}
+
+.contents-page .country-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+}
+
+.contents-page .country-flag {
+  width: 42px;
+  height: 28px;
+  object-fit: cover;
+}
+
+.contents-page .reuse-rate-table {
+  min-width: 960px;
+}
+
+.contents-page .reuse-rate-table th {
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.contents-page .reuse-rate-table td {
+  border: 1px solid #aeb9c2;
+  padding: 0.75rem 1rem;
+  font-size: 15px;
+  color: #4f4f4f;
+  background: #fff;
+}
+
+.contents-page .reuse-rate-table .cell-strong {
+  font-weight: 600;
+}
+
+.contents-page .info-card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1.25rem;
+  margin-top: 2rem;
+}
+
+.contents-page .info-card {
+  border: 2px solid #01ace5;
+  border-radius: 8px;
+  background: #eaf5f5;
+  padding: 1.25rem;
+}
+
+.contents-page .info-card strong {
+  display: block;
+  font-size: 20px;
+  font-weight: 700;
+  color: #333;
+}
+
+.contents-page .info-card p {
+  margin-top: 0.75rem;
+  font-size: 15px;
+  line-height: 1.6;
+  color: #555;
+}
+
+.contents-page .global-table-padding {
+  margin-top: 2rem;
+  padding: 0 120px;
+}
+
+.contents-page .global-price-table td {
+  background: #fff;
+}
+
+.contents-page .global-accent {
+  color: #01ace5;
+}
+
+@media (max-width: 1200px) {
+  .contents-page .info-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .contents-page .global-table-padding {
+    padding: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .contents-page .global-notice-row {
+    flex-direction: column;
+  }
+
+  .contents-page .global-notice-title {
+    font-size: 22px;
+  }
+
+  .contents-page .info-card-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/apps/dm/app/globals.css b/apps/dm/app/globals.css
index f30aa3031..d3fa1c6e0 100644
--- a/apps/dm/app/globals.css
+++ b/apps/dm/app/globals.css
@@ -1,4 +1,6 @@
-@import "../../../packages/common/components/src/base.css";
+/* @import "../../../packages/common/components/src/base.css"; */
+/* @import "../../../packages/common/components/src/base.css"; */
+@import "./contents-page.css";
 
 @tailwind base;
 @tailwind components;
@@ -68,3 +70,15 @@
     @apply bg-background text-foreground;
   }
 }
+
+@font-face {
+  font-family: "NotoSansKR";
+  src: url("/fonts/NotoSansKR-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+body {
+  font-family: "NotoSansKR", sans-serif;
+}
diff --git a/apps/dm/app/layout.tsx b/apps/dm/app/layout.tsx
index 7224c9dc2..49c6c357c 100644
--- a/apps/dm/app/layout.tsx
+++ b/apps/dm/app/layout.tsx
@@ -15,7 +15,11 @@ export default function RootLayout({
       <head>
         <title>물재이용 대민</title>
       </head>
-      <body>{children}</body>
+      <body>
+        <div className="min-w-[1400px]">
+          {children}
+        </div>
+      </body>
     </html>
   );
 }
diff --git a/apps/dm_new/app/main/SideIndicator.tsx b/apps/dm/app/main/SideIndicator.tsx
similarity index 100%
rename from apps/dm_new/app/main/SideIndicator.tsx
rename to apps/dm/app/main/SideIndicator.tsx
diff --git a/apps/dm_new/app/main/_hooks/useScrollSpy.ts b/apps/dm/app/main/_hooks/useScrollSpy.ts
similarity index 100%
rename from apps/dm_new/app/main/_hooks/useScrollSpy.ts
rename to apps/dm/app/main/_hooks/useScrollSpy.ts
diff --git a/apps/dm_new/app/main/_sections/Cases.tsx b/apps/dm/app/main/_sections/Cases.tsx
similarity index 97%
rename from apps/dm_new/app/main/_sections/Cases.tsx
rename to apps/dm/app/main/_sections/Cases.tsx
index 757950369..0d8523647 100644
--- a/apps/dm_new/app/main/_sections/Cases.tsx
+++ b/apps/dm/app/main/_sections/Cases.tsx
@@ -28,7 +28,7 @@ export default function Cases() {
 
                 <div className="mt-14">
                     <a
-                        href="/reuse/cases/rain"
+                        href="/status"
                         className="
                         inline-flex items-center justify-center gap-3
                         w-[260px] h-[52px]
diff --git a/apps/dm_new/app/main/_sections/Hero.tsx b/apps/dm/app/main/_sections/Hero.tsx
similarity index 94%
rename from apps/dm_new/app/main/_sections/Hero.tsx
rename to apps/dm/app/main/_sections/Hero.tsx
index fa3c525de..4cca50e95 100644
--- a/apps/dm_new/app/main/_sections/Hero.tsx
+++ b/apps/dm/app/main/_sections/Hero.tsx
@@ -11,7 +11,7 @@ export default function Hero() {
       <div className="absolute inset-0 z-10 flex items-center justify-center">
         <div className="flex flex-col items-center justify-items-center gap-[40px] mx-auto max-w-[1520px] px-6 text-center text-white">
           <h1 className="text-5xl font-bold tracking-tight">물 재이용</h1>
-          <p className="text-xl font-medium leading-6 text-white/85 max-w-[720px] mx-auto">
+          <p className="text-2xl font-medium leading-8 text-white/85 max-w-[720px] mx-auto">
             빗물, 오수, 하수처리수, 폐수처리수, 발전소 온배수를 재이용처리하여<br />
             생활, 공업, 농업, 조경, 하천유지 등의 용도로 재이용합니다.
           </p>
diff --git a/apps/dm_new/app/main/_sections/IntroCards.tsx b/apps/dm/app/main/_sections/IntroCards.tsx
similarity index 95%
rename from apps/dm_new/app/main/_sections/IntroCards.tsx
rename to apps/dm/app/main/_sections/IntroCards.tsx
index c8c69ad7b..e8c13c3d6 100644
--- a/apps/dm_new/app/main/_sections/IntroCards.tsx
+++ b/apps/dm/app/main/_sections/IntroCards.tsx
@@ -20,25 +20,25 @@ const INTRO_CARDS: IntroCardItem[] = [
     title: "물 재이용 법",
     desc: "물의 재이용 촉진 및 지원에 관한 법률을 시행하고, 일부 법률은 개정되었습니다.",
     image: card01,
-    href: "/reuse/intro/law",
+    href: "/intro#law-plan",
   },
   {
     title: "친환경 수자원 빗물",
     desc: "가뭄을 극복하고 홍수를 예방하기 위해 비가 내릴 때 빗물을 모아두었다가 사용합니다.",
     image: card02,
-    href: "/reuse/intro/rain",
+    href: "/intro#rain-intro",
   },
   {
     title: "알뜰하게 재이용되는 중수",
     desc: "한번 사용한 물을 중수도 시설을 통해 재생하여 개별적 또는 지역적으로 재이용할 수 있습니다.",
     image: card03,
-    href: "/reuse/intro/greywater",
+    href: "/intro#greywater-intro",
   },
   {
     title: "하수처리수 재이용",
     desc: "사용하고 버려진 공공하수처리장으로 모여진 물을 용도에 맞는 처리 후 재이용 할 수 있습니다.",
     image: card04,
-    href: "/reuse/intro/treated",
+    href: "/intro#treatedwater-intro",
   },
 ];
 
@@ -79,7 +79,7 @@ export default function IntroCards() {
                         <h3 className="text-lg font-semibold tracking-tight">
                             {card.title}
                         </h3>
-                        <p className="mt-2 text-sm leading-relaxed text-white/90 line-clamp-3">
+                        <p className="mt-2 text-sm leading-relaxed text-white/60 line-clamp-3">
                             {card.desc}
                         </p>
                     </div>
diff --git a/apps/dm_new/app/main/_sections/ProcessFlow.tsx b/apps/dm/app/main/_sections/ProcessFlow.tsx
similarity index 100%
rename from apps/dm_new/app/main/_sections/ProcessFlow.tsx
rename to apps/dm/app/main/_sections/ProcessFlow.tsx
diff --git a/apps/dm_new/app/main/layout.tsx b/apps/dm/app/main/layout.tsx
similarity index 84%
rename from apps/dm_new/app/main/layout.tsx
rename to apps/dm/app/main/layout.tsx
index b1304a66a..873024784 100644
--- a/apps/dm_new/app/main/layout.tsx
+++ b/apps/dm/app/main/layout.tsx
@@ -1,12 +1,10 @@
 // app/main/layout.tsx
 import "../reuse.module.css";
-import TopNav from "@/components/TopNav";
 import { StoreProvider } from "../store";
 
 export default function ReuseLandingLayout({ children }: { children: React.ReactNode }) {
   return (
     <StoreProvider>
-      <TopNav />
       <div className="pt-[83px]">{children}</div> {/* TopNav 높이만큼 */}
     </StoreProvider>
   );
diff --git a/apps/dm_new/app/main/page.tsx b/apps/dm/app/main/page.tsx
similarity index 83%
rename from apps/dm_new/app/main/page.tsx
rename to apps/dm/app/main/page.tsx
index 2ab2b3c7f..5b9cf0e6d 100644
--- a/apps/dm_new/app/main/page.tsx
+++ b/apps/dm/app/main/page.tsx
@@ -1,8 +1,11 @@
-// apps/dm/app/(landing)/reuse/page.tsx
+/**
+ * 대민 메인 페이지(첫페이지)
+ */
 "use client";
 
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import TopNav from "@/components/TopNav";
+import { removeCookie } from "@/src/shared/lib";
 import SideIndicator from "./SideIndicator";
 import { useScrollSpy } from "./_hooks/useScrollSpy";
 
@@ -11,6 +14,9 @@ import IntroCards from "./_sections/IntroCards";
 import Cases from "./_sections/Cases";
 import ProcessFlow from "./_sections/ProcessFlow";
 
+const CLAIM_NAME = "Authorization";
+const AUTH_USER_ID = "token-id";
+
 const LANDING_SECTIONS = [
   { id: "main", label: "Main" },
   {
@@ -34,6 +40,11 @@ export default function ReuseLandingPage() {
   const sectionIds = useMemo(() => LANDING_SECTIONS.map((s) => s.id), []);
   const activeId = useScrollSpy(sectionIds);
 
+  useEffect(() => {
+    removeCookie(CLAIM_NAME);
+    removeCookie(AUTH_USER_ID);
+  }, []);
+
   return (
     <main className="bg-white">
      
diff --git a/apps/dm/app/page.tsx b/apps/dm/app/page.tsx
deleted file mode 100644
index fdb323086..000000000
--- a/apps/dm/app/page.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client"
-
-import Link from 'next/link';
-import { Button } from '@common/components/ui';
-
-export default function Home() {
-  return (
-    <>
-      <div className='flex'>
-        <Button className='ml-5 place-self-auto'> 
-          <Link href="/pages/wrAbout">물재이용이란</Link>
-        </Button>
-        <Button className='ml-5 place-self-auto'> 
-          <Link href="/pages/wrExample">물재이용 사례</Link>
-        </Button>
-        <Button className='ml-5 place-self-auto'> 
-          <Link href="/pages/wrStatus">물재이용 현황</Link>
-        </Button>
-        <Button className='ml-5 place-self-auto'> 
-          <Link href="/pages/wrOverview">물재이용 사업추진절차</Link>
-        </Button>
-        <Button className='ml-5 place-self-auto'> 
-          <Link href="/pages/sdmMng/sdmInsert">수요처 등록</Link>
-        </Button>
-        <Button className='ml-5 place-self-auto'> 
-          <Link href="/pages/sdmMng/sdmInfoInsert">수요처 정보 등록</Link>
-        </Button>
-      </div>
-      <div className='flex'>
-        <Button className='ml-5 place-self-auto'> 
-          <Link href="/pages/sdmMng/sdmApplyList">수요처 신청 현황(개발중)</Link>
-        </Button>
-      </div>
-    </>  
-  );
-}
diff --git a/apps/dm_new/app/reuse.module.css b/apps/dm/app/reuse.module.css
similarity index 100%
rename from apps/dm_new/app/reuse.module.css
rename to apps/dm/app/reuse.module.css
diff --git a/apps/dm/app/store/common/index.tsx b/apps/dm/app/store/common/index.tsx
index 6721d2620..3e54da15f 100644
--- a/apps/dm/app/store/common/index.tsx
+++ b/apps/dm/app/store/common/index.tsx
@@ -327,12 +327,95 @@ const fetchEnvPartData = async (): Promise<envPartSelectDataType[]> => {
   }
 };
 
+function sortMenus(items: MenuItem[]): MenuItem[] {
+  return [...items]
+    .sort((a, b) => a.sortSeq - b.sortSeq)
+    .map((item) => ({
+      ...item,
+      children: item.children ? sortMenus(item.children) : [],
+    }));
+}
+
+function isVisible(item: MenuItem): boolean {
+  return item.useYn !== "N" && item.otptYn !== "N";
+}
+
+function normalizeMenus(items: MenuItem[]): MenuItem[] {
+  return sortMenus(items)
+    .filter(isVisible)
+    .map((item) => ({
+      ...item,
+      children: item.children ? normalizeMenus(item.children) : [],
+    }));
+}
+
+export const REUSE_SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "DM";
+const anonymousMenuCache = new Map<string, MenuItem[]>();
+const anonymousMenuInFlight = new Map<string, Promise<MenuItem[]>>();
+
+export async function fetchAnonymousMenu(siteId = REUSE_SITE_ID): Promise<MenuItem[]> {
+  const cached = anonymousMenuCache.get(siteId);
+  if (cached) return cached;
+
+  const inFlight = anonymousMenuInFlight.get(siteId);
+  if (inFlight) return inFlight;
+
+  const request = (async () => {
+    const response = await fetch(`/cms-service/api/v1/menu/anonymous/user/${siteId}`, {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+      cache: "no-store",
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to load menu: ${response.status}`);
+    }
+
+    const data = (await response.json()) as MenuItem[];
+    const normalized = Array.isArray(data) ? normalizeMenus(data) : [];
+    anonymousMenuCache.set(siteId, normalized);
+    return normalized;
+  })();
+
+  anonymousMenuInFlight.set(siteId, request);
+  try {
+    return await request;
+  } finally {
+    anonymousMenuInFlight.delete(siteId);
+  }
+}
+
+function isPathMatched(pathname: string, urlPath: string) {
+  if (!urlPath) return false;
+  return pathname === urlPath || pathname.startsWith(`${urlPath}/`);
+}
+
+function hasMatchedPathInTree(menu: MenuItem, pathname: string): boolean {
+  if (isPathMatched(pathname, menu.urlPath)) return true;
+  return (menu.children ?? []).some((child) => hasMatchedPathInTree(child, pathname));
+}
+
+export function findActiveTopMenu(menus: MenuItem[], pathname: string): MenuItem | null {
+  const level1Menus = menus.filter((menu) => menu.levelNo === 1 || menu.parentId === null);
+  const matched = level1Menus.filter((menu) => hasMatchedPathInTree(menu, pathname));
+
+  return matched[0] ?? level1Menus[0] ?? null;
+}
+
+export function hasAnyChild(item: MenuItem): boolean {
+  return Array.isArray(item.children) && item.children.length > 0;
+}
+
+export function isMenuActive(pathname: string, menu: MenuItem): boolean {
+  return isPathMatched(pathname, menu.urlPath);
+}
 /**====================================
  * Store - expaort
  ====================================*/
 export type CommonAction = {
   initializeCommonData: () => Promise<void>;
   getMenuAuth: (menuCd:number) => Promise<void>;
+  fetchAnonymousMenu: (siteId?: string) => Promise<MenuItem[]>;
 }
 
 export type CommonType = {
@@ -413,7 +496,7 @@ export const CommonReducer:(set:any)=>CommonAction=(set: any) => {
         }
       })
     )},
+    fetchAnonymousMenu: async (siteId = REUSE_SITE_ID) => fetchAnonymousMenu(siteId),
   }
 }
-
 export type CommonStore = CommonType & CommonAction;
diff --git a/apps/dm/app/store/dm-status/index.tsx b/apps/dm/app/store/dm-status/index.tsx
new file mode 100644
index 000000000..bac06eb19
--- /dev/null
+++ b/apps/dm/app/store/dm-status/index.tsx
@@ -0,0 +1,262 @@
+import { fetchType, getFetch } from "@/components/ui/api";
+import type {
+  TableHeaderType,  DmStatusBildTpYearsType, DmStatusUsgBildTpType, DmStatusUsgYearsType,
+  DmStatusLawYearsType, DmStatusSidoUsgType,
+} from "./type";
+import { rainyByBildTpYearsHeader, rainyByUsgBildTpHeader, rainyByUsgYearsHeader } from "./type";
+import { rswtrByLawYearsHeader, rswtrByBildTpYearsHeader, rswtrByUsgYearsHeader } from "./type";
+import { pbnstByLawYearsHeader, pbnstByUsgYearsHeader, pbnstByCpcYearsHeader, pbnstBySidoHeader } from "./type";
+
+
+export type DmStatusActions = {
+  getRainyByBildTpYears: () => Promise<void>; // 1.대민 빗물재이용현황 건축물유형별 최근 6년간
+  getRainyByUsgBildTp: () => Promise<void>; // 2.대민 빗물재이용현황 이용용도별 건축물별
+  getRainyByUsgYears: () => Promise<void>; // 3.대민 빗물재이용현황 이용용도별 최근 6년간
+  getRswtrByLawYears: (bildTpCond: string) => Promise<void>; // 4.대민 중수도재이용현황 법적대상별 최근 6년간
+  getRswtrByBildTpYears: () => Promise<void>; // 5.대민 중수도재이용현황 건축물별 최근 6년간
+  getRswtrByUsgYears: () => Promise<void>; // 6.대민 중수도재이용현황 이용용도별 최근 6년간
+  getPbnstByLawYears: () => Promise<void>; // 7.대민 하수재이용현황 법적대상별 최근 6년간
+  getPbnstByUsgYears: () => Promise<void>; // 8.대민 하수재이용현황 이용용도별 최근 6년간
+  getPbnstByCpcYears: () => Promise<void>; // 9.대민 하수재이용현황 용량 최근 6년간
+  getPbnstBySido: () => Promise<void>; // 10.대민 하수재이용현황 시도별
+};
+
+export type DmStatusType = {
+  rainy: {
+    rainyYears: string[];
+    rainyByBildTpYearsHeader: TableHeaderType[];
+    rainyByUsgBildTpHeader: TableHeaderType[];
+    rainyByUsgYearsHeader: TableHeaderType[];
+    rainyByBildTpYears: DmStatusBildTpYearsType[];  
+    rainyByUsgBildTp: DmStatusUsgBildTpType[];
+    rainyByUsgYears: DmStatusUsgYearsType[];
+  },
+  rswtr: {
+    rswtrYears: string[];
+    rswtrByLawYearsHeader: TableHeaderType[];
+    rswtrByBildTpYearsHeader: TableHeaderType[];
+    rswtrByUsgYearsHeader: TableHeaderType[];
+    rswtrByLawYearsFactory: DmStatusLawYearsType[];
+    rswtrByLawYears: DmStatusLawYearsType[];
+    rswtrByBildTpYears: DmStatusBildTpYearsType[];
+    rswtrByUsgYears: DmStatusUsgYearsType[];
+  },
+  pbnst: {
+    pbnstYears: string[];
+    pbnstByLawYearsHeader: TableHeaderType[];
+    pbnstByUsgYearsHeader: TableHeaderType[];
+    pbnstByCpcYearsHeader: TableHeaderType[];
+    pbnstBySidoHeader: TableHeaderType[];
+    pbnstByLawYears: DmStatusLawYearsType[];
+    pbnstByUsgYears: DmStatusUsgYearsType[];
+    pbnstByCpcYears: DmStatusLawYearsType[];
+    pbnstBySido: DmStatusSidoUsgType[];
+  }
+};
+
+export const dmStatusState: DmStatusType = {
+  rainy: {
+    rainyYears: ["2019", "2020", "2021", "2022", "2023", "2024"],
+    rainyByBildTpYearsHeader: rainyByBildTpYearsHeader,
+    rainyByUsgBildTpHeader: rainyByUsgBildTpHeader,
+    rainyByUsgYearsHeader: rainyByUsgYearsHeader,
+    rainyByBildTpYears: [],
+    rainyByUsgBildTp: [],
+    rainyByUsgYears: [],
+  },
+  rswtr: {
+    rswtrYears: ["2019", "2020", "2021", "2022", "2023", "2024"],
+    rswtrByLawYearsHeader: rswtrByLawYearsHeader,
+    rswtrByBildTpYearsHeader: rswtrByBildTpYearsHeader,
+    rswtrByUsgYearsHeader: rswtrByUsgYearsHeader,
+    rswtrByLawYearsFactory: [], // 공장 및 발전시설 내 중수도 설치 현황
+    rswtrByLawYears: [], // 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)
+    rswtrByBildTpYears: [],
+    rswtrByUsgYears: [],
+  },
+  pbnst: {
+    pbnstYears: ["2019", "2020", "2021", "2022", "2023", "2024"],
+    pbnstByLawYearsHeader: pbnstByLawYearsHeader,
+    pbnstByUsgYearsHeader: pbnstByUsgYearsHeader,
+    pbnstByCpcYearsHeader: pbnstByCpcYearsHeader,
+    pbnstBySidoHeader: pbnstBySidoHeader,
+    pbnstByLawYears: [],
+    pbnstByUsgYears: [],
+    pbnstByCpcYears: [],
+    pbnstBySido: [],
+  }
+};
+
+export type DmStatusStore = DmStatusType & DmStatusActions;
+
+export const DmStatusReducer = (set: any): DmStatusActions => {
+  return {
+    // 1. 대민 빗물재이용현황 건축물유형별 최근 6년간
+    getRainyByBildTpYears: async () => {
+      const res = await getFetch(fetchType.WR, "/dmStatus/rainyByBildTpYears");
+      const rainyByBildTpYears = Array.isArray(res?.data) ? res.data : [];
+      const rainyYears = (rainyByBildTpYears[0]?.YEAR ?? "")
+        .split(",")
+        .map((year) => year.trim())
+        .filter(Boolean);
+      
+      set((state: DmStatusType) => ({
+        ...state,
+        rainy: {
+          ...state.rainy,
+          rainyByBildTpYears,
+          rainyYears,
+        }
+      }));
+
+    },
+    // 2.대민 빗물재이용현황 이용용도별 건축물별
+    getRainyByUsgBildTp: async () => {
+      const res = await getFetch(fetchType.WR, "/dmStatus/rainyByUsgBildTp");
+      const rainyByUsgBildTp = Array.isArray(res?.data) ? res.data : [];
+
+      set((state: DmStatusType) => ({
+        ...state,
+        rainy: {
+          ...state.rainy,
+          rainyByUsgBildTp,
+        }
+      }));
+
+    },
+    // 3.대민 빗물재이용현황 이용용도별 최근 6년간
+    getRainyByUsgYears: async () => {
+      const res = await getFetch(fetchType.WR, "/dmStatus/rainyByUsgYears");
+      const rainyByUsgYears = Array.isArray(res?.data) ? res.data : [];
+
+      set((state: DmStatusType) => ({
+        ...state,
+        rainy: {
+          ...state.rainy,
+          rainyByUsgYears,
+        }
+      }));
+
+    },
+    // 4.대민 중수도재이용현황 법적대상별 최근 6년간
+    getRswtrByLawYears: async (bildTpCond: string) => {
+      const res = await getFetch(fetchType.WR,`/dmStatus/rswtrByLawYears/${bildTpCond}`);
+      const rswtrByLawYears = Array.isArray(res?.data) ? res.data : [];
+      const maxYear = Number(rswtrByLawYears[0]?.MAXYR);
+      const rswtrYears = Number.isFinite(maxYear)
+        ? Array.from({ length: 6 }, (_, index) => String(maxYear - 5 + index))
+        : dmStatusState.rswtr.rswtrYears;
+      
+      if (bildTpCond === "factory") {
+        set((state: DmStatusType) => ({
+          ...state,
+          rswtr: {
+            ...state.rswtr,
+            rswtrYears,
+            rswtrByLawYearsFactory: rswtrByLawYears,
+          }
+        }));
+      } else {
+          set((state: DmStatusType) => ({
+          ...state,
+          rswtr: {
+            ...state.rswtr,
+            rswtrYears,
+            rswtrByLawYears,
+          }
+        }));
+      }
+      
+
+    },
+    // 5.대민 중수도재이용현황 건축물별 최근 6년간
+    getRswtrByBildTpYears: async () => {
+      const res = await getFetch(fetchType.WR,"/dmStatus/rswtrByBildTpYears");
+      const rswtrByBildTpYears = Array.isArray(res?.data) ? res.data : [];
+
+      set((state: DmStatusType) => ({
+        ...state,
+        rswtr: {
+          ...state.rswtr,
+          rswtrByBildTpYears,
+        }
+      }));
+
+    },
+    // 6.대민 중수도재이용현황 이용용도별 최근 6년간
+    getRswtrByUsgYears: async () => {
+      const res = await getFetch(fetchType.WR,"/dmStatus/rswtrByUsgYears");
+      const rswtrByUsgYears =  Array.isArray(res?.data) ? res.data : [];
+
+      set((state: DmStatusType) => ({
+        ...state,
+        rswtr: {
+          ...state.rswtr,
+          rswtrByUsgYears,
+        }
+      }));
+
+    },
+    // 7.대민 하수재이용현황 법적대상별 최근 6년간
+    getPbnstByLawYears: async () => {
+      const res = await getFetch(fetchType.WR,"/dmStatus/pbnstByLawYears");
+      const pbnstByLawYears = Array.isArray(res?.data) ? res.data : [];
+      const maxYear = Number(pbnstByLawYears[0]?.MAXYR);
+      const pbnstYears = Number.isFinite(maxYear)
+        ? Array.from({ length: 6 }, (_, index) => String(maxYear - 5 + index))
+        : dmStatusState.rswtr.rswtrYears;
+
+      set((state: DmStatusType) => ({
+        ...state,
+        pbnst: {
+          ...state.pbnst,
+          pbnstYears,
+          pbnstByLawYears,
+        }
+      }));
+
+    },
+    // 8.대민 하수재이용현황 이용용도별 최근 6년간
+    getPbnstByUsgYears: async () => {
+      const res = await getFetch(fetchType.WR,"/dmStatus/pbnstByUsgYears");
+      const pbnstByUsgYears = Array.isArray(res?.data) ? res.data : [];
+
+      set((state: DmStatusType) => ({
+        ...state,
+        pbnst: {
+          ...state.pbnst,
+          pbnstByUsgYears,
+        }
+      }));
+
+    },
+    // 9.대민 하수재이용현황 용량 최근 6년간
+    getPbnstByCpcYears: async () => {
+      const res = await getFetch(fetchType.WR,"/dmStatus/pbnstByCpcYears");
+      const pbnstByCpcYears = Array.isArray(res?.data) ? res.data : [];
+
+      set((state: DmStatusType) => ({
+        ...state,
+        pbnst: {
+          ...state.pbnst,
+          pbnstByCpcYears,
+        }
+      }));
+
+    },
+    // 10.대민 하수재이용현황 시도별
+    getPbnstBySido: async () => {
+      const res = await getFetch(fetchType.WR,"/dmStatus/pbnstBySido");
+      const pbnstBySido = Array.isArray(res?.data) ? res.data : [];
+
+      set((state: DmStatusType) => ({
+        ...state,
+        pbnst: {
+          ...state.pbnst,
+          pbnstBySido,
+        }
+      }));
+
+    },
+  };
+};
diff --git a/apps/dm/app/store/dm-status/type.ts b/apps/dm/app/store/dm-status/type.ts
new file mode 100644
index 000000000..7766c84ae
--- /dev/null
+++ b/apps/dm/app/store/dm-status/type.ts
@@ -0,0 +1,285 @@
+export type TableHeaderType = {
+    id: string;
+    title: string;
+    upName?: string;
+    upSequnce?: number;
+    align?: string;
+    row?: number;
+    rowSpan?: number;
+    colSpan?: number;
+    widthPercent?: number;
+}
+
+export type DmStatusBildTpYearsType = {
+  BILD_TP: string; // 건물구분
+  YEAR?: string; // 가로 연도 목록
+  Y1: string | number;
+  Y2: string | number;
+  Y3: string | number;
+  Y4: string | number;
+  Y5: string | number;
+  Y6: string | number;
+  MAXYR?: string; // 최종 확정 연도
+};
+
+export type DmStatusUsgBildTpType = {
+  USG_NM: string;
+  CNT: string | number;
+  USEQTY: string | number;
+  SGBS_CPCTY: string | number;
+  PUB_FCT: string | number;
+  COMM_HOUSE: string | number;
+  MEGA_STORE: string | number;
+  GYM_FCT: string | number;
+  SCHOOL: string | number;
+  GOLF: string | number;
+  ETC: string | number;
+};
+
+export type DmStatusUsgYearsType = {
+  USG_NM: string; // 용도
+  YEAR?: string; // 가로 연도 목록
+  Y1: string | number;
+  Y2: string | number;
+  Y3: string | number;
+  Y4: string | number;
+  Y5: string | number;
+  Y6: string | number;
+  COL_NM?: string; // 컬럼명
+  MAXYR?: string; // 최종 확정 연도
+};
+
+export type DmStatusLawYearsType = {
+  COL1: string; // 전체, 법적 대상, 법적 미대상
+  COL2: string; // 구분
+  MAXYR?: string; // 최종 확정 연도
+  Y1: string | number;
+  Y2: string | number;
+  Y3: string | number;
+  Y4: string | number;
+  Y5: string | number;
+  Y6: string | number;
+};
+
+export type DmStatusSidoUsgType = {
+  ADST_CD: string; // 시도 코드
+  SIDONM: string; // 시도명
+  TPUT_TOTAL: string; // 연간하수처리량(천톤/년)
+  USE_AMNT_TOTAL: number; // 재이용현황
+  USE_AMNT_D01: number;
+  USE_AMNT_D02: number;
+  USE_AMNT_S11: number; // 청소·화장실용수
+  USE_AMNT_S12: number; // 세척·살수용수
+  USE_AMNT_S13: number; // 조경용수
+  USE_AMNT_S14: number; // 친수용수
+  USE_AMNT_S15: number; // 하천유지용수
+  USE_AMNT_S16: number; // 농업용수
+  USE_AMNT_S17: number; // 지하수충전
+  USE_AMNT_S18: number; // 공업용수
+  USE_AMNT_ETC: number; // 기타 (청소·화장실용수+세척·살수용수+조경용수+친수용수+지하수충전)
+  REUSE_RT: number;
+};
+
+
+
+
+// 빗물이용시설의 건축물별 빗물이용량 현황
+export const rainyByBildTpYearsHeader: TableHeaderType[] = [
+    { id: "BILD_TP", title: "구분", row: 0,  widthPercent: 15 },
+    { id: "Y1", title: "2019",  row: 1, widthPercent: 5 },
+    { id: "Y2", title: "2020", row: 1, widthPercent: 5 },
+    { id: "Y3", title: "2021",  row: 1, widthPercent: 5 },
+    { id: "Y4", title: "2022", row: 0,  widthPercent: 7 },
+    { id: "Y5", title: "2023", row: 0,  widthPercent: 10 },
+    { id: "Y6", title: "2024",  row: 1, widthPercent: 5 },
+];
+export const rainyByBildTpYearsInit: DmStatusBildTpYearsType[] = [
+  { BILD_TP: "골프장", Y1: "6,771.8", Y2: "6,417.4", Y3: "8,371.6", Y4: "10,215.4", Y5: "11,360", Y6: "10,191.6" },
+  { BILD_TP: "공공시설", Y1: "364", Y2: "325.2", Y3: "201.9", Y4: "244.6", Y5: "209.9", Y6: "299.6" },
+  { BILD_TP: "공동주택", Y1: "291", Y2: "840.5", Y3: "804.2", Y4: "2,393.0", Y5: "2,386", Y6: "2,428.4" },
+  { BILD_TP: "대규모점포", Y1: "169.9", Y2: "214.4", Y3: "58.4", Y4: "427.2", Y5: "371", Y6: "293.3" },
+  { BILD_TP: "체육시설", Y1: "52.6", Y2: "44.7", Y3: "48.6", Y4: "75.3", Y5: "71.8", Y6: "77.6" },
+  { BILD_TP: "학교", Y1: "33", Y2: "25.5", Y3: "22", Y4: "155.8", Y5: "165.4", Y6: "32.6" },
+  { BILD_TP: "기타", Y1: "311.6", Y2: "901.2", Y3: "344.5", Y4: "537.8", Y5: "564", Y6: "621.2" },
+];
+// 빗물이용시설의 용도별 분포 
+export const rainyByUsgBildTpHeader: TableHeaderType[] = [
+    { id: "USG_NM", title: "용도", row: 0,  widthPercent: 15 },
+    { id: "CNT", title: "개소수",  row: 1, widthPercent: 5 },
+    { id: "SGBS_CPCTY", title: "저류용량",  row: 1, widthPercent: 5 },
+    { id: "USEQTY", title: "총사용량", row: 1, widthPercent: 5 },
+    { id: "PUB_FCT", title: "공공시설",  row: 1, widthPercent: 5 },
+    { id: "COMM_HOUSE", title: "공동주택", row: 0,  widthPercent: 7 },
+    { id: "MEGA_STORE", title: "대규모점포", row: 0,  widthPercent: 10 },
+    { id: "GYM_FCT", title: "체육시설",  row: 1, widthPercent: 5 },
+    { id: "SCHOOL", title: "학교",  row: 1, widthPercent: 5 },
+    { id: "GOLF", title: "골프장",  row: 1, widthPercent: 5 },
+    { id: "ETC", title: "기타",  row: 1, widthPercent: 5 },
+];
+export const rainyByUsgBildTpInit: DmStatusUsgBildTpType[] = [
+  { USG_NM: "청소·환경정화용수", CNT: "195", SGBS_CPCTY: "32.7", USEQTY: "108.8", PUB_FCT: "24.9", COMM_HOUSE: "5.8", MEGA_STORE: "2.6", GYM_FCT: "4.4", SCHOOL: "2.9", GOLF: "-", ETC: "68.1" },
+  { USG_NM: "세척·살수용수", CNT: "12", SGBS_CPCTY: "1.4", USEQTY: "37", PUB_FCT: "35", COMM_HOUSE: "-", MEGA_STORE: "-", GYM_FCT: "1.9", SCHOOL: "-", GOLF: "-", ETC: "0.2" },
+  { USG_NM: "조경용수", CNT: "3,165", SGBS_CPCTY: "7,440.8", USEQTY: "13,554.1", PUB_FCT: "168.1", COMM_HOUSE: "2,421.9", MEGA_STORE: "290.7", GYM_FCT: "66.2", SCHOOL: "29", GOLF: "10,044", ETC: "534.3" },
+  { USG_NM: "냉·난방수", CNT: "8", SGBS_CPCTY: "1.6", USEQTY: "0.1", PUB_FCT: "-", COMM_HOUSE: "-", MEGA_STORE: "-", GYM_FCT: "-", SCHOOL: "0.1", GOLF: "-", ETC: "-" },
+  { USG_NM: "공업용수", CNT: "6", SGBS_CPCTY: "14.9", USEQTY: "53.2", PUB_FCT: "52.8", COMM_HOUSE: "-", MEGA_STORE: "-", GYM_FCT: "-", SCHOOL: "-", GOLF: "-", ETC: "0.4" },
+  { USG_NM: "농업용수", CNT: "6.0", SGBS_CPCTY: "0.5", USEQTY: "0.6", PUB_FCT: "-", COMM_HOUSE: "-", MEGA_STORE: "-", GYM_FCT: "-", SCHOOL: "-", GOLF: "-", ETC: "0.6" },
+  { USG_NM: "기타", CNT: "48", SGBS_CPCTY: "306.1", USEQTY: "155.6", PUB_FCT: "2.8", COMM_HOUSE: "-", MEGA_STORE: "-", GYM_FCT: "0.6", SCHOOL: "0.5", GOLF: "147.5", ETC: "4.2" },
+  { USG_NM: "미기재", CNT: "103", SGBS_CPCTY: "22.9", USEQTY: "34.8", PUB_FCT: "16.0", COMM_HOUSE: "0.6", MEGA_STORE: "-", GYM_FCT: "4.6", SCHOOL: "0.2", GOLF: "-", ETC: "13.5" },
+  { USG_NM: "합계", CNT: "3,543", SGBS_CPCTY: "7,820.8", USEQTY: "13,944.7", PUB_FCT: "299.6", COMM_HOUSE: "2,428.4", MEGA_STORE: "293.3", GYM_FCT: "77.6", SCHOOL: "32.6", GOLF: "10,191.6", ETC: "621.2" },
+];
+
+// 빗물이용시설의 용도별 빗물이용량 현황
+export const rainyByUsgYearsHeader: TableHeaderType[] = [
+    { id: "USG_NM", title: "용도", row: 0,  widthPercent: 15 },
+    { id: "Y1", title: "2019",  row: 1, widthPercent: 5 },
+    { id: "Y2", title: "2020", row: 1, widthPercent: 5 },
+    { id: "Y3", title: "2021",  row: 1, widthPercent: 5 },
+    { id: "Y4", title: "2022", row: 0,  widthPercent: 7 },
+    { id: "Y5", title: "2023", row: 0,  widthPercent: 10 },
+    { id: "Y6", title: "2024",  row: 1, widthPercent: 5 },
+];
+export const rainyByUsgYearsInit: DmStatusUsgYearsType[] = [
+  { USG_NM: "청소·화장실용수", Y1: "126.5", Y2: "134.1", Y3: "96.5", Y4: "153.9", Y5: "140.5", Y6: "108.8" },
+  { USG_NM: "세척·살수용수", Y1: "14.8", Y2: "14.6", Y3: "9.5", Y4: "49.8", Y5: "49.7", Y6: "37.0" },
+  { USG_NM: "조경용수", Y1: "7,629.8", Y2: "8,496.2", Y3: "9,415.4", Y4: "13,360.4", Y5: "14,466.3", Y6: "13,554.1" },
+  { USG_NM: "친수용수", Y1: "1.0", Y2: "0.1", Y3: "0.1", Y4: "0.1", Y5: "0.1", Y6: "0.1" },
+  { USG_NM: "공업용수", Y1: "152.0", Y2: "77.0", Y3: "77.0", Y4: "75.4", Y5: "0.4", Y6: "53.2" },
+  { USG_NM: "농업용수", Y1: "4.4", Y2: "4.3", Y3: "4.3", Y4: "4.3", Y5: "0.6", Y6: "0.6" },
+  { USG_NM: "기타", Y1: "37.7", Y2: "42.6", Y3: "230.7", Y4: "394.3", Y5: "463.2", Y6: "155.6" },
+];
+
+// 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)
+export const rswtrByLawYearsHeader: TableHeaderType[] = [
+    { id: "COL1", title: "구분", row: 0,  widthPercent: 15 },
+    { id: "COL2", title: "구분", row: 0,  widthPercent: 15 },
+    { id: "Y1", title: "2019",  row: 1, widthPercent: 5 },
+    { id: "Y2", title: "2020", row: 1, widthPercent: 5 },
+    { id: "Y3", title: "2021",  row: 1, widthPercent: 5 },
+    { id: "Y4", title: "2022", row: 0,  widthPercent: 7 },
+    { id: "Y5", title: "2023", row: 0,  widthPercent: 10 },
+    { id: "Y6", title: "2024",  row: 1, widthPercent: 5 },
+];
+
+export const rswtrByLawYearsInit: DmStatusLawYearsType[] = [
+  { COL1: "전체", COL2: "CNT", Y1: "576", Y2: "633", Y3: "682", Y4: "740", Y5: "819", Y6: "842" },
+  { COL1: "전체", COL2: "건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>", Y1: "1,494.2", Y2: "1,514.4", Y3: "1,524.9", Y4: "989.1", Y5: "1,104.3", Y6: "1,015.4" },
+  { COL1: "전체", COL2: "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", Y1: "39.6", Y2: "40.0", Y3: "51.1", Y4: "47.1", Y5: "48.9", Y6: "50.7" },
+  { COL1: "전체", COL2: "사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", Y1: "2,223.4", Y2: "1,165.2", Y3: "6,713.0", Y4: "4,681.7", Y5: "3,918.2", Y6: "898.4" },
+  { COL1: "법적 대상", COL2: "CNT", Y1: "146", Y2: "154", Y3: "156", Y4: "170", Y5: "166", Y6: "169" },
+  { COL1: "법적 대상", COL2: "건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>", Y1: "674.9", Y2: "682.4", Y3: "736.1", Y4: "421.1", Y5: "434.9", Y6: "465.5" },
+  { COL1: "법적 대상", COL2: "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", Y1: "20.0", Y2: "20.1", Y3: "31.2", Y4: "22.8", Y5: "21.2", Y6: "24.7" },
+  { COL1: "법적 대상", COL2: "사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", Y1: "1,819.4", Y2: "712.8", Y3: "6,479.9", Y4: "4,416.8", Y5: "3,663.1", Y6: "616.1" },
+  { COL1: "법적 미대상", COL2: "CNT", Y1: "430", Y2: "479", Y3: "526", Y4: "570", Y5: "653", Y6: "673" },
+  { COL1: "법적 미대상", COL2: "건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>", Y1: "819.3", Y2: "832.0", Y3: "788.8", Y4: "568.0", Y5: "669.4", Y6: "549.9" },
+  { COL1: "법적 미대상", COL2: "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", Y1: "19.6", Y2: "19.5", Y3: "19.9", Y4: "24.3", Y5: "27.7", Y6: "26.0" },
+  { COL1: "법적 미대상", COL2: "사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", Y1: "404.0", Y2: "452.4", Y3: "233.1", Y4: "264.9", Y5: "255.1", Y6: "282.3" },
+];
+
+export const rswtrByLawYearsFactoryInit: DmStatusLawYearsType[] = [
+  { COL1: "전체", COL2: "CNT", Y1: "125", Y2: "127", Y3: "139", Y4: "146", Y5: "151", Y6: "176" },
+  { COL1: "전체", COL2: "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", Y1: "141.3", Y2: "141.0", Y3: "146.7", Y4: "189.0", Y5: "190.3", Y6: "166.5" },
+  { COL1: "전체", COL2: "사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", Y1: "33,712", Y2: "29,300", Y3: "33,110", Y4: "22,284", Y5: "21,593", Y6: "21,349" },
+  { COL1: "법적 대상", COL2: "CNT", Y1: "59", Y2: "63", Y3: "78", Y4: "78", Y5: "82", Y6: "86" },
+  { COL1: "법적 대상", COL2: "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", Y1: "108.6", Y2: "109.7", Y3: "118.1", Y4: "159.5", Y5: "142.6", Y6: "119.4" },
+  { COL1: "법적 대상", COL2: "사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", Y1: "24,847", Y2: "24,021", Y3: "28,055", Y4: "17,959", Y5: "12,241", Y6: "12,296" },
+  { COL1: "법적 비대상", COL2: "CNT", Y1: "66", Y2: "64", Y3: "61", Y4: "68", Y5: "69", Y6: "90" },
+  { COL1: "법적 비대상", COL2: "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", Y1: "32.7", Y2: "31.4", Y3: "28.7", Y4: "29.5", Y5: "47.7", Y6: "47.1" },
+  { COL1: "법적 비대상", COL2: "사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", Y1: "8,864.9", Y2: "5,278.8", Y3: "5,054.7", Y4: "4,324.6", Y5: "9,353.3", Y6: "9,052.4" },
+];
+
+export const Col2Name: Record<string, string> = 
+  { CNT: "시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
+    TOTAR: "건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>",
+    PROCCPCTY: "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
+    USECPCTY: "사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>",
+    TPUTTOTAL: "하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
+    USEAMNT: "재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", 
+    REUSERT: "재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>",
+    FCT_CPC: "시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", 
+    TOT_TPUT_AVE: "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
+  };
+
+
+export const rswtrByBildTpYearsHeader: TableHeaderType[] = [
+    { id: "BILD_TP", title: "구분", row: 0,  widthPercent: 15 },
+    { id: "Y1", title: "2019",  row: 1, widthPercent: 5 },
+    { id: "Y2", title: "2020", row: 1, widthPercent: 5 },
+    { id: "Y3", title: "2021",  row: 1, widthPercent: 5 },
+    { id: "Y4", title: "2022", row: 0,  widthPercent: 7 },
+    { id: "Y5", title: "2023", row: 0,  widthPercent: 10 },
+    { id: "Y6", title: "2024",  row: 1, widthPercent: 5 },
+];
+
+
+export const rswtrByBildTpYearsInit: DmStatusBildTpYearsType[] = [
+  { BILD_TP: "공동주택", Y1: "804.0", Y2: "245.8", Y3: "255.1", Y4: "282.3", Y5: "255.1", Y6: "282.3" },
+  { BILD_TP: "판매시설", Y1: "1,447.5", Y2: "477.1", Y3: "802.1", Y4: "713.0", Y5: "972.3", Y6: "742.4" },
+  { BILD_TP: "숙박시설", Y1: "458.5", Y2: "0.4", Y3: "177.0", Y4: "102.0", Y5: "123.3", Y6: "140.9" },
+  { BILD_TP: "업무시설", Y1: "20.7", Y2: "0.3", Y3: "14.3", Y4: "44.9", Y5: "31.5", Y6: "37.4" },
+  { BILD_TP: "의료시설", Y1: "97.7", Y2: "7.2", Y3: "63.7", Y4: "55.7", Y5: "85.1", Y6: "70.4" },
+  { BILD_TP: "교육연구시설", Y1: "536.6", Y2: "1.5", Y3: "1,558.4", Y4: "772.2", Y5: "315.1", Y6: "66.7" },
+  { BILD_TP: "운수·물류시설", Y1: "759.2", Y2: "34.2", Y3: "459.8", Y4: "259.8", Y5: "252.8", Y6: "410.4" },
+  { BILD_TP: "기타", Y1: "453.1", Y2: "443.3", Y3: "3,126.8", Y4: "2,451.5", Y5: "1,880.8", Y6: "199.7" },
+  { BILD_TP: "합계", Y1: "35,936.3", Y2: "30,466.6", Y3: "37,487.2", Y4: "25,480.6", Y5: "24,345.8", Y6: "22,247.6" },
+];
+
+export const rswtrByUsgYearsHeader: TableHeaderType[] = [
+    { id: "USE_NM", title: "용도", row: 0,  widthPercent: 15 },
+    { id: "Y1", title: "2019",  row: 1, widthPercent: 5 },
+    { id: "Y2", title: "2020", row: 1, widthPercent: 5 },
+    { id: "Y3", title: "2021",  row: 1, widthPercent: 5 },
+    { id: "Y4", title: "2022", row: 0,  widthPercent: 7 },
+    { id: "Y5", title: "2023", row: 0,  widthPercent: 10 },
+    { id: "Y6", title: "2024",  row: 1, widthPercent: 5 },
+];
+
+// 연도별 하수처리수 재이용 현황
+export const pbnstByLawYearsHeader: TableHeaderType[] = [
+    { id: "COL1", title: "구분", row: 0,  widthPercent: 15 },
+    { id: "COL2", title: "구분", row: 0,  widthPercent: 15 },
+    { id: "Y1", title: "2019",  row: 1, widthPercent: 5 },
+    { id: "Y2", title: "2020", row: 1, widthPercent: 5 },
+    { id: "Y3", title: "2021",  row: 1, widthPercent: 5 },
+    { id: "Y4", title: "2022", row: 0,  widthPercent: 7 },
+    { id: "Y5", title: "2023", row: 0,  widthPercent: 10 },
+    { id: "Y6", title: "2024",  row: 1, widthPercent: 5 },
+];
+
+// 용도별 하수처리수 재이용 현황
+export const pbnstByUsgYearsHeader: TableHeaderType[] = [
+    { id: "USG_NM", title: "용도", row: 0,  widthPercent: 15 },
+    { id: "Y1", title: "2019",  row: 1, widthPercent: 5 },
+    { id: "Y2", title: "2020", row: 1, widthPercent: 5 },
+    { id: "Y3", title: "2021",  row: 1, widthPercent: 5 },
+    { id: "Y4", title: "2022", row: 0,  widthPercent: 7 },
+    { id: "Y5", title: "2023", row: 0,  widthPercent: 10 },
+    { id: "Y6", title: "2024",  row: 1, widthPercent: 5 },
+];
+
+// 하수처리시설 설치 및 이용 현황
+export const pbnstByCpcYearsHeader: TableHeaderType[] = [
+    { id: "COL1", title: "구분", row: 0,  widthPercent: 15 },
+    { id: "COL2", title: "구분", row: 0,  widthPercent: 15 },
+    { id: "Y1", title: "2019",  row: 1, widthPercent: 5 },
+    { id: "Y2", title: "2020", row: 1, widthPercent: 5 },
+    { id: "Y3", title: "2021",  row: 1, widthPercent: 5 },
+    { id: "Y4", title: "2022", row: 0,  widthPercent: 7 },
+    { id: "Y5", title: "2023", row: 0,  widthPercent: 10 },
+    { id: "Y6", title: "2024",  row: 1, widthPercent: 5 },
+];
+
+// 시도별 하수처리수 재이용 현황
+export const pbnstBySidoHeader: TableHeaderType[] = [
+    { id: "SIDONM", title: "시도", row: 0,  widthPercent: 15 },
+    { id: "TPUT_TOTAL", title: "연간하수처리량",  row: 1, widthPercent: 5 },
+    { id: "USE_AMNT_TOTAL", title: "재이용현황계", row: 1, widthPercent: 5 },
+    { id: "USE_AMNT_D01", title: "재이용현황 장내",  row: 1, widthPercent: 5 },
+    { id: "USE_AMNT_D02", title: "재이용현황 장외소계", row: 0,  widthPercent: 7 },
+    { id: "USE_AMNT_S15", title: "장외 하천유지용수", row: 0,  widthPercent: 10 },
+    { id: "USE_AMNT_S16", title: "장외 농업용수",  row: 1, widthPercent: 5 },
+    { id: "USE_AMNT_S18", title: "장외 공업용수",  row: 1, widthPercent: 5 },
+    { id: "USE_AMNT_ETC", title: "장외 기타용수",  row: 1, widthPercent: 5 },
+    { id: "REUSE_RT", title: "재이용률",  row: 1, widthPercent: 5 },
+    { id: "REMARK", title: "비고",  row: 1, widthPercent: 5 },
+];
+
diff --git a/apps/dm/app/store/sdmMng/index.tsx b/apps/dm/app/store/sdmMng/index.tsx
index 2e52ac13d..de345f0d7 100644
--- a/apps/dm/app/store/sdmMng/index.tsx
+++ b/apps/dm/app/store/sdmMng/index.tsx
@@ -1,4 +1,4 @@
-import { fetchType, getFetch, postFetch } from "@/components/ui/api";
+import { fetchType, getFetch, postFetch, getFetchWithCount } from "@/components/ui/api";
 import type { SelectDataType } from "@common/business_components/ui";
 import type { TableUpperProps } from "../common";
 import toast from "react-hot-toast";
@@ -10,34 +10,27 @@ import { z } from "zod";
 =====================================*/
 
 export const sdmInfoFormSchema = z.object({
-  sdmNm: z.string().min(1, "수요처를 선택해주세요"),
-  demandYmd: z.date().optional(),
-  demandQnty: z
-    .string()
-    .min(1, "요구수량을 입력해주세요")
-    .regex(/^[0-9]+$/, "요구수량은 숫자만 입력 가능합니다"),
-  usePurpose: z.string().optional(),
-  money: z.string().regex(/^[0-9]+$/, "희망단가는 숫자만 입력 가능합니다"),
-  /**요구수질 */
-  reqWaterQlty: z.string().optional(),
+  dmdInfoId: z.string().optional(),
+  dmndTmng: z.date().optional(),
+  dmndQty: z.number().min(1, "요구수량을 입력해주세요"),
+  wntUntprc: z.number().min(1, "희망단가를 입력해주세요"),
+  useUsgCd: z.string().min(1, "사용용도를 선택해주세요"),
+  /** 수질 */
   grssClfg: z.number().nullish(),
   tn: z.number().nullish(),
   combResdch: z.number().nullish(),
   tph: z.number().nullish(),
   trbt: z.number().nullish(),
   ph: z.string().nullish(),
-  bod: z.number().nullish(),
-  /**컬럼확인필요 */
+  blgcOxygDmndQnt: z.number().nullish(),
   clIonQnt: z.number().nullish(),
   smll: z.string(),
   cdtnv: z.number().nullish(),
   crmty: z.number().nullish(),
+
   rmrk: z.string().optional(),
-  /* telno: z.string()
-    .min(8, "전화번호는 8자 이상 입력해주세요")
-    .max(12, "전화번호는 12자 이내로 입력해주세요")
-    .regex(/^[0-9-]+$/, "전화번호는 숫자와 하이픈(-)만 입력 가능합니다"), */
-  candidateTitle: z
+
+  splyCndtList: z
     .array(
       z.object({
         ruseUtztnFcltNm: z.string(),
@@ -45,58 +38,6 @@ export const sdmInfoFormSchema = z.object({
       })
     )
     .optional(),
-}).superRefine((data, ctx) => {
-  const disabledFields = disableRules[data.usePurpose ?? ""] || [];
-  // 모든 수질 관련 필드
-  // 총대장균군수는 null 값을 불검출로 표시하기때문에 해당 검사에서 제외함.
-  const allFields: (keyof typeof data)[] = [
-    "tn", "combResdch", "tph",
-    "trbt", "ph", "bod", "clIonQnt",
-    "smll", "cdtnv", "crmty",
-  ];
-
-  const allFieldsName: Record<string, string> = {
-    tn: "총질소(T-N)(mg/L)",
-    combResdch: "결합잔류염소(mg/L)",
-    tph: "총인(T-P)(mg/L)",
-    trbt: "탁도(NTU)",
-    ph: "수소이온농도(pH)",
-    bod: "생물학적 산소요구량(BOD)(mg/L)",
-    clIonQnt: "염화물(mgCL/L)",
-    smll: "냄새",
-    cdtnv: "전기전도도(㎲/cm)",
-    crmty: "색도(도)",
-  };
-  allFields.forEach((field) => {
-    const isDisabled = disabledFields.includes(field);
-    if (!isDisabled) {
-      // disabled가 아닌 필드는 반드시 값이 있어야 함
-      const value = data[field];
-      if (typeof value === "string") {
-        if (value.trim().length === 0) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            path: [field],
-            message: `${allFieldsName[field]} 을 입력해주세요.`,
-          });
-        }
-      } else if (typeof value === "number") {
-        if (value <= 0 || Number.isNaN(value)) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            path: [field],
-            message: `${allFieldsName[field]} 을 입력해주세요.`,
-          });
-        }
-      } else if (value == null) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          path: [field],
-          message: `${allFieldsName[field]}  을 입력해주세요.`,
-        });
-      }
-    }
-  });
 });
 
 export type SdmInfoFormData = z.infer<typeof sdmInfoFormSchema>;
@@ -109,6 +50,7 @@ export type DemandCompBizType = {
   dmdInfoFk: string | '';
   bzmnNo: string | '';
   dmdCoNm: string | '';
+  zip: string | '';
   daddr: string | '';
   telno: string | '';
   rgtr: string | '';
@@ -135,8 +77,9 @@ export type DemandCompBizType = {
   dmdInfoSn: number | '';
   status: string | '';
   splyCndtList: SupplyCandidate[] | [],
-  ruseUtztnFcltNm?: string | ''
-
+  ruseUtztnFcltNm?: string | '';
+  regDt: string | '';
+  mdfcnDt : string | '';
 }
 
 // 공급 후보자 타입 정의
@@ -393,7 +336,7 @@ const defaultRules: Record<string, object> = {
 
 // 사용용도
 const useTypesData: SelectDataType[] = [
-  { text: '청소', val: "청소" },
+/*   { text: '청소', val: "청소" },
   { text: "화장실용수", val: "화장실용수" },
   { text: "세척", val: "세척" },
   { text: "살수", val: "살수" },
@@ -401,7 +344,7 @@ const useTypesData: SelectDataType[] = [
   { text: "농업_간접용수", val: "농업_간접용수" },
   { text: "농업_직접용수", val: "농업_직접용수" },
   { text: "하천", val: "하천" },
-  { text: "공업", val: "공업" },
+  { text: "공업", val: "공업" }, */
 ];
 
 // 유사사례 모달 헤더
@@ -512,13 +455,28 @@ const postSdmData = async (data: DemandCompType) => {
 }
 
 // 수요정보 등록
-const postSdmInfoData = async (data: DemandCompBizType) => {
+const postSdmInfoData = async (data: SdmInfoFormData): Promise<boolean> => {
   try {
     await postFetch("/reuseFc/request/demandInfo", data);
-    toast.success('수요 정보 등록에 성공하였습니다.');
+    alert('수요 정보 등록에 성공하였습니다.');
+    return true;
   } catch (error) {
     console.log(error);
-    toast.error('수요 정보 등록에 실패하였습니다.');
+    alert('수요 정보 등록에 실패하였습니다.');
+    return false;
+  }
+}
+
+// 수요정보 수정
+const fetchUpdateSdmInfoData = async (data: SdmInfoFormData): Promise<boolean> => {
+  try {
+    await postFetch("/reuseFc/request/updateDemandInfo", data);
+    alert('수요 정보 수정에 성공하였습니다.');
+    return true;
+  } catch (error) {
+    console.log(error);
+    alert('수요 정보 수정에 실패하였습니다.');
+    return false;
   }
 }
 
@@ -532,6 +490,8 @@ const postSdmLoginData = async (data: DemandCompType) => {
     let loginSuccess = false;
     if (status === 200 && loginData != null) {
       alert("수요처 로그인에 성공하였습니다.");
+      delete loginData.dmdAplyPswd;
+      delete loginData.rgtr;
       sessionStorage.setItem("user", JSON.stringify(loginData));
       loginSuccess = true;
     } else if (status === 401) {
@@ -577,6 +537,8 @@ const getSdmInfoStatusList = async (dmdInfoId: string) => {
 // 유사사례 조회
 const fetchGetSimilarCaseList = async (part: string, value: number | string) => {
   try {
+    // part : 'S' 요구수량 , 'U' 사용용도
+    // default : part 'S' , value 10000 즉, part와 value값이 없으면 backend에서 default값으로 조회함.
     const url = '/reuseFc/pubFcRuseCase/dm/' + part + '/' + (value ? value : 0);
     const res = await getFetch(fetchType.WR, url);
     return res?.data || [];
@@ -592,12 +554,15 @@ const fetchGetSimilarCaseList = async (part: string, value: number | string) =>
 export type SdmActions = {
   initializeSdmData: () => void;
   insertSdmData: (data: DemandCompType) => Promise<void>;
-  insertSdmInfoData: (data: DemandCompBizType) => Promise<void>;
+  insertSdmInfoData: (data: SdmInfoFormData) => Promise<boolean>;
+  updateSdmInfoData: (data: SdmInfoFormData) => Promise<boolean>;
   getDemandCompList: (searchText: string, pageCnt: number) => Promise<void>;
   actionLogin: (data: DemandCompType) => Promise<void>;
   getSdmInfoStatusList: (dmdInfoId: string) => Promise<void>;
   getSimilarCaseList: (part: string, value: number | string) => Promise<void>;
   actionLogout: () => Promise<void>;
+
+  getUseTypesData: () => Promise<void>;
 }
 
 export type SdmType = {
@@ -665,8 +630,12 @@ export const SdmReducer = (set: any): SdmActions => {
       }
     },
 
-    insertSdmInfoData: async (data: DemandCompBizType) => {
-      postSdmInfoData(data);
+    insertSdmInfoData: async (data: SdmInfoFormData): Promise<boolean> => {
+      return await postSdmInfoData(data);
+    },
+
+    updateSdmInfoData: async (data: SdmInfoFormData): Promise<boolean> => {
+      return await fetchUpdateSdmInfoData(data);
     },
 
     // 수요처 정보
@@ -717,6 +686,7 @@ export const SdmReducer = (set: any): SdmActions => {
           bzmnNo: res.bzmnNo,
           dmdCoNm: res.dmdCoNm,
           dmdInfoId: res.dmdInfoId,
+          zip: res.zip || '',
           daddr: res.daddr,
           telno: res.telno.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'),
           rgtr: res.rgtr,
@@ -762,7 +732,6 @@ export const SdmReducer = (set: any): SdmActions => {
           ruseBizNm: maskedBizNm,
         };
       });
-      console.log(similarCaseList);
 
       if (similarCaseList && similarCaseList.length !== 0) {
         set((state: SdmType) => ({
@@ -791,6 +760,24 @@ export const SdmReducer = (set: any): SdmActions => {
           successLogin: false,
         }
       }))
+    },
+    // 용도 코드 조회 (WR018 : 하수재이용장외용도)
+    getUseTypesData: async () => {
+      //http://dev.onasys.co.kr:3000/server/cms-service/api/v1/lwpo-cds?lwpoCdNm=&sort=regDt,desc&upCd=WR018&page=0&size=10
+
+      const upCd = await getFetchWithCount(
+        fetchType.CS,
+        "/cms-service/api/v1/lwpo-cds/?lwpoCdNm=&sort=regDt,desc&upCd=WR018&page=0&size=100"
+      );
+
+      const comUseTypes = upCd.content.map((el: any) => ({ text: el.lwpoCdNm, val: el.lwpoCd }));
+
+      set((state: SdmType) => ({
+        Sdm: {
+          ...state.Sdm,
+          useTypesData: comUseTypes,
+        }
+      }));
     }
   }
 }
diff --git a/apps/dm_new/app/store/sdmMng/postcode-service.ts b/apps/dm/app/store/sdmMng/postcode-service.ts
similarity index 72%
rename from apps/dm_new/app/store/sdmMng/postcode-service.ts
rename to apps/dm/app/store/sdmMng/postcode-service.ts
index e8a791adb..1964b7c71 100644
--- a/apps/dm_new/app/store/sdmMng/postcode-service.ts
+++ b/apps/dm/app/store/sdmMng/postcode-service.ts
@@ -48,6 +48,16 @@ type SuggestionSeed = {
   bldgNoMno: number;
 };
 
+/**
+ * 주소 검색 API를 호출해 우편번호/주소 목록을 조회한다.
+ * @param searchQuery 조회 조건 객체
+ * @param searchQuery.roadNm 도로명
+ * @param searchQuery.bldgNoMno 건물 본번
+ * @param searchQuery.bldgNoSno 건물 부번
+ * @param searchQuery.page 0부터 시작하는 페이지 번호
+ * @param searchQuery.size 페이지당 조회 건수
+ * @returns 주소 목록과 전체 건수를 포함한 응답 객체
+ */
 async function findAddress(searchQuery: ZipSearchParams): Promise<ZipListResponse> {
   if (!searchQuery) return {};
 
@@ -68,6 +78,12 @@ async function findAddress(searchQuery: ZipSearchParams): Promise<ZipListRespons
   return (await response.json()) as ZipListResponse;
 }
 
+/**
+ * 자동완성 후보를 만들기 위해 주소 항목에서 도로명과 건물 본번을 추출한다.
+ * 우선 API 응답 필드의 값을 사용하고, 값이 없으면 표시 주소 문자열을 파싱해 보정한다.
+ * @param item 주소 검색 결과 1건
+ * @returns 자동완성 생성에 사용할 도로명/건물본번 또는 추출 실패 시 null
+ */
 function extractSuggestionSeed(item: Zip): SuggestionSeed | null {
   const ext = item as Zip & {
     roadNm?: string;
@@ -97,6 +113,11 @@ function extractSuggestionSeed(item: Zip): SuggestionSeed | null {
   return { roadNm, bldgNoMno };
 }
 
+/**
+ * 검색어에 허용되지 않는 특수문자나 SQL 예약어가 포함되어 있는지 검사한다.
+ * @param search 사용자가 입력한 검색 문자열
+ * @returns 검색 가능하면 true, 차단 대상이면 false
+ */
 function searchFilter(search: string): boolean {
   if (search.length === 0) return true;
 
@@ -132,6 +153,13 @@ function searchFilter(search: string): boolean {
   return true;
 }
 
+/**
+ * 단일 입력 주소 문자열을 "도로명 + 건물번호" 구조로 파싱해 API 조회 파라미터로 변환한다.
+ * 예) "테헤란로 152-1" -> { roadNm: "테헤란로", bldgNoMno: 152, bldgNoSno: 1, page }
+ * @param input 사용자가 입력한 주소 검색어
+ * @param page 1부터 시작하는 요청 페이지 번호
+ * @returns 파싱 성공 시 API 조회 파라미터와 정규화된 검색어, 실패 시 오류 메시지
+ */
 export function parsePostcodeInput(
   input: string,
   page = 1,
@@ -205,6 +233,12 @@ export function parsePostcodeInput(
   };
 }
 
+/**
+ * 전체 도로명 주소 문자열에서 재검색에 사용할 "도로명 건물번호" 입력값만 추출한다.
+ * 예) "테헤란로 152, OO빌딩" -> "테헤란로 152"
+ * @param roadAddr 화면에 표시된 도로명 주소 문자열
+ * @returns 재검색 입력란에 넣을 수 있는 문자열, 추출 실패 시 빈 문자열
+ */
 export function extractSearchInputFromRoadAddr(roadAddr: string): string {
   const firstSegment = roadAddr.split(",")[0]?.trim() ?? "";
   if (!firstSegment) return "";
@@ -216,10 +250,16 @@ export function extractSearchInputFromRoadAddr(roadAddr: string): string {
   return `${parts.slice(0, -1).join(" ")} ${bldgToken}`.trim();
 }
 
+/**
+ * 사용자가 입력 중인 도로명을 기준으로 자동완성 후보를 조회한다.
+ * 건물번호가 함께 입력된 경우에는 마지막 숫자 토큰을 제외한 도로명만으로 후보를 찾는다.
+ * @param input 사용자가 입력창에 입력한 원본 문자열
+ * @returns 최대 5개의 "도로명 건물본번" 자동완성 문자열 목록
+ */
 export async function fetchPostcodeSuggestions(input: string): Promise<string[]> {
-  const normalized = input.replace(/\s+/g, " ").trim();
+  const normalized = input.replace(/\s+/g, " ").trim(); // space가 여러개일 때, 하나만 남김
   const parts = normalized.split(" ");
-  const tail = parts.at(-1) ?? "";
+  const tail = parts.at(-1) ?? ""; // 마지막 요소
   const roadNm =
     /^\d+(?:-\d+)?$/.test(tail) && parts.length > 1
       ? parts.slice(0, -1).join(" ").trim()
@@ -252,6 +292,15 @@ export async function fetchPostcodeSuggestions(input: string): Promise<string[]>
   return suggestions;
 }
 
+/**
+ * 우편번호 검색 API를 호출해 화면 표시용 우편번호 목록 형태로 변환한다.
+ * @param params 조회 조건 객체
+ * @param params.roadNm 검색할 도로명
+ * @param params.bldgNoMno 건물 본번
+ * @param params.bldgNoSno 건물 부번
+ * @param params.page 1부터 시작하는 화면 페이지 번호
+ * @returns 전체 건수와 화면 표시용 주소 목록
+ */
 export async function fetchPostcode(
   params: PostcodeSearchParams,
 ): Promise<PostcodeSearchResult> {
diff --git a/apps/dm/app/store/store.tsx b/apps/dm/app/store/store.tsx
index f885a3bd0..3b7b2c24d 100644
--- a/apps/dm/app/store/store.tsx
+++ b/apps/dm/app/store/store.tsx
@@ -18,8 +18,7 @@ import {
   dmStatusState,
   type DmStatusStore,
   type DmStatusType,
-} from "./wrStatus";
-
+} from "./dm-status";
 export type DmStore = CommonStore & SdmStore & DmMapStore & DmStatusStore;
 export type DmState = CommonType & SdmType & DmMapType & DmStatusType;
 
@@ -33,8 +32,8 @@ export const StoreZus = (
 ) => {
   return createStore<DmStore>()((set) => {
     if (typeof window !== "undefined") {
-      tokenManager.setToken("site-id-key", "DM");
-      tokenManager.setToken("site-theme-key", "green");
+      tokenManager.setToken("site-id-key", process.env.NEXT_PUBLIC_SITE_ID||"DM");
+      tokenManager.setToken("site-theme-key", "white");
     }
 
     return {
diff --git a/apps/dm/app/style/PublicReuseFaciltyInsert.module.css b/apps/dm/app/style/PublicReuseFaciltyInsert.module.css
deleted file mode 100644
index 6fc6f75ee..000000000
--- a/apps/dm/app/style/PublicReuseFaciltyInsert.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.formInsideTitle{
-    background-color: gray;
-    text-align: center;
-}
-
-
-
-.smallTitle{
-}
\ No newline at end of file
diff --git a/apps/dm/components/BusinessSubNav.tsx b/apps/dm/components/BusinessSubNav.tsx
new file mode 100644
index 000000000..d8753b5dd
--- /dev/null
+++ b/apps/dm/components/BusinessSubNav.tsx
@@ -0,0 +1,268 @@
+/**
+ * 우측 메뉴
+ */
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+export type AnchorSection = {
+  id: string;
+  label: string;
+};
+
+export type BusinessSubNavMenu = {
+  key: string;
+  label: string;
+  href?: string;
+  current?: boolean;
+  defaultOpen?: boolean;
+  sections?: AnchorSection[];
+};
+
+type BusinessSubNavProps = {
+  menus?: BusinessSubNavMenu[];
+  offsetTop?: number;
+  className?: string;
+};
+
+export default function BusinessSubNav({
+  menus = [],
+  offsetTop = 120,
+  className = "",
+}: BusinessSubNavProps) {
+  const [activeId, setActiveId] = useState("");
+  const [openMenus, setOpenMenus] = useState<Record<string, boolean>>({});
+
+  const allSections = useMemo(
+    () => menus.flatMap((menu) => menu.sections ?? []),
+    [menus]
+  );
+
+  useEffect(() => {
+    const initialOpenState: Record<string, boolean> = {};
+
+    menus.forEach((menu) => {
+      initialOpenState[menu.key] = menu.defaultOpen ?? menu.current ?? false;
+    });
+
+    setOpenMenus(initialOpenState);
+  }, [menus]);
+
+useEffect(() => {
+  if (!allSections.length) return;
+
+  const targets = allSections
+    .map((section) => document.getElementById(section.id))
+    .filter(Boolean) as HTMLElement[];
+
+  if (!targets.length) return;
+
+  let rafId = 0;
+
+  const updateActiveSection = () => {
+    const baseLine = offsetTop + 500;
+    let nextActiveId = targets[0]?.id ?? "";
+
+    for (const el of targets) {
+      const { top } = el.getBoundingClientRect();
+      if (top <= baseLine) {
+        nextActiveId = el.id;
+        continue;
+      }
+
+      break;
+    }
+
+    setActiveId((prev) => (prev === nextActiveId ? prev : nextActiveId));
+  };
+
+  const requestUpdate = () => {
+    if (rafId) return;
+
+    rafId = window.requestAnimationFrame(() => { // 예약번호 반환
+      updateActiveSection();
+      rafId = 0;
+    });
+  };
+
+  const hash = window.location.hash.replace("#", "");
+  const initialActive =
+    allSections.find((section) => section.id === hash)?.id ??
+    allSections[0]?.id ??
+    "";
+
+  setActiveId(initialActive);
+  updateActiveSection();
+
+  window.addEventListener("scroll", requestUpdate, { passive: true });
+  window.addEventListener("resize", requestUpdate);
+
+  return () => {
+    window.removeEventListener("scroll", requestUpdate);
+    window.removeEventListener("resize", requestUpdate);
+
+    if (rafId) {
+      window.cancelAnimationFrame(rafId);
+    }
+  };
+}, [allSections, offsetTop]);
+
+  useEffect(() => {
+    if (!activeId) return;
+
+    const parentMenu = menus.find((menu) =>
+        (menu.sections ?? []).some((section) => section.id === activeId)
+    );
+
+    if (!parentMenu) return;
+
+    setOpenMenus(() => {
+      const nextOpenState: Record<string, boolean> = {};
+
+      menus.forEach((menu) => {
+        nextOpenState[menu.key] = menu.key === parentMenu.key;
+      });
+
+      return nextOpenState;
+    });
+  }, [activeId, menus]);
+
+  const handleMove = (id: string) => {
+    setActiveId(id);
+
+    const target = document.getElementById(id);
+    if (!target) return;
+
+    window.history.replaceState(null, "", `#${id}`);
+
+    const top = target.getBoundingClientRect().top + window.scrollY - offsetTop;
+
+    window.scrollTo({
+      top,
+      behavior: "smooth",
+    });
+  };
+
+  const toggleMenu = (key: string) => {
+    setOpenMenus((prev) => ({
+      ...prev,
+      [key]: !prev[key],
+    }));
+  };
+
+  if (!menus.length) return null;
+
+  return (
+    <aside className={`fixed right-2 top-[110px] z-50 w-[260px] ${className}`}>
+      <div className="overflow-hidden bg-white">
+        {menus.map((menu) => {
+          const isOpen = openMenus[menu.key] ?? false;
+          const hasChildren = (menu.sections?.length ?? 0) > 0;
+          const isCurrentGroup = (menu.sections ?? []).some(
+            (section) => section.id === activeId
+          );
+
+          return (
+            <div
+              key={menu.key}
+            >
+              <div className="flex items-center justify-between px-5 py-2">
+                {menu.href ? (
+                  <Link
+                    href={menu.href}
+                    className={[
+                      "text-[16px] font-medium tracking-[-0.02em]",
+                      isCurrentGroup || menu.current
+                        ? "text-sky-500"
+                        : "text-[#767676]",
+                    ].join(" ")}
+                  >
+                    {menu.label}
+                  </Link>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (hasChildren) toggleMenu(menu.key);
+                    }}
+                    className={[
+                      "text-left text-[16px] font-medium tracking-[-0.02em]",
+                      isCurrentGroup || menu.current
+                        ? "text-sky-500"
+                        : "text-[#767676]",
+                    ].join(" ")}
+                  >
+                    {menu.label}
+                  </button>
+                )}
+
+                {hasChildren && (
+                  <button
+                    type="button"
+                    onClick={() => toggleMenu(menu.key)}
+                    className={[
+                      "ml-2 shrink-0",
+                      isCurrentGroup || menu.current
+                        ? "text-sky-500"
+                        : "text-[#767676]",
+                    ].join(" ")}
+                    aria-label={`${menu.label} 드롭다운 토글`}
+                  >
+                    {isOpen ? (
+                      <ChevronUp className="h-5 w-5" />
+                    ) : (
+                      <ChevronDown className="h-5 w-5" />
+                    )}
+                  </button>
+                )}
+              </div>
+
+              {hasChildren && isOpen && (
+                <div className="relative px-5 pb-5">
+                  <div className="absolute left-[31px] top-[6px] bottom-[14px] w-[2px] bg-[#CDD5DB]" />
+
+                  <ul className="space-y-4 pl-2">
+                    {menu.sections!.map((section) => {
+                      const active = activeId === section.id;
+
+                      return (
+                        <li key={section.id}>
+                          <button
+                            type="button"
+                            onClick={() => handleMove(section.id)}
+                            className="flex items-start gap-3 text-left"
+                          >
+                            <span
+                              className={[
+                                "relative z-[1] mt-[6px] -ml-[2px] h-[11px] w-[11px] shrink-0 rounded-full border",
+                                active
+                                  ? "border-sky-500 bg-sky-500"
+                                  : "border-[#BFC7CF] bg-white",
+                              ].join(" ")}
+                            />
+                            <span
+                              className={[
+                                "break-keep text-[14px] leading-[1.45] transition-colors",
+                                active
+                                  ? "text-[#4A4A4A]"
+                                  : "text-[#D1D7DE] hover:text-[#7B8794]",
+                              ].join(" ")}
+                            >
+                              {section.label}
+                            </span>
+                          </button>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm_new/components/CandidateSiteModal.tsx b/apps/dm/components/CandidateSiteModal.tsx
similarity index 100%
rename from apps/dm_new/components/CandidateSiteModal.tsx
rename to apps/dm/components/CandidateSiteModal.tsx
diff --git a/apps/dm/components/CaseImageSlider.tsx b/apps/dm/components/CaseImageSlider.tsx
new file mode 100644
index 000000000..7ad2d7ec4
--- /dev/null
+++ b/apps/dm/components/CaseImageSlider.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+type Slide = { src: string; alt?: string };
+
+type Props = {
+  slides: Slide[];
+  className?: string;
+  maxWidthClassName?: string;
+  autoPlayMs?: number;
+  imageHeightClassName?: string;
+};
+
+const PER_VIEW = 2;
+
+export default function CaseImageSlider({
+  slides,
+  className = "",
+  maxWidthClassName = "max-w-[700px]",
+  autoPlayMs = 4500,
+  imageHeightClassName = "h-[340px]",
+}: Props) {
+  const safeSlides = useMemo(() => slides.filter(Boolean), [slides]);
+
+  const [page, setPage] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const [isHover, setIsHover] = useState(false);
+
+  const startX = useRef(0);
+  const deltaX = useRef(0);
+
+  const pageCount = Math.ceil(safeSlides.length / PER_VIEW);
+  const canSlide = pageCount > 1;
+
+  const goTo = (nextPage: number) => {
+    if (!canSlide) return;
+
+    if (nextPage < 0) setPage(pageCount - 1);
+    else if (nextPage >= pageCount) setPage(0);
+    else setPage(nextPage);
+  };
+
+  const goNext = () => goTo(page + 1);
+  const goPrev = () => goTo(page - 1);
+
+  // ✅ 자동롤링 (hover 시 정지 포함)
+  useEffect(() => {
+    if (!canSlide || dragging || isHover) return;
+
+    const timer = window.setInterval(() => {
+      setPage((prev) => (prev + 1 >= pageCount ? 0 : prev + 1));
+    }, autoPlayMs);
+
+    return () => window.clearInterval(timer);
+  }, [canSlide, dragging, isHover, pageCount, autoPlayMs]);
+
+  // ✅ swipe
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!canSlide) return;
+
+    setDragging(true);
+    startX.current = e.clientX;
+    deltaX.current = 0;
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+
+  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragging) return;
+    deltaX.current = e.clientX - startX.current;
+  };
+
+  const onPointerUp = () => {
+    if (!dragging) return;
+
+    setDragging(false);
+
+    const threshold = 50;
+
+    if (deltaX.current > threshold) goPrev();
+    if (deltaX.current < -threshold) goNext();
+
+    deltaX.current = 0;
+  };
+
+  if (!safeSlides.length) return null;
+
+  return (
+    <section className={className}>
+      <div className={`mx-auto ${maxWidthClassName}`}>
+        <div
+          className="overflow-hidden select-none touch-pan-y cursor-grab active:cursor-grabbing"
+          onMouseEnter={() => setIsHover(true)}   // ✅ hover 시작 → 정지
+          onMouseLeave={() => setIsHover(false)}  // ✅ hover 끝 → 재시작
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          onPointerCancel={onPointerUp}
+        >
+          <div
+            className="flex transition-transform duration-500 ease-out"
+            style={{
+              transform: `translateX(-${page * 100}%)`,
+            }}
+          >
+            {Array.from({ length: pageCount }).map((_, pageIndex) => {
+              const pageSlides = safeSlides.slice(
+                pageIndex * PER_VIEW,
+                pageIndex * PER_VIEW + PER_VIEW
+              );
+
+              return (
+                <div
+                  key={pageIndex}
+                  className="grid min-w-full grid-cols-2 gap-5"
+                >
+                  {pageSlides.map((slide, i) => (
+                    <div
+                      key={`${slide.src}-${i}`}
+                      className={`relative ${imageHeightClassName} overflow-hidden rounded-[20px] bg-neutral-100`}
+                    >
+                      <Image
+                        src={slide.src}
+                        alt={slide.alt ?? `slide-${pageIndex * PER_VIEW + i + 1}`}
+                        fill
+                        className="object-cover"
+                        sizes="(max-width: 768px) 50vw, 340px"
+                        draggable={false}
+                      />
+                    </div>
+                  ))}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* 도트 */}
+        {canSlide && (
+          <div className="mt-5 flex items-center justify-center gap-[6px]">
+            {Array.from({ length: pageCount }).map((_, i) => (
+              <button
+                key={i}
+                type="button"
+                onClick={() => setPage(i)}
+                className={[
+                  "h-[8px] w-[8px] rounded-full transition-all",
+                  page === i ? "bg-[#18BCEB]" : "bg-[#D8DDE3]",
+                ].join(" ")}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm_new/app/(landing)/reuse/_components/CaseTabsCarousel.tsx b/apps/dm/components/CaseTabsCarousel.tsx
similarity index 70%
rename from apps/dm_new/app/(landing)/reuse/_components/CaseTabsCarousel.tsx
rename to apps/dm/components/CaseTabsCarousel.tsx
index ece8f0848..f9ad4f2a8 100644
--- a/apps/dm_new/app/(landing)/reuse/_components/CaseTabsCarousel.tsx
+++ b/apps/dm/components/CaseTabsCarousel.tsx
@@ -22,7 +22,7 @@ import Image from "next/image";
  * - BUGFIX 2) 슬라이드 중(busy) clipWidth 변화로 트랙 스냅(-W) 덮어쓰지 않게 분리
  */
 
-type TabKey = "rain" | "reuse" | "sewage" | "global";
+type TabKey = "rain" | "greywater" | "sewage" | "global";
 
 type CaseItem = {
   id: string;
@@ -33,8 +33,8 @@ type CaseItem = {
 };
 
 const TABS: { key: TabKey; label: string }[] = [
-  { key: "rain", label: "빗물 재이용 사례" },
-  { key: "reuse", label: "중수 재이용 사례" },
+  { key: "rain", label: "빗물이용시설 사례" },
+  { key: "greywater", label: "중수도 사례" },
   { key: "sewage", label: "하수 재이용 사례" },
   { key: "global", label: "해외 재이용 사례" },
 ];
@@ -43,113 +43,143 @@ const TABS: { key: TabKey; label: string }[] = [
 const MOCK: Record<TabKey, CaseItem[]> = {
   rain: [
     {
-      id: "rain-0",
-      title: "경기도 수원시 빗물이용과 중수도",
-      desc: "(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기…",
-      imageSrc: "/images/landing/rain_01.png",
-      href: "/reuse/business/rain/suwon",
+      id: "rain-1",
+      title: "경기도 수원시 빗물 재이용",
+      desc: "월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물공급기를 설치하여 축서기 도시 열섬효과 및 도로 비산먼지 저감",
+      imageSrc: "/images/landing/business/rain/suwon_01.png",
+      href: "/example#example-rain-suwon",
+    },
+    {
+      id: "rain-2",
+      title: "제주특별자치도 빗물 재이용",
+      desc: "강우시 비닐하우스에서 발생하는 대체수자원인 빗물을 순환 활용하고자 하는 사업으로, 지하수 사용 저감과 집중호우시 도로와 농경지 침수피해 예방",
+      imageSrc: "/images/landing/business/rain/jeju_01.png",
+      href: "/example#example-rain-jeju",
+    },
+  ],
+  greywater: [
+    {
+      id: "greywater-1",
+      title: "경기도 안산시 중수 재이용",
+      desc: "수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현을 위해 안산시 중수 재이용 사업 추진, 공공기관 및 산업체에 중수 공급",
+      imageSrc: "/images/landing/business/greywater/no_img.jpg",
+      href: "/example#example-greywater-ansan",
+    },
+    {
+      id: "greywater-2",
+      title: "경기도 용인시 중수 재이용",
+      desc: "물 부족 등의 비상상황에 대한 대비, 하수라도 사용할 집결 등 수자원의 효율적 활용과 지속가능성 도모를 위해 용인시 중수 재이용 사업 추진, 공공기관 및 산업체에 중수 공급",
+      imageSrc: "/images/landing/business/greywater/no_img.jpg",
+      href: "/example#example-greywater-yongin",
+    },
+    {
+      id: "greywater-3",
+      title: "경기도 평택시 중수 재이용",
+      desc: "수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현을 위해 평택시 중수 재이용 사업 추진, 공공기관 및 산업체에 중수 공급",
+      imageSrc: "/images/landing/business/greywater/no_img.jpg",
+      href: "/example#example-greywater-pyeongtaek",
     },
-    // {
-    //   id: "rain-2",
-    //   title: "경기도 수원시 빗물이용과 중수도",
-    //   desc: "(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기…",
-    //   imageSrc: "/images/landing/rain_01.png",
-    //   href: "#",
-    // },
   ],
-  reuse: Array.from({ length: 6 }).map((_, i) => ({
-    id: `reuse-${i}`,
-    title: `중수 재이용 사례 ${i + 1}`,
-    desc: "설명 문구가 들어갑니다. (최대 2~3줄) …",
-    imageSrc: "/images/landing/sample_case.png",
-    href: "#",
-  })),
   sewage: [
     {
       id: "sewage-1",
-      title: "경기도 파주시 하수 재이용",
-      desc: "운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에...",
-      imageSrc: "/images/landing/sewage_01.png",
-      href: "/reuse/business/sewage/paju",
+      title: "구리시 하수 재이용",
+      desc: "고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여 미세먼지 저감 및 폭염 취약성 완화",
+      imageSrc: "/images/landing/business/sewage/guri_01.png",
+      href: "/example#example-sewage-guri",
     },
     {
       id: "sewage-2",
-      title: "충남보령 하수재이용",
-      desc: "보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업...",
-      imageSrc: "/images/landing/sewage_02.png",
-      href: "/reuse/business/sewage/bolyeong",
+      title: "부천시 하수재이용",
+      desc: "굴포하수처리시설 하수처리수 재이용수 생산시설 설치 운영을 통해 여월천 등 부천 관내 하천의 건천화 방지, 하천 생태계 보존 및 주민들에게 친수 공간 제공",
+      imageSrc: "/images/landing/business/sewage/bucheon_01.png",
+      href: "/example#example-sewage-bucheon",
     },
     {
       id: "sewage-3",
-      title: "여수시 하수처리수 재이용",
-      desc: "(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로...",
-      imageSrc: "/images/landing/sewage_03.png",
-      href: "/reuse/business/sewage/yeosu",
+      title: "수원시 하수처리수 재이용",
+      desc: "황구지천 공공하수처리시설 하수처리수 재이용사업으로 황구 호매실천 및 금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전",
+      imageSrc: "/images/landing/business/sewage/suwon_01.png",
+      href: "/example#example-sewage-suwon",
     },
     {
       id: "sewage-4",
-      title: "청주시 하수 재이용 시설",
-      desc: "청주시 하수처리수 재이용 민간투자사업(BTO) 청주시 하수처리수 재이용 민간투자사업(BTO) 청주시 하수처리수 재이용 민간투자사업(BTO)...",
-      imageSrc: "/images/landing/sewage_04.png",
-      href: "/reuse/business/sewage/cheongju",
+      title: "파주시 하수 재이용 시설",
+      desc: "운정 및 금촌하수처리시설의 하수처리수를 막공법으로 재처리하여 파주LCD산업단지 내 3개 업체에 공업용수를 공급(LG디스플레이, 희성전자, 엔비텍)",
+      imageSrc: "/images/landing/business/sewage/paju_01.png",
+      href: "/example#example-sewage-paju",
     },
     {
       id: "sewage-5",
-      title: "수원시 황구지천 하천유지용수",
-      desc: "황구지천 공공하수처리시설 하수처리수 재이용사업으로 향후 호매실천 및 금곡천 건천화 방지로...",
-      imageSrc: "/images/landing/sewage_05.png",
-      href: "/reuse/business/sewage/hwanggu",
+      title: "포항시 하수 재이용 시설",
+      desc: "포항시 내 공단 개발 확대로 지속적이고 안정적인 공업용수 공급 추진(포스코, 동국산업 등), 포항하수처리장 하수처리수를 재처리하여 공업용수로 공급",
+      imageSrc: "/images/landing/business/sewage/pohang_01.png",
+      href: "/example#example-sewage-pohang",
     },
     {
       id: "sewage-6",
-      title: "구리시 도로자동청소시스템",
-      desc: "고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용...",
-      imageSrc: "/images/landing/sewage_06.png",
-      href: "/reuse/business/sewage/guri",
+      title: "울산광역시 하수 재이용 시설",
+      desc: "18년 갈수기시 낙동강 수질 악화로 울산석유화학단지 용수 공급 부족을 해소하기 위해 미포산단 내 한화케미칼 등 8개사 공업용수 공급",
+      imageSrc: "/images/landing/business/sewage/ulsan_01.png",
+      href: "/example#example-sewage-ulsan",
     },
-    // ...Array.from({ length: 6 }).map((_, i) => ({
-    //   id: `sewage-x-${i}`,
-    //   title: `하수 재이용 사례 ${i + 4}`,
-    //   desc: "설명 문구가 들어갑니다. (최대 2~3줄) …",
-    //   imageSrc: "/images/landing/sample_case.png",
-    //   href: "#",
-    // })),
+    {
+      id: "sewage-7",
+      title: "여수시 하수 재이용 시설",
+      desc: "수요자가 원하는 양질의 공업용수를 저렴하게 공급하여 한정된 수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한 오염총량 저감 및 방류수역 수질개선을 위한 여수국가산단 내 공업용수 공급(GS칼텍스, YNCC 등)",
+      imageSrc: "/images/landing/business/sewage/yeosu_01.png",
+      href: "/example#example-sewage-yeosu",
+    },
+    {
+      id: "sewage-8",
+      title: "보령시 하수 재이용 시설",
+      desc: "한국중부발전(주)의 보령 및 신보령화력발전소에 10,000㎥/일의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진, 하수처리수 재이용을 통한 수자원 절약 및 지역 물 부족 해소",
+      imageSrc: "/images/landing/business/sewage/boryeong_01.png",
+      href: "/example#example-sewage-boryeong",
+    },
+    {
+      id: "sewage-9",
+      title: "아산시 하수 재이용 시설",
+      desc: "신도시 개발에 따른 인구 급증으로 발생하는 하수를 재처리하여 탕정산업단지(삼성디스플레이)에 공업용수를 안정적으로 공급함으로써 지역기반 및 활성화를 도모",
+      imageSrc: "/images/landing/business/sewage/asan_01.png",
+      href: "/example#example-sewage-asan",
+    }
   ],
   global: [
     {
       id: "global-1",
       title: "해외 재이용 사례 개요",
-      desc: "2024년 하수도 통계 기준 15.6%이며, 제2차 물 재이용 기본 계획을 고려한 2030년 목표는 17%, 우리나라의 하수 처리 재이용률은 15% 수준...",
-      imageSrc: "/images/landing/overview_01.png",
-      href: "reuse/business/globalCase/overview",
+      desc: "전 세계적으로 물 재이용은 호주, 유럽, 아프리카, 미국 등 가뭄이 잦거나 심각한 가뭄이 발생한 국가에서 많이 이루어짐. 이스라엘, 쿠웨이트 등 중동 및 북아프리카 지역은 가용 수자원이 제한되어 있어 재이용량 비중도 매우 높은 편",
+      imageSrc: "/images/landing/business/globalCase/overview_01.png",
+      href: "/example#example-global-overview",
     },
     {
       id: "global-2",
       title: "[대만] 국가 주도의 공업용수 공급",
-      desc: "대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업 시행(안핑), 안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능...",
-      imageSrc: "/images/landing/taiwan_01.png",
-      href: "/reuse/business/globalCase/taiwan",
+      desc: "수자원 지속 가능성 향상, 재생 수자원 활용을 통해 물부족 문제 해결. 재생 수자원 정의·분류, 이용 의무, 이용 제한, 수질 기준 등",
+      imageSrc: "/images/landing/business/globalCase/taiwan_01.png",
+      href: "/example#example-global-taiwan",
     },
     {
       id: "global-3",
-      title: "[호주] 생활 속 물 재이용 / 광역 물 재이용수 공급",
-      desc: "SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해 설정한 광역 수로망, 이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급...",
-      imageSrc: "/images/landing/australia_01.png",
-      href: "/reuse/business/globalCase/australia",
+      title: "[싱가포르] 수요가 높은 산업의 물 재이용 의무화",
+      desc: "2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해 NEWater Visitor Center를 함께 건설. NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용",
+      imageSrc: "/images/landing/business/globalCase/singapore_01.png",
+      href: "/example#example-global-singapore",
     },
     {
       id: "global-4",
-      title: "[싱가포르] 수요가 높은 산업의 물 재이용 의무화",
-      desc: "2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해 NEWater Visitor Center를 함께 건설, NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용...",
-      imageSrc: "/images/landing/singapore_01.png",
-      href: "/reuse/business/globalCase/singapore",
+      title: "[호주] 생활 속 물 재이용 / 광역 물 재이용수 공급",
+      desc: "SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해 설정한 광역 수로망. 이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급",
+      imageSrc: "/images/landing/business/globalCase/australia_01.png",
+      href: "/example#example-global-australia",
     },
     {
       id: "global-5",
       title: "[EU] 법률을 제정, EU국가에서 물 재이용 유도",
-      desc: "유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을 제정 (2020/741), 2023년부터 모든 EU국가에서 시행...",
-      imageSrc: "/images/landing/eu_01.png",
-      href: "/reuse/business/globalCase/eu",
+      desc: "유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을 제정 (2020/741), 2023년부터 모든 EU국가에서 시행",
+      imageSrc: "/images/landing/business/globalCase/eu_01.png",
+      href: "/example#example-global-eu",
     },
   ],
 };
@@ -249,7 +279,7 @@ export default function CaseTabsCarousel() {
   // 탭별 마지막 그룹 인덱스 기억
   const tabIndexRef = useRef<Record<TabKey, number>>({
     rain: 0,
-    reuse: 0,
+    greywater: 0,
     sewage: 0,
     global: 0,
   });
diff --git a/apps/dm_new/components/ImageSlider.tsx b/apps/dm/components/ImageSlider.tsx
similarity index 100%
rename from apps/dm_new/components/ImageSlider.tsx
rename to apps/dm/components/ImageSlider.tsx
diff --git a/apps/dm/components/Lnb.tsx b/apps/dm/components/Lnb.tsx
new file mode 100644
index 000000000..dd3170c6b
--- /dev/null
+++ b/apps/dm/components/Lnb.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export type LnbMenu = {
+  label: string;
+  href: string;
+};
+
+type Props = {
+  menus?: LnbMenu[];
+  className?: string;
+};
+
+const defaultMenus: LnbMenu[] = [
+  { label: "수요처", href: "/apply/dmdco" },
+  { label: "수요정보등록", href: "/apply/dmdinfo" },
+  { label: "수요신청현황", href: "/apply/status" },
+];
+
+export default function Lnb({ menus, className = "" }: Props) {
+  const pathname = usePathname();
+  const navMenus = menus ?? defaultMenus;
+
+  return (
+    <aside className={`fixed right-2 top-[110px] z-50 w-[260px] ${className}`}>
+        <ul className="space-y-1">
+          {navMenus.map((menu) => {
+            const isActive =
+              pathname === menu.href ||
+              pathname.startsWith(`${menu.href}/`);
+
+            return (
+              <li key={menu.href}>
+                <Link
+                  href={menu.href}
+                  className={`
+                    block text-[16px] font-medium transition px-5 py-2
+                    ${
+                      isActive
+                        ? "text-[#00AEEF]"
+                        : "text-[#767676] hover:text-[#00AEEF]"
+                    }
+                  `}
+                >
+                  {menu.label}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+    </aside>
+  );
+}
\ No newline at end of file
diff --git a/apps/dm_new/components/LoginModal.tsx b/apps/dm/components/LoginModal.tsx
similarity index 87%
rename from apps/dm_new/components/LoginModal.tsx
rename to apps/dm/components/LoginModal.tsx
index 60f46f7ad..086deedff 100644
--- a/apps/dm_new/components/LoginModal.tsx
+++ b/apps/dm/components/LoginModal.tsx
@@ -1,10 +1,13 @@
+/**
+ * 로그인 modal
+ */
 "use client";
 
 import { useEffect, useId, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useDmStore } from "@/app/store";
 import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
-import { sha512 } from 'js-sha512';
+import { sha512 } from "js-sha512";
 
 type LoginModalProps = {
   open: boolean;
@@ -21,13 +24,19 @@ function isBizNoValid(v: string) {
 }
 
 function inputCls(opts: { hasError?: boolean; disabled?: boolean }) {
-  const base = "h-[48px] w-full rounded-[4px] border px-5 text-[18px] outline-none";
+  const base =
+    "h-[48px] w-full rounded-[4px] border px-5 text-[18px] outline-none";
   if (opts.disabled) return `${base} border-gray-200 bg-gray-50 text-gray-400`;
-  if (opts.hasError) return `${base} border-red-500 ring-1 ring-red-400 focus:border-red-500`;
+  if (opts.hasError)
+    return `${base} border-red-500 ring-1 ring-red-400 focus:border-red-500`;
   return `${base} border-gray-300 focus:border-sky-400`;
 }
 
-export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps) {
+export default function LoginModal({
+  open,
+  onClose,
+  onSuccess,
+}: LoginModalProps) {
   const titleId = useId();
   const router = useRouter();
   const { actionLogin } = useDmStore((state) => state);
@@ -39,13 +48,30 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
 
   // ✅ 유효성/서버 에러 표시용
   const [errors, setErrors] = useState<Partial<Record<FieldKey, string>>>({});
-  const [touched, setTouched] = useState<Partial<Record<FieldKey, boolean>>>({});
+  const [touched, setTouched] = useState<Partial<Record<FieldKey, boolean>>>(
+    {},
+  );
   const [submitting, setSubmitting] = useState(false);
 
+  const resetForm = () => {
+    setBizNo("");
+    setWorkerNo("");
+    setNoWorker(true);
+    setPw("");
+    setErrors({});
+    setTouched({});
+    setSubmitting(false);
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
   useEffect(() => {
     if (!open) return;
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose(); // ESC 키로 모달 닫기
+      if (e.key === "Escape") handleClose(); // ESC 키로 모달 닫기
     };
     window.addEventListener("keydown", onKeyDown);
 
@@ -53,18 +79,15 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden"; // 모달 오픈 시 배경 스크롤 방지
 
-    // 모달 오픈 시 에러/터치 초기화
-    setErrors({});
-    setTouched({});
-
     return () => {
       window.removeEventListener("keydown", onKeyDown);
       document.body.style.overflow = prev;
     };
-  }, [open, onClose]);
+  }, [open]);
 
   useEffect(() => {
-    if (noWorker) { // 종사업자번호 해당없음
+    if (noWorker) {
+      // 종사업자번호 해당없음
       setWorkerNo(""); // 종사업자번호
       setErrors((p) => {
         const nextErrors = { ...p };
@@ -122,7 +145,7 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
   const markAllTouched = () =>
     setTouched({ bizNo: true, workerNo: true, pw: true });
 
-  const submit = async (e: React.FormEvent) => {
+  const submit = async (e: React.SubmitEvent) => {
     e.preventDefault();
     markAllTouched();
 
@@ -141,8 +164,8 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
       if (sessionUser) {
         const parsed = JSON.parse(sessionUser) as { dmdCoNm?: string };
         onSuccess?.({ userName: parsed.dmdCoNm ?? "수요처" });
-        onClose();
-        router.refresh();
+        handleClose();
+        router.push("/apply/status");
       }
     } finally {
       setSubmitting(false);
@@ -150,8 +173,10 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
   };
 
   const initPassword = () => {
-    alert("관리자(031-0000-0000)에게 비밀번호 초기화 요청을 유선으로 하시기 바랍니다.");
-  }
+    alert(
+      "관리자(031-0000-0000)에게 비밀번호 초기화 요청을 유선으로 하시기 바랍니다.",
+    );
+  };
 
   return (
     <div className="fixed inset-0 z-[100]">
@@ -159,7 +184,7 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
       <button
         type="button"
         aria-label="닫기"
-        onClick={onClose}
+        onClick={handleClose}
         className="absolute inset-0 bg-black/40"
       />
 
@@ -175,7 +200,7 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
           <div className="relative px-10 pt-10">
             <button
               type="button"
-              onClick={onClose}
+              onClick={handleClose}
               aria-label="닫기"
               className="absolute right-8 top-8 z-40 h-10 w-10 grid place-items-center rounded-full hover:bg-gray-100"
             >
@@ -212,7 +237,9 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
                     validate();
                   }}
                   placeholder="사업자등록번호를 입력하세요. (예: 123-45-67890)"
-                  className={inputCls({ hasError: !!(touched.bizNo && errors.bizNo) })}
+                  className={inputCls({
+                    hasError: !!(touched.bizNo && errors.bizNo),
+                  })}
                 />
                 {touched.bizNo && errors.bizNo && (
                   <p className="mt-3 text-[14px] font-medium text-red-500">
@@ -253,7 +280,8 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
                   placeholder="종사자등록번호를 입력하세요."
                   className={inputCls({
                     disabled: noWorker,
-                    hasError: !noWorker && !!(touched.workerNo && errors.workerNo),
+                    hasError:
+                      !noWorker && !!(touched.workerNo && errors.workerNo),
                   })}
                 />
 
@@ -281,7 +309,9 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
                     validate();
                   }}
                   placeholder="비밀번호를 입력하세요."
-                  className={inputCls({ hasError: !!(touched.pw && errors.pw) })}
+                  className={inputCls({
+                    hasError: !!(touched.pw && errors.pw),
+                  })}
                 />
                 {touched.pw && errors.pw && (
                   <p className="mt-3 text-[14px] font-medium text-red-500">
@@ -326,7 +356,10 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
 
                 <button
                   type="button"
-                  onClick={() => router.push(REGISTER_HREF)}
+                  onClick={() => {
+                    handleClose();
+                    router.push(REGISTER_HREF);
+                  }}
                   className="shrink-0 rounded-[4px] h-[48px] px-10 bg-[#004A94] text-white text-[18px] hover:opacity-95"
                 >
                   수요처등록
diff --git a/apps/dm_new/components/LoginStatus.tsx b/apps/dm/components/LoginStatus.tsx
similarity index 100%
rename from apps/dm_new/components/LoginStatus.tsx
rename to apps/dm/components/LoginStatus.tsx
diff --git a/apps/dm_new/components/PostcodeModal.tsx b/apps/dm/components/PostcodeModal.tsx
similarity index 88%
rename from apps/dm_new/components/PostcodeModal.tsx
rename to apps/dm/components/PostcodeModal.tsx
index 116bf91d8..26c566e3c 100644
--- a/apps/dm_new/components/PostcodeModal.tsx
+++ b/apps/dm/components/PostcodeModal.tsx
@@ -30,14 +30,16 @@ function useDebouncedValue<T>(value: T, delay = 250) {
 export default function PostcodeModal({ open, onClose, onSelect }: Props) {
   const [mounted, setMounted] = useState(false);
 
-  const [q, setQ] = useState("");
+  const [q, setQ] = useState(""); // 주소 입력값
   const dq = useDebouncedValue(q, 250);
 
-  const [items, setItems] = useState<AddrItem[]>([]);
-  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [items, setItems] = useState<AddrItem[]>([]); // 검색 결과
+  const [suggestions, setSuggestions] = useState<string[]>([]); // 추천 주소 목록
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
-  const [searchMessage, setSearchMessage] = useState("");
+  const [searchMessage, setSearchMessage] = useState(""); // 검색 실패/형식 오류/보조 안내 문구를 담는 상태값
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [searchedInput, setSearchedInput] = useState(""); // 주소 검색 입력란 저장
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -51,6 +53,7 @@ export default function PostcodeModal({ open, onClose, onSelect }: Props) {
     setTotal(0);
     setLoading(false);
     setSearchMessage("");
+    setIsInputFocused(false);
   }, [open]);
 
   useEffect(() => {
@@ -59,7 +62,7 @@ export default function PostcodeModal({ open, onClose, onSelect }: Props) {
     const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
 
-    setTimeout(() => inputRef.current?.focus(), 50);
+    setTimeout(() => inputRef.current?.focus(), 50); // 주소입력란에 focus()
 
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose();
@@ -131,6 +134,7 @@ export default function PostcodeModal({ open, onClose, onSelect }: Props) {
 
         setItems(result.items);
         setTotal(result.totalCount);
+        setSearchedInput(keyword);
       } catch {
         if (!alive) return;
         setItems([]);
@@ -149,7 +153,7 @@ export default function PostcodeModal({ open, onClose, onSelect }: Props) {
     };
   }, [dq, open]);
 
-  const showSuggest = open && q.trim().length >= 1 && suggestions.length > 0;
+  const showSuggest = open && isInputFocused && q.trim().length >= 1 && suggestions.length > 0 && dq.trim() !== searchedInput;
 
   if (!mounted || !open) return null;
 
@@ -190,6 +194,10 @@ export default function PostcodeModal({ open, onClose, onSelect }: Props) {
                 ref={inputRef}
                 value={q}
                 onChange={(e) => setQ(e.target.value)}
+                onFocus={() => setIsInputFocused(true)}
+                onBlur={() => {
+                  setTimeout(() => setIsInputFocused(false), 100);
+                }}
                 placeholder="예) 테헤란로 152-1"
                 className={[
                   "w-full rounded-md border px-4 py-3 pr-12 text-[14px] outline-none",
@@ -226,8 +234,9 @@ export default function PostcodeModal({ open, onClose, onSelect }: Props) {
                       key={s}
                       type="button"
                       className="flex w-full items-center justify-between px-4 py-3 text-left text-[14px] hover:bg-slate-50"
+                      onMouseDown={(e) => e.preventDefault()}
                       onClick={() => {
-                        // ✅ 추천 클릭 → 입력값 채우고 드롭다운 닫기 + 포커스 유지
+                        // 추천 클릭 → 입력값 초기화 드롭다운 닫기 + 포커스 유지
                         setQ(s);
                         setSuggestions([]);
                         requestAnimationFrame(() => inputRef.current?.focus());
@@ -263,7 +272,9 @@ export default function PostcodeModal({ open, onClose, onSelect }: Props) {
                   <button
                     key={`${it.zipNo}-${it.roadAddr}`}
                     type="button"
-                    onClick={() => onSelect(it)}
+                    onClick={() => {setQ("");
+                      setSuggestions([]);
+                      onSelect(it)}}
                     className={[
                       "w-full rounded-lg border p-4 text-left transition",
                       "border-slate-200 hover:border-sky-300 hover:bg-sky-50/30",
diff --git a/apps/dm_new/components/SubPageHeader.tsx b/apps/dm/components/SubPageHeader.tsx
similarity index 66%
rename from apps/dm_new/components/SubPageHeader.tsx
rename to apps/dm/components/SubPageHeader.tsx
index b18ee28a6..22f803223 100644
--- a/apps/dm_new/components/SubPageHeader.tsx
+++ b/apps/dm/components/SubPageHeader.tsx
@@ -16,27 +16,21 @@ type Props = {
 };
 
 export default function SubPageHeader({
-  title,
+  // title,
   crumbs,
-  note = "* 는 필수 값입니다.",
+  // note = "* 는 필수 값입니다.",
   // underlineWidthClass = "w-40",
   className = "",
   wrapClassName = "",
   // hideFooterLine = false,
-  hideGuideText = false,
+  // hideGuideText = false,
 }: Props) {
   return (
-    <section className={`text-black ${className}`}>
+    <section className={`text-black pr-[100px] ${className}`}>
       <div className={`pb-5 ${wrapClassName}`}>
-        <div className="flex items-start justify-between gap-6">
-          {/* 좌측 타이틀 */}
-          <div className="inline-block">
-            <h1 className="relative z-10 px-2 text-[28px] font-extrabold tracking-tight text-slate-900 leading-none">{title}</h1>
-            <div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300" />
-          </div>
-
+        <div className="flex flex-col gap-5">
           {/* 우측 브레드크럼 */}
-          <nav className="pt-2 text-sm text-black/70" aria-label="breadcrumb">
+          <nav className="text-sm text-black/70" aria-label="breadcrumb">
             {crumbs.map((c, i) => (
               <span key={`${c.label}-${i}`}>
                 {c.href ? (
@@ -49,15 +43,15 @@ export default function SubPageHeader({
                 {i < crumbs.length - 1 && <span className="mx-2">›</span>}
               </span>
             ))}
-          </nav>
+          </nav>          
         </div>
         {/* 하단 라인 + 안내문 */}
-        {!hideGuideText && (
+        {/* {!hideGuideText && (
           <div className="mt-6 border-t border-black/10 pt-4 text-sm text-black/70">
             <span className="text-red-400">*</span>
             {note.replace("*", "")}
           </div>
-        )}  
+        )}   */}
       </div>
     </section>
   );
diff --git a/apps/dm_new/components/TopNav.tsx b/apps/dm/components/TopNav.tsx
similarity index 94%
rename from apps/dm_new/components/TopNav.tsx
rename to apps/dm/components/TopNav.tsx
index 9a182560b..5e24ead78 100644
--- a/apps/dm_new/components/TopNav.tsx
+++ b/apps/dm/components/TopNav.tsx
@@ -12,10 +12,10 @@ import { useDmStore } from "@/app/store";
 const LS_USER_KEY = "user";
 
 const DEFAULT_NAV_ITEMS: Pick<MenuItem, "menuCd" | "menuKornNm" | "urlPath" | "newWndwYn">[] = [
-  { menuCd: 1, menuKornNm: "물 재이용 소개", urlPath: "/reuse/intro/law", newWndwYn: "N" },
-  { menuCd: 2, menuKornNm: "물 재이용 현황", urlPath: "/reuse/cases/rain", newWndwYn: "N" },
-  { menuCd: 3, menuKornNm: "물 재이용 사례", urlPath: "/reuse/business/rain/suwon", newWndwYn: "N" },
-  { menuCd: 4, menuKornNm: "수요신청", urlPath: "/reuse/apply/place", newWndwYn: "N" },
+  { menuCd: 1, menuKornNm: "물 재이용 소개", urlPath: "/intro", newWndwYn: "N" },
+  { menuCd: 2, menuKornNm: "물 재이용 현황", urlPath: "/status", newWndwYn: "N" },
+  { menuCd: 3, menuKornNm: "물 재이용 사례", urlPath: "/example", newWndwYn: "N" },
+  { menuCd: 4, menuKornNm: "수요신청", urlPath: "/apply/dmdco", newWndwYn: "N" },
 ];
 
 export default function TopNav() {
diff --git a/apps/dm/components/toastFromUi.tsx b/apps/dm/components/toastFromUi.tsx
deleted file mode 100644
index 24b0b985f..000000000
--- a/apps/dm/components/toastFromUi.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-
-import { Button } from "@common/components/ui";
-import Link from "next/link";
-import toast from "react-hot-toast";
-
-export function ToastFormUi(body:string,title:string,url:string,buttonName:string){
-
-  //const router = useRouter();
-
-    return(
-
-      toast.custom((t) => (
-      
-        <div
-          className={`${
-            t.visible ? 'animate-enter' : 'animate-leave'
-          }  w-4/12 h-40 bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
-        >
-          <div className="w-full flex-1 py-10">
-            <div className="flex items-start">
-              <div className="flex-shrink-0 pt-0.5">
-          
-              </div>
-              <div className="ml-3  flex-1">
-                <p className="text-xl font-medium  underline">
-                {title}
-                </p>
-                <p className="mt-1 text-2xl">
-                  {body}
-                </p>
-              </div>
-            </div>
-          </div>
-          <div className="flex py-20">
-            <Button
-              size='sm'
-              onClick={() => toast.dismiss(t.id)}
-            >
-              <Link href={url}> {buttonName}</Link>
-            </Button>
-          </div>
-          <div className="flex  pl-4 pr-4 py-20">
-            <Button
-              onClick={() => toast.dismiss(t.id)}
-              size='sm'
-            >
-              닫기
-            </Button>
-          </div>
-        </div>
-      ))
-    )
-}
\ No newline at end of file
diff --git a/apps/dm/components/ui/api/index.ts b/apps/dm/components/ui/api/index.ts
index abb0c2c73..49d244d25 100644
--- a/apps/dm/components/ui/api/index.ts
+++ b/apps/dm/components/ui/api/index.ts
@@ -1,6 +1,7 @@
 //8880
 import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config";
 import { getCookie } from "@common/components/lib/cookie";
+import { DEV_URL_FO, DEV_URL_WR, LOCAL_URL } from "../config/";
 
 
 const tokenId = getCookie(AUTH_USER_ID);
@@ -10,7 +11,9 @@ export const fetchType = {
   COMMON: "common",
   WR: "wr",
   FO: "fo",
-  SN: "sn"
+  SN: "sn",
+  LOCAL: "LOCAL",
+  CS: "CS",
 };
 
 const API_VERSION = "/api/v1"
@@ -44,6 +47,55 @@ export const getFetch = async (type: string, url: string) => {
   return res;
 };
 
+export const getFetchWithCount = async (type: string, url: string) => {
+  const div =
+    type === fetchType.COMMON
+      ? DEV_URL_FO
+      : type === fetchType.LOCAL
+        ? LOCAL_URL
+        : type === fetchType.CS
+          ? ""
+          : DEV_URL_WR;
+  const apiUrl = div + url;
+
+  const response = await fetch(apiUrl, {
+    method: "GET",
+    headers: {
+      accept: "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    console.log(`오류 발생: ${response.status}`);
+  }
+
+  const contentType = response.headers.get("content-type") ?? "";
+
+  if (contentType.includes("application/json")) {
+    // JSON 응답 처리
+    const res = await response.json();
+
+    return res;
+  } else if(contentType.includes('application/octet-stream')) {
+    // 파일 응답 처리 (ex. PDF, Excel 등)
+
+    console.log('contentType ' ,contentType)
+    const blob = await response.blob();
+    const blobUrl = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    const filename = "downloaded_file.PDF";
+
+    a.href = blobUrl;
+    a.download = filename;
+    a.click();
+    window.URL.revokeObjectURL(blobUrl);
+
+    return null; // 다운로드이므로 반환값 없음
+  }else{
+    throw Error('오류 발생')
+  } 
+};
+
 export const postFetch = async (url: string, params: RequestParams) => {
   const baseUrl = servers[fetchType.WR];
   const response = await fetch(baseUrl + url, {
diff --git a/apps/dm/components/ui/config/index.ts b/apps/dm/components/ui/config/index.ts
index 1585bb767..8dc7bdb50 100644
--- a/apps/dm/components/ui/config/index.ts
+++ b/apps/dm/components/ui/config/index.ts
@@ -1,6 +1,6 @@
 import { PROXY_HOST } from "@/src/shared/config/env";
 
 export const LOCAL_URL = PROXY_HOST;
-export const DEV_URL_FO = "/operation-service";
-export const DEV_URL_WR = "/reuse-service";
-export const DEV_URL_SN = "/sewerage-service";
+export const DEV_URL_FO = "/operation-service/api/v1";
+export const DEV_URL_WR = "/reuse-service/api/v1";
+export const DEV_URL_SN = "/sewerage-service/api/v1";
diff --git a/apps/dm/components/ui/contents/contents-api.ts b/apps/dm/components/ui/contents/contents-api.ts
new file mode 100644
index 000000000..0472b438b
--- /dev/null
+++ b/apps/dm/components/ui/contents/contents-api.ts
@@ -0,0 +1,40 @@
+// apps/dm/src/entities/content/
+// contents-api.ts
+import { unstable_cache } from "next/cache";
+import { ENDPOINT } from "@/src/shared/config";
+
+
+function getServerBaseUrl() {
+  const port = process.env.PORT ?? process.env.NEXT_PUBLIC_PORT ?? "3000";
+  const proxyHost = process.env.NEXT_PUBLIC_PROXY_HOST;
+
+  if (process.env.NODE_ENV === "production" && process.env.HOSTNAME) {
+    return `http://${process.env.HOSTNAME}:${port}`;
+  }
+
+  return proxyHost || `http://localhost:${port}`;
+}
+
+export const getCachedContentDetail = unstable_cache(
+  async (contsSn: number, menuCd: string) => {
+    const baseUrl = getServerBaseUrl();
+    const res = await fetch(
+      `${baseUrl}${ENDPOINT.CMS_SERVICE.CONTENTS}/${contsSn}?menuCd=${menuCd}`,
+      {
+        next: { revalidate: 0, tags: [`content:${contsSn}`] },
+      }
+    );
+
+    if (!res.ok) {
+      console.log(res);
+      throw new Error("Failed to fetch content");
+    }
+
+    return res.json();
+  },
+  ["dm-content-detail"],
+  {
+    revalidate: 86400, // 1시간마다 자동 갱신 (선택 사항)
+    tags: ["dm-content-detail"], // 여기에 태그를 명시해야 revalidateTag가 작동합니다.
+  }
+);
diff --git a/apps/dm/components/ui/contents/contentsPage.tsx b/apps/dm/components/ui/contents/contentsPage.tsx
new file mode 100644
index 000000000..c823acd42
--- /dev/null
+++ b/apps/dm/components/ui/contents/contentsPage.tsx
@@ -0,0 +1,18 @@
+/**
+ * 컨텐츠 서버 페이지
+ */
+import { getCachedContentDetail } from "./contents-api";
+import { ContentsPageClient } from "./contentsPageClient";
+
+type ContentsPageProps = {
+  contsSn: number;
+  menuCd: string;
+};
+
+async function ContentsPage({ contsSn, menuCd }: ContentsPageProps) {
+  const initialContent = await getCachedContentDetail(contsSn, menuCd);
+
+  return <ContentsPageClient initialContent={initialContent} />;
+}
+
+export { ContentsPage };
diff --git a/apps/dm/components/ui/contents/contentsPageClient.tsx b/apps/dm/components/ui/contents/contentsPageClient.tsx
new file mode 100644
index 000000000..4fe355dea
--- /dev/null
+++ b/apps/dm/components/ui/contents/contentsPageClient.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+import type { ContentsDetail } from "@/src/entities/content/model/contents-interface";
+
+type ContentsPageClientProps = {
+  initialContent: ContentsDetail;
+};
+
+function ContentsPageClient({ initialContent }: ContentsPageClientProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    const cleanups: Array<() => void> = [];
+    const sliders = Array.from(root.querySelectorAll(".image-slider"));
+
+    sliders.forEach((sliderElement) => {
+      const slider = sliderElement as HTMLElement;
+      const viewport = slider.querySelector(
+        ".image-slider-viewport",
+      ) as HTMLElement | null;
+      const track = slider.querySelector(
+        ".image-slider-track",
+      ) as HTMLElement | null;
+      const dotsWrap = slider.querySelector(
+        ".image-slider-dots",
+      ) as HTMLElement | null;
+      const pages = Array.from(
+        slider.querySelectorAll(".image-slider-page"),
+      ) as HTMLElement[];
+
+      if (!viewport || !track || !dotsWrap || pages.length === 0) return;
+
+      let page = 0;
+      let dragging = false;
+      let isHover = false;
+      let startX = 0;
+      let deltaX = 0;
+      let timer: number | null = null;
+
+      const autoPlayMs = Number(slider.dataset.autoplay ?? "4500");
+      const canSlide = pages.length > 1;
+
+      if (!canSlide) {
+        dotsWrap.style.display = "none";
+      } else {
+        dotsWrap.style.display = "";
+      }
+
+      const render = () => {
+        track.style.transform = `translateX(-${page * 100}%)`;
+
+        Array.from(dotsWrap.querySelectorAll("button")).forEach((dot, index) => {
+          dot.classList.toggle("is-active", index === page);
+        });
+      };
+
+      const goTo = (nextPage: number) => {
+        if (!canSlide) return;
+
+        if (nextPage < 0) page = pages.length - 1;
+        else if (nextPage >= pages.length) page = 0;
+        else page = nextPage;
+
+        render();
+      };
+
+      const stopTimer = () => {
+        if (timer !== null) {
+          window.clearInterval(timer);
+          timer = null;
+        }
+      };
+
+      const startTimer = () => {
+        stopTimer();
+        if (!canSlide || dragging || isHover) return;
+
+        timer = window.setInterval(() => {
+          page = page + 1 >= pages.length ? 0 : page + 1;
+          render();
+        }, autoPlayMs);
+      };
+
+      const dotButtons = pages.map((_, index) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "image-slider-dot";
+
+        const onClick = () => {
+          goTo(index);
+          startTimer();
+        };
+
+        button.addEventListener("click", onClick);
+        dotsWrap.appendChild(button);
+
+        cleanups.push(() => {
+          button.removeEventListener("click", onClick);
+        });
+
+        return button;
+      });
+
+      const onMouseEnter = () => {
+        isHover = true;
+        stopTimer();
+      };
+
+      const onMouseLeave = () => {
+        isHover = false;
+        startTimer();
+      };
+
+      const onPointerDown = (event: PointerEvent) => {
+        if (!canSlide) return;
+
+        dragging = true;
+        startX = event.clientX;
+        deltaX = 0;
+        viewport.setPointerCapture(event.pointerId);
+      };
+
+      const onPointerMove = (event: PointerEvent) => {
+        if (!dragging) return;
+        deltaX = event.clientX - startX;
+      };
+
+      const onPointerUp = () => {
+        if (!dragging) return;
+
+        dragging = false;
+
+        if (deltaX > 50) goTo(page - 1);
+        if (deltaX < -50) goTo(page + 1);
+
+        deltaX = 0;
+        startTimer();
+      };
+
+      viewport.addEventListener("mouseenter", onMouseEnter);
+      viewport.addEventListener("mouseleave", onMouseLeave);
+      viewport.addEventListener("pointerdown", onPointerDown);
+      viewport.addEventListener("pointermove", onPointerMove);
+      viewport.addEventListener("pointerup", onPointerUp);
+      viewport.addEventListener("pointercancel", onPointerUp);
+
+      cleanups.push(() => {
+        stopTimer();
+        viewport.removeEventListener("mouseenter", onMouseEnter);
+        viewport.removeEventListener("mouseleave", onMouseLeave);
+        viewport.removeEventListener("pointerdown", onPointerDown);
+        viewport.removeEventListener("pointermove", onPointerMove);
+        viewport.removeEventListener("pointerup", onPointerUp);
+        viewport.removeEventListener("pointercancel", onPointerUp);
+        dotButtons.forEach((button) => button.remove());
+      });
+
+      render();
+      startTimer();
+    });
+
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  }, [initialContent?.contsCn]);
+
+  return (
+    <div className="card card-border !mt-6">
+      <div
+        ref={rootRef}
+        className="contents-page text-[16px] leading-[1.5]"
+        dangerouslySetInnerHTML={{
+          __html: initialContent?.contsCn ?? "",
+        }}
+      />
+    </div>
+  );
+}
+
+export { ContentsPageClient };
diff --git a/apps/dm/components/ui/contents/index.ts b/apps/dm/components/ui/contents/index.ts
new file mode 100644
index 000000000..82a5dad4f
--- /dev/null
+++ b/apps/dm/components/ui/contents/index.ts
@@ -0,0 +1 @@
+export { ContentsPage } from "./contentsPage";
diff --git a/apps/dm/components/ui/sdmInfoInsertForm/component.tsx b/apps/dm/components/ui/sdmInfoInsertForm/component.tsx
index 62b214f04..e66807743 100644
--- a/apps/dm/components/ui/sdmInfoInsertForm/component.tsx
+++ b/apps/dm/components/ui/sdmInfoInsertForm/component.tsx
@@ -1,962 +1,962 @@
-import ModalSimilarPage from "@/app/(base-layout)/pages/sdmMng/sdmInfoInsert/modalSimilar/page";
-import { useDmStore } from "@/app/store";
-import {
-  CANDIDATE,
- // DatePicker,
-  FormField,
-  FormLabel,
-  FormUi,
-  SelectBox,
-  UiModal,
-} from "@common/business_components";
-import { Input } from "@common/components";
-import { Button, Label } from "@common/components/ui";
-import { useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
-import { AccessibleFormField } from "./AccessibleFormField";
-import {
-  type ControllerRenderProps,
-  type UseFormReturn,
-  type FieldError,
-  useWatch,
-} from "react-hook-form";
-import SearchInputText from "../common/searhDemandInput/component";
-import React from "react";
-import { formatDateToYMD, sanitizeInput } from "../common/utils/utils";
-import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
-import type { SdmInfoFormData } from "@/app/store/sdmMng";
+// import ModalSimilarPage from "@/app/(base-layout)/pages/sdmMng/sdmInfoInsert/modalSimilar/page";
+// import { useDmStore } from "@/app/store";
+// import {
+//   CANDIDATE,
+//  // DatePicker,
+//   FormField,
+//   FormLabel,
+//   FormUi,
+//   SelectBox,
+//   UiModal,
+// } from "@common/business_components";
+// import { Input } from "@common/components";
+// import { Button, Label } from "@common/components/ui";
+// import { useSearchParams } from "next/navigation";
+// import { useCallback, useEffect, useState } from "react";
+// import { AccessibleFormField } from "./AccessibleFormField";
+// import {
+//   type ControllerRenderProps,
+//   type UseFormReturn,
+//   type FieldError,
+//   useWatch,
+// } from "react-hook-form";
+// import SearchInputText from "../common/searhDemandInput/component";
+// import React from "react";
+// import { formatDateToYMD, sanitizeInput } from "../common/utils/utils";
+// import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
+// import type { SdmInfoFormData } from "@/app/store/sdmMng";
 
-export interface SdmInfoRegFormProps {
-  form: UseFormReturn<SdmInfoFormData>;
-  onCheckboxChange?: (checked: boolean) => void;
-  facilityName?: string;
-}
+// export interface SdmInfoRegFormProps {
+//   form: UseFormReturn<SdmInfoFormData>;
+//   onCheckboxChange?: (checked: boolean) => void;
+//   facilityName?: string;
+// }
 
-type FieldComponent = (
-  field: ControllerRenderProps<SdmInfoFormData, keyof SdmInfoFormData>
-) => React.ReactElement<{ disabled?: boolean }>;
+// type FieldComponent = (
+//   field: ControllerRenderProps<SdmInfoFormData, keyof SdmInfoFormData>
+// ) => React.ReactElement<{ disabled?: boolean }>;
 
-export function SdmInfoRegForm({
-  form,
-  onCheckboxChange,
-  facilityName,
-}: SdmInfoRegFormProps) {
-  const { initializeCommonData, Sdm } = useDmStore((state) => state);
-  const { useTypesData, defaultRules, disableRules } = Sdm;
-  const searchParams = useSearchParams();
+// export function SdmInfoRegForm({
+//   form,
+//   onCheckboxChange,
+//   facilityName,
+// }: SdmInfoRegFormProps) {
+//   const { initializeCommonData, Sdm } = useDmStore((state) => state);
+//   const { useTypesData, defaultRules, disableRules } = Sdm;
+//   const searchParams = useSearchParams();
 
-  const [sdmNmValue, setSdmNmValue] = useState<string>(
-    searchParams.get("dmdCoNm") || ""
-  );
+//   const [sdmNmValue, setSdmNmValue] = useState<string>(
+//     searchParams.get("dmdCoNm") || ""
+//   );
 
-  const [frontPHdata, setFrontPHdata] = useState("0");
-  const [backPHdata, setBackPHdata] = useState("0");
-  const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false);
-  const [isSimilarCase, setIsSimilarCase] = useState(false);
-  const [key, setKey] = useState(0);
-  // 후보지 팝업 오픈 상태
+//   const [frontPHdata, setFrontPHdata] = useState("0");
+//   const [backPHdata, setBackPHdata] = useState("0");
+//   const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false);
+//   const [isSimilarCase, setIsSimilarCase] = useState(false);
+//   const [key, setKey] = useState(0);
+//   // 후보지 팝업 오픈 상태
 
-  //모달 조회에 필요한 데이터
-  const [sply, setSply] = useState<number>(0);
-  const [usageCd, setUsageCd] = useState<string>("청소");
-  const [money, setMoney] = useState<number>(0);
+//   //모달 조회에 필요한 데이터
+//   const [sply, setSply] = useState<number>(0);
+//   const [usageCd, setUsageCd] = useState<string>("청소");
+//   const [money, setMoney] = useState<number>(0);
 
-  useEffect(() => {
-    initializeCommonData();
-  }, [initializeCommonData]);
+//   useEffect(() => {
+//     initializeCommonData();
+//   }, [initializeCommonData]);
 
-  useEffect(() => {
-    console.log("candidateTitle ", form.getValues("candidateTitle"));
-  }, [form.getValues]);
+//   useEffect(() => {
+//     console.log("candidateTitle ", form.getValues("candidateTitle"));
+//   }, [form.getValues]);
 
-  useEffect(() => {
-    if (useTypesData && useTypesData.length > 0) {
-      setTimeout(() => {
-        form.setValue("usePurpose", useTypesData[0]?.val?.toString() || "");
-      }, 500);
-    }
-  }, [useTypesData, form.setValue, form]);
+//   useEffect(() => {
+//     if (useTypesData && useTypesData.length > 0) {
+//       setTimeout(() => {
+//         form.setValue("usePurpose", useTypesData[0]?.val?.toString() || "");
+//       }, 500);
+//     }
+//   }, [useTypesData, form.setValue, form]);
 
-  useEffect(() => {
-    if (facilityName) {
-      setSdmNmValue(facilityName);
-      form.setValue("sdmNm", facilityName);
-      setKey((prev) => prev + 1);
-    }
-  }, [facilityName, form.setValue, form]);
+//   useEffect(() => {
+//     if (facilityName) {
+//       setSdmNmValue(facilityName);
+//       form.setValue("sdmNm", facilityName);
+//       setKey((prev) => prev + 1);
+//     }
+//   }, [facilityName, form.setValue, form]);
 
-  useEffect(() => {
-    if (searchParams.get("dmdCoNm")) {
-      form.setValue("sdmNm", searchParams.get("dmdCoNm") || "");
-      setSdmNmValue(searchParams.get("dmdCoNm") || "");
-      setKey((prev) => prev + 1);
-    }
-  }, [searchParams, form.setValue, form]);
+//   useEffect(() => {
+//     if (searchParams.get("dmdCoNm")) {
+//       form.setValue("sdmNm", searchParams.get("dmdCoNm") || "");
+//       setSdmNmValue(searchParams.get("dmdCoNm") || "");
+//       setKey((prev) => prev + 1);
+//     }
+//   }, [searchParams, form.setValue, form]);
 
-  const searchCandidate = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const dmdInfoId = JSON.parse(
-      sessionStorage.getItem("user") || "{}"
-    )?.dmdInfoId?.toString();
+//   const searchCandidate = (e: React.MouseEvent) => {
+//     e.preventDefault();
+//     e.stopPropagation();
+//     const dmdInfoId = JSON.parse(
+//       sessionStorage.getItem("user") || "{}"
+//     )?.dmdInfoId?.toString();
 
-    const url = `/map/popup?dmdInfoId=${encodeURIComponent(dmdInfoId)}`;
-    const width = window.screen.availWidth;
-    const height = window.screen.availHeight;
-    const left = 0;
-    const top = 0;
-    const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
-    window.open(url, "candidatePopup", popupOptions);
-  };
+//     const url = `/map/popup?dmdInfoId=${encodeURIComponent(dmdInfoId)}`;
+//     const width = window.screen.availWidth;
+//     const height = window.screen.availHeight;
+//     const left = 0;
+//     const top = 0;
+//     const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
+//     window.open(url, "candidatePopup", popupOptions);
+//   };
 
-  const searchSimilarCase = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsSimilarCase(true);
-  };
+//   const searchSimilarCase = (e: React.MouseEvent) => {
+//     e.preventDefault();
+//     e.stopPropagation();
+//     setIsSimilarCase(true);
+//   };
 
-  const handleCheckboxChange = (checked: boolean) => {
-    setIsBznmTotNoDisabled(checked);
-    onCheckboxChange?.(checked);
-  };
+//   const handleCheckboxChange = (checked: boolean) => {
+//     setIsBznmTotNoDisabled(checked);
+//     onCheckboxChange?.(checked);
+//   };
 
-  useEffect(() => {
-    const watchPH = form.getValues(`ph`);
-    if (watchPH && watchPH !== undefined) {
-      const [frontPH, backPH] = watchPH.split("~");
-      if (frontPH) {
-        setFrontPHdata(frontPH);
-      }
-      if (backPH) {
-        setBackPHdata(backPH);
-      }
-    } else {
-      setFrontPHdata("0");
-      setBackPHdata("0");
-    }
-  }, [form.getValues(`ph`)]);
+//   useEffect(() => {
+//     const watchPH = form.getValues(`ph`);
+//     if (watchPH && watchPH !== undefined) {
+//       const [frontPH, backPH] = watchPH.split("~");
+//       if (frontPH) {
+//         setFrontPHdata(frontPH);
+//       }
+//       if (backPH) {
+//         setBackPHdata(backPH);
+//       }
+//     } else {
+//       setFrontPHdata("0");
+//       setBackPHdata("0");
+//     }
+//   }, [form.getValues(`ph`)]);
 
-  const isSetPh = useCallback(
-    (typePHdata: string, index: number) => {
-      const PHdata = form.getValues("ph");
-      const isPH = PHdata?.split("~")[index] || "";
-      if (index == 0) {
-        form.setValue("ph", `${isPH}~${typePHdata}`);
-        setBackPHdata(typePHdata);
-      } else if (index == 1) {
-        form.setValue("ph", `${typePHdata}~${isPH}`);
-        setFrontPHdata(typePHdata);
-      }
-    },
-    [form]
-  );
+//   const isSetPh = useCallback(
+//     (typePHdata: string, index: number) => {
+//       const PHdata = form.getValues("ph");
+//       const isPH = PHdata?.split("~")[index] || "";
+//       if (index == 0) {
+//         form.setValue("ph", `${isPH}~${typePHdata}`);
+//         setBackPHdata(typePHdata);
+//       } else if (index == 1) {
+//         form.setValue("ph", `${typePHdata}~${isPH}`);
+//         setFrontPHdata(typePHdata);
+//       }
+//     },
+//     [form]
+//   );
 
-  const usePurpose = useWatch({ control: form.control, name: "usePurpose" });
+//   const usePurpose = useWatch({ control: form.control, name: "usePurpose" });
 
-  useEffect(() => {
-    if (!usePurpose) return;
+//   useEffect(() => {
+//     if (!usePurpose) return;
 
-    // Apply default values
-    const defaults = defaultRules[usePurpose];
+//     // Apply default values
+//     const defaults = defaultRules[usePurpose];
 
-    if (defaults) {
-      Object.entries(defaults).forEach(([field, value]) => {
-        form.setValue(field as keyof SdmInfoFormData, value, {
-          shouldDirty: true,
-        });
-      });
-    }
-  }, [form.getValues("usePurpose")]);
+//     if (defaults) {
+//       Object.entries(defaults).forEach(([field, value]) => {
+//         form.setValue(field as keyof SdmInfoFormData, value, {
+//           shouldDirty: true,
+//         });
+//       });
+//     }
+//   }, [form.getValues("usePurpose")]);
 
-  // 시설 선택시 이벤트
-  const selectComp = useCallback(
-    (rtnData: DemandCompType[]) => {
-      const rtnCompData = rtnData?.[0];
-      form.setValue("sdmNm", rtnCompData?.dmdCoNm || "");
-    },
-    [form]
-  );
+//   // 시설 선택시 이벤트
+//   const selectComp = useCallback(
+//     (rtnData: DemandCompType[]) => {
+//       const rtnCompData = rtnData?.[0];
+//       form.setValue("sdmNm", rtnCompData?.dmdCoNm || "");
+//     },
+//     [form]
+//   );
 
-  const formFields: Array<{
-    name: keyof SdmInfoFormData;
-    label: string;
-    component: FieldComponent | undefined;
-    formIndex: number;
-    required?: boolean;
-  }> = [
-    {
-      name: "sdmNm",
-      label: "수요처선택",
-      formIndex: 0,
-      required: true,
-      component: (field) => (
-        <div key={key}>
-          <SearchInputText
-            label="수요처명"
-            setValue={(val) => {
-              setSdmNmValue(val || "");
-              field.onChange(val || "");
-            }}
-            setRtnData={selectComp}
-            initValue={facilityName || sdmNmValue}
-            {...field}
-          />
-        </div>
-      ),
-    },
-    {
-      name: "demandYmd",
-      label: "요구시기",
-      formIndex: 0,
-      required: true,
-      component: (field) => (
-        <div className="relative w-64">
-          {/* <DatePicker
-            mode="single"
-            selected={field.value as Date}
-            onSelect={(date) => {
-              field.onChange(date as Date);
-            }}
-            className=""
-            //defaultMonth={field.value as Date}
-            field={{
-              value: field.value as Date,
-              onChange: (date: Date | undefined) => {
-                field.onChange(date as Date);
-              },
-            }}
-            showOutsideDays={true}
-            selectClass={undefined}
-          /> */}
-            {/* 네이티브 input */}
-            <Input
-              className="w-full !text-xl text-right"
-              type="date"
-              onChange= {(e) => {
-                const selectedDate = e.target.value ? new Date(e.target.value) : null;
-                field.onChange(selectedDate);
-              }}
-              value={ formatDateToYMD(field.value as Date) }
-            />
-        </div>
-      ),
-    },
-    {
-      name: "demandQnty",
-      label: "요구수량(㎥/d)",
-      formIndex: 0,
-      required: true,
-      component: (field) => (
-        <Input
-          type="text"
-          className="!text-xl text-gray-600"
-          value={field.value as string}
-          onChange={(e) => {
-            field.onChange(e);
-            setSply(Number(e.target.value));
-          }}
-          onBlur={field.onBlur}
-          name={field.name}
-          ref={field.ref}
-        />
-      ),
-    },
-    {
-      name: "usePurpose",
-      label: "사용용도",
-      formIndex: 0,
-      required: true,
-      component: (field) => (
-        <SelectBox
-          selectClass={undefined}
-          label=""
-          selectArray={useTypesData}
-          onSelectValue={(val) => {
-            field.onChange(val.toString());
-            setUsageCd(val.toString());
-          }}
-          className=""
-          value={field.value as string}
-        />
-      ),
-    },
-    {
-      name: "money",
-      label: "희망단가(원)",
-      formIndex: 0,
-      required: true,
-      component: (field) => (
-        <FormUi
-          onCheckboxChange={handleCheckboxChange}
-          isDisabled={isBznmTotNoDisabled}
-        >
-          <Input
-            type="text"
-            className="!text-xl text-gray-600"
-            value={field.value as string}
-            onChange={(e) => {
-              field.onChange(e);
-              setMoney(Number(e.target.value));
-            }}
-            onBlur={field.onBlur}
-            name={field.name}
-            ref={field.ref}
-          />
-        </FormUi>
-      ),
-    },
-    {
-      name: "reqWaterQlty",
-      label: "요구수질",
-      formIndex: 0,
-      required: true,
-      component: undefined,
-    },
+//   const formFields: Array<{
+//     name: keyof SdmInfoFormData;
+//     label: string;
+//     component: FieldComponent | undefined;
+//     formIndex: number;
+//     required?: boolean;
+//   }> = [
+//     {
+//       name: "sdmNm",
+//       label: "수요처선택",
+//       formIndex: 0,
+//       required: true,
+//       component: (field) => (
+//         <div key={key}>
+//           <SearchInputText
+//             label="수요처명"
+//             setValue={(val) => {
+//               setSdmNmValue(val || "");
+//               field.onChange(val || "");
+//             }}
+//             setRtnData={selectComp}
+//             initValue={facilityName || sdmNmValue}
+//             {...field}
+//           />
+//         </div>
+//       ),
+//     },
+//     {
+//       name: "demandYmd",
+//       label: "요구시기",
+//       formIndex: 0,
+//       required: true,
+//       component: (field) => (
+//         <div className="relative w-64">
+//           {/* <DatePicker
+//             mode="single"
+//             selected={field.value as Date}
+//             onSelect={(date) => {
+//               field.onChange(date as Date);
+//             }}
+//             className=""
+//             //defaultMonth={field.value as Date}
+//             field={{
+//               value: field.value as Date,
+//               onChange: (date: Date | undefined) => {
+//                 field.onChange(date as Date);
+//               },
+//             }}
+//             showOutsideDays={true}
+//             selectClass={undefined}
+//           /> */}
+//             {/* 네이티브 input */}
+//             <Input
+//               className="w-full !text-xl text-right"
+//               type="date"
+//               onChange= {(e) => {
+//                 const selectedDate = e.target.value ? new Date(e.target.value) : null;
+//                 field.onChange(selectedDate);
+//               }}
+//               value={ formatDateToYMD(field.value as Date) }
+//             />
+//         </div>
+//       ),
+//     },
+//     {
+//       name: "demandQnty",
+//       label: "요구수량(㎥/d)",
+//       formIndex: 0,
+//       required: true,
+//       component: (field) => (
+//         <Input
+//           type="text"
+//           className="!text-xl text-gray-600"
+//           value={field.value as string}
+//           onChange={(e) => {
+//             field.onChange(e);
+//             setSply(Number(e.target.value));
+//           }}
+//           onBlur={field.onBlur}
+//           name={field.name}
+//           ref={field.ref}
+//         />
+//       ),
+//     },
+//     {
+//       name: "usePurpose",
+//       label: "사용용도",
+//       formIndex: 0,
+//       required: true,
+//       component: (field) => (
+//         <SelectBox
+//           selectClass={undefined}
+//           label=""
+//           selectArray={useTypesData}
+//           onSelectValue={(val) => {
+//             field.onChange(val.toString());
+//             setUsageCd(val.toString());
+//           }}
+//           className=""
+//           value={field.value as string}
+//         />
+//       ),
+//     },
+//     {
+//       name: "money",
+//       label: "희망단가(원/㎥)",
+//       formIndex: 0,
+//       required: true,
+//       component: (field) => (
+//         <FormUi
+//           onCheckboxChange={handleCheckboxChange}
+//           isDisabled={isBznmTotNoDisabled}
+//         >
+//           <Input
+//             type="text"
+//             className="!text-xl text-gray-600"
+//             value={field.value as string}
+//             onChange={(e) => {
+//               field.onChange(e);
+//               setMoney(Number(e.target.value));
+//             }}
+//             onBlur={field.onBlur}
+//             name={field.name}
+//             ref={field.ref}
+//           />
+//         </FormUi>
+//       ),
+//     },
+//     {
+//       name: "reqWaterQlty",
+//       label: "요구수질",
+//       formIndex: 0,
+//       required: true,
+//       component: undefined,
+//     },
 
-    {
-      name: "candidateTitle",
-      label: CANDIDATE || "공급처 후보지 선택(필수아님)",
-      formIndex: 2,
-      component: () => (
-        <div>
-          <div className="-mt-14 float-right flex gap-10">
-            <Button
-              className="rounded-md"
-              color="sky"
-              size={"sm"}
-              onClick={searchCandidate}
-            >
-              후보지 조회
-            </Button>
-            <Button
-              className="rounded-md"
-              color="sky"
-              size={"sm"}
-              onClick={searchSimilarCase}
-            >
-              유사사례
-            </Button>
-          </div>
-          <div className="flex justify-center gap-10 mt-5">
-            {(form.getValues("candidateTitle") || []).map(
-              (candidate: any, index: number) => (
-                <Input
-                  key={index}
-                  placeholder={`후보지${index + 1}`}
-                  type="text"
-                  className="!text-xl w-[130px] text-gray-600"
-                  value={candidate.ruseUtztnFcltNm}
-                  readOnly
-                />
-              )
-            )}
-          </div>
-        </div>
-      ),
-    },
-  ];
+//     {
+//       name: "candidateTitle",
+//       label: CANDIDATE || "공급처 후보지 선택(필수아님)",
+//       formIndex: 2,
+//       component: () => (
+//         <div>
+//           <div className="-mt-14 float-right flex gap-10">
+//             <Button
+//               className="rounded-md"
+//               color="sky"
+//               size={"sm"}
+//               onClick={searchCandidate}
+//             >
+//               후보지 조회
+//             </Button>
+//             <Button
+//               className="rounded-md"
+//               color="sky"
+//               size={"sm"}
+//               onClick={searchSimilarCase}
+//             >
+//               유사사례
+//             </Button>
+//           </div>
+//           <div className="flex justify-center gap-10 mt-5">
+//             {(form.getValues("candidateTitle") || []).map(
+//               (candidate: any, index: number) => (
+//                 <Input
+//                   key={index}
+//                   placeholder={`후보지${index + 1}`}
+//                   type="text"
+//                   className="!text-xl w-[130px] text-gray-600"
+//                   value={candidate.ruseUtztnFcltNm}
+//                   readOnly
+//                 />
+//               )
+//             )}
+//           </div>
+//         </div>
+//       ),
+//     },
+//   ];
 
-  const normalFields = formFields.filter(
-    (f) => f.formIndex === 0 && f.component
-  );
+//   const normalFields = formFields.filter(
+//     (f) => f.formIndex === 0 && f.component
+//   );
 
-  const candidateFields = formFields.filter(
-    (f) => f.formIndex === 2 && f.component
-  );
+//   const candidateFields = formFields.filter(
+//     (f) => f.formIndex === 2 && f.component
+//   );
 
-  return (
-    <>
-      {normalFields.map(({ name, label, component, required }) =>
-        component ? (
-          <FormField
-            key={name}
-            control={form.control}
-            name={name}
-            render={({ field }) =>
-              name === "money" ? (
-                <div>
-                  <Label className="text-black">희망단가(원)*</Label>
-                  {component(field)}
-                </div>
-              ) : (
-                // <FormUi label={label + "*"}>{component(field)}</FormUi>
-                <AccessibleFormField
-                  field={field}
-                  label={label}
-                  required={required}
-                  error={
-                    typeof form.formState.errors[name]?.message === "string"
-                      ? (form.formState.errors[name] as FieldError)
-                      : undefined
-                  }
-                  inputComponent={component(field)}
-                />
-              )
-            }
-          />
-        ) : null
-      )}
+//   return (
+//     <>
+//       {normalFields.map(({ name, label, component, required }) =>
+//         component ? (
+//           <FormField
+//             key={name}
+//             control={form.control}
+//             name={name}
+//             render={({ field }) =>
+//               name === "money" ? (
+//                 <div>
+//                   <Label className="text-black">희망단가(원/㎥)*</Label>
+//                   {component(field)}
+//                 </div>
+//               ) : (
+//                 // <FormUi label={label + "*"}>{component(field)}</FormUi>
+//                 <AccessibleFormField
+//                   field={field}
+//                   label={label}
+//                   required={required}
+//                   error={
+//                     typeof form.formState.errors[name]?.message === "string"
+//                       ? (form.formState.errors[name] as FieldError)
+//                       : undefined
+//                   }
+//                   inputComponent={component(field)}
+//                 />
+//               )
+//             }
+//           />
+//         ) : null
+//       )}
 
-      <div className="mt-10">
-        <FormLabel className="text-xl">요구수질</FormLabel>
-        <div className="grid grid-cols-2 gap-x-10 gap-y-6 mt-3 mb-3">
-          <FormField
-            control={form.control}
-            name={`grssClfg`}
-            render={({ field }) => {
-              const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-              const isDisabled = disabledFields
-                ? disabledFields.includes(field.name)
-                : true;
-              return (
-                <FormUi
-                  label={
-                    !isDisabled ? `총대장균군수(개/mg)*` : "총대장균군수(개/mg)"
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="relative flex-1 min-w-0">
-                      <Input
-                        type="text"
-                        className="w-full pr-16 border py-2 text-right rounded-md"
-                        placeholder=""
-                        onChange={(e) => {
-                          const inputValue = e.target.value.replace(
-                            /[^0-9]/g,
-                            ""
-                          ); // 정수만
-                          field.onChange(
-                            inputValue === "" ? null : Number(inputValue)
-                          );
-                        }}
-                        value={
-                          field.value !== undefined && field.value !== null
-                            ? `${field.value}`
-                            : "불검출"
-                        }
-                        maxLength={6}
-                        disabled={isDisabled}
-                        onBlur={field.onBlur}
-                        name={field.name}
-                        ref={field.ref}
-                      />
-                      {/* TODO:  총대장균군수 확인 필요*/}
-                      {field.value !== null ? (
-                        <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-                          이하
-                        </span>
-                      ) : (
-                        <></>
-                      )}
-                    </div>
-                  </div>
-                </FormUi>
-              );
-            }}
-          />
-          <FormField
-            control={form.control}
-            name={`tn`}
-            render={({ field }) => {
-              const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-              const isDisabled = disabledFields
-                ? disabledFields.includes(field.name)
-                : true;
-              return (
-                <FormUi
-                  label={
-                    !isDisabled ? `총질소(T-N)(mg/L)*` : "총질소(T-N)(mg/L)"
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="relative flex-1 min-w-0">
-                      <Input
-                        type="text"
-                        className="w-full pr-16 border py-2 text-right rounded-md"
-                        placeholder=""
-                        onChange={(e) => {
-                          const inputValue = e.target.value.replace(
-                            /[^0-9]/g,
-                            ""
-                          ); // 정수만
-                          field.onChange(
-                            inputValue === "" ? null : Number(inputValue)
-                          );
-                        }}
-                        value={
-                          field.value !== undefined && field.value !== null
-                            ? `${field.value}`
-                            : ""
-                        }
-                        maxLength={6}
-                        disabled={isDisabled}
-                        onBlur={field.onBlur}
-                        name={field.name}
-                        ref={field.ref}
-                      />
-                      <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-                        이하
-                      </span>
-                    </div>
-                  </div>
-                </FormUi>
-              );
-            }}
-          />
-          <FormField
-            control={form.control}
-            name={`combResdch`}
-            render={({ field }) => {
-              const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-              const isDisabled = disabledFields
-                ? disabledFields.includes(field.name)
-                : true;
-              return (
-                <FormUi
-                  label={
-                    !isDisabled ? `결합잔류염소(mg/L)*` : "결합잔류염소(mg/L)"
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="relative flex-1 min-w-0">
-                      <Input
-                        type="text"
-                        className="w-full pr-16 border py-2 text-right rounded-md"
-                        placeholder=""
-                        onChange={(e) => {
-                          const cleanValue = sanitizeInput(
-                            e.target.value,
-                            true
-                          );
-                          field.onChange(
-                            cleanValue === "" ? null : Number(cleanValue)
-                          );
-                        }}
-                        value={field.value ?? ""}
-                        maxLength={6}
-                        disabled={isDisabled}
-                        onBlur={field.onBlur}
-                        name={field.name}
-                        ref={field.ref}
-                      />
-                      <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-                        이상
-                      </span>
-                    </div>
-                  </div>
-                </FormUi>
-              );
-            }}
-          />
-          <FormField
-            control={form.control}
-            name={`tph`}
-            render={({ field }) => {
-              const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-              const isDisabled = disabledFields
-                ? disabledFields.includes(field.name)
-                : true;
-              return (
-                <FormUi
-                  label={!isDisabled ? `총인(T-P)(mg/L)*` : "총인(T-P)(mg/L)"}
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="relative flex-1 min-w-0">
-                      <Input
-                        type="text"
-                        className="w-full pr-16 border py-2 text-right rounded-md"
-                        placeholder=""
-                        onChange={(e) => {
-                          const cleanValue = sanitizeInput(
-                            e.target.value,
-                            true
-                          );
-                          field.onChange(
-                            cleanValue === "" ? null : Number(cleanValue)
-                          );
-                        }}
-                        value={field.value ?? ""}
-                        maxLength={6}
-                        disabled={isDisabled}
-                        onBlur={field.onBlur}
-                        name={field.name}
-                        ref={field.ref}
-                      />
-                      <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-                        이하
-                      </span>
-                    </div>
-                  </div>
-                </FormUi>
-              );
-            }}
-          />
-          <FormField
-            control={form.control}
-            name={`trbt`}
-            render={({ field }) => {
-              const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-              const isDisabled = disabledFields
-                ? disabledFields.includes(field.name)
-                : true;
-              return (
-                <FormUi label={!isDisabled ? `탁도(NTU)*` : "탁도(NTU)"}>
-                  <div className="flex items-center gap-2">
-                    <div className="relative flex-1 min-w-0">
-                      <Input
-                        type="text"
-                        className="w-full pr-16 border py-2 text-right rounded-md"
-                        placeholder=""
-                        onChange={(e) => {
-                          const inputValue = e.target.value.replace(
-                            /[^0-9]/g,
-                            ""
-                          ); // 정수만
-                          field.onChange(
-                            inputValue === "" ? null : Number(inputValue)
-                          );
-                        }}
-                        value={
-                          field.value !== undefined && field.value !== null
-                            ? `${field.value}`
-                            : ""
-                        }
-                        maxLength={6}
-                        disabled={isDisabled}
-                        onBlur={field.onBlur}
-                        name={field.name}
-                        ref={field.ref}
-                      />
-                      <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-                        이하
-                      </span>
-                    </div>
-                  </div>
-                </FormUi>
-              );
-            }}
-          />
-          <div className="col-span-1">
-            <Label className="text-xl">수소이온농도(pH)</Label>
-            <div className="flex flex-row items-center gap-2">
-              <Input
-                className="!text-xl w-36"
-                placeholder=""
-                type="text"
-                onChange={(e) => {
-                  const cleanValue = sanitizeInput(e.target.value, true);
-                  isSetPh(cleanValue, 1);
-                }}
-                value={frontPHdata ?? ""}
-                maxLength={5}
-              />
-              <span className="text-xl mx-2">~</span>
-              <Input
-                className="!text-xl w-36 "
-                placeholder=""
-                type="text"
-                onChange={(e) => {
-                  const cleanValue = sanitizeInput(e.target.value, true);
-                  isSetPh(cleanValue, 0);
-                }}
-                value={backPHdata ?? ""}
-                maxLength={5}
-              />
-            </div>
-          </div>
-          <FormField
-            control={form.control}
-            name={`bod`}
-            render={({ field }) => {
-              const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-              const isDisabled = disabledFields
-                ? disabledFields.includes(field.name)
-                : true;
-              return (
-                <FormUi
-                  label={
-                    !isDisabled
-                      ? `생물학적 산소요구량(BOD)(mg/L)*`
-                      : "생물학적 산소요구량(BOD)(mg/L)"
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="relative flex-1 min-w-0">
-                      <Input
-                        type="text"
-                        className="w-full pr-16 border py-2 text-right rounded-md"
-                        placeholder=""
-                        onChange={(e) => {
-                          const inputValue = e.target.value.replace(
-                            /[^0-9]/g,
-                            ""
-                          ); // 정수만
-                          field.onChange(
-                            inputValue === "" ? null : Number(inputValue)
-                          );
-                        }}
-                        value={
-                          field.value !== undefined && field.value !== null
-                            ? `${field.value}`
-                            : ""
-                        }
-                        maxLength={6}
-                        disabled={isDisabled}
-                        onBlur={field.onBlur}
-                        name={field.name}
-                        ref={field.ref}
-                      />
-                      <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-                        이하
-                      </span>
-                    </div>
-                  </div>
-                </FormUi>
-              );
-            }}
-          />
-          <FormField
-            control={form.control}
-            name={`clIonQnt`}
-            render={({ field }) => {
-              const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-              const isDisabled = disabledFields
-                ? disabledFields.includes(field.name)
-                : true;
-              return (
-                <FormUi
-                  label={!isDisabled ? `염화물(mgCL/L)*` : "염화물(mgCL/L)"}
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="relative flex-1 min-w-0">
-                      <Input
-                        type="text"
-                        className="w-full pr-16 border py-2 text-right rounded-md"
-                        placeholder=""
-                        onChange={(e) => {
-                          const inputValue = e.target.value.replace(
-                            /[^0-9]/g,
-                            ""
-                          ); // 정수만
-                          field.onChange(
-                            inputValue === "" ? null : Number(inputValue)
-                          );
-                        }}
-                        value={
-                          field.value !== undefined && field.value !== null
-                            ? `${field.value}`
-                            : ""
-                        }
-                        maxLength={6}
-                        disabled={isDisabled}
-                        onBlur={field.onBlur}
-                        name={field.name}
-                        ref={field.ref}
-                      />
-                      <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-                        이하
-                      </span>
-                    </div>
-                  </div>
-                </FormUi>
-              );
-            }}
-          />
-          <FormField
-            control={form.control}
-            name={`smll`}
-            render={({ field }) => {
-              const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-              const isDisabled = disabledFields
-                ? disabledFields.includes(field.name)
-                : true;
-              return (
-                <FormUi label={!isDisabled ? `냄새*` : "냄새"}>
-                  <SelectBox
-                    className="!text-2xl rounded-md"
-                    label={""}
-                    selectClass={undefined}
-                    selectArray={[
-                      { text: "불쾌하지않을것", val: "불쾌하지않을것" },
-                      { text: "해당사항없음", val: "해당사항없음" },
-                    ]}
-                    onSelectValue={(val: string | number) => {
-                      field.onChange(val.toString());
-                    }}
-                    value={field.value}
-                    readOnly={isDisabled}
-                    onBlur={field.onBlur}
-                    ref={field.ref}
-                  />
-                </FormUi>
-              );
-            }}
-          />
-          <FormField
-            control={form.control}
-            name={`cdtnv`}
-            render={({ field }) => {
-              const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-              const isDisabled = disabledFields
-                ? disabledFields.includes(field.name)
-                : true;
-              return (
-                <FormUi
-                  label={
-                    !isDisabled ? `전기전도도(㎲/cm)*` : "전기전도도(㎲/cm)"
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="relative flex-1 min-w-0">
-                      <Input
-                        type="text"
-                        className="w-full pr-16 border py-2 text-right rounded-md"
-                        placeholder=""
-                        onChange={(e) => {
-                          const inputValue = e.target.value.replace(
-                            /[^0-9]/g,
-                            ""
-                          ); // 정수만
-                          field.onChange(
-                            inputValue === "" ? null : Number(inputValue)
-                          );
-                        }}
-                        value={
-                          field.value !== undefined && field.value !== null
-                            ? `${field.value}`
-                            : ""
-                        }
-                        maxLength={6}
-                        disabled={isDisabled}
-                        onBlur={field.onBlur}
-                        name={field.name}
-                        ref={field.ref}
-                      />
-                      <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-                        이하
-                      </span>
-                    </div>
-                  </div>
-                </FormUi>
-              );
-            }}
-          />
-          <FormField
-            control={form.control}
-            name={`crmty`}
-            render={({ field }) => {
-              const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-              const isDisabled = disabledFields
-                ? disabledFields.includes(field.name)
-                : true;
-              return (
-                <FormUi label={!isDisabled ? `색도(도)*` : "색도(도)"}>
-                  <div className="flex items-center gap-2">
-                    <div className="relative flex-1 min-w-0">
-                      <Input
-                        type="text"
-                        className="w-full pr-16 border py-2 text-right rounded-md"
-                        placeholder=""
-                        onChange={(e) => {
-                          const inputValue = e.target.value.replace(
-                            /[^0-9]/g,
-                            ""
-                          ); // 정수만
-                          field.onChange(
-                            inputValue === "" ? null : Number(inputValue)
-                          );
-                        }}
-                        value={
-                          field.value !== undefined && field.value !== null
-                            ? `${field.value}`
-                            : ""
-                        }
-                        maxLength={6}
-                        disabled={isDisabled}
-                        onBlur={field.onBlur}
-                        name={field.name}
-                        ref={field.ref}
-                      />
-                      <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-                        이하
-                      </span>
-                    </div>
-                  </div>
-                </FormUi>
-              );
-            }}
-          />
-          <FormField
-            control={form.control}
-            name={`rmrk`}
-            render={({ field }) => {
-              return (
-                <FormUi label={"비고"}>
-                  <div className="flex items-center gap-2">
-                    <div className="relative flex-1 min-w-0">
-                      <Input
-                        type="text"
-                        className="w-full pr-16 border py-2  rounded-md"
-                        placeholder=""
-                        onChange={(e) => {
-                          field.onChange(e.target.value);
-                        }}
-                        value={
-                          field.value !== undefined && field.value !== ""
-                            ? `${field.value}`
-                            : ""
-                        }
-                        onBlur={field.onBlur}
-                        name={field.name}
-                        ref={field.ref}
-                      />
-                    </div>
-                  </div>
-                </FormUi>
-              );
-            }}
-          />
-        </div>
-      </div>
+//       <div className="mt-10">
+//         <FormLabel className="text-xl">요구수질</FormLabel>
+//         <div className="grid grid-cols-2 gap-x-10 gap-y-6 mt-3 mb-3">
+//           <FormField
+//             control={form.control}
+//             name={`grssClfg`}
+//             render={({ field }) => {
+//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
+//               const isDisabled = disabledFields
+//                 ? disabledFields.includes(field.name)
+//                 : true;
+//               return (
+//                 <FormUi
+//                   label={
+//                     !isDisabled ? `총대장균군수(개/100㎖)*` : "총대장균군수(개/100㎖)"
+//                   }
+//                 >
+//                   <div className="flex items-center gap-2">
+//                     <div className="relative flex-1 min-w-0">
+//                       <Input
+//                         type="text"
+//                         className="w-full pr-16 border py-2 text-right rounded-md"
+//                         placeholder=""
+//                         onChange={(e) => {
+//                           const inputValue = e.target.value.replace(
+//                             /[^0-9]/g,
+//                             ""
+//                           ); // 정수만
+//                           field.onChange(
+//                             inputValue === "" ? null : Number(inputValue)
+//                           );
+//                         }}
+//                         value={
+//                           field.value !== undefined && field.value !== null
+//                             ? `${field.value}`
+//                             : "불검출"
+//                         }
+//                         maxLength={6}
+//                         disabled={isDisabled}
+//                         onBlur={field.onBlur}
+//                         name={field.name}
+//                         ref={field.ref}
+//                       />
+//                       {/* TODO:  총대장균군수 확인 필요*/}
+//                       {field.value !== null ? (
+//                         <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+//                           이하
+//                         </span>
+//                       ) : (
+//                         <></>
+//                       )}
+//                     </div>
+//                   </div>
+//                 </FormUi>
+//               );
+//             }}
+//           />
+//           <FormField
+//             control={form.control}
+//             name={`tn`}
+//             render={({ field }) => {
+//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
+//               const isDisabled = disabledFields
+//                 ? disabledFields.includes(field.name)
+//                 : true;
+//               return (
+//                 <FormUi
+//                   label={
+//                     !isDisabled ? `총질소(T-N)(mg/L)*` : "총질소(T-N)(mg/L)"
+//                   }
+//                 >
+//                   <div className="flex items-center gap-2">
+//                     <div className="relative flex-1 min-w-0">
+//                       <Input
+//                         type="text"
+//                         className="w-full pr-16 border py-2 text-right rounded-md"
+//                         placeholder=""
+//                         onChange={(e) => {
+//                           const inputValue = e.target.value.replace(
+//                             /[^0-9]/g,
+//                             ""
+//                           ); // 정수만
+//                           field.onChange(
+//                             inputValue === "" ? null : Number(inputValue)
+//                           );
+//                         }}
+//                         value={
+//                           field.value !== undefined && field.value !== null
+//                             ? `${field.value}`
+//                             : ""
+//                         }
+//                         maxLength={6}
+//                         disabled={isDisabled}
+//                         onBlur={field.onBlur}
+//                         name={field.name}
+//                         ref={field.ref}
+//                       />
+//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+//                         이하
+//                       </span>
+//                     </div>
+//                   </div>
+//                 </FormUi>
+//               );
+//             }}
+//           />
+//           <FormField
+//             control={form.control}
+//             name={`combResdch`}
+//             render={({ field }) => {
+//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
+//               const isDisabled = disabledFields
+//                 ? disabledFields.includes(field.name)
+//                 : true;
+//               return (
+//                 <FormUi
+//                   label={
+//                     !isDisabled ? `결합잔류염소(mg/L)*` : "결합잔류염소(mg/L)"
+//                   }
+//                 >
+//                   <div className="flex items-center gap-2">
+//                     <div className="relative flex-1 min-w-0">
+//                       <Input
+//                         type="text"
+//                         className="w-full pr-16 border py-2 text-right rounded-md"
+//                         placeholder=""
+//                         onChange={(e) => {
+//                           const cleanValue = sanitizeInput(
+//                             e.target.value,
+//                             true
+//                           );
+//                           field.onChange(
+//                             cleanValue === "" ? null : Number(cleanValue)
+//                           );
+//                         }}
+//                         value={field.value ?? ""}
+//                         maxLength={6}
+//                         disabled={isDisabled}
+//                         onBlur={field.onBlur}
+//                         name={field.name}
+//                         ref={field.ref}
+//                       />
+//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+//                         이상
+//                       </span>
+//                     </div>
+//                   </div>
+//                 </FormUi>
+//               );
+//             }}
+//           />
+//           <FormField
+//             control={form.control}
+//             name={`tph`}
+//             render={({ field }) => {
+//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
+//               const isDisabled = disabledFields
+//                 ? disabledFields.includes(field.name)
+//                 : true;
+//               return (
+//                 <FormUi
+//                   label={!isDisabled ? `총인(T-P)(mg/L)*` : "총인(T-P)(mg/L)"}
+//                 >
+//                   <div className="flex items-center gap-2">
+//                     <div className="relative flex-1 min-w-0">
+//                       <Input
+//                         type="text"
+//                         className="w-full pr-16 border py-2 text-right rounded-md"
+//                         placeholder=""
+//                         onChange={(e) => {
+//                           const cleanValue = sanitizeInput(
+//                             e.target.value,
+//                             true
+//                           );
+//                           field.onChange(
+//                             cleanValue === "" ? null : Number(cleanValue)
+//                           );
+//                         }}
+//                         value={field.value ?? ""}
+//                         maxLength={6}
+//                         disabled={isDisabled}
+//                         onBlur={field.onBlur}
+//                         name={field.name}
+//                         ref={field.ref}
+//                       />
+//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+//                         이하
+//                       </span>
+//                     </div>
+//                   </div>
+//                 </FormUi>
+//               );
+//             }}
+//           />
+//           <FormField
+//             control={form.control}
+//             name={`trbt`}
+//             render={({ field }) => {
+//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
+//               const isDisabled = disabledFields
+//                 ? disabledFields.includes(field.name)
+//                 : true;
+//               return (
+//                 <FormUi label={!isDisabled ? `탁도(NTU)*` : "탁도(NTU)"}>
+//                   <div className="flex items-center gap-2">
+//                     <div className="relative flex-1 min-w-0">
+//                       <Input
+//                         type="text"
+//                         className="w-full pr-16 border py-2 text-right rounded-md"
+//                         placeholder=""
+//                         onChange={(e) => {
+//                           const inputValue = e.target.value.replace(
+//                             /[^0-9]/g,
+//                             ""
+//                           ); // 정수만
+//                           field.onChange(
+//                             inputValue === "" ? null : Number(inputValue)
+//                           );
+//                         }}
+//                         value={
+//                           field.value !== undefined && field.value !== null
+//                             ? `${field.value}`
+//                             : ""
+//                         }
+//                         maxLength={6}
+//                         disabled={isDisabled}
+//                         onBlur={field.onBlur}
+//                         name={field.name}
+//                         ref={field.ref}
+//                       />
+//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+//                         이하
+//                       </span>
+//                     </div>
+//                   </div>
+//                 </FormUi>
+//               );
+//             }}
+//           />
+//           <div className="col-span-1">
+//             <Label className="text-xl">수소이온농도(pH)</Label>
+//             <div className="flex flex-row items-center gap-2">
+//               <Input
+//                 className="!text-xl w-36"
+//                 placeholder=""
+//                 type="text"
+//                 onChange={(e) => {
+//                   const cleanValue = sanitizeInput(e.target.value, true);
+//                   isSetPh(cleanValue, 1);
+//                 }}
+//                 value={frontPHdata ?? ""}
+//                 maxLength={5}
+//               />
+//               <span className="text-xl mx-2">~</span>
+//               <Input
+//                 className="!text-xl w-36 "
+//                 placeholder=""
+//                 type="text"
+//                 onChange={(e) => {
+//                   const cleanValue = sanitizeInput(e.target.value, true);
+//                   isSetPh(cleanValue, 0);
+//                 }}
+//                 value={backPHdata ?? ""}
+//                 maxLength={5}
+//               />
+//             </div>
+//           </div>
+//           <FormField
+//             control={form.control}
+//             name={`bod`}
+//             render={({ field }) => {
+//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
+//               const isDisabled = disabledFields
+//                 ? disabledFields.includes(field.name)
+//                 : true;
+//               return (
+//                 <FormUi
+//                   label={
+//                     !isDisabled
+//                       ? `생물학적 산소요구량(BOD)(mg/L)*`
+//                       : "생물학적 산소요구량(BOD)(mg/L)"
+//                   }
+//                 >
+//                   <div className="flex items-center gap-2">
+//                     <div className="relative flex-1 min-w-0">
+//                       <Input
+//                         type="text"
+//                         className="w-full pr-16 border py-2 text-right rounded-md"
+//                         placeholder=""
+//                         onChange={(e) => {
+//                           const inputValue = e.target.value.replace(
+//                             /[^0-9]/g,
+//                             ""
+//                           ); // 정수만
+//                           field.onChange(
+//                             inputValue === "" ? null : Number(inputValue)
+//                           );
+//                         }}
+//                         value={
+//                           field.value !== undefined && field.value !== null
+//                             ? `${field.value}`
+//                             : ""
+//                         }
+//                         maxLength={6}
+//                         disabled={isDisabled}
+//                         onBlur={field.onBlur}
+//                         name={field.name}
+//                         ref={field.ref}
+//                       />
+//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+//                         이하
+//                       </span>
+//                     </div>
+//                   </div>
+//                 </FormUi>
+//               );
+//             }}
+//           />
+//           <FormField
+//             control={form.control}
+//             name={`clIonQnt`}
+//             render={({ field }) => {
+//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
+//               const isDisabled = disabledFields
+//                 ? disabledFields.includes(field.name)
+//                 : true;
+//               return (
+//                 <FormUi
+//                   label={!isDisabled ? `염화물(mgCL/L)*` : "염화물(mgCL/L)"}
+//                 >
+//                   <div className="flex items-center gap-2">
+//                     <div className="relative flex-1 min-w-0">
+//                       <Input
+//                         type="text"
+//                         className="w-full pr-16 border py-2 text-right rounded-md"
+//                         placeholder=""
+//                         onChange={(e) => {
+//                           const inputValue = e.target.value.replace(
+//                             /[^0-9]/g,
+//                             ""
+//                           ); // 정수만
+//                           field.onChange(
+//                             inputValue === "" ? null : Number(inputValue)
+//                           );
+//                         }}
+//                         value={
+//                           field.value !== undefined && field.value !== null
+//                             ? `${field.value}`
+//                             : ""
+//                         }
+//                         maxLength={6}
+//                         disabled={isDisabled}
+//                         onBlur={field.onBlur}
+//                         name={field.name}
+//                         ref={field.ref}
+//                       />
+//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+//                         이하
+//                       </span>
+//                     </div>
+//                   </div>
+//                 </FormUi>
+//               );
+//             }}
+//           />
+//           <FormField
+//             control={form.control}
+//             name={`smll`}
+//             render={({ field }) => {
+//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
+//               const isDisabled = disabledFields
+//                 ? disabledFields.includes(field.name)
+//                 : true;
+//               return (
+//                 <FormUi label={!isDisabled ? `냄새*` : "냄새"}>
+//                   <SelectBox
+//                     className="!text-2xl rounded-md"
+//                     label={""}
+//                     selectClass={undefined}
+//                     selectArray={[
+//                       { text: "불쾌하지않을것", val: "불쾌하지않을것" },
+//                       { text: "해당사항없음", val: "해당사항없음" },
+//                     ]}
+//                     onSelectValue={(val: string | number) => {
+//                       field.onChange(val.toString());
+//                     }}
+//                     value={field.value}
+//                     readOnly={isDisabled}
+//                     onBlur={field.onBlur}
+//                     ref={field.ref}
+//                   />
+//                 </FormUi>
+//               );
+//             }}
+//           />
+//           <FormField
+//             control={form.control}
+//             name={`cdtnv`}
+//             render={({ field }) => {
+//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
+//               const isDisabled = disabledFields
+//                 ? disabledFields.includes(field.name)
+//                 : true;
+//               return (
+//                 <FormUi
+//                   label={
+//                     !isDisabled ? `전기전도도(㎲/cm)*` : "전기전도도(㎲/cm)"
+//                   }
+//                 >
+//                   <div className="flex items-center gap-2">
+//                     <div className="relative flex-1 min-w-0">
+//                       <Input
+//                         type="text"
+//                         className="w-full pr-16 border py-2 text-right rounded-md"
+//                         placeholder=""
+//                         onChange={(e) => {
+//                           const inputValue = e.target.value.replace(
+//                             /[^0-9]/g,
+//                             ""
+//                           ); // 정수만
+//                           field.onChange(
+//                             inputValue === "" ? null : Number(inputValue)
+//                           );
+//                         }}
+//                         value={
+//                           field.value !== undefined && field.value !== null
+//                             ? `${field.value}`
+//                             : ""
+//                         }
+//                         maxLength={6}
+//                         disabled={isDisabled}
+//                         onBlur={field.onBlur}
+//                         name={field.name}
+//                         ref={field.ref}
+//                       />
+//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+//                         이하
+//                       </span>
+//                     </div>
+//                   </div>
+//                 </FormUi>
+//               );
+//             }}
+//           />
+//           <FormField
+//             control={form.control}
+//             name={`crmty`}
+//             render={({ field }) => {
+//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
+//               const isDisabled = disabledFields
+//                 ? disabledFields.includes(field.name)
+//                 : true;
+//               return (
+//                 <FormUi label={!isDisabled ? `색도(도)*` : "색도(도)"}>
+//                   <div className="flex items-center gap-2">
+//                     <div className="relative flex-1 min-w-0">
+//                       <Input
+//                         type="text"
+//                         className="w-full pr-16 border py-2 text-right rounded-md"
+//                         placeholder=""
+//                         onChange={(e) => {
+//                           const inputValue = e.target.value.replace(
+//                             /[^0-9]/g,
+//                             ""
+//                           ); // 정수만
+//                           field.onChange(
+//                             inputValue === "" ? null : Number(inputValue)
+//                           );
+//                         }}
+//                         value={
+//                           field.value !== undefined && field.value !== null
+//                             ? `${field.value}`
+//                             : ""
+//                         }
+//                         maxLength={6}
+//                         disabled={isDisabled}
+//                         onBlur={field.onBlur}
+//                         name={field.name}
+//                         ref={field.ref}
+//                       />
+//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+//                         이하
+//                       </span>
+//                     </div>
+//                   </div>
+//                 </FormUi>
+//               );
+//             }}
+//           />
+//           <FormField
+//             control={form.control}
+//             name={`rmrk`}
+//             render={({ field }) => {
+//               return (
+//                 <FormUi label={"비고"}>
+//                   <div className="flex items-center gap-2">
+//                     <div className="relative flex-1 min-w-0">
+//                       <Input
+//                         type="text"
+//                         className="w-full pr-16 border py-2  rounded-md"
+//                         placeholder=""
+//                         onChange={(e) => {
+//                           field.onChange(e.target.value);
+//                         }}
+//                         value={
+//                           field.value !== undefined && field.value !== ""
+//                             ? `${field.value}`
+//                             : ""
+//                         }
+//                         onBlur={field.onBlur}
+//                         name={field.name}
+//                         ref={field.ref}
+//                       />
+//                     </div>
+//                   </div>
+//                 </FormUi>
+//               );
+//             }}
+//           />
+//         </div>
+//       </div>
 
-      {candidateFields.map(({ name, label, component, required }, index) =>
-        component ? (
-          <FormField
-            key={name + index}
-            control={form.control}
-            name={name}
-            render={({ field }) => (
-              // <FormUi label={label}>
-              //   {component(field)}
-              // </FormUi>
-              <AccessibleFormField
-                field={field}
-                label={label}
-                required={required}
-                error={
-                  typeof form.formState.errors[name]?.message === "string"
-                    ? (form.formState.errors[name] as FieldError)
-                    : undefined
-                }
-                inputComponent={component?.(field)}
-              />
-            )}
-          />
-        ) : null
-      )}
+//       {candidateFields.map(({ name, label, component, required }, index) =>
+//         component ? (
+//           <FormField
+//             key={name + index}
+//             control={form.control}
+//             name={name}
+//             render={({ field }) => (
+//               // <FormUi label={label}>
+//               //   {component(field)}
+//               // </FormUi>
+//               <AccessibleFormField
+//                 field={field}
+//                 label={label}
+//                 required={required}
+//                 error={
+//                   typeof form.formState.errors[name]?.message === "string"
+//                     ? (form.formState.errors[name] as FieldError)
+//                     : undefined
+//                 }
+//                 inputComponent={component?.(field)}
+//               />
+//             )}
+//           />
+//         ) : null
+//       )}
 
-      {isSimilarCase && (
-        <UiModal
-          body={
-            <ModalSimilarPage sply={sply} usageCd={usageCd} money={money} />
-          }
-          bodyClass="sm:max-w-[100vw] w-[1400px] h-[100dvh] max-h-[900px] overflow-y-auto overflow-x-hidden"
-          open={isSimilarCase}
-          onOpenChange={(open) => !open && setIsSimilarCase(false)}
-          noHeaderYn="Y"
-          noFooterYn="Y"
-        />
-      )}
-    </>
-  );
-}
+//       {isSimilarCase && (
+//         <UiModal
+//           body={
+//             <ModalSimilarPage sply={sply} usageCd={usageCd} money={money} />
+//           }
+//           bodyClass="sm:max-w-[100vw] w-[1400px] h-[100dvh] max-h-[900px] overflow-y-auto overflow-x-hidden"
+//           open={isSimilarCase}
+//           onOpenChange={(open) => !open && setIsSimilarCase(false)}
+//           noHeaderYn="Y"
+//           noFooterYn="Y"
+//         />
+//       )}
+//     </>
+//   );
+// }
diff --git a/apps/dm/eslint.config.mjs b/apps/dm/eslint.config.mjs
index f477f55e1..7de132089 100644
--- a/apps/dm/eslint.config.mjs
+++ b/apps/dm/eslint.config.mjs
@@ -12,9 +12,19 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    files: ["**/*.{ts,tsx,mts,cts}"],
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ["./tsconfig.json"],
+      },
+    },
+  },
   {rules:{
     // other rules..
     "@typescript-eslint/no-explicit-any": "off",
+    // "@next/next/no-img-element": "off",
     ...(isProd ? { "react-hooks/exhaustive-deps": "off" } : {}),
   }},
 ];
diff --git a/apps/dm/middleware.ts b/apps/dm/middleware.ts
index 44d4cb390..c2a228931 100644
--- a/apps/dm/middleware.ts
+++ b/apps/dm/middleware.ts
@@ -8,6 +8,7 @@ const serverApiUrl = process.env.NEXT_PUBLIC_CS_SERVER_API_URL;
 const GEOSERVER_URL = process.env.NEXT_PUBLIC_GEOSERVER_URL || "";
 const LX_GEOSERVER_URL = process.env.NEXT_PUBLIC_LX_GEOSERVER_URL || "";
 const GATEWAY_URL = process.env.NEXT_PUBLIC_GATEWAY_URL || "";
+// const SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || "";
 const BUSINESS_JUSO_API_URL = process.env.NEXT_PUBLIC_FINDADRESS_URL || "";
 const AdressKey = process.env.NEXT_PRIVATE_WR_ADDRESS_KEY || "";
 
@@ -28,15 +29,6 @@ export function middleware(req: NextRequest) {
   console.log(`[Middleware] Request URL: ${req.url}`);
   const searchParams = req.nextUrl.searchParams;
 
-  // if (pathname.startsWith("/server")) {
-  //   const queryParams = searchParams.toString();
-  //   const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
-  //     queryParams ? `?${queryParams}` : ""
-  //   }`;
-  //   console.log(`[Middleware] Rewriting from '/server' path to: ${newUrl}`);
-  //   return NextResponse.rewrite(new URL(newUrl));
-  // }
-
   if (pathname.startsWith("/server")) {
     const decodedParams = Array.from(searchParams.entries())
       .map(([key, value]) => `${key}=${decodeURIComponent(value)}`)
@@ -49,7 +41,7 @@ export function middleware(req: NextRequest) {
 
   if (pathname === "/") {
     console.log(" maim 화면이동 ");
-    return NextResponse.redirect(new URL("/pages/wrStatus", req.url));
+    return NextResponse.redirect(new URL("/main", req.url));
   }
 
   if (pathname.startsWith("/attach-service")) {
@@ -68,7 +60,7 @@ export function middleware(req: NextRequest) {
 
   if (pathname.startsWith("/user-service")
     || pathname.startsWith("/cms-service")) {
-    let queryParams = searchParams.toString();
+    const queryParams = searchParams.toString();
     const requestHeaders = new Headers(req.headers);
     const newUrl = `${serverApiUrl}${pathname}${queryParams ? `?${queryParams}` : ""}`;
 
@@ -81,6 +73,8 @@ export function middleware(req: NextRequest) {
   if (pathname.startsWith("/geoserver")) {
     let queryParams = searchParams.toString();
     const typename = searchParams.get("TYPENAME");
+    const startYmd = searchParams.get("START_YMD") ?? null;
+    const endYmd = searchParams.get("END_YMD") ?? null;
     console.log("typename  ", typename);
 
     let newUrl = `${GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`;
@@ -111,8 +105,10 @@ export function middleware(req: NextRequest) {
     ) {
       const url = req.nextUrl.clone();
       url.searchParams.set("TYPENAME", typename.replace("hasudo:", ""));
+      if (startYmd) url.searchParams.set("startYmd", startYmd);
+      if (endYmd) url.searchParams.set("endYmd", endYmd);
       queryParams = url.searchParams.toString();
-      newUrl = `${GATEWAY_URL}/api/v1/map/geometry${queryParams ? `?${queryParams}` : ""}`;
+      newUrl = `${GATEWAY_URL}/sewerage-service/api/v1/map/geometry${queryParams ? `?${queryParams}` : ""}`;
     }
 
     console.log(`[Middleware] Rewriting from '/geoserver' path to: ${newUrl}`);
diff --git a/apps/dm/next-env.d.ts b/apps/dm/next-env.d.ts
index 1b3be0840..830fb594c 100644
--- a/apps/dm/next-env.d.ts
+++ b/apps/dm/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/dm/next.config.ts b/apps/dm/next.config.ts
index 5e1533ec9..bbe67b0ce 100644
--- a/apps/dm/next.config.ts
+++ b/apps/dm/next.config.ts
@@ -1,4 +1,5 @@
 import type { NextConfig } from "next";
+// import path from "path";
 
 const subDomain =
   process.env.NEXT_PUBLIC_PROXY_HOST || "http://localhost:3000";
@@ -8,6 +9,17 @@ const nextConfig: NextConfig = {
   experimental: {
     proxyTimeout: 600000,
   },
+
+  // // 🔥 반드시 필요
+  // webpack(config) {
+  //   config.resolve.alias = {
+  //     ...(config.resolve.alias || {}),
+  //     // monorepo 구조 기준
+  //     "@common": path.resolve(__dirname, "../../packages/common"),
+  //   };
+  //   return config;
+  // },
+
   async rewrites() {
     return {
       beforeFiles: [
@@ -36,6 +48,10 @@ const nextConfig: NextConfig = {
           source: "/operation-service/:path*",
           destination: `${subDomain}/operation-service/:path*`,
         },
+        {
+          source: "/cms-service/:path*",
+          destination: `${subDomain}/cms-service/:path*`,
+        },
       ],
       fallback: [],
     };
diff --git a/apps/dm/package.json b/apps/dm/package.json
index 71d504f50..47e12bf51 100644
--- a/apps/dm/package.json
+++ b/apps/dm/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3005",
+    "dev": "next dev -p 3015",
     "build": "next build",
-    "start:dm": "next start -p 3005",
+    "start:dm": "next start -p 3015",
     "lint": "next lint"
   },
   "dependencies": {
@@ -18,7 +18,7 @@
     "js-cookie": "^3.0.5",
     "js-sha512": "^0.9.0",
     "lucide-react": "^0.474.0",
-    "next": "15.3.8",
+    "next": "15.5.18",
     "react-hook-form": "^7.54.2",
     "react-hot-toast": "^2.5.2",
     "tailwind-merge": "^3.0.1",
@@ -29,7 +29,7 @@
     "@eslint/eslintrc": "^3",
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
-    "eslint-config-next": "15.1.7",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
diff --git a/apps/dm/public/data/wrStatusData.json b/apps/dm/public/data/wrStatusData.json
deleted file mode 100644
index 334b521c1..000000000
--- a/apps/dm/public/data/wrStatusData.json
+++ /dev/null
@@ -1,20 +0,0 @@
-[
-    { "region": "전국", "sewage": "717(1,137,538)", "rainwater": "3544(13,945)", "reclaimed": "1018(222,476)", "thermal": "123(492)" },
-    { "region": "서울특별시", "sewage": "4(114,908)", "rainwater": "816(430)", "reclaimed": "371(341)", "thermal": "0" },
-    { "region": "부산광역시", "sewage": "13(146,197)", "rainwater": "68(335)", "reclaimed": "20(512)", "thermal": "1(18)" },
-    { "region": "대구광역시", "sewage": "9(102,380)", "rainwater": "294(133)", "reclaimed": "14(44)", "thermal": "2(12)" },
-    { "region": "인천광역시", "sewage": "17(57,691)", "rainwater": "165(642)", "reclaimed": "35(7,859)", "thermal": "15(32)" },
-    { "region": "광주광역시", "sewage": "3(28,738)", "rainwater": "74(23)", "reclaimed": "15(450)", "thermal": "15(6)" },
-    { "region": "대전광역시", "sewage": "2(11,966)", "rainwater": "52(2)", "reclaimed": "11(492)", "thermal": "20(100)" },
-    { "region": "울산광역시", "sewage": "8(36,076)", "rainwater": "111(39)", "reclaimed": "19(28,904)", "thermal": "30(130)" },
-    { "region": "세종특별자치시", "sewage": "9(2,555)", "rainwater": "65(16)", "reclaimed": "0(0)", "thermal": "0" },
-    { "region": "경기도", "sewage": "176(313,298)", "rainwater": "1009(4,735)", "reclaimed": "252(77,096)", "thermal": "40(143)" },
-    { "region": "강원특별자치도", "sewage": "69(19,677)", "rainwater": "69(4)", "reclaimed": "22(447)", "thermal": "0" },
-    { "region": "충청북도", "sewage": "38(15,607)", "rainwater": "17(91)", "reclaimed": "91(2,211)", "thermal": "0" },
-    { "region": "충청남도", "sewage": "67(41,368)", "rainwater": "54(77)", "reclaimed": "188(50,434)", "thermal": "0" },
-    { "region": "전라북도", "sewage": "55(42,671)", "rainwater": "33(199)", "reclaimed": "220(9,453)", "thermal": "0" },
-    { "region": "전라남도", "sewage": "83(23,560)", "rainwater": "16(885)", "reclaimed": "75(15,412)", "thermal": "0" },
-    { "region": "경상북도", "sewage": "81(129,081)", "rainwater": "37(341)", "reclaimed": "70(27,818)", "thermal": "0" },
-    { "region": "경상남도", "sewage": "75(50,101)", "rainwater": "27(244)", "reclaimed": "140(343)", "thermal": "0" },
-    { "region": "제주특별자치도", "sewage": "8(1,666)", "rainwater": "47(5,746)", "reclaimed": "64(660)", "thermal": "0" }
-  ]
\ No newline at end of file
diff --git a/apps/dm/public/file.svg b/apps/dm/public/file.svg
deleted file mode 100644
index 004145cdd..000000000
--- a/apps/dm/public/file.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/apps/dm/public/fonts/NotoSansKR-Black.otf b/apps/dm/public/fonts/NotoSansKR-Black.otf
deleted file mode 100644
index 2b54d195e..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Black.otf and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Black.woff b/apps/dm/public/fonts/NotoSansKR-Black.woff
deleted file mode 100644
index 90ef00381..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Black.woff and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Black.woff2 b/apps/dm/public/fonts/NotoSansKR-Black.woff2
deleted file mode 100644
index 8953c8fa7..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Black.woff2 and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Bold.otf b/apps/dm/public/fonts/NotoSansKR-Bold.otf
deleted file mode 100644
index 2b78dd845..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Bold.otf and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Bold.woff b/apps/dm/public/fonts/NotoSansKR-Bold.woff
deleted file mode 100644
index 74b20d49c..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Bold.woff and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Bold.woff2 b/apps/dm/public/fonts/NotoSansKR-Bold.woff2
deleted file mode 100644
index 216f94dad..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Bold.woff2 and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Light.otf b/apps/dm/public/fonts/NotoSansKR-Light.otf
deleted file mode 100644
index ecab31abc..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Light.otf and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Light.woff b/apps/dm/public/fonts/NotoSansKR-Light.woff
deleted file mode 100644
index 40aabd2a4..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Light.woff and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Light.woff2 b/apps/dm/public/fonts/NotoSansKR-Light.woff2
deleted file mode 100644
index 6b7cd1307..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Light.woff2 and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Medium.otf b/apps/dm/public/fonts/NotoSansKR-Medium.otf
deleted file mode 100644
index 371959d51..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Medium.otf and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Medium.woff b/apps/dm/public/fonts/NotoSansKR-Medium.woff
deleted file mode 100644
index e15aae09e..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Medium.woff and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Medium.woff2 b/apps/dm/public/fonts/NotoSansKR-Medium.woff2
deleted file mode 100644
index b97668034..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Medium.woff2 and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Regular.otf b/apps/dm/public/fonts/NotoSansKR-Regular.otf
deleted file mode 100644
index 7ba76b49c..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Regular.otf and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Regular.woff b/apps/dm/public/fonts/NotoSansKR-Regular.woff
deleted file mode 100644
index 40fab257c..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Regular.woff and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Thin.otf b/apps/dm/public/fonts/NotoSansKR-Thin.otf
deleted file mode 100644
index 06c566278..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Thin.otf and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Thin.woff b/apps/dm/public/fonts/NotoSansKR-Thin.woff
deleted file mode 100644
index 40723731f..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Thin.woff and /dev/null differ
diff --git a/apps/dm/public/fonts/NotoSansKR-Thin.woff2 b/apps/dm/public/fonts/NotoSansKR-Thin.woff2
deleted file mode 100644
index 7835c23ed..000000000
Binary files a/apps/dm/public/fonts/NotoSansKR-Thin.woff2 and /dev/null differ
diff --git a/apps/dm/public/globe.svg b/apps/dm/public/globe.svg
deleted file mode 100644
index 567f17b0d..000000000
--- a/apps/dm/public/globe.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/apps/dm/public/images/help.png b/apps/dm/public/images/help.png
deleted file mode 100644
index e872802e4..000000000
Binary files a/apps/dm/public/images/help.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/australia_01.png b/apps/dm/public/images/landing/australia_01.png
similarity index 100%
rename from apps/dm_new/public/images/landing/australia_01.png
rename to apps/dm/public/images/landing/australia_01.png
diff --git a/apps/dm/public/images/landing/business/globalCase/australia_01.png b/apps/dm/public/images/landing/business/globalCase/australia_01.png
new file mode 100644
index 000000000..17de914fd
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/australia_01.png differ
diff --git a/apps/dm/public/images/landing/business/globalCase/australia_02.png b/apps/dm/public/images/landing/business/globalCase/australia_02.png
new file mode 100644
index 000000000..adb5f333c
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/australia_02.png differ
diff --git a/apps/dm/public/images/landing/business/globalCase/australia_03.png b/apps/dm/public/images/landing/business/globalCase/australia_03.png
new file mode 100644
index 000000000..7b035d50c
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/australia_03.png differ
diff --git a/apps/dm/public/images/landing/business/globalCase/eu_01.png b/apps/dm/public/images/landing/business/globalCase/eu_01.png
new file mode 100644
index 000000000..ead859255
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/eu_01.png differ
diff --git a/apps/dm/public/images/landing/business/globalCase/eu_02.png b/apps/dm/public/images/landing/business/globalCase/eu_02.png
new file mode 100644
index 000000000..a7b8fad46
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/eu_02.png differ
diff --git a/apps/dm/public/images/landing/business/globalCase/flag_kr.png b/apps/dm/public/images/landing/business/globalCase/flag_kr.png
new file mode 100644
index 000000000..b7e96d378
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/flag_kr.png differ
diff --git a/apps/dm/public/images/landing/business/globalCase/flag_tw.png b/apps/dm/public/images/landing/business/globalCase/flag_tw.png
new file mode 100644
index 000000000..cb1af3cfb
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/flag_tw.png differ
diff --git a/apps/dm/public/images/landing/business/globalCase/icon_bullet_water.png b/apps/dm/public/images/landing/business/globalCase/icon_bullet_water.png
new file mode 100644
index 000000000..7012fb592
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/icon_bullet_water.png differ
diff --git a/apps/dm_new/public/images/landing/business/globalCase/overview_01.png b/apps/dm/public/images/landing/business/globalCase/overview_01.png
similarity index 100%
rename from apps/dm_new/public/images/landing/business/globalCase/overview_01.png
rename to apps/dm/public/images/landing/business/globalCase/overview_01.png
diff --git a/apps/dm/public/images/landing/business/globalCase/singapore_01.png b/apps/dm/public/images/landing/business/globalCase/singapore_01.png
new file mode 100644
index 000000000..1d050aa7e
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/singapore_01.png differ
diff --git a/apps/dm/public/images/landing/business/globalCase/singapore_02.png b/apps/dm/public/images/landing/business/globalCase/singapore_02.png
new file mode 100644
index 000000000..32e19c26e
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/singapore_02.png differ
diff --git a/apps/dm/public/images/landing/business/globalCase/singapore_03.png b/apps/dm/public/images/landing/business/globalCase/singapore_03.png
new file mode 100644
index 000000000..b9152d9eb
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/singapore_03.png differ
diff --git a/apps/dm/public/images/landing/business/globalCase/taiwan_01.png b/apps/dm/public/images/landing/business/globalCase/taiwan_01.png
new file mode 100644
index 000000000..98c45b5ea
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/taiwan_01.png differ
diff --git a/apps/dm/public/images/landing/business/globalCase/taiwan_02.png b/apps/dm/public/images/landing/business/globalCase/taiwan_02.png
new file mode 100644
index 000000000..ebd594727
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/taiwan_02.png differ
diff --git a/apps/dm/public/images/landing/business/globalCase/taiwan_03.png b/apps/dm/public/images/landing/business/globalCase/taiwan_03.png
new file mode 100644
index 000000000..03209a347
Binary files /dev/null and b/apps/dm/public/images/landing/business/globalCase/taiwan_03.png differ
diff --git a/apps/dm/public/images/landing/business/greywater/no_img.jpg b/apps/dm/public/images/landing/business/greywater/no_img.jpg
new file mode 100644
index 000000000..77a7d5e3b
Binary files /dev/null and b/apps/dm/public/images/landing/business/greywater/no_img.jpg differ
diff --git a/apps/dm/public/images/landing/business/rain/jeju_01.png b/apps/dm/public/images/landing/business/rain/jeju_01.png
new file mode 100644
index 000000000..e63fd424b
Binary files /dev/null and b/apps/dm/public/images/landing/business/rain/jeju_01.png differ
diff --git a/apps/dm/public/images/landing/business/rain/jeju_02.png b/apps/dm/public/images/landing/business/rain/jeju_02.png
new file mode 100644
index 000000000..44c8dc29b
Binary files /dev/null and b/apps/dm/public/images/landing/business/rain/jeju_02.png differ
diff --git a/apps/dm/public/images/landing/business/rain/jeju_03.png b/apps/dm/public/images/landing/business/rain/jeju_03.png
new file mode 100644
index 000000000..67a23847e
Binary files /dev/null and b/apps/dm/public/images/landing/business/rain/jeju_03.png differ
diff --git a/apps/dm/public/images/landing/business/rain/suwon_01.png b/apps/dm/public/images/landing/business/rain/suwon_01.png
new file mode 100644
index 000000000..a4e53cb8e
Binary files /dev/null and b/apps/dm/public/images/landing/business/rain/suwon_01.png differ
diff --git a/apps/dm/public/images/landing/business/rain/suwon_02.png b/apps/dm/public/images/landing/business/rain/suwon_02.png
new file mode 100644
index 000000000..490a37a26
Binary files /dev/null and b/apps/dm/public/images/landing/business/rain/suwon_02.png differ
diff --git a/apps/dm/public/images/landing/business/rain/suwon_03.png b/apps/dm/public/images/landing/business/rain/suwon_03.png
new file mode 100644
index 000000000..9f48eaa57
Binary files /dev/null and b/apps/dm/public/images/landing/business/rain/suwon_03.png differ
diff --git a/apps/dm/public/images/landing/business/rain/suwon_04.png b/apps/dm/public/images/landing/business/rain/suwon_04.png
new file mode 100644
index 000000000..75c410b6f
Binary files /dev/null and b/apps/dm/public/images/landing/business/rain/suwon_04.png differ
diff --git a/apps/dm/public/images/landing/business/rain/suwon_05.png b/apps/dm/public/images/landing/business/rain/suwon_05.png
new file mode 100644
index 000000000..68e1ef026
Binary files /dev/null and b/apps/dm/public/images/landing/business/rain/suwon_05.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/asan_01.png b/apps/dm/public/images/landing/business/sewage/asan_01.png
new file mode 100644
index 000000000..d6698cf94
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/asan_01.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/asan_02.png b/apps/dm/public/images/landing/business/sewage/asan_02.png
new file mode 100644
index 000000000..6b109810e
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/asan_02.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/boryeong_01.png b/apps/dm/public/images/landing/business/sewage/boryeong_01.png
new file mode 100644
index 000000000..ba22597b6
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/boryeong_01.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/boryeong_02.png b/apps/dm/public/images/landing/business/sewage/boryeong_02.png
new file mode 100644
index 000000000..617deb838
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/boryeong_02.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/bucheon_01.png b/apps/dm/public/images/landing/business/sewage/bucheon_01.png
new file mode 100644
index 000000000..fb46d9968
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/bucheon_01.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/bucheon_02.png b/apps/dm/public/images/landing/business/sewage/bucheon_02.png
new file mode 100644
index 000000000..a4e53cb8e
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/bucheon_02.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/guri_01.png b/apps/dm/public/images/landing/business/sewage/guri_01.png
new file mode 100644
index 000000000..38fc1ea99
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/guri_01.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/guri_02.png b/apps/dm/public/images/landing/business/sewage/guri_02.png
new file mode 100644
index 000000000..c5c916dec
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/guri_02.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/guri_03.png b/apps/dm/public/images/landing/business/sewage/guri_03.png
new file mode 100644
index 000000000..618d401e0
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/guri_03.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/guri_04.png b/apps/dm/public/images/landing/business/sewage/guri_04.png
new file mode 100644
index 000000000..ad1e214de
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/guri_04.png differ
diff --git a/apps/dm_new/public/images/landing/business/sewage/hwanggu_01.png b/apps/dm/public/images/landing/business/sewage/hwanggu_01.png
similarity index 100%
rename from apps/dm_new/public/images/landing/business/sewage/hwanggu_01.png
rename to apps/dm/public/images/landing/business/sewage/hwanggu_01.png
diff --git a/apps/dm_new/public/images/landing/business/sewage/hwanggu_02.png b/apps/dm/public/images/landing/business/sewage/hwanggu_02.png
similarity index 100%
rename from apps/dm_new/public/images/landing/business/sewage/hwanggu_02.png
rename to apps/dm/public/images/landing/business/sewage/hwanggu_02.png
diff --git a/apps/dm_new/public/images/landing/business/sewage/hwanggu_03.png b/apps/dm/public/images/landing/business/sewage/hwanggu_03.png
similarity index 100%
rename from apps/dm_new/public/images/landing/business/sewage/hwanggu_03.png
rename to apps/dm/public/images/landing/business/sewage/hwanggu_03.png
diff --git a/apps/dm/public/images/landing/business/sewage/paju_01.png b/apps/dm/public/images/landing/business/sewage/paju_01.png
new file mode 100644
index 000000000..e46712b58
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/paju_01.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/paju_02.png b/apps/dm/public/images/landing/business/sewage/paju_02.png
new file mode 100644
index 000000000..7be9b2fe1
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/paju_02.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/pohang_01.png b/apps/dm/public/images/landing/business/sewage/pohang_01.png
new file mode 100644
index 000000000..1a8e109f0
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/pohang_01.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/pohang_02.png b/apps/dm/public/images/landing/business/sewage/pohang_02.png
new file mode 100644
index 000000000..38524e2d2
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/pohang_02.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/pohang_03.png b/apps/dm/public/images/landing/business/sewage/pohang_03.png
new file mode 100644
index 000000000..a923b216f
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/pohang_03.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/suwon_01.png b/apps/dm/public/images/landing/business/sewage/suwon_01.png
new file mode 100644
index 000000000..9dee668d5
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/suwon_01.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/suwon_02.png b/apps/dm/public/images/landing/business/sewage/suwon_02.png
new file mode 100644
index 000000000..b4994d1d8
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/suwon_02.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/suwon_03.png b/apps/dm/public/images/landing/business/sewage/suwon_03.png
new file mode 100644
index 000000000..cb44099e3
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/suwon_03.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/ulsan_01.png b/apps/dm/public/images/landing/business/sewage/ulsan_01.png
new file mode 100644
index 000000000..8ecd32aeb
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/ulsan_01.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/ulsan_02.png b/apps/dm/public/images/landing/business/sewage/ulsan_02.png
new file mode 100644
index 000000000..b9b6d2177
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/ulsan_02.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/ulsan_03.png b/apps/dm/public/images/landing/business/sewage/ulsan_03.png
new file mode 100644
index 000000000..287c3d93d
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/ulsan_03.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/ulsan_04.png b/apps/dm/public/images/landing/business/sewage/ulsan_04.png
new file mode 100644
index 000000000..746afa0a6
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/ulsan_04.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/yeosu_01.png b/apps/dm/public/images/landing/business/sewage/yeosu_01.png
new file mode 100644
index 000000000..d7e07cb43
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/yeosu_01.png differ
diff --git a/apps/dm/public/images/landing/business/sewage/yeosu_02.png b/apps/dm/public/images/landing/business/sewage/yeosu_02.png
new file mode 100644
index 000000000..43b2b6da5
Binary files /dev/null and b/apps/dm/public/images/landing/business/sewage/yeosu_02.png differ
diff --git a/apps/dm_new/public/images/landing/calendar.svg b/apps/dm/public/images/landing/calendar.svg
similarity index 100%
rename from apps/dm_new/public/images/landing/calendar.svg
rename to apps/dm/public/images/landing/calendar.svg
diff --git a/apps/dm_new/public/images/landing/card_01.jpg b/apps/dm/public/images/landing/card_01.jpg
similarity index 100%
rename from apps/dm_new/public/images/landing/card_01.jpg
rename to apps/dm/public/images/landing/card_01.jpg
diff --git a/apps/dm_new/public/images/landing/card_02.jpg b/apps/dm/public/images/landing/card_02.jpg
similarity index 100%
rename from apps/dm_new/public/images/landing/card_02.jpg
rename to apps/dm/public/images/landing/card_02.jpg
diff --git a/apps/dm_new/public/images/landing/card_03.jpg b/apps/dm/public/images/landing/card_03.jpg
similarity index 100%
rename from apps/dm_new/public/images/landing/card_03.jpg
rename to apps/dm/public/images/landing/card_03.jpg
diff --git a/apps/dm_new/public/images/landing/card_04.jpg b/apps/dm/public/images/landing/card_04.jpg
similarity index 100%
rename from apps/dm_new/public/images/landing/card_04.jpg
rename to apps/dm/public/images/landing/card_04.jpg
diff --git a/apps/dm/public/images/landing/cases/greywater_building.png b/apps/dm/public/images/landing/cases/greywater_building.png
new file mode 100644
index 000000000..7d14ee265
Binary files /dev/null and b/apps/dm/public/images/landing/cases/greywater_building.png differ
diff --git a/apps/dm/public/images/landing/cases/greywater_factory.png b/apps/dm/public/images/landing/cases/greywater_factory.png
new file mode 100644
index 000000000..eb55bafd7
Binary files /dev/null and b/apps/dm/public/images/landing/cases/greywater_factory.png differ
diff --git a/apps/dm/public/images/landing/cases/greywater_overall.png b/apps/dm/public/images/landing/cases/greywater_overall.png
new file mode 100644
index 000000000..58dd62144
Binary files /dev/null and b/apps/dm/public/images/landing/cases/greywater_overall.png differ
diff --git a/apps/dm/public/images/landing/cases/greywater_usage.png b/apps/dm/public/images/landing/cases/greywater_usage.png
new file mode 100644
index 000000000..9b169793a
Binary files /dev/null and b/apps/dm/public/images/landing/cases/greywater_usage.png differ
diff --git a/apps/dm/public/images/landing/cases/rainwater_building.png b/apps/dm/public/images/landing/cases/rainwater_building.png
new file mode 100644
index 000000000..ffd2aca61
Binary files /dev/null and b/apps/dm/public/images/landing/cases/rainwater_building.png differ
diff --git a/apps/dm/public/images/landing/cases/rainwater_usage.png b/apps/dm/public/images/landing/cases/rainwater_usage.png
new file mode 100644
index 000000000..338068f01
Binary files /dev/null and b/apps/dm/public/images/landing/cases/rainwater_usage.png differ
diff --git a/apps/dm/public/images/landing/cases/rainwater_usage_amount.png b/apps/dm/public/images/landing/cases/rainwater_usage_amount.png
new file mode 100644
index 000000000..67fa29629
Binary files /dev/null and b/apps/dm/public/images/landing/cases/rainwater_usage_amount.png differ
diff --git a/apps/dm/public/images/landing/cases/treated_water_facility.png b/apps/dm/public/images/landing/cases/treated_water_facility.png
new file mode 100644
index 000000000..a0e5eaa31
Binary files /dev/null and b/apps/dm/public/images/landing/cases/treated_water_facility.png differ
diff --git a/apps/dm/public/images/landing/cases/treated_water_region.png b/apps/dm/public/images/landing/cases/treated_water_region.png
new file mode 100644
index 000000000..d503b3720
Binary files /dev/null and b/apps/dm/public/images/landing/cases/treated_water_region.png differ
diff --git a/apps/dm/public/images/landing/cases/treated_water_usage.png b/apps/dm/public/images/landing/cases/treated_water_usage.png
new file mode 100644
index 000000000..ae9fdb062
Binary files /dev/null and b/apps/dm/public/images/landing/cases/treated_water_usage.png differ
diff --git a/apps/dm/public/images/landing/cases/treated_water_year.png b/apps/dm/public/images/landing/cases/treated_water_year.png
new file mode 100644
index 000000000..4e63af233
Binary files /dev/null and b/apps/dm/public/images/landing/cases/treated_water_year.png differ
diff --git a/apps/dm_new/public/images/landing/drop_arrow.svg b/apps/dm/public/images/landing/drop_arrow.svg
similarity index 100%
rename from apps/dm_new/public/images/landing/drop_arrow.svg
rename to apps/dm/public/images/landing/drop_arrow.svg
diff --git a/apps/dm_new/public/images/landing/business/globalCase/eu_01.png b/apps/dm/public/images/landing/eu_01.png
similarity index 100%
rename from apps/dm_new/public/images/landing/business/globalCase/eu_01.png
rename to apps/dm/public/images/landing/eu_01.png
diff --git a/apps/dm/public/images/landing/greywater_status_img.png b/apps/dm/public/images/landing/greywater_status_img.png
new file mode 100644
index 000000000..0d7c4d707
Binary files /dev/null and b/apps/dm/public/images/landing/greywater_status_img.png differ
diff --git a/apps/dm_new/public/images/landing/hero_bg.jpg b/apps/dm/public/images/landing/hero_bg.jpg
similarity index 100%
rename from apps/dm_new/public/images/landing/hero_bg.jpg
rename to apps/dm/public/images/landing/hero_bg.jpg
diff --git a/apps/dm/public/images/landing/icon_building.png b/apps/dm/public/images/landing/icon_building.png
new file mode 100644
index 000000000..59e4546d1
Binary files /dev/null and b/apps/dm/public/images/landing/icon_building.png differ
diff --git a/apps/dm/public/images/landing/icon_chart.png b/apps/dm/public/images/landing/icon_chart.png
new file mode 100644
index 000000000..16a8ec3f7
Binary files /dev/null and b/apps/dm/public/images/landing/icon_chart.png differ
diff --git a/apps/dm/public/images/landing/icon_cycle_water.png b/apps/dm/public/images/landing/icon_cycle_water.png
new file mode 100644
index 000000000..6f7cb2df2
Binary files /dev/null and b/apps/dm/public/images/landing/icon_cycle_water.png differ
diff --git a/apps/dm/public/images/landing/icon_factory.png b/apps/dm/public/images/landing/icon_factory.png
new file mode 100644
index 000000000..741c5ea09
Binary files /dev/null and b/apps/dm/public/images/landing/icon_factory.png differ
diff --git a/apps/dm/public/images/landing/icon_faucet.png b/apps/dm/public/images/landing/icon_faucet.png
new file mode 100644
index 000000000..c85b5c892
Binary files /dev/null and b/apps/dm/public/images/landing/icon_faucet.png differ
diff --git a/apps/dm/public/images/landing/icon_hand.png b/apps/dm/public/images/landing/icon_hand.png
new file mode 100644
index 000000000..c0bfaf8e6
Binary files /dev/null and b/apps/dm/public/images/landing/icon_hand.png differ
diff --git a/apps/dm_new/public/images/landing/icon_left_arrow.png b/apps/dm/public/images/landing/icon_left_arrow.png
similarity index 100%
rename from apps/dm_new/public/images/landing/icon_left_arrow.png
rename to apps/dm/public/images/landing/icon_left_arrow.png
diff --git a/apps/dm/public/images/landing/icon_location.png b/apps/dm/public/images/landing/icon_location.png
new file mode 100644
index 000000000..2ab77a565
Binary files /dev/null and b/apps/dm/public/images/landing/icon_location.png differ
diff --git a/apps/dm_new/public/images/landing/icon_login.png b/apps/dm/public/images/landing/icon_login.png
similarity index 100%
rename from apps/dm_new/public/images/landing/icon_login.png
rename to apps/dm/public/images/landing/icon_login.png
diff --git a/apps/dm_new/public/images/landing/icon_logout.png b/apps/dm/public/images/landing/icon_logout.png
similarity index 100%
rename from apps/dm_new/public/images/landing/icon_logout.png
rename to apps/dm/public/images/landing/icon_logout.png
diff --git a/apps/dm/public/images/landing/icon_recycle.png b/apps/dm/public/images/landing/icon_recycle.png
new file mode 100644
index 000000000..6297eff33
Binary files /dev/null and b/apps/dm/public/images/landing/icon_recycle.png differ
diff --git a/apps/dm_new/public/images/landing/icon_right_arrow.png b/apps/dm/public/images/landing/icon_right_arrow.png
similarity index 100%
rename from apps/dm_new/public/images/landing/icon_right_arrow.png
rename to apps/dm/public/images/landing/icon_right_arrow.png
diff --git a/apps/dm/public/images/landing/icon_water_flow.png b/apps/dm/public/images/landing/icon_water_flow.png
new file mode 100644
index 000000000..4a48644d9
Binary files /dev/null and b/apps/dm/public/images/landing/icon_water_flow.png differ
diff --git a/apps/dm/public/images/landing/intro/domestic_textbox.png b/apps/dm/public/images/landing/intro/domestic_textbox.png
new file mode 100644
index 000000000..046af8127
Binary files /dev/null and b/apps/dm/public/images/landing/intro/domestic_textbox.png differ
diff --git a/apps/dm_new/public/images/landing/intro/greywater_intro.png b/apps/dm/public/images/landing/intro/greywater_intro.png
similarity index 100%
rename from apps/dm_new/public/images/landing/intro/greywater_intro.png
rename to apps/dm/public/images/landing/intro/greywater_intro.png
diff --git a/apps/dm/public/images/landing/intro/greywater_mandatory.png b/apps/dm/public/images/landing/intro/greywater_mandatory.png
new file mode 100644
index 000000000..f3dc58ab6
Binary files /dev/null and b/apps/dm/public/images/landing/intro/greywater_mandatory.png differ
diff --git a/apps/dm/public/images/landing/intro/greywater_standard.png b/apps/dm/public/images/landing/intro/greywater_standard.png
new file mode 100644
index 000000000..d544a1fc7
Binary files /dev/null and b/apps/dm/public/images/landing/intro/greywater_standard.png differ
diff --git a/apps/dm/public/images/landing/intro/law_timeline.png b/apps/dm/public/images/landing/intro/law_timeline.png
new file mode 100644
index 000000000..56ff1c347
Binary files /dev/null and b/apps/dm/public/images/landing/intro/law_timeline.png differ
diff --git a/apps/dm/public/images/landing/intro/linkage.png b/apps/dm/public/images/landing/intro/linkage.png
new file mode 100644
index 000000000..a7595a598
Binary files /dev/null and b/apps/dm/public/images/landing/intro/linkage.png differ
diff --git a/apps/dm/public/images/landing/intro/performance_left.png b/apps/dm/public/images/landing/intro/performance_left.png
new file mode 100644
index 000000000..b85bdd920
Binary files /dev/null and b/apps/dm/public/images/landing/intro/performance_left.png differ
diff --git a/apps/dm/public/images/landing/intro/policy_timeline.png b/apps/dm/public/images/landing/intro/policy_timeline.png
new file mode 100644
index 000000000..296bad776
Binary files /dev/null and b/apps/dm/public/images/landing/intro/policy_timeline.png differ
diff --git a/apps/dm_new/public/images/landing/intro/rainreuse_intro.png b/apps/dm/public/images/landing/intro/rainreuse_intro.png
similarity index 100%
rename from apps/dm_new/public/images/landing/intro/rainreuse_intro.png
rename to apps/dm/public/images/landing/intro/rainreuse_intro.png
diff --git a/apps/dm/public/images/landing/intro/rainreuse_mandatory.png b/apps/dm/public/images/landing/intro/rainreuse_mandatory.png
new file mode 100644
index 000000000..0f25e79c3
Binary files /dev/null and b/apps/dm/public/images/landing/intro/rainreuse_mandatory.png differ
diff --git a/apps/dm/public/images/landing/intro/rainwater_design.png b/apps/dm/public/images/landing/intro/rainwater_design.png
new file mode 100644
index 000000000..714f506f3
Binary files /dev/null and b/apps/dm/public/images/landing/intro/rainwater_design.png differ
diff --git a/apps/dm/public/images/landing/intro/rainwater_standards.png b/apps/dm/public/images/landing/intro/rainwater_standards.png
new file mode 100644
index 000000000..e42e0a7a1
Binary files /dev/null and b/apps/dm/public/images/landing/intro/rainwater_standards.png differ
diff --git a/apps/dm/public/images/landing/intro/rel_note.png b/apps/dm/public/images/landing/intro/rel_note.png
new file mode 100644
index 000000000..6b26f5248
Binary files /dev/null and b/apps/dm/public/images/landing/intro/rel_note.png differ
diff --git a/apps/dm_new/public/images/landing/intro/treatedwater_intro.png b/apps/dm/public/images/landing/intro/treatedwater_intro.png
similarity index 100%
rename from apps/dm_new/public/images/landing/intro/treatedwater_intro.png
rename to apps/dm/public/images/landing/intro/treatedwater_intro.png
diff --git a/apps/dm/public/images/landing/intro/treatedwater_mandatory.png b/apps/dm/public/images/landing/intro/treatedwater_mandatory.png
new file mode 100644
index 000000000..84704c6ec
Binary files /dev/null and b/apps/dm/public/images/landing/intro/treatedwater_mandatory.png differ
diff --git a/apps/dm_new/public/images/landing/logo.png b/apps/dm/public/images/landing/logo.png
similarity index 100%
rename from apps/dm_new/public/images/landing/logo.png
rename to apps/dm/public/images/landing/logo.png
diff --git a/apps/dm_new/public/images/landing/overview_01.png b/apps/dm/public/images/landing/overview_01.png
similarity index 100%
rename from apps/dm_new/public/images/landing/overview_01.png
rename to apps/dm/public/images/landing/overview_01.png
diff --git a/apps/dm_new/public/images/landing/rain_01.png b/apps/dm/public/images/landing/rain_01.png
similarity index 100%
rename from apps/dm_new/public/images/landing/rain_01.png
rename to apps/dm/public/images/landing/rain_01.png
diff --git a/apps/dm/public/images/landing/rain_status_img.png b/apps/dm/public/images/landing/rain_status_img.png
new file mode 100644
index 000000000..91e3124ee
Binary files /dev/null and b/apps/dm/public/images/landing/rain_status_img.png differ
diff --git a/apps/dm_new/public/images/landing/scroll_down.svg b/apps/dm/public/images/landing/scroll_down.svg
similarity index 100%
rename from apps/dm_new/public/images/landing/scroll_down.svg
rename to apps/dm/public/images/landing/scroll_down.svg
diff --git a/apps/dm_new/public/images/landing/section_03.png b/apps/dm/public/images/landing/section_03.png
similarity index 100%
rename from apps/dm_new/public/images/landing/section_03.png
rename to apps/dm/public/images/landing/section_03.png
diff --git a/apps/dm_new/public/images/landing/sewage_01.png b/apps/dm/public/images/landing/sewage_01.png
similarity index 100%
rename from apps/dm_new/public/images/landing/sewage_01.png
rename to apps/dm/public/images/landing/sewage_01.png
diff --git a/apps/dm_new/public/images/landing/sewage_02.png b/apps/dm/public/images/landing/sewage_02.png
similarity index 100%
rename from apps/dm_new/public/images/landing/sewage_02.png
rename to apps/dm/public/images/landing/sewage_02.png
diff --git a/apps/dm_new/public/images/landing/sewage_03.png b/apps/dm/public/images/landing/sewage_03.png
similarity index 100%
rename from apps/dm_new/public/images/landing/sewage_03.png
rename to apps/dm/public/images/landing/sewage_03.png
diff --git a/apps/dm_new/public/images/landing/sewage_04.png b/apps/dm/public/images/landing/sewage_04.png
similarity index 100%
rename from apps/dm_new/public/images/landing/sewage_04.png
rename to apps/dm/public/images/landing/sewage_04.png
diff --git a/apps/dm_new/public/images/landing/sewage_05.png b/apps/dm/public/images/landing/sewage_05.png
similarity index 100%
rename from apps/dm_new/public/images/landing/sewage_05.png
rename to apps/dm/public/images/landing/sewage_05.png
diff --git a/apps/dm_new/public/images/landing/sewage_06.png b/apps/dm/public/images/landing/sewage_06.png
similarity index 100%
rename from apps/dm_new/public/images/landing/sewage_06.png
rename to apps/dm/public/images/landing/sewage_06.png
diff --git a/apps/dm/public/images/landing/sewage_status_img.png b/apps/dm/public/images/landing/sewage_status_img.png
new file mode 100644
index 000000000..41b02632f
Binary files /dev/null and b/apps/dm/public/images/landing/sewage_status_img.png differ
diff --git a/apps/dm_new/public/images/landing/business/globalCase/singapore_01.png b/apps/dm/public/images/landing/singapore_01.png
similarity index 100%
rename from apps/dm_new/public/images/landing/business/globalCase/singapore_01.png
rename to apps/dm/public/images/landing/singapore_01.png
diff --git a/apps/dm_new/public/images/landing/business/globalCase/taiwan_01.png b/apps/dm/public/images/landing/taiwan_01.png
similarity index 100%
rename from apps/dm_new/public/images/landing/business/globalCase/taiwan_01.png
rename to apps/dm/public/images/landing/taiwan_01.png
diff --git a/apps/dm_new/public/images/landing/water_quality_ref_1.png b/apps/dm/public/images/landing/water_quality_ref_1.png
similarity index 100%
rename from apps/dm_new/public/images/landing/water_quality_ref_1.png
rename to apps/dm/public/images/landing/water_quality_ref_1.png
diff --git a/apps/dm/public/img/wrAbout/icon_01.png b/apps/dm/public/img/wrAbout/icon_01.png
deleted file mode 100644
index 30eff5745..000000000
Binary files a/apps/dm/public/img/wrAbout/icon_01.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/icon_02.png b/apps/dm/public/img/wrAbout/icon_02.png
deleted file mode 100644
index 36401729f..000000000
Binary files a/apps/dm/public/img/wrAbout/icon_02.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/icon_03.png b/apps/dm/public/img/wrAbout/icon_03.png
deleted file mode 100644
index 87f48c444..000000000
Binary files a/apps/dm/public/img/wrAbout/icon_03.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/img_01_1.png b/apps/dm/public/img/wrAbout/img_01_1.png
deleted file mode 100644
index 9aab4e824..000000000
Binary files a/apps/dm/public/img/wrAbout/img_01_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/img_02_1.png b/apps/dm/public/img/wrAbout/img_02_1.png
deleted file mode 100644
index aa1c8ee5a..000000000
Binary files a/apps/dm/public/img/wrAbout/img_02_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/img_02_2.png b/apps/dm/public/img/wrAbout/img_02_2.png
deleted file mode 100644
index c8283053e..000000000
Binary files a/apps/dm/public/img/wrAbout/img_02_2.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/img_02_3.png b/apps/dm/public/img/wrAbout/img_02_3.png
deleted file mode 100644
index f5ba9d81e..000000000
Binary files a/apps/dm/public/img/wrAbout/img_02_3.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/img_03_1.png b/apps/dm/public/img/wrAbout/img_03_1.png
deleted file mode 100644
index a7534ae68..000000000
Binary files a/apps/dm/public/img/wrAbout/img_03_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/img_03_2.png b/apps/dm/public/img/wrAbout/img_03_2.png
deleted file mode 100644
index 6b4faca7d..000000000
Binary files a/apps/dm/public/img/wrAbout/img_03_2.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/img_04_1.png b/apps/dm/public/img/wrAbout/img_04_1.png
deleted file mode 100644
index a160072bd..000000000
Binary files a/apps/dm/public/img/wrAbout/img_04_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/img_04_2.png b/apps/dm/public/img/wrAbout/img_04_2.png
deleted file mode 100644
index 374fc55bf..000000000
Binary files a/apps/dm/public/img/wrAbout/img_04_2.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/img_05_1.png b/apps/dm/public/img/wrAbout/img_05_1.png
deleted file mode 100644
index 1418fa92d..000000000
Binary files a/apps/dm/public/img/wrAbout/img_05_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/img_05_2.png b/apps/dm/public/img/wrAbout/img_05_2.png
deleted file mode 100644
index 0c2f92396..000000000
Binary files a/apps/dm/public/img/wrAbout/img_05_2.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/img_06_1.png b/apps/dm/public/img/wrAbout/img_06_1.png
deleted file mode 100644
index 08acf4971..000000000
Binary files a/apps/dm/public/img/wrAbout/img_06_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrAbout/img_06_2.png b/apps/dm/public/img/wrAbout/img_06_2.png
deleted file mode 100644
index 19b150b7c..000000000
Binary files a/apps/dm/public/img/wrAbout/img_06_2.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/icon_01.png b/apps/dm/public/img/wrExample/icon_01.png
deleted file mode 100644
index 30eff5745..000000000
Binary files a/apps/dm/public/img/wrExample/icon_01.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/icon_02.png b/apps/dm/public/img/wrExample/icon_02.png
deleted file mode 100644
index 36401729f..000000000
Binary files a/apps/dm/public/img/wrExample/icon_02.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/icon_03.png b/apps/dm/public/img/wrExample/icon_03.png
deleted file mode 100644
index 87f48c444..000000000
Binary files a/apps/dm/public/img/wrExample/icon_03.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_01_1.png b/apps/dm/public/img/wrExample/img_01_1.png
deleted file mode 100644
index 9aab4e824..000000000
Binary files a/apps/dm/public/img/wrExample/img_01_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_02_1.png b/apps/dm/public/img/wrExample/img_02_1.png
deleted file mode 100644
index 3d61c6e5d..000000000
Binary files a/apps/dm/public/img/wrExample/img_02_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_02_2.png b/apps/dm/public/img/wrExample/img_02_2.png
deleted file mode 100644
index c8283053e..000000000
Binary files a/apps/dm/public/img/wrExample/img_02_2.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_02_3.png b/apps/dm/public/img/wrExample/img_02_3.png
deleted file mode 100644
index f5ba9d81e..000000000
Binary files a/apps/dm/public/img/wrExample/img_02_3.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_03_1.png b/apps/dm/public/img/wrExample/img_03_1.png
deleted file mode 100644
index a7534ae68..000000000
Binary files a/apps/dm/public/img/wrExample/img_03_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_03_2.png b/apps/dm/public/img/wrExample/img_03_2.png
deleted file mode 100644
index 6b4faca7d..000000000
Binary files a/apps/dm/public/img/wrExample/img_03_2.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_04_1.png b/apps/dm/public/img/wrExample/img_04_1.png
deleted file mode 100644
index a160072bd..000000000
Binary files a/apps/dm/public/img/wrExample/img_04_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_04_2.png b/apps/dm/public/img/wrExample/img_04_2.png
deleted file mode 100644
index 374fc55bf..000000000
Binary files a/apps/dm/public/img/wrExample/img_04_2.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_05_1.png b/apps/dm/public/img/wrExample/img_05_1.png
deleted file mode 100644
index 1418fa92d..000000000
Binary files a/apps/dm/public/img/wrExample/img_05_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_05_2.png b/apps/dm/public/img/wrExample/img_05_2.png
deleted file mode 100644
index 0c2f92396..000000000
Binary files a/apps/dm/public/img/wrExample/img_05_2.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_06_1.png b/apps/dm/public/img/wrExample/img_06_1.png
deleted file mode 100644
index 08acf4971..000000000
Binary files a/apps/dm/public/img/wrExample/img_06_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_06_2.png b/apps/dm/public/img/wrExample/img_06_2.png
deleted file mode 100644
index 19b150b7c..000000000
Binary files a/apps/dm/public/img/wrExample/img_06_2.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_arrow_down_1.png b/apps/dm/public/img/wrExample/img_arrow_down_1.png
deleted file mode 100644
index 9e8fb76c6..000000000
Binary files a/apps/dm/public/img/wrExample/img_arrow_down_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_arrow_down_2.png b/apps/dm/public/img/wrExample/img_arrow_down_2.png
deleted file mode 100644
index 2002bb607..000000000
Binary files a/apps/dm/public/img/wrExample/img_arrow_down_2.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_ex_01_1.png b/apps/dm/public/img/wrExample/img_ex_01_1.png
deleted file mode 100644
index 9d6bfb002..000000000
Binary files a/apps/dm/public/img/wrExample/img_ex_01_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_ex_02_1.png b/apps/dm/public/img/wrExample/img_ex_02_1.png
deleted file mode 100644
index 70c1f8ed2..000000000
Binary files a/apps/dm/public/img/wrExample/img_ex_02_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_ex_03_1.png b/apps/dm/public/img/wrExample/img_ex_03_1.png
deleted file mode 100644
index c981fa9fb..000000000
Binary files a/apps/dm/public/img/wrExample/img_ex_03_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_ex_04_1.png b/apps/dm/public/img/wrExample/img_ex_04_1.png
deleted file mode 100644
index f5547820e..000000000
Binary files a/apps/dm/public/img/wrExample/img_ex_04_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_ex_04_2.png b/apps/dm/public/img/wrExample/img_ex_04_2.png
deleted file mode 100644
index b102942ee..000000000
Binary files a/apps/dm/public/img/wrExample/img_ex_04_2.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_ex_04_3.png b/apps/dm/public/img/wrExample/img_ex_04_3.png
deleted file mode 100644
index 50ca8045f..000000000
Binary files a/apps/dm/public/img/wrExample/img_ex_04_3.png and /dev/null differ
diff --git a/apps/dm/public/img/wrExample/img_ex_04_4.png b/apps/dm/public/img/wrExample/img_ex_04_4.png
deleted file mode 100644
index 6e6d0c294..000000000
Binary files a/apps/dm/public/img/wrExample/img_ex_04_4.png and /dev/null differ
diff --git a/apps/dm/public/img/wrOverview/img_ov_01_1.png b/apps/dm/public/img/wrOverview/img_ov_01_1.png
deleted file mode 100644
index e59a10192..000000000
Binary files a/apps/dm/public/img/wrOverview/img_ov_01_1.png and /dev/null differ
diff --git a/apps/dm/public/img/wrStatus/icon_favorit_off.png b/apps/dm/public/img/wrStatus/icon_favorit_off.png
deleted file mode 100644
index 4de0b3ebc..000000000
Binary files a/apps/dm/public/img/wrStatus/icon_favorit_off.png and /dev/null differ
diff --git a/apps/dm/public/img/wrStatus/icon_favorit_on.png b/apps/dm/public/img/wrStatus/icon_favorit_on.png
deleted file mode 100644
index f2edfa4e9..000000000
Binary files a/apps/dm/public/img/wrStatus/icon_favorit_on.png and /dev/null differ
diff --git a/apps/dm/public/img/wrStatus/icon_right.png b/apps/dm/public/img/wrStatus/icon_right.png
deleted file mode 100644
index fef56226c..000000000
Binary files a/apps/dm/public/img/wrStatus/icon_right.png and /dev/null differ
diff --git a/apps/dm/public/img/wrStatus/southKoreaMap.svg b/apps/dm/public/img/wrStatus/southKoreaMap.svg
deleted file mode 100644
index 7b3c170e3..000000000
--- a/apps/dm/public/img/wrStatus/southKoreaMap.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg width="506" height="785" viewBox="0 0 506 785" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="전라북도" d="M273.567 425.516L274.188 429.893L276.776 436.366L272.497 444.123L262.388 453.507L253.164 454.538L241.456 466.408L234.164 484.969L234.199 489.884L228.425 500.23L234.578 510.92L233.336 516.076L236.637 519.971L228.736 529.825L229.207 534.786L222.445 540.171L212.531 530.741L203.135 532.139L199.017 538.372L191.864 536.768L186.861 538.819L178.752 536.126L178.43 533.686L170.644 532.093L159.695 536.699L152.358 532.517L155.785 526.261L152.174 521.77L153.301 515.491L150.678 509.923L146.09 512.799L143.398 518.848L135.29 516.167L133.266 509.43L123.122 503.816L114.117 508.754L114.416 513.612L109.16 518.184L110.057 521.77L99.1308 527.9L94.1739 524.096L89.24 525.711L90.4706 530.077L82.9604 529.126L82.5924 520.2L79.1881 518.573L78.9811 511.447L73.0925 508.709L79.9126 497.056L93.1848 491.912L98.1302 491.935L102.064 487.913L106.906 492.153L107.423 488.944L103.754 484.98L84.6165 484.969L78.9811 480.489L80.7752 474.141L98.1762 464.196L104.306 451.112L124.123 456.68L124.364 451.33L120.201 449.978L113.634 443.859L122.673 440.548L127.63 441.453L130.552 436.286L130.149 434.155L121.098 437.409L112.541 435.621L109.608 438.749L102.627 436.057L103.168 425.779L97.0031 422.823L98.6938 419.707L117.038 419.237L140.604 407.436L141.846 399.336L147.608 396.54L155.164 396.987L161.248 399.45L167.044 409.808L173.347 412.283L175.969 408.822L181.513 407.757L188.08 409.132L193.911 406.187L199.305 404.835L211.634 423.27L214.555 422.606L217.936 428.438L226.436 427.853L227.85 421.93L235.429 423.018L236.499 426.776L240.11 422.606L239.455 417.221L243.837 416.854L245.033 420.097L246.447 420.452L247.678 417.897L250.461 417.771L253.969 423.362L256.798 423.408L260.49 425.837L270.254 423.305L273.567 425.516Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="서울특별시" d="M200.823 161.685L192.036 164.378L194.072 156.747L192.485 153.378L193.393 150.686L190.909 149.792L191.588 144.407L187.309 142.391L180.777 141.039L177.177 150.021L175.153 150.239L172.22 146.195L167.24 149.403L165.687 156.747L152.829 155.315L150.828 157.641L147.895 163.473L153.531 165.054L154.209 170.427L152.852 171.55L153.531 174.919L158.706 174.243L162.985 182.32L167.263 181.873L171.093 183.225L181.007 179.41L181.455 182.549L182.352 184.566L189.333 181.209H191.818L194.072 179.628L196.993 178.287L195.187 173.349L200.823 167.07V161.685Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="인천광역시" d="M126.722 162.453L125.376 165.054L126.285 167.517L129.068 166.875L130.782 169.98L126.423 172.1L128.079 180.303L131.702 186.914L140.259 190.214L146.768 178.951L143.398 173.578L143.168 168.411H145.422L147.895 163.472L150.828 157.641L146.55 157.423L134.381 146.871L130.103 148.899V150.468L123.582 153.608L126.722 162.453Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="경기도" d="M286.172 172.455L282.618 168.537L274.475 166.394L258.259 155.177H251.036L253.521 145.977L246.769 140.363L252.393 134.313L252.163 123.715L263.653 116.359L262.756 104.466L256.235 100.88L254.613 97.1337L244.285 90.3394L245.194 80.463L243.837 75.5249L228.299 78.2174L224.469 65.8777L210.725 60.275L199.029 45.0137L185.504 55.3368L181.904 64.984L169.517 74.4021L165.687 81.3567L155.336 89.6634L146.55 93.9256L142.72 111.421L133.933 122.42L120.201 123.543L118.165 152.255L123.582 153.607L130.103 150.468V148.898L134.381 146.87L146.55 157.423L150.828 157.64L152.829 155.315L165.687 156.747L167.24 149.403L172.22 146.194L175.153 150.239L177.177 150.021L180.777 141.039L187.309 142.391L191.588 144.407L190.909 149.792L193.393 150.686L192.485 153.378L194.072 156.747L192.036 164.377L200.823 161.685V167.07L195.187 173.349L196.993 178.287L194.072 179.627L191.818 181.208H189.333L182.352 184.566L181.455 182.549L181.007 179.41L171.093 183.225L167.263 181.873L162.985 182.32L158.706 174.242L153.531 174.918L152.852 171.55L154.209 170.427L153.531 165.053L147.895 163.472L145.422 168.41H143.168L143.398 173.578L146.768 178.951L140.258 190.214L135.405 195.748L153.082 208.569L146.09 211.937L138.211 210.815L129.206 212.167L130.552 216.876L127.182 223.83L130.782 226.305L129.885 230.785L138.441 228.539L142.49 224.953L147.447 228.986L141.593 231.232L142.49 242.678L145.422 249.403L144.065 254.124L149.252 260.62L154.209 273.418L163.859 268.698L177.844 266.91L186.642 262.648L195.866 266.234L206.228 275.435L209.161 270.496L216.993 268.847L235.061 253.677L244.745 255.464L256.177 245.198L259.375 238.416L263.078 241.417L265.873 236.25L271.543 231.908L272.21 222.261L275.142 219.121L275.372 204.765L281.595 187.659L281.226 179.857L284.378 177.164L286.172 172.455Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-miterlimit="10"/>
-<path id="강원특별자치도" d="M210.047 41.6452L215.912 42.3212L220.858 38.2882L231.669 45.2429L235.05 40.7515L253.291 44.3377L274.234 40.0755L292.256 42.3212L300.583 47.7062L308.472 45.4606L320.629 47.0302L337.064 46.5834L349.462 40.3047L358.916 29.7638L363.873 7.99466L369.612 1.81909L372.545 7.88009L377.502 18.4324L378.399 28.9733L386.622 42.7681L396.754 72.1679L401.481 87.6469L412.971 107.617L425.357 133.419L450.579 165.054L449.452 169.98L458.009 180.533L456.882 187.029L483.23 235.952L486.83 254.101L472.419 262.648L463 270.726L451.258 261.972L442.022 264.665L429.406 259.956L421.079 267.586L409.141 259.727L404.863 267.357L392.027 262.946L386.622 260.254L380.538 259.807L370.635 251.649H359.813L353.062 244.775L341.572 244.694L348.105 233.707L323.102 230.785L312.072 236.399L307.564 226.076L296.534 225.893L292.923 238.267L279.639 239.092L274.464 240.432L271.543 231.908L272.21 222.261L275.143 219.121L275.373 204.765L281.595 187.659L281.227 179.857L284.378 177.164L286.172 172.455L282.618 168.537L274.475 166.394L258.248 155.177H251.036L253.521 145.977L246.758 140.363L252.394 134.313L252.164 123.715L263.653 116.359L262.756 104.466L256.235 100.88L254.613 97.1337L244.285 90.3394L245.194 80.4631L243.837 75.5249L228.299 78.2174L224.458 65.8777L210.725 60.275L199.029 45.0137L210.047 41.6452Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="경상북도" d="M481.264 504.297L493.903 466.82L494.57 458.742L501.551 447.972L504.346 437.535L500.206 434.052L496.594 439.219L484.012 447.205L476.813 439.322L483.759 430.019L480.378 392.77L488.268 377.074L489.843 341.395L497.721 321.196L492.995 303.482V271.619L486.83 254.101L472.419 262.648L463 270.726L451.257 261.972L442.022 264.665L429.405 259.956L421.079 267.586L409.141 259.726L404.862 267.357L392.027 262.946L382.194 265.111L374.902 272.742L364.77 277.99L358.479 289.206L361.17 295.588L350.163 302.841L333.464 290.467L327 298.556L319.295 295.623L314.763 298.544L308.725 298.922L304.424 307.378L308.898 313.599L304.286 315.616L299.685 311.422L282.871 316.945L289.243 323.155L288.012 328.471L281.893 323.522L270.254 330.304L279.053 336.205L283.446 343.733L279.421 348.671L277.845 365.605L279.869 370.176L273.567 377.612L273.498 381.783L278.075 384.762L280.41 380.912L287.598 388.382L297.995 386.87L299.801 398.155L290.519 397.491L290.002 406.92L282.791 421.804L273.636 425.527L274.188 429.893L276.775 436.366L272.497 444.123L279.041 453.357L291.209 459.602L300.479 459.682L303.492 466.809L311.612 474.829L312.693 483.995L306.586 488.841L312.82 492.84L330.393 492.164L339.56 499.164L335.5 483.903L343.067 485.702L344.689 483.181L339.111 476.272L343.389 468.424L350.14 467.53L352.004 464.471L340.077 458.96L347.886 446.437L354.097 443.894L352.165 452.269L355.546 454.286L358.479 452.04L362.079 440.823L369.957 439.7L375.592 437.237L382.803 436.332L388.301 439.104L389.474 443.951L389.784 450.883L391.13 454.068L388.784 462.535L384.598 463.257L383.24 466.408L382.93 470.681L379.871 474.027L380.101 477.178L378.513 484.35L369.06 485.702V482.104L361.618 482.631L355.316 490.697L358.099 499.313L387.3 511.252L404.264 502.006L418.675 505.81L422.033 502.716L430.372 501.376L435.674 491.568L446.358 490.617L456.939 494.421L455.593 500.929L462.126 502.728L466.853 500.482L473.592 500.253L481.264 504.297Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="충청북도" d="M274.464 240.432L279.639 239.092L292.923 238.267L296.534 225.893L307.564 226.042L312.072 236.399L323.102 230.785L348.105 233.707L341.572 244.694L353.062 244.774L359.813 251.649H370.635L380.538 259.807L386.622 260.253L392.027 262.946L382.194 265.203L374.902 272.742L364.77 277.99L358.479 289.206L361.17 295.588L350.164 302.841L333.464 290.467L327 298.556L319.295 295.623L314.763 298.544L308.725 298.922L304.424 307.378L308.898 313.599L304.286 315.616L299.686 311.423L282.871 316.945L289.243 323.155L288.012 328.471L281.893 323.522L270.254 330.304L279.053 336.205L283.446 343.733L279.421 348.671L277.845 365.605L279.869 370.176L273.567 377.612L273.498 381.783L278.075 384.762L280.41 380.912L287.598 388.382L297.995 386.87L299.801 398.155L290.462 397.594L290.002 406.92L282.791 421.804L273.567 425.608L270.254 423.305L260.49 425.837L256.798 423.408L253.969 423.362L250.461 417.771L247.678 417.897L246.447 420.452L245.033 420.096L243.837 416.854L240.122 412.225L238.144 402.67L240.053 401.467L237.994 394.191L233.014 385.896L226.505 385.415L224.584 382.172L231.554 362.42L234.946 359.75L234.268 357.046L228.954 356.084V350.527L225.93 346.047L221.18 349.988L217.821 349.037L216.016 343.32L212.013 342.713V335.586L209.863 332.607L210.058 330.866L207.091 327.818L203.71 320.852L201.007 318.618L204.561 309.234L213.819 300.779L219.581 301.626L222.042 298.315L210.323 278.517L206.228 275.435L209.161 270.496L216.993 268.847L235.061 253.677L244.745 255.464L256.177 245.198L259.375 238.416L263.078 241.417L265.873 236.25L271.543 231.908L274.464 240.432Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="충청남도" d="M226.505 385.415L219.397 392.942L215.567 391.04L214.762 388.038L212.197 386.434V380.603L210.392 380.144L209.092 385.713L204.308 392.266L198.81 386.331L198.672 379.927L195.164 377.521L195.682 371.322L198.672 367.587L197.994 365.502L200.052 356.118L194.244 346.207L197.407 341.727L194.681 339.997L192.899 329.835L185.239 318.835L187.493 311.434L185.239 304.479L188.206 302.841L195.153 306.496L204.561 309.234L213.819 300.778L219.581 301.626L222.042 298.315L210.323 278.517L206.228 275.435L195.866 266.234L186.642 262.648L177.844 266.91L163.859 268.698L154.209 273.418L145.917 273.132L137.13 255.418L131.955 258.317L129.609 252.898L118.66 250.251L107.4 241.498L103.685 241.624L100.465 246.103L101.443 252.004L103.478 257.126L102.374 257.882L98.1419 250.664L91.6668 247.604L85.6403 247.364L80.6259 250.48L86.2844 253.746L82.857 255.877L87.9865 260.047L90.3672 260.849L90.7928 263.748L84.5707 269.568L76.198 280.281L72.3681 278.425L78.5787 265.501L77.0375 263.702L78.1301 256.163L76.1405 253.299L71.5861 267.128L68.6878 268.812L65.0765 263.324L60.8211 265.936L61.2696 273.968L59.8435 275.606L56.6922 274.827L52.6554 277.898L47.7214 291.097L48.1585 292.506L51.8618 292.323L52.0228 286.147L57.3593 288.565L60.108 293.606L52.9659 295.863L52.8969 298.762L58.6474 299.931L62.8338 298.498L64.858 295.313L68.7108 294.992L67.3997 300.767L71.3675 304.342L69.0558 313.29L73.1732 319.145L74.1853 344.958L85.3643 346.952L79.0272 321.413L81.2354 317.483L75.2089 312.843L76.888 311.044L77.7966 304.433L79.7173 302.99L81.799 311.56L86.0313 314.653L88.9871 312.797L91.9544 306.965L93.668 308.421L91.8739 316.681L95.7037 343.606L92.9664 349.782L100.879 357.287V359.292L94.2776 362.053L97.0493 382.86L89.7692 391.052L90.9883 393.618L94.105 391.04L101.949 393.756L107.964 401.1L106.779 403.77L111.702 416.281L117.038 419.237L140.604 407.436L141.846 399.336L147.608 396.54L155.164 396.987L161.248 399.45L167.102 409.773L173.405 412.237L175.969 408.822L181.513 407.757L188.08 409.132L193.911 406.187L199.305 404.835L211.634 423.27L214.555 422.606L217.937 428.437L226.436 427.853L227.85 421.93L235.43 423.018L236.499 426.776L240.11 422.606L239.455 417.221L243.837 416.854L240.122 412.225L238.144 402.67L240.053 401.467L237.994 394.191L233.014 385.896L226.505 385.415Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="세종특별자치시" d="M204.561 309.234L201.007 318.618L203.71 320.852L207.091 327.818L210.058 330.866L209.863 332.607L212.013 335.586V342.713L210.84 349.633L209.253 350.928L207.919 354.8L200.052 356.118L194.244 346.207L197.407 341.727L194.681 339.997L192.899 329.835L185.239 318.835L187.493 311.434L185.239 304.479L188.206 302.841L195.153 306.496L204.561 309.234Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="대전광역시" d="M200.052 356.118L207.919 354.8L209.253 350.928L210.84 349.633L212.013 342.713L216.016 343.32L217.821 349.037L221.18 349.988L225.93 346.047L228.954 350.527V356.084L234.268 357.046L234.946 359.75L231.554 362.42L224.584 382.172L226.505 385.415L219.397 392.942L215.567 391.04L214.762 388.039L212.197 386.435V380.603L210.392 380.144L209.092 385.713L204.308 392.266L198.81 386.331L198.672 379.927L195.164 377.521L195.682 371.322L198.672 367.587L197.994 365.502L200.052 356.118Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="대구광역시" d="M361.619 482.631L369.06 482.104V485.702L378.514 484.35L380.101 477.178L379.871 474.027L382.93 470.681L383.24 466.408L384.598 463.257L388.784 462.535L391.13 454.068L389.785 450.883L389.474 443.951L388.301 439.105L382.803 436.332L375.592 437.237L369.957 439.7L362.079 440.823L358.479 452.04L355.546 454.286L352.165 452.269L354.097 443.894L347.886 446.437L340.077 458.96L352.004 464.471L350.141 467.53L343.389 468.424L339.111 476.273L344.689 483.181L343.067 485.702L335.5 483.903L339.56 499.164L350.819 496.472L355.316 490.697L361.619 482.631Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="울산광역시" d="M459.136 556.349L456.663 554.332L454.19 547.377L446.496 545.327L444.161 538.326L439.204 536.699L432.361 528.06L420.515 521.724L416.858 516.465L422.769 511.183L422.033 502.716L430.372 501.376L435.674 491.568L446.358 490.617L456.939 494.421L455.593 500.929L462.126 502.728L466.853 500.482L473.592 500.253L481.264 504.297L481.206 506.761L483.012 511.252L481.666 515.743L481.885 522.469L478.963 528.977L474.455 532.116L473.109 526.731L471.683 524.13L471.752 531.669L465.898 535.702L467.704 538.624L467.474 544.685L465.001 548.718L466.347 550.517L462.597 552.797L459.136 556.349Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="부산광역시" d="M446.496 545.327L454.19 547.378L456.663 554.332L459.136 556.349L453.857 558.216L449.233 567.336L449.452 570.258L438.871 583.503L432.338 581.922L429.187 585.737L430.993 588.876L430.935 591.569L426.484 591.351L423.103 587.983L415.673 597.412L412.522 595.384L411.395 600.322L408.244 601.216L406.887 596.954L408.692 585.29L402.93 591.5L399.434 589.151L395.409 592.245L391.004 591.122L391.13 586.722L386.909 580.959L403.908 570.682L411.959 570.854L416.203 568.253L418.077 564.197L433.132 556.039L435.754 549.554L443.046 549.99L446.496 545.327Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="경상남도" d="M272.497 444.123L262.388 453.506L253.164 454.538L241.456 466.408L234.164 484.969L234.199 489.884L228.425 500.23L234.578 510.92L233.336 516.076L236.637 519.971L228.736 529.825L229.207 534.786L222.445 540.171L225.907 549.085L227.712 563.888L233.589 569.742L239.639 582.506L245.251 586.676L246.769 593.001L242.652 598.684L255.2 603.026L258.892 602.797L264.838 597.286L265.321 595.075L267.793 596.198L268.242 598.89L272.095 597.676L274.326 598.89L277.132 597.263L274.498 590.824L276.799 589.919L278.846 590.492L280.145 586.39L285.091 584.946L282.434 589.243L282.216 599.784L280.881 606.509L289.795 611.218L291.968 615.297L293.245 615.939L297.098 614.243L299.778 615.492L301.319 615.263L303.849 609.076L309.692 609.557L312.613 614.369L316.742 612.376L320.042 607.185L322.297 613.693L317.041 616.088L318.248 619.525L323.067 621.003L324.999 619.525L327.024 621.278L326.794 628.725L321.492 627.373L320.042 628.954L324.585 632.793L327.208 639.369L329.738 640.538L332.061 638.636L333.165 632.735L331.854 628.806L334.787 627.488L338.628 620.155L336.259 617.222L333.947 621.324L331.808 620.419L334.545 606.532L334.235 603.828L341.216 602.476L344.252 598.936L338.962 593.952L330.635 595.522L328.887 598.214L325.448 598.661L328.312 593.345L340.296 589.403L339.18 585.794L351.578 584.981L354.12 586.699L355.857 594.181L361.998 591.706L355.857 572.194L359.422 567.565L361.032 568.379L359.917 574.841L362.159 579.813L366.645 580.478L369.807 584.076L371.21 580.26L373.189 581.841L372.2 587.318L377.697 589.69L385.196 588.384L386.035 590.583L391.004 591.122L391.13 586.722L386.909 580.959L403.908 570.682L411.924 570.842L416.202 568.253L418.077 564.197L433.097 556.039L435.754 549.554L443.011 549.978L446.496 545.327L444.161 538.326L439.204 536.699L432.361 528.06L420.515 521.724L416.858 516.465L422.77 511.183L422.033 502.716L418.675 505.81L404.264 502.006L387.3 511.252L358.099 499.313L355.316 490.697L350.647 496.598L339.56 499.164L330.393 492.164L312.843 492.771L306.586 488.841L312.693 483.995L311.612 474.829L303.492 466.809L300.479 459.682L291.209 459.602L279.041 453.358L272.497 444.123Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="전라남도" d="M238.224 616.271L235.165 615.859L225.619 619.64L224.043 615.824L217.81 608.721L222.019 601.239L224.055 605.272L229.127 606.991L239.593 598.1L242.675 598.695L246.781 593.012L245.263 586.677L239.65 582.517L233.601 569.754L227.724 563.899L225.918 549.096L222.456 540.182L212.554 530.764L203.146 532.162L199.04 538.395L191.875 536.791L186.872 538.842L178.764 536.149L178.442 533.709L170.656 532.105L159.707 536.711L152.369 532.529L155.796 526.273L152.197 521.781L153.324 515.503L150.69 509.934L146.113 512.81L143.41 518.871L135.302 516.179L133.277 509.442L123.145 503.828L114.14 508.766L114.439 513.796L109.183 518.195L110.08 521.781L99.1539 527.911L94.197 524.096L89.2515 525.723L90.4821 530.077L82.972 529.126L82.6039 520.2L79.2111 518.573L79.0041 511.447L73.1156 508.709L68.4347 513.509L69.5618 516.649L72.1725 518.39L71.0914 519.353L66.445 518.172L61.0855 529.068L56.7611 531.222L51.9997 541.992L60.89 543.608L58.0838 548.271L64.7314 560.279L69.3433 562.18V565.767L64.1678 571.828L62.6152 565.526L54.4839 564.655L53.4143 566.03L55.8296 569.364L59.7744 571.679L58.7508 574.073L54.2539 575.643L53.3453 578.782L47.8364 580.822L46.8243 586.631L52.4483 590.446L54.9325 588.212L57.6352 581.246L58.7623 588.647L59.6594 600.987L54.2539 608.618L54.2884 613.155L52.4368 618.047L64.6048 623.879L76.4279 634.408L73.1616 634.878L70.4589 632.862L69.5618 636.906L63.2592 627.488L54.0239 623.455L52.4483 629.516L55.151 634.901L58.7623 636.241L61.4651 642.967L57.1867 642.52L50.8726 634.443L47.7213 621.656L43.5465 615.95L37.1289 627.488L40.2572 641.019L44.5586 647.012L46.8128 646.336L50.5736 648.879L51.7697 652.649L54.4724 652.397L57.1752 650.151L63.2592 658.457L61.9251 669.537L66.859 671.015L63.9263 677.74L60.9015 680.8L61.6836 682.908L66.6405 683.584L66.7785 691.535L76.7729 690.321L80.8328 684.042L80.6028 680.674L95.0135 672.825L93.6564 667.44L99.959 665.87L103.375 660.039L102.869 645.877L105.376 643.654L107.182 647.47L106.963 656.441L104.939 665.859L108.09 671.244L116.877 675.277L118.901 671.691L125.204 673.49L127.458 668.998L130.609 669.674L129.885 660.382L133.542 658.904L134.255 656.235L133.082 654.081L136.245 645.442L142.996 643.643L148.183 638.934L155.382 635.348L159.96 636.837L163.939 635.577L167.09 629.069L172.266 627.946L174.29 630.41H181.501L182.18 636.688L180.156 641.844L175.67 642.44L174.52 636.688L169.575 636.917L167.55 644.101L169.103 648.02L165.975 653.978L162.145 653.302L163.272 648.363L161.627 646.714L156.509 663.843L169.115 666.088L171.599 672.596L175.199 677.305L183.307 675.506L186.688 669.228L192.324 665.641L193.221 661.597L188.494 658.973L189.172 655.994L196.832 656.67L199.753 658.469L202.824 655.88L201.329 647.023L188.379 634.397L188.724 630.203L191.875 627.064L189.621 624.372L194.348 619.88L190.944 617.509L192.542 616.294H200.65L206.056 614.278L206.504 610.015L209.207 612.032L210.104 621.003L214.348 624.177L216.407 630.203L212.807 636.711L210.817 644.8L213.025 649.28L216.694 649.223L221.352 651.961L222.249 647.47L221.122 643.654L223.595 635.806L227.425 632.438L232.336 636.998L238.684 634.019L239.363 629.081L242.066 625.265L243.871 619.204L241.629 615.836L238.247 616.283L238.224 616.271ZM145.871 561.275L143.617 563.968L142.938 567.554C141.604 568.883 135.727 571.816 135.727 571.816H131.449L128.516 569.8C126.779 570.59 121.305 571.816 121.305 571.816L118.372 573.833L110.494 572.939L110.275 569.8L111.563 568.562L107.124 564.415L95.1861 563.074L97.0492 558.995L96.9917 554.767L100.373 553.198L98.5674 548.707C99.8555 548.328 105.997 546.908 105.997 546.908V544.215L110.505 541.523H113.887V545.109L116.589 546.461L117.602 545.349L134.163 542.646L138.671 548.707V552.293L142.559 555.146L145.883 558.571V561.264L145.871 561.275Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-miterlimit="10"/>
-<path id="광주광역시" d="M98.5788 548.707C99.8669 548.329 106.008 546.908 106.008 546.908V544.215L110.517 541.523H113.898V545.109L116.601 546.461L117.613 545.35L134.174 542.646L138.683 548.707V552.293L142.57 555.146L145.894 558.572V561.264L143.64 563.957L142.961 567.543C141.627 568.872 135.762 571.805 135.762 571.805H131.483L128.55 569.789C126.814 570.579 121.339 571.805 121.339 571.805L118.407 573.822L110.528 572.928L110.31 569.789L111.598 568.551L107.159 564.403L95.2205 563.063L97.0836 558.984L97.0261 554.756L100.407 553.187L98.6018 548.695L98.5788 548.707Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="제주특별자치도" d="M50.8266 732.613L44.9726 734.641H36.1858L33.2646 738.009L20.1994 742.718L14.794 748.321L1.49878 759.091L3.75298 772.107L17.0482 783.095L21.5451 778.615L45.1911 778.844L50.8266 781.983L64.1103 779.062L69.2973 776.151L84.3866 775.693L91.8163 772.336L95.1976 771.878L99.9245 763.353L109.16 754.165L108.481 740.026L96.0947 730.379L83.248 729.027L77.854 730.597L65.2374 730.826L50.8266 732.613Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/dm/public/next.svg b/apps/dm/public/next.svg
deleted file mode 100644
index 5174b28c5..000000000
--- a/apps/dm/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/apps/dm/public/vercel.svg b/apps/dm/public/vercel.svg
deleted file mode 100644
index 770539603..000000000
--- a/apps/dm/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/apps/dm/public/window.svg b/apps/dm/public/window.svg
deleted file mode 100644
index b2b2a44f6..000000000
--- a/apps/dm/public/window.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
diff --git a/apps/dm/src/entities/content/api/contents-service.ts b/apps/dm/src/entities/content/api/contents-service.ts
new file mode 100644
index 000000000..292d9b795
--- /dev/null
+++ b/apps/dm/src/entities/content/api/contents-service.ts
@@ -0,0 +1,101 @@
+import { client } from "@/src/shared/api";
+import { ENDPOINT } from "@/src/shared/config";
+import type {
+  ContentsService,
+  ContentsParams,
+  ContentsList,
+  ContentsFormData,
+  ContentsVersionParams,
+  ContentsVersionList,
+  ContentsDetail,
+} from "../model/contents-interface";
+
+export class ContentsApiService implements ContentsService {
+  public async getContentsList(params: ContentsParams): Promise<ContentsList> {
+    const response = await client.get<ContentsList>(
+      `${ENDPOINT.CMS_SERVICE.CONTENTS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  public async getLatestApprovedContentsInfo(
+    contsSn: number,
+    menuCd: string,
+  ): Promise<ContentsDetail> {
+    const response = await client.get<ContentsDetail>(
+      `${ENDPOINT.CMS_SERVICE.CONTENTS}/${contsSn}`,
+      { params: { menuCd } },
+    );
+    return response.data;
+  }
+
+  public async getContentsVersionList(
+    params: ContentsVersionParams,
+  ): Promise<ContentsVersionList> {
+    const response = await client.get<ContentsVersionList>(
+      `${ENDPOINT.CMS_SERVICE.CONTENTS_DETAILS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  public async getLatestContentsInfo(
+    contsSn: number,
+    contsVer: number,
+  ): Promise<ContentsDetail> {
+    const response = await client.get<ContentsDetail>(
+      `${ENDPOINT.CMS_SERVICE.CONTENTS_DETAILS}/${contsSn}/${contsVer}`,
+    );
+    return response.data;
+  }
+
+  public async createContents(data: ContentsFormData): Promise<void> {
+    const response = await client.post<void>(
+      `${ENDPOINT.CMS_SERVICE.CONTENTS_DETAILS}`,
+      data,
+    );
+    return response.data;
+  }
+
+  public async updateContents(
+    contsSn: number,
+    contsVer: number,
+    data: ContentsFormData,
+  ): Promise<void> {
+    const response = await client.put<void>(
+      `${ENDPOINT.CMS_SERVICE.CONTENTS_DETAILS}/${contsSn}/${contsVer}`,
+      data,
+    );
+    return response.data;
+  }
+
+  public async deleteContents(
+    contsSn: number,
+    contsVer: number,
+  ): Promise<void> {
+    await client.delete(
+      `${ENDPOINT.CMS_SERVICE.CONTENTS_DETAILS}/${contsSn}/${contsVer}`,
+    );
+  }
+
+  public async requestApprove(
+    contsSn: number,
+    contsVer: number,
+  ): Promise<void> {
+    await client.put(
+      `${ENDPOINT.CMS_SERVICE.CONTENTS_DETAILS}/${contsSn}/${contsVer}/approveRequest`,
+    );
+  }
+
+  public async approveContents(
+    contsSn: number,
+    contsVer: number,
+  ): Promise<void> {
+    await client.put(
+      `${ENDPOINT.CMS_SERVICE.CONTENTS_DETAILS}/${contsSn}/${contsVer}/approve`,
+    );
+  }
+}
+
+export const ContentsApi = new ContentsApiService();
diff --git a/apps/dm/src/entities/content/index.ts b/apps/dm/src/entities/content/index.ts
new file mode 100644
index 000000000..2446dd716
--- /dev/null
+++ b/apps/dm/src/entities/content/index.ts
@@ -0,0 +1,8 @@
+export { ContentsApi } from "./api/contents-service";
+export {
+  CONTENTS_APPROVE_STATUS,
+  contentsFormSchema,
+  type Contents,
+  type ContentsParams,
+  type ContentsFormData,
+} from "./model/contents-interface";
diff --git a/apps/dm/src/entities/content/model/api-interface.ts b/apps/dm/src/entities/content/model/api-interface.ts
new file mode 100644
index 000000000..8218bfb0d
--- /dev/null
+++ b/apps/dm/src/entities/content/model/api-interface.ts
@@ -0,0 +1,34 @@
+interface SortConfig {
+  empty: boolean;
+  sorted: boolean;
+  unsorted: boolean;
+}
+
+interface PageableConfig {
+  sort: SortConfig;
+  offset: number;
+  pageNumber: number;
+  pageSize: number;
+  paged: boolean;
+  unpaged: boolean;
+}
+
+export interface PageableList<T> {
+  content: T[];
+  pageable: PageableConfig;
+  sort: SortConfig;
+  totalPages: number;
+  totalElements: number;
+  number: number;
+  numberOfElements: number;
+  size: number;
+  first: boolean;
+  last: boolean;
+  empty: boolean;
+}
+
+export interface PageableParams {
+  page?: number;
+  size?: number;
+  sort?: string;
+}
diff --git a/apps/dm/src/entities/content/model/contents-interface.ts b/apps/dm/src/entities/content/model/contents-interface.ts
new file mode 100644
index 000000000..474dfe97c
--- /dev/null
+++ b/apps/dm/src/entities/content/model/contents-interface.ts
@@ -0,0 +1,105 @@
+import { z } from "zod";
+import type { PageableList, PageableParams } from "./api-interface";
+
+export const CONTENTS_APPROVE_STATUS = {
+  DRAFT: "01",
+  REQUESTED: "02",
+  APPROVED: "99",
+} as const;
+
+export type ContentsApproveStatus =
+  (typeof CONTENTS_APPROVE_STATUS)[keyof typeof CONTENTS_APPROVE_STATUS];
+
+export interface ContentsParams extends PageableParams {
+  contsTtl?: string;
+  aprvContsVer?: number;
+  useYn?: string;
+}
+
+export interface ContentsVersionParams extends PageableParams {
+  contsSn?: number;
+  contsCn?: string;
+  aprvCd?: ContentsApproveStatus;
+  cclCd?: string;
+  koglCd?: string;
+  tag?: string;
+  useYn?: string;
+}
+
+export interface ContentsVersion {
+  contsSn: number;
+  contsVer: number;
+  contsCn: string;
+  useYn: string;
+}
+
+export const contentsSchema = z.object({
+  contsSn: z.number(),
+  contsTtl: z.string(),
+  aprvContsVer: z.number(),
+  useYn: z.string(),
+  mdfcnDt: z.string(),
+  mdfr: z.string(),
+  mdfrNm: z.string(),
+  aprvDt: z.string(),
+  autzrNm: z.string(),
+  workAprvCd: z.string(),
+  workAprvNm: z.string(),
+  workContsVer: z.number(),
+});
+
+export const contentsDetailSchema = z.object({
+  contsSn: z.number(),
+  contsVer: z.number(),
+  contsTtl: z.string(),
+  contsCn: z.string(),
+  contsRmrk: z.string().nullish(),
+  aprvCd: z.enum([
+    CONTENTS_APPROVE_STATUS.DRAFT,
+    CONTENTS_APPROVE_STATUS.REQUESTED,
+    CONTENTS_APPROVE_STATUS.APPROVED,
+  ]),
+  cclCd: z.string().nullish(),
+  koglCd: z.string().nullish(),
+  tag: z.string().nullish(),
+  aprvDt: z.string(),
+  autzr: z.string(),
+  useYn: z.string(),
+  menuPicUserUnqIdNm: z.string().nullish(),
+});
+
+export const contentsFormSchema = contentsDetailSchema.omit({
+  contsVer: true,
+  aprvDt: true,
+  autzr: true,
+});
+
+export type Contents = z.infer<typeof contentsSchema>;
+export type ContentsDetail = z.infer<typeof contentsDetailSchema>;
+export type ContentsFormData = z.infer<typeof contentsFormSchema>;
+export type ContentsList = PageableList<Contents>;
+export type ContentsVersionList = PageableList<ContentsVersion>;
+
+export interface ContentsService {
+  getContentsList(params: ContentsParams): Promise<ContentsList>;
+  getLatestApprovedContentsInfo(
+    contsSn: number,
+    menuCd: string,
+  ): Promise<ContentsDetail>;
+  getContentsVersionList(
+    params: ContentsVersionParams,
+  ): Promise<ContentsVersionList>;
+  getLatestContentsInfo(
+    contsSn: number,
+    contsVer: number,
+  ): Promise<ContentsDetail>;
+  createContents(data: ContentsFormData): Promise<void>;
+  updateContents(
+    contsSn: number,
+    contsVer: number,
+    data: ContentsFormData,
+  ): Promise<void>;
+  deleteContents(contsSn: number, contsVer: number): Promise<void>;
+  requestApprove(contsSn: number, contsVer: number): Promise<void>;
+  approveContents(contsSn: number, contsVer: number): Promise<void>;
+}
diff --git a/apps/dm/src/shared/lib/index.ts b/apps/dm/src/shared/lib/index.ts
index a5679f1b5..c9cff1a80 100644
--- a/apps/dm/src/shared/lib/index.ts
+++ b/apps/dm/src/shared/lib/index.ts
@@ -2,7 +2,7 @@ export { getCookie, setCookie, removeCookie } from "./cookie";
 // export { useMutationWrapper } from "./use-mutation-wrapper";
 // export { useAlertStore } from "./use-alert-store";
 // export { useDataTable } from "./use-data-table";
-// export { useMenuStore } from "./use-menu-store";
+export { useMenuStore } from "./use-menu-store";
 // export { useUserStore } from "./use-user-store";
 // export { usePrompt } from "./use-prompt";
 // export { useSelectPrompt } from "./use-select-prompt";
diff --git a/apps/dm_new/src/shared/lib/use-menu-store.ts b/apps/dm/src/shared/lib/use-menu-store.ts
similarity index 100%
rename from apps/dm_new/src/shared/lib/use-menu-store.ts
rename to apps/dm/src/shared/lib/use-menu-store.ts
diff --git a/apps/dm_new/src/shared/providers/index.ts b/apps/dm/src/shared/providers/index.ts
similarity index 100%
rename from apps/dm_new/src/shared/providers/index.ts
rename to apps/dm/src/shared/providers/index.ts
diff --git a/apps/dm_new/src/shared/providers/prompt-provider.tsx b/apps/dm/src/shared/providers/prompt-provider.tsx
similarity index 100%
rename from apps/dm_new/src/shared/providers/prompt-provider.tsx
rename to apps/dm/src/shared/providers/prompt-provider.tsx
diff --git a/apps/dm_new/src/shared/providers/store-provider.tsx b/apps/dm/src/shared/providers/store-provider.tsx
similarity index 100%
rename from apps/dm_new/src/shared/providers/store-provider.tsx
rename to apps/dm/src/shared/providers/store-provider.tsx
diff --git a/apps/dm_new/src/shared/store/alert-store.ts b/apps/dm/src/shared/store/alert-store.ts
similarity index 100%
rename from apps/dm_new/src/shared/store/alert-store.ts
rename to apps/dm/src/shared/store/alert-store.ts
diff --git a/apps/dm_new/src/shared/store/attachment-store.ts b/apps/dm/src/shared/store/attachment-store.ts
similarity index 100%
rename from apps/dm_new/src/shared/store/attachment-store.ts
rename to apps/dm/src/shared/store/attachment-store.ts
diff --git a/apps/dm_new/src/shared/store/index.ts b/apps/dm/src/shared/store/index.ts
similarity index 100%
rename from apps/dm_new/src/shared/store/index.ts
rename to apps/dm/src/shared/store/index.ts
diff --git a/apps/dm_new/src/shared/store/menu-store.ts b/apps/dm/src/shared/store/menu-store.ts
similarity index 100%
rename from apps/dm_new/src/shared/store/menu-store.ts
rename to apps/dm/src/shared/store/menu-store.ts
diff --git a/apps/dm_new/src/shared/store/user-store.ts b/apps/dm/src/shared/store/user-store.ts
similarity index 100%
rename from apps/dm_new/src/shared/store/user-store.ts
rename to apps/dm/src/shared/store/user-store.ts
diff --git a/apps/dm/tsconfig.json b/apps/dm/tsconfig.json
index 493584782..ba8cd2c2f 100644
--- a/apps/dm/tsconfig.json
+++ b/apps/dm/tsconfig.json
@@ -40,6 +40,7 @@
   "include": [
     ".eslintrc.*",
     "next-env.d.ts",
+    "**/*.d.ts",
     "**/*.ts",
     "**/*.tsx",
     "**/*.mts",
diff --git a/apps/dm_new/types/style.d.ts b/apps/dm/types/style.d.ts
similarity index 100%
rename from apps/dm_new/types/style.d.ts
rename to apps/dm/types/style.d.ts
diff --git a/apps/dm_new/.env.local b/apps/dm_new/.env.local
deleted file mode 100644
index 58001643c..000000000
--- a/apps/dm_new/.env.local
+++ /dev/null
@@ -1,26 +0,0 @@
-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_PROXY_HOST = http://localhost:3005
-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
-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_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_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
-NEXT_PRIVATE_WR_ADDRESS_KEY = devU01TX0FVVEgyMDI1MDgyNTEwMzkwNDExNjEwNTM=
diff --git a/apps/dm_new/.env.mindone b/apps/dm_new/.env.mindone
deleted file mode 100644
index 9a5005d2b..000000000
--- a/apps/dm_new/.env.mindone
+++ /dev/null
@@ -1,26 +0,0 @@
-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_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
-NEXT_PRIVATE_WR_ADDRESS_KEY = devU01TX0FVVEgyMDI1MDgyNTEwMzkwNDExNjEwNTM=
diff --git a/apps/dm_new/.env.production b/apps/dm_new/.env.production
deleted file mode 100644
index b413d1312..000000000
--- a/apps/dm_new/.env.production
+++ /dev/null
@@ -1,24 +0,0 @@
-# 공단 운영
-NEXT_PUBLIC_SITE_ID = DN
-NEXT_PUBLIC_PORT = 3000
-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 = 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_CS_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_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_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_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
-NEXT_PRIVATE_WR_ADDRESS_KEY = U01TXOFVVEgyMDI1MDgyODE0MTAxNzExNjEyMjA=
diff --git a/apps/dm_new/app/(landing)/reuse/business/layout.tsx b/apps/dm_new/app/(landing)/reuse/business/layout.tsx
deleted file mode 100644
index dc62f77cc..000000000
--- a/apps/dm_new/app/(landing)/reuse/business/layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/layout.tsx
-
-import type { ReactNode } from "react";
-import Lnb from "../_components/Lnb";
-import { LNB_BUSINESS } from "../_constants/lnb";
-
-export default function BusinessLayout({ children }: { children: ReactNode }) {
-  return (
-    <div className="flex gap-0">
-      <Lnb title="사례" items={LNB_BUSINESS} />
-      <main className="flex-1 px-[100px] pt-[80px]">
-        {children}
-      </main>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/apps/dm_new/app/(with-layout)/apply/dmdco/page.tsx b/apps/dm_new/app/(with-layout)/apply/dmdco/page.tsx
deleted file mode 100644
index 9422cd1ce..000000000
--- a/apps/dm_new/app/(with-layout)/apply/dmdco/page.tsx
+++ /dev/null
@@ -1,577 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
-import SubPageHeader from "@/components/SubPageHeader";
-import PostcodeModal from "@/components/PostcodeModal";
-import type { AddrItem } from "@/app/store/sdmMng/postcode-service";
-import { useDmStore } from "@/app/store";
-import { fetchType, getFetch, postFetch, putFetch } from "@/components/ui/api";
-import { getCookie } from "@common/components/lib";
-
-type Option = { value: string; label: string };
-
-type SessionUser = {
-  dmdInfoId?: string;
-  dmdCoNm?: string;
-  zip?: string;
-  daddr?: string;
-  telno?: string;
-  ctpvCd?: string;
-  sggCd?: string;
-  rgtr?: string;
-  [key: string]: unknown;
-};
-
-const TOKEN_ID_COOKIE = "token-id";
-const FALLBACK_UUID = "c475824c-0e82-4a06-a282-2b55a20df265";
-const normalizeRegionName = (value: string) => value.replace(/\s+/g, "").trim();
-const isSameRegionName = (left: string, right: string) => {
-  const a = normalizeRegionName(left);
-  const b = normalizeRegionName(right);
-  return Boolean(a && b && (a === b || a.includes(b) || b.includes(a)));
-};
-const formatKoreanPhoneNumber = (value: string) => {
-  const digits = value.replace(/\D/g, "").slice(0, 11); // 숫자만 추출하고 최대 11자리까지만 사용
-  if (!digits) return ""; // 입력이 비어 있으면 빈 문자열 반환
-
-  if (/^1\d{0,7}$/.test(digits)) { // 15xx/16xx/18xx 같은 대표번호 패턴
-    if (digits.length <= 4) return digits; // 아직 뒷자리가 부족하면 원문 유지
-    return `${digits.slice(0, 4)}-${digits.slice(4, 8)}`; // xxxx-xxxx
-  }
-
-  if (digits.startsWith("02")) { // 서울 지역번호(02)
-    const rest = digits.slice(2); // 국번/가입자번호 구간
-    if (!rest) return "02"; // 02만 입력된 상태
-    if (rest.length <= 3) return `02-${rest}`; // 02-xxx
-    if (rest.length <= 7) return `02-${rest.slice(0, 3)}-${rest.slice(3)}`; // 02-xxx-xxxx
-    return `02-${rest.slice(0, 4)}-${rest.slice(4, 8)}`; // 02-xxxx-xxxx
-  }
-
-  if (digits.startsWith("0")) { // 02 제외 일반 지역번호/휴대폰(010 포함)
-    const area = digits.slice(0, 3); // 앞 3자리 식별자
-    const rest = digits.slice(3); // 나머지 번호
-    if (!rest) return area; // 식별자만 입력된 상태
-    if (rest.length <= 3) return `${area}-${rest}`; // 0xx-xxx
-    if (rest.length <= 7) return `${area}-${rest.slice(0, 3)}-${rest.slice(3)}`; // 0xx-xxx-xxxx
-    return `${area}-${rest.slice(0, 4)}-${rest.slice(4, 8)}`; // 0xx-xxxx-xxxx
-  }
-
-  if (digits.length <= 4) return digits; // 예외 입력: 앞 4자리까지
-  if (digits.length <= 8) return `${digits.slice(0, 4)}-${digits.slice(4)}`; // xxxx-xxxx
-  return `${digits.slice(0, 4)}-${digits.slice(4, 8)}-${digits.slice(8, 11)}`; // xxxx-xxxx-xxx
-};
-
-function Divider() {
-  return <div className="h-px w-full bg-neutral-200" />;
-}
-
-function FormRow({
-  label,
-  required,
-  children,
-}: {
-  label: ReactNode;
-  required?: boolean;
-  children: ReactNode;
-}) {
-  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">
-        <div className="flex items-center gap-1 text-lg font-semibold text-neutral-800">
-          <span>{label}</span>
-          {required ? <span className="text-red-500">*</span> : null}
-        </div>
-      </div>
-
-      <div className="col-span-12 lg:col-span-10 px-6 py-6">{children}</div>
-    </div>
-  );
-}
-
-function TextInput({
-  value,
-  onChange,
-  placeholder,
-  type = "text",
-  disabled,
-  inputRef,
-  className = "",
-}: {
-  value: string;
-  onChange: (v: string) => void;
-  placeholder?: string;
-  type?: string;
-  disabled?: boolean;
-  inputRef?: RefObject<HTMLInputElement | null>;
-  className?: string;
-}) {
-  return (
-    <input
-      ref={inputRef}
-      type={type}
-      value={value}
-      disabled={disabled}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={placeholder}
-      className={[
-        "h-11 w-full rounded border border-neutral-300 bg-white px-3 text-sm text-neutral-800",
-        "placeholder:text-neutral-400 focus:border-neutral-400 focus:outline-none",
-        disabled ? "bg-neutral-100 text-neutral-400" : "",
-        className,
-      ].join(" ")}
-    />
-  );
-}
-
-function SelectBox({
-  value,
-  onChange,
-  options,
-  className = "",
-}: {
-  value: string;
-  onChange: (v: string) => void;
-  options: Option[];
-  className?: string;
-}) {
-  return (
-    <select
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      className={[
-        "h-11 w-[220px] rounded border border-neutral-300 bg-white px-3 text-sm text-neutral-800",
-        "focus:border-neutral-400 focus:outline-none",
-        className,
-      ].join(" ")}
-    >
-      {options.map((o) => (
-        <option key={o.value} value={o.value}>
-          {o.label}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-export default function DemandPlaceRegisterPage() {
-  const { Common, initializeCommonData } = useDmStore((state) => state);
-  const { selectSidoData, selectSigunData } = Common;
-
-  const [editMode, setEditMode] = useState(false);
-  const [sessionUser, setSessionUser] = useState<SessionUser | null>(null);
-
-  const [sido, setSido] = useState("");
-  const [sigungu, setSigungu] = useState("");
-
-  const [company, setCompany] = useState("");
-  const [bizNo, setBizNo] = useState("");
-  const [workerNo, setWorkerNo] = useState("");
-  const [noWorkerNo, setNoWorkerNo] = useState(false);
-
-  const [zip, setZip] = useState("");
-  const [addr1, setAddr1] = useState("");
-  const [addr2, setAddr2] = useState("");
-  const [isPostcodeModalOpen, setIsPostcodeModalOpen] = useState(false);
-  const [focusDetailAddrOnClose, setFocusDetailAddrOnClose] = useState(false);
-  const detailAddrRef = useRef<HTMLInputElement | null>(null);
-
-  const [tel, setTel] = useState("");
-  const [pw, setPw] = useState("");
-  const [pw2, setPw2] = useState("");
-
-  useEffect(() => {
-    initializeCommonData();
-  }, [initializeCommonData]);
-
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-
-    const rawUser = sessionStorage.getItem("user");
-    if (!rawUser) {
-      setEditMode(false);
-      setSessionUser(null);
-      return;
-    }
-
-    try {
-      const user = JSON.parse(rawUser) as SessionUser;
-      setSessionUser(user);
-      setEditMode(true);
-
-      const fullId = String(user.dmdInfoId ?? "").trim();
-      const bizDigits = fullId.slice(0, 10);
-      const workerDigits = fullId.slice(10, 14);
-
-      setBizNo(bizDigits);
-      if (workerDigits && workerDigits !== "0000") {
-        setNoWorkerNo(false);
-        setWorkerNo(workerDigits);
-      } else {
-        setNoWorkerNo(true);
-        setWorkerNo("");
-      }
-
-      setCompany(String(user.dmdCoNm ?? ""));
-      setZip(String(user.zip ?? ""));
-      setAddr1(String(user.daddr ?? ""));
-      setAddr2("");
-      setTel(formatKoreanPhoneNumber(String(user.telno ?? "")));
-      setSido(String(user.ctpvCd ?? ""));
-      setSigungu(String(user.sggCd ?? ""));
-    } catch {
-      setEditMode(false);
-      setSessionUser(null);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!focusDetailAddrOnClose || isPostcodeModalOpen) return;
-
-    if (!addr1.trim()) {
-      setFocusDetailAddrOnClose(false);
-      return;
-    }
-
-    const timer = setTimeout(() => {
-      detailAddrRef.current?.focus();
-      setFocusDetailAddrOnClose(false);
-    }, 0);
-
-    return () => clearTimeout(timer);
-  }, [addr1, focusDetailAddrOnClose, isPostcodeModalOpen]);
-
-  const sidoOptions = useMemo<Option[]>(() => {
-    const mapped = selectSidoData
-      .filter((item) => item.val !== "0")
-      .map((item) => ({ value: item.val, label: item.text }));
-
-    return [{ value: "", label: "선택" }, ...mapped];
-  }, [selectSidoData]);
-
-  const sigunguOptions = useMemo<Option[]>(() => {
-    if (!sido) return [{ value: "", label: "선택" }];
-
-    const mapped = selectSigunData
-      .filter((item) => item.val.substring(0, 2) === sido)
-      .map((item) => ({ value: item.val, label: item.text }));
-
-    return [{ value: "", label: "선택" }, ...mapped];
-  }, [sido, selectSigunData]);
-
-  const formatBusinessNumber = (value: string) => {
-    const digitsOnly = value.replace(/\D/g, "").slice(0, 10);
-    if (digitsOnly.length <= 3) return digitsOnly;
-    if (digitsOnly.length <= 5) {
-      return `${digitsOnly.slice(0, 3)}-${digitsOnly.slice(3)}`;
-    }
-    return `${digitsOnly.slice(0, 3)}-${digitsOnly.slice(3, 5)}-${digitsOnly.slice(5)}`;
-  };
-
-  const checkDuplicate = async (fullDmdInfoId: string) => {
-    try {
-      const res = await getFetch(fetchType.WR, `/reuseFc/request/${fullDmdInfoId}`);
-      const responseData = (res?.data ?? res) as { dmdInfoId?: string } | undefined;
-      return Boolean(responseData?.dmdInfoId);
-    } catch {
-      return false;
-    }
-  };
-
-  const onSubmit = async () => {
-    const bizDigits = bizNo.replace(/\D/g, "").slice(0, 10);
-    const workerDigits = workerNo.replace(/\D/g, "").slice(0, 4);
-    const telDigits = tel.replace(/\D/g, "");
-    const password = pw.trim();
-    const passwordConfirm = pw2.trim();
-
-    if (!sido || sido === "0") return alert("시도/시군구를 선택해 주세요.");
-    if (!sigungu || sigungu === "0") return alert("시도/시군구를 선택해 주세요.");
-    if (!company.trim()) return alert("회사명을 입력해 주세요.");
-    if (company.trim().length > 20) return alert("회사명은 20자 이내로 입력해주세요.");
-
-    if (!bizDigits) return alert("사업자등록번호를 입력해 주세요.");
-    if (!/^\d{10}$/.test(bizDigits)) {
-      return alert("사업자등록번호는 10자리 숫자만 입력 가능합니다.");
-    }
-
-    if (!noWorkerNo) {
-      if (!workerDigits) return alert("종사업자등록번호를 입력해 주세요.");
-      if (!/^\d{4}$/.test(workerDigits)) {
-        return alert("종사업자등록번호는 4자리 숫자만 입력 가능합니다.");
-      }
-    }
-
-    const mergedAddress = [addr1.trim(), addr2.trim()].filter(Boolean).join(" ");
-    if (!mergedAddress) return alert("사업자주소를 입력해 주세요.");
-    if (mergedAddress.length > 40) return alert("주소는 40자 이내로 입력해주세요.");
-
-    if (!telDigits) return alert("전화번호를 입력해 주세요.");
-    if (!/^\d{8,11}$/.test(telDigits)) {
-      return alert("전화번호는 8~11자리 숫자만 입력 가능합니다.");
-    }
-
-    if (!editMode) {
-      if (!password) return alert("비밀번호를 입력해 주세요.");
-      if (password.length < 8 || password.length > 16) {
-        return alert("비밀번호는 8자 이상 16자 이내로 입력해주세요.");
-      }
-      if (!passwordConfirm) return alert("비밀번호 확인을 입력해 주세요.");
-      if (password !== passwordConfirm) return alert("비밀번호가 일치하지 않습니다.");
-    } else if ((password || passwordConfirm) && password !== passwordConfirm) {
-      return alert("비밀번호가 일치하지 않습니다.");
-    }
-
-    const fullDmdInfoId = bizDigits + (noWorkerNo ? "0000" : workerDigits);
-
-    if (!editMode) {
-      const isDuplicate = await checkDuplicate(fullDmdInfoId);
-      if (isDuplicate) return alert("이미 등록된 사업자등록번호입니다.");
-    }
-
-    const myUUID = getCookie(TOKEN_ID_COOKIE) || FALLBACK_UUID;
-
-    const payload: Record<string, unknown> = {
-      ctpvCd: sido,
-      sggCd: sigungu,
-      dmdCoNm: company.trim(),
-      dmdInfoId: fullDmdInfoId,
-      bzmnNo: bizDigits,
-      zip: zip.trim(),
-      daddr: mergedAddress,
-      telno: telDigits,
-      rgtr: (sessionUser?.rgtr as string) || myUUID,
-    };
-
-    if (password) {
-      payload.dmdAplyPswd = password;
-    }
-
-    try {
-      if (editMode) {
-        payload.mdfr = myUUID;
-        await putFetch("/reuseFc/request", payload);
-
-        if (typeof window !== "undefined") {
-          const nextSessionUser = {
-            ...(sessionUser ?? {}),
-            ...payload,
-          };
-          delete nextSessionUser.dmdAplyPswd;
-          sessionStorage.setItem("user", JSON.stringify(nextSessionUser));
-        }
-
-        alert("수요처 수정 완료!");
-      } else {
-        await postFetch("/reuseFc/request", payload);
-        alert("수요처 등록 완료!");
-      }
-
-      setPw("");
-      setPw2("");
-    } catch (error) {
-      console.error("Failed to submit demand place", error);
-      alert(editMode ? "수요처 수정에 실패하였습니다." : "수요처 등록에 실패하였습니다.");
-    }
-  };
-
-  const handleSelectAddress = (item: AddrItem) => {
-    setZip(item.zipNo);
-    setAddr1(item.roadAddr);
-    setFocusDetailAddrOnClose(true);
-    const matchedSido = selectSidoData.find(
-      (region) =>
-        region.val !== "0" &&
-        isSameRegionName(region.text ?? "", item.ctpvNm ?? ""),
-    );
-
-    if (matchedSido) {
-      setSido(matchedSido.val);
-      const matchedSigungu = selectSigunData.find(
-        (region) =>
-          region.val !== "0" &&
-          region.val.startsWith(matchedSido.val) &&
-          isSameRegionName(region.text ?? "", item.sggNm ?? ""),
-      );
-      setSigungu(matchedSigungu?.val ?? "");
-    }
-
-    setIsPostcodeModalOpen(false);
-  };
-
-  const pageTitle = editMode ? "수요처수정" : "수요처등록";
-
-  return (
-    <main className="bg-white">
-      <SubPageHeader
-        title={pageTitle}
-        crumbs={[
-          { label: "Home", href: "/reuse" },
-          { label: "수요신청", href: "/reuse/apply" },
-          { label: pageTitle },
-        ]}
-      />
-
-      <div className="border border-neutral-200 bg-white">
-        <FormRow label="시도" required>
-          <SelectBox
-            value={sido}
-            onChange={(v) => {
-              setSido(v);
-              setSigungu("");
-            }}
-            options={sidoOptions}
-          />
-        </FormRow>
-
-        <Divider />
-
-        <FormRow label="시군구" required>
-          <select
-            value={sigungu}
-            onChange={(e) => setSigungu(e.target.value)}
-            className="h-11 w-[220px] rounded border border-neutral-300 bg-white px-3 text-sm text-neutral-800 focus:border-neutral-400 focus:outline-none"
-          >
-            {sigunguOptions.map((o) => (
-              <option key={o.value} value={o.value}>
-                {o.label}
-              </option>
-            ))}
-          </select>
-        </FormRow>
-
-        <Divider />
-
-        <FormRow label="회사명" required>
-          <div className="max-w-[420px]">
-            <TextInput
-              value={company}
-              onChange={setCompany}
-              placeholder="회사명을 입력해주세요."
-            />
-          </div>
-        </FormRow>
-
-        <Divider />
-
-        <FormRow label="사업자등록번호" required>
-          <div className="max-w-[420px]">
-            <TextInput
-              value={formatBusinessNumber(bizNo)}
-              onChange={(v) => setBizNo(v.replace(/\D/g, "").slice(0, 10))}
-              placeholder="사업자 등록번호를 입력해주세요."
-            />
-          </div>
-        </FormRow>
-
-        <Divider />
-
-        <FormRow label="종사자등록번호">
-          <div className="flex flex-wrap items-center gap-4">
-            <div className="w-[420px] max-w-full">
-              <TextInput
-                value={workerNo}
-                onChange={(v) => setWorkerNo(v.replace(/\D/g, "").slice(0, 4))}
-                placeholder="종사자등록번호를 입력해주세요."
-                disabled={noWorkerNo}
-              />
-            </div>
-
-            <label className="flex items-center gap-2 text-sm text-neutral-700">
-              <input
-                type="checkbox"
-                checked={noWorkerNo}
-                onChange={(e) => {
-                  setNoWorkerNo(e.target.checked);
-                  if (e.target.checked) setWorkerNo("");
-                }}
-                className="h-4 w-4 rounded border-neutral-300"
-              />
-              해당없음
-            </label>
-          </div>
-        </FormRow>
-
-        <Divider />
-
-        <FormRow label="사업자주소" required>
-          <div className="max-w-[420px] space-y-2">
-            <div className="flex gap-2">
-              <div className="w-[180px]">
-                <TextInput value={zip} onChange={setZip} placeholder="우편번호" />
-              </div>
-              <button
-                type="button"
-                onClick={() => setIsPostcodeModalOpen(true)}
-                className="h-11 rounded bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
-              >
-                우편번호 검색
-              </button>
-            </div>
-
-            <TextInput value={addr1} onChange={setAddr1} placeholder="주소" />
-            <TextInput
-              value={addr2}
-              onChange={setAddr2}
-              placeholder="상세 주소를 입력하세요."
-              inputRef={detailAddrRef}
-            />
-          </div>
-        </FormRow>
-
-        <Divider />
-
-        <FormRow label="전화번호" required>
-          <div className="max-w-[420px]">
-            <TextInput
-              value={tel}
-              onChange={(v) => setTel(formatKoreanPhoneNumber(v))}
-              placeholder="전화번호를 입력하세요."
-            />
-          </div>
-        </FormRow>
-
-        <Divider />
-
-        <FormRow label="비밀번호" required={!editMode}>
-          <div className="max-w-[420px]">
-            <TextInput
-              value={pw}
-              onChange={setPw}
-              placeholder="비밀번호를 입력하세요."
-              type="password"
-            />
-          </div>
-        </FormRow>
-
-        <Divider />
-
-        <FormRow label="비밀번호 확인" required={!editMode}>
-          <div className="max-w-[420px]">
-            <TextInput
-              value={pw2}
-              onChange={setPw2}
-              placeholder="비밀번호를 한번 더 입력하세요."
-              type="password"
-            />
-          </div>
-        </FormRow>
-      </div>
-
-      <div className="flex justify-center py-12">
-        <button
-          type="button"
-          onClick={onSubmit}
-          className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
-        >
-          {editMode ? "수요처 수정" : "수요처 등록"}
-        </button>
-      </div>
-
-      <PostcodeModal
-        open={isPostcodeModalOpen}
-        onClose={() => setIsPostcodeModalOpen(false)}
-        onSelect={handleSelectAddress}
-      />
-    </main>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/apply/register/page.tsx b/apps/dm_new/app/(with-layout)/apply/register/page.tsx
deleted file mode 100644
index 3c084bf73..000000000
--- a/apps/dm_new/app/(with-layout)/apply/register/page.tsx
+++ /dev/null
@@ -1,500 +0,0 @@
-// app/(with-layout)/apply/register/page.tsx
-/**
- *  수요정보등록(수정) 화면
- *
- * 🔗 사용 API
- * - 수요정보등록: POST /reuseFc/request/demandInfo
- * - 수요정보조회: GET  /reuseFc/request/' + dmdInfoId - getSdmInfoStatusList
- */
-"use client";
-
-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 };
-
-export default function DemandRegisterPage() {
-  const today = useMemo(() => {
-    const d = new Date();
-    const yyyy = d.getFullYear();
-    const mm = String(d.getMonth() + 1).padStart(2, "0");
-    const dd = String(d.getDate()).padStart(2, "0");
-    return `${yyyy}-${mm}-${dd}`;
-  }, []);
-
-  const [openRef, setOpenRef] = useState(false);
-
-  const [openCand, setOpenCand] = useState(false);
-  const [selectedCands, setSelectedCands] = useState<CandidateSite[]>([]);
-
-  // 기본정보
-  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>("");
-  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("");
-
-  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);
-            }}
-        />
-    </>
-  );
-}
-
-/* ----------------------------- UI helpers ----------------------------- */
-
-function Divider() {
-  return <div className="h-px w-full bg-neutral-200" />;
-}
-
-function LabelCell({
-  children,
-  required,
-}: {
-  children: React.ReactNode;
-  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">
-      <span className="inline-flex items-center gap-1">
-        {children}
-        {required ? <span className="text-red-500">*</span> : null}
-      </span>
-    </div>
-  );
-}
-
-function FormRow({
-  label,
-  required,
-  children,
-}: {
-  label: string;
-  required?: boolean;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="grid grid-cols-12">
-      <LabelCell required={required}>{label}</LabelCell>
-      <div className="col-span-12 md:col-span-10 p-6">{children}</div>
-    </div>
-  );
-}
-
-function QualityRow({
-  leftLabel,
-  leftRequired,
-  leftControl,
-  rightLabel,
-  rightControl,
-}: {
-  leftLabel: React.ReactNode;
-  leftRequired?: boolean;
-  leftControl: React.ReactNode;
-  rightLabel: React.ReactNode;
-  rightControl: React.ReactNode;
-}) {
-  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">
-        <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">
-        <span className="leading-6">{rightLabel}</span>
-      </div>
-
-      {/* 우측 입력 */}
-      <div className="col-span-12 lg:col-span-4 p-6">{rightControl}</div>
-    </div>
-  );
-}
-
-function TextInput({
-  value,
-  onChange,
-  placeholder,
-  disabled,
-  className,
-}: {
-  value: string;
-  onChange: (v: string) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-}) {
-  return (
-    <input
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={placeholder}
-      disabled={disabled}
-      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",
-        disabled ? "cursor-not-allowed" : "",
-        className ?? "",
-      ].join(" ")}
-    />
-  );
-}
-
-function InlineSuffixInput({
-  value,
-  onChange,
-  suffix,
-}: {
-  value: string;
-  onChange: (v: string) => void;
-  suffix: string;
-}) {
-  return (
-    <div className="flex items-center gap-3">
-      <TextInput value={value} onChange={onChange} className="max-w-[200px]" />
-      <span className="text-sm text-neutral-600">{suffix}</span>
-    </div>
-  );
-}
-
-function DateInput({
-  value,
-  onChange,
-}: {
-  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
-        ref={ref}
-        type="date"
-        value={value}
-        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",
-          "[&::-webkit-calendar-picker-indicator]:w-10",
-          "[&::-webkit-calendar-picker-indicator]:h-full",
-          "[&::-webkit-calendar-picker-indicator]:cursor-pointer",
-        ].join(" ")}
-      />
-
-      {/* ✅ 클릭 가능한 아이콘 버튼 */}
-      <button
-        type="button"
-        onClick={openPicker}
-        className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-neutral-500 hover:text-neutral-700"
-        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" />
-        </svg>
-      </button>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/apply/status/page.tsx b/apps/dm_new/app/(with-layout)/apply/status/page.tsx
deleted file mode 100644
index fc9e61134..000000000
--- a/apps/dm_new/app/(with-layout)/apply/status/page.tsx
+++ /dev/null
@@ -1,340 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useRef, useState } from "react";
-import SubPageHeader from "@/components/SubPageHeader";
-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 { getSdmInfoStatusList, Sdm, Common } = useDmStore((state) => state);
-  const { successLogin, sdmInfoStatusList } = Sdm;
-  const { selectSidoData, selectSigunData } = Common;
-
-  const detailRef = useRef<HTMLDivElement | null>(null);
-
-  const [isLoginStorageInfo, setIsLoginStorageInfo] = useState(false);
-  const [selectedDmdInfoSn, setSelectedDmdInfoSn] = useState<number | "" | null>(null);
-  const [transformedSdmInfoStatusList, setTransformedSdmInfoStatusList] = useState<DemandCompBizType[]>([]);
-
-  useEffect(() => {
-    const user = sessionStorage.getItem("user");
-    if (user) {
-      setIsLoginStorageInfo(true);
-    }
-  }, []);
-
-  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]);
-
-  const topFields: TopField[] = useMemo(() => {
-    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]);
-
-  const waterFields: PairField[] = useMemo(() => {
-    if (!selectedSdmInfoStatus) return [];
-
-    return [
-      { label: "총대장균군수(개/100mL)", value: formatBelow(selectedSdmInfoStatus.grssClfg) },
-      { label: "결합잔류염소(mg/L)", value: formatBelow(selectedSdmInfoStatus.combResdch) },
-      { label: "탁도(NTU)", value: formatBelow(selectedSdmInfoStatus.trbt) },
-
-      { label: "생물학적산소요구량(BOD)(mg/L)", value: formatBelow(selectedSdmInfoStatus.blgcOxygDmndQnt) },
-      { label: "냄새", value: formatValue(selectedSdmInfoStatus.smll) },
-      { label: "색도(도)", value: formatBelow(selectedSdmInfoStatus.crmty) },
-
-      { 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: formatBelow(selectedSdmInfoStatus.clIonQnt) },
-      { label: "전기전도도(μS/cm)", value: formatBelow(selectedSdmInfoStatus.cdtnv) },
-      { label: "비고", value: formatValue(selectedSdmInfoStatus.rmrk) },
-    ];
-  }, [selectedSdmInfoStatus]);
-
-  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" });
-    });
-  };
-
-  return (
-    <main className="bg-white">
-      <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 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">
-                {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}>
-          <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>
-
-          {!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>
-
-                {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>
-
-                {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>
-
-                <div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
-                  <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
-                    진행상태
-                  </div>
-                  <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
-                    {formatValue(selectedSdmInfoStatus.status)}
-                  </div>
-                </div>
-                <div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
-                  <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
-                    공급처매칭결과
-                  </div>
-                  <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
-                    {formatValue(selectedSdmInfoStatus.ruseUtztnFcltNm)}
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </section>
-      </div>
-    </main>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/globalCase/australia/page.tsx b/apps/dm_new/app/(with-layout)/example/globalCase/australia/page.tsx
deleted file mode 100644
index 7766aa62f..000000000
--- a/apps/dm_new/app/(with-layout)/example/globalCase/australia/page.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/globalCase/australia/page.tsx
-"use client";
-
-import SubPageHeader from "@/components/SubPageHeader";
-import CaseImageSlider from "@/components/CaseImageSlider";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-// type ImgCardProps = {
-//   src: string;
-//   alt: string;
-// };
-
-// function ImgCard({ src, alt }: ImgCardProps) {
-//   return (
-//     <div className="w-full overflow-x-auto">
-//       <img
-//         src={src}
-//         alt={alt}
-//         className="block mx-auto max-w-none"
-//       />
-//     </div>
-//   );
-// }
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="[호주] 생활 속 물 재이용 / 광역 물 재이용수 공급"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 사례" },
-            { label: "해외 재이용 사례" },
-            { label: "호주", href: "/reuse/business/globalCase/australia" },
-        ]}
-        hideFooterLine 
-        hideGuideText
-        wrapClassName="!pb-0"
-      /> 
-
-      <Hr className="my-7" />
-
-      {/* 슬라이드 이미지 영역 */}
-      <CaseImageSlider
-        className="mt-8"
-        maxWidthClassName="max-w-[760px]"
-        slides={[
-            { src: "/images/landing/business/globalCase/australia_01.png", alt: "호주 사례 1" },
-        ]}
-      />
-      
-      {/* 생활용수로 재이용수의 적극 활용 */}
-      <section className="mt-8">
-        <SectionTitle>생활용수로 재이용수의 적극 활용</SectionTitle>
-        <div className="px-4 mt-6">
-            <ul className="space-y-4 text-base text-[#4F4F4F]">
-                <li>
-                – 재이용수를 공원, 골프장 등의 관개용수로 공급(초록색 지역)
-                </li>
-                <li>
-                – Dual pipe로 재이용수를 특정 주거단지로 공급(보라색 지역)
-                </li>
-                <li>
-                – 현재 7,000여 가구가 재이용수를 사용
-                </li>
-                <li>
-                – 2030년까지 43,000가구로 확대 예정
-                </li>
-            </ul>
-        </div>
-      </section>
-
-      <Hr className="my-11" />
- 
-      {/* 호주 재이용수 광역 활용(퀸즈랜드주 브리즈번) */}
-      <section className="mt-6">
-        <SectionTitle>호주 재이용수 광역 활용(퀸즈랜드주 브리즈번)</SectionTitle>
-        <div className="px-4">
-            <ul className="mt-6 space-y-4 text-base text-gray-600">
-                <li>
-                • SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해 설정한 광역 수로망
-                </li>
-                <li>
-                • 이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급<br />
-                    <ul className="list-inside text-[#767676] ml-4 mt-2">
-                        <li>– 1,618억의 사업비 중 92% 국비, 지방비 8% 투입</li>
-                        <li>– 재이용수는 24km 관로로 타이난 TSMC로 공급</li>
-                    </ul>
-                </li>
-                <li>
-                • 12개 댐, 32개 수처리 시설, 3개 재이용시설, 담수화 플랜트 1개, 저수지 28개와 600km 이상의 물 공급 관로를 건설
-                </li>
-                <li>
-                • 지역적으로 강수량이 고르지 않아, 댐의 저수율이 불균등할 때 지역의 물 공급을 보충하는 중요한 역할을 수행
-                </li>
-            </ul>
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 특이사항 */}
-      <section className="pb-[200px]">
-        <SectionTitle>특이사항</SectionTitle>
-        <ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>호주는 2000~2009년 강수량 감소로 밀레니엄 가뭄이 발생하여 심각한 물 부족 현상이 발생함</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>호주는 해안 도시에 인구가 밀집하여 거주하고 있으며 인구 증가율이 타 선진국 대비 높아, 향후 도시에 공급할 수자원 확보가 필요함</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>호주정부는 1990년대부터 하·폐수가 방류될 경우의 환경 피해에 대해 인식하기 시작하고 배출규제와 위원회를 구성하기 시작</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>연방정부는 주에 인센티브를 주는 방식으로 물 정책을 장려하고 토지소유권과 물 권리를 구분하여 거래를 허용하고 물 재이용 활성화를 위한 Water Smart Australia 프로그램을 시행</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>호주의 용수공급 체계는 영국과 미국의 특성들이 존재하지만, 주의 특성과 주 정부의 정책 방향에 따라 주마다도 많은 차이가 있음. 특히 대부분의 주에서 수 자원 개발 기능과 수도 공급의 기능을 분리하여 주정부<br/>산하 기관에서 운영하는게 특징</li>
-                </ul>
-            </li>
-        </ul>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/globalCase/eu/page.tsx b/apps/dm_new/app/(with-layout)/example/globalCase/eu/page.tsx
deleted file mode 100644
index e2930b392..000000000
--- a/apps/dm_new/app/(with-layout)/example/globalCase/eu/page.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/globalCase/eu/page.tsx
-"use client";
-
-import SubPageHeader from "@/components/SubPageHeader";
-import CaseImageSlider from "@/components/CaseImageSlider";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-// type ImgCardProps = {
-//   src: string;
-//   alt: string;
-// };
-
-// function ImgCard({ src, alt }: ImgCardProps) {
-//   return (
-//     <div className="w-full overflow-x-auto">
-//       <img
-//         src={src}
-//         alt={alt}
-//         className="block mx-auto max-w-none"
-//       />
-//     </div>
-//   );
-// }
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="[EU] 법률을 제정, EU국가에서 물 재이용 유도"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 사례" },
-            { label: "해외 재이용 사례" },
-            { label: "EU", href: "/reuse/business/globalCase/eu" },
-        ]}
-        hideFooterLine 
-        hideGuideText
-        wrapClassName="!pb-0"
-      /> 
-
-      <Hr className="my-7" />
-
-      {/* 슬라이드 이미지 영역 */}
-      <CaseImageSlider
-        className="mt-8"
-        maxWidthClassName="max-w-[760px]"
-        slides={[
-            { src: "/images/landing/business/globalCase/eu_01.png", alt: "EU 사례 1" },
-        ]}
-      />
-      
-      {/* 물 재이용에 대한 법률을 제정(2020 제정, 2023 시행) */}
-      <section className="mt-8">
-        <SectionTitle>물 재이용에 대한 법률을 제정(2020 제정, 2023 시행)</SectionTitle>
-        <div className="px-4 mt-6">
-            <ul className="mt-6 space-y-4 text-base text-gray-600">
-                <li>
-                • 유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을 제정 (2020/741)
-                </li>
-                <li>
-                • 2023년부터 모든 EU국가에서 시행
-                </li>
-            </ul>
-        </div>
-      </section>
-
-      <Hr className="my-11" />
- 
-      {/* 유럽연합 회원국 물 재이용 지원정책 */}
-      <section className="mt-6">
-        <SectionTitle>유럽연합 회원국 물 재이용 지원정책</SectionTitle>
-        <div className="px-4">
-            <ul className="mt-6 space-y-4 text-base text-gray-600">
-                <li>
-                • 유럽연합 차원에서 다양한 물 재이용 프로그램 자금 지원<br />
-                    <ul className="list-inside space-y-4 text-[#767676] text-sm ml-4 mt-2">
-                        <li>– 2021년부터 3년간 Life RECYCLIO 프로그램 지원 → 세부내용 물 재이용 프로그램<br/>
-                            <ul className="list-inside space-y-2 text-[#767676] ml-4 mt-2">
-                                <li>1. 환경 관련 사업에 자금을 지원하는 Life 프로그램의 일환으로 80만 유로를 지원</li>
-                                <li>2. 식품·농업 분야 물 재이용 확대를 위해 기술 이전 및 평가 실시</li>
-                            </ul>
-                        </li>
-                        <li>– 물 재이용 정책 수행을 위해 BOOST-INN 180만 유로를 지원<br/>
-                            <ul className="list-inside space-y-2 text-[#767676] ml-4 mt-2">
-                                <li> *프랑스, 이탈리아, 스페인 등 유럽 선진국 솔루션 공유</li>
-                            </ul>
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                •  EU산하 JRC(공동연구센터)에서 물 재이용 기술제공 지원<br />
-                    <ul className="list-inside space-y-2 text-[#767676] text-sm ml-4 mt-2">
-                        <li>‘물 재이용 회원 관리 실무 커뮤니티(Water Reuse Management Community of Practice)’ 시범사업 수행</li>
-                        <li>유럽 전역에 성공적인 모델 활용 및 혁신적인 물 재이용 솔루션을 확장할 수 있는 기술을 제공</li>
-                    </ul>
-                </li>
-            </ul>
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 특이사항 */}
-      <section className="pb-[200px]">
-        <SectionTitle>특이사항</SectionTitle>
-        <ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>2019년 기준 EU 인구의 38%가 물 부족의 영향을 받을 것으로 예상됨. 이 흐름대로면 2030년까지 유럽 유역 전반에 물 부족 문제가 발생하게 될 것으로 예상. 인구 증가, 도시화의 확대, 염분화 및 기후변화들이 수자원 문제들의 주요 요인이며, 식습관 변화와 산업용수 수요 증가 등으로 악화되고 있는 상황</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>유럽의 물 부족 상황은 지역에 따라 다르게 나타나 스페인을 비롯한 남부유럽 에서 특히 심각함. 전반적으로 북유럽에 비해 남유럽의 물 스트레스가 심하며, 특히 스페인과 포르투갈, 프랑스 동부지역의 물 스트레스가 심각함</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>유럽 연합에서도 물 부족 문제를 인식하고 2000년 EU Water Framework Directive을 개발, 이후 2020년 재이용에 관한 법률을 제정</li>
-                </ul>
-            </li>
-        </ul>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/globalCase/overview/page.tsx b/apps/dm_new/app/(with-layout)/example/globalCase/overview/page.tsx
deleted file mode 100644
index 4d84b0c43..000000000
--- a/apps/dm_new/app/(with-layout)/example/globalCase/overview/page.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/globalCase/overview/page.tsx
-"use client";
-
-import SubPageHeader from "@/components/SubPageHeader";
-import CaseImageSlider from "@/components/CaseImageSlider";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-// type ImgCardProps = {
-//   src: string;
-//   alt: string;
-// };
-
-// function ImgCard({ src, alt }: ImgCardProps) {
-//   return (
-//     <div className="w-full overflow-x-auto">
-//       <img
-//         src={src}
-//         alt={alt}
-//         className="block mx-auto max-w-none"
-//       />
-//     </div>
-//   );
-// }
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="해외 재이용 사례 개요"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 사례" },
-            { label: "해외 재이용 사례" },
-            { label: "사례개요", href: "/reuse/business/globalCase/overview" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      /> 
-
-      <Hr className="my-7" />
-
-      {/* 슬라이드 이미지 영역 */}
-      <CaseImageSlider
-        className="mt-8"
-        maxWidthClassName="max-w-[760px]"
-        slides={[
-            { src: "/images/landing/business/globalCase/overview_01.png", alt: "해외 재이용 사례 1" },
-        ]}
-      />
-
-      <section className="mt-6">
-        <div className="rounded-md bg-[#e9f0f1] p-8">
-            <h3 className="text-xl font-bold text-gray-800 leading-relaxed">
-            2024년 하수도 통계 기준 15.6%이며,<br />
-            제2차 물 재이용 기본 계획을 고려한 2030년 목표는 <span className="font-extrabold">17%</span>
-            </h3>
-
-            {/* 진행 바 영역 */}
-            <div className="mt-6 space-y-4">
-            {/* 2024 */}
-            <div className="flex items-center gap-4">
-                <span className="text-sm text-gray-600">’24년도</span>
-                <div className="relative h-7 rounded-r-lg">
-                    <div className="h-7 w-[112px] rounded-r-lg bg-gray-400" />
-                </div>
-                <span className="text-sm text-gray-700">15.6%</span>
-            </div>
-
-            {/* 2030 */}
-            <div className="flex items-center gap-4">
-                <span className="text-sm text-gray-600">’30년도</span>
-                <div className="relative">
-                    <div className="h-10 w-[327px] rounded-r-lg bg-gradient-to-r from-sky-500 to-green-500" />
-                </div>
-                <span className="text-xl font-bold text-gray-900">17%</span>
-            </div>
-            </div>
-        </div>
-
-        {/* 설명 문구 */}
-        <ul className="mt-6 space-y-2 text-base text-gray-600">
-            <li>
-            • 우리나라의 하수 처리 재이용률은 <span className="text-sky-600 ">15% 수준</span>
-            </li>
-            <li>
-            • 대만은 가뭄과 공업용수 증가에 대응하여
-            <span className="text-sky-600 ">
-                {" "}현재 4.3% 수준이며, 16.5%까지 확대 계획 수립
-            </span>
-            </li>
-        </ul>
-
-        {/* 테이블 */}
-        <div className="mt-6">
-            <table className="w-full text-center text-sm">
-                <thead>
-                    <tr>
-                        <th className="bg-[#C2CAD2] px-4 py-3 text-black rounded-t-lg">국가</th>
-                        <th className="bg-sky-600 px-4 py-3 text-white rounded-t-lg">해외정보</th>
-                        <th className="bg-teal-500 px-4 py-3 text-white rounded-t-lg">현재</th>
-                        <th className="bg-green-500 px-4 py-3 text-white rounded-t-lg">미래(목표, 예측치)</th>
-                    </tr>
-                </thead>
-                <tbody className="bg-white border border-t-0">
-                    <tr className="border-t">
-                        <td className="px-4 py-3 font-medium">한국</td>
-                        <td className="px-4 py-3 bg-sky-50 text-gray-700">12.1%</td>
-                        <td className="px-4 py-3">15.6%</td>
-                        <td className="px-4 py-3  bg-sky-50 text-gray-700">17%</td>
-                    </tr>
-                    <tr className="border-t">
-                        <td className="px-4 py-3 font-medium">대만</td>
-                        <td className="px-4 py-3 bg-sky-50 text-gray-700">2.4%</td>
-                        <td className="px-4 py-3">4.3%</td>
-                        <td className="px-4 py-3  bg-sky-50 text-gray-700">16.5%</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-      </section>
-
-      <Hr className="my-11" />
- 
-      {/* 주요 국가의 하수처리수 재이용률 (%) */}
-      <section className="pb-[200px]">
-        <SectionTitle>주요 국가의 하수처리수 재이용률 (%)</SectionTitle>
-        {/* 설명 문구 */}
-        <ul className="mt-6 space-y-2 text-base text-gray-600">
-            <li>
-            • 전 세계적으로 물 재이용은 호주, 유럽, 아프리카, 미국 등 가뭄이 잦거나 심각한 가뭄이 발생한 국가에서 많이 이루어짐
-            </li>
-            <li>
-            • 이스라엘, 쿠웨이트 등 중동 및 북아프리카 지역은 가용 수자원이 제한되어 있어 재이용량 비중도 매우 높은 편
-            </li>
-        </ul>
-        {/* 테이블 (2단 병렬: 좌/우 데이터) */}
-        <div className="mt-6">
-            <div className="overflow-x-auto">
-                <table className="min-w-[900px] w-full text-center text-sm">
-                    <thead>
-                        <tr>
-                        {/* 좌측 3컬럼 */}
-                        <th className="bg-[#C2CAD2] px-4 py-3 text-black rounded-t-lg">국가명</th>
-                        <th className="bg-sky-600 px-4 py-3 text-white rounded-t-lg">지역</th>
-                        <th className="bg-green-500 px-4 py-3 text-white rounded-t-lg">재이용률</th>
-
-                        {/* 우측 3컬럼 */}
-                        <th className="bg-[#C2CAD2] px-4 py-3 text-black rounded-t-lg">국가명</th>
-                        <th className="bg-sky-600 px-4 py-3 text-white rounded-t-lg">지역</th>
-                        <th className="bg-green-500 px-4 py-3 text-white rounded-t-lg">재이용률</th>
-                        </tr>
-                    </thead>
-
-                    <tbody className="bg-white border border-t-0">
-                        {[
-                        {
-                            L: { c: "이스라엘", r: "중동&북아프리카", v: "92.3" },
-                            R: { c: "튀르키예", r: "동유럽&중앙아시아", v: "26.6" },
-                        },
-                        {
-                            L: { c: "쿠웨이트", r: "중동&북아프리카", v: "89.3" },
-                            R: { c: "독일", r: "서유럽", v: "25.0" },
-                        },
-                        {
-                            L: { c: "호주", r: "동아시아&태평양", v: "49.0" },
-                            R: { c: "스페인", r: "서유럽", v: "24.4" },
-                        },
-                        {
-                            L: { c: "싱가포르", r: "동아시아&태평양", v: "44.4" },
-                            R: { c: "한국", r: "동아시아&태평양", v: "12.1" },
-                        },
-                        {
-                            L: { c: "그리스", r: "서유럽", v: "39.1" },
-                            R: { c: "미국", r: "북아메리카", v: "13.1" },
-                        },
-                        {
-                            L: { c: "사우디아라비아", r: "중동&북아프리카", v: "32.8" },
-                            R: { c: "프랑스", r: "서유럽", v: "9.5" },
-                        },
-                        {
-                            L: { c: "이탈리아", r: "서유럽", v: "31.7" },
-                            R: { c: "대만", r: "동아시아&태평양", v: "2.4" },
-                        },
-                        {
-                            L: { c: "룩셈부르크", r: "서유럽", v: "29.1" },
-                            R: { c: "일본", r: "동아시아&태평양", v: "0.8" },
-                        },
-                        {
-                            L: { c: "포르투갈", r: "서유럽", v: "29.0" },
-                            R: { c: "", r: "", v: "" }, // 마지막 우측은 빈칸(이미지처럼)
-                        },
-                        ].map((row, idx) => (
-                        <tr key={idx} className="border-t">
-                            {/* 좌측 */}
-                            <td className="px-4 py-3 font-medium text-gray-700">{row.L.c}</td>
-                            <td className="px-4 py-3 bg-sky-50 text-gray-700">{row.L.r}</td>
-                            <td className="px-4 py-3 bg-green-50  text-gray-700">{row.L.v}</td>
-
-                            {/* 우측 */}
-                            <td className="px-4 py-3 font-medium text-gray-700">{row.R.c}</td>
-                            <td className="px-4 py-3 bg-sky-50 text-gray-700">{row.R.r}</td>
-                            <td className="px-4 py-3 bg-green-50  text-gray-700">{row.R.v}</td>
-                        </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/globalCase/singapore/page.tsx b/apps/dm_new/app/(with-layout)/example/globalCase/singapore/page.tsx
deleted file mode 100644
index 3d8f35836..000000000
--- a/apps/dm_new/app/(with-layout)/example/globalCase/singapore/page.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/globalCase/singapore/page.tsx
-"use client";
-
-import SubPageHeader from "@/components/SubPageHeader";
-import CaseImageSlider from "@/components/CaseImageSlider";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-// type ImgCardProps = {
-//   src: string;
-//   alt: string;
-// };
-
-// function ImgCard({ src, alt }: ImgCardProps) {
-//   return (
-//     <div className="w-full overflow-x-auto">
-//       <img
-//         src={src}
-//         alt={alt}
-//         className="block mx-auto max-w-none"
-//       />
-//     </div>
-//   );
-// }
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="[싱가포르] 수요가 높은 산업의 물 재이용 의무화"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 사례" },
-            { label: "해외 재이용 사례" },
-            { label: "싱가포르", href: "/reuse/business/globalCase/singapore" },
-        ]}
-        hideFooterLine 
-        hideGuideText
-        wrapClassName="!pb-0"
-      /> 
-
-      <Hr className="my-7" />
-
-      {/* 슬라이드 이미지 영역 */}
-      <CaseImageSlider
-        className="mt-8"
-        maxWidthClassName="max-w-[760px]"
-        slides={[
-            { src: "/images/landing/business/globalCase/singapore_01.png", alt: "싱가포르 사례 1" },
-        ]}
-      />
-      
-      {/* 싱가포르 NEWater 비중 확대 */}
-      <section className="mt-8">
-        <SectionTitle>싱가포르 NEWater 비중 확대</SectionTitle>
-        <div className="px-4 mt-6">
-            <ul className="mt-6 space-y-4 text-base text-gray-600">
-                <li>
-                • 2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해 NEWater Visitor Center를 함께 건설
-                </li>
-                <li>
-                • NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용
-                </li>
-                <li>
-                • 2060년까지 NEWater 비중 55%까지 높이는 것이 싱가포르의 목표
-                </li>
-            </ul>
-        </div>
-      </section>
-
-      <Hr className="my-11" />
- 
-      {/* 싱가포르 재이용수 의무화 및 지원정책 */}
-      <section className="mt-6">
-        <SectionTitle>싱가포르 재이용수 의무화 및 지원정책</SectionTitle>
-        <div className="px-4">
-            <ul className="mt-6 space-y-4 text-base text-gray-600">
-                <li>
-                • 공업용수 수요가 높은 산업에 대해 물 재이용을 의무화<br />
-                    <ul className="list-inside text-[#767676] text-sm ml-4 mt-2">
-                        <li>– 반도체업계 전체 비 재이용수(non-domestic용수) 17% 차지 → 공업용수 수요 원인</li>
-                        <li>– 2024년 1월 1일부터 연간 최소 60,000㎥를 소비하는 사업자는 재이용수 사용 의무화</li>
-                        <li>– 반도체 공장의 경우 최소 50% 이상의 재이용수를 요구함(현재는 43% 정도)</li>
-                    </ul>
-                </li>
-                <li>
-                • 재정 지원을 통해 재이용 활성화를 지원<br />
-                    <ul className="list-inside text-[#767676] text-sm ml-4 mt-2">
-                        <li>– 재이용 설비를 기준으로 2025년까지 싱가포르 수자원공사의 2가지 금융상품 제공<br/>
-                            <ul className="list-inside text-[#767676] ml-4 mt-2">
-                                <li>1. Water Efficiency Fund</li>
-                                <li>2. Industrial Water Solutions Demonstration Fund</li>
-                            </ul>
-                        </li>
-                        <li className="mt-2">– 2025년 기준 지원 한도 상향 → 물 재이용 활성 도모<br/>
-                            <ul className="list-inside text-[#767676] ml-4 mt-2">
-                                <li>투입비용 50% → 75% 지원 / WSDP: $400만 → $500만</li>
-                                <li>물 효율이 높은 장비를 도입하는 데에도 최대 $300만 지원 가능</li>
-                            </ul>
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 특이사항 */}
-      <section className="pb-[200px]">
-        <SectionTitle>특이사항</SectionTitle>
-        <ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>싱가포르는 천연 수자원이 많지 않아, 말레이시아 조호르와 1962년 맺은 협약으로 물을 수입해왔으며, 재이용수를 늘리기 위한 노력을 계속하고 있음<br/>
-                        <ul className="list-inside text-[#767676] text-sm ml-4 mt-2">
-                            <li>- 싱가포르는 국토 내에 호수와 하천이적고 집수공간도 적어 빗물로 확보할 수 있는 수자원량은 전체 물 수요의 20%에 불과함</li>
-                        </ul>
-                    </li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>싱가포르는 도심에 저수지를 건설하 고 건물에 빗물이용시설을 건설하여 빗물을 재이용하고 있음</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>싱가포르는 2002년부터 하수재이용수인 NEWater를 개발, 비음 용수와 간접음용수로 활용하고 있음<br/>
-                        <ul className="list-inside text-[#767676] text-sm/6 ml-4 mt-2">
-                            <li>- 재이용수를 NEWater라는 이름으로 명명하고 NEWater에 대한 신뢰 확보를 위해 NEWater 방문자 센터도 건설함</li>
-                            <li>- 비음용수로 많이 사용하며 건기에는 NEWater를 저수지에 추가하여 원수와 섞음. 원수는 상수도에서 처리 한 후 가정에 수돗물로 공급함</li>
-                            <li>- NEWater는 전용 파이프를 통해 주로 웨이퍼 제조 공장, 산업단지, 상업용 건물에서 산업 및 냉각수로 사용. 제일 많이 사용하는 곳은 웨이퍼 제조 공장</li>
-                        </ul>
-                    </li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>2024년 4월 기준 1㎥ 당 공업용수 가격은 $1.66이며, Non-domestic 기준 NEWater 가격은 $2.41</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>공업용수 가격 $1.66은 수도요금(water tariff)과 수자원세(waterborne tax)로 구분됨. $1.66에는 $1만큼의 수자원세가 포함됨</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>2023년 싱가포르는 산업용수 수요가 높은 산업에 대해 물 재 이용을 의무화했으며, 정부는 기금을 통해 물 재이용을 지원함</li>
-                </ul>
-            </li>
-        </ul>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/globalCase/taiwan/page.tsx b/apps/dm_new/app/(with-layout)/example/globalCase/taiwan/page.tsx
deleted file mode 100644
index 91f7b68af..000000000
--- a/apps/dm_new/app/(with-layout)/example/globalCase/taiwan/page.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/globalCase/taiwan/page.tsx
-"use client";
-
-import SubPageHeader from "@/components/SubPageHeader";
-import CaseImageSlider from "@/components/CaseImageSlider";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-// type ImgCardProps = {
-//   src: string;
-//   alt: string;
-// };
-
-// function ImgCard({ src, alt }: ImgCardProps) {
-//   return (
-//     <div className="w-full overflow-x-auto">
-//       <img
-//         src={src}
-//         alt={alt}
-//         className="block mx-auto max-w-none"
-//       />
-//     </div>
-//   );
-// }
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="[대만] 국가 주도의 공업용수 공급"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 사례" },
-            { label: "해외 재이용 사례" },
-            { label: "대만", href: "/reuse/business/globalCase/taiwan" },
-        ]}
-        hideFooterLine 
-        hideGuideText
-        wrapClassName="!pb-0"
-      /> 
-
-      <Hr className="my-7" />
-
-      {/* 슬라이드 이미지 영역 */}
-      <CaseImageSlider
-        className="mt-8"
-        maxWidthClassName="max-w-[760px]"
-        slides={[
-            { src: "/images/landing/business/globalCase/taiwan_01.png", alt: "대만 사례 1" },
-        ]}
-      />
-      
-      {/* 재생 수자원 개발법 제정(2015년제정, 2022개정) */}
-      <section className="mt-8">
-        <SectionTitle>재생 수자원 개발법 제정(2015년제정, 2022개정)</SectionTitle>
-        <div className="px-4">
-            <ul className="mt-6 space-y-2 text-base text-gray-600">
-                <li>
-                • 목적: 수자원 지속 가능성 향상, 재생 수자원 활용을 통해 물부족 문제 해결
-                </li>
-                <li>
-                • 내용: 재생 수자원 정의·분류, 이용 의무, 이용 제한, 수질 기준 등
-                </li>
-            </ul>
-            <div className="rounded-sm bg-[#e9f0f1] p-8 mt-5">
-                <ul className="space-y-1 text-2xl text-[#1A1A1A]">
-                    <li>
-                    – 제4조. 물 소비 계획에 따른 재이용수 이용 관련 내용 (일정 비율 재이용수 사용 규정)
-                    </li>
-                    <li>
-                    – 제5조. 재이용수의 운영자, 사용자 관련 내용 (지자체에서 하수 무상공급 제공 가능)
-                    </li>
-                    <li>
-                    – 제7조. 재이용수 이용 범위, 이용량 재이용수 수질 기준 내용 (식품, 제약산업 사용 불가)
-                    </li>
-                    <li>
-                    – 제8조. 재이용수 사업 주체, 책임 등에 관한 내용 (광역인 경우, 정부가 지자체 지정)
-                    </li>
-                </ul>
-            </div>
-        </div>
-      </section>
-
-      <Hr className="my-11" />
- 
-      {/* 대만정부 하수재이용 사업 시행 */}
-      <section className="mt-6">
-        <SectionTitle>대만정부 하수재이용 사업 시행</SectionTitle>
-        <div className="px-4">
-            <ul className="mt-6 space-y-4 text-base text-gray-600">
-                <li>
-                • 대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업 시행(안핑)<br />
-                    <ul className="list-inside text-[#767676] ml-4 mt-2">
-                        <li>– 1,618억의 사업비 중 92% 국비, 지방비 8% 투입</li>
-                        <li>– 재이용수는 24km 관로로 타이난 TSMC로 공급</li>
-                    </ul>
-                </li>
-                <li>
-                • 안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능
-                </li>
-                <li>
-                • 공급단가는 수질과 운영조건에 따라 다르게 책정
-                </li>
-            </ul>
-            {/* 테이블 (2단 병렬: 좌/우 데이터) */}
-            <div className="mt-3">
-                <div className="overflow-x-auto">
-                    <p className="text-center text-2xl py-2">〈대만 재이용 시설별 재이용수 공급단지〉</p>
-                    <table className="min-w-[900px] w-full text-center text-sm">
-                        <thead className="border">
-                            <tr>
-                                <th className="bg-[#C2CAD2] px-4 py-3 text-black">사업</th>
-                                <th className="bg-sky-600 px-4 py-3 text-white">가격(NTD/㎥)</th>
-                                <th className="bg-green-500 px-4 py-3 text-white">가격(원/㎥)</th>
-                            </tr>
-                        </thead>
-
-                        <tbody className="bg-white text-[#4F4F4F] border border-t-0">
-                            <tr className="border-t">
-                                <td className="px-4 py-3 bg-white">Fongshan(가오슝)</td>
-                                <td className="px-4 py-3  bg-[#EAF5F5]">23.39</td>
-                                <td className="px-4 py-3 bg-[#E7F4E2]">1,038원</td>
-                            </tr>
-                            <tr className="border-t">
-                                <td className="px-4 py-3 bg-white">Linhai(가오슝)</td>
-                                <td className="px-4 py-3  bg-[#EAF5F5]">19.28</td>
-                                <td className="px-4 py-3 bg-[#E7F4E2]">858원</td>
-                            </tr>
-                            <tr className="border-t">
-                                <td className="px-4 py-3 bg-white">Anping(타이난)</td>
-                                <td className="px-4 py-3  bg-[#EAF5F5]">38.28</td>
-                                <td className="px-4 py-3 bg-[#E7F4E2]">1,699원</td>
-                            </tr>
-                            <tr className="border-t">
-                                <td className="px-4 py-3 bg-white">Yongkang(타이난)</td>
-                                <td className="px-4 py-3  bg-[#EAF5F5]">23.67</td>
-                                <td className="px-4 py-3 bg-[#E7F4E2]">1,050원</td>
-                            </tr>
-                            <tr className="border-t">
-                                <td className="px-4 py-3 bg-white">Rende(타이난)</td>
-                                <td className="px-4 py-3  bg-[#EAF5F5]">28.26</td>
-                                <td className="px-4 py-3 bg-[#E7F4E2]">1,254원</td>
-                            </tr>
-                            <tr className="border-t">
-                                <td className="px-4 py-3 bg-white">Shuinan(타이중)</td>
-                                <td className="px-4 py-3  bg-[#EAF5F5]">15.00</td>
-                                <td className="px-4 py-3 bg-[#E7F4E2]">668원</td>
-                            </tr>
-                            <tr className="border-t">
-                                <td className="px-4 py-3 bg-white">Quaitou(가오슝)</td>
-                                <td className="px-4 py-3  bg-[#EAF5F5]">35.44</td>
-                                <td className="px-4 py-3 bg-[#E7F4E2]">1,573원</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 특이사항 */}
-      <section className="pb-[200px]">
-        <SectionTitle>특이사항</SectionTitle>
-        <ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>대만은 풍부한 강수량에도, 지형적 특성으로 인해 수자원 확보에 어려움을 겪고 있으며, 대만 남부지역의 경우 우기와 건기 사이의 강수량 차이가 큼</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>대만은 최근 심각한 가뭄이 여러 해에 걸쳐서 발생하고 있으며, 강수량 감소와 함께 대만 정부 주도하에 반도체 산업을 국가 핵심 산업으로 선정하고 반도체 산업 육성 계획을 세움. 그 결과, 2023년 파운드리 시장의 68.3%를 차지하는 반도체 강국으로 성장했으며 이로 인한 공업용수 수요가 크게 증가</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>반도체 산업은 물 소비가 많아, 안정적인 용수공급이 매우 중요한데 현재 19개의 반도체 공장이 물이 부족한 대만 남부지역에 위치함. 2021년 가뭄 발생 당시, 산업단지 기업들도 용수 공급에 어려움을 겪음. 이는 대만 남부 지역의 물 부족, 물 분배 등에 대한 문제를 야기함</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>대만 정부는 산업단지 기업들에게 2023년부터 물에 대한 추가요금 부과를 시작했으며, 농업용수에 대해서는 강력한 억제정책을 시행함. 안정적인 용수 공급을 위해서 정부와 기업에서 자체적으로 재이용수 시설에 대한 투자가 이루어지고 있음.</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>대만은 2004년 기후변화로 인한 물 부족 상황을 해결하기 위해 수자원 보호 전략을 승인하고, 2015년 대만 환경부는 재생 수자원 개발법을 발표, 2022년에는 한 차례 개정</li>
-                </ul>
-            </li>
-            <li>
-                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
-                    <li>대만은 물 소비량이 많은 산업(high water consuming industries)과 하수처리장(municipal wastewater treatment plants), 두 곳을 재이용수의 주요 공급원으로 계획</li>
-                </ul>
-            </li>
-        </ul>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/layout.tsx b/apps/dm_new/app/(with-layout)/example/layout.tsx
deleted file mode 100644
index f117d6792..000000000
--- a/apps/dm_new/app/(with-layout)/example/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ReactNode } from "react";
-import Lnb from "@/components/Lnb";
-
-export default function BusinessLayout({ children }: { children: ReactNode }) {
-  return (
-    <div className="flex gap-0">
-      <Lnb />
-      <main className="flex-1 px-[100px] pt-[80px]">{children}</main>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/rain/suwon/page.tsx b/apps/dm_new/app/(with-layout)/example/rain/suwon/page.tsx
deleted file mode 100644
index a15b86cf4..000000000
--- a/apps/dm_new/app/(with-layout)/example/rain/suwon/page.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/rain/suwon/page.tsx
-"use client";
-
-import SubPageHeader from "@/components/SubPageHeader";
-import CaseImageSlider from "@/components/CaseImageSlider";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-// type ImgCardProps = {
-//   src: string;
-//   alt: string;
-// };
-
-// function ImgCard({ src, alt }: ImgCardProps) {
-//   return (
-//     <div className="w-full overflow-x-auto">
-//       <img
-//         src={src}
-//         alt={alt}
-//         className="block mx-auto max-w-none"
-//       />
-//     </div>
-//   );
-// }
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="경기도 수원시 빗물이용과 중수도"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 사례" },
-            { label: "빗물 재이용 사례" },
-            { label: "수원시", href: "/reuse/business/rain/suwon" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      /> 
-
-      <Hr className="my-7" />
-
-      {/* 슬라이드 이미지 영역 */}
-      <CaseImageSlider
-        className="mt-8"
-        maxWidthClassName="max-w-[760px]"
-        slides={[
-            { src: "/images/landing/business/rain/rain_01.png", alt: "수원시 하수 재이용 1" },
-            { src: "/images/landing/business/rain/rain_02.png", alt: "수원시 하수 재이용 2" },
-            { src: "/images/landing/business/rain/rain_03.png", alt: "수원시 하수 재이용 3" },
-            { src: "/images/landing/business/rain/rain_04.png", alt: "수원시 하수 재이용 4" },
-        ]}
-      />
-
-      {/* 사업명 */}
-      <section className="mt-6">
-        <SectionTitle>사업명</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          경기도 수원시 빗물이용과 중수도
-        </p>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 사업 방식 */}
-      <section className="pb-[200px]">
-        <SectionTitle>사업 방식</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          (빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로 비산먼지 저감<br/>
-          ※ 시설 가동중 도로 노면 온도의 7.2 ~ 26.3℃ 감소 효과 확인(‘21.7월, 수원시청).<br/>  
-          다만, 가뭄기나 강우량이 적을 경우 빗물을 원활히 공급하기 다소 곤란<br/><br/>
-          - (중수도) 수원시청, 장안구청, 월드컵경기장에 빗물 연계 중수도를 화장실·조경용수 등으로 사용하여 수도요금 절감(연 7백~30백만원)
-        </p>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/sewage/bolyeong/page.tsx b/apps/dm_new/app/(with-layout)/example/sewage/bolyeong/page.tsx
deleted file mode 100644
index 2a6b41045..000000000
--- a/apps/dm_new/app/(with-layout)/example/sewage/bolyeong/page.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/sewage/bolyeong/page.tsx
-"use client";
-
-import SubPageHeader from "@/components/SubPageHeader";
-import CaseImageSlider from "@/components/CaseImageSlider";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-// type ImgCardProps = {
-//   src: string;
-//   alt: string;
-// };
-
-// function ImgCard({ src, alt }: ImgCardProps) {
-//   return (
-//     <div className="w-full overflow-x-auto">
-//       <img
-//         src={src}
-//         alt={alt}
-//         className="block mx-auto max-w-none"
-//       />
-//     </div>
-//   );
-// }
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="충남보령 하수 재이용"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 사례" },
-            { label: "하수 재이용 사례" },
-            { label: "충청남도 보령시", href: "/reuse/business/sewage/bolyeong" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      /> 
-
-      <Hr className="my-7" />
-
-      {/* 슬라이드 이미지 영역 */}
-      <CaseImageSlider
-        className="mt-8"
-        maxWidthClassName="max-w-[760px]"
-        slides={[
-            { src: "/images/landing/business/sewage/bolyeong_01.png", alt: "보령시 하수 재이용 1" },
-        ]}
-      />
-
-      {/* 사업명 */}
-      <section className="mt-6">
-        <SectionTitle>사업명</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          충남 보령 하수재이용<br/>
-          : 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진
-        </p>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 사업 방식 */}
-      <section className="mt-6">
-        <SectionTitle>사업 방식</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결 
-        </p>
-      </section>
-
-      {/* 사업 주요 내용 */}
-      <section className="mt-6">
-        <SectionTitle>사업 주요 내용</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          처리공정 : 전처리 UF + 후처리 RO<br/>
-          시설용량 : 1만m³/일<br/> 
-          관로 : 8.7km<br/>
-          사업비 : 315억원<br/>
-          위치: 충청남도 보령시 대청방조제로 322 일원
-        </p>
-      </section>
-
-      <Hr className="my-11" />  
-
-      {/* 특이사항 */}
-      <section className="pb-[200px]">
-        <SectionTitle>특이사항</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕으로 추진 되어 경제성보다 공익성을 바탕으로<br/>
-          국가전력 기반시설의 안정적 운영 도모
-        </p>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/sewage/cheongju/page.tsx b/apps/dm_new/app/(with-layout)/example/sewage/cheongju/page.tsx
deleted file mode 100644
index 0d648f6b7..000000000
--- a/apps/dm_new/app/(with-layout)/example/sewage/cheongju/page.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/sewage/cheongju/page.tsx
-"use client";
-
-import SubPageHeader from "@/components/SubPageHeader";
-import CaseImageSlider from "@/components/CaseImageSlider";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-// type ImgCardProps = {
-//   src: string;
-//   alt: string;
-// };
-
-// function ImgCard({ src, alt }: ImgCardProps) {
-//   return (
-//     <div className="w-full overflow-x-auto">
-//       <img
-//         src={src}
-//         alt={alt}
-//         className="block mx-auto max-w-none"
-//       />
-//     </div>
-//   );
-// }
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="청주시 하수 재이용 시설"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 사례" },
-            { label: "하수 재이용 사례" },
-            { label: "청주시", href: "/reuse/business/sewage/cheongju" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      /> 
-
-      <Hr className="my-7" />
-
-      {/* 슬라이드 이미지 영역 */}
-      <CaseImageSlider
-        className="mt-8"
-        maxWidthClassName="max-w-[760px]"
-        slides={[
-            { src: "/images/landing/business/sewage/cheongju_01.png", alt: "청주시 하수 재이용 1" },
-        ]}
-      />
-
-      {/* 사업명 */}
-      <section className="mt-6">
-        <SectionTitle>사업명</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          청주시 하수 재이용 시설
-        </p>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 사업 주요 내용 */}
-      <section className="pb-[200px]">
-        <SectionTitle>사업 주요 내용</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          청주시 하수처리수 재이용 민간투자사업(BTO)<br/>
-          공급량 : 35,000㎥/일<br/> 
-          공급관로 : 8.3㎞<br/>
-          사업비 : 622억원<br/>
-          수요처 : SK하이닉스 등 일반산업단지<br/>
-          지역 (위치) : 충청북도 청주시 흥덕구 가락리 135-9번지 일원<br/>
-          처리용량 : 35.000(m³/일)<br/>
-          적용기술 : 분리막 (UF : 전처리), (RO : 주처리)
-        </p>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/sewage/guri/page.tsx b/apps/dm_new/app/(with-layout)/example/sewage/guri/page.tsx
deleted file mode 100644
index 7efa38116..000000000
--- a/apps/dm_new/app/(with-layout)/example/sewage/guri/page.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/sewage/guri/page.tsx
-"use client";
-
-import SubPageHeader from "@/components/SubPageHeader";
-import CaseImageSlider from "@/components/CaseImageSlider";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-// type ImgCardProps = {
-//   src: string;
-//   alt: string;
-// };
-
-// function ImgCard({ src, alt }: ImgCardProps) {
-//   return (
-//     <div className="w-full overflow-x-auto">
-//       <img
-//         src={src}
-//         alt={alt}
-//         className="block mx-auto max-w-none"
-//       />
-//     </div>
-//   );
-// }
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="구리시 도로자동청소시스템"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 사례" },
-            { label: "하수 재이용 사례" },
-            { label: "구리시", href: "/reuse/business/sewage/guri" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      /> 
-
-      <Hr className="my-7" />
-
-      {/* 슬라이드 이미지 영역 */}
-      <CaseImageSlider
-        className="mt-8"
-        maxWidthClassName="max-w-[760px]"
-        slides={[
-            { src: "/images/landing/business/sewage/guri_01.png", alt: "구리시 도로자동청소시스템 1" },
-            { src: "/images/landing/business/sewage/guri_02.png", alt: "구리시 도로자동청소시스템 2" },
-        ]}
-      />
-
-      {/* 사업명 */}
-      <section className="mt-6">
-        <SectionTitle>사업명</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          구리시 도로자동청소시스템 설치사업
-        </p>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 사업목적 */}
-      <section className="mt-6">
-        <SectionTitle>사업목적</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여 미세먼지 저감 및 폭염 취약성 완화
-        </p>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 사업 주요 내용 */}
-      <section className="mt-6">
-        <SectionTitle>사업 주요 내용</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          총사업비 : 61억원<br/>
-          위 치 : 구리시 경춘로 및 갈매중앙로 일대 등<br/> 
-          관 로 : 5.8km<br/>
-          공급계획<br/>
-        </p>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 공급계획 */}
-      <section className="pb-[200px]">
-        <SectionTitle>공급계획</SectionTitle>
-        {/* 데이터 테이블 */}
-        <div className="overflow-x-auto mt-8">
-            <table className="w-full border border-[#E3E7EA] text-center">
-                <thead>
-                    <tr>
-                        <th className="bg-[#01ACE5] text-white font-semibold py-4 border border-gray-300">
-                        시설명
-                        </th>
-                        <th className="bg-[#33B5C8] text-white font-semibold py-4 border border-gray-300">
-                        재이용수 용도
-                        </th>
-                        <th className="bg-[#55BCA2] text-white font-semibold py-4 border border-gray-300">
-                        공급량(㎥/일) 
-                        </th>
-                        <th className="bg-[#6DBB4F] text-white font-semibold py-4 border border-gray-300">
-                        원수 
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td
-                        className="bg-white py-6 border border-gray-300 text-gray-700"
-                        >
-                        도로자동청소시스템
-                        </td>
-                        <td className="bg-white py-6 border border-gray-300 text-gray-700">
-                        세척살수용수
-                        </td>
-                        <td className="bg-white py-6 border border-gray-300 text-gray-700">
-                        178
-                        </td>
-                        <td className="bg-white py-6 border border-gray-300 text-gray-700">
-                        구리 공공하수처리장 재이용수
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-      </section>
-
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/sewage/hwanggu/page.tsx b/apps/dm_new/app/(with-layout)/example/sewage/hwanggu/page.tsx
deleted file mode 100644
index 6f3f72883..000000000
--- a/apps/dm_new/app/(with-layout)/example/sewage/hwanggu/page.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/sewage/hwanggu/page.tsx
-"use client";
-
-import SubPageHeader from "@/components/SubPageHeader";
-import CaseImageSlider from "@/components/CaseImageSlider";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-// type ImgCardProps = {
-//   src: string;
-//   alt: string;
-// };
-
-// function ImgCard({ src, alt }: ImgCardProps) {
-//   return (
-//     <div className="w-full overflow-x-auto">
-//       <img
-//         src={src}
-//         alt={alt}
-//         className="block mx-auto max-w-none"
-//       />
-//     </div>
-//   );
-// }
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="수원시 황구지천 하천유지용수"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 사례" },
-            { label: "하수 재이용 사례" },
-            { label: "수원시 황구지천", href: "/reuse/business/sewage/hwanggu" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      /> 
-
-      <Hr className="my-7" />
-
-      {/* 슬라이드 이미지 영역 */}
-      <CaseImageSlider
-        className="mt-8"
-        maxWidthClassName="max-w-[760px]"
-        slides={[
-            { src: "/images/landing/business/sewage/hwanggu_01.png", alt: "수원시 황구지천 하수 재이용 1" },
-            { src: "/images/landing/business/sewage/hwanggu_02.png", alt: "수원시 황구지천 하수 재이용 2" },
-            { src: "/images/landing/business/sewage/hwanggu_03.png", alt: "수원시 황구지천 하수 재이용 3" },
-        ]}
-      />
-
-      {/* 사업명 */}
-      <section className="mt-6">
-        <SectionTitle>사업명</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          수원시 황수원시 황구지천 하수처리수 재이용사업
-        </p>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 사업목적 */}
-      <section className="mt-6">
-        <SectionTitle>사업목적</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          황구지천 공공하수처리시설 하수처리수 재이용사업으로 향후 호매실천 및 금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전
-        </p>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 사업 주요 내용 */}
-      <section className="mt-6">
-        <SectionTitle>사업 주요 내용</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          총사업비 : 110억원<br/>
-          위 치 : 수원시 권선구 호매실천, 금곡천<br/> 
-          관 로 : 3.9km<br/>
-          공 급 량 : 25,000㎥/일(하수처리시설 용량: 45,000㎥/일)<br/>
-        </p>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 공급계획 */}
-      <section className="pb-[200px]">
-        <SectionTitle>공급계획</SectionTitle>
-        {/* 데이터 테이블 */}
-        <div className="overflow-x-auto mt-8">
-            <table className="w-full border border-[#E3E7EA] text-center">
-                <thead>
-                <tr>
-                    {/* 구분 */}
-                    <th className="w-1/4 bg-[#E3E7EA] text-black font-semibold py-4 border border-gray-300">
-                    구분
-                    </th>
-
-                    {/* 공급량 */}
-                    <th className="w-2/4 bg-[#1FA3C6] text-white font-semibold py-4 border border-gray-300">
-                    공급량
-                    </th>
-
-                    {/* 비고 */}
-                    <th className="w-2/4 bg-[#72B84F] text-white font-semibold py-4 border border-gray-300">
-                    비고
-                    </th>
-                </tr>
-                </thead>
-
-                <tbody>
-                <tr>
-                    {/* 좌측 병합 */}
-                    <td
-                    rowSpan={3}
-                    className="bg-white font-medium text-gray-700 border border-gray-300"
-                    >
-                    하천 등 유지용수
-                    </td>
-
-                    <td className="bg-white py-6 border border-gray-300 text-gray-700 text-lg font-medium">
-                    12,500m³/일
-                    </td>
-
-                    <td className="bg-white py-6 border border-gray-300 text-gray-700">
-                    호매실천 공급
-                    </td>
-                </tr>
-
-                <tr>
-                    <td className="bg-white py-6 border border-gray-300 text-gray-700 text-lg font-medium">
-                    6,250m³/일
-                    </td>
-
-                    <td className="bg-white py-6 border border-gray-300 text-gray-700">
-                    금곡천1 공급
-                    </td>
-                </tr>
-
-                <tr>
-                    <td className="bg-white py-6 border border-gray-300 text-gray-700 text-lg font-medium">
-                    6,250m³/일
-                    </td>
-
-                    <td className="bg-white py-6 border border-gray-300 text-gray-700">
-                    금곡천2 공급
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
-      </section>
-
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/sewage/paju/page.tsx b/apps/dm_new/app/(with-layout)/example/sewage/paju/page.tsx
deleted file mode 100644
index c3bfa2934..000000000
--- a/apps/dm_new/app/(with-layout)/example/sewage/paju/page.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/sewage/paju/page.tsx
-"use client";
-
-import SubPageHeader from "@/components/SubPageHeader";
-import CaseImageSlider from "@/components/CaseImageSlider";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-// type ImgCardProps = {
-//   src: string;
-//   alt: string;
-// };
-
-// function ImgCard({ src, alt }: ImgCardProps) {
-//   return (
-//     <div className="w-full overflow-x-auto">
-//       <img
-//         src={src}
-//         alt={alt}
-//         className="block mx-auto max-w-none"
-//       />
-//     </div>
-//   );
-// }
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="경기도 파주시 하수 재이용"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 사례" },
-            { label: "하수 재이용 사례" },
-            { label: "파주시", href: "/reuse/business/sewage/paju" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      /> 
-
-      <Hr className="my-7" />
-
-      {/* 슬라이드 이미지 영역 */}
-      <CaseImageSlider
-        className="mt-8"
-        maxWidthClassName="max-w-[760px]"
-        slides={[
-            { src: "/images/landing/business/sewage/paju_01.png", alt: "파주시 하수 재이용 1" },
-        ]}
-      />
-
-      {/* 사업명 */}
-      <section className="mt-6">
-        <SectionTitle>사업명</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          경기도 파주시 하수재이용<br/>
-          : 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급<br/>
-          *LG디스플레이(P10공장), 희성전자, 엔비텍 등
-        </p>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 사업 배경 및 목적 */}
-      <section className="mt-6">
-        <SectionTitle>사업 배경 및 목적</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스) 
-        </p>
-      </section>
-
-      {/* 사업 주요 내용 */}
-      <section className="mt-6">
-        <SectionTitle>사업 주요 내용</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          처리공정 : 전처리 UF + 후처리 RO<br/>
-          공급량 : 4만m³/일<br/> 
-          관로 : 13.6km<br/>
-          사업비 : 651억원<br/>
-          위치 : 경기도 파주시 금촌동 714번지 일원<br/>
-          시설용량 :  41,20m³/일
-        </p>
-      </section>
-
-      <Hr className="my-11" />  
-
-      {/* 특이사항 */}
-      <section className="pb-[200px]">
-        <SectionTitle>특이사항</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례
-        </p>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/example/sewage/yeosu/page.tsx b/apps/dm_new/app/(with-layout)/example/sewage/yeosu/page.tsx
deleted file mode 100644
index cd77110a8..000000000
--- a/apps/dm_new/app/(with-layout)/example/sewage/yeosu/page.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-// apps/dm/app/(landing)/reuse/business/sewage/yeosu/page.tsx
-"use client";
-
-import SubPageHeader from "@/components/SubPageHeader";
-import CaseImageSlider from "@/components/CaseImageSlider";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-// type ImgCardProps = {
-//   src: string;
-//   alt: string;
-// };
-
-// function ImgCard({ src, alt }: ImgCardProps) {
-//   return (
-//     <div className="w-full overflow-x-auto">
-//       <img
-//         src={src}
-//         alt={alt}
-//         className="block mx-auto max-w-none"
-//       />
-//     </div>
-//   );
-// }
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="여수시 하수처리수 재이용 민간투자사업(BTO)"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 사례" },
-            { label: "하수 재이용 사례" },
-            { label: "여수시", href: "/reuse/business/sewage/yeosu" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      /> 
-
-      <Hr className="my-7" />
-
-      {/* 슬라이드 이미지 영역 */}
-      <CaseImageSlider
-        className="mt-8"
-        maxWidthClassName="max-w-[760px]"
-        slides={[
-            { src: "/images/landing/business/sewage/yeosu_01.png", alt: "여수시 하수 재이용 1" },
-        ]}
-      />
-
-      {/* 사업명 */}
-      <section className="mt-6">
-        <SectionTitle>사업명</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          여수시 하수처리수 재이용 민간 투자사업(BTO)
-        </p>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 사업 목적 */}
-      <section className="mt-6">
-        <SectionTitle>사업 목적</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          수요자가 원하는 양질의 공업용수를 저렴하게 곰급하여 한정된 수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한 오염총량 저감 및 방류수역 수질개선 
-        </p>
-      </section>
-
-      {/* 사업 주요 내용 */}
-      <section className="pb-[200px]">
-        <SectionTitle>사업 주요 내용</SectionTitle>
-        <p className="mt-8 text-base text-gray-600">
-          총사업비 : GS칼텍스, YNCC(주) 등 750억원<br/>
-          시행사 : 여수그린허브(주)<br/> 
-          운영사 : 테크로스<br/>
-          위치: 여수시 신월로 2844일원 (여수 하수처리시설 부지 내)<br/>
-          처리공법 : 전처리시설(MF) + 주처리시설(RO)<br/>
-          시설용량 및 공급량 : 5만m³/일<br/>
-          관로 : 18.6km
-        </p>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/intro/greywater/page.tsx b/apps/dm_new/app/(with-layout)/intro/greywater/page.tsx
deleted file mode 100644
index fec020ece..000000000
--- a/apps/dm_new/app/(with-layout)/intro/greywater/page.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-// 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 (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-type ImgCardProps = {
-  src: StaticImageData;
-  alt: string;
-};
-
-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-        style={{ width: "auto", height: "auto" }}
-      />
-    </div>
-  );
-}
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="중수도"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 소개", href: "/reuse/intro/law" },
-            { label: "중수도" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      />
-
-      <Hr className="my-7" />
-
-      {/* 1) 중수 재이용 소개 */}
-      <section className="mt-6">
-        <SectionTitle>중수 재이용 소개</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={greywaterIntro} alt="중수 재이용 소개" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 2) 중수도 설치 의무 대상 */}
-      <section>
-        <SectionTitle>중수도 설치 의무 대상</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={greywaterMandatory} alt="중수도 설치 의무 대상 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 3) 중수도 시설기준 및 관리기준 */}
-      <section className="pb-[200px]">
-        <SectionTitle>중수도 시설기준 및 관리기준</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={greywaterStandard} alt="중수도 시설기준 및 관리기준 설명" />
-        </div>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/intro/law/page.tsx b/apps/dm_new/app/(with-layout)/intro/law/page.tsx
deleted file mode 100644
index 0d903a32a..000000000
--- a/apps/dm_new/app/(with-layout)/intro/law/page.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-// 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 (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-type ImgCardProps = {
-  src: StaticImageData;
-  alt: string;
-};
-
-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-        style={{ width: "auto", height: "auto" }}
-      />
-    </div>
-  );
-}
-
-export default function WaterReuseLawPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="물 재이용 법"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 소개", href: "/reuse/intro/law" },
-            { label: "물 재이용 법" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      />
-
-      <Hr className="my-7" />
-
-      {/* 1) 법제도/계획 수립 타임라인 */}
-      <section className="mt-6">
-        <SectionTitle>법제도 · 계획 및 기본계획 수립</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={lawTimeline} alt="법제도 타임라인" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 2) 제2차 계획 대비 실적 현황 (2컬럼) */}
-      <section>
-        <SectionTitle>제 2차 계획 대비 실적 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={performanceLeft} alt="실적 현황 요약" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 3) 국내 관련 현황 */}
-      <section>
-        <SectionTitle>국내 관련 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={domesticTextbox} alt="국내 관련 현황 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 4) 정책 변천 추이 */}
-      <section>
-        <SectionTitle>물 재이용 정책 변천 추이</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={policyTimeline} alt="정책 변천 타임라인" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 5) 타 법령과의 관계도 */}
-      <section>
-        <SectionTitle>타법령과의 관계도</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={relNote} alt="관계도 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 6) 국내 연계 현황 */}
-      <section className="pb-[200px]">
-        <SectionTitle>국내 연계 현황</SectionTitle>
-        <div className="mt-8">
-          <div className="mx-[20px] mb-8">
-            <p className="text-[24px] font-semibold mb-2">주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</p>
-            <p className="text-[#4F4F4F]">국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한 물 재이용 활성화로 정책 실효성 제고 필요<br />
-                • 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
-            </p>
-          </div>
-          <ImgCard src={linkage} alt="국내 연계 현황" />
-        </div>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/intro/layout.tsx b/apps/dm_new/app/(with-layout)/intro/layout.tsx
deleted file mode 100644
index e025f4c80..000000000
--- a/apps/dm_new/app/(with-layout)/intro/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ReactNode } from "react";
-import Lnb from "@/components/Lnb";
-
-export default function IntroLayout({ children }: { children: ReactNode }) {
-  return (
-    <div className="flex gap-0">
-      <Lnb />
-      <main className="flex-1 px-[100px] pt-[80px]">
-        {children}
-      </main>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/intro/rain/page.tsx b/apps/dm_new/app/(with-layout)/intro/rain/page.tsx
deleted file mode 100644
index 3f88d7f58..000000000
--- a/apps/dm_new/app/(with-layout)/intro/rain/page.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-// 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 (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-type ImgCardProps = {
-  src: StaticImageData;
-  alt: string;
-};
-
-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-        style={{ width: "auto", height: "auto" }}
-      />
-    </div>
-  );
-}
-
-export default function RainwaterReusePage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="빗물 이용시설"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 소개", href: "/reuse/intro/law" },
-            { label: "빗물 이용시설" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      />
-
-      <Hr className="my-7" />
-
-      {/* 1) 빗물 재이용 소개 */}
-      <section className="mt-6">
-        <SectionTitle>빗물 재이용 소개</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={rainreuseIntro} alt="빗물 재이용 소개" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 2) 빗물이용시설 설치 관리 법적 의무 대상 */}
-      <section className="mt-6">
-        <SectionTitle>빗물이용시설 설치 관리 법적 의무 대상</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={rainreuseMandatory} alt="법적 의무 대상 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 3) 빗물이용시설 설계 방안 */}
-      <section className="mt-6">
-        <SectionTitle>빗물이용시설 설계 방안</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={rainwaterDesign} alt="빗물이용시설 설계 방안 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 4) 빗물이용시설 시설기준 및 관리기준 */}
-      <section className="pb-[200px]">
-        <SectionTitle>빗물이용시설 시설기준 및 관리기준</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={rainwaterStandards} alt="빗물이용시설 시설기준 및 관리기준 설명" />
-        </div>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/intro/sewage/page.tsx b/apps/dm_new/app/(with-layout)/intro/sewage/page.tsx
deleted file mode 100644
index 526fd4e9c..000000000
--- a/apps/dm_new/app/(with-layout)/intro/sewage/page.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-// 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 (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-type ImgCardProps = {
-  src: StaticImageData;
-  alt: string;
-};
-
-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-        style={{ width: "auto", height: "auto" }}
-      />
-    </div>
-  );
-}
-
-export default function TreatedWaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="하수처리수"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 소개", href: "/reuse/intro/law" },
-            { label: "하수처리수" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      />
-
-      <Hr className="my-7" />
-
-      {/* 1) 하수처리수 */}
-      <section className="mt-6">
-        <SectionTitle>하수처리수</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={treatedwaterIntro} alt="하수처리수 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 2) 하수처리수 재이용시설 의무 대상 */}
-      <section className="pb-[200px]">
-        <SectionTitle>하수처리수 재이용시설 의무 대상</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={treatedwaterMandatory} alt="하수처리수 재이용시설 의무 대상 설명" />
-        </div>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/layout.tsx b/apps/dm_new/app/(with-layout)/layout.tsx
deleted file mode 100644
index 2c31919bc..000000000
--- a/apps/dm_new/app/(with-layout)/layout.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// app/(with-layout)/layout.tsx
-/**
- * 메인을 제외한 메뉴안 페이지의 layout
- */
-
-import "../reuse.module.css";
-import { StoreProvider } from "../store";
-import TopNav from "@/components/TopNav";
-
-export default function WithLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <StoreProvider>
-      <div className="pt-[83px]">{/* TopNav 높이만큼 */}
-        <TopNav />
-        <main className="ml-[260px]">{children}</main>{/* Lnb 너비만큼 */}
-      </div> 
-    </StoreProvider>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/status/greywater/page.tsx b/apps/dm_new/app/(with-layout)/status/greywater/page.tsx
deleted file mode 100644
index b84a6760d..000000000
--- a/apps/dm_new/app/(with-layout)/status/greywater/page.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-// 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 (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-type ImgCardProps = {
-  src: StaticImageData;
-  alt: string;
-};
-
-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-        style={{ width: "auto", height: "auto" }}
-      />
-    </div>
-  );
-}
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="중수도(현황)"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 현황", href: "/reuse/cases/rain" },
-            { label: "중수도(현황)" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      />
-
-      <Hr className="my-7" />
-
-      {/* 1) 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) */}
-      <section className="mt-6">
-        <SectionTitle>전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={greywaterOverall} alt="전체 중수도 설치 및 이용 현황 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 2) 중수공장 및 발전시설 내 중수도 설치 및 이용 현황 */}
-      <section>
-        <SectionTitle>공장 및 발전시설 내 중수도 설치 및 이용 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={greywaterFactory} alt="공장 및 발전시설 내 중수도 설치 및 이용 현황 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 3) 중수도 건축물별 이용량 현황 */}
-      <section className="pb-16">
-        <SectionTitle>중수도 건축물별 이용량 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={greywaterBuilding} alt="중수도 건축물별 이용량 현황 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 4) 중수도 용도별 이용량 현황 */}
-      <section className="pb-[200px]">
-        <SectionTitle>중수도 용도별 이용량 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={greywaterUsage} alt="중수도 용도별 이용량 현황 설명" />
-        </div>
-      </section>      
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/status/layout.tsx b/apps/dm_new/app/(with-layout)/status/layout.tsx
deleted file mode 100644
index 614eb47ed..000000000
--- a/apps/dm_new/app/(with-layout)/status/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ReactNode } from "react";
-import Lnb from "@/components/Lnb";
-
-export default function CasesLayout({ children }: { children: ReactNode }) {
-  return (
-    <div className="flex gap-0">
-      <Lnb />
-      <main className="flex-1 px-[100px] pt-[80px]">{children}</main>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/status/rain/page.tsx b/apps/dm_new/app/(with-layout)/status/rain/page.tsx
deleted file mode 100644
index aa33147f0..000000000
--- a/apps/dm_new/app/(with-layout)/status/rain/page.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-// 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 (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-type ImgCardProps = {
-  src: StaticImageData;
-  alt: string;
-};
-
-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-        style={{ width: "auto", height: "auto" }}
-      />
-    </div>
-  );
-}
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="빗물이용시설(현황)"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 현황", href: "/reuse/cases/rain" },
-            { label: "빗물이용시설(현황)" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      />
-
-      <Hr className="my-7" />
-
-      {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
-      <section className="mt-6">
-        <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={rainwaterBuilding} alt="빗물이용시설의 건축물별 빗물이용량 현황 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */}
-      <section>
-        <SectionTitle>빗물이용시설의 용도별 분포 (2023년 기준)</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={rainwaterUsage} alt="빗물이용시설의 용도별 분포 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */}
-      <section className="pb-[200px]">
-        <SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={rainwaterUsageAmount} alt="빗물이용시설의 용도별 빗물이용량 현황 설명" />
-        </div>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/(with-layout)/status/sewage/page.tsx b/apps/dm_new/app/(with-layout)/status/sewage/page.tsx
deleted file mode 100644
index 19214da02..000000000
--- a/apps/dm_new/app/(with-layout)/status/sewage/page.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-// 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 (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-type HrProps = {
-  className?: string;
-};
-
-function Hr({ className = "" }: HrProps) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-type ImgCardProps = {
-  src: StaticImageData;
-  alt: string;
-};
-
-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-        style={{ width: "auto", height: "auto" }}
-      />
-    </div>
-  );
-}
-
-export default function GreywaterPage() {
-  return (
-    <div className="bg-white">  
-      <SubPageHeader
-        title="하수처리수 재이용시설(현황)"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 현황", href: "/reuse/cases/rain" },
-            { label: "하수처리수 재이용시설(현황)" },
-        ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
-      />
-
-      <Hr className="my-7" />
-
-      {/* 1) 연도별 하수처리수 재이용 현황 */}
-      <section className="mt-6">
-        <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={treatedWaterYear} alt="연도별 하수처리수 재이용 현황 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 2) 용도별 하수처리수 재이용 현황 */}
-      <section>
-        <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={treatedWaterUsage} alt="용도별 하수처리수 재이용 현황 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 3) 하수처리시설 설치 및 이용 현황 */}
-      <section>
-        <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={treatedWaterFacility} alt="하수처리시설 설치 및 이용 현황 설명" />
-        </div>
-      </section>
-
-      <Hr className="my-11" />
-
-      {/* 4) 시도별 하수처리수  재이용 현황 */}
-      <section className="pb-[200px]">
-        <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={treatedWaterRegion} alt="시도별 하수처리수 재이용 현황 설명" />
-        </div>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/dm_new/app/common/comFunction.ts b/apps/dm_new/app/common/comFunction.ts
deleted file mode 100644
index ec4894d49..000000000
--- a/apps/dm_new/app/common/comFunction.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import type {  RegionData,  } from "../store/wrStatus/type";
-
-
-
-export  const regionData:RegionData[] = [
-    { name: '서울', x: 170, y: 140, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '인천', x: 120, y: 150, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '경기', x: 210, y: 210, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '강원', x: 330, y: 120, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '충북', x: 260, y: 280, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '충남', x: 100, y: 320, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '세종', x: 180, y: 305, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '대전', x: 195, y: 360, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '전북', x: 170, y: 450, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '전남', x: 160, y: 600, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '광주', x: 120, y: 530, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '경북', x: 400, y: 320, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '경남', x: 310, y: 530, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '대구', x: 350, y: 450, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '울산', x: 450, y: 500, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '부산', x: 420, y: 550, values: [0.3, 0.3, 0.2, 0.2] },
-    { name: '제주', x: 60, y: 750, values: [0.3, 0.3, 0.2, 0.2] },
-  ]
-
-export const regionIdMap: Record<string, string> = {
-    서울: '서울특별시',
-    부산: '부산광역시',
-    대구: '대구광역시',
-    인천: '인천광역시',
-    광주: '광주광역시',
-    대전: '대전광역시',
-    울산: '울산광역시',
-    세종: '세종특별자치시',
-    경기: '경기도',
-    강원: '강원특별자치도',
-    충북: '충청북도',
-    충남: '충청남도',
-    전북: '전라북도',
-    전남: '전라남도',
-    경북: '경상북도',
-    경남: '경상남도',
-    제주: '제주특별자치도'
-  };
-
-
-export const makeRegion = (region: string) => {
-  if (region === '서울특별시') return '서울'
-  if (region === '부산광역시') return '부산'
-  if (region === '대구광역시') return   '대구'
-  if (region === '인천광역시') return  '인천'
-  if (region === '광주광역시') return  '광주'
-  if (region === '대전광역시') return  '대전'
-  if (region === '울산광역시') return  '울산'
-  if (region === '세종특별자치시') return  '세종'
-  if (region === '경기도') return  '경기'
-  if (region === '강원특별자치도') return  '강원'
-  if (region === '충청북도') return  '충북'
-  if (region === '충청남도') return  '충남'
-  if (region === '전북특별자치도') return  '전북'
-  if (region === '전라남도') return  '전남'
-  if (region === '경상북도') return  '경북'
-  if (region === '경상남도') return  '경남'
-  if (region === '제주특별자치도') return  '제주'
-    return region;
-}
diff --git a/apps/dm_new/app/common/transValueFormat.tsx b/apps/dm_new/app/common/transValueFormat.tsx
deleted file mode 100644
index 4d76d84e0..000000000
--- a/apps/dm_new/app/common/transValueFormat.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-
-type CommonProps = {
-  value: string | number | '';
-  format: string;
-}
-
-export default function TransValueFormat({value='', format=''}: CommonProps) {
-  return (
-    format === 'yyyyMMdd' ? 
-      <>{value.toString().substring(0,4)+'-'+value.toString().substring(4,6)+'-'+value.toString().substring(6,8)}</>
-    : format === 'number' ?
-      <>{String(value ?? '').includes('.') 
-        ? String(value).split('.').map((part, index) => 
-            index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
-          ).join('.')
-        : String(value ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</>
-    : format === 'float1' ?
-      <>{String(value ?? '').includes('.') 
-        ? String(value).split('.').map((part, index) =>
-            index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
-          ).join('.')
-        : String(value ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</>
-    : <>{value}</>
-  )
-}
\ No newline at end of file
diff --git a/apps/dm_new/app/layout.tsx b/apps/dm_new/app/layout.tsx
deleted file mode 100644
index 0e45865e7..000000000
--- a/apps/dm_new/app/layout.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-import "./globals.css";
-import { setCookie } from "../src/shared/lib";
-
-setCookie("site-id-key", process.env.NEXT_PUBLIC_SITE_ID || "DM");
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-
-  return (
-    <html lang="ko">
-      <head>
-        <title>물재이용 대민</title>
-      </head>
-      <body>
-        <div className="min-w-[1800px] overflow-x-auto">
-          {children}
-        </div>
-      </body>
-    </html>
-  );
-}
diff --git a/apps/dm_new/app/store/common/index.tsx b/apps/dm_new/app/store/common/index.tsx
deleted file mode 100644
index e875c2eca..000000000
--- a/apps/dm_new/app/store/common/index.tsx
+++ /dev/null
@@ -1,502 +0,0 @@
-/**====================================
- * 보편적으로 쓰는 store 공간
- ====================================**/
-
-import { fetchType, getFetch } from '@/components/ui/api';
-
-/**
- * STORE - TYPE
- */
-
-// selectBox
-export type SelectDataType = {
-  text: string;
-  val: string;
-}
-
-export interface MenuItem {
-  menuCd: number;
-  menuKornNm: string;
-  menuEngNm: string;
-  parentId: number | null;
-  sortSeq: number;
-  iconNm?: string;
-  children: MenuItem[] | null;
-  levelNo: number;
-  urlPath: string;
-  menuLnkgTypeCd: string;
-  menuLnkgSn: number;
-  menuPath: string;
-  qrcd: string;
-  useYn: string;
-  otptYn: string;
-  newWndwYn: string;
-  requiredUrlPath: boolean;
-}
-
-// grid header 
-export type TableUpperProps = {
-    id: string;
-    title: string;
-    upName?: string;
-    upSequnce?: number;
-    align? : string;
-    row? : number;
-    rowSpan?: number;
-    colSpan?: number;
-}
-
-// 시도 데이터
-export type sidoDataType = {
-  adstDstrCd: number,
-  sido: string,
-}
-
-// 시군구 데이터
-export type sigunDataType = {
-  adstDstrCd: number,
-  gugun: string
-}
-
-// 권역 데이터
-export type regionDataType = {
-  rvbsnCd: string,
-  rvbsn: string,
-}
-
-// 단위유역 데이터
-export type unitWaterShedDataType = {
-  rvbsnCd: string,
-  lgbsn: string,
-}
-
-// 중권역 데이터
-export type middleRegionDataType = {
-  rvbsnCd: string,
-  mdmbsn: string,
-}
-
-// 환경청 데이터
-export type envPartDataType = {
-  lclgvrnmntCd: string,
-  lclgvrnmntNm: string,
-  adstDliStrCd: string,
-  adstDstrCd: string,
-}
-
-export type envPartSelectDataType = SelectDataType & {
-  adstDliStrCd: string,
-}
-
-/**
- * STORE - DATA
- */
-
-// 시도 데이터
-let selectSidoData: SelectDataType[] = [
-  { text: "전체", val: '0' }
-];
-
-// 시군구 데이터
-let selectSigunData: SelectDataType[] = [
-  { text: "전체", val: '0' }
-];
-
-// 권역 데이터
-const selectRegionData: SelectDataType[] = [
-  { text: "전체", val: '0' }
-];
-
-// 단위유역 데이터
-const selectUnitWaterShedData: SelectDataType[] = [
-];
-
-// 환경청 데이터
-let selectEnvPartData: envPartSelectDataType[] = [
-  { text: "전체", val: '0', adstDliStrCd: '' }
-];
-
-// 환경청 내 시도 데이터
-const selectEnvPartSidoData: SelectDataType[] = [
-  { text: "전체", val: '0' }
-];
-
-// 환경청 내 시군구 데이터
-const selectEnvPartSigunData: SelectDataType[] = [
-  { text: "전체", val: '0' }
-];
-
-// 구분 데이터
-// const selectPartData:SelectDataType[] = [
-//   { text: "행정별", val: '0' },
-//   { text: "유역별", val: '01' },
-//   { text: "환경청별", val: '02' },
-// ];
-
-// 상향 하향 데이터
-const selectUpdownData:SelectDataType[] = [
-  { text: "전체", val: '0' },
-  { text: "500이하", val: '499' },
-  { text: "500이상", val: '500' },
-];
-
-// 운영 상태 데이터
-const selectOperationData:SelectDataType[] = [
-  { text: "전체", val: '0' },
-  { text: "가동중", val: '1' },
-  { text: "재가동", val: '2' },
-  { text: "가동중지", val: '3' },
-  { text: "시설폐쇄", val: '4' },
-];
-
-// 시설 구분 데이터
-const selectFacilityPartData:SelectDataType[] = [
-  { text: "전체", val: '0' },
-  { text: "공공하수처리시설", val: 'SW' },
-  { text: "오수처리장", val: 'SS' },
-  { text: "개인하수처리시설", val: 'PB' },
-  { text: "분뇨처리장", val: 'NS' },
-  { text: "폐수처리장", val: 'LW' },
-  { text: "침출수처리장", val: 'LC' },
-  { text: "기타기초시설", val: 'ET' },
-];
-
-// 년도 데이터
-const getYearData = () => {
-  const year = new Date().getFullYear();
-  const year1 = year - 1;
-  const year2 = year - 2;
-  const year3 = year - 3;
-  const year4 = year - 4;
-  const year5 = year - 5;
-  return [
-    { text: year1 + "년", val: year1.toString() },
-    { text: year2 + "년", val: year2.toString() },
-    { text: year3 + "년", val: year3.toString() },
-    { text: year4 + "년", val: year4.toString() },
-    { text: year5 + "년", val: year5.toString() },
-  ]
-}
-
-const selectSearchYear:SelectDataType[] = getYearData();
-
-// 유량 기간 구분
-const selectFlowTerm : SelectDataType[] = [
-  { text: "연간", val: '0' },
-  { text: "하절기", val: '01' },
-  { text: "동절기", val: '02' },
-  { text: "청천시", val: '03' },
-  { text: "강우시", val: '04' },
-];
-
-// 유량 기간 구분
-const selectFlowPanel : SelectDataType[] = [
-  { text: "전체", val: '0'},
-    { text: "3mm미만", val: '1'},
-    { text: "3~10mm미만", val: '2'},
-    { text: "10~20mm미만", val: '3'},
-    { text: "20~30mm미만", val: '4'},
-    { text: "30~40mm미만", val: '5'},
-    { text: "40~50mm미만", val: '6'},
-    { text: "50~60mm미만", val: '7'},
-    { text: "60mm이상", val: '8'}, 
-];
-
-// 중권역 데이터
-const selectMiddleRegionData: SelectDataType[] = [
-  { text: "전체", val: '0' }
-];
-
-/**
- * STORE - API
- */
-
-// 시도 API 호출 함수 추가
-const fetchSidoData = async (): Promise<SelectDataType[]> => {
-  try {
-    const res = await getFetch(fetchType.FO, '/addr/city');
-    const data = res.data;
-    selectSidoData = [
-      { text: "전체", val: '0'},
-      ...data.map((item: sidoDataType) => ({
-          text: item.sido || '',
-          val: String(item.adstDstrCd) || ''
-      }))
-    ];
-    return selectSidoData;
-  } catch (error) {
-      console.error('시도 데이터를 가져오는데 실패했습니다:', error);
-      return selectSidoData;
-  }
-};
-
-// 시군구 API 호출 함수 추가
-const fetchSigunData = async (): Promise<SelectDataType[]> => {
-  try {
-    const res = await getFetch(fetchType.FO, '/addr/sgg');
-    const data = res.data;
-    selectSigunData = [
-      { text: "전체", val: '0' },
-      ...data
-      .map((item: sigunDataType) => ({
-          text: item.gugun || '',
-          val: String(item.adstDstrCd) || ''
-      }))
-    ];
-    return selectSigunData;
-  } catch (error) {
-    console.error('시군구 데이터를 가져오는데 실패했습니다:', error);
-    return selectSigunData;
-  }
-};
-
-// 권역 API 호출 함수 추가
-const fetchRegionData = async (): Promise<SelectDataType[]> => {
-  try {
-    const res = await getFetch(fetchType.FO, '/addr/sarea');
-    const data = res.data;
-    return [
-      { text: "전체", val: '0'},
-      ...data.map((item: regionDataType) => ({
-        text: item.rvbsn || '',
-        val: String(item.rvbsnCd) || ''
-      }))
-    ];
-  } catch (error) {
-    console.error('권역 데이터를 가져오는데 실패했습니다:', error);
-    return selectRegionData;
-  }
-};
-
-// 중권역 API 호출 함수 추가
-const fetchMiddleRegionData = async (): Promise<SelectDataType[]> => {
-  try {
-    const res = await getFetch(fetchType.FO, '/addr/midArea');
-    const data = res.data;
-    return [
-      { text: "전체", val: '0' },
-      ...data
-      .map((item: middleRegionDataType) => ({
-        text: item.mdmbsn || '',
-        val: String(item.rvbsnCd) || ''
-      }))
-    ];
-  } catch (error) {
-    console.error('중권역 데이터를 가져오는데 실패했습니다:', error);
-    return selectMiddleRegionData;
-  }
-};
-
-// 단위유역 API 호출 함수 추가
-const fetchUnitWaterShedData = async (): Promise<SelectDataType[]> => {
-  try {
-    const res = await getFetch(fetchType.FO, '/addr/largeArea');
-    const data = res.data;
-    return [
-      { text: "전체", val: '0' },
-      ...data
-      .map((item: unitWaterShedDataType) => ({
-        text: item.lgbsn || '',
-        val: String(item.rvbsnCd) || ''
-      }))
-    ];
-  } catch (error) {
-    console.error('단위유역 데이터를 가져오는데 실패했습니다:', error);
-    return selectUnitWaterShedData;
-  }
-};
-
-// 환경청 데이터
-const fetchEnvPartData = async (): Promise<envPartSelectDataType[]> => {
-  try {
-    const res = await getFetch(fetchType.FO, '/addr/govArea');
-    const data = res.data;
-    selectEnvPartData = [
-      { text: "전체", val: '0', adstDliStrCd: '' },
-      ...data
-      .map((item: envPartDataType) => ({
-        text: item.lclgvrnmntNm || '',
-        val: String(item.lclgvrnmntCd) || '',
-        adstDliStrCd: item.adstDliStrCd || ''
-      }))
-    ];
-    return selectEnvPartData;
-  } catch (error) {
-    console.error('환경청 데이터를 가져오는데 실패했습니다:', error);
-    return selectEnvPartData;
-  }
-};
-
-function sortMenus(items: MenuItem[]): MenuItem[] {
-  return [...items]
-    .sort((a, b) => a.sortSeq - b.sortSeq)
-    .map((item) => ({
-      ...item,
-      children: item.children ? sortMenus(item.children) : [],
-    }));
-}
-
-function isVisible(item: MenuItem): boolean {
-  return item.useYn !== "N" && item.otptYn !== "N";
-}
-
-function normalizeMenus(items: MenuItem[]): MenuItem[] {
-  return sortMenus(items)
-    .filter(isVisible)
-    .map((item) => ({
-      ...item,
-      children: item.children ? normalizeMenus(item.children) : [],
-    }));
-}
-
-export const REUSE_SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "DM";
-const anonymousMenuCache = new Map<string, MenuItem[]>();
-const anonymousMenuInFlight = new Map<string, Promise<MenuItem[]>>();
-
-export async function fetchAnonymousMenu(siteId = REUSE_SITE_ID): Promise<MenuItem[]> {
-  const cached = anonymousMenuCache.get(siteId);
-  if (cached) return cached;
-
-  const inFlight = anonymousMenuInFlight.get(siteId);
-  if (inFlight) return inFlight;
-
-  const request = (async () => {
-    const response = await fetch(`/cms-service/api/v1/menu/anonymous/user/${siteId}`, {
-      method: "GET",
-      headers: { "Content-Type": "application/json" },
-      cache: "no-store",
-    });
-
-    if (!response.ok) {
-      throw new Error(`Failed to load menu: ${response.status}`);
-    }
-
-    const data = (await response.json()) as MenuItem[];
-    const normalized = Array.isArray(data) ? normalizeMenus(data) : [];
-    anonymousMenuCache.set(siteId, normalized);
-    return normalized;
-  })();
-
-  anonymousMenuInFlight.set(siteId, request);
-  try {
-    return await request;
-  } finally {
-    anonymousMenuInFlight.delete(siteId);
-  }
-}
-
-function isPathMatched(pathname: string, urlPath: string) {
-  if (!urlPath) return false;
-  return pathname === urlPath || pathname.startsWith(`${urlPath}/`);
-}
-
-function hasMatchedPathInTree(menu: MenuItem, pathname: string): boolean {
-  if (isPathMatched(pathname, menu.urlPath)) return true;
-  return (menu.children ?? []).some((child) => hasMatchedPathInTree(child, pathname));
-}
-
-export function findActiveTopMenu(menus: MenuItem[], pathname: string): MenuItem | null {
-  const level1Menus = menus.filter((menu) => menu.levelNo === 1 || menu.parentId === null);
-  const matched = level1Menus.filter((menu) => hasMatchedPathInTree(menu, pathname));
-
-  return matched[0] ?? level1Menus[0] ?? null;
-}
-
-export function hasAnyChild(item: MenuItem): boolean {
-  return Array.isArray(item.children) && item.children.length > 0;
-}
-
-export function isMenuActive(pathname: string, menu: MenuItem): boolean {
-  return isPathMatched(pathname, menu.urlPath);
-}
-/**====================================
- * Store - expaort
- ====================================*/
-export type CommonAction = {
-  initializeCommonData: () => Promise<void>;
-  getMenuAuth: (menuCd:number) => Promise<void>;
-  fetchAnonymousMenu: (siteId?: string) => Promise<MenuItem[]>;
-}
-
-export type CommonType = {
-  Common: {
-    isInit: boolean;
-    selectSidoData: SelectDataType[];
-    selectSigunData: SelectDataType[];
-    selectUpdownData: SelectDataType[];
-    selectOperationData: SelectDataType[];
-    selectFacilityPartData: SelectDataType[];
-    selectSearchYear: SelectDataType[];
-    selectUnitWaterShedData: SelectDataType[];
-    selectRegionData: SelectDataType[];
-    selectMiddleRegionData: SelectDataType[];
-    selectEnvPartSidoData: SelectDataType[];
-    selectEnvPartSigunData: SelectDataType[];
-    selectFlowTerm: SelectDataType[];
-    selectFlowPanel: SelectDataType[];
-    selectEnvPartData: envPartSelectDataType[];
-    btnClass: string;
-  }
-}
-
-export const CommonState:CommonType = {
-  Common: {
-    isInit: false,
-    selectSidoData: selectSidoData,
-    selectSigunData: selectSigunData,
-    selectUpdownData: selectUpdownData,
-    selectOperationData: selectOperationData,
-    selectFacilityPartData: selectFacilityPartData,
-    selectSearchYear: selectSearchYear,
-    selectRegionData: selectRegionData,
-    selectUnitWaterShedData: selectUnitWaterShedData,
-    selectMiddleRegionData: selectMiddleRegionData,
-    selectEnvPartSidoData : selectEnvPartSidoData,
-    selectEnvPartSigunData : selectEnvPartSigunData,
-    selectFlowTerm: selectFlowTerm,
-    selectFlowPanel: selectFlowPanel,
-    selectEnvPartData : selectEnvPartData,
-    btnClass: "p-4 m-2 text-white rounded-sm text-lg font-medium"
-  }
-}
-
-export const CommonReducer:(set:any)=>CommonAction=(set: any) => {
-  return {
-    getMenuAuth : async (menuCd : number) =>{
-      const response = await getFetch(
-        "local",
-        `/cms-service/api/v1/menu-authrts/pageinfo/${menuCd}`
-      );
-      set((state: CommonType) => {
-        return {
-          ...state,
-          auth: {
-            mngAuthrtYn: response[0].mngAuthrtYn,
-            inqAuthrtYn: response[0].mngAuthrtYn,
-            regAuthrtYn: response[0].mngAuthrtYn,
-            mdfcnAuthrtYn: response[0].mngAuthrtYn,
-            delAuthrtYn: response[0].mngAuthrtYn,
-          },
-        };
-      });
-    },
-    // 시도 변경 이벤트
-    initializeCommonData: async () => {
-      const promiseSet = await Promise.all([fetchSidoData(), fetchSigunData(), fetchRegionData(), fetchUnitWaterShedData(), fetchMiddleRegionData(), fetchEnvPartData()]);
-      const [sidoData, sggData, regionData, unitData, midData, envData] = promiseSet;
-      set((state: CommonType) => ({
-        Common: {
-          ...state.Common,
-          selectSidoData: sidoData,
-          selectSigunData: sggData,
-          selectRegionData: regionData,
-          selectMiddleRegionData: midData,
-          selectUnitWaterShedData: unitData,
-          selectEnvPartData: envData
-        }
-      })
-    )},
-    fetchAnonymousMenu: async (siteId = REUSE_SITE_ID) => fetchAnonymousMenu(siteId)
-  }
-}
-export type CommonStore = CommonType & CommonAction;
diff --git a/apps/dm_new/app/store/index.tsx b/apps/dm_new/app/store/index.tsx
deleted file mode 100644
index 47170b3db..000000000
--- a/apps/dm_new/app/store/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client'
-
-import { type ReactNode, createContext, useContext, useRef } from 'react'
-import { useStore } from 'zustand'
-import { type DmStore, StoreZus } from './store'
-
-
-export type StoreApi = ReturnType<typeof StoreZus>
-
-export const StoreContext = createContext<StoreApi | undefined>(
-  undefined,
-)
-
-export interface StoreProviderProps {
-  children: ReactNode
-}
-
-export const StoreProvider = ({
-  children,
-}: StoreProviderProps) => {
-  const storeRef = useRef<StoreApi | null>(null)
-  if (!storeRef.current) {
-    // Create store instance if not initialized
-    storeRef.current = StoreZus() as StoreApi
-  }
-  return (
-    <StoreContext.Provider value={storeRef.current}>
-      {children}
-    </StoreContext.Provider>
-  )
-}
-
-export const useDmStore = <T,>(
-  selector: (store: DmStore) => T,
-): T => {
-  const storeContext = useContext(StoreContext)
-  if (!storeContext) {
-    throw new Error(`useStore must be used within StoreProvider`)
-  }
-
-  return useStore(storeContext, selector)
-}
\ No newline at end of file
diff --git a/apps/dm_new/app/store/map/index.tsx b/apps/dm_new/app/store/map/index.tsx
deleted file mode 100644
index f5b44c891..000000000
--- a/apps/dm_new/app/store/map/index.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config";
-import { fetchType, getFetch } from "@/components/ui/api";
-import { DEV_URL_FO } from "@/components/ui/config";
-import { getCookie } from "@common/components/lib/cookie";
-import type { FacilityInfo, SubsInfo } from "./type";
-
-const tokenId = getCookie(AUTH_USER_ID);
-const Authorization = getCookie(CLAIM_NAME);
-
-const checkWrRegList = async () => {
-  const wrRegList = await getFetch(fetchType.WR, `/reuseFc/pubFc`);
-  return wrRegList;
-};
-
-const getRuseFclt = async (
-  page: string,
-  sggOrCity: string,
-  searchTxt?: string
-) => {
-  const checkWrRegListRes = await checkWrRegList();
-
-  let url = `/prcsFclt/ruseInfo/${page ? page : 1}/5/A/${sggOrCity ? sggOrCity : "0"}/0/1/SW`;
-
-  const ruseList = checkWrRegListRes.data.filter((item: string) => item !== "");
-
-  if (searchTxt) {
-    url = url + `/${searchTxt}`;
-  }
-
-  const response = await fetch(DEV_URL_FO + url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      [AUTH_USER_ID]: tokenId ?? "",
-      [CLAIM_NAME]: Authorization ?? "",
-    },
-    body: JSON.stringify(ruseList),
-  });
-
-  const hasuList = await response.json().then((res: any) => {
-    const data = res.data
-      .map((item: any) => {
-        return {
-          ...item,
-          fctCpc: Number(item.fctCpc) || 0,
-          searchNm: item.fctNm,
-          searchPk: item.bscFctNm,
-        };
-      })
-      .filter((hasu:any) => ruseList.find((ruse:any) => hasu.bscFctCd === ruse));
-    return { data: data, count: res.count };
-  });
-
-  return hasuList;
-};
-
-export type DmMapActions = {
-  findRuseFclt(sggOrCity: string, searchTxt: string): void;
-  setSubsInfo(subsInfo: SubsInfo[]): void;
-};
-
-export type DmMapType = {
-  map: {
-    ruseFcltList: FacilityInfo[];
-    subsInfo: SubsInfo[];
-  };
-};
-
-export const dmMapState: DmMapType = {
-  map: {
-    ruseFcltList: [],
-    // subsInfo: [
-    //   {
-    //     ruseUtztnFcltNm: "수원제1,2 재이용1", // 재이용시설명
-    //     ruseUtztnFcltCd: "41110PB001R1",
-    //   },
-    //   {
-    //     ruseUtztnFcltNm: "낙양 재이용1", // 재이용시설명
-    //     ruseUtztnFcltCd: "41150SW001R1",
-    //   },
-    //   {
-    //     ruseUtztnFcltNm: "서남 재이용1", // 재이용시설명
-    //     ruseUtztnFcltCd: "11500PB001R1",
-    //   },
-    // ],
-    subsInfo:[]
-  },
-};
-export type DmMapStore = DmMapType & DmMapActions;
-
-export const DmMapReducer = (set: any): DmMapActions => {
-  return {
-    findRuseFclt: async (sggOrCity: string, searchTxt: string) => {
-      const ruseFcltList = await getRuseFclt("1", sggOrCity, searchTxt);
-
-      set((state: DmMapType) => ({
-        ...state,
-        map: {
-          ...state.map,
-          ruseFcltList: ruseFcltList.data,
-        },
-      }));
-    },
-    setSubsInfo: async (subsInfo: SubsInfo[]) => {
-      set((state: DmMapType) => ({
-        ...state,
-        map: {
-          ...state.map,
-          subsInfo: subsInfo,
-        },
-      }));
-    },
-  };
-};
diff --git a/apps/dm_new/app/store/map/type.tsx b/apps/dm_new/app/store/map/type.tsx
deleted file mode 100644
index adcaf7f37..000000000
--- a/apps/dm_new/app/store/map/type.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-export type FacilityInfo= {
-    bscFctCd: string;                 // 기본시설 코드
-    bscFctNm: string;                 // 기본시설명
-    rvbsnCd: string;                  // 유역 코드
-    rvbsn: string;                    // 유역명
-    lgbsn: string;                    // 대권역명
-    mdmbsn: string;                   // 중권역명
-    rgnCd: string;                    // 관할청 코드
-    rgnNm: string;                    // 관할청 명칭
-    adstDstrCd: string;              // 행정구역 코드
-    sido: string;                     // 시도
-    gugun: string;                    // 구군
-    addr: string;                     // 주소
-    fctCpc: string;                   // 시설용량
-    efflWqltStndrdCd: string;        // 방류수 수질기준 코드
-    efflWqltStndrdNm: string;        // 방류수 수질기준명
-    trtFrfNm: string;                // 처리공법명
-    trtDstr: string;                 // 처리구역
-    rnDt: string;                    // 사용개시일 (예: YYYYMMDD)
-    cmplDt: string;                  // 준공일자 (예: YYYYMMDD)
-    trstOprEtpNm: string;            // 위탁운영기관명
-    bscFctClsNm: string;             // 기본시설 구분명
-    sitArea: string;                 // 부지면적
-    trtDstrArea: string;             // 처리구역 면적
-    swrTrtPopl: string;              // 하수처리 인구
-    mnstr: string;                   // 총괄 유역
-    efflWtrrgn: string;              // 방류수역
-    rvNm: string;                    // 하천명
-    bscFctClsCd: string;             // 기본시설 구분 코드
-    rvbsnNm: string;                 // 유역명
-    tel: string;                     // 전화번호
-    rswtrYn: string;                 // 재이용수 여부 ("Y" 또는 "N")
-    ruse: boolean;                   // 재이용 여부 (boolean)
-  }
-
-  export type SubsInfo={
-    ruseUtztnFcltNm: string;        // 재이용시설명
-    ruseUtztnFcltCd: string;        // 재이용시설 코드
-  }
\ No newline at end of file
diff --git a/apps/dm_new/app/store/readme.md b/apps/dm_new/app/store/readme.md
deleted file mode 100644
index 0710aa69b..000000000
--- a/apps/dm_new/app/store/readme.md
+++ /dev/null
@@ -1,121 +0,0 @@
-# Zustand store
-## Zustand 등록방법 
-**-- index.tsx --**
-### context 등록
-기본적으로 createContext를 통해 react에 context를 생성해서 react에서 사용할 수 있도록 해야함.
-``` js
-//StoreZus는 내부적으로 사용하기 위한 store파일에서 따로 생성함.
-export type StoreApi = ReturnType<typeof StoreZus>
-//react에서 사용하기 위한 context 생성.
-export const StoreContext = createContext<StoreApi | undefined>(
-  undefined,
-)
-```
-
-### component로 작성
-등록된 context를 component화 시키기 위한 작업
-```js
-//외부에서 호출시 <StoreProvider> 형태로 호출.
-//app이나 home에서 전체적인 사용이 되도록 작성해야함.
-export const StoreProvider = ({
-  children,
-}: StoreProviderProps) => {
-  const storeRef = useRef<StoreApi>(null)
-  if (!storeRef.current) {
-    //StoreZus는 store.tsx를 봐야함.
-    storeRef.current = StoreZus()
-  }
-  return (
-    <StoreContext.Provider value={storeRef.current}>
-      {children}
-    </StoreContext.Provider>
-  )
-}
-```
-
-### store 등록
-react에서 사용하는 store에 현재 context 등록
-```js
-export const useWrStore = <T,>(
-  selector: (store: WrStore) => T,
-): T => {
-  const storeContext = useContext(StoreContext)
-  if (!storeContext) {
-    throw new Error(`useStore must be used within StoreProvider`)
-  }
-
-  return useStore(storeContext, selector)
-}
-```
-
-## Zustand 사용방법
-**-- store.tsx, 폴더별 index.tsx --**
-### 기본 store 생성
-index.tsx의 context에 사용되는 StoreZus를 추가하여 사용됨.
-
-외부에서 생성된 state, actions를 사용 가능한 구조
-```js
-import { createStore } from 'zustand/vanilla';
-import { tableActionsExport, tableStateExport, type tableState, type tableType } from './publicReuseFaciltyInsert/index';//외부 파일 위치.
-export type WrStore = tableType;//typescript이므로 사용되는 스크립트를 type1 & type2 형식으로 넣어야함.
-//index.tsx에서 사용하는 store 생성.
-export const StoreZus = (initState: tableState = tableStateExport) => {
-  return createStore<WrStore>()((set) => {
-    return {
-        //아래에서 사용하는 state & actions은 외부 폴더에서 가져다가 사용.
-      ...initState,//외부에 있는 기본 초기값 state
-      ...tableActionsExport(set)//외부에 있는 actions
-    }
-  })
-}
-```
-### 외부 스토어 작성 방법
-외부 스토어는 export를 어떻게 할건지만 정하면됨.
-
-사용하는 store.tsx에서 import를 받기만 하면 사용가능.
-#### 타입을 외부로 빼는 방법
-```js
-export type tableState = {
-    isInit: boolean;
-    upHeadList: TableUpperProps[];
-    publicReuseFacilityUper: PublicReuseFacility[];
-}
-type tableActions = {
-    decrementList: () => void
-}
-
-export type tableType = tableState & tableActions;
-```
-#### 초기값 state를 외부로 빼는 방법
-```js
-export const tableStateExport:tableState= {
-    isInit:false,
-    upHeadList: upHeadList,
-    publicReuseFacilityUper: publicReuseFacilityUper,
-}
-```
-#### actions를 외부로 빼는 방법
-```js
-//tableActionsExport를 import 받아서 실행하여 return 된 값을 사용
-export const tableActionsExport:(set:any)=>tableActions=
-//set을 통해 react store에 등록
-(set: any) => {
-    return {
-        //decrementList Object 형태로 전달
-        decrementList:
-        //set 함수를 실행해서 react store에 등록
-        ()=>set(
-            // store에 등록되는 함수 구조를 가지고 있음.
-            (state:tableState) => {
-                //actions 실질적인 로직 작성하는 곳.
-            return (
-            { 
-                upHeadList: state.upHeadList, 
-                publicReuseFacilityUper: 
-                state.publicReuseFacilityUper.slice(0, state.publicReuseFacilityUper.length - 1)
-            })}
-        )
-    }
-}
-```
-
diff --git a/apps/dm_new/app/store/sdmMng/index.tsx b/apps/dm_new/app/store/sdmMng/index.tsx
deleted file mode 100644
index 393f2503b..000000000
--- a/apps/dm_new/app/store/sdmMng/index.tsx
+++ /dev/null
@@ -1,801 +0,0 @@
-import { fetchType, getFetch, postFetch } from "@/components/ui/api";
-import type { SelectDataType } from "@common/business_components/ui";
-import type { TableUpperProps } from "../common";
-import toast from "react-hot-toast";
-import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
-import { z } from "zod";
-
-/**====================================
- * Store - 타입
-=====================================*/
-
-export const sdmInfoFormSchema = z.object({
-  sdmNm: z.string().min(1, "수요처를 선택해주세요"),
-  demandYmd: z.date().optional(),
-  demandQnty: z
-    .string()
-    .min(1, "요구수량을 입력해주세요")
-    .regex(/^[0-9]+$/, "요구수량은 숫자만 입력 가능합니다"),
-  usePurpose: z.string().optional(),
-  money: z.string().regex(/^[0-9]+$/, "희망단가는 숫자만 입력 가능합니다"),
-  /**요구수질 */
-  reqWaterQlty: z.string().optional(),
-  grssClfg: z.number().nullish(),
-  tn: z.number().nullish(),
-  combResdch: z.number().nullish(),
-  tph: z.number().nullish(),
-  trbt: z.number().nullish(),
-  ph: z.string().nullish(),
-  bod: z.number().nullish(),
-  /**컬럼확인필요 */
-  clIonQnt: z.number().nullish(),
-  smll: z.string(),
-  cdtnv: z.number().nullish(),
-  crmty: z.number().nullish(),
-  rmrk: z.string().optional(),
-  /* telno: z.string()
-    .min(8, "전화번호는 8자 이상 입력해주세요")
-    .max(12, "전화번호는 12자 이내로 입력해주세요")
-    .regex(/^[0-9-]+$/, "전화번호는 숫자와 하이픈(-)만 입력 가능합니다"), */
-  candidateTitle: z
-    .array(
-      z.object({
-        ruseUtztnFcltNm: z.string(),
-        ruseUtztnFcltCd: z.string(),
-      })
-    )
-    .optional(),
-}).superRefine((data, ctx) => {
-  const disabledFields = disableRules[data.usePurpose ?? ""] || [];
-  // 모든 수질 관련 필드
-  // 총대장균군수는 null 값을 불검출로 표시하기때문에 해당 검사에서 제외함.
-  const allFields: (keyof typeof data)[] = [
-    "tn", "combResdch", "tph",
-    "trbt", "ph", "bod", "clIonQnt",
-    "smll", "cdtnv", "crmty",
-  ];
-
-  const allFieldsName: Record<string, string> = {
-    tn: "총질소(T-N)(mg/L)",
-    combResdch: "결합잔류염소(mg/L)",
-    tph: "총인(T-P)(mg/L)",
-    trbt: "탁도(NTU)",
-    ph: "수소이온농도(pH)",
-    bod: "생물학적 산소요구량(BOD)(mg/L)",
-    clIonQnt: "염화물(mgCL/L)",
-    smll: "냄새",
-    cdtnv: "전기전도도(㎲/cm)",
-    crmty: "색도(도)",
-  };
-  allFields.forEach((field) => {
-    const isDisabled = disabledFields.includes(field);
-    if (!isDisabled) {
-      // disabled가 아닌 필드는 반드시 값이 있어야 함
-      const value = data[field];
-      if (typeof value === "string") {
-        if (value.trim().length === 0) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            path: [field],
-            message: `${allFieldsName[field]} 을 입력해주세요.`,
-          });
-        }
-      } else if (typeof value === "number") {
-        if (value <= 0 || Number.isNaN(value)) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            path: [field],
-            message: `${allFieldsName[field]} 을 입력해주세요.`,
-          });
-        }
-      } else if (value == null) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          path: [field],
-          message: `${allFieldsName[field]}  을 입력해주세요.`,
-        });
-      }
-    }
-  });
-});
-
-export type SdmInfoFormData = z.infer<typeof sdmInfoFormSchema>;
-
-
-// 수요처 정보
-export type DemandCompBizType = {
-  index: number | '';
-  dmdInfoId: string | '';
-  dmdInfoFk: string | '';
-  bzmnNo: string | '';
-  dmdCoNm: string | '';
-  zip: string | '';
-  daddr: string | '';
-  telno: string | '';
-  rgtr: string | '';
-  useUsgCd: string | '';
-  ctpvCd: string | '';
-  sggCd: string | '';
-  dmdAplyPswd: string | '';
-  wntUntprc: number | '';
-  dmndTmng: Date | '';
-  dmndQty: number | '';
-  grssClfg: number | null //총대장균군수
-  tn: number | null //총질소
-  combResdch: number | null //결합잔류염소
-  tph: number | null //총인
-  trbt: number | null //탁도
-  ph: string | ''; //수소이온농
-  blgcOxygDmndQnt: number | null //생물학적산소요구량
-  clIonQnt: number | null //염화물
-  smll: string | ''; //냄새
-  cdtnv: number | null; //전기전도도
-  crmty: number | null //색도
-  rmrk: string | '';
-  reqDt: string | '';
-  dmdInfoSn: number | '';
-  status: string | '';
-  splyCndtList: SupplyCandidate[] | [],
-  ruseUtztnFcltNm?: string | ''
-
-}
-
-// 공급 후보자 타입 정의
-export type SupplyCandidate = {
-  ruseUtztnFcltNm: string;
-  ruseUtztnFcltCd: string;
-};
-
-
-export type DemandMatchings = {
-  splyFcltFk: string | '';
-  splyFcltFlg: string | '';
-  pbnstRuseFcltBizFk: number | '';
-  splyBgngDay: string | '';
-  splyEndDay: string | '';
-  splyCpct: number | '';
-  splyFmYn: string | '';
-  useUsgCd: string | '';
-  dmdInfoSn: number | '';
-  splyCndtList: string | '';
-  mtchnCmptnYmd: string | '';
-  rvwCmptnYmd: string | '';
-  regDt: string | '';
-  rgtr: string | '';
-  mdfcnDt: string | '';
-  mdfr: string | '';
-}
-
-// 유사사례
-export type SimilarCaseType = {
-  ruseBizNm: string | '';    // 사업명
-  bizBgngDate: string | '';
-  bizEndDate: string | '';
-  splyFcltKnd: string | '';
-  splyFcltNm: string | '';
-  splyFcltCpct: string | '';
-  dmdFcltNm: string | '';
-  dmdFcltAddr: string | '';
-  ruseFcltCpct: string | '';
-  ruseFcltPplLen: string | '';
-  ruseFcltUsg: string | '';
-  ruseFcltSplyCpct: string | '';
-  ruseFcltPrcsMsrc: string | '';
-  grnteWqUsg: string | '';
-  grnteWqGrssClfg: string | '';
-  grnteWqCombResdch: string | '';
-  grnteWqTrbt: string | '';
-  grnteWqBod: string | '';
-  grnteWqSmll: string | '';
-  grnteWqCrmty: string | '';
-  grnteWqTn: string | '';
-  grnteWqTp: string | '';
-  grnteWqPh: string | '';
-  grnteWqClIonQnt: string | '';
-  grnteWqCndctStat: string | '';
-  grnteWqRmrk: string | '';
-  reqBizReuseFcltCst: string | '';
-  reqBizPplCst: string | '';
-  reqBizArchCst: string | '';
-  reqBizMchnCst: string | '';
-  reqBizMtrngCst: string | '';
-  reqBizGisCst: string | '';
-  reqBizCctvCst: string | '';
-  reqBizCmcnCst: string | '';
-  reqBizWstCst: string | '';
-  reqBizDesignCst: string | '';
-  reqBizSpvsCst: string | '';
-  reqBizSbsdCst: string | '';
-  reqBizEtc: string | '';
-  reqBizGrssCst: string | '';
-  prcmPlanNlep: string | '';
-  prcmPlanLcep: string | '';
-  prcmPlanBrdnCst: string | '';
-  prcmPlanEcqrRt: string | '';
-  prcmPlanGrssCst: string | '';
-  clclnNlep: string | '';
-  clclnLcep: string | '';
-  clclnBrdnCst: string | '';
-  clclnEcqrRt: string | '';
-  clclnGrssCst: string | '';
-}
-
-// 사업비 상세정보
-export type MoneyDetailType = {
-  reqBizGrssCst: string | '';
-  reqBizReuseFcltCst: string | '';
-  reqBizPplCst: string | '';
-  reqBizArchCst: string | '';
-  reqBizMchnCst: string | '';
-  reqBizMtrngCst: string | '';
-  reqBizGisCst: string | '';
-  reqBizCctvCst: string | '';
-  reqBizCmcnCst: string | '';
-  reqBizWstCst: string | '';
-  reqBizDesignCst: string | '';
-  reqBizSpvsCst: string | '';
-  reqBizSbsdCst: string | '';
-  reqBizEtc: string | '';
-
-  /** 재원조달계획(백만원원) */
-  prcmPlanGrssCst: string | '';
-  prcmPlanNlep: string | '';
-  prcmPlanLcep: string | '';
-  prcmPlanBrdnCst: string | '';
-  prcmPlanEcqrRt: string | '';
-  /** 사업비 정산(백만원) */
-  clclnGrssCst: string | '';
-  clclnNlep: string | '';
-  clclnLcep: string | '';
-  clclnBrdnCst: string | '';
-  clclnEcqrRt: string | '';
-}
-// 규칙 타입 선언
-export type DisableRulesType = Record<string, string[]>;
-/**====================================
- * Store - 데이터
- ====================================*/
-// 수요처 정보
-const demandCompList: DemandCompType[] = [
-]
-
-
-const disableRules: DisableRulesType = {
-  "청소": ["tn", 'tph', "clIonQnt", 'cdtnv'],
-  "화장실용수": ["tn", 'tph', "clIonQnt", 'cdtnv'],
-  "세척": ["combResdch", "crmty", 'tph', 'tn', "clIonQnt", 'cdtnv'],
-  "살수": ["combResdch", "crmty", 'tph', 'tn', "clIonQnt", 'cdtnv'],
-  "조경": ["combResdch", "crmty", 'tph', 'cdtnv'],
-  "농업_간접용수": ["combResdch", "crmty", 'tn', 'tph', 'clIonQnt'],
-  "농업_직접용수": ["combResdch", "crmty", 'tn', 'tph', 'clIonQnt'],
-  "하천": ["combResdch", "trbt", "crmty", 'clIonQnt', 'cdtnv'],
-  '공업': []
-};
-
-const defaultRules: Record<string, object> = {
-  "청소": {
-    grssClfg: null,
-    combResdch: 0.2,
-    trbt: 2,
-    bod: 5,
-    crmty: 20,
-    ph: "5.8~8.5",
-    smll: '불쾌하지않을것',
-    tn: null,
-    tph: null,
-    clIonQnt: null,
-    cdtnv: null,
-
-  },
-  "화장실용수": {
-    grssClfg: null,
-    combResdch: 0.2,
-    trbt: 2,
-    bod: 5,
-    crmty: 20,
-    smll: '불쾌하지않을것',
-    ph: "5.8~8.5",
-    tn: null,
-    tph: null,
-    clIonQnt: null,
-    cdtnv: null,
-  },
-  "세척": {
-    grssClfg: null,
-    trbt: 2,
-    bod: 5,
-    ph: "5.8~8.5",
-    combResdch: null,
-    smll: '불쾌하지않을것',
-    crmty: null,
-    tn: null,
-    tph: null,
-    clIonQnt: null,
-    cdtnv: null,
-  },
-  "살수": {
-    grssClfg: null,
-    trbt: 2,
-    bod: 5,
-    ph: "5.8~8.5",
-    smll: '불쾌하지않을것',
-    combResdch: null,
-    crmty: null,
-    tn: null,
-    tph: null,
-    clIonQnt: null,
-    cdtnv: null,
-  },
-  "조경": {
-    grssClfg: null,
-    trbt: 2,
-    bod: 5,
-    ph: "5.8~8.5",
-    smll: '불쾌하지않을것',
-    clIonQnt: 250,
-    combResdch: null,
-    crmty: null,
-    tn: null,
-    tph: null,
-    cdtnv: null,
-  },
-  "농업_간접용수": {
-    grssClfg: null,
-    trbt: 5,
-    bod: 8,
-    ph: "5.8~8.5",
-    cdtnv: 2000,
-    combResdch: null,
-    crmty: null,
-    tn: null,
-    tph: null,
-    clIonQnt: null,
-  },
-  "농업_직접용수": {
-    grssClfg: null,
-    trbt: 2,
-    bod: 8,
-    smll: '불쾌하지않을것',
-    ph: "5.8~8.5",
-    cdtnv: 700,
-    combResdch: null,
-    crmty: null,
-    tn: null,
-    tph: null,
-    clIonQnt: null,
-  },
-  "하천": {
-    grssClfg: 1000,
-    bod: 5,
-    tn: 10,
-    tph: 0.5,
-    smll: '불쾌하지않을것',
-    ph: "5.8~8.5",
-    combResdch: null,
-    trbt: null,
-    crmty: null,
-    clIonQnt: null,
-    cdtnv: null
-  },
-  '공업': {
-    grssClfg: null,
-    bod: null,
-    tn: null,
-    tph: null,
-    ph: "~",
-    combResdch: null,
-    smll: '불쾌하지않을것',
-    trbt: null,
-    crmty: null,
-    clIonQnt: null,
-    cdtnv: null
-  }
-};
-
-// 사용용도
-const useTypesData: SelectDataType[] = [
-  { text: '청소', val: "청소" },
-  { text: "화장실용수", val: "화장실용수" },
-  { text: "세척", val: "세척" },
-  { text: "살수", val: "살수" },
-  { text: "조경", val: "조경" },
-  { text: "농업_간접용수", val: "농업_간접용수" },
-  { text: "농업_직접용수", val: "농업_직접용수" },
-  { text: "하천", val: "하천" },
-  { text: "공업", val: "공업" },
-];
-
-// 유사사례 모달 헤더
-export const similarCaseModalHeader: TableUpperProps[] = [
-  { id: "ruseBizNm", title: "사업명", row: 0, rowSpan: 2 },
-  { id: "bizBgngDate", title: "사업시작일", row: 0, rowSpan: 2 },
-  { id: "bizEndDate", title: "사업종료일", row: 0, rowSpan: 2 },
-  { id: "A", title: "공급처", row: 0, colSpan: 3 },
-  { id: "splyFcltKnd", title: "시설종류", row: 1 },
-  { id: "splyFcltNm", title: "공급처명", row: 1 },
-  { id: "splyFcltCpct", title: "시설용량\n(㎥/일)", row: 1 },
-  { id: "B", title: "수요처", row: 0, colSpan: 2 },
-  { id: "dmdFcltNm", title: "수요처명", row: 1 },
-  { id: "dmdFcltAddr", title: "주소", row: 1 },
-  { id: "C", title: "재이용시설", row: 0, colSpan: 5 },
-  { id: "ruseFcltCpct", title: "시설용량\n(㎥/일)", row: 1 },
-  { id: "ruseFcltPplLen", title: "관로\n(km)", row: 1 },
-  { id: "ruseFcltUsg", title: "용도", row: 1 },
-  { id: "ruseFcltSplyCpct", title: "공급량\n(㎥/일)", row: 1 },
-  { id: "ruseFcltPrcsMsrc", title: "처리공법", row: 1 },
-  { id: "D", title: "보증수질", row: 0, colSpan: 13 },
-  { id: "grnteWqUsg", title: "용도별", row: 1 },
-  { id: "grnteWqGrssClfg", title: "총대장균군수\n(개/100ml)", row: 1 },
-  { id: "grnteWqCombResdch", title: "결합잔류염소\n(mg/L)", row: 1 },
-  { id: "grnteWqTrbt", title: "탁도\n(NTU)", row: 1 },
-  { id: "grnteWqBod", title: "생물학적산소요구량\n(BOD)\n(mg/L)", row: 1 },
-  { id: "grnteWqSmll", title: "냄새\n(개/100ml)", row: 1 },
-  { id: "grnteWqCrmty", title: "색도\n(도)", row: 1 },
-  { id: "grnteWqTn", title: "총질소\n(T-N)\n(mg/L)", row: 1 },
-  { id: "grnteWqTp", title: "총인\n(T-P)\n(mg/L)", row: 1 },
-  { id: "grnteWqPh", title: "수소이온농도\n(pH)", row: 1 },
-  { id: "grnteWqClIonQnt", title: "염화물\n(mgCL/L)", row: 1 },
-  { id: "grnteWqCndctStat", title: "전기전도도\n(μS/cm)", row: 1 },
-  { id: "grnteWqRmrk", title: "비고", row: 1 },
-  { id: "reqBizGrssCst", title: "소요사업비\n(백만원)", row: 0, rowSpan: 2 },
-]
-
-// 유사사례 데이터
-const similarCaseList: SimilarCaseType[] = [
-
-]
-
-// 사업비 상세정보 모달 헤더
-export const moneyDetailModalHeader: TableUpperProps[] = [
-  { id: "A", title: "소요사업비(백만원)", row: 0, colSpan: 14 },
-  { id: "reqBizGrssCst", title: "총", row: 1, rowSpan: 2 },
-  { id: "B", title: "토목", row: 1, colSpan: 2 },
-  { id: "reqBizReuseFcltCst", title: "재이용시설", row: 2 },
-  { id: "reqBizPplCst", title: "관로", row: 2 },
-  { id: "reqBizArchCst", title: "건축", row: 1, rowSpan: 2 },
-  { id: "reqBizMchnCst", title: "기계", row: 1, rowSpan: 2 },
-  { id: "reqBizMtrngCst", title: "전기,계측", row: 1, rowSpan: 2 },
-  { id: "reqBizGisCst", title: "GIS/DB", row: 1, rowSpan: 2 },
-  { id: "reqBizCctvCst", title: "CCTV", row: 1, rowSpan: 2 },
-  { id: "reqBizCmcnCst", title: "시공 및 준공", row: 1, rowSpan: 2 },
-  { id: "reqBizWstCst", title: "폐기물", row: 1, rowSpan: 2 },
-  { id: "reqBizDesignCst", title: "설계비", row: 1, rowSpan: 2 },
-  { id: "reqBizSpvsCst", title: "감리비", row: 1, rowSpan: 2 },
-  { id: "reqBizSbsdCst", title: "시설 부대비", row: 1, rowSpan: 2 },
-  { id: "reqBizEtc", title: "기타", row: 1, rowSpan: 2 },
-  { id: "C", title: "재원조달계획(백만원)", row: 0, colSpan: 5 },
-  { id: "prcmPlanGrssCst", title: "총", row: 1, rowSpan: 2 },
-  { id: "prcmPlanNlep", title: "국비", row: 1, rowSpan: 2 },
-  { id: "prcmPlanLcep", title: "지방비", row: 1, rowSpan: 2 },
-  { id: "prcmPlanBrdnCst", title: "원인자부담", row: 1, rowSpan: 2 },
-  { id: "prcmPlanEcqrRt", title: "국고비율", row: 1, rowSpan: 2 },
-  { id: "D", title: "사업비 정산(백만원)", row: 0, colSpan: 5 },
-  { id: "clclnGrssCst", title: "총", row: 1, rowSpan: 2 },
-  { id: "clclnNlep", title: "국비", row: 1, rowSpan: 2 },
-  { id: "clclnLcep", title: "지방비", row: 1, rowSpan: 2 },
-  { id: "clclnBrdnCst", title: "원인자부담", row: 1, rowSpan: 2 },
-  { id: "clclnEcqrRt", title: "국고비율", row: 1, rowSpan: 2 },
-]
-
-// 사업비 상세정보
-const moneyDetailList: MoneyDetailType[] = [
-]
-
-// 수요정보 신청현황 헤더
-export const upHeadSdmInfoStatus: TableUpperProps[] = [
-  { id: "index", title: "No." },
-  { id: "ctpvCd", title: "시도", row: 0, rowSpan: 2 },
-  { id: "sggCd", title: "시군구", row: 0, rowSpan: 2 },
-  { id: "dmdCoNm", title: "회사명", row: 0, rowSpan: 2 },
-  { id: "daddr", title: "공장주소", row: 0, rowSpan: 2 },
-  { id: "telno", title: "전화번호", row: 0, rowSpan: 2 },
-  { id: "dmndTmng", title: "신청일자", row: 0, rowSpan: 2 },
-  { id: "status", title: "진행상태", row: 0, rowSpan: 2 },
-]
-
-// 수요정보 신청현황 데이터
-
-/**====================================
- * Store - Api
-=====================================*/
-// 수요처 등록  
-const postSdmData = async (data: DemandCompType) => {
-  try {
-    await postFetch("/reuseFc/request", data);
-    sessionStorage.setItem("user", JSON.stringify(data));
-    toast.success("수요처 등록에 성공하였습니다.");
-    return true;
-  } catch (error) {
-    console.log(error);
-    toast.error("수요처 등록에 실패하였습니다.");
-    return false;
-  }
-}
-
-// 수요정보 등록
-const postSdmInfoData = async (data: DemandCompBizType) => {
-  try {
-    await postFetch("/reuseFc/request/demandInfo", data);
-    toast.success('수요 정보 등록에 성공하였습니다.');
-  } catch (error) {
-    console.log(error);
-    toast.error('수요 정보 등록에 실패하였습니다.');
-  }
-}
-
-const postSdmLoginData = async (data: DemandCompType) => {
-  try {
-    const res = await postFetch("/reuseFc/request/login", data);
-    const jsonData = await res.json();
-
-    const status = jsonData.status;
-    const loginData = jsonData.data;
-    let loginSuccess = false;
-    if (status === 200 && loginData != null) {
-      alert("수요처 로그인에 성공하였습니다.");
-      delete loginData.dmdAplyPswd;
-      delete loginData.rgtr;
-      sessionStorage.setItem("user", JSON.stringify(loginData));
-      loginSuccess = true;
-    } else if (status === 401) {
-      alert("패스워드가 일치하지 않습니다.");
-      loginSuccess = false;
-    } else {
-      alert("등록된 수요처가 없습니다.");
-      loginSuccess = false;
-    }
-
-    return loginSuccess;
-  } catch (error) {
-    console.log(error);
-    alert("수요처 로그인에 실패하였습니다.");
-  }
-}
-
-const getDemandCompList = async (searchText: string, pageCnt: number) => {
-  try {
-    const url = '/reuseFc/request/' + (searchText ? searchText : '') + '/' + pageCnt;
-    const res = await getFetch(fetchType.WR, url);
-    return {
-      data: res?.data || [],
-      count: res?.count || 0
-    }
-  } catch (error) {
-    console.error(error + ' 수요처 정보를 불러오지 못했습니다.');
-    return { data: [], count: 0 };
-  }
-}
-
-const getSdmInfoStatusList = async (dmdInfoId: string) => {
-  try {
-    const url = '/reuseFc/request/' + dmdInfoId;
-    const res = await getFetch(fetchType.WR, url);
-    return res?.data || [];
-  } catch (error) {
-    console.error(error + ' 수요정보 신청현황을 불러오지 못했습니다.');
-    return [];
-  }
-}
-
-// 유사사례 조회
-const fetchGetSimilarCaseList = async (part: string, value: number | string) => {
-  try {
-    const url = '/reuseFc/pubFcRuseCase/dm/' + part + '/' + (value ? value : 0);
-    const res = await getFetch(fetchType.WR, url);
-    return res?.data || [];
-  } catch (error) {
-    console.error(error + ' 유사사례 조회에 실패하였습니다.');
-    return [];
-  }
-}
-
-/**====================================
- * Store - expaort
- ====================================*/
-export type SdmActions = {
-  initializeSdmData: () => void;
-  insertSdmData: (data: DemandCompType) => Promise<void>;
-  insertSdmInfoData: (data: DemandCompBizType) => Promise<void>;
-  getDemandCompList: (searchText: string, pageCnt: number) => Promise<void>;
-  actionLogin: (data: DemandCompType) => Promise<void>;
-  getSdmInfoStatusList: (dmdInfoId: string) => Promise<void>;
-  getSimilarCaseList: (part: string, value: number | string) => Promise<void>;
-  actionLogout: () => Promise<void>;
-}
-
-export type SdmType = {
-  Sdm: {
-    isInit: boolean;
-    useTypesData: SelectDataType[];
-    demandCompList: DemandCompType[];
-    upHeadSimilarCaseList: TableUpperProps[];
-    similarCaseList: SimilarCaseType[];
-    upHeadMoneyDetailList: TableUpperProps[];
-    moneyDetailList: MoneyDetailType[];
-
-    // 수요정보 신청현황
-    sdmInfoStatusList: DemandCompBizType[];
-    upHeadSdmInfoStatus: TableUpperProps[];
-    defaultRules: Record<string, object>
-    disableRules: DisableRulesType;
-    // 로그인관련
-    successNextPage: boolean;
-    successLogin: boolean;
-  }
-}
-
-export const SdmState: SdmType = {
-  Sdm: {
-    isInit: false,
-    useTypesData: useTypesData,
-    demandCompList: demandCompList,
-    upHeadSimilarCaseList: similarCaseModalHeader,
-    similarCaseList: similarCaseList,
-    upHeadMoneyDetailList: moneyDetailModalHeader,
-    moneyDetailList: moneyDetailList,
-    // 수요정보 신청현황
-    sdmInfoStatusList: [],
-    defaultRules: defaultRules,
-    disableRules: disableRules,
-    upHeadSdmInfoStatus: upHeadSdmInfoStatus,
-
-    // 로그인관련
-    successNextPage: false,
-    successLogin: false,
-  }
-}
-
-export const SdmReducer = (set: any): SdmActions => {
-  return {
-    initializeSdmData: async () => {
-    },
-
-    insertSdmData: async (data: DemandCompType) => {
-      const preRes = await getSdmInfoStatusList(data.dmdInfoId);
-      if (preRes?.dmdInfoId) {
-        toast.error('이미 등록된 수요처입니다.');
-        return;
-      }
-
-      const res = await postSdmData(data);
-      if (res) {
-        set((state: SdmType) => ({
-          Sdm: {
-            ...state.Sdm,
-            successNextPage: true,
-          }
-        }))
-      }
-    },
-
-    insertSdmInfoData: async (data: DemandCompBizType) => {
-      postSdmInfoData(data);
-    },
-
-    // 수요처 정보
-    getDemandCompList: async (searchText: string, pageCnt: number) => {
-      const res = await getDemandCompList(searchText, pageCnt);
-      if (res.data.length === 0) {
-        set((state: SdmType) => ({
-          Sdm: {
-            ...state.Sdm,
-            demandCompList: [],
-          }
-        }))
-        return;
-      } else {
-        set((state: SdmType) => ({
-          Sdm: {
-            ...state.Sdm,
-            demandCompList: res.data,
-          }
-        }))
-      }
-    },
-
-    // 수요정보 신청현황
-    getSdmInfoStatusList: async (dmdInfoId: string) => {
-      const res = await getSdmInfoStatusList(dmdInfoId);
-
-      if (res.length === 0) {
-        set((state: SdmType) => ({
-          Sdm: {
-            ...state.Sdm,
-            sdmInfoStatusList: [],
-          }
-        }))
-        return;
-      }
-      //const sdmInfoStatusList : DemandCompBizType[] = [];
-
-      const sdmInfoStatusList: DemandCompBizType[] = res.demandInfo.map((el: DemandCompBizType, index: number) => {
-        const matchingInfo = res.demandMatchings.find((matching: DemandMatchings) => matching.dmdInfoSn === el.dmdInfoSn);
-        const status = matchingInfo?.splyFcltFlg?.trim() === 'Sub' ? '검토' : matchingInfo?.splyFcltFlg?.trim() === 'matched' ? '매칭완료' : '신청';
-        const ruseUtztnFcltNm = matchingInfo?.ruseUtztnFcltNm ? matchingInfo.ruseUtztnFcltNm : '';
-
-
-        return ({
-          ...el,
-          index: ++index,
-          bzmnNo: res.bzmnNo,
-          dmdCoNm: res.dmdCoNm,
-          dmdInfoId: res.dmdInfoId,
-          zip: res.zip || '',
-          daddr: res.daddr,
-          telno: res.telno.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'),
-          rgtr: res.rgtr,
-          ctpvCd: res.ctpvCd,
-          sggCd: res.sggCd,
-          useUsgCd: el.useUsgCd,
-          dmndTmng: el.dmndTmng,
-          dmdInfoSn: el.dmdInfoSn,
-          status: status,
-          splyCndtList: el.splyCndtList,
-          ruseUtztnFcltNm: ruseUtztnFcltNm || ''
-        })
-      })
-
-      set((state: SdmType) => ({
-        Sdm: {
-          ...state.Sdm,
-          sdmInfoStatusList: sdmInfoStatusList,
-        }
-      }))
-    },
-
-    actionLogin: async (data: DemandCompType) => {
-      const loginSuccess = await postSdmLoginData(data);
-      set((state: SdmType) => ({
-        Sdm: {
-          ...state.Sdm,
-          successLogin: loginSuccess,
-        }
-      }))
-    },
-
-    // 유사사례 조회
-    getSimilarCaseList: async (part: string, value: number | string) => {
-      const res = await fetchGetSimilarCaseList(part, value);
-      const similarCaseList = res.map((el: SimilarCaseType) => {
-        const maskedBizNm = el.ruseBizNm
-          ? el.ruseBizNm.replace(/^(\s*)^\S+/, "***") // 첫 단어(공백 전까지) 치환
-          : el.ruseBizNm;
-
-        return {
-          ...el,
-          ruseBizNm: maskedBizNm,
-        };
-      });
-      console.log(similarCaseList);
-
-      if (similarCaseList && similarCaseList.length !== 0) {
-        set((state: SdmType) => ({
-          Sdm: {
-            ...state.Sdm,
-            similarCaseList: similarCaseList,
-          }
-        }))
-        return;
-      } else {
-        set((state: SdmType) => ({
-          Sdm: {
-            ...state.Sdm,
-            similarCaseList: [],
-          }
-        }))
-        return;
-      }
-    },
-
-    actionLogout: async () => {
-      sessionStorage.removeItem("user");
-      set((state: SdmType) => ({
-        Sdm: {
-          ...state.Sdm,
-          successLogin: false,
-        }
-      }))
-    }
-  }
-}
-export type SdmStore = SdmType & SdmActions;
diff --git a/apps/dm_new/app/store/store.tsx b/apps/dm_new/app/store/store.tsx
deleted file mode 100644
index 25508bae2..000000000
--- a/apps/dm_new/app/store/store.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { createStore } from "zustand/vanilla";
-import {
-  CommonReducer,
-  CommonState,
-  type CommonStore,
-  type CommonType,
-} from "./common";
-import { SdmReducer, SdmState, type SdmStore, type SdmType } from "./sdmMng";
-import {
-  dmMapState,
-  type DmMapType,
-  type DmMapStore,
-  DmMapReducer,
-} from "./map";
-import { tokenManager } from "@/src/entities/auth/lib/token-manager";
-import {
-  DmStatusReducer,
-  dmStatusState,
-  type DmStatusStore,
-  type DmStatusType,
-} from "./wrStatus";
-
-export type DmStore = CommonStore & SdmStore & DmMapStore & DmStatusStore;
-export type DmState = CommonType & SdmType & DmMapType & DmStatusType;
-
-export const StoreZus = (
-  initState: DmState = {
-    ...CommonState,
-    ...SdmState,
-    ...dmMapState,
-    ...dmStatusState,
-  }
-) => {
-  return createStore<DmStore>()((set) => {
-    if (typeof window !== "undefined") {
-      tokenManager.setToken("site-id-key", process.env.NEXT_PUBLIC_SITE_ID||"DM");
-      tokenManager.setToken("site-theme-key", "green");
-    }
-
-    return {
-      ...initState,
-      ...CommonReducer(set),
-      ...SdmReducer(set),
-      ...DmMapReducer(set),
-      ...DmStatusReducer(set),
-    };
-  });
-};
diff --git a/apps/dm_new/app/store/wrStatus/index.tsx b/apps/dm_new/app/store/wrStatus/index.tsx
deleted file mode 100644
index d3cc61cc4..000000000
--- a/apps/dm_new/app/store/wrStatus/index.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { fetchType, getFetch } from "@/components/ui/api";
-import type {
-  DmStatusDataType,
-  DmStatusChartType,
-  DmStatusBoardType,
-} from "./type";
-import type { SelectDataType } from "../common";
-import { makeRegion } from "@/app/common/comFunction";
-
-export type DmStatusActions = {
-  getDmStatusData(cityCd: SelectDataType[]): void; // 데이터의 연도 반환
-};
-
-export type DmStatusType = {
-  dmStatus: {
-    year : string;
-    statusData: DmStatusDataType[];
-    facilityTotals: string[];
-    chartData: DmStatusChartType[];
-  };
-};
-
-export const dmStatusState: DmStatusType = {
-  dmStatus: {
-    year : '',
-    statusData: [],
-    facilityTotals: [],
-    chartData: [],
-  },
-};
-export type DmStatusStore = DmStatusType & DmStatusActions;
-
-export const DmStatusReducer = (set: any): DmStatusActions => {
-  return {
-    getDmStatusData: async (cityCd: SelectDataType[]) => {
-      const data = await getFetch(fetchType.FO, "/dashBoard/daemin");
-      const year = data.data[0]?.year; // API 응답에서 year 값을 할당합니다.
-      console.log('cityCd ', cityCd)
-      const dataSum = data.data.reduce(
-        (acc: DmStatusDataType, item: DmStatusDataType) => {
-          acc.sewage = (
-            parseInt(acc.sewage.replaceAll(",", "")) +
-            parseInt(item.sewage.replaceAll(",", ""))
-          ).toLocaleString();
-          acc.rainwater = (
-            parseInt(acc.rainwater.replaceAll(",", "")) +
-            parseInt(item.rainwater.replaceAll(",", ""))
-          ).toLocaleString();
-          acc.reclaimed = (
-            parseInt(acc.reclaimed.replaceAll(",", "")) +
-            parseInt(item.reclaimed.replaceAll(",", ""))
-          ).toLocaleString();
-          acc.sewageCnt = (
-            parseInt(acc.sewageCnt.replaceAll(",", "")) +
-            parseInt(item.sewageCnt.replaceAll(",", ""))
-          ).toLocaleString();
-          acc.rainwaterCnt = (
-            parseInt(acc.rainwaterCnt.replaceAll(",", "")) +
-            parseInt(item.rainwaterCnt.replaceAll(",", ""))
-          ).toLocaleString();
-          acc.reclaimedCnt = (
-            parseInt(acc.reclaimedCnt.replaceAll(",", "")) +
-            parseInt(item.reclaimedCnt.replaceAll(",", ""))
-          ).toLocaleString();
-          return acc;
-        },
-        {
-          region: "합계",
-          sewage: "0",
-          rainwater: "0",
-          reclaimed: "0",
-          sewageCnt: "0",
-          rainwaterCnt: "0",
-          reclaimedCnt: "0",
-        }
-      );
-      data.data.unshift(dataSum);
-
-      //console.log("dataSum ", dataSum);
-      const facilityTotals = [
-        "하수재이용시설" + "(총" + dataSum?.sewageCnt + "개소)",
-        "빗물재이용시설" + "(총" + dataSum?.rainwaterCnt + "개소)",
-        "중수도재이용시설" + "(총" + dataSum?.reclaimedCnt + "개소)",
-      ];
-
-      const boardData: DmStatusBoardType[] = data.data.map(
-        (item: DmStatusDataType) => {
-          const regionText = item.sidoNm; //cityCd.find((city) => item.region === city.val);
-          const sewage = item.sewage;
-          const rainwater = item.rainwater;
-          const reclaimed = item.reclaimed;
-          const sewageCnt = item.sewageCnt;
-          const rainwaterCnt = item.rainwaterCnt;
-          const reclaimedCnt = item.reclaimedCnt;
-          
-            return {
-              region: regionText ? regionText : item.region,
-              sewage: sewageCnt + "(" + sewage.toLocaleString() + ")",
-              rainwater: rainwaterCnt + "(" + rainwater.toLocaleString() + ")",
-              reclaimed: reclaimedCnt + "(" + reclaimed.toLocaleString() + ")",
-            };
-        }
-      ).filter((item): item is DmStatusBoardType => item !== undefined);
-
-      //console.log("boardData ", boardData);
-      
-      const chartData = data.data.map((item) => ({
-        label: makeRegion(
-          cityCd.find((city) => item.region === city.val)?.text ?? ""
-        ),
-        하수: item.sewage,
-        빗물: item.rainwater,
-        중수도: item.reclaimed,
-      }));
-
-      set((state: DmStatusType) => ({
-        ...state,
-        dmStatus: {
-          ...state.dmStatus,
-          year : year,
-          statusData: boardData,
-          chartData: chartData,
-          facilityTotals: facilityTotals,
-        },
-      }));
-
-    },
-  };
-};
diff --git a/apps/dm_new/app/store/wrStatus/type.ts b/apps/dm_new/app/store/wrStatus/type.ts
deleted file mode 100644
index 2cf1b36f0..000000000
--- a/apps/dm_new/app/store/wrStatus/type.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-export type DmStatusDataType = {
-  sidoNm: string; // 시도명
-  region: string; // 시도코드
-  sewage: string;
-  rainwater: string;
-  reclaimed: string;
-  sewageCnt:string;
-  rainwaterCnt:string;
-  reclaimedCnt:string;
-};
-
-export type DmStatusBoardType = {
-  sidoNm: string; // 시도명
-  region: string;
-  sewage: string;
-  rainwater: string;
-  reclaimed: string;
-};
-
-export type DmStatusFcltType = {
-    sewageFclt: string;
-    rainwaterFclt: string;
-    reclaimedFclt: string;
-    thermalFclt: string;
-  };
-  
-  
-  
-export type DmStatusChartType = {
-    label: string,
-    하수: string,
-    빗물: string,
-    중수도: string,
-}
-
-export type RegionData = {
-    name: string;
-    x: number;
-    y: number;
-    values: number[];
-  }
\ No newline at end of file
diff --git a/apps/dm_new/components.json b/apps/dm_new/components.json
deleted file mode 100644
index d9ef0ae53..000000000
--- a/apps/dm_new/components.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "app/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}
\ No newline at end of file
diff --git a/apps/dm_new/components/CaseImageSlider.tsx b/apps/dm_new/components/CaseImageSlider.tsx
deleted file mode 100644
index 41d8987b8..000000000
--- a/apps/dm_new/components/CaseImageSlider.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-// 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 };
-
-type Props = {
-  slides: Slide[];
-  className?: string;
-  maxWidthClassName?: string; // 예: "max-w-[760px]"
-};
-
-export default function CaseImageSlider({
-  slides,
-  className = "",
-  maxWidthClassName = "max-w-[760px]",
-}: Props) {
-  const safeSlides = useMemo(() => slides.filter(Boolean), [slides]);
-  const [idx, setIdx] = useState(0);
-  const [dragging, setDragging] = useState(false);
-
-  const startX = useRef(0);
-  const deltaX = useRef(0);
-
-  const total = safeSlides.length;
-  const canSlide = total > 1;
-
-  const go = (dir: number) => {
-    if (!canSlide) return;
-    setIdx((prev) => {
-      const next = prev + dir;
-      if (next < 0) return total - 1;
-      if (next >= total) return 0;
-      return next;
-    });
-  };
-
-  // ← → 키보드 지원(선택)
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (!canSlide) return;
-      if (e.key === "ArrowLeft") go(-1);
-      if (e.key === "ArrowRight") go(1);
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [canSlide, total]);
-
-  // 드래그(마우스/터치)로 넘기기
-  const onPointerDown = (e: React.PointerEvent) => {
-    if (!canSlide) return;
-    setDragging(true);
-    startX.current = e.clientX;
-    deltaX.current = 0;
-    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-  };
-
-  const onPointerMove = (e: React.PointerEvent) => {
-    if (!dragging) return;
-    deltaX.current = e.clientX - startX.current;
-  };
-
-  const onPointerUp = () => {
-    if (!dragging) return;
-    setDragging(false);
-
-    const threshold = 60; // 넘김 감도
-    if (deltaX.current > threshold) go(-1);
-    else if (deltaX.current < -threshold) go(1);
-
-    deltaX.current = 0;
-  };
-
-  if (!total) return null;
-
-  return (
-    <section className={className}>
-      <div className={`mx-auto ${maxWidthClassName}`}>
-        <div className="relative">
-          {/* 좌측 버튼 */}
-          <button
-            type="button"
-            onClick={() => go(-1)}
-            className="absolute left-[-60px] top-1/2 -translate-y-1/2 z-10
-                        w-[80px] h-[80px] rounded-full border border-black/20 bg-white
-                        grid place-items-center shadow-sm hover:bg-black/[0.03]"
-            >
-            <Image
-              src="/images/landing/icon_left_arrow.png"
-              alt="이전"
-              width={12}
-              height={22}
-              className="w-[12px] h-[22px]"
-            />
-          </button>
-
-
-          {/* 우측 버튼 */}
-          <button
-            type="button"
-            onClick={() => go(1)}
-            className="absolute right-[-60px] top-1/2 -translate-y-1/2 z-10
-                        w-[80px] h-[80px] rounded-full border border-black/20 bg-white
-                        grid place-items-center shadow-sm hover:bg-black/[0.03]"
-            >
-            <Image
-              src="/images/landing/icon_right_arrow.png"
-              alt="다음"
-              width={12}
-              height={22}
-              className="w-[12px] h-[22px]"
-            />
-          </button>
-
-
-          {/* 뷰포트 */}
-          <div
-            className={[
-              "overflow-hidden",
-              "select-none touch-pan-y",
-              "cursor-grab active:cursor-grabbing",
-              "w-[583px] h-[400px] mx-auto",
-            ].join(" ")}
-            onPointerDown={onPointerDown}
-            onPointerMove={onPointerMove}
-            onPointerUp={onPointerUp}
-            onPointerCancel={onPointerUp}
-          >
-            <div
-              className="flex transition-transform duration-300 ease-out"
-              style={{ transform: `translateX(-${idx * 100}%)` }}
-            >
-              {safeSlides.map((s, i) => (
-                <div key={`${s.src}-${i}`} className="min-w-full">
-                  <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>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* 도트 */}
-        {canSlide && (
-          <div className="mt-3 flex items-center justify-center gap-2">
-            {safeSlides.map((_, i) => {
-              const active = i === idx;
-              return (
-                <button
-                  key={i}
-                  type="button"
-                  onClick={() => setIdx(i)}
-                  aria-label={`${i + 1}번 슬라이드`}
-                  className={[
-                    "h-2 w-2 rounded-full",
-                    active ? "bg-black/70" : "bg-black/20 hover:bg-black/35",
-                  ].join(" ")}
-                />
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}
diff --git a/apps/dm_new/components/Lnb.tsx b/apps/dm_new/components/Lnb.tsx
deleted file mode 100644
index b3861fbe0..000000000
--- a/apps/dm_new/components/Lnb.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
-import {
-  fetchAnonymousMenu,
-  findActiveTopMenu,
-  hasAnyChild,
-  isMenuActive,
-  type MenuItem,
-} from "@/app/store/common";
-
-export type LnbItem = {
-  label: string;
-  href?: string;
-  children?: LnbItem[];
-};
-
-function findOpenMenuCode(items: MenuItem[], pathname: string): number | null {
-  const matched = items.find((item) => {
-    if (isMenuActive(pathname, item)) return true;
-    return (item.children ?? []).some((child) => isMenuActive(pathname, child));
-  });
-
-  return matched?.menuCd ?? null;
-}
-
-export default function Lnb() {
-  const pathname = usePathname();
-  const [menus, setMenus] = useState<MenuItem[]>([]);
-  const [openMenuCode, setOpenMenuCode] = useState<number | null>(null);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    (async () => {
-      try {
-        const loaded = await fetchAnonymousMenu();
-        if (!isMounted) return;
-        console.log("Fetched LNB menus:", loaded);
-        setMenus(loaded);
-      } catch (error) {
-        console.error("Failed to load DN LNB menu", error);
-        if (!isMounted) return;
-        setMenus([]);
-      }
-    })();
-
-    return () => {
-      isMounted = false;
-    };
-  }, []);
-
-  const currentTopMenu = useMemo(
-    () => findActiveTopMenu(menus, pathname),
-    [menus, pathname],
-  );
-
-  const secondLevelMenus = useMemo(
-    () => currentTopMenu?.children ?? [],
-    [currentTopMenu],
-  );
-// console.log("LNB render", { pathname, currentTopMenu, secondLevelMenus, menus });
-  useEffect(() => {
-    const defaultOpen = findOpenMenuCode(secondLevelMenus, pathname);
-    setOpenMenuCode(defaultOpen);
-  }, [pathname, secondLevelMenus]);
-
-  return (
-    <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);
-          const active = isMenuActive(pathname, item);
-
-          if (!hasChildren) {
-            return (
-              <li key={item.menuCd}>
-                <Link
-                  href={item.urlPath || "#"}
-                  className={[
-                    "block border-b border-slate-300 px-5 py-4 text-center text-base font-semibold transition-colors",
-                    active
-                      ? "cursor-default bg-white text-sky-500"
-                      : "bg-[#F0F0F0] text-[#767676] hover:bg-white hover:text-sky-500",
-                  ].join(" ")}
-                >
-                  {item.menuKornNm}
-                </Link>
-              </li>
-            );
-          }
-
-          const isOpen = openMenuCode === item.menuCd;
-          const childMenus = item.children ?? [];
-
-          return (
-            <li key={item.menuCd}>
-              <button
-                type="button"
-                onClick={() =>
-                  setOpenMenuCode((prev) => (prev === item.menuCd ? null : item.menuCd))
-                }
-                className={[
-                  "flex w-full items-center justify-between border-b border-slate-300 px-5 py-6 text-base font-semibold",
-                  active ? "bg-slate-100 text-slate-900" : "bg-slate-100 text-slate-500",
-                ].join(" ")}
-                aria-expanded={isOpen}
-              >
-                <span className="w-full text-center">{item.menuKornNm}</span>
-                <span
-                  aria-hidden
-                  className={[
-                    "ml-3 shrink-0 transition-transform duration-200",
-                    isOpen ? "rotate-180" : "rotate-0",
-                  ].join(" ")}
-                >
-                  <Image
-                    src="/images/landing/drop_arrow.svg"
-                    alt="menu toggle icon"
-                    width={28}
-                    height={28}
-                    className="h-7 w-7"
-                  />
-                </span>
-              </button>
-
-              <div
-                className={[
-                  "grid transition-[grid-template-rows] duration-200 ease-out",
-                  isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
-                ].join(" ")}
-              >
-                <div className="overflow-hidden bg-white">
-                  <ul>
-                    {childMenus.map((child) => {
-                      const childActive = isMenuActive(pathname, child);
-
-                      return (
-                        <li key={child.menuCd}>
-                          <Link
-                            href={child.urlPath || "#"}
-                            className={[
-                              "block border-b border-slate-200 bg-slate-50 px-5 py-4 pl-[60px] text-[18px] font-medium transition-colors",
-                              childActive
-                                ? "cursor-default bg-white text-sky-500"
-                                : "text-slate-500 hover:bg-white hover:text-sky-500",
-                            ].join(" ")}
-                          >
-                            <span className="mr-2 text-current">-</span>
-                            {child.menuKornNm}
-                          </Link>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </div>
-              </div>
-            </li>
-          );
-        })}
-      </ul>
-    </aside>
-  );
-}
diff --git a/apps/dm_new/components/ui/api/index.ts b/apps/dm_new/components/ui/api/index.ts
deleted file mode 100644
index abb0c2c73..000000000
--- a/apps/dm_new/components/ui/api/index.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-//8880
-import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config";
-import { getCookie } from "@common/components/lib/cookie";
-
-
-const tokenId = getCookie(AUTH_USER_ID);
-const Authorization = getCookie(CLAIM_NAME);
-
-export const fetchType = {
-  COMMON: "common",
-  WR: "wr",
-  FO: "fo",
-  SN: "sn"
-};
-
-const API_VERSION = "/api/v1"
-const servers = {
-  common: "",
-  local: "",
-  fo: "/operation-service" + API_VERSION,
-  wr: "/reuse-service" + API_VERSION,
-  sn: "/sewerage-service" + API_VERSION,
-}
-
-interface RequestParams {
-  [key: string]: unknown;
-}
-
-export const getFetch = async (type: string, url: string) => {
-  const baseUrl = servers[type];
-  const response = await fetch(baseUrl + url, {
-    method: "GET",
-    headers: {
-      accept: "application/json",
-      [AUTH_USER_ID]: tokenId ?? "",
-      [CLAIM_NAME]: Authorization ?? "",
-    },
-  });
-
-  if (!response.ok) {
-    throw new Error(`오류 발생: ${response.status}`);
-  }
-  const res = await response.json();
-  return res;
-};
-
-export const postFetch = async (url: string, params: RequestParams) => {
-  const baseUrl = servers[fetchType.WR];
-  const response = await fetch(baseUrl + url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      [AUTH_USER_ID]: tokenId ?? "",
-      [CLAIM_NAME]: Authorization ?? "",
-    },
-    body: JSON.stringify(params),
-  });
-
-  if (!response.ok) {
-    throw new Error(`오류 발생: ${response.status}`);
-  }
-  return response;
-};
-
-export const putFetch = async (url: string, params: RequestParams) => {
-  const baseUrl = servers[fetchType.WR];
-  const response = await fetch(baseUrl + url, {
-    method: "PUT",
-    headers: {
-      "Content-Type": "application/json",
-      [AUTH_USER_ID]: tokenId ?? "",
-      [CLAIM_NAME]: Authorization ?? "",
-    },
-    body: JSON.stringify(params),
-  });
-
-  if (!response.ok) {
-    throw new Error(`오류 발생: ${response.status}`);
-  }
-  return response;
-};
-
-export const deleteFetch = async (url: string, params: RequestParams) => {
-  const baseUrl = servers[fetchType.WR];
-  const response = await fetch(baseUrl + url, {
-    method: "DELETE",
-    headers: {
-      "Content-Type": "application/json",
-      [AUTH_USER_ID]: tokenId ?? "",
-      [CLAIM_NAME]: Authorization ?? "",
-    },
-    body: JSON.stringify(params),
-  });
-
-  if (!response.ok) {
-    throw new Error(`오류 발생: ${response.status}`);
-  }
-  return response;
-};   
\ No newline at end of file
diff --git a/apps/dm_new/components/ui/common/searhDemandInput/component.tsx b/apps/dm_new/components/ui/common/searhDemandInput/component.tsx
deleted file mode 100644
index 70ccf9efc..000000000
--- a/apps/dm_new/components/ui/common/searhDemandInput/component.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useDmStore } from '@/app/store';
-import type { DemandCompType } from '@common/business_components/ui/sdmInsertForm/form';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-type thisProps = {
-  label: string | undefined;
-  initValue: string | undefined;
-  setValue : (dmdCoNm?: string) => void;
-  setRtnData : (rtnData: DemandCompType[]) => void;
-}
-
-export default function SearchInputText({label=undefined, initValue=undefined, setValue=()=>{}, setRtnData=()=>{}} :thisProps) {
-  
-  const { getDemandCompList, Sdm } = useDmStore((state) => state);
-
-  const { 
-    demandCompList 
-  } = Sdm;
-  
-  const [isOpen, setIsOpen] = useState(false);
-  const [textValue, setTextValue] = useState(initValue || '');
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setTextValue(value);
-    setValue(value);
-    if (value) {
-      setIsOpen(true);
-      getDemandCompList(value, 20);
-    } else {
-      setIsOpen(false);
-    }
-  }, [getDemandCompList, setValue]);
-
-  const handleSuggestionClick = useCallback((dmdCoNm: string) => {
-    setTextValue(dmdCoNm);
-    setValue(dmdCoNm);
-    setIsOpen(false);
-    setRtnData(demandCompList);
-  }, [demandCompList, setRtnData, setValue]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <div ref={wrapperRef}>
-      <input
-        type="text"
-        value={textValue}
-        onChange={handleInputChange}
-        /* onFocus={() => setIsOpen(true)} */
-        className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        placeholder={`${label}을(를) 입력하세요`}
-      />
-      {isOpen && (
-        <div className=" z-1 w-full mt-2 bg-white border border-gray-300 rounded-md shadow-lg h-90 overflow-auto">
-          <div className="max-h-72">
-            {demandCompList && demandCompList.length > 0 ? demandCompList.map((item : DemandCompType, index : number) => (
-              <div
-                key={index}
-                className="!text-xl w-full text-left px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto"
-                onClick={() => handleSuggestionClick(item.dmdCoNm)}
-                role="button"
-                tabIndex={0}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    handleSuggestionClick(item.dmdCoNm);
-                  }
-                }}
-              >
-                {item.dmdInfoId.substring(10,14) !== '0000' ? (
-                  <>
-                    <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoId.substring(0,10)}&nbsp;
-                    <span className="text-gray-500">종사업자번호 : </span> {item.dmdInfoId.substring(10,14)}&nbsp;
-                  </>
-                ) : (
-                  <>
-                    <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoId.substring(0,10)}&nbsp;
-                  </>
-                )}
-                <span className="float-right">{item.dmdCoNm}</span>
-              </div>
-            )) : (
-              <div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
-                검색 결과가 없습니다.
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/dm_new/components/ui/common/utils/utils.ts b/apps/dm_new/components/ui/common/utils/utils.ts
deleted file mode 100644
index 19c92bff2..000000000
--- a/apps/dm_new/components/ui/common/utils/utils.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-export const sanitizeInput = (val: string, allowDecimal = false) => {
-  if (val === "") return ""; // 빈 값 허용
-
-  // 소숫점 허용
-  if (allowDecimal) {
-    // 숫자와 점만 허용
-    let cleaned = val.replace(/[^0-9.]/g, "");
-    // 소숫점 여러 개일 경우 첫 번째만 유지
-    const parts = cleaned.split(".");
-    if (parts.length > 2) {
-      cleaned = parts[0] + "." + parts.slice(1).join("");
-    }
-    return cleaned;
-  }
-
-  // 정수만 허용
-  return val.replace(/[^0-9]/g, "");
-};
-
-
-
-// utils: format Date <-> "YYYY-MM-DD" without moment
-export const  formatDateToYMD=(value: Date): string => {
-  if (!value) return "";
-  // value can be Date | string ("YYYY-MM-DD")
-  if (typeof value === "string") {
-    // assume already in yyyy-mm-dd
-    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return value;
-    const d = new Date(value);
-    if (isNaN(d.getTime())) return "";
-    return toYMD(d);
-  }
-  if (value instanceof Date) {
-    if (isNaN(value.getTime())) return "";
-    return toYMD(value);
-  }
-  return "";
-}
-
-const  toYMD=(date: Date): string => {
-  // avoid timezone shift by normalizing to local date parts
-  const y = date.getFullYear();
-  const m = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${y}-${m}-${day}`;
-}
-
-// const  parseYMDToDate=(ymd: string): Date | null => {
-//   if (!/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return null;
-//   const [y, m, d] = ymd.split("-").map(Number);
-//   const date = new Date(y, (m - 1), d);
-//   // validate round-trip
-//   return (date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d) ? date : null;
-// }
\ No newline at end of file
diff --git a/apps/dm_new/components/ui/config/index.ts b/apps/dm_new/components/ui/config/index.ts
deleted file mode 100644
index 1585bb767..000000000
--- a/apps/dm_new/components/ui/config/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { PROXY_HOST } from "@/src/shared/config/env";
-
-export const LOCAL_URL = PROXY_HOST;
-export const DEV_URL_FO = "/operation-service";
-export const DEV_URL_WR = "/reuse-service";
-export const DEV_URL_SN = "/sewerage-service";
diff --git a/apps/dm_new/components/ui/map/SearchInputText/SearchInputText.tsx b/apps/dm_new/components/ui/map/SearchInputText/SearchInputText.tsx
deleted file mode 100644
index 05f41d09b..000000000
--- a/apps/dm_new/components/ui/map/SearchInputText/SearchInputText.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-
-type SearchType = {
-  bscFctNm: string;
-  bscFctCd: string;
-};
-
-type thisProps = {
-  label: string | undefined;
-  initValue: string | undefined;
-  setValue: (searchNm?: string) => void;
-  setRtnData: (rtnData: any) => void;
-  searchList?: SearchType[];
-};
-
-export default function SearchInputText({
-  label = undefined,
-  initValue = undefined,
-  setValue = () => {},
-  setRtnData = () => {},
-  searchList = [],
-}: thisProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [textValue, setTextValue] = useState(initValue || "");
-  const [highlightIndex, setHighlightIndex] = useState<number>(-1);
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  const handleInputChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value;
-      setTextValue(value);
-      setValue(value);
-      setHighlightIndex(-1);
-      setIsOpen(value !== "");
-    },
-    [setValue]
-  );
-
-  const handleSuggestionClick = useCallback(
-    (searchNm: string) => {
-      setValue(searchNm);
-      setTextValue(searchNm);
-      setIsOpen(false);
-      setRtnData(searchList?.find((item) => item.bscFctNm === searchNm) || {});
-    },
-    [searchList, setRtnData, setValue]
-  );
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (!isOpen || searchList.length === 0) return;
-
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setHighlightIndex((prev) => (prev + 1) % searchList.length);
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        setHighlightIndex((prev) =>
-          prev <= 0 ? searchList.length - 1 : prev - 1
-        );
-      } else if (e.key === "Enter") {
-        e.preventDefault();
-        if (searchList.length === 1 && searchList[0]) {
-          handleSuggestionClick(searchList[0].bscFctNm);
-        } else if (highlightIndex >= 0 && highlightIndex < searchList.length && searchList[highlightIndex]) {
-          handleSuggestionClick(searchList[highlightIndex].bscFctNm);
-        }
-      }
-    },
-    [highlightIndex, isOpen, searchList, handleSuggestionClick]
-  );
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        wrapperRef.current &&
-        !wrapperRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <div ref={wrapperRef} className="relative">
-      <input
-        type="text"
-        value={textValue || ""}
-        onChange={handleInputChange}
-        onKeyDown={handleKeyDown}
-        className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        placeholder={`${label}을(를) 입력하세요`}
-        onClick={() => {
-          setTextValue("");
-          setValue("");
-          setIsOpen(false);
-        }}
-      />
-      {isOpen && (
-        <div className="absolute top-full left-0 z-50 mb-2 max-h-72 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
-          <div className="max-h-72">
-            {searchList.length > 0 ? (
-              searchList.map((item, index) => (
-                <div
-                  key={index}
-                  className={`w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl ${
-                    highlightIndex === index
-                      ? "bg-blue-100"
-                      : "hover:bg-gray-100"
-                  }`}
-                  onClick={() => handleSuggestionClick(item.bscFctNm)}
-                  role="button"
-                  tabIndex={0}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      handleSuggestionClick(item.bscFctNm);
-                    }
-                  }}
-                >
-                  <span className="float-left">{item.bscFctNm}</span>
-                </div>
-              ))
-            ) : (
-              <div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
-                검색 결과가 없습니다.
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/apps/dm_new/components/ui/map/searchBar/searchBar.tsx b/apps/dm_new/components/ui/map/searchBar/searchBar.tsx
deleted file mode 100644
index 7ca64bbce..000000000
--- a/apps/dm_new/components/ui/map/searchBar/searchBar.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client";
-import { useDmStore } from "@/app/store";
-import {
-  SelectBox,
-  type SelectDataType,
-} from "@common/business_components/ui";
-import { Button, Label } from "@common/components/ui";
-import { useCallback, useEffect, useState } from "react";
-import SearchInputText from "../SearchInputText/SearchInputText";
-
-export function SearchBar({
-  setHasuPk,
-  onApply,
-}: {
-  setHasuPk: (hasuPk: any) => void;
-  onApply: () => void;
-}) {
-  const { map, Common, initializeCommonData, findRuseFclt } = useDmStore(
-    (state) => state
-  );
-  const [sidoValue, setSidoValue] = useState<string>("");
-  const [sigunValue, setSigunValue] = useState<string>("");
-  const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([
-    { text: "전체", val: "0" },
-  ]);
-
-  useEffect(() => {
-    initializeCommonData();
-  }, [initializeCommonData]);
-
-  const initializeSigunData = useCallback(
-    (sidoCd: string) => {
-      if (sidoCd === "0") {
-        setSigunValue("0");
-        setFilteredSigunData([{ text: "전체", val: "0" }]);
-      } else {
-        const newFilteredData = [
-          { text: "전체", val: "0" },
-          ...Common.selectSigunData.filter(
-            (item: SelectDataType) => item.val.substring(0, 2) === sidoCd
-          ),
-        ];
-        setSigunValue("0");
-        setFilteredSigunData(newFilteredData);
-      }
-    },
-    [Common.selectSigunData]
-  );
-
-  const onSelectValue = useCallback(
-    (val: string, type: string) => {
-      switch (type) {
-        case "ctpvCd":
-          initializeSigunData(val);
-          setSidoValue(val);
-          break;
-        case "sggCd":
-          setSigunValue(val);
-      }
-    },
-    [initializeSigunData]
-  );
-
-  return (
-    <div className="flex justify-center w-full px-4 py-3">
-      <div className="flex items-center w-full max-w-screen-lg rounded-xl bg-white shadow-md px-6 py-4 space-x-3">
-        <SelectBox
-          labelClass="w-[40px]"
-          className="w-[200px]"
-          label="시도"
-          selectClass="rounded-lg bg-white"
-          selectArray={Common.selectSidoData || []}
-          onSelectValue={(val) => onSelectValue(val.toString(), "ctpvCd")}
-          value={sidoValue || Common.selectSidoData[0]?.val || ""}
-        />
-        <SelectBox
-          labelClass="w-[65px]"
-          className="w-[200px]"
-          label="시군구"
-          selectClass="rounded-lg bg-white"
-          selectArray={filteredSigunData || []}
-          onSelectValue={(val) => onSelectValue(val.toString(), "sggCd")}
-          value={sigunValue}
-        />
-        <Label className="text-gray-600">하수재이용시설</Label>
-        <SearchInputText
-          label="시설명"
-          initValue={undefined}
-          setValue={(searchNm?: string) => {
-            let sggOrCity = "";
-            if (searchNm) {
-              if (sigunValue === "0" || sigunValue === "") {
-                sggOrCity = sidoValue;
-              } else {
-                sggOrCity = sigunValue;
-              }
-              findRuseFclt(sggOrCity, searchNm);
-            }
-          }}
-          setRtnData={(rtnData: any) => {
-            setHasuPk(rtnData);
-          }}
-          searchList={map.ruseFcltList || []}
-        />
-        <Button
-          color="sky"
-          className="ml-2 text-white"
-          size="sm"
-          onClick={() => {
-            onApply();
-          }}
-        >
-          적용
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/dm_new/components/ui/sdmInfoInsertForm/AccessibleFormField.tsx b/apps/dm_new/components/ui/sdmInfoInsertForm/AccessibleFormField.tsx
deleted file mode 100644
index c37270df8..000000000
--- a/apps/dm_new/components/ui/sdmInfoInsertForm/AccessibleFormField.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { FormUi } from "@common/business_components/ui";
-import type { ControllerRenderProps, FieldError, FieldValues, Path } from "react-hook-form";
-import { cloneElement, isValidElement } from "react";
-interface AccessibleFormFieldProps<T extends FieldValues> {
-  field: ControllerRenderProps<T, Path<T>>;
-  label: string;
-  required?: boolean;
-  error?: FieldError;
-  isDisabled?: boolean;
-  inputComponent: React.ReactElement<{ disabled?: boolean }>;
-}
-
-export function AccessibleFormField<T extends FieldValues>({
-  label,
-  required = false,
-  inputComponent,
-  isDisabled = false,
-}: AccessibleFormFieldProps<T>) {
-  const labelText = required ? `${label} *` : label;
-  
-  return (
-    <FormUi label={labelText} isDisabled={isDisabled}>
-      <div>
-      {isValidElement(inputComponent)
-          ? cloneElement(inputComponent, { disabled: isDisabled } as Partial<typeof inputComponent.props>)
-          : inputComponent}
-        {/* {error?.message && Array.from(new Set(error.message.split('\n'))).map((msg, idx) => (
-            <p key={idx} className="text-red-500 text-sm mt-1" role="alert">
-                {msg}
-            </p>
-        ))} */}
-      </div>
-    </FormUi>
-  );
-}
diff --git a/apps/dm_new/components/ui/sdmInfoInsertForm/component.tsx b/apps/dm_new/components/ui/sdmInfoInsertForm/component.tsx
deleted file mode 100644
index 44c6d3f82..000000000
--- a/apps/dm_new/components/ui/sdmInfoInsertForm/component.tsx
+++ /dev/null
@@ -1,962 +0,0 @@
-// import ModalSimilarPage from "@/app/(base-layout)/pages/sdmMng/sdmInfoInsert/modalSimilar/page";
-// import { useDmStore } from "@/app/store";
-// import {
-//   CANDIDATE,
-//  // DatePicker,
-//   FormField,
-//   FormLabel,
-//   FormUi,
-//   SelectBox,
-//   UiModal,
-// } from "@common/business_components";
-// import { Input } from "@common/components";
-// import { Button, Label } from "@common/components/ui";
-// import { useSearchParams } from "next/navigation";
-// import { useCallback, useEffect, useState } from "react";
-// import { AccessibleFormField } from "./AccessibleFormField";
-// import {
-//   type ControllerRenderProps,
-//   type UseFormReturn,
-//   type FieldError,
-//   useWatch,
-// } from "react-hook-form";
-// import SearchInputText from "../common/searhDemandInput/component";
-// import React from "react";
-// import { formatDateToYMD, sanitizeInput } from "../common/utils/utils";
-// import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
-// import type { SdmInfoFormData } from "@/app/store/sdmMng";
-
-// export interface SdmInfoRegFormProps {
-//   form: UseFormReturn<SdmInfoFormData>;
-//   onCheckboxChange?: (checked: boolean) => void;
-//   facilityName?: string;
-// }
-
-// type FieldComponent = (
-//   field: ControllerRenderProps<SdmInfoFormData, keyof SdmInfoFormData>
-// ) => React.ReactElement<{ disabled?: boolean }>;
-
-// export function SdmInfoRegForm({
-//   form,
-//   onCheckboxChange,
-//   facilityName,
-// }: SdmInfoRegFormProps) {
-//   const { initializeCommonData, Sdm } = useDmStore((state) => state);
-//   const { useTypesData, defaultRules, disableRules } = Sdm;
-//   const searchParams = useSearchParams();
-
-//   const [sdmNmValue, setSdmNmValue] = useState<string>(
-//     searchParams.get("dmdCoNm") || ""
-//   );
-
-//   const [frontPHdata, setFrontPHdata] = useState("0");
-//   const [backPHdata, setBackPHdata] = useState("0");
-//   const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false);
-//   const [isSimilarCase, setIsSimilarCase] = useState(false);
-//   const [key, setKey] = useState(0);
-//   // 후보지 팝업 오픈 상태
-
-//   //모달 조회에 필요한 데이터
-//   const [sply, setSply] = useState<number>(0);
-//   const [usageCd, setUsageCd] = useState<string>("청소");
-//   const [money, setMoney] = useState<number>(0);
-
-//   useEffect(() => {
-//     initializeCommonData();
-//   }, [initializeCommonData]);
-
-//   useEffect(() => {
-//     console.log("candidateTitle ", form.getValues("candidateTitle"));
-//   }, [form.getValues]);
-
-//   useEffect(() => {
-//     if (useTypesData && useTypesData.length > 0) {
-//       setTimeout(() => {
-//         form.setValue("usePurpose", useTypesData[0]?.val?.toString() || "");
-//       }, 500);
-//     }
-//   }, [useTypesData, form.setValue, form]);
-
-//   useEffect(() => {
-//     if (facilityName) {
-//       setSdmNmValue(facilityName);
-//       form.setValue("sdmNm", facilityName);
-//       setKey((prev) => prev + 1);
-//     }
-//   }, [facilityName, form.setValue, form]);
-
-//   useEffect(() => {
-//     if (searchParams.get("dmdCoNm")) {
-//       form.setValue("sdmNm", searchParams.get("dmdCoNm") || "");
-//       setSdmNmValue(searchParams.get("dmdCoNm") || "");
-//       setKey((prev) => prev + 1);
-//     }
-//   }, [searchParams, form.setValue, form]);
-
-//   const searchCandidate = (e: React.MouseEvent) => {
-//     e.preventDefault();
-//     e.stopPropagation();
-//     const dmdInfoId = JSON.parse(
-//       sessionStorage.getItem("user") || "{}"
-//     )?.dmdInfoId?.toString();
-
-//     const url = `/map/popup?dmdInfoId=${encodeURIComponent(dmdInfoId)}`;
-//     const width = window.screen.availWidth;
-//     const height = window.screen.availHeight;
-//     const left = 0;
-//     const top = 0;
-//     const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
-//     window.open(url, "candidatePopup", popupOptions);
-//   };
-
-//   const searchSimilarCase = (e: React.MouseEvent) => {
-//     e.preventDefault();
-//     e.stopPropagation();
-//     setIsSimilarCase(true);
-//   };
-
-//   const handleCheckboxChange = (checked: boolean) => {
-//     setIsBznmTotNoDisabled(checked);
-//     onCheckboxChange?.(checked);
-//   };
-
-//   useEffect(() => {
-//     const watchPH = form.getValues(`ph`);
-//     if (watchPH && watchPH !== undefined) {
-//       const [frontPH, backPH] = watchPH.split("~");
-//       if (frontPH) {
-//         setFrontPHdata(frontPH);
-//       }
-//       if (backPH) {
-//         setBackPHdata(backPH);
-//       }
-//     } else {
-//       setFrontPHdata("0");
-//       setBackPHdata("0");
-//     }
-//   }, [form.getValues(`ph`)]);
-
-//   const isSetPh = useCallback(
-//     (typePHdata: string, index: number) => {
-//       const PHdata = form.getValues("ph");
-//       const isPH = PHdata?.split("~")[index] || "";
-//       if (index == 0) {
-//         form.setValue("ph", `${isPH}~${typePHdata}`);
-//         setBackPHdata(typePHdata);
-//       } else if (index == 1) {
-//         form.setValue("ph", `${typePHdata}~${isPH}`);
-//         setFrontPHdata(typePHdata);
-//       }
-//     },
-//     [form]
-//   );
-
-//   const usePurpose = useWatch({ control: form.control, name: "usePurpose" });
-
-//   useEffect(() => {
-//     if (!usePurpose) return;
-
-//     // Apply default values
-//     const defaults = defaultRules[usePurpose];
-
-//     if (defaults) {
-//       Object.entries(defaults).forEach(([field, value]) => {
-//         form.setValue(field as keyof SdmInfoFormData, value, {
-//           shouldDirty: true,
-//         });
-//       });
-//     }
-//   }, [form.getValues("usePurpose")]);
-
-//   // 시설 선택시 이벤트
-//   const selectComp = useCallback(
-//     (rtnData: DemandCompType[]) => {
-//       const rtnCompData = rtnData?.[0];
-//       form.setValue("sdmNm", rtnCompData?.dmdCoNm || "");
-//     },
-//     [form]
-//   );
-
-//   const formFields: Array<{
-//     name: keyof SdmInfoFormData;
-//     label: string;
-//     component: FieldComponent | undefined;
-//     formIndex: number;
-//     required?: boolean;
-//   }> = [
-//     {
-//       name: "sdmNm",
-//       label: "수요처선택",
-//       formIndex: 0,
-//       required: true,
-//       component: (field) => (
-//         <div key={key}>
-//           <SearchInputText
-//             label="수요처명"
-//             setValue={(val) => {
-//               setSdmNmValue(val || "");
-//               field.onChange(val || "");
-//             }}
-//             setRtnData={selectComp}
-//             initValue={facilityName || sdmNmValue}
-//             {...field}
-//           />
-//         </div>
-//       ),
-//     },
-//     {
-//       name: "demandYmd",
-//       label: "요구시기",
-//       formIndex: 0,
-//       required: true,
-//       component: (field) => (
-//         <div className="relative w-64">
-//           {/* <DatePicker
-//             mode="single"
-//             selected={field.value as Date}
-//             onSelect={(date) => {
-//               field.onChange(date as Date);
-//             }}
-//             className=""
-//             //defaultMonth={field.value as Date}
-//             field={{
-//               value: field.value as Date,
-//               onChange: (date: Date | undefined) => {
-//                 field.onChange(date as Date);
-//               },
-//             }}
-//             showOutsideDays={true}
-//             selectClass={undefined}
-//           /> */}
-//             {/* 네이티브 input */}
-//             <Input
-//               className="w-full !text-xl text-right"
-//               type="date"
-//               onChange= {(e) => {
-//                 const selectedDate = e.target.value ? new Date(e.target.value) : null;
-//                 field.onChange(selectedDate);
-//               }}
-//               value={ formatDateToYMD(field.value as Date) }
-//             />
-//         </div>
-//       ),
-//     },
-//     {
-//       name: "demandQnty",
-//       label: "요구수량(㎥/d)",
-//       formIndex: 0,
-//       required: true,
-//       component: (field) => (
-//         <Input
-//           type="text"
-//           className="!text-xl text-gray-600"
-//           value={field.value as string}
-//           onChange={(e) => {
-//             field.onChange(e);
-//             setSply(Number(e.target.value));
-//           }}
-//           onBlur={field.onBlur}
-//           name={field.name}
-//           ref={field.ref}
-//         />
-//       ),
-//     },
-//     {
-//       name: "usePurpose",
-//       label: "사용용도",
-//       formIndex: 0,
-//       required: true,
-//       component: (field) => (
-//         <SelectBox
-//           selectClass={undefined}
-//           label=""
-//           selectArray={useTypesData}
-//           onSelectValue={(val) => {
-//             field.onChange(val.toString());
-//             setUsageCd(val.toString());
-//           }}
-//           className=""
-//           value={field.value as string}
-//         />
-//       ),
-//     },
-//     {
-//       name: "money",
-//       label: "희망단가(원)",
-//       formIndex: 0,
-//       required: true,
-//       component: (field) => (
-//         <FormUi
-//           onCheckboxChange={handleCheckboxChange}
-//           isDisabled={isBznmTotNoDisabled}
-//         >
-//           <Input
-//             type="text"
-//             className="!text-xl text-gray-600"
-//             value={field.value as string}
-//             onChange={(e) => {
-//               field.onChange(e);
-//               setMoney(Number(e.target.value));
-//             }}
-//             onBlur={field.onBlur}
-//             name={field.name}
-//             ref={field.ref}
-//           />
-//         </FormUi>
-//       ),
-//     },
-//     {
-//       name: "reqWaterQlty",
-//       label: "요구수질",
-//       formIndex: 0,
-//       required: true,
-//       component: undefined,
-//     },
-
-//     {
-//       name: "candidateTitle",
-//       label: CANDIDATE || "공급처 후보지 선택(필수아님)",
-//       formIndex: 2,
-//       component: () => (
-//         <div>
-//           <div className="-mt-14 float-right flex gap-10">
-//             <Button
-//               className="rounded-md"
-//               color="sky"
-//               size={"sm"}
-//               onClick={searchCandidate}
-//             >
-//               후보지 조회
-//             </Button>
-//             <Button
-//               className="rounded-md"
-//               color="sky"
-//               size={"sm"}
-//               onClick={searchSimilarCase}
-//             >
-//               유사사례
-//             </Button>
-//           </div>
-//           <div className="flex justify-center gap-10 mt-5">
-//             {(form.getValues("candidateTitle") || []).map(
-//               (candidate: any, index: number) => (
-//                 <Input
-//                   key={index}
-//                   placeholder={`후보지${index + 1}`}
-//                   type="text"
-//                   className="!text-xl w-[130px] text-gray-600"
-//                   value={candidate.ruseUtztnFcltNm}
-//                   readOnly
-//                 />
-//               )
-//             )}
-//           </div>
-//         </div>
-//       ),
-//     },
-//   ];
-
-//   const normalFields = formFields.filter(
-//     (f) => f.formIndex === 0 && f.component
-//   );
-
-//   const candidateFields = formFields.filter(
-//     (f) => f.formIndex === 2 && f.component
-//   );
-
-//   return (
-//     <>
-//       {normalFields.map(({ name, label, component, required }) =>
-//         component ? (
-//           <FormField
-//             key={name}
-//             control={form.control}
-//             name={name}
-//             render={({ field }) =>
-//               name === "money" ? (
-//                 <div>
-//                   <Label className="text-black">희망단가(원)*</Label>
-//                   {component(field)}
-//                 </div>
-//               ) : (
-//                 // <FormUi label={label + "*"}>{component(field)}</FormUi>
-//                 <AccessibleFormField
-//                   field={field}
-//                   label={label}
-//                   required={required}
-//                   error={
-//                     typeof form.formState.errors[name]?.message === "string"
-//                       ? (form.formState.errors[name] as FieldError)
-//                       : undefined
-//                   }
-//                   inputComponent={component(field)}
-//                 />
-//               )
-//             }
-//           />
-//         ) : null
-//       )}
-
-//       <div className="mt-10">
-//         <FormLabel className="text-xl">요구수질</FormLabel>
-//         <div className="grid grid-cols-2 gap-x-10 gap-y-6 mt-3 mb-3">
-//           <FormField
-//             control={form.control}
-//             name={`grssClfg`}
-//             render={({ field }) => {
-//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-//               const isDisabled = disabledFields
-//                 ? disabledFields.includes(field.name)
-//                 : true;
-//               return (
-//                 <FormUi
-//                   label={
-//                     !isDisabled ? `총대장균군수(개/mg)*` : "총대장균군수(개/mg)"
-//                   }
-//                 >
-//                   <div className="flex items-center gap-2">
-//                     <div className="relative flex-1 min-w-0">
-//                       <Input
-//                         type="text"
-//                         className="w-full pr-16 border py-2 text-right rounded-md"
-//                         placeholder=""
-//                         onChange={(e) => {
-//                           const inputValue = e.target.value.replace(
-//                             /[^0-9]/g,
-//                             ""
-//                           ); // 정수만
-//                           field.onChange(
-//                             inputValue === "" ? null : Number(inputValue)
-//                           );
-//                         }}
-//                         value={
-//                           field.value !== undefined && field.value !== null
-//                             ? `${field.value}`
-//                             : "불검출"
-//                         }
-//                         maxLength={6}
-//                         disabled={isDisabled}
-//                         onBlur={field.onBlur}
-//                         name={field.name}
-//                         ref={field.ref}
-//                       />
-//                       {/* TODO:  총대장균군수 확인 필요*/}
-//                       {field.value !== null ? (
-//                         <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-//                           이하
-//                         </span>
-//                       ) : (
-//                         <></>
-//                       )}
-//                     </div>
-//                   </div>
-//                 </FormUi>
-//               );
-//             }}
-//           />
-//           <FormField
-//             control={form.control}
-//             name={`tn`}
-//             render={({ field }) => {
-//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-//               const isDisabled = disabledFields
-//                 ? disabledFields.includes(field.name)
-//                 : true;
-//               return (
-//                 <FormUi
-//                   label={
-//                     !isDisabled ? `총질소(T-N)(mg/L)*` : "총질소(T-N)(mg/L)"
-//                   }
-//                 >
-//                   <div className="flex items-center gap-2">
-//                     <div className="relative flex-1 min-w-0">
-//                       <Input
-//                         type="text"
-//                         className="w-full pr-16 border py-2 text-right rounded-md"
-//                         placeholder=""
-//                         onChange={(e) => {
-//                           const inputValue = e.target.value.replace(
-//                             /[^0-9]/g,
-//                             ""
-//                           ); // 정수만
-//                           field.onChange(
-//                             inputValue === "" ? null : Number(inputValue)
-//                           );
-//                         }}
-//                         value={
-//                           field.value !== undefined && field.value !== null
-//                             ? `${field.value}`
-//                             : ""
-//                         }
-//                         maxLength={6}
-//                         disabled={isDisabled}
-//                         onBlur={field.onBlur}
-//                         name={field.name}
-//                         ref={field.ref}
-//                       />
-//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-//                         이하
-//                       </span>
-//                     </div>
-//                   </div>
-//                 </FormUi>
-//               );
-//             }}
-//           />
-//           <FormField
-//             control={form.control}
-//             name={`combResdch`}
-//             render={({ field }) => {
-//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-//               const isDisabled = disabledFields
-//                 ? disabledFields.includes(field.name)
-//                 : true;
-//               return (
-//                 <FormUi
-//                   label={
-//                     !isDisabled ? `결합잔류염소(mg/L)*` : "결합잔류염소(mg/L)"
-//                   }
-//                 >
-//                   <div className="flex items-center gap-2">
-//                     <div className="relative flex-1 min-w-0">
-//                       <Input
-//                         type="text"
-//                         className="w-full pr-16 border py-2 text-right rounded-md"
-//                         placeholder=""
-//                         onChange={(e) => {
-//                           const cleanValue = sanitizeInput(
-//                             e.target.value,
-//                             true
-//                           );
-//                           field.onChange(
-//                             cleanValue === "" ? null : Number(cleanValue)
-//                           );
-//                         }}
-//                         value={field.value ?? ""}
-//                         maxLength={6}
-//                         disabled={isDisabled}
-//                         onBlur={field.onBlur}
-//                         name={field.name}
-//                         ref={field.ref}
-//                       />
-//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-//                         이상
-//                       </span>
-//                     </div>
-//                   </div>
-//                 </FormUi>
-//               );
-//             }}
-//           />
-//           <FormField
-//             control={form.control}
-//             name={`tph`}
-//             render={({ field }) => {
-//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-//               const isDisabled = disabledFields
-//                 ? disabledFields.includes(field.name)
-//                 : true;
-//               return (
-//                 <FormUi
-//                   label={!isDisabled ? `총인(T-P)(mg/L)*` : "총인(T-P)(mg/L)"}
-//                 >
-//                   <div className="flex items-center gap-2">
-//                     <div className="relative flex-1 min-w-0">
-//                       <Input
-//                         type="text"
-//                         className="w-full pr-16 border py-2 text-right rounded-md"
-//                         placeholder=""
-//                         onChange={(e) => {
-//                           const cleanValue = sanitizeInput(
-//                             e.target.value,
-//                             true
-//                           );
-//                           field.onChange(
-//                             cleanValue === "" ? null : Number(cleanValue)
-//                           );
-//                         }}
-//                         value={field.value ?? ""}
-//                         maxLength={6}
-//                         disabled={isDisabled}
-//                         onBlur={field.onBlur}
-//                         name={field.name}
-//                         ref={field.ref}
-//                       />
-//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-//                         이하
-//                       </span>
-//                     </div>
-//                   </div>
-//                 </FormUi>
-//               );
-//             }}
-//           />
-//           <FormField
-//             control={form.control}
-//             name={`trbt`}
-//             render={({ field }) => {
-//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-//               const isDisabled = disabledFields
-//                 ? disabledFields.includes(field.name)
-//                 : true;
-//               return (
-//                 <FormUi label={!isDisabled ? `탁도(NTU)*` : "탁도(NTU)"}>
-//                   <div className="flex items-center gap-2">
-//                     <div className="relative flex-1 min-w-0">
-//                       <Input
-//                         type="text"
-//                         className="w-full pr-16 border py-2 text-right rounded-md"
-//                         placeholder=""
-//                         onChange={(e) => {
-//                           const inputValue = e.target.value.replace(
-//                             /[^0-9]/g,
-//                             ""
-//                           ); // 정수만
-//                           field.onChange(
-//                             inputValue === "" ? null : Number(inputValue)
-//                           );
-//                         }}
-//                         value={
-//                           field.value !== undefined && field.value !== null
-//                             ? `${field.value}`
-//                             : ""
-//                         }
-//                         maxLength={6}
-//                         disabled={isDisabled}
-//                         onBlur={field.onBlur}
-//                         name={field.name}
-//                         ref={field.ref}
-//                       />
-//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-//                         이하
-//                       </span>
-//                     </div>
-//                   </div>
-//                 </FormUi>
-//               );
-//             }}
-//           />
-//           <div className="col-span-1">
-//             <Label className="text-xl">수소이온농도(pH)</Label>
-//             <div className="flex flex-row items-center gap-2">
-//               <Input
-//                 className="!text-xl w-36"
-//                 placeholder=""
-//                 type="text"
-//                 onChange={(e) => {
-//                   const cleanValue = sanitizeInput(e.target.value, true);
-//                   isSetPh(cleanValue, 1);
-//                 }}
-//                 value={frontPHdata ?? ""}
-//                 maxLength={5}
-//               />
-//               <span className="text-xl mx-2">~</span>
-//               <Input
-//                 className="!text-xl w-36 "
-//                 placeholder=""
-//                 type="text"
-//                 onChange={(e) => {
-//                   const cleanValue = sanitizeInput(e.target.value, true);
-//                   isSetPh(cleanValue, 0);
-//                 }}
-//                 value={backPHdata ?? ""}
-//                 maxLength={5}
-//               />
-//             </div>
-//           </div>
-//           <FormField
-//             control={form.control}
-//             name={`bod`}
-//             render={({ field }) => {
-//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-//               const isDisabled = disabledFields
-//                 ? disabledFields.includes(field.name)
-//                 : true;
-//               return (
-//                 <FormUi
-//                   label={
-//                     !isDisabled
-//                       ? `생물학적 산소요구량(BOD)(mg/L)*`
-//                       : "생물학적 산소요구량(BOD)(mg/L)"
-//                   }
-//                 >
-//                   <div className="flex items-center gap-2">
-//                     <div className="relative flex-1 min-w-0">
-//                       <Input
-//                         type="text"
-//                         className="w-full pr-16 border py-2 text-right rounded-md"
-//                         placeholder=""
-//                         onChange={(e) => {
-//                           const inputValue = e.target.value.replace(
-//                             /[^0-9]/g,
-//                             ""
-//                           ); // 정수만
-//                           field.onChange(
-//                             inputValue === "" ? null : Number(inputValue)
-//                           );
-//                         }}
-//                         value={
-//                           field.value !== undefined && field.value !== null
-//                             ? `${field.value}`
-//                             : ""
-//                         }
-//                         maxLength={6}
-//                         disabled={isDisabled}
-//                         onBlur={field.onBlur}
-//                         name={field.name}
-//                         ref={field.ref}
-//                       />
-//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-//                         이하
-//                       </span>
-//                     </div>
-//                   </div>
-//                 </FormUi>
-//               );
-//             }}
-//           />
-//           <FormField
-//             control={form.control}
-//             name={`clIonQnt`}
-//             render={({ field }) => {
-//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-//               const isDisabled = disabledFields
-//                 ? disabledFields.includes(field.name)
-//                 : true;
-//               return (
-//                 <FormUi
-//                   label={!isDisabled ? `염화물(mgCL/L)*` : "염화물(mgCL/L)"}
-//                 >
-//                   <div className="flex items-center gap-2">
-//                     <div className="relative flex-1 min-w-0">
-//                       <Input
-//                         type="text"
-//                         className="w-full pr-16 border py-2 text-right rounded-md"
-//                         placeholder=""
-//                         onChange={(e) => {
-//                           const inputValue = e.target.value.replace(
-//                             /[^0-9]/g,
-//                             ""
-//                           ); // 정수만
-//                           field.onChange(
-//                             inputValue === "" ? null : Number(inputValue)
-//                           );
-//                         }}
-//                         value={
-//                           field.value !== undefined && field.value !== null
-//                             ? `${field.value}`
-//                             : ""
-//                         }
-//                         maxLength={6}
-//                         disabled={isDisabled}
-//                         onBlur={field.onBlur}
-//                         name={field.name}
-//                         ref={field.ref}
-//                       />
-//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-//                         이하
-//                       </span>
-//                     </div>
-//                   </div>
-//                 </FormUi>
-//               );
-//             }}
-//           />
-//           <FormField
-//             control={form.control}
-//             name={`smll`}
-//             render={({ field }) => {
-//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-//               const isDisabled = disabledFields
-//                 ? disabledFields.includes(field.name)
-//                 : true;
-//               return (
-//                 <FormUi label={!isDisabled ? `냄새*` : "냄새"}>
-//                   <SelectBox
-//                     className="!text-2xl rounded-md"
-//                     label={""}
-//                     selectClass={undefined}
-//                     selectArray={[
-//                       { text: "불쾌하지않을것", val: "불쾌하지않을것" },
-//                       { text: "해당사항없음", val: "해당사항없음" },
-//                     ]}
-//                     onSelectValue={(val: string | number) => {
-//                       field.onChange(val.toString());
-//                     }}
-//                     value={field.value}
-//                     readOnly={isDisabled}
-//                     onBlur={field.onBlur}
-//                     ref={field.ref}
-//                   />
-//                 </FormUi>
-//               );
-//             }}
-//           />
-//           <FormField
-//             control={form.control}
-//             name={`cdtnv`}
-//             render={({ field }) => {
-//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-//               const isDisabled = disabledFields
-//                 ? disabledFields.includes(field.name)
-//                 : true;
-//               return (
-//                 <FormUi
-//                   label={
-//                     !isDisabled ? `전기전도도(㎲/cm)*` : "전기전도도(㎲/cm)"
-//                   }
-//                 >
-//                   <div className="flex items-center gap-2">
-//                     <div className="relative flex-1 min-w-0">
-//                       <Input
-//                         type="text"
-//                         className="w-full pr-16 border py-2 text-right rounded-md"
-//                         placeholder=""
-//                         onChange={(e) => {
-//                           const inputValue = e.target.value.replace(
-//                             /[^0-9]/g,
-//                             ""
-//                           ); // 정수만
-//                           field.onChange(
-//                             inputValue === "" ? null : Number(inputValue)
-//                           );
-//                         }}
-//                         value={
-//                           field.value !== undefined && field.value !== null
-//                             ? `${field.value}`
-//                             : ""
-//                         }
-//                         maxLength={6}
-//                         disabled={isDisabled}
-//                         onBlur={field.onBlur}
-//                         name={field.name}
-//                         ref={field.ref}
-//                       />
-//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-//                         이하
-//                       </span>
-//                     </div>
-//                   </div>
-//                 </FormUi>
-//               );
-//             }}
-//           />
-//           <FormField
-//             control={form.control}
-//             name={`crmty`}
-//             render={({ field }) => {
-//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
-//               const isDisabled = disabledFields
-//                 ? disabledFields.includes(field.name)
-//                 : true;
-//               return (
-//                 <FormUi label={!isDisabled ? `색도(도)*` : "색도(도)"}>
-//                   <div className="flex items-center gap-2">
-//                     <div className="relative flex-1 min-w-0">
-//                       <Input
-//                         type="text"
-//                         className="w-full pr-16 border py-2 text-right rounded-md"
-//                         placeholder=""
-//                         onChange={(e) => {
-//                           const inputValue = e.target.value.replace(
-//                             /[^0-9]/g,
-//                             ""
-//                           ); // 정수만
-//                           field.onChange(
-//                             inputValue === "" ? null : Number(inputValue)
-//                           );
-//                         }}
-//                         value={
-//                           field.value !== undefined && field.value !== null
-//                             ? `${field.value}`
-//                             : ""
-//                         }
-//                         maxLength={6}
-//                         disabled={isDisabled}
-//                         onBlur={field.onBlur}
-//                         name={field.name}
-//                         ref={field.ref}
-//                       />
-//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
-//                         이하
-//                       </span>
-//                     </div>
-//                   </div>
-//                 </FormUi>
-//               );
-//             }}
-//           />
-//           <FormField
-//             control={form.control}
-//             name={`rmrk`}
-//             render={({ field }) => {
-//               return (
-//                 <FormUi label={"비고"}>
-//                   <div className="flex items-center gap-2">
-//                     <div className="relative flex-1 min-w-0">
-//                       <Input
-//                         type="text"
-//                         className="w-full pr-16 border py-2  rounded-md"
-//                         placeholder=""
-//                         onChange={(e) => {
-//                           field.onChange(e.target.value);
-//                         }}
-//                         value={
-//                           field.value !== undefined && field.value !== ""
-//                             ? `${field.value}`
-//                             : ""
-//                         }
-//                         onBlur={field.onBlur}
-//                         name={field.name}
-//                         ref={field.ref}
-//                       />
-//                     </div>
-//                   </div>
-//                 </FormUi>
-//               );
-//             }}
-//           />
-//         </div>
-//       </div>
-
-//       {candidateFields.map(({ name, label, component, required }, index) =>
-//         component ? (
-//           <FormField
-//             key={name + index}
-//             control={form.control}
-//             name={name}
-//             render={({ field }) => (
-//               // <FormUi label={label}>
-//               //   {component(field)}
-//               // </FormUi>
-//               <AccessibleFormField
-//                 field={field}
-//                 label={label}
-//                 required={required}
-//                 error={
-//                   typeof form.formState.errors[name]?.message === "string"
-//                     ? (form.formState.errors[name] as FieldError)
-//                     : undefined
-//                 }
-//                 inputComponent={component?.(field)}
-//               />
-//             )}
-//           />
-//         ) : null
-//       )}
-
-//       {isSimilarCase && (
-//         <UiModal
-//           body={
-//             <ModalSimilarPage sply={sply} usageCd={usageCd} money={money} />
-//           }
-//           bodyClass="sm:max-w-[100vw] w-[1400px] h-[100dvh] max-h-[900px] overflow-y-auto overflow-x-hidden"
-//           open={isSimilarCase}
-//           onOpenChange={(open) => !open && setIsSimilarCase(false)}
-//           noHeaderYn="Y"
-//           noFooterYn="Y"
-//         />
-//       )}
-//     </>
-//   );
-// }
diff --git a/apps/dm_new/components/ui/sdmLoginForm/component.tsx b/apps/dm_new/components/ui/sdmLoginForm/component.tsx
deleted file mode 100644
index 7ec417c71..000000000
--- a/apps/dm_new/components/ui/sdmLoginForm/component.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import { useDmStore } from "@/app/store";
-import { BZNM_TOT_NO, FormField, FormUi } from "@common/business_components";
-import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
-import { Button, Input } from "@common/components";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { sha512 } from 'js-sha512';
-import React, { useEffect, useMemo, useState } from "react";
-import { FormProvider, useForm, type ControllerRenderProps } from "react-hook-form";
-import toast from "react-hot-toast";
-import * as z from "zod";
-
-export function SdmLoginForm() {
-  const { actionLogin, initializeCommonData } = useDmStore((state) => state);
-  const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(true);
-
-  const formatBusinessNumber = (value: string) => {
-    // 숫자만 추출
-    const digitsOnly = value.replace(/\D/g, "");
-
-    // 10자리까지만 처리
-    const limitedDigits = digitsOnly.slice(0, 10);
-
-    // 3-2-5 형식으로 포맷팅
-    if (limitedDigits.length <= 3) {
-      return limitedDigits;
-    } else if (limitedDigits.length <= 5) {
-      return `${limitedDigits.slice(0, 3)}-${limitedDigits.slice(3)}`;
-    } else {
-      return `${limitedDigits.slice(0, 3)}-${limitedDigits.slice(3, 5)}-${limitedDigits.slice(5)}`;
-    }
-  };
-
-  // 스키마를 useMemo로 최적화
-  const sdmLoginFormSchema = useMemo(() => z.object({
-    dmdInfoId: z.string()
-      .min(1, "사업자등록번호를 입력해주세요")
-      .regex(/^\d{10}$/, "사업자등록번호는 10자리 숫자만 입력 가능합니다"),
-    bznmTotNo: isBznmTotNoDisabled
-      ? z.string().optional()
-      : z.string().length(4, "종사업자등록번호는 4자리 숫자만 입력 가능합니다"),
-    password: z.string()
-      .min(1, "비밀번호를 입력해주세요")
-      .min(8, "비밀번호는 8자 이상 입력해주세요")
-      .max(16, "비밀번호는 16자 이내로 입력해주세요"),
-    rgtr: z.string().optional(),
-    dmdAplyPswd: z.string().optional(),
-  }), [isBznmTotNoDisabled]);
-
-  type SdmLoginForm = z.infer<typeof sdmLoginFormSchema>;
-  type FieldComponent = (field: ControllerRenderProps<SdmLoginForm, keyof SdmLoginForm>) => React.ReactElement;
-
-  const formSchema = sdmLoginFormSchema;
-
-  useEffect(() => {
-    initializeCommonData();
-  }, [initializeCommonData]);
-
-  const defaultValues: SdmLoginForm = {
-    dmdInfoId: '',
-    bznmTotNo: '',
-    password: '',
-    rgtr: '',
-    dmdAplyPswd: '',
-  };
-
-  const form = useForm<SdmLoginForm>({
-    resolver: zodResolver(formSchema),
-    defaultValues,
-    mode: "onChange",
-  });
-
-  const handleCheckboxChange = (checked: boolean) => {
-    setIsBznmTotNoDisabled(checked);
-  };
-
-  const initPassword = () => {
-    toast(
-      (t) => (
-        <div className="flex flex-col items-center">
-          <div className="text-2xl mb-2">
-            관리자(031-0000-0000)에게 비밀번호 초기화 요청을 유선으로 하시기 바랍니다.
-          </div>
-          <Button size={"sm"} onClick={() => toast.dismiss(t.id)}>
-            확인
-          </Button>
-        </div>
-      ),
-      {
-        id: "pwd-reset",
-        duration: Infinity,
-        position: "top-center",
-      }
-    );
-  }
-
-  const handleLogin = () => {
-    const data = form.getValues();
-    const passwordStr = sha512.hex(data.password)
-    data.dmdAplyPswd = passwordStr;
-    const param = {
-      dmdInfoId: data.dmdInfoId + (isBznmTotNoDisabled ? '0000' : data.bznmTotNo),
-      dmdAplyPswd: data.dmdAplyPswd,
-    }
-    actionLogin(param as unknown as DemandCompType);
-  };
-
-  const formFields: Array<{
-    name: keyof SdmLoginForm;
-    label: string;
-    component: FieldComponent | undefined;
-  }> = [
-      {
-        name: "dmdInfoId",
-        label: "사업자등록번호",
-        component: (field) => (
-          <Input
-            placeholder="사업자등록번호를 입력하세요"
-            type="text"
-            className="!mt-5 !mb-5 !text-xl text-gray-600"
-            {...field}
-            value={formatBusinessNumber(field.value as string)}
-            onChange={(e) => {
-              const dmdId = e.target.value.replace(/\D/g, "").slice(0, 10);
-              field.onChange(dmdId);
-            }}
-          />
-        )
-      },
-      {
-        name: "bznmTotNo",
-        label: BZNM_TOT_NO || "종사업자등록번호",
-        component: (field) => (
-          <FormUi
-            label="종사업자등록번호"
-            onCheckboxChange={handleCheckboxChange}
-            isDisabled={isBznmTotNoDisabled}
-          >
-            <Input
-              placeholder="여러사업장이 있을 경우 입력해주세요"
-              type="text"
-              className="!mt-5 !text-xl text-gray-600"
-              disabled={isBznmTotNoDisabled}
-              {...field}
-            />
-          </FormUi>
-        )
-      },
-      {
-        name: "password",
-        label: "비밀번호",
-        component: (field) => (
-          <Input
-            placeholder="비밀번호를 입력하세요"
-            type="password"
-            className="!mt-5 !mb-5 !text-xl text-gray-600"
-            {...field}
-          />
-        )
-      }
-    ];
-
-  return (
-    <>
-      <div>
-        <FormProvider {...form}>
-          {formFields.map(({ name, label, component }) => (
-            <FormField
-              key={name}
-              control={form.control}
-              name={name}
-              render={({ field }) => (
-                label === '종사업자등록번호' ?
-                  <>
-                    {component && component(field)}
-                  </>
-                  : <FormUi label={label}>
-                    {component && component(field)}
-                  </FormUi>
-              )}
-            />
-          ))}
-        </FormProvider>
-        <div className="flex justify-center pt-4">
-          <div className="flex flex-col items-center">
-            <Button
-              onClick={handleLogin}
-              className="w-32 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200"
-            >
-              로그인
-            </Button>
-            <div className="text-xl mt-2 text-gray-400 cursor-pointer" onClick={initPassword}>비밀번호 초기화 요청</div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
\ No newline at end of file
diff --git a/apps/dm_new/eslint.config.mjs b/apps/dm_new/eslint.config.mjs
deleted file mode 100644
index 7de132089..000000000
--- a/apps/dm_new/eslint.config.mjs
+++ /dev/null
@@ -1,32 +0,0 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const isProd = process.env.NODE_ENV === "production";
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
-  {
-    files: ["**/*.{ts,tsx,mts,cts}"],
-    languageOptions: {
-      parserOptions: {
-        tsconfigRootDir: __dirname,
-        project: ["./tsconfig.json"],
-      },
-    },
-  },
-  {rules:{
-    // other rules..
-    "@typescript-eslint/no-explicit-any": "off",
-    // "@next/next/no-img-element": "off",
-    ...(isProd ? { "react-hooks/exhaustive-deps": "off" } : {}),
-  }},
-];
-
-export default eslintConfig;
diff --git a/apps/dm_new/middleware.ts b/apps/dm_new/middleware.ts
deleted file mode 100644
index e7d7a1509..000000000
--- a/apps/dm_new/middleware.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { CLAIM_NAME, AUTH_USER_ID } from "./src/shared/config";
-// import { SERVER_API_FO_URL, SERVER_API_WR_URL } from "./src/shared/config/env";
-
-// const CLAIM_NAME = "Authorization";
-// const AUTH_USER_ID = "token-id";
-const serverApiUrl = process.env.NEXT_PUBLIC_CS_SERVER_API_URL;
-const GEOSERVER_URL = process.env.NEXT_PUBLIC_GEOSERVER_URL || "";
-const LX_GEOSERVER_URL = process.env.NEXT_PUBLIC_LX_GEOSERVER_URL || "";
-const GATEWAY_URL = process.env.NEXT_PUBLIC_GATEWAY_URL || "";
-const BUSINESS_JUSO_API_URL = process.env.NEXT_PUBLIC_FINDADRESS_URL || "";
-const AdressKey = process.env.NEXT_PRIVATE_WR_ADDRESS_KEY || "";
-
-/** 공통: URLSearchParams의 값을 decodeURIComponent 적용하여 querystring 생성 */
-function toDecodedQueryString(params: URLSearchParams): string {
-  const entries: string[][] = Array.from(params.entries()).map(([k, v]) => {
-    try {
-      return [k, decodeURIComponent(v)] as string[];
-    } catch {
-      return [k, v] as string[];
-    }
-  });
-  return new URLSearchParams(entries).toString();
-}
-
-export function middleware(req: NextRequest) {
-  const pathname = req.nextUrl.pathname;
-  console.log(`[Middleware] Request URL: ${req.url}`);
-  const searchParams = req.nextUrl.searchParams;
-
-  // if (pathname.startsWith("/server")) {
-  //   const queryParams = searchParams.toString();
-  //   const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
-  //     queryParams ? `?${queryParams}` : ""
-  //   }`;
-  //   console.log(`[Middleware] Rewriting from '/server' path to: ${newUrl}`);
-  //   return NextResponse.rewrite(new URL(newUrl));
-  // }
-
-  if (pathname.startsWith("/server")) {
-    const decodedParams = Array.from(searchParams.entries())
-      .map(([key, value]) => `${key}=${decodeURIComponent(value)}`)
-      .join("&");
-
-    const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${decodedParams ? `?${decodedParams}` : ""
-      }`;
-    return NextResponse.rewrite(new URL(newUrl));
-  }
-
-  if (pathname === "/") {
-    console.log(" maim 화면이동 ");
-    return NextResponse.redirect(new URL("/main", req.url));
-  }
-
-  if (pathname.startsWith("/attach-service")) {
-    const requestHeaders = new Headers(req.headers);
-    const token = req.cookies.get(CLAIM_NAME)?.value;
-    const userId = req.cookies.get(AUTH_USER_ID)?.value;
-    const newUrl = `${serverApiUrl}${pathname}`;
-    if (token) requestHeaders.set(CLAIM_NAME, token);
-    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
-
-    console.log(`[Middleware] Rewriting from '/attach-service' path to: ${newUrl}`);
-    return NextResponse.rewrite(new URL(newUrl), {
-      headers: requestHeaders,
-    });
-  }
-
-  if (pathname.startsWith("/user-service")
-    || pathname.startsWith("/cms-service")) {
-    let queryParams = searchParams.toString();
-    const requestHeaders = new Headers(req.headers);
-    const newUrl = `${serverApiUrl}${pathname}${queryParams ? `?${queryParams}` : ""}`;
-
-    console.log(`[Middleware] Rewriting from '/user-service' path to: ${newUrl}`);
-    return NextResponse.rewrite(new URL(newUrl), {
-      headers: requestHeaders,
-    });
-  }
-
-  if (pathname.startsWith("/geoserver")) {
-    let queryParams = searchParams.toString();
-    const typename = searchParams.get("TYPENAME");
-    console.log("typename  ", typename);
-
-    let newUrl = `${GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`;
-
-    if (
-      typename == "hasudo:tb_il_swage_prcs_fclt" || //하수처리시설
-      typename == "hasudo:tb_ms_swage_prcs_zone" || //하수처리구역
-      typename == "hasudo:tb_ms_sbmrg_dngr_map" || //침수위험지도
-      typename == "hasudo:tb_ms_flood_dngr_map" //도시침수지도
-    ) {
-      newUrl = `${GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`;
-    } else if (
-      typename == "hasudo:tb_ms_swage_ppl" || //관로
-      typename == "hasudo:tb_ms_swage_mhl" || //맨홀
-      typename == "hasudo:tb_ms_swage_pmstn" || //펌프장
-      typename == "hasudo:tb_ms_stofcbr" //우수토실
-    ) {
-      newUrl = `${LX_GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`;
-    } else if (
-      typename == "hasudo:om_dt_untrt_swg_rain" || //중점우수토실
-      typename == "hasudo:om_wqlt_station" || //관측소
-      typename == "hasudo:tb_wr_bdst_ruse_fclt" || //재이용시설
-      typename == "hasudo:tb_wr_rnwtr_utztn_fclt" || //빗물이용시설
-      typename == "hasudo:tb_wr_rswtr_fclt" || //중수도시설
-      typename == "hasudo:tb_wr_htdfl_fclt" || //온배수시설
-      typename == "hasudo:tb_wr_ruse_fclt_dmd_co" || //수요처
-      typename == "hasudo:tb_wr_tmpr_dmd_co" //잠재수요처
-    ) {
-      const url = req.nextUrl.clone();
-      url.searchParams.set("TYPENAME", typename.replace("hasudo:", ""));
-      queryParams = url.searchParams.toString();
-      newUrl = `${GATEWAY_URL}/api/v1/map/geometry${queryParams ? `?${queryParams}` : ""}`;
-    }
-
-    console.log(`[Middleware] Rewriting from '/geoserver' path to: ${newUrl}`);
-    return NextResponse.rewrite(new URL(newUrl));
-  }
-
-  if (pathname.startsWith("/reuse-service")) {
-    const queryParams = searchParams.toString();
-    const newUrl = `${GATEWAY_URL}${pathname}${queryParams ? `?${queryParams}` : ""}`;
-    console.log(`[Middleware] Rewriting from '/reuse-service' path to: ${newUrl}`);
-    return NextResponse.rewrite(new URL(newUrl));
-  } else if (pathname.startsWith("/operation-service")) {
-    const queryParams = searchParams.toString();
-    const newUrl = `${GATEWAY_URL}${pathname}${queryParams ? `?${queryParams}` : ""}`;
-    console.log(`[Middleware] Rewriting from '/operation-service' path to: ${newUrl}`);
-    return NextResponse.rewrite(new URL(newUrl));
-  } else if (pathname.startsWith("/sewerage-service")) {
-    const queryParams = searchParams.toString();
-    const newUrl = `${GATEWAY_URL}${pathname}${queryParams ? `?${queryParams}` : ""}`;
-    console.log(`[Middleware] Rewriting from '/sewerage-service' path to: ${newUrl}`);
-    return NextResponse.rewrite(new URL(newUrl));
-  }
-
-  if (pathname.startsWith("/ngii-server")) {
-    const decodedQuery = toDecodedQueryString(searchParams);
-    const newUrl = `${process.env.NEXT_PUBLIC_NGII_URL}${pathname.replace("/ngii-server", "")}${decodedQuery ? `?${decodedQuery}` : ""}`;
-    console.log(`[Middleware] Rewriting from '${pathname}' path to: ${newUrl}`);
-    return NextResponse.rewrite(new URL(newUrl));
-  }
-
-  if (pathname.startsWith("/bussiness-juso-service")) {
-    console.log("AdressKey ", AdressKey);
-    const params = new URLSearchParams({
-      currentPage: "1", // 원하는 페이지
-      countPerPage: "5", // 페이지당 결과 수
-      keyword: searchParams.get("keyword") || "", // 검색어(주소)
-      confmKey: AdressKey, // 인증키 인터넷용 패쇄망용은 따로 발급 필요 즉 middleware에서 치환해서 사용해야할듯
-      resultType: "json", // 결과 형식 기본은 xml
-    });
-    const newUrl = `${BUSINESS_JUSO_API_URL}?${params.toString()}`;
-    console.log(`[Middleware] Request to business.juso.go.kr`);
-    console.log(req.url);
-    console.log(`[Middleware] Rewriting from '/business.juso.go.kr' path to: ${newUrl}`);
-    return NextResponse.rewrite(new URL(newUrl));
-  }
-
-  return NextResponse.next();
-}
-
-export const config = {
-  matcher: [
-    "/server/:path*",
-    "/user-service/:path*",
-    "/cms-service/:path*",
-    "/attach-service/:path*",
-    "/geoserver/:path*",
-    "/operation-service/:path*",
-    "/reuse-service/:path*",
-    "/sewerage-service/:path*",
-    "/bussiness-juso-service/:path*",
-    "/ngii-server/:path*",
-    "/",
-  ],
-};
diff --git a/apps/dm_new/next-env.d.ts b/apps/dm_new/next-env.d.ts
deleted file mode 100644
index 1b3be0840..000000000
--- a/apps/dm_new/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/dm_new/next.config.ts b/apps/dm_new/next.config.ts
deleted file mode 100644
index 5b5bf85da..000000000
--- a/apps/dm_new/next.config.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { NextConfig } from "next";
-// import path from "path";
-
-const subDomain =
-  process.env.NEXT_PUBLIC_PROXY_HOST || "http://localhost:3000";
-
-const nextConfig: NextConfig = {
-  output: "standalone",
-  experimental: {
-    proxyTimeout: 600000,
-  },
-
-  // // 🔥 반드시 필요
-  // webpack(config) {
-  //   config.resolve.alias = {
-  //     ...(config.resolve.alias || {}),
-  //     // monorepo 구조 기준
-  //     "@common": path.resolve(__dirname, "../../packages/common"),
-  //   };
-  //   return config;
-  // },
-
-  async rewrites() {
-    return {
-      beforeFiles: [
-        {
-          source: "/_next/static/:path*",
-          destination: `${subDomain}/_next/static/:path*`,
-          has: [
-            {
-              type: "header",
-              key: "referer",
-              value: "(.*)/pst(.*)",
-            },
-          ],
-        },
-      ],
-      afterFiles: [
-        {
-          source: "/sewerage-service/:path*",
-          destination: `${subDomain}/sewerage-service/:path*`,
-        },
-        {
-          source: "/reuse-service/:path*",
-          destination: `${subDomain}/reuse-service/:path*`,
-        },
-        {
-          source: "/operation-service/:path*",
-          destination: `${subDomain}/operation-service/:path*`,
-        },
-      ],
-      fallback: [],
-    };
-  },
-};
-
-export default nextConfig;
diff --git a/apps/dm_new/package.json b/apps/dm_new/package.json
deleted file mode 100644
index f318baf0b..000000000
--- a/apps/dm_new/package.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "name": "dm_new",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev -p 3015",
-    "build": "next build",
-    "start:dm_new": "next start -p 3015",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@common/assets": "workspace:*",
-    "@common/business_components": "workspace:*",
-    "@common/components": "workspace:*",
-    "@hookform/resolvers": "^4.1.3",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "js-cookie": "^3.0.5",
-    "js-sha512": "^0.9.0",
-    "lucide-react": "^0.474.0",
-    "next": "15.3.8",
-    "react-hook-form": "^7.54.2",
-    "react-hot-toast": "^2.5.2",
-    "tailwind-merge": "^3.0.1",
-    "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.24.2"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@types/webpack": "^5.28.5",
-    "eslint": "^9",
-    "eslint-config-next": "15.1.7",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
-  }
-}
diff --git a/apps/dm_new/public/favicon.ico b/apps/dm_new/public/favicon.ico
deleted file mode 100644
index d304b6981..000000000
Binary files a/apps/dm_new/public/favicon.ico and /dev/null differ
diff --git a/apps/dm_new/public/fonts/NotoSansKR-Regular.woff2 b/apps/dm_new/public/fonts/NotoSansKR-Regular.woff2
deleted file mode 100644
index 61d064695..000000000
Binary files a/apps/dm_new/public/fonts/NotoSansKR-Regular.woff2 and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/business/globalCase/australia_01.png b/apps/dm_new/public/images/landing/business/globalCase/australia_01.png
deleted file mode 100644
index 756e0cf60..000000000
Binary files a/apps/dm_new/public/images/landing/business/globalCase/australia_01.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/business/rain/rain_01.png b/apps/dm_new/public/images/landing/business/rain/rain_01.png
deleted file mode 100644
index 39433ad8b..000000000
Binary files a/apps/dm_new/public/images/landing/business/rain/rain_01.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/business/rain/rain_02.png b/apps/dm_new/public/images/landing/business/rain/rain_02.png
deleted file mode 100644
index fb0e6e107..000000000
Binary files a/apps/dm_new/public/images/landing/business/rain/rain_02.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/business/rain/rain_03.png b/apps/dm_new/public/images/landing/business/rain/rain_03.png
deleted file mode 100644
index 89cb44973..000000000
Binary files a/apps/dm_new/public/images/landing/business/rain/rain_03.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/business/rain/rain_04.png b/apps/dm_new/public/images/landing/business/rain/rain_04.png
deleted file mode 100644
index 61d38bb6a..000000000
Binary files a/apps/dm_new/public/images/landing/business/rain/rain_04.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/business/sewage/bolyeong_01.png b/apps/dm_new/public/images/landing/business/sewage/bolyeong_01.png
deleted file mode 100644
index 5fd31fbf4..000000000
Binary files a/apps/dm_new/public/images/landing/business/sewage/bolyeong_01.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/business/sewage/cheongju_01.png b/apps/dm_new/public/images/landing/business/sewage/cheongju_01.png
deleted file mode 100644
index f1565fdc9..000000000
Binary files a/apps/dm_new/public/images/landing/business/sewage/cheongju_01.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/business/sewage/guri_01.png b/apps/dm_new/public/images/landing/business/sewage/guri_01.png
deleted file mode 100644
index 4e14c957b..000000000
Binary files a/apps/dm_new/public/images/landing/business/sewage/guri_01.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/business/sewage/guri_02.png b/apps/dm_new/public/images/landing/business/sewage/guri_02.png
deleted file mode 100644
index 9ca300ca4..000000000
Binary files a/apps/dm_new/public/images/landing/business/sewage/guri_02.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/business/sewage/paju_01.png b/apps/dm_new/public/images/landing/business/sewage/paju_01.png
deleted file mode 100644
index 6cc8592db..000000000
Binary files a/apps/dm_new/public/images/landing/business/sewage/paju_01.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/business/sewage/yeosu_01.png b/apps/dm_new/public/images/landing/business/sewage/yeosu_01.png
deleted file mode 100644
index bac801fa2..000000000
Binary files a/apps/dm_new/public/images/landing/business/sewage/yeosu_01.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/cases/greywater_building.png b/apps/dm_new/public/images/landing/cases/greywater_building.png
deleted file mode 100644
index 151cab2b5..000000000
Binary files a/apps/dm_new/public/images/landing/cases/greywater_building.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/cases/greywater_factory.png b/apps/dm_new/public/images/landing/cases/greywater_factory.png
deleted file mode 100644
index 617a73008..000000000
Binary files a/apps/dm_new/public/images/landing/cases/greywater_factory.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/cases/greywater_overall.png b/apps/dm_new/public/images/landing/cases/greywater_overall.png
deleted file mode 100644
index 1bc03c5f4..000000000
Binary files a/apps/dm_new/public/images/landing/cases/greywater_overall.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/cases/greywater_usage.png b/apps/dm_new/public/images/landing/cases/greywater_usage.png
deleted file mode 100644
index 729bbd023..000000000
Binary files a/apps/dm_new/public/images/landing/cases/greywater_usage.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/cases/rainwater_building.png b/apps/dm_new/public/images/landing/cases/rainwater_building.png
deleted file mode 100644
index 6a9db8480..000000000
Binary files a/apps/dm_new/public/images/landing/cases/rainwater_building.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/cases/rainwater_usage.png b/apps/dm_new/public/images/landing/cases/rainwater_usage.png
deleted file mode 100644
index 31403b8cc..000000000
Binary files a/apps/dm_new/public/images/landing/cases/rainwater_usage.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/cases/rainwater_usage_amount.png b/apps/dm_new/public/images/landing/cases/rainwater_usage_amount.png
deleted file mode 100644
index 61078a038..000000000
Binary files a/apps/dm_new/public/images/landing/cases/rainwater_usage_amount.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/cases/treated_water_facility.png b/apps/dm_new/public/images/landing/cases/treated_water_facility.png
deleted file mode 100644
index 280ffa116..000000000
Binary files a/apps/dm_new/public/images/landing/cases/treated_water_facility.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/cases/treated_water_region.png b/apps/dm_new/public/images/landing/cases/treated_water_region.png
deleted file mode 100644
index 977df110b..000000000
Binary files a/apps/dm_new/public/images/landing/cases/treated_water_region.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/cases/treated_water_usage.png b/apps/dm_new/public/images/landing/cases/treated_water_usage.png
deleted file mode 100644
index a2f55cd40..000000000
Binary files a/apps/dm_new/public/images/landing/cases/treated_water_usage.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/cases/treated_water_year.png b/apps/dm_new/public/images/landing/cases/treated_water_year.png
deleted file mode 100644
index 83a5e68b6..000000000
Binary files a/apps/dm_new/public/images/landing/cases/treated_water_year.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/eu_01.png b/apps/dm_new/public/images/landing/eu_01.png
deleted file mode 100644
index 05de059c8..000000000
Binary files a/apps/dm_new/public/images/landing/eu_01.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/intro/domestic_textbox.png b/apps/dm_new/public/images/landing/intro/domestic_textbox.png
deleted file mode 100644
index 2fa8c0344..000000000
Binary files a/apps/dm_new/public/images/landing/intro/domestic_textbox.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/intro/greywater_mandatory.png b/apps/dm_new/public/images/landing/intro/greywater_mandatory.png
deleted file mode 100644
index 2e26c928e..000000000
Binary files a/apps/dm_new/public/images/landing/intro/greywater_mandatory.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/intro/greywater_standard.png b/apps/dm_new/public/images/landing/intro/greywater_standard.png
deleted file mode 100644
index 8d613467c..000000000
Binary files a/apps/dm_new/public/images/landing/intro/greywater_standard.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/intro/law_timeline.png b/apps/dm_new/public/images/landing/intro/law_timeline.png
deleted file mode 100644
index a232aa2da..000000000
Binary files a/apps/dm_new/public/images/landing/intro/law_timeline.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/intro/linkage.png b/apps/dm_new/public/images/landing/intro/linkage.png
deleted file mode 100644
index cca2007ee..000000000
Binary files a/apps/dm_new/public/images/landing/intro/linkage.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/intro/performance_left.png b/apps/dm_new/public/images/landing/intro/performance_left.png
deleted file mode 100644
index 6efe9651a..000000000
Binary files a/apps/dm_new/public/images/landing/intro/performance_left.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/intro/policy_timeline.png b/apps/dm_new/public/images/landing/intro/policy_timeline.png
deleted file mode 100644
index e21c2a2e9..000000000
Binary files a/apps/dm_new/public/images/landing/intro/policy_timeline.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/intro/rainreuse_mandatory.png b/apps/dm_new/public/images/landing/intro/rainreuse_mandatory.png
deleted file mode 100644
index 4cc6c00de..000000000
Binary files a/apps/dm_new/public/images/landing/intro/rainreuse_mandatory.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/intro/rainwater_design.png b/apps/dm_new/public/images/landing/intro/rainwater_design.png
deleted file mode 100644
index b0f4fb02b..000000000
Binary files a/apps/dm_new/public/images/landing/intro/rainwater_design.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/intro/rainwater_standards.png b/apps/dm_new/public/images/landing/intro/rainwater_standards.png
deleted file mode 100644
index 9b27f5382..000000000
Binary files a/apps/dm_new/public/images/landing/intro/rainwater_standards.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/intro/rel_note.png b/apps/dm_new/public/images/landing/intro/rel_note.png
deleted file mode 100644
index ea9f634c6..000000000
Binary files a/apps/dm_new/public/images/landing/intro/rel_note.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/intro/treatedwater_mandatory.png b/apps/dm_new/public/images/landing/intro/treatedwater_mandatory.png
deleted file mode 100644
index dbae8be70..000000000
Binary files a/apps/dm_new/public/images/landing/intro/treatedwater_mandatory.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/singapore_01.png b/apps/dm_new/public/images/landing/singapore_01.png
deleted file mode 100644
index 78cea99fb..000000000
Binary files a/apps/dm_new/public/images/landing/singapore_01.png and /dev/null differ
diff --git a/apps/dm_new/public/images/landing/taiwan_01.png b/apps/dm_new/public/images/landing/taiwan_01.png
deleted file mode 100644
index a972930ab..000000000
Binary files a/apps/dm_new/public/images/landing/taiwan_01.png and /dev/null differ
diff --git a/apps/dm_new/src/entities/auth/api/login-service.ts b/apps/dm_new/src/entities/auth/api/login-service.ts
deleted file mode 100644
index 43ea1c33d..000000000
--- a/apps/dm_new/src/entities/auth/api/login-service.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { LoginService, ILogin } from "../model/login-interface";
-import { tokenManager } from "../lib/token-manager";
-import {PROXY_HOST, ACCESS_TOKEN, AUTH_USER_ID,SITE_ID, CLAIM_NAME, ENDPOINT, JWT_EXPIRATION_TIME } from "../../../shared/config";
-
-export class LoginApiService implements LoginService {
-  private static instance: LoginApiService;
-
-  private constructor() {}
-
-  public static getInstance(): LoginApiService {
-    if (!LoginApiService.instance) {
-      LoginApiService.instance = new LoginApiService();
-    }
-    return LoginApiService.instance;
-  }
-
-  public async login(payload: ILogin): Promise<void> {
-    try {
-      const response = await fetch( PROXY_HOST+ ENDPOINT.USER_SERVICE.LOGIN, {
-        method: "POST",
-        body: JSON.stringify({
-          userId: payload.userId,
-          password: payload.password,
-        }),
-      });
-      // const data =  response.headers.get(ACCESS_TOKEN);
-      const accessToken = response.headers.get(ACCESS_TOKEN);
-      const tokenId =    response.headers.get(AUTH_USER_ID);
-      
-      console.log('accessToken ', accessToken)
-      console.log('tokenId ', tokenId)
-
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-      tokenManager.setToken("site-id-key", SITE_ID);
-      tokenManager.setupRefreshTimer(
-        () => this.silentRefresh(),
-        JWT_EXPIRATION_TIME,
-      );
-    } catch (error) {
-
-      console.log(' login err ' , error)
-      throw new Error(`Login failed: ${error}`);
-    }
-  }
-
-
-  public async silentRefresh(): Promise<void> {
-    console.log('  silentRefresh ')
-    
-    try {
-      const response = await fetch(PROXY_HOST+
-        `${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-        { method: "PUT" },
-      );
-
-      const data = await response.json();
-      const accessToken = data[ACCESS_TOKEN];
-      const tokenId = data[AUTH_USER_ID];
-
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-    } catch (error) {
-      tokenManager.clearAuthToken();
-      throw new Error(`Silent refresh failed: ${error}`);
-    }
-  }
-}
-
-export const LoginApi = LoginApiService.getInstance();
diff --git a/apps/dm_new/src/entities/auth/index.ts b/apps/dm_new/src/entities/auth/index.ts
deleted file mode 100644
index 9dc9dd368..000000000
--- a/apps/dm_new/src/entities/auth/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { LoginApi } from "./api/login-service";
-//export { AuthWrapper } from "./lib/auth-wrapper";
diff --git a/apps/dm_new/src/entities/auth/lib/auth-wrapper.tsx b/apps/dm_new/src/entities/auth/lib/auth-wrapper.tsx
deleted file mode 100644
index 678ff50d5..000000000
--- a/apps/dm_new/src/entities/auth/lib/auth-wrapper.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// "use client";
-
-// import { useEffect } from "react";
-// import { useRouter } from "next/navigation";
-// import { LoginApi } from "../api/login-service";
-
-// const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-//   const router = useRouter();
-//   const { userInfo, setUserInfo } = useUserStore((state) => state);
-
-//   async function authCheck() {
-//     const userId = getCookie(AUTH_USER_ID);
-//     if (!userId) {
-//       throw new Error("Missing required authentication tokens");
-//     }
-
-//     const response = await client.get<IUserInfo>(
-//       `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
-//     );
-//     if (!userInfo) setUserInfo(response.data);
-//   }
-
-//   useEffect(() => {
-//     (async () => {
-//       try {
-//         await authCheck();
-//       } catch (error) {
-//         console.error(error);
-
-//         try {
-//           await LoginApi.silentRefresh();
-//           await authCheck();
-//         } catch (refreshError) {
-//           console.error("Token refresh failed:", refreshError);
-//           setUserInfo(null);
-//           router.push("/auth/login");
-//         }
-//       }
-//     })();
-//   }, []);
-
-//   return <>{children}</>;
-// };
-
-// export { AuthWrapper };
diff --git a/apps/dm_new/src/entities/auth/lib/token-manager.ts b/apps/dm_new/src/entities/auth/lib/token-manager.ts
deleted file mode 100644
index 40d32f33e..000000000
--- a/apps/dm_new/src/entities/auth/lib/token-manager.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config";
-import { getCookie, removeCookie, setCookie } from "@/src/shared/lib/cookie";
-
-export class TokenManager {
-  private static instance: TokenManager;
-  private refreshTimer: NodeJS.Timeout | null = null;
-
-  private constructor() {}
-
-  public static getInstance(): TokenManager {
-    if (!TokenManager.instance) {
-      TokenManager.instance = new TokenManager();
-    }
-    return TokenManager.instance;
-  }
-
-  public getToken(key: string): string | undefined {
-    return getCookie(key);
-  }
-
-  public setToken(key: string, value: string): void {
-    setCookie(key, value, {
-      secure: window.location.protocol === "https:",
-      sameSite: "lax",
-    });
-  }
-
-  public removeToken(key: string): void {
-    removeCookie(key);
-  }
-
-  public setupRefreshTimer(
-    callback: () => Promise<void>,
-    expirationTime: number,
-  ): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-    }
-
-    this.refreshTimer = setTimeout(() => {
-      callback().catch((error) => {
-        console.error("Silent refresh failed:", error);
-        this.clearAuthToken();
-      });
-    }, expirationTime - 60000);
-  }
-
-  public clearAuthToken(): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-
-    this.removeToken(CLAIM_NAME);
-    this.removeToken(AUTH_USER_ID);
-  }
-}
-
-export const tokenManager = TokenManager.getInstance();
diff --git a/apps/dm_new/src/entities/auth/model/login-interface.ts b/apps/dm_new/src/entities/auth/model/login-interface.ts
deleted file mode 100644
index 5aaf53044..000000000
--- a/apps/dm_new/src/entities/auth/model/login-interface.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface ILogin {
-  userId: string;
-  password: string;
-}
-
-export interface LoginService {
-  login(payload: ILogin): Promise<void>;
-  silentRefresh(): Promise<void>;
-}
diff --git a/apps/dm_new/src/shared/config/api.ts b/apps/dm_new/src/shared/config/api.ts
deleted file mode 100644
index a531bed85..000000000
--- a/apps/dm_new/src/shared/config/api.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { PROXY_HOST } from "./env";
-
-export const BASE_URL = `${PROXY_HOST}/server`;
-
-export const ENDPOINT = {
-  ATTACH_SERVICE: {
-    TUS_UPLOAD: "/attach-service/api/v1/tus/upload",
-    EDITOR_UPLOAD: "/attach-service/api/v1/upload/editor",
-    IMAGES: "/attach-service/api/v1/images",
-    MOVIE_THUMBNAIL: "/attach-service/api/v1/movie/thumbnail",
-    ATTACHMENTS: "/attach-service/api/v1/atfl/attachments",
-    DOWNLOAD: "/attach-service/api/v1/atflcd/download",
-    STREAM_VIDEO: "/attach-service/api/v1/stream/video",
-  },
-  USER_SERVICE: {
-    LOGIN: "/user-service/login",
-    USERS: "/user-service/api/v1/users",
-    SILENT_REFRESH: "/user-service/api/v1/users/token/refresh",
-    AUTHORIZATIONS: "/user-service/api/v1/authorizations",
-    ROLE_AUTHORIZATIONS: "/user-service/api/v1/role-authorizations",
-    ROLES: "/user-service/api/v1/roles",
-
-  },
-  CMS_SERVICE: {
-    DMSITES:'cms-service/api/v1/menu/anonymous/user/DM',
-    SITES: "/cms-service/api/v1/sites",
-    IPS: "/cms-service/api/v1/site-ips",
-    DOMAINS: "/cms-service/api/v1/site-dmns",
-    POSTINGS: "/cms-service/api/v1/site-pstgs",
-    CODE: "/cms-service/api/v1/code/cache",
-    MENUS: "/cms-service/api/v1/menus",
-    MENU_ROLES: "/cms-service/api/v1/menu-roles",
-    MENU_AUTHRTS: "/cms-service/api/v1/menu-authrts",
-    CONTENTS: "/cms-service/api/v1/contents",
-    CONTENTS_DETAILS: "/cms-service/api/v1/contents-details",
-    ORGANIZATIONS: "/cms-service/api/v1/ognzs",
-    USER_ORGANIZATION: "/cms-service/api/v1/user-ognz",
-    IMAGES: "/cms-service/api/v1/images",
-    BANNERS: "/cms-service/api/v1/bnrs",
-    TEMPLATE: "/cms-service/api/v1/tmplt",
-    TERMS: "/cms-service/api/v1/trms",
-    LWPO_CODE: "/cms-service/api/v1/lwpo-cds",
-    UP_CODE: "/cms-service/api/v1/up-codes",
-    POPUPS: "/cms-service/api/v1/popups",
-    SCHEDULES: "/cms-service/api/v1/schdls",
-    SURVEY: "/cms-service/api/v1/srvy",
-    SURVEY_QUESTION: "/cms-service/api/v1/srvy-qitem",
-    SURVEY_ARTICLE: "/cms-service/api/v1/srvy-artcl",
-  },
-  BOARD_SERVICE: {
-    BBS: "/board-service/api/v1/bbs",
-    BBS_TEMPLATES: "/board-service/api/v1/bbsTmplt",
-    POSTS: "/board-service/api/v1/posts",
-    POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts",
-  },
-};
-
-export const JWT_EXPIRATION_TIME = 1800000;
diff --git a/apps/dm_new/src/shared/config/env.ts b/apps/dm_new/src/shared/config/env.ts
deleted file mode 100644
index a9011b90e..000000000
--- a/apps/dm_new/src/shared/config/env.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "DM";
-export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
-export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_DM_URL = process.env.NEXT_PUBLIC_DM_SERVER_API_URL ||'http://con.mind-one.co.kr:11035/api/v1';
-export const SERVER_API_FO_URL = process.env.NEXT_PUBLIC_FO_SERVER_API_URL||' http://con.mind-one.co.kr:11082/api/v1';
-export const SERVER_API_WR_URL = process.env.NEXT_PUBLIC_WR_SERVER_API_URL||' http://con.mind-one.co.kr:11080/api/v1';
-export const SERVER_API_CS_URL = process.env.NEXT_PUBLIC_CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000';
-export const SERVER_API_CS_TUS_URL = process.env.NEXT_PUBLIC_CS_TUS_UPLOAD ||'/attach-service/api/v1/tus/upload'
-export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
-export const ACCESS_TOKEN =  process.env.NEXT_PUBLIC_ACCESS_TOKEN || "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 SERVER_SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL;
\ No newline at end of file
diff --git a/apps/dm_new/src/shared/config/index.ts b/apps/dm_new/src/shared/config/index.ts
deleted file mode 100644
index 3ac40ddb4..000000000
--- a/apps/dm_new/src/shared/config/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./api";
-export * from "./env";
\ No newline at end of file
diff --git a/apps/dm_new/src/shared/lib/index.ts b/apps/dm_new/src/shared/lib/index.ts
deleted file mode 100644
index c9cff1a80..000000000
--- a/apps/dm_new/src/shared/lib/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { getCookie, setCookie, removeCookie } from "./cookie";
-// export { useMutationWrapper } from "./use-mutation-wrapper";
-// export { useAlertStore } from "./use-alert-store";
-// export { useDataTable } from "./use-data-table";
-export { useMenuStore } from "./use-menu-store";
-// export { useUserStore } from "./use-user-store";
-// export { usePrompt } from "./use-prompt";
-// export { useSelectPrompt } from "./use-select-prompt";
diff --git a/apps/dm_new/tailwind.config.ts b/apps/dm_new/tailwind.config.ts
deleted file mode 100644
index 42cfc69f5..000000000
--- a/apps/dm_new/tailwind.config.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import baseConfig from "../../packages/common/components/tailwind.config";
-
-import type { Config } from "tailwindcss";
-
-export default {
-	darkMode: ["class"],
-	presets: [baseConfig],
-	content: [
-		"./app/**/*.{js,ts,jsx,tsx,mdx}",
-		"./components/**/*.{js,ts,jsx,tsx,mdx}",
-		"../../packages/common/components/src/ui/**/*.{js,ts,jsx,tsx,mdx}",
-		"../../packages/common/business_components/src/ui/**/*.{js,ts,jsx,tsx,mdx}",
-	],
-	plugins: [require("tailwindcss-animate")],
-	theme: {
-		extend: {
-			fontFamily: {
-				NotoSansKR: ['NotoSansKR'],
-			},
-			borderRadius: {
-				lg: 'var(--radius)',
-				md: 'calc(var(--radius) - 2px)',
-				sm: 'calc(var(--radius) - 4px)'
-			},
-			colors: {
-				background: 'hsl(var(--background))',
-				foreground: 'hsl(var(--foreground))',
-				card: {
-					DEFAULT: 'hsl(var(--card))',
-					foreground: 'hsl(var(--card-foreground))'
-				},
-				popover: {
-					DEFAULT: 'hsl(var(--popover))',
-					foreground: 'hsl(var(--popover-foreground))'
-				},
-				primary: {
-					DEFAULT: 'hsl(var(--primary))',
-					foreground: 'hsl(var(--primary-foreground))'
-				},
-				secondary: {
-					DEFAULT: 'hsl(var(--secondary))',
-					foreground: 'hsl(var(--secondary-foreground))'
-				},
-				muted: {
-					DEFAULT: 'hsl(var(--muted))',
-					foreground: 'hsl(var(--muted-foreground))'
-				},
-				accent: {
-					DEFAULT: 'hsl(var(--accent))',
-					foreground: 'hsl(var(--accent-foreground))'
-				},
-				destructive: {
-					DEFAULT: 'hsl(var(--destructive))',
-					foreground: 'hsl(var(--destructive-foreground))'
-				},
-				border: 'hsl(var(--border))',
-				input: 'hsl(var(--input))',
-				ring: 'hsl(var(--ring))',
-				chart: {
-					'1': 'hsl(var(--chart-1))',
-					'2': 'hsl(var(--chart-2))',
-					'3': 'hsl(var(--chart-3))',
-					'4': 'hsl(var(--chart-4))',
-					'5': 'hsl(var(--chart-5))'
-				}
-			}
-		}
-	}
-} satisfies Config;
diff --git a/apps/dm_new/tsconfig.json b/apps/dm_new/tsconfig.json
deleted file mode 100644
index ba8cd2c2f..000000000
--- a/apps/dm_new/tsconfig.json
+++ /dev/null
@@ -1,55 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "noImplicitAny": false,
-    "baseUrl": ".",
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "verbatimModuleSyntax": true,
-    "strictNullChecks": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./*"],
-      "@common/components/*": ["../../packages/common/components/src/*"],
-      "@common/components": ["../../packages/common/components/src/index"],
-      "@common/business_components/*": [
-        "../../packages/common/business_components/src/*"
-      ],
-      "@common/business_components": [
-        "../../packages/common/business_components/src/index"
-      ],
-      "@common/network": ["../../packages/common/network"]
-    }
-  },
-  "include": [
-    ".eslintrc.*",
-    "next-env.d.ts",
-    "**/*.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.mts",
-    "**/*.js",
-    "**/*.cjs",
-    "**/*.mjs",
-    "**/*.jsx",
-    "**/*.json",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": ["**/node_modules", "**/.*/*"]
-}
diff --git a/apps/fo/.env.mindone b/apps/fo/.env.mindone
index f014168c2..2fd7e91c2 100644
--- a/apps/fo/.env.mindone
+++ b/apps/fo/.env.mindone
@@ -7,7 +7,6 @@ NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11300
 NEXT_PUBLIC_SUB_DOMAIN = http://con.mind-one.co.kr:13000
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
-#NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11082
 NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service
 NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/
 NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
@@ -17,3 +16,4 @@ NEXT_PUBLIC_DC_URL     = https://apigateway.apps.rsonesoft.com/dc-service
 NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
+NEXT_PUBLIC_CM_LOGIN_PAGE_URL = /
\ No newline at end of file
diff --git a/apps/fo/AGENTS.md b/apps/fo/AGENTS.md
new file mode 100644
index 000000000..7eefb1676
--- /dev/null
+++ b/apps/fo/AGENTS.md
@@ -0,0 +1,38 @@
+## 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 
+- 한글이 깨지지 않도록 주의할 것
+
+## 주석 comment
+- 한글 주석을 삭제하지 말 것
+
+## Monorepo structure
+apps/
+  _template
+  as
+  cm
+  cs
+  dc
+  dm
+  dm_new
+  fo
+  sn
+  st
+  wr
+
diff --git a/apps/fo/app/auth/login/page.tsx b/apps/fo/app/auth/login/page.tsx
new file mode 100644
index 000000000..0dbc42284
--- /dev/null
+++ b/apps/fo/app/auth/login/page.tsx
@@ -0,0 +1,2 @@
+import { LoginPage } from "@/src/features/auth/login";
+export default LoginPage;
diff --git a/apps/fo/app/auth/login/route.ts b/apps/fo/app/auth/login/route-bak.ts
similarity index 100%
rename from apps/fo/app/auth/login/route.ts
rename to apps/fo/app/auth/login/route-bak.ts
diff --git a/apps/fo/app/components/api/index.ts b/apps/fo/app/components/api/index.ts
index 6ed2eeb5e..542e72947 100644
--- a/apps/fo/app/components/api/index.ts
+++ b/apps/fo/app/components/api/index.ts
@@ -1,4 +1,28 @@
-import { DEV_URL_FO, DEV_URL_WR, LOCAL_URL } from "./config/env";
+import { CLAIM_NAME, SITE_ID } from "@/src/shared/config/env";
+import { tokenManager } from "@/src/entities/auth/lib/token-manager";
+import { DEV_URL_FO, DEV_URL_WR, LOCAL_URL } from "./config/env";
+
+const LOGIN_PAGE_URL =
+  process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
+
+const handleUnauthorizedResponse = () => {
+  if (typeof window === "undefined") return;
+
+  const remainingMs = tokenManager.getRemainingMsFromToken(CLAIM_NAME);
+  const isExpired = remainingMs === null || remainingMs <= 0;
+
+  if (!isExpired) return;
+
+  tokenManager.clearAuthToken();
+
+  const isLoginPage =
+    window.location.pathname === "/auth/login" ||
+    window.location.pathname.startsWith("/auth/login/");
+
+  if (!isLoginPage) {
+    window.location.assign(LOGIN_PAGE_URL);
+  }
+};
 
 export const getFetch = async (part : string, url: string) => {
   let reqUrl = "";
@@ -7,8 +31,12 @@ export const getFetch = async (part : string, url: string) => {
     method: "GET",
     headers: {
       accept: "application/json",
+      "X-Site-Id": SITE_ID,
     }
   });
+  if (response.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if(!response.ok) {
     throw new Error(`오류 발생: ${response.status}`);
   }
@@ -21,8 +49,12 @@ export const getFetchAreaList = async (url: string) => {
     method: "GET",
     headers: {
       accept: "application/json",
+      "X-Site-Id": SITE_ID,
     }
   });
+  if (response.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if(!response.ok) {
     throw new Error(`오류 발생: ${response.status}`);
   }
@@ -37,9 +69,13 @@ export const postFetch = async (part : string, url: string, params: unknown) =>
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      "X-Site-Id": SITE_ID,
     },
     body: JSON.stringify(params),
   });
+  if (response.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if(!response.ok) {
     throw new Error(`오류 발생: ${response.status}`);
   }
@@ -53,9 +89,13 @@ export const putFetch = async (part : string, url: string, params: unknown) => {
     method: "PUT",
     headers: {
       "Content-Type": "application/json",
+      "X-Site-Id": SITE_ID,
     },
     body: JSON.stringify(params),
   });
+  if (response.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if(!response.ok) {
     throw new Error(`오류 발생: ${response.status}`);
   }
@@ -69,11 +109,15 @@ export const deleteFetch = async (part : string, url: string, params: unknown) =
     method: "DELETE",
     headers: {
       "Content-Type": "application/json",
+      "X-Site-Id": SITE_ID,
     },
     body: JSON.stringify(params),
   });
+  if (response.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if(!response.ok) {
     throw new Error(`오류 발생: ${response.status}`);
   }
   return response;
-}   
\ No newline at end of file
+}   
diff --git a/apps/fo/app/components/common/SearchInput.tsx b/apps/fo/app/components/common/SearchInput.tsx
index c15ab7506..7e2ef522e 100644
--- a/apps/fo/app/components/common/SearchInput.tsx
+++ b/apps/fo/app/components/common/SearchInput.tsx
@@ -10,11 +10,21 @@ type thisProps = {
   fcltyName? : string | undefined;
 }
 
+function useDebouncedValue<T>(value: T, delay = 500) {
+  const [v, setV] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => setV(value), delay);
+    return () => clearTimeout(t);
+  }, [value, delay]);
+  return v;
+}
+
 export default function SearchInputText({label=undefined, setValue=()=>{}, sidoSigun=undefined, fcltyName=undefined} :thisProps) {
   
   const { ProcessFacilityList, searchProcessFacilitySearching } = useFoStore((state) => state);
   const [isOpen, setIsOpen] = useState(false);
   const [textValue, setTextValue] = useState(fcltyName || '');
+  const debouncedTextValue = useDebouncedValue(textValue);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const processFacilityList = ProcessFacilityList?.processFacilityList || [];
   
@@ -22,30 +32,52 @@ export default function SearchInputText({label=undefined, setValue=()=>{}, sidoS
     const value = e.target.value;
     setTextValue(value);
     if (value) {
-      setIsOpen(true);
-      if(sidoSigun) {
-        searchProcessFacilitySearching(1, 4999, 'A', sidoSigun, '0', '0', '0', value);
-      } else {
-        searchProcessFacilitySearching(1, 4999, '0', '0', '0', '0', '0', value);
-      }
+      setIsOpen(true); // 추천 목록 표시
+      // 삭제된 기존 코드:
+      // if(sidoSigun) {
+      //   searchProcessFacilitySearching(1, 4999, 'A', sidoSigun, '0', '0', '0', value);
+      // } else {
+      //   searchProcessFacilitySearching(1, 4999, '0', '0', '0', '0', '0', value);
+      // }
+      // onChange 안에서 바로 검색하면 글자를 입력할 때마다 요청이 발생해서
+      // debounce가 사실상 동작하지 않습니다.
+      // 실제 검색은 아래 debounced useEffect에서만 실행되도록 변경했습니다.
     } else {
       setIsOpen(false);
     }
-  }, [searchProcessFacilitySearching, sidoSigun]);
+  }, []);
 
   const onInputFocus = useCallback(() => {
     setIsOpen(true);
+    if (textValue.trim()) return;
+
+    // 입력값이 없을 때만 기본 목록을 조회합니다.
+    // 이미 입력 중인 경우에는 기존 값으로 다시 전체/광범위 조회하지 않습니다.
     if(sidoSigun) {
       searchProcessFacilitySearching(1, 4999, 'A', sidoSigun, '0', '0', '0');
     } else {
       searchProcessFacilitySearching(1, 4999, '0', '0', '0', '0', '0');
     }
-  }, [searchProcessFacilitySearching, sidoSigun]);
+  }, [searchProcessFacilitySearching, sidoSigun, textValue]);
 
   useEffect(() => {
     setTextValue(fcltyName || '');
   }, [fcltyName]);
 
+  useEffect(() => {
+    const keyword = debouncedTextValue.trim();
+
+    if (!keyword) return;
+
+    // debounce가 적용된 값이 확정된 뒤에만 검색해서
+    // 시설명을 입력하는 도중의 과도한 검색 요청을 막습니다.
+    if(sidoSigun) {
+      searchProcessFacilitySearching(1, 4999, 'A', sidoSigun, '0', '0', '0', keyword);
+    } else {
+      searchProcessFacilitySearching(1, 4999, '0', '0', '0', '0', '0', keyword);
+    }
+  }, [debouncedTextValue, searchProcessFacilitySearching, sidoSigun]);
+
   const handleSuggestionClick = useCallback((bscFctCd: string, bscFctNm: string, fctCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | '') => {
     setTextValue(bscFctNm);
     setValue(bscFctCd, bscFctNm, fctCpc, trtFrfNm, efflWqltStndrdNm);
@@ -100,4 +132,4 @@ export default function SearchInputText({label=undefined, setValue=()=>{}, sidoS
       )}
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/apps/fo/app/pages/(map-layout)/map/page.tsx b/apps/fo/app/pages/(map-layout)/map/page.tsx
index 1e3789bfe..4fa553c97 100644
--- a/apps/fo/app/pages/(map-layout)/map/page.tsx
+++ b/apps/fo/app/pages/(map-layout)/map/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { SITE_ID } from "@/src/shared/config/env";
 import Gis from "@common/business_components/ui/map/Gis";
 import GisApp from "@common/business_components/ui/map/lib/gis.core";
 import { useEffect, useRef, useState } from "react";
@@ -59,7 +60,10 @@ const Map = () => {
       const reqUrl = `${API_URL}/lyrStngs/FO_NETWORK`;
       const response = await fetch(reqUrl, {
         method: "GET",
-        headers: { accept: "application/json" },
+        headers: {
+          accept: "application/json",
+          "X-Site-Id": SITE_ID,
+        },
       });
       if (!response.ok) throw new Error(`HTTP 오류! 상태: ${response.status}`);
       const data = await response.json();
diff --git a/apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx b/apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx
index 82eeb4d7c..8eddbd098 100644
--- a/apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx
+++ b/apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx
@@ -229,13 +229,6 @@ export default function DashBoardChart({searchYear = '', fcltyList = []}: facili
             </CardContent>
           </Card>
         </ListDiv>
-        <ListDiv className="h-[300px]">
-          <Card className="h-full">
-            <CardContent className="h-full">
-              <MainChart chartForm={CHART_FORM.LINE} chartConfig={chartConfig_tptp} chartData={chart_tpTp} chartTitle="총인유입T-P-방류T-P" yFieldText="T-P(mg/L)" setXAxisYearTick={true}></MainChart>
-            </CardContent>
-          </Card>
-        </ListDiv>
         {/* 유입T-N-방류T-N */}
         <ListDiv className="h-[300px]">
           <Card className="h-full">
@@ -260,6 +253,14 @@ export default function DashBoardChart({searchYear = '', fcltyList = []}: facili
             </CardContent>
           </Card>
         </ListDiv>
+        {/* 총인유입T-P-방류T-P */}
+        <ListDiv className="h-[300px]">
+          <Card className="h-full">
+            <CardContent className="h-full">
+              <MainChart chartForm={CHART_FORM.LINE} chartConfig={chartConfig_tptp} chartData={chart_tpTp} chartTitle="총인유입T-P-방류T-P" yFieldText="T-P(mg/L)" setXAxisYearTick={true}></MainChart>
+            </CardContent>
+          </Card>
+        </ListDiv>
       </ContentsDiv>
     </>
   );
diff --git a/apps/fo/app/pages/(with-layout)/layout.tsx b/apps/fo/app/pages/(with-layout)/layout.tsx
index e1f6f664e..38276b541 100644
--- a/apps/fo/app/pages/(with-layout)/layout.tsx
+++ b/apps/fo/app/pages/(with-layout)/layout.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { BaseLayout } from "@common/components";
+import { useQueryClient } from "@tanstack/react-query";
 import type { MenuItem } from "@/app/store/common";
 import { useFoStore } from "@/app/store";
 import { usePathname, useRouter } from "next/navigation";
@@ -16,6 +17,7 @@ export default function RootLayout({
   const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);
   const pathname = usePathname();
   const router = useRouter();
+  const queryClient = useQueryClient();
 
   const handleClick = (id: MenuItem) => {
     setCurrentMenuInfo(id);
@@ -25,6 +27,7 @@ export default function RootLayout({
 
   return (
     <BaseLayout
+      queryClient={queryClient}
       currentPath={pathname ?? ""}
       handleMenuClick={handleClick}
     >
diff --git a/apps/fo/app/pages/(with-layout)/test/page.tsx b/apps/fo/app/pages/(with-layout)/test/page.tsx
index 86689df10..7855cce20 100644
--- a/apps/fo/app/pages/(with-layout)/test/page.tsx
+++ b/apps/fo/app/pages/(with-layout)/test/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { SITE_ID } from "@/src/shared/config/env";
 import React from "react";
 
 export default function TestPage() {
@@ -6,6 +7,9 @@ export default function TestPage() {
 	const handleFindUser = () => {
 		fetch('/operation-service/api/v1/fclt/flow/1/10/2024', {
 			method: "GET",
+			headers: {
+				"X-Site-Id": SITE_ID,
+			},
 		}).then((data) => {
 			console.log(data);
 		});
@@ -19,4 +23,4 @@ export default function TestPage() {
             </button>
 		</div>
 	);
-}
\ No newline at end of file
+}
diff --git a/apps/fo/app/store/processFacility/index.tsx b/apps/fo/app/store/processFacility/index.tsx
index 006185e6d..1b6b33d71 100644
--- a/apps/fo/app/store/processFacility/index.tsx
+++ b/apps/fo/app/store/processFacility/index.tsx
@@ -459,8 +459,20 @@ const fetchFacilityList = async (pageNo: number, pageSize: number, partValue?: s
   }
 };
 
-// 시설정보 리스트 데이터 호출 (대시보드용)
-const fetchFacilityListSearching = async (pageNo: number, pageSize: number, partValue?: string, nameCd?: string, fcltCpct?: string, oprtngSttsCd?: string, facilityPartValue?: string, facilityName?: string): Promise<{ data: facilityListProps[], count: number }> => {
+/**
+ * 시설정보 리스트 데이터 호출 (대시보드용)
+ * @param pageNo 페이지번호
+ * @param pageSize 페이지크기
+ * @param partValue 조회구분값(0 전체,A: 행정, R: 유역, G: 환경청)
+ * @param nameCd 조회구분에 따른 지역코드(0 전체)
+ * @param fcltCpct 시설용량 필터값(0 전체)
+ * @param oprtngSttsCd 운영상태 코드(0 전체,1: 가동중, 2:재가동, 3:가동중지, 4:시설폐쇄)
+ * @param facilityPartValue 시설구분 코드(0 전체,ET:기타기초시설,SW:공공하수처리시설,SS:오수처리장,NS:분뇨처리장)
+ * @param facilityName 시설명 검색어
+ * @returns 시설목록과 전체건수
+ */
+const fetchFacilityListSearching = async (pageNo: number, pageSize: number, partValue?: string, nameCd?: string
+  , fcltCpct?: string, oprtngSttsCd?: string, facilityPartValue?: string, facilityName?: string): Promise<{ data: facilityListProps[], count: number }> => {
   try {
     const tailStr = partValue ? '/' + (partValue === 'G' ? 'A' : partValue) + '/' + nameCd + '/' + fcltCpct + '/' + oprtngSttsCd + '/' + facilityPartValue + (facilityName && facilityName !== '' ? '/' + facilityName : '') : '';
     const url = '/prcsFclt/searching/' + pageNo + '/' + pageSize + tailStr;
diff --git a/apps/fo/app/store/sewageOccur/index.tsx b/apps/fo/app/store/sewageOccur/index.tsx
index dfd7e2bca..fa5fd0c87 100644
--- a/apps/fo/app/store/sewageOccur/index.tsx
+++ b/apps/fo/app/store/sewageOccur/index.tsx
@@ -48,6 +48,20 @@ export type WtrUsgYmProps = {
     levyYm: string,                // 부과년월
     wtrUsg: number,                // 월별 물사용량(m³/월)
 }
+
+export type SewageOccurSummaryRow = {
+    bscFctCd?: string;
+    BSC_FCT_CD?: string;
+    waterUsage?: string | number;
+    estimationSewage?: string | number;
+    sewageInputYear?: string | number;
+    sewageInputChungchun?: string | number;
+}
+
+export type SewageOccurSummaryResponse = {
+    status?: number;
+    data?: SewageOccurSummaryRow[];
+}
 // 검색단
 const LabelArray: string[] = ['구분', '시도', '시군구', '용량별', '시설명', '조회기간', '시설상태', '권역', '단위유역', '중권역', '환경청별'];
 
@@ -174,9 +188,10 @@ function getDaysInMonth(yyyymm) {
 // }
 
 // 시설들 유량 정보 조회 
-export const fetchSweageOccurListFlow = async (searchYear: string | undefined, fcltCdList: string[]): Promise<SewageOccurProps | null> => {
+export const fetchSweageOccurListFlow = async (searchYear: string | undefined, fcltCdList: string[]): Promise<SewageOccurSummaryResponse | null> => {
     try {
-        const res = await postFetch('fo', '/fclt/flow/' + searchYear, fcltCdList);
+        // const res = await postFetch('fo', '/fclt/flow/' + searchYear, fcltCdList);
+        const res = await postFetch('fo', '/fclt/flow/sewageOccur/' + searchYear, fcltCdList);
         return res;
     } catch (error) {
         console.error('시설정보 오수발생량 상세 데이터를 가져오는데 실패했습니다:', error);
@@ -317,7 +332,7 @@ export const sewageOccurReducer: (set: any) => SewageOccurActions = (set: any) =
                     daddr: item.daddr,
                     fctCpc: parseFloat(item.fctCpc.toString().replace(/,/g, '')),
                     waterUsage: 0,
-                    swageChangePercent: 0,
+                    swageChangePercent: 90,
                     estimationSewage: 0,
                     sewageInputYear: 0,
                     sewageInputChungchun: 0,
@@ -328,34 +343,39 @@ export const sewageOccurReducer: (set: any) => SewageOccurActions = (set: any) =
                     msrDt: '',
                 });
             });
-
+            const sewageOccurMap = new Map(
+                sewageOccurPropsList.map((item) => [item.bscFctCd, item])
+            );
+            // console.log(sewageOccurMap);
             // const soccurDetailRes: any = await fetchSweageOccurListFlow(searchYear, fcltCdList);
             // const wtrUsgYmRes: any = await fetchWtrUsgYmList(searchYear, fcltCdList);
             
             //---------
-            const rainDetailList: Record<string, any[]> = {};
+            // const rainDetailList: Record<string, any[]> = {};
             const wtrDetailList: Record<string, any[]> = {};
-            const results: any[] = [];
             const wtrResults: any[] = [];
             for (let idx = 0; idx < fcltCdList.length; idx += 100) {
-                const slicedItems = fcltCdList.slice(idx, idx + 100);
+                const slicedItems = fcltCdList.slice(idx, idx + 100); // 100건씩 가져오기
                 const result = await fetchSweageOccurListFlow(searchYear, slicedItems);
                 const wtrResult = await fetchWtrUsgYmList(searchYear, slicedItems);
-                results.push(result);
+
+                if (result?.status === 200 && Array.isArray(result.data)) {
+                    result.data.forEach((row: any) => {
+                        const bscFctCd = String(row.bscFctCd ?? "");
+                        const target = sewageOccurMap.get(bscFctCd);
+
+                        if (!target) return;
+
+                        target.waterUsage = Number(row.waterUsage ?? 0);
+                        target.estimationSewage = Number(row.estimationSewage ?? 0);
+                        target.sewageInputYear = Number(row.sewageInputYear ?? 0);
+                        target.sewageInputChungchun = Number(row.sewageInputChungchun ?? 0);
+                    });
+                }
+
                 wtrResults.push(wtrResult);
             }
-            //console.log(results);
-            // 결과를 합치기
-            for (const res of results) {
-                if (res.status === 200 && res.data) {
-                    for (const [key, value] of Object.entries(res.data)) {
-                        const keyStr = String(key);
-                        //rainDetailList[keyStr] = [...(rainDetailList[keyStr] || []), ...(value as any[])];
-                        if (!rainDetailList[keyStr]) rainDetailList[keyStr] = [];
-                        rainDetailList[keyStr].push(...(value as any[]));
-                    }
-                }
-            }
+            
             for (const res of wtrResults) {
                 if (res.status === 200 && res.data) {
                     for (const [key, value] of Object.entries(res.data)) {
@@ -368,34 +388,10 @@ export const sewageOccurReducer: (set: any) => SewageOccurActions = (set: any) =
             }
             //-------
 
-            let maxEstimationSewage = 0, minEstimationSewage = 999999999;
+            // let maxEstimationSewage = 0, minEstimationSewage = 999999999;
             for (const item of sewageOccurPropsList) {
-
-                //const detailList = soccurDetailRes?.data[item.bscFctCd];
-                // const wtrUsgYmList = wtrUsgYmRes?.data[item.bscFctCd];
-                const detailList = rainDetailList[item.bscFctCd];
                 const wtrUsgYmList = wtrDetailList[item.bscFctCd];
 
-                item.swageChangePercent = 90;
-                let sumChungcunDay = 0; // 청천일수
-                let chungcunSumFlow = 0;// 청천시 하수유입량
-                let totWaterUsage = 0;  // 연간 하수유입량 
-                let rainEffectDay = 0;
-                detailList?.forEach(item2 => {
-
-                    if (item2.infoRnDay == null || item2.infoRnDay == 'x') item2.infoRnDay = 0;
-                    if (item2.infoRnDay >= 3) {
-                        rainEffectDay = 2;
-                    } else {
-                        rainEffectDay--;
-                    }
-                    if (rainEffectDay < 0) { //청천시
-                        chungcunSumFlow += item2.inflAmnt && item2.inflAmnt !== 'x' ? Number(item2.inflAmnt.toString().trim()) : 0;//Number(item2.inflAmnt);
-                        sumChungcunDay += 1;
-                    }
-                    totWaterUsage += Number(item2.inflAmnt);
-                });
-
                 let wtrUsgYearTotal = 0; // 연간 물사용량
                 let wtrUsgYearDays = 0;  // 연간 물사용 일수
                 wtrUsgYmList?.forEach(item3 => {
@@ -404,22 +400,10 @@ export const sewageOccurReducer: (set: any) => SewageOccurActions = (set: any) =
                     wtrUsgYearDays += days;
                 });
 
-                // console.log("totWaterUsage:", totWaterUsage);
-                const count = detailList ? detailList.length : 0;
-                const avg = count == 0 ? 0 : totWaterUsage / count; // 연간 하수유입량(m³/일)
-                item.waterUsage = parseFloat((avg * 0.65).toFixed(2)); // 물사용량 = 연간 하수유입량(m³/일) * 65% : 실제 수용가의 물사용량 없는 경우
                 if (wtrUsgYearTotal > 0 && wtrUsgYearDays > 0) {
                     item.waterUsage = wtrUsgYearDays > 0 ? wtrUsgYearTotal / wtrUsgYearDays : 0; // 일평균 물사용량: 실제 수용가의 물사용량
                 }
-                item.sewageInputYear = parseFloat(avg.toFixed(2));      // 연간 하수유입량(m³/일)
-                item.sewageInputChungchun = parseFloat((chungcunSumFlow === 0 ? 0 : (chungcunSumFlow / sumChungcunDay)).toFixed(2)); // 청천시 하수유입량
-                item.estimationSewage = parseFloat((item.waterUsage * OSU_PERCENT).toFixed(2)); // 오수발생량 추정(m³/일) = 물사용량(m³/일) * 오수전환율
-                if (item.estimationSewage > maxEstimationSewage) maxEstimationSewage = item.estimationSewage;
-                if (item.estimationSewage < minEstimationSewage) minEstimationSewage = item.estimationSewage;
-                // 반올림 처리
-                ["fctCpc", "waterUsage", "swageChangePercent", "estimationSewage", "sewageInputYear", "sewageInputChungchun"].forEach(
-                    (key) => (item[key] = roundNumber(item[key], 0))
-                );
+                item.estimationSewage = Math.round(item.waterUsage * OSU_PERCENT * 1) / 1; // 오수발생량 추정
             }
 
             if (pageSize >= 5000) {
@@ -590,4 +574,4 @@ export const sewageOccurReducer: (set: any) => SewageOccurActions = (set: any) =
             }))
         },
     }
-}
\ No newline at end of file
+}
diff --git a/apps/fo/app/store/underWaterInput/index.tsx b/apps/fo/app/store/underWaterInput/index.tsx
index 806b12e2b..7e92836b2 100644
--- a/apps/fo/app/store/underWaterInput/index.tsx
+++ b/apps/fo/app/store/underWaterInput/index.tsx
@@ -1,5 +1,5 @@
 import { getFetch, postFetch } from "@/app/components/api";
-import DataForm, { roundNumber } from "@/app/components/common/DataForm";
+import DataForm from "@/app/components/common/DataForm";
 import type { TableUpperProps } from "../dashboard";
 import type { ExcelType, UnderWaterInputModalProps, UnderWaterProps, WtrUsgYmProps } from "./types";
 // import CalcRainEffect from "@/app/components/common/CalcRainEffect";
@@ -21,6 +21,21 @@ export type SewageOccurDetailProps = {
     sumWtrUsg: number, // 물사용량 합
     avgWtrUsg: number, // 일평균 물사용량
 }
+
+export type UnderWaterRow = {
+    bscFctCd: string;
+    inflYear: number;         // 연간 하수유입량(m³/일)
+    inflSummer:  number;      // 하절기 하수유입량(m³/일)
+    inflWinter:  number;      // 동절기 하수유입량(m³/일)
+    inflSunny:  number;       // 청천시 연간 하수유입량(m³/일)
+    inflSunnySummer:  number; // 청천시 하절기 하수유입량(m³/일)
+    inflSunnyWinter:  number; // 청천시 동절기 하수유입량(m³/일)
+}
+
+export type UnderWaterResponse = {
+    status?: number;
+    data?: UnderWaterRow[];
+}
 /**====================================
  * Store - 타입
  ====================================*/
@@ -217,12 +232,12 @@ const fetchUnderWaterList = async (pageNo: number, pageSize: number, searchYear:
 // }
 
 // 시설들 유량 정보 조회 
-export const fetchDetailListFlow = async (searchYear: string | undefined, fcltCdList: string[]): Promise<UnderWaterProps | null> => {
+export const fetchDetailListFlow = async (searchYear: string | undefined, fcltCdList: string[]): Promise<UnderWaterResponse | null> => {
     try {
-        const res = await postFetch('fo', '/fclt/flow/' + searchYear, fcltCdList);
+        const res = await postFetch('fo', '/fclt/flow/underWater/' + searchYear, fcltCdList);
         return res;
     } catch (error) {
-        console.error('시설정보 오수발생량 상세 데이터를 가져오는데 실패했습니다:', error);
+        console.error('시설정보 지하수 유입량 데이터를 가져오는데 실패했습니다:', error);
         return null;
     }
 };
@@ -373,35 +388,44 @@ export const underWaterReducer: (set: (fn: (state: UnderWaterType) => UnderWater
                     lgbsn: item.lgbsn,
                     mdmbsn: item.mdmbsn,
                     msrDt: '',
+                    inflSummer: 0,
+                    inflWinter: 0,
+                    inflSunny: 0,
+                    inflSunnySummer: 0,
+                    inflSunnyWinter: 0,
                 });
             });
-
-            // const soccurDetailRes: any = await fetchDetailListFlow(searchYear, fcltCdList);
-            // const wtrUsgYmRes: any = await fetchWtrUsgYmList(searchYear, fcltCdList);
-            //---------
-            const rainDetailList: Record<string, any[]> = {};
+            const underWaterMap = new Map(
+                underWaterPropsList.map((item) => [item.bscFctCd, item])
+            );
+            // const rainDetailList: Record<string, any[]> = {};
             const wtrDetailList: Record<string, any[]> = {};
-            const results: any[] = [];
             const wtrResults: any[] = [];
             for (let idx = 0; idx < fcltCdList.length; idx += 100) {
                 const slicedItems = fcltCdList.slice(idx, idx + 100);
                 const result = await fetchDetailListFlow(searchYear, slicedItems);
                 const wtrResult = await fetchWtrUsgYmList(searchYear, slicedItems);
-                results.push(result);
+                
+                if (result?.status === 200 && Array.isArray(result.data)) {
+                    result.data.forEach((row: any) => {
+                        const bscFctCd = String(row.bscFctCd ?? "");
+                        const target = underWaterMap.get(bscFctCd);
+
+                        if (!target) return;
+
+                        target.inflAmnt = Number(row.inflYear ?? 0);               // 연평균 유입하수량(m³/일)
+                        target.inflSummer = Number(row.inflSummer ?? 0);           // 하절기 유입하수량(m³/일)      
+                        target.inflWinter = Number(row.inflWinter ?? 0);           // 동절기 유입하수량(m³/일)   
+                        target.inflSunny = Number(row.inflSunny ?? 0);             // 청천시 연간 유입하수량(m³/일)
+                        target.inflSunnySummer = Number(row.inflSunnySummer ?? 0); // 청천시 하절기 유입하수량(m³/일)
+                        target.inflSunnyWinter = Number(row.inflSunnyWinter ?? 0); // 청천시 동절기 유입하수량(m³/일)
+                    });
+                }
+
                 wtrResults.push(wtrResult);
             }
-            //console.log(results);
-            // 결과를 합치기
-            for (const res of results) {
-                if (res.status === 200 && res.data) {
-                    for (const [key, value] of Object.entries(res.data)) {
-                        const keyStr = String(key);
-                        //rainDetailList[keyStr] = [...(rainDetailList[keyStr] || []), ...(value as any[])];
-                        if (!rainDetailList[keyStr]) rainDetailList[keyStr] = [];
-                        rainDetailList[keyStr].push(...(value as any[]));
-                    }
-                }
-            }
+            // console.log(underWaterMap);
+            
             for (const res of wtrResults) {
                 if (res.status === 200 && res.data) {
                     for (const [key, value] of Object.entries(res.data)) {
@@ -414,65 +438,11 @@ export const underWaterReducer: (set: (fn: (state: UnderWaterType) => UnderWater
             }
             //-------
             for (const item of underWaterPropsList) {
-
-                // const detailList = soccurDetailRes?.data[item.bscFctCd];
-                // const wtrUsgYmList = wtrUsgYmRes?.data[item.bscFctCd];
-                const detailList = rainDetailList[item.bscFctCd];
                 const wtrUsgYmList = wtrDetailList[item.bscFctCd];
 
-                let chungcunSumFlow = 0;        // 청천유입량
-                let sumChungcunDay = 0;         // 청천일수
-                let sumSummerChungcunDay = 0;   // 하절기 청천일수
-                let sumSummerChungcunFlow = 0;  // 하절기 청천유입량
-                let sumWinterChungcunDay = 0;   // 동절기 청천일수
-                let sumWinterChungcunFlow = 0;  // 동절기 청천유입량
-                let totWaterUsage = 0;          // 연간 하수유입량 
-                let totSummerUsage = 0;         // 하절기 하수유입량
-                let totWinterUsage = 0;         // 동절기 하수유입량
-                let totSummerDays = 0;          // 하절기 일수
-                let totWinterDays = 0;          // 동절기 일수
-
                 const summerMonth = ['06', '07', '08'];
                 const winterMonth = ['01', '02'];
 
-                let rainEffectDay = 0;
-                detailList?.forEach(item2 => {
-
-                    if (item2.infoRnDay == null || item2.infoRnDay.trim() == 'x') item2.infoRnDay = 0;
-                    if (Number(item2.infoRnDay) >= 3) {
-                        rainEffectDay = 2;
-                    } else {
-                        rainEffectDay--;
-                    }
-                    if (rainEffectDay < 0) { //청천시
-                        chungcunSumFlow += Number(item2.inflAmnt);
-                        sumChungcunDay += 1;
-
-                        if (item2.msrDt.substring(4, 6) === '06' || item2.msrDt.substring(4, 6) === '07' || item2.msrDt.substring(4, 6) === '08') {
-                            // 하절기 6,7,8월
-                            sumSummerChungcunDay += 1;
-                            sumSummerChungcunFlow += Number(item2.inflAmnt); //item2.inflAmnt && item2.inflAmnt !== 'x' ? Number(item2.inflAmnt.toString().trim()) : 0;
-                        } else if (item2.msrDt.substring(4, 6) === '01' || item2.msrDt.substring(4, 6) === '02') {
-                            // 동절기 1,2월
-                            sumWinterChungcunDay += 1;
-                            sumWinterChungcunFlow += Number(item2.inflAmnt); //item2.inflAmnt && item2.inflAmnt !== 'x' ? Number(item2.inflAmnt.toString().trim()) : 0;
-                        }
-                    }
-                    totWaterUsage += Number(item2.inflAmnt);
-                    if (item2.msrDt.substring(4, 6) === '06' || item2.msrDt.substring(4, 6) === '07' || item2.msrDt.substring(4, 6) === '08') {
-                        // 하절기 6,7,8월
-                        totSummerDays += 1;
-                        totSummerUsage += Number(item2.inflAmnt); //item2.inflAmnt && item2.inflAmnt !== 'x' ? Number(item2.inflAmnt.toString().trim()) : 0;
-                    } else if (item2.msrDt.substring(4, 6) === '01' || item2.msrDt.substring(4, 6) === '02') {
-                        // 동절기 1,2월
-                        totWinterDays += 1;
-                        totWinterUsage += Number(item2.inflAmnt); //item2.inflAmnt && item2.inflAmnt !== 'x' ? Number(item2.inflAmnt.toString().trim()) : 0;
-                    }
-                });
-
-                const count = detailList ? detailList.length : 0;
-                const avg = count == 0 ? 0 : totWaterUsage / count; // 연간 일평균 유입량
-
                 let wtrUsgYearTotal = 0; // 연간 물사용량
                 let summerWtrUsgTot = 0; // 하절기 물사용량
                 let winterWtrUsgTot = 0; // 동절기 물사용량
@@ -492,37 +462,26 @@ export const underWaterReducer: (set: (fn: (state: UnderWaterType) => UnderWater
                     }
                 });
 
-                if (wtrUsgYearTotal > 0) { // 물사용량이 있는 경우
-                    const usage = chungcunSumFlow && chungcunSumFlow > 0 ? chungcunSumFlow / sumChungcunDay : 0;    // 청천시 일평균 유입량
-                    const summerUsage = sumSummerChungcunFlow ? sumSummerChungcunFlow / sumSummerChungcunDay : 0;   // 하절기 청천시 일평균 유입량
-                    const winterUsage = sumWinterChungcunFlow ? sumWinterChungcunFlow / sumWinterChungcunDay : 0;   // 동절기 청천시 일평균 유입량  
+                if (wtrUsgYearTotal > 0) { // 물사용량이 있는 경우 
                     const wtrUsg = wtrUsgYearDays > 0 ? wtrUsgYearTotal / wtrUsgYearDays : 0; // 일평균 물사용량
                     const summerWtrUsg = summerWtrUsgTot ? summerWtrUsgTot / summerWtrUsgDays : 0; // 하절기 일평균 물사용량
                     const winterWtrUsg = winterWtrUsgTot ? winterWtrUsgTot / winterWtrUsgDays : 0; // 동절기 일평균 물사용량
 
-                    item.inflAmnt = roundNumber(avg, 0);
-                    item.underWaterInputYear = Math.round((usage - (wtrUsg * OSU_PERCENT)) * 1) / 1; // 연간지하수유입량(m³/일) = 청천시 실제유입량 - (물사용량 × 오수전환율)
-                    item.underWaterInputSummer = Math.round((summerUsage - (summerWtrUsg * OSU_PERCENT)) * 1) / 1; // 하절기지하수유입량(m³/일)
-                    item.underWaterInputWinter = Math.round((winterUsage - (winterWtrUsg * OSU_PERCENT)) * 1) / 1; // 동절기지하수유입량(m³/일)
-                    item.properYn = Math.round((Number(usage - (wtrUsg * OSU_PERCENT)) / Number(item.inflAmnt)) * 100 * 1) / 1 > 20 ? '초과유입' : '적정'; // 적정여부
+                    item.inflAmnt = Math.round(item.inflAmnt);
+                    item.underWaterInputYear = Math.round((item.inflSunny - (wtrUsg * OSU_PERCENT)) ) ; // 연간지하수유입량(m³/일) = 청천시 실제유입량 - (물사용량 × 오수전환율)
+                    item.underWaterInputSummer = Math.round((item.inflSunnySummer - (summerWtrUsg * OSU_PERCENT)) ) ; // 하절기지하수유입량(m³/일)
+                    item.underWaterInputWinter = Math.round((item.inflSunnyWinter - (winterWtrUsg * OSU_PERCENT))) ; // 동절기지하수유입량(m³/일)
+                    item.properYn = Math.round( (item.inflSunny - (wtrUsg * OSU_PERCENT)) / Number(item.inflAmnt) * 100 ) > 20 ? '초과유입' : '적정'; // 적정여부
                 } else { // 물사용량이 없는 경우, 일평균 유입량으로 물사용량 추정(물사용량 = 유입량*0.65)
-                    const usage = chungcunSumFlow && chungcunSumFlow > 0 ? chungcunSumFlow / sumChungcunDay : 0;    // 청천시 일평균 유입량
-                    const summerUsage = sumSummerChungcunFlow ? sumSummerChungcunFlow / sumSummerChungcunDay : 0;   // 하절기 청천시 일평균 유입량
-                    const winterUsage = sumWinterChungcunFlow ? sumWinterChungcunFlow / sumWinterChungcunDay : 0;   // 동절기 청천시 일평균 유입량
-                    const wtrUsg = avg * 0.65; // 일평균 물사용량
-                    const summerWtrUsg = totSummerDays > 0 ? (totSummerUsage / totSummerDays) * 0.65 : 0; // 하절기 일평균 물사용량
-                    const winterWtrUsg = totWinterDays > 0 ? (totWinterUsage / totWinterDays) * 0.65 : 0; // 동절기 일평균 물사용량
+                    const wtrUsg = item.inflAmnt * 0.65; // 일평균 물사용량
+                    const summerWtrUsg = item.inflSummer * 0.65; // 하절기 일평균 물사용량
+                    const winterWtrUsg = item.inflWinter * 0.65; // 동절기 일평균 물사용량
 
-                    item.inflAmnt = roundNumber(avg, 0);
-                    //item.underWaterInputYear = Math.round((usage-(usage*0.65*OSU_PERCENT)) * 1) / 1; // 연간지하수유입량(m³/일)
-                    item.underWaterInputYear = Math.round((usage - (wtrUsg * OSU_PERCENT)) * 1) / 1; // 연간지하수유입량(m³/일) = 청천시 실제유입량 - (물사용량 × 오수전환율)
-                    item.underWaterInputSummer = Math.round((summerUsage - (summerWtrUsg * OSU_PERCENT)) * 1) / 1; // 하절기지하수유입량(m³/일) = 청천시 실제유입량 - (물사용량 × 오수전환율)
-                    item.underWaterInputWinter = Math.round((winterUsage - (winterWtrUsg * OSU_PERCENT)) * 1) / 1; // 동절기지하수유입량(m³/일) = 청천시 실제유입량 - (물사용량 × 오수전환율)
-                    item.properYn = Math.round((Number(usage - (wtrUsg * OSU_PERCENT)) / Number(item.inflAmnt)) * 100 * 1) / 1 > 20 ? '초과유입' : '적정'; // 적정여부
-                    // 반올림 처리
-                    // ["fctCpc", "inflAmnt", "underWaterInputYear", "underWaterInputSummer", "underWaterInputWinter"].forEach(
-                    //     (key) => (item[key] = roundNumber(item[key], 0))
-                    // );
+                    item.inflAmnt = Math.round(item.inflAmnt);
+                    item.underWaterInputYear = Math.round((item.inflSunny - (wtrUsg * OSU_PERCENT)) ) ; // 연간지하수유입량(m³/일) = 청천시 실제유입량 - (물사용량 × 오수전환율)
+                    item.underWaterInputSummer = Math.round((item.inflSunnySummer - (summerWtrUsg * OSU_PERCENT)) ) ; // 하절기지하수유입량(m³/일) = 청천시 실제유입량 - (물사용량 × 오수전환율)
+                    item.underWaterInputWinter = Math.round((item.inflSunnyWinter - (winterWtrUsg * OSU_PERCENT)) ) ; // 동절기지하수유입량(m³/일) = 청천시 실제유입량 - (물사용량 × 오수전환율)
+                    item.properYn = Math.round( (item.inflSunny - (wtrUsg * OSU_PERCENT)) / Number(item.inflAmnt) * 100 ) > 20 ? '초과유입' : '적정'; // 적정여부
                 }
             }
 
diff --git a/apps/fo/app/store/underWaterInput/types.tsx b/apps/fo/app/store/underWaterInput/types.tsx
index 85be50e8e..329b0662d 100644
--- a/apps/fo/app/store/underWaterInput/types.tsx
+++ b/apps/fo/app/store/underWaterInput/types.tsx
@@ -18,6 +18,11 @@ export type UnderWaterProps = {
     inflAmnt : number,              // 연평균유입하수량(m³/일)
     properYn : string | '',         // 적정여부
     msrDt : string,                 // 측정일자
+    inflSummer : number,            // 하절기 하수유입량(m³/일)
+    inflWinter : number,            // 동절기 하수유입량(m³/일)
+    inflSunny : number,             // 청천시 연간 하수유입량(m³/일)
+    inflSunnySummer   : number,     // 청천시 하절기 하수유입량(m³/일)
+    inflSunnyWinter : number,       // 청천시 동절기 하수유입량(m³/일)
 }
 
 export type WtrUsgYmProps = {
diff --git a/apps/fo/next-env.d.ts b/apps/fo/next-env.d.ts
index 1b3be0840..830fb594c 100644
--- a/apps/fo/next-env.d.ts
+++ b/apps/fo/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/fo/next.config.ts b/apps/fo/next.config.ts
index 6a892461e..01569bf17 100644
--- a/apps/fo/next.config.ts
+++ b/apps/fo/next.config.ts
@@ -1,6 +1,6 @@
 import type { NextConfig } from "next";
 
-const domain = process.env.NEXT_PUBLIC_PROXY_HOST || "http://localhost:3000";
+// const domain = process.env.NEXT_PUBLIC_PROXY_HOST || "http://localhost:3000";
 const subDomain = process.env.NEXT_PUBLIC_SUB_DOMAIN || "http://localhost:13000";
 
 const nextConfig: NextConfig = {
@@ -24,22 +24,22 @@ const nextConfig: NextConfig = {
         },
       ],
       afterFiles: [
-        {
-          source: "/sewerage-service/:path*",
-          destination: `${domain}/sewerage-service/:path*`,
-        },
-        {
-          source: "/reuse-service/:path*",
-          destination: `${domain}/reuse-service/:path*`,
-        },
-        {
-          source: "/operation-service/:path*",
-          destination: `${domain}/operation-service/:path*`,
-        },
-        {
-          source: "/ngii-server/:path*",
-          destination: `${domain}/ngii-server/:path*`,
-        },
+        // {
+        //   source: "/sewerage-service/:path*",
+        //   destination: `${domain}/sewerage-service/:path*`,
+        // },
+        // {
+        //   source: "/reuse-service/:path*",
+        //   destination: `${domain}/reuse-service/:path*`,
+        // },
+        // {
+        //   source: "/operation-service/:path*",
+        //   destination: `${domain}/operation-service/:path*`,
+        // },
+        // {
+        //   source: "/ngii-server/:path*",
+        //   destination: `${domain}/ngii-server/:path*`,
+        // },
         {
           source: "/cms/:path*",
           destination: `${subDomain}/cms/:path*`,
diff --git a/apps/fo/package.json b/apps/fo/package.json
index 6993fe17c..4dd6c3e3c 100644
--- a/apps/fo/package.json
+++ b/apps/fo/package.json
@@ -15,7 +15,7 @@
     "@tailwindcss/vite": "^4.0.10",
     "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
-    "next": "15.3.8",
+    "next": "15.5.18",
     "select": "^1.1.2",
     "webpack": "^5.98.0",
     "zustand": "^5.0.3",
@@ -28,8 +28,8 @@
     "@tanstack/react-query-devtools": "^5.75.5",
     "@tanstack/react-table": "^8.21.2",
     "react-dnd": "^16.0.1",
-    "@minoru/react-dnd-treeview": "3.5.1-alpha.1",   
-    "react-hook-form": "^7.54.2", 
+    "@minoru/react-dnd-treeview": "3.5.1-alpha.1",
+    "react-hook-form": "^7.54.2",
     "zod": "^3.24.2",
     "axios": "^1.8.1",
     "proj4": "^2.9.0"
@@ -37,7 +37,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "eslint": "^9",
-    "eslint-config-next": "15.1.7",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.6.3"
diff --git a/apps/fo/public/images/bg_login.jpg b/apps/fo/public/images/bg_login.jpg
new file mode 100644
index 000000000..b7793d16a
Binary files /dev/null and b/apps/fo/public/images/bg_login.jpg differ
diff --git a/apps/fo/src/entities/auth/lib/token-manager.ts b/apps/fo/src/entities/auth/lib/token-manager.ts
index e86dba5f2..5908dd091 100644
--- a/apps/fo/src/entities/auth/lib/token-manager.ts
+++ b/apps/fo/src/entities/auth/lib/token-manager.ts
@@ -1,6 +1,13 @@
 import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config";
 import { getCookie, removeCookie, setCookie } from "@/src/shared/lib/cookie";
 
+type JwtPayload = {
+  sub?: string;
+  exp?: number;
+  iat?: number;
+  [key: string]: unknown;
+};
+
 export class TokenManager {
   private static instance: TokenManager;
   private refreshTimer: NodeJS.Timeout | null = null;
@@ -18,6 +25,49 @@ export class TokenManager {
     return getCookie(key);
   }
 
+  private parseJwt(token: string): JwtPayload {
+    const parts = token.split(".");
+    if (parts.length !== 3) {
+      throw new Error("유효한 JWT 형식이 아닙니다.");
+    }
+
+    const base64Url = parts[1] ?? "";
+    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+    const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
+    const jsonPayload = decodeURIComponent(
+      atob(padded)
+        .split("")
+        .map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`)
+        .join("")
+    );
+
+    return JSON.parse(jsonPayload) as JwtPayload;
+  }
+
+  public getRemainingMsFromToken(key: string = CLAIM_NAME): number | null {
+    const token = this.getToken(key);
+    if (!token) {
+      return null;
+    }
+
+    try {
+      const payload = this.parseJwt(token);
+      if (typeof payload.exp !== "number") {
+        return null;
+      }
+
+      return payload.exp * 1000 - Date.now();
+    } catch (error) {
+      console.error("JWT 파싱 오류:", error);
+      return null;
+    }
+  }
+
+  public isExpiredToken(key: string = CLAIM_NAME): boolean {
+    const remainingMs = this.getRemainingMsFromToken(key);
+    return remainingMs === null || remainingMs <= 0;
+  }
+
   public setToken(key: string, value: string): void {
     setCookie(key, value, {
       secure: location.protocol === "https:",
diff --git a/apps/fo/src/features/auth/login/index.ts b/apps/fo/src/features/auth/login/index.ts
new file mode 100644
index 000000000..2093c3d8d
--- /dev/null
+++ b/apps/fo/src/features/auth/login/index.ts
@@ -0,0 +1 @@
+export { LoginPage } from "./ui/login-page";
diff --git a/apps/fo/src/features/auth/login/ui/login-page.tsx b/apps/fo/src/features/auth/login/ui/login-page.tsx
new file mode 100644
index 000000000..fe14819f3
--- /dev/null
+++ b/apps/fo/src/features/auth/login/ui/login-page.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect } from "react";
+import { images } from "@common/assets";
+import { LoginApi } from "@/src/entities/auth";
+import "./login.css";
+
+function LoginPage() {
+  useEffect(() => {
+    const hostname = window.location.hostname;
+    if (hostname.includes("hasuon.or.kr")) {
+      window.location.href =
+        process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
+    }
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const userId = formData.get("id") as string;
+    const password = formData.get("password") as string;
+
+    await LoginApi.login({ userId, password });
+    window.location.href = "/pages/dashboard";
+  };
+
+  return (
+    <div className="login fx">
+      <div className="left_box fx">
+        <div className="text">
+          <h1>
+            하수도정보시스템
+            <br />
+            <span>CMS 통합관리시스템</span>
+          </h1>
+          <p>하수도정보시스템 CMS 통합관리시스템에 오신 것을 환영합니다.</p>
+        </div>
+        <div className="img">
+          <Image src={images.logo} width={229} height={46} alt="logo" />
+        </div>
+      </div>
+      <form
+        id="loginForm"
+        name="loginForm"
+        method="post"
+        onSubmit={handleSubmit}
+      >
+        <div className="login_box fx">
+          <ul className="fx">
+            <li>
+              <h2>ID</h2>
+              <div className="input_st st1">
+                <i className="diveicon di-account-box" />
+                <input
+                  type="text"
+                  className="id"
+                  title="아이디를 입력하세요."
+                  id="id"
+                  name="id"
+                  maxLength={12}
+                />
+              </div>
+            </li>
+            <li>
+              <h2>PASSWORD</h2>
+              <div className="input_st st2">
+                <i className="diveicon di-key" />
+                <input
+                  type="password"
+                  className="input_style"
+                  maxLength={25}
+                  title="비밀번호를 입력하세요."
+                  id="password"
+                  name="password"
+                />
+              </div>
+            </li>
+          </ul>
+          <div className="bottom_box fx">
+            <div className="checks fx">
+              <input
+                type="checkbox"
+                name="checkId"
+                title="로그인ID 저장여부"
+                id="checkId"
+              />
+              <label htmlFor="checkId">아이디저장</label>
+            </div>
+            {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
+          </div>
+          <button type="submit" className="login_btn fx">
+            <span>LOGIN</span>
+          </button>
+          <div className="footer">
+            <div className="copy fx">
+              <p>copyright © 2023 KECO. All rights reserved.</p>
+            </div>
+            <div className="fot_btn fx">
+              <a
+                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
+                target="_blank"
+              >
+                개인정보처리방침
+              </a>
+              <a
+                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
+                target="_blank"
+              >
+                저작권정책안내
+              </a>
+              <a
+                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
+                target="_blank"
+              >
+                이메일무단수집거부
+              </a>
+            </div>
+            <p className="addr fx">
+              <span>
+                주소 : (22689) 인천광역시 서구 환경로 42(경서동
+                종합환경연구단지)
+              </span>
+              <span>
+                전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
+                3722
+              </span>
+              <span>팩스 :032-590-3729</span>
+            </p>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export { LoginPage };
+
diff --git a/apps/fo/src/features/auth/login/ui/login.css b/apps/fo/src/features/auth/login/ui/login.css
new file mode 100644
index 000000000..af73c9c68
--- /dev/null
+++ b/apps/fo/src/features/auth/login/ui/login.css
@@ -0,0 +1,310 @@
+/**
+* OLYM Cascading Style Sheets
+* File Name : login.css
+* Description : 로그인 스타일시트
+* Author : Web business Team / Choi Hyun Mi
+* Email : desingtj@olym.co.kr
+* Date : 2023.07.20
+* Update : 2023.07.26
+* Copyright(c) 2023 OLYM Communications. All Rights Reserved.
+*/
+html,
+body {
+  background: #fff;
+}
+.fx {
+  display: flex;
+  -ms-display: flex;
+  -webkit-display: flex;
+  box-sizing: border-box;
+}
+.login {
+  width: 100%;
+  height: 100vh;
+}
+.login .left_box {
+  width: 100%;
+  background: url(/images/bg_login.jpg) no-repeat center/cover;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 7% 5% 5% 5%;
+}
+.login .left_box .text h1 {
+  font-size: 53px;
+  color: #fff;
+}
+.login .left_box .text h1 span {
+  font-weight: 800;
+}
+.login .left_box .text p {
+  margin-top: 40px;
+  font-size: 18px;
+  color: #fff;
+}
+.login .login_box {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4% 12% 4% 6%;
+}
+.login .login_box > ul {
+  flex-direction: column;
+  gap: 40px;
+}
+.login .login_box > ul > li h2 {
+  font-size: 22px;
+  font-weight: 600;
+  color: #2640a5;
+  margin-bottom: 14px;
+}
+.login .login_box > ul > li .input_st {
+  position: relative;
+}
+.login .login_box > ul > li .input_st .diveicon {
+  position: absolute;
+  top: 50%;
+  left: 28px;
+  transform: translateY(-50%);
+  font-family: "Xeicon";
+  font-size: 25px;
+  color: #003288;
+}
+.login .login_box > ul > li input {
+  width: 100%;
+  padding: 20px 20px 20px 70px;
+  background: #f7f7f7;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 5px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #000;
+  height: auto;
+}
+.login .login_box > ul > li input:focus {
+  outline: 1px solid #3c5fe5;
+}
+.login .login_box > ul > li input::placeholder {
+  color: #afabab;
+  font-weight: 500;
+}
+.login .login_box .bottom_box {
+  justify-content: space-between;
+  gap: 20px;
+  padding: 50px 0 45px 0;
+}
+.login .login_box .bottom_box .checks {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.login .login_box .bottom_box .checks input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+}
+.login .login_box .bottom_box .checks label {
+  font-size: 14px;
+}
+.login .login_box .bottom_box .pw_message {
+  align-items: center;
+  gap: 5px;
+  color: #636363;
+  font-weight: 500;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 5px;
+}
+.login .login_box .bottom_box .pw_message i {
+  color: #327af5;
+  font-size: 20px;
+}
+.login .login_box .login_btn {
+  position: relative;
+  border-radius: 5px;
+  padding: 24px 15px;
+  background: linear-gradient(
+    to left,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  color: #fff;
+  cursor: pointer;
+}
+.login .login_box .login_btn span {
+  font-family: "Montserrat";
+  font-size: 19px;
+  font-weight: 700;
+  position: relative;
+}
+.login .login_box .login_btn i {
+  font-size: 22px;
+  transform: translateY(-2px);
+}
+.login .login_box .login_btn:before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: linear-gradient(
+    to right,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  transition: opacity 0.5s;
+}
+.login .login_box .login_btn:hover::before {
+  opacity: 1;
+}
+.login .footer .copy {
+  margin-top: 36px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 3%;
+}
+.login .footer .copy p {
+  font-size: 13px;
+  color: #d4d4d4;
+  width: 44%;
+  text-align: center;
+}
+.login .footer .copy::before,
+.login .login_box .copy::after {
+  content: "";
+  width: 20%;
+  height: 1px;
+  background: #d4d4d4;
+}
+.login .footer .fot_btn {
+  gap: 20px;
+  margin: 30px 0 10px 0;
+}
+.login .footer .fot_btn a {
+  color: #333;
+  font-weight: 700;
+  font-size: 13px;
+}
+.login .footer .fot_btn a:hover {
+  color: #003288;
+}
+.login .footer .addr {
+  color: #666;
+  font-size: 13px;
+  gap: 3px 20px;
+  flex-wrap: wrap;
+}
+/* 비밀번호 변경 팝업창 */
+.login .modal .modal_container {
+  width: 750px;
+}
+.login .pw_desc {
+  padding: 10px 10px 30px 10px;
+  color: #666;
+}
+.login .pw_desc p {
+  font-size: 1.25rem;
+  color: #000;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+.login .pw_desc span {
+  color: #f60;
+  font-weight: 700;
+}
+.login .modal .form_write {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  padding: 20px 50px;
+}
+@media (max-width: 1024px) {
+  .login {
+    flex-direction: column;
+    height: auto;
+  }
+  .login .left_box {
+    padding: 30px;
+    flex-direction: column-reverse;
+    gap: 20px;
+  }
+  .login .left_box .text h1 {
+    font-size: 30px;
+    line-height: 1.2em;
+  }
+  .login .left_box .text p {
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .login .left_box .img img {
+    height: 40px;
+  }
+  .login .login_box {
+    padding: 30px;
+  }
+  .login .login_box > ul {
+    gap: 20px;
+  }
+  .login .login_box > ul > li h2 {
+    margin-bottom: 7px;
+  }
+  .login .login_box > ul > li .input_st::after {
+    left: 15px;
+    font-size: 20px;
+  }
+  .login .login_box > ul > li input {
+    padding: 15px 10px 15px 50px;
+    font-size: 16px;
+  }
+  .login .login_box .bottom_box {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 30px 0;
+  }
+  .login .login_box .bottom_box .id_save label {
+    font-size: 14px;
+  }
+  .login .login_box .login_btn {
+    padding: 15px;
+  }
+  .login .login_box .login_btn span {
+    font-size: 16px;
+  }
+  .login .login_box .login_btn i {
+    font-size: 18px;
+    transform: translateY(-1px);
+  }
+  .login .login_box .copy p {
+    width: 100%;
+  }
+  .login .login_box .copy::before,
+  .login .login_box .copy::after {
+    display: none;
+  }
+  .login .footer .addr {
+    font-size: 11px;
+    gap: 3px 10px;
+  }
+  .login .modal .modal_container {
+    width: 90%;
+  }
+  .login .pw_desc {
+    padding: 0 0 20px 0;
+  }
+  .login .modal .form_write {
+    padding: 10px;
+  }
+}
+/* // login */
diff --git a/apps/sn/.env.local b/apps/sn/.env.local
index a47c409a7..33b8ef842 100644
--- a/apps/sn/.env.local
+++ b/apps/sn/.env.local
@@ -12,10 +12,8 @@ NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
 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_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083
+NEXT_PUBLIC_SEWERAGE_API_URL = http://localhost:8883
 NEXT_PUBLIC_DC_URL     = https://apigateway.apps.rsonesoft.com
 # NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
-NEXT_PUBLIC_CM_LOGIN_PAGE_URL = /
-#NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083
-#NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.222:8883
+NEXT_PUBLIC_CM_LOGIN_PAGE_URL = /auth/login
 # NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883
diff --git a/apps/sn/.env.mindone b/apps/sn/.env.mindone
index cea5518db..dc567fea8 100644
--- a/apps/sn/.env.mindone
+++ b/apps/sn/.env.mindone
@@ -12,4 +12,5 @@ NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
 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
-NEXT_PUBLIC_DC_URL = https://apigateway.apps.rsonesoft.com
\ No newline at end of file
+NEXT_PUBLIC_DC_URL = https://apigateway.apps.rsonesoft.com
+NEXT_PUBLIC_CM_LOGIN_PAGE_URL = /auth/login
\ No newline at end of file
diff --git a/apps/sn/.env.production b/apps/sn/.env.production
index 4a7c15edc..0b8189a78 100644
--- a/apps/sn/.env.production
+++ b/apps/sn/.env.production
@@ -15,4 +15,3 @@ NEXT_PUBLIC_NGII_URL = http://172.29.143.87/poiact
 NEXT_PUBLIC_NGII_PARAM = BDE2BEF39DAFEC293AB6730150F222AC&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={y}&tilerow={x}
 NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 NEXT_PUBLIC_DC_URL     = http://apigateway.iipbs-was.svc.cluster.local:8000
-NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
diff --git a/apps/sn/AGENTS.md b/apps/sn/AGENTS.md
index 18d6c1e38..291eb61d6 100644
--- a/apps/sn/AGENTS.md
+++ b/apps/sn/AGENTS.md
@@ -1,35 +1,303 @@
-## Project
-This repository contains a Next.js web application.
+# AGENTS.md
 
-Main technologies:
-- Next.js
-- TypeScript
-- pnpm workspace
-- turborepo
+## 목적
+이 앱은 하수관로 운영관리 시스템 프론트엔드 `sn` 프로젝트이다.
 
-이 저장소는 pnpm workspace + Turborepo 기반 monorepo이다.
+현재 목표는 리팩토링 전용 작업이 아니라, 하수관로 운영관리 시스템 2차사업 고도화를 수행하는 것이다.
+즉, 기존 `sn` 화면과 흐름을 안정적으로 유지하면서 2차 요구사항에 해당하는 화면 개발, 기능 확장, 백엔드 연동 보완을 수행해야 한다.
 
-- 워크스페이스 범위는 `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
+Codex 작업 루트는 가능하면 `../../../../../`로 잡고, 공통 시작 기준은 `AGENTS.md`를 따른다.
 
+이 파일은 프론트엔드 `sn` 앱 세부 기준이다.
+
+백엔드(`sewerage-service`)와 함께 수정하거나 API/응답/DB/인증/권한 연동 영향이 있는 작업은 아래 파일을 함께 확인한다.
+
+- 공통 시작 기준: `AGENTS.md`
+- 백엔드 세부 기준: `BE_REPO_ROOT/AGENTS.md`
+- 프론트엔드 `sn` 앱 기준: `FE_APP_ROOT/AGENTS.md`
+
+---
+
+## 작업 대상
+
+이번 작업에서 직접 수정 가능한 경로는 아래 두 곳만 허용한다.
+
+- `apps/sn/**`
+- `packages/common/business_components/**`
+
+위 두 경로를 제외한 나머지 경로는 모두 기본적으로 읽기 전용으로 간주한다.
+
+예를 들어 아래 경로는 직접 수정하면 안 된다.
+
+- `apps/as/**`
+- `apps/cm/**`
+- `apps/cs/**`
+- `apps/dc/**`
+- `apps/dm/**`
+- `apps/dm_new/**`
+- `apps/fo/**`
+- `apps/st/**`
+- `apps/wr/**`
+- `apps/common/**`
+- `docs/**`
+- `packages/common/assets/**`
+- `packages/common/auth/**`
+- `packages/common/components/**`
+- `packages/common/config/**`
+- `packages/common/network/**`
+- `packages/mindone/**`
+- `packages/oneandall/**`
+- `packages/rsone/**`
+
+수정이 꼭 필요해 보이는 문제가 위 경로에서 발견되더라도, 임의로 수정하지 말고 아래 내용을 먼저 정리해서 공유한다.
+
+- 문제 원인
+- 수정 필요 경로
+- `sn` 영향 범위
+- 타 앱 영향 가능성
+
+---
+
+## Monorepo 이해
+
+이 저장소는 pnpm workspace + Turborepo 기반 monorepo이며, 여러 회사/서비스가 함께 들어 있다.
+
+워크스페이스 구조는 아래와 같다.
+
+- `apps/*`
+- `apps/common/*`
+- `packages/*`
+- `packages/common/*`
+
+현재 작업 대상은 아래 두 축이다.
+
+- 서비스 앱: `apps/sn`
+- 공통 비즈니스 UI 패키지: `packages/common/business_components`
+
+`sn` 앱은 아래 공통 패키지들을 사용하지만, 이번 권한 범위상 직접 수정 가능한 공통 패키지는 `business_components`만이다.
+
+- `@common/assets`
+- `@common/business_components`
+- `@common/components`
+- `@common/config`
+
+즉, `sn`에서 문제가 보이더라도 원인이 `@common/components`, `@common/auth`, `@common/network` 등에 있으면 직접 수정하지 말고 보고만 한다.
+
+---
+
+## 작업 목표
+
+- 2차사업 요구사항을 `sn` 화면과 흐름에 반영한다.
+- `sn` 앱의 기존 사용자 동작을 가능한 한 유지하면서 기능을 확장한다.
+- 백엔드(`sewerage-service`)와의 연동을 기준으로 화면, 폼, 조회/저장 흐름을 정확히 맞춘다.
+- `business_components` 수정이 필요할 때는 `sn` 요구사항을 만족하는 최소 범위로 수행한다.
+- monorepo 내 타 앱 영향은 최소화한다.
+
+---
+
+## 작업 원칙
+
+1. 모든 변경은 2차 요구사항, 화면설계, 기능 명세 또는 승인된 작업 문서를 근거로 한다.
+2. `apps/sn`과 `packages/common/business_components` 범위를 넘는 수정은 하지 않는다.
+3. 공통 패키지 수정은 `sn` 요구사항을 충족하기 위한 최소 범위로 제한한다.
+4. 다른 앱 전용 로직을 `business_components`에 넣지 않는다.
+5. 불확실한 경우 먼저 계획을 제시한다.
+6. 변경 전후 차이, 영향 범위, 검증 방법을 명확히 설명한다.
+7. 기존 주석은 임의로 제거하지 않는다.
+8. 신규/수정 함수, 주요 상수, 주요 변수, `useState`, `useRef`, `useMemo`, `useCallback`에는 화면/API/상태 흐름에서 맡는 역할을 알 수 있는 주석을 작성한다.
+9. 한글이 깨지지 않도록 반드시 UTF-8로 유지한다.
+10. 작업 범위를 넓히기보다 `sn` 내부 해결을 우선한다.
+11. 백엔드 API 응답과 실제 브라우저 동작까지 함께 확인하는 것을 기본으로 한다.
+12. 작업 문서는 `apps/sn/docs/` 하위에 작업 단위 폴더를 만들어 기록한다.
+13. 신규 화면이나 UI 변경은 먼저 기존 `sn` 화면과 공통 컴포넌트/레이아웃 패턴을 따르는 방향으로 설계한다.
+14. `BaseLayout`, `NoFooterLayout`, `PageLayout`, `SearchDiv`, `SearchFormLeft/Right`, `ListDiv`, `UiTable`, `UiModal`, `Gis` 조합을 우선 재사용한다.
+15. 새 UI 구조가 꼭 필요하면 기존 패턴으로 해결되지 않는 이유를 먼저 설명한다.
+
+---
+
+## 허용 작업
+
+- `apps/sn` 내부 신규 화면/기능 개발
+- `apps/sn` 내부 화면/컴포넌트/훅/상태관리 코드 보완 및 리팩토링
+- `apps/sn` 내부 API 호출부 정리
+- `apps/sn` 내부 타입 정리
+- `apps/sn` 내부 라우팅/화면 구조 보완
+- `packages/common/business_components` 내부 공통 비즈니스 컴포넌트 개선
+- `sn`이 사용하는 `business_components`의 타입/렌더링/구조 개선
+- 요구사항 반영을 위한 UI/UX 보완
+- 문서 업데이트
+- 타입 오류 수정
+- 빌드 오류 수정
+- 테스트/검증 코드 또는 검증용 산출물 작성
+
+---
+
+## 금지 작업
+
+- `sn`과 무관한 타 앱 수정
+- `packages/common/business_components` 외의 공통 패키지 수정
+- 요구사항 근거 없는 기능 추가
+- 백엔드 응답 구조를 프론트에서 임의 가정하여 계약을 바꾸는 작업
+- 다른 회사/앱 전용 분기 추가
+- 권한 범위를 넘어서는 전역 리팩토링
+- 근거 없는 대량 수정
+
+---
+
+## 우선 판단 기준
+
+문제가 발생했을 때 아래 순서로 해결 범위를 판단한다.
+
+1. `apps/sn` 내부에서 해결 가능한가
+2. `packages/common/business_components` 수정으로 해결 가능한가
+3. 그 외 공통 패키지 수정이 필요한가
+
+3번에 해당하면 직접 수정하지 말고, 아래 내용을 정리해서 먼저 공유한다.
+
+- 문제 원인
+- 수정 필요 경로
+- `sn` 영향 범위
+- 타 앱 영향 가능성
+
+---
+
+## html 디렉터리 규칙
+
+- 경로: `apps/sn/app/html`
+- 이 디렉터리는 퍼블리싱/정적 HTML/로직 검토 목적의 별도 영역으로 본다.
+- 공식 HTML 시안은 기본적으로 `COMMON_DOCS_ROOT/작업계획/<작업폴더>/` 아래 단일 `.html` 파일로 만든다.
+- `apps/sn/app/html` 작업은 사용자가 앱 라우트 기반 미리보기를 명시적으로 요청한 경우에만 사용한다.
+- `html` 하위 요청이라고 해서 `sn`의 실제 앱 코드 전체를 함께 수정하지 않는다.
+- `html` 작업과 실제 서비스 앱 로직 변경이 같이 필요해 보이면 먼저 분리해서 설명한다.
+
+---
+
+## 빌드 및 검증 기준
+
+VSCode나 별도 터미널에서 `sn` Next 개발 서버가 실행 중이면 `next build`, `pnpm --filter sn run build`, `pnpm turbo run build --filter=sn` 같은 빌드 명령을 실행하지 않는다.
+개발 서버와 빌드가 동시에 `.next` 산출물을 갱신하면 개발 서버가 종료되거나 꼬일 수 있으므로, 빌드 검증은 사용자에게 확인한 뒤 개발 서버를 끄고 수행한다.
+
+이 저장소는 `main` 브랜치 push 전에 `.husky/pre-push`에서 아래 빌드를 수행한다.
+
+```sh
+pnpm turbo run build --filter="...[origin/$BRANCH]"
+```
+
+따라서 로컬 검증도 아래 순서로 수행하는 것을 기본으로 한다.
+
+### `sn`만 수정한 경우
+
+```powershell
+pnpm --filter sn run build
+pnpm turbo run build --filter=sn
+```
+
+### `business_components`를 수정한 경우
+
+```powershell
+pnpm --filter @common/business_components run build
+pnpm --filter sn run build
+pnpm turbo run build --filter="...[origin/main]"
+```
+
+### pre-push와 동일한 최종 확인
+
+```powershell
+git fetch origin
+pnpm turbo run build --filter="...[origin/main]" --dry-run
+pnpm turbo run build --filter="...[origin/main]"
+```
+
+`business_components`를 수정했는데 이 빌드가 깨지면, `sn`뿐 아니라 의존 패키지/타 앱 영향 가능성을 먼저 점검해야 한다.
+
+가능하면 아래 검증도 함께 수행한다.
+
+- `sn` 개발 서버 실행
+- 백엔드 연동 확인
+- 브라우저 화면 동작 확인
+- 네트워크 응답 확인
+
+---
+
+## 타입 오류 처리 기준
+
+- push 실패 원인이 타입 오류라면 먼저 현재 수정 범위 안에서 해결 가능한지 확인한다.
+- `sn` 내부 타입 오류면 `apps/sn`에서 해결한다.
+- `business_components` 타입 오류면 그 패키지 안에서 해결한다.
+- 다른 공통 패키지 타입 오류가 원인이면 직접 고치지 말고 보고한다.
+
+---
+
+## 주석 및 인코딩 규칙
+
+- 파일 인코딩은 UTF-8로 유지한다.
+- 한글 주석이 깨진 상태로 저장하지 않는다.
+- `.md`, `.toml` 같은 한글 포함 텍스트 파일은 저장 직후 다시 열어 한글이 정상인지 확인한다.
+- 한글이 많은 문서는 셸 리다이렉션(`>`, `>>`)이나 검증 없는 `Set-Content`, `Out-File`로 바로 덮어쓰지 않는다.
+- 기존 주석은 정당한 이유 없이 삭제하지 않는다.
+- 복잡한 렌더링 분기, 폼 처리, 데이터 변환, 트리 구조, 지도 연동, 표 컴포넌트 조합 로직은 함수/메서드 단위 주석을 상세히 작성한다.
+- 신규/수정 상수와 변수는 이름만으로 의도가 충분히 드러나지 않으면 선언부 근처에 역할, 단위, 백엔드 계약, 화면 상태와의 관계를 주석으로 남긴다.
+- `useRef`로 비동기 요청, 팝업 창, 지도 객체, 체크 상태를 보관하는 경우에는 왜 state가 아니라 ref를 쓰는지 주석으로 남긴다.
+
+---
+
+## 문서 경로 기준
+
+`sn` 관련 문서는 앱 내부 문서로 관리하는 것을 기본으로 한다.
+
+권장 경로:
+
+- `apps/sn/docs/기준문서/`
+- `apps/sn/docs/작업계획/`
+- `apps/sn/docs/검증/`
+
+공통 개발 흐름과 멀티에이전트 기준은 아래 공통 문서를 우선 참조한다.
+
+- `COMMON_DOCS_ROOT/기준문서/010-AI개발작업흐름.md`
+- `COMMON_DOCS_ROOT/기준문서/011-멀티에이전트운영.md`
+
+1차 프로젝트 당시에는 AI 코딩 문서 체계를 사용하지 않았으므로, 신규 문서를 `phase2`처럼 별도 단계 폴더로 분리하지 않고 `apps/sn/docs/` 바로 아래 주제별 한글 폴더로 관리한다.
+
+작업계획 문서는 아래 원칙으로 관리한다.
+
+- `apps/sn/docs/작업계획/작업카드-템플릿.md`는 최상위에 유지한다.
+- 실제 기능 문서는 `apps/sn/docs/작업계획/<기능ID-기능명>/` 폴더 단위로 관리한다.
+- 같은 기능의 FE 작업카드, 관련 메모, 추가 계획 문서는 같은 기능 폴더 안에 함께 둔다.
+- 역할이 있는 문서 파일명은 `<순번>-<역할>-<프로젝트>-<기능명>-<문서종류>.md` 형식을 우선 사용한다.
+- 날짜는 파일명 보조 정보로만 사용하고, `apps/sn/docs/작업계획/` 아래에 날짜 파일을 평면으로 계속 쌓지 않는다.
+- 기존 `md` 문서의 경로와 파일명은 사용자 요청이나 승인된 구조 개편 없이 임의로 바꾸지 않는다.
+- 기존 문서를 수정할 때는 현재 경로와 파일명을 유지한 채 내용을 갱신하는 것을 기본으로 한다.
+- 공통 기준은 `COMMON_DOCS_ROOT/작업계획/작업계획-폴더규칙.md`를 함께 참고한다.
+- UI/레이아웃 기준은 `FE_APP_DOCS_ROOT/기준문서/013-UI레이아웃가이드.md`를 함께 참고한다.
+
+문서 작업 시에도 `sn` 범위를 벗어나는 앱 문서는 임의로 수정하지 않는다.
+
+루트 `docs/**`는 다른 회사/서비스 리소스를 포함할 수 있으므로 `sn` 작업 중 임의로 수정하지 않는다. 루트 `docs/**` 변경이 필요해 보이면 변경 이유, 영향 범위, `apps/sn/docs/**` 대체 가능 여부를 먼저 정리하고 사용자 승인을 받는다.
+
+---
+
+## 결과 보고 형식
+
+모든 작업 결과는 아래 형식을 따른다.
+
+- 작업 목적
+- 수정 대상 파일
+- 변경 내용 요약
+- 영향 범위
+- 테스트 / 검증 방법
+- 롤백 방법
+- 남은 리스크
+
+---
+
+## 중요
+
+이 모노레포는 여러 회사/서비스가 함께 사용하는 저장소다.
+이번 작업에서 직접 수정 가능한 범위는 `apps/sn`과 `packages/common/business_components` 두 곳뿐이다.
+
+하지만 이번 프로젝트의 성격은 리팩토링 전용이 아니라 `sn` 2차사업 고도화 개발이다.
+따라서 요구사항 구현은 적극적으로 수행하되, 범위를 넘는 변경은 먼저 설명하고 승인 없이 수정하지 않는다.
diff --git a/apps/sn/app/(map-layout)/layout.tsx b/apps/sn/app/(map-layout)/layout.tsx
index f58e67489..f840fa131 100644
--- a/apps/sn/app/(map-layout)/layout.tsx
+++ b/apps/sn/app/(map-layout)/layout.tsx
@@ -34,6 +34,14 @@ export default function MapLayout({
 
   const { fetchCtpv, fetchSgg, fetchBIZ_SE_CD, fetchBIZ_TY_CD } = useStore();
 
+  useEffect(() => {
+    document.body.classList.add("sn-map-page-lock");
+
+    return () => {
+      document.body.classList.remove("sn-map-page-lock");
+    };
+  }, []);
+
   useEffect(() => {
     fetchCtpv();
     fetchSgg();
diff --git a/apps/sn/app/(map-layout)/map/agedPipePopup/page.tsx b/apps/sn/app/(map-layout)/map/agedPipePopup/page.tsx
new file mode 100644
index 000000000..22c9fa407
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/agedPipePopup/page.tsx
@@ -0,0 +1,30 @@
+import { redirect } from "next/navigation";
+
+type LegacyAgedPipePopupPageProps = {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+};
+
+export default async function LegacyAgedPipePopupPage({
+  searchParams,
+}: LegacyAgedPipePopupPageProps) {
+  const resolvedSearchParams = await searchParams;
+  const nextSearchParams = new URLSearchParams();
+
+  Object.entries(resolvedSearchParams).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach((item) => nextSearchParams.append(key, item));
+      return;
+    }
+
+    if (typeof value === "string") {
+      nextSearchParams.set(key, value);
+    }
+  });
+
+  const queryString = nextSearchParams.toString();
+  redirect(
+    queryString
+      ? `/popup/agedPipePopup?${queryString}`
+      : "/popup/agedPipePopup",
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx
new file mode 100644
index 000000000..9162074f4
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { AgedPipeFilters } from "./agedPipeUtils";
+
+type Props = {
+  filters: AgedPipeFilters;
+  onFiltersChange: (filters: AgedPipeFilters) => void;
+  onApply: (filters?: AgedPipeFilters) => void;
+};
+
+export default function AgedPipeLayerSettingPanel({
+  filters,
+  onFiltersChange,
+  onApply,
+}: Props) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [elapsedYearsText, setElapsedYearsText] = useState(String(filters.elapsedYears ?? ""));
+
+  useEffect(() => {
+    setElapsedYearsText(String(filters.elapsedYears ?? ""));
+  }, [filters.elapsedYears]);
+
+  const commitElapsedYears = () => {
+    const nextFilters = {
+      ...filters,
+      elapsedYears: elapsedYearsText === "" ? ("" as unknown as number) : Number(elapsedYearsText),
+    };
+    onFiltersChange(nextFilters);
+    onApply(nextFilters);
+  };
+
+  return (
+    <div className="overflow-hidden rounded-sm border border-red-100 bg-red-50/35">
+      <div className="relative flex min-h-[30px] items-center justify-center border-b border-red-100 bg-white px-8">
+        <button
+          type="button"
+          className="absolute left-2 top-1/2 h-[18px] w-[18px] -translate-y-1/2 bg-transparent text-[1.2rem] leading-none text-[#555]"
+          onClick={() => setIsCollapsed((value) => !value)}
+          title={isCollapsed ? "펼치기" : "접기"}
+        >
+          {isCollapsed ? "›" : "⌄"}
+        </button>
+        <span className="text-[1.2rem] font-semibold text-red-700">노후관로 설정</span>
+      </div>
+
+      {!isCollapsed && (
+        <div className="px-2 py-2">
+          <div className="flex min-h-[30px] items-center gap-1 whitespace-nowrap text-[1.2rem] text-[#333]">
+            <label htmlFor="aged-pipe-elapsed-years">경과년도(년)</label>
+            <input
+              id="aged-pipe-elapsed-years"
+              className="h-[22px] w-14 border border-[#ccd6df] px-1 text-center text-[1.2rem]"
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              autoComplete="off"
+              value={elapsedYearsText}
+              onFocus={(event) => event.currentTarget.select()}
+              onChange={(event) => {
+                const digits = event.target.value.replace(/[^0-9]/g, "");
+                setElapsedYearsText(digits);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") commitElapsedYears();
+              }}
+            />
+            <button
+              type="button"
+              className="grid h-[22px] w-[22px] place-items-center rounded-full bg-[#31a83b] text-[1.4rem] font-bold leading-none text-white"
+              onClick={commitElapsedYears}
+              title="적용"
+            >
+              ✓
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx
new file mode 100644
index 000000000..1b6542816
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx
@@ -0,0 +1,322 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { Button, Input } from "@common/components";
+import { UiTable } from "@common/business_components/ui";
+import { getData } from "@/components/lib/api";
+import useStore from "@/store/useStore";
+import LoadingOverlay from "@/components/ui/LoadingBar";
+import {
+  AGED_PIPE_DEFAULT_FILTERS,
+  AGED_PIPE_LAYER_TYPE,
+  AGED_PIPE_LIST_HEADLIST,
+  AGED_PIPE_PAGE_SIZE,
+  buildAgedPipeCqlFilters,
+  normalizeAgedPipeFilters,
+  toDisplayPipeRow,
+  validateElapsedYears,
+  type AgedPipeFilters,
+  type AgedPipeRow,
+} from "./agedPipeUtils";
+import { downloadAgedPipeCsv } from "./agedPipeExport";
+
+const POPUP_ROW_SELECT_MESSAGE = "SN_AGED_PIPE_ROW_SELECT";
+const POPUP_MINIMIZE_MESSAGE = "SN_AGED_PIPE_POPUP_MINIMIZE";
+const POPUP_FILTER_SYNC_MESSAGE = "SN_AGED_PIPE_FILTER_SYNC";
+
+export default function AgedPipePopupPage() {
+  const searchParams = useSearchParams();
+  const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
+  const [filters, setFilters] = useState<AgedPipeFilters>(() =>
+    normalizeAgedPipeFilters({
+      elapsedYears: Number(searchParams.get("elapsedYears") ?? AGED_PIPE_DEFAULT_FILTERS.elapsedYears),
+      ctpvCd: searchParams.get("ctpvCd") ?? AGED_PIPE_DEFAULT_FILTERS.ctpvCd,
+      sggCd: searchParams.get("sggCd") ?? AGED_PIPE_DEFAULT_FILTERS.sggCd,
+    }),
+  );
+  const [rows, setRows] = useState<AgedPipeRow[]>([]);
+  const [total, setTotal] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [isLoading, setIsLoading] = useState(false);
+  const [downloadProgressText, setDownloadProgressText] = useState("");
+
+  const sggOptions = useMemo(
+    () =>
+      filters.ctpvCd === "0"
+        ? sgg
+        : sgg.filter((item) => String(item.val).startsWith(filters.ctpvCd.slice(0, 2))),
+    [filters.ctpvCd, sgg],
+  );
+
+  useEffect(() => {
+    if (ctpv.length === 0) fetchCtpv();
+    if (sgg.length === 0) fetchSgg();
+  }, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
+
+  const fetchRows = useCallback(
+    async (page: number, nextFilters: AgedPipeFilters, size: number) => {
+      const normalized = normalizeAgedPipeFilters(nextFilters);
+      const queryParams = new URLSearchParams({
+        lyrTypeNm: AGED_PIPE_LAYER_TYPE,
+        page: String(page - 1),
+        size: String(size),
+        sort: "string",
+      });
+      const cqlFilters = buildAgedPipeCqlFilters(normalized);
+      if (cqlFilters.length > 0) {
+        queryParams.append("cqlFiter", cqlFilters.join(" and "));
+      }
+
+      const response = await getData(`v1/fclts?${queryParams.toString()}`);
+      const responseRows = Array.isArray(response?.data) ? response.data : [];
+
+      return {
+        rows: responseRows.map((item: Record<string, unknown>, index: number) =>
+          toDisplayPipeRow(item, index, page, ctpv, sgg),
+        ),
+        total: Number(response?.count ?? 0),
+      };
+    },
+    [ctpv, sgg],
+  );
+
+  const loadRows = useCallback(
+    async (page = 1, nextFilters = filters) => {
+      setIsLoading(true);
+      try {
+        const response = await fetchRows(page, nextFilters, AGED_PIPE_PAGE_SIZE);
+        setRows(response.rows);
+        setTotal(response.total);
+        setCurrentPage(page);
+      } catch (error) {
+        console.error("노후관로 목록 조회 중 오류:", error);
+        setRows([]);
+        setTotal(0);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [fetchRows, filters],
+  );
+
+  useEffect(() => {
+    loadRows(1, filters);
+    // 최초 로딩만 수행한다. 이후 조회는 버튼/페이지 변경으로 처리한다.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const handleFilterSyncMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+      if (event.data?.type !== POPUP_FILTER_SYNC_MESSAGE) return;
+      if (!event.data?.filters) return;
+
+      const normalized = normalizeAgedPipeFilters(event.data.filters as AgedPipeFilters);
+      setFilters(normalized);
+      setSelectedIndex(-1);
+      loadRows(1, normalized);
+    };
+
+    window.addEventListener("message", handleFilterSyncMessage);
+    return () => window.removeEventListener("message", handleFilterSyncMessage);
+  }, [loadRows]);
+
+  const handleSearch = async (page = 1) => {
+    if (!validateElapsedYears(Number(filters.elapsedYears))) {
+      alert("경과년도는 1년~100년 범위 내에서 입력해주세요.");
+      return;
+    }
+
+    const normalized = normalizeAgedPipeFilters(filters);
+    setFilters(normalized);
+    await loadRows(page, normalized);
+  };
+
+  const handleRowClick = (index?: number) => {
+    if (typeof index !== "number") return;
+    const row = rows[index];
+    if (!row) return;
+
+    setSelectedIndex(index);
+    window.opener?.postMessage(
+      {
+        type: POPUP_ROW_SELECT_MESSAGE,
+        row,
+      },
+      window.location.origin,
+    );
+  };
+
+  const handleDownload = async () => {
+    if (total === 0) {
+      alert("다운로드할 데이터가 없습니다.");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setDownloadProgressText("CSV export 작업을 준비하고 있습니다.");
+      await downloadAgedPipeCsv(filters, (job) => {
+        if (job.status === "QUEUED") {
+          setDownloadProgressText("CSV export 작업이 대기 중입니다.");
+          return;
+        }
+
+        if (job.status === "RUNNING") {
+          setDownloadProgressText(
+            `CSV export 생성 중입니다. (${job.progressPercent ?? 0}%)`,
+          );
+        }
+      });
+      setDownloadProgressText("");
+    } catch (error) {
+      console.error("노후관로 목록 다운로드 중 오류:", error);
+      setDownloadProgressText("");
+      alert(
+        error instanceof Error
+          ? error.message
+          : "노후관로 CSV 다운로드 중 오류가 발생했습니다.",
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleMinimize = () => {
+    window.opener?.postMessage(
+      {
+        type: POPUP_MINIMIZE_MESSAGE,
+        filters: normalizeAgedPipeFilters(filters),
+        total,
+      },
+      window.location.origin,
+    );
+    window.close();
+  };
+
+  return (
+    <main className="flex h-screen flex-col overflow-hidden bg-white">
+      <LoadingOverlay isLoading={isLoading} />
+      <header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
+        <h1 className="text-[1.45rem] font-semibold text-white">노후관로 현황</h1>
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            color="white"
+            size="xs"
+            className="border border-white/30 px-3 py-1 text-[1.05rem] text-white"
+            onClick={handleMinimize}
+          >
+            최소화
+          </Button>
+        </div>
+      </header>
+
+      {downloadProgressText ? (
+        <div className="border-b border-slate-200 bg-emerald-50 px-5 py-2 text-[1rem] text-emerald-700">
+          {downloadProgressText}
+        </div>
+      ) : null}
+
+      <section className="overflow-y-auto p-4">
+        <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[160px_320px_320px_auto] md:items-end md:justify-between">
+          <label className="block md:max-w-[160px]">
+            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">경과년도</div>
+            <Input
+              className="h-10 !text-[1.1rem]"
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              autoComplete="off"
+              value={String(filters.elapsedYears ?? "")}
+              onChange={(event) => {
+                const digits = event.target.value.replace(/[^0-9]/g, "");
+                setFilters({
+                  ...filters,
+                  elapsedYears: digits === "" ? ("" as unknown as number) : Number(digits),
+                });
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") void handleSearch(1);
+              }}
+            />
+          </label>
+
+          <label className="block md:max-w-[320px]">
+            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
+            <select
+              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              value={filters.ctpvCd}
+              onChange={(event) =>
+                setFilters({
+                  ...filters,
+                  ctpvCd: event.target.value,
+                  sggCd: "0",
+                })
+              }
+            >
+              <option value="0">전체</option>
+              {ctpv.map((item) => (
+                <option key={item.val} value={String(item.val)}>
+                  {item.text}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="block md:max-w-[320px]">
+            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
+            <select
+              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              value={filters.sggCd}
+              onChange={(event) => setFilters({ ...filters, sggCd: event.target.value })}
+            >
+              <option value="0">전체</option>
+              {sggOptions.map((item) => (
+                <option key={item.val} value={String(item.val)}>
+                  {item.text}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <div className="flex flex-wrap justify-end gap-2 md:pr-3">
+            <Button
+              type="button"
+              size="sm"
+              color="primary"
+              className="h-10 px-5 !text-[1.1rem]"
+              onClick={() => void handleSearch(1)}
+            >
+              조회
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              color="green"
+              className="h-10 px-5 !text-[1.1rem]"
+              onClick={handleDownload}
+            >
+              다운로드
+            </Button>
+          </div>
+        </div>
+
+        <UiTable<AgedPipeRow>
+          headName={<>노후관로 조회 결과 총 {total.toLocaleString()}건</>}
+          tableData={rows}
+          headlist={AGED_PIPE_LIST_HEADLIST}
+          pageSize={10}
+          total={total}
+          cellClick={(index) => handleRowClick(index)}
+          onPageChange={(page) => void handleSearch(page)}
+          curPage={currentPage}
+          index={selectedIndex}
+          widthFixed={true}
+        />
+      </section>
+    </main>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeExport.ts b/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeExport.ts
new file mode 100644
index 000000000..7230ccb3f
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeExport.ts
@@ -0,0 +1,42 @@
+"use client";
+
+import { postBlobData } from "@/components/lib/api";
+import { fileDownload } from "@/components/lib/utils/fileDownload";
+import {
+  AGED_PIPE_EXCEL_FIELDS,
+  normalizeAgedPipeFilters,
+  type AgedPipeFilters,
+} from "./agedPipeUtils";
+
+type AgedPipeExportProgress = {
+  fileName?: string;
+  progressPercent?: number;
+  status: "QUEUED" | "RUNNING" | "COMPLETED";
+};
+
+/** 노후관로 CSV 다운로드를 요청한다. */
+export const downloadAgedPipeCsv = async (
+  filters: AgedPipeFilters,
+  onProgress?: (progress: AgedPipeExportProgress) => void,
+) => {
+  const normalizedFilters = normalizeAgedPipeFilters(filters);
+
+  onProgress?.({ status: "RUNNING", progressPercent: 0 });
+
+  const { blob, fileName } = await postBlobData("v1/fclts/agedPipes/exportJobs/download", {
+    elapsedYears: normalizedFilters.elapsedYears,
+    ctpvCd: normalizedFilters.ctpvCd,
+    sggCd: normalizedFilters.sggCd,
+    format: "csv",
+    columns: [...AGED_PIPE_EXCEL_FIELDS],
+  });
+
+  const resolvedFileName = fileName || "노후관로_현황.csv";
+  fileDownload(blob, resolvedFileName);
+  onProgress?.({ status: "COMPLETED", fileName: resolvedFileName, progressPercent: 100 });
+
+  return {
+    status: "COMPLETED" as const,
+    fileName: resolvedFileName,
+  };
+};
diff --git a/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts b/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts
new file mode 100644
index 000000000..e273d9c1c
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts
@@ -0,0 +1,323 @@
+"use client";
+
+import type { SelectDataType } from "@common/business_components";
+import { formatDisplayData } from "@/components/lib/utils/formatDisplayValue";
+import {
+  MS_SWAGE_PPL_CODES,
+  MS_SWAGE_PPL_USE_CODES,
+} from "../common/table";
+
+export const AGED_PIPE_LAYER_TYPE = "tb_ms_swage_ppl";
+export const AGED_PIPE_DEFAULT_ELAPSED_YEARS = 30;
+export const AGED_PIPE_PAGE_SIZE = 10;
+export const AGED_PIPE_MIN_ZOOM = 13;
+export const AGED_PIPE_GUIDE_MIN_ZOOM = 13.1;
+export const AGED_PIPE_INVALID_INSTALL_YMD_PREFIXES = ["19000101"];
+
+export type AgedPipeFilters = {
+  elapsedYears: number;
+  ctpvCd: string;
+  sggCd: string;
+};
+
+export type AgedPipeRow = {
+  fid: string;
+  lyrTypeNm: string;
+  rowNumber: number;
+  fcltMngNo: string;
+  instlYmd: string;
+  pdmtVl: string | number;
+  prlgVl: string | number;
+  usgCd: string;
+  mqltCd: string;
+  elapsedYears: number | string;
+  ctpvNm?: string;
+  sggNm?: string;
+  [key: string]: unknown;
+};
+
+type PipeSource = Record<string, unknown>;
+
+const useMap = new Map(MS_SWAGE_PPL_USE_CODES.map((item) => [item.val.trim(), item.text]));
+const materialMap = new Map(MS_SWAGE_PPL_CODES.map((item) => [item.val.trim(), item.text]));
+
+export const AGED_PIPE_DEFAULT_FILTERS: AgedPipeFilters = {
+  elapsedYears: AGED_PIPE_DEFAULT_ELAPSED_YEARS,
+  ctpvCd: "0",
+  sggCd: "0",
+};
+
+const normalizeRegionFilterCode = (value: unknown, prefixLength: number) => {
+  const digits = String(value ?? "").replace(/[^0-9]/g, "");
+  if (digits === "" || digits === "0") return "0";
+  return digits.length > prefixLength ? digits.slice(0, prefixLength) : digits;
+};
+
+export const AGED_PIPE_LIST_HEADLIST = [
+  { id: "rowNumber", title: "NO", widthPercent: 6 },
+  { id: "fcltMngNo", title: "시설관리번호", widthPercent: 18 },
+  { id: "instlYmd", title: "설치일자", widthPercent: 12 },
+  { id: "pdmtVl", title: "관경(mm)", widthPercent: 10 },
+  { id: "prlgVl", title: "연장(m)", widthPercent: 10 },
+  { id: "usgCd", title: "용도", widthPercent: 14 },
+  { id: "mqltCd", title: "재질", widthPercent: 18 },
+  { id: "elapsedYears", title: "경과년도", widthPercent: 12, align: "right" },
+];
+
+export const AGED_PIPE_EXCEL_FIELDS = [
+  "ftreSmbolCd",
+  "fcltMngNo",
+  "pbadmsEmdCd",
+  "mapshtNo",
+  "mngInstCd",
+  "instlYmd",
+  "usgCd",
+  "mqltCd",
+  "fcltyShpCd",
+  "pdmtVl",
+  "wdthLen",
+  "vrtcLen",
+  "prlgVl",
+  "tmptDpth",
+  "scendDpth",
+  "avgGrdn",
+  "trflnCnt",
+  "exclnMltvArea",
+  "drtwMltvArea",
+  "rnyssnFvlcVl",
+  "clarFvlcVl",
+  "tmptMhlMngNo",
+  "scendMhlMngNo",
+  "instMngNo",
+  "fid",
+  "lyrTypeNm",
+  "swtrmtFcltCd",
+  "elapsedYears",
+  "ctpvNm",
+  "sggNm",
+] as const;
+
+export const AGED_PIPE_EXCEL_HEADER = {
+  ftreSmbolCd: "지형지물부호코드",
+  pbadmsEmdCd: "행정읍면동코드",
+  mapshtNo: "도엽번호",
+  mngInstCd: "관리기관코드",
+  wdthLen: "가로길이",
+  vrtcLen: "세로길이",
+  tmptDpth: "시점깊이",
+  scendDpth: "종점깊이",
+  avgGrdn: "평균구배",
+  trflnCnt: "차선수",
+  exclnMltvArea: "우수배수면적",
+  drtwMltvArea: "오수배수면적",
+  rnyssnFvlcVl: "우기유속값",
+  clarFvlcVl: "맑음유속값",
+  tmptMhlMngNo: "시점맨홀관리번호",
+  scendMhlMngNo: "종점맨홀관리번호",
+  instMngNo: "기관관리번호",
+  fid: "FID",
+  lyrTypeNm: "레이어타입명",
+  swtrmtFcltCd: "시설코드",
+  fcltyShpCd: "시설물형태코드",
+  fcltMngNo: "시설관리번호",
+  instlYmd: "설치일자",
+  pdmtVl: "관경(mm)",
+  prlgVl: "연장(m)",
+  usgCd: "용도",
+  mqltCd: "재질",
+  elapsedYears: "경과년도",
+  ctpvNm: "시도",
+  sggNm: "시군구",
+};
+
+const getExcelColumnLetter = (columnIndex: number) => {
+  let current = columnIndex;
+  let result = "";
+
+  while (current > 0) {
+    const remainder = (current - 1) % 26;
+    result = String.fromCharCode(65 + remainder) + result;
+    current = Math.floor((current - 1) / 26);
+  }
+
+  return result || "A";
+};
+
+export const AGED_PIPE_EXCEL_HEADER_RANGE = `A1:${getExcelColumnLetter(AGED_PIPE_EXCEL_FIELDS.length)}1`;
+
+const pad2 = (value: number) => String(value).padStart(2, "0");
+
+const normalizeYmd = (value: unknown) =>
+  String(value ?? "").replace(/[^0-9]/g, "").slice(0, 8);
+
+const getToday = () => new Date();
+
+export const normalizeAgedPipeFilters = (filters: AgedPipeFilters): AgedPipeFilters => {
+  const elapsedYears = Math.trunc(Number(filters.elapsedYears));
+
+  return {
+    ...filters,
+    ctpvCd: normalizeRegionFilterCode(filters.ctpvCd, 2),
+    sggCd: normalizeRegionFilterCode(filters.sggCd, 5),
+    elapsedYears:
+      Number.isFinite(elapsedYears) && elapsedYears >= 1 && elapsedYears <= 100
+        ? elapsedYears
+        : AGED_PIPE_DEFAULT_ELAPSED_YEARS,
+  };
+};
+
+export const validateElapsedYears = (value: number) =>
+  Number.isInteger(value) && value >= 1 && value <= 100;
+
+export const getCutoffYmd = (elapsedYears: number) => {
+  const today = getToday();
+  const cutoff = new Date(today.getFullYear() - elapsedYears, today.getMonth(), today.getDate());
+  return `${cutoff.getFullYear()}${pad2(cutoff.getMonth() + 1)}${pad2(cutoff.getDate())}`;
+};
+
+export const getElapsedYears = (value: unknown) => {
+  const normalized = normalizeYmd(value);
+  if (normalized.length < 4 || isInvalidInstallYmd(value)) return null;
+
+  const year = Number(normalized.slice(0, 4));
+  const month = Number(normalized.slice(4, 6) || "1");
+  const day = Number(normalized.slice(6, 8) || "1");
+  if (!year) return null;
+
+  const today = getToday();
+  let elapsed = today.getFullYear() - year;
+  if (
+    today.getMonth() + 1 < month ||
+    (today.getMonth() + 1 === month && today.getDate() < day)
+  ) {
+    elapsed -= 1;
+  }
+
+  return Math.max(elapsed, 0);
+};
+
+export const isInvalidInstallYmd = (value: unknown) => {
+  const normalized = normalizeYmd(value);
+  return (
+    normalized.length < 8 ||
+    AGED_PIPE_INVALID_INSTALL_YMD_PREFIXES.some((prefix) => normalized.startsWith(prefix))
+  );
+};
+
+export const getElapsedYearsDisplayText = (value: unknown) => {
+  const elapsedYears = getElapsedYears(value);
+  return elapsedYears == null ? "확인불가" : `${elapsedYears}년`;
+};
+
+export const buildAgedPipeCqlFilters = (filters: AgedPipeFilters) => {
+  const normalized = normalizeAgedPipeFilters(filters);
+  const cqlFilters = [
+    "instl_ymd IS NOT NULL",
+    ...AGED_PIPE_INVALID_INSTALL_YMD_PREFIXES.map((prefix) => `instl_ymd NOT LIKE '${prefix}%'`),
+    `instl_ymd <= '${getCutoffYmd(normalized.elapsedYears)}'`,
+  ];
+
+  if (normalized.sggCd !== "0") {
+    cqlFilters.push(`pbadms_emd_cd LIKE '${normalized.sggCd}%'`);
+  } else if (normalized.ctpvCd !== "0") {
+    cqlFilters.push(`pbadms_emd_cd LIKE '${normalized.ctpvCd}%'`);
+  }
+
+  return cqlFilters;
+};
+
+const getRegionCode = (source: PipeSource) =>
+  String(source.pbadmsEmdCd ?? source.pbadms_emd_cd ?? "").trim();
+
+export const matchesAgedPipeFilters = (source: PipeSource, filters: AgedPipeFilters) => {
+  const normalized = normalizeAgedPipeFilters(filters);
+  const instlYmd = normalizeYmd(source.instl_ymd ?? source.instlYmd);
+  if (!instlYmd || isInvalidInstallYmd(instlYmd) || instlYmd > getCutoffYmd(normalized.elapsedYears)) return false;
+
+  const regionCode = getRegionCode(source);
+  if (normalized.sggCd !== "0") return regionCode.startsWith(normalized.sggCd);
+  if (normalized.ctpvCd !== "0") return regionCode.startsWith(normalized.ctpvCd);
+  return true;
+};
+
+const resolveRegionName = (
+  code: string,
+  directName: unknown,
+  options: SelectDataType[],
+  prefixLength: number,
+) => {
+  const direct = String(directName ?? "").trim();
+  if (direct) return direct;
+
+  const prefix = code.slice(0, prefixLength);
+  return options.find((item) => String(item.val).trim() === prefix)?.text ?? "";
+};
+
+export const toDisplayPipeRow = (
+  source: PipeSource,
+  index: number,
+  page: number,
+  ctpvOptions: SelectDataType[],
+  sggOptions: SelectDataType[],
+): AgedPipeRow => {
+  const formatted = formatDisplayData(source) as PipeSource;
+  const codePrefix = getRegionCode(source);
+  const instlYmd = formatted.instlYmd ?? source.instlYmd ?? formatted.instl_ymd ?? source.instl_ymd;
+  const invalidInstallYmd = isInvalidInstallYmd(source.instlYmd ?? source.instl_ymd ?? instlYmd);
+  const trimmedUse = String(source.usgCd ?? source.usg_cd ?? "").trim();
+  const trimmedMaterial = String(source.mqltCd ?? source.mqlt_cd ?? "").trim();
+  const pdmtVl = formatted.pdmtVl ?? source.pdmtVl ?? source.pdmt_vl ?? "-";
+  const prlgVl = formatted.prlgVl ?? source.prlgVl ?? source.prlg_vl ?? "-";
+  const fcltMngNo = String(formatted.fcltMngNo ?? source.fcltMngNo ?? source.fclt_mng_no ?? "-");
+
+  return {
+    ...source,
+    ...formatted,
+    fid: String(source.fid ?? ""),
+    lyrTypeNm: String(source.lyrTypeNm ?? AGED_PIPE_LAYER_TYPE),
+    rowNumber: (page - 1) * AGED_PIPE_PAGE_SIZE + index + 1,
+    fcltMngNo,
+    swtrmtFcltCd: source.swtrmtFcltCd ?? fcltMngNo,
+    instlYmd: invalidInstallYmd ? "확인불가" : String(instlYmd ?? "-"),
+    pdmtVl: typeof pdmtVl === "number" ? pdmtVl : String(pdmtVl),
+    prlgVl: typeof prlgVl === "number" ? prlgVl : String(prlgVl),
+    usgCd: useMap.get(trimmedUse) ?? String(formatted.usgCd ?? source.usgCd ?? source.usg_cd ?? "-"),
+    mqltCd:
+      materialMap.get(trimmedMaterial) ??
+      String(formatted.mqltCd ?? source.mqltCd ?? source.mqlt_cd ?? "-"),
+    elapsedYears: getElapsedYears(source.instlYmd ?? source.instl_ymd) ?? "확인불가",
+    ctpvNm: resolveRegionName(
+      codePrefix,
+      formatted.ctpvNm ?? source.ctpvNm ?? source.ctpv_nm,
+      ctpvOptions,
+      2,
+    ),
+    sggNm: resolveRegionName(
+      codePrefix,
+      formatted.sggNm ?? source.sggNm ?? source.sgg_nm,
+      sggOptions,
+      5,
+    ),
+  };
+};
+
+export const toAgedPipeExcelRow = (row: AgedPipeRow) => {
+  const exportRow: Record<string, unknown> = {};
+
+  AGED_PIPE_EXCEL_FIELDS.forEach((field) => {
+    exportRow[field] = row[field] ?? "-";
+  });
+
+  return exportRow;
+};
+
+export const isAgedPipeLayerNode = (node: any) => {
+  const data = node?.data ?? node;
+  const layerName = String(data?.lyrNm ?? node?.text ?? "");
+  const layerTypeName = String(data?.lyrTyNm ?? "");
+
+  return (
+    layerTypeName === "tb_old_pipe" ||
+    layerName.includes("노후관로")
+  );
+};
diff --git a/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx b/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx
new file mode 100644
index 000000000..53cf75946
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { useState } from "react";
+import {
+  ChartColumnBig,
+  ChevronLeft,
+  ChevronRight,
+  History,
+  PanelsTopLeft,
+  PencilRuler,
+  Search,
+  Settings2,
+  TriangleAlert,
+  Waves,
+} from "lucide-react";
+import type { WindowPopupKey } from "@/features/windowPopup/model/popupDefinitions";
+
+type Props = {
+  onOpenPopup: (popupKey: WindowPopupKey) => void;
+  onOpenInfoSearch: () => void;
+};
+
+const ANALYSIS_POPUP_ITEMS: Array<{
+  key: WindowPopupKey | "infoSearch";
+  label: string;
+  icon: typeof ChartColumnBig;
+}> = [
+  { key: "infoSearch", label: "정보검색", icon: Search },
+  { key: "pipeAnalysisPopup", label: "관로분석", icon: ChartColumnBig },
+  { key: "floodPredictionMapPopup", label: "침수예측지도", icon: Waves },
+  { key: "floodHistoryPopup", label: "침수발생이력", icon: History },
+  { key: "gisEditPopup", label: "GIS 편집", icon: PencilRuler },
+  { key: "gisManagementPopup", label: "GIS 관리", icon: Settings2 },
+  { key: "flowRiskPopup", label: "통수 위험", icon: TriangleAlert },
+];
+
+export default function AnalysisPopupMenu({ onOpenPopup, onOpenInfoSearch }: Props) {
+  const [isOpen, setIsOpen] = useState(true);
+  const [activeKey, setActiveKey] = useState<WindowPopupKey | "infoSearch" | null>(null);
+
+  return (
+    <div className="absolute right-[0.55rem] top-[20px] z-[45]">
+      <div className="relative">
+        {isOpen ? (
+          <div className="absolute right-[28px] w-[132px] overflow-hidden rounded-[6px] border border-[#d8dee8] bg-[rgba(255,255,255,0.96)] shadow-[0_8px_18px_rgba(15,23,42,0.14)]">
+            <div className="flex h-[36px] items-center gap-2 border-b border-[#e5eaf1] bg-[#f8fafc] px-[10px] text-[13px] font-bold text-[#1f2937]">
+              <div className="flex items-center gap-2">
+                <PanelsTopLeft className="h-4 w-4 text-[#1e88e5]" />
+                <span>분석도구</span>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-1 p-[6px]">
+              {ANALYSIS_POPUP_ITEMS.map((item) => {
+                const Icon = item.icon;
+                const isActive = activeKey === item.key;
+
+                return (
+                  <button
+                    key={item.key}
+                    type="button"
+                    className={`relative flex h-[34px] items-center gap-[7px] rounded-[5px] border px-[8px] pl-[10px] text-left text-[12px] font-semibold transition ${
+                      isActive
+                        ? "border-[#b9dcff] bg-[#eaf4ff] font-bold text-[#0f5fa8] before:absolute before:left-0 before:top-[7px] before:bottom-[7px] before:w-[3px] before:rounded-r-[2px] before:bg-[#1e88e5]"
+                        : "border-transparent bg-white text-[#374151] hover:border-[#cfe5ff] hover:bg-[#eef6ff] hover:text-[#1e3a5f]"
+                    }`}
+                    onClick={() => {
+                      setActiveKey(item.key);
+
+                      if (item.key === "infoSearch") {
+                        onOpenInfoSearch();
+                        return;
+                      }
+
+                      onOpenPopup(item.key);
+                    }}
+                  >
+                    <Icon
+                      className={`h-[15px] w-[15px] shrink-0 ${
+                        isActive ? "text-[#1e88e5]" : "text-[#64748b]"
+                      }`}
+                    />
+                    <span className="break-keep whitespace-normal">{item.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
+
+        <button
+          type="button"
+          className="absolute right-0 top-0 flex h-[36px] w-[20px] items-center justify-center rounded-[4px] border border-[#d8dee8] bg-[rgba(255,255,255,0.96)] text-[#64748b] shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-[#eaf4ff] hover:text-[#1e88e5]"
+          onClick={() => setIsOpen((value) => !value)}
+          title={isOpen ? "분석 메뉴 접기" : "분석 메뉴 펼치기"}
+          aria-label={isOpen ? "분석 메뉴 접기" : "분석 메뉴 펼치기"}
+        >
+          {isOpen ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/common/index.ts b/apps/sn/app/(map-layout)/map/components/common/index.ts
index d2aed5956..dd20952b3 100644
--- a/apps/sn/app/(map-layout)/map/components/common/index.ts
+++ b/apps/sn/app/(map-layout)/map/components/common/index.ts
@@ -4,6 +4,7 @@ import smh from "../popupComponent/smh";
 import Ssc from "../popupComponent/Ssc";
 import StormWaterPump from "../popupComponent/stormWaterPump";
 import SwtrmtFclt from "../popupComponent/SwtrmtFclt";
+import SwtrmtPrcsZoneAnalysis from "../popupComponent/SwtrmtPrcsZoneAnalysis";
 
 type LayerComponentProps = {
   featureData: any;
@@ -15,6 +16,7 @@ type LayerComponentProps = {
   chmbrXcnts: string;
   chmbrYdnts: string;
   gisObject?: Record<string, any>; // GIS 객체 추가
+  rawFeatureData?: any;
 };
 type LayerContentMap = {
   [key: string]: {
@@ -26,7 +28,7 @@ type LayerContentMap = {
 // 레이어 선택시 변경되는 팝업 컨텐츠 동적으로 변경하도록 작업
 const layerContentMap: LayerContentMap = {
   "하수처리시설": { component: SwtrmtFclt, }, // 디지털 자료관 연계정보가 없으니 일단 주석 처리
-  "하수처리구역": {},
+  "하수처리구역": { component: SwtrmtPrcsZoneAnalysis },
   "우수토실": { component: Ssc, },
   "중점우수토실": { component: Ssc, }, // 중점우수토실 여부 설정
   "하수관로": { component: MsSwagePpl, },
@@ -65,4 +67,4 @@ export const handleInputChange = (section: string,
     updated[index][field as keyof typeof updated[number]] = value;
   }
   target.setData(updated);
-};
\ No newline at end of file
+};
diff --git a/apps/sn/app/(map-layout)/map/components/common/table.ts b/apps/sn/app/(map-layout)/map/components/common/table.ts
index 4e501fb20..81e14a83f 100644
--- a/apps/sn/app/(map-layout)/map/components/common/table.ts
+++ b/apps/sn/app/(map-layout)/map/components/common/table.ts
@@ -3,6 +3,7 @@ export const MsSwagePplCol = [
   { id: 'fclt_mng_no', title: '시설관리번호' },
   { id: 'inst_mng_no', title: '기관관리번호' },
   { id: 'instl_ymd', title: '설치일자' },
+  { id: 'elapsedYears', title: '경과년도' },
   { id: 'mapsht_no', title: '도엽번호' },
   { id: 'pdmt_vl', title: '관경(mm)' },
   { id: 'prlg_vl', title: '연장(m)' },
diff --git a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx
new file mode 100644
index 000000000..c958d5caa
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx
@@ -0,0 +1,366 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { Button, Input } from "@common/components";
+import { UiTable, downloadExcelWithKoreanHeaders } from "@common/business_components/ui";
+import { getData } from "@/components/lib/api";
+import LoadingOverlay from "@/components/ui/LoadingBar";
+import useStore from "@/store/useStore";
+import { useUserStore } from "@/shared/lib/use-user-store";
+import {
+  PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS,
+  PIPE_ANALYSIS_DETAIL_EXCEL_HEADERS,
+  PIPE_ANALYSIS_DETAIL_HEADLIST,
+  PIPE_ANALYSIS_DETAIL_ROW_SELECT_MESSAGE,
+  applyScopeToDetailFilters,
+  buildPipeAnalysisFileDate,
+  buildPipeAnalysisScope,
+  normalizeNumberInput,
+  resolveElapsedYearBucketLabel,
+  resolveMaterialKoreanName,
+  resolveMaterialName,
+  resolvePipeAnalysisTypeLabel,
+  resolveRegionName,
+  toPipeAnalysisDetailViewRows,
+  type PipeAnalysisDetailFilters,
+  type PipeAnalysisDetailRow,
+} from "./pipeAnalysisUtils";
+
+type DetailViewRow = ReturnType<typeof toPipeAnalysisDetailViewRows>[number];
+const PIPE_ANALYSIS_DETAIL_EXPORT_KEYS = [
+  "rowNo",
+  "ctpvNm",
+  "sggNm",
+  "fcltMngNo",
+  "instMngNo",
+  "swtrmtZoneNm",
+  "instlYmd",
+  "useNm",
+  "pdmtVl",
+  "prlgVl",
+  "materialName",
+] as const;
+
+export default function PipeAnalysisDetailPopupPage() {
+  const searchParams = useSearchParams();
+  const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
+  const userInfo = useUserStore((state) => state.userInfo);
+  const scope = useMemo(() => buildPipeAnalysisScope(userInfo), [userInfo]);
+
+  const baseAnalysisType = searchParams.get("analysisType") ?? "YEAR";
+  const baseElapsedYearBucket = searchParams.get("elapsedYearBucket") ?? "";
+  const baseMaterialCode = searchParams.get("materialCode") ?? "0";
+  const [filters, setFilters] = useState<PipeAnalysisDetailFilters>(() =>
+    applyScopeToDetailFilters(
+      {
+        ...PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS,
+        ctpvCd: searchParams.get("ctpvCd") ?? PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS.ctpvCd,
+        sggCd: searchParams.get("sggCd") ?? PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS.sggCd,
+        swtrmtZoneNm: searchParams.get("swtrmtZoneNm") ?? PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS.swtrmtZoneNm,
+        materialCode: baseMaterialCode,
+      },
+      scope,
+    ),
+  );
+  const [rows, setRows] = useState<DetailViewRow[]>([]);
+  const [total, setTotal] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [isLoading, setIsLoading] = useState(false);
+  const initializedRef = useRef(false);
+
+  useEffect(() => {
+    if (ctpv.length === 0) fetchCtpv();
+    if (sgg.length === 0) fetchSgg();
+  }, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
+
+  useEffect(() => {
+    setFilters((current) => applyScopeToDetailFilters(current, scope));
+  }, [scope]);
+
+  const fetchRows = useCallback(
+    async (page: number, nextFilters: PipeAnalysisDetailFilters, size: number) => {
+      const params = new URLSearchParams({
+        analysisType: baseAnalysisType,
+        page: String(page - 1),
+        size: String(size),
+      });
+
+      if (nextFilters.ctpvCd !== "0") params.set("ctpvCd", nextFilters.ctpvCd);
+      if (nextFilters.sggCd !== "0") params.set("sggCd", nextFilters.sggCd);
+      if (nextFilters.swtrmtZoneNm !== "0") params.set("swtrmtZoneNm", nextFilters.swtrmtZoneNm);
+      if (baseElapsedYearBucket) params.set("elapsedYearBucket", baseElapsedYearBucket);
+      if (nextFilters.materialCode !== "0") params.set("materialCode", nextFilters.materialCode);
+      if (nextFilters.useCd !== "0") params.set("useCd", nextFilters.useCd);
+      if (nextFilters.diameterFrom) params.set("diameterFrom", nextFilters.diameterFrom);
+      if (nextFilters.diameterTo) params.set("diameterTo", nextFilters.diameterTo);
+      if (scope.regionCode) params.set("scopeRegionCode", scope.regionCode);
+
+      const response = await getData(`v1/fclts/ppl-analysis/details?${params.toString()}`);
+      const responseRows = Array.isArray(response?.data) ? response.data : [];
+
+      return {
+        rows: toPipeAnalysisDetailViewRows(responseRows as PipeAnalysisDetailRow[], ctpv, sgg),
+        total: Number(response?.count ?? 0),
+      };
+    },
+    [baseAnalysisType, baseElapsedYearBucket, ctpv, scope.regionCode, sgg],
+  );
+
+  const loadRows = useCallback(
+    async (page = 1, nextFilters = filters) => {
+      setIsLoading(true);
+      try {
+        const response = await fetchRows(page, nextFilters, 20);
+        setRows(response.rows);
+        setTotal(response.total);
+        setCurrentPage(page);
+      } catch (error) {
+        console.error("관로현황 조회 중 오류:", error);
+        alert("관로현황 조회 중 오류가 발생했습니다.");
+        setRows([]);
+        setTotal(0);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [fetchRows, filters],
+  );
+
+  useEffect(() => {
+    if (initializedRef.current) return;
+    if (ctpv.length === 0 || sgg.length === 0) return;
+    initializedRef.current = true;
+    void loadRows(1, applyScopeToDetailFilters(filters, scope));
+  }, [ctpv.length, filters, loadRows, scope, sgg.length]);
+
+  const handleSearch = (page = 1) => {
+    setSelectedIndex(-1);
+    void loadRows(page, applyScopeToDetailFilters(filters, scope));
+  };
+
+  const handleRowClick = (index?: number) => {
+    if (typeof index !== "number") return;
+    const row = rows[index];
+    if (!row) return;
+
+    setSelectedIndex(index);
+    const targetWindow = window.opener?.opener ?? window.opener;
+    targetWindow?.postMessage(
+      {
+        type: PIPE_ANALYSIS_DETAIL_ROW_SELECT_MESSAGE,
+        row,
+      },
+      window.location.origin,
+    );
+  };
+
+  const handleDownload = async () => {
+    if (total === 0) {
+      alert("다운로드할 데이터가 없습니다.");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const response = await fetchRows(1, filters, Math.max(total, 1000));
+      const exportRows = response.rows.map((row) => ({
+        rowNo: row.rowNo,
+        ctpvNm: row.ctpvNm,
+        sggNm: row.sggNm,
+        fcltMngNo: row.fcltMngNo,
+        instMngNo: row.instMngNo,
+        swtrmtZoneNm: row.swtrmtZoneNm,
+        instlYmd: row.instlYmd,
+        useNm: row.useNm,
+        pdmtVl: row.pdmtVl,
+        prlgVl: row.prlgVl,
+        materialName: resolveMaterialKoreanName(row.materialCode) || row.materialName,
+      }));
+      const detailHeaderRange = `A1:${String.fromCharCode(64 + PIPE_ANALYSIS_DETAIL_EXPORT_KEYS.length)}1`;
+      await downloadExcelWithKoreanHeaders({
+        data: exportRows as unknown as JSON[],
+        fileName: `관로분석_관로현황_${buildPipeAnalysisFileDate()}`,
+        sheetNameArray: ["관로현황"],
+        headerRange: detailHeaderRange,
+        headerMapping: PIPE_ANALYSIS_DETAIL_EXCEL_HEADERS,
+      });
+    } catch (error) {
+      console.error("관로현황 다운로드 중 오류:", error);
+      alert("관로현황 다운로드 중 오류가 발생했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const materialOptions = useMemo(() => {
+    const options = [
+      { value: "0", label: "전체" },
+      ...Array.from(
+        new Set(
+          rows
+            .map((row) => String(row.materialCode ?? "").trim())
+            .filter((value) => value && value !== "0"),
+        ),
+      ).map((value) => ({
+        value,
+        label: resolveMaterialName(value),
+      })),
+    ];
+
+    if (
+      baseMaterialCode &&
+      baseMaterialCode !== "0" &&
+      !options.some((item) => item.value === baseMaterialCode)
+    ) {
+      options.push({
+        value: baseMaterialCode,
+        label: resolveMaterialName(baseMaterialCode),
+      });
+    }
+
+    return options;
+  }, [baseMaterialCode, rows]);
+
+  const titleSuffix = useMemo(() => {
+    const locationParts: string[] = [];
+    const resolvedCtpvName = rows[0]?.ctpvNm || resolveRegionName(filters.ctpvCd, ctpv, 2);
+    const resolvedSggName = rows[0]?.sggNm || resolveRegionName(filters.sggCd, sgg, 5);
+    const resolvedZoneName =
+      (filters.swtrmtZoneNm && filters.swtrmtZoneNm !== "0" ? filters.swtrmtZoneNm : rows[0]?.swtrmtZoneNm) || "";
+
+    if (resolvedCtpvName && resolvedCtpvName !== "-") locationParts.push(resolvedCtpvName);
+    if (resolvedSggName && resolvedSggName !== "-") locationParts.push(resolvedSggName);
+    if (resolvedZoneName && resolvedZoneName !== "-" && resolvedZoneName !== "0") locationParts.push(resolvedZoneName);
+
+    const parts = [];
+    if (locationParts.length > 0) parts.push(locationParts.join(" "));
+    const analysisTypeLabel = resolvePipeAnalysisTypeLabel(baseAnalysisType);
+    if (analysisTypeLabel) parts.push(analysisTypeLabel);
+    if (baseElapsedYearBucket) parts.push(resolveElapsedYearBucketLabel(baseElapsedYearBucket));
+    if (baseMaterialCode && baseMaterialCode !== "0") parts.push(resolveMaterialName(baseMaterialCode));
+    return parts.length > 0 ? ` (${parts.join(" / ")})` : "";
+  }, [baseAnalysisType, baseElapsedYearBucket, baseMaterialCode, ctpv, filters.ctpvCd, filters.sggCd, filters.swtrmtZoneNm, rows, sgg]);
+
+  return (
+    <main className="flex h-screen flex-col overflow-hidden bg-white">
+      <LoadingOverlay isLoading={isLoading} />
+      <header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
+        <h1 className="text-[1.45rem] font-semibold text-white">관로현황{titleSuffix}</h1>
+      </header>
+
+      <section className="overflow-y-auto p-4">
+        <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_110px_110px_auto] md:items-end">
+          <label className="block">
+            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">용도</div>
+            <select
+              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              value={filters.useCd}
+              onChange={(event) =>
+                setFilters((current) => ({
+                  ...current,
+                  useCd: event.target.value,
+                }))
+              }
+            >
+              <option value="0">전체</option>
+              <option value="SBA001">합류관</option>
+              <option value="SBA002">차집관</option>
+              <option value="SBA003">우수관</option>
+              <option value="SBA004">오수관</option>
+            </select>
+          </label>
+
+          <label className="block">
+            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">관재질</div>
+            <select
+              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              value={filters.materialCode}
+              onChange={(event) =>
+                setFilters((current) => ({
+                  ...current,
+                  materialCode: event.target.value,
+                }))
+              }
+            >
+              {materialOptions.map((item) => (
+                <option key={item.value} value={item.value}>
+                  {item.label}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="block">
+            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">관경 시작</div>
+            <Input
+              className="h-10 !text-[1.1rem]"
+              value={filters.diameterFrom}
+              onChange={(event) =>
+                setFilters((current) => ({
+                  ...current,
+                  diameterFrom: normalizeNumberInput(event.target.value),
+                }))
+              }
+              onKeyDown={(event) => {
+                if (event.key === "Enter") handleSearch(1);
+              }}
+            />
+          </label>
+
+          <label className="block">
+            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">관경 종료</div>
+            <Input
+              className="h-10 !text-[1.1rem]"
+              value={filters.diameterTo}
+              onChange={(event) =>
+                setFilters((current) => ({
+                  ...current,
+                  diameterTo: normalizeNumberInput(event.target.value),
+                }))
+              }
+              onKeyDown={(event) => {
+                if (event.key === "Enter") handleSearch(1);
+              }}
+            />
+          </label>
+
+          <div className="flex flex-wrap justify-end gap-2 md:pr-3">
+            <Button
+              type="button"
+              size="sm"
+              color="primary"
+              className="h-10 px-5 !text-[1.1rem]"
+              onClick={() => handleSearch(1)}
+            >
+              조회
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              color="green"
+              className="h-10 px-5 !text-[1.1rem]"
+              onClick={() => void handleDownload()}
+            >
+              다운로드
+            </Button>
+          </div>
+        </div>
+
+        <UiTable<DetailViewRow>
+          headName={<>관로현황 조회 결과 총 {total.toLocaleString()}건</>}
+          tableData={rows}
+          headlist={PIPE_ANALYSIS_DETAIL_HEADLIST}
+          pageSize={20}
+          total={total}
+          cellClick={(index) => handleRowClick(index)}
+          onPageChange={(page) => handleSearch(page)}
+          curPage={currentPage}
+          index={selectedIndex}
+          widthFixed={true}
+        />
+      </section>
+    </main>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx
new file mode 100644
index 000000000..97cb703cd
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx
@@ -0,0 +1,526 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Table, TableBody, TableCell, TableHeader, TableHead, TableRow } from "@common/components";
+import { UiTable, downloadExcelWithKoreanHeaders } from "@common/business_components/ui";
+import { getData } from "@/components/lib/api";
+import LoadingOverlay from "@/components/ui/LoadingBar";
+import useStore from "@/store/useStore";
+import { useUserStore } from "@/shared/lib/use-user-store";
+import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+import {
+  PIPE_ANALYSIS_SUMMARY_DEFAULT_FILTERS,
+  PIPE_ANALYSIS_TYPE_OPTIONS,
+  applyScopeToSummaryFilters,
+  buildPipeAnalysisFileDate,
+  buildPipeAnalysisYearMaterialGroups,
+  buildPipeAnalysisScope,
+  buildPipeAnalysisSummaryDownloadHeaders,
+  buildPipeAnalysisSummaryHeadList,
+  buildPipeAnalysisSummaryViewRows,
+  fetchPipeAnalysisZoneOptions,
+  resolvePipeAnalysisTypeLabel,
+  type PipeAnalysisMaterialColumn,
+  type PipeAnalysisSummaryFilters,
+  type PipeAnalysisSummaryResponse,
+  type PipeAnalysisSummaryViewRow,
+  type PipeAnalysisYearMaterialGroup,
+} from "./pipeAnalysisUtils";
+
+const SUMMARY_FILE_PREFIX: Record<string, string> = {
+  YEAR: "관로분석_경과년도별",
+  MATERIAL: "관로분석_관재질별",
+  YEAR_MATERIAL: "관로분석_경과년도별_관재질별",
+};
+
+const toExcelColumnName = (index: number) => {
+  let current = index;
+  let result = "";
+
+  while (current > 0) {
+    const remainder = (current - 1) % 26;
+    result = String.fromCharCode(65 + remainder) + result;
+    current = Math.floor((current - 1) / 26);
+  }
+
+  return result || "A";
+};
+
+const formatGridNumber = (value: unknown) => {
+  const num = Number(value ?? 0);
+  if (!Number.isFinite(num)) {
+    return String(value ?? "");
+  }
+  return num.toLocaleString("ko-KR", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 3,
+  });
+};
+
+export default function PipeAnalysisPopupPage() {
+  const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
+  const userInfo = useUserStore((state) => state.userInfo);
+  const scope = useMemo(() => buildPipeAnalysisScope(userInfo), [userInfo]);
+  const [draftFilters, setDraftFilters] = useState<PipeAnalysisSummaryFilters>(() =>
+    applyScopeToSummaryFilters(PIPE_ANALYSIS_SUMMARY_DEFAULT_FILTERS, scope),
+  );
+  const [appliedFilters, setAppliedFilters] = useState<PipeAnalysisSummaryFilters>(() =>
+    applyScopeToSummaryFilters(PIPE_ANALYSIS_SUMMARY_DEFAULT_FILTERS, scope),
+  );
+  const [materialColumns, setMaterialColumns] = useState<PipeAnalysisMaterialColumn[]>([]);
+  const [rows, setRows] = useState<PipeAnalysisSummaryViewRow[]>([]);
+  const [zoneOptions, setZoneOptions] = useState<Array<{ value: string; label: string }>>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const initializedRef = useRef(false);
+
+  useEffect(() => {
+    if (ctpv.length === 0) fetchCtpv();
+    if (sgg.length === 0) fetchSgg();
+  }, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
+
+  useEffect(() => {
+    setDraftFilters((current) => applyScopeToSummaryFilters(current, scope));
+    setAppliedFilters((current) => applyScopeToSummaryFilters(current, scope));
+  }, [scope]);
+
+  useEffect(() => {
+    let mounted = true;
+
+    (async () => {
+      try {
+        const zones = await fetchPipeAnalysisZoneOptions({
+          ctpvCd: draftFilters.ctpvCd,
+          sggCd: draftFilters.sggCd,
+          scopeRegionCode: scope.regionCode,
+        });
+        if (!mounted) return;
+        setZoneOptions([{ value: "0", label: "전체" }, ...zones]);
+      } catch (error) {
+        console.error("처리구역 목록 조회 중 오류:", error);
+        if (!mounted) return;
+        setZoneOptions([{ value: "0", label: "전체" }]);
+      }
+    })();
+
+    return () => {
+      mounted = false;
+    };
+  }, [draftFilters.ctpvCd, draftFilters.sggCd, scope.regionCode]);
+
+  const fetchSummary = useCallback(
+    async (nextFilters: PipeAnalysisSummaryFilters) => {
+      const params = new URLSearchParams({
+        analysisType: nextFilters.analysisType,
+      });
+
+      if (nextFilters.ctpvCd !== "0") params.set("ctpvCd", nextFilters.ctpvCd);
+      if (nextFilters.sggCd !== "0") params.set("sggCd", nextFilters.sggCd);
+      if (nextFilters.swtrmtZoneNm !== "0") params.set("swtrmtZoneNm", nextFilters.swtrmtZoneNm);
+      if (nextFilters.scopeRegionCode) params.set("scopeRegionCode", nextFilters.scopeRegionCode);
+
+      const response = (await getData(
+        `v1/fclts/ppl-analysis/summaries?${params.toString()}`,
+      )) as PipeAnalysisSummaryResponse;
+
+      const nextMaterialColumns = Array.isArray(response?.materialColumns)
+        ? response.materialColumns
+        : [];
+      setMaterialColumns(nextMaterialColumns);
+      setRows(buildPipeAnalysisSummaryViewRows(response, ctpv, sgg));
+    },
+    [ctpv, sgg],
+  );
+
+  const handleSearch = useCallback(
+    async (nextFilters = draftFilters) => {
+      setIsLoading(true);
+      try {
+        const scopedFilters = applyScopeToSummaryFilters(nextFilters, scope);
+        setDraftFilters(scopedFilters);
+        setAppliedFilters(scopedFilters);
+        await fetchSummary(scopedFilters);
+      } catch (error) {
+        console.error("관로분석 집계 조회 중 오류:", error);
+        alert("관로분석 집계 조회 중 오류가 발생했습니다.");
+        setRows([]);
+        setMaterialColumns([]);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [draftFilters, fetchSummary, scope],
+  );
+
+  useEffect(() => {
+    if (initializedRef.current) return;
+    if (ctpv.length === 0 || sgg.length === 0) return;
+
+    initializedRef.current = true;
+    void handleSearch(applyScopeToSummaryFilters(draftFilters, scope));
+  }, [ctpv.length, draftFilters, handleSearch, scope, sgg.length]);
+
+  const handleDownload = async () => {
+    if (rows.length === 0) {
+      alert("다운로드할 데이터가 없습니다.");
+      return;
+    }
+
+    try {
+      const exportHeadList = buildPipeAnalysisSummaryHeadList(
+        appliedFilters.analysisType,
+        materialColumns,
+      );
+      const headerRange = `A1:${toExcelColumnName(exportHeadList.length)}1`;
+      const mergeRanges = appliedFilters.analysisType === "YEAR_MATERIAL"
+        ? (() => {
+          const ranges: string[] = [];
+          let currentRow = 2;
+
+          yearMaterialGroups.forEach((group) => {
+            const rowSpan = group.rows.length;
+            if (rowSpan > 1) {
+              ["A", "B", "C", "D", "E"].forEach((column) => {
+                ranges.push(`${column}${currentRow}:${column}${currentRow + rowSpan - 1}`);
+              });
+            }
+            currentRow += rowSpan;
+          });
+
+          return ranges;
+        })()
+        : [];
+      const exportRows = appliedFilters.analysisType === "YEAR_MATERIAL"
+        ? yearMaterialGroups.flatMap((group) =>
+          group.rows.map((yearRow, rowIndex) => {
+            const exportRow: Record<string, unknown> = {
+              rowNo: rowIndex === 0 ? group.rowNo : "",
+              ctpvNm: rowIndex === 0 ? group.ctpvNm : "",
+              sggNm: rowIndex === 0 ? group.sggNm : "",
+              swtrmtZoneNm: rowIndex === 0 ? group.swtrmtZoneNm : "",
+              totalLengthKm: rowIndex === 0 ? group.totalLengthKm : "",
+              elapsedYearLabel: yearRow.elapsedYearLabel,
+            };
+
+            materialColumns.forEach((column) => {
+              exportRow[column.key] = yearRow.metrics[column.key] ?? 0;
+            });
+
+            return exportRow;
+          }),
+        )
+        : rows.map((row) => {
+          const exportRow: Record<string, unknown> = {};
+          exportHeadList.forEach((head) => {
+            exportRow[head.id] = row[head.id];
+          });
+          return exportRow;
+        });
+      await downloadExcelWithKoreanHeaders({
+        data: exportRows as JSON[],
+        fileName: `${SUMMARY_FILE_PREFIX[appliedFilters.analysisType]}_${buildPipeAnalysisFileDate()}`,
+        sheetNameArray: ["관로분석 현황"],
+        headerRange,
+        headerMapping: buildPipeAnalysisSummaryDownloadHeaders(appliedFilters.analysisType, materialColumns),
+        mergeRanges,
+      });
+    } catch (error) {
+      console.error("관로분석 집계 다운로드 중 오류:", error);
+      alert("관로분석 집계 다운로드 중 오류가 발생했습니다.");
+    }
+  };
+
+  const handleCellClick = (index?: number, columnId?: string) => {
+    if (typeof index !== "number" || !columnId) return;
+    const row = rows[index];
+    if (!row) return;
+    if (row.__isNoZone || row.__isSummaryTotal) return;
+    const cellFilter = row.__cellFilters[columnId];
+    if (!cellFilter) return;
+
+    openWindowPopup("pipeAnalysisDetailPopup", {
+      analysisType: appliedFilters.analysisType,
+      ctpvCd: String(row.__base.ctpvCd || appliedFilters.ctpvCd),
+      sggCd: String(row.__base.sggCd || appliedFilters.sggCd || "0"),
+      swtrmtZoneNm: String(row.__base.swtrmtZoneNm || appliedFilters.swtrmtZoneNm),
+      elapsedYearBucket: cellFilter.elapsedYearBucket ?? "",
+      materialCode: cellFilter.materialCode ?? "",
+      scopeRegionCode: scope.regionCode,
+    });
+  };
+
+  const handleYearMaterialCellClick = (
+    group: PipeAnalysisYearMaterialGroup,
+    row: PipeAnalysisYearMaterialGroup["rows"][number],
+    columnId: string,
+  ) => {
+    const cellFilter = row.cellFilters[columnId];
+    if (!cellFilter) return;
+
+    openWindowPopup("pipeAnalysisDetailPopup", {
+      analysisType: appliedFilters.analysisType,
+      ctpvCd: String(group.base.ctpvCd || appliedFilters.ctpvCd),
+      sggCd: String(group.base.sggCd || appliedFilters.sggCd || "0"),
+      swtrmtZoneNm: String(group.base.swtrmtZoneNm || appliedFilters.swtrmtZoneNm),
+      elapsedYearBucket: cellFilter.elapsedYearBucket ?? "",
+      materialCode: cellFilter.materialCode ?? "",
+      scopeRegionCode: scope.regionCode,
+    });
+  };
+
+  const headList = useMemo(
+    () => buildPipeAnalysisSummaryHeadList(appliedFilters.analysisType, materialColumns),
+    [appliedFilters.analysisType, materialColumns],
+  );
+
+  const yearMaterialGroups = useMemo(
+    () => appliedFilters.analysisType === "YEAR_MATERIAL"
+      ? buildPipeAnalysisYearMaterialGroups(rows, materialColumns)
+      : [],
+    [appliedFilters.analysisType, materialColumns, rows],
+  );
+
+  const useHorizontalScrollTable = appliedFilters.analysisType !== "YEAR";
+
+  const sggOptions = useMemo(
+    () =>
+      draftFilters.ctpvCd === "0"
+        ? sgg
+        : sgg.filter((item) => String(item.val).startsWith(draftFilters.ctpvCd.slice(0, 2))),
+    [draftFilters.ctpvCd, sgg],
+  );
+
+  return (
+    <main className="flex h-screen flex-col overflow-hidden bg-white">
+      <LoadingOverlay isLoading={isLoading} />
+      <header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
+        <h1 className="text-[1.45rem] font-semibold text-white">관로분석</h1>
+      </header>
+
+      <section className="overflow-y-auto p-4">
+        <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-end">
+          <label className="block">
+            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
+            <select
+              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              value={draftFilters.ctpvCd}
+              disabled={scope.ctpvLocked}
+              onChange={(event) =>
+                setDraftFilters((current) => ({
+                  ...current,
+                  ctpvCd: event.target.value,
+                  sggCd: "0",
+                  swtrmtZoneNm: "0",
+                }))
+              }
+            >
+              <option value="0">전체</option>
+              {ctpv.map((item) => (
+                <option key={item.val} value={String(item.val)}>
+                  {item.text}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="block">
+            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
+            <select
+              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              value={draftFilters.sggCd}
+              disabled={scope.sggLocked}
+              onChange={(event) =>
+                setDraftFilters((current) => ({
+                  ...current,
+                  sggCd: event.target.value,
+                  swtrmtZoneNm: "0",
+                }))
+              }
+            >
+              <option value="0">전체</option>
+              {sggOptions.map((item) => (
+                <option key={item.val} value={String(item.val)}>
+                  {item.text}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="block">
+            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">처리구역</div>
+            <select
+              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              value={draftFilters.swtrmtZoneNm}
+              onChange={(event) =>
+                setDraftFilters((current) => ({
+                  ...current,
+                  swtrmtZoneNm: event.target.value,
+                }))
+              }
+            >
+              {zoneOptions.map((item) => (
+                <option key={item.value} value={item.value}>
+                  {item.label}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="block">
+            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">분석구분</div>
+            <select
+              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              value={draftFilters.analysisType}
+              onChange={(event) =>
+                setDraftFilters((current) => ({
+                  ...current,
+                  analysisType: event.target.value as PipeAnalysisSummaryFilters["analysisType"],
+                }))
+              }
+            >
+              {PIPE_ANALYSIS_TYPE_OPTIONS.map((item) => (
+                <option key={item.value} value={item.value}>
+                  {item.label}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <div className="flex flex-wrap justify-end gap-2 md:pr-3">
+            <Button
+              type="button"
+              size="sm"
+              color="primary"
+              className="h-10 px-5 !text-[1.1rem]"
+              onClick={() => void handleSearch()}
+            >
+              조회
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              color="green"
+              className="h-10 px-5 !text-[1.1rem]"
+              onClick={() => void handleDownload()}
+            >
+              다운로드
+            </Button>
+          </div>
+        </div>
+
+        {appliedFilters.analysisType === "YEAR_MATERIAL" ? (
+          <>
+            <div className="card-header">
+              <h3 className="hidden">
+                寃쎄낵?꾨룄&?ъ쭏 愿€濡쒗쁽??  珥?{yearMaterialGroups.length.toLocaleString("ko-KR")}嫄?
+              </h3>
+              <h3 className="text-2xl font-medium text-label">
+                {resolvePipeAnalysisTypeLabel(appliedFilters.analysisType)} 관로현황 총 {yearMaterialGroups.length.toLocaleString("ko-KR")}건
+              </h3>
+            </div>
+            <div className="card !p-0r !m-[1.2rem] overflow-x-auto">
+              <Table variant="secondary" className="w-max min-w-full caption-bottom text-sm">
+                <TableHeader className="font-bold">
+                  <TableRow>
+                    {headList.map((head) => (
+                      <TableHead
+                        key={head.id}
+                        className={`border border-border bg-[#eaf3fb] px-4 py-[1.2rem] text-[1.3rem] font-medium text-[#647784] ${
+                          head.align === "right" ? "text-right" : "text-center"
+                        }`}
+                      >
+                        {head.title}
+                      </TableHead>
+                    ))}
+                  </TableRow>
+                </TableHeader>
+                <TableBody className="text-center">
+                  {yearMaterialGroups.length > 0 ? (
+                    yearMaterialGroups.flatMap((group) =>
+                      group.rows.map((yearRow, rowIndex) => (
+                        <TableRow key={`${group.base.ctpvCd}-${group.base.sggCd}-${group.base.swtrmtZoneNm}-${yearRow.elapsedYearBucket}`}>
+                          {rowIndex === 0 ? (
+                            <>
+                              <TableCell rowSpan={group.rows.length} className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]">
+                                {group.rowNo}
+                              </TableCell>
+                              <TableCell rowSpan={group.rows.length} className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]">
+                                {group.ctpvNm}
+                              </TableCell>
+                              <TableCell rowSpan={group.rows.length} className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]">
+                                {group.sggNm}
+                              </TableCell>
+                              <TableCell rowSpan={group.rows.length} className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]">
+                                {group.swtrmtZoneNm}
+                              </TableCell>
+                              <TableCell rowSpan={group.rows.length} className="border border-border px-2 py-[1.2rem] text-right text-[1.3rem]">
+                                {formatGridNumber(group.totalLengthKm)}
+                              </TableCell>
+                            </>
+                          ) : null}
+                          <TableCell className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]">
+                            {yearRow.elapsedYearLabel}
+                          </TableCell>
+                          {materialColumns.map((column) => {
+                            const value = Number(yearRow.metrics[column.key] ?? 0);
+                            const isClickable = value > 0 && Boolean(yearRow.cellFilters[column.key]);
+                            return (
+                              <TableCell
+                                key={`${group.base.ctpvCd}-${group.base.sggCd}-${group.base.swtrmtZoneNm}-${yearRow.elapsedYearBucket}-${column.key}`}
+                                className={`border border-border px-2 py-[1.2rem] text-right text-[1.3rem] ${
+                                  isClickable ? "cursor-pointer font-semibold text-blue-700 underline underline-offset-2" : ""
+                                }`}
+                                onClick={() => {
+                                  if (isClickable) {
+                                    handleYearMaterialCellClick(group, yearRow, column.key);
+                                  }
+                                }}
+                              >
+                                {formatGridNumber(value)}
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      ))
+                    )
+                  ) : (
+                    <TableRow>
+                      <TableCell colSpan={headList.length} className="h-24 border border-border text-center text-[1.3rem] text-gray-500">
+                        議고쉶??寃곌낵媛€ ?놁뒿?덈떎.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </>
+        ) : null}
+
+        <UiTable<PipeAnalysisSummaryViewRow>
+          className={appliedFilters.analysisType === "YEAR_MATERIAL"
+            ? "hidden"
+            : useHorizontalScrollTable
+              ? "[&>div.relative.w-full]:overflow-x-auto [&>div.relative.w-full]:overflow-y-visible"
+              : ""}
+          headName={
+            appliedFilters.analysisType === "YEAR_MATERIAL"
+              ? "경과년도&재질 관로현황"
+              : "관로분석현황"
+          }
+          tableData={rows}
+          headlist={headList}
+          pageSize={Math.max(rows.length, 1)}
+          total={rows.length}
+          cellClick={(index, columnId) => handleCellClick(index, columnId)}
+          onPageChange={() => undefined}
+          curPage={1}
+          widthFixed={!useHorizontalScrollTable}
+          cellClassName={(row, columnId) =>
+            !row.__isNoZone && row.__cellFilters[columnId]
+              ? "cursor-pointer font-semibold text-blue-700 underline underline-offset-2"
+              : ""
+          }
+        />
+      </section>
+    </main>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/pipeAnalysisUtils.ts b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/pipeAnalysisUtils.ts
new file mode 100644
index 000000000..fddb1717c
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/pipeAnalysisUtils.ts
@@ -0,0 +1,680 @@
+"use client";
+
+import type { SelectDataType } from "@common/business_components";
+import type { IUserInfo } from "@/shared/store";
+import {
+  MS_SWAGE_PPL_CODES,
+  MS_SWAGE_PPL_USE_CODES,
+} from "../common/table";
+
+export const PIPE_ANALYSIS_DETAIL_ROW_SELECT_MESSAGE = "SN_PIPE_ANALYSIS_DETAIL_ROW_SELECT";
+
+export type PipeAnalysisType = "YEAR" | "MATERIAL" | "YEAR_MATERIAL";
+
+export type PipeAnalysisSummaryFilters = {
+  analysisType: PipeAnalysisType;
+  ctpvCd: string;
+  sggCd: string;
+  swtrmtZoneNm: string;
+  scopeRegionCode: string;
+};
+
+export type PipeAnalysisDetailFilters = {
+  ctpvCd: string;
+  sggCd: string;
+  swtrmtZoneNm: string;
+  useCd: string;
+  materialCode: string;
+  diameterFrom: string;
+  diameterTo: string;
+};
+
+export type PipeAnalysisMaterialColumn = {
+  key: string;
+  materialCode: string;
+  materialName: string;
+};
+
+export type PipeAnalysisSummaryRow = {
+  rowNo: number;
+  ctpvCd: string;
+  ctpvNm?: string;
+  sggCd: string;
+  sggNm?: string;
+  swtrmtZoneNm: string;
+  totalLengthKm: number;
+  elapsedYearBucket?: string;
+  elapsedYearLabel?: string;
+  metrics: Record<string, number>;
+};
+
+export type PipeAnalysisSummaryResponse = {
+  analysisType: PipeAnalysisType;
+  materialColumns: PipeAnalysisMaterialColumn[];
+  data: PipeAnalysisSummaryRow[];
+};
+
+export type PipeAnalysisDetailRow = {
+  rowNo: number;
+  fid: string;
+  lyrTypeNm: string;
+  fcltMngNo: string;
+  instMngNo: string;
+  mngInstCd: string;
+  ctpvCd: string;
+  ctpvNm?: string;
+  sggCd: string;
+  sggNm?: string;
+  swtrmtZoneNm: string;
+  instlYmd: string;
+  elapsedYears?: number;
+  useCd: string;
+  materialCode: string;
+  pdmtVl?: number | string;
+  prlgVl?: number | string;
+};
+
+export type PipeAnalysisZoneOption = {
+  value: string;
+  label: string;
+  ctpvCd: string;
+  sggCd: string;
+};
+
+export type PipeAnalysisScope = {
+  regionCode: string;
+  ctpvCd: string;
+  sggCd: string;
+  ctpvLocked: boolean;
+  sggLocked: boolean;
+};
+
+export type PipeAnalysisCellFilter = {
+  elapsedYearBucket?: string;
+  materialCode?: string;
+};
+
+export type PipeAnalysisSummaryViewRow = Record<string, unknown> & {
+  __isNoZone: boolean;
+  __isSummaryTotal: boolean;
+  __cellFilters: Record<string, PipeAnalysisCellFilter>;
+  __base: {
+    ctpvCd: string;
+    sggCd: string;
+    swtrmtZoneNm: string;
+  };
+};
+
+export type PipeAnalysisYearMaterialGroupRow = {
+  elapsedYearBucket: string;
+  elapsedYearLabel: string;
+  metrics: Record<string, number>;
+  cellFilters: Record<string, PipeAnalysisCellFilter>;
+};
+
+export type PipeAnalysisYearMaterialGroup = {
+  rowNo: number;
+  ctpvNm: string;
+  sggNm: string;
+  swtrmtZoneNm: string;
+  totalLengthKm: number;
+  base: {
+    ctpvCd: string;
+    sggCd: string;
+    swtrmtZoneNm: string;
+  };
+  rows: PipeAnalysisYearMaterialGroupRow[];
+};
+
+const materialMap = new Map(MS_SWAGE_PPL_CODES.map((item) => [item.val.trim(), item.text]));
+const useMap = new Map(MS_SWAGE_PPL_USE_CODES.map((item) => [item.val.trim(), item.text]));
+
+export const PIPE_ANALYSIS_TYPE_OPTIONS: Array<{ value: PipeAnalysisType; label: string }> = [
+  { value: "YEAR", label: "경과년도별" },
+  { value: "MATERIAL", label: "재질별" },
+  { value: "YEAR_MATERIAL", label: "경과년도&재질" },
+];
+
+export const PIPE_ANALYSIS_SUMMARY_DEFAULT_FILTERS: PipeAnalysisSummaryFilters = {
+  analysisType: "YEAR",
+  ctpvCd: "0",
+  sggCd: "0",
+  swtrmtZoneNm: "0",
+  scopeRegionCode: "",
+};
+
+export const PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS: PipeAnalysisDetailFilters = {
+  ctpvCd: "0",
+  sggCd: "0",
+  swtrmtZoneNm: "0",
+  useCd: "0",
+  materialCode: "0",
+  diameterFrom: "",
+  diameterTo: "",
+};
+
+export const PIPE_ANALYSIS_FIXED_YEAR_COLUMNS = [
+  { key: "LT10", title: "10년 미만(km)" },
+  { key: "Y10_20", title: "10년~20년(km)" },
+  { key: "Y20_30", title: "20년~30년(km)" },
+  { key: "GE30", title: "30년 이상(km)" },
+  { key: "UNKNOWN", title: "확인 불가(km)" },
+];
+
+const elapsedYearBucketLabelMap: Record<string, string> = {
+  LT10: "10년 미만",
+  Y10_20: "10년~20년",
+  Y20_30: "20년~30년",
+  GE30: "30년 이상",
+  UNKNOWN: "확인 불가",
+};
+
+const YEAR_MATERIAL_BASE_BUCKETS = ["LT10", "Y10_20", "Y20_30", "GE30"];
+
+export const PIPE_ANALYSIS_DETAIL_HEADLIST = [
+  { id: "rowNo", title: "NO", widthPercent: 6 },
+  { id: "ctpvNm", title: "시도", widthPercent: 9 },
+  { id: "sggNm", title: "시군구", widthPercent: 10 },
+  { id: "fcltMngNo", title: "시설관리번호", widthPercent: 15 },
+  { id: "instMngNo", title: "기관관리번호", widthPercent: 15 },
+  { id: "swtrmtZoneNm", title: "처리구역", widthPercent: 12 },
+  { id: "instlYmd", title: "설치일자", widthPercent: 10 },
+  { id: "useNm", title: "용도", widthPercent: 9 },
+  { id: "pdmtVl", title: "관경(mm)", widthPercent: 8, align: "right" },
+  { id: "prlgVl", title: "연장(m)", widthPercent: 8, align: "right" },
+  { id: "materialName", title: "관재질", widthPercent: 12 },
+];
+
+export const buildPipeAnalysisScope = (userInfo: IUserInfo | null): PipeAnalysisScope => {
+  const admin = userInfo?.adminRoleYn === "Y";
+  if (admin) {
+    return {
+      regionCode: "",
+      ctpvCd: "",
+      sggCd: "",
+      ctpvLocked: false,
+      sggLocked: false,
+    };
+  }
+
+  const digits = String(userInfo?.laeSeCd ?? "").replace(/[^0-9]/g, "");
+  if (digits.length >= 5) {
+    return {
+      regionCode: digits.slice(0, 5),
+      ctpvCd: digits.slice(0, 2),
+      sggCd: digits.slice(0, 5),
+      ctpvLocked: true,
+      sggLocked: true,
+    };
+  }
+  if (digits.length >= 2) {
+    return {
+      regionCode: digits.slice(0, 2),
+      ctpvCd: digits.slice(0, 2),
+      sggCd: "",
+      ctpvLocked: true,
+      sggLocked: false,
+    };
+  }
+
+  return {
+    regionCode: "",
+    ctpvCd: "",
+    sggCd: "",
+    ctpvLocked: false,
+    sggLocked: false,
+  };
+};
+
+export const applyScopeToSummaryFilters = (
+  filters: PipeAnalysisSummaryFilters,
+  scope: PipeAnalysisScope,
+): PipeAnalysisSummaryFilters => {
+  const next = { ...filters, scopeRegionCode: scope.regionCode };
+  if (scope.ctpvCd) {
+    next.ctpvCd = scope.ctpvCd;
+  }
+  if (scope.sggCd) {
+    next.sggCd = scope.sggCd;
+  } else if (scope.ctpvCd && !next.sggCd.startsWith(scope.ctpvCd)) {
+    next.sggCd = "0";
+  }
+  return next;
+};
+
+export const applyScopeToDetailFilters = (
+  filters: PipeAnalysisDetailFilters,
+  scope: PipeAnalysisScope,
+): PipeAnalysisDetailFilters => {
+  const next = { ...filters };
+  if (scope.ctpvCd) {
+    next.ctpvCd = scope.ctpvCd;
+  }
+  if (scope.sggCd) {
+    next.sggCd = scope.sggCd;
+  } else if (scope.ctpvCd && !next.sggCd.startsWith(scope.ctpvCd)) {
+    next.sggCd = "0";
+  }
+  return next;
+};
+
+export const buildPipeAnalysisSummaryHeadList = (
+  analysisType: PipeAnalysisType,
+  materialColumns: PipeAnalysisMaterialColumn[],
+) => {
+  const common = [
+    { id: "rowNo", title: "NO", widthPercent: 6 },
+    { id: "ctpvNm", title: "시도", widthPercent: 10 },
+    { id: "sggNm", title: "시군구", widthPercent: 10 },
+    { id: "swtrmtZoneNm", title: "처리구역", widthPercent: 14 },
+    { id: "totalLengthKm", title: "합계(km)", widthPercent: 10, align: "right" },
+  ];
+
+  if (analysisType === "YEAR") {
+    return [
+      ...common,
+      ...PIPE_ANALYSIS_FIXED_YEAR_COLUMNS.map((column) => ({
+        id: column.key,
+        title: column.title,
+        widthPercent: 12,
+        align: "right" as const,
+      })),
+    ];
+  }
+
+  const materialHeads = materialColumns.map((column) => ({
+    id: column.key,
+    title: resolveMaterialColumnName(column),
+    widthPercent: 12,
+    align: "right" as const,
+  }));
+
+  if (analysisType === "YEAR_MATERIAL") {
+    return [
+      ...common,
+      { id: "elapsedYearLabel", title: "경과년도", widthPercent: 12 },
+      ...materialHeads,
+    ];
+  }
+
+  return [...common, ...materialHeads];
+};
+
+export const buildPipeAnalysisSummaryViewRows = (
+  response: PipeAnalysisSummaryResponse,
+  ctpvOptions: SelectDataType[],
+  sggOptions: SelectDataType[],
+): PipeAnalysisSummaryViewRow[] => {
+  const materialCodes = response.materialColumns.map((column) => column.key);
+
+  return response.data.map((row) => {
+    const isNoZone = String(row.swtrmtZoneNm ?? "").trim() === "NO_ZONE";
+    const isSummaryTotal = !String(row.ctpvCd ?? "").trim()
+      && String(row.swtrmtZoneNm ?? "").trim() === "-";
+    const viewRow: PipeAnalysisSummaryViewRow = {
+      rowNo: row.rowNo,
+      ctpvNm: isNoZone ? "전체" : row.ctpvNm || resolveRegionName(row.ctpvCd, ctpvOptions, 2),
+      sggNm: isNoZone ? "-" : row.sggNm || resolveRegionName(row.sggCd, sggOptions, 5),
+      swtrmtZoneNm: isNoZone ? "-" : row.swtrmtZoneNm || "-",
+      totalLengthKm: row.totalLengthKm ?? 0,
+      elapsedYearBucket: row.elapsedYearBucket ?? "",
+      elapsedYearLabel: row.elapsedYearLabel ?? "",
+      __isNoZone: isNoZone,
+      __isSummaryTotal: isSummaryTotal,
+      __cellFilters: {},
+      __base: {
+        ctpvCd: isNoZone ? "" : row.ctpvCd,
+        sggCd: isNoZone ? "" : row.sggCd,
+        swtrmtZoneNm: isNoZone ? "NO_ZONE" : row.swtrmtZoneNm,
+      },
+    };
+
+    if (isSummaryTotal) {
+      viewRow.ctpvNm = row.ctpvNm || viewRow.ctpvNm;
+      viewRow.sggNm = row.sggNm || "-";
+      viewRow.swtrmtZoneNm = "-";
+      viewRow.__base.ctpvCd = "";
+      viewRow.__base.sggCd = "";
+      viewRow.__base.swtrmtZoneNm = "";
+    }
+
+    if (response.analysisType === "YEAR") {
+      if (isNoZone || isSummaryTotal) {
+        PIPE_ANALYSIS_FIXED_YEAR_COLUMNS.forEach((column) => {
+          viewRow[column.key] = Number(row.metrics?.[column.key] ?? 0);
+        });
+        return viewRow;
+      }
+      PIPE_ANALYSIS_FIXED_YEAR_COLUMNS.forEach((column) => {
+        const value = Number(row.metrics?.[column.key] ?? 0);
+        viewRow[column.key] = value;
+        if (value > 0) {
+          viewRow.__cellFilters[column.key] = {
+            elapsedYearBucket: column.key,
+          };
+        }
+      });
+      return viewRow;
+    }
+
+    const columns = response.analysisType === "YEAR_MATERIAL"
+      ? materialCodes
+      : materialCodes;
+
+    columns.forEach((columnKey) => {
+      const value = Number(row.metrics?.[columnKey] ?? 0);
+      viewRow[columnKey] = value;
+      if (!isNoZone && !isSummaryTotal && value > 0) {
+        viewRow.__cellFilters[columnKey] = {
+          elapsedYearBucket: response.analysisType === "YEAR_MATERIAL" ? row.elapsedYearBucket : undefined,
+          materialCode: columnKey === "OTHER" ? "" : columnKey,
+        };
+      }
+    });
+
+    return viewRow;
+  });
+};
+
+export const buildPipeAnalysisYearMaterialGroups = (
+  rows: PipeAnalysisSummaryViewRow[],
+  materialColumns: PipeAnalysisMaterialColumn[],
+): PipeAnalysisYearMaterialGroup[] => {
+  const materialKeys = materialColumns.map((column) => column.key);
+  const groupMap = new Map<string, PipeAnalysisYearMaterialGroup>();
+
+  rows.forEach((row) => {
+    if (row.__isNoZone || row.__isSummaryTotal) {
+      return;
+    }
+
+    const groupKey = `${row.__base.ctpvCd}|${row.__base.sggCd}|${row.__base.swtrmtZoneNm}`;
+    const elapsedYearBucket = String(row.elapsedYearBucket ?? "").trim();
+
+    let group = groupMap.get(groupKey);
+    if (!group) {
+      group = {
+        rowNo: groupMap.size + 1,
+        ctpvNm: String(row.ctpvNm ?? ""),
+        sggNm: String(row.sggNm ?? ""),
+        swtrmtZoneNm: String(row.swtrmtZoneNm ?? ""),
+        totalLengthKm: Number(row.totalLengthKm ?? 0),
+        base: {
+          ctpvCd: row.__base.ctpvCd,
+          sggCd: row.__base.sggCd,
+          swtrmtZoneNm: row.__base.swtrmtZoneNm,
+        },
+        rows: [],
+      };
+      groupMap.set(groupKey, group);
+    }
+
+    const metrics: Record<string, number> = {};
+    materialKeys.forEach((materialKey) => {
+      metrics[materialKey] = Number(row[materialKey] ?? 0);
+    });
+
+    group.rows.push({
+      elapsedYearBucket,
+      elapsedYearLabel: String(row.elapsedYearLabel ?? resolveElapsedYearBucketLabel(elapsedYearBucket)),
+      metrics,
+      cellFilters: row.__cellFilters,
+    });
+  });
+
+  return Array.from(groupMap.values()).map((group) => {
+    const rowByBucket = new Map(group.rows.map((row) => [row.elapsedYearBucket, row]));
+    const orderedBuckets = [...YEAR_MATERIAL_BASE_BUCKETS];
+
+    if (rowByBucket.has("UNKNOWN")) {
+      orderedBuckets.push("UNKNOWN");
+    }
+
+    const normalizedRows = orderedBuckets.map((bucket) => {
+      const existing = rowByBucket.get(bucket);
+      if (existing) {
+        return existing;
+      }
+
+      const emptyMetrics: Record<string, number> = {};
+      materialKeys.forEach((materialKey) => {
+        emptyMetrics[materialKey] = 0;
+      });
+
+      return {
+        elapsedYearBucket: bucket,
+        elapsedYearLabel: resolveElapsedYearBucketLabel(bucket),
+        metrics: emptyMetrics,
+        cellFilters: {},
+      };
+    });
+
+    return {
+      ...group,
+      rows: normalizedRows,
+    };
+  });
+};
+
+export const toPipeAnalysisDetailViewRows = (
+  rows: PipeAnalysisDetailRow[],
+  ctpvOptions: SelectDataType[],
+  sggOptions: SelectDataType[],
+) =>
+  rows.map((row) => ({
+    ...row,
+    ctpvNm: row.ctpvNm || resolveRegionName(row.ctpvCd, ctpvOptions, 2),
+    sggNm: row.sggNm || resolveRegionName(row.sggCd, sggOptions, 5),
+    useNm: resolveUseName(row.useCd),
+    materialName: resolveMaterialName(row.materialCode),
+  }));
+
+export const buildPipeAnalysisSummaryDownloadHeaders = (
+  analysisType: PipeAnalysisType,
+  materialColumns: PipeAnalysisMaterialColumn[],
+) => {
+  const headers: Record<string, string> = {
+    rowNo: "NO",
+    ctpvNm: "시도",
+    sggNm: "시군구",
+    swtrmtZoneNm: "처리구역",
+    totalLengthKm: "합계(km)",
+  };
+
+  if (analysisType === "YEAR_MATERIAL") {
+    headers.elapsedYearLabel = "경과년도";
+  }
+
+  if (analysisType === "YEAR") {
+    PIPE_ANALYSIS_FIXED_YEAR_COLUMNS.forEach((column) => {
+      headers[column.key] = column.title;
+    });
+    return headers;
+  }
+
+  materialColumns.forEach((column) => {
+    headers[column.key] = resolveMaterialColumnName(column);
+  });
+  return headers;
+};
+
+export const PIPE_ANALYSIS_DETAIL_EXCEL_HEADERS = {
+  rowNo: "NO",
+  ctpvNm: "시도",
+  sggNm: "시군구",
+  fcltMngNo: "시설관리번호",
+  instMngNo: "기관관리번호",
+  swtrmtZoneNm: "처리구역",
+  instlYmd: "설치일자",
+  useNm: "용도",
+  pdmtVl: "관경(mm)",
+  prlgVl: "연장(m)",
+  materialName: "관재질",
+};
+
+export const resolveMaterialName = (materialCode?: string) => {
+  const code = String(materialCode ?? "").trim();
+  if (!code) return "-";
+  if (code === "OTHER") return "기타";
+  return materialMap.get(code) ?? code;
+};
+
+/**
+ * 관재질 라벨에서 영문 약어/코드를 걷어내고 엑셀 헤더용 한글명을 우선 추출한다.
+ * - `염화비닐관(PVC)` -> `염화비닐관`
+ * - `PCF관(강판보강 PE 나선형관)` -> `강판보강 나선형관`
+ */
+const toKoreanMaterialLabel = (value?: string) => {
+  const normalized = String(value ?? "").trim();
+  if (!normalized) return "";
+
+  const withoutParenthesis = normalized
+    .replace(/\s*\([^)]*\)\s*/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+  const withoutAsciiToken = withoutParenthesis
+    .replace(/[A-Za-z0-9-]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+
+  if (/[가-힣]/.test(withoutAsciiToken)) {
+    return withoutAsciiToken;
+  }
+
+  if (/[가-힣]/.test(withoutParenthesis)) {
+    return withoutParenthesis;
+  }
+
+  const parenthesisMatches = Array.from(normalized.matchAll(/\(([^)]*)\)/g))
+    .map((match) => String(match[1] ?? "").trim())
+    .filter(Boolean);
+  const koreanParenthesisText = parenthesisMatches.find((text) => /[가-힣]/.test(text));
+
+  if (koreanParenthesisText) {
+    const simplifiedParenthesisText = koreanParenthesisText
+      .replace(/[A-Za-z0-9-]+/g, " ")
+      .replace(/\s+/g, " ")
+      .trim();
+    return simplifiedParenthesisText || koreanParenthesisText;
+  }
+
+  return normalized;
+};
+
+export const resolveMaterialColumnName = (column: PipeAnalysisMaterialColumn) => {
+  const rawName = String(column.materialName ?? "").trim();
+  const rawCode = String(column.materialCode ?? "").trim();
+  const rawKey = String(column.key ?? "").trim();
+  const mappedName = resolveMaterialName(rawCode || rawKey);
+  const candidates = [
+    toKoreanMaterialLabel(mappedName),
+    toKoreanMaterialLabel(rawName),
+    mappedName,
+    rawName,
+    rawCode,
+    rawKey,
+  ].filter(Boolean);
+
+  return candidates[0] ?? "-";
+};
+
+export const resolveMaterialKoreanName = (materialCode?: string) => {
+  const resolved = resolveMaterialName(materialCode);
+  const koreanLabel = toKoreanMaterialLabel(resolved);
+  return koreanLabel || resolved;
+};
+
+export const resolveElapsedYearBucketLabel = (bucket?: string) => {
+  const normalized = String(bucket ?? "").trim();
+  return elapsedYearBucketLabelMap[normalized] ?? normalized;
+};
+
+export const resolvePipeAnalysisTypeLabel = (analysisType?: string) => {
+  const normalized = String(analysisType ?? "").trim();
+  return (
+    PIPE_ANALYSIS_TYPE_OPTIONS.find((option) => option.value === normalized)?.label
+    ?? normalized
+  );
+};
+
+export const resolveUseName = (useCode?: string) => {
+  const code = String(useCode ?? "").trim();
+  if (!code) return "-";
+  return useMap.get(code) ?? code;
+};
+
+export const resolveRegionName = (
+  code: string,
+  options: SelectDataType[],
+  prefixLength: number,
+) => {
+  const normalized = String(code ?? "").trim();
+  if (!normalized) return "-";
+  const prefix = normalized.slice(0, prefixLength);
+  return options.find((item) => String(item.val).trim() === prefix)?.text ?? prefix;
+};
+
+export const normalizeNumberInput = (value: string) => value.replace(/[^0-9]/g, "");
+
+export const buildPipeAnalysisFileDate = () => new Date().toISOString().slice(0, 10);
+
+export const fetchPipeAnalysisZoneOptions = async ({
+  ctpvCd,
+  sggCd,
+  scopeRegionCode,
+}: {
+  ctpvCd: string;
+  sggCd: string;
+  scopeRegionCode?: string;
+}): Promise<PipeAnalysisZoneOption[]> => {
+  const filters: string[] = [];
+  if (sggCd && sggCd !== "0") {
+    filters.push(`sgg_cd='${sggCd}'`);
+  } else if (ctpvCd && ctpvCd !== "0") {
+    filters.push(`ctpv_cd='${ctpvCd}'`);
+  } else if (scopeRegionCode) {
+    if (scopeRegionCode.length >= 5) {
+      filters.push(`sgg_cd='${scopeRegionCode.slice(0, 5)}'`);
+    } else if (scopeRegionCode.length >= 2) {
+      filters.push(`ctpv_cd='${scopeRegionCode.slice(0, 2)}'`);
+    }
+  }
+
+  const params = new URLSearchParams({
+    service: "WFS",
+    version: "1.0.0",
+    request: "GetFeature",
+    typeName: "hasudo:tb_ms_swage_prcs_zone",
+    outputFormat: "application/json",
+    propertyName: "ctpv_cd,sgg_cd,swtrmt_zone_nm",
+  });
+
+  if (filters.length > 0) {
+    params.set("CQL_FILTER", filters.join(" and "));
+  }
+
+  const response = await fetch(`/geoserver/hasudo/ows?${params.toString()}`);
+  if (!response.ok) {
+    throw new Error("처리구역 목록을 불러오지 못했습니다.");
+  }
+
+  const data = await response.json();
+  const features = Array.isArray(data?.features) ? data.features : [];
+  const dedupMap = new Map<string, PipeAnalysisZoneOption>();
+
+  features.forEach((feature: any) => {
+    const properties = feature?.properties ?? {};
+    const zoneName = String(properties.swtrmt_zone_nm ?? "").trim();
+    if (!zoneName) return;
+    dedupMap.set(zoneName, {
+      value: zoneName,
+      label: zoneName,
+      ctpvCd: String(properties.ctpv_cd ?? "").trim(),
+      sggCd: String(properties.sgg_cd ?? "").trim(),
+    });
+  });
+
+  return Array.from(dedupMap.values()).sort((left, right) =>
+    left.label.localeCompare(right.label, "ko"),
+  );
+};
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx
index f908fe98b..6a11df513 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx
@@ -13,29 +13,30 @@
  * - 위경도로 강우시 미처리 하수 목록 조회: GET /api/v1/onsemiro/getSwgRainsByGeomety (sewerage-service)
  * - 강우시 월류 하수 관리 모니터링 조회: GET /api/v1/onsemiro/swgRain/{adstDstrCd}/{manageNo}/mntrngs (sewerage-service)
  */
-import { UiModal, UiTable } from '@common/business_components/ui';
+'use client';
+import { UiTable } from '@common/business_components/ui';
 import { Button, TableHead, TableRow } from '@common/components/ui';
 import React, { useState, useEffect } from 'react';
 import { untrtSwgRainCol3, untrtSwgRainCol4, untrtSwgRainCol5 } from '../common/table';
 import { VerticalTable } from '@/components/ui/verticalTable';
-import { getData } from "@/components/lib/api";
+import { getRawJson } from "@/components/lib/api";
 import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
 import { Label } from '@radix-ui/react-label';
+import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
 
 const inputColumn = [
   { id: "prrtymngYn", title: "중점여부", type: "select", options: ["우수토실", "중점우수토실"] },
   { id: "swtrmtZoneNm", title: "처리구역", type: "input" },
 ];
 
-const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
+const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick, renderMode = 'inline' }: {
   featureData: any,
   isMainSsc?: boolean,
   chmbrXcnts?: string,
   chmbrYdnts?: string,
-  onSaveClick?: () => void
+  onSaveClick?: () => void,
+  renderMode?: 'inline' | 'popup'
 }) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isDataLoaded, setIsDataLoaded] = useState(false);
   const [formData, setFormData] = useState<any>({});
   const [rainMeasureData, setRainMeasureData] = useState<any>({}); // 강우, 측정 정보
   const [mntrngsData, setMntrngsData] = useState<any[]>([]); // 수량/수질측정 정보
@@ -65,22 +66,7 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
         size: '3',
       });
 
-      let result;
-      const res = await fetch(`/sewerage-service/api/v1/onsemiro/getSwgRainsByGeomety?${queryParams.toString()}`, {
-        method: "GET",
-      });
-      if (res.ok) {
-        // 응답이 비어있는지 확인
-        const contentLength = res.headers.get('content-length');
-        if (contentLength === '0') result = null;
-
-        // 응답 텍스트를 먼저 가져와서 빈 문자열인지 확인
-        const text = await res.text();
-        if (!text || text.trim() === '') result = null;
-
-        // JSON 파싱 시도
-        result = JSON.parse(text);
-      }
+      const result = await getRawJson(`/sewerage-service/api/v1/onsemiro/getSwgRainsByGeomety?${queryParams.toString()}`);
 
       // helper: "YYYY-MM-DD HH:MM:SS" -> "MM-DD HH:MM"
       const formatNoYearNoSec = (val: any) => {
@@ -138,22 +124,7 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
         size: '3',
       });
 
-      let result;
-      const res = await fetch(`/sewerage-service/api/v1/onsemiro/swgRain/${adstDstrCd}/${manageNo}/mntrngs?${queryParams.toString()}`, {
-        method: "GET",
-      });
-      if (res.ok) {
-        // 응답이 비어있는지 확인
-        const contentLength = res.headers.get('content-length');
-        if (contentLength === '0') result = null;
-
-        // 응답 텍스트를 먼저 가져와서 빈 문자열인지 확인
-        const text = await res.text();
-        if (!text || text.trim() === '') result = null;
-
-        // JSON 파싱 시도
-        result = JSON.parse(text);
-      }
+      const result = await getRawJson(`/sewerage-service/api/v1/onsemiro/swgRain/${adstDstrCd}/${manageNo}/mntrngs?${queryParams.toString()}`);
 
       // 각 아이템 전처리
       const processedDataArray = result.content.map((data: any) => {
@@ -181,14 +152,15 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
     }
   }, [chmbrXcnts, chmbrYdnts]);
 
-  const openModal = () => {
-    setIsModalOpen(true);
-  };
+  const openDetailPopup = () => {
+    const popupWindow = openWindowPopup("sscDetail", {
+      chmbrXcnts,
+      chmbrYdnts,
+      sourcePath: window.location.pathname,
+    });
 
-  const closeModal = () => {
-    setIsModalOpen(false);
-    if (!isDataLoaded) {
-      setTimeout(() => setIsDataLoaded(true), 100);
+    if (!popupWindow) {
+      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
     }
   };
 
@@ -322,37 +294,28 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
         />
       )}
 
-      {isMainSsc && (
+      {isMainSsc && renderMode !== 'popup' && (
         <div>
           <div className="card-header">
             <h3 className="text-2xl mx-3 font-medium text-label">중점우수토실 운영정보</h3>
           </div>
           <Button
             className='mx-auto block w-64 mt-3 py-2 text-white rounded-sm text-sm font-medium hover:bg-blue-700 bg-blue-600'
-            onClick={openModal}
+            onClick={openDetailPopup}
           >
             상세보기
           </Button>
+        </div>
+      )}
 
-          <UiModal
-            open={isModalOpen}
-            onOpenChange={setIsModalOpen}
-            bodyClass={`
-              h-[100vh]
-              w-[60vw]
-              max-w-none
-              max-h-none
-              overflow-y-auto
-              z-[101]
-            `}
-            body={renderModalBody()}
-            noHeaderYn='Y'
-            noFooterYn='Y'
-          />
+      {isMainSsc && renderMode === 'popup' && (
+        <div className="min-h-dvh bg-white p-4">
+          <h1 className="mb-3 text-2xl font-semibold text-gray-900">중점우수토실 운영정보</h1>
+          {renderModalBody()}
         </div>
       )}
     </div>
   )
 }
 
-export default Ssc
\ No newline at end of file
+export default Ssc
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtFclt.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtFclt.tsx
index 8b029673f..78e082414 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtFclt.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtFclt.tsx
@@ -9,11 +9,10 @@
  * - 조회 버튼을 통한 모달 표시 및 ReportTab 연동
  */
 'use client'
-import React, { useState } from 'react'
+import React from 'react'
 import { VerticalTable } from '@/components/ui/verticalTable';
-import { UiModal } from '@common/business_components/ui';
 import { Button } from '@common/components/ui';
-import ReportTab from '../../searchModal/reportTab';
+import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
 
 // 하수처리시설
 const headList = [
@@ -21,16 +20,26 @@ const headList = [
 ];
 
 const SwtrmtFclt = ({ gisObject }: { gisObject: any }) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
   const ctpvNm = gisObject?.ctpv_nm;
   const sggNm = gisObject?.sgg_nm;
 
+  const handleOpenReportPopup = () => {
+    const popupWindow = openWindowPopup("reportTab", {
+      ctpvNm,
+      sggNm,
+      sourcePath: window.location.pathname,
+    });
+
+    if (!popupWindow) {
+      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+    }
+  };
+
   return (
     <div>
       <VerticalTable
         children={{
-          title: <Button className="gray" onClick={() => setIsModalOpen(true)}>조회</Button>
+          title: <Button className="gray" onClick={handleOpenReportPopup}>조회</Button>
         }}
         headName='디지털 자료관 연계정보'
         tableData={[]}
@@ -43,31 +52,8 @@ const SwtrmtFclt = ({ gisObject }: { gisObject: any }) => {
           throw new Error("Function not implemented.");
         }}
       />
-      <UiModal
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        headerTitle="하수도정비 기본계획보고서"
-        headerTitleClass="text-3xl font-semibold text-gray-700"
-        bodyClass={`
-                h-[100vh]
-                w-[60vw]
-                max-w-[60vw]
-                max-h-[100vh]
-                overflow-hidden
-                z-[101]
-              `}
-        body={
-          <ReportTab
-            open={isModalOpen}
-            isSearch={false}
-            ctpvNm={ctpvNm}
-            sggNm={sggNm}
-          />
-        }
-        useDirectRender={true}
-      />
     </div >
   )
 }
 
-export default SwtrmtFclt
\ No newline at end of file
+export default SwtrmtFclt
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtPrcsZoneAnalysis.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtPrcsZoneAnalysis.tsx
new file mode 100644
index 000000000..b02977a09
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtPrcsZoneAnalysis.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { Table, TableBody, TableCell, TableRow } from "@common/components";
+import { fetchSwtrmtPrcsZoneAnalysis } from "./swtrmtPrcsZoneAnalysisApi";
+import type { SwtrmtPrcsZoneAnalysisMetric, SwtrmtPrcsZoneAnalysisResponse } from "./swtrmtPrcsZoneAnalysisApi";
+
+const analysisRows: { key: keyof NonNullable<SwtrmtPrcsZoneAnalysisResponse["analysis"]>; title: string }[] = [
+  { key: "total", title: "전체" },
+  { key: "combined", title: "합류관" },
+  { key: "rain", title: "우수관" },
+  { key: "sewage", title: "오수관" },
+];
+
+const formatValue = (value: unknown, unit = "") => {
+  if (value === null || value === undefined || value === "") return "데이터 없음";
+
+  const numberValue = typeof value === "number" ? value : Number(String(value).replaceAll(",", ""));
+  if (!Number.isNaN(numberValue) && Number.isFinite(numberValue)) {
+    const formatted = numberValue.toLocaleString("ko-KR", { maximumFractionDigits: 2 });
+    return unit ? `${formatted}${unit}` : formatted;
+  }
+
+  return String(value);
+};
+
+const getMetric = (
+  analysis: SwtrmtPrcsZoneAnalysisResponse["analysis"] | undefined,
+  key: keyof NonNullable<SwtrmtPrcsZoneAnalysisResponse["analysis"]>
+): SwtrmtPrcsZoneAnalysisMetric => analysis?.[key] ?? {};
+
+const metricGroups: {
+  title: string;
+  field: keyof SwtrmtPrcsZoneAnalysisMetric;
+}[] = [
+  { title: "평균매설년도(년)", field: "avgInstlYear" },
+  { title: "최장매설년도(년)", field: "oldestInstlYear" },
+  { title: "최신매설년도(년)", field: "latestInstlYear" },
+];
+
+const MetricVerticalGrid = ({
+  title,
+  field,
+  analysis,
+  isLoading,
+}: {
+  title: string;
+  field: keyof SwtrmtPrcsZoneAnalysisMetric;
+  analysis: SwtrmtPrcsZoneAnalysisResponse["analysis"] | undefined;
+  isLoading?: boolean;
+}) => (
+  <div className="mb-4 last:mb-0">
+    <div className="text-xl mx-3 mb-2 mt-1 font-medium text-label">{title}</div>
+    <Table variant="secondary">
+      <TableBody className="text-center">
+        {analysisRows.map((row) => {
+          const metric = getMetric(analysis, row.key);
+          return (
+            <TableRow key={`${title}-${row.key}`}>
+              <TableCell className="font-bold bg-blue-100 text-[13px] w-[120px] whitespace-nowrap">
+                {row.title}
+              </TableCell>
+              <TableCell className="text-[13px]">{isLoading ? "" : formatValue(metric[field])}</TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  </div>
+);
+
+const SwtrmtPrcsZoneAnalysis = ({
+  featureData,
+  rawFeatureData,
+}: {
+  featureData: any;
+  rawFeatureData?: any;
+}) => {
+  const [analysisData, setAnalysisData] = useState<SwtrmtPrcsZoneAnalysisResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const requestKey = useMemo(() => {
+    const rawValues = rawFeatureData?.values_ ?? rawFeatureData ?? {};
+    return [
+      rawFeatureData?.getId?.(),
+      rawFeatureData?.id_,
+      rawFeatureData?.fid,
+      rawValues?.fid,
+      rawValues?.swtrmt_zone_sn,
+      rawValues?.swtrmt_fclt_cd,
+      featureData?.fid,
+      featureData?.swtrmtZoneSn,
+      featureData?.swtrmt_zone_sn,
+      featureData?.swtrmtFcltCd,
+      featureData?.swtrmt_fclt_cd,
+    ].filter(Boolean).join("|");
+  }, [featureData, rawFeatureData]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchAnalysis = async () => {
+      setIsLoading(true);
+      setErrorMessage("");
+      setAnalysisData(null);
+
+      try {
+        const data = await fetchSwtrmtPrcsZoneAnalysis(rawFeatureData, featureData);
+        if (!isMounted) return;
+
+        if (!data) {
+          setErrorMessage("분석정보 조회에 필요한 처리구역 식별값이 없습니다.");
+          return;
+        }
+
+        setAnalysisData(data);
+      } catch (error) {
+        if (!isMounted) return;
+        console.error("하수처리구역 분석정보 로딩 중 오류:", error);
+        setErrorMessage("분석정보를 불러오지 못했습니다.");
+      } finally {
+        if (isMounted) setIsLoading(false);
+      }
+    };
+
+    fetchAnalysis();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [featureData, rawFeatureData, requestKey]);
+
+  return (
+    <>
+      <div className="card-header flex items-center justify-between">
+        <h3 className="text-2xl mx-3 font-medium text-label">처리구역내 관로분석정보</h3>
+      </div>
+      <div className="card !mx-[1.2rem] !mb-[1.2rem] !mt-1 !p-0">
+        <div className="px-3 pb-3 pt-1">
+          {!isLoading && errorMessage && (
+            <div className="py-6 text-center text-[13px] text-gray-500">{errorMessage}</div>
+          )}
+          {(isLoading || !errorMessage) && (
+            metricGroups.map((group) => (
+              <MetricVerticalGrid
+                key={group.field}
+                title={group.title}
+                field={group.field}
+                analysis={analysisData?.analysis}
+                isLoading={isLoading}
+              />
+            ))
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SwtrmtPrcsZoneAnalysis;
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
index 3836b87f6..91495f412 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
@@ -7,14 +7,12 @@ 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 type { TInftwtAnls } from './aplcnYms';
 import * as fn from './aplcnYms';
-import { useInfilChartModalStore } from '../chartModalStore';
 
 type ModalOpenProp = {
   pplMngNo?: string; // 관로관리번호
@@ -28,7 +26,6 @@ type DataType = {
 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[]>([]);
@@ -66,12 +63,6 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
     setInftwtQty('0');
   };
 
-  useEffect(() => {
-    if (!isModalOpen) {
-      resetState(); // 모달이 닫힐 때 리셋
-    }
-  }, [isModalOpen]);
-
   const handleAplcnYmChange = async (val: string | number) => {
     const selectedValue = String(val);
 
@@ -276,21 +267,10 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
   );
 
   return (
-    <UiModal
-      open={isModalOpen}
-      onOpenChange={setIsModalOpen}
-      headerTitle=""
-      bodyClass={`
-        w-[78vw]
-        max-w-none
-        min-w-[1000px]
-        min-h-[72vh]
-        overflow-visible
-        z-[50]
-      `}
-      body={renderBody()}
-      noFooterYn="Y"
-    />
+    <div className="min-h-dvh bg-white p-4">
+      <h1 className="mb-3 text-2xl font-semibold text-gray-900">침입수 분석</h1>
+      {renderBody()}
+    </div>
   );
 };
 
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
index aa622be1b..ec1cec8b1 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
@@ -7,14 +7,12 @@ 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 type { TRdiiAnls } from './aplcnYms';
 import * as fn from './aplcnYms';
-import { useRdiiChartModalStore } from '../chartModalStore';
 
 type ModalOpenProp = {
   pplMngNo?: string; // 관로관리번호
@@ -29,7 +27,6 @@ type LineBarChartData = {
 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[]>([]);
@@ -72,12 +69,6 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
     setTotalVolume('0');// 총체적 m³/mm 초기화
   };
 
-  useEffect(() => {
-    if (!isModalOpen) {
-      resetState();
-    }
-  }, [isModalOpen]);
-
   const handleAplcnYmChange = async (val: string | number) => {
     const selectedValue = String(val);
 
@@ -336,21 +327,10 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
   );
 
   return (
-    <UiModal
-      open={isModalOpen}
-      onOpenChange={setIsModalOpen}
-      headerTitle=""
-      bodyClass={`
-        w-[78vw]
-        max-w-none
-        min-w-[1100px]
-        min-h-[72vh]
-        overflow-visible
-        z-[50]
-      `}
-      body={renderBody()}
-      noFooterYn="Y"
-    />
+    <div className="min-h-dvh bg-white p-4">
+      <h1 className="mb-3 text-2xl font-semibold text-gray-900">RDII 분석</h1>
+      {renderBody()}
+    </div>
   );
 };
 
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx
index 11e61b006..36cbb46f6 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx
@@ -23,7 +23,6 @@
  */
 'use client'
 import { getData, postData } from "@/components/lib/api";
-import Modal from "@/components/ui/modal";
 import { VerticalTable } from "@/components/ui/verticalTable";
 import { useGisContext } from "@common/business_components/ui/map/Gis";
 import { Button } from "@common/components/ui";
@@ -34,13 +33,12 @@ 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';
-import RdiiChart from './chart/rdiiChart';
-import { useInfilChartModalStore, useRdiiChartModalStore } from "./chartModalStore";
 import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
 import { codeMapper } from "../common/codeMapper";
 import LoadingOverlay from '@/components/ui/LoadingBar';
 import { searchUpperPpls } from "./smh";
+import { getElapsedYearsDisplayText, isInvalidInstallYmd } from "../agedPipe/agedPipeUtils";
+import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
 
 const linkedFacilityHighlightStyle = new Style({
   image: new CircleStyle({
@@ -63,7 +61,6 @@ const linkedFacilityHighlightStyle = new Style({
   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; };
   const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
@@ -74,12 +71,9 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
   const [buttonChk, setButtonChk] = useState(true)
   const [fetchData, setFetchData] = useState<any>(); // api 호출여부
   const contentRef = useRef<HTMLDivElement>(null);
-  const [isModalOpen, setIsModalOpen] = useState(false); // 모달 열기 상태
   const [isMainSsc, setIsMainSsc] = useState(false); // 중점우수토실 여부
   const [isDrtwSewagePump, setIsDrtwSewagePump] = useState(false); // 오수펌프장 여부
   // 🎯 InfilChart 및 RdiiChart 관련 상태 추가
-  const { setIsOpen: setIsModalInfil } = useInfilChartModalStore();
-  const { setIsOpen: setIsModalRdii } = useRdiiChartModalStore();
   const [isClicked, setIsClicked] = useState(true); // 클릭 여부 상태
   const [isLoading, setIsLoading] = useState(false); // 로딩 상태
   const [chmbrXcnts, setChmbrXcnts] = useState<string>(''); // 로딩 상태
@@ -88,7 +82,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
   const linkedFacilityOriginalStyleRef = useRef<any>(null);
 
   // 🎯 관로관리번호 추출
-  const pplMngNo = featureData?.values_?.fclt_mng_no || "";
+  const pplMngNo = featureData?.values_?.fclt_mng_no || featureData?.fcltMngNo || "";
 
   const featureId = typeof featureData.getId === 'function'
     ? featureData.getId()
@@ -258,7 +252,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
         case 'tb_ms_swage_ppl': {
           result = '하수관로';
           setHeadlist(MsSwagePplCol2)
-          setLayerSpecificNm(featureData.swtrmtFcltCd);
+          setLayerSpecificNm(featureData.fcltMngNo ?? featureData.swtrmtFcltCd);
           break;
         }
         case 'tb_ms_swage_mhl': {
@@ -341,6 +335,14 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
 
         // 🎯 기본 데이터 포맷팅
         const formattedData = formatDisplayData(data);
+        if (selectedLayerName === '하수관로') {
+          const installYmd = data.instl_ymd ?? data.instlYmd;
+          formattedData.elapsedYears = getElapsedYearsDisplayText(installYmd);
+          if (isInvalidInstallYmd(installYmd)) {
+            formattedData.instl_ymd = "확인불가";
+            formattedData.instlYmd = "확인불가";
+          }
+        }
 
         setFetchData(formattedData);
         setTableData(formattedData);
@@ -407,8 +409,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
 
         // 자체입력정보 API 엔드포인트 선택
         let apiEndpoint = '';
-        const fcltMngNo = featureData?.values_?.fclt_mng_no || null;
-        const mngInstCd = featureData?.values_?.mng_inst_cd || null;
+        const fcltMngNo = featureData?.values_?.fclt_mng_no || featureData?.fcltMngNo || null;
+        const mngInstCd = featureData?.values_?.mng_inst_cd || featureData?.mngInstCd || null;
         if (selectedLayerName === '하수관로') apiEndpoint = `v1/fcltppl/${fcltMngNo}/${mngInstCd}`;
         else if (selectedLayerName === '우수토실') apiEndpoint = `v1/fcltstofcbr/${fcltMngNo}/${mngInstCd}`;
         else if (selectedLayerName === '하수펌프장') apiEndpoint = `v1/fcltpump/${fcltMngNo}/${mngInstCd}`;
@@ -461,16 +463,9 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
 
   // 저장 시 모달 띄우기
   const handleSaveClick = () => {
-    setIsModalOpen(true); // 모달 열기
-  };
-
-  const handleModalSave = () => {
-    setIsModalOpen(false); // 모달 닫기
-    btnClickEvent(); // 저장 이벤트 실행
-  };
-
-  const handleModalClose = () => {
-    setIsModalOpen(false); // 모달 닫기
+    const shouldSave = window.confirm('정보를 저장하시겠습니까?');
+    if (!shouldSave) return;
+    btnClickEvent();
   };
 
   // 저장 버튼 이벤트
@@ -557,14 +552,26 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
           {/* 하수관로일 때만 Infil/RDII 버튼 표시 */}
           {layerNm === '하수관로' && (
             <>
-              <Button onClick={() => setIsModalInfil(true)}
+              <Button
+                onClick={() => {
+                  const popupWindow = openWindowPopup("infilChart", { pplMngNo });
+                  if (!popupWindow) {
+                    alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+                  }
+                }}
                 className="py-1 text-xl text-blue-600 border border-blue-600 rounded hover:bg-gray-700"
                 color="white"
                 size="sm"
               >
                 침입수분석
               </Button>
-              <Button onClick={() => setIsModalRdii(true)}
+              <Button
+                onClick={() => {
+                  const popupWindow = openWindowPopup("rdiiChart", { pplMngNo });
+                  if (!popupWindow) {
+                    alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+                  }
+                }}
                 className="py-1 text-xl text-gray-600 border border-gray-600 rounded hover:bg-gray-700 mr-4"
                 color="white"
                 size="sm"
@@ -598,7 +605,11 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
       </div>
       <div className="overflow-y-auto overflow-x-hidden flex-1" ref={contentRef}>
         <VerticalTable
-          headName='기본정보'
+          headName={
+            layerNm === '하수관로' && tableData?.elapsedYears
+              ? <>기본정보 <span className="ml-2 rounded-sm bg-red-50 px-2 py-0.5 text-[1.1rem] font-semibold text-red-700">경과년도 {tableData.elapsedYears}</span></>
+              : '기본정보'
+          }
           tableName1={layerNm === '중점우수토실' ? "측정지점" : undefined}
           tableData={[tableData]}
           headlist={headlist}
@@ -617,7 +628,6 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
           total2={0}
           isEditable2={buttonChk}
         />
-        <Modal isModalOpen={isModalOpen} title="자체입력정보 저장" setIsModalOpen={setIsModalOpen} closeModal={handleModalClose} saveModal={handleModalSave}><div className="text-lg">정보를 저장하시겠습니까?</div></Modal>
         {ContentComponent &&
           <ContentComponent
             featureData={fetchData}
@@ -626,13 +636,11 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
             onSaveClick={handleSaveClick}
             chmbrXcnts={chmbrXcnts}
             chmbrYdnts={chmbrYdnts}
-            gisObject={featureData.values_}
+            gisObject={featureData?.values_ ?? featureData}
+            rawFeatureData={featureData}
           />
         }
       </div>
-
-      <InfilChart pplMngNo={pplMngNo} />
-      <RdiiChart pplMngNo={pplMngNo} />
     </div>
   )
 }
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx
index 2a0b11682..cd59003ef 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx
@@ -15,40 +15,20 @@
 import { VerticalTable } from '@/components/ui/verticalTable';
 import { useEffect, useState } from 'react';
 import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import { getData } from '@/components/lib/api';
 
 // 상류관로 보기 함수 (FeatureClickEventPopup에서 사용)
 export async function searchUpperPpls(gisMap: any, fcltMngNo: any) {
-  const BASE_URL = "/sewerage-service/api";
-  const res = await fetch(`${BASE_URL}/v1/fcltmhl/upperPpls/${fcltMngNo}`, {
-    method: "GET",
-  });
-
   let data: any = null;
-  if (res.ok) {
-    try {
-      // 응답이 비어있는지 확인
-      const contentLength = res.headers.get("content-length");
-      if (contentLength === "0") {
-        alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
-        return;
-      }
+  try {
+    data = await getData(`v1/fcltmhl/upperPpls/${fcltMngNo}`);
+  } catch (error) {
+    console.error("JSON parsing error:", error);
+    alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
+    return;
+  }
 
-      // 응답 텍스트를 먼저 가져와서 빈 문자열인지 확인
-      const text = await res.text();
-      if (!text || text.trim() === "") {
-        alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
-        return;
-      }
-
-      // JSON 파싱 시도
-      const response = JSON.parse(text);
-      data = response.data;
-    } catch (error) {
-      console.error("JSON parsing error:", error);
-      alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
-      return;
-    }
-  } else {
+  if (!data) {
     alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
     return;
   }
@@ -143,4 +123,4 @@ const Smh = ({ featureData, onSaveClick }: { featureData: any, onSaveClick?: ()
   )
 }
 
-export default Smh;
\ No newline at end of file
+export default Smh;
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/swtrmtPrcsZoneAnalysisApi.ts b/apps/sn/app/(map-layout)/map/components/popupComponent/swtrmtPrcsZoneAnalysisApi.ts
new file mode 100644
index 000000000..27eff02de
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/swtrmtPrcsZoneAnalysisApi.ts
@@ -0,0 +1,99 @@
+import { getData } from "@/components/lib/api";
+
+export type SwtrmtPrcsZoneAnalysisMetric = {
+  avgInstlYear?: number | string | null;
+  oldestInstlYear?: number | string | null;
+  latestInstlYear?: number | string | null;
+  pipeCount?: number | string | null;
+  pipeLength?: number | string | null;
+};
+
+export type SwtrmtPrcsZoneAnalysisResponse = {
+  zone?: {
+    zoneId?: string | number | null;
+    swtrmtZoneNm?: string | null;
+    ctpvCd?: string | null;
+    ctpvNm?: string | null;
+    sggCd?: string | null;
+    sggNm?: string | null;
+    swtrmtFcltCd?: string | null;
+    swtrmtFcltNm?: string | null;
+  };
+  analysis?: {
+    total?: SwtrmtPrcsZoneAnalysisMetric | null;
+    combined?: SwtrmtPrcsZoneAnalysisMetric | null;
+    rain?: SwtrmtPrcsZoneAnalysisMetric | null;
+    sewage?: SwtrmtPrcsZoneAnalysisMetric | null;
+  };
+  excluded?: {
+    missingInstlYearCount?: number | string | null;
+  };
+};
+
+type ZoneAnalysisSource = Record<string, any> | null | undefined;
+
+const ANALYSIS_ENDPOINT_PREFIX = "v1/swagePrcsZones";
+
+const firstValue = (...values: unknown[]) => {
+  const value = values.find((item) => {
+    if (item === null || item === undefined) return false;
+    const text = String(item).trim();
+    return text !== "" && text !== "-";
+  });
+
+  return value === undefined ? "" : String(value).trim();
+};
+
+export const getSwtrmtPrcsZoneId = (rawFeatureData: any, featureData: ZoneAnalysisSource) => {
+  const rawValues = rawFeatureData?.values_ ?? rawFeatureData ?? {};
+
+  return firstValue(
+    rawFeatureData?.getId?.(),
+    rawFeatureData?.id_,
+    rawFeatureData?.fid,
+    rawValues?.fid,
+    featureData?.fid,
+    rawValues?.swtrmt_zone_sn,
+    rawValues?.swtrmtZoneSn,
+    featureData?.swtrmt_zone_sn,
+    featureData?.swtrmtZoneSn,
+    rawValues?.zoneId,
+    featureData?.zoneId,
+    rawValues?.swtrmt_fclt_cd,
+    rawValues?.swtrmtFcltCd,
+    featureData?.swtrmt_fclt_cd,
+    featureData?.swtrmtFcltCd
+  );
+};
+
+export const getSwtrmtPrcsZoneAnalysisParams = (rawFeatureData: any, featureData: ZoneAnalysisSource) => {
+  const rawValues = rawFeatureData?.values_ ?? rawFeatureData ?? {};
+  const params = new URLSearchParams();
+
+  const entries = {
+    ctpvCd: firstValue(rawValues?.ctpv_cd, rawValues?.ctpvCd, featureData?.ctpv_cd, featureData?.ctpvCd),
+    sggCd: firstValue(rawValues?.sgg_cd, rawValues?.sggCd, featureData?.sgg_cd, featureData?.sggCd),
+    swtrmtFcltCd: firstValue(rawValues?.swtrmt_fclt_cd, rawValues?.swtrmtFcltCd, featureData?.swtrmt_fclt_cd, featureData?.swtrmtFcltCd),
+    swtrmtZoneNm: firstValue(rawValues?.swtrmt_zone_nm, rawValues?.swtrmtZoneNm, featureData?.swtrmt_zone_nm, featureData?.swtrmtZoneNm),
+  };
+
+  Object.entries(entries).forEach(([key, value]) => {
+    if (value) params.append(key, value);
+  });
+
+  return params;
+};
+
+export const fetchSwtrmtPrcsZoneAnalysis = async (
+  rawFeatureData: any,
+  featureData: ZoneAnalysisSource
+): Promise<SwtrmtPrcsZoneAnalysisResponse | null> => {
+  const zoneId = getSwtrmtPrcsZoneId(rawFeatureData, featureData);
+  if (!zoneId) return null;
+
+  const params = getSwtrmtPrcsZoneAnalysisParams(rawFeatureData, featureData);
+  const query = params.toString();
+  const path = `${ANALYSIS_ENDPOINT_PREFIX}/${encodeURIComponent(zoneId)}/pplAnalysis${query ? `?${query}` : ""}`;
+
+  return (await getData(path)) ?? {};
+};
diff --git a/apps/sn/app/(map-layout)/map/page.tsx b/apps/sn/app/(map-layout)/map/page.tsx
index 75b2d573e..7618ec521 100644
--- a/apps/sn/app/(map-layout)/map/page.tsx
+++ b/apps/sn/app/(map-layout)/map/page.tsx
@@ -17,56 +17,788 @@
 
 "use client";
 
+import dynamic from "next/dynamic";
 import Gis from "@common/business_components/ui/map/Gis";
-import { getData } from "../../components/lib/api";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { getData, getRawJson } from "../../components/lib/api";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import GeoJSON from "ol/format/GeoJSON.js";
+import Point from "ol/geom/Point.js";
+import VectorLayer from "ol/layer/Vector.js";
+import { unByKey } from "ol/Observable.js";
+import VectorSource from "ol/source/Vector.js";
+import Stroke from "ol/style/Stroke.js";
+import Style from "ol/style/Style.js";
 import SearchModal from "./searchModal/searchModal";
 import FeatureClickEventPopup from "./components/popupComponent/featureClickEventPopup";
 import { WaterDepth, WATER_DEPTH_LAYER_TYPES } from "./waterDepth/waterDepth";
 import { ProcSearchBar } from "@common/business_components/ui/map/searchBar";
+import { Button } from "@common/components";
 import useSearchModalStore from "@/store/useSearchModalStore";
+import useStore from "@/store/useStore";
+import AgedPipeLayerSettingPanel from "./components/agedPipe/AgedPipeLayerSettingPanel";
+import type { PipeAnalysisDetailRow } from "./components/pipeAnalysis/pipeAnalysisUtils";
+import {
+  AGED_PIPE_MIN_ZOOM,
+  AGED_PIPE_LAYER_TYPE,
+  AGED_PIPE_PAGE_SIZE,
+  buildAgedPipeCqlFilters,
+  isAgedPipeLayerNode,
+  matchesAgedPipeFilters,
+  normalizeAgedPipeFilters,
+  toDisplayPipeRow,
+  validateElapsedYears,
+  type AgedPipeFilters,
+  type AgedPipeRow,
+  AGED_PIPE_DEFAULT_FILTERS,
+  AGED_PIPE_GUIDE_MIN_ZOOM,
+} from "./components/agedPipe/agedPipeUtils";
+import { downloadAgedPipeCsv } from "./components/agedPipe/agedPipeExport";
+import { PIPE_ANALYSIS_DETAIL_ROW_SELECT_MESSAGE } from "./components/pipeAnalysis/pipeAnalysisUtils";
+import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+import type { WindowPopupKey } from "@/features/windowPopup/model/popupDefinitions";
+import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
+
+const AnalysisPopupMenu = dynamic(
+  () => import("./components/analysisMenu/AnalysisPopupMenu"),
+  { ssr: false },
+);
+
+const AGED_PIPE_CONTROL_NODE_ID = "SN_AGED_PIPE";
+const AGED_PIPE_HIGHLIGHT_LAYER_ID = "SN_AGED_PIPE_HIGHLIGHT";
+const AGED_PIPE_ROW_SELECT_MESSAGE = "SN_AGED_PIPE_ROW_SELECT";
+const AGED_PIPE_POPUP_MINIMIZE_MESSAGE = "SN_AGED_PIPE_POPUP_MINIMIZE";
+const AGED_PIPE_FILTER_SYNC_MESSAGE = "SN_AGED_PIPE_FILTER_SYNC";
+const SOUTH_KOREA_VIEW_EXTENT: [number, number, number, number] = [
+  720000,
+  1445000,
+  1410000,
+  2090000,
+];
+
+// 유하방향은 GeoServer WMS/WFS 레이어가 아니라 BE 보정 GeoJSON API로 그리는 가상 레이어이다.
+const FLOW_DIRECTION_LAYER_TYPE = "tb_sn_swage_ppl_flow_direction";
+const FLOW_DIRECTION_LAYER_NAME = "유하방향";
+const FLOW_DIRECTION_SRS = "EPSG:5179";
+const FLOW_DIRECTION_DEFAULT_MIN_ZOOM = 13;
+const FLOW_DIRECTION_DEFAULT_LIMIT = 5000;
+const FLOW_DIRECTION_DEFAULT_COLOR = "rgba(40, 90, 180, 0.84)";
+const FLOW_DIRECTION_BBOX_BUFFER_RATIO = 0.35;
+const FLOW_DIRECTION_CACHE_MAX_FEATURES = 10000;
+
+type FlowDirectionUsageStyle = {
+  color: string;
+  lineColor: string;
+};
+
+const AGED_PIPE_FOCUS_PADDING: [number, number, number, number] = [120, 120, 120, 120];
+const DEFAULT_FEATURE_FIT_PADDING: [number, number, number, number] = [50, 50, 50, 50];
+
+// 레이어 설정 응답이 lyrTyNm/lyrTypeNm/lyr_type_nm처럼 혼재되어 내려오는 경우를 단일 기준으로 정규화한다.
+const getLayerTypeName = (layerInfo: any) =>
+  String(
+    layerInfo?.lyrTyNm ??
+    layerInfo?.lyrTypeNm ??
+    layerInfo?.lyr_type_nm ??
+    "",
+  ).trim();
+
+// 유하방향 노드는 타입명 또는 표시명으로 식별한다. DB DML 반영 전후 응답 차이를 모두 흡수하기 위한 판별 함수이다.
+const isFlowDirectionLayerInfo = (layerInfo: any) => {
+  const layerTypeName = getLayerTypeName(layerInfo);
+  const layerName = String(layerInfo?.lyrNm ?? layerInfo?.name ?? "").trim();
+
+  return layerTypeName === FLOW_DIRECTION_LAYER_TYPE || layerName === FLOW_DIRECTION_LAYER_NAME;
+};
+
+// 유하방향 노드를 일반 레이어 토글 대상에서 제외하고, 앱 전용 API vector layer로 처리하도록 속성을 보정한다.
+const normalizeFlowDirectionLayerInfos = (data: any[]): any[] => {
+  if (!Array.isArray(data)) return data;
+
+  return data.map((item) => {
+    const children = Array.isArray(item.children)
+      ? normalizeFlowDirectionLayerInfos(item.children)
+      : item.children;
+
+    if (!isFlowDirectionLayerInfo(item)) {
+      return { ...item, children };
+    }
+
+    return {
+      ...item,
+      children,
+      lyrTyNm: item.lyrTyNm || item.lyrTypeNm || item.lyr_type_nm || FLOW_DIRECTION_LAYER_TYPE,
+      lyrNm: item.lyrNm || FLOW_DIRECTION_LAYER_NAME,
+      gobjTy: item.gobjTy || "line",
+      srvcNm: "api",
+      cmncNm: "bbox",
+      actlLyrYn: "N",
+      clickPsblYn: "N",
+      initEprssYn: "N",
+      minViewSize: item.minViewSize ?? item.minZoom ?? String(FLOW_DIRECTION_DEFAULT_MIN_ZOOM),
+    };
+  });
+};
+
+// 레이어 설정의 최소 표출 줌을 읽되, 값이 없으면 유하방향 기본 줌 기준을 적용한다.
+const getFlowDirectionMinZoom = (layerInfo: any) => {
+  const minZoom = Number(layerInfo?.minViewSize ?? layerInfo?.minZoom);
+  return Number.isFinite(minZoom) ? minZoom : FLOW_DIRECTION_DEFAULT_MIN_ZOOM;
+};
+
+// 유하방향 화살표는 관로 위에 얹는 보조 레이어라 레이어 설정의 drawOrdr를 우선 사용하고 없으면 높은 zIndex를 준다.
+const getFlowDirectionZIndex = (layerInfo: any) => {
+  const drawOrder = Number(layerInfo?.drawOrdr);
+  return Number.isFinite(drawOrder) ? drawOrder : 9998;
+};
+
+// BE 응답이 FeatureCollection 그대로 오거나 공통 응답 wrapper의 data 안에 들어오는 두 계약을 모두 처리한다.
+const getFeatureCollection = (payload: any) => {
+  if (payload?.type === "FeatureCollection") return payload;
+  if (payload?.data?.type === "FeatureCollection") return payload.data;
+  return { type: "FeatureCollection", features: [] };
+};
+
+// 현재 지도 화면 BBOX 주변을 함께 조회해 이동 직후 가장자리 유하방향이 비어 보이는 현상을 줄인다.
+const expandFlowDirectionExtent = (extent: number[]) => {
+  const [minX = 0, minY = 0, maxX = 0, maxY = 0] = extent;
+  const width = Math.max(0, maxX - minX);
+  const height = Math.max(0, maxY - minY);
+  const bufferX = width * FLOW_DIRECTION_BBOX_BUFFER_RATIO;
+  const bufferY = height * FLOW_DIRECTION_BBOX_BUFFER_RATIO;
+  return [minX - bufferX, minY - bufferY, maxX + bufferX, maxY + bufferY];
+};
+
+// API 요청과 디버깅 출력에 같은 BBOX 문자열 포맷을 사용해 FE 계산값과 네트워크 파라미터를 쉽게 대조한다.
+const formatFlowDirectionBbox = (extent: number[]) =>
+  extent.map((value: number) => value.toFixed(3)).join(",");
+
+// 유하방향 캐시 중복 제거 키이다. BE 응답은 같은 관로 id가 여러 geometry로 반복될 수 있어 geometry까지 포함한다.
+const getFlowDirectionFeatureCacheKey = (feature: any) => {
+  const featureId = feature.getId?.();
+  const fcltMngNo = feature.get("fcltMngNo") ?? feature.get("fclt_mng_no");
+  const usageCode = feature.get("usgCd") ?? feature.get("usg_cd") ?? "";
+  const coordinates = feature.getGeometry?.()?.getCoordinates?.();
+  const geometryKey = JSON.stringify(coordinates);
+
+  if (featureId) return `id:${String(featureId)}:${geometryKey}`;
+  if (fcltMngNo) return `fclt:${String(fcltMngNo).trim()}:${geometryKey}`;
+  return `geom:${String(usageCode).trim()}:${geometryKey}`;
+};
+
+// 관종별 원본 레이어 색을 유하방향 선/화살표에 재사용할 때 투명도만 조정한다.
+const withAlpha = (color: string | null | undefined, alpha: number) => {
+  const resolvedColor = String(color ?? "").trim();
+  if (!resolvedColor) return `rgba(40, 90, 180, ${alpha})`;
+
+  const rgbaMatch = resolvedColor.match(/^rgba?\(([^)]+)\)$/i);
+  if (rgbaMatch) {
+    const [red = "40", green = "90", blue = "180"] = (rgbaMatch[1] ?? "")
+      .split(",")
+      .map((part) => part.trim());
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+  }
+
+  const hexMatch = resolvedColor.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (hexMatch) {
+    const hex = hexMatch[1] ?? "";
+    const normalized = hex.length === 3
+      ? hex.split("").map((char) => char + char).join("")
+      : hex;
+    const red = parseInt(normalized.slice(0, 2), 16);
+    const green = parseInt(normalized.slice(2, 4), 16);
+    const blue = parseInt(normalized.slice(4, 6), 16);
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+  }
+
+  return resolvedColor;
+};
+
+// 화살표 위치와 대표 선분 선택을 위해 LineString 좌표열의 대략적인 길이를 계산한다.
+const estimateLineLength = (coordinates: number[][]) => {
+  let length = 0;
+  for (let i = 1; i < coordinates.length; i += 1) {
+    const previous = coordinates[i - 1];
+    const current = coordinates[i];
+    if (!previous || !current) continue;
+
+    const [x1 = 0, y1 = 0] = previous;
+    const [x2 = 0, y2 = 0] = current;
+    length += Math.hypot(x2 - x1, y2 - y1);
+  }
+  return length;
+};
+
+// MultiLineString 관로는 가장 긴 선분을 대표 선으로 삼아 화살표 위치와 각도를 안정적으로 계산한다.
+const getRepresentativeLineCoordinates = (geometry: any): number[][] => {
+  const type = geometry?.getType?.();
+  const coordinates = geometry?.getCoordinates?.();
+
+  if (type === "LineString") return coordinates ?? [];
+  if (type === "MultiLineString" && Array.isArray(coordinates)) {
+    return coordinates.reduce((longest: number[][], current: number[][]) =>
+      estimateLineLength(current) > estimateLineLength(longest) ? current : longest,
+      [],
+    );
+  }
+
+  return [];
+};
+
+// 관로 중앙 지점이 속한 실제 선분을 찾아 화살표 위치와 해당 선분의 방향각을 함께 계산한다.
+const getArrowPlacementAtHalfLength = (coordinates: number[][]) => {
+  if (coordinates.length === 0) return null;
+  if (coordinates.length === 1) {
+    const coordinate = coordinates[0];
+    return coordinate ? { coordinate, angle: 0 } : null;
+  }
+
+  const totalLength = estimateLineLength(coordinates);
+  if (totalLength === 0) {
+    const coordinate = coordinates[Math.floor(coordinates.length / 2)];
+    return coordinate ? { coordinate, angle: 0 } : null;
+  }
+
+  let accumulated = 0;
+  const targetLength = totalLength / 2;
+  let lastSegmentAngle = 0;
+
+  for (let i = 1; i < coordinates.length; i += 1) {
+    const previous = coordinates[i - 1];
+    const current = coordinates[i];
+    if (!previous || !current) continue;
+
+    const [previousX = 0, previousY = 0] = previous;
+    const [currentX = 0, currentY = 0] = current;
+    const segmentLength = Math.hypot(currentX - previousX, currentY - previousY);
+    if (segmentLength > 0) {
+      lastSegmentAngle = Math.atan2(currentY - previousY, currentX - previousX);
+    }
+
+    if (accumulated + segmentLength >= targetLength) {
+      const ratio = segmentLength === 0 ? 0 : (targetLength - accumulated) / segmentLength;
+      return {
+        coordinate: [
+          previousX + (currentX - previousX) * ratio,
+          previousY + (currentY - previousY) * ratio,
+        ],
+        angle: lastSegmentAngle,
+      };
+    }
+
+    accumulated += segmentLength;
+  }
+
+  const coordinate = coordinates[coordinates.length - 1];
+  return coordinate ? { coordinate, angle: lastSegmentAngle } : null;
+};
+
+// SVG 없이 Canvas renderer로 짧은 꼬리선과 화살촉을 직접 그려 방향성을 분명하게 만든다.
+const createFlowDirectionArrowRenderer = (color: string, angle: number, scale: number) => {
+  return (coordinates: any, state: any) => {
+    const pixel = Array.isArray(coordinates?.[0]) ? coordinates[0] : coordinates;
+    const [x, y] = pixel ?? [];
+    const context = state?.context as CanvasRenderingContext2D | undefined;
+    if (!context || !Number.isFinite(x) || !Number.isFinite(y)) return;
+
+    const length = 17 * scale;
+    const tailLength = 9 * scale;
+    const headLength = 7 * scale;
+    const headHalfWidth = 4.5 * scale;
+    const shaftWidth = 2.4 * scale;
+
+    context.save();
+    context.translate(x, y);
+    const viewRotation = Number(state?.rotation ?? 0);
+    const screenAngle = (Number.isFinite(viewRotation) ? viewRotation : 0) - angle;
+
+    context.rotate(screenAngle);
+    context.lineCap = "round";
+    context.lineJoin = "round";
+
+    context.strokeStyle = "rgba(255, 255, 255, 0.9)";
+    context.lineWidth = shaftWidth + 2.4;
+    context.beginPath();
+    context.moveTo(-tailLength, 0);
+    context.lineTo(length - headLength, 0);
+    context.stroke();
+
+    context.fillStyle = "rgba(255, 255, 255, 0.9)";
+    context.beginPath();
+    context.moveTo(length, 0);
+    context.lineTo(length - headLength, -headHalfWidth);
+    context.lineTo(length - headLength, headHalfWidth);
+    context.closePath();
+    context.fill();
+
+    context.strokeStyle = color;
+    context.lineWidth = shaftWidth;
+    context.beginPath();
+    context.moveTo(-tailLength, 0);
+    context.lineTo(length - headLength, 0);
+    context.stroke();
+
+    context.fillStyle = color;
+    context.beginPath();
+    context.moveTo(length, 0);
+    context.lineTo(length - headLength, -headHalfWidth);
+    context.lineTo(length - headLength, headHalfWidth);
+    context.closePath();
+    context.fill();
+
+    context.restore();
+  };
+};
+
+// 유하방향 신뢰도와 관종 색상에 따라 선과 화살표 스타일을 만든다. LOW는 운영 검수 대상이라 더 흐리게 표시한다.
+const createFlowDirectionStyle = (
+  feature: any,
+  usageStyleMap: Record<string, FlowDirectionUsageStyle>,
+) => {
+  const confidence = String(
+    feature.get("directionConfidence") ??
+    feature.get("direction_confidence") ??
+    "",
+  ).toUpperCase();
+  const geometry = feature.getGeometry();
+  const coordinates = getRepresentativeLineCoordinates(geometry);
+  const arrowPlacement = getArrowPlacementAtHalfLength(coordinates);
+  const usageCode = String(feature.get("usgCd") ?? feature.get("usg_cd") ?? "").trim();
+  const usageStyle = usageStyleMap[usageCode];
+  const baseColor = usageStyle?.color ?? FLOW_DIRECTION_DEFAULT_COLOR;
+
+  const styleByConfidence: Record<string, { color: string; lineColor: string; scale: number; width: number }> = {
+    MEDIUM: {
+      color: baseColor,
+      lineColor: usageStyle?.lineColor ?? withAlpha(baseColor, 0.42),
+      scale: 1,
+      width: 1.3,
+    },
+    LOW: {
+      color: withAlpha(baseColor, 0.72),
+      lineColor: withAlpha(baseColor, 0.28),
+      scale: 0.9,
+      width: 1.1,
+    },
+  };
+  const style = styleByConfidence[confidence] ?? styleByConfidence.LOW!;
+  const styles = [
+    new Style({
+      stroke: new Stroke({
+        color: style.lineColor,
+        width: style.width,
+        lineCap: "round",
+        lineJoin: "round",
+      }),
+    }),
+  ];
+
+  if (arrowPlacement) {
+    styles.push(
+      new Style({
+        geometry: new Point(arrowPlacement.coordinate),
+        renderer: createFlowDirectionArrowRenderer(style.color, arrowPlacement.angle, style.scale),
+      }),
+    );
+  }
+
+  return styles;
+};
+
+// 레이어 설정의 직접 코드와 filterSql 안의 usg_cd 조건을 모두 관종 코드 후보로 해석한다.
+const extractUsageCodesFromLayerInfo = (layerInfo: any) => {
+  const usageCodes = new Set<string>();
+  const directCode = layerInfo?.usgCd ?? layerInfo?.usg_cd;
+  if (directCode) usageCodes.add(String(directCode).trim());
+
+  const filterSql = String(layerInfo?.flterSql ?? layerInfo?.filterSql ?? "");
+  const equalsMatches = filterSql.matchAll(/usg_cd\s*=\s*'([^']+)'/gi);
+  for (const match of equalsMatches) {
+    const code = match[1]?.trim();
+    if (code) usageCodes.add(code);
+  }
+
+  const inMatches = filterSql.matchAll(/usg_cd\s+in\s*\(([^)]+)\)/gi);
+  for (const match of inMatches) {
+    const codeList = match[1];
+    if (!codeList) continue;
+
+    codeList
+      .split(",")
+      .map((item) => item.replace(/'/g, "").trim())
+      .filter(Boolean)
+      .forEach((code) => usageCodes.add(code));
+  }
+
+  return Array.from(usageCodes);
+};
+
+// 현재 줌에서 실제 표출 가능한 관로 레이어인지 확인해 숨겨진 관종의 유하방향 요청을 막는다.
+const isLayerVisibleAtZoom = (layerInfo: any, zoom: number) => {
+  const minZoom = Number(layerInfo?.minViewSize ?? layerInfo?.minZoom);
+  return !Number.isFinite(minZoom) || zoom >= minZoom;
+};
+
+// 현재 체크되어 화면에 보이는 관로 레이어의 관종 코드와 선 색상을 유하방향 조회/스타일 기준으로 변환한다.
+const extractCheckedPipeUsageStyles = (checkedNodesData: any[], zoom: number) => {
+  const usageStyleMap: Record<string, FlowDirectionUsageStyle> = {};
+
+  checkedNodesData.forEach((node) => {
+    const data = node?.data ?? node;
+    if (!data || isFlowDirectionLayerInfo(data)) return;
+    if (!isLayerVisibleAtZoom(data, zoom)) return;
+
+    const usageCodes = extractUsageCodesFromLayerInfo(data);
+    if (usageCodes.length === 0) return;
+
+    const layerColor = String(data.lnColor ?? data.lineColor ?? FLOW_DIRECTION_DEFAULT_COLOR).trim();
+    usageCodes.forEach((code) => {
+      usageStyleMap[code] = {
+        color: layerColor,
+        lineColor: withAlpha(layerColor, 0.28),
+      };
+    });
+  });
+
+  return usageStyleMap;
+};
+
+const appendAgedPipeControlNode = (data: any[]) => {
+  if (!Array.isArray(data)) return data;
+  if (data.some((item) => String(item.lyrSn) === AGED_PIPE_CONTROL_NODE_ID || item.lyrNm === "노후관로")) {
+    return data;
+  }
+
+  return [
+    ...data,
+    {
+      lyrSn: AGED_PIPE_CONTROL_NODE_ID,
+      id: AGED_PIPE_CONTROL_NODE_ID,
+      lyrNm: "노후관로",
+      upperLyrSn: null,
+      upId: null,
+      sortOrdr: "4",
+      drawOrdr: null,
+      flterSql: null,
+      gobjTy: "",
+      lyrTyNm: "tb_old_pipe",
+      useYn: "Y",
+      minViewSize: null,
+      iconNm: null,
+      iconSize: null,
+      lblAtrbNm: null,
+      fontNm: null,
+      fontIntnColor: null,
+      fontExtnColor: null,
+      fontExtnWdth: null,
+      lnWdth: null,
+      lnColor: null,
+      polgnColor: null,
+      initEprssYn: "Y",
+      clickPsblYn: "N",
+      exprsYn: "Y",
+      cmncNm: "all",
+      srvcNm: "wfs",
+      actlLyrYn: "N",
+      clckZoom: null,
+      children: null,
+    },
+  ];
+};
 
 const Map = () => {
   const { isSearchModalOpen, setIsSearchModalOpen } = useSearchModalStore();
 
-  const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
+  const [treeData, setTreeData] = useState<any[]>([]); // 초기값을 객체 또는 null로 설정
+  const [layerLoadError, setLayerLoadError] = useState<string | null>(null);
   const gisMaps = useRef<any | null>(null);
   const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
-  const [featureData, setFeatureData] = useState(null); // 선택된 피쳐 데이터
+  const [featureData, setFeatureData] = useState<any>(null); // 선택된 피쳐 데이터
   const [showWaterDepth, setShowWaterDepth] = useState(false); // WaterDepth 표시 여부
   const [isPlaying, setIsPlaying] = useState(false);
+  const [mapReady, setMapReady] = useState(false);
+  const [isAgedPipeChecked, setIsAgedPipeChecked] = useState(false);
+  const [draftAgedPipeFilters, setDraftAgedPipeFilters] =
+    useState<AgedPipeFilters>(AGED_PIPE_DEFAULT_FILTERS);
+  const [appliedAgedPipeFilters, setAppliedAgedPipeFilters] =
+    useState<AgedPipeFilters>(AGED_PIPE_DEFAULT_FILTERS);
+  const [isAgedPipeListOpen, setIsAgedPipeListOpen] = useState(false);
+  const [isAgedPipeListMinimized, setIsAgedPipeListMinimized] = useState(false);
+  const [agedPipeRows, setAgedPipeRows] = useState<AgedPipeRow[]>([]);
+  const [agedPipeTotalCount, setAgedPipeTotalCount] = useState(0);
+  const [agedPipeCurrentPage, setAgedPipeCurrentPage] = useState(1);
+  const [isAgedPipeListLoading, setIsAgedPipeListLoading] = useState(false);
+  const [agedPipeDownloadProgressText, setAgedPipeDownloadProgressText] = useState("");
+  const { ctpv, sgg } = useStore();
+  const shouldFocusAgedPipeOnNextSelectRef = useRef(false);
+  const agedPipePopupWindowRef = useRef<Window | null>(null);
+   const pipeAnalysisPopupWindowRef = useRef<Window | null>(null);
+  // 유하방향 레이어 체크 여부를 React 렌더링 흐름에 반영하기 위한 state이다.
+  const [isFlowDirectionChecked, setIsFlowDirectionChecked] = useState(false);
+  // 체크된 유하방향 트리 노드의 레이어 설정을 보관해 API 조회와 vector layer 스타일에 사용한다.
+  const [flowDirectionLayerInfo, setFlowDirectionLayerInfo] = useState<any | null>(null);
+  // 관종 레이어 체크 변경도 유하방향 재조회 조건이므로 별도 버전 state로 effect를 다시 실행한다.
+  const [flowDirectionSelectionVersion, setFlowDirectionSelectionVersion] = useState(0);
+  // moveend 이벤트 핸들러는 최신 state closure를 보장하지 않으므로 현재 체크 여부를 ref로 함께 보관한다.
+  const flowDirectionCheckedRef = useRef(false);
+  // 지도 이동 후 재조회할 때 최신 유하방향 레이어 설정을 참조하기 위한 ref이다.
+  const flowDirectionLayerInfoRef = useRef<any | null>(null);
+  // 유하방향 API의 관종 필터를 만들기 위해 현재 체크된 트리 노드 목록을 ref로 보관한다.
+  const checkedNodesDataRef = useRef<any[]>([]);
+  // 유하방향 전용 vector layer/source를 유지해 지도 이동 시 기존 피처를 지우지 않고 새 BBOX 응답만 병합한다.
+  const flowDirectionLayerRef = useRef<any | null>(null);
+  const flowDirectionSourceRef = useRef<VectorSource | null>(null);
+  // 같은 관로가 겹치는 BBOX에서 반복 조회될 수 있으므로 고유키와 삽입 순서를 캐시로 관리한다.
+  const flowDirectionFeatureKeySetRef = useRef<Set<string>>(new Set());
+  const flowDirectionFeatureKeyQueueRef = useRef<string[]>([]);
+  // 체크 해제나 재조회 중 늦게 도착한 이전 API 응답이 레이어를 다시 그리지 못하도록 요청 순번을 관리한다.
+  const flowDirectionRequestSeqRef = useRef(0);
+  // 지도 이동이 연속으로 발생하면 이전 bbox 요청을 중단해 늦은 응답과 불필요한 네트워크 대기를 줄인다.
+  const flowDirectionAbortControllerRef = useRef<AbortController | null>(null);
+  // 같은 장애 상황에서 alert가 반복 노출되지 않도록 실패 안내 여부를 기억한다.
+  const flowDirectionFailureAlertedRef = useRef(false);
 
   useEffect(() => {
     fetchData();
   }, []);
 
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      if (gisMaps.current) {
+        setMapReady(true);
+        window.clearInterval(timer);
+      }
+    }, 300);
+
+    const handlePopupMessage = async (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+
+      const data = event.data;
+      const core = GisApp.Module.layer as any;
+
+      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_SELECT_FEATURE) {
+        const layerNm = data.payload?.layerNm;
+        const fid = data.payload?.fid;
+        if (!layerNm || !fid || !core?.showSearchResultsFromGeoJSON) return;
+
+        await core.showSearchResultsFromGeoJSON(layerNm, fid);
+        return;
+      }
+
+      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_SHOW_MULTIPLE) {
+        const layerNm = data.payload?.layerNm;
+        const fidsRaw = data.payload?.fids;
+        if (!layerNm || !fidsRaw || !core?.showMultipleSearchResultsFromGeoJSON) return;
+
+        let fids: string[] = [];
+        try {
+          fids = JSON.parse(fidsRaw);
+        } catch (error) {
+          console.error("다중 시설 메시지 파싱 실패:", error);
+          return;
+        }
+
+        await core.showMultipleSearchResultsFromGeoJSON(layerNm, fids);
+      }
+    };
+
+    window.addEventListener("message", handlePopupMessage);
+    return () => {
+      window.clearInterval(timer);
+      window.removeEventListener("message", handlePopupMessage);
+    };
+  }, []);
+
   const fetchData = async () => {
     try {
-      let data;
-      const res = await fetch("/sewerage-service/api/v1/map/lyrStngs/SN_NETWORK", {
-        method: "GET",
-      });
-      if (res.ok) {
-        // 응답이 비어있는지 확인
-        const contentLength = res.headers.get('content-length');
-        if (contentLength === '0') data = null;
-
-        // 응답 텍스트를 먼저 가져와서 빈 문자열인지 확인
-        const text = await res.text();
-        if (!text || text.trim() === '') data = null;
-
-        // JSON 파싱 시도
-        data = JSON.parse(text);
-      }
-      setTreeData(data);
+      const data = await getRawJson("/sewerage-service/api/v1/map/lyrStngs/SN_NETWORK");
+      setTreeData(appendAgedPipeControlNode(normalizeFlowDirectionLayerInfos(data)));
+      setLayerLoadError(null);
     } catch (error) {
-      console.error('JSON parsing error:', error);
-      // JSON 파싱에 실패한 경우, 원본 텍스트 또는 null 반환
-      throw new Error('Invalid JSON response from server');
+      const message =
+        error instanceof Error ? error.message : "레이어 설정 조회 중 알 수 없는 오류가 발생했습니다.";
+      console.error("레이어 설정 조회 실패:", error);
+      setTreeData([]);
+      setLayerLoadError(message);
     }
   };
 
+  // 유하방향은 일반 Gis core 레이어 등록 흐름을 타지 않으므로 전용 layer/source/cache를 직접 정리한다.
+  const removeFlowDirectionLayer = useCallback(() => {
+    const core = GisApp.Module.core as any;
+    core?.deleteLayer?.(FLOW_DIRECTION_LAYER_TYPE);
+    flowDirectionLayerRef.current = null;
+    flowDirectionSourceRef.current = null;
+    flowDirectionFeatureKeySetRef.current.clear();
+    flowDirectionFeatureKeyQueueRef.current = [];
+  }, []);
+
+  // 유하방향 cache/source만 비워 관종 변경처럼 조건이 달라진 경우 이전 조건의 피처가 남지 않게 한다.
+  const clearFlowDirectionFeatureCache = useCallback(() => {
+    flowDirectionSourceRef.current?.clear();
+    flowDirectionFeatureKeySetRef.current.clear();
+    flowDirectionFeatureKeyQueueRef.current = [];
+  }, []);
+
+  // 유하방향 레이어는 하나만 유지하고 source에 피처를 누적한다.
+  const ensureFlowDirectionLayer = useCallback((layerInfo: any) => {
+    const map = gisMaps.current;
+    if (!map) return null;
+
+    if (flowDirectionLayerRef.current && flowDirectionSourceRef.current) {
+      flowDirectionLayerRef.current.setMinZoom?.(getFlowDirectionMinZoom(layerInfo));
+      flowDirectionLayerRef.current.setZIndex?.(getFlowDirectionZIndex(layerInfo));
+      return flowDirectionSourceRef.current;
+    }
+
+    const source = new VectorSource();
+    const layer = new VectorLayer({
+      source,
+      minZoom: getFlowDirectionMinZoom(layerInfo),
+      zIndex: getFlowDirectionZIndex(layerInfo),
+      updateWhileAnimating: false,
+      updateWhileInteracting: false,
+    });
+
+    layer.set("id", FLOW_DIRECTION_LAYER_TYPE);
+    layer.set("lyrNm", FLOW_DIRECTION_LAYER_NAME);
+    layer.set("lyrTyNm", FLOW_DIRECTION_LAYER_TYPE);
+    layer.set("typeName", FLOW_DIRECTION_LAYER_TYPE);
+    layer.set("clickPsblYn", "N");
+    layer.set("chcYn", "N");
+
+    const core = GisApp.Module.core as any;
+    core?.deleteLayer?.(FLOW_DIRECTION_LAYER_TYPE);
+    map.addLayer(layer);
+    flowDirectionLayerRef.current = layer;
+    flowDirectionSourceRef.current = source;
+    return source;
+  }, []);
+
+  // BE에서 받은 보정 GeoJSON을 OpenLayers feature로 변환해 기존 유하방향 source에 중복 없이 병합한다.
+  const renderFlowDirectionLayer = useCallback((
+    featureCollection: any,
+    layerInfo: any,
+    usageStyleMap: Record<string, FlowDirectionUsageStyle>,
+  ) => {
+    const source = ensureFlowDirectionLayer(layerInfo);
+    if (!source) return;
+
+    const features = new GeoJSON().readFeatures(featureCollection, {
+      dataProjection: FLOW_DIRECTION_SRS,
+      featureProjection: GisApp.TO_PROJ,
+    });
+
+    const nextFeatures = features.filter((feature) => {
+      const featureKey = getFlowDirectionFeatureCacheKey(feature);
+      if (flowDirectionFeatureKeySetRef.current.has(featureKey)) return false;
+
+      feature.set("flowDirectionCacheKey", featureKey);
+      feature.setId(featureKey);
+      feature.setStyle(createFlowDirectionStyle(feature, usageStyleMap));
+      flowDirectionFeatureKeySetRef.current.add(featureKey);
+      flowDirectionFeatureKeyQueueRef.current.push(featureKey);
+      return true;
+    });
+
+    if (nextFeatures.length > 0) {
+      source.addFeatures(nextFeatures);
+    }
+
+    while (flowDirectionFeatureKeyQueueRef.current.length > FLOW_DIRECTION_CACHE_MAX_FEATURES) {
+      const staleKey = flowDirectionFeatureKeyQueueRef.current.shift();
+      if (!staleKey) break;
+
+      const staleFeature = source.getFeatures().find((feature: any) =>
+        feature.get("flowDirectionCacheKey") === staleKey,
+      );
+      if (staleFeature) {
+        source.removeFeature(staleFeature);
+      }
+      flowDirectionFeatureKeySetRef.current.delete(staleKey);
+    }
+  }, [ensureFlowDirectionLayer]);
+
+  // 현재 지도 BBOX와 체크된 관종 필터로 유하방향 GeoJSON을 조회하고, 최신 요청만 지도에 반영한다.
+  const loadFlowDirectionLayer = useCallback(
+    async (layerInfo: any) => {
+      const map = gisMaps.current;
+      if (!map) return;
+
+      const requestSeq = flowDirectionRequestSeqRef.current + 1;
+      flowDirectionRequestSeqRef.current = requestSeq;
+      flowDirectionAbortControllerRef.current?.abort();
+      const abortController = new AbortController();
+      flowDirectionAbortControllerRef.current = abortController;
+
+      const view = map.getView();
+      const zoom = view.getZoom() ?? 0;
+      const minZoom = getFlowDirectionMinZoom(layerInfo);
+
+      if (zoom < minZoom) {
+        removeFlowDirectionLayer();
+        return;
+      }
+
+      const size = map.getSize();
+      if (!size) return;
+
+      const usageStyleMap = extractCheckedPipeUsageStyles(checkedNodesDataRef.current, zoom);
+      const usageCodes = Object.keys(usageStyleMap);
+      if (usageCodes.length === 0) {
+        removeFlowDirectionLayer();
+        return;
+      }
+
+      const screenExtent = view.calculateExtent(size);
+      const requestExtent = expandFlowDirectionExtent(screenExtent);
+      const screenBbox = formatFlowDirectionBbox(screenExtent);
+      const requestBbox = formatFlowDirectionBbox(requestExtent);
+      const params = new URLSearchParams({
+        bbox: requestBbox,
+        srs: FLOW_DIRECTION_SRS,
+        limit: String(FLOW_DIRECTION_DEFAULT_LIMIT),
+        usgCd: usageCodes.join(","),
+      });
+
+      try {
+        const payload = await getRawJson(
+          `/sewerage-service/api/v1/map/flowDirectionGeometry?${params.toString()}`,
+          { signal: abortController.signal },
+        );
+        if (requestSeq !== flowDirectionRequestSeqRef.current) return;
+
+        const featureCollection = getFeatureCollection(payload);
+        renderFlowDirectionLayer(featureCollection, layerInfo, usageStyleMap);
+        (window as any).__SN_FLOW_DIRECTION_DEBUG__ = {
+          screenBbox,
+          requestBbox,
+          requestSeq,
+          zoom,
+          usageCodes,
+          returnedFeatures: featureCollection.features?.length ?? 0,
+          cachedFeatures: flowDirectionSourceRef.current?.getFeatures?.().length ?? 0,
+        };
+        flowDirectionFailureAlertedRef.current = false;
+      } catch (error) {
+        if (requestSeq !== flowDirectionRequestSeqRef.current) return;
+        if (typeof error === "object" && error !== null && "name" in error && error.name === "AbortError") return;
+
+        console.error("유하방향 레이어 조회 실패:", error);
+        removeFlowDirectionLayer();
+        if (!flowDirectionFailureAlertedRef.current) {
+          alert("유하방향 정보를 불러오지 못했습니다.");
+          flowDirectionFailureAlertedRef.current = true;
+        }
+      } finally {
+        if (flowDirectionAbortControllerRef.current === abortController) {
+          flowDirectionAbortControllerRef.current = null;
+        }
+      }
+    },
+    [removeFlowDirectionLayer, renderFlowDirectionLayer],
+  );
+
   // SearchModal, GisContent 등에서 호출
   const onFeatureSelect = (data: any) => {
     let map = gisMaps.current;
@@ -112,13 +844,23 @@ const Map = () => {
       if (geometry) {
         let extent = geometry.getExtent();
 
+        const layerTypeName = typeof foundFeature.getId === "function"
+          ? String(foundFeature.getId()).split(".")[0]
+          : data?.lyrTypeNm;
+        const shouldUseAgedPipeFocus =
+          shouldFocusAgedPipeOnNextSelectRef.current && layerTypeName === AGED_PIPE_LAYER_TYPE;
+
         map.getView().fit(extent, {
           duration: 300,
-          padding: [50, 50, 50, 50],
-          maxZoom: 16,
+          padding: shouldUseAgedPipeFocus ? AGED_PIPE_FOCUS_PADDING : DEFAULT_FEATURE_FIT_PADDING,
+          maxZoom: shouldUseAgedPipeFocus ? 18 : 16,
           constrainResolution: true,
           nearest: true,
         });
+
+        if (shouldUseAgedPipeFocus) {
+          shouldFocusAgedPipeOnNextSelectRef.current = false;
+        }
       }
       select.selectFeature(foundFeature, true);
     } else {
@@ -131,6 +873,211 @@ const Map = () => {
   };
 
   const facilityTypes = [{ text: "하수처리시설", val: "tb_il_swage_prcs_fclt" }];
+
+  const fetchAgedPipeRows = useCallback(
+    async (page: number, filters: AgedPipeFilters, size: number) => {
+      const normalized = normalizeAgedPipeFilters(filters);
+      const queryParams = new URLSearchParams({
+        lyrTypeNm: AGED_PIPE_LAYER_TYPE,
+        page: String(page - 1),
+        size: String(size),
+        sort: "string",
+      });
+
+      const cqlFilters = buildAgedPipeCqlFilters(normalized);
+      if (cqlFilters.length > 0) {
+        queryParams.append("cqlFiter", cqlFilters.join(" and "));
+      }
+
+      const response = await getData(`v1/fclts?${queryParams.toString()}`);
+      const rows = Array.isArray(response?.data) ? response.data : [];
+
+      return {
+        rows: rows.map((item: Record<string, unknown>, index: number) =>
+          toDisplayPipeRow(item, index, page, ctpv, sgg),
+        ),
+        total: Number(response?.count ?? 0),
+      };
+    },
+    [ctpv, sgg],
+  );
+
+  const loadAgedPipeList = useCallback(
+    async (page = 1, filters = appliedAgedPipeFilters) => {
+      setIsAgedPipeListLoading(true);
+      try {
+        const response = await fetchAgedPipeRows(page, filters, AGED_PIPE_PAGE_SIZE);
+        setAgedPipeRows(response.rows);
+        setAgedPipeTotalCount(response.total);
+        setAgedPipeCurrentPage(page);
+      } catch (error) {
+        console.error("노후관로 목록 조회 중 오류:", error);
+        setAgedPipeRows([]);
+        setAgedPipeTotalCount(0);
+      } finally {
+        setIsAgedPipeListLoading(false);
+      }
+    },
+    [appliedAgedPipeFilters, fetchAgedPipeRows],
+  );
+
+  const syncAgedPipePopupFilters = useCallback((filters: AgedPipeFilters) => {
+    const popup = agedPipePopupWindowRef.current;
+    if (!popup || popup.closed) {
+      agedPipePopupWindowRef.current = null;
+      return;
+    }
+
+    popup.postMessage(
+      {
+        type: AGED_PIPE_FILTER_SYNC_MESSAGE,
+        filters: normalizeAgedPipeFilters(filters),
+      },
+      window.location.origin,
+    );
+  }, []);
+
+  const handleApplyAgedPipeFilters = useCallback((filters = draftAgedPipeFilters) => {
+    if (!validateElapsedYears(Number(filters.elapsedYears))) {
+      alert("경과년도는 1년~100년 범위 내에서 입력해주세요.");
+      return;
+    }
+
+    const normalized = normalizeAgedPipeFilters(filters);
+    setDraftAgedPipeFilters(normalized);
+    setAppliedAgedPipeFilters(normalized);
+    syncAgedPipePopupFilters(normalized);
+
+    if (isAgedPipeListOpen) {
+      loadAgedPipeList(1, normalized);
+    }
+  }, [draftAgedPipeFilters, isAgedPipeListOpen, loadAgedPipeList, syncAgedPipePopupFilters]);
+
+  const openAgedPipePopupWindow = useCallback(() => {
+    const popup = openWindowPopup("agedPipePopup", {
+      elapsedYears: String(appliedAgedPipeFilters.elapsedYears),
+      ctpvCd: appliedAgedPipeFilters.ctpvCd,
+      sggCd: appliedAgedPipeFilters.sggCd,
+    });
+
+    if (!popup) {
+      alert("브라우저 팝업이 차단되었습니다. 팝업 허용 후 다시 시도해주세요.");
+      return null;
+    }
+
+    agedPipePopupWindowRef.current = popup;
+    setIsAgedPipeListOpen(true);
+    setIsAgedPipeListMinimized(false);
+    return popup;
+  }, [appliedAgedPipeFilters]);
+
+  const openAgedPipeList = useCallback(() => {
+    openAgedPipePopupWindow();
+  }, [openAgedPipePopupWindow]);
+
+  const handleAgedPipeRowDoubleClick = useCallback(
+    async (row: AgedPipeRow) => {
+      try {
+        shouldFocusAgedPipeOnNextSelectRef.current = true;
+        const core = GisApp.Module.layer as any;
+        await core.showSearchResultsFromGeoJSON(AGED_PIPE_LAYER_TYPE, row.fid);
+      } catch (error) {
+        shouldFocusAgedPipeOnNextSelectRef.current = false;
+        console.error("노후관로 위치 이동 중 오류:", error);
+      }
+
+      setFeatureData(row as any);
+      setIsOpen(true);
+      setIsSearchModalOpen(false);
+    },
+    [setIsSearchModalOpen],
+  );
+
+  const handlePipeAnalysisRowSelect = useCallback(
+    async (row: Pick<PipeAnalysisDetailRow, "fid">) => {
+      try {
+        shouldFocusAgedPipeOnNextSelectRef.current = true;
+        const core = GisApp.Module.layer as any;
+        await core.showSearchResultsFromGeoJSON(AGED_PIPE_LAYER_TYPE, row.fid);
+      } catch (error) {
+        shouldFocusAgedPipeOnNextSelectRef.current = false;
+        console.error("관로 위치 이동 중 오류:", error);
+      }
+
+      setFeatureData(row as any);
+      setIsOpen(true);
+      setIsSearchModalOpen(false);
+    },
+    [setIsSearchModalOpen],
+  );
+
+  const handleAgedPipeDownload = useCallback(async () => {
+    if (agedPipeTotalCount === 0) {
+      alert("다운로드할 데이터가 없습니다.");
+      return;
+    }
+
+    try {
+      setIsAgedPipeListLoading(true);
+      setAgedPipeDownloadProgressText("CSV export 작업을 준비하고 있습니다.");
+      await downloadAgedPipeCsv(appliedAgedPipeFilters, (job) => {
+        if (job.status === "QUEUED") {
+          setAgedPipeDownloadProgressText("CSV export 작업이 대기 중입니다.");
+          return;
+        }
+
+        if (job.status === "RUNNING") {
+          setAgedPipeDownloadProgressText(
+            `CSV export 생성 중입니다. (${job.progressPercent ?? 0}%)`,
+          );
+        }
+      });
+      setAgedPipeDownloadProgressText("");
+    } catch (error) {
+      console.error("노후관로 목록 다운로드 중 오류:", error);
+      setAgedPipeDownloadProgressText("");
+      alert(
+        error instanceof Error
+          ? error.message
+          : "노후관로 CSV 다운로드 중 오류가 발생했습니다.",
+      );
+    } finally {
+      setIsAgedPipeListLoading(false);
+    }
+  }, [agedPipeTotalCount, appliedAgedPipeFilters]);
+
+  useEffect(() => {
+    const handleAgedPipePopupMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+
+      if (event.data?.type === AGED_PIPE_ROW_SELECT_MESSAGE) {
+        if (!event.data?.row) return;
+        handleAgedPipeRowDoubleClick(event.data.row as AgedPipeRow);
+        return;
+      }
+
+      if (event.data?.type === AGED_PIPE_POPUP_MINIMIZE_MESSAGE) {
+        agedPipePopupWindowRef.current = null;
+        if (event.data?.filters) {
+          const normalized = normalizeAgedPipeFilters(event.data.filters as AgedPipeFilters);
+          setDraftAgedPipeFilters(normalized);
+          setAppliedAgedPipeFilters(normalized);
+        }
+        setAgedPipeTotalCount(Number(event.data?.total ?? agedPipeTotalCount));
+        setIsAgedPipeListMinimized(true);
+        return;
+      }
+
+      if (event.data?.type === PIPE_ANALYSIS_DETAIL_ROW_SELECT_MESSAGE) {
+        if (!event.data?.row) return;
+        handlePipeAnalysisRowSelect(event.data.row as PipeAnalysisDetailRow);
+      }
+    };
+
+    window.addEventListener("message", handleAgedPipePopupMessage);
+    return () => window.removeEventListener("message", handleAgedPipePopupMessage);
+  }, [agedPipeTotalCount, handleAgedPipeRowDoubleClick, handlePipeAnalysisRowSelect]);
+
   // WaterDepth 표시 여부를 결정하는 함수
   const handleWaterDepthVisibility = useCallback((checkedIds: string[], checkedNodesData: any[]) => {
     const waterDepthLayers = checkedNodesData.filter(node =>
@@ -143,13 +1090,167 @@ const Map = () => {
 
   // 체크된 레이어 변경 처리 함수
   const handleCheckedLayersChange = useCallback((checkedIds: string[], checkedNodesData: any[]) => {
+    checkedNodesDataRef.current = checkedNodesData;
+
+    // 유하방향은 일반 setLayerOnMap 대상이 아니므로 체크 노드 여부를 별도로 추적한다.
+    const flowDirectionNode = checkedNodesData.find((node) =>
+      isFlowDirectionLayerInfo(node?.data ?? node),
+    );
+    const nextFlowDirectionLayerInfo = flowDirectionNode?.data ?? flowDirectionNode ?? null;
+    flowDirectionCheckedRef.current = Boolean(nextFlowDirectionLayerInfo);
+    flowDirectionLayerInfoRef.current = nextFlowDirectionLayerInfo;
+    setIsFlowDirectionChecked(Boolean(nextFlowDirectionLayerInfo));
+    setFlowDirectionLayerInfo(nextFlowDirectionLayerInfo);
+    if (nextFlowDirectionLayerInfo) {
+      clearFlowDirectionFeatureCache();
+      setFlowDirectionSelectionVersion((version) => version + 1);
+    }
+
+    if (!nextFlowDirectionLayerInfo) {
+      // 해제 직후 pending API 응답이 늦게 도착해도 renderFlowDirectionLayer가 실행되지 않도록 순번을 무효화한다.
+      flowDirectionRequestSeqRef.current += 1;
+      flowDirectionAbortControllerRef.current?.abort();
+      flowDirectionAbortControllerRef.current = null;
+      flowDirectionFailureAlertedRef.current = false;
+      removeFlowDirectionLayer();
+    }
+
     handleWaterDepthVisibility(checkedIds, checkedNodesData);
-  }, [handleWaterDepthVisibility]);
+    setIsAgedPipeChecked(checkedNodesData.some((node) => isAgedPipeLayerNode(node)));
+  }, [clearFlowDirectionFeatureCache, handleWaterDepthVisibility, removeFlowDirectionLayer]);
+
+  const handleOpenLayerPopup = useCallback(
+    (_layerNm: string, node?: any) => {
+      if (isAgedPipeLayerNode(node)) {
+        openAgedPipeList();
+        return false;
+      }
+
+      return true;
+    },
+    [openAgedPipeList],
+  );
+
+  const inlineLayerSettingView = useCallback(
+    (node: any) => {
+      if (!isAgedPipeChecked || !isAgedPipeLayerNode(node)) return null;
+
+      return (
+        <AgedPipeLayerSettingPanel
+          filters={draftAgedPipeFilters}
+          onFiltersChange={setDraftAgedPipeFilters}
+          onApply={handleApplyAgedPipeFilters}
+        />
+      );
+    },
+    [draftAgedPipeFilters, handleApplyAgedPipeFilters, isAgedPipeChecked],
+  );
+
+  useEffect(() => {
+    if (!mapReady || !gisMaps.current) return;
+
+    const core = GisApp.Module.core as any;
+    core?.deleteLayer?.(AGED_PIPE_HIGHLIGHT_LAYER_ID);
+
+    if (!isAgedPipeChecked) return;
+
+    const baseLayerCode = Object.values(GisApp.layerCode ?? {}).find(
+      (item: any) => item?.lyrTyNm === AGED_PIPE_LAYER_TYPE && item?.actlLyrYn === "Y",
+    ) as any;
+
+    if (!baseLayerCode) return;
+
+    const layerCode = {
+      ...baseLayerCode,
+      id: AGED_PIPE_HIGHLIGHT_LAYER_ID,
+      lyrSn: AGED_PIPE_HIGHLIGHT_LAYER_ID,
+      lyrNm: "노후관로",
+      lyrTyNm: AGED_PIPE_LAYER_TYPE,
+      gobjTy: "line",
+      actlLyrYn: "Y",
+      exprsYn: "Y",
+      clickPsblYn: "Y",
+      cmncNm: "bbox",
+      srvcNm: "wfs",
+      flterSql: buildAgedPipeCqlFilters(appliedAgedPipeFilters).join(" and "),
+      lnWdth: "4",
+      lnColor: "rgba(235, 40, 40, 0.82)",
+      drawOrdr: "9999",
+      minViewSize: String(AGED_PIPE_MIN_ZOOM),
+    };
+
+    const layer = core?.addWfsLayer?.(layerCode);
+    layer?.set?.("id", AGED_PIPE_HIGHLIGHT_LAYER_ID);
+    layer?.set?.("lyrNm", "노후관로");
+    layer?.set?.("lyrTyNm", AGED_PIPE_LAYER_TYPE);
+
+    return () => {
+      core?.deleteLayer?.(AGED_PIPE_HIGHLIGHT_LAYER_ID);
+    };
+  }, [appliedAgedPipeFilters, isAgedPipeChecked, mapReady]);
+
+  const openAnalysisPopup = useCallback((popupKey: WindowPopupKey) => {
+    const popup = openWindowPopup(popupKey);
+    if (!popup) {
+      alert("브라우저 팝업이 차단되었습니다. 팝업 허용 후 다시 시도해주세요.");
+      return;
+    }
+
+    if (popupKey === "pipeAnalysisPopup") {
+      pipeAnalysisPopupWindowRef.current = popup;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!mapReady || !flowDirectionLayerInfo) return;
+
+    // 트리 체크 상태나 관종 레이어 선택이 바뀌면 유하방향 API vector layer를 추가/갱신/제거한다.
+    if (isFlowDirectionChecked) {
+      loadFlowDirectionLayer(flowDirectionLayerInfo);
+    } else {
+      removeFlowDirectionLayer();
+    }
+  }, [
+    flowDirectionLayerInfo,
+    flowDirectionSelectionVersion,
+    isFlowDirectionChecked,
+    loadFlowDirectionLayer,
+    mapReady,
+    removeFlowDirectionLayer,
+  ]);
+
+  useEffect(() => {
+    if (!mapReady || !gisMaps.current) return;
+
+    // 유하방향이 켜진 상태에서 지도 이동/확대축소가 끝나면 현재 BBOX 기준으로 다시 조회한다.
+    const key = gisMaps.current.on("moveend", () => {
+      if (!flowDirectionCheckedRef.current || !flowDirectionLayerInfoRef.current) return;
+      loadFlowDirectionLayer(flowDirectionLayerInfoRef.current);
+    });
+
+    return () => {
+      unByKey(key);
+    };
+  }, [loadFlowDirectionLayer, mapReady]);
 
 
   return (
     <>
-      <div className="bg-container">
+      <div className="sn-map-control-layout bg-container relative h-[calc(100dvh-5rem)] overflow-hidden">
+        {layerLoadError ? (
+          <div className="absolute left-4 top-4 z-[60] max-w-[520px] rounded border border-red-200 bg-white px-4 py-3 text-sm text-red-700 shadow">
+            레이어 설정 조회 실패: {layerLoadError}
+          </div>
+        ) : null}
+        {agedPipeDownloadProgressText ? (
+          <div className="absolute left-4 top-20 z-[60] max-w-[520px] rounded border border-emerald-200 bg-white px-4 py-3 text-sm text-emerald-700 shadow">
+            {agedPipeDownloadProgressText}
+          </div>
+        ) : null}
+        <AnalysisPopupMenu
+          onOpenPopup={openAnalysisPopup}
+          onOpenInfoSearch={() => setIsSearchModalOpen(true)}
+        />
         <Gis
           treeData={treeData}
           isSearch={true}
@@ -165,17 +1266,101 @@ const Map = () => {
           isSearchModalOpen={isSearchModalOpen}
           setIsSearchModalOpen={setIsSearchModalOpen}
           onCheckedLayersChange={handleCheckedLayersChange}
-          searchBar={<ProcSearchBar gisMaps={gisMaps} facilityTypes={facilityTypes} />}
+          onOpenPopup={handleOpenLayerPopup}
+          searchBar={
+            <ProcSearchBar
+              gisMaps={gisMaps}
+              facilityTypes={facilityTypes}
+              sidoSearchZoom={isAgedPipeChecked ? AGED_PIPE_GUIDE_MIN_ZOOM : undefined}
+            />
+          }
           waterDepth={showWaterDepth ? WaterDepth : undefined}
+          inlineLayerSettingView={inlineLayerSettingView}
+          layerIconVisible={isAgedPipeLayerNode}
           isPlaying={isPlaying}
           setIsPlaying={setIsPlaying as any}
           targetLayerTypes={WATER_DEPTH_LAYER_TYPES as any}
           checkInterval={2500}
+          checkedLayerChangeDelay={0}
           showZoomLevel={true}
+          showZoomScaleInfo={true}
+          showFloatingSearchButton={false}
+          treeTogglePosition="top"
+          zoomGuide={
+            isAgedPipeChecked
+              ? {
+                  label: "노후관로 기준",
+                  zoom: AGED_PIPE_GUIDE_MIN_ZOOM,
+                }
+              : undefined
+          }
 
           defaultZoom={7.5}
           defaultLonLat={[127.75, 36]}
+          viewExtent={SOUTH_KOREA_VIEW_EXTENT}
         />
+        {isAgedPipeListMinimized && (
+          <div className="fixed left-[480px] top-[68px] z-[90] flex min-w-[250px] items-center gap-3 rounded-sm border border-red-200 bg-white/95 px-3 py-2 shadow-[0_8px_22px_rgba(15,23,42,0.22)] backdrop-blur">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-sm bg-red-50">
+              <span className="block h-4 w-4 rounded-sm border-2 border-red-500 bg-red-500/20" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <div className="text-[1.25rem] font-semibold leading-tight text-red-700">노후관로 현황</div>
+              <div className="text-[1rem] leading-tight text-slate-500">
+                {appliedAgedPipeFilters.elapsedYears}년 이상 · {agedPipeTotalCount.toLocaleString()}건
+              </div>
+            </div>
+            <Button
+              type="button"
+              color="primary"
+              size="xs"
+              className="h-7 px-3"
+              onClick={openAgedPipeList}
+            >
+              열기
+            </Button>
+            <Button
+              type="button"
+              color="white"
+              size="xs"
+              className="h-7 px-3"
+              onClick={() => setIsAgedPipeListMinimized(false)}
+            >
+              닫기
+            </Button>
+          </div>
+        )}
+        <style jsx global>{`
+          .sn-map-control-layout .mapbtn {
+            top: auto;
+            right: 15px;
+            bottom: 451px;
+          }
+
+          .sn-map-control-layout .custom-toolbar {
+            position: static;
+          }
+
+          .sn-map-control-layout .tool-bar {
+            top: auto;
+            right: 15px;
+            bottom: 248px;
+          }
+
+          .sn-map-control-layout .zoom-level-control {
+            right: 16px;
+            bottom: 56px;
+          }
+
+          .sn-map-control-layout .zoom-level-summary {
+            right: 56px;
+            bottom: -15px;
+          }
+
+          .sn-map-control-layout .ol-scale-line {
+            display: none;
+          }
+        `}</style>
       </div>
     </>
   );
diff --git a/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
index ad57c0a5f..f054a9ed1 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
@@ -22,7 +22,7 @@ import useStore from '@/store/useStore';
 import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
 import useSearchModalStore from '@/store/useSearchModalStore';
 import { useReportTabStore } from '@/store/useReportTabStore';
-import ReportFilesModal from './reportFilesModal'; // 파일목록모달
+import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
 
 
 // 하수도정비 기본계획 보고서
@@ -56,7 +56,6 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
   const [ctpvCd, setCtpvCd] = useState('0');
   const [sggCd, setSggCd] = useState('0');
   const [reportGubun, setReportGubun] = useState("0");
-  const [clsfSystmSn, setClsfSystmSn] = useState(''); // 자료관 기본계획 일련번호
 
   const {
     tableData,
@@ -72,8 +71,6 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
   } = useSearchModalStore();
   const { ctpv, sgg } = useStore();
   const {
-    isOpen: isReportFilesModalOpen,
-    setIsOpen: setIsReportFilesModalOpen,
     dcTree: reportOriginData,
     fetchDcTree
   } = useReportTabStore(); // 모달 상태 관리 스토어
@@ -139,8 +136,14 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
     if (typeof index === "number" && tableData[index]) {
       const reportData = tableData[index];
       if (reportData.fileSn !== "") {
-        setClsfSystmSn(reportData.clsfSystmSn); // 자료관 기본계획 일련번호 설정
-        setIsReportFilesModalOpen(true); // 모달 열기
+        const popupWindow = openWindowPopup("reportFiles", {
+          clsfSystmSn: reportData.clsfSystmSn,
+          sourcePath: window.location.pathname,
+        });
+
+        if (!popupWindow) {
+          alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+        }
       }
     }
   };
@@ -263,10 +266,8 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
           />
         </div>
       </div>
-      {/* 모달 컴포넌트 */}
-      {isReportFilesModalOpen && <ReportFilesModal clsfSystmSn={clsfSystmSn} />}
     </>
   );
 };
 
-export default React.memo(ReportTab);
\ No newline at end of file
+export default React.memo(ReportTab);
diff --git a/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
index 3ce334518..809647bf6 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
@@ -11,21 +11,26 @@
  * - Zustand를 통한 검색 모달 상태 관리
  * - 로딩 오버레이 및 선택 초기화 지원
  */
+'use client';
 import LoadingOverlay from '@/components/ui/LoadingBar';
-import { UiModal, UITab, UiTable } from '@common/business_components/ui';
+import { UITab, UiTable } from '@common/business_components/ui';
 import { Button } from '@common/components/ui';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { Toaster } from "react-hot-toast";
 import useSearchModalStore from '@/store/useSearchModalStore';
 import { ExclnSewagePumpCol2, MsSwageMhlCol2, MsSwagePplCol2, stofcbrCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2 } from '../components/common/table';
 import BasicTab, { BASIC_TYPES } from './basicTab';
 import OperationTab from './operationTab';
-import ReportTab from './reportTab';
 import useSearchModal from './useSearchModal';
 import useBasicTab from './useBasicTab';
 import useOperationTab from './useOperationTab';
+import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
 
-const SearchModal: React.FC = () => {
+type SearchModalProps = {
+  renderMode?: "launcher" | "popup";
+};
+
+const SearchModal: React.FC<SearchModalProps> = ({ renderMode = "launcher" }) => {
   const {
     showTable,
     isSearchModalOpen, setIsSearchModalOpen,
@@ -59,6 +64,7 @@ const SearchModal: React.FC = () => {
     operationResultExcelDownload,
     handleOperationPageNation
   } = useOperationTab();
+  const hasAutoOpenedReportRef = useRef(false);
 
 
   const dynamicHeadlist: { id: string, title: string }[] = useMemo(() => {
@@ -87,6 +93,42 @@ const SearchModal: React.FC = () => {
     return [];
   }, [activeTab, workType]);
 
+  useEffect(() => {
+    if (renderMode !== "launcher" || !isSearchModalOpen) return;
+
+    const popupWindow = openWindowPopup("mapSearch", {
+      sourcePath: window.location.pathname,
+    });
+
+    if (!popupWindow) {
+      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+    }
+
+    setIsSearchModalOpen(false);
+  }, [renderMode, isSearchModalOpen]);
+
+  const openReportTabPopup = () => {
+    const popupWindow = openWindowPopup("reportTab", {
+      sourcePath: window.location.pathname,
+    });
+
+    if (!popupWindow) {
+      alert('?앹뾽??李⑤떒?섏뿀?듬땲?? 釉뚮씪?곗? ?앹뾽 ?덉슜 ?ㅼ젙???뺤씤?댁＜?몄슂.');
+    }
+  };
+
+  useEffect(() => {
+    if (activeTab !== 'report') {
+      hasAutoOpenedReportRef.current = false;
+      return;
+    }
+
+    if (hasAutoOpenedReportRef.current) return;
+
+    openReportTabPopup();
+    hasAutoOpenedReportRef.current = true;
+  }, [activeTab]);
+
   useEffect(() => {
     resetFilters();
   }, [activeTab, basicType, workType]);
@@ -119,7 +161,23 @@ const SearchModal: React.FC = () => {
       />
       {activeTab === 'basic' && (<BasicTab />)} {/* 기본정보 탭 */}
       {activeTab === 'operation' && (<OperationTab />)} {/* 유지관리 정보 탭 */}
-      {activeTab === 'report' && (<ReportTab open={isSearchModalOpen} />)}  {/* 하수도정비기본계획보고서 탭 */}
+      {activeTab === 'report' && (
+        <div className="mt-4 flex h-[79dvh] w-full items-center justify-center rounded-lg border bg-white p-6">
+          <div className="flex max-w-[520px] flex-col items-center text-center">
+            <h2 className="mb-3 text-2xl font-semibold text-gray-900">
+              하수도정비 기본계획보고서
+            </h2>
+            <p className="mb-5 text-lg leading-8 text-gray-600">
+              보고서 상세는 모달 내부 탭 대신
+              <br />
+              전용 윈도우 팝업으로 열리도록 전환되었습니다.
+            </p>
+            <Button className="px-6 py-2 text-white" onClick={openReportTabPopup}>
+              전용 팝업 열기
+            </Button>
+          </div>
+        </div>
+      )}  {/* 하수도정비기본계획보고서 탭 */}
 
 
       {/* 📋 결과 리스트 */}
@@ -214,22 +272,16 @@ const SearchModal: React.FC = () => {
     </>
   );
 
+  if (renderMode === "launcher") {
+    return null;
+  }
+
   return (
-    <div className='overflow-x-auto overflow-y-hidden'>
-      <UiModal
-        open={isSearchModalOpen}
-        onOpenChange={setIsSearchModalOpen}
-        bodyClass={`
-        h-[100dvh]
-        w-[90dvw]
-        max-w-[1220px]
-        max-h-[970px]
-        overflow-y-hidden
-        z-[101]
-      `}
-        body={renderBody()}
-        useDirectRender={true}
-      />
+    <div className='h-dvh overflow-x-auto overflow-y-hidden bg-white p-4'>
+      <h1 className="mb-3 text-2xl font-semibold text-gray-900">관망도 검색</h1>
+      <div className="h-[calc(100dvh-5.6rem)] w-full overflow-y-hidden rounded-lg border bg-white p-4">
+        {renderBody()}
+      </div>
       <Toaster position="top-center"></Toaster>
     </div>
   );
diff --git a/apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts b/apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts
index 9184286ed..d914d2dbb 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts
+++ b/apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts
@@ -31,6 +31,13 @@ import { swagePrcsZoneCqlFilters } from './swagePrcsZone';
 import { swageMhlCqlFilters } from './swageMhl';
 import { swagePmstnCqlFilters } from './swagePmstn';
 import { stofcbrCqlFilters } from './stofcbr';
+import { postPopupMessageAndClose } from '@/features/windowPopup/lib/popupMessage';
+import { WINDOW_POPUP_MESSAGE_TYPE } from '@/features/windowPopup/model/types';
+
+const isPopupWindow = () =>
+  typeof window !== "undefined" &&
+  !!window.opener &&
+  window.location.pathname.startsWith("/popup/");
 
 
 export default function useBasicTab() {
@@ -115,9 +122,21 @@ export default function useBasicTab() {
   // 기본정보 테이블 cellClick 핸들러 
   const handleBasicCellClick = async (index?: number | undefined, headId?: String) => {
     if (typeof index === "number") {
+      const row = tableData[index];
+
+      if (isPopupWindow()) {
+        postPopupMessageAndClose(
+          WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_SELECT_FEATURE,
+          {
+            layerNm: row.lyrTypeNm,
+            fid: String(row.fid),
+          },
+        );
+        return;
+      }
+
       setIsLoading(true);
 
-      const row = tableData[index];
       const layerNm = row.lyrTypeNm;
       const fid = row.fid;
       const core = GisApp.Module.layer as any;
diff --git a/apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts b/apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts
index 669dd4cb5..3d80b54d9 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts
+++ b/apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts
@@ -23,6 +23,13 @@ import { confirmToast } from '@/components/ui/toast'
 import { toast } from "react-hot-toast";
 import useSearchModalStore from '@/store/useSearchModalStore';
 import useStore from '@/store/useStore';
+import { postPopupMessageAndClose } from '@/features/windowPopup/lib/popupMessage';
+import { WINDOW_POPUP_MESSAGE_TYPE } from '@/features/windowPopup/model/types';
+
+const isPopupWindow = () =>
+  typeof window !== "undefined" &&
+  !!window.opener &&
+  window.location.pathname.startsWith("/popup/");
 
 
 export default function useOperationTab() {
@@ -200,9 +207,21 @@ export default function useOperationTab() {
   // 유지관리 정보 디테일 테이블 cellClick 핸들러 
   const handleOperationResultCellClick = async (index?: number | undefined, headId?: String) => {
     if (typeof index === "number") {
+      const row = detailTableData[index];
+
+      if (isPopupWindow()) {
+        postPopupMessageAndClose(
+          WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_SELECT_FEATURE,
+          {
+            layerNm: row.lyrTypeNm,
+            fid: String(row.fid),
+          },
+        );
+        return;
+      }
+
       setIsLoading(true);
 
-      const row = detailTableData[index];
       const layerNm = row.lyrTypeNm;
       const fid = row.fid;
       const core = GisApp.Module.layer as any;
@@ -434,6 +453,20 @@ export default function useOperationTab() {
     }
   };
 
+  const emitMultipleFeaturesToMap = () => {
+    if (detailTableData.length === 0 || !isPopupWindow()) return false;
+
+    const row = detailTableData[0];
+    postPopupMessageAndClose(
+      WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_SHOW_MULTIPLE,
+      {
+        layerNm: row.lyrTypeNm,
+        fids: JSON.stringify(detailTableData.map((item) => item.fid)),
+      },
+    );
+    return true;
+  };
+
 
   return {
     WORK_TYPES,
@@ -446,7 +479,8 @@ export default function useOperationTab() {
     handleOperationCellClick,
     handleOperationResultCellClick,
     handleOperationPageNation,
+    emitMultipleFeaturesToMap,
     operationExcelDownload,
     operationResultExcelDownload
   };
-};
\ No newline at end of file
+};
diff --git a/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts b/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts
index 1d317e3d4..585885521 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts
+++ b/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts
@@ -19,6 +19,13 @@ import GisApp from "@common/business_components/ui/map/lib/gis.core";
 import useSearchModalStore from '../../../store/useSearchModalStore';
 import useBasicTab from './useBasicTab';
 import useOperationTab from './useOperationTab';
+import { postPopupMessageAndClose } from '@/features/windowPopup/lib/popupMessage';
+import { WINDOW_POPUP_MESSAGE_TYPE } from '@/features/windowPopup/model/types';
+
+const isPopupWindow = () =>
+  typeof window !== "undefined" &&
+  !!window.opener &&
+  window.location.pathname.startsWith("/popup/");
 
 export default function useSearchModal() {
   const {
@@ -132,6 +139,18 @@ export default function useSearchModal() {
   const viewMultipleFeature = async () => {
     if (activeTab === 'basic') {
       if (!(tableData.length === 0)) {
+        if (isPopupWindow()) {
+          const row = tableData[0];
+          postPopupMessageAndClose(
+            WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_SHOW_MULTIPLE,
+            {
+              layerNm: row.lyrTypeNm,
+              fids: JSON.stringify(tableData.map((item) => item.fid)),
+            },
+          );
+          return;
+        }
+
         setIsLoading(true);
 
         const row = tableData[0];
@@ -144,6 +163,18 @@ export default function useSearchModal() {
       }
     } else if (activeTab === 'operation') {
       if (!(detailTableData.length === 0)) {
+        if (isPopupWindow()) {
+          const row = detailTableData[0];
+          postPopupMessageAndClose(
+            WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_SHOW_MULTIPLE,
+            {
+              layerNm: row.lyrTypeNm,
+              fids: JSON.stringify(detailTableData.map((item) => item.fid)),
+            },
+          );
+          return;
+        }
+
         setIsLoading(true);
 
         const row = detailTableData[0];
diff --git a/apps/sn/app/(popupLayout)/layout.tsx b/apps/sn/app/(popupLayout)/layout.tsx
new file mode 100644
index 000000000..d02ca99ac
--- /dev/null
+++ b/apps/sn/app/(popupLayout)/layout.tsx
@@ -0,0 +1,11 @@
+export default function PopupLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <main className="min-h-dvh bg-white text-foreground">
+      {children}
+    </main>
+  );
+}
diff --git a/apps/sn/app/(popupLayout)/popup/[popupKey]/page.tsx b/apps/sn/app/(popupLayout)/popup/[popupKey]/page.tsx
new file mode 100644
index 000000000..8231f4f4d
--- /dev/null
+++ b/apps/sn/app/(popupLayout)/popup/[popupKey]/page.tsx
@@ -0,0 +1,30 @@
+import { isWindowPopupKey } from "@/features/windowPopup/model/popupDefinitions";
+import { windowPopupRegistry } from "@/features/windowPopup/registry";
+
+type PopupPageProps = {
+  params: Promise<{
+    popupKey: string;
+  }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+};
+
+export default async function PopupPage({
+  params,
+  searchParams,
+}: PopupPageProps) {
+  const { popupKey } = await params;
+  const resolvedSearchParams = await searchParams;
+
+  if (!isWindowPopupKey(popupKey)) {
+    return (
+      <section className="flex min-h-dvh flex-col items-center justify-center gap-4 p-8 text-center">
+        <h1 className="text-2xl font-semibold">등록되지 않은 팝업입니다.</h1>
+        <p className="text-base text-gray-600">popupKey: {popupKey}</p>
+      </section>
+    );
+  }
+
+  const PopupComponent = windowPopupRegistry[popupKey].component;
+
+  return <PopupComponent searchParams={resolvedSearchParams} />;
+}
diff --git a/apps/sn/app/(with-base-layout)/ii/fileupload/page.tsx b/apps/sn/app/(with-base-layout)/ii/fileupload/page.tsx
index 9f90d5ead..1d30922c1 100644
--- a/apps/sn/app/(with-base-layout)/ii/fileupload/page.tsx
+++ b/apps/sn/app/(with-base-layout)/ii/fileupload/page.tsx
@@ -21,6 +21,7 @@
 // FileUpload.js
 import React, { useState } from 'react';
 import axios from 'axios';
+import { SITE_ID } from '@/shared/config';
 const SEWERAGE_URL = "/sewerage-service/api";
 
 function FileUpload() {
@@ -49,6 +50,7 @@ function FileUpload() {
 			method: "POST",
 			headers: {
 				"Content-Type": "application/json",
+        "X-Site-Id": SITE_ID,
 			},
 			body: JSON.stringify({authToken: auth})
 		}).then((data) => {
@@ -58,7 +60,11 @@ function FileUpload() {
   const handleFindUserOna = () => {
 		const auth = getCookie("Authorization");
 		if (auth) console.log("쿠키 auth : " + auth);
-		fetch("/server/user-service/api/v1/users/65a00f65-8460-49af-98ec-042977e56f4b").then((data) => {
+		fetch("/server/user-service/api/v1/users/65a00f65-8460-49af-98ec-042977e56f4b", {
+      headers: {
+        "X-Site-Id": SITE_ID,
+      },
+    }).then((data) => {
 			console.log(data);
 		});
   };
@@ -86,7 +92,11 @@ function FileUpload() {
     formData.append('inpFile', file);
 
     try {
-      const response = await axios.post('http://localhost:8883/sewerage-service/api/v1/rdiiAnls/savewithfile', formData);
+      const response = await axios.post('http://localhost:8883/sewerage-service/api/v1/rdiiAnls/savewithfile', formData, {
+        headers: {
+          "X-Site-Id": SITE_ID,
+        },
+      });
 
       alert('업로드 성공: ' + response.data.message);
     } catch (err) {
diff --git a/apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx b/apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
index 4b1db105b..3df6a1541 100644
--- a/apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
@@ -17,22 +17,20 @@
  * - 첨부파일 삭제및 Soft Delete 삭제: DELETE /api/v1/atfl/attachments/{atflId} (attach-service)
  */
 'use client'
-import { deleteData, postData, useCookieAuth } from '@/components/lib/api'
+import { deleteData, useCookieAuth } from '@/components/lib/api'
 import { searchData } from '@/components/lib/common/apiHelpers'
 import { formatDate, handleDownload } from '@/components/lib/utils'
 import LoadingOverlay from '@/components/ui/LoadingBar'
-import { SearchDiv, SearchFormLeft, SearchFormRight, UiTable, UiModal } from '@common/business_components/ui'
+import { SearchDiv, SearchFormLeft, SearchFormRight, UiTable } from '@common/business_components/ui'
 import ListDiv from '@common/business_components/ui/list_div'
 import { Button, DatePicker, Input, Label } from '@common/components/ui'
 import { useEffect, useState } from 'react'
 import { tableHeadlist } from '..'
-import OperFileUploadForm from '../../../components/ui/operFileUploadForm'
-import { tokenManager } from '@/entities/auth/lib/token-manager';
-import { AUTH_USER_ID } from "@/shared/config";
 import { useQuery } from "@tanstack/react-query";
 import { ENDPOINT } from "@common/components/config";
 import { getUserInfo } from "@common/components/api";
-import TableModal from './tableModal';
+import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
+import { WINDOW_POPUP_MESSAGE_TYPE } from '@/features/windowPopup/model/types';
 
 
 const Page = () => {
@@ -51,8 +49,6 @@ const Page = () => {
   const [curPage, setCurPage] = useState(1) //현재 페이지
   const [totalData, setTotalData] = useState(0) //총 데이터 수
   const [isLoading, setIsLoading] = useState(true) //로딩 상태
-  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false) // 등록 모달 상태
-  const [isTableModalOpen, setIsTableModalOpen] = useState(false) // 테이블 모달 상태
   const [resetSelection, setResetSelection] = useState<boolean>(false); // 선택 초기화 상태
   const [isResetPage, setIsResetPage] = useState<boolean>(false);
 
@@ -67,6 +63,17 @@ const Page = () => {
     fetchData()
   }, [])
 
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+      if (event.data?.type !== WINDOW_POPUP_MESSAGE_TYPE.FLOOD_PRE_UPLOAD_COMPLETED) return;
+      handleSearch();
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [fromDate, toDate, pjNm, curPage]);
+
   // 페이지 변경 시마다 데이터 fetch
   useEffect(() => {
     setIsResetPage(false);
@@ -140,27 +147,24 @@ const Page = () => {
     }
   }
 
-  // 현황 등록
-  const registFile = async (fileName: string, year: string, quater: string, cd: string, id: string) => {
-    const json = {
-      mngYr: year,
-      mngQu: quater,
-      atflId: id,
-      atflCd: cd,
-      rgtr: tokenManager.getToken(AUTH_USER_ID) || null,
-      sbmrgPrevntBizNm: fileName
-    }
-    const data = await postData('v1/sbmrgPrevnt', json)
-    if (data) {
-      alert('파일이 등록되었습니다.');
-      setIsUploadModalOpen(false);
-      handleSearch();
+  // 등록 버튼 클릭 핸들러
+  const handleRegisterClick = () => {
+    const popupWindow = openWindowPopup("floodPreUpload");
+    if (!popupWindow) {
+      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
     }
   }
 
-  // 등록 버튼 클릭 핸들러
-  const handleRegisterClick = () => {
-    setIsUploadModalOpen(true);
+  const handleTablePopupOpen = (fileName: string, id: string) => {
+    const popupWindow = openWindowPopup("floodPreTable", {
+      fileNm: fileName,
+      atflId: id,
+      sourcePath: window.location.pathname,
+    });
+
+    if (!popupWindow) {
+      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+    }
   }
 
 
@@ -246,7 +250,7 @@ const Page = () => {
               setFileNm(fileName);
               setAtflId(id);
               setSbmrgPrevntBizSn(tableData[index]?.sbmrgPrevntBizSn);
-              setIsTableModalOpen(true);
+              handleTablePopupOpen(fileName, id);
             }
           }}
           onPageChange={setCurPage}
@@ -254,40 +258,8 @@ const Page = () => {
           resetPageNo={isResetPage}
         />
       </ListDiv>
-      {/* 파일 업로드 모달 */}
-      <UiModal
-        open={isUploadModalOpen}
-        onOpenChange={setIsUploadModalOpen}
-        bodyClass="w-auto max-w-[90vw] min-w-[600px] h-auto"
-        noHeaderYn="N"
-        noFooterYn="Y"
-        body={
-          <OperFileUploadForm
-            title='도시침수 예방사업 추진현황 등록'
-            onSubmit={async (file, year, quater, cd, id) => {
-              await registFile(file, year, quater, cd, id)
-            }}
-          />
-        }
-      />
-      {/* 엑셀 데이터 테이블 모달 */}
-      <UiModal
-        open={isTableModalOpen}
-        onOpenChange={setIsTableModalOpen}
-        bodyClass={`
-              h-[100dvh]
-              w-[90dvw]
-              max-w-[100dvw]
-              max-h-[100dvh]
-              overflow-hidden
-              z-[101]
-              flex flex-col gap-[10px]
-            `}
-        body={<TableModal fileNm={fileNm} atflId={atflId} />}
-        useDirectRender={true}
-      />
     </>
   )
 }
 
-export default Page
\ No newline at end of file
+export default Page
diff --git a/apps/sn/app/(with-base-layout)/oper/floodPre/tableModal.tsx b/apps/sn/app/(with-base-layout)/oper/floodPre/tableModal.tsx
index 97e9d788d..4b35069af 100644
--- a/apps/sn/app/(with-base-layout)/oper/floodPre/tableModal.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/floodPre/tableModal.tsx
@@ -17,6 +17,7 @@ import { useState, useEffect } from 'react'
 import LoadingOverlay from '@/components/ui/LoadingBar'
 import { UITab, UiTable } from '@common/business_components/ui'
 import * as XLSX from 'xlsx';
+import { getBlobData } from '@/components/lib/api';
 // import { Table, TableBody, TableHeader } from "@common/components/ui";
 // import { HeadMakeFloodPre } from './headMakeFloodPre';
 // import { InputTableBody } from './inputTableBody';
@@ -54,12 +55,13 @@ const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
         return false
       }
 
-      const response = await fetch(`/attach-service/api/v1/download/${atflId}`);
-      if (!response.ok) {
-        throw new Error('파일을 가져오는 중 오류가 발생했습니다.');
+      if (atflId === '' || atflId === undefined) {
+        alert('첨부파일 ID가 없어 파일을 불러올 수 없습니다.');
+        setIsLoading(false);
+        return false;
       }
 
-      const blob = await response.blob();
+      const blob = await getBlobData(`/attach-service/api/v1/download/${atflId}`);
 
       const file = new File([blob], fileNm, {
         type: blob.type || 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
@@ -114,6 +116,8 @@ const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
       const filteredResultData = filterEmptyRows(resultData);
       setResultTableData(filteredResultData);
     } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      console.error('FloodPre attachment fetch details:', { atflId, fileNm, message });
       console.error('파일 처리 중 오류 발생:', error);
       alert('파일 처리 중 오류가 발생했습니다.');
     } finally {
@@ -267,4 +271,4 @@ const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
   )
 };
 
-export default TableModal;
\ No newline at end of file
+export default TableModal;
diff --git a/apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx b/apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx
index a078a9795..86d5d4853 100644
--- a/apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx
@@ -17,22 +17,20 @@
  * - 첨부파일 삭제및 Soft Delete 삭제: DELETE /api/v1/atfl/attachments/{atflId} (attach-service)
  */
 'use client'
-import { deleteData, postData, useCookieAuth } from '@/components/lib/api'
+import { deleteData, useCookieAuth } from '@/components/lib/api'
 import { searchData } from '@/components/lib/common/apiHelpers'
 import { formatDate, handleDownload } from '@/components/lib/utils'
 import LoadingOverlay from '@/components/ui/LoadingBar'
-import { SearchDiv, SearchFormLeft, SearchFormRight, UiTable, UiModal } from '@common/business_components/ui'
+import { SearchDiv, SearchFormLeft, SearchFormRight, UiTable } from '@common/business_components/ui'
 import ListDiv from '@common/business_components/ui/list_div'
 import { Button, DatePicker, Input, Label } from '@common/components/ui'
 import { useEffect, useState } from 'react'
 import { tableHeadlistOldPp } from '..'
-import OperFileUploadForm from '../../../components/ui/operFileUploadForm'
-import { tokenManager } from '@/entities/auth/lib/token-manager';
-import { AUTH_USER_ID } from "@/shared/config";
 import { useQuery } from "@tanstack/react-query";
 import { ENDPOINT } from "@common/components/config";
 import { getUserInfo } from "@common/components/api";
-import TableModal from './tableModal';
+import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
+import { WINDOW_POPUP_MESSAGE_TYPE } from '@/features/windowPopup/model/types';
 
 
 const Page = () => {
@@ -49,8 +47,6 @@ const Page = () => {
   const [curPage, setCurPage] = useState(1)
   const [totalData, setTotalData] = useState(0) //총 데이터 수
   const [isLoading, setIsLoading] = useState(true) //로딩 상태
-  const [isModalOpen, setIsModalOpen] = useState(false) // 등록 모달 상태
-  const [isTableModalOpen, setIsTableModalOpen] = useState(false) // 테이블 모달 상태
   const [resetSelection, setResetSelection] = useState<boolean>(false); // 선택 초기화 상태
   const [isResetPage, setIsResetPage] = useState<boolean>(false);
 
@@ -65,6 +61,17 @@ const Page = () => {
     fetchData()
   }, [])
 
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+      if (event.data?.type !== WINDOW_POPUP_MESSAGE_TYPE.OLD_PP_UPLOAD_COMPLETED) return;
+      handleSearch();
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [fromDate, toDate, pjNm, curPage]);
+
   // 페이지 변경 시마다 데이터 fetch
   useEffect(() => {
     setIsResetPage(false);
@@ -137,27 +144,25 @@ const Page = () => {
     }
   }
 
-  // 파일 등록
-  const registFile = async (fileNm: string, year: string, quater: string, cd: string, id: string) => {
-    const json = {
-      mngYr: year,
-      mngQu: quater,
-      atflCd: cd,
-      atflId: id,
-      rgtr: tokenManager.getToken(AUTH_USER_ID) || null,
-      dcrpPplMtncBizNm: fileNm
-    }
-    const data = await postData('v1/dcrpPpl', json);
-    if (data) {
-      alert('파일이 등록되었습니다.');
-      setIsModalOpen(false);
-      handleSearch();
+  // 등록 버튼 클릭 핸들러
+  const handleRegisterClick = () => {
+    const popupWindow = openWindowPopup("oldPpUpload");
+    if (!popupWindow) {
+      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
     }
   }
 
-  // 등록 버튼 클릭 핸들러
-  const handleRegisterClick = () => {
-    setIsModalOpen(true);
+  // 엑셀 데이터는 브라우저 윈도우 팝업에서 독립 조회
+  const handleTablePopupOpen = (fileName: string, id: string) => {
+    const popupWindow = openWindowPopup("oldPpTable", {
+      fileNm: fileName,
+      atflId: id,
+      sourcePath: window.location.pathname,
+    });
+
+    if (!popupWindow) {
+      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+    }
   }
 
 
@@ -242,47 +247,15 @@ const Page = () => {
               setFileNm(fileName);
               setAtflId(id);
               setDcrpPplMtncBizSn(tableData[index]?.dcrpPplMtncBizSn);
-              setIsTableModalOpen(true);
+              handleTablePopupOpen(fileName, id);
             }
           }}
           onPageChange={setCurPage}
           resetSelection={resetSelection}
         />
       </ListDiv>
-      {/* 파일 업로드 모달 */}
-      <UiModal
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        bodyClass="w-auto max-w-[90vw] min-w-[600px] h-auto"
-        noHeaderYn="N"
-        noFooterYn="Y"
-        body={
-          <OperFileUploadForm
-            title='노후 하수관로 정비사업 추진현황 등록'
-            onSubmit={async (file, year, quater, cd, id) => {
-              await registFile(file, year, quater, cd, id)
-            }}
-          />
-        }
-      />
-      {/* 엑셀 데이터 테이블 모달 */}
-      <UiModal
-        open={isTableModalOpen}
-        onOpenChange={setIsTableModalOpen}
-        bodyClass={`
-              h-[100dvh]
-              w-[90dvw]
-              max-w-[100dvw]
-              max-h-[100dvh]
-              overflow-hidden
-              z-[101]
-              flex flex-col gap-[10px]
-            `}
-        body={<TableModal fileNm={fileNm} atflId={atflId} />}
-        useDirectRender={true}
-      />
     </>
   )
 }
 
-export default Page
\ No newline at end of file
+export default Page
diff --git a/apps/sn/app/(with-base-layout)/oper/oldPp/tableModal.tsx b/apps/sn/app/(with-base-layout)/oper/oldPp/tableModal.tsx
index 707f2d526..f22df820c 100644
--- a/apps/sn/app/(with-base-layout)/oper/oldPp/tableModal.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/oldPp/tableModal.tsx
@@ -19,6 +19,7 @@ import { UITab, UiTable } from '@common/business_components/ui'
 import * as XLSX from 'xlsx';
 import { HeadMakeColSpan } from '@common/business_components/ui/table/HeadMakeColSpan';
 import { oldPpTable2HeadList, oldPpTable2NodeList, oldPpTable6HeadList, oldPpTable6NodeList } from './headList';
+import { getBlobData } from '@/components/lib/api';
 
 const TABS = [
   { val: "1", text: "raw data" },
@@ -63,12 +64,13 @@ const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
         return false;
       }
 
-      const response = await fetch(`/attach-service/api/v1/download/${atflId}`);
-      if (!response.ok) {
-        throw new Error('파일을 가져오는 중 오류가 발생했습니다.');
+      if (atflId === '' || atflId === undefined) {
+        alert('첨부파일 ID가 없어 파일을 불러올 수 없습니다.');
+        setIsLoading(false);
+        return false;
       }
 
-      const blob = await response.blob();
+      const blob = await getBlobData(`/attach-service/api/v1/download/${atflId}`);
 
       const file = new File([blob], fileNm, {
         type: blob.type || 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
@@ -246,6 +248,8 @@ const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
         }));
       setTableData6(filteredData6);
     } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      console.error('OldPp attachment fetch details:', { atflId, fileNm, message });
       console.error('파일 처리 중 오류 발생:', error);
       alert('파일 처리 중 오류가 발생했습니다.');
     } finally {
@@ -476,4 +480,4 @@ const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
   )
 };
 
-export default TableModal;
\ No newline at end of file
+export default TableModal;
diff --git a/apps/sn/app/auth/login/page.tsx b/apps/sn/app/auth/login/page.tsx
new file mode 100644
index 000000000..7a35b0ddd
--- /dev/null
+++ b/apps/sn/app/auth/login/page.tsx
@@ -0,0 +1,2 @@
+import { LoginPage } from "@/features/auth/login";
+export default LoginPage;
diff --git a/apps/sn/app/auth/login/route.ts b/apps/sn/app/auth/login/route-bak.ts
similarity index 83%
rename from apps/sn/app/auth/login/route.ts
rename to apps/sn/app/auth/login/route-bak.ts
index 65bbce15e..796537cc3 100644
--- a/apps/sn/app/auth/login/route.ts
+++ b/apps/sn/app/auth/login/route-bak.ts
@@ -1,10 +1,12 @@
 import { NextRequest, NextResponse } from "next/server";
+import { tokenManager } from "@/entities/auth/lib/token-manager";
 
 export async function GET(request: NextRequest) {
   const hostname = request.nextUrl.hostname;
   const redirectUrl = process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "https://portal.hasuon.or.kr";
 
   if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "con.mind-one.co.kr") {
+    tokenManager.clearAuthToken();
     return NextResponse.redirect(new URL("/", request.url));  // 로컬 및 개발 환경
   } else {
     return NextResponse.redirect(new URL(redirectUrl)); // 공단 환경
diff --git a/apps/sn/app/components/lib/api/index.ts b/apps/sn/app/components/lib/api/index.ts
index d567eec05..28c9f4500 100644
--- a/apps/sn/app/components/lib/api/index.ts
+++ b/apps/sn/app/components/lib/api/index.ts
@@ -11,13 +11,51 @@
  */
 import { useEffect, useState } from "react";
 import axios from 'axios';
+import { CLAIM_NAME, SITE_ID } from "@/shared/config";
+import { tokenManager } from "@/entities/auth/lib/token-manager";
 
 const BASE_URL = '/sewerage-service/api';
+const DEFAULT_HEADERS = {
+  "X-Site-Id": SITE_ID,
+};
+const LOGIN_PAGE_URL =
+  process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
+
+const withSiteIdHeaders = (headers: HeadersInit = {}) => ({
+  ...headers,
+  ...DEFAULT_HEADERS,
+});
+
+const resolveApiUrl = (url: string) =>
+  url.startsWith('/') ? `${url}` : `${BASE_URL}/${url}`;
+
+const handleUnauthorizedResponse = () => {
+  if (typeof window === "undefined") return;
+
+  const remainingMs = tokenManager.getRemainingMsFromToken(CLAIM_NAME);
+  const isExpired = remainingMs === null || remainingMs <= 0;
+
+  if (!isExpired) return;
+
+  tokenManager.clearAuthToken();
+
+  const isLoginPage =
+    window.location.pathname === "/auth/login" ||
+    window.location.pathname.startsWith("/auth/login/");
+
+  if (!isLoginPage) {
+    window.location.assign(LOGIN_PAGE_URL);
+  }
+};
 
 export const getData = async (url: string): Promise<any> => {
-  const res = await fetch(url.startsWith('/') ? `${url}` : `${BASE_URL}/${url}`, {
+  const res = await fetch(resolveApiUrl(url), {
     method: "GET",
+    headers: withSiteIdHeaders(),
   });
+  if (res.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if (res.ok) {
     try {
       // 응답이 비어있는지 확인
@@ -47,12 +85,15 @@ export const getData = async (url: string): Promise<any> => {
 export const postData = async (url: string, data: object): Promise<any> => {
   const options: RequestInit = {
     method: "POST",
-    headers: {
+    headers: withSiteIdHeaders({
       "Content-Type": "application/json",
-    },
+    }),
     body: JSON.stringify(data),
   };
   const res = await fetch(`${BASE_URL}/${url}`, options);
+  if (res.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if (res.ok) {
     const resData = await res.json();
     console.log('postData response:', resData);
@@ -60,8 +101,49 @@ export const postData = async (url: string, data: object): Promise<any> => {
   }
 };
 
+const parseDownloadFileName = (contentDisposition: string | null) => {
+  if (!contentDisposition) return undefined;
+
+  const utf8Match = contentDisposition.match(/filename\*\s*=\s*UTF-8''([^;]+)/i);
+  if (utf8Match?.[1]) {
+    return decodeURIComponent(utf8Match[1].trim());
+  }
+
+  const plainMatch = contentDisposition.match(/filename\s*=\s*"?([^\";]+)"?/i);
+  return plainMatch?.[1]?.trim();
+};
+
+export const postBlobData = async (
+  url: string,
+  data: object,
+): Promise<{ blob: Blob; fileName?: string }> => {
+  const res = await fetch(resolveApiUrl(url), {
+    method: "POST",
+    headers: withSiteIdHeaders({
+      "Content-Type": "application/json",
+    }),
+    body: JSON.stringify(data),
+  });
+  if (res.status === 401) {
+    handleUnauthorizedResponse();
+  }
+
+  if (!res.ok) {
+    const errorText = await res.text().catch(() => "");
+    throw new Error(
+      `Failed to fetch blob: ${res.status} ${res.statusText}${errorText ? ` - ${errorText.slice(0, 200)}` : ""} (${url})`,
+    );
+  }
+
+  return {
+    blob: await res.blob(),
+    fileName: parseDownloadFileName(res.headers.get("content-disposition")),
+  };
+};
+
 export const postMutiPart = async (url: string, data: FormData): Promise<any> => {
   const res = await axios.post(`${BASE_URL}/${url}`, data, {
+    headers: DEFAULT_HEADERS,
     timeout: 600000, // 10분
   });
   console.log('postMultiPart response:', res);
@@ -71,12 +153,15 @@ export const postMutiPart = async (url: string, data: FormData): Promise<any> =>
 export const putData = async (url: string, data: object): Promise<any> => {
   const options: RequestInit = {
     method: "PUT",
-    headers: {
+    headers: withSiteIdHeaders({
       "Content-Type": "application/json",
-    },
+    }),
     body: JSON.stringify(data),
   };
   const res = await fetch(`${BASE_URL}/${url}`, options);
+  if (res.status === 401) {
+    handleUnauthorizedResponse();
+  }
   const resData = await res.json();
   console.log('putData response:', resData);
   return resData.data;
@@ -85,21 +170,83 @@ export const putData = async (url: string, data: object): Promise<any> => {
 export const deleteData = async (url: string, data?: object): Promise<any> => {
   const options: RequestInit = {
     method: "DELETE",
-    headers: {
+    headers: withSiteIdHeaders({
       "Content-Type": "application/json",
-    },
+    }),
     body: data ? JSON.stringify(data) : undefined,
   };
-  const res = await fetch(url.startsWith('/') ? `${url}` : `${BASE_URL}/${url}`, options);
+  const res = await fetch(resolveApiUrl(url), options);
+  if (res.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if (res.status === 204) return true
   return res;
 };
 
+// GET 응답을 공통 data wrapper 없이 원문 JSON으로 읽는다. init은 지도 bbox 요청처럼 AbortSignal이 필요한 호출에서 사용한다.
+export const getRawJson = async (url: string, init: RequestInit = {}): Promise<any> => {
+  const res = await fetch(resolveApiUrl(url), {
+    ...init,
+    method: "GET",
+    headers: withSiteIdHeaders(init.headers),
+  });
+  if (res.status === 401) {
+    handleUnauthorizedResponse();
+  }
+
+  if (!res.ok) {
+    const errorText = await res.text().catch(() => "");
+    throw new Error(
+      `Failed to fetch data: ${res.status} ${res.statusText}${errorText ? ` - ${errorText.slice(0, 200)}` : ""}`,
+    );
+  }
+
+  const contentLength = res.headers.get('content-length');
+  if (contentLength === '0') {
+    return null;
+  }
+
+  const text = await res.text();
+  if (!text || text.trim() === '') {
+    return null;
+  }
+
+  try {
+    return JSON.parse(text);
+  } catch (error) {
+    console.error('JSON parsing error:', error);
+    throw new Error(`Invalid JSON response from server: ${url}`);
+  }
+};
+
+export const getBlobData = async (url: string): Promise<Blob> => {
+  const res = await fetch(resolveApiUrl(url), {
+    method: "GET",
+    headers: withSiteIdHeaders(),
+  });
+  if (res.status === 401) {
+    handleUnauthorizedResponse();
+  }
+
+  if (!res.ok) {
+    const errorText = await res.text().catch(() => "");
+    throw new Error(
+      `Failed to fetch blob: ${res.status} ${res.statusText}${errorText ? ` - ${errorText.slice(0, 200)}` : ""} (${url})`,
+    );
+  }
+
+  return res.blob();
+};
+
 // DC API 호출
 export const getDcData = async (url: string, resType: string = "json"): Promise<any> => {
   const res = await fetch('/dc-service' + url, {
     method: "GET",
+    headers: withSiteIdHeaders(),
   });
+  if (res.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if (res.ok) {
     let data;
     if (resType === "json") data = await res.json();
@@ -114,7 +261,11 @@ export const getDcData = async (url: string, resType: string = "json"): Promise<
 export const getCmsData = async (url: string, data?: object): Promise<any> => {
   const res = await fetch('/cms-service' + url, {
     method: "GET",
+    headers: withSiteIdHeaders(),
   });
+  if (res.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if (res.ok) {
     const data = await res.json();
     return data;
@@ -126,7 +277,11 @@ export const getCmsData = async (url: string, data?: object): Promise<any> => {
 export const getGeoData = async (url: string, data?: object): Promise<any> => {
   const res = await fetch('/geoserver' + url, {
     method: "GET",
+    headers: withSiteIdHeaders(),
   });
+  if (res.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if (res.ok) {
     const data = await res.json();
     return data;
@@ -157,4 +312,4 @@ export const useCookieAuth = () => {
   }, []);
 
   return data;
-};
\ No newline at end of file
+};
diff --git a/apps/sn/app/components/lib/utils/fileDeleteUtil.tsx b/apps/sn/app/components/lib/utils/fileDeleteUtil.tsx
index 768c3ef9c..d9525f028 100644
--- a/apps/sn/app/components/lib/utils/fileDeleteUtil.tsx
+++ b/apps/sn/app/components/lib/utils/fileDeleteUtil.tsx
@@ -13,6 +13,7 @@
  * - 첨부파일 삭제및 Soft Delete 삭제(첨부파일코드로 삭제): DELETE /api/v1/atfl/attachments/atflCd/{atflCd} (attach-service)
  */
 import { getCookie } from "@/shared/lib";
+import { SITE_ID } from "@/shared/config";
 import { ENDPOINT } from "../api/attachment/attachment-service";
 
 const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
@@ -43,6 +44,7 @@ export const handleDelete = async (
         method: "DELETE",
         headers: {
           "Content-Type": "application/json",
+          "X-Site-Id": SITE_ID,
           [CLAIM_NAME]: getCookie(CLAIM_NAME) ?? "",
           [AUTH_USER_ID]: getCookie(AUTH_USER_ID) ?? "",
         },
@@ -118,4 +120,4 @@ export const handleDelete = async (
 //     options?.handleDeleteError?.(deleteError);
 //     throw deleteError;
 //   }
-// };
\ No newline at end of file
+// };
diff --git a/apps/sn/app/components/lib/utils/fileDownload.ts b/apps/sn/app/components/lib/utils/fileDownload.ts
index 855488692..093bc46bf 100644
--- a/apps/sn/app/components/lib/utils/fileDownload.ts
+++ b/apps/sn/app/components/lib/utils/fileDownload.ts
@@ -10,10 +10,15 @@
  * - Fetch 기반 HTTP 요청 처리
  */
 
+import { SITE_ID } from "@/shared/config";
+
 export const handleDownload = async (api: string, fileNm: string) => {
   try {
     const response = await fetch(api, {
       method: 'GET',
+      headers: {
+        "X-Site-Id": SITE_ID,
+      },
     });
     if (!response.ok) throw new Error('파일 다운로드 실패');
 
@@ -34,4 +39,4 @@ export const fileDownload = (data: Blob, fileName: string) => { // Blob데이터
   // 메모리 해제
   link.remove();
   window.URL.revokeObjectURL(url);
-}
\ No newline at end of file
+}
diff --git a/apps/sn/app/components/ui/modal.tsx b/apps/sn/app/components/ui/modal.tsx
deleted file mode 100644
index dce0ee2b5..000000000
--- a/apps/sn/app/components/ui/modal.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * 📄 Modal Component
- * 모달 컴포넌트
- *
- * - 모달 열기/닫기 상태 관리
- * - 제목 및 내용 표시
- * - 저장 및 닫기 버튼 지원
- * - 반응형 크기 조정 (최대/최소 너비 및 높이)
- * - 오버레이 및 z-index를 통한 최상위 레이어 배치
- * - 접근성 지원 (aria-describedby)
- */
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogOverlay } from '@common/components/ui'
-import React from 'react'
-
-interface ModalProps {
-  isModalOpen: boolean;
-  setIsModalOpen: (open: boolean) => void;
-  title?: string;
-  children: React.ReactNode;
-  closeModal: () => void;
-  saveModal?: () => void;
-  description?: string;
-}
-
-const Modal: React.FC<ModalProps> = ({ isModalOpen, setIsModalOpen, title, children, closeModal, saveModal }) => {
-  return (
-    <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-      <DialogOverlay className='z-[200]' />
-      <DialogContent className="w-auto max-w-[1200px] min-w-[400px] min-h-[150px] h-auto max-h-[450px] overflow-auto z-[1000]" aria-describedby={undefined}>
-        {title ? <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-        </DialogHeader> : null}
-        {children}
-        <DialogFooter>
-          <div className='flex justify-end gap-2'>
-            {saveModal ? <button className="px-4 py-2 bg-primary text-white rounded" onClick={saveModal}>저장</button> : null}
-            <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closeModal}>닫기</button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default Modal
\ No newline at end of file
diff --git a/apps/sn/app/html/(map-layout)/aged-pipe/AgedPipeDetailPanel.tsx b/apps/sn/app/html/(map-layout)/aged-pipe/AgedPipeDetailPanel.tsx
new file mode 100644
index 000000000..88b5ddbe8
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/aged-pipe/AgedPipeDetailPanel.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { Button } from "@common/components";
+import { VerticalTable } from "@/components/ui/verticalTable";
+import {
+  AGED_PIPE_DETAIL_FIELDS,
+  getElapsedYears,
+  getPipeDisplayValue,
+} from "./agedPipeUtils";
+
+type Props = {
+  featureData: any;
+  onClose: () => void;
+};
+
+export default function AgedPipeDetailPanel({ featureData, onClose }: Props) {
+  const source = featureData?.values_ ?? featureData ?? {};
+  const facilityNo = String(getPipeDisplayValue(source, "fclt_mng_no") ?? "-");
+  const elapsedYears = getElapsedYears(source.instl_ymd ?? source.instlYmd);
+  const detailFields = [
+    ...AGED_PIPE_DETAIL_FIELDS,
+    { id: "elapsedYears", title: "경과년도" },
+  ];
+  const tableData = detailFields.reduce<Record<string, string>>((acc, field) => {
+    acc[field.id] =
+      field.id === "elapsedYears"
+        ? elapsedYears === null
+          ? "확인불가"
+          : `${elapsedYears}년`
+        : String(getPipeDisplayValue(source, field.id) ?? "-");
+    return acc;
+  }, {});
+
+  return (
+    <div className="absolute right-0 top-0 z-[50] flex h-[calc(100vh-5rem)] w-[350px] flex-col overflow-hidden border-l border-gray-300 bg-white">
+      <div className="card-header relative flex items-center justify-between bg-primary p-4">
+        <div>
+          <div className="text-2xl font-medium text-white text-label">
+            하수관로 정보 <br />관리번호 : {facilityNo}
+          </div>
+        </div>
+        <Button
+          type="button"
+          size="xs"
+          className="text-white hover:text-gray-300"
+          onClick={onClose}
+        >
+          ✕
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+        <VerticalTable
+          headName="기본정보"
+          tableData={[tableData]}
+          headlist={detailFields}
+          pageSize={20}
+          total={0}
+          cellClick={undefined}
+          onPageChange={() => undefined}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sn/app/html/(map-layout)/aged-pipe/AgedPipeFilterPanel.tsx b/apps/sn/app/html/(map-layout)/aged-pipe/AgedPipeFilterPanel.tsx
new file mode 100644
index 000000000..a80ced9c9
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/aged-pipe/AgedPipeFilterPanel.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { useState } from "react";
+import type { AgedPipeFilters } from "./agedPipeUtils";
+
+type OverlayProps = {
+  onClose?: () => void;
+  isPlaying?: boolean;
+  setIsPlaying?: (value: boolean) => void;
+  totalSteps?: number;
+  currentStep?: number;
+};
+
+type Props = OverlayProps & {
+  title?: string;
+  filters: AgedPipeFilters;
+  onFiltersChange: (filters: AgedPipeFilters) => void;
+  onApply: () => void;
+};
+
+export default function AgedPipeFilterPanel({
+  title = "지반침하정보",
+  filters,
+  onFiltersChange,
+  onApply,
+}: Props) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <div className="overflow-hidden rounded-sm border border-[#bdbdbd] bg-white">
+      <div className="relative flex min-h-[34px] items-center justify-center border-b border-[#eeeeee] bg-white px-8">
+        <button
+          type="button"
+          className="absolute left-2 top-1/2 h-[18px] w-[18px] -translate-y-1/2 bg-transparent text-[1.2rem] leading-none text-[#555]"
+          onClick={() => setIsCollapsed((value) => !value)}
+          title={isCollapsed ? "펼치기" : "접기"}
+        >
+          {isCollapsed ? "›" : "⌄"}
+        </button>
+        <span className="text-[1.3rem] font-semibold text-[#4b5563]">{title}</span>
+      </div>
+
+      {!isCollapsed && (
+        <div className="px-3 py-2">
+          <div className="flex min-h-[30px] items-center gap-1 whitespace-nowrap text-[1.2rem] text-[#333]">
+            <label htmlFor="aged-pipe-elapsed-years">경과년도(년)</label>
+            <input
+              id="aged-pipe-elapsed-years"
+              className="h-[22px] w-10 border border-[#ccd6df] px-1 text-center text-[1.2rem]"
+              inputMode="numeric"
+              value={String(filters.elapsedYears)}
+              onChange={(event) => {
+                const next = Number(event.target.value.replace(/[^0-9]/g, "") || "0");
+                onFiltersChange({ ...filters, elapsedYears: next });
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") onApply();
+              }}
+            />
+            <button
+              type="button"
+              className="grid h-[22px] w-[22px] place-items-center rounded-full bg-[#31a83b] text-[1.4rem] font-bold leading-none text-white"
+              onClick={onApply}
+              title="적용"
+            >
+              ✓
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/sn/app/html/(map-layout)/aged-pipe/AgedPipeListModal.tsx b/apps/sn/app/html/(map-layout)/aged-pipe/AgedPipeListModal.tsx
new file mode 100644
index 000000000..a5c90e184
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/aged-pipe/AgedPipeListModal.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { useRef } from "react";
+import { Button, Input } from "@common/components";
+import { UiTable } from "@common/business_components/ui";
+import LoadingOverlay from "@/components/ui/LoadingBar";
+import useStore from "@/store/useStore";
+import {
+  AGED_PIPE_LIST_HEADLIST,
+  type AgedPipeFilters,
+  type AgedPipeRow,
+} from "./agedPipeUtils";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  filters: AgedPipeFilters;
+  onFiltersChange: (filters: AgedPipeFilters) => void;
+  rows: AgedPipeRow[];
+  total: number;
+  currentPage: number;
+  isLoading: boolean;
+  onSearch: (page?: number) => void;
+  onDownload: () => void;
+  onRowDoubleClick: (row: AgedPipeRow) => void;
+};
+
+export default function AgedPipeListModal({
+  open,
+  onOpenChange,
+  filters,
+  onFiltersChange,
+  rows,
+  total,
+  currentPage,
+  isLoading,
+  onSearch,
+  onDownload,
+  onRowDoubleClick,
+}: Props) {
+  const { ctpv, sgg } = useStore();
+  const lastClickRef = useRef<{ index: number; clickedAt: number } | null>(null);
+  const sggOptions = filters.ctpvCd === "0"
+    ? sgg
+    : sgg.filter((item) => String(item.val).startsWith(filters.ctpvCd.slice(0, 2)));
+
+  const handleRowClick = (index?: number) => {
+    if (typeof index !== "number") return;
+    const row = rows[index];
+    if (!row) return;
+
+    const now = Date.now();
+    const lastClick = lastClickRef.current;
+    if (lastClick && lastClick.index === index && now - lastClick.clickedAt < 300) {
+      lastClickRef.current = null;
+      onRowDoubleClick(row);
+      return;
+    }
+
+    lastClickRef.current = { index, clickedAt: now };
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-[70] flex items-center justify-center px-6 py-8">
+      <div className="pointer-events-auto relative flex max-h-[82vh] w-[min(1120px,94vw)] flex-col overflow-hidden border border-[#dbe2e6] bg-white shadow-[0_0_12px_rgba(0,0,0,0.25)]">
+        <LoadingOverlay isLoading={isLoading} />
+        <div className="flex items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
+          <div>
+            <div className="text-[1.45rem] font-semibold text-white">노후관로 목록</div>
+          </div>
+          <Button
+            type="button"
+            color="white"
+            size="xs"
+            className="border border-white/30 px-3 py-1 text-[1.05rem] text-white"
+            onClick={() => onOpenChange(false)}
+          >
+            닫기
+          </Button>
+        </div>
+
+        <div className="relative overflow-y-auto p-4">
+          <div className="grid grid-cols-1 gap-3 bg-slate-50 pb-4 md:grid-cols-[110px_minmax(0,1fr)_110px_minmax(0,1fr)_auto_auto]">
+            <label className="block">
+              <div className="mb-1 text-[1.05rem] font-medium text-slate-700">경과년수</div>
+              <Input
+                className="h-10 !text-[1.1rem]"
+                inputMode="numeric"
+                value={String(filters.elapsedYears)}
+                onChange={(event) => {
+                  const next = Number(event.target.value.replace(/[^0-9]/g, "") || "0");
+                  onFiltersChange({ ...filters, elapsedYears: next });
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") onSearch(1);
+                }}
+              />
+            </label>
+
+            <label className="block">
+              <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
+              <select
+                className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+                value={filters.ctpvCd}
+                onChange={(event) =>
+                  onFiltersChange({
+                    ...filters,
+                    ctpvCd: event.target.value,
+                    sggCd: "0",
+                  })
+                }
+              >
+                <option value="0">전체</option>
+                {ctpv.map((item) => (
+                  <option key={item.val} value={String(item.val)}>
+                    {item.text}
+                  </option>
+                ))}
+              </select>
+            </label>
+
+            <label className="block">
+              <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
+              <select
+                className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+                value={filters.sggCd}
+                onChange={(event) => onFiltersChange({ ...filters, sggCd: event.target.value })}
+              >
+                <option value="0">전체</option>
+                {sggOptions.map((item) => (
+                  <option key={item.val} value={String(item.val)}>
+                    {item.text}
+                  </option>
+                ))}
+              </select>
+            </label>
+
+            <div className="flex flex-wrap gap-2 md:col-span-3 md:justify-end">
+              <Button type="button" size="sm" color="primary" className="h-10 px-5 !text-[1.1rem]" onClick={() => onSearch(1)}>
+                조회
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                color="green"
+                className="h-10 px-5 !text-[1.1rem]"
+                onClick={onDownload}
+              >
+                다운로드
+              </Button>
+            </div>
+          </div>
+
+          <div className="border-t border-slate-200 pt-3">
+            <UiTable<AgedPipeRow>
+              headName={<>노후관로 조회 결과</>}
+              tableData={rows}
+              headlist={AGED_PIPE_LIST_HEADLIST}
+              pageSize={10}
+              total={total}
+              cellClick={(index) => handleRowClick(index)}
+              onPageChange={(page) => onSearch(page)}
+              curPage={currentPage}
+              widthFixed={true}
+            />
+          </div>
+
+          <div className="px-[1.2rem] pb-1 text-[1rem] text-slate-500">
+            목록 행을 더블클릭하면 지도 이동 후 상세 패널이 열립니다.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sn/app/html/(map-layout)/aged-pipe/agedPipeUtils.ts b/apps/sn/app/html/(map-layout)/aged-pipe/agedPipeUtils.ts
new file mode 100644
index 000000000..baff4b003
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/aged-pipe/agedPipeUtils.ts
@@ -0,0 +1,221 @@
+"use client";
+
+import type { SelectDataType } from "@common/business_components";
+import { formatDisplayData } from "@/components/lib/utils/formatDisplayValue";
+import {
+  MS_SWAGE_PPL_CODES,
+  MS_SWAGE_PPL_USE_CODES,
+  MsSwagePplCol,
+} from "../map/components/common/table";
+
+export type AgedPipeFilters = {
+  elapsedYears: number;
+  ctpvCd: string;
+  sggCd: string;
+};
+
+export type AgedPipeRow = {
+  fid: string;
+  lyrTypeNm: string;
+  rowNumber: number;
+  fcltMngNo: string;
+  instlYmd: string;
+  pdmtVl: string | number;
+  prlgVl: string | number;
+  usgCd: string;
+  mqltCd: string;
+  elapsedYears: number | string;
+  ctpvNm?: string;
+  sggNm?: string;
+  [key: string]: unknown;
+};
+
+type PipeSource = Record<string, unknown>;
+
+const useMap = new Map(MS_SWAGE_PPL_USE_CODES.map((item) => [item.val.trim(), item.text]));
+const materialMap = new Map(MS_SWAGE_PPL_CODES.map((item) => [item.val.trim(), item.text]));
+
+export const AGED_PIPE_DEFAULT_FILTERS: AgedPipeFilters = {
+  elapsedYears: 20,
+  ctpvCd: "0",
+  sggCd: "0",
+};
+
+export const AGED_PIPE_LIST_HEADLIST = [
+  { id: "rowNumber", title: "NO", widthPercent: 6 },
+  { id: "fcltMngNo", title: "시설관리번호", widthPercent: 18 },
+  { id: "instlYmd", title: "설치일자", widthPercent: 12 },
+  { id: "pdmtVl", title: "관경(mm)", widthPercent: 10 },
+  { id: "prlgVl", title: "연장(m)", widthPercent: 10 },
+  { id: "usgCd", title: "용도", widthPercent: 14 },
+  { id: "mqltCd", title: "재질", widthPercent: 18 },
+  { id: "elapsedYears", title: "경과년도", widthPercent: 12, align: "right" },
+];
+
+export const AGED_PIPE_EXCEL_HEADER = {
+  rowNumber: "NO",
+  fcltMngNo: "시설관리번호",
+  instlYmd: "설치일자",
+  pdmtVl: "관경(mm)",
+  prlgVl: "연장(m)",
+  usgCd: "용도",
+  mqltCd: "재질",
+  elapsedYears: "경과년도",
+};
+
+export const AGED_PIPE_DETAIL_FIELDS = MsSwagePplCol;
+
+const getToday = () => new Date();
+
+const pad2 = (value: number) => String(value).padStart(2, "0");
+
+export const getCutoffYmd = (elapsedYears: number) => {
+  const today = getToday();
+  const cutoff = new Date(today.getFullYear() - elapsedYears, today.getMonth(), today.getDate());
+  return `${cutoff.getFullYear()}${pad2(cutoff.getMonth() + 1)}${pad2(cutoff.getDate())}`;
+};
+
+const normalizeYmd = (value: unknown) => String(value ?? "").replace(/[^0-9]/g, "").slice(0, 8);
+
+const getCodePrefix = (source: PipeSource) =>
+  String(source.pbadmsEmdCd ?? source.pbadms_emd_cd ?? "").trim();
+
+const resolveRegionName = (
+  code: string,
+  directName: unknown,
+  options: SelectDataType[],
+  prefixLength: number,
+) => {
+  if (String(directName ?? "").trim()) return String(directName);
+  const prefix = code.slice(0, prefixLength);
+  return options.find((item) => String(item.val).trim() === prefix)?.text ?? "";
+};
+
+export const getElapsedYears = (value: unknown) => {
+  const normalized = normalizeYmd(value);
+  if (normalized.length < 4) return null;
+
+  const year = Number(normalized.slice(0, 4));
+  const month = Number(normalized.slice(4, 6) || "1");
+  const day = Number(normalized.slice(6, 8) || "1");
+  if (!year) return null;
+
+  const today = getToday();
+  let elapsed = today.getFullYear() - year;
+  if (
+    today.getMonth() + 1 < month ||
+    (today.getMonth() + 1 === month && today.getDate() < day)
+  ) {
+    elapsed -= 1;
+  }
+
+  return Math.max(elapsed, 0);
+};
+
+export const buildAgedPipeCqlFilters = (filters: AgedPipeFilters) => {
+  const cqlFilters: string[] = [];
+  cqlFilters.push(`instl_ymd <= '${getCutoffYmd(filters.elapsedYears)}'`);
+
+  if (filters.sggCd !== "0") {
+    cqlFilters.push(`pbadms_emd_cd LIKE '${filters.sggCd}%'`);
+  } else if (filters.ctpvCd !== "0") {
+    cqlFilters.push(`pbadms_emd_cd LIKE '${filters.ctpvCd}%'`);
+  }
+
+  return cqlFilters;
+};
+
+export const matchesAgedPipeFilters = (source: PipeSource, filters: AgedPipeFilters) => {
+  const instlYmd = normalizeYmd(source.instl_ymd ?? source.instlYmd);
+  if (!instlYmd || instlYmd > getCutoffYmd(filters.elapsedYears)) return false;
+
+  const regionCode = getCodePrefix(source);
+  if (filters.sggCd !== "0") return regionCode.startsWith(filters.sggCd);
+  if (filters.ctpvCd !== "0") return regionCode.startsWith(filters.ctpvCd);
+  return true;
+};
+
+export const toDisplayPipeRow = (
+  source: PipeSource,
+  index: number,
+  page: number,
+  ctpvOptions: SelectDataType[],
+  sggOptions: SelectDataType[],
+): AgedPipeRow => {
+  const formatted = formatDisplayData(source) as PipeSource;
+  const codePrefix = getCodePrefix(source);
+  const instlYmd = formatted.instlYmd ?? source.instlYmd ?? formatted.instl_ymd ?? source.instl_ymd;
+  const trimmedUse = String(source.usgCd ?? source.usg_cd ?? "").trim();
+  const trimmedMaterial = String(source.mqltCd ?? source.mqlt_cd ?? "").trim();
+  const pdmtVl = formatted.pdmtVl ?? source.pdmtVl ?? source.pdmt_vl ?? "-";
+  const prlgVl = formatted.prlgVl ?? source.prlgVl ?? source.prlg_vl ?? "-";
+
+  return {
+    ...source,
+    ...formatted,
+    fid: String(source.fid ?? ""),
+    lyrTypeNm: String(source.lyrTypeNm ?? "tb_ms_swage_ppl"),
+    rowNumber: (page - 1) * 10 + index + 1,
+    fcltMngNo: String(formatted.fcltMngNo ?? source.fcltMngNo ?? source.fclt_mng_no ?? "-"),
+    instlYmd: String(instlYmd ?? "-"),
+    pdmtVl: typeof pdmtVl === "number" ? pdmtVl : String(pdmtVl),
+    prlgVl: typeof prlgVl === "number" ? prlgVl : String(prlgVl),
+    usgCd: useMap.get(trimmedUse) ?? String(formatted.usgCd ?? source.usgCd ?? source.usg_cd ?? "-"),
+    mqltCd:
+      materialMap.get(trimmedMaterial) ??
+      String(formatted.mqltCd ?? source.mqltCd ?? source.mqlt_cd ?? "-"),
+    elapsedYears: getElapsedYears(source.instlYmd ?? source.instl_ymd) ?? "-",
+    ctpvNm: resolveRegionName(
+      codePrefix,
+      formatted.ctpvNm ?? source.ctpvNm ?? source.ctpv_nm,
+      ctpvOptions,
+      2,
+    ),
+    sggNm: resolveRegionName(
+      codePrefix,
+      formatted.sggNm ?? source.sggNm ?? source.sgg_nm,
+      sggOptions,
+      5,
+    ),
+  };
+};
+
+export const getPipeDisplayValue = (source: PipeSource, key: string) => {
+  const formatted = formatDisplayData(source) as PipeSource;
+  const keyMap: Record<string, string[]> = {
+    fclt_mng_no: ["fclt_mng_no", "fcltMngNo"],
+    inst_mng_no: ["inst_mng_no", "instMngNo"],
+    instl_ymd: ["instl_ymd", "instlYmd"],
+    mapsht_no: ["mapsht_no", "mapshtNo"],
+    pdmt_vl: ["pdmt_vl", "pdmtVl"],
+    prlg_vl: ["prlg_vl", "prlgVl"],
+    usg_cd: ["usg_cd", "usgCd"],
+    mqlt_cd: ["mqlt_cd", "mqltCd"],
+    avg_grdn: ["avg_grdn", "avgGrdn"],
+    drtw_mltv_area: ["drtw_mltv_area", "drtwMltvArea"],
+    excln_mltv_area: ["excln_mltv_area", "exclnMltvArea"],
+    tmpt_dpth: ["tmpt_dpth", "tmptDpth"],
+    tmpt_mhl_mng_no: ["tmpt_mhl_mng_no", "tmptMhlMngNo"],
+    scend_dpth: ["scend_dpth", "scendDpth"],
+    scend_mhl_mng_no: ["scend_mhl_mng_no", "scendMhlMngNo"],
+    trfln_cnt: ["trfln_cnt", "trflnCnt"],
+    vrtc_len: ["vrtc_len", "vrtcLen"],
+    wdth_len: ["wdth_len", "wdthLen"],
+  };
+
+  const candidates = keyMap[key] ?? [key];
+  for (const candidate of candidates) {
+    const value = formatted[candidate] ?? source[candidate];
+    if (value !== undefined && value !== null && value !== "") {
+      if (candidate === "usg_cd" || candidate === "usgCd") {
+        return useMap.get(String(source.usg_cd ?? source.usgCd ?? "").trim()) ?? value;
+      }
+      if (candidate === "mqlt_cd" || candidate === "mqltCd") {
+        return materialMap.get(String(source.mqlt_cd ?? source.mqltCd ?? "").trim()) ?? value;
+      }
+      return value;
+    }
+  }
+
+  return "-";
+};
diff --git a/apps/sn/app/html/(map-layout)/aged-pipe/page.tsx b/apps/sn/app/html/(map-layout)/aged-pipe/page.tsx
new file mode 100644
index 000000000..549273158
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/aged-pipe/page.tsx
@@ -0,0 +1,391 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Gis from "@common/business_components/ui/map/Gis";
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import { downloadExcelWithKoreanHeaders } from "@common/business_components/ui";
+import Stroke from "ol/style/Stroke.js";
+import Style from "ol/style/Style.js";
+import useStore from "@/store/useStore";
+import { getData, getRawJson } from "@/components/lib/api";
+import AgedPipeFilterPanel from "./AgedPipeFilterPanel";
+import AgedPipeDetailPanel from "./AgedPipeDetailPanel";
+import AgedPipeListModal from "./AgedPipeListModal";
+import {
+  AGED_PIPE_DEFAULT_FILTERS,
+  AGED_PIPE_EXCEL_HEADER,
+  buildAgedPipeCqlFilters,
+  matchesAgedPipeFilters,
+  toDisplayPipeRow,
+  type AgedPipeFilters,
+  type AgedPipeRow,
+} from "./agedPipeUtils";
+
+const agedPipeHighlightStyle = new Style({
+  stroke: new Stroke({
+    color: "rgba(239, 68, 68, 0.95)",
+    width: 5,
+  }),
+  zIndex: 999,
+});
+
+const PIPE_LAYER_TYPE = "tb_ms_swage_ppl";
+const EmptySearchView = () => null;
+const DESIGN_PREVIEW_FEATURE = {
+  fid: "preview-aged-pipe",
+  lyrTypeNm: PIPE_LAYER_TYPE,
+  fcltMngNo: "SN-PPL-000123",
+  instMngNo: "INST-4458",
+  instlYmd: "19981215",
+  mapshtNo: "M-12-34",
+  pdmtVl: 450,
+  prlgVl: 132.5,
+  usgCd: "합류관",
+  mqltCd: "철근콘크리트관(RC)",
+  avgGrdn: 0.0021,
+  drtwMltvArea: 2140,
+  exclnMltvArea: 980,
+  tmptDpth: 2.1,
+  tmptMhlMngNo: "TMH-2201",
+  scendDpth: 2.4,
+  scendMhlMngNo: "SMH-2202",
+  trflnCnt: 2,
+  vrtcLen: 1.2,
+  wdthLen: 1.2,
+};
+
+const Map = () => {
+  const gisMaps = useRef<any | null>(null);
+  const [mapReady, setMapReady] = useState(false);
+  const [treeData, setTreeData] = useState<any>([]);
+  const [isDetailOpen, setIsDetailOpen] = useState(true);
+  const [featureData, setFeatureData] = useState<any>(DESIGN_PREVIEW_FEATURE);
+  const [draftFilters, setDraftFilters] = useState<AgedPipeFilters>(AGED_PIPE_DEFAULT_FILTERS);
+  const [appliedFilters, setAppliedFilters] = useState<AgedPipeFilters>(AGED_PIPE_DEFAULT_FILTERS);
+  const [isListOpen, setIsListOpen] = useState(true);
+  const [listRows, setListRows] = useState<AgedPipeRow[]>([
+    {
+      fid: "preview-aged-pipe",
+      lyrTypeNm: PIPE_LAYER_TYPE,
+      rowNumber: 1,
+      fcltMngNo: "SN-PPL-000123",
+      instlYmd: "1998-12-15",
+      pdmtVl: 450,
+      prlgVl: 132.5,
+      usgCd: "합류관",
+      mqltCd: "철근콘크리트관(RC)",
+      elapsedYears: 27,
+      ctpvNm: "서울특별시",
+      sggNm: "강남구",
+    },
+    {
+      fid: "preview-aged-pipe-2",
+      lyrTypeNm: PIPE_LAYER_TYPE,
+      rowNumber: 2,
+      fcltMngNo: "SN-PPL-000124",
+      instlYmd: "2001-03-10",
+      pdmtVl: 300,
+      prlgVl: 88.4,
+      usgCd: "오수관",
+      mqltCd: "염화비닐관(PVC)",
+      elapsedYears: 25,
+      ctpvNm: "서울특별시",
+      sggNm: "강남구",
+    },
+  ]);
+  const [totalCount, setTotalCount] = useState(2);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isListLoading, setIsListLoading] = useState(false);
+  const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
+  const { ctpv, sgg } = useStore();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const data = await getRawJson("/sewerage-service/api/v1/map/lyrStngs/SN_NETWORK");
+        setTreeData(data);
+      } catch (error) {
+        console.error("노후관로 레이어 설정 조회 중 오류:", error);
+        throw new Error("Invalid JSON response from server");
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      if (gisMaps.current) {
+        setMapReady(true);
+        window.clearInterval(timer);
+      }
+    }, 300);
+
+    return () => window.clearInterval(timer);
+  }, []);
+
+  const fetchAgedPipeRows = useCallback(
+    async (page: number, filters: AgedPipeFilters, size: number) => {
+      const queryParams = new URLSearchParams({
+        lyrTypeNm: PIPE_LAYER_TYPE,
+        page: String(page - 1),
+        size: String(size),
+        sort: "string",
+      });
+
+      const cqlFilters = buildAgedPipeCqlFilters(filters);
+      if (cqlFilters.length > 0) {
+        queryParams.append("cqlFiter", cqlFilters.join(" and "));
+      }
+
+      const response = await getData(`v1/fclts?${queryParams.toString()}`);
+      const rows = Array.isArray(response?.data) ? response.data : [];
+
+      return {
+        rows: rows.map((item: Record<string, unknown>, index: number) =>
+          toDisplayPipeRow(item, index, page, ctpv, sgg),
+        ),
+        total: Number(response?.count ?? 0),
+      };
+    },
+    [ctpv, sgg],
+  );
+
+  const loadAgedPipeList = useCallback(
+    async (page = 1, filters = appliedFilters) => {
+      setIsListLoading(true);
+      try {
+        const response = await fetchAgedPipeRows(page, filters, 10);
+        setListRows(response.rows);
+        setTotalCount(response.total);
+        setCurrentPage(page);
+      } catch (error) {
+        console.error("노후관로 목록 조회 중 오류:", error);
+        setListRows([]);
+        setTotalCount(0);
+      } finally {
+        setIsListLoading(false);
+      }
+    },
+    [appliedFilters, fetchAgedPipeRows],
+  );
+
+  useEffect(() => {
+    loadAgedPipeList(1, appliedFilters);
+  }, [appliedFilters, loadAgedPipeList]);
+
+  const handleApplyFilters = useCallback(() => {
+    const normalized = {
+      ...draftFilters,
+      elapsedYears: draftFilters.elapsedYears > 0 ? draftFilters.elapsedYears : 20,
+    };
+    setDraftFilters(normalized);
+    setAppliedFilters(normalized);
+
+    if (isListOpen) {
+      loadAgedPipeList(1, normalized);
+    }
+  }, [draftFilters, isListOpen, loadAgedPipeList]);
+
+  const handleFeatureSelect = useCallback((data: any) => {
+    const map = gisMaps.current;
+    if (!map) return;
+
+    const select = GisApp.Module.select as any;
+    if (!select) return;
+    select.resetSelectedFeature();
+
+    let foundFeature = null;
+    if (data && typeof data.getGeometry === "function" && typeof data.setStyle === "function") {
+      foundFeature = data;
+    } else {
+      const featureId = data?.fid ?? data?.ftrIdn ?? data?.id;
+      map
+        .getLayers()
+        .getArray()
+        .forEach((layer: any) => {
+          const source = layer.getSource?.();
+          if (!source?.getFeatureById) return;
+          const feature = source.getFeatureById(String(featureId).trim());
+          if (feature) foundFeature = feature;
+        });
+    }
+
+    if (foundFeature?.getGeometry) {
+      map.getView().fit(foundFeature.getGeometry().getExtent(), {
+        duration: 300,
+        padding: [50, 50, 50, 50],
+        maxZoom: 16,
+      });
+      select.selectFeature(foundFeature, true);
+    }
+
+    setFeatureData(data);
+    setIsDetailOpen(true);
+  }, []);
+
+  const handleOpenPipeList = useCallback(() => {
+    setIsListOpen(true);
+    loadAgedPipeList(1, appliedFilters);
+  }, [appliedFilters, loadAgedPipeList]);
+
+  const handleTreePopup = useCallback(
+    (layerNm: string) => {
+      if (String(layerNm).includes("하수관로")) {
+        handleOpenPipeList();
+      }
+    },
+    [handleOpenPipeList],
+  );
+
+  const handleListRowDoubleClick = useCallback(
+    async (row: AgedPipeRow) => {
+      try {
+        const core = GisApp.Module.layer as any;
+        await core.showSearchResultsFromGeoJSON(PIPE_LAYER_TYPE, row.fid);
+      } catch (error) {
+        console.error("노후관로 위치 이동 중 오류:", error);
+      }
+
+      setFeatureData(row);
+      setIsDetailOpen(true);
+      setIsListOpen(false);
+    },
+    [],
+  );
+
+  const handleDownload = useCallback(async () => {
+    try {
+      setIsListLoading(true);
+      const response = await fetchAgedPipeRows(1, appliedFilters, 10000);
+      await downloadExcelWithKoreanHeaders({
+        data: response.rows as JSON[],
+        fileName: `노후관로_목록_${new Date().toISOString().slice(0, 10)}`,
+        sheetNameArray: ["노후관로 목록"],
+        headerRange: "A1:H1",
+        headerMapping: AGED_PIPE_EXCEL_HEADER,
+      });
+    } catch (error) {
+      console.error("노후관로 목록 다운로드 중 오류:", error);
+      alert("노후관로 목록 다운로드 중 오류가 발생했습니다.");
+    } finally {
+      setIsListLoading(false);
+    }
+  }, [appliedFilters, fetchAgedPipeRows]);
+
+  useEffect(() => {
+    if (!mapReady || !gisMaps.current) return;
+
+    const map = gisMaps.current;
+    const cleanups: Array<() => void> = [];
+    const filterFn = (feature: any) =>
+      matchesAgedPipeFilters(feature?.getProperties?.() ?? feature?.values_ ?? {}, appliedFilters);
+
+    const decorateLayer = (layer: any) => {
+      if (layer?.get?.("lyrTyNm") !== PIPE_LAYER_TYPE) return;
+
+      const originalStyle =
+        layer.get("_agedPipeOriginalStyle") ?? layer.getStyleFunction?.() ?? layer.getStyle?.();
+      if (!layer.get("_agedPipeOriginalStyle")) {
+        layer.set("_agedPipeOriginalStyle", originalStyle);
+      }
+
+      layer.setStyle((feature: any, resolution: number) => {
+        const baseStyle =
+          typeof originalStyle === "function" ? originalStyle(feature, resolution) : originalStyle;
+        const styles = Array.isArray(baseStyle) ? [...baseStyle] : baseStyle ? [baseStyle] : [];
+        if (filterFn(feature)) {
+          styles.push(agedPipeHighlightStyle);
+        }
+        return styles;
+      });
+
+      const source = layer.getSource?.();
+      if (source?.on) {
+        const onLoadEnd = () => layer.changed?.();
+        source.on("featuresloadend", onLoadEnd);
+        cleanups.push(() => source.un?.("featuresloadend", onLoadEnd));
+      }
+
+      layer.changed?.();
+    };
+
+    map.getLayers().getArray().forEach(decorateLayer);
+    const layers = map.getLayers();
+    const onAdd = (event: any) => decorateLayer(event.element);
+    layers.on?.("add", onAdd);
+    cleanups.push(() => layers.un?.("add", onAdd));
+
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  }, [appliedFilters, mapReady]);
+
+  const LayerSettingView = useMemo(
+    () =>
+      function LayerSettingComponent() {
+        return (
+          <AgedPipeFilterPanel
+            title="지반침하정보"
+            filters={draftFilters}
+            onFiltersChange={setDraftFilters}
+            onApply={handleApplyFilters}
+          />
+        );
+      },
+    [draftFilters, handleApplyFilters],
+  );
+
+  return (
+    <>
+      <div className="bg-container">
+        <Gis
+          treeData={treeData}
+          isSearch={false}
+          gisMaps={gisMaps}
+          isMiniMap={false}
+          searchView={EmptySearchView}
+          detailView={AgedPipeDetailPanel}
+          onFeatureSelect={handleFeatureSelect}
+          onOpenPopup={handleTreePopup}
+          featureData={featureData}
+          setFeatureData={setFeatureData}
+          isOpen={isDetailOpen}
+          setIsOpen={setIsDetailOpen}
+          isSearchModalOpen={isSearchModalOpen}
+          setIsSearchModalOpen={setIsSearchModalOpen}
+          onCheckedLayersChange={() => undefined}
+          searchBar={<></>}
+          layerSettingView={LayerSettingView}
+          showZoomLevel={true}
+          defaultZoom={7.5}
+          defaultLonLat={[127.75, 36]}
+        />
+      </div>
+
+      <AgedPipeListModal
+        open={isListOpen}
+        onOpenChange={setIsListOpen}
+        filters={draftFilters}
+        onFiltersChange={setDraftFilters}
+        rows={listRows}
+        total={totalCount}
+        currentPage={currentPage}
+        isLoading={isListLoading}
+        onSearch={(page = 1) => {
+          const normalized = {
+            ...draftFilters,
+            elapsedYears: draftFilters.elapsedYears > 0 ? draftFilters.elapsedYears : 20,
+          };
+          setDraftFilters(normalized);
+          setAppliedFilters(normalized);
+          loadAgedPipeList(page, normalized);
+        }}
+        onDownload={handleDownload}
+        onRowDoubleClick={handleListRowDoubleClick}
+      />
+    </>
+  );
+};
+
+export default Map;
diff --git a/apps/sn/app/html/(map-layout)/layout.tsx b/apps/sn/app/html/(map-layout)/layout.tsx
new file mode 100644
index 000000000..25500a909
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/layout.tsx
@@ -0,0 +1,58 @@
+/**
+ * ➡️ 경로 : 하수관망도 모든 페이지
+ * 
+ * 📄 Map Layout
+ * Next.js App Router (app/) 기반 맵 레이아웃 컴포넌트
+ *
+ * - 메뉴 클릭 이벤트 처리 및 라우팅
+ * - 현재 메뉴 정보 Zustand를 통한 상태 관리
+ * - 시도/시군구/사업 구분/사업 유형 데이터 초기 로드
+ * - NoFooterLayout을 통한 공통 레이아웃 적용
+ * - QueryClient를 통한 데이터 캐싱 및 관리
+ * - 경로 변경 시 메뉴 정보 동기화
+ */
+"use client";
+
+import React, { useEffect } from 'react';
+import { usePathname, useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import { NoFooterLayout } from "@common/components";
+import type { MenuItem } from "@/entities/menu";
+import { useMenuStore } from "@/shared/lib";
+import useStore from "@/store/useStore";
+
+export default function MapLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const queryClient = useQueryClient();
+
+  const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);
+
+  const { fetchCtpv, fetchSgg, fetchBIZ_SE_CD, fetchBIZ_TY_CD } = useStore();
+
+  useEffect(() => {
+    fetchCtpv();
+    fetchSgg();
+    fetchBIZ_SE_CD();
+    fetchBIZ_TY_CD();
+  }, []);
+
+  const handleMenuClick = (item: MenuItem) => {
+    setCurrentMenuInfo(item);
+    router.push(item.urlPath);
+  };
+
+  return (
+    <NoFooterLayout
+      queryClient={queryClient}
+      currentPath={pathname ?? ""}
+      handleMenuClick={handleMenuClick}
+    >
+      {children}
+    </NoFooterLayout>
+  );
+}
diff --git a/apps/sn/app/html/(map-layout)/map/components/InputSection.tsx b/apps/sn/app/html/(map-layout)/map/components/InputSection.tsx
new file mode 100644
index 000000000..1d45103a1
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/InputSection.tsx
@@ -0,0 +1,58 @@
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@common/components/ui";
+import React from "react";
+
+interface InputSectionProps {
+  title: string;
+  data: { year: string; type: string, bizInfoNm: string, bizType: string }[];
+  sectionKey: string;
+  onInputChange: (section: string, index: number, field: string, value: string) => void;
+}
+
+const InputSection: React.FC<InputSectionProps> = ({ title, data, sectionKey, onInputChange }) => {
+  return (
+    <div>
+      {/* 섹션 제목 */}
+      <div className="card-header">
+        <h3 className="text-2xl mx-3 font-medium text-label whitespace-nowrap">{title}</h3>
+      </div>
+      {/* 테이블 */}
+      <div className="card !m-[1.2rem] !p-0r">
+        <Table variant="secondary" className="w-full">
+          <TableHeader>
+            <TableRow>
+              <TableHead className="border border-gray-300 px-2 py-2 text-sm w-auto whitespace-nowrap">구분</TableHead>
+              <TableHead className="border border-gray-300 px-2 py-2 text-sm w-[80px] whitespace-nowrap">진단연도</TableHead>
+              <TableHead className="border border-gray-300 px-2 py-2 text-sm w-auto whitespace-nowrap">사업명</TableHead>
+              <TableHead className="border border-gray-300 px-2 py-2 text-sm w-auto whitespace-nowrap">유형</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((row, index) => (
+              <TableRow key={index}>
+                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal w-auto whitespace-nowrap">
+                  {row.type}
+                </TableCell>
+                <TableCell className="border border-gray-300 px-2 py-2 text-sm w-[80px] whitespace-nowrap">
+                  <input
+                    type="text"
+                    value={row.year}
+                    onChange={(e) => onInputChange(sectionKey, index, "year", e.target.value)}
+                    className="w-full text-xl border-radius-0 px-3 py-2 text-base text-center leading-normal"
+                  />
+                </TableCell>
+                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal w-auto">
+                  {row.bizInfoNm}
+                </TableCell>
+                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal w-auto whitespace-nowrap">
+                  {row.bizType}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};
+
+export default InputSection;
\ No newline at end of file
diff --git a/apps/sn/app/html/(map-layout)/map/components/common/codeMapper.ts b/apps/sn/app/html/(map-layout)/map/components/common/codeMapper.ts
new file mode 100644
index 000000000..7b591b09c
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/common/codeMapper.ts
@@ -0,0 +1,162 @@
+import { MS_SWAGE_PPL_USE_CODES, MS_SWAGE_PPL_CODES, MS_SWAGE_MHL_CODES, MS_SWAGE_MHL_USE_CODES, DRTW_SEWAGE_PUMP_USE_CODES } from './table';
+
+interface CodeMapperProps {
+  layerName: string;
+  data: any;
+}
+
+/**
+ * 레이어별 코드 변환 함수
+ * @param layerName - 레이어 이름
+ * @param data - 변환할 데이터 객체
+ * @returns 변환된 데이터 객체
+ */
+export const codeMapper = ({ layerName, data }: CodeMapperProps): any => {
+  if (!data) return data;
+
+  const processedData = { ...data };
+
+  switch (layerName) {
+    case '하수관로':
+      // usg_cd 값 변환 (용도코드)
+      if (processedData.usg_cd) {
+        const usageCodeItem = MS_SWAGE_PPL_USE_CODES.find(
+          code => code.val === processedData.usg_cd.trim()
+        );
+        if (usageCodeItem) {
+          processedData.usg_cd = usageCodeItem.text;
+        }
+      }
+
+      // mqlt_cd 값 변환 (재질코드)
+      if (processedData.mqlt_cd) {
+        const materialCodeItem = MS_SWAGE_PPL_CODES.find(
+          code => code.val === processedData.mqlt_cd.trim()
+        );
+        if (materialCodeItem) {
+          processedData.mqlt_cd = materialCodeItem.text;
+        }
+      }
+      break;
+
+    case '하수맨홀':
+      // usg_cd 값 변환 (용도코드)
+      if (processedData.usg_cd) {
+        const usageCodeItem = MS_SWAGE_MHL_USE_CODES.find(
+          code => code.val.trim() === processedData.usg_cd.trim()
+        );
+        if (usageCodeItem) {
+          processedData.usg_cd = usageCodeItem.text;
+        }
+      }
+
+      // mqlt_cd 값 변환 (재질코드)
+      if (processedData.mqlt_cd) {
+        const materialCodeItem = MS_SWAGE_MHL_CODES.find(
+          code => code.val === processedData.mqlt_cd.trim()
+        );
+        if (materialCodeItem) {
+          processedData.mqlt_cd = materialCodeItem.text;
+        }
+      }
+      break;
+
+    case '하수펌프장':
+      // usg_cd 값 변환 (용도코드)
+      if (processedData.usg_cd) {
+        const usageCodeItem = DRTW_SEWAGE_PUMP_USE_CODES.find(
+          code => code.val === processedData.usg_cd.trim()
+        );
+        if (usageCodeItem) {
+          processedData.usg_cd = usageCodeItem.text;
+        }
+      }
+      break;
+
+    case '우수토실':
+      // prrtymngYn 값 변환 (중점여부)
+      if (processedData.prrtymngYn) {
+        if (processedData.prrtymngYn === 'Y') {
+          processedData.prrtymngYn = '중점우수토실';
+        } else if (processedData.prrtymngYn === 'N') {
+          processedData.prrtymngYn = '우수토실';
+        }
+      }
+      break;
+    case '중점우수토실':
+      if (processedData.manage_no) {
+        processedData.mqlt_cd = processedData.manage_no;
+      }
+      if (processedData.mesure_spot_se) {
+        const mesureSpotSe = [{ id: '0', text: '합류식' }, { id: '1', text: '분류식' }];
+        const mesureSpotSeItem = mesureSpotSe.find(
+          code => code.id === processedData.mesure_spot_se.trim()
+        );
+        if (mesureSpotSeItem) processedData.mesure_spot_se = mesureSpotSeItem.text;
+      }
+      break;
+
+    default:
+      // 다른 레이어는 변환하지 않음
+      break;
+  }
+
+  return processedData;
+};
+
+/**
+ * 저장 시 코드 역변환 함수 (한글 → 코드)
+ * @param layerName - 레이어 이름
+ * @param data - 역변환할 데이터 객체
+ * @returns 역변환된 데이터 객체
+ */
+export const reverseCodeMapper = ({ layerName, data }: CodeMapperProps): any => {
+  if (!data) return data;
+
+  const processedData = { ...data };
+
+  switch (layerName) {
+    case '하수맨홀':
+      // mqlt_cd 값 역변환 (텍스트 → 코드)
+      if (processedData.mqlt_cd && typeof processedData.mqlt_cd === 'string') {
+        const materialCodeItem = MS_SWAGE_MHL_CODES.find(
+          code => code.text === processedData.mqlt_cd.trim()
+        );
+        if (materialCodeItem) {
+          processedData.mqlt_cd = materialCodeItem.val;
+        }
+      }
+      break;
+
+    case '우수토실':
+      // prrtymngYn 값 역변환 (텍스트 → Y/N)
+      if (processedData.prrtymngYn) {
+        if (processedData.prrtymngYn === '중점우수토실') {
+          processedData.prrtymngYn = 'Y';
+        } else if (processedData.prrtymngYn === '우수토실') {
+          processedData.prrtymngYn = 'N';
+        }
+      }
+      break;
+
+    case '하수펌프장':
+      // usg_cd 값 역변환 (텍스트 → 코드)
+      if (processedData.usg_cd && typeof processedData.usg_cd === 'string') {
+        const usageCodeItem = DRTW_SEWAGE_PUMP_USE_CODES.find(
+          code => code.text === processedData.usg_cd.trim()
+        );
+        if (usageCodeItem) {
+          processedData.usg_cd = usageCodeItem.val;
+        }
+      }
+      break;
+
+    default:
+      break;
+  }
+
+  return processedData;
+};
+
+// 기본 내보내기
+export default { codeMapper, reverseCodeMapper };
\ No newline at end of file
diff --git a/apps/sn/app/html/(map-layout)/map/components/common/index.ts b/apps/sn/app/html/(map-layout)/map/components/common/index.ts
new file mode 100644
index 000000000..d2aed5956
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/common/index.ts
@@ -0,0 +1,68 @@
+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";
+import SwtrmtFclt from "../popupComponent/SwtrmtFclt";
+
+type LayerComponentProps = {
+  featureData: any;
+  isMainSsc?: boolean;
+  isDrtwSewagePump?: boolean;
+  rainMeasureData?: any;
+  onSaveClick?: () => void;
+  onFormDataChange?: (data: any) => void; // 추가
+  chmbrXcnts: string;
+  chmbrYdnts: string;
+  gisObject?: Record<string, any>; // GIS 객체 추가
+};
+type LayerContentMap = {
+  [key: string]: {
+    component?: React.FC<LayerComponentProps>;
+    props?: any;
+  };
+};
+// 레이어 이름과 컴포넌트를 매핑
+// 레이어 선택시 변경되는 팝업 컨텐츠 동적으로 변경하도록 작업
+const layerContentMap: LayerContentMap = {
+  "하수처리시설": { component: SwtrmtFclt, }, // 디지털 자료관 연계정보가 없으니 일단 주석 처리
+  "하수처리구역": {},
+  "우수토실": { component: Ssc, },
+  "중점우수토실": { component: Ssc, }, // 중점우수토실 여부 설정
+  "하수관로": { component: MsSwagePpl, },
+  "하수맨홀": { component: smh, },
+  "하수펌프장": { component: sewagePump },
+  // "빗물펌프": { component: StormWaterPump },
+  // "오수펌프": { component: sewagePump },
+};
+
+// 동적 컴포넌트 반환 함수
+export const getLayerContentComponent = (layerNm: string): React.FC<LayerComponentProps> | null => {
+  const component = layerContentMap[layerNm];
+  if (!component || !component.component) {
+    // component가 없으면 null 반환
+    return () => null;
+  }
+  return component.component
+};
+// 사용자 입력 필드 (보수 및 갱신, 청소 및 준설, 점검 및 진단)
+export const handleInputChange = (section: string,
+  index: number,
+  field: string,
+  value: string,
+  dataMap: {
+    [key: string]: {
+      data: { year: string; type: string, bizInfoNm: string, bizType: string }[];
+      setData: React.Dispatch<React.SetStateAction<{ year: string; type: string, bizInfoNm: string, bizType: string }[]>>;
+    };
+  }
+) => {
+  const target = dataMap[section];
+  if (!target) return;
+
+  const updated = [...target.data];
+  if (updated[index]) {
+    updated[index][field as keyof typeof updated[number]] = value;
+  }
+  target.setData(updated);
+};
\ No newline at end of file
diff --git a/apps/sn/app/html/(map-layout)/map/components/common/table.ts b/apps/sn/app/html/(map-layout)/map/components/common/table.ts
new file mode 100644
index 000000000..4e501fb20
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/common/table.ts
@@ -0,0 +1,848 @@
+// 하수관로
+export const MsSwagePplCol = [
+  { id: 'fclt_mng_no', title: '시설관리번호' },
+  { id: 'inst_mng_no', title: '기관관리번호' },
+  { id: 'instl_ymd', title: '설치일자' },
+  { id: 'mapsht_no', title: '도엽번호' },
+  { id: 'pdmt_vl', title: '관경(mm)' },
+  { id: 'prlg_vl', title: '연장(m)' },
+  { id: 'usg_cd', title: '용도' },
+  { id: 'mqlt_cd', title: '재질' },
+  { id: 'avg_grdn', title: '평균구배(m/m)' },
+  { id: 'drtw_mltv_area', title: '오수배수면적(m²)' },
+  { id: 'excln_mltv_area', title: '우수배수면적(m²)' },
+  { id: 'tmpt_dpth', title: '시점깊이(m)' },
+  { id: 'tmpt_mhl_mng_no', title: '시점맨홀관리번호' },
+  { id: 'scend_dpth', title: '종점깊이(m)' },
+  { id: 'scend_mhl_mng_no', title: '종점맨홀관리번호' },
+  { id: 'trfln_cnt', title: '차선수' },
+  { id: 'vrtc_len', title: '세로길이(m)' },
+  { id: 'wdth_len', title: '가로길이(m)' },
+  // { id: 'rnyssn_fvlc', title: '우기 시 유속(m/s)' },
+  // { id: 'clar_fvlc', title: '건기 시 유속(m/s)' },
+  // { id: 'mng_inst_cd', title: '관리기관코드' },
+  // { id: 'pbadms_emd_cd', title: '행정읍면동코드' },
+  // { id: 'fclty_shp_cd', title: '시설물형태코드' },
+  // { id: 'fid', title: 'FID' },
+  // { id: 'ftre_smbol_cd', title: '지형지물부호코드' },
+  // { id: 'lyrTypeNm', title: '레이어타입명' },
+]
+// 하수관로 searchModal 기본정보tab
+export const MsSwagePplCol2 = [ 
+  { id: 'rowNumber', title: '일련\n번호' },
+  { id: 'fcltMngNo', title: '시설\n관리번호' },
+  { id: 'instMngNo', title: '기관\n관리번호' },
+  { id: 'ctpvNm', title: '시도' },
+  { id: 'sggNm', title: '시군구' },
+  { id: "swtrmt_zone_nm", title: "처리구역" },
+  { id: 'instlYmd', title: '설치일자' },
+  // { id: 'mapshtNo', title: '도엽번호' },
+  { id: 'usgCd', title: '용도' },
+  { id: 'pdmtVl', title: '관경\n(mm)' },
+  { id: 'prlgVl', title: '연장\n(m)' },
+  // { id: 'avgGrdn', title: '평균구배\n(m/m)' },
+  { id: 'tmptDpth', title: '시점깊이\n(m)' },
+  { id: 'tmptMhlMngNo', title: '시점맨홀\n관리번호' },
+  { id: 'scendDpth', title: '종점깊이\n(m)' },
+  { id: 'scendMhlMngNo', title: '종점맨홀\n관리번호' },
+  { id: 'vrtcLen', title: '세로길이\n(m)' },
+  { id: 'wdthLen', title: '가로길이\n(m)' },
+  { id: 'fcltyShpCd', title: '시설물형태코드' },
+  // { id: 'fid', title: 'FID' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
+  // { id: 'mngInstCd', title: '관리기관코드' },
+  { id: 'mqltCd', title: '재질코드' },
+  // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
+  // { id: 'usgCd', title: '용도코드' },
+  // { id: 'lyrTypeNm', title: '레이어타입명' },
+]
+export const MsSwagePplExcelCol = {
+  'fcltMngNo': '시설 관리번호',
+  'instMngNo': '기관 관리번호',
+  'ctpvNm': '시도',
+  'sggNm': '시군구',
+  'swtrmt_zone_nm': '처리구역',
+  'instlYmd': '설치일자',
+  'usgCd': '용도',
+  'pdmtVl': '관경(mm)',
+  'prlgVl': '연장(m)',
+  'tmptDpth': '시점 깊이(m)',
+  'tmptMhlMngNo': '시점맨홀 관리번호',
+  'scendDpth': '종점 깊이(m)',
+  'scendMhlMngNo': '종점맨홀 관리번호',
+  'vrtcLen': '세로길이(m)',
+  'wdthLen': '가로길이(m)',
+  'fcltyShpCd': '시설물형태코드',
+  'mqltCd': '재질코드',
+};
+// 하수관로 용도 코드표
+export const MS_SWAGE_PPL_USE_CODES = [
+  { val: "SBA000", text: "미분류" },
+  { val: "SBA001", text: "합류관" },
+  { val: "SBA002", text: "차집관" },
+  { val: "SBA003", text: "우수관" },
+  { val: "SBA004", text: "오수관" },
+  { val: "SBA999", text: "기타" },
+];
+// 하수관로 재질 코드표
+export const MS_SWAGE_PPL_CODES = [
+  { val: "MOP000", text: "미분류" },
+  { val: "MOP001", text: "닥타일주철관(DCIP)" },
+  { val: "MOP002", text: "강관(SP)" },
+  { val: "MOP003", text: "아연도강관(GS)" },
+  { val: "MOP004", text: "염화비닐관(PVC)" },
+  { val: "MOP005", text: "폴리에틸렌관(PE)" },
+  { val: "MOP006", text: "스테인레스관(SSP)" },
+  { val: "MOP007", text: "동관(COP)" },
+  { val: "MOP008", text: "P.S.콘크리트관(PC)" },
+  { val: "MOP009", text: "석면시멘트관(AS)" },
+  { val: "MOP010", text: "회주철관(CIP)" },
+  { val: "MOP011", text: "연관(LP)" },
+  { val: "MOP012", text: "흉관(HP)" },
+  { val: "MOP013", text: "철근콘크리트관(RC)" },
+  { val: "MOP014", text: "강관(ST)" },
+  { val: "MOP015", text: "주철관(CI)" },
+  { val: "MOP016", text: "화학제품류관(PV)" },
+  { val: "MOP017", text: "도관(VC)" },
+  { val: "MOP018", text: "석축(SE)" },
+  { val: "MOP019", text: "도복장 강관(SP)" },
+  { val: "MOP020", text: "흉관(EP)" },
+  { val: "MOP021", text: "아연도강관(GP)" },
+  { val: "MOP022", text: "청동관(BR)" },
+  { val: "MOP023", text: "고무몰딩(RM)" },
+  { val: "MOP024", text: "주강(CS)" },
+  { val: "MOP025", text: "VR관" },
+  { val: "MOP026", text: "HDPE관" },
+  { val: "MOP027", text: "시멘트라이닝주철관(C)" },
+  { val: "MOP028", text: "수도용 PE관(PE)" },
+  { val: "MOP029", text: "석면시멘트관(AC)" },
+  { val: "MOP030", text: "폴리에틸렌분체라이닝강관(PEP)" },
+  { val: "MOP031", text: "에폭시코팅강관(EPS)" },
+  { val: "MOP032", text: "HI-3P" },
+  { val: "MOP033", text: "철근콘크리트박스(RCB)" },
+  { val: "MOP034", text: "콘크리트중선함(CD)" },
+  { val: "MOP035", text: "후랙시불전선함(FP)" },
+  { val: "MOP036", text: "전선함(FD)" },
+  { val: "MOP038", text: "이중보온관" },
+  { val: "MOP039", text: "폴리에틸렌피복강관(PLP)" },
+  { val: "MOP041", text: "FRP" },
+  { val: "MOP042", text: "강재" },
+  { val: "MOP999", text: "기타" },
+  { val: "MOP800", text: "2중벽PE관" },
+  { val: "MOP801", text: "3중벽PE관" },
+  { val: "MOP802", text: "가스배관용 강관" },
+  { val: "MOP803", text: "강관(피복 Double, 용접접합)" },
+  { val: "MOP804", text: "강관(피복 Single, 용접접합)" },
+  { val: "MOP805", text: "강관(CP)" },
+  { val: "MOP806", text: "강철" },
+  { val: "MOP807", text: "강화플라스틱복합관" },
+  { val: "MOP808", text: "경질염화비닐관(HI-VP)" },
+  { val: "MOP809", text: "고강성PVC이중벽관" },
+  { val: "MOP810", text: "고광도PVC이중벽관" },
+  { val: "MOP811", text: "고밀도폴리에틸렌관(THP)" },
+  { val: "MOP812", text: "고밀도폴리에틸렌파상형이중벽관" },
+  { val: "MOP813", text: "공장제 박스관거" },
+  { val: "MOP814", text: "관로없음(알케이블)" },
+  { val: "MOP815", text: "나선형강관" },
+  { val: "MOP816", text: "내충격수도관" },
+  { val: "MOP817", text: "내충격용하수도용경질염화비닐관(HI-VG)" },
+  { val: "MOP818", text: "내충격HI-VG2관" },
+  { val: "MOP819", text: "내충격PVC하수관" },
+  { val: "MOP820", text: "녹석(돌산호과 일종)" },
+  { val: "MOP821", text: "동관(구리관, 용접)" },
+  { val: "MOP822", text: "둥근잔돌" },
+  { val: "MOP823", text: "무근콘크리트" },
+  { val: "MOP824", text: "백관" },
+  { val: "MOP825", text: "복합철판파형관" },
+  { val: "MOP826", text: "분체라이닝관" },
+  { val: "MOP827", text: "석축박스" },
+  { val: "MOP828", text: "석축철콘" },
+  { val: "MOP829", text: "수도용경질염화비관" },
+  { val: "MOP830", text: "수도용경질염화비닐이음관" },
+  { val: "MOP831", text: "수도용엑포시수지분체내외면코팅강관" },
+  { val: "MOP832", text: "수지파형강관(PCS)" },
+  { val: "MOP833", text: "수지CSP" },
+  { val: "MOP834", text: "스테인레스 주름관" },
+  { val: "MOP835", text: "스테인레스관(STS)" },
+  { val: "MOP836", text: "스테인레스스틸파이프관" },
+  { val: "MOP837", text: "아스콘" },
+  { val: "MOP838", text: "아스팔트" },
+  { val: "MOP839", text: "아스팔트도복장강관(ASP)" },
+  { val: "MOP840", text: "아연" },
+  { val: "MOP841", text: "아연도금(백관)" },
+  { val: "MOP842", text: "알루미늄" },
+  { val: "MOP843", text: "알루미늄합금" },
+  { val: "MOP844", text: "압력배관용 탄소강관" },
+  { val: "MOP845", text: "양철관" },
+  { val: "MOP846", text: "양철주름관(CSP)" },
+  { val: "MOP847", text: "연합인슈강판" },
+  { val: "MOP848", text: "와사관(GSP)" },
+  { val: "MOP849", text: "원심력철근콘크리트" },
+  { val: "MOP850", text: "유리섬유관(GRP)" },
+  { val: "MOP851", text: "유리섬유복합관(GRP)" },
+  { val: "MOP852", text: "이음매없는동및동합금관" },
+  { val: "MOP853", text: "일반배관용스테인리스강관" },
+  { val: "MOP854", text: "전압 콘크리트관" },
+  { val: "MOP855", text: "주름관" },
+  { val: "MOP856", text: "주름주철파형강관" },
+  { val: "MOP857", text: "지중 저압케이블 입상관" },
+  { val: "MOP858", text: "진동및전압철근콘크리트관" },
+  { val: "MOP859", text: "철근콘크리트" },
+  { val: "MOP860", text: "철근콘크리트 블록" },
+  { val: "MOP861", text: "철근콘크리트조립흙막이" },
+  { val: "MOP862", text: "철판매입관" },
+  { val: "MOP863", text: "청동" },
+  { val: "MOP864", text: "코아식프리스트레스트콘크리트관" },
+  { val: "MOP865", text: "콘크리트" },
+  { val: "MOP866", text: "콘크리트 폴륨관" },
+  { val: "MOP867", text: "콘크리트블록" },
+  { val: "MOP868", text: "탄소강" },
+  { val: "MOP869", text: "탄소강(카본스틸)" },
+  { val: "MOP870", text: "탄소주강" },
+  { val: "MOP871", text: "트러후" },
+  { val: "MOP872", text: "파선형강관(RCF)" },
+  { val: "MOP873", text: "파형강관(CSP)" },
+  { val: "MOP874", text: "파형관" },
+  { val: "MOP875", text: "파형플라스틱관" },
+  { val: "MOP876", text: "폴리머관" },
+  { val: "MOP877", text: "폴리에스테르수지콘크리트관" },
+  { val: "MOP878", text: "폴리에틸렌 전선관" },
+  { val: "MOP879", text: "폴리에틸렌 피복강관" },
+  { val: "MOP880", text: "폴리에틸렌관 1호관" },
+  { val: "MOP881", text: "폴리에틸렌관 2호관" },
+  { val: "MOP882", text: "폴리에틸렌관(2중벽)" },
+  { val: "MOP883", text: "폴리에틸렌관(3중벽)" },
+  { val: "MOP884", text: "폴리에틸렌분체라이닝" },
+  { val: "MOP885", text: "폴리에틸렌이중벽하수관" },
+  { val: "MOP886", text: "폴리탄산에스테르" },
+  { val: "MOP887", text: "프리스트레스트콘크리트실린더관" },
+  { val: "MOP888", text: "플라스틱" },
+  { val: "MOP889", text: "플라스틱주름관" },
+  { val: "MOP890", text: "하수도용고강성경질염화비닐이중벽주름관" },
+  { val: "MOP891", text: "현장타설관" },
+  { val: "MOP892", text: "현장타설철근콘크리트관" },
+  { val: "MOP893", text: "흑관" },
+  { val: "MOP894", text: "흙" },
+  { val: "MOP895", text: "AP" },
+  { val: "MOP896", text: "API관" },
+  { val: "MOP897", text: "ASP" },
+  { val: "MOP898", text: "CMCIP" },
+  { val: "MOP899", text: "CSP" },
+  { val: "MOP900", text: "DRP" },
+  { val: "MOP901", text: "DSP" },
+  { val: "MOP902", text: "DTC관" },
+  { val: "MOP903", text: "ELP" },
+  { val: "MOP904", text: "EPP" },
+  { val: "MOP905", text: "FC관" },
+  { val: "MOP906", text: "H" },
+  { val: "MOP907", text: "H6" },
+  { val: "MOP908", text: "HCP" },
+  { val: "MOP909", text: "HI_2P관" },
+  { val: "MOP910", text: "HI-KP" },
+  { val: "MOP911", text: "HL" },
+  { val: "MOP912", text: "IP" },
+  { val: "MOP913", text: "KCGP" },
+  { val: "MOP914", text: "KP관" },
+  { val: "MOP915", text: "P2S관" },
+  { val: "MOP916", text: "PC박스(PCB)" },
+  { val: "MOP917", text: "PCS" },
+  { val: "MOP918", text: "PDP" },
+  { val: "MOP919", text: "PE이중벽관" },
+  { val: "MOP920", text: "PE적측벽1종관" },
+  { val: "MOP921", text: "PFP관" },
+  { val: "MOP922", text: "PG관" },
+  { val: "MOP923", text: "PIP관(이중보온관)" },
+  { val: "MOP924", text: "PLCSP" },
+  { val: "MOP925", text: "PS" },
+  { val: "MOP926", text: "PUB" },
+  { val: "MOP927", text: "PVB" },
+  { val: "MOP928", text: "PVC이중벽관(PVC2)" },
+  { val: "MOP929", text: "PVC-DC" },
+  { val: "MOP930", text: "PVC-DV" },
+  { val: "MOP931", text: "SBK" },
+  { val: "MOP932", text: "SCP" },
+  { val: "MOP933", text: "SEB" },
+  { val: "MOP934", text: "SIS관(이중보온관)" },
+  { val: "MOP935", text: "SMC" },
+  { val: "MOP936", text: "STW" },
+  { val: "MOP937", text: "SUS" },
+  { val: "MOP938", text: "THP나선관" },
+  { val: "MOP939", text: "U관" },
+  { val: "MOP940", text: "VG2" },
+  { val: "MOP941", text: "WSP(와사피)" },
+  { val: "MOP942", text: "Steel Grating" },
+  { val: "MOP943", text: "모래" },
+  { val: "MOP944", text: "인조석" },
+  { val: "MOP945", text: "SPOL" },
+  { val: "MOP946", text: "PCF관(강판보강 PE 나선형관)" },
+  { val: "MOP947", text: "PVC3(PVC3중벽관)" },
+  { val: "MOP948", text: "PE다중벽관" },
+  { val: "MOP977", text: "전주용입상관" },
+  { val: "MOP978", text: "MD관" },
+];
+// 하수관로  'fcltyShpCd' '시설물형태코드'
+export const MS_SWAGE_PPL_SHAPE = [
+  { val: "FOR000    ", text: "미분류" },
+  { val: "FOR001    ", text: "원형" },
+  { val: "FOR002    ", text: "원추형" },
+  { val: "FOR003    ", text: "원통형" },
+  { val: "FOR004    ", text: "구형" },
+  { val: "FOR005    ", text: "타원형" },
+  { val: "FOR006    ", text: "난원" },
+  { val: "FOR007    ", text: "반원형" },
+
+  { val: "FOR010    ", text: "피라미드형" },
+  { val: "FOR011    ", text: "사면체형" },
+  { val: "FOR012    ", text: "기둥,축" },
+  { val: "FOR013    ", text: "돛대,활대처럼 둥글고 긴 원재" },
+  { val: "FOR014    ", text: "아치형" },
+  { val: "FOR015    ", text: "다중아치형" },
+  { val: "FOR016    ", text: "돔형" },
+  { val: "FOR017    ", text: "고형체형" },
+
+  { val: "FOR020    ", text: "사각형" },
+  { val: "FOR021    ", text: "평방형" },
+  { val: "FOR022    ", text: "다이아몬드형" },
+  { val: "FOR023    ", text: "사다리꼴" },
+  { val: "FOR024    ", text: "각형" },
+  { val: "FOR025    ", text: "마제형관" },
+  { val: "FOR026    ", text: "태형" },
+
+  { val: "FOR030    ", text: "A형" },
+  { val: "FOR031    ", text: "H형" },
+  { val: "FOR032    ", text: "I형" },
+  { val: "FOR033    ", text: "Y형" },
+  { val: "FOR034    ", text: "T형" },
+
+  { val: "FOR050    ", text: "불규칙한 형태" },
+
+  { val: "FOR900    ", text: "계란형" },
+  { val: "FOR901    ", text: "구(사각)형" },
+  { val: "FOR902    ", text: "높이조절철개형" },
+  { val: "FOR903    ", text: "박스형(RCB)" },
+  { val: "FOR904    ", text: "반월개거" },
+  { val: "FOR905    ", text: "반월개거(측구)" },
+  { val: "FOR906    ", text: "벽돌조" },
+  { val: "FOR907    ", text: "사각철판" },
+  { val: "FOR908    ", text: "석축개거" },
+  { val: "FOR909    ", text: "석축개거(측구)" },
+  { val: "FOR910    ", text: "승수로" },
+  { val: "FOR911    ", text: "옹벽개거" },
+  { val: "FOR912    ", text: "옹벽개거(측구)" },
+  { val: "FOR913    ", text: "이단" },
+  { val: "FOR914    ", text: "이중침전형" },
+  { val: "FOR915    ", text: "자연개거" },
+  { val: "FOR916    ", text: "자연개거(측구)" },
+  { val: "FOR917    ", text: "조립식" },
+  { val: "FOR918    ", text: "지상관" },
+  { val: "FOR919    ", text: "지상단구" },
+  { val: "FOR920    ", text: "지상쌍구" },
+  { val: "FOR921    ", text: "지하단구" },
+  { val: "FOR922    ", text: "지하쌍구" },
+  { val: "FOR923    ", text: "직사각형" },
+  { val: "FOR924    ", text: "타설식" },
+  { val: "FOR925    ", text: "토류형" },
+  { val: "FOR926    ", text: "흄관원형" },
+  { val: "FOR927    ", text: "L형측구" },
+  { val: "FOR928    ", text: "LO형측구" },
+  { val: "FOR929    ", text: "LU형측구" },
+  { val: "FOR930    ", text: "PVC이중벽관" },
+  { val: "FOR931    ", text: "RCB 맨홀" },
+  { val: "FOR932    ", text: "U형" },
+  { val: "FOR933    ", text: "U형측구(미복개)" },
+  { val: "FOR934    ", text: "U형측구(복개)" },
+
+  { val: "FOR999    ", text: "기타" }
+];
+// 하수처리시설
+export const SwtrmtFcltCol = [
+  { id: 'swtrmt_fclt_nm', title: '하수처리시설명' },
+  { id: 'fclt_cpct', title: '시설용량(㎥/d)' },
+  { id: 'rgn_expln', title: '지역설명' },
+  { id: 'cmcn_ymd', title: '준공일자' },
+  { id: 'oprtng_strt_ymd', title: '가동개시일자' },
+  { id: 'clsg_ymd', title: '폐쇄일자' },
+  // { id: 'prcs_msrc_cd', title: '처리공법코드' },
+  // { id: 'lae_cd', title: '지자체코드' },
+  { id: 'lae_nm', title: '지자체명' },
+  { id: 'ctpv_nm', title: '시도명' },
+  { id: 'sgg_nm', title: '시군구명' },
+  // { id: 'sarea_cd', title: '권역코드' },
+  { id: 'sarea_nm', title: '권역명' },
+  { id: 'lrge_sarea_nm', title: '대권역명' },
+  { id: 'rvr_nm', title: '하천명' },
+  { id: 'addr', title: '주소' },
+  { id: 'dtl_addr', title: '상세주소' },
+  { id: 'rdnm_addr', title: '도로명주소' },
+  { id: 'dtl_rdnm_addr', title: '상세도로명주소' },
+  { id: 'dschg_wtst_nm', title: '방류수계명' },
+  { id: 'plln_area', title: '부지면적(m²)' },
+  { id: 'mng_rprtv_bzenty_nm', title: '관리대행업제명' },
+  { id: 'swtrmt_ppltn_cnt', title: '하수처리인구수(인)' },
+  { id: 'prcs_zone_area_sum', title: '처리구역면적합계(m²)' },
+  { id: 'xcrd', title: 'X좌표' },
+  { id: 'ycrd', title: 'Y좌표' },
+  // { id: 'oprtngSttsCd', title: '가동상태코드' },
+  { id: 'rprs_msrc_cn', title: '대표공법내용' },
+  // { id: 'stty_crtr_bod', title: '법정기준생물화학적산소요구량(mg/L)' },
+  // { id: 'stty_crtr_toc', title: '법정기준TOC((mg/L))' },
+  // { id: 'stty_crtr_ss', title: '법정기준SS(mg/L)' },
+  // { id: 'stty_crtr_tn', title: '법정기준총질소(mg/L)' },
+  // { id: 'stty_crtr_tph', title: '법정기준총인(mg/L)' },
+  // { id: 'stty_crtr_clbcl_cnt', title: '법정기준대장균수(군수/100mL)' },
+  { id: 'bsn_nm', title: '유역명' },
+  // { id: 'obsrvnSptCd', title: '관측지점코드' },
+];
+export const SwtrmtFcltCol2 = [
+  { id: 'rowNumber', title: '일련\n번호' },
+  { id: 'swtrmtFcltNm', title: '하수처리\n시설명' },
+  { id: 'fcltCpct', title: '시설\n용량\n(㎥/d)' },
+  { id: 'rgnExpln', title: '지역설명' },
+  // { id: 'cmcnYmd', title: '준공일자' },
+  { id: 'oprtngStrtYmd', title: '가동개시일자' },
+  // { id: 'clsgYmd', title: '폐쇄일자' },
+  // { id: 'prcsMsrcCd', title: '처리공법코드' },
+  // { id: 'laeCd', title: '지자체코드' },
+  { id: 'laeNm', title: '지자체명' },
+  // { id: 'ctpvNm', title: '시도명' },
+  // { id: 'sggNm', title: '시군구명' },
+  // { id: 'sareaCd', title: '권역코드' },
+  { id: 'sareaNm', title: '권역명' },
+  // { id: 'lrgeSareaNm', title: '대권역명' },
+  { id: 'rvrNm', title: '하천명' },
+  // { id: 'addr', title: '주소' },
+  // { id: 'dtlAddr', title: '상세주소' },
+  // { id: 'rdnmAddr', title: '도로명주소' },
+  // { id: 'dtlRdnmAddr', title: '상세도로명주소' },
+  { id: 'dschgWtstNm', title: '방류수계명' },
+  // { id: 'pllnArea', title: '부지면적(m²)' },
+  // { id: 'mngRprtvBzentyNm', title: '관리대행업체명' },
+  { id: 'swtrmtPpltnCnt', title: '하수\n처리\n인구수\n(인)' },
+  // { id: 'prcsZoneAreaSum', title: '처리구역면적합계(m²)' },
+  // { id: 'xcrd', title: 'X좌표' },
+  // { id: 'ycrd', title: 'Y좌표' },
+  // { id: 'oprtngSttsCd', title: '가동상태코드' },
+  { id: 'rprsMsrcCn', title: '대표\n공법\n내용' },
+  // { id: 'sttyCrtrBod', title: '법정기준생물화학적산소요구량(mg/L)' },
+  // { id: 'sttyCrtrToc', title: '법정기준TOC(mg/L)' },
+  // { id: 'sttyCrtrSs', title: '법정기준SS(mg/L)' },
+  // { id: 'sttyCrtrTn', title: '법정기준총질소(mg/L)' },
+  // { id: 'sttyCrtrTph', title: '법정기준총인(mg/L)' },
+  // { id: 'sttyCrtrClbclCnt', title: '법정기준대장균수(군수/100mL)' },
+  // { id: 'bsnNm', title: '유역명' },
+  // { id: 'obsrvnSptCd', title: '관측지점코드' },
+];
+export const SwtrmtFcltExcelCol = {
+  'swtrmtFcltNm': '하수처리시설명',
+  'fcltCpct': '시설 용량(㎥/d)',
+  'rgnExpln': '지역설명',
+  'oprtngStrtYmd': '가동개시 일자',
+  'laeNm': '지자체명',
+  'sareaNm': '권역명',
+  'rvrNm': '하천명',
+  'dschgWtstNm': '방류수계명',
+  'swtrmtPpltnCnt': '하수 처리 인구수(인)',
+  'rprsMsrcCn': '대표 공법 내용'
+};
+
+// 하수처리구역
+export const SwtrmtPrcsZoneCol = [
+  // { id: 'swtrmtZoneSn', title: '하수처리구역 일련번호' },
+  { id: 'swtrmt_zone_nm', title: '하수처리구역명' },
+  // { id: 'swtrmt_fclt_cd', title: '하수처리시설코드' },
+  // { id: 'ctpv_cd', title: '시도코드' },
+  { id: 'ctpv_nm', title: '시도명' },
+  // { id: 'sgg_cd', title: '시군구코드' },
+  { id: 'sgg_nm', title: '시군구명' },
+  { id: 'swtrmt_fclt_nm', title: '하수처리시설명' },
+];
+export const SwtrmtPrcsZoneCol2 = [
+  { id: 'rowNumber', title: '일련번호' },
+  // { id: 'swtrmtZoneSn', title: '하수처리구역 일련번호' },
+  { id: 'swtrmtZoneNm', title: '하수처리구역명' },
+  // { id: 'swtrmt_fclt_cd', title: '하수처리시설코드' },
+  // { id: 'ctpv_cd', title: '시도코드' },
+  { id: 'ctpvNm', title: '시도' },
+  // { id: 'sgg_cd', title: '시군구코드' },
+  { id: 'sggNm', title: '시군구' },
+  { id: 'swtrmtFcltNm', title: '하수처리시설명' },
+];
+export const SwtrmtPrcsZoneExcelCol = {
+  'swtrmtZoneNm': '하수처리구역명',
+  'ctpvNm': '시도',
+  'sggNm': '시군구',
+  'swtrmtFcltNm': '하수처리시설명'
+};
+
+// 하수맨홀
+export const MsSwageMhlCol = [
+  // { id: 'fid', title: 'FID' },
+  // { id: 'geom', title: 'geometry' },
+  // { id: 'ftre_smbol_cd', title: '지형지물부호코드' },
+  { id: 'fclt_mng_no', title: '시설관리번호' },
+  // { id: 'pbadms_emd_cd', title: '행정읍면동코드' },
+  { id: 'mapsht_no', title: '도엽번호' },
+  // { id: 'mng_inst_cd', title: '관리기관코드' },
+  { id: 'instl_ymd', title: '설치일자' },
+  { id: 'last_drdgn_ymd', title: '최종준설일자' },
+  // { id: 'usg_cd', title: '용도코드' },
+  // { id: 'fclty_shp_cd', title: '시설물형태코드' },
+  // { id: 'mhl_knd_cd', title: '맨홀종류코드' },
+  { id: 'swage_mhL_diam_vl', title: '하수맨홀구경(mm)' },
+  { id: 'mqlt_cd', title: '재질' },
+  { id: 'wdth_len', title: '가로길이(m)' },
+  { id: 'vrtc_len', title: '세로길이(m)' },
+  // { id: 'ang_dir', title: '표고' },
+  { id: 'altd_vl', title: '지표고(EL.m)' },
+  { id: 'dpthl_vl', title: '맨홀저고(EL.m)' },
+  // { id: 'inst_mng_no', title: '기관관리번호' }
+];
+export const MsSwageMhlCol2 = [
+  { id: 'rowNumber', title: '일련번호' },
+  // { id: 'fid', title: 'FID' },
+  // { id: 'geom', title: 'geometry' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
+  { id: 'fcltMngNo', title: '시설관리번호' },
+  { id: 'ctpvNm', title: '시도' },
+  { id: 'sggNm', title: '시군구' },
+  // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
+  // { id: 'mapshtNo', title: '도엽번호' },
+  // { id: 'mngInstCd', title: '관리기관코드' },
+  { id: 'instlYmd', title: '설치일자' },
+  // { id: 'lastDrdgnYmd', title: '최종준설일자' },
+  { id: 'usgCd', title: '용도' },
+  // { id: 'fcltyShpCd', title: '시설물형태코드' },
+  // { id: 'mhlKndCd', title: '맨홀종류코드' },
+  { id: 'swageMhlDiamVl', title: '하수맨홀구경(mm)' },
+  // { id: 'mqltCd', title: '재질코드' },
+  { id: 'wdthLen', title: '가로길이(m)' },
+  { id: 'vrtcLen', title: '세로길이(m)' },
+  // { id: 'angDir', title: '표고' },
+  { id: 'altdVl', title: '지표고(EL.m)' },
+  { id: 'dpthlVl', title: '맨홀저고(EL.m)' },
+  // { id: 'instMngNo', title: '기관관리번호' }
+];
+export const MsSwageMhlExcelCol = {
+  'fcltMngNo': '시설관리번호',
+  'ctpvNm': '시도',
+  'sggNm': '시군구',
+  'instlYmd': '설치일자',
+  'usgCd': '용도',
+  'swageMhlDiamVl': '하수맨홀구경(mm)',
+  'wdthLen': '가로길이(m)',
+  'vrtcLen': '세로길이(m)',
+  'altdVl': '지표고(EL.m)',
+  'dpthlVl': '맨홀저고(EL.m)'
+};
+// 하수맨홀 뚜껑재질 코드표
+export const MS_SWAGE_MHL_CODES = [
+  { val: "SBC000", text: "미분류" },
+  { val: "SBC001", text: "주철" },
+  { val: "SBC002", text: "철판" },
+  { val: "SBC003", text: "콘크리트" },
+  { val: "SBC004", text: "그레이팅" },
+  { val: "SBC091", text: "칼라" },
+  { val: "SBC092", text: "S.G" },
+  { val: "SBC999", text: "기타" },
+  { val: "SBC900", text: "각주철" },
+  { val: "SBC901", text: "강재" },
+  { val: "SBC902", text: "나무" },
+  { val: "SBC903", text: "나무,널판지,합판" },
+  { val: "SBC904", text: "대리석" },
+  { val: "SBC905", text: "뚜껑없음" },
+  { val: "SBC906", text: "보도용콘크리트" },
+  { val: "SBC907", text: "스틸(ST)" },
+  { val: "SBC908", text: "신형 CON" },
+  { val: "SBC909", text: "알루미늄" },
+  { val: "SBC910", text: "염화비닐(PE)" },
+  { val: "SBC911", text: "인조석" },
+  { val: "SBC912", text: "인조석(주철)" },
+  { val: "SBC913", text: "인조CONC" },
+  { val: "SBC914", text: "철, 철근" },
+  { val: "SBC915", text: "칼라콘크리트" },
+  { val: "SBC916", text: "플라스틱" },
+  { val: "SBC917", text: "PVC" },
+  { val: "SBC918", text: "SP" },
+  { val: "SBC919", text: "SS" },
+  { val: "SBC920", text: "닥타일주철" },
+  { val: "SBC921", text: "철근G" },
+  { val: "SBC922", text: "폴리에틸렌(PE)" },
+  { val: "SBC923", text: "회주철" }
+];
+// 하수맨홀 용도 코드표
+export const MS_SWAGE_MHL_USE_CODES = [
+  { val: "SMU000    ", text: "미분류" },
+  { val: "SMU001    ", text: "우수" },
+  { val: "SMU002    ", text: "오수" },
+  { val: "SMU003    ", text: "집수" },
+  { val: "SMU004    ", text: "합류" },
+  { val: "SMU005    ", text: "차집" },
+  { val: "SMU999    ", text: "기타" },
+  { val: "SMU900    ", text: "1호" },
+  { val: "SMU901    ", text: "2호" },
+  { val: "SMU902    ", text: "3호" },
+  { val: "SMU903    ", text: "4호" },
+  { val: "SMU904    ", text: "5호" },
+  { val: "SMU905    ", text: "6호" },
+  { val: "SMU906    ", text: "7호" },
+  { val: "SMU907    ", text: "8호" },
+  { val: "SMU908    ", text: "구거용맨홀" },
+  { val: "SMU909    ", text: "부관부착맨홀" },
+  { val: "SMU910    ", text: "조립식맨홀" },
+  { val: "SMU911    ", text: "특1호" },
+  { val: "SMU912    ", text: "특2호" },
+  { val: "SMU913    ", text: "특3호" },
+  { val: "SMU914    ", text: "특4호" },
+  { val: "SMU915    ", text: "특5호" },
+  { val: "SMU916    ", text: "하수맨홀용도" },
+  { val: "SMU917    ", text: "현장타설관거용" }
+];
+
+// 우수펌프장
+export const ExclnSewagePumpCol = [
+  // { id: 'fid', title: 'FID' },
+  // { id: 'geom', title: 'geometry' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
+  { id: 'fclt_mng_no', title: '시설관리번호' },
+  // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
+  { id: 'mapsht_no', title: '도엽번호' },
+  // { id: 'mngInstCd', title: '관리기관코드' },
+  { id: 'instl_ymd', title: '설치일자' },
+  { id: 'swage_pmstn_nm', title: '하수펌프장명' },
+  { id: 'plln_area', title: '부지면적(m²)' },
+  // { id: 'opngSttsCd', title: '개통상태코드' }, 
+  // { id: 'usgCd', title: '용도코드' },
+  { id: 'daily_prcs_cpct', title: '일일처리용량(㎥)' },
+  { id: 'max_impnd_cpct', title: '최대저수용량(㎥)' },
+  { id: 'altd_vl', title: '표고(EL.m)' },
+  { id: 'wtlv_vl', title: '수위(m)' },
+  { id: 'excln_wpmp_ablt_vl', title: '우수양수능력(m²/d)' },
+  // { id: 'instMngNo', title: '기관관리번호' },
+]
+export const ExclnSewagePumpCol2 = [
+  { id: 'rowNumber', title: '일련번호' },
+  // { id: 'fid', title: 'FID' },
+  // { id: 'geom', title: 'geometry' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
+  { id: 'fcltMngNo', title: '시설관리번호' },
+  { id: 'ctpvNm', title: '시도' },
+  { id: 'sggNm', title: '시군구' },
+  // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
+  // { id: 'mapshtNo', title: '도엽번호' },
+  // { id: 'mngInstCd', title: '관리기관코드' },
+  { id: 'swagePmstnNm', title: '하수펌프장명' },
+  { id: 'instlYmd', title: '설치일자' },
+  // { id: 'pllnArea', title: '부지면적(m²)' },
+  // { id: 'opngSttsCd', title: '개통상태코드' },
+  // { id: 'usgCd', title: '용도코드' },
+  { id: 'dailyPrcsCpct', title: '일일처리용량(㎥)' },
+  { id: 'maxImpndCpct', title: '최대저수용량(㎥)' },
+  { id: 'altdVl', title: '표고(EL.m)' },
+  { id: 'wtlvVl', title: '수위(m)' },
+  { id: 'exclnWpmpAbltVl', title: '우수양수능력(m²/d)' },
+  // { id: 'instMngNo', title: '기관관리번호' },
+]
+export const ExclnSewagePumpExcelCol = {
+  'fcltMngNo': '시설관리번호',
+  'ctpvNm': '시도',
+  'sggNm': '시군구',
+  'swagePmstnNm': '하수펌프장명',
+  'instlYmd': '설치일자',
+  'dailyPrcsCpct': '일일처리용량(㎥)',
+  'maxImpndCpct': '최대저수용량(㎥)',
+  'altdVl': '표고(EL.m)',
+  'wtlvVl': '수위(m)',
+  'exclnWpmpAbltVl': '우수양수능력(m²/d)'
+};
+// 오수펌프장
+export const DrtwSewagePumpCol = [
+  // { id: 'fid', title: 'FID' },
+  // { id: 'geom', title: 'geometry' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
+  { id: 'fclt_mng_no', title: '시설관리번호' },
+  // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
+  { id: 'mapsht_no', title: '도엽번호' },
+  // { id: 'mngInstCd', title: '관리기관코드' },
+  { id: 'instl_ymd', title: '설치일자' },
+  { id: 'swage_pmstn_nm', title: '하수펌프장명' },
+  { id: 'plln_area', title: '부지면적(m²)' },
+  // { id: 'opngSttsCd', title: '개통상태코드' }, 
+  // { id: 'usgCd', title: '용도코드' },
+  { id: 'daily_prcs_cpct', title: '일일처리용량(㎥)' },
+  { id: 'max_impnd_cpct', title: '최대저수용량(㎥)' },
+  { id: 'altd_vl', title: '표고(EL.m)' },
+  { id: 'wtlv_vl', title: '수위(m)' },
+  { id: 'excln_wpmp_ablt_vl', title: '오수양수능력(m²/d)' },
+  // { id: 'instMngNo', title: '기관관리번호' },
+]
+export const DrtwSewagePumpCol2 = [
+  { id: 'rowNumber', title: '일련번호' },
+  // { id: 'fid', title: 'FID' },
+  // { id: 'geom', title: 'geometry' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
+  { id: 'fcltMngNo', title: '시설관리번호' },
+  // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
+  // { id: 'mapshtNo', title: '도엽번호' },
+  { id: 'ctpvNm', title: '시도' },
+  { id: 'sggNm', title: '시군구' },
+  // { id: 'mngInstCd', title: '관리기관코드' },
+  { id: 'swagePmstnNm', title: '하수펌프장명' },
+  { id: 'instlYmd', title: '설치일자' },
+  // { id: 'pllnArea', title: '부지면적(m²)' },
+  // { id: 'opngSttsCd', title: '개통상태코드' },
+  // { id: 'usgCd', title: '용도코드' },
+  { id: 'dailyPrcsCpct', title: '일일처리용량(㎥)' },
+  { id: 'maxImpndCpct', title: '최대저수용량(㎥)' },
+  { id: 'altdVl', title: '표고(EL.m)' },
+  { id: 'wtlvVl', title: '수위(m)' },
+  { id: 'exclnWpmpAbltVl', title: '오수양수능력(m²/d)' },
+  // { id: 'instMngNo', title: '기관관리번호' },
+]
+// 펌프장 용도 코드표
+export const DRTW_SEWAGE_PUMP_USE_CODES = [
+  { val: "SBE000", text: "미분류" },
+  { val: "SBE001", text: "빗물펌프장" },
+  { val: "SBE002", text: "오수펌프장" },
+  { val: "SBE003", text: "처리장내펌프장" },
+  { val: "SBE900", text: "오수배제" },
+  { val: "SBE901", text: "우수배제" },
+  { val: "SBE999", text: "기타" },
+];
+
+// 우수토실
+export const stofcbrCol = [
+  // { id: 'ftre_smbol_cd', title: '지형지물부호코드' },
+  { id: 'fclt_mng_no', title: '시설관리번호' },
+  // { id: 'pbadms_emd_cd', title: '행정읍면동코드' },
+  { id: 'mapsht_no', title: '도엽번호' },
+  // { id: 'mng_inst_cd', title: '관리기관코드' },
+  { id: 'instl_ymd', title: '설치일자' },
+  // { id: 'fclty_shp_cd', title: '시설물형태코드' },
+  { id: 'worflw_wall_hgt', title: '월류벽높이(m)' },
+  // { id: 'mhl_exst_yn_cd', title: '맨홀존재여부코드' },
+  // { id: 'swage_mhl_ftre_smbol_cd', title: '하수맨홀지형지물부호코드' },
+  { id: 'swage_mhl_mng_no', title: '하수맨홀관리번호' },
+  { id: 'drtn_angl', title: '방향각도(°)' },
+]
+export const stofcbrCol2 = [
+  { id: 'rowNumber', title: '일련번호' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
+  { id: 'fcltMngNo', title: '시설관리번호' },
+  // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
+  { id: 'mapshtNo', title: '도엽번호' },
+  { id: 'ctpvNm', title: '시도' },
+  { id: 'sggNm', title: '시군구' },
+  // { id: 'mngInstCd', title: '관리기관코드' },
+  { id: 'instlYmd', title: '설치일자' },
+  // { id: 'fcltyShpCd', title: '시설물형태코드' },
+  { id: 'worflwWallHgt', title: '월류벽높이(m)' },
+  // { id: 'mhlExstYnCd', title: '맨홀존재여부코드' },
+  // { id: 'swageMhlFtreSmbolCd', title: '하수맨홀지형지물부호코드' },
+  { id: 'swageMhlMngNo', title: '하수맨홀관리번호' },
+  { id: 'drtnAngl', title: '방향각도(°)' },
+]
+export const stofcbrExcelCol = {
+  'fcltMngNo': '시설관리번호',
+  'mapshtNo': '도엽번호',
+  'ctpvNm': '시도',
+  'sggNm': '시군구',
+  'instlYmd': '설치일자',
+  'worflwWallHgt': '월류벽높이(m)',
+  'swageMhlMngNo': '하수맨홀관리번호',
+  'drtnAngl': '방향각도(°)'
+};
+
+// 중점우수토실 측정지점
+export const untrtSwgRainCol1 = [
+  { id: 'manage_no', title: '관리번호' },
+  { id: 'swr_ppl_eqp_nm', title: '처리구역' },
+  { id: 'swr_ppl_trt_nm', title: '처리분구' },
+  { id: 'addr', title: '인근주소' },
+  { id: 'chmbr_xcnts', title: '토실 위도' },
+  { id: 'chmbr_ydnts', title: '토실 경도' }
+];
+
+// 중점우수토실 측정지점 시설현황
+export const untrtSwgRainCol2 = [
+  { id: 'mesure_spot_se', title: '구분' }, // 유량계측정방식 기타
+  { id: 'discharge_pipe_spec', title: '방류관로 규격(m)' },
+  { id: 'swr_ppl_eqp_ar', title: '배수구역 면적(m²)' },
+  { id: 'swr_trt_popl', title: '하수처리 인구(인)' },
+  { id: 'screen_instl_at', title: '스크린설치 여부' },
+  { id: 'weir_hg', title: '위어 높이(m)' },
+  { id: 'weir_lt', title: '위어 길이(m)' }
+];
+
+// 중점우수토실 강우정보 (id값 틀릴 수 있음)
+export const untrtSwgRainCol3 = [
+  { id: 'rainBeginDt', title: '강우시작일시' },
+  { id: 'rainEndDt', title: '강우종료일시' },
+  { id: 'precdngDry', title: '선행건기(h)' },
+  { id: 'rainInfo', title: '강우정보' },
+  { id: 'rainFall', title: '누적강우량(mm)' },
+  { id: 'cntncTime', title: '지속시간(h)' },
+  { id: 'rainIn', title: '강우강도(mm/h)' }
+];
+
+// 중점우수토실 측정정보 (id값 틀릴 수 있음)
+export const untrtSwgRainCol4 = [
+  { id: 'mesureBeginDt', title: '측정시작일시' },
+  { id: 'mesureEndDt', title: '측정종료일시' },
+  { id: 'mesureIntrvl', title: '측정간격(분)' },
+  { id: 'mesureMhrlsInstlLc', title: '측정기기 설치위치' },
+  { id: 'flwmtrCombined', title: '유량계 종류 및 모델명' }, // 합쳐진 컬럼
+  { id: 'qltwtrBeginDt', title: '채수시작일시' },
+  { id: 'qltwtrEndDt', title: '채수종료일시' },
+  { id: 'qltwtrCo', title: '채수횟수' }
+];
+
+// 중점우수토실 수량/수질측정 정보
+export const untrtSwgRainCol5 = [
+  { id: 'odr', title: '회차' },
+  { id: 'mesureDt', title: '측정일자' },
+  { id: 'mesureQy', title: '수량(m³)' },
+  { id: 'mesureBod', title: 'BOD(mg/L)' },
+  { id: 'mesureToc', title: 'TOC(mg/L)' },
+  { id: 'mesureLoad', title: '오염부하량(kg)' }
+];
+
+// 🎯 날짜 필드들 (yyyymmdd -> yyyy년 mm월 dd일)
+export const dateFields = [
+  'instl_ymd', 'last_drdgn_ymd', 'cmcn_ymd', 'oprtng_strt_ymd', 'clsg_ymd',
+  'mesure_begin_dt', 'mesure_end_dt', 'qltwtr_begin_dt', 'qltwtr_end_dt',
+  'rain_begin_dt', 'rain_end_dt', 'mesureDt',
+  // 🎯 camelCase 버전 추가
+  'instlYmd', 'lastDrdgnYmd', 'cmcnYmd', 'oprtngStrtYmd', 'clsgYmd',
+  'mesureBeginDt', 'mesureEndDt', 'qltwtrBeginDt', 'qltwtrEndDt',
+  'rainBeginDt', 'rainEndDt',
+  'flfmtBgngYmd', 'flfmtEndYmd', 'flfmtYr'
+];
+
+// 🎯 연월 필드들 (yyyymm -> yyyy년 m월)
+export const yearMonthFields = ['aplcnYm',];
+
+// 🎯 날짜시간 필드들 (yyyy-mm-dd hh:mm:ss -> yyyy년 m월 d일 hh:mm)
+export const dateTimeFields = ['regDt',];
+
+// 🎯 숫자 필드들 (천 단위 구분자)
+export const numberFields = [
+  'pdmt', 'prlg', 'avg_grdn', 'drtw_mltv_area', 'excln_mltv_area', 'tmpt_dpth', 'scend_dpth', 'trfln_cnt', 'vrtc_len', 'wdth_len',
+  'fclt_cpct', 'plln_area', 'prcs_zone_area_sum', 'swtrmt_ppltn_cnt', 'stty_crtr_bod', 'stty_crtr_toc', 'stty_crtr_ss', 'stty_crtr_tn', 'stty_crtr_tph', 'stty_crtr_clbcl_cnt',
+  'swage_mh_diam', 'wdth_len', 'vrtc_len', 'altd_vl', 'dpthlVl',
+  'plln_area', 'daily_prcs_cpct', 'max_impnd_cpct', 'altd_vl', 'wtlv_vl', 'excln_wpmp_ablt',
+  'worflw_wall_hgt',
+  'swr_ppl_eqp_ar', 'swr_trt_popl', 'weir_hg', 'weir_lt',
+  'precdng_dry', 'rain_fall', 'cntnc_time', 'rain_in',
+  'mesure_intrvl', 'qltwtr_co', 'mesureQy', 'mesureBod', 'mesureToc', 'mesureLoad',
+  // 🎯 camelCase 버전 추가
+  'avgGrdn', 'drtwMltvArea', 'exclnMltvArea', 'tmptDpth', 'scendDpth', 'trflnCnt', 'vrtcLen', 'wdthLen',
+  'fcltCpct', 'pllnArea', 'prcsZoneAreaSum', 'swtrmtPpltnCnt', 'sttyCltrBod', 'sttyCltrToc', 'sttyCltrSs', 'sttyCltrTn', 'sttyCltrTph', 'sttyCltrClbclCnt',
+  'swageMhDiam', 'altdVl', 'dpthlVl',
+  'dailyPrcsCpct', 'maxImpndCpct', 'wtlvVl', 'exclnWpmpAblt',
+  'worflwWallHgt',
+  'swrPplEqpAr', 'swrTrtPopl', 'weirHg', 'weirLt',
+  'precdngDry', 'rainFall', 'cntncTime', 'rainIn',
+  'mesureIntrvl', 'qltwtrCo', 'rnysnFvlc', 'clarFvlc',
+  'bizAmt', 'count',
+  'chmbr_xcnts', 'chmbr_ydnts'
+];
diff --git a/apps/sn/app/html/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx b/apps/sn/app/html/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx
new file mode 100644
index 000000000..0e2ec3780
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx
@@ -0,0 +1,163 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (하수관로)
+ * 
+ * 📄 MsSwagePpl
+ * 하수관로 정보 컴포넌트
+ *
+ * - 하수관로의 자체입력정보 표시 및 편집 기능
+ * - 보수 및 갱신, 청소 및 준설, 점검 및 진단 데이터 조회 및 표시
+ * - VerticalTable을 통한 입력 폼 렌더링
+ * - InputSection을 통한 운영 데이터 관리
+ * - 저장 버튼을 통한 데이터 저장 기능
+ * 
+ * 🔗 사용 API
+ * - 시설별 운영 정보 조회: GET /api/v1/bizInfo/bizByFclt (sewerage-service)
+ */
+'use client'
+import { VerticalTable } from '@/components/ui/verticalTable';
+import React, { useState, useEffect } from 'react'
+import InputSection from '../InputSection';
+import { handleInputChange } from '../common';
+import { getData } from "@/components/lib/api";
+import useStore from '@/store/useStore';
+
+// 하수관로
+const inputColumn = [
+  { id: "instlMbdyCd", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
+  { id: "swtrmtZoneNm", title: "처리구역", type: "input" },
+  { id: "mltvZoneNm", title: "배수구역", type: "input" },
+  { id: "mltvDtdvNm", title: "배수분구", type: "input" },
+  { id: "lineCd", title: "지선/간선", type: "select", options: ["지선", "간선"] },
+  { id: "floCd", title: "흐름방식", type: "select", options: ["자연유하", "압송"] },
+  { id: "layCd", title: "매설위치", type: "select", options: ["도로", "하상"] },
+];
+
+type operationDataType = { year: string; type: string, bizInfoNm: string, bizType: string };
+
+const MsSwagePpl = ({ featureData, onSaveClick }: { featureData: any, onSaveClick?: () => void }) => {
+  const [formData, setFormData] = useState<any>({});
+  const [repairData, setRepairData] = useState<operationDataType[]>([]);
+  const [cleaningData, setCleaningData] = useState<operationDataType[]>([]);
+  const [inspectionData, setInspectionData] = useState<operationDataType[]>([]);
+  const dataMap = {
+    repair: { data: repairData, setData: setRepairData },
+    cleaning: { data: cleaningData, setData: setCleaningData },
+    inspection: { data: inspectionData, setData: setInspectionData },
+  };
+
+  const { BIZ_SE_CD, BIZ_TY_CD } = useStore();
+
+  // 마운트 및 업데이트 시 API 호출
+
+  useEffect(() => {
+    if (featureData) {
+      setFormData(featureData);
+    }
+
+    const fetchAll = async () => {
+      const operationData = await getData(`v1/bizInfo/bizByFclt?mngInstCd=${featureData?.mng_inst_cd}&fcltMngNo=${featureData?.fclt_mng_no}&page=0&size=1`);
+
+      let inspectionArr: operationDataType[] = [];
+      let cleaningArr: operationDataType[] = [];
+      let repairArr: operationDataType[] = [];
+
+      if (Array.isArray(operationData)) {
+        operationData.forEach(item => {
+          if (!item.flfmt_yr) return;
+          // biz_se_cd에 해당하는 type명 찾기
+          const seCodeObj = BIZ_SE_CD.find(code => code.lwpoCd === item.biz_se_cd);
+          const tyCodeObj = BIZ_TY_CD.find(code => code.lwpoCd === item.biz_ty_cd);
+          const seTypeName = seCodeObj ? seCodeObj.lwpoCdNm : "";
+          const tyTypeName = tyCodeObj ? tyCodeObj.lwpoCdNm : "";
+          switch (item.biz_se_cd) {
+            case "100":
+              inspectionArr.push({
+                year: String(item.flfmt_yr),
+                type: seTypeName,
+                bizInfoNm: String(item.biz_info_nm),
+                bizType: tyTypeName,
+              });
+              break;
+            case "203":
+              cleaningArr.push({
+                year: String(item.flfmt_yr),
+                type: seTypeName,
+                bizInfoNm: String(item.biz_info_nm),
+                bizType: tyTypeName,
+              });
+              break;
+            case "200":
+            case "201":
+            case "204":
+              repairArr.push({
+                year: String(item.flfmt_yr),
+                type: seTypeName,
+                bizInfoNm: String(item.biz_info_nm),
+                bizType: tyTypeName,
+              });
+              break;
+          }
+        });
+      }
+
+      setInspectionData(inspectionArr);
+      setCleaningData(cleaningArr);
+      setRepairData(repairArr);
+    };
+    fetchAll();
+  }, [featureData]);
+
+  // 폼 데이터가 변경될 때 호출될 핸들러
+  const handleFormDataChange = (newFormData: any) => {
+    setFormData(newFormData);
+  };
+
+  // 저장 버튼 클릭 시 최신 formData를 부모에게 전달
+  const handleSaveClick = () => {
+    if (onSaveClick) {
+      // 저장 전에 formData를 부모 컴포넌트의 handleSaveClick에 전달
+      onSaveClick();
+    }
+  };
+
+
+  return (
+    <>
+      <VerticalTable
+        headName='입력정보'
+        tableData={featureData ? [formData] : []}
+        headlist={inputColumn}
+        pageSize={20}
+        total={0}
+        cellClick={undefined}
+        isEditable={true}
+        onPageChange={function (page: number): void {
+          throw new Error("Function not implemented.");
+        }}
+        showSaveButton={true}
+        onSaveClick={handleSaveClick}
+        onFormDataChange={handleFormDataChange} // 폼 데이터 변경 콜백 추가
+      />
+      <InputSection
+        title="보수 및 갱신"
+        data={repairData}
+        sectionKey="repair"
+        onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)}
+      />
+      <InputSection
+        title="청소 및 준설"
+        data={cleaningData}
+        sectionKey="cleaning"
+        onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)}
+      />
+      <InputSection
+        title="점검 및 진단"
+        data={inspectionData}
+        sectionKey="inspection"
+        onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)}
+      />
+    </>
+  )
+}
+
+export default MsSwagePpl
\ No newline at end of file
diff --git a/apps/sn/app/html/(map-layout)/map/components/popupComponent/Ssc.tsx b/apps/sn/app/html/(map-layout)/map/components/popupComponent/Ssc.tsx
new file mode 100644
index 000000000..683fb9df0
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/popupComponent/Ssc.tsx
@@ -0,0 +1,328 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (우수토실)
+ * 
+ * 📄 Ssc
+ * 우수토실 정보 컴포넌트
+ *
+ * - 우수토실의 자체입력정보 표시 및 편집 기능
+ * - 중점우수토실 운영정보 모달 표시 (강우/측정 정보, 수량/수질측정 정보)
+ * - VerticalTable을 통한 입력 폼 렌더링
+ * - 저장 버튼을 통한 데이터 저장 기능
+ * 
+ * 🔗 사용 API
+ * - 위경도로 강우시 미처리 하수 목록 조회: GET /api/v1/onsemiro/getSwgRainsByGeomety (sewerage-service)
+ * - 강우시 월류 하수 관리 모니터링 조회: GET /api/v1/onsemiro/swgRain/{adstDstrCd}/{manageNo}/mntrngs (sewerage-service)
+ */
+import { UiModal, UiTable } from '@common/business_components/ui';
+import { Button, TableHead, TableRow } from '@common/components/ui';
+import React, { useState, useEffect } from 'react';
+import { untrtSwgRainCol3, untrtSwgRainCol4, untrtSwgRainCol5 } from '../common/table';
+import { VerticalTable } from '@/components/ui/verticalTable';
+import { getRawJson } from "@/components/lib/api";
+import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
+import { Label } from '@radix-ui/react-label';
+
+const inputColumn = [
+  { id: "prrtymngYn", title: "중점여부", type: "select", options: ["우수토실", "중점우수토실"] },
+  { id: "swtrmtZoneNm", title: "처리구역", type: "input" },
+];
+
+const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
+  featureData: any,
+  isMainSsc?: boolean,
+  chmbrXcnts?: string,
+  chmbrYdnts?: string,
+  onSaveClick?: () => void
+}) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDataLoaded, setIsDataLoaded] = useState(false);
+  const [formData, setFormData] = useState<any>({});
+  const [rainMeasureData, setRainMeasureData] = useState<any>({}); // 강우, 측정 정보
+  const [mntrngsData, setMntrngsData] = useState<any[]>([]); // 수량/수질측정 정보
+  const [totalCount, setTotalCount] = useState<number>(0);
+  const [totalDetailCount, setTotalDetailCount] = useState<number>(0);
+  const [selectedRowIndex, setSelectedRowIndex] = useState<number>(-1);
+  const [curPage, setCurPage] = useState<number>(1);
+  const [curDetailPage, setCurDetailPage] = useState<number>(1);
+  const [isResetPage, setIsResetPage] = useState<boolean>(true);
+  const [isResetDetailPage, setIsResetDetailPage] = useState<boolean>(true);
+  const [isResetSelection, setIsResetSelection] = useState<boolean>(false);
+
+  // 강우, 측정 정보 API 호출 함수
+  const fetchRainMeasureData = async (chmbrXcnts: string, chmbrYdnts: string) => {
+    setIsResetDetailPage(true);
+    setIsResetSelection(true);
+    if (!chmbrXcnts || !chmbrYdnts) {
+      console.warn('추가 데이터 호출 실패: 필수 매개변수 누락', { chmbrXcnts, chmbrYdnts });
+      return [];
+    }
+
+    try {
+      const queryParams = new URLSearchParams({
+        chmbrXcnts: chmbrXcnts,
+        chmbrYdnts: chmbrYdnts,
+        page: `${curPage - 1}`,
+        size: '3',
+      });
+
+      const result = await getRawJson(`/sewerage-service/api/v1/onsemiro/getSwgRainsByGeomety?${queryParams.toString()}`);
+
+      // helper: "YYYY-MM-DD HH:MM:SS" -> "MM-DD HH:MM"
+      const formatNoYearNoSec = (val: any) => {
+        if (!val && val !== 0) return "-";
+        const s = String(val);
+        // 정규식으로 안전하게 매칭 후 변환
+        const m = s.match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2})(?::\d{2})?$/);
+        if (m) {
+          const [, , mm, dd, hh, min] = m;
+          return `${mm}-${dd} ${hh}:${min}`;
+        }
+        // 포맷이 예상과 다르면, 길이에 따라 잘라보기
+        if (s.length >= 16) return s.substring(5, 16); // "YYYY-" 제거하고 초 전까지
+        return s;
+      };
+
+      const processedDataArray: any[] = result.content.map((data: any) => {
+        // 🎯 formatDisplayData로 기본 포맷팅 적용
+        const formattedItem = formatDisplayData(data);
+        const flwmtrInstTp = data.flwmtrInstTp === 'R' ? '이동식' : data.flwmtrInstTp === 'S' ? '고정식' : '-';
+        const flwmtrMesureTp = data.flwmtrMesureTp === 'R' ? '레이더' : data.flwmtrMesureTp === 'P' ? '플륨'
+          : data.flwmtrMesureTp === 'U' ? '초음파' : data.flwmtrMesureTp === 'E' ? '기타' : '-';
+        const flwmtrCombined = `${flwmtrInstTp}, ${flwmtrMesureTp}`;
+        // 🎯 추가 데이터 조합
+        return {
+          ...formattedItem,
+          rainInfo: `${data.rainInfo === '0' ? '강우량계' : data.observatory || '-'}`, // 강우정보 0: 강우량계,1: 관측기관 이면 OBSERVATORY 이값사용
+          mesureIntrvl: `${data.mesureIntrvlGbn === '1' ? '1분' : (data.mesureIntrvlGbn === '0' ? data.mesureIntrvl + '분' : '-')}`, // 측정간격          
+          flwmtrCombined: `${flwmtrCombined} / ${data.flwmtrKnd || '-'}`, // 유량계종류 및 모델명
+          mesureBeginDt: data.mesureBeginDt ? formatNoYearNoSec(data.mesureBeginDt) : '-', // 수량 측정시작일
+          mesureEndDt: data.mesureEndDt ? formatNoYearNoSec(data.mesureEndDt) : '-', // 수량 측정종료일
+          qltwtrBeginDt: data.qltwtrBeginDt ? formatNoYearNoSec(data.qltwtrBeginDt) : '-', // 수질 측정시작일(채수시작일)
+          qltwtrEndDt: data.qltwtrEndDt ? formatNoYearNoSec(data.qltwtrEndDt) : '-', // 수질 측정종료일(채수종료일)
+        };
+      });
+      setRainMeasureData(processedDataArray);
+      setTotalCount(result?.totalElements || 0);
+    } catch (error) {
+      console.error('추가 데이터 로딩 실패:', error);
+      return [];
+    }
+  };
+
+  // 수량/수질측정 정보 API 호출 함수
+  const fetchMntrngsData = async (adstDstrCd: string, manageNo: string) => {
+    setIsResetDetailPage(true);
+    if (!adstDstrCd || !manageNo) {
+      console.warn('추가 데이터 호출 실패: 필수 매개변수 누락', { adstDstrCd, manageNo });
+      return [];
+    }
+
+    try {
+      const queryParams = new URLSearchParams({
+        page: `${curDetailPage - 1}`,
+        size: '3',
+      });
+
+      const result = await getRawJson(`/sewerage-service/api/v1/onsemiro/swgRain/${adstDstrCd}/${manageNo}/mntrngs?${queryParams.toString()}`);
+
+      // 각 아이템 전처리
+      const processedDataArray = result.content.map((data: any) => {
+        // 기본 포맷팅 적용
+        const formattedItem = formatDisplayData(data);
+        return {
+          ...formattedItem,
+        };
+      });
+
+      setMntrngsData(processedDataArray);
+      setTotalDetailCount(result?.totalElements || 0);
+    } catch (error) {
+      console.error('추가 데이터 로딩 실패:', error);
+      return [];
+    }
+  };
+
+
+  // 🎯 추가 데이터는 별도 useEffect로 비동기 로딩
+  useEffect(() => {
+    // 강우/측정 정보 데이터 호출
+    if (isMainSsc && chmbrXcnts && chmbrYdnts) {
+      fetchRainMeasureData(chmbrXcnts, chmbrYdnts)
+    }
+  }, [chmbrXcnts, chmbrYdnts]);
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    if (!isDataLoaded) {
+      setTimeout(() => setIsDataLoaded(true), 100);
+    }
+  };
+
+  // featureData가 변경될 때 formData 초기화
+  useEffect(() => {
+    if (featureData) {
+      setFormData(featureData);
+      setMntrngsData([]);
+    }
+  }, [featureData]);
+
+  // featureData가 변경될 때 formData 초기화
+  useEffect(() => {
+    // showTable이 true일 때만 fetch (최초 렌더 방지)
+    setIsResetDetailPage(false);
+    setSelectedRowIndex(-1);
+    if (chmbrXcnts && chmbrYdnts) fetchRainMeasureData(chmbrXcnts, chmbrYdnts);
+  }, [curPage]);
+
+  // 페이지 변경 시마다 데이터 fetch
+  useEffect(() => {
+    if (chmbrXcnts && chmbrYdnts && selectedRowIndex !== -1) fetchMntrngsData(rainMeasureData[selectedRowIndex].adstDstrCd, rainMeasureData[selectedRowIndex].manageNo);
+  }, [curDetailPage]);
+
+  // 폼 데이터가 변경될 때 호출될 핸들러
+  const handleFormDataChange = (newFormData: any) => {
+    setFormData(newFormData);
+  };
+
+  // 저장 버튼 클릭 시 최신 formData를 부모에게 전달
+  const handleSaveClick = () => {
+    if (onSaveClick) {
+      // 저장 전에 formData를 부모 컴포넌트의 handleSaveClick에 전달
+      onSaveClick();
+    }
+  };
+
+  // 테이블 셀 클릭 핸들러 추가
+  const handleCellClick = async (index: number | undefined, headId: string) => {
+    if (index !== undefined && rainMeasureData) {
+      await fetchMntrngsData(rainMeasureData[index].adstDstrCd, rainMeasureData[index].manageNo);
+      setSelectedRowIndex(index);
+    }
+  };
+
+  const renderModalBody = () => (
+    <div className='grid grid-cols-1 gap-4 p-4 mr-4 mt-4'>
+      <div className='border rounded-lg pt-4 bg-white'>
+        <Label className='text-2xl font-bold text-label ml-4'>강우/측정 정보</Label>
+        <hr className="my-4 ml-4 mr-4 border-t border-gray-300" />
+        {/* 강우정보 테이블 */}
+        <UiTable
+          headName=''
+          tableData={rainMeasureData}
+          headlist={untrtSwgRainCol3}
+          pageSize={3}
+          total={0}
+          cellClick={handleCellClick}
+          onPageChange={setCurPage}
+          resetPageNo={isResetPage}
+          resetSelection={isResetSelection}
+          index={selectedRowIndex}
+        />
+
+        {/* 측정정보 테이블 */}
+        <UiTable
+          headName=''
+          tableData={rainMeasureData}
+          headlist={untrtSwgRainCol4}
+          pageSize={3}
+          total={totalCount}
+          cellClick={handleCellClick}
+          onPageChange={setCurPage}
+          resetPageNo={isResetPage}
+          resetSelection={isResetSelection}
+          index={selectedRowIndex}
+        >
+          {/* 커스텀 헤더 */}
+          <TableRow>
+            <TableHead colSpan={5} className="text-center bg-blue-100 font-bold">수량</TableHead>
+            <TableHead colSpan={3} className="text-center bg-blue-100 font-bold">수질</TableHead>
+          </TableRow>
+          <TableRow>
+            <TableHead className="text-center">측정시작일시</TableHead>
+            <TableHead className="text-center">측정종료일시</TableHead>
+            <TableHead className="text-center">측정간격(분)</TableHead>
+            <TableHead className="text-center">측정기기설치위치</TableHead>
+            <TableHead className="text-center">유량계 종류 및 모델명</TableHead>
+            <TableHead className="text-center">채수시작일시</TableHead>
+            <TableHead className="text-center">채수종료일시</TableHead>
+            <TableHead className="text-center">채수횟수</TableHead>
+          </TableRow>
+        </UiTable>
+      </div>
+
+      <div className='border rounded-lg pt-4 bg-white'>
+        {/* 수량/수질측정 정보 테이블 */}
+        <Label className='text-2xl font-bold text-label ml-4'>수량/수질측정 정보</Label>
+        <hr className="my-4 ml-4 mr-4 border-t border-gray-300" />
+        <UiTable
+          headName=''
+          tableData={mntrngsData}
+          headlist={untrtSwgRainCol5}
+          pageSize={3}
+          total={totalDetailCount}
+          cellClick={undefined}
+          onPageChange={setCurDetailPage}
+          resetPageNo={isResetDetailPage}
+        />
+      </div>
+    </div>
+  )
+
+  return (
+    <div>
+      {!isMainSsc && (
+        <VerticalTable
+          headName='입력정보'
+          tableData={featureData ? [formData] : []}
+          headlist={inputColumn}
+          pageSize={0}
+          total={0}
+          cellClick={undefined}
+          isEditable={true}
+          onPageChange={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+          showSaveButton={true}
+          onSaveClick={handleSaveClick}
+          onFormDataChange={handleFormDataChange} // 폼 데이터 변경 콜백 추가
+        />
+      )}
+
+      {isMainSsc && (
+        <div>
+          <div className="card-header">
+            <h3 className="text-2xl mx-3 font-medium text-label">중점우수토실 운영정보</h3>
+          </div>
+          <Button
+            className='mx-auto block w-64 mt-3 py-2 text-white rounded-sm text-sm font-medium hover:bg-blue-700 bg-blue-600'
+            onClick={openModal}
+          >
+            상세보기
+          </Button>
+
+          <UiModal
+            open={isModalOpen}
+            onOpenChange={setIsModalOpen}
+            bodyClass={`
+              h-[100vh]
+              w-[60vw]
+              max-w-none
+              max-h-none
+              overflow-y-auto
+              z-[101]
+            `}
+            body={renderModalBody()}
+            noHeaderYn='Y'
+            noFooterYn='Y'
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Ssc
diff --git a/apps/sn/app/html/(map-layout)/map/components/popupComponent/SwtrmtFclt.tsx b/apps/sn/app/html/(map-layout)/map/components/popupComponent/SwtrmtFclt.tsx
new file mode 100644
index 000000000..8b029673f
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/popupComponent/SwtrmtFclt.tsx
@@ -0,0 +1,73 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (하수처리시설)
+ * 
+ * 📄 SwtrmtFclt
+ * 하수처리시설 정보 컴포넌트
+ *
+ * - 하수처리시설의 디지털 자료관 연계 정보 표시
+ * - VerticalTable을 통한 테이블 렌더링
+ * - 조회 버튼을 통한 모달 표시 및 ReportTab 연동
+ */
+'use client'
+import React, { useState } from 'react'
+import { VerticalTable } from '@/components/ui/verticalTable';
+import { UiModal } from '@common/business_components/ui';
+import { Button } from '@common/components/ui';
+import ReportTab from '../../searchModal/reportTab';
+
+// 하수처리시설
+const headList = [
+  { id: "title", title: "하수도정비 기본계획보고서" },
+];
+
+const SwtrmtFclt = ({ gisObject }: { gisObject: any }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const ctpvNm = gisObject?.ctpv_nm;
+  const sggNm = gisObject?.sgg_nm;
+
+  return (
+    <div>
+      <VerticalTable
+        children={{
+          title: <Button className="gray" onClick={() => setIsModalOpen(true)}>조회</Button>
+        }}
+        headName='디지털 자료관 연계정보'
+        tableData={[]}
+        headlist={headList}
+        pageSize={20}
+        total={0}
+        cellClick={undefined}
+        isEditable={true}
+        onPageChange={function (page: number): void {
+          throw new Error("Function not implemented.");
+        }}
+      />
+      <UiModal
+        open={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        headerTitle="하수도정비 기본계획보고서"
+        headerTitleClass="text-3xl font-semibold text-gray-700"
+        bodyClass={`
+                h-[100vh]
+                w-[60vw]
+                max-w-[60vw]
+                max-h-[100vh]
+                overflow-hidden
+                z-[101]
+              `}
+        body={
+          <ReportTab
+            open={isModalOpen}
+            isSearch={false}
+            ctpvNm={ctpvNm}
+            sggNm={sggNm}
+          />
+        }
+        useDirectRender={true}
+      />
+    </div >
+  )
+}
+
+export default SwtrmtFclt
\ No newline at end of file
diff --git a/apps/sn/app/html/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts b/apps/sn/app/html/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts
new file mode 100644
index 000000000..aba8d2eed
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts
@@ -0,0 +1,271 @@
+import {useState, useEffect} from 'react';
+import { getData } from '@/components/lib/api';
+import moment from "moment";
+
+export type TInftwtAnls = {
+  inftwtAnlsSn:number;
+  aplcnYm: string;
+  ctpvCd: string;
+  sggCd: string;
+  swtrmtFcltNm: string;
+  atflCd: string;
+  atflId: string;
+  atflInpNm: string;
+  atflHrPttnNm: string;
+  atflMpngNm: string;
+  atflOilqNm: string;
+  atflNm: string;
+  drtwSwtcRt:number;
+  anlsInfo: string;
+  scsYn: string;
+};
+export type TInftwtAnlsRslt = {
+  inftwtAnlsSn: number;
+  pplMngNo: string;
+  anlsTm: string;
+  predcOilq:number;
+}
+export type TRdiiAnls = {
+  rainInfwtAnlsSn:number;
+  aplcnYm: string;
+  ctpvCd: string;
+  sggCd: string;
+  swtrmtFcltNm: string;
+  atflCd: string;
+  atflId: string;
+  atflInpNm: string;
+  atflHrPttnNm: string;
+  atflMpngNm: string;
+  atflRainNm: string;
+  atflNm: string;
+  drtwSwtcRt:number;
+  anlsInfo: string;
+  scsYn: string;
+  srcNm: string; // 출처이름
+};
+export type TRdiiAnlsRslt = {
+  rainInfwtAnlsSn: number;
+  pplMngNo: string;
+  anlsTm: string;
+  predcOilq:number;
+  minq:number;
+}
+export type TOilqData = {
+  inftwtAnlsSn: number; // 침입수분석 일련번호
+  pplMngNo: string; // 관로관리번호 
+  mtrngDt: string; // 계측일시
+  oilq: number; // 유량
+}
+export type TRainData = {
+  rainInfwtAnlsSn: number;
+  mtrngDt: string;
+  amrf: number; // 강우량
+}
+
+function roundTo(n: number, digits: number): number {
+  const factor = Math.pow(10, digits);
+  return Math.round(n * factor) / factor;
+}
+
+const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string, hidden?: boolean }[] => {
+    const yyyymms1 : { text: string; val: string; hidden?: boolean }[] = yyyymms.map(dateStr => {
+      const year = dateStr.slice(0, 4);
+      const month = dateStr.slice(4, 6);
+      return {
+        text: `${year}-${month}`,
+        val: dateStr
+      };
+    });
+    yyyymms1.unshift({ val: '0', text: '선택', hidden: true });
+    return yyyymms1;
+};
+const selectAplcnYms = async(gubun:string) => { // 상수사용월
+    try {
+    const queryString = '';
+    const result = await getData(`v1/${gubun}/aplcnYm${queryString ? `?${queryString}` : ''}`);
+    if (result && result.length > 0) {
+        return getOptionsAplcnYm(result);
+    }
+    } catch (error) {
+    console.error(error);
+    }
+};
+
+export const useAplcnYms = (gubun:string) => {
+  const [data, setData] = useState<{ text: string; val: string }[]>([]);
+
+  useEffect(() => {
+    const fetch = async (gubun:string) => {
+      const result = await selectAplcnYms(gubun);
+      if (result) setData(result);
+    };
+    fetch(gubun);
+  }, [gubun]);
+
+  return data;
+};
+export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string; val: number, hidden?: boolean }[] => {
+  const options : { text: string; val: number; hidden?: boolean }[] = anlsArr.map(anls => ({
+    text: anls.anlsInfo,
+    val: anls.inftwtAnlsSn,
+  }));
+  options.unshift({ val: 0, text: '선택', hidden: true });
+  return options;
+};
+
+export const selectInftwtAnls = async(aplcnYm:string) => { // 침입수분석 
+  try {
+    const queryString = aplcnYm ? `aplcnYmFrom=${aplcnYm}&aplcnYmTo=${aplcnYm}` : '';
+    const result = await getData(`v1/inftwtAnls${queryString ? `?${queryString}` : ''}`);
+    if (result && result.numberOfElements > 0) {
+        return result.content;
+    } 
+  } catch (error) {
+    console.error(error);
+  }
+};
+export const getChartDataInftwtAnlsRslt = (arr: TInftwtAnlsRslt[]): { label: string; val: number }[] => {
+  const options = arr.map(anlsRslt => ({
+    label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("HH시"),
+    val: roundTo(anlsRslt.predcOilq, 2),
+  }));
+  return options;
+};
+export const selectInftwtAnlsRslt = async(inftwtAnlsSn:number, pplMngNo:string) => { // 침입수분석 결과
+  try {
+    if ((inftwtAnlsSn === undefined || inftwtAnlsSn === 0) || !pplMngNo) {
+      console.warn("inftwtAnlsSn or pplMngNo is not provided");
+      return [];
+    }
+    const result = await getData(`v1/inftwtAnlsRslt/ppl/${inftwtAnlsSn}/${pplMngNo}`);
+    if (result && result.numberOfElements > 0) {
+        return result.content;
+    } 
+  } catch (error) {
+    console.error(error);
+  }
+};
+export const getChartDataOilq = (arr: TOilqData[]): { label: string; val: number }[] => {
+  const options = arr.map(anlsRslt => ({
+    label: anlsRslt.mtrngDt,
+    val: roundTo(anlsRslt.oilq, 2),
+  }));
+  return options;
+};
+export const selectOilq = async(inftwtAnlsSn:number, pplMngNo:string) => { // 유량
+  try {
+    if ((inftwtAnlsSn === undefined || inftwtAnlsSn === 0) || !pplMngNo) {
+      console.warn("inftwtAnlsSn or pplMngNo is not provided");
+      return [];
+    }
+    const result = await getData(`v1/inftwtAnlsRslt/oilqPpl/${inftwtAnlsSn}/${pplMngNo}`);
+    if (result && result.numberOfElements > 0) {
+        return result.content;
+    } 
+  } catch (error) {
+    console.error(error);
+  }
+};
+export const selectPplInftwtQty = async(inftwtAnlsSn:number, pplMngNo:string) => { // 침입수량
+  try {
+    if ((inftwtAnlsSn === undefined || inftwtAnlsSn === 0) || !pplMngNo) {
+      console.warn("inftwtAnlsSn or pplMngNo is not provided");
+      return [];
+    }
+    const result = await getData(`v1/inftwtAnlsRslt/pplInftwtQty/${inftwtAnlsSn}/${pplMngNo}`);
+    if (result.length > 0) {
+        return result[0].avg_day_flow;
+    } else {
+      return 0; // 데이터가 없을 경우 0 반환
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+//----------
+export const selectPplRdiiQty = async(rainInfwtAnlsSn:number, pplMngNo:string) => { // rdii값
+  try {
+    if ((rainInfwtAnlsSn === undefined || rainInfwtAnlsSn === 0) || !pplMngNo) {
+      console.warn("rainInfwtAnlsSn or pplMngNo is not provided");
+      return [];
+    }
+    const result = await getData(`v1/rdiiAnlsRslt/pplRdiiQty/${rainInfwtAnlsSn}/${pplMngNo}`);
+    if (result?.sustaintime > 0) {
+        return result;
+    } 
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const getOptionsRdiiAnlsInfo = (anlsArr: TRdiiAnls[]): { text: string; val: number, hidden?: boolean }[] => {
+  const options : { text: string; val: number; hidden?: boolean }[] = anlsArr.map(anls => ({
+    text: anls.anlsInfo,
+    val: anls.rainInfwtAnlsSn,
+  }));
+  options.unshift({ val: 0, text: '선택', hidden: true });
+  return options;
+};
+
+export const selectRdiiAnls = async(aplcnYm:string) => { // 침입수분석 
+  try {
+    const queryString = aplcnYm ? `aplcnYmFrom=${aplcnYm}&aplcnYmTo=${aplcnYm}` : '';
+    const result = await getData(`v1/rdiiAnls${queryString ? `?${queryString}` : ''}`);
+    if (result && result.numberOfElements > 0) {
+        return result.content;
+    } 
+  } catch (error) {
+    console.error(error);
+  }
+};
+export const getChartDataRdiiAnlsRslt = (arr: TRdiiAnlsRslt[]): { label: string; lineVal0: number, barVal0:number }[] => {
+  const options = arr.map(anlsRslt => ({
+    label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("MM-DD HH시"),
+    lineVal0: roundTo(anlsRslt.predcOilq, 2),
+    barVal0: 0
+  }));
+  return options;
+};
+export const getChartDataRdiiAnlsRsltMinq = (arr: TRdiiAnlsRslt[]): { label: string; val: number }[] => {
+  const options = arr.map(anlsRslt => ({
+    label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("MM-DD HH시"),
+    val: roundTo(anlsRslt.minq, 2),
+  }));
+  return options;
+};
+export const selectRdiiAnlsRslt = async(rainInfwtAnlsSn:number, pplMngNo:string) => { // RDII분석 결과
+  try {
+    if ((rainInfwtAnlsSn === undefined || rainInfwtAnlsSn === 0) || !pplMngNo) {
+      console.warn("RdiiAnlsSn or pplMngNo is not provided");
+      return [];
+    }
+    const result = await getData(`v1/rdiiAnlsRslt/ppl/${rainInfwtAnlsSn}/${pplMngNo}`);
+    if (result && result.numberOfElements > 0) {
+        return result.content;
+    } 
+  } catch (error) {
+    console.error(error);
+  }
+};
+export const selectRainData = async(rainInfwtAnlsSn:number) => { // 강우데이터
+  try {
+    if ((rainInfwtAnlsSn === undefined || rainInfwtAnlsSn === 0)) {
+      console.warn("RdiiAnlsSn or pplMngNo is not provided");
+      return [];
+    }
+    const result = await getData(`v1/rdiiAnlsRslt/rainData/${rainInfwtAnlsSn}`);
+    if (result && result.numberOfElements > 0) {
+        return result.content;
+    } 
+  } catch (error) {
+    console.error(error);
+  }
+};
+export const getChartDataRainData = (arr: TRainData[]): { label: string; lineVal0: number, barVal0: number }[] => {
+  const options = arr.map(data => ({
+    label: moment(data.mtrngDt, "YYYY-MM-DD HH:mm:ss").format("MM-DD HH시"),
+    lineVal0: 0,
+    barVal0: roundTo(data.amrf,2),
+  }));
+  return options;
+};
\ No newline at end of file
diff --git a/apps/sn/app/html/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/html/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
new file mode 100644
index 000000000..3836b87f6
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
@@ -0,0 +1,297 @@
+'use client'
+
+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 type { TInftwtAnls } from './aplcnYms';
+import * as fn from './aplcnYms';
+import { useInfilChartModalStore } from '../chartModalStore';
+
+type ModalOpenProp = {
+  pplMngNo?: string; // 관로관리번호
+};
+
+type DataType = {
+  label: string;
+  val: number;
+};
+
+const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: '선택' }];
+
+const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
+  const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useInfilChartModalStore();
+
+  const [selectedAplcnYm, setSelectedAplcnYm] = useState('');
+  const [inftwtAnlss, setInftwtAnlss] = useState<TInftwtAnls[]>([]);
+  const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>(
+    INITIAL_ANALYSIS_OPTIONS,
+  );
+  const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null);
+  const [selectedInftwtAnls, setSelectedInftwtAnls] = useState<number>(0);
+  const [chartData, setChartData] = useState<{ chartData1: DataType[]; chartData2: DataType[] }>({
+    chartData1: [],
+    chartData2: [],
+  });
+  const [inftwtQty, setInftwtQty] = useState<string>('0');
+
+  const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt');
+  const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : '';
+
+  const chartForm = CHART_FORM.LINE;
+  const chartConfig = {
+    chartData1: { label: '순오수량', color: 'red' },
+    chartData2: { label: '실측하수량', color: 'orange' },
+  } 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) {
+      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') {
+      setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
+      return;
+    }
+
+    try {
+      const data = await fn.selectInftwtAnls(selectedValue);
+      const list = data ?? [];
+      setInftwtAnlss(list);
+      setInftwtAnlsInfos(fn.getOptionsInftwtAnlsInfo(list));
+    } catch (error) {
+      console.error('selectInftwtAnls 에러:', error);
+      setInftwtAnlss([]);
+      setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
+    }
+  };
+
+  const handleInftwtAnlsSnChange = (val: string | number) => {
+    const selectedValue = Number(val);
+
+    setSelectedInftwtAnls(selectedValue);
+    setChartData({ chartData1: [], chartData2: [] });
+    setInftwtQty('0');
+
+    if (selectedValue === 0) {
+      setInftwtAnls(null);
+      return;
+    }
+
+    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 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>
+  );
+
+  const handleReset = () => {
+    resetState();
+  }
+
+  const renderBody = () => (
+    <div className="text-black">
+      <div className="mb-4 flex items-start justify-between">
+        <div className="text-[18px] font-semibold text-[#111827]" />
+      </div>
+
+      <div className="grid 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="absolute inset-x-0 bottom-0 mb-[40px] flex justify-center">
+            <Button size="lg" onClick={infilRsltChart} >
+              조회
+            </Button>&nbsp;&nbsp;
+            <Button size="lg" color="gray" onClick={handleReset} >
+              초기화
+            </Button>
+          </div>
+        </section>
+
+        <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
+          <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">침입수 분석 결과</h3>
+
+          <div className="mb-6 grid grid-cols-2 gap-5">
+            <div className="flex min-h-[98px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
+              <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
+                {/* <span className="text-[14px] leading-none">●</span> */}
+                <span>상수사용량 적용연월</span>
+              </div>
+              <div className="text-[20px] font-extrabold text-[#222]">
+                {selectedAplcnYm ? moment(selectedAplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
+              </div>
+            </div>
+
+            <div className="flex min-h-[98px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
+              <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
+                {/* <span className="text-[14px] leading-none">●</span> */}
+                <span>침입수량 산정결과</span>
+              </div>
+              <div className="grid grid-cols-[1fr_auto] items-center gap-7 text-[#222]">
+                <span className="text-[16px] text-[#666]">침입수량</span>
+                <div className='w-[66px] flex items-end justify-start gap-2'>
+                    <span className="text-[20px] font-extrabold">{inftwtQty}</span>
+                    <span className="pb-[2px] text-[16px]">m³/d</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
+            {hasChartData ? (
+              <MainChart
+                chartConfig={chartConfig}
+                chartForm={chartForm}
+                chartData={chartData}
+                chartTitle={'침입수량 그래프'}
+                yFieldText="유량(m³/h)"
+                yFieldText2=""
+              />
+            ) : (
+              <div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
+                데이터가 없습니다.
+              </div>
+            )}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+
+  return (
+    <UiModal
+      open={isModalOpen}
+      onOpenChange={setIsModalOpen}
+      headerTitle=""
+      bodyClass={`
+        w-[78vw]
+        max-w-none
+        min-w-[1000px]
+        min-h-[72vh]
+        overflow-visible
+        z-[50]
+      `}
+      body={renderBody()}
+      noFooterYn="Y"
+    />
+  );
+};
+
+export default React.memo(InfilChart);
diff --git a/apps/sn/app/html/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/html/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
new file mode 100644
index 000000000..aa622be1b
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
@@ -0,0 +1,357 @@
+'use client'
+
+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 type { TRdiiAnls } from './aplcnYms';
+import * as fn from './aplcnYms';
+import { useRdiiChartModalStore } from '../chartModalStore';
+
+type ModalOpenProp = {
+  pplMngNo?: string; // 관로관리번호
+};
+
+type LineBarChartData = {
+  label: string;
+  lineVal0: number;
+  barVal0: number;
+};
+
+const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: '선택' }];
+
+const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
+  const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useRdiiChartModalStore();
+
+  const [aplcnYm, setAplcnYm] = useState('');
+  const [rdiiAnlss, setRdiiAnlss] = useState<TRdiiAnls[]>([]);
+  const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>(
+    INITIAL_ANALYSIS_OPTIONS,
+  );
+  const [rdiiAnls, setRdiiAnls] = useState<TRdiiAnls | null>(null); // 강우유입수분석정보
+  const [rainInfwtAnlsSn, setRainInfwtAnlsSn] = useState<number>(0);// 강우유입수분석 정보 선택시 사용
+  const [chartData, setChartData] = useState<LineBarChartData[]>([]);
+  const [rdiiQty, setRdiiQty] = useState<string>('0');        // 강우유입수량
+  const [rainTotal, setRainTotal] = useState<string>('0');    // 적용강우량
+  const [totalVolume, setTotalVolume] = useState<string>('0');// 총체적 m³/mm
+
+  const aplcnYms = fn.useAplcnYms('rdiiAnlsRslt'); // 상수사용월 데이터 가져오기
+  const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : '';
+
+  const chartForm = CHART_FORM.LINEBAR2;
+  const chartConfig = {
+    barVal0: {
+      label: '강수량',
+      color: '#33AAFF',
+    },
+    lineVal0: {
+      label: 'RDII',
+      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) {
+      resetState();
+    }
+  }, [isModalOpen]);
+
+  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;
+    }
+
+    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);
+    }
+  };
+
+  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>
+  );
+
+  const renderBody = () => (
+    <div className="text-black">
+      <div className="mb-4 flex items-start justify-between">
+        <div className="text-[18px] font-semibold text-[#111827]" />
+      </div>
+
+      <div className="grid 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="absolute inset-x-0 bottom-0 mb-[40px] flex justify-center">
+            <Button size="lg" onClick={fetchFilteredData}>
+              조회
+            </Button>
+            &nbsp;&nbsp;
+            <Button size="lg" color="gray" onClick={resetState}>
+              초기화
+            </Button>
+          </div>
+        </section>
+
+        <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
+            <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">
+                강우유입수분석 결과
+            </h3>
+
+            <div className="mb-6 flex gap-5">
+                {/* 좌측 카드 */}
+                <div className="flex min-h-[98px] min-w-0 basis-2/5 grow shrink-[1.4] items-center justify-between rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
+                  <div className="text-[16px] font-bold text-[#ef4444]">
+                      상수사용량 적용연월
+                  </div>
+                  <div className="text-[24px] font-extrabold leading-none text-[#111]">
+                      {aplcnYm ? moment(aplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
+                  </div>
+                </div>
+
+                {/* 우측 카드 */}
+                <div className="flex min-h-[98px] min-w-0 basis-3/5 grow shrink items-center gap-5 rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
+                    {/* 좌측: 제목 (세로 가운데 정렬) */}
+                    <div className="flex min-w-0 basis-[32%] items-center">
+                        <div className="text-[16px] font-bold text-[#ef4444] break-keep">
+                            강우유입수량 분석결과
+                        </div>
+                    </div>
+
+                    {/* 우측: 지표 영역 */}
+                    <div className="flex min-w-0 basis-[68%] flex-col gap-[2px]">
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0 basis-[48%] text-right text-[15px] text-[#555]">
+                                평균RDII
+                            </div>
+                            <div className="min-w-0 basis-[32%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                {rdiiQty}
+                            </div>
+                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
+                                m³/d
+                            </div>
+                        </div>
+
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0 basis-[48%] text-right text-[15px] text-[#555]">
+                                적용 강우량
+                            </div>
+                            <div className="min-w-0 basis-[32%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                {rainTotal}
+                            </div>
+                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
+                                mm
+                            </div>
+                        </div>
+
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0 basis-[48%] text-right text-[15px] text-[#555]">
+                                강우량 대비 RDII
+                            </div>
+                            <div className="min-w-0 basis-[32%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                {totalVolume}
+                            </div>
+                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
+                                m³/mm
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
+                {hasChartData ? (
+                <MainChart
+                    chartConfig={chartConfig}
+                    chartForm={chartForm}
+                    chartData={chartData}
+                    chartTitle={'RDII 그래프'}
+                    yFieldText2="강수량(mm)"
+                    yFieldText="유량(m³/h)"
+                />
+                ) : (
+                <div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
+                    데이터가 없습니다.
+                </div>
+                )}
+            </div>
+        </section>
+      </div>
+    </div>
+  );
+
+  return (
+    <UiModal
+      open={isModalOpen}
+      onOpenChange={setIsModalOpen}
+      headerTitle=""
+      bodyClass={`
+        w-[78vw]
+        max-w-none
+        min-w-[1100px]
+        min-h-[72vh]
+        overflow-visible
+        z-[50]
+      `}
+      body={renderBody()}
+      noFooterYn="Y"
+    />
+  );
+};
+
+export default React.memo(RdiiChart);
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chartModalStore.ts b/apps/sn/app/html/(map-layout)/map/components/popupComponent/chartModalStore.ts
similarity index 100%
rename from apps/sn/app/(map-layout)/map/components/popupComponent/chartModalStore.ts
rename to apps/sn/app/html/(map-layout)/map/components/popupComponent/chartModalStore.ts
diff --git a/apps/sn/app/html/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx b/apps/sn/app/html/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx
new file mode 100644
index 000000000..d507a4342
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx
@@ -0,0 +1,629 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창
+ * 
+ * 📄 FeatureClickEventPopup
+ * 시설물(피처) 클릭시 오른쪽 팝업창 컴포넌트
+ *
+ * - 지도 시설물(피처) 클릭 시 팝업 표시 및 데이터 로딩
+ * - 레이어 유형에 따른 동적 테이블 및 헤드리스트 설정
+ * - 자체입력정보 조회 및 저장 기능 (하수관로, 우수토실, 하수펌프장, 하수맨홀)
+ * - 코드 매핑 및 데이터 포맷팅 처리
+ * - 상류관로 검색, 침입수/RDII 분석 차트 표시
+ * - 모달을 통한 저장 확인 및 API 연동
+ * 
+ * 🔗 사용 API
+ * - 하수관로 자체입력정보 조회: GET /api/v1/fcltppl/{fcltMngNo}/{mngInstCd} (sewerage-service)
+ * - 우수토실 자체입력정보 조회: GET /api/v1/fcltstofcbr/{fcltMngNo}/{mngInstCd} (sewerage-service)
+ * - 하수펌프장 자체입력정보 조회: GET /api/v1/fcltpump/{fcltMngNo}/{mngInstCd} (sewerage-service)
+ * - 하수맨홀 자체입력정보 조회: GET /api/v1/fcltmhl/{fcltMngNo}/{mngInstCd} (sewerage-service)
+ * - 하수관로 자체입력정보 저장: POST /api/v1/fcltppl (sewerage-service)
+ * - 우수토실 자체입력정보 저장: POST /api/v1/fcltstofcbr (sewerage-service)
+ * - 하수펌프장 자체입력정보 저장: POST /api/v1/fcltpump (sewerage-service)
+ * - 하수맨홀 자체입력정보 저장: POST /api/v1/fcltmhl (sewerage-service)
+ */
+'use client'
+import { getData, postData } from "@/components/lib/api";
+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';
+import RdiiChart from './chart/rdiiChart';
+import { useInfilChartModalStore, useRdiiChartModalStore } from "./chartModalStore";
+import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
+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; };
+  const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
+  const [layerSpecificNm, setLayerSpecificNm] = useState<string>(""); // 레이어 이름 상태
+  const [tableData, setTableData] = useState<any>(null); // 피처 데이터
+  const [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
+  const [headlist2, setHeadlist2] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
+  const [buttonChk, setButtonChk] = useState(true)
+  const [fetchData, setFetchData] = useState<any>(); // api 호출여부
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isMainSsc, setIsMainSsc] = useState(false); // 중점우수토실 여부
+  const [isDrtwSewagePump, setIsDrtwSewagePump] = useState(false); // 오수펌프장 여부
+  // 🎯 InfilChart 및 RdiiChart 관련 상태 추가
+  const { setIsOpen: setIsModalInfil } = useInfilChartModalStore();
+  const { setIsOpen: setIsModalRdii } = useRdiiChartModalStore();
+  const [isClicked, setIsClicked] = useState(true); // 클릭 여부 상태
+  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 || "";
+
+  const featureId = typeof featureData.getId === 'function'
+    ? featureData.getId()
+    : featureData.fid;
+
+  // 🎯 데이터 전처리 메모이제이션
+  const processedData = useMemo(() => {
+    if (!featureData?.values_) return null;
+
+    return {
+      ...featureData.values_,
+      discharge_pipe_spec: `직경: ${featureData.values_.pipe_diameter || '-'} / 높이: ${featureData.values_.pipe_hg || '-'} / 길이: ${featureData.values_.pipe_lt || '-'}`
+    };
+  }, [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;
+    const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기
+    let featureLayer: any = null; // 피처가 속한 레이어를 찾기 위한 변수
+    layers.some((layer: any) => {
+      const source = layer.getSource();
+      // if (source && featureData && featureData.fid) {
+      //   featureLayer = layer; // 피처가 속한 레이어 찾기
+      // }
+      if (source && source.hasFeature && featureData
+        && typeof featureData.getId === 'function' && source.hasFeature(featureData)) {
+        featureLayer = layer; // 피처가 속한 레이어 찾기
+        return true; // 반복 종료
+      }
+      return false;
+    });
+
+    if (featureData['ol_uid']) {
+      // Gis 레이어 클릭 이벤트
+      setIsClicked(true);
+      const lyrTyNm = featureData.id_.split('.')[0];
+
+      switch (lyrTyNm) {
+        case 'tb_ms_swage_ppl': {
+          result = '하수관로';
+          setHeadlist(MsSwagePplCol);
+          setLayerSpecificNm(featureData.values_.fclt_mng_no);
+          break;
+        }
+        case 'tb_ms_swage_mhl': {
+          result = '하수맨홀';
+          setHeadlist(MsSwageMhlCol);
+          setLayerSpecificNm(featureData.values_.fclt_mng_no);
+          break;
+        }
+        case 'tb_ms_swage_pmstn': {
+          const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장');
+          if (drtwPumpCode && featureData.values_.usg_cd.trim() === drtwPumpCode.val) {
+            setIsDrtwSewagePump(true);
+            setHeadlist(DrtwSewagePumpCol);
+          }
+          else {
+            setIsDrtwSewagePump(false);
+            setHeadlist(ExclnSewagePumpCol);
+          }
+          setLayerSpecificNm(featureData.values_.fclt_mng_no);
+          result = '하수펌프장';
+          break;
+        }
+        case 'tb_il_swage_prcs_fclt': {
+          result = '하수처리시설';
+          setHeadlist(SwtrmtFcltCol);
+          setLayerSpecificNm(featureData.values_.swtrmt_fclt_cd);
+          break;
+        }
+        case 'tb_ms_swage_prcs_zone': {
+          result = '하수처리구역';
+          setHeadlist(SwtrmtPrcsZoneCol);
+          setLayerSpecificNm(featureData.values_.swtrmt_fclt_cd);
+          break;
+        }
+        case 'tb_ms_stofcbr': {
+          result = '우수토실';
+          setHeadlist(stofcbrCol);
+          setLayerSpecificNm(featureData.values_.fclt_mng_no);
+          break;
+        }
+        case 'om_dt_untrt_swg_rain': {
+          result = '중점우수토실';
+          setHeadlist(untrtSwgRainCol1);
+          setHeadlist2(untrtSwgRainCol2);
+          setLayerSpecificNm(featureData.values_.manage_no);
+          break;
+        }
+        default: {
+          result = featureLayer ? featureLayer.get('lyrNm') : null;
+          break;
+        }
+      }
+    }
+    else {
+      // SearchModal 클릭 이벤트
+      setIsClicked(false);
+      const lyrTyNm = featureData.lyrTypeNm;
+
+      switch (lyrTyNm) {
+        case 'tb_ms_swage_ppl': {
+          result = '하수관로';
+          setHeadlist(MsSwagePplCol2)
+          setLayerSpecificNm(featureData.swtrmtFcltCd);
+          break;
+        }
+        case 'tb_ms_swage_mhl': {
+          result = '하수맨홀';
+          setHeadlist(MsSwageMhlCol2)
+          setLayerSpecificNm(featureData.fcltMngNo);
+          break;
+        }
+        case 'tb_ms_swage_pmstn': {
+          const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장');
+          if (drtwPumpCode && featureData.usgCd.trim() === drtwPumpCode.val) {
+            setIsDrtwSewagePump(false);
+            setHeadlist(ExclnSewagePumpCol2)
+          }
+          else {
+            setIsDrtwSewagePump(true);
+            setHeadlist(DrtwSewagePumpCol2)
+          }
+          setLayerSpecificNm(featureData.fcltMngNo);
+          result = '하수펌프장';
+          break;
+        }
+        case 'tb_il_swage_prcs_fclt': {
+          result = '하수처리시설';
+          setHeadlist(SwtrmtFcltCol2)
+          setLayerSpecificNm(featureData.swtrmtFcltCd);
+          break;
+        }
+        case 'tb_ms_swage_prcs_zone': {
+          result = '하수처리구역';
+          setHeadlist(SwtrmtPrcsZoneCol2);
+          setLayerSpecificNm(featureData.swtrmtFcltCd);
+          break;
+        }
+        case 'tb_ms_stofcbr': {
+          result = '우수토실';
+          setHeadlist(stofcbrCol2)
+          setLayerSpecificNm(featureData.fcltMngNo);
+          break;
+        }
+      }
+    }
+
+    return result;
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!featureId) return;
+
+      try {
+        const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기
+        setLayerNm(selectedLayerName); // 상태 업데이트
+
+        let data;
+        if (featureData['ol_uid']) data = featureData.values_;  // Gis 레이어 클릭 이벤트일 때
+        else data = featureData;  // SearchModal 클릭 이벤트일 때
+
+        // 하수맨홀인 경우 용도코드를 텍스트로 변환
+        if (selectedLayerName === '하수맨홀' && data) {
+          // mqlt_cd 값 변환 (재질코드)
+          if (data.mqlt_cd) {
+            const materialCodeItem = MS_SWAGE_MHL_CODES.find(
+              code => code.val === data.mqlt_cd.trim()
+            );
+            if (materialCodeItem) data.mqlt_cd = `${materialCodeItem.text}`;
+          }
+        } else {
+          // 중점우수토실인 경우 구분 값
+          if (selectedLayerName === '중점우수토실' && data) {
+            if (data.mesure_spot_se) {
+              const mesureSpotSe = [{id:'0', text: '합류식'}, {id:'1', text: '분류식'}]
+              const mesureSpotSeItem = mesureSpotSe.find(
+                code => code.id === data.mesure_spot_se.trim()
+              );
+              if (mesureSpotSeItem) data.mesure_spot_se = mesureSpotSeItem.text;
+            }
+          }
+        }
+
+        // 🎯 기본 데이터 포맷팅
+        const formattedData = formatDisplayData(data);
+
+        setFetchData(formattedData);
+        setTableData(formattedData);
+
+        switch (selectedLayerName) {
+          case '하수관로':
+            setButtonChk(true)
+
+            // ✅ codeMapper 사용하여 API 결과도 변환
+            setTableData(codeMapper({
+              layerName: selectedLayerName,
+              data: { ...formattedData }
+            }));
+            break;
+          case '하수맨홀':
+            setButtonChk(true)
+
+            // ✅ codeMapper 사용하여 API 결과도 변환
+            setTableData(codeMapper({
+              layerName: selectedLayerName,
+              data: { ...formattedData }
+            }));
+            break;
+          case '하수펌프장':
+            setButtonChk(true)
+
+            setTableData(codeMapper({
+              layerName: selectedLayerName,
+              data: { ...formattedData }
+            }));
+            break;
+          case '하수처리시설':
+            setButtonChk(false)
+            break;
+          case '하수처리구역':
+            setButtonChk(false)
+            break;
+          case '우수토실':
+            setButtonChk(true)
+            setIsMainSsc(false)
+            break;
+          case '중점우수토실':
+            setButtonChk(false)
+            setIsMainSsc(true)
+            // 🎯 processedData도 포맷팅하여 설정
+            const processedFormattedData = formatDisplayData(processedData);
+
+            setFetchData([processedFormattedData])
+            setTableData(processedFormattedData);
+            // setIsLoading(false); // 기본 렌더링 완료
+
+            setTableData(codeMapper({
+              layerName: selectedLayerName,
+              data: { ...processedFormattedData }
+            }));
+
+            setChmbrXcnts(data.chmbr_xcnts);
+            setChmbrYdnts(data.chmbr_ydnts);
+
+            break;
+          default:
+            break;
+        }
+
+        // 자체입력정보 API 엔드포인트 선택
+        let apiEndpoint = '';
+        const fcltMngNo = featureData?.values_?.fclt_mng_no || null;
+        const mngInstCd = featureData?.values_?.mng_inst_cd || null;
+        if (selectedLayerName === '하수관로') apiEndpoint = `v1/fcltppl/${fcltMngNo}/${mngInstCd}`;
+        else if (selectedLayerName === '우수토실') apiEndpoint = `v1/fcltstofcbr/${fcltMngNo}/${mngInstCd}`;
+        else if (selectedLayerName === '하수펌프장') apiEndpoint = `v1/fcltpump/${fcltMngNo}/${mngInstCd}`;
+        else if (selectedLayerName === '하수맨홀') apiEndpoint = `v1/fcltmhl/${fcltMngNo}/${mngInstCd}`;
+
+        // API에서 상세 데이터 가져오기
+        if (apiEndpoint) {
+          try {
+            const result = await getData(apiEndpoint);
+
+            if (result) {
+              const processedApiData = codeMapper({
+                layerName: selectedLayerName,
+                data: { ...result, ...tableData }
+              });
+
+              setFetchData(processedApiData);
+            }
+          } catch (apiError) {
+            console.error('API 데이터 로딩 중 오류:', apiError);
+          }
+        }
+      } catch (error) {
+        console.error('데이터 로딩 중 오류:', error);
+      }
+    };
+
+    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]);
+
+  // Use the browser confirm dialog for lightweight save confirmation.
+  const handleSaveClick = () => {
+    const shouldSave = window.confirm('정보를 저장하시겠습니까?');
+    if (!shouldSave) return;
+    void btnClickEvent();
+  };
+
+  // 저장 버튼 이벤트
+  const btnClickEvent = async () => {
+    const bodyData: Record<string, any> = {}
+
+    if (buttonChk && contentRef.current) {
+      const inputElements = contentRef.current.querySelectorAll('input');
+      const selectElements = contentRef.current.querySelectorAll('select');
+
+      // 카멜케이스 변환 함수
+      const toCamelCase = (str: string) =>
+        str.replace(/_([a-z])/g, (_, char) => char.toUpperCase());
+
+      // select 태그의 값 가져오기
+      selectElements.forEach((select) => {
+        const camelCaseId = toCamelCase(select.id);
+        bodyData[camelCaseId] = select.value;
+      });
+
+      // // input 태그의 값 가져오기
+      inputElements.forEach((input) => {
+        const camelCaseId = toCamelCase(input.id);
+        bodyData[camelCaseId] = input.value;
+      });
+
+      // 레이어명에 따라 API 엔드포인트 분기처리
+      let apiEndpoint = '';
+      let result = null;
+
+      if (layerNm === '하수관로') apiEndpoint = 'v1/fcltppl';
+      else if (layerNm === '우수토실') apiEndpoint = 'v1/fcltstofcbr';
+      else if (layerNm === '하수펌프장') apiEndpoint = 'v1/fcltpump';
+      else if (layerNm === '하수맨홀') apiEndpoint = 'v1/fcltmhl';
+
+      bodyData['fcltMngNo'] = featureData.values_.fclt_mng_no.toString() || null;
+      bodyData['mngInstCd'] = featureData.values_.mng_inst_cd.toString() || null;
+      // 빈 키 제거
+      if (bodyData[""] !== undefined) delete bodyData[""];
+
+      // 🎯 우수토실일 경우 prrtymngYn 값 변환
+      if (layerNm === '우수토실' && bodyData.prrtymngYn) {
+        if (bodyData.prrtymngYn === '중점우수토실') {
+          bodyData.prrtymngYn = 'Y';
+        } else if (bodyData.prrtymngYn === '우수토실') {
+          bodyData.prrtymngYn = 'N';
+        }
+      }
+
+      try {
+        result = await postData(apiEndpoint, bodyData);
+
+        if (result) {
+          alert('저장되었습니다');
+          setFetchData(result.data || result);
+        } else {
+          alert('저장에 실패했습니다');
+          console.error('API 응답 오류:', result);
+        }
+      } catch (error) {
+        alert('저장 중 오류가 발생했습니다');
+        console.error('API 요청 오류:', error);
+      }
+    }
+  }
+
+  // 레이어명에 따라 상세페이지 렌더링
+  const ContentComponent = layerNm ? getLayerContentComponent(layerNm) : null;
+
+  return (
+    <div id="popup" className="absolute top-0 right-0 w-[350px] h-[calc(100vh-5rem)] bg-white border-r border-gray-300 flex flex-col overflow-hidden transition-all duration-300 z-[50]">
+      <LoadingOverlay isLoading={isLoading} />
+      <div className="card-header bg-primary flex items-center justify-between relative p-4">
+        <div className="flex items-center space-x-4 flex-1">
+          <h3 className="text-2xl font-medium text-white text-label whitespace-nowrap">{layerNm}
+            {tableData?.usg_cd && (
+              <>
+                ({tableData.usg_cd})
+              </>
+            )} 정보 <br />관리번호 : {layerSpecificNm}
+          </h3>
+        </div>
+        <div className="flex items-center space-x-3">
+          {/* 하수관로일 때만 Infil/RDII 버튼 표시 */}
+          {layerNm === '하수관로' && (
+            <>
+              <Button onClick={() => setIsModalInfil(true)}
+                className="py-1 text-xl text-blue-600 border border-blue-600 rounded hover:bg-gray-700"
+                color="white"
+                size="sm"
+              >
+                침입수분석
+              </Button>
+              <Button onClick={() => setIsModalRdii(true)}
+                className="py-1 text-xl text-gray-600 border border-gray-600 rounded hover:bg-gray-700 mr-4"
+                color="white"
+                size="sm"
+              >
+                RDII분석
+              </Button>
+            </>
+          )}
+          {layerNm === '하수맨홀' && (
+            <>
+              <Button
+                color="white"
+                className="px-2 py-1 text-xl text-gray-600 border border-gray-600 rounded hover:bg-gray-700 mr-4"
+                onClick={() => {
+                  setIsLoading(true);
+                  searchUpperPpls(gisMap, layerSpecificNm).finally(() => setIsLoading(false));
+                }}
+              >
+                상류관로 보기
+              </Button>
+            </>
+          )}
+        </div>
+        <Button
+          onClick={onClose}
+          className="flex items-center space-x-4 text-white hover:text-gray-300 focus:outline-none"
+          size="xs"
+        >
+          ✕
+        </Button>
+      </div>
+      <div className="overflow-y-auto overflow-x-hidden flex-1" ref={contentRef}>
+        <VerticalTable
+          headName='기본정보'
+          tableName1={layerNm === '중점우수토실' ? "측정지점" : undefined}
+          tableData={[tableData]}
+          headlist={headlist}
+          pageSize={20}
+          total={0}
+          cellClick={undefined}
+          onPageChange={function (): void {
+            throw new Error("Function not implemented.");
+          }}
+          // 두 번째 테이블 조건부 props
+          showSecondTable={layerNm === '중점우수토실' ? true : false}
+          tableName2={layerNm === '중점우수토실' ? "시설현황" : undefined}
+          tableData2={layerNm === '중점우수토실' && tableData ? [tableData] : []}
+          headlist2={layerNm === '중점우수토실' ? headlist2 : undefined}
+          pageSize2={20}
+          total2={0}
+          isEditable2={buttonChk}
+        />
+        {ContentComponent &&
+          <ContentComponent
+            featureData={fetchData}
+            isMainSsc={isMainSsc}
+            isDrtwSewagePump={isDrtwSewagePump}
+            onSaveClick={handleSaveClick}
+            chmbrXcnts={chmbrXcnts}
+            chmbrYdnts={chmbrYdnts}
+            gisObject={featureData.values_}
+          />
+        }
+      </div>
+
+      <InfilChart pplMngNo={pplMngNo} />
+      <RdiiChart pplMngNo={pplMngNo} />
+    </div>
+  )
+}
+export default FeatureClickEventPopup;
diff --git a/apps/sn/app/html/(map-layout)/map/components/popupComponent/sewagePump.tsx b/apps/sn/app/html/(map-layout)/map/components/popupComponent/sewagePump.tsx
new file mode 100644
index 000000000..07d78a7d1
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/popupComponent/sewagePump.tsx
@@ -0,0 +1,69 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (하수펌프장)
+ * 
+ * 📄 sewagePump
+ * 하수펌프장 정보 컴포넌트
+ *
+ * - 빗물펌프장 및 오수펌프장 구분에 따른 자체 입력 정보 표시 및 편집 기능
+ * - VerticalTable을 통한 입력 폼 렌더링
+ * - 저장 버튼을 통한 데이터 저장 기능
+ */
+import { VerticalTable } from '@/components/ui/verticalTable';
+import React, { useState, useEffect } from 'react'
+// 빗물펌프장 자체 입력 정보
+const exclnInputColumn = [
+  { id: "swtrmtZoneNm", title: "배수구역", type: "input" },
+  { id: "mltvDtdvNm", title: "배수분구", type: "input" },
+  { id: "designFrqYr", title: "설계빈도(년)", type: "input", placeholder: "예: 10", isNumber: true, length: 4 },
+]
+// 오수펌프장 자체 입력 정보
+const drtwInputColumn = [
+  { id: "swtrmtZoneNm", title: "처리구역", type: "input" },
+  { id: "mltvDtdvNm", title: "처리분구", type: "input" },
+]
+
+
+const sewagePump = ({ featureData, isDrtwSewagePump, onSaveClick }: { featureData: any, isDrtwSewagePump?: boolean, onSaveClick?: () => void }) => {
+  const [formData, setFormData] = useState<any>({});
+
+  // featureData가 변경될 때 formData 초기화
+  useEffect(() => {
+    if (featureData) {
+      setFormData(featureData);
+    }
+  }, [featureData]);
+
+  // 폼 데이터가 변경될 때 호출될 핸들러
+  const handleFormDataChange = (newFormData: any) => {
+    setFormData(newFormData);
+  };
+
+  // 저장 버튼 클릭 시 최신 formData를 부모에게 전달
+  const handleSaveClick = () => {
+    if (onSaveClick) {
+      // 저장 전에 formData를 부모 컴포넌트의 handleSaveClick에 전달
+      onSaveClick();
+    }
+  };
+
+  return (
+    <VerticalTable
+      headName='입력정보'
+      tableData={featureData ? [formData] : []}
+      headlist={isDrtwSewagePump ? drtwInputColumn : exclnInputColumn}
+      pageSize={0}
+      total={0}
+      children={undefined}
+      cellClick={undefined}
+      isEditable={true}
+      onPageChange={function (page: number): void {
+        throw new Error('Function not implemented.');
+      }}
+      showSaveButton={true}
+      onSaveClick={handleSaveClick}
+      onFormDataChange={handleFormDataChange} // 폼 데이터 변경 콜백 추가
+    />
+  )
+}
+
+export default sewagePump
diff --git a/apps/sn/app/html/(map-layout)/map/components/popupComponent/smh.tsx b/apps/sn/app/html/(map-layout)/map/components/popupComponent/smh.tsx
new file mode 100644
index 000000000..cd59003ef
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/popupComponent/smh.tsx
@@ -0,0 +1,126 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (하수맨홀)
+ * 
+ * 📄 Smh
+ * 하수맨홀 정보 컴포넌트
+ *
+ * - 하수맨홀의 자체입력정보 표시 및 편집 기능
+ * - VerticalTable을 통한 입력 폼 렌더링
+ * - 상류관로 검색 및 지도 포커스 기능
+ * - 저장 버튼을 통한 데이터 저장 기능
+ * 
+ * 🔗 사용 API
+ * - 상류관로 조회: GET /api/v1/fcltmhl/upperPpls/{fcltMngNo} (sewerage-service)
+ */
+import { VerticalTable } from '@/components/ui/verticalTable';
+import { useEffect, useState } from 'react';
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import { getData } from '@/components/lib/api';
+
+// 상류관로 보기 함수 (FeatureClickEventPopup에서 사용)
+export async function searchUpperPpls(gisMap: any, fcltMngNo: any) {
+  let data: any = null;
+  try {
+    data = await getData(`v1/fcltmhl/upperPpls/${fcltMngNo}`);
+  } catch (error) {
+    console.error("JSON parsing error:", error);
+    alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
+    return;
+  }
+
+  if (!data) {
+    alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
+    return;
+  }
+
+  const select: any = GisApp.Module.select;
+  let foundFeature: any = null;
+
+  (data || []).forEach((item: any) => {
+    const pplMngNo = item.ppl_mng_no?.trim?.();
+
+    gisMap
+      .getLayers()
+      .getArray()
+      .filter((e: any) => e.get("lyrTyNm") == "tb_ms_swage_ppl")
+      .forEach((layer: any) => {
+        const source = layer.getSource?.();
+        if (source?.getFeatures) {
+          const features = source.getFeatures();
+          for (const f of features) {
+            if (f.values_.fclt_mng_no?.trim?.() === pplMngNo) {
+              foundFeature = f;
+              break;
+            }
+          }
+        }
+      });
+
+    if (foundFeature) select?.selectMultiFeature?.(foundFeature, true);
+  });
+
+  if (!foundFeature) alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
+
+  const geometry = foundFeature?.getGeometry();
+  if (geometry) {
+    const extent = geometry.getExtent();
+    gisMap.getView().fit(extent, {
+      duration: 300,
+      padding: [50, 50, 50, 50],
+      maxZoom: 14,
+      constrainResolution: true,
+      nearest: true,
+    });
+  }
+}
+
+const inputColumn = [
+  { id: "swtrmtZoneNm", title: "처리구역", type: "input" },
+  { id: "mltvZoneNm", title: "배수구역", type: "input" },
+  { id: "mltvDtdvNm", title: "배수분구", type: "input" },
+  { id: "layCd", title: "매설위치", type: "select", options: ["도로", "하상"] },
+];
+const Smh = ({ featureData, onSaveClick }: { featureData: any, onSaveClick?: () => void }) => {
+  const [formData, setFormData] = useState<any>({});
+
+  // featureData가 변경될 때 formData 초기화
+  useEffect(() => {
+    if (featureData) {
+      setFormData(featureData);
+    }
+  }, [featureData]);
+
+  // 폼 데이터가 변경될 때 호출될 핸들러
+  const handleFormDataChange = (newFormData: any) => {
+    setFormData(newFormData);
+  };
+
+  // 저장 버튼 클릭 시 최신 formData를 부모에게 전달
+  const handleSaveClick = () => {
+    if (onSaveClick) {
+      // 저장 전에 formData를 부모 컴포넌트의 handleSaveClick에 전달
+      onSaveClick();
+    }
+  };
+
+  return (
+    <VerticalTable
+      headName='입력정보'
+      tableData={featureData ? [formData] : []}
+      headlist={inputColumn}
+      pageSize={20}
+      total={0}
+      children={undefined}
+      cellClick={undefined}
+      isEditable={true}
+      onPageChange={function (page: number): void {
+        throw new Error("Function not implemented.");
+      }}
+      showSaveButton={true}
+      onSaveClick={handleSaveClick}
+      onFormDataChange={handleFormDataChange} // 폼 데이터 변경 콜백 추가
+    />
+  )
+}
+
+export default Smh;
diff --git a/apps/sn/app/html/(map-layout)/map/components/popupComponent/stormWaterPump.tsx b/apps/sn/app/html/(map-layout)/map/components/popupComponent/stormWaterPump.tsx
new file mode 100644
index 000000000..92973b133
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/components/popupComponent/stormWaterPump.tsx
@@ -0,0 +1,37 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (빗물펌프)
+ * 
+ * 📄 StormWaterPump
+ * 빗물펌프 정보 컴포넌트
+ *
+ * - 빗물펌프의 자체입력정보 표시 및 편집 기능
+ * - VerticalTable을 통한 입력 폼 렌더링
+ */
+import { VerticalTable } from '@/components/ui/verticalTable';
+import React from 'react'
+const inputColumn = [
+  { id: "swtrmtZoneNm", title: "처리구역", type: "input" },
+  { id: "mltvDtdvNm", title: "배수분구", type: "input" },
+]
+// 빗물펌프
+const StormWaterPump = ({ featureData }: { featureData: Record<string, any> }) => {
+  const validKey = inputColumn.map((item) => item.id);
+  const filteredData = featureData && Object.entries(featureData).filter(([key]) => validKey.includes(key)).reduce((obj: Record<string, any>, [key, value]) => { obj[key] = value; return obj; }, {});
+  return (
+    <VerticalTable
+      headName='입력정보'
+      tableData={[filteredData]}
+      headlist={inputColumn}
+      pageSize={0}
+      total={0}
+      children={undefined}
+      cellClick={undefined}
+      isEditable={true}
+      onPageChange={function (page: number): void {
+        throw new Error('Function not implemented.');
+      }}
+    />
+  )
+}
+
+export default StormWaterPump
\ No newline at end of file
diff --git a/apps/sn/app/html/(map-layout)/map/page.tsx b/apps/sn/app/html/(map-layout)/map/page.tsx
new file mode 100644
index 000000000..cae8c372b
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/page.tsx
@@ -0,0 +1,169 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지
+ * 
+ * 📄 Map Page
+ * 지도 페이지 컴포넌트
+ *
+ * - OpenLayers 기반 GIS 지도 렌더링 및 상호작용
+ * - 레이어 트리 데이터 관리 및 동적 레이어 표시/숨김
+ * - 피처 검색 및 선택 기능 (SearchModal, ProcSearchBar)
+ * - 피처 클릭 이벤트 처리 및 상세 정보 팝업 표시
+ * - 수심(WaterDepth) 레이어 애니메이션 재생 기능
+ * - Zustand를 통한 검색 모달 상태 관리
+ * 
+ * 🔗 사용 API
+ * - 레이어 설정 조회: GET /api/v1/map/lyrStngs/{lyrGrp} (sewerage-service)
+ */
+
+"use client";
+
+import Gis from "@common/business_components/ui/map/Gis";
+import { getRawJson } from "../../../components/lib/api";
+import { useCallback, useEffect, useRef, useState } from "react";
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import SearchModal from "./searchModal/searchModal";
+import FeatureClickEventPopup from "./components/popupComponent/featureClickEventPopup";
+import { WaterDepth, WATER_DEPTH_LAYER_TYPES } from "./waterDepth/waterDepth";
+import { ProcSearchBar } from "@common/business_components/ui/map/searchBar";
+import useSearchModalStore from "@/store/useSearchModalStore";
+
+const Map = () => {
+  const { isSearchModalOpen, setIsSearchModalOpen } = useSearchModalStore();
+
+  const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
+  const gisMaps = useRef<any | null>(null);
+  const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
+  const [featureData, setFeatureData] = useState(null); // 선택된 피쳐 데이터
+  const [showWaterDepth, setShowWaterDepth] = useState(false); // WaterDepth 표시 여부
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      const data = await getRawJson("/sewerage-service/api/v1/map/lyrStngs/SN_NETWORK");
+      setTreeData(data);
+    } catch (error) {
+      console.error('JSON parsing error:', error);
+      // JSON 파싱에 실패한 경우, 원본 텍스트 또는 null 반환
+      throw new Error('Invalid JSON response from server');
+    }
+  };
+
+  // SearchModal, GisContent 등에서 호출
+  const onFeatureSelect = (data: any) => {
+    let map = gisMaps.current;
+    if (!map) {
+      console.warn("지도가 초기화되지 않았습니다.");
+      return;
+    }
+
+    // 항상 같은 select 객체 사용
+    const select = GisApp.Module.select as any;
+    if (!select) return;
+
+    // 1. 기존 선택 초기화
+    select.resetSelectedFeature();
+
+    // 2. data가 OpenLayers Feature 인스턴스인지 확인
+    let foundFeature = null;
+    if (
+      data &&
+      typeof data.getGeometry === "function" &&
+      typeof data.setStyle === "function"
+    ) {
+      // 이미 Feature 인스턴스라면 그대로 사용
+      foundFeature = data;
+    } else {
+      // 아니면 featureId로 맵에서 Feature 인스턴스를 찾아서 사용
+      const featureId = data.fid || data.ftrIdn || data.id;
+      map
+        .getLayers()
+        .getArray()
+        .forEach((layer: any) => {
+          const source = layer.getSource?.();
+          if (source?.getFeatureById) {
+            const feature = source.getFeatureById(String(featureId).trim());
+            if (feature) foundFeature = feature;
+          }
+        });
+    }
+
+    // 3. 피처 선택
+    if (foundFeature) {
+      let geometry = foundFeature.getGeometry();
+      if (geometry) {
+        let extent = geometry.getExtent();
+
+        map.getView().fit(extent, {
+          duration: 300,
+          padding: [50, 50, 50, 50],
+          maxZoom: 16,
+          constrainResolution: true,
+          nearest: true,
+        });
+      }
+      select.selectFeature(foundFeature, true);
+    } else {
+      console.warn("OpenLayers Feature를 찾을 수 없습니다:", data);
+    }
+
+    setFeatureData(data);
+    setIsOpen(true);
+    setIsSearchModalOpen(false);
+  };
+
+  const facilityTypes = [{ text: "하수처리시설", val: "tb_il_swage_prcs_fclt" }];
+  // WaterDepth 표시 여부를 결정하는 함수
+  const handleWaterDepthVisibility = useCallback((checkedIds: string[], checkedNodesData: any[]) => {
+    const waterDepthLayers = checkedNodesData.filter(node =>
+      WATER_DEPTH_LAYER_TYPES.includes(node.data?.lyrTyNm)
+    );
+
+    const hasWaterDepthLayer = waterDepthLayers.length > 0;
+    setShowWaterDepth(hasWaterDepthLayer);
+  }, []);
+
+  // 체크된 레이어 변경 처리 함수
+  const handleCheckedLayersChange = useCallback((checkedIds: string[], checkedNodesData: any[]) => {
+    handleWaterDepthVisibility(checkedIds, checkedNodesData);
+  }, [handleWaterDepthVisibility]);
+
+
+  return (
+    <>
+      <div className="bg-container">
+        <Gis
+          treeData={treeData}
+          isSearch={true}
+          gisMaps={gisMaps}
+          isMiniMap={false}
+          searchView={SearchModal}
+          detailView={FeatureClickEventPopup}
+          onFeatureSelect={onFeatureSelect}
+          featureData={featureData}
+          setFeatureData={setFeatureData}
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          isSearchModalOpen={isSearchModalOpen}
+          setIsSearchModalOpen={setIsSearchModalOpen}
+          onCheckedLayersChange={handleCheckedLayersChange}
+          searchBar={<ProcSearchBar gisMaps={gisMaps} facilityTypes={facilityTypes} />}
+          waterDepth={showWaterDepth ? WaterDepth : undefined}
+          isPlaying={isPlaying}
+          setIsPlaying={setIsPlaying as any}
+          targetLayerTypes={WATER_DEPTH_LAYER_TYPES as any}
+          checkInterval={2500}
+          showZoomLevel={true}
+
+          defaultZoom={7.5}
+          defaultLonLat={[127.75, 36]}
+        />
+      </div>
+    </>
+  );
+};
+
+export default Map;
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/basicTab.tsx b/apps/sn/app/html/(map-layout)/map/searchModal/basicTab.tsx
new file mode 100644
index 000000000..c21dc8ca4
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/basicTab.tsx
@@ -0,0 +1,66 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭
+ * 
+ * 📄 BasicTab Component
+ * Next.js App Router (app/) 기반 검색 모달의 기본정보 탭 컴포넌트
+ *
+ * - 기본정보 검색을 위한 구분 선택 및 조건 입력 UI 제공
+ * - 하수관로, 하수처리시설, 하수처리구역, 하수맨홀, 하수펌프장, 우수토실 등 다양한 유형별 컴포넌트 렌더링
+ * - useSearchModalStore를 통해 상태 관리 및 사용자 상호작용 처리
+ */
+import React from 'react';
+import { SelectBox } from '@common/business_components/ui';
+import { Label } from '@common/components';
+import SwagePpl from './swagePpl';
+import SwagePrcsFclt from './swagePrcsFclt';
+import SwagePrcsZone from './swagePrcsZone';
+import SwageMhl from './swageMhl';
+import SwagePmstn from './swagePmstn';
+import Stofcbr from './stofcbr';
+import useSearchModalStore from '@/store/useSearchModalStore';
+
+
+// 기본정보 '구분' 선택 목록
+export const BASIC_TYPES = [
+  { val: "tb_ms_swage_ppl", text: "하수관로" },
+  { val: "tb_il_swage_prcs_fclt", text: "하수처리시설" },
+  { val: "tb_ms_swage_prcs_zone", text: "하수처리구역" },
+  { val: "tb_ms_swage_mhl", text: "하수맨홀" },
+  { val: "tb_ms_swage_pmstn", text: "하수펌프장" },
+  { val: "tb_ms_stofcbr", text: "우수토실" },
+];
+
+const BasicTab: React.FC = () => {
+  const { basicType, setBasicType } = useSearchModalStore();
+
+  return (
+    <div className="relative border rounded-lg pt-5 px-5 w-full min-h-[10vh]">
+      {/* 구분 */}
+      <div className="mb-3 flex items-center justify-between gap-4">
+        <div className="flex items-center">
+          <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구분</Label>
+          <SelectBox
+            className="w-[150px] mr-3"
+            selectClass="rounded-lg bg-white"
+            label=""
+            selectArray={BASIC_TYPES}
+            onSelectValue={(value: string | number) =>
+              setBasicType(String(value))
+            }
+            value={basicType}
+            selectContentClass="z-[101]"
+          />
+        </div>
+      </div>
+      {/* 조회 조건 */}
+      {basicType === "tb_ms_swage_ppl" && (<SwagePpl />)}  {/* 하수관로 */}
+      {basicType === "tb_il_swage_prcs_fclt" && (<SwagePrcsFclt />)} {/* 하수처리시설 */}
+      {basicType === "tb_ms_swage_prcs_zone" && (<SwagePrcsZone />)} {/* 하수처리구역 */}
+      {basicType === "tb_ms_swage_mhl" && (<SwageMhl />)}  {/* 하수맨홀 */}
+      {basicType === "tb_ms_swage_pmstn" && (<SwagePmstn />)}  {/* 하수펌프장 */}
+      {basicType === "tb_ms_stofcbr" && (<Stofcbr />)} {/* 우수토실 */}
+    </div>
+  );
+};
+
+export default React.memo(BasicTab);
\ No newline at end of file
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/operationTab.tsx b/apps/sn/app/html/(map-layout)/map/searchModal/operationTab.tsx
new file mode 100644
index 000000000..63c18875d
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/operationTab.tsx
@@ -0,0 +1,98 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 유지관리 정보 탭
+ * 
+ * 📄 Operation Tab
+ * Next.js App Router (app/) 기반 검색 모달 유지관리 정보 탭 컴포넌트
+ *
+ * - 업무구분 선택 (보수 및 갱신, 점검 및 진단, 청소 및 준설)
+ * - 사업명 입력 및 수행기간 범위 선택
+ * - 사업 유형 필터링 기능
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
+import React from 'react';
+import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { SelectBox } from '@common/business_components/ui';
+import { Button, Input, Label } from '@common/components';
+import useStore from '@/store/useStore';
+import useSearchModalStore from '@/store/useSearchModalStore';
+import useSearchModal from './useSearchModal';
+import useOperationTab from './useOperationTab';
+
+
+const OperationTab: React.FC = () => {
+  const { BIZ_TY_CD } = useStore();
+  const {
+    workType, setWorkType,
+    var1, setVar1, var2, setVar2,
+    yearFilter, setYearFilter,
+  } = useSearchModalStore();
+  const { handleSearch } = useSearchModal();
+  const { WORK_TYPES } = useOperationTab();
+
+  const BIZ_TY_CD_SELECT_ARRAY = BIZ_TY_CD.map(item => ({
+    val: item.lwpoCd,
+    text: item.lwpoCdNm,
+  }));
+
+  return (
+    <div className="relative flex flex-col border rounded-lg pt-5 px-5 w-full min-h-[10vh]">
+      <div className="flex items-center mb-3">
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">업무구분</Label>
+        <SelectBox
+          className="w-40 mr-8"
+          selectClass="rounded-lg bg-white text-xl"
+          label=""
+          selectArray={WORK_TYPES.map((w) => ({
+            val: w.val,
+            text: w.text,
+          }))}
+          onSelectValue={(val) => setWorkType(String(val))}
+          value={workType}
+          selectContentClass="z-[101]"
+        />
+      </div>
+      <div className="flex items-center mb-6">
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">사업명</Label>
+        <Input
+          className="w-[100px] !text-xl placeholder:text-center mr-8"
+          placeholder="입력"
+          value={var1}
+          onChange={(e) => { setVar1(e.target.value); }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        <YearRangeSelectBox
+          start={yearFilter.start}
+          end={yearFilter.end}
+          onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
+          startLabel="수행기간"
+          endLabel=""
+        />
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">사업 유형</Label>
+        <SelectBox
+          className="w-60 mr-8"
+          selectClass="rounded-lg bg-white text-xl"
+          label=""
+          selectArray={[{ val: "0", text: "전체" }, ...BIZ_TY_CD_SELECT_ARRAY]}
+          value={var2}
+          onSelectValue={(val) => {
+            setVar2(String(val));
+          }}
+          selectContentClass="z-[101]"
+        />
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  )
+};
+
+export default React.memo(OperationTab);
\ No newline at end of file
diff --git a/apps/sn/app/(map-layout)/map/searchModal/reportFilesModal.tsx b/apps/sn/app/html/(map-layout)/map/searchModal/reportFilesModal.tsx
similarity index 100%
rename from apps/sn/app/(map-layout)/map/searchModal/reportFilesModal.tsx
rename to apps/sn/app/html/(map-layout)/map/searchModal/reportFilesModal.tsx
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/reportTab.tsx b/apps/sn/app/html/(map-layout)/map/searchModal/reportTab.tsx
new file mode 100644
index 000000000..ad57c0a5f
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/reportTab.tsx
@@ -0,0 +1,272 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 하수도정비기본계획보고서 탭
+ * 
+ * 📄 Report Tab
+ * Next.js App Router (app/) 기반 검색 모달 보고서 탭 컴포넌트
+ *
+ * - 하수도정비 기본계획 보고서 목록 표시 및 필터링
+ * - 시도/시군구/보고서 구분/승인년도 기반 검색 기능
+ * - 테이블 데이터 표시 및 페이지네이션 지원
+ * - 보고서 클릭 시 파일 목록 모달 열기
+ * - Zustand를 통한 모달 상태 및 데이터 관리
+ * - 로딩 오버레이 및 선택 초기화 기능
+ */
+'use client';
+import React, { useEffect, useState } from 'react';
+import { Button, Label } from '@common/components';
+import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { SelectBox, UiTable } from '@common/business_components/ui';
+import LoadingOverlay from '@/components/ui/LoadingBar';
+import useReportTab from './useReportTab';
+import useStore from '@/store/useStore';
+import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
+import useSearchModalStore from '@/store/useSearchModalStore';
+import { useReportTabStore } from '@/store/useReportTabStore';
+import ReportFilesModal from './reportFilesModal'; // 파일목록모달
+
+
+// 하수도정비 기본계획 보고서
+export const reportTableHeadlist = [
+  { id: "no", title: "NO" },
+  { id: "sido", title: "시도" },
+  { id: "sigungu", title: "시군구" },
+  { id: "approvalYear", title: "승인년도" },
+  { id: "plantZoneGubun", title: "구분" },
+  { id: "reportGubun", title: "보고서구분" },
+  { id: "fileName", title: "파일명" },
+  { id: "regDate", title: "등록일자" },
+];
+interface ReportTabProps {
+  open?: boolean;
+  isSearch?: boolean;
+  ctpvNm?: string;
+  sggNm?: string;
+}
+
+const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sggNm }) => {
+
+  // const [isLoading, setIsLoading] = useState(false);
+  const [isResetPage, setIsResetPage] = useState<boolean>(false);
+  const [isResetSelection, setIsResetSelection] = useState<boolean>(false);
+  const [showTable, setShowTable] = useState(false);
+  // const [tableData, setTableData] = useState<any[]>([]);
+  // const [tableCount, setTableCount] = useState(0);
+  // const [curPage, setCurPage] = useState(1);
+  // const [yearFilter, setYearFilter] = useState({ start: "", end: "" });
+  const [ctpvCd, setCtpvCd] = useState('0');
+  const [sggCd, setSggCd] = useState('0');
+  const [reportGubun, setReportGubun] = useState("0");
+  const [clsfSystmSn, setClsfSystmSn] = useState(''); // 자료관 기본계획 일련번호
+
+  const {
+    tableData,
+    tableCount,
+    isLoading,
+    yearFilter,
+    curPage,
+    setTableData,
+    setTableCount,
+    setIsLoading,
+    setYearFilter,
+    setCurPage
+  } = useSearchModalStore();
+  const { ctpv, sgg } = useStore();
+  const {
+    isOpen: isReportFilesModalOpen,
+    setIsOpen: setIsReportFilesModalOpen,
+    dcTree: reportOriginData,
+    fetchDcTree
+  } = useReportTabStore(); // 모달 상태 관리 스토어
+  const { REPORT_TYPES, flattenFolders, addFileName } = useReportTab();
+
+  useEffect(() => {
+    fetchDcTree("기본계획"); // 하수정비기본계획 report 
+  }, []);
+
+  useEffect(() => {
+    // filterParams 초기화
+    setCtpvCd('0');
+    setSggCd('0');
+    setReportGubun('0');
+    setYearFilter({ start: "", end: "" });
+    setShowTable(false);
+    setTableData([]);
+    setTableCount(0);
+    setCurPage(1); // 페이지를 1로 초기화
+    setIsResetPage(true); // 페이지를 초기화
+    setIsResetSelection(true); // 선택 초기화
+  }, [open]);
+
+  useEffect(() => {
+    const newCtpvCd = ctpv.find((n) => n.text === ctpvNm)?.val || '0';
+    const newSggCd = sgg.find((n) => n.text === sggNm)?.val || '0';
+
+    setCtpvCd(newCtpvCd);
+    setSggCd(newSggCd);
+  }, [ctpvNm, sggNm]);
+
+  // ctpvCd, sggCd가 업데이트된 후에 fetchFilteredData 실행
+  useEffect(() => {
+    if (!isSearch && ctpvCd && sggCd) {
+      fetchFilteredData();
+    }
+  }, [reportOriginData, ctpvCd, sggCd, isSearch]);
+
+  // 페이지 변경 시마다 데이터 fetch
+  useEffect(() => {
+    // showTable이 true일 때만 fetch (최초 렌더 방지)
+    setIsResetPage(false);
+
+    if (showTable) fetchFilteredData();
+  }, [curPage]);
+
+  const handleCtpvCdChange = (sidoId: string) => {
+    setCtpvCd(sidoId);
+    setSggCd('0');
+  }
+
+  // 조회 버튼 클릭 시 1페이지로 이동 및 데이터 초기화
+  const handleSearch = () => {
+    setCurPage(1); // 페이지를 1로 초기화
+    fetchFilteredData();
+    setIsResetPage(true); // 페이지를 초기화
+    setIsResetSelection(false); // 선택 초기화
+    setShowTable(true);
+  };
+
+  // 하수도정비기본계획 테이블 cellClick 핸들러
+  const handleReportCellClick = (index: number | undefined) => {
+    if (typeof index === "number" && tableData[index]) {
+      const reportData = tableData[index];
+      if (reportData.fileSn !== "") {
+        setClsfSystmSn(reportData.clsfSystmSn); // 자료관 기본계획 일련번호 설정
+        setIsReportFilesModalOpen(true); // 모달 열기
+      }
+    }
+  };
+
+  // 검색 API 호출 함수
+  const fetchFilteredData = async () => {
+    setIsLoading(true); // 로딩 시작
+    setIsResetSelection(true); // 선택 초기화
+
+    try {
+      const reportData = flattenFolders(reportOriginData);
+      let filterReportData = reportData;
+
+      if (ctpvCd !== '0') { // 시도검색
+        const sidoOption = ctpv.find((n) => n.val.trim() === ctpvCd.trim());
+        filterReportData = filterReportData.filter(item => item.sido === sidoOption?.text);
+      }
+      if (sggCd !== '0') { // 시군구검색
+        const sigunguOption = sgg.find((n) => String(n.val) === String(sggCd));
+        filterReportData = filterReportData.filter(item => item.sigungu === sigunguOption?.text);
+      }
+      if (reportGubun !== "0") { // 보고서구분검색
+        const reportGubunOption = REPORT_TYPES.find((n) => n.val === reportGubun);
+        filterReportData = filterReportData.filter(item => item.reportGubun === reportGubunOption?.text);
+      }
+
+      const { start, end } = yearFilter;
+      if (start && !end) //승인년도검색
+        filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear >= yearFilter.start + "년" : null);
+      else if (!start && end)
+        filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear <= yearFilter.end + "년" : null);
+      else if (start && end) {
+        filterReportData = filterReportData.filter(item => {
+          return (item.approvalYear) ? item.approvalYear >= yearFilter.start + "년" && item.approvalYear <= yearFilter.end + "년" : null;
+        });
+      }
+      // if (gubun !== "") { // 구분검색 (추후 사용할 수도 있을 것 같아 남겨둠)
+      //   filterReportData = filterReportData.filter(item => (item.plantZoneGubun) ? String(item.plantZoneGubun).includes(String(gubun)) : null);
+      // }
+
+      setTableCount(filterReportData.length || 0);
+
+      filterReportData = filterReportData.slice((curPage - 1) * 10, curPage * 10); // paging
+      filterReportData = filterReportData?.map((item, index) => ({ ...item, no: (curPage - 1) * 10 + index + 1 }));
+
+      addFileName(filterReportData).then(data => {
+        filterReportData = data;
+        setTableData(filterReportData || []);
+        setIsResetSelection(false); // 데이터 설정 후 선택 초기화 해제
+      });
+
+      setTableData(filterReportData || []);
+      setShowTable(true);
+    } catch (err) {
+      console.error('API ERROR:', err);
+      setTableData([]);
+      setIsResetSelection(false); // 에러 시에도 선택 초기화 해제
+    } finally {
+      setIsLoading(false); // 로딩 종료
+    }
+  };
+
+
+  return (
+    <>
+      <div className={`relative flex flex-col border rounded-lg pt-5 px-5 w-full ${isSearch ? "min-h-[10vh]" : "min-h-[6vh]"}`}>
+        {isSearch && (
+          <>
+            <div className="flex items-center mb-3">
+              <CtpvSggPrcsFcltSelectBox
+                sido={ctpvCd}
+                sigungu={sggCd}
+                onSidoChange={(sidoId: string) => { handleCtpvCdChange(sidoId) }}
+                onSigunguChange={setSggCd}
+                setIsLoading={setIsLoading}
+              />
+            </div>
+          </>
+        )}
+        <div className="flex items-center mb-6">
+          <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">보고서 구분</Label>
+          <SelectBox className="w-44 mr-8"
+            selectClass="rounded-lg bg-white"
+            label=""
+            selectArray={[...REPORT_TYPES]}
+            value={reportGubun} onSelectValue={val => setReportGubun(String(val))}
+            selectContentClass="z-[101]" labelClass='whitespace-nowrap text-xl text-gray-600 pr-2'
+          />
+          {/* 승인년도 필터 */}
+          <YearRangeSelectBox
+            start={yearFilter.start}
+            end={yearFilter.end}
+            onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
+            startLabel="승인년도" endLabel=""
+          />
+          {/* 조회 버튼 */}
+          <div className="flex-1 flex justify-end">
+            <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="h-[79vh] w-full overflow-hidden rounded-lg border">
+        {/* 테이블2 영역 (가로/세로 스크롤 가능) */}
+        <div className="flex-1 px-2 pb-2">
+          <LoadingOverlay isLoading={isLoading} />
+          <UiTable
+            headName={(() => {
+              return (<>조회 결과</>);
+            })()
+            }
+            tableData={tableData}
+            headlist={reportTableHeadlist}
+            pageSize={10}
+            total={tableCount}
+            cellClick={handleReportCellClick}
+            onPageChange={setCurPage}
+            resetPageNo={isResetPage}
+            resetSelection={isResetSelection}
+          />
+        </div>
+      </div>
+      {/* 모달 컴포넌트 */}
+      {isReportFilesModalOpen && <ReportFilesModal clsfSystmSn={clsfSystmSn} />}
+    </>
+  );
+};
+
+export default React.memo(ReportTab);
\ No newline at end of file
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/searchModal.tsx b/apps/sn/app/html/(map-layout)/map/searchModal/searchModal.tsx
new file mode 100644
index 000000000..3ce334518
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/searchModal.tsx
@@ -0,0 +1,238 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창
+ * 
+ * 📄 Search Modal
+ * Next.js App Router (app/) 기반 검색 모달 컴포넌트
+ *
+ * - 탭 기반 검색 인터페이스 (기본정보, 유지관리 정보, 보고서)
+ * - 테이블 데이터 표시 및 페이지네이션 기능
+ * - 시설물 조회 결과 및 유지관리 사업 현황 표시
+ * - 엑셀 다운로드 및 지도에서 보기 기능
+ * - Zustand를 통한 검색 모달 상태 관리
+ * - 로딩 오버레이 및 선택 초기화 지원
+ */
+import LoadingOverlay from '@/components/ui/LoadingBar';
+import { UiModal, UITab, UiTable } from '@common/business_components/ui';
+import { Button } from '@common/components/ui';
+import React, { useEffect, useMemo } from 'react';
+import { Toaster } from "react-hot-toast";
+import useSearchModalStore from '@/store/useSearchModalStore';
+import { ExclnSewagePumpCol2, MsSwageMhlCol2, MsSwagePplCol2, stofcbrCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2 } from '../components/common/table';
+import BasicTab, { BASIC_TYPES } from './basicTab';
+import OperationTab from './operationTab';
+import ReportTab from './reportTab';
+import useSearchModal from './useSearchModal';
+import useBasicTab from './useBasicTab';
+import useOperationTab from './useOperationTab';
+
+const SearchModal: React.FC = () => {
+  const {
+    showTable,
+    isSearchModalOpen, setIsSearchModalOpen,
+    activeTab, basicType, workType,
+    tableData, detailTableData,
+    tableCount, detailTableCount,
+    curPage, detailCurPage,
+    detailBizId,
+    isLoading, isDetailLoading,
+    isResetPage, isResetDetailPage,
+    isResetSelection, isResetDetailSelection,
+    setActiveTab,
+    setCurPage, setDetailCurPage,
+    setIsResetPage, setIsResetDetailPage,
+    setDetailBizId,
+    setIsResetDetailSelection,
+    resetFilters
+  } = useSearchModalStore();
+  const { TABS, viewMultipleFeature, fetchFilteredData } = useSearchModal();
+  const { handleBasicCellClick, basicExcelDownload } = useBasicTab();
+  const {
+    WORK_TYPES,
+    OPERATION_TABLE_SIZE,
+    OPERATION_TABLE_HEADLIST,
+    MAINTENANACE_TABLE_HEADLIST,
+    CLEANING_TABLE_HEADLIST,
+    INSPECTION_TABLE_HEADLIST,
+    handleOperationCellClick,
+    handleOperationResultCellClick,
+    operationExcelDownload,
+    operationResultExcelDownload,
+    handleOperationPageNation
+  } = useOperationTab();
+
+
+  const dynamicHeadlist: { id: string, title: string }[] = useMemo(() => {
+    if (activeTab === 'basic') {  // 기본정보
+      if (basicType === 'tb_ms_swage_ppl') return MsSwagePplCol2;// 하수관로
+      if (basicType === 'tb_il_swage_prcs_fclt') return SwtrmtFcltCol2;// 하수처리시설
+      if (basicType === 'tb_ms_swage_prcs_zone') return SwtrmtPrcsZoneCol2; // 하수처리구역
+      if (basicType === 'tb_ms_swage_mhl') return MsSwageMhlCol2; // 하수맨홀
+      if (basicType === 'tb_ms_swage_pmstn') return ExclnSewagePumpCol2;  // 하수펌프장
+      if (basicType === 'tb_ms_stofcbr') return stofcbrCol2;  // 우수토실
+
+      return [];
+    }
+    if (activeTab === 'operation') return OPERATION_TABLE_HEADLIST; // 유지관리 정보
+
+    return [];
+  }, [activeTab, basicType, workType]);
+
+  const dynamicHeadlist2: { id: string, title: string }[] = useMemo(() => {
+    if (activeTab === 'operation') {
+      if (workType === WORK_TYPES[0]?.val) return MAINTENANACE_TABLE_HEADLIST;  // 보수 및 갱신
+      if (workType === WORK_TYPES[1]?.val) return CLEANING_TABLE_HEADLIST; // 점검 및 진단
+      if (workType === WORK_TYPES[2]?.val) return INSPECTION_TABLE_HEADLIST; // 청소 및 준설
+    }
+
+    return [];
+  }, [activeTab, workType]);
+
+  useEffect(() => {
+    resetFilters();
+  }, [activeTab, basicType, workType]);
+
+  // 페이지 변경 시마다 데이터 fetch
+  useEffect(() => {
+    setIsResetPage(false);
+    setIsResetDetailPage(true);
+    setDetailBizId(0);
+    if (showTable) fetchFilteredData();
+  }, [curPage]);
+
+  // 페이지 변경 시마다 데이터 fetch
+  useEffect(() => {
+    setIsResetDetailSelection(false);
+    if (showTable) handleOperationPageNation(Number(detailBizId));
+  }, [detailCurPage]);
+
+
+  const renderBody = () => (
+    <>
+      {/* 탭 영역 */}
+      <UITab
+        defaultValue={activeTab}
+        tabList={TABS.map((tab: any) => ({
+          value: tab.val,
+          label: tab.text
+        }))}
+        onValueChange={(value: string) => setActiveTab(value)}
+      />
+      {activeTab === 'basic' && (<BasicTab />)} {/* 기본정보 탭 */}
+      {activeTab === 'operation' && (<OperationTab />)} {/* 유지관리 정보 탭 */}
+      {activeTab === 'report' && (<ReportTab open={isSearchModalOpen} />)}  {/* 하수도정비기본계획보고서 탭 */}
+
+
+      {/* 📋 결과 리스트 */}
+      {/* 기본정보 탭 */}
+      {activeTab === 'basic' && (
+        <div className="h-[79dvh] w-full rounded-lg border mt-4 overflow-x-scroll">
+          <LoadingOverlay isLoading={isLoading} />
+            <UiTable className='w-[120%]'
+              headName={(() => {
+                const label = BASIC_TYPES.find((type) => type.val === basicType)?.text
+                return (<>{label} 조회 결과</>);
+              })()
+              }
+              tableData={tableData}
+              headlist={dynamicHeadlist}
+              pageSize={10}
+              total={tableCount}
+              cellClick={handleBasicCellClick}
+              onPageChange={setCurPage}
+              resetPageNo={isResetPage}
+              resetSelection={isResetSelection}
+              curPage={curPage}
+              headButton={
+                <div className='flex'>
+                  <Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium primary" size="sm" onClick={viewMultipleFeature}>지도에서 보기</Button>
+                  <Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium green" size="sm" onClick={basicExcelDownload}>파일 다운로드</Button>
+                </div>
+              }
+            />
+        </div>
+      )}
+      {/* 유지관리 정보 탭 */}
+      {activeTab === 'operation' && (
+        <>
+          <div className="h-[39dvh] w-full overflow-x-hidden overflow-y-auto rounded-lg border mt-4">
+            {/* <div className="flex-1 px-2 pb-2"> */}
+            <LoadingOverlay isLoading={isLoading} />
+            <UiTable
+              headName={
+                (() => {
+                  const label = WORK_TYPES.find((type) => type.val === workType)?.text
+                  return (<>{label} 사업 현황</>);
+                })()
+              }
+              tableData={tableData}
+              headlist={dynamicHeadlist}
+              pageSize={OPERATION_TABLE_SIZE}
+              total={tableCount}
+              cellClick={handleOperationCellClick}
+              onPageChange={setCurPage}
+              resetPageNo={isResetPage}
+              resetSelection={isResetSelection}
+              curPage={curPage}
+              headButton={
+                <Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-sm font-medium green" size="sm" onClick={operationExcelDownload}>파일 다운로드</Button>
+              }
+            />
+            {/* </div> */}
+          </div>
+
+          <div className="h-[39dvh] w-full overflow-x-hidden overflow-y-auto rounded-lg border">
+            {/* 테이블2 영역 */}
+            {/* <div className="flex-1 px-2 pb-2"> */}
+            <LoadingOverlay isLoading={isDetailLoading} />
+            <UiTable
+              headName={
+                (() => {
+                  const label = WORK_TYPES.find((type) => type.val === workType)?.text
+                  return (<>{label} 결과표</>);
+                })()
+              }
+              tableData={detailTableData}
+              headlist={dynamicHeadlist2}
+              pageSize={OPERATION_TABLE_SIZE}
+              total={detailTableCount}
+              cellClick={handleOperationResultCellClick}
+              onPageChange={setDetailCurPage}
+              resetPageNo={isResetDetailPage}
+              resetSelection={isResetDetailSelection}
+              curPage={detailCurPage}
+              headButton={
+                <div className='flex'>
+                  <Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium primary" size="sm" onClick={viewMultipleFeature}>지도에서 보기</Button>
+                  <Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium green" size="sm" onClick={operationResultExcelDownload}>파일 다운로드</Button>
+                </div>
+              }
+            />
+            {/* </div> */}
+          </div>
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <div className='overflow-x-auto overflow-y-hidden'>
+      <UiModal
+        open={isSearchModalOpen}
+        onOpenChange={setIsSearchModalOpen}
+        bodyClass={`
+        h-[100dvh]
+        w-[90dvw]
+        max-w-[1220px]
+        max-h-[970px]
+        overflow-y-hidden
+        z-[101]
+      `}
+        body={renderBody()}
+        useDirectRender={true}
+      />
+      <Toaster position="top-center"></Toaster>
+    </div>
+  );
+};
+
+export default React.memo(SearchModal);
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/stofcbr.tsx b/apps/sn/app/html/(map-layout)/map/searchModal/stofcbr.tsx
new file mode 100644
index 000000000..102b21d64
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/stofcbr.tsx
@@ -0,0 +1,92 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 우수토실)
+ * 
+ * 📄 Stofcbr Tab
+ * Next.js App Router (app/) 기반 검색 모달 우수토실 탭 컴포넌트
+ *
+ * - 시도/시군구 선택 및 설치년도 범위 필터링
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
+import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { Button } from '@common/components';
+import React from 'react';
+import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
+import useSearchModalStore from "@/store/useSearchModalStore";
+import useSearchModal from './useSearchModal';
+
+
+export const stofcbrCqlFilters = () => {
+  const {
+    ctpvCd, sggCd,
+    yearFilter,
+    todayYear, todayMonth, todayDate,
+    getDateString
+  } = useSearchModalStore.getState();
+
+  const cqlFilters: string[] = [];
+  // 시도, 시군구
+  if (ctpvCd !== '0' && sggCd !== '0') cqlFilters.push(`pbadms_emd_cd LIKE '${sggCd}%'`);
+  else if (ctpvCd !== '0') cqlFilters.push(`pbadms_emd_cd LIKE '${ctpvCd?.trim()}%'`);
+  // 설치년도 범위
+  const startDate = getDateString(
+    yearFilter.start,
+    '',
+    '',
+    "19000101",
+  );
+  const endDate = getDateString(
+    yearFilter.end,
+    '',
+    '',
+    `${todayYear}${todayMonth}${todayDate}`,
+  );
+  cqlFilters.push(
+    `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`,
+  );
+
+  return cqlFilters;
+};
+
+const Stofcbr: React.FC = () => {
+  const {
+    ctpvCd, setCtpvCd,
+    sggCd, setSggCd,
+    yearFilter, setYearFilter,
+  } = useSearchModalStore();
+  const { handleSearch } = useSearchModal();
+
+
+  return (
+    <div className="mb-3">
+      <div className="flex items-center mb-2">
+        {/* 시도, 시군구 */}
+        <CtpvSggPrcsFcltSelectBox
+          sido={ctpvCd}
+          sigungu={sggCd}
+          onSidoChange={(sidoId: string) => {
+            setCtpvCd(sidoId);
+            setSggCd("0");
+          }}
+          onSigunguChange={setSggCd}
+        />
+        {/* 설치년도 */}
+        <YearRangeSelectBox
+          start={yearFilter.start}
+          end={yearFilter.end}
+          onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
+          startLabel="설치년도"
+          endLabel=""
+        />
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(Stofcbr);
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/swageMhl.tsx b/apps/sn/app/html/(map-layout)/map/searchModal/swageMhl.tsx
new file mode 100644
index 000000000..266012dff
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/swageMhl.tsx
@@ -0,0 +1,156 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수맨홀)
+ * 
+ * 📄 SwageMhl Tab
+ * Next.js App Router (app/) 기반 검색 모달 하수맨홀 탭 컴포넌트
+ *
+ * - 시도/시군구 선택 및 설치년도 범위 필터링
+ * - 용도 및 구경 범위 기반 검색 기능
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
+import React from 'react';
+import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { Button, Input, Label } from '@common/components';
+import { MS_SWAGE_MHL_USE_CODES } from '../components/common/table';
+import { SelectBox } from '@common/business_components/ui';
+import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
+import useSearchModalStore from "@/store/useSearchModalStore";
+import useSearchModal from './useSearchModal';
+
+
+export const swageMhlCqlFilters = () => {
+  const {
+    ctpvCd, sggCd,
+    yearFilter,
+    start1, end1,
+    var1,
+    todayYear, todayMonth, todayDate,
+    getDateString
+  } = useSearchModalStore.getState();
+
+  const cqlFilters: string[] = [];
+  // 시도, 시군구
+  if (ctpvCd !== '0' && sggCd !== '0') cqlFilters.push(`pbadms_emd_cd LIKE '${sggCd}%'`);
+  else if (ctpvCd !== '0') cqlFilters.push(`pbadms_emd_cd LIKE '${ctpvCd?.trim()}%'`);
+  // // 설치년도 범위
+  const startDate = getDateString(
+    yearFilter.start,
+    '',
+    '',
+    "19000101",
+  );
+  const endDate = getDateString(
+    yearFilter.end,
+    '',
+    '',
+    `${todayYear}${todayMonth}${todayDate}`,
+  );
+  cqlFilters.push(
+    `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`,
+  );
+  if (var1) cqlFilters.push(`usg_cd='${var1}'`);
+  // 구경(mm) 범위
+  if (start1 && end1) cqlFilters.push(`swage_mhL_diam_vl BETWEEN ${start1} AND ${end1}`);
+  else if (start1) cqlFilters.push(`swage_mhL_diam_vl >= ${start1}`);
+  else if (end1) cqlFilters.push(`swage_mhL_diam_vl <= ${end1}`);
+
+  return cqlFilters;
+};
+
+const SwageMhl: React.FC = () => {
+  const {
+    var1, setVar1,
+    start1, setStart1, end1, setEnd1,
+    ctpvCd, setCtpvCd,
+    sggCd, setSggCd,
+    yearFilter, setYearFilter,
+  } = useSearchModalStore();
+  const { handleSearch } = useSearchModal();
+
+  return (
+    <div className="mb-3">
+      <div className="mb-2 flex items-center">
+        <CtpvSggPrcsFcltSelectBox
+          sido={ctpvCd}
+          sigungu={sggCd}
+          onSidoChange={(sidoId: string) => {
+            setCtpvCd(sidoId);
+            setSggCd("0");
+          }}
+          onSigunguChange={setSggCd}
+        />
+        {/* 설치년도 */}
+        <YearRangeSelectBox
+          start={yearFilter.start}
+          end={yearFilter.end}
+          onChange={(range) =>
+            setYearFilter({
+              ...yearFilter,
+              start: range.start,
+              end: range.end,
+            })
+          }
+          startLabel="설치년도"
+          endLabel=""
+        />
+        {/* 용도 */}
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">용도</Label>
+        <SelectBox
+          className="w-48 mr-8"
+          selectClass="rounded-lg bg-white text-xl"
+          label=""
+          selectArray={[{ val: "0", text: "전체" }, ...MS_SWAGE_MHL_USE_CODES]}
+          value={var1}
+          onSelectValue={(val) => {
+            setVar1(String(val));
+          }}
+          selectContentClass="z-[101]"
+        />
+        {/* 하수맨홀 구경 */}
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구경(mm)</Label>
+        <Input
+          className="w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={start1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setStart1(val);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd1(val);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(SwageMhl);
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/swagePmstn.tsx b/apps/sn/app/html/(map-layout)/map/searchModal/swagePmstn.tsx
new file mode 100644
index 000000000..3512b4fa3
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/swagePmstn.tsx
@@ -0,0 +1,175 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수펌프장)
+ * 
+ * 📄 SwagePmstn Tab
+ * Next.js App Router (app/) 기반 검색 모달 하수펌프장 탭 컴포넌트
+ *
+ * - 시도/시군구 선택 및 설치년도 범위 필터링
+ * - 일일처리용량 및 양수능력 범위 기반 검색 기능
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
+import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { Button, Input, Label } from '@common/components';
+import React from 'react';
+import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
+import useSearchModalStore from "@/store/useSearchModalStore";
+import useSearchModal from './useSearchModal';
+
+
+export const swagePmstnCqlFilters = () => {
+  const {
+    ctpvCd, sggCd,
+    yearFilter,
+    start1, start2, end1, end2,
+    todayYear, todayMonth, todayDate,
+    getDateString
+  } = useSearchModalStore.getState();
+
+  const cqlFilters: string[] = [];
+  // 시도, 시군구
+  if (ctpvCd !== '0' && sggCd !== '0') cqlFilters.push(`pbadms_emd_cd LIKE '${sggCd}%'`);
+  else if (ctpvCd !== '0') cqlFilters.push(`pbadms_emd_cd LIKE '${ctpvCd?.trim()}%'`);
+  // 설치년도 범위
+  const startDate = getDateString(
+    yearFilter.start,
+    '',
+    '',
+    "19000101",
+  );
+  const endDate = getDateString(
+    yearFilter.end,
+    '',
+    '',
+    `${todayYear}${todayMonth}${todayDate}`,
+  );
+  cqlFilters.push(
+    `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`,
+  );
+  // 일일처리용량 범위
+  if (start1 && end1)
+    cqlFilters.push(`daily_prcs_cpct BETWEEN ${start1} AND ${end1}`);
+  else if (start1) cqlFilters.push(`daily_prcs_cpct >= ${start1}`);
+  else if (end1) cqlFilters.push(`daily_prcs_cpct <= ${end1}`);
+  // 양수능력 범위
+  if (start2 && end2)
+    cqlFilters.push(`excln_wpmp_ablt_vl BETWEEN ${start2} AND ${end2}`);
+  else if (start2) cqlFilters.push(`excln_wpmp_ablt_vl >= ${start2}`);
+  else if (end2) cqlFilters.push(`excln_wpmp_ablt_vl <= ${end2}`);
+
+  return cqlFilters;
+};
+
+const SwagePmstn: React.FC = () => {
+  const {
+    start1, setStart1,
+    end1, setEnd1,
+    ctpvCd, setCtpvCd,
+    sggCd, setSggCd,
+    yearFilter, setYearFilter,
+  } = useSearchModalStore();
+  const { handleSearch } = useSearchModal();
+
+  return (
+    <div className="mb-3">
+      <div className="flex items-center mb-2">
+        {/* 시도, 시군구 */}
+        <CtpvSggPrcsFcltSelectBox
+          sido={ctpvCd}
+          sigungu={sggCd}
+          onSidoChange={(sidoId: string) => {
+            setCtpvCd(sidoId);
+            setSggCd("0");
+          }}
+          onSigunguChange={setSggCd}
+        />
+        {/* 설치년도 */}
+        <YearRangeSelectBox
+          start={yearFilter.start}
+          end={yearFilter.end}
+          onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
+          startLabel="설치년도"
+          endLabel=""
+        />
+        {/* 일일처리용량 */}
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">일일처리용량(㎥)</Label>
+        <Input
+          className="w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={start1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setStart1(val);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd1(val);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        {/* 양수능력 */}
+        {/* <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">양수능력(m²/d)</Label>
+        <Input
+          className="w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={start2}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setStart2(val);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end2}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd2(val);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        /> */}
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(SwagePmstn);
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/swagePpl.tsx b/apps/sn/app/html/(map-layout)/map/searchModal/swagePpl.tsx
new file mode 100644
index 000000000..5bc8f900b
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/swagePpl.tsx
@@ -0,0 +1,209 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수관로)
+ * 
+ * 📄 SwagePpl Tab
+ * Next.js App Router (app/) 기반 검색 모달 하수관로 탭 컴포넌트
+ *
+ * - 시도/시군구 선택 및 설치년도 범위 필터링
+ * - 용도 및 관경 범위 기반 검색 기능
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
+import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { SelectBox } from '@common/business_components/ui';
+import { Button, Input, Label } from '@common/components';
+import React from 'react';
+import { MS_SWAGE_PPL_USE_CODES } from '../components/common/table';
+import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
+import useSearchModalStore from "@/store/useSearchModalStore";
+import useSearchModal from './useSearchModal';
+
+
+// 하수관로용 CQL 필터 생성
+export const swagePplCqlFilters = () => {
+  const {
+    var1, var2,
+    ctpvCd, sggCd,
+    yearFilter,
+    start1, start2, end1, end2,
+    todayYear, todayMonth, todayDate,
+    getDateString
+  } = useSearchModalStore.getState();
+
+  const cqlFilters: string[] = [];
+  if (var1) cqlFilters.push(`usg_cd='${var1}'`);
+  if (var2) cqlFilters.push(`mqlt_cd='${var2}'`);
+  if (ctpvCd !== '0' && sggCd !== '0') cqlFilters.push(`pbadms_emd_cd LIKE '${sggCd}%'`);
+  else if (ctpvCd !== '0') cqlFilters.push(`pbadms_emd_cd LIKE '${ctpvCd?.trim()}%'`);
+  // 설치년도 범위
+  const startDate = getDateString(
+    yearFilter.start,
+    '',
+    '',
+    "19000101",
+  );
+  const endDate = getDateString(
+    yearFilter.end,
+    '',
+    '',
+    `${todayYear}${todayMonth}${todayDate}`,
+  );
+  cqlFilters.push(
+    `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`,
+  );
+  // 관경(mm) 범위
+  if (start1 && end1) cqlFilters.push(`pdmt_vl BETWEEN ${start1} AND ${end1}`);
+  else if (start1) cqlFilters.push(`pdmt_vl >= ${start1}`);
+  else if (end1) cqlFilters.push(`pdmt_vl <= ${end1}`);
+  // 연장(m) 범위
+  if (start2 && end2) cqlFilters.push(`prlg_vl BETWEEN ${start2} AND ${end2}`);
+  else if (start2) cqlFilters.push(`prlg_vl >= ${start2}`);
+  else if (end2) cqlFilters.push(`prlg_vl <= ${end2}`);
+
+  return cqlFilters;
+};
+
+const SwagePpl: React.FC = () => {
+  const {
+    var1, setVar1,
+    start1, setStart1, end1, setEnd1,
+    ctpvCd, setCtpvCd, sggCd, setSggCd,
+    yearFilter, setYearFilter,
+  } = useSearchModalStore();
+  const { handleSearch } = useSearchModal();
+
+
+  return (
+    <div className="mb-6">
+      <div className="mb-2 flex items-center">
+        <CtpvSggPrcsFcltSelectBox
+          sido={ctpvCd}
+          sigungu={sggCd}
+          onSidoChange={(sidoId: string) => {
+            setCtpvCd(sidoId);
+            setSggCd("0");
+          }}
+          onSigunguChange={setSggCd}
+        />
+        {/* 설치년도 */}
+        <YearRangeSelectBox
+          start={yearFilter.start}
+          end={yearFilter.end}
+          onChange={(range) =>
+            setYearFilter({
+              ...yearFilter,
+              start: range.start,
+              end: range.end,
+            })
+          }
+          startLabel="설치년도"
+          endLabel=""
+        />
+        {/* 용도 */}
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">용도</Label>
+        <SelectBox
+          className="w-32 mr-8"
+          selectClass="rounded-lg bg-white text-xl"
+          label=""
+          selectArray={[{ val: "0", text: "전체" }, ...MS_SWAGE_PPL_USE_CODES]}
+          value={var1}
+          onSelectValue={(val) => {
+            setVar1(String(val));
+          }}
+          selectContentClass="z-[101]"
+        />
+        {/* 재질 */}
+        {/* <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">재질</Label>
+        <SelectBox
+          className="w-60 mr-8"
+          selectClass="rounded-lg bg-white text-xl"
+          label=""
+          selectArray={MS_SWAGE_PPL_CODES}
+          value={var2}
+          onSelectValue={(val) => {
+            setVar2(String(val));
+          }}
+          selectContentClass="z-[101]"
+        /> */}
+        {/* 관경 */}
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">관경(mm)</Label>
+        <Input
+          className="w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={start1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setStart1(val);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd1(val);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        {/* 연장 */}
+        {/* <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">연장(m)</Label>
+        <Input
+          className="w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={start2}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setStart2(val);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end2}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd2(val);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        /> */}
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(SwagePpl);
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/swagePrcsFclt.tsx b/apps/sn/app/html/(map-layout)/map/searchModal/swagePrcsFclt.tsx
new file mode 100644
index 000000000..c541a4c2f
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/swagePrcsFclt.tsx
@@ -0,0 +1,150 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수처리시설)
+ * 
+ * 📄 SwagePrcsFclt Tab
+ * Next.js App Router (app/) 기반 검색 모달 하수처리시설 탭 컴포넌트
+ *
+ * - 시도/시군구 선택 및 가동개시일자 범위 필터링
+ * - 시설용량 범위 기반 검색 기능
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
+import React from 'react';
+import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { Button, Input, Label } from '@common/components';
+import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
+import useSearchModalStore from "@/store/useSearchModalStore";
+import useSearchModal from './useSearchModal';
+
+
+// 하수처리시설용 CQL 필터 생성
+export const swagePrcsFcltCqlFilters = () => {
+  const {
+    ctpvName, sggName,
+    yearFilter,
+    start1, end1, 
+    todayYear, todayMonth, todayDate,
+    getDateString
+  } = useSearchModalStore.getState();
+
+  const cqlFilters: string[] = [];
+  // 가동개시일자 범위
+  const startDate = getDateString(
+    yearFilter.start,
+    '',
+    '',
+    "19000101",
+  );
+  const endDate = getDateString(
+    yearFilter.end,
+    '',
+    '',
+    `${todayYear}${todayMonth}${todayDate}`,
+  );
+  cqlFilters.push(
+    `oprtng_strt_ymd >= '${startDate}' and oprtng_strt_ymd <= '${endDate}'`,
+  );
+  // 시설용량 범위
+  if (start1 && end1)
+    cqlFilters.push(`fclt_cpct BETWEEN ${start1} AND ${end1}`);
+  else if (start1) cqlFilters.push(`fclt_cpct >= ${start1}`);
+  else if (end1) cqlFilters.push(`fclt_cpct <= ${end1}`);
+
+  // 시도
+  if (ctpvName) cqlFilters.push(`ctpv_nm ILIKE '%${ctpvName}%'`);
+  if (sggName) cqlFilters.push(`sgg_nm ILIKE '%${sggName}%'`);
+  // // 처리구역 면적
+  // if (start2 && end2)
+  //   cqlFilters.push(`prcsZoneAreaSum BETWEEN ${start2} AND ${end2}`);
+  // else if (start2) cqlFilters.push(`prcsZoneAreaSum >= ${start2}`);
+  // else if (end2) cqlFilters.push(`prcsZoneAreaSum <= ${end2}`);
+  // // 하수처리시설명
+  // if (var1) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${var1}%'`);
+  return cqlFilters;
+};
+
+const SwagePrcsFclt: React.FC = () => {
+  const {
+    start1, setStart1, end1, setEnd1,
+    ctpvCd, setCtpvCd, setCtpvName,
+    sggCd, setSggCd, setSggName,
+    yearFilter, setYearFilter,
+  } = useSearchModalStore();
+  const { handleSearch } = useSearchModal();
+
+  return (
+    <div className="mb-3">
+      <div className="mb-2 flex items-center">
+        <CtpvSggPrcsFcltSelectBox
+          sido={ctpvCd}
+          sigungu={sggCd}
+          onSidoChange={(sidoId) => {
+            setCtpvCd(sidoId);
+            setSggCd("0");
+          }}
+          onSigunguChange={setSggCd}
+          setCtpvName={setCtpvName}
+          setSggName={setSggName}
+        />
+        {/* 가동개시일자 */}
+        <Label className="mr-2 w-auto text-xl text-gray-600">가동개시일자</Label>
+        <YearRangeSelectBox
+          start={yearFilter.start}
+          end={yearFilter.end}
+          onChange={(range) =>
+            setYearFilter({
+              ...yearFilter,
+              start: range.start,
+              end: range.end,
+            })
+          }
+          startLabel=""
+          endLabel=""
+        />
+        {/* 시설용량 */}
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시설용량(㎥/d)</Label>
+        <Input
+          className="w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={start1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setStart1(val);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd1(val);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(SwagePrcsFclt);
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/swagePrcsZone.tsx b/apps/sn/app/html/(map-layout)/map/searchModal/swagePrcsZone.tsx
new file mode 100644
index 000000000..e433662d1
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/swagePrcsZone.tsx
@@ -0,0 +1,93 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수처리구역)
+ * 
+ * 📄 SwagePrcsZone Tab
+ * Next.js App Router (app/) 기반 검색 모달 하수처리구역 탭 컴포넌트
+ *
+ * - 시도/시군구 선택 및 하수처리시설명/구역명 기반 검색 기능
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
+import React from 'react';
+import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
+import { Button, Input, Label } from '@common/components';
+import useSearchModalStore from "@/store/useSearchModalStore";
+import useSearchModal from './useSearchModal';
+
+
+// 하수처리구역용 CQL 필터 생성
+export const swagePrcsZoneCqlFilters = () => {
+  const {
+    ctpvCd, sggCd,
+    var1, var2
+  } = useSearchModalStore.getState();
+  const cqlFilters: string[] = [];
+  if (ctpvCd !== '' && ctpvCd !== '0') cqlFilters.push(`ctpv_cd='${ctpvCd?.trim()}'`);
+  if (sggCd !== '' && sggCd !== '0') cqlFilters.push(`sgg_cd='${sggCd}'`);
+  if (var1) cqlFilters.push(`swtrmt_zone_nm ILIKE '%${var1}%'`);
+  if (var2) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${var2}%'`);
+  return cqlFilters;
+};
+
+const swagePrcsZone: React.FC = () => {
+  const {
+    var1, setVar1, var2, setVar2,
+    ctpvCd, setCtpvCd,
+    sggCd, setSggCd,
+  } = useSearchModalStore();
+  const { handleSearch } = useSearchModal();
+
+  return (
+    <div className="mb-3">
+      <div className="mb-2 flex items-center">
+        <CtpvSggPrcsFcltSelectBox
+          sido={ctpvCd}
+          sigungu={sggCd}
+          onSidoChange={(sidoId: string) => {
+            setCtpvCd(sidoId);
+            setSggCd("0");
+          }}
+          onSigunguChange={setSggCd}
+        />
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">하수처리시설명</Label>
+        <Input
+          className='!text-xl w-[120px] placeholder:text-center mr-8'
+          placeholder="입력"
+          value={var2}
+          onChange={(e) => {
+            setVar2(e.target.value);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">하수처리구역명</Label>
+        <Input
+          className="mr-8 w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={var1}
+          onChange={(e) => {
+            setVar1(e.target.value);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault(); // Enter 키 기본 동작 방지
+              handleSearch();
+            }
+          }}
+        />
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(swagePrcsZone);
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/useBasicTab.ts b/apps/sn/app/html/(map-layout)/map/searchModal/useBasicTab.ts
new file mode 100644
index 000000000..9184286ed
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/useBasicTab.ts
@@ -0,0 +1,348 @@
+/**
+ * 📄 useBasicTab Hook
+ * 검색 모달 기본정보 탭 훅
+ *
+ * - 필터링된 시설물 데이터 조회 및 포맷팅
+ * - 테이블 셀 클릭 시 지도 피처 선택 및 줌 기능
+ * - 엑셀 다운로드 기능 (한글 헤더 지원)
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - Zustand를 통한 상태 관리 및 로딩 처리
+ * - 데이터 매핑 및 코드 변환 (시도/시군구, 용도 등)
+ * 
+ * 🔗 사용 API
+ * - 관망도 시설물 목록 조회: GET /api/v1/fclts (sewerage-service)
+ */
+import { downloadExcelWithKoreanHeaders } from '@common/business_components/ui';
+import {
+  MS_SWAGE_PPL_USE_CODES, MS_SWAGE_PPL_CODES, MS_SWAGE_PPL_SHAPE, MS_SWAGE_MHL_CODES, MS_SWAGE_MHL_USE_CODES,
+  MsSwagePplExcelCol, SwtrmtFcltExcelCol, SwtrmtPrcsZoneExcelCol, MsSwageMhlExcelCol, ExclnSewagePumpExcelCol, stofcbrExcelCol
+} from '../components/common/table';
+import { getData } from "@/components/lib/api";
+import { BASIC_TYPES } from './basicTab';
+import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
+import useStore from '@/store/useStore';
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import { confirmToast } from '@/components/ui/toast'
+import { toast } from "react-hot-toast";
+import useSearchModalStore from '@/store/useSearchModalStore';
+import { swagePplCqlFilters } from './swagePpl';
+import { swagePrcsFcltCqlFilters } from './swagePrcsFclt';
+import { swagePrcsZoneCqlFilters } from './swagePrcsZone';
+import { swageMhlCqlFilters } from './swageMhl';
+import { swagePmstnCqlFilters } from './swagePmstn';
+import { stofcbrCqlFilters } from './stofcbr';
+
+
+export default function useBasicTab() {
+  const {
+    basicType,
+    tableData,
+    curPage,
+    todayYear, todayMonth, todayDate,
+    setIsSearchModalOpen,
+    setTableData,
+    setTableCount,
+    setIsLoading,
+  } = useSearchModalStore();
+  const { ctpv, sgg } = useStore();
+
+
+  const fetchBasicFilteredData = async () => {
+    let cqlFilters: string[] = [];
+    const queryParams = new URLSearchParams({
+      lyrTypeNm: basicType,
+      page: `${curPage - 1}`,
+      size: '10',
+      sort: 'string',
+    });
+
+    if (basicType === 'tb_ms_swage_ppl') cqlFilters = swagePplCqlFilters(); // 하수관로
+    else if (basicType === 'tb_il_swage_prcs_fclt') cqlFilters = swagePrcsFcltCqlFilters(); // 하수처리시설
+    else if (basicType === 'tb_ms_swage_prcs_zone') cqlFilters = swagePrcsZoneCqlFilters(); // 하수처리구역
+    else if (basicType === 'tb_ms_swage_mhl') cqlFilters = swageMhlCqlFilters(); // 하수맨홀
+    else if (basicType === 'tb_ms_swage_pmstn') cqlFilters = swagePmstnCqlFilters(); // 하수펌프장
+    else if (basicType === 'tb_ms_stofcbr') cqlFilters = stofcbrCqlFilters(); // 우수토실
+    if (cqlFilters.length > 0) queryParams.append('cqlFiter', cqlFilters.join(' and '));
+
+    const res = await getData(`v1/fclts?${queryParams.toString()}`);
+
+    // 🎯 각 아이템을 개별적으로 포맷팅하면서 일련번호 추가
+    const dataWithRowNumber = (res.data || []).map((item: any, index: number) => {
+      // 🎯 먼저 각 아이템을 포맷팅
+      const formattedItem = formatDisplayData(item);
+
+      let ctpvCd = item?.ctpvNm ?? formattedItem?.ctpvNm ?? '';
+      let sggCd = item?.sggNm ?? formattedItem?.sggNm ?? '';
+
+      if (!ctpvCd || !sggCd) {
+        const code = String(item?.pbadmsEmdCd ?? formattedItem?.pbadmsEmdCd ?? '')?.trim();
+        if (!ctpvCd && code) ctpvCd = code.slice(0, 2);
+        if (!sggCd && code) sggCd = code.slice(0, 5);
+      }
+
+      const matchedMqltCode = basicType === 'tb_ms_swage_ppl'
+        ? MS_SWAGE_PPL_CODES.find(code => code.val === item?.mqltCd?.trim()) // 하수관로 재질
+        : basicType === 'tb_ms_swage_mhl'
+          ? MS_SWAGE_MHL_CODES.find(code => code.val === item?.mqltCd?.trim()) // 맨홀 재질
+          : undefined;
+      const matchedMhlUsgCode = MS_SWAGE_MHL_USE_CODES.find(code => code.val === item?.usgCd); // 맨홀 용도
+      const matchedPplShpCode = MS_SWAGE_PPL_SHAPE.find(code => code.val === item?.fcltyShpCd); // 하수관로 시설물형태코드
+      
+      
+      const ctpvNm = ctpv.find(code => code.val.trim() === ctpvCd)?.text || item?.ctpvNm;
+      const sggNm = sgg.find(code => code.val.trim() === sggCd)?.text || item?.sggNm;
+      const usgCdObj = MS_SWAGE_PPL_USE_CODES.find(code => code.val === item?.usgCd?.trim());
+
+      // 추가 처리 및 일련번호 추가
+      return {
+        ...formattedItem,
+        rowNumber: (curPage - 1) * 10 + index + 1, // 1부터 시작하는 일련번호 추가
+        scsYn: item.scsYn === null || item.scsYn === undefined ? 'N' : item?.scsYn, // scsYn이 null이면 'N'으로 변경
+        mqltCd: matchedMqltCode ? matchedMqltCode.text : item?.mqltCd,
+        usgCd: matchedMhlUsgCode ? matchedMhlUsgCode.text : (usgCdObj ? usgCdObj.text : item?.usgCd),
+        ctpvNm: ctpvNm ?? '-',
+        sggNm: sggNm ?? '-',
+        swtrmt_zone_nm: item.swtrmtZoneNm || item.swtrmt_zone_nm || '-',
+        fcltyShpCd: matchedPplShpCode? matchedPplShpCode.text : item?.fcltyShpCd,
+      };
+    });
+
+    setTableData(dataWithRowNumber);
+    // console.log(tableData);
+    setTableCount(res.count || []);
+  };
+
+  // 기본정보 테이블 cellClick 핸들러 
+  const handleBasicCellClick = async (index?: number | undefined, headId?: String) => {
+    if (typeof index === "number") {
+      setIsLoading(true);
+
+      const row = tableData[index];
+      const layerNm = row.lyrTypeNm;
+      const fid = row.fid;
+      const core = GisApp.Module.layer as any;
+      await core.showSearchResultsFromGeoJSON(layerNm, fid);
+      setIsLoading(false);
+      setIsSearchModalOpen(false); // SearchModal 닫기
+    }
+  };
+
+  // 기본정보 Excel 다운로드 핸들러
+  const basicExcelDownload = async () => {
+    if (tableData.length === 0) {
+      alert("다운로드 할 Excel 파일이 없습니다.\n조회 후 다시 시도해주세요.");
+      return;
+    }
+
+    toast.dismiss("global-confirm-toast");
+
+    confirmToast(
+      "파일 다운로드에는 2분 내외의 시간이 소요될 수 있습니다.\n파일 다운로드를 진행하시겠습니까?",
+      onDownload ?? (() => { }),
+      "text-xl font-medium text-gray-800"
+    );
+
+    async function onDownload() {
+      setIsLoading(true);
+
+      try {
+        const queryParams = new URLSearchParams({
+          lyrTypeNm: basicType,
+          size: '10000',
+        });
+
+        let cqlFilters: string[] = [];
+        let headerMapping: { [key: string]: string } = {};
+        let headerRange: string = "A1:F1";
+
+        switch (basicType) {
+          case 'tb_ms_swage_ppl': {
+            // 하수관로
+            cqlFilters = swagePplCqlFilters()
+            headerMapping = MsSwagePplExcelCol;
+            headerRange = "A1:Q1";
+            break;
+          }
+          case 'tb_il_swage_prcs_fclt': {
+            // 하수처리시설
+            cqlFilters = swagePrcsFcltCqlFilters();
+            headerMapping = SwtrmtFcltExcelCol;
+            headerRange = "A1:J1";
+            break;
+          }
+          case 'tb_ms_swage_prcs_zone': {
+            // 하수처리구역
+            cqlFilters = swagePrcsZoneCqlFilters();
+            headerMapping = SwtrmtPrcsZoneExcelCol;
+            headerRange = "A1:D1";
+            break;
+          }
+          case 'tb_ms_swage_mhl': {
+            // 하수맨홀
+            cqlFilters = swageMhlCqlFilters();
+            headerMapping = MsSwageMhlExcelCol;
+            headerRange = "A1:J1";
+            break;
+          }
+          case 'tb_ms_swage_pmstn': {
+            // 하수펌프장
+            cqlFilters = swagePmstnCqlFilters();
+            headerMapping = ExclnSewagePumpExcelCol;
+            headerRange = "A1:J1";
+            break;
+          }
+          case 'tb_ms_stofcbr': {
+            // 우수토실
+            cqlFilters = stofcbrCqlFilters();
+            headerMapping = stofcbrExcelCol;
+            headerRange = "A1:H1";
+            break;
+          }
+        }
+
+        if (cqlFilters.length > 0) queryParams.append('cqlFiter', cqlFilters.join(' and '));
+
+        const res = await getData(`v1/fclts?${queryParams.toString()}`);
+
+        const mhlUsgCdMap = new Map(MS_SWAGE_MHL_USE_CODES.map(code => [code.val?.trim(), code.text]));
+        const pplUsgCdMap = new Map(MS_SWAGE_PPL_USE_CODES.map(code => [code.val?.trim(), code.text]));
+        const pplMqltCdMap = new Map(MS_SWAGE_PPL_CODES.map(code => [code.val?.trim(), code.text]));
+        const pplShpCdMap = new Map(MS_SWAGE_PPL_SHAPE.map(code => [code.val?.trim(), code.text])); // 관로 시설물형태코드
+        const ctpvMap = new Map(ctpv.map(code => [code.val?.trim(), code.text]));
+        const sggMap = new Map(sgg.map(code => [code.val?.trim(), code.text]));
+
+        const mappedContent = (res.data || []).map((item: any) => {
+          const formattedItem = formatDisplayData(item);
+
+          let ctpvCd = item?.ctpvCd ?? formattedItem?.ctpvCd ?? '';
+          let sggCd = item?.sggCd ?? formattedItem?.sggCd ?? '';
+
+          if (!ctpvCd || !sggCd) {
+            const code = String(item?.pbadmsEmdCd ?? formattedItem?.pbadmsEmdCd ?? '')?.trim();
+            if (!ctpvCd && code) ctpvCd = code.slice(0, 2);
+            if (!sggCd && code) sggCd = code.slice(0, 5);
+          }
+
+          // trim 한 번만 수행
+          const trimmedUsgCd = item?.usgCd?.trim();
+          // const trimmedMqltCd = item?.mqltCd?.trim();
+
+          switch (basicType) {
+            case 'tb_ms_swage_ppl': {
+              // 하수관로
+              return {
+                fcltMngNo: formattedItem.fcltMngNo ?? item.fcltMngNo ?? '-',
+                instMngNo: formattedItem.instMngNo ?? item.instMngNo ?? '-',
+                ctpvNm: ctpvMap.get(ctpvCd) ?? item.ctpvNm ?? '-',
+                sggNm: sggMap.get(sggCd) ?? item.sggNm ?? '-',
+                swtrmt_zone_nm: formattedItem.swtrmt_zone_nm ?? item.swtrmt_zone_nm ?? '-',
+                instlYmd: formattedItem.instlYmd ?? item.instlYmd ?? '-',
+                usgCd: pplUsgCdMap.get(trimmedUsgCd) || item.usgCd || formattedItem.usgCd || '-',
+                pdmtVl: formattedItem.pdmtVl ?? item.pdmtVl ?? '-',
+                prlgVl: formattedItem.prlgVl ?? item.prlgVl ?? '-',
+                tmptDpth: formattedItem.tmptDpth ?? item.tmptDpth ?? '-',
+                tmptMhlMngNo: formattedItem.tmptMhlMngNo ?? item.tmptMhlMngNo ?? '-',
+                scendDpth: formattedItem.scendDpth ?? item.scendDpth ?? '-',
+                scendMhlMngNo: formattedItem.scendMhlMngNo ?? item.scendMhlMngNo ?? '-',
+                vrtcLen: formattedItem.vrtcLen ?? item.vrtcLen ?? '-',  
+                wdthLen: formattedItem.wdthLen ?? item.wdthLen ?? '-',
+                fcltyShpCd: pplShpCdMap.get(item?.fcltyShpCd?.trim()) || item.fcltyShpCd || formattedItem.fcltyShpCd || '-',
+                mqltCd: pplMqltCdMap.get(item?.mqltCd?.trim()) || item.mqltCd || formattedItem.mqltCd || '-',
+              };
+            }
+            case 'tb_il_swage_prcs_fclt': {
+              // 하수처리시설
+              return {
+                swtrmtFcltNm: formattedItem.swtrmtFcltNm ?? item.swtrmtFcltNm ?? '-',
+                fcltCpct: formattedItem.fcltCpct ?? item.fcltCpct ?? '-',
+                rgnExpln: formattedItem.rgnExpln ?? item.rgnExpln ?? '-',
+                oprtngStrtYmd: formattedItem.oprtngStrtYmd ?? item.oprtngStrtYmd ?? '-',
+                laeNm: formattedItem.laeNm ?? item.laeNm ?? '-',
+                sareaNm: formattedItem.sareaNm ?? item.sareaNm ?? '-',
+                rvrNm: formattedItem.rvrNm ?? item.rvrNm ?? '-',
+                dschgWtstNm: formattedItem.dschgWtstNm ?? item.dschgWtstNm ?? '-',
+                swtrmtPpltnCnt: formattedItem.swtrmtPpltnCnt ?? item.swtrmtPpltnCnt ?? '-',
+                rprsMsrcCn: formattedItem.rprsMsrcCn ?? item.rprsMsrcCn ?? '-'
+              };
+            }
+            case 'tb_ms_swage_prcs_zone': {
+              // 하수처리구역
+              return {
+                swtrmtZoneNm: formattedItem.swtrmtZoneNm ?? item.swtrmtZoneNm ?? '-',
+                ctpvNm: ctpvMap.get(ctpvCd) ?? formattedItem.ctpvNm ?? '-',
+                sggNm: sggMap.get(sggCd) ?? formattedItem.sggNm ?? '-',
+                swtrmtFcltNm: formattedItem.swtrmtFcltNm ?? item.swtrmtFcltNm ?? '-'
+              };
+            }
+            case 'tb_ms_swage_mhl': {
+              // 하수맨홀
+              return {
+                fcltMngNo: formattedItem.fcltMngNo ?? item.fcltMngNo ?? '-',
+                ctpvNm: ctpvMap.get(ctpvCd) ?? formattedItem.ctpvNm ?? '-',
+                sggNm: sggMap.get(sggCd) ?? formattedItem.sggNm ?? '-',
+                instlYmd: formattedItem.instlYmd ?? item.instlYmd ?? '-',
+                usgCd: mhlUsgCdMap.get(trimmedUsgCd) || item.usgCd || formattedItem.usgCd || '-',
+                swageMhlDiamVl: formattedItem.swageMhlDiamVl ?? item.swageMhlDiamVl ?? '-',
+                wdthLen: formattedItem.wdthLen ?? item.wdthLen ?? '-',
+                vrtcLen: formattedItem.vrtcLen ?? item.vrtcLen ?? '-',
+                altdVl: formattedItem.altdVl ?? item.altdVl ?? '-',
+                dpthlVl: formattedItem.dpthlVl ?? item.dpthlVl ?? '-'
+              };
+            }
+            case 'tb_ms_swage_pmstn': {
+              // 하수펌프장
+              return {
+                fcltMngNo: formattedItem.fcltMngNo ?? item.fcltMngNo ?? '-',
+                ctpvNm: ctpvMap.get(ctpvCd) ?? formattedItem.ctpvNm ?? '-',
+                sggNm: sggMap.get(sggCd) ?? formattedItem.sggNm ?? '-',
+                swagePmstnNm: formattedItem.swagePmstnNm ?? item.swagePmstnNm ?? '-',
+                instlYmd: formattedItem.instlYmd ?? item.instlYmd ?? '-',
+                dailyPrcsCpct: formattedItem.dailyPrcsCpct ?? item.dailyPrcsCpct ?? '-',
+                maxImpndCpct: formattedItem.maxImpndCpct ?? item.maxImpndCpct ?? '-',
+                altdVl: formattedItem.altdVl ?? item.altdVl ?? '-',
+                wtlvVl: formattedItem.wtlvVl ?? item.wtlvVl ?? '-',
+                exclnWpmpAbltVl: formattedItem.exclnWpmpAbltVl ?? item.exclnWpmpAbltVl ?? '-'
+              };
+            }
+            case 'tb_ms_stofcbr': {
+              // 우수토실
+              return {
+                fcltMngNo: formattedItem.fcltMngNo ?? item.fcltMngNo ?? '-',
+                mapshtNo: formattedItem.mapshtNo ?? item.mapshtNo ?? '-',
+                ctpvNm: ctpvMap.get(ctpvCd) ?? formattedItem.ctpvNm ?? '-',
+                sggNm: sggMap.get(sggCd) ?? formattedItem.sggNm ?? '-',
+                instlYmd: formattedItem.instlYmd ?? item.instlYmd ?? '-',
+                worflwWallHgt: formattedItem.worflwWallHgt ?? item.worflwWallHgt ?? '-',
+                swageMhlMngNo: formattedItem.swageMhlMngNo ?? item.swageMhlMngNo ?? '-',
+                drtnAngl: formattedItem.drtnAngl ?? item.drtnAngl ?? '-'
+              };
+            }
+          }
+        });
+
+        // 선택된 행 데이터를 Excel 다운로드 형식으로 변환
+        const excelData = mappedContent; // 배열로 감싸서 전달
+
+        // 파일명 생성 (분석번호 기반)
+        const label = BASIC_TYPES.find((type) => type.val === basicType)?.text
+        const fileName = `${label} 조회 결과_${todayYear}${todayMonth}${todayDate}`;
+
+        await downloadExcelWithKoreanHeaders({
+          data: excelData as JSON[],
+          fileName: fileName,
+          sheetNameArray: [fileName],
+          headerRange: headerRange,
+          headerMapping: headerMapping
+        });
+        setIsLoading(false);
+      } catch (error) {
+        setIsLoading(false);
+        console.error("Excel 다운로드 중 오류 발생:", error);
+        alert("Excel 다운로드 중 오류가 발생했습니다. 다시 시도해주세요.");
+      }
+    }
+  };
+
+
+  return { fetchBasicFilteredData, handleBasicCellClick, basicExcelDownload };
+};
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/useOperationTab.ts b/apps/sn/app/html/(map-layout)/map/searchModal/useOperationTab.ts
new file mode 100644
index 000000000..669dd4cb5
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/useOperationTab.ts
@@ -0,0 +1,452 @@
+/**
+ * 📄 useOperationTab Hook
+ * 검색 모달 유지관리 정보 탭 훅
+ *
+ * - 필터링된 사업 현황 데이터 조회 및 포맷팅
+ * - 사업 현황 테이블 셀 클릭 시 상세 결과표 조회
+ * - 결과표 셀 클릭 시 지도 피처 선택 및 줌 기능
+ * - 엑셀 다운로드 기능 (사업 현황 및 결과표)
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - Zustand를 통한 상태 관리 및 로딩 처리
+ * - 데이터 매핑 및 코드 변환 (사업 유형, 용도, 재질 등)
+ * 
+ * 🔗 사용 API
+ * - 유지관리 정보 목록 조회: GET /api/v1/bizInfo (sewerage-service)
+ * - 유지관리 정보(사업정보) 관련 시설 목록 조회: GET /api/v1/bizInfo/fclts (sewerage-service)
+ */
+import { downloadExcelWithKoreanHeaders } from '@common/business_components/ui';
+import { MS_SWAGE_PPL_CODES, MS_SWAGE_PPL_USE_CODES } from '../components/common/table';
+import { getData } from "@/components/lib/api";
+import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import { confirmToast } from '@/components/ui/toast'
+import { toast } from "react-hot-toast";
+import useSearchModalStore from '@/store/useSearchModalStore';
+import useStore from '@/store/useStore';
+
+
+export default function useOperationTab() {
+  const OPERATION_TABLE_SIZE = 5;
+
+  const {
+    workType,
+    tableData, detailTableData,
+    curPage, detailCurPage,
+    detailBizId,
+    var1, var2,
+    yearFilter,
+    todayYear, todayMonth, todayDate,
+    setIsSearchModalOpen,
+    setTableData, setDetailTableData,
+    setTableCount, setDetailTableCount,
+    setDetailCurPage,
+    setIsLoading, setIsDetailLoading,
+    setIsResetDetailPage,
+    setIsResetDetailSelection,
+    setDetailBizId,
+    getDateString
+  } = useSearchModalStore();
+  const { BIZ_TY_CD } = useStore();
+
+  const WORK_TYPES = [  // 유지관리 정보 '구분' 선택 목록
+    { val: "['200', '201', '204']", text: "보수 및 갱신" },
+    { val: "['100']", text: "점검 및 진단" },
+    { val: "['203']", text: "청소 및 준설" },
+  ];
+  const OPERATION_TABLE_HEADLIST = [  // 유지관리 정보 - 사업 현황
+    { id: 'rowNumber', title: '일련번호' },
+    { id: "bizInfoNm", title: "사업명" },
+    { id: "flfmtBgngYmd", title: "수행시작일자" },
+    { id: "flfmtEndYmd", title: "수행종료일자" },
+    { id: "flfmtYr", title: "수행년도" },
+    { id: "bizTypeCd", title: "사업유형" },
+    { id: "bizAmt", title: "사업금액" },
+  ];
+  const MAINTENANACE_TABLE_HEADLIST = [ // 유지관리 정보 - 보수 및 갱신 결과표
+    { id: 'rowNumber', title: '일련번호' },
+    { id: "fcltMngNo", title: "관리번호" },
+    { id: "swtrmt_zone_nm", title: "처리구역" },
+    { id: "usgCd", title: "용도" },
+    // { id: "lgalDrblyr", title: "내용연수" },
+    // { id: "acqsPrmpc", title: "취득금액" },
+    { id: "mqltCd", title: "재질" },
+    { id: "pdmtVl", title: "관경(mm)" },
+    { id: "prlgVl", title: "연장(m)" },
+    { id: "instlYmd", title: "설치일자" },
+    // { id: "instlYmd", title: "사업구분" },
+  ];
+  const CLEANING_TABLE_HEADLIST = [  // 유지관리 정보 - 청소 및 준설 결과표
+    { id: 'rowNumber', title: '일련번호' },
+    { id: "fcltMngNo", title: "관리번호" },
+    { id: "swtrmt_zone_nm", title: "처리구역" },
+    { id: "usgCd", title: "용도" },
+    // { id: "lgalDrblyr", title: "내용연수" },
+    // { id: "acqsPrmpc", title: "취득금액" },
+    { id: "mqltCd", title: "재질" },
+    { id: "pdmtVl", title: "관경(mm)" },
+    { id: "prlgVl", title: "연장(m)" },
+    { id: "instlYmd", title: "설치일자" },
+  ];
+  const INSPECTION_TABLE_HEADLIST = [  // 유지관리 정보 - 점검 및 진단 결과표
+    { id: 'rowNumber', title: '일련번호' },
+    { id: "fcltMngNo", title: "관리번호" },
+    { id: "swtrmt_zone_nm", title: "처리구역" },
+    { id: "usgCd", title: "용도" },
+    // { id: "riskEval", title: "위험평가" },
+    // { id: "acqsPrmpc", title: "취득금액" },
+    // { id: "lgalDrblyr", title: "내용연수" },
+    // { id: "remLife", title: "잔존수명" },
+    { id: "mqltCd", title: "재질" },
+    { id: "pdmtVl", title: "관경(mm)" },
+    { id: "prlgVl", title: "연장(m)" },
+    { id: "instlYmd", title: "설치일자" },
+    { id: "strc_stts_grd", title: "구조적 상태등급" },
+    { id: "oper_stts_grd", title: "운영적 상태등급" },
+  ];
+
+  const fetchOperationFilteredData = async () => {
+    const RequestDTO: Record<string, string> = {
+      page: `${curPage - 1}`,
+      size: `${OPERATION_TABLE_SIZE}`,
+    };
+    if (var1) RequestDTO.bizInfoNm = var1;
+    if (var2 != '0' && var2) RequestDTO.bizTypeCd = var2;
+    // 수행기간 범위
+    const startDate = getDateString(
+      yearFilter.start,
+      '',
+      '',
+      "19000101",
+    );
+    const endDate = getDateString(
+      yearFilter.end,
+      '',
+      '',
+      `${todayYear}${todayMonth}${todayDate}`,
+    );
+    RequestDTO.fromflfmtEndYmd = startDate;
+    RequestDTO.toflfmtEndYmd = endDate;
+
+    // JSON.parse 사용으로 문자열 -> 배열 변환
+    RequestDTO.workTypes = JSON.parse(workType.replace(/'/g, '"'));
+
+    const params = new URLSearchParams(RequestDTO).toString();
+
+    const res = await getData(`v1/bizInfo?${params}`);
+
+    const mappedContent = (res.content || []).map((item: any, index: number) => {
+      const formattedItem = formatDisplayData(item);
+      const matched = BIZ_TY_CD.find(code => code.lwpoCd === item.bizTypeCd);
+      return {
+        ...formattedItem,
+        rowNumber: (curPage - 1) * OPERATION_TABLE_SIZE + index + 1, // 1부터 시작하는 일련번호 추가
+        bizTypeCd: matched ? matched.lwpoCdNm : item.bizTypeCd,
+      };
+    });
+
+    setTableData(mappedContent || []);
+    setTableCount(res.totalElements || 0);
+    setDetailTableData([]);
+    setDetailTableCount(0);
+  };
+
+  // 유지관리 정보 테이블 cellClick 핸들러 
+  const handleOperationCellClick = async (index?: number | undefined, headId?: String) => {
+    setIsResetDetailPage(true); // 페이지를 1로 초기화
+    setIsResetDetailSelection(true); // 선택 초기화
+    setIsResetDetailPage(true); // 디테일 페이지를 초기화
+
+    if (typeof index === "number") {
+      setIsDetailLoading(true);
+      setDetailBizId(tableData[index].bizId);
+      setDetailCurPage(1); // 상세 페이지 초기화
+      try {
+        const RequestDTO: Record<string, string> = {
+          page: `${detailCurPage - 1}`,
+          size: `${OPERATION_TABLE_SIZE}`,
+          bizId: tableData[index % OPERATION_TABLE_SIZE].bizId,
+        };
+
+        RequestDTO.workTypes = JSON.parse(workType.replace(/'/g, '"'));
+
+        const res = await getData(`v1/bizInfo/fclts?${new URLSearchParams(RequestDTO).toString()}`);
+
+        const mappedData = (res.data || []).map((item: any, detailIndex: number) => {
+          const formattedItem = formatDisplayData(item);
+
+          const usgCdObj = MS_SWAGE_PPL_USE_CODES.find(code => code.val === item?.usgCd?.trim());
+          const mqltCdObj = MS_SWAGE_PPL_CODES.find(code => code.val === item?.mqltCd?.trim());
+          return {
+            ...formattedItem,
+            rowNumber: (detailCurPage - 1) * OPERATION_TABLE_SIZE + detailIndex + 1,
+            usgCd: usgCdObj ? usgCdObj.text : item.usgCd,
+            mqltCd: mqltCdObj ? mqltCdObj.text : item.mqltCd,
+            swtrmt_zone_nm: item.swtrmt_zone_nm ? item.swtrmt_zone_nm : '-',
+          };
+        });
+
+        setDetailTableData(mappedData);
+        setDetailTableCount(res.count || 0);
+      } catch (error) {
+        console.error('유지관리 정보 cellClick 에러:', error);
+      } finally {
+        setIsDetailLoading(false);
+        setIsResetDetailPage(false);
+        setIsResetDetailSelection(false);
+      }
+    }
+  };
+
+  // 유지관리 정보 디테일 테이블 cellClick 핸들러 
+  const handleOperationResultCellClick = async (index?: number | undefined, headId?: String) => {
+    if (typeof index === "number") {
+      setIsLoading(true);
+
+      const row = detailTableData[index];
+      const layerNm = row.lyrTypeNm;
+      const fid = row.fid;
+      const core = GisApp.Module.layer as any;
+      await core.showSearchResultsFromGeoJSON(layerNm, fid);
+      setIsLoading(false);
+      setIsSearchModalOpen(false); // SearchModal 닫기
+    }
+  };
+
+  // 유지관리 정보 디테일 테이블 페이지네이션 핸들러  
+  const handleOperationPageNation = async (index?: number | undefined) => {
+    if (typeof index === "number") {
+      setIsDetailLoading(true);
+      try {
+        const RequestDTO: Record<string, string> = {
+          page: `${detailCurPage - 1}`,
+          size: `${OPERATION_TABLE_SIZE}`,
+          bizId: String(detailBizId),
+        };
+        const res = await getData(`v1/bizInfo/fclts?${new URLSearchParams(RequestDTO).toString()}`);
+
+        const mappedData = (res.data || []).map((item: any, detailIndex: number) => {
+          const formattedItem = formatDisplayData(item);
+
+          const usgCdObj = MS_SWAGE_PPL_USE_CODES.find(code => code.val === item?.usgCd?.trim());
+          const mqltCdObj = MS_SWAGE_PPL_CODES.find(code => code.val === item?.mqltCd?.trim());
+          return {
+            ...formattedItem,
+            rowNumber: (detailCurPage - 1) * OPERATION_TABLE_SIZE + detailIndex + 1,
+            usgCd: usgCdObj ? usgCdObj.text : item.usgCd,
+            mqltCd: mqltCdObj ? mqltCdObj.text : item.mqltCd,
+            swtrmt_zone_nm: item.swtrmt_zone_nm ? item.swtrmt_zone_nm : '-',
+          };
+        });
+
+        setDetailTableData(mappedData);
+        setDetailTableCount(res.count || 0);
+      } catch (error) {
+        console.error('유지관리 정보 페이지네이션 에러:', error);
+      } finally {
+        setIsDetailLoading(false);
+      }
+    }
+  };
+
+  // 유지관리 정보 Excel 다운로드 핸들러 추가
+  const operationExcelDownload = async () => {
+    if (tableData.length === 0) {
+      alert("다운로드 할 Excel 파일이 없습니다.\n조회 후 다시 시도해주세요.");
+      return;
+    }
+
+    toast.dismiss("global-confirm-toast");
+
+    confirmToast(
+      "파일 다운로드에는 2분 내외의 시간이 소요될 수 있습니다.\n파일 다운로드를 진행하시겠습니까?",
+      onAnalysis ?? (() => { }),
+      "text-xl font-medium text-gray-800"
+    );
+
+    async function onAnalysis() {
+      setIsLoading(true);
+
+      try {
+        const RequestDTO: Record<string, string> = {
+          size: '10000',
+        };
+        if (var1) RequestDTO.bizInfoNm = var1;
+        if (var2 != '0' && var2) RequestDTO.bizTypeCd = var2;
+        // 수행기간 범위
+        const startDate = getDateString(
+          yearFilter.start,
+          '',
+          '',
+          "19000101",
+        );
+        const endDate = getDateString(
+          yearFilter.end,
+          '',
+          '',
+          `${todayYear}${todayMonth}${todayDate}`,
+        );
+        RequestDTO.fromflfmtEndYmd = startDate;
+        RequestDTO.toflfmtEndYmd = endDate;
+
+        // JSON.parse 사용으로 문자열 -> 배열 변환
+        RequestDTO.workTypes = JSON.parse(workType.replace(/'/g, '"'));
+
+        const params = new URLSearchParams(RequestDTO).toString();
+        const res = await getData(`v1/bizInfo?${params}`);
+
+        // 헤더 매핑 정의
+        const headerMapping: { [key: string]: string } = {
+          'bizInfoNm': '사업명',
+          'flfmtBgngYmd': '수행시작일자',
+          'flfmtEndYmd': '수행종료일자',
+          'flfmtYr': '수행년도',
+          'bizTypeCd': '사업유형',
+          'bizAmt': '사업금액(원)',
+        };
+
+        const bizTyCdMap = new Map(BIZ_TY_CD.map(code => [code.lwpoCd, code.lwpoCdNm]));
+
+        const mappedContent = (res.content || []).map((item: any) => {
+          const formattedItem = formatDisplayData(item);
+
+          return {
+            bizInfoNm: formattedItem.bizInfoNm ?? item.bizInfoNm ?? '',
+            flfmtBgngYmd: formattedItem.flfmtBgngYmd ?? item.flfmtBgngYmd ?? '',
+            flfmtEndYmd: formattedItem.flfmtEndYmd ?? item.flfmtEndYmd ?? '',
+            flfmtYr: formattedItem.flfmtYr ?? item.flfmtYr ?? '',
+            bizTypeCd: bizTyCdMap.get(item.bizTypeCd) || item.bizTypeCd || formattedItem.bizTypeCd || '',
+            bizAmt: ((v) => (v === 0 || v === '0') ? '0' : (v ?? ''))(formattedItem.bizAmt ?? item.bizAmt),
+          };
+        });
+
+        // 선택된 행 데이터를 Excel 다운로드 형식으로 변환
+        const excelData = mappedContent; // 배열로 감싸서 전달
+
+        // 파일명 생성 (분석번호 기반)
+        const label = WORK_TYPES.find((type) => type.val === workType)?.text
+        const fileName = `${label} 사업 현황_${todayYear}${todayMonth}${todayDate}`;
+
+        await downloadExcelWithKoreanHeaders({
+          data: excelData as JSON[],
+          fileName: fileName,
+          sheetNameArray: [fileName],
+          headerRange: "A1:F1",
+          headerMapping: headerMapping
+        });
+        setIsLoading(false);
+      } catch (error) {
+        setIsLoading(false);
+        console.error("Excel 다운로드 중 오류 발생:", error);
+        alert("Excel 다운로드 중 오류가 발생했습니다. 다시 시도해주세요.");
+      }
+    }
+  };
+
+  // 유지관리 정보 결과표 Excel 다운로드 핸들러 추가
+  const operationResultExcelDownload = async () => {
+    if (detailTableData.length === 0) {
+      alert("다운로드 할 Excel 파일이 없습니다.\n조회 후 다시 시도해주세요.");
+      return;
+    }
+
+    toast.dismiss("global-confirm-toast");
+
+    confirmToast(
+      "파일 다운로드에는 2분 내외의 시간이 소요될 수 있습니다.\n파일 다운로드를 진행하시겠습니까?",
+      onAnalysis ?? (() => { }),
+      "text-xl font-medium text-gray-800"
+    );
+
+    async function onAnalysis() {
+
+      setIsLoading(true);
+
+      try {
+        const RequestDTO: Record<string, string> = {
+          size: '100',
+          bizId: String(detailBizId),
+        };
+        
+        const res = await getData(`v1/bizInfo/fclts?${new URLSearchParams(RequestDTO).toString()}`);
+        
+        // 헤더 매핑 정의
+        const headerMapping: { [key: string]: string } = {
+          'fcltMngNo': '관리번호',
+          'swtrmt_zone_nm': '처리구역',
+          'usgCd': '용도',
+          'mqltCd': '재질',
+          'pdmtVl': '관경(mm)',
+          'prlgVl': '연장(m)',
+          'instlYmd': '설치일자',
+          'strc_stts_grd': '구조적 상태등급',
+          'oper_stts_grd': '운영적 상태등급',
+        };
+
+        const usgCdMap = new Map(MS_SWAGE_PPL_USE_CODES.map(code => [code.val, code.text]));
+        const mqltCdMap = new Map(MS_SWAGE_PPL_CODES.map(code => [code.val, code.text]));
+
+        // 🎯 단일 반복문으로 최적화 - 각 아이템마다 필요한 필드만 직접 매핑
+        const mappedData = (res.data || []).map((item: any) => {
+          const formattedItem = formatDisplayData(item);
+
+          // trim 한 번만 수행
+          const trimmedUsgCd = item?.usgCd?.trim();
+          const trimmedMqltCd = item?.mqltCd?.trim();
+
+          // zone 값 한 번만 계산
+          const zone = item.swtrmtZoneNm ?? formattedItem.swtrmt_zone_nm ?? item.swtrmt_zone_nm ?? '';
+
+          // 직접 매핑 - 반복문 없이 한 번에 객체 생성
+          return {
+            fcltMngNo: formattedItem.fcltMngNo ?? item.fcltMngNo ?? '',
+            swtrmt_zone_nm: (zone === null || zone === '') ? '-' : zone,
+            usgCd: usgCdMap.get(trimmedUsgCd) || item.usgCd || formattedItem.usgCd || '',
+            mqltCd: mqltCdMap.get(trimmedMqltCd) || item.mqltCd || formattedItem.mqltCd || '',
+            pdmtVl: formattedItem.pdmtVl ?? item.pdmtVl ?? '',
+            prlgVl: formattedItem.prlgVl ?? item.prlgVl ?? '',
+            instlYmd: formattedItem.instlYmd ?? item.instlYmd ?? '',
+            strc_stts_grd: ((v) => (v === 0 || v === '0') ? '0' : (v ?? ''))(formattedItem.strc_stts_grd ?? item.strc_stts_grd),
+            oper_stts_grd: ((v) => (v === 0 || v === '0') ? '0' : (v ?? ''))(formattedItem.oper_stts_grd ?? item.oper_stts_grd),
+          };
+        });
+
+        // 선택된 행 데이터를 Excel 다운로드 형식으로 변환
+        const excelData = mappedData; // 배열로 감싸서 전달
+
+        // 파일명 생성 (분석번호 기반)
+        const label = WORK_TYPES.find((type) => type.val === workType)?.text
+        const fileName = `${label} 결과표_${todayYear}${todayMonth}${todayDate}`;
+
+        await downloadExcelWithKoreanHeaders({
+          data: excelData as JSON[],
+          fileName: fileName,
+          sheetNameArray: [fileName],
+          headerRange: "A1:I1",
+          headerMapping: headerMapping
+        });
+
+        setIsLoading(false);
+      } catch (error) {
+        setIsLoading(false);
+        console.error("Excel 다운로드 중 오류 발생:", error);
+        alert("Excel 다운로드 중 오류가 발생했습니다. 다시 시도해주세요.");
+      }
+    }
+  };
+
+
+  return {
+    WORK_TYPES,
+    OPERATION_TABLE_HEADLIST,
+    MAINTENANACE_TABLE_HEADLIST,
+    CLEANING_TABLE_HEADLIST,
+    INSPECTION_TABLE_HEADLIST,
+    OPERATION_TABLE_SIZE,
+    fetchOperationFilteredData,
+    handleOperationCellClick,
+    handleOperationResultCellClick,
+    handleOperationPageNation,
+    operationExcelDownload,
+    operationResultExcelDownload
+  };
+};
\ No newline at end of file
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/useReportTab.ts b/apps/sn/app/html/(map-layout)/map/searchModal/useReportTab.ts
new file mode 100644
index 000000000..8ffe06de8
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/useReportTab.ts
@@ -0,0 +1,188 @@
+/**
+ * 📄 useReportTab Hook
+ * 검색 모달 보고서 탭 훅
+ *
+ * - 계층적 폴더 구조 평탄화 및 데이터 변환
+ * - 파일 목록 조회 및 페이징 처리
+ * - 파일 다운로드 기능
+ * - 셀 클릭 이벤트 처리
+ * - Zustand를 통한 상태 관리 및 로딩 처리
+ * - 데이터 매핑 및 코드 변환 (시도/시군구, 보고서 유형 등)
+ * 
+ * 🔗 사용 API
+ * - 보고서 파일 조회: GET /api/v1/file (dc-service)
+ * - 파일 다운로드: GET /api/v1/fileDownload (dc-service)
+ */
+import { getDcData } from '@/components/lib/api';
+import { fileDownload } from '@/utils';
+import { useReportTabStore } from '@/store/useReportTabStore';
+import useSearchModalStore from '@/store/useSearchModalStore';
+
+export type Folder = {
+  clsfSystmSn: string;
+  upClsfSystmSn: string;
+  clsfSystmNm: string;
+  children: Folder[];
+};
+export type FlattenedFolder = {
+  [key: string]: string | number | undefined;
+};
+export type SelectDataType = {
+  text: string;
+  val: string;
+  sido?: string; // 시도 코드 (선택 사항)
+}
+export type ReportDataFile = {
+  no: number;
+  fileTitle: string;
+  regDt: string;
+  fileSn: string;
+  filePath: string;
+}
+
+export default function useReportTab() {
+  const REPORT_TYPES = [
+    { val: '0', text: '전체' },
+    { val: '1', text: '보고서' },
+    { val: '2', text: '요약보고서' },
+    { val: '3', text: '부록' },
+    { val: '4', text: '기타' }
+  ];
+
+  const { curPage, setIsLoading } = useSearchModalStore();
+  const { dcFiles: filesOrigin, files, setFiles } = useReportTabStore();
+
+  /**
+   * Flatten a hierarchical folder structure into a flat array.
+   * @param data - The hierarchical folder data to flatten.
+   * @returns An array of flattened folders with their paths and levels.
+   */
+  const flattenFolders = (data: Folder[]): FlattenedFolder[] => {
+    const result: FlattenedFolder[] = [];
+    const exceptNodeNm = ["부분", "통합", "전체"];
+    const addNodeNm = ["보고서", "요약보고서", "부록", "기타"]; // level5
+    const columnNms: { [key: number]: string } = {
+      0: "root", 1: "sido", 2: "sigungu", 3: "approvalYear"
+      , 4: "plantZoneGubun", 5: "reportGubun", 7: "fileName", 8: "regDate"
+    };
+
+    const traverse = (
+      node: Folder,
+      path: { [key: string]: string | number },
+      level: number
+    ) => {
+      const isYear = (value: string): boolean => {
+        return /^[0-9]{4}년$/.test(value);
+      };
+
+      if (level === 2 && isYear(node.clsfSystmNm)) {
+        level++;
+      }
+      if (level === 4 && addNodeNm.includes(node.clsfSystmNm)) {
+        level++; // 레벨을 증가시켜 하위값에 추가되도록 함.
+      }
+
+      const newPath = {
+        ...path,
+        [`${columnNms[level]}`]: node.clsfSystmNm,
+      };
+
+      if (node.children.length === 0) {
+        newPath.no = result.length + 1;
+        newPath.clsfSystmSn = node.clsfSystmSn; // 파일 조회를 위한 고유번호
+        result.push(newPath);
+      } else {
+        if (level === 4) {
+          if (exceptNodeNm.includes(node.clsfSystmNm)) {
+            level--; // 제외할 노드 이름인 경우, 현재의 레벨에 하위값이 써지도록 함.
+          }
+        }
+        node.children.forEach((child) => {
+          traverse(child, newPath, level + 1);
+        });
+      }
+    }
+
+    if (data && data.length > 0 && data[0]?.clsfSystmNm == "기본계획") { // data가 비어있지 않고 children이 있는 경우에만 처리
+      data.forEach((root) => traverse(root, {}, 0));
+    } else {
+      data.forEach((root) => traverse(root, {}, 1));
+    }
+    return result;
+  }
+
+  const getDcFiles = async (clsfSystmSn: string): Promise<ReportDataFile[]> => {
+    if (!clsfSystmSn) {
+      console.error("clsfSystmSn is required to get files.");
+      return [];
+    }
+    const queryString = 'clsfSystmSn=' + clsfSystmSn;
+    const result = await getDcData(`/api/v1/file${queryString ? `?${queryString}` : ''}`);
+    return result;
+  };
+
+  // 파일 이름 추가
+  const addFileName = async (data: FlattenedFolder[]) => {
+    const fileReportData = await Promise.all(
+      data.map(async (item) => {
+        const fileArr: ReportDataFile[] = await getDcFiles(String(item.clsfSystmSn));
+        let result: FlattenedFolder;
+        if (fileArr.length > 0) {
+          const f = fileArr[0];
+          const fCount = fileArr.length;
+          result = { ...item, fileName: f?.fileTitle + " 외 " + fCount + "건", regDate: f?.regDt, fileSn: f?.fileSn, filePath: f?.filePath };
+        } else {
+          result = { ...item, fileName: "", regDate: "", fileSn: "", filePath: "" };
+        }
+        return result;
+      })
+    );
+    return fileReportData;
+  };
+
+  const getDcFileDownload = async (fileSn: string, fileName: string, filePath: string) => {
+    if (filePath === "") {
+      alert(`filePath 정보가 없으므로 다운로드가 불가합니다.\nfilesn: ${fileSn}`);
+      return;
+    }
+    const queryString = 'filePath=' + encodeURIComponent(filePath);
+    const responseBlob = await getDcData(`/api/v1/fileDownload${queryString ? `?${queryString}` : ''}`, "blob");
+    fileDownload(responseBlob, fileName);
+  }
+
+  // 파일 목록 조회
+  const getFiles = async () => {
+    setIsLoading(true); // 로딩 시작
+    try {
+      let data = filesOrigin;
+      data = data?.slice((curPage - 1) * 10, curPage * 10); // paging
+      data = data?.map((item, index) => ({ ...item, no: (curPage - 1) * 10 + index + 1 }));
+      setFiles(data);
+    } catch (error) {
+      console.error("파일 목록 조회 에러:", error);
+    } finally {
+      setIsLoading(false); // 로딩 종료
+    }
+  };
+
+  // cellClick 핸들러
+  const handleCellClick = (index: number | undefined) => {
+    if (typeof index === "number" && files[index]) {
+      const fileName = files[index].fileTitle;
+      const filePath = files[index].filePath;
+      if (files[index].fileSn !== "") {
+        getDcFileDownload(files[index].fileSn, fileName, filePath);
+      }
+    }
+  };
+
+  return {
+    REPORT_TYPES,
+    flattenFolders,
+    addFileName,
+    getDcFiles,
+    getDcFileDownload,
+    getFiles,
+    handleCellClick
+  };
+} 
diff --git a/apps/sn/app/html/(map-layout)/map/searchModal/useSearchModal.ts b/apps/sn/app/html/(map-layout)/map/searchModal/useSearchModal.ts
new file mode 100644
index 000000000..7e4b2c9dd
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/searchModal/useSearchModal.ts
@@ -0,0 +1,161 @@
+/**
+ * 📄 useSearchModal Hook
+ * 검색 모달 훅
+ *
+ * - 탭 기반 검색 인터페이스 관리 (기본정보, 유지관리 정보, 보고서)
+ * - 필터링된 데이터 조회 및 포맷팅
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - 여러 시설 보기 기능
+ * - Zustand를 통한 상태 관리 및 로딩 처리
+ * - 데이터 매핑 및 코드 변환 (사업 유형 등)
+ * 
+ * 🔗 사용 API
+ * - 유지관리 정보 목록 조회: GET /api/v1/bizInfo (sewerage-service)
+ */
+import { getData } from "@/components/lib/api";
+import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
+import useStore from "@/store/useStore";
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import useSearchModalStore from "@/store/useSearchModalStore";
+import useBasicTab from './useBasicTab';
+import useOperationTab from './useOperationTab';
+
+export default function useSearchModal() {
+  const {
+    activeTab, workType,
+    tableData, detailTableData,
+    curPage,
+    var1, var2,
+    yearFilter,
+    todayYear, todayMonth, todayDate,
+    setIsSearchModalOpen,
+    setShowTable,
+    setTableData, setDetailTableData,
+    setTableCount, setDetailTableCount,
+    setCurPage,
+    setIsLoading,
+    setIsResetPage, setIsResetDetailPage,
+    setIsResetSelection, setIsResetDetailSelection,
+    getDateString
+  } = useSearchModalStore();
+  const { fetchBasicFilteredData } = useBasicTab();
+  const { OPERATION_TABLE_SIZE } = useOperationTab();
+  const { BIZ_TY_CD } = useStore();
+
+  const TABS = [
+    { val: "basic", text: "기본 정보" },
+    { val: "operation", text: "유지관리 정보" },
+    { val: "report", text: "하수도 정비 기본계획 보고서" },
+  ];
+
+  // 검색 API 호출 함수
+  const fetchFilteredData = async () => {
+    setIsLoading(true); // 로딩 시작
+    setIsResetSelection(true); // 선택 초기화
+    setIsResetDetailSelection(true); // 선택 초기화
+
+    try {
+      if (activeTab === 'basic') {
+        fetchBasicFilteredData();
+
+      } else if (activeTab === 'operation') {
+        const RequestDTO: Record<string, string> = {
+          page: `${curPage - 1}`,
+          size: `${OPERATION_TABLE_SIZE}`,
+        };
+        if (var1) RequestDTO.bizInfoNm = var1;
+        if (var2 != '0' && var2) RequestDTO.bizTypeCd = var2;
+        // 수행기간 범위
+        const startDate = getDateString(
+          yearFilter.start,
+          '',
+          '',
+          "19000101",
+        );
+        const endDate = getDateString(
+          yearFilter.end,
+          '',
+          '',
+          `${todayYear}${todayMonth}${todayDate}`,
+        );
+        RequestDTO.fromflfmtEndYmd = startDate;
+        RequestDTO.toflfmtEndYmd = endDate;
+
+        // JSON.parse 사용으로 문자열 -> 배열 변환
+        RequestDTO.workTypes = JSON.parse(workType.replace(/'/g, '"'));
+
+        const params = new URLSearchParams(RequestDTO).toString();
+
+        const res = await getData(`v1/bizInfo?${params}`);
+
+        const mappedContent = (res.content || []).map((item: any, index: number) => {
+          const formattedItem = formatDisplayData(item);
+          const matched = BIZ_TY_CD.find(code => code.lwpoCd === item.bizTypeCd);
+          return {
+            ...formattedItem,
+            rowNumber: (curPage - 1) * OPERATION_TABLE_SIZE + index + 1, // 1부터 시작하는 일련번호 추가
+            bizTypeCd: matched ? matched.lwpoCdNm : item.bizTypeCd,
+          };
+        });
+
+        setTableData(mappedContent || []);
+        setTableCount(res.totalElements || 0);
+        setDetailTableData([]);
+        setDetailTableCount(0);
+      }
+
+      setShowTable(true);
+      setIsResetSelection(false);
+    } catch (err) {
+      console.error('API ERROR:', err);
+      setTableData([]);
+      setIsResetSelection(false);
+    } finally {
+      setIsLoading(false); // 로딩 종료
+      setIsResetSelection(false);
+      // setIsResetDetailSelection(false);
+    }
+  };
+
+  // 조회 버튼 클릭 시 1페이지로 이동 및 데이터 초기화
+  const handleSearch = () => {
+    setCurPage(1); // 페이지를 1로 초기화
+    fetchFilteredData();
+    setIsResetPage(true); // 페이지를 초기화
+    setIsResetDetailPage(true); // 디테일 페이지를 초기화
+    setIsResetSelection(false); // 선택 초기화
+    setIsResetDetailSelection(false); // 선택 초기화
+    setShowTable(true);
+  };
+
+  // 여러 시설 보기
+  const viewMultipleFeature = async () => {
+    if (activeTab === 'basic') {
+      if (!(tableData.length === 0)) {
+        setIsLoading(true);
+
+        const row = tableData[0];
+        const layerNm = row.lyrTypeNm;
+        const fids = tableData.map((item) => item.fid);
+        const core = GisApp.Module.layer as any;
+        await core.showMultipleSearchResultsFromGeoJSON(layerNm, fids);
+        setIsLoading(false);
+        setIsSearchModalOpen(false);
+      }
+    } else if (activeTab === 'operation') {
+      if (!(detailTableData.length === 0)) {
+        setIsLoading(true);
+
+        const row = detailTableData[0];
+        const layerNm = row.lyrTypeNm;
+        const fids = detailTableData.map((item) => item.fid);
+        const core = GisApp.Module.layer as any;
+        await core.showMultipleSearchResultsFromGeoJSON(layerNm, fids);
+        setIsLoading(false);
+        setIsSearchModalOpen(false);
+      }
+    }
+  }
+
+  return { TABS, getDateString, handleSearch, viewMultipleFeature, fetchFilteredData };
+};
diff --git a/apps/sn/app/html/(map-layout)/map/waterDepth/waterDepth.tsx b/apps/sn/app/html/(map-layout)/map/waterDepth/waterDepth.tsx
new file mode 100644
index 000000000..4ea769ff7
--- /dev/null
+++ b/apps/sn/app/html/(map-layout)/map/waterDepth/waterDepth.tsx
@@ -0,0 +1,98 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인페이지 내 침수심 범례
+ * 
+ * 📄 WaterDepth Component
+ * 침수심 범례 컴포넌트
+ *
+ * - 침수심 레이어의 범례 표시 및 애니메이션 재생 제어
+ * - 진행률 바를 통한 애니메이션 상태 시각화
+ * - 플레이/일시정지 버튼을 통한 사용자 상호작용
+ * - 범례 항목별 색상과 레이블 표시
+ */
+
+"use client";
+
+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'  // 침수위험지도
+];
+
+interface WaterDepthProps {
+  onClose?: () => void;
+  isPlaying: boolean;
+  setIsPlaying: (isPlaying: boolean) => void;
+  totalSteps?: number;
+  currentStep?: number;
+}
+
+export function WaterDepth({
+  onClose,
+  isPlaying,
+  setIsPlaying,
+  totalSteps = 0,
+  currentStep = 0,
+}: WaterDepthProps) {
+
+  useEffect(() => {
+    if (setIsPlaying) setIsPlaying(isPlaying);
+  }, [isPlaying, setIsPlaying]);
+
+  const handlePlayToggle = () => {
+    setIsPlaying(!isPlaying);
+  };
+
+  // 진행률 계산 (0-100%)
+  const progressPercentage = totalSteps > 0 ? (currentStep / totalSteps) * 100 : 100;
+
+
+  return (
+    <>
+      <div className="bg-white rounded-lg shadow-lg border border-gray-200 w-[160px] px-4 py-3">
+        <div className="flex items-center justify-between mx-2 my-4">
+          <Label className="text-3xl text-gray-900 font-bold">침수심 범례</Label>
+          <button type="button" className="mt-1 ml-2" onClick={handlePlayToggle}>
+            {isPlaying ? (
+              <img src="/images/map/toolbar/pause_button.png" alt="pause" className="w-6 h-6 object-contain" />
+            ) : (
+              <img src="/images/map/toolbar/play_button_arrowhead.png" alt="play" className="w-6 h-6 object-contain" />
+            )}
+          </button>
+        </div>
+        <div className="mb-3">
+          <div className="w-full bg-gray-200 rounded-full h-1">
+            <div
+              className="bg-blue-900 h-1 rounded-full transition-all duration-300 ease-in-out"
+              style={{ width: `${progressPercentage}%` }}
+            />
+          </div>
+        </div>
+        <div className="w-[140px] mx-auto flex flex-col items-center">
+          <div className="bg-blue-900 text-white text-2xl text-center py-1 mb-2 rounded w-full">침 수 심</div>
+          <div className="space-y-1 w-full">
+            <LegendItem color="rgb(255, 255, 127)" label="0.0~0.5m 미만" /> {/* 코드: N330 */}
+            <LegendItem color="rgb(191, 255, 0)" label="0.5~1.0m 미만" /> {/* 코드: N331 */}
+            <LegendItem color="rgb(0, 255, 255)" label="1.0~2.0m 미만" /> {/* 코드: N332 */}
+            <LegendItem color="rgb(191, 127, 255)" label="2.0~5.0m 미만" /> {/* 코드: N333 */}
+            <LegendItem color="rgb(255, 0, 127)" label="5.0m 이상" /> {/* 코드: N334 */}
+          </div>
+          <div className="border-t-2 border-blue-900 mt-1 mx-auto w-full" />
+        </div>
+      </div>
+    </>
+  );
+}
+
+function LegendItem({ color, label }: { color: string; label: string }) {
+  return (
+    <div className="flex items-center gap-2 w-full">
+      <span
+        className="inline-block w-16 h-6"
+        style={{ backgroundColor: color, border: "1px solid #ccc" }}
+      />
+      <span className="text-xl text-gray-900 font-bold">{label}</span>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/sn/app/html/(with-base-layout)/layout.tsx b/apps/sn/app/html/(with-base-layout)/layout.tsx
new file mode 100644
index 000000000..346521d17
--- /dev/null
+++ b/apps/sn/app/html/(with-base-layout)/layout.tsx
@@ -0,0 +1,59 @@
+/**
+ * ➡️ 경로 : I/I분석, 유지관리 정보 모든 페이지
+ * 
+ * 📄 With Base Layout
+ * Next.js App Router (app/) 기반 분석 페이지 기본 레이아웃 컴포넌트
+ *
+ * - 메뉴 클릭 이벤트 처리 및 라우팅
+ * - 현재 메뉴 정보 Zustand를 통한 상태 관리
+ * - 시도/시군구/사업 구분/사업 유형 데이터 초기 로드
+ * - BaseLayout을 통한 공통 레이아웃 적용
+ * - QueryClient를 통한 데이터 캐싱 및 관리
+ * - 경로 변경 시 메뉴 정보 동기화
+ */
+"use client";
+
+import React, { useEffect} from 'react';
+import { usePathname, useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import { BaseLayout } from "@common/components";
+import type { MenuItem } from "@/entities/menu";
+import { useMenuStore } from "@/shared/lib";
+import { PageLayout } from "@/shared/ui/page-layout";
+import useStore from '../store/useStore';
+
+export default function WithBaseLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const queryClient = useQueryClient();
+
+  const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);
+
+  const { fetchCtpv, fetchSgg, fetchBIZ_SE_CD, fetchBIZ_TY_CD } = useStore();
+
+  useEffect(() => {
+    fetchCtpv();
+    fetchSgg();
+    fetchBIZ_SE_CD();
+    fetchBIZ_TY_CD();
+  }, []);
+
+  const handleMenuClick = (item: MenuItem) => {
+    setCurrentMenuInfo(item);
+    router.push(item.urlPath);
+  };
+
+  return (
+    <BaseLayout
+      queryClient={queryClient}
+      currentPath={pathname ?? ""}
+      handleMenuClick={handleMenuClick}
+    >
+      <PageLayout>{children}</PageLayout>
+    </BaseLayout>
+  );
+}
diff --git a/apps/sn/app/html/06. 노후관로관리_시나리오_v1.0.md b/apps/sn/app/html/06. 노후관로관리_시나리오_v1.0.md
new file mode 100644
index 000000000..2e05f8e89
--- /dev/null
+++ b/apps/sn/app/html/06. 노후관로관리_시나리오_v1.0.md	
@@ -0,0 +1,97 @@
+# 노후관로 관리
+
+---
+
+## 화면구성
+### GIS 기본화면
+-노후관로 조건에 맞지 않는 관로를 숨기지 않고, 기존 시설물 레이어는 원래대로 모두 보이게 두고 조건에 맞는 관로만 빨간 강조선을 추가하도록 한다.
+- 좌측 상단 (시설물 레이어 트리 및 목록 아이콘): 시설, 침수위험지도, 지반침하정보(우측에 목록 아이콘), 노후관로(우측에 목록 아이콘)
+- 좌측 하단 (레이어별 설정 항목 및 적용 버튼): 경과년도(년) [ 디폴트 30년 ]
+- 우측 영역(배경 지도 및 시설레이어 표출): 하수관로 중 경과년도가 30년 이상된 관로들을 시각적으로 강조 표시
+
+### 관로정보 상세화면
+- GIS 화면에서 관로 위치 클릭시 우측 정렬로 세로형 영역으로 관로정보 상세화면 팝업
+- 1차년도에서 개발한 관로정보 표출 : 시설관리번호, 기관관리번호, 설치일자, 도엽번호 등 전체 항목 그대로 표출
+
+### 노후관로정보 목록화면 
+- 윈도우형 팝업
+- GIS 기본화면 좌측 상단의 레이어 트리에서 노후관로 목록 아이콘 클릭시 윈도우 팝업으로 가운데 영역으로 노후관로정보 목록화면 팝업
+- 상단 조회조건( 조회조건 영역 ) : 경과년도, 시도, 시군구, 버튼 2개 (조회, 다운로드)
+- 하단 가로형 그리드 (노후관로 현황) : NO, 시설관리번호, 설치일자, 관경(mm), 연장(m), 용도, 재질, 경과년도
+
+---
+
+## 화면동작
+
+### 초기화 및 기본 설정
+
+```구조적표기
+// 화면 로드 시 초기 데이터 및 환경 설정
+ON_LOAD:
+  CALL GIS_지도_레이어_초기화()
+  SET 기본_경과년도 = 20  // 회의록(260311) 반영 디폴트 설정
+  SET 현재_조회_조건 = { "경과년도": 20, "관종": "전체" }
+  
+  // 초기 데이터 로드
+  CALL 노후관로_데이터_조회(현재_조회_조건)
+  CALL 지도_상_노후관로_표출(조회결과)
+```
+
+### 좌측 사이드바 제어 (분석 설정)
+
+```구조적표기
+// 노후관로 조회 조건 변경 및 적용
+IF 노후관로_조회_버튼.CLICK THEN
+  SET 입력_경과년도 = 사이드바.경과년도_INPUT.Value
+  SET 선택_관종 = 사이드바.관종_SELECT.Value
+  
+  // 공간 및 속성 필터링 실행
+  CALL 노후관로_필터링_프로세스(입력_경과년도, 선택_관종)
+  REFRESH_GIS_LAYER(노후관로_레이어)
+  SHOW MESSAGE "설정된 조건으로 노후관로가 필터링되었습니다."
+END IF
+
+// 목록 아이콘 클릭 (모달 호출)
+IF 레이어트리.노후관로_목록아이콘.CLICK THEN
+  DISPLAY 노후관로_목록_모달 = TRUE
+  CALL 노후관로_목록_그리드_로드()
+END IF
+```
+
+#### 노후관로 상세화면 (우측 패널)
+
+```구조적표기
+// 지도 상의 특정 관로 클릭 시
+IF GIS.노후관로_객체.CLICK THEN
+  SET 선택관로_ID = 클릭객체.ID
+  
+  // 상세 속성 정보 조회 및 매핑
+  CALL 관로_상세속성_API_호출(선택관로_ID)
+  SET 우측패널.기본정보 = [관로ID, 시설명, 주소, 관리기관]
+  SET 우측패널.제원정보 = [관경, 연장, 관종, 준공일자, 경과년도]
+  SET 우측패널.상태정보 = [최종조사일, 조사결과등급]
+  
+  DISPLAY 우측_상세_패널 = TRUE
+END IF
+```
+
+#### 노후관로 목록 및 데이터 출력 (모달 윈도우)
+```구조적표기
+// 엑셀 다운로드 (회의록 요구사항 반영)
+IF 모달.다운로드_버튼.CLICK THEN
+  // 엑셀 파일에는 관로의 '모든 기본정보'를 포함
+  SET 다운로드_컬럼 = [관로ID, 주소, 관경, 연장, 관종, 준공일, 경과년도, ...전체필드]
+  CALL 시스템_엑셀_추출_모듈(현재_조회_데이터, 다운로드_컬럼)
+END IF
+
+// 목록 그리드 행 선택 시 로직
+IF 모달.그리드_행.DOUBLE_CLICK THEN
+  SET 좌표 = 현재행.중심좌표
+  CALL GIS_지도_줌인(좌표)
+  CALL 노후관로_상세정보_표출(현재행.ID)
+  CLOSE_MODAL(노후관로_목록_모달)
+END IF
+```
+
+
+
diff --git a/apps/sn/app/html/AGENTS.md b/apps/sn/app/html/AGENTS.md
new file mode 100644
index 000000000..1d79419e2
--- /dev/null
+++ b/apps/sn/app/html/AGENTS.md
@@ -0,0 +1,38 @@
+## html 디렉터리
+
+- 이 디렉터리는 하수관로 운영관리 시스템 `sn` 2차사업 고도화 과정에서 퍼블리싱, 정적 HTML 시안, 로직 검토용 화면을 다루는 영역이다.
+- 작업 시 `apps/sn/app/html` 이외의 수정이 되지 않도록 해야 한다.
+- 추가 `*.md` 파일의 요청대로 만들되 상위 앱 전체를 건드리지 않고 `apps/sn/app/html` 하위에 필요한 파일을 만들어서 처리한다.
+- 기존 `packages/common/components`, `packages/common/business_components`는 활용할 수 있지만, 직접 수정 권한은 상위 `apps/sn/AGENTS.md` 기준을 따른다.
+- 지도/html 시안에서 `<Gis>` 시설물 layer를 다루는 작업은 API 호출 결과 값이 설정된 대로 zoom level에 따라 모두 보이는지 확인한다.
+
+## 2차사업 원칙
+
+- 작업은 리팩토링 전용이 아니라 2차사업 화면 고도화 목적에 맞춰 수행한다.
+- 화면 변경은 요구사항, 화면설계, 기능 명세를 근거로 한다.
+- html 시안 작업과 실제 앱 로직 작업이 함께 필요해 보이면 먼저 구분해서 설명한다.
+
+## Encoding
+
+- UTF-8
+- 한글이 깨지지 않도록 주의할 것
+
+## 주석 comment
+
+- 한글 주석을 삭제하지 말 것
+- 복잡한 화면 흐름이나 데이터 바인딩 로직은 함수/메서드 단위 설명을 충분히 작성할 것
+
+## Monorepo structure
+
+apps/
+  _template
+  as
+  cm
+  cs
+  dc
+  dm
+  dm_new
+  fo
+  sn
+  st
+  wr
diff --git a/apps/sn/app/html/old-pipe-component-sample/index.html b/apps/sn/app/html/old-pipe-component-sample/index.html
new file mode 100644
index 000000000..1eee8ec8b
--- /dev/null
+++ b/apps/sn/app/html/old-pipe-component-sample/index.html
@@ -0,0 +1,1188 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>노후관로관리 실제 화면 기반 샘플</title>
+  <style>
+    /*
+      실제 화면 기준 참조
+      - Layout: packages/common/components/src/ui/layout/nofooter.tsx
+      - Header: packages/common/components/src/ui/header/index.tsx
+      - LNB: packages/common/components/src/ui/lnb/index.tsx
+      - Gis/GisTree: packages/common/business_components/src/ui/map
+      - Detail: apps/sn/app/html/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx
+      - VerticalTable: apps/sn/app/components/ui/verticalTable.tsx
+    */
+
+    :root {
+      --primary: #258eea;
+      --primary-dark: #152346;
+      --download-green: #1fd078;
+      --label-cell: #dbeafe;
+      --header-height: 60px;
+      --lnb-width: 220px;
+      --tree-width: 250px;
+      --detail-width: 350px;
+      --border: #e1e7eb;
+      --table-border: #dbe2e6;
+      --panel-border: #d1d5db;
+      --panel-outline: #bdbdbd;
+      --apply-green: #31a83b;
+      --label: #555;
+      --muted: #777;
+      --map-bg: #eee9d9;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html,
+    body {
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      min-width: 1440px;
+      overflow: hidden;
+      color: #111;
+      font-family: "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
+      font-size: 14px;
+      background: #fff;
+    }
+
+    button,
+    input,
+    select {
+      font: inherit;
+    }
+
+    button {
+      cursor: pointer;
+    }
+
+    .app-shell {
+      height: 100vh;
+      display: grid;
+      grid-template-rows: var(--header-height) 1fr;
+      overflow: hidden;
+    }
+
+    .site-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: var(--header-height);
+      border-bottom: 1px solid var(--border);
+      background: #fff;
+      padding: 0 16px;
+      z-index: 30;
+    }
+
+    .brand-area {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      min-width: 210px;
+    }
+
+    .sidebar-trigger {
+      width: 30px;
+      height: 30px;
+      display: grid;
+      place-items: center;
+      border: 0;
+      background: transparent;
+      color: #111;
+      font-size: 22px;
+      line-height: 1;
+    }
+
+    .logo-block {
+      display: grid;
+      justify-items: center;
+      line-height: 1;
+    }
+
+    .logo-text {
+      font-size: 22px;
+      font-weight: 800;
+      letter-spacing: 1px;
+    }
+
+    .logo-text .blue {
+      color: #2392d0;
+    }
+
+    .logo-text .green {
+      color: #6ac04c;
+    }
+
+    .logo-caption {
+      margin-top: 5px;
+      color: #111;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 4px;
+      white-space: nowrap;
+    }
+
+    .global-nav {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 18px;
+      min-width: 0;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .global-nav a {
+      position: relative;
+      color: #111;
+      text-decoration: none;
+      font-size: 16px;
+      font-weight: 600;
+      letter-spacing: -0.04em;
+    }
+
+    .global-nav a::after {
+      content: "";
+      position: absolute;
+      right: -10px;
+      top: 50%;
+      width: 1px;
+      height: 16px;
+      background: var(--border);
+      transform: translateY(-50%);
+    }
+
+    .global-nav a:last-child::after {
+      display: none;
+    }
+
+    .header-tools {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      min-width: 120px;
+      justify-content: flex-end;
+    }
+
+    .search-circle {
+      width: 32px;
+      height: 32px;
+      border: 0;
+      border-radius: 999px;
+      color: #fff;
+      background: #1598e8;
+      font-size: 18px;
+      font-weight: 700;
+    }
+
+    .user-chip {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      color: #555;
+      font-size: 13px;
+      border: 0;
+      background: transparent;
+    }
+
+    .page-body {
+      min-height: 0;
+      display: flex;
+      overflow: hidden;
+    }
+
+    .lnb {
+      width: var(--lnb-width);
+      flex: 0 0 var(--lnb-width);
+      border-right: 1px solid var(--border);
+      background: #fff;
+      padding-top: 2px;
+    }
+
+    .lnb-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 42px;
+      padding: 0 14px 0 26px;
+      color: #555;
+      text-decoration: none;
+      font-size: 14px;
+      font-weight: 500;
+      border-radius: 5px;
+    }
+
+    .lnb-item.active {
+      color: #258eea;
+      background: #f4f8fc;
+    }
+
+    .lnb-item .arrow {
+      color: #888;
+      font-size: 18px;
+    }
+
+    .content {
+      position: relative;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      background: #f7f7f7;
+    }
+
+    .gis-map {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+      background:
+        radial-gradient(ellipse at 28% 28%, rgba(95, 138, 93, 0.2) 0 19%, transparent 20%),
+        radial-gradient(ellipse at 53% 32%, rgba(226, 218, 166, 0.35) 0 24%, transparent 25%),
+        linear-gradient(104deg, transparent 0 56%, rgba(234, 219, 161, 0.72) 56.1% 58%, transparent 58.1%),
+        linear-gradient(4deg, transparent 0 31%, rgba(234, 219, 161, 0.72) 31.1% 33%, transparent 33.1%),
+        var(--map-bg);
+    }
+
+    .gis-map::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      opacity: 0.45;
+      background-image:
+        repeating-radial-gradient(ellipse at 30% 45%, transparent 0 22px, rgba(158, 151, 111, 0.35) 23px 24px, transparent 25px 42px),
+        repeating-linear-gradient(87deg, transparent 0 110px, rgba(180, 180, 160, 0.35) 111px 112px);
+    }
+
+    .river,
+    .road,
+    .map-line,
+    .pipe-line,
+    .area-polygon {
+      position: absolute;
+      z-index: 1;
+      transform-origin: left center;
+    }
+
+    .river {
+      width: 34px;
+      height: 100%;
+      left: 55%;
+      top: 0;
+      transform: rotate(-16deg);
+      background: rgba(95, 170, 202, 0.28);
+      border-radius: 999px;
+    }
+
+    .road {
+      height: 25px;
+      border: 1px solid rgba(190, 176, 126, 0.65);
+      border-radius: 999px;
+      background: #fff8dc;
+      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.78);
+      z-index: 2;
+    }
+
+    .map-line {
+      height: 2px;
+      border-radius: 999px;
+      z-index: 3;
+    }
+
+    .red-line {
+      background: #ff1b1b;
+    }
+
+    .purple-line {
+      background: #9b35ff;
+    }
+
+    .green-line {
+      background: #65d35f;
+    }
+
+    .pipe-line {
+      height: 4px;
+      border: 0;
+      padding: 0;
+      border-radius: 999px;
+      background: #496179;
+      z-index: 4;
+    }
+
+    .pipe-line.old {
+      height: 6px;
+      background: #e3222b;
+      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.72), 0 0 0 7px rgba(227, 34, 43, 0.22);
+    }
+
+    .pipe-line.selected {
+      height: 8px;
+      box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.95), 0 0 0 10px rgba(37, 142, 234, 0.26);
+    }
+
+    .map-label {
+      position: absolute;
+      z-index: 5;
+      padding: 4px 7px;
+      color: #444;
+      background: rgba(255, 255, 255, 0.78);
+      border: 1px solid #ccd6df;
+      border-radius: 2px;
+      font-size: 12px;
+      font-weight: 500;
+      pointer-events: none;
+    }
+
+    .area-polygon {
+      border: 2px solid #258eea;
+      background: rgba(37, 142, 234, 0.14);
+      clip-path: polygon(8% 9%, 90% 0, 100% 56%, 74% 100%, 12% 78%, 0 38%);
+      z-index: 3;
+    }
+
+    .area-polygon button {
+      width: 100%;
+      height: 100%;
+      border: 0;
+      background: transparent;
+      color: #14466f;
+      font-weight: 700;
+    }
+
+    .top-search {
+      position: absolute;
+      left: calc(var(--tree-width) + 280px);
+      top: 18px;
+      z-index: 20;
+      display: grid;
+      grid-template-columns: 150px 150px 180px 58px;
+      gap: 18px;
+      align-items: center;
+      padding: 10px 12px;
+      border-radius: 4px;
+      background: rgba(255, 255, 255, 0.72);
+      box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
+    }
+
+    .top-search select,
+    .top-search button {
+      height: 30px;
+      border-radius: 3px;
+      border: 1px solid #d7dde3;
+      font-size: 12px;
+    }
+
+    .top-search select {
+      padding: 0 10px;
+      color: #555;
+      background: #fff;
+    }
+
+    .top-search button {
+      border-color: #1a99ee;
+      color: #fff;
+      background: #1598e8;
+      font-weight: 700;
+    }
+
+    .gis-tree {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 40;
+      width: var(--tree-width);
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      border-right: 1px solid var(--panel-border);
+      background: #fff;
+      overflow: hidden;
+      padding: 8px;
+      gap: 12px;
+    }
+
+    .tree-panel {
+      display: flex;
+      min-height: 0;
+      flex-direction: column;
+      border: 1px solid var(--panel-outline);
+      border-radius: 3px;
+      background: #fff;
+      overflow: hidden;
+    }
+
+    .tree-panel.layer-panel {
+      flex: 1 1 auto;
+    }
+
+    .tree-panel.config-panel {
+      flex: 0 0 288px;
+    }
+
+    .tree-panel.collapsed {
+      flex: 0 0 auto;
+    }
+
+    .tree-panel.collapsed .tree-scroll,
+    .tree-panel.collapsed .setting-body {
+      display: none;
+    }
+
+    .panel-title {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 34px;
+      padding: 0 28px;
+      color: #4b5563;
+      border-bottom: 1px solid #eeeeee;
+      background: #fff;
+      font-size: 14px;
+      font-weight: 700;
+      text-align: center;
+    }
+
+    .panel-title .collapse-toggle {
+      position: absolute;
+      left: 8px;
+      top: 50%;
+      width: 18px;
+      height: 18px;
+      border: 0;
+      background: transparent;
+      color: #555;
+      transform: translateY(-50%);
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .gis-tree .tree-scroll {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      padding: 6px 10px 14px;
+    }
+
+    .tree-row {
+      display: flex;
+      align-items: center;
+      min-height: 26px;
+      color: #333;
+      font-size: 13px;
+      white-space: nowrap;
+    }
+
+    .tree-row.depth-1 {
+      padding-left: 18px;
+    }
+
+    .tree-row.depth-2 {
+      padding-left: 34px;
+    }
+
+    .tree-row input {
+      width: 14px;
+      height: 14px;
+      margin: 0 6px 0 0;
+      accent-color: #258eea;
+    }
+
+    .tree-row .twisty {
+      width: 14px;
+      color: #666;
+      font-size: 14px;
+    }
+
+    .tree-row .icon {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      margin-right: 5px;
+      border: 1px solid #999;
+      vertical-align: middle;
+    }
+
+    .tree-row .list-icon {
+      margin-left: 5px;
+      width: 14px;
+      height: 14px;
+      border: 1px solid #999;
+      background:
+        linear-gradient(#777 0 0) 2px 3px / 10px 1px no-repeat,
+        linear-gradient(#777 0 0) 2px 6px / 10px 1px no-repeat,
+        linear-gradient(#777 0 0) 2px 9px / 10px 1px no-repeat,
+        #fff;
+    }
+
+    .tree-toggle {
+      position: absolute;
+      left: var(--tree-width);
+      top: 50%;
+      z-index: 41;
+      width: 24px;
+      height: 36px;
+      border: 1px solid #cfcfcf;
+      background: #fff;
+      color: #555;
+      transform: translateY(-50%);
+      box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+    }
+
+    .setting-body {
+      padding: 8px 12px 10px;
+    }
+
+    .setting-row {
+      display: flex;
+      align-items: center;
+      min-height: 30px;
+      gap: 5px;
+      color: #333;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+
+    .setting-row label {
+      flex: 0 0 auto;
+    }
+
+    .setting-row input {
+      width: 40px;
+      height: 22px;
+      border: 1px solid #ccd6df;
+      padding: 0 4px;
+      color: #333;
+      background: #fff;
+      font-size: 12px;
+      text-align: center;
+    }
+
+    .apply-icon {
+      display: inline-grid;
+      place-items: center;
+      width: 22px;
+      height: 22px;
+      border: 0;
+      border-radius: 50%;
+      background: var(--apply-green);
+      color: #fff;
+      font-size: 15px;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    .field {
+      display: grid;
+      gap: 5px;
+      margin-bottom: 10px;
+    }
+
+    .field span {
+      color: #555;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .field input,
+    .field select {
+      width: 100%;
+      height: 32px;
+      border: 1px solid #ccd6df;
+      border-radius: 2px;
+      padding: 0 9px;
+      color: #333;
+      background: #fff;
+      font-size: 13px;
+    }
+
+    .btn-row {
+      display: flex;
+      justify-content: flex-end;
+      gap: 6px;
+    }
+
+    .btn {
+      height: 32px;
+      min-width: 58px;
+      border: 1px solid #cbd5e1;
+      border-radius: 2px;
+      background: #fff;
+      color: #111;
+      font-weight: 700;
+      font-size: 13px;
+    }
+
+    .btn.primary {
+      border-color: var(--primary);
+      background: var(--primary);
+      color: #fff;
+    }
+
+    .btn.download {
+      border-color: var(--download-green);
+      background: var(--download-green);
+      color: #fff;
+    }
+
+    .detail-popup {
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 50;
+      width: var(--detail-width);
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      border-left: 1px solid var(--panel-border);
+      background: #fff;
+    }
+
+    .detail-header {
+      position: relative;
+      min-height: 70px;
+      padding: 12px 38px 12px 14px;
+      background: var(--primary);
+      color: #fff;
+    }
+
+    .detail-header h3 {
+      margin: 0;
+      font-size: 15px;
+      line-height: 1.45;
+      font-weight: 700;
+    }
+
+    .detail-header .close {
+      position: absolute;
+      right: 11px;
+      top: 18px;
+      border: 0;
+      color: #fff;
+      background: transparent;
+      font-size: 20px;
+    }
+
+    .detail-scroll {
+      flex: 1;
+      overflow-y: auto;
+      padding-bottom: 20px;
+    }
+
+    .card-header {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid var(--border);
+      padding: 12px 14px;
+    }
+
+    .card-header h3 {
+      margin: 0;
+      color: #333;
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    .vertical-card {
+      margin: 16px;
+      padding: 0;
+      overflow: hidden;
+      border: 1px solid var(--table-border);
+      background: #fff;
+    }
+
+    .vertical-table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+
+    .vertical-table th,
+    .vertical-table td {
+      height: 41px;
+      border: 1px solid #e5e7eb;
+      padding: 8px 9px;
+      text-align: center;
+      font-size: 13px;
+      line-height: 1.35;
+    }
+
+    .vertical-table th {
+      width: 130px;
+      background: var(--label-cell);
+      color: #111827;
+      font-weight: 700;
+    }
+
+    .vertical-table td {
+      color: #111;
+      background: #fff;
+      font-weight: 500;
+      word-break: keep-all;
+    }
+
+    .list-modal {
+      position: fixed;
+      inset: 0;
+      z-index: 100;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.34);
+    }
+
+    .list-modal.on {
+      display: flex;
+    }
+
+    .modal-body {
+      width: 1040px;
+      max-height: 78vh;
+      display: grid;
+      grid-template-rows: auto auto 1fr auto;
+      overflow: hidden;
+      background: #fff;
+      border: 1px solid var(--table-border);
+      box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
+    }
+
+    .modal-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: var(--primary);
+      color: #fff;
+    }
+
+    .modal-title h2 {
+      margin: 0;
+      font-size: 16px;
+    }
+
+    .modal-title button {
+      border: 0;
+      background: transparent;
+      color: #fff;
+      font-size: 18px;
+    }
+
+    .modal-search {
+      display: grid;
+      grid-template-columns: 120px 160px 160px 1fr;
+      gap: 10px;
+      align-items: end;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border);
+      background: #f8fafc;
+    }
+
+    .ui-table-wrap {
+      overflow: auto;
+      padding: 12px;
+    }
+
+    .ui-table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+
+    .ui-table th,
+    .ui-table td {
+      height: 38px;
+      border: 1px solid var(--table-border);
+      padding: 8px;
+      text-align: center;
+      font-size: 13px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .ui-table th {
+      background: #eaf3fb;
+      color: #647784;
+      font-weight: 700;
+    }
+
+    .ui-table tbody tr:hover {
+      background: #edf4fb;
+      font-weight: 700;
+    }
+
+    .modal-footer {
+      padding: 10px 16px;
+      color: #666;
+      border-top: 1px solid var(--border);
+      font-size: 12px;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .toast {
+      position: fixed;
+      right: 24px;
+      bottom: 24px;
+      z-index: 120;
+      display: none;
+      max-width: 420px;
+      padding: 12px 14px;
+      color: #fff;
+      background: var(--primary-dark);
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+      font-weight: 700;
+    }
+
+    .toast.on {
+      display: block;
+    }
+
+    .hidden {
+      display: none !important;
+    }
+  </style>
+</head>
+<body>
+  <div class="app-shell">
+    <header class="site-header">
+      <div class="brand-area">
+        <button class="sidebar-trigger" type="button" title="메뉴">▯</button>
+        <div class="logo-block">
+          <div class="logo-text"><span class="blue">HASU</span><span class="green">ON</span></div>
+          <div class="logo-caption">디지털하수관로 시스템</div>
+        </div>
+      </div>
+      <nav class="global-nav" aria-label="상단 시스템 메뉴">
+        <a href="#">유역하수도포털</a>
+        <a href="#">통합플랫폼관리시스템</a>
+        <a href="#">디지털자기고 관리 시스템</a>
+        <a href="#">물재이용 대민사이트</a>
+        <a href="#">물재이용 대민</a>
+        <a href="#">하수처리시설 운영실태 분석 시스템</a>
+        <a href="#">디지털하수관로시스템</a>
+        <a href="#">하수도 통계 시스템</a>
+      </nav>
+      <div class="header-tools">
+        <button class="search-circle" type="button" title="검색">⌕</button>
+        <button class="user-chip" type="button">● 관리자⌄</button>
+      </div>
+    </header>
+
+    <div class="page-body">
+      <aside class="lnb" aria-label="좌측 메뉴">
+        <a class="lnb-item active" href="#">하수관망도</a>
+        <a class="lnb-item" href="#">I/I 분석 <span class="arrow">›</span></a>
+        <a class="lnb-item" href="#">운영정보 <span class="arrow">›</span></a>
+      </aside>
+
+      <main class="content">
+        <section class="gis-map" aria-label="GIS 지도">
+          <div class="river"></div>
+          <div class="road" style="left:20%;top:31%;width:66%;transform:rotate(3deg)"></div>
+          <div class="road" style="left:38%;top:57%;width:68%;transform:rotate(-18deg)"></div>
+          <div class="road" style="left:62%;top:8%;width:54%;transform:rotate(94deg)"></div>
+
+          <span class="map-label" style="left:46%;top:17%">하수처리시설</span>
+          <span class="map-label" style="left:55%;top:49%">왕숙천</span>
+          <span class="map-label" style="left:26%;top:24%">진건로</span>
+
+          <div class="map-line red-line" style="left:58%;top:12%;width:18%;transform:rotate(104deg)"></div>
+          <div class="map-line red-line" style="left:70%;top:20%;width:21%;transform:rotate(-18deg)"></div>
+          <div class="map-line purple-line" style="left:57%;top:74%;width:30%;transform:rotate(-33deg)"></div>
+          <div class="map-line green-line" style="left:56%;top:26%;width:18%;transform:rotate(-64deg)"></div>
+
+          <button class="pipe-line old selected" data-pipe="PPL-001" style="left:25%;top:31%;width:30%;transform:rotate(-14deg)" title="41360-PPL-0001"></button>
+          <button class="pipe-line" data-pipe="PPL-002" style="left:34%;top:49%;width:31%;transform:rotate(23deg)" title="41360-PPL-0002"></button>
+          <button class="pipe-line" data-pipe="PPL-003" style="left:59%;top:50%;width:28%;transform:rotate(-31deg)" title="11680-PPL-0142"></button>
+          <button class="pipe-line old" data-pipe="PPL-004" style="left:49%;top:64%;width:43%;transform:rotate(12deg)" title="11710-PPL-0209"></button>
+
+          <div class="area-polygon hidden" style="left:48%;top:23%;width:18%;height:22%">
+            <button type="button" data-area="AREA-001">진건처리구역</button>
+          </div>
+          <div class="area-polygon hidden" style="left:68%;top:48%;width:22%;height:25%">
+            <button type="button" data-area="AREA-002">송파처리구역</button>
+          </div>
+        </section>
+
+        <form class="top-search">
+          <select aria-label="시도"><option>시도</option><option>경기도</option></select>
+          <select aria-label="시군구"><option>시군구</option><option>용인시</option><option>남양주시</option></select>
+          <select aria-label="시설"><option>하수처리시설</option><option>하수관로</option></select>
+          <button type="button">조회</button>
+        </form>
+
+        <aside class="gis-tree" aria-label="시설물 레이어 트리">
+          <section id="layerPanel" class="tree-panel layer-panel">
+            <div class="panel-title">
+              <button class="collapse-toggle" type="button" data-target="layerPanel">⌄</button>
+              <span>시설물</span>
+            </div>
+            <div id="manageTree" class="tree-scroll">
+              <div class="tree-row"><span class="twisty">›</span><input type="checkbox" /><span>시설</span></div>
+              <div class="tree-row"><span class="twisty">›</span><input type="checkbox" checked /><span>침수위험지도(중점관리지역)</span></div>
+              <div class="tree-row"><span class="twisty">›</span><input type="checkbox" /><span>도시침수지도(정보제공포털)</span></div>
+              <div class="tree-row"><span class="twisty"></span><input type="checkbox" /><span>지반침하정보</span><button id="groundListIcon" class="list-icon" type="button" title="목록"></button></div>
+              <div class="tree-row"><span class="twisty"></span><input id="oldPipeLayer" type="checkbox" checked /><span>노후관로</span><button id="openListByTree" class="list-icon" type="button" title="목록"></button></div>
+            </div>
+
+            <div id="analysisTree" class="tree-scroll hidden">
+              <div class="tree-row"><span class="twisty">⌄</span><input type="checkbox" checked /><span>하수관로</span></div>
+              <div class="tree-row depth-1"><span class="twisty"></span><input type="checkbox" checked /><span>합류관</span></div>
+              <div class="tree-row depth-1"><span class="twisty"></span><input type="checkbox" checked /><span>우수관</span></div>
+              <div class="tree-row depth-1"><span class="twisty"></span><input type="checkbox" checked /><span>오수관</span></div>
+              <div class="tree-row"><span class="twisty"></span><input type="checkbox" checked /><span>하수처리구역</span></div>
+              <div class="tree-row"><span class="twisty"></span><input type="checkbox" /><span>노후관로</span><button id="openListByAnalysisTree" class="list-icon" type="button" title="목록"></button></div>
+            </div>
+          </section>
+
+          <section id="oldFilter" class="tree-panel config-panel">
+            <div class="panel-title">
+              <button class="collapse-toggle" type="button" data-target="oldFilter">⌄</button>
+              <span>지반침하정보</span>
+            </div>
+            <div class="setting-body">
+              <div class="setting-row">
+                <label for="ageInput">경과년도(년)</label>
+                <input id="ageInput" value="30" inputmode="numeric" />
+                <button id="applyAgeButton" class="apply-icon" type="button" title="적용">✓</button>
+              </div>
+            </div>
+          </section>
+        </aside>
+        <button class="tree-toggle" type="button">‹</button>
+
+        <aside class="detail-popup">
+          <header class="detail-header">
+            <h3 id="detailTitle">하수관로 정보 <br />관리번호 : 41360-PPL-0001</h3>
+            <button class="close" type="button">×</button>
+          </header>
+          <div class="detail-scroll">
+            <div class="card-header"><h3 id="detailSectionTitle">기본정보</h3></div>
+            <div class="vertical-card">
+              <table class="vertical-table"><tbody id="detailTable"></tbody></table>
+            </div>
+          </div>
+        </aside>
+      </main>
+    </div>
+  </div>
+
+  <div id="listModal" class="list-modal">
+    <section class="modal-body">
+      <header class="modal-title">
+        <h2>노후관로 현황</h2>
+        <button id="closeListModal" type="button">×</button>
+      </header>
+      <div class="modal-search">
+        <label class="field"><span>경과년도</span><input id="modalAge" value="20" /></label>
+        <label class="field"><span>시도</span><select id="modalSido"><option>전체</option><option>경기도</option><option>서울특별시</option></select></label>
+        <label class="field"><span>시군구</span><select id="modalSigungu"><option>전체</option><option>용인시</option><option>남양주시</option><option>송파구</option></select></label>
+        <div class="btn-row">
+          <button id="searchRows" class="btn primary" type="button">조회</button>
+          <button id="downloadRows" class="btn download" type="button">다운로드</button>
+        </div>
+      </div>
+      <div class="ui-table-wrap">
+        <table class="ui-table">
+          <thead><tr><th>NO</th><th>시설관리번호</th><th>설치일자</th><th>관경(mm)</th><th>연장(m)</th><th>용도</th><th>재질</th><th>경과년도</th></tr></thead>
+          <tbody id="gridBody"></tbody>
+        </table>
+      </div>
+      <footer class="modal-footer">
+        <span id="gridCount">조회 결과 0건</span>
+        <span>행 더블클릭 시 기존 `onFeatureSelect` 흐름으로 지도 이동 + 상세 표출</span>
+      </footer>
+    </section>
+  </div>
+
+  <div id="toast" class="toast"></div>
+
+  <script>
+    const currentYear = 2026;
+    let screen = "manage";
+    let threshold = 20;
+
+    const pipes = [
+      { id: "PPL-001", fcltMngNo: "41360-PPL-0001", instMngNo: "41360PB005R-01", instlYmd: "1998-12-15", mapshtNo: "NJ52-9-12-034", pdmtVl: "450 mm", prlgVl: "132.5 m", usgCd: "합류관", mqltCd: "철근콘크리트관(RC)", avgGrdn: "2.1", drtwMltvArea: "2,140", sido: "경기도", sigungu: "남양주시", areaId: "AREA-001" },
+      { id: "PPL-002", fcltMngNo: "41360-PPL-0002", instMngNo: "41360PB005R-02", instlYmd: "1987-06-03", mapshtNo: "NJ52-9-12-035", pdmtVl: "600 mm", prlgVl: "215.8 m", usgCd: "오수관", mqltCd: "흄관(HP)", avgGrdn: "1.8", drtwMltvArea: "3,560", sido: "경기도", sigungu: "남양주시", areaId: "AREA-001" },
+      { id: "PPL-003", fcltMngNo: "11680-PPL-0142", instMngNo: "11680GN-0142", instlYmd: "2004-04-21", mapshtNo: "NJ52-5-07-110", pdmtVl: "300 mm", prlgVl: "88.4 m", usgCd: "우수관", mqltCd: "염화비닐관(PVC)", avgGrdn: "3.2", drtwMltvArea: "-", sido: "서울특별시", sigungu: "강남구", areaId: "AREA-002" },
+      { id: "PPL-004", fcltMngNo: "11710-PPL-0209", instMngNo: "11710SP-0209", instlYmd: "1974-10-11", mapshtNo: "NJ52-5-07-114", pdmtVl: "800 mm", prlgVl: "310.2 m", usgCd: "합류관", mqltCd: "주철관(CIP)", avgGrdn: "1.2", drtwMltvArea: "5,210", sido: "서울특별시", sigungu: "송파구", areaId: "AREA-002" }
+    ];
+
+    const areas = {
+      "AREA-001": { name: "진건처리구역", manageNo: "41360PB005R", sido: "경기도", sigungu: "남양주시", plant: "진건" },
+      "AREA-002": { name: "송파처리구역", manageNo: "11710SP001R", sido: "서울특별시", sigungu: "송파구", plant: "탄천" }
+    };
+
+    const $ = (id) => document.getElementById(id);
+    const ageOf = (pipe) => currentYear - Number(pipe.instlYmd.slice(0, 4));
+
+    function row(label, value) {
+      return `<tr><th>${label}</th><td>${value}</td></tr>`;
+    }
+
+    function renderPipeDetail(pipeId) {
+      const pipe = pipes.find((item) => item.id === pipeId);
+      if (!pipe) return;
+      document.querySelectorAll(".pipe-line").forEach((line) => line.classList.toggle("selected", line.dataset.pipe === pipeId));
+      $("detailTitle").innerHTML = `하수관로 정보 <br />관리번호 : ${pipe.fcltMngNo}`;
+      $("detailSectionTitle").textContent = "기본정보";
+      $("detailTable").innerHTML = [
+        row("시설관리번호", pipe.fcltMngNo),
+        row("기관관리번호", pipe.instMngNo),
+        row("설치일자", pipe.instlYmd),
+        row("도엽번호", pipe.mapshtNo),
+        row("관경(mm)", pipe.pdmtVl),
+        row("연장(m)", pipe.prlgVl),
+        row("용도", pipe.usgCd),
+        row("재질", pipe.mqltCd),
+        row("평균구배(‰)", pipe.avgGrdn),
+        row("오수배수면적(㎡)", pipe.drtwMltvArea),
+        row("경과년도", `${ageOf(pipe)}년`)
+      ].join("");
+    }
+
+    function renderAreaDetail(areaId) {
+      const area = areas[areaId];
+      const areaPipes = pipes.filter((pipe) => pipe.areaId === areaId);
+      const ages = areaPipes.map(ageOf);
+      const group = (use, mode) => {
+        const values = areaPipes.filter((pipe) => pipe.usgCd === use).map(ageOf);
+        if (!values.length) return "-";
+        if (mode === "avg") return (values.reduce((sum, value) => sum + value, 0) / values.length).toFixed(1);
+        if (mode === "max") return Math.max(...values);
+        return Math.min(...values);
+      };
+      document.querySelectorAll(".area-polygon").forEach((item) => item.classList.toggle("selected", item.querySelector("button").dataset.area === areaId));
+      $("detailTitle").innerHTML = `하수처리구역 정보 <br />관리번호 : ${area.manageNo}`;
+      $("detailSectionTitle").textContent = "기본정보";
+      $("detailTable").innerHTML = [
+        row("하수처리구역명", area.name),
+        row("시도명", area.sido),
+        row("시군구명", area.sigungu),
+        row("하수처리시설명", area.plant),
+        row("평균 매설년도", `전체 ${((ages.reduce((sum, value) => sum + value, 0) / ages.length)).toFixed(1)} / 합류 ${group("합류관", "avg")} / 우수 ${group("우수관", "avg")} / 오수 ${group("오수관", "avg")}`),
+        row("최장 매설년도", `전체 ${Math.max(...ages)} / 합류 ${group("합류관", "max")} / 우수 ${group("우수관", "max")} / 오수 ${group("오수관", "max")}`),
+        row("최신 매설년도", `전체 ${Math.min(...ages)} / 합류 ${group("합류관", "min")} / 우수 ${group("우수관", "min")} / 오수 ${group("오수관", "min")}`),
+        row("보수이력", "<button class='btn primary' type='button'>조회</button>")
+      ].join("");
+    }
+
+    function rowsByFilter() {
+      const age = Number($("modalAge").value);
+      const sido = $("modalSido").value;
+      const sigungu = $("modalSigungu").value;
+      return pipes
+        .filter((pipe) => ageOf(pipe) >= age)
+        .filter((pipe) => sido === "전체" || pipe.sido === sido)
+        .filter((pipe) => sigungu === "전체" || pipe.sigungu === sigungu)
+        .sort((a, b) => ageOf(b) - ageOf(a));
+    }
+
+    function renderGrid() {
+      const age = Number($("modalAge").value);
+      if (!Number.isInteger(age) || age < 1 || age > 100) {
+        toast("경과년도는 1년~100년 범위 내에서 입력해주세요.");
+        return;
+      }
+      const rows = rowsByFilter();
+      $("gridCount").textContent = `조회 결과 ${rows.length.toLocaleString("ko-KR")}건`;
+      $("gridBody").innerHTML = rows.map((pipe, index) => `
+        <tr data-pipe="${pipe.id}">
+          <td>${index + 1}</td>
+          <td>${pipe.fcltMngNo}</td>
+          <td>${pipe.instlYmd}</td>
+          <td>${pipe.pdmtVl.replace(" mm", "")}</td>
+          <td>${pipe.prlgVl.replace(" m", "")}</td>
+          <td>${pipe.usgCd}</td>
+          <td>${pipe.mqltCd}</td>
+          <td>${ageOf(pipe)}</td>
+        </tr>
+      `).join("");
+      document.querySelectorAll("#gridBody tr").forEach((tr) => {
+        tr.addEventListener("dblclick", () => {
+          renderPipeDetail(tr.dataset.pipe);
+          $("listModal").classList.remove("on");
+          toast("선택 관로로 지도 이동 후 상세정보를 표시했습니다.");
+        });
+      });
+    }
+
+    function openList() {
+      $("modalAge").value = String(threshold);
+      $("modalSido").value = "전체";
+      $("modalSigungu").value = "전체";
+      renderGrid();
+      $("listModal").classList.add("on");
+    }
+
+    function toast(message) {
+      const target = $("toast");
+      target.textContent = message;
+      target.classList.add("on");
+      clearTimeout(toast.timer);
+      toast.timer = setTimeout(() => target.classList.remove("on"), 2400);
+    }
+
+    function setScreen(next) {
+      screen = next;
+      const isAnalysis = screen === "analysis";
+      $("manageTree").classList.toggle("hidden", isAnalysis);
+      $("analysisTree").classList.toggle("hidden", !isAnalysis);
+      $("oldFilter").classList.toggle("hidden", isAnalysis);
+      document.querySelectorAll(".area-polygon").forEach((item) => item.classList.toggle("hidden", !isAnalysis));
+      if (isAnalysis) renderAreaDetail("AREA-001");
+      else renderPipeDetail("PPL-001");
+    }
+
+    document.querySelectorAll(".pipe-line").forEach((line) => line.addEventListener("click", () => renderPipeDetail(line.dataset.pipe)));
+    document.querySelectorAll(".area-polygon button").forEach((button) => button.addEventListener("click", () => renderAreaDetail(button.dataset.area)));
+    $("applyAgeButton").addEventListener("click", () => {
+      const age = Number($("ageInput").value);
+      if (!Number.isInteger(age) || age < 1 || age > 100) {
+        toast("경과년도는 1년~100년 범위 내에서 입력해주세요.");
+        return;
+      }
+      threshold = age;
+      document.querySelectorAll(".pipe-line").forEach((line) => {
+        const pipe = pipes.find((item) => item.id === line.dataset.pipe);
+        line.classList.toggle("old", ageOf(pipe) >= threshold);
+      });
+      toast(`기준 ${threshold}년 이상 노후관로를 지도에 반영했습니다.`);
+    });
+    $("openListByTree").addEventListener("click", openList);
+    $("openListByAnalysisTree").addEventListener("click", openList);
+    $("groundListIcon").addEventListener("click", () => toast("지반침하정보 목록 아이콘 클릭 샘플입니다."));
+    $("closeListModal").addEventListener("click", () => $("listModal").classList.remove("on"));
+    $("searchRows").addEventListener("click", renderGrid);
+    $("downloadRows").addEventListener("click", () => toast("실제 구현 시 downloadExcelWithKoreanHeaders를 호출합니다."));
+    $("listModal").addEventListener("click", (event) => {
+      if (event.target === $("listModal")) $("listModal").classList.remove("on");
+    });
+
+    // 샘플 전환용: 실제 앱에서는 라우팅 메뉴로 분리된다.
+    window.showAgedPipeManage = () => setScreen("manage");
+    window.showAgedPipeAnalysis = () => setScreen("analysis");
+
+    document.querySelectorAll(".collapse-toggle").forEach((button) => {
+      button.addEventListener("click", () => {
+        const panel = $(button.dataset.target);
+        const collapsed = panel.classList.toggle("collapsed");
+        button.textContent = collapsed ? "›" : "⌄";
+      });
+    });
+
+    setScreen("manage");
+  </script>
+</body>
+</html>
diff --git a/apps/sn/app/layout.tsx b/apps/sn/app/layout.tsx
index 9363fe185..b8b4897c8 100644
--- a/apps/sn/app/layout.tsx
+++ b/apps/sn/app/layout.tsx
@@ -12,7 +12,11 @@
  * - 앱 전체의 공통 스타일 및 스크립트 적용
  */
 import type { Metadata } from "next";
-import { App } from "@/app";
+import "@fontsource-variable/noto-sans-kr";
+import { cookies } from "next/headers";
+import { AppProvider } from "./providers";
+import "../src/app/styles/base.css";
+import "../src/app/styles/components.css";
 
 export const metadata: Metadata = {
   title: "디지털 하수관로",
@@ -24,4 +28,16 @@ export const metadata: Metadata = {
   }
 };
 
-export default App;
\ No newline at end of file
+export default async function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  const theme = (await cookies()).get("site-theme-key");
+
+  return (
+    <html lang="ko" data-theme={theme?.value}>
+      <body>
+        <AppProvider>{children}</AppProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/sn/app/page.tsx b/apps/sn/app/page.tsx
index 2a1db71d8..b02c4bdca 100644
--- a/apps/sn/app/page.tsx
+++ b/apps/sn/app/page.tsx
@@ -6,7 +6,7 @@
  *
  * - 쿠키 기반 인증 토큰 검증 및 자동 로그인 처리
  * - 로그인 성공 시 지도 페이지로 리다이렉트
- * - 기존 토큰 존재 시 바로 지도 페이지 이동
+ * - 개발 환경에서는 루트 진입 시 자동 로그인 후 지도 페이지 이동
  * - 로그인 실패 시 에러 로깅 및 처리
  * - 사용자 세션 관리 및 초기 라우팅 제어
  * - Next.js useRouter를 통한 클라이언트 사이드 라우팅
@@ -17,28 +17,34 @@
 "use client";
 import { LoginApi } from "@/entities/auth";
 import { useEffect } from "react";
-import { getCookie } from "@/shared/lib";
-import { AUTH_USER_ID } from "@/shared/config";
+
+const DEV_HOSTNAMES = new Set(["localhost", "127.0.0.1", "con.mind-one.co.kr"]);
+
+const DEV_LOGIN_PAYLOAD = {
+  userId: process.env.NEXT_PUBLIC_DEV_LOGIN_USER_ID || "CLEANWATER",
+  password: process.env.NEXT_PUBLIC_DEV_LOGIN_PASSWORD || "gktneh12!@",
+};
 
 export default function Home() {
-  const checkToken = getCookie(AUTH_USER_ID);
-
   useEffect(() => {
-
     const hostname = window.location.hostname;
+    const isDevHost = DEV_HOSTNAMES.has(hostname);
 
-    if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "con.mind-one.co.kr") {
-      if (!checkToken) {
-        async function doLogin() {
-          try {
-            await LoginApi.login({ userId: "CLEANWATER", password: "gktneh12!@" });
-            window.location.href = "/map";
-          } catch (err) {
-            console.error("로그인 실패", err);
-          }
-        }
-        doLogin();
-      } else window.location.href = "/map";
-    } else window.location.href = "/map";
+    if (!isDevHost) {
+      window.location.replace("/map");
+      return;
+    }
+
+    async function doLogin() {
+      try {
+        // 개발 환경에서는 남아 있는 만료/부분 쿠키로 인한 /map <-> / 루프를 막기 위해 항상 토큰을 재발급한다.
+        await LoginApi.login(DEV_LOGIN_PAYLOAD);
+        window.location.replace("/map");
+      } catch (err) {
+        console.error("로그인 실패", err);
+      }
+    }
+
+    void doLogin();
   }, []);
 }
diff --git a/apps/sn/app/providers.tsx b/apps/sn/app/providers.tsx
new file mode 100644
index 000000000..4bbe9f864
--- /dev/null
+++ b/apps/sn/app/providers.tsx
@@ -0,0 +1 @@
+export { AppProvider } from "../src/app/providers";
diff --git a/apps/sn/app/store/index.ts b/apps/sn/app/store/index.ts
index 91577ae1a..7d761f91a 100644
--- a/apps/sn/app/store/index.ts
+++ b/apps/sn/app/store/index.ts
@@ -33,8 +33,8 @@ export const fetchCtpv = async (set: (state: any) => void) => {
 
   const list = res.features
     .map((f: any) => ({
-      text: f.properties.mctpv_korn_nm,
-      val: f.properties.mctpv_cd,
+      text: String(f.properties.mctpv_korn_nm ?? "").trim(),
+      val: String(f.properties.mctpv_cd ?? "").trim(),
     }))
     .sort((a:any, b:any) => {
       // 커스텀 순서 정의
@@ -83,8 +83,8 @@ export const fetchSgg = async (set: (state: any) => void) => {
 
   const list = res.features
     .map((f: any) => ({
-      text: f.properties.sgg_korn_nm,
-      val: f.properties.sgg_cd,
+      text: String(f.properties.sgg_korn_nm ?? "").trim(),
+      val: String(f.properties.sgg_cd ?? "").trim(),
     }))
     .sort((a:any, b:any) => a.text.localeCompare(b.text, 'ko'));
 
diff --git a/apps/sn/docs/기준문서/001-프로젝트.md b/apps/sn/docs/기준문서/001-프로젝트.md
new file mode 100644
index 000000000..3b076b4c9
--- /dev/null
+++ b/apps/sn/docs/기준문서/001-프로젝트.md
@@ -0,0 +1,29 @@
+# 프로젝트 기준
+
+## 프로젝트 식별
+- 확인됨: 프론트엔드 저장소는 pnpm workspace와 Turborepo 기반 모노레포이다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 하수관로 운영관리 시스템 프론트엔드 작업 대상 앱은 `apps/sn`이다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 직접 수정 가능한 공통 패키지는 `packages/common/business_components`이다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 백엔드 기준 프로젝트는 `sewerage-service`이다. 근거: `apps/sn/AGENTS.md`
+
+## 작업 목적
+- 확인됨: 현재 목적은 리팩토링 전용이 아니라 하수관로 운영관리 시스템 2차사업 고도화 개발이다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 기존 `sn` 화면의 안정성을 유지하면서 2차 요구사항에 맞는 화면 개발, 기능 확장, 백엔드 연동 보완을 수행한다. 근거: `apps/sn/AGENTS.md`
+
+## 직접 수정 허용 범위
+- 확인됨: `apps/sn/**`은 직접 수정 가능하다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: `packages/common/business_components/**`은 직접 수정 가능하다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 위 두 경로 밖은 기본적으로 읽기 전용이며, 수정 필요성이 있으면 먼저 문제 원인과 영향 범위를 문서화한다. 근거: `apps/sn/AGENTS.md`
+
+## 문서 기준
+- 확인됨: `sn` 관련 2차사업 작업 문서는 `apps/sn/docs/` 바로 아래 주제별 한글 폴더로 관리한다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 프론트 작업카드는 `apps/sn/docs/작업계획/작업카드-템플릿.md`를 기준으로 기능 폴더 아래에 작성한다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: `phase2` 같은 별도 단계 폴더는 신규 문서 경로로 사용하지 않는다. 근거: `apps/sn/AGENTS.md`
+- 추정: 백엔드와 함께 진행되는 기능은 백엔드 `docs/작업계획/작업카드-템플릿.md`와 프론트 `apps/sn/docs/작업계획/작업카드-템플릿.md`를 각각 기능 폴더 아래에서 서로 참조하는 방식이 안전하다. 근거: `apps/sn/AGENTS.md`, 백엔드 `AGENTS.md`
+
+## 공통 동기화 기준
+- 새 채팅방에서 프론트 작업을 시작할 때는 아래 문서를 먼저 확인한다.
+  - `COMMON_DOCS_ROOT/작업계획/공통-작업동기화/002-공통-작업현황판.md`
+  - `COMMON_DOCS_ROOT/작업계획/공통-작업동기화/003-공통-파일점유현황.md`
+  - `COMMON_DOCS_ROOT/작업계획/공통-작업동기화/004-공통-결정로그.md`
+- 같은 기능을 다른 채팅방에서 이어받는 경우 작업 ID, 현재 상태, 점유 파일을 먼저 갱신한다.
diff --git a/apps/sn/docs/기준문서/002-화면맵.md b/apps/sn/docs/기준문서/002-화면맵.md
new file mode 100644
index 000000000..d65e883c6
--- /dev/null
+++ b/apps/sn/docs/기준문서/002-화면맵.md
@@ -0,0 +1,19 @@
+# 화면 기준
+
+## 화면 분석 원칙
+- 확인됨: `apps/sn` 내부 화면과 라우팅, 컴포넌트를 우선 분석한다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: `apps/sn/app/html`은 퍼블리싱, 정적 HTML, 로직 검토 목적의 별도 영역으로 본다. 근거: `apps/sn/AGENTS.md`, `apps/sn/app/html/AGENTS.md`
+- 확인됨: `html` 하위 요청만으로 실제 `sn` 앱 코드 전체를 함께 수정하지 않는다. 근거: `apps/sn/AGENTS.md`, `apps/sn/app/html/AGENTS.md`
+
+## 화면 작업카드에 남길 항목
+- 확인 필요: 화면명
+- 확인 필요: 라우트 또는 접근 URL
+- 확인 필요: 주요 사용자 조작
+- 확인 필요: 조회, 등록, 수정, 삭제, 엑셀, 지도, 팝업 등 기능 구분
+- 확인 필요: 호출 API
+- 확인 필요: 사용 컴포넌트와 공통 비즈니스 컴포넌트 여부
+- 확인 필요: 브라우저 검증 절차
+
+## 확인 필요 항목
+- 확인 필요: 2차사업 최종 화면명과 메뉴 트리는 화면설계서 기준으로 확정해야 한다. 근거: 2차사업 화면설계서
+- 확인 필요: 실제 운영 메뉴 권한과 라우팅 정책은 실행 환경에서 확인해야 한다. 근거: `apps/sn` 소스, 브라우저 검증
\ No newline at end of file
diff --git a/apps/sn/docs/기준문서/003-API사용.md b/apps/sn/docs/기준문서/003-API사용.md
new file mode 100644
index 000000000..6ecdfbcfc
--- /dev/null
+++ b/apps/sn/docs/기준문서/003-API사용.md
@@ -0,0 +1,26 @@
+# API 연동 기준
+
+## 기본 원칙
+- 확인됨: 프론트엔드는 백엔드 `sewerage-service` API와 연동한다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 백엔드 응답 구조나 API 계약을 프론트엔드에서 임의로 변경했다고 가정하지 않는다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: API 계약 변경이 필요하면 백엔드 작업으로 분리하고 영향 범위를 먼저 정리한다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 신규 또는 변경 API URL은 백엔드 기준에 맞춰 업무 리소스 path segment를 lowerCamelCase로 맞춘다. 근거: `COMMON_DOCS_ROOT/기준문서/010-AI개발작업흐름.md`, `BE_DOCS_ROOT/기준문서/005-API정책.md`
+
+## 응답 처리 기준
+- 확인됨: 백엔드 공통 응답은 `status`, `message`, `data`, `timestamp` 형태로 내려오는 API가 존재한다. 근거: 사용자 확인 응답 예시, 백엔드 `docs/응답표준화/02-백엔드응답규칙.md`
+- 추정: `ResponseEntity` 적용 여부는 프론트엔드 수신 JSON 구조보다 HTTP 상태 코드와 헤더 제어에 더 직접적인 영향을 준다. 근거: 백엔드 응답 표준화 문서
+- 확인 필요: 각 화면의 API 클라이언트가 공통 응답 래퍼를 어디서 해제하는지는 `apps/sn` 소스에서 화면별로 확인해야 한다. 근거: `apps/sn` 소스 분석 필요
+
+## 작업카드에 남길 항목
+- 확인 필요: HTTP method
+- 확인 필요: URL
+- 확인 필요: 신규 또는 변경 URL의 lowerCamelCase 준수 여부
+- 확인 필요: query/body 파라미터
+- 확인 필요: 정상 응답 예시
+- 확인 필요: 오류 응답 처리 방식
+- 확인 필요: 화면에서 사용하는 `data` 경로
+- 확인 필요: 로딩, 빈 결과, 권한 오류, 서버 오류 표시 방식
+
+## 금지 기준
+- 확인됨: 프론트엔드에서 백엔드 API 계약 변경을 전제로 구현하지 않는다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 백엔드 응답을 임시로 우회하기 위한 화면 전용 하드코딩을 추가하지 않는다. 근거: `apps/sn/AGENTS.md`
diff --git a/apps/sn/docs/기준문서/004-컴포넌트정책.md b/apps/sn/docs/기준문서/004-컴포넌트정책.md
new file mode 100644
index 000000000..864726d4a
--- /dev/null
+++ b/apps/sn/docs/기준문서/004-컴포넌트정책.md
@@ -0,0 +1,22 @@
+# 컴포넌트 기준
+
+## 수정 범위
+- 확인됨: `apps/sn` 내부 컴포넌트는 직접 수정 가능하다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 공통 비즈니스 컴포넌트는 `packages/common/business_components`만 직접 수정 가능하다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: `packages/common/components`, `packages/common/auth`, `packages/common/network` 등은 직접 수정하지 않는다. 근거: `apps/sn/AGENTS.md`
+
+## 컴포넌트 변경 원칙
+- 확인됨: `sn` 요구사항을 만족하기 위한 최소 범위로 수정한다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 공통 컴포넌트 수정은 `sn`에 실제로 필요한 범위로 제한한다. 근거: `apps/sn/AGENTS.md`
+- 추정: 여러 화면에서 반복되는 `sn` 전용 로직은 먼저 `apps/sn` 내부 공통화로 해결하고, 여러 업무 화면에서 공유되는 비즈니스 UI일 때만 `business_components`를 검토하는 것이 안전하다. 근거: `apps/sn/AGENTS.md`
+
+## 작업카드에 남길 항목
+- 확인 필요: 신규 또는 수정 컴포넌트 경로
+- 확인 필요: 호출하는 화면 경로
+- 확인 필요: props 변경 여부
+- 확인 필요: 기존 화면 영향 여부
+- 확인 필요: 공통 컴포넌트 수정 필요 여부
+- 확인 필요: 브라우저 확인 화면
+
+## 외부 범위 이슈
+- 확인됨: 권한 밖 공통 패키지 수정이 필요해 보이면 직접 고치지 않고 문제 원인, 수정 필요 경로, `sn` 영향 범위, 타 앱 영향 가능성을 문서화한다. 근거: `apps/sn/AGENTS.md`
\ No newline at end of file
diff --git a/apps/sn/docs/기준문서/005-상태관리정책.md b/apps/sn/docs/기준문서/005-상태관리정책.md
new file mode 100644
index 000000000..8533b442c
--- /dev/null
+++ b/apps/sn/docs/기준문서/005-상태관리정책.md
@@ -0,0 +1,25 @@
+# 상태관리와 화면 흐름 기준
+
+## 상태관리 원칙
+- 확인됨: 기존 `sn` 화면 흐름과 사용자 동작을 가능한 유지하면서 2차 요구사항을 반영한다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 복잡한 컴포넌트, 탭 분기, 폼 처리, 데이터 변환, 지도 연동, 공통 컴포넌트 조합 로직은 함수 또는 메서드 단위 주석을 상세히 작성한다. 근거: `apps/sn/AGENTS.md`
+- 추정: 화면별 상태는 기존 패턴을 우선 따르고, 새 전역 상태 구조는 필요성이 확인된 경우에만 검토해야 한다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 서버 조회 결과와 화면 UI 상태는 용도를 구분한다. 서버 상태는 React Query 또는 화면 전용 조회 훅을 우선 검토하고, Zustand에는 화면 전역 UI 상태, 사용자 선택, 모달 상태, 장기간 공유되는 기준 데이터만 둔다.
+- 확인됨: Zustand에서 서버 기준 데이터를 조회해 보관하는 경우에는 로딩, 오류, 중복 호출 방지, 재조회 조건을 함께 정의한다.
+- 확인됨: 같은 의미의 기준 데이터 store를 두 계열 이상 유지하지 않는다. 기존 store가 겹치면 조회 출처, 데이터 shape, 필터링 규칙을 비교하고 하나의 기준으로 정리한다.
+- 확인됨: React Query를 사용하는 Provider는 QueryClient 인스턴스가 렌더마다 새로 생성되지 않도록 안정적으로 유지한다.
+
+## 화면 흐름 기록 항목
+- 확인 필요: 초기 진입 시 호출되는 API
+- 확인 필요: 검색 조건 초기값
+- 확인 필요: 페이지네이션 또는 무한스크롤 방식
+- 확인 필요: 선택 행 또는 상세 패널 상태
+- 확인 필요: 등록, 수정, 삭제 후 재조회 방식
+- 확인 필요: 서버 상태 캐시, 전역 store, 컴포넌트 local state 중 어디에 데이터를 둘지
+- 확인 필요: 로딩, 오류, 중복 호출 방지, 재조회 조건
+- 확인 필요: 팝업, 모달, 지도, 파일, 엑셀 흐름
+- 확인 필요: 에러 메시지 표시 위치
+
+## 주의 사항
+- 확인됨: 요구사항 근거 없는 기능 추가는 금지한다. 근거: `apps/sn/AGENTS.md`
+- 확인됨: 다른 앱에서 사용하는 공통 상태 로직을 `sn` 문제 해결 목적으로 직접 바꾸지 않는다. 근거: `apps/sn/AGENTS.md`
diff --git a/apps/sn/docs/기준문서/006-검증정책.md b/apps/sn/docs/기준문서/006-검증정책.md
new file mode 100644
index 000000000..833d33a4a
--- /dev/null
+++ b/apps/sn/docs/기준문서/006-검증정책.md
@@ -0,0 +1,34 @@
+# 검증 기준
+
+## 기본 빌드 검증
+- 확인됨: `sn`만 수정한 경우 아래 명령으로 로컬 빌드를 확인한다. 근거: `apps/sn/AGENTS.md`
+
+```powershell
+pnpm --filter sn run build
+pnpm turbo run build --filter=sn
+```
+
+- 확인됨: `business_components`를 수정한 경우 아래 명령을 함께 확인한다. 근거: `apps/sn/AGENTS.md`
+
+```powershell
+pnpm --filter @common/business_components run build
+pnpm --filter sn run build
+pnpm turbo run build --filter="...[origin/main]"
+```
+
+## pre-push 기준 검증
+- 확인됨: `main` 브랜치 push 전 `.husky/pre-push`에서 아래 형식의 빌드가 수행된다. 근거: `.husky/pre-push`, `apps/sn/AGENTS.md`
+
+```powershell
+git fetch origin
+pnpm turbo run build --filter="...[origin/main]" --dry-run
+pnpm turbo run build --filter="...[origin/main]"
+```
+
+## 브라우저 검증
+- 확인됨: 백엔드 API 응답과 실제 브라우저 화면 동작을 함께 확인하는 것을 기본으로 한다. 근거: `apps/sn/AGENTS.md`
+- 확인 필요: 각 기능별 URL, 로그인 계정, 권한, 테스트 데이터는 작업카드에서 확정한다. 근거: 실행 환경 확인 필요
+
+## 검증 기록
+- 확인됨: 검증 결과는 `보고/YYYY-MM-DD/결과보고.md`에 기록한다. 근거: 이 하네스 운영 문서
+- 확인됨: 외부 범위 오류는 `보고/YYYY-MM-DD/이슈.md`에 기록한다. 근거: 이 하네스 운영 문서
\ No newline at end of file
diff --git a/apps/sn/docs/기준문서/007-멀티에이전트운영.md b/apps/sn/docs/기준문서/007-멀티에이전트운영.md
new file mode 100644
index 000000000..41406e465
--- /dev/null
+++ b/apps/sn/docs/기준문서/007-멀티에이전트운영.md
@@ -0,0 +1,13 @@
+# 007. 멀티에이전트운영
+
+## 목적
+- 프론트 `sn` 앱 관점에서 멀티에이전트 작업 시 `fe` 역할이 따라야 하는 보조 기준을 정리한다.
+
+## 공통 기준
+- 공통 역할/합류/검증 기준은 `COMMON_DOCS_ROOT/기준문서\011-멀티에이전트운영.md`를 우선 따른다.
+- 공통 개발 흐름은 `COMMON_DOCS_ROOT/기준문서\010-AI개발작업흐름.md`를 우선 따른다.
+
+## 프론트 보조 기준
+- `fe` 역할의 직접 수정 범위는 `apps/sn/**`, `packages/common/business_components/**` 이다.
+- `@common/components`, `@common/network`, `@common/auth`, `@common/config`, 타 앱은 직접 수정하지 않는다.
+- 프론트 결과 보고에는 화면 진입 경로, 사용자 조작, 빌드 결과, 네트워크 확인 기준, BE/QA 합류 필요사항을 포함한다.
diff --git a/apps/sn/docs/기준문서/008-설계정책.md b/apps/sn/docs/기준문서/008-설계정책.md
new file mode 100644
index 000000000..62e300a72
--- /dev/null
+++ b/apps/sn/docs/기준문서/008-설계정책.md
@@ -0,0 +1,25 @@
+# 008. 설계정책
+
+## 1. 목적
+- `sn` 앱 화면, 상태, API 연동 설계를 변경할 때 판단 기준을 통일한다.
+- 프론트 단독 변경과 백엔드 계약 변경을 구분해서 영향 범위를 명확히 한다.
+
+## 2. 기본 원칙
+- 화면 요구사항, 화면 흐름, API 응답 구조를 함께 보고 설계한다.
+- `apps/sn/**` 안에서 해결 가능한 변경을 우선한다.
+- 공통 컴포넌트 수정이 필요하면 `packages/common/business_components/**` 범위만 검토한다.
+- 그 밖의 공통 패키지 수정이 필요해 보이면 직접 수정하지 말고 원인과 영향 범위를 먼저 문서화한다.
+
+## 3. 화면 설계 원칙
+- 화면 상태는 조회 조건, 목록 데이터, 상세 데이터, 로딩/에러 상태를 분리한다.
+- 폼과 조회 조건은 화면 컴포넌트 내부에서 뒤섞지 말고 역할 단위로 분리한다.
+- 지도, 표, 팝업이 함께 있는 화면은 사용자 흐름 기준으로 이벤트 책임을 나눈다.
+
+## 4. API 연동 원칙
+- 프론트는 실제 백엔드 DTO, API 명세, 에러 응답을 기준으로 맞춘다.
+- 필드명 해석이 애매하면 프론트에서 임의 변환 규칙을 늘리기보다 계약을 먼저 확인한다.
+- 목록/상세/다운로드 API는 요청 파라미터와 응답 구조를 문서에 남긴다.
+
+## 5. 공통 문서 참조
+- 공통 용어는 `COMMON_DOCS_ROOT/기준문서/003-공통용어사전.md`를 우선 참조한다.
+- 공통 환경/빌드 이슈는 `COMMON_DOCS_ROOT/기준문서/004-환경빌드문제대응.md`를 함께 본다.
diff --git a/apps/sn/docs/기준문서/009-네이밍규칙.md b/apps/sn/docs/기준문서/009-네이밍규칙.md
new file mode 100644
index 000000000..39626ba75
--- /dev/null
+++ b/apps/sn/docs/기준문서/009-네이밍규칙.md
@@ -0,0 +1,24 @@
+# 009. 네이밍규칙
+
+## 1. 목적
+- `sn` 앱에서 화면, 컴포넌트, 상태, API 관련 이름을 일관되게 유지한다.
+
+## 2. 파일/폴더
+- 화면 파일과 폴더는 기능 기준으로 묶고, 한 화면에서 여러 역할이 섞이면 하위 폴더로 분리한다.
+- 문서 파일은 현재처럼 한글 제목을 사용할 수 있지만, 코드 파일은 기존 프로젝트 관례를 우선 따른다.
+- 임시 파일명, `new`, `temp`, `test2` 같은 이름은 커밋 전에 정리한다.
+
+## 3. 컴포넌트
+- React 컴포넌트는 역할이 드러나는 명사를 사용한다.
+- 화면 루트는 `Page`, 팝업은 `Dialog` 또는 `Modal`, 표는 `Table` 또는 `Grid`처럼 일관된 접미사를 사용한다.
+- 공통화가 되지 않은 로컬 화면 조각에 과도하게 `Common` 접두사를 붙이지 않는다.
+
+## 4. 상태/함수
+- 조회 조건은 `search`, `filter`, `params`처럼 의미가 드러나는 이름을 사용한다.
+- 이벤트 핸들러는 `handle*`, 파생 계산은 `get*` 또는 의미 있는 명사형으로 구분한다.
+- 비동기 함수는 목적이 드러나도록 `fetch*`, `load*`, `download*` 등을 사용한다.
+
+## 5. API/데이터
+- 백엔드 계약 필드명은 임의 축약하지 않는다.
+- 화면 표시용 변환 값은 원본 DTO와 구분되게 이름을 짓는다.
+- Boolean 값은 `is`, `has`, `can` 접두사를 우선 사용한다.
diff --git a/apps/sn/docs/기준문서/010-용어사전.md b/apps/sn/docs/기준문서/010-용어사전.md
new file mode 100644
index 000000000..33ced4ae7
--- /dev/null
+++ b/apps/sn/docs/기준문서/010-용어사전.md
@@ -0,0 +1,105 @@
+# 010. 용어사전
+
+## 1. 목적
+- `sn` 프론트 코드에서 실제로 사용되는 용어를 기준으로 화면 라벨, 라우트명, 컴포넌트명, API 필드명을 정리한다.
+- 같은 의미에 여러 이름이 섞여 있는 부분을 드러내고, 작업 시 어떤 이름을 기준으로 삼아야 하는지 고정한다.
+
+## 2. 참조 기준
+- 공통 용어: `COMMON_DOCS_ROOT/기준문서/003-공통용어사전.md`
+- 백엔드 원본 용어: `BE_DOCS_ROOT/기준문서/004-용어.csv`
+- 프론트 네이밍 규칙: `FE_APP_DOCS_ROOT/기준문서/009-네이밍규칙.md`
+
+## 3. 정리 원칙
+- 화면 라벨은 사용자에게 익숙한 한글 업무 용어를 사용한다.
+- API/DTO/DB와 직접 연결되는 식별자는 백엔드 계약 이름을 우선한다.
+- 라우트나 로컬 컴포넌트에 이미 굳은 이름은 즉시 바꾸지 않고 `별칭`으로 관리한다.
+- 신규 작업에서는 `기준 용어`만 새 이름으로 사용한다.
+- `별칭`은 기존 코드 해석용으로만 남기고, 신규 파일/함수/변수에는 사용하지 않는다.
+
+## 4. 코드 분석으로 확인된 주요 용어군
+이번 검토에서 실제 `apps/sn` 코드에서 확인한 대표 용어군은 아래와 같다.
+
+- 사업/운영 화면
+  - `oldPp`, `dcrpPpl`, `agedPipe`
+  - `floodPre`, `sbmrgPrevnt`
+  - `bizInfo`
+- 지도/시설 화면
+  - `swagePpl`, `swageMhl`, `swagePmstn`, `stofcbr`
+  - `swagePrcsFclt`, `swagePrcsZone`, `SwtrmtFclt`
+  - `WaterDepth`
+- 분석 화면
+  - `rdii`, `rdiiResult`, `result`
+  - `irsetting`, `fileupload`
+  - `infilChart`, `rdiiChart`
+- 공통 기술 용어
+  - `lyrStng`, `lyrTyNm`, `basicType`, `featureData`
+
+## 5. 프론트 기준 용어 매핑
+| 업무 의미 | 기준 용어 | 현재 코드 별칭 | 화면 라벨 | 사용 기준 | 상태 |
+| --- | --- | --- | --- | --- | --- |
+| 노후관로정비사업 | `dcrpPpl` | `oldPp` | 노후관로정비사업 | API/DTO/BE 계약은 `dcrpPpl`, 기존 route는 `oldPp` 유지 | 혼재 |
+| 노후관로 지도 시나리오 | `agedPipe` | `oldPpl`, `dcrpPpl` | 노후관로 | HTML 시안/전용 화면 이름은 `agedPipe` 사용 가능, API 연동 이름으로 직접 쓰지 않음 | 혼재 |
+| 침수예방사업 | `sbmrgPrevnt` | `floodPre` | 침수예방사업 | API/DTO는 `sbmrgPrevnt`, 기존 route는 `floodPre` 유지 | 혼재 |
+| 사업정보 | `bizInfo` | 없음 | 사업정보 | API/화면 모두 `bizInfo` 사용 | 기준 확정 |
+| 관로 | `swagePpl` | `ppl` | 하수관로 | 화면/컴포넌트는 `swagePpl`, 백엔드 필드/약어는 `ppl` 허용 | 기준 후보 |
+| 맨홀 | `swageMhl` | `mhl`, `smh` | 하수맨홀 | 검색/표 컬럼은 `swageMhl`, 축약 내부 변수만 `mhl` 허용 | 혼재 |
+| 펌프장 | `swagePmstn` | `pump`, `sewagePump`, `stormWaterPump` | 하수펌프장 | 화면/검색 기준은 `swagePmstn`, 로컬 컴포넌트 `sewagePump`는 기존 파일명 별칭 | 혼재 |
+| 우수토실 | `stofcbr` | 없음 | 우수토실 | 기존 코드/DB 기준 `stofcbr` 유지 | 기준 확정 |
+| 하수처리시설 | `swtrmtFclt` | `swagePrcsFclt` | 하수처리시설 | 시설 실체/응답 필드는 `swtrmtFclt`, 기존 검색 모달 `swagePrcsFclt`는 별칭 | 혼재 |
+| 하수처리구역 | `swtrmtZone` | `swagePrcsZone` | 하수처리구역 | 응답/화면 기준은 `swtrmtZone`, 기존 검색 모달 `swagePrcsZone`는 별칭 | 혼재 |
+| 수심 레이어 | `waterDepth` | 없음 | 수심 | UI/컴포넌트 기준 `waterDepth` 사용 | 기준 확정 |
+| 레이어 설정 | `lyrStng` | `treeData` | 레이어 설정 | API/도메인 기준은 `lyrStng`, 화면 상태값은 `treeData` 허용 | 기준 후보 |
+| RDII 분석 | `rdii` | `rdiiResult` | RDII 분석 / RDII 분석결과 | 기능명은 `rdii`, 결과 화면은 `rdiiResult` 분리 | 기준 확정 |
+| 침입수 분석 | `inftwt` | `irsetting`, `infilChart` | 침입수 분석 | API/백엔드 계약은 `inftwt`, 기존 route `irsetting`과 차트명 `infilChart`는 별칭 | 혼재 |
+| 수용가 | `rcptr` | 없음 | 수용가정보 | API/BE 계약 기준 `rcptr` 사용 | 기준 확정 |
+
+## 6. 신규 작업에서 사용할 기준
+신규 코드에서는 아래 이름을 우선 사용한다.
+
+### 6.1 사업/운영
+- `dcrpPpl`
+- `sbmrgPrevnt`
+- `bizInfo`
+
+### 6.2 지도/시설
+- `swagePpl`
+- `swageMhl`
+- `swagePmstn`
+- `stofcbr`
+- `swtrmtFclt`
+- `swtrmtZone`
+- `waterDepth`
+- `lyrStng`
+
+### 6.3 분석
+- `inftwt`
+- `rdii`
+- `rcptr`
+
+## 7. 신규 작업에서 피할 별칭
+아래 이름은 기존 코드 해석용으로만 두고, 신규 파일/함수/변수명으로는 우선 사용하지 않는다.
+
+- `oldPp`를 API/DTO 이름으로 사용하는 것
+- `floodPre`를 API 계약 이름으로 사용하는 것
+- `sewagePump`를 신규 화면/컴포넌트 기준 이름으로 사용하는 것
+- `swagePrcsFclt`, `swagePrcsZone`를 신규 API/DTO 기준 이름으로 사용하는 것
+- `irsetting`을 신규 기능명으로 사용하는 것
+- `infilChart`를 침입수 분석 전체 기능명으로 사용하는 것
+
+## 8. 확인 필요 항목
+- `oldPp` route를 장기적으로 `dcrpPpl` 또는 한글 route 명으로 정리할지
+- `swagePmstn`와 `sewagePump` 중 화면 컴포넌트 기준 이름을 통일할지
+- `swtrmtFclt`와 `swagePrcsFclt`를 같은 개념으로 볼지 분리할지
+- `swtrmtZone`와 `swagePrcsZone`를 같은 개념으로 볼지 분리할지
+- `irsetting` route를 `inftwt` 의미에 맞춰 정리할지
+
+## 9. 작업카드 반영 규칙
+신규 화면/컴포넌트/API 작업 시 아래를 반드시 기록한다.
+- 화면 라벨
+- 라우트명
+- API 필드명
+- 프론트 변수명
+- 기준 용어
+- 기존 별칭 사용 여부
+- 용어사전 갱신 여부
+
diff --git a/apps/sn/docs/기준문서/011-환경빌드문제대응.md b/apps/sn/docs/기준문서/011-환경빌드문제대응.md
new file mode 100644
index 000000000..4f7f39cc2
--- /dev/null
+++ b/apps/sn/docs/기준문서/011-환경빌드문제대응.md
@@ -0,0 +1,23 @@
+# 011. 환경빌드문제대응
+
+## 1. 공통 기준
+- 공통 환경/빌드 이슈는 `COMMON_DOCS_ROOT/기준문서/004-환경빌드문제대응.md`를 함께 본다.
+
+## 2. 프론트 기본 점검
+- `pnpm -v`, `node -v` 버전을 먼저 확인한다.
+- 작업 루트는 기본적으로 `FE_REPO_ROOT/`를 사용한다.
+- 의존성 문제 의심 시 `pnpm install` 상태와 lockfile 변경 여부를 함께 본다.
+
+## 3. 기본 빌드 명령
+- `pnpm --filter sn run build`
+- `pnpm turbo run build --filter=sn`
+- `pnpm --filter @common/business_components run build`
+
+## 4. 점검 순서
+- 에디터 타입 오류인지 실제 빌드 오류인지 먼저 구분한다.
+- `sn`만의 오류인지 공통 패키지 영향인지 구분한다.
+- 한글 경로, 캐시, Node 버전, pnpm workspace 인식 문제를 순서대로 확인한다.
+
+## 5. 대응 원칙
+- 원인 확인 전 광범위한 삭제나 재설치는 마지막 수단으로 둔다.
+- 공통 패키지 문제면 `sn` 영향 범위를 함께 기록한다.
diff --git a/apps/sn/docs/기준문서/012-코드리뷰체크리스트.md b/apps/sn/docs/기준문서/012-코드리뷰체크리스트.md
new file mode 100644
index 000000000..19e00b921
--- /dev/null
+++ b/apps/sn/docs/기준문서/012-코드리뷰체크리스트.md
@@ -0,0 +1,29 @@
+# 012. 코드리뷰체크리스트
+
+## 1. 화면 동작
+- 조회, 상세, 다운로드, 팝업 흐름이 요구사항대로 동작하는가
+- 로딩/빈 화면/에러 상태가 빠지지 않았는가
+- 기존 화면 동작을 깨는 회귀가 없는가
+
+## 2. API 연동
+- 실제 백엔드 요청 파라미터와 응답 필드를 기준으로 구현했는가
+- 신규 또는 변경 API URL이 백엔드 lowerCamelCase 기준과 일치하는가
+- 에러 응답 또는 예외 케이스를 화면에서 처리하는가
+- 프론트 임의 가공 로직이 계약 불일치를 숨기고 있지 않은가
+
+## 3. 범위 준수
+- 수정 범위가 `apps/sn/**` 또는 `packages/common/business_components/**` 안에 머무르는가
+- 다른 공통 패키지 수정이 필요하면 원인과 영향 범위를 먼저 정리했는가
+
+## 4. 코드 품질
+- 컴포넌트 책임이 과도하게 섞이지 않았는가
+- 상태, 이벤트, 비동기 호출이 읽기 쉽게 분리되어 있는가
+- 서버 조회 결과를 store에 둘 때 로딩/오류/중복 호출 방지/재조회 기준이 있는가
+- 같은 기준 데이터를 관리하는 store가 중복되어 있지 않은가
+- React Query를 쓰는 경우 QueryClient가 안정적으로 유지되는가
+- 이름이 역할을 설명하고 있는가
+
+## 5. 검증
+- 빌드 명령 또는 필요한 로컬 검증을 수행했는가
+- 브라우저에서 핵심 시나리오를 확인했는가
+- 변경 이유, 영향 범위, 남은 리스크를 결과 보고에 남겼는가
diff --git a/apps/sn/docs/기준문서/013-UI레이아웃가이드.md b/apps/sn/docs/기준문서/013-UI레이아웃가이드.md
new file mode 100644
index 000000000..5bfb9c941
--- /dev/null
+++ b/apps/sn/docs/기준문서/013-UI레이아웃가이드.md
@@ -0,0 +1,90 @@
+# 013. UI레이아웃가이드
+
+## 1. 목적
+- `sn` 앱 화면 작업 시 기존 하수관로시스템 UI 패턴을 그대로 따르기 위한 구현 기준을 정리한다.
+- 이후 기능 추가나 화면 개선 시 “무엇을 재사용해야 하는지”를 빠르게 판단할 수 있게 한다.
+
+## 2. 이번 분석에서 확인한 기준 화면
+- 업무형 조회/등록 화면
+  - `apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx`
+  - `apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx`
+  - `apps/sn/app/(with-base-layout)/ii/rdii/page.tsx`
+- 지도형 화면
+  - `apps/sn/app/(map-layout)/map/page.tsx`
+- 공통 레이아웃/구성
+  - `packages/common/components/src/ui/layout/base.tsx`
+  - `packages/common/components/src/ui/layout/nofooter.tsx`
+  - `apps/sn/src/shared/ui/page-layout.tsx`
+  - `packages/common/components/src/ui/layout/common.css`
+- 공통 비즈니스 컴포넌트
+  - `packages/common/business_components/src/ui/search_form/index.tsx`
+  - `packages/common/business_components/src/ui/search_form_left/index.tsx`
+  - `packages/common/business_components/src/ui/search_form_right/index.tsx`
+  - `packages/common/business_components/src/ui/list_div/index.tsx`
+  - `packages/common/business_components/src/ui/table/index.tsx`
+  - `packages/common/business_components/src/ui/map/Gis.js`
+
+## 3. 레이아웃 선택 기준
+
+### 3.1 업무형 화면
+- 대상: 등록현황, 분석 조건 입력, 조회/목록/업로드/모달 중심 화면
+- 기본 구조:
+  - `BaseLayout`
+  - `PageLayout`
+  - 상단 검색영역: `SearchDiv`
+  - 좌측 검색조건: `SearchFormLeft`
+  - 우측 액션 버튼: `SearchFormRight`
+  - 본문 카드: `ListDiv`
+  - 목록: `UiTable`
+  - 팝업: `UiModal`
+
+### 3.2 지도형 화면
+- 대상: 레이어 트리, 피처 선택, 상세 팝업, 검색 모달, 지도 도구 중심 화면
+- 기본 구조:
+  - `NoFooterLayout`
+  - `Gis`
+  - `ProcSearchBar` 또는 지도 전용 검색 UI
+  - 우측 상세 팝업: 지도 피처 상세 컴포넌트
+  - 레이어 트리/툴바/줌레벨: `Gis` 내부 패턴 유지
+
+## 4. 시각 패턴
+- 기본 카드 스타일은 `common.css`의 `card`, `card-border`, `card-header`, `card-footer`를 우선 따른다.
+- 글자 크기는 업무 화면에서 `text-2xl`, `text-xl` 계열을 많이 사용하므로, 신규 화면도 이 리듬을 우선 유지한다.
+- 버튼은 화면마다 새 변형을 만들기보다 기존 `Button` 스타일과 색상 조합을 우선 사용한다.
+- 리스트/테이블/검색영역은 유리질 카드나 대시보드형 실험적 스타일보다 현재 반투명 카드 + 경계선 + 표 구조를 우선 유지한다.
+
+## 5. 검색영역 규칙
+- 검색영역은 상단 1행 구조를 기본으로 한다.
+- 왼쪽에는 조회 조건, 오른쪽에는 `조회`, `등록`, `다운로드` 같은 액션 버튼을 둔다.
+- 검색 필드는 `Label + Input/DatePicker/Select` 조합을 유지한다.
+- 새 화면도 가능하면 “등록기간/조건입력/조회버튼” 패턴을 크게 벗어나지 않는다.
+
+## 6. 목록/테이블 규칙
+- 데이터 목록은 `UiTable`을 우선 사용한다.
+- 카드 헤더에는 제목과 총 건수, 우측 액션 버튼을 배치한다.
+- 페이징, 선택 초기화, 셀 클릭 동작은 기존 `UiTable` 사용 패턴을 따른다.
+- 새 테이블을 만들 때는 먼저 `headlist` 설정 파일로 컬럼 구조를 분리하는 방식을 검토한다.
+
+## 7. 모달/상세 규칙
+- 상세 보기, 등록, 엑셀 미리보기는 `UiModal` 패턴을 우선 사용한다.
+- 지도형 화면 상세는 우측 고정 패널 또는 기존 지도 상세 팝업 위치를 우선 유지한다.
+- 같은 기능에서 목록 선택 후 상세/모달이 열리는 흐름은 기존 `oldPp`, `floodPre`, `map` 패턴을 참고한다.
+
+## 8. 상태관리/API 연동 규칙
+- 화면 내부 로컬 상태로 충분한 것은 로컬 state를 우선 사용한다.
+- 사용자/공통 코드/메뉴/검색 모달 상태는 기존 store 패턴을 우선 따른다.
+- API 호출은 기존 `searchData`, `getData`, `postData`, `deleteData` 계열을 우선 사용한다.
+- 프론트에서 백엔드 응답 구조를 임의 가정하지 않고, 현재 화면이 실제로 쓰는 필드 기준으로 맞춘다.
+
+## 9. 새 화면 설계 시 체크리스트
+- 이 화면이 업무형인지 지도형인지 먼저 구분했는가
+- 기존 레이아웃(`BaseLayout` / `NoFooterLayout`) 중 하나를 선택했는가
+- 검색영역을 `SearchDiv + SearchFormLeft/Right` 패턴으로 풀 수 있는가
+- 목록을 `UiTable`로 처리할 수 있는가
+- 상세/등록 흐름을 `UiModal` 또는 기존 상세 패널 패턴으로 맞출 수 있는가
+- 새 스타일을 만들기 전에 `@common/components`, `@common/business_components` 재사용 가능성을 확인했는가
+
+## 10. 예외 처리 원칙
+- 기존 패턴으로 해결되지 않는 요구사항일 때만 새 UI 구조를 제안한다.
+- 그 경우에도 “왜 기존 패턴으로 해결되지 않는지”를 먼저 설계 문서에 남긴다.
+- 예외 구조를 만들 때는 이후 다른 화면에도 재사용 가능한지 같이 검토한다.
diff --git a/apps/sn/docs/작업계획/작업카드-템플릿.md b/apps/sn/docs/작업계획/작업카드-템플릿.md
new file mode 100644
index 000000000..86cd29f5d
--- /dev/null
+++ b/apps/sn/docs/작업계획/작업카드-템플릿.md
@@ -0,0 +1,86 @@
+# SN-P2-000 작업카드 템플릿
+
+## 1. 작업 개요
+- 작업 ID:
+- 작업명:
+- 상태: 대기
+- 작성일:
+- 담당 역할: FE
+- 관련 역할: BE, QA
+- 담당 범위:
+- 근거 문서:
+
+## 1-1. 공통 동기화 확인
+- 공통 작업현황판 확인 여부:
+- 파일점유현황 확인 여부:
+- 결정로그 확인 여부:
+- 기존 진행 중 작업과의 관계:
+
+## 2. 작업 목적
+- 확인 필요:
+
+## 3. 수정 대상 파일
+| 구분 | 파일 경로 | 수정 여부 | 근거 |
+| --- | --- | --- | --- |
+| 화면 | 확인 필요 | 확인 필요 | 확인 필요 |
+| 컴포넌트 | 확인 필요 | 확인 필요 | 확인 필요 |
+| API 호출 | 확인 필요 | 확인 필요 | 확인 필요 |
+| 공통 비즈니스 컴포넌트 | 확인 필요 | 확인 필요 | 확인 필요 |
+
+## 3-1. 쓰기 범위와 충돌 주의
+| 구분 | 경로 | 담당 역할 | 처리 기준 |
+| --- | --- | --- | --- |
+| 쓰기 허용 | `apps/sn/**` | FE | `sn` 화면/상태/API 호출 작업 |
+| 쓰기 허용 | `packages/common/business_components/**` | FE | `sn` 요구사항에 필요한 최소 공통 컴포넌트 작업 |
+| 쓰기 금지 | `packages/common/business_components` 외 공통 패키지 | FE | 문제 원인과 영향 범위만 기록 |
+| 쓰기 금지 | 타 앱 `apps/*` | FE | 문제 원인과 영향 범위만 기록 |
+
+- 충돌 주의 파일:
+- 인수인계 메모:
+- 파일점유 등록 여부:
+
+## 4. 화면 흐름
+- 확인 필요: 진입 경로
+- 확인 필요: 사용자 조작
+- 확인 필요: 정상 흐름
+- 확인 필요: 빈 결과 흐름
+- 확인 필요: 오류 흐름
+
+## 5. API 연동
+| 기능 | Method | URL | 요청 | 응답 | 확인 상태 |
+| --- | --- | --- | --- | --- | --- |
+| 확인 필요 | 확인 필요 | 확인 필요 | 확인 필요 | 확인 필요 | 확인 필요 |
+
+## 6. 영향 범위
+- 확인 필요: `apps/sn` 화면 영향
+- 확인 필요: `business_components` 영향
+- 확인 필요: 백엔드 API 영향
+- 확인 필요: 다른 앱 영향 가능성
+
+## 6-1. 멀티에이전트 작업 분리
+- FE 담당 산출물:
+- BE 담당 산출물:
+- QA 담당 산출물:
+- 병렬 진행 가능 항목:
+- 순차 진행 필요 항목:
+
+## 6-2. 채팅방 간 충돌 방지
+- 같은 기능을 다른 채팅방에서 진행 중인지:
+- 겹치는 파일 또는 폴더:
+- 점유 충돌 시 처리 방식:
+
+## 7. 검증 방법
+- 확인 필요: 빌드 명령
+- 확인 필요: 브라우저 URL
+- 확인 필요: 사용자 조작
+- 확인 필요: 기대 결과
+- 확인 필요: 네트워크 응답 확인 기준
+
+## 8. 롤백 방법
+- 확인 필요:
+
+## 9. 예상 위험
+- 확인 필요:
+
+## 10. 완료 기준
+- 확인 필요:
diff --git a/apps/sn/next-env.d.ts b/apps/sn/next-env.d.ts
index 1b3be0840..830fb594c 100644
--- a/apps/sn/next-env.d.ts
+++ b/apps/sn/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/sn/package.json b/apps/sn/package.json
index 471cbe0cb..5b89e93db 100644
--- a/apps/sn/package.json
+++ b/apps/sn/package.json
@@ -12,6 +12,7 @@
     "@common/assets": "workspace:*",
     "@common/business_components": "workspace:*",
     "@common/components": "workspace:*",
+    "@common/config": "workspace:*",
     "@fontsource-variable/noto-sans-kr": "^5.2.5",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@hookform/resolvers": "^4.1.3",
@@ -26,7 +27,7 @@
     "dayjs": "^1.11.13",
     "js-cookie": "^3.0.5",
     "moment": "^2.30.1",
-    "next": "15.3.8",
+    "next": "15.5.18",
     "react-chartjs-2": "^5.3.0",
     "react-hot-toast": "^2.5.2",
     "react-dnd": "^16.0.1",
@@ -48,7 +49,7 @@
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
-    "eslint-config-next": "15.1.7",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
diff --git a/apps/sn/public/images/bg_login.jpg b/apps/sn/public/images/bg_login.jpg
new file mode 100644
index 000000000..b7793d16a
Binary files /dev/null and b/apps/sn/public/images/bg_login.jpg differ
diff --git a/apps/sn/public/images/map/layericon/Layer_Select_BTN.png b/apps/sn/public/images/map/layericon/Layer_Select_BTN.png
new file mode 100644
index 000000000..1e810feaf
Binary files /dev/null and b/apps/sn/public/images/map/layericon/Layer_Select_BTN.png differ
diff --git a/apps/sn/src/app/index.tsx b/apps/sn/src/app/index.tsx
index 692b55ef0..29d73b03f 100644
--- a/apps/sn/src/app/index.tsx
+++ b/apps/sn/src/app/index.tsx
@@ -1,7 +1,3 @@
-import "./styles/base.css";
-import "./styles/components.css";
-import "@fontsource-variable/noto-sans-kr";
-
 import { AppProvider } from "./providers";
 import { cookies } from "next/headers";
 
diff --git a/apps/sn/src/app/styles/base.css b/apps/sn/src/app/styles/base.css
index 8453ff9e8..6cc507bb9 100644
--- a/apps/sn/src/app/styles/base.css
+++ b/apps/sn/src/app/styles/base.css
@@ -10,3 +10,7 @@ body {
   font-family: "Noto Sans KR", sans-serif;
   font-size: 10px;
 }
+
+body.sn-map-page-lock {
+  overflow: hidden;
+}
diff --git a/apps/sn/src/entities/auth/api/login-service.ts b/apps/sn/src/entities/auth/api/login-service.ts
index c1968fe36..4d7a7cd8d 100644
--- a/apps/sn/src/entities/auth/api/login-service.ts
+++ b/apps/sn/src/entities/auth/api/login-service.ts
@@ -5,6 +5,7 @@ import {
   ACCESS_TOKEN,
   AUTH_USER_ID,
   CLAIM_NAME,
+  SITE_ID,
 } from "@/shared/config";
 import type { LoginService, ILogin } from "../model/login-interface";
 import { tokenManager } from "../lib/token-manager";
@@ -23,8 +24,13 @@ export class LoginApiService implements LoginService {
 
   public async login(payload: ILogin): Promise<void> {
     try {
+      tokenManager.clearAuthToken();
       const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
         method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Site-Id": SITE_ID,
+        },
         body: JSON.stringify({
           userId: payload.userId,
           password: payload.password,
@@ -57,7 +63,12 @@ export class LoginApiService implements LoginService {
     try {
       const response = await fetch(
         `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-        { method: "PUT" },
+        {
+          method: "PUT",
+          headers: {
+            "X-Site-Id": SITE_ID,
+          },
+        },
       );
 
       const data = await response.json();
diff --git a/apps/sn/src/entities/auth/lib/auth-wrapper.tsx b/apps/sn/src/entities/auth/lib/auth-wrapper.tsx
index bc4a82aab..f37ff4041 100644
--- a/apps/sn/src/entities/auth/lib/auth-wrapper.tsx
+++ b/apps/sn/src/entities/auth/lib/auth-wrapper.tsx
@@ -8,6 +8,7 @@ import { useUserStore } from "@/shared/lib";
 import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
 import { isAtLoginRedirectUrl } from "@common/network";
 import { getCookie } from "@/shared/lib";
+import { tokenManager } from "./token-manager";
 
 const LOGIN_PAGE_URL =
   process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
@@ -38,6 +39,7 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
         await authCheck();
       } catch (error) {
         console.error(error);
+        
         setUserInfo(null);
 
         if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) return;
diff --git a/apps/sn/src/entities/auth/lib/token-manager.ts b/apps/sn/src/entities/auth/lib/token-manager.ts
index cbc9c508d..5b24c8bd3 100644
--- a/apps/sn/src/entities/auth/lib/token-manager.ts
+++ b/apps/sn/src/entities/auth/lib/token-manager.ts
@@ -1,6 +1,13 @@
 import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config";
 import { getCookie, setCookie, removeCookie } from "@/shared/lib";;
 
+type JwtPayload = {
+  sub?: string;
+  exp?: number;
+  iat?: number;
+  [key: string]: unknown;
+};
+
 export class TokenManager {
   private static instance: TokenManager;
   private refreshTimer: NodeJS.Timeout | null = null;
@@ -18,6 +25,49 @@ export class TokenManager {
     return getCookie(key);
   }
 
+  private parseJwt(token: string): JwtPayload {
+    const parts = token.split(".");
+    if (parts.length !== 3) {
+      throw new Error("유효한 JWT 형식이 아닙니다.");
+    }
+
+    const base64Url = parts[1] ?? "";
+    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+    const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
+    const jsonPayload = decodeURIComponent(
+      atob(padded)
+        .split("")
+        .map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`)
+        .join("")
+    );
+
+    return JSON.parse(jsonPayload) as JwtPayload;
+  }
+
+  public getRemainingMsFromToken(key: string = CLAIM_NAME): number | null {
+    const token = this.getToken(key);
+    if (!token) {
+      return null;
+    }
+
+    try {
+      const payload = this.parseJwt(token);
+      if (typeof payload.exp !== "number") {
+        return null;
+      }
+
+      return payload.exp * 1000 - Date.now();
+    } catch (error) {
+      console.error("JWT 파싱 오류:", error);
+      return null;
+    }
+  }
+
+  public isExpiredToken(key: string = CLAIM_NAME): boolean {
+    const remainingMs = this.getRemainingMsFromToken(key);
+    return remainingMs === null || remainingMs <= 0;
+  }
+
   public setToken(key: string, value: string): void {
     // 환경에 따른 도메인 설정
     //const domain = this.getCookieDomain();
@@ -26,7 +76,7 @@ export class TokenManager {
       secure: window.location.protocol === "https:",
       sameSite: "lax",
       //domain: domain,
-      //path: "/",
+      path: "/",
     });
   }
 
diff --git a/apps/sn/src/features/auth/login/index.ts b/apps/sn/src/features/auth/login/index.ts
new file mode 100644
index 000000000..2093c3d8d
--- /dev/null
+++ b/apps/sn/src/features/auth/login/index.ts
@@ -0,0 +1 @@
+export { LoginPage } from "./ui/login-page";
diff --git a/apps/sn/src/features/auth/login/ui/login-page.tsx b/apps/sn/src/features/auth/login/ui/login-page.tsx
new file mode 100644
index 000000000..dea3c90f1
--- /dev/null
+++ b/apps/sn/src/features/auth/login/ui/login-page.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect } from "react";
+import { images } from "@common/assets";
+import { LoginApi } from "@/entities/auth";
+import "./login.css";
+
+function LoginPage() {
+  useEffect(() => {
+    const hostname = window.location.hostname;
+    if (hostname.includes("hasuon.or.kr")) {
+      window.location.href =
+        process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
+    }
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const userId = formData.get("id") as string;
+    const password = formData.get("password") as string;
+
+    await LoginApi.login({ userId, password });
+    window.location.href = "/map";
+  };
+
+  return (
+    <div className="login fx">
+      <div className="left_box fx">
+        <div className="text">
+          <h1>
+            하수도정보시스템
+            <br />
+            <span>CMS 통합관리시스템</span>
+          </h1>
+          <p>하수도정보시스템 CMS 통합관리시스템에 오신 것을 환영합니다.</p>
+        </div>
+        <div className="img">
+          <Image src={images.logo} width={229} height={46} alt="logo" />
+        </div>
+      </div>
+      <form
+        id="loginForm"
+        name="loginForm"
+        method="post"
+        onSubmit={handleSubmit}
+      >
+        <div className="login_box fx">
+          <ul className="fx">
+            <li>
+              <h2>ID</h2>
+              <div className="input_st st1">
+                <i className="diveicon di-account-box" />
+                <input
+                  type="text"
+                  className="id"
+                  title="아이디를 입력하세요."
+                  id="id"
+                  name="id"
+                  maxLength={12}
+                />
+              </div>
+            </li>
+            <li>
+              <h2>PASSWORD</h2>
+              <div className="input_st st2">
+                <i className="diveicon di-key" />
+                <input
+                  type="password"
+                  className="input_style"
+                  maxLength={25}
+                  title="비밀번호를 입력하세요."
+                  id="password"
+                  name="password"
+                />
+              </div>
+            </li>
+          </ul>
+          <div className="bottom_box fx">
+            <div className="checks fx">
+              <input
+                type="checkbox"
+                name="checkId"
+                title="로그인ID 저장여부"
+                id="checkId"
+              />
+              <label htmlFor="checkId">아이디저장</label>
+            </div>
+            {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
+          </div>
+          <button type="submit" className="login_btn fx">
+            <span>LOGIN</span>
+          </button>
+          <div className="footer">
+            <div className="copy fx">
+              <p>copyright © 2023 KECO. All rights reserved.</p>
+            </div>
+            <div className="fot_btn fx">
+              <a
+                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
+                target="_blank"
+              >
+                개인정보처리방침
+              </a>
+              <a
+                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
+                target="_blank"
+              >
+                저작권정책안내
+              </a>
+              <a
+                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
+                target="_blank"
+              >
+                이메일무단수집거부
+              </a>
+            </div>
+            <p className="addr fx">
+              <span>
+                주소 : (22689) 인천광역시 서구 환경로 42(경서동
+                종합환경연구단지)
+              </span>
+              <span>
+                전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
+                3722
+              </span>
+              <span>팩스 :032-590-3729</span>
+            </p>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export { LoginPage };
+
diff --git a/apps/sn/src/features/auth/login/ui/login.css b/apps/sn/src/features/auth/login/ui/login.css
new file mode 100644
index 000000000..af73c9c68
--- /dev/null
+++ b/apps/sn/src/features/auth/login/ui/login.css
@@ -0,0 +1,310 @@
+/**
+* OLYM Cascading Style Sheets
+* File Name : login.css
+* Description : 로그인 스타일시트
+* Author : Web business Team / Choi Hyun Mi
+* Email : desingtj@olym.co.kr
+* Date : 2023.07.20
+* Update : 2023.07.26
+* Copyright(c) 2023 OLYM Communications. All Rights Reserved.
+*/
+html,
+body {
+  background: #fff;
+}
+.fx {
+  display: flex;
+  -ms-display: flex;
+  -webkit-display: flex;
+  box-sizing: border-box;
+}
+.login {
+  width: 100%;
+  height: 100vh;
+}
+.login .left_box {
+  width: 100%;
+  background: url(/images/bg_login.jpg) no-repeat center/cover;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 7% 5% 5% 5%;
+}
+.login .left_box .text h1 {
+  font-size: 53px;
+  color: #fff;
+}
+.login .left_box .text h1 span {
+  font-weight: 800;
+}
+.login .left_box .text p {
+  margin-top: 40px;
+  font-size: 18px;
+  color: #fff;
+}
+.login .login_box {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4% 12% 4% 6%;
+}
+.login .login_box > ul {
+  flex-direction: column;
+  gap: 40px;
+}
+.login .login_box > ul > li h2 {
+  font-size: 22px;
+  font-weight: 600;
+  color: #2640a5;
+  margin-bottom: 14px;
+}
+.login .login_box > ul > li .input_st {
+  position: relative;
+}
+.login .login_box > ul > li .input_st .diveicon {
+  position: absolute;
+  top: 50%;
+  left: 28px;
+  transform: translateY(-50%);
+  font-family: "Xeicon";
+  font-size: 25px;
+  color: #003288;
+}
+.login .login_box > ul > li input {
+  width: 100%;
+  padding: 20px 20px 20px 70px;
+  background: #f7f7f7;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 5px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #000;
+  height: auto;
+}
+.login .login_box > ul > li input:focus {
+  outline: 1px solid #3c5fe5;
+}
+.login .login_box > ul > li input::placeholder {
+  color: #afabab;
+  font-weight: 500;
+}
+.login .login_box .bottom_box {
+  justify-content: space-between;
+  gap: 20px;
+  padding: 50px 0 45px 0;
+}
+.login .login_box .bottom_box .checks {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.login .login_box .bottom_box .checks input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+}
+.login .login_box .bottom_box .checks label {
+  font-size: 14px;
+}
+.login .login_box .bottom_box .pw_message {
+  align-items: center;
+  gap: 5px;
+  color: #636363;
+  font-weight: 500;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 5px;
+}
+.login .login_box .bottom_box .pw_message i {
+  color: #327af5;
+  font-size: 20px;
+}
+.login .login_box .login_btn {
+  position: relative;
+  border-radius: 5px;
+  padding: 24px 15px;
+  background: linear-gradient(
+    to left,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  color: #fff;
+  cursor: pointer;
+}
+.login .login_box .login_btn span {
+  font-family: "Montserrat";
+  font-size: 19px;
+  font-weight: 700;
+  position: relative;
+}
+.login .login_box .login_btn i {
+  font-size: 22px;
+  transform: translateY(-2px);
+}
+.login .login_box .login_btn:before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: linear-gradient(
+    to right,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  transition: opacity 0.5s;
+}
+.login .login_box .login_btn:hover::before {
+  opacity: 1;
+}
+.login .footer .copy {
+  margin-top: 36px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 3%;
+}
+.login .footer .copy p {
+  font-size: 13px;
+  color: #d4d4d4;
+  width: 44%;
+  text-align: center;
+}
+.login .footer .copy::before,
+.login .login_box .copy::after {
+  content: "";
+  width: 20%;
+  height: 1px;
+  background: #d4d4d4;
+}
+.login .footer .fot_btn {
+  gap: 20px;
+  margin: 30px 0 10px 0;
+}
+.login .footer .fot_btn a {
+  color: #333;
+  font-weight: 700;
+  font-size: 13px;
+}
+.login .footer .fot_btn a:hover {
+  color: #003288;
+}
+.login .footer .addr {
+  color: #666;
+  font-size: 13px;
+  gap: 3px 20px;
+  flex-wrap: wrap;
+}
+/* 비밀번호 변경 팝업창 */
+.login .modal .modal_container {
+  width: 750px;
+}
+.login .pw_desc {
+  padding: 10px 10px 30px 10px;
+  color: #666;
+}
+.login .pw_desc p {
+  font-size: 1.25rem;
+  color: #000;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+.login .pw_desc span {
+  color: #f60;
+  font-weight: 700;
+}
+.login .modal .form_write {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  padding: 20px 50px;
+}
+@media (max-width: 1024px) {
+  .login {
+    flex-direction: column;
+    height: auto;
+  }
+  .login .left_box {
+    padding: 30px;
+    flex-direction: column-reverse;
+    gap: 20px;
+  }
+  .login .left_box .text h1 {
+    font-size: 30px;
+    line-height: 1.2em;
+  }
+  .login .left_box .text p {
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .login .left_box .img img {
+    height: 40px;
+  }
+  .login .login_box {
+    padding: 30px;
+  }
+  .login .login_box > ul {
+    gap: 20px;
+  }
+  .login .login_box > ul > li h2 {
+    margin-bottom: 7px;
+  }
+  .login .login_box > ul > li .input_st::after {
+    left: 15px;
+    font-size: 20px;
+  }
+  .login .login_box > ul > li input {
+    padding: 15px 10px 15px 50px;
+    font-size: 16px;
+  }
+  .login .login_box .bottom_box {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 30px 0;
+  }
+  .login .login_box .bottom_box .id_save label {
+    font-size: 14px;
+  }
+  .login .login_box .login_btn {
+    padding: 15px;
+  }
+  .login .login_box .login_btn span {
+    font-size: 16px;
+  }
+  .login .login_box .login_btn i {
+    font-size: 18px;
+    transform: translateY(-1px);
+  }
+  .login .login_box .copy p {
+    width: 100%;
+  }
+  .login .login_box .copy::before,
+  .login .login_box .copy::after {
+    display: none;
+  }
+  .login .footer .addr {
+    font-size: 11px;
+    gap: 3px 10px;
+  }
+  .login .modal .modal_container {
+    width: 90%;
+  }
+  .login .pw_desc {
+    padding: 0 0 20px 0;
+  }
+  .login .modal .form_write {
+    padding: 10px;
+  }
+}
+/* // login */
diff --git a/apps/sn/src/features/windowPopup/index.ts b/apps/sn/src/features/windowPopup/index.ts
new file mode 100644
index 000000000..8424dcc1d
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/index.ts
@@ -0,0 +1,14 @@
+export { openWindowPopup } from "./lib/openWindowPopup";
+export {
+  isWindowPopupKey,
+  windowPopupDefinitions,
+  type WindowPopupKey,
+} from "./model/popupDefinitions";
+export { windowPopupRegistry } from "./registry";
+export type {
+  OpenWindowPopupParams,
+  WindowPopupContentProps,
+  WindowPopupMessageType,
+  WindowPopupSearchParams,
+} from "./model/types";
+export { WINDOW_POPUP_MESSAGE_TYPE } from "./model/types";
diff --git a/apps/sn/src/features/windowPopup/lib/openWindowPopup.ts b/apps/sn/src/features/windowPopup/lib/openWindowPopup.ts
new file mode 100644
index 000000000..dbb90794a
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/lib/openWindowPopup.ts
@@ -0,0 +1,61 @@
+import {
+  isWindowPopupKey,
+  windowPopupDefinitions,
+  type WindowPopupKey,
+} from "../model/popupDefinitions";
+import type { OpenWindowPopupParams } from "../model/types";
+
+const buildQueryString = (params: OpenWindowPopupParams = {}) => {
+  const searchParams = new URLSearchParams();
+
+  Object.entries(params).forEach(([key, value]) => {
+    if (value === null || value === undefined || value === "") return;
+    searchParams.set(key, String(value));
+  });
+
+  const queryString = searchParams.toString();
+  return queryString ? `?${queryString}` : "";
+};
+
+const buildPopupFeatures = (width: number, height: number) => {
+  const screenLeft = window.screenX ?? window.screenLeft ?? 0;
+  const screenTop = window.screenY ?? window.screenTop ?? 0;
+  const outerWidth = window.outerWidth || window.screen.width;
+  const outerHeight = window.outerHeight || window.screen.height;
+  const left = Math.max(0, screenLeft + Math.round((outerWidth - width) / 2));
+  const top = Math.max(0, screenTop + Math.round((outerHeight - height) / 2));
+
+  return [
+    `width=${width}`,
+    `height=${height}`,
+    `left=${left}`,
+    `top=${top}`,
+    "resizable=yes",
+    "scrollbars=yes",
+    "status=no",
+    "location=no",
+    "menubar=no",
+    "toolbar=no",
+  ].join(",");
+};
+
+export const openWindowPopup = (
+  popupKey: WindowPopupKey,
+  params?: OpenWindowPopupParams,
+) => {
+  if (typeof window === "undefined") return null;
+  if (!isWindowPopupKey(popupKey)) return null;
+
+  const definition = windowPopupDefinitions[popupKey];
+  const popupUrl = `/popup/${popupKey}${buildQueryString(params)}`;
+  const popupFeatures = buildPopupFeatures(definition.width, definition.height);
+  const popupWindow = window.open(
+    popupUrl,
+    `sn-popup-${popupKey}`,
+    popupFeatures,
+  );
+
+  popupWindow?.focus();
+
+  return popupWindow;
+};
diff --git a/apps/sn/src/features/windowPopup/lib/popupMessage.ts b/apps/sn/src/features/windowPopup/lib/popupMessage.ts
new file mode 100644
index 000000000..6ae7ad7f9
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/lib/popupMessage.ts
@@ -0,0 +1,24 @@
+import type { WindowPopupMessageType } from "../model/types";
+
+export const postPopupMessage = (
+  type: WindowPopupMessageType,
+  payload?: Record<string, string>,
+) => {
+  if (typeof window === "undefined" || !window.opener) return;
+
+  window.opener.postMessage(
+    {
+      type,
+      payload,
+    },
+    window.location.origin,
+  );
+};
+
+export const postPopupMessageAndClose = (
+  type: WindowPopupMessageType,
+  payload?: Record<string, string>,
+) => {
+  postPopupMessage(type, payload);
+  window.close();
+};
diff --git a/apps/sn/src/features/windowPopup/model/popupDefinitions.ts b/apps/sn/src/features/windowPopup/model/popupDefinitions.ts
new file mode 100644
index 000000000..fe2ee66ba
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/model/popupDefinitions.ts
@@ -0,0 +1,124 @@
+import type { WindowPopupDefinition } from "./types";
+
+export const windowPopupDefinitions = {
+  oldPpUpload: {
+    key: "oldPpUpload",
+    title: "노후 하수관로 정비사업 등록",
+    width: 860,
+    height: 360,
+  },
+  oldPpTable: {
+    key: "oldPpTable",
+    title: "노후 하수관로 정비사업 상세",
+    width: 1400,
+    height: 900,
+    requiredParams: ["fileNm", "atflId"],
+  },
+  floodPreUpload: {
+    key: "floodPreUpload",
+    title: "도시침수 예방사업 등록",
+    width: 860,
+    height: 360,
+  },
+  floodPreTable: {
+    key: "floodPreTable",
+    title: "도시침수 예방사업 상세",
+    width: 1400,
+    height: 900,
+    requiredParams: ["fileNm", "atflId"],
+  },
+  reportTab: {
+    key: "reportTab",
+    title: "하수도정비 기본계획보고서",
+    width: 1280,
+    height: 920,
+  },
+  reportFiles: {
+    key: "reportFiles",
+    title: "보고서 파일 목록",
+    width: 860,
+    height: 720,
+    requiredParams: ["clsfSystmSn"],
+  },
+  mapSearch: {
+    key: "mapSearch",
+    title: "관망도 검색",
+    width: 1280,
+    height: 980,
+  },
+  infilChart: {
+    key: "infilChart",
+    title: "침입수 분석",
+    width: 1360,
+    height: 980,
+    requiredParams: ["pplMngNo"],
+  },
+  rdiiChart: {
+    key: "rdiiChart",
+    title: "RDII 분석",
+    width: 1360,
+    height: 980,
+    requiredParams: ["pplMngNo"],
+  },
+  sscDetail: {
+    key: "sscDetail",
+    title: "중점우수토실 운영정보",
+    width: 1180,
+    height: 980,
+    requiredParams: ["chmbrXcnts", "chmbrYdnts"],
+  },
+  agedPipePopup: {
+    key: "agedPipePopup",
+    title: "노후 하수관로 관리 ",
+    width: 1180,
+    height: 760,
+  },
+  pipeAnalysisPopup: {
+    key: "pipeAnalysisPopup",
+    title: "관로분석",
+    width: 1180,
+    height: 820,
+  },
+  pipeAnalysisDetailPopup: {
+    key: "pipeAnalysisDetailPopup",
+    title: "관로현황",
+    width: 1180,
+    height: 760,
+  },
+  floodPredictionMapPopup: {
+    key: "floodPredictionMapPopup",
+    title: "침수예측지도",
+    width: 1080,
+    height: 760,
+  },
+  floodHistoryPopup: {
+    key: "floodHistoryPopup",
+    title: "침수발생이력",
+    width: 1080,
+    height: 760,
+  },
+  gisEditPopup: {
+    key: "gisEditPopup",
+    title: "GIS 편집",
+    width: 1080,
+    height: 760,
+  },
+  gisManagementPopup: {
+    key: "gisManagementPopup",
+    title: "GIS 관리",
+    width: 1080,
+    height: 760,
+  },
+  flowRiskPopup: {
+    key: "flowRiskPopup",
+    title: "통수 위험",
+    width: 1080,
+    height: 760,
+  },
+} as const satisfies Record<string, WindowPopupDefinition>;
+
+export type WindowPopupKey = keyof typeof windowPopupDefinitions;
+
+export const isWindowPopupKey = (key: string): key is WindowPopupKey => {
+  return key in windowPopupDefinitions;
+};
diff --git a/apps/sn/src/features/windowPopup/model/types.ts b/apps/sn/src/features/windowPopup/model/types.ts
new file mode 100644
index 000000000..8387e03c1
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/model/types.ts
@@ -0,0 +1,37 @@
+import type { ComponentType } from "react";
+
+export type WindowPopupSearchParams = Record<
+  string,
+  string | string[] | undefined
+>;
+
+export type WindowPopupContentProps = {
+  searchParams: WindowPopupSearchParams;
+};
+
+export type WindowPopupDefinition = {
+  key: string;
+  title: string;
+  width: number;
+  height: number;
+  requiredParams?: string[];
+};
+
+export type WindowPopupRegistryItem = WindowPopupDefinition & {
+  component: ComponentType<WindowPopupContentProps>;
+};
+
+export type OpenWindowPopupParams = Record<
+  string,
+  string | number | boolean | null | undefined
+>;
+
+export const WINDOW_POPUP_MESSAGE_TYPE = {
+  OLD_PP_UPLOAD_COMPLETED: "sn:popup:oldPpUploadCompleted",
+  FLOOD_PRE_UPLOAD_COMPLETED: "sn:popup:floodPreUploadCompleted",
+  MAP_SEARCH_SELECT_FEATURE: "sn:popup:mapSearchSelectFeature",
+  MAP_SEARCH_SHOW_MULTIPLE: "sn:popup:mapSearchShowMultiple",
+} as const;
+
+export type WindowPopupMessageType =
+  (typeof WINDOW_POPUP_MESSAGE_TYPE)[keyof typeof WINDOW_POPUP_MESSAGE_TYPE];
diff --git a/apps/sn/src/features/windowPopup/registry.tsx b/apps/sn/src/features/windowPopup/registry.tsx
new file mode 100644
index 000000000..c76d9064f
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/registry.tsx
@@ -0,0 +1,118 @@
+import { windowPopupDefinitions, type WindowPopupKey } from "./model/popupDefinitions";
+import type { WindowPopupRegistryItem } from "./model/types";
+import AgedPipePopupContent from "./ui/AgedPipePopupContent";
+import FloodPreTablePopupContent from "./ui/FloodPreTablePopupContent";
+import FloodPreUploadPopupContent from "./ui/FloodPreUploadPopupContent";
+import InfilChartPopupContent from "./ui/InfilChartPopupContent";
+import OldPpUploadPopupContent from "./ui/OldPpUploadPopupContent";
+import OldPpTablePopupContent from "./ui/OldPpTablePopupContent";
+import RdiiChartPopupContent from "./ui/RdiiChartPopupContent";
+import ReportFilesPopupContent from "./ui/ReportFilesPopupContent";
+import ReportTabPopupContent from "./ui/ReportTabPopupContent";
+import SearchModalPopupContent from "./ui/SearchModalPopupContent";
+import SscDetailPopupContent from "./ui/SscDetailPopupContent";
+import type { WindowPopupContentProps } from "./model/types";
+import FeaturePlaceholderPopupContent from "./ui/FeaturePlaceholderPopupContent";
+import PipeAnalysisPopupContent from "./ui/PipeAnalysisPopupContent";
+import PipeAnalysisDetailPopupContent from "./ui/PipeAnalysisDetailPopupContent";
+
+const FloodPredictionMapPopupContent = (_props: WindowPopupContentProps) => (
+  <FeaturePlaceholderPopupContent
+    title={windowPopupDefinitions.floodPredictionMapPopup.title}
+  />
+);
+
+const FloodHistoryPopupContent = (_props: WindowPopupContentProps) => (
+  <FeaturePlaceholderPopupContent
+    title={windowPopupDefinitions.floodHistoryPopup.title}
+  />
+);
+
+const GisEditPopupContent = (_props: WindowPopupContentProps) => (
+  <FeaturePlaceholderPopupContent title={windowPopupDefinitions.gisEditPopup.title} />
+);
+
+const GisManagementPopupContent = (_props: WindowPopupContentProps) => (
+  <FeaturePlaceholderPopupContent
+    title={windowPopupDefinitions.gisManagementPopup.title}
+  />
+);
+
+const FlowRiskPopupContent = (_props: WindowPopupContentProps) => (
+  <FeaturePlaceholderPopupContent title={windowPopupDefinitions.flowRiskPopup.title} />
+);
+
+export const windowPopupRegistry = {
+  oldPpUpload: {
+    ...windowPopupDefinitions.oldPpUpload,
+    component: OldPpUploadPopupContent,
+  },
+  oldPpTable: {
+    ...windowPopupDefinitions.oldPpTable,
+    component: OldPpTablePopupContent,
+  },
+  floodPreUpload: {
+    ...windowPopupDefinitions.floodPreUpload,
+    component: FloodPreUploadPopupContent,
+  },
+  floodPreTable: {
+    ...windowPopupDefinitions.floodPreTable,
+    component: FloodPreTablePopupContent,
+  },
+  reportTab: {
+    ...windowPopupDefinitions.reportTab,
+    component: ReportTabPopupContent,
+  },
+  reportFiles: {
+    ...windowPopupDefinitions.reportFiles,
+    component: ReportFilesPopupContent,
+  },
+  mapSearch: {
+    ...windowPopupDefinitions.mapSearch,
+    component: SearchModalPopupContent,
+  },
+  infilChart: {
+    ...windowPopupDefinitions.infilChart,
+    component: InfilChartPopupContent,
+  },
+  rdiiChart: {
+    ...windowPopupDefinitions.rdiiChart,
+    component: RdiiChartPopupContent,
+  },
+  sscDetail: {
+    ...windowPopupDefinitions.sscDetail,
+    component: SscDetailPopupContent,
+  },
+  agedPipePopup: {
+    ...windowPopupDefinitions.agedPipePopup,
+    component: AgedPipePopupContent,
+  },
+  pipeAnalysisPopup: {
+    ...windowPopupDefinitions.pipeAnalysisPopup,
+    component: PipeAnalysisPopupContent,
+  },
+  pipeAnalysisDetailPopup: {
+    ...windowPopupDefinitions.pipeAnalysisDetailPopup,
+    component: PipeAnalysisDetailPopupContent,
+  },
+  floodPredictionMapPopup: {
+    ...windowPopupDefinitions.floodPredictionMapPopup,
+    component: FloodPredictionMapPopupContent,
+  },
+  floodHistoryPopup: {
+    ...windowPopupDefinitions.floodHistoryPopup,
+    component: FloodHistoryPopupContent,
+  },
+  gisEditPopup: {
+    ...windowPopupDefinitions.gisEditPopup,
+    component: GisEditPopupContent,
+  },
+  gisManagementPopup: {
+    ...windowPopupDefinitions.gisManagementPopup,
+    component: GisManagementPopupContent,
+  },
+  flowRiskPopup: {
+    ...windowPopupDefinitions.flowRiskPopup,
+    component: FlowRiskPopupContent,
+  },
+} as const satisfies Record<WindowPopupKey, WindowPopupRegistryItem>;
diff --git a/apps/sn/src/features/windowPopup/ui/AgedPipePopupContent.tsx b/apps/sn/src/features/windowPopup/ui/AgedPipePopupContent.tsx
new file mode 100644
index 000000000..9ff897803
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/AgedPipePopupContent.tsx
@@ -0,0 +1,10 @@
+import { Suspense } from "react";
+import AgedPipePopupPage from "@/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage";
+
+export default function AgedPipePopupContent() {
+  return (
+    <Suspense fallback={null}>
+      <AgedPipePopupPage />
+    </Suspense>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx
new file mode 100644
index 000000000..e05b3b6b5
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx
@@ -0,0 +1,25 @@
+type Props = {
+  title: string;
+};
+
+export default function FeaturePlaceholderPopupContent({ title }: Props) {
+  return (
+    <main className="flex h-screen flex-col overflow-hidden bg-white">
+      <header className="flex min-h-[44px] items-center border-b border-[#dbe2e6] bg-primary px-5 py-3">
+        <h1 className="text-[1.45rem] font-semibold text-white">{title}</h1>
+      </header>
+
+      <section className="flex flex-1 items-center justify-center bg-slate-50 p-8">
+        <div className="w-full max-w-[520px] rounded-md border border-slate-200 bg-white p-8 text-center shadow-sm">
+          <h2 className="text-[1.35rem] font-semibold text-slate-800">{title}</h2>
+          <p className="mt-4 text-[1.1rem] leading-7 text-slate-600">
+            현재는 팝업 창 구조만 우선 연결했습니다.
+          </p>
+          <p className="mt-2 text-[1.05rem] leading-7 text-slate-500">
+            상세 기능은 추후 단계에서 구현될 예정입니다.
+          </p>
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/FloodPreTablePopupContent.tsx b/apps/sn/src/features/windowPopup/ui/FloodPreTablePopupContent.tsx
new file mode 100644
index 000000000..bbc342b70
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/FloodPreTablePopupContent.tsx
@@ -0,0 +1,36 @@
+import TableModal from "@/app/(with-base-layout)/oper/floodPre/tableModal";
+import { windowPopupDefinitions } from "../model/popupDefinitions";
+import type { WindowPopupContentProps } from "../model/types";
+import PopupMissingParams from "./PopupMissingParams";
+import { getPopupParamValue } from "./popupContentUtils";
+
+export default function FloodPreTablePopupContent({
+  searchParams,
+}: WindowPopupContentProps) {
+  const fileNm = getPopupParamValue(searchParams.fileNm);
+  const atflId = getPopupParamValue(searchParams.atflId);
+  const missingParams = [
+    !fileNm ? "fileNm" : "",
+    !atflId ? "atflId" : "",
+  ].filter(Boolean);
+
+  if (missingParams.length > 0) {
+    return (
+      <PopupMissingParams
+        title={windowPopupDefinitions.floodPreTable.title}
+        missingParams={missingParams}
+      />
+    );
+  }
+
+  return (
+    <div className="flex h-dvh flex-col overflow-hidden bg-white p-4">
+      <h1 className="mb-3 shrink-0 text-2xl font-semibold">
+        {windowPopupDefinitions.floodPreTable.title}
+      </h1>
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <TableModal fileNm={fileNm} atflId={atflId} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/FloodPreUploadPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/FloodPreUploadPopupContent.tsx
new file mode 100644
index 000000000..629c6be53
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/FloodPreUploadPopupContent.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { postData } from "@/components/lib/api";
+import OperFileUploadForm from "@/components/ui/operFileUploadForm";
+import { tokenManager } from "@/entities/auth/lib/token-manager";
+import { AUTH_USER_ID } from "@/shared/config";
+import { postPopupMessageAndClose } from "../lib/popupMessage";
+import { windowPopupDefinitions } from "../model/popupDefinitions";
+import { WINDOW_POPUP_MESSAGE_TYPE } from "../model/types";
+
+export default function FloodPreUploadPopupContent() {
+  const handleSubmit = async (
+    fileNm: string,
+    year: string,
+    quater: string,
+    cd: string,
+    id: string,
+  ) => {
+    const data = await postData("v1/sbmrgPrevnt", {
+      mngYr: year,
+      mngQu: quater,
+      atflId: id,
+      atflCd: cd,
+      rgtr: tokenManager.getToken(AUTH_USER_ID) || null,
+      sbmrgPrevntBizNm: fileNm,
+    });
+
+    if (data) {
+      alert("파일이 등록되었습니다.");
+      postPopupMessageAndClose(WINDOW_POPUP_MESSAGE_TYPE.FLOOD_PRE_UPLOAD_COMPLETED);
+    }
+  };
+
+  return (
+    <div className="min-h-dvh bg-white p-4">
+      <OperFileUploadForm
+        title={windowPopupDefinitions.floodPreUpload.title}
+        onSubmit={handleSubmit}
+      />
+    </div>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/InfilChartPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/InfilChartPopupContent.tsx
new file mode 100644
index 000000000..f6a739f53
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/InfilChartPopupContent.tsx
@@ -0,0 +1,22 @@
+import InfilChart from "@/app/(map-layout)/map/components/popupComponent/chart/infilChart";
+import { windowPopupDefinitions } from "../model/popupDefinitions";
+import type { WindowPopupContentProps } from "../model/types";
+import PopupMissingParams from "./PopupMissingParams";
+import { getPopupParamValue } from "./popupContentUtils";
+
+export default function InfilChartPopupContent({
+  searchParams,
+}: WindowPopupContentProps) {
+  const pplMngNo = getPopupParamValue(searchParams.pplMngNo);
+
+  if (!pplMngNo) {
+    return (
+      <PopupMissingParams
+        title={windowPopupDefinitions.infilChart.title}
+        missingParams={["pplMngNo"]}
+      />
+    );
+  }
+
+  return <InfilChart pplMngNo={pplMngNo} />;
+}
diff --git a/apps/sn/src/features/windowPopup/ui/OldPpTablePopupContent.tsx b/apps/sn/src/features/windowPopup/ui/OldPpTablePopupContent.tsx
new file mode 100644
index 000000000..3d3439d9c
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/OldPpTablePopupContent.tsx
@@ -0,0 +1,36 @@
+import TableModal from "@/app/(with-base-layout)/oper/oldPp/tableModal";
+import { windowPopupDefinitions } from "../model/popupDefinitions";
+import type { WindowPopupContentProps } from "../model/types";
+import PopupMissingParams from "./PopupMissingParams";
+import { getPopupParamValue } from "./popupContentUtils";
+
+export default function OldPpTablePopupContent({
+  searchParams,
+}: WindowPopupContentProps) {
+  const fileNm = getPopupParamValue(searchParams.fileNm);
+  const atflId = getPopupParamValue(searchParams.atflId);
+  const missingParams = [
+    !fileNm ? "fileNm" : "",
+    !atflId ? "atflId" : "",
+  ].filter(Boolean);
+
+  if (missingParams.length > 0) {
+    return (
+      <PopupMissingParams
+        title={windowPopupDefinitions.oldPpTable.title}
+        missingParams={missingParams}
+      />
+    );
+  }
+
+  return (
+    <div className="flex h-dvh flex-col overflow-hidden bg-white p-4">
+      <h1 className="mb-3 shrink-0 text-2xl font-semibold">
+        {windowPopupDefinitions.oldPpTable.title}
+      </h1>
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <TableModal fileNm={fileNm} atflId={atflId} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/OldPpUploadPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/OldPpUploadPopupContent.tsx
new file mode 100644
index 000000000..e8e1b1e52
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/OldPpUploadPopupContent.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { postData } from "@/components/lib/api";
+import OperFileUploadForm from "@/components/ui/operFileUploadForm";
+import { tokenManager } from "@/entities/auth/lib/token-manager";
+import { AUTH_USER_ID } from "@/shared/config";
+import { postPopupMessageAndClose } from "../lib/popupMessage";
+import { windowPopupDefinitions } from "../model/popupDefinitions";
+import { WINDOW_POPUP_MESSAGE_TYPE } from "../model/types";
+
+export default function OldPpUploadPopupContent() {
+  const handleSubmit = async (
+    fileNm: string,
+    year: string,
+    quater: string,
+    cd: string,
+    id: string,
+  ) => {
+    const data = await postData("v1/dcrpPpl", {
+      mngYr: year,
+      mngQu: quater,
+      atflCd: cd,
+      atflId: id,
+      rgtr: tokenManager.getToken(AUTH_USER_ID) || null,
+      dcrpPplMtncBizNm: fileNm,
+    });
+
+    if (data) {
+      alert("파일이 등록되었습니다.");
+      postPopupMessageAndClose(WINDOW_POPUP_MESSAGE_TYPE.OLD_PP_UPLOAD_COMPLETED);
+    }
+  };
+
+  return (
+    <div className="min-h-dvh bg-white p-4">
+      <OperFileUploadForm
+        title={windowPopupDefinitions.oldPpUpload.title}
+        onSubmit={handleSubmit}
+      />
+    </div>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/PipeAnalysisDetailPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/PipeAnalysisDetailPopupContent.tsx
new file mode 100644
index 000000000..c7d6f1f2a
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/PipeAnalysisDetailPopupContent.tsx
@@ -0,0 +1,10 @@
+import { Suspense } from "react";
+import PipeAnalysisDetailPopupPage from "@/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage";
+
+export default function PipeAnalysisDetailPopupContent() {
+  return (
+    <Suspense fallback={null}>
+      <PipeAnalysisDetailPopupPage />
+    </Suspense>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/PipeAnalysisPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/PipeAnalysisPopupContent.tsx
new file mode 100644
index 000000000..215b559a9
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/PipeAnalysisPopupContent.tsx
@@ -0,0 +1,10 @@
+import { Suspense } from "react";
+import PipeAnalysisPopupPage from "@/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage";
+
+export default function PipeAnalysisPopupContent() {
+  return (
+    <Suspense fallback={null}>
+      <PipeAnalysisPopupPage />
+    </Suspense>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/PopupMissingParams.tsx b/apps/sn/src/features/windowPopup/ui/PopupMissingParams.tsx
new file mode 100644
index 000000000..32b8bb088
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/PopupMissingParams.tsx
@@ -0,0 +1,19 @@
+export default function PopupMissingParams({
+  title,
+  missingParams,
+}: {
+  title: string;
+  missingParams: string[];
+}) {
+  return (
+    <section className="flex min-h-dvh flex-col items-center justify-center gap-4 p-8 text-center">
+      <h1 className="text-2xl font-semibold">{title}</h1>
+      <p className="text-base text-gray-600">
+        팝업을 여는 데 필요한 값이 누락되었습니다.
+      </p>
+      <p className="text-sm text-gray-500">
+        누락된 값: {missingParams.join(", ")}
+      </p>
+    </section>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/RdiiChartPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/RdiiChartPopupContent.tsx
new file mode 100644
index 000000000..8a591e004
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/RdiiChartPopupContent.tsx
@@ -0,0 +1,22 @@
+import RdiiChart from "@/app/(map-layout)/map/components/popupComponent/chart/rdiiChart";
+import { windowPopupDefinitions } from "../model/popupDefinitions";
+import type { WindowPopupContentProps } from "../model/types";
+import PopupMissingParams from "./PopupMissingParams";
+import { getPopupParamValue } from "./popupContentUtils";
+
+export default function RdiiChartPopupContent({
+  searchParams,
+}: WindowPopupContentProps) {
+  const pplMngNo = getPopupParamValue(searchParams.pplMngNo);
+
+  if (!pplMngNo) {
+    return (
+      <PopupMissingParams
+        title={windowPopupDefinitions.rdiiChart.title}
+        missingParams={["pplMngNo"]}
+      />
+    );
+  }
+
+  return <RdiiChart pplMngNo={pplMngNo} />;
+}
diff --git a/apps/sn/src/features/windowPopup/ui/ReportFilesPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/ReportFilesPopupContent.tsx
new file mode 100644
index 000000000..de3064383
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/ReportFilesPopupContent.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import LoadingOverlay from "@/components/ui/LoadingBar";
+import { getDcData } from "@/components/lib/api";
+import { UiTable } from "@common/business_components/ui";
+import { windowPopupDefinitions } from "../model/popupDefinitions";
+import type { WindowPopupContentProps } from "../model/types";
+import PopupMissingParams from "./PopupMissingParams";
+import { getPopupParamValue } from "./popupContentUtils";
+
+type ReportDataFile = {
+  no?: number;
+  fileTitle: string;
+  regDt: string;
+  fileSn: string;
+  filePath: string;
+};
+
+const REPORT_FILES_HEADLIST = [
+  { id: "no", title: "NO" },
+  { id: "fileTitle", title: "파일명" },
+  { id: "regDt", title: "등록일자" },
+];
+
+export default function ReportFilesPopupContent({
+  searchParams,
+}: WindowPopupContentProps) {
+  const clsfSystmSn = getPopupParamValue(searchParams.clsfSystmSn);
+  const [files, setFiles] = useState<ReportDataFile[]>([]);
+  const [allFiles, setAllFiles] = useState<ReportDataFile[]>([]);
+  const [curPage, setCurPage] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (!clsfSystmSn) return;
+
+    const fetchFiles = async () => {
+      setIsLoading(true);
+      try {
+        const result = await getDcData(`/api/v1/file?clsfSystmSn=${clsfSystmSn}`);
+        const normalized = (result ?? []).map((item: ReportDataFile, index: number) => ({
+          ...item,
+          no: index + 1,
+        }));
+        setAllFiles(normalized);
+      } catch (error) {
+        console.error("보고서 파일 목록 조회 실패:", error);
+        setAllFiles([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchFiles();
+  }, [clsfSystmSn]);
+
+  useEffect(() => {
+    const paged = allFiles.slice((curPage - 1) * 10, curPage * 10);
+    setFiles(paged);
+  }, [allFiles, curPage]);
+
+  const handleDownload = async (fileSn: string, fileTitle: string, filePath: string) => {
+    if (!filePath) {
+      alert("filePath 정보가 없으므로 다운로드가 불가합니다.");
+      return;
+    }
+
+    try {
+      const responseBlob = await getDcData(
+        `/api/v1/fileDownload?filePath=${encodeURIComponent(filePath)}`,
+        "blob",
+      );
+
+      const objectUrl = URL.createObjectURL(responseBlob);
+      const anchor = document.createElement("a");
+      anchor.href = objectUrl;
+      anchor.download = fileTitle;
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      URL.revokeObjectURL(objectUrl);
+    } catch (error) {
+      console.error("보고서 파일 다운로드 실패:", error);
+      alert("파일 다운로드 중 오류가 발생했습니다.");
+    }
+  };
+
+  if (!clsfSystmSn) {
+    return (
+      <PopupMissingParams
+        title={windowPopupDefinitions.reportFiles.title}
+        missingParams={["clsfSystmSn"]}
+      />
+    );
+  }
+
+  return (
+    <div className="flex h-dvh flex-col overflow-hidden bg-white p-4">
+      <h1 className="mb-3 shrink-0 text-2xl font-semibold">
+        {windowPopupDefinitions.reportFiles.title}
+      </h1>
+      <div className="min-h-0 flex-1 overflow-auto">
+        <LoadingOverlay isLoading={isLoading} />
+        <UiTable
+          headName={`조회 결과 (${allFiles.length.toLocaleString("ko-KR")})건`}
+          tableData={files}
+          headlist={REPORT_FILES_HEADLIST}
+          pageSize={10}
+          total={allFiles.length}
+          onPageChange={setCurPage}
+          cellClick={(index) => {
+            if (typeof index !== "number" || !files[index]) return;
+            const target = files[index];
+            handleDownload(target.fileSn, target.fileTitle, target.filePath);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/ReportTabPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/ReportTabPopupContent.tsx
new file mode 100644
index 000000000..d2913df8e
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/ReportTabPopupContent.tsx
@@ -0,0 +1,27 @@
+import ReportTab from "@/app/(map-layout)/map/searchModal/reportTab";
+import { windowPopupDefinitions } from "../model/popupDefinitions";
+import type { WindowPopupContentProps } from "../model/types";
+import { getPopupParamValue } from "./popupContentUtils";
+
+export default function ReportTabPopupContent({
+  searchParams,
+}: WindowPopupContentProps) {
+  const ctpvNm = getPopupParamValue(searchParams.ctpvNm);
+  const sggNm = getPopupParamValue(searchParams.sggNm);
+
+  return (
+    <div className="flex h-dvh flex-col overflow-hidden bg-white p-4">
+      <h1 className="mb-3 shrink-0 text-2xl font-semibold">
+        {windowPopupDefinitions.reportTab.title}
+      </h1>
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <ReportTab
+          open={true}
+          isSearch={false}
+          ctpvNm={ctpvNm || undefined}
+          sggNm={sggNm || undefined}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/SearchModalPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/SearchModalPopupContent.tsx
new file mode 100644
index 000000000..0bbb50bbe
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/SearchModalPopupContent.tsx
@@ -0,0 +1,5 @@
+import SearchModal from "@/app/(map-layout)/map/searchModal/searchModal";
+
+export default function SearchModalPopupContent() {
+  return <SearchModal renderMode="popup" />;
+}
diff --git a/apps/sn/src/features/windowPopup/ui/SscDetailPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/SscDetailPopupContent.tsx
new file mode 100644
index 000000000..9e0ff6464
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/SscDetailPopupContent.tsx
@@ -0,0 +1,36 @@
+import Ssc from "@/app/(map-layout)/map/components/popupComponent/Ssc";
+import { windowPopupDefinitions } from "../model/popupDefinitions";
+import type { WindowPopupContentProps } from "../model/types";
+import PopupMissingParams from "./PopupMissingParams";
+import { getPopupParamValue } from "./popupContentUtils";
+
+export default function SscDetailPopupContent({
+  searchParams,
+}: WindowPopupContentProps) {
+  const chmbrXcnts = getPopupParamValue(searchParams.chmbrXcnts);
+  const chmbrYdnts = getPopupParamValue(searchParams.chmbrYdnts);
+
+  const missingParams = [
+    !chmbrXcnts ? "chmbrXcnts" : "",
+    !chmbrYdnts ? "chmbrYdnts" : "",
+  ].filter(Boolean);
+
+  if (missingParams.length > 0) {
+    return (
+      <PopupMissingParams
+        title={windowPopupDefinitions.sscDetail.title}
+        missingParams={missingParams}
+      />
+    );
+  }
+
+  return (
+    <Ssc
+      featureData={null}
+      isMainSsc={true}
+      chmbrXcnts={chmbrXcnts}
+      chmbrYdnts={chmbrYdnts}
+      renderMode="popup"
+    />
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/popupContentUtils.ts b/apps/sn/src/features/windowPopup/ui/popupContentUtils.ts
new file mode 100644
index 000000000..5b2c1152f
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/popupContentUtils.ts
@@ -0,0 +1,6 @@
+export const getPopupParamValue = (
+  value: string | string[] | undefined,
+): string => {
+  if (Array.isArray(value)) return value[0] ?? "";
+  return value ?? "";
+};
diff --git a/apps/sn/src/shared/providers/prompt-provider.tsx b/apps/sn/src/shared/providers/prompt-provider.tsx
index 10338c338..7724d0326 100644
--- a/apps/sn/src/shared/providers/prompt-provider.tsx
+++ b/apps/sn/src/shared/providers/prompt-provider.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useState } from "react";
 
 interface PromptContext {
diff --git a/apps/st/.env.example b/apps/st/.env.example
index 9f786831b..c2715e0cd 100644
--- a/apps/st/.env.example
+++ b/apps/st/.env.example
@@ -1,7 +1,8 @@
 # apps/cs/src/shared/config/env.ts 참고
-NEXT_PUBLIC_PORT=3000
-NEXT_PUBLIC_PROXY_HOST=http://localhost:3000
-NEXT_PUBLIC_SITE_ID=CS
+NEXT_PUBLIC_PORT=3001
+NEXT_PUBLIC_PROXY_HOST=http://localhost:3001
+SERVER_API_URL=http://192.168.0.102:8000
+NEXT_PUBLIC_SITE_ID=ST
 NEXT_PUBLIC_SUB_DOMAIN=http://localhost:3000
-NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000
-NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2
\ No newline at end of file
+NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2
+NEXT_PUBLIC_ST_DASHBOARD_BBS_ID=13
\ No newline at end of file
diff --git a/apps/st/app/(main)/(with-base-layout)/layout.tsx b/apps/st/app/(main)/(with-base-layout)/layout.tsx
index 6faa92cc1..287cc4c38 100644
--- a/apps/st/app/(main)/(with-base-layout)/layout.tsx
+++ b/apps/st/app/(main)/(with-base-layout)/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { useCallback, useEffect, useMemo } from "react";
-import { usePathname } from "next/navigation";
+import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
 
 import {
     getTabStoreState as getGridTabStoreState,
@@ -11,61 +11,105 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { ENDPOINT } from "@/shared/config";
 import { getCookie, useAlertStore, useMenuStore } from "@/shared/lib";
+import { isBbsNoticeMenu } from "@/shared/lib/bbs-notice-menu";
+import {
+    menuMatchesStatisticsTabId,
+    resolveStatisticsTabId,
+} from "@/shared/lib/statistics-menu-url";
+import { useStatisticsTabUrlSync } from "@/shared/lib/use-statistics-tab-url-sync";
+import { isVerificationSelectionReportMenu } from "@/shared/lib/verification-selection-report";
 import { StatisticsPageLayout } from "@/shared/ui/statistics-page-layout";
-import { MenuApi } from "@/entities/menu";
+import { tokenManager } from "@/entities/auth";
 import type { MenuItem } from "@/entities/menu";
+import { MenuApi } from "@/entities/menu";
 import { BaseLayout } from "@common/components";
 import { getConfig } from "@common/config";
 
+import VerificationSelectionReport from "@/components/statistics/VerificationSelectionReport";
 import { getTabStoreState, useTabStore } from "@/store/tab-store";
 
 const appConfig = getConfig();
+
 const userId = getCookie(appConfig.AUTH_USER_ID ?? "");
+
 const appSiteId = getCookie("site-id-key") ?? "";
+
 const isLoggedIn = !!userId;
 
-export default function WithBaseLayout({
-    children,
-}: {
-    children: React.ReactNode;
-}) {
+function WithBaseLayoutInner({ children }: { children: React.ReactNode }) {
     const pathname = usePathname();
+    const router = useRouter();
+
     const queryClient = useQueryClient();
 
+    /** 탭 추가 없이 메뉴만 눌렀을 때 패널 유지 (다른 메뉴 클릭해도 유지) */
+
+    const [isVerificationSelectionReportPanelOpen, setReportPanelOpen] =
+        useState(false);
+
     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 { syncTabToUrl } = useStatisticsTabUrlSync({
+        pathname,
+
+        menuList,
+
+        activeTabId,
+
+        addTab,
+
+        addTabForGrid,
+
+        setCurrentMenuInfo,
+    });
+
     const { data: menuListData } = useQuery({
         queryKey: [ENDPOINT.CMS_SERVICE.MENU_ROLES],
+
         queryFn: () => MenuApi.getMenuRoles(appSiteId),
+
         enabled: isLoggedIn,
     });
 
     useEffect(() => {
         if (menuListData) {
             setMenuList(menuListData);
+
             setMenuListForGrid(menuListData);
         }
     }, [menuListData, setMenuList, setMenuListForGrid]);
 
     // 새로고침 후 persist로 앱 탭만 복원된 경우 rsone 그리드 스토어에 탭을 맞춤
+
     useEffect(() => {
         if (!menuList) return;
+
         const appTabs = getTabStoreState().tabs;
+
         if (appTabs.length === 0) return;
+
         if (getGridTabStoreState().tabs.length > 0) return;
 
         for (const tab of appTabs) {
@@ -73,46 +117,41 @@ export default function WithBaseLayout({
         }
 
         const activeId = getTabStoreState().activeTabId;
+
         if (activeId) {
+            setActiveTab(activeId);
+
             const activeTab = appTabs.find((t) => t.id === activeId);
+
             const gridActiveId = activeTab?.menuItem.menuEngNm;
+
             if (gridActiveId) {
                 getGridTabStoreState().setActiveTab(gridActiveId);
             }
         }
-    }, [menuList, tabs]);
-
-    useEffect(() => {
-        if (!pathname) return;
-
-        // pathname이 변경될 때만 실행되도록 tabs를 직접 가져옴
-        const currentTabs = getTabStoreState().tabs;
-        const tab = currentTabs.find((t) => t.path === pathname);
-        if (tab) {
-            setActiveTab(tab.id);
-            const gridActiveId = tab.menuItem.menuEngNm;
-            if (gridActiveId) {
-                setActiveTabForGrid(gridActiveId);
-            }
-        }
-    }, [pathname, setActiveTab, setActiveTabForGrid]);
+    }, [menuList, tabs, setActiveTab]);
 
     // 활성 탭의 메뉴를 찾아서 urlPath를 가져옴. 탭이 전부 닫히면 ''를 넘겨 LNB에서 메뉴 강조 제거
+
     const currentPath = useMemo(() => {
         if (tabs.length === 0) return "";
 
         if (activeTabId && menuList) {
             // menuList에서 활성 탭의 메뉴 찾기
+
             const findMenuByEngNm = (items: MenuItem[]): MenuItem | null => {
                 for (const item of items) {
-                    if (item.urlPath === activeTabId) {
+                    if (menuMatchesStatisticsTabId(item, activeTabId)) {
                         return item;
                     }
+
                     if (item.children) {
                         const found = findMenuByEngNm(item.children);
+
                         if (found) return found;
                     }
                 }
+
                 return null;
             };
 
@@ -124,48 +163,111 @@ export default function WithBaseLayout({
         }
 
         // 탭에서 직접 찾기
+
         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) => {
+            if (item.urlPath.includes("/cms/")) return;
+
             setCurrentMenuInfo(item);
+
+            if (isVerificationSelectionReportMenu(item)) {
+                setReportPanelOpen(true);
+
+                return;
+            }
+
+            if (isBbsNoticeMenu(item)) {
+                if (item.urlPath) {
+                    router.push(item.urlPath);
+                }
+                return;
+            }
+
             const addTabResult: boolean = addTab(item);
 
             // packages/rsone의 스토어에도 동기화
+
             if (addTabResult) {
                 addTabForGrid(item);
+
+                if (item.urlPath) {
+                    syncTabToUrl(resolveStatisticsTabId(item.urlPath));
+                }
             }
 
             if (!addTabResult) {
-                alert(`최대 추가 할 수 있는 화면 수를 초과 하였습니다.
+                alert(`최대 추가 할 수 있는 화면 수(10개)를 \n초과 하였습니다.
+
             기존 화면을 닫은 후 이용해주세요.`);
             }
         },
-        [setCurrentMenuInfo, addTab, addTabForGrid, alert],
+
+        [
+            setCurrentMenuInfo,
+
+            addTab,
+
+            addTabForGrid,
+
+            alert,
+
+            setReportPanelOpen,
+
+            syncTabToUrl,
+
+            router,
+        ],
     );
 
     return (
         <BaseLayout
             queryClient={queryClient}
+            tokenManager={tokenManager}
             currentPath={currentPath}
             handleMenuClick={handleMenuClick}
         >
-            <StatisticsPageLayout>{children}</StatisticsPageLayout>
+            <div className="flex h-full flex-1">
+                {isVerificationSelectionReportPanelOpen && (
+                    <VerificationSelectionReport
+                        onClose={() => setReportPanelOpen(false)}
+                    />
+                )}
+
+                <StatisticsPageLayout>{children}</StatisticsPageLayout>
+            </div>
         </BaseLayout>
     );
 }
+
+export default function WithBaseLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <Suspense fallback={null}>
+            <WithBaseLayoutInner>{children}</WithBaseLayoutInner>
+        </Suspense>
+    );
+}
diff --git a/apps/st/middleware.ts b/apps/st/middleware.ts
index 9a2a48cb1..bd0020508 100644
--- a/apps/st/middleware.ts
+++ b/apps/st/middleware.ts
@@ -1,147 +1,159 @@
 import { NextRequest, NextResponse } from "next/server";
+
 import {
-  CLAIM_NAME,
-  AUTH_USER_ID,
-  PORT,
-  PROXY_HOST,
-  SERVER_API_URL,
-  SITE_ID,
-  ST_SERVICE_URL,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    PORT,
+    PROXY_HOST,
+    SERVER_API_URL,
+    SITE_ID,
+    ST_SERVICE_URL,
 } from "./src/shared/config";
 
-const serverApiUrl =
-  process.env.NEXT_PUBLIC_SERVER_API_URL ?? "http://localhost:3000";
+const serverApiUrl = process.env.SERVER_API_URL;
 
 const stServiceUrl = ST_SERVICE_URL;
 
-const linkBackendApiHost = process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST ?? "http://localhost:8080";
+const linkBackendApiHost =
+    process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST ?? "http://localhost:8080";
 
 // CSP 헤더 설정 함수 (img-src만)
 function addSecurityHeaders(response: NextResponse): NextResponse {
-  response.headers.set("Content-Security-Policy", "img-src 'self' data: https: blob:;");
-  return response;
+    response.headers.set(
+        "Content-Security-Policy",
+        "img-src 'self' data: https: blob:;",
+    );
+    return response;
 }
 
 export function middleware(req: NextRequest) {
-  const pathname = req.nextUrl.pathname;
-  const searchParams = req.nextUrl.searchParams;
+    const pathname = req.nextUrl.pathname;
+    const searchParams = req.nextUrl.searchParams;
 
-  const logMessages: string[] = [
-    `[Middleware Request] ${new Date().toISOString()}`,
-    `[Environment]\n  Mode: ${process.env.NODE_ENV}\n  Port: ${PORT}\n  Proxy Host: ${PROXY_HOST}\n  Server API URL: ${SERVER_API_URL}\n  Site ID: ${SITE_ID}\n  ST Service URL: ${stServiceUrl}`,
-    `[Request]\n  Original Pathname: ${pathname}`,
-  ];
+    const logMessages: string[] = [
+        `[Middleware Request] ${new Date().toISOString()}`,
+        `[Environment]\n  Mode: ${process.env.NODE_ENV}\n  Port: ${PORT}\n  Proxy Host: ${PROXY_HOST}\n  Server API URL: ${SERVER_API_URL}\n  Site ID: ${SITE_ID}\n  ST Service URL: ${stServiceUrl}`,
+        `[Request]\n  Original Pathname: ${pathname}`,
+    ];
 
-  // ST Service 처리 (dc의 /server/dc-service 패턴과 동일)
-  if (pathname.startsWith("/server/st-management-service") || pathname.startsWith("/server/st-input-service")) {
-    const requestHeaders = new Headers(req.headers);
-    const token = req.cookies.get(CLAIM_NAME)?.value;
-    const userId = req.cookies.get(AUTH_USER_ID)?.value;
+    // ST Service 처리 (dc의 /server/dc-service 패턴과 동일)
+    if (
+        pathname.startsWith("/server/st-management-service") ||
+        pathname.startsWith("/server/st-input-service")
+    ) {
+        const requestHeaders = new Headers(req.headers);
+        const token = req.cookies.get(CLAIM_NAME)?.value;
+        const userId = req.cookies.get(AUTH_USER_ID)?.value;
 
-    const queryParams = searchParams.toString();
-    const newUrl = `${stServiceUrl}${pathname.replace("/server", "")}${
-      queryParams ? `?${queryParams}` : ""
-    }`;
+        const queryParams = searchParams.toString();
+        const newUrl = `${stServiceUrl}${pathname.replace("/server", "")}${
+            queryParams ? `?${queryParams}` : ""
+        }`;
 
-    if (token) requestHeaders.set(CLAIM_NAME, token);
-    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
+        if (token) requestHeaders.set(CLAIM_NAME, token);
+        if (userId) requestHeaders.set(AUTH_USER_ID, userId);
+
+        logMessages.push(`  Token Debug: ${token ? "EXISTS" : "MISSING"}`);
+        logMessages.push(`  UserId Debug: ${userId ? "EXISTS" : "MISSING"}`);
+        logMessages.push(`  ST Service Rewritten URL: ${newUrl}`);
+        logMessages.push("\n--------------------------------\n");
+        console.log(logMessages.join("\n"));
+
+        const response = NextResponse.rewrite(new URL(newUrl), {
+            headers: requestHeaders,
+        });
+        return addSecurityHeaders(response);
+    }
+
+    // 일반 Server API 처리 (ST 서비스 제외)
+    if (
+        pathname.startsWith("/server") &&
+        !pathname.startsWith("/server/st-management-service") &&
+        !pathname.startsWith("/server/st-input-service")
+    ) {
+        const requestHeaders = new Headers(req.headers);
+        const token = req.cookies.get(CLAIM_NAME)?.value;
+        const userId = req.cookies.get(AUTH_USER_ID)?.value;
+
+        const queryParams = searchParams.toString();
+        const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
+            queryParams ? `?${queryParams}` : ""
+        }`;
+
+        if (token) requestHeaders.set(CLAIM_NAME, token);
+        if (userId) requestHeaders.set(AUTH_USER_ID, userId);
+
+        logMessages.push(`  Rewritten URL: ${newUrl}`);
+        logMessages.push("\n--------------------------------\n");
+        console.log(logMessages.join("\n"));
+
+        const response = NextResponse.rewrite(new URL(newUrl), {
+            headers: requestHeaders,
+        });
+        return addSecurityHeaders(response);
+    }
+
+    if (pathname.startsWith("/attach-service")) {
+        const requestHeaders = new Headers(req.headers);
+        const token = req.cookies.get(CLAIM_NAME)?.value;
+        const userId = req.cookies.get(AUTH_USER_ID)?.value;
+        const newUrl = `${serverApiUrl}${pathname}`;
+
+        if (token) requestHeaders.set(CLAIM_NAME, token);
+        if (userId) requestHeaders.set(AUTH_USER_ID, userId);
+
+        logMessages.push(`  Rewritten URL: ${newUrl}`);
+        logMessages.push("\n--------------------------------\n");
+        console.log(logMessages.join("\n"));
+
+        const response = NextResponse.rewrite(new URL(newUrl), {
+            headers: requestHeaders,
+        });
+        return addSecurityHeaders(response);
+    }
+
+    if (pathname.startsWith("/api/link")) {
+        const requestHeaders = new Headers(req.headers);
+        const token = req.cookies.get(CLAIM_NAME)?.value;
+        const userId = req.cookies.get(AUTH_USER_ID)?.value;
+
+        // /api/link 경로를 제거하고 백엔드 API 경로로 변환
+        const apiPath = pathname.replace("/api/link", "");
+        const queryParams = searchParams.toString();
+        const newUrl = `${linkBackendApiHost}${apiPath}${
+            queryParams ? `?${queryParams}` : ""
+        }`;
+
+        if (token) requestHeaders.set(CLAIM_NAME, token);
+        if (userId) requestHeaders.set(AUTH_USER_ID, userId);
+
+        logMessages.push(`  Link API Rewritten URL: ${newUrl}`);
+        logMessages.push("\n--------------------------------\n");
+        console.log(logMessages.join("\n"));
+
+        const response = NextResponse.rewrite(new URL(newUrl), {
+            headers: requestHeaders,
+        });
+        return addSecurityHeaders(response);
+    }
+
+    if (pathname === "/") {
+        const response = NextResponse.redirect(new URL("/statistics", req.url));
+        return addSecurityHeaders(response);
+    }
 
-    logMessages.push(`  Token Debug: ${token ? "EXISTS" : "MISSING"}`);
-    logMessages.push(`  UserId Debug: ${userId ? "EXISTS" : "MISSING"}`);
-    logMessages.push(`  ST Service Rewritten URL: ${newUrl}`);
     logMessages.push("\n--------------------------------\n");
     console.log(logMessages.join("\n"));
 
-    const response = NextResponse.rewrite(new URL(newUrl), {
-      headers: requestHeaders,
-    });
+    const response = NextResponse.next();
     return addSecurityHeaders(response);
-  }
-
-  // 일반 Server API 처리 (ST 서비스 제외)
-  if (
-    pathname.startsWith("/server") &&
-    !pathname.startsWith("/server/st-management-service") &&
-    !pathname.startsWith("/server/st-input-service")
-  ) {
-    const requestHeaders = new Headers(req.headers);
-    const token = req.cookies.get(CLAIM_NAME)?.value;
-    const userId = req.cookies.get(AUTH_USER_ID)?.value;
-
-    const queryParams = searchParams.toString();
-    const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
-      queryParams ? `?${queryParams}` : ""
-    }`;
-
-    if (token) requestHeaders.set(CLAIM_NAME, token);
-    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
-
-    logMessages.push(`  Rewritten URL: ${newUrl}`);
-    logMessages.push("\n--------------------------------\n");
-    console.log(logMessages.join("\n"));
-
-    const response = NextResponse.rewrite(new URL(newUrl), {
-      headers: requestHeaders,
-    });
-    return addSecurityHeaders(response);
-  }
-
-  if (pathname.startsWith("/attach-service")) {
-    const requestHeaders = new Headers(req.headers);
-    const token = req.cookies.get(CLAIM_NAME)?.value;
-    const userId = req.cookies.get(AUTH_USER_ID)?.value;
-    const newUrl = `${serverApiUrl}${pathname}`;
-
-    if (token) requestHeaders.set(CLAIM_NAME, token);
-    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
-
-    logMessages.push(`  Rewritten URL: ${newUrl}`);
-    logMessages.push("\n--------------------------------\n");
-    console.log(logMessages.join("\n"));
-
-    const response = NextResponse.rewrite(new URL(newUrl), {
-      headers: requestHeaders,
-    });
-    return addSecurityHeaders(response);
-  }
-
-  if (pathname.startsWith("/api/link")) {
-    const requestHeaders = new Headers(req.headers);
-    const token = req.cookies.get(CLAIM_NAME)?.value;
-    const userId = req.cookies.get(AUTH_USER_ID)?.value;
-    
-    // /api/link 경로를 제거하고 백엔드 API 경로로 변환
-    const apiPath = pathname.replace("/api/link", "");
-    const queryParams = searchParams.toString();
-    const newUrl = `${linkBackendApiHost}${apiPath}${
-      queryParams ? `?${queryParams}` : ""
-    }`;
-
-    if (token) requestHeaders.set(CLAIM_NAME, token);
-    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
-
-    logMessages.push(`  Link API Rewritten URL: ${newUrl}`);
-    logMessages.push("\n--------------------------------\n");
-    console.log(logMessages.join("\n"));
-
-    const response = NextResponse.rewrite(new URL(newUrl), {
-      headers: requestHeaders,
-    });
-    return addSecurityHeaders(response);
-  }
-
-  if (pathname === "/") {
-    const response = NextResponse.redirect(new URL("/statistics", req.url));
-    return addSecurityHeaders(response);
-  }
-
-  logMessages.push("\n--------------------------------\n");
-  console.log(logMessages.join("\n"));
-  
-  const response = NextResponse.next();
-  return addSecurityHeaders(response);
 }
 
 export const config = {
-  matcher: ["/server/:path*", "/attach-service/:path*", "/api/link/:path*", "/"],
+    matcher: [
+        "/server/:path*",
+        "/attach-service/:path*",
+        "/api/link/:path*",
+        "/",
+    ],
 };
diff --git a/apps/st/package.json b/apps/st/package.json
index 9880cab30..7ae6c9f53 100644
--- a/apps/st/package.json
+++ b/apps/st/package.json
@@ -1,74 +1,79 @@
 {
-  "name": "st",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@common/assets": "workspace:*",
-    "@common/components": "workspace:*",
-    "@common/config": "workspace:*",
-    "@faker-js/faker": "^9.9.0",
-    "@fontsource-variable/noto-sans-kr": "^5.2.5",
-    "@frontend-opensource/use-react-hooks": "^1.1.4",
-    "@fullcalendar/core": "^6.1.17",
-    "@fullcalendar/daygrid": "^6.1.17",
-    "@fullcalendar/interaction": "^6.1.17",
-    "@fullcalendar/react": "^6.1.17",
-    "@fullcalendar/timegrid": "^6.1.17",
-    "@hookform/resolvers": "^4.1.3",
-    "@minoru/react-dnd-treeview": "3.5.1-alpha.1",
-    "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-tooltip": "^1.1.8",
-    "@rsone/components": "workspace:*",
-    "@tanstack/react-query": "^5.67.1",
-    "@tanstack/react-query-devtools": "^5.75.5",
-    "@tanstack/react-table": "^8.21.2",
-    "@tinymce/tinymce-react": "^5.1.1",
-    "@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",
-    "lucide-react": "^0.474.0",
-    "next": "15.3.8",
-    "next-qrcode": "^2.5.1",
-    "next-themes": "^0.4.6",
-    "react-chartjs-2": "^5.3.0",
-    "react-dnd": "^16.0.1",
-    "react-hook-form": "^7.54.2",
-    "realgrid": "^2.9.5",
-    "realgrid-react": "^0.9.7",
-    "remixicon": "^4.7.0",
-    "sonner": "^2.0.1",
-    "swr": "^2.3.7",
-    "tailwindcss-animate": "^1.0.7",
-    "tus-js-client": "^4.3.1",
-    "xlsx": "^0.18.5",
-    "zod": "^3.24.2",
-    "zustand": "^5.0.3"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@types/js-cookie": "^3.0.6",
-    "@types/node": "^22.13.1",
-    "@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",
-    "steiger": "^0.5.5",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
-  }
+    "name": "st",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev -p 3001",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@common/assets": "workspace:*",
+        "@common/auth": "workspace:*",
+        "@common/components": "workspace:*",
+        "@common/config": "workspace:*",
+        "@common/network": "workspace:*",
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^8.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "@faker-js/faker": "^9.9.0",
+        "@fontsource-variable/noto-sans-kr": "^5.2.5",
+        "@frontend-opensource/use-react-hooks": "^1.1.4",
+        "@fullcalendar/core": "^6.1.17",
+        "@fullcalendar/daygrid": "^6.1.17",
+        "@fullcalendar/interaction": "^6.1.17",
+        "@fullcalendar/react": "^6.1.17",
+        "@fullcalendar/timegrid": "^6.1.17",
+        "@hookform/resolvers": "^4.1.3",
+        "@minoru/react-dnd-treeview": "3.5.1-alpha.1",
+        "@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/react-label": "^2.1.2",
+        "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-tooltip": "^1.1.8",
+        "@rsone/components": "workspace:*",
+        "@tanstack/react-query": "^5.67.1",
+        "@tanstack/react-query-devtools": "^5.75.5",
+        "@tanstack/react-table": "^8.21.2",
+        "@tinymce/tinymce-react": "^5.1.1",
+        "@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",
+        "lucide-react": "^0.474.0",
+        "next": "15.5.18",
+        "next-qrcode": "^2.5.1",
+        "next-themes": "^0.4.6",
+        "react-chartjs-2": "^5.3.0",
+        "react-dnd": "^16.0.1",
+        "react-hook-form": "^7.54.2",
+        "realgrid": "^2.9.5",
+        "realgrid-react": "^0.9.7",
+        "remixicon": "^4.7.0",
+        "sonner": "^2.0.1",
+        "swr": "^2.3.7",
+        "tailwindcss-animate": "^1.0.7",
+        "tus-js-client": "^4.3.1",
+        "xlsx": "^0.18.5",
+        "zod": "^3.24.2",
+        "zustand": "^5.0.3"
+    },
+    "devDependencies": {
+        "@eslint/eslintrc": "^3",
+        "@types/js-cookie": "^3.0.6",
+        "@types/node": "^22.13.1",
+        "@types/webpack": "^5.28.5",
+        "eslint": "^9",
+        "eslint-config-next": "15.3.8",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "postcss": "^8",
+        "prettier": "^3.4.2",
+        "prettier-plugin-tailwindcss": "^0.6.11",
+        "steiger": "^0.5.5",
+        "tailwindcss": "^3.4.1",
+        "typescript": "^5"
+    }
 }
diff --git a/apps/st/src/app/providers/app-provider.tsx b/apps/st/src/app/providers/app-provider.tsx
index 70e69eee8..4e64d241c 100644
--- a/apps/st/src/app/providers/app-provider.tsx
+++ b/apps/st/src/app/providers/app-provider.tsx
@@ -12,6 +12,7 @@ import { AlertDialog } from "@/shared/ui/alert-dialog";
 import { PromptDialog } from "@/shared/ui/prompt-dialog";
 import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 import { SelectPromptDialog } from "@/shared/ui/select-prompt-dialog";
+import { GlobalProgressOverlay } from "@/shared/ui/global-progress-overlay";
 import { PromptProvider, StoreProvider } from "@/shared/providers";
 import { AlertDialog as RsoneAlertDialog } from "@rsone/components";
 
@@ -36,6 +37,7 @@ const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
               <PromptDialog />
               <ConfirmDialog />
               <SelectPromptDialog />
+              <GlobalProgressOverlay />
               <Toaster position="top-center" />
             </AuthWrapper>
           </ConfirmProvider>
diff --git a/apps/st/src/components/Dashboard.tsx b/apps/st/src/components/Dashboard.tsx
deleted file mode 100644
index f3682d1e0..000000000
--- a/apps/st/src/components/Dashboard.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-const Dashboard = () => {
-    return (
-        <div>
-            Dashboard
-        </div>
-    );
-};
-
-export default Dashboard;
\ No newline at end of file
diff --git a/apps/st/src/components/button/AddArticleButton.tsx b/apps/st/src/components/button/AddArticleButton.tsx
index b1bb3252f..3458ca8ee 100644
--- a/apps/st/src/components/button/AddArticleButton.tsx
+++ b/apps/st/src/components/button/AddArticleButton.tsx
@@ -6,7 +6,7 @@ interface AddArticleButtonProps {
 
 const AddArticleButton = ({ addArticleFunc }: AddArticleButtonProps) => {
     return (
-        <Button className="h-[3.2rem] w-[96px]" onClick={addArticleFunc}>
+        <Button className="h-[3.2rem] w-[96px]" color="white" onClick={addArticleFunc}>
             <i className="ri-add-fill" />
             <span>항목 추가</span>
         </Button>
diff --git a/apps/st/src/components/button/ApproveButton.tsx b/apps/st/src/components/button/ApproveButton.tsx
index 36455f7ff..76d3618f5 100644
--- a/apps/st/src/components/button/ApproveButton.tsx
+++ b/apps/st/src/components/button/ApproveButton.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@common/components";
 
 interface ApproveButtonProps {
-    approveFunc: () => void;
+    approveFunc: () => void | Promise<void>;
 }
 
 const ApproveButton = ({ approveFunc }: ApproveButtonProps) => {
diff --git a/apps/st/src/components/button/DeleteArticleButton.tsx b/apps/st/src/components/button/DeleteArticleButton.tsx
index 1a6432a64..e350b404b 100644
--- a/apps/st/src/components/button/DeleteArticleButton.tsx
+++ b/apps/st/src/components/button/DeleteArticleButton.tsx
@@ -6,7 +6,7 @@ interface DeleteArticleButtonProps {
 
 const DeleteArticleButton = ({ deleteArticleFunc }: DeleteArticleButtonProps) => {
     return (
-        <Button className="h-[3.2rem] w-[96px]" color="red" onClick={deleteArticleFunc}>
+        <Button className="h-[3.2rem] w-[96px]" color="white" onClick={deleteArticleFunc}>
             <i className="ri-subtract-fill"></i>
             <span>항목 제거</span>
         </Button>
diff --git a/apps/st/src/components/button/ReviewOpinionButton.tsx b/apps/st/src/components/button/ReviewOpinionButton.tsx
index 50df8fcb4..fbcdbd754 100644
--- a/apps/st/src/components/button/ReviewOpinionButton.tsx
+++ b/apps/st/src/components/button/ReviewOpinionButton.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@common/components";
 
 interface ReviewOpinionButtonProps {
-    reviewOpinionFunc: () => void;
+    reviewOpinionFunc: () => void | Promise<void>;
 }
 
 const ReviewOpinionButton = ({ reviewOpinionFunc }: ReviewOpinionButtonProps) => {
diff --git a/apps/st/src/components/button/VerificationResultButton.tsx b/apps/st/src/components/button/VerificationResultButton.tsx
new file mode 100644
index 000000000..580f6d0d0
--- /dev/null
+++ b/apps/st/src/components/button/VerificationResultButton.tsx
@@ -0,0 +1,16 @@
+import { Button } from "@common/components";
+
+interface VerificationResultButtonProps {
+    VerificationResultButtonFunc: () => void;
+}
+
+const VerificationResultButton = ({ VerificationResultButtonFunc }: VerificationResultButtonProps) => {
+    return (
+        <Button color="white" className="h-[3.2rem]" onClick={VerificationResultButtonFunc}>
+            <i className="diveicon di-list" />
+            <span>지난 검증 결과</span>
+        </Button>
+    );
+};
+
+export default VerificationResultButton;
\ No newline at end of file
diff --git a/apps/st/src/components/css/DataGrid.css b/apps/st/src/components/css/DataGrid.css
index cd21091f9..d90874c8c 100644
--- a/apps/st/src/components/css/DataGrid.css
+++ b/apps/st/src/components/css/DataGrid.css
@@ -1,27 +1,6 @@
 @tailwind components;
 
 @layer components {
-    .rg-grid .rg-header .rg-table .rg-header-group-cell {
-        @apply !bg-[#466995] !text-[#fff];
-    }
-    .rg-grid .rg-header .rg-table {
-        @apply !bg-[#5987bf] !text-[#fff];
-    }
-
-    /* 상태바·체크바 헤더 */
-    .rg-grid .rg-head .rg-table tr:first-child td:first-child,
-    .rg-grid .rg-head .rg-table tr:first-child td:nth-child(2),
-    .rg-grid .rg-header .rg-table tr:first-child td:first-child,
-    .rg-grid .rg-header .rg-table tr:first-child td:nth-child(2) {
-        @apply !bg-[#5987bf] !text-[#fff];
-    }
-
-    .rg-grid .rg-header .rg-table tr td,
-    .rg-grid .rg-head .rg-table tr td {
-        border: none;
-        border-bottom: 1px solid #e5e7eb;
-    }
-
     .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell {
         @apply !bg-white;
     }
@@ -32,67 +11,378 @@
     .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-verify-error {
         @apply !bg-[#ffe6e6] !text-[#c00];
     }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-verify-error-imr {
+        @apply !bg-[#fff7bf] !text-[#b45309];
+    }
+    /* 검증결과 내역: 처리여부(prcsYn 0·4 미처리 등) */
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-vrf-prcs-bad {
+        @apply !font-semibold !text-[#dc2626];
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-vrf-prcs-ok {
+        @apply !font-semibold !text-[#3372cf];
+    }
+    /* 검증결과 다이얼로그: 구분(NV·IMR·HB) */
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-vrf-mthd-nv {
+        @apply !bg-[#f3f4f6] !font-semibold !text-[#4b5563];
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-vrf-mthd-imr {
+        @apply !bg-[#fef2f2] !font-semibold !text-[#dc2626];
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-vrf-mthd-hb {
+        @apply !bg-[#eff6ff] !font-semibold !text-[#2563eb];
+    }
+    /* 개별 반려: 높이/레이아웃은 RealGrid 행에 그대로 두고, 색·테두리·정렬만 버튼 느낌 */
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-reject-mini-btn {
+        text-align: center !important;
+        vertical-align: middle !important;
+        box-sizing: border-box !important;
+        padding-left: 8px !important;
+        padding-right: 8px !important;
+        border-radius: 0.25rem !important;
+        border: 1px solid rgb(248 113 113 / 0.55) !important;
+        background-color: rgb(254 242 242) !important;
+        color: rgb(185 28 28) !important;
+        font-size: 1.2rem !important;
+        font-weight: 600 !important;
+        white-space: nowrap !important;
+        cursor: pointer !important;
+        text-decoration: none !important;
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-reject-mini-btn:hover {
+        background-color: rgb(254 226 226) !important;
+        border-color: rgb(239 68 68 / 0.85) !important;
+        color: rgb(153 27 27) !important;
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-reject-mini-btn:active {
+        background-color: rgb(254 202 202) !important;
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-outline-action-btn {
+        text-align: center !important;
+        vertical-align: middle !important;
+        box-sizing: border-box !important;
+        padding-left: 8px !important;
+        padding-right: 8px !important;
+        border-radius: 0.25rem !important;
+        border: 1px solid rgb(148 163 184 / 0.7) !important;
+        background-color: rgb(248 250 252) !important;
+        color: rgb(51 65 85) !important;
+        font-size: 1.2rem !important;
+        font-weight: 600 !important;
+        white-space: nowrap !important;
+        cursor: pointer !important;
+        text-decoration: none !important;
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-outline-action-btn:hover {
+        background-color: rgb(241 245 249) !important;
+        border-color: rgb(100 116 139 / 0.85) !important;
+        color: rgb(30 41 59) !important;
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-outline-action-btn:active {
+        background-color: rgb(226 232 240) !important;
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-action-link {
+        @apply !font-semibold !text-[#2563eb] underline;
+        cursor: pointer !important;
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-stats-status-pending {
+        @apply !text-gray-500;
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-stats-status-submitted {
+        @apply !font-semibold;
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-stats-status-approved {
+        @apply !font-semibold;
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-stats-status-rejected {
+        @apply !font-semibold !text-[#ff6c64];
+        white-space: nowrap !important;
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-stats-status-rejected > * {
+        display: inline-flex !important;
+        align-items: center !important;
+        justify-content: center;
+        width: max-content;
+        margin: 0 auto;
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-stats-status-rejected > *::after {
+        content: "";
+        display: inline-block;
+        margin-left: 0.25rem;
+        vertical-align: middle;
+        width: 0.6125rem;
+        height: 0.6125rem;
+        border-radius: 9999px;
+        background: #ff6c64;
+        box-shadow: 0 0 0 0 rgba(255, 108, 100, 0.75);
+        animation: rg-cell-stats-status-dot-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    }
     .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-total {
         @apply !bg-[#e3eaf2];
     }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-selected-row {
+        @apply !bg-[#dbeafe];
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-rowtype-biz-sum {
+        @apply !bg-[#ffe9cf];
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-rowtype-summary {
+        @apply !bg-[#feee85];
+    }
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-rowtype-other {
+        @apply !bg-[#fff7bf];
+    }
+    /* fixedColumns 영역은 rg-table/rg-data-row 구조가 다를 수 있어 별도 커버 */
+    .rg-grid .rg-body .rg-data-cell.rg-cell-rowtype-biz-sum {
+        @apply !bg-[#ffe9cf];
+    }
+    .rg-grid .rg-body .rg-data-cell.rg-cell-rowtype-summary {
+        @apply !bg-[#feee85];
+    }
+    .rg-grid .rg-body .rg-data-cell.rg-cell-rowtype-other {
+        @apply !bg-[#fff7bf];
+    }
+    .rg-grid .rg-fixed-body .rg-table .rg-data-row td.rg-cell-rowtype-biz-sum,
+    .rg-grid .rg-fixed-body .rg-data-row .rg-data-cell.rg-cell-rowtype-biz-sum {
+        @apply !bg-[#ffe9cf];
+    }
+    .rg-grid .rg-fixed-body .rg-table .rg-data-row td.rg-cell-rowtype-summary,
+    .rg-grid .rg-fixed-body .rg-data-row .rg-data-cell.rg-cell-rowtype-summary {
+        @apply !bg-[#feee85];
+    }
+    .rg-grid .rg-fixed-body .rg-table .rg-data-row td.rg-cell-rowtype-other,
+    .rg-grid .rg-fixed-body .rg-data-row .rg-data-cell.rg-cell-rowtype-other {
+        @apply !bg-[#fff7bf];
+    }
+
+    /*
+     * 검증 오류 셀(rg-cell-verify-error / -imr) 최우선 적용.
+     * 클래스 이중화로 specificity를 한 단계 올려 동일 specificity의 다른 셀 클래스
+     * (rg-cell-rowtype-*, rg-cell-total, rg-cell-readonly 등)보다 항상 이김.
+     */
+    .rg-grid .rg-body .rg-data-cell.rg-cell-verify-error.rg-cell-verify-error,
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-verify-error.rg-cell-verify-error,
+    .rg-grid .rg-fixed-body .rg-data-cell.rg-cell-verify-error.rg-cell-verify-error,
+    .rg-grid .rg-fixed-body .rg-data-row .rg-data-cell.rg-cell-verify-error.rg-cell-verify-error {
+        @apply !bg-[#ffe6e6] !text-[#c00];
+    }
+    .rg-grid .rg-body .rg-data-cell.rg-cell-verify-error-imr.rg-cell-verify-error-imr,
+    .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-verify-error-imr.rg-cell-verify-error-imr,
+    .rg-grid .rg-fixed-body .rg-data-cell.rg-cell-verify-error-imr.rg-cell-verify-error-imr,
+    .rg-grid .rg-fixed-body .rg-data-row .rg-data-cell.rg-cell-verify-error-imr.rg-cell-verify-error-imr {
+        @apply !bg-[#fff7bf] !text-[#b45309];
+    }
 
     /* 진행상황: 소프트 인라인 요약 (툴바와 자연스럽게 blend) */
     .data-grid-status-bubble {
-        @apply rounded-lg border border-slate-200/80 bg-slate-50/90 px-4 py-2.5;
+        @apply rounded-lg border border-slate-200/80 bg-white px-8 py-2.5;
         box-shadow: none;
     }
-    .data-grid-status-bubble span {
-        @apply text-base text-slate-700;
+    .data-grid-status-bubble > span {
+        @apply text-xl text-slate-700 font-bold;
     }
-    .data-grid-status-bubble span + span {
+    .data-grid-status-bubble > span + span {
         @apply ml-4 border-l border-slate-200/70 pl-4;
     }
+}
 
-    [data-theme="black"] {
-        .rg-grid .rg-header .rg-table .rg-header-group-cell {
-            @apply !bg-[#3C4043] !text-[#fff];
-        }
-        .rg-grid .rg-header .rg-table .rg-header-cell {
-            @apply !bg-[#62686d] !text-[#fff];
-        }
-        .rg-grid .rg-head .rg-table tr:first-child td:first-child,
-        .rg-grid .rg-head .rg-table tr:first-child td:nth-child(2),
-        .rg-grid .rg-header .rg-table tr:first-child td:first-child,
-        .rg-grid .rg-header .rg-table tr:first-child td:nth-child(2) {
-            @apply !bg-[#62686d] !text-[#fff];
-        }
-        .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell {
-            @apply !bg-[#545556] !text-[#fff];
-        }
-    }
-
-    [data-theme="red"] {
-        .rg-grid .rg-header .rg-table .rg-header-group-cell {
-            @apply !bg-[#646469] !text-[#fff];
-        }
-        .rg-grid .rg-header .rg-table .rg-header-cell {
-            @apply !bg-[#8d8d94] !text-[#fff];
-        }
-        .rg-grid .rg-head .rg-table tr:first-child td:first-child,
-        .rg-grid .rg-head .rg-table tr:first-child td:nth-child(2),
-        .rg-grid .rg-header .rg-table tr:first-child td:first-child,
-        .rg-grid .rg-header .rg-table tr:first-child td:nth-child(2) {
-            @apply !bg-[#8d8d94] !text-[#fff];
-        }
-    }
-
-    [data-theme="green"] {
-        .rg-grid .rg-header .rg-table .rg-header-group-cell {
-            @apply !bg-[#518585] !text-[#fff];
-        }
-        .rg-grid .rg-header .rg-table .rg-header-cell {
-            @apply !bg-[#6bafae] !text-[#fff];
-        }
-        .rg-grid .rg-head .rg-table tr:first-child td:first-child,
-        .rg-grid .rg-head .rg-table tr:first-child td:nth-child(2),
-        .rg-grid .rg-header .rg-table tr:first-child td:first-child,
-        .rg-grid .rg-header .rg-table tr:first-child td:nth-child(2) {
-            @apply !bg-[#6bafae] !text-[#fff];
-        }
+@keyframes rg-cell-stats-status-dot-ping {
+    75%,
+    100% {
+        box-shadow: 0 0 0 0.5rem rgba(255, 108, 100, 0);
     }
 }
+
+.tabs-content {
+    margin-top: 0.6rem !important;
+}
+
+/*
+ * RealGrid 기본 스타일(.rg-alternate-row { background: #fafafa })은 @layer 밖이라
+ * @layer components 규칙만으로는 tr 배경이 남을 수 있음.
+ * 스크롤 바디(.rg-body)만 흰색으로 통일 — 고정 영역(.rg-fixed-body)은 건드리지 않음.
+ */
+.rg-grid .rg-body .rg-table tr.rg-alternate-row {
+    background: #ffffff !important;
+    background-color: #ffffff !important;
+}
+
+.rg-grid .rg-body .rg-table tr.rg-alternate-row td,
+.rg-grid .rg-body .rg-table tr.rg-alternate-row .rg-data-cell {
+    background-color: #ffffff !important;
+}
+
+.rg-grid .rg-header .rg-table tr td,
+.rg-grid .rg-head .rg-table tr td {
+    border: none;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+/*
+ * ST 통계 그리드 헤더 색 — @layer 밖(일반 규칙).
+ * packages/rsone/components/grid/css/DataGrid.css 등 @layer 밖 !important와 동일 층에서
+ * .rg-grid … 특이도로 덮어씀.
+ */
+.rg-grid .rg-header .rg-table .rg-header-group-cell {
+    background-color: #5987bf !important;
+    color: #ffffff !important;
+}
+.rg-grid .rg-header .rg-table {
+    background-color: #5987bf !important;
+    color: #ffffff !important;
+}
+.rg-grid .rg-head .rg-table tr:first-child td:first-child,
+.rg-grid .rg-head .rg-table tr:first-child td:nth-child(2),
+.rg-grid .rg-header .rg-table tr:first-child td:first-child,
+.rg-grid .rg-header .rg-table tr:first-child td:nth-child(2) {
+    background-color: #5987bf !important;
+    color: #ffffff !important;
+}
+.rg-grid .rg-header .rg-cell,
+.rg-grid .rg-head .rg-cell {
+    background-color: #5987bf !important;
+    color: #ffffff !important;
+}
+
+.rg-header .rg-table tr td:hover { background: #5987bf; }
+
+[data-theme="black"] .rg-grid .rg-header .rg-table .rg-header-group-cell {
+    background-color: #3c4043 !important;
+    color: #ffffff !important;
+}
+[data-theme="black"] .rg-grid .rg-header .rg-table .rg-header-cell {
+    background-color: #62686d !important;
+    color: #ffffff !important;
+}
+[data-theme="black"] .rg-grid .rg-head .rg-table tr:first-child td:first-child,
+[data-theme="black"] .rg-grid .rg-head .rg-table tr:first-child td:nth-child(2),
+[data-theme="black"] .rg-grid .rg-header .rg-table tr:first-child td:first-child,
+[data-theme="black"] .rg-grid .rg-header .rg-table tr:first-child td:nth-child(2) {
+    background-color: #62686d !important;
+    color: #ffffff !important;
+}
+[data-theme="black"] .rg-grid .rg-header .rg-cell,
+[data-theme="black"] .rg-grid .rg-head .rg-cell {
+    background-color: #62686d !important;
+    color: #ffffff !important;
+}
+[data-theme="black"] .rg-header .rg-table tr td:hover {
+    background-color: #62686d !important;
+    color: #ffffff !important;
+}
+
+[data-theme="black"] .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell {
+    background-color: #545556 !important;
+    color: #ffffff !important;
+}
+[data-theme="black"] .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-vrf-prcs-bad {
+    color: #f87171 !important;
+}
+[data-theme="black"] .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-vrf-prcs-ok {
+    color: #3372cf !important;
+}
+[data-theme="black"] .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-vrf-mthd-nv {
+    background-color: #4b5563 !important;
+    color: #f9fafb !important;
+}
+[data-theme="black"] .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-vrf-mthd-imr {
+    background-color: rgb(127 29 29 / 0.55) !important;
+    color: #fecaca !important;
+}
+[data-theme="black"] .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-vrf-mthd-hb {
+    background-color: rgb(30 58 138 / 0.55) !important;
+    color: #bfdbfe !important;
+}
+[data-theme="black"] .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-reject-mini-btn {
+    background-color: rgb(127 29 29 / 0.42) !important;
+    border-color: rgb(248 113 113 / 0.5) !important;
+    color: #fecaca !important;
+}
+[data-theme="black"] .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-reject-mini-btn:hover {
+    background-color: rgb(153 27 27 / 0.55) !important;
+    border-color: rgb(252 165 165 / 0.75) !important;
+    color: #fee2e2 !important;
+}
+[data-theme="black"] .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-outline-action-btn {
+    background-color: rgb(71 85 105 / 0.35) !important;
+    border-color: rgb(148 163 184 / 0.55) !important;
+    color: #e2e8f0 !important;
+}
+[data-theme="black"] .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-outline-action-btn:hover {
+    background-color: rgb(71 85 105 / 0.5) !important;
+    border-color: rgb(203 213 225 / 0.65) !important;
+    color: #f8fafc !important;
+}
+
+[data-theme="red"] .rg-grid .rg-header .rg-table .rg-header-group-cell {
+    background-color: #646469 !important;
+    color: #ffffff !important;
+}
+[data-theme="red"] .rg-grid .rg-header .rg-table .rg-header-cell {
+    background-color: #8d8d94 !important;
+    color: #ffffff !important;
+}
+[data-theme="red"] .rg-grid .rg-head .rg-table tr:first-child td:first-child,
+[data-theme="red"] .rg-grid .rg-head .rg-table tr:first-child td:nth-child(2),
+[data-theme="red"] .rg-grid .rg-header .rg-table tr:first-child td:first-child,
+[data-theme="red"] .rg-grid .rg-header .rg-table tr:first-child td:nth-child(2) {
+    background-color: #8d8d94 !important;
+    color: #ffffff !important;
+}
+[data-theme="red"] .rg-grid .rg-header .rg-cell,
+[data-theme="red"] .rg-grid .rg-head .rg-cell {
+    background-color: #8d8d94 !important;
+    color: #ffffff !important;
+}
+
+[data-theme="green"] .rg-grid .rg-header .rg-table .rg-header-group-cell {
+    background-color: #518585 !important;
+    color: #ffffff !important;
+}
+[data-theme="green"] .rg-grid .rg-header .rg-table .rg-header-cell {
+    background-color: #6bafae !important;
+    color: #ffffff !important;
+}
+[data-theme="green"] .rg-grid .rg-head .rg-table tr:first-child td:first-child,
+[data-theme="green"] .rg-grid .rg-head .rg-table tr:first-child td:nth-child(2),
+[data-theme="green"] .rg-grid .rg-header .rg-table tr:first-child td:first-child,
+[data-theme="green"] .rg-grid .rg-header .rg-table tr:first-child td:nth-child(2) {
+    background-color: #6bafae !important;
+    color: #ffffff !important;
+}
+[data-theme="green"] .rg-grid .rg-header .rg-cell,
+[data-theme="green"] .rg-grid .rg-head .rg-cell {
+    background-color: #6bafae !important;
+    color: #ffffff !important;
+}
+
+
+.rg-grid .rg-body .rg-data-cell.rg-cell-verify-error.rg-cell-verify-error,
+.rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-verify-error.rg-cell-verify-error,
+.rg-grid .rg-fixed-body .rg-data-cell.rg-cell-verify-error.rg-cell-verify-error,
+.rg-grid .rg-fixed-body .rg-data-row .rg-data-cell.rg-cell-verify-error.rg-cell-verify-error {
+    background-color: #ffe6e6 !important;
+    color: #c00 !important;
+}
+.rg-grid .rg-body .rg-data-cell.rg-cell-verify-error-imr.rg-cell-verify-error-imr,
+.rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-verify-error-imr.rg-cell-verify-error-imr,
+.rg-grid .rg-fixed-body .rg-data-cell.rg-cell-verify-error-imr.rg-cell-verify-error-imr,
+.rg-grid .rg-fixed-body .rg-data-row .rg-data-cell.rg-cell-verify-error-imr.rg-cell-verify-error-imr {
+    background-color: #fff7bf !important;
+    color: #b45309 !important;
+}
+
+/* dark theme에서도 검증 오류 색을 유지하고 싶다면 동일 색 유지(가독성 우선) */
+[data-theme="black"] .rg-grid .rg-body .rg-data-cell.rg-cell-verify-error.rg-cell-verify-error,
+[data-theme="black"] .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-verify-error.rg-cell-verify-error,
+[data-theme="black"] .rg-grid .rg-fixed-body .rg-data-cell.rg-cell-verify-error.rg-cell-verify-error,
+[data-theme="black"] .rg-grid .rg-fixed-body .rg-data-row .rg-data-cell.rg-cell-verify-error.rg-cell-verify-error {
+    background-color: #ffe6e6 !important;
+    color: #c00 !important;
+}
+[data-theme="black"] .rg-grid .rg-body .rg-data-cell.rg-cell-verify-error-imr.rg-cell-verify-error-imr,
+[data-theme="black"] .rg-grid .rg-body .rg-table .rg-data-row .rg-data-cell.rg-cell-verify-error-imr.rg-cell-verify-error-imr,
+[data-theme="black"] .rg-grid .rg-fixed-body .rg-data-cell.rg-cell-verify-error-imr.rg-cell-verify-error-imr,
+[data-theme="black"] .rg-grid .rg-fixed-body .rg-data-row .rg-data-cell.rg-cell-verify-error-imr.rg-cell-verify-error-imr {
+    background-color: #fff7bf !important;
+    color: #b45309 !important;
+}
diff --git a/apps/st/src/components/module/CompactDataGrid.tsx b/apps/st/src/components/module/CompactDataGrid.tsx
index 4378182cf..110d331c6 100644
--- a/apps/st/src/components/module/CompactDataGrid.tsx
+++ b/apps/st/src/components/module/CompactDataGrid.tsx
@@ -25,6 +25,12 @@ interface RealGridDataProviderComparer {
     getValue?(row: number, field: string | number): unknown;
 }
 
+type GridViewWithCheckApi = GridViewWithSetColumns & {
+    checkItem?: (itemIndex: number, checked: boolean, exclusive?: boolean) => void;
+    checkRow?: (dataRow: number, checked: boolean, exclusive?: boolean) => void;
+    checkAll?: (checked: boolean) => void;
+};
+
 /** columnInfo → RealGrid DataField 배열 (computed → valueCallback 포함, setFields용) */
 function buildFieldsFromColumns(columns: { fieldName: string; valueType?: ValueType; computed?: import("../type/DataGrid.type").ComputedFieldConfig }[]) {
     return columns.map((col) => {
@@ -35,7 +41,12 @@ function buildFieldsFromColumns(columns: { fieldName: string; valueType?: ValueT
         if (col.computed) {
             const hasFields = "fields" in col.computed && col.computed.fields.length > 0;
             const hasNumeratorDenominator = "numeratorFields" in col.computed && col.computed.numeratorFields.length > 0 && col.computed.denominatorFields.length > 0;
-            if (hasFields || hasNumeratorDenominator) {
+            const hasMaxOfFieldAndSum = "baseField" in col.computed && "sumFields" in col.computed && col.computed.sumFields.length > 0;
+            const hasDifferenceOfSums = "minuendFields" in col.computed && "subtrahendFields" in col.computed && col.computed.minuendFields.length > 0;
+            const hasHalfSumOfSums = col.computed.type === "halfSumOfSums" && "firstSumFields" in col.computed && "secondSumFields" in col.computed && col.computed.firstSumFields.length > 0 && col.computed.secondSumFields.length > 0;
+            const hasSumOfTwoHalfSumOfSums = col.computed.type === "sumOfTwoHalfSumOfSums" && "firstHalfSum" in col.computed && "secondHalfSum" in col.computed && col.computed.firstHalfSum.firstSumFields.length > 0 && col.computed.firstHalfSum.secondSumFields.length > 0 && col.computed.secondHalfSum.firstSumFields.length > 0 && col.computed.secondHalfSum.secondSumFields.length > 0;
+            const hasSumOfMaxGroups = "groups" in col.computed && Array.isArray(col.computed.groups) && col.computed.groups.length > 0;
+            if (hasFields || hasNumeratorDenominator || hasMaxOfFieldAndSum || hasDifferenceOfSums || hasHalfSumOfSums || hasSumOfTwoHalfSumOfSums || hasSumOfMaxGroups) {
                 field.valueCallback = getComputedValueCallback(col.computed) as (prod: unknown, dataRow: number, fieldName: string, fieldNames: string[], values: unknown[]) => number;
             }
         }
@@ -62,20 +73,60 @@ function createNumberComparer(dp: RealGridDataProviderComparer): (field: string
     };
 }
 
+function escapeHtml(value: string): string {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+
+function realGridHeaderWithTooltip<T extends { text: string; tooltip?: string; showTooltip?: boolean; template?: string }>(
+    header: T,
+): T {
+    const tip = header.tooltip?.trim();
+    if (!tip) return header;
+    return {
+        ...header,
+        tooltip: tip,
+        showTooltip: header.showTooltip ?? true,
+        template:
+            header.template ??
+            `<span style="display:inline-flex;align-items:center;justify-content:center;gap:4px;width:100%;"><span>${escapeHtml(header.text)}</span><i class="diveicon di-info-circle" aria-hidden="true"></i></span>`,
+    };
+}
+
+function resolveColumnTooltip(column: {
+    tooltip?: string;
+    header: { text: string; tooltip?: string; showTooltip?: boolean; template?: string };
+}): string | undefined {
+    const tip = column.tooltip?.trim() || column.header.tooltip?.trim();
+    return tip && tip.length > 0 ? tip : undefined;
+}
+
 const CompactDataGrid = ({
     columnInfo,
     fixedColumns,
     showHeaderCheckbox = false,
     rowData,
+    enableSort = false,
     // setRowData,
     getGridDataRef,
     cellStyleCallback,
     onRowClick,
+    onItemChecked,
+    onItemAllChecked,
+    compactFullWidth = false,
+    compactGridHeightClass = "h-[55vh]",
+    headerHeight = 60,
 }: DataGridProps) => {
     const { columns, columnLayout } = columnInfo;
     const gridRef = useRef<RealGridReact>(null);
+    const columnsRef = useRef(columns);
     const rowDataRef = useRef<Record<string, string | number>[]>(rowData);
     const cellStyleCallbackRef = useRef<CellStyleCallback | undefined>(cellStyleCallback);
+    columnsRef.current = columns;
     rowDataRef.current = rowData;
     cellStyleCallbackRef.current = cellStyleCallback;
 
@@ -93,6 +144,32 @@ const CompactDataGrid = ({
             (dataProvider as { setRows: (r: unknown[]) => void }).setRows(rowData);
         }
 
+        // __checked 플래그(1/true/Y) 기반으로 체크바 상태 동기화
+        if (showHeaderCheckbox) {
+            const checkGrid = gridView as GridViewWithCheckApi;
+            const checkByRowFlag = (value: unknown) =>
+                value === true ||
+                value === 1 ||
+                value === "1" ||
+                value === "Y" ||
+                value === "y" ||
+                value === "true";
+            try {
+                checkGrid.checkAll?.(false);
+                rowData.forEach((row, itemIndex) => {
+                    const checked = checkByRowFlag((row as Record<string, unknown>).__checked);
+                    if (!checked) return;
+                    if (checkGrid.checkItem) {
+                        checkGrid.checkItem(itemIndex, true, false);
+                        return;
+                    }
+                    checkGrid.checkRow?.(itemIndex, true, false);
+                });
+            } catch (e) {
+                console.warn("check sync:", e);
+            }
+        }
+
         // setDataComparer로 숫자 정렬 (setFields 미사용 → 데이터 유실·필드 중복 오류 없음)
         const dp = dataProvider as RealGridDataProviderComparer;
         if (typeof dp.setDataComparer === "function" && typeof dp.getValue === "function") {
@@ -114,7 +191,67 @@ const CompactDataGrid = ({
             fitStyle: GridFitStyle.EVEN
         });
 
-        gridView.header.height = 60;
+        gridView.header.height = headerHeight;
+        if (columns.some((c) => Boolean(resolveColumnTooltip(c)))) {
+            (gridView.header as { showTooltip?: boolean }).showTooltip = true;
+        }
+        columns.forEach((column) => {
+            (
+                gridView as {
+                    setColumnProperty?: (
+                        col: string,
+                        key: string,
+                        value: unknown,
+                    ) => void;
+                }
+            ).setColumnProperty?.(
+                column.name,
+                "header",
+                realGridHeaderWithTooltip({
+                    ...column.header,
+                    tooltip: resolveColumnTooltip(column),
+                }),
+            );
+        });
+        (
+            gridView as {
+                onShowHeaderTooltip?: (
+                    grid: unknown,
+                    column: {
+                        name?: string;
+                        fieldName?: string;
+                        header?: { tooltip?: string };
+                    },
+                    value: string,
+                    layout?: {
+                        name?: string;
+                        fieldName?: string;
+                        column?: string | { name?: string; fieldName?: string };
+                    },
+                    isEllipsis?: boolean,
+                ) => string | undefined;
+            }
+        ).onShowHeaderTooltip = (_grid, headerColumn, _value, layout) => {
+            const currentColumns = columnsRef.current;
+            const directTip = headerColumn?.header?.tooltip?.trim();
+            if (directTip) return directTip;
+
+            const layoutColumn =
+                typeof layout?.column === "string"
+                    ? layout.column
+                    : layout?.column?.name ?? layout?.column?.fieldName;
+
+            const col = currentColumns.find(
+                (c) =>
+                    c.name === headerColumn?.name ||
+                    c.fieldName === headerColumn?.fieldName ||
+                    c.name === layout?.name ||
+                    c.fieldName === layout?.fieldName ||
+                    c.name === layoutColumn ||
+                    c.fieldName === layoutColumn,
+            );
+            return col ? resolveColumnTooltip(col) : undefined;
+        };
 
         // 헤더 체크박스 표시 여부 설정
         gridView.setOptions({
@@ -195,7 +332,10 @@ const CompactDataGrid = ({
                     const colInfo: RealGridColumnInfo = {
                         name: col.name,
                         fieldName: col.fieldName,
-                        header: col.header,
+                        header: realGridHeaderWithTooltip({
+                            ...col.header,
+                            tooltip: resolveColumnTooltip(col),
+                        }),
                         editable: col.editable,
                         valueType: col.valueType,
                         dataFormat: col.dataFormat,
@@ -312,7 +452,17 @@ const CompactDataGrid = ({
         return () => {
             if (getGridDataRef) getGridDataRef.current = null;
         };
-    }, [columns, columnLayout, fixedColumns, rowData, showHeaderCheckbox, getGridDataRef]);
+    }, [
+        columns,
+        columnLayout,
+        fixedColumns,
+        rowData,
+        showHeaderCheckbox,
+        getGridDataRef,
+        compactFullWidth,
+        compactGridHeightClass,
+        headerHeight,
+    ]);
 
     // 행 클릭 이벤트
     useEffect(() => {
@@ -334,9 +484,35 @@ const CompactDataGrid = ({
         };
     }, [onRowClick]);
 
+    useEffect(() => {
+        const gridView = gridRef.current?.gridView;
+        if (!gridView) return;
+
+        if (onItemChecked) {
+            gridView.onItemChecked = (_grid, itemIndex, checked) => {
+                onItemChecked(itemIndex, checked);
+            };
+        } else {
+            gridView.onItemChecked = undefined;
+        }
+
+        if (onItemAllChecked) {
+            gridView.onItemAllChecked = (_grid, checked) => {
+                onItemAllChecked(checked);
+            };
+        } else {
+            gridView.onItemAllChecked = undefined;
+        }
+
+        return () => {
+            if (gridView.onItemChecked) gridView.onItemChecked = undefined;
+            if (gridView.onItemAllChecked) gridView.onItemAllChecked = undefined;
+        };
+    }, [onItemChecked, onItemAllChecked]);
+
     return (
-        <div className="flex flex-col gap-[0.6rem] mx-[0.6rem] w-1/2">
-            <div className="h-[65vh]">
+        <div className={`flex flex-col gap-[0.6rem] ${compactFullWidth ? "w-full min-w-0" : "w-1/2"}`}>
+            <div className={compactGridHeightClass}>
                 <RealGridReact
                     ref={gridRef}
                     autoGenerateField={true}
@@ -361,7 +537,10 @@ const CompactDataGrid = ({
                             fieldName={column.fieldName}
                             valueType={column.valueType ? column.valueType : ValueType.TEXT}
                             {...(column.valueType === ValueType.NUMBER && { numberFormat: column.dataFormat ? column.dataFormat : '#,##0.000' })}
-                            header={column.header}
+                            header={realGridHeaderWithTooltip({
+                                ...column.header,
+                                tooltip: resolveColumnTooltip(column),
+                            })}
                             editable={column.editable}
                             {...(column.styleName != null
                                 ? { styleName: column.styleName }
@@ -375,7 +554,7 @@ const CompactDataGrid = ({
                                 numberFormat: column.footer.numberFormat,
                             } : undefined}
                             mergeRule={column.mergeCells ? { criteria: 'value' } : undefined}
-                            sortable={!column.sortdisable}
+                            sortable={enableSort && !column.sortdisable}
                         />
                     ))}
                 </RealGridReact>
diff --git a/apps/st/src/components/module/DataGrid.tsx b/apps/st/src/components/module/DataGrid.tsx
index f914be8a8..517d26ef5 100644
--- a/apps/st/src/components/module/DataGrid.tsx
+++ b/apps/st/src/components/module/DataGrid.tsx
@@ -20,6 +20,12 @@ import type {
 } from "../type/DataGrid.type";
 
 import { getComputedValueCallback } from "@/components/util/grid/computedFieldCallbacks";
+import {
+    getExcelImportColumnFieldNames,
+    prepareGridColumnsForExcelExport,
+    restoreGridColumnsAfterExcelExport,
+    shouldPrepareColumnsForExcelExport,
+} from "@/components/util/gridExcelExport";
 import { useTabStore } from "@/store/tab-store";
 
 // RealGrid 타입 확장
@@ -28,7 +34,7 @@ declare module "realgrid" {
         setOptions(options: {
             footer?: { visible?: boolean };
             summaryMode?: "aggregate" | "statistical" | "none";
-            checkBar?: { visible?: boolean };
+            checkBar?: { visible?: boolean; exclusive?: boolean };
         }): void;
     }
 }
@@ -47,6 +53,159 @@ if (typeof window !== "undefined") {
 
 RealGrid.setLicenseKey(process.env.NEXT_PUBLIC_ST_REALGRID_KEY || "");
 
+function isDropDownEditorColumn(column: {
+    editor?: { type?: string };
+    values?: string[];
+}): boolean {
+    const type = column.editor?.type;
+    return (
+        type === "dropdown" ||
+        type === "list" ||
+        type === "dropDown" ||
+        (column.values != null && column.values.length > 0)
+    );
+}
+
+type GridViewWithSetColumnProperty = {
+    setColumnProperty?: (col: string, key: string, value: unknown) => void;
+};
+
+type GridViewWithEditOptions = {
+    setEditOptions?: (options: { commitWhenLeave?: boolean }) => void;
+};
+
+/** 포커스가 그리드 밖으로 나갈 때 편집 중인 값을 자동 commit */
+function applyDefaultGridEditOptions(
+    gridView: GridViewWithEditOptions | null | undefined,
+) {
+    gridView?.setEditOptions?.({ commitWhenLeave: true });
+}
+
+function isDateEditorColumn(column: {
+    editor?: { type?: string };
+}): boolean {
+    return column.editor?.type === "date";
+}
+
+/** RealGrid 날짜(date) 편집기 컬럼 속성 적용 */
+function applyColumnDateEditorProperties(
+    gridView: GridViewWithSetColumnProperty,
+    column: import("../type/DataGrid.type").ColumnConfig,
+) {
+    if (!gridView.setColumnProperty) return;
+    const fmt =
+        column.datetimeFormat ??
+        column.editor?.datetimeFormat ??
+        "yyyy-MM-dd";
+    gridView.setColumnProperty(column.name, "datetimeFormat", fmt);
+    gridView.setColumnProperty(column.name, "editor", {
+        type: "date",
+        datetimeFormat: fmt,
+        dropDownWhenClick: column.editor?.dropDownWhenClick ?? true,
+        showToday: column.editor?.showToday ?? true,
+    });
+    gridView.setColumnProperty(column.name, "editButtonVisibility", "always");
+}
+
+/** RealGrid 드롭다운·날짜 등 컬럼 편집기 속성 적용 */
+function applyColumnListEditorProperties(
+    gridView: GridViewWithSetColumnProperty,
+    column: import("../type/DataGrid.type").ColumnConfig,
+) {
+    if (!gridView.setColumnProperty) return;
+
+    if (isDateEditorColumn(column)) {
+        applyColumnDateEditorProperties(gridView, column);
+        return;
+    }
+
+    const values = column.values ?? column.editor?.values;
+    const labels = column.labels ?? column.editor?.labels ?? values;
+    const isDropDown = isDropDownEditorColumn(column);
+
+    if (!isDropDown) {
+        if (column.editor) {
+            gridView.setColumnProperty(column.name, "editor", column.editor);
+        }
+        return;
+    }
+
+    if (values?.length) {
+        gridView.setColumnProperty(column.name, "values", values);
+        gridView.setColumnProperty(column.name, "labels", labels ?? values);
+    }
+    if (column.lookupDisplay) {
+        gridView.setColumnProperty(column.name, "lookupDisplay", true);
+    }
+    gridView.setColumnProperty(column.name, "editor", {
+        type: "dropdown",
+        domainOnly: column.editor?.domainOnly ?? true,
+        textReadOnly: column.editor?.textReadOnly ?? true,
+        commitOnSelect: column.editor?.commitOnSelect ?? true,
+        dropDownWhenClick: column.editor?.dropDownWhenClick ?? true,
+        values,
+        labels: labels ?? values,
+    });
+    gridView.setColumnProperty(column.name, "editButtonVisibility", "always");
+}
+
+/** 그리드 마운트·데이터 로드 후 드롭다운 컬럼 재적용용 */
+export function applyDropDownColumnToGrid(
+    gridView: GridViewWithSetColumnProperty | null | undefined,
+    columnName: string,
+    options: string[],
+) {
+    if (!gridView?.setColumnProperty || options.length === 0) return;
+    (
+        gridView as {
+            setEditOptions?: (opts: { editable?: boolean }) => void;
+        }
+    ).setEditOptions?.({ editable: true });
+    gridView.setColumnProperty(columnName, "editable", true);
+    gridView.setColumnProperty(columnName, "values", options);
+    gridView.setColumnProperty(columnName, "labels", options);
+    gridView.setColumnProperty(columnName, "lookupDisplay", true);
+    gridView.setColumnProperty(columnName, "editor", {
+        type: "dropdown",
+        domainOnly: true,
+        textReadOnly: true,
+        commitOnSelect: true,
+        dropDownWhenClick: true,
+        values: options,
+        labels: options,
+    });
+    gridView.setColumnProperty(columnName, "editButtonVisibility", "always");
+    (gridView as { refresh?: () => void }).refresh?.();
+}
+
+function reapplyListEditorsOnGrid(
+    gridView: GridViewWithSetColumnProperty | null | undefined,
+    cols: import("../type/DataGrid.type").ColumnConfig[],
+) {
+    if (!gridView) return;
+    cols.forEach((col) => applyColumnListEditorProperties(gridView, col));
+    if (cols.some((c) => isDropDownEditorColumn(c) || isDateEditorColumn(c))) {
+        (gridView as { refresh?: () => void }).refresh?.();
+    }
+}
+
+type GridViewWithCheckApi = {
+    checkItem?: (itemIndex: number, checked: boolean, exclusive?: boolean) => void;
+    checkRow?: (dataRow: number, checked: boolean, exclusive?: boolean) => void;
+    checkAll?: (checked: boolean) => void;
+};
+
+function isRowCheckedFlag(value: unknown): boolean {
+    return (
+        value === true ||
+        value === 1 ||
+        value === "1" ||
+        value === "Y" ||
+        value === "y" ||
+        value === "true"
+    );
+}
+
 /** setDataComparer(field, comparer) - setFields 없이 숫자 정렬용. comparer(field, row1, row2) => -1|0|1 */
 interface RealGridDataProviderComparer {
     setDataComparer?(
@@ -81,6 +240,42 @@ function createNumberComparer(
     };
 }
 
+function escapeHtml(value: string): string {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+
+/**
+ * RealGrid 헤더 툴팁: `grid.header.showTooltip`이 비어 있으면 `column.header.showTooltip === true`인 컬럼만 표시됨.
+ * `tooltip`이 있는 헤더는 info-circle 아이콘이 함께 보이도록 template도 자동 구성한다.
+ */
+function realGridHeaderWithTooltip<T extends { text: string; tooltip?: string; showTooltip?: boolean; template?: string }>(
+    header: T,
+): T {
+    const tip = header.tooltip?.trim();
+    if (!tip) return header;
+    return {
+        ...header,
+        tooltip: tip,
+        showTooltip: header.showTooltip ?? true,
+        template:
+            header.template ??
+            `<span style="display:inline-flex;align-items:center;justify-content:center;gap:4px;width:100%;"><span>${escapeHtml(header.text)}</span><i class="diveicon di-info-circle" aria-hidden="true"></i></span>`,
+    };
+}
+
+function resolveColumnTooltip(column: {
+    tooltip?: string;
+    header: { text: string; tooltip?: string; showTooltip?: boolean; template?: string };
+}): string | undefined {
+    const tip = column.tooltip?.trim() || column.header.tooltip?.trim();
+    return tip && tip.length > 0 ? tip : undefined;
+}
+
 /** 정렬 필드 값을 숫자로 파싱 (쉼표 제거) */
 function toNum(v: unknown): number {
     if (v == null) return NaN;
@@ -263,10 +458,33 @@ function sortRowsGroupPreserving(
 }
 
 /** columnInfo → RealGrid DataField 배열 (computed → valueCallback 포함, setFields용) */
+function getDecimalPlacesFromDataFormat(dataFormat?: string): number | null {
+    if (!dataFormat) return null;
+    const match = dataFormat.match(/\.(0+|#+)/);
+    const decimalToken = match?.[1];
+    if (decimalToken) return decimalToken.length;
+    // #,##0 등 정수 포맷 — 소수부 없음 → 0자리 절삭(내림)
+    if (/[#0]/.test(dataFormat)) return 0;
+    return null;
+}
+
+function truncateByDecimalPlaces(value: number, decimalPlaces: number): number {
+    if (!Number.isFinite(value)) return 0;
+    if (decimalPlaces < 0) return value;
+    const factor = 10 ** decimalPlaces;
+    const scaled = value * factor;
+    // 절삭(truncate): 반올림 없이 소수점 이하를 버린다.
+    const truncated = scaled >= 0 ? Math.floor(scaled) : Math.ceil(scaled);
+    return truncated / factor;
+}
+
 function buildFieldsFromColumns(
     columns: {
         fieldName: string;
         valueType?: ValueType;
+        dataFormat?: string;
+        datetimeFormat?: string;
+        editor?: { type?: string; datetimeFormat?: string };
         computed?: import("../type/DataGrid.type").ComputedFieldConfig;
     }[],
 ) {
@@ -274,6 +492,7 @@ function buildFieldsFromColumns(
         const field: {
             fieldName: string;
             dataType: string;
+            datetimeFormat?: string;
             valueCallback?: (
                 prod: unknown,
                 dataRow: number,
@@ -283,8 +502,19 @@ function buildFieldsFromColumns(
             ) => number;
         } = {
             fieldName: col.fieldName,
-            dataType: col.valueType === ValueType.NUMBER ? "number" : "text",
+            dataType:
+                col.editor?.type === "date"
+                    ? "datetime"
+                    : col.valueType === ValueType.NUMBER
+                      ? "number"
+                      : "text",
         };
+        if (col.editor?.type === "date") {
+            field.datetimeFormat =
+                col.datetimeFormat ??
+                col.editor.datetimeFormat ??
+                "yyyy-MM-dd";
+        }
         if (col.computed) {
             const hasFields =
                 "fields" in col.computed && col.computed.fields.length > 0;
@@ -292,8 +522,60 @@ function buildFieldsFromColumns(
                 "numeratorFields" in col.computed &&
                 col.computed.numeratorFields.length > 0 &&
                 col.computed.denominatorFields.length > 0;
-            if (hasFields || hasNumeratorDenominator) {
-                field.valueCallback = getComputedValueCallback(
+            const hasMaxOfFieldAndSum =
+                "baseField" in col.computed &&
+                "sumFields" in col.computed &&
+                col.computed.sumFields.length > 0;
+            const hasDifferenceOfSums =
+                "minuendFields" in col.computed &&
+                "subtrahendFields" in col.computed &&
+                col.computed.minuendFields.length > 0;
+            const hasHalfSumOfSums =
+                col.computed.type === "halfSumOfSums" &&
+                "firstSumFields" in col.computed &&
+                "secondSumFields" in col.computed &&
+                col.computed.firstSumFields.length > 0 &&
+                col.computed.secondSumFields.length > 0;
+            const hasSumOfTwoHalfSumOfSums =
+                col.computed.type === "sumOfTwoHalfSumOfSums" &&
+                "firstHalfSum" in col.computed &&
+                "secondHalfSum" in col.computed &&
+                col.computed.firstHalfSum.firstSumFields.length > 0 &&
+                col.computed.firstHalfSum.secondSumFields.length > 0 &&
+                col.computed.secondHalfSum.firstSumFields.length > 0 &&
+                col.computed.secondHalfSum.secondSumFields.length > 0;
+            const hasSumOfMaxGroups =
+                col.computed.type === "sumOfMaxOfFieldAndSumGroups" &&
+                "groups" in col.computed &&
+                Array.isArray(col.computed.groups) &&
+                col.computed.groups.length > 0;
+            const hasPumpGrossPpqty =
+                col.computed.type === "pumpGrossPpqty" &&
+                "pumpGroups" in col.computed &&
+                col.computed.pumpGroups.length > 0;
+            const hasBodPrcsRt =
+                col.computed.type === "bodPrcsRt" &&
+                "inflwField" in col.computed &&
+                "dschgField" in col.computed;
+            const hasQuotientRatioPercent =
+                col.computed.type === "quotientRatioPercent" &&
+                "numeratorQuotient" in col.computed &&
+                "denominatorQuotient" in col.computed &&
+                col.computed.numeratorQuotient.length === 2 &&
+                col.computed.denominatorQuotient.length === 2;
+            if (
+                hasFields ||
+                hasNumeratorDenominator ||
+                hasMaxOfFieldAndSum ||
+                hasDifferenceOfSums ||
+                hasHalfSumOfSums ||
+                hasSumOfTwoHalfSumOfSums ||
+                hasSumOfMaxGroups ||
+                hasPumpGrossPpqty ||
+                hasBodPrcsRt ||
+                hasQuotientRatioPercent
+            ) {
+                const computedCallback = getComputedValueCallback(
                     col.computed,
                 ) as (
                     prod: unknown,
@@ -302,6 +584,24 @@ function buildFieldsFromColumns(
                     fieldNames: string[],
                     values: unknown[],
                 ) => number;
+                const decimalPlaces = getDecimalPlacesFromDataFormat(col.dataFormat);
+                field.valueCallback = (
+                    prod: unknown,
+                    dataRow: number,
+                    fieldName: string,
+                    fieldNames: string[],
+                    values: unknown[],
+                ) => {
+                    const computedValue = computedCallback(
+                        prod,
+                        dataRow,
+                        fieldName,
+                        fieldNames,
+                        values,
+                    );
+                    if (decimalPlaces == null) return computedValue;
+                    return truncateByDecimalPlaces(computedValue, decimalPlaces);
+                };
             }
         }
         return field;
@@ -311,6 +611,7 @@ function buildFieldsFromColumns(
 const DataGrid = ({
     columnInfo,
     rowStartNum,
+    excelExportFileSuffix,
     isExcelImport = true,
     isExcelExport = true,
     fixedColumns,
@@ -318,16 +619,27 @@ const DataGrid = ({
     rowData,
     setRowData,
     getGridDataRef,
+    getGridRef,
     cellStyleCallback,
     cellTooltipCallback,
+    onCellEdited,
     onRowClick,
+    onDataCellClick,
+    onItemChecked,
+    onItemAllChecked,
+    onScrollToBottom,
     statusInfo,
     highlightedRowId,
     idFieldName = "id",
+    enableSort = false,
+    gridHeight = 55, // vh 단위
+    headerHeight = 60,
+    fitStyle = GridFitStyle.EVEN,
 }: DataGridProps) => {
     const { columns, columnLayout } = columnInfo;
     const gridRef = useRef<RealGridReact>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const columnsRef = useRef(columns);
     const sortDirRef = useRef<Record<string, "asc" | "desc" | "none">>({});
     const originalRowsRef = useRef<
         Record<string, Record<string, string | number>[]>
@@ -339,9 +651,25 @@ const DataGrid = ({
     const cellTooltipCallbackRef = useRef<CellTooltipCallback | undefined>(
         cellTooltipCallback,
     );
+    const onCellEditedRef = useRef<typeof onCellEdited>(onCellEdited);
+    const onDataCellClickRef = useRef<typeof onDataCellClick>(onDataCellClick);
+    const onScrollToBottomRef = useRef<(() => void) | undefined>(
+        onScrollToBottom,
+    );
+    const onItemCheckedRef = useRef<typeof onItemChecked>(onItemChecked);
+    const onItemAllCheckedRef =
+        useRef<typeof onItemAllChecked>(onItemAllChecked);
+    const isSyncingChecksFromRowDataRef = useRef(false);
+    const columnsFieldsSigRef = useRef("");
+    columnsRef.current = columns;
     rowDataRef.current = rowData;
     cellStyleCallbackRef.current = cellStyleCallback;
     cellTooltipCallbackRef.current = cellTooltipCallback;
+    onScrollToBottomRef.current = onScrollToBottom;
+    onItemCheckedRef.current = onItemChecked;
+    onItemAllCheckedRef.current = onItemAllChecked;
+    onCellEditedRef.current = onCellEdited;
+    onDataCellClickRef.current = onDataCellClick;
 
     // highlightedRowId가 변경될 때 해당 행으로 스크롤 및 선택
     useEffect(() => {
@@ -385,20 +713,6 @@ const DataGrid = ({
                 .find((s) => s.menuEngNm === activeTabId)?.menuKornNm ||
             "export";
 
-        // 엑셀 import 시 매칭을 위해 헤더에 fieldName 포함 (예: "합계 (swgeProcZoneInnerSm)")
-        const originalHeaders: Map<string, string> = new Map();
-        columns.forEach((col) => {
-            if (col.fieldName && gridView.columnByName) {
-                const gridCol = gridView.columnByName(col.name);
-                if (gridCol && gridCol.header) {
-                    const originalText = gridCol.header.text || "";
-                    originalHeaders.set(col.name, originalText);
-                    const headerWithFieldName = `${originalText} (${col.fieldName})`;
-                    gridCol.header.text = headerWithFieldName;
-                }
-            }
-        });
-
         // exportGrid 호출 전에 columnLayout 정규화 (col 속성 추가)
         const normalizeLayoutForExport = (
             layout: ColumnLayoutItem[],
@@ -469,27 +783,29 @@ const DataGrid = ({
             gridView.setColumnLayout?.(normalizedLayout);
         }
 
+        const useExcelColumnVisibilityPrep =
+            shouldPrepareColumnsForExcelExport(columns);
+        const excelExportVisibilitySnapshot = useExcelColumnVisibilityPrep
+            ? prepareGridColumnsForExcelExport(gridView, columns)
+            : undefined;
+
+        const exportBaseName = excelExportFileSuffix
+            ? `${menuName}_${excelExportFileSuffix}`
+            : menuName;
+
         gridView.exportGrid({
             type: "excel",
             target: "local",
-            fileName: `${menuName}.xlsx`,
+            fileName: `${exportBaseName}.xlsx`,
             footer: "hidden",
-            allColumns: true, // 숨김(visible: false) 컬럼도 엑셀에 포함
+            allColumns: !useExcelColumnVisibilityPrep,
             done: () => {
-                // 헤더 원복
-                columns.forEach((col) => {
-                    if (col.fieldName && gridView.columnByName) {
-                        const gridCol = gridView.columnByName(col.name);
-                        if (
-                            gridCol &&
-                            gridCol.header &&
-                            originalHeaders.has(col.name)
-                        ) {
-                            gridCol.header.text =
-                                originalHeaders.get(col.name) || "";
-                        }
-                    }
-                });
+                if (excelExportVisibilitySnapshot) {
+                    restoreGridColumnsAfterExcelExport(
+                        gridView,
+                        excelExportVisibilitySnapshot,
+                    );
+                }
                 // columnLayout 원복 (footerUserSpans 유지)
                 if (normalizedLayout && !layoutRestored) {
                     layoutRestored = true;
@@ -591,36 +907,11 @@ const DataGrid = ({
                             : headerStartRow;
                     const dataStartRow = maxHeaderRowIndex + 1;
 
-                    // 엑셀 컬럼 인덱스 → 그리드 fieldName 매핑
-                    const headerToFieldNameMap = new Map<string, string>();
-                    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]) {
-                            const extractedFieldName = fieldNameMatch[1];
-                            if (
-                                columns.find(
-                                    (c) => c.fieldName === extractedFieldName,
-                                )
-                            ) {
-                                fieldName = extractedFieldName;
-                            }
-                        }
-
-                        // 매칭 실패 시 원본 헤더 텍스트 사용
-                        if (!fieldName) {
-                            console.warn(
-                                `엑셀 컬럼 ${colIndex + 1} (헤더: "${headerText}") 매칭 실패 → 헤더 텍스트를 fieldName으로 사용`,
-                            );
-                            fieldName = headerText;
-                        }
-
-                        headerToFieldNameMap.set(headerText, fieldName);
-                    });
+                    // 엑셀 N번째 열 → 그리드 N번째 fieldName (보내기 컬럼 순서 기준)
+                    const excelColumnFieldNames = getExcelImportColumnFieldNames(
+                        columns,
+                        columnLayout,
+                    );
 
                     // 데이터 행 읽기
                     const dataRows: Record<string, string | number>[] = [];
@@ -638,12 +929,8 @@ const DataGrid = ({
                                 worksheet[
                                     XLSX.utils.encode_cell({ r: row, c: col })
                                 ];
-                            const headerName =
-                                headers[colIndex] || `Column${colIndex + 1}`;
-                            // 헤더 텍스트를 fieldName으로 변환
-                            const fieldName =
-                                headerToFieldNameMap.get(headerName) ||
-                                headerName;
+                            const fieldName = excelColumnFieldNames[colIndex];
+                            if (!fieldName) continue;
 
                             let cellValue: string | number = "";
                             if (
@@ -725,6 +1012,22 @@ const DataGrid = ({
 
         const gridView = gridRef.current.gridView;
         const dataProvider = gridRef.current.dataProvider;
+        applyDefaultGridEditOptions(gridView as GridViewWithEditOptions);
+
+        const columnsFieldsSig = columns.map((c) => c.fieldName).join("\u0001");
+        if (columnsFieldsSig !== columnsFieldsSigRef.current) {
+            columnsFieldsSigRef.current = columnsFieldsSig;
+            const dpForFields = dataProvider as {
+                setFields?: (f: unknown[]) => void;
+                setRows?: (r: Record<string, string | number>[]) => void;
+            };
+            try {
+                dpForFields.setFields?.(buildFieldsFromColumns(columns));
+                dpForFields.setRows?.(rowDataRef.current);
+            } catch (e) {
+                console.warn("setFields sync:", e);
+            }
+        }
 
         // mergeCells: true인 컬럼이 있으면 onSorting에서 클라이언트 정렬로 처리
         const hasMergeCells = columns.some((col) => col.mergeCells === true);
@@ -759,27 +1062,106 @@ const DataGrid = ({
             gridView as {
                 onSorting?: (g: unknown, f: unknown[], d: unknown[]) => boolean;
             }
-        ).onSorting = createOnSortingHandler(
-            columns,
-            setRowData,
-            sortDirRef,
-            originalRowsRef,
-        );
+        ).onSorting = enableSort
+            ? createOnSortingHandler(
+                  columns,
+                  setRowData,
+                  sortDirRef,
+                  originalRowsRef,
+              )
+            : () => false;
 
-        (gridView.displayOptions as DisplayOptions).fitStyle =
-            GridFitStyle.EVEN;
+        (gridView.displayOptions as DisplayOptions).fitStyle = fitStyle;
         gridView.displayOptions.rowHeight = 30;
-        gridView.header.height = 60;
+        gridView.header.height = headerHeight;
+        if (columns.some((c) => Boolean(resolveColumnTooltip(c)))) {
+            (gridView.header as { showTooltip?: boolean }).showTooltip = true;
+        }
+        columns.forEach((column) => {
+            const gv = gridView as GridViewWithSetColumnProperty;
+            const exists =
+                typeof (
+                    gridView as { columnByName?: (name: string) => unknown }
+                ).columnByName === "function" &&
+                (gridView as { columnByName: (name: string) => unknown }).columnByName(
+                    column.name,
+                ) != null;
+            if (!exists) return;
+            gv.setColumnProperty?.(
+                column.name,
+                "header",
+                realGridHeaderWithTooltip({
+                    ...column.header,
+                    tooltip: resolveColumnTooltip(column),
+                }),
+            );
+            gv.setColumnProperty?.(
+                column.name,
+                "editable",
+                column.editable !== false,
+            );
+            applyColumnListEditorProperties(gv, column);
+        });
+        if (columns.some((c) => isDropDownEditorColumn(c))) {
+            (gridView as { refresh?: () => void }).refresh?.();
+        }
+        (
+            gridView as {
+                onShowHeaderTooltip?: (
+                    grid: unknown,
+                    column: {
+                        name?: string;
+                        fieldName?: string;
+                        header?: { tooltip?: string };
+                    },
+                    value: string,
+                    layout?: {
+                        name?: string;
+                        fieldName?: string;
+                        column?: string | { name?: string; fieldName?: string };
+                    },
+                    isEllipsis?: boolean,
+                ) => string | undefined;
+            }
+        ).onShowHeaderTooltip = (_grid, headerColumn, _value, layout) => {
+            const currentColumns = columnsRef.current;
+            const directTip = headerColumn?.header?.tooltip?.trim();
+            if (directTip) return directTip;
+
+            const layoutColumn =
+                typeof layout?.column === "string"
+                    ? layout.column
+                    : layout?.column?.name ?? layout?.column?.fieldName;
+
+            const col = currentColumns.find(
+                (c) =>
+                    c.name === headerColumn?.name ||
+                    c.fieldName === headerColumn?.fieldName ||
+                    c.name === layout?.name ||
+                    c.fieldName === layout?.fieldName ||
+                    c.name === layoutColumn ||
+                    c.fieldName === layoutColumn,
+            );
+            return col ? resolveColumnTooltip(col) : undefined;
+        };
 
         // 헤더 체크박스 표시 여부 설정
         gridView.setOptions({
-            checkBar: { visible: showHeaderCheckbox },
+            checkBar: { visible: showHeaderCheckbox, exclusive: false },
             rowIndicator: { visible: false },
         });
 
-        // footer가 있는 컬럼이 있으면 footer 높이 설정
-        const hasFooter = columns.some((col) => col.footer);
-        if (hasFooter) {
+        const applyFooterSettings = (
+            targetGridView: typeof gridView,
+        ) => {
+            const hasFooter = columns.some((col) => col.footer);
+            if (!hasFooter) return;
+
+            targetGridView.setOptions({
+                summaryMode: "aggregate",
+                footer: { visible: true },
+            });
+
             // footer가 배열이거나 multiRow가 true인 footer가 있으면 멀티푸터 설정 (여러 행)
             const hasArrayFooter = columns.some(
                 (col) => col.footer && Array.isArray(col.footer),
@@ -794,23 +1176,24 @@ const DataGrid = ({
                 );
             });
             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
+                        : 2;
                 const footerHeights = Array.from(
                     { length: maxFooterLength },
                     () => ({ height: 40 }),
                 );
-                gridView.setFooters?.(footerHeights);
+                targetGridView.setFooters?.(footerHeights);
             } else {
-                gridView.footer.height = 40;
+                targetGridView.footer.height = 40;
             }
-        }
+        };
+
+        applyFooterSettings(gridView);
 
         // 고정 컬럼 설정
         if (fixedColumns !== undefined && fixedColumns > 0) {
@@ -819,10 +1202,6 @@ const DataGrid = ({
             });
         }
 
-        gridView.setOptions({
-            summaryMode: "aggregate",
-        });
-
         // footerUserSpans가 있는 경우 setColumnLayout으로 설정
         const checkFooterUserSpans = (layout: unknown[]): boolean => {
             return layout.some((item) => {
@@ -845,11 +1224,66 @@ const DataGrid = ({
             });
         };
 
-        if (checkFooterUserSpans(columnLayout)) {
+        const hasFooterUserSpans = checkFooterUserSpans(columnLayout);
+
+        if (hasFooterUserSpans) {
+            const validColumnNames = new Set(columns.map((c) => c.name));
+            const sanitizeColumnLayout = (
+                layout: unknown[],
+            ): unknown[] => {
+                const result: unknown[] = [];
+                for (const item of layout) {
+                    if (typeof item === "string") {
+                        if (validColumnNames.has(item)) {
+                            result.push(item);
+                        }
+                        continue;
+                    }
+                    if (!item || typeof item !== "object") continue;
+
+                    if ("column" in item) {
+                        const columnName = (item as { column?: unknown }).column;
+                        if (
+                            typeof columnName === "string" &&
+                            validColumnNames.has(columnName)
+                        ) {
+                            result.push(item);
+                        }
+                        continue;
+                    }
+
+                    if ("items" in item && Array.isArray((item as { items?: unknown[] }).items)) {
+                        const nextItems = sanitizeColumnLayout(
+                            (item as { items: unknown[] }).items,
+                        );
+                        if (nextItems.length > 0) {
+                            result.push({
+                                ...(item as Record<string, unknown>),
+                                items: nextItems,
+                            });
+                        }
+                        continue;
+                    }
+
+                    result.push(item);
+                }
+                return result;
+            };
+
             // setColumnLayout은 그리드가 완전히 렌더링된 후 호출해야 함
             setTimeout(() => {
                 if (gridRef.current?.gridView && columnLayout) {
-                    gridRef.current.gridView.setColumnLayout?.(columnLayout);
+                    const safeLayout = sanitizeColumnLayout(columnLayout as unknown[]);
+                    if (safeLayout.length === 0) return;
+                    try {
+                        (
+                            gridRef.current.gridView.setColumnLayout as
+                                | ((layout: unknown) => void)
+                                | undefined
+                        )?.(safeLayout);
+                    } catch (e) {
+                        console.warn("setColumnLayout skipped due to invalid columns:", e);
+                    }
                 }
             }, 100);
         }
@@ -874,7 +1308,7 @@ const DataGrid = ({
                         const colInfo: RealGridColumnInfo = {
                             name: col.name,
                             fieldName: col.fieldName,
-                            header: col.header,
+                            header: realGridHeaderWithTooltip(col.header),
                             editable: col.editable,
                             valueType: col.valueType,
                             dataFormat: col.dataFormat,
@@ -908,6 +1342,16 @@ const DataGrid = ({
                     (currentGridView as GridViewWithSetColumns).setColumns?.(
                         columnsWithFooter,
                     );
+                    columns.forEach((col) =>
+                        applyColumnListEditorProperties(
+                            currentGridView as GridViewWithSetColumnProperty,
+                            col,
+                        ),
+                    );
+                    applyFooterSettings(currentGridView);
+                    if (hasFooterUserSpans) {
+                        currentGridView.setColumnLayout?.(columnLayout);
+                    }
 
                     // setColumns 호출 후 footer 배열의 valueCallback을 다시 설정
                     setTimeout(() => {
@@ -948,6 +1392,11 @@ const DataGrid = ({
                                 );
                             }
                         });
+                        applyFooterSettings(currentGridView);
+                        if (hasFooterUserSpans) {
+                            currentGridView.setColumnLayout?.(columnLayout);
+                        }
+                        currentGridView.refresh?.();
                     }, 50);
                 } catch (e) {
                     console.warn("Failed to set columns with footer array:", e);
@@ -1018,12 +1467,19 @@ const DataGrid = ({
         rowData,
         showHeaderCheckbox,
         getGridDataRef,
+        headerHeight,
+        fitStyle,
+        enableSort,
     ]);
 
     // 행 클릭 이벤트 + 검증 오류 셀 클릭 시 showMessage (공식 문서 방식)
     useEffect(() => {
         const gridView = gridRef.current?.gridView;
-        if (!gridView || (!onRowClick && !cellTooltipCallback)) return;
+        if (
+            !gridView ||
+            (!onRowClick && !cellTooltipCallback && !onDataCellClick)
+        )
+            return;
 
         gridView.onCellClicked = (grid, clickData) => {
             if (
@@ -1042,10 +1498,10 @@ const DataGrid = ({
                         };
                     }
                 ).getCurrent?.();
+                const fieldName =
+                    cellIndex?.fieldName ?? cellIndex?.column ?? "";
                 // 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,
@@ -1075,6 +1531,13 @@ const DataGrid = ({
                         );
                     }
                 }
+                if (onDataCellClickRef.current && row !== undefined) {
+                    onDataCellClickRef.current({
+                        row: (row ?? {}) as Record<string, string | number>,
+                        fieldName,
+                        itemIndex: clickData.itemIndex,
+                    });
+                }
                 if (onRowClick)
                     onRowClick((row ?? {}) as Record<string, string | number>);
             } catch (error) {
@@ -1085,7 +1548,116 @@ const DataGrid = ({
         return () => {
             if (gridView.onCellClicked) gridView.onCellClicked = undefined;
         };
-    }, [onRowClick, cellTooltipCallback, columns]);
+    }, [onRowClick, onDataCellClick, cellTooltipCallback, columns]);
+
+    useEffect(() => {
+        const gridView = gridRef.current?.gridView;
+        if (!gridView || !onScrollToBottom) return;
+
+        gridView.onScrollToBottom = () => {
+            onScrollToBottomRef.current?.();
+        };
+
+        return () => {
+            if (gridView.onScrollToBottom)
+                gridView.onScrollToBottom = undefined;
+        };
+    }, [onScrollToBottom]);
+
+    useEffect(() => {
+        const gridView = gridRef.current?.gridView;
+        if (!gridView) return;
+
+        if (onItemChecked) {
+            gridView.onItemChecked = (_grid, itemIndex, checked) => {
+                if (isSyncingChecksFromRowDataRef.current) return;
+                onItemCheckedRef.current?.(itemIndex, checked);
+            };
+        } else {
+            gridView.onItemChecked = undefined;
+        }
+
+        if (onItemAllChecked) {
+            gridView.onItemAllChecked = (_grid, checked) => {
+                if (isSyncingChecksFromRowDataRef.current) return;
+                onItemAllCheckedRef.current?.(checked);
+            };
+        } else {
+            gridView.onItemAllChecked = undefined;
+        }
+
+        return () => {
+            if (gridView.onItemChecked) gridView.onItemChecked = undefined;
+            if (gridView.onItemAllChecked)
+                gridView.onItemAllChecked = undefined;
+        };
+    }, [onItemChecked, onItemAllChecked]);
+
+    useEffect(() => {
+        if (!gridRef.current?.gridView || !showHeaderCheckbox) return;
+
+        const gridView = gridRef.current.gridView as GridViewWithCheckApi;
+        const dataProvider = gridRef.current.dataProvider as
+            | { setRows?: (rows: Record<string, string | number>[]) => void }
+            | undefined;
+
+        if (dataProvider?.setRows) {
+            dataProvider.setRows(rowData);
+        }
+
+        const hasCheckedColumn = rowData.some((row) =>
+            Object.prototype.hasOwnProperty.call(row, "__checked"),
+        );
+        if (!hasCheckedColumn) return;
+
+        const timer = window.setTimeout(() => {
+            isSyncingChecksFromRowDataRef.current = true;
+            try {
+                gridView.checkAll?.(false);
+                rowData.forEach((row, itemIndex) => {
+                    if (!isRowCheckedFlag((row as Record<string, unknown>).__checked)) return;
+                    if (gridView.checkItem) {
+                        gridView.checkItem(itemIndex, true, false);
+                        return;
+                    }
+                    gridView.checkRow?.(itemIndex, true, false);
+                });
+            } catch (e) {
+                console.warn("check sync:", e);
+            } finally {
+                isSyncingChecksFromRowDataRef.current = false;
+            }
+        }, 0);
+
+        return () => window.clearTimeout(timer);
+    }, [rowData, showHeaderCheckbox]);
+
+    useEffect(() => {
+        const gridView = gridRef.current?.gridView;
+        if (!gridView) return;
+
+        gridView.onCellEdited = (grid, itemIndex, _row, field) => {
+            const fieldName = columns[field]?.fieldName;
+            if (!fieldName) return;
+
+            const newValue = grid.getValue(itemIndex, fieldName);
+            const prevRow = rowDataRef.current[itemIndex];
+            const oldValue = prevRow?.[fieldName] ?? "";
+
+            onCellEditedRef.current?.({
+                itemIndex,
+                fieldName,
+                oldValue,
+                newValue,
+            });
+        };
+
+        return () => {
+            if (gridView.onCellEdited) {
+                gridView.onCellEdited = undefined;
+            }
+        };
+    }, [columns]);
 
     return (
         <div className="mx-[0.6rem] flex flex-col gap-[0.6rem]">
@@ -1096,21 +1668,39 @@ const DataGrid = ({
                 style={{ display: "none" }}
                 onChange={handleFileChange}
             />
-            <div className="flex items-center justify-end gap-[0.6rem] px-[1.2rem]">
+            <div
+                className={`flex items-center ${statusInfo ? "justify-between" : "justify-end"} gap-[0.6rem] pr-[1.2rem]`}
+            >
                 {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"
-                                      ? "승인"
-                                      : "반려"}
+                            statusInfo.laeSbmsnSttsCd === "0" ? (
+                                "미작성"
+                            ) : statusInfo.laeSbmsnSttsCd === "1" ? (
+                                <span className="animate-pulse">작성중</span>
+                            ) : statusInfo.laeSbmsnSttsCd === "2" ? (
+                                <span className="!text-[#2094fa]">제출</span>
+                            ) : statusInfo.laeSbmsnSttsCd === "3" ? (
+                                <span className="!text-[#1fd078]">승인</span>
+                            ) : statusInfo.laeSbmsnSttsCd === "4" ? (
+                                <span className="relative inline-flex pr-3 !text-[#ff6c64]">
+                                    반려
+                                    <span className="absolute -right-0.5 -top-0.5 inline-flex size-[0.6125rem]">
+                                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#ff6c64] opacity-75" />
+                                        <span className="relative inline-flex size-[0.6125rem] rounded-full bg-[#ff6c64]" />
+                                    </span>
+                                </span>
+                            ) : (
+                                <span className="animate-pulse">검증중</span>
+                            )}
+                        </span>
+                        <span>
+                            반려사유:{" "}
+                            {statusInfo.rjctOpnnCn
+                                ? statusInfo.rjctOpnnCn
+                                : "-"}
                         </span>
                         <span>
                             제출일:{" "}
@@ -1133,33 +1723,57 @@ const DataGrid = ({
                         </span>
                     </div>
                 )}
-                {isExcelImport && (
-                    <Button
-                        className="h-[3.2rem] w-[96px] bg-gradient-green px-6 hover:bg-gradient-green-hover"
-                        type="button"
-                        onClick={importExcel}
-                    >
-                        <i className="diveicon di-file-excel" />
-                        <span>가져오기</span>
-                    </Button>
-                )}
-                {isExcelExport && (
-                    <Button
-                        className="h-[3.2rem] w-[96px] bg-gradient-green px-6 hover:bg-gradient-green-hover"
-                        type="button"
-                        onClick={exportExcel}
-                    >
-                        <i className="diveicon di-file-excel" />
-                        <span>내보내기</span>
-                    </Button>
-                )}
+                <div className="flex items-center gap-[0.6rem]">
+                    {isExcelImport && (
+                        <Button
+                            className="h-[3.2rem] w-[96px] bg-gradient-green px-6 hover:bg-gradient-green-hover"
+                            type="button"
+                            onClick={importExcel}
+                        >
+                            <i className="diveicon di-file-excel" />
+                            <span>가져오기</span>
+                        </Button>
+                    )}
+                    {isExcelExport && (
+                        <Button
+                            className="h-[3.2rem] w-[96px] bg-gradient-green px-6 hover:bg-gradient-green-hover"
+                            type="button"
+                            onClick={exportExcel}
+                        >
+                            <i className="diveicon di-file-excel" />
+                            <span>내보내기</span>
+                        </Button>
+                    )}
+                </div>
             </div>
-            <div className="h-[65vh]">
+            <div style={{ height: `${gridHeight}vh` }}>
                 <RealGridReact
                     ref={gridRef}
                     autoGenerateField={true}
                     layout={columnLayout}
                     rows={rowData}
+                    onRGDataColumnsChanged={(grid) => {
+                        const dp = gridRef.current?.dataProvider as
+                            | {
+                                  setFields?: (f: unknown[]) => void;
+                                  setRows?: (
+                                      r: Record<string, string | number>[],
+                                  ) => void;
+                              }
+                            | undefined;
+                        try {
+                            dp?.setFields?.(
+                                buildFieldsFromColumns(columnsRef.current),
+                            );
+                            dp?.setRows?.(rowDataRef.current);
+                        } catch (e) {
+                            console.warn("onRGDataColumnsChanged setFields:", e);
+                        }
+                        reapplyListEditorsOnGrid(
+                            grid as GridViewWithSetColumnProperty,
+                            columnsRef.current,
+                        );
+                    }}
                     onInitialized={(grid) => {
                         if (!grid) return;
                         (
@@ -1170,12 +1784,14 @@ const DataGrid = ({
                                     d: unknown[],
                                 ) => boolean;
                             }
-                        ).onSorting = createOnSortingHandler(
-                            columns,
-                            setRowData,
-                            sortDirRef,
-                            originalRowsRef,
-                        );
+                        ).onSorting = enableSort
+                            ? createOnSortingHandler(
+                                  columns,
+                                  setRowData,
+                                  sortDirRef,
+                                  originalRowsRef,
+                              )
+                            : () => false;
                         const dataProvider = gridRef.current
                             ?.dataProvider as unknown as
                             | {
@@ -1192,15 +1808,63 @@ const DataGrid = ({
                             dataProvider.setFields(
                                 buildFieldsFromColumns(columns),
                             );
+                            columnsFieldsSigRef.current = columns
+                                .map((c) => c.fieldName)
+                                .join("\u0001");
                         }
-                        if (dataProvider?.setRows && rowData?.length) {
+                        if (dataProvider?.setRows)
                             dataProvider.setRows(rowData);
-                        }
+                        if (getGridRef) getGridRef.current = gridRef.current;
                         const gridView = gridRef.current?.gridView ?? grid;
+                        applyDefaultGridEditOptions(
+                            gridView as GridViewWithEditOptions,
+                        );
                         if (!gridView?.columnByName) return;
                         setTimeout(() => {
                             const gv = gridRef.current?.gridView;
                             if (!gv?.columnByName) return;
+                            // 공식 문서: 헤더 툴팁 = header.showTooltip + onShowHeaderTooltip
+                            (
+                                gv as {
+                                    onShowHeaderTooltip?: (
+                                        grid: unknown,
+                                        column: {
+                                            name?: string;
+                                            fieldName?: string;
+                                            header?: {
+                                                tooltip?: string;
+                                            };
+                                        },
+                                        value: string,
+                                        layout?: {
+                                            name?: string;
+                                            fieldName?: string;
+                                            column?: string | { name?: string; fieldName?: string };
+                                        },
+                                        isEllipsis?: boolean,
+                                    ) => string | undefined;
+                                }
+                            ).onShowHeaderTooltip = (_grid, headerColumn, _value, layout) => {
+                                const currentColumns = columnsRef.current;
+                                const directTip = headerColumn?.header?.tooltip?.trim();
+                                if (directTip) return directTip;
+
+                                const layoutColumn =
+                                    typeof layout?.column === "string"
+                                        ? layout.column
+                                        : layout?.column?.name ?? layout?.column?.fieldName;
+
+                                const col = currentColumns.find(
+                                    (c) =>
+                                        c.name === headerColumn?.name ||
+                                        c.fieldName === headerColumn?.fieldName ||
+                                        c.name === layout?.name ||
+                                        c.fieldName === layout?.fieldName ||
+                                        c.name === layoutColumn ||
+                                        c.fieldName === layoutColumn,
+                                );
+                                return col ? resolveColumnTooltip(col) : undefined;
+                            };
                             // 공식 문서: 데이터 영역 툴팁 = renderer.showTooltip + onShowTooltip (displayOptions는 Ellipsis용이라 사용 안 함)
                             if (cellTooltipCallbackRef.current) {
                                 (
@@ -1254,6 +1918,26 @@ const DataGrid = ({
                                     renderer?: { showTooltip?: boolean };
                                 } | null;
                                 if (gridCol) {
+                                    (
+                                        gv as {
+                                            setColumnProperty?: (
+                                                col: string,
+                                                key: string,
+                                                value: unknown,
+                                            ) => void;
+                                        }
+                                    ).setColumnProperty?.(
+                                        column.name,
+                                        "header",
+                                        realGridHeaderWithTooltip({
+                                            ...column.header,
+                                            tooltip: resolveColumnTooltip(column),
+                                        }),
+                                    );
+                                    applyColumnListEditorProperties(
+                                        gv as GridViewWithSetColumnProperty,
+                                        column,
+                                    );
                                     if (cellTooltipCallbackRef.current) {
                                         (
                                             gv as {
@@ -1323,8 +2007,37 @@ const DataGrid = ({
                                         ? column.dataFormat
                                         : "#,##0.000",
                                 })}
-                                header={column.header}
+                            header={realGridHeaderWithTooltip({
+                                ...column.header,
+                                tooltip: resolveColumnTooltip(column),
+                            })}
                                 editable={column.editable}
+                                {...(column.editor != null && {
+                                    editor: column.editor,
+                                })}
+                                {...(column.values != null && {
+                                    values: column.values,
+                                })}
+                                {...(column.labels != null && {
+                                    labels: column.labels,
+                                })}
+                                {...(column.lookupDisplay === true && {
+                                    lookupDisplay: true,
+                                })}
+                                {...(isDateEditorColumn(column) && {
+                                    field: {
+                                        fieldName: column.fieldName,
+                                        dataType: ValueType.DATETIME,
+                                        datetimeFormat:
+                                            column.datetimeFormat ??
+                                            column.editor?.datetimeFormat ??
+                                            "yyyy-MM-dd",
+                                    },
+                                    datetimeFormat:
+                                        column.datetimeFormat ??
+                                        column.editor?.datetimeFormat ??
+                                        "yyyy-MM-dd",
+                                })}
                                 {...(column.width != null && {
                                     width: column.width,
                                 })}
@@ -1354,7 +2067,7 @@ const DataGrid = ({
                                         ? { criteria: "value" }
                                         : undefined
                                 }
-                                sortable={!column.sortdisable}
+                                sortable={enableSort && !column.sortdisable}
                             />
                         );
                     })}
diff --git a/apps/st/src/components/module/ExceptionProcessingHistoryDialog.tsx b/apps/st/src/components/module/ExceptionProcessingHistoryDialog.tsx
new file mode 100644
index 000000000..4d94b5aac
--- /dev/null
+++ b/apps/st/src/components/module/ExceptionProcessingHistoryDialog.tsx
@@ -0,0 +1,623 @@
+"use client";
+
+import { type Dispatch, type MutableRefObject, type SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { RealGridReact } from "realgrid-react";
+
+import { getUserInfo } from "../../../../../packages/common/components/src/api";
+import { useAlertStore } from "@/shared/lib";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type {
+    ReviewInputSaveRequest,
+    VerificationResultListRequest,
+    VerificationResultReportItem,
+} from "@/entities/statistics/model/statistics-interface";
+import {
+    Button,
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Label,
+    LoadingWithAnimation,
+    Tabs,
+    TabsContent,
+    TabsList,
+    TabsTrigger,
+    Textarea,
+} from "@common/components";
+
+import DataGrid from "@/components/module/DataGrid";
+import { VerificationResultHistoryPagination } from "@/components/module/VerificationResultHistoryPagination";
+import type { CellStyleCallbackParams, ColumnInfo } from "@/components/type/DataGrid.type";
+
+/** 통계 입력 현황 > 행 클릭 시 사용자예외처리(prcsYn=2) 내역만 조회 */
+export interface ExceptionProcessingHistoryQueryContext {
+    sewerBzmnCd: string;
+    ctpvNm: string;
+    sggNm: string;
+    statsYr: string;
+    statsCd: string;
+}
+
+export interface ExceptionProcessingHistoryDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    queryContext?: ExceptionProcessingHistoryQueryContext | null;
+    emptyMessage?: string;
+    /** 반려 API 성공 후 (다이얼로그 내 목록 재조회 이후) 상위 화면 등에서 호출 */
+    onRejectSuccess?: () => void | Promise<void>;
+}
+
+type ExceptionHistoryGridRow = Record<string, string | number>;
+type ExceptionHistoryTabKey = "NV" | "IMR" | "HB";
+
+const exceptionHistoryTabs: { value: ExceptionHistoryTabKey; label: string }[] = [
+    { value: "NV", label: "일반검증 내역" },
+    { value: "IMR", label: "I-MR 검증내역" },
+    { value: "HB", label: "HB 검증내역" },
+];
+
+const TITLE = "예외처리 내역 조회";
+/** 예외처리 건만 */
+const PRCS_YN_LIST = "2";
+
+export type ExceptionRejectSubmitItem = {
+    vrfcSn: number;
+    statsYr: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    mdfrId: string;
+    rjctOpnnCn?: string;
+};
+
+function prcsYnCodeToNumber(raw: string | number | undefined): number | undefined {
+    if (raw === undefined || raw === null) return undefined;
+    if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+    const s = String(raw).trim();
+    if (s === "") return undefined;
+    const n = Number.parseInt(s, 10);
+    return Number.isFinite(n) ? n : undefined;
+}
+
+function exceptionPrcsYnNmCellStyle({ fieldName, row }: CellStyleCallbackParams): string | undefined {
+    if (fieldName !== "prcsYnNm") return undefined;
+    const code = prcsYnCodeToNumber(row.prcsYn);
+    if (code === 0 || code === 4) return "rg-cell-vrf-prcs-bad";
+    return "rg-cell-vrf-prcs-ok";
+}
+
+const exceptionHistoryColumnInfo: ColumnInfo = {
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역" }, editable: false },
+        { name: "vrfcTrgtNm", fieldName: "vrfcTrgtNm", header: { text: "검증대상" }, editable: false },
+        { name: "rsnExpln", fieldName: "rsnExpln", header: { text: "사유" }, editable: false },
+        { name: "nowVlCn", fieldName: "nowVlCn", header: { text: "입력값" }, editable: false },
+        { name: "compVlCn", fieldName: "compVlCn", header: { text: "기준값" }, editable: false },
+        { name: "prcsYnNm", fieldName: "prcsYnNm", header: { text: "처리여부" }, editable: false },
+        { name: "stVrfRjtComNm", fieldName: "stVrfRjtComNm", header: { text: "반려상태" }, editable: false },
+        { name: "prcsOpnnExpln", fieldName: "prcsOpnnExpln", header: { text: "처리의견" }, editable: false },
+        { name: "rjctOpnnCn", fieldName: "rjctOpnnCn", header: { text: "반려의견" }, editable: false },
+        { name: "regDt", fieldName: "regDt", header: { text: "등록일시" }, editable: false },
+        { name: "mdfcnDt", fieldName: "mdfcnDt", header: { text: "갱신일시" }, editable: false },
+        {
+            name: "individualReject",
+            fieldName: "individualReject",
+            header: { text: "개별 반려" },
+            editable: false,
+            width: 104,
+            styleName: "rg-cell-reject-mini-btn",
+        },
+        { name: "prcsYn", fieldName: "prcsYn", header: { text: "검증결과상태코드" }, editable: false, visible: false },
+        { name: "vrfcSn", fieldName: "vrfcSn", header: { text: "vrfcSn" }, editable: false, visible: false },
+    ],
+    columnLayout: [
+        "ctpvNm",
+        "admdstNm",
+        "vrfcTrgtNm",
+        "rsnExpln",
+        "nowVlCn",
+        "compVlCn",
+        "prcsYnNm",
+        "stVrfRjtComNm",
+        "prcsOpnnExpln",
+        "rjctOpnnCn",
+        "regDt",
+        "mdfcnDt",
+        "individualReject",
+        "prcsYn",
+        "vrfcSn",
+    ],
+};
+
+export function ExceptionProcessingHistoryDialog({
+    open,
+    onOpenChange,
+    queryContext,
+    emptyMessage = "표시할 예외처리 내역이 없습니다.",
+    onRejectSuccess,
+}: ExceptionProcessingHistoryDialogProps) {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const nvGridRef = useRef<RealGridReact | null>(null);
+    const imrGridRef = useRef<RealGridReact | null>(null);
+    const hbGridRef = useRef<RealGridReact | null>(null);
+    const [rejectReasonDialogOpen, setRejectReasonDialogOpen] = useState(false);
+    const [pendingRejectVrfcSns, setPendingRejectVrfcSns] = useState<number[]>([]);
+    const [rejectReasonText, setRejectReasonText] = useState("");
+    const [rejectSubmitting, setRejectSubmitting] = useState(false);
+
+    const [activeTab, setActiveTab] = useState<ExceptionHistoryTabKey>("NV");
+    const [normalEntries, setNormalEntries] = useState<VerificationResultReportItem[]>([]);
+    const [imrEntries, setImrEntries] = useState<VerificationResultReportItem[]>([]);
+    const [hbEntries, setHbEntries] = useState<VerificationResultReportItem[]>([]);
+    const [normalPageIndex, setNormalPageIndex] = useState(0);
+    const [imrPageIndex, setImrPageIndex] = useState(0);
+    const [hbPageIndex, setHbPageIndex] = useState(0);
+    const [normalPageCount, setNormalPageCount] = useState(1);
+    const [imrPageCount, setImrPageCount] = useState(1);
+    const [hbPageCount, setHbPageCount] = useState(1);
+    const [normalLoading, setNormalLoading] = useState(false);
+    const [imrLoading, setImrLoading] = useState(false);
+    const [hbLoading, setHbLoading] = useState(false);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    const resetState = useCallback(() => {
+        setActiveTab("NV");
+        setNormalEntries([]);
+        setImrEntries([]);
+        setHbEntries([]);
+        setNormalPageIndex(0);
+        setImrPageIndex(0);
+        setHbPageIndex(0);
+        setNormalPageCount(1);
+        setImrPageCount(1);
+        setHbPageCount(1);
+        setNormalLoading(false);
+        setImrLoading(false);
+        setHbLoading(false);
+        setErrorMessage(null);
+        setRejectReasonDialogOpen(false);
+        setPendingRejectVrfcSns([]);
+        setRejectReasonText("");
+        setRejectSubmitting(false);
+    }, []);
+
+    const fetchPage = useCallback(
+        async (vrfcMthdCd: ExceptionHistoryTabKey, pageIndex: number) => {
+            if (!queryContext) return null;
+            const param: VerificationResultListRequest = {
+                sewerBzmnCd: queryContext.sewerBzmnCd,
+                ctpvNm: queryContext.ctpvNm,
+                sggNm: queryContext.sggNm,
+                statsYr: queryContext.statsYr,
+                statsCd: queryContext.statsCd,
+                vrfcMthdCd,
+                prcsYnList: PRCS_YN_LIST,
+                rejectCodeList: "0,1,2",
+                page: pageIndex + 1,
+                size: 30,
+            };
+            return statisticsApi.getVerificationResultList(param);
+        },
+        [queryContext],
+    );
+
+    const loadInitial = useCallback(async () => {
+        if (!queryContext) {
+            setErrorMessage("조회 조건이 없어 예외처리 내역을 불러올 수 없습니다.");
+            return;
+        }
+        setErrorMessage(null);
+        setNormalLoading(true);
+        setImrLoading(true);
+        setHbLoading(true);
+        setNormalPageIndex(0);
+        setImrPageIndex(0);
+        setHbPageIndex(0);
+        try {
+            const [nvRes, imrRes, hbRes] = await Promise.all([
+                fetchPage("NV", 0),
+                fetchPage("IMR", 0),
+                fetchPage("HB", 0),
+            ]);
+            setNormalEntries(nvRes?.data?.verifyResultList ?? []);
+            setImrEntries(imrRes?.data?.verifyResultList ?? []);
+            setHbEntries(hbRes?.data?.verifyResultList ?? []);
+            setNormalPageCount(nvRes?.data?.pageInfo?.totalPages ?? 1);
+            setImrPageCount(imrRes?.data?.pageInfo?.totalPages ?? 1);
+            setHbPageCount(hbRes?.data?.pageInfo?.totalPages ?? 1);
+        } catch {
+            setNormalEntries([]);
+            setImrEntries([]);
+            setHbEntries([]);
+            setNormalPageCount(1);
+            setImrPageCount(1);
+            setHbPageCount(1);
+            setErrorMessage("예외처리 내역 조회 중 오류가 발생했습니다.");
+        } finally {
+            setNormalLoading(false);
+            setImrLoading(false);
+            setHbLoading(false);
+        }
+    }, [fetchPage, queryContext]);
+
+    const handleNormalPageChange = useCallback(
+        async (pageIndex: number) => {
+            if (pageIndex === normalPageIndex || !queryContext) return;
+            setErrorMessage(null);
+            setNormalLoading(true);
+            try {
+                const response = await fetchPage("NV", pageIndex);
+                setNormalEntries(response?.data?.verifyResultList ?? []);
+                setNormalPageCount(response?.data?.pageInfo?.totalPages ?? 1);
+                setNormalPageIndex(pageIndex);
+            } catch {
+                setErrorMessage("일반검증 내역 조회 중 오류가 발생했습니다.");
+            } finally {
+                setNormalLoading(false);
+            }
+        },
+        [fetchPage, normalPageIndex, queryContext],
+    );
+
+    const handleImrPageChange = useCallback(
+        async (pageIndex: number) => {
+            if (pageIndex === imrPageIndex || !queryContext) return;
+            setErrorMessage(null);
+            setImrLoading(true);
+            try {
+                const response = await fetchPage("IMR", pageIndex);
+                setImrEntries(response?.data?.verifyResultList ?? []);
+                setImrPageCount(response?.data?.pageInfo?.totalPages ?? 1);
+                setImrPageIndex(pageIndex);
+            } catch {
+                setErrorMessage("I-MR 검증내역 조회 중 오류가 발생했습니다.");
+            } finally {
+                setImrLoading(false);
+            }
+        },
+        [fetchPage, imrPageIndex, queryContext],
+    );
+
+    const handleHbPageChange = useCallback(
+        async (pageIndex: number) => {
+            if (pageIndex === hbPageIndex || !queryContext) return;
+            setErrorMessage(null);
+            setHbLoading(true);
+            try {
+                const response = await fetchPage("HB", pageIndex);
+                setHbEntries(response?.data?.verifyResultList ?? []);
+                setHbPageCount(response?.data?.pageInfo?.totalPages ?? 1);
+                setHbPageIndex(pageIndex);
+            } catch {
+                setErrorMessage("HB 검증내역 조회 중 오류가 발생했습니다.");
+            } finally {
+                setHbLoading(false);
+            }
+        },
+        [fetchPage, hbPageIndex, queryContext],
+    );
+
+    useEffect(() => {
+        if (!open) {
+            resetState();
+            return;
+        }
+        void loadInitial();
+    }, [loadInitial, open, resetState]);
+
+    const mapRows = (entries: VerificationResultReportItem[]): ExceptionHistoryGridRow[] =>
+        entries.map((item) => ({
+            ctpvNm: item.ctpvNm,
+            admdstNm: item.admdstNm ?? item.sggNm ?? "-",
+            vrfcTrgtNm: item.vrfcTrgtNm,
+            rsnExpln: item.rsnExpln,
+            nowVlCn: item.nowVlCn ?? "-",
+            compVlCn: item.compVlCn ?? "-",
+            prcsYnNm: item.prcsYnNm ?? "-",
+            stVrfRjtComNm: item.stVrfRjtComNm ?? "-",
+            prcsOpnnExpln: item.prcsOpnnExpln ?? "-",
+            rjctOpnnCn: item.rjctOpnnCn ?? "-",
+            prcsYn: item.prcsYn ?? "",
+            regDt: (item.regDt ?? "").slice(0, 16),
+            mdfcnDt: (item.mdfcnDt ?? "").slice(0, 16),
+            individualReject: "개별 반려",
+            vrfcSn: item.vrfcSn,
+        }));
+
+    const normalRows = useMemo(() => mapRows(normalEntries), [normalEntries]);
+    const imrRows = useMemo(() => mapRows(imrEntries), [imrEntries]);
+    const hbRows = useMemo(() => mapRows(hbEntries), [hbEntries]);
+
+    const noopSetRows = ((_: SetStateAction<Record<string, string | number>[]>) => {}) as Dispatch<
+        SetStateAction<Record<string, string | number>[]>
+    >;
+
+    const handleOpenRejectReasonDialog = useCallback(() => {
+        if (!queryContext) {
+            alert("조회 조건이 없습니다.");
+            return;
+        }
+        const rows =
+            activeTab === "NV" ? normalRows : activeTab === "IMR" ? imrRows : hbRows;
+        const gridRef =
+            activeTab === "NV" ? nvGridRef : activeTab === "IMR" ? imrGridRef : hbGridRef;
+        const gridView = gridRef.current?.gridView;
+        if (!gridView) {
+            alert("데이터가 존재하지 않습니다.");
+            return;
+        }
+        const checkedIndices = (gridView.getCheckedRows?.(true, false, true) ?? []) as number[];
+        if (checkedIndices.length === 0) {
+            alert("반려할 항목을 체크해주세요.");
+            return;
+        }
+        const vrfcSns: number[] = [];
+        for (const itemIndex of checkedIndices) {
+            const row = rows[itemIndex];
+            if (!row) continue;
+            const vrfcSn = Number(row.vrfcSn);
+            if (!Number.isFinite(vrfcSn)) continue;
+            vrfcSns.push(vrfcSn);
+        }
+        if (vrfcSns.length === 0) {
+            alert("유효한 검증번호가 있는 행을 선택해주세요.");
+            return;
+        }
+        setPendingRejectVrfcSns(vrfcSns);
+        setRejectReasonText("");
+        setRejectSubmitting(false);
+        setRejectReasonDialogOpen(true);
+    }, [activeTab, alert, hbRows, imrRows, normalRows, queryContext]);
+
+    const resetRejectReasonDialog = useCallback(() => {
+        setRejectReasonDialogOpen(false);
+        setPendingRejectVrfcSns([]);
+        setRejectReasonText("");
+        setRejectSubmitting(false);
+    }, []);
+
+    const handleRejectReasonDialogOpenChange = useCallback(
+        (nextOpen: boolean) => {
+            if (!nextOpen) resetRejectReasonDialog();
+        },
+        [resetRejectReasonDialog],
+    );
+
+    const handleConfirmReject = useCallback(async () => {
+        if (!queryContext || pendingRejectVrfcSns.length === 0) {
+            alert("반려할 항목이 없습니다. 다시 선택해주세요.");
+            resetRejectReasonDialog();
+            return;
+        }
+        let userInfo;
+        try {
+            userInfo = await getUserInfo();
+        } catch {
+            alert("사용자 정보를 불러오지 못했습니다.");
+            return;
+        }
+        const mdfrId = userInfo.userUnqId;
+        const trimmedReason = rejectReasonText.trim();
+
+        const items: ReviewInputSaveRequest[] = pendingRejectVrfcSns.map((vrfcSn) => ({
+            type: "INPUT",
+            statsYr: queryContext.statsYr,
+            sewerBzmnCd: queryContext.sewerBzmnCd,
+            statsCd: queryContext.statsCd,
+            mdfrId,
+            vrfcSn: String(vrfcSn),
+            ...(trimmedReason ? { rjctOpnnCn: trimmedReason } : {}),
+        }));
+
+        setRejectSubmitting(true);
+        try {
+            const response = await statisticsApi.saveInputReturn(items);
+            if (response.resultCode.toLowerCase() !== "success") {
+                alert(response.message ?? "반려 처리 중 오류가 발생했습니다.");
+                return;
+            }
+            alert("반려 처리되었습니다.");
+            resetRejectReasonDialog();
+            await Promise.all([
+                loadInitial(),
+                onRejectSuccess?.() ?? Promise.resolve(),
+            ]);
+        } catch {
+            alert("반려 처리 중 오류가 발생했습니다.");
+        } finally {
+            setRejectSubmitting(false);
+        }
+    }, [
+        alert,
+        loadInitial,
+        onRejectSuccess,
+        pendingRejectVrfcSns,
+        queryContext,
+        rejectReasonText,
+        resetRejectReasonDialog,
+    ]);
+
+    const handleGridRowClick = useCallback(
+        (rowData: Record<string, string | number>) => {
+            const gridRef =
+                activeTab === "NV" ? nvGridRef : activeTab === "IMR" ? imrGridRef : hbGridRef;
+            const current = gridRef.current?.gridView?.getCurrent?.() as
+                | { fieldName?: string; column?: string }
+                | undefined;
+            const fieldName = current?.fieldName ?? current?.column;
+            if (fieldName !== "individualReject") return;
+            const vrfcSn = Number(rowData.vrfcSn);
+            if (!Number.isFinite(vrfcSn)) {
+                alert("유효한 검증번호가 있는 행을 선택해주세요.");
+                return;
+            }
+            setPendingRejectVrfcSns([vrfcSn]);
+            setRejectReasonText("");
+            setRejectSubmitting(false);
+            setRejectReasonDialogOpen(true);
+        },
+        [activeTab, alert],
+    );
+
+    const renderGrid = (
+        rows: ExceptionHistoryGridRow[],
+        pageIndex: number,
+        pageCount: number,
+        onPageIndexChange: (page: number) => void,
+        loading: boolean,
+        gridRef: MutableRefObject<RealGridReact | null>,
+    ) => {
+        if (!loading && rows.length === 0) {
+            return <p className="p-6 text-center text-[1.3rem] text-muted-foreground h-[65vh] flex justify-center items-center">{emptyMessage}</p>;
+        }
+
+        return (
+            <div className="relative space-y-2">
+                <DataGrid
+                    columnInfo={exceptionHistoryColumnInfo}
+                    rowData={rows}
+                    setRowData={noopSetRows}
+                    isExcelImport={false}
+                    isExcelExport={false}
+                    showHeaderCheckbox={true}
+                    enableSort={false}
+                    getGridRef={gridRef}
+                    cellStyleCallback={exceptionPrcsYnNmCellStyle}
+                    onRowClick={handleGridRowClick}
+                />
+                <VerificationResultHistoryPagination
+                    pageCount={Math.max(pageCount, 1)}
+                    pageIndex={Math.max(pageIndex, 0)}
+                    onPageIndexChange={onPageIndexChange}
+                    className="mx-2 mb-2"
+                />
+                {loading && (
+                    <div className="absolute inset-0 z-10 rounded-md [data-theme='black']:bg-transparent bg-white/40 flex items-center justify-center">
+                        <div className="relative size-[5rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <>
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-[80%]" aria-describedby={undefined}>
+                <DialogHeader>
+                    <DialogTitle>{`${TITLE} - ${queryContext?.statsYr} ${queryContext?.ctpvNm} ${queryContext?.sggNm}`}</DialogTitle>
+                </DialogHeader>
+                <div className="max-h-[85vh] space-y-5 overflow-auto">
+                    {errorMessage && (
+                        <p className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[1.2rem] text-destructive">
+                            {errorMessage}
+                        </p>
+                    )}
+                    <Tabs
+                        value={activeTab}
+                        onValueChange={(value) => setActiveTab(value as ExceptionHistoryTabKey)}
+                        className="w-full"
+                        variant="default"
+                    >
+                        <TabsList>
+                            {exceptionHistoryTabs.map((tab) => (
+                                <TabsTrigger key={tab.value} value={tab.value}>
+                                    {tab.label}
+                                </TabsTrigger>
+                            ))}
+                        </TabsList>
+                        <TabsContent value="NV" className="rounded-md border border-border">
+                            {renderGrid(
+                                normalRows,
+                                normalPageIndex,
+                                normalPageCount,
+                                handleNormalPageChange,
+                                normalLoading,
+                                nvGridRef,
+                            )}
+                        </TabsContent>
+                        <TabsContent value="IMR" className="rounded-md border border-border">
+                            {renderGrid(
+                                imrRows,
+                                imrPageIndex,
+                                imrPageCount,
+                                handleImrPageChange,
+                                imrLoading,
+                                imrGridRef,
+                            )}
+                        </TabsContent>
+                        <TabsContent value="HB" className="rounded-md border border-border">
+                            {renderGrid(
+                                hbRows,
+                                hbPageIndex,
+                                hbPageCount,
+                                handleHbPageChange,
+                                hbLoading,
+                                hbGridRef,
+                            )}
+                        </TabsContent>
+                    </Tabs>
+                </div>
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        color="red"
+                        onClick={handleOpenRejectReasonDialog}
+                        disabled={rejectSubmitting}
+                    >
+                        일괄 반려
+                    </Button>
+                    <DialogClose asChild>
+                        <Button type="button" color="gray">
+                            닫기
+                        </Button>
+                    </DialogClose>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+
+        <Dialog open={rejectReasonDialogOpen} onOpenChange={handleRejectReasonDialogOpenChange}>
+            <DialogContent className="max-w-[56rem]" aria-describedby={undefined}>
+                <DialogHeader>
+                    <DialogTitle>예외처리 반려</DialogTitle>
+                </DialogHeader>
+                <div className="space-y-2 py-2">
+                    <Label htmlFor="exception-reject-reason" className="text-label">
+                        반려사유 (선택, 체크한 모든 행에 동일 적용)
+                    </Label>
+                    <Textarea
+                        id="exception-reject-reason"
+                        value={rejectReasonText}
+                        onChange={(e) => setRejectReasonText(e.target.value)}
+                        rows={4}
+                        className="min-h-[8rem] p-2 !text-xl"
+                        placeholder='미입력 시 "검증 리포트를 확인하여 주시기 바랍니다." 자동 주입'
+                        disabled={rejectSubmitting}
+                    />
+                </div>
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        color="red"
+                        disabled={rejectSubmitting}
+                        onClick={() => void handleConfirmReject()}
+                    >
+                        반려 확정
+                    </Button>
+                    <DialogClose asChild>
+                        <Button type="button" color="gray" disabled={rejectSubmitting}>
+                            취소
+                        </Button>
+                    </DialogClose>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+        </>
+    );
+}
diff --git a/apps/st/src/components/module/GridTopActionButton.tsx b/apps/st/src/components/module/GridTopActionButton.tsx
new file mode 100644
index 000000000..ae6b3ee4a
--- /dev/null
+++ b/apps/st/src/components/module/GridTopActionButton.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@common/components";
+
+import SidoSggFacilityNameSearchForm from "./SidoSggFacilityNameSearchForm";
+import type { SearchFormValues } from "../type/SearchForm.type";
+
+type GridTopActionButtonProps = {
+    text: string;
+    onClick?: (helpers: { openDialog: (title?: string) => void; closeDialog: () => void }) => void;
+    /** 상위 화면 검색 통계연도 — 시설 조회 다이얼로그에 전달 */
+    statsYr?: string;
+    /** 상위 화면 최근 검색조건 */
+    initialSearchValues?: Pick<SearchFormValues, "sido" | "gugun" | "bsnmCd"> | null;
+    /** 다이얼로그 저장 성공 후 부모 갱신 */
+    onSaveSuccess?: () => Promise<void> | void;
+};
+
+const GridTopActionButton = ({ text, onClick, statsYr, initialSearchValues, onSaveSuccess }: GridTopActionButtonProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [title, setTitle] = useState(text);
+
+    const openDialog = (nextTitle?: string) => {
+        setTitle(nextTitle ?? text);
+        setIsOpen(true);
+    };
+
+    const closeDialog = () => setIsOpen(false);
+
+    const handleClick = () => {
+        if (onClick) {
+            onClick({ openDialog, closeDialog });
+            return;
+        }
+        openDialog(text);
+    };
+
+    return (
+        <>
+            <Button className="h-[3.2rem] px-6" color="white" type="button" onClick={handleClick}>
+                <span>{text}</span>
+            </Button>
+            <Dialog open={isOpen} onOpenChange={setIsOpen}>
+                <DialogContent aria-describedby={undefined} className="max-w-[100rem]">
+                    <DialogHeader>
+                        <DialogTitle>{title}</DialogTitle>
+                    </DialogHeader>
+                    <SidoSggFacilityNameSearchForm
+                        statsYr={statsYr}
+                        initialSearchValues={initialSearchValues}
+                        onSaveSuccess={onSaveSuccess}
+                    />
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+};
+
+export default GridTopActionButton;
diff --git a/apps/st/src/components/module/SearchForm.tsx b/apps/st/src/components/module/SearchForm.tsx
index 5bc809787..58faea987 100644
--- a/apps/st/src/components/module/SearchForm.tsx
+++ b/apps/st/src/components/module/SearchForm.tsx
@@ -1,42 +1,108 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import useSWR from 'swr';
+import { useEffect, useState } from "react";
 
+import useSWR from "swr";
+
+import { useAlertStore, useUserStore } from "@/shared/lib";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type {
+    ApiResponse,
+    SearchCondition,
+    Sgg,
+} from "@/entities/statistics/model/statistics-interface";
 import {
     Button,
+    Checkbox,
     Input,
     Label,
     Select,
-    SelectTrigger,
     SelectContent,
     SelectItem,
-    SelectValue
+    SelectTrigger,
+    SelectValue,
+} from "@common/components";
+
+import {
+    defaultSearchFormProps,
+    type SearchFormClsfCd,
+    type SearchFormProps,
+    type SearchFormValues,
+} from "../type/SearchForm.type";
+import { doList } from "../util/column/input/DoList";
+
+const getSidoListFetcher = async (
+    key: [string, string],
+): Promise<ApiResponse<SearchCondition>> => {
+    return statisticsApi.getSidoList({ instSeCd: key[1] });
+};
+
+const getSggListFetcher = async (
+    key: [string, string, string, string],
+): Promise<ApiResponse<Sgg[]>> => {
+    const gugunSkipYn = doList.includes(key[3]) ? "N" : "Y";
+    return statisticsApi.getSggList(key[1], {
+        instSeCd: key[2],
+        gugunSkipYn,
+    });
+};
+
+function buildSearchFormValues(
+    props: SearchFormProps,
+    sidoList: ApiResponse<SearchCondition> | undefined,
+    defaultYear: number,
+): SearchFormValues {
+    const d = props.defaultValues;
+    const initialClsfCd: SearchFormClsfCd =
+        d?.clsfCd === "ALL" || d?.clsfCd === "INPT" || d?.clsfCd === "VRFC"
+            ? d.clsfCd
+            : "ALL";
+
+    if (d?.sido) {
+        return {
+            sido: d.sido,
+            gugun: d.gugun || "",
+            year: d.year || defaultYear.toString(),
+            order: d.order || "",
+            fctName: d.fctName || "",
+            bsnmCd: d.bsnmCd || "",
+            isDetail: false,
+            isSummary: d.isSummary || "",
+            clsfCd: initialClsfCd,
+        };
+    }
+
+    const first = sidoList?.data?.sidoList?.[0];
+    const useFirstSido = (props.sido ?? defaultSearchFormProps.sido) && first;
+
+    return {
+        sido: useFirstSido ? first.sido : "",
+        gugun: "",
+        year: d?.year || defaultYear.toString(),
+        order: d?.order || "",
+        fctName: d?.fctName || "",
+        bsnmCd: useFirstSido ? first.bsnmCd : "",
+        isDetail: false,
+        isSummary: d?.isSummary || "",
+        clsfCd: initialClsfCd,
+    };
 }
-from "@common/components";
-
-import { useAlertStore } from "@/shared/lib";
-import { type SearchFormProps, type SearchFormValues, defaultSearchFormProps } from "../type/SearchForm.type";
-import { statisticsAPi } from "@/entities/statistics/api/statistics-service";
-import type { ApiResponse, SearchCondition, Sgg } from "@/entities/statistics/model/statistics-interface";
-
-const getSidoListFetcher = async (): Promise<ApiResponse<SearchCondition>> => {
-    return statisticsAPi.getSidoList();
-};
-
-const getSggListFetcher = async (key: [string, string]): Promise<ApiResponse<Sgg[]>> => {
-    return statisticsAPi.getSggList(key[1]);
-};
 
 const SearchForm = (props: SearchFormProps = {}) => {
     const { setMessage: alert } = useAlertStore((state) => state);
+    const userInfo = useUserStore((state) => state.userInfo);
     const mergedProps = { ...defaultSearchFormProps, ...props };
+    const instSeCd = userInfo?.instSeCd ?? "";
+    const sidoSelectText =
+        props.sidoSelectText && props.sidoSelectText.trim() !== ""
+            ? props.sidoSelectText
+            : "선택";
 
     const currentYear = new Date().getFullYear();
     const defaultYear = currentYear - 1;
 
     const { data: sidoList } = useSWR<ApiResponse<SearchCondition>>(
-        "sido-list",
+        ["sido-list", instSeCd],
         getSidoListFetcher,
         {
             revalidateOnFocus: false,
@@ -45,7 +111,7 @@ const SearchForm = (props: SearchFormProps = {}) => {
             dedupingInterval: 2000,
             shouldRetryOnError: false,
             onSuccess: (data) => {
-                if (data.status !== 'success') {
+                if (data.status !== "success") {
                     alert(`시도 목록을 불러오는데 실패했습니다.
                         새로고침 후 다시 시도해주세요.`);
                 }
@@ -54,21 +120,34 @@ const SearchForm = (props: SearchFormProps = {}) => {
                 alert(`시도 목록을 불러오는데 실패했습니다.
                     새로고침 후 다시 시도해주세요.`);
             },
-        }
+        },
     );
 
-    const [values, setValues] = useState<SearchFormValues>({
-        sido: props.defaultValues?.sido || '',
-        gugun: props.defaultValues?.gugun || '',
-        year: props.defaultValues?.year || defaultYear.toString(),
-        order: props.defaultValues?.order || '',
-        fctName: props.defaultValues?.fctName || '',
-        bsnmCd: props.defaultValues?.bsnmCd || '',
-    });
+    // 마운트 시 SWR 캐시의 시도 목록으로 초기값 설정 (탭 닫았다 열 때 API 재호출 없이 동작)
+    const [values, setValues] = useState<SearchFormValues>(() =>
+        buildSearchFormValues(props, sidoList, defaultYear),
+    );
 
-    const sggKey: [string, string] | null =
+    // 최초 진입만 시도 API가 늦게 오는 경우
+    useEffect(() => {
+        if (props.defaultValues?.sido) return;
+        const first = sidoList?.data?.sidoList?.[0];
+        if (!first || !mergedProps.sido) return;
+        setValues((prev) =>
+            prev.sido
+                ? prev
+                : {
+                      ...prev,
+                      sido: first.sido,
+                      gugun: "",
+                      bsnmCd: first.bsnmCd,
+                  },
+        );
+    }, [sidoList, props.defaultValues?.sido, mergedProps.sido]);
+
+    const sggKey: [string, string, string, string] | null =
         values.sido && values.sido !== "ALL"
-            ? ["sgg-list", values.sido]
+            ? ["sgg-list", values.sido, instSeCd, values.bsnmCd || ""]
             : null;
     const { data: sggList } = useSWR<ApiResponse<Sgg[]>>(
         sggKey,
@@ -80,7 +159,7 @@ const SearchForm = (props: SearchFormProps = {}) => {
             dedupingInterval: 2000,
             shouldRetryOnError: false,
             onSuccess: (data) => {
-                if (data.status !== 'success') {
+                if (data.status !== "success") {
                     alert(`시군구 목록을 불러오는데 실패했습니다.
                         새로고침 후 다시 시도해주세요.`);
                 }
@@ -89,7 +168,7 @@ const SearchForm = (props: SearchFormProps = {}) => {
                 alert(`시군구 목록을 불러오는데 실패했습니다.
                     새로고침 후 다시 시도해주세요.`);
             },
-        }
+        },
     );
     const sggOptions = sggList?.data ?? [];
 
@@ -99,33 +178,28 @@ const SearchForm = (props: SearchFormProps = {}) => {
     };
 
     const handleReset = () => {
-        const resetValues: SearchFormValues = {
-            sido: '',
-            gugun: '',
-            year: String(defaultYear),
-            order: '',
-            fctName: '',
-            bsnmCd: '',
-        };
-        setValues(resetValues);
+        setValues(buildSearchFormValues(props, sidoList, defaultYear));
         props.onReset?.();
     };
 
     const handleSidoChange = (value: string) => {
-        const selectedBsnm = sidoList?.data.sidoList.find((v) => v.sido === value)?.bsnmCd || '';
+        const selectedBsnm =
+            sidoList?.data.sidoList.find((v) => v.sido === value)?.bsnmCd || "";
         setValues((prev) => ({
             ...prev,
             sido: value,
-            gugun: '',
+            gugun: "",
             bsnmCd: selectedBsnm,
         }));
     };
 
     const handleSggChange = (value: string) => {
         const listForBsnm = sggList?.data ?? [];
-        const selectedBsnm = value === 'ALL'
-            ? (sidoList?.data.sidoList.find((v) => v.sido === values.sido)?.bsnmCd || '')
-            : (listForBsnm.find((v) => v.gugun === value)?.bsnmCd || '');
+        const selectedBsnm =
+            value === "ALL"
+                ? sidoList?.data.sidoList.find((v) => v.sido === values.sido)
+                    ?.bsnmCd || ""
+                : listForBsnm.find((v) => v.gugun === value)?.bsnmCd || "";
 
         setValues((prev) => ({
             ...prev,
@@ -142,71 +216,178 @@ const SearchForm = (props: SearchFormProps = {}) => {
         <div className="card card-border">
             <form onSubmit={handleSubmit}>
                 <div className="flex items-center gap-8 p-2">
-                    {mergedProps.sido &&
+                    {mergedProps.sido && (
                         <div className="flex items-center gap-2">
-                            <Label className="text-label">
-                                시도
-                            </Label>
-                            <Select value={values.sido} onValueChange={handleSidoChange}>
+                            <Label className="text-label">시도</Label>
+                            <Select
+                                value={values.sido}
+                                onValueChange={handleSidoChange}
+                            >
                                 <SelectTrigger className="w-[12rem]">
-                                    <SelectValue placeholder="선택"></SelectValue>
+                                    <SelectValue
+                                        placeholder={sidoSelectText}
+                                    ></SelectValue>
                                 </SelectTrigger>
                                 <SelectContent>
-                                    <SelectItem value="ALL">선택</SelectItem>
+                                    <SelectItem value="ALL">
+                                        {sidoSelectText}
+                                    </SelectItem>
                                     {sidoList?.data?.sidoList?.map((sido) => (
-                                        <SelectItem key={sido.adstDstrCd} value={sido.sido}>
+                                        <SelectItem
+                                            key={sido.adstDstrCd}
+                                            value={sido.sido}
+                                        >
                                             {sido.sido}
                                         </SelectItem>
                                     ))}
                                 </SelectContent>
                             </Select>
                         </div>
-                    }
-                    {mergedProps.gugun &&
+                    )}
+                    {mergedProps.gugun && (
                         <div className="flex items-center gap-2">
-                            <Label className="text-label">
-                                시군구
-                            </Label>
-                            <Select value={values.gugun} onValueChange={handleSggChange}>
+                            <Label className="text-label">시군구</Label>
+                            <Select
+                                value={values.gugun}
+                                onValueChange={handleSggChange}
+                            >
                                 <SelectTrigger className="w-[12rem]">
                                     <SelectValue placeholder="전체"></SelectValue>
                                 </SelectTrigger>
                                 <SelectContent>
                                     <SelectItem value="ALL">전체</SelectItem>
                                     {sggOptions?.map((sgg) => (
-                                        <SelectItem key={sgg.adstDstrCd} value={sgg.gugun}>
+                                        <SelectItem
+                                            key={sgg.adstDstrCd}
+                                            value={sgg.gugun}
+                                        >
                                             {sgg.gugun}
                                         </SelectItem>
                                     ))}
                                 </SelectContent>
                             </Select>
                         </div>
-                    }
-                    {mergedProps.year &&
+                    )}
+                    {mergedProps.year && (
                         <div className="flex items-center gap-2">
-                            <Label className="text-label">
-                                년도
-                            </Label>
-                            <Select value={values.year} onValueChange={(value) => setValues({ ...values, year: value })}>
+                            <Label className="text-label">년도</Label>
+                            <Select
+                                value={values.year}
+                                onValueChange={(value) =>
+                                    setValues({ ...values, year: value })
+                                }
+                            >
                                 <SelectTrigger className="w-[10rem]">
                                     <SelectValue placeholder="선택"></SelectValue>
                                 </SelectTrigger>
                                 <SelectContent>
                                     {sidoList?.data?.yearList.map((year) => (
-                                        <SelectItem key={year} value={String(year)}>
+                                        <SelectItem
+                                            key={year}
+                                            value={String(year)}
+                                        >
                                             {year}년
                                         </SelectItem>
                                     ))}
                                 </SelectContent>
                             </Select>
                         </div>
-                    }
-                    {mergedProps.order &&
+                    )}
+                    {mergedProps.clsf && (
                         <div className="flex items-center gap-2">
-                            <Label className="text-label">
-                                차수
+                            <Label className="text-label">분류</Label>
+                            <Select
+                                value={values.clsfCd ?? "ALL"}
+                                onValueChange={(value) =>
+                                    setValues({
+                                        ...values,
+                                        clsfCd: value as SearchFormClsfCd,
+                                    })
+                                }
+                            >
+                                <SelectTrigger className="w-[10rem]">
+                                    <SelectValue placeholder="선택" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="ALL">전체</SelectItem>
+                                    <SelectItem value="INPT">입력</SelectItem>
+                                    <SelectItem value="VRFC">검증</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    )}
+                    {mergedProps.fctName && (
+                        <div className="flex items-center gap-2">
+                            <Label
+                                htmlFor="fctNmSearchInput"
+                                className="mr-2 text-label"
+                            >
+                                시설명
                             </Label>
-                            <Select value={values.order} onValueChange={(value) => setValues({ ...values, order: value })}>
+                            <Input
+                                className="mr-4 h-[3.2rem] w-[14rem] rounded-sm !text-[1.3rem]"
+                                id="fctNmSearchInput"
+                                value={values.fctName}
+                                onChange={(e) =>
+                                    setValues({
+                                        ...values,
+                                        fctName: e.target.value,
+                                    })
+                                }
+                                autoComplete="off"
+                            />
+                        </div>
+                    )}
+                    {mergedProps.isDetail && (
+                        <div className="flex items-center gap-2">
+                            <Label className="text-label cursor-pointer" htmlFor="isDetail">
+                                세부 데이터 포함
+                            </Label>
+                            <Checkbox
+                                id="isDetail"
+                                checked={values.isDetail}
+                                onCheckedChange={(value) =>
+                                    setValues({
+                                        ...values,
+                                        isDetail: value === true,
+                                    })
+                                }
+                            />
+                        </div>
+                    )}
+                    {mergedProps.isSummary && (
+                        <div className="flex items-center gap-2">
+                            <Label className="text-label cursor-pointer">
+                                요약표 포함
+                            </Label>
+                            <Select
+                                value={values.isSummary}
+                                onValueChange={(value) =>
+                                    setValues({ ...values, isSummary: value })
+                                }
+                            >
+                                <SelectTrigger className="w-[10rem]">
+                                    <SelectValue placeholder="선택 안함"></SelectValue>
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="ALL">선택 안함</SelectItem>
+                                    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
+                                        <SelectItem value={i.toString()} key={i.toString()}>{`${i}개년`}</SelectItem>
+                                    ))
+                                    }
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    )}
+                    {mergedProps.order && (
+                        <div className="flex items-center gap-2">
+                            <Label className="text-label">차수</Label>
+                            <Select
+                                value={values.order}
+                                onValueChange={(value) =>
+                                    setValues({ ...values, order: value })
+                                }
+                            >
                                 <SelectTrigger className="w-[10rem]">
                                     <SelectValue placeholder="전체"></SelectValue>
                                 </SelectTrigger>
@@ -215,9 +396,14 @@ const SearchForm = (props: SearchFormProps = {}) => {
                                 </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}>
+                    )}
+                    <div className="ml-auto flex items-center gap-2">
+                        <Button
+                            color="white"
+                            className="h-[3.2rem] w-[96px]"
+                            type="button"
+                            onClick={handleReset}
+                        >
                             초기화
                         </Button>
                         <Button className="h-[3.2rem] w-[96px]" type="submit">
@@ -225,35 +411,9 @@ const SearchForm = (props: SearchFormProps = {}) => {
                         </Button>
                     </div>
                 </div>
-                {(mergedProps.fctName || mergedProps.userMenual) &&
-                    <div className="flex items-center p-2">
-                        {mergedProps.fctName &&
-                            <div className="flex items-center gap-2">
-                                <Label htmlFor="fctNmSearchInput" className="mr-2 text-label">
-                                    시설명
-                                </Label>
-                                <Input
-                                    className="h-[3.2rem] w-[14rem] rounded-sm !text-[1.3rem] mr-4"
-                                    id="fctNmSearchInput"
-                                    value={values.fctName}
-                                    onChange={(e) => setValues({ ...values, fctName: e.target.value })}
-                                    autoComplete="off"
-                                />
-                            </div>
-                        }
-                        {mergedProps.userMenual &&
-                            <div className="flex items-center gap-2 ml-auto">
-                                <Button className="h-[3.2rem] w-[124px]" type="button">
-                                    <i className="diveicon di-person-fill" />
-                                    사용자 메뉴얼
-                                </Button>
-                            </div>
-                        }
-                    </div>
-                }
             </form>
         </div>
     );
 };
 
-export default SearchForm;
\ No newline at end of file
+export default SearchForm;
diff --git a/apps/st/src/components/module/SidoSggFacilityNameSearchForm.tsx b/apps/st/src/components/module/SidoSggFacilityNameSearchForm.tsx
new file mode 100644
index 000000000..338faa475
--- /dev/null
+++ b/apps/st/src/components/module/SidoSggFacilityNameSearchForm.tsx
@@ -0,0 +1,626 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import useSWR from "swr";
+import { ValueType } from "realgrid";
+
+import {
+    Button,
+    Input,
+    Label,
+    Select,
+    SelectTrigger,
+    SelectContent,
+    SelectItem,
+    SelectValue,
+    LoadingWithAnimation,
+} from "@common/components";
+import CompactDataGrid from "./CompactDataGrid";
+import SaveButton from "../button/SaveButton";
+
+import { useAlertStore } from "@/shared/lib";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type {
+    ApiResponse,
+    SearchCondition,
+    Sgg,
+} from "@/entities/statistics/model/statistics-interface";
+import type { ColumnInfo } from "../type/DataGrid.type";
+import type {
+    SeweragePipeFacilitiesListRequest,
+    SeweragePipeFacilityAdminAreaListRequest,
+    SeweragePipeFactConnectionSaveRequest,
+    SeweragePipeFactConnectionSaveItem,
+} from "@/entities/statistics/model/input/statistics-sewage-pipe-input-interface";
+import { statisticsInputSewPipeApiService } from "@/entities/statistics/api/input/statistics-sewage-pipe-input-service";
+import type { SearchFormValues } from "../type/SearchForm.type";
+import { doNameList } from "../util/column/input/DoList";
+import { getUserInfo } from "../../../../../packages/common/components/src/api";
+
+/** 다이얼로그 좌측: 처리시설 정보 (순번 없음) */
+const treatmentFacilityColumnInfo: ColumnInfo = {
+    columns: [
+        {
+            name: "ctpvNm",
+            fieldName: "ctpvNm",
+            header: { text: "시도" },
+            editable: false,
+        },
+        {
+            name: "sggNm",
+            fieldName: "sggNm",
+            header: { text: "시군구" },
+            editable: false,
+        },
+        {
+            name: "fcltNm",
+            fieldName: "fcltNm",
+            header: { text: "시설명" },
+            editable: false,
+        },
+        {
+            name: "fcltCd",
+            fieldName: "fcltCd",
+            header: { text: "시설코드" },
+            editable: false,
+            visible: false,
+        },
+        {
+            name: "fcltSn",
+            fieldName: "fcltSn",
+            header: { text: "시설일련번호" },
+            editable: false,
+            visible: false,
+        },
+        {
+            name: "fcltCpct",
+            fieldName: "fcltCpct",
+            header: { text: "시설용량(m³/일)" },
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0",
+            editable: false,
+        },
+    ],
+    columnLayout: ["ctpvNm", "sggNm", "fcltNm", "fcltCpct", "fcltCd"],
+};
+
+/** 다이얼로그 우측: 행정구역 정보 (순번 없음, 헤더 체크박스는 showHeaderCheckbox) */
+const adminRegionColumnInfo: ColumnInfo = {
+    columns: [
+        {
+            name: "ctpvNm",
+            fieldName: "ctpvNm",
+            header: { text: "시도" },
+            editable: false,
+        },
+        {
+            name: "sggNm",
+            fieldName: "sggNm",
+            header: { text: "시군구" },
+            editable: false,
+        },
+        {
+            name: "emdNm",
+            fieldName: "emdNm",
+            header: { text: "읍면동" },
+            editable: false,
+        },
+    ],
+    columnLayout: ["ctpvNm", "sggNm", "emdNm"],
+};
+
+const getSidoListFetcher = async (): Promise<ApiResponse<SearchCondition>> => {
+    return statisticsApi.getSidoList();
+};
+
+const getSggAllListFetcher = async (
+    key: [string, string],
+): Promise<ApiResponse<Sgg[]>> => {
+    return statisticsApi.getSggList(key[1]);
+};
+
+type SidoSggFacilityNameSearchFormProps = {
+    /** 상위(SewagePipeInp 등) 검색 조건의 통계연도 — facilitiesList 등 API 필수값 */
+    statsYr?: string;
+    /** 상위(SewagePipeInp) 마지막 검색 조건 */
+    initialSearchValues?: Pick<SearchFormValues, "sido" | "gugun" | "bsnmCd"> | null;
+    /** 저장 성공 후 부모 탭 데이터 재조회 훅 */
+    onSaveSuccess?: () => Promise<void> | void;
+};
+
+const SidoSggFacilityNameSearchForm = ({
+    statsYr,
+    initialSearchValues,
+    onSaveSuccess,
+}: SidoSggFacilityNameSearchFormProps) => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const initialSidoValue =
+        initialSearchValues?.sido && initialSearchValues.sido !== "ALL"
+            ? initialSearchValues.sido
+            : "ALL";
+    const initialGugunValue =
+        initialSearchValues?.gugun && initialSearchValues.gugun !== "ALL"
+            ? initialSearchValues.gugun
+            : "ALL";
+
+    const { data: sidoList } = useSWR<ApiResponse<SearchCondition>>(
+        "sido-list",
+        getSidoListFetcher,
+        {
+            revalidateOnFocus: false,
+            revalidateOnReconnect: false,
+            revalidateIfStale: false,
+            dedupingInterval: 2000,
+            shouldRetryOnError: false,
+            onSuccess: (data) => {
+                if (data.status !== "success") {
+                    alert(
+                        `시도 목록을 불러오는데 실패했습니다.\n새로고침 후 다시 시도해주세요.`,
+                    );
+                }
+            },
+            onError: () => {
+                alert(
+                    `시도 목록을 불러오는데 실패했습니다.\n새로고침 후 다시 시도해주세요.`,
+                );
+            },
+        },
+    );
+
+    const [sido, setSido] = useState<string>(initialSidoValue);
+    const [gugun, setGugun] = useState<string>(initialGugunValue);
+    const [fcltNm, setFcltNm] = useState<string>("");
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    const [treatmentFacilityRows, setTreatmentFacilityRows] = useState<
+        Record<string, string | number>[]
+    >([]);
+    const [adminRegionRows, setAdminRegionRows] = useState<
+        Record<string, string | number>[]
+    >([]);
+    const [selectedFacilityRow, setSelectedFacilityRow] = useState<
+        Record<string, string | number> | null
+    >(null);
+    const didAutoFetchRef = useRef(false);
+
+    const sggKey: [string, string] | null =
+        sido && sido !== "ALL" ? ["sgg-all", sido] : null;
+    const { data: sggList } = useSWR<ApiResponse<Sgg[]>>(
+        sggKey,
+        getSggAllListFetcher,
+        {
+            revalidateOnFocus: false,
+            revalidateOnReconnect: false,
+            revalidateIfStale: false,
+            dedupingInterval: 2000,
+            shouldRetryOnError: false,
+            onSuccess: (data) => {
+                if (data.status !== "success") {
+                    alert(
+                        `시군구 목록을 불러오는데 실패했습니다.\n새로고침 후 다시 시도해주세요.`,
+                    );
+                }
+            },
+            onError: () => {
+                alert(
+                    `시군구 목록을 불러오는데 실패했습니다.\n새로고침 후 다시 시도해주세요.`,
+                );
+            },
+        },
+    );
+    const sggOptions = sggList?.data ?? [];
+
+    /** 시설 목록·행정구역 API 공통 — 하수도 사업자코드(bsnmCd) */
+    const resolveSewerBzmnCd = (): string => {
+        const sidoItem = sidoList?.data?.sidoList?.find((v) => v.sido === sido);
+        const raw =
+            gugun !== "ALL" && gugun
+                ? sggOptions.find((s) => s.gugun === gugun)?.bsnmCd
+                : sidoItem?.bsnmCd;
+        return raw?.trim() ?? "";
+    };
+
+    const handleSidoChange = (value: string) => {
+        setSido(value);
+        setGugun("ALL");
+    };
+
+    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (!statsYr?.trim()) {
+            alert("상단에서 통계연도로 조회한 뒤 이용해 주세요.");
+            return;
+        }
+        if (!sido || sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+        const trimmedFclty = fcltNm.trim();
+
+        const sewerBzmnCd = resolveSewerBzmnCd();
+
+        const params: SeweragePipeFacilitiesListRequest = {
+            statsYr: statsYr.trim(),
+            ...(sewerBzmnCd ? { sewerBzmnCd } : {}),
+            ctpvNm: sido,
+            ...(gugun !== "ALL" && gugun ? { sggNm: gugun } : {}),
+            ...(trimmedFclty ? { fcltyNm: trimmedFclty } : {}),
+        };
+
+        try {
+            setIsLoading(true);
+            const response =
+                await statisticsInputSewPipeApiService.getFacilitiesList(
+                    params,
+                );
+            if (response.status !== "success") {
+                alert(response.message ?? "처리시설 목록 조회에 실패했습니다.");
+                return;
+            }
+            const list = response.data ?? [];
+            setTreatmentFacilityRows(
+                list.map((item) => ({
+                    ctpvNm: item.ctpvNm,
+                    sggNm: item.sggNm,
+                    fcltNm: item.fcltNm,
+                    fcltCpct: item.fcltCpct,
+                    fcltCd: item.fcltCd,
+                    fcltSn: item.fcltSn,
+                    admdstCd: item.admdstCd,
+                    statsYr: item.statsYr,
+                })),
+            );
+            setSelectedFacilityRow(null);
+            setAdminRegionRows([]);
+        } catch {
+            alert("처리시설 목록 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleTreatmentFacilityRowClick = async (
+        row: Record<string, string | number>,
+    ) => {
+        if (!statsYr?.trim()) {
+            alert("상단에서 통계연도로 조회한 뒤 이용해 주세요.");
+            return;
+        }
+        const swtrmtFcltCd = String(row.fcltCd ?? "").trim();
+        if (!swtrmtFcltCd) {
+            alert("처리시설 코드가 없습니다.");
+            return;
+        }
+
+        const params: SeweragePipeFacilityAdminAreaListRequest = {
+            statsYr: statsYr.trim(),
+            swtrmtFcltCd,
+            sewerBzmnCd: initialSearchValues?.bsnmCd || '',
+            ctpvNm: initialSidoValue || '',
+            ...(doNameList.includes(initialSidoValue) ? { sggNm: initialGugunValue } : {}),
+        };
+
+        try {
+            setIsLoading(true);
+            setSelectedFacilityRow(row);
+            const response =
+                await statisticsInputSewPipeApiService.getFacilityAdminAreaList(
+                    params,
+                );
+            if (response.status !== "success") {
+                alert(response.message ?? "행정구역 목록 조회에 실패했습니다.");
+                return;
+            }
+            const list = response.data ?? [];
+            setAdminRegionRows(
+                list.map((item) => ({
+                    ctpvNm: item.ctpvNm,
+                    sggNm: item.sggNm,
+                    emdNm: item.admdstNm,
+                    admdstCd: item.admdstCd,
+                    isConnection: item.isConnection,
+                    __checked: item.isConnection === "1" ? "1" : "0",
+                })),
+            );
+        } catch {
+            alert("행정구역 목록 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleSaveAdminRegions = async () => {
+        const statusCodeResponse = await statisticsApi.CheckStatusCode({
+            sewerBzmnCd: initialSearchValues?.bsnmCd?.trim() ?? "",
+            statsCd: 'ST00020002',
+            statsYr: statsYr?.trim() ?? ''
+        });
+
+        if (statusCodeResponse.status === 'success') {
+            if (!['0', '1', '4'].includes(statusCodeResponse.data)) {
+                const codeName = statusCodeResponse.data === '2' ? '제출' : (statusCodeResponse.data === '3' ? '승인' : '검증중');
+                alert(`시설별 설치 현황 데이터가 ${codeName} 상태일 때는 처리 시설 정보를 변경할 수 없습니다.`);
+                return;
+            } 
+        } else {
+            alert('오류가 발생했습니다.\n관리자에게 문의하세요')
+        }
+
+        if (!statsYr?.trim()) {
+            alert("상단에서 통계연도로 조회한 뒤 이용해 주세요.");
+            return;
+        }
+        if (!selectedFacilityRow) {
+            alert("처리시설을 먼저 선택해주세요.");
+            return;
+        }
+
+        const hasChanged = adminRegionRows.some(
+            (row) =>
+                (row.__checked === "1" && row.isConnection !== "1") ||
+                (row.__checked !== "1" && row.isConnection === "1"),
+        );
+
+        const saveList: SeweragePipeFactConnectionSaveItem[] = adminRegionRows
+            .filter((row) => row.__checked === "1")
+            .map((row) => ({
+                admdstCd: String(row.admdstCd ?? ""),
+                admdstNm: String(row.emdNm ?? ""),
+            }))
+            .filter((row) => row.admdstCd && row.admdstNm);
+
+        const deleteList = adminRegionRows
+            .filter((row) => row.__checked !== "1" && row.isConnection === "1")
+            .map((row) => String(row.admdstCd ?? ""))
+            .filter(Boolean);
+
+        if (!hasChanged) {
+            alert("변경된 연결 정보가 없습니다.");
+            return;
+        }
+
+        const run = async () => {
+            try {
+                setIsLoading(true);
+                const userInfo = await getUserInfo();
+                const request: SeweragePipeFactConnectionSaveRequest = {
+                    ctpvNm: String(selectedFacilityRow.ctpvNm ?? ""),
+                    sggNm: String(selectedFacilityRow.sggNm ?? ""),
+                    fcltSn: String(selectedFacilityRow.fcltSn ?? ""),
+                    statsYr: statsYr.trim(),
+                    swtrmtFcltCd: String(selectedFacilityRow.fcltCd ?? ""),
+                    swtrmtFcltNm: String(selectedFacilityRow.fcltNm ?? ""),
+                    prcsFcltCpct: Number(selectedFacilityRow.fcltCpct ?? 0),
+                    sewerBzmnCd: initialSearchValues?.bsnmCd?.trim() ?? "",
+                    userId: userInfo.userUnqId,
+                    saveList,
+                    deleteList,
+                };
+
+                const response =
+                    await statisticsInputSewPipeApiService.saveFactConnection(
+                        request,
+                    );
+
+                if (response.status !== "success") {
+                    alert(response.message ?? "연결관계 저장에 실패했습니다.");
+                    return;
+                }
+
+                setAdminRegionRows((prev) =>
+                    prev.map((row) => ({
+                        ...row,
+                        isConnection: row.__checked === "1" ? "1" : "0",
+                    })),
+                );
+                await onSaveSuccess?.();
+                alert("저장되었습니다.");
+            } catch {
+                alert("연결관계 저장 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        void run();
+    };
+
+    const handleAdminRegionItemChecked = (
+        itemIndex: number,
+        checked: boolean,
+    ) => {
+        setAdminRegionRows((prev) =>
+            prev.map((row, idx) =>
+                idx === itemIndex
+                    ? { ...row, __checked: checked ? "1" : "0" }
+                    : row,
+            ),
+        );
+    };
+
+    const handleAdminRegionItemAllChecked = (checked: boolean) => {
+        setAdminRegionRows((prev) =>
+            prev.map((row) => ({ ...row, __checked: checked ? "1" : "0" })),
+        );
+    };
+
+    useEffect(() => {
+        if (!initialSearchValues?.sido || initialSearchValues.sido === "ALL") return;
+        setSido(initialSearchValues.sido);
+        setGugun(
+            initialSearchValues.gugun && initialSearchValues.gugun !== "ALL"
+                ? initialSearchValues.gugun
+                : "ALL",
+        );
+    }, [initialSearchValues?.sido, initialSearchValues?.gugun]);
+
+    useEffect(() => {
+        if (didAutoFetchRef.current) return;
+        if (!statsYr?.trim()) return;
+        if (!initialSearchValues?.sido || initialSearchValues.sido === "ALL") return;
+
+        const nextSido = initialSearchValues.sido;
+        const nextGugun =
+            initialSearchValues.gugun && initialSearchValues.gugun !== "ALL"
+                ? initialSearchValues.gugun
+                : "ALL";
+
+        didAutoFetchRef.current = true;
+        setSido(nextSido);
+        setGugun(nextGugun);
+
+        const params: SeweragePipeFacilitiesListRequest = {
+            statsYr: statsYr.trim(),
+            ...(initialSearchValues.bsnmCd?.trim()
+                ? { sewerBzmnCd: initialSearchValues.bsnmCd.trim() }
+                : {}),
+            ctpvNm: nextSido,
+            ...(nextGugun !== "ALL" ? { sggNm: nextGugun } : {}),
+        };
+
+        const run = async () => {
+            try {
+                setIsLoading(true);
+                const response =
+                    await statisticsInputSewPipeApiService.getFacilitiesList(params);
+                if (response.status !== "success") {
+                    alert(response.message ?? "처리시설 목록 조회에 실패했습니다.");
+                    return;
+                }
+                const list = response.data ?? [];
+                setTreatmentFacilityRows(
+                    list.map((item) => ({
+                        ctpvNm: item.ctpvNm,
+                        sggNm: item.sggNm,
+                        fcltNm: item.fcltNm,
+                        fcltCpct: item.fcltCpct,
+                        fcltCd: item.fcltCd,
+                        fcltSn: item.fcltSn,
+                        admdstCd: item.admdstCd,
+                        statsYr: item.statsYr,
+                    })),
+                );
+                setSelectedFacilityRow(null);
+                setAdminRegionRows([]);
+            } catch {
+                alert("처리시설 목록 조회 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        void run();
+    }, [statsYr, initialSearchValues, alert]);
+
+    return (
+        <div className="flex flex-col gap-4 pt-2">
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+                <div className="flex flex-wrap items-end gap-4">
+                    <div className="flex items-center gap-2">
+                        <Label className="shrink-0 text-label">시도</Label>
+                        <Select value={sido} onValueChange={handleSidoChange}>
+                            <SelectTrigger className="w-[12rem]">
+                                <SelectValue placeholder="전체" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="ALL">전체</SelectItem>
+                                {sidoList?.data?.sidoList?.map((item) => (
+                                    <SelectItem
+                                        key={item.adstDstrCd}
+                                        value={item.sido}
+                                    >
+                                        {item.sido}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <Label className="shrink-0 text-label">시군구</Label>
+                        <Select
+                            value={gugun}
+                            onValueChange={setGugun}
+                            disabled={!sido || sido === "ALL"}
+                        >
+                            <SelectTrigger className="w-[12rem]">
+                                <SelectValue placeholder="전체" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="ALL">전체</SelectItem>
+                                {sggOptions?.map((sgg) => (
+                                    <SelectItem
+                                        key={sgg.adstDstrCd}
+                                        value={sgg.gugun}
+                                    >
+                                        {sgg.gugun}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <div className="flex min-w-[20rem] flex-1 items-center gap-2">
+                        <Label className="shrink-0 text-label">시설명</Label>
+                        <Input
+                            className="min-w-[12rem] flex-1"
+                            value={fcltNm}
+                            onChange={(e) => setFcltNm(e.target.value)}
+                            placeholder="시설명 입력"
+                        />
+                    </div>
+                    <Button
+                        type="submit"
+                        className="h-[3.2rem] w-[96px]"
+                        color="primary"
+                    >
+                        조회
+                    </Button>
+                </div>
+                <div className="ml-auto">
+                    <SaveButton saveFunc={handleSaveAdminRegions} />
+                </div>
+            </form>
+            {isLoading && (
+                <div className="[data-theme='black']:bg-transparent absolute inset-0 z-50 flex items-center justify-center rounded-lg p-10">
+                    <div className="relative size-[5rem]">
+                        <LoadingWithAnimation color="primary" />
+                    </div>
+                </div>
+            )}
+            <div className="flex w-full min-w-0 items-stretch gap-[1.2rem]">
+                <div className="flex min-w-0 flex-1 flex-col gap-2">
+                    <h3 className="text-[1.4rem] font-medium text-foreground">
+                        처리시설 정보
+                    </h3>
+                    <CompactDataGrid
+                        columnInfo={treatmentFacilityColumnInfo}
+                        rowData={treatmentFacilityRows}
+                        setRowData={setTreatmentFacilityRows}
+                        showHeaderCheckbox={false}
+                        compactFullWidth
+                        onRowClick={handleTreatmentFacilityRowClick}
+                        // compactGridHeightClass="h-[min(40vh,28rem)] min-h-[16rem]"
+                    />
+                </div>
+                <div className="flex min-w-0 flex-1 flex-col gap-2">
+                    <div className="flex items-center justify-between gap-2">
+                        <h3 className="text-[1.4rem] font-medium text-foreground">
+                            행정구역 정보
+                        </h3>
+                    </div>
+                    <CompactDataGrid
+                        columnInfo={adminRegionColumnInfo}
+                        rowData={adminRegionRows}
+                        setRowData={setAdminRegionRows}
+                        showHeaderCheckbox
+                        onItemChecked={handleAdminRegionItemChecked}
+                        onItemAllChecked={handleAdminRegionItemAllChecked}
+                        compactFullWidth
+                        // compactGridHeightClass="h-[min(40vh,28rem)] min-h-[16rem]"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SidoSggFacilityNameSearchForm;
diff --git a/apps/st/src/components/module/SplitDataGrid.tsx b/apps/st/src/components/module/SplitDataGrid.tsx
index 7d24c96c0..d7e33ea9b 100644
--- a/apps/st/src/components/module/SplitDataGrid.tsx
+++ b/apps/st/src/components/module/SplitDataGrid.tsx
@@ -1,6 +1,7 @@
-import CompactDataGrid from "./CompactDataGrid";
 import type { SplitDataGridProps } from "../type/DataGrid.type";
 
+import CompactDataGrid from "./CompactDataGrid";
+
 const SplitDataGrid = ({
     leftColumnInfo,
     rightColumnInfo,
@@ -11,22 +12,33 @@ const SplitDataGrid = ({
     rightRowData,
     setLeftRowData,
     setRightRowData,
+    leftOnRowClick,
+    leftCellStyleCallback,
+    rightOnItemChecked,
+    rightOnItemAllChecked,
+    enableSort = false,
 }: SplitDataGridProps) => {
     return (
-        <div className="flex gap-[0.6rem] mx-[0.6rem]">
+        <div className="flex gap-[1.2rem]">
             <CompactDataGrid
                 columnInfo={leftColumnInfo}
                 fixedColumns={leftFixedColumns}
-                showHeaderCheckbox={showHeaderCheckbox}
+                showHeaderCheckbox={false}
+                enableSort={enableSort}
                 rowData={leftRowData}
                 setRowData={setLeftRowData}
+                onRowClick={leftOnRowClick}
+                cellStyleCallback={leftCellStyleCallback}
             />
             <CompactDataGrid
                 columnInfo={rightColumnInfo}
                 fixedColumns={rightFixedColumns}
                 showHeaderCheckbox={showHeaderCheckbox}
+                enableSort={enableSort}
                 rowData={rightRowData}
                 setRowData={setRightRowData}
+                onItemChecked={rightOnItemChecked}
+                onItemAllChecked={rightOnItemAllChecked}
             />
         </div>
     );
diff --git a/apps/st/src/components/module/TabDataGrid.tsx b/apps/st/src/components/module/TabDataGrid.tsx
index cbbe53a0c..cfed25cd9 100644
--- a/apps/st/src/components/module/TabDataGrid.tsx
+++ b/apps/st/src/components/module/TabDataGrid.tsx
@@ -1,19 +1,29 @@
-import { useRef, useEffect, useState } from "react"
-import { ValueType } from "realgrid"
+import { useCallback,useEffect, useLayoutEffect, useRef, useState } from "react"
 
+import JSZip from "jszip"
+import { ValueType } from "realgrid"
 import RealGrid, { GridFitStyle } from "realgrid"
 import { RealGridReact, RGDataColumn } from "realgrid-react"
-import type { TabDataGridProps, ColumnInfo, RealGridColumnInfo, GridViewWithSetColumns, FooterItemWithCallback, ColumnLayoutItem } from "../type/DataGrid.type"
-import { getComputedValueCallback } from "@/components/util/grid/computedFieldCallbacks"
-import JSZip from "jszip"
 import * as XLSX from "xlsx"
-import { useAlertStore } from "@/shared/lib";
-import { useTabStore } from "@/store/tab-store"
 
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@common/components";
+import { useAlertStore } from "@/shared/lib";
+import { Tabs, TabsContent,TabsList, TabsTrigger } from "@common/components";
 import { Button } from "@common/components";
+
+import type { CellStyleCallback,ColumnConfig, ColumnInfo, ColumnLayoutItem, FooterItemWithCallback, GridViewWithSetColumns, RealGridColumnInfo, TabDataGridProps } from "../type/DataGrid.type"
+
+import GridTopActionButton from "./GridTopActionButton";
 import SplitDataGrid from "./SplitDataGrid";
 
+import { getComputedValueCallback } from "@/components/util/grid/computedFieldCallbacks"
+import {
+    getExcelImportColumnFieldNames,
+    prepareGridColumnsForExcelExport,
+    restoreGridColumnsAfterExcelExport,
+    shouldPrepareColumnsForExcelExport,
+} from "@/components/util/gridExcelExport"
+import { useTabStore } from "@/store/tab-store"
+
 // RealGrid 타입 확장
 declare module "realgrid" {
     interface GridView {
@@ -49,6 +59,30 @@ if (typeof window !== "undefined") {
 
 RealGrid.setLicenseKey(process.env.NEXT_PUBLIC_ST_REALGRID_KEY || '');
 
+/** RealGrid 내부 해제(_view 등) 타이밍에서 refresh가 터질 수 있어 try/catch */
+function safeGridViewRefresh(gv: { refresh?: () => void } | null | undefined) {
+    if (!gv?.refresh) return;
+    try {
+        gv.refresh();
+    } catch {
+        /* noop */
+    }
+}
+
+/** columnByName은 그리드 _view 준비 전에 호출되면 "Cannot read ... '_view'"로 터짐 */
+function safeColumnByName(
+    gv: { columnByName?: (name: string) => unknown } | null | undefined,
+    name: string,
+): { styleCallback?: (g: unknown, dataCell: Record<string, unknown>) => string } | null {
+    if (!gv?.columnByName) return null;
+    try {
+        const col = gv.columnByName(name) as { styleCallback?: (g: unknown, dataCell: Record<string, unknown>) => string } | null;
+        return col ?? null;
+    } catch {
+        return null;
+    }
+}
+
 /** 정렬 필드 값을 숫자로 파싱 (쉼표 제거) */
 function toNum(v: unknown): number {
     if (v == null) return NaN;
@@ -56,98 +90,6 @@ function toNum(v: unknown): number {
     return parseFloat(String(v).replace(/,/g, "")) || NaN;
 }
 
-/** 헤더에 정렬 화살표 표시 (CSS 방식) */
-// function updateHeaderSortIndicator(
-//     gridView: {
-//         columnByIndex?: (i: number) => { fieldName?: string; name?: string } | undefined;
-//         columnByName?: (name: string) => { fieldName?: string; name?: string } | undefined;
-//         getColumn?: (i: number) => { fieldName?: string; name?: string } | undefined;
-//         getElement?: () => HTMLElement | null;
-//         container?: HTMLElement;
-//     },
-//     columns: { fieldName?: string; name: string }[],
-//     sortDir: Record<string, "asc" | "desc" | "none">,
-//     gridElement?: HTMLElement | null
-// ) {
-//     try {
-//         // 그리드 DOM 요소 찾기
-//         let gridEl: HTMLElement | null = null;
-//         if (gridElement) {
-//             gridEl = gridElement;
-//         } else if (gridView.getElement) {
-//             gridEl = gridView.getElement();
-//         } else if (gridView.container) {
-//             gridEl = gridView.container;
-//         } else {
-//             // 폴백: 모든 그리드 중에서 찾기
-//             const allGrids = document.querySelectorAll('.rg-grid, [data-grid-id]');
-//             if (allGrids.length > 0) {
-//                 // 활성 탭의 그리드를 찾기 위해 TabsContent 내부의 그리드 찾기
-//                 const activeTabContent = document.querySelector('[data-state="active"]')?.closest('[role="tabpanel"]');
-//                 if (activeTabContent) {
-//                     gridEl = activeTabContent.querySelector('.rg-grid, [data-grid-id]') as HTMLElement;
-//                 }
-//                 if (!gridEl && allGrids.length === 1) {
-//                     gridEl = allGrids[0] as HTMLElement;
-//                 }
-//             }
-//         }
-
-//         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();
-//                 const colName = col.name;
-//                 const colFieldName = col.fieldName;
-//                 // 헤더 텍스트와 컬럼 이름이 일치하는지 확인
-//                 if (text && (
-//                     text === colName || 
-//                     text === colFieldName ||
-//                     text.includes(colName) || 
-//                     (colFieldName && text.includes(colFieldName))
-//                 )) {
-//                     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";
-//             indicator.textContent = direction === "asc" ? "▲" : "▼";
-//             indicator.style.marginLeft = "4px";
-//             indicator.style.fontSize = "10px";
-//             indicator.style.color = "#666";
-//             indicator.style.display = "inline-block";
-//             indicator.style.verticalAlign = "middle";
-//             headerCell.appendChild(indicator);
-//         });
-//     } catch (e) {
-//         console.warn("updateHeaderSortIndicator error:", e);
-//     }
-// }
-
 /** onSorting: mergeCells: true인 컬럼이 있으면 그룹 내 순서 유지 정렬, 없으면 RealGrid 기본 정렬 */
 function createOnSortingHandler(
     columns: { fieldName?: string; name: string; mergeCells?: boolean; sortdisable?: boolean; valueType?: ValueType }[],
@@ -279,7 +221,12 @@ function buildFieldsFromColumns(columns: { fieldName: string; valueType?: ValueT
         if (col.computed) {
             const hasFields = "fields" in col.computed && col.computed.fields.length > 0;
             const hasNumeratorDenominator = "numeratorFields" in col.computed && col.computed.numeratorFields.length > 0 && col.computed.denominatorFields.length > 0;
-            if (hasFields || hasNumeratorDenominator) {
+            const hasMaxOfFieldAndSum = "baseField" in col.computed && "sumFields" in col.computed && col.computed.sumFields.length > 0;
+            const hasDifferenceOfSums = "minuendFields" in col.computed && "subtrahendFields" in col.computed && col.computed.minuendFields.length > 0;
+            const hasHalfSumOfSums = col.computed.type === "halfSumOfSums" && "firstSumFields" in col.computed && "secondSumFields" in col.computed && col.computed.firstSumFields.length > 0 && col.computed.secondSumFields.length > 0;
+            const hasSumOfTwoHalfSumOfSums = col.computed.type === "sumOfTwoHalfSumOfSums" && "firstHalfSum" in col.computed && "secondHalfSum" in col.computed && col.computed.firstHalfSum.firstSumFields.length > 0 && col.computed.firstHalfSum.secondSumFields.length > 0 && col.computed.secondHalfSum.firstSumFields.length > 0 && col.computed.secondHalfSum.secondSumFields.length > 0;
+            const hasSumOfMaxGroups = "groups" in col.computed && Array.isArray(col.computed.groups) && col.computed.groups.length > 0;
+            if (hasFields || hasNumeratorDenominator || hasMaxOfFieldAndSum || hasDifferenceOfSums || hasHalfSumOfSums || hasSumOfTwoHalfSumOfSums || hasSumOfMaxGroups) {
                 field.valueCallback = getComputedValueCallback(col.computed) as (prod: unknown, dataRow: number, fieldName: string, fieldNames: string[], values: unknown[]) => number;
             }
         }
@@ -306,7 +253,21 @@ function createNumberComparer(dp: RealGridDataProviderComparer): (field: string
     };
 }
 
-const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, rows = [], showHeaderCheckbox = false, rowDataMap, setRowDataMap, activeTab: activeTabProp, onActiveTabChange, getGridDataRef }: TabDataGridProps) => {
+const TabDataGrid = ({
+    columnInfo,
+    isExcelImport = true,
+    isExcelExport = true,
+    rows = [],
+    showHeaderCheckbox = false,
+    rowDataMap,
+    setRowDataMap,
+    activeTab: activeTabProp,
+    onActiveTabChange,
+    getGridDataRef,
+    enableSort = false,
+    facilitySearchStatsYr,
+    cellStyleCallback,
+}: TabDataGridProps) => {
     // 각 탭별로 그리드 ref와 데이터를 관리
     const gridRefs = useRef<Map<string, RealGridReact>>(new Map());
     const activeTabRef = useRef<string>("");
@@ -318,6 +279,69 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
     const activeTabId = useTabStore((state) => state.activeTabId);
     const menuList = useTabStore((state) => state.menuList);
 
+    const rowDataMapRef = useRef(rowDataMap);
+    rowDataMapRef.current = rowDataMap;
+    const cellStyleCallbackRef = useRef<CellStyleCallback | undefined>(undefined);
+    cellStyleCallbackRef.current = cellStyleCallback;
+
+    const attachCellStyleCallbacksForTab = useCallback((tabKey: string, columns: ColumnConfig[], attempt = 0) => {
+        if (!cellStyleCallbackRef.current) return;
+        const el = gridRefs.current.get(tabKey);
+        const gv = el?.gridView;
+        if (!gv) return;
+
+        let attachedCount = 0;
+        for (const column of columns) {
+            const gridCol = safeColumnByName(gv, column.name);
+            if (!gridCol) continue;
+            const baseStyleName = column.styleName;
+            gridCol.styleCallback = (_g, dataCell) => {
+                const dc = dataCell as {
+                    itemIndex?: number;
+                    index?: { itemIndex?: number };
+                    dataField?: string;
+                    fieldName?: string;
+                };
+                const itemIndex = dc?.index?.itemIndex ?? dc?.itemIndex ?? -1;
+                const fieldName = dc?.dataField ?? dc?.fieldName ?? column.fieldName;
+                const data = rowDataMapRef.current.get(tabKey) || [];
+                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;
+            };
+            attachedCount += 1;
+        }
+
+        if (attachedCount === 0 && attempt < 20) {
+            setTimeout(() => attachCellStyleCallbacksForTab(tabKey, columns, attempt + 1), 100);
+            return;
+        }
+
+        setTimeout(() => {
+            const latestGv = gridRefs.current.get(tabKey)?.gridView;
+            safeGridViewRefresh(latestGv ?? null);
+        }, 0);
+    }, []);
+
+    /** 스타일 콜백은 ref로 최신 row를 읽음 — 여기서는 재부착 없이 refresh만 (이른 columnByName 호출 방지) */
+    useLayoutEffect(() => {
+        if (!cellStyleCallback) return;
+        const id = requestAnimationFrame(() => {
+            gridRefs.current.forEach((ref) => {
+                safeGridViewRefresh(ref?.gridView ?? null);
+            });
+        });
+        return () => cancelAnimationFrame(id);
+    }, [cellStyleCallback, rowDataMap]);
+
     const [internalActiveTab, setInternalActiveTab] = useState<string>(() => {
         const firstTab = columnInfo[0];
         return firstTab?.tabKey || '';
@@ -352,20 +376,6 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
         const columns = columnInfoItem.columns || [];
         const columnLayout = columnInfoItem.columnLayout || [];
 
-        // 엑셀 import 시 매칭을 위해 헤더에 fieldName 포함 (예: "합계 (swgeProcZoneInnerSm)")
-        const originalHeaders: Map<string, string> = new Map();
-        columns.forEach((col) => {
-            if (col.fieldName && gridView.columnByName) {
-                const gridCol = gridView.columnByName(col.name);
-                if (gridCol && gridCol.header) {
-                    const originalText = gridCol.header.text || '';
-                    originalHeaders.set(col.name, originalText);
-                    const headerWithFieldName = `${originalText} (${col.fieldName})`;
-                    gridCol.header.text = headerWithFieldName;
-                }
-            }
-        });
-
         // exportGrid 호출 전에 columnLayout 정규화 (col 속성 추가)
         const normalizeLayoutForExport = (layout: ColumnLayoutItem[]): ColumnLayoutItem[] => {
             return layout.map(item => {
@@ -416,22 +426,21 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
             gridView.setColumnLayout?.(normalizedLayout);
         }
 
+        const useExcelColumnVisibilityPrep = shouldPrepareColumnsForExcelExport(columns);
+        const excelExportVisibilitySnapshot = useExcelColumnVisibilityPrep
+            ? prepareGridColumnsForExcelExport(gridView, columns)
+            : undefined;
+
         gridView.exportGrid({
             type: 'excel',
             target: 'local',
             fileName: `${menuName}_${tabLabel}.xlsx`,
             footer: 'hidden',
-            allColumns: true, // 숨김(visible: false) 컬럼도 엑셀에 포함
+            allColumns: !useExcelColumnVisibilityPrep,
             done: () => {
-                // 헤더 원복
-                columns.forEach((col) => {
-                    if (col.fieldName && gridView.columnByName) {
-                        const gridCol = gridView.columnByName(col.name);
-                        if (gridCol && gridCol.header && originalHeaders.has(col.name)) {
-                            gridCol.header.text = originalHeaders.get(col.name) || '';
-                        }
-                    }
-                });
+                if (excelExportVisibilitySnapshot) {
+                    restoreGridColumnsAfterExcelExport(gridView, excelExportVisibilitySnapshot);
+                }
                 // columnLayout 원복 (footerUserSpans 유지)
                 if (normalizedLayout && !layoutRestored) {
                     layoutRestored = true;
@@ -517,29 +526,12 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
                     const maxHeaderRowIndex = headerRowIndexes.length > 0 ? Math.max(...headerRowIndexes) : headerStartRow;
                     const dataStartRow = maxHeaderRowIndex + 1;
 
-                    // 엑셀 컬럼 인덱스 → 그리드 fieldName 매핑
-                    const headerToFieldNameMap = new Map<string, string>();
                     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]) {
-                            const extractedFieldName = fieldNameMatch[1];
-                            if (columns.find(c => c.fieldName === extractedFieldName)) {
-                                fieldName = extractedFieldName;
-                            }
-                        }
-
-                        // 매칭 실패 시 원본 헤더 텍스트 사용
-                        if (!fieldName) {
-                            console.warn(`엑셀 컬럼 ${colIndex + 1} (헤더: "${headerText}") 매칭 실패 → 헤더 텍스트를 fieldName으로 사용`);
-                            fieldName = headerText;
-                        }
-
-                        headerToFieldNameMap.set(headerText, fieldName);
-                    });
+                    const columnLayout = columnInfoItem.columnLayout || [];
+                    const excelColumnFieldNames = getExcelImportColumnFieldNames(
+                        columns,
+                        columnLayout,
+                    );
 
                     // 데이터 행 읽기
                     const dataRows: Record<string, string | number>[] = [];
@@ -550,9 +542,8 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
                         for (let colIndex = 0; colIndex < headers.length; colIndex++) {
                             const col = range.s.c + colIndex;
                             const cell = worksheet[XLSX.utils.encode_cell({ r: row, c: col })];
-                            const headerName = headers[colIndex] || `Column${colIndex + 1}`;
-                            // 헤더 텍스트를 fieldName으로 변환
-                            const fieldName = headerToFieldNameMap.get(headerName) || headerName;
+                            const fieldName = excelColumnFieldNames[colIndex];
+                            if (!fieldName) continue;
 
                             let cellValue: string | number = '';
                             if (cell && cell.v !== undefined && cell.v !== null) {
@@ -637,25 +628,34 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
 
     // rowDataMap이 변경될 때 그리드에 데이터 반영 (Excel import 등)
     useEffect(() => {
+        const timeoutIds: ReturnType<typeof setTimeout>[] = [];
+
         columnInfo.forEach((info) => {
             const tabKey = info.tabKey;
             const gridRef = gridRefs.current.get(tabKey);
             const currentData = rowDataMap.get(tabKey);
 
             if (gridRef?.gridView && gridRef?.dataProvider && currentData && currentData.length > 0) {
-                setTimeout(() => {
+                const id = setTimeout(() => {
                     try {
-                        const dp = gridRef.dataProvider as RealGridDataProviderFill | null;
-                        if (dp?.fillJsonData) {
-                            dp.fillJsonData(currentData, { fillMode: "set" });
-                        }
-                        gridRef.gridView.refresh();
+                        const latestRef = gridRefs.current.get(tabKey);
+                        const gv = latestRef?.gridView;
+                        const dp = latestRef?.dataProvider as RealGridDataProviderFill | null;
+                        if (!gv || !dp?.fillJsonData || !currentData.length) return;
+
+                        dp.fillJsonData(currentData, { fillMode: "set" });
+                        gv.refresh();
                     } catch (error) {
                         console.error("그리드 데이터 설정 오류:", error);
                     }
                 }, 100);
+                timeoutIds.push(id);
             }
         });
+
+        return () => {
+            timeoutIds.forEach((tid) => clearTimeout(tid));
+        };
     }, [rowDataMap, columnInfo]);
 
     // getGridDataRef: 현재 활성 탭 그리드 데이터 반환 함수 할당
@@ -811,7 +811,7 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
     return (
         <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
             <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" variant="default">
-                <TabsList className="mb-4">
+                <TabsList>
                     {columnInfo.map((info) => {
                         const tabKey = info.tabKey;
                         const tabLabel = info.tabLabel || tabKey;
@@ -830,6 +830,11 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
                     if (info.isSplitGrid && info.left && info.right) {
                         const leftRowData = rowDataMap.get(info.left.tabKey || `${tabKey}_left`) || [];
                         const rightRowData = rowDataMap.get(info.right.tabKey || `${tabKey}_right`) || [];
+                        const splitTopButton = info.right.topButton;
+                        const showSplitTopButton =
+                            Boolean(splitTopButton?.text) &&
+                            (splitTopButton?.visible ?? true) &&
+                            isExcelImport;
 
                         // ColumnInfoList를 ColumnInfo로 변환
                         const leftColumnInfo: ColumnInfo = {
@@ -843,12 +848,22 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
 
                         return (
                             <TabsContent key={tabKey} value={tabKey}>
+                                <div className="flex justify-end items-center gap-[0.6rem] mb-[0.6rem]">
+                                    {showSplitTopButton && (
+                                        <GridTopActionButton
+                                            text={splitTopButton?.text ?? ""}
+                                            onClick={splitTopButton?.onClick}
+                                            statsYr={facilitySearchStatsYr ?? undefined}
+                                        />
+                                    )}
+                                </div>
                                 <SplitDataGrid
                                     leftColumnInfo={leftColumnInfo}
                                     rightColumnInfo={rightColumnInfo}
                                     leftFixedColumns={info.left.fixedColumns}
                                     rightFixedColumns={info.right.fixedColumns}
                                     showHeaderCheckbox={showHeaderCheckbox}
+                                    enableSort={enableSort}
                                     leftRowData={leftRowData}
                                     rightRowData={rightRowData}
                                     setLeftRowData={(updater) => {
@@ -1158,7 +1173,13 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
                                                             };
 
                                                             const onSortingHandler = createOnSortingHandler(columns, setRowData, sortDirRef, originalRowsRef, findGridElement);
-                                                            (gridView as { onSorting?: (g: unknown, f: unknown[], d: unknown[]) => boolean }).onSorting = onSortingHandler;
+                                                            (gridView as { onSorting?: (g: unknown, f: unknown[], d: unknown[]) => boolean }).onSorting = enableSort ? onSortingHandler : () => false;
+
+                                                            if (cellStyleCallbackRef.current) {
+                                                                setTimeout(() => {
+                                                                    attachCellStyleCallbacksForTab(tabKey, columns);
+                                                                }, 100);
+                                                            }
                                                         }, 150);
                                                     }
                                                 } else {
@@ -1190,7 +1211,7 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
                                                         numberFormat: (column.footer as { numberFormat?: string }).numberFormat,
                                                     } : undefined}
                                                     mergeRule={column.mergeCells ? { criteria: column.mergeGroupField ? `values['${column.mergeGroupField}'] + value` : 'value' } : undefined}
-                                                    sortable={!column.sortdisable}
+                                                    sortable={enableSort && !column.sortdisable}
                                                 />
                                             ))}
                                         </RealGridReact>
diff --git a/apps/st/src/components/module/VerificationResultDialog.tsx b/apps/st/src/components/module/VerificationResultDialog.tsx
new file mode 100644
index 000000000..0f2de8007
--- /dev/null
+++ b/apps/st/src/components/module/VerificationResultDialog.tsx
@@ -0,0 +1,451 @@
+"use client";
+
+import {
+    type Dispatch,
+    type MutableRefObject,
+    type SetStateAction,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
+import type { RealGridReact } from "realgrid-react";
+import {
+    Button,
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    LoadingWithAnimation,
+} from "@common/components";
+import DataGrid from "@/components/module/DataGrid";
+import { VerificationResultHistoryPagination } from "@/components/module/VerificationResultHistoryPagination";
+import type {
+    CellEditedCallbackParams,
+    CellStyleCallbackParams,
+    ColumnInfo,
+} from "@/components/type/DataGrid.type";
+import { getUserInfo } from "../../../../../packages/common/components/src/api";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type { VerificationResultListRequest, VerificationResultReportItem } from "@/entities/statistics/model/statistics-interface";
+import { useAlertStore } from "@/shared/lib";
+
+type VerificationResultGridRow = Record<string, string | number>;
+
+type VerificationMethodCd = "NV" | "IMR" | "HB";
+
+const VERIFICATION_METHOD_CODES: VerificationMethodCd[] = ["NV", "IMR", "HB"];
+
+const VRFC_MTHD_NAME_MAP: Record<VerificationMethodCd, string> = {
+    NV: "일반",
+    IMR: "I-MR",
+    HB: "HB",
+};
+
+export type VerificationExceptionSubmitItem = {
+    vrfcSn: number;
+    prcsOpnnExpln: string;
+};
+
+type GridViewWithCheckItem = {
+    checkItem?: (itemIndex: number, checked: boolean, exclusive?: boolean) => void;
+};
+
+function setRowCheckByItemIndex(
+    gridRef: MutableRefObject<RealGridReact | null>,
+    itemIndex: number,
+    checked: boolean,
+) {
+    const gv = gridRef.current?.gridView as GridViewWithCheckItem | undefined;
+    try {
+        gv?.checkItem?.(itemIndex, checked, false);
+    } catch {
+        /* RealGrid 체크 API 미지원 등 */
+    }
+}
+
+const PRCS_YN_LABEL: Record<string, string> = {
+    "0": "미통과",
+    "1": "통과",
+    "2": "예외처리",
+    "3": "반려",
+};
+
+function verificationMthdCellStyle({
+    fieldName,
+    row,
+}: CellStyleCallbackParams): string | undefined {
+    if (fieldName !== "vrfcMthdNm") return undefined;
+    const code = String(row.vrfcMthdCd ?? "");
+    if (code === "IMR") return "rg-cell-vrf-mthd-imr";
+    if (code === "HB") return "rg-cell-vrf-mthd-hb";
+    if (code === "NV") return "rg-cell-vrf-mthd-nv";
+    return undefined;
+}
+
+/** History와 동일 + 구분(검증유형) + 편집 가능한 처리의견(예외사유) */
+const verificationSubmitResultColumnInfo: ColumnInfo = {
+    columns: [
+        { name: "vrfcMthdNm", fieldName: "vrfcMthdNm", header: { text: "구분" }, editable: false },
+        { name: "vrfcMthdCd", fieldName: "vrfcMthdCd", header: { text: "검증유형코드" }, editable: false, visible: false },
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역" }, editable: false },
+        { name: "vrfcTrgtNm", fieldName: "vrfcTrgtNm", header: { text: "검증대상" }, editable: false },
+        { name: "rsnExpln", fieldName: "rsnExpln", header: { text: "사유" }, editable: false },
+        { name: "nowVlCn", fieldName: "nowVlCn", header: { text: "입력값" }, editable: false },
+        { name: "compVlCn", fieldName: "compVlCn", header: { text: "기준값" }, editable: false },
+        { name: "prcsYn", fieldName: "prcsYn", header: { text: "처리여부" }, editable: false },
+        { name: "regDt", fieldName: "regDt", header: { text: "등록일시" }, editable: false },
+        { name: "mdfcnDt", fieldName: "mdfcnDt", header: { text: "갱신일시" }, editable: false },
+        {
+            name: "prcsOpnnExpln",
+            fieldName: "prcsOpnnExpln",
+            header: { text: "예외사유" },
+            editable: true,
+        },
+    ],
+    columnLayout: [
+        "vrfcMthdNm",
+        "ctpvNm",
+        "admdstNm",
+        "vrfcTrgtNm",
+        "rsnExpln",
+        "nowVlCn",
+        "compVlCn",
+        "prcsYn",
+        "regDt",
+        "mdfcnDt",
+        "prcsOpnnExpln",
+    ],
+};
+
+export interface VerificationResultDialogQueryContext {
+    sewerBzmnCd: string;
+    ctpvNm: string;
+    sggNm: string;
+    statsYr: string;
+    statsCd: string;
+}
+
+export interface VerificationResultDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    queryContext?: VerificationResultDialogQueryContext | null;
+    title?: string;
+    emptyMessage?: string;
+    /** 예외 제출 API 성공 후 부모(입력 화면)에서 메인 데이터를 다시 조회할 때 사용 */
+    onExceptionSubmitted?: () => void | Promise<void>;
+}
+
+export function VerificationResultDialog({
+    open,
+    onOpenChange,
+    queryContext,
+    title = "검증 결과",
+    emptyMessage = "표시할 검증 결과가 없습니다.",
+    onExceptionSubmitted,
+}: VerificationResultDialogProps) {
+    const stableQueryContext = useMemo((): VerificationResultDialogQueryContext | null => {
+        if (!queryContext) return null;
+        return queryContext;
+    }, [
+        queryContext?.sewerBzmnCd,
+        queryContext?.ctpvNm,
+        queryContext?.sggNm,
+        queryContext?.statsYr,
+        queryContext?.statsCd,
+    ]);
+
+    const [pageIndex, setPageIndex] = useState(0);
+    const [pageCount, setPageCount] = useState(1);
+    const [loading, setLoading] = useState(false);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    const [rows, setRows] = useState<VerificationResultGridRow[]>([]);
+    const [checkedIndices, setCheckedIndices] = useState<Set<number>>(() => new Set());
+
+    const gridRef = useRef<RealGridReact | null>(null);
+    const getGridDataRef = useRef<(() => VerificationResultGridRow[]) | null>(null);
+    const alert = useAlertStore((state) => state.setMessage);
+
+    const onPrcsOpnnExplnEdited = useCallback((params: CellEditedCallbackParams) => {
+        if (params.fieldName !== "prcsOpnnExpln") return;
+        const text = String(params.newValue ?? "");
+        const hasValue = text.trim().length > 0;
+        setRowCheckByItemIndex(gridRef, params.itemIndex, hasValue);
+        setCheckedIndices((prev) => {
+            const next = new Set(prev);
+            if (hasValue) next.add(params.itemIndex);
+            else next.delete(params.itemIndex);
+            return next;
+        });
+    }, []);
+
+    const resetState = useCallback(() => {
+        setPageIndex(0);
+        setPageCount(1);
+        setLoading(false);
+        setErrorMessage(null);
+        setRows([]);
+        setCheckedIndices(new Set());
+    }, []);
+
+    const mapItemToRow = useCallback(
+        (item: VerificationResultReportItem, vrfcMthdCd: VerificationMethodCd): VerificationResultGridRow => {
+            return {
+                vrfcSn: item.vrfcSn,
+                vrfcMthdCd,
+                vrfcMthdNm: VRFC_MTHD_NAME_MAP[vrfcMthdCd] ?? item.vrfcMthdNm,
+                ctpvNm: item.ctpvNm,
+                admdstNm: item.admdstNm ?? item.sggNm ?? "-",
+                vrfcTrgtNm: item.vrfcTrgtNm,
+                rsnExpln: item.rsnExpln,
+                nowVlCn: item.nowVlCn ?? "-",
+                compVlCn: item.compVlCn ?? "-",
+                prcsYn: item.prcsYnNm ?? PRCS_YN_LABEL[item.prcsYn] ?? item.prcsYn,
+                regDt: (item.regDt ?? "").slice(0, 16),
+                mdfcnDt: (item.mdfcnDt ?? "").slice(0, 16),
+                prcsOpnnExpln: item.prcsOpnnExpln ?? "",
+            };
+        },
+        [],
+    );
+
+    const fetchVerificationResultPage = useCallback(
+        async (vrfcMthdCd: VerificationMethodCd, page: number) => {
+            if (!stableQueryContext) return null;
+            const param: VerificationResultListRequest = {
+                sewerBzmnCd: stableQueryContext.sewerBzmnCd,
+                ctpvNm: stableQueryContext.ctpvNm,
+                sggNm: stableQueryContext.sggNm,
+                statsYr: stableQueryContext.statsYr,
+                statsCd: stableQueryContext.statsCd,
+                vrfcMthdCd,
+                prcsYnList: "0",
+                rejectCodeList: "0,1,2",
+                page: page + 1,
+                size: 10000,
+            };
+            return statisticsApi.getVerificationResultList(param);
+        },
+        [stableQueryContext],
+    );
+
+    const loadPage = useCallback(
+        async (nextPageIndex: number) => {
+            if (!stableQueryContext) {
+                setErrorMessage("조회 조건이 없어 검증 결과를 불러올 수 없습니다.");
+                return;
+            }
+            setErrorMessage(null);
+            setLoading(true);
+            try {
+                const responses = await Promise.all(
+                    VERIFICATION_METHOD_CODES.map((code) =>
+                        fetchVerificationResultPage(code, nextPageIndex),
+                    ),
+                );
+                const merged: VerificationResultGridRow[] = [];
+                let maxPageCount = 1;
+                VERIFICATION_METHOD_CODES.forEach((code, index) => {
+                    const response = responses[index];
+                    const list = response?.data?.verifyResultList ?? [];
+                    merged.push(...list.map((item) => mapItemToRow(item, code)));
+                    maxPageCount = Math.max(
+                        maxPageCount,
+                        response?.data?.pageInfo?.totalPages ?? 1,
+                    );
+                });
+                setRows(merged);
+                setPageCount(maxPageCount);
+                setPageIndex(nextPageIndex);
+            } catch {
+                setRows([]);
+                setPageCount(1);
+                setErrorMessage("검증 결과 조회 중 오류가 발생했습니다.");
+            } finally {
+                setLoading(false);
+                setCheckedIndices(new Set());
+            }
+        },
+        [fetchVerificationResultPage, mapItemToRow, stableQueryContext],
+    );
+
+    const loadInitial = useCallback(async () => {
+        await loadPage(0);
+    }, [loadPage]);
+
+    const handlePageChange = useCallback(
+        async (nextPageIndex: number) => {
+            if (nextPageIndex === pageIndex || !stableQueryContext) return;
+            await loadPage(nextPageIndex);
+        },
+        [loadPage, pageIndex, stableQueryContext],
+    );
+
+    useEffect(() => {
+        if (!open) {
+            resetState();
+            return;
+        }
+        void loadInitial();
+    }, [loadInitial, open, resetState]);
+
+    useEffect(() => {
+        if (loading) return;
+        const id = requestAnimationFrame(() => {
+            setCheckedIndices((prev) => {
+                const next = new Set(prev);
+                rows.forEach((row, itemIndex) => {
+                    const has = String(row.prcsOpnnExpln ?? "").trim().length > 0;
+                    setRowCheckByItemIndex(gridRef, itemIndex, has);
+                    if (has) next.add(itemIndex);
+                });
+                return next;
+            });
+        });
+        return () => cancelAnimationFrame(id);
+    }, [rows, loading]);
+
+    const handleExceptionSubmitClick = useCallback(async () => {
+        const gridRows = getGridDataRef.current?.() ?? [];
+        const payload: VerificationExceptionSubmitItem[] = [];
+        checkedIndices.forEach((idx) => {
+            const prcsOpnnExpln = String(gridRows[idx]?.prcsOpnnExpln ?? "").trim();
+            if (!prcsOpnnExpln) return;
+            const vrfcSn = Number(rows[idx]?.vrfcSn);
+            if (!Number.isFinite(vrfcSn)) return;
+            payload.push({ vrfcSn, prcsOpnnExpln });
+        });
+        if (payload.length === 0) {
+            alert("작성된 예외 제출 항목이 없습니다.");
+            return;
+        }
+        if (!stableQueryContext) {
+            alert("조회 조건이 없어 예외 제출을 할 수 없습니다.");
+            return;
+        }
+        try {
+            const userInfo = await getUserInfo();
+            const response = await statisticsApi.SubmitVerifyException({
+                sewerBzmnCd: stableQueryContext.sewerBzmnCd,
+                statsYr: stableQueryContext.statsYr,
+                statsCd: stableQueryContext.statsCd,
+                userId: userInfo.userUnqId,
+                exceptionList: payload,
+            });
+            if (response.status === "success") {
+                alert("예외 제출 처리되었습니다.");
+                try {
+                    await onExceptionSubmitted?.();
+                } catch {
+                    alert("예외 제출은 완료되었으나 화면 데이터를 다시 불러오지 못했습니다. 조회로 새로고침 해주세요.");
+                }
+                onOpenChange(false);
+            } else {
+                alert(response.message ?? "예외 제출 처리 중 오류가 발생했습니다.");
+            }
+        } catch {
+            alert("예외 제출 처리 중 오류가 발생했습니다.");
+        }
+    }, [
+        alert,
+        checkedIndices,
+        rows,
+        onExceptionSubmitted,
+        onOpenChange,
+        stableQueryContext,
+    ]);
+
+    const titleSuffix = useMemo(() => {
+        if (!stableQueryContext) return "";
+        const sgg = stableQueryContext.sggNm?.trim() ? ` ${stableQueryContext.sggNm}` : "";
+        return ` - ${stableQueryContext.statsYr} ${stableQueryContext.ctpvNm}${sgg}`;
+    }, [stableQueryContext]);
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-[80%]" aria-describedby={undefined}>
+                <DialogHeader>
+                    <DialogTitle>
+                        {title}
+                        {titleSuffix}
+                    </DialogTitle>
+                </DialogHeader>
+                <div className="max-h-[85vh] space-y-5 overflow-auto">
+                    {errorMessage && (
+                        <p className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[1.2rem] text-destructive h-[65vh] flex justify-center items-center">
+                            {errorMessage}
+                        </p>
+                    )}
+                    <section className="rounded-md border border-border">
+                        {!loading && rows.length === 0 ? (
+                            <p className="p-6 text-center text-[1.3rem] text-muted-foreground">
+                                {emptyMessage}
+                            </p>
+                        ) : (
+                            <div className="relative space-y-2">
+                                <DataGrid
+                                    columnInfo={verificationSubmitResultColumnInfo}
+                                    rowData={rows}
+                                    setRowData={
+                                        setRows as Dispatch<
+                                            SetStateAction<Record<string, string | number>[]>
+                                        >
+                                    }
+                                    isExcelImport={false}
+                                    isExcelExport={false}
+                                    showHeaderCheckbox
+                                    enableSort={false}
+                                    getGridRef={gridRef}
+                                    getGridDataRef={getGridDataRef}
+                                    onCellEdited={onPrcsOpnnExplnEdited}
+                                    cellStyleCallback={verificationMthdCellStyle}
+                                    onItemChecked={(itemIndex, checked) => {
+                                        setCheckedIndices((prev) => {
+                                            const next = new Set(prev);
+                                            if (checked) next.add(itemIndex);
+                                            else next.delete(itemIndex);
+                                            return next;
+                                        });
+                                    }}
+                                    onItemAllChecked={(checked) => {
+                                        setCheckedIndices(
+                                            checked ? new Set(rows.map((_, i) => i)) : new Set(),
+                                        );
+                                    }}
+                                />
+                                <VerificationResultHistoryPagination
+                                    pageCount={Math.max(pageCount, 1)}
+                                    pageIndex={Math.max(pageIndex, 0)}
+                                    onPageIndexChange={handlePageChange}
+                                    className="mx-2 mb-2"
+                                />
+                                {loading && (
+                                    <div className="absolute inset-0 z-10 flex items-center justify-center rounded-md bg-white/40 [data-theme='black']:bg-transparent">
+                                        <div className="relative size-[5rem]">
+                                            <LoadingWithAnimation color="primary" />
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </section>
+                </div>
+                <DialogFooter>
+                    <Button type="button" color="primary" onClick={handleExceptionSubmitClick}>
+                        예외 제출
+                    </Button>
+                    <DialogClose asChild>
+                        <Button type="button" color="gray">
+                            닫기
+                        </Button>
+                    </DialogClose>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/apps/st/src/components/module/VerificationResultHistoryDialog.tsx b/apps/st/src/components/module/VerificationResultHistoryDialog.tsx
new file mode 100644
index 000000000..bde68dc26
--- /dev/null
+++ b/apps/st/src/components/module/VerificationResultHistoryDialog.tsx
@@ -0,0 +1,620 @@
+"use client";
+
+import {
+    type Dispatch,
+    type MutableRefObject,
+    type SetStateAction,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
+import type { RealGridReact } from "realgrid-react";
+
+import { getUserInfo } from "../../../../../packages/common/components/src/api";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type { VerificationResultListRequest, VerificationResultReportItem } from "@/entities/statistics/model/statistics-interface";
+import {
+    Button,
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    LoadingWithAnimation,
+    Tabs,
+    TabsContent,
+    TabsList,
+    TabsTrigger,
+} from "@common/components";
+
+import DataGrid from "@/components/module/DataGrid";
+import { VerificationResultHistoryPagination } from "@/components/module/VerificationResultHistoryPagination";
+import type { CellStyleCallbackParams, ColumnInfo } from "@/components/type/DataGrid.type";
+import { useAlertStore } from "@/shared/lib";
+
+type VerificationResultGridRow = Record<string, string | number>;
+type VerificationHistoryTabKey = "NV" | "IMR" | "HB";
+
+const verificationHistoryTabs: { value: VerificationHistoryTabKey; label: string }[] = [
+    { value: "NV", label: "일반검증 내역" },
+    { value: "IMR", label: "I-MR 검증내역" },
+    { value: "HB", label: "HB 검증내역" },
+];
+
+const PAGE_SIZE = 30;
+
+/** vrfcSn → prcsYn (페이지 이동 후에도 취소 가능 여부 검증용) */
+const createEmptyCheckedVrfcByTab = (): Record<VerificationHistoryTabKey, Map<number, string>> => ({
+    NV: new Map(),
+    IMR: new Map(),
+    HB: new Map(),
+});
+
+const initialTabPageState = (): Record<
+    VerificationHistoryTabKey,
+    { pageIndex: number; pageCount: number }
+> => ({
+    NV: { pageIndex: 0, pageCount: 1 },
+    IMR: { pageIndex: 0, pageCount: 1 },
+    HB: { pageIndex: 0, pageCount: 1 },
+});
+
+function prcsYnCodeToNumber(raw: string | number | undefined): number | undefined {
+    if (raw === undefined || raw === null) return undefined;
+    if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+    const s = String(raw).trim();
+    if (s === "") return undefined;
+    const n = Number.parseInt(s, 10);
+    return Number.isFinite(n) ? n : undefined;
+}
+
+/** 예외 제출 취소 가능: prcsYn = 2 (예외처리) */
+function canExceptionReset(prcsYn: string | number | undefined): boolean {
+    return prcsYnCodeToNumber(prcsYn) === 2;
+}
+
+const EXCEPTION_RESET_ONLY_PRCS_YN_2_MESSAGE =
+    "예외 제출 취소는 처리여부가 사용자예외처리인 항목만 선택할 수 있습니다.";
+
+type GridViewWithCheckApi = {
+    getCheckedRows?: (allItems?: boolean, visibleOnly?: boolean, exclusive?: boolean) => number[];
+    checkItem?: (itemIndex: number, checked: boolean, exclusive?: boolean) => void;
+};
+
+function uncheckGridRow(gridRef: MutableRefObject<RealGridReact | null>, itemIndex: number) {
+    try {
+        (gridRef.current?.gridView as GridViewWithCheckApi | undefined)?.checkItem?.(itemIndex, false, false);
+    } catch {
+        /* ignore */
+    }
+}
+
+function syncCheckedMapFromGrid(
+    entries: VerificationResultReportItem[],
+    gridRef: MutableRefObject<RealGridReact | null>,
+    prevMap: Map<number, string>,
+): Map<number, string> {
+    const next = new Map(prevMap);
+    for (const entry of entries) {
+        const sn = Number(entry.vrfcSn);
+        if (Number.isFinite(sn)) next.delete(sn);
+    }
+    const indices =
+        (gridRef.current?.gridView as GridViewWithCheckApi | undefined)?.getCheckedRows?.(true, false, true) ??
+        [];
+    for (const itemIndex of indices) {
+        const entry = entries[itemIndex];
+        if (!entry) continue;
+        const sn = Number(entry.vrfcSn);
+        if (!Number.isFinite(sn)) continue;
+        next.set(sn, String(entry.prcsYn ?? ""));
+    }
+    return next;
+}
+
+function selectionHasNonExceptionResetAllowed(
+    map: Map<number, string>,
+    currentEntries: VerificationResultReportItem[],
+): boolean {
+    for (const [vrfcSn, storedPrcsYn] of map) {
+        const onPage = currentEntries.find((e) => Number(e.vrfcSn) === vrfcSn);
+        const prcsYn = onPage ? onPage.prcsYn : storedPrcsYn;
+        if (!canExceptionReset(prcsYn)) return true;
+    }
+    return false;
+}
+
+function verificationPrcsYnNmCellStyle({ fieldName, row }: CellStyleCallbackParams): string | undefined {
+    if (fieldName !== "prcsYnNm") return undefined;
+    const code = prcsYnCodeToNumber(row.prcsYn);
+    if (code === 0 || code === 3) return "rg-cell-vrf-prcs-bad";
+    return "rg-cell-vrf-prcs-ok";
+}
+
+const verificationResultColumnInfo: ColumnInfo = {
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역" }, editable: false },
+        { name: "vrfcTrgtNm", fieldName: "vrfcTrgtNm", header: { text: "검증대상" }, editable: false },
+        { name: "rsnExpln", fieldName: "rsnExpln", header: { text: "사유" }, editable: false },
+        { name: "nowVlCn", fieldName: "nowVlCn", header: { text: "입력값" }, editable: false },
+        { name: "compVlCn", fieldName: "compVlCn", header: { text: "기준값" }, editable: false },
+        { name: "prcsYnNm", fieldName: "prcsYnNm", header: { text: "처리여부" }, editable: false },
+        { name: "stVrfRjtComNm", fieldName: "stVrfRjtComNm", header: { text: "반려상태" }, editable: false },
+        { name: "prcsOpnnExpln", fieldName: "prcsOpnnExpln", header: { text: "처리의견" }, editable: false },
+        { name: "rjctOpnnCn", fieldName: "rjctOpnnCn", header: { text: "반려의견" }, editable: false },
+        { name: "regDt", fieldName: "regDt", header: { text: "등록일시" }, editable: false },
+        { name: "mdfcnDt", fieldName: "mdfcnDt", header: { text: "갱신일시" }, editable: false },
+        { name: "prcsYn", fieldName: "prcsYn", header: { text: "검증결과상태코드" }, editable: false, visible: false },
+        { name: "vrfcSn", fieldName: "vrfcSn", header: { text: "검증일련번호" }, editable: false, visible: false },
+    ],
+    columnLayout: [
+        "ctpvNm",
+        "admdstNm",
+        "vrfcTrgtNm",
+        "rsnExpln",
+        "nowVlCn",
+        "compVlCn",
+        "prcsYnNm",
+        "stVrfRjtComNm",
+        "prcsOpnnExpln",
+        "rjctOpnnCn",
+        "regDt",
+        "mdfcnDt",
+        "prcsYn",
+        "vrfcSn",
+    ],
+};
+
+export interface VerificationResultHistoryDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    queryContext?: {
+        sewerBzmnCd: string;
+        ctpvNm: string;
+        sggNm: string;
+        statsYr: string;
+        statsCd: string;
+    } | null;
+    title?: string;
+    emptyMessage?: string;
+    /** 예외 제출 취소 API 성공 후 부모(입력 화면)에서 메인 데이터를 다시 조회할 때 사용 */
+    onExceptionResetSubmitted?: () => void | Promise<void>;
+}
+
+export function VerificationResultHistoryDialog({
+    open,
+    onOpenChange,
+    queryContext,
+    title = "검증 결과 내역",
+    emptyMessage = "표시할 검증 결과가 없습니다.",
+    onExceptionResetSubmitted,
+}: VerificationResultHistoryDialogProps) {
+    const stableQueryContext = useMemo(() => {
+        if (!queryContext) return null;
+        return queryContext;
+    }, [
+        queryContext?.sewerBzmnCd,
+        queryContext?.ctpvNm,
+        queryContext?.sggNm,
+        queryContext?.statsYr,
+        queryContext?.statsCd,
+    ]);
+
+    const [activeTab, setActiveTab] = useState<VerificationHistoryTabKey>("NV");
+    const [entriesByTab, setEntriesByTab] = useState<
+        Record<VerificationHistoryTabKey, VerificationResultReportItem[]>
+    >({
+        NV: [],
+        IMR: [],
+        HB: [],
+    });
+    const [tabPages, setTabPages] = useState(initialTabPageState);
+    const [loadingByTab, setLoadingByTab] = useState<Record<VerificationHistoryTabKey, boolean>>({
+        NV: false,
+        IMR: false,
+        HB: false,
+    });
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+    const [resetSubmitting, setResetSubmitting] = useState(false);
+    const [checkedVrfcByTab, setCheckedVrfcByTab] = useState(createEmptyCheckedVrfcByTab);
+
+    const nvGridRef = useRef<RealGridReact | null>(null);
+    const imrGridRef = useRef<RealGridReact | null>(null);
+    const hbGridRef = useRef<RealGridReact | null>(null);
+    const alert = useAlertStore((state) => state.setMessage);
+
+    const gridRefByTab: Record<VerificationHistoryTabKey, MutableRefObject<RealGridReact | null>> = {
+        NV: nvGridRef,
+        IMR: imrGridRef,
+        HB: hbGridRef,
+    };
+    const checkedVrfcByTabRef = useRef(checkedVrfcByTab);
+    checkedVrfcByTabRef.current = checkedVrfcByTab;
+
+    const resetState = useCallback(() => {
+        setActiveTab("NV");
+        setEntriesByTab({ NV: [], IMR: [], HB: [] });
+        setTabPages(initialTabPageState());
+        setLoadingByTab({ NV: false, IMR: false, HB: false });
+        setErrorMessage(null);
+        setResetSubmitting(false);
+        setCheckedVrfcByTab(createEmptyCheckedVrfcByTab());
+    }, []);
+
+    const fetchVerificationResultPage = useCallback(
+        async (vrfcMthdCd: VerificationHistoryTabKey, pageIndex: number) => {
+            if (!stableQueryContext) return null;
+            const param: VerificationResultListRequest = {
+                sewerBzmnCd: stableQueryContext.sewerBzmnCd,
+                ctpvNm: stableQueryContext.ctpvNm,
+                sggNm: stableQueryContext.sggNm,
+                statsYr: stableQueryContext.statsYr,
+                statsCd: stableQueryContext.statsCd,
+                vrfcMthdCd,
+                prcsYnList: "0,2",
+                rejectCodeList: "0,1,2",
+                page: pageIndex + 1,
+                size: PAGE_SIZE,
+            };
+            return statisticsApi.getVerificationResultList(param);
+        },
+        [stableQueryContext],
+    );
+
+    const applyPageResponse = useCallback(
+        (tab: VerificationHistoryTabKey, pageIndex: number, list: VerificationResultReportItem[], totalPages: number) => {
+            const pageCount = Math.max(totalPages, 1);
+            const clampedIndex = Math.min(Math.max(pageIndex, 0), pageCount - 1);
+            setEntriesByTab((prev) => ({ ...prev, [tab]: list }));
+            setTabPages((prev) => ({
+                ...prev,
+                [tab]: { pageIndex: clampedIndex, pageCount },
+            }));
+        },
+        [],
+    );
+
+    const loadTabPage = useCallback(
+        async (tab: VerificationHistoryTabKey, pageIndex: number) => {
+            if (!stableQueryContext) {
+                setErrorMessage("조회 조건이 없어 검증 결과를 불러올 수 없습니다.");
+                return;
+            }
+            setErrorMessage(null);
+            setLoadingByTab((prev) => ({ ...prev, [tab]: true }));
+            try {
+                const response = await fetchVerificationResultPage(tab, pageIndex);
+                const list = response?.data?.verifyResultList ?? [];
+                const totalPages = response?.data?.pageInfo?.totalPages ?? 1;
+                const apiCurrentPage = response?.data?.pageInfo?.currentPage;
+                const resolvedPageIndex =
+                    apiCurrentPage != null && Number.isFinite(apiCurrentPage)
+                        ? Math.max(0, Number(apiCurrentPage) - 1)
+                        : pageIndex;
+                applyPageResponse(tab, resolvedPageIndex, list, totalPages);
+            } catch {
+                const tabLabel =
+                    verificationHistoryTabs.find((t) => t.value === tab)?.label ?? tab;
+                setErrorMessage(`${tabLabel} 조회 중 오류가 발생했습니다.`);
+            } finally {
+                setLoadingByTab((prev) => ({ ...prev, [tab]: false }));
+            }
+        },
+        [applyPageResponse, fetchVerificationResultPage, stableQueryContext],
+    );
+
+    const loadInitial = useCallback(async () => {
+        if (!stableQueryContext) {
+            setErrorMessage("조회 조건이 없어 검증 결과를 불러올 수 없습니다.");
+            return;
+        }
+        setErrorMessage(null);
+        setTabPages(initialTabPageState());
+        setLoadingByTab({ NV: true, IMR: true, HB: true });
+        try {
+            const results = await Promise.all(
+                verificationHistoryTabs.map((tab) =>
+                    fetchVerificationResultPage(tab.value, 0),
+                ),
+            );
+            setEntriesByTab({
+                NV: results[0]?.data?.verifyResultList ?? [],
+                IMR: results[1]?.data?.verifyResultList ?? [],
+                HB: results[2]?.data?.verifyResultList ?? [],
+            });
+            setTabPages({
+                NV: {
+                    pageIndex: 0,
+                    pageCount: Math.max(results[0]?.data?.pageInfo?.totalPages ?? 1, 1),
+                },
+                IMR: {
+                    pageIndex: 0,
+                    pageCount: Math.max(results[1]?.data?.pageInfo?.totalPages ?? 1, 1),
+                },
+                HB: {
+                    pageIndex: 0,
+                    pageCount: Math.max(results[2]?.data?.pageInfo?.totalPages ?? 1, 1),
+                },
+            });
+        } catch {
+            setEntriesByTab({ NV: [], IMR: [], HB: [] });
+            setTabPages(initialTabPageState());
+            setErrorMessage("검증 결과 내역 조회 중 오류가 발생했습니다.");
+        } finally {
+            setLoadingByTab({ NV: false, IMR: false, HB: false });
+        }
+    }, [fetchVerificationResultPage, stableQueryContext]);
+
+    const handleTabPageChange = useCallback(
+        (tab: VerificationHistoryTabKey, pageIndex: number) => {
+            if (pageIndex === tabPages[tab].pageIndex) return;
+            void loadTabPage(tab, pageIndex);
+        },
+        [loadTabPage, tabPages],
+    );
+
+    useEffect(() => {
+        if (!open) {
+            resetState();
+            return;
+        }
+        void loadInitial();
+    }, [loadInitial, open, resetState]);
+
+    const updateCheckedVrfcForTab = useCallback(
+        (tab: VerificationHistoryTabKey, updater: (map: Map<number, string>) => void) => {
+            setCheckedVrfcByTab((prev) => {
+                const nextMap = new Map(prev[tab]);
+                updater(nextMap);
+                return { ...prev, [tab]: nextMap };
+            });
+        },
+        [],
+    );
+
+    const mapRows = useCallback(
+        (entries: VerificationResultReportItem[], checkedMap: Map<number, string>): VerificationResultGridRow[] =>
+            entries.map((item) => {
+                const vrfcSn = Number(item.vrfcSn);
+                const isChecked = Number.isFinite(vrfcSn) && checkedMap.has(vrfcSn);
+                return {
+                    vrfcSn: item.vrfcSn,
+                    __checked: isChecked ? 1 : 0,
+                    ctpvNm: item.ctpvNm,
+                    admdstNm: item.admdstNm ?? item.sggNm ?? "-",
+                    vrfcTrgtNm: item.vrfcTrgtNm,
+                    rsnExpln: item.rsnExpln,
+                    nowVlCn: item.nowVlCn ?? "-",
+                    compVlCn: item.compVlCn ?? "-",
+                    prcsYnNm: item.prcsYnNm ?? "-",
+                    stVrfRjtComNm: item.stVrfRjtComNm ?? "-",
+                    prcsOpnnExpln: item.prcsOpnnExpln ?? "-",
+                    rjctOpnnCn: item.rjctOpnnCn ?? "-",
+                    prcsYn: item.prcsYn ?? "",
+                    regDt: (item.regDt ?? "").slice(0, 16),
+                    mdfcnDt: (item.mdfcnDt ?? "").slice(0, 16),
+                };
+            }),
+        [],
+    );
+
+    /** 페이지(entries) 변경 시에만 __checked 반영 — 클릭마다 rowData를 바꾸지 않아 체크 UI가 안정적 */
+    const rowsByTab = useMemo(
+        () => {
+            const checked = checkedVrfcByTabRef.current;
+            return {
+                NV: mapRows(entriesByTab.NV, checked.NV),
+                IMR: mapRows(entriesByTab.IMR, checked.IMR),
+                HB: mapRows(entriesByTab.HB, checked.HB),
+            };
+        },
+        [entriesByTab, mapRows],
+    );
+
+    const noopSetRows = ((_: SetStateAction<Record<string, string | number>[]>) => {}) as Dispatch<
+        SetStateAction<Record<string, string | number>[]>
+    >;
+
+    const handleExceptionResetClick = useCallback(async () => {
+        if (!stableQueryContext) {
+            alert("조회 조건이 없습니다.");
+            return;
+        }
+        const tab = activeTab;
+        const currentEntries = entriesByTab[tab];
+        const syncedMap = syncCheckedMapFromGrid(currentEntries, gridRefByTab[tab], checkedVrfcByTab[tab]);
+        if (syncedMap.size === 0) {
+            alert("예외 제출 취소할 항목을 체크해주세요.");
+            return;
+        }
+        if (selectionHasNonExceptionResetAllowed(syncedMap, currentEntries)) {
+            alert(EXCEPTION_RESET_ONLY_PRCS_YN_2_MESSAGE);
+            return;
+        }
+        setCheckedVrfcByTab((prev) => ({ ...prev, [tab]: syncedMap }));
+        const vrfcSnList = Array.from(syncedMap.keys());
+        let mdfrId: string;
+        try {
+            const userInfo = await getUserInfo();
+            mdfrId = userInfo.userUnqId;
+        } catch {
+            alert("사용자 정보를 불러오지 못했습니다.");
+            return;
+        }
+        setResetSubmitting(true);
+        setErrorMessage(null);
+        try {
+            const response = await statisticsApi.StatiscicsExceptionReset({
+                statsYr: stableQueryContext.statsYr,
+                sewerBzmnCd: stableQueryContext.sewerBzmnCd,
+                statsCd: stableQueryContext.statsCd,
+                mdfrId,
+                vrfcSnList,
+            });
+            if (response.status !== "success") {
+                alert(response.message ?? "예외 제출 취소 처리 중 오류가 발생했습니다.");
+                return;
+            }
+            alert("예외 제출 취소 처리되었습니다.");
+            setCheckedVrfcByTab((prev) => ({ ...prev, [tab]: new Map() }));
+            await loadTabPage(tab, tabPages[tab].pageIndex);
+            try {
+                await onExceptionResetSubmitted?.();
+            } catch {
+                alert(
+                    "예외 제출 취소는 완료되었으나 화면 데이터를 다시 불러오지 못했습니다. 조회로 새로고침 해주세요.",
+                );
+            }
+        } catch {
+            alert("예외 제출 취소 처리 중 오류가 발생했습니다.");
+        } finally {
+            setResetSubmitting(false);
+        }
+    }, [
+        activeTab,
+        alert,
+        checkedVrfcByTab,
+        entriesByTab,
+        loadTabPage,
+        onExceptionResetSubmitted,
+        stableQueryContext,
+        tabPages,
+    ]);
+
+    const renderActiveTabPanel = (tab: VerificationHistoryTabKey) => {
+        const entries = entriesByTab[tab];
+        const rows = rowsByTab[tab];
+        const { pageIndex, pageCount } = tabPages[tab];
+        const loading = loadingByTab[tab];
+        const gridRef = gridRefByTab[tab];
+
+        if (!loading && rows.length === 0) {
+            return <p className="p-6 text-center text-[1.3rem] text-muted-foreground h-[65vh] flex justify-center items-center">{emptyMessage}</p>;
+        }
+
+        return (
+            <div className="relative space-y-2">
+                <DataGrid
+                    key={`verification-history-grid-${tab}`}
+                    columnInfo={verificationResultColumnInfo}
+                    rowData={rows}
+                    setRowData={noopSetRows}
+                    isExcelImport={false}
+                    isExcelExport={false}
+                    showHeaderCheckbox
+                    enableSort={false}
+                    getGridRef={gridRef}
+                    cellStyleCallback={verificationPrcsYnNmCellStyle}
+                    onItemChecked={(itemIndex, checked) => {
+                        const entry = entries[itemIndex];
+                        if (!entry) return;
+                        const vrfcSn = Number(entry.vrfcSn);
+                        if (!Number.isFinite(vrfcSn)) return;
+                        if (checked && !canExceptionReset(entry.prcsYn)) {
+                            alert(EXCEPTION_RESET_ONLY_PRCS_YN_2_MESSAGE);
+                            uncheckGridRow(gridRef, itemIndex);
+                            return;
+                        }
+                        updateCheckedVrfcForTab(tab, (map) => {
+                            if (checked) map.set(vrfcSn, String(entry.prcsYn ?? ""));
+                            else map.delete(vrfcSn);
+                        });
+                    }}
+                    onItemAllChecked={(checked) => {
+                        updateCheckedVrfcForTab(tab, (map) => {
+                            entries.forEach((entry, itemIndex) => {
+                                const vrfcSn = Number(entry.vrfcSn);
+                                if (!Number.isFinite(vrfcSn)) return;
+                                if (!checked) {
+                                    map.delete(vrfcSn);
+                                    return;
+                                }
+                                if (canExceptionReset(entry.prcsYn)) {
+                                    map.set(vrfcSn, String(entry.prcsYn ?? ""));
+                                } else {
+                                    uncheckGridRow(gridRef, itemIndex);
+                                }
+                            });
+                        });
+                        if (checked && entries.some((e) => !canExceptionReset(e.prcsYn))) {
+                            alert(EXCEPTION_RESET_ONLY_PRCS_YN_2_MESSAGE);
+                        }
+                    }}
+                />
+                <VerificationResultHistoryPagination
+                    key={`verification-history-pagination-${tab}`}
+                    pageCount={pageCount}
+                    pageIndex={pageIndex}
+                    onPageIndexChange={(nextPage) => handleTabPageChange(tab, nextPage)}
+                    className="mx-2 mb-2"
+                />
+                {loading && (
+                    <div className="absolute inset-0 z-10 rounded-md [data-theme='black']:bg-transparent bg-white/40 flex items-center justify-center">
+                        <div className="relative size-[5rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-[80%]" aria-describedby={undefined}>
+                <DialogHeader>
+                    <DialogTitle>{`${title} - ${queryContext?.statsYr} ${queryContext?.ctpvNm} ${queryContext?.sggNm}`}</DialogTitle>
+                </DialogHeader>
+                <div className="max-h-[85vh] space-y-5 overflow-auto">
+                    {errorMessage && (
+                        <p className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[1.2rem] text-destructive">
+                            {errorMessage}
+                        </p>
+                    )}
+                    <Tabs
+                        value={activeTab}
+                        onValueChange={(value) => setActiveTab(value as VerificationHistoryTabKey)}
+                        className="w-full"
+                        variant="default"
+                    >
+                        <TabsList>
+                            {verificationHistoryTabs.map((tab) => (
+                                <TabsTrigger key={tab.value} value={tab.value}>
+                                    {tab.label}
+                                </TabsTrigger>
+                            ))}
+                        </TabsList>
+                        {verificationHistoryTabs.map((tab) => (
+                            <TabsContent
+                                key={tab.value}
+                                value={tab.value}
+                                className="rounded-md border border-border"
+                            >
+                                {activeTab === tab.value ? renderActiveTabPanel(tab.value) : null}
+                            </TabsContent>
+                        ))}
+                    </Tabs>
+                </div>
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        color="primary"
+                        disabled={resetSubmitting || loadingByTab[activeTab]}
+                        onClick={() => void handleExceptionResetClick()}
+                    >
+                        예외 제출 취소
+                    </Button>
+                    <DialogClose asChild>
+                        <Button type="button" color="gray" disabled={resetSubmitting}>
+                            닫기
+                        </Button>
+                    </DialogClose>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/apps/st/src/components/module/VerificationResultHistoryPagination.tsx b/apps/st/src/components/module/VerificationResultHistoryPagination.tsx
new file mode 100644
index 000000000..e3fa59851
--- /dev/null
+++ b/apps/st/src/components/module/VerificationResultHistoryPagination.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import {
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    DoubleArrowLeftIcon,
+    DoubleArrowRightIcon,
+} from "@radix-ui/react-icons";
+import { Button, cn } from "@common/components";
+
+export type VerificationResultHistoryPaginationProps = {
+    pageCount: number;
+    pageIndex: number;
+    onPageIndexChange: (pageIndex: number) => void;
+    className?: string;
+};
+
+export function VerificationResultHistoryPagination({
+    pageCount,
+    pageIndex: currentPage,
+    onPageIndexChange,
+    className,
+}: VerificationResultHistoryPaginationProps) {
+    const maxVisiblePages = 10;
+    let startPage = Math.max(0, currentPage - maxVisiblePages / 2);
+    const endPage = Math.min(pageCount, startPage + maxVisiblePages);
+
+    if (endPage - startPage < maxVisiblePages) {
+        startPage = Math.max(0, endPage - maxVisiblePages);
+    }
+
+    const pageNumbers = Array(endPage - startPage)
+        .fill(0)
+        .map((_, i) => startPage + i);
+
+    const canPrevious = currentPage > 0;
+    const canNext = pageCount > 0 && currentPage < pageCount - 1;
+
+    return (
+        <div className={cn("mt-2 flex items-center justify-center gap-1 rounded-md border border-border/70 bg-muted/20 px-2 py-2", className)}>
+            <Button
+                variant="ghost"
+                color="white"
+                className="hidden size-8 p-0 lg:flex"
+                onClick={() => onPageIndexChange(0)}
+                disabled={!canPrevious}
+            >
+                <span className="sr-only">첫 페이지로</span>
+                <DoubleArrowLeftIcon className="size-4" />
+            </Button>
+            <Button
+                variant="ghost"
+                color="white"
+                className="size-8 p-0"
+                onClick={() => onPageIndexChange(currentPage - 1)}
+                disabled={!canPrevious}
+            >
+                <span className="sr-only">이전 페이지로</span>
+                <ChevronLeftIcon className="size-4" />
+            </Button>
+            <div className="flex items-center justify-center text-sm font-medium">
+                {pageNumbers.map((pageNumber) => (
+                    <Button
+                        key={pageNumber}
+                        variant="ghost"
+                        className={cn(
+                            "inline-block h-8 min-w-8 border border-transparent !bg-transparent px-2 py-1 text-foreground hover:!bg-accent",
+                            currentPage === pageNumber &&
+                                "!bg-primary !font-bold !text-primary-foreground hover:!bg-primary",
+                        )}
+                        onClick={() => onPageIndexChange(pageNumber)}
+                    >
+                        {pageNumber + 1}
+                    </Button>
+                ))}
+            </div>
+            <Button
+                variant="ghost"
+                color="white"
+                className="size-8 p-0"
+                onClick={() => onPageIndexChange(currentPage + 1)}
+                disabled={!canNext}
+            >
+                <span className="sr-only">다음 페이지로</span>
+                <ChevronRightIcon className="size-4" />
+            </Button>
+            <Button
+                variant="ghost"
+                color="white"
+                className="hidden size-8 p-0 lg:flex"
+                onClick={() => onPageIndexChange(Math.max(0, pageCount - 1))}
+                disabled={!canNext}
+            >
+                <span className="sr-only">마지막 페이지로</span>
+                <DoubleArrowRightIcon className="size-4" />
+            </Button>
+        </div>
+    );
+}
diff --git a/apps/st/src/components/module/post-submit-verification-results.ts b/apps/st/src/components/module/post-submit-verification-results.ts
new file mode 100644
index 000000000..4efe25993
--- /dev/null
+++ b/apps/st/src/components/module/post-submit-verification-results.ts
@@ -0,0 +1,85 @@
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type { VerificationResultListResponse } from "@/entities/statistics/model/statistics-interface";
+
+import type { VerificationResultDialogQueryContext } from "./VerificationResultDialog";
+
+const POST_SUBMIT_VRFC_MTHD_CODES = ["NV", "IMR", "HB"] as const;
+
+export const POST_SUBMIT_COMPLETE_MESSAGE = "제출 완료되었습니다.";
+
+export type OpenVerificationResultDialogOptions = {
+    notify?: (message: string) => void;
+    /** 미통과 검증 결과가 없을 때 제출 완료 알림 (기본 true, IMR 오류 catch 등에서는 false) */
+    notifySubmitComplete?: boolean;
+    submitCompleteMessage?: string;
+};
+
+function responseHasVerificationResults(response: VerificationResultListResponse | null): boolean {
+    const total = response?.data?.pageInfo?.totalElements;
+    if (typeof total === "number" && total > 0) return true;
+    const list = response?.data?.verifyResultList;
+    return Array.isArray(list) && list.length > 0;
+}
+
+/**
+ * 제출 직후 `VerificationResultDialog`에 표시할 미통과(prcsYn=0) 검증 결과가
+ * 일반검증(NV)·I-MR(IMR)·HB 중 하나라도 있는지 조회합니다.
+ */
+export async function hasAnyPostSubmitVerificationResult(
+    ctx: VerificationResultDialogQueryContext,
+): Promise<boolean> {
+    const base = {
+        sewerBzmnCd: ctx.sewerBzmnCd,
+        ctpvNm: ctx.ctpvNm,
+        sggNm: ctx.sggNm,
+        statsYr: ctx.statsYr,
+        statsCd: ctx.statsCd,
+        prcsYnList: "0",
+        rejectCodeList: "0,1,2",
+        page: 1,
+        size: 1,
+    };
+
+    const responses = await Promise.all(
+        POST_SUBMIT_VRFC_MTHD_CODES.map((vrfcMthdCd) =>
+            statisticsApi.getVerificationResultList({ ...base, vrfcMthdCd }),
+        ),
+    );
+
+    return responses.some(responseHasVerificationResults);
+}
+
+/**
+ * 미통과 검증 결과가 있으면 다이얼로그를 열고, 없으면 제출 완료 알림을 표시합니다.
+ * @returns 다이얼로그를 열었으면 true
+ */
+export async function openVerificationResultDialogIfNeeded(
+    ctx: VerificationResultDialogQueryContext | null | undefined,
+    setOpen: (open: boolean) => void,
+    options?: OpenVerificationResultDialogOptions,
+): Promise<boolean> {
+    const {
+        notify,
+        notifySubmitComplete = true,
+        submitCompleteMessage = POST_SUBMIT_COMPLETE_MESSAGE,
+    } = options ?? {};
+
+    const notifyComplete = () => {
+        if (notifySubmitComplete && notify) {
+            notify(submitCompleteMessage);
+        }
+    };
+
+    if (!ctx) {
+        notifyComplete();
+        return false;
+    }
+
+    if (await hasAnyPostSubmitVerificationResult(ctx)) {
+        setOpen(true);
+        return true;
+    }
+
+    notifyComplete();
+    return false;
+}
diff --git a/apps/st/src/components/statistics/Dashboard.tsx b/apps/st/src/components/statistics/Dashboard.tsx
new file mode 100644
index 000000000..423294d2f
--- /dev/null
+++ b/apps/st/src/components/statistics/Dashboard.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { closestCenter, DndContext } from "@dnd-kit/core";
+import { rectSortingStrategy, SortableContext } from "@dnd-kit/sortable";
+import dayjs from "dayjs";
+
+import { useUserStore } from "@/shared/lib";
+import { Skeleton } from "@common/components";
+
+import { useDndSensors } from "@/pages/statistics/lib/hooks/use-dnd-sensors";
+import { usePanelOrder } from "@/pages/statistics/lib/hooks/use-panel-order";
+import { getInitialPanels } from "@/pages/statistics/model/panel-config";
+import { SortablePanel } from "@/pages/statistics/ui/sortable-panel";
+
+interface PanelItem {
+    id: string;
+    component: React.ReactNode;
+    className?: string;
+}
+
+function Dashboard() {
+    const userInfo = useUserStore((state) => state.userInfo);
+    const [initialPanels, setInitialPanels] = useState<PanelItem[]>([]);
+    const [isMounted, setIsMounted] = useState(false);
+    const sensors = useDndSensors();
+
+    const { panels, handleDragEnd } = usePanelOrder({
+        initialPanels,
+        storageKey: "statistics-dashboard-panels-order",
+    });
+
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+
+    useEffect(() => {
+        if (!userInfo) return;
+        const initialPanels = getInitialPanels({
+            dashboardParams: {
+                statsYr: String(dayjs().year() - 1),
+                dtlInstCd: userInfo.dtlInstCd,
+                enoCd: userInfo.enoCd,
+                laeSeCd: userInfo.laeSeCd,
+            },
+            scheduleInfoParams: {
+                statsYr: String(dayjs().year() - 1),
+            },
+        });
+        setInitialPanels(initialPanels);
+    }, [userInfo]);
+
+    return (
+        <>
+            {isMounted && initialPanels.length > 0 ? (
+                <DndContext
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    onDragEnd={handleDragEnd}
+                >
+                    <SortableContext
+                        items={panels.map((p) => p.id)}
+                        strategy={rectSortingStrategy}
+                    >
+                        <div className="grid grid-cols-1 gap-4 p-2 md:grid-cols-2 lg:grid-cols-3">
+                            {panels.map((panel) => (
+                                <SortablePanel
+                                    key={panel.id}
+                                    id={panel.id}
+                                    className={panel.className}
+                                >
+                                    {panel.component}
+                                </SortablePanel>
+                            ))}
+                        </div>
+                    </SortableContext>
+                </DndContext>
+            ) : (
+                <div className="grid grid-cols-1 gap-4 p-2 md:grid-cols-2 lg:grid-cols-3">
+                    <Skeleton className="h-[20rem] rounded-xl bg-muted" />
+                    <Skeleton className="h-[20rem] rounded-xl bg-muted" />
+                    <Skeleton className="h-[20rem] rounded-xl bg-muted" />
+                    <Skeleton className="h-[20rem] rounded-xl bg-muted" />
+                    <Skeleton className="h-[20rem] rounded-xl bg-muted" />
+                    <Skeleton className="h-[20rem] rounded-xl bg-muted" />
+                </div>
+            )}
+        </>
+    );
+}
+
+export default Dashboard;
diff --git a/apps/st/src/components/statistics/VerificationSelectionReport.tsx b/apps/st/src/components/statistics/VerificationSelectionReport.tsx
new file mode 100644
index 000000000..f9e0fc599
--- /dev/null
+++ b/apps/st/src/components/statistics/VerificationSelectionReport.tsx
@@ -0,0 +1,506 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import {
+    type InfiniteData,
+    keepPreviousData,
+    useInfiniteQuery,
+    useQueryClient,
+} from "@tanstack/react-query";
+import { useTabStore as useGridTabStore } from "@rsone/components";
+
+import { verificationInputReportApi } from "@/entities/statistics/api/verification-input-report-service";
+import type {
+    VerificationInputReportItem,
+    VerificationInputReportResponse,
+    VerificationInputReportTypeCountingInfo,
+} from "@/entities/statistics/model/verification-input-report-interface";
+import { useAlertStore, useMenuStore } from "@/shared/lib";
+import {
+    findMenuItemByUrlPath,
+    resolveInputPageNavigationFromStatsCd,
+} from "@/shared/lib/stats-cd-input-navigation";
+import { useStatisticsInputFocusStore } from "@/store/statistics-input-focus-store";
+import { useTabStore } from "@/store/tab-store";
+import dayjs from "dayjs";
+
+import {
+    Badge,
+    type BadgeProps,
+    LoadingWithAnimation,
+    Tabs,
+    TabsContent,
+    TabsList,
+    TabsTrigger,
+    Label,
+} from "@common/components";
+import { CodeSelectWithAll } from "@/entities/code";
+
+type VerificationReportTabKey = "NV" | "IMR" | "HB";
+
+const VERIFICATION_REPORT_TABS: { value: VerificationReportTabKey; label: string }[] = [
+    { value: "NV", label: "일반" },
+    { value: "IMR", label: "I-MR" },
+    { value: "HB", label: "HB" },
+];
+
+const TYPE_CODE_COLOR_MAP: Record<string, BadgeProps["color"]> = {
+    NV: "gray",
+    IMR: "red",
+    HB: "blue",
+};
+
+const TYPE_CODE_NAME_MAP: Record<string, string> = {
+    NV: "일반",
+    IMR: "I-MR",
+    HB: "HB",
+};
+
+const PAGE_SIZE = 100;
+const SCROLL_LOAD_THRESHOLD_PX = 120;
+
+function getNextVerificationInputReportPage(
+    lastPage: VerificationInputReportResponse,
+): number | undefined {
+    const pageInfo = lastPage?.data?.pageInfo;
+    if (!pageInfo) return undefined;
+    const { currentPage, totalPages } = pageInfo;
+    if (currentPage + 1 <= totalPages) return currentPage + 1;
+    return undefined;
+}
+
+function flattenVerificationInputReportResults(
+    data: InfiniteData<VerificationInputReportResponse> | undefined,
+): VerificationInputReportItem[] {
+    return (
+        data?.pages.flatMap((page) => page?.data?.verifyResultList ?? []) ?? []
+    );
+}
+
+function getVerifyTypeCountingInfo(
+    data: InfiniteData<VerificationInputReportResponse> | undefined,
+): VerificationInputReportTypeCountingInfo | null {
+    return data?.pages[0]?.data?.verifyTypeCountingInfo ?? null;
+}
+
+function formatReportItemTitle(item: VerificationInputReportItem): string {
+    return item.statsNm?.trim() || item.vrfcTrgtNm?.trim() || item.statsCd;
+}
+
+function formatReportItemRegion(item: VerificationInputReportItem): string {
+    const parts = [item.ctpvNm, item.sggNm].filter(
+        (v): v is string => Boolean(v?.trim()),
+    );
+    return parts.length > 0 ? parts.join(" ") : "-";
+}
+
+function useVerificationReportList(
+    statsYr: string,
+    statsCdQueryKey: string,
+    vrfcMthdCd: VerificationReportTabKey,
+    statsCd: string,
+    enabled: boolean,
+) {
+    return useInfiniteQuery({
+        queryKey: [
+            "verificationInputReport",
+            statsYr,
+            vrfcMthdCd,
+            statsCdQueryKey,
+        ],
+        initialPageParam: 1,
+        queryFn: ({ pageParam }) =>
+            verificationInputReportApi.getVerificationInputReport({
+                statsYr,
+                vrfcMthdCd,
+                page: pageParam,
+                size: PAGE_SIZE,
+                ...(!(statsCd === "" || statsCd === "ALL") && { statsCd }),
+            }),
+        getNextPageParam: getNextVerificationInputReportPage,
+        placeholderData: keepPreviousData,
+        refetchOnWindowFocus: false,
+        // 탭 전환만으로는 재조회하지 않음(명시적 새로고침/조건 변경 시만 조회)
+        staleTime: Infinity,
+        refetchOnMount: false,
+        enabled,
+    });
+}
+
+type VerificationSelectionReportProps = {
+    onClose?: () => void;
+};
+
+const VerificationSelectionReport = ({
+    onClose,
+}: VerificationSelectionReportProps) => {
+    const queryClient = useQueryClient();
+    const menuList = useTabStore((s) => s.menuList);
+    const addTab = useTabStore((s) => s.addTab);
+    const setCurrentMenuInfo = useMenuStore((s) => s.setCurrentMenuInfo);
+    const addTabForGrid = useGridTabStore((s) => s.addTab);
+    const setPendingInputTab = useStatisticsInputFocusStore(
+        (s) => s.setPendingInputTab,
+    );
+    const alert = useAlertStore((s) => s.setMessage);
+    const [activeTab, setActiveTab] = useState<VerificationReportTabKey>("NV");
+    const [statsCd, setStatsCd] = useState<string>("ALL");
+    const [isFullReloading, setIsFullReloading] = useState(false);
+
+    const statsYr = String(dayjs().year() - 1);
+    const statsCdQueryKey =
+        statsCd === "" || statsCd === "ALL" ? "" : statsCd;
+
+    const handleStatsCdChange = useCallback(
+        (nextStatsCd: string) => {
+            setStatsCd(nextStatsCd);
+            setActiveTab("NV");
+            setIsFullReloading(true);
+
+            // 통계항목 변경 시 모든 탭 캐시 제거 후 NV부터 다시 조회
+            void queryClient.removeQueries({
+                queryKey: ["verificationInputReport", statsYr],
+            });
+        },
+        [queryClient, statsYr],
+    );
+
+    const nvQuery = useVerificationReportList(
+        statsYr,
+        statsCdQueryKey,
+        "NV",
+        statsCd,
+        activeTab === "NV",
+    );
+    const imrQuery = useVerificationReportList(
+        statsYr,
+        statsCdQueryKey,
+        "IMR",
+        statsCd,
+        activeTab === "IMR",
+    );
+    const hbQuery = useVerificationReportList(
+        statsYr,
+        statsCdQueryKey,
+        "HB",
+        statsCd,
+        activeTab === "HB",
+    );
+
+    const queryByTab = {
+        NV: nvQuery,
+        IMR: imrQuery,
+        HB: hbQuery,
+    } as const;
+
+    const activeQuery = queryByTab[activeTab];
+    const isRefreshing = activeQuery.isFetching && !activeQuery.isPending;
+    const error = activeQuery.error;
+
+    /** 통계항목 변경·최초 진입: 탭 영역 숨기고 카드 전체 로딩만 표시 */
+    const hideTabsSection =
+        isFullReloading ||
+        (activeTab === "NV" && !nvQuery.data && (nvQuery.isPending || nvQuery.isFetching));
+
+    useEffect(() => {
+        if (!isFullReloading) return;
+        if (nvQuery.isFetching) return;
+        if (nvQuery.isSuccess || nvQuery.isError) {
+            setIsFullReloading(false);
+        }
+    }, [isFullReloading, nvQuery.isFetching, nvQuery.isSuccess, nvQuery.isError]);
+
+    const handleRefresh = useCallback(() => {
+        setStatsCd("ALL");
+        setActiveTab("NV");
+        setIsFullReloading(true);
+        void queryClient.removeQueries({
+            queryKey: ["verificationInputReport", statsYr],
+        });
+    }, [queryClient, statsYr]);
+
+    const listsByTab: Record<VerificationReportTabKey, VerificationInputReportItem[]> = {
+        NV: flattenVerificationInputReportResults(nvQuery.data),
+        IMR: flattenVerificationInputReportResults(imrQuery.data),
+        HB: flattenVerificationInputReportResults(hbQuery.data),
+    };
+
+    const typeCountingInfo =
+        getVerifyTypeCountingInfo(nvQuery.data) ??
+        getVerifyTypeCountingInfo(imrQuery.data) ??
+        getVerifyTypeCountingInfo(hbQuery.data);
+
+    const totalCountByTab: Record<VerificationReportTabKey, number> = {
+        NV: typeCountingInfo?.nvCount ?? listsByTab.NV.length,
+        IMR: typeCountingInfo?.imrCount ?? listsByTab.IMR.length,
+        HB: typeCountingInfo?.hbCount ?? listsByTab.HB.length,
+    };
+
+    const openInputFromStatsCd = useCallback(
+        (item: VerificationInputReportItem) => {
+            const nav = resolveInputPageNavigationFromStatsCd(item.statsCd);
+            if (!nav) {
+                alert(
+                    `입력 화면으로 연결되지 않는 통계코드입니다: ${item.statsCd}`,
+                );
+                return;
+            }
+            if (!menuList) {
+                alert(
+                    "메뉴 정보를 불러오는 중입니다. 잠시 후 다시 시도해 주세요.",
+                );
+                return;
+            }
+            const menu = findMenuItemByUrlPath(menuList, nav.urlPath);
+            if (!menu) {
+                alert(
+                    "해당 입력 메뉴를 찾을 수 없습니다. 메뉴 권한을 확인해 주세요.",
+                );
+                return;
+            }
+            setPendingInputTab(nav.urlPath, nav.tabKey, {
+                statsYr: item.statsYr,
+                sewerBzmnCd: item.sewerBzmnCd,
+                ctpvNm: item.ctpvNm,
+                sggNm: item.sggNm ?? "",
+            });
+            setCurrentMenuInfo(menu);
+            const ok = addTab(menu);
+            if (ok) {
+                addTabForGrid(menu);
+            } else {
+                alert(`최대 추가 할 수 있는 화면 수(10개)를 \n초과 하였습니다.
+            기존 화면을 닫은 후 이용해주세요.`);
+            }
+        },
+        [
+            menuList,
+            addTab,
+            addTabForGrid,
+            setCurrentMenuInfo,
+            setPendingInputTab,
+            alert,
+        ],
+    );
+
+    const handleListScroll = useCallback(
+        (
+            e: React.UIEvent<HTMLDivElement>,
+            hasNextPage: boolean,
+            isFetchingNextPage: boolean,
+            fetchNextPage: () => void,
+        ) => {
+            const el = e.currentTarget;
+            const remaining =
+                el.scrollHeight - el.scrollTop - el.clientHeight;
+            if (remaining > SCROLL_LOAD_THRESHOLD_PX) return;
+            if (hasNextPage && !isFetchingNextPage) {
+                fetchNextPage();
+            }
+        },
+        [],
+    );
+
+    const isTabContentLoading = (tab: VerificationReportTabKey) => {
+        const query = queryByTab[tab];
+        return (
+            activeTab === tab &&
+            !hideTabsSection &&
+            (query.isPending ||
+                (query.isFetching && !query.isFetchingNextPage) ||
+                (!query.data && !query.error))
+        );
+    };
+
+    const renderResultList = (
+        typeCode: VerificationReportTabKey,
+        items: VerificationInputReportItem[],
+        isTabLoading: boolean,
+        hasNextPage: boolean,
+        isFetchingNextPage: boolean,
+        fetchNextPage: () => void,
+    ) => (
+        <div
+            className="min-h-0 flex-1 overflow-y-auto p-2"
+            onScroll={(e) =>
+                handleListScroll(
+                    e,
+                    hasNextPage,
+                    isFetchingNextPage,
+                    fetchNextPage,
+                )
+            }
+        >
+            {isTabLoading ? (
+                <div className="flex h-full min-h-[8rem] items-center justify-center">
+                    <div className="relative size-[5rem]">
+                        <LoadingWithAnimation color="primary" />
+                    </div>
+                </div>
+            ) : items.length === 0 && !isFetchingNextPage ? (
+                <div className="flex h-full min-h-[8rem] items-center justify-center text-lg text-muted-foreground">
+                    항목이 없습니다.
+                </div>
+            ) : (
+                <div className="space-y-2 tracking-tight">
+                    {items.map((item) => (
+                        <div
+                            key={`${typeCode}-${item.vrfcSn}`}
+                            role="button"
+                            tabIndex={0}
+                            className="flex flex-col rounded-sm border border-border p-3 cursor-pointer hover:bg-gray-100"
+                            onClick={() => openInputFromStatsCd(item)}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    openInputFromStatsCd(item);
+                                }
+                            }}
+                        >
+                            <div className="mb-2 flex items-center justify-between">
+                                <span className="font-medium">
+                                    {formatReportItemTitle(item)}
+                                </span>
+                                <Badge
+                                    color={
+                                        TYPE_CODE_COLOR_MAP[item.vrfcMthdCd] ??
+                                        "gray"
+                                    }
+                                    className="text-sm"
+                                >
+                                    {TYPE_CODE_NAME_MAP[item.vrfcMthdCd] ??
+                                        item.vrfcMthdNm}
+                                </Badge>
+                            </div>
+                            <p className="text-lg text-muted-foreground">
+                                {item.rsnExpln}
+                            </p>
+                            <div className="flex justify-between text-lg text-muted-foreground">
+                                <span>{formatReportItemRegion(item)}</span>
+                                <span>
+                                    현재: {item.nowVlCn ?? "-"} / 비교:{" "}
+                                    {item.compVlCn ?? "-"}
+                                </span>
+                            </div>
+                        </div>
+                    ))}
+                    {isFetchingNextPage && (
+                        <div className="flex justify-center py-3">
+                            <div className="relative size-[3rem]">
+                                <LoadingWithAnimation color="primary" />
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+
+    return (
+        <div className="w-1/5 bg-container p-4 !pb-2 flex border-r border-border">
+            <div className="card card-border flex-1 bg-background !px-0 max-h-[1000px] flex flex-col">
+                <div className="border-b border-border flex justify-between">
+                    <div className="flex justify-center items-center text-[2.4rem] ">
+                        <h2 className="font-semibold text-title p-4 pr-1">이상치 선별 보고서</h2>
+                        <span
+                            role="button"
+                            tabIndex={0}
+                            aria-label="새로고침"
+                            className={`text-gray-400 cursor-pointer hover:text-[#2094fa] ${isRefreshing ? "pointer-events-none opacity-50" : ""}`}
+                            onClick={handleRefresh}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    handleRefresh();
+                                }
+                            }}
+                        >
+                            <i className="diveicon di-arrow-reflash" />
+                        </span>
+                    </div>
+                    <span
+                        role="button"
+                        tabIndex={0}
+                        aria-label="닫기"
+                        className="mt-2 mr-4 flex flex-shrink-0 cursor-pointer items-start justify-center text-3xl leading-none hover:text-[#2094fa]"
+                        onClick={() => onClose?.()}
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                onClose?.();
+                            }
+                        }}
+                    >
+                        <i className="ri-close-line" />
+                    </span>
+                </div>
+                <div className="flex items-center gap-2 pt-2.5 px-4">
+                    <Label className="text-label shrink-0">통계항목</Label>
+                    <CodeSelectWithAll
+                        upCd="STITEM"
+                        value={statsCd}
+                        onValueChange={handleStatsCdChange}
+                        placeholder="전체"
+                        className="w-full"
+                    />
+                </div>
+                <div className="card-body p-2.5 flex-1 flex flex-col overflow-hidden relative min-h-0">
+                    {hideTabsSection && (
+                        <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>
+                    )}
+                    {!hideTabsSection && error && (
+                        <div className="absolute inset-0 z-50 [data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center">
+                            데이터를 불러올 수 없습니다.
+                        </div>
+                    )}
+                    {!hideTabsSection && !error && (
+                        <section className="flex min-h-0 flex-1 flex-col">
+                            <Tabs
+                                value={activeTab}
+                                onValueChange={(value) =>
+                                    setActiveTab(value as VerificationReportTabKey)
+                                }
+                                className="flex min-h-0 flex-1 flex-col"
+                                variant="default"
+                            >
+                                <TabsList className="grid w-full grid-cols-3 p-1 shrink-0">
+                                    {VERIFICATION_REPORT_TABS.map((tab) => (
+                                        <TabsTrigger
+                                            key={tab.value}
+                                            value={tab.value}
+                                            className="!px-2 !py-2 text-[1.3rem] whitespace-normal"
+                                        >
+                                            {tab.label} ({totalCountByTab[tab.value]})
+                                        </TabsTrigger>
+                                    ))}
+                                </TabsList>
+                                {VERIFICATION_REPORT_TABS.map((tab) => (
+                                    <TabsContent
+                                        key={tab.value}
+                                        value={tab.value}
+                                        className="mt-0 flex min-h-0 flex-1 flex-col p-0 data-[state=inactive]:hidden"
+                                    >
+                                        {renderResultList(
+                                            tab.value,
+                                            listsByTab[tab.value],
+                                            isTabContentLoading(tab.value),
+                                            queryByTab[tab.value].hasNextPage ?? false,
+                                            queryByTab[tab.value].isFetchingNextPage,
+                                            queryByTab[tab.value].fetchNextPage,
+                                        )}
+                                    </TabsContent>
+                                ))}
+                            </Tabs>
+                        </section>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default VerificationSelectionReport;
diff --git a/apps/st/src/components/statistics/input/ExcretaTreatmentFacilityInp.tsx b/apps/st/src/components/statistics/input/ExcretaTreatmentFacilityInp.tsx
index 94fbb6a3e..560f67edd 100644
--- a/apps/st/src/components/statistics/input/ExcretaTreatmentFacilityInp.tsx
+++ b/apps/st/src/components/statistics/input/ExcretaTreatmentFacilityInp.tsx
@@ -1,80 +1,1078 @@
-import { useState } from "react";
+import {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    type RefObject,
+} from "react";
+
+import { flushSync } from "react-dom";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { ValueType } from "realgrid";
+import type { RealGridReact } from "realgrid-react";
+import { LoadingWithAnimation } from "@common/components";
 
-import SearchForm from "@/components/module/SearchForm";
-import { DataGrid } from "@rsone/components";
-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 AddArticleButton from "@/components/button/AddArticleButton";
+import CancelSubmitButton from "@/components/button/CancelSubmitButton";
 import DeleteArticleButton from "@/components/button/DeleteArticleButton";
+import LastYearDataButton from "@/components/button/LastYearDataButton";
 import NotApplicableCheckButton from "@/components/button/NotApplicableCheckButton";
+import SaveButton from "@/components/button/SaveButton";
+import SubmitButton from "@/components/button/SumitButton";
+import VerificationResultButton from "@/components/button/VerificationResultButton";
+import DataGrid from "@/components/module/DataGrid";
+import { openVerificationResultDialogIfNeeded } from "@/components/module/post-submit-verification-results";
+import SearchForm from "@/components/module/SearchForm";
+import { VerificationResultDialog } from "@/components/module/VerificationResultDialog";
+import { VerificationResultHistoryDialog } from "@/components/module/VerificationResultHistoryDialog";
+import SubmitDailog from "./SubmitDailog";
+import { ExcretaTreatFactInpColumn } from "@/components/util/column/input/ExcretaTreatFactInpColumn";
+import type {
+    CellStyleCallbackParams,
+    CellTooltipCallbackParams,
+    ColumnConfig,
+} from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { doList } from "@/components/util/column/input/DoList";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import { formatCompactYmdForGrid, toCompactYmd } from "@/components/util/grid/ymdFormat";
+import { statisticsInputExcretaTreatmentFacilityApi } from "@/entities/statistics/api/input/statistics-input-excreta-treatment-facility-service";
+import { statisticsInputSewSupplyRateApi } from "@/entities/statistics/api/input/statistics-input-sew-supply-rate-service";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import { isInputPeriodCurrent } from "@/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface";
+import {
+    EXCRETA_TREATMENT_FACILITY_STATS_CD,
+    type ExcretaTreatmentFacilityItem,
+    type ExcretaTreatmentFacilityRequestParams,
+    type ExcretaTreatmentFacilitySaveItem,
+    type ExcretaTreatmentFacilityVerificationResult,
+} from "@/entities/statistics/model/input/statistics-input-excreta-treatment-facility-interface";
+import type { StatisticsInputSubmitInfoFormData } from "@/entities/statistics/model/statistics-input-submit-info-schema";
+import type {
+    ApiResponse,
+    cancelSubmitRequest,
+    ImrStatusResponse,
+    Sgg,
+    SewerageStatusInfo,
+} from "@/entities/statistics/model/statistics-interface";
+import { useAlertStore, useGlobalProgressStore, useStatisticsInputToolbarGroupGate } from "@/shared/lib";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { useAdminStore } from "@/store/admin-store";
 
-import { ExcretaTreatFactInpColumn } from "@/components/util/column/input/ExcretaTreatFactInpColumn"
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
+type GridRowWithVerification = Record<string, string | number> & {
+    verificationResult?: ExcretaTreatmentFacilityVerificationResult;
+};
+
+type TabToolbarSnapshot = {
+    showSaveInToolbar: boolean;
+    showEnterableToolbarButtons: boolean;
+    showActionToolbarCard: boolean;
+};
+
+const computeTabEnterable = (
+    statusInfo: SewerageStatusInfo | null | undefined,
+    periodEnterable: boolean,
+): boolean => {
+    if (statusInfo?.laeSbmsnSttsCd) {
+        if (["2", "3"].includes(statusInfo.laeSbmsnSttsCd)) {
+            return false;
+        }
+        return periodEnterable;
+    }
+    return periodEnterable;
+};
+
+function buildGugunOkForToolbar(values: SearchFormValues | null): boolean {
+    return doList.includes(values?.bsnmCd || "")
+        ? Boolean(values?.gugun && values.gugun !== "ALL")
+        : true;
+}
+
+function computeTabToolbarSnapshot(
+    statusInfo: SewerageStatusInfo | null,
+    hasRowData: boolean,
+    treatAsSearched: boolean,
+    searchContext: SearchFormValues | null,
+    periodEnterable: boolean,
+    isAdminInfo: boolean,
+): TabToolbarSnapshot {
+    const gugunOk = buildGugunOkForToolbar(searchContext);
+    const enterable = computeTabEnterable(statusInfo, periodEnterable);
+    const isSubmitted = statusInfo?.laeSbmsnSttsCd === "2";
+    const showSaveInToolbar = (enterable || isAdminInfo) && gugunOk;
+    const showEnterableToolbarButtons = enterable && gugunOk;
+    const showSubmittedInInputPeriodToolbar =
+        isSubmitted && periodEnterable && gugunOk;
+    const showActionToolbarCard =
+        (hasRowData || treatAsSearched) &&
+        (showSaveInToolbar ||
+            showEnterableToolbarButtons ||
+            showSubmittedInInputPeriodToolbar ||
+            (isSubmitted && isAdminInfo));
+    return { showSaveInToolbar, showEnterableToolbarButtons, showActionToolbarCard };
+}
+
+function buildExcretaTreatmentFacilitySearchParam(
+    values: SearchFormValues,
+    overrides?: { mode?: string },
+): ExcretaTreatmentFacilityRequestParams {
+    const fcltNm = values.fctName?.trim();
+    return {
+        statsYr: values.year,
+        sewerBzmnCd: values.bsnmCd,
+        ctpvNm: values.sido,
+        sggNm: values.gugun === "ALL" ? "" : values.gugun,
+        ...(fcltNm ? { fcltNm } : {}),
+        ...(overrides?.mode ? { mode: overrides.mode } : {}),
+    };
+}
+
+function parseSggListFromResponse(res: ApiResponse<Sgg[]>): Sgg[] {
+    if (res.status !== "success" || res.data == null) return [];
+    return Array.isArray(res.data) ? res.data : [];
+}
+
+function buildSggNmColumn(
+    col: ColumnConfig,
+    canEdit: boolean,
+    sggOptions: Sgg[],
+): ColumnConfig {
+    if (!canEdit) {
+        return { ...col, editable: false as const };
+    }
+    if (sggOptions.length === 0) {
+        return { ...col, editable: true };
+    }
+    const labels = sggOptions.map((s) => s.gugun);
+    return {
+        ...col,
+        editable: true,
+        editor: {
+            type: "dropdown",
+            domainOnly: true,
+            textReadOnly: true,
+            commitOnSelect: true,
+            dropDownWhenClick: true,
+            values: labels,
+            labels,
+        },
+        values: labels,
+        labels,
+        lookupDisplay: true,
+    };
+}
+
+function mapExcretaTreatmentFacilityListToGridRows(
+    list: ExcretaTreatmentFacilityItem[],
+    ctpvNm: string,
+): GridRowWithVerification[] {
+    return list.map((item) => {
+        const row = toGridRows([
+            {
+                ...item,
+                ctpvNm,
+                cmptnStrtYmd: formatCompactYmdForGrid(item.cmptnStrtYmd),
+                oprtngStrtYmd: formatCompactYmdForGrid(item.oprtngStrtYmd),
+            },
+        ])[0] as GridRowWithVerification;
+        if (item.verificationResult) {
+            row.verificationResult = item.verificationResult;
+        }
+        return row;
+    });
+}
+
+function nullableTrimmedString(
+    value: string | number | null | undefined,
+): string | null {
+    const s = String(value ?? "").trim();
+    return s === "" ? null : s;
+}
+
+function toGridNumber(value: string | number | null | undefined): number {
+    const n = Number(value);
+    return Number.isFinite(n) ? n : 0;
+}
+
+function toApiYmd(value: string | number | Date | null | undefined): string {
+    return toCompactYmd(value);
+}
+
+function resolveExcretaTreatmentFacilityAdmdst(
+    row: Record<string, string | number>,
+    sggOptions: Sgg[],
+): { admdstCd: string; admdstNm: string } {
+    const existingCd = String(row.admdstCd ?? "").trim();
+    const existingNm = String(row.admdstNm ?? "").trim();
+    if (existingCd && existingNm) {
+        return { admdstCd: existingCd, admdstNm: existingNm };
+    }
+    const sggNm = String(row.sggNm ?? "").trim();
+    const matched = sggOptions.find((s) => s.gugun === sggNm);
+    if (matched) {
+        return { admdstCd: matched.bsnmCd, admdstNm: matched.gugun };
+    }
+    return { admdstCd: existingCd, admdstNm: existingNm || sggNm };
+}
+
+/** 그리드 행 → ST00070001 저장/삭제 API 항목 */
+function buildExcretaTreatmentFacilitySaveItem(
+    row: Record<string, string | number>,
+    sggOptions: Sgg[] = [],
+): ExcretaTreatmentFacilitySaveItem {
+    const { admdstCd, admdstNm } = resolveExcretaTreatmentFacilityAdmdst(
+        row,
+        sggOptions,
+    );
+    return {
+        admdstCd,
+        admdstNm,
+        fcltSn: String(row.fcltSn ?? "").trim(),
+        fcltNm: String(row.fcltNm ?? ""),
+        fcltPstnCn: String(row.fcltPstnCn ?? ""),
+        telNo: String(row.telNo ?? ""),
+        cmptnStrtYmd: toApiYmd(row.cmptnStrtYmd),
+        oprtngStrtYmd: toApiYmd(row.oprtngStrtYmd),
+        wholPjtcoAmt: toGridNumber(row.wholPjtcoAmt),
+        prcsFcltCpct: toGridNumber(row.prcsFcltCpct),
+        cpct: toGridNumber(row.cpct),
+        oprtngDayCnt: toGridNumber(row.oprtngDayCnt),
+        prcsMthdExpln: String(row.prcsMthdExpln ?? ""),
+        linkTmplntCn: String(row.linkTmplntCn ?? ""),
+        linkPrcsQnt: toGridNumber(row.linkPrcsQnt),
+        inflwBodWqVl: toGridNumber(row.inflwBodWqVl),
+        inflwTocWqVl: toGridNumber(row.inflwTocWqVl),
+        inflwSsWqVl: toGridNumber(row.inflwSsWqVl),
+        inflwTnWqVl: toGridNumber(row.inflwTnWqVl),
+        inflwTpWqVl: toGridNumber(row.inflwTpWqVl),
+        inflwClfgCnt: toGridNumber(row.inflwClfgCnt),
+        dschgBodWqVl: toGridNumber(row.dschgBodWqVl),
+        dschgTocWqVl: toGridNumber(row.dschgTocWqVl),
+        dschgSsWqVl: toGridNumber(row.dschgSsWqVl),
+        dschgTnWqVl: toGridNumber(row.dschgTnWqVl),
+        dschgTpWqVl: toGridNumber(row.dschgTpWqVl),
+        dschgClfgCnt: toGridNumber(row.dschgClfgCnt),
+        wtsysNm: String(row.wtsysNm ?? ""),
+        trbtrNm: String(row.trbtrNm ?? ""),
+        msirbCn: String(row.msirbCn ?? ""),
+        ssirbCn: String(row.ssirbCn ?? ""),
+        operMthdCdCn: String(row.operMthdCdCn ?? ""),
+        wholNope: toGridNumber(row.wholNope),
+        sftyAcdntEvntcsCnt: toGridNumber(row.sftyAcdntEvntcsCnt),
+        rmrk: nullableTrimmedString(row.rmrk),
+    };
+}
+
+const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+async function waitForImrJobCompleted(
+    jobId: string,
+    getStatus: (id: string) => Promise<ImrStatusResponse>,
+    options?: {
+        pollIntervalMs?: number;
+        maxAttempts?: number;
+        onProgress?: (jobProgress: number) => void;
+    },
+): Promise<void> {
+    const pollIntervalMs = options?.pollIntervalMs ?? 2000;
+    const maxAttempts = options?.maxAttempts ?? 150;
+    for (let i = 0; i < maxAttempts; i++) {
+        const res = await getStatus(jobId);
+        options?.onProgress?.(Math.max(0, Math.min(100, Number(res.job_prog) || 0)));
+        if (res.status === "COMPLETED" && Number(res.job_prog) === 100) return;
+        if (res.status === "FAILED" || res.status === "ERROR" || res.status === "CANCELLED") {
+            throw new Error(res.error_msg || `IMR 검증이 ${res.status} 상태로 종료되었습니다.`);
+        }
+        await sleep(pollIntervalMs);
+    }
+    throw new Error("IMR 검증 완료 대기 시간이 초과되었습니다.");
+}
+
+function createEmptyExcretaTreatmentFacilityRow(
+    ctpvNm: string,
+    sggNm = "",
+): GridRowWithVerification {
+    const row: GridRowWithVerification = { ctpvNm, sggNm };
+    for (const col of ExcretaTreatFactInpColumn.columns) {
+        const fieldName = col.fieldName;
+        if (!fieldName || fieldName === "ctpvNm" || fieldName === "sggNm") continue;
+        row[fieldName] = col.valueType === ValueType.NUMBER ? 0 : "";
+    }
+    return row;
+}
 
 // 하수도 통계 관리 > 07. 분뇨처리시설
 const ExcretaTreatmentFacilityInp = () => {
-    
-    const submitExceptionFunc = () => {
-        console.log('submit exception');
-        // 예외제출 로직
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const { confirm } = useConfirm();
+    const { isAdminInfo } = useAdminStore();
+    const toolbarGroupAllowed = useStatisticsInputToolbarGroupGate();
+    const showGlobalProgress = useGlobalProgressStore((state) => state.show);
+    const setGlobalProgress = useGlobalProgressStore((state) => state.setProgress);
+    const setGlobalProgressLabel = useGlobalProgressStore((state) => state.setLabel);
+    const hideGlobalProgress = useGlobalProgressStore((state) => state.hide);
+
+    const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
+    const [isNotApplicable, setIsNotApplicable] = useState(false);
+    const [searchValues, setSearchValues] = useState<SearchFormValues | null>(null);
+    const [lastSearchedValues, setLastSearchedValues] =
+        useState<SearchFormValues | null>(null);
+    const [hasSearched, setHasSearched] = useState(false);
+    const [statusInfo, setStatusInfo] = useState<SewerageStatusInfo | null>(null);
+    const [statsCd, setStatsCd] = useState("");
+    const [inputPeriodEnterable, setInputPeriodEnterable] = useState(true);
+    const [isLoading, setIsLoading] = useState(false);
+    const [sggOptions, setSggOptions] = useState<Sgg[]>([]);
+    const [columnGuidesByEngCol, setColumnGuidesByEngCol] = useState<
+        Record<string, string>
+    >({});
+    const [verificationHistoryOpen, setVerificationHistoryOpen] = useState(false);
+    const [verificationResultDialogOpen, setVerificationResultDialogOpen] =
+        useState(false);
+    const [showSubmitDialog, setShowSubmitDialog] = useState(false);
+    const [deleteList, setDeleteList] = useState<Record<string, string | number>[]>([]);
+
+    const gridRef = useRef<RealGridReact | null>(null);
+    const gridGetRowsRef =
+        useRef<(() => Record<string, string | number>[]) | null>(null);
+    const sggOptionsSidoRef = useRef<string | null>(null);
+    const [searchLoaded, setSearchLoaded] = useState(false);
+
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            try {
+                const res = await statisticsApi.getColumnGuides(
+                    EXCRETA_TREATMENT_FACILITY_STATS_CD,
+                );
+                if (cancelled) return;
+                if (res.status !== "success" || !Array.isArray(res.data)) {
+                    setColumnGuidesByEngCol({});
+                    return;
+                }
+                const next: Record<string, string> = {};
+                for (const item of res.data) {
+                    const key = item.engColNm?.trim();
+                    const guide = item.columnGuide?.trim();
+                    if (key && guide) next[key] = guide;
+                }
+                setColumnGuidesByEngCol(next);
+            } catch {
+                if (!cancelled) setColumnGuidesByEngCol({});
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
+    const loadSggOptions = useCallback(async (sido: string): Promise<Sgg[]> => {
+        if (!sido || sido === "ALL") {
+            setSggOptions([]);
+            return [];
+        }
+        try {
+            const res = await statisticsApi.getSggAllList(sido);
+            const list = parseSggListFromResponse(res);
+            setSggOptions(list);
+            return list;
+        } catch {
+            setSggOptions([]);
+            return [];
+        }
+    }, []);
+
+    const columnInfo = useMemo(() => {
+        const enterable =
+            computeTabEnterable(statusInfo, inputPeriodEnterable) || isAdminInfo;
+        const rawColumns = ExcretaTreatFactInpColumn.columns ?? [];
+        const base = enterable
+            ? rawColumns
+            : rawColumns.map((col) => ({ ...col, editable: false as const }));
+
+        const columns = base
+            .map((col: ColumnConfig) => {
+                if (col.fieldName === "ctpvNm") {
+                    return { ...col, editable: false as const };
+                }
+                if (col.fieldName === "sggNm" && enterable) {
+                    return buildSggNmColumn(col, true, sggOptions);
+                }
+                return col;
+            })
+            .map((col) => {
+                const guide = columnGuidesByEngCol[col.fieldName]?.trim();
+                return guide ? { ...col, tooltip: guide } : col;
+            });
+
+        return {
+            columns,
+            columnLayout: ExcretaTreatFactInpColumn.columnLayout ?? [],
+        };
+    }, [statusInfo, inputPeriodEnterable, isAdminInfo, sggOptions, columnGuidesByEngCol]);
+
+    const canEditGrid =
+        computeTabEnterable(statusInfo, inputPeriodEnterable) || isAdminInfo;
+
+    const getCurrentRows = (): Record<string, string | number>[] =>
+        gridGetRowsRef.current?.() ?? rowData;
+
+    const commitGrid = () => {
+        const gridView = gridRef.current?.gridView as
+            | { commit?: (force?: boolean) => void; cancel?: () => void }
+            | undefined;
+        try {
+            gridView?.commit?.(true);
+        } catch {
+            gridView?.cancel?.();
+        }
     };
 
-    const getLastYearDataFunc = () => {
-        console.log('get last year data');
-        // 지난연도 데이터 가져오기 로직
+    const fetchExcretaTreatmentFacilityList = async (
+        values: SearchFormValues,
+        overrides?: { mode?: string },
+    ): Promise<boolean> => {
+        const response =
+            await statisticsInputExcretaTreatmentFacilityApi.getExcretaTreatmentFacilityList(
+                buildExcretaTreatmentFacilitySearchParam(values, overrides),
+            );
+
+        if (response.status !== "success" || !response.data) {
+            alert(response.message ?? "데이터 조회 중 오류가 발생했습니다.");
+            setSearchLoaded(false);
+            return false;
+        }
+
+        const {
+            commonInfo,
+            statusInfo: nextStatusInfo,
+            excretaTreatmentFacilityList,
+        } = response.data;
+        const list = excretaTreatmentFacilityList ?? [];
+
+        setRowData(mapExcretaTreatmentFacilityListToGridRows(list, commonInfo.ctpvNm));
+        setStatusInfo(nextStatusInfo);
+        setStatsCd(commonInfo.statsCd);
+        setIsNotApplicable(false);
+        setSearchLoaded(true);
+        return true;
     };
 
-    const submitFunc = () => {
-        console.log('submit');
-        // 제출 로직
+    const handleSearch = async (values: SearchFormValues) => {
+        if (!values.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+
+        try {
+            const periodResponse = await statisticsInputSewSupplyRateApi.checkInputPeriod(
+                values.year || "",
+            );
+            if (periodResponse.status !== "success") {
+                alert(periodResponse.message);
+                return;
+            }
+            const periods = Array.isArray(periodResponse.data)
+                ? periodResponse.data
+                : [];
+            setInputPeriodEnterable(isInputPeriodCurrent(periods));
+
+            setIsLoading(true);
+            setHasSearched(true);
+            setLastSearchedValues(values);
+
+            const loadedSgg = await loadSggOptions(values.sido);
+            sggOptionsSidoRef.current = values.sido;
+            if (loadedSgg.length === 0) {
+                alert("시군구 목록을 불러오지 못했습니다.");
+                setSearchLoaded(false);
+                return;
+            }
+
+            await fetchExcretaTreatmentFacilityList(values);
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            setRowData([]);
+            setStatusInfo(null);
+            setSearchLoaded(false);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleReset = () => {
+        setDeleteList([]);
+        setRowData([]);
+        setLastSearchedValues(null);
+        setHasSearched(false);
+        setStatusInfo(null);
+        setStatsCd("");
+        setIsNotApplicable(false);
+        setInputPeriodEnterable(true);
+        setSggOptions([]);
+        sggOptionsSidoRef.current = null;
+        setSearchLoaded(false);
+    };
+
+    const getLastYearDataFunc = async () => {
+        const values = lastSearchedValues ?? searchValues;
+        if (!values?.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+        if (!hasSearched || !searchLoaded) {
+            alert("먼저 데이터를 조회해주세요.");
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+            await fetchExcretaTreatmentFacilityList(values, { mode: "PRE" });
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const openVerificationHistoryDialog = () => {
+        const ctx = lastSearchedValues ?? searchValues;
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !statsCd) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+        setVerificationHistoryOpen(true);
+    };
+
+    const cnacelSubmitFunc = () => {
+        void (async () => {
+            try {
+                if (!(await confirm("제출된 내용을 취소하시겠습니까?"))) return;
+
+                if (!lastSearchedValues) {
+                    alert("먼저 조회를 진행해주세요.");
+                    return;
+                }
+
+                const userInfo = await getUserInfo();
+                const requestData: cancelSubmitRequest = {
+                    sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+                    ctpvNm: lastSearchedValues.sido ?? "",
+                    sggNm:
+                        lastSearchedValues.gugun === "ALL"
+                            ? ""
+                            : (lastSearchedValues.gugun ?? ""),
+                    statsYr: lastSearchedValues.year ?? "",
+                    mdfrId: userInfo.userUnqId,
+                    statsCd: statsCd || EXCRETA_TREATMENT_FACILITY_STATS_CD,
+                };
+
+                const response = await statisticsApi.cancelSubmit(requestData);
+
+                if (response.status === "success") {
+                    setIsLoading(true);
+                    await fetchExcretaTreatmentFacilityList(lastSearchedValues);
+                    alert("제출 취소되었습니다.");
+                } else {
+                    alert(response.message ?? "제출 취소 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("제출 취소 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        })();
     };
 
     const saveFunc = () => {
-        console.log('save');
-        // 저장 로직
+        void (async () => {
+            if (!lastSearchedValues) {
+                alert("먼저 조회를 진행해주세요.");
+                return;
+            }
+            if (!buildGugunOkForToolbar(lastSearchedValues)) {
+                alert("시군구를 선택해주세요.");
+                return;
+            }
+            if (!(await confirm("저장 하시겠습니까?"))) return;
+
+            commitGrid();
+            const noApplicable = isNotApplicable;
+            const currentData = getCurrentRows();
+            const saveList = noApplicable
+                ? []
+                : currentData.map((row) =>
+                      buildExcretaTreatmentFacilitySaveItem(row, sggOptions),
+                  );
+            const deleteListForSave = deleteList
+                .filter((row) => String(row.fcltSn ?? "").trim() !== "")
+                .map((row) => buildExcretaTreatmentFacilitySaveItem(row, sggOptions));
+
+            if (!noApplicable && saveList.length === 0) {
+                alert("해당사항 없음을 체크해주세요.");
+                return;
+            }
+
+            try {
+                setIsLoading(true);
+                const userInfo = await getUserInfo();
+                const response =
+                    await statisticsInputExcretaTreatmentFacilityApi.saveExcretaTreatmentFacilityList(
+                        {
+                            statsYr: lastSearchedValues.year ?? "",
+                            ctpvNm: lastSearchedValues.sido ?? "",
+                            sggNm:
+                                lastSearchedValues.gugun === "ALL"
+                                    ? ""
+                                    : (lastSearchedValues.gugun ?? ""),
+                            sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+                            userId: userInfo.userUnqId,
+                            ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
+                            noApplicable,
+                            saveList,
+                            deleteList: deleteListForSave,
+                        },
+                    );
+
+                if (response.status === "success") {
+                    setDeleteList([]);
+                    await fetchExcretaTreatmentFacilityList(lastSearchedValues);
+                    alert("저장되었습니다.");
+                } else {
+                    alert(response.message ?? "저장 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("저장 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        })();
     };
 
-    const addArticleFunc = () => {
-        console.log('save');
-        // 항목 추가 로직
+    const submitFunc = () => {
+        void (async () => {
+            try {
+                if (!lastSearchedValues) {
+                    alert("먼저 조회를 진행해주세요.");
+                    return;
+                }
+                if (!buildGugunOkForToolbar(lastSearchedValues)) {
+                    alert("시군구를 선택해주세요.");
+                    return;
+                }
+
+                const noApplicable = isNotApplicable;
+                const currentData = getCurrentRows();
+                if (!noApplicable && currentData.length === 0) {
+                    alert("해당사항 없음을 체크해주세요.");
+                    return;
+                }
+
+                if (await confirm("제출 하시겠습니까?")) {
+                    setShowSubmitDialog(true);
+                }
+            } catch {
+                alert("제출 중 오류가 발생했습니다.");
+            }
+        })();
+    };
+
+    const executeSubmit = async (submitInfo: StatisticsInputSubmitInfoFormData) => {
+        if (!lastSearchedValues) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+        if (!buildGugunOkForToolbar(lastSearchedValues)) {
+            alert("시군구를 선택해주세요.");
+            return;
+        }
+
+        commitGrid();
+        const noApplicable = isNotApplicable;
+        const currentData = getCurrentRows();
+        const submitList = noApplicable
+            ? []
+            : currentData.map((row) =>
+                  buildExcretaTreatmentFacilitySaveItem(row, sggOptions),
+              );
+        const deleteListForSubmit = deleteList
+            .filter((row) => String(row.fcltSn ?? "").trim() !== "")
+            .map((row) => buildExcretaTreatmentFacilitySaveItem(row, sggOptions));
+
+        if (!noApplicable && submitList.length === 0) {
+            alert("해당사항 없음을 체크해주세요.");
+            return;
+        }
+
+        const statsCdForSubmit = statsCd || EXCRETA_TREATMENT_FACILITY_STATS_CD;
+        const verificationQuery = {
+            sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+            ctpvNm: lastSearchedValues.sido ?? "",
+            sggNm:
+                lastSearchedValues.gugun === "ALL"
+                    ? ""
+                    : (lastSearchedValues.gugun ?? ""),
+            statsYr: lastSearchedValues.year ?? "",
+            statsCd: statsCdForSubmit,
+        };
+
+        const reloadAfterSubmit = async () => {
+            setDeleteList([]);
+            await fetchExcretaTreatmentFacilityList(lastSearchedValues);
+        };
+
+        try {
+            showGlobalProgress({ label: "서버에 요청 중...", progress: 0 });
+            const userInfo = await getUserInfo();
+            setGlobalProgressLabel("일반 검증 진행 중...");
+            const response =
+                await statisticsInputExcretaTreatmentFacilityApi.submitExcretaTreatmentFacilityList(
+                    {
+                        statsYr: lastSearchedValues.year ?? "",
+                        ctpvNm: lastSearchedValues.sido ?? "",
+                        sggNm:
+                            lastSearchedValues.gugun === "ALL"
+                                ? ""
+                                : (lastSearchedValues.gugun ?? ""),
+                        sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+                        userId: userInfo.userUnqId,
+                        laePicNm: submitInfo.laePicNm,
+                        laePicTelNo: submitInfo.laePicTelNo,
+                        laeKbrdrDeptNm: submitInfo.laeKbrdrDeptNm,
+                        laeKbrdrJbgdNm: submitInfo.laeKbrdrJbgdNm,
+                        laeIdfrNm: submitInfo.laeIdfrNm,
+                        laeIdfrTelNo: submitInfo.laeIdfrTelNo,
+                        laeIdfrDeptNm: submitInfo.laeIdfrDeptNm,
+                        laeIdfrJbgdNm: submitInfo.laeIdfrJbgdNm,
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
+                        noApplicable,
+                        submitList,
+                        deleteList: deleteListForSubmit,
+                    },
+                );
+
+            if (response.status !== "success") {
+                alert(response.message ?? "데이터 제출 중 오류가 발생했습니다.");
+                return;
+            }
+
+            const finalStatus = response.data?.finalStatus;
+            const nvpassed = response.data?.nvpassed;
+
+            if (finalStatus === "5") {
+                setGlobalProgress(50);
+                setGlobalProgressLabel("IMR 검증 진행 중...");
+                const imrParam = {
+                    user_id: userInfo.userUnqId,
+                    sewer_bzmn_cd: lastSearchedValues.bsnmCd ?? "",
+                    stats_cd: statsCdForSubmit,
+                    stats_yr: lastSearchedValues.year ?? "",
+                    lae_sbmsn_stts_cd:
+                        statusInfo?.laeSbmsnSttsCd === "4" ? "4" : "2",
+                    gen_verify_stts_cd: nvpassed ? "1" : "2",
+                };
+
+                try {
+                    const imrResponse = await statisticsApi.callImrService(imrParam);
+                    if (imrResponse.job_id) {
+                        await waitForImrJobCompleted(
+                            imrResponse.job_id,
+                            (id) => statisticsApi.getImrStatus(id),
+                            {
+                                onProgress: (jobProgress) => {
+                                    setGlobalProgress(50 + Math.round(jobProgress / 2));
+                                },
+                            },
+                        );
+                    }
+                    setGlobalProgress(100);
+                    await reloadAfterSubmit();
+                    await openVerificationResultDialogIfNeeded(
+                        verificationQuery,
+                        setVerificationResultDialogOpen,
+                        { notify: alert },
+                    );
+                } catch (e) {
+                    await reloadAfterSubmit();
+                    await openVerificationResultDialogIfNeeded(
+                        verificationQuery,
+                        setVerificationResultDialogOpen,
+                        { notify: alert, notifySubmitComplete: false },
+                    );
+                    const msg =
+                        e instanceof Error && e.message
+                            ? e.message
+                            : "IMR 검증 중 오류가 발생했습니다.\n관리자에게 문의하세요.";
+                    alert(msg);
+                }
+            } else {
+                setGlobalProgress(100);
+                await reloadAfterSubmit();
+                await openVerificationResultDialogIfNeeded(
+                    verificationQuery,
+                    setVerificationResultDialogOpen,
+                    { notify: alert },
+                );
+            }
+        } catch {
+            alert("데이터 제출 중 오류가 발생했습니다.");
+        } finally {
+            hideGlobalProgress();
+        }
+    };
+
+    const addArticleFunc = async () => {
+        const ctx = lastSearchedValues ?? searchValues;
+        if (!hasSearched || !ctx?.sido || ctx.sido === "ALL") {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+
+        const sggNm = ctx.gugun && ctx.gugun !== "ALL" ? ctx.gugun : "";
+
+        let list = sggOptions;
+        if (sggOptionsSidoRef.current !== ctx.sido || list.length === 0) {
+            list = await loadSggOptions(ctx.sido);
+            sggOptionsSidoRef.current = ctx.sido;
+        }
+        if (list.length === 0) {
+            alert("시군구 목록을 불러오지 못했습니다.");
+            return;
+        }
+
+        commitGrid();
+        const currentRows = getCurrentRows();
+        const newRow = createEmptyExcretaTreatmentFacilityRow(ctx.sido, sggNm);
+
+        flushSync(() => {
+            setSggOptions(list);
+            setRowData([...currentRows, newRow]);
+        });
     };
 
     const deleteArticleFunc = () => {
-        console.log('save');
-        // 항목 제외 로직
+        commitGrid();
+        const currentRows = getCurrentRows();
+        if (currentRows.length === 0) {
+            alert("삭제할 데이터가 없습니다.");
+            return;
+        }
+
+        const gridView = gridRef.current?.gridView as
+            | {
+                  getCheckedRows?: (refresh?: boolean) => number[];
+                  getCheckedItems?: (refresh?: boolean) => number[];
+              }
+            | undefined;
+
+        const checkedIndexes =
+            gridView?.getCheckedRows?.(false) ??
+            gridView?.getCheckedItems?.(false) ??
+            [];
+
+        if (checkedIndexes.length === 0) {
+            alert("삭제할 항목을 선택해주세요.");
+            return;
+        }
+
+        const indexSet = new Set(
+            checkedIndexes.filter(
+                (idx) => Number.isInteger(idx) && idx >= 0 && idx < currentRows.length,
+            ),
+        );
+        const removedRows = currentRows.filter((_, idx) => indexSet.has(idx));
+        if (removedRows.length === 0) {
+            alert("삭제할 항목을 선택해주세요.");
+            return;
+        }
+
+        setDeleteList((prev) => [...prev, ...removedRows]);
+        setRowData(currentRows.filter((_, idx) => !indexSet.has(idx)));
     };
-    
-    const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
-    const [isNotApplicable, setIsNotApplicable] = useState(false);
+
+    const verificationCellStyle = ({
+        fieldName,
+        row,
+    }: CellStyleCallbackParams): string | undefined => {
+        const verification = (row as GridRowWithVerification).verificationResult;
+        if (!verification) return;
+        const errors = verification[fieldName];
+        if (Array.isArray(errors) && errors.length > 0) {
+            const hasImr = errors.some((e) => e.vrfcCd === "IMR" || e.vrfcCd === "HB");
+            return hasImr ? "rg-cell-verify-error-imr" : "rg-cell-verify-error";
+        }
+    };
+
+    const verificationCellTooltip = ({
+        fieldName,
+        row,
+    }: CellTooltipCallbackParams): string | undefined => {
+        const verification = (row as GridRowWithVerification).verificationResult;
+        if (!verification) return;
+        const errors = verification[fieldName];
+        if (Array.isArray(errors) && errors.length > 0) {
+            return errors
+                .map((e) => {
+                    const prefix =
+                        e.vrfcCd === "IMR"
+                            ? "IMR검증 - "
+                            : e.vrfcCd === "NV"
+                              ? "일반검증 - "
+                              : "HB검증 -";
+                    return `${prefix}${e.rsnExpln}
+(검증 기준값: ${e.compVlCn} / 현재 입력값: ${e.nowVlCn})`;
+                })
+                .filter(Boolean)
+                .join("\n");
+        }
+    };
+
+    const searchContextForToolbar = lastSearchedValues ?? searchValues;
+    const toolbarSnapshot = computeTabToolbarSnapshot(
+        statusInfo,
+        rowData.length > 0,
+        hasSearched,
+        searchContextForToolbar,
+        inputPeriodEnterable,
+        isAdminInfo,
+    );
+
+    const showSaveInToolbar =
+        toolbarSnapshot.showSaveInToolbar && toolbarGroupAllowed;
+    const showEnterableToolbarButtons =
+        toolbarSnapshot.showEnterableToolbarButtons && toolbarGroupAllowed;
+    const showActionToolbarCard =
+        toolbarSnapshot.showActionToolbarCard && toolbarGroupAllowed;
+    const showArticleToolbarCard =
+        hasSearched &&
+        toolbarGroupAllowed &&
+        (showSaveInToolbar || showEnterableToolbarButtons);
+    const showNotApplicable =
+        searchLoaded &&
+        hasSearched &&
+        rowData.length === 0 &&
+        computeTabEnterable(statusInfo, inputPeriodEnterable);
+
+    const tabEnterableForGrid =
+        computeTabEnterable(statusInfo, inputPeriodEnterable) || isAdminInfo;
+    const gugunOk = buildGugunOkForToolbar(lastSearchedValues);
+
+    const verificationQueryContext = (() => {
+        const ctx = lastSearchedValues ?? searchValues;
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !statsCd) return null;
+        return {
+            sewerBzmnCd: ctx.bsnmCd,
+            ctpvNm: ctx.sido,
+            sggNm: ctx.gugun === "ALL" ? "" : (ctx.gugun ?? ""),
+            statsYr: ctx.year,
+            statsCd,
+        };
+    })();
 
     return (
         <>
-            <SearchForm fctName={true} />
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <SubmitExceptionButton SubmitExceptionFunc={submitExceptionFunc} />
-                    <LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
-                    <SaveButton saveFunc={saveFunc} />
-                    <SubmitButton submitFunc={submitFunc} />
-                </div>
+            <div className="relative">
+                <SearchForm
+                    fctName={true}
+                    onSubmit={handleSearch}
+                    onReset={handleReset}
+                    onValuesChange={setSearchValues}
+                />
+                {showActionToolbarCard && (
+                    <div className="card !py-0">
+                        <div className="m-[0.6rem] flex items-center justify-end gap-[0.6rem]">
+                            <VerificationResultButton
+                                VerificationResultButtonFunc={openVerificationHistoryDialog}
+                            />
+                            {showEnterableToolbarButtons && (
+                                <>
+                                    <LastYearDataButton
+                                        getLastYearDataFunc={() => void getLastYearDataFunc()}
+                                    />
+                                    <SubmitButton submitFunc={submitFunc} />
+                                </>
+                            )}
+                            {statusInfo?.laeSbmsnSttsCd === "2" && (
+                                <CancelSubmitButton cnacelSubmitFunc={cnacelSubmitFunc} />
+                            )}
+                            {showSaveInToolbar && <SaveButton saveFunc={saveFunc} />}
+                        </div>
+                    </div>
+                )}
+                {showArticleToolbarCard && (
+                    <div className="card !py-0">
+                        <div className="m-[0.6rem] flex items-center justify-end gap-[0.6rem]">
+                            {showNotApplicable && (
+                                <NotApplicableCheckButton
+                                    isCheck={isNotApplicable}
+                                    setIsCheck={setIsNotApplicable}
+                                />
+                            )}
+                            <AddArticleButton addArticleFunc={addArticleFunc} />
+                            <DeleteArticleButton deleteArticleFunc={deleteArticleFunc} />
+                        </div>
+                    </div>
+                )}
+                {isLoading && (
+                    <div className="absolute inset-0 z-50 flex items-center justify-center rounded-lg p-10 [data-theme='black']:bg-transparent">
+                        <div className="relative size-[5rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
+                    </div>
+                )}
+                <DataGrid
+                    key={canEditGrid ? "enterable" : "readonly"}
+                    getGridRef={gridRef as RefObject<RealGridReact | null>}
+                    columnInfo={columnInfo}
+                    rowStartNum={ExcretaTreatFactInpColumn.rowStartNum}
+                    fixedColumns={ExcretaTreatFactInpColumn.fixedColumns}
+                    rowData={rowData}
+                    setRowData={setRowData}
+                    getGridDataRef={gridGetRowsRef}
+                    showHeaderCheckbox
+                    statusInfo={statusInfo}
+                    isExcelImport={
+                        searchLoaded && tabEnterableForGrid && gugunOk
+                    }
+                    cellStyleCallback={verificationCellStyle}
+                    cellTooltipCallback={verificationCellTooltip}
+                />
             </div>
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <NotApplicableCheckButton isCheck={isNotApplicable} setIsCheck={setIsNotApplicable} />
-                    <AddArticleButton addArticleFunc={addArticleFunc} />
-                    <DeleteArticleButton deleteArticleFunc={deleteArticleFunc} />
-                </div>
-            </div>
-            <DataGrid 
-                columnInfo={ExcretaTreatFactInpColumn} 
-                rowStartNum={2} 
-                fixedColumns={2}
-                rowData={rowData} 
-                setRowData={setRowData} 
+            <VerificationResultHistoryDialog
+                open={verificationHistoryOpen}
+                onOpenChange={setVerificationHistoryOpen}
+                queryContext={verificationQueryContext}
+                onExceptionResetSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values) return;
+                    await fetchExcretaTreatmentFacilityList(values);
+                }}
             />
+            <VerificationResultDialog
+                open={verificationResultDialogOpen}
+                onOpenChange={setVerificationResultDialogOpen}
+                queryContext={verificationQueryContext}
+                onExceptionSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values) return;
+                    await fetchExcretaTreatmentFacilityList(values);
+                }}
+            />
+            <SubmitDailog
+                open={showSubmitDialog}
+                onOpenChange={setShowSubmitDialog}
+                statusInfo={statusInfo}
+                onConfirm={executeSubmit}
+                isLoading={isLoading}
+            />
+            <ConfirmDialog isOpen={false} />
         </>
     );
 };
 
-export default ExcretaTreatmentFacilityInp;
\ No newline at end of file
+export default ExcretaTreatmentFacilityInp;
diff --git a/apps/st/src/components/statistics/input/MainFacilityMappingSaveDialog.tsx b/apps/st/src/components/statistics/input/MainFacilityMappingSaveDialog.tsx
new file mode 100644
index 000000000..d9f9de404
--- /dev/null
+++ b/apps/st/src/components/statistics/input/MainFacilityMappingSaveDialog.tsx
@@ -0,0 +1,260 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import {
+    Button,
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Input,
+    InputDatePicker,
+    Label,
+} from "@common/components";
+
+export interface MainFacilityMappingSaveDialogValues {
+    prxyBzentyNmCn: string;
+    /** 위탁비용(백만원/년) */
+    cnsgnCstVl: number;
+    wholNope: number;
+    /** YYYYMMDD~YYYYMMDD */
+    prxyCtrtCn: string;
+}
+
+export interface MainFacilityMappingSaveDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    initialPrxyBzentyNmCn: string;
+    /** 위탁비용(백만원/년) 초기값 */
+    initialCnsgnCstVl: number;
+    initialWholNope: number;
+    /** 위탁계약기간 초기값 (YYYYMMDD~YYYYMMDD) */
+    initialPrxyCtrtCn: string;
+    onConfirm?: (values: MainFacilityMappingSaveDialogValues) => void | Promise<void>;
+}
+
+function formatDateToYmd(d: Date | undefined): string | null {
+    if (!d || Number.isNaN(d.getTime())) return null;
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}${m}${day}`;
+}
+
+/** `YYYYMMDD` → `Date` (로컬 자정) */
+function parseYmdToDate(ymd: string): Date | undefined {
+    const s = ymd.replace(/\D/g, "");
+    if (s.length !== 8) return undefined;
+    const y = Number(s.slice(0, 4));
+    const mo = Number(s.slice(4, 6)) - 1;
+    const day = Number(s.slice(6, 8));
+    const d = new Date(y, mo, day);
+    if (d.getFullYear() !== y || d.getMonth() !== mo || d.getDate() !== day) return undefined;
+    return d;
+}
+
+function parseInitialPrxyCtrtCnToDates(initial: string): { start: Date | undefined; end: Date | undefined } {
+    const t = initial.trim();
+    if (!/^\d{8}~\d{8}$/.test(t)) {
+        return { start: undefined, end: undefined };
+    }
+    const start = parseYmdToDate(t.slice(0, 8));
+    const end = parseYmdToDate(t.slice(9, 17));
+    return { start, end };
+}
+
+function validateContractRange(start: Date | undefined, end: Date | undefined): string | null {
+    const startYmd = formatDateToYmd(start);
+    const endYmd = formatDateToYmd(end);
+    if (!startYmd || !endYmd) {
+        return "시작일과 종료일을 선택해 주세요.";
+    }
+    if (startYmd > endYmd) {
+        return "시작일이 종료일보다 늦을 수 없습니다.";
+    }
+    return null;
+}
+
+export function MainFacilityMappingSaveDialog({
+    open,
+    onOpenChange,
+    initialPrxyBzentyNmCn,
+    initialCnsgnCstVl,
+    initialWholNope,
+    initialPrxyCtrtCn,
+    onConfirm,
+}: MainFacilityMappingSaveDialogProps) {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const [prxyBzentyNmCn, setPrxyBzentyNmCn] = useState("");
+    const [cnsgnCstInput, setCnsgnCstInput] = useState("");
+    const [wholNopeInput, setWholNopeInput] = useState("");
+    const [prxyCtrtStart, setPrxyCtrtStart] = useState<Date | undefined>(undefined);
+    const [prxyCtrtEnd, setPrxyCtrtEnd] = useState<Date | undefined>(undefined);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    useEffect(() => {
+        if (open) {
+            setPrxyBzentyNmCn(initialPrxyBzentyNmCn ?? "");
+            const initCost = Number(initialCnsgnCstVl);
+            setCnsgnCstInput(
+                initialCnsgnCstVl === null ||
+                    initialCnsgnCstVl === undefined ||
+                    Number.isNaN(initCost)
+                    ? ""
+                    : String(initCost),
+            );
+            setWholNopeInput(
+                initialWholNope === null || initialWholNope === undefined || Number.isNaN(Number(initialWholNope))
+                    ? ""
+                    : String(initialWholNope),
+            );
+            const { start, end } = parseInitialPrxyCtrtCnToDates(initialPrxyCtrtCn ?? "");
+            setPrxyCtrtStart(start);
+            setPrxyCtrtEnd(end);
+        }
+    }, [open, initialPrxyBzentyNmCn, initialCnsgnCstVl, initialWholNope, initialPrxyCtrtCn]);
+
+    const handleDialogOpenChange = (nextOpen: boolean) => {
+        if (!nextOpen && !isSubmitting) {
+            setPrxyBzentyNmCn("");
+            setCnsgnCstInput("");
+            setWholNopeInput("");
+            setPrxyCtrtStart(undefined);
+            setPrxyCtrtEnd(undefined);
+        }
+        onOpenChange(nextOpen);
+    };
+
+    const handleConfirm = async () => {
+        const trimmedCost = cnsgnCstInput.trim();
+        const cnsgnCstVl = trimmedCost === "" ? 0 : Number.parseFloat(trimmedCost.replace(/,/g, ""));
+        if (!Number.isFinite(cnsgnCstVl) || cnsgnCstVl < 0) {
+            alert("위탁비용은 0 이상의 숫자로 입력해 주세요.");
+            return;
+        }
+        const trimmedWhol = wholNopeInput.trim();
+        const wholNope = trimmedWhol === "" ? 0 : Number.parseInt(trimmedWhol, 10);
+        if (!Number.isFinite(wholNope) || wholNope < 0) {
+            alert("전체 인원은 0 이상의 정수로 입력해 주세요.");
+            return;
+        }
+        const prxyCtrtErr = validateContractRange(prxyCtrtStart, prxyCtrtEnd);
+        if (prxyCtrtErr) {
+            alert(prxyCtrtErr);
+            return;
+        }
+        const startYmd = formatDateToYmd(prxyCtrtStart)!;
+        const endYmd = formatDateToYmd(prxyCtrtEnd)!;
+        const prxyCtrtCnParam = `${startYmd}~${endYmd}`;
+        try {
+            setIsSubmitting(true);
+            await onConfirm?.({
+                prxyBzentyNmCn: prxyBzentyNmCn.trim(),
+                cnsgnCstVl,
+                wholNope,
+                prxyCtrtCn: prxyCtrtCnParam,
+            });
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+            <DialogContent className="max-w-[48rem]" aria-describedby={undefined}>
+                <DialogHeader>
+                    <DialogTitle>저장 정보 입력</DialogTitle>
+                </DialogHeader>
+                <div className="flex flex-col gap-4 py-2">
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">위탁업체명</Label>
+                        <Input
+                            value={prxyBzentyNmCn}
+                            onChange={(e) => setPrxyBzentyNmCn(e.target.value)}
+                            className="!text-[1.3rem]"
+                            placeholder="위탁사업자명을 입력하세요."
+                            disabled={isSubmitting}
+                        />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">위탁비용(백만원/년)</Label>
+                        <Input
+                            type="text"
+                            inputMode="decimal"
+                            value={cnsgnCstInput}
+                            onChange={(e) => {
+                                const v = e.target.value.replace(/[^\d.]/g, "");
+                                const firstDot = v.indexOf(".");
+                                const next =
+                                    firstDot === -1
+                                        ? v
+                                        : v.slice(0, firstDot + 1) + v.slice(firstDot + 1).replace(/\./g, "");
+                                setCnsgnCstInput(next);
+                            }}
+                            className="!text-[1.3rem]"
+                            placeholder="0"
+                            disabled={isSubmitting}
+                        />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">전체 인원</Label>
+                        <Input
+                            type="text"
+                            inputMode="numeric"
+                            value={wholNopeInput}
+                            onChange={(e) => {
+                                const v = e.target.value.replace(/\D/g, "");
+                                setWholNopeInput(v);
+                            }}
+                            className="!text-[1.3rem]"
+                            placeholder="0"
+                            disabled={isSubmitting}
+                        />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">위탁계약기간</Label>
+                        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:gap-4">
+                            <div className="flex min-w-0 flex-1 flex-col gap-2">
+                                <Label className="text-label text-[1.2rem]">시작일</Label>
+                                <InputDatePicker
+                                    value={prxyCtrtStart}
+                                    onChange={setPrxyCtrtStart}
+                                    className="w-full"
+                                    disabled={isSubmitting}
+                                />
+                            </div>
+                            <div className="flex min-w-0 flex-1 flex-col gap-2">
+                                <Label className="text-label text-[1.2rem]">종료일</Label>
+                                <InputDatePicker
+                                    value={prxyCtrtEnd}
+                                    onChange={setPrxyCtrtEnd}
+                                    className="w-full"
+                                    disabled={isSubmitting}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        color="primary"
+                        disabled={isSubmitting}
+                        onClick={() => void handleConfirm()}
+                    >
+                        저장
+                    </Button>
+                    <DialogClose asChild>
+                        <Button type="button" color="gray" disabled={isSubmitting}>
+                            취소
+                        </Button>
+                    </DialogClose>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/apps/st/src/components/statistics/input/PrivateSewageFacilityInp.tsx b/apps/st/src/components/statistics/input/PrivateSewageFacilityInp.tsx
index 0dabb52c8..de789139c 100644
--- a/apps/st/src/components/statistics/input/PrivateSewageFacilityInp.tsx
+++ b/apps/st/src/components/statistics/input/PrivateSewageFacilityInp.tsx
@@ -1,62 +1,1283 @@
-import { useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
-import SearchForm from "@/components/module/SearchForm";
-import { TabDataGrid } from "@rsone/components";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { useAlertStore, useGlobalProgressStore } from "@/shared/lib";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { statisticsInputPrivateSewageFacilityApi } from "@/entities/statistics/api/input/statistics-input-private-sewage-facility-service";
+import { statisticsInputSewSupplyRateApi } from "@/entities/statistics/api/input/statistics-input-sew-supply-rate-service";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type {
+    PrivateSewageDesigStatusSaveItem,
+    PrivateSewageFacilityVerificationResult,
+    PrivateSewageDesigStatusItem,
+    PrivateSewageDesigStatusSaveRequest,
+    PrivateSewageDesigStatusSubmitRequest,
+    SepticTankStatusSaveItem,
+    SepticTankStatusSaveRequest,
+    SepticTankStatusSubmitRequest,
+    SewageTreatFactStatusItem,
+    SewageTreatFactStatusSaveItem,
+    SewageTreatFactStatusSaveRequest,
+    SewageTreatFactStatusSubmitRequest,
+    SepticTankStatusItem,
+    SewageTreatFactStatusRequestParams,
+} from "@/entities/statistics/model/input/statistics-input-private-sewage-facility-interface";
+import { isInputPeriodCurrent } from "@/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface";
+import type { StatisticsInputSubmitInfoFormData } from "@/entities/statistics/model/statistics-input-submit-info-schema";
+import type {
+    cancelSubmitRequest,
+    ImrStatusResponse,
+    SewerageStatusInfo,
+} from "@/entities/statistics/model/statistics-interface";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
+
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
+import SubmitDailog from "./SubmitDailog";
+
+import CancelSubmitButton from "@/components/button/CancelSubmitButton";
 import SubmitButton from "@/components/button/SumitButton";
 import SaveButton from "@/components/button/SaveButton";
-import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
 import LastYearDataButton from "@/components/button/LastYearDataButton";
+import VerificationResultButton from "@/components/button/VerificationResultButton";
+import DataGrid from "@/components/module/DataGrid";
+import SearchForm from "@/components/module/SearchForm";
+import { openVerificationResultDialogIfNeeded } from "@/components/module/post-submit-verification-results";
+import { VerificationResultDialog } from "@/components/module/VerificationResultDialog";
+import { VerificationResultHistoryDialog } from "@/components/module/VerificationResultHistoryDialog";
+import type { ColumnConfig, ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { doList } from "@/components/util/column/input/DoList";
+import { PrivateSewageDesigStatusInpColumn } from "@/components/util/column/input/privateSewageFacility/PrivateSewageDesigStatusInpColumn";
+import { SepticTankStatusInpColumn } from "@/components/util/column/input/privateSewageFacility/SepticTankStatusInpColumn";
+import { SewageTreatFactStatusInpColumn } from "@/components/util/column/input/privateSewageFacility/SewageTreatFactStatusInpColumn";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import { useAdminStore } from "@/store/admin-store";
 
-import { SewageTreatFactStatusInpColumn } from "@/components/util/column/input/privateSewageFacility/SewageTreatFactStatusInpColumn"
-import { SepticTankStatusInpColumn } from "@/components/util/column/input/privateSewageFacility/SepticTankStatusInpColumn"
-import { PrivateSewageDesigStatusInpColumn } from "@/components/util/column/input/privateSewageFacility/PrivateSewageDesigStatusInpColumn"
+const PrivateSewageFacilityInpTabList = [
+    SewageTreatFactStatusInpColumn,
+    SepticTankStatusInpColumn,
+    PrivateSewageDesigStatusInpColumn,
+] as const;
+
+const firstTabKey = SewageTreatFactStatusInpColumn.tabKey;
+
+/** getColumnGuides API는 statsCd 기준 — 3번째 탭 tabKey와 statsCd가 다름 */
+const PRIVATE_SEWAGE_FACILITY_COLUMN_GUIDE_STATS_CD_BY_TAB_KEY: Record<string, string> = {
+    [SewageTreatFactStatusInpColumn.tabKey]: SewageTreatFactStatusInpColumn.tabKey,
+    [SepticTankStatusInpColumn.tabKey]: SepticTankStatusInpColumn.tabKey,
+    [PrivateSewageDesigStatusInpColumn.tabKey]: "ST00080003",
+};
+
+const PRIVATE_SEWAGE_FACILITY_COLUMN_GUIDE_STATS_CDS = Array.from(
+    new Set(Object.values(PRIVATE_SEWAGE_FACILITY_COLUMN_GUIDE_STATS_CD_BY_TAB_KEY)),
+);
+
+type GridRowWithVerification = Record<string, string | number> & {
+    verificationResult?: PrivateSewageFacilityVerificationResult;
+};
+
+type TabToolbarSnapshot = {
+    showSaveInToolbar: boolean;
+    showEnterableToolbarButtons: boolean;
+    showActionToolbarCard: boolean;
+};
+
+const toGridColumnInfo = (tab: (typeof PrivateSewageFacilityInpTabList)[number]): ColumnInfo => ({
+    columns: tab.columns ?? [],
+    columnLayout: tab.columnLayout ?? [],
+});
+
+function buildPrivateSewageFacilitySearchParam(
+    values: SearchFormValues,
+    overrides?: { mode?: string },
+): SewageTreatFactStatusRequestParams {
+    return {
+        statsYr: values.year,
+        sewerBzmnCd: values.bsnmCd,
+        ctpvNm: values.sido,
+        sggNm: values.gugun === "ALL" ? "" : values.gugun,
+        ...(overrides?.mode ? { mode: overrides.mode } : {}),
+    };
+}
+
+const computeTabEnterable = (
+    statusInfo: SewerageStatusInfo | null | undefined,
+    periodEnterable: boolean,
+): boolean => {
+    if (statusInfo?.laeSbmsnSttsCd) {
+        if (["2", "3"].includes(statusInfo.laeSbmsnSttsCd)) {
+            return false;
+        }
+        return periodEnterable;
+    }
+    return periodEnterable;
+};
+
+function buildGugunOkForToolbar(values: SearchFormValues | null): boolean {
+    return doList.includes(values?.bsnmCd || "")
+        ? Boolean(values?.gugun && values.gugun !== "ALL")
+        : true;
+}
+
+function computeTabToolbarSnapshot(
+    statusInfo: SewerageStatusInfo | null,
+    hasRowData: boolean,
+    treatAsSearched: boolean,
+    searchContext: SearchFormValues | null,
+    periodEnterable: boolean,
+    isAdminInfo: boolean,
+): TabToolbarSnapshot {
+    const gugunOk = buildGugunOkForToolbar(searchContext);
+    const enterable = computeTabEnterable(statusInfo, periodEnterable);
+    const isSubmitted = statusInfo?.laeSbmsnSttsCd === "2";
+    const showSaveInToolbar = (enterable || isAdminInfo) && gugunOk;
+    const showEnterableToolbarButtons = enterable && gugunOk;
+    const showSubmittedInInputPeriodToolbar = isSubmitted && periodEnterable && gugunOk;
+    const showActionToolbarCard =
+        (hasRowData || treatAsSearched) &&
+        (showSaveInToolbar ||
+            showEnterableToolbarButtons ||
+            showSubmittedInInputPeriodToolbar ||
+            (isSubmitted && isAdminInfo));
+    return { showSaveInToolbar, showEnterableToolbarButtons, showActionToolbarCard };
+}
+
+function tabRowDataExists(
+    m: Map<string, Record<string, string | number>[]>,
+    tabKey: string,
+): boolean {
+    const rows = m.get(tabKey);
+    return Array.isArray(rows) && rows.length > 0;
+}
+
+function mapRegionalListToGridRows<
+    T extends { verificationResult?: PrivateSewageFacilityVerificationResult },
+>(list: T[], ctpvNm: string): GridRowWithVerification[] {
+    return list.map((item) => {
+        const { verificationResult, ...rest } = item;
+        const row = toGridRows([{ ctpvNm, ...rest }])[0] as GridRowWithVerification;
+        if (verificationResult) row.verificationResult = verificationResult;
+        return row;
+    });
+}
+
+function normalizeGridString(value: unknown): string {
+    if (value === null || value === undefined) return "";
+    return typeof value === "string" ? value : String(value);
+}
+
+function normalizeGridRmrk(value: unknown): string | null {
+    if (value === null || value === undefined) return null;
+    const s = typeof value === "string" ? value : String(value);
+    return s.trim() === "" ? null : s;
+}
+
+function buildColumnFormatNumber(
+    columns: { fieldName?: string; dataFormat?: string }[],
+) {
+    const columnFormatMap = new Map<string, string>();
+    columns.forEach((col) => {
+        if (col.fieldName && col.dataFormat) {
+            columnFormatMap.set(col.fieldName, col.dataFormat);
+        }
+    });
+
+    return (value: string | number | null | undefined, fieldName: string): number => {
+        if (value === null || value === undefined || value === "") return 0;
+        const num =
+            typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+        if (isNaN(num)) return 0;
+        const format = columnFormatMap.get(fieldName);
+        if (!format) return num;
+        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+    };
+}
+
+function buildSewageTreatFactStatusSaveList(
+    currentData: Record<string, string | number>[],
+): SewageTreatFactStatusSaveItem[] {
+    const formatNumber = buildColumnFormatNumber(SewageTreatFactStatusInpColumn.columns);
+
+    return currentData.map((d) => ({
+        admdstCd: normalizeGridString(d.admdstCd),
+        admdstNm: normalizeGridString(d.admdstNm),
+        step1StaaPrcsQnt: formatNumber(d.step1StaaPrcsQnt, "step1StaaPrcsQnt"),
+        step2StaaPrcsQnt: formatNumber(d.step2StaaPrcsQnt, "step2StaaPrcsQnt"),
+        step3StaaPrcsQnt: formatNumber(d.step3StaaPrcsQnt, "step3StaaPrcsQnt"),
+        step4StaaPrcsQnt: formatNumber(d.step4StaaPrcsQnt, "step4StaaPrcsQnt"),
+        step5StaaPrcsQnt: formatNumber(d.step5StaaPrcsQnt, "step5StaaPrcsQnt"),
+        step6StaaPrcsQnt: formatNumber(d.step6StaaPrcsQnt, "step6StaaPrcsQnt"),
+        step7StaaPrcsQnt: formatNumber(d.step7StaaPrcsQnt, "step7StaaPrcsQnt"),
+        step1StaaExcpPrcsQnt: formatNumber(d.step1StaaExcpPrcsQnt, "step1StaaExcpPrcsQnt"),
+        step2StaaExcpPrcsQnt: formatNumber(d.step2StaaExcpPrcsQnt, "step2StaaExcpPrcsQnt"),
+        step3StaaExcpPrcsQnt: formatNumber(d.step3StaaExcpPrcsQnt, "step3StaaExcpPrcsQnt"),
+        step4StaaExcpPrcsQnt: formatNumber(d.step4StaaExcpPrcsQnt, "step4StaaExcpPrcsQnt"),
+        step5StaaExcpPrcsQnt: formatNumber(d.step5StaaExcpPrcsQnt, "step5StaaExcpPrcsQnt"),
+        step6StaaExcpPrcsQnt: formatNumber(d.step6StaaExcpPrcsQnt, "step6StaaExcpPrcsQnt"),
+        step7StaaExcpPrcsQnt: formatNumber(d.step7StaaExcpPrcsQnt, "step7StaaExcpPrcsQnt"),
+        rmrk: normalizeGridRmrk(d.rmrk),
+    }));
+}
+
+function buildSepticTankStatusSaveList(
+    currentData: Record<string, string | number>[],
+): SepticTankStatusSaveItem[] {
+    const formatNumber = buildColumnFormatNumber(SepticTankStatusInpColumn.columns);
+
+    return currentData.map((d) => ({
+        admdstCd: normalizeGridString(d.admdstCd),
+        admdstNm: normalizeGridString(d.admdstNm),
+        staaInsdSttkNprsflCnt: formatNumber(d.staaInsdSttkNprsflCnt, "staaInsdSttkNprsflCnt"),
+        step1StaaInsdSttkFrcCnt: formatNumber(d.step1StaaInsdSttkFrcCnt, "step1StaaInsdSttkFrcCnt"),
+        staaInsdSprktpFltrtbCnt: formatNumber(d.staaInsdSprktpFltrtbCnt, "staaInsdSprktpFltrtbCnt"),
+        staaInsdAertMthdCnt: formatNumber(d.staaInsdAertMthdCnt, "staaInsdAertMthdCnt"),
+        staaInsdCntcAertCnt: formatNumber(d.staaInsdCntcAertCnt, "staaInsdCntcAertCnt"),
+        staaInsdEtcCnt: formatNumber(d.staaInsdEtcCnt, "staaInsdEtcCnt"),
+        step1StaaInsdNope: formatNumber(d.step1StaaInsdNope, "step1StaaInsdNope"),
+        step2StaaInsdNope: formatNumber(d.step2StaaInsdNope, "step2StaaInsdNope"),
+        step3StaaInsdNope: formatNumber(d.step3StaaInsdNope, "step3StaaInsdNope"),
+        step4StaaInsdNope: formatNumber(d.step4StaaInsdNope, "step4StaaInsdNope"),
+        step5StaaInsdNope: formatNumber(d.step5StaaInsdNope, "step5StaaInsdNope"),
+        step6StaaInsdNope: formatNumber(d.step6StaaInsdNope, "step6StaaInsdNope"),
+        step7StaaInsdNope: formatNumber(d.step7StaaInsdNope, "step7StaaInsdNope"),
+        step8StaaInsdNope: formatNumber(d.step8StaaInsdNope, "step8StaaInsdNope"),
+        staaExcpSttkNprsflCnt: formatNumber(d.staaExcpSttkNprsflCnt, "staaExcpSttkNprsflCnt"),
+        step1StaaExcpSttkFrcCnt: formatNumber(d.step1StaaExcpSttkFrcCnt, "step1StaaExcpSttkFrcCnt"),
+        staaExcpSprktpFltrtbCnt: formatNumber(d.staaExcpSprktpFltrtbCnt, "staaExcpSprktpFltrtbCnt"),
+        staaExcpAertMthdCnt: formatNumber(d.staaExcpAertMthdCnt, "staaExcpAertMthdCnt"),
+        staaExcpCntcAertCnt: formatNumber(d.staaExcpCntcAertCnt, "staaExcpCntcAertCnt"),
+        staaExcpEtcCnt: formatNumber(d.staaExcpEtcCnt, "staaExcpEtcCnt"),
+        step1StaaExcpNope: formatNumber(d.step1StaaExcpNope, "step1StaaExcpNope"),
+        step2StaaExcpNope: formatNumber(d.step2StaaExcpNope, "step2StaaExcpNope"),
+        step3StaaExcpNope: formatNumber(d.step3StaaExcpNope, "step3StaaExcpNope"),
+        step4StaaExcpNope: formatNumber(d.step4StaaExcpNope, "step4StaaExcpNope"),
+        step5StaaExcpNope: formatNumber(d.step5StaaExcpNope, "step5StaaExcpNope"),
+        step6StaaExcpNope: formatNumber(d.step6StaaExcpNope, "step6StaaExcpNope"),
+        step7StaaExcpNope: formatNumber(d.step7StaaExcpNope, "step7StaaExcpNope"),
+        step8StaaExcpNope: formatNumber(d.step8StaaExcpNope, "step8StaaExcpNope"),
+        rmrk: normalizeGridRmrk(d.rmrk),
+    }));
+}
+
+function buildPrivateSewageDesigStatusSaveList(
+    currentData: Record<string, string | number>[],
+): PrivateSewageDesigStatusSaveItem[] {
+    const formatNumber = buildColumnFormatNumber(PrivateSewageDesigStatusInpColumn.columns);
+
+    return currentData.map((d) => ({
+        admdstCd: normalizeGridString(d.admdstCd),
+        admdstNm: normalizeGridString(d.admdstNm),
+        indvSwagePbancRgnCnt: formatNumber(d.indvSwagePbancRgnCnt, "indvSwagePbancRgnCnt"),
+        indvSwageDsgnScpLen: formatNumber(d.indvSwageDsgnScpLen, "indvSwageDsgnScpLen"),
+        spctnkGrssFcltCnt: formatNumber(d.spctnkGrssFcltCnt, "spctnkGrssFcltCnt"),
+        spctnkQnt: formatNumber(d.spctnkQnt, "spctnkQnt"),
+        drtwPrcsFcltGrssFcltCnt: formatNumber(
+            d.drtwPrcsFcltGrssFcltCnt,
+            "drtwPrcsFcltGrssFcltCnt",
+        ),
+        drtwPrcsFcltQnt: formatNumber(d.drtwPrcsFcltQnt, "drtwPrcsFcltQnt"),
+        rmrk: normalizeGridRmrk(d.rmrk),
+    }));
+}
+
+const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+async function waitForImrJobCompleted(
+    jobId: string,
+    getStatus: (id: string) => Promise<ImrStatusResponse>,
+    options?: {
+        pollIntervalMs?: number;
+        maxAttempts?: number;
+        onProgress?: (jobProgress: number) => void;
+    },
+): Promise<void> {
+    const pollIntervalMs = options?.pollIntervalMs ?? 2000;
+    const maxAttempts = options?.maxAttempts ?? 150;
+    for (let i = 0; i < maxAttempts; i++) {
+        const res = await getStatus(jobId);
+        options?.onProgress?.(Math.max(0, Math.min(100, Number(res.job_prog) || 0)));
+        if (res.status === "COMPLETED" && Number(res.job_prog) === 100) return;
+        if (res.status === "FAILED" || res.status === "ERROR" || res.status === "CANCELLED") {
+            throw new Error(res.error_msg || `IMR 검증이 ${res.status} 상태로 종료되었습니다.`);
+        }
+        await sleep(pollIntervalMs);
+    }
+    throw new Error("IMR 검증 완료 대기 시간이 초과되었습니다.");
+}
+
+function resolvePrivateSewageFacilityTab(tabKey: string) {
+    return {
+        isSewageTreatTab: tabKey === SewageTreatFactStatusInpColumn.tabKey,
+        isSepticTankTab: tabKey === SepticTankStatusInpColumn.tabKey,
+        isDesigStatusTab: tabKey === PrivateSewageDesigStatusInpColumn.tabKey,
+    };
+}
 
 // 하수도 통계 관리 > 08. 개인하수처리시설
 const PrivateSewageFacilityInp = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const { confirm } = useConfirm();
+    const { isAdminInfo } = useAdminStore();
+    const showGlobalProgress = useGlobalProgressStore((state) => state.show);
+    const setGlobalProgress = useGlobalProgressStore((state) => state.setProgress);
+    const setGlobalProgressLabel = useGlobalProgressStore((state) => state.setLabel);
+    const hideGlobalProgress = useGlobalProgressStore((state) => state.hide);
+    const globalProgressVisible = useGlobalProgressStore((state) => state.visible);
 
-    // tab list
-    const PrivateSewageFacilityInpTabList = [
-        SewageTreatFactStatusInpColumn,
-        SepticTankStatusInpColumn,
-        PrivateSewageDesigStatusInpColumn
-    ];
+    const [isLoading, setIsLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState<string>(firstTabKey);
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const [searchValues, setSearchValues] = useState<SearchFormValues | null>(null);
+    const [lastSearchedValues, setLastSearchedValues] = useState<SearchFormValues | null>(null);
+    const [hasSearched, setHasSearched] = useState(false);
+    const [inputPeriodEnterable, setInputPeriodEnterable] = useState(true);
+    const [tabStatusInfoMap, setTabStatusInfoMap] = useState<
+        Map<string, SewerageStatusInfo | null>
+    >(new Map());
+    const [tabStatsCdMap, setTabStatsCdMap] = useState<Map<string, string>>(new Map());
+    const [toolbarSnapshotByTab, setToolbarSnapshotByTab] = useState<
+        Map<string, TabToolbarSnapshot>
+    >(new Map());
+    const [verificationHistoryOpen, setVerificationHistoryOpen] = useState(false);
+    const [verificationResultDialogOpen, setVerificationResultDialogOpen] = useState(false);
+    const [showSubmitDialog, setShowSubmitDialog] = useState(false);
+    const [columnGuidesByTab, setColumnGuidesByTab] = useState<
+        Record<string, Record<string, string>>
+    >({});
 
-    const submitExceptionFunc = () => {
-        // 예외 제출 로직
+    const searchParamRef = useRef<SewageTreatFactStatusRequestParams | null>(null);
+    const searchDoneRef = useRef(false);
+    const periodEnterableRef = useRef(true);
+    const activeTabRef = useRef(activeTab);
+    const getGridDataRef = useRef<(() => Record<string, string | number>[]) | null>(null);
+    activeTabRef.current = activeTab;
+
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            const entries = await Promise.all(
+                PRIVATE_SEWAGE_FACILITY_COLUMN_GUIDE_STATS_CDS.map(async (statsCd) => {
+                    try {
+                        const res = await statisticsApi.getColumnGuides(statsCd);
+                        if (res.status !== "success" || !Array.isArray(res.data)) {
+                            return [statsCd, {}] as const;
+                        }
+                        const next: Record<string, string> = {};
+                        for (const item of res.data) {
+                            const key = item.engColNm?.trim();
+                            const guide = item.columnGuide?.trim();
+                            if (key && guide) next[key] = guide;
+                        }
+                        return [statsCd, next] as const;
+                    } catch {
+                        return [statsCd, {}] as const;
+                    }
+                }),
+            );
+            if (cancelled) return;
+            const guidesByStatsCd = Object.fromEntries(entries);
+            setColumnGuidesByTab(
+                Object.fromEntries(
+                    Object.entries(PRIVATE_SEWAGE_FACILITY_COLUMN_GUIDE_STATS_CD_BY_TAB_KEY).map(
+                        ([tabKey, statsCd]) => [tabKey, guidesByStatsCd[statsCd] ?? {}],
+                    ),
+                ),
+            );
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
+    const commitToolbarSnapshotForLoadedTab = (
+        tabKey: string,
+        statusInfo: SewerageStatusInfo | null,
+        hasRowData: boolean,
+        searchContext: SearchFormValues,
+    ) => {
+        setToolbarSnapshotByTab((prev) => {
+            const next = new Map(prev);
+            next.set(
+                tabKey,
+                computeTabToolbarSnapshot(
+                    statusInfo,
+                    hasRowData,
+                    searchDoneRef.current,
+                    searchContext,
+                    periodEnterableRef.current,
+                    isAdminInfo,
+                ),
+            );
+            return next;
+        });
     };
 
-    const lastYearDataFunc = () => {
-        // 지난연도 데이터 가져오기 로직
+    const applyRowMap = (
+        mergeIntoExistingMap: boolean,
+        apply: (m: Map<string, Record<string, string | number>[]>) => void,
+    ) => {
+        if (mergeIntoExistingMap) {
+            setRowDataMap((prev) => {
+                const next = new Map(prev);
+                apply(next);
+                return next;
+            });
+        } else {
+            const next = new Map<string, Record<string, string | number>[]>();
+            apply(next);
+            setRowDataMap(next);
+        }
+    };
+
+    const loadActiveTabData = async (
+        tabKey: string,
+        param: SewageTreatFactStatusRequestParams,
+        searchContext: SearchFormValues,
+        mergeIntoExistingMap: boolean,
+        updateLastSearchedValues: boolean,
+        overrides?: { mode?: string },
+    ): Promise<boolean> => {
+        const requestParam = overrides?.mode ? { ...param, mode: overrides.mode } : param;
+
+        if (tabKey === SewageTreatFactStatusInpColumn.tabKey) {
+            const response =
+                await statisticsInputPrivateSewageFacilityApi.getSewageTreatFactStatusList(
+                    requestParam,
+                );
+            if (response.status !== "success" || !response.data) {
+                alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+                return false;
+            }
+            const { commonInfo, statusInfo, sewageTreatFactStatusList } = response.data;
+            const gridRows = mapRegionalListToGridRows(
+                (sewageTreatFactStatusList ?? []) as SewageTreatFactStatusItem[],
+                commonInfo.ctpvNm,
+            );
+
+            applyRowMap(mergeIntoExistingMap, (m) => {
+                m.set(SewageTreatFactStatusInpColumn.tabKey, gridRows);
+            });
+            setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, statusInfo));
+            setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+            if (updateLastSearchedValues) setLastSearchedValues(searchContext);
+            commitToolbarSnapshotForLoadedTab(tabKey, statusInfo, gridRows.length > 0, searchContext);
+            return true;
+        }
+
+        if (tabKey === SepticTankStatusInpColumn.tabKey) {
+            const response =
+                await statisticsInputPrivateSewageFacilityApi.getSepticTankStatusList(
+                    requestParam,
+                );
+            if (response.status !== "success" || !response.data) {
+                alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+                return false;
+            }
+            const { commonInfo, statusInfo, septicTankStatusList } = response.data;
+            const gridRows = mapRegionalListToGridRows(
+                (septicTankStatusList ?? []) as SepticTankStatusItem[],
+                commonInfo.ctpvNm,
+            );
+
+            applyRowMap(mergeIntoExistingMap, (m) => {
+                m.set(SepticTankStatusInpColumn.tabKey, gridRows);
+            });
+            setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, statusInfo));
+            setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+            if (updateLastSearchedValues) setLastSearchedValues(searchContext);
+            commitToolbarSnapshotForLoadedTab(tabKey, statusInfo, gridRows.length > 0, searchContext);
+            return true;
+        }
+
+        if (tabKey === PrivateSewageDesigStatusInpColumn.tabKey) {
+            const response =
+                await statisticsInputPrivateSewageFacilityApi.getPrivateSewageDesigStatusList(
+                    requestParam,
+                );
+            if (response.status !== "success" || !response.data) {
+                alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+                return false;
+            }
+            const { commonInfo, statusInfo, privateSewageDesigStatusList } = response.data;
+            const gridRows = mapRegionalListToGridRows(
+                (privateSewageDesigStatusList ?? []) as PrivateSewageDesigStatusItem[],
+                commonInfo.ctpvNm,
+            );
+
+            applyRowMap(mergeIntoExistingMap, (m) => {
+                m.set(PrivateSewageDesigStatusInpColumn.tabKey, gridRows);
+            });
+            setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, statusInfo));
+            setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+            if (updateLastSearchedValues) setLastSearchedValues(searchContext);
+            commitToolbarSnapshotForLoadedTab(tabKey, statusInfo, gridRows.length > 0, searchContext);
+            return true;
+        }
+
+        alert("해당 탭 조회 API가 없습니다.");
+        return false;
+    };
+
+    const getTabGridRows = (tabKey: string): Record<string, string | number>[] =>
+        getGridDataRef.current?.() ?? rowDataMap.get(tabKey) ?? [];
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setTabStatusInfoMap(new Map());
+        setTabStatsCdMap(new Map());
+        setToolbarSnapshotByTab(new Map());
+        setActiveTab(firstTabKey);
+        activeTabRef.current = firstTabKey;
+        setLastSearchedValues(null);
+        setHasSearched(false);
+        setInputPeriodEnterable(true);
+        searchParamRef.current = null;
+        searchDoneRef.current = false;
+        periodEnterableRef.current = true;
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        if (!values.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+
+        try {
+            const periodResponse = await statisticsInputSewSupplyRateApi.checkInputPeriod(
+                values.year || "",
+            );
+            if (periodResponse.status !== "success") {
+                alert(periodResponse.message);
+                return;
+            }
+            const periods = Array.isArray(periodResponse.data) ? periodResponse.data : [];
+            const periodOk = isInputPeriodCurrent(periods);
+            periodEnterableRef.current = periodOk;
+            setInputPeriodEnterable(periodOk);
+
+            const yearChangedFromLastSearch =
+                lastSearchedValues != null &&
+                (lastSearchedValues.year ?? "") !== (values.year ?? "");
+
+            if (yearChangedFromLastSearch) {
+                setRowDataMap(new Map());
+                setTabStatusInfoMap(new Map());
+                setTabStatsCdMap(new Map());
+                setToolbarSnapshotByTab(new Map());
+                activeTabRef.current = firstTabKey;
+                setActiveTab(firstTabKey);
+            }
+
+            setIsLoading(true);
+            searchDoneRef.current = true;
+            setHasSearched(true);
+            const searchParam = buildPrivateSewageFacilitySearchParam(values);
+            searchParamRef.current = searchParam;
+
+            await loadActiveTabData(
+                activeTabRef.current,
+                searchParam,
+                values,
+                !yearChangedFromLastSearch,
+                true,
+            );
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        const prevTabKey = activeTabRef.current;
+        const latestRowsInPrevTab = getTabGridRows(prevTabKey);
+        if (latestRowsInPrevTab.length > 0 || rowDataMap.has(prevTabKey)) {
+            setRowDataMap((prev) => {
+                const next = new Map(prev);
+                next.set(prevTabKey, latestRowsInPrevTab);
+                return next;
+            });
+        }
+
+        activeTabRef.current = tabKey;
+        setActiveTab(tabKey);
+        if (!hasSearched || !lastSearchedValues || !searchParamRef.current) return;
+        if (tabRowDataExists(rowDataMap, tabKey)) return;
+
+        try {
+            setIsLoading(true);
+            await loadActiveTabData(
+                tabKey,
+                searchParamRef.current,
+                lastSearchedValues,
+                true,
+                false,
+            );
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const lastYearDataFunc = async () => {
+        const values = lastSearchedValues ?? searchValues;
+        if (!values?.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+        if (!hasSearched) {
+            alert("먼저 데이터를 조회해주세요.");
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+            const param = buildPrivateSewageFacilitySearchParam(values, { mode: "PRE" });
+            await loadActiveTabData(
+                activeTabRef.current,
+                param,
+                values,
+                true,
+                false,
+                { mode: "PRE" },
+            );
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const cnacelSubmitFunc = () => {
+        void (async () => {
+            try {
+                if (!(await confirm("제출된 내용을 취소하시겠습니까?"))) return;
+
+                if (!lastSearchedValues || !searchParamRef.current) {
+                    alert("먼저 조회를 진행해주세요.");
+                    return;
+                }
+
+                const userInfo = await getUserInfo();
+                const tabKey = activeTabRef.current;
+                const statsCdForTab = tabStatsCdMap.get(tabKey);
+                if (!statsCdForTab) {
+                    alert("먼저 조회를 진행해주세요.");
+                    return;
+                }
+
+                const requestData: cancelSubmitRequest = {
+                    sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+                    ctpvNm: lastSearchedValues.sido ?? "",
+                    sggNm:
+                        lastSearchedValues.gugun === "ALL"
+                            ? ""
+                            : (lastSearchedValues.gugun ?? ""),
+                    statsYr: lastSearchedValues.year ?? "",
+                    mdfrId: userInfo.userUnqId,
+                    statsCd: statsCdForTab,
+                };
+
+                const response = await statisticsApi.cancelSubmit(requestData);
+
+                if (response.status === "success") {
+                    setIsLoading(true);
+                    await loadActiveTabData(
+                        tabKey,
+                        searchParamRef.current,
+                        lastSearchedValues,
+                        false,
+                        false,
+                    );
+                    alert("제출 취소되었습니다.");
+                } else {
+                    alert(response.message ?? "제출 취소 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("제출 취소 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        })();
     };
 
     const submitFunc = () => {
-        // 제출 로직
+        void (async () => {
+            const tabKey = activeTabRef.current;
+            const { isSewageTreatTab, isSepticTankTab, isDesigStatusTab } =
+                resolvePrivateSewageFacilityTab(tabKey);
+            if (!isSewageTreatTab && !isSepticTankTab && !isDesigStatusTab) {
+                alert("제출할 수 없는 탭입니다.");
+                return;
+            }
+            if (!lastSearchedValues || !searchParamRef.current) {
+                alert("먼저 조회를 진행해주세요.");
+                return;
+            }
+            if (!buildGugunOkForToolbar(lastSearchedValues)) {
+                alert("시군구를 선택해주세요.");
+                return;
+            }
+            const currentData = getTabGridRows(tabKey);
+            if (!currentData.length) {
+                alert("제출할 데이터가 없습니다.");
+                return;
+            }
+            if (await confirm("제출 하시겠습니까?")) {
+                setShowSubmitDialog(true);
+            }
+        })();
+    };
+
+    const executeSubmit = async (submitInfo: StatisticsInputSubmitInfoFormData) => {
+        const tabKey = activeTabRef.current;
+        const { isSewageTreatTab, isSepticTankTab, isDesigStatusTab } =
+            resolvePrivateSewageFacilityTab(tabKey);
+        if (!isSewageTreatTab && !isSepticTankTab && !isDesigStatusTab) {
+            alert("제출할 수 없는 탭입니다.");
+            return;
+        }
+        if (!lastSearchedValues || !searchParamRef.current) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+
+        const currentData = getTabGridRows(tabKey);
+        if (!currentData.length) {
+            alert("제출할 데이터가 없습니다.");
+            return;
+        }
+
+        const activeTabStatus = tabStatusInfoMap.get(tabKey) ?? null;
+        const statsCdForTab = tabStatsCdMap.get(tabKey) ?? tabKey;
+        const adminOpt = isAdminInfo ? { superAdmin: "superAdmin" as const } : {};
+
+        const submitInfoBase = {
+            statsYr: lastSearchedValues.year ?? "",
+            ctpvNm: lastSearchedValues.sido ?? "",
+            sggNm:
+                lastSearchedValues.gugun === "ALL"
+                    ? ""
+                    : (lastSearchedValues.gugun ?? ""),
+            sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+            laePicNm: submitInfo.laePicNm,
+            laePicTelNo: submitInfo.laePicTelNo,
+            laeKbrdrDeptNm: submitInfo.laeKbrdrDeptNm,
+            laeKbrdrJbgdNm: submitInfo.laeKbrdrJbgdNm,
+            laeIdfrNm: submitInfo.laeIdfrNm,
+            laeIdfrTelNo: submitInfo.laeIdfrTelNo,
+            laeIdfrDeptNm: submitInfo.laeIdfrDeptNm,
+            laeIdfrJbgdNm: submitInfo.laeIdfrJbgdNm,
+        };
+
+        const verificationQuery = {
+            sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+            ctpvNm: lastSearchedValues.sido ?? "",
+            sggNm:
+                lastSearchedValues.gugun === "ALL"
+                    ? ""
+                    : (lastSearchedValues.gugun ?? ""),
+            statsYr: lastSearchedValues.year ?? "",
+            statsCd: statsCdForTab,
+        };
+
+        const reloadSubmittedTab = async () => {
+            await loadActiveTabData(
+                tabKey,
+                searchParamRef.current!,
+                lastSearchedValues,
+                false,
+                false,
+            );
+        };
+
+        try {
+            showGlobalProgress({ label: "서버에 요청 중...", progress: 0 });
+            const userInfo = await getUserInfo();
+            setGlobalProgressLabel("일반 검증 진행 중...");
+
+            let response: { status: string; message?: string; data?: { finalStatus?: string; nvpassed?: boolean } };
+
+            if (isSewageTreatTab) {
+                const param: SewageTreatFactStatusSubmitRequest = {
+                    ...submitInfoBase,
+                    userId: userInfo.userUnqId,
+                    submitList: buildSewageTreatFactStatusSaveList(currentData),
+                    ...adminOpt,
+                };
+                response =
+                    await statisticsInputPrivateSewageFacilityApi.submitSewageTreatFactStatus(
+                        param,
+                    );
+            } else if (isSepticTankTab) {
+                const param: SepticTankStatusSubmitRequest = {
+                    ...submitInfoBase,
+                    userId: userInfo.userUnqId,
+                    submitList: buildSepticTankStatusSaveList(currentData),
+                    ...adminOpt,
+                };
+                response =
+                    await statisticsInputPrivateSewageFacilityApi.submitSepticTankStatus(param);
+            } else {
+                const param: PrivateSewageDesigStatusSubmitRequest = {
+                    ...submitInfoBase,
+                    userId: userInfo.userUnqId,
+                    submitList: buildPrivateSewageDesigStatusSaveList(currentData),
+                    ...adminOpt,
+                };
+                response =
+                    await statisticsInputPrivateSewageFacilityApi.submitPrivateSewageDesigStatus(
+                        param,
+                    );
+            }
+
+            if (response.status !== "success") {
+                alert(response.message || "데이터 제출 중 오류가 발생했습니다.");
+                return;
+            }
+
+            const finalStatus = response.data?.finalStatus;
+            const nvpassed = response.data?.nvpassed;
+
+            if (finalStatus === "5") {
+                setGlobalProgress(50);
+                setGlobalProgressLabel("IMR 검증 진행 중...");
+                const imrParam = {
+                    user_id: userInfo.userUnqId,
+                    sewer_bzmn_cd: lastSearchedValues.bsnmCd ?? "",
+                    stats_cd: statsCdForTab,
+                    stats_yr: lastSearchedValues.year ?? "",
+                    lae_sbmsn_stts_cd: activeTabStatus?.laeSbmsnSttsCd === "4" ? "4" : "2",
+                    gen_verify_stts_cd: nvpassed ? "1" : "2",
+                };
+
+                try {
+                    const imrResponse = await statisticsApi.callImrService(imrParam);
+                    if (imrResponse.job_id) {
+                        await waitForImrJobCompleted(
+                            imrResponse.job_id,
+                            (id) => statisticsApi.getImrStatus(id),
+                            {
+                                onProgress: (jobProgress) => {
+                                    setGlobalProgress(50 + Math.round(jobProgress / 2));
+                                },
+                            },
+                        );
+                    }
+                    setGlobalProgress(100);
+                    await reloadSubmittedTab();
+                    await openVerificationResultDialogIfNeeded(
+                        verificationQuery,
+                        setVerificationResultDialogOpen,
+                        { notify: alert },
+                    );
+                } catch (e) {
+                    await reloadSubmittedTab();
+                    await openVerificationResultDialogIfNeeded(
+                        verificationQuery,
+                        setVerificationResultDialogOpen,
+                        { notify: alert, notifySubmitComplete: false },
+                    );
+                    const msg =
+                        e instanceof Error && e.message
+                            ? e.message
+                            : "IMR 검증 중 오류가 발생했습니다.\n관리자에게 문의하세요.";
+                    alert(msg);
+                }
+            } else {
+                setGlobalProgress(100);
+                await reloadSubmittedTab();
+                await openVerificationResultDialogIfNeeded(
+                    verificationQuery,
+                    setVerificationResultDialogOpen,
+                    { notify: alert },
+                );
+            }
+        } catch {
+            alert("데이터 제출 중 오류가 발생했습니다.");
+        } finally {
+            hideGlobalProgress();
+            setShowSubmitDialog(false);
+        }
     };
 
     const saveFunc = () => {
-        // 저장 로직
+        void (async () => {
+            const tabKey = activeTabRef.current;
+            const { isSewageTreatTab, isSepticTankTab, isDesigStatusTab } =
+                resolvePrivateSewageFacilityTab(tabKey);
+            if (!isSewageTreatTab && !isSepticTankTab && !isDesigStatusTab) {
+                alert("저장할 수 없는 탭입니다.");
+                return;
+            }
+
+            if (!lastSearchedValues || !searchParamRef.current) {
+                alert("먼저 조회를 진행해주세요.");
+                return;
+            }
+
+            if (!buildGugunOkForToolbar(lastSearchedValues)) {
+                alert("시군구를 선택해주세요.");
+                return;
+            }
+
+            if (!(await confirm("저장 하시겠습니까?"))) return;
+
+            const currentData = getTabGridRows(tabKey);
+            if (!currentData.length) {
+                alert("저장할 데이터가 없습니다.");
+                return;
+            }
+
+            const baseRequest = {
+                statsYr: lastSearchedValues.year ?? "",
+                ctpvNm: lastSearchedValues.sido ?? "",
+                sggNm:
+                    lastSearchedValues.gugun === "ALL"
+                        ? ""
+                        : (lastSearchedValues.gugun ?? ""),
+                sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+            };
+
+            try {
+                setIsLoading(true);
+                const userInfo = await getUserInfo();
+
+                if (isSewageTreatTab) {
+                    const param: SewageTreatFactStatusSaveRequest = {
+                        ...baseRequest,
+                        userId: userInfo.userUnqId,
+                        saveList: buildSewageTreatFactStatusSaveList(currentData),
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
+                    };
+                    const response =
+                        await statisticsInputPrivateSewageFacilityApi.saveSewageTreatFactStatus(
+                            param,
+                        );
+                    if (response.status === "success") {
+                        await loadActiveTabData(
+                            tabKey,
+                            searchParamRef.current,
+                            lastSearchedValues,
+                            false,
+                            false,
+                        );
+                        alert("저장되었습니다.");
+                    } else {
+                        alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                    }
+                    return;
+                }
+
+                if (isSepticTankTab) {
+                    const param: SepticTankStatusSaveRequest = {
+                        ...baseRequest,
+                        userId: userInfo.userUnqId,
+                        saveList: buildSepticTankStatusSaveList(currentData),
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
+                    };
+                    const response =
+                        await statisticsInputPrivateSewageFacilityApi.saveSepticTankStatus(param);
+                    if (response.status === "success") {
+                        await loadActiveTabData(
+                            tabKey,
+                            searchParamRef.current,
+                            lastSearchedValues,
+                            false,
+                            false,
+                        );
+                        alert("저장되었습니다.");
+                    } else {
+                        alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                    }
+                    return;
+                }
+
+                const param: PrivateSewageDesigStatusSaveRequest = {
+                    ...baseRequest,
+                    userId: userInfo.userUnqId,
+                    saveList: buildPrivateSewageDesigStatusSaveList(currentData),
+                    ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
+                };
+                const response =
+                    await statisticsInputPrivateSewageFacilityApi.savePrivateSewageDesigStatus(
+                        param,
+                    );
+                if (response.status === "success") {
+                    await loadActiveTabData(
+                        tabKey,
+                        searchParamRef.current,
+                        lastSearchedValues,
+                        false,
+                        false,
+                    );
+                    alert("저장되었습니다.");
+                } else {
+                    alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("데이터 저장 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        })();
     };
 
-    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const openVerificationHistoryDialog = () => {
+        const ctx = lastSearchedValues ?? searchValues;
+        const statsCd = tabStatsCdMap.get(activeTab);
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !statsCd) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+        setVerificationHistoryOpen(true);
+    };
+
+    const verificationQueryContext = (() => {
+        const ctx = lastSearchedValues ?? searchValues;
+        const statsCd = tabStatsCdMap.get(activeTab);
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !statsCd) return null;
+        return {
+            sewerBzmnCd: ctx.bsnmCd,
+            ctpvNm: ctx.sido,
+            sggNm: ctx.gugun === "ALL" ? "" : (ctx.gugun ?? ""),
+            statsYr: ctx.year,
+            statsCd,
+        };
+    })();
+
+    const columnInfoByTab = useMemo(() => {
+        const map = new Map<string, ColumnInfo>();
+        for (const tab of PrivateSewageFacilityInpTabList) {
+            const tabKey = tab.tabKey;
+            const canEdit =
+                computeTabEnterable(
+                    tabStatusInfoMap.get(tabKey) ?? null,
+                    inputPeriodEnterable,
+                ) || isAdminInfo;
+            const rawColumns = (tab.columns ?? []) as ColumnConfig[];
+            const base = canEdit
+                ? rawColumns
+                : rawColumns.map((col) => ({ ...col, editable: false as const }));
+            const columns = base.map((col) => {
+                const guide = columnGuidesByTab[tabKey]?.[col.fieldName]?.trim();
+                return guide ? { ...col, tooltip: guide } : col;
+            });
+            map.set(tabKey, {
+                columns,
+                columnLayout: tab.columnLayout ?? [],
+            });
+        }
+        return map;
+    }, [tabStatusInfoMap, inputPeriodEnterable, isAdminInfo, columnGuidesByTab]);
+
+    const activeTabStatus = tabStatusInfoMap.get(activeTab) ?? null;
+    const activeTabToolbar =
+        toolbarSnapshotByTab.get(activeTab) ??
+        computeTabToolbarSnapshot(
+            activeTabStatus,
+            tabRowDataExists(rowDataMap, activeTab),
+            hasSearched,
+            lastSearchedValues,
+            inputPeriodEnterable,
+            isAdminInfo,
+        );
+    const { showSaveInToolbar, showEnterableToolbarButtons, showActionToolbarCard } =
+        activeTabToolbar;
+
+    const verificationCellStyle = ({
+        fieldName,
+        row,
+    }: {
+        fieldName: string;
+        row: Record<string, string | number>;
+    }): string | undefined => {
+        const verification = (row as GridRowWithVerification).verificationResult;
+        if (!verification) return;
+        const errors = verification[fieldName];
+        if (Array.isArray(errors) && errors.length > 0) {
+            const hasImr = errors.some((e) => e.vrfcCd === "IMR" || e.vrfcCd === "HB");
+            return hasImr ? "rg-cell-verify-error-imr" : "rg-cell-verify-error";
+        }
+    };
+
+    const verificationCellTooltip = ({
+        fieldName,
+        row,
+    }: {
+        fieldName: string;
+        row: Record<string, string | number>;
+    }): string | undefined => {
+        const verification = (row as GridRowWithVerification).verificationResult;
+        if (!verification) return;
+        const errors = verification[fieldName];
+        if (Array.isArray(errors) && errors.length > 0) {
+            return errors
+                .map((e) => {
+                    const prefix =
+                        e.vrfcCd === "IMR"
+                            ? "IMR검증 - "
+                            : e.vrfcCd === "NV"
+                              ? "일반검증 - "
+                              : "HB검증 - ";
+                    return `${prefix}${e.rsnExpln}(검증 기준값: ${e.compVlCn} / 현재 입력값: ${e.nowVlCn})`;
+                })
+                .filter(Boolean)
+                .join("\n");
+        }
+    };
 
     return (
         <>
-            <SearchForm />
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <SubmitExceptionButton SubmitExceptionFunc={submitExceptionFunc} />
-                    <LastYearDataButton getLastYearDataFunc={lastYearDataFunc} />
-                    <SubmitButton submitFunc={submitFunc} />
-                    <SaveButton saveFunc={saveFunc} />
+            <div className="relative">
+                <SearchForm
+                    onSubmit={handleSearch}
+                    onReset={handleReset}
+                    onValuesChange={setSearchValues}
+                />
+                {showActionToolbarCard && (
+                    <div className="card !py-0">
+                        <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
+                            <VerificationResultButton
+                                VerificationResultButtonFunc={openVerificationHistoryDialog}
+                            />
+                            {showEnterableToolbarButtons && (
+                                <>
+                                    <LastYearDataButton
+                                        getLastYearDataFunc={() => void lastYearDataFunc()}
+                                    />
+                                    <SubmitButton submitFunc={submitFunc} />
+                                </>
+                            )}
+                            {activeTabStatus?.laeSbmsnSttsCd === "2" && (
+                                <CancelSubmitButton cnacelSubmitFunc={cnacelSubmitFunc} />
+                            )}
+                            {showSaveInToolbar && <SaveButton saveFunc={saveFunc} />}
+                        </div>
+                    </div>
+                )}
+                {isLoading && !globalProgressVisible && (
+                    <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>
+                )}
+                <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                    <Tabs
+                        value={activeTab}
+                        onValueChange={(v) => void handleActiveTabChange(v)}
+                        className="w-full"
+                        variant="default"
+                    >
+                        <TabsList>
+                            {PrivateSewageFacilityInpTabList.map((info) => (
+                                <TabsTrigger key={info.tabKey} value={info.tabKey}>
+                                    {info.tabLabel || info.tabKey}
+                                </TabsTrigger>
+                            ))}
+                        </TabsList>
+                        {PrivateSewageFacilityInpTabList.map((info) => {
+                            const tabKey = info.tabKey;
+                            const rowData = rowDataMap.get(tabKey) ?? [];
+                            const tabEnterableForGrid =
+                                computeTabEnterable(
+                                    tabStatusInfoMap.get(tabKey) ?? null,
+                                    inputPeriodEnterable,
+                                ) || isAdminInfo;
+                            const gugunOk = buildGugunOkForToolbar(lastSearchedValues);
+                            const tabStatusInfo = tabStatusInfoMap.get(tabKey) ?? null;
+
+                            return (
+                                <TabsContent key={tabKey} value={tabKey}>
+                                    <DataGrid
+                                        key={`${tabKey}-${tabEnterableForGrid ? "enterable" : "readonly"}`}
+                                        columnInfo={
+                                            columnInfoByTab.get(tabKey) ?? toGridColumnInfo(info)
+                                        }
+                                        rowStartNum={info.rowStartNum}
+                                        excelExportFileSuffix={info.tabLabel || tabKey}
+                                        rowData={rowData}
+                                        setRowData={(updater) => {
+                                            setRowDataMap((prev) => {
+                                                const next = new Map(prev);
+                                                const cur = next.get(tabKey) ?? [];
+                                                const n =
+                                                    typeof updater === "function"
+                                                        ? updater(cur)
+                                                        : updater;
+                                                next.set(tabKey, n);
+                                                return next;
+                                            });
+                                        }}
+                                        showHeaderCheckbox={false}
+                                        fixedColumns={info.fixedColumns}
+                                        enableSort={false}
+                                        statusInfo={tabStatusInfo}
+                                        isExcelImport={
+                                            tabRowDataExists(rowDataMap, tabKey) &&
+                                            tabEnterableForGrid &&
+                                            gugunOk
+                                        }
+                                        isExcelExport
+                                        cellStyleCallback={verificationCellStyle}
+                                        cellTooltipCallback={verificationCellTooltip}
+                                        getGridDataRef={
+                                            activeTab === tabKey ? getGridDataRef : undefined
+                                        }
+                                    />
+                                </TabsContent>
+                            );
+                        })}
+                    </Tabs>
                 </div>
             </div>
-            <TabDataGrid 
-                columnInfo={PrivateSewageFacilityInpTabList} 
-                rowDataMap={rowDataMap} 
-                setRowDataMap={setRowDataMap} 
+            <VerificationResultHistoryDialog
+                open={verificationHistoryOpen}
+                onOpenChange={setVerificationHistoryOpen}
+                queryContext={verificationQueryContext}
+                onExceptionResetSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values || !searchParamRef.current) return;
+                    await loadActiveTabData(
+                        activeTabRef.current,
+                        searchParamRef.current,
+                        values,
+                        false,
+                        false,
+                    );
+                }}
+            />
+            <ConfirmDialog isOpen={false} />
+            <SubmitDailog
+                open={showSubmitDialog}
+                onOpenChange={setShowSubmitDialog}
+                statusInfo={activeTabStatus}
+                onConfirm={executeSubmit}
+                isLoading={isLoading}
+            />
+            <VerificationResultDialog
+                open={verificationResultDialogOpen}
+                onOpenChange={setVerificationResultDialogOpen}
+                queryContext={verificationQueryContext}
+                onExceptionSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values || !searchParamRef.current) return;
+                    await loadActiveTabData(
+                        activeTabRef.current,
+                        searchParamRef.current,
+                        values,
+                        true,
+                        false,
+                    );
+                }}
             />
         </>
     );
 };
 
-export default PrivateSewageFacilityInp;
\ No newline at end of file
+export default PrivateSewageFacilityInp;
diff --git a/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx b/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx
index 0a8e1d277..d0c73759e 100644
--- a/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx
+++ b/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx
@@ -1,37 +1,585 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState, type Dispatch, type SetStateAction } from 'react';
 
-import SearchForm from '@/components/module/SearchForm';
-import { DataGrid } from '@rsone/components';
-import SubmitButton from '@/components/button/SumitButton';
+import { useConfirm } from '@frontend-opensource/use-react-hooks';
+
+import { useAlertStore, useGlobalProgressStore, useStatisticsInputToolbarGroupGate } from '@/shared/lib';
+import { statisticsInputSewSupplyRateApi } from '@/entities/statistics/api/input/statistics-input-sew-supply-rate-service';
+import { statisticsInputPublicSewageFacilityApiService } from '@/entities/statistics/api/input/statistics-public-sewage-facility-input-service';
+import { statisticsApi } from '@/entities/statistics/api/statistics-service';
+import type {
+    PublicSewageFacilityRequestParams,
+    PublicSewageFacilitySaveItem,
+    PublicSewageFacilitySaveRequest,
+    PublicSewageMainFacilityMappingSaveItem,
+    PublicSewageMainFacilityMappingSaveRequest,
+    PublicSewageMappingTargetsRequestParams,
+} from '@/entities/statistics/model/input/statistics-public-sewage-facility-input-interface';
+import {
+    type CheckInputPeriodItem,
+    getVerificationPeriodActionBlockedMessage,
+    isInputPeriodCurrent,
+    type SewerageSupplyRateVerificationResult,
+} from '@/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface';
+import type { StatisticsInputSubmitInfoFormData } from '@/entities/statistics/model/statistics-input-submit-info-schema';
+import type { cancelSubmitRequest, ImrStatusResponse, SewerageStatusInfo } from '@/entities/statistics/model/statistics-interface';
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from '@common/components';
+
+import { getUserInfo } from '../../../../../../packages/common/components/src/api';
+
+import { MainFacilityMappingSaveDialog, type MainFacilityMappingSaveDialogValues } from './MainFacilityMappingSaveDialog';
+import SubmitDailog from './SubmitDailog';
+
+import CancelSubmitButton from '@/components/button/CancelSubmitButton';
+import NotApplicableCheckButton from '@/components/button/NotApplicableCheckButton';
 import SaveButton from '@/components/button/SaveButton';
-import SubmitExceptionButton from '@/components/button/SubmitExceptionButton';
-import OperateDataButton from '@/components/button/OperateDataButton';
-import UpdateOperateDataButton from "@/components/button/UpdateOperateDataButton"
-import NotApplicableCheckButton from "@/components/button/NotApplicableCheckButton";
+import SubmitButton from '@/components/button/SumitButton';
+import UpdateOperateDataButton from '@/components/button/UpdateOperateDataButton';
+import VerificationResultButton from '@/components/button/VerificationResultButton';
+import DataGrid from '@/components/module/DataGrid';
+import SearchForm from '@/components/module/SearchForm';
+import SplitDataGrid from '@/components/module/SplitDataGrid';
+import { openVerificationResultDialogIfNeeded } from '@/components/module/post-submit-verification-results';
+import { VerificationResultDialog } from '@/components/module/VerificationResultDialog';
+import { VerificationResultHistoryDialog } from '@/components/module/VerificationResultHistoryDialog';
+import type { CellStyleCallbackParams, ColumnInfo, ColumnInfoList } from '@/components/type/DataGrid.type';
+import type { SearchFormValues } from '@/components/type/SearchForm.type';
+import { doList } from '@/components/util/column/input/DoList';
+import { PublicSewageFactInpColumnList } from '@/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactInpColumn';
+import { toGridRows } from '@/components/util/grid/gridFunction';
+import { useAdminStore } from '@/store/admin-store';
 
-import { PublicSewageFactInpColumn } from '@/components/util/column/input/PublicSewageFactInpColumn';
+type GridRowWithVerification = Record<string, string | number> & {
+    verificationResult?: SewerageSupplyRateVerificationResult;
+};
+
+type TabToolbarSnapshot = {
+    showSaveInToolbar: boolean;
+    showEnterableToolbarButtons: boolean;
+    showActionToolbarCard: boolean;
+};
+
+function buildGugunOkForToolbar(values: SearchFormValues | null): boolean {
+    return doList.includes(values?.bsnmCd || '')
+        ? Boolean(values?.gugun && values.gugun !== 'ALL')
+        : true;
+}
+
+const computeTabEnterable = (
+    statusInfo: SewerageStatusInfo | null | undefined,
+    periodEnterable: boolean,
+): boolean => {
+    if (statusInfo?.laeSbmsnSttsCd) {
+        if (['2', '3'].includes(statusInfo.laeSbmsnSttsCd)) {
+            return false;
+        }
+        return periodEnterable;
+    }
+    return periodEnterable;
+};
+
+function computeTabToolbarSnapshot(
+    statusInfo: SewerageStatusInfo | null,
+    hasRowData: boolean,
+    treatAsSearched: boolean,
+    searchContext: SearchFormValues | null,
+    periodEnterable: boolean,
+    isAdminInfo: boolean,
+): TabToolbarSnapshot {
+    const gugunOk = buildGugunOkForToolbar(searchContext);
+    const enterable = computeTabEnterable(statusInfo, periodEnterable);
+    const isSubmitted = statusInfo?.laeSbmsnSttsCd === '2';
+    const showSaveInToolbar = (enterable || isAdminInfo) && gugunOk;
+    const showEnterableToolbarButtons = enterable && gugunOk;
+    const showSubmittedInInputPeriodToolbar = isSubmitted && periodEnterable && gugunOk;
+    const showActionToolbarCard =
+        (hasRowData || treatAsSearched) &&
+        (showSaveInToolbar ||
+            showEnterableToolbarButtons ||
+            showSubmittedInInputPeriodToolbar ||
+            (isSubmitted && isAdminInfo));
+    return { showSaveInToolbar, showEnterableToolbarButtons, showActionToolbarCard };
+}
+
+const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+async function waitForImrJobCompleted(
+    jobId: string,
+    getStatus: (id: string) => Promise<ImrStatusResponse>,
+    options?: {
+        pollIntervalMs?: number;
+        maxAttempts?: number;
+        onProgress?: (jobProgress: number) => void;
+    },
+): Promise<void> {
+    const pollIntervalMs = options?.pollIntervalMs ?? 2000;
+    const maxAttempts = options?.maxAttempts ?? 150;
+    for (let i = 0; i < maxAttempts; i++) {
+        const res = await getStatus(jobId);
+        options?.onProgress?.(Math.max(0, Math.min(100, Number(res.job_prog) || 0)));
+        if (res.status === 'COMPLETED' && Number(res.job_prog) === 100) return;
+        if (res.status === 'FAILED' || res.status === 'ERROR' || res.status === 'CANCELLED') {
+            throw new Error(res.error_msg || `IMR 검증이 ${res.status} 상태로 종료되었습니다.`);
+        }
+        await sleep(pollIntervalMs);
+    }
+    throw new Error('IMR 검증 완료 대기 시간이 초과되었습니다.');
+}
+
+type MainFacilityMappingSaveDraft = {
+    statsYr: string;
+    sewerBzmnCd: string;
+    admdstCd: string;
+    admdstNm: string;
+    mainFcltSn: string;
+    mainFcltNm: string;
+    initialCnsgnCstVl: number;
+    saveList: PublicSewageMainFacilityMappingSaveItem[];
+    deleteList: string[];
+    initialPrxyBzentyNmCn: string;
+    initialWholNope: number;
+    initialPrxyCtrtCn: string;
+};
+
+const PUBLIC_SEWAGE_FACILITY_COLUMN_GUIDE_TAB_KEYS = Array.from(
+    new Set(PublicSewageFactInpColumnList.map((tab) => tab.tabKey).filter(Boolean)),
+);
 
 // 하수도 통계 관리 > 06. 공공하수처리시설
 const PublicSewageFacilityInp = () => {
-
-    const SubmitExceptionFunc = () => {
-        console.log('submitException');
-        // 예외제출 로직
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const { confirm } = useConfirm();
+    const { isAdminInfo } = useAdminStore();
+    const toolbarGroupAllowed = useStatisticsInputToolbarGroupGate();
+    const showGlobalProgress = useGlobalProgressStore((state) => state.show);
+    const setGlobalProgress = useGlobalProgressStore((state) => state.setProgress);
+    const setGlobalProgressLabel = useGlobalProgressStore((state) => state.setLabel);
+    const hideGlobalProgress = useGlobalProgressStore((state) => state.hide);
+    const globalProgressVisible = useGlobalProgressStore((state) => state.visible);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [hasSearched, setHasSearched] = useState(false);
+    const [isNotApplicableByTab, setIsNotApplicableByTab] = useState<Map<string, boolean>>(
+        () => new Map(),
+    );
+    const [showIsNotApplicable, setShowIsNotApplicable] = useState(false);
+    const [searchValues, setSearchValues] = useState<SearchFormValues | null>(null);
+    const [lastSearchedValues, setLastSearchedValues] = useState<SearchFormValues | null>(null);
+    const [tabStatusInfoMap, setTabStatusInfoMap] = useState<Map<string, SewerageStatusInfo | null>>(new Map());
+    const [tabStatsCdMap, setTabStatsCdMap] = useState<Map<string, string>>(new Map());
+    /** 탭키별 `engColNm -> columnGuide` 캐시 */
+    const [columnGuidesByTab, setColumnGuidesByTab] = useState<Record<string, Record<string, string>>>({});
+    const [_toolbarSnapshotByTab, setToolbarSnapshotByTab] = useState<Map<string, TabToolbarSnapshot>>(() => new Map());
+    const [inputPeriodEnterable, setInputPeriodEnterable] = useState(true);
+    const [periodCheckList, setPeriodCheckList] = useState<CheckInputPeriodItem[]>([]);
+    const [showDailog, setShowDailog] = useState<boolean>(false);
+    const [selectedMainFacilitySn, setSelectedMainFacilitySn] = useState<string | null>(null);
+    const mainFacilityMappingSaveDraftRef = useRef<MainFacilityMappingSaveDraft | null>(null);
+    const [mainFacilityMappingSaveDialogOpen, setMainFacilityMappingSaveDialogOpen] = useState(false);
+    const [mainFacilityMappingSaveDialogKey, setMainFacilityMappingSaveDialogKey] = useState(0);
+    const [verificationResultDialogOpen, setVerificationResultDialogOpen] = useState(false);
+    const [verificationHistoryOpen, setVerificationHistoryOpen] = useState(false);
+    const isNotApplicable = isNotApplicableByTab.get('ST00060001') ?? false;
+    const setIsNotApplicable: Dispatch<SetStateAction<boolean>> = (next) => {
+        setIsNotApplicableByTab((prev) => {
+            const current = prev.get('ST00060001') ?? false;
+            const resolved =
+                typeof next === 'function'
+                    ? (next as (prevState: boolean) => boolean)(current)
+                    : next;
+            const nextMap = new Map(prev);
+            nextMap.set('ST00060001', resolved);
+            return nextMap;
+        });
     };
 
+    const periodEnterableRef = useRef(true);
+    const searchDoneRef = useRef(false);
+    /** ST00060001만: RealGrid 편집값이 state에 없을 수 있어 저장/제출 시 그리드에서 직접 읽음 */
+    const st60001GridGetRowsRef = useRef<(() => Record<string, string | number>[]) | null>(null);
+
     const submitFunc = () => {
-        console.log('submit');
-        // 제출 로직
+        void (async () => {
+            if (activeTab !== 'ST00060001') {
+                alert('ST00060002 제출 API 연동 전입니다.');
+                return;
+            }
+            if (!lastSearchedValues || !searchParamRef.current) {
+                alert('먼저 조회를 진행해주세요.');
+                return;
+            }
+            const treatAsNoApplicable = getNoApplicableForRequest() || isNotApplicable;
+            const currentData =
+                st60001GridGetRowsRef.current?.() ?? rowDataMap.get('ST00060001') ?? [];
+            if (!treatAsNoApplicable && (!currentData || currentData.length === 0)) {
+                alert('해당사항 없음을 체크해주세요.');
+                return;
+            }
+            const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+            if (verificationBlocked) {
+                alert(verificationBlocked);
+                return;
+            }
+            if (await confirm('제출 하시겠습니까?')) {
+                setShowDailog(true);
+            }
+        })();
+    };
+
+    const buildFacilitySaveList = (currentData: Record<string, string | number>[]): PublicSewageFacilitySaveItem[] => {
+        const toNumber = (v: unknown): number => {
+            if (v === null || v === undefined) return 0;
+            if (v === '') return 0;
+            const num = typeof v === 'string' ? parseFloat(v.replace(/,/g, '')) : (v as number);
+            return Number.isFinite(num) ? num : 0;
+        };
+
+        const toNullableString = (v: unknown): string | null => {
+            if (v === null || v === undefined) return null;
+            const s = typeof v === 'string' ? v : String(v);
+            return s.trim() === '' ? null : s;
+        };
+
+        return currentData.map((d) => ({
+            admdstCd: String(d.admdstCd ?? ''),
+            admdstNm: String(d.admdstNm ?? ''),
+            swtrmtFcltCd: String(d.swtrmtFcltCd ?? ''),
+            swtrmtFcltNm: String(d.swtrmtFcltNm ?? ''),
+            fcltSn: String(d.fcltSn ?? ''),
+            fcltPstnCn: d.fcltPstnCn === '' ? null : toNullableString(d.fcltPstnCn),
+            inflwSwagePhysQnt: toNumber(d.inflwSwagePhysQnt),
+            inflwSwageBoilQnt: toNumber(d.inflwSwageBoilQnt),
+            inflwSwageAltdQnt: toNumber(d.inflwSwageAltdQnt),
+            prcsPhysCpct: toNumber(d.prcsPhysCpct),
+            prcsBoilCpct: toNumber(d.prcsBoilCpct),
+            prcsAltdCpct: toNumber(d.prcsAltdCpct),
+            prxyCtrtCn: d.prxyCtrtCn === '' ? null : toNullableString(d.prxyCtrtCn),
+            sftyAcdntEvntcsCnt: toNumber(d.sftyAcdntEvntcsCnt),
+            rmrk: toNullableString(d.rmrk),
+        }));
+    };
+
+    const getNoApplicableForRequest = (): boolean => {
+        const activeTabStatus = tabStatusInfoMap.get(activeTab) ?? null;
+        const searchContextForToolbar = lastSearchedValues ?? searchValues;
+        const gugunOk = buildGugunOkForToolbar(searchContextForToolbar);
+        const enterable = computeTabEnterable(activeTabStatus, inputPeriodEnterable);
+        const showEnterableToolbarButtons = enterable && gugunOk;
+        const noApplicableVisible = showEnterableToolbarButtons && showIsNotApplicable;
+        return noApplicableVisible ? Boolean(isNotApplicable) : false;
+    };
+
+    const isCheckedRow = (row: Record<string, string | number>): boolean => {
+        const v = row.__checked;
+        return v === 1 || v === '1' || v === 'Y' || v === 'y' || v === 'true';
+    };
+
+    const executeSubmit = async (submitInfo: StatisticsInputSubmitInfoFormData) => {
+        const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+        if (verificationBlocked) {
+            alert(verificationBlocked);
+            return;
+        }
+        if (activeTab !== 'ST00060001') {
+            alert('ST00060002 제출 API 연동 전입니다.');
+            return;
+        }
+        if (!lastSearchedValues || !searchParamRef.current) {
+            alert('먼저 조회를 진행해주세요.');
+            return;
+        }
+        const noApplicable = getNoApplicableForRequest();
+        const treatAsNoApplicable = noApplicable || isNotApplicable;
+        const currentData =
+            st60001GridGetRowsRef.current?.() ?? rowDataMap.get('ST00060001') ?? [];
+
+        const submitList = treatAsNoApplicable ? [] : buildFacilitySaveList(currentData);
+        if (!treatAsNoApplicable && submitList.length === 0) {
+            alert('해당사항 없음을 체크해주세요.');
+            return;
+        }
+
+        try {
+            showGlobalProgress({ label: '서버에 요청 중...', progress: 0 });
+            const userInfo = await getUserInfo();
+            const activeTabStatus = tabStatusInfoMap.get(activeTab) ?? null;
+            const statsCdForTab = tabStatsCdMap.get(activeTab) ?? activeTab;
+            const requestData = {
+                statsYr: lastSearchedValues.year ?? '',
+                ctpvNm: lastSearchedValues.sido ?? '',
+                sggNm: lastSearchedValues.gugun === 'ALL' ? '' : lastSearchedValues.gugun ?? '',
+                sewerBzmnCd: lastSearchedValues.bsnmCd ?? '',
+                userId: userInfo.userUnqId,
+                noApplicable,
+                laePicNm: submitInfo.laePicNm,
+                laeKbrdrJbgdNm: submitInfo.laeKbrdrJbgdNm,
+                laeKbrdrDeptNm: submitInfo.laeKbrdrDeptNm,
+                laePicTelNo: submitInfo.laePicTelNo,
+                laeIdfrNm: submitInfo.laeIdfrNm,
+                laeIdfrJbgdNm: submitInfo.laeIdfrJbgdNm,
+                laeIdfrDeptNm: submitInfo.laeIdfrDeptNm,
+                laeIdfrTelNo: submitInfo.laeIdfrTelNo,
+                submitList,
+            };
+
+            setGlobalProgressLabel('일반 검증 진행 중...');
+            const response =
+                await statisticsInputPublicSewageFacilityApiService.submitPublicSewageFacility(
+                    requestData,
+                );
+
+            if (response.status !== 'success') {
+                alert(response.message || '데이터 제출 중 오류가 발생했습니다.');
+                return;
+            }
+
+            const finalStatus = response.data?.finalStatus;
+            const nvpassed = response.data?.nvpassed;
+
+            if (finalStatus === '5') {
+                setGlobalProgress(50);
+                setGlobalProgressLabel('IMR 검증 진행 중...');
+                const imrParam = {
+                    user_id: userInfo.userUnqId,
+                    sewer_bzmn_cd: lastSearchedValues.bsnmCd ?? '',
+                    stats_cd: statsCdForTab,
+                    stats_yr: lastSearchedValues.year ?? '',
+                    lae_sbmsn_stts_cd: activeTabStatus?.laeSbmsnSttsCd === '4' ? '4' : '2',
+                    gen_verify_stts_cd: nvpassed ? '1' : '2',
+                };
+
+                try {
+                    const imrResponse = await statisticsApi.callImrService(imrParam);
+                    if (imrResponse.job_id) {
+                        await waitForImrJobCompleted(
+                            imrResponse.job_id,
+                            (id) => statisticsApi.getImrStatus(id),
+                            {
+                                onProgress: (jobProgress) => {
+                                    setGlobalProgress(50 + Math.round(jobProgress / 2));
+                                },
+                            },
+                        );
+                    }
+                    setGlobalProgress(100);
+                    await loadPublicSewageFacilityActiveTabData(
+                        'ST00060001',
+                        searchParamRef.current,
+                        lastSearchedValues,
+                    );
+                    await openVerificationResultDialogIfNeeded(
+                        {
+                            sewerBzmnCd: lastSearchedValues.bsnmCd ?? '',
+                            ctpvNm: lastSearchedValues.sido ?? '',
+                            sggNm: lastSearchedValues.gugun === 'ALL' ? '' : (lastSearchedValues.gugun ?? ''),
+                            statsYr: lastSearchedValues.year ?? '',
+                            statsCd: statsCdForTab,
+                        },
+                        setVerificationResultDialogOpen,
+                        { notify: alert },
+                    );
+                } catch (e) {
+                    await loadPublicSewageFacilityActiveTabData(
+                        'ST00060001',
+                        searchParamRef.current,
+                        lastSearchedValues,
+                    );
+                    await openVerificationResultDialogIfNeeded(
+                        {
+                            sewerBzmnCd: lastSearchedValues.bsnmCd ?? '',
+                            ctpvNm: lastSearchedValues.sido ?? '',
+                            sggNm: lastSearchedValues.gugun === 'ALL' ? '' : (lastSearchedValues.gugun ?? ''),
+                            statsYr: lastSearchedValues.year ?? '',
+                            statsCd: statsCdForTab,
+                        },
+                        setVerificationResultDialogOpen,
+                        { notify: alert, notifySubmitComplete: false },
+                    );
+                    const msg =
+                        e instanceof Error && e.message
+                            ? e.message
+                            : 'IMR 검증 중 오류가 발생했습니다.\n관리자에게 문의하세요.';
+                    alert(msg);
+                }
+            } else {
+                setGlobalProgress(100);
+                await loadPublicSewageFacilityActiveTabData(
+                    'ST00060001',
+                    searchParamRef.current,
+                    lastSearchedValues,
+                );
+                await openVerificationResultDialogIfNeeded(
+                    {
+                        sewerBzmnCd: lastSearchedValues.bsnmCd ?? '',
+                        ctpvNm: lastSearchedValues.sido ?? '',
+                        sggNm: lastSearchedValues.gugun === 'ALL' ? '' : (lastSearchedValues.gugun ?? ''),
+                        statsYr: lastSearchedValues.year ?? '',
+                        statsCd: statsCdForTab,
+                    },
+                    setVerificationResultDialogOpen,
+                    { notify: alert },
+                );
+            }
+        } catch {
+            alert('데이터 제출 중 오류가 발생했습니다.');
+        } finally {
+            hideGlobalProgress();
+        }
     };
 
     const saveFunc = () => {
-        console.log('save');
-        // 저장 로직
-    };
-    
-    const getOperateDataFunc = () => {
-        console.log('get operate data');
-        // 운영 데이터 가져오기
+        void (async () => {
+            const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+            if (verificationBlocked) {
+                alert(verificationBlocked);
+                return;
+            }
+
+            if (!lastSearchedValues || !searchParamRef.current) {
+                alert('먼저 조회를 진행해주세요.');
+                return;
+            }
+
+            if (activeTab === 'ST00060002') {
+                const statusCodeResponse = await statisticsApi.CheckStatusCode({
+                    sewerBzmnCd: lastSearchedValues.bsnmCd ?? '',
+                    statsCd: 'ST00060001',
+                    statsYr: lastSearchedValues.year ?? ''
+                });
+
+                if (statusCodeResponse.status === 'success') {
+                    if (!['0', '1', '4'].includes(statusCodeResponse.data)) {
+                        const codeName = statusCodeResponse.data === '2' ? '제출' : (statusCodeResponse.data === '3' ? '승인' : '검증중');
+                        alert(`공공 하수처리 시설 데이터가 ${codeName} 상태일 때는 중심 처리 시설 데이터를 변경할 수 없습니다.`);
+                        return;
+                    }
+                } else {
+                    alert('오류가 발생했습니다.\n관리자에게 문의하세요')
+                }
+
+                if (!(await confirm('저장 하시겠습니까?'))) return;
+
+                const leftRows = rowDataMap.get('MainFacility') ?? [];
+                const rightRows = rowDataMap.get('MainFacilityTarget') ?? [];
+                if (!leftRows.length || !rightRows.length) {
+                    alert('저장할 데이터가 없습니다.');
+                    return;
+                }
+                if (!selectedMainFacilitySn) {
+                    alert('좌측에서 중심 처리 시설을 먼저 선택해주세요.');
+                    return;
+                }
+
+                const selectedMain = leftRows.find((r) => String(r.fcltSn ?? '') === selectedMainFacilitySn);
+                if (!selectedMain) {
+                    alert('선택된 중심 처리 시설 정보를 찾을 수 없습니다.');
+                    return;
+                }
+
+                const saveList: PublicSewageMainFacilityMappingSaveItem[] = rightRows
+                    .filter((r) => isCheckedRow(r))
+                    .map((r) => ({
+                        fcltSn: String(r.fcltSn ?? ''),
+                        admdstCd: String(r.admdstCd ?? ''),
+                        admdstNm: String(r.admdstNm ?? ''),
+                        swtrmtFcltCd: String(r.swtrmtFcltCd ?? ''),
+                        swtrmtFcltNm: String(r.swtrmtFcltNm ?? ''),
+                        isMainYn: String(r.isMainYn ?? ''),
+                    }));
+
+                const deleteList = rightRows
+                    .filter((r) => String(r.mappedYn ?? '') === 'Y' && !isCheckedRow(r))
+                    .map((r) => String(r.fcltSn ?? ''))
+                    .filter((sn) => sn !== '');
+
+                const wholNopeFromRow = Number(selectedMain.wholNope ?? 0);
+                const deleteOnly = saveList.length === 0 && deleteList.length > 0;
+                const nothingToPersist = saveList.length === 0 && deleteList.length === 0;
+                if (nothingToPersist) {
+                    alert('저장할 변경 사항이 없습니다.');
+                    return;
+                }
+
+                mainFacilityMappingSaveDraftRef.current = {
+                    statsYr: lastSearchedValues.year ?? '',
+                    sewerBzmnCd: lastSearchedValues.bsnmCd ?? '',
+                    admdstCd: String(selectedMain.admdstCd ?? ''),
+                    admdstNm: String(selectedMain.admdstNm ?? ''),
+                    mainFcltSn: String(selectedMain.fcltSn ?? ''),
+                    mainFcltNm: String(selectedMain.swtrmtFcltNm ?? ''),
+                    initialCnsgnCstVl: Number(selectedMain.cnsgnCstVl ?? 0),
+                    saveList,
+                    deleteList,
+                    initialPrxyBzentyNmCn: String(selectedMain.prxyBzentyNmCn ?? ''),
+                    initialWholNope: Number.isFinite(wholNopeFromRow) ? wholNopeFromRow : 0,
+                    initialPrxyCtrtCn: String(selectedMain.prxyCtrtCn ?? ''),
+                };
+
+                if (deleteOnly) {
+                    const draft = mainFacilityMappingSaveDraftRef.current;
+                    const ok = await runMainFacilityMappingSave(draft, null);
+                    if (ok) {
+                        mainFacilityMappingSaveDraftRef.current = null;
+                    }
+                    return;
+                }
+
+                setMainFacilityMappingSaveDialogKey((k) => k + 1);
+                setMainFacilityMappingSaveDialogOpen(true);
+                return;
+            }
+
+            if (!(await confirm('저장 하시겠습니까?'))) return;
+
+            if (activeTab === 'ST00060001') {
+                const noApplicable = getNoApplicableForRequest();
+                const treatAsNoApplicable = noApplicable || isNotApplicable;
+                const currentData =
+                    st60001GridGetRowsRef.current?.() ?? rowDataMap.get('ST00060001') ?? [];
+                const saveList = treatAsNoApplicable ? [] : buildFacilitySaveList(currentData);
+                if (!treatAsNoApplicable && saveList.length === 0) {
+                    alert('해당사항 없음을 체크해주세요.');
+                    return;
+                }
+
+                try {
+                    showGlobalProgress({ label: '저장 진행 중...', progress: 0 });
+                    const userInfo = await getUserInfo();
+                    const param: PublicSewageFacilitySaveRequest = {
+                        statsYr: lastSearchedValues.year ?? '',
+                        ctpvNm: lastSearchedValues.sido ?? '',
+                        sggNm: lastSearchedValues.gugun === 'ALL' ? '' : lastSearchedValues.gugun ?? '',
+                        sewerBzmnCd: lastSearchedValues.bsnmCd ?? '',
+                        userId: userInfo.userUnqId,
+                        // superAdmin: isAdminInfo ? 'superAdmin' : '',
+                        noApplicable,
+                        saveList,
+                    };
+
+                    const response =
+                        await statisticsInputPublicSewageFacilityApiService.savePublicSewageFacility(
+                            param,
+                        );
+                    if (response.status === 'success') {
+                        setGlobalProgress(50);
+                        await loadPublicSewageFacilityActiveTabData(
+                            'ST00060001',
+                            searchParamRef.current,
+                            lastSearchedValues,
+                        );
+                        setGlobalProgress(100);
+                        alert('저장되었습니다.');
+                    } else {
+                        alert(response.message || '데이터 저장 중 오류가 발생했습니다.');
+                    }
+                } catch {
+                    alert('데이터 저장 중 오류가 발생했습니다.');
+                } finally {
+                    hideGlobalProgress();
+                }
+                return;
+            }
+
+            alert('현재 탭 저장 API 연동 전입니다.');
+        })();
     };
 
     const updateOperateDataButtonFunc = () => {
@@ -39,32 +587,766 @@ const PublicSewageFacilityInp = () => {
         // 운영 데이터 업데이트 로직
     };
 
-    const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
-    const [isNotApplicable, setIsNotApplicable] = useState(false);
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const [activeTab, setActiveTab] = useState<string>(
+        PublicSewageFactInpColumnList[0]?.tabKey ?? 'ST00060001',
+    );
+    const activeTabRef = useRef<string>(PublicSewageFactInpColumnList[0]?.tabKey ?? 'ST00060001');
+    const firstTabKey = PublicSewageFactInpColumnList[0]?.tabKey ?? 'ST00060001';
+    const searchParamRef = useRef<PublicSewageFacilityRequestParams | null>(null);
+
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            const entries = await Promise.all(
+                PUBLIC_SEWAGE_FACILITY_COLUMN_GUIDE_TAB_KEYS.map(async (tabKey) => {
+                    try {
+                        const res = await statisticsApi.getColumnGuides(tabKey);
+                        if (res.status !== 'success' || !Array.isArray(res.data)) {
+                            return [tabKey, {}] as const;
+                        }
+                        const next: Record<string, string> = {};
+                        for (const item of res.data) {
+                            const key = item.engColNm?.trim();
+                            const guide = item.columnGuide?.trim();
+                            if (key && guide) next[key] = guide;
+                        }
+                        return [tabKey, next] as const;
+                    } catch {
+                        return [tabKey, {}] as const;
+                    }
+                }),
+            );
+            if (cancelled) return;
+            setColumnGuidesByTab(Object.fromEntries(entries));
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
+    const commitToolbarSnapshotForLoadedTab = (
+        tabKey: string,
+        statusInfo: SewerageStatusInfo | null,
+        hasRowData: boolean,
+        searchContext: SearchFormValues | null,
+    ) => {
+        setToolbarSnapshotByTab((prev) => {
+            const next = new Map(prev);
+            next.set(
+                tabKey,
+                computeTabToolbarSnapshot(
+                    statusInfo,
+                    hasRowData,
+                    searchDoneRef.current,
+                    searchContext,
+                    periodEnterableRef.current,
+                    isAdminInfo,
+                ),
+            );
+            return next;
+        });
+    };
+
+    const buildPublicSewageFacilityParams = (values: SearchFormValues): PublicSewageFacilityRequestParams => ({
+        ctpvNm: values.sido,
+        sggNm: values.gugun === 'ALL' ? '' : values.gugun,
+        sewerBzmnCd: values.bsnmCd,
+        fcltNm: values.fctName,
+        statsYr: values.year,
+    });
+
+    const tabRowDataExists = (tabKey: string): boolean => {
+        if (tabKey === 'ST00060002') {
+            const left = rowDataMap.get('MainFacility');
+            const right = rowDataMap.get('MainFacilityTarget');
+            return (left?.length ?? 0) > 0 || (right?.length ?? 0) > 0;
+        }
+        return (rowDataMap.get(tabKey)?.length ?? 0) > 0;
+    };
+
+    const loadPublicSewageFacilityActiveTabData = async (
+        tabKey: string,
+        param: PublicSewageFacilityRequestParams,
+        searchContext: SearchFormValues | null,
+    ): Promise<boolean> => {
+        try {
+            if (tabKey === 'ST00060001') {
+                const response = await statisticsInputPublicSewageFacilityApiService.getPublicSewageFacility(param);
+                if (response.status !== 'success') {
+                    alert(response.message || '데이터 조회 중 오류가 발생했습니다.');
+                    return false;
+                }
+                setSelectedMainFacilitySn(null);
+                const statusInfo = response.data.statusInfo ?? null;
+                const statsCd = response.data.commonInfo.statsCd || tabKey;
+                const commonInfo = response.data.commonInfo;
+                const list = response.data.publicSewageFacilityList ?? [];
+                const convertedData = list.map((item) => ({
+                    ctpvNm: commonInfo.ctpvNm,
+                    ...item,
+                    rmrk: item.rmrk ?? null,
+                }));
+
+                if (list.length === 0) {
+                    setShowIsNotApplicable(true);
+                } else {
+                    setShowIsNotApplicable(false);
+                }
+
+                const gridRows = toGridRows(convertedData);
+                setTabStatusInfoMap((prev) => {
+                    const next = new Map(prev);
+                    next.set(tabKey, statusInfo);
+                    return next;
+                });
+                setTabStatsCdMap((prev) => {
+                    const next = new Map(prev);
+                    next.set(tabKey, statsCd);
+                    return next;
+                });
+                setRowDataMap((prev) => {
+                    const next = new Map(prev);
+                    next.set('ST00060001', gridRows);
+                    return next;
+                });
+                commitToolbarSnapshotForLoadedTab(tabKey, statusInfo, gridRows.length > 0, searchContext);
+                return true;
+            }
+
+            if (tabKey === 'ST00060002') {
+                const response = await statisticsInputPublicSewageFacilityApiService.getPublicSewageMainFacility(param);
+                if (response.status !== 'success') {
+                    alert(response.message || '데이터 조회 중 오류가 발생했습니다.');
+                    return false;
+                }
+                setSelectedMainFacilitySn(null);
+                const statusInfo = response.data.statusInfo ?? null;
+                const statsCd = response.data.commonInfo.statsCd || tabKey;
+                const list = response.data.mainFacilityList ?? [];
+                const leftRows = list.map((item) => ({
+                    swtrmtFcltNm: item.swtrmtFcltNm,
+                    fcltPstnCn: item.fcltPstnCn,
+                    prxyBzentyNmCn: item.prxyBzentyNmCn,
+                    cnsgnCstVl: item.cnsgnCstVl,
+                    prxyCtrtCn: item.prxyCtrtCn,
+                    wholNope: item.wholNope,
+                    isMainYn: item.isMainYn,
+                    admdstCd: item.admdstCd,
+                    fcltSn: item.fcltSn,
+                    swtrmtFcltCd: item.swtrmtFcltCd,
+                    sggNm: item.sggNm ?? '',
+                    admdstNm: item.admdstNm,
+                }));
+                const leftGridRows = toGridRows(leftRows);
+                setTabStatusInfoMap((prev) => {
+                    const next = new Map(prev);
+                    next.set(tabKey, statusInfo);
+                    return next;
+                });
+                setTabStatsCdMap((prev) => {
+                    const next = new Map(prev);
+                    next.set(tabKey, statsCd);
+                    return next;
+                });
+                setRowDataMap((prev) => {
+                    const next = new Map(prev);
+                    next.set('MainFacility', leftGridRows);
+                    next.set('MainFacilityTarget', []);
+                    return next;
+                });
+                commitToolbarSnapshotForLoadedTab(tabKey, statusInfo, leftGridRows.length > 0, searchContext);
+                return true;
+            }
+
+            return true;
+        } catch {
+            alert('데이터 조회 중 오류가 발생했습니다.');
+            return false;
+        }
+    };
+
+    const runMainFacilityMappingSave = async (
+        draft: MainFacilityMappingSaveDraft,
+        dialogInput: MainFacilityMappingSaveDialogValues | null,
+    ): Promise<boolean> => {
+        if (!searchParamRef.current || !lastSearchedValues) {
+            return false;
+        }
+        try {
+            showGlobalProgress({ label: '저장 진행 중...', progress: 0 });
+            const userInfo = await getUserInfo();
+            const base = {
+                statsYr: draft.statsYr,
+                sewerBzmnCd: draft.sewerBzmnCd,
+                admdstCd: draft.admdstCd,
+                admdstNm: draft.admdstNm,
+                mainFcltSn: draft.mainFcltSn,
+                mainFcltNm: draft.mainFcltNm,
+                userId: userInfo.userUnqId,
+                saveList: draft.saveList,
+                deleteList: draft.deleteList,
+            };
+            const param: PublicSewageMainFacilityMappingSaveRequest = dialogInput
+                ? {
+                    ...base,
+                    prxyBzentyNmCn: dialogInput.prxyBzentyNmCn,
+                    cnsgnCstVl: dialogInput.cnsgnCstVl,
+                    wholNope: dialogInput.wholNope,
+                    prxyCtrtCn: dialogInput.prxyCtrtCn,
+                }
+                : { ...base };
+            const response =
+                await statisticsInputPublicSewageFacilityApiService.saveMainFacilityMapping(param);
+            if (response.status === 'success') {
+                setGlobalProgress(50);
+                await loadPublicSewageFacilityActiveTabData(
+                    'ST00060002',
+                    searchParamRef.current,
+                    lastSearchedValues,
+                );
+                setGlobalProgress(100);
+                alert('저장되었습니다.');
+                return true;
+            }
+            alert(response.message || '데이터 저장 중 오류가 발생했습니다.');
+            return false;
+        } catch {
+            alert('데이터 저장 중 오류가 발생했습니다.');
+            return false;
+        } finally {
+            hideGlobalProgress();
+        }
+    };
+
+    const handleMainFacilityMappingSaveConfirm = async (input: MainFacilityMappingSaveDialogValues) => {
+        const draft = mainFacilityMappingSaveDraftRef.current;
+        if (!draft || !searchParamRef.current || !lastSearchedValues) {
+            setMainFacilityMappingSaveDialogOpen(false);
+            mainFacilityMappingSaveDraftRef.current = null;
+            return;
+        }
+        const ok = await runMainFacilityMappingSave(draft, input);
+        if (ok) {
+            setMainFacilityMappingSaveDialogOpen(false);
+            mainFacilityMappingSaveDraftRef.current = null;
+        }
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        if (!values.sido || values.sido === 'ALL') {
+            alert('시도를 선택해주세요.');
+            return;
+        }
+        try {
+            const periodResponse = await statisticsInputSewSupplyRateApi.checkInputPeriod(values.year || '');
+            if (periodResponse.status !== 'success') {
+                alert(periodResponse.message);
+                return;
+            }
+            const periods = Array.isArray(periodResponse.data) ? periodResponse.data : [];
+            setPeriodCheckList(periods);
+            const periodOk = isInputPeriodCurrent(periods);
+            periodEnterableRef.current = periodOk;
+            setInputPeriodEnterable(periodOk);
+
+            const yearChangedFromLastSearch =
+                lastSearchedValues != null &&
+                (lastSearchedValues.year ?? '') !== (values.year ?? '');
+
+            // 조회 시 이전 선택 로우 강조 초기화
+            setSelectedMainFacilitySn(null);
+
+            if (yearChangedFromLastSearch) {
+                setRowDataMap(new Map());
+                setTabStatusInfoMap(new Map());
+                setTabStatsCdMap(new Map());
+                setToolbarSnapshotByTab(new Map());
+                activeTabRef.current = firstTabKey;
+                setActiveTab(firstTabKey);
+            }
+
+            setLastSearchedValues(values);
+            searchDoneRef.current = true;
+            setHasSearched(true);
+            setIsNotApplicableByTab((prev) => {
+                const next = new Map(prev);
+                next.set('ST00060001', false);
+                return next;
+            });
+
+            setIsLoading(true);
+            const param = buildPublicSewageFacilityParams(values);
+            searchParamRef.current = param;
+            const tabKeyToLoad = yearChangedFromLastSearch ? firstTabKey : activeTabRef.current;
+            await loadPublicSewageFacilityActiveTabData(tabKeyToLoad, param, values);
+        } catch {
+            alert('데이터 조회 중 오류가 발생했습니다.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        const prevTabKey = activeTabRef.current;
+        if (prevTabKey === 'ST00060001') {
+            const latestRowsInPrevTab =
+                st60001GridGetRowsRef.current?.() ?? rowDataMap.get('ST00060001') ?? [];
+            if (latestRowsInPrevTab.length > 0 || rowDataMap.has('ST00060001')) {
+                setRowDataMap((prev) => {
+                    const next = new Map(prev);
+                    next.set('ST00060001', latestRowsInPrevTab);
+                    return next;
+                });
+            }
+        }
+
+        activeTabRef.current = tabKey;
+        setActiveTab(tabKey);
+
+        if (!hasSearched || tabRowDataExists(tabKey) || !searchParamRef.current) return;
+        try {
+            setIsLoading(true);
+            await loadPublicSewageFacilityActiveTabData(tabKey, searchParamRef.current, lastSearchedValues);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleReset = () => {
+        setIsLoading(false);
+        setHasSearched(false);
+        setIsNotApplicableByTab(new Map());
+        setShowIsNotApplicable(false);
+
+        setRowDataMap(new Map());
+        setTabStatusInfoMap(new Map());
+        setTabStatsCdMap(new Map());
+        setToolbarSnapshotByTab(new Map());
+
+        setInputPeriodEnterable(true);
+        periodEnterableRef.current = true;
+        setPeriodCheckList([]);
+
+        searchParamRef.current = null;
+        searchDoneRef.current = false;
+
+        activeTabRef.current = firstTabKey;
+        setActiveTab(firstTabKey);
+        setLastSearchedValues(null);
+        setSelectedMainFacilitySn(null);
+    };
+
+    const cnacelSubmitFunc = async () => {
+        try {
+            if (await confirm('제출된 내용을 취소하시겠습니까?')) {
+                const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+                if (verificationBlocked) {
+                    alert(verificationBlocked);
+                    return;
+                }
+
+                const userInfo = await getUserInfo();
+                const statsCdForCancel = tabStatsCdMap.get(activeTab) ?? activeTab;
+                const requestData: cancelSubmitRequest = {
+                    sewerBzmnCd: lastSearchedValues?.bsnmCd ?? '',
+                    ctpvNm: lastSearchedValues?.sido ?? '',
+                    sggNm: lastSearchedValues?.gugun === 'ALL' ? '' : lastSearchedValues?.gugun ?? '',
+                    statsYr: lastSearchedValues?.year ?? '',
+                    mdfrId: userInfo.userUnqId,
+                    statsCd: statsCdForCancel,
+                };
+
+                const response = await statisticsApi.cancelSubmit(requestData);
+
+                if (response.status === 'success') {
+                    if (searchParamRef.current) {
+                        await loadPublicSewageFacilityActiveTabData(
+                            activeTab,
+                            searchParamRef.current,
+                            lastSearchedValues,
+                        );
+                    }
+                    alert('제출 취소되었습니다.');
+                } else {
+                    alert(response.message ?? '제출 취소 중 오류가 발생했습니다.');
+                }
+            }
+        } catch {
+            alert('제출 취소 중 오류가 발생했습니다.');
+        }
+    };
+
+    const getGridColumnInfo = (
+        tab: ColumnInfoList,
+        guideTabKey?: string,
+    ): ColumnInfo => ({
+        columns: (tab.columns ?? []).map((col) => {
+            const guide = columnGuidesByTab[guideTabKey ?? tab.tabKey]?.[col.fieldName]?.trim();
+            return {
+                ...col,
+                tooltip: guide && guide.length > 0 ? guide : undefined,
+            };
+        }),
+        columnLayout: tab.columnLayout ?? [],
+    });
+
+    const handleMainFacilityRowClick = async (rowData: Record<string, string | number>) => {
+        if (!searchParamRef.current) {
+            alert('먼저 조회를 진행해주세요.');
+            return;
+        }
+        const fcltSn = String(rowData.fcltSn ?? '');
+        if (!fcltSn) {
+            alert('시설 일련번호가 없습니다.');
+            return;
+        }
+        setSelectedMainFacilitySn(fcltSn);
+
+        const param: PublicSewageMappingTargetsRequestParams = {
+            sewerBzmnCd: searchParamRef.current.sewerBzmnCd ?? '',
+            ctpvNm: searchParamRef.current.ctpvNm ?? '',
+            sggNm: searchParamRef.current.sggNm ?? '',
+            statsYr: searchParamRef.current.statsYr ?? '',
+            fcltSn,
+        };
+
+        try {
+            setIsLoading(true);
+            const response = await statisticsInputPublicSewageFacilityApiService.getMappingTargets(param);
+            if (response.status !== 'success') {
+                alert(response.message || '매핑 대상 조회 중 오류가 발생했습니다.');
+                return;
+            }
+            const rawList = response.data ?? [];
+            if (rawList.length === 0) {
+                alert('해당 시설은 중심처리시설의 위탁시설로 연결되어있습니다.');
+            }
+            const mappedTargetRows = rawList.map((item) => ({
+                ...item,
+                __checked: item.mappedYn === 'Y' ? 'Y' : '',
+            }));
+            setRowDataMap((prev) => {
+                const next = new Map(prev);
+                next.set('MainFacilityTarget', toGridRows(mappedTargetRows));
+                return next;
+            });
+        } catch {
+            alert('매핑 대상 조회 중 오류가 발생했습니다.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const leftMainFacilityCellStyleCallback = ({ row }: CellStyleCallbackParams) => {
+        if (!selectedMainFacilitySn) return;
+        return String(row.fcltSn ?? '') === selectedMainFacilitySn ? 'rg-cell-selected-row' : undefined;
+    };
+
+    const searchContextForToolbar = lastSearchedValues ?? searchValues;
+    const gugunOkOrNotDoList = buildGugunOkForToolbar(searchContextForToolbar);
+    const activeTabStatus = tabStatusInfoMap.get(activeTab) ?? null;
+    const activeTabToolbar = computeTabToolbarSnapshot(
+        activeTabStatus,
+        tabRowDataExists(activeTab),
+        hasSearched,
+        searchContextForToolbar,
+        inputPeriodEnterable,
+        isAdminInfo,
+    );
+    const {
+        showSaveInToolbar: baseShowSaveInToolbar,
+        showEnterableToolbarButtons: baseShowEnterableToolbarButtons,
+        showActionToolbarCard: baseShowActionToolbarCard,
+    } = activeTabToolbar;
+    const isMainFacilityTab = activeTab === 'ST00060002';
+    const showMainFacilitySaveInToolbar =
+        isMainFacilityTab &&
+        tabRowDataExists('ST00060002') &&
+        gugunOkOrNotDoList &&
+        (isAdminInfo || inputPeriodEnterable);
+    const showSaveInToolbar =
+        toolbarGroupAllowed && (baseShowSaveInToolbar || showMainFacilitySaveInToolbar);
+    const showEnterableToolbarButtons =
+        baseShowEnterableToolbarButtons && toolbarGroupAllowed;
+    const showActionToolbarCard =
+        toolbarGroupAllowed &&
+        (baseShowActionToolbarCard || showMainFacilitySaveInToolbar);
+
+    const openVerificationHistoryDialog = () => {
+        const ctx = lastSearchedValues ?? searchValues;
+        const activeTabStatsCd = tabStatsCdMap.get(activeTab) ?? activeTab;
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !activeTabStatsCd) {
+            alert('먼저 조회를 진행해주세요.');
+            return;
+        }
+        setVerificationHistoryOpen(true);
+    };
+
+    const verificationQueryContext =
+        (() => {
+            const ctx = lastSearchedValues ?? searchValues;
+            const statsCd = tabStatsCdMap.get(activeTab) ?? activeTab;
+            if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !statsCd) return null;
+            return {
+                sewerBzmnCd: ctx.bsnmCd,
+                ctpvNm: ctx.sido,
+                sggNm: ctx.gugun === 'ALL' ? '' : (ctx.gugun ?? ''),
+                statsYr: ctx.year,
+                statsCd,
+            };
+        })();
 
     return (
         <>
-            <SearchForm fctName={true} />
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
-                    <SubmitButton submitFunc={submitFunc} />
-                    <SaveButton saveFunc={saveFunc} />
-                </div>
+            <div className="relative">
+                <SearchForm
+                    fctName={true}
+                    onSubmit={handleSearch}
+                    onReset={handleReset}
+                    onValuesChange={setSearchValues}
+                />
+                {showActionToolbarCard && (
+                    <div className="card !py-0">
+                        <div className="flex justify-end items-center gap-[0.6rem] mx-[0.6rem]">
+                            {!isMainFacilityTab && (
+                                <VerificationResultButton
+                                    VerificationResultButtonFunc={openVerificationHistoryDialog}
+                                />
+                            )}
+                            {showEnterableToolbarButtons && !isMainFacilityTab && (
+                                <>
+                                    {showIsNotApplicable && <NotApplicableCheckButton isCheck={isNotApplicable} setIsCheck={setIsNotApplicable} />}
+                                    <UpdateOperateDataButton updateOperateDataButtonFunc={updateOperateDataButtonFunc} />
+                                    <SubmitButton submitFunc={submitFunc} />
+                                </>
+                            )}
+                            {!isMainFacilityTab && activeTabStatus?.laeSbmsnSttsCd === '2' && (
+                                <CancelSubmitButton cnacelSubmitFunc={cnacelSubmitFunc} />
+                            )}
+                            {showSaveInToolbar && <SaveButton saveFunc={saveFunc} />}
+                        </div>
+                    </div>
+                )}
+                {isLoading && !globalProgressVisible && (
+                    <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>
+                )}
+                <Tabs value={activeTab} onValueChange={(v) => void handleActiveTabChange(v)}>
+                    <TabsList>
+                        {PublicSewageFactInpColumnList.map((tab) => (
+                            <TabsTrigger key={tab.tabKey} value={tab.tabKey}>
+                                {tab.tabLabel || tab.tabKey}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+
+                    {PublicSewageFactInpColumnList.map((tab) => {
+                        if (tab.isSplitGrid && tab.left && tab.right) {
+                            const leftKey = tab.left.tabKey ?? `${tab.tabKey}_left`;
+                            const rightKey = tab.right.tabKey ?? `${tab.tabKey}_right`;
+                            return (
+                                <TabsContent key={tab.tabKey} value={tab.tabKey}>
+                                    <SplitDataGrid
+                                        leftColumnInfo={getGridColumnInfo(tab.left, tab.tabKey)}
+                                        rightColumnInfo={getGridColumnInfo(tab.right, tab.tabKey)}
+                                        leftFixedColumns={tab.left.fixedColumns}
+                                        rightFixedColumns={tab.right.fixedColumns}
+                                        showHeaderCheckbox={true}
+                                        enableSort={false}
+                                        leftRowData={rowDataMap.get(leftKey) ?? []}
+                                        rightRowData={rowDataMap.get(rightKey) ?? []}
+                                        leftOnRowClick={
+                                            tab.tabKey === 'ST00060002'
+                                                ? (row) => {
+                                                    void handleMainFacilityRowClick(row);
+                                                }
+                                                : undefined
+                                        }
+                                        leftCellStyleCallback={
+                                            tab.tabKey === 'ST00060002'
+                                                ? leftMainFacilityCellStyleCallback
+                                                : undefined
+                                        }
+                                        rightOnItemChecked={
+                                            tab.tabKey === 'ST00060002'
+                                                ? (itemIndex, checked) => {
+                                                    setRowDataMap((prev) => {
+                                                        const next = new Map(prev);
+                                                        const rows = [...(next.get('MainFacilityTarget') ?? [])];
+                                                        if (!rows[itemIndex]) return prev;
+                                                        rows[itemIndex] = {
+                                                            ...rows[itemIndex],
+                                                            __checked: checked ? 'Y' : '',
+                                                        };
+                                                        next.set('MainFacilityTarget', rows);
+                                                        return next;
+                                                    });
+                                                }
+                                                : undefined
+                                        }
+                                        rightOnItemAllChecked={
+                                            tab.tabKey === 'ST00060002'
+                                                ? (checked) => {
+                                                    setRowDataMap((prev) => {
+                                                        const next = new Map(prev);
+                                                        const rows = [...(next.get('MainFacilityTarget') ?? [])].map((r) => ({
+                                                            ...r,
+                                                            __checked: checked ? 'Y' : '',
+                                                        }));
+                                                        next.set('MainFacilityTarget', rows);
+                                                        return next;
+                                                    });
+                                                }
+                                                : undefined
+                                        }
+                                        setLeftRowData={(updater) => {
+                                            setRowDataMap((prev) => {
+                                                const next = new Map(prev);
+                                                const cur = next.get(leftKey) ?? [];
+                                                const n =
+                                                    typeof updater === 'function'
+                                                        ? (updater as (p: Record<string, string | number>[]) => Record<string, string | number>[])(cur)
+                                                        : updater;
+                                                next.set(leftKey, n);
+                                                return next;
+                                            });
+                                        }}
+                                        setRightRowData={(updater) => {
+                                            setRowDataMap((prev) => {
+                                                const next = new Map(prev);
+                                                const cur = next.get(rightKey) ?? [];
+                                                const n =
+                                                    typeof updater === 'function'
+                                                        ? (updater as (p: Record<string, string | number>[]) => Record<string, string | number>[])(cur)
+                                                        : updater;
+                                                next.set(rightKey, n);
+                                                return next;
+                                            });
+                                        }}
+                                    />
+                                </TabsContent>
+                            );
+                        }
+
+                        const gridColumnInfo = getGridColumnInfo(tab);
+                        const tabStatus = tabStatusInfoMap.get(tab.tabKey) ?? null;
+                        const tabEnterableForGrid = computeTabEnterable(
+                            tabStatus,
+                            inputPeriodEnterable,
+                        );
+                        const excelToolbarEnabledForTab =
+                            tabRowDataExists(tab.tabKey) &&
+                            tabEnterableForGrid &&
+                            gugunOkOrNotDoList;
+
+                        return (
+                            <TabsContent key={tab.tabKey} value={tab.tabKey}>
+                                <DataGrid
+                                    key={tab.tabKey}
+                                    columnInfo={gridColumnInfo}
+                                    rowStartNum={tab.rowStartNum}
+                                    excelExportFileSuffix={tab.tabLabel || tab.tabKey}
+                                    fixedColumns={tab.fixedColumns}
+                                    statusInfo={tabStatus}
+                                    rowData={rowDataMap.get(tab.tabKey) ?? []}
+                                    setRowData={(updater) => {
+                                        setRowDataMap((prev) => {
+                                            const next = new Map(prev);
+                                            const cur = next.get(tab.tabKey) ?? [];
+                                            const n =
+                                                typeof updater === 'function'
+                                                    ? (updater as (p: Record<string, string | number>[]) => Record<string, string | number>[])(cur)
+                                                    : updater;
+                                            next.set(tab.tabKey, n);
+                                            return next;
+                                        });
+                                    }}
+                                    getGridDataRef={
+                                        tab.tabKey === 'ST00060001' ? st60001GridGetRowsRef : undefined
+                                    }
+                                    isExcelImport={excelToolbarEnabledForTab}
+                                    isExcelExport
+                                    showHeaderCheckbox={false}
+                                    enableSort={false}
+                                    cellStyleCallback={({ row, fieldName }) => {
+                                        const verification = (row as GridRowWithVerification).verificationResult;
+                                        if (!verification) return;
+                                        const errors = verification[fieldName];
+                                        if (Array.isArray(errors) && errors.length > 0) {
+                                            const hasImr = errors.some((e) => e.vrfcCd === "IMR" || e.vrfcCd === "HB");
+                                            return hasImr ? "rg-cell-verify-error-imr" : "rg-cell-verify-error";
+                                        }
+                                    }}
+                                    cellTooltipCallback={({ row, fieldName }) => {
+                                        const verification = (row as GridRowWithVerification).verificationResult;
+                                        if (!verification) return;
+                                        const errors = verification[fieldName];
+                                        if (Array.isArray(errors) && errors.length > 0) {
+                                            return errors
+                                                .map((e) => {
+                                                    const prefix =
+                                                        e.vrfcCd === "IMR" ? "IMR검증 - " : (e.vrfcCd === "NV" ? "일반검증 - " : "HB검증 - ");
+                                                    const comp = e.compVlCn ?? "";
+                                                    const now = e.nowVlCn ?? "";
+                                                    return `${prefix}${e.rsnExpln}
+                                                (검증 기준값: ${comp} / 현재 입력값: ${now})`;
+                                                })
+                                                .filter(Boolean)
+                                                .join("\n");
+                                        }
+                                    }}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+                </Tabs>
             </div>
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <NotApplicableCheckButton isCheck={isNotApplicable} setIsCheck={setIsNotApplicable} />
-                    <UpdateOperateDataButton updateOperateDataButtonFunc={updateOperateDataButtonFunc} /> 
-                    <OperateDataButton getOperateDataFunc={getOperateDataFunc} />
-                </div>
-            </div>
-            <DataGrid 
-                columnInfo={ PublicSewageFactInpColumn } 
-                rowStartNum={3} 
-                fixedColumns={2} 
-                rowData={rowData} 
-                setRowData={setRowData} 
+            <VerificationResultHistoryDialog
+                open={verificationHistoryOpen}
+                onOpenChange={setVerificationHistoryOpen}
+                queryContext={verificationQueryContext}
+                onExceptionResetSubmitted={async () => {
+                    const ctx = lastSearchedValues ?? searchValues;
+                    if (!ctx || !searchParamRef.current) return;
+                    await loadPublicSewageFacilityActiveTabData(activeTab, searchParamRef.current, ctx);
+                }}
+            />
+            <SubmitDailog
+                open={showDailog}
+                onOpenChange={setShowDailog}
+                statusInfo={activeTabStatus}
+                onConfirm={executeSubmit}
+                submitMode="normal"
+                isLoading={isLoading}
+            />
+            <VerificationResultDialog
+                open={verificationResultDialogOpen}
+                onOpenChange={setVerificationResultDialogOpen}
+                queryContext={verificationQueryContext}
+                onExceptionSubmitted={async () => {
+                    const ctx = lastSearchedValues ?? searchValues;
+                    if (!ctx || !searchParamRef.current) return;
+                    await loadPublicSewageFacilityActiveTabData(activeTab, searchParamRef.current, ctx);
+                }}
+            />
+            <MainFacilityMappingSaveDialog
+                key={`main-facility-mapping-save-${mainFacilityMappingSaveDialogKey}`}
+                open={mainFacilityMappingSaveDialogOpen}
+                onOpenChange={(open) => {
+                    setMainFacilityMappingSaveDialogOpen(open);
+                    if (!open) {
+                        mainFacilityMappingSaveDraftRef.current = null;
+                    }
+                }}
+                initialPrxyBzentyNmCn={mainFacilityMappingSaveDraftRef.current?.initialPrxyBzentyNmCn ?? ''}
+                initialCnsgnCstVl={mainFacilityMappingSaveDraftRef.current?.initialCnsgnCstVl ?? 0}
+                initialWholNope={mainFacilityMappingSaveDraftRef.current?.initialWholNope ?? 0}
+                initialPrxyCtrtCn={mainFacilityMappingSaveDraftRef.current?.initialPrxyCtrtCn ?? ''}
+                onConfirm={handleMainFacilityMappingSaveConfirm}
             />
         </>
     );
diff --git a/apps/st/src/components/statistics/input/PumpingStationInp.tsx b/apps/st/src/components/statistics/input/PumpingStationInp.tsx
index 2261a8eac..0a4be8402 100644
--- a/apps/st/src/components/statistics/input/PumpingStationInp.tsx
+++ b/apps/st/src/components/statistics/input/PumpingStationInp.tsx
@@ -1,80 +1,1061 @@
-import { useState } from "react";
+import {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    type RefObject,
+} from "react";
+
+import { flushSync } from "react-dom";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { ValueType } from "realgrid";
+import type { RealGridReact } from "realgrid-react";
+import { LoadingWithAnimation } from "@common/components";
 
-import SearchForm from "@/components/module/SearchForm";
-import { DataGrid } from '@rsone/components';
-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 AddArticleButton from "@/components/button/AddArticleButton";
+import CancelSubmitButton from "@/components/button/CancelSubmitButton";
 import DeleteArticleButton from "@/components/button/DeleteArticleButton";
+import LastYearDataButton from "@/components/button/LastYearDataButton";
 import NotApplicableCheckButton from "@/components/button/NotApplicableCheckButton";
+import SaveButton from "@/components/button/SaveButton";
+import SubmitButton from "@/components/button/SumitButton";
+import VerificationResultButton from "@/components/button/VerificationResultButton";
+import DataGrid from "@/components/module/DataGrid";
+import { openVerificationResultDialogIfNeeded } from "@/components/module/post-submit-verification-results";
+import SearchForm from "@/components/module/SearchForm";
+import { VerificationResultDialog } from "@/components/module/VerificationResultDialog";
+import { VerificationResultHistoryDialog } from "@/components/module/VerificationResultHistoryDialog";
+import { PumpingStationInpColumn } from "@/components/util/column/input/PumpingStationInpColumn";
+import SubmitDailog from "./SubmitDailog";
+import type {
+    CellStyleCallbackParams,
+    CellTooltipCallbackParams,
+    ColumnConfig,
+} from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { doList } from "@/components/util/column/input/DoList";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import { formatCompactYmdForGrid, toCompactYmd } from "@/components/util/grid/ymdFormat";
+import { statisticsInputPumpingStationApi } from "@/entities/statistics/api/input/statistics-input-pumping-station-service";
+import { statisticsInputSewSupplyRateApi } from "@/entities/statistics/api/input/statistics-input-sew-supply-rate-service";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import { isInputPeriodCurrent } from "@/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface";
+import {
+    PUMPING_STATION_STATS_CD,
+    type PumpingStationItem,
+    type PumpingStationRequestParams,
+    type PumpingStationSaveItem,
+    type PumpingStationVerificationResult,
+} from "@/entities/statistics/model/input/statistics-input-pumping-station-interface";
+import type {
+    ApiResponse,
+    cancelSubmitRequest,
+    ImrStatusResponse,
+    Sgg,
+    SewerageStatusInfo,
+} from "@/entities/statistics/model/statistics-interface";
+import { useAlertStore, useGlobalProgressStore, useStatisticsInputToolbarGroupGate } from "@/shared/lib";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { useAdminStore } from "@/store/admin-store";
 
-import { PumpingStationInpColumn } from "@/components/util/column/input/PumpingStationInpColumn"
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+import type { StatisticsInputSubmitInfoFormData } from "@/entities/statistics/model/statistics-input-submit-info-schema";
 
-// 하수도 통계 관리 > 05. 펌프장
+type GridRowWithVerification = Record<string, string | number> & {
+    verificationResult?: PumpingStationVerificationResult;
+};
+
+type TabToolbarSnapshot = {
+    showSaveInToolbar: boolean;
+    showEnterableToolbarButtons: boolean;
+    showActionToolbarCard: boolean;
+};
+
+const computeTabEnterable = (
+    statusInfo: SewerageStatusInfo | null | undefined,
+    periodEnterable: boolean,
+): boolean => {
+    if (statusInfo?.laeSbmsnSttsCd) {
+        if (["2", "3"].includes(statusInfo.laeSbmsnSttsCd)) {
+            return false;
+        }
+        return periodEnterable;
+    }
+    return periodEnterable;
+};
+
+function buildGugunOkForToolbar(values: SearchFormValues | null): boolean {
+    return doList.includes(values?.bsnmCd || "")
+        ? Boolean(values?.gugun && values.gugun !== "ALL")
+        : true;
+}
+
+function computeTabToolbarSnapshot(
+    statusInfo: SewerageStatusInfo | null,
+    hasRowData: boolean,
+    treatAsSearched: boolean,
+    searchContext: SearchFormValues | null,
+    periodEnterable: boolean,
+    isAdminInfo: boolean,
+): TabToolbarSnapshot {
+    const gugunOk = buildGugunOkForToolbar(searchContext);
+    const enterable = computeTabEnterable(statusInfo, periodEnterable);
+    const isSubmitted = statusInfo?.laeSbmsnSttsCd === "2";
+    const showSaveInToolbar = (enterable || isAdminInfo) && gugunOk;
+    const showEnterableToolbarButtons = enterable && gugunOk;
+    const showSubmittedInInputPeriodToolbar =
+        isSubmitted && periodEnterable && gugunOk;
+    const showActionToolbarCard =
+        (hasRowData || treatAsSearched) &&
+        (showSaveInToolbar ||
+            showEnterableToolbarButtons ||
+            showSubmittedInInputPeriodToolbar ||
+            (isSubmitted && isAdminInfo));
+    return { showSaveInToolbar, showEnterableToolbarButtons, showActionToolbarCard };
+}
+
+function buildPumpingStationSearchParam(
+    values: SearchFormValues,
+    overrides?: { mode?: string },
+): PumpingStationRequestParams {
+    const fcltNm = values.fctName?.trim();
+    return {
+        statsYr: values.year,
+        sewerBzmnCd: values.bsnmCd,
+        ctpvNm: values.sido,
+        sggNm: values.gugun === "ALL" ? "" : values.gugun,
+        ...(fcltNm ? { fcltNm } : {}),
+        ...(overrides?.mode ? { mode: overrides.mode } : {}),
+    };
+}
+
+function parseSggListFromResponse(res: ApiResponse<Sgg[]>): Sgg[] {
+    if (res.status !== "success" || res.data == null) return [];
+    return Array.isArray(res.data) ? res.data : [];
+}
+
+function buildSggNmColumn(
+    col: ColumnConfig,
+    canEdit: boolean,
+    sggOptions: Sgg[],
+): ColumnConfig {
+    if (!canEdit) {
+        return { ...col, editable: false as const };
+    }
+    if (sggOptions.length === 0) {
+        return { ...col, editable: true };
+    }
+    const labels = sggOptions.map((s) => s.gugun);
+    return {
+        ...col,
+        editable: true,
+        editor: {
+            type: "dropdown",
+            domainOnly: true,
+            textReadOnly: true,
+            commitOnSelect: true,
+            dropDownWhenClick: true,
+            values: labels,
+            labels,
+        },
+        values: labels,
+        labels,
+        lookupDisplay: true,
+    };
+}
+
+function mapPumpingStationListToGridRows(
+    list: PumpingStationItem[],
+    ctpvNm: string,
+): GridRowWithVerification[] {
+    return list.map((item) => {
+        const row = toGridRows([
+            {
+                ...item,
+                ctpvNm,
+                oprtngStrtYmd: formatCompactYmdForGrid(item.oprtngStrtYmd),
+            },
+        ])[0] as GridRowWithVerification;
+        if (item.verificationResult) {
+            row.verificationResult = item.verificationResult;
+        }
+        return row;
+    });
+}
+
+function nullableTrimmedString(
+    value: string | number | null | undefined,
+): string | null {
+    const s = String(value ?? "").trim();
+    return s === "" ? null : s;
+}
+
+function toGridNumber(value: string | number | null | undefined): number {
+    const n = Number(value);
+    return Number.isFinite(n) ? n : 0;
+}
+
+function resolvePumpingStationAdmdst(
+    row: Record<string, string | number>,
+    sggOptions: Sgg[],
+): { admdstCd: string; admdstNm: string } {
+    const existingCd = String(row.admdstCd ?? "").trim();
+    const existingNm = String(row.admdstNm ?? "").trim();
+    if (existingCd && existingNm) {
+        return { admdstCd: existingCd, admdstNm: existingNm };
+    }
+    const sggNm = String(row.sggNm ?? "").trim();
+    const matched = sggOptions.find((s) => s.gugun === sggNm);
+    if (matched) {
+        return { admdstCd: matched.bsnmCd, admdstNm: matched.gugun };
+    }
+    return { admdstCd: existingCd, admdstNm: existingNm || sggNm };
+}
+
+/** 그리드 행 → ST00050001 저장/삭제 API 항목 */
+function buildPumpingStationSaveItem(
+    row: Record<string, string | number>,
+    sggOptions: Sgg[] = [],
+): PumpingStationSaveItem {
+    const { admdstCd, admdstNm } = resolvePumpingStationAdmdst(row, sggOptions);
+    const fcltSn = String(row.fcltSn ?? "").trim();
+    return {
+        admdstCd,
+        admdstNm,
+        fcltSn: fcltSn,
+        swtrmtFcltNm: String(row.swtrmtFcltNm ?? ""),
+        fcltNm: String(row.fcltNm ?? ""),
+        pumpSeNm: String(row.pumpSeNm ?? ""),
+        fcltPstnCn: String(row.fcltPstnCn ?? ""),
+        oprtngStrtYmd: toCompactYmd(row.oprtngStrtYmd),
+        planMltvArea: toGridNumber(row.planMltvArea),
+        sndyArea: toGridNumber(row.sndyArea),
+        rainArea: toGridNumber(row.rainArea),
+        drtwPumpN1DmtrArea: toGridNumber(row.drtwPumpN1DmtrArea),
+        drtwPumpN1Ppqty: toGridNumber(row.drtwPumpN1Ppqty),
+        drtwPumpN1Cnt: toGridNumber(row.drtwPumpN1Cnt),
+        drtwPumpN1RsrvCnt: toGridNumber(row.drtwPumpN1RsrvCnt),
+        drtwPumpN2DmtrArea: toGridNumber(row.drtwPumpN2DmtrArea),
+        drtwPumpN2Ppqty: toGridNumber(row.drtwPumpN2Ppqty),
+        drtwPumpN2Cnt: toGridNumber(row.drtwPumpN2Cnt),
+        drtwPumpN2RsrvCnt: toGridNumber(row.drtwPumpN2RsrvCnt),
+        drtwPumpN3DmtrArea: toGridNumber(row.drtwPumpN3DmtrArea),
+        drtwPumpN3Ppqty: toGridNumber(row.drtwPumpN3Ppqty),
+        drtwPumpN3Cnt: toGridNumber(row.drtwPumpN3Cnt),
+        drtwPumpN3RsrvCnt: toGridNumber(row.drtwPumpN3RsrvCnt),
+        exlnPumpN1DmtrArea: toGridNumber(row.exlnPumpN1DmtrArea),
+        exlnPumpN1Ppqty: toGridNumber(row.exlnPumpN1Ppqty),
+        exlnPumpN1Cnt: toGridNumber(row.exlnPumpN1Cnt),
+        exlnPumpN1RsrvCnt: toGridNumber(row.exlnPumpN1RsrvCnt),
+        exlnPumpN2DmtrArea: toGridNumber(row.exlnPumpN2DmtrArea),
+        exlnPumpN2Ppqty: toGridNumber(row.exlnPumpN2Ppqty),
+        exlnPumpN2Cnt: toGridNumber(row.exlnPumpN2Cnt),
+        exlnPumpN2RsrvCnt: toGridNumber(row.exlnPumpN2RsrvCnt),
+        exlnPumpN3DmtrArea: toGridNumber(row.exlnPumpN3DmtrArea),
+        exlnPumpN3Ppqty: toGridNumber(row.exlnPumpN3Ppqty),
+        exlnPumpN3Cnt: toGridNumber(row.exlnPumpN3Cnt),
+        exlnPumpN3RsrvCnt: toGridNumber(row.exlnPumpN3RsrvCnt),
+        anlElpwrUseQnt: toGridNumber(row.anlElpwrUseQnt),
+        rmrk: nullableTrimmedString(row.rmrk),
+    };
+}
+
+const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+async function waitForImrJobCompleted(
+    jobId: string,
+    getStatus: (id: string) => Promise<ImrStatusResponse>,
+    options?: {
+        pollIntervalMs?: number;
+        maxAttempts?: number;
+        onProgress?: (jobProgress: number) => void;
+    },
+): Promise<void> {
+    const pollIntervalMs = options?.pollIntervalMs ?? 2000;
+    const maxAttempts = options?.maxAttempts ?? 150;
+    for (let i = 0; i < maxAttempts; i++) {
+        const res = await getStatus(jobId);
+        options?.onProgress?.(Math.max(0, Math.min(100, Number(res.job_prog) || 0)));
+        if (res.status === "COMPLETED" && Number(res.job_prog) === 100) return;
+        if (res.status === "FAILED" || res.status === "ERROR" || res.status === "CANCELLED") {
+            throw new Error(res.error_msg || `IMR 검증이 ${res.status} 상태로 종료되었습니다.`);
+        }
+        await sleep(pollIntervalMs);
+    }
+    throw new Error("IMR 검증 완료 대기 시간이 초과되었습니다.");
+}
+
+function createEmptyPumpingStationRow(
+    ctpvNm: string,
+    sggNm = "",
+): GridRowWithVerification {
+    const row: GridRowWithVerification = { ctpvNm, sggNm };
+    for (const col of PumpingStationInpColumn.columns) {
+        const fieldName = col.fieldName;
+        if (!fieldName || fieldName === "ctpvNm" || fieldName === "sggNm") continue;
+        row[fieldName] = col.valueType === ValueType.NUMBER ? 0 : "";
+    }
+    return row;
+}
+
+// 하수도 통계 관리 > 05. 펌프장 (SewageReservoirPumpInp 단일 탭 패턴)
 const PumpingStationInp = () => {
-
-    const SubmitExceptionFunc = () => {
-        console.log('submit exception');
-        // 예외 제출 로직
-    };
-
-    const getLastYearDataFunc = () => {
-        console.log('get last year data');
-        // 지난연도 데이터 가져오기 로직
-    };
-
-    const submitFunc = () => {
-        console.log('submit');
-        // 제출 로직
-    };
-
-    const saveFunc = () => {
-        console.log('save');
-        // 저장 로직
-    };
-
-    const addArticleFunc = () => {
-        console.log('save');
-        // 항목 추가 로직
-    };
-
-    const deleteArticleFunc = () => {
-        console.log('save');
-        // 항목 제외 로직
-    };
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const { confirm } = useConfirm();
+    const { isAdminInfo } = useAdminStore();
+    const toolbarGroupAllowed = useStatisticsInputToolbarGroupGate();
+    const showGlobalProgress = useGlobalProgressStore((state) => state.show);
+    const setGlobalProgress = useGlobalProgressStore((state) => state.setProgress);
+    const setGlobalProgressLabel = useGlobalProgressStore((state) => state.setLabel);
+    const hideGlobalProgress = useGlobalProgressStore((state) => state.hide);
 
     const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
     const [isNotApplicable, setIsNotApplicable] = useState(false);
+    const [searchValues, setSearchValues] = useState<SearchFormValues | null>(null);
+    const [lastSearchedValues, setLastSearchedValues] =
+        useState<SearchFormValues | null>(null);
+    const [hasSearched, setHasSearched] = useState(false);
+    const [statusInfo, setStatusInfo] = useState<SewerageStatusInfo | null>(null);
+    const [statsCd, setStatsCd] = useState("");
+    const [inputPeriodEnterable, setInputPeriodEnterable] = useState(true);
+    const [isLoading, setIsLoading] = useState(false);
+    const [sggOptions, setSggOptions] = useState<Sgg[]>([]);
+    const [columnGuidesByEngCol, setColumnGuidesByEngCol] = useState<
+        Record<string, string>
+    >({});
+    const [verificationHistoryOpen, setVerificationHistoryOpen] = useState(false);
+    const [verificationResultDialogOpen, setVerificationResultDialogOpen] =
+        useState(false);
+    const [showSubmitDialog, setShowSubmitDialog] = useState(false);
+    const [pumpingStationDeleteList, setPumpingStationDeleteList] = useState<
+        Record<string, string | number>[]
+    >([]);
+
+    const gridRef = useRef<RealGridReact | null>(null);
+    const gridGetRowsRef =
+        useRef<(() => Record<string, string | number>[]) | null>(null);
+    const sggOptionsSidoRef = useRef<string | null>(null);
+    const [searchLoaded, setSearchLoaded] = useState(false);
+
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            try {
+                const res = await statisticsApi.getColumnGuides(PUMPING_STATION_STATS_CD);
+                if (cancelled) return;
+                if (res.status !== "success" || !Array.isArray(res.data)) {
+                    setColumnGuidesByEngCol({});
+                    return;
+                }
+                const next: Record<string, string> = {};
+                for (const item of res.data) {
+                    const key = item.engColNm?.trim();
+                    const guide = item.columnGuide?.trim();
+                    if (key && guide) next[key] = guide;
+                }
+                setColumnGuidesByEngCol(next);
+            } catch {
+                if (!cancelled) setColumnGuidesByEngCol({});
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
+    const loadSggOptions = useCallback(async (sido: string): Promise<Sgg[]> => {
+        if (!sido || sido === "ALL") {
+            setSggOptions([]);
+            return [];
+        }
+        try {
+            const res = await statisticsApi.getSggAllList(sido);
+            const list = parseSggListFromResponse(res);
+            setSggOptions(list);
+            return list;
+        } catch {
+            setSggOptions([]);
+            return [];
+        }
+    }, []);
+
+    const columnInfo = useMemo(() => {
+        const enterable =
+            computeTabEnterable(statusInfo, inputPeriodEnterable) || isAdminInfo;
+        const rawColumns = PumpingStationInpColumn.columns ?? [];
+        const base = enterable
+            ? rawColumns
+            : rawColumns.map((col) => ({ ...col, editable: false as const }));
+
+        const columns = base
+            .map((col: ColumnConfig) => {
+                if (col.fieldName === "ctpvNm") {
+                    return { ...col, editable: false as const };
+                }
+                if (col.fieldName === "sggNm" && enterable) {
+                    return buildSggNmColumn(col, true, sggOptions);
+                }
+                return col;
+            })
+            .map((col) => {
+                const guide = columnGuidesByEngCol[col.fieldName]?.trim();
+                return guide ? { ...col, tooltip: guide } : col;
+            });
+
+        return {
+            columns,
+            columnLayout: PumpingStationInpColumn.columnLayout ?? [],
+        };
+    }, [statusInfo, inputPeriodEnterable, isAdminInfo, sggOptions, columnGuidesByEngCol]);
+
+    const canEditGrid =
+        computeTabEnterable(statusInfo, inputPeriodEnterable) || isAdminInfo;
+
+    const getCurrentRows = (): Record<string, string | number>[] =>
+        gridGetRowsRef.current?.() ?? rowData;
+
+    const commitGrid = () => {
+        const gridView = gridRef.current?.gridView as
+            | { commit?: (force?: boolean) => void; cancel?: () => void }
+            | undefined;
+        try {
+            gridView?.commit?.(true);
+        } catch {
+            gridView?.cancel?.();
+        }
+    };
+
+    const fetchPumpingStationList = async (
+        values: SearchFormValues,
+        overrides?: { mode?: string },
+    ): Promise<boolean> => {
+        const response = await statisticsInputPumpingStationApi.getPumpingStationList(
+            buildPumpingStationSearchParam(values, overrides),
+        );
+
+        if (response.status !== "success" || !response.data) {
+            alert(response.message ?? "데이터 조회 중 오류가 발생했습니다.");
+            setSearchLoaded(false);
+            return false;
+        }
+
+        const { commonInfo, statusInfo: nextStatusInfo, pumpingStationList } =
+            response.data;
+        const list = pumpingStationList ?? [];
+
+        setRowData(mapPumpingStationListToGridRows(list, commonInfo.ctpvNm));
+        setStatusInfo(nextStatusInfo);
+        setStatsCd(commonInfo.statsCd);
+        setIsNotApplicable(false);
+        setSearchLoaded(true);
+        return true;
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        if (!values.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+
+        try {
+            const periodResponse = await statisticsInputSewSupplyRateApi.checkInputPeriod(
+                values.year || "",
+            );
+            if (periodResponse.status !== "success") {
+                alert(periodResponse.message);
+                return;
+            }
+            const periods = Array.isArray(periodResponse.data)
+                ? periodResponse.data
+                : [];
+            setInputPeriodEnterable(isInputPeriodCurrent(periods));
+
+            setIsLoading(true);
+            setHasSearched(true);
+            setLastSearchedValues(values);
+
+            const loadedSgg = await loadSggOptions(values.sido);
+            sggOptionsSidoRef.current = values.sido;
+            if (loadedSgg.length === 0) {
+                alert("시군구 목록을 불러오지 못했습니다.");
+                setSearchLoaded(false);
+                return;
+            }
+
+            await fetchPumpingStationList(values);
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            setRowData([]);
+            setStatusInfo(null);
+            setSearchLoaded(false);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleReset = () => {
+        setPumpingStationDeleteList([]);
+        setRowData([]);
+        setLastSearchedValues(null);
+        setHasSearched(false);
+        setStatusInfo(null);
+        setStatsCd("");
+        setIsNotApplicable(false);
+        setInputPeriodEnterable(true);
+        setSggOptions([]);
+        sggOptionsSidoRef.current = null;
+        setSearchLoaded(false);
+    };
+
+    const getLastYearDataFunc = async () => {
+        const values = lastSearchedValues ?? searchValues;
+        if (!values?.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+        if (!hasSearched || !searchLoaded) {
+            alert("먼저 데이터를 조회해주세요.");
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+            await fetchPumpingStationList(values, { mode: "PRE" });
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const openVerificationHistoryDialog = () => {
+        const ctx = lastSearchedValues ?? searchValues;
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !statsCd) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+        setVerificationHistoryOpen(true);
+    };
+
+    const cnacelSubmitFunc = () => {
+        void (async () => {
+            try {
+                if (!(await confirm("제출된 내용을 취소하시겠습니까?"))) return;
+
+                if (!lastSearchedValues) {
+                    alert("먼저 조회를 진행해주세요.");
+                    return;
+                }
+
+                const userInfo = await getUserInfo();
+                const requestData: cancelSubmitRequest = {
+                    sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+                    ctpvNm: lastSearchedValues.sido ?? "",
+                    sggNm:
+                        lastSearchedValues.gugun === "ALL"
+                            ? ""
+                            : (lastSearchedValues.gugun ?? ""),
+                    statsYr: lastSearchedValues.year ?? "",
+                    mdfrId: userInfo.userUnqId,
+                    statsCd: statsCd || PUMPING_STATION_STATS_CD,
+                };
+
+                const response = await statisticsApi.cancelSubmit(requestData);
+
+                if (response.status === "success") {
+                    setIsLoading(true);
+                    await fetchPumpingStationList(lastSearchedValues);
+                    alert("제출 취소되었습니다.");
+                } else {
+                    alert(response.message ?? "제출 취소 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("제출 취소 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        })();
+    };
+
+    const submitFunc = () => {
+        void (async () => {
+            try {
+                if (!lastSearchedValues) {
+                    alert("먼저 조회를 진행해주세요.");
+                    return;
+                }
+                if (!buildGugunOkForToolbar(lastSearchedValues)) {
+                    alert("시군구를 선택해주세요.");
+                    return;
+                }
+
+                const noApplicable = isNotApplicable;
+                const currentData = getCurrentRows();
+                if (!noApplicable && currentData.length === 0) {
+                    alert("해당사항 없음을 체크해주세요.");
+                    return;
+                }
+
+                if (await confirm("제출 하시겠습니까?")) {
+                    setShowSubmitDialog(true);
+                }
+            } catch {
+                alert("제출 중 오류가 발생했습니다.");
+            }
+        })();
+    };
+
+    const saveFunc = () => {
+        void (async () => {
+            if (!lastSearchedValues) {
+                alert("먼저 조회를 진행해주세요.");
+                return;
+            }
+            if (!buildGugunOkForToolbar(lastSearchedValues)) {
+                alert("시군구를 선택해주세요.");
+                return;
+            }
+            if (!(await confirm("저장 하시겠습니까?"))) return;
+
+            commitGrid();
+            const noApplicable = isNotApplicable;
+            const currentData = getCurrentRows();
+            const saveList = noApplicable
+                ? []
+                : currentData.map((row) =>
+                    buildPumpingStationSaveItem(row, sggOptions),
+                );
+            const deleteList = pumpingStationDeleteList
+                .filter((row) => String(row.fcltSn ?? "").trim() !== "")
+                .map((row) => buildPumpingStationSaveItem(row, sggOptions));
+
+            if (!noApplicable && saveList.length === 0) {
+                alert("해당사항 없음을 체크해주세요.");
+                return;
+            }
+
+            try {
+                setIsLoading(true);
+                const userInfo = await getUserInfo();
+                const response = await statisticsInputPumpingStationApi.savePumpingStationList({
+                    statsYr: lastSearchedValues.year ?? "",
+                    ctpvNm: lastSearchedValues.sido ?? "",
+                    sggNm:
+                        lastSearchedValues.gugun === "ALL"
+                            ? ""
+                            : (lastSearchedValues.gugun ?? ""),
+                    sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+                    userId: userInfo.userUnqId,
+                    ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
+                    noApplicable,
+                    saveList,
+                    deleteList,
+                });
+
+                if (response.status === "success") {
+                    setPumpingStationDeleteList([]);
+                    await fetchPumpingStationList(lastSearchedValues);
+                    alert("저장되었습니다.");
+                } else {
+                    alert(response.message ?? "저장 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("저장 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        })();
+    };
+
+    const executeSubmit = async (submitInfo: StatisticsInputSubmitInfoFormData) => {
+        if (!lastSearchedValues) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+        if (!buildGugunOkForToolbar(lastSearchedValues)) {
+            alert("시군구를 선택해주세요.");
+            return;
+        }
+
+        commitGrid();
+        const noApplicable = isNotApplicable;
+        const currentData = getCurrentRows();
+        const submitList = noApplicable
+            ? []
+            : currentData.map((row) => buildPumpingStationSaveItem(row, sggOptions));
+        const deleteList = pumpingStationDeleteList
+            .filter((row) => String(row.fcltSn ?? "").trim() !== "")
+            .map((row) => buildPumpingStationSaveItem(row, sggOptions));
+
+        if (!noApplicable && submitList.length === 0) {
+            alert("해당사항 없음을 체크해주세요.");
+            return;
+        }
+
+        const statsCdForSubmit = statsCd || PUMPING_STATION_STATS_CD;
+        const verificationQuery = {
+            sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+            ctpvNm: lastSearchedValues.sido ?? "",
+            sggNm:
+                lastSearchedValues.gugun === "ALL"
+                    ? ""
+                    : (lastSearchedValues.gugun ?? ""),
+            statsYr: lastSearchedValues.year ?? "",
+            statsCd: statsCdForSubmit,
+        };
+
+        const reloadAfterSubmit = async () => {
+            setPumpingStationDeleteList([]);
+            await fetchPumpingStationList(lastSearchedValues);
+        };
+
+        try {
+            showGlobalProgress({ label: "서버에 요청 중...", progress: 0 });
+            const userInfo = await getUserInfo();
+            setGlobalProgressLabel("일반 검증 진행 중...");
+            const response = await statisticsInputPumpingStationApi.submitPumpingStationList({
+                statsYr: lastSearchedValues.year ?? "",
+                ctpvNm: lastSearchedValues.sido ?? "",
+                sggNm:
+                    lastSearchedValues.gugun === "ALL"
+                        ? ""
+                        : (lastSearchedValues.gugun ?? ""),
+                sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+                userId: userInfo.userUnqId,
+                laePicNm: submitInfo.laePicNm,
+                laePicTelNo: submitInfo.laePicTelNo,
+                laeKbrdrDeptNm: submitInfo.laeKbrdrDeptNm,
+                laeKbrdrJbgdNm: submitInfo.laeKbrdrJbgdNm,
+                laeIdfrNm: submitInfo.laeIdfrNm,
+                laeIdfrTelNo: submitInfo.laeIdfrTelNo,
+                laeIdfrDeptNm: submitInfo.laeIdfrDeptNm,
+                laeIdfrJbgdNm: submitInfo.laeIdfrJbgdNm,
+                ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
+                noApplicable,
+                submitList,
+                deleteList,
+            });
+
+            if (response.status !== "success") {
+                alert(response.message ?? "데이터 제출 중 오류가 발생했습니다.");
+                return;
+            }
+
+            const finalStatus = response.data?.finalStatus;
+            const nvpassed = response.data?.nvpassed;
+
+            if (finalStatus === "5") {
+                setGlobalProgress(50);
+                setGlobalProgressLabel("IMR 검증 진행 중...");
+                const imrParam = {
+                    user_id: userInfo.userUnqId,
+                    sewer_bzmn_cd: lastSearchedValues.bsnmCd ?? "",
+                    stats_cd: statsCdForSubmit,
+                    stats_yr: lastSearchedValues.year ?? "",
+                    lae_sbmsn_stts_cd:
+                        statusInfo?.laeSbmsnSttsCd === "4" ? "4" : "2",
+                    gen_verify_stts_cd: nvpassed ? "1" : "2",
+                };
+
+                try {
+                    const imrResponse = await statisticsApi.callImrService(imrParam);
+                    if (imrResponse.job_id) {
+                        await waitForImrJobCompleted(
+                            imrResponse.job_id,
+                            (id) => statisticsApi.getImrStatus(id),
+                            {
+                                onProgress: (jobProgress) => {
+                                    setGlobalProgress(50 + Math.round(jobProgress / 2));
+                                },
+                            },
+                        );
+                    }
+                    setGlobalProgress(100);
+                    await reloadAfterSubmit();
+                    await openVerificationResultDialogIfNeeded(
+                        verificationQuery,
+                        setVerificationResultDialogOpen,
+                        { notify: alert },
+                    );
+                } catch (e) {
+                    await reloadAfterSubmit();
+                    await openVerificationResultDialogIfNeeded(
+                        verificationQuery,
+                        setVerificationResultDialogOpen,
+                        { notify: alert, notifySubmitComplete: false },
+                    );
+                    const msg =
+                        e instanceof Error && e.message
+                            ? e.message
+                            : "IMR 검증 중 오류가 발생했습니다.\n관리자에게 문의하세요.";
+                    alert(msg);
+                }
+            } else {
+                setGlobalProgress(100);
+                await reloadAfterSubmit();
+                await openVerificationResultDialogIfNeeded(
+                    verificationQuery,
+                    setVerificationResultDialogOpen,
+                    { notify: alert },
+                );
+            }
+        } catch {
+            alert("데이터 제출 중 오류가 발생했습니다.");
+        } finally {
+            hideGlobalProgress();
+        }
+    };
+
+    const addArticleFunc = async () => {
+        const ctx = lastSearchedValues ?? searchValues;
+        if (!hasSearched || !ctx?.sido || ctx.sido === "ALL") {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+
+        const sggNm = ctx.gugun && ctx.gugun !== "ALL" ? ctx.gugun : "";
+
+        let list = sggOptions;
+        if (sggOptionsSidoRef.current !== ctx.sido || list.length === 0) {
+            list = await loadSggOptions(ctx.sido);
+            sggOptionsSidoRef.current = ctx.sido;
+        }
+        if (list.length === 0) {
+            alert("시군구 목록을 불러오지 못했습니다.");
+            return;
+        }
+
+        commitGrid();
+        const currentRows = getCurrentRows();
+        const newRow = createEmptyPumpingStationRow(ctx.sido, sggNm);
+
+        flushSync(() => {
+            setSggOptions(list);
+            setRowData([...currentRows, newRow]);
+        });
+    };
+
+    const deleteArticleFunc = () => {
+        commitGrid();
+        const currentRows = getCurrentRows();
+        if (currentRows.length === 0) {
+            alert("삭제할 데이터가 없습니다.");
+            return;
+        }
+
+        const gridView = gridRef.current?.gridView as
+            | {
+                getCheckedRows?: (refresh?: boolean) => number[];
+                getCheckedItems?: (refresh?: boolean) => number[];
+            }
+            | undefined;
+
+        const checkedIndexes =
+            gridView?.getCheckedRows?.(false) ??
+            gridView?.getCheckedItems?.(false) ??
+            [];
+
+        if (checkedIndexes.length === 0) {
+            alert("삭제할 항목을 선택해주세요.");
+            return;
+        }
+
+        const indexSet = new Set(
+            checkedIndexes.filter(
+                (idx) => Number.isInteger(idx) && idx >= 0 && idx < currentRows.length,
+            ),
+        );
+        const removedRows = currentRows.filter((_, idx) => indexSet.has(idx));
+        if (removedRows.length === 0) {
+            alert("삭제할 항목을 선택해주세요.");
+            return;
+        }
+
+        setPumpingStationDeleteList((prev) => [...prev, ...removedRows]);
+        setRowData(currentRows.filter((_, idx) => !indexSet.has(idx)));
+    };
+
+    const verificationCellStyle = ({
+        fieldName,
+        row,
+    }: CellStyleCallbackParams): string | undefined => {
+        const verification = (row as GridRowWithVerification).verificationResult;
+        if (!verification) return;
+        const errors = verification[fieldName];
+        if (Array.isArray(errors) && errors.length > 0) {
+            const hasImr = errors.some((e) => e.vrfcCd === "IMR" || e.vrfcCd === "HB");
+            return hasImr ? "rg-cell-verify-error-imr" : "rg-cell-verify-error";
+        }
+    };
+
+    const verificationCellTooltip = ({
+        fieldName,
+        row,
+    }: CellTooltipCallbackParams): string | undefined => {
+        const verification = (row as GridRowWithVerification).verificationResult;
+        if (!verification) return;
+        const errors = verification[fieldName];
+        if (Array.isArray(errors) && errors.length > 0) {
+            return errors
+                .map((e) => {
+                    const prefix =
+                        e.vrfcCd === "IMR"
+                            ? "IMR검증 - "
+                            : e.vrfcCd === "NV"
+                                ? "일반검증 - "
+                                : "HB검증 -";
+                    return `${prefix}${e.rsnExpln}
+(검증 기준값: ${e.compVlCn} / 현재 입력값: ${e.nowVlCn})`;
+                })
+                .filter(Boolean)
+                .join("\n");
+        }
+    };
+
+    const searchContextForToolbar = lastSearchedValues ?? searchValues;
+    const toolbarSnapshot = computeTabToolbarSnapshot(
+        statusInfo,
+        rowData.length > 0,
+        hasSearched,
+        searchContextForToolbar,
+        inputPeriodEnterable,
+        isAdminInfo,
+    );
+
+    const showSaveInToolbar =
+        toolbarSnapshot.showSaveInToolbar && toolbarGroupAllowed;
+    const showEnterableToolbarButtons =
+        toolbarSnapshot.showEnterableToolbarButtons && toolbarGroupAllowed;
+    const showActionToolbarCard =
+        toolbarSnapshot.showActionToolbarCard && toolbarGroupAllowed;
+    const showArticleToolbarCard =
+        hasSearched &&
+        toolbarGroupAllowed &&
+        (showSaveInToolbar || showEnterableToolbarButtons);
+    const showNotApplicable =
+        searchLoaded &&
+        hasSearched &&
+        rowData.length === 0 &&
+        computeTabEnterable(statusInfo, inputPeriodEnterable);
+
+    const tabEnterableForGrid =
+        computeTabEnterable(statusInfo, inputPeriodEnterable) || isAdminInfo;
+    const gugunOk = buildGugunOkForToolbar(lastSearchedValues);
+
+    const verificationQueryContext = (() => {
+        const ctx = lastSearchedValues ?? searchValues;
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !statsCd) return null;
+        return {
+            sewerBzmnCd: ctx.bsnmCd,
+            ctpvNm: ctx.sido,
+            sggNm: ctx.gugun === "ALL" ? "" : (ctx.gugun ?? ""),
+            statsYr: ctx.year,
+            statsCd,
+        };
+    })();
 
     return (
         <>
-            <SearchForm fctName={true} />
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
-                    <LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
-                    <SubmitButton submitFunc={submitFunc} />
-                    <SaveButton saveFunc={saveFunc} />
-                </div>
+            <div className="relative">
+                <SearchForm
+                    fctName={true}
+                    onSubmit={handleSearch}
+                    onReset={handleReset}
+                    onValuesChange={setSearchValues}
+                />
+                {showActionToolbarCard && (
+                    <div className="card !py-0">
+                        <div className="m-[0.6rem] flex items-center justify-end gap-[0.6rem]">
+                            <VerificationResultButton
+                                VerificationResultButtonFunc={openVerificationHistoryDialog}
+                            />
+                            {showEnterableToolbarButtons && (
+                                <>
+                                    <LastYearDataButton
+                                        getLastYearDataFunc={() => void getLastYearDataFunc()}
+                                    />
+                                    <SubmitButton submitFunc={submitFunc} />
+                                </>
+                            )}
+                            {statusInfo?.laeSbmsnSttsCd === "2" && (
+                                <CancelSubmitButton cnacelSubmitFunc={cnacelSubmitFunc} />
+                            )}
+                            {showSaveInToolbar && <SaveButton saveFunc={saveFunc} />}
+                        </div>
+                    </div>
+                )}
+                {showArticleToolbarCard && (
+                    <div className="card !py-0">
+                        <div className="m-[0.6rem] flex items-center justify-end gap-[0.6rem]">
+                            {showNotApplicable && (
+                                <NotApplicableCheckButton
+                                    isCheck={isNotApplicable}
+                                    setIsCheck={setIsNotApplicable}
+                                />
+                            )}
+                            <AddArticleButton addArticleFunc={addArticleFunc} />
+                            <DeleteArticleButton deleteArticleFunc={deleteArticleFunc} />
+                        </div>
+                    </div>
+                )}
+                {isLoading && (
+                    <div className="absolute inset-0 z-50 flex items-center justify-center rounded-lg p-10 [data-theme='black']:bg-transparent">
+                        <div className="relative size-[5rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
+                    </div>
+                )}
+                <DataGrid
+                    key={canEditGrid ? "enterable" : "readonly"}
+                    getGridRef={gridRef as RefObject<RealGridReact | null>}
+                    columnInfo={columnInfo}
+                    rowStartNum={PumpingStationInpColumn.rowStartNum}
+                    fixedColumns={PumpingStationInpColumn.fixedColumns}
+                    rowData={rowData}
+                    setRowData={setRowData}
+                    getGridDataRef={gridGetRowsRef}
+                    showHeaderCheckbox
+                    statusInfo={statusInfo}
+                    isExcelImport={
+                        searchLoaded && tabEnterableForGrid && gugunOk
+                    }
+                    cellStyleCallback={verificationCellStyle}
+                    cellTooltipCallback={verificationCellTooltip}
+                />
             </div>
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <NotApplicableCheckButton isCheck={isNotApplicable} setIsCheck={setIsNotApplicable} />
-                    <AddArticleButton addArticleFunc={addArticleFunc} />
-                    <DeleteArticleButton deleteArticleFunc={deleteArticleFunc} />
-                </div>
-            </div>
-            <DataGrid 
-                columnInfo={ PumpingStationInpColumn } 
-                rowStartNum={3}
-                fixedColumns={3} 
-                rowData={rowData}
-                setRowData={setRowData}
+            <VerificationResultHistoryDialog
+                open={verificationHistoryOpen}
+                onOpenChange={setVerificationHistoryOpen}
+                queryContext={verificationQueryContext}
+                onExceptionResetSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values) return;
+                    await fetchPumpingStationList(values);
+                }}
             />
+            <VerificationResultDialog
+                open={verificationResultDialogOpen}
+                onOpenChange={setVerificationResultDialogOpen}
+                queryContext={verificationQueryContext}
+                onExceptionSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values) return;
+                    await fetchPumpingStationList(values);
+                }}
+            />
+            <SubmitDailog
+                open={showSubmitDialog}
+                onOpenChange={setShowSubmitDialog}
+                statusInfo={statusInfo}
+                onConfirm={executeSubmit}
+                isLoading={isLoading}
+            />
+            <ConfirmDialog isOpen={false} />
         </>
     );
 };
 
-export default PumpingStationInp;
\ No newline at end of file
+export default PumpingStationInp;
diff --git a/apps/st/src/components/statistics/input/SewageExcretaRelatedInp.tsx b/apps/st/src/components/statistics/input/SewageExcretaRelatedInp.tsx
index 726d5718a..b4470e438 100644
--- a/apps/st/src/components/statistics/input/SewageExcretaRelatedInp.tsx
+++ b/apps/st/src/components/statistics/input/SewageExcretaRelatedInp.tsx
@@ -1,7 +1,7 @@
 import { useState } 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 SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
diff --git a/apps/st/src/components/statistics/input/SewageExcretaSlurgeInp.tsx b/apps/st/src/components/statistics/input/SewageExcretaSlurgeInp.tsx
index a4ab5c947..6df8ce665 100644
--- a/apps/st/src/components/statistics/input/SewageExcretaSlurgeInp.tsx
+++ b/apps/st/src/components/statistics/input/SewageExcretaSlurgeInp.tsx
@@ -1,7 +1,7 @@
 import { useState } 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 SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
diff --git a/apps/st/src/components/statistics/input/SewagePipeInp.tsx b/apps/st/src/components/statistics/input/SewagePipeInp.tsx
index bdd404b0e..37468b59d 100644
--- a/apps/st/src/components/statistics/input/SewagePipeInp.tsx
+++ b/apps/st/src/components/statistics/input/SewagePipeInp.tsx
@@ -1,30 +1,504 @@
-import { useState, useMemo } from "react";
+import { useEffect, useLayoutEffect,useMemo, useRef, useState } from "react";
 
-import SearchForm from "@/components/module/SearchForm";
-import TabDataGrid from "@/components/module/TabDataGrid";
-import SubmitButton from "@/components/button/SumitButton";
-import SaveButton from "@/components/button/SaveButton";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { useAlertStore, useGlobalProgressStore, useStatisticsInputToolbarGroupGate } from "@/shared/lib";
+import {
+    STATISTICS_INPUT_URL_PATH,
+    verificationSearchToFormValues,
+} from "@/shared/lib/stats-cd-input-navigation";
+import { statisticsInputSewSupplyRateApi } from "@/entities/statistics/api/input/statistics-input-sew-supply-rate-service";
+import { statisticsInputSewPipeApiService } from "@/entities/statistics/api/input/statistics-sewage-pipe-input-service";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type {
+    SeweragePipeInputFactInstallStatusSaveRequest,
+    SeweragePipeInputFactInstallStatusSubmitRequest,
+    SeweragePipeInputManholeStatusItem,
+    SeweragePipeInputManholeStatusSaveRequest,
+    SeweragePipeInputManholeStatusSaveYearlyStatItem,
+    SeweragePipeInputManholeStatusSubmitRequest,
+    SeweragePipeInputPipeDiameterStatusSaveRequest,
+    SeweragePipeInputPipeDiameterStatusSubmitRequest,
+    SeweragePipeInputPipeTypeStatusItem,
+    SeweragePipeInputPipeTypeStatusSaveRequest,
+    SeweragePipeInputPipeTypeStatusSubmitRequest,
+    SeweragePipeInputRegionalFactStatusSaveItem,
+    SeweragePipeInputRegionalFactStatusSaveRequest,
+    SeweragePipeInputRegionalFactStatusSubmitRequest,
+    SeweragePipeInputSubmitResponse,
+    SeweragePipeInputVerificationResult,
+    SeweragePipeRequestParams,
+} from "@/entities/statistics/model/input/statistics-sewage-pipe-input-interface";
+import {
+    type CheckInputPeriodItem,
+    getVerificationPeriodActionBlockedMessage,
+    isInputPeriodCurrent,
+} from "@/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface";
+import type { StatisticsInputSubmitInfoFormData } from "@/entities/statistics/model/statistics-input-submit-info-schema";
+import type {
+    cancelSubmitRequest,
+    ImrStatusResponse,
+    SewerageStatusInfo,
+    SubmitExceptionRequest,
+} from "@/entities/statistics/model/statistics-interface";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
+
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
+import SubmitDailog from "./SubmitDailog";
+
+import CancelSubmitButton from "@/components/button/CancelSubmitButton";
 import LastYearDataButton from "@/components/button/LastYearDataButton";
-import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
-
-import { SewagePipeInpColumnInfoList } from "@/components/util/column/input/sewagePipe/SewagePipeInpColumn";
-import type { ColumnInfoList, ColumnConfig } from "@/components/type/DataGrid.type";
+import SaveButton from "@/components/button/SaveButton";
+import SubmitButton from "@/components/button/SumitButton";
+import VerificationResultButton from "@/components/button/VerificationResultButton";
+import DataGrid from "@/components/module/DataGrid";
+import GridTopActionButton from "@/components/module/GridTopActionButton";
+import SearchForm from "@/components/module/SearchForm";
+import SplitDataGrid from "@/components/module/SplitDataGrid";
+import { openVerificationResultDialogIfNeeded } from "@/components/module/post-submit-verification-results";
+import { VerificationResultDialog } from "@/components/module/VerificationResultDialog";
+import { VerificationResultHistoryDialog } from "@/components/module/VerificationResultHistoryDialog";
+import type { ColumnConfig,ColumnInfo, ColumnInfoList } from "@/components/type/DataGrid.type";
 import type { SearchFormValues } from "@/components/type/SearchForm.type";
-import { useAlertStore } from "@/shared/lib";
+import { doList } from "@/components/util/column/input/DoList";
+import { FactInstallStatusInpColumn } from "@/components/util/column/input/sewagePipe/FactInstallStatusInpColumn";
+import { ManholeStatusInpColumn } from "@/components/util/column/input/sewagePipe/ManholeStatusInpColumn";
+import { PipeDiameterStatusInpColumn } from "@/components/util/column/input/sewagePipe/PipeDiameterStatusInpColumn";
+import { PipeTypeStatusInpColumn } from "@/components/util/column/input/sewagePipe/PipeTypeStatusInpColumn";
+import { RegionalFactStatusInpColumn } from "@/components/util/column/input/sewagePipe/RegionalFactStatusInpColumn";
+import { SewagePipeInpColumnInfoList } from "@/components/util/column/input/sewagePipe/SewagePipeInpColumn";
+import { toGridRows } from "@/components/util/grid/gridFunction";
 import { useAdminStore } from "@/store/admin-store";
+import { useStatisticsInputFocusStore } from "@/store/statistics-input-focus-store";
+import { useTabStore } from "@/store/tab-store";
+
+/** 탭별 status + 입력기간으로 편집 가능 여부 */
+const computeTabEnterable = (
+    statusInfo: SewerageStatusInfo | null | undefined,
+    periodEnterable: boolean,
+): boolean => {
+    if (statusInfo?.laeSbmsnSttsCd) {
+        if (["2", "3"].includes(statusInfo.laeSbmsnSttsCd)) {
+            return false;
+        }
+        return periodEnterable;
+    }
+    return periodEnterable;
+};
+
+function buildSewagePipeSearchParam(
+    values: SearchFormValues,
+    overrides?: { mode?: string },
+): SeweragePipeRequestParams {
+    return {
+        statsYr: values.year,
+        sewerBzmnCd: values.bsnmCd,
+        ctpvNm: values.sido,
+        sggNm: values.gugun === "ALL" ? "" : values.gugun,
+        ...(overrides?.mode ? { mode: overrides.mode } : {}),
+    };
+}
+
+const getPipeTypeLastDataYear = () => {
+    const lastDataYear = new Date().getFullYear() - 1;
+    return Math.max(1995, lastDataYear);
+};
+
+const getManholeLastDataYear = () => {
+    const lastDataYear = new Date().getFullYear() - 1;
+    return Math.max(2014, lastDataYear);
+};
+
+/** 관종별 신 응답(yearlyStatList) -> 그리드 y{year}* 필드로 정규화 */
+function normalizePipeTypeStatusRow(
+    row: SeweragePipeInputPipeTypeStatusItem,
+    ctpvNm: string,
+): Record<string, string | number | SeweragePipeInputVerificationResult | undefined> {
+    const lastDataYear = getPipeTypeLastDataYear();
+    const {
+        yearlyStatList,
+        lyngPrlgWhol,
+        dmltnPrlgWhol,
+        ...rest
+    } = row;
+    const yearFields: Record<string, number> = {};
+    for (let year = 1995; year <= lastDataYear; year++) {
+        yearFields[`y${year}PrlgWhol`] = 0;
+        yearFields[`y${year}LyngPrlg`] = 0;
+        yearFields[`y${year}DmltnPrlg`] = 0;
+    }
+
+    for (const y of yearlyStatList ?? []) {
+        const year = Number(y.lyngYr);
+        if (!Number.isFinite(year)) continue;
+        const targetYear = Math.min(lastDataYear, Math.max(1995, year));
+        yearFields[`y${targetYear}PrlgWhol`] =
+            (yearFields[`y${targetYear}PrlgWhol`] ?? 0) + Number(y.prlgWhol ?? 0);
+        yearFields[`y${targetYear}LyngPrlg`] =
+            (yearFields[`y${targetYear}LyngPrlg`] ?? 0) + Number(y.lyngPrlg ?? 0);
+        yearFields[`y${targetYear}DmltnPrlg`] =
+            (yearFields[`y${targetYear}DmltnPrlg`] ?? 0) + Number(y.dmltnPrlg ?? 0);
+    }
+
+    return {
+        ctpvNm,
+        ...rest,
+        lyngPrlg: Number(row.lyngPrlg ?? lyngPrlgWhol ?? 0),
+        dmltnPrlg: Number(row.dmltnPrlg ?? dmltnPrlgWhol ?? 0),
+        ...yearFields,
+    };
+}
+
+/** 맨홀 신 응답(yearlyStats) -> 그리드 yy{14..25}* 필드로 정규화 */
+function normalizeManholeStatusRow(
+    row: SeweragePipeInputManholeStatusItem,
+    ctpvNm: string,
+): Record<string, string | number | SeweragePipeInputVerificationResult | undefined> {
+    const maxYy = getManholeLastDataYear() % 100;
+    const { yearlyStats, ...rest } = row;
+    const yearFields: Record<string, number> = {};
+    for (let yy = 14; yy <= maxYy; yy++) {
+        yearFields[`yy${yy}WholMnhlCnt`] = 0;
+        yearFields[`yy${yy}Step1MnhlCnt`] = 0;
+        yearFields[`yy${yy}Step2MnhlCnt`] = 0;
+        yearFields[`yy${yy}Step3MnhlCnt`] = 0;
+        yearFields[`yy${yy}Step4MnhlCnt`] = 0;
+        yearFields[`yy${yy}Step5MnhlCnt`] = 0;
+    }
+
+    for (const y of yearlyStats ?? []) {
+        const year = Number(y.manhYr);
+        if (!Number.isFinite(year)) continue;
+        const yy = year % 100;
+        if (yy < 14 || yy > maxYy) continue;
+        yearFields[`yy${yy}WholMnhlCnt`] = Number(y.wholMnhlCnt ?? 0);
+        yearFields[`yy${yy}Step1MnhlCnt`] = Number(y.step1MnhlCnt ?? 0);
+        yearFields[`yy${yy}Step2MnhlCnt`] = Number(y.step2MnhlCnt ?? 0);
+        yearFields[`yy${yy}Step3MnhlCnt`] = Number(y.step3MnhlCnt ?? 0);
+        yearFields[`yy${yy}Step4MnhlCnt`] = Number(y.step4MnhlCnt ?? 0);
+        yearFields[`yy${yy}Step5MnhlCnt`] = Number(y.step5MnhlCnt ?? 0);
+    }
+
+    return {
+        ctpvNm,
+        ...rest,
+        ...yearFields,
+    };
+}
+
+/** ST00020006(연결)은 행이 좌·우 그리드 키에만 있음 */
+type GridRowWithVerification = Record<string, string | number> & {
+    verificationResult?: SeweragePipeInputVerificationResult;
+};
+
+const REGIONAL_FACT_TAB_KEY = "ST00020001";
+const SEWAGE_PIPE_COLUMN_GUIDE_TAB_KEYS = Array.from(
+    new Set(SewagePipeInpColumnInfoList.map((tab) => tab.tabKey).filter(Boolean)),
+);
+
+// function hasRegionalFactVerificationErrors(verification?: SeweragePipeInputVerificationResult | null): boolean {
+//     if (!verification) return false;
+//     return Object.values(verification).some((errors) => Array.isArray(errors) && errors.length > 0);
+// }
+
+const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+async function waitForImrJobCompleted(
+    jobId: string,
+    getStatus: (id: string) => Promise<ImrStatusResponse>,
+    options?: {
+        pollIntervalMs?: number;
+        maxAttempts?: number;
+        onProgress?: (jobProgress: number) => void;
+    },
+): Promise<void> {
+    const pollIntervalMs = options?.pollIntervalMs ?? 2000;
+    const maxAttempts = options?.maxAttempts ?? 150;
+    for (let i = 0; i < maxAttempts; i++) {
+        const res = await getStatus(jobId);
+        options?.onProgress?.(Math.max(0, Math.min(100, Number(res.job_prog) || 0)));
+        if (res.status === "COMPLETED" && Number(res.job_prog) === 100) return;
+        if (res.status === "FAILED" || res.status === "ERROR" || res.status === "CANCELLED") {
+            throw new Error(res.error_msg || `IMR 검증이 ${res.status} 상태로 종료되었습니다.`);
+        }
+        await sleep(pollIntervalMs);
+    }
+    throw new Error("IMR 검증 완료 대기 시간이 초과되었습니다.");
+}
+
+function buildRegionalFactSubmitListFromGrid(
+    currentData: Record<string, string | number>[],
+): SeweragePipeInputRegionalFactStatusSaveItem[] {
+    const columnFormatMap = new Map<string, string>();
+    RegionalFactStatusInpColumn.columns.forEach((col) => {
+        if (col.fieldName && col.dataFormat) {
+            columnFormatMap.set(col.fieldName, col.dataFormat);
+        }
+    });
+    const formatNumber = (value: string | number | null | undefined, fieldName: string): number => {
+        if (value === null || value === undefined || value === "") return 0;
+        const num = typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+        if (isNaN(num)) return 0;
+        const format = columnFormatMap.get(fieldName);
+        if (!format) return num;
+        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+    };
+    return currentData.map((d) => ({
+        admdstCd: String(d.admdstCd ?? ""),
+        sggNm: String(d.sggNm ?? ""),
+        admdstNm: String(d.admdstNm ?? ""),
+        goalYr: String(d.goalYr ?? ""),
+        wholPplMtncPlanPrlg: formatNumber(d.wholPplMtncPlanPrlg, "wholPplMtncPlanPrlg"),
+        wholPlanPrlg: formatNumber(d.wholPlanPrlg, "wholPlanPrlg"),
+        wholFcltPrlg: formatNumber(d.wholFcltPrlg, "wholFcltPrlg"),
+        swagePplPsplyRt: formatNumber(d.swagePplPsplyRt, "swagePplPsplyRt"),
+        cbsysPplMtncPlanArea: formatNumber(d.cbsysPplMtncPlanArea, "cbsysPplMtncPlanArea"),
+        cbsysPplMtncPlanPrlg: formatNumber(d.cbsysPplMtncPlanPrlg, "cbsysPplMtncPlanPrlg"),
+        cbsysPlanPrlg: formatNumber(d.cbsysPlanPrlg, "cbsysPlanPrlg"),
+        cbsysFcltPrlg: formatNumber(d.cbsysFcltPrlg, "cbsysFcltPrlg"),
+        cbsysSqrePrlg: formatNumber(d.cbsysSqrePrlg, "cbsysSqrePrlg"),
+        cbsysCiclPrlg: formatNumber(d.cbsysCiclPrlg, "cbsysCiclPrlg"),
+        cbsysOpnPrlg: formatNumber(d.cbsysOpnPrlg, "cbsysOpnPrlg"),
+        cbsysGttrPrlg: formatNumber(d.cbsysGttrPrlg, "cbsysGttrPrlg"),
+        drtwPplMtncPlanArea: formatNumber(d.drtwPplMtncPlanArea, "drtwPplMtncPlanArea"),
+        drtwPplMtncPlanPrlg: formatNumber(d.drtwPplMtncPlanPrlg, "drtwPplMtncPlanPrlg"),
+        drtwPplPlanPrlg: formatNumber(d.drtwPplPlanPrlg, "drtwPplPlanPrlg"),
+        drtwPplFcltPrlg: formatNumber(d.drtwPplFcltPrlg, "drtwPplFcltPrlg"),
+        drtwPplSqrePrlg: formatNumber(d.drtwPplSqrePrlg, "drtwPplSqrePrlg"),
+        drtwPplCiclPrlg: formatNumber(d.drtwPplCiclPrlg, "drtwPplCiclPrlg"),
+        exlnPplMtncPlanArea: formatNumber(d.exlnPplMtncPlanArea, "exlnPplMtncPlanArea"),
+        exlnPplMtncPlanPrlg: formatNumber(d.exlnPplMtncPlanPrlg, "exlnPplMtncPlanPrlg"),
+        exlnPplPlanPrlg: formatNumber(d.exlnPplPlanPrlg, "exlnPplPlanPrlg"),
+        exlnPplFcltPrlg: formatNumber(d.exlnPplFcltPrlg, "exlnPplFcltPrlg"),
+        exlnPplSqrePrlg: formatNumber(d.exlnPplSqrePrlg, "exlnPplSqrePrlg"),
+        exlnPplCiclPrlg: formatNumber(d.exlnPplCiclPrlg, "exlnPplCiclPrlg"),
+        exlnPplOpnPrlg: formatNumber(d.exlnPplOpnPrlg, "exlnPplOpnPrlg"),
+        exlnPplGttrPrlg: formatNumber(d.exlnPplGttrPrlg, "exlnPplGttrPrlg"),
+        cbsysMnhlCnt: formatNumber(d.cbsysMnhlCnt, "cbsysMnhlCnt"),
+        sprsysDrtwMnhlCnt: formatNumber(d.sprsysDrtwMnhlCnt, "sprsysDrtwMnhlCnt"),
+        sprsysExlnMnhlCnt: formatNumber(d.sprsysExlnMnhlCnt, "sprsysExlnMnhlCnt"),
+        drtwRcvprpCnt: formatNumber(d.drtwRcvprpCnt, "drtwRcvprpCnt"),
+        exlnRcvprpCnt: formatNumber(d.exlnRcvprpCnt, "exlnRcvprpCnt"),
+        stofcbrCnt: formatNumber(d.stofcbrCnt, "stofcbrCnt"),
+        exlnOtflCnt: formatNumber(d.exlnOtflCnt, "exlnOtflCnt"),
+        sewerLdgrEdpPrlg: formatNumber(d.sewerLdgrEdpPrlg, "sewerLdgrEdpPrlg"),
+        sewerLdgrEdpRt: formatNumber(d.sewerLdgrEdpRt, "sewerLdgrEdpRt"),
+        rmrk: (d.rmrk as string | null) ?? null,
+    }));
+}
+
+function tabRowDataExists(
+    m: Map<string, Record<string, string | number>[]>,
+    tabKey: string,
+): boolean {
+    if (tabKey === "ST00020006") {
+        const left = m.get("treatmentPlantConnectionInp");
+        const right = m.get("adminAreaConnectionInp");
+        return (
+            (Array.isArray(left) && left.length > 0) ||
+            (Array.isArray(right) && right.length > 0)
+        );
+    }
+    const rows = m.get(tabKey);
+    return Array.isArray(rows) && rows.length > 0;
+}
+
+/** 조회 직후 해당 탭에만 저장하는 상단 툴바 노출 조건 */
+type TabToolbarSnapshot = {
+    showSaveInToolbar: boolean;
+    showEnterableToolbarButtons: boolean;
+    showActionToolbarCard: boolean;
+};
+
+function buildGugunOkForToolbar(values: SearchFormValues | null): boolean {
+    return doList.includes(values?.bsnmCd || "")
+        ? Boolean(values?.gugun && values.gugun !== "ALL")
+        : true;
+}
+
+/**
+ * @param searchContext 조회에 사용된 검색값(해당 요청 기준으로 구군·사업자 조건 반영)
+ * @param treatAsSearched (hasRow || 이 값) 일 때 카드 후보 — load 내부에서는 searchDoneRef 반영용
+ */
+function computeTabToolbarSnapshot(
+    statusInfo: SewerageStatusInfo | null,
+    hasRowData: boolean,
+    treatAsSearched: boolean,
+    searchContext: SearchFormValues | null,
+    periodEnterable: boolean,
+    isAdminInfo: boolean,
+): TabToolbarSnapshot {
+    const gugunOk = buildGugunOkForToolbar(searchContext);
+    const enterable = computeTabEnterable(statusInfo, periodEnterable);
+    const isSubmitted = statusInfo?.laeSbmsnSttsCd === "2";
+    const showSaveInToolbar = (enterable || isAdminInfo) && gugunOk;
+    const showEnterableToolbarButtons = enterable && gugunOk;
+    const showSubmittedInInputPeriodToolbar = isSubmitted && periodEnterable && gugunOk;
+    const showActionToolbarCard =
+        (hasRowData || treatAsSearched) &&
+        (showSaveInToolbar ||
+            showEnterableToolbarButtons ||
+            showSubmittedInInputPeriodToolbar ||
+            (isSubmitted && isAdminInfo));
+    return { showSaveInToolbar, showEnterableToolbarButtons, showActionToolbarCard };
+}
 
 // 하수도 통계 관리 > 02. 하수관로
 const SewagePipeInp = () => {
     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 [isLoading, setIsLoading] = useState<boolean>(false);
+    const [searchValues, setSearchValues] = useState<SearchFormValues | null>(null);
+    const [lastSearchedYear, setLastSearchedYear] = useState<string | null>(null);
+    const [lastSearchedValues, setLastSearchedValues] = useState<SearchFormValues | null>(null);
+    const [tabStatusInfoMap, setTabStatusInfoMap] = useState<Map<string, SewerageStatusInfo | null>>(new Map());
+    const [showDailog, setShowDailog] = useState<boolean>(false);
+    const [isExceptionSubmitFlow, setIsExceptionSubmitFlow] = useState(false);
+    const [verificationResultDialogOpen, setVerificationResultDialogOpen] = useState(false);
+    const [statsCd, setStatsCd] = useState<string>('');
+    const [tabStatsCdMap, setTabStatsCdMap] = useState<Map<string, string>>(new Map());
+    const [verificationHistoryOpen, setVerificationHistoryOpen] = useState(false);
+    const [periodCheckList, setPeriodCheckList] = useState<CheckInputPeriodItem[]>([]);
+    /** 탭키별 `engColNm -> columnGuide` 캐시 */
+    const [columnGuidesByTab, setColumnGuidesByTab] = useState<Record<string, Record<string, string>>>({});
+    /** API 연결 전에도 검색 후 툴바 등 UI를 쓸 수 있게 함 */
+    const [hasSearched, setHasSearched] = useState(false);
+    /** checkInputPeriod — columnInfo useMemo가 입력기간 변경을 반영하도록 state로도 유지 */
+    const [inputPeriodEnterable, setInputPeriodEnterable] = useState(true);
+    /** 탭별 조회 시점의 상단 버튼 노출 조건(해당 탭을 다시 조회할 때만 그 탭 항목 갱신) */
+    const [toolbarSnapshotByTab, setToolbarSnapshotByTab] = useState<Map<string, TabToolbarSnapshot>>(
+        () => new Map(),
+    );
+    const { confirm } = useConfirm();
+    const showGlobalProgress = useGlobalProgressStore((state) => state.show);
+    const setGlobalProgress = useGlobalProgressStore((state) => state.setProgress);
+    const setGlobalProgressLabel = useGlobalProgressStore((state) => state.setLabel);
+    const hideGlobalProgress = useGlobalProgressStore((state) => state.hide);
+    const globalProgressVisible = useGlobalProgressStore((state) => state.visible);
     const { isAdminInfo } = useAdminStore();
+    const toolbarGroupAllowed = useStatisticsInputToolbarGroupGate();
+
+    const getGridDataRef = useRef<(() => Record<string, string | number>[]) | null>(null);
+    const getFactInstallGridDataRef = useRef<(() => Record<string, string | number>[]) | null>(null);
+    const getPipeTypeGridDataRef = useRef<(() => Record<string, string | number>[]) | null>(null);
+    const getPipeDiameterGridDataRef = useRef<(() => Record<string, string | number>[]) | null>(null);
+    const getManholeGridDataRef = useRef<(() => Record<string, string | number>[]) | null>(null);
+    const searchParamRef = useRef<SeweragePipeRequestParams | null>(null);
+    /** 검색 시 checkInputPeriod 결과 — 탭 전환 지연 조회 시 편집 가능 여부와 동일하게 맞춤 */
+    const periodEnterableRef = useRef(true);
+    /** 검색 완료 후(API 연결 전) 탭별 지연 로그용 — 첫 탭에 행이 없어도 동작하도록 보조 */
+    const searchDoneRef = useRef(false);
+    const lazyTabLoggedRef = useRef<Set<string>>(new Set());
+    const postVerificationSearchRef = useRef<{
+        values: SearchFormValues;
+        tabKey: string;
+    } | null>(null);
+    /** ST00020002 무데이터 안내/자동이동은 동일 조회조건에서 1회만 수행 */
+    const factInstallNoDataHandledKeyRef = useRef<string | null>(null);
+
+    const [verificationSearchDefaults, setVerificationSearchDefaults] =
+        useState<SearchFormValues | null>(null);
+    const [searchFormRemountKey, setSearchFormRemountKey] = useState(0);
+
+    const firstTabKey = SewagePipeInpColumnInfoList[0]?.tabKey ?? "ST00020001";
+    const activeTabRef = useRef<string>(firstTabKey);
+
+    useEffect(() => {
+        activeTabRef.current = activeTab;
+    }, [activeTab]);
+
+    const activeTabId = useTabStore((s) => s.activeTabId);
+    const inputFocusNonce = useStatisticsInputFocusStore((s) => s.nonce);
+    useLayoutEffect(() => {
+        if (activeTabId !== STATISTICS_INPUT_URL_PATH.SEWAGE_PIPE) return;
+        const pending = useStatisticsInputFocusStore
+            .getState()
+            .takePendingForUrl(STATISTICS_INPUT_URL_PATH.SEWAGE_PIPE);
+        if (!pending) return;
+        const { tabKey, search } = pending;
+        activeTabRef.current = tabKey;
+        setActiveTab(tabKey);
+        if (search) {
+            const values = verificationSearchToFormValues(search);
+            setVerificationSearchDefaults(values);
+            postVerificationSearchRef.current = { values, tabKey };
+            setSearchFormRemountKey((k) => k + 1);
+        }
+    }, [activeTabId, inputFocusNonce]);
+
+    useEffect(() => {
+        if (activeTabId !== STATISTICS_INPUT_URL_PATH.SEWAGE_PIPE) return;
+        let cancelled = false;
+        void (async () => {
+            const entries = await Promise.all(
+                SEWAGE_PIPE_COLUMN_GUIDE_TAB_KEYS.map(async (tabKey) => {
+                    try {
+                        const res = await statisticsApi.getColumnGuides(tabKey);
+                        if (res.status !== "success" || !Array.isArray(res.data)) {
+                            return [tabKey, {}] as const;
+                        }
+                        const next: Record<string, string> = {};
+                        for (const item of res.data) {
+                            const key = item.engColNm?.trim();
+                            const guide = item.columnGuide?.trim();
+                            if (key && guide) next[key] = guide;
+                        }
+                        return [tabKey, next] as const;
+                    } catch {
+                        return [tabKey, {}] as const;
+                    }
+                }),
+            );
+            if (cancelled) return;
+            setColumnGuidesByTab(Object.fromEntries(entries));
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [activeTabId]);
+
+    const syncTopStatusIfStillOnTab = (loadedTabKey: string, nextStatsCd: string) => {
+        if (loadedTabKey === activeTabRef.current) {
+            setStatsCd(nextStatsCd);
+        }
+    };
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setTabStatusInfoMap(new Map());
+        setTabStatsCdMap(new Map());
+        setLastSearchedYear(null);
+        setLastSearchedValues(null);
+        setHasSearched(false);
+        setInputPeriodEnterable(true);
+        setToolbarSnapshotByTab(new Map());
+        searchParamRef.current = null;
+        searchDoneRef.current = false;
+        lazyTabLoggedRef.current.clear();
+        periodEnterableRef.current = true;
+        activeTabRef.current = firstTabKey;
+        setActiveTab(firstTabKey);
+        setStatsCd("");
+        setPeriodCheckList([]);
+        setVerificationSearchDefaults(null);
+        setSearchFormRemountKey((k) => k + 1);
+    };
 
     const columnInfo = useMemo(() => {
-        const canEdit = isEnterable || isAdminInfo;
+        const applyColumnGuides = (cols: ColumnConfig[] | undefined, tabKey: string) =>
+            (cols ?? []).map((col: ColumnConfig) => {
+                const guide = columnGuidesByTab[tabKey]?.[col.fieldName]?.trim();
+                return {
+                    ...col,
+                    tooltip: guide && guide.length > 0 ? guide : undefined,
+                };
+            });
         return SewagePipeInpColumnInfoList.map((tab: ColumnInfoList) => {
+            const canEdit =
+                computeTabEnterable(tabStatusInfoMap.get(tab.tabKey) ?? null, inputPeriodEnterable) || isAdminInfo;
             const applyEditable = (cols: ColumnConfig[] | undefined) =>
                 (cols ?? []).map((col: ColumnConfig) =>
                     canEdit
@@ -35,92 +509,1658 @@ const SewagePipeInp = () => {
             if (tab.left && tab.right) {
                 return {
                     ...tab,
-                    left: { ...tab.left, columns: applyEditable(tab.left.columns) },
-                    right: { ...tab.right, columns: applyEditable(tab.right.columns) },
+                    left: { ...tab.left, columns: applyColumnGuides(applyEditable(tab.left.columns), tab.tabKey) },
+                    right: { ...tab.right, columns: applyColumnGuides(applyEditable(tab.right.columns), tab.tabKey) },
                 };
             }
             return {
                 ...tab,
-                columns: applyEditable(tab.columns),
+                columns: applyColumnGuides(applyEditable(tab.columns), tab.tabKey),
             };
         });
-    }, [isEnterable, isAdminInfo]);
+    }, [tabStatusInfoMap, isAdminInfo, inputPeriodEnterable, columnGuidesByTab]);
 
-    // const handleSearch = async (values: SearchFormValues) => {
-    //     if (!values.sido || values.sido === 'ALL') {
-    //         alert('시도를 선택해주세요.');
-    //         return;
-    //     }
+    const commitToolbarSnapshotForLoadedTab = (
+        tabKey: string,
+        statusInfo: SewerageStatusInfo | null,
+        hasRowData: boolean,
+        searchContext: SearchFormValues,
+    ) => {
+        setToolbarSnapshotByTab((prev) => {
+            const next = new Map(prev);
+            next.set(
+                tabKey,
+                computeTabToolbarSnapshot(
+                    statusInfo,
+                    hasRowData,
+                    searchDoneRef.current,
+                    searchContext,
+                    periodEnterableRef.current,
+                    isAdminInfo,
+                ),
+            );
+            return next;
+        });
+    };
 
-    //     setActiveTab('ST00020001');
+    /** mergeIntoExistingMap: true면 기존 맵에 병합(다른 탭 rowData·검색 후 다른 탭 캐시 유지). false면 맵 전체 교체 */
+    const loadSewagePipeActiveTabData = async (
+        tabKey: string,
+        searchParam: SeweragePipeRequestParams,
+        values: SearchFormValues,
+        mergeIntoExistingMap: boolean,
+        updateLastSearchedValues: boolean,
+    ): Promise<boolean> => {
+        const searchConditionKey = JSON.stringify({
+            statsYr: searchParam.statsYr ?? "",
+            ctpvNm: searchParam.ctpvNm ?? "",
+            sggNm: searchParam.sggNm ?? "",
+            sewerBzmnCd: searchParam.sewerBzmnCd ?? "",
+        });
+        const applyRowMap = (apply: (m: Map<string, Record<string, string | number>[]>) => void) => {
+            if (mergeIntoExistingMap) {
+                setRowDataMap((prev) => {
+                    const next = new Map(prev);
+                    apply(next);
+                    return next;
+                });
+            } else {
+                const next = new Map<string, Record<string, string | number>[]>();
+                apply(next);
+                setRowDataMap(next);
+            }
+        };
 
-    //     setRowDataMap(new Map());
+        if (tabKey === 'ST00020001') {
+            const response = await statisticsInputSewPipeApiService.getRegionalFactStatus(searchParam);
+            if (response.status === 'success') {
+                const commonInfo = response.data.commonInfo;
+                const convertedData = (response.data.regionalFactStatusList ?? []).map((d) => ({
+                    ctpvNm: commonInfo.ctpvNm,
+                    ...d,
+                }));
+                applyRowMap((m) => m.set('ST00020001', toGridRows(convertedData)));
+                setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, response.data.statusInfo));
+                setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+                syncTopStatusIfStillOnTab(tabKey, commonInfo.statsCd);
+                if (updateLastSearchedValues) setLastSearchedValues(values);
+                commitToolbarSnapshotForLoadedTab(
+                    tabKey,
+                    response.data.statusInfo,
+                    convertedData.length > 0,
+                    values,
+                );
+                return true;
+            }
+            alert(response.message || '데이터 조회 중 오류가 발생했습니다.');
+            return false;
+        }
+        if (tabKey === 'ST00020002') {
+            const response = await statisticsInputSewPipeApiService.getFactInstallStatus(searchParam);
+            if (response.status === 'success') {
+                const commonInfo = response.data.commonInfo;
+                const convertedData = (response.data.factInstallStatusList ?? []).map((d) => ({
+                    ctpvNm: commonInfo.ctpvNm,
+                    ...d,
+                }));
+                if (convertedData.length === 0) {
+                    const alreadyHandledForSameSearch =
+                        factInstallNoDataHandledKeyRef.current === searchConditionKey;
+                    if (!alreadyHandledForSameSearch) {
+                        factInstallNoDataHandledKeyRef.current = searchConditionKey;
+                        alert("시설별 설치 현황에 조회된 데이터가 없습니다.\n시설별 현황 관리에서 설정해주세요");
+                        activeTabRef.current = "ST00020006";
+                        setActiveTab("ST00020006");
+                        return await loadSewagePipeActiveTabData(
+                            "ST00020006",
+                            searchParam,
+                            values,
+                            true,
+                            updateLastSearchedValues,
+                        );
+                    }
+                }
+                applyRowMap((m) => m.set('ST00020002', toGridRows(convertedData)));
+                setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, response.data.statusInfo));
+                setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+                syncTopStatusIfStillOnTab(tabKey, commonInfo.statsCd);
+                if (updateLastSearchedValues) setLastSearchedValues(values);
+                commitToolbarSnapshotForLoadedTab(
+                    tabKey,
+                    response.data.statusInfo,
+                    convertedData.length > 0,
+                    values,
+                );
+                return true;
+            }
+            alert(response.message || '데이터 조회 중 오류가 발생했습니다.');
+            return false;
+        }
+        if (tabKey === 'ST00020003') {
+            const response = await statisticsInputSewPipeApiService.getPipeTypeStatus(searchParam);
+            if (response.status === 'success') {
+                const commonInfo = response.data.commonInfo;
+                const convertedData = (response.data.pipeTypeStatusList ?? []).map((d) =>
+                    normalizePipeTypeStatusRow(d, commonInfo.ctpvNm),
+                );
+                applyRowMap((m) => m.set('ST00020003', toGridRows(convertedData)));
+                setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, response.data.statusInfo));
+                setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+                syncTopStatusIfStillOnTab(tabKey, commonInfo.statsCd);
+                if (updateLastSearchedValues) setLastSearchedValues(values);
+                commitToolbarSnapshotForLoadedTab(
+                    tabKey,
+                    response.data.statusInfo,
+                    convertedData.length > 0,
+                    values,
+                );
+                return true;
+            }
+            alert(response.message || '데이터 조회 중 오류가 발생했습니다.');
+            return false;
+        }
+        if (tabKey === 'ST00020004') {
+            const response = await statisticsInputSewPipeApiService.getPipeDiameterStatus(searchParam);
+            if (response.status === 'success') {
+                const commonInfo = response.data.commonInfo;
+                const convertedData = (response.data.pipeDiameterStatusList ?? []).map((d) => ({
+                    ctpvNm: commonInfo.ctpvNm,
+                    ...d,
+                }));
+                applyRowMap((m) => m.set('ST00020004', toGridRows(convertedData)));
+                setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, response.data.statusInfo));
+                setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+                syncTopStatusIfStillOnTab(tabKey, commonInfo.statsCd);
+                if (updateLastSearchedValues) setLastSearchedValues(values);
+                commitToolbarSnapshotForLoadedTab(
+                    tabKey,
+                    response.data.statusInfo,
+                    convertedData.length > 0,
+                    values,
+                );
+                return true;
+            }
+            alert(response.message || '데이터 조회 중 오류가 발생했습니다.');
+            return false;
+        }
+        if (tabKey === 'ST00020005') {
+            const response = await statisticsInputSewPipeApiService.getManholeStatus(searchParam);
+            if (response.status === 'success') {
+                const commonInfo = response.data.commonInfo;
+                const convertedData = (response.data.manholeStatusList ?? []).map((d) =>
+                    normalizeManholeStatusRow(d, commonInfo.ctpvNm),
+                );
+                applyRowMap((m) => m.set('ST00020005', toGridRows(convertedData)));
+                setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, response.data.statusInfo));
+                setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+                syncTopStatusIfStillOnTab(tabKey, commonInfo.statsCd);
+                if (updateLastSearchedValues) setLastSearchedValues(values);
+                commitToolbarSnapshotForLoadedTab(
+                    tabKey,
+                    response.data.statusInfo,
+                    convertedData.length > 0,
+                    values,
+                );
+                return true;
+            }
+            alert(response.message || '데이터 조회 중 오류가 발생했습니다.');
+            return false;
+        }
+        if (tabKey === 'ST00020006') {
+            const response = await statisticsInputSewPipeApiService.getConnectionStatus(searchParam);
+            if (response.status === 'success') {
+                const commonInfo = response.data.commonInfo;
+                const facilityConvertedData = (response.data.facilityConnectionList ?? []).map((d) => ({
+                    ...d,
+                }));
+                const adminConvertedData = (response.data.adminAreaConnectionList ?? []).map((d) => ({
+                    ...d,
+                    ctpvNm: d.ctpvNm || commonInfo.ctpvNm,
+                }));
+                applyRowMap((m) => {
+                    m.set('treatmentPlantConnectionInp', toGridRows(facilityConvertedData));
+                    m.set('adminAreaConnectionInp', toGridRows(adminConvertedData));
+                });
+                setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, response.data.statusInfo));
+                setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+                syncTopStatusIfStillOnTab(tabKey, commonInfo.statsCd);
+                if (updateLastSearchedValues) setLastSearchedValues(values);
+                commitToolbarSnapshotForLoadedTab(
+                    tabKey,
+                    response.data.statusInfo,
+                    facilityConvertedData.length > 0 || adminConvertedData.length > 0,
+                    values,
+                );
+                return true;
+            }
+            alert(response.message || '데이터 조회 중 오류가 발생했습니다.');
+            return false;
+        }
+        if (!mergeIntoExistingMap) {
+            setRowDataMap(new Map());
+        }
+        if (updateLastSearchedValues) setLastSearchedValues(values);
+        return true;
+    };
 
-    //     try {
-    //         setIsLoading(true);
+    const handleSearch = async (
+        values: SearchFormValues,
+        options?: { forcedTabKey?: string },
+    ) => {
+        if (!values.sido || values.sido === 'ALL') {
+            alert('시도를 선택해주세요.');
+            return;
+        }
 
-    //         // const searchParam: SewagePipeReviewRequestParams = {
-    //         //     statsYr: values.year,
-    //         //     sewerBzmnCd: values.bsnmCd,
-    //         //     ctpvNm: values.sido,
-    //         //     sggNm: values.gugun === 'ALL' ? '' : values.gugun
-    //         // };
+        try {
+            const periodResponse = await statisticsInputSewSupplyRateApi.checkInputPeriod(values.year || '');
 
-    //         // searchParamRef.current = searchParam;
-    //         // const response = await statisticsManagementApi.getSewagePipeReviewRegionalList(searchParam);
+            if (periodResponse.status !== 'success') {
+                alert(periodResponse.message);
+                return;
+            }
 
-    //         // 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 periods = Array.isArray(periodResponse.data) ? periodResponse.data : [];
+            setPeriodCheckList(periods);
+            const periodOk = isInputPeriodCurrent(periods);
+            periodEnterableRef.current = periodOk;
+            setInputPeriodEnterable(periodOk);
+
+            /** 연도가 바뀐 검색만 전 탭 캐시 초기화 + 첫 탭으로 이동. 연도 외 조건만 바뀌면 다른 탭은 이전 조회 데이터 유지 */
+            const yearChangedFromLastSearch =
+                lastSearchedValues != null &&
+                (lastSearchedValues.year ?? "") !== (values.year ?? "");
+            if (yearChangedFromLastSearch) {
+                setRowDataMap(new Map());
+                setTabStatusInfoMap(new Map());
+                setTabStatsCdMap(new Map());
+                setStatsCd("");
+                setToolbarSnapshotByTab(new Map());
+            }
+
+            lazyTabLoggedRef.current.clear();
+
+            setIsLoading(true);
+
+            const searchParam = buildSewagePipeSearchParam(values);
+            searchParamRef.current = searchParam;
+            searchDoneRef.current = true;
+            setHasSearched(true);
+            setLastSearchedYear(values.year ?? null);
+
+            const forcedTab = options?.forcedTabKey;
+            const tabKeyToLoad = forcedTab
+                ? forcedTab
+                : yearChangedFromLastSearch
+                    ? firstTabKey
+                    : activeTab;
+
+            if (forcedTab) {
+                activeTabRef.current = forcedTab;
+                setActiveTab(forcedTab);
+            } else if (yearChangedFromLastSearch) {
+                activeTabRef.current = firstTabKey;
+                setActiveTab(firstTabKey);
+            } else {
+                activeTabRef.current = activeTab;
+            }
+            await loadSewagePipeActiveTabData(tabKeyToLoad, searchParam, values, true, true);
+        } catch {
+            alert('데이터 조회 중 오류가 발생했습니다.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        const job = postVerificationSearchRef.current;
+        if (!job) return;
+        postVerificationSearchRef.current = null;
+        void handleSearch(job.values, { forcedTabKey: job.tabKey });
+         
+    }, [searchFormRemountKey]);
+
+    const getCurrentRowsForTab = (tabKey: string): Record<string, string | number>[] => {
+        switch (tabKey) {
+            case REGIONAL_FACT_TAB_KEY:
+                return getGridDataRef.current?.() ?? [];
+            case "ST00020002":
+                return getFactInstallGridDataRef.current?.() ?? [];
+            case "ST00020003":
+                return getPipeTypeGridDataRef.current?.() ?? [];
+            case "ST00020004":
+                return getPipeDiameterGridDataRef.current?.() ?? [];
+            case "ST00020005":
+                return getManholeGridDataRef.current?.() ?? [];
+            case "ST00020006":
+                return [
+                    ...(rowDataMap.get("treatmentPlantConnectionInp") ?? []),
+                    ...(rowDataMap.get("adminAreaConnectionInp") ?? []),
+                ];
+            default:
+                return rowDataMap.get(tabKey) ?? [];
+        }
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        const prevTabKey = activeTabRef.current;
+        const latestRowsInPrevTab = getCurrentRowsForTab(prevTabKey);
+        if (latestRowsInPrevTab.length > 0 || rowDataMap.has(prevTabKey)) {
+            setRowDataMap((prev) => {
+                const next = new Map(prev);
+                next.set(prevTabKey, latestRowsInPrevTab);
+                return next;
+            });
+        }
+
+        activeTabRef.current = tabKey;
+        setActiveTab(tabKey);
+        setStatsCd(tabStatsCdMap.get(tabKey) ?? "");
+
+        const hasActiveTabData = tabRowDataExists(rowDataMap, tabKey);
+
+        const canLazyLoad =
+            searchParamRef.current &&
+            !hasActiveTabData &&
+            !lazyTabLoggedRef.current.has(tabKey) &&
+            searchDoneRef.current;
+
+        if (!canLazyLoad) return;
+
+        const searchParam = searchParamRef.current;
+        const values = lastSearchedValues ?? searchValues;
+        if (!searchParam || !values) return;
+
+        try {
+            setIsLoading(true);
+            const ok = await loadSewagePipeActiveTabData(tabKey, searchParam, values, true, false);
+            if (ok) lazyTabLoggedRef.current.add(tabKey);
+        } catch {
+            alert('데이터 조회 중 오류가 발생했습니다.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const getLastYearDataFunc = async () => {
+        const values = lastSearchedValues ?? searchValues;
+        if (!values?.sido || values.sido === 'ALL') {
+            alert('시도를 선택해주세요.');
+            return;
+        }
+        if (!lastSearchedYear) {
+            alert('먼저 데이터를 조회해주세요.');
+            return;
+        }
+        try {
+            setIsLoading(true);
+            const param = buildSewagePipeSearchParam(values, { mode: 'PRE' });
+            await loadSewagePipeActiveTabData(activeTab, param, values, true, false);
+        } catch {
+            alert('데이터 조회 중 오류가 발생했습니다.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // const getTabGridRowsForVerification = (tabKey: string): Record<string, string | number>[] => {
+    //     switch (tabKey) {
+    //         case "ST00020001":
+    //             return getGridDataRef.current?.() ?? [];
+    //         case "ST00020002":
+    //             return getFactInstallGridDataRef.current?.() ?? [];
+    //         case "ST00020003":
+    //             return getPipeTypeGridDataRef.current?.() ?? [];
+    //         case "ST00020004":
+    //             return getPipeDiameterGridDataRef.current?.() ?? [];
+    //         case "ST00020005":
+    //             return getManholeGridDataRef.current?.() ?? [];
+    //         case "ST00020006":
+    //             return [
+    //                 ...(rowDataMap.get("treatmentPlantConnectionInp") ?? []),
+    //                 ...(rowDataMap.get("adminAreaConnectionInp") ?? []),
+    //             ];
+    //         default:
+    //             return [];
     //     }
     // };
 
-    const SubmitExceptionFunc = () => {
-        console.log('submit exception');
-        // 예외 제출 로직 
+    const SubmitExceptionFunc = async (submitInfo: StatisticsInputSubmitInfoFormData) => {
+        const tabKey = activeTabRef.current;
+        const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+        if (verificationBlocked) {
+            alert(verificationBlocked);
+            return;
+        }
+        const userInfo = await getUserInfo();
+        const statsCdForTab = tabStatsCdMap.get(tabKey) ?? statsCd;
+
+        const params: SubmitExceptionRequest = {
+            ...submitInfo,
+            sewerBzmnCd: searchValues?.bsnmCd ?? "",
+            ctpvNm: searchValues?.sido ?? "",
+            sggNm: searchValues?.gugun === "ALL" ? "" : (searchValues?.gugun ?? ""),
+            statsYr: searchValues?.year ?? "",
+            userId: userInfo.userUnqId,
+            statsCd: statsCdForTab,
+        };
+
+        try {
+            setIsLoading(true);
+            const response = await statisticsApi.submitException(params);
+            if (response.status === "success") {
+                const values = lastSearchedValues ?? searchValues;
+                if (values && searchParamRef.current) {
+                    await loadSewagePipeActiveTabData(tabKey, searchParamRef.current, values, true, false);
+                }
+                alert("제출되었습니다.");
+            } else {
+                alert(response.message || "데이터 제출 중 오류가 발생했습니다.");
+            }
+        } catch {
+            alert("데이터 제출 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
     };
 
-    const getLastYearDataFunc = () => {
-        console.log('get last year data');
-        // 지난연도 데이터 가져오기 로직
+    const submitFunc = async (isException: boolean) => {
+        // const tabKey = activeTabRef.current;
+        const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+        if (verificationBlocked) {
+            alert(verificationBlocked);
+            return;
+        }
+        if (!isException) {
+            // const currentData = getTabGridRowsForVerification(tabKey);
+            // const rowsWithVerificationErrors = currentData.filter((d) =>
+            //     hasRegionalFactVerificationErrors((d as GridRowWithVerification).verificationResult),
+            // );
+            // if (rowsWithVerificationErrors.length > 0) {
+            //     alert("데이터에 오류가 있습니다.\n수정 후 제출해주세요.");
+            //     return;
+            // }
+            if (await confirm("제출 하시겠습니까?")) {
+                setIsExceptionSubmitFlow(false);
+                setShowDailog(true);
+            }
+        } else {
+            if (await confirm("예외 제출 시 검증 결과에 오류가 있어도 제출 처리됩니다.")) {
+                setIsExceptionSubmitFlow(true);
+                setShowDailog(true);
+            }
+        }
     };
 
-    const submitFunc = () => {
-        console.log('submit');
-        // 제출 로직
+    const executeExceptionSubmit = async (submitInfo: StatisticsInputSubmitInfoFormData) => {
+        await SubmitExceptionFunc(submitInfo);
     };
 
-    const saveFunc = () => {
-        console.log('save');
-        // 저장 로직
+    const executeSubmit = async (submitInfo: StatisticsInputSubmitInfoFormData) => {
+        const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+        if (verificationBlocked) {
+            alert(verificationBlocked);
+            return;
+        }
+        const tabKey = activeTabRef.current;
+        const values = lastSearchedValues ?? searchValues;
+        if (!values?.year) {
+            alert("검색 후 제출해 주세요.");
+            return;
+        }
+        const searchParam = searchParamRef.current;
+        if (!searchParam) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+
+        try {
+            showGlobalProgress({ label: "서버에 요청 중...", progress: 0 });
+            const userInfo = await getUserInfo();
+            const statsCdForTab = tabStatsCdMap.get(tabKey) ?? statsCd;
+            const statusForTab = tabStatusInfoMap.get(tabKey) ?? null;
+            const submitBase = {
+                statsYr: values.year ?? "",
+                ctpvNm: values.sido ?? "",
+                sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
+                sewerBzmnCd: values.bsnmCd ?? "",
+                userId: userInfo.userUnqId,
+                laePicNm: submitInfo.laePicNm,
+                laeKbrdrJbgdNm: submitInfo.laeKbrdrJbgdNm,
+                laeKbrdrDeptNm: submitInfo.laeKbrdrDeptNm,
+                laePicTelNo: submitInfo.laePicTelNo,
+                laeIdfrNm: submitInfo.laeIdfrNm,
+                laeIdfrJbgdNm: submitInfo.laeIdfrJbgdNm,
+                laeIdfrDeptNm: submitInfo.laeIdfrDeptNm,
+                laeIdfrTelNo: submitInfo.laeIdfrTelNo,
+            };
+            let response: SeweragePipeInputSubmitResponse | null = null;
+
+            switch (tabKey) {
+                case REGIONAL_FACT_TAB_KEY: {
+                    const currentData = getGridDataRef.current?.();
+                    if (!currentData || currentData.length === 0) {
+                        alert("제출할 데이터가 없습니다.");
+                        return;
+                    }
+
+                    const submitList = buildRegionalFactSubmitListFromGrid(currentData);
+
+                    const requestData: SeweragePipeInputRegionalFactStatusSubmitRequest = {
+                        ...submitBase,
+                        submitList,
+                    };
+
+                    setGlobalProgressLabel("일반 검증 진행 중...");
+                    response =
+                        await statisticsInputSewPipeApiService.submitRegionalFactStatus(requestData);
+                    break;
+                }
+                case "ST00020002": {
+                    const currentData = getFactInstallGridDataRef.current?.();
+                    if (!currentData || currentData.length === 0) {
+                        alert("제출할 데이터가 없습니다.");
+                        return;
+                    }
+                    const columnFormatMap = new Map<string, string>();
+                    FactInstallStatusInpColumn.columns.forEach((col) => {
+                        if (col.fieldName && col.dataFormat) columnFormatMap.set(col.fieldName, col.dataFormat);
+                    });
+                    const formatNumber = (value: string | number | null | undefined, fieldName: string): number => {
+                        if (value === null || value === undefined || value === "") return 0;
+                        const num = typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+                        if (isNaN(num)) return 0;
+                        const format = columnFormatMap.get(fieldName);
+                        if (!format) return num;
+                        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+                        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+                    };
+                    const submitList = currentData.map((d) => ({
+                        admdstCd: String(d.admdstCd ?? ""),
+                        sggNm: String(d.sggNm ?? ""),
+                        admdstNm: String(d.admdstNm ?? ""),
+                        fcltSn: String(d.fcltSn ?? ""),
+                        swtrmtFcltCd: String(d.swtrmtFcltCd ?? ""),
+                        swtrmtFcltNm: String(d.swtrmtFcltNm ?? ""),
+                        prcsFcltCpct: formatNumber(d.prcsFcltCpct, "prcsFcltCpct"),
+                        prcsZoneArea: formatNumber(d.prcsZoneArea, "prcsZoneArea"),
+                        cbsysPrcsZoneArea: formatNumber(d.cbsysPrcsZoneArea, "cbsysPrcsZoneArea"),
+                        sprsysPrcsZoneArea: formatNumber(d.sprsysPrcsZoneArea, "sprsysPrcsZoneArea"),
+                        sprsysVartnRt: formatNumber(d.sprsysVartnRt, "sprsysVartnRt"),
+                        mltvEqpmCnt: formatNumber(d.mltvEqpmCnt, "mltvEqpmCnt"),
+                        cbsysMltvEqpmCnt: formatNumber(d.cbsysMltvEqpmCnt, "cbsysMltvEqpmCnt"),
+                        sprsysMltvEqpmCnt: formatNumber(d.sprsysMltvEqpmCnt, "sprsysMltvEqpmCnt"),
+                        sprsysMltvLnkgCnt: formatNumber(d.sprsysMltvLnkgCnt, "sprsysMltvLnkgCnt"),
+                        sprsysMltvYetLnkgCnt: formatNumber(d.sprsysMltvYetLnkgCnt, "sprsysMltvYetLnkgCnt"),
+                        wholFcltPrlg: formatNumber(d.wholFcltPrlg, "wholFcltPrlg"),
+                        wholIcptgAtlfcsPrlg: formatNumber(d.wholIcptgAtlfcsPrlg, "wholIcptgAtlfcsPrlg"),
+                        icptgPrlg: formatNumber(d.icptgPrlg, "icptgPrlg"),
+                        atlfcsPrlg: formatNumber(d.atlfcsPrlg, "atlfcsPrlg"),
+                        cbsysStofcbrCnt: formatNumber(d.cbsysStofcbrCnt, "cbsysStofcbrCnt"),
+                        sprsysStofcbrCnt: formatNumber(d.sprsysStofcbrCnt, "sprsysStofcbrCnt"),
+                        sprsysExlnOtflCnt: formatNumber(d.sprsysExlnOtflCnt, "sprsysExlnOtflCnt"),
+                        wholBrchlnPrlg: formatNumber(d.wholBrchlnPrlg, "wholBrchlnPrlg"),
+                        cbsysBrchlnPrlg: formatNumber(d.cbsysBrchlnPrlg, "cbsysBrchlnPrlg"),
+                        exlnBrchlnPrlg: formatNumber(d.exlnBrchlnPrlg, "exlnBrchlnPrlg"),
+                        drtwBrchlnPrlg: formatNumber(d.drtwBrchlnPrlg, "drtwBrchlnPrlg"),
+                        rmrk: String(d.rmrk ?? ""),
+                    }));
+                    const requestData: SeweragePipeInputFactInstallStatusSubmitRequest = {
+                        ...submitBase,
+                        submitList,
+                    };
+                    setGlobalProgressLabel("일반 검증 진행 중...");
+                    response = await statisticsInputSewPipeApiService.submitFactInstallStatus(requestData);
+                    break;
+                }
+                case "ST00020003": {
+                    const currentData = getPipeTypeGridDataRef.current?.();
+                    if (!currentData || currentData.length === 0) {
+                        alert("제출할 데이터가 없습니다.");
+                        return;
+                    }
+                    const columnFormatMap = new Map<string, string>();
+                    PipeTypeStatusInpColumn.columns.forEach((col) => {
+                        if (col.fieldName && col.dataFormat) columnFormatMap.set(col.fieldName, col.dataFormat);
+                    });
+                    const formatNumber = (value: string | number | null | undefined, fieldName: string): number => {
+                        if (value === null || value === undefined || value === "") return 0;
+                        const num = typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+                        if (isNaN(num)) return 0;
+                        const format = columnFormatMap.get(fieldName);
+                        if (!format) return num;
+                        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+                        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+                    };
+                    const lastDataYear = getPipeTypeLastDataYear();
+                    const submitList = currentData.map((d) => {
+                        const yearlyStatList = [];
+                        for (let year = 1995; year <= lastDataYear; year++) {
+                            const wholKey = `y${year}PrlgWhol`;
+                            const lyngKey = `y${year}LyngPrlg`;
+                            const dmltnKey = `y${year}DmltnPrlg`;
+                            yearlyStatList.push({
+                                lyngYr: String(year),
+                                lyngPrlg: formatNumber(d[lyngKey] as string | number | undefined, lyngKey),
+                                dmltnPrlg: formatNumber(d[dmltnKey] as string | number | undefined, dmltnKey),
+                                prlgWhol: formatNumber(d[wholKey] as string | number | undefined, wholKey),
+                            });
+                        }
+                        return {
+                            admdstCd: String(d.admdstCd ?? ""),
+                            admdstNm: String(d.admdstNm ?? ""),
+                            pipeSeCd: String(d.pipeSeCd ?? ""),
+                            yearlyStatList,
+                            rmrk: String(d.rmrk ?? ""),
+                            lyngPrlgWhol: formatNumber(d.lyngPrlg, "lyngPrlg"),
+                            dmltnPrlgWhol: formatNumber(d.dmltnPrlg, "dmltnPrlg"),
+                            pipeByPrstWhol: formatNumber(d.pipeByPrstWhol, "pipeByPrstWhol"),
+                        };
+                    });
+                    const requestData: SeweragePipeInputPipeTypeStatusSubmitRequest = {
+                        ...submitBase,
+                        submitList,
+                    };
+                    setGlobalProgressLabel("일반 검증 진행 중...");
+                    response = await statisticsInputSewPipeApiService.submitPipeTypeStatus(requestData);
+                    break;
+                }
+                case "ST00020004": {
+                    const currentData = getPipeDiameterGridDataRef.current?.();
+                    if (!currentData || currentData.length === 0) {
+                        alert("제출할 데이터가 없습니다.");
+                        return;
+                    }
+                    const columnFormatMap = new Map<string, string>();
+                    PipeDiameterStatusInpColumn.columns.forEach((col) => {
+                        if (col.fieldName && col.dataFormat) columnFormatMap.set(col.fieldName, col.dataFormat);
+                    });
+                    const formatNumber = (value: string | number | null | undefined, fieldName: string): number => {
+                        if (value === null || value === undefined || value === "") return 0;
+                        const num = typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+                        if (isNaN(num)) return 0;
+                        const format = columnFormatMap.get(fieldName);
+                        if (!format) return num;
+                        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+                        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+                    };
+                    const submitList = currentData.map((d) => ({
+                        pipeSeCd: String(d.pipeSeCd ?? ""),
+                        step1PdmtPrlg: formatNumber(d.step1PdmtPrlg, "step1PdmtPrlg"),
+                        step2PdmtPrlg: formatNumber(d.step2PdmtPrlg, "step2PdmtPrlg"),
+                        step3PdmtPrlg: formatNumber(d.step3PdmtPrlg, "step3PdmtPrlg"),
+                        step4PdmtPrlg: formatNumber(d.step4PdmtPrlg, "step4PdmtPrlg"),
+                        step5PdmtPrlg: formatNumber(d.step5PdmtPrlg, "step5PdmtPrlg"),
+                        sqrePdmtPrlg: formatNumber(d.sqrePdmtPrlg, "sqrePdmtPrlg"),
+                        etcPdmtPrlg: formatNumber(d.etcPdmtPrlg, "etcPdmtPrlg"),
+                        rmrk: String(d.rmrk ?? ""),
+                        pdmtByTsmWhol: formatNumber(d.pdmtByTsmWhol, "pdmtByTsmWhol"),
+                        admdstCd: String(d.admdstCd ?? ""),
+                        admdstNm: String(d.admdstNm ?? ""),
+                    }));
+                    const requestData: SeweragePipeInputPipeDiameterStatusSubmitRequest = {
+                        ...submitBase,
+                        submitList,
+                    };
+                    setGlobalProgressLabel("일반 검증 진행 중...");
+                    response = await statisticsInputSewPipeApiService.submitPipeDiameterStatus(requestData);
+                    break;
+                }
+                case "ST00020005": {
+                    const currentData = getManholeGridDataRef.current?.();
+                    if (!currentData || currentData.length === 0) {
+                        alert("제출할 데이터가 없습니다.");
+                        return;
+                    }
+                    const columnFormatMap = new Map<string, string>();
+                    ManholeStatusInpColumn.columns.forEach((col) => {
+                        if (col.fieldName && col.dataFormat) columnFormatMap.set(col.fieldName, col.dataFormat);
+                    });
+                    const formatNumber = (value: string | number | null | undefined, fieldName: string): number => {
+                        if (value === null || value === undefined || value === "") return 0;
+                        const num = typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+                        if (isNaN(num)) return 0;
+                        const format = columnFormatMap.get(fieldName);
+                        if (!format) return num;
+                        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+                        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+                    };
+                    const minYy = 14;
+                    const maxYy = getManholeLastDataYear() % 100;
+                    const submitList = currentData.map((d) => {
+                        const yearlyStats: SeweragePipeInputManholeStatusSaveYearlyStatItem[] = [];
+                        for (let yy = minYy; yy <= maxYy; yy++) {
+                            const year = 2000 + yy;
+                            const wholKey = `yy${yy}WholMnhlCnt`;
+                            const step1Key = `yy${yy}Step1MnhlCnt`;
+                            const step2Key = `yy${yy}Step2MnhlCnt`;
+                            const step3Key = `yy${yy}Step3MnhlCnt`;
+                            const step4Key = `yy${yy}Step4MnhlCnt`;
+                            const step5Key = `yy${yy}Step5MnhlCnt`;
+                            yearlyStats.push({
+                                manhYr: String(year),
+                                wholMnhlCnt: formatNumber(d[wholKey] as string | number | undefined, wholKey),
+                                step1MnhlCnt: formatNumber(d[step1Key] as string | number | undefined, step1Key),
+                                step2MnhlCnt: formatNumber(d[step2Key] as string | number | undefined, step2Key),
+                                step3MnhlCnt: formatNumber(d[step3Key] as string | number | undefined, step3Key),
+                                step4MnhlCnt: formatNumber(d[step4Key] as string | number | undefined, step4Key),
+                                step5MnhlCnt: formatNumber(d[step5Key] as string | number | undefined, step5Key),
+                            });
+                        }
+                        return {
+                            emphsMngSeCd: String(d.emphsMngSeCd ?? ""),
+                            admdstCd: String(d.admdstCd ?? ""),
+                            admdstNm: String(d.admdstNm ?? ""),
+                            yearlyStats,
+                            rmrk: String(d.rmrk ?? ""),
+                        };
+                    });
+                    const requestData: SeweragePipeInputManholeStatusSubmitRequest = {
+                        ...submitBase,
+                        submitList,
+                    };
+                    setGlobalProgressLabel("일반 검증 진행 중...");
+                    response = await statisticsInputSewPipeApiService.submitManholeStatus(requestData);
+                    break;
+                }
+                default:
+                    alert("해당 탭 제출 API는 준비 중입니다.");
+                    return;
+            }
+
+            if (!response || response.status !== "success") {
+                alert(response?.message || "데이터 제출 중 오류가 발생했습니다.");
+                return;
+            }
+
+            const finalStatus = response.data?.finalStatus;
+            const nvpassed = response.data?.nvpassed;
+
+            if (finalStatus === "5") {
+                setGlobalProgress(50);
+                setGlobalProgressLabel("IMR 검증 진행 중...");
+                const imrParam = {
+                    user_id: userInfo.userUnqId,
+                    sewer_bzmn_cd: values.bsnmCd ?? "",
+                    stats_cd: statsCdForTab,
+                    stats_yr: values.year ?? "",
+                    lae_sbmsn_stts_cd: statusForTab?.laeSbmsnSttsCd === "4" ? "4" : "2",
+                    gen_verify_stts_cd: nvpassed ? "1" : "2",
+                };
+
+                try {
+                    const imrResponse = await statisticsApi.callImrService(imrParam);
+                    if (imrResponse.job_id) {
+                        await waitForImrJobCompleted(
+                            imrResponse.job_id,
+                            (id) => statisticsApi.getImrStatus(id),
+                            {
+                                onProgress: (jobProgress) => {
+                                    setGlobalProgress(50 + Math.round(jobProgress / 2));
+                                },
+                            },
+                        );
+                    }
+                    setGlobalProgress(100);
+                    await loadSewagePipeActiveTabData(
+                        tabKey,
+                        buildSewagePipeSearchParam(values),
+                        values,
+                        true,
+                        false,
+                    );
+                    await openVerificationResultDialogIfNeeded(
+                        {
+                            sewerBzmnCd: values.bsnmCd ?? "",
+                            ctpvNm: values.sido ?? "",
+                            sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
+                            statsYr: values.year ?? "",
+                            statsCd: statsCdForTab,
+                        },
+                        setVerificationResultDialogOpen,
+                        { notify: alert },
+                    );
+                } catch (e) {
+                    await loadSewagePipeActiveTabData(
+                        tabKey,
+                        buildSewagePipeSearchParam(values),
+                        values,
+                        true,
+                        false,
+                    );
+                    await openVerificationResultDialogIfNeeded(
+                        {
+                            sewerBzmnCd: values.bsnmCd ?? "",
+                            ctpvNm: values.sido ?? "",
+                            sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
+                            statsYr: values.year ?? "",
+                            statsCd: statsCdForTab,
+                        },
+                        setVerificationResultDialogOpen,
+                        { notify: alert, notifySubmitComplete: false },
+                    );
+                    const msg =
+                        e instanceof Error && e.message
+                            ? e.message
+                            : "IMR 검증 중 오류가 발생했습니다.\n관리자에게 문의하세요.";
+                    alert(msg);
+                }
+            } else {
+                setGlobalProgress(100);
+                await loadSewagePipeActiveTabData(
+                    tabKey,
+                    buildSewagePipeSearchParam(values),
+                    values,
+                    true,
+                    false,
+                );
+                await openVerificationResultDialogIfNeeded(
+                    {
+                        sewerBzmnCd: values.bsnmCd ?? "",
+                        ctpvNm: values.sido ?? "",
+                        sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
+                        statsYr: values.year ?? "",
+                        statsCd: statsCdForTab,
+                    },
+                    setVerificationResultDialogOpen,
+                    { notify: alert },
+                );
+            }
+        } catch {
+            alert("데이터 제출 중 오류가 발생했습니다.");
+        } finally {
+            hideGlobalProgress();
+        }
     };
 
+    const cnacelSubmitFunc = async () => {
+        try {
+            if (await confirm('제출된 내용을 취소하시겠습니까?')) {
+                const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+                if (verificationBlocked) {
+                    alert(verificationBlocked);
+                    return;
+                }
+
+                const userInfo = await getUserInfo();
+
+                const requestData: cancelSubmitRequest = {
+                    sewerBzmnCd: searchValues?.bsnmCd ?? '',
+                    ctpvNm: searchValues?.sido ?? '',
+                    sggNm: searchValues?.gugun === "ALL" ? "" : (searchValues?.gugun ?? ""),
+                    statsYr: searchValues?.year ?? '',
+                    mdfrId: userInfo.userUnqId,
+                    statsCd: tabStatsCdMap.get(activeTab) ?? statsCd,
+                };
+
+                const response = await statisticsApi.cancelSubmit(requestData);
+
+                if (response.status === 'success') {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (values) {
+                        const refreshedParam = buildSewagePipeSearchParam(values);
+                        await loadSewagePipeActiveTabData(activeTab, refreshedParam, values, true, false);
+                    }
+                    alert('제출 취소되었습니다.');
+                } else {
+                    alert(response.message ?? '제출 취소 중 오류가 발생했습니다.');
+                }
+            }
+        } catch {
+            alert('제출 취소 중 오류가 발생했습니다.');
+        }
+    };
+
+    const refreshConnectionStatusAfterPopupSave = async () => {
+        const searchParam = searchParamRef.current;
+        const values = lastSearchedValues ?? searchValues;
+        if (!searchParam || !values) return;
+        await loadSewagePipeActiveTabData("ST00020006", searchParam, values, true, false);
+    };
+
+    const openVerificationHistoryDialog = () => {
+        const activeTabStatsCd = tabStatsCdMap.get(activeTab) ?? statsCd;
+        if (!searchValues?.year || !searchValues?.sido || !searchValues?.bsnmCd || !activeTabStatsCd) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+        setVerificationHistoryOpen(true);
+    };
+
+    const saveFunc = async () => {
+        const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+        if (verificationBlocked) {
+            alert(verificationBlocked);
+            return;
+        }
+        if (!(await confirm("저장 하시겠습니까?"))) return;
+
+        const values = lastSearchedValues ?? searchValues;
+        if (!values?.year) {
+            alert("검색 후 저장해 주세요.");
+            return;
+        }
+
+        try {
+            showGlobalProgress({ label: "저장 진행 중...", progress: 0 });
+
+            switch (activeTab) {
+                case "ST00020001": {
+                    const currentData = getGridDataRef.current?.();
+                    if (!currentData || currentData.length === 0) {
+                        alert("저장할 데이터가 없습니다.");
+                        return;
+                    }
+
+                    const columnFormatMap = new Map<string, string>();
+                    RegionalFactStatusInpColumn.columns.forEach((col) => {
+                        if (col.fieldName && col.dataFormat) {
+                            columnFormatMap.set(col.fieldName, col.dataFormat);
+                        }
+                    });
+
+                    const formatNumber = (value: string | number | null | undefined, fieldName: string): number => {
+                        if (value === null || value === undefined || value === "") return 0;
+                        const num = typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+                        if (isNaN(num)) return 0;
+                        const format = columnFormatMap.get(fieldName);
+                        if (!format) return num;
+                        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+                        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+                    };
+
+                    const userInfo = await getUserInfo();
+
+                    const saveList = currentData.map((d) => ({
+                        admdstCd: String(d.admdstCd ?? ""),
+                        sggNm: String(d.sggNm ?? ""),
+                        admdstNm: String(d.admdstNm ?? ""),
+                        goalYr: String(d.goalYr ?? ""),
+                        wholPplMtncPlanPrlg: formatNumber(d.wholPplMtncPlanPrlg, "wholPplMtncPlanPrlg"),
+                        wholPlanPrlg: formatNumber(d.wholPlanPrlg, "wholPlanPrlg"),
+                        wholFcltPrlg: formatNumber(d.wholFcltPrlg, "wholFcltPrlg"),
+                        swagePplPsplyRt: formatNumber(d.swagePplPsplyRt, "swagePplPsplyRt"),
+                        cbsysPplMtncPlanArea: formatNumber(d.cbsysPplMtncPlanArea, "cbsysPplMtncPlanArea"),
+                        cbsysPplMtncPlanPrlg: formatNumber(d.cbsysPplMtncPlanPrlg, "cbsysPplMtncPlanPrlg"),
+                        cbsysPlanPrlg: formatNumber(d.cbsysPlanPrlg, "cbsysPlanPrlg"),
+                        cbsysFcltPrlg: formatNumber(d.cbsysFcltPrlg, "cbsysFcltPrlg"),
+                        cbsysSqrePrlg: formatNumber(d.cbsysSqrePrlg, "cbsysSqrePrlg"),
+                        cbsysCiclPrlg: formatNumber(d.cbsysCiclPrlg, "cbsysCiclPrlg"),
+                        cbsysOpnPrlg: formatNumber(d.cbsysOpnPrlg, "cbsysOpnPrlg"),
+                        cbsysGttrPrlg: formatNumber(d.cbsysGttrPrlg, "cbsysGttrPrlg"),
+                        drtwPplMtncPlanArea: formatNumber(d.drtwPplMtncPlanArea, "drtwPplMtncPlanArea"),
+                        drtwPplMtncPlanPrlg: formatNumber(d.drtwPplMtncPlanPrlg, "drtwPplMtncPlanPrlg"),
+                        drtwPplPlanPrlg: formatNumber(d.drtwPplPlanPrlg, "drtwPplPlanPrlg"),
+                        drtwPplFcltPrlg: formatNumber(d.drtwPplFcltPrlg, "drtwPplFcltPrlg"),
+                        drtwPplSqrePrlg: formatNumber(d.drtwPplSqrePrlg, "drtwPplSqrePrlg"),
+                        drtwPplCiclPrlg: formatNumber(d.drtwPplCiclPrlg, "drtwPplCiclPrlg"),
+                        exlnPplMtncPlanArea: formatNumber(d.exlnPplMtncPlanArea, "exlnPplMtncPlanArea"),
+                        exlnPplMtncPlanPrlg: formatNumber(d.exlnPplMtncPlanPrlg, "exlnPplMtncPlanPrlg"),
+                        exlnPplPlanPrlg: formatNumber(d.exlnPplPlanPrlg, "exlnPplPlanPrlg"),
+                        exlnPplFcltPrlg: formatNumber(d.exlnPplFcltPrlg, "exlnPplFcltPrlg"),
+                        exlnPplSqrePrlg: formatNumber(d.exlnPplSqrePrlg, "exlnPplSqrePrlg"),
+                        exlnPplCiclPrlg: formatNumber(d.exlnPplCiclPrlg, "exlnPplCiclPrlg"),
+                        exlnPplOpnPrlg: formatNumber(d.exlnPplOpnPrlg, "exlnPplOpnPrlg"),
+                        exlnPplGttrPrlg: formatNumber(d.exlnPplGttrPrlg, "exlnPplGttrPrlg"),
+                        cbsysMnhlCnt: formatNumber(d.cbsysMnhlCnt, "cbsysMnhlCnt"),
+                        sprsysDrtwMnhlCnt: formatNumber(d.sprsysDrtwMnhlCnt, "sprsysDrtwMnhlCnt"),
+                        sprsysExlnMnhlCnt: formatNumber(d.sprsysExlnMnhlCnt, "sprsysExlnMnhlCnt"),
+                        drtwRcvprpCnt: formatNumber(d.drtwRcvprpCnt, "drtwRcvprpCnt"),
+                        exlnRcvprpCnt: formatNumber(d.exlnRcvprpCnt, "exlnRcvprpCnt"),
+                        stofcbrCnt: formatNumber(d.stofcbrCnt, "stofcbrCnt"),
+                        exlnOtflCnt: formatNumber(d.exlnOtflCnt, "exlnOtflCnt"),
+                        sewerLdgrEdpPrlg: formatNumber(d.sewerLdgrEdpPrlg, "sewerLdgrEdpPrlg"),
+                        sewerLdgrEdpRt: formatNumber(d.sewerLdgrEdpRt, "sewerLdgrEdpRt"),
+                        rmrk: (d.rmrk as string | null) ?? null,
+                    }));
+
+                    const param: SeweragePipeInputRegionalFactStatusSaveRequest = {
+                        statsYr: values.year ?? "",
+                        ctpvNm: values.sido ?? "",
+                        sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
+                        sewerBzmnCd: values.bsnmCd ?? "",
+                        userId: userInfo.userUnqId,
+                        // superAdmin: isAdminInfo ? "superAdmin" : "",
+                        saveList,
+                    };
+
+                    const response =
+                        await statisticsInputSewPipeApiService.saveRegionalFactStatus(param);
+                    if (response.status === "success") {
+                        setGlobalProgress(50);
+                        const refreshedParam = buildSewagePipeSearchParam(values);
+                        await loadSewagePipeActiveTabData(activeTab, refreshedParam, values, true, false);
+                        setGlobalProgress(100);
+                        alert("저장되었습니다.");
+                    } else {
+                        alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                    }
+                    break;
+                }
+                case "ST00020002": {
+                    const currentData = getFactInstallGridDataRef.current?.();
+                    if (!currentData || currentData.length === 0) {
+                        alert("저장할 데이터가 없습니다.");
+                        return;
+                    }
+
+                    const columnFormatMap = new Map<string, string>();
+                    FactInstallStatusInpColumn.columns.forEach((col) => {
+                        if (col.fieldName && col.dataFormat) {
+                            columnFormatMap.set(col.fieldName, col.dataFormat);
+                        }
+                    });
+
+                    const formatNumber = (value: string | number | null | undefined, fieldName: string): number => {
+                        if (value === null || value === undefined || value === "") return 0;
+                        const num = typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+                        if (isNaN(num)) return 0;
+                        const format = columnFormatMap.get(fieldName);
+                        if (!format) return num;
+                        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+                        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+                    };
+
+                    const userInfo = await getUserInfo();
+
+                    const saveList = currentData.map((d) => ({
+                        admdstCd: String(d.admdstCd ?? ""),
+                        sggNm: String(d.sggNm ?? ""),
+                        admdstNm: String(d.admdstNm ?? ""),
+                        fcltSn: String(d.fcltSn ?? ""),
+                        swtrmtFcltCd: String(d.swtrmtFcltCd ?? ""),
+                        swtrmtFcltNm: String(d.swtrmtFcltNm ?? ""),
+                        prcsFcltCpct: formatNumber(d.prcsFcltCpct, "prcsFcltCpct"),
+                        prcsZoneArea: formatNumber(d.prcsZoneArea, "prcsZoneArea"),
+                        cbsysPrcsZoneArea: formatNumber(d.cbsysPrcsZoneArea, "cbsysPrcsZoneArea"),
+                        sprsysPrcsZoneArea: formatNumber(d.sprsysPrcsZoneArea, "sprsysPrcsZoneArea"),
+                        sprsysVartnRt: formatNumber(d.sprsysVartnRt, "sprsysVartnRt"),
+                        mltvEqpmCnt: formatNumber(d.mltvEqpmCnt, "mltvEqpmCnt"),
+                        cbsysMltvEqpmCnt: formatNumber(d.cbsysMltvEqpmCnt, "cbsysMltvEqpmCnt"),
+                        sprsysMltvEqpmCnt: formatNumber(d.sprsysMltvEqpmCnt, "sprsysMltvEqpmCnt"),
+                        sprsysMltvLnkgCnt: formatNumber(d.sprsysMltvLnkgCnt, "sprsysMltvLnkgCnt"),
+                        sprsysMltvYetLnkgCnt: formatNumber(d.sprsysMltvYetLnkgCnt, "sprsysMltvYetLnkgCnt"),
+                        wholFcltPrlg: formatNumber(d.wholFcltPrlg, "wholFcltPrlg"),
+                        wholIcptgAtlfcsPrlg: formatNumber(d.wholIcptgAtlfcsPrlg, "wholIcptgAtlfcsPrlg"),
+                        icptgPrlg: formatNumber(d.icptgPrlg, "icptgPrlg"),
+                        atlfcsPrlg: formatNumber(d.atlfcsPrlg, "atlfcsPrlg"),
+                        cbsysStofcbrCnt: formatNumber(d.cbsysStofcbrCnt, "cbsysStofcbrCnt"),
+                        sprsysStofcbrCnt: formatNumber(d.sprsysStofcbrCnt, "sprsysStofcbrCnt"),
+                        sprsysExlnOtflCnt: formatNumber(d.sprsysExlnOtflCnt, "sprsysExlnOtflCnt"),
+                        wholBrchlnPrlg: formatNumber(d.wholBrchlnPrlg, "wholBrchlnPrlg"),
+                        cbsysBrchlnPrlg: formatNumber(d.cbsysBrchlnPrlg, "cbsysBrchlnPrlg"),
+                        exlnBrchlnPrlg: formatNumber(d.exlnBrchlnPrlg, "exlnBrchlnPrlg"),
+                        drtwBrchlnPrlg: formatNumber(d.drtwBrchlnPrlg, "drtwBrchlnPrlg"),
+                        rmrk: String(d.rmrk ?? ""),
+                    }));
+
+                    const param: SeweragePipeInputFactInstallStatusSaveRequest = {
+                        statsYr: values.year ?? "",
+                        ctpvNm: values.sido ?? "",
+                        sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
+                        sewerBzmnCd: values.bsnmCd ?? "",
+                        userId: userInfo.userUnqId,
+                        // superAdmin: isAdminInfo ? "superAdmin" : "",
+                        saveList,
+                    };
+
+                    const response =
+                        await statisticsInputSewPipeApiService.saveFactInstallStatus(param);
+                    if (response.status === "success") {
+                        setGlobalProgress(50);
+                        const refreshedParam = buildSewagePipeSearchParam(values);
+                        await loadSewagePipeActiveTabData(activeTab, refreshedParam, values, true, false);
+                        setGlobalProgress(100);
+                        alert("저장되었습니다.");
+                    } else {
+                        alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                    }
+                    break;
+                }
+                case "ST00020003": {
+                    const currentData = getPipeTypeGridDataRef.current?.();
+                    if (!currentData || currentData.length === 0) {
+                        alert("저장할 데이터가 없습니다.");
+                        return;
+                    }
+
+                    const columnFormatMap = new Map<string, string>();
+                    PipeTypeStatusInpColumn.columns.forEach((col) => {
+                        if (col.fieldName && col.dataFormat) {
+                            columnFormatMap.set(col.fieldName, col.dataFormat);
+                        }
+                    });
+
+                    const formatNumber = (value: string | number | null | undefined, fieldName: string): number => {
+                        if (value === null || value === undefined || value === "") return 0;
+                        const num = typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+                        if (isNaN(num)) return 0;
+                        const format = columnFormatMap.get(fieldName);
+                        if (!format) return num;
+                        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+                        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+                    };
+
+                    const lastDataYear = getPipeTypeLastDataYear();
+
+                    const saveList = currentData.map((d) => {
+                        const yearlyStatList = [];
+                        for (let year = 1995; year <= lastDataYear; year++) {
+                            const wholKey = `y${year}PrlgWhol`;
+                            const lyngKey = `y${year}LyngPrlg`;
+                            const dmltnKey = `y${year}DmltnPrlg`;
+                            yearlyStatList.push({
+                                lyngYr: String(year),
+                                lyngPrlg: formatNumber(
+                                    d[lyngKey] as string | number | undefined,
+                                    lyngKey,
+                                ),
+                                dmltnPrlg: formatNumber(
+                                    d[dmltnKey] as string | number | undefined,
+                                    dmltnKey,
+                                ),
+                                prlgWhol: formatNumber(
+                                    d[wholKey] as string | number | undefined,
+                                    wholKey,
+                                ),
+                            });
+                        }
+                        return {
+                            admdstCd: String(d.admdstCd ?? ""),
+                            admdstNm: String(d.admdstNm ?? ""),
+                            pipeSeCd: String(d.pipeSeCd ?? ""),
+                            yearlyStatList,
+                            rmrk: String(d.rmrk ?? ""),
+                            lyngPrlgWhol: formatNumber(d.lyngPrlg, "lyngPrlg"),
+                            dmltnPrlgWhol: formatNumber(d.dmltnPrlg, "dmltnPrlg"),
+                            pipeByPrstWhol: formatNumber(d.pipeByPrstWhol, "pipeByPrstWhol"),
+                        };
+                    });
+
+                    const userInfo = await getUserInfo();
+
+                    const param: SeweragePipeInputPipeTypeStatusSaveRequest = {
+                        statsYr: values.year ?? "",
+                        ctpvNm: values.sido ?? "",
+                        sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
+                        sewerBzmnCd: values.bsnmCd ?? "",
+                        userId: userInfo.userUnqId,
+                        // superAdmin: isAdminInfo ? "superAdmin" : "",
+                        saveList,
+                    };
+
+                    const response = await statisticsInputSewPipeApiService.savePipeTypeStatus(param);
+                    if (response.status === "success") {
+                        setGlobalProgress(50);
+                        const refreshedParam = buildSewagePipeSearchParam(values);
+                        await loadSewagePipeActiveTabData(activeTab, refreshedParam, values, true, false);
+                        setGlobalProgress(100);
+                        alert("저장되었습니다.");
+                    } else {
+                        alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                    }
+                    break;
+                }
+                case "ST00020004": {
+                    const currentData = getPipeDiameterGridDataRef.current?.();
+                    if (!currentData || currentData.length === 0) {
+                        alert("저장할 데이터가 없습니다.");
+                        return;
+                    }
+
+                    const columnFormatMap = new Map<string, string>();
+                    PipeDiameterStatusInpColumn.columns.forEach((col) => {
+                        if (col.fieldName && col.dataFormat) {
+                            columnFormatMap.set(col.fieldName, col.dataFormat);
+                        }
+                    });
+
+                    const formatNumber = (value: string | number | null | undefined, fieldName: string): number => {
+                        if (value === null || value === undefined || value === "") return 0;
+                        const num = typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+                        if (isNaN(num)) return 0;
+                        const format = columnFormatMap.get(fieldName);
+                        if (!format) return num;
+                        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+                        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+                    };
+
+                    const saveList = currentData.map((d) => ({
+                        pipeSeCd: String(d.pipeSeCd ?? ""),
+                        step1PdmtPrlg: formatNumber(d.step1PdmtPrlg, "step1PdmtPrlg"),
+                        step2PdmtPrlg: formatNumber(d.step2PdmtPrlg, "step2PdmtPrlg"),
+                        step3PdmtPrlg: formatNumber(d.step3PdmtPrlg, "step3PdmtPrlg"),
+                        step4PdmtPrlg: formatNumber(d.step4PdmtPrlg, "step4PdmtPrlg"),
+                        step5PdmtPrlg: formatNumber(d.step5PdmtPrlg, "step5PdmtPrlg"),
+                        sqrePdmtPrlg: formatNumber(d.sqrePdmtPrlg, "sqrePdmtPrlg"),
+                        etcPdmtPrlg: formatNumber(d.etcPdmtPrlg, "etcPdmtPrlg"),
+                        rmrk: String(d.rmrk ?? ""),
+                        pdmtByTsmWhol: formatNumber(d.pdmtByTsmWhol, "pdmtByTsmWhol"),
+                        admdstCd: String(d.admdstCd ?? ""),
+                        admdstNm: String(d.admdstNm ?? ""),
+                    }));
+
+                    const userInfo = await getUserInfo();
+
+                    const param: SeweragePipeInputPipeDiameterStatusSaveRequest = {
+                        statsYr: values.year ?? "",
+                        ctpvNm: values.sido ?? "",
+                        sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
+                        sewerBzmnCd: values.bsnmCd ?? "",
+                        userId: userInfo.userUnqId,
+                        // superAdmin: isAdminInfo ? "superAdmin" : "",
+                        saveList,
+                    };
+
+                    const response = await statisticsInputSewPipeApiService.savePipeDiameterStatus(param);
+                    if (response.status === "success") {
+                        setGlobalProgress(50);
+                        const refreshedParam = buildSewagePipeSearchParam(values);
+                        await loadSewagePipeActiveTabData(activeTab, refreshedParam, values, true, false);
+                        setGlobalProgress(100);
+                        alert("저장되었습니다.");
+                    } else {
+                        alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                    }
+                    break;
+                }
+                case "ST00020005": {
+                    const currentData = getManholeGridDataRef.current?.();
+                    if (!currentData || currentData.length === 0) {
+                        alert("저장할 데이터가 없습니다.");
+                        return;
+                    }
+
+                    const columnFormatMap = new Map<string, string>();
+                    ManholeStatusInpColumn.columns.forEach((col) => {
+                        if (col.fieldName && col.dataFormat) {
+                            columnFormatMap.set(col.fieldName, col.dataFormat);
+                        }
+                    });
+
+                    const formatNumber = (value: string | number | null | undefined, fieldName: string): number => {
+                        if (value === null || value === undefined || value === "") return 0;
+                        const num = typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+                        if (isNaN(num)) return 0;
+                        const format = columnFormatMap.get(fieldName);
+                        if (!format) return num;
+                        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+                        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+                    };
+
+                    const minYy = 14;
+                    const maxYy = getManholeLastDataYear() % 100;
+
+                    const saveList = currentData.map((d) => {
+                        const yearlyStats: SeweragePipeInputManholeStatusSaveYearlyStatItem[] = [];
+                        for (let yy = minYy; yy <= maxYy; yy++) {
+                            const year = 2000 + yy;
+                            const wholKey = `yy${yy}WholMnhlCnt`;
+                            const step1Key = `yy${yy}Step1MnhlCnt`;
+                            const step2Key = `yy${yy}Step2MnhlCnt`;
+                            const step3Key = `yy${yy}Step3MnhlCnt`;
+                            const step4Key = `yy${yy}Step4MnhlCnt`;
+                            const step5Key = `yy${yy}Step5MnhlCnt`;
+                            yearlyStats.push({
+                                manhYr: String(year),
+                                wholMnhlCnt: formatNumber(d[wholKey] as string | number | undefined, wholKey),
+                                step1MnhlCnt: formatNumber(d[step1Key] as string | number | undefined, step1Key),
+                                step2MnhlCnt: formatNumber(d[step2Key] as string | number | undefined, step2Key),
+                                step3MnhlCnt: formatNumber(d[step3Key] as string | number | undefined, step3Key),
+                                step4MnhlCnt: formatNumber(d[step4Key] as string | number | undefined, step4Key),
+                                step5MnhlCnt: formatNumber(d[step5Key] as string | number | undefined, step5Key),
+                            });
+                        }
+                        return {
+                            emphsMngSeCd: String(d.emphsMngSeCd ?? ""),
+                            admdstCd: String(d.admdstCd ?? ""),
+                            admdstNm: String(d.admdstNm ?? ""),
+                            yearlyStats,
+                            rmrk: String(d.rmrk ?? ""),
+                        };
+                    });
+
+                    const userInfo = await getUserInfo();
+                    const param: SeweragePipeInputManholeStatusSaveRequest = {
+                        statsYr: values.year ?? "",
+                        ctpvNm: values.sido ?? "",
+                        sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
+                        sewerBzmnCd: values.bsnmCd ?? "",
+                        userId: userInfo.userUnqId,
+                        // superAdmin: isAdminInfo ? "superAdmin" : "",
+                        saveList,
+                    };
+
+                    const response = await statisticsInputSewPipeApiService.saveManholeStatus(param);
+                    if (response.status === "success") {
+                        setGlobalProgress(50);
+                        const refreshedParam = buildSewagePipeSearchParam(values);
+                        await loadSewagePipeActiveTabData(activeTab, refreshedParam, values, true, false);
+                        setGlobalProgress(100);
+                        alert("저장되었습니다.");
+                    } else {
+                        alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                    }
+                    break;
+                }
+                default:
+                    alert("현재 탭 저장 API 연동 전입니다.");
+                    break;
+            }
+        } catch {
+            alert("데이터 저장 중 오류가 발생했습니다.");
+        } finally {
+            hideGlobalProgress();
+        }
+    };
+
+    const gugunOkOrNotDoList = buildGugunOkForToolbar(lastSearchedValues);
+
+    const searchContextForToolbar = lastSearchedValues ?? searchValues;
+    const activeTabStatus = tabStatusInfoMap.get(activeTab) ?? null;
+    const activeTabToolbar =
+        toolbarSnapshotByTab.get(activeTab) ??
+        computeTabToolbarSnapshot(
+            activeTabStatus,
+            tabRowDataExists(rowDataMap, activeTab),
+            hasSearched,
+            searchContextForToolbar,
+            inputPeriodEnterable,
+            isAdminInfo,
+        );
+
+    const hideToolbarForConnectionTab = activeTab === "ST00020006";
+    const {
+        showSaveInToolbar: baseShowSaveInToolbar,
+        showEnterableToolbarButtons: baseShowEnterableToolbarButtons,
+        showActionToolbarCard: baseShowActionToolbarCard,
+    } = activeTabToolbar;
+    const showSaveInToolbar =
+        !hideToolbarForConnectionTab && baseShowSaveInToolbar && toolbarGroupAllowed;
+    const showEnterableToolbarButtons =
+        !hideToolbarForConnectionTab && baseShowEnterableToolbarButtons && toolbarGroupAllowed;
+    const showActionToolbarCard =
+        !hideToolbarForConnectionTab && baseShowActionToolbarCard && toolbarGroupAllowed;
 
     return (
         <>
-            <SearchForm />
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] mx-[0.6rem]">
-                    <SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
-                    <LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
-                    <SubmitButton submitFunc={submitFunc} />
-                    <SaveButton saveFunc={saveFunc} />
+            <SearchForm
+                key={searchFormRemountKey}
+                defaultValues={verificationSearchDefaults ?? undefined}
+                onSubmit={handleSearch}
+                onReset={handleReset}
+                onValuesChange={setSearchValues}
+            />
+            {showActionToolbarCard && (
+                <div className="card !py-0">
+                    <div className="flex justify-end items-center gap-[0.6rem] mx-[0.6rem]">
+                        <VerificationResultButton
+                            VerificationResultButtonFunc={openVerificationHistoryDialog}
+                        />
+                        {showEnterableToolbarButtons && (
+                            <>
+                                {activeTab !== 'ST00020002' && <LastYearDataButton getLastYearDataFunc={() => void getLastYearDataFunc()} />}
+                                <SubmitButton submitFunc={() => void submitFunc(false)} />
+                            </>
+                        )}
+                        {activeTabStatus?.laeSbmsnSttsCd === "2" && (
+                            <CancelSubmitButton cnacelSubmitFunc={cnacelSubmitFunc} />
+                        )}
+                        {showSaveInToolbar && <SaveButton saveFunc={saveFunc} />}
+                    </div>
                 </div>
+            )}
+            {isLoading && !globalProgressVisible && <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>}
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                <Tabs
+                    value={activeTab}
+                    onValueChange={(v) => void handleActiveTabChange(v)}
+                    className="w-full"
+                    variant="default"
+                >
+                    <TabsList>
+                        {columnInfo.map((info) => (
+                            <TabsTrigger key={info.tabKey} value={info.tabKey}>
+                                {info.tabLabel || info.tabKey}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    {columnInfo.map((info) => {
+                        const tabKey = info.tabKey;
+                        const tabEnterableForGrid = computeTabEnterable(
+                            tabStatusInfoMap.get(tabKey) ?? null,
+                            inputPeriodEnterable,
+                        );
+                        const excelToolbarEnabledForTab =
+                            tabRowDataExists(rowDataMap, tabKey) &&
+                            tabEnterableForGrid &&
+                            gugunOkOrNotDoList;
+
+                        if (info.isSplitGrid && info.left && info.right) {
+                            const leftKey = info.left.tabKey || `${tabKey}_left`;
+                            const rightKey = info.right.tabKey || `${tabKey}_right`;
+                            const leftRowData = rowDataMap.get(leftKey) ?? [];
+                            const rightRowData = rowDataMap.get(rightKey) ?? [];
+                            const splitTopButton = info.right.topButton;
+                            const showSplitTopButton =
+                                activeTab === tabKey &&
+                                Boolean(splitTopButton?.text) &&
+                                (splitTopButton?.visible ?? true) &&
+                                tabRowDataExists(rowDataMap, tabKey) &&
+                                gugunOkOrNotDoList;
+                            const leftColumnInfo: ColumnInfo = {
+                                columns: info.left.columns ?? [],
+                                columnLayout: info.left.columnLayout ?? [],
+                            };
+                            const rightColumnInfo: ColumnInfo = {
+                                columns: info.right.columns ?? [],
+                                columnLayout: info.right.columnLayout ?? [],
+                            };
+
+                            return (
+                                <TabsContent key={tabKey} value={tabKey}>
+                                    <div className="flex flex-col gap-[0.6rem]">
+                                        <div className="flex justify-end gap-[0.6rem]">
+                                            {showSplitTopButton && (
+                                                <GridTopActionButton
+                                                    text={splitTopButton?.text ?? ""}
+                                                    onClick={splitTopButton?.onClick}
+                                                    statsYr={lastSearchedYear ?? undefined}
+                                                    initialSearchValues={
+                                                        lastSearchedValues
+                                                            ? {
+                                                                sido: lastSearchedValues.sido,
+                                                                gugun: lastSearchedValues.gugun,
+                                                                bsnmCd: lastSearchedValues.bsnmCd,
+                                                            }
+                                                            : null
+                                                    }
+                                                    onSaveSuccess={refreshConnectionStatusAfterPopupSave}
+                                                />
+                                            )}
+                                        </div>
+                                        <SplitDataGrid
+                                            leftColumnInfo={leftColumnInfo}
+                                            rightColumnInfo={rightColumnInfo}
+                                            leftFixedColumns={info.left.fixedColumns}
+                                            rightFixedColumns={info.right.fixedColumns}
+                                            showHeaderCheckbox={false}
+                                            enableSort={false}
+                                            leftRowData={leftRowData}
+                                            rightRowData={rightRowData}
+                                            setLeftRowData={(updater) => {
+                                                setRowDataMap((prev) => {
+                                                    const next = new Map(prev);
+                                                    const cur = next.get(leftKey) ?? [];
+                                                    const n =
+                                                        typeof updater === "function"
+                                                            ? updater(cur)
+                                                            : updater;
+                                                    next.set(leftKey, n);
+                                                    return next;
+                                                });
+                                            }}
+                                            setRightRowData={(updater) => {
+                                                setRowDataMap((prev) => {
+                                                    const next = new Map(prev);
+                                                    const cur = next.get(rightKey) ?? [];
+                                                    const n =
+                                                        typeof updater === "function"
+                                                            ? updater(cur)
+                                                            : updater;
+                                                    next.set(rightKey, n);
+                                                    return next;
+                                                });
+                                            }}
+                                        />
+                                    </div>
+                                </TabsContent>
+                            );
+                        }
+
+                        if (!info.columns || !info.columnLayout) {
+                            return null;
+                        }
+
+                        const rowData = rowDataMap.get(tabKey) ?? [];
+                        const gridColumnInfo: ColumnInfo = {
+                            columns: info.columns,
+                            columnLayout: info.columnLayout,
+                        };
+
+                        return (
+                            <TabsContent key={tabKey} value={tabKey}>
+                                <DataGrid
+                                    key={tabKey}
+                                    columnInfo={gridColumnInfo}
+                                    rowStartNum={info.rowStartNum}
+                                    excelExportFileSuffix={info.tabLabel || tabKey}
+                                    rowData={rowData}
+                                    setRowData={(updater) => {
+                                        setRowDataMap((prev) => {
+                                            const next = new Map(prev);
+                                            const cur = next.get(tabKey) ?? [];
+                                            const n =
+                                                typeof updater === "function" ? updater(cur) : updater;
+                                            next.set(tabKey, n);
+                                            return next;
+                                        });
+                                    }}
+                                    isExcelImport={excelToolbarEnabledForTab}
+                                    isExcelExport
+                                    showHeaderCheckbox={false}
+                                    fixedColumns={info.fixedColumns}
+                                    enableSort={false}
+                                    statusInfo={tabStatusInfoMap.get(tabKey) ?? null}
+                                    getGridDataRef={
+                                        tabKey === REGIONAL_FACT_TAB_KEY
+                                            ? getGridDataRef
+                                            : tabKey === "ST00020002"
+                                                ? getFactInstallGridDataRef
+                                                : tabKey === "ST00020003"
+                                                    ? getPipeTypeGridDataRef
+                                                    : tabKey === "ST00020004"
+                                                        ? getPipeDiameterGridDataRef
+                                                        : tabKey === "ST00020005"
+                                                            ? getManholeGridDataRef
+                                                    : undefined
+                                    }
+                                    cellStyleCallback={({ row, fieldName }) => {
+                                        const verification = (row as GridRowWithVerification).verificationResult;
+                                        if (!verification) return;
+                                        const errors = verification[fieldName];
+                                        if (Array.isArray(errors) && errors.length > 0) {
+                                            const hasImr = errors.some((e) => e.vrfcCd === "IMR" || e.vrfcCd === "HB");
+                                            return hasImr ? "rg-cell-verify-error-imr" : "rg-cell-verify-error";
+                                        }
+                                    }}
+                                    cellTooltipCallback={({ row, fieldName }) => {
+                                        const verification = (row as GridRowWithVerification).verificationResult;
+                                        if (!verification) return;
+                                        const errors = verification[fieldName];
+                                        if (Array.isArray(errors) && errors.length > 0) {
+                                            return errors
+                                                .map((e) => {
+                                                    const prefix =
+                                                        e.vrfcCd === "IMR" ? "IMR검증 - " : (e.vrfcCd === "NV" ? "일반검증 - " : "HB검증 - ");
+                                                    const comp = e.compVlCn ?? "";
+                                                    const now = e.nowVlCn ?? "";
+                                                    return `${prefix}${e.rsnExpln}
+                                                    (검증 기준값: ${comp} / 현재 입력값: ${now})`;
+                                                })
+                                                .filter(Boolean)
+                                                .join("\n");
+                                        }
+                                    }}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+                </Tabs>
             </div>
-            <TabDataGrid
-                columnInfo={columnInfo}
-                rowDataMap={rowDataMap}
-                setRowDataMap={setRowDataMap}
-                activeTab={activeTab}
-                onActiveTabChange={setActiveTab}
+            <VerificationResultHistoryDialog
+                open={verificationHistoryOpen}
+                onOpenChange={setVerificationHistoryOpen}
+                queryContext={
+                    searchValues?.year &&
+                        searchValues?.sido &&
+                        searchValues?.bsnmCd &&
+                        (tabStatsCdMap.get(activeTab) ?? statsCd)
+                        ? {
+                            sewerBzmnCd: searchValues.bsnmCd,
+                            ctpvNm: searchValues.sido,
+                            sggNm: searchValues.gugun === "ALL" ? "" : (searchValues.gugun ?? ""),
+                            statsYr: searchValues.year,
+                            statsCd: tabStatsCdMap.get(activeTab) ?? statsCd,
+                        }
+                        : null
+                }
+                onExceptionResetSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values?.year || !values?.sido || !values?.bsnmCd) return;
+                    const refreshedParam = buildSewagePipeSearchParam(values);
+                    await loadSewagePipeActiveTabData(activeTab, refreshedParam, values, true, false);
+                }}
+            />
+            <SubmitDailog
+                open={showDailog}
+                onOpenChange={(open) => {
+                    setShowDailog(open);
+                    if (!open) setIsExceptionSubmitFlow(false);
+                }}
+                statusInfo={tabStatusInfoMap.get(activeTab) ?? null}
+                onConfirm={executeSubmit}
+                onExceptionConfirm={executeExceptionSubmit}
+                submitMode={isExceptionSubmitFlow ? "exception" : "normal"}
+                isLoading={isLoading}
+            />
+            <VerificationResultDialog
+                open={verificationResultDialogOpen}
+                onOpenChange={setVerificationResultDialogOpen}
+                queryContext={
+                    searchValues?.year &&
+                        searchValues?.sido &&
+                        searchValues?.bsnmCd &&
+                        (tabStatsCdMap.get(activeTab) ?? statsCd)
+                        ? {
+                            sewerBzmnCd: searchValues.bsnmCd,
+                            ctpvNm: searchValues.sido,
+                            sggNm: searchValues.gugun === "ALL" ? "" : (searchValues.gugun ?? ""),
+                            statsYr: searchValues.year,
+                            statsCd: tabStatsCdMap.get(activeTab) ?? statsCd,
+                        }
+                        : null
+                }
+                onExceptionSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values?.year || !values?.sido || !values?.bsnmCd) return;
+                    const refreshedParam = buildSewagePipeSearchParam(values);
+                    await loadSewagePipeActiveTabData(activeTab, refreshedParam, values, true, false);
+                }}
             />
         </>
     );
diff --git a/apps/st/src/components/statistics/input/SewagePipeMaintainInp.tsx b/apps/st/src/components/statistics/input/SewagePipeMaintainInp.tsx
index c34d35498..5bba59ad1 100644
--- a/apps/st/src/components/statistics/input/SewagePipeMaintainInp.tsx
+++ b/apps/st/src/components/statistics/input/SewagePipeMaintainInp.tsx
@@ -1,64 +1,1246 @@
-import { useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 
-import SearchForm from "@/components/module/SearchForm";
-import { TabDataGrid } from '@rsone/components';
-import SubmitButton from "@/components/button/SumitButton";
-import SaveButton from "@/components/button/SaveButton";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { useAlertStore, useGlobalProgressStore, useStatisticsInputToolbarGroupGate } from "@/shared/lib";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import {
+    STATISTICS_INPUT_URL_PATH,
+    verificationSearchToFormValues,
+} from "@/shared/lib/stats-cd-input-navigation";
+import { statisticsInputSewSupplyRateApi } from "@/entities/statistics/api/input/statistics-input-sew-supply-rate-service";
+import { sewagePipeMaintainApiService } from "@/entities/statistics/api/input/statistics-input-sewage-pipe-maintain-service";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type {
+    SewagePipeMaintainDredgingSaveItem,
+    SewagePipeMaintainDredgingSaveRequest,
+    SewagePipeMaintainDredgingSubmitRequest,
+    SewagePipeMaintainRepairSaveItem,
+    SewagePipeMaintainRepairSaveRequest,
+    SewagePipeMaintainRepairSubmitRequest,
+    SewagePipeMaintainRepairVerificationResult,
+    SewagePipeMaintainRequestParams,
+} from "@/entities/statistics/model/input/statistics-input-sewage-pipe-maintain-interface";
+import { isInputPeriodCurrent } from "@/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface";
+import type { StatisticsInputSubmitInfoFormData } from "@/entities/statistics/model/statistics-input-submit-info-schema";
+import type {
+    cancelSubmitRequest,
+    ImrStatusResponse,
+    SewerageStatusInfo,
+} from "@/entities/statistics/model/statistics-interface";
+import {
+    LoadingWithAnimation,
+    Tabs,
+    TabsContent,
+    TabsList,
+    TabsTrigger,
+} from "@common/components";
+
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
+import SubmitDailog from "./SubmitDailog";
+
+import CancelSubmitButton from "@/components/button/CancelSubmitButton";
 import LastYearDataButton from "@/components/button/LastYearDataButton";
-import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
-
-import { RepairStatusInpColumn } from "@/components/util/column/input/sewagePipeMaintain/RepairStatusInpColumn";
+import SaveButton from "@/components/button/SaveButton";
+import SubmitButton from "@/components/button/SumitButton";
+import VerificationResultButton from "@/components/button/VerificationResultButton";
+import DataGrid from "@/components/module/DataGrid";
+import SearchForm from "@/components/module/SearchForm";
+import { openVerificationResultDialogIfNeeded } from "@/components/module/post-submit-verification-results";
+import { VerificationResultDialog } from "@/components/module/VerificationResultDialog";
+import { VerificationResultHistoryDialog } from "@/components/module/VerificationResultHistoryDialog";
+import type { ColumnConfig, ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { doList } from "@/components/util/column/input/DoList";
 import { PipeDredgingStatusInpColumn } from "@/components/util/column/input/sewagePipeMaintain/PipeDredgingStatusInpColumn";
+import { RepairStatusInpColumn } from "@/components/util/column/input/sewagePipeMaintain/RepairStatusInpColumn";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import { useAdminStore } from "@/store/admin-store";
+import { useStatisticsInputFocusStore } from "@/store/statistics-input-focus-store";
+import { useTabStore } from "@/store/tab-store";
+
+function buildSewagePipeMaintainSearchParam(
+    values: SearchFormValues,
+    overrides?: { mode?: string },
+): SewagePipeMaintainRequestParams {
+    return {
+        statsYr: values.year,
+        sewerBzmnCd: values.bsnmCd,
+        ctpvNm: values.sido,
+        sggNm: values.gugun === "ALL" ? "" : values.gugun,
+        ...(overrides?.mode ? { mode: overrides.mode } : {}),
+    };
+}
+
+const SewagePipeMaintainInpTabList = [
+    RepairStatusInpColumn,
+    PipeDredgingStatusInpColumn,
+] as const;
+
+const firstTabKey = RepairStatusInpColumn.tabKey;
+
+const SEWAGE_PIPE_MAINTAIN_COLUMN_GUIDE_TAB_KEYS = Array.from(
+    new Set(
+        SewagePipeMaintainInpTabList.map((tab) => tab.tabKey).filter(Boolean),
+    ),
+);
+
+const toGridColumnInfo = (tab: (typeof SewagePipeMaintainInpTabList)[number]): ColumnInfo => ({
+    columns: tab.columns ?? [],
+    columnLayout: tab.columnLayout ?? [],
+});
+
+type GridRowWithVerification = Record<string, string | number> & {
+    verificationResult?: SewagePipeMaintainRepairVerificationResult;
+};
+
+type TabToolbarSnapshot = {
+    showSaveInToolbar: boolean;
+    showEnterableToolbarButtons: boolean;
+    showActionToolbarCard: boolean;
+};
+
+const computeTabEnterable = (
+    statusInfo: SewerageStatusInfo | null | undefined,
+    periodEnterable: boolean,
+): boolean => {
+    if (statusInfo?.laeSbmsnSttsCd) {
+        if (["2", "3"].includes(statusInfo.laeSbmsnSttsCd)) {
+            return false;
+        }
+        return periodEnterable;
+    }
+    return periodEnterable;
+};
+
+function buildGugunOkForToolbar(values: SearchFormValues | null): boolean {
+    return doList.includes(values?.bsnmCd || "")
+        ? Boolean(values?.gugun && values.gugun !== "ALL")
+        : true;
+}
+
+function computeTabToolbarSnapshot(
+    statusInfo: SewerageStatusInfo | null,
+    hasRowData: boolean,
+    treatAsSearched: boolean,
+    searchContext: SearchFormValues | null,
+    periodEnterable: boolean,
+    isAdminInfo: boolean,
+): TabToolbarSnapshot {
+    const gugunOk = buildGugunOkForToolbar(searchContext);
+    const enterable = computeTabEnterable(statusInfo, periodEnterable);
+    const isSubmitted = statusInfo?.laeSbmsnSttsCd === "2";
+    const showSaveInToolbar = (enterable || isAdminInfo) && gugunOk;
+    const showEnterableToolbarButtons = enterable && gugunOk;
+    const showSubmittedInInputPeriodToolbar =
+        isSubmitted && periodEnterable && gugunOk;
+    const showActionToolbarCard =
+        (hasRowData || treatAsSearched) &&
+        (showSaveInToolbar ||
+            showEnterableToolbarButtons ||
+            showSubmittedInInputPeriodToolbar ||
+            (isSubmitted && isAdminInfo));
+    return { showSaveInToolbar, showEnterableToolbarButtons, showActionToolbarCard };
+}
+
+function tabRowDataExists(
+    m: Map<string, Record<string, string | number>[]>,
+    tabKey: string,
+): boolean {
+    const rows = m.get(tabKey);
+    return Array.isArray(rows) && rows.length > 0;
+}
+
+function normalizeGridString(value: unknown): string {
+    if (value === null || value === undefined) return "";
+    return typeof value === "string" ? value : String(value);
+}
+
+function normalizeGridRmrk(value: unknown): string | null {
+    if (value === null || value === undefined) return null;
+    const s = typeof value === "string" ? value : String(value);
+    return s.trim() === "" ? null : s;
+}
+
+const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+async function waitForImrJobCompleted(
+    jobId: string,
+    getStatus: (id: string) => Promise<ImrStatusResponse>,
+    options?: {
+        pollIntervalMs?: number;
+        maxAttempts?: number;
+        onProgress?: (jobProgress: number) => void;
+    },
+): Promise<void> {
+    const pollIntervalMs = options?.pollIntervalMs ?? 2000;
+    const maxAttempts = options?.maxAttempts ?? 150;
+    for (let i = 0; i < maxAttempts; i++) {
+        const res = await getStatus(jobId);
+        options?.onProgress?.(Math.max(0, Math.min(100, Number(res.job_prog) || 0)));
+        if (res.status === "COMPLETED" && Number(res.job_prog) === 100) return;
+        if (res.status === "FAILED" || res.status === "ERROR" || res.status === "CANCELLED") {
+            throw new Error(res.error_msg || `IMR 검증이 ${res.status} 상태로 종료되었습니다.`);
+        }
+        await sleep(pollIntervalMs);
+    }
+    throw new Error("IMR 검증 완료 대기 시간이 초과되었습니다.");
+}
+
+function buildColumnFormatNumber(
+    columns: { fieldName?: string; dataFormat?: string }[],
+) {
+    const columnFormatMap = new Map<string, string>();
+    columns.forEach((col) => {
+        if (col.fieldName && col.dataFormat) {
+            columnFormatMap.set(col.fieldName, col.dataFormat);
+        }
+    });
+
+    return (value: string | number | null | undefined, fieldName: string): number => {
+        if (value === null || value === undefined || value === "") return 0;
+        const num =
+            typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+        if (isNaN(num)) return 0;
+        const format = columnFormatMap.get(fieldName);
+        if (!format) return num;
+        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+    };
+}
+
+function buildRepairRowList(
+    currentData: Record<string, string | number>[],
+): SewagePipeMaintainRepairSaveItem[] {
+    const formatNumber = buildColumnFormatNumber(RepairStatusInpColumn.columns);
+
+    return currentData.map((d) => ({
+        admdstCd: normalizeGridString(d.admdstCd),
+        sggNm: normalizeGridString(d.sggNm),
+        admdstNm: normalizeGridString(d.admdstNm),
+        mendngWhol: formatNumber(d.mendngWhol, "mendngWhol"),
+        cbsysMendngPrlg: formatNumber(d.cbsysMendngPrlg, "cbsysMendngPrlg"),
+        sprsysExlnPrlg: formatNumber(d.sprsysExlnPrlg, "sprsysExlnPrlg"),
+        sprsysDrtwPrlg: formatNumber(d.sprsysDrtwPrlg, "sprsysDrtwPrlg"),
+        cbsysPartMendngPrlg: formatNumber(d.cbsysPartMendngPrlg, "cbsysPartMendngPrlg"),
+        sprsysExlnMendngPrlg: formatNumber(d.sprsysExlnMendngPrlg, "sprsysExlnMendngPrlg"),
+        sprsysDrtwMendngPrlg: formatNumber(d.sprsysDrtwMendngPrlg, "sprsysDrtwMendngPrlg"),
+        cbsysMnhlCnt: formatNumber(d.cbsysMnhlCnt, "cbsysMnhlCnt"),
+        sprsysDrtwMnhlCnt: formatNumber(d.sprsysDrtwMnhlCnt, "sprsysDrtwMnhlCnt"),
+        sprsysExlnMnhlCnt: formatNumber(d.sprsysExlnMnhlCnt, "sprsysExlnMnhlCnt"),
+        drtwRcvprpCnt: formatNumber(d.drtwRcvprpCnt, "drtwRcvprpCnt"),
+        exlnRcvprpCnt: formatNumber(d.exlnRcvprpCnt, "exlnRcvprpCnt"),
+        stofcbrCnt: formatNumber(d.stofcbrCnt, "stofcbrCnt"),
+        otflCnt: formatNumber(d.otflCnt, "otflCnt"),
+        cctvExmnPrlg: formatNumber(d.cctvExmnPrlg, "cctvExmnPrlg"),
+        rmrk: normalizeGridRmrk(d.rmrk),
+    }));
+}
+
+function buildDredgingRowList(
+    currentData: Record<string, string | number>[],
+): SewagePipeMaintainDredgingSaveItem[] {
+    const formatNumber = buildColumnFormatNumber(PipeDredgingStatusInpColumn.columns);
+
+    return currentData.map((d) => ({
+        admdstCd: normalizeGridString(d.admdstCd),
+        sggNm: normalizeGridString(d.sggNm),
+        admdstNm: normalizeGridString(d.admdstNm),
+        wholFcltPrlg: formatNumber(d.wholFcltPrlg, "wholFcltPrlg"),
+        wholSwagePpl: formatNumber(d.wholSwagePpl, "wholSwagePpl"),
+        cbsysPplPrlg: formatNumber(d.cbsysPplPrlg, "cbsysPplPrlg"),
+        sprsysExlnPrlg: formatNumber(d.sprsysExlnPrlg, "sprsysExlnPrlg"),
+        sprsysDrtwPrlg: formatNumber(d.sprsysDrtwPrlg, "sprsysDrtwPrlg"),
+        mnhlCnt: formatNumber(d.mnhlCnt, "mnhlCnt"),
+        exlnDrtwRcvprpCnt: formatNumber(d.exlnDrtwRcvprpCnt, "exlnDrtwRcvprpCnt"),
+        stofcbrOtflCnt: formatNumber(d.stofcbrOtflCnt, "stofcbrOtflCnt"),
+        drdgnPlanPrlg: formatNumber(d.drdgnPlanPrlg, "drdgnPlanPrlg"),
+        drdgnTrgtCtrsDrdgnRt: formatNumber(d.drdgnTrgtCtrsDrdgnRt, "drdgnTrgtCtrsDrdgnRt"),
+        wholPrlgCtrsDrdgnRt: formatNumber(d.wholPrlgCtrsDrdgnRt, "wholPrlgCtrsDrdgnRt"),
+        drdgnAmt: formatNumber(d.drdgnAmt, "drdgnAmt"),
+        drdgnQnt: formatNumber(d.drdgnQnt, "drdgnQnt"),
+        drdgnUntprcAmt: formatNumber(d.drdgnUntprcAmt, "drdgnUntprcAmt"),
+        wholDrdgnPrcsQnt: formatNumber(d.wholDrdgnPrcsQnt, "wholDrdgnPrcsQnt"),
+        rclmQnt: formatNumber(d.rclmQnt, "rclmQnt"),
+        oceanEmsnQnt: formatNumber(d.oceanEmsnQnt, "oceanEmsnQnt"),
+        rcycQnt: formatNumber(d.rcycQnt, "rcycQnt"),
+        etcQnt: formatNumber(d.etcQnt, "etcQnt"),
+        rmrk: normalizeGridRmrk(d.rmrk),
+    }));
+}
 
 // 하수도 통계 관리 > 03. 하수관로 유지관리
 const SewagePipeMaintainInp = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const { isAdminInfo } = useAdminStore();
+    const toolbarGroupAllowed = useStatisticsInputToolbarGroupGate();
+    const { confirm } = useConfirm();
+    const showGlobalProgress = useGlobalProgressStore((state) => state.show);
+    const setGlobalProgress = useGlobalProgressStore((state) => state.setProgress);
+    const setGlobalProgressLabel = useGlobalProgressStore((state) => state.setLabel);
+    const hideGlobalProgress = useGlobalProgressStore((state) => state.hide);
 
-    // tab List
-    const SewagePipeMaintainInpTabList = [
-        RepairStatusInpColumn,
-        PipeDredgingStatusInpColumn
-    ];
+    const [isLoading, setIsLoading] = useState(false);
+    const [searchValues, setSearchValues] = useState<SearchFormValues | null>(null);
+    const [activeTab, setActiveTab] = useState<string>(firstTabKey);
+    const [lastSearchedValues, setLastSearchedValues] = useState<SearchFormValues | null>(null);
+    const [hasSearched, setHasSearched] = useState(false);
+    const [inputPeriodEnterable, setInputPeriodEnterable] = useState(true);
+    const [tabStatusInfoMap, setTabStatusInfoMap] = useState<
+        Map<string, SewerageStatusInfo | null>
+    >(new Map());
+    const [tabStatsCdMap, setTabStatsCdMap] = useState<Map<string, string>>(new Map());
+    const [toolbarSnapshotByTab, setToolbarSnapshotByTab] = useState<
+        Map<string, TabToolbarSnapshot>
+    >(new Map());
+    const [verificationHistoryOpen, setVerificationHistoryOpen] = useState(false);
+    const [verificationResultDialogOpen, setVerificationResultDialogOpen] = useState(false);
+    const [showSubmitDialog, setShowSubmitDialog] = useState(false);
+    const searchParamRef = useRef<SewagePipeMaintainRequestParams | null>(null);
+    const postVerificationSearchRef = useRef<{
+        values: SearchFormValues;
+        tabKey: string;
+    } | null>(null);
+    const [verificationSearchDefaults, setVerificationSearchDefaults] =
+        useState<SearchFormValues | null>(null);
+    const [searchFormRemountKey, setSearchFormRemountKey] = useState(0);
+    const [rowDataMap, setRowDataMap] = useState<
+        Map<string, Record<string, string | number>[]>
+    >(new Map());
+    const [columnGuidesByTab, setColumnGuidesByTab] = useState<
+        Record<string, Record<string, string>>
+    >({});
 
-    const SubmitExceptionFunc = () => {
-        console.log('submit exception');
-        // 예외 제출 로직 
+    const searchDoneRef = useRef(false);
+    const periodEnterableRef = useRef(true);
+    const activeTabRef = useRef(activeTab);
+    const getGridDataRef = useRef<(() => Record<string, string | number>[]) | null>(null);
+    activeTabRef.current = activeTab;
+
+    const activeTabId = useTabStore((s) => s.activeTabId);
+    const inputFocusNonce = useStatisticsInputFocusStore((s) => s.nonce);
+
+    useLayoutEffect(() => {
+        if (activeTabId !== STATISTICS_INPUT_URL_PATH.SEWAGE_PIPE_MAINTAIN) return;
+        const pending = useStatisticsInputFocusStore
+            .getState()
+            .takePendingForUrl(STATISTICS_INPUT_URL_PATH.SEWAGE_PIPE_MAINTAIN);
+        if (!pending) return;
+        const { tabKey, search } = pending;
+        setActiveTab(tabKey);
+        if (search) {
+            const values = verificationSearchToFormValues(search);
+            setVerificationSearchDefaults(values);
+            postVerificationSearchRef.current = { values, tabKey };
+            setSearchFormRemountKey((k) => k + 1);
+        }
+    }, [activeTabId, inputFocusNonce]);
+
+    useEffect(() => {
+        if (activeTabId !== STATISTICS_INPUT_URL_PATH.SEWAGE_PIPE_MAINTAIN) return;
+        let cancelled = false;
+        void (async () => {
+            const entries = await Promise.all(
+                SEWAGE_PIPE_MAINTAIN_COLUMN_GUIDE_TAB_KEYS.map(async (tabKey) => {
+                    try {
+                        const res = await statisticsApi.getColumnGuides(tabKey);
+                        if (res.status !== "success" || !Array.isArray(res.data)) {
+                            return [tabKey, {}] as const;
+                        }
+                        const next: Record<string, string> = {};
+                        for (const item of res.data) {
+                            const key = item.engColNm?.trim();
+                            const guide = item.columnGuide?.trim();
+                            if (key && guide) next[key] = guide;
+                        }
+                        return [tabKey, next] as const;
+                    } catch {
+                        return [tabKey, {}] as const;
+                    }
+                }),
+            );
+            if (cancelled) return;
+            setColumnGuidesByTab(Object.fromEntries(entries));
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [activeTabId]);
+
+    const commitToolbarSnapshotForLoadedTab = (
+        tabKey: string,
+        statusInfo: SewerageStatusInfo | null,
+        hasRowData: boolean,
+        searchContext: SearchFormValues,
+    ) => {
+        setToolbarSnapshotByTab((prev) => {
+            const next = new Map(prev);
+            next.set(
+                tabKey,
+                computeTabToolbarSnapshot(
+                    statusInfo,
+                    hasRowData,
+                    searchDoneRef.current,
+                    searchContext,
+                    periodEnterableRef.current,
+                    isAdminInfo,
+                ),
+            );
+            return next;
+        });
     };
 
-    const getLastYearDataFunc = () => {
-        console.log('get last year data');
-        // 지난연도 데이터 가져오기 로직
+    const applyRowMap = (
+        mergeIntoExistingMap: boolean,
+        apply: (m: Map<string, Record<string, string | number>[]>) => void,
+    ) => {
+        if (mergeIntoExistingMap) {
+            setRowDataMap((prev) => {
+                const next = new Map(prev);
+                apply(next);
+                return next;
+            });
+        } else {
+            const next = new Map<string, Record<string, string | number>[]>();
+            apply(next);
+            setRowDataMap(next);
+        }
     };
 
+    const loadActiveTabData = async (
+        tabKey: string,
+        param: SewagePipeMaintainRequestParams,
+        searchContext: SearchFormValues,
+        mergeIntoExistingMap: boolean,
+        updateLastSearchedValues: boolean,
+        overrides?: { mode?: string },
+    ): Promise<boolean> => {
+        const requestParam = overrides?.mode
+            ? { ...param, mode: overrides.mode }
+            : param;
+
+        if (tabKey === RepairStatusInpColumn.tabKey) {
+            const response =
+                await sewagePipeMaintainApiService.getSewagePipeMaintainRepair(
+                    requestParam,
+                );
+            if (response.status !== "success" || !response.data) {
+                alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+                return false;
+            }
+            const { commonInfo, statusInfo, repairStatusList } = response.data;
+            const convertedData = (repairStatusList ?? []).map((d) => ({
+                ctpvNm: commonInfo.ctpvNm,
+                ...d,
+            }));
+            const gridRows = toGridRows(convertedData);
+
+            applyRowMap(mergeIntoExistingMap, (m) => {
+                m.set(RepairStatusInpColumn.tabKey, gridRows);
+            });
+            setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, statusInfo));
+            setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+            if (updateLastSearchedValues) {
+                setLastSearchedValues(searchContext);
+            }
+            commitToolbarSnapshotForLoadedTab(
+                tabKey,
+                statusInfo,
+                gridRows.length > 0,
+                searchContext,
+            );
+            return true;
+        }
+
+        if (tabKey === PipeDredgingStatusInpColumn.tabKey) {
+            const response =
+                await sewagePipeMaintainApiService.getSewagePipeMaintainDredging(
+                    requestParam,
+                );
+            if (response.status !== "success" || !response.data) {
+                alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+                return false;
+            }
+            const { commonInfo, statusInfo, pipeDredgingStatusList } = response.data;
+            const convertedData = (pipeDredgingStatusList ?? []).map((d) => ({
+                ctpvNm: commonInfo.ctpvNm,
+                ...d,
+            }));
+            const gridRows = toGridRows(convertedData);
+
+            applyRowMap(mergeIntoExistingMap, (m) => {
+                m.set(PipeDredgingStatusInpColumn.tabKey, gridRows);
+            });
+            setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, statusInfo));
+            setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+            if (updateLastSearchedValues) {
+                setLastSearchedValues(searchContext);
+            }
+            commitToolbarSnapshotForLoadedTab(
+                tabKey,
+                statusInfo,
+                gridRows.length > 0,
+                searchContext,
+            );
+            return true;
+        }
+
+        alert("해당 탭 조회 API가 없습니다.");
+        return false;
+    };
+
+    const getLastYearDataFunc = async () => {
+        const values = lastSearchedValues ?? searchValues;
+        if (!values?.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+        if (!hasSearched) {
+            alert("먼저 데이터를 조회해주세요.");
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+            const param = buildSewagePipeMaintainSearchParam(values, { mode: "PRE" });
+            await loadActiveTabData(
+                activeTabRef.current,
+                param,
+                values,
+                true,
+                false,
+                { mode: "PRE" },
+            );
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const getTabGridRows = (tabKey: string): Record<string, string | number>[] =>
+        getGridDataRef.current?.() ?? rowDataMap.get(tabKey) ?? [];
+
+    const getRepairGridRows = (): Record<string, string | number>[] =>
+        getTabGridRows(RepairStatusInpColumn.tabKey);
+
+    const getDredgingGridRows = (): Record<string, string | number>[] =>
+        getTabGridRows(PipeDredgingStatusInpColumn.tabKey);
+
     const submitFunc = () => {
-        console.log('submit');
-        // 제출 로직
+        void (async () => {
+            const tabKey = activeTabRef.current;
+            const isRepairTab = tabKey === RepairStatusInpColumn.tabKey;
+            const isDredgingTab = tabKey === PipeDredgingStatusInpColumn.tabKey;
+            if (!isRepairTab && !isDredgingTab) {
+                alert("제출할 수 없는 탭입니다.");
+                return;
+            }
+            if (!lastSearchedValues || !searchParamRef.current) {
+                alert("먼저 조회를 진행해주세요.");
+                return;
+            }
+            if (!buildGugunOkForToolbar(lastSearchedValues)) {
+                alert("시군구를 선택해주세요.");
+                return;
+            }
+            const currentData = isRepairTab ? getRepairGridRows() : getDredgingGridRows();
+            if (!currentData.length) {
+                alert("제출할 데이터가 없습니다.");
+                return;
+            }
+            if (await confirm("제출 하시겠습니까?")) {
+                setShowSubmitDialog(true);
+            }
+        })();
+    };
+
+    const executeSubmit = async (submitInfo: StatisticsInputSubmitInfoFormData) => {
+        const tabKey = activeTabRef.current;
+        const isRepairTab = tabKey === RepairStatusInpColumn.tabKey;
+        const isDredgingTab = tabKey === PipeDredgingStatusInpColumn.tabKey;
+        if (!isRepairTab && !isDredgingTab) {
+            alert("제출할 수 없는 탭입니다.");
+            return;
+        }
+        if (!lastSearchedValues || !searchParamRef.current) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+
+        const currentData = isRepairTab ? getRepairGridRows() : getDredgingGridRows();
+        if (!currentData.length) {
+            alert("제출할 데이터가 없습니다.");
+            return;
+        }
+
+        const activeTabStatus = tabStatusInfoMap.get(tabKey) ?? null;
+        const statsCdForTab = tabStatsCdMap.get(tabKey) ?? tabKey;
+
+        const submitInfoBase = {
+            statsYr: lastSearchedValues.year ?? "",
+            ctpvNm: lastSearchedValues.sido ?? "",
+            sggNm:
+                lastSearchedValues.gugun === "ALL"
+                    ? ""
+                    : (lastSearchedValues.gugun ?? ""),
+            sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+            laePicNm: submitInfo.laePicNm,
+            laeKbrdrJbgdNm: submitInfo.laeKbrdrJbgdNm,
+            laeKbrdrDeptNm: submitInfo.laeKbrdrDeptNm,
+            laePicTelNo: submitInfo.laePicTelNo,
+            laeIdfrNm: submitInfo.laeIdfrNm,
+            laeIdfrJbgdNm: submitInfo.laeIdfrJbgdNm,
+            laeIdfrDeptNm: submitInfo.laeIdfrDeptNm,
+            laeIdfrTelNo: submitInfo.laeIdfrTelNo,
+        };
+
+        const verificationQuery = {
+            sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+            ctpvNm: lastSearchedValues.sido ?? "",
+            sggNm:
+                lastSearchedValues.gugun === "ALL"
+                    ? ""
+                    : (lastSearchedValues.gugun ?? ""),
+            statsYr: lastSearchedValues.year ?? "",
+            statsCd: statsCdForTab,
+        };
+
+        const reloadSubmittedTab = async () => {
+            await loadActiveTabData(
+                tabKey,
+                searchParamRef.current!,
+                lastSearchedValues,
+                false,
+                false,
+            );
+        };
+
+        try {
+            showGlobalProgress({ label: "서버에 요청 중...", progress: 0 });
+            const userInfo = await getUserInfo();
+
+            setGlobalProgressLabel("일반 검증 진행 중...");
+            const response = isRepairTab
+                ? await sewagePipeMaintainApiService.submitSewagePipeMaintainRepair({
+                    ...submitInfoBase,
+                    userId: userInfo.userUnqId,
+                    submitList: buildRepairRowList(currentData),
+                } satisfies SewagePipeMaintainRepairSubmitRequest)
+                : await sewagePipeMaintainApiService.submitSewagePipeMaintainDredging({
+                    ...submitInfoBase,
+                    userId: userInfo.userUnqId,
+                    submitList: buildDredgingRowList(currentData),
+                } satisfies SewagePipeMaintainDredgingSubmitRequest);
+
+            if (response.status !== "success") {
+                alert(response.message || "데이터 제출 중 오류가 발생했습니다.");
+                return;
+            }
+
+            const finalStatus = response.data?.finalStatus;
+            const nvpassed = response.data?.nvpassed;
+
+            if (finalStatus === "5") {
+                setGlobalProgress(50);
+                setGlobalProgressLabel("IMR 검증 진행 중...");
+                const imrParam = {
+                    user_id: userInfo.userUnqId,
+                    sewer_bzmn_cd: lastSearchedValues.bsnmCd ?? "",
+                    stats_cd: statsCdForTab,
+                    stats_yr: lastSearchedValues.year ?? "",
+                    lae_sbmsn_stts_cd: activeTabStatus?.laeSbmsnSttsCd === "4" ? "4" : "2",
+                    gen_verify_stts_cd: nvpassed ? "1" : "2",
+                };
+
+                try {
+                    const imrResponse = await statisticsApi.callImrService(imrParam);
+                    if (imrResponse.job_id) {
+                        await waitForImrJobCompleted(
+                            imrResponse.job_id,
+                            (id) => statisticsApi.getImrStatus(id),
+                            {
+                                onProgress: (jobProgress) => {
+                                    setGlobalProgress(50 + Math.round(jobProgress / 2));
+                                },
+                            },
+                        );
+                    }
+                    setGlobalProgress(100);
+                    await reloadSubmittedTab();
+                    await openVerificationResultDialogIfNeeded(
+                        verificationQuery,
+                        setVerificationResultDialogOpen,
+                        { notify: alert },
+                    );
+                } catch (e) {
+                    await reloadSubmittedTab();
+                    await openVerificationResultDialogIfNeeded(verificationQuery, setVerificationResultDialogOpen, {
+                        notify: alert,
+                        notifySubmitComplete: false,
+                    });
+                    const msg =
+                        e instanceof Error && e.message
+                            ? e.message
+                            : "IMR 검증 중 오류가 발생했습니다.\n관리자에게 문의하세요.";
+                    alert(msg);
+                }
+            } else {
+                setGlobalProgress(100);
+                await reloadSubmittedTab();
+                await openVerificationResultDialogIfNeeded(
+                    verificationQuery,
+                    setVerificationResultDialogOpen,
+                    { notify: alert },
+                );
+            }
+        } catch {
+            alert("데이터 제출 중 오류가 발생했습니다.");
+        } finally {
+            hideGlobalProgress();
+        }
     };
 
     const saveFunc = () => {
-        console.log('save');
-        // 저장 로직
+        void (async () => {
+            const tabKey = activeTabRef.current;
+            const isRepairTab = tabKey === RepairStatusInpColumn.tabKey;
+            const isDredgingTab = tabKey === PipeDredgingStatusInpColumn.tabKey;
+            if (!isRepairTab && !isDredgingTab) {
+                alert("저장할 수 없는 탭입니다.");
+                return;
+            }
+
+            if (!lastSearchedValues || !searchParamRef.current) {
+                alert("먼저 조회를 진행해주세요.");
+                return;
+            }
+
+            if (!buildGugunOkForToolbar(lastSearchedValues)) {
+                alert("시군구를 선택해주세요.");
+                return;
+            }
+
+            if (!(await confirm("저장 하시겠습니까?"))) return;
+
+            const baseRequest = {
+                statsYr: lastSearchedValues.year ?? "",
+                ctpvNm: lastSearchedValues.sido ?? "",
+                sggNm:
+                    lastSearchedValues.gugun === "ALL"
+                        ? ""
+                        : (lastSearchedValues.gugun ?? ""),
+                sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+            };
+
+            try {
+                showGlobalProgress({ label: "저장 진행 중...", progress: 0 });
+                const userInfo = await getUserInfo();
+
+                if (isRepairTab) {
+                    const currentData = getRepairGridRows();
+                    if (!currentData.length) {
+                        alert("저장할 데이터가 없습니다.");
+                        return;
+                    }
+
+                    const param: SewagePipeMaintainRepairSaveRequest = {
+                        ...baseRequest,
+                        userId: userInfo.userUnqId,
+                        saveList: buildRepairRowList(currentData),
+                    };
+                    if (isAdminInfo) {
+                        param.superAdmin = "superAdmin";
+                    }
+
+                    const response =
+                        await sewagePipeMaintainApiService.saveSewagePipeMaintainRepair(
+                            param,
+                        );
+
+                    if (response.status === "success") {
+                        setGlobalProgress(50);
+                        await loadActiveTabData(
+                            RepairStatusInpColumn.tabKey,
+                            searchParamRef.current,
+                            lastSearchedValues,
+                            false,
+                            false,
+                        );
+                        setGlobalProgress(100);
+                        alert("저장되었습니다.");
+                    } else {
+                        alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                    }
+                    return;
+                }
+
+                const currentData = getDredgingGridRows();
+                if (!currentData.length) {
+                    alert("저장할 데이터가 없습니다.");
+                    return;
+                }
+
+                const param: SewagePipeMaintainDredgingSaveRequest = {
+                    ...baseRequest,
+                    userId: userInfo.userUnqId,
+                    saveList: buildDredgingRowList(currentData),
+                };
+                if (isAdminInfo) {
+                    param.superAdmin = "superAdmin";
+                }
+
+                const response =
+                    await sewagePipeMaintainApiService.saveSewagePipeMaintainDredging(
+                        param,
+                    );
+
+                if (response.status === "success") {
+                    setGlobalProgress(50);
+                    await loadActiveTabData(
+                        PipeDredgingStatusInpColumn.tabKey,
+                        searchParamRef.current,
+                        lastSearchedValues,
+                        false,
+                        false,
+                    );
+                    setGlobalProgress(100);
+                    alert("저장되었습니다.");
+                } else {
+                    alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("데이터 저장 중 오류가 발생했습니다.");
+            } finally {
+                hideGlobalProgress();
+            }
+        })();
+    };
+
+    const cnacelSubmitFunc = () => {
+        void (async () => {
+            try {
+                if (!(await confirm("제출된 내용을 취소하시겠습니까?"))) return;
+
+                if (!lastSearchedValues || !searchParamRef.current) {
+                    alert("먼저 조회를 진행해주세요.");
+                    return;
+                }
+
+                const userInfo = await getUserInfo();
+                const tabKey = activeTabRef.current;
+                const statsCdForTab = tabStatsCdMap.get(tabKey) ?? tabKey;
+
+                const requestData: cancelSubmitRequest = {
+                    sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+                    ctpvNm: lastSearchedValues.sido ?? "",
+                    sggNm:
+                        lastSearchedValues.gugun === "ALL"
+                            ? ""
+                            : (lastSearchedValues.gugun ?? ""),
+                    statsYr: lastSearchedValues.year ?? "",
+                    mdfrId: userInfo.userUnqId,
+                    statsCd: statsCdForTab,
+                };
+
+                const response = await statisticsApi.cancelSubmit(requestData);
+
+                if (response.status === "success") {
+                    await loadActiveTabData(
+                        tabKey,
+                        searchParamRef.current,
+                        lastSearchedValues,
+                        false,
+                        false,
+                    );
+                    alert("제출 취소되었습니다.");
+                } else {
+                    alert(response.message ?? "제출 취소 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("제출 취소 중 오류가 발생했습니다.");
+            }
+        })();
+    };
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setTabStatusInfoMap(new Map());
+        setTabStatsCdMap(new Map());
+        setToolbarSnapshotByTab(new Map());
+        setActiveTab(firstTabKey);
+        setLastSearchedValues(null);
+        setHasSearched(false);
+        setInputPeriodEnterable(true);
+        searchParamRef.current = null;
+        setVerificationSearchDefaults(null);
+        setSearchFormRemountKey((k) => k + 1);
+        searchDoneRef.current = false;
+        periodEnterableRef.current = true;
+    };
+
+    const handleSearch = async (
+        values: SearchFormValues,
+        opts?: { forcedTabKey?: string },
+    ) => {
+        if (!values.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+
+        try {
+            const periodResponse = await statisticsInputSewSupplyRateApi.checkInputPeriod(
+                values.year || "",
+            );
+            if (periodResponse.status !== "success") {
+                alert(periodResponse.message);
+                return;
+            }
+            const periods = Array.isArray(periodResponse.data)
+                ? periodResponse.data
+                : [];
+            const periodOk = isInputPeriodCurrent(periods);
+            periodEnterableRef.current = periodOk;
+            setInputPeriodEnterable(periodOk);
+
+            const yearChangedFromLastSearch =
+                lastSearchedValues != null &&
+                (lastSearchedValues.year ?? "") !== (values.year ?? "");
+
+            if (yearChangedFromLastSearch) {
+                setRowDataMap(new Map());
+                setTabStatusInfoMap(new Map());
+                setTabStatsCdMap(new Map());
+                setToolbarSnapshotByTab(new Map());
+                activeTabRef.current = firstTabKey;
+                setActiveTab(firstTabKey);
+            }
+
+            const tabForLoad = opts?.forcedTabKey ?? activeTabRef.current;
+            if (opts?.forcedTabKey) {
+                activeTabRef.current = opts.forcedTabKey;
+                setActiveTab(opts.forcedTabKey);
+            }
+
+            setIsLoading(true);
+            searchDoneRef.current = true;
+            setHasSearched(true);
+            const searchParam = buildSewagePipeMaintainSearchParam(values);
+            searchParamRef.current = searchParam;
+
+            const ok = await loadActiveTabData(
+                tabForLoad,
+                searchParam,
+                values,
+                !yearChangedFromLastSearch,
+                true,
+            );
+            if (!ok) return;
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        const job = postVerificationSearchRef.current;
+        if (!job) return;
+        postVerificationSearchRef.current = null;
+        void handleSearch(job.values, { forcedTabKey: job.tabKey });
+    }, [searchFormRemountKey]);
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        const prevTabKey = activeTabRef.current;
+        const latestRowsInPrevTab = getTabGridRows(prevTabKey);
+        if (latestRowsInPrevTab.length > 0 || rowDataMap.has(prevTabKey)) {
+            setRowDataMap((prev) => {
+                const next = new Map(prev);
+                next.set(prevTabKey, latestRowsInPrevTab);
+                return next;
+            });
+        }
+
+        activeTabRef.current = tabKey;
+        setActiveTab(tabKey);
+        if (!hasSearched || !lastSearchedValues || !searchParamRef.current) return;
+        if (tabRowDataExists(rowDataMap, tabKey)) return;
+        try {
+            setIsLoading(true);
+            await loadActiveTabData(
+                tabKey,
+                searchParamRef.current,
+                lastSearchedValues,
+                true,
+                false,
+            );
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const columnInfoByTab = useMemo(() => {
+        const map = new Map<string, ColumnInfo>();
+        for (const tab of SewagePipeMaintainInpTabList) {
+            const tabKey = tab.tabKey;
+            const canEdit =
+                computeTabEnterable(
+                    tabStatusInfoMap.get(tabKey) ?? null,
+                    inputPeriodEnterable,
+                ) || isAdminInfo;
+            const rawColumns = tab.columns ?? [];
+            const base = canEdit
+                ? rawColumns
+                : rawColumns.map((col) => ({ ...col, editable: false as const }));
+            const columns = base
+                .map((col) => {
+                    const guide = columnGuidesByTab[tabKey]?.[col.fieldName]?.trim();
+                    return guide ? { ...col, tooltip: guide } : col;
+                });
+            map.set(tabKey, {
+                columns,
+                columnLayout: tab.columnLayout ?? [],
+            });
+        }
+        return map;
+    }, [tabStatusInfoMap, inputPeriodEnterable, isAdminInfo, columnGuidesByTab]);
+
+    const searchContextForToolbar = lastSearchedValues ?? searchValues;
+    const activeTabStatus = tabStatusInfoMap.get(activeTab) ?? null;
+    const activeTabToolbar =
+        toolbarSnapshotByTab.get(activeTab) ??
+        computeTabToolbarSnapshot(
+            activeTabStatus,
+            tabRowDataExists(rowDataMap, activeTab),
+            hasSearched,
+            searchContextForToolbar,
+            inputPeriodEnterable,
+            isAdminInfo,
+        );
+
+    const {
+        showSaveInToolbar: baseShowSaveInToolbar,
+        showEnterableToolbarButtons: baseShowEnterableToolbarButtons,
+        showActionToolbarCard: baseShowActionToolbarCard,
+    } = activeTabToolbar;
+
+    const showSaveInToolbar = baseShowSaveInToolbar && toolbarGroupAllowed;
+    const showEnterableToolbarButtons =
+        baseShowEnterableToolbarButtons && toolbarGroupAllowed;
+    const showActionToolbarCard =
+        baseShowActionToolbarCard && toolbarGroupAllowed;
+
+    const openVerificationHistoryDialog = () => {
+        const ctx = lastSearchedValues ?? searchValues;
+        const statsCd = tabStatsCdMap.get(activeTab);
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !statsCd) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+        setVerificationHistoryOpen(true);
+    };
+
+    const verificationQueryContext = (() => {
+        const ctx = lastSearchedValues ?? searchValues;
+        const statsCd = tabStatsCdMap.get(activeTab);
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !statsCd) return null;
+        return {
+            sewerBzmnCd: ctx.bsnmCd,
+            ctpvNm: ctx.sido,
+            sggNm: ctx.gugun === "ALL" ? "" : (ctx.gugun ?? ""),
+            statsYr: ctx.year,
+            statsCd,
+        };
+    })();
+
+    const verificationCellStyle = ({
+        fieldName,
+        row,
+    }: {
+        fieldName: string;
+        row: Record<string, string | number>;
+    }): string | undefined => {
+        const verification = (row as GridRowWithVerification).verificationResult;
+        if (!verification) return;
+        const errors = verification[fieldName];
+        if (Array.isArray(errors) && errors.length > 0) {
+            const hasImr = errors.some((e) => e.vrfcCd === "IMR" || e.vrfcCd === "HB");
+            return hasImr ? "rg-cell-verify-error-imr" : "rg-cell-verify-error";
+        }
+    };
+
+    const verificationCellTooltip = ({
+        fieldName,
+        row,
+    }: {
+        fieldName: string;
+        row: Record<string, string | number>;
+    }): string | undefined => {
+        const verification = (row as GridRowWithVerification).verificationResult;
+        if (!verification) return;
+        const errors = verification[fieldName];
+        if (Array.isArray(errors) && errors.length > 0) {
+            return errors
+                .map((e) => {
+                    const prefix =
+                        e.vrfcCd === "IMR" ? "IMR검증 - " : e.vrfcCd === "NV" ? "일반검증 - " : "HB검증 - ";
+                    return `${prefix}${e.rsnExpln}(검증 기준값: ${e.compVlCn} / 현재 입력값: ${e.nowVlCn})`;
+                })
+                .filter(Boolean)
+                .join("\n");
+        }
     };
 
-    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
-    
     return (
         <>
-            <SearchForm />
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
-                    <LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
-                    <SubmitButton submitFunc={submitFunc} />
-                    <SaveButton saveFunc={saveFunc} />
+            <div className="relative">
+                <SearchForm
+                    key={searchFormRemountKey}
+                    defaultValues={verificationSearchDefaults ?? undefined}
+                    onSubmit={handleSearch}
+                    onReset={handleReset}
+                    onValuesChange={setSearchValues}
+                />
+                {showActionToolbarCard && (
+                    <div className="card !py-0">
+                        <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
+                            <VerificationResultButton
+                                VerificationResultButtonFunc={openVerificationHistoryDialog}
+                            />
+                            {showEnterableToolbarButtons && (
+                                <>
+                                    <LastYearDataButton
+                                        getLastYearDataFunc={() => void getLastYearDataFunc()}
+                                    />
+                                    <SubmitButton submitFunc={submitFunc} />
+                                </>
+                            )}
+                            {activeTabStatus?.laeSbmsnSttsCd === "2" && (
+                                <CancelSubmitButton cnacelSubmitFunc={cnacelSubmitFunc} />
+                            )}
+                            {showSaveInToolbar && <SaveButton saveFunc={saveFunc} />}
+                        </div>
+                    </div>
+                )}
+                {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>
+                )}
+                <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                    <Tabs
+                        value={activeTab}
+                        onValueChange={(v) => void handleActiveTabChange(v)}
+                        className="w-full"
+                        variant="default"
+                    >
+                        <TabsList>
+                            {SewagePipeMaintainInpTabList.map((info) => (
+                                <TabsTrigger key={info.tabKey} value={info.tabKey}>
+                                    {info.tabLabel || info.tabKey}
+                                </TabsTrigger>
+                            ))}
+                        </TabsList>
+                        {SewagePipeMaintainInpTabList.map((info) => {
+                            const tabKey = info.tabKey;
+                            const rowData = rowDataMap.get(tabKey) ?? [];
+                            const tabEnterableForGrid =
+                                computeTabEnterable(
+                                    tabStatusInfoMap.get(tabKey) ?? null,
+                                    inputPeriodEnterable,
+                                ) || isAdminInfo;
+                            const gugunOk = buildGugunOkForToolbar(lastSearchedValues);
+                            const tabStatusInfo = tabStatusInfoMap.get(tabKey) ?? null;
+
+                            return (
+                                <TabsContent key={tabKey} value={tabKey}>
+                                    <DataGrid
+                                        key={`${tabKey}-${tabEnterableForGrid ? "enterable" : "readonly"}`}
+                                        columnInfo={
+                                            columnInfoByTab.get(tabKey) ??
+                                            toGridColumnInfo(info)
+                                        }
+                                        excelExportFileSuffix={info.tabLabel || tabKey}
+                                        rowData={rowData}
+                                        setRowData={(updater) => {
+                                            setRowDataMap((prev) => {
+                                                const next = new Map(prev);
+                                                const cur = next.get(tabKey) ?? [];
+                                                const n =
+                                                    typeof updater === "function"
+                                                        ? updater(cur)
+                                                        : updater;
+                                                next.set(tabKey, n);
+                                                return next;
+                                            });
+                                        }}
+                                        showHeaderCheckbox={false}
+                                        enableSort={false}
+                                        statusInfo={tabStatusInfo}
+                                        isExcelImport={
+                                            tabRowDataExists(rowDataMap, tabKey) &&
+                                            tabEnterableForGrid &&
+                                            gugunOk
+                                        }
+                                        cellStyleCallback={verificationCellStyle}
+                                        cellTooltipCallback={verificationCellTooltip}
+                                        getGridDataRef={
+                                            activeTab === tabKey ? getGridDataRef : undefined
+                                        }
+                                    />
+                                </TabsContent>
+                            );
+                        })}
+                    </Tabs>
                 </div>
             </div>
-            <TabDataGrid 
-                columnInfo={SewagePipeMaintainInpTabList} 
-                rowDataMap={rowDataMap} 
-                setRowDataMap={setRowDataMap} 
+            <VerificationResultHistoryDialog
+                open={verificationHistoryOpen}
+                onOpenChange={setVerificationHistoryOpen}
+                queryContext={verificationQueryContext}
+                onExceptionResetSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values || !searchParamRef.current) return;
+                    await loadActiveTabData(
+                        activeTabRef.current,
+                        searchParamRef.current,
+                        values,
+                        true,
+                        false,
+                    );
+                }}
+            />
+            <ConfirmDialog isOpen={false} />
+            <SubmitDailog
+                open={showSubmitDialog}
+                onOpenChange={setShowSubmitDialog}
+                statusInfo={activeTabStatus}
+                onConfirm={executeSubmit}
+                isLoading={isLoading}
+            />
+            <VerificationResultDialog
+                open={verificationResultDialogOpen}
+                onOpenChange={setVerificationResultDialogOpen}
+                queryContext={verificationQueryContext}
+                onExceptionSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values || !searchParamRef.current) return;
+                    await loadActiveTabData(
+                        activeTabRef.current,
+                        searchParamRef.current,
+                        values,
+                        true,
+                        false,
+                    );
+                }}
             />
         </>
     );
 };
 
-export default SewagePipeMaintainInp;
\ No newline at end of file
+export default SewagePipeMaintainInp;
diff --git a/apps/st/src/components/statistics/input/SewageReservoirPumpInp.tsx b/apps/st/src/components/statistics/input/SewageReservoirPumpInp.tsx
index 1ea0892c5..bbca7cf5c 100644
--- a/apps/st/src/components/statistics/input/SewageReservoirPumpInp.tsx
+++ b/apps/st/src/components/statistics/input/SewageReservoirPumpInp.tsx
@@ -1,85 +1,1656 @@
-import { useState } from "react";
+import {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    type RefObject,
+    type Dispatch,
+    type SetStateAction,
+} from "react";
+
+import { flushSync } from "react-dom";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { ValueType } from "realgrid";
+import type { RealGridReact } from "realgrid-react";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
 
-import SearchForm from "@/components/module/SearchForm";
-import { TabDataGrid } from '@rsone/components';
-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 AddArticleButton from "@/components/button/AddArticleButton";
+import CancelSubmitButton from "@/components/button/CancelSubmitButton";
 import DeleteArticleButton from "@/components/button/DeleteArticleButton";
+import LastYearDataButton from "@/components/button/LastYearDataButton";
 import NotApplicableCheckButton from "@/components/button/NotApplicableCheckButton";
-
-import { SewageReservoirInpColumn } from "@/components/util/column/input/sewageReservoirPump/SewageReservoirInpColumn";
+import SaveButton from "@/components/button/SaveButton";
+import SubmitButton from "@/components/button/SumitButton";
+import VerificationResultButton from "@/components/button/VerificationResultButton";
+import DataGrid, { applyDropDownColumnToGrid } from "@/components/module/DataGrid";
+import { openVerificationResultDialogIfNeeded } from "@/components/module/post-submit-verification-results";
+import SearchForm from "@/components/module/SearchForm";
+import { VerificationResultDialog } from "@/components/module/VerificationResultDialog";
+import { VerificationResultHistoryDialog } from "@/components/module/VerificationResultHistoryDialog";
+import SubmitDailog from "./SubmitDailog";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import type {
+    CellStyleCallbackParams,
+    CellTooltipCallbackParams,
+    ColumnConfig,
+    ColumnInfo,
+    ColumnInfoList,
+} from "@/components/type/DataGrid.type";
+import { doList } from "@/components/util/column/input/DoList";
 import { RainfallPumpStationInpColumn } from "@/components/util/column/input/sewageReservoirPump/RainfallPumpStationInpColumn";
+import { SewageReservoirInpColumn } from "@/components/util/column/input/sewageReservoirPump/SewageReservoirInpColumn";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import {
+    formatCompactYmdForGrid,
+    normalizeOxYnValue,
+    toCompactYmd,
+} from "@/components/util/grid/ymdFormat";
+import { statisticsInputSewageReservoirPumpApi } from "@/entities/statistics/api/input/statistics-input-sewage-reservoir-pump-service";
+import { statisticsInputSewSupplyRateApi } from "@/entities/statistics/api/input/statistics-input-sew-supply-rate-service";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import { isInputPeriodCurrent } from "@/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface";
+import {
+    SEWAGE_RESERVOIR_STATS_CD,
+    type SewageReservoirItem,
+    type SewageReservoirRequestParams,
+    type SewageReservoirSaveItem,
+    type RainfallPumpStationItem,
+    type RainfallPumpStationSaveItem,
+    type SewageReservoirVerificationResult,
+} from "@/entities/statistics/model/input/statistics-input-sewage-reservoir-pump-interface";
+import type { StatisticsInputSubmitInfoFormData } from "@/entities/statistics/model/statistics-input-submit-info-schema";
+import type {
+    ApiResponse,
+    cancelSubmitRequest,
+    ImrStatusResponse,
+    Sgg,
+    SewerageStatusInfo,
+} from "@/entities/statistics/model/statistics-interface";
+import { useAlertStore, useGlobalProgressStore, useStatisticsInputToolbarGroupGate } from "@/shared/lib";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { useAdminStore } from "@/store/admin-store";
+
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
+const SewageReservoirPumpInpTabList = [
+    SewageReservoirInpColumn,
+    RainfallPumpStationInpColumn,
+] as ColumnInfoList[];
+
+const toGridColumnInfo = (tab: ColumnInfoList): ColumnInfo => ({
+    columns: tab.columns ?? [],
+    columnLayout: tab.columnLayout ?? [],
+});
+
+const firstTabKey = SewageReservoirPumpInpTabList[0]?.tabKey ?? SEWAGE_RESERVOIR_STATS_CD;
+const rainfallPumpTabKey =
+    RainfallPumpStationInpColumn.tabKey ?? "rainfallPumpStationInp";
+
+const SEWAGE_RESERVOIR_PUMP_COLUMN_GUIDE_TAB_KEYS = Array.from(
+    new Set(
+        SewageReservoirPumpInpTabList.map((tab) => tab.tabKey).filter(Boolean),
+    ),
+);
+
+type GridRowWithVerification = Record<string, string | number> & {
+    verificationResult?: SewageReservoirVerificationResult;
+};
+
+type TabToolbarSnapshot = {
+    showSaveInToolbar: boolean;
+    showEnterableToolbarButtons: boolean;
+    showActionToolbarCard: boolean;
+};
+
+const computeTabEnterable = (
+    statusInfo: SewerageStatusInfo | null | undefined,
+    periodEnterable: boolean,
+): boolean => {
+    if (statusInfo?.laeSbmsnSttsCd) {
+        if (["2", "3"].includes(statusInfo.laeSbmsnSttsCd)) {
+            return false;
+        }
+        return periodEnterable;
+    }
+    return periodEnterable;
+};
+
+function buildGugunOkForToolbar(values: SearchFormValues | null): boolean {
+    return doList.includes(values?.bsnmCd || "")
+        ? Boolean(values?.gugun && values.gugun !== "ALL")
+        : true;
+}
+
+function computeTabToolbarSnapshot(
+    statusInfo: SewerageStatusInfo | null,
+    hasRowData: boolean,
+    treatAsSearched: boolean,
+    searchContext: SearchFormValues | null,
+    periodEnterable: boolean,
+    isAdminInfo: boolean,
+): TabToolbarSnapshot {
+    const gugunOk = buildGugunOkForToolbar(searchContext);
+    const enterable = computeTabEnterable(statusInfo, periodEnterable);
+    const isSubmitted = statusInfo?.laeSbmsnSttsCd === "2";
+    const showSaveInToolbar = (enterable || isAdminInfo) && gugunOk;
+    const showEnterableToolbarButtons = enterable && gugunOk;
+    const showSubmittedInInputPeriodToolbar =
+        isSubmitted && periodEnterable && gugunOk;
+    const showActionToolbarCard =
+        (hasRowData || treatAsSearched) &&
+        (showSaveInToolbar ||
+            showEnterableToolbarButtons ||
+            showSubmittedInInputPeriodToolbar ||
+            (isSubmitted && isAdminInfo));
+    return { showSaveInToolbar, showEnterableToolbarButtons, showActionToolbarCard };
+}
+
+function tabRowDataExists(
+    m: Map<string, Record<string, string | number>[]>,
+    tabKey: string,
+): boolean {
+    const rows = m.get(tabKey);
+    return Array.isArray(rows) && rows.length > 0;
+}
+
+function buildSewageReservoirSearchParam(
+    values: SearchFormValues,
+    overrides?: { mode?: string },
+): SewageReservoirRequestParams {
+    const fcltNm = values.fctName?.trim();
+    return {
+        statsYr: values.year,
+        sewerBzmnCd: values.bsnmCd,
+        ctpvNm: values.sido,
+        sggNm: values.gugun === "ALL" ? "" : values.gugun,
+        ...(fcltNm ? { fcltNm } : {}),
+        ...(overrides?.mode ? { mode: overrides.mode } : {}),
+    };
+}
+
+/** 항목 추가 시 빈 행 (`ctpvNm` = 조회 시도명) */
+function createEmptySewageReservoirRow(
+    ctpvNm: string,
+    sggNm = "",
+): GridRowWithVerification {
+    const row: GridRowWithVerification = { ctpvNm, sggNm };
+    for (const col of SewageReservoirInpColumn.columns) {
+        const fieldName = col.fieldName;
+        if (fieldName === "ctpvNm" || fieldName === "sggNm") continue;
+        row[fieldName] = col.valueType === ValueType.NUMBER ? 0 : "";
+    }
+    return row;
+}
+
+/** 빗물펌프장 탭 항목 추가 시 빈 행 */
+function createEmptyRainfallPumpStationRow(
+    ctpvNm: string,
+    sggNm = "",
+): GridRowWithVerification {
+    const row: GridRowWithVerification = { ctpvNm, sggNm };
+    for (const col of RainfallPumpStationInpColumn.columns) {
+        const fieldName = col.fieldName;
+        if (!fieldName) continue;
+        if (fieldName === "ctpvNm" || fieldName === "sggNm") continue;
+        row[fieldName] = col.valueType === ValueType.NUMBER ? 0 : "";
+    }
+    return row;
+}
+
+function applySggNmDropDownToReservoirGrid(
+    gridRef: RefObject<RealGridReact | null>,
+    labels: string[],
+) {
+    if (labels.length === 0) return;
+    applyDropDownColumnToGrid(
+        gridRef.current?.gridView as {
+            setColumnProperty?: (col: string, key: string, value: unknown) => void;
+        },
+        "sggNm",
+        labels,
+    );
+}
+
+function parseSggListFromResponse(res: ApiResponse<Sgg[]>): Sgg[] {
+    if (res.status !== "success" || res.data == null) return [];
+    return Array.isArray(res.data) ? res.data : [];
+}
+
+function buildSggNmColumn(
+    col: ColumnConfig,
+    canEdit: boolean,
+    sggOptions: Sgg[],
+): ColumnConfig {
+    if (!canEdit) {
+        return { ...col, editable: false as const };
+    }
+    if (sggOptions.length === 0) {
+        return { ...col, editable: true };
+    }
+    const labels = sggOptions.map((s) => s.gugun);
+    return {
+        ...col,
+        editable: true,
+        editor: {
+            type: "dropdown",
+            domainOnly: true,
+            textReadOnly: true,
+            commitOnSelect: true,
+            dropDownWhenClick: true,
+            values: labels,
+            labels,
+        },
+        values: labels,
+        labels,
+        lookupDisplay: true,
+    };
+}
+
+function mapSewageReservoirListToGridRows(
+    list: SewageReservoirItem[],
+    ctpvNm: string,
+): GridRowWithVerification[] {
+    return list.map((item) => {
+        const row = toGridRows([
+            {
+                ...item,
+                ctpvNm,
+                oprtngStrtYmd: formatCompactYmdForGrid(item.oprtngStrtYmd),
+                fldngPrvtnYn: normalizeOxYnValue(item.fldngPrvtnYn),
+                wqPlltnMtgtYn: normalizeOxYnValue(item.wqPlltnMtgtYn),
+                rtlztnUsgYn: normalizeOxYnValue(item.rtlztnUsgYn),
+            },
+        ])[0] as GridRowWithVerification;
+        if (item.verificationResult) {
+            row.verificationResult = item.verificationResult;
+        }
+        return row;
+    });
+}
+
+function nullableTrimmedString(
+    value: string | number | null | undefined,
+): string | null {
+    const s = String(value ?? "").trim();
+    return s === "" ? null : s;
+}
+
+function toGridNumber(value: string | number | null | undefined): number {
+    const n = Number(value);
+    return Number.isFinite(n) ? n : 0;
+}
+
+/** 시군구명(`sggNm`) 기준 `admdstCd`(bsnmCd)·`admdstNm`(시군구명) */
+function resolveSewageReservoirAdmdst(
+    sggNm: string,
+    sggOptions: Sgg[],
+): { admdstCd: string; admdstNm: string } {
+    const trimmed = sggNm.trim();
+    const matched = sggOptions.find((s) => s.gugun === trimmed);
+    if (matched) {
+        return { admdstCd: matched.bsnmCd, admdstNm: matched.gugun };
+    }
+    return { admdstCd: "", admdstNm: trimmed };
+}
+
+/** 그리드 행 → ST00040001 저장/삭제 API 항목 */
+function buildSewageReservoirSaveItem(
+    row: Record<string, string | number>,
+    sggOptions: Sgg[] = [],
+): SewageReservoirSaveItem {
+    const { admdstCd, admdstNm } = resolveSewageReservoirAdmdst(
+        String(row.sggNm ?? ""),
+        sggOptions,
+    );
+    const fcltSn = String(row.fcltSn ?? "").trim();
+    return {
+        admdstCd,
+        admdstNm,
+        // 항목 추가 직후 저장(신규) — 그리드 fcltSn 없음 → API에는 "1"
+        fcltSn: fcltSn,
+        fcltNm: String(row.fcltNm ?? ""),
+        fcltPstnCn: String(row.fcltPstnCn ?? ""),
+        oprtngStrtYmd: toCompactYmd(row.oprtngStrtYmd),
+        planDesignFreqCnt: toGridNumber(row.planDesignFreqCnt),
+        fldngPrvtnYn: normalizeOxYnValue(row.fldngPrvtnYn),
+        wqPlltnMtgtYn: normalizeOxYnValue(row.wqPlltnMtgtYn),
+        rtlztnUsgYn: normalizeOxYnValue(row.rtlztnUsgYn),
+        fcltStrctCn: nullableTrimmedString(row.fcltStrctCn),
+        wtrStrgZoneArea: toGridNumber(row.wtrStrgZoneArea),
+        impdFcltCpct: toGridNumber(row.impdFcltCpct),
+        grssPpqty: toGridNumber(row.grssPpqty),
+        pumpFcltN1DmtrExpln: String(row.pumpFcltN1DmtrExpln ?? ""),
+        pumpFcltN1PerPpqty: toGridNumber(row.pumpFcltN1PerPpqty),
+        pumpFcltN1PumpCnt: toGridNumber(row.pumpFcltN1PumpCnt),
+        pumpFcltN1RsrvPumpCnt: toGridNumber(row.pumpFcltN1RsrvPumpCnt),
+        pumpFcltN2DmtrExpln: String(row.pumpFcltN2DmtrExpln ?? ""),
+        pumpFcltN2PerPpqty: toGridNumber(row.pumpFcltN2PerPpqty),
+        pumpFcltN2PumpCnt: toGridNumber(row.pumpFcltN2PumpCnt),
+        pumpFcltN2RsrvPumpCnt: toGridNumber(row.pumpFcltN2RsrvPumpCnt),
+        pumpFcltN3DmtrExpln: String(row.pumpFcltN3DmtrExpln ?? ""),
+        pumpFcltN3PerPpqty: toGridNumber(row.pumpFcltN3PerPpqty),
+        pumpFcltN3PumpCnt: toGridNumber(row.pumpFcltN3PumpCnt),
+        pumpFcltN3RsrvPumpCnt: toGridNumber(row.pumpFcltN3RsrvPumpCnt),
+        prcsgFcltYn: String(row.prcsgFcltYn ? (row.prcsgFcltYn === '무' ? 'N' : 'Y') : ""),
+        ddrztnEqpmYn: String(row.ddrztnEqpmYn ? (row.prcsgFcltYn === '무' ? 'N' : 'Y') : ""),
+        oslfEtgtYn: String(row.oslfEtgtYn ? (row.prcsgFcltYn === '무' ? 'N' : 'Y') : ""),
+        mltvMthCn: nullableTrimmedString(row.mltvMthCn),
+        impdMthCn: nullableTrimmedString(row.impdMthCn),
+        impdPrcsMthdCn: nullableTrimmedString(row.impdPrcsMthdCn),
+        dschgWtrsExpln: String(row.dschgWtrsExpln ?? ""),
+        prcptnLastDspsQnt: toGridNumber(row.prcptnLastDspsQnt),
+        ctmnLastDspsQnt: toGridNumber(row.ctmnLastDspsQnt),
+        prcptnLastDspsMthdExpln: String(row.prcptnLastDspsMthdExpln ?? ""),
+        ctmnLastDspsMthdExpln: String(row.ctmnLastDspsMthdExpln ?? ""),
+        oprtngDayCnt: toGridNumber(row.oprtngDayCnt),
+        grssMltvQnt: toGridNumber(row.grssMltvQnt),
+        rmrk: nullableTrimmedString(row.rmrk),
+    };
+}
+
+/** 그리드 행 → ST00040002 저장/삭제 API 항목 */
+function buildRainfallPumpStationSaveItem(
+    row: Record<string, string | number>,
+    sggOptions: Sgg[] = [],
+): RainfallPumpStationSaveItem {
+    const { admdstCd, admdstNm } = resolveSewageReservoirAdmdst(
+        String(row.sggNm ?? ""),
+        sggOptions,
+    );
+    const fcltSn = String(row.fcltSn ?? "").trim();
+    return {
+        admdstCd,
+        admdstNm,
+        fcltSn: fcltSn,
+        fcltNm: String(row.fcltNm ?? ""),
+        fcltPstnCn: String(row.fcltPstnCn ?? ""),
+        fcltyKndCn: String(row.fcltyKndCn ?? ""),
+        oprtngStrtYmd: toCompactYmd(row.oprtngStrtYmd),
+        planDesignFreqCnt: toGridNumber(row.planDesignFreqCnt),
+        wtrStrgZoneArea: toGridNumber(row.wtrStrgZoneArea),
+        rsvrYn: String(row.rsvrYn ? (row.rsvrYn === "무" ? "N" : "Y") : ""),
+        rsvrImpndQnt: toGridNumber(row.rsvrImpndQnt),
+        abstnRgnImpdQnt: toGridNumber(row.abstnRgnImpdQnt),
+        grssPpqty: toGridNumber(row.grssPpqty),
+        pumpFcltN1DmtrExpln: String(row.pumpFcltN1DmtrExpln ?? ""),
+        pumpFcltN1PerPpqty: toGridNumber(row.pumpFcltN1PerPpqty),
+        pumpFcltN1PumpCnt: toGridNumber(row.pumpFcltN1PumpCnt),
+        pumpFcltN1RsrvPumpCnt: toGridNumber(row.pumpFcltN1RsrvPumpCnt),
+        pumpFcltN2DmtrExpln: String(row.pumpFcltN2DmtrExpln ?? ""),
+        pumpFcltN2PerPpqty: toGridNumber(row.pumpFcltN2PerPpqty),
+        pumpFcltN2PumpCnt: toGridNumber(row.pumpFcltN2PumpCnt),
+        pumpFcltN2RsrvPumpCnt: toGridNumber(row.pumpFcltN2RsrvPumpCnt),
+        pumpFcltN3DmtrExpln: String(row.pumpFcltN3DmtrExpln ?? ""),
+        pumpFcltN3PerPpqty: toGridNumber(row.pumpFcltN3PerPpqty),
+        pumpFcltN3PumpCnt: toGridNumber(row.pumpFcltN3PumpCnt),
+        pumpFcltN3RsrvPumpCnt: toGridNumber(row.pumpFcltN3RsrvPumpCnt),
+        prcsgFcltYn: String(row.prcsgFcltYn ? (row.prcsgFcltYn === "무" ? "N" : "Y") : ""),
+        ddrztnEqpmYn: String(row.ddrztnEqpmYn ? (row.prcsgFcltYn === "무" ? "N" : "Y") : ""),
+        oslfEtgtYn: String(row.oslfEtgtYn ? (row.prcsgFcltYn === "무" ? "N" : "Y") : ""),
+        dschgWtrsExpln: String(row.dschgWtrsExpln ?? ""),
+        prcptnLastDspsQnt: toGridNumber(row.prcptnLastDspsQnt),
+        ctmnLastDspsQnt: toGridNumber(row.ctmnLastDspsQnt),
+        prcptnLastDspsMthdExpln: String(row.prcptnLastDspsMthdExpln ?? ""),
+        ctmnLastDspsMthdExpln: String(row.ctmnLastDspsMthdExpln ?? ""),
+        oprtngDayCnt: toGridNumber(row.oprtngDayCnt),
+        grssMltvQnt: toGridNumber(row.grssMltvQnt),
+        rmrk: nullableTrimmedString(row.rmrk),
+    };
+}
+
+function mapRainfallPumpStationListToGridRows(
+    list: RainfallPumpStationItem[],
+    ctpvNm: string,
+): GridRowWithVerification[] {
+    return list.map((item) => {
+        const row = toGridRows([
+            {
+                ...item,
+                ctpvNm,
+                oprtngStrtYmd: formatCompactYmdForGrid(item.oprtngStrtYmd),
+                rsvrYn: normalizeOxYnValue(item.rsvrYn),
+                prcsgFcltYn: normalizeOxYnValue(item.prcsgFcltYn),
+                ddrztnEqpmYn: normalizeOxYnValue(item.ddrztnEqpmYn),
+                oslfEtgtYn: normalizeOxYnValue(item.oslfEtgtYn),
+            },
+        ])[0] as GridRowWithVerification;
+
+        if (item.verificationResult) {
+            row.verificationResult = item.verificationResult;
+        }
+        return row;
+    });
+}
+
+const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+async function waitForImrJobCompleted(
+    jobId: string,
+    getStatus: (id: string) => Promise<ImrStatusResponse>,
+    options?: {
+        pollIntervalMs?: number;
+        maxAttempts?: number;
+        onProgress?: (jobProgress: number) => void;
+    },
+): Promise<void> {
+    const pollIntervalMs = options?.pollIntervalMs ?? 2000;
+    const maxAttempts = options?.maxAttempts ?? 150;
+    for (let i = 0; i < maxAttempts; i++) {
+        const res = await getStatus(jobId);
+        options?.onProgress?.(Math.max(0, Math.min(100, Number(res.job_prog) || 0)));
+        if (res.status === "COMPLETED" && Number(res.job_prog) === 100) return;
+        if (res.status === "FAILED" || res.status === "ERROR" || res.status === "CANCELLED") {
+            throw new Error(res.error_msg || `IMR 검증이 ${res.status} 상태로 종료되었습니다.`);
+        }
+        await sleep(pollIntervalMs);
+    }
+    throw new Error("IMR 검증 완료 대기 시간이 초과되었습니다.");
+}
 
 // 하수도 통계 관리 > 04. 하수저류 시설 및 빗물 펌프장
 const SewageReservoirPumpInp = () => {
-    
-    // tab List
-    const SewageReservoirPumpInpTabList = [
-        SewageReservoirInpColumn,
-        RainfallPumpStationInpColumn
-    ];
-
-    const submitExceptionFunc = () => {
-        console.log('submit exception');
-        // 예외 제출 로직
-    };
-
-    const getLastYearDataFunc = () => {
-        console.log('get last year data');
-        // 지난연도 데이터 가져오기 로직
-    };
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const { confirm } = useConfirm();
+    const { isAdminInfo } = useAdminStore();
+    const toolbarGroupAllowed = useStatisticsInputToolbarGroupGate();
+    const showGlobalProgress = useGlobalProgressStore((state) => state.show);
+    const setGlobalProgress = useGlobalProgressStore((state) => state.setProgress);
+    const setGlobalProgressLabel = useGlobalProgressStore((state) => state.setLabel);
+    const hideGlobalProgress = useGlobalProgressStore((state) => state.hide);
 
     const submitFunc = () => {
-        console.log('submit');
-        // 제출 로직
+        void (async () => {
+            const tabKey = activeTabRef.current;
+            if (
+                tabKey !== SEWAGE_RESERVOIR_STATS_CD &&
+                tabKey !== rainfallPumpTabKey
+            ) {
+                alert("제출할 수 없는 탭입니다.");
+                return;
+            }
+            if (!lastSearchedValues) {
+                alert("먼저 조회를 진행해주세요.");
+                return;
+            }
+            if (!buildGugunOkForToolbar(lastSearchedValues)) {
+                alert("시군구를 선택해주세요.");
+                return;
+            }
+            const noApplicable = isNotApplicableByTab.get(tabKey) ?? false;
+            const currentData = getCurrentRowsForTab(tabKey);
+            if (!noApplicable && currentData.length === 0) {
+                alert("해당사항 없음을 체크해주세요.");
+                return;
+            }
+            if (await confirm("제출 하시겠습니까?")) {
+                setShowSubmitDialog(true);
+            }
+        })();
     };
 
-    const saveFunc = () => {
-        console.log('save');
-        // 저장 로직
+    const cnacelSubmitFunc = () => {
+        void (async () => {
+            try {
+                if (!(await confirm("제출된 내용을 취소하시겠습니까?"))) return;
+
+                if (!lastSearchedValues) {
+                    alert("먼저 조회를 진행해주세요.");
+                    return;
+                }
+
+                const tabKey = activeTabRef.current;
+                const statsCdForTab = tabStatsCdMap.get(tabKey) ?? tabKey;
+                const userInfo = await getUserInfo();
+
+                const requestData: cancelSubmitRequest = {
+                    sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+                    ctpvNm: lastSearchedValues.sido ?? "",
+                    sggNm:
+                        lastSearchedValues.gugun === "ALL"
+                            ? ""
+                            : (lastSearchedValues.gugun ?? ""),
+                    statsYr: lastSearchedValues.year ?? "",
+                    mdfrId: userInfo.userUnqId,
+                    statsCd: statsCdForTab,
+                };
+
+                const response = await statisticsApi.cancelSubmit(requestData);
+
+                if (response.status === "success") {
+                    setIsLoading(true);
+                    await loadActiveTabData(tabKey, lastSearchedValues, false, false);
+                    alert("제출 취소되었습니다.");
+                } else {
+                    alert(response.message ?? "제출 취소 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("제출 취소 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        })();
     };
 
-    const addArticleFunc = () => {
-        console.log('save');
-        // 항목 추가 로직
+    const isCheckedRow = (row: Record<string, string | number>): boolean => {
+        const v = row.__checked;
+        return v === 1 || v === "1" || v === "Y" || v === "y" || v === "true";
+    };
+
+    const getCheckedItemIndexesFromGrid = (
+        tabKey: string,
+        rowCount: number,
+    ): number[] => {
+        const gridRef =
+            tabKey === SEWAGE_RESERVOIR_STATS_CD
+                ? reservoirGridRef
+                : tabKey === rainfallPumpTabKey
+                    ? rainfallPumpGridRef
+                    : null;
+        if (!gridRef?.current?.gridView) return [];
+
+        const gridView = gridRef.current.gridView as {
+            getCheckedItems?: () => number[];
+            getCheckedRows?: () => number[];
+        };
+
+        const checked =
+            (typeof gridView.getCheckedItems === "function"
+                ? gridView.getCheckedItems()
+                : typeof gridView.getCheckedRows === "function"
+                    ? gridView.getCheckedRows()
+                    : []) ?? [];
+
+        return checked.filter(
+            (idx) => Number.isInteger(idx) && idx >= 0 && idx < rowCount,
+        );
+    };
+
+    const getCurrentRowsForTab = (
+        tabKey: string,
+    ): Record<string, string | number>[] => {
+        if (tabKey === SEWAGE_RESERVOIR_STATS_CD) {
+            return reservoirGridGetRowsRef.current?.() ?? rowDataMap.get(tabKey) ?? [];
+        }
+        if (tabKey === rainfallPumpTabKey) {
+            return rainfallPumpGridGetRowsRef.current?.() ?? rowDataMap.get(tabKey) ?? [];
+        }
+        return rowDataMap.get(tabKey) ?? [];
+    };
+
+    const commitGridForTab = (tabKey: string) => {
+        const gridRef =
+            tabKey === SEWAGE_RESERVOIR_STATS_CD
+                ? reservoirGridRef
+                : tabKey === rainfallPumpTabKey
+                    ? rainfallPumpGridRef
+                    : null;
+        const gridView = gridRef?.current?.gridView as
+            | {
+                commit?: (force?: boolean) => void;
+                cancel?: () => void;
+            }
+            | undefined;
+        try {
+            gridView?.commit?.(true);
+        } catch {
+            gridView?.cancel?.();
+        }
     };
 
     const deleteArticleFunc = () => {
-        console.log('save');
-        // 항목 제외 로직
+        const tabKey = activeTabRef.current;
+        const currentRows = getCurrentRowsForTab(tabKey);
+        if (currentRows.length === 0) {
+            alert("삭제할 데이터가 없습니다.");
+            return;
+        }
+
+        const checkedIndexes = getCheckedItemIndexesFromGrid(
+            tabKey,
+            currentRows.length,
+        );
+        const checkedIndexSet =
+            checkedIndexes.length > 0
+                ? new Set(checkedIndexes)
+                : new Set(
+                    currentRows
+                        .map((row, idx) => (isCheckedRow(row) ? idx : -1))
+                        .filter((idx) => idx >= 0),
+                );
+
+        const removedRows = currentRows.filter((_, idx) =>
+            checkedIndexSet.has(idx),
+        );
+        const nextRows = currentRows.filter((_, idx) => !checkedIndexSet.has(idx));
+        if (removedRows.length === 0) {
+            alert("삭제할 항목을 선택해주세요.");
+            return;
+        }
+
+        if (tabKey === SEWAGE_RESERVOIR_STATS_CD) {
+            setSewageReservoirDeleteList((prev) => [...prev, ...removedRows]);
+        } else if (tabKey === rainfallPumpTabKey) {
+            setRainfallPumpStationDeleteList((prev) => [...prev, ...removedRows]);
+        }
+
+        setRowDataMap((prev) => {
+            const next = new Map(prev);
+            next.set(tabKey, nextRows);
+            return next;
+        });
     };
 
-    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
-    const [isNotApplicable, setIsNotApplicable] = useState(false);
-    
+    const saveFunc = () => {
+        void (async () => {
+            const tabKey = activeTabRef.current;
+            if (
+                tabKey !== SEWAGE_RESERVOIR_STATS_CD &&
+                tabKey !== rainfallPumpTabKey
+            ) {
+                alert("저장할 수 없는 탭입니다.");
+                return;
+            }
+            if (!lastSearchedValues) {
+                alert("먼저 조회를 진행해주세요.");
+                return;
+            }
+            if (!buildGugunOkForToolbar(lastSearchedValues)) {
+                alert("시군구를 선택해주세요.");
+                return;
+            }
+            if (!(await confirm("저장 하시겠습니까?"))) return;
+
+            commitGridForTab(tabKey);
+            const noApplicable = isNotApplicableByTab.get(tabKey) ?? false;
+            const currentData = getCurrentRowsForTab(tabKey);
+            const isReservoirTab = tabKey === SEWAGE_RESERVOIR_STATS_CD;
+            const saveList = noApplicable
+                ? []
+                : isReservoirTab
+                    ? currentData.map((row) =>
+                        buildSewageReservoirSaveItem(row, sggOptions),
+                    )
+                    : currentData.map((row) =>
+                        buildRainfallPumpStationSaveItem(row, sggOptions),
+                    );
+            const deleteList = isReservoirTab
+                ? sewageReservoirDeleteList
+                    .filter((row) => String(row.fcltSn ?? "").trim() !== "")
+                    .map((row) => buildSewageReservoirSaveItem(row, sggOptions))
+                : rainfallPumpStationDeleteList
+                    .filter((row) => String(row.fcltSn ?? "").trim() !== "")
+                    .map((row) => buildRainfallPumpStationSaveItem(row, sggOptions));
+            if (!noApplicable && saveList.length === 0) {
+                alert("해당사항 없음을 체크해주세요.");
+                return;
+            }
+
+            const requestBase = {
+                statsYr: lastSearchedValues.year ?? "",
+                ctpvNm: lastSearchedValues.sido ?? "",
+                sggNm:
+                    lastSearchedValues.gugun === "ALL"
+                        ? ""
+                        : (lastSearchedValues.gugun ?? ""),
+                sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+                ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
+                ...(noApplicable ? { noApplicable: true } : {}),
+            };
+
+            try {
+                setIsLoading(true);
+                const userInfo = await getUserInfo();
+                const response = isReservoirTab
+                    ? await statisticsInputSewageReservoirPumpApi.saveSewageReservoir({
+                        ...requestBase,
+                        userId: userInfo.userUnqId,
+                        saveList: saveList as SewageReservoirSaveItem[],
+                        deleteList: deleteList as SewageReservoirSaveItem[],
+                    })
+                    : await statisticsInputSewageReservoirPumpApi.saveRainfallPumpStation({
+                        ...requestBase,
+                        userId: userInfo.userUnqId,
+                        saveList: saveList as RainfallPumpStationSaveItem[],
+                        deleteList: deleteList as RainfallPumpStationSaveItem[],
+                    });
+
+                if (response.status === "success") {
+                    if (isReservoirTab) {
+                        setSewageReservoirDeleteList([]);
+                    } else {
+                        setRainfallPumpStationDeleteList([]);
+                    }
+                    await loadActiveTabData(tabKey, lastSearchedValues, false, false);
+                    alert("저장되었습니다.");
+                } else {
+                    alert(response.message ?? "저장 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("저장 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        })();
+    };
+
+    const executeSubmit = async (submitInfo: StatisticsInputSubmitInfoFormData) => {
+        const tabKey = activeTabRef.current;
+        if (
+            tabKey !== SEWAGE_RESERVOIR_STATS_CD &&
+            tabKey !== rainfallPumpTabKey
+        ) {
+            alert("제출할 수 없는 탭입니다.");
+            return;
+        }
+        if (!lastSearchedValues) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+        if (!buildGugunOkForToolbar(lastSearchedValues)) {
+            alert("시군구를 선택해주세요.");
+            return;
+        }
+
+        commitGridForTab(tabKey);
+        const noApplicable = isNotApplicableByTab.get(tabKey) ?? false;
+        const currentData = getCurrentRowsForTab(tabKey);
+        const isReservoirTab = tabKey === SEWAGE_RESERVOIR_STATS_CD;
+        const submitList = noApplicable
+            ? []
+            : isReservoirTab
+                ? currentData.map((row) => buildSewageReservoirSaveItem(row, sggOptions))
+                : currentData.map((row) => buildRainfallPumpStationSaveItem(row, sggOptions));
+        const deleteList = isReservoirTab
+            ? sewageReservoirDeleteList
+                .filter((row) => String(row.fcltSn ?? "").trim() !== "")
+                .map((row) => buildSewageReservoirSaveItem(row, sggOptions))
+            : rainfallPumpStationDeleteList
+                .filter((row) => String(row.fcltSn ?? "").trim() !== "")
+                .map((row) => buildRainfallPumpStationSaveItem(row, sggOptions));
+
+        const activeTabStatus = tabStatusInfoMap.get(tabKey) ?? null;
+        const statsCdForTab = tabStatsCdMap.get(tabKey) ?? tabKey;
+        const verificationQuery = {
+            sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+            ctpvNm: lastSearchedValues.sido ?? "",
+            sggNm:
+                lastSearchedValues.gugun === "ALL"
+                    ? ""
+                    : (lastSearchedValues.gugun ?? ""),
+            statsYr: lastSearchedValues.year ?? "",
+            statsCd: statsCdForTab,
+        };
+
+        const reloadSubmittedTab = async () => {
+            if (isReservoirTab) {
+                setSewageReservoirDeleteList([]);
+            } else {
+                setRainfallPumpStationDeleteList([]);
+            }
+            await loadActiveTabData(tabKey, lastSearchedValues, false, false);
+        };
+
+        if (!noApplicable && submitList.length === 0) {
+            alert("해당사항 없음을 체크해주세요.");
+            return;
+        }
+
+        const submitRequestBase = {
+            statsYr: lastSearchedValues.year ?? "",
+            ctpvNm: lastSearchedValues.sido ?? "",
+            sggNm:
+                lastSearchedValues.gugun === "ALL"
+                    ? ""
+                    : (lastSearchedValues.gugun ?? ""),
+            sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+            ...(noApplicable ? { noApplicable: true } : {}),
+            laePicNm: submitInfo.laePicNm,
+            laeKbrdrJbgdNm: submitInfo.laeKbrdrJbgdNm,
+            laeKbrdrDeptNm: submitInfo.laeKbrdrDeptNm,
+            laePicTelNo: submitInfo.laePicTelNo,
+            laeIdfrNm: submitInfo.laeIdfrNm,
+            laeIdfrJbgdNm: submitInfo.laeIdfrJbgdNm,
+            laeIdfrDeptNm: submitInfo.laeIdfrDeptNm,
+            laeIdfrTelNo: submitInfo.laeIdfrTelNo,
+        };
+
+        try {
+            showGlobalProgress({ label: "서버에 요청 중...", progress: 0 });
+            const userInfo = await getUserInfo();
+            setGlobalProgressLabel("일반 검증 진행 중...");
+            const response = isReservoirTab
+                ? await statisticsInputSewageReservoirPumpApi.submitSewageReservoir({
+                    ...submitRequestBase,
+                    userId: userInfo.userUnqId,
+                    submitList: submitList as SewageReservoirSaveItem[],
+                    deleteList: deleteList as SewageReservoirSaveItem[],
+                })
+                : await statisticsInputSewageReservoirPumpApi.submitRainfallPumpStation({
+                    ...submitRequestBase,
+                    userId: userInfo.userUnqId,
+                    submitList: submitList as RainfallPumpStationSaveItem[],
+                    deleteList: deleteList as RainfallPumpStationSaveItem[],
+                });
+
+            if (response.status !== "success") {
+                alert(response.message ?? "데이터 제출 중 오류가 발생했습니다.");
+                return;
+            }
+
+            const finalStatus = response.data?.finalStatus;
+            const nvpassed = response.data?.nvpassed;
+
+            if (finalStatus === "5") {
+                setGlobalProgress(50);
+                setGlobalProgressLabel("IMR 검증 진행 중...");
+                const imrParam = {
+                    user_id: userInfo.userUnqId,
+                    sewer_bzmn_cd: lastSearchedValues.bsnmCd ?? "",
+                    stats_cd: statsCdForTab,
+                    stats_yr: lastSearchedValues.year ?? "",
+                    lae_sbmsn_stts_cd:
+                        activeTabStatus?.laeSbmsnSttsCd === "4" ? "4" : "2",
+                    gen_verify_stts_cd: nvpassed ? "1" : "2",
+                };
+
+                try {
+                    const imrResponse = await statisticsApi.callImrService(imrParam);
+                    if (imrResponse.job_id) {
+                        await waitForImrJobCompleted(
+                            imrResponse.job_id,
+                            (id) => statisticsApi.getImrStatus(id),
+                            {
+                                onProgress: (jobProgress) => {
+                                    setGlobalProgress(50 + Math.round(jobProgress / 2));
+                                },
+                            },
+                        );
+                    }
+                    setGlobalProgress(100);
+                    await reloadSubmittedTab();
+                    await openVerificationResultDialogIfNeeded(
+                        verificationQuery,
+                        setVerificationResultDialogOpen,
+                        { notify: alert },
+                    );
+                } catch (e) {
+                    await reloadSubmittedTab();
+                    await openVerificationResultDialogIfNeeded(
+                        verificationQuery,
+                        setVerificationResultDialogOpen,
+                        { notify: alert, notifySubmitComplete: false },
+                    );
+                    const msg =
+                        e instanceof Error && e.message
+                            ? e.message
+                            : "IMR 검증 중 오류가 발생했습니다.\n관리자에게 문의하세요.";
+                    alert(msg);
+                }
+            } else {
+                setGlobalProgress(100);
+                await reloadSubmittedTab();
+                await openVerificationResultDialogIfNeeded(
+                    verificationQuery,
+                    setVerificationResultDialogOpen,
+                    { notify: alert },
+                );
+            }
+        } catch {
+            alert("데이터 제출 중 오류가 발생했습니다.");
+        } finally {
+            hideGlobalProgress();
+        }
+    };
+
+    const [sewageReservoirDeleteList, setSewageReservoirDeleteList] = useState<
+        Record<string, string | number>[]
+    >([]);
+    const [rainfallPumpStationDeleteList, setRainfallPumpStationDeleteList] =
+        useState<Record<string, string | number>[]>([]);
+    const [activeTab, setActiveTab] = useState(firstTabKey);
+    const [rowDataMap, setRowDataMap] = useState<
+        Map<string, Record<string, string | number>[]>
+    >(new Map());
+    const [isNotApplicableByTab, setIsNotApplicableByTab] = useState<Map<string, boolean>>(
+        () => new Map(),
+    );
+    const [searchValues, setSearchValues] = useState<SearchFormValues | null>(null);
+    const [lastSearchedValues, setLastSearchedValues] = useState<SearchFormValues | null>(
+        null,
+    );
+    const [hasSearched, setHasSearched] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [inputPeriodEnterable, setInputPeriodEnterable] = useState(true);
+    const [tabStatusInfoMap, setTabStatusInfoMap] = useState<
+        Map<string, SewerageStatusInfo | null>
+    >(new Map());
+    const [toolbarSnapshotByTab, setToolbarSnapshotByTab] = useState<
+        Map<string, TabToolbarSnapshot>
+    >(new Map());
+    const [tabStatsCdMap, setTabStatsCdMap] = useState<Map<string, string>>(new Map());
+    const [verificationHistoryOpen, setVerificationHistoryOpen] = useState(false);
+    const [verificationResultDialogOpen, setVerificationResultDialogOpen] =
+        useState(false);
+    const [showSubmitDialog, setShowSubmitDialog] = useState(false);
+    const [sggOptions, setSggOptions] = useState<Sgg[]>([]);
+    const [columnGuidesByTab, setColumnGuidesByTab] = useState<
+        Record<string, Record<string, string>>
+    >({});
+    const reservoirGridRef = useRef<RealGridReact | null>(null);
+    const rainfallPumpGridRef = useRef<RealGridReact | null>(null);
+    const reservoirGridGetRowsRef =
+        useRef<(() => Record<string, string | number>[]) | null>(null);
+    const rainfallPumpGridGetRowsRef =
+        useRef<(() => Record<string, string | number>[]) | null>(null);
+    const sggOptionsSidoRef = useRef<string | null>(null);
+
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            const entries = await Promise.all(
+                SEWAGE_RESERVOIR_PUMP_COLUMN_GUIDE_TAB_KEYS.map(async (tabKey) => {
+                    try {
+                        const res = await statisticsApi.getColumnGuides(tabKey);
+                        if (res.status !== "success" || !Array.isArray(res.data)) {
+                            return [tabKey, {}] as const;
+                        }
+                        const next: Record<string, string> = {};
+                        for (const item of res.data) {
+                            const key = item.engColNm?.trim();
+                            const guide = item.columnGuide?.trim();
+                            if (key && guide) next[key] = guide;
+                        }
+                        return [tabKey, next] as const;
+                    } catch {
+                        return [tabKey, {}] as const;
+                    }
+                }),
+            );
+            if (cancelled) return;
+            setColumnGuidesByTab(Object.fromEntries(entries));
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
+    const searchDoneRef = useRef(false);
+    const periodEnterableRef = useRef(true);
+    const activeTabRef = useRef(activeTab);
+    const loadedTabKeysRef = useRef<Set<string>>(new Set());
+    activeTabRef.current = activeTab;
+
+    const shouldShowNotApplicable = (
+        tabKey: string,
+        hasRows: boolean,
+        statusInfo: SewerageStatusInfo | null | undefined,
+    ): boolean =>
+        (tabKey === SEWAGE_RESERVOIR_STATS_CD || tabKey === rainfallPumpTabKey) &&
+        hasSearched &&
+        !hasRows &&
+        computeTabEnterable(statusInfo, inputPeriodEnterable);
+
+    const setIsNotApplicableForTab = useCallback(
+        (tabKey: string, nextValue: boolean) => {
+            setIsNotApplicableByTab((prev) => {
+                const next = new Map(prev);
+                next.set(tabKey, nextValue);
+                return next;
+            });
+        },
+        [],
+    );
+
+    const commitToolbarSnapshotForLoadedTab = (
+        tabKey: string,
+        statusInfo: SewerageStatusInfo | null,
+        hasRowData: boolean,
+        searchContext: SearchFormValues,
+    ) => {
+        setToolbarSnapshotByTab((prev) => {
+            const next = new Map(prev);
+            next.set(
+                tabKey,
+                computeTabToolbarSnapshot(
+                    statusInfo,
+                    hasRowData,
+                    searchDoneRef.current,
+                    searchContext,
+                    periodEnterableRef.current,
+                    isAdminInfo,
+                ),
+            );
+            return next;
+        });
+    };
+
+    const applyRowMap = (
+        mergeIntoExistingMap: boolean,
+        apply: (m: Map<string, Record<string, string | number>[]>) => void,
+    ) => {
+        if (mergeIntoExistingMap) {
+            setRowDataMap((prev) => {
+                const next = new Map(prev);
+                apply(next);
+                return next;
+            });
+        } else {
+            const next = new Map<string, Record<string, string | number>[]>();
+            apply(next);
+            setRowDataMap(next);
+        }
+    };
+
+    const loadActiveTabData = async (
+        tabKey: string,
+        values: SearchFormValues,
+        mergeIntoExistingMap: boolean,
+        updateLastSearchedValues: boolean,
+        overrides?: { mode?: string },
+    ): Promise<boolean> => {
+        // 서버 데이터로 새로 불러오는 시점이므로 현재 탭의 "해당없음" 체크는 초기화
+        setIsNotApplicableForTab(tabKey, false);
+        if (tabKey === SEWAGE_RESERVOIR_STATS_CD) {
+            const response =
+                await statisticsInputSewageReservoirPumpApi.getSewageReservoirList(
+                    buildSewageReservoirSearchParam(values, overrides),
+                );
+
+            if (response.status !== "success" || !response.data) {
+                alert(response.message ?? "데이터 조회 중 오류가 발생했습니다.");
+                return false;
+            }
+
+            const { commonInfo, statusInfo, sewageReservoirList } = response.data;
+            const list = sewageReservoirList ?? [];
+            setSewageReservoirDeleteList([]);
+            const gridRows = mapSewageReservoirListToGridRows(
+                list,
+                commonInfo.ctpvNm,
+            );
+
+            applyRowMap(mergeIntoExistingMap, (m) => {
+                m.set(tabKey, gridRows);
+            });
+            setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, statusInfo));
+            setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+            if (updateLastSearchedValues) {
+                setLastSearchedValues(values);
+            }
+            commitToolbarSnapshotForLoadedTab(
+                tabKey,
+                statusInfo,
+                gridRows.length > 0,
+                values,
+            );
+            loadedTabKeysRef.current.add(tabKey);
+            return true;
+        }
+
+        if (tabKey === rainfallPumpTabKey) {
+            const response =
+                await statisticsInputSewageReservoirPumpApi.getRainfallPumpStationList(
+                    buildSewageReservoirSearchParam(values, overrides),
+                );
+
+            if (response.status !== "success" || !response.data) {
+                alert(response.message ?? "데이터 조회 중 오류가 발생했습니다.");
+                return false;
+            }
+
+            const { commonInfo, statusInfo, rainfallPumpStationList } = response.data;
+            const list = rainfallPumpStationList ?? [];
+            setRainfallPumpStationDeleteList([]);
+            const gridRows = mapRainfallPumpStationListToGridRows(
+                list,
+                commonInfo.ctpvNm,
+            );
+
+            applyRowMap(mergeIntoExistingMap, (m) => {
+                m.set(tabKey, gridRows);
+            });
+            setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, statusInfo));
+            setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+            if (updateLastSearchedValues) {
+                setLastSearchedValues(values);
+            }
+            commitToolbarSnapshotForLoadedTab(
+                tabKey,
+                statusInfo,
+                gridRows.length > 0,
+                values,
+            );
+            loadedTabKeysRef.current.add(tabKey);
+            return true;
+        }
+
+        alert("해당 탭 조회 API가 없습니다.");
+        return false;
+    };
+
+    const getLastYearDataFunc = async () => {
+        const values = lastSearchedValues ?? searchValues;
+        if (!values?.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+        if (!hasSearched) {
+            alert("먼저 데이터를 조회해주세요.");
+            return;
+        }
+        try {
+            setIsLoading(true);
+            await loadActiveTabData(activeTabRef.current, values, true, false, {
+                mode: "PRE",
+            });
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const loadSggOptions = useCallback(async (sido: string): Promise<Sgg[]> => {
+        if (!sido || sido === "ALL") {
+            setSggOptions([]);
+            return [];
+        }
+        try {
+            const res = await statisticsApi.getSggAllList(sido);
+            const list = parseSggListFromResponse(res);
+            setSggOptions(list);
+            return list;
+        } catch {
+            setSggOptions([]);
+            return [];
+        }
+    }, []);
+
+    const handleReset = () => {
+        setSewageReservoirDeleteList([]);
+        setRainfallPumpStationDeleteList([]);
+        setRowDataMap(new Map());
+        setTabStatusInfoMap(new Map());
+        setTabStatsCdMap(new Map());
+        setToolbarSnapshotByTab(new Map());
+        setLastSearchedValues(null);
+        setSggOptions([]);
+        sggOptionsSidoRef.current = null;
+        setHasSearched(false);
+        setInputPeriodEnterable(true);
+        setIsNotApplicableByTab(new Map());
+        searchDoneRef.current = false;
+        periodEnterableRef.current = true;
+        loadedTabKeysRef.current.clear();
+        setActiveTab(firstTabKey);
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        if (!values.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+
+        try {
+            const periodResponse = await statisticsInputSewSupplyRateApi.checkInputPeriod(
+                values.year || "",
+            );
+            if (periodResponse.status !== "success") {
+                alert(periodResponse.message);
+                return;
+            }
+            const periods = Array.isArray(periodResponse.data)
+                ? periodResponse.data
+                : [];
+            const periodOk = isInputPeriodCurrent(periods);
+            periodEnterableRef.current = periodOk;
+            setInputPeriodEnterable(periodOk);
+        } catch {
+            alert("입력 기간 확인 중 오류가 발생했습니다.");
+            return;
+        }
+
+        const yearChangedFromLastSearch =
+            lastSearchedValues != null &&
+            (lastSearchedValues.year ?? "") !== (values.year ?? "");
+
+        if (yearChangedFromLastSearch) {
+            setRowDataMap(new Map());
+            setTabStatusInfoMap(new Map());
+            setTabStatsCdMap(new Map());
+            setToolbarSnapshotByTab(new Map());
+            loadedTabKeysRef.current.clear();
+            setActiveTab(firstTabKey);
+        }
+
+        try {
+            setIsLoading(true);
+            searchDoneRef.current = true;
+            setHasSearched(true);
+            setLastSearchedValues(values);
+            const loadedSgg = await loadSggOptions(values.sido);
+            sggOptionsSidoRef.current = values.sido;
+            if (loadedSgg.length === 0) {
+                alert("시군구 목록을 불러오지 못했습니다.");
+                return;
+            }
+
+            const tabKeyToLoad = yearChangedFromLastSearch ? firstTabKey : activeTabRef.current;
+            if (yearChangedFromLastSearch) {
+                activeTabRef.current = firstTabKey;
+                setActiveTab(firstTabKey);
+            }
+
+            const ok = await loadActiveTabData(
+                tabKeyToLoad,
+                values,
+                !yearChangedFromLastSearch,
+                true,
+            );
+            if (!ok) return;
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        const prevTabKey = activeTabRef.current;
+        commitGridForTab(prevTabKey);
+        const latestRowsInPrevTab = getCurrentRowsForTab(prevTabKey);
+        if (latestRowsInPrevTab.length > 0 || rowDataMap.has(prevTabKey)) {
+            setRowDataMap((prev) => {
+                const next = new Map(prev);
+                next.set(prevTabKey, latestRowsInPrevTab);
+                return next;
+            });
+        }
+
+        activeTabRef.current = tabKey;
+        setActiveTab(tabKey);
+        if (!hasSearched || !lastSearchedValues) return;
+        if (loadedTabKeysRef.current.has(tabKey)) return;
+        if (tabRowDataExists(rowDataMap, tabKey)) return;
+
+        try {
+            setIsLoading(true);
+            await loadActiveTabData(tabKey, lastSearchedValues, true, false);
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const searchContextForToolbar = lastSearchedValues ?? searchValues;
+    const activeTabStatus = tabStatusInfoMap.get(activeTab) ?? null;
+    const activeTabToolbar =
+        toolbarSnapshotByTab.get(activeTab) ??
+        computeTabToolbarSnapshot(
+            activeTabStatus,
+            tabRowDataExists(rowDataMap, activeTab),
+            hasSearched,
+            searchContextForToolbar,
+            inputPeriodEnterable,
+            isAdminInfo,
+        );
+
+    const {
+        showSaveInToolbar: baseShowSaveInToolbar,
+        showEnterableToolbarButtons: baseShowEnterableToolbarButtons,
+        showActionToolbarCard: baseShowActionToolbarCard,
+    } = activeTabToolbar;
+
+    const showSaveInToolbar = baseShowSaveInToolbar && toolbarGroupAllowed;
+    const showEnterableToolbarButtons =
+        baseShowEnterableToolbarButtons && toolbarGroupAllowed;
+    const showActionToolbarCard =
+        baseShowActionToolbarCard && toolbarGroupAllowed;
+    const isReservoirOrRainfallTab =
+        activeTab === SEWAGE_RESERVOIR_STATS_CD || activeTab === rainfallPumpTabKey;
+    const showArticleToolbarCard =
+        hasSearched &&
+        isReservoirOrRainfallTab &&
+        toolbarGroupAllowed &&
+        (showSaveInToolbar || showEnterableToolbarButtons);
+    const isNotApplicableForActiveTab = isNotApplicableByTab.get(activeTab) ?? false;
+    const showNotApplicableForActiveTab =
+        loadedTabKeysRef.current.has(activeTab) &&
+        shouldShowNotApplicable(
+            activeTab,
+            tabRowDataExists(rowDataMap, activeTab),
+            tabStatusInfoMap.get(activeTab),
+        );
+    const setIsNotApplicableForActiveTab: Dispatch<SetStateAction<boolean>> = useCallback(
+        (next) => {
+            const tabKey = activeTabRef.current;
+            const current = isNotApplicableByTab.get(tabKey) ?? false;
+            const resolved =
+                typeof next === "function"
+                    ? (next as (prevState: boolean) => boolean)(current)
+                    : next;
+            setIsNotApplicableForTab(tabKey, resolved);
+        },
+        [isNotApplicableByTab, setIsNotApplicableForTab],
+    );
+
+    const openVerificationHistoryDialog = () => {
+        const ctx = lastSearchedValues ?? searchValues;
+        const activeTabStatsCd = tabStatsCdMap.get(activeTab);
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !activeTabStatsCd) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+        setVerificationHistoryOpen(true);
+    };
+
+    const addArticleFunc = async () => {
+        const ctx = lastSearchedValues ?? searchValues;
+        if (!hasSearched || !ctx?.sido || ctx.sido === "ALL") {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+
+        const activeTabKey = activeTabRef.current;
+        const isReservoirTab = activeTabKey === SEWAGE_RESERVOIR_STATS_CD;
+        const isRainfallPumpTab = activeTabKey === rainfallPumpTabKey;
+        if (!isReservoirTab && !isRainfallPumpTab) {
+            alert("항목을 추가할 수 없는 탭입니다.");
+            return;
+        }
+
+        const sggNm =
+            ctx.gugun && ctx.gugun !== "ALL" ? ctx.gugun : "";
+
+        let list = sggOptions;
+        if (sggOptionsSidoRef.current !== ctx.sido || list.length === 0) {
+            list = await loadSggOptions(ctx.sido);
+            sggOptionsSidoRef.current = ctx.sido;
+        }
+        if (list.length === 0) {
+            alert("시군구 목록을 불러오지 못했습니다.");
+            return;
+        }
+
+        const tabKey = activeTabKey;
+        const newRow = isReservoirTab
+            ? createEmptySewageReservoirRow(ctx.sido, sggNm)
+            : createEmptyRainfallPumpStationRow(ctx.sido, sggNm);
+
+        commitGridForTab(tabKey);
+        const currentRows = getCurrentRowsForTab(tabKey);
+
+        flushSync(() => {
+            setSggOptions(list);
+            setRowDataMap((prev) => {
+                const next = new Map(prev);
+                next.set(tabKey, [...currentRows, newRow]);
+                return next;
+            });
+        });
+
+        const statusInfo = tabStatusInfoMap.get(tabKey) ?? null;
+        commitToolbarSnapshotForLoadedTab(tabKey, statusInfo, true, ctx);
+    };
+
+    const columnInfoByTab = useMemo(() => {
+        const map = new Map<string, ColumnInfo>();
+        for (const tab of SewageReservoirPumpInpTabList) {
+            const tabKey = tab.tabKey ?? "";
+            const canEdit =
+                computeTabEnterable(
+                    tabStatusInfoMap.get(tabKey) ?? null,
+                    inputPeriodEnterable,
+                ) || isAdminInfo;
+            const isReservoirTab = tabKey === SEWAGE_RESERVOIR_STATS_CD;
+            const isRainfallPumpTab = tabKey === rainfallPumpTabKey;
+            const rawColumns = tab.columns ?? [];
+            const base = canEdit
+                ? rawColumns
+                : rawColumns.map((col) => ({ ...col, editable: false as const }));
+            const columns = base.map((col: ColumnConfig) => {
+                if (
+                    (isReservoirTab || isRainfallPumpTab) &&
+                    col.fieldName === "ctpvNm"
+                ) {
+                    return { ...col, editable: false as const };
+                }
+                if (
+                    (isReservoirTab || isRainfallPumpTab) &&
+                    col.fieldName === "sggNm" &&
+                    canEdit
+                ) {
+                    return buildSggNmColumn(col, true, sggOptions);
+                }
+                return col;
+            }).map((col) => {
+                const guide = columnGuidesByTab[tabKey]?.[col.fieldName]?.trim();
+                return guide ? { ...col, tooltip: guide } : col;
+            });
+            map.set(tabKey, {
+                columns,
+                columnLayout: tab.columnLayout ?? [],
+            });
+        }
+        return map;
+    }, [tabStatusInfoMap, inputPeriodEnterable, isAdminInfo, sggOptions, columnGuidesByTab]);
+
+    const verificationCellStyle = ({
+        fieldName,
+        row,
+    }: CellStyleCallbackParams): string | undefined => {
+        const verification = (row as GridRowWithVerification).verificationResult;
+        if (!verification) return;
+        const errors = verification[fieldName];
+        if (Array.isArray(errors) && errors.length > 0) {
+            const hasImr = errors.some((e) => e.vrfcCd === "IMR" || e.vrfcCd === "HB");
+            return hasImr ? "rg-cell-verify-error-imr" : "rg-cell-verify-error";
+        }
+    };
+
+    const verificationCellTooltip = ({
+        fieldName,
+        row,
+    }: CellTooltipCallbackParams): string | undefined => {
+        const verification = (row as GridRowWithVerification).verificationResult;
+        if (!verification) return;
+        const errors = verification[fieldName];
+        if (Array.isArray(errors) && errors.length > 0) {
+            return errors
+                .map((e) => {
+                    const prefix =
+                        e.vrfcCd === "IMR"
+                            ? "IMR검증 - "
+                            : e.vrfcCd === "NV"
+                                ? "일반검증 - "
+                                : "HB검증 -";
+                    return `${prefix}${e.rsnExpln}
+(검증 기준값: ${e.compVlCn} / 현재 입력값: ${e.nowVlCn})`;
+                })
+                .filter(Boolean)
+                .join("\n");
+        }
+    };
+
+    const verificationQueryContext = (() => {
+        const ctx = lastSearchedValues ?? searchValues;
+        const statsCd = tabStatsCdMap.get(activeTab);
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !statsCd) return null;
+        return {
+            sewerBzmnCd: ctx.bsnmCd,
+            ctpvNm: ctx.sido,
+            sggNm: ctx.gugun === "ALL" ? "" : (ctx.gugun ?? ""),
+            statsYr: ctx.year,
+            statsCd,
+        };
+    })();
+
     return (
         <>
-            <SearchForm fctName={true} />
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <SubmitExceptionButton SubmitExceptionFunc={submitExceptionFunc} />
-                    <LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
-                    <SubmitButton submitFunc={submitFunc} />
-                    <SaveButton saveFunc={saveFunc} />
-                </div>
+            <div className="relative">
+                <SearchForm
+                    fctName={true}
+                    onSubmit={handleSearch}
+                    onReset={handleReset}
+                    onValuesChange={setSearchValues}
+                />
+                {showActionToolbarCard && (
+                    <div className="card !py-0">
+                        <div className="m-[0.6rem] flex items-center justify-end gap-[0.6rem]">
+                            <VerificationResultButton
+                                VerificationResultButtonFunc={openVerificationHistoryDialog}
+                            />
+                            {showEnterableToolbarButtons && (
+                                <>
+                                    <LastYearDataButton
+                                        getLastYearDataFunc={() => void getLastYearDataFunc()}
+                                    />
+                                    <SubmitButton submitFunc={submitFunc} />
+                                </>
+                            )}
+                            {activeTabStatus?.laeSbmsnSttsCd === "2" && (
+                                <CancelSubmitButton cnacelSubmitFunc={cnacelSubmitFunc} />
+                            )}
+                            {showSaveInToolbar && <SaveButton saveFunc={saveFunc} />}
+                        </div>
+                    </div>
+                )}
+                {showArticleToolbarCard && (
+                    <div className="card !py-0">
+                        <div className="m-[0.6rem] flex items-center justify-end gap-[0.6rem]">
+                            {showNotApplicableForActiveTab && (
+                                <NotApplicableCheckButton
+                                    isCheck={isNotApplicableForActiveTab}
+                                    setIsCheck={setIsNotApplicableForActiveTab}
+                                />
+                            )}
+                            <AddArticleButton addArticleFunc={addArticleFunc} />
+                            <DeleteArticleButton deleteArticleFunc={deleteArticleFunc} />
+                        </div>
+                    </div>
+                )}
+                {isLoading && (
+                    <div className="absolute inset-0 z-50 flex items-center justify-center rounded-lg p-10 [data-theme='black']:bg-transparent">
+                        <div className="relative size-[5rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
+                    </div>
+                )}
+                <Tabs
+                    value={activeTab}
+                    onValueChange={(v) => void handleActiveTabChange(v)}
+                >
+                    <TabsList>
+                        {SewageReservoirPumpInpTabList.map((tab) => (
+                            <TabsTrigger key={tab.tabKey} value={tab.tabKey ?? ""}>
+                                {tab.tabLabel || tab.tabKey}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    {SewageReservoirPumpInpTabList.map((tab) => {
+                        const tabKey = tab.tabKey ?? "";
+                        const tabEnterableForGrid =
+                            computeTabEnterable(
+                                tabStatusInfoMap.get(tabKey) ?? null,
+                                inputPeriodEnterable,
+                            ) || isAdminInfo;
+                        const gugunOk = buildGugunOkForToolbar(lastSearchedValues);
+                        const tabStatusInfo = tabStatusInfoMap.get(tabKey) ?? null;
+                        const isReservoirTab = tabKey === SEWAGE_RESERVOIR_STATS_CD;
+                        return (
+                            <TabsContent key={tabKey} value={tabKey}>
+                                <DataGrid
+                                    key={`${tabKey}-${tabEnterableForGrid ? "enterable" : "readonly"}`}
+                                    getGridRef={
+                                        isReservoirTab
+                                            ? reservoirGridRef
+                                            : tabKey === rainfallPumpTabKey
+                                                ? rainfallPumpGridRef
+                                                : undefined
+                                    }
+                                    columnInfo={
+                                        columnInfoByTab.get(tabKey) ??
+                                        toGridColumnInfo(tab)
+                                    }
+                                    rowStartNum={tab.rowStartNum}
+                                    fixedColumns={tab.fixedColumns}
+                                    rowData={rowDataMap.get(tabKey) ?? []}
+                                    setRowData={(updater) => {
+                                        setRowDataMap((prev) => {
+                                            const next = new Map(prev);
+                                            const cur = next.get(tabKey) ?? [];
+                                            const n =
+                                                typeof updater === "function"
+                                                    ? (updater as (
+                                                        p: Record<
+                                                            string,
+                                                            string | number
+                                                        >[],
+                                                    ) => Record<
+                                                        string,
+                                                        string | number
+                                                    >[])(cur)
+                                                    : updater;
+                                            next.set(tabKey, n);
+                                            return next;
+                                        });
+                                    }}
+                                    getGridDataRef={
+                                        tabKey === SEWAGE_RESERVOIR_STATS_CD
+                                            ? reservoirGridGetRowsRef
+                                            : tabKey === rainfallPumpTabKey
+                                                ? rainfallPumpGridGetRowsRef
+                                                : undefined
+                                    }
+                                    showHeaderCheckbox
+                                    statusInfo={tabStatusInfo}
+                                    isExcelImport={
+                                        loadedTabKeysRef.current.has(tabKey) &&
+                                        tabEnterableForGrid &&
+                                        gugunOk
+                                    }
+                                    cellStyleCallback={verificationCellStyle}
+                                    cellTooltipCallback={verificationCellTooltip}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+                </Tabs>
             </div>
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <NotApplicableCheckButton isCheck={isNotApplicable} setIsCheck={setIsNotApplicable} />
-                    <AddArticleButton addArticleFunc={addArticleFunc} />
-                    <DeleteArticleButton deleteArticleFunc={deleteArticleFunc} />
-                </div>
-            </div>
-            <TabDataGrid 
-                columnInfo={SewageReservoirPumpInpTabList} 
-                rowDataMap={rowDataMap} 
-                setRowDataMap={setRowDataMap} 
+            <VerificationResultHistoryDialog
+                open={verificationHistoryOpen}
+                onOpenChange={setVerificationHistoryOpen}
+                queryContext={verificationQueryContext}
+                onExceptionResetSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values) return;
+                    await loadActiveTabData(activeTabRef.current, values, false, false);
+                }}
             />
+            <SubmitDailog
+                open={showSubmitDialog}
+                onOpenChange={setShowSubmitDialog}
+                statusInfo={activeTabStatus}
+                onConfirm={executeSubmit}
+                isLoading={isLoading}
+            />
+            <VerificationResultDialog
+                open={verificationResultDialogOpen}
+                onOpenChange={setVerificationResultDialogOpen}
+                queryContext={verificationQueryContext}
+                onExceptionSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values) return;
+                    await loadActiveTabData(activeTabRef.current, values, false, false);
+                }}
+            />
+            <ConfirmDialog isOpen={false} />
         </>
     );
 };
 
-export default SewageReservoirPumpInp;
\ No newline at end of file
+export default SewageReservoirPumpInp;
diff --git a/apps/st/src/components/statistics/input/SewerageFinanceInp.tsx b/apps/st/src/components/statistics/input/SewerageFinanceInp.tsx
index c1c2177de..fb2ebf09b 100644
--- a/apps/st/src/components/statistics/input/SewerageFinanceInp.tsx
+++ b/apps/st/src/components/statistics/input/SewerageFinanceInp.tsx
@@ -1,34 +1,704 @@
-import { useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
-import SearchForm from "@/components/module/SearchForm";
-import { TabDataGrid } from '@rsone/components';
-import SubmitButton from "@/components/button/SumitButton";
-import SaveButton from "@/components/button/SaveButton";
-import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { useAlertStore } from "@/shared/lib";
+import { statisticsInputSewSupplyRateApi } from "@/entities/statistics/api/input/statistics-input-sew-supply-rate-service";
+import { statisticsInputSewerageFinanceApi } from "@/entities/statistics/api/input/statistics-input-sewerage-finance-service";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type {
+    CauserBurdenItem,
+    CauserBurdenSaveItem,
+    CauserBurdenSaveRequest,
+    SewerageChargeItem,
+    SewerageChargeSaveItem,
+    SewerageChargeSaveRequest,
+    SewerageFinanceRequestParams,
+    SewerageFinanceSettleItem,
+    SewerageFinanceSettleSaveItem,
+    SewerageFinanceSettleSaveRequest,
+    SewerageFinanceVerificationResult,
+    SewerageUsageFeeItem,
+    SewerageUsageFeeSaveItem,
+    SewerageUsageFeeSaveRequest,
+} from "@/entities/statistics/model/input/statistics-input-sewerage-finance-interface";
+import { isInputPeriodCurrent } from "@/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface";
+import type { cancelSubmitRequest, SewerageStatusInfo } from "@/entities/statistics/model/statistics-interface";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
+
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
+import CancelSubmitButton from "@/components/button/CancelSubmitButton";
 import LastYearDataButton from "@/components/button/LastYearDataButton";
+import SaveButton from "@/components/button/SaveButton";
+import SubmitButton from "@/components/button/SumitButton";
+import VerificationResultButton from "@/components/button/VerificationResultButton";
+import DataGrid from "@/components/module/DataGrid";
+import SearchForm from "@/components/module/SearchForm";
+import { VerificationResultDialog } from "@/components/module/VerificationResultDialog";
+import { VerificationResultHistoryDialog } from "@/components/module/VerificationResultHistoryDialog";
+import type { ColumnConfig, ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { doList } from "@/components/util/column/input/DoList";
+import { CauserBurdenInpColumn } from "@/components/util/column/input/sewerageFinance/CauserBurdenInpColumn";
+import { SewerageChargeInpColumn } from "@/components/util/column/input/sewerageFinance/SewerageChargeInpColumn";
+import { SewerageFinanceSettleInpColumn } from "@/components/util/column/input/sewerageFinance/SewerageFinanceSettleInpColumn";
+import { SewerageUsageFeeInpColumn } from "@/components/util/column/input/sewerageFinance/SewerageUsageFeeInpColumn";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import { useAdminStore } from "@/store/admin-store";
 
-import { SewerageFinanceSettleInpColumn } from "@/components/util/column/input/sewerageFinance/SewerageFinanceSettleInpColumn"
-import { SewerageChargeInpColumn } from "@/components/util/column/input/sewerageFinance/SewerageChargeInpColumn"
-import { SewerageUsageFeeInpColumn } from "@/components/util/column/input/sewerageFinance/SewerageUsageFeeInpColumn"
-import { CauserBurdenInpColumn } from "@/components/util/column/input/sewerageFinance/CauserBurdenInpColumn"
+const SewerageFinanceInpTabList = [
+    SewerageFinanceSettleInpColumn,
+    SewerageChargeInpColumn,
+    SewerageUsageFeeInpColumn,
+    CauserBurdenInpColumn,
+] as const;
+
+const firstTabKey = SewerageFinanceSettleInpColumn.tabKey;
+
+const SEWERAGE_FINANCE_COLUMN_GUIDE_TAB_KEYS = Array.from(
+    new Set(SewerageFinanceInpTabList.map((tab) => tab.tabKey).filter(Boolean)),
+);
+
+type GridRowWithVerification = Record<string, string | number> & {
+    verificationResult?: SewerageFinanceVerificationResult;
+};
+
+type TabToolbarSnapshot = {
+    showSaveInToolbar: boolean;
+    showEnterableToolbarButtons: boolean;
+    showActionToolbarCard: boolean;
+};
+
+const toGridColumnInfo = (tab: (typeof SewerageFinanceInpTabList)[number]): ColumnInfo => ({
+    columns: tab.columns ?? [],
+    columnLayout: tab.columnLayout ?? [],
+});
+
+function buildSewerageFinanceSearchParam(
+    values: SearchFormValues,
+    overrides?: { mode?: string },
+): SewerageFinanceRequestParams {
+    return {
+        statsYr: values.year,
+        sewerBzmnCd: values.bsnmCd,
+        ctpvNm: values.sido,
+        sggNm: values.gugun === "ALL" ? "" : values.gugun,
+        ...(overrides?.mode ? { mode: overrides.mode } : {}),
+    };
+}
+
+const computeTabEnterable = (
+    statusInfo: SewerageStatusInfo | null | undefined,
+    periodEnterable: boolean,
+): boolean => {
+    if (statusInfo?.laeSbmsnSttsCd) {
+        if (["2", "3"].includes(statusInfo.laeSbmsnSttsCd)) {
+            return false;
+        }
+        return periodEnterable;
+    }
+    return periodEnterable;
+};
+
+function buildGugunOkForToolbar(values: SearchFormValues | null): boolean {
+    return doList.includes(values?.bsnmCd || "")
+        ? Boolean(values?.gugun && values.gugun !== "ALL")
+        : true;
+}
+
+function computeTabToolbarSnapshot(
+    statusInfo: SewerageStatusInfo | null,
+    hasRowData: boolean,
+    treatAsSearched: boolean,
+    searchContext: SearchFormValues | null,
+    periodEnterable: boolean,
+    isAdminInfo: boolean,
+): TabToolbarSnapshot {
+    const gugunOk = buildGugunOkForToolbar(searchContext);
+    const enterable = computeTabEnterable(statusInfo, periodEnterable);
+    const isSubmitted = statusInfo?.laeSbmsnSttsCd === "2";
+    const showSaveInToolbar = (enterable || isAdminInfo) && gugunOk;
+    const showEnterableToolbarButtons = enterable && gugunOk;
+    const showSubmittedInInputPeriodToolbar = isSubmitted && periodEnterable && gugunOk;
+    const showActionToolbarCard =
+        (hasRowData || treatAsSearched) &&
+        (showSaveInToolbar ||
+            showEnterableToolbarButtons ||
+            showSubmittedInInputPeriodToolbar ||
+            (isSubmitted && isAdminInfo));
+    return { showSaveInToolbar, showEnterableToolbarButtons, showActionToolbarCard };
+}
+
+function tabRowDataExists(
+    m: Map<string, Record<string, string | number>[]>,
+    tabKey: string,
+): boolean {
+    const rows = m.get(tabKey);
+    return Array.isArray(rows) && rows.length > 0;
+}
+
+function mapRegionalListToGridRows<
+    T extends { verificationResult?: SewerageFinanceVerificationResult },
+>(list: T[], ctpvNm: string): GridRowWithVerification[] {
+    return list.map((item) => {
+        const { verificationResult, ...rest } = item;
+        const row = toGridRows([{ ctpvNm, ...rest }])[0] as GridRowWithVerification;
+        if (verificationResult) row.verificationResult = verificationResult;
+        return row;
+    });
+}
+
+function normalizeGridString(value: unknown): string {
+    if (value === null || value === undefined) return "";
+    return typeof value === "string" ? value : String(value);
+}
+
+function normalizeGridRmrk(value: unknown): string | null {
+    if (value === null || value === undefined) return null;
+    const s = typeof value === "string" ? value : String(value);
+    return s.trim() === "" ? null : s;
+}
+
+function buildColumnFormatNumber(columns: { fieldName?: string; dataFormat?: string }[]) {
+    const columnFormatMap = new Map<string, string>();
+    columns.forEach((col) => {
+        if (col.fieldName && col.dataFormat) {
+            columnFormatMap.set(col.fieldName, col.dataFormat);
+        }
+    });
+
+    return (value: string | number | null | undefined, fieldName: string): number => {
+        if (value === null || value === undefined || value === "") return 0;
+        const num =
+            typeof value === "string" ? parseFloat(value.replace(/,/g, "")) : value;
+        if (isNaN(num)) return 0;
+        const format = columnFormatMap.get(fieldName);
+        if (!format) return num;
+        const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
+        return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
+    };
+}
+
+function resolveSewerageFinanceTab(tabKey: string) {
+    return {
+        isSettleTab: tabKey === SewerageFinanceSettleInpColumn.tabKey,
+        isChargeTab: tabKey === SewerageChargeInpColumn.tabKey,
+        isUsageFeeTab: tabKey === SewerageUsageFeeInpColumn.tabKey,
+        isCauserBurdenTab: tabKey === CauserBurdenInpColumn.tabKey,
+    };
+}
+
+function buildSewerageFinanceSettleSaveList(
+    currentData: Record<string, string | number>[],
+): SewerageFinanceSettleSaveItem[] {
+    const formatNumber = buildColumnFormatNumber(SewerageFinanceSettleInpColumn.columns);
+
+    return currentData.map((d) => ({
+        admdstCd: normalizeGridString(d.admdstCd),
+        sggNm: normalizeGridString(d.sggNm),
+        admdstNm: normalizeGridString(d.admdstNm),
+        cnterGovSprtAmt: formatNumber(d.cnterGovSprtAmt, "cnterGovSprtAmt"),
+        mctpvLcexpAmt: formatNumber(d.mctpvLcexpAmt, "mctpvLcexpAmt"),
+        wareaSggLclAmt: formatNumber(d.wareaSggLclAmt, "wareaSggLclAmt"),
+        sewerUseAmt: formatNumber(d.sewerUseAmt, "sewerUseAmt"),
+        orgprBrdnAmt: formatNumber(d.orgprBrdnAmt, "orgprBrdnAmt"),
+        etcIncmAmt: formatNumber(d.etcIncmAmt, "etcIncmAmt"),
+        crfwAmt: formatNumber(d.crfwAmt, "crfwAmt"),
+        lbltAmt: formatNumber(d.lbltAmt, "lbltAmt"),
+        tmplntFcltAmt: formatNumber(d.tmplntFcltAmt, "tmplntFcltAmt"),
+        tmplntMendngAmt: formatNumber(d.tmplntMendngAmt, "tmplntMendngAmt"),
+        tmplntOperKeepAmt: formatNumber(d.tmplntOperKeepAmt, "tmplntOperKeepAmt"),
+        tmplntEtcAmt: formatNumber(d.tmplntEtcAmt, "tmplntEtcAmt"),
+        swagePplFcltAmt: formatNumber(d.swagePplFcltAmt, "swagePplFcltAmt"),
+        swagePplMendngAmt: formatNumber(d.swagePplMendngAmt, "swagePplMendngAmt"),
+        swagePplOperKeepAmt: formatNumber(d.swagePplOperKeepAmt, "swagePplOperKeepAmt"),
+        swagePplEtcAmt: formatNumber(d.swagePplEtcAmt, "swagePplEtcAmt"),
+        swageImpdFcltAmt: formatNumber(d.swageImpdFcltAmt, "swageImpdFcltAmt"),
+        swageImpdMendngAmt: formatNumber(d.swageImpdMendngAmt, "swageImpdMendngAmt"),
+        swageImpdOperKeepAmt: formatNumber(d.swageImpdOperKeepAmt, "swageImpdOperKeepAmt"),
+        swageImpdFcltEtcAmt: formatNumber(d.swageImpdFcltEtcAmt, "swageImpdFcltEtcAmt"),
+        etcAcdntCrfwAmt: formatNumber(d.etcAcdntCrfwAmt, "etcAcdntCrfwAmt"),
+        etcNrcpAmt: formatNumber(d.etcNrcpAmt, "etcNrcpAmt"),
+        etcAmt: formatNumber(d.etcAmt, "etcAmt"),
+        rmrk: normalizeGridRmrk(d.rmrk),
+        fnnByWholPjtcoAmt: formatNumber(d.fnnByWholPjtcoAmt, "fnnByWholPjtcoAmt"),
+        usgByWholPjtcoAmt: formatNumber(d.usgByWholPjtcoAmt, "usgByWholPjtcoAmt"),
+        tmplntWholAmt: formatNumber(d.tmplntWholAmt, "tmplntWholAmt"),
+        wholSwagePplAmt: formatNumber(d.wholSwagePplAmt, "wholSwagePplAmt"),
+        wholSwageImpdFcltAmt: formatNumber(d.wholSwageImpdFcltAmt, "wholSwageImpdFcltAmt"),
+        etcWholAmt: formatNumber(d.etcWholAmt, "etcWholAmt"),
+    }));
+}
+
+function buildSewerageChargeSaveList(
+    currentData: Record<string, string | number>[],
+): SewerageChargeSaveItem[] {
+    const formatNumber = buildColumnFormatNumber(SewerageChargeInpColumn.columns);
+
+    return currentData.map((d) => ({
+        admdstCd: normalizeGridString(d.admdstCd),
+        sggNm: normalizeGridString(d.sggNm),
+        admdstNm: normalizeGridString(d.admdstNm),
+        anlLevyQnt: formatNumber(d.anlLevyQnt, "anlLevyQnt"),
+        levyAmt: formatNumber(d.levyAmt, "levyAmt"),
+        grssPrmcoAmt: formatNumber(d.grssPrmcoAmt, "grssPrmcoAmt"),
+        rmrk: normalizeGridRmrk(d.rmrk),
+        avgUntprcAmt: formatNumber(d.avgUntprcAmt, "avgUntprcAmt"),
+        grssUnitPrmcoAmt: formatNumber(d.grssUnitPrmcoAmt, "grssUnitPrmcoAmt"),
+        rlztnRt: formatNumber(d.rlztnRt, "rlztnRt"),
+    }));
+}
+
+function buildSewerageUsageFeeSaveList(
+    currentData: Record<string, string | number>[],
+): SewerageUsageFeeSaveItem[] {
+    const formatNumber = buildColumnFormatNumber(SewerageUsageFeeInpColumn.columns);
+
+    return currentData.map((d) => ({
+        admdstCd: normalizeGridString(d.admdstCd),
+        sggNm: normalizeGridString(d.sggNm),
+        admdstNm: normalizeGridString(d.admdstNm),
+        hshusLevyAmt: formatNumber(d.hshusLevyAmt, "hshusLevyAmt"),
+        hshusLevyQnt: formatNumber(d.hshusLevyQnt, "hshusLevyQnt"),
+        hshusUntprcAmt: formatNumber(d.hshusUntprcAmt, "hshusUntprcAmt"),
+        taskFrLevyAmt: formatNumber(d.taskFrLevyAmt, "taskFrLevyAmt"),
+        taskFrLevyQnt: formatNumber(d.taskFrLevyQnt, "taskFrLevyQnt"),
+        taskFrUntprcAmt: formatNumber(d.taskFrUntprcAmt, "taskFrUntprcAmt"),
+        fbuLevyAmt: formatNumber(d.fbuLevyAmt, "fbuLevyAmt"),
+        fbuLevyQnt: formatNumber(d.fbuLevyQnt, "fbuLevyQnt"),
+        fbuUntprcAmt: formatNumber(d.fbuUntprcAmt, "fbuUntprcAmt"),
+        bthhsFrSpcs1LevyAmt: formatNumber(d.bthhsFrSpcs1LevyAmt, "bthhsFrSpcs1LevyAmt"),
+        bthhsFrSpcs1LevyQnt: formatNumber(d.bthhsFrSpcs1LevyQnt, "bthhsFrSpcs1LevyQnt"),
+        bthhsFrSpcs1UntprcAmt: formatNumber(d.bthhsFrSpcs1UntprcAmt, "bthhsFrSpcs1UntprcAmt"),
+        bthhsFrSpcs2LevyAmt: formatNumber(d.bthhsFrSpcs2LevyAmt, "bthhsFrSpcs2LevyAmt"),
+        bthhsFrSpcs2LevyQnt: formatNumber(d.bthhsFrSpcs2LevyQnt, "bthhsFrSpcs2LevyQnt"),
+        bthhsFrSpcs2UntprcAmt: formatNumber(d.bthhsFrSpcs2UntprcAmt, "bthhsFrSpcs2UntprcAmt"),
+        induLevyAmt: formatNumber(d.induLevyAmt, "induLevyAmt"),
+        induLevyQnt: formatNumber(d.induLevyQnt, "induLevyQnt"),
+        induUntprcAmt: formatNumber(d.induUntprcAmt, "induUntprcAmt"),
+        etcLevyAmt: formatNumber(d.etcLevyAmt, "etcLevyAmt"),
+        etcLevyQnt: formatNumber(d.etcLevyQnt, "etcLevyQnt"),
+        etcLevyUntprcAmt: formatNumber(d.etcLevyUntprcAmt, "etcLevyUntprcAmt"),
+        rmrk: normalizeGridRmrk(d.rmrk),
+        levyAmt: formatNumber(d.levyAmt, "levyAmt"),
+        levyQnt: formatNumber(d.levyQnt, "levyQnt"),
+    }));
+}
+
+function buildCauserBurdenSaveList(
+    currentData: Record<string, string | number>[],
+): CauserBurdenSaveItem[] {
+    const formatNumber = buildColumnFormatNumber(CauserBurdenInpColumn.columns);
+
+    return currentData.map((d) => ({
+        admdstCd: normalizeGridString(d.admdstCd),
+        sggNm: normalizeGridString(d.sggNm),
+        admdstNm: normalizeGridString(d.admdstNm),
+        levyEvntcsCnt: formatNumber(d.levyEvntcsCnt, "levyEvntcsCnt"),
+        levyAmt: formatNumber(d.levyAmt, "levyAmt"),
+        mltvEqpmEvntcsCnt: formatNumber(d.mltvEqpmEvntcsCnt, "mltvEqpmEvntcsCnt"),
+        mltvEqpmAmt: formatNumber(d.mltvEqpmAmt, "mltvEqpmAmt"),
+        othrCstrnOthrActrCnt: formatNumber(d.othrCstrnOthrActrCnt, "othrCstrnOthrActrCnt"),
+        othrCstrnOthrActrAmt: formatNumber(d.othrCstrnOthrActrAmt, "othrCstrnOthrActrAmt"),
+        rmrk: normalizeGridRmrk(d.rmrk),
+        trgtByWholClctnAmt: formatNumber(d.trgtByWholClctnAmt, "trgtByWholClctnAmt"),
+    }));
+}
 
 // 하수도 통계 관리 > 09. 하수도재정
 const SewerageFinanceInp = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const { confirm } = useConfirm();
+    const { isAdminInfo } = useAdminStore();
 
-    // tab list
-    const SewerageFinanceInpTabList = [
-        SewerageFinanceSettleInpColumn,
-        SewerageChargeInpColumn,
-        SewerageUsageFeeInpColumn,
-        CauserBurdenInpColumn
-    ];
+    const [isLoading, setIsLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState<string>(firstTabKey);
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(
+        new Map(),
+    );
+    const [searchValues, setSearchValues] = useState<SearchFormValues | null>(null);
+    const [lastSearchedValues, setLastSearchedValues] = useState<SearchFormValues | null>(null);
+    const [hasSearched, setHasSearched] = useState(false);
+    const [inputPeriodEnterable, setInputPeriodEnterable] = useState(true);
+    const [tabStatusInfoMap, setTabStatusInfoMap] = useState<
+        Map<string, SewerageStatusInfo | null>
+    >(new Map());
+    const [tabStatsCdMap, setTabStatsCdMap] = useState<Map<string, string>>(new Map());
+    const [toolbarSnapshotByTab, setToolbarSnapshotByTab] = useState<
+        Map<string, TabToolbarSnapshot>
+    >(new Map());
+    const [columnGuidesByTab, setColumnGuidesByTab] = useState<
+        Record<string, Record<string, string>>
+    >({});
+    const [verificationHistoryOpen, setVerificationHistoryOpen] = useState(false);
+    const [verificationResultDialogOpen, setVerificationResultDialogOpen] = useState(false);
 
-    const submitExceptionFunc = () => {
-        // 예외 제출 로직
+    const searchParamRef = useRef<SewerageFinanceRequestParams | null>(null);
+    const searchDoneRef = useRef(false);
+    const periodEnterableRef = useRef(true);
+    const activeTabRef = useRef(activeTab);
+    const getGridDataRef = useRef<(() => Record<string, string | number>[]) | null>(null);
+    activeTabRef.current = activeTab;
+
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            const entries = await Promise.all(
+                SEWERAGE_FINANCE_COLUMN_GUIDE_TAB_KEYS.map(async (tabKey) => {
+                    try {
+                        const res = await statisticsApi.getColumnGuides(tabKey);
+                        if (res.status !== "success" || !Array.isArray(res.data)) {
+                            return [tabKey, {}] as const;
+                        }
+                        const next: Record<string, string> = {};
+                        for (const item of res.data) {
+                            const key = item.engColNm?.trim();
+                            const guide = item.columnGuide?.trim();
+                            if (key && guide) next[key] = guide;
+                        }
+                        return [tabKey, next] as const;
+                    } catch {
+                        return [tabKey, {}] as const;
+                    }
+                }),
+            );
+            if (cancelled) return;
+            setColumnGuidesByTab(Object.fromEntries(entries));
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
+    const commitToolbarSnapshotForLoadedTab = (
+        tabKey: string,
+        statusInfo: SewerageStatusInfo | null,
+        hasRowData: boolean,
+        searchContext: SearchFormValues,
+    ) => {
+        setToolbarSnapshotByTab((prev) => {
+            const next = new Map(prev);
+            next.set(
+                tabKey,
+                computeTabToolbarSnapshot(
+                    statusInfo,
+                    hasRowData,
+                    searchDoneRef.current,
+                    searchContext,
+                    periodEnterableRef.current,
+                    isAdminInfo,
+                ),
+            );
+            return next;
+        });
     };
 
-    const lastYearDataFunc = () => {
-        // 지난연도 데이터 가져오기 로직
+    const applyRowMap = (
+        mergeIntoExistingMap: boolean,
+        apply: (m: Map<string, Record<string, string | number>[]>) => void,
+    ) => {
+        if (mergeIntoExistingMap) {
+            setRowDataMap((prev) => {
+                const next = new Map(prev);
+                apply(next);
+                return next;
+            });
+        } else {
+            const next = new Map<string, Record<string, string | number>[]>();
+            apply(next);
+            setRowDataMap(next);
+        }
+    };
+
+    const loadActiveTabData = async (
+        tabKey: string,
+        param: SewerageFinanceRequestParams,
+        searchContext: SearchFormValues,
+        mergeIntoExistingMap: boolean,
+        updateLastSearchedValues: boolean,
+        overrides?: { mode?: string },
+    ): Promise<boolean> => {
+        const requestParam = overrides?.mode ? { ...param, mode: overrides.mode } : param;
+
+        if (tabKey === SewerageFinanceSettleInpColumn.tabKey) {
+            const response =
+                await statisticsInputSewerageFinanceApi.getSewerageFinanceSettleList(requestParam);
+            if (response.status !== "success" || !response.data) {
+                alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+                return false;
+            }
+            const { commonInfo, statusInfo, sewerageFinanceSettleList } = response.data;
+            const gridRows = mapRegionalListToGridRows(
+                (sewerageFinanceSettleList ?? []) as SewerageFinanceSettleItem[],
+                commonInfo.ctpvNm,
+            );
+
+            applyRowMap(mergeIntoExistingMap, (m) => {
+                m.set(SewerageFinanceSettleInpColumn.tabKey, gridRows);
+            });
+            setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, statusInfo));
+            setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+            if (updateLastSearchedValues) setLastSearchedValues(searchContext);
+            commitToolbarSnapshotForLoadedTab(tabKey, statusInfo, gridRows.length > 0, searchContext);
+            return true;
+        }
+
+        if (tabKey === SewerageChargeInpColumn.tabKey) {
+            const response =
+                await statisticsInputSewerageFinanceApi.getSewerageChargeList(requestParam);
+            if (response.status !== "success" || !response.data) {
+                alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+                return false;
+            }
+            const { commonInfo, statusInfo, sewerageChargeList } = response.data;
+            const gridRows = mapRegionalListToGridRows(
+                (sewerageChargeList ?? []) as SewerageChargeItem[],
+                commonInfo.ctpvNm,
+            );
+
+            applyRowMap(mergeIntoExistingMap, (m) => {
+                m.set(SewerageChargeInpColumn.tabKey, gridRows);
+            });
+            setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, statusInfo));
+            setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+            if (updateLastSearchedValues) setLastSearchedValues(searchContext);
+            commitToolbarSnapshotForLoadedTab(tabKey, statusInfo, gridRows.length > 0, searchContext);
+            return true;
+        }
+
+        if (tabKey === SewerageUsageFeeInpColumn.tabKey) {
+            const response =
+                await statisticsInputSewerageFinanceApi.getSewerageUsageFeeList(requestParam);
+            if (response.status !== "success" || !response.data) {
+                alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+                return false;
+            }
+            const { commonInfo, statusInfo, sewerageUsageFeeList } = response.data;
+            const gridRows = mapRegionalListToGridRows(
+                (sewerageUsageFeeList ?? []) as SewerageUsageFeeItem[],
+                commonInfo.ctpvNm,
+            );
+
+            applyRowMap(mergeIntoExistingMap, (m) => {
+                m.set(SewerageUsageFeeInpColumn.tabKey, gridRows);
+            });
+            setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, statusInfo));
+            setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+            if (updateLastSearchedValues) setLastSearchedValues(searchContext);
+            commitToolbarSnapshotForLoadedTab(tabKey, statusInfo, gridRows.length > 0, searchContext);
+            return true;
+        }
+
+        if (tabKey === CauserBurdenInpColumn.tabKey) {
+            const response =
+                await statisticsInputSewerageFinanceApi.getCauserBurdenList(requestParam);
+            if (response.status !== "success" || !response.data) {
+                alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+                return false;
+            }
+            const { commonInfo, statusInfo, causerBurdenList } = response.data;
+            const gridRows = mapRegionalListToGridRows(
+                (causerBurdenList ?? []) as CauserBurdenItem[],
+                commonInfo.ctpvNm,
+            );
+
+            applyRowMap(mergeIntoExistingMap, (m) => {
+                m.set(CauserBurdenInpColumn.tabKey, gridRows);
+            });
+            setTabStatusInfoMap((prev) => new Map(prev).set(tabKey, statusInfo));
+            setTabStatsCdMap((prev) => new Map(prev).set(tabKey, commonInfo.statsCd));
+            if (updateLastSearchedValues) setLastSearchedValues(searchContext);
+            commitToolbarSnapshotForLoadedTab(tabKey, statusInfo, gridRows.length > 0, searchContext);
+            return true;
+        }
+
+        alert("해당 탭 조회 API가 없습니다.");
+        return false;
+    };
+
+    const getTabGridRows = (tabKey: string): Record<string, string | number>[] =>
+        getGridDataRef.current?.() ?? rowDataMap.get(tabKey) ?? [];
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setTabStatusInfoMap(new Map());
+        setTabStatsCdMap(new Map());
+        setToolbarSnapshotByTab(new Map());
+        setActiveTab(firstTabKey);
+        activeTabRef.current = firstTabKey;
+        setLastSearchedValues(null);
+        setHasSearched(false);
+        setInputPeriodEnterable(true);
+        searchParamRef.current = null;
+        searchDoneRef.current = false;
+        periodEnterableRef.current = true;
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        if (!values.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+
+        try {
+            const periodResponse = await statisticsInputSewSupplyRateApi.checkInputPeriod(
+                values.year || "",
+            );
+            if (periodResponse.status !== "success") {
+                alert(periodResponse.message);
+                return;
+            }
+            const periods = Array.isArray(periodResponse.data) ? periodResponse.data : [];
+            const periodOk = isInputPeriodCurrent(periods);
+            periodEnterableRef.current = periodOk;
+            setInputPeriodEnterable(periodOk);
+
+            const yearChangedFromLastSearch =
+                lastSearchedValues != null &&
+                (lastSearchedValues.year ?? "") !== (values.year ?? "");
+
+            if (yearChangedFromLastSearch) {
+                setRowDataMap(new Map());
+                setTabStatusInfoMap(new Map());
+                setTabStatsCdMap(new Map());
+                setToolbarSnapshotByTab(new Map());
+                activeTabRef.current = firstTabKey;
+                setActiveTab(firstTabKey);
+            }
+
+            setIsLoading(true);
+            searchDoneRef.current = true;
+            setHasSearched(true);
+            const searchParam = buildSewerageFinanceSearchParam(values);
+            searchParamRef.current = searchParam;
+
+            await loadActiveTabData(
+                activeTabRef.current,
+                searchParam,
+                values,
+                !yearChangedFromLastSearch,
+                true,
+            );
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        const prevTabKey = activeTabRef.current;
+        const latestRowsInPrevTab = getTabGridRows(prevTabKey);
+        if (latestRowsInPrevTab.length > 0 || rowDataMap.has(prevTabKey)) {
+            setRowDataMap((prev) => {
+                const next = new Map(prev);
+                next.set(prevTabKey, latestRowsInPrevTab);
+                return next;
+            });
+        }
+
+        activeTabRef.current = tabKey;
+        setActiveTab(tabKey);
+        if (!hasSearched || !lastSearchedValues || !searchParamRef.current) return;
+        if (tabRowDataExists(rowDataMap, tabKey)) return;
+
+        try {
+            setIsLoading(true);
+            await loadActiveTabData(
+                tabKey,
+                searchParamRef.current,
+                lastSearchedValues,
+                true,
+                false,
+            );
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const lastYearDataFunc = async () => {
+        const values = lastSearchedValues ?? searchValues;
+        if (!values?.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+        if (!hasSearched) {
+            alert("먼저 데이터를 조회해주세요.");
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+            const param = buildSewerageFinanceSearchParam(values, { mode: "PRE" });
+            await loadActiveTabData(
+                activeTabRef.current,
+                param,
+                values,
+                true,
+                false,
+                { mode: "PRE" },
+            );
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const cnacelSubmitFunc = () => {
+        void (async () => {
+            try {
+                if (!(await confirm("제출된 내용을 취소하시겠습니까?"))) return;
+
+                if (!lastSearchedValues || !searchParamRef.current) {
+                    alert("먼저 조회를 진행해주세요.");
+                    return;
+                }
+
+                const userInfo = await getUserInfo();
+                const tabKey = activeTabRef.current;
+                const statsCdForTab = tabStatsCdMap.get(tabKey);
+                if (!statsCdForTab) {
+                    alert("먼저 조회를 진행해주세요.");
+                    return;
+                }
+
+                const requestData: cancelSubmitRequest = {
+                    sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+                    ctpvNm: lastSearchedValues.sido ?? "",
+                    sggNm:
+                        lastSearchedValues.gugun === "ALL"
+                            ? ""
+                            : (lastSearchedValues.gugun ?? ""),
+                    statsYr: lastSearchedValues.year ?? "",
+                    mdfrId: userInfo.userUnqId,
+                    statsCd: statsCdForTab,
+                };
+
+                const response = await statisticsApi.cancelSubmit(requestData);
+
+                if (response.status === "success") {
+                    setIsLoading(true);
+                    await loadActiveTabData(
+                        tabKey,
+                        searchParamRef.current,
+                        lastSearchedValues,
+                        false,
+                        false,
+                    );
+                    alert("제출 취소되었습니다.");
+                } else {
+                    alert(response.message ?? "제출 취소 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("제출 취소 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        })();
     };
 
     const submitFunc = () => {
@@ -36,29 +706,389 @@ const SewerageFinanceInp = () => {
     };
 
     const saveFunc = () => {
-        // 저장 로직
+        void (async () => {
+            const tabKey = activeTabRef.current;
+            const { isSettleTab, isChargeTab, isUsageFeeTab, isCauserBurdenTab } =
+                resolveSewerageFinanceTab(tabKey);
+            if (!isSettleTab && !isChargeTab && !isUsageFeeTab && !isCauserBurdenTab) {
+                alert("저장할 수 없는 탭입니다.");
+                return;
+            }
+
+            if (!lastSearchedValues || !searchParamRef.current) {
+                alert("먼저 조회를 진행해주세요.");
+                return;
+            }
+
+            if (!buildGugunOkForToolbar(lastSearchedValues)) {
+                alert("시군구를 선택해주세요.");
+                return;
+            }
+
+            if (!(await confirm("저장 하시겠습니까?"))) return;
+
+            const currentData = getTabGridRows(tabKey);
+            if (!currentData.length) {
+                alert("저장할 데이터가 없습니다.");
+                return;
+            }
+
+            const baseRequest = {
+                statsYr: lastSearchedValues.year ?? "",
+                ctpvNm: lastSearchedValues.sido ?? "",
+                sggNm:
+                    lastSearchedValues.gugun === "ALL"
+                        ? ""
+                        : (lastSearchedValues.gugun ?? ""),
+                sewerBzmnCd: lastSearchedValues.bsnmCd ?? "",
+            };
+
+            try {
+                setIsLoading(true);
+                const userInfo = await getUserInfo();
+
+                if (isSettleTab) {
+                    const param: SewerageFinanceSettleSaveRequest = {
+                        ...baseRequest,
+                        userId: userInfo.userUnqId,
+                        saveList: buildSewerageFinanceSettleSaveList(currentData),
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
+                    };
+                    const response =
+                        await statisticsInputSewerageFinanceApi.saveSewerageFinanceSettle(param);
+                    if (response.status === "success") {
+                        await loadActiveTabData(
+                            tabKey,
+                            searchParamRef.current,
+                            lastSearchedValues,
+                            false,
+                            false,
+                        );
+                        alert("저장되었습니다.");
+                    } else {
+                        alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                    }
+                    return;
+                }
+
+                if (isChargeTab) {
+                    const param: SewerageChargeSaveRequest = {
+                        ...baseRequest,
+                        userId: userInfo.userUnqId,
+                        saveList: buildSewerageChargeSaveList(currentData),
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
+                    };
+                    const response =
+                        await statisticsInputSewerageFinanceApi.saveSewerageCharge(param);
+                    if (response.status === "success") {
+                        await loadActiveTabData(
+                            tabKey,
+                            searchParamRef.current,
+                            lastSearchedValues,
+                            false,
+                            false,
+                        );
+                        alert("저장되었습니다.");
+                    } else {
+                        alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                    }
+                    return;
+                }
+
+                if (isUsageFeeTab) {
+                    const param: SewerageUsageFeeSaveRequest = {
+                        ...baseRequest,
+                        userId: userInfo.userUnqId,
+                        saveList: buildSewerageUsageFeeSaveList(currentData),
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
+                    };
+                    const response =
+                        await statisticsInputSewerageFinanceApi.saveSewerageUsageFee(param);
+                    if (response.status === "success") {
+                        await loadActiveTabData(
+                            tabKey,
+                            searchParamRef.current,
+                            lastSearchedValues,
+                            false,
+                            false,
+                        );
+                        alert("저장되었습니다.");
+                    } else {
+                        alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                    }
+                    return;
+                }
+
+                const param: CauserBurdenSaveRequest = {
+                    ...baseRequest,
+                    userId: userInfo.userUnqId,
+                    saveList: buildCauserBurdenSaveList(currentData),
+                    ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
+                };
+                const response = await statisticsInputSewerageFinanceApi.saveCauserBurden(param);
+                if (response.status === "success") {
+                    await loadActiveTabData(
+                        tabKey,
+                        searchParamRef.current,
+                        lastSearchedValues,
+                        false,
+                        false,
+                    );
+                    alert("저장되었습니다.");
+                } else {
+                    alert(response.message || "데이터 저장 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("데이터 저장 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        })();
     };
 
-    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const openVerificationHistoryDialog = () => {
+        const ctx = lastSearchedValues ?? searchValues;
+        const statsCd = tabStatsCdMap.get(activeTab);
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !statsCd) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+        setVerificationHistoryOpen(true);
+    };
+
+    const verificationQueryContext = (() => {
+        const ctx = lastSearchedValues ?? searchValues;
+        const statsCd = tabStatsCdMap.get(activeTab);
+        if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd || !statsCd) return null;
+        return {
+            sewerBzmnCd: ctx.bsnmCd,
+            ctpvNm: ctx.sido,
+            sggNm: ctx.gugun === "ALL" ? "" : (ctx.gugun ?? ""),
+            statsYr: ctx.year,
+            statsCd,
+        };
+    })();
+
+    const columnInfoByTab = useMemo(() => {
+        const map = new Map<string, ColumnInfo>();
+        for (const tab of SewerageFinanceInpTabList) {
+            const tabKey = tab.tabKey;
+            const canEdit =
+                computeTabEnterable(
+                    tabStatusInfoMap.get(tabKey) ?? null,
+                    inputPeriodEnterable,
+                ) || isAdminInfo;
+            const rawColumns = (tab.columns ?? []) as ColumnConfig[];
+            const base = canEdit
+                ? rawColumns
+                : rawColumns.map((col) => ({ ...col, editable: false as const }));
+            const columns = base.map((col) => {
+                const guide = columnGuidesByTab[tabKey]?.[col.fieldName]?.trim();
+                return guide ? { ...col, tooltip: guide } : col;
+            });
+            map.set(tabKey, {
+                columns,
+                columnLayout: tab.columnLayout ?? [],
+            });
+        }
+        return map;
+    }, [tabStatusInfoMap, inputPeriodEnterable, isAdminInfo, columnGuidesByTab]);
+
+    const activeTabStatus = tabStatusInfoMap.get(activeTab) ?? null;
+    const activeTabToolbar =
+        toolbarSnapshotByTab.get(activeTab) ??
+        computeTabToolbarSnapshot(
+            activeTabStatus,
+            tabRowDataExists(rowDataMap, activeTab),
+            hasSearched,
+            lastSearchedValues,
+            inputPeriodEnterable,
+            isAdminInfo,
+        );
+    const { showSaveInToolbar, showEnterableToolbarButtons, showActionToolbarCard } =
+        activeTabToolbar;
+
+    const verificationCellStyle = ({
+        fieldName,
+        row,
+    }: {
+        fieldName: string;
+        row: Record<string, string | number>;
+    }): string | undefined => {
+        const verification = (row as GridRowWithVerification).verificationResult;
+        if (!verification) return;
+        const errors = verification[fieldName];
+        if (Array.isArray(errors) && errors.length > 0) {
+            const hasImr = errors.some((e) => e.vrfcCd === "IMR" || e.vrfcCd === "HB");
+            return hasImr ? "rg-cell-verify-error-imr" : "rg-cell-verify-error";
+        }
+    };
+
+    const verificationCellTooltip = ({
+        fieldName,
+        row,
+    }: {
+        fieldName: string;
+        row: Record<string, string | number>;
+    }): string | undefined => {
+        const verification = (row as GridRowWithVerification).verificationResult;
+        if (!verification) return;
+        const errors = verification[fieldName];
+        if (Array.isArray(errors) && errors.length > 0) {
+            return errors
+                .map((e) => {
+                    const prefix =
+                        e.vrfcCd === "IMR"
+                            ? "IMR검증 - "
+                            : e.vrfcCd === "NV"
+                              ? "일반검증 - "
+                              : "HB검증 - ";
+                    return `${prefix}${e.rsnExpln}(검증 기준값: ${e.compVlCn} / 현재 입력값: ${e.nowVlCn})`;
+                })
+                .filter(Boolean)
+                .join("\n");
+        }
+    };
 
     return (
         <>
-            <SearchForm />
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <SubmitExceptionButton SubmitExceptionFunc={submitExceptionFunc} />
-                    <LastYearDataButton getLastYearDataFunc={lastYearDataFunc} />
-                    <SubmitButton submitFunc={submitFunc} />
-                    <SaveButton saveFunc={saveFunc} />
+            <div className="relative">
+                <SearchForm
+                    onSubmit={handleSearch}
+                    onReset={handleReset}
+                    onValuesChange={setSearchValues}
+                />
+                {showActionToolbarCard && (
+                    <div className="card !py-0">
+                        <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
+                            <VerificationResultButton
+                                VerificationResultButtonFunc={openVerificationHistoryDialog}
+                            />
+                            {showEnterableToolbarButtons && (
+                                <>
+                                    <LastYearDataButton
+                                        getLastYearDataFunc={() => void lastYearDataFunc()}
+                                    />
+                                    <SubmitButton submitFunc={submitFunc} />
+                                </>
+                            )}
+                            {activeTabStatus?.laeSbmsnSttsCd === "2" && (
+                                <CancelSubmitButton cnacelSubmitFunc={cnacelSubmitFunc} />
+                            )}
+                            {showSaveInToolbar && <SaveButton saveFunc={saveFunc} />}
+                        </div>
+                    </div>
+                )}
+                {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>
+                )}
+                <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                    <Tabs
+                        value={activeTab}
+                        onValueChange={(v) => void handleActiveTabChange(v)}
+                        className="w-full"
+                        variant="default"
+                    >
+                        <TabsList>
+                            {SewerageFinanceInpTabList.map((info) => (
+                                <TabsTrigger key={info.tabKey} value={info.tabKey}>
+                                    {info.tabLabel || info.tabKey}
+                                </TabsTrigger>
+                            ))}
+                        </TabsList>
+                        {SewerageFinanceInpTabList.map((info) => {
+                            const tabKey = info.tabKey;
+                            const rowData = rowDataMap.get(tabKey) ?? [];
+                            const tabEnterableForGrid =
+                                computeTabEnterable(
+                                    tabStatusInfoMap.get(tabKey) ?? null,
+                                    inputPeriodEnterable,
+                                ) || isAdminInfo;
+                            const gugunOk = buildGugunOkForToolbar(lastSearchedValues);
+                            const tabStatusInfo = tabStatusInfoMap.get(tabKey) ?? null;
+
+                            return (
+                                <TabsContent key={tabKey} value={tabKey}>
+                                    <DataGrid
+                                        key={`${tabKey}-${tabEnterableForGrid ? "enterable" : "readonly"}`}
+                                        columnInfo={
+                                            columnInfoByTab.get(tabKey) ?? toGridColumnInfo(info)
+                                        }
+                                        rowStartNum={info.rowStartNum}
+                                        excelExportFileSuffix={info.tabLabel || tabKey}
+                                        rowData={rowData}
+                                        setRowData={(updater) => {
+                                            setRowDataMap((prev) => {
+                                                const next = new Map(prev);
+                                                const cur = next.get(tabKey) ?? [];
+                                                const n =
+                                                    typeof updater === "function"
+                                                        ? updater(cur)
+                                                        : updater;
+                                                next.set(tabKey, n);
+                                                return next;
+                                            });
+                                        }}
+                                        showHeaderCheckbox={false}
+                                        fixedColumns={info.fixedColumns}
+                                        enableSort={false}
+                                        statusInfo={tabStatusInfo}
+                                        isExcelImport={
+                                            tabRowDataExists(rowDataMap, tabKey) &&
+                                            tabEnterableForGrid &&
+                                            gugunOk
+                                        }
+                                        isExcelExport
+                                        cellStyleCallback={verificationCellStyle}
+                                        cellTooltipCallback={verificationCellTooltip}
+                                        getGridDataRef={
+                                            activeTab === tabKey ? getGridDataRef : undefined
+                                        }
+                                    />
+                                </TabsContent>
+                            );
+                        })}
+                    </Tabs>
                 </div>
             </div>
-            <TabDataGrid 
-                columnInfo={SewerageFinanceInpTabList} 
-                rowDataMap={rowDataMap} 
-                setRowDataMap={setRowDataMap} 
+            <VerificationResultHistoryDialog
+                open={verificationHistoryOpen}
+                onOpenChange={setVerificationHistoryOpen}
+                queryContext={verificationQueryContext}
+                onExceptionResetSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values || !searchParamRef.current) return;
+                    await loadActiveTabData(
+                        activeTabRef.current,
+                        searchParamRef.current,
+                        values,
+                        true,
+                        false,
+                    );
+                }}
+            />
+            <VerificationResultDialog
+                open={verificationResultDialogOpen}
+                onOpenChange={setVerificationResultDialogOpen}
+                queryContext={verificationQueryContext}
+                onExceptionSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values || !searchParamRef.current) return;
+                    await loadActiveTabData(
+                        activeTabRef.current,
+                        searchParamRef.current,
+                        values,
+                        true,
+                        false,
+                    );
+                }}
             />
         </>
     );
 };
 
-export default SewerageFinanceInp;
\ No newline at end of file
+export default SewerageFinanceInp;
diff --git a/apps/st/src/components/statistics/input/SeweragePenetrationRateInp.tsx b/apps/st/src/components/statistics/input/SeweragePenetrationRateInp.tsx
index 6c660e77b..50435dbb7 100644
--- a/apps/st/src/components/statistics/input/SeweragePenetrationRateInp.tsx
+++ b/apps/st/src/components/statistics/input/SeweragePenetrationRateInp.tsx
@@ -1,45 +1,97 @@
-import { useState, useMemo, useRef } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 
-import SearchForm from "@/components/module/SearchForm";
-// import { DataGrid } from "@rsone/components";
-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 CancelSubmitButton from "@/components/button/CancelSubmitButton";
-import { LoadingWithAnimation } from "@common/components";
-import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
-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 { 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,
-    SewerageSupplyRateRequestParams,
-    SewerageSupplyRateSaveItem,
-    SewerageSupplyRateVerificationResult,
-    SewerageSupplyRateSaveRequest,
-    SewerageSupplyRateStatusInfo,
-} from "@/entities/statistics/model/statistics-sewage-supply-rate-input-interface";
-import type { cancelSubmitRequest } from "@/entities/statistics/model/statistics-interface";
+import { useAlertStore, useGlobalProgressStore, useStatisticsInputToolbarGroupGate } from "@/shared/lib";
+import {
+    STATISTICS_INPUT_URL_PATH,
+    verificationSearchToFormValues,
+} from "@/shared/lib/stats-cd-input-navigation";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { statisticsInputSewSupplyRateApi } from "@/entities/statistics/api/input/statistics-input-sew-supply-rate-service";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import {
+    type CheckInputPeriodItem,
+    getVerificationPeriodActionBlockedMessage,
+    isInputPeriodCurrent,
+    type SewerageSupplyRateItem,
+    type SewerageSupplyRateRequestParams,
+    type SewerageSupplyRateSaveItem,
+    type SewerageSupplyRateSaveRequest,
+    type SewerageSupplyRateVerificationResult,
+} from "@/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface";
 import type { StatisticsInputSubmitInfoFormData } from "@/entities/statistics/model/statistics-input-submit-info-schema";
-import { SeweragePenetrationRateInpColumn } from "@/components/util/column/input/SeweragePenetrationRateInpColumn";
+import type {
+    cancelSubmitRequest,
+    ImrStatusResponse,
+    SewerageStatusInfo,
+    SubmitExceptionRequest,
+} from "@/entities/statistics/model/statistics-interface";
+import { LoadingWithAnimation } from "@common/components";
+
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
+import SubmitDailog from "./SubmitDailog";
+
+import CancelSubmitButton from "@/components/button/CancelSubmitButton";
+import LastYearDataButton from "@/components/button/LastYearDataButton";
+import SaveButton from "@/components/button/SaveButton";
+import SubmitButton from "@/components/button/SumitButton";
+import VerificationResultButton from "@/components/button/VerificationResultButton";
+// import { DataGrid } from "@rsone/components";
+import DataGrid from "@/components/module/DataGrid";
+import SearchForm from "@/components/module/SearchForm";
+import { openVerificationResultDialogIfNeeded } from "@/components/module/post-submit-verification-results";
+import { VerificationResultDialog } from "@/components/module/VerificationResultDialog";
+import { VerificationResultHistoryDialog } from "@/components/module/VerificationResultHistoryDialog";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
 import { doList } from "@/components/util/column/input/DoList";
+import { SeweragePenetrationRateInpColumn } from "@/components/util/column/input/SeweragePenetrationRateInpColumn";
+import { getFooterSummary } from "@/components/util/grid/footerSummary";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import { useAdminStore } from "@/store/admin-store";
+import { useStatisticsInputFocusStore } from "@/store/statistics-input-focus-store";
+import { useTabStore } from "@/store/tab-store";
 
 
 type GridRowWithVerification = Record<string, string | number> & {
     verificationResult?: SewerageSupplyRateVerificationResult;
 };
 
+/** 컬럼 가이드 API 조회용 통계코드 (하수도 보급률) */
+const SEWERAGE_PENETRATION_COLUMN_GUIDE_STATS_CD = "ST00010001";
+
+// const hasVerificationErrors = (verification?: SewerageSupplyRateVerificationResult | null): boolean => {
+//     if (!verification) return false;
+//     return Object.values(verification).some((errors) => Array.isArray(errors) && errors.length > 0);
+// };
+
+const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+/** IMR 상태가 COMPLETED 이고 job_prog 가 100일 때까지 폴링 */
+async function waitForImrJobCompleted(
+    jobId: string,
+    getStatus: (id: string) => Promise<ImrStatusResponse>,
+    options?: {
+        pollIntervalMs?: number;
+        maxAttempts?: number;
+        onProgress?: (jobProgress: number) => void;
+    },
+): Promise<void> {
+    const pollIntervalMs = options?.pollIntervalMs ?? 2000;
+    const maxAttempts = options?.maxAttempts ?? 150;
+    for (let i = 0; i < maxAttempts; i++) {
+        const res = await getStatus(jobId);
+        options?.onProgress?.(Math.max(0, Math.min(100, Number(res.job_prog) || 0)));
+        if (res.status === "COMPLETED" && Number(res.job_prog) === 100) return;
+        if (res.status === "FAILED" || res.status === "ERROR" || res.status === "CANCELLED") {
+            throw new Error(res.error_msg || `IMR 검증이 ${res.status} 상태로 종료되었습니다.`);
+        }
+        await sleep(pollIntervalMs);
+    }
+    throw new Error("IMR 검증 완료 대기 시간이 초과되었습니다.");
+}
+
 function getSewerageSupplyRateParams(
     values: SearchFormValues,
     overrides?: { yr?: string; demoYr?: string; mode?: string }
@@ -53,6 +105,14 @@ function getSewerageSupplyRateParams(
     };
 }
 
+function normalizeGridString(value: unknown): string | null {
+    if (typeof value !== "string") {
+        return null;
+    }
+
+    return value.trim() === "" ? null : value;
+}
+
 // 하수도 통계 관리 > 01. 하수도 보급률
 const SeweragePenetrationRateInp = () => {
     const { setMessage: alert } = useAlertStore((state) => state);
@@ -62,13 +122,78 @@ const SeweragePenetrationRateInp = () => {
     const [isEnterable, setIsEnterable] = useState<boolean>(true);
     const [lastSearchedYear, setLastSearchedYear] = useState<string | null>(null);
     const [lastSearchedValues, setLastSearchedValues] = useState<SearchFormValues | null>(null);
-    const [statusInfo, setStatusInfo] = useState<SewerageSupplyRateStatusInfo | null>(null);
+    const [statusInfo, setStatusInfo] = useState<SewerageStatusInfo | null>(null);
+    /** 마지막 조회 시 check-input-period 응답 (검증기간 여부 판단) */
+    const [periodCheckList, setPeriodCheckList] = useState<CheckInputPeriodItem[]>([]);
     const [showDailog, setShowDailog] = useState<boolean>(false);
+    const [verificationHistoryOpen, setVerificationHistoryOpen] = useState(false);
+    const [verificationResultDialogOpen, setVerificationResultDialogOpen] = useState(false);
+    /** 예외제출 버튼으로 연 다이얼로그인지 (확인 시 executeSubmit 대신 SubmitExceptionFunc 경로) */
+    const [isExceptionSubmitFlow, setIsExceptionSubmitFlow] = useState(false);
     const [statsCd, setStatsCd] = useState<string>('');
+    /** `engColNm` → `columnGuide` (헤더 hover) */
+    const [columnGuidesByEngCol, setColumnGuidesByEngCol] = useState<Record<string, string>>({});
     const [footerFromApi, setFooterFromApi] = useState<{ sewerBzmnWholPpltnCnt?: number; sewerBzmnDomplWholPpltnCnt?: number; sewerBzmnFrgnrWholPpltnCnt?: number; sewerBzmnArea?: number } | null>(null);
     const { confirm } = useConfirm();
+    const showGlobalProgress = useGlobalProgressStore((state) => state.show);
+    const setGlobalProgress = useGlobalProgressStore((state) => state.setProgress);
+    const setGlobalProgressLabel = useGlobalProgressStore((state) => state.setLabel);
+    const hideGlobalProgress = useGlobalProgressStore((state) => state.hide);
+    const globalProgressVisible = useGlobalProgressStore((state) => state.visible);
+
+    const postVerificationSearchRef = useRef<SearchFormValues | null>(null);
+    const [verificationSearchDefaults, setVerificationSearchDefaults] =
+        useState<SearchFormValues | null>(null);
+    const [searchFormRemountKey, setSearchFormRemountKey] = useState(0);
+
+    const activeTabId = useTabStore((s) => s.activeTabId);
+    const inputFocusNonce = useStatisticsInputFocusStore((s) => s.nonce);
+
+    useLayoutEffect(() => {
+        if (activeTabId !== STATISTICS_INPUT_URL_PATH.SEWERAGE_PENETRATION_RATE) {
+            return;
+        }
+        const pending = useStatisticsInputFocusStore
+            .getState()
+            .takePendingForUrl(STATISTICS_INPUT_URL_PATH.SEWERAGE_PENETRATION_RATE);
+        if (!pending?.search) return;
+        const values = verificationSearchToFormValues(pending.search);
+        setVerificationSearchDefaults(values);
+        postVerificationSearchRef.current = values;
+        setSearchFormRemountKey((k) => k + 1);
+    }, [activeTabId, inputFocusNonce]);
+
+    useEffect(() => {
+        if (activeTabId !== STATISTICS_INPUT_URL_PATH.SEWERAGE_PENETRATION_RATE) {
+            return;
+        }
+        let cancelled = false;
+        void (async () => {
+            try {
+                const res = await statisticsApi.getColumnGuides(SEWERAGE_PENETRATION_COLUMN_GUIDE_STATS_CD);
+                if (cancelled) return;
+                if (res.status !== "success" || !Array.isArray(res.data)) {
+                    setColumnGuidesByEngCol({});
+                    return;
+                }
+                const next: Record<string, string> = {};
+                for (const item of res.data) {
+                    const key = item.engColNm?.trim();
+                    const guide = item.columnGuide?.trim();
+                    if (key && guide) next[key] = guide;
+                }
+                setColumnGuidesByEngCol(next);
+            } catch {
+                if (!cancelled) setColumnGuidesByEngCol({});
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [activeTabId]);
 
     const { isAdminInfo } = useAdminStore();
+    const toolbarGroupAllowed = useStatisticsInputToolbarGroupGate();
 
     const getGridDataRef = useRef<(() => Record<string, string | number>[]) | null>(null);
 
@@ -81,28 +206,41 @@ const SeweragePenetrationRateInp = () => {
     });
 
     // 최상위 관리자일땐 모든 상황에서 edit 가능하게 수정 필요.
+
     const columnInfo = useMemo(() => {
         const { columns, columnLayout } = SeweragePenetrationRateInpColumn;
         const base = (isEnterable || isAdminInfo) ? columns : columns.map((col) => ({ ...col, editable: false as const }));
 
+        const withHeaderTooltips = base.map((col) => {
+            const guide = columnGuidesByEngCol[col.fieldName]?.trim();
+            return {
+                ...col,
+                tooltip: guide && guide.length > 0 ? guide : undefined,
+            };
+        });
+
         return {
             columnLayout,
-            columns: base.map((col) => {
+            columns: withHeaderTooltips.map((col) => {
                 if (col.fieldName === 'pbadmsWholPpltnCnt') return { ...col, footer: footerWithApiDefault('sewerBzmnWholPpltnCnt', '#,##0') };
                 if (col.fieldName === 'domplWholPpltnCnt') return { ...col, footer: footerWithApiDefault('sewerBzmnDomplWholPpltnCnt', '#,##0') };
                 if (col.fieldName === 'frgnrWholPpltnCnt') return { ...col, footer: footerWithApiDefault('sewerBzmnFrgnrWholPpltnCnt', '#,##0') };
-                if (col.fieldName === 'sewerBzmnArea') return { ...col, footer: footerWithApiDefault('sewerBzmnArea', '#,##0.000') };
+                // 그리드 필드명은 refArea(행정참고자료면적). API commonInfo.sewerBzmnArea와 매핑
+                if (col.fieldName === 'refArea') return { ...col, footer: footerWithApiDefault('sewerBzmnArea', '#,##0.000') };
                 return col;
             }),
         };
-    }, [isEnterable, isAdminInfo, footerFromApi]);
+    }, [isEnterable, isAdminInfo, footerFromApi, columnGuidesByEngCol]);
 
     const handleReset = () => {
         setRowData([]);
         setStatusInfo(null);
+        setPeriodCheckList([]);
         setLastSearchedYear(null);
         setLastSearchedValues(null);
         setFooterFromApi(null);
+        setVerificationSearchDefaults(null);
+        setSearchFormRemountKey((k) => k + 1);
     };
 
     const fetchSewerageSupplyRate = async (params: SewerageSupplyRateRequestParams, isEnterable: boolean) => {
@@ -112,11 +250,10 @@ const SeweragePenetrationRateInp = () => {
             if (response.status === 'success' && response.data) {
                 const commonInfo = response.data.commonInfo;
                 const statusInfo = response.data.statusInfo;
-                const convertedData: SewerageSupplyRateItem[] = response.data.sewerageSupplyRateList.map((d) => ({
+                const convertedData: SewerageSupplyRateItem[] = response.data.sewerageSupplyRateList.map((d: SewerageSupplyRateItem) => ({
                     ...d,
                     ctpvNm: commonInfo.ctpvNm,
                     spcCtpnRgnCn: d.spcCtpnRgnCn === '' || d.spcCtpnRgnCn === null ? '해당없음' : d.spcCtpnRgnCn,
-                    swagePplPsplyRt: commonInfo.swagePplPsplyRt,
                 }));
                 setRowData(
                     convertedData.map((d) => {
@@ -151,7 +288,8 @@ const SeweragePenetrationRateInp = () => {
             } else {
                 alert(response.message);
             }
-        } catch {
+        } catch (error) {
+            console.log(error);
             alert('데이터 조회 중 오류가 발생했습니다.');
             setRowData([]);
             setStatusInfo(null);
@@ -171,8 +309,9 @@ const SeweragePenetrationRateInp = () => {
             const response = await statisticsInputSewSupplyRateApi.checkInputPeriod(values.year || '');
 
             if (response.status === 'success') {
-                const checkEnterable = response.data;
-                // setIsEnterable(response.data);
+                const periods = Array.isArray(response.data) ? response.data : [];
+                setPeriodCheckList(periods);
+                const checkEnterable = isInputPeriodCurrent(periods);
                 setLastSearchedYear(values.year || null);
                 await fetchSewerageSupplyRate(getSewerageSupplyRateParams(values), checkEnterable);
                 setLastSearchedValues(values);
@@ -184,8 +323,52 @@ const SeweragePenetrationRateInp = () => {
         }
     };
 
-    const SubmitExceptionFunc = () => {
-        // 예외 제출 로직
+    useEffect(() => {
+        const values = postVerificationSearchRef.current;
+        if (!values) return;
+        postVerificationSearchRef.current = null;
+        void handleSearch(values);
+
+    }, [searchFormRemountKey]);
+
+    const SubmitExceptionFunc = async (submitInfo: StatisticsInputSubmitInfoFormData) => {
+        const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+        if (verificationBlocked) {
+            alert(verificationBlocked);
+            return;
+        }
+        const userInfo = await getUserInfo();
+
+        const params: SubmitExceptionRequest = {
+            ...submitInfo,
+            sewerBzmnCd: searchValues?.bsnmCd ?? '',
+            ctpvNm: searchValues?.sido ?? '',
+            sggNm: searchValues?.gugun === "ALL" ? "" : (searchValues?.gugun ?? ''),
+            statsYr: searchValues?.year ?? '',
+            userId: userInfo.userUnqId,
+            statsCd: statsCd,
+        };
+
+        // if (isAdminInfo) {
+        //     params.superAdmin = 'superAdmin';
+        // }
+
+        try {
+            setIsLoading(true);
+
+            const response = await statisticsApi.submitException(params);
+
+            if (response.status === 'success') {
+                await fetchSewerageSupplyRate(getSewerageSupplyRateParams(searchValues ?? {}), false);
+                alert('제출되었습니다.');
+            } else {
+                alert(response.message || '데이터 제출 중 오류가 발생했습니다.');
+            }
+        } catch {
+            alert('데이터 제출 중 오류가 발생했습니다.');
+        } finally {
+            setIsLoading(false);
+        }
     };
 
     const getLastYearDataFunc = async (values: SearchFormValues) => {
@@ -203,33 +386,57 @@ const SeweragePenetrationRateInp = () => {
         await fetchSewerageSupplyRate(getSewerageSupplyRateParams(values, { mode: 'PRE' }), true);
     };
 
-    const submitFunc = async () => {
-        const isError = rowData.filter((d) => d.verificationResult);
-        if (isError.length > 0) {
-            alert(`데이터에 오류가 있습니다.
-                수정 후 제출해주세요.`);
-            return;
-        }
-        if (await confirm('제출 하시겠습니까?')) {
-            setShowDailog(true);
+    const submitFunc = async (isException: boolean) => {
+        if (!isException) {
+            // const isError = rowData.filter((d) =>
+            //     hasVerificationErrors((d as GridRowWithVerification).verificationResult)
+            // );
+
+            // if (isError.length > 0) {
+            //     alert(`데이터에 오류가 있습니다.
+            //         수정 후 제출해주세요.`);
+            //     return;
+            // }
+            if (await confirm('제출 하시겠습니까?')) {
+                setIsExceptionSubmitFlow(false);
+                setShowDailog(true);
+            }
+        } else {
+            if (await confirm('예외 제출 시 검증 결과에 오류가 있어도 제출 처리됩니다.')) {
+                setIsExceptionSubmitFlow(true);
+                setShowDailog(true);
+            }
         }
     };
 
+    const executeExceptionSubmit = async (submitInfo: StatisticsInputSubmitInfoFormData) => {
+        await SubmitExceptionFunc(submitInfo);
+    };
+
     const executeSubmit = async (submitInfo: StatisticsInputSubmitInfoFormData) => {
+        const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+        if (verificationBlocked) {
+            alert(verificationBlocked);
+            return;
+        }
         try {
-            setIsLoading(true);
+            showGlobalProgress({ label: '서버에 요청 중...', progress: 0 });
             const userInfo = await getUserInfo();
             const currentData = getGridDataRef.current?.();
+
             if (!currentData || currentData.length === 0) {
                 alert('제출할 데이터가 없습니다.');
                 return;
             }
+
             const columnFormatMap = new Map<string, string>();
+
             SeweragePenetrationRateInpColumn.columns.forEach((col) => {
                 if (col.fieldName && col.dataFormat) {
                     columnFormatMap.set(col.fieldName, col.dataFormat);
                 }
             });
+
             const formatNumber = (value: string | number | null | undefined, fieldName: string): number => {
                 if (value === null || value === undefined || value === '') return 0;
                 const num = typeof value === 'string' ? parseFloat(value.replace(/,/g, '')) : value;
@@ -239,12 +446,14 @@ const SeweragePenetrationRateInp = () => {
                 const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
                 return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
             };
+
             const convertedData: SewerageSupplyRateSaveItem[] = currentData.map((d) => ({
-                sggNm: (d.sggNm as string) || null,
-                admdstCd: d.admdstCd as string,
-                admdstNm: d.admdstNm as string,
-                trbtrNm: d.trbtrNm as string,
-                spcCtpnRgnCn: d.spcCtpnRgnCn === '해당없음' ? null : (d.spcCtpnRgnCn as string | null),
+                sggNm: normalizeGridString(d.sggNm),
+                admdstCd: normalizeGridString(d.admdstCd),
+                admdstNm: normalizeGridString(d.admdstNm),
+                trbtrNm: normalizeGridString(d.trbtrNm),
+                spcCtpnRgnCn:
+                    d.spcCtpnRgnCn === '해당없음' ? null : normalizeGridString(d.spcCtpnRgnCn),
                 ts1SwtrmtPpltnCnt: formatNumber(d.ts1SwtrmtPpltnCnt, 'ts1SwtrmtPpltnCnt'),
                 ts2SwtrmtPpltnCnt: formatNumber(d.ts2SwtrmtPpltnCnt, 'ts2SwtrmtPpltnCnt'),
                 ts3SwtrmtPpltnCnt: formatNumber(d.ts3SwtrmtPpltnCnt, 'ts3SwtrmtPpltnCnt'),
@@ -257,7 +466,7 @@ const SeweragePenetrationRateInp = () => {
                 drtwPrcsPpltnCnt: formatNumber(d.drtwPrcsPpltnCnt, 'drtwPrcsPpltnCnt'),
                 spctnkPpltnCnt: formatNumber(d.spctnkPpltnCnt, 'spctnkPpltnCnt'),
                 staaExcpArea: formatNumber(d.staaExcpArea, 'staaExcpArea'),
-                rmrk: (d.rmrk as string) ?? '',
+                rmrk: normalizeGridString(d.rmrk),
                 wholPpltnCnt: formatNumber(d.wholPpltnCnt, 'wholPpltnCnt'),
                 wholArea: formatNumber(d.wholArea, 'wholArea'),
                 wholSwtrmtPpltnCnt: formatNumber(d.wholSwtrmtPpltnCnt, 'wholSwtrmtPpltnCnt'),
@@ -268,10 +477,11 @@ const SeweragePenetrationRateInp = () => {
                 altdPrcsPsplyRt: formatNumber(d.altdPrcsPsplyRt, 'altdPrcsPsplyRt'),
                 sewerInstlRt: formatNumber(d.sewerInstlRt, 'sewerInstlRt'),
             }));
+
             const requestData: SewerageSupplyRateSaveRequest = {
                 sewerBzmnCd: searchValues?.bsnmCd ?? '',
                 ctpvNm: searchValues?.sido ?? '',
-                sggNm: searchValues?.gugun ?? '',
+                sggNm: searchValues?.gugun === "ALL" ? "" : (searchValues?.gugun ?? ''),
                 statsYr: searchValues?.year ?? '',
                 userId: userInfo.userUnqId,
                 submitList: convertedData,
@@ -286,24 +496,108 @@ const SeweragePenetrationRateInp = () => {
                 laeIdfrTelNo: submitInfo.laeIdfrTelNo,
             };
 
+            setGlobalProgressLabel('일반 검증 진행 중...');
             const response = await statisticsInputSewSupplyRateApi.submitSewerageSupplyRate(requestData);
             if (response.status === 'success') {
-                await fetchSewerageSupplyRate(getSewerageSupplyRateParams(searchValues ?? {}), false);
-                alert('제출되었습니다.');
+                setGlobalProgress(50);
+
+                if (response.data.finalStatus === '5') {
+                    setGlobalProgressLabel('IMR 검증 진행 중...');
+                    const imrParam = {
+                        user_id: userInfo.userUnqId,
+                        sewer_bzmn_cd: searchValues?.bsnmCd ?? '',
+                        stats_cd: statsCd,
+                        stats_yr: searchValues?.year ?? '',
+                        lae_sbmsn_stts_cd: (statusInfo?.laeSbmsnSttsCd === '4' ? '4' : '2'),
+                        gen_verify_stts_cd: response.data.nvpassed ? '1' : '2',
+                    };
+
+                    try {
+                        const imrResponse = await statisticsApi.callImrService(imrParam);
+                        if (imrResponse.job_id) {
+                            await waitForImrJobCompleted(imrResponse.job_id, (id) =>
+                                statisticsApi.getImrStatus(id),
+                                {
+                                    onProgress: (jobProgress) => {
+                                        setGlobalProgress(50 + Math.round(jobProgress / 2));
+                                    },
+                                },
+                            );
+                        }
+                        setGlobalProgress(100);
+                        await fetchSewerageSupplyRate(getSewerageSupplyRateParams(searchValues ?? {}), true);
+                        await openVerificationResultDialogIfNeeded(
+                            searchValues?.year && searchValues?.sido && searchValues?.bsnmCd && statsCd
+                                ? {
+                                    sewerBzmnCd: searchValues.bsnmCd,
+                                    ctpvNm: searchValues.sido,
+                                    sggNm: searchValues.gugun === "ALL" ? "" : (searchValues.gugun ?? ""),
+                                    statsYr: searchValues.year,
+                                    statsCd,
+                                }
+                                : null,
+                            setVerificationResultDialogOpen,
+                            { notify: alert },
+                        );
+                    } catch (e) {
+                        await fetchSewerageSupplyRate(getSewerageSupplyRateParams(searchValues ?? {}), true);
+                        setIsLoading(false);
+                        await openVerificationResultDialogIfNeeded(
+                            searchValues?.year && searchValues?.sido && searchValues?.bsnmCd && statsCd
+                                ? {
+                                    sewerBzmnCd: searchValues.bsnmCd,
+                                    ctpvNm: searchValues.sido,
+                                    sggNm: searchValues.gugun === "ALL" ? "" : (searchValues.gugun ?? ""),
+                                    statsYr: searchValues.year,
+                                    statsCd,
+                                }
+                                : null,
+                            setVerificationResultDialogOpen,
+                            { notify: alert, notifySubmitComplete: false },
+                        );
+                        const msg =
+                            e instanceof Error && e.message
+                                ? e.message
+                                : 'IMR 검증 중 오류가 발생했습니다.\n관리자에게 문의하세요.';
+                        alert(msg);
+                        return;
+                    }
+                } else {
+                    setGlobalProgress(100);
+                    await fetchSewerageSupplyRate(getSewerageSupplyRateParams(searchValues ?? {}), false);
+                    await openVerificationResultDialogIfNeeded(
+                        searchValues?.year && searchValues?.sido && searchValues?.bsnmCd && statsCd
+                            ? {
+                                sewerBzmnCd: searchValues.bsnmCd,
+                                ctpvNm: searchValues.sido,
+                                sggNm: searchValues.gugun === "ALL" ? "" : (searchValues.gugun ?? ""),
+                                statsYr: searchValues.year,
+                                statsCd,
+                            }
+                            : null,
+                        setVerificationResultDialogOpen,
+                        { notify: alert },
+                    );
+                }
             } else {
-                alert('데이터 제출 중 오류가 발생했습니다.');
+                alert(response.message || '데이터 제출 중 오류가 발생했습니다.');
             }
         } catch {
             alert('데이터 제출 중 오류가 발생했습니다.');
         } finally {
-            setIsLoading(false);
+            hideGlobalProgress();
         }
     };
 
     const saveFunc = async () => {
         try {
             if (await confirm('저장 하시겠습니까?')) {
-                setIsLoading(true);
+                const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+                if (verificationBlocked) {
+                    alert(verificationBlocked);
+                    return;
+                }
+                showGlobalProgress({ label: "저장 진행 중...", progress: 0 });
 
                 const userInfo = await getUserInfo();
                 const currentData = getGridDataRef.current?.();
@@ -337,11 +631,14 @@ const SeweragePenetrationRateInp = () => {
 
                 const convertedData: SewerageSupplyRateSaveItem[] = currentData.map((d) => ({
                     // 행정구역
-                    sggNm: (d.sggNm as string) || null,                           // 시군구
-                    admdstCd: d.admdstCd as string,                               // 행정코드
-                    admdstNm: d.admdstNm as string,                               // 행정구역명
-                    trbtrNm: d.trbtrNm as string,                                 // 지류
-                    spcCtpnRgnCn: d.spcCtpnRgnCn === '해당없음' ? null : (d.spcCtpnRgnCn as string | null), // 특별대책지역
+                    sggNm: normalizeGridString(d.sggNm),                           // 시군구
+                    admdstCd: normalizeGridString(d.admdstCd),                     // 행정코드
+                    admdstNm: normalizeGridString(d.admdstNm),                     // 행정구역명
+                    trbtrNm: normalizeGridString(d.trbtrNm),                       // 지류
+                    spcCtpnRgnCn:
+                        d.spcCtpnRgnCn === '해당없음'
+                            ? null
+                            : normalizeGridString(d.spcCtpnRgnCn),                 // 특별대책지역
                     // 공공하수처리인구(명) - 물리적/생물학적/고도처리
                     ts1SwtrmtPpltnCnt: formatNumber(d.ts1SwtrmtPpltnCnt, 'ts1SwtrmtPpltnCnt'),   // 물리적처리
                     ts2SwtrmtPpltnCnt: formatNumber(d.ts2SwtrmtPpltnCnt, 'ts2SwtrmtPpltnCnt'),   // 생물학적처리
@@ -357,7 +654,7 @@ const SeweragePenetrationRateInp = () => {
                     drtwPrcsPpltnCnt: formatNumber(d.drtwPrcsPpltnCnt, 'drtwPrcsPpltnCnt'),     // 오수처리인구
                     spctnkPpltnCnt: formatNumber(d.spctnkPpltnCnt, 'spctnkPpltnCnt'),           // 정화조인구
                     staaExcpArea: formatNumber(d.staaExcpArea, 'staaExcpArea'),                 // 하수처리구역 외 면적(㎢)
-                    rmrk: (d.rmrk as string) ?? '',                                              // 비고
+                    rmrk: normalizeGridString(d.rmrk),                                           // 비고
                     // 합계·소계(계산필드 저장용)
                     wholPpltnCnt: formatNumber(d.wholPpltnCnt, 'wholPpltnCnt'),                 // 총인구(명)
                     wholArea: formatNumber(d.wholArea, 'wholArea'),                             // 총면적(㎢)
@@ -374,24 +671,26 @@ const SeweragePenetrationRateInp = () => {
                 const requestData: SewerageSupplyRateSaveRequest = {
                     sewerBzmnCd: searchValues?.bsnmCd ?? '', // 하수도 사업자 코드
                     ctpvNm: searchValues?.sido ?? '', // 시도
-                    sggNm: searchValues?.gugun ?? '',
+                    sggNm: searchValues?.gugun === "ALL" ? "" : (searchValues?.gugun ?? ''),
                     statsYr: searchValues?.year ?? '', // 통계 연도
                     userId: userInfo.userUnqId, // 사용자
                     saveList: convertedData, // 저장 데이터
                     sewerBzmnFrgnrWholPpltnCnt: footerFromApi?.sewerBzmnFrgnrWholPpltnCnt // 행정참고자료 외국인 합계
                 };
 
-                if (isAdminInfo) {
-                    requestData.superAdmin = 'superAdmin';
-                }
+                // if (isAdminInfo) {
+                //     requestData.superAdmin = 'superAdmin';
+                // }
 
                 const response = await statisticsInputSewSupplyRateApi.saveSewerageSupplyRate(requestData);
 
                 if (response.status === 'success') {
-                    fetchSewerageSupplyRate(getSewerageSupplyRateParams(searchValues ?? {}), true);
+                    setGlobalProgress(50);
+                    setGlobalProgress(100);
+                    await fetchSewerageSupplyRate(getSewerageSupplyRateParams(searchValues ?? {}), true);
                     alert('저장되었습니다.');
                 } else {
-                    alert('데이터 저장 중 오류가 발생했습니다.');
+                    alert(response.message || '데이터 저장 중 오류가 발생했습니다.');
                 }
             } else {
                 // 저장 취소
@@ -399,26 +698,31 @@ const SeweragePenetrationRateInp = () => {
         } catch {
             alert('데이터 저장 중 오류가 발생했습니다.');
         } finally {
-            setIsLoading(false);
+            hideGlobalProgress();
         }
     };
 
     const cnacelSubmitFunc = async () => {
         try {
             if (await confirm('제출된 내용을 취소하시겠습니까?')) {
+                const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
+                if (verificationBlocked) {
+                    alert(verificationBlocked);
+                    return;
+                }
 
                 const userInfo = await getUserInfo();
-                
+
                 const requestData: cancelSubmitRequest = {
                     sewerBzmnCd: searchValues?.bsnmCd ?? '',
                     ctpvNm: searchValues?.sido ?? '',
-                    sggNm: searchValues?.gugun ?? '',
+                    sggNm: searchValues?.gugun === "ALL" ? "" : (searchValues?.gugun ?? ""),
                     statsYr: searchValues?.year ?? '',
-                    userId: userInfo.userUnqId,
+                    mdfrId: userInfo.userUnqId,
                     statsCd: statsCd,
                 };
 
-                const response = await statisticsAPi.cancelSubmit(requestData);
+                const response = await statisticsApi.cancelSubmit(requestData);
 
                 if (response.status === 'success') {
                     fetchSewerageSupplyRate(getSewerageSupplyRateParams(searchValues ?? {}), true);
@@ -432,31 +736,68 @@ const SeweragePenetrationRateInp = () => {
         }
     };
 
+    const openVerificationHistoryDialog = () => {
+        if (!searchValues?.year || !searchValues?.sido || !searchValues?.bsnmCd || !statsCd) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+        setVerificationHistoryOpen(true);
+    };
+
+    const gugunOkOrNotDoList = doList.includes(lastSearchedValues?.bsnmCd || '')
+        ? Boolean(lastSearchedValues?.gugun && lastSearchedValues.gugun !== 'ALL')
+        : true;
+
+    const inputPeriodCurrent = isInputPeriodCurrent(periodCheckList);
+    const isSubmitted = statusInfo?.laeSbmsnSttsCd === '2';
+    const baseShowSaveInToolbar = (isEnterable || isAdminInfo) && gugunOkOrNotDoList;
+    const baseShowEnterableToolbarButtons = isEnterable && gugunOkOrNotDoList;
+    const showSubmittedInInputPeriodToolbar =
+        isSubmitted && inputPeriodCurrent && gugunOkOrNotDoList;
+    const showSaveInToolbar = baseShowSaveInToolbar && toolbarGroupAllowed;
+    const showEnterableToolbarButtons = baseShowEnterableToolbarButtons && toolbarGroupAllowed;
+    const showActionToolbarCard =
+        rowData.length > 0 &&
+        toolbarGroupAllowed &&
+        (baseShowSaveInToolbar ||
+            baseShowEnterableToolbarButtons ||
+            showSubmittedInInputPeriodToolbar ||
+            (isSubmitted && isAdminInfo));
+
     return (
         <>
             <div className="relative">
-                <SearchForm onSubmit={handleSearch} onReset={handleReset} onValuesChange={setSearchValues} />
-                {rowData.length > 0 && (isEnterable && (doList.includes(lastSearchedValues?.bsnmCd || '') ? Boolean(lastSearchedValues?.gugun && lastSearchedValues.gugun !== 'ALL') : true) || isAdminInfo) && (
+                <SearchForm
+                    key={searchFormRemountKey}
+                    defaultValues={verificationSearchDefaults ?? undefined}
+                    onSubmit={handleSearch}
+                    onReset={handleReset}
+                    onValuesChange={setSearchValues}
+                />
+                {showActionToolbarCard && (
                     <div className="card !py-0">
                         <div className="flex justify-end items-center gap-[0.6rem] mx-[0.6rem]">
-                            {isEnterable && (doList.includes(lastSearchedValues?.bsnmCd || '') ? Boolean(lastSearchedValues?.gugun && lastSearchedValues.gugun !== 'ALL') : true) && (
+                            <VerificationResultButton
+                                VerificationResultButtonFunc={openVerificationHistoryDialog}
+                            />
+                            {showEnterableToolbarButtons && (
                                 <>
-                                    <SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
                                     <LastYearDataButton getLastYearDataFunc={() => getLastYearDataFunc(searchValues ?? {})} />
-                                    <SubmitButton submitFunc={submitFunc} />
-                                    
+                                    <SubmitButton submitFunc={() => submitFunc(false)} />
                                 </>
                             )}
                             {statusInfo?.laeSbmsnSttsCd === '2' && <CancelSubmitButton cnacelSubmitFunc={cnacelSubmitFunc} />}
-                            {(isEnterable && (doList.includes(lastSearchedValues?.bsnmCd || '') ? Boolean(lastSearchedValues?.gugun && lastSearchedValues.gugun !== 'ALL') : true) || isAdminInfo) && <SaveButton saveFunc={saveFunc} />}
+                            {showSaveInToolbar && <SaveButton saveFunc={saveFunc} />}
                         </div>
                     </div>
                 )}
-                {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" />
+                {isLoading && !globalProgressVisible &&
+                    <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>
-                </div>}
+                }
                 <DataGrid
                     key={(isEnterable || isAdminInfo) ? 'enterable' : 'readonly'}
                     columnInfo={columnInfo}
@@ -472,7 +813,9 @@ const SeweragePenetrationRateInp = () => {
                         if (!verification) return;
                         const errors = verification[fieldName];
                         if (Array.isArray(errors) && errors.length > 0) {
-                            return 'rg-cell-verify-error';
+                            // IMR 검증은 노란색으로 구분
+                            const hasImr = errors.some((e) => e.vrfcCd === 'IMR' || e.vrfcCd === 'HB');
+                            return hasImr ? 'rg-cell-verify-error-imr' : 'rg-cell-verify-error';
                         }
                     }}
                     cellTooltipCallback={({ row, fieldName }) => {
@@ -480,13 +823,74 @@ const SeweragePenetrationRateInp = () => {
                         if (!verification) return;
                         const errors = verification[fieldName];
                         if (Array.isArray(errors) && errors.length > 0) {
-                            return errors.map((e) => e.rsnExpln).filter(Boolean).join('\n');
+                            return errors
+                                .map((e) => {
+                                    const prefix = e.vrfcCd === 'IMR' ? 'IMR검증 - ' : (e.vrfcCd === 'NV' ? '일반검증 - ' : 'HB검증 -');
+                                    return `${prefix}${e.rsnExpln}
+                                    (검증 기준값: ${e.compVlCn} / 현재 입력값: ${e.nowVlCn})`;
+                                })
+                                .filter(Boolean)
+                                .join('\n');
                         }
                     }}
                 />
             </div>
             <ConfirmDialog isOpen={false} />
-            <SubmitDailog open={showDailog} onOpenChange={setShowDailog} statusInfo={statusInfo} onConfirm={executeSubmit} />
+            <SubmitDailog
+                open={showDailog}
+                onOpenChange={(open) => {
+                    setShowDailog(open);
+                    if (!open) setIsExceptionSubmitFlow(false);
+                }}
+                statusInfo={statusInfo}
+                onConfirm={executeSubmit}
+                onExceptionConfirm={executeExceptionSubmit}
+                submitMode={isExceptionSubmitFlow ? 'exception' : 'normal'}
+                isLoading={isLoading}
+            />
+            <VerificationResultHistoryDialog
+                open={verificationHistoryOpen}
+                onOpenChange={setVerificationHistoryOpen}
+                queryContext={
+                    searchValues?.year && searchValues?.sido && searchValues?.bsnmCd && statsCd
+                        ? {
+                            sewerBzmnCd: searchValues.bsnmCd,
+                            ctpvNm: searchValues.sido,
+                            sggNm: searchValues.gugun === "ALL" ? "" : (searchValues.gugun ?? ""),
+                            statsYr: searchValues.year,
+                            statsCd,
+                        }
+                        : null
+                }
+                onExceptionResetSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values) return;
+                    await handleSearch(values);
+                }}
+            />
+            <VerificationResultDialog
+                open={verificationResultDialogOpen}
+                onOpenChange={setVerificationResultDialogOpen}
+                queryContext={
+                    searchValues?.year && searchValues?.sido && searchValues?.bsnmCd && statsCd
+                        ? {
+                            sewerBzmnCd: searchValues.bsnmCd,
+                            ctpvNm: searchValues.sido,
+                            sggNm:
+                                searchValues.gugun === "ALL"
+                                    ? ""
+                                    : (searchValues.gugun ?? ""),
+                            statsYr: searchValues.year,
+                            statsCd,
+                        }
+                        : null
+                }
+                onExceptionSubmitted={async () => {
+                    const values = lastSearchedValues ?? searchValues;
+                    if (!values) return;
+                    await handleSearch(values);
+                }}
+            />
         </>
     );
 };
diff --git a/apps/st/src/components/statistics/input/SewerageServiceLevelInp.tsx b/apps/st/src/components/statistics/input/SewerageServiceLevelInp.tsx
index 7ce370bbb..f79b2e667 100644
--- a/apps/st/src/components/statistics/input/SewerageServiceLevelInp.tsx
+++ b/apps/st/src/components/statistics/input/SewerageServiceLevelInp.tsx
@@ -1,7 +1,7 @@
 import { useState } 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";
diff --git a/apps/st/src/components/statistics/input/StatisticsReviewHistory.tsx b/apps/st/src/components/statistics/input/StatisticsReviewHistory.tsx
new file mode 100644
index 000000000..669ae0c76
--- /dev/null
+++ b/apps/st/src/components/statistics/input/StatisticsReviewHistory.tsx
@@ -0,0 +1,94 @@
+import { useState } from "react";
+
+import DataGrid from "@/components/module/DataGrid";
+import SearchForm from "@/components/module/SearchForm";
+import type { ColumnConfig } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import { useAlertStore } from "@/shared/lib";
+import { LoadingWithAnimation } from "@common/components";
+
+const StatisticsReviewHistory = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const columns: ColumnConfig[] = [
+        { name: "statsYr", fieldName: "statsYr", header: { text: "연도" }, editable: false },
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "sewerBzmnCd", fieldName: "sewerBzmnCd", header: { text: "하수사업자코드" }, editable: false },
+        { name: "statsCd", fieldName: "statsCd", header: { text: "통계코드" }, editable: false },
+        { name: "menuNm", fieldName: "menuNm", header: { text: "통계항목" }, editable: false },
+        { name: "chckerOpinionSm", fieldName: "chckerOpinionSm", header: { text: "검토자의견" }, editable: false },
+        { name: "wrterOpinionSm", fieldName: "wrterOpinionSm", header: { text: "처리내역" }, editable: false },
+    ];
+
+    const columnLayout = [
+        "statsYr",
+        "ctpvNm",
+        "sggNm",
+        "sewerBzmnCd",
+        "statsCd",
+        "menuNm",
+        "chckerOpinionSm",
+        "wrterOpinionSm",
+    ];
+
+    const handleSearch = async (values: SearchFormValues) => {
+        if (!values.year?.trim()) {
+            alert("년도를 선택해주세요.");
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+            const res = await statisticsApi.getStatiscicsManagementReviewHistory({
+                statsYr: values.year.trim(),
+                ...(values.bsnmCd?.trim() ? { sewerBzmnCd: values.bsnmCd.trim() } : {}),
+                ...(values.sido && values.sido !== "ALL" ? { ctpvNm: values.sido } : {}),
+            });
+
+            if (res.status === "success" && Array.isArray(res.data)) {
+                setRowData(toGridRows(res.data));
+            } else {
+                setRowData([]);
+                alert(res.message || "조회된 데이터가 없습니다.");
+            }
+        } catch {
+            setRowData([]);
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleReset = () => {
+        setRowData([]);
+    };
+
+    return (
+        <div className="relative">
+            <SearchForm onSubmit={handleSearch} onReset={handleReset} />
+            {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>
+            )}
+            <DataGrid
+                columnInfo={{ columns, columnLayout }}
+                rowStartNum={2}
+                fixedColumns={3}
+                rowData={rowData}
+                setRowData={setRowData}
+                isExcelImport={false}
+                enableSort={false}
+            />
+        </div>
+    );
+};
+
+export default StatisticsReviewHistory;
diff --git a/apps/st/src/components/statistics/input/StatsInputStatusInp.tsx b/apps/st/src/components/statistics/input/StatsInputStatusInp.tsx
index 4390777b9..2cf6f2261 100644
--- a/apps/st/src/components/statistics/input/StatsInputStatusInp.tsx
+++ b/apps/st/src/components/statistics/input/StatsInputStatusInp.tsx
@@ -1,33 +1,72 @@
-import { useState, useEffect } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { RealGridReact } from "realgrid-react";
 import useSWR, { useSWRConfig } from "swr";
 
-import SearchForm from "@/components/module/SearchForm";
-import { useTabStore } from "@/store/tab-store";
-import DataGrid from "@/components/module/DataGrid";
-import ApproveButton from "@/components/button/ApproveButton";
-import RejectButton from "@/components/button/RejectButton";
+import { useActiveTabRegAuthorityAllowed, useAlertStore } from "@/shared/lib";
+import { statisticsInputSewSupplyRateApi } from "@/entities/statistics/api/input/statistics-input-sew-supply-rate-service";
+import { StatisticsInputStatusApi } from "@/entities/statistics/api/input/statistics-input-status-service";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import {
+    isInputPeriodCurrent,
+    type CheckInputPeriodItem,
+} from "@/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface";
+import type { StatsInputStatusApproveItem } from "@/entities/statistics/model/statistics-interface";
+import type {
+    StatsInputStatusListApiResponse,
+    StatsInputStatusListRequestParams,
+} from "@/entities/statistics/model/input/statistics-input-status-interface";
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
 import { LoadingWithAnimation } from "@common/components";
-
-import { StatsInputStatusInpColumn } from "@/components/util/column/input/StatsInputStatusInpColumn";
-import { StatisticsInputStatusApi } from "@/entities/statistics/api/statistics-input-status-service";
-import type { StatsInputStatusListRequestParams } from "@/entities/statistics/model/statistics-input-status-interface";
+import ApproveButton from "@/components/button/ApproveButton";
+import DataGrid from "@/components/module/DataGrid";
+import type { DataCellClickCallbackParams } from "@/components/type/DataGrid.type";
+import {
+    ExceptionProcessingHistoryDialog,
+    type ExceptionProcessingHistoryQueryContext,
+} from "@/components/module/ExceptionProcessingHistoryDialog";
+import SearchForm from "@/components/module/SearchForm";
 import type { SearchFormValues } from "@/components/type/SearchForm.type";
-import { useAlertStore } from "@/shared/lib";
+import { doList } from "@/components/util/column/input/DoList";
+import { StatsInputStatusInpColumn } from "@/components/util/column/input/StatsInputStatusInpColumn";
 import { toGridRows } from "@/components/util/grid/gridFunction";
-import type { StatsInputStatusListApiResponse } from "@/entities/statistics/model/statistics-input-status-interface";
+import { useTabStore } from "@/store/tab-store";
 
-const getStatsInputStatusFetcher = async (key: [string, StatsInputStatusListRequestParams]): Promise<StatsInputStatusListApiResponse> => {
+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 [searchParams, setSearchParams] = useState<StatsInputStatusListRequestParams | null>(null);
 
-    const swrKey = searchParams ? (["stats-input-status", searchParams] as const) : null;
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const { confirm } = useConfirm();
+    const activeTabId = useTabStore((state) => state.activeTabId);
+    const [rowData, setRowData] = useState<Record<string, string | number>[]>(
+        [],
+    );
+    const [searchParams, setSearchParams] =
+        useState<StatsInputStatusListRequestParams | null>(null);
+    const [lastSearchedValues, setLastSearchedValues] =
+        useState<SearchFormValues | null>(null);
+    const [hasCompletedSearch, setHasCompletedSearch] = useState(false);
+    const periodCheckListRef = useRef<CheckInputPeriodItem[]>([]);
+    const inputPeriodCurrentRef = useRef(false);
+    const gridRef = useRef<RealGridReact | null>(null);
+    const [exceptionHistoryOpen, setExceptionHistoryOpen] = useState(false);
+    const [exceptionHistoryContext, setExceptionHistoryContext] = useState<
+        ExceptionProcessingHistoryQueryContext | null
+    >(null);
+    const [isApproveLoading, setIsApproveLoading] = useState(false);
+    const regAuthorityToolbarAllowed = useActiveTabRegAuthorityAllowed();
+
+    const swrKey = searchParams
+        ? (["stats-input-status", searchParams] as const)
+        : null;
     const { mutate } = useSWRConfig();
     const { isLoading } = useSWR<StatsInputStatusListApiResponse>(
         swrKey,
@@ -36,79 +75,261 @@ const StatsInputStatusInp = () => {
             revalidateOnFocus: true,
             onSuccess: (data) => {
                 if (data.status === "success" && data.data) {
-                    setRowData(toGridRows(data.data));
+                    setRowData(
+                        toGridRows(data.data).map((r) => ({
+                            ...r,
+                            exceptionSubmitHistory: "예외제출내역",
+                        })),
+                    );
+                    setHasCompletedSearch(true);
                 } else {
+                    setHasCompletedSearch(false);
+                    setRowData([]);
                     alert(data.message ?? "조회에 실패했습니다.");
                 }
             },
             onError: () => {
                 alert("데이터 조회 중 오류가 발생했습니다.");
+                setHasCompletedSearch(false);
                 setRowData([]);
             },
         },
     );
 
     useEffect(() => {
-        if (activeTabId === 'StatsInputStatusInp' && swrKey) {
+        if (activeTabId === "StatsInputStatusInp" && swrKey) {
             mutate(swrKey);
         }
     }, [activeTabId]);
 
-    const handleSearch = (values: SearchFormValues) => {
+    const handleSearch = async (values: SearchFormValues) => {
         if (values.sido === "" || values.sido === "ALL") {
             alert("시도를 선택해주세요.");
             return;
         }
-        const params: StatsInputStatusListRequestParams = {
-            ctpvNm: values.sido,
-            sewerBzmnCd: values.bsnmCd,
-            sggNm: values.gugun === "ALL" ? "" : values.gugun,
-            statsYr: values.year,
-        };
-        setSearchParams(params);
-        mutate(["stats-input-status", params]);
+
+        try {
+            const response = await statisticsInputSewSupplyRateApi.checkInputPeriod(values.year || "");
+
+            if (response.status !== "success") {
+                alert(response.message ?? "입력기간 확인에 실패했습니다.");
+                return;
+            }
+
+            const periods = Array.isArray(response.data) ? response.data : [];
+            periodCheckListRef.current = periods;
+            const checkEnterable = isInputPeriodCurrent(periods);
+            inputPeriodCurrentRef.current = checkEnterable;
+
+            const params: StatsInputStatusListRequestParams = {
+                ctpvNm: values.sido,
+                sewerBzmnCd: values.bsnmCd,
+                sggNm: values.gugun === "ALL" ? "" : values.gugun,
+                statsYr: values.year ?? "",
+            };
+            setHasCompletedSearch(false);
+            setLastSearchedValues(values);
+            setSearchParams(params);
+            mutate(["stats-input-status", params]);
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        }
     };
 
     const handleReset = () => {
         setSearchParams(null);
         setRowData([]);
+        setLastSearchedValues(null);
+        setHasCompletedSearch(false);
+        periodCheckListRef.current = [];
+        inputPeriodCurrentRef.current = false;
+        setExceptionHistoryOpen(false);
+        setExceptionHistoryContext(null);
+        setIsApproveLoading(false);
     };
 
-    const rejectFunc = () => {
-        // 보완 요청 로직
+    const approveFunc = async () => {
+        if (rowData.length === 0) {
+            alert("조회된 통계 항목이 없습니다.");
+            return;
+        }
+        if (!lastSearchedValues?.year?.trim() || !lastSearchedValues?.bsnmCd?.trim()) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+
+        const hasInvalidStatus = rowData.some((row) =>
+            ["0", "1", "4"].includes(String(row.laeSbmsnSttsCd ?? "")),
+        );
+
+        if (hasInvalidStatus) {
+            alert("미작성이나 미제출, 혹은 보완요청(반려) 상태인 항목이 있습니다.");
+            return;
+        }
+
+        if (!(await confirm("조회된 통계 항목을 승인하시겠습니까?"))) {
+            return;
+        }
+
+        setIsApproveLoading(true);
+        try {
+            const userInfo = await getUserInfo();
+            const mdfrId = (userInfo.userUnqId ?? "").trim();
+            if (!mdfrId) {
+                alert("수정자 ID를 확인할 수 없습니다.");
+                return;
+            }
+
+            const statsYr = lastSearchedValues.year.trim();
+            const sewerBzmnCdDefault = lastSearchedValues.bsnmCd.trim();
+
+            const approveItems: StatsInputStatusApproveItem[] = rowData
+                .map((row) => {
+                    const statsCd = String(row.statsCd ?? "").trim();
+                    const sewerBzmnCd = String(row.sewerBzmnCd ?? sewerBzmnCdDefault).trim();
+                    return { statsYr, sewerBzmnCd, statsCd, mdfrId };
+                })
+                .filter((item) => item.statsCd.length > 0);
+
+            if (approveItems.length === 0) {
+                alert("통계 코드(statsCd)가 있는 행이 없습니다.");
+                return;
+            }
+
+            const response = await statisticsApi.approveStatsInputStatus({ list: approveItems }, "INPUT");
+            if (response.resultCode.toLocaleLowerCase() === "success") {
+                if (searchParams) {
+                    await mutate(["stats-input-status", searchParams]);
+                }
+                alert(response.message ?? "승인되었습니다.");
+            } else {
+                alert(response.message ?? "승인에 실패했습니다.");
+            }
+        } catch {
+            alert("승인 처리 중 오류가 발생했습니다.");
+        } finally {
+            setIsApproveLoading(false);
+        }
     };
 
-    const approveFunc = () => {
-        // 승인 요청 로직
-    };
+    const openExceptionHistoryForRow = useCallback(
+        (row: Record<string, string | number>) => {
+            if (!regAuthorityToolbarAllowed) {
+                alert("권한이 없습니다.");
+                return;
+            }
+            const ctx = lastSearchedValues;
+            if (!ctx?.year || !ctx?.sido || !ctx?.bsnmCd) {
+                alert("먼저 조회를 진행해주세요.");
+                return;
+            }
+            const statsCd = String(row.statsCd ?? "").trim();
+            if (!statsCd) {
+                alert("통계 코드가 없어 예외처리 내역을 조회할 수 없습니다.");
+                return;
+            }
+            setExceptionHistoryContext({
+                statsYr: ctx.year ?? "",
+                sewerBzmnCd: ctx.bsnmCd ?? "",
+                ctpvNm: ctx.sido ?? "",
+                sggNm: ctx.gugun === "ALL" ? "" : (ctx.gugun ?? ""),
+                statsCd,
+            });
+            setExceptionHistoryOpen(true);
+        },
+        [alert, lastSearchedValues, regAuthorityToolbarAllowed],
+    );
+
+    const handleExceptionSubmitHistoryCellClick = useCallback(
+        ({ fieldName, row }: DataCellClickCallbackParams) => {
+            if (fieldName !== "exceptionSubmitHistory") return;
+            openExceptionHistoryForRow(row);
+        },
+        [openExceptionHistoryForRow],
+    );
+
+    const handleExceptionHistoryRejectSuccess = useCallback(async () => {
+        if (!searchParams) return;
+        await mutate(["stats-input-status", searchParams]);
+    }, [mutate, searchParams]);
+
+    const gugunOkOrNotDoList = doList.includes(lastSearchedValues?.bsnmCd || "")
+        ? Boolean(lastSearchedValues?.gugun && lastSearchedValues.gugun !== "ALL")
+        : true;
+
+    const allRowsLaeSbmsnApproved = useMemo(
+        () =>
+            rowData.length > 0 &&
+            rowData.every((row) => String(row.laeSbmsnSttsCd ?? "") === "3"),
+        [rowData],
+    );
+
+    const showActionToolbarCard =
+        hasCompletedSearch &&
+        rowData.length > 0 &&
+        gugunOkOrNotDoList &&
+        inputPeriodCurrentRef.current &&
+        !allRowsLaeSbmsnApproved &&
+        regAuthorityToolbarAllowed;
 
     return (
         <>
             <div className="relative">
                 <SearchForm onSubmit={handleSearch} onReset={handleReset} />
-                <div className="card !py-0">
-                    <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                        <RejectButton rejectFunc={rejectFunc} />
-                        <ApproveButton approveFunc={approveFunc} />
+                {showActionToolbarCard && (
+                    <div className="card !py-0">
+                        <div className="m-[0.6rem] flex items-center justify-end gap-[0.6rem]">
+                            <ApproveButton approveFunc={approveFunc} />
+                        </div>
                     </div>
-                </div>
-                {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" />
+                )}
+                {(isLoading || isApproveLoading) && (
+                    <div className="[data-theme='black']:bg-transparent absolute inset-0 z-50 flex items-center justify-center rounded-lg p-10">
+                        <div className="relative size-[5rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
                     </div>
-                </div>}
-                <DataGrid 
-                    columnInfo={ StatsInputStatusInpColumn } 
-                    rowStartNum={2} 
-                    fixedColumns={3} 
-                    rowData={rowData} 
-                    setRowData={setRowData} 
+                )}
+                <DataGrid
+                    columnInfo={StatsInputStatusInpColumn}
+                    rowStartNum={2}
+                    fixedColumns={3}
+                    rowData={rowData}
+                    setRowData={setRowData}
                     isExcelImport={false}
-                    showHeaderCheckbox={true}
+                    showHeaderCheckbox={false}
+                    getGridRef={gridRef}
+                    onDataCellClick={handleExceptionSubmitHistoryCellClick}
+                    cellStyleCallback={({ row, fieldName }) => {
+                        if (fieldName !== "laeSbmsnSttsNm") {
+                            return undefined;
+                        }
+
+                        const statusCd = String(row.laeSbmsnSttsCd ?? "");
+                        if (statusCd === "0" || statusCd === "1") {
+                            return "rg-cell-stats-status-pending";
+                        }
+                        if (statusCd === "2") {
+                            return "rg-cell-stats-status-submitted";
+                        }
+                        if (statusCd === "3") {
+                            return "rg-cell-stats-status-approved";
+                        }
+                        if (statusCd === "4") {
+                            return "rg-cell-stats-status-rejected";
+                        }
+                        return undefined;
+                    }}
                 />
             </div>
+            <ExceptionProcessingHistoryDialog
+                open={exceptionHistoryOpen}
+                onOpenChange={setExceptionHistoryOpen}
+                queryContext={exceptionHistoryContext}
+                onRejectSuccess={handleExceptionHistoryRejectSuccess}
+            />
         </>
     );
 };
 
-export default StatsInputStatusInp;
\ No newline at end of file
+export default StatsInputStatusInp;
diff --git a/apps/st/src/components/statistics/input/SubmitDailog.tsx b/apps/st/src/components/statistics/input/SubmitDailog.tsx
index 7b67d4cb7..9e0ab4e2c 100644
--- a/apps/st/src/components/statistics/input/SubmitDailog.tsx
+++ b/apps/st/src/components/statistics/input/SubmitDailog.tsx
@@ -1,5 +1,11 @@
 "use client";
 
+import { useEffect } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { statisticsInputSubmitInfoSchema, type StatisticsInputSubmitInfoFormData } from "@/entities/statistics/model/statistics-input-submit-info-schema";
+import type { SewerageStatusInfo } from "@/entities/statistics/model/statistics-interface";
+
 import {
     Button,
     Dialog,
@@ -13,12 +19,8 @@ import {
     TableCell,
     TableHead,
     TableRow,
+    LoadingWithAnimation,
 } from "@common/components";
-import { useEffect } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { statisticsInputSubmitInfoSchema, type StatisticsInputSubmitInfoFormData } from "@/entities/statistics/model/statistics-input-submit-info-schema";
-import { type SewerageSupplyRateStatusInfo } from "@/entities/statistics/model/statistics-sewage-supply-rate-input-interface";
 
 /** 숫자만 추출 후 하이픈 포맷 (010-1234-5678, 02-123-4567 등) */
 function formatPhoneWithHyphen(value: string): string {
@@ -42,9 +44,14 @@ const PHONE_FIELDS: (keyof StatisticsInputSubmitInfoFormData)[] = ["laePicTelNo"
 interface SubmitDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    statusInfo: SewerageSupplyRateStatusInfo | null;
+    statusInfo: SewerageStatusInfo | null;
     /** 다이얼로그에서 저장 클릭 시 호출. 제출 정보를 넘기면 부모에서 requestData에 포함해 제출 API 호출 */
     onConfirm?: (data: StatisticsInputSubmitInfoFormData) => void | Promise<void>;
+    /** 예외 제출로 다이얼로그를 연 경우: 일반 제출(onConfirm) 대신 호출 */
+    onExceptionConfirm?: (data: StatisticsInputSubmitInfoFormData) => void | Promise<void>;
+    /** 'normal': onConfirm / 'exception': onExceptionConfirm */
+    submitMode?: "normal" | "exception";
+    isLoading?: boolean;
 }
 
 const defaultValues: StatisticsInputSubmitInfoFormData = {
@@ -58,7 +65,7 @@ const defaultValues: StatisticsInputSubmitInfoFormData = {
     laeIdfrTelNo: "",
 };
 
-function statusInfoToFormData(info: SewerageSupplyRateStatusInfo): StatisticsInputSubmitInfoFormData {
+function statusInfoToFormData(info: SewerageStatusInfo): StatisticsInputSubmitInfoFormData {
     return {
         laePicNm: info.laePicNm ?? "",
         laeKbrdrJbgdNm: info.laeKbrdrJbgdNm ?? "",
@@ -69,9 +76,17 @@ function statusInfoToFormData(info: SewerageSupplyRateStatusInfo): StatisticsInp
         laeIdfrDeptNm: info.laeIdfrDeptNm ?? "",
         laeIdfrTelNo: info.laeIdfrTelNo ?? "",
     };
-}
+};
 
-const SubmitDailog = ({ open, onOpenChange, statusInfo, onConfirm }: SubmitDialogProps) => {
+const SubmitDailog = ({
+    open,
+    onOpenChange,
+    statusInfo,
+    onConfirm,
+    onExceptionConfirm,
+    submitMode = "normal",
+    isLoading,
+}: SubmitDialogProps) => {
     const { control, handleSubmit, reset, formState: { errors } } = useForm<StatisticsInputSubmitInfoFormData>({
         resolver: zodResolver(statisticsInputSubmitInfoSchema),
         defaultValues,
@@ -84,7 +99,11 @@ const SubmitDailog = ({ open, onOpenChange, statusInfo, onConfirm }: SubmitDialo
     }, [open, statusInfo, reset]);
 
     async function onSubmit(data: StatisticsInputSubmitInfoFormData) {
-        await onConfirm?.(data);
+        if (submitMode === "exception") {
+            await onExceptionConfirm?.(data);
+        } else {
+            await onConfirm?.(data);
+        }
         onOpenChange(false);
         reset(defaultValues);
     }
@@ -111,6 +130,11 @@ const SubmitDailog = ({ open, onOpenChange, statusInfo, onConfirm }: SubmitDialo
                 <DialogHeader>
                     <DialogTitle>제출 정보</DialogTitle>
                 </DialogHeader>
+                {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>}
                 <form onSubmit={handleSubmit(onSubmit)}>
                     <Table variant="secondary">
                         <TableBody>
@@ -126,22 +150,22 @@ const SubmitDailog = ({ open, onOpenChange, statusInfo, onConfirm }: SubmitDialo
                                             render={({ field }) => {
                                                 const isPhone = PHONE_FIELDS.includes(name);
                                                 return (
-                                                <div className="space-y-1">
-                                                    <Input
-                                                        {...field}
-                                                        value={field.value ?? ""}
-                                                        placeholder={placeholder}
-                                                        onChange={(e) => {
-                                                            const v = e.target.value;
-                                                            field.onChange(isPhone ? formatPhoneWithHyphen(v) : v);
-                                                        }}
-                                                    />
-                                                    {errors[name]?.message && (
-                                                        <p className="text-sm text-destructive ml-1">
-                                                            {errors[name]?.message}
-                                                        </p>
-                                                    )}
-                                                </div>
+                                                    <div className="space-y-1">
+                                                        <Input
+                                                            {...field}
+                                                            value={field.value ?? ""}
+                                                            placeholder={placeholder}
+                                                            onChange={(e) => {
+                                                                const v = e.target.value;
+                                                                field.onChange(isPhone ? formatPhoneWithHyphen(v) : v);
+                                                            }}
+                                                        />
+                                                        {errors[name]?.message && (
+                                                            <p className="text-sm text-destructive ml-1">
+                                                                {errors[name]?.message}
+                                                            </p>
+                                                        )}
+                                                    </div>
                                                 );
                                             }}
                                         />
@@ -151,12 +175,12 @@ const SubmitDailog = ({ open, onOpenChange, statusInfo, onConfirm }: SubmitDialo
                         </TableBody>
                     </Table>
                     <DialogFooter className="mt-6">
+                        <Button type="submit" color="primary">
+                            {submitMode === 'normal' ? '제출' : '예외 제출'}
+                        </Button>
                         <Button type="button" color="gray" onClick={handleCancel}>
                             취소
                         </Button>
-                        <Button type="submit" color="green">
-                            제출
-                        </Button>
                     </DialogFooter>
                 </form>
             </DialogContent>
diff --git a/apps/st/src/components/statistics/input/WaterReuseInp.tsx b/apps/st/src/components/statistics/input/WaterReuseInp.tsx
index 2479ef030..26798d169 100644
--- a/apps/st/src/components/statistics/input/WaterReuseInp.tsx
+++ b/apps/st/src/components/statistics/input/WaterReuseInp.tsx
@@ -1,7 +1,7 @@
 import { useState } 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";
diff --git a/apps/st/src/components/statistics/management/LogHistory.tsx b/apps/st/src/components/statistics/management/LogHistory.tsx
index 2938343f8..6258f5e63 100644
--- a/apps/st/src/components/statistics/management/LogHistory.tsx
+++ b/apps/st/src/components/statistics/management/LogHistory.tsx
@@ -1,112 +1,372 @@
 "use client";
 
-import { useState } from 'react';
-// import useSWR from 'swr';
+import { useCallback, useEffect, useState } from "react";
 
+import dayjs from "dayjs";
+import useSWR from "swr";
+
+import { useAlertStore } from "@/shared/lib";
+import { CodeSelectWithAll } from "@/entities/code";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+// import type { StatisticsLogResponse } from "@/entities/statistics/model/statistics-interface";
+import type {
+    ApiResponse,
+    SearchCondition,
+    Sgg,
+    StatisticsLogRequest,
+} from "@/entities/statistics/model/statistics-interface";
 import {
     Button,
-    // Input,
+    InputDatePicker,
     Label,
-    // Select,
-    // SelectTrigger,
-    // SelectContent,
-    // SelectItem,
-    // SelectValue
-}
-    from "@common/components";
-import DataGrid from '@/components/module/DataGrid';
-import { CodeSelect } from '@/entities/code';
+    LoadingWithAnimation,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@common/components";
 
-import { LogHistoryColumn } from '@/components/util/column/management/LogHistoryColumn';
-// import { LwpoCodeApi } from "@/entities/code";
+import DataGrid from "@/components/module/DataGrid";
+import { LogHistoryDetailDialog } from "@/components/statistics/management/LogHistoryDetailDialog";
+import { LogHistoryTablePagination } from "@/components/statistics/management/LogHistoryTablePagination";
+import { LogHistoryColumn } from "@/components/util/column/management/LogHistoryColumn";
+import { toGridRows } from "@/components/util/grid/gridFunction";
 
-// const getStateCdListFetcher = async () => {
-//     return LwpoCodeApi.getLwpoCodeList({
-//         sort: 'regDt,desc',
-//         upCd: 'STITEM',
-//         page: 0,
-//         size: 100,
-//     });
-// }
+const PAGE_SIZE = 100;
+
+const getSidoListFetcher = async (): Promise<ApiResponse<SearchCondition>> => {
+    return statisticsApi.getSidoList();
+};
+
+const getSggListFetcher = async (
+    key: [string, string],
+): Promise<ApiResponse<Sgg[]>> => {
+    return statisticsApi.getSggList(key[1]);
+};
 
 const LogHistory = () => {
-    // const { setMessage: alert } = useAlertStore((state) => state);
-    const [statsCd, setStatsCd] = useState('');
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const [statsCd, setStatsCd] = useState<string>("");
+    const [sido, setSido] = useState<string>("ALL");
+    const [gugun, setGugun] = useState<string>("ALL");
+    const [bsnmCd, setBsnmCd] = useState<string>("");
+    const [statsDataChgComCd, setStatsDataChgComCd] = useState<string>("ALL");
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [rowData, setRowData] = useState<Record<string, string | number>[]>(
+        [],
+    );
+    const [pageIndex, setPageIndex] = useState(0);
+    const [totalPages, setTotalPages] = useState(0);
+    const [detailDialogOpen, setDetailDialogOpen] = useState(false);
+    const [selectedLogRow, setSelectedLogRow] = useState<Record<
+        string,
+        string | number
+    > | null>(null);
+    const [startDate, setStartDate] = useState<Date | undefined>(() =>
+        dayjs().subtract(1, "month").startOf("day").toDate(),
+    );
+    const [endDate, setEndDate] = useState<Date | undefined>(() =>
+        dayjs().endOf("day").toDate(),
+    );
 
-    // const { data: lwpoCdList } = useSWR(
-    //     "lwpo-code-list",
-    //     getStateCdListFetcher,
-    //     {
-    //         revalidateOnFocus: false,
-    //         revalidateOnReconnect: false,
-    //         revalidateIfStale: false,
-    //         dedupingInterval: 2000,
-    //         shouldRetryOnError: false,
-    //         onSuccess: (data) => {
-    //             if (!data.content || data.content.length == 0) {
-    //                 alert(`시도 목록을 불러오는데 실패했습니다.
-    //                     새로고침 후 다시 시도해주세요.`);
-    //             }
-    //         },
-    //         onError: () => {
-    //             alert(`시도 목록을 불러오는데 실패했습니다.
-    //                 새로고침 후 다시 시도해주세요.`);
-    //         },
-    //     }
-    // );
+    const { data: sidoList } = useSWR<ApiResponse<SearchCondition>>(
+        "log-history-sido-list",
+        getSidoListFetcher,
+        {
+            revalidateOnFocus: false,
+            revalidateOnReconnect: false,
+            revalidateIfStale: false,
+            dedupingInterval: 2000,
+            shouldRetryOnError: false,
+            onSuccess: (data) => {
+                if (data.status !== "success") {
+                    alert(`시도 목록을 불러오는데 실패했습니다.
+                            새로고침 후 다시 시도해주세요.`);
+                }
+            },
+            onError: () => {
+                alert(`시도 목록을 불러오는데 실패했습니다.
+새로고침 후 다시 시도해주세요.`);
+            },
+        },
+    );
+
+    const sggKey: [string, string] | null =
+        sido && sido !== "ALL" ? ["log-history-sgg-list", sido] : null;
+    const { data: sggList } = useSWR<ApiResponse<Sgg[]>>(
+        sggKey,
+        getSggListFetcher,
+        {
+            revalidateOnFocus: false,
+            revalidateOnReconnect: false,
+            revalidateIfStale: false,
+            dedupingInterval: 2000,
+            shouldRetryOnError: false,
+            onSuccess: (data) => {
+                if (data.status !== "success") {
+                    alert(`시군구 목록을 불러오는데 실패했습니다.
+새로고침 후 다시 시도해주세요.`);
+                }
+            },
+            onError: () => {
+                alert(`시군구 목록을 불러오는데 실패했습니다.
+새로고침 후 다시 시도해주세요.`);
+            },
+        },
+    );
+    const sggOptions = sggList?.data ?? [];
+
+    const handleSidoChange = (value: string) => {
+        const selectedBsnm =
+            sidoList?.data.sidoList.find((v) => v.sido === value)?.bsnmCd ?? "";
+        setSido(value);
+        setGugun("ALL");
+        setBsnmCd(selectedBsnm);
+    };
+
+    const handleSggChange = (value: string) => {
+        const listForBsnm = sggList?.data ?? [];
+        const selectedBsnm =
+            value === "ALL"
+                ? (sidoList?.data.sidoList.find((v) => v.sido === sido)
+                    ?.bsnmCd ?? "")
+                : (listForBsnm.find((v) => v.gugun === value)?.bsnmCd ?? "");
+        setGugun(value);
+        setBsnmCd(selectedBsnm);
+    };
+
+    const loadLogs = useCallback(
+        async (page1Based: number) => {
+            const param: StatisticsLogRequest = {
+                page: page1Based,
+                size: PAGE_SIZE,
+                startDate: startDate
+                    ? dayjs(startDate).format("YYYY-MM-DD")
+                    : "",
+                endDate: endDate ? dayjs(endDate).format("YYYY-MM-DD") : "",
+                ...(!(statsCd === "" || statsCd === "ALL") && { statsCd }),
+                ...(sido && sido !== "ALL" && { ctpvNm: sido }),
+                ...(gugun && gugun !== "ALL" && { sggNm: gugun }),
+                ...(bsnmCd && { sewerBzmnCd: bsnmCd }),
+                ...(statsDataChgComCd &&
+                    statsDataChgComCd !== "ALL" && {
+                    statsDataChgComCd,
+                }),
+            };
+
+            try {
+                setIsLoading(true);
+
+                const response = await statisticsApi.getLogList(param);
+
+                if (response.status === "success") {
+                    const logListRaw = response.data?.statsLogList ?? [];
+                    const logList = logListRaw.map((l) => ({
+                        ...l,
+                        sggNm: String(l.sggNm ?? "").trim() || "-",
+                    }));
+
+                    setRowData(toGridRows(logList));
+                    setTotalPages(response.data?.pageInfo?.totalPages ?? 0);
+                    setPageIndex(Math.max(0, page1Based - 1));
+                } else {
+                    alert(
+                        response.message ||
+                        "데이터 조회 중 오류가 발생했습니다.",
+                    );
+                }
+            } catch {
+                alert("데이터 조회 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [
+            statsCd,
+            startDate,
+            endDate,
+            sido,
+            gugun,
+            bsnmCd,
+            statsDataChgComCd,
+            alert,
+        ],
+    );
+
+    const handleSearch = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        if (startDate && endDate) {
+            const start = dayjs(startDate);
+            const end = dayjs(endDate);
+            if (start.isAfter(end, "day")) {
+                alert("시작일은 종료일보다 늦을 수 없습니다.");
+                return;
+            }
+            if (end.isBefore(start, "day")) {
+                alert("종료일은 시작일보다 빠를 수 없습니다.");
+                return;
+            }
+        }
+
+        await loadLogs(1);
+    };
+
+    const handleReset = () => {
+        setStatsCd("");
+        setSido("ALL");
+        setGugun("ALL");
+        setBsnmCd("");
+        setStatsDataChgComCd("ALL");
+        setStartDate(dayjs().subtract(1, "month").startOf("day").toDate());
+        setEndDate(dayjs().endOf("day").toDate());
+    };
+
+    const handleRowClick = (row: Record<string, string | number>) => {
+        setSelectedLogRow(row);
+        setDetailDialogOpen(true);
+    };
+
+    const handleDetailDialogOpenChange = (next: boolean) => {
+        setDetailDialogOpen(next);
+        if (!next) setSelectedLogRow(null);
+    };
+
+    useEffect(() => {
+        void loadLogs(1);
+    }, []);
 
     return (
         <div className="relative">
             <div className="card card-border">
-                <form>
-                    <div className="flex items-center gap-8 p-2">
+                <form onSubmit={handleSearch}>
+                    <div className="flex flex-wrap items-center gap-8 p-2">
                         <div className="flex items-center gap-2">
-                            <Label className="text-label">
-                                통계항목
-                            </Label>
-                            {/* <Select value={lwpoCd} onValueChange={setLwpoCd}>
-                                <SelectTrigger className="w-[22rem]">
-                                    <SelectValue placeholder="전체"></SelectValue>
+                            <Label className="text-label">시도</Label>
+                            <Select
+                                value={sido}
+                                onValueChange={handleSidoChange}
+                            >
+                                <SelectTrigger className="w-[12rem]">
+                                    <SelectValue placeholder="전체" />
                                 </SelectTrigger>
                                 <SelectContent>
                                     <SelectItem value="ALL">전체</SelectItem>
-                                    {lwpoCdList?.content?.map((l) => (
-                                        <SelectItem key={l.lwpoCd} value={l.lwpoCd}>
-                                            {l.lwpoCdNm}
+                                    {sidoList?.data?.sidoList?.map((item) => (
+                                        <SelectItem
+                                            key={item.adstDstrCd}
+                                            value={item.sido}
+                                        >
+                                            {item.sido}
                                         </SelectItem>
                                     ))}
                                 </SelectContent>
-                            </Select> */}
-                            <CodeSelect
+                            </Select>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <Label className="text-label">시군구</Label>
+                            <Select
+                                value={gugun}
+                                onValueChange={handleSggChange}
+                            >
+                                <SelectTrigger className="w-[12rem]">
+                                    <SelectValue placeholder="전체" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="ALL">전체</SelectItem>
+                                    {sggOptions.map((sgg) => (
+                                        <SelectItem
+                                            key={sgg.adstDstrCd}
+                                            value={sgg.gugun}
+                                        >
+                                            {sgg.gugun}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <Label className="text-label">통계항목</Label>
+                            <CodeSelectWithAll
                                 upCd="STITEM"
                                 value={statsCd}
                                 onValueChange={setStatsCd}
-                                placeholder="선택"
+                                placeholder="전체"
                                 className="w-[16rem]"
                             />
                         </div>
-                        <div className="flex items-center gap-2 ml-auto">
-                            <Button color="green" className="h-[3.2rem] w-[96px]" type="button">
+                        <div className="flex items-center gap-2">
+                            <Label className="text-label">요청 기능</Label>
+                            <CodeSelectWithAll
+                                upCd="STATSDATACHG"
+                                value={statsDataChgComCd}
+                                onValueChange={setStatsDataChgComCd}
+                                placeholder="전체"
+                                className="w-[16rem]"
+                            />
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <Label className="mx-2 text-label">시작일</Label>
+                            <InputDatePicker
+                                value={startDate}
+                                onChange={setStartDate}
+                                className="w-[14rem]"
+                            />
+                            <Label className="mx-2 text-label">종료일</Label>
+                            <InputDatePicker
+                                value={endDate}
+                                onChange={setEndDate}
+                                className="w-[14rem]"
+                            />
+                        </div>
+                        <div className="ml-auto flex items-center gap-2">
+                            <Button
+                                color="green"
+                                className="h-[3.2rem] w-[96px]"
+                                type="button"
+                                onClick={handleReset}
+                            >
                                 초기화
                             </Button>
-                            <Button className="h-[3.2rem] w-[96px]" type="submit">
+                            <Button
+                                className="h-[3.2rem] w-[96px]"
+                                type="submit"
+                            >
                                 조회
                             </Button>
                         </div>
                     </div>
                 </form>
             </div>
-            <DataGrid 
+            {isLoading && (
+                <div className="[data-theme='black']:bg-transparent absolute inset-0 z-50 flex items-center justify-center rounded-lg p-10">
+                    <div className="relative size-[5rem]">
+                        <LoadingWithAnimation color="primary" />
+                    </div>
+                </div>
+            )}
+            <DataGrid
                 columnInfo={LogHistoryColumn}
-                // rowStartNum={1}
-                // fixedColumns={1}
                 isExcelImport={false}
-                // showHeaderCheckbox={true}
-                rowData={[]} 
-                setRowData={() => {}} 
+                rowData={rowData}
+                setRowData={() => { }}
+                onRowClick={handleRowClick}
+            />
+            <LogHistoryDetailDialog
+                open={detailDialogOpen}
+                onOpenChange={handleDetailDialogOpenChange}
+                row={selectedLogRow}
+            />
+            <LogHistoryTablePagination
+                pageCount={totalPages}
+                pageIndex={pageIndex}
+                onPageIndexChange={(idx) => {
+                    void loadLogs(idx + 1);
+                }}
             />
         </div>
     );
 };
 
-export default LogHistory;
\ No newline at end of file
+export default LogHistory;
diff --git a/apps/st/src/components/statistics/management/LogHistoryDetailDialog.tsx b/apps/st/src/components/statistics/management/LogHistoryDetailDialog.tsx
new file mode 100644
index 000000000..359eba00d
--- /dev/null
+++ b/apps/st/src/components/statistics/management/LogHistoryDetailDialog.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { GridFitStyle } from "realgrid";
+
+import {
+    Button,
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    LoadingWithAnimation,
+} from "@common/components";
+
+import DataGrid from "@/components/module/DataGrid";
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
+import {
+    alignLogDetailRowsToColumns,
+    buildLogHistoryDetailColumnInfo,
+    emptyLogHistoryDetailColumnInfo,
+} from "@/components/util/column/management/LogHistoryDetailColumn";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type { StatisticsLogDetailRow } from "@/entities/statistics/model/statistics-interface";
+import { useAlertStore } from "@/shared/lib";
+
+export interface LogHistoryDetailDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    row: Record<string, string | number> | null;
+}
+
+export function LogHistoryDetailDialog({
+    open,
+    onOpenChange,
+    row,
+}: LogHistoryDetailDialogProps) {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const [isLoading, setIsLoading] = useState(false);
+    const [rowData, setRowData] = useState<Record<string, string | number>[]>(
+        [],
+    );
+    const [columnInfo, setColumnInfo] = useState<ColumnInfo>(
+        emptyLogHistoryDetailColumnInfo,
+    );
+
+    useEffect(() => {
+        if (!open) {
+            setRowData([]);
+            setColumnInfo(emptyLogHistoryDetailColumnInfo);
+            setIsLoading(false);
+            return;
+        }
+
+        if (!row) return;
+
+        const sn = row.statsLogSn;
+        let cancelled = false;
+
+        void (async () => {
+            setIsLoading(true);
+            setRowData([]);
+
+            try {
+                const response = await statisticsApi.getLogDetail(
+                    sn !== undefined && sn !== null ? String(sn) : "",
+                );
+
+                if (cancelled) return;
+
+                if (response.status !== "success") {
+                    alert(
+                        response.message ??
+                            "로그 상세 정보를 불러오는데 실패했습니다.",
+                    );
+                    return;
+                }
+
+                const list = Array.isArray(response.data)
+                    ? response.data
+                    : [];
+                const nextColumnInfo = buildLogHistoryDetailColumnInfo(list);
+                const nextRows = alignLogDetailRowsToColumns(
+                    toGridRows(list as StatisticsLogDetailRow[]),
+                    nextColumnInfo,
+                );
+                setColumnInfo(nextColumnInfo);
+                setRowData(nextRows);
+            } catch {
+                if (!cancelled) {
+                    alert("로그 상세 정보를 불러오는데 실패했습니다.");
+                }
+            } finally {
+                if (!cancelled) setIsLoading(false);
+            }
+        })();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [open, row, alert]);
+
+    const gridRemountKey = useMemo(
+        () => columnInfo.columns.map((c) => c.fieldName).join("\u0001"),
+        [columnInfo],
+    );
+
+    const showGrid = !isLoading && rowData.length > 0;
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent
+                className="max-w-[80%]"
+                aria-describedby={undefined}
+            >
+                <DialogHeader>
+                    <DialogTitle>로그 상세 정보</DialogTitle>
+                </DialogHeader>
+                <div className="relative min-h-[32rem]">
+                    {isLoading && (
+                        <div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80">
+                            <div className="relative size-[5rem]">
+                                <LoadingWithAnimation color="primary" />
+                            </div>
+                        </div>
+                    )}
+                    {showGrid ? (
+                        <DataGrid
+                            key={gridRemountKey}
+                            columnInfo={columnInfo}
+                            rowData={rowData}
+                            setRowData={setRowData}
+                            isExcelImport={false}
+                            isExcelExport={false}
+                            enableSort={false}
+                            gridHeight={55}
+                            fitStyle={GridFitStyle.NONE}
+                        />
+                    ) : (
+                        !isLoading && (
+                            <p className="flex h-full items-center justify-center text-[1.3rem] text-muted-foreground">
+                                표시할 상세 데이터가 없습니다.
+                            </p>
+                        )
+                    )}
+                </div>
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button size="lg" color="white" type="button">
+                            닫기
+                        </Button>
+                    </DialogClose>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/apps/st/src/components/statistics/management/LogHistoryTablePagination.tsx b/apps/st/src/components/statistics/management/LogHistoryTablePagination.tsx
new file mode 100644
index 000000000..ddcc34531
--- /dev/null
+++ b/apps/st/src/components/statistics/management/LogHistoryTablePagination.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+/**
+ * @common/components DataTable 내부 Pagination과 동일 마크업/클래스 (복제).
+ * 공용 패키지 수정 없이 LogHistory 전용으로 둠.
+ */
+import {
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    DoubleArrowLeftIcon,
+    DoubleArrowRightIcon,
+} from "@radix-ui/react-icons";
+
+import { Button, cn } from "@common/components";
+
+export type LogHistoryTablePaginationProps = {
+    /** 총 페이지 수 (TanStack table.getPageCount()와 동일) */
+    pageCount: number;
+    /** 0부터 시작하는 현재 페이지 인덱스 */
+    pageIndex: number;
+    onPageIndexChange: (pageIndex: number) => void;
+};
+
+export function LogHistoryTablePagination({
+    pageCount,
+    pageIndex: currentPage,
+    onPageIndexChange,
+}: LogHistoryTablePaginationProps) {
+    const maxVisiblePages = 10;
+
+    let startPage = Math.max(0, currentPage - maxVisiblePages / 2);
+    const endPage = Math.min(pageCount, startPage + maxVisiblePages);
+
+    if (endPage - startPage < maxVisiblePages) {
+        startPage = Math.max(0, endPage - maxVisiblePages);
+    }
+
+    const pageNumbers = Array(endPage - startPage)
+        .fill(0)
+        .map((_, i) => startPage + i);
+
+    const canPrevious = currentPage > 0;
+    const canNext = pageCount > 0 && currentPage < pageCount - 1;
+
+    return (
+        <div className="mt-[24px] mb-4 flex items-center justify-center space-x-2">
+            <Button
+                variant="ghost"
+                color="white"
+                className="hidden size-10 p-0 lg:flex"
+                onClick={() => onPageIndexChange(0)}
+                disabled={!canPrevious}
+            >
+                <span className="sr-only">첫 페이지로</span>
+                <DoubleArrowLeftIcon className="size-4" />
+            </Button>
+            <Button
+                variant="ghost"
+                color="white"
+                className="size-10 p-0"
+                onClick={() => onPageIndexChange(currentPage - 1)}
+                disabled={!canPrevious}
+            >
+                <span className="sr-only">이전 페이지로</span>
+                <ChevronLeftIcon className="size-4" />
+            </Button>
+            <div className="flex items-center justify-center text-sm font-medium">
+                {pageNumbers.map((pageNumber) => (
+                    <Button
+                        key={pageNumber}
+                        variant="ghost"
+                        className={cn(
+                            "inline-block h-10 min-w-10 !bg-transparent p-1 text-foreground hover:!bg-accent",
+                            currentPage === pageNumber &&
+                                "!bg-primary !font-bold !text-primary-foreground hover:!bg-primary",
+                        )}
+                        onClick={() => onPageIndexChange(pageNumber)}
+                    >
+                        {pageNumber + 1}
+                    </Button>
+                ))}
+            </div>
+            <Button
+                variant="ghost"
+                color="white"
+                className="size-10 p-0"
+                onClick={() => onPageIndexChange(currentPage + 1)}
+                disabled={!canNext}
+            >
+                <span className="sr-only">다음 페이지로</span>
+                <ChevronRightIcon className="size-4" />
+            </Button>
+            <Button
+                variant="ghost"
+                color="white"
+                className="hidden size-10 p-0 lg:flex"
+                onClick={() => onPageIndexChange(Math.max(0, pageCount - 1))}
+                disabled={!canNext}
+            >
+                <span className="sr-only">마지막 페이지로</span>
+                <DoubleArrowRightIcon className="size-4" />
+            </Button>
+        </div>
+    );
+}
diff --git a/apps/st/src/components/statistics/management/NotEnteredStatus.tsx b/apps/st/src/components/statistics/management/NotEnteredStatus.tsx
index 723c29b18..ea0c0aaf4 100644
--- a/apps/st/src/components/statistics/management/NotEnteredStatus.tsx
+++ b/apps/st/src/components/statistics/management/NotEnteredStatus.tsx
@@ -1,41 +1,340 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
-import { DataGrid } from "@rsone/components";
+import { GridFitStyle } from "realgrid";
+
+import { useAlertStore, useUserStore } from "@/shared/lib";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type {
+    UnSubmitDataStatusItem,
+    unSubmitDataRequest,
+} from "@/entities/statistics/model/statistics-interface";
+import { LoadingWithAnimation } from "@common/components";
+
+import DataGrid from "@/components/module/DataGrid";
 import SearchForm from "@/components/module/SearchForm";
-import type { ColumnConfig } from "@/components/type/DataGrid.type";
+import type { ColumnConfig, ColumnLayoutItem } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
 
-const NotEnteredStatus = () => {
-    const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
+const SIDO_FIELD = "\uc2dc\ub3c4";
+const SGG_FIELD = "\uc2dc\uad70\uad6c";
 
-    const columns: ColumnConfig[] = [
-        { name: 'sido', fieldName: '시도', header: { text: '시도' }, mergeCells: true, editable: false, sortdisable: true },
-        { name: 'sgg', fieldName: '시군구', header: { text: '시군구' }, mergeCells: true, editable: false, sortdisable: true },
-        { name: '1', fieldName: '1', header: { text: '시군구' }, mergeCells: true, editable: false, sortdisable: true },
-        { name: '2-1', fieldName: '2-1', header: { text: '2-1' }, mergeCells: true, editable: false, sortdisable: true },
-        { name: '2-2', fieldName: '2-2', header: { text: '2-2' }, mergeCells: true, editable: false, sortdisable: true },
-        { name: '2-3', fieldName: '2-3', header: { text: '2-3' }, mergeCells: true, editable: false, sortdisable: true },
-        { name: '2-4', fieldName: '2-4', header: { text: '2-4' }, mergeCells: true, editable: false, sortdisable: true },
-        { name: '3-1', fieldName: '3-1', header: { text: '3-1' }, mergeCells: true, editable: false, sortdisable: true },
-        { name: '3-2', fieldName: '3-2', header: { text: '3-2' }, mergeCells: true, editable: false, sortdisable: true },
-    ];
+function sbmsnYnToOx(sbmsnYn: string): string {
+    const v = sbmsnYn.trim().toUpperCase();
+    if (v === "Y") return "O";
+    if (v === "N") return "X";
+    return sbmsnYn;
+}
 
-    const columnLayout = [
-        'sido',
-        'sgg',
+function splitSidoSggNm(sidoSggNm: string): { sido: string; sgg: string } {
+    const trimmed = sidoSggNm.trim();
+    if (!trimmed) return { sido: "", sgg: "" };
+    const spaceIdx = trimmed.indexOf(" ");
+    if (spaceIdx < 0) return { sido: trimmed, sgg: "" };
+    return {
+        sido: trimmed.slice(0, spaceIdx),
+        sgg: trimmed.slice(spaceIdx + 1).trim(),
+    };
+}
+
+function statColumnKey(statsNm: string, statsCd: string): string {
+    const trimmed = statsNm.trim();
+    const dotIdx = trimmed.indexOf(".");
+    if (dotIdx > 0) return trimmed.slice(0, dotIdx).trim();
+    return statsCd;
+}
+
+type StatDefinition = { statsCd: string; statsNm: string; columnKey: string };
+
+/** submission-status statusList 기준 고정 컬럼(번호) */
+const FIXED_STAT_DEFINITIONS: StatDefinition[] = [
+    { columnKey: "1", statsCd: "ST00010001", statsNm: "1.하수도보급률" },
+    { columnKey: "2-1", statsCd: "ST00020001", statsNm: "2-1.하수관로-지역별 시설현황" },
+    { columnKey: "2-2", statsCd: "ST00020002", statsNm: "2-2.하수관로-시설별 설치현황" },
+    { columnKey: "2-3", statsCd: "ST00020003", statsNm: "2-3.하수관로-관종별 현황" },
+    { columnKey: "2-4", statsCd: "ST00020004", statsNm: "2-4.하수관로-관경별 현황" },
+    { columnKey: "2-5", statsCd: "ST00020005", statsNm: "2-5.하수관로-맨홀 현황" },
+    { columnKey: "3-1", statsCd: "ST00030001", statsNm: "3-1.하수관로유지관리-개․보수" },
+    { columnKey: "3-2", statsCd: "ST00030002", statsNm: "3-2.하수관로유지관리-하수관로준설" },
+    {
+        columnKey: "4-1",
+        statsCd: "ST00040001",
+        statsNm: "4-1.하수저류시설및빗물펌프장-하수저류시설",
+    },
+    {
+        columnKey: "4-2",
+        statsCd: "ST00040002",
+        statsNm: "4-2.하수저류시설및빗물펌프장-빗물펌프장",
+    },
+    { columnKey: "5", statsCd: "ST00050001", statsNm: "5.펌프장" },
+    { columnKey: "6", statsCd: "ST00060001", statsNm: "6.공공하수처리시설" },
+    { columnKey: "7", statsCd: "ST00070001", statsNm: "7.분뇨처리시설" },
+    {
+        columnKey: "8-1",
+        statsCd: "ST00080001",
+        statsNm: "8-1.개인하수처리시설-처리용량별 오수처리시설 현황",
+    },
+    {
+        columnKey: "8-2",
+        statsCd: "ST00080002",
+        statsNm: "8-2.개인하수처리시설-정화조 현황(처리방식별, 처리용량별)",
+    },
+    {
+        columnKey: "8-3",
+        statsCd: "ST00080003",
+        statsNm: "8-3.개인하수처리시설-개인하수도관리지역 지정공고 현황",
+    },
+    { columnKey: "9-1", statsCd: "ST00090001", statsNm: "9-1.하수도재정-하수도 재정 결산" },
+    { columnKey: "9-2", statsCd: "ST00090002", statsNm: "9-2.하수도재정-하수도 요금" },
+    { columnKey: "9-3", statsCd: "ST00090003", statsNm: "9-3.하수도재정-업종별 하수도 사용료" },
+    { columnKey: "9-4", statsCd: "ST00090004", statsNm: "9-4.하수도재정-하수도 원인자부담금" },
+    { columnKey: "10-1", statsCd: "ST00100001", statsNm: "10-1.물재이용-공공하수처리수 재이용" },
+    { columnKey: "10-2", statsCd: "ST00100002", statsNm: "10-2.물재이용-중수도 현황" },
+    { columnKey: "10-3", statsCd: "ST00100003", statsNm: "10-3.물재이용-빗물이용시설현황" },
+    {
+        columnKey: "10-4",
+        statsCd: "ST00100004",
+        statsNm: "10-4.물재이용-하․폐수처리수 재이용시설 설계시공업 등록현황",
+    },
+    {
+        columnKey: "10-5",
+        statsCd: "ST00100005",
+        statsNm: "10-5.물재이용-하․폐수처리수 재이용사업 인가현황",
+    },
+    {
+        columnKey: "11-1",
+        statsCd: "ST00110001",
+        statsNm: "11-1.하수및분뇨찌꺼기(슬러지)처리-하수찌꺼기 발생 및 처리현황",
+    },
+    {
+        columnKey: "11-2",
+        statsCd: "ST00110002",
+        statsNm: "11-2.하수및분뇨찌꺼기(슬러지)처리-소화조 운영 현황",
+    },
+    {
+        columnKey: "11-3",
+        statsCd: "ST00110003",
+        statsNm: "11-3.하수및분뇨찌꺼기(슬러지)처리-하수찌꺼기 처리시설 운영 현황",
+    },
+    {
+        columnKey: "11-4",
+        statsCd: "ST00110004",
+        statsNm: "11-4.하수및분뇨찌꺼기(슬러지)처리-분뇨찌꺼기 처리현황",
+    },
+    {
+        columnKey: "12-1",
+        statsCd: "ST00120001",
+        statsNm: "12-1.하수및분뇨관련산업-공공기관 하수분야",
+    },
+    {
+        columnKey: "12-2",
+        statsCd: "ST00120002",
+        statsNm: "12-2.하수및분뇨관련산업-공공기관 분뇨분야",
+    },
+    {
+        columnKey: "12-3",
+        statsCd: "ST00120003",
+        statsNm: "12-3.하수및분뇨관련산업-분뇨수집 · 운반업 현황",
+    },
+    {
+        columnKey: "12-4",
+        statsCd: "ST00120004",
+        statsNm: "12-4.하수및분뇨관련산업-개인하수처리 관련업 현황",
+    },
+    { columnKey: "13-1", statsCd: "ST00130001", statsNm: "13-1.하수도서비스수준-민원" },
+    { columnKey: "13-2", statsCd: "ST00130002", statsNm: "13-2.하수도서비스수준-주민친화시설" },
+];
+
+const STAT_COLUMN_KEYS = FIXED_STAT_DEFINITIONS.map((d) => d.columnKey);
+
+const STATS_CD_TO_COLUMN_KEY = Object.fromEntries(
+    FIXED_STAT_DEFINITIONS.map((d) => [d.statsCd, d.columnKey]),
+) as Record<string, string>;
+
+function resolveColumnKey(item: UnSubmitDataStatusItem): string {
+    return STATS_CD_TO_COLUMN_KEY[item.statsCd] ?? statColumnKey(item.statsNm, item.statsCd);
+}
+
+/** 헤더(statsNm) 텍스트 길이에 맞춘 컬럼 너비(px) */
+function columnWidthForHeaderText(text: string, min = 88, max = 340): number {
+    return Math.min(max, Math.max(min, text.length * 9 + 28));
+}
+
+function buildColumnInfo(statDefinitions: StatDefinition[]) {
+    const fixedColumns: ColumnConfig[] = [
         {
-            name: 'groupA',
-            hideChildHeaders: false,
-            header: { text: '미입력 하수도 통계 세부항목(번호)' },
-            items: ['1', '2-1', '2-2', '2-3', '2-4', '3-1', '3-2'],
+            name: "sido",
+            fieldName: SIDO_FIELD,
+            header: { text: "시도" },
+            mergeCells: true,
+            editable: false,
+            sortdisable: true,
+            width: 100,
+        },
+        {
+            name: "sgg",
+            fieldName: SGG_FIELD,
+            header: { text: "시군구" },
+            mergeGroupField: SIDO_FIELD,
+            editable: false,
+            sortdisable: true,
+            width: 120,
         },
     ];
 
+    const statColumns: ColumnConfig[] = statDefinitions.map(({ columnKey, statsNm }) => ({
+        name: columnKey,
+        fieldName: columnKey,
+        header: { text: statsNm },
+        editable: false,
+        sortdisable: true,
+        width: columnWidthForHeaderText(statsNm),
+    }));
+
+    const columns = [...fixedColumns, ...statColumns];
+    const statKeys = statDefinitions.map((s) => s.columnKey);
+
+    const columnLayout: ColumnLayoutItem[] = [
+        "sido",
+        "sgg",
+        {
+            name: "statsGroup",
+            hideChildHeaders: false,
+            header: { text: "미입력 하수도 통계 세부항목(번호)" },
+            items: statKeys,
+        },
+    ];
+
+    return { columns, columnLayout, statKeys };
+}
+
+function buildRowsFromStatusList(
+    statusList: UnSubmitDataStatusItem[],
+    statKeys: string[],
+): Record<string, string | number>[] {
+    const rowMap = new Map<string, Record<string, string | number>>();
+    const rowOrder: string[] = [];
+
+    for (const item of statusList) {
+        const { sido, sgg } = splitSidoSggNm(item.sidoSggNm);
+        const rowKey = `${sido}\u0001${sgg}`;
+        const columnKey = resolveColumnKey(item);
+
+        if (!rowMap.has(rowKey)) {
+            const row: Record<string, string | number> = {
+                [SIDO_FIELD]: sido,
+                [SGG_FIELD]: sgg,
+            };
+            for (const key of statKeys) {
+                row[key] = "";
+            }
+            rowMap.set(rowKey, row);
+            rowOrder.push(rowKey);
+        }
+
+        const row = rowMap.get(rowKey)!;
+        if (statKeys.includes(columnKey)) {
+            row[columnKey] = sbmsnYnToOx(item.sbmsnYn);
+        }
+    }
+
+    return rowOrder.map((key) => rowMap.get(key)!);
+}
+
+function buildUnSubmitDataRequest(
+    values: SearchFormValues,
+    userInfo: { dtlInstCd?: string; enoCd?: string; laeSeCd?: string } | null,
+): unSubmitDataRequest {
+    const sewerBzmnCd = values.bsnmCd?.trim();
+    return {
+        statsYr: values.year ?? "",
+        dtlInstCd: userInfo?.dtlInstCd ?? "",
+        enoCd: userInfo?.enoCd ?? "",
+        laeSeCd: userInfo?.laeSeCd ?? "",
+        ...(sewerBzmnCd ? { sewerBzmnCd } : {}),
+        sido: !values.sido || values.sido === "ALL" ? "" : values.sido,
+        sggNm: !values.gugun || values.gugun === "ALL" ? "" : values.gugun,
+        unSubmitOnly: false,
+    };
+}
+
+const COLUMN_INFO = buildColumnInfo(FIXED_STAT_DEFINITIONS);
+
+const NotEnteredStatus = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const userInfo = useUserStore((state) => state.userInfo);
+    const [isLoading, setIsLoading] = useState(false);
+    const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
+    const gridColumnInfo = useMemo(
+        () => ({
+            columns: COLUMN_INFO.columns,
+            columnLayout: COLUMN_INFO.columnLayout,
+        }),
+        [],
+    );
+
+    const handleSearch = async (values: SearchFormValues) => {
+        if (!values.year) {
+            alert("년도를 선택해주세요.");
+            return;
+        }
+        const params = buildUnSubmitDataRequest(values, userInfo);
+        console.log(params);
+        if (!params.dtlInstCd) {
+            alert("기관 정보를 확인할 수 없습니다.");
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+            const response = await statisticsApi.getUnSubmitData(params);
+
+            if (response.status !== "success" || !response.data) {
+                alert(response.message ?? "조회에 실패했습니다.");
+                setRowData([]);
+                return;
+            }
+
+            const statusList = response.data.statusList ?? [];
+            setRowData(toGridRows(buildRowsFromStatusList(statusList, STAT_COLUMN_KEYS)));
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            setRowData([]);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleReset = () => {
+        setRowData([]);
+    };
+
     return (
-        <>
-            <SearchForm />
-            <DataGrid columnInfo={{ columns, columnLayout }} rowData={rowData} setRowData={setRowData} isExcelImport={false} fixedColumns={2} rowStartNum={2} />
-        </>
+        <div className="relative">
+            <SearchForm
+                onSubmit={handleSearch}
+                onReset={handleReset}
+                sidoSelectText="전체"
+            />
+            {isLoading && (
+                <div className="absolute inset-0 z-50 flex items-center justify-center rounded-lg p-10 [data-theme='black']:bg-transparent">
+                    <div className="relative size-[5rem]">
+                        <LoadingWithAnimation color="primary" />
+                    </div>
+                </div>
+            )}
+            <DataGrid
+                columnInfo={gridColumnInfo}
+                rowData={rowData}
+                setRowData={setRowData}
+                isExcelImport={false}
+                fixedColumns={2}
+                rowStartNum={2}
+                fitStyle={GridFitStyle.NONE}
+                enableSort={false}
+            />
+        </div>
     );
 };
 
-export default NotEnteredStatus;
\ No newline at end of file
+export default NotEnteredStatus;
diff --git a/apps/st/src/components/statistics/management/NoticeTalkSending.tsx b/apps/st/src/components/statistics/management/NoticeTalkSending.tsx
new file mode 100644
index 000000000..df0076a76
--- /dev/null
+++ b/apps/st/src/components/statistics/management/NoticeTalkSending.tsx
@@ -0,0 +1,812 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+    getCoreRowModel,
+    type RowSelectionState,
+    useReactTable,
+} from "@tanstack/react-table";
+import type { AxiosError } from "axios";
+
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import type { ApiErrorResponse } from "@/shared/model";
+import {
+    type AdstZoneResponseDto,
+    type BusinessSendRequest,
+    type BusinessSendResponse,
+    noticeTalkSendingApi,
+    type SelectedRecipient,
+    type SewerStUserItem,
+    useNtftalkTemplateList,
+    useNtftalkTemplateVariables,
+    userListColumns,
+    useSewerStUserList,
+    useStAnlsSidoCombo,
+    useStAnlsSigunguCombo,
+} from "@/entities/statistics";
+import {
+    Button,
+    DataTable,
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Input,
+    Label,
+    LoadingWithAnimation,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@common/components";
+
+type CommonVariableKey =
+    | "userNm"
+    | "sido"
+    | "gugun"
+    | "gubunNm"
+    | "deptNm"
+    | "jbgdNm"
+    | "telNo"
+    | "custom";
+
+const EMPTY_ADST_LIST: AdstZoneResponseDto[] = [];
+const GUBUN_OPTIONS = [
+    { value: "PIC", label: "입력자" },
+    { value: "IDFR", label: "승인자" },
+    { value: "MCTPV", label: "검토자" },
+] as const;
+
+function getDefaultStatsYear(): string {
+    return String(new Date().getFullYear() - 1);
+}
+
+function buildTemplateMessage(
+    templateContent: string,
+    variables: Record<string, string>,
+): string {
+    return templateContent.replace(/#?\{([^}]+)\}/g, (_, key: string) => {
+        const value = variables[key.trim()];
+        return value ?? "";
+    });
+}
+
+function getMergedVariables(
+    recipient: SelectedRecipient,
+    commonValues: Record<string, string>,
+): Record<string, string> {
+    return {
+        ...commonValues,
+        ...recipient.variableOverrides,
+        TEL_NUM: recipient.telNo,
+    };
+}
+
+function NtitlkSndng() {
+    const alert = useAlertStore((state) => state.setMessage);
+    const { confirm } = useConfirm();
+
+    const [searchStatsYr, setSearchStatsYr] = useState(getDefaultStatsYear());
+    const [searchSido, setSearchSido] = useState("");
+    const [searchSigungu, setSearchSigungu] = useState("");
+    const [searchGubun, setSearchGubun] = useState("");
+
+    const [appliedParams, setAppliedParams] = useState({
+        statsYr: getDefaultStatsYear(),
+        sewerBzmnCd: "",
+        gubun: "",
+    });
+
+    const [selectedTemplateCode, setSelectedTemplateCode] = useState("");
+    const [selectedRecipients, setSelectedRecipients] = useState<
+        SelectedRecipient[]
+    >([]);
+    const [commonVariableValues, setCommonVariableValues] = useState<
+        Record<string, string>
+    >({});
+    const [commonVariableMapping, setCommonVariableMapping] = useState<
+        Record<string, CommonVariableKey>
+    >({});
+
+    const [previewRecipient, setPreviewRecipient] =
+        useState<SelectedRecipient | null>(null);
+    const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+    const [userListRowSelection, setUserListRowSelection] =
+        useState<RowSelectionState>({});
+
+    const sendMutation = useMutationWrapper<
+        BusinessSendResponse,
+        AxiosError<ApiErrorResponse>,
+        BusinessSendRequest
+    >({
+        mutationFn: (payload) => noticeTalkSendingApi.sendBusiness(payload),
+        onSuccess: (data) => {
+            if (!data.success) {
+                alert(data.message || "알림톡 발송 요청에 실패했습니다.");
+                return;
+            }
+            alert(data.message || "알림톡 발송이 요청되었습니다.");
+            setSelectedRecipients([]);
+            setCommonVariableValues({});
+        },
+    });
+
+    const { data: templatePageData } = useNtftalkTemplateList();
+    const templates = templatePageData?.content ?? [];
+
+    const { data: templateVariablesData } =
+        useNtftalkTemplateVariables(selectedTemplateCode);
+    const variableNames = templateVariablesData?.variables ?? [];
+
+    const { data: sidoData } = useStAnlsSidoCombo();
+    const { data: sigunguData } = useStAnlsSigunguCombo(searchSido);
+    const sidoOptions = sidoData ?? EMPTY_ADST_LIST;
+    const sigunguOptions = sigunguData ?? EMPTY_ADST_LIST;
+
+    const { data: userListResponse, isLoading: isUserListLoading } =
+        useSewerStUserList(appliedParams);
+    const userList = (userListResponse as unknown as SewerStUserItem[]) ?? [];
+    const userListTable = useReactTable({
+        data: userList,
+        columns: userListColumns,
+        getCoreRowModel: getCoreRowModel(),
+        enableRowSelection: true,
+        enableMultiRowSelection: true,
+        state: {
+            rowSelection: userListRowSelection,
+        },
+        onRowSelectionChange: setUserListRowSelection,
+        getRowId: (row, i) => `${i}-${row.telNo}`,
+    });
+
+    const selectedTemplate = useMemo(
+        () =>
+            templates.find(
+                (template) => template.templateCode === selectedTemplateCode,
+            ),
+        [templates, selectedTemplateCode],
+    );
+
+    const previewMessage = useMemo(() => {
+        if (!previewRecipient || !selectedTemplate?.templateContent) return "";
+        return buildTemplateMessage(
+            selectedTemplate.templateContent,
+            getMergedVariables(previewRecipient, commonVariableValues),
+        );
+    }, [previewRecipient, selectedTemplate, commonVariableValues]);
+
+    const handleTemplateChange = (templateCode: string) => {
+        setSelectedTemplateCode(templateCode);
+        setCommonVariableValues({});
+        setCommonVariableMapping({});
+        setSelectedRecipients((prev) =>
+            prev.map((recipient) => ({ ...recipient, variableOverrides: {} })),
+        );
+    };
+
+    const handleSearch = () => {
+        const sewerBzmnCd =
+            searchSido !== ""
+                ? searchSigungu !== ""
+                    ? searchSigungu
+                    : searchSido
+                : "";
+
+        setAppliedParams({
+            statsYr: searchStatsYr,
+            sewerBzmnCd,
+            gubun: searchGubun,
+        });
+        setUserListRowSelection({});
+    };
+
+    const handleReset = () => {
+        const defaultYear = getDefaultStatsYear();
+        setSearchStatsYr(defaultYear);
+        setSearchSido("");
+        setSearchSigungu("");
+        setSearchGubun("");
+        setAppliedParams({
+            statsYr: defaultYear,
+            sewerBzmnCd: "",
+            gubun: "",
+        });
+        setUserListRowSelection({});
+    };
+
+    const handleRemoveRecipient = (telNo: string) => {
+        setSelectedRecipients((prev) =>
+            prev.filter((recipient) => recipient.telNo !== telNo),
+        );
+    };
+
+    const handleAddSelectedToRecipients = () => {
+        const rows = userListTable.getSelectedRowModel().rows;
+        if (rows.length === 0) {
+            alert("추가할 담당자를 선택해주세요.");
+            return;
+        }
+
+        setSelectedRecipients((prev) => {
+            const existingTelNos = new Set(prev.map((r) => r.telNo));
+            const newRecipients = rows
+                .map((row) => row.original)
+                .filter((recipient) => !existingTelNos.has(recipient.telNo))
+                .map((recipient) => ({
+                    ...recipient,
+                    variableOverrides: {},
+                }));
+
+            return [...prev, ...newRecipients];
+        });
+
+        setUserListRowSelection({});
+    };
+
+    const handleApplyCommonValues = () => {
+        setSelectedRecipients((prev) =>
+            prev.map((recipient) => {
+                const newOverrides: Record<string, string> = {};
+
+                variableNames.forEach((variableName) => {
+                    const mappingType = commonVariableMapping[variableName];
+
+                    if (!mappingType) return;
+
+                    if (mappingType === "custom") {
+                        newOverrides[variableName] =
+                            commonVariableValues[variableName] ?? "";
+                    } else {
+                        newOverrides[variableName] =
+                            (recipient[
+                                mappingType as keyof SewerStUserItem
+                            ] as string) ?? "";
+                    }
+                });
+
+                return {
+                    ...recipient,
+                    variableOverrides: {
+                        ...recipient.variableOverrides,
+                        ...newOverrides,
+                    },
+                };
+            }),
+        );
+        setCommonVariableMapping({});
+    };
+
+    const handleResetCommonValues = () => {
+        setCommonVariableMapping({});
+        setCommonVariableValues({});
+    };
+
+    const handleRecipientVariableChange = (
+        telNo: string,
+        variableName: string,
+        value: string,
+    ) => {
+        setSelectedRecipients((prev) =>
+            prev.map((recipient) =>
+                recipient.telNo === telNo
+                    ? {
+                          ...recipient,
+                          variableOverrides: {
+                              ...recipient.variableOverrides,
+                              [variableName]: value,
+                          },
+                      }
+                    : recipient,
+            ),
+        );
+    };
+
+    const handlePreview = (recipient: SelectedRecipient) => {
+        if (!selectedTemplate) {
+            alert("알림톡 템플릿을 먼저 선택해주세요.");
+            return;
+        }
+        setPreviewRecipient(recipient);
+        setIsPreviewOpen(true);
+    };
+
+    const handleSend = async () => {
+        if (!selectedTemplateCode) {
+            alert("알림톡 템플릿을 선택해주세요.");
+            return;
+        }
+
+        const missingVariable = selectedRecipients.some((recipient) =>
+            variableNames.some((name) => {
+                const mergedValue =
+                    recipient.variableOverrides[name] ??
+                    commonVariableValues[name] ??
+                    "";
+                return mergedValue.trim() === "";
+            }),
+        );
+        if (missingVariable) {
+            alert("변수값이 입력되지 않은 발송 대상이 있습니다.");
+            return;
+        }
+        if (
+            !(await confirm(
+                `${selectedRecipients.length}명에게 발송하시겠습니까?`,
+            ))
+        )
+            return;
+
+        sendMutation.mutate({
+            templateCode: selectedTemplateCode,
+            callback: "032-590-4000",
+            recipients: selectedRecipients.map((recipient) =>
+                getMergedVariables(recipient, commonVariableValues),
+            ),
+        });
+    };
+
+    return (
+        <div>
+            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-[32rem_minmax(0,1fr)]">
+                <section className="card card-border space-y-6 p-4 pb-0">
+                    <div className="space-y-2">
+                        <h3 className="text-xl font-semibold">
+                            알림톡 템플릿 선택
+                        </h3>
+                        <div className="flex items-center gap-3">
+                            <Select
+                                value={selectedTemplateCode}
+                                onValueChange={handleTemplateChange}
+                            >
+                                <SelectTrigger className="w-full">
+                                    <SelectValue placeholder="템플릿 선택" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {templates.map((template) => (
+                                        <SelectItem
+                                            key={template.templateCode}
+                                            value={template.templateCode}
+                                        >
+                                            {template.templateName}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    </div>
+
+                    <div className="space-y-4">
+                        <p className="text-lg font-medium">미리보기</p>
+                        <div className="relative">
+                            <div className="h-[32rem] overflow-auto rounded-[20px] rounded-b-none bg-[rgb(176,192,207)] p-8 pb-0 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-full before:rounded-[20px] before:rounded-b-none before:border-[10px] before:border-b-0 before:border-black before:content-['']">
+                                <div className="w-[calc(100%-2rem)] pb-5">
+                                    <span className="text-[1.1rem] text-black">
+                                        하수도통계시스템
+                                    </span>
+                                    <div className="mt-2 rounded-t-[12px] bg-[rgb(247,228,54)] p-4 text-[1.2rem] font-medium text-black">
+                                        알림톡 도착
+                                    </div>
+                                    <div className="whitespace-pre-wrap rounded-b-[12px] bg-white p-4 text-[1.2rem] leading-normal tracking-tight text-black">
+                                        {selectedTemplate?.templateContent ??
+                                            "알림톡 템플릿을 선택하면 미리보기 메시지가 표시됩니다."}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section className="card card-border p-4">
+                    <h3 className="text-xl font-semibold">통계 담당자 목록</h3>
+                    <div className="card card-border mx-0 flex items-center p-4">
+                        <div className="flex items-center gap-6">
+                            <div className="flex items-center gap-2">
+                                <Label className="whitespace-nowrap">
+                                    시도
+                                </Label>
+                                <Select
+                                    value={searchSido}
+                                    onValueChange={(value) => {
+                                        setSearchSido(value);
+                                        setSearchSigungu("");
+                                    }}
+                                >
+                                    <SelectTrigger className="w-[16rem]">
+                                        <SelectValue placeholder="전체" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {sidoOptions.map((option) => (
+                                            <SelectItem
+                                                key={option.adstCd}
+                                                value={option.adstCd}
+                                            >
+                                                {option.adstNm}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Label className="whitespace-nowrap">
+                                    시군구
+                                </Label>
+                                <Select
+                                    value={searchSigungu}
+                                    onValueChange={setSearchSigungu}
+                                    disabled={!searchSido}
+                                >
+                                    <SelectTrigger className="w-[16rem]">
+                                        <SelectValue placeholder="전체" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {sigunguOptions.map((option) => (
+                                            <SelectItem
+                                                key={option.adstCd}
+                                                value={option.adstCd}
+                                            >
+                                                {option.adstNm}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Label className="whitespace-nowrap">
+                                    구분
+                                </Label>
+                                <Select
+                                    value={searchGubun}
+                                    onValueChange={setSearchGubun}
+                                >
+                                    <SelectTrigger className="w-[16rem]">
+                                        <SelectValue placeholder="전체" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {GUBUN_OPTIONS.map((option) => (
+                                            <SelectItem
+                                                key={option.value || "ALL"}
+                                                value={option.value}
+                                            >
+                                                {option.label}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                        </div>
+                        <div className="flex w-full justify-end gap-2">
+                            <Button
+                                color="white"
+                                type="button"
+                                onClick={handleReset}
+                            >
+                                초기화
+                            </Button>
+                            <Button type="button" onClick={handleSearch}>
+                                검색
+                            </Button>
+                        </div>
+                    </div>
+
+                    <div className="h-[28rem] overflow-x-auto rounded-md border">
+                        {isUserListLoading ? (
+                            <div className="flex items-center justify-center p-6">
+                                <div className="relative flex size-[6rem] justify-center">
+                                    <LoadingWithAnimation color="primary" />
+                                </div>
+                            </div>
+                        ) : userList.length === 0 ? (
+                            <div className="p-6 text-center text-muted-foreground">
+                                조회된 담당자가 없습니다.
+                            </div>
+                        ) : (
+                            <DataTable
+                                table={userListTable}
+                                className="min-w-[72rem] text-sm"
+                            />
+                        )}
+                    </div>
+                    {!isUserListLoading && userList.length > 0 && (
+                        <div className="mt-4 flex items-center justify-end gap-4">
+                            <p className="text-xl text-muted-foreground">
+                                선택{" "}
+                                <span className="font-semibold text-foreground">
+                                    {
+                                        userListTable.getSelectedRowModel().rows
+                                            .length
+                                    }
+                                    명
+                                </span>{" "}
+                                / 전체{" "}
+                                <span className="font-semibold text-foreground">
+                                    {userList.length}명
+                                </span>
+                            </p>
+                            <Button
+                                type="button"
+                                color="gray"
+                                onClick={handleAddSelectedToRecipients}
+                            >
+                                + 발송 목록 추가
+                            </Button>
+                        </div>
+                    )}
+                </section>
+            </div>
+
+            <section className="card card-border p-4">
+                <div className="mb-3 flex items-center justify-between">
+                    <h3 className="text-xl font-semibold">발송 목록</h3>
+                    <div className="flex items-center gap-2">
+                        <Button
+                            type="button"
+                            color="white"
+                            onClick={() => setSelectedRecipients([])}
+                            disabled={selectedRecipients.length === 0}
+                        >
+                            초기화
+                        </Button>
+                        <Button
+                            type="button"
+                            color="green"
+                            onClick={handleSend}
+                            disabled={
+                                sendMutation.isPending ||
+                                selectedRecipients.length === 0
+                            }
+                        >
+                            발송
+                        </Button>
+                    </div>
+                </div>
+
+                {variableNames.length > 0 && (
+                    <div className="mb-4 space-y-4 rounded-md border p-3">
+                        <p className="text-lg font-medium">변수 일괄 적용</p>
+                        <div className="grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-6">
+                            {variableNames.map((variableName) => (
+                                <div key={variableName} className="space-y-2">
+                                    <Label className="whitespace-nowrap">{`#{${variableName}}`}</Label>
+                                    <Select
+                                        value={
+                                            commonVariableMapping[
+                                                variableName
+                                            ] ?? ""
+                                        }
+                                        onValueChange={(value) =>
+                                            setCommonVariableMapping(
+                                                (prev) => ({
+                                                    ...prev,
+                                                    [variableName]:
+                                                        value as CommonVariableKey,
+                                                }),
+                                            )
+                                        }
+                                    >
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="선택하세요" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="userNm">
+                                                이름
+                                            </SelectItem>
+                                            <SelectItem value="sido">
+                                                시도
+                                            </SelectItem>
+                                            <SelectItem value="gugun">
+                                                시군구
+                                            </SelectItem>
+                                            <SelectItem value="gubunNm">
+                                                구분
+                                            </SelectItem>
+                                            <SelectItem value="deptNm">
+                                                소속
+                                            </SelectItem>
+                                            <SelectItem value="jbgdNm">
+                                                직급
+                                            </SelectItem>
+                                            <SelectItem value="telNo">
+                                                전화번호
+                                            </SelectItem>
+                                            <SelectItem value="custom">
+                                                직접입력
+                                            </SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                    {commonVariableMapping[variableName] ===
+                                        "custom" && (
+                                        <Input
+                                            placeholder="값을 입력하세요"
+                                            value={
+                                                commonVariableValues[
+                                                    variableName
+                                                ] ?? ""
+                                            }
+                                            onChange={(event) =>
+                                                setCommonVariableValues(
+                                                    (prev) => ({
+                                                        ...prev,
+                                                        [variableName]:
+                                                            event.target.value,
+                                                    }),
+                                                )
+                                            }
+                                        />
+                                    )}
+                                </div>
+                            ))}
+                            <div className="flex items-end gap-2">
+                                <Button
+                                    type="button"
+                                    color="white"
+                                    onClick={handleResetCommonValues}
+                                >
+                                    초기화
+                                </Button>
+                                <Button
+                                    type="button"
+                                    onClick={handleApplyCommonValues}
+                                >
+                                    적용하기
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                <div className="space-y-4">
+                    {selectedRecipients.length === 0 ? (
+                        <p className="rounded-md border p-6 text-center text-muted-foreground">
+                            선택된 발송 대상이 없습니다.
+                        </p>
+                    ) : (
+                        <div className="max-h-[40rem] overflow-x-auto rounded-md border">
+                            <Table variant="line" className="text-sm">
+                                <TableHeader className="top-0">
+                                    <TableRow>
+                                        <TableHead className="min-w-[100px]">
+                                            이름
+                                        </TableHead>
+                                        <TableHead className="min-w-[120px]">
+                                            전화번호
+                                        </TableHead>
+                                        {variableNames.map((variableName) => (
+                                            <TableHead
+                                                key={variableName}
+                                                className="min-w-[180px]"
+                                            >
+                                                #{variableName}
+                                            </TableHead>
+                                        ))}
+                                        <TableHead className="min-w-[160px] text-center">
+                                            버튼
+                                        </TableHead>
+                                    </TableRow>
+                                </TableHeader>
+                                <TableBody>
+                                    {selectedRecipients.map((recipient, i) => (
+                                        <TableRow
+                                            key={`${i}-${recipient.telNo}`}
+                                        >
+                                            <TableCell align="center">
+                                                {recipient.userNm}
+                                            </TableCell>
+                                            <TableCell align="center">
+                                                {recipient.telNo}
+                                            </TableCell>
+                                            {variableNames.map(
+                                                (variableName) => (
+                                                    <TableCell
+                                                        key={`${recipient.telNo}-${variableName}`}
+                                                    >
+                                                        <Input
+                                                            value={
+                                                                recipient
+                                                                    .variableOverrides[
+                                                                    variableName
+                                                                ] ?? ""
+                                                            }
+                                                            onChange={(event) =>
+                                                                handleRecipientVariableChange(
+                                                                    recipient.telNo,
+                                                                    variableName,
+                                                                    event.target
+                                                                        .value,
+                                                                )
+                                                            }
+                                                            className="w-full min-w-[150px]"
+                                                        />
+                                                    </TableCell>
+                                                ),
+                                            )}
+                                            <TableCell align="center">
+                                                <div className="flex justify-center gap-2">
+                                                    <Button
+                                                        type="button"
+                                                        size="sm"
+                                                        color="gray"
+                                                        onClick={() =>
+                                                            handlePreview(
+                                                                recipient,
+                                                            )
+                                                        }
+                                                    >
+                                                        미리보기
+                                                    </Button>
+                                                    <Button
+                                                        type="button"
+                                                        size="sm"
+                                                        color="red"
+                                                        onClick={() =>
+                                                            handleRemoveRecipient(
+                                                                recipient.telNo,
+                                                            )
+                                                        }
+                                                    >
+                                                        제거
+                                                    </Button>
+                                                </div>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>
+                        </div>
+                    )}
+                </div>
+            </section>
+
+            <Dialog open={isPreviewOpen} onOpenChange={setIsPreviewOpen}>
+                <DialogContent
+                    className="max-w-[36rem]"
+                    aria-describedby={undefined}
+                >
+                    <DialogHeader>
+                        <DialogTitle>알림톡 미리보기</DialogTitle>
+                        <DialogDescription className="text-[1.1rem] tracking-tight">
+                            수신자: {previewRecipient?.userNm ?? "-"} /{" "}
+                            {previewRecipient?.telNo ?? "-"}
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="relative">
+                        <div className="h-[32rem] overflow-auto rounded-[20px] rounded-b-none bg-[rgb(176,192,207)] p-8 pb-0 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-full before:rounded-[20px] before:rounded-b-none before:border-[10px] before:border-b-0 before:border-black before:content-['']">
+                            <div className="w-[calc(100%-2rem)] pb-5">
+                                <span className="text-[1.1rem] text-black">
+                                    하수도통계시스템
+                                </span>
+                                <div className="mt-2 rounded-t-[12px] bg-[rgb(247,228,54)] p-4 text-[1.2rem] font-medium text-black">
+                                    알림톡 도착
+                                </div>
+                                <div className="whitespace-pre-wrap rounded-b-[12px] bg-white p-4 text-[1.2rem] leading-normal tracking-tight text-black">
+                                    {previewMessage ||
+                                        "메시지를 생성할 수 없습니다."}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <DialogClose asChild>
+                            <Button type="button" color="white">
+                                닫기
+                            </Button>
+                        </DialogClose>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}
+
+export default NtitlkSndng;
diff --git a/apps/st/src/components/statistics/management/StatisticsInputManagement.tsx b/apps/st/src/components/statistics/management/StatisticsInputManagement.tsx
index 150620d9b..cb63324eb 100644
--- a/apps/st/src/components/statistics/management/StatisticsInputManagement.tsx
+++ b/apps/st/src/components/statistics/management/StatisticsInputManagement.tsx
@@ -1,84 +1,287 @@
-import { useState } from "react";
+import { useCallback, useRef, useState } from "react";
 
-import { DataGrid } from "@rsone/components";
+import { useAlertStore } from "@/shared/lib";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type {
+    StatsInputPeriodItem,
+    StatsInputPeriodListRequest,
+} from "@/entities/statistics/model/statistics-interface";
+import { Button, LoadingWithAnimation } from "@common/components";
+
+import {
+    StatisticsInputPeriodDialog,
+    type StatisticsInputPeriodDialogValues,
+} from "./StatisticsInputPeriodDialog";
+
+import DataGrid from "@/components/module/DataGrid";
 import SearchForm from "@/components/module/SearchForm";
-import type { ColumnConfig } from "@/components/type/DataGrid.type";
+import type { ColumnConfig, DataCellClickCallbackParams } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+
+/** API `YYYYMMDD` 등 → Date */
+function seTypeToDisplayLabel(seType: StatsInputPeriodItem["seType"]): string {
+    if (seType === "INPT") return "입력";
+    if (seType === "VRFC") return "검증";
+    return seType;
+}
+
+function rowSeTypeToCode(row: Record<string, string | number>): "INPT" | "VRFC" {
+    const v = String(row.seType ?? "");
+    if (v === "INPT" || v === "입력") return "INPT";
+    if (v === "VRFC" || v === "검증") return "VRFC";
+    return "INPT";
+}
+
+function parseYmdToDate(ymd: string): Date | undefined {
+    const s = String(ymd ?? "").replace(/\D/g, "");
+    if (s.length !== 8) return undefined;
+    const y = Number(s.slice(0, 4));
+    const m = Number(s.slice(4, 6));
+    const d = Number(s.slice(6, 8));
+    if (!y || m < 1 || m > 12 || d < 1 || d > 31) return undefined;
+    const dt = new Date(y, m - 1, d);
+    if (dt.getFullYear() !== y || dt.getMonth() !== m - 1 || dt.getDate() !== d) {
+        return undefined;
+    }
+    return dt;
+}
+
+function formatYmdForDisplay(ymd: string): string {
+    const s = String(ymd ?? "").replace(/\D/g, "");
+    if (s.length !== 8) return String(ymd ?? "");
+    return `${s.slice(0, 4)}-${s.slice(4, 6)}-${s.slice(6, 8)}`;
+}
+
+const PERIOD_DETAIL_FIELD = "detailInfo";
 
 const StatisticsInputManagement = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const [isLoading, setIsLoading] = useState(false);
     const [rowData, setRowData] = useState<Record<string, string | number>[]>(
         [],
     );
+    const [periodDialogOpen, setPeriodDialogOpen] = useState(false);
+    const [periodDialogMode, setPeriodDialogMode] = useState<"edit" | "create">("edit");
+    const [createDefaultStatsYr, setCreateDefaultStatsYr] = useState("");
+    const [periodDialogInitial, setPeriodDialogInitial] =
+        useState<StatisticsInputPeriodDialogValues | null>(null);
+    const [searchFormValues, setSearchFormValues] = useState<SearchFormValues | null>(null);
+    const lastSearchRef = useRef<SearchFormValues | null>(null);
+
+    const handleSearch = async (values: SearchFormValues) => {
+        if (!values.year) {
+            alert("년도를 선택해주세요.");
+            return;
+        }
+        lastSearchRef.current = values;
+        try {
+            setIsLoading(true);
+            const params: StatsInputPeriodListRequest = {
+                statsYr: values.year,
+                ...(values.clsfCd && values.clsfCd !== "ALL"
+                    ? { seType: values.clsfCd }
+                    : {}),
+            };
+            const res = await statisticsApi.getStatsInputPeriodList(params);
+            if (res.status === "success" && Array.isArray(res.data)) {
+                const rowsForGrid = res.data.map((row) => ({
+                    ...row,
+                    seType: seTypeToDisplayLabel(row.seType),
+                    inptBgngYmd: formatYmdForDisplay(row.inptBgngYmd),
+                    inptEndYmd: formatYmdForDisplay(row.inptEndYmd),
+                    [PERIOD_DETAIL_FIELD]: "상세정보",
+                }));
+                setRowData(toGridRows(rowsForGrid));
+            } else {
+                setRowData([]);
+                alert(res.message || "데이터 조회에 실패했습니다.");
+            }
+        } catch {
+            setRowData([]);
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleReset = () => {
+        setRowData([]);
+    };
+
+    const handleRegisterClick = () => {
+        const yr =
+            searchFormValues?.year ?? lastSearchRef.current?.year ?? "";
+        if (!yr) {
+            alert("검색 폼에서 년도를 선택해 주세요.");
+            return;
+        }
+        setPeriodDialogMode("create");
+        setCreateDefaultStatsYr(yr);
+        setPeriodDialogInitial(null);
+        setPeriodDialogOpen(true);
+    };
+
+    const openPeriodDetailForRow = useCallback(
+        async (row: Record<string, string | number>) => {
+            const seCdRaw = row.seCd;
+            const seCdNum =
+                typeof seCdRaw === "number"
+                    ? seCdRaw
+                    : parseInt(String(seCdRaw ?? ""), 10);
+            const seCd = Number.isFinite(seCdNum) ? seCdNum : 0;
+            const statsYr = String(row.statsYr ?? "");
+            const seType = rowSeTypeToCode(row);
+
+            try {
+                setIsLoading(true);
+                const res = await statisticsApi.getStatsInputPeriodDetail({
+                    statsYr,
+                    seType,
+                    seCd,
+                });
+
+                if (res.status !== "success" || !res.data) {
+                    alert(res.message || "상세 정보를 조회하지 못했습니다.");
+                    return;
+                }
+
+                const detail = res.data;
+                setPeriodDialogMode("edit");
+                setPeriodDialogInitial({
+                    statsYr: String(detail.statsYr ?? statsYr),
+                    seType: detail.seType === "VRFC" ? "VRFC" : "INPT",
+                    seCd:
+                        typeof detail.seCd === "number" && Number.isFinite(detail.seCd)
+                            ? detail.seCd
+                            : seCd,
+                    inptBgngYmd: parseYmdToDate(detail.inptBgngYmd),
+                    inptEndYmd: parseYmdToDate(detail.inptEndYmd),
+                });
+                setPeriodDialogOpen(true);
+            } catch {
+                alert("상세 정보 조회 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [alert],
+    );
+
+    const handlePeriodDetailCellClick = useCallback(
+        ({ fieldName, row }: DataCellClickCallbackParams) => {
+            if (fieldName !== PERIOD_DETAIL_FIELD) return;
+            void openPeriodDetailForRow(row);
+        },
+        [openPeriodDetailForRow],
+    );
 
     const columns: ColumnConfig[] = [
         {
-            name: "sido",
-            fieldName: "시도",
-            header: { text: "시도" },
-            mergeCells: true,
+            name: "statsYr",
+            fieldName: "statsYr",
+            header: { text: "연도" },
             editable: false,
-            sortdisable: true,
         },
         {
-            name: "sgg",
-            fieldName: "시군구",
-            header: { text: "시군구" },
-            mergeCells: true,
+            name: "seType",
+            fieldName: "seType",
+            header: { text: "분류" },
             editable: false,
-            sortdisable: true,
         },
         {
-            name: "구분",
-            fieldName: "구분",
+            name: "seCd",
+            fieldName: "seCd",
             header: { text: "구분" },
             editable: false,
-            sortdisable: true,
         },
         {
-            name: "광역자치단체",
-            fieldName: "광역자치단체",
-            header: { text: "광역자치단체" },
+            name: "inptBgngYmd",
+            fieldName: "inptBgngYmd",
+            header: { text: "시작일" },
             editable: false,
-            sortdisable: true,
         },
         {
-            name: "공단",
-            fieldName: "공단",
-            header: { text: "공단" },
+            name: "inptEndYmd",
+            fieldName: "inptEndYmd",
+            header: { text: "종료일" },
             editable: false,
-            sortdisable: true,
         },
         {
-            name: "처리내역",
-            fieldName: "처리내역",
-            header: { text: "처리내역" },
+            name: PERIOD_DETAIL_FIELD,
+            fieldName: PERIOD_DETAIL_FIELD,
+            header: { text: "상세정보" },
             editable: false,
-            sortdisable: true,
+            width: 118,
+            styleName: "rg-cell-outline-action-btn",
         },
     ];
 
     const columnLayout = [
-        "sido",
-        "sgg",
-        "구분",
-        {
-            name: "groupA",
-            hideChildHeaders: false,
-            header: { text: "검토내역" },
-            items: ["광역자치단체", "공단", "처리내역"],
-        },
+        "statsYr",
+        "seType",
+        "seCd",
+        "inptBgngYmd",
+        "inptEndYmd",
+        PERIOD_DETAIL_FIELD,
     ];
 
     return (
-        <>
-            <SearchForm sido={false} />
+        <div className="relative">
+            <SearchForm
+                sido={false}
+                gugun={false}
+                clsf
+                onSubmit={handleSearch}
+                onReset={handleReset}
+                onValuesChange={setSearchFormValues}
+            />
+            <div className="card !py-0">
+                <div className="flex justify-end items-center gap-[0.6rem] mx-[0.6rem]">
+                    <Button
+                        color="primary"
+                        className="h-[3.2rem] w-[96px]"
+                        type="button"
+                        onClick={handleRegisterClick}
+                    >
+                        <span>등록</span>
+                    </Button>
+                </div>
+            </div>
             <DataGrid
                 columnInfo={{ columns, columnLayout }}
                 rowData={rowData}
+                enableSort={false}
                 setRowData={setRowData}
                 isExcelImport={false}
                 isExcelExport={false}
+                onDataCellClick={handlePeriodDetailCellClick}
             />
-        </>
+            <StatisticsInputPeriodDialog
+                open={periodDialogOpen}
+                mode={periodDialogMode}
+                createDefaultStatsYr={createDefaultStatsYr}
+                onOpenChange={(open) => {
+                    setPeriodDialogOpen(open);
+                    if (!open) {
+                        setPeriodDialogInitial(null);
+                        setPeriodDialogMode("edit");
+                    }
+                }}
+                initial={periodDialogInitial}
+                onSaveSuccess={async () => {
+                    const v = lastSearchRef.current;
+                    if (v) await handleSearch(v);
+                }}
+            />
+            {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>
+            )}
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/management/StatisticsInputPeriodDialog.tsx b/apps/st/src/components/statistics/management/StatisticsInputPeriodDialog.tsx
new file mode 100644
index 000000000..4e0c878da
--- /dev/null
+++ b/apps/st/src/components/statistics/management/StatisticsInputPeriodDialog.tsx
@@ -0,0 +1,317 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import { useAlertStore } from "@/shared/lib";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type {
+    StatsInputPeriodDeleteRequest,
+    StatsInputPeriodSaveRequest,
+} from "@/entities/statistics/model/statistics-interface";
+import {
+    Button,
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Input,
+    InputDatePicker,
+    Label,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@common/components";
+
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
+export type StatisticsInputPeriodDialogValues = {
+    statsYr: string;
+    seType: "INPT" | "VRFC";
+    seCd: number;
+    inptBgngYmd: Date | undefined;
+    inptEndYmd: Date | undefined;
+};
+
+export type StatisticsInputPeriodDialogMode = "edit" | "create";
+
+function normalizeStatsYrInput(raw: string): string {
+    return raw.replace(/\D/g, "").slice(0, 4);
+}
+
+function formatDateToYmd(d: Date | undefined): string | null {
+    if (!d || Number.isNaN(d.getTime())) return null;
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}${m}${day}`;
+}
+
+export interface StatisticsInputPeriodDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** 행 클릭(수정) 시에만 전달. 등록 모드에서는 null */
+    initial: StatisticsInputPeriodDialogValues | null;
+    mode: StatisticsInputPeriodDialogMode;
+    /** mode가 create일 때 SearchForm의 연도 */
+    createDefaultStatsYr?: string;
+    /** 저장 성공 후 목록 재조회 등 */
+    onSaveSuccess?: () => void | Promise<void>;
+}
+
+export function StatisticsInputPeriodDialog({
+    open,
+    onOpenChange,
+    initial,
+    mode,
+    createDefaultStatsYr,
+    onSaveSuccess,
+}: StatisticsInputPeriodDialogProps) {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const { confirm } = useConfirm();
+    const [statsYr, setStatsYr] = useState("");
+    const [seType, setSeType] = useState<"INPT" | "VRFC" | null>(null);
+    const [seCdInput, setSeCdInput] = useState("");
+    const [inptBgngYmd, setInptBgngYmd] = useState<Date | undefined>(undefined);
+    const [inptEndYmd, setInptEndYmd] = useState<Date | undefined>(undefined);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    useEffect(() => {
+        if (!open) return;
+        if (mode === "create") {
+            setStatsYr(normalizeStatsYrInput(createDefaultStatsYr ?? ""));
+            setSeType(null);
+            setSeCdInput("0");
+            setInptBgngYmd(undefined);
+            setInptEndYmd(undefined);
+            return;
+        }
+        if (!initial) return;
+        setStatsYr(normalizeStatsYrInput(String(initial.statsYr ?? "")));
+        setSeType(initial.seType);
+        setSeCdInput(String(Number.isFinite(initial.seCd) ? initial.seCd : 0));
+        setInptBgngYmd(initial.inptBgngYmd);
+        setInptEndYmd(initial.inptEndYmd);
+    }, [open, mode, initial, createDefaultStatsYr]);
+
+    const handleSave = async () => {
+        const bgng = formatDateToYmd(inptBgngYmd);
+        const end = formatDateToYmd(inptEndYmd);
+        if (!bgng || !end) {
+            alert("시작일과 종료일을 선택해주세요.");
+            return;
+        }
+        if (bgng > end) {
+            alert("시작일은 종료일보다 늦을 수 없습니다.");
+            return;
+        }
+        if (seType === null) {
+            alert("분류를 선택해주세요.");
+            return;
+        }
+        const seCdParsed =
+            mode === "create"
+                ? 0
+                : (() => {
+                    const n = parseInt(seCdInput, 10);
+                    return Number.isFinite(n) && n >= 0 ? n : NaN;
+                })();
+        if (mode === "edit" && !Number.isFinite(seCdParsed)) {
+            alert("구분 값이 올바르지 않습니다.");
+            return;
+        }
+        const yr = normalizeStatsYrInput(statsYr.trim());
+        if (mode === "create" && !/^\d{4}$/.test(yr)) {
+            alert("연도는 숫자 4자리로 입력해 주세요.");
+            return;
+        }
+        if (mode === "edit" && !yr) {
+            alert("연도가 없습니다.");
+            return;
+        }
+        try {
+            setIsSubmitting(true);
+            const userInfo = await getUserInfo();
+            const param: StatsInputPeriodSaveRequest = {
+                statsYr: yr,
+                seType,
+                inptBgngYmd: bgng,
+                inptEndYmd: end,
+                rgtrId: userInfo.userUnqId,
+            };
+            if (!isCreate) {
+                param.seCd = seCdParsed;
+            }
+            const res = await statisticsApi.saveStatsInputPeriod(param);
+            if (res.status === "success") {
+                alert(`${isCreate ? '등록 되었습니다.' : '수정 되었습니다.'}`);
+                onOpenChange(false);
+                await onSaveSuccess?.();
+            } else {
+                alert(res.message || "저장에 실패했습니다.");
+            }
+        } catch {
+            alert("저장 중 오류가 발생했습니다.");
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const handleDelete = async () => {
+        if (mode === "create" || !initial) return;
+        if (!(await confirm("삭제하시겠습니까?"))) return;
+
+        const bgng = formatDateToYmd(initial.inptBgngYmd);
+        const end = formatDateToYmd(initial.inptEndYmd);
+        if (!bgng || !end) {
+            alert("삭제할 기간 정보가 없습니다.");
+            return;
+        }
+        const yr = normalizeStatsYrInput(String(initial.statsYr ?? ""));
+        if (!yr) {
+            alert("연도가 없습니다.");
+            return;
+        }
+        const seCd =
+            Number.isFinite(initial.seCd) && initial.seCd >= 0 ? initial.seCd : 0;
+
+        try {
+            setIsSubmitting(true);
+            const userInfo = await getUserInfo();
+            const param: StatsInputPeriodDeleteRequest = {
+                statsYr: yr,
+                seType: initial.seType,
+                seCd,
+                inptBgngYmd: bgng,
+                inptEndYmd: end,
+                rgtrId: userInfo.userUnqId,
+            };
+            const res = await statisticsApi.deleteStatsInputPeriod(param);
+            if (res.status === "success") {
+                alert("삭제되었습니다.");
+                onOpenChange(false);
+                await onSaveSuccess?.();
+            } else {
+                alert(res.message || "삭제에 실패했습니다.");
+            }
+        } catch {
+            alert("삭제 중 오류가 발생했습니다.");
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const isCreate = mode === "create";
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-[48rem]" aria-describedby={undefined}>
+                <DialogHeader>
+                    <DialogTitle>{isCreate ? "입력 기간 등록" : "입력 관리"}</DialogTitle>
+                </DialogHeader>
+                <div className="flex flex-col gap-4 py-2">
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">연도</Label>
+                        {isCreate ? (
+                            <Input
+                                type="text"
+                                inputMode="numeric"
+                                maxLength={4}
+                                autoComplete="off"
+                                value={statsYr}
+                                onChange={(e) =>
+                                    setStatsYr(normalizeStatsYrInput(e.target.value))
+                                }
+                                placeholder="예: 2025"
+                                disabled={isSubmitting}
+                                className="!text-[1.3rem]"
+                            />
+                        ) : (
+                            <Input
+                                value={statsYr}
+                                readOnly
+                                disabled
+                                className="!text-[1.3rem]"
+                            />
+                        )}
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">분류</Label>
+                        <Select
+                            value={seType ?? undefined}
+                            onValueChange={(v) => setSeType(v as "INPT" | "VRFC")}
+                            disabled={isSubmitting || mode === "edit"}
+                        >
+                            <SelectTrigger className="w-full">
+                                <SelectValue placeholder="선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="INPT">입력</SelectItem>
+                                <SelectItem value="VRFC">검증</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    {!isCreate && (
+                        <div className="flex flex-col gap-2">
+                            <Label className="text-label">구분</Label>
+                            <Input
+                                type="number"
+                                inputMode="numeric"
+                                min={0}
+                                value={seCdInput}
+                                disabled
+                                className="!text-[1.3rem]"
+                            />
+                        </div>
+                    )}
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">시작일</Label>
+                        <InputDatePicker
+                            value={inptBgngYmd}
+                            onChange={setInptBgngYmd}
+                            className="w-full"
+                        />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">종료일</Label>
+                        <InputDatePicker
+                            value={inptEndYmd}
+                            onChange={setInptEndYmd}
+                            className="w-full"
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button type="button" color="gray" disabled={isSubmitting}>
+                            닫기
+                        </Button>
+                    </DialogClose>
+                    {!isCreate && (
+                        <Button
+                            type="button"
+                            color="red"
+                            disabled={isSubmitting}
+                            onClick={() => void handleDelete()}
+                        >
+                            삭제
+                        </Button>
+                    )}
+                    <Button
+                        type="button"
+                        color="green"
+                        disabled={isSubmitting}
+                        onClick={() => void handleSave()}
+                    >
+                        {isCreate ? '등록' : '수정'}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/apps/st/src/components/statistics/management/StatisticsReviewHistory.tsx b/apps/st/src/components/statistics/management/StatisticsReviewHistory.tsx
deleted file mode 100644
index 96bde4c32..000000000
--- a/apps/st/src/components/statistics/management/StatisticsReviewHistory.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useState } from "react";
-
-import { DataGrid } from "@rsone/components";
-import SearchForm from "@/components/module/SearchForm";
-import type { ColumnConfig } from "@/components/type/DataGrid.type";
-
-const StatisticsReviewHistory = () => {
-    const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
-
-    const columns: ColumnConfig[] = [
-        { name: 'sido', fieldName: '시도', header: { text: '시도' }, mergeCells: true, editable: false, sortdisable: true },
-        { name: 'sgg', fieldName: '시군구', header: { text: '시군구' }, mergeCells: true, editable: false, sortdisable: true },
-        { name: '구분', fieldName: '구분', header: { text: '구분' }, editable: false, sortdisable: true },
-        { name: '광역자치단체', fieldName: '광역자치단체', header: { text: '광역자치단체' }, editable: false, sortdisable: true },
-        { name: '공단', fieldName: '공단', header: { text: '공단' }, editable: false, sortdisable: true },
-        { name: '처리내역', fieldName: '처리내역', header: { text: '처리내역' }, editable: false, sortdisable: true },
-    ];
-
-    const columnLayout = [
-        'sido',
-        'sgg',
-        '구분',
-        {
-            name: 'groupA',
-            hideChildHeaders: false,
-            header: { text: '검토내역' },
-            items: ['광역자치단체', '공단', '처리내역'],
-        },
-    ];
-
-    return (
-        <>
-            <SearchForm />
-            <DataGrid columnInfo={{ columns, columnLayout }} rowStartNum={2} fixedColumns={3} rowData={rowData} setRowData={setRowData} isExcelImport={false} />
-        </>
-    );
-};
-
-export default StatisticsReviewHistory;
\ No newline at end of file
diff --git a/apps/st/src/components/statistics/review/PublicSewageFacilityRvw.tsx b/apps/st/src/components/statistics/review/PublicSewageFacilityRvw.tsx
index b929e1e3f..6d23f3c87 100644
--- a/apps/st/src/components/statistics/review/PublicSewageFacilityRvw.tsx
+++ b/apps/st/src/components/statistics/review/PublicSewageFacilityRvw.tsx
@@ -1,47 +1,281 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
-import { DataGrid } from "@rsone/components";
+import { LoadingWithAnimation } from "@common/components";
+import { useAlertStore, useUserStore } from "@/shared/lib";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import { statisticsManagementApi } from "@/entities/statistics/api/statistics-management-service";
+import type { PublicSewageFacilityReviewItem } from "@/entities/statistics/model/statistics-public-sewage-facility-review-interface";
+import type { StatsStatusInfo } from "@/entities/statistics/model/statistics-sewage-pipe-review-interface";
+import type {
+    ReviewOpinionSaveRequest,
+    ReviewerInfoRequest,
+} from "@/entities/statistics/model/statistics-interface";
+import DataGrid from "@/components/module/DataGrid";
 import SearchForm from "@/components/module/SearchForm";
-import SaveButton from "@/components/button/SaveButton";
-import ApproveButton from "@/components/button/ApproveButton";
+import SubmitButton from "@/components/button/SumitButton";
 import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
 import ReturnButton from "@/components/button/ReturnButton";
+import { ReturnReasonDialog } from "@/components/statistics/review/ReturnReasonDialog";
+import { ReviewSubmitDialog } from "@/components/statistics/review/ReviewSubmitDialog";
+import {
+    ReviewOpinionDialog,
+    type ReviewOpinionDialogContext,
+} from "@/components/statistics/review/ReviewOpinionDialog";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
 
 import { PublicSewageFacilityInfoList } from "@/components/util/column/review/PublicSewageFacilityRvwColumn";
 
 // 하수도 통계 관리 06.공공하수처리시설
 const PublicSewageFacilityRvw = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const userInfo = useUserStore((state) => state.userInfo);
     const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [statsStatusInfo, setStatsStatusInfo] = useState<StatsStatusInfo>({});
+    const [reviewOpinionOpen, setReviewOpinionOpen] = useState(false);
+    const [returnDialogOpen, setReturnDialogOpen] = useState(false);
+    const [submitDialogOpen, setSubmitDialogOpen] = useState(false);
+    const [reviewOpinionContext, setReviewOpinionContext] =
+        useState<ReviewOpinionDialogContext | null>(null);
+    const [latestReviewOpinion, setLatestReviewOpinion] = useState("");
+    const [latestProcessHistory, setLatestProcessHistory] = useState("");
+    const [lastSearchValues, setLastSearchValues] = useState<SearchFormValues | null>(null);
 
-    const approveFunc = () => {
-        console.log('approveFunc');
+    const columnInfo = useMemo(() => {
+        const { columns, columnLayout, fixedColumns, rowStartNum } = PublicSewageFacilityInfoList;
+        return {
+            columnLayout,
+            fixedColumns,
+            rowStartNum,
+            columns: columns.map((col) => ({
+                ...col,
+                editable: false as const,
+            })),
+        };
+    }, []);
+
+    const { showReviewOpinionButton, showReturnButton, showSubmitButton } = useMemo(() => {
+        const submit = statsStatusInfo.submitStatusCd != null ? String(statsStatusInfo.submitStatusCd) : "";
+        const prvn = statsStatusInfo.prvnStatusCd != null ? String(statsStatusInfo.prvnStatusCd) : "";
+        const submitIs3 = submit === "3";
+        const reviewSubmitVisible = submitIs3 && (prvn === "0" || prvn === "1");
+        return {
+            showReviewOpinionButton: reviewSubmitVisible,
+            showSubmitButton: reviewSubmitVisible,
+            showReturnButton: submitIs3 && prvn !== "3",
+        };
+    }, [statsStatusInfo]);
+
+    const showActionBar =
+        showReviewOpinionButton || showReturnButton || showSubmitButton;
+
+    const submitDialogContext = useMemo<ReviewerInfoRequest | null>(() => {
+        if (reviewOpinionContext == null) {
+            return null;
+        }
+
+        const instSeCd = userInfo?.instSeCd ?? "";
+        if (!instSeCd) {
+            return null;
+        }
+
+        return {
+            statsYr: reviewOpinionContext.statsYr,
+            sewerBzmnCd: reviewOpinionContext.sewerBzmnCd,
+            statsCd: reviewOpinionContext.statsCd,
+            instSeCd,
+        };
+    }, [reviewOpinionContext, userInfo?.instSeCd]);
+
+    const handleReset = () => {
+        setRowData([]);
+        setStatsStatusInfo({});
+        setReviewOpinionContext(null);
+        setLatestReviewOpinion("");
+        setLatestProcessHistory("");
+        setLastSearchValues(null);
+        setSubmitDialogOpen(false);
     };
 
-    const saveFunc = () => {
-        console.log('submit');
+    const handleSearch = async (values: SearchFormValues) => {
+        if (!values.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
+            return;
+        }
+        setLastSearchValues(values);
+
+        try {
+            setIsLoading(true);
+
+            const response = await statisticsManagementApi.getPublicSewageFacilityReviewList({
+                ctpvNm: values.sido,
+                sggNm: values.gugun === "ALL" ? "" : values.gugun,
+                sewerBzmnCd: values.bsnmCd,
+                statsYr: values.year,
+                swtrmtFcltNm: values.fctName,
+            });
+
+            if (response.status === "success" && response.data) {
+                const rawList = response.data.publicSewageList;
+                const convertedData: PublicSewageFacilityReviewItem[] = rawList.map((item) => ({
+                    ...item,
+                    fcltPstnCn: item.fcltPstnCn ?? "",
+                    prxyBzentyNmCn: item.prxyBzentyNmCn ?? "",
+                    prxyCtrtCn: item.prxyCtrtCn ?? "",
+                    intgPrcsFcltCn: item.intgPrcsFcltCn ?? "",
+                    rmrk: item.rmrk ?? "",
+                })) as PublicSewageFacilityReviewItem[];
+
+                setStatsStatusInfo(response.data.statsStatusInfo);
+                setReviewOpinionContext({
+                    statsYr: values.year ?? "",
+                    sewerBzmnCd: values.bsnmCd ?? "",
+                    statsCd: response.data.statsStatusInfo.statsCd ?? "",
+                });
+                setLatestReviewOpinion(
+                    response.data.statsStatusInfo.splmntOpnnCn ?? "",
+                );
+                setLatestProcessHistory(
+                    response.data.statsStatusInfo.wrterOpnnCn ?? "",
+                );
+                setRowData(toGridRows(convertedData as unknown as object[]));
+            } else {
+                setRowData([]);
+                setStatsStatusInfo({});
+                setReviewOpinionContext(null);
+                setLatestReviewOpinion("");
+                setLatestProcessHistory("");
+                alert(response.message || "데이터가 없습니다.");
+            }
+        } catch (error) {
+            console.error("공공하수처리시설 조회 중 에러 발생:", error);
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
     };
 
-    const reviewOpinionFunc = () => {
-        console.log('reviewOpinionFunc');
+    const submitFunc = () => {
+        if (submitDialogContext == null) {
+            alert("조회 후 제출할 수 있습니다.");
+            return;
+        }
+
+        setSubmitDialogOpen(true);
     };
 
-    const returnFunc = () => {
-        console.log('returnFunc');
+    const reviewOpinionFunc = async () => {
+        if (reviewOpinionContext == null) {
+            alert("조회 후 검토의견을 작성할 수 있습니다.");
+            return;
+        }
+
+        try {
+            const detailRes = await statisticsApi.getReviewOpinionDetail({
+                statsYr: reviewOpinionContext.statsYr,
+                sewerBzmnCd: reviewOpinionContext.sewerBzmnCd,
+                statsCd: reviewOpinionContext.statsCd,
+            });
+
+            if (detailRes.status !== "success") {
+                alert(detailRes.message || "검토의견 조회에 실패했습니다.");
+                return;
+            }
+
+            const row = detailRes.data?.[0];
+            setLatestReviewOpinion(row?.splmntOpnnCn ?? "");
+            setLatestProcessHistory(row?.wrterOpnnCn ?? "");
+            setReviewOpinionOpen(true);
+        } catch {
+            alert("검토의견 조회 중 오류가 발생했습니다.");
+        }
+    };
+
+    const saveReviewOpinion = async (param: ReviewOpinionSaveRequest) => {
+        try {
+            const response = await statisticsApi.saveReviewOpinion(param);
+            if (response.status !== "success") {
+                alert(response.message || "저장에 실패했습니다.");
+                return;
+            }
+            alert(response.message || "저장되었습니다.");
+            setStatsStatusInfo((prev) => ({
+                ...prev,
+                splmntOpnnCn: param.splmntOpnnCn,
+                wrterOpnnCn: param.wrterOpnnCn,
+            }));
+            setLatestReviewOpinion(param.splmntOpnnCn);
+            setLatestProcessHistory(param.wrterOpnnCn);
+        } catch {
+            alert("저장 중 오류가 발생했습니다.");
+        }
+    };
+
+    const returnFunc = () => setReturnDialogOpen(true);
+
+    const handleSaveReturnReason = async () => {
+        if (lastSearchValues != null) {
+            await handleSearch(lastSearchValues);
+        }
     };
 
     return (
-        <>
-            <SearchForm fctName={true} />
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
-                    <ApproveButton approveFunc={approveFunc} />
-                    <ReturnButton returnFunc={returnFunc} />
-                    <SaveButton saveFunc={saveFunc} />
+        <div className="relative">
+            <SearchForm fctName={true} onSubmit={handleSearch} onReset={handleReset} />
+            {showActionBar && (
+                <div className="card !py-0">
+                    <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
+                        {showReviewOpinionButton && (
+                            <ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
+                        )}
+                        {showReturnButton && <ReturnButton returnFunc={returnFunc} />}
+                        {showSubmitButton && <SubmitButton submitFunc={submitFunc} />}
+                    </div>
                 </div>
-            </div>
-            <DataGrid columnInfo={PublicSewageFacilityInfoList} isExcelImport={false} rowStartNum={3} fixedColumns={3} rowData={rowData} setRowData={setRowData} />
-        </>
+            )}
+
+            {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>
+            )}
+
+            <DataGrid
+                columnInfo={columnInfo}
+                isExcelImport={false}
+                fixedColumns={columnInfo.fixedColumns}
+                rowStartNum={columnInfo.rowStartNum}
+                rowData={rowData}
+                setRowData={setRowData}
+            />
+            <ReviewOpinionDialog
+                open={reviewOpinionOpen}
+                onOpenChange={setReviewOpinionOpen}
+                context={reviewOpinionContext}
+                initialReviewOpinion={latestReviewOpinion}
+                initialProcessHistory={latestProcessHistory}
+                onSave={saveReviewOpinion}
+            />
+            <ReviewSubmitDialog
+                open={submitDialogOpen}
+                onOpenChange={setSubmitDialogOpen}
+                context={submitDialogContext}
+                onSubmitted={async () => {
+                    if (lastSearchValues != null) {
+                        await handleSearch(lastSearchValues);
+                    }
+                }}
+            />
+            <ReturnReasonDialog
+                open={returnDialogOpen}
+                onOpenChange={setReturnDialogOpen}
+                context={reviewOpinionContext}
+                onSave={handleSaveReturnReason}
+            />
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/review/ReturnReasonDialog.tsx b/apps/st/src/components/statistics/review/ReturnReasonDialog.tsx
new file mode 100644
index 000000000..c45acacd0
--- /dev/null
+++ b/apps/st/src/components/statistics/review/ReturnReasonDialog.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+import {
+    Button,
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Label,
+    Textarea,
+} from "@common/components";
+
+import type { ReviewReturnSaveRequest } from "@/entities/statistics/model/statistics-interface";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import { useAlertStore } from "@/shared/lib";
+
+export type ReturnReasonDialogContext = Pick<
+    ReviewReturnSaveRequest,
+    "statsYr" | "sewerBzmnCd" | "statsCd"
+>;
+
+export interface ReturnReasonDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    context: ReturnReasonDialogContext | null;
+    onSave?: () => void | Promise<void>;
+}
+
+export function ReturnReasonDialog({
+    open,
+    onOpenChange,
+    context,
+    onSave,
+}: ReturnReasonDialogProps) {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const { confirm } = useConfirm();
+    const [reason, setReason] = useState("");
+    const [isSaving, setIsSaving] = useState(false);
+    const [reasonError, setReasonError] = useState(false);
+
+    const resetForm = () => {
+        setReason("");
+        setReasonError(false);
+    };
+
+    const handleDialogOpenChange = (nextOpen: boolean) => {
+        if (!nextOpen) resetForm();
+        onOpenChange(nextOpen);
+    };
+
+    useEffect(() => {
+        if (!open) return;
+        resetForm();
+    }, [open]);
+
+    const handleSave = async () => {
+        if (reason.trim() === "") {
+            setReasonError(true);
+            return;
+        }
+
+        if (
+            context == null ||
+            context.statsYr === "" ||
+            context.sewerBzmnCd === "" ||
+            context.statsCd === ""
+        ) {
+            alert("시도·시군구·년도로 조회한 뒤 반려 처리할 수 있습니다.");
+            return;
+        }
+
+        if (!(await confirm("반려 처리 하시겠습니까?"))) {
+            return;
+        }
+
+        try {
+            setIsSaving(true);
+            let userInfo: Awaited<ReturnType<typeof getUserInfo>>;
+            try {
+                userInfo = await getUserInfo();
+            } catch {
+                alert("사용자 정보를 불러오지 못했습니다. 다시 시도해주세요.");
+                return;
+            }
+
+            const param: ReviewReturnSaveRequest = {
+                type: "REVIEW",
+                statsYr: context.statsYr,
+                sewerBzmnCd: context.sewerBzmnCd,
+                statsCd: context.statsCd,
+                rjctOpnnCn: reason,
+                mdfrId: userInfo.userUnqId,
+            };
+
+            const response = await statisticsApi.saveReviewReturn(param);
+            if (response.resultCode.toLowerCase() !== "success") {
+                alert(response.message || "반려 처리 중 오류가 발생했습니다.");
+                return;
+            }
+
+            alert("반려 처리 되었습니다.");
+            await onSave?.();
+            resetForm();
+            onOpenChange(false);
+        } catch {
+            alert("반려 처리 중 오류가 발생했습니다.");
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+            <DialogContent className="max-w-[56rem]" aria-describedby={undefined}>
+                <DialogHeader>
+                    <DialogTitle>반려</DialogTitle>
+                </DialogHeader>
+                <div className="flex flex-col gap-4 py-2">
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label mb-2">반려 사유</Label>
+                        <Textarea
+                            value={reason}
+                            onChange={(e) => {
+                                setReason(e.target.value);
+                                if (reasonError) {
+                                    setReasonError(false);
+                                }
+                            }}
+                            className="min-h-[12rem] resize-y !text-[1.3rem] !leading-6"
+                            placeholder="반려 사유를 입력하세요."
+                            disabled={isSaving}
+                        />
+                        {reasonError && (
+                            <p className="text-[1.2rem] text-red-500">
+                                반려 사유를 작성해주세요.
+                            </p>
+                        )}
+                    </div>
+                </div>
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button type="button" color="gray" disabled={isSaving}>
+                            취소
+                        </Button>
+                    </DialogClose>
+                    <Button
+                        type="button"
+                        color="red"
+                        disabled={isSaving}
+                        onClick={() => void handleSave()}
+                    >
+                        반려 제출
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/apps/st/src/components/statistics/review/ReviewOpinionDialog.tsx b/apps/st/src/components/statistics/review/ReviewOpinionDialog.tsx
new file mode 100644
index 000000000..17c7bb2ee
--- /dev/null
+++ b/apps/st/src/components/statistics/review/ReviewOpinionDialog.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import {
+    Button,
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Label,
+    Textarea,
+} from "@common/components";
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
+import type { ReviewOpinionSaveRequest } from "@/entities/statistics/model/statistics-interface";
+import { useAlertStore } from "@/shared/lib";
+
+export type ReviewOpinionDialogContext = Pick<
+    ReviewOpinionSaveRequest,
+    "statsYr" | "sewerBzmnCd" | "statsCd"
+>;
+
+export interface ReviewOpinionDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** 조회 성공 후의 통계연도·사업자코드·통계코드 (없으면 저장 불가) */
+    context: ReviewOpinionDialogContext | null;
+    /** 다이얼로그 열릴 때 검토의견 초기값 */
+    initialReviewOpinion?: string;
+    /** 다이얼로그 열릴 때 처리내역 초기값 */
+    initialProcessHistory?: string;
+    /** 저장 시 생성된 param 전달 (API 호출 등) */
+    onSave?: (param: ReviewOpinionSaveRequest) => void | Promise<void>;
+}
+
+export function ReviewOpinionDialog({
+    open,
+    onOpenChange,
+    context,
+    initialReviewOpinion = "",
+    initialProcessHistory = "",
+    onSave,
+}: ReviewOpinionDialogProps) {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const [reviewOpinion, setReviewOpinion] = useState("");
+    const [processHistory, setProcessHistory] = useState("");
+    const [isSaving, setIsSaving] = useState(false);
+    const [reviewOpinionError, setReviewOpinionError] = useState(false);
+
+    const resetForm = () => {
+        setReviewOpinion("");
+        setProcessHistory("");
+        setReviewOpinionError(false);
+    };
+
+    const handleDialogOpenChange = (nextOpen: boolean) => {
+        if (!nextOpen) resetForm();
+        onOpenChange(nextOpen);
+    };
+
+    useEffect(() => {
+        if (!open) return;
+        setReviewOpinion(initialReviewOpinion);
+        setProcessHistory(initialProcessHistory);
+    }, [open, initialReviewOpinion, initialProcessHistory]);
+
+    const handleSave = async () => {
+        if (reviewOpinion.trim() === "") {
+            setReviewOpinionError(true);
+            return;
+        }
+
+        if (
+            context == null ||
+            context.statsYr === "" ||
+            context.sewerBzmnCd === ""
+        ) {
+            alert("시도·시군구·년도로 조회한 뒤 검토의견을 저장할 수 있습니다.");
+            return;
+        }
+
+        try {
+            setIsSaving(true);
+            let userInfo: Awaited<ReturnType<typeof getUserInfo>>;
+            try {
+                userInfo = await getUserInfo();
+            } catch {
+                alert("사용자 정보를 불러오지 못했습니다. 다시 시도해주세요.");
+                return;
+            }
+            const param: ReviewOpinionSaveRequest = {
+                statsYr: context.statsYr,
+                sewerBzmnCd: context.sewerBzmnCd,
+                statsCd: context.statsCd,
+                splmntOpnnCn: reviewOpinion,
+                wrterOpnnCn: processHistory,
+                mdfrId: userInfo.userUnqId,
+            };
+            await onSave?.(param);
+            resetForm();
+            onOpenChange(false);
+        } catch {
+            /* 저장 실패 시 부모에서 alert 후 throw — 다이얼로그는 유지 */
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+            <DialogContent className="max-w-[56rem]" aria-describedby={undefined}>
+                <DialogHeader>
+                    <DialogTitle>검토의견작성</DialogTitle>
+                </DialogHeader>
+                <div className="flex flex-col gap-8 py-2">
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label mb-2">검토의견</Label>
+                        <Textarea
+                            value={reviewOpinion}
+                            onChange={(e) => {
+                                setReviewOpinion(e.target.value);
+                                if (reviewOpinionError) {
+                                    setReviewOpinionError(false);
+                                }
+                            }}
+                            className="min-h-[10rem] resize-y !text-[1.3rem] !leading-6"
+                            placeholder="검토의견을 입력하세요."
+                            disabled={isSaving}
+                        />
+                        {reviewOpinionError && (
+                            <p className="text-[1.2rem] text-red-500">
+                                검토의견을 작성해주세요.
+                            </p>
+                        )}
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label mb-2">처리내역</Label>
+                        <Textarea
+                            value={processHistory}
+                            onChange={(e) => setProcessHistory(e.target.value)}
+                            className="min-h-[10rem] resize-y !text-[1.3rem] !leading-6"
+                            placeholder="처리내역을 입력하세요."
+                            disabled={isSaving}
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button type="button" color="gray" disabled={isSaving}>
+                            취소
+                        </Button>
+                    </DialogClose>
+                    <Button
+                        type="button"
+                        color="primary"
+                        disabled={isSaving}
+                        onClick={() => void handleSave()}
+                    >
+                        저장
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/apps/st/src/components/statistics/review/ReviewSubmitDialog.tsx b/apps/st/src/components/statistics/review/ReviewSubmitDialog.tsx
new file mode 100644
index 000000000..c491e1552
--- /dev/null
+++ b/apps/st/src/components/statistics/review/ReviewSubmitDialog.tsx
@@ -0,0 +1,196 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Input,
+    Label,
+    LoadingWithAnimation,
+    Textarea,
+} from "@common/components";
+
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type {
+    ReviewerInfoRequest,
+    ReviewerInfoResponse,
+    ReviewSubmitRequest,
+} from "@/entities/statistics/model/statistics-interface";
+import { useAlertStore } from "@/shared/lib";
+
+export interface ReviewSubmitDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    context: ReviewerInfoRequest | null;
+    onSubmitted?: () => void | Promise<void>;
+}
+
+export function ReviewSubmitDialog({
+    open,
+    onOpenChange,
+    context,
+    onSubmitted,
+}: ReviewSubmitDialogProps) {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const [reviewerInfo, setReviewerInfo] =
+        useState<ReviewerInfoResponse["data"] | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    useEffect(() => {
+        if (!open) {
+            setReviewerInfo(null);
+            setIsLoading(false);
+            return;
+        }
+
+        if (context == null) {
+            setReviewerInfo(null);
+            return;
+        }
+
+        let cancelled = false;
+
+        const loadReviewerInfo = async () => {
+            try {
+                setIsLoading(true);
+                const response = await statisticsApi.getReviewerInfo(context);
+
+                if (cancelled) return;
+
+                if (response.status !== "success" || !response.data) {
+                    alert("제출 정보를 불러오지 못했습니다.");
+                    setReviewerInfo(null);
+                    return;
+                }
+
+                setReviewerInfo(response.data);
+            } catch {
+                if (!cancelled) {
+                    alert("제출 정보를 불러오지 못했습니다.");
+                    setReviewerInfo(null);
+                }
+            } finally {
+                if (!cancelled) {
+                    setIsLoading(false);
+                }
+            }
+        };
+
+        void loadReviewerInfo();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [open, context, alert]);
+
+    const handleConfirm = async () => {
+        if (context == null || reviewerInfo == null) {
+            alert("제출 정보를 확인한 뒤 다시 시도해주세요.");
+            return;
+        }
+
+        try {
+            setIsSubmitting(true);
+
+            const userInfo = await getUserInfo();
+            const submitParam: ReviewSubmitRequest = {
+                statsYr: context.statsYr,
+                sewerBzmnCd: context.sewerBzmnCd,
+                statsCd: context.statsCd,
+                mdfrId: userInfo.userUnqId,
+                splmntOpnnCn: reviewerInfo.splmntOpnnCn ?? "",
+                wrterOpnnCn: reviewerInfo.wrterOpnnCn ?? "",
+            };
+
+            const response = await statisticsApi.submitReview(submitParam);
+            if (response.status !== "success") {
+                alert(response.message || "제출에 실패했습니다.");
+                return;
+            }
+
+            alert(response.message || "제출되었습니다.");
+            onOpenChange(false);
+            await onSubmitted?.();
+        } catch {
+            alert("제출 중 오류가 발생했습니다.");
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-[64rem]" aria-describedby={undefined}>
+                <DialogHeader>
+                    <DialogTitle>제출 정보</DialogTitle>
+                </DialogHeader>
+                {(isLoading || isSubmitting) && (
+                    <div className="absolute inset-0 z-50 flex items-center justify-center rounded-lg p-10 [data-theme='black']:bg-transparent">
+                        <div className="relative size-[5rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
+                    </div>
+                )}
+                <div className="grid grid-cols-2 gap-4 py-2">
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">검토자명</Label>
+                        <Input value={reviewerInfo?.userNm ?? "-"} readOnly />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">연락처</Label>
+                        <Input value={reviewerInfo?.telOffrm ?? "-"} readOnly />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">부서</Label>
+                        <Input value={reviewerInfo?.dpmNm ?? "-"} readOnly />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">직책</Label>
+                        <Input value={reviewerInfo?.cps ?? "-"} readOnly />
+                    </div>
+                    <div className="col-span-2 flex flex-col gap-2">
+                        <Label className="text-label">검토의견</Label>
+                        <Textarea
+                            value={reviewerInfo?.splmntOpnnCn ?? "-"}
+                            readOnly
+                            className="min-h-[10rem] p-2 resize-none !text-xl"
+                        />
+                    </div>
+                    <div className="col-span-2 flex flex-col gap-2">
+                        <Label className="text-label">처리내역</Label>
+                        <Textarea
+                            value={reviewerInfo?.wrterOpnnCn ?? "-"}
+                            readOnly
+                            className="min-h-[10rem] p-2 resize-none !text-xl"
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        color="primary"
+                        onClick={() => void handleConfirm()}
+                        disabled={isLoading || isSubmitting || reviewerInfo == null}
+                    >
+                        제출
+                    </Button>
+                    <Button
+                        type="button"
+                        color="gray"
+                        onClick={() => onOpenChange(false)}
+                        disabled={isLoading || isSubmitting}
+                    >
+                        취소
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/apps/st/src/components/statistics/review/SewagePipeMaintainRvw.tsx b/apps/st/src/components/statistics/review/SewagePipeMaintainRvw.tsx
index 26629d3a5..295802cdc 100644
--- a/apps/st/src/components/statistics/review/SewagePipeMaintainRvw.tsx
+++ b/apps/st/src/components/statistics/review/SewagePipeMaintainRvw.tsx
@@ -1,29 +1,65 @@
-import { useState, useMemo, useRef } from "react";
-import TabDataGrid from "@/components/module/TabDataGrid";
-import SearchForm from "@/components/module/SearchForm";
-import SaveButton from "@/components/button/SaveButton";
-import ApproveButton from "@/components/button/ApproveButton";
-import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
-import ReturnButton from "@/components/button/ReturnButton";
-import { LoadingWithAnimation } from "@common/components";
+import { useMemo, useRef, useState } from "react";
 
 import { useAlertStore } from "@/shared/lib";
 import { statisticsManagementApi } from "@/entities/statistics/api/statistics-management-service";
-import { SewagePipeMaintainColumnInfoList } from "@/components/util/column/review/SewagePipeMaintainRvwColumn";
-import type { ColumnInfoList, ColumnConfig } from "@/components/type/DataGrid.type";
-import type { SearchFormValues } from "@/components/type/SearchForm.type";
-import { toGridRows } from "@/components/util/grid/gridFunction";
 import type { SewerPipeMtcRequestParams } from "@/entities/statistics/model/statistics-sewage-pipe-mtc-review-interface";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
 
+import ApproveButton from "@/components/button/ApproveButton";
+import ReturnButton from "@/components/button/ReturnButton";
+import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
+import SaveButton from "@/components/button/SaveButton";
+import DataGrid from "@/components/module/DataGrid";
+import SearchForm from "@/components/module/SearchForm";
+import type { ColumnConfig, ColumnInfo, ColumnInfoList } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { SewagePipeMaintainColumnInfoList } from "@/components/util/column/review/SewagePipeMaintainRvwColumn";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+
+
+const firstTabKey = SewagePipeMaintainColumnInfoList[0]?.tabKey ?? "ST00030001";
+
+async function fetchSewagePipeMaintainReviewTab(
+    tabKey: string,
+    searchParam: SewerPipeMtcRequestParams,
+) {
+    if (tabKey === "ST00030001") {
+        return statisticsManagementApi.getSewerPipeMtcList(searchParam);
+    }
+    if (tabKey === "ST00030002") {
+        return statisticsManagementApi.getSewerPipeDrdgList(searchParam);
+    }
+    return null;
+}
+
+function getListDataByTab(tabKey: string, responseData: unknown): object[] {
+    if (Array.isArray(responseData)) {
+        return responseData as object[];
+    }
+    if (!responseData || typeof responseData !== "object") {
+        return [];
+    }
+    if (tabKey === "ST00030001") {
+        const list = (responseData as { sewerPipeMtcList?: unknown }).sewerPipeMtcList;
+        return Array.isArray(list) ? (list as object[]) : [];
+    }
+    if (tabKey === "ST00030002") {
+        const list = (responseData as { sewerPipeDrdgList?: unknown }).sewerPipeDrdgList;
+        return Array.isArray(list) ? (list as object[]) : [];
+    }
+    return [];
+}
 
 // 하수도 통계 검토 03. 하수관로 유지 관리
 const SewagePipeMaintainRvw = () => {
     const { setMessage: alert } = useAlertStore((state) => state);
     const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
     const [isLoading, setIsLoading] = useState<boolean>(false);
-    const [activeTab, setActiveTab] = useState<string>('ST00030001');
+    const [activeTab, setActiveTab] = useState<string>(firstTabKey);
 
     const searchParamRef = useRef<SewerPipeMtcRequestParams | null>(null);
+    const searchDoneRef = useRef(false);
+    const lazyTabLoggedRef = useRef<Set<string>>(new Set());
 
     const columnInfo = useMemo(() => {
         return SewagePipeMaintainColumnInfoList.map((tab: ColumnInfoList) => ({
@@ -38,19 +74,18 @@ const SewagePipeMaintainRvw = () => {
 
     const handleReset = () => {
         setRowDataMap(new Map());
-        setActiveTab('ST00030001');
+        setActiveTab(firstTabKey);
         searchParamRef.current = null;
+        searchDoneRef.current = false;
+        lazyTabLoggedRef.current.clear();
     };
 
     const handleSearch = async (values: SearchFormValues) => {
-        if (!values.sido || values.sido === 'ALL') {
-            alert('시도를 선택해주세요.');
+        if (!values.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
             return;
         }
 
-        setActiveTab('ST00030001');
-        setRowDataMap(new Map());
-
         try {
             setIsLoading(true);
 
@@ -58,26 +93,27 @@ const SewagePipeMaintainRvw = () => {
                 statsYr: values.year,
                 sewerBzmnCd: values.bsnmCd,
                 ctpvNm: values.sido,
-                sggNm: values.gugun === 'ALL' ? '' : values.gugun
+                sggNm: values.gugun === "ALL" ? "" : values.gugun,
             };
 
             searchParamRef.current = searchParam;
-            const response = await statisticsManagementApi.getSewerPipeMtcList(searchParam);
+            searchDoneRef.current = true;
+            lazyTabLoggedRef.current.clear();
 
-            if (response?.status === 'success' && response.data) {
-                const newRowDataMap = new Map<string, Record<string, string | number>[]>();
+            const response = await fetchSewagePipeMaintainReviewTab(activeTab, searchParam);
 
-                const listData = Array.isArray(response.data)
-                    ? response.data
-                    : (response.data.mtcStatusList || []);
-
-                newRowDataMap.set('ST00030001', toGridRows(listData as object[]));
-                setRowDataMap(newRowDataMap);
+            if (response?.status === "success" && response.data) {
+                const listData = getListDataByTab(activeTab, response.data);
+                setRowDataMap((prev) => {
+                    const next = new Map(prev);
+                    next.set(activeTab, toGridRows(listData));
+                    return next;
+                });
             } else {
                 alert(response?.message || "데이터가 없습니다.");
             }
         } catch {
-            alert('데이터 조회 중 오류가 발생했습니다.');
+            alert("데이터 조회 중 오류가 발생했습니다.");
         } finally {
             setIsLoading(false);
         }
@@ -86,43 +122,40 @@ const SewagePipeMaintainRvw = () => {
     const handleActiveTabChange = async (tabKey: string) => {
         setActiveTab(tabKey);
 
-        const existingAData = rowDataMap.get('ST00030001');
         const activeTabData = rowDataMap.get(tabKey);
-
-        const hasAData = Array.isArray(existingAData) && existingAData.length > 0;
         const hasActiveTabData = Array.isArray(activeTabData) && activeTabData.length > 0;
 
-        if (hasAData && !hasActiveTabData && searchParamRef.current) {
-            try {
-                setIsLoading(true);
+        const canLazyLoad =
+            searchParamRef.current &&
+            !hasActiveTabData &&
+            !lazyTabLoggedRef.current.has(tabKey) &&
+            searchDoneRef.current;
 
-                let response;
+        if (!canLazyLoad) return;
 
-                if (tabKey === 'ST00030001') {
-                    response = await statisticsManagementApi.getSewerPipeMtcList(searchParamRef.current);
-                } else if (tabKey === 'ST00030002') {
-                    response = await statisticsManagementApi.getSewerPipeDrdgList(searchParamRef.current);
-                }
+        const searchParam = searchParamRef.current;
+        if (!searchParam) return;
 
-                if (response?.status === 'success' && response.data) {
-                    setRowDataMap(prev => {
-                        const next = new Map(prev);
+        try {
+            setIsLoading(true);
 
-                        const listData = Array.isArray(response.data)
-                            ? response.data
-                            : (response.data.mtcStatusList || []);
+            const response = await fetchSewagePipeMaintainReviewTab(tabKey, searchParam);
+            lazyTabLoggedRef.current.add(tabKey);
 
-                        next.set(tabKey, toGridRows(listData as object[]));
-                        return next;
-                    });
-                } else {
-                    alert(response?.message || "데이터가 없습니다.");
-                }
-            } catch {
-                alert('데이터 조회 중 오류가 발생했습니다.');
-            } finally {
-                setIsLoading(false);
+            if (response?.status === "success" && response.data) {
+                setRowDataMap((prev) => {
+                    const next = new Map(prev);
+                    const listData = getListDataByTab(tabKey, response.data);
+                    next.set(tabKey, toGridRows(listData));
+                    return next;
+                });
+            } else {
+                alert(response?.message || "데이터가 없습니다.");
             }
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
         }
     };
 
@@ -147,14 +180,60 @@ const SewagePipeMaintainRvw = () => {
                 </div>
             )}
 
-            <TabDataGrid
-                columnInfo={columnInfo}
-                isExcelImport={false}
-                rowDataMap={rowDataMap}
-                setRowDataMap={setRowDataMap}
-                activeTab={activeTab}
-                onActiveTabChange={handleActiveTabChange}
-            />
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                <Tabs
+                    value={activeTab}
+                    onValueChange={(v) => void handleActiveTabChange(v)}
+                    className="w-full"
+                    variant="default"
+                >
+                    <TabsList>
+                        {columnInfo.map((info) => (
+                            <TabsTrigger key={info.tabKey} value={info.tabKey}>
+                                {info.tabLabel || info.tabKey}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    {columnInfo.map((info) => {
+                        const tabKey = info.tabKey;
+                        if (!info.columns || !info.columnLayout) {
+                            return null;
+                        }
+
+                        const rowData = rowDataMap.get(tabKey) ?? [];
+                        const gridColumnInfo: ColumnInfo = {
+                            columns: info.columns,
+                            columnLayout: info.columnLayout,
+                        };
+
+                        return (
+                            <TabsContent key={tabKey} value={tabKey}>
+                                <DataGrid
+                                    columnInfo={gridColumnInfo}
+                                    rowStartNum={info.rowStartNum}
+                                    excelExportFileSuffix={info.tabLabel || tabKey}
+                                    rowData={rowData}
+                                    setRowData={(updater) => {
+                                        setRowDataMap((prev) => {
+                                            const next = new Map(prev);
+                                            const cur = next.get(tabKey) ?? [];
+                                            const n =
+                                                typeof updater === "function" ? updater(cur) : updater;
+                                            next.set(tabKey, n);
+                                            return next;
+                                        });
+                                    }}
+                                    isExcelImport={false}
+                                    isExcelExport
+                                    showHeaderCheckbox={false}
+                                    fixedColumns={info.fixedColumns}
+                                    enableSort={false}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+                </Tabs>
+            </div>
         </div>
     );
 };
diff --git a/apps/st/src/components/statistics/review/SewagePipeRvw.tsx b/apps/st/src/components/statistics/review/SewagePipeRvw.tsx
index 77d3a5d88..8bd0f9e44 100644
--- a/apps/st/src/components/statistics/review/SewagePipeRvw.tsx
+++ b/apps/st/src/components/statistics/review/SewagePipeRvw.tsx
@@ -1,78 +1,267 @@
-import { useState, useMemo, useRef } from "react";
-import TabDataGrid from "@/components/module/TabDataGrid";
-import SearchForm from "@/components/module/SearchForm";
-import SaveButton from "@/components/button/SaveButton";
-import ApproveButton from "@/components/button/ApproveButton";
-import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
-import ReturnButton from "@/components/button/ReturnButton";
-import { LoadingWithAnimation } from "@common/components";
+import { useMemo, useRef, useState } from "react";
 
-import { useAlertStore } from "@/shared/lib";
+import { useAlertStore, useUserStore } from "@/shared/lib";
 import { statisticsManagementApi } from "@/entities/statistics/api/statistics-management-service";
-import { SewagePipeColumnInfoListRvw } from "@/components/util/column/review/SewagePipeRvwColumn";
-import type { ColumnInfoList, ColumnConfig } from "@/components/type/DataGrid.type";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type {
+    SewagePipeReviewRequestParams,
+    StatsStatusInfo,
+} from "@/entities/statistics/model/statistics-sewage-pipe-review-interface";
+import type {
+    ReviewerInfoRequest,
+    ReviewOpinionSaveRequest,
+} from "@/entities/statistics/model/statistics-interface";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
+
+import SubmitButton from "@/components/button/SumitButton";
+import ReturnButton from "@/components/button/ReturnButton";
+import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
+import DataGrid from "@/components/module/DataGrid";
+import SearchForm from "@/components/module/SearchForm";
+import { ReturnReasonDialog } from "@/components/statistics/review/ReturnReasonDialog";
+import { ReviewSubmitDialog } from "@/components/statistics/review/ReviewSubmitDialog";
+import {
+    ReviewOpinionDialog,
+    type ReviewOpinionDialogContext,
+} from "@/components/statistics/review/ReviewOpinionDialog";
+import type {
+    ColumnConfig,
+    ColumnInfo,
+    ColumnInfoList,
+    ColumnLayoutItem,
+} from "@/components/type/DataGrid.type";
 import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { SewagePipeColumnInfoListRvw } from "@/components/util/column/review/SewagePipeRvwColumn";
 import { toGridRows } from "@/components/util/grid/gridFunction";
-import type { SewagePipeReviewRequestParams } from "@/entities/statistics/model/statistics-sewage-pipe-review-interface";
 
+const firstTabKey = SewagePipeColumnInfoListRvw[0]?.tabKey ?? "ST00020001";
 
-// 하수도 통계 검토 02.하수관로 
+function cloneColumnLayoutItem(item: ColumnLayoutItem): ColumnLayoutItem {
+    if (typeof item === "string") return item;
+    if ("column" in item) {
+        return {
+            column: item.column,
+            ...(item.footerUserSpans && {
+                footerUserSpans: item.footerUserSpans.map((span) => ({ ...span })),
+            }),
+        };
+    }
+    return {
+        ...item,
+        header: { ...item.header },
+        items: item.items.map((child) =>
+            typeof child === "string" ? child : cloneColumnLayoutItem(child),
+        ),
+        ...(item.footerUserSpans && {
+            footerUserSpans: item.footerUserSpans.map((span) => ({ ...span })),
+        }),
+    };
+}
+
+function cloneColumnConfig(col: ColumnConfig): ColumnConfig {
+    return {
+        ...col,
+        header: { ...col.header },
+        ...(col.footer && {
+            footer: Array.isArray(col.footer)
+                ? col.footer.map((item) => ({ ...item }))
+                : { ...col.footer },
+        }),
+    };
+}
+
+async function fetchSewagePipeReviewTab(
+    tabKey: string,
+    searchParam: SewagePipeReviewRequestParams,
+) {
+    if (tabKey === "ST00020001") {
+        return statisticsManagementApi.getSewagePipeReviewRegionalList(searchParam);
+    }
+    if (tabKey === "ST00020002") {
+        return statisticsManagementApi.getSewagePipeFacilityList(searchParam);
+    }
+    if (tabKey === "ST00020003") {
+        return statisticsManagementApi.getSewagePipeTypeList(searchParam);
+    }
+    if (tabKey === "ST00020004") {
+        return statisticsManagementApi.getSewagePipeDiamList(searchParam);
+    }
+    if (tabKey === "ST00020005") {
+        return await statisticsManagementApi.getSewagePipeManholeList(searchParam);
+    }
+    return null;
+}
+
+function extractReviewRowsFromResponseData(
+    tabKey: string,
+    data: unknown,
+): object[] {
+    if (Array.isArray(data)) return data as object[];
+    if (!data || typeof data !== "object") return [];
+
+    const d = data as Record<string, unknown>;
+    switch (tabKey) {
+        case "ST00020001":
+            return Array.isArray(d.regionalStatusList) ? (d.regionalStatusList as object[]) : [];
+        case "ST00020002":
+            return Array.isArray(d.facilityStatusList) ? (d.facilityStatusList as object[]) : [];
+        case "ST00020003":
+            return Array.isArray(d.pipeTypeList) ? (d.pipeTypeList as object[]) : [];
+        case "ST00020004":
+            return Array.isArray(d.pipeDiamList) ? (d.pipeDiamList as object[]) : [];
+        case "ST00020005":
+            return Array.isArray(d.manholeList) ? (d.manholeList as object[]) : [];
+        default:
+            return [];
+    }
+}
+
+function extractStatsStatusInfo(data: unknown): StatsStatusInfo | null {
+    if (!data || typeof data !== "object") return null;
+    const ssi = (data as { statsStatusInfo?: StatsStatusInfo }).statsStatusInfo;
+    return ssi && typeof ssi === "object" ? ssi : null;
+}
+
+// 하수도 통계 검토 02.하수관로
 const SewagePipeRvw = () => {
     const { setMessage: alert } = useAlertStore((state) => state);
+    const userInfo = useUserStore((state) => state.userInfo);
     const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
     const [isLoading, setIsLoading] = useState<boolean>(false);
-    const [activeTab, setActiveTab] = useState<string>('ST00020001');
+    const [activeTab, setActiveTab] = useState<string>(firstTabKey);
+    const [reviewOpinionOpen, setReviewOpinionOpen] = useState(false);
+    const [returnDialogOpen, setReturnDialogOpen] = useState(false);
+    const [submitDialogOpen, setSubmitDialogOpen] = useState(false);
+    const [lastSearchValues, setLastSearchValues] = useState<SearchFormValues | null>(null);
+    /** 탭별 조회 응답의 statsStatusInfo — 활성 탭에 맞춰 버튼 노출 (SewagePipeInp의 tabStatusInfoMap과 동일 패턴) */
+    const [tabStatsStatusInfoMap, setTabStatsStatusInfoMap] = useState<
+        Map<string, StatsStatusInfo>
+    >(new Map());
 
     const searchParamRef = useRef<SewagePipeReviewRequestParams | null>(null);
-
-    const columnInfo = useMemo(() => {
-        return SewagePipeColumnInfoListRvw.map((tab: ColumnInfoList) => ({
-            ...tab,
-            columns: (tab.columns ?? []).map((col: ColumnConfig) => ({
-                ...col,
-                editable: false as const,
-                styleName: col.styleName ?? ("rg-cell-readonly" as const),
+    const searchDoneRef = useRef(false);
+    const lazyTabLoggedRef = useRef<Set<string>>(new Set());
+    const activeStatsStatusInfo = useMemo(
+        () => tabStatsStatusInfoMap.get(activeTab) ?? {},
+        [tabStatsStatusInfoMap, activeTab],
+    );
+    const columnInfo = useMemo<ColumnInfoList[]>(
+        () =>
+            SewagePipeColumnInfoListRvw.map((tab) => ({
+                ...tab,
+                columns: (tab.columns ?? []).map((col) => cloneColumnConfig(col)),
+                columnLayout: (tab.columnLayout ?? []).map((item) =>
+                    cloneColumnLayoutItem(item),
+                ),
             })),
-        }));
-    }, []);
+        [],
+    );
+    const reviewOpinionContext = useMemo<ReviewOpinionDialogContext | null>(() => {
+        if (lastSearchValues == null) return null;
+        return {
+            statsYr: lastSearchValues.year ?? "",
+            sewerBzmnCd: lastSearchValues.bsnmCd ?? "",
+            statsCd: activeStatsStatusInfo.statsCd ?? "",
+        };
+    }, [activeStatsStatusInfo.statsCd, lastSearchValues]);
+    const latestReviewOpinion = activeStatsStatusInfo.splmntOpnnCn ?? "";
+    const latestProcessHistory = activeStatsStatusInfo.wrterOpnnCn ?? "";
+    const submitDialogContext = useMemo<ReviewerInfoRequest | null>(() => {
+        if (lastSearchValues == null) return null;
+
+        const statsYr = lastSearchValues.year ?? "";
+        const sewerBzmnCd = lastSearchValues.bsnmCd ?? "";
+        const statsCd = activeStatsStatusInfo.statsCd ?? "";
+        const instSeCd = userInfo?.instSeCd ?? "";
+
+        if (!statsYr || !sewerBzmnCd || !statsCd || !instSeCd) {
+            return null;
+        }
+
+        return {
+            statsYr,
+            sewerBzmnCd,
+            statsCd,
+            instSeCd,
+        };
+    }, [activeStatsStatusInfo.statsCd, lastSearchValues, userInfo?.instSeCd]);
+
+    const { showReviewOpinionButton, showReturnButton, showSubmitButton } = useMemo(() => {
+        const statsStatusInfo = activeStatsStatusInfo;
+        const submit =
+            statsStatusInfo.submitStatusCd != null
+                ? String(statsStatusInfo.submitStatusCd)
+                : "";
+        const prvn =
+            statsStatusInfo.prvnStatusCd != null ? String(statsStatusInfo.prvnStatusCd) : "";
+        const submitIs3 = submit === "3";
+        const reviewSubmitVisible = submitIs3 && (prvn === "0" || prvn === "1");
+        return {
+            showReviewOpinionButton: reviewSubmitVisible,
+            showSubmitButton: reviewSubmitVisible,
+            showReturnButton: submitIs3 && prvn !== "3",
+        };
+    }, [activeStatsStatusInfo]);
+
+    const showActionBar =
+        showReviewOpinionButton || showReturnButton || showSubmitButton;
 
     const handleReset = () => {
         setRowDataMap(new Map());
-        setActiveTab('ST00020001');
+        setActiveTab(firstTabKey);
+        setTabStatsStatusInfoMap(new Map());
+        setReviewOpinionOpen(false);
+        setReturnDialogOpen(false);
+        setSubmitDialogOpen(false);
+        setLastSearchValues(null);
+        searchParamRef.current = null;
+        searchDoneRef.current = false;
+        lazyTabLoggedRef.current.clear();
     };
 
     const handleSearch = async (values: SearchFormValues) => {
-        if (!values.sido || values.sido === 'ALL') {
-            alert('시도를 선택해주세요.');
+        if (!values.sido || values.sido === "ALL") {
+            alert("시도를 선택해주세요.");
             return;
         }
 
-        setActiveTab('ST00020001');
-
-        setRowDataMap(new Map());
-
         try {
             setIsLoading(true);
+            setLastSearchValues(values);
 
-        const searchParam: SewagePipeReviewRequestParams = {
-                statsYr: values.year,                
-                sewerBzmnCd: values.bsnmCd,        
-                ctpvNm: values.sido,                
-                sggNm: values.gugun === 'ALL' ? '' : values.gugun 
+            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);
+            searchDoneRef.current = true;
+            lazyTabLoggedRef.current.clear();
 
-            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);
+            const response = await fetchSewagePipeReviewTab(activeTab, searchParam);
+
+            if (response?.status === "success" && response.data) {
+                const ssi = extractStatsStatusInfo(response.data);
+                setTabStatsStatusInfoMap((prev) => {
+                    const next = new Map(prev);
+                    next.set(activeTab, ssi ?? {});
+                    return next;
+                });
+                const rows = extractReviewRowsFromResponseData(activeTab, response.data);
+                setRowDataMap((prev) => {
+                    const next = new Map(prev);
+                    next.set(activeTab, toGridRows(rows));
+                    return next;
+                });
             } else {
-                alert(response?.message || "데이터가 없습니다.");
+                setTabStatsStatusInfoMap(new Map());
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
             }
         } catch {
-            alert('데이터 조회 중 오류가 발생했습니다.');
+            setTabStatsStatusInfoMap(new Map());
+            alert("데이터 조회 중 오류가 발생했습니다.");
         } finally {
             setIsLoading(false);
         }
@@ -81,42 +270,119 @@ const SewagePipeRvw = () => {
     const handleActiveTabChange = async (tabKey: string) => {
         setActiveTab(tabKey);
 
-        const existingAData = rowDataMap.get('ST00020001');
         const activeTabData = rowDataMap.get(tabKey);
-
-        const hasAData = Array.isArray(existingAData) && existingAData.length > 0;
         const hasActiveTabData = Array.isArray(activeTabData) && activeTabData.length > 0;
 
-        if (hasAData && !hasActiveTabData && searchParamRef.current) {
+        const canLazyLoad =
+            searchParamRef.current &&
+            !hasActiveTabData &&
+            !lazyTabLoggedRef.current.has(tabKey) &&
+            searchDoneRef.current;
 
-            try {
-                setIsLoading(true);
+        if (!canLazyLoad) return;
 
-                let response;
+        const searchParam = searchParamRef.current;
+        if (!searchParam) return;
 
-                if (tabKey === 'ST00020002') {
-                    response = await statisticsManagementApi.getSewagePipeFacilityList(searchParamRef.current);
-                }else if(tabKey === 'ST00020003'){
-                     response = await statisticsManagementApi.getSewagePipeTypeList(searchParamRef.current);
-                }else if(tabKey === 'ST00020004'){
-                     response = await statisticsManagementApi.getSewagePipeDiamList(searchParamRef.current);
-                }
+        try {
+            setIsLoading(true);
 
-                if (response?.status === 'success' && response.data) {
-                    
-                    setRowDataMap(prev => {
-                        const next = new Map(prev);
-                        next.set(tabKey, toGridRows(response.data as object[]));
-                        return next;
-                    });
-                } else {
-                    alert(response?.message || "데이터가 없습니다.");
-                }
-            } catch {
-                alert('데이터 조회 중 오류가 발생했습니다.');
-            } finally {
-                setIsLoading(false);
+            const response = await fetchSewagePipeReviewTab(tabKey, searchParam);
+            lazyTabLoggedRef.current.add(tabKey);
+
+            if (response?.status === "success" && response.data) {
+                const ssi = extractStatsStatusInfo(response.data);
+                setTabStatsStatusInfoMap((prev) => {
+                    const next = new Map(prev);
+                    next.set(tabKey, ssi ?? {});
+                    return next;
+                });
+                const rows = extractReviewRowsFromResponseData(tabKey, response.data);
+                setRowDataMap((prev) => {
+                    const next = new Map(prev);
+                    next.set(tabKey, toGridRows(rows));
+                    return next;
+                });
+            } else {
+                alert(response?.message || "데이터가 없습니다.");
             }
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const submitFunc = () => {
+        if (submitDialogContext == null) {
+            alert("조회 후 제출할 수 있습니다.");
+            return;
+        }
+
+        setSubmitDialogOpen(true);
+    };
+
+    const reviewOpinionFunc = async () => {
+        if (reviewOpinionContext == null) {
+            alert("조회 후 검토의견을 작성할 수 있습니다.");
+            return;
+        }
+
+        try {
+            const detailRes = await statisticsApi.getReviewOpinionDetail({
+                statsYr: reviewOpinionContext.statsYr,
+                sewerBzmnCd: reviewOpinionContext.sewerBzmnCd,
+                statsCd: reviewOpinionContext.statsCd,
+            });
+
+            if (detailRes.status !== "success") {
+                alert(detailRes.message || "검토의견 조회에 실패했습니다.");
+                return;
+            }
+
+            const row = detailRes.data?.[0];
+            setTabStatsStatusInfoMap((prev) => {
+                const next = new Map(prev);
+                next.set(activeTab, {
+                    ...(next.get(activeTab) ?? {}),
+                    splmntOpnnCn: row?.splmntOpnnCn ?? "",
+                    wrterOpnnCn: row?.wrterOpnnCn ?? "",
+                });
+                return next;
+            });
+            setReviewOpinionOpen(true);
+        } catch {
+            alert("검토의견 조회 중 오류가 발생했습니다.");
+        }
+    };
+
+    const saveReviewOpinion = async (param: ReviewOpinionSaveRequest) => {
+        try {
+            const response = await statisticsApi.saveReviewOpinion(param);
+            if (response.status !== "success") {
+                alert(response.message || "저장에 실패했습니다.");
+                return;
+            }
+            alert(response.message || "저장되었습니다.");
+            setTabStatsStatusInfoMap((prev) => {
+                const next = new Map(prev);
+                next.set(activeTab, {
+                    ...(next.get(activeTab) ?? {}),
+                    splmntOpnnCn: param.splmntOpnnCn,
+                    wrterOpnnCn: param.wrterOpnnCn,
+                });
+                return next;
+            });
+        } catch {
+            alert("저장 중 오류가 발생했습니다.");
+        }
+    };
+
+    const returnFunc = () => setReturnDialogOpen(true);
+
+    const handleSaveReturnReason = async () => {
+        if (lastSearchValues != null) {
+            await handleSearch(lastSearchValues);
         }
     };
 
@@ -124,14 +390,19 @@ const SewagePipeRvw = () => {
         <div className="relative">
             <SearchForm onSubmit={handleSearch} onReset={handleReset} />
 
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <ReviewOpinionButton reviewOpinionFunc={() => { }} />
-                    <ApproveButton approveFunc={() => { }} />
-                    <ReturnButton returnFunc={() => { }} />
-                    <SaveButton saveFunc={() => { }} />
+            {showActionBar && (
+                <div className="card !py-0">
+                    <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
+                        {showReviewOpinionButton && (
+                            <ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
+                        )}
+                        {showReturnButton && <ReturnButton returnFunc={returnFunc} />}
+                        {showSubmitButton && (
+                            <SubmitButton submitFunc={() => submitFunc()} />
+                        )}
+                    </div>
                 </div>
-            </div>
+            )}
             {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]">
@@ -140,16 +411,86 @@ const SewagePipeRvw = () => {
                 </div>
             )}
 
-            <TabDataGrid
-                columnInfo={columnInfo}
-                isExcelImport={false}
-                rowDataMap={rowDataMap}
-                setRowDataMap={setRowDataMap}
-                activeTab={activeTab}
-                onActiveTabChange={handleActiveTabChange}
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                <Tabs
+                    value={activeTab}
+                    onValueChange={(v) => void handleActiveTabChange(v)}
+                    className="w-full"
+                    variant="default"
+                >
+                    <TabsList>
+                        {columnInfo.map((info) => (
+                            <TabsTrigger key={info.tabKey} value={info.tabKey}>
+                                {info.tabLabel || info.tabKey}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    {columnInfo.map((info) => {
+                        const tabKey = info.tabKey;
+                        if (!info.columns || !info.columnLayout) {
+                            return null;
+                        }
+
+                        const rowData = rowDataMap.get(tabKey) ?? [];
+                        const gridColumnInfo: ColumnInfo = {
+                            columns: info.columns,
+                            columnLayout: info.columnLayout,
+                        };
+
+                        return (
+                            <TabsContent key={tabKey} value={tabKey}>
+                                <DataGrid
+                                    columnInfo={gridColumnInfo}
+                                    rowStartNum={info.rowStartNum}
+                                    excelExportFileSuffix={info.tabLabel || tabKey}
+                                    rowData={rowData}
+                                    setRowData={(updater) => {
+                                        setRowDataMap((prev) => {
+                                            const next = new Map(prev);
+                                            const cur = next.get(tabKey) ?? [];
+                                            const n =
+                                                typeof updater === "function" ? updater(cur) : updater;
+                                            next.set(tabKey, n);
+                                            return next;
+                                        });
+                                    }}
+                                    isExcelImport={false}
+                                    isExcelExport
+                                    showHeaderCheckbox={false}
+                                    fixedColumns={info.fixedColumns}
+                                    enableSort={false}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+                </Tabs>
+            </div>
+            <ReviewOpinionDialog
+                open={reviewOpinionOpen}
+                onOpenChange={setReviewOpinionOpen}
+                context={reviewOpinionContext}
+                initialReviewOpinion={latestReviewOpinion}
+                initialProcessHistory={latestProcessHistory}
+                onSave={saveReviewOpinion}
+            />
+            <ReviewSubmitDialog
+                open={submitDialogOpen}
+                onOpenChange={setSubmitDialogOpen}
+                context={submitDialogContext}
+                onSubmitted={async () => {
+                    if (lastSearchValues != null) {
+                        await handleSearch(lastSearchValues);
+                    }
+                }}
+            />
+            <ReturnReasonDialog
+                open={returnDialogOpen}
+                onOpenChange={setReturnDialogOpen}
+                context={reviewOpinionContext}
+                onSave={handleSaveReturnReason}
             />
         </div>
     );
 };
 
-export default SewagePipeRvw;
\ No newline at end of file
+export default SewagePipeRvw;
diff --git a/apps/st/src/components/statistics/review/SeweragePenetrationRateRvw.tsx b/apps/st/src/components/statistics/review/SeweragePenetrationRateRvw.tsx
index 18a0443cc..c13c93dd5 100644
--- a/apps/st/src/components/statistics/review/SeweragePenetrationRateRvw.tsx
+++ b/apps/st/src/components/statistics/review/SeweragePenetrationRateRvw.tsx
@@ -1,24 +1,44 @@
 import { useState, useMemo } from "react";
 import DataGrid from "@/components/module/DataGrid";
 import SearchForm from "@/components/module/SearchForm";
-import SaveButton from "@/components/button/SaveButton";
-import ApproveButton from "@/components/button/ApproveButton";
 import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
 import ReturnButton from "@/components/button/ReturnButton";
+import SubmitButton from "@/components/button/SumitButton";
 import { LoadingWithAnimation } from "@common/components";
+import { ReturnReasonDialog } from "@/components/statistics/review/ReturnReasonDialog";
+import { ReviewSubmitDialog } from "@/components/statistics/review/ReviewSubmitDialog";
 
-import { useAlertStore } from "@/shared/lib";
+import { useAlertStore, useUserStore } from "@/shared/lib";
 import { SeweragePenetrationRateInfoList } from "@/components/util/column/review/SeweragePenetrationRateRvwColumn";
-import type { SewerageSupplyRateReviewItem } from "@/entities/statistics/model/statistics-sewerage-penetration-review-interface";
+import type { SewerageSupplyRateReviewItem, statsStatusInfo } from "@/entities/statistics/model/statistics-sewerage-penetration-review-interface";
+import type {
+    ReviewOpinionSaveRequest,
+    ReviewerInfoRequest,
+} from "@/entities/statistics/model/statistics-interface";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
 import { statisticsManagementApi } from "@/entities/statistics/api/statistics-management-service";
 import type { SearchFormValues } from "@/components/type/SearchForm.type";
 import { toGridRows } from "@/components/util/grid/gridFunction";
+import {
+    ReviewOpinionDialog,
+    type ReviewOpinionDialogContext,
+} from "@/components/statistics/review/ReviewOpinionDialog";
 
 // 하수도 통계 검토 01.하수도 보급률
 const SeweragePenetrationRateRvw = () => {
     const { setMessage: alert } = useAlertStore((state) => state);
+    const userInfo = useUserStore((state) => state.userInfo);
     const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
     const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [statsStatusInfo, setStatsStatusInfo] = useState<statsStatusInfo>({});
+    const [reviewOpinionOpen, setReviewOpinionOpen] = useState(false);
+    const [returnDialogOpen, setReturnDialogOpen] = useState(false);
+    const [submitDialogOpen, setSubmitDialogOpen] = useState(false);
+    const [reviewOpinionContext, setReviewOpinionContext] =
+        useState<ReviewOpinionDialogContext | null>(null);
+    const [latestReviewOpinion, setLatestReviewOpinion] = useState("");
+    const [latestProcessHistory, setLatestProcessHistory] = useState("");
+    const [lastSearchValues, setLastSearchValues] = useState<SearchFormValues | null>(null);
 
     const columnInfo = useMemo(() => {
         const { columns, columnLayout, fixedColumns, rowStartNum } = SeweragePenetrationRateInfoList;
@@ -34,8 +54,46 @@ const SeweragePenetrationRateRvw = () => {
         };
     }, []);
 
+    const { showReviewOpinionButton, showReturnButton, showSubmitButton } = useMemo(() => {
+        const submit = statsStatusInfo.submitStatusCd != null ? String(statsStatusInfo.submitStatusCd) : "";
+        const prvn = statsStatusInfo.prvnStatusCd != null ? String(statsStatusInfo.prvnStatusCd) : "";
+        const submitIs3 = submit === "3";
+        const reviewSubmitVisible = submitIs3 && (prvn === "0" || prvn === "1");
+        return {
+            showReviewOpinionButton: reviewSubmitVisible,
+            showSubmitButton: reviewSubmitVisible,
+            showReturnButton: submitIs3 && prvn !== "3",
+        };
+    }, [statsStatusInfo]);
+
+    const showActionBar =
+        showReviewOpinionButton || showReturnButton || showSubmitButton;
+
+    const submitDialogContext = useMemo<ReviewerInfoRequest | null>(() => {
+        if (reviewOpinionContext == null) {
+            return null;
+        }
+
+        const instSeCd = userInfo?.instSeCd ?? "";
+        if (!instSeCd) {
+            return null;
+        }
+
+        return {
+            statsYr: reviewOpinionContext.statsYr,
+            sewerBzmnCd: reviewOpinionContext.sewerBzmnCd,
+            statsCd: reviewOpinionContext.statsCd,
+            instSeCd,
+        };
+    }, [reviewOpinionContext, userInfo?.instSeCd]);
+
     const handleReset = () => {
         setRowData([]);
+        setStatsStatusInfo({});
+        setReviewOpinionContext(null);
+        setLatestReviewOpinion("");
+        setLatestProcessHistory("");
+        setLastSearchValues(null);
     };
 
     const handleSearch = async (values: SearchFormValues) => {
@@ -44,6 +102,7 @@ const SeweragePenetrationRateRvw = () => {
             alert('시도를 선택해주세요.');
             return;
         }
+        setLastSearchValues(values);
 
         try {
             setIsLoading(true);
@@ -62,10 +121,25 @@ const SeweragePenetrationRateRvw = () => {
 
                     spcCtpnRgnCn: !item.spcCtpnRgnCn ? '해당없음' : item.spcCtpnRgnCn,
                 }));
-
+                
+                setStatsStatusInfo(response.data.statsStatusInfo);
+                setReviewOpinionContext({
+                    statsYr: values.year ?? "",
+                    sewerBzmnCd: values.bsnmCd ?? "",
+                    statsCd: response.data.statsStatusInfo.statsCd ?? "",
+                });
+                setLatestReviewOpinion(
+                    response.data.statsStatusInfo.splmntOpnnCn ?? "",
+                );
+                setLatestProcessHistory(
+                    response.data.statsStatusInfo.wrterOpnnCn ?? "",
+                );
                 setRowData(toGridRows(convertedData));
             } else {
                 setRowData([]);
+                setReviewOpinionContext(null);
+                setLatestReviewOpinion("");
+                setLatestProcessHistory("");
                 alert(response.message || "데이터가 없습니다.");
             }
         } catch (error) {
@@ -76,23 +150,85 @@ const SeweragePenetrationRateRvw = () => {
         }
     };
 
-    const approveFunc = () => console.log('approveFunc');
-    const saveFunc = () => console.log('submit');
-    const reviewOpinionFunc = () => console.log('reviewOpinionFunc');
-    const returnFunc = () => console.log('returnFunc');
+    const submitFunc = () => {
+        if (submitDialogContext == null) {
+            alert("조회 후 제출할 수 있습니다.");
+            return;
+        }
+
+        setSubmitDialogOpen(true);
+    };
+
+    const reviewOpinionFunc = async () => {
+        if (reviewOpinionContext == null) {
+            alert("조회 후 검토의견을 작성할 수 있습니다.");
+            return;
+        }
+
+        try {
+            const detailRes = await statisticsApi.getReviewOpinionDetail({
+                statsYr: reviewOpinionContext.statsYr,
+                sewerBzmnCd: reviewOpinionContext.sewerBzmnCd,
+                statsCd: reviewOpinionContext.statsCd,
+            });
+
+            if (detailRes.status !== "success") {
+                alert(detailRes.message || "검토의견 조회에 실패했습니다.");
+                return;
+            }
+
+            const row = detailRes.data?.[0];
+            setLatestReviewOpinion(row?.splmntOpnnCn ?? "");
+            setLatestProcessHistory(row?.wrterOpnnCn ?? "");
+            setReviewOpinionOpen(true);
+        } catch {
+            alert("검토의견 조회 중 오류가 발생했습니다.");
+        }
+    };
+
+    const saveReviewOpinion = async (param: ReviewOpinionSaveRequest) => {
+        try {
+            const response = await statisticsApi.saveReviewOpinion(param);
+            if (response.status !== "success") {
+                alert(response.message || "저장에 실패했습니다.");
+                return;
+            }
+            alert(response.message || "저장되었습니다.");
+            setStatsStatusInfo((prev) => ({
+                ...prev,
+                splmntOpnnCn: param.splmntOpnnCn,
+                wrterOpnnCn: param.wrterOpnnCn,
+            }));
+            setLatestReviewOpinion(param.splmntOpnnCn);
+            setLatestProcessHistory(param.wrterOpnnCn);
+        } catch {
+            alert("저장 중 오류가 발생했습니다.");
+        }
+    };
+
+    const returnFunc = () => setReturnDialogOpen(true);
+
+    const handleSaveReturnReason = async () => {
+        if (lastSearchValues != null) {
+            await handleSearch(lastSearchValues);
+        }
+    };
 
     return (
         <div className="relative">
             <SearchForm onSubmit={handleSearch} onReset={handleReset} />
 
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
-                    <ApproveButton approveFunc={approveFunc} />
-                    <ReturnButton returnFunc={returnFunc} />
-                    <SaveButton saveFunc={saveFunc} />
+            {showActionBar && (
+                <div className="card !py-0">
+                    <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
+                        {showReviewOpinionButton && (
+                            <ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
+                        )}
+                        {showReturnButton && <ReturnButton returnFunc={returnFunc} />}
+                        {showSubmitButton && <SubmitButton submitFunc={submitFunc} />}
+                    </div>
                 </div>
-            </div>
+            )}
 
             {isLoading && (
                 <div className="absolute inset-0 z-50 [data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center">
@@ -110,6 +246,31 @@ const SeweragePenetrationRateRvw = () => {
                 rowData={rowData}
                 setRowData={setRowData}
             />
+
+            <ReviewOpinionDialog
+                open={reviewOpinionOpen}
+                onOpenChange={setReviewOpinionOpen}
+                context={reviewOpinionContext}
+                initialReviewOpinion={latestReviewOpinion}
+                initialProcessHistory={latestProcessHistory}
+                onSave={saveReviewOpinion}
+            />
+            <ReviewSubmitDialog
+                open={submitDialogOpen}
+                onOpenChange={setSubmitDialogOpen}
+                context={submitDialogContext}
+                onSubmitted={async () => {
+                    if (lastSearchValues != null) {
+                        await handleSearch(lastSearchValues);
+                    }
+                }}
+            />
+            <ReturnReasonDialog
+                open={returnDialogOpen}
+                onOpenChange={setReturnDialogOpen}
+                context={reviewOpinionContext}
+                onSave={handleSaveReturnReason}
+            />
         </div>
     );
 };
diff --git a/apps/st/src/components/statistics/review/StatsInputStatusRvw.tsx b/apps/st/src/components/statistics/review/StatsInputStatusRvw.tsx
index 8fdd74d4f..8241d9bcd 100644
--- a/apps/st/src/components/statistics/review/StatsInputStatusRvw.tsx
+++ b/apps/st/src/components/statistics/review/StatsInputStatusRvw.tsx
@@ -1,24 +1,78 @@
-import { useState, useMemo } from "react";
-import { DataGrid } from "@rsone/components";
+import { useCallback, useMemo, useState } from "react";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+
+import DataGrid from "@/components/module/DataGrid";
+import type { DataCellClickCallbackParams } from "@/components/type/DataGrid.type";
 import SearchForm from "@/components/module/SearchForm";
-import SaveButton from "@/components/button/SaveButton";
 import ApproveButton from "@/components/button/ApproveButton";
-import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
-import ReturnButton from "@/components/button/ReturnButton";
-import { LoadingWithAnimation } from "@common/components"; 
+import { doList } from "@/components/util/column/input/DoList";
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    LoadingWithAnimation,
+    DataTable
+} from "@common/components";
 
 import { useAlertStore } from "@/shared/lib";
+import { statisticsApi } from "@/entities/statistics/api/statistics-service";
+import type { StatsInputStatusApproveItem } from "@/entities/statistics/model/statistics-interface";
 import { StatsInputStatusInfoList } from "@/components/util/column/review/StatsInputStatusRvwColumn";
 import { statisticsManagementApi } from "@/entities/statistics/api/statistics-management-service";
-import type { StatsInputStatusReviewItem } from "@/entities/statistics/model/statistics-input-review-interface";
+import type {
+    ReviewHistoryResponse,
+    StatsInputStatusReviewItem,
+} from "@/entities/statistics/model/statistics-input-review-interface";
 import { toGridRows } from "@/components/util/grid/gridFunction";
 import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
+type ReviewHistoryRow = ReviewHistoryResponse["data"][number];
+
+const checkPrvnStatusCd = (code: string) => {
+    return (code === '0' || code === '1') ? '미작성' : (code === '2' ? '제출완료' : (code === '3' ? '승인완료' : '반려'));
+};
+
+const checkSubmitStatusCd = (code: string) => {
+    return code === '0' ? '미작성' : (code === '1' ? '작성중' : (code === '2' ? '제출완료' : (code === '3' ? '승인완료' : '보완요청')));
+};
+
+const isStatsInputStatusRowApprovable = (row: Record<string, string | number>) =>
+    String(row.submitStatusCd ?? "") === "3" && (String(row.prvnStatusCd ?? "") === "2" || String(row.prvnStatusCd ?? "") === "3");
+
+const mapSewerageListToGridRows = (rawList: StatsInputStatusReviewItem[]) =>
+    rawList.map((r) => ({
+        ...r,
+        prvnStatusNm: checkPrvnStatusCd(r.prvnStatusCd || "0"),
+        submitStatusNm: checkSubmitStatusCd(r.submitStatusCd || "0"),
+        reviewHistory: "검토이력",
+    }));
 
 // 하수도 통계 검토 00. 통계 입력 현황
 const StatsInputStatusRvw = () => {
     const { setMessage: alert } = useAlertStore((state) => state);
+    const { confirm } = useConfirm();
     const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
+    const [historyRowData, setHistoryRowData] = useState<ReviewHistoryRow[]>([]);
     const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isApproveLoading, setIsApproveLoading] = useState(false);
+    const [searchedYear, setSearchedYear] = useState<string>("");
+    const [lastSearchedValues, setLastSearchedValues] = useState<SearchFormValues | null>(null);
+    const [hasCompletedSearch, setHasCompletedSearch] = useState(false);
+    const [reviewHistoryOpen, setReviewHistoryOpen] = useState<boolean>(false);
+    const [historySearchInfo, setHistorySearchInfo] = useState<{
+        ctpvNm: string;
+        sggNm: string;
+        tabNm: string;
+    }>({
+        ctpvNm: '',
+        sggNm: '',
+        tabNm: '',
+    });
 
     const columnInfo = useMemo(() => {
         const { columns, columnLayout } = StatsInputStatusInfoList;
@@ -31,8 +85,33 @@ const StatsInputStatusRvw = () => {
         };
     }, []);
 
+    const reviewHistoryColumns = useMemo(() => {
+        const col = createColumnHelper<ReviewHistoryRow>();
+        return [
+            col.accessor("logDt", {
+                header: "등록일",
+                cell: (info) => info.getValue(),
+            }),
+            col.accessor("historyContent", {
+                header: "내용",
+                cell: (info) => info.getValue(),
+            }),
+        ];
+    }, []);
+
+    const historyTable = useReactTable({
+        data: historyRowData,
+        columns: reviewHistoryColumns,
+        getCoreRowModel: getCoreRowModel(),
+        getRowId: (_row, index) => String(index),
+    });
+
     const handleReset = () => {
         setRowData([]);
+        setSearchedYear("");
+        setLastSearchedValues(null);
+        setHasCompletedSearch(false);
+        setIsApproveLoading(false);
     };
 
     const handleSearch = async (values: SearchFormValues) => {
@@ -43,54 +122,187 @@ const StatsInputStatusRvw = () => {
 
         try {
             setIsLoading(true);
-            
+            setSearchedYear(values.year ?? "");
+            setLastSearchedValues(values);
+            setHasCompletedSearch(false);
+
             const response = await statisticsManagementApi.getStatsInputStatusList({
-                sido: values.sido,
-                gugun: values.gugun === 'ALL' ? '' : values.gugun, 
-                yr: values.year, 
-                bsnmCd: values.bsnmCd
+                ctpvNm: values.sido,
+                sggNm: values.gugun === 'ALL' ? '' : values.gugun,
+                statsYr: values.year,
+                sewerBzmnCd: values.bsnmCd
             });
 
             if (response.status === 'success' && response.data) {
-                const rawList = response.data.sewerageSupplyRateList ?? [];
-                const convertedData: StatsInputStatusReviewItem[] = rawList.map((item: StatsInputStatusReviewItem) => ({
-                    ...item,
-                    status: item.status || '미확인',
-                }));
-
-                setRowData(toGridRows(convertedData));
+                const rawList = response.data.sewerageInputList ?? [];
+                setRowData(toGridRows(mapSewerageListToGridRows(rawList)));
             } else {
                 setRowData([]);
+                setHasCompletedSearch(false);
                 alert(response.message || "조회된 데이터가 없습니다.");
+                return;
             }
-        } catch (error) {
-            console.error("입력현황 조회 중 에러 발생:", error);
+            setHasCompletedSearch(true);
+        } catch {
             alert('데이터 조회 중 오류가 발생했습니다.');
             setRowData([]);
+            setHasCompletedSearch(false);
         } finally {
             setIsLoading(false);
         }
     };
 
-    const approveFunc = () => console.log('approveFunc');
-    const saveFunc = () => console.log('submit');
-    const reviewOpinionFunc = () => console.log('reviewOpinionFunc');
-    const returnFunc = () => console.log('returnFunc');
+    const approveFunc = async () => {
+        if (rowData.length === 0) {
+            alert("조회된 통계 항목이 없습니다.");
+            return;
+        }
+        if (!lastSearchedValues?.year?.trim() || !lastSearchedValues?.bsnmCd?.trim()) {
+            alert("먼저 조회를 진행해주세요.");
+            return;
+        }
+
+        if (!rowData.every(isStatsInputStatusRowApprovable)) {
+            alert("지자체 진행상태가 승인완료이고 진행상태가 제출완료인 항목만 승인할 수 있습니다.");
+            return;
+        }
+
+        if (!(await confirm("조회된 통계 항목을 승인하시겠습니까?"))) {
+            return;
+        }
+
+        setIsApproveLoading(true);
+        try {
+            const userInfo = await getUserInfo();
+            const mdfrId = (userInfo.userUnqId ?? "").trim();
+            if (!mdfrId) {
+                alert("수정자 ID를 확인할 수 없습니다.");
+                return;
+            }
+
+            const statsYr = lastSearchedValues.year.trim();
+            const sewerBzmnCdDefault = lastSearchedValues.bsnmCd.trim();
+
+            const approveItems: StatsInputStatusApproveItem[] = rowData
+                .map((row) => {
+                    const statsCd = String(row.statsCd ?? "").trim();
+                    const sewerBzmnCd = String(row.sewerBzmnCd ?? sewerBzmnCdDefault).trim();
+                    return { statsYr, sewerBzmnCd, statsCd, mdfrId };
+                })
+                .filter((item) => item.statsCd.length > 0);
+
+            if (approveItems.length === 0) {
+                alert("통계 코드(statsCd)가 있는 행이 없습니다.");
+                return;
+            }
+
+            const response = await statisticsApi.approveStatsInputStatus({ list: approveItems }, "REVIEW");
+            if (response.resultCode.toLocaleLowerCase() === "success") {
+                try {
+                    const listResponse = await statisticsManagementApi.getStatsInputStatusList({
+                        ctpvNm: lastSearchedValues.sido,
+                        sggNm: lastSearchedValues.gugun === "ALL" ? "" : lastSearchedValues.gugun,
+                        statsYr: lastSearchedValues.year ?? "",
+                        sewerBzmnCd: lastSearchedValues.bsnmCd,
+                    });
+                    if (listResponse.status === "success" && listResponse.data) {
+                        const rawList = listResponse.data.sewerageInputList ?? [];
+                        setRowData(toGridRows(mapSewerageListToGridRows(rawList)));
+                    }
+                } catch {
+                    /* 목록 갱신 실패는 별도 안내 없이 생략 */
+                }
+                alert(response.message ?? "승인되었습니다.");
+            } else {
+                alert(response.message ?? "승인에 실패했습니다.");
+            }
+        } catch {
+            alert("승인 처리 중 오류가 발생했습니다.");
+        } finally {
+            setIsApproveLoading(false);
+        }
+    };
+
+    const gugunOkOrNotDoList = doList.includes(lastSearchedValues?.bsnmCd || "")
+        ? Boolean(lastSearchedValues?.gugun && lastSearchedValues.gugun !== "ALL")
+        : true;
+
+    const allSubmitStatusApproved = useMemo(
+        () =>
+            rowData.length > 0 &&
+            rowData.every((row) => String(row.submitStatusCd ?? "") === "3"),
+        [rowData],
+    );
+
+    /** 진행상태(prvn) 코드가 모두 승인완료(3) */
+    const allPrvnStatusApproved = useMemo(
+        () =>
+            rowData.length > 0 &&
+            rowData.every((row) => String(row.prvnStatusCd ?? "") === "3"),
+        [rowData],
+    );
+
+    const showActionToolbarCard =
+        hasCompletedSearch &&
+        rowData.length > 0 &&
+        gugunOkOrNotDoList &&
+        allSubmitStatusApproved &&
+        !allPrvnStatusApproved;
+
+    const openReviewHistoryForRow = useCallback(
+        async (row: Record<string, string | number>) => {
+            if (!searchedYear) {
+                alert("먼저 조회를 진행해주세요.");
+                return;
+            }
+            setHistorySearchInfo({
+                ctpvNm: String(row.ctpvNm ?? ""),
+                sggNm: String(row.sggNm ?? ""),
+                tabNm: String(row.tabNm ?? ""),
+            });
+            const params = {
+                statsYr: searchedYear,
+                sewerBzmnCd: String(row.sewerBzmnCd ?? ""),
+                statsCd: String(row.statsCd ?? ""),
+            };
+
+            try {
+                const response = await statisticsManagementApi.getReviewHistory(params);
+
+                if (response.status === "success") {
+                    setHistoryRowData(response.data);
+                    setReviewHistoryOpen(true);
+                } else {
+                    alert(response.message || "검토 이력 조회 중 오류가 발생했습니다.");
+                }
+            } catch {
+                alert("검토 이력 조회 중 오류가 발생했습니다.");
+            }
+        },
+        [alert, searchedYear],
+    );
+
+    const handleReviewHistoryCellClick = useCallback(
+        ({ fieldName, row }: DataCellClickCallbackParams) => {
+            if (fieldName !== "reviewHistory") return;
+            void openReviewHistoryForRow(row);
+        },
+        [openReviewHistoryForRow],
+    );
 
     return (
         <div className="relative">
             <SearchForm onSubmit={handleSearch} onReset={handleReset} />
-            
-            <div className="card !py-0">
-                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                    <ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
-                    <ApproveButton approveFunc={approveFunc} />
-                    <ReturnButton returnFunc={returnFunc} />
-                    <SaveButton saveFunc={saveFunc} />
-                </div>
-            </div>
 
-            {isLoading && (
+            {showActionToolbarCard && (
+                <div className="card !py-0">
+                    <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
+                        <ApproveButton approveFunc={approveFunc} />
+                    </div>
+                </div>
+            )}
+
+            {(isLoading || isApproveLoading) && (
                 <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" />
@@ -100,12 +312,81 @@ const StatsInputStatusRvw = () => {
 
             <DataGrid
                 columnInfo={columnInfo}
-                isExcelImport={false} 
-                rowStartNum={2} 
-                fixedColumns={2}
+                isExcelImport={false}
+                showHeaderCheckbox={false}
+                rowStartNum={2}
+                fixedColumns={3}
                 rowData={rowData}
                 setRowData={setRowData}
+                onDataCellClick={handleReviewHistoryCellClick}
+                cellStyleCallback={({ row, fieldName }) => {
+                    if (fieldName === "submitStatusNm") {
+                        const statusCd = String(row.submitStatusCd ?? "");
+
+                        if (statusCd === "0" || statusCd === "1") {
+                            return "rg-cell-stats-status-pending";
+                        }
+                        if (statusCd === "2") {
+                            return "rg-cell-stats-status-submitted";
+                        }
+                        if (statusCd === "3") {
+                            return "rg-cell-stats-status-approved";
+                        }
+                        if (statusCd === "4") {
+                            return "rg-cell-stats-status-rejected";
+                        }
+                        return undefined;
+                    } else if (fieldName === "prvnStatusNm") {
+                        const statusCd = String(row.prvnStatusCd ?? "");
+
+                        if (statusCd === "0" || statusCd === "1") {
+                            return "rg-cell-stats-status-pending";
+                        }
+                        if (statusCd === "2") {
+                            return "rg-cell-stats-status-submitted";
+                        }
+                        if (statusCd === "3") {
+                            return "rg-cell-stats-status-approved";
+                        }
+                        if (statusCd === "4") {
+                            return "rg-cell-stats-status-rejected";
+                        }
+                        return undefined;
+                    } else {
+                        return undefined;
+                    }
+                }}
             />
+            <Dialog open={reviewHistoryOpen} onOpenChange={setReviewHistoryOpen}>
+                <DialogContent
+                    className="flex max-h-[85vh] max-w-[48rem] flex-col gap-4"
+                    aria-describedby={undefined}
+                >
+                    <DialogHeader className="shrink-0">
+                        <DialogTitle>
+                            {(historySearchInfo.sggNm ? `${historySearchInfo.ctpvNm} ${historySearchInfo.sggNm} - ${searchedYear}년 ${historySearchInfo.tabNm} 검토이력` : `${historySearchInfo.ctpvNm} - ${searchedYear}년 ${historySearchInfo.tabNm} 검토이력`)}
+                        </DialogTitle>
+                    </DialogHeader>
+                    {historyRowData.length === 0 ?
+                        <div className="text-2xl h-40 flex items-center justify-center">
+                            검토 이력이 없습니다.
+                        </div>
+                        :
+                        <div className="min-h-0 flex-1 overflow-y-auto overflow-x-auto">
+                            <DataTable table={historyTable} />
+                        </div>
+                    }
+                    <DialogFooter className="shrink-0">
+                        <Button
+                            type="button"
+                            color="gray"
+                            onClick={() => setReviewHistoryOpen(false)}
+                        >
+                            닫기
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
         </div>
     );
 };
diff --git a/apps/st/src/components/statistics/total/CellColorInfo.tsx b/apps/st/src/components/statistics/total/CellColorInfo.tsx
new file mode 100644
index 000000000..a44ee1879
--- /dev/null
+++ b/apps/st/src/components/statistics/total/CellColorInfo.tsx
@@ -0,0 +1,22 @@
+const CellColorInfo = () => {
+    return (
+        <div className="m-[0.6rem] flex justify-end">
+            <div className="flex justify-end items-center gap-[1.2rem] !text-xl bg-white w-fit py-3 px-5 border border-slate-200/80 rounded-md">
+                <div className="flex justify-center items-center gap-x-2">
+                    <div className="w-8 h-6 bg-[#feee85]"></div>
+                    <span>요약표</span>
+                </div>
+                <div className="flex justify-center items-center gap-x-2">
+                    <div className="w-8 h-6 bg-[#fff7bf]"></div>
+                    <span>합계</span>
+                </div>
+                <div className="flex justify-center items-center gap-x-2">
+                    <div className="w-8 h-6 bg-[#ffe9cf]"></div>
+                    <span>소계</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CellColorInfo;
\ No newline at end of file
diff --git a/apps/st/src/components/statistics/total/ExcretaTreatmentFacilityTot.tsx b/apps/st/src/components/statistics/total/ExcretaTreatmentFacilityTot.tsx
index e470b07fa..a5c7f2dae 100644
--- a/apps/st/src/components/statistics/total/ExcretaTreatmentFacilityTot.tsx
+++ b/apps/st/src/components/statistics/total/ExcretaTreatmentFacilityTot.tsx
@@ -1,10 +1,123 @@
+import { useRef, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import { LoadingWithAnimation } from "@common/components";
+
 import SearchForm from "@/components/module/SearchForm";
+import DataGrid from "@/components/module/DataGrid";
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+
+// 분리된 분뇨처리시설용 컬럼 구성 임포트
+import { ExcretaTreatmentStatusColumnConfig } from "@/components/util/column/total/SewerExcretaTreatmentStatusColumn";
+
+// 집계표(TOTAL) API 및 인터페이스 명세 호출
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import type { 
+    ExcretaTreatmentMaintainTotalRequest 
+} from "@/entities/statistics/model/statistics-total/statistics-excreta-treatment-total-interface";
+import CellColorInfo from "./CellColorInfo";
 
 const ExcretaTreatmentFacilityTot = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    
+    // null 타입 컴파일 에러를 방지하기 위해 엄격하게 정의한 데이터 상태
+    const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const lastSearchedValuesRef = useRef<SearchFormValues | null>(null);
+
+    const config = ExcretaTreatmentStatusColumnConfig;
+
+    const handleReset = () => {
+        setRowData([]);
+        lastSearchedValuesRef.current = null;
+    };
+
+    const loadGridData = async (values: SearchFormValues): Promise<boolean> => {
+        const param: ExcretaTreatmentMaintainTotalRequest = {
+            ctpvNm: values.sido === "ALL" ? "" : values.sido,
+            sggNm: values.gugun === "ALL" ? "" : values.gugun,
+            sewerBzmnCd: values.bsnmCd,
+            statsYr: values.year,
+            rowDataYn: values.isDetail,
+            summaryYn: values.isSummary !== 'ALL',
+            summaryYearCnt: values.isSummary !== 'ALL' ? Number(values.isSummary) : undefined
+        };
+
+        try {
+            const response = await statisticsTotalStatusApi.getExcretaTreatmentStatusTotalList(param);
+            if (response && response.status === "success" && response.data) {
+                // object[]로 변환하여 주입함으로써 상위 컴포넌트 간 null 에러 완벽 차단
+                setRowData(toGridRows(response.data as object[]));
+                return true;
+            }
+            alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            return false;
+        } catch {
+            alert("서버 연결 중 오류가 발생했습니다.");
+            return false;
+        }
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        try {
+            setIsLoading(true);
+            const ok = await loadGridData(values);
+            if (ok) {
+                lastSearchedValuesRef.current = values;
+            } else {
+                lastSearchedValuesRef.current = null;
+            }
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            lastSearchedValuesRef.current = null;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const gridColumnInfo: ColumnInfo = {
+        columns: config.columns,
+        columnLayout: config.columnLayout,
+    };
+
     return (
-        <>
-            <SearchForm />
-        </>
+        <div className="relative">
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} onReset={handleReset} sidoSelectText="전체" />
+            
+          {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>
+        )}
+            
+            <CellColorInfo />
+
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem] mt-[0.6rem]">
+                <DataGrid
+                    columnInfo={gridColumnInfo}
+                    rowStartNum={config.rowStartNum}
+                    excelExportFileSuffix={config.tabLabel}
+                    rowData={rowData}
+                    setRowData={setRowData} // 필수 프로퍼티 에러 해결
+                    isExcelImport={false}
+                    isExcelExport={true}
+                    showHeaderCheckbox={false}
+                    fixedColumns={config.fixedColumns}
+                    enableSort={false}
+                    cellStyleCallback={({ row }) => {
+                        const rowType = String(row.rowType ?? '');
+                        if (rowType === 'DETAIL') return undefined;
+                        if (rowType === 'BIZ_SUM') return 'rg-cell-rowtype-biz-sum';
+                        if (rowType === 'SUMMARY') return 'rg-cell-rowtype-summary';
+                        return 'rg-cell-rowtype-other';
+                    }}
+                />
+            </div>
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/total/PrivateSewageFacilityTot.tsx b/apps/st/src/components/statistics/total/PrivateSewageFacilityTot.tsx
index 1171f7b2c..0948ab60e 100644
--- a/apps/st/src/components/statistics/total/PrivateSewageFacilityTot.tsx
+++ b/apps/st/src/components/statistics/total/PrivateSewageFacilityTot.tsx
@@ -1,10 +1,206 @@
+import { useRef, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
+
 import SearchForm from "@/components/module/SearchForm";
+import DataGrid from "@/components/module/DataGrid";
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+
+// 분리된 개별 3개 컬럼 스펙 파일 로드
+import { PrivateSewageTab1ColumnConfig } from "@/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column";
+import { PrivateSewageTab2ColumnConfig } from "@/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab2Column";
+import { PrivateSewageTab3ColumnConfig } from "@/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab3Column";
+
+// 통계 API 서비스 및 통합 DTO 명세 임포트
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import type { 
+    PrivateSewageFacilitySummaryRequest 
+} from "@/entities/statistics/model/statistics-total/statistics-private-sewage-total-interface";
+import CellColorInfo from "./CellColorInfo";
+
+const PrivateSewageColumnListTot = [
+    PrivateSewageTab1ColumnConfig,
+    PrivateSewageTab2ColumnConfig,
+    PrivateSewageTab3ColumnConfig
+];
+
+const firstTabKey = PrivateSewageColumnListTot[0]?.tabKey ?? "ST00040005_1";
 
 const PrivateSewageFacilityTot = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    
+    // null 컴파일 예러를 사전에 원천 차단한 안전 상태 맵 선언
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const [isLoading, setIsLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState(firstTabKey);
+    const lastSearchedValuesRef = useRef<SearchFormValues | null>(null);
+
+    const columnInfo = PrivateSewageColumnListTot;
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setActiveTab(firstTabKey);
+        lastSearchedValuesRef.current = null;
+    };
+
+    /** 각 탭별 엔드포인트 비동기 디스패치 및 연동 */
+    const loadGridData = async (tabKey: string, values: SearchFormValues): Promise<boolean> => {
+        const param: PrivateSewageFacilitySummaryRequest = {
+            ctpvNm: values.sido === "ALL" ? "" : values.sido,
+            sggNm: values.gugun === "ALL" ? "" : values.gugun,
+            sewerBzmnCd: values.bsnmCd,
+            statsYr: values.year,
+            rowDataYn: values.isDetail,
+            summaryYn: values.isSummary !== 'ALL',
+            summaryYearCnt: values.isSummary !== 'ALL' ? Number(values.isSummary) : undefined
+        };
+
+        try {
+            // [Tab1] 처리용량별 오수처리시설
+            if (tabKey === "ST00080001") {
+                const response = await statisticsTotalStatusApi.getPrivateSewageTab1List(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            } 
+            
+            // [Tab2] 정화조현황
+            if (tabKey === "ST00080002") {
+                const response = await statisticsTotalStatusApi.getPrivateSewageTab2List(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            }
+
+            // [Tab3] 개인하수도 관리지역 지정공고 현황
+            if (tabKey === "ST00080003") {
+                const response = await statisticsTotalStatusApi.getPrivatePrivateMgmtAreaList(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            }
+            return false;
+        } catch {
+            alert("서버 연결 중 오류가 발생했습니다.");
+            return false;
+        }
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        try {
+            setIsLoading(true);
+            const ok = await loadGridData(activeTab, values);
+            if (ok) {
+                lastSearchedValuesRef.current = values;
+            } else {
+                lastSearchedValuesRef.current = null;
+            }
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            lastSearchedValuesRef.current = null;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        setActiveTab(tabKey);
+        const values = lastSearchedValuesRef.current;
+        if (!values) return;
+
+        const existing = rowDataMap.get(tabKey);
+        if (existing && existing.length > 0) return; // 캐싱 검증 스킵
+
+        try {
+            setIsLoading(true);
+            await loadGridData(tabKey, values);
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
     return (
-        <>
-            <SearchForm />
-        </>
+        <div className="relative">
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} onReset={handleReset} sidoSelectText="전체" />
+            
+            {/* 하수관로 규칙과 100% 싱크 맞춘 중앙 정렬 소형 팝업 로딩 바 고정 */}
+            {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>
+            )}
+            
+            <CellColorInfo />
+
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                <Tabs value={activeTab} onValueChange={(v) => void handleActiveTabChange(v)} className="w-full" variant="default">
+                    <TabsList>
+                        {columnInfo.map((info) => (
+                            <TabsTrigger key={info.tabKey} value={info.tabKey}>
+                                {info.tabLabel}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    
+                    {columnInfo.map((info) => {
+                        const tabKey = info.tabKey;
+                        
+                        // 단언 연산자(as) 배제 형태 완벽 적용
+                        const rowData = rowDataMap.get(tabKey) ?? [];
+                        
+                        const gridColumnInfo: ColumnInfo = {
+                            columns: info.columns,
+                            columnLayout: info.columnLayout,
+                        };
+
+                        return (
+                            <TabsContent key={tabKey} value={tabKey}>
+                                <DataGrid
+                                    columnInfo={gridColumnInfo}
+                                    rowStartNum={info.rowStartNum}
+                                    excelExportFileSuffix={info.tabLabel}
+                                    rowData={rowData}
+                                    setRowData={(updater) => {
+                                        setRowDataMap((prev) => {
+                                            const next = new Map(prev);
+                                            const cur = next.get(tabKey) ?? [];
+                                            const n = typeof updater === "function" ? updater(cur) : updater;
+                                            next.set(tabKey, n);
+                                            return next;
+                                        });
+                                    }}
+                                    isExcelImport={false}
+                                    isExcelExport={true}
+                                    showHeaderCheckbox={false}
+                                    fixedColumns={info.fixedColumns}
+                                    enableSort={false}
+                                    cellStyleCallback={({ row }) => {
+                                        const rowType = String(row.rowType ?? '');
+                                        if (rowType === 'DETAIL') return undefined;
+                                        if (rowType === 'BIZ_SUM') return 'rg-cell-rowtype-biz-sum';
+                                        if (rowType === 'SUMMARY') return 'rg-cell-rowtype-summary';
+                                        return 'rg-cell-rowtype-other';
+                                    }}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+                </Tabs>
+            </div>
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/total/PublicSewageFacilityTot.tsx b/apps/st/src/components/statistics/total/PublicSewageFacilityTot.tsx
index 6eb3f2991..280db0894 100644
--- a/apps/st/src/components/statistics/total/PublicSewageFacilityTot.tsx
+++ b/apps/st/src/components/statistics/total/PublicSewageFacilityTot.tsx
@@ -1,9 +1,79 @@
+import { useState } from "react";
+
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { PublicSewageFacilityColumn } from "@/components/util/column/total/PublicSewageFacilityColumn";
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import { useAlertStore } from "@/shared/lib";
+
 import SearchForm from "@/components/module/SearchForm";
+import DataGrid from "@/components/module/DataGrid";
+import CellColorInfo from "./CellColorInfo";
+import { LoadingWithAnimation } from "@common/components";
 
 const PublicSewageFacilityTot = () => {
+    const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const { setMessage: alert } = useAlertStore((state) => state);
+
+    const handleSearch = async (values: SearchFormValues) => {
+        try {
+            setIsLoading(true);
+
+            const isSummaryEnabled = values.isSummary !== 'ALL';
+            const summaryYearCnt = isSummaryEnabled ? Number(values.isSummary) : undefined;
+
+            const param = {
+                ctpvNm: values.sido === 'ALL' ? '' : values.sido,
+                sggNm: values.gugun === 'ALL' ? '' : values.gugun,
+                sewerBzmnCd: values.bsnmCd,
+                statsYr: values.year,
+                rowDataYn: values.isDetail,
+                summaryYn: isSummaryEnabled,
+                ...(isSummaryEnabled ? { summaryYearCnt } : {}),
+            };
+
+            const response = await statisticsTotalStatusApi.getSewagePublicFacillityTotal(param);
+
+            if (response.status === 'success') {
+                setRowData(toGridRows(response.data));
+            } else {
+                alert(response.message || '데이터 조회 중 오류가 발생했습니다.');
+            }
+        } catch (error) {
+            console.log(error);
+            alert('데이터 조회 중 오류가 발생했습니다.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
     return (
         <>
-            <SearchForm />
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} sidoSelectText="전체" />
+            {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>
+            )}
+            <CellColorInfo />
+            <DataGrid
+                columnInfo={PublicSewageFacilityColumn}
+                rowStartNum={2}
+                isExcelImport={false}
+                fixedColumns={2}
+                rowData={rowData}
+                setRowData={setRowData}
+                cellStyleCallback={({ row }) => {
+                    const rowType = String(row.rowType ?? '');
+                    if (rowType === 'DETAIL') return undefined;
+                    if (rowType === 'BIZ_SUM') return 'rg-cell-rowtype-biz-sum';
+                    if (rowType === 'SUMMARY') return 'rg-cell-rowtype-summary';
+                    return 'rg-cell-rowtype-other';
+                }}
+            />
         </>
     );
 };
diff --git a/apps/st/src/components/statistics/total/PumpingStationTot.tsx b/apps/st/src/components/statistics/total/PumpingStationTot.tsx
index fd4cc679d..b3da0a044 100644
--- a/apps/st/src/components/statistics/total/PumpingStationTot.tsx
+++ b/apps/st/src/components/statistics/total/PumpingStationTot.tsx
@@ -1,10 +1,123 @@
+import { useRef, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import { LoadingWithAnimation } from "@common/components";
+
 import SearchForm from "@/components/module/SearchForm";
+import DataGrid from "@/components/module/DataGrid";
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+
+// 분리된 중계펌프장용 컬럼 구성 임포트
+import { MediationPumpStatusColumnConfig } from "@/components/util/column/total/SewerMediationPumpStatusColumn";
+
+// 집계표(TOTAL) API 및 인터페이스 명세 호출
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import type { 
+    MediationPumpMaintainTotalRequest 
+} from "@/entities/statistics/model/statistics-total/statistics-mediation-pump-total-interface";
+import CellColorInfo from "./CellColorInfo";
 
 const PumpingStationTot = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    
+    // null 타입 컴파일 에러가 발생하지 않도록 엄격하게 정의한 데이터 상태
+    const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const lastSearchedValuesRef = useRef<SearchFormValues | null>(null);
+
+    const config = MediationPumpStatusColumnConfig;
+
+    const handleReset = () => {
+        setRowData([]);
+        lastSearchedValuesRef.current = null;
+    };
+
+    const loadGridData = async (values: SearchFormValues): Promise<boolean> => {
+        const param: MediationPumpMaintainTotalRequest = {
+            ctpvNm: values.sido === "ALL" ? "" : values.sido,
+            sggNm: values.gugun === "ALL" ? "" : values.gugun,
+            sewerBzmnCd: values.bsnmCd,
+            statsYr: values.year,
+            rowDataYn: values.isDetail,
+            summaryYn: values.isSummary !== 'ALL',
+            summaryYearCnt: values.isSummary !== 'ALL' ? Number(values.isSummary) : undefined
+        };
+
+        try {
+            const response = await statisticsTotalStatusApi.getMediationPumpStationStatusTotalList(param);
+            if (response && response.status === "success" && response.data) {
+                // object[]로 변환하여 주입함으로써 null 에러 전면 방지
+                setRowData(toGridRows(response.data as object[]));
+                return true;
+            }
+            alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            return false;
+        } catch {
+            alert("서버 연결 중 오류가 발생했습니다.");
+            return false;
+        }
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        try {
+            setIsLoading(true);
+            const ok = await loadGridData(values);
+            if (ok) {
+                lastSearchedValuesRef.current = values;
+            } else {
+                lastSearchedValuesRef.current = null;
+            }
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            lastSearchedValuesRef.current = null;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const gridColumnInfo: ColumnInfo = {
+        columns: config.columns,
+        columnLayout: config.columnLayout,
+    };
+
     return (
-        <>
-            <SearchForm />
-        </>
+        <div className="relative">
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} onReset={handleReset} sidoSelectText="전체" />
+            
+            {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>
+            )}
+            
+            <CellColorInfo />
+
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem] mt-[0.6rem]">
+                <DataGrid
+                    columnInfo={gridColumnInfo}
+                    rowStartNum={config.rowStartNum}
+                    excelExportFileSuffix={config.tabLabel}
+                    rowData={rowData}
+                    setRowData={setRowData} 
+                    isExcelImport={false}
+                    isExcelExport={true}
+                    showHeaderCheckbox={false}
+                    fixedColumns={config.fixedColumns}
+                    enableSort={false}
+                    cellStyleCallback={({ row }) => {
+                        const rowType = String(row.rowType ?? '');
+                        if (rowType === 'DETAIL') return undefined;
+                        if (rowType === 'BIZ_SUM') return 'rg-cell-rowtype-biz-sum';
+                        if (rowType === 'SUMMARY') return 'rg-cell-rowtype-summary';
+                        return 'rg-cell-rowtype-other';
+                    }}
+                />
+            </div>
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/total/SewageExcretaRelatedTot.tsx b/apps/st/src/components/statistics/total/SewageExcretaRelatedTot.tsx
index adcc810ad..4a3e1cc56 100644
--- a/apps/st/src/components/statistics/total/SewageExcretaRelatedTot.tsx
+++ b/apps/st/src/components/statistics/total/SewageExcretaRelatedTot.tsx
@@ -1,10 +1,162 @@
+import { useRef, useState } from "react";
+import { useAlertStore } from "@/shared/lib";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
 import SearchForm from "@/components/module/SearchForm";
+import DataGrid from "@/components/module/DataGrid";
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import CellColorInfo from "./CellColorInfo";
+
+// 12. 하수 및 분뇨 관리 산업 탭 설정 (경로 확인 필수)
+import { PublicSewageStaffTab1ColumnConfig } from "@/components/util/column/total/sewageExcretaIndustry/PublicSewageStaffTab1Column";
+import { PublicHumanWasteStaffTab2ColumnConfig } from "@/components/util/column/total/sewageExcretaIndustry/PublicHumanWasteStaffTab2Column";
+import { HumanWasteCollectionTab3ColumnConfig } from "@/components/util/column/total/sewageExcretaIndustry/HumanWasteCollectionTab3Column";
+import { IndividualSewageTab4ColumnConfig } from "@/components/util/column/total/sewageExcretaIndustry/IndividualSewageTab4Column";
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import type { 
+    SewerageIndustry,
+    PublicSewageStaffTab1Response,
+    PublicHumanWasteStaffTab2Response,
+    HumanWasteCollectionTab3Response,
+    IndividualSewageTab4Response
+} from "@/entities/statistics/model/statistics-total/statistics-sewerage-industry-interface";
+
+const SewageExcretaIndustryColumnListTot = [PublicSewageStaffTab1ColumnConfig,PublicHumanWasteStaffTab2ColumnConfig,HumanWasteCollectionTab3ColumnConfig,IndividualSewageTab4ColumnConfig].filter(Boolean);
+const firstTabKey = SewageExcretaIndustryColumnListTot[0]?.tabKey ?? "ST00120001";
 
 const SewageExcretaRelatedTot = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const [isLoading, setIsLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState(firstTabKey);
+    const lastSearchedValuesRef = useRef<SearchFormValues | null>(null);
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setActiveTab(firstTabKey);
+        lastSearchedValuesRef.current = null;
+    };
+
+    const loadGridData = async (tabKey: string, values: SearchFormValues): Promise<boolean> => {
+        setIsLoading(true);
+        const param: SewerageIndustry = {
+            ctpvNm: values.sido === "ALL" ? "" : values.sido,
+            sggNm: values.gugun === "ALL" ? "" : values.gugun,
+            sewerBzmnCd: values.bsnmCd,
+            statsYr: values.year,
+            rowDataYn: values.isDetail,
+            summaryYn: values.isSummary !== 'ALL',
+            summaryYearCnt: values.isSummary !== 'ALL' ? Number(values.isSummary) : undefined
+        };
+
+        try {
+            if (tabKey === "ST00120001") {
+                const response: PublicSewageStaffTab1Response = await statisticsTotalStatusApi.getPublicSewageStaffTab1List(param);
+                if (response?.status === "success") {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+            }
+        else if (tabKey === "ST00120002") {
+            const response: PublicHumanWasteStaffTab2Response = await statisticsTotalStatusApi.getPublicHumanWasteStaffTab2List(param);
+            if (response?.status === "success") {
+                setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                return true;
+            }
+        }
+        else if (tabKey === "ST00120003") {
+        const response: HumanWasteCollectionTab3Response = await statisticsTotalStatusApi.getHumanWasteCollectionTab3List(param);
+        if (response?.status === "success") {
+            setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+            return true;
+            }
+        }
+        // [TAB4] 개인하수처리관련업
+        else if (tabKey === "ST00120004") {
+        const response: IndividualSewageTab4Response = await statisticsTotalStatusApi.getIndividualSewageTab4List(param);
+        if (response?.status === "success") {
+            setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+            return true;
+            }
+        }   
+            return false;
+        } catch {
+            alert("서버 연결 중 오류가 발생했습니다.");
+            return false;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        lastSearchedValuesRef.current = values;
+        await loadGridData(activeTab, values);
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        setActiveTab(tabKey);
+        const values = lastSearchedValuesRef.current;
+        if (!values || rowDataMap.has(tabKey)) return;
+        await loadGridData(tabKey, values);
+    };
+
     return (
-        <>
-            <SearchForm />
-        </>
+        <div className="relative">
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} onReset={handleReset} sidoSelectText="전체" />
+            
+            {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>
+            )}
+            
+            <CellColorInfo />
+
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                <Tabs value={activeTab} onValueChange={(v) => void handleActiveTabChange(v)} className="w-full" variant="default">
+                    <TabsList>
+                        {SewageExcretaIndustryColumnListTot.map((info) => (
+                            <TabsTrigger key={info.tabKey} value={info.tabKey}>{info.tabLabel}</TabsTrigger>
+                        ))}
+                    </TabsList>
+                    
+                 {SewageExcretaIndustryColumnListTot.map((info) => (
+                        <TabsContent key={info.tabKey} value={info.tabKey}>
+                            <DataGrid
+                                columnInfo={{ columns: info.columns, columnLayout: info.columnLayout }}
+                                rowStartNum={info.rowStartNum}
+                                rowData={rowDataMap.get(info.tabKey) ?? []}
+                                excelExportFileSuffix={info.tabLabel}
+                                setRowData={(updater) => {
+                                    setRowDataMap((prev) => {
+                                        const next = new Map(prev);
+                                        const cur = next.get(info.tabKey) ?? [];
+                                        const n = typeof updater === "function" ? updater(cur) : updater;
+                                        next.set(info.tabKey, n);
+                                        return next;
+                                    });
+                                }}
+                                isExcelImport={false}
+                                isExcelExport={true}
+                                showHeaderCheckbox={false}
+                                fixedColumns={info.fixedColumns}
+                                enableSort={false}
+                                cellStyleCallback={({ row }) => {
+                                    const rowType = String(row.rowType ?? '');
+                                    if (rowType === 'DETAIL') return undefined;
+                                    if (rowType === 'BIZ_SUM') return 'rg-cell-rowtype-biz-sum';
+                                    if (rowType === 'SUMMARY') return 'rg-cell-rowtype-summary';
+                                    return 'rg-cell-rowtype-other';
+                                }}
+                            />
+                        </TabsContent>
+                    ))}
+                </Tabs>
+            </div>
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/total/SewageExcretaSlurgeTot.tsx b/apps/st/src/components/statistics/total/SewageExcretaSlurgeTot.tsx
index c384f1461..c251aff5c 100644
--- a/apps/st/src/components/statistics/total/SewageExcretaSlurgeTot.tsx
+++ b/apps/st/src/components/statistics/total/SewageExcretaSlurgeTot.tsx
@@ -1,10 +1,210 @@
+import { useRef, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
+
 import SearchForm from "@/components/module/SearchForm";
+import DataGrid from "@/components/module/DataGrid";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+
+// 4개 탭 컬럼 설정 임포트
+import { SludgeProcessingTab1ColumnConfig } from "@/components/util/column/total/sludgeProcessing/SludgeProcessingTab1Column";
+import { DigestionTankTab2ColumnConfig } from "@/components/util/column/total/sludgeProcessing/DigestionTankTab2Column";
+import { SewageSludgeOperTab3ColumnConfig } from "@/components/util/column/total/sludgeProcessing/SewageSludgeOperTab3Column";
+import { HumanWasteSludgeTab4ColumnConfig } from "@/components/util/column/total/sludgeProcessing/HumanWasteSludgeTab4Column";
+
+// API 인스턴스 및 인터페이스 임포트 (타입 안전성 확보)
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import type { 
+    SludgeSummaryRequest,
+    SludgeProcessingTab1Response,
+    DigestionTankOperTab2Response,
+    SewageSludgeOperTab3Response,
+    HumanWasteSludgeTab4Response
+} from "@/entities/statistics/model/statistics-total/statistics-sludge-total-interface";
+import CellColorInfo from "./CellColorInfo";
+
+// 탭 순회 설정
+const SludgeColumnListTot = [
+    SludgeProcessingTab1ColumnConfig,
+    DigestionTankTab2ColumnConfig,
+    SewageSludgeOperTab3ColumnConfig,
+    HumanWasteSludgeTab4ColumnConfig
+].filter(Boolean);
+
+const firstTabKey = SludgeColumnListTot[0]?.tabKey ?? "ST00110001";
 
 const SewageExcretaSlurgeTot = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const [isLoading, setIsLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState(firstTabKey);
+    const lastSearchedValuesRef = useRef<SearchFormValues | null>(null);
+
+    const columnInfo = SludgeColumnListTot;
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setActiveTab(firstTabKey);
+        lastSearchedValuesRef.current = null;
+    };
+
+const loadGridData = async (tabKey: string, values: SearchFormValues): Promise<boolean> => {
+        setIsLoading(true);
+        const param: SludgeSummaryRequest = {
+            ctpvNm: values.sido === "ALL" ? "" : values.sido,
+            sggNm: values.gugun === "ALL" ? "" : values.gugun,
+            sewerBzmnCd: values.bsnmCd,
+            statsYr: values.year,
+            rowDataYn: values.isDetail,
+            summaryYn: values.isSummary !== 'ALL',
+            summaryYearCnt: values.isSummary !== 'ALL' ? Number(values.isSummary) : undefined
+        };
+
+        try {
+            // [TAB1] 하수및분뇨찌꺼기 > 찌꺼기처리시설현황
+            if (tabKey === "ST00110001") {
+                const response: SludgeProcessingTab1Response = await statisticsTotalStatusApi.getSludgeProcessingTab1List(param);
+                if (response?.status === "success") {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+            }
+            // [TAB2] 소화조 운영현황
+            else if (tabKey === "ST00110002") {
+                const response: DigestionTankOperTab2Response = await statisticsTotalStatusApi.getSludgeTab2List(param);
+                if (response?.status === "success") {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+            }
+            // [TAB3] 하수찌꺼기 처리시설 운영현황
+            else if (tabKey === "ST00110003") {
+                const response: SewageSludgeOperTab3Response = await statisticsTotalStatusApi.getSludgeTab3List(param);
+                if (response?.status === "success") {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+            }
+            // [TAB4] 분뇨찌꺼기 처리현황
+            else if (tabKey === "ST00110004") {
+                const response: HumanWasteSludgeTab4Response = await statisticsTotalStatusApi.getSludgeTab4List(param);
+                if (response?.status === "success") {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+            }
+            
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            return false;
+        } catch {
+            alert("서버 연결 중 오류가 발생했습니다.");
+            return false;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    /** 검색 버튼 이벤트: SearchForm의 Values 타입을 기반으로 호출 */
+    const handleSearch = async (values: SearchFormValues) => {
+        try {
+            setIsLoading(true);
+            // 탭 변경 없이 현재 탭(activeTab)에 대해서만 명시적 타입 호출
+            const ok = await loadGridData(activeTab, values);
+            if (ok) {
+                lastSearchedValuesRef.current = values;
+            } else {
+                lastSearchedValuesRef.current = null;
+            }
+        } catch (error) {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            lastSearchedValuesRef.current = null;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    /** 탭 변경 이벤트: 현재 탭 상태와 SearchForm의 마지막 값을 동기화 */
+    const handleActiveTabChange = async (tabKey: string) => {
+        setActiveTab(tabKey);
+        
+        // 마지막 검색 값이 있으면 해당 탭만 새로 로드
+        const values = lastSearchedValuesRef.current;
+        if (!values || rowDataMap.has(tabKey)) return;
+
+        try {
+            setIsLoading(true);
+            await loadGridData(tabKey, values);
+        } catch (error) {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+    
     return (
-        <>
-            <SearchForm />
-        </>
+        <div className="relative">
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} onReset={handleReset} sidoSelectText="전체" />
+            
+            {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>
+            )}
+            
+            <CellColorInfo />
+
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                <Tabs value={activeTab} onValueChange={(v) => void handleActiveTabChange(v)} className="w-full" variant="default">
+                    <TabsList>
+                        {columnInfo.map((info) => (
+                            <TabsTrigger key={info.tabKey} value={info.tabKey}>{info.tabLabel}</TabsTrigger>
+                        ))}
+                    </TabsList>
+                    
+                 {columnInfo.map((info) => {
+                        const tabKey = info.tabKey;
+                        const rowData = rowDataMap.get(tabKey) ?? [];
+                        
+                        return (
+                            <TabsContent key={tabKey} value={tabKey}>
+                                <DataGrid
+                                    columnInfo={{ columns: info.columns, columnLayout: info.columnLayout }}
+                                    rowStartNum={info.rowStartNum}
+                                    rowData={rowData}
+                                    excelExportFileSuffix={info.tabLabel}
+                                    setRowData={(updater) => {
+                                        setRowDataMap((prev) => {
+                                            const next = new Map(prev);
+                                            const cur = next.get(tabKey) ?? [];
+                                            const n = typeof updater === "function" ? updater(cur) : updater;
+                                            next.set(tabKey, n);
+                                            return next;
+                                        });
+                                    }}
+                                    isExcelImport={false}
+                                    isExcelExport={true}
+                                    showHeaderCheckbox={false}
+                                    fixedColumns={info.fixedColumns}
+                                    enableSort={false}
+                                    cellStyleCallback={({ row }) => {
+                                        const rowType = String(row.rowType ?? '');
+                                        if (rowType === 'DETAIL') return undefined;
+                                        if (rowType === 'BIZ_SUM') return 'rg-cell-rowtype-biz-sum';
+                                        if (rowType === 'SUMMARY') return 'rg-cell-rowtype-summary';
+                                        return 'rg-cell-rowtype-other';
+                                    }}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+                </Tabs>
+            </div>
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/total/SewagePipeMaintainTot.tsx b/apps/st/src/components/statistics/total/SewagePipeMaintainTot.tsx
index 12e71151d..b3dfe7a46 100644
--- a/apps/st/src/components/statistics/total/SewagePipeMaintainTot.tsx
+++ b/apps/st/src/components/statistics/total/SewagePipeMaintainTot.tsx
@@ -1,10 +1,207 @@
+import { useRef, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
+
 import SearchForm from "@/components/module/SearchForm";
+import DataGrid from "@/components/module/DataGrid";
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { SewagePipeMaintainColumnListTot } from "@/components/util/column/total/sewagePipeMaintain/sewagePipeMaintainColumn";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import type { SewagePipeMaintainTotalRequest } from "@/entities/statistics/model/statistics-total/statistics-sewage-pipe-maintain-total-interface";
+
+const firstTabKey = SewagePipeMaintainColumnListTot[0]?.tabKey ?? "ST00030001";
+
+function buildSewagePipeMaintainTotSearchParam(values: SearchFormValues): SewagePipeMaintainTotalRequest {
+    const isSummaryEnabled = values.isSummary !== 'ALL';
+    const summaryYearCnt = isSummaryEnabled ? Number(values.isSummary) : undefined;
+
+    return {
+        ctpvNm: values.sido === "ALL" ? "" : values.sido,
+        sggNm: values.gugun === "ALL" ? "" : values.gugun,
+        sewerBzmnCd: values.bsnmCd,
+        statsYr: values.year,
+        rowDataYn: values.isDetail,  
+        summaryYn: isSummaryEnabled, 
+        ...(isSummaryEnabled ? { summaryYearCnt } : {}),
+    };
+}
 
 const SewagePipeMaintainTot = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const [isLoading, setIsLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState(firstTabKey);
+    const lastSearchedValuesRef = useRef<SearchFormValues | null>(null);
+
+    const columnInfo = SewagePipeMaintainColumnListTot;
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setActiveTab(firstTabKey);
+        lastSearchedValuesRef.current = null;
+    };
+
+    const loadSewagePipeMaintainTotTabData = async (
+        tabKey: string,
+        values: SearchFormValues,
+        mergeIntoExistingMap: boolean,
+    ): Promise<boolean> => {
+        const param = buildSewagePipeMaintainTotSearchParam(values);
+
+        const applyRows = (rows: Record<string, string | number>[]) => {
+            if (mergeIntoExistingMap) {
+                setRowDataMap((prev) => {
+                    const next = new Map(prev);
+                    next.set(tabKey, rows);
+                    return next;
+                });
+            } else {
+                const next = new Map<string, Record<string, string | number>[]>();
+                next.set(tabKey, rows);
+                setRowDataMap(next);
+            }
+        };
+
+        if (tabKey === "ST00030001") {
+            const response = await statisticsTotalStatusApi.getSewagePipeMaintainRepairTotal(param);
+            if (response.status === "success" && response.data) {
+                applyRows(toGridRows(response.data as object[]));
+                return true;
+            }
+            alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+            return false;
+        }
+
+        if (tabKey === "ST00030002") {
+            const response = await statisticsTotalStatusApi.getSewagePipeMaintainDredgingTotal(param);
+            if (response.status === "success" && response.data) {
+                applyRows(toGridRows(response.data as object[]));
+                return true;
+            }
+            alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+            return false;
+        }
+
+        return false;
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        try {
+            setIsLoading(true);
+
+            let ok = false;
+            if (activeTab === "ST00030001" || activeTab === "ST00030002") {
+                ok = await loadSewagePipeMaintainTotTabData(activeTab, values, true);
+            }
+            if (ok) {
+                lastSearchedValuesRef.current = values;
+            } else {
+                lastSearchedValuesRef.current = null;
+            }
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            lastSearchedValuesRef.current = null;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        setActiveTab(tabKey);
+
+        const values = lastSearchedValuesRef.current;
+        if (!values) return;
+
+        const existing = rowDataMap.get(tabKey);
+        const hasData = Array.isArray(existing) && existing.length > 0;
+        if (hasData) return;
+
+        if (tabKey === "ST00030001" || tabKey === "ST00030002") {
+            try {
+                setIsLoading(true);
+                await loadSewagePipeMaintainTotTabData(tabKey, values, true);
+            } catch {
+                alert("데이터 조회 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+        }
+    };
+
     return (
-        <>
-            <SearchForm />
-        </>
+        <div className="relative">
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} onReset={handleReset} sidoSelectText="전체" />
+            {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>
+            )}
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                <Tabs
+                    value={activeTab}
+                    onValueChange={(v) => void handleActiveTabChange(v)}
+                    className="w-full"
+                    variant="default"
+                >
+                    <TabsList>
+                        {columnInfo.map((info) => (
+                            <TabsTrigger key={info.tabKey} value={info.tabKey}>
+                                {info.tabLabel || info.tabKey}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    {columnInfo.map((info) => {
+                        const tabKey = info.tabKey;
+                        if (!info.columns || !info.columnLayout) {
+                            return null;
+                        }
+
+                        const rowData = rowDataMap.get(tabKey) ?? [];
+                        const gridColumnInfo: ColumnInfo = {
+                            columns: info.columns,
+                            columnLayout: info.columnLayout,
+                        };
+
+                        return (
+                            <TabsContent key={tabKey} value={tabKey}>
+                                <DataGrid
+                                    columnInfo={gridColumnInfo}
+                                    rowStartNum={info.rowStartNum}
+                                    excelExportFileSuffix={info.tabLabel || tabKey}
+                                    rowData={rowData}
+                                    setRowData={(updater) => {
+                                        setRowDataMap((prev) => {
+                                            const next = new Map(prev);
+                                            const cur = next.get(tabKey) ?? [];
+                                            const n =
+                                                typeof updater === "function" ? updater(cur) : updater;
+                                            next.set(tabKey, n);
+                                            return next;
+                                        });
+                                    }}
+                                    isExcelImport={false}
+                                    isExcelExport
+                                    showHeaderCheckbox={false}
+                                    fixedColumns={info.fixedColumns}
+                                    enableSort={false}
+                                    cellStyleCallback={({ row }) => {
+                                        const rowType = String(row.rowType ?? "");
+                                        if (rowType === "DETAIL") return undefined;
+                                        if (rowType === "BIZ_SUM") return "rg-cell-rowtype-biz-sum";
+                                        return "rg-cell-rowtype-other";
+                                    }}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+                </Tabs>
+            </div>
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/total/SewagePipeTot.tsx b/apps/st/src/components/statistics/total/SewagePipeTot.tsx
index 232ef7883..08aac9eb0 100644
--- a/apps/st/src/components/statistics/total/SewagePipeTot.tsx
+++ b/apps/st/src/components/statistics/total/SewagePipeTot.tsx
@@ -1,10 +1,261 @@
+import { useRef, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
+
 import SearchForm from "@/components/module/SearchForm";
+import DataGrid from "@/components/module/DataGrid";
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { SewagePipeColumnInfoListTot, getST00020003Config } from "@/components/util/column/total/SewagePipeTotColumn";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import type { SewagePipeTotalRequest } from "@/entities/statistics/model/statistics-total/statistics-sewage-pipe-total-interface";
+import CellColorInfo from "./CellColorInfo";
+
+const firstTabKey = SewagePipeColumnInfoListTot[0]?.tabKey ?? "ST00020001";
+
+function buildSewagePipeTotSearchParam(values: SearchFormValues): SewagePipeTotalRequest {
+    const isSummaryEnabled = values.isSummary !== 'ALL';
+    const summaryYearCnt = isSummaryEnabled ? Number(values.isSummary) : undefined;
+
+    return {
+        ctpvNm: values.sido === "ALL" ? "" : values.sido,
+        sggNm: values.gugun === "ALL" ? "" : values.gugun,
+        sewerBzmnCd: values.bsnmCd,
+        statsYr: values.year,
+        rowDataYn: values.isDetail,
+        summaryYn: isSummaryEnabled, 
+        ...(isSummaryEnabled ? { summaryYearCnt } : {}),
+    };
+}
 
 const SewagePipeTot = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const [isLoading, setIsLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState(firstTabKey);
+    /** 조회 성공 후 탭 전환 시 동일 조건으로 지연 조회 */
+    const lastSearchedValuesRef = useRef<SearchFormValues | null>(null);
+
+    const columnInfo = SewagePipeColumnInfoListTot;
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setActiveTab(firstTabKey);
+        lastSearchedValuesRef.current = null;
+    };
+
+    const loadSewagePipeTotTabData = async (
+        tabKey: string,
+        values: SearchFormValues,
+        mergeIntoExistingMap: boolean,
+    ): Promise<boolean> => {
+        const param = buildSewagePipeTotSearchParam(values);
+
+        const applyRows = (rows: Record<string, string | number>[]) => {
+            if (mergeIntoExistingMap) {
+                setRowDataMap((prev) => {
+                    const next = new Map(prev);
+                    next.set(tabKey, rows);
+                    return next;
+                });
+            } else {
+                const next = new Map<string, Record<string, string | number>[]>();
+                next.set(tabKey, rows);
+                setRowDataMap(next);
+            }
+        };
+
+        if (tabKey === "ST00020001") {
+            const response = await statisticsTotalStatusApi.getSewagePipeRegionalStatusList(param);
+            if (response.status === "success" && response.data) {
+                applyRows(toGridRows(response.data as object[]));
+                return true;
+            }
+            alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+            return false;
+        }
+
+        if (tabKey === "ST00020002") {
+            const response = await statisticsTotalStatusApi.getSewagePipeFactInstallStatus(param);
+            if (response.status === "success" && response.data) {
+                applyRows(toGridRows(response.data as object[]));
+                return true;
+            }
+            alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+            return false;
+        }
+
+        if (tabKey === "ST00020003") {
+            const response = await statisticsTotalStatusApi.getSewagePipePipeTypeFacilityStatus(param);
+            if (response.status === "success" && response.data) {
+                applyRows(toGridRows(response.data as object[]));
+                return true;
+            }
+            alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+            return false;
+        }
+
+        if (tabKey === "ST00020004") {
+            const response = await statisticsTotalStatusApi.getSewagePipePipeDiamStatus(param);
+            if (response.status === "success" && response.data) {
+                applyRows(toGridRows(response.data as object[]));
+                return true;
+            }
+            alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+            return false;
+        }
+        
+        if (tabKey === "ST00020005") {
+            const response = await statisticsTotalStatusApi.getSewagePipePipeMnhleStatus(param);
+            if (response.status === "success" && response.data) {
+                applyRows(toGridRows(response.data as object[]));
+                return true;
+            }
+            alert(response.message || "데이터 조회 중 오류가 발생했습니다.");
+            return false;
+        }
+
+        return false;
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        try {
+            setIsLoading(true);
+
+            let ok = false;
+            if (
+                activeTab === "ST00020001" ||
+                activeTab === "ST00020002" ||
+                activeTab === "ST00020003" ||
+                activeTab === "ST00020004" ||
+                activeTab === "ST00020005" 
+            ) {
+                ok = await loadSewagePipeTotTabData(activeTab, values, true);
+            }
+            if (ok) {
+                lastSearchedValuesRef.current = values;
+            } else {
+                lastSearchedValuesRef.current = null;
+            }
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            lastSearchedValuesRef.current = null;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        setActiveTab(tabKey);
+
+        const values = lastSearchedValuesRef.current;
+        if (!values) return;
+
+        const existing = rowDataMap.get(tabKey);
+        const hasData = Array.isArray(existing) && existing.length > 0;
+        if (hasData) return;
+
+        if (
+            tabKey === "ST00020001" ||
+            tabKey === "ST00020002" ||
+            tabKey === "ST00020003" ||
+            tabKey === "ST00020004" ||
+            tabKey === "ST00020005" 
+        ) {
+            try {
+                setIsLoading(true);
+                await loadSewagePipeTotTabData(tabKey, values, true);
+            } catch {
+                alert("데이터 조회 중 오류가 발생했습니다.");
+            } finally {
+                setIsLoading(false);
+            }
+            return;
+        }
+    };
+
     return (
-        <>
-            <SearchForm />
-        </>
+        <div className="relative">
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} onReset={handleReset} sidoSelectText="전체" />
+            {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>
+            )}
+            <CellColorInfo />
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                <Tabs
+                    value={activeTab}
+                    onValueChange={(v) => void handleActiveTabChange(v)}
+                    className="w-full"
+                    variant="default"
+                >
+                    <TabsList>
+                        {columnInfo.map((info) => (
+                            <TabsTrigger key={info.tabKey} value={info.tabKey}>
+                                {info.tabLabel || info.tabKey}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    {columnInfo.map((info) => {
+                        const tabKey = info.tabKey;
+                        
+                        // ★ [동적 처리] ST00020003인 경우 함수를 통해 컬럼 정보를 실시간으로 생성
+                        const currentYear = lastSearchedValuesRef.current?.year || new Date().getFullYear();
+                        const finalTabConfig = tabKey === "ST00020003" 
+                            ? getST00020003Config(currentYear) 
+                            : info;
+
+                        if (!finalTabConfig.columns || !finalTabConfig.columnLayout) {
+                            return null;
+                        }
+
+                        const rowData = rowDataMap.get(tabKey) ?? [];
+                        const gridColumnInfo: ColumnInfo = {
+                            columns: finalTabConfig.columns,
+                            columnLayout: finalTabConfig.columnLayout,
+                        };
+
+                        return (
+                            <TabsContent key={tabKey} value={tabKey}>
+                                <DataGrid
+                                    columnInfo={gridColumnInfo}
+                                    rowStartNum={finalTabConfig.rowStartNum}
+                                    excelExportFileSuffix={finalTabConfig.tabLabel || tabKey}
+                                    rowData={rowData}
+                                    setRowData={(updater) => {
+                                        setRowDataMap((prev) => {
+                                            const next = new Map(prev);
+                                            const cur = next.get(tabKey) ?? [];
+                                            const n =
+                                                typeof updater === "function" ? updater(cur) : updater;
+                                            next.set(tabKey, n);
+                                            return next;
+                                        });
+                                    }}
+                                    isExcelImport={false}
+                                    isExcelExport
+                                    showHeaderCheckbox={false}
+                                    fixedColumns={finalTabConfig.fixedColumns}
+                                    enableSort={false}
+                                    cellStyleCallback={({ row }) => {
+                                        const rowType = String(row.rowType ?? '');
+                                        if (rowType === 'DETAIL') return undefined;
+                                        if (rowType === 'BIZ_SUM') return 'rg-cell-rowtype-biz-sum';
+                                        if (rowType === 'SUMMARY') return 'rg-cell-rowtype-summary';
+                                        return 'rg-cell-rowtype-other';
+                                    }}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+                </Tabs>
+            </div>
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/total/SewageReservoirPumpTot.tsx b/apps/st/src/components/statistics/total/SewageReservoirPumpTot.tsx
index 6016a7930..479e7b4b0 100644
--- a/apps/st/src/components/statistics/total/SewageReservoirPumpTot.tsx
+++ b/apps/st/src/components/statistics/total/SewageReservoirPumpTot.tsx
@@ -1,10 +1,190 @@
+import { useRef, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
+
 import SearchForm from "@/components/module/SearchForm";
+import DataGrid from "@/components/module/DataGrid";
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+
+// 분리된 개별 컬럼 구성 임포트 경로 유지
+import { ReservoirStatusColumnConfig } from "@/components/util/column/total/sewerReservoir/SewerReservoirStatusColumn";
+import { PumpStationStatusColumnConfig } from "@/components/util/column/total/sewerReservoir/SewerPumpStationStatusColumn";
+
+// 수정 적용한 API 및 인터페이스 명세 호출 유지
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import type { 
+    SewerReservoirMaintainTotalRequest 
+} from "@/entities/statistics/model/statistics-total/statistics-sewage-reservoir-total-interface";
+import CellColorInfo from "./CellColorInfo";
+
+const SewerReservoirColumnListTot = [
+    ReservoirStatusColumnConfig,
+    PumpStationStatusColumnConfig
+];
+
+const firstTabKey = SewerReservoirColumnListTot[0]?.tabKey ?? "ST00040001";
 
 const SewageReservoirPumpTot = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    
+    // 상태 정의에서 null을 제외하여 DataGrid와 타입을 일치시킵니다.
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    
+    const [isLoading, setIsLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState(firstTabKey);
+    const lastSearchedValuesRef = useRef<SearchFormValues | null>(null);
+
+    const columnInfo = SewerReservoirColumnListTot;
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setActiveTab(firstTabKey);
+        lastSearchedValuesRef.current = null;
+    };
+
+    const loadGridData = async (tabKey: string, values: SearchFormValues): Promise<boolean> => {
+        const param: SewerReservoirMaintainTotalRequest = {
+            ctpvNm: values.sido === "ALL" ? "" : values.sido,
+            sggNm: values.gugun === "ALL" ? "" : values.gugun,
+            sewerBzmnCd: values.bsnmCd,
+            statsYr: values.year,
+            rowDataYn: values.isDetail,
+            summaryYn: values.isSummary !== 'ALL',
+            summaryYearCnt: values.isSummary !== 'ALL' ? Number(values.isSummary) : undefined
+        };
+
+        try {
+            if (tabKey === "ST00040001") {
+                const response = await statisticsTotalStatusApi.getSewerReservoirStatusTotalList(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            } 
+            
+            if (tabKey === "ST00040002") {
+                const response = await statisticsTotalStatusApi.getSewerPumpStationStatusTotalList(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            }
+            return false;
+        } catch {
+            alert("서버 연결 중 오류가 발생했습니다.");
+            return false;
+        }
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        try {
+            setIsLoading(true);
+            const ok = await loadGridData(activeTab, values);
+            if (ok) {
+                lastSearchedValuesRef.current = values;
+            } else {
+                lastSearchedValuesRef.current = null;
+            }
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            lastSearchedValuesRef.current = null;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        setActiveTab(tabKey);
+        const values = lastSearchedValuesRef.current;
+        if (!values) return;
+
+        const existing = rowDataMap.get(tabKey);
+        if (existing && existing.length > 0) return; 
+
+        try {
+            setIsLoading(true);
+            await loadGridData(tabKey, values);
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
     return (
-        <>
-            <SearchForm />
-        </>
+        <div className="relative">
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} onReset={handleReset} sidoSelectText="전체" />
+            
+           {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>
+            )}  
+            
+            <CellColorInfo />
+
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                <Tabs value={activeTab} onValueChange={(v) => void handleActiveTabChange(v)} className="w-full" variant="default">
+                    <TabsList>
+                        {columnInfo.map((info) => (
+                            <TabsTrigger key={info.tabKey} value={info.tabKey}>
+                                {info.tabLabel}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    
+                    {columnInfo.map((info) => {
+                        const tabKey = info.tabKey;
+                        const rowData = rowDataMap.get(tabKey) ?? [];
+                        
+                        const gridColumnInfo: ColumnInfo = {
+                            columns: info.columns,
+                            columnLayout: info.columnLayout,
+                        };
+
+                        return (
+                            <TabsContent key={tabKey} value={tabKey}>
+                                <DataGrid
+                                    columnInfo={gridColumnInfo}
+                                    rowStartNum={info.rowStartNum}
+                                    excelExportFileSuffix={info.tabLabel}
+                                    rowData={rowData}
+                                    setRowData={(updater) => {
+                                        setRowDataMap((prev) => {
+                                            const next = new Map(prev);
+                                            const cur = next.get(tabKey) ?? [];
+                                            const n =
+                                                typeof updater === "function" ? updater(cur) : updater;
+                                            next.set(tabKey, n);
+                                            return next;
+                                        });
+                                    }}
+                                    isExcelImport={false}
+                                    isExcelExport={true}
+                                    showHeaderCheckbox={false}
+                                    fixedColumns={info.fixedColumns}
+                                    enableSort={false}
+                                    cellStyleCallback={({ row }) => {
+                                        const rowType = String(row.rowType ?? '');
+                                        if (rowType === 'DETAIL') return undefined;
+                                        if (rowType === 'BIZ_SUM') return 'rg-cell-rowtype-biz-sum';
+                                        if (rowType === 'SUMMARY') return 'rg-cell-rowtype-summary';
+                                        return 'rg-cell-rowtype-other';
+                                    }}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+                </Tabs>
+            </div>
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/total/SewerageFinanceTot.tsx b/apps/st/src/components/statistics/total/SewerageFinanceTot.tsx
index a73eaba2f..7749bac68 100644
--- a/apps/st/src/components/statistics/total/SewerageFinanceTot.tsx
+++ b/apps/st/src/components/statistics/total/SewerageFinanceTot.tsx
@@ -1,10 +1,217 @@
+import { useRef, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
+
 import SearchForm from "@/components/module/SearchForm";
+import DataGrid from "@/components/module/DataGrid";
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+
+// 분리된 4개 개별 탭 컬럼 파일 바인딩
+import { SewerageFinancialTab1ColumnConfig } from "@/components/util/column/total/sewerageFinancial/SewerageFinancialTab1Column";
+import { SewerageFeeTab2ColumnConfig } from "@/components/util/column/total/sewerageFinancial/SewerageFeeTab2Column";
+import { SewerageUsageFeeTab3ColumnConfig } from "@/components/util/column/total/sewerageFinancial/SewerageUsageFeeTab3Column";
+import { SewerageOrgCauseTab4ColumnConfig } from "@/components/util/column/total/sewerageFinancial/SewerageOrgCauseTab4Column";
+
+// API 인스턴스 및 인터페이스 호출
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import type { 
+    SewerageFinanceSummaryRequest 
+} from "@/entities/statistics/model/statistics-total/statistics-sewerage-finance-total-interface";
+import CellColorInfo from "./CellColorInfo";
+
+const SewerageFinanceColumnListTot = [
+    SewerageFinancialTab1ColumnConfig,
+    SewerageFeeTab2ColumnConfig,
+    SewerageUsageFeeTab3ColumnConfig,
+    SewerageOrgCauseTab4ColumnConfig
+];
+
+const firstTabKey = SewerageFinanceColumnListTot[0]?.tabKey ?? "ST00040006_1";
 
 const SewerageFinanceTot = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    
+    // 컴파일 에러가 발생하지 않도록 원천 가공 처리형 맵 적용
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const [isLoading, setIsLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState(firstTabKey);
+    const lastSearchedValuesRef = useRef<SearchFormValues | null>(null);
+
+    const columnInfo = SewerageFinanceColumnListTot;
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setActiveTab(firstTabKey);
+        lastSearchedValuesRef.current = null;
+    };
+
+    /** 개별 조건별 데이터 동적 라우팅 디스패치 */
+    const loadGridData = async (tabKey: string, values: SearchFormValues): Promise<boolean> => {
+        const param: SewerageFinanceSummaryRequest = {
+            ctpvNm: values.sido === "ALL" ? "" : values.sido,
+            sggNm: values.gugun === "ALL" ? "" : values.gugun,
+            sewerBzmnCd: values.bsnmCd,
+            statsYr: values.year,
+            rowDataYn: values.isDetail,
+            summaryYn: values.isSummary !== 'ALL',
+            summaryYearCnt: values.isSummary !== 'ALL' ? Number(values.isSummary) : undefined
+        };
+
+        try {
+            // [Tab1] 하수도재정 결산
+            if (tabKey === "ST00090001") {
+                const response = await statisticsTotalStatusApi.getSewerageFinancialList(param); // 엔드포인트 바인딩
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            }
+            
+            // [Tab2] 하수도 요금
+            if (tabKey === "ST00090002") {
+                const response = await statisticsTotalStatusApi.getSewerageFeeList(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            }
+
+            // [Tab3] 하수도 사용료
+            if (tabKey === "ST00090003") {
+                const response = await statisticsTotalStatusApi.getSewerageUsageList(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            }
+
+            // [Tab4] 원인자 부담금
+            if (tabKey === "ST00090004") {
+                const response = await statisticsTotalStatusApi.getSewerageOrgCauseList(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            }
+            return false;
+        } catch {
+            alert("서버 연결 중 오류가 발생했습니다.");
+            return false;
+        }
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        try {
+            setIsLoading(true);
+            const ok = await loadGridData(activeTab, values);
+            if (ok) {
+                lastSearchedValuesRef.current = values;
+            } else {
+                lastSearchedValuesRef.current = null;
+            }
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            lastSearchedValuesRef.current = null;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        setActiveTab(tabKey);
+        const values = lastSearchedValuesRef.current;
+        if (!values) return;
+
+        const existing = rowDataMap.get(tabKey);
+        if (existing && existing.length > 0) return;
+
+        try {
+            setIsLoading(true);
+            await loadGridData(tabKey, values);
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
     return (
-        <>
-            <SearchForm />
-        </>
+        <div className="relative">
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} onReset={handleReset} sidoSelectText="전체" />
+          
+            {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>
+            )}
+            
+            <CellColorInfo />
+
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                <Tabs value={activeTab} onValueChange={(v) => void handleActiveTabChange(v)} className="w-full" variant="default">
+                    <TabsList>
+                        {columnInfo.map((info) => (
+                            <TabsTrigger key={info.tabKey} value={info.tabKey}>
+                                {info.tabLabel}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    
+                    {columnInfo.map((info) => {
+                        const tabKey = info.tabKey;
+                        
+                        // 요청하신 타입 단언 제거 형태 유지
+                        const rowData = rowDataMap.get(tabKey) ?? [];
+                        
+                        const gridColumnInfo: ColumnInfo = {
+                            columns: info.columns,
+                            columnLayout: info.columnLayout,
+                        };
+
+                        return (
+                            <TabsContent key={tabKey} value={tabKey}>
+                                <DataGrid
+                                    columnInfo={gridColumnInfo}
+                                    rowStartNum={info.rowStartNum}
+                                    excelExportFileSuffix={info.tabLabel}
+                                    rowData={rowData}
+                                    setRowData={(updater) => {
+                                        setRowDataMap((prev) => {
+                                            const next = new Map(prev);
+                                            const cur = next.get(tabKey) ?? [];
+                                            const n = typeof updater === "function" ? updater(cur) : updater;
+                                            next.set(tabKey, n);
+                                            return next;
+                                        });
+                                    }}
+                                    isExcelImport={false}
+                                    isExcelExport={true}
+                                    showHeaderCheckbox={false}
+                                    fixedColumns={info.fixedColumns}
+                                    enableSort={false}
+                                    cellStyleCallback={({ row }) => {
+                                        const rowType = String(row.rowType ?? '');
+                                        if (rowType === 'DETAIL') return undefined;
+                                        if (rowType === 'BIZ_SUM') return 'rg-cell-rowtype-biz-sum';
+                                        if (rowType === 'SUMMARY') return 'rg-cell-rowtype-summary';
+                                        return 'rg-cell-rowtype-other';
+                                    }}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+                </Tabs>
+            </div>
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/total/SeweragePenetrationRateTot.tsx b/apps/st/src/components/statistics/total/SeweragePenetrationRateTot.tsx
index be5fce614..7c5d1ab14 100644
--- a/apps/st/src/components/statistics/total/SeweragePenetrationRateTot.tsx
+++ b/apps/st/src/components/statistics/total/SeweragePenetrationRateTot.tsx
@@ -1,113 +1,78 @@
 import { useState } from "react";
 
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
 import { SeweragePentrationRateTotColumn } from "@/components/util/column/total/SeweragePentrationRateTotColumn";
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import { useAlertStore } from "@/shared/lib";
 
 import SearchForm from "@/components/module/SearchForm";
 import DataGrid from "@/components/module/DataGrid";
+import CellColorInfo from "./CellColorInfo";
+import { LoadingWithAnimation } from "@common/components";
 
 const SeweragePenetrationRateTot = () => {
-    const columns = [
-        { name: 'sido', fieldName: '시도', header: { text: '시도' } },
-        { name: 'sgg', fieldName: '시군구', header: { text: '시군구' } },
-        { name: 'rvbsn', fieldName: '수계', header: { text: '수계' } },
-        { name: 'bstrm', fieldName: '지류', header: { text: '지류' } },
-        { name: 'mdbsn', fieldName: '세부단위유역', header: { text: '세부단위유역' } },
-        { name: 'lgbsn', fieldName: '중권역', header: { text: '중권역' } },
-        { name: 'mdmbsn', fieldName: '소권역', header: { text: '소권역' } },
-        { name: 'specl_cntrpln_ar', fieldName: '특별대책지역', header: { text: '특별대책지역' } },
-        { name: 'total_popl', fieldName: '총인구', header: { text: '총인구' } },
-        { name: 'popl_sm', fieldName: '내국인', header: { text: '내국인' } },
-        { name: 'frgnr_popl_sm', fieldName: '외국인', header: { text: '외국인' } },
-        { name: 'area', fieldName: '행정참고자료면적(㎢)', header: { text: '행정참고자료면적(㎢)' } },
-        { name: 'popltn_sm', fieldName: '총인구(명)', header: { text: '총인구(명)' } },
-        { name: 'ar_sm', fieldName: '총면적(㎢)', header: { text: '총면적(㎢)' } },
-        { name: 'swge_proc_zone_inner_sm', fieldName: '합계', header: { text: '합계' } },
-        { name: 'pblswrg_popltn_sm', fieldName: '소계', header: { text: '소계' } },
-        { name: 'pblswrg_prm_trt', fieldName: '물리적처리', header: { text: '물리적처리' } },
-        { name: 'pblswrg_scd_trt', fieldName: '생물학적처리', header: { text: '생물학적처리' } },
-        { name: 'pblswrg_tert_trt', fieldName: '고도처리', header: { text: '고도처리' } },
-        { name: 'wstr_popltn_sm', fieldName: '소계', header: { text: '소계' } },
-        { name: 'wstr_prm_trt', fieldName: '물리적처리', header: { text: '물리적처리' } },
-        { name: 'wstr_scd_trt', fieldName: '생물학적처리', header: { text: '생물학적처리' } },
-        { name: 'wstr_tert_trt', fieldName: '고도처리', header: { text: '고도처리' } },
-        { name: 'not_conect_popltn', fieldName: '미접속인구', header: { text: '미접속인구' } },
-        { name: 'swge_proc_zone_inner_ar', fieldName: '면적(㎢)', header: { text: '면적(㎢)' } },
-        { name: 'swge_proc_zone_outer_sm', fieldName: '합계', header: { text: '합계' } },
-        { name: 'town_unproc_popltn', fieldName: '미처리인구', header: { text: '미처리인구' } },
-        { name: 'town_swtt_popltn', fieldName: '오수처리인구', header: { text: '오수처리인구' } },
-        { name: 'town_wrrtn_popltn', fieldName: '정화조인구', header: { text: '정화조인구' } },
-        { name: 'swge_proc_zone_outer_ar', fieldName: '면적(㎢)', header: { text: '면적(㎢)' } },
-        { name: 'pblswrg_popltn_suprt', fieldName: '공공하수처리구역인구보급율(%)', header: { text: '공공하수처리구역인구보급율(%)' } },
-        { name: 'adtrt_popltn_suprt', fieldName: '고도처리인구보급율(%)', header: { text: `고도처리인구보급율(%)` } },
-        { name: 'swrg_instlrt', fieldName: '하수도설치율(%)', header: { text: '하수도설치율(%)' } },
-        { name: 'rmk', fieldName: '비고', header: { text: '비고' } },
-    ];
-
-    const columnLayout = [
-        {
-            name: 'groupA',
-            hideChildHeaders: false,
-            header: { text: '행정구역' },
-            items: ['sido', 'sgg'],
-        },
-        'rvbsn',
-        'bstrm',
-        {
-            name: 'groupB',
-            hideChildHeaders: false,
-            header: { text: '수계영향권별분류류' },
-            items: ['mdbsn', 'lgbsn', 'mdmbsn'],
-        },
-        'specl_cntrpln_ar',
-        {
-            name: 'groupC',
-            hideChildHeaders: false,
-            header: { text: '행정참고자료인구' },
-            items: ['total_popl', 'popl_sm', 'frgnr_popl_sm'],
-        },
-        'area',
-        'popltn_sm',
-        'ar_sm',
-        {
-            name: 'groupD',
-            hideChildHeaders: false,
-            header: { text: '하수처리구역내' },
-            items: [
-                'swge_proc_zone_inner_sm',
-                {
-                    name: 'pblswrgGroup',
-                    hideChildHeaders: false,
-                    header: { text: '공공하수처리인구(명)' },
-                    items: ['pblswrg_popltn_sm', 'pblswrg_prm_trt', 'pblswrg_scd_trt', 'pblswrg_tert_trt'],
-                },
-                {
-                    name: 'wstrGroup',
-                    hideChildHeaders: false,
-                    header: { text: '폐수처리인구(명)' },
-                    items: ['wstr_popltn_sm', 'wstr_prm_trt', 'wstr_scd_trt', 'wstr_tert_trt'],
-                },
-                'not_conect_popltn',
-                'swge_proc_zone_inner_ar'
-            ],
-        },
-        {
-            name: 'groupE',
-            hideChildHeaders: false,
-            header: { text: '하수처리구역외' },
-            items: ['swge_proc_zone_outer_sm', 'town_swtt_popltn', 'town_unproc_popltn', 'town_wrrtn_popltn', 'swge_proc_zone_outer_ar'],
-        },
-        'pblswrg_popltn_suprt',
-        'adtrt_popltn_suprt',
-        'swrg_instlrt',
-        'rmk',
-    ];
-
     const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const { setMessage: alert } = useAlertStore((state) => state);
+
+    const handleSearch = async (values: SearchFormValues) => {
+        try {
+            setIsLoading(true);
+
+            const isSummaryEnabled = values.isSummary !== 'ALL';
+            const summaryYearCnt = isSummaryEnabled ? Number(values.isSummary) : undefined;
+
+            const param = {
+                ctpvNm: values.sido === 'ALL' ? '' : values.sido,
+                sggNm: values.gugun === 'ALL' ? '' : values.gugun,
+                sewerBzmnCd: values.bsnmCd,
+                statsYr: values.year,
+                rowDataYn: values.isDetail,
+                summaryYn: isSummaryEnabled,
+                ...(isSummaryEnabled ? { summaryYearCnt } : {}),
+            };
+
+            const response = await statisticsTotalStatusApi.getSewerageSupplyRateList(param);
+
+            if (response.status === 'success') {
+                setRowData(toGridRows(response.data));
+
+            } else {
+                alert(response.message || '데이터 조회 중 오류가 발생했습니다.');
+            }
+        } catch (error) {
+            console.log(error)
+            alert('데이터 조회 중 오류가 발생했습니다.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
 
     return (
         <>
-            <SearchForm />
-            <DataGrid columnInfo={SeweragePentrationRateTotColumn} rowStartNum={2} isExcelImport={false} fixedColumns={1} rowData={rowData} setRowData={setRowData} />
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} sidoSelectText="전체" />
+            {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>}
+            <CellColorInfo />
+            <DataGrid
+                columnInfo={SeweragePentrationRateTotColumn}
+                rowStartNum={2}
+                isExcelImport={false}
+                fixedColumns={1}
+                rowData={rowData}
+                setRowData={setRowData}
+                cellStyleCallback={({ row }) => {
+                    const rowType = String(row.rowType ?? '');
+                    if (rowType === 'DETAIL') return undefined;
+                    if (rowType === 'BIZ_SUM') return 'rg-cell-rowtype-biz-sum';
+                    if (rowType === 'SUMMARY') return 'rg-cell-rowtype-summary';
+                    return 'rg-cell-rowtype-other';
+                }}
+            />
         </>
     );
 };
diff --git a/apps/st/src/components/statistics/total/SewerageServiceLevelTot.tsx b/apps/st/src/components/statistics/total/SewerageServiceLevelTot.tsx
index 2f6b5131e..a8e483c1d 100644
--- a/apps/st/src/components/statistics/total/SewerageServiceLevelTot.tsx
+++ b/apps/st/src/components/statistics/total/SewerageServiceLevelTot.tsx
@@ -1,10 +1,151 @@
-import SearchForm from "../../module/SearchForm";
+import { useRef, useState } from "react";
+import { useAlertStore } from "@/shared/lib";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
+import SearchForm from "@/components/module/SearchForm";
+import DataGrid from "@/components/module/DataGrid";
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+import CellColorInfo from "./CellColorInfo";
+
+// 13. 하수도서비스수준 컬럼 설정
+import { SewageComplaintTab1ColumnConfig } from "@/components/util/column/total/sewerageServiceLevel/ComplaintTotColumn";
+import { ResidentFriendlyFacilityTab2ColumnConfig } from "@/components/util/column/total/sewerageServiceLevel/ResidentFriendlyFactTotColumn";
+
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import type { 
+    SewerageServiceLevelRequest,
+    SewerageServiceLevelComplaintResponse,
+    SewerageServiceLevelResidentFriendlyFactResponse
+} from "@/entities/statistics/model/statistics-total/statistics-service-level-total-interface";
+
+const SewageServiceLevelColumnListTot = [
+    SewageComplaintTab1ColumnConfig,
+    ResidentFriendlyFacilityTab2ColumnConfig
+].filter(Boolean);
+
+const firstTabKey = SewageServiceLevelColumnListTot[0]?.tabKey ?? "ST00130001";
 
 const SewerageServiceLevelTot = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const [isLoading, setIsLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState(firstTabKey);
+    const lastSearchedValuesRef = useRef<SearchFormValues | null>(null);
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setActiveTab(firstTabKey);
+        lastSearchedValuesRef.current = null;
+    };
+
+    const loadGridData = async (tabKey: string, values: SearchFormValues): Promise<boolean> => {
+        setIsLoading(true);
+        const param: SewerageServiceLevelRequest = {
+            ctpvNm: values.sido === "ALL" ? "" : values.sido,
+            sggNm: values.gugun === "ALL" ? "" : values.gugun,
+            sewerBzmnCd: values.bsnmCd,
+            statsYr: values.year,
+            rowDataYn: values.isDetail,
+            summaryYn: values.isSummary !== 'ALL',
+            summaryYearCnt: values.isSummary !== 'ALL' ? Number(values.isSummary) : undefined
+        };
+
+        try {
+            // [TAB1] 민원
+            if (tabKey === "ST00130001") {
+                const response: SewerageServiceLevelComplaintResponse = await statisticsTotalStatusApi.getSewerageServiceLevelComplaint(param);
+                if (response?.status === "success") {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+            } 
+            // [TAB2] 주민친화시설
+            else if (tabKey === "ST00130002") {
+                const response: SewerageServiceLevelResidentFriendlyFactResponse = await statisticsTotalStatusApi.getSewerageServiceLevelResidentFriendlyFact(param);
+                if (response?.status === "success") {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+            }
+            return false;
+        } catch {
+            alert("서버 연결 중 오류가 발생했습니다.");
+            return false;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        lastSearchedValuesRef.current = values;
+        await loadGridData(activeTab, values);
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        setActiveTab(tabKey);
+        const values = lastSearchedValuesRef.current;
+        if (!values || rowDataMap.has(tabKey)) return;
+        await loadGridData(tabKey, values);
+    };
+
     return (
-        <>
-            <SearchForm />
-        </>
+        <div className="relative">
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} onReset={handleReset} sidoSelectText="전체" />
+            
+            {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>
+            )}
+            
+            <CellColorInfo />
+
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                <Tabs value={activeTab} onValueChange={(v) => void handleActiveTabChange(v)} className="w-full" variant="default">
+                    <TabsList>
+                        {SewageServiceLevelColumnListTot.map((info) => (
+                            <TabsTrigger key={info.tabKey} value={info.tabKey}>{info.tabLabel}</TabsTrigger>
+                        ))}
+                    </TabsList>
+                    
+                   {SewageServiceLevelColumnListTot.map((info) => (
+                        <TabsContent key={info.tabKey} value={info.tabKey}>
+                            <DataGrid
+                                columnInfo={{ columns: info.columns, columnLayout: info.columnLayout }}
+                                rowStartNum={info.rowStartNum}
+                                rowData={rowDataMap.get(info.tabKey) ?? []}
+                                excelExportFileSuffix={info.tabLabel}
+                                setRowData={(updater) => {
+                                    setRowDataMap((prev) => {
+                                        const next = new Map(prev);
+                                        const cur = next.get(info.tabKey) ?? [];
+                                        const n = typeof updater === "function" ? updater(cur) : updater;
+                                        next.set(info.tabKey, n);
+                                        return next;
+                                    });
+                                }}
+                                isExcelImport={false}
+                                isExcelExport={true}
+                                showHeaderCheckbox={false}
+                                fixedColumns={info.fixedColumns}
+                                enableSort={false}
+                                cellStyleCallback={({ row }) => {
+                                    const rowType = String(row.rowType ?? '');
+                                    if (rowType === 'DETAIL') return undefined;
+                                    if (rowType === 'BIZ_SUM') return 'rg-cell-rowtype-biz-sum';
+                                    if (rowType === 'SUMMARY') return 'rg-cell-rowtype-summary';
+                                    return 'rg-cell-rowtype-other';
+                                }}
+                            />
+                        </TabsContent>
+                    ))}
+                </Tabs>
+            </div>
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/total/WaterReuseTot.tsx b/apps/st/src/components/statistics/total/WaterReuseTot.tsx
index 567797983..e48d12673 100644
--- a/apps/st/src/components/statistics/total/WaterReuseTot.tsx
+++ b/apps/st/src/components/statistics/total/WaterReuseTot.tsx
@@ -1,10 +1,229 @@
+import { useRef, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import { LoadingWithAnimation, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components";
+
 import SearchForm from "../../module/SearchForm";
+import DataGrid from "@/components/module/DataGrid";
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+
+// [폴더 정밀 정비 완료] 프로젝트 트리 구조 5개 컬럼 스펙 패키지 호출
+import { SewerageReuseTab1ColumnConfig } from "@/components/util/column/total/sewerageReuse/SewerageReuseTab1Column";
+import { SewerageGrayWaterTab2ColumnConfig } from "@/components/util/column/total/sewerageReuse/SewerageGrayWaterTab2Column";
+import { SewerageRainwaterTab3ColumnConfig } from "@/components/util/column/total/sewerageReuse/SewerageRainwaterTab3Column";
+import { SewerageWwtRtlztnRegTab4ColumnConfig } from "@/components/util/column/total/sewerageReuse/SewerageWwtRtlztnRegTab4Column";
+import { SewerageWwtRtlztnSncnTab5ColumnConfig } from "@/components/util/column/total/sewerageReuse/SewerageWwtRtlztnSncnTab5Column"; 
+
+// 집계표(TOTAL) API 서비스 및 인터페이스 명세 임포트
+import { statisticsTotalStatusApi } from "@/entities/statistics/api/statistics-total-service";
+import type { 
+    WaterReuseSummaryRequest 
+} from "@/entities/statistics/model/statistics-total/statistics-sewerage-reuse-total-interface";
+import CellColorInfo from "./CellColorInfo";
+
+// 5개 멀티 탭 매핑을 위한 설정 취합 배열
+const WaterReuseColumnListTot = [
+    SewerageReuseTab1ColumnConfig,
+    SewerageGrayWaterTab2ColumnConfig,
+    SewerageRainwaterTab3ColumnConfig,
+    SewerageWwtRtlztnRegTab4ColumnConfig,
+    SewerageWwtRtlztnSncnTab5ColumnConfig // 👈 5번째 탭 풀장착 완료
+];
+
+const firstTabKey = WaterReuseColumnListTot[0]?.tabKey ?? "ST00040007_1";
 
 const WaterReuseTot = () => {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    
+    // Map 데이터 구조를 사용하여 완벽하게 안전한 멀티 탭 데이터 상태 유지
+    const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
+    const [isLoading, setIsLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState(firstTabKey);
+    const lastSearchedValuesRef = useRef<SearchFormValues | null>(null);
+
+    const columnInfo = WaterReuseColumnListTot;
+
+    const handleReset = () => {
+        setRowDataMap(new Map());
+        setActiveTab(firstTabKey);
+        lastSearchedValuesRef.current = null;
+    };
+
+    const loadGridData = async (tabKey: string, values: SearchFormValues): Promise<boolean> => {
+        const param: WaterReuseSummaryRequest = {
+            ctpvNm: values.sido === "ALL" ? "" : values.sido,
+            sggNm: values.gugun === "ALL" ? "" : values.gugun,
+            sewerBzmnCd: values.bsnmCd,
+            statsYr: values.year,
+            rowDataYn: values.isDetail,
+            summaryYn: values.isSummary !== 'ALL',
+            summaryYearCnt: values.isSummary !== 'ALL' ? Number(values.isSummary) : undefined
+        };
+
+        try {
+            // [TAB1] 공공하수처리수 재이용 현황 조회
+            if (tabKey === "ST00100001") {
+                const response = await statisticsTotalStatusApi.getSewerageReuseTab1List(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            } 
+            
+            // [TAB2] 중수도 현황 조회
+            if (tabKey === "ST00100002") {
+                const response = await statisticsTotalStatusApi.getGrayWaterStatusTab2List(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            }
+
+            // [TAB3] 빗물이용시설현황 조회
+            if (tabKey === "ST00100003") {
+                const response = await statisticsTotalStatusApi.getRainwaterStatusTab3List(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            }
+
+            // [TAB4] 하·폐수처리수 재이용시설 시공업 등록현황 조회
+            if (tabKey === "ST00100004") {
+                const response = await statisticsTotalStatusApi.getWwtRtlztnRegStatusTab4List(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            }
+
+            // [TAB5] 하·폐수처리수 재이용시설 시공업 인가현황 조회
+            if (tabKey === "ST00100005") {
+                const response = await statisticsTotalStatusApi.getWwtRtlztnSncnStatusTab5List(param);
+                if (response && response.status === "success" && response.data) {
+                    setRowDataMap((prev) => new Map(prev).set(tabKey, toGridRows(response.data as object[])));
+                    return true;
+                }
+                alert(response?.message || "데이터 조회 중 오류가 발생했습니다.");
+            }
+            return false;
+        } catch {
+            alert("서버 연결 중 오류가 발생했습니다.");
+            return false;
+        }
+    };
+
+    const handleSearch = async (values: SearchFormValues) => {
+        try {
+            setIsLoading(true);
+            const ok = await loadGridData(activeTab, values);
+            if (ok) {
+                lastSearchedValuesRef.current = values;
+            } else {
+                lastSearchedValuesRef.current = null;
+            }
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+            lastSearchedValuesRef.current = null;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleActiveTabChange = async (tabKey: string) => {
+        setActiveTab(tabKey);
+        const values = lastSearchedValuesRef.current;
+        if (!values) return;
+
+        // 중복 API 통신 방지 필터 캐싱 디스패치
+        const existing = rowDataMap.get(tabKey);
+        if (existing && existing.length > 0) return; 
+
+        try {
+            setIsLoading(true);
+            await loadGridData(tabKey, values);
+        } catch {
+            alert("데이터 조회 중 오류가 발생했습니다.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
     return (
-        <>
-            <SearchForm />
-        </>
+        <div className="relative">
+            <SearchForm isDetail={true} isSummary={true} onSubmit={handleSearch} onReset={handleReset} sidoSelectText="전체" />
+            
+            {/* 정중앙 5rem 크기 고정 격리형 로딩 애니메이션 */}
+            {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>
+            )}
+            
+            <CellColorInfo />
+
+            <div className="flex flex-col gap-[0.6rem] mx-[0.6rem]">
+                <Tabs value={activeTab} onValueChange={(v) => void handleActiveTabChange(v)} className="w-full" variant="default">
+                    <TabsList>
+                        {columnInfo.map((info) => (
+                            <TabsTrigger key={info.tabKey} value={info.tabKey}>
+                                {info.tabLabel}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    
+                    {columnInfo.map((info) => {
+                        const tabKey = info.tabKey;
+                        const rowData = rowDataMap.get(tabKey) ?? [];
+                        
+                        const gridColumnInfo: ColumnInfo = {
+                            columns: info.columns,
+                            columnLayout: info.columnLayout,
+                        };
+
+                        return (
+                            <TabsContent key={tabKey} value={tabKey}>
+                                <DataGrid
+                                    columnInfo={gridColumnInfo}
+                                    rowStartNum={info.rowStartNum}
+                                    excelExportFileSuffix={info.tabLabel}
+                                    rowData={rowData}
+                                    setRowData={(updater) => {
+                                        setRowDataMap((prev) => {
+                                            const next = new Map(prev);
+                                            const cur = next.get(tabKey) ?? [];
+                                            const n = typeof updater === "function" ? updater(cur) : updater;
+                                            next.set(tabKey, n);
+                                            return next;
+                                        });
+                                    }}
+                                    isExcelImport={false}
+                                    isExcelExport={true}
+                                    showHeaderCheckbox={false}
+                                    fixedColumns={info.fixedColumns}
+                                    enableSort={false}
+                                    cellStyleCallback={({ row }) => {
+                                        const rowType = String(row.rowType ?? '');
+                                        if (rowType === 'DETAIL') return undefined;
+                                        if (rowType === 'BIZ_SUM') return 'rg-cell-rowtype-biz-sum';
+                                        if (rowType === 'SUMMARY') return 'rg-cell-rowtype-summary';
+                                        return 'rg-cell-rowtype-other';
+                                    }}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+                </Tabs>
+            </div>
+        </div>
     );
 };
 
diff --git a/apps/st/src/components/statistics/verification/ApprovalInputDialog.tsx b/apps/st/src/components/statistics/verification/ApprovalInputDialog.tsx
new file mode 100644
index 000000000..49170e7ae
--- /dev/null
+++ b/apps/st/src/components/statistics/verification/ApprovalInputDialog.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import {
+    Button,
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Input,
+    Label,
+    Textarea,
+} from "@common/components";
+
+export interface ApprovalFormData {
+    rjctOpnnCn: string;
+    lastCfmtnPicNm: string;
+    lastCfmtnPicTelNo: string;
+    lastCfmtnPicDeptNm: string;
+    lastCfmtnPicJbgdNm: string;
+}
+
+export interface ApprovalInputDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm?: (data: ApprovalFormData) => void | Promise<void>;
+}
+
+export function ApprovalInputDialog({
+    open,
+    onOpenChange,
+    onConfirm,
+}: ApprovalInputDialogProps) {
+    const [rjctOpnnCn, setRjctOpnnCn] = useState("");
+    const [lastCfmtnPicNm, setLastCfmtnPicNm] = useState("");
+    const [lastCfmtnPicTelNo, setLastCfmtnPicTelNo] = useState("");
+    const [lastCfmtnPicDeptNm, setLastCfmtnPicDeptNm] = useState("");
+    const [lastCfmtnPicJbgdNm, setLastCfmtnPicJbgdNm] = useState("");
+
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const resetForm = () => {
+        setRjctOpnnCn("");
+        setLastCfmtnPicNm("");
+        setLastCfmtnPicTelNo("");
+        setLastCfmtnPicDeptNm("");
+        setLastCfmtnPicJbgdNm("");
+    };
+
+    const handleDialogOpenChange = (nextOpen: boolean) => {
+        if (!nextOpen) resetForm();
+        onOpenChange(nextOpen);
+    };
+
+    useEffect(() => {
+        if (!open) {
+            resetForm();
+        }
+    }, [open]);
+
+    const handleConfirm = async () => {
+        try {
+            setIsSubmitting(true);
+            const formData: ApprovalFormData = {
+                rjctOpnnCn: rjctOpnnCn.trim(),
+                lastCfmtnPicNm: lastCfmtnPicNm.trim(),
+                lastCfmtnPicTelNo: lastCfmtnPicTelNo.trim(),
+                lastCfmtnPicDeptNm: lastCfmtnPicDeptNm.trim(),
+                lastCfmtnPicJbgdNm: lastCfmtnPicJbgdNm.trim(),
+            };
+            await onConfirm?.(formData);
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+            <DialogContent
+                className="max-w-[56rem]"
+                aria-describedby={undefined}
+            >
+                <DialogHeader>
+                    <DialogTitle>승인 정보 입력</DialogTitle>
+                </DialogHeader>
+                <div className="flex flex-col gap-4 py-2">
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">최종 확인 담당자명</Label>
+                        <Input
+                            value={lastCfmtnPicNm}
+                            onChange={(e) => {
+                                setLastCfmtnPicNm(e.target.value);
+                            }}
+                            className="!text-[1.3rem]"
+                            placeholder="담당자명을 입력하세요."
+                            disabled={isSubmitting}
+                        />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">
+                            최종 확인 담당자 전화번호
+                        </Label>
+                        <Input
+                            value={lastCfmtnPicTelNo}
+                            onChange={(e) => {
+                                setLastCfmtnPicTelNo(e.target.value);
+                            }}
+                            className="!text-[1.3rem]"
+                            placeholder="전화번호를 입력하세요."
+                            disabled={isSubmitting}
+                        />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">
+                            최종 확인 담당자 부서명
+                        </Label>
+                        <Input
+                            value={lastCfmtnPicDeptNm}
+                            onChange={(e) => {
+                                setLastCfmtnPicDeptNm(e.target.value);
+                            }}
+                            className="!text-[1.3rem]"
+                            placeholder="부서명을 입력하세요."
+                            disabled={isSubmitting}
+                        />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">
+                            최종 확인 담당자 직급명
+                        </Label>
+                        <Input
+                            value={lastCfmtnPicJbgdNm}
+                            onChange={(e) => {
+                                setLastCfmtnPicJbgdNm(e.target.value);
+                            }}
+                            className="!text-[1.3rem]"
+                            placeholder="직급명을 입력하세요."
+                            disabled={isSubmitting}
+                        />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Label className="text-label">반려 의견 내용</Label>
+                        <Textarea
+                            value={rjctOpnnCn}
+                            onChange={(e) => setRjctOpnnCn(e.target.value)}
+                            className="min-h-[10rem] resize-y !text-[1.3rem] !leading-6"
+                            placeholder="반려 의견 내용을 입력하세요. (선택사항)"
+                            disabled={isSubmitting}
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button
+                            type="button"
+                            color="gray"
+                            disabled={isSubmitting}
+                        >
+                            취소
+                        </Button>
+                    </DialogClose>
+                    <Button
+                        type="button"
+                        color="primary"
+                        disabled={isSubmitting}
+                        onClick={() => void handleConfirm()}
+                    >
+                        확인
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/apps/st/src/components/statistics/verification/GeneralVerificationManagement.tsx b/apps/st/src/components/statistics/verification/GeneralVerificationManagement.tsx
index face7555d..474b2993b 100644
--- a/apps/st/src/components/statistics/verification/GeneralVerificationManagement.tsx
+++ b/apps/st/src/components/statistics/verification/GeneralVerificationManagement.tsx
@@ -1,30 +1,30 @@
 "use client";
 
-import { useState, useEffect, useMemo } from 'react';
-
-import { CodeSelectWithAll } from '@/entities/code';
-import {
-    Button,
-    Label,
-    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 { useEffect, useMemo, useState } from "react";
 
 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';
+import { useAlertStore } from "@/shared/lib";
+import { NoData } from "@/shared/ui/no-data";
+import { CodeSelectWithAll } from "@/entities/code";
+import { generalverificationApiService } from "@/entities/statistics/api/general-verification-service";
+import type { GeneralverificationList } from "@/entities/statistics/model/general-verification-interface";
+import {
+    Button,
+    DataTable,
+    Label,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@common/components";
+import { LoadingWithAnimation } from "@common/components";
 
+import DetailComponent from "./generalVerification/DetailComponent";
+import RegistDialog from "./generalVerification/RegistDialog";
+
+import { getGeneralVerificationColumns } from "@/components/util/column/management/GeneralVerificationColumn";
 
 const GeneralVerificationManagement = () => {
     const [searchValues, setSearchValues] = useState<{
@@ -32,12 +32,16 @@ const GeneralVerificationManagement = () => {
         useYn: string;
         vrfcClsfCd: string;
     }>({
-        statsCd: '',
-        useYn: '',
-        vrfcClsfCd: '',
+        statsCd: "",
+        useYn: "",
+        vrfcClsfCd: "",
     });
-    const [vrfcMasterData, setVrfcMasterData] = useState<GeneralverificationList[]>([]);
-    const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+    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);
@@ -53,21 +57,26 @@ const GeneralVerificationManagement = () => {
                     trgtStatsCd: searchValues.statsCd,
                     vrfcClsfCd: searchValues.vrfcClsfCd,
                     useYn: searchValues.useYn,
-                }).filter(([, value]) => value !== '' && value !== 'ALL')
+                }).filter(([, value]) => value !== "" && value !== "ALL"),
             );
 
-            const response = await generalverificationApiService.getGeneralverificationList(params);
+            const response =
+                await generalverificationApiService.getGeneralverificationList(
+                    params,
+                );
 
-            if (response.status === 'success') {
+            if (response.status === "success") {
                 setVrfcMasterData(response.data);
                 setRowSelection({});
                 setSelectedVrfcRow(null);
                 setShowRegistForm(false);
             } else {
-                alert(response.message || '데이터 조회 중 오류가 발생했습니다.');
+                alert(
+                    response.message || "데이터 조회 중 오류가 발생했습니다.",
+                );
             }
         } catch {
-            alert('데이터 조회 중 오류가 발생했습니다.');
+            alert("데이터 조회 중 오류가 발생했습니다.");
         } finally {
             setIsLoading(false);
         }
@@ -98,48 +107,67 @@ const GeneralVerificationManagement = () => {
         setSelectedVrfcRow(null);
         handleSearch();
         setShowRegistForm(false);
-    }
+    };
 
     useEffect(() => {
         handleSearch();
     }, []);
 
     return (
-        <div className="h-full">
-            <div className="card card-border">
-                <div className="flex items-center gap-8 p-2">
-                    <div className="flex items-center gap-2">
-                        <Label className="text-label">
-                            통계항목
-                        </Label>
+        <>
+            <div className="card card-border !mx-0">
+                <div className="flex items-center gap-6 pl-2">
+                    <div className="flex items-center gap-4">
+                        <Label className="text-label">통계항목</Label>
                         <CodeSelectWithAll
                             upCd="STITEM"
                             value={searchValues.statsCd}
-                            onValueChange={(value) => setSearchValues({ ...searchValues, statsCd: value })}
+                            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 })}>
+                    <div className="flex items-center gap-4">
+                        <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>
+                                <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 })}>
+                    <div className="flex items-center gap-4">
+                        <Label className="text-label">사용여부</Label>
+                        <Select
+                            value={searchValues.useYn}
+                            onValueChange={(value) =>
+                                setSearchValues({
+                                    ...searchValues,
+                                    useYn: value,
+                                })
+                            }
+                        >
                             <SelectTrigger className="w-[10rem]">
                                 <SelectValue placeholder="전체"></SelectValue>
                             </SelectTrigger>
@@ -150,53 +178,64 @@ const GeneralVerificationManagement = () => {
                             </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}>
+                    <div className="ml-auto flex items-center gap-2">
+                        <Button
+                            color="green"
+                            className="h-[3.2rem]"
+                            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
+                            color="gray"
+                            className="h-[3.2rem]"
+                            onClick={handleReset}
+                        >
+                            초기화
                         </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="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>
-                    <DetailComponent selectedVrfcRow={selectedVrfcRow} />
                 </div>
             </div>
-        </div>
+            <div className="flex h-[65vh] justify-center gap-5 !p-0">
+                <div className="card card-border !mx-0 flex w-1/2 flex-col">
+                    <div className="card-header">
+                        <h3 className="text-2xl font-medium text-label">
+                            일반 검증 목록
+                        </h3>
+                        <RegistDialog
+                            open={showRegistForm}
+                            onOpenChange={setShowRegistForm}
+                            onSuccess={handleSearch}
+                        >
+                            <Button>등록</Button>
+                        </RegistDialog>
+                    </div>
+                    <div className="card !mx-2 !my-4 h-full overflow-auto !p-0">
+                        {isLoading && (
+                            <div className="[data-theme='black']:bg-transparent absolute inset-0 z-50 flex items-center justify-center rounded-lg p-10">
+                                <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>
+                <DetailComponent selectedVrfcRow={selectedVrfcRow} />
+            </div>
+        </>
     );
 };
 
-export default GeneralVerificationManagement;
\ No newline at end of file
+export default GeneralVerificationManagement;
diff --git a/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx b/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx
index 776e9b7b6..cb0f1d932 100644
--- a/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx
+++ b/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx
@@ -2,7 +2,12 @@
 
 import { useEffect, useMemo, useState } from "react";
 
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+    keepPreviousData,
+    useMutation,
+    useQuery,
+    useQueryClient,
+} from "@tanstack/react-query";
 import {
     getCoreRowModel,
     getPaginationRowModel,
@@ -15,18 +20,18 @@ 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,
+import {
+    analysisApi,
+    type AnalysisRequestPayload,
+    type AnalysisResponseDto,
+    type StAnlsMstResponse,
+    type StAnlsMstSearchParams,
+    type StAnlsOutlierListResponse,
+    statisticsAnalysisMasterService,
+    verificationHistoryColumns,
+    type VerificationTargetCodeResponse,
+    verificationTargetManagementApi,
 } 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,
@@ -68,7 +73,7 @@ interface VerificationFormState {
     percentile: string;
     a: string;
     c: string;
-    verificationYear: string;
+    statisticsYear: string;
 }
 
 interface OutlierDialogState {
@@ -97,7 +102,7 @@ function toNumber(value: string): number {
     return Number.isNaN(parsed) ? 0 : parsed;
 }
 
-const HbStatisticsVerification = () => {
+export default function HbStatisticsVerification() {
     const { setMessage: alert } = useAlertStore((state) => state);
     const queryClient = useQueryClient();
 
@@ -109,11 +114,11 @@ const HbStatisticsVerification = () => {
 
     const [verifyType, setVerifyType] = useState<VerifyType>("ALL");
     const [formState, setFormState] = useState<VerificationFormState>({
-        mu: "0",
-        percentile: "0",
-        a: "0",
-        c: "0",
-        verificationYear: defaultYear,
+        mu: "",
+        percentile: "",
+        a: "",
+        c: "",
+        statisticsYear: defaultYear,
     });
     const [selectedTargets, setSelectedTargets] = useState<string[]>([]);
     const [outlierDialog, setOutlierDialog] = useState<OutlierDialogState>({
@@ -202,7 +207,9 @@ const HbStatisticsVerification = () => {
                 params.verifyDtEnd = dayjs(to).format("YYYY-MM-DD");
             }
 
-            return stAnlsMstApi.getAnalysisHistoryList(params);
+            return statisticsAnalysisMasterService.getAnalysisHistoryList(
+                params,
+            );
         },
         refetchInterval: (query) => {
             const data = query.state.data;
@@ -212,6 +219,7 @@ const HbStatisticsVerification = () => {
             );
             return hasProcessing ? 3000 : false;
         },
+        placeholderData: keepPreviousData,
     });
 
     const historyRowData: StAnlsMstResponse[] = analysisHistory?.content ?? [];
@@ -242,9 +250,10 @@ const HbStatisticsVerification = () => {
         ],
         queryFn: async () => {
             if (!outlierDialog.anlsSn) return [];
-            const response = await stAnlsMstApi.getOutlierList(
-                outlierDialog.anlsSn,
-            );
+            const response =
+                await statisticsAnalysisMasterService.getOutlierList(
+                    outlierDialog.anlsSn,
+                );
             return response;
         },
         enabled: outlierDialog.open && !!outlierDialog.anlsSn,
@@ -289,8 +298,8 @@ const HbStatisticsVerification = () => {
     }
 
     async function handleSubmit() {
-        if (!formState.verificationYear) {
-            alert("검증년도를 선택해 주세요.");
+        if (!formState.statisticsYear) {
+            alert("통계년도를 선택해 주세요.");
             return;
         }
 
@@ -299,7 +308,7 @@ const HbStatisticsVerification = () => {
             return;
         }
 
-        const yearNew = toNumber(formState.verificationYear);
+        const yearNew = toNumber(formState.statisticsYear);
         const payload: AnalysisRequestPayload = {
             dataset:
                 verifyType === "ALL"
@@ -328,7 +337,7 @@ const HbStatisticsVerification = () => {
             percentile: "0",
             a: "0",
             c: "0",
-            verificationYear: defaultYear,
+            statisticsYear: defaultYear,
         });
         setSelectedTargets([]);
     }
@@ -376,13 +385,13 @@ const HbStatisticsVerification = () => {
                             <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}
+                                        value={formState.statisticsYear}
                                         onValueChange={(value) =>
                                             handleFormChange(
-                                                "verificationYear",
+                                                "statisticsYear",
                                                 value,
                                             )
                                         }
@@ -550,11 +559,14 @@ const HbStatisticsVerification = () => {
 
                                     <div className="space-y-3">
                                         <div className="flex items-center gap-4">
-                                            <Label className="w-32 text-label">
-                                                μ
+                                            <Label className="w-48 whitespace-nowrap text-label">
+                                                중요도 계수(μ)
                                             </Label>
                                             <Input
                                                 type="number"
+                                                min="0"
+                                                max="1"
+                                                step="0.1"
                                                 value={formState.mu}
                                                 onChange={(event) =>
                                                     handleFormChange(
@@ -563,15 +575,19 @@ const HbStatisticsVerification = () => {
                                                     )
                                                 }
                                                 className="flex-1"
+                                                placeholder="(0 ~ 1, 0.1 단위)"
                                             />
                                         </div>
 
                                         <div className="flex items-center gap-4">
-                                            <Label className="w-32 text-label">
-                                                Percentile
+                                            <Label className="w-48 text-label">
+                                                백분위수 기준값(pct)
                                             </Label>
                                             <Input
                                                 type="number"
+                                                min="0"
+                                                max="0.5"
+                                                step="0.01"
                                                 value={formState.percentile}
                                                 onChange={(event) =>
                                                     handleFormChange(
@@ -580,15 +596,19 @@ const HbStatisticsVerification = () => {
                                                     )
                                                 }
                                                 className="flex-1"
+                                                placeholder="(0 ~ 0.5, 0.01 단위)"
                                             />
                                         </div>
 
                                         <div className="flex items-center gap-4">
-                                            <Label className="w-32 text-label">
-                                                A
+                                            <Label className="w-48 text-label">
+                                                스케일 조정 계수(A)
                                             </Label>
                                             <Input
                                                 type="number"
+                                                min="0"
+                                                max="1"
+                                                step="0.01"
                                                 value={formState.a}
                                                 onChange={(event) =>
                                                     handleFormChange(
@@ -597,15 +617,19 @@ const HbStatisticsVerification = () => {
                                                     )
                                                 }
                                                 className="flex-1"
+                                                placeholder="(0 ~ 1, 0.01 단위)"
                                             />
                                         </div>
 
                                         <div className="flex items-center gap-4">
-                                            <Label className="w-32 text-label">
-                                                C
+                                            <Label className="w-48 text-label">
+                                                임계 계수(c)
                                             </Label>
                                             <Input
                                                 type="number"
+                                                min="0"
+                                                max="100"
+                                                step="1"
                                                 value={formState.c}
                                                 onChange={(event) =>
                                                     handleFormChange(
@@ -614,6 +638,7 @@ const HbStatisticsVerification = () => {
                                                     )
                                                 }
                                                 className="flex-1"
+                                                placeholder="(0 ~ 100, 1 단위)"
                                             />
                                         </div>
                                     </div>
@@ -765,6 +790,4 @@ const HbStatisticsVerification = () => {
             </Dialog>
         </>
     );
-};
-
-export default HbStatisticsVerification;
+}
diff --git a/apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx b/apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx
index 3b294626c..e8e0d36e3 100644
--- a/apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx
+++ b/apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { Line } from "react-chartjs-2";
 
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
     getCoreRowModel,
     getPaginationRowModel,
@@ -24,23 +24,21 @@ import dayjs from "dayjs";
 
 import { ENDPOINT } from "@/shared/config";
 import { CodeSelect } from "@/entities/code";
-import type {
-    AdstZoneResponseDto,
-    StAnlsMstResponse,
-    StAnlsMstSearchParams,
-    StAnlsRsltResponse,
-} from "@/entities/statistics";
 import {
+    type AdstZoneResponseDto,
+    IMR_DETAIL_VISIBLE_COLUMNS_BY_STATS_CD,
+    IMR_DETAIL_VISIBLE_COLUMNS_DEFAULT,
+    imrApi,
     imrDetailGridColumnInfo,
     imrVerificationHistoryColumns,
-} from "@/entities/statistics";
-import { stAnlsMstApi } from "@/entities/statistics/api/statistics-analysis-master-api";
-import { imrApi } from "@/entities/statistics/api/imr-api";
-import {
+    type StAnlsMstResponse,
+    type StAnlsMstSearchParams,
+    stAnlsRsltApi,
+    type StAnlsRsltResponse,
+    statisticsAnalysisMasterService,
     useStAnlsSidoCombo,
     useStAnlsSigunguCombo,
-} from "@/entities/statistics/api/queries";
-import { stAnlsRsltApi } from "@/entities/statistics/api/statistics-analysis-result-api";
+} from "@/entities/statistics";
 import {
     Button,
     DataTable,
@@ -55,6 +53,7 @@ import {
 } from "@common/components";
 
 import DataGrid from "@/components/module/DataGrid";
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
 
 ChartJS.register(
     CategoryScale,
@@ -74,10 +73,40 @@ type DateRangeValue = {
 const EMPTY_DATA: never[] = [];
 const EMPTY_ADST_LIST: AdstZoneResponseDto[] = [];
 
+function getImrDetailGridColumnInfo(statsCd: string): ColumnInfo {
+    const visible =
+        IMR_DETAIL_VISIBLE_COLUMNS_BY_STATS_CD[statsCd] ??
+        IMR_DETAIL_VISIBLE_COLUMNS_DEFAULT;
+    const visibleSet = new Set(visible);
+    return {
+        columns: imrDetailGridColumnInfo.columns.map((col) =>
+            visibleSet.has(col.name) ? col : { ...col, visible: false },
+        ),
+        columnLayout: imrDetailGridColumnInfo.columnLayout,
+    };
+}
+
+function getVerificationYearOptions(): string[] {
+    const currentYear = dayjs().year();
+    const startYear = 2017;
+    const endYear = currentYear - 1;
+    if (endYear < startYear) return [];
+    return Array.from({ length: endYear - startYear + 1 }, (_, index) =>
+        String(startYear + index),
+    );
+}
+
 const ImrVerificationHistory = () => {
+    const yearOptions = useMemo(() => getVerificationYearOptions(), []);
+    const defaultYear: string =
+        yearOptions.length > 0
+            ? (yearOptions[yearOptions.length - 1] ?? "")
+            : "";
+
     // Area A Search States
     const [searchSido, setSearchSido] = useState<string>("");
     const [searchSigungu, setSearchSigungu] = useState<string>("");
+    const [searchStatsYr, setSearchStatsYr] = useState<string>(defaultYear);
     const [searchStatsCd, setSearchStatsCd] = useState<string>("");
     const [dateRange, setDateRange] = useState<DateRangeValue | undefined>({
         from: dayjs().subtract(1, "month").toDate(),
@@ -89,6 +118,7 @@ const ImrVerificationHistory = () => {
             size: 10,
             vrfcMthdCd: "IMR",
             sort: "anlsSn,desc",
+            statsYr: defaultYear,
         });
 
     // Selected States
@@ -114,6 +144,11 @@ const ImrVerificationHistory = () => {
     const sidoOptions = sidoData ?? EMPTY_ADST_LIST;
     const sigunguOptions = sigunguData ?? EMPTY_ADST_LIST;
 
+    const imrDetailColumnInfo = useMemo(
+        () => getImrDetailGridColumnInfo(selectedHistory?.statsCd ?? ""),
+        [selectedHistory?.statsCd],
+    );
+
     // Area A Data Fetching
     const { data: historyData } = useQuery({
         queryKey: [
@@ -123,11 +158,12 @@ const ImrVerificationHistory = () => {
             historyPagination,
         ],
         queryFn: () =>
-            stAnlsMstApi.getImrAnalysisMasterList({
+            statisticsAnalysisMasterService.getImrAnalysisMasterList({
                 ...appliedSearchParams,
                 page: historyPagination.pageIndex,
                 size: historyPagination.pageSize,
             }),
+        placeholderData: keepPreviousData,
     });
 
     const historyTable = useReactTable({
@@ -157,7 +193,7 @@ const ImrVerificationHistory = () => {
             stAnlsRsltApi.getImrResultList(selectedHistory!.anlsSn, {
                 page: 0,
                 size: 100,
-                sort: "rsltSn,asc",
+                sort: "admdstCd,asc",
             }),
         enabled: !!selectedHistory,
     });
@@ -178,9 +214,8 @@ const ImrVerificationHistory = () => {
     const { data: chartData, isLoading: isChartLoading } = useQuery({
         queryKey: [
             ENDPOINT.STATVERIFY_SERVICE.IMR,
-            selectedHistory?.anlsSn,
-            selectedDetail?.vrfcTrgtSn,
-            selectedDetail?.admdstCd,
+            selectedHistory,
+            selectedDetail,
         ],
         queryFn: () =>
             imrApi.getOutliersLog({
@@ -188,6 +223,15 @@ const ImrVerificationHistory = () => {
                 anlsSn: selectedDetail!.anlsSn,
                 vrfcTrgtSn: selectedDetail!.vrfcTrgtSn,
                 admdstCd: selectedDetail!.admdstCd,
+                swtrmtFcltCd: selectedDetail!.swtrmtFcltCd ?? "",
+                pipeSeCd: selectedDetail!.pipeSeCd ?? "",
+                fcltNm: selectedDetail!.fcltNm ?? "",
+                fcltPstnCn: selectedDetail!.fcltPstnCn ?? "",
+                fcltSn: selectedDetail!.fcltSn ?? "",
+                ognzNm: selectedDetail!.ognzNm ?? "",
+                emphsMngSeCd: selectedDetail!.emphsMngSeCd ?? "",
+                lyngYr: selectedDetail!.lyngYr ?? "",
+                manhYr: selectedDetail!.manhYr ?? "",
             }),
         enabled: !!selectedHistory && !!selectedDetail,
     });
@@ -200,6 +244,7 @@ const ImrVerificationHistory = () => {
         if (searchSido !== "")
             params.sewerBzmnCd =
                 searchSigungu !== "" ? searchSigungu : searchSido;
+        if (searchStatsYr) params.statsYr = searchStatsYr;
         if (searchStatsCd) params.statsCd = searchStatsCd;
         if (dateRange?.from)
             params.verifyDtStart = dayjs(dateRange.from).format("YYYY-MM-DD");
@@ -342,7 +387,7 @@ const ImrVerificationHistory = () => {
     return (
         <div className="flex flex-col gap-4">
             {/* 영역 A: 검증 이력 그리드 + 검색 필터 */}
-            <div className="card card-border bg-white p-6">
+            <div className="card card-border bg-white px-4">
                 <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">
@@ -396,6 +441,27 @@ const ImrVerificationHistory = () => {
                         </Select>
                     </div>
 
+                    <div className="flex items-center gap-2">
+                        <Label className="text-[1.3rem] font-medium text-label">
+                            통계년도
+                        </Label>
+                        <Select
+                            value={searchStatsYr}
+                            onValueChange={setSearchStatsYr}
+                        >
+                            <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-2">
                         <Label className="text-[1.3rem] font-medium text-label">
                             검증일시
@@ -482,9 +548,9 @@ const ImrVerificationHistory = () => {
                             </div>
                         ) : (
                             <DataGrid
-                                columnInfo={imrDetailGridColumnInfo}
+                                columnInfo={imrDetailColumnInfo}
                                 rowData={gridRowData}
-                                setRowData={setGridRowData}
+                                setRowData={() => {}}
                                 idFieldName="rsltSn"
                                 isExcelExport={false}
                                 isExcelImport={false}
diff --git a/apps/st/src/components/statistics/verification/StatisticsVerificationReport.tsx b/apps/st/src/components/statistics/verification/StatisticsVerificationReport.tsx
new file mode 100644
index 000000000..3e537c987
--- /dev/null
+++ b/apps/st/src/components/statistics/verification/StatisticsVerificationReport.tsx
@@ -0,0 +1,761 @@
+"use client";
+
+import type { Dispatch, SetStateAction } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useQuery } from "@tanstack/react-query";
+import dayjs from "dayjs";
+import type { RealGridReact } from "realgrid-react";
+
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper, useUserStore } from "@/shared/lib";
+import { CodeApi, CodeSelect } from "@/entities/code";
+import {
+    type ApproveRequest,
+    type RejectRequest,
+    statisticsApprovalApi,
+    type StatisticsVerificationFilterState,
+    statisticsVerificationReportColumnInfo,
+    statisticsVerificationResultColumnInfo,
+    type StatisticsVerificationSubFilterState,
+    type StatsInputStatusList,
+    useStAnlsSidoCombo,
+    useStAnlsSigunguCombo,
+    useStatsVrfcRptData,
+    useStatsVrfcRsltData,
+    type VerifyResultItem,
+} from "@/entities/statistics";
+import {
+    Button,
+    Combobox,
+    ComboboxChip,
+    ComboboxChips,
+    ComboboxChipsInput,
+    ComboboxContent,
+    ComboboxEmpty,
+    ComboboxItem,
+    ComboboxList,
+    ComboboxValue,
+    Label,
+    LoadingWithAnimation,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    useComboboxAnchor,
+} from "@common/components";
+
+import DataGrid from "@/components/module/DataGrid";
+import {
+    type ApprovalFormData,
+    ApprovalInputDialog,
+} from "@/components/statistics/verification/ApprovalInputDialog";
+import type { CellEditedCallbackParams } from "@/components/type/DataGrid.type";
+import { toGridRows } from "@/components/util/grid/gridFunction";
+
+const getYearOptions = () => {
+    const currentYear = dayjs().year();
+    const yearOptionsRange = Array.from(
+        { length: currentYear - 2017 },
+        (_, i) => {
+            const year = 2017 + i;
+            return { label: String(year), value: String(year) };
+        },
+    );
+    return yearOptionsRange.map((year) => ({
+        label: year.label,
+        value: year.value,
+    }));
+};
+
+function isSameStatsInputStatusRow(
+    a: StatsInputStatusList,
+    b: StatsInputStatusList,
+): boolean {
+    return (
+        a.ctpvNm === b.ctpvNm && a.sggNm === b.sggNm && a.statsCd === b.statsCd
+    );
+}
+
+function isSameVerifyResultRow(
+    a: VerifyResultItem,
+    b: VerifyResultItem,
+): boolean {
+    if (a.vrfcSn != null && b.vrfcSn != null) return a.vrfcSn === b.vrfcSn;
+    return (
+        a.statsYr === b.statsYr &&
+        a.statsCd === b.statsCd &&
+        a.ctpvNm === b.ctpvNm &&
+        a.sggNm === b.sggNm &&
+        a.vrfcTrgtNm === b.vrfcTrgtNm &&
+        a.vrfcMthdCd === b.vrfcMthdCd
+    );
+}
+
+function useGridCheckboxSelection<T>(
+    sourceRows: T[],
+    isSameRow: (a: T, b: T) => boolean,
+    setSelected: Dispatch<SetStateAction<T[]>>,
+) {
+    const handleItemChecked = useCallback(
+        (itemIndex: number, checked: boolean) => {
+            const origin = sourceRows[itemIndex];
+            if (origin === undefined) return;
+            setSelected((prev) => {
+                if (checked) {
+                    if (prev.some((r) => isSameRow(r, origin))) return prev;
+                    return [...prev, origin];
+                }
+                return prev.filter((r) => !isSameRow(r, origin));
+            });
+        },
+        [sourceRows, isSameRow, setSelected],
+    );
+
+    const handleAllChecked = useCallback(
+        (checked: boolean) => {
+            if (checked) setSelected([...sourceRows]);
+            else setSelected([]);
+        },
+        [sourceRows, setSelected],
+    );
+
+    return { handleItemChecked, handleAllChecked };
+}
+
+const DEFAULT_FILTERS: StatisticsVerificationFilterState = {
+    ctpvNm: null,
+    sggNm: null,
+    statsYr: String(dayjs().year() - 1),
+    sewerBzmnCd: null,
+    statsCd: null,
+    laeSbmsnSttsCd: "3",
+};
+
+const DEFAULT_SUB_FILTERS: StatisticsVerificationSubFilterState = {
+    ...DEFAULT_FILTERS,
+    prcsYnList: "1,2",
+    pbcpAprvYn: "N",
+};
+
+const APPROVAL_STATUS_OPTIONS = [
+    { label: "승인", value: "Y" },
+    { label: "미승인", value: "N" },
+];
+
+function StatisticsVerificationReport() {
+    const userInfo = useUserStore((state) => state.userInfo);
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const { confirm } = useConfirm();
+    const [filters, setFilters] =
+        useState<StatisticsVerificationFilterState>(DEFAULT_FILTERS);
+    const [subFilters, setSubFilters] =
+        useState<StatisticsVerificationSubFilterState>(DEFAULT_SUB_FILTERS);
+    const [selectedReportRows, setSelectedReportRows] = useState<
+        StatsInputStatusList[]
+    >([]);
+    const [selectedResultRows, setSelectedResultRows] = useState<
+        VerifyResultItem[]
+    >([]);
+    const [approvalDialogOpen, setApprovalDialogOpen] = useState(false);
+    const editedResultRowMapRef = useRef<Map<number, VerifyResultItem>>(
+        new Map(),
+    );
+    const resultGridRef = useRef<RealGridReact | null>(null);
+    const prevLengthRef = useRef(0);
+
+    const { data: sidoData } = useStAnlsSidoCombo();
+    const { data: sigunguData } = useStAnlsSigunguCombo(
+        filters.sewerBzmnCd ?? "",
+    );
+    const detailParams = useMemo(
+        () => ({
+            statsYr: filters.statsYr,
+            ctpvNm:
+                subFilters.ctpvNm !== "" ? subFilters.ctpvNm : filters.ctpvNm,
+            sggNm: subFilters.sggNm !== "" ? subFilters.sggNm : filters.sggNm,
+            sewerBzmnCd:
+                subFilters.sewerBzmnCd !== ""
+                    ? subFilters.sewerBzmnCd
+                    : filters.sewerBzmnCd,
+            statsCd:
+                subFilters.statsCd !== ""
+                    ? subFilters.statsCd
+                    : filters.statsCd,
+            prcsYnList: subFilters.prcsYnList,
+            pbcpAprvYn: subFilters.pbcpAprvYn,
+            laeSbmsnSttsCd: subFilters.laeSbmsnSttsCd,
+        }),
+        [filters, subFilters],
+    );
+
+    const { data: statusOptions } = useQuery({
+        queryKey: [ENDPOINT.CMS_SERVICE.CODE, "STINPTEXCT"],
+        queryFn: () => CodeApi.getCode("STINPTEXCT"),
+        select: (data) =>
+            data
+                .filter(({ lwpoCd }) => !["0", "4"].includes(lwpoCd))
+                .map(({ lwpoCdNm: label, lwpoCd: value }) => ({
+                    label,
+                    value,
+                })),
+    });
+
+    const statisticsVerificationReportQuery = useStatsVrfcRptData(filters);
+    const statisticsVerificationResultQuery =
+        useStatsVrfcRsltData(detailParams);
+
+    const statisticsVerificationReportData =
+        statisticsVerificationReportQuery.data ?? [];
+    const statisticsVerificationReportGridRows = useMemo(
+        () => toGridRows(statisticsVerificationReportData),
+        [statisticsVerificationReportData],
+    );
+
+    const statisticsVerificationResultData = useMemo(
+        () =>
+            statisticsVerificationResultQuery.data?.pages.flatMap(
+                (page) => page.verifyResultList ?? [],
+            ) ?? [],
+        [statisticsVerificationResultQuery.data],
+    );
+    const statisticsVerificationResultGridRows = useMemo(
+        () => toGridRows(statisticsVerificationResultData),
+        [statisticsVerificationResultData],
+    );
+
+    function mergeWithEditedMap(rows: Record<string, string | number>[]) {
+        const editedMap = editedResultRowMapRef.current;
+        if (editedMap.size === 0) return rows;
+        return rows.map((row) => {
+            const vrfcSn = Number(row.vrfcSn);
+            const edited = editedMap.get(vrfcSn);
+            return edited ? { ...row, ...edited } : row;
+        });
+    }
+
+    function captureCheckedVrfcSn(): number[] {
+        const gridView = resultGridRef.current?.gridView;
+        const dataProvider = resultGridRef.current?.dataProvider;
+
+        if (!gridView || !dataProvider) return [];
+
+        const checkedRows = gridView.getCheckedRows?.(true, false, true) ?? [];
+        return checkedRows
+            .map((row) => Number(dataProvider.getValue?.(row, "vrfcSn")))
+            .filter((key) => !Number.isNaN(key));
+    }
+
+    function restoreCheckedVrfcSn(
+        keys: number[],
+        rows: Record<string, string | number>[],
+    ) {
+        const gridView = resultGridRef.current?.gridView;
+
+        if (!gridView || keys.length === 0) return;
+
+        const keySet = new Set(keys);
+        const rowsToCheck = rows
+            .map((row, index) => ({ index, key: Number(row.vrfcSn) }))
+            .filter((item) => !Number.isNaN(item.key) && keySet.has(item.key))
+            .map((item) => item.index);
+
+        if (rowsToCheck.length === 0) return;
+
+        gridView.checkRows?.(rowsToCheck, true, false);
+    }
+
+    useEffect(() => {
+        const dataProvider = resultGridRef.current?.dataProvider;
+        const nextRows = statisticsVerificationResultGridRows;
+        const prevLength = prevLengthRef.current;
+
+        if (!dataProvider) {
+            prevLengthRef.current = nextRows.length;
+            return;
+        }
+
+        if (nextRows.length === 0) {
+            dataProvider.setRows?.([]);
+            prevLengthRef.current = 0;
+            return;
+        }
+
+        if (nextRows.length > prevLength && prevLength > 0) {
+            // 무한스크롤 시 데이터 처리
+            const newRows = nextRows.slice(prevLength);
+            const mergedNewRows = mergeWithEditedMap(newRows);
+            dataProvider.addRows?.(mergedNewRows);
+        } else {
+            // 초기 조회 또는 재조회 시 데이터 처리
+            const checkedKeys = captureCheckedVrfcSn();
+            const mergedRows = mergeWithEditedMap(nextRows);
+            dataProvider.setRows?.(mergedRows);
+            restoreCheckedVrfcSn(checkedKeys, mergedRows);
+        }
+
+        prevLengthRef.current = nextRows.length;
+    }, [statisticsVerificationResultGridRows]);
+
+    const isLoading =
+        statisticsVerificationReportQuery.isFetching ||
+        statisticsVerificationResultQuery.isFetching;
+    const isAppendingDetail =
+        statisticsVerificationResultQuery.isFetchingNextPage;
+    const canLoadMoreDetail = Boolean(
+        statisticsVerificationResultQuery.hasNextPage,
+    );
+
+    const {
+        handleItemChecked: handleReportItemChecked,
+        handleAllChecked: handleReportAllChecked,
+    } = useGridCheckboxSelection(
+        statisticsVerificationReportData,
+        isSameStatsInputStatusRow,
+        setSelectedReportRows,
+    );
+
+    const {
+        handleItemChecked: handleResultItemChecked,
+        handleAllChecked: handleResultAllChecked,
+    } = useGridCheckboxSelection(
+        statisticsVerificationResultData,
+        isSameVerifyResultRow,
+        setSelectedResultRows,
+    );
+
+    const { mutateAsync: onApproveStats } = useMutationWrapper({
+        mutationFn: (approvalRequests: ApproveRequest[]) =>
+            statisticsApprovalApi.approveStats(approvalRequests),
+        onSuccess: (data) => {
+            alert(data.message ?? "승인이 완료되었습니다.");
+        },
+    });
+
+    const { mutateAsync: onRejectStats } = useMutationWrapper({
+        mutationFn: (rejectRequests: RejectRequest[]) =>
+            statisticsApprovalApi.rejectStats(rejectRequests),
+        onSuccess: (data) => {
+            alert(data.message ?? "반려가 완료되었습니다.");
+        },
+    });
+
+    useEffect(() => {
+        if (!statisticsVerificationReportQuery.isError) return;
+        alert("통계검증리포트 조회 중 오류가 발생했습니다.");
+        setSelectedReportRows([]);
+    }, [
+        alert,
+        statisticsVerificationReportQuery.errorUpdatedAt,
+        statisticsVerificationReportQuery.isError,
+    ]);
+
+    function resetResultState() {
+        setSelectedResultRows([]);
+        editedResultRowMapRef.current = new Map();
+        prevLengthRef.current = 0;
+        resultGridRef.current?.dataProvider?.setRows?.([]);
+    }
+
+    function resetReportState() {
+        setSelectedReportRows([]);
+        resetResultState();
+    }
+
+    async function handleLoadMoreDetail() {
+        if (isLoading || isAppendingDetail || !canLoadMoreDetail) return;
+
+        try {
+            await statisticsVerificationResultQuery.fetchNextPage();
+        } catch {
+            alert("추가 데이터를 불러오는 중 오류가 발생했습니다.");
+        }
+    }
+
+    function handleFilterChange<
+        K extends keyof StatisticsVerificationFilterState,
+    >(key: K) {
+        return (
+            value?: StatisticsVerificationFilterState[K],
+            optionData?: { label: string; value: string },
+        ) => {
+            resetReportState();
+            if (key === "sewerBzmnCd") {
+                setFilters((prev) => ({
+                    ...prev,
+                    ctpvNm: optionData?.label,
+                    sewerBzmnCd: optionData?.value,
+                    sggNm: "",
+                }));
+                setSubFilters((prev) => ({
+                    ...prev,
+                    ctpvNm: "",
+                    sggNm: "",
+                    sewerBzmnCd: "",
+                }));
+                return;
+            }
+            if (key === "statsCd") {
+                setSubFilters((prev) => ({ ...prev, statsCd: "" }));
+            }
+            setFilters((prev) => ({ ...prev, [key]: value }));
+        };
+    }
+
+    function handleSubFilterChange<
+        K extends keyof StatisticsVerificationSubFilterState,
+    >(key: K) {
+        return (value?: StatisticsVerificationSubFilterState[K]) => {
+            resetResultState();
+            setSubFilters((prev) => ({ ...prev, [key]: value }));
+        };
+    }
+
+    function handleSubFilterReset() {
+        setSubFilters(DEFAULT_SUB_FILTERS);
+        resetResultState();
+    }
+
+    function handleCellEdited(params: CellEditedCallbackParams) {
+        const { itemIndex, fieldName, newValue } = params;
+        const dataProvider = resultGridRef.current?.dataProvider as
+            | { getValue?: (row: number, field: string) => string | number }
+            | undefined;
+        const vrfcSn = Number(dataProvider?.getValue?.(itemIndex, "vrfcSn"));
+        if (Number.isNaN(vrfcSn)) return;
+
+        editedResultRowMapRef.current?.set(vrfcSn, {
+            ...(editedResultRowMapRef.current?.get(vrfcSn) ?? {}),
+            [fieldName]: newValue,
+        });
+    }
+
+    function handleReset() {
+        setFilters(DEFAULT_FILTERS);
+        setSubFilters(DEFAULT_SUB_FILTERS);
+        resetReportState();
+    }
+
+    function handleApprove() {
+        if (selectedReportRows.length === 0) return;
+        setApprovalDialogOpen(true);
+    }
+
+    async function handleApprovalConfirm(formData: ApprovalFormData) {
+        const commonParam = {
+            statsYr: filters.statsYr,
+            mdfrId: userInfo?.userUnqId ?? "",
+        };
+        const approvalRequests = selectedReportRows.map((row) => ({
+            ...commonParam,
+            ...formData,
+            statsCd: row.statsCd ?? "",
+            sewerBzmnCd: row.sewerBzmnCd ?? "",
+        }));
+
+        try {
+            if (await confirm("승인하시겠습니까?")) {
+                await onApproveStats(approvalRequests);
+                setApprovalDialogOpen(false);
+            }
+        } catch {
+            alert("승인 중 오류가 발생했습니다.");
+        }
+    }
+
+    async function handleReject() {
+        const commonParam = {
+            statsYr: filters.statsYr,
+            mdfrId: userInfo?.userUnqId ?? "",
+        };
+
+        const requestRows = selectedResultRows.map((row) => {
+            const vrfcSn = Number(row.vrfcSn);
+            const editedRow = Number.isNaN(vrfcSn)
+                ? undefined
+                : editedResultRowMapRef.current?.get(vrfcSn);
+            return { ...row, ...(editedRow ?? {}) };
+        });
+
+        const hasEmptyRjctOpnnCn = requestRows.some(
+            (row) => !String(row?.rjctOpnnCn ?? "").trim(),
+        );
+        if (hasEmptyRjctOpnnCn) {
+            alert("선택한 항목의 반려의견을 작성해주세요.");
+            return;
+        }
+
+        const rejectRequests = requestRows.map((row) => {
+            const vrfcSn = Number(row.vrfcSn);
+
+            return {
+                ...commonParam,
+                vrfcSn: Number.isNaN(vrfcSn) ? 0 : vrfcSn,
+                rjctOpnnCn: String(row.rjctOpnnCn ?? ""),
+                sewerBzmnCd: String(row.sewerBzmnCd ?? ""),
+                statsCd: String(row.statsCd ?? ""),
+            };
+        });
+
+        try {
+            if (await confirm("반려하시겠습니까?")) {
+                await onRejectStats(rejectRequests);
+            }
+        } catch {
+            alert("반려 중 오류가 발생했습니다.");
+        }
+    }
+
+    return (
+        <div className="relative">
+            <ApprovalInputDialog
+                open={approvalDialogOpen}
+                onOpenChange={setApprovalDialogOpen}
+                onConfirm={handleApprovalConfirm}
+            />
+            <div className="flex justify-between p-2">
+                <div className="flex items-center gap-6">
+                    <FilterSelect
+                        label="시도"
+                        value={filters.sewerBzmnCd ?? ""}
+                        onChange={handleFilterChange("sewerBzmnCd")}
+                        options={
+                            sidoData?.map((item) => ({
+                                label: item.adstNm,
+                                value: item.adstCd,
+                            })) ?? []
+                        }
+                    />
+                    <FilterSelect
+                        label="시군구"
+                        value={filters.sggNm ?? ""}
+                        onChange={handleFilterChange("sggNm")}
+                        options={
+                            sigunguData?.map((item) => ({
+                                label: item.adstNm,
+                                value: item.adstCd,
+                            })) ?? []
+                        }
+                    />
+                    <FilterSelect
+                        label="년도"
+                        value={filters.statsYr}
+                        onChange={handleFilterChange("statsYr")}
+                        options={getYearOptions()}
+                    />
+                    <div className="flex items-center gap-2">
+                        <Label>통계지표</Label>
+                        <CodeSelect
+                            upCd="STITEM"
+                            value={filters.statsCd ?? ""}
+                            onValueChange={handleFilterChange("statsCd")}
+                            placeholder="선택"
+                            className="w-[32rem]"
+                        />
+                    </div>
+                </div>
+                <div className="flex items-end justify-end gap-2">
+                    <Button color="white" onClick={handleReset}>
+                        초기화
+                    </Button>
+                    <Button
+                        color="green"
+                        onClick={handleApprove}
+                        disabled={selectedReportRows.length === 0}
+                    >
+                        승인
+                    </Button>
+                </div>
+            </div>
+
+            <DataGrid
+                columnInfo={statisticsVerificationReportColumnInfo}
+                fixedColumns={3}
+                isExcelImport={false}
+                isExcelExport={false}
+                onItemAllChecked={handleReportAllChecked}
+                onItemChecked={handleReportItemChecked}
+                rowData={statisticsVerificationReportGridRows}
+                rowStartNum={2}
+                setRowData={() => {}}
+                showHeaderCheckbox={true}
+                gridHeight={30}
+                onRowClick={(row: StatsInputStatusList) => {
+                    setSubFilters((prev) => ({
+                        ...prev,
+                        ctpvNm: row?.ctpvNm ?? "",
+                        sggNm: row?.sggNm ?? "",
+                        sewerBzmnCd: row?.sewerBzmnCd ?? "",
+                        statsCd: row?.statsCd ?? "",
+                    }));
+                }}
+            />
+
+            <h3 className="mt-10 px-2 text-[1.8rem] font-bold text-title">
+                검증 결과
+            </h3>
+            <div className="mt-2 flex flex-wrap items-end justify-between p-2">
+                <div className="flex items-center gap-6">
+                    <FilterCombobox
+                        label="상태"
+                        value={subFilters.prcsYnList}
+                        onChange={handleSubFilterChange("prcsYnList")}
+                        options={statusOptions ?? []}
+                    />
+                    <FilterSelect
+                        label="승인상태"
+                        value={subFilters.pbcpAprvYn}
+                        onChange={handleSubFilterChange("pbcpAprvYn")}
+                        options={APPROVAL_STATUS_OPTIONS}
+                    />
+                </div>
+                <div className="flex items-end justify-end gap-2">
+                    <Button color="white" onClick={handleSubFilterReset}>
+                        초기화
+                    </Button>
+                    <Button
+                        color="red"
+                        onClick={handleReject}
+                        disabled={
+                            selectedResultRows.length === 0 ||
+                            selectedResultRows.some((row) => row.prcsYn !== "2")
+                        }
+                    >
+                        반려
+                    </Button>
+                </div>
+            </div>
+
+            <div className="relative">
+                <DataGrid
+                    columnInfo={statisticsVerificationResultColumnInfo}
+                    fixedColumns={4}
+                    isExcelImport={false}
+                    onItemAllChecked={handleResultAllChecked}
+                    onItemChecked={handleResultItemChecked}
+                    onScrollToBottom={handleLoadMoreDetail}
+                    rowData={statisticsVerificationResultGridRows}
+                    rowStartNum={2}
+                    setRowData={() => {}}
+                    showHeaderCheckbox={true}
+                    onCellEdited={handleCellEdited}
+                    getGridRef={resultGridRef}
+                />
+
+                {(isLoading || isAppendingDetail) && (
+                    <div className="[data-theme='black']:bg-transparent absolute inset-0 z-50 flex items-center justify-center rounded-lg p-10">
+                        <div className="relative size-[6rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+interface FilterSelectProps {
+    label: string;
+    onChange: (
+        value?: string,
+        optionData?: { label: string; value: string },
+    ) => void;
+    options: Array<{ label: string; value: string }>;
+    value?: string;
+}
+
+function FilterCombobox({
+    label,
+    onChange,
+    options,
+    value,
+}: FilterSelectProps) {
+    const anchor = useComboboxAnchor();
+    const items = useMemo(
+        () => options.map((option) => option.value),
+        [options],
+    );
+    const selectedValues = useMemo(() => {
+        if (!value) return [];
+        return value.split(",").filter(Boolean);
+    }, [value]);
+
+    return (
+        <div className="flex items-center gap-2">
+            <Label className="whitespace-nowrap">{label}</Label>
+            <Combobox
+                multiple
+                autoHighlight
+                items={items}
+                value={selectedValues}
+                onValueChange={(next) => {
+                    if (next == null) {
+                        onChange(undefined);
+                        return;
+                    }
+                    const list = Array.isArray(next) ? next : [next];
+                    onChange(list.length > 0 ? list.join(",") : undefined);
+                }}
+            >
+                <ComboboxChips ref={anchor} className="max-w-[32rem]">
+                    <ComboboxValue>
+                        {(values: string[]) => (
+                            <>
+                                {values.map((v) => (
+                                    <ComboboxChip key={v}>
+                                        {options.find((o) => o.value === v)
+                                            ?.label ?? v}
+                                    </ComboboxChip>
+                                ))}
+                                <ComboboxChipsInput placeholder="선택" />
+                            </>
+                        )}
+                    </ComboboxValue>
+                </ComboboxChips>
+                <ComboboxContent anchor={anchor}>
+                    <ComboboxEmpty>검색 결과가 없습니다.</ComboboxEmpty>
+                    <ComboboxList>
+                        {(item: string) => (
+                            <ComboboxItem key={item} value={item}>
+                                {options.find((o) => o.value === item)?.label ??
+                                    item}
+                            </ComboboxItem>
+                        )}
+                    </ComboboxList>
+                </ComboboxContent>
+            </Combobox>
+        </div>
+    );
+}
+
+function FilterSelect({ label, onChange, options, value }: FilterSelectProps) {
+    return (
+        <div className="flex items-center gap-2">
+            <Label className="whitespace-nowrap">{label}</Label>
+            <Select
+                value={value}
+                onValueChange={(value) =>
+                    onChange(
+                        value,
+                        options.find((option) => option.value === value),
+                    )
+                }
+            >
+                <SelectTrigger className="w-[16rem]">
+                    <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                    {options.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+        </div>
+    );
+}
+
+export default StatisticsVerificationReport;
diff --git a/apps/st/src/components/statistics/verification/VerificationArticleManagement.tsx b/apps/st/src/components/statistics/verification/VerificationArticleManagement.tsx
index a7fc97019..99b8391ed 100644
--- a/apps/st/src/components/statistics/verification/VerificationArticleManagement.tsx
+++ b/apps/st/src/components/statistics/verification/VerificationArticleManagement.tsx
@@ -19,6 +19,7 @@ import type {
 } from "@/entities/statistics/model/verification-target-management-interface";
 import {
     Button,
+    cn,
     Dialog,
     DialogContent,
     DialogFooter,
@@ -32,6 +33,7 @@ import {
     TabsTrigger,
 } from "@common/components";
 
+import GeneralVerificationManagement from "./GeneralVerificationManagement";
 import { VerificationTargetDialog } from "./VerificationTargetDialog";
 
 import DataGrid from "@/components/module/DataGrid";
@@ -39,9 +41,9 @@ import DataGrid from "@/components/module/DataGrid";
 const TAB_CONFIG = {
     HB: { value: "HB", label: "H-B", columnInfo: hbArticleColumnInfo },
     IMR: { value: "IMR", label: "I-MR", columnInfo: imrArticleColumnInfo },
-    VV: {
-        value: "VV",
-        label: "Validation",
+    GENERAL: {
+        value: "GENERAL",
+        label: "일반",
         columnInfo: validationArticleColumnInfo,
     },
 } as const;
@@ -209,7 +211,7 @@ function VerificationArticleManagement() {
         setDialogOpen(true);
     }
 
-    function handleSubmit(e: React.FormEvent) {
+    function handleSubmit(e: React.SubmitEvent) {
         e.preventDefault();
         handleSearch();
     }
@@ -253,83 +255,90 @@ function VerificationArticleManagement() {
                         </TabsTrigger>
                     ))}
                 </TabsList>
+                {activeTab !== "GENERAL" && (
+                    <div className="card card-border !mx-0">
+                        <form onSubmit={handleSubmit}>
+                            <div className="flex items-center gap-6 pl-2">
+                                <div className="flex items-center gap-4">
+                                    <Label className="whitespace-nowrap text-label">
+                                        통계항목
+                                    </Label>
+                                    <CodeSelect
+                                        upCd="STITEM"
+                                        value={statsCd}
+                                        onValueChange={setStatsCd}
+                                        placeholder="선택"
+                                        className="w-[16rem]"
+                                    />
+                                </div>
 
-                <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 text-label">
+                                        검증명
+                                    </Label>
+                                    <Input
+                                        value={vrfcTrgtNm}
+                                        onChange={(e) =>
+                                            setVrfcTrgtNm(e.target.value)
+                                        }
+                                        placeholder="검증명"
+                                        className="w-[20rem]"
+                                    />
+                                </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 className="ml-auto flex gap-2">
+                                    <Button
+                                        type="button"
+                                        color="white"
+                                        onClick={handleCheckColumns}
+                                        disabled={
+                                            checkColumnsMutation.isPending
+                                        }
+                                    >
+                                        컬럼 검사
+                                    </Button>
+                                    <Button
+                                        type="button"
+                                        onClick={handleRegister}
+                                    >
+                                        등록
+                                    </Button>
+                                    <Button type="submit" color="green">
+                                        조회
+                                    </Button>
+                                    <Button
+                                        type="button"
+                                        color="gray"
+                                        onClick={handleInitialize}
+                                    >
+                                        초기화
+                                    </Button>
+                                </div>
                             </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>
+                        </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
+                        key={key}
+                        value={config.value}
+                        className={cn(
+                            activeTab === "GENERAL" &&
+                                "!mt-[0.6rem] border-none p-0 shadow-none",
+                        )}
+                    >
+                        {activeTab !== "GENERAL" ? (
+                            <DataGrid
+                                columnInfo={columnInfo}
+                                rowData={rowData}
+                                setRowData={() => {}}
+                                onRowClick={handleRowClick}
+                                isExcelImport={false}
+                            />
+                        ) : (
+                            <GeneralVerificationManagement />
+                        )}
                     </TabsContent>
                 ))}
 
diff --git a/apps/st/src/components/statistics/verification/VerificationTargetDialog.tsx b/apps/st/src/components/statistics/verification/VerificationTargetDialog.tsx
index ce9b1d26e..9e18e07a3 100644
--- a/apps/st/src/components/statistics/verification/VerificationTargetDialog.tsx
+++ b/apps/st/src/components/statistics/verification/VerificationTargetDialog.tsx
@@ -4,7 +4,6 @@ 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";
@@ -16,6 +15,14 @@ import {
     type VerificationTargetManagementFormData,
     verificationTargetManagementSchema,
 } from "@/entities/statistics/model/verification-target-management-schema";
+import {
+    Label,
+    RadioGroup,
+    RadioGroupItem,
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "@common/components";
 import {
     Button,
     Dialog,
@@ -320,7 +327,29 @@ export function VerificationTargetDialog({
                                 {tabValue !== "IMR" && (
                                     <TableRow>
                                         <TableHead className="bg-muted font-medium">
-                                            중요도 계수(μ)
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <span className="inline-flex cursor-help items-center gap-1">
+                                                        중요도 계수(μ)
+                                                        <i className="diveicon di-info-circle text-muted-foreground" />
+                                                    </span>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    <p>
+                                                        통계청(Statistics
+                                                        Canada) 등에서 기업
+                                                        단위의 주기적 조사
+                                                        데이터(수익, 매출,
+                                                        생산량 등)에서
+                                                        이상치(Outlier)를 탐지할
+                                                        때, 데이터의
+                                                        크기(규모)에 따라 이상치
+                                                        판별 기준을 다르게
+                                                        적용하기 위해 도입된
+                                                        가중치 요인
+                                                    </p>
+                                                </TooltipContent>
+                                            </Tooltip>
                                         </TableHead>
                                         <TableCell>
                                             <Controller
@@ -356,7 +385,23 @@ export function VerificationTargetDialog({
                                             />
                                         </TableCell>
                                         <TableHead className="bg-muted font-medium">
-                                            백분위수 기준값(pct)
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <span className="inline-flex cursor-help items-center gap-1">
+                                                        백분위수 기준값(pct)
+                                                        <i className="diveicon di-info-circle text-muted-foreground" />
+                                                    </span>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    <p>
+                                                        데이터가 정규분포를
+                                                        따르지 않아도, 데이터의
+                                                        하위/상위 몇 % 위치를
+                                                        기준으로 이상치 범위를
+                                                        정할지 결정
+                                                    </p>
+                                                </TooltipContent>
+                                            </Tooltip>
                                         </TableHead>
                                         <TableCell>
                                             <Controller
@@ -368,7 +413,7 @@ export function VerificationTargetDialog({
                                                             type="number"
                                                             min="0"
                                                             max="0.5"
-                                                            step="0.1"
+                                                            step="0.01"
                                                             value={
                                                                 field.value ??
                                                                 ""
@@ -385,7 +430,7 @@ export function VerificationTargetDialog({
                                                                         : null,
                                                                 )
                                                             }
-                                                            placeholder="(0 ~ 0.5, 0.1 단위)"
+                                                            placeholder="(0 ~ 0.5, 0.01 단위)"
                                                         />
                                                     </div>
                                                 )}
@@ -397,7 +442,25 @@ export function VerificationTargetDialog({
                                 {tabValue !== "IMR" && (
                                     <TableRow>
                                         <TableHead className="bg-muted font-medium">
-                                            스케일 조정 계수(A)
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <span className="inline-flex cursor-help items-center gap-1">
+                                                        스케일 조정 계수(A)
+                                                        <i className="diveicon di-info-circle text-muted-foreground" />
+                                                    </span>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    <p>
+                                                        데이터의 크기가 다른
+                                                        경우, 특히 규모가 작은
+                                                        업체가 이상치로 잘못
+                                                        탐지되는 것을 막기 위해
+                                                        변환된 비율(Symmetric
+                                                        Ratios)에 규모(size)의
+                                                        영향을 보정하는 역할
+                                                    </p>
+                                                </TooltipContent>
+                                            </Tooltip>
                                         </TableHead>
                                         <TableCell>
                                             <Controller
@@ -433,7 +496,23 @@ export function VerificationTargetDialog({
                                             />
                                         </TableCell>
                                         <TableHead className="bg-muted font-medium">
-                                            임계 계수(c)
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <span className="inline-flex cursor-help items-center gap-1">
+                                                        임계 계수(c)
+                                                        <i className="diveicon di-info-circle text-muted-foreground" />
+                                                    </span>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    <p>
+                                                        데이터의 분포가
+                                                        중앙값(median)을
+                                                        중심으로 얼마나 흩어져
+                                                        있는지를 바탕으로 이상치
+                                                        범위를 결정
+                                                    </p>
+                                                </TooltipContent>
+                                            </Tooltip>
                                         </TableHead>
                                         <TableCell>
                                             <Controller
@@ -470,6 +549,48 @@ export function VerificationTargetDialog({
                                         </TableCell>
                                     </TableRow>
                                 )}
+
+                                <TableRow>
+                                    <TableHead className="bg-muted font-medium">
+                                        사용 여부
+                                    </TableHead>
+                                    <TableCell colSpan={3}>
+                                        <Controller
+                                            name="useYn"
+                                            control={control}
+                                            render={({ field }) => (
+                                                <div className="space-y-1">
+                                                    <RadioGroup
+                                                        className="flex items-center"
+                                                        {...field}
+                                                        onValueChange={
+                                                            field.onChange
+                                                        }
+                                                    >
+                                                        <div className="flex items-center gap-1">
+                                                            <RadioGroupItem
+                                                                value="Y"
+                                                                id="useY"
+                                                            />
+                                                            <Label htmlFor="useY">
+                                                                예
+                                                            </Label>
+                                                        </div>
+                                                        <div className="flex items-center gap-1">
+                                                            <RadioGroupItem
+                                                                value="N"
+                                                                id="useN"
+                                                            />
+                                                            <Label htmlFor="useN">
+                                                                아니오
+                                                            </Label>
+                                                        </div>
+                                                    </RadioGroup>
+                                                </div>
+                                            )}
+                                        />
+                                    </TableCell>
+                                </TableRow>
                             </TableBody>
                         </Table>
 
diff --git a/apps/st/src/components/statistics/verification/detail/HbVerificationDetail.tsx b/apps/st/src/components/statistics/verification/detail/HbVerificationDetail.tsx
index 4ec8b3a39..b8e5a3cd4 100644
--- a/apps/st/src/components/statistics/verification/detail/HbVerificationDetail.tsx
+++ b/apps/st/src/components/statistics/verification/detail/HbVerificationDetail.tsx
@@ -1,6 +1,18 @@
 import React, { useState } from "react";
 
-import type { StAnlsDtlResponse } from "@/entities/statistics";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+
+import { ENDPOINT } from "@/shared/config";
+import { useMutationWrapper } from "@/shared/lib";
+import type { ApiErrorResponse } from "@/shared/model";
+import type {
+    StAnlsDtlConfirmRequest,
+    StAnlsDtlConfirmResponse,
+    StAnlsDtlResponse,
+} from "@/entities/statistics";
+import { statisticsAnalysisDetailService } from "@/entities/statistics";
 import { Button } from "@common/components";
 
 import Indicators from "./Indicators";
@@ -38,6 +50,46 @@ const HbVerificationDetail: React.FC<HbVerificationDetailProps> = ({
         vrfcTrgtNm: string;
     } | null>(null);
 
+    const queryClient = useQueryClient();
+    const { confirm } = useConfirm();
+
+    const confirmMutation = useMutationWrapper<
+        StAnlsDtlConfirmResponse,
+        AxiosError<ApiErrorResponse>,
+        StAnlsDtlConfirmRequest
+    >({
+        mutationFn: (payload) =>
+            statisticsAnalysisDetailService.confirmDetail(payload),
+        onSuccess: async () => {
+            setCheckedSns([]);
+
+            await Promise.all([
+                queryClient.invalidateQueries({
+                    queryKey: [
+                        ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_DTL,
+                        "list",
+                        anlsSn,
+                    ],
+                }),
+                queryClient.invalidateQueries({
+                    queryKey: [ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST],
+                }),
+            ]);
+        },
+    });
+
+    const handleConfirmClick = async () => {
+        if (checkedSns.length === 0) return;
+
+        if (!(await confirm("검증확정 처리하시겠습니까?"))) return;
+
+        const vrfcTrgtSnList = checkedSns
+            .map((value) => Number(value))
+            .filter((value) => !Number.isNaN(value));
+
+        confirmMutation.mutate({ anlsSn, vrfcTrgtSnList });
+    };
+
     const handleTargetSelect = (row: StAnlsDtlResponse) => {
         setSelectedVrfcTrgtSn(String(row.vrfcTrgtSn));
         setSelectedTargetInfo({
@@ -70,7 +122,14 @@ const HbVerificationDetail: React.FC<HbVerificationDetailProps> = ({
                         검증 상세
                     </h2>
                 </div>
-                <Button disabled={checkedSns.length === 0}>검증확정</Button>
+                <Button
+                    disabled={
+                        checkedSns.length === 0 || confirmMutation.isPending
+                    }
+                    onClick={handleConfirmClick}
+                >
+                    검증확정
+                </Button>
             </div>
 
             <div className="flex flex-col gap-4">
@@ -88,8 +147,8 @@ const HbVerificationDetail: React.FC<HbVerificationDetailProps> = ({
                     <h3 className="p-4 pb-0 text-[1.8rem] font-bold text-title">
                         검증 결과 상세
                     </h3>
-                    <div className="flex">
-                        <div className="flex-[0.5] p-4">
+                    <div className="grid grid-cols-1 lg:grid-cols-2">
+                        <div className="flex-1 p-4">
                             <RegionalGrid
                                 anlsSn={anlsSn}
                                 vrfcTrgtSn={selectedVrfcTrgtSn}
@@ -102,7 +161,7 @@ const HbVerificationDetail: React.FC<HbVerificationDetailProps> = ({
                                 appliedFilter={appliedFilter}
                             />
                         </div>
-                        <div className="flex flex-[0.5] flex-col gap-4 p-4 pt-[4.8rem]">
+                        <div className="flex flex-col gap-4 p-4 pt-[4.8rem]">
                             <Indicators
                                 anlsSn={anlsSn}
                                 vrfcTrgtSn={selectedVrfcTrgtSn}
diff --git a/apps/st/src/components/statistics/verification/detail/Indicators.tsx b/apps/st/src/components/statistics/verification/detail/Indicators.tsx
index f311e1667..30cc56552 100644
--- a/apps/st/src/components/statistics/verification/detail/Indicators.tsx
+++ b/apps/st/src/components/statistics/verification/detail/Indicators.tsx
@@ -65,21 +65,15 @@ const Indicators: React.FC<IndicatorsProps> = ({ anlsSn, vrfcTrgtSn }) => {
 
     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="R 중위수" value={dtl?.rtCnterVl} />
+            <IndicatorItem label="E 중위수" value={dtl?.lastTrsfScrCnterVl} />
+            <IndicatorItem label="하위 기준값" value={dtl?.lastTrsfScrLlmtVl} />
             <IndicatorItem
-                label="(E_m)E 중위수"
-                value={dtl?.lastTrsfScrCnterVl}
-            />
-            <IndicatorItem
-                label="(E_l)E 하한값"
-                value={dtl?.lastTrsfScrLlmtVl}
-            />
-            <IndicatorItem
-                label="(E_u)E 상한값"
+                label="상위 기준값"
                 value={dtl?.lastTrsfScrUplmtVl}
             />
-            <IndicatorItem label="E_D_L" value={dtl?.llmtVl} />
-            <IndicatorItem label="E_D_U" value={dtl?.uplmtVl} />
+            <IndicatorItem label="이상치 하한값" value={dtl?.llmtVl} />
+            <IndicatorItem label="이상치 상한값" value={dtl?.uplmtVl} />
             <IndicatorItem label="이상치 하한선" value={dtl?.otlrLlmtLine} />
             <IndicatorItem label="이상치 상한선" value={dtl?.otlrUplmtLine} />
         </div>
diff --git a/apps/st/src/components/statistics/verification/detail/RegionalGrid.tsx b/apps/st/src/components/statistics/verification/detail/RegionalGrid.tsx
index 8f5c420da..eeea43b3a 100644
--- a/apps/st/src/components/statistics/verification/detail/RegionalGrid.tsx
+++ b/apps/st/src/components/statistics/verification/detail/RegionalGrid.tsx
@@ -46,11 +46,6 @@ const RegionalGrid: React.FC<RegionalGridProps> = ({
     selectedRowId,
     appliedFilter,
 }) => {
-    const [selectedSido, setSelectedSido] = useState<string>("");
-    const [selectedGugun, setSelectedGugun] = useState<string>("");
-    const [selectedStatus, setSelectedStatus] = useState<string>("");
-    const [showAllOnEmptyFilter, setShowAllOnEmptyFilter] =
-        useState<boolean>(true);
     const [isDownloading, setIsDownloading] = useState<boolean>(false);
 
     const [gridRowData, setGridRowData] = useState<
@@ -58,7 +53,7 @@ const RegionalGrid: React.FC<RegionalGridProps> = ({
     >([]);
 
     const { data: sidoData } = useStAnlsSidoCombo();
-    const { data: gugunData } = useStAnlsSigunguCombo(selectedSido);
+    const { data: gugunData } = useStAnlsSigunguCombo(appliedFilter.sido ?? "");
     const sidoOptions = sidoData ?? EMPTY_ADST_LIST;
     const gugunOptions = gugunData ?? EMPTY_ADST_LIST;
 
@@ -69,14 +64,7 @@ const RegionalGrid: React.FC<RegionalGridProps> = ({
 
     const rowData = useMemo(() => {
         let data = (resultData?.content ?? []) as StAnlsRsltResponse[];
-
-        if (
-            !appliedFilter.sido &&
-            !appliedFilter.gugun &&
-            !appliedFilter.status
-        ) {
-            data = showAllOnEmptyFilter ? data : [];
-        } else {
+        {
             const sidoCd = appliedFilter.sido;
             if (sidoCd) {
                 data = data.filter((item) =>
@@ -116,32 +104,18 @@ const RegionalGrid: React.FC<RegionalGridProps> = ({
         }));
 
         return mappedData;
-    }, [resultData, appliedFilter, showAllOnEmptyFilter]);
+    }, [resultData, appliedFilter]);
 
     const handleSidoChange = (val: string) => {
-        setSelectedSido(val);
-        setSelectedGugun("");
-    };
-
-    const handleSearch = () => {
-        onFilterChange({
-            sido: selectedSido,
-            gugun: selectedGugun,
-            status: selectedStatus,
-        });
-        setShowAllOnEmptyFilter(false);
+        onFilterChange({ ...appliedFilter, sido: val, gugun: "" });
     };
 
     const handleReset = () => {
-        setSelectedSido("");
-        setSelectedGugun("");
-        setSelectedStatus("");
         onFilterChange({
             sido: "",
             gugun: "",
             status: "",
         });
-        setShowAllOnEmptyFilter(true);
     };
 
     const handleDownload = async () => {
@@ -182,7 +156,7 @@ const RegionalGrid: React.FC<RegionalGridProps> = ({
             <div className="flex justify-between">
                 <div className="flex items-center gap-2">
                     <Select
-                        value={selectedSido || ""}
+                        value={appliedFilter.sido || ""}
                         onValueChange={handleSidoChange}
                     >
                         <SelectTrigger className="w-[12rem] bg-white">
@@ -197,9 +171,11 @@ const RegionalGrid: React.FC<RegionalGridProps> = ({
                         </SelectContent>
                     </Select>
                     <Select
-                        value={selectedGugun}
-                        onValueChange={setSelectedGugun}
-                        disabled={!selectedSido}
+                        value={appliedFilter.gugun || ""}
+                        onValueChange={(val) =>
+                            onFilterChange({ ...appliedFilter, gugun: val })
+                        }
+                        disabled={!appliedFilter.sido}
                     >
                         <SelectTrigger className="w-[12rem] bg-white">
                             <SelectValue placeholder="시군구 선택" />
@@ -213,8 +189,10 @@ const RegionalGrid: React.FC<RegionalGridProps> = ({
                         </SelectContent>
                     </Select>
                     <Select
-                        value={selectedStatus}
-                        onValueChange={setSelectedStatus}
+                        value={appliedFilter.status || ""}
+                        onValueChange={(val) =>
+                            onFilterChange({ ...appliedFilter, status: val })
+                        }
                     >
                         <SelectTrigger className="w-[10rem] bg-white">
                             <SelectValue placeholder="상태 선택" />
@@ -231,7 +209,7 @@ const RegionalGrid: React.FC<RegionalGridProps> = ({
                     <Button color="white" onClick={handleReset}>
                         초기화
                     </Button>
-                    <Button onClick={handleSearch}>조회</Button>
+                    {/* <Button onClick={handleSearch}>조회</Button> */}
                     <Button
                         color="green"
                         onClick={handleDownload}
diff --git a/apps/st/src/components/statistics/verification/detail/ScatterChart.tsx b/apps/st/src/components/statistics/verification/detail/ScatterChart.tsx
index abba89ed1..551d462e9 100644
--- a/apps/st/src/components/statistics/verification/detail/ScatterChart.tsx
+++ b/apps/st/src/components/statistics/verification/detail/ScatterChart.tsx
@@ -52,6 +52,32 @@ interface DataPoint extends LinePoint {
     item: StAnlsRsltResponse;
 }
 
+/** 모든 점의 x·y를 합쳐 두 축이 같은 [min, max] 구간을 쓰도록 할 때 사용 */
+function getUnifiedLinearRange(data: ChartData<"scatter">): {
+    min: number;
+    max: number;
+} | null {
+    const values: number[] = [];
+    for (const ds of data.datasets) {
+        for (const pt of ds.data) {
+            if (pt && typeof pt === "object" && "x" in pt && "y" in pt) {
+                const p = pt as LinePoint;
+                if (Number.isFinite(p.x)) values.push(p.x);
+                if (Number.isFinite(p.y)) values.push(p.y);
+            }
+        }
+    }
+    if (values.length === 0) return null;
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    if (min === max) {
+        const pad = Math.abs(min) * 0.05 || 1;
+        return { min: min - pad, max: max + pad };
+    }
+    const padding = (max - min) * 0.02;
+    return { min: min - padding, max: max + padding };
+}
+
 function matchesAdmdstFilter(
     admdstCd: string,
     sidoCd: string | null | undefined,
@@ -132,10 +158,12 @@ const ScatterChart: React.FC<ScatterChartProps> = ({
                 item,
             };
 
-            if (item.otlrYnCd === "0") {
-                normalPoints.push(pt);
-            } else {
+            if (item.otlrYnCd === "2") {
+                return;
+            } else if (item.otlrYnCd === "1") {
                 outlierPoints.push(pt);
+            } else {
+                normalPoints.push(pt);
             }
         });
 
@@ -172,6 +200,8 @@ const ScatterChart: React.FC<ScatterChartProps> = ({
             ],
         };
 
+        const axisRange = getUnifiedLinearRange(data);
+
         const options: ChartOptions<"scatter"> = {
             responsive: true,
             maintainAspectRatio: false,
@@ -230,6 +260,8 @@ const ScatterChart: React.FC<ScatterChartProps> = ({
                 x: {
                     type: "linear",
                     position: "bottom",
+                    min: axisRange?.min,
+                    max: axisRange?.max,
                     title: {
                         display: true,
                         text: "이전년도 값",
@@ -237,6 +269,8 @@ const ScatterChart: React.FC<ScatterChartProps> = ({
                 },
                 y: {
                     type: "linear",
+                    min: axisRange?.min,
+                    max: axisRange?.max,
                     title: {
                         display: true,
                         text: "당해년도 값",
@@ -267,7 +301,7 @@ const ScatterChart: React.FC<ScatterChartProps> = ({
                     </div>
                 </div>
             ) : chartConfig ? (
-                <div className="h-[48rem] w-full">
+                <div className="size-[40rem]">
                     <Scatter
                         data={chartConfig.data}
                         options={chartConfig.options}
diff --git a/apps/st/src/components/statistics/verification/detail/VerificationList.tsx b/apps/st/src/components/statistics/verification/detail/VerificationList.tsx
index 3966b3131..339265307 100644
--- a/apps/st/src/components/statistics/verification/detail/VerificationList.tsx
+++ b/apps/st/src/components/statistics/verification/detail/VerificationList.tsx
@@ -6,7 +6,7 @@ import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { ENDPOINT } from "@/shared/config";
 import type { StAnlsDtlResponse } from "@/entities/statistics";
 import { getVerificationListColumns } from "@/entities/statistics";
-import { stAnlsDtlApi } from "@/entities/statistics/api/statistics-analysis-detail-api";
+import { statisticsAnalysisDetailService } from "@/entities/statistics/api/statistics-analysis-detail-service";
 import { DataTable } from "@common/components";
 
 interface VerificationListProps {
@@ -27,7 +27,11 @@ const VerificationList: React.FC<VerificationListProps> = ({
     const { data: detailData, isLoading } = useQuery({
         queryKey: [ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_DTL, "list", anlsSn],
         queryFn: () =>
-            stAnlsDtlApi.getDetailList({ anlsSn, page: 0, size: 100 }),
+            statisticsAnalysisDetailService.getDetailList({
+                anlsSn,
+                page: 0,
+                size: 100,
+            }),
         enabled: !!anlsSn,
     });
 
@@ -82,7 +86,7 @@ const VerificationList: React.FC<VerificationListProps> = ({
                     variant="secondary"
                     onRowClick={handleRowClick}
                     viewPagination={false}
-                    className="whitespace-nowrap text-[1.2rem] [&_td]:!px-2 [&_th]:!px-2"
+                    className="text-[1.2rem] [&_td]:!px-2 [&_th]:!px-2"
                 />
             )}
         </div>
diff --git a/apps/st/src/components/statistics/verification/generalVerification/CopyDialog.tsx b/apps/st/src/components/statistics/verification/generalVerification/CopyDialog.tsx
index b0e81c08f..556d3f54a 100644
--- a/apps/st/src/components/statistics/verification/generalVerification/CopyDialog.tsx
+++ b/apps/st/src/components/statistics/verification/generalVerification/CopyDialog.tsx
@@ -47,8 +47,7 @@ const CopyDialog = ({
 
     const handleChangeCode = (value: string) => {
         if (row?.trgtStatsCd === value) {
-            alert('원본과 동일한 통계항목으로 복사할 수 없습니다.');
-            return;
+            alert('원본과 동일한 통계항목으로 복사할 경우\n복사 완료 후 검증 분류를 꼭 수정해주세요.');
         }
 
         setSelectedCode(value);
diff --git a/apps/st/src/components/statistics/verification/generalVerification/DetailComponent.tsx b/apps/st/src/components/statistics/verification/generalVerification/DetailComponent.tsx
index 0f9da9e01..1643a9f89 100644
--- a/apps/st/src/components/statistics/verification/generalVerification/DetailComponent.tsx
+++ b/apps/st/src/components/statistics/verification/generalVerification/DetailComponent.tsx
@@ -1,26 +1,26 @@
 import { useEffect, useRef, useState } from 'react';
 
+import { useConfirm } from '@frontend-opensource/use-react-hooks';
+
+import { useAlertStore } from '@/shared/lib';
 import { NoData } from '@/shared/ui/no-data';
+import { generalverificationApiService } from '@/entities/statistics/api/general-verification-service';
+import type { VerifyDetailData, VerifyDetailResponseDto } from '@/entities/statistics/model/general-verification-interface';
 import {
     Button,
-    Input,
     Table,
     TableBody,
     TableCell,
     TableHead,
     TableRow,
 } from "@common/components";
-import FormulaComponents from './FormulaComponents';
 import { LoadingWithAnimation } from '@common/components';
-import FomulaDialog from './FomulaDialog';
 
-import { useAlertStore } from '@/shared/lib';
-import { useConfirm } from '@frontend-opensource/use-react-hooks';
-
-import { generalverificationApiService } from '@/entities/statistics/api/general-verification-service';
-import type { VerifyDetailData, VerifyDetailResponseDto } from '@/entities/statistics/model/general-verification-interface';
 import { getUserInfo } from '../../../../../../../packages/common/components/src/api';
 
+import FomulaDialog from './FomulaDialog';
+import FormulaComponents from './FormulaComponents';
+
 interface DetailComponentProps {
     selectedVrfcRow: number | null;
 }
@@ -108,19 +108,16 @@ const DetailComponent = ({ selectedVrfcRow }: DetailComponentProps) => {
             }
         }
 
-        // 여러 항목일 때 마지막이 단항 연산자면: 이전 항목들 연산자는 무조건 null
+        // 여러 항목일 때 마지막이 단항 연산자면:
+        // 이전 항목들의 연산자는 '?'일 때만 등록 허용 (자동 null 보정하지 않음)
         if (rows.length > 1 && lastIsUnary) {
-            for (let i = 0; i < rows.length - 1; i++) {
-                const prev = rows[i];
-                if (prev) prev.cmprOpert = null;
-            }
-            setFormulaList((prev) => {
-                if (prev.length <= 1) return prev;
-                const next = prev.map((item, idx) =>
-                    idx < prev.length - 1 && item != null ? { ...item, cmprOpert: null } : item,
+            const invalidUnaryPrevIdx = rows.slice(0, -1).findIndex((r) => r.cmprOpert !== '?');
+            if (invalidUnaryPrevIdx !== -1) {
+                alert(
+                    `마지막 항목이 단항 연산자(is_null, !is_null, floor)일 때는 이전 항목의 연산자를 '?'로 선택해야 합니다.\n(순번: ${invalidUnaryPrevIdx + 1})`,
                 );
-                return next;
-            });
+                return;
+            }
         }
 
         // 마지막 항목의 연산자는 (단항 연산자 케이스 제외) 무조건 null 처리
diff --git a/apps/st/src/components/statistics/verification/generalVerification/FomulaDialog.tsx b/apps/st/src/components/statistics/verification/generalVerification/FomulaDialog.tsx
index a559008d0..b2873d155 100644
--- a/apps/st/src/components/statistics/verification/generalVerification/FomulaDialog.tsx
+++ b/apps/st/src/components/statistics/verification/generalVerification/FomulaDialog.tsx
@@ -10,6 +10,7 @@ import {
     DialogClose,
     Textarea,
     Skeleton,
+    Input,
 } from "@common/components";
 import { CodeSelect } from "@/entities/code";
 
@@ -41,6 +42,9 @@ const FomulaDialog = ({ open, onOpenChange, data, trgtStatsCd, trgtStatsNm, onCo
     const [showCommonColumns, setShowCommonColumns] = useState<boolean>(true);
     const [showTargetColumns, setShowTargetColumns] = useState<boolean>(true);
     const [showRefColumns, setShowRefColumns] = useState<boolean>(true);
+    const [commonColumnSearchValue, setCommonColumnSearchValue] = useState<string>('');
+    const [targetColumnSearchValue, setTargetColumnSearchValue] = useState<string>('');
+    const [refColumnSearchValue, setRefColumnSearchValue] = useState<string>('');
     /** 참조 통계 - 다이얼로그 내부에서만 사용. 열 때마다 해당 행(data)의 저장값으로 초기화, 저장 시에만 부모에 반영 예정 */
     const [refStatsCdLocal, setRefStatsCdLocal] = useState<string>('');
     /** 수식 = 토큰 배열. 한글명 중복 시 출처(공통/대상/참조)별 engColNm 보존 */
@@ -207,7 +211,7 @@ const FomulaDialog = ({ open, onOpenChange, data, trgtStatsCd, trgtStatsNm, onCo
                     refStatsCd: data.refStatsCd,
                 });
             }
-            
+
 
             if (response?.status === 'success') {
                 setColumnInfo(response.data);
@@ -359,10 +363,57 @@ const FomulaDialog = ({ open, onOpenChange, data, trgtStatsCd, trgtStatsNm, onCo
             setFormulaSaveError(null);
             setSelectedColumnInfo(null);
             setRefStatsCdLocal('');
+            setCommonColumnSearchValue('');
+            setTargetColumnSearchValue('');
+            setRefColumnSearchValue('');
         }
         onOpenChange?.(nextOpen);
     };
 
+    const handleSearchColumn = (value: string, type: string) => {
+        if (type === 'common') {
+            setCommonColumnSearchValue(value);
+        } else if (type === 'target') {
+            setTargetColumnSearchValue(value);
+        } else {
+            setRefColumnSearchValue(value);
+        }
+    };
+
+    const normalizeSearch = (v: string) => v.replace(/\s+/g, "").toLowerCase();
+
+    const commonSearch = normalizeSearch(commonColumnSearchValue);
+    const commonColumns = columnInfo?.commonColumnInfo ?? [];
+    const filteredCommonColumns =
+        commonSearch.length > 0
+            ? commonColumns.filter((c) => {
+                const korn = normalizeSearch(c.kornColNm ?? '');
+                const eng = normalizeSearch(c.engColNm ?? '');
+                return korn.includes(commonSearch) || eng.includes(commonSearch);
+            })
+            : commonColumns;
+
+    const targetSearch = normalizeSearch(targetColumnSearchValue);
+    const targetColumns = columnInfo?.targetColumnInfo?.colList ?? [];
+    const filteredTargetColumns =
+        targetSearch.length > 0
+            ? targetColumns.filter((t) => {
+                const korn = normalizeSearch(t.kornColNm ?? '');
+                const eng = normalizeSearch(t.engColNm ?? '');
+                return korn.includes(targetSearch) || eng.includes(targetSearch);
+            })
+            : targetColumns;
+
+    const refSearch = normalizeSearch(refColumnSearchValue);
+    const filterdRefColumns =
+        refSearch.length > 0
+            ? refColList.filter((r) => {
+                const korn = normalizeSearch(r.kornColNm ?? '');
+                const eng = normalizeSearch(r.engColNm ?? '');
+                return korn.includes(refSearch) || eng.includes(refSearch);
+            })
+            : refColList;
+
     return (
         <Dialog open={open} onOpenChange={handleOpenChange}>
             <DialogContent aria-describedby={undefined} className="max-w-[100rem] w-full max-h-[90%] overflow-auto">
@@ -446,21 +497,30 @@ const FomulaDialog = ({ open, onOpenChange, data, trgtStatsCd, trgtStatsNm, onCo
                                 {showCommonColumns ? "접기" : "펼치기"}
                             </Button>
                         </div>
+                        {showCommonColumns &&
+                            <div className="mb-2">
+                                <Input
+                                    className="w-[20rem] rounded-sm !text-[1.3rem] focus-visible:ring-0 focus-visible:ring-offset-0"
+                                    value={commonColumnSearchValue}
+                                    onChange={(e) => handleSearchColumn(e.target.value, 'common')}
+                                    placeholder="검색어를 입력하세요."
+                                />
+                            </div>}
                         {showCommonColumns ? (
                             <div className="flex flex-wrap gap-2">
                                 {columnInfo?.commonColumnInfo?.length && columnInfo.commonColumnInfo.length > 0 ?
-                                    columnInfo.commonColumnInfo.map((c) => (
-                                            <Button
-                                                key={c.engColNm}
-                                                type="button"
-                                                value={c.engColNm}
-                                                size="sm"
-                                                color="lightGray"
-                                                onClick={() => handleFormulaColumn(c.kornColNm, c.engColNm)}
-                                            >
-                                                {c.kornColNm}
-                                            </Button>
-                                        ))
+                                    filteredCommonColumns.map((c) => (
+                                        <Button
+                                            key={c.engColNm}
+                                            type="button"
+                                            value={c.engColNm}
+                                            size="sm"
+                                            color="lightGray"
+                                            onClick={() => handleFormulaColumn(c.kornColNm, c.engColNm)}
+                                        >
+                                            {c.kornColNm}
+                                        </Button>
+                                    ))
                                     :
                                     <Skeleton className="h-[12rem] w-full rounded-xl" />
                                 }
@@ -479,20 +539,30 @@ const FomulaDialog = ({ open, onOpenChange, data, trgtStatsCd, trgtStatsNm, onCo
                                 {showTargetColumns ? "접기" : "펼치기"}
                             </Button>
                         </div>
+                        {showTargetColumns &&
+                            <div className="mb-2">
+                                <Input
+                                    className="w-[20rem] rounded-sm !text-[1.3rem] focus-visible:ring-0 focus-visible:ring-offset-0"
+                                    value={targetColumnSearchValue}
+                                    onChange={(e) => handleSearchColumn(e.target.value, 'target')}
+                                    placeholder="검색어를 입력하세요."
+                                />
+                            </div>
+                        }
                         {showTargetColumns ? (
                             <div className="flex flex-wrap gap-2">
                                 {columnInfo?.targetColumnInfo?.colList.length && columnInfo.targetColumnInfo.colList.length > 0 ?
-                                    columnInfo.targetColumnInfo.colList.map((t) => (
-                                            <Button
-                                                key={t.engColNm}
-                                                type="button"
-                                                value={t.engColNm}
-                                                size="sm"
-                                                onClick={() => handleFormulaColumn(t.kornColNm, t.engColNm)}
-                                            >
-                                                {t.kornColNm}
-                                            </Button>
-                                        ))
+                                    filteredTargetColumns.map((t) => (
+                                        <Button
+                                            key={t.engColNm}
+                                            type="button"
+                                            value={t.engColNm}
+                                            size="sm"
+                                            onClick={() => handleFormulaColumn(t.kornColNm, t.engColNm)}
+                                        >
+                                            {t.kornColNm}
+                                        </Button>
+                                    ))
                                     :
                                     <Skeleton className="h-[12rem] w-full rounded-xl" />
                                 }
@@ -529,10 +599,20 @@ const FomulaDialog = ({ open, onOpenChange, data, trgtStatsCd, trgtStatsNm, onCo
                                 {refStatsChangeNotice}
                             </p>
                         )}
+                        {(refStatsCdLocal && showRefColumns) &&
+                            <div className="mb-2">
+                                <Input
+                                    className="w-[20rem] rounded-sm !text-[1.3rem] focus-visible:ring-0 focus-visible:ring-offset-0"
+                                    value={refColumnSearchValue}
+                                    onChange={(e) => handleSearchColumn(e.target.value, 'ref')}
+                                    placeholder="검색어를 입력하세요."
+                                />
+                            </div>
+                        }
                         {showRefColumns ? (
                             <div className="flex flex-wrap gap-2">
-                                {(refColList?.length ?? 0) > 0 ?
-                                    refColList.map((r) => (
+                                {(filterdRefColumns?.length ?? 0) > 0 ?
+                                    filterdRefColumns.map((r) => (
                                         <Button
                                             key={r.engColNm}
                                             type="button"
diff --git a/apps/st/src/components/statistics/verification/generalVerification/RegistDialog.tsx b/apps/st/src/components/statistics/verification/generalVerification/RegistDialog.tsx
index ff83543be..1aa0de71f 100644
--- a/apps/st/src/components/statistics/verification/generalVerification/RegistDialog.tsx
+++ b/apps/st/src/components/statistics/verification/generalVerification/RegistDialog.tsx
@@ -244,6 +244,7 @@ const RegistDialog = memo(
                         vrfcNm: data.vrfcNm,
                         vrfcClsfCd: data.vrfcClsfCd,
                         dcptDigtCnt: data.dcptDigtCnt,
+                        useYn: data.useYn,
                         ...(data.dcptDigtCnt === 0
                             ? {}
                             : { dcptPrcsMthCd: data.dcptPrcsMthCd }),
diff --git a/apps/st/src/components/type/DataGrid.type.ts b/apps/st/src/components/type/DataGrid.type.ts
index 18523b0c4..6a77cde08 100644
--- a/apps/st/src/components/type/DataGrid.type.ts
+++ b/apps/st/src/components/type/DataGrid.type.ts
@@ -1,13 +1,23 @@
 import React from "react";
-import { ValueType } from "realgrid";
-import { type SewerageSupplyRateStatusInfo } from "@/entities/statistics/model/statistics-sewage-supply-rate-input-interface";
+
+import { GridFitStyle, ValueType } from "realgrid";
+import type { RealGridReact } from "realgrid-react";
 
 // RealGrid 타입 정의
+
+/** DataGrid 상단 진행상황/제출일/담당자 표시에 사용 (보급률·하수관로 등 공통) */
+export type DataGridStatusBannerInfo = {
+    laeSbmsnSttsCd: string | null;
+    laeSbmsnYmd: string | null;
+    laePicNm: string | null;
+    laePicTelNo: string | null;
+    rjctOpnnCn: string | null;
+};
 /** setColumns에 전달하는 컬럼 정보 (footer 배열/단일 객체 포함) */
 export type RealGridColumnInfo = {
     name: string;
     fieldName: string;
-    header: { text: string };
+    header: { text: string; tooltip?: string; showTooltip?: boolean; template?: string };
     editable?: boolean;
     valueType?: import("realgrid").ValueType;
     dataFormat?: string;
@@ -106,7 +116,34 @@ export type DataFieldValueCallback = (
 
 /** 계산 필드 설정 (computedFieldCallbacks.ts 참고) */
 export type ComputedFieldConfig =
-    | { fields: string[]; type: "sum" | "avg" }
+    | { fields: string[]; type: "sum" | "avg" | "max" | "difference" | "quotient" }
+    | {
+        minuendFields: string[];
+        subtrahendFields: string[];
+        type: "differenceOfSums";
+    }
+    | {
+        firstSumFields: string[];
+        secondSumFields: string[];
+        type: "halfSumOfSums";
+    }
+    | {
+        firstHalfSum: { firstSumFields: string[]; secondSumFields: string[] };
+        secondHalfSum: { firstSumFields: string[]; secondSumFields: string[] };
+        type: "sumOfTwoHalfSumOfSums";
+    }
+    | {
+        baseField: string;
+        sumFields: string[];
+        type: "maxOfFieldAndSum";
+    }
+    | {
+        groups: Array<{
+            baseField: string;
+            sumFields: string[];
+        }>;
+        type: "sumOfMaxOfFieldAndSumGroups";
+    }
     | {
         numeratorFields: string[];
         denominatorFields: string[];
@@ -122,17 +159,40 @@ export type ComputedFieldConfig =
         denominatorFields: string[];
         thirdFields: string[];
         type: "swrgInstlrtRate";
+    }
+    | {
+        pumpGroups: Array<{
+            pumpCntField: string;
+            rsrvPumpCntField: string;
+            perPpqtyField: string;
+        }>;
+        type: "pumpGrossPpqty";
+    }
+    | {
+        inflwField: string;
+        dschgField: string;
+        type: "bodPrcsRt";
+    }
+    | {
+        /** (quotient[0]/quotient[1]) / (denominatorQuotient[0]/denominatorQuotient[1]) × 100 */
+        numeratorQuotient: [string, string];
+        denominatorQuotient: [string, string];
+        type: "quotientRatioPercent";
     };
 
 export type ColumnConfig = {
     name: string;
     fieldName: string;
-    header: { text: string };
+    header: { text: string; tooltip?: string; showTooltip?: boolean; template?: string };
+    /** 헤더 hover 시 보여줄 컬럼 가이드 문구 */
+    tooltip?: string;
     /** 계산 필드: fields 합계/평균 등. valueCallback으로 dataProvider.setFields 시 전달 */
     computed?: ComputedFieldConfig;
     editable?: boolean; // 셀 편집 가능 여부
     /** 그리드에서 컬럼 숨김 (수식용 필드 등) */
     visible?: boolean;
+    /** true이면 엑셀보내기에서 제외 (화면에는 표시 가능) */
+    excludeFromExcelExport?: boolean;
     /** 컬럼 너비 (px). 지정 시 ... 생략 없이 텍스트 표시에 유리 */
     width?: number;
     /** 셀에 적용할 CSS 클래스명 (예: 'rg-cell-readonly', 'rg-cell-total') */
@@ -144,6 +204,26 @@ export type ColumnConfig = {
     sortPreserveGroupOrder?: SortPreserveGroupOrder;
     valueType?: ValueType;
     dataFormat?: string;
+    /** RealGrid 드롭다운 목록 값 (예: 시군구 `gugun`) */
+    values?: string[];
+    /** RealGrid 드롭다운 표시 라벨 (`values`와 동일 길이 권장) */
+    labels?: string[];
+    /** true이면 셀에 라벨 표시 */
+    lookupDisplay?: boolean;
+    /** RealGrid 날짜 표시 형식 (예: `yyyy-MM-dd`) */
+    datetimeFormat?: string;
+    /** RealGrid 셀 편집기 */
+    editor?: {
+        type?: "dropdown" | "list" | "date";
+        domainOnly?: boolean;
+        textReadOnly?: boolean;
+        commitOnSelect?: boolean;
+        dropDownWhenClick?: boolean;
+        showToday?: boolean;
+        datetimeFormat?: string;
+        values?: string[];
+        labels?: string[];
+    };
     footer?:
     | {
         text?: string;
@@ -183,7 +263,7 @@ export type ColumnLayoutItem =
     | {
         name: string;
         hideChildHeaders?: boolean;
-        header: { text: string };
+        header: { text: string; tooltip?: string; showTooltip?: boolean; template?: string };
         items: (string | ColumnLayoutItem)[];
         footerUserSpans?: FooterUserSpan[]; // footer 병합 설정
     }
@@ -197,6 +277,15 @@ export type ColumnInfo = {
     columnLayout: ColumnLayoutItem[];
 };
 
+export type GridTopButtonConfig = {
+    visible?: boolean;
+    text: string;
+    onClick?: (helpers: {
+        openDialog: (title?: string) => void;
+        closeDialog: () => void;
+    }) => void;
+};
+
 export type ColumnInfoList = {
     tabKey: string; // 탭을 식별하는 고유 키 (필수), server(api)에 전송할 변수 값
     columns?: ColumnConfig[]; // 일반 그리드용 (isSplitGrid가 false일 때)
@@ -204,6 +293,7 @@ export type ColumnInfoList = {
     rowStartNum?: number;
     fixedColumns?: number;
     tabLabel?: string; // 탭에 표시될 레이블
+    topButton?: GridTopButtonConfig; // 탭 상단 커스텀 버튼
     isSplitGrid?: boolean; // 5:5 분리형 그리드 유무
     left?: ColumnInfoList; // SplitDataGrid용 왼쪽 그리드 정보
     right?: ColumnInfoList; // SplitDataGrid용 오른쪽 그리드 정보
@@ -216,15 +306,45 @@ export type CellStyleCallbackParams = {
     row: Record<string, string | number>;
 };
 
-export type CellStyleCallback = (params: CellStyleCallbackParams) => string | undefined;
+export type CellStyleCallback = (
+    params: CellStyleCallbackParams,
+) => string | undefined;
 
 /** 셀 hover 시 툴팁 문구 (반환 시 해당 문구 표시, 검증 오류 메시지 등) */
-export type CellTooltipCallbackParams = { row: Record<string, string | number>; fieldName: string };
-export type CellTooltipCallback = (params: CellTooltipCallbackParams) => string | undefined;
+export type CellTooltipCallbackParams = {
+    row: Record<string, string | number>;
+    fieldName: string;
+};
+export type CellTooltipCallback = (
+    params: CellTooltipCallbackParams,
+) => string | undefined;
+
+/** 셀 편집 완료 시 호출되는 콜백 (RealGrid onEditRowChanged) */
+export type CellEditedCallbackParams = {
+    itemIndex: number;
+    fieldName: string;
+    oldValue: string | number;
+    newValue: string | number;
+};
+export type CellEditedCallback = (
+    params: CellEditedCallbackParams,
+) => void;
+
+/** 데이터 셀 클릭 시 컬럼(필드)까지 전달 — 특정 컬럼만 반응할 때 사용 */
+export type DataCellClickCallbackParams = {
+    row: Record<string, string | number>;
+    fieldName: string;
+    itemIndex: number;
+};
+export type DataCellClickCallback = (
+    params: DataCellClickCallbackParams,
+) => void;
 
 export type DataGridProps = {
     columnInfo: ColumnInfo;
     rowStartNum?: number; // 헤더 행 개수 (1부터 시작, 예: 2면 1행과 2행까지 헤더로 간주)
+    /** 있으면보내기 파일명: `{메뉴명}_{suffix}.xlsx` (TabDataGrid의 탭 라벨 접미사와 동일) */
+    excelExportFileSuffix?: string;
     isExcelImport?: boolean; // 엑셀 가져오기 유무
     isExcelExport?: boolean;
     onRowsChange?: (rows: Record<string, string | number>[]) => void;
@@ -238,16 +358,38 @@ export type DataGridProps = {
     cellStyleCallback?: CellStyleCallback;
     /** 셀 hover 시 툴팁 문구 (예: verificationResult의 rsnExpln) */
     cellTooltipCallback?: CellTooltipCallback;
+    /** 셀 편집 완료 시 호출 (RealGrid onEditRowChanged) */
+    onCellEdited?: CellEditedCallback;
     /** 저장 등 시점에 그리드 현재 데이터를 가져올 수 있도록 할당 (편집 반영된 값) */
     getGridDataRef?: {
         current: (() => Record<string, string | number>[]) | null;
     };
+    /** 외부에서 gridRef에 직접 접근하기 위한 ref (setRows/addRows/setValue 직접 호출용) */
+    getGridRef?: React.MutableRefObject<RealGridReact | null>;
     onRowClick?: (rowData: Record<string, string | number>) => void; // 행 클릭 이벤트
-    statusInfo?: SewerageSupplyRateStatusInfo | null;
+    /** 데이터 셀 클릭 시 행 + 클릭한 필드명 전달 (`onRowClick`과 함께 쓸 수 있음) */
+    onDataCellClick?: DataCellClickCallback;
+    /** CheckBar 행 체크 변경 */
+    onItemChecked?: (itemIndex: number, checked: boolean) => void;
+    /** CheckBar 헤더 전체 선택/해제 */
+    onItemAllChecked?: (checked: boolean) => void;
+    onScrollToBottom?: () => void;
+    statusInfo?: DataGridStatusBannerInfo | null;
     /** 강조 및 스크롤할 행의 ID */
     highlightedRowId?: string | number | null;
     /** ID로 사용할 필드명 (기본값: 'id') */
     idFieldName?: string;
+    /** 전체 정렬 기능 on/off (기본값: false) */
+    enableSort?: boolean;
+    /** CompactDataGrid 전용: true면 래퍼 너비 w-full (다이얼로그 등 분할 열 안에서 사용) */
+    compactFullWidth?: boolean;
+    /** CompactDataGrid 전용: 그리드 영역 높이 Tailwind 클래스 */
+    compactGridHeightClass?: string;
+    gridHeight?: number;
+    /** RealGrid `gridView.header.height` (기본 60, columnLayout 2단 헤더 등에서 조절) */
+    headerHeight?: number;
+    /** RealGrid `displayOptions.fitStyle` (기본 EVEN). 컬럼별 width 유지 시 NONE */
+    fitStyle?: GridFitStyle;
 };
 
 export type TabDataGridProps = {
@@ -270,6 +412,12 @@ export type TabDataGridProps = {
     getGridDataRef?: {
         current: (() => Record<string, string | number>[]) | null;
     };
+    /** 전체 정렬 기능 on/off (기본값: false) */
+    enableSort?: boolean;
+    /** 분할 탭 상단 시설 조회 다이얼로그용 — 상위 화면 검색의 통계연도(searchParam.statsYr) */
+    facilitySearchStatsYr?: string | null;
+    /** 일반 탭 그리드(비분할) 셀 styleName — DataGrid의 cellStyleCallback과 동일 */
+    cellStyleCallback?: CellStyleCallback;
 };
 
 export type SplitDataGridProps = {
@@ -286,4 +434,14 @@ export type SplitDataGridProps = {
     setRightRowData: React.Dispatch<
         React.SetStateAction<Record<string, string | number>[]>
     >;
+    /** 좌측 분할 그리드 행 클릭 이벤트 */
+    leftOnRowClick?: (rowData: Record<string, string | number>) => void;
+    /** 좌측 분할 그리드 셀 스타일 콜백 */
+    leftCellStyleCallback?: CellStyleCallback;
+    /** 우측 분할 그리드 행 체크 변경 */
+    rightOnItemChecked?: (itemIndex: number, checked: boolean) => void;
+    /** 우측 분할 그리드 헤더 전체 체크 변경 */
+    rightOnItemAllChecked?: (checked: boolean) => void;
+    /** 전체 정렬 기능 on/off (기본값: false) */
+    enableSort?: boolean;
 };
diff --git a/apps/st/src/components/type/SearchForm.type.ts b/apps/st/src/components/type/SearchForm.type.ts
index b6fd4211d..18ce8aea7 100644
--- a/apps/st/src/components/type/SearchForm.type.ts
+++ b/apps/st/src/components/type/SearchForm.type.ts
@@ -1,3 +1,6 @@
+/** 통계 분류: 전체 / 입력 / 검증 */
+export type SearchFormClsfCd = "ALL" | "INPT" | "VRFC";
+
 export type SearchFormValues = {
     sido?: string;
     gugun?: string;
@@ -5,26 +8,40 @@ export type SearchFormValues = {
     order?: string;
     fctName?: string;
     bsnmCd?: string;
+    isDetail?: boolean;
+    isSummary?: string;
+    /** 분류: 전체(ALL), 입력(INPT), 검증(VRFC) */
+    clsfCd?: SearchFormClsfCd;
 };
 
 export type SearchFormProps = {
     sido?: boolean;
+    sidoSelectText?: string;
     gugun?: boolean;
     year?: boolean;
     order?: boolean;
     fctName?: boolean;
+    /** 분류(입력/검증) 셀렉트 표시 */
+    clsf?: boolean;
     userMenual?: boolean;
+    isDetail?: boolean;
+    isSummary?: boolean;
     onSubmit?: (values: SearchFormValues) => void;
     onReset?: () => void;
     onValuesChange?: (values: SearchFormValues) => void;
     defaultValues?: SearchFormValues;
 };
 
-export const defaultSearchFormProps: Required<Omit<SearchFormProps, 'onSubmit' | 'onReset' | 'onValuesChange' | 'defaultValues'>> = {
+export const defaultSearchFormProps: Required<
+    Omit<SearchFormProps, "onSubmit" | "onReset" | "onValuesChange" | "defaultValues" | "sidoSelectText">
+> = {
     sido: true,
     gugun: true,
     year: true,
     order: false,
     fctName: false,
+    clsf: false,
     userMenual: false,
+    isDetail: false,
+    isSummary: false,
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/MenuMatchList.ts b/apps/st/src/components/util/MenuMatchList.ts
new file mode 100644
index 000000000..ded92e5a4
--- /dev/null
+++ b/apps/st/src/components/util/MenuMatchList.ts
@@ -0,0 +1,33 @@
+/**
+ * statistics/input 화면과 탭(·분할 그리드) 키 매칭용 상수.
+ * 각 컴포넌트에 실제로 쓰이는 `tabKey`를 모두 포함합니다.
+ */
+
+/** `SewagePipeInp.tsx` — 메인 탭 + `ConnectionStatusInpColumn` 좌·우 그리드 서브 키 */
+export const SEWAGE_PIPE_INP_TAB_KEYS = [
+    "ST00020001",
+    "ST00020002",
+    "ST00020003",
+    "ST00020004",
+    "ST00020005",
+    "ST00020006",
+    "treatmentPlantConnectionInp",
+    "adminAreaConnectionInp",
+] as const;
+
+/** `SewagePipeMaintainInp.tsx` — 보수·준설 탭 */
+export const SEWAGE_PIPE_MAINTAIN_INP_TAB_KEYS = ["ST00030001", "ST00030002"] as const;
+
+/** `SeweragePenetrationRateInp.tsx` — 단일 그리드(통계코드) */
+export const SEWERAGE_PENETRATION_RATE_INP_TAB_KEYS = ["ST00010001"] as const;
+
+export type SewagePipeInpTabKey = (typeof SEWAGE_PIPE_INP_TAB_KEYS)[number];
+export type SewagePipeMaintainInpTabKey = (typeof SEWAGE_PIPE_MAINTAIN_INP_TAB_KEYS)[number];
+export type SeweragePenetrationRateInpTabKey = (typeof SEWERAGE_PENETRATION_RATE_INP_TAB_KEYS)[number];
+
+/** 컴포넌트 파일명 기준 묶음 (메뉴·라우트 매칭 시 참고) */
+export const STATISTICS_INPUT_TAB_KEYS_BY_SCREEN = {
+    SewagePipeInp: SEWAGE_PIPE_INP_TAB_KEYS,
+    SewagePipeMaintainInp: SEWAGE_PIPE_MAINTAIN_INP_TAB_KEYS,
+    SeweragePenetrationRateInp: SEWERAGE_PENETRATION_RATE_INP_TAB_KEYS,
+} as const;
diff --git a/apps/st/src/components/util/column/input/DoList.ts b/apps/st/src/components/util/column/input/DoList.ts
index 2b58bd57b..50085a92f 100644
--- a/apps/st/src/components/util/column/input/DoList.ts
+++ b/apps/st/src/components/util/column/input/DoList.ts
@@ -20,4 +20,15 @@ export const needBsnmFrgnrPoplSmSidoList = [
     "4700000000",
     "4800000000",
     "5000000000",
+];
+
+export const doNameList = [
+    "경기도",
+    "강원특별자치도",
+    "충청북도",
+    "충청남도",
+    "전북특별자치도",
+    "전라남도",
+    "경상북도",
+    "경상남도",
 ];
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/ExcretaTreatFactInpColumn.ts b/apps/st/src/components/util/column/input/ExcretaTreatFactInpColumn.ts
index 4896a2194..ac73c825c 100644
--- a/apps/st/src/components/util/column/input/ExcretaTreatFactInpColumn.ts
+++ b/apps/st/src/components/util/column/input/ExcretaTreatFactInpColumn.ts
@@ -8,58 +8,83 @@ import { ValueType } from "realgrid";
 export const ExcretaTreatFactInpColumn = {
     columns: [
         // 행정구역
-        { name: 'sido', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'gugun', fieldName: '시군구', header: { text: '시군구' }, footer: { text: '합계' } },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' } },
         
         // 기본 정보
-        { name: 'ecscs_nm', fieldName: '시설명', header: { text: '시설명' } },
-        { name: 'locplcs', fieldName: '소재지', header: { text: '소재지' } },
-        { name: 'telno', fieldName: '전화번호', header: { text: '전화번호' } },
+        { name: 'fcltNm', fieldName: 'fcltNm', header: { text: '시설명' } },
+        { name: 'fcltPstnCn', fieldName: 'fcltPstnCn', header: { text: '소재지' } },
+        { name: 'telNo', fieldName: 'telNo', header: { text: '전화번호' } },
         
         // 날짜 정보
-        { name: 'comp_dt', fieldName: '준공일 yyyy-mm-dd', header: { text: '준공일 yyyy-mm-dd' } },
-        { name: 'rn_dt', fieldName: '가동개시일 yyyy-mm-dd', header: { text: '가동개시일 yyyy-mm-dd' } },
+        {
+            name: 'cmptnStrtYmd',
+            fieldName: 'cmptnStrtYmd',
+            header: { text: '준공일 yyyy-mm-dd' },
+            datetimeFormat: 'yyyy-MM-dd',
+            editor: {
+                type: 'date' as const,
+                dropDownWhenClick: true,
+                datetimeFormat: 'yyyy-MM-dd',
+            },
+        },
+        {
+            name: 'oprtngStrtYmd',
+            fieldName: 'oprtngStrtYmd',
+            header: { text: '가동개시일 yyyy-mm-dd' },
+            datetimeFormat: 'yyyy-MM-dd',
+            editor: {
+                type: 'date' as const,
+                dropDownWhenClick: true,
+                datetimeFormat: 'yyyy-MM-dd',
+            },
+        },
         
         // 사업비/용량 정보
-        { name: 'wct', fieldName: '사업비(백만원)', header: { text: '사업비(백만원)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'ecscs_cpcty', fieldName: '시설용량(m³/일)', header: { text: '시설용량(m³/일)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'process_cpcty', fieldName: '처리량(m³/일)', header: { text: '처리량(m³/일)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'opr_daycnt', fieldName: '가동일수(일/년)', header: { text: '가동일수(일/년)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'wholPjtcoAmt', fieldName: 'wholPjtcoAmt', header: { text: '사업비(백만원)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'prcsFcltCpct', fieldName: 'prcsFcltCpct', header: { text: '시설용량(m³/일)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'cpct', fieldName: 'cpct', header: { text: '처리량(m³/일)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'oprtngDayCnt', fieldName: 'oprtngDayCnt', header: { text: '가동일수(일/년)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 처리 공법 및 연계
-        { name: 'trt_msrc', fieldName: '처리공법', header: { text: '처리공법' } },
-        { name: 'cntc_prcplt', fieldName: '연계처리장명', header: { text: '연계처리장명' } },
-        { name: 'assct_trt_cpc', fieldName: '연계처리량(m³/일)', header: { text: '연계처리량(m³/일)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'prcsMthdExpln', fieldName: 'prcsMthdExpln', header: { text: '처리공법' } },
+        { name: 'linkTmplntCn', fieldName: 'linkTmplntCn', header: { text: '연계처리장명' } },
+        { name: 'linkPrcsQnt', fieldName: 'linkPrcsQnt', header: { text: '연계처리량(m³/일)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
         
         // 유입수질
-        { name: 'infl_wqlt_bod', fieldName: 'BOD', header: { text: 'BOD' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'infl_wqlt_toc', fieldName: 'TOC', header: { text: 'TOC' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'infl_wqlt_ss', fieldName: 'SS', header: { text: 'SS' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'infl_wqlt_tn', fieldName: 'T-N', header: { text: 'T-N' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
-        { name: 'infl_wqlt_tp', fieldName: 'T-P', header: { text: 'T-P' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
-        { name: 'infl_wqlt_clfgrpcnt', fieldName: '대장균군수', header: { text: '대장균군수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'inflwBodWqVl', fieldName: 'inflwBodWqVl', header: { text: 'BOD' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'inflwTocWqVl', fieldName: 'inflwTocWqVl', header: { text: 'TOC' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'inflwSsWqVl', fieldName: 'inflwSsWqVl', header: { text: 'SS' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'inflwTnWqVl', fieldName: 'inflwTnWqVl', header: { text: 'T-N' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'inflwTpWqVl', fieldName: 'inflwTpWqVl', header: { text: 'T-P' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'inflwClfgCnt', fieldName: 'inflwClfgCnt', header: { text: '대장균군수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 방류수질
-        { name: 'effl_wqlt_bod', fieldName: 'BOD', header: { text: 'BOD' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'effl_wqlt_toc', fieldName: 'TOC', header: { text: 'TOC' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'effl_wqlt_ss', fieldName: 'SS', header: { text: 'SS' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'effl_wqlt_tn', fieldName: 'T-N', header: { text: 'T-N' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
-        { name: 'effl_wqlt_tp', fieldName: 'T-P', header: { text: 'T-P' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
-        { name: 'effl_wqlt_clfgrpcnt', fieldName: '대장균군수', header: { text: '대장균군수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'dschgBodWqVl', fieldName: 'dschgBodWqVl', header: { text: 'BOD' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'dschgTocWqVl', fieldName: 'dschgTocWqVl', header: { text: 'TOC' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'dschgSsWqVl', fieldName: 'dschgSsWqVl', header: { text: 'SS' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'dschgTnWqVl', fieldName: 'dschgTnWqVl', header: { text: 'T-N' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'dschgTpWqVl', fieldName: 'dschgTpWqVl', header: { text: 'T-P' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'dschgClfgCnt', fieldName: 'dschgClfgCnt', header: { text: '대장균군수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 방류수역
-        { name: 'rvbsn', fieldName: '수계', header: { text: '수계' } },
-        { name: 'bstrm', fieldName: '지류', header: { text: '지류' } },
-        { name: 'lgbsn', fieldName: '중권역', header: { text: '중권역' } },
-        { name: 'mdmbsn', fieldName: '소권역', header: { text: '소권역' } },
+        { name: 'wtsysNm', fieldName: 'wtsysNm', header: { text: '수계' } },
+        { name: 'trbtrNm', fieldName: 'trbtrNm', header: { text: '지류' } },
+        { name: 'msirbCn', fieldName: 'msirbCn', header: { text: '중권역' } },
+        { name: 'ssirbCn', fieldName: 'ssirbCn', header: { text: '소권역' } },
         
         // 운영 정보
-        { name: 'oper_mth', fieldName: '운영주체(자체/공기업/민간위탁)', header: { text: '운영주체(자체/공기업/민간위탁)' } },
-        { name: 'cntc_prcplt_cpc', fieldName: '직원총수(명)', header: { text: '직원총수(명)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'safe_acdnt_co', fieldName: '안전사고건수(건/인/년)', header: { text: '안전사고건수(건/인/년)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'operMthdCdCn', fieldName: 'operMthdCdCn', header: { text: '운영주체(자체/공기업/민간위탁)' } },
+        { name: 'wholNope', fieldName: 'wholNope', header: { text: '직원총수(명)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'sftyAcdntEvntcsCnt', fieldName: 'sftyAcdntEvntcsCnt', header: { text: '안전사고건수(건/인/년)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 비고
-        { name: 'rmk', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
+
+        // Hidden Columns : 시스템 관리를 위한 값
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, },
+        { name: 'fcltSn', fieldName: 'fcltSn', header: { text: '시설일련번호' }, visible: false, },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false },
     ],
 
     columnLayout: [
@@ -67,41 +92,51 @@ export const ExcretaTreatFactInpColumn = {
             name: 'adminGroup',
             hideChildHeaders: false,
             header: { text: '행정구역' },
-            items: ['sido', 'gugun'],
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
         },
-        'ecscs_nm',
-        'locplcs',
-        'telno',
-        'comp_dt',
-        'rn_dt',
-        'wct',
-        'ecscs_cpcty',
-        'process_cpcty',
-        'opr_daycnt',
-        'trt_msrc',
-        'cntc_prcplt',
-        'assct_trt_cpc',
+        'fcltNm',
+        'fcltPstnCn',
+        'telNo',
+        'cmptnStrtYmd',
+        'oprtngStrtYmd',
+        'wholPjtcoAmt',
+        'prcsFcltCpct',
+        'cpct',
+        'oprtngDayCnt',
+        'prcsMthdExpln',
+        'linkTmplntCn',
+        'linkPrcsQnt',
         {
             name: 'influenceGroup',
             hideChildHeaders: false,
             header: { text: '유입수질(mg/L, 개/mL)' },
-            items: ['infl_wqlt_bod', 'infl_wqlt_toc', 'infl_wqlt_ss', 'infl_wqlt_tn', 'infl_wqlt_tp', 'infl_wqlt_clfgrpcnt'],
+            items: ['inflwBodWqVl', 'inflwTocWqVl', 'inflwSsWqVl', 'inflwTnWqVl', 'inflwTpWqVl', 'inflwClfgCnt'],
         },
         {
             name: 'effluentGroup',
             hideChildHeaders: false,
             header: { text: '방류수질(mg/L, 개/mL)' },
-            items: ['effl_wqlt_bod', 'effl_wqlt_toc', 'effl_wqlt_ss', 'effl_wqlt_tn', 'effl_wqlt_tp', 'effl_wqlt_clfgrpcnt'],
+            items: ['dschgBodWqVl', 'dschgTocWqVl', 'dschgSsWqVl', 'dschgTnWqVl', 'dschgTpWqVl', 'dschgClfgCnt'],
         },
         {
             name: 'dischargeGroup',
             hideChildHeaders: false,
             header: { text: '방류수역' },
-            items: ['rvbsn', 'bstrm', 'lgbsn', 'mdmbsn'],
+            items: ['wtsysNm', 'trbtrNm', 'msirbCn', 'ssirbCn'],
         },
-        'oper_mth',
-        'cntc_prcplt_cpc',
-        'safe_acdnt_co',
-        'rmk',
-    ]
+        'operMthdCdCn',
+        'wholNope',
+        'sftyAcdntEvntcsCnt',
+        'rmrk',
+        'admdstCd',
+        'fcltSn',
+        'admdstNm'
+    ],
+
+    rowStartNum: 2,
+    fixedColumns: 2,
+    tabKey: 'ST00070001',
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/PublicSewageFactInpColumn.ts b/apps/st/src/components/util/column/input/PublicSewageFactInpColumn.ts
deleted file mode 100644
index d070c9b9d..000000000
--- a/apps/st/src/components/util/column/input/PublicSewageFactInpColumn.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-import { footerInt, footerDecimal1, footerDecimal3 } from "@/components/util/grid/footerSummary";
-import { ValueType } from "realgrid";
-
-/**
- * 하수도 통계 관리 > 06. 공공하수처리시설
- * 단일 Tab
- */
-export const PublicSewageFactInpColumn = {
-    columns: [
-        // 행정구역
-        { name: 'sidoCd', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'gugun', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
-        
-        // 시설명
-        { name: 'bscFctNm', fieldName: '시설명(500m³/일 이상/미만)', header: { text: '시설명(500m³/일 이상/미만)' }, editable: false },
-        
-        // 소재지
-        { name: 'addr', fieldName: '소재지', header: { text: '소재지' }, editable: false },
-        
-        // 시설용량
-        { name: 'fctCpc', fieldName: '시설용량(500m³/일 이상/미만)', header: { text: '시설용량(500m³/일 이상/미만)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
-        // (m³/일)
-        { name: 'fctCpc1', fieldName: '물리적', header: { text: '물리적' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'fctCpc2', fieldName: '생물학적', header: { text: '생물학적' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'fctCpc3', fieldName: '고도', header: { text: '고도' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
-        // 유입하수량
-        { name: 'totInflAmntAve', fieldName: '유입하수량(500m³/일 이상/미만)', header: { text: '유입하수량(500m³/일 이상/미만)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-
-        // (m³/일)
-        { name: 'pInflAmntAve', fieldName: '물리적', header: { text: '물리적' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'oInflAmntAve', fieldName: '생물학적', header: { text: '생물학적' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'aInflAmntAve', fieldName: '고도', header: { text: '고도' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
-        // 방류량
-        { name: 'totTputAve', fieldName: '방류량(500m³/일 이상/미만)', header: { text: '방류량(500m³/일 이상/미만)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
-        // 방류량 - (m³/일)
-        { name: 'pTputAve', fieldName: '물리적', header: { text: '물리적' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'oTputAve', fieldName: '생물학적', header: { text: '생물학적' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'aTputAve', fieldName: '고도', header: { text: '고도' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
-        // 수질
-        { name: 'inflAssctBfrWqltBod', fieldName: '유입BOD', header: { text: '유입BOD' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'efflWqltBod', fieldName: '방류BOD', header: { text: '방류BOD' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'inflAssctBfrWqltToc', fieldName: '유입TOC', header: { text: '유입TOC' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'efflWqltToc', fieldName: '방류TOC', header: { text: '방류TOC' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'inflAssctBfrWqltSs', fieldName: '유입SS', header: { text: '유입SS' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'efflWqltSs', fieldName: '방류SS', header: { text: '방류SS' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'inflAssctBfrWqltTn', fieldName: '유입T-N', header: { text: '유입T-N' }, editable: false, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
-        { name: 'efflWqltTn', fieldName: '방류T-N', header: { text: '방류T-N' }, editable: false, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
-        { name: 'inflAssctBfrWqltTp', fieldName: '유입T-P', header: { text: '유입T-P' }, editable: false, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
-        { name: 'efflWqltTp', fieldName: '방류T-P', header: { text: '방류T-P' }, editable: false, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
-        { name: 'inflAssctBfrWqltClfgrpcnt', fieldName: '유입총대장균군수', header: { text: '유입총대장균군수' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'efflWqltClfgrpcnt', fieldName: '방류총대장균군수', header: { text: '방류총대장균군수' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
-        // 처리특성
-        { name: 'tmEfficiency', fieldName: '처리효율(%)', header: { text: '처리효율(%)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'pcLoad', fieldName: '처리부하량(kgBOD/D)', header: { text: '처리부하량(kgBOD/D)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'trtFrfHanNm', fieldName: '처리방법', header: { text: '처리방법' }, editable: false },
-        
-        // 연계처리량
-        { name: 'excretionsTot', fieldName: '분뇨', header: { text: '분뇨' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'stkrsngWstwtrTot', fieldName: '축산', header: { text: '축산' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'lchtTot', fieldName: '침출수', header: { text: '침출수' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'etcTot', fieldName: '기타', header: { text: '기타' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
-        // 시설정보
-        { name: 'tel', fieldName: '전화번호', header: { text: '전화번호' }, editable: false },
-        { name: 'rnDt', fieldName: '준공일', header: { text: '준공일' }, editable: false },
-        { name: 'compDt', fieldName: '가동개시일', header: { text: '가동개시일' }, editable: false },
-        { name: 'tot', fieldName: '사업비', header: { text: '사업비' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
-        // 방류수 소독방법
-        { name: 'dsfctNm', fieldName: '방류수 소독방법', header: { text: '방류수 소독방법' }, editable: false },
-        
-        // 방류수역
-        { name: 'wbsnNm', fieldName: '수계', header: { text: '수계' }, editable: false },
-        { name: 'rvNm', fieldName: '지류', header: { text: '지류' }, editable: false },
-        { name: 'mdmbsn', fieldName: '세부단위구역', header: { text: '세부단위구역' }, editable: false },
-        { name: 'efflWqltStndrdNm', fieldName: '지역구분', header: { text: '지역구분' }, editable: false },
-
-        // 방류수역 > 중권역
-        { name: 'lgbsn', fieldName: '명칭', header: { text: '명칭' }, editable: false },
-        { name: 'lgbsnBod', fieldName: '목표수질(BOD)', header: { text: '목표수질(BOD)' }, editable: false },
-        
-        // 에너지 자립률
-        { name: 'toeRt', fieldName: '에너지자립률(%)', header: { text: '에너지자립률(%)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
-        // 에너지 자체 생산량
-        { name: 'useQnty', fieldName: '에너지자체생산량(TOE)', header: { text: '에너지자체생산량(TOE)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-
-        // 연간 총 에너지 사용량
-        { name: 'toeSum', fieldName: '계(TOE)', header: { text: '계(TOE)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'elcpwAmnt', fieldName: '총 전력사용량(kWh)', header: { text: '총 전력사용량(kWh)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'toeQnty', fieldName: '자체 에너지사용량(TOE)', header: { text: '자체 에너지사용량(TOE)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
-        // 하수처리량당 CO2배출량
-        { name: 'co2Emissions', fieldName: '하수처리량당 CO2배출량(kgCO2/m³)', header: { text: '하수처리량당 CO2배출량(kgCO2/m³)' }, editable: false, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
-        
-        // 운영주체
-        { name: 'oprClsNm', fieldName: '운영주체(자체/공기업/민간대행)', header: { text: '운영주체(자체/공기업/민간대행)' }, editable: false },
-        
-        // 위탁현황
-        { name: 'trstOprEtpNm', fieldName: '위탁업체명', header: { text: '위탁업체명' } },
-        { name: 'yrstpTrstCst', fieldName: '위탁비용(백만원/년)', header: { text: '위탁비용(백만원/년)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'trstOprDt', fieldName: '위탁계약기간(yyyy-mm-dd~yyyy-mm-dd)', header: { text: '위탁계약기간(yyyy-mm-dd~yyyy-mm-dd)' } },
-        
-        // 기타
-        { name: 'cntrTrtFctNm', fieldName: '중심처리시설', header: { text: '중심처리시설' } },
-        { name: 'totWtrQrm', fieldName: '직원총수(명)', header: { text: '직원총수(명)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'safeAcdntCo', fieldName: '안전사고건수', header: { text: '안전사고건수' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'rmk', fieldName: '비고', header: { text: '비고' } },
-    ],
-
-    columnLayout: [
-        {
-            name: 'administrative',
-            hideChildHeaders: false,
-            header: { text: '행정구역' },
-            items: ['sidoCd', 'gugun'],
-        },
-        'bscFctNm',
-        'addr',
-        'fctCpc',
-        {
-            name: 'facilityCapacityDetail',
-            hideChildHeaders: false,
-            header: { text: '(m³/일)' },
-            items: ['fctCpc1', 'fctCpc2', 'fctCpc3'],
-        },
-        'totInflAmntAve',
-        {
-            name: 'influentWaterDetail',
-            hideChildHeaders: false,
-            header: { text: '(m³/일)' },
-            items: ['pInflAmntAve', 'oInflAmntAve', 'aInflAmntAve'],
-        },
-        'totTputAve',
-        {
-            name: 'effluentWaterDetail',
-            hideChildHeaders: false,
-            header: { text: '(m³/일)' },
-            items: ['pTputAve', 'oTputAve', 'aTputAve'],
-        },
-        'inflAssctBfrWqltBod',
-        'efflWqltBod',
-        'inflAssctBfrWqltToc',
-        'efflWqltToc',
-        'inflAssctBfrWqltSs',
-        'efflWqltSs',
-        'inflAssctBfrWqltTn',
-        'efflWqltTn',
-        'inflAssctBfrWqltTp',
-        'efflWqltTp',
-        'inflAssctBfrWqltClfgrpcnt',
-        'efflWqltClfgrpcnt',
-        'tmEfficiency',
-        'pcLoad',
-        'trtFrfHanNm',
-        {
-            name: 'linkedTreatment',
-            hideChildHeaders: false,
-            header: { text: '연계처리량(m³/일) (500m³/일 이상/미만)' },
-            items: ['excretionsTot', 'stkrsngWstwtrTot', 'lchtTot', 'etcTot'],
-        },
-        'tel',
-        'rnDt',
-        'compDt',
-        'tot',
-        'dsfctNm',
-        {
-            name: 'dischargeArea',
-            hideChildHeaders: false,
-            header: { text: '방류수역' },
-            items: [
-                'wbsnNm',
-                'rvNm',
-                'mdmbsn',
-                'efflWqltStndrdNm',
-                {
-                    name: 'mediumWatershed',
-                    hideChildHeaders: false,
-                    header: { text: '중권역' },
-                    items: ['lgbsn', 'lgbsnBod'],
-                },
-            ],
-        },
-        'toeRt',
-        'useQnty',
-        {
-            name: 'energy',
-            hideChildHeaders: false,
-            header: { text: '연간 총 에너지 사용량(TOE)' },
-            items: ['toeSum', 'elcpwAmnt', 'toeQnty'],
-        },
-        'co2Emissions',
-        'oprClsNm',
-        {
-            name: 'consignmentStatus',
-            hideChildHeaders: false,
-            header: { text: '위탁현황' },
-            items: ['trstOprEtpNm', 'yrstpTrstCst', 'trstOprDt'],
-        },
-        'cntrTrtFctNm',
-        'totWtrQrm',
-        'safeAcdntCo',
-        'rmk',
-    ]
-};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/MainFacilityInpColumn.ts b/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/MainFacilityInpColumn.ts
new file mode 100644
index 000000000..14cb5281d
--- /dev/null
+++ b/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/MainFacilityInpColumn.ts
@@ -0,0 +1,77 @@
+import { ValueType } from "realgrid";
+
+export const MainFacilityColumn = {
+    columns: [
+        { name: 'swtrmtFcltNm', fieldName: 'swtrmtFcltNm', header: { text: '시설명' }, editable: false },
+        { name: 'fcltPstnCn', fieldName: 'fcltPstnCn', header: { text: '소재지' }, editable: false },
+        { name: 'prxyBzentyNmCn', fieldName: 'prxyBzentyNmCn', header: { text: '위탁업체명' }, editable: false },
+        { name: 'cnsgnCstVl', fieldName: 'cnsgnCstVl', header: { text: '위탁비용(백만원/년)' }, editable: false },
+        { name: 'prxyCtrtCn', fieldName: 'prxyCtrtCn', header: { text: '위탁계약기간' }, editable: false },
+        { name: 'wholNope', fieldName: 'wholNope', header: { text: '직원수(명)' }, editable: false },
+        { name: 'isMainYn', fieldName: 'isMainYn', header: { text: '중심처리시설여부' }, editable: false },
+        
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'fcltSn', fieldName: 'fcltSn', header: { text: '처리시설일련번호' }, visible: false, editable: false, valueType: ValueType.TEXT, styleName: 'rg-cell-readonly' },
+        { name: 'swtrmtFcltCd', fieldName: 'swtrmtFcltCd', header: { text: '하수처리시설코드' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+    ],
+    columnLayout: [
+        'swtrmtFcltNm',
+        'fcltPstnCn',
+        'prxyBzentyNmCn',
+        'cnsgnCstVl',
+        'prxyCtrtCn',
+        'wholNope',
+        'isMainYn',
+        'admdstCd',
+        'fcltSn',
+        'swtrmtFcltCd',
+        'sggNm',
+        'admdstNm',
+    ],
+    rowStartNum: 1,
+    fixedColumns: 1,
+    tabKey: 'MainFacility',
+    tabLabel: '지자체별공공하수처리시설'
+};
+
+// Tab 6-2: 하수처리장별 연결 현황 (왼쪽 그리드)
+export const MainFacilityTargetColumn = {
+    columns: [
+        // 하수처리장 정보
+        { name: 'swtrmtFcltNm', fieldName: 'swtrmtFcltNm', header: { text: '시설명' }, editable: false },
+        { name: 'fcltPstnCn', fieldName: 'fcltPstnCn', header: { text: '소재지' }, editable: false },
+        { name: 'mappedYn', fieldName: 'mappedYn', header: { text: '연결여부' }, editable: false },
+
+        { name: 'fcltSn', fieldName: 'fcltSn', header: { text: '처리시설일련번호' }, visible: false, editable: false, valueType: ValueType.TEXT, styleName: 'rg-cell-readonly' },
+        { name: 'swtrmtFcltCd', fieldName: 'swtrmtFcltCd', header: { text: '하수처리시설코드' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'mainFcltSn', fieldName: 'mainFcltSn', header: { text: '연결된중심시설일련번호' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'isMainYn', fieldName: 'isMainYn', header: { text: '중심처리시설여부' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+    ],
+    columnLayout: [
+        'swtrmtFcltNm',
+        'fcltPstnCn',
+        'mappedYn',
+        'fcltSn',
+        'swtrmtFcltCd',
+        'admdstCd',
+        'admdstNm',
+        'mainFcltSn',
+        'isMainYn',
+    ],
+    rowStartNum: 1,
+    fixedColumns: 1,
+    tabKey: 'MainFacilityTarget',
+    tabLabel: '연결대상시설'
+};
+
+export const MainFacilityInpColumn = {
+    tabKey: 'ST00060002',
+    tabLabel: '중심 처리 시설',
+    isSplitGrid: true,
+    left: MainFacilityColumn,
+    right: MainFacilityTargetColumn,
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactColumn.ts b/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactColumn.ts
new file mode 100644
index 000000000..d9943bbd6
--- /dev/null
+++ b/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactColumn.ts
@@ -0,0 +1,265 @@
+import { ValueType } from "realgrid";
+
+import { footerDecimal1, footerDecimal3,footerInt } from "@/components/util/grid/footerSummary";
+
+/**
+ * 하수도 통계 관리 > 06. 공공하수처리시설
+ */
+export const PublicSewageFactColumn = {
+    columns: [
+        // 행정구역
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, editable: false, footer: { text: '합계' }, styleName: 'rg-cell-readonly' },
+        
+        // 시설명
+        { name: 'swtrmtFcltNm', fieldName: 'swtrmtFcltNm', header: { text: '시설명(500m³/일 이상/미만)' }, editable: false, styleName: 'rg-cell-readonly' },
+        
+        // 소재지
+        { name: 'fcltPstnCn', fieldName: 'fcltPstnCn', header: { text: '소재지' }, editable: false, styleName: 'rg-cell-readonly' },
+        
+        // 시설용량
+        {
+            name: 'prcsFcltCpct',
+            fieldName: 'prcsFcltCpct',
+            header: { text: '시설용량(500m³/일 이상/미만)' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: ['prcsFcltPhysCpct', 'prcsFcltBoilCpct', 'prcsFcltAltdCpct'],
+                type: 'sum' as const,
+            },
+        },
+        
+        // (m³/일)
+        { name: 'prcsFcltPhysCpct', fieldName: 'prcsFcltPhysCpct', header: { text: '물리적' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'prcsFcltBoilCpct', fieldName: 'prcsFcltBoilCpct', header: { text: '생물학적' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'prcsFcltAltdCpct', fieldName: 'prcsFcltAltdCpct', header: { text: '고도' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        
+        // 유입하수량
+        { name: 'inflwSwageQnt', fieldName: 'inflwSwageQnt', header: { text: '유입하수량(500m³/일 이상/미만)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+
+        // (m³/일)
+        { name: 'inflwSwagePhysQnt', fieldName: 'inflwSwagePhysQnt', header: { text: '물리적' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'inflwSwageBoilQnt', fieldName: 'inflwSwageBoilQnt', header: { text: '생물학적' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'inflwSwageAltdQnt', fieldName: 'inflwSwageAltdQnt', header: { text: '고도' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        
+        // 방류량
+        { name: 'prcsQnt', fieldName: 'prcsQnt', header: { text: '방류량(500m³/일 이상/미만)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        
+        // 방류량 - (m³/일)
+        { name: 'prcsPhysCpct', fieldName: 'prcsPhysCpct', header: { text: '물리적' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'prcsBoilCpct', fieldName: 'prcsBoilCpct', header: { text: '생물학적' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'prcsAltdCpct', fieldName: 'prcsAltdCpct', header: { text: '고도' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        
+        // 수질
+        { name: 'inflwBodVl', fieldName: 'inflwBodVl', header: { text: '유입BOD' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'dschgBodVl', fieldName: 'dschgBodVl', header: { text: '방류BOD' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'inflwTocQnt', fieldName: 'inflwTocQnt', header: { text: '유입TOC' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'dschgTocQnt', fieldName: 'dschgTocQnt', header: { text: '방류TOC' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'inflwSsQnt', fieldName: 'inflwSsQnt', header: { text: '유입SS' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'dschgSsQnt', fieldName: 'dschgSsQnt', header: { text: '방류SS' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'inflwTnVl', fieldName: 'inflwTnVl', header: { text: '유입T-N' }, editable: false, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000', styleName: 'rg-cell-readonly' },
+        { name: 'dschgTnVl', fieldName: 'dschgTnVl', header: { text: '방류T-N' }, editable: false, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000', styleName: 'rg-cell-readonly' },
+        { name: 'inflwTpVl', fieldName: 'inflwTpVl', header: { text: '유입T-P' }, editable: false, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000', styleName: 'rg-cell-readonly' },
+        { name: 'dschgTpVl', fieldName: 'dschgTpVl', header: { text: '방류T-P' }, editable: false, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000', styleName: 'rg-cell-readonly' },
+        { name: 'inflwGrssClfgVl', fieldName: 'inflwGrssClfgVl', header: { text: '유입총대장균군수' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'dschgGrssClfgVl', fieldName: 'dschgGrssClfgVl', header: { text: '방류총대장균군수' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        
+        // 처리특성
+        {
+            name: 'prcsRt',
+            fieldName: 'prcsRt',
+            header: { text: '처리효율(%)' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                inflwField: 'inflwBodVl',
+                dschgField: 'dschgBodVl',
+                type: 'bodPrcsRt' as const,
+            },
+        },
+        { name: 'prcsLodQnt', fieldName: 'prcsLodQnt', header: { text: '처리부하량(kgBOD/D)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'prcsMthdExpln', fieldName: 'prcsMthdExpln', header: { text: '처리방법' }, editable: false, styleName: 'rg-cell-readonly' },
+        
+        // 연계처리량
+        { name: 'wholHmnQnt', fieldName: 'wholHmnQnt', header: { text: '분뇨' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'wholLvstQnt', fieldName: 'wholLvstQnt', header: { text: '축산' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'wholEfntQnt', fieldName: 'wholEfntQnt', header: { text: '침출수' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'wholEtcQnt', fieldName: 'wholEtcQnt', header: { text: '기타' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        
+        // 시설정보
+        { name: 'telNo', fieldName: 'telNo', header: { text: '전화번호' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'cmptnStrtYmd', fieldName: 'cmptnStrtYmd', header: { text: '준공일' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'oprtngStrtYmd', fieldName: 'oprtngStrtYmd', header: { text: '가동개시일' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'wholBizVl', fieldName: 'wholBizVl', header: { text: '사업비' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        
+        // 방류수 소독방법
+        { name: 'eflntDsnfMthdExpln', fieldName: 'eflntDsnfMthdExpln', header: { text: '방류수 소독방법' }, editable: false, styleName: 'rg-cell-readonly' },
+        
+        // 방류수역
+        { name: 'wtsysNm', fieldName: 'wtsysNm', header: { text: '수계' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'trbtrNm', fieldName: 'trbtrNm', header: { text: '지류' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'dtlUnitZoneCn', fieldName: 'dtlUnitZoneCn', header: { text: '세부단위구역' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'rgnSeNm', fieldName: 'rgnSeNm', header: { text: '지역구분' }, editable: false, styleName: 'rg-cell-readonly' },
+
+        // 방류수역 > 중권역
+        { name: 'msirbCn', fieldName: 'msirbCn', header: { text: '명칭' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'goalWqNo', fieldName: 'goalWqNo', header: { text: '목표수질(BOD)' }, editable: false, styleName: 'rg-cell-readonly' },
+        
+        // 에너지 자립률
+        {
+            name: 'engySrlneRt',
+            fieldName: 'engySrlneRt',
+            header: { text: '에너지자립률(%)' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                numeratorFields: ['engyItslfPrdctnQnt'],
+                denominatorFields: ['anlEngyWholUseQnt'],
+                type: 'pblswrgPopltnSuprtRate' as const,
+            },
+        },
+        
+        // 에너지 자체 생산량
+        { name: 'engyItslfPrdctnQnt', fieldName: 'engyItslfPrdctnQnt', header: { text: '에너지자체생산량(TOE)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+
+        // 연간 총 에너지 사용량
+        { name: 'anlEngyWholUseQnt', fieldName: 'anlEngyWholUseQnt', header: { text: '계(TOE)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'anlElpwrUseQnt', fieldName: 'anlElpwrUseQnt', header: { text: '총 전력사용량(kWh)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'itslfEngyUseQnt', fieldName: 'itslfEngyUseQnt', header: { text: '자체 에너지사용량(TOE)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        
+        // 하수처리량당 CO2배출량
+        { name: 'swtrmtEmsnQnt', fieldName: 'swtrmtEmsnQnt', header: { text: '하수처리량당 CO2배출량(kgCO2/m³)' }, editable: false, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000', styleName: 'rg-cell-readonly' },
+        
+        // 운영주체
+        { name: 'operMnbdCn', fieldName: 'operMnbdCn', header: { text: '운영주체(자체/공기업/민간대행)' }, editable: false, styleName: 'rg-cell-readonly' },
+        
+        // 위탁현황
+        { name: 'prxyBzentyNmCn', fieldName: 'prxyBzentyNmCn', header: { text: '위탁업체명' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'cnsgnCstVl', fieldName: 'cnsgnCstVl', header: { text: '위탁비용(백만원/년)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
+        { name: 'prxyCtrtCn', fieldName: 'prxyCtrtCn', header: { text: '위탁계약기간' } },
+        
+        // 기타
+        { name: 'intgPrcsFcltCn', fieldName: 'intgPrcsFcltCn', header: { text: '중심처리시설' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'wholNope', fieldName: 'wholNope', header: { text: '직원총수(명)' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0', styleName: 'rg-cell-readonly' },
+        { name: 'sftyAcdntEvntcsCnt', fieldName: 'sftyAcdntEvntcsCnt', header: { text: '안전사고건수' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'fcltSn', fieldName: 'fcltSn', header: { text: '처리시설일련번호' }, visible: false, editable: false, valueType: ValueType.TEXT, styleName: 'rg-cell-readonly' },
+        { name: 'swtrmtFcltCd', fieldName: 'swtrmtFcltCd', header: { text: '하수처리시설코드' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+    ],
+
+    columnLayout: [
+        {
+            name: 'administrative',
+            hideChildHeaders: false,
+            header: { text: '행정구역' },
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
+        },
+        'swtrmtFcltNm',
+        'fcltPstnCn',
+        'prcsFcltCpct',
+        {
+            name: 'facilityCapacityDetail',
+            hideChildHeaders: false,
+            header: { text: '(m³/일)' },
+            items: ['prcsFcltPhysCpct', 'prcsFcltBoilCpct', 'prcsFcltAltdCpct'],
+        },
+        'inflwSwageQnt',
+        {
+            name: 'influentWaterDetail',
+            hideChildHeaders: false,
+            header: { text: '(m³/일)' },
+            items: ['inflwSwagePhysQnt', 'inflwSwageBoilQnt', 'inflwSwageAltdQnt'],
+        },
+        'prcsQnt',
+        {
+            name: 'effluentWaterDetail',
+            hideChildHeaders: false,
+            header: { text: '(m³/일)' },
+            items: ['prcsPhysCpct', 'prcsBoilCpct', 'prcsAltdCpct'],
+        },
+        'inflwBodVl',
+        'dschgBodVl',
+        'inflwTocQnt',
+        'dschgTocQnt',
+        'inflwSsQnt',
+        'dschgSsQnt',
+        'inflwTnVl',
+        'dschgTnVl',
+        'inflwTpVl',
+        'dschgTpVl',
+        'inflwGrssClfgVl',
+        'dschgGrssClfgVl',
+        'prcsRt',
+        'prcsLodQnt',
+        'prcsMthdExpln',
+        {
+            name: 'linkedTreatment',
+            hideChildHeaders: false,
+            header: { text: '연계처리량(m³/일) (500m³/일 이상/미만)' },
+            items: ['wholHmnQnt', 'wholLvstQnt', 'wholEfntQnt', 'wholEtcQnt'],
+        },
+        'telNo',
+        'cmptnStrtYmd',
+        'oprtngStrtYmd',
+        'wholBizVl',
+        'eflntDsnfMthdExpln',
+        {
+            name: 'dischargeArea',
+            hideChildHeaders: false,
+            header: { text: '방류수역' },
+            items: [
+                'wtsysNm',
+                'trbtrNm',
+                'dtlUnitZoneCn',
+                'rgnSeNm',
+                {
+                    name: 'mediumWatershed',
+                    hideChildHeaders: false,
+                    header: { text: '중권역' },
+                    items: ['msirbCn', 'goalWqNo'],
+                },
+            ],
+        },
+        'engySrlneRt',
+        'engyItslfPrdctnQnt',
+        {
+            name: 'energy',
+            hideChildHeaders: false,
+            header: { text: '연간 총 에너지 사용량(TOE)' },
+            items: ['anlEngyWholUseQnt', 'anlElpwrUseQnt', 'itslfEngyUseQnt'],
+        },
+        'swtrmtEmsnQnt',
+        'operMnbdCn',
+        {
+            name: 'consignmentStatus',
+            hideChildHeaders: false,
+            header: { text: '위탁현황' },
+            items: ['prxyBzentyNmCn', 'cnsgnCstVl', 'prxyCtrtCn'],
+        },
+        'intgPrcsFcltCn',
+        'wholNope',
+        'sftyAcdntEvntcsCnt',
+        'rmrk',
+        'admdstCd',
+        'fcltSn',
+        'swtrmtFcltCd',
+    ],
+    rowStartNum: 3,
+    fixedColumns: 2,
+    tabKey: 'ST00060001',
+    tabLabel: '공공 하수처리 시설'
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactInpColumn.ts b/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactInpColumn.ts
new file mode 100644
index 000000000..3a8345224
--- /dev/null
+++ b/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactInpColumn.ts
@@ -0,0 +1,8 @@
+import type { ColumnInfoList } from "@/components/type/DataGrid.type";
+import { MainFacilityInpColumn } from "./MainFacilityInpColumn";
+import { PublicSewageFactColumn } from "./PublicSewageFactColumn";
+
+export const PublicSewageFactInpColumnList: ColumnInfoList[] = [
+    PublicSewageFactColumn,
+    MainFacilityInpColumn,
+];
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/PumpingStationInpColumn.ts b/apps/st/src/components/util/column/input/PumpingStationInpColumn.ts
index 6a174daca..deb9d592e 100644
--- a/apps/st/src/components/util/column/input/PumpingStationInpColumn.ts
+++ b/apps/st/src/components/util/column/input/PumpingStationInpColumn.ts
@@ -1,6 +1,33 @@
+import type { ColumnConfig } from "@/components/type/DataGrid.type";
 import { footerInt, footerDecimal1, footerDecimal3 } from "@/components/util/grid/footerSummary";
 import { ValueType } from "realgrid";
 
+/** 펌프장 구분(`pumpSeNm`) */
+export const PUMPING_STATION_PUMP_SE_VALUES = ["합류식", "분류식"] as const;
+
+function dropdownColumn(
+    col: Pick<ColumnConfig, "name" | "fieldName" | "header"> &
+        Partial<ColumnConfig>,
+    options: readonly string[],
+): ColumnConfig {
+    const values = [...options];
+    return {
+        ...col,
+        values,
+        labels: values,
+        lookupDisplay: true,
+        editor: {
+            type: "dropdown",
+            domainOnly: true,
+            textReadOnly: true,
+            commitOnSelect: true,
+            dropDownWhenClick: true,
+            values,
+            labels: values,
+        },
+    };
+}
+
 /**
  * 하수도 통계 관리 > 05. 펌프장
  * 단일 Tab
@@ -8,69 +35,155 @@ import { ValueType } from "realgrid";
 export const PumpingStationInpColumn = {
     columns: [
         // 행정구역
-        { name: 'sido', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'sgg', fieldName: '시군구', header: { text: '시군구' }, footer: { text: '합계' } },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' } },
         
         // 기본 정보
-        { name: 'treatmentFacilityName', fieldName: '처리장명', header: { text: '처리장명' } },
-        { name: 'facilityName', fieldName: '시설명', header: { text: '시설명' } },
-        { name: 'classification', fieldName: '구분(합류식 분류식)', header: { text: '구분(합류식 분류식)' } },
-        { name: 'location', fieldName: '위치', header: { text: '위치' } },
-        { name: 'operationDate', fieldName: '가동 년월일 yyyy-mm-dd', header: { text: '가동 년월일 yyyy-mm-dd' } },
-        { name: 'planDrainageArea', fieldName: '계획배수면적(㎢)', header: { text: '계획배수면적(㎢)' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'swtrmtFcltNm', fieldName: 'swtrmtFcltNm', header: { text: '처리장명' } },
+        { name: 'fcltNm', fieldName: 'fcltNm', header: { text: '시설명' } },
+        dropdownColumn(
+            { name: 'pumpSeNm', fieldName: 'pumpSeNm', header: { text: '구분(합류식 분류식)' } },
+            PUMPING_STATION_PUMP_SE_VALUES,
+        ),
+        { name: 'fcltPstnCn', fieldName: 'fcltPstnCn', header: { text: '위치' } },
+        {
+            name: 'oprtngStrtYmd',
+            fieldName: 'oprtngStrtYmd',
+            header: { text: '가동 년월일 yyyy-mm-dd' },
+            datetimeFormat: 'yyyy-MM-dd',
+            editor: {
+                type: 'date' as const,
+                dropDownWhenClick: true,
+                datetimeFormat: 'yyyy-MM-dd',
+            },
+        },
+        { name: 'planMltvArea', fieldName: 'planMltvArea', header: { text: '계획배수면적(㎢)' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
 
         // 계획시간 대 최대배수량
-        { name: 'fairWeatherFlow', fieldName: '청천시(A)', header: { text: '청천시(A)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'rainyWeatherFlow', fieldName: '우천시(B)', header: { text: '우천시(B)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'rainwaterFlow', fieldName: '우수량(B-A)', header: { text: '우수량(B-A)' }, footer: footerDecimal1, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'sndyArea', fieldName: 'sndyArea', header: { text: '청천시(A)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'rainArea', fieldName: 'rainArea', header: { text: '우천시(B)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'exlnQnt',
+            fieldName: 'exlnQnt',
+            header: { text: '우수량(B-A)' },
+            footer: footerDecimal1,
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            computed: { fields: ['rainArea', 'sndyArea'], type: 'difference' as const },
+            styleName: 'rg-cell-total',
+        },
         
         // 배수능력 > 총 양수량 (오수)
-        { name: 'sewageTotalPumpCapacity', fieldName: '총양수량(m³/min)', header: { text: '총양수량(m³/min)' }, footer: footerDecimal1, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'drtwPumpGrssPpqty',
+            fieldName: 'drtwPumpGrssPpqty',
+            header: { text: '총양수량(m³/min)' },
+            footer: footerDecimal1,
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                type: 'pumpGrossPpqty' as const,
+                pumpGroups: [
+                    {
+                        pumpCntField: 'drtwPumpN1Cnt',
+                        rsrvPumpCntField: 'drtwPumpN1RsrvCnt',
+                        perPpqtyField: 'drtwPumpN1Ppqty',
+                    },
+                    {
+                        pumpCntField: 'drtwPumpN2Cnt',
+                        rsrvPumpCntField: 'drtwPumpN2RsrvCnt',
+                        perPpqtyField: 'drtwPumpN2Ppqty',
+                    },
+                    {
+                        pumpCntField: 'drtwPumpN3Cnt',
+                        rsrvPumpCntField: 'drtwPumpN3RsrvCnt',
+                        perPpqtyField: 'drtwPumpN3Ppqty',
+                    },
+                ],
+            },
+        },
         
         // 배수능력 > 오수펌프(1)
-        { name: 'sewagePump1Diameter', fieldName: '오수펌프(1) 구경(mm)', header: { text: '구경(mm)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'sewagePump1Capacity', fieldName: '오수펌프(1) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'sewagePump1Count', fieldName: '오수펌프(1) 펌프대수', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'sewagePump1Reserve', fieldName: '오수펌프(1) 예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drtwPumpN1DmtrArea', fieldName: 'drtwPumpN1DmtrArea', header: { text: '구경(mm)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drtwPumpN1Ppqty', fieldName: 'drtwPumpN1Ppqty', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'drtwPumpN1Cnt', fieldName: 'drtwPumpN1Cnt', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drtwPumpN1RsrvCnt', fieldName: 'drtwPumpN1RsrvCnt', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 배수능력 > 오수펌프(2)
-        { name: 'sewagePump2Diameter', fieldName: '오수펌프(2) 구경(mm)', header: { text: '구경(mm)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'sewagePump2Capacity', fieldName: '오수펌프(2) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'sewagePump2Count', fieldName: '오수펌프(2) 펌프대수', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'sewagePump2Reserve', fieldName: '오수펌프(2) 예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drtwPumpN2DmtrArea', fieldName: 'drtwPumpN2DmtrArea', header: { text: '구경(mm)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drtwPumpN2Ppqty', fieldName: 'drtwPumpN2Ppqty', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'drtwPumpN2Cnt', fieldName: 'drtwPumpN2Cnt', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drtwPumpN2RsrvCnt', fieldName: 'drtwPumpN2RsrvCnt', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 배수능력 > 오수펌프(3)
-        { name: 'sewagePump3Diameter', fieldName: '오수펌프(3) 구경(mm)', header: { text: '구경(mm)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'sewagePump3Capacity', fieldName: '오수펌프(3) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'sewagePump3Count', fieldName: '오수펌프(3) 펌프대수', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'sewagePump3Reserve', fieldName: '오수펌프(3) 예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drtwPumpN3DmtrArea', fieldName: 'drtwPumpN3DmtrArea', header: { text: '구경(mm)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drtwPumpN3Ppqty', fieldName: 'drtwPumpN3Ppqty', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'drtwPumpN3Cnt', fieldName: 'drtwPumpN3Cnt', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drtwPumpN3RsrvCnt', fieldName: 'drtwPumpN3RsrvCnt', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 배수능력 > 총 양수량 (우수)
-        { name: 'rainwaterTotalPumpCapacity', fieldName: '총양수량(m³/min)', header: { text: '총양수량(m³/min)' }, footer: footerDecimal1, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'exlnPumpGrssPpqty',
+            fieldName: 'exlnPumpGrssPpqty',
+            header: { text: '총양수량(m³/min)' },
+            footer: footerDecimal1,
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                type: 'pumpGrossPpqty' as const,
+                pumpGroups: [
+                    {
+                        pumpCntField: 'exlnPumpN1Cnt',
+                        rsrvPumpCntField: 'exlnPumpN1RsrvCnt',
+                        perPpqtyField: 'exlnPumpN1Ppqty',
+                    },
+                    {
+                        pumpCntField: 'exlnPumpN2Cnt',
+                        rsrvPumpCntField: 'exlnPumpN2RsrvCnt',
+                        perPpqtyField: 'exlnPumpN2Ppqty',
+                    },
+                    {
+                        pumpCntField: 'exlnPumpN3Cnt',
+                        rsrvPumpCntField: 'exlnPumpN3RsrvCnt',
+                        perPpqtyField: 'exlnPumpN3Ppqty',
+                    },
+                ],
+            },
+        },
 
         // 배수능력 > 우수펌프(1)
-        { name: 'rainwaterPump1Diameter', fieldName: '우수펌프(1) 구경(mm)', header: { text: '구경(mm)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'rainwaterPump1Capacity', fieldName: '우수펌프(1) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'rainwaterPump1Count', fieldName: '우수펌프(1) 펌프대수', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'rainwaterPump1Reserve', fieldName: '우수펌프(1) 예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnPumpN1DmtrArea', fieldName: 'exlnPumpN1DmtrArea', header: { text: '구경(mm)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnPumpN1Ppqty', fieldName: 'exlnPumpN1Ppqty', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'exlnPumpN1Cnt', fieldName: 'exlnPumpN1Cnt', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnPumpN1RsrvCnt', fieldName: 'exlnPumpN1RsrvCnt', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 배수능력 > 우수펌프(2)
-        { name: 'rainwaterPump2Diameter', fieldName: '우수펌프(2) 구경(mm)', header: { text: '구경(mm)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'rainwaterPump2Capacity', fieldName: '우수펌프(2) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'rainwaterPump2Count', fieldName: '우수펌프(2) 펌프대수', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'rainwaterPump2Reserve', fieldName: '우수펌프(2) 예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnPumpN2DmtrArea', fieldName: 'exlnPumpN2DmtrArea', header: { text: '구경(mm)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnPumpN2Ppqty', fieldName: 'exlnPumpN2Ppqty', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'exlnPumpN2Cnt', fieldName: 'exlnPumpN2Cnt', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnPumpN2RsrvCnt', fieldName: 'exlnPumpN2RsrvCnt', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 배수능력 > 우수펌프(3)
-        { name: 'rainwaterPump3Diameter', fieldName: '우수펌프(3) 구경(mm)', header: { text: '구경(mm)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'rainwaterPump3Capacity', fieldName: '우수펌프(3) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'rainwaterPump3Count', fieldName: '우수펌프(3) 펌프대수', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'rainwaterPump3Reserve', fieldName: '우수펌프(3) 예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnPumpN3DmtrArea', fieldName: 'exlnPumpN3DmtrArea', header: { text: '구경(mm)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnPumpN3Ppqty', fieldName: 'exlnPumpN3Ppqty', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'exlnPumpN3Cnt', fieldName: 'exlnPumpN3Cnt', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnPumpN3RsrvCnt', fieldName: 'exlnPumpN3RsrvCnt', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 연간전력 사용량
-        { name: 'annualPowerUsage', fieldName: '연간전력사용량(kWh/년)', header: { text: '연간전력사용량(kWh/년)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'anlElpwrUseQnt', fieldName: 'anlElpwrUseQnt', header: { text: '연간전력사용량(kWh/년)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
         
         // 비고
-        { name: 'remarks', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
+
+        // Hidden Columns : 시스템 관리를 위한 값
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, },
+        { name: 'fcltSn', fieldName: 'fcltSn', header: { text: '시설일련번호' }, visible: false, },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false },
     ],
 
     columnLayout: [
@@ -78,66 +191,75 @@ export const PumpingStationInpColumn = {
             name: 'administrativeArea',
             hideChildHeaders: false,
             header: { text: '행정구역' },
-            items: ['sido', 'sgg'],
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
         },
-        'treatmentFacilityName',
-        'facilityName',
-        'classification',
-        'location',
-        'operationDate',
-        'planDrainageArea',
+        'swtrmtFcltNm',
+        'fcltNm',
+        'pumpSeNm',
+        'fcltPstnCn',
+        'oprtngStrtYmd',
+        'planMltvArea',
         {
             name: 'planFlowGroup',
             hideChildHeaders: false,
             header: { text: '계획시간대최대배수량(m³/hr)' },
-            items: ['fairWeatherFlow', 'rainyWeatherFlow', 'rainwaterFlow'],
+            items: ['sndyArea', 'rainArea', 'exlnQnt'],
         },
         {
             name: 'drainageCapability',
             hideChildHeaders: false,
             header: { text: '배수능력' },
             items: [
-                'sewageTotalPumpCapacity',
+                'drtwPumpGrssPpqty',
                 {
                     name: 'sewagePump1Group',
                     hideChildHeaders: false,
                     header: { text: '오수펌프(1)' },
-                    items: ['sewagePump1Diameter', 'sewagePump1Capacity', 'sewagePump1Count', 'sewagePump1Reserve'],
+                    items: ['drtwPumpN1DmtrArea', 'drtwPumpN1Ppqty', 'drtwPumpN1Cnt', 'drtwPumpN1RsrvCnt'],
                 },
                 {
                     name: 'sewagePump2Group',
                     hideChildHeaders: false,
                     header: { text: '오수펌프(2)' },
-                    items: ['sewagePump2Diameter', 'sewagePump2Capacity', 'sewagePump2Count', 'sewagePump2Reserve'],
+                    items: ['drtwPumpN2DmtrArea', 'drtwPumpN2Ppqty', 'drtwPumpN2Cnt', 'drtwPumpN2RsrvCnt'],
                 },
                 {
                     name: 'sewagePump3Group',
                     hideChildHeaders: false,
                     header: { text: '오수펌프(3)' },
-                    items: ['sewagePump3Diameter', 'sewagePump3Capacity', 'sewagePump3Count', 'sewagePump3Reserve'],
+                    items: ['drtwPumpN3DmtrArea', 'drtwPumpN3Ppqty', 'drtwPumpN3Cnt', 'drtwPumpN3RsrvCnt'],
                 },
-                'rainwaterTotalPumpCapacity',
+                'exlnPumpGrssPpqty',
                 {
                     name: 'rainwaterPump1Group',
                     hideChildHeaders: false,
                     header: { text: '우수펌프(1)' },
-                    items: ['rainwaterPump1Diameter', 'rainwaterPump1Capacity', 'rainwaterPump1Count', 'rainwaterPump1Reserve'],
+                    items: ['exlnPumpN1DmtrArea', 'exlnPumpN1Ppqty', 'exlnPumpN1Cnt', 'exlnPumpN1RsrvCnt'],
                 },
                 {
                     name: 'rainwaterPump2Group',
                     hideChildHeaders: false,
                     header: { text: '우수펌프(2)' },
-                    items: ['rainwaterPump2Diameter', 'rainwaterPump2Capacity', 'rainwaterPump2Count', 'rainwaterPump2Reserve'],
+                    items: ['exlnPumpN2DmtrArea', 'exlnPumpN2Ppqty', 'exlnPumpN2Cnt', 'exlnPumpN2RsrvCnt'],
                 },
                 {
                     name: 'rainwaterPump3Group',
                     hideChildHeaders: false,
                     header: { text: '우수펌프(3)' },
-                    items: ['rainwaterPump3Diameter', 'rainwaterPump3Capacity', 'rainwaterPump3Count', 'rainwaterPump3Reserve'],
+                    items: ['exlnPumpN3DmtrArea', 'exlnPumpN3Ppqty', 'exlnPumpN3Cnt', 'exlnPumpN3RsrvCnt'],
                 },
             ],
         },
-        'annualPowerUsage',
-        'remarks',
-    ]
+        'anlElpwrUseQnt',
+        'rmrk',
+        'admdstCd',
+        'fcltSn',
+        'admdstNm'
+    ],
+    rowStartNum: 3,
+    fixedColumns: 3,
+    tabKey: 'ST00050001',
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/StatsInputStatusInpColumn.ts b/apps/st/src/components/util/column/input/StatsInputStatusInpColumn.ts
index 7ed87ddc3..4cc2b6e65 100644
--- a/apps/st/src/components/util/column/input/StatsInputStatusInpColumn.ts
+++ b/apps/st/src/components/util/column/input/StatsInputStatusInpColumn.ts
@@ -10,8 +10,15 @@ export const StatsInputStatusInpColumn = {
         { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, editable: false },
         { name: 'statsCd', fieldName: 'statsCd', header: { text: '메뉴코드' }, visible: false, editable: false },
         { name: 'menuTabName', fieldName: 'menuTabName', header: { text: '구분' }, editable: false, width: 220 },
-        { name: 'locgStatusNm', fieldName: 'locgStatusNm', header: { text: '진행상황' }, editable: false },
-        // { name: 'inputRate', fieldName: 'inputRate', header: { text: '작성률' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'exceptionSubmitHistory',
+            fieldName: 'exceptionSubmitHistory',
+            header: { text: '예외제출내역' },
+            editable: false,
+            width: 118,
+            styleName: 'rg-cell-outline-action-btn',
+        },
+        { name: 'laeSbmsnSttsNm', fieldName: 'laeSbmsnSttsNm', header: { text: '진행상황' }, editable: false },
         { name: 'laePicNm', fieldName: 'laePicNm', header: { text: '작성자' }, editable: false },
         { name: 'laePicTelNo', fieldName: 'laePicTelNo', header: { text: '작성자연락처' }, editable: false },
         { name: 'laeKbrdrDeptNm', fieldName: 'laeKbrdrDeptNm', header: { text: '부서' }, editable: false },
@@ -20,6 +27,7 @@ export const StatsInputStatusInpColumn = {
         { name: 'laeIdfrDeptNm', fieldName: 'laeIdfrDeptNm', header: { text: '부서' }, editable: false },
         { name: 'laeIdfrJbgdNm', fieldName: 'laeIdfrJbgdNm', header: { text: '직제' }, editable: false },
         { name: 'rjctOpnnCn', fieldName: 'rjctOpnnCn', header: { text: '반려사유' }, editable: false },
+        { name: 'laeSbmsnSttsCd', fieldName: 'laeSbmsnSttsCd', header: { text: '진행상황' }, editable: false, visible: false },
     ],
 
     columnLayout: [
@@ -27,13 +35,13 @@ export const StatsInputStatusInpColumn = {
         'sggNm',
         'statsCd',
         'menuTabName',
+        'exceptionSubmitHistory',
         {
             name: 'groupA',
             hideChildHeaders: false,
             header: { text: '하수도사업자' },
             items: [
-                'locgStatusNm',
-                // 'inputRate',
+                'laeSbmsnSttsNm',
                 'laePicNm',
                 'laePicTelNo',
                 'laeKbrdrDeptNm',
@@ -41,7 +49,8 @@ export const StatsInputStatusInpColumn = {
                 'laeIdfrNm',
                 'laeIdfrDeptNm',
                 'laeIdfrJbgdNm',
-                'rjctOpnnCn'
+                'rjctOpnnCn',
+                'laeSbmsnSttsCd'
             ],
         },
     ]
diff --git a/apps/st/src/components/util/column/input/privateSewageFacility/PrivateSewageDesigStatusInpColumn.ts b/apps/st/src/components/util/column/input/privateSewageFacility/PrivateSewageDesigStatusInpColumn.ts
index b7eaf2cca..88cdc2e40 100644
--- a/apps/st/src/components/util/column/input/privateSewageFacility/PrivateSewageDesigStatusInpColumn.ts
+++ b/apps/st/src/components/util/column/input/privateSewageFacility/PrivateSewageDesigStatusInpColumn.ts
@@ -5,66 +5,64 @@ import { ValueType } from "realgrid";
 export const PrivateSewageDesigStatusInpColumn = {
     columns: [
         // 행정구역
-        { name: 'SIDO', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, editable: false, styleName: 'rg-cell-readonly'  },
 
         // 개인하수도관리지역공고현황
-        { name: 'MGMT_AR', fieldName: '공고지역(개소)', header: { text: '공고지역(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'APPN_SCOPE', fieldName: '지정범위(㎢)', header: { text: '지정범위(㎢)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'indvSwagePbancRgnCnt', fieldName: 'indvSwagePbancRgnCnt', header: { text: '공고지역(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'indvSwageDsgnScpLen', fieldName: 'indvSwageDsgnScpLen', header: { text: '지정범위(㎢)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 개인하수도관리지역공고현황 > 정화조
-        { name: 'STTY_CNT', fieldName: '개소수', header: { text: '개소수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_CPC', fieldName: '처리용량(인/일)', header: { text: '처리용량(인/일)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'spctnkGrssFcltCnt', fieldName: 'spctnkGrssFcltCnt', header: { text: '개소수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'spctnkQnt', fieldName: 'spctnkQnt', header: { text: '처리용량(인/일)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 개인하수도관리지역공고현황 > 오수시설
-        { name: 'WRRTN_CNT', fieldName: '개소수', header: { text: '개소수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'WRRTN_CPC', fieldName: '처리용량(m³/일)', header: { text: '처리용량(m³/일)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'drtwPrcsFcltGrssFcltCnt', fieldName: 'drtwPrcsFcltGrssFcltCnt', header: { text: '개소수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drtwPrcsFcltQnt', fieldName: 'drtwPrcsFcltQnt', header: { text: '처리용량(m³/일)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 비고
-        { name: 'RMK', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
         
-        // 검증 필드 (hidden)
-        { name: 'CHK_MGMT_AR', fieldName: 'CHK_MGMT_AR', header: { text: '' } },
-        { name: 'CHK_APPN_SCOPE', fieldName: 'CHK_APPN_SCOPE', header: { text: '' } },
-        { name: 'CHK_STTY_CNT', fieldName: 'CHK_STTY_CNT', header: { text: '' } },
-        { name: 'CHK_STTY_CPC', fieldName: 'CHK_STTY_CPC', header: { text: '' } },
-        { name: 'CHK_WRRTN_CNT', fieldName: 'CHK_WRRTN_CNT', header: { text: '' } },
-        { name: 'CHK_WRRTN_CPC', fieldName: 'CHK_WRRTN_CPC', header: { text: '' } },
-
-        { name: 'WRTER_OPINION', fieldName: '사용자의견', header: { text: '사용자의견' } },
-        { name: 'CHCKER_OPINION', fieldName: '검토자의견', header: { text: '검토자의견' } },
+        // hidden
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false },
     ],
     columnLayout: [
         {
             name: 'group_admin',
             header: { text: '행정구역' },
-            items: ['SIDO', 'GUGUN']
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
         },
         {
             name: 'group_notice',
             header: { text: '개인하수도관리지역공고현황 (하수도법제34조의2)' },
             items: [
-                'MGMT_AR',
-                'APPN_SCOPE',
+                'indvSwagePbancRgnCnt',
+                'indvSwageDsgnScpLen',
                 {
                     name: 'group_septic',
                     header: { text: '정화조' },
                     items: [
-                        'STTY_CNT',
-                        'STTY_CPC'
+                        'spctnkGrssFcltCnt',
+                        'spctnkQnt'
                     ]
                 },
                 {
                     name: 'group_sewage',
                     header: { text: '오수시설' },
                     items: [
-                        'WRRTN_CNT',
-                        'WRRTN_CPC'
+                        'drtwPrcsFcltGrssFcltCnt',
+                        'drtwPrcsFcltQnt'
                     ]
                 }
             ]
         },
-        'RMK'
+        'rmrk',
+        'admdstCd',
+        'admdstNm'
     ],
     rowStartNum: 3,
     fixedColumns: 1,
diff --git a/apps/st/src/components/util/column/input/privateSewageFacility/SepticTankStatusInpColumn.ts b/apps/st/src/components/util/column/input/privateSewageFacility/SepticTankStatusInpColumn.ts
index 4d2b45b8f..ef1d1aa1c 100644
--- a/apps/st/src/components/util/column/input/privateSewageFacility/SepticTankStatusInpColumn.ts
+++ b/apps/st/src/components/util/column/input/privateSewageFacility/SepticTankStatusInpColumn.ts
@@ -5,182 +5,316 @@ import { ValueType } from "realgrid";
 export const SepticTankStatusInpColumn = {
     columns: [
         // 행정구역
-        { name: 'SIDO', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, editable: false, styleName: 'rg-cell-readonly'  },
 
-        // 총 시설 수
-        { name: 'TOT_FCLTY_CNT', fieldName: '총 시설 수 (A+D)', header: { text: '총 시설 수 (A+D)' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        // 총 시설 수 — (B+C)/2 + (E+F)/2 = A + D
+        {
+            name: 'grssFcltCnt',
+            fieldName: 'grssFcltCnt',
+            header: { text: '총 시설 수 (A+D)' },
+            editable: false,
+            footer: footerInt,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+            styleName: 'rg-cell-total',
+            computed: {
+                firstHalfSum: {
+                    firstSumFields: [
+                        'staaInsdSttkNprsflCnt',
+                        'step1StaaInsdSttkFrcCnt',
+                        'staaInsdSprktpFltrtbCnt',
+                        'staaInsdAertMthdCnt',
+                        'staaInsdCntcAertCnt',
+                        'staaInsdEtcCnt',
+                    ],
+                    secondSumFields: [
+                        'step1StaaInsdNope',
+                        'step2StaaInsdNope',
+                        'step3StaaInsdNope',
+                        'step4StaaInsdNope',
+                        'step5StaaInsdNope',
+                        'step6StaaInsdNope',
+                        'step7StaaInsdNope',
+                        'step8StaaInsdNope',
+                    ],
+                },
+                secondHalfSum: {
+                    firstSumFields: [
+                        'staaExcpSttkNprsflCnt',
+                        'step1StaaExcpSttkFrcCnt',
+                        'staaExcpSprktpFltrtbCnt',
+                        'staaExcpAertMthdCnt',
+                        'staaExcpCntcAertCnt',
+                        'staaExcpEtcCnt',
+                    ],
+                    secondSumFields: [
+                        'step1StaaExcpNope',
+                        'step2StaaExcpNope',
+                        'step3StaaExcpNope',
+                        'step4StaaExcpNope',
+                        'step5StaaExcpNope',
+                        'step6StaaExcpNope',
+                        'step7StaaExcpNope',
+                        'step8StaaExcpNope',
+                    ],
+                },
+                type: 'sumOfTwoHalfSumOfSums' as const,
+            },
+        },
 
         // 하수처리구역 내 > 총계
-        { name: 'SPZI_SM', fieldName: '총계 A=(B+C)/2', header: { text: '총계 A=(B+C)/2' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'staaInsdWhol',
+            fieldName: 'staaInsdWhol',
+            header: { text: '총계 A=(B+C)/2' },
+            editable: false,
+            footer: footerInt,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+            styleName: 'rg-cell-total',
+            computed: {
+                firstSumFields: [
+                    'staaInsdSttkNprsflCnt',
+                    'step1StaaInsdSttkFrcCnt',
+                    'staaInsdSprktpFltrtbCnt',
+                    'staaInsdAertMthdCnt',
+                    'staaInsdCntcAertCnt',
+                    'staaInsdEtcCnt',
+                ],
+                secondSumFields: [
+                    'step1StaaInsdNope',
+                    'step2StaaInsdNope',
+                    'step3StaaInsdNope',
+                    'step4StaaInsdNope',
+                    'step5StaaInsdNope',
+                    'step6StaaInsdNope',
+                    'step7StaaInsdNope',
+                    'step8StaaInsdNope',
+                ],
+                type: 'halfSumOfSums' as const,
+            },
+        },
 
         // 하수처리구역 내 > 처리방식별
-        { name: 'SPZI_MTHD_SM', fieldName: '계(B)', header: { text: '계(B)' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'staaInsdPrcsMthByWhol',
+            fieldName: 'staaInsdPrcsMthByWhol',
+            header: { text: '계(B)' },
+            editable: false,
+            footer: footerInt,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: [
+                    'staaInsdSttkNprsflCnt',
+                    'step1StaaInsdSttkFrcCnt',
+                    'staaInsdSprktpFltrtbCnt',
+                    'staaInsdAertMthdCnt',
+                    'staaInsdCntcAertCnt',
+                    'staaInsdEtcCnt',
+                ],
+                type: 'sum' as const,
+            },
+        },
         
         // 하수처리구역 내 > 처리방식별 > 부패탱크
-        { name: 'SPZI_ROT_NPFL_CNT', fieldName: '자연유하', header: { text: '자연유하' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZI_ROT_ENFCT_PUMP_1', fieldName: '강제펌핑식', header: { text: '강제펌핑식' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'staaInsdSttkNprsflCnt', fieldName: 'staaInsdSttkNprsflCnt', header: { text: '자연유하' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step1StaaInsdSttkFrcCnt', fieldName: 'step1StaaInsdSttkFrcCnt', header: { text: '강제펌핑식' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 하수처리구역 내 > 처리방식별
-        { name: 'SPZI_WTROT_NPFL_CNT', fieldName: '살수여상', header: { text: '살수여상' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZI_TFM', fieldName: '폭기방법', header: { text: '폭기방법' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZI_ARTM', fieldName: '접촉폭기', header: { text: '접촉폭기' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZI_CTARM', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'staaInsdSprktpFltrtbCnt', fieldName: 'staaInsdSprktpFltrtbCnt', header: { text: '살수여상' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'staaInsdAertMthdCnt', fieldName: 'staaInsdAertMthdCnt', header: { text: '폭기방법' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'staaInsdCntcAertCnt', fieldName: 'staaInsdCntcAertCnt', header: { text: '접촉폭기' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'staaInsdEtcCnt', fieldName: 'staaInsdEtcCnt', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 하수처리구역 내 > 처리용량별
-        { name: 'SPZI_PROC_CPC_SM', fieldName: '계(C)', header: { text: '계(C)' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZI_PROC_CPC_1', fieldName: '10인조이하', header: { text: '10인조이하' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZI_PROC_CPC_2', fieldName: '11~20', header: { text: '11~20' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZI_PROC_CPC_3', fieldName: '21~30', header: { text: '21~30' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZI_PROC_CPC_4', fieldName: '31~50', header: { text: '31~50' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZI_PROC_CPC_5', fieldName: '51~199', header: { text: '51~199' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZI_PROC_CPC_6', fieldName: '200~499', header: { text: '200~499' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZI_PROC_CPC_7', fieldName: '500~999', header: { text: '500~999' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZI_PROC_CPC_8', fieldName: '1,000 이상', header: { text: '1,000 이상' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'staaInsdPrcsCpctByWhol',
+            fieldName: 'staaInsdPrcsCpctByWhol',
+            header: { text: '계(C)' },
+            editable: false,
+            footer: footerInt,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: [
+                    'step1StaaInsdNope',
+                    'step2StaaInsdNope',
+                    'step3StaaInsdNope',
+                    'step4StaaInsdNope',
+                    'step5StaaInsdNope',
+                    'step6StaaInsdNope',
+                    'step7StaaInsdNope',
+                    'step8StaaInsdNope',
+                ],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'step1StaaInsdNope', fieldName: 'step1StaaInsdNope', header: { text: '10인조이하' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step2StaaInsdNope', fieldName: 'step2StaaInsdNope', header: { text: '11~20' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step3StaaInsdNope', fieldName: 'step3StaaInsdNope', header: { text: '21~30' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step4StaaInsdNope', fieldName: 'step4StaaInsdNope', header: { text: '31~50' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step5StaaInsdNope', fieldName: 'step5StaaInsdNope', header: { text: '51~199' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step6StaaInsdNope', fieldName: 'step6StaaInsdNope', header: { text: '200~499' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step7StaaInsdNope', fieldName: 'step7StaaInsdNope', header: { text: '500~999' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step8StaaInsdNope', fieldName: 'step8StaaInsdNope', header: { text: '1,000 이상' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 하수처리구역 외 > 총계
-        { name: 'SPZO_SM', fieldName: '총계 D=(E+F)/2', header: { text: '총계 D=(E+F)/2' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'staaExcpWhol',
+            fieldName: 'staaExcpWhol',
+            header: { text: '총계 D=(E+F)/2' },
+            editable: false,
+            footer: footerInt,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+            styleName: 'rg-cell-total',
+            computed: {
+                firstSumFields: [
+                    'staaExcpSttkNprsflCnt',
+                    'step1StaaExcpSttkFrcCnt',
+                    'staaExcpSprktpFltrtbCnt',
+                    'staaExcpAertMthdCnt',
+                    'staaExcpCntcAertCnt',
+                    'staaExcpEtcCnt',
+                ],
+                secondSumFields: [
+                    'step1StaaExcpNope',
+                    'step2StaaExcpNope',
+                    'step3StaaExcpNope',
+                    'step4StaaExcpNope',
+                    'step5StaaExcpNope',
+                    'step6StaaExcpNope',
+                    'step7StaaExcpNope',
+                    'step8StaaExcpNope',
+                ],
+                type: 'halfSumOfSums' as const,
+            },
+        },
 
         // 하수처리구역 외 > 처리방식별
-        { name: 'SPZO_MTHD_SM', fieldName: '계(E)', header: { text: '계(E)' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'staaExcpPrcsMthByWhol',
+            fieldName: 'staaExcpPrcsMthByWhol',
+            header: { text: '계(E)' },
+            editable: false,
+            footer: footerInt,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: [
+                    'staaExcpSttkNprsflCnt',
+                    'step1StaaExcpSttkFrcCnt',
+                    'staaExcpSprktpFltrtbCnt',
+                    'staaExcpAertMthdCnt',
+                    'staaExcpCntcAertCnt',
+                    'staaExcpEtcCnt',
+                ],
+                type: 'sum' as const,
+            },
+        },
         
         // 하수처리구역 외 > 처리방식별 > 부패탱크
-        { name: 'SPZO_ROT_NPFL_CNT', fieldName: '자연유하', header: { text: '자연유하' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZO_ROT_ENFCT_PUMP_1', fieldName: '강제펌핑식', header: { text: '강제펌핑식' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'staaExcpSttkNprsflCnt', fieldName: 'staaExcpSttkNprsflCnt', header: { text: '자연유하' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step1StaaExcpSttkFrcCnt', fieldName: 'step1StaaExcpSttkFrcCnt', header: { text: '강제펌핑식' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 하수처리구역 외 > 처리방식별
-        { name: 'SPZO_WTROT_NPFL_CNT', fieldName: '살수여상', header: { text: '살수여상' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZO_TFM', fieldName: '폭기방법', header: { text: '폭기방법' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZO_ARTM', fieldName: '접촉폭기', header: { text: '접촉폭기' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZO_CTARM', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'staaExcpSprktpFltrtbCnt', fieldName: 'staaExcpSprktpFltrtbCnt', header: { text: '살수여상' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'staaExcpAertMthdCnt', fieldName: 'staaExcpAertMthdCnt', header: { text: '폭기방법' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'staaExcpCntcAertCnt', fieldName: 'staaExcpCntcAertCnt', header: { text: '접촉폭기' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'staaExcpEtcCnt', fieldName: 'staaExcpEtcCnt', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 하수처리구역 외 > 처리용량별
-        { name: 'SPZO_PROC_CPC_SM', fieldName: '계(F)', header: { text: '계(F)' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZO_PROC_CPC_1', fieldName: '10인조이하', header: { text: '10인조이하' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZO_PROC_CPC_2', fieldName: '11~20', header: { text: '11~20' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZO_PROC_CPC_3', fieldName: '21~30', header: { text: '21~30' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZO_PROC_CPC_4', fieldName: '31~50', header: { text: '31~50' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZO_PROC_CPC_5', fieldName: '51~199', header: { text: '51~199' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZO_PROC_CPC_6', fieldName: '200~499', header: { text: '200~499' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZO_PROC_CPC_7', fieldName: '500~999', header: { text: '500~999' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SPZO_PROC_CPC_8', fieldName: '1,000 이상', header: { text: '1,000 이상' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'staaExcpPrcsCpctByWhol',
+            fieldName: 'staaExcpPrcsCpctByWhol',
+            header: { text: '계(F)' },
+            editable: false,
+            footer: footerInt,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: [
+                    'step1StaaExcpNope',
+                    'step2StaaExcpNope',
+                    'step3StaaExcpNope',
+                    'step4StaaExcpNope',
+                    'step5StaaExcpNope',
+                    'step6StaaExcpNope',
+                    'step7StaaExcpNope',
+                    'step8StaaExcpNope',
+                ],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'step1StaaExcpNope', fieldName: 'step1StaaExcpNope', header: { text: '10인조이하' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step2StaaExcpNope', fieldName: 'step2StaaExcpNope', header: { text: '11~20' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step3StaaExcpNope', fieldName: 'step3StaaExcpNope', header: { text: '21~30' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step4StaaExcpNope', fieldName: 'step4StaaExcpNope', header: { text: '31~50' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step5StaaExcpNope', fieldName: 'step5StaaExcpNope', header: { text: '51~199' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step6StaaExcpNope', fieldName: 'step6StaaExcpNope', header: { text: '200~499' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step7StaaExcpNope', fieldName: 'step7StaaExcpNope', header: { text: '500~999' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step8StaaExcpNope', fieldName: 'step8StaaExcpNope', header: { text: '1,000 이상' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 비고
-        { name: 'RMK', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
 
         // hidden
-        { name: 'WRTER_OPINION', fieldName: '사용자의견', header: { text: '사용자의견' } },
-        { name: 'CHCKER_OPINION', fieldName: '검토자의견', header: { text: '검토자의견' } },
-
-        // 검증 필드 (검증 여부 표시용 - 빨간색 표시)
-        { name: 'CHK_TOT_FCLTY_CNT', fieldName: 'CHK_TOT_FCLTY_CNT', header: { text: '' } },
-        { name: 'CHK_SPZI_SM', fieldName: 'CHK_SPZI_SM', header: { text: '' } },
-        { name: 'CHK_SPZI_MTHD_SM', fieldName: 'CHK_SPZI_MTHD_SM', header: { text: '' } },
-        { name: 'CHK_SPZI_ROT_NPFL_CNT', fieldName: 'CHK_SPZI_ROT_NPFL_CNT', header: { text: '' } },
-        { name: 'CHK_SPZI_ROT_ENFCT_PUMP_1', fieldName: 'CHK_SPZI_ROT_ENFCT_PUMP_1', header: { text: '' } },
-        { name: 'CHK_SPZI_ROT_ENFCT_PUMP_2', fieldName: 'CHK_SPZI_ROT_ENFCT_PUMP_2', header: { text: '' } },
-        { name: 'CHK_SPZI_ROT_ENFCT_PUMP_3', fieldName: 'CHK_SPZI_ROT_ENFCT_PUMP_3', header: { text: '' } },
-        { name: 'CHK_SPZI_ROT_TANK_SM', fieldName: 'CHK_SPZI_ROT_TANK_SM', header: { text: '' } },
-        { name: 'CHK_SPZI_IMHF_NPFL_CNT', fieldName: 'CHK_SPZI_IMHF_NPFL_CNT', header: { text: '' } },
-        { name: 'CHK_SPZI_IMHF_ENFCT_PUMP_1', fieldName: 'CHK_SPZI_IMHF_ENFCT_PUMP_1', header: { text: '' } },
-        { name: 'CHK_SPZI_IMHF_ENFCT_PUMP_2', fieldName: 'CHK_SPZI_IMHF_ENFCT_PUMP_2', header: { text: '' } },
-        { name: 'CHK_SPZI_IMHF_ENFCT_PUMP_3', fieldName: 'CHK_SPZI_IMHF_ENFCT_PUMP_3', header: { text: '' } },
-        { name: 'CHK_SPZI_IMHF_TANK_SM', fieldName: 'CHK_SPZI_IMHF_TANK_SM', header: { text: '' } },
-        { name: 'CHK_SPZI_WTROT_NPFL_CNT', fieldName: 'CHK_SPZI_WTROT_NPFL_CNT', header: { text: '' } },
-        { name: 'CHK_SPZI_WTROT_ENFCT_PUMP_1', fieldName: 'CHK_SPZI_WTROT_ENFCT_PUMP_1', header: { text: '' } },
-        { name: 'CHK_SPZI_WTROT_ENFCT_PUMP_2', fieldName: 'CHK_SPZI_WTROT_ENFCT_PUMP_2', header: { text: '' } },
-        { name: 'CHK_SPZI_WTROT_ENFCT_PUMP_3', fieldName: 'CHK_SPZI_WTROT_ENFCT_PUMP_3', header: { text: '' } },
-        { name: 'CHK_SPZI_WTROT_TANK_SM', fieldName: 'CHK_SPZI_WTROT_TANK_SM', header: { text: '' } },
-        { name: 'CHK_SPZI_TFM', fieldName: 'CHK_SPZI_TFM', header: { text: '' } },
-        { name: 'CHK_SPZI_ARTM', fieldName: 'CHK_SPZI_ARTM', header: { text: '' } },
-        { name: 'CHK_SPZI_CTARM', fieldName: 'CHK_SPZI_CTARM', header: { text: '' } },
-        { name: 'CHK_SPZI_NPFL', fieldName: 'CHK_SPZI_NPFL', header: { text: '' } },
-        { name: 'CHK_SPZI_ENFCT_PUMP', fieldName: 'CHK_SPZI_ENFCT_PUMP', header: { text: '' } },
-        { name: 'CHK_SPZI_PROC_CPC_SM', fieldName: 'CHK_SPZI_PROC_CPC_SM', header: { text: '' } },
-        { name: 'CHK_SPZI_PROC_CPC_1', fieldName: 'CHK_SPZI_PROC_CPC_1', header: { text: '' } },
-        { name: 'CHK_SPZI_PROC_CPC_2', fieldName: 'CHK_SPZI_PROC_CPC_2', header: { text: '' } },
-        { name: 'CHK_SPZI_PROC_CPC_3', fieldName: 'CHK_SPZI_PROC_CPC_3', header: { text: '' } },
-        { name: 'CHK_SPZI_PROC_CPC_4', fieldName: 'CHK_SPZI_PROC_CPC_4', header: { text: '' } },
-        { name: 'CHK_SPZI_PROC_CPC_5', fieldName: 'CHK_SPZI_PROC_CPC_5', header: { text: '' } },
-        { name: 'CHK_SPZI_PROC_CPC_6', fieldName: 'CHK_SPZI_PROC_CPC_6', header: { text: '' } },
-        { name: 'CHK_SPZI_PROC_CPC_7', fieldName: 'CHK_SPZI_PROC_CPC_7', header: { text: '' } },
-        { name: 'CHK_SPZI_PROC_CPC_8', fieldName: 'CHK_SPZI_PROC_CPC_8', header: { text: '' } },
-        { name: 'CHK_SPZO_SM', fieldName: 'CHK_SPZO_SM', header: { text: '' } },
-        { name: 'CHK_SPZO_MTHD_SM', fieldName: 'CHK_SPZO_MTHD_SM', header: { text: '' } },
-        { name: 'CHK_SPZO_ROT_NPFL_CNT', fieldName: 'CHK_SPZO_ROT_NPFL_CNT', header: { text: '' } },
-        { name: 'CHK_SPZO_ROT_ENFCT_PUMP_1', fieldName: 'CHK_SPZO_ROT_ENFCT_PUMP_1', header: { text: '' } },
-        { name: 'CHK_SPZO_ROT_ENFCT_PUMP_2', fieldName: 'CHK_SPZO_ROT_ENFCT_PUMP_2', header: { text: '' } },
-        { name: 'CHK_SPZO_ROT_ENFCT_PUMP_3', fieldName: 'CHK_SPZO_ROT_ENFCT_PUMP_3', header: { text: '' } },
-        { name: 'CHK_SPZO_ROT_TANK_SM', fieldName: 'CHK_SPZO_ROT_TANK_SM', header: { text: '' } },
-        { name: 'CHK_SPZO_IMHF_NPFL_CNT', fieldName: 'CHK_SPZO_IMHF_NPFL_CNT', header: { text: '' } },
-        { name: 'CHK_SPZO_IMHF_ENFCT_PUMP_1', fieldName: 'CHK_SPZO_IMHF_ENFCT_PUMP_1', header: { text: '' } },
-        { name: 'CHK_SPZO_IMHF_ENFCT_PUMP_2', fieldName: 'CHK_SPZO_IMHF_ENFCT_PUMP_2', header: { text: '' } },
-        { name: 'CHK_SPZO_IMHF_ENFCT_PUMP_3', fieldName: 'CHK_SPZO_IMHF_ENFCT_PUMP_3', header: { text: '' } },
-        { name: 'CHK_SPZO_IMHF_TANK_SM', fieldName: 'CHK_SPZO_IMHF_TANK_SM', header: { text: '' } },
-        { name: 'CHK_SPZO_WTROT_NPFL_CNT', fieldName: 'CHK_SPZO_WTROT_NPFL_CNT', header: { text: '' } },
-        { name: 'CHK_SPZO_WTROT_ENFCT_PUMP_1', fieldName: 'CHK_SPZO_WTROT_ENFCT_PUMP_1', header: { text: '' } },
-        { name: 'CHK_SPZO_WTROT_ENFCT_PUMP_2', fieldName: 'CHK_SPZO_WTROT_ENFCT_PUMP_2', header: { text: '' } },
-        { name: 'CHK_SPZO_WTROT_ENFCT_PUMP_3', fieldName: 'CHK_SPZO_WTROT_ENFCT_PUMP_3', header: { text: '' } },
-        { name: 'CHK_SPZO_WTROT_TANK_SM', fieldName: 'CHK_SPZO_WTROT_TANK_SM', header: { text: '' } },
-        { name: 'CHK_SPZO_TFM', fieldName: 'CHK_SPZO_TFM', header: { text: '' } },
-        { name: 'CHK_SPZO_ARTM', fieldName: 'CHK_SPZO_ARTM', header: { text: '' } },
-        { name: 'CHK_SPZO_CTARM', fieldName: 'CHK_SPZO_CTARM', header: { text: '' } },
-        { name: 'CHK_SPZO_NPFL', fieldName: 'CHK_SPZO_NPFL', header: { text: '' } },
-        { name: 'CHK_SPZO_ENFCT_PUMP', fieldName: 'CHK_SPZO_ENFCT_PUMP', header: { text: '' } },
-        { name: 'CHK_SPZO_PROC_CPC_SM', fieldName: 'CHK_SPZO_PROC_CPC_SM', header: { text: '' } },
-        { name: 'CHK_SPZO_PROC_CPC_1', fieldName: 'CHK_SPZO_PROC_CPC_1', header: { text: '' } },
-        { name: 'CHK_SPZO_PROC_CPC_2', fieldName: 'CHK_SPZO_PROC_CPC_2', header: { text: '' } },
-        { name: 'CHK_SPZO_PROC_CPC_3', fieldName: 'CHK_SPZO_PROC_CPC_3', header: { text: '' } },
-        { name: 'CHK_SPZO_PROC_CPC_4', fieldName: 'CHK_SPZO_PROC_CPC_4', header: { text: '' } },
-        { name: 'CHK_SPZO_PROC_CPC_5', fieldName: 'CHK_SPZO_PROC_CPC_5', header: { text: '' } },
-        { name: 'CHK_SPZO_PROC_CPC_6', fieldName: 'CHK_SPZO_PROC_CPC_6', header: { text: '' } },
-        { name: 'CHK_SPZO_PROC_CPC_7', fieldName: 'CHK_SPZO_PROC_CPC_7', header: { text: '' } },
-        { name: 'CHK_SPZO_PROC_CPC_8', fieldName: 'CHK_SPZO_PROC_CPC_8', header: { text: '' } },
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false },
     ],
     columnLayout: [
         {
             name: 'group_admin',
             header: { text: '행정구역' },
-            items: ['SIDO', 'GUGUN']
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
         },
-        'TOT_FCLTY_CNT',
+        'grssFcltCnt',
         {
             name: 'group_spzi',
             header: { text: '하수처리구역 내' },
             items: [
-                'SPZI_SM',
+                'staaInsdWhol',
                 {
                     name: 'group_spzi_mthd',
                     header: { text: '처리방식별' },
                     items: [
-                        'SPZI_MTHD_SM',
+                        'staaInsdPrcsMthByWhol',
                         {
                             name: 'group_spzi_rot',
                             header: { text: '부패탱크' },
                             items: [
-                                'SPZI_ROT_NPFL_CNT',
-                                'SPZI_ROT_ENFCT_PUMP_1'
+                                'staaInsdSttkNprsflCnt',
+                                'step1StaaInsdSttkFrcCnt'
                             ]
                         },
-                        'SPZI_WTROT_NPFL_CNT',
-                        'SPZI_TFM',
-                        'SPZI_ARTM',
-                        'SPZI_CTARM'
+                        'staaInsdSprktpFltrtbCnt',
+                        'staaInsdAertMthdCnt',
+                        'staaInsdCntcAertCnt',
+                        'staaInsdEtcCnt'
                     ]
                 },
                 {
                     name: 'group_spzi_proc',
                     header: { text: '처리용량별' },
                     items: [
-                        'SPZI_PROC_CPC_SM',
-                        'SPZI_PROC_CPC_1',
-                        'SPZI_PROC_CPC_2',
-                        'SPZI_PROC_CPC_3',
-                        'SPZI_PROC_CPC_4',
-                        'SPZI_PROC_CPC_5',
-                        'SPZI_PROC_CPC_6',
-                        'SPZI_PROC_CPC_7',
-                        'SPZI_PROC_CPC_8'
+                        'staaInsdPrcsCpctByWhol',
+                        'step1StaaInsdNope',
+                        'step2StaaInsdNope',
+                        'step3StaaInsdNope',
+                        'step4StaaInsdNope',
+                        'step5StaaInsdNope',
+                        'step6StaaInsdNope',
+                        'step7StaaInsdNope',
+                        'step8StaaInsdNope'
                     ]
                 }
             ]
@@ -189,47 +323,49 @@ export const SepticTankStatusInpColumn = {
             name: 'group_spzo',
             header: { text: '하수처리구역 외' },
             items: [
-                'SPZO_SM',
+                'staaExcpWhol',
                 {
                     name: 'group_spzo_mthd',
                     header: { text: '처리방식별' },
                     items: [
-                        'SPZO_MTHD_SM',
+                        'staaExcpPrcsMthByWhol',
                         {
                             name: 'group_spzo_rot',
                             header: { text: '부패탱크' },
                             items: [
-                                'SPZO_ROT_NPFL_CNT',
-                                'SPZO_ROT_ENFCT_PUMP_1'
+                                'staaExcpSttkNprsflCnt',
+                                'step1StaaExcpSttkFrcCnt'
                             ]
                         },
-                        'SPZO_WTROT_NPFL_CNT',
-                        'SPZO_TFM',
-                        'SPZO_ARTM',
-                        'SPZO_CTARM'
+                        'staaExcpSprktpFltrtbCnt',
+                        'staaExcpAertMthdCnt',
+                        'staaExcpCntcAertCnt',
+                        'staaExcpEtcCnt'
                     ]
                 },
                 {
                     name: 'group_spzo_proc',
                     header: { text: '처리용량별' },
                     items: [
-                        'SPZO_PROC_CPC_SM',
-                        'SPZO_PROC_CPC_1',
-                        'SPZO_PROC_CPC_2',
-                        'SPZO_PROC_CPC_3',
-                        'SPZO_PROC_CPC_4',
-                        'SPZO_PROC_CPC_5',
-                        'SPZO_PROC_CPC_6',
-                        'SPZO_PROC_CPC_7',
-                        'SPZO_PROC_CPC_8'
+                        'staaExcpPrcsCpctByWhol',
+                        'step1StaaExcpNope',
+                        'step2StaaExcpNope',
+                        'step3StaaExcpNope',
+                        'step4StaaExcpNope',
+                        'step5StaaExcpNope',
+                        'step6StaaExcpNope',
+                        'step7StaaExcpNope',
+                        'step8StaaExcpNope'
                     ]
                 }
             ]
         },
-        'RMK'
+        'rmrk',
+        'admdstCd',
+        'admdstNm'
     ],
     rowStartNum: 4,
     fixedColumns: 1,
-    tabKey: 'septicTankStatusInp',
+    tabKey: 'ST00080002',
     tabLabel: '정화조 현황'
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/privateSewageFacility/SewageTreatFactStatusInpColumn.ts b/apps/st/src/components/util/column/input/privateSewageFacility/SewageTreatFactStatusInpColumn.ts
index 40e77978a..2c247a3de 100644
--- a/apps/st/src/components/util/column/input/privateSewageFacility/SewageTreatFactStatusInpColumn.ts
+++ b/apps/st/src/components/util/column/input/privateSewageFacility/SewageTreatFactStatusInpColumn.ts
@@ -5,65 +5,119 @@ import { ValueType } from "realgrid";
 export const SewageTreatFactStatusInpColumn = {
     columns: [
         // 행정구역
-        { name: 'SIDO', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, editable: false, styleName: 'rg-cell-readonly'  },
 
         // 총계
-        { name: 'STTY_SM', fieldName: '총계', header: { text: '총계' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { 
+            name: 'wholDrtwPrcsFcltCnt',
+            fieldName: 'wholDrtwPrcsFcltCnt',
+            header: { text: '총계' },
+            editable: false,
+            footer: footerInt,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: [
+                    'step1StaaPrcsQnt',
+                    'step2StaaPrcsQnt',
+                    'step3StaaPrcsQnt',
+                    'step4StaaPrcsQnt',
+                    'step5StaaPrcsQnt',
+                    'step6StaaPrcsQnt',
+                    'step7StaaPrcsQnt',
+                    'step1StaaExcpPrcsQnt',
+                    'step2StaaExcpPrcsQnt',
+                    'step3StaaExcpPrcsQnt',
+                    'step4StaaExcpPrcsQnt',
+                    'step5StaaExcpPrcsQnt',
+                    'step6StaaExcpPrcsQnt',
+                    'step7StaaExcpPrcsQnt',
+                ],
+                type: 'sum' as const,
+            },
+        },
 
         // 오수처리시설 > 하수처리구역 내(m³/일)
-        { name: 'STTY_ZONE_INNER_SM', fieldName: '계', header: { text: '계' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_INNER_2', fieldName: '2이하', header: { text: '2이하' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_INNER_3', fieldName: '3~10', header: { text: '3~10' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_INNER_11', fieldName: '11~20', header: { text: '11~20' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_INNER_21', fieldName: '21~50', header: { text: '21~50' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_INNER_51', fieldName: '51~100', header: { text: '51~100' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_INNER_101', fieldName: '101~500', header: { text: '101~500' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_INNER_501', fieldName: '501이상', header: { text: '501이상' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'wholStaaCnt',
+            fieldName: 'wholStaaCnt',
+            header: { text: '계' },
+            editable: false,
+            footer: footerInt,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: [
+                    'step1StaaPrcsQnt',
+                    'step2StaaPrcsQnt',
+                    'step3StaaPrcsQnt',
+                    'step4StaaPrcsQnt',
+                    'step5StaaPrcsQnt',
+                    'step6StaaPrcsQnt',
+                    'step7StaaPrcsQnt',
+                ],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'step1StaaPrcsQnt', fieldName: 'step1StaaPrcsQnt', header: { text: '2이하' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step2StaaPrcsQnt', fieldName: 'step2StaaPrcsQnt', header: { text: '3~10' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step3StaaPrcsQnt', fieldName: 'step3StaaPrcsQnt', header: { text: '11~20' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step4StaaPrcsQnt', fieldName: 'step4StaaPrcsQnt', header: { text: '21~50' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step5StaaPrcsQnt', fieldName: 'step5StaaPrcsQnt', header: { text: '51~100' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step6StaaPrcsQnt', fieldName: 'step6StaaPrcsQnt', header: { text: '101~500' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step7StaaPrcsQnt', fieldName: 'step7StaaPrcsQnt', header: { text: '501이상' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 오수처리시설 > 하수처리구역 외(m³/일)
-        { name: 'STTY_ZONE_OUTER_SM', fieldName: '계', header: { text: '계' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_OUTER_2', fieldName: '2이하', header: { text: '2이하' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_OUTER_3', fieldName: '3~10', header: { text: '3~10' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_OUTER_11', fieldName: '11~20', header: { text: '11~20' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_OUTER_21', fieldName: '21~50', header: { text: '21~50' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_OUTER_51', fieldName: '51~100', header: { text: '51~100' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_OUTER_101', fieldName: '101~500', header: { text: '101~500' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'STTY_ZONE_OUTER_501', fieldName: '501이상', header: { text: '501이상' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'staaExcpWhol',
+            fieldName: 'staaExcpWhol',
+            header: { text: '계' },
+            editable: false,
+            footer: footerInt,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: [
+                    'step1StaaExcpPrcsQnt',
+                    'step2StaaExcpPrcsQnt',
+                    'step3StaaExcpPrcsQnt',
+                    'step4StaaExcpPrcsQnt',
+                    'step5StaaExcpPrcsQnt',
+                    'step6StaaExcpPrcsQnt',
+                    'step7StaaExcpPrcsQnt',
+                ],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'step1StaaExcpPrcsQnt', fieldName: 'step1StaaExcpPrcsQnt', header: { text: '2이하' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step2StaaExcpPrcsQnt', fieldName: 'step2StaaExcpPrcsQnt', header: { text: '3~10' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step3StaaExcpPrcsQnt', fieldName: 'step3StaaExcpPrcsQnt', header: { text: '11~20' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step4StaaExcpPrcsQnt', fieldName: 'step4StaaExcpPrcsQnt', header: { text: '21~50' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step5StaaExcpPrcsQnt', fieldName: 'step5StaaExcpPrcsQnt', header: { text: '51~100' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step6StaaExcpPrcsQnt', fieldName: 'step6StaaExcpPrcsQnt', header: { text: '101~500' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'step7StaaExcpPrcsQnt', fieldName: 'step7StaaExcpPrcsQnt', header: { text: '501이상' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 비고
-        { name: 'RMK', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
 
         // hidden
-        { name: 'WRTER_OPINION', fieldName: '사용자의견', header: { text: '사용자의견' } },
-        { name: 'CHCKER_OPINION', fieldName: '검토자의견', header: { text: '검토자의견' } },
-
-        // 검증 필드 (검증 여부 표시용, 빨간색 표시)
-        { name: 'CHK_STTY_SM', fieldName: 'CHK_STTY_SM', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_INNER_SM', fieldName: 'CHK_STTY_ZONE_INNER_SM', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_INNER_2', fieldName: 'CHK_STTY_ZONE_INNER_2', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_INNER_3', fieldName: 'CHK_STTY_ZONE_INNER_3', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_INNER_11', fieldName: 'CHK_STTY_ZONE_INNER_11', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_INNER_21', fieldName: 'CHK_STTY_ZONE_INNER_21', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_INNER_51', fieldName: 'CHK_STTY_ZONE_INNER_51', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_INNER_101', fieldName: 'CHK_STTY_ZONE_INNER_101', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_INNER_501', fieldName: 'CHK_STTY_ZONE_INNER_501', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_OUTER_SM', fieldName: 'CHK_STTY_ZONE_OUTER_SM', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_OUTER_2', fieldName: 'CHK_STTY_ZONE_OUTER_2', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_OUTER_3', fieldName: 'CHK_STTY_ZONE_OUTER_3', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_OUTER_11', fieldName: 'CHK_STTY_ZONE_OUTER_11', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_OUTER_21', fieldName: 'CHK_STTY_ZONE_OUTER_21', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_OUTER_51', fieldName: 'CHK_STTY_ZONE_OUTER_51', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_OUTER_101', fieldName: 'CHK_STTY_ZONE_OUTER_101', header: { text: '' } },
-        { name: 'CHK_STTY_ZONE_OUTER_501', fieldName: 'CHK_STTY_ZONE_OUTER_501', header: { text: '' } },
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false },
     ],
     columnLayout: [
         {
             name: 'group_admin',
             header: { text: '행정구역' },
-            items: ['SIDO', 'GUGUN']
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
         },
-        'STTY_SM',
+        'wholDrtwPrcsFcltCnt',
         {
             name: 'group_stty',
             header: { text: '오수처리시설' },
@@ -72,36 +126,38 @@ export const SewageTreatFactStatusInpColumn = {
                     name: 'group_inner',
                     header: { text: '하수처리구역 내(m³/일)' },
                     items: [
-                        'STTY_ZONE_INNER_SM',
-                        'STTY_ZONE_INNER_2',
-                        'STTY_ZONE_INNER_3',
-                        'STTY_ZONE_INNER_11',
-                        'STTY_ZONE_INNER_21',
-                        'STTY_ZONE_INNER_51',
-                        'STTY_ZONE_INNER_101',
-                        'STTY_ZONE_INNER_501'
+                        'wholStaaCnt',
+                        'step1StaaPrcsQnt',
+                        'step2StaaPrcsQnt',
+                        'step3StaaPrcsQnt',
+                        'step4StaaPrcsQnt',
+                        'step5StaaPrcsQnt',
+                        'step6StaaPrcsQnt',
+                        'step7StaaPrcsQnt'
                     ]
                 },
                 {
                     name: 'group_outer',
                     header: { text: '하수처리구역 외(m³/일)' },
                     items: [
-                        'STTY_ZONE_OUTER_SM',
-                        'STTY_ZONE_OUTER_2',
-                        'STTY_ZONE_OUTER_3',
-                        'STTY_ZONE_OUTER_11',
-                        'STTY_ZONE_OUTER_21',
-                        'STTY_ZONE_OUTER_51',
-                        'STTY_ZONE_OUTER_101',
-                        'STTY_ZONE_OUTER_501'
+                        'staaExcpWhol',
+                        'step1StaaExcpPrcsQnt',
+                        'step2StaaExcpPrcsQnt',
+                        'step3StaaExcpPrcsQnt',
+                        'step4StaaExcpPrcsQnt',
+                        'step5StaaExcpPrcsQnt',
+                        'step6StaaExcpPrcsQnt',
+                        'step7StaaExcpPrcsQnt'
                     ]
                 }
             ]
         },
-        'RMK'
+        'rmrk',
+        'admdstCd',
+        'admdstNm'
     ],
     rowStartNum: 3,
     fixedColumns: 1,
-    tabKey: 'sewageTreatFactStatusInp',
+    tabKey: 'ST00080001',
     tabLabel: '처리용량별 오수처리시설 현황'
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/sewagePipe/ConnectionStatusInpColumn.ts b/apps/st/src/components/util/column/input/sewagePipe/ConnectionStatusInpColumn.ts
index 03a3157da..c28f12bc7 100644
--- a/apps/st/src/components/util/column/input/sewagePipe/ConnectionStatusInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewagePipe/ConnectionStatusInpColumn.ts
@@ -1,52 +1,68 @@
 import { ValueType } from "realgrid";
+import type { GridTopButtonConfig } from "@/components/type/DataGrid.type";
 
 // 하수도 통계 관리 > 02.하수관로 > tab 6. 시설별 현황관리
 // Tab 6-1: 행정구역별 연결 현황 (오른쪽 그리드)
 export const AdminAreaConnectionInpColumn = {
     columns: [
         // 행정구역
-        { name: 'sido', fieldName: '시도', header: { text: '시도' } },
-        { name: 'sgg', fieldName: '시군구', header: { text: '시군구' } },
-        { name: 'adstDong', fieldName: '행정구역명', header: { text: '행정구역명' } },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, editable: false },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, editable: false },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, editable: false },
         // 연결여부
-        { name: 'iscan', fieldName: '연결여부', header: { text: '연결여부' } },
+        { name: 'isConnection', fieldName: 'isConnection', header: { text: '연결여부' }, editable: false },
         // 연결하수처리장
-        { name: 'bscFctNm', fieldName: '연결하수처리장', header: { text: '연결하수처리장' } },
+        { name: 'connectionBscFctNmList', fieldName: 'connectionBscFctNmList', header: { text: '연결하수처리장' }, editable: false },
+        {
+            name: 'admdstCd',
+            fieldName: 'admdstCd',
+            header: { text: '행정구역코드' },
+            visible: false,
+            editable: false,
+        },
     ],
     columnLayout: [
         {
             name: 'adminArea',
             hideChildHeaders: false,
             header: { text: '행정구역' },
-            items: ['sido', 'sgg', 'adstDong'],
+            items: ['ctpvNm', 'sggNm', 'admdstNm'],
         },
-        'iscan',
-        'bscFctNm',
+        'isConnection',
+        'connectionBscFctNmList',
+        'admdstCd'
     ],
     rowStartNum: 2,
     fixedColumns: 1,
     tabKey: 'adminAreaConnectionInp',
-    tabLabel: '행정구역별 연결 현황'
+    tabLabel: '행정구역별 연결 현황',
+    topButton: {
+        visible: true,
+        text: '시설별 설치 현황 관리',
+        onClick: ({ openDialog }: Parameters<NonNullable<GridTopButtonConfig["onClick"]>>[0]) => {
+            openDialog('시설별 설치 현황 관리');
+        },
+    },
 };
 
 // Tab 6-2: 하수처리장별 연결 현황 (왼쪽 그리드)
 export const TreatPlantConnectionInpColumn = {
     columns: [
         // 하수처리장 정보
-        { name: 'bscFctNm', fieldName: '하수처리장명', header: { text: '하수처리장명' } },
-        { name: 'fctCpc', fieldName: '용량', header: { text: '용량' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'bscFctCd', fieldName: '하수처리장코드', header: { text: '하수처리장코드' } },
+        { name: 'fcltNm', fieldName: 'fcltNm', header: { text: '하수처리장명' }, editable: false },
+        { name: 'fcltCpct', fieldName: 'fcltCpct', header: { text: '용량' }, valueType: ValueType.NUMBER, dataFormat: '#,##0', editable: false },
+        { name: 'fcltSn', fieldName: 'fcltSn', header: { text: '하수처리장코드' }, editable: false },
         // 연결여부
-        { name: 'iscan', fieldName: '연결여부', header: { text: '연결여부' } },
+        { name: 'isConnection', fieldName: 'isConnection', header: { text: '연결여부' }, editable: false },
         // 연결지역
-        { name: 'nmlist', fieldName: '연결지역', header: { text: '연결지역' } },
+        { name: 'connectionAreaList', fieldName: 'connectionAreaList', header: { text: '연결지역' }, editable: false },
     ],
     columnLayout: [
-        'bscFctNm',
-        'fctCpc',
-        'bscFctCd',
-        'iscan',
-        'nmlist',
+        'fcltNm',
+        'fcltCpct',
+        'fcltSn',
+        'isConnection',
+        'connectionAreaList',
     ],
     rowStartNum: 1,
     fixedColumns: 1,
@@ -55,9 +71,9 @@ export const TreatPlantConnectionInpColumn = {
 };
 
 export const ConnectionStatusInpColumn = {
-    tabKey: 'treatmentPlantConnectionInp',
+    tabKey: 'ST00020006',
     tabLabel: '시설별 현황 관리',
     isSplitGrid: true,
-    left: AdminAreaConnectionInpColumn,
-    right: TreatPlantConnectionInpColumn,
+    left: TreatPlantConnectionInpColumn,
+    right: AdminAreaConnectionInpColumn,
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/sewagePipe/FactInstallStatusInpColumn.ts b/apps/st/src/components/util/column/input/sewagePipe/FactInstallStatusInpColumn.ts
index 213ceb818..cccf7e136 100644
--- a/apps/st/src/components/util/column/input/sewagePipe/FactInstallStatusInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewagePipe/FactInstallStatusInpColumn.ts
@@ -2,86 +2,170 @@ import { footerInt, footerDecimal2, footerDecimal3 } from "@/components/util/gri
 import { ValueType } from "realgrid";
 
 // 하수도 통계 관리 > 02.하수관로 > tab 2. 시설별 설치현황
+// SeweragePipeInputFactInstallStatusItem + commonInfo.ctpvNm (그리드 행에 병합)
 
 export const FactInstallStatusInpColumn = {
     columns: [
-        // 행정구역
-        { name: 'sido', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'sgg', fieldName: '시군구', header: { text: '시군구' }, editable: false },
+        // 행정구역 (ctpvNm은 commonInfo에서 주입)
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, editable: false, styleName: 'rg-cell-readonly' },
 
         // 하수처리장 정보
-        { name: 'bscFctNm', fieldName: '하수처리장명', header: { text: '하수처리장명' }, footer: { text: '합계' }, editable: false },
-        { name: 'fctCpc', fieldName: '하수처리시설용량(m³/일)', header: { text: '하수처리시설용량(m³/일)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'swtrmtFcltNm', fieldName: 'swtrmtFcltNm', header: { text: '하수처리장명' }, footer: { text: '합계' }, editable: false },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'prcsFcltCpct', fieldName: 'prcsFcltCpct', header: { text: '하수처리시설용량(m³/일)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 처리구역면적(km²)
-        { name: 'procZoneSm', fieldName: '합계', header: { text: '합계' }, footer: footerDecimal3, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
-        { name: 'cmbnProcZoneAr', fieldName: '합류식', header: { text: '합류식' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
-        { name: 'sprtProcZoneAr', fieldName: '분류식', header: { text: '분류식' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { 
+            name: 'prcsZoneArea', 
+            fieldName: 'prcsZoneArea', 
+            header: { text: '합계' }, 
+            footer: footerDecimal3, 
+            editable: false,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER, 
+            dataFormat: '#,##0.000',
+            computed: { fields: ['cbsysPrcsZoneArea', 'sprsysPrcsZoneArea'], type: 'sum' as const },
+        },
+        { name: 'cbsysPrcsZoneArea', fieldName: 'cbsysPrcsZoneArea', header: { text: '합류식' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'sprsysPrcsZoneArea', fieldName: 'sprsysPrcsZoneArea', header: { text: '분류식' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
 
         // 분류식화율
-        { name: 'sprtRt', fieldName: '분류식화율', header: { text: '분류식화율' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { 
+            name: 'sprsysVartnRt', 
+            fieldName: 'sprsysVartnRt', 
+            header: { text: '분류식화율' }, 
+            editable: false, 
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER, 
+            dataFormat: '#,##0.0',
+            computed: {
+                numeratorFields: ['sprsysPrcsZoneArea'],
+                denominatorFields: ['cbsysPrcsZoneArea', 'sprsysPrcsZoneArea'],
+                type: 'pblswrgPopltnSuprtRate' as const,
+            },
+        },
 
         // 배수설비(개소)
-        { name: 'drngEqpSm', fieldName: '합계', header: { text: '합계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'cmbnDrngEqp', fieldName: '합류식', header: { text: '합류식' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'sprtDrngEqpSm', fieldName: '소계', header: { text: '소계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'sprtDrngEqpCnnc', fieldName: '연결', header: { text: '연결' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'sprtDrngEqpDcnnc', fieldName: '미연결', header: { text: '미연결' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { 
+            name: 'mltvEqpmCnt', 
+            fieldName: 'mltvEqpmCnt', 
+            header: { text: '합계' }, 
+            footer: footerInt, 
+            editable: false, 
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER, 
+            dataFormat: '#,##0',
+            computed: { fields: ['sprsysMltvLnkgCnt', 'sprsysMltvYetLnkgCnt', 'cbsysMltvEqpmCnt'], type: 'sum' as const },
+        },
+        { name: 'cbsysMltvEqpmCnt', fieldName: 'cbsysMltvEqpmCnt', header: { text: '합류식' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { 
+            name: 'sprsysMltvEqpmCnt', 
+            fieldName: 'sprsysMltvEqpmCnt', 
+            header: { text: '소계' }, 
+            footer: footerInt, 
+            editable: false, 
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER, 
+            dataFormat: '#,##0',
+            computed: { fields: ['sprsysMltvLnkgCnt', 'sprsysMltvYetLnkgCnt'], type: 'sum' as const },
+        },
+        { name: 'sprsysMltvLnkgCnt', fieldName: 'sprsysMltvLnkgCnt', header: { text: '연결' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'sprsysMltvYetLnkgCnt', fieldName: 'sprsysMltvYetLnkgCnt', header: { text: '미연결' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 하수관로 > 총시설연장
-        { name: 'piplFcltyExtn', fieldName: '총시설연장(m)', header: { text: '총시설연장(m)' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        { 
+            name: 'wholFcltPrlg', 
+            fieldName: 'wholFcltPrlg',
+            header: { text: '총시설연장(m)' }, 
+            footer: footerDecimal2, 
+            editable: false, 
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER, 
+            dataFormat: '#,##0.00',
+            computed: { fields: ['icptgPrlg', 'atlfcsPrlg', 'cbsysBrchlnPrlg', 'exlnBrchlnPrlg', 'drtwBrchlnPrlg'], type: 'sum' as const },
+        },
 
         // 하수관로 > 차집/오수간선(m)
-        { name: 'icgMnnSm', fieldName: '합계', header: { text: '합계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'icgExtn', fieldName: '차집', header: { text: '차집' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'mnnExtn', fieldName: '오수 간선', header: { text: '오수 간선' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        { 
+            name: 'wholIcptgAtlfcsPrlg', 
+            fieldName: 'wholIcptgAtlfcsPrlg', 
+            header: { text: '합계' }, 
+            footer: footerDecimal2, 
+            editable: false, 
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER, 
+            dataFormat: '#,##0.00',
+            computed: { fields: ['icptgPrlg', 'atlfcsPrlg'], type: 'sum' as const },
+        },
+        { name: 'icptgPrlg', fieldName: 'icptgPrlg', header: { text: '차집' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        { name: 'atlfcsPrlg', fieldName: 'atlfcsPrlg', header: { text: '오수 간선' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
 
         // 하수관로 > 토실/토구(개소) > 합류식
-        { name: 'cmbnSoilholeSite', fieldName: '우수토실', header: { text: '우수토실' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'cbsysStofcbrCnt', fieldName: 'cbsysStofcbrCnt', header: { text: '우수토실' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 하수관로 > 토실/토구(개소) > 분류식
-        { name: 'sprtSoilholeSite', fieldName: '우수토실', header: { text: '우수토실' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'sprtSoilspllSite', fieldName: '우수토구', header: { text: '우수토구' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'sprsysStofcbrCnt', fieldName: 'sprsysStofcbrCnt', header: { text: '우수토실' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'sprsysExlnOtflCnt', fieldName: 'sprsysExlnOtflCnt', header: { text: '우수토구' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 하수관로 > 지선(m)
-        { name: 'brnchlnSm', fieldName: '합계', header: { text: '합계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'cmbnBrnchlnExtn', fieldName: '합류식', header: { text: '합류식' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        { 
+            name: 'wholBrchlnPrlg', 
+            fieldName: 'wholBrchlnPrlg', 
+            header: { text: '합계' }, 
+            footer: footerDecimal2, 
+            editable: false, 
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER, 
+            dataFormat: '#,##0.00',
+            computed: { fields: ['cbsysBrchlnPrlg', 'exlnBrchlnPrlg', 'drtwBrchlnPrlg'], type: 'sum' as const },
+        },
+        { name: 'cbsysBrchlnPrlg', fieldName: 'cbsysBrchlnPrlg', header: { text: '합류식' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
 
-        // 하수관로 > 지선(m) > 분류식 
-        { name: 'rainwtrBrnchlnExtn', fieldName: '우수', header: { text: '우수' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'pltwtrBrnchlnExtn', fieldName: '오수', header: { text: '오수' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        // 하수관로 > 지선(m) > 분류식
+        { name: 'exlnBrchlnPrlg', fieldName: 'exlnBrchlnPrlg', header: { text: '우수' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        { name: 'drtwBrchlnPrlg', fieldName: 'drtwBrchlnPrlg', header: { text: '오수' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
 
         // 비고
-        { name: 'rmk', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
+
+        // 식별·키 필드 (API SeweragePipeInputFactInstallStatusItem, 그리드 비표시 — fixedColumns와 겹치지 않도록 맨 뒤)
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'fcltSn', fieldName: 'fcltSn', header: { text: '처리시설일련번호' }, visible: false, editable: false, valueType: ValueType.TEXT },
+        { name: 'swtrmtFcltCd', fieldName: 'swtrmtFcltCd', header: { text: '하수처리시설코드' }, visible: false, editable: false, styleName: 'rg-cell-readonly' },
     ],
     columnLayout: [
         {
             name: 'adminArea',
             hideChildHeaders: false,
             header: { text: '행정구역' },
-            items: ['sido', 'sgg'],
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
         },
-        'bscFctNm',
-        'fctCpc',
+        'swtrmtFcltNm',
+        'admdstNm',
+        'prcsFcltCpct',
         {
             name: 'procZone',
             hideChildHeaders: false,
             header: { text: '처리구역면적(km²)' },
-            items: ['procZoneSm', 'cmbnProcZoneAr', 'sprtProcZoneAr'],
+            items: ['prcsZoneArea', 'cbsysPrcsZoneArea', 'sprsysPrcsZoneArea'],
         },
-        'sprtRt',
+        'sprsysVartnRt',
         {
             name: 'drainEquip',
             hideChildHeaders: false,
             header: { text: '배수설비(개소)' },
             items: [
-                'drngEqpSm',
-                'cmbnDrngEqp',
+                'mltvEqpmCnt',
+                'cbsysMltvEqpmCnt',
                 {
                     name: 'sprtDrainEquip',
                     hideChildHeaders: false,
                     header: { text: '분류식' },
-                    items: ['sprtDrngEqpSm', 'sprtDrngEqpCnnc', 'sprtDrngEqpDcnnc'],
+                    items: ['sprsysMltvEqpmCnt', 'sprsysMltvLnkgCnt', 'sprsysMltvYetLnkgCnt'],
                 },
             ],
         },
@@ -90,12 +174,12 @@ export const FactInstallStatusInpColumn = {
             hideChildHeaders: false,
             header: { text: '하수관로' },
             items: [
-                'piplFcltyExtn',
+                'wholFcltPrlg',
                 {
                     name: 'interceptor',
                     hideChildHeaders: false,
                     header: { text: '차집/오수간선(m)' },
-                    items: ['icgMnnSm', 'icgExtn', 'mnnExtn'],
+                    items: ['wholIcptgAtlfcsPrlg', 'icptgPrlg', 'atlfcsPrlg'],
                 },
                 {
                     name: 'soilHole',
@@ -106,13 +190,13 @@ export const FactInstallStatusInpColumn = {
                             name: 'cmbnSoilHole',
                             hideChildHeaders: false,
                             header: { text: '합류식' },
-                            items: ['cmbnSoilholeSite'],
+                            items: ['cbsysStofcbrCnt'],
                         },
                         {
                             name: 'sprtSoilHole',
                             hideChildHeaders: false,
                             header: { text: '분류식' },
-                            items: ['sprtSoilholeSite', 'sprtSoilspllSite'],
+                            items: ['sprsysStofcbrCnt', 'sprsysExlnOtflCnt'],
                         },
                     ],
                 },
@@ -121,22 +205,25 @@ export const FactInstallStatusInpColumn = {
                     hideChildHeaders: false,
                     header: { text: '지선(m)' },
                     items: [
-                        'brnchlnSm',
-                        'cmbnBrnchlnExtn',
+                        'wholBrchlnPrlg',
+                        'cbsysBrchlnPrlg',
                         {
                             name: 'sprtBranchLine',
                             hideChildHeaders: false,
                             header: { text: '분류식' },
-                            items: ['rainwtrBrnchlnExtn', 'pltwtrBrnchlnExtn'],
+                            items: ['exlnBrchlnPrlg', 'drtwBrchlnPrlg'],
                         },
                     ],
                 },
             ],
         },
-        'rmk',
+        'rmrk',
+        'admdstCd',
+        'fcltSn',
+        'swtrmtFcltCd',
     ],
     rowStartNum: 4,
     fixedColumns: 3,
-    tabKey: 'factInstallStatusInp',
+    tabKey: 'ST00020002',
     tabLabel: '시설별 설치현황'
-};
\ No newline at end of file
+};
diff --git a/apps/st/src/components/util/column/input/sewagePipe/ManholeStatusInpColumn.ts b/apps/st/src/components/util/column/input/sewagePipe/ManholeStatusInpColumn.ts
index 5732a82df..9f02da89a 100644
--- a/apps/st/src/components/util/column/input/sewagePipe/ManholeStatusInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewagePipe/ManholeStatusInpColumn.ts
@@ -1,331 +1,224 @@
+import type { ColumnConfig, ColumnLayoutItem } from "@/components/type/DataGrid.type";
 import { footerInt } from "@/components/util/grid/footerSummary";
 import { ValueType } from "realgrid";
 
 // 하수도 통계 관리 > 02.하수관로 > tab 5. 맨홀 현황
+// SeweragePipeInputManholeStatusItem + commonInfo.ctpvNm (그리드 행에 병합)
+// API: yy14=2015년 이전(2014년 데이터) … yy{(현재연도-1)%100} (필드 접두 yy + 연도 끝자리)
+
+const MANHOLE_START_YEAR = 2014;
+const MANHOLE_LAST_DATA_YEAR = Math.max(MANHOLE_START_YEAR, new Date().getFullYear() - 1);
+const MANHOLE_YY_MIN = MANHOLE_START_YEAR % 100;
+const MANHOLE_YY_MAX = MANHOLE_LAST_DATA_YEAR % 100;
+const calendarYearFromYy = (yy: number) => 2000 + yy;
+
+/** yy14(2014) 구간은 헤더에 「2015년 이전」 표기 (합계·검토 컬럼과 동일) */
+const manholeYearHeaderText = (yy: number): string => {
+    const y = calendarYearFromYy(yy);
+    return y === MANHOLE_START_YEAR ? "2015년 이전" : `${y}년`;
+};
+
+const intCol = (name: string, headerText: string): ColumnConfig => ({
+    name,
+    fieldName: name,
+    header: { text: headerText },
+    footer: footerInt,
+    // editable: false,
+    valueType: ValueType.NUMBER,
+    dataFormat: "#,##0",
+});
+
+const yearlySumFields = (suffix: "WholMnhlCnt" | "Step1MnhlCnt" | "Step2MnhlCnt" | "Step3MnhlCnt" | "Step4MnhlCnt" | "Step5MnhlCnt") =>
+    Array.from({ length: MANHOLE_YY_MAX - MANHOLE_YY_MIN + 1 }, (_, i) => `yy${MANHOLE_YY_MIN + i}${suffix}`);
+
+function totalBlockColumns(): ColumnConfig[] {
+    return [
+        {
+            ...intCol("totalWholMnhlCnt", "계"),
+            styleName: "rg-cell-total",
+            editable: false,
+            computed: { fields: yearlySumFields("WholMnhlCnt"), type: "sum" as const },
+        },
+        {
+            ...intCol("totalStep1MnhlCnt", "주철"),
+            styleName: "rg-cell-total",
+            editable: false,
+            computed: { fields: yearlySumFields("Step1MnhlCnt"), type: "sum" as const },
+        },
+        {
+            ...intCol("totalStep2MnhlCnt", "주철(조화)"),
+            styleName: "rg-cell-total",
+            editable: false,
+            computed: { fields: yearlySumFields("Step2MnhlCnt"), type: "sum" as const },
+        },
+        {
+            ...intCol("totalStep3MnhlCnt", "콘크리트"),
+            styleName: "rg-cell-total",
+            editable: false,
+            computed: { fields: yearlySumFields("Step3MnhlCnt"), type: "sum" as const },
+        },
+        {
+            ...intCol("totalStep4MnhlCnt", "기타"),
+            styleName: "rg-cell-total",
+            editable: false,
+            computed: { fields: yearlySumFields("Step4MnhlCnt"), type: "sum" as const },
+        },
+        {
+            ...intCol("totalStep5MnhlCnt", "추락방지시설설치맨홀(개)"),
+            styleName: "rg-cell-total",
+            editable: false,
+            computed: { fields: yearlySumFields("Step5MnhlCnt"), type: "sum" as const },
+        },
+    ];
+}
+
+function yyBlockColumns(yy: number): ColumnConfig[] {
+    const p = `yy${yy}`;
+    return [
+        {
+            ...intCol(`${p}WholMnhlCnt`, "계"),
+            styleName: "rg-cell-total",
+            editable: false,
+            computed: {
+                fields: [
+                    `${p}Step1MnhlCnt`,
+                    `${p}Step2MnhlCnt`,
+                    `${p}Step3MnhlCnt`,
+                    `${p}Step4MnhlCnt`,
+                    `${p}Step5MnhlCnt`,
+                ],
+                type: "sum" as const,
+            },
+        },
+        intCol(`${p}Step1MnhlCnt`, "주철"),
+        intCol(`${p}Step2MnhlCnt`, "주철(조화)"),
+        intCol(`${p}Step3MnhlCnt`, "콘크리트"),
+        intCol(`${p}Step4MnhlCnt`, "기타"),
+        intCol(`${p}Step5MnhlCnt`, "추락방지시설설치맨홀(개)"),
+    ];
+}
+
+function yyYearLayout(yy: number): ColumnLayoutItem {
+    const y = calendarYearFromYy(yy);
+    const p = `yy${yy}`;
+    return {
+        name: `year${y}`,
+        hideChildHeaders: false,
+        header: { text: manholeYearHeaderText(yy) },
+        items: [
+            {
+                name: `year${y}Material`,
+                hideChildHeaders: false,
+                header: { text: "맨홀뚜껑 재질(개)" },
+                items: [
+                    `${p}WholMnhlCnt`,
+                    `${p}Step1MnhlCnt`,
+                    `${p}Step2MnhlCnt`,
+                    `${p}Step3MnhlCnt`,
+                    `${p}Step4MnhlCnt`,
+                ],
+            },
+            `${p}Step5MnhlCnt`,
+        ],
+    };
+}
+
+const yearLayoutItems: ColumnLayoutItem[] = [];
+for (let yy = MANHOLE_YY_MIN; yy <= MANHOLE_YY_MAX; yy++) {
+    yearLayoutItems.push(yyYearLayout(yy));
+}
 
 export const ManholeStatusInpColumn = {
     columns: [
-        // 행정구역
-        { name: 'a1', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'a2', fieldName: '시군구', header: { text: '시군구' }, editable: false },
-
-        // 집중강우중점관리구역구분
-        { name: 'a3', fieldName: '집중강우중점관리구역구분', header: { text: '집중강우중점관리구역구분' }, editable: false, footer: { text: '합계' } },
-
-        // 연도별총계 > 맨홀뚜껑 재질(개)
-        { name: 'b1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'b2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'b3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'b4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'b5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 연도별총계 > 추락방지시설설치맨홀(개)
-        { name: 'b6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 2015년 이전 > 맨홀뚜껑 재질(개)
-        { name: 'c1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'c2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'c3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'c4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'c5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 2015년 이전 > 추락방지시설설치맨홀(개)
-        { name: 'c6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 2015년 > 맨홀뚜껑 재질(개)
-        { name: 'd1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'd2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'd3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'd4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'd5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 2015년 > 추락방지시설설치맨홀(개)
-        { name: 'd6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 2016년 > 맨홀뚜껑 재질(개)
-        { name: 'e1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'e2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'e3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'e4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'e5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 2016년 > 추락방지시설설치맨홀(개)
-        { name: 'e6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 2017년 > 맨홀뚜껑 재질(개)
-        { name: 'f1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'f2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'f3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'f4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'f5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 2017년 > 추락방지시설설치맨홀(개)
-        { name: 'f6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 2018년 > 맨홀뚜껑 재질(개)
-        { name: 'g1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'g2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'g3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'g4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'g5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 2018년 > 추락방지시설설치맨홀(개)
-        { name: 'g6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 2019년 > 맨홀뚜껑 재질(개)
-        { name: 'h1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'h2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'h3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'h4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'h5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 2019년 > 추락방지시설설치맨홀(개)
-        { name: 'h6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 2020년 > 맨홀뚜껑 재질(개)
-        { name: 'i1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'i2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'i3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'i4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'i5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 2020년 > 추락방지시설설치맨홀(개)
-        { name: 'i6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 2021년 > 맨홀뚜껑 재질(개)
-        { name: 'j1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'j2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'j3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'j4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'j5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 2021년 > 추락방지시설설치맨홀(개)
-        { name: 'j6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 2022년 > 맨홀뚜껑 재질(개)
-        { name: 'k1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'k2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'k3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'k4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'k5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 2022년 > 추락방지시설설치맨홀(개)
-        { name: 'k6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 2023년 > 맨홀뚜껑 재질(개)
-        { name: 'l1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'l2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'l3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'l4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'l5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 2023년 > 추락방지시설설치맨홀(개)
-        { name: 'l6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 2024년 > 맨홀뚜껑 재질(개)
-        { name: 'm1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'm2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'm3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'm4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'm5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 2024년 > 추락방지시설설치맨홀(개)
-        { name: 'm6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 2025년 > 맨홀뚜껑 재질(개)
-        { name: 'n1', fieldName: '계', header: { text: '계' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'n2', fieldName: '주철', header: { text: '주철' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'n3', fieldName: '주철(조화)', header: { text: '주철(조화)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'n4', fieldName: '콘크리트', header: { text: '콘크리트' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'n5', fieldName: '기타', header: { text: '기타' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        // 2025년 > 추락방지시설설치맨홀(개)
-        { name: 'n6', fieldName: '추락방지시설설치맨홀(개)', header: { text: '추락방지시설설치맨홀(개)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-
-        // 비고
-        { name: 'z1', fieldName: '비고', header: { text: '비고' } },
-    ],
+        {
+            name: "ctpvNm",
+            fieldName: "ctpvNm",
+            header: { text: "시도" },
+            footer: { text: "합계" },
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+        {
+            name: "sggNm",
+            fieldName: "sggNm",
+            header: { text: "시군구" },
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+        {
+            name: "admdstNm",
+            fieldName: "admdstNm",
+            header: { text: "행정구역명" },
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+        {
+            name: "emphsMngSeNm",
+            fieldName: "emphsMngSeNm",
+            header: { text: "집중강우중점관리구역구분" },
+            editable: false,
+            styleName: "rg-cell-readonly",
+            footer: { text: "합계" },
+            // editable: false,
+        },
+        ...totalBlockColumns(),
+        ...Array.from({ length: MANHOLE_YY_MAX - MANHOLE_YY_MIN + 1 }, (_, i) =>
+            yyBlockColumns(MANHOLE_YY_MIN + i)
+        ).flat(),
+        { name: "rmrk", fieldName: "rmrk", header: { text: "비고" } },
+        {
+            name: "admdstCd",
+            fieldName: "admdstCd",
+            header: { text: "행정구역코드" },
+            visible: false,
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+        {
+            name: "emphsMngSeCd",
+            fieldName: "emphsMngSeCd",
+            header: { text: "집중강우중점관리구역코드" },
+            visible: false,
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+    ] as ColumnConfig[],
     columnLayout: [
         {
-            name: 'adminArea',
+            name: "adminArea",
             hideChildHeaders: false,
-            header: { text: '행정구역' },
-            items: ['a1', 'a2'],
+            header: { text: "행정구역" },
+            items: [{ column: "ctpvNm", footerUserSpans: [{ colspan: 2 }] }, "sggNm"],
         },
-        'a3',
+        "admdstNm",
+        "emphsMngSeNm",
         {
-            name: 'yearlyTotal',
+            name: "yearlyTotal",
             hideChildHeaders: false,
-            header: { text: '연도별총계' },
+            header: { text: "연도별총계" },
             items: [
                 {
-                    name: 'yearlyTotalMaterial',
+                    name: "yearlyTotalMaterial",
                     hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['b1', 'b2', 'b3', 'b4', 'b5'],
+                    header: { text: "맨홀뚜껑 재질(개)" },
+                    items: [
+                        "totalWholMnhlCnt",
+                        "totalStep1MnhlCnt",
+                        "totalStep2MnhlCnt",
+                        "totalStep3MnhlCnt",
+                        "totalStep4MnhlCnt",
+                    ],
                 },
-                'b6',
+                "totalStep5MnhlCnt",
             ],
         },
-        {
-            name: 'before2015',
-            hideChildHeaders: false,
-            header: { text: '2015년 이전' },
-            items: [
-                {
-                    name: 'before2015Material',
-                    hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['c1', 'c2', 'c3', 'c4', 'c5'],
-                },
-                'c6',
-            ],
-        },
-        {
-            name: 'year2015',
-            hideChildHeaders: false,
-            header: { text: '2015년' },
-            items: [
-                {
-                    name: 'year2015Material',
-                    hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['d1', 'd2', 'd3', 'd4', 'd5'],
-                },
-                'd6',
-            ],
-        },
-        {
-            name: 'year2016',
-            hideChildHeaders: false,
-            header: { text: '2016년' },
-            items: [
-                {
-                    name: 'year2016Material',
-                    hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['e1', 'e2', 'e3', 'e4', 'e5'],
-                },
-                'e6',
-            ],
-        },
-        {
-            name: 'year2017',
-            hideChildHeaders: false,
-            header: { text: '2017년' },
-            items: [
-                {
-                    name: 'year2017Material',
-                    hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['f1', 'f2', 'f3', 'f4', 'f5'],
-                },
-                'f6',
-            ],
-        },
-        {
-            name: 'year2018',
-            hideChildHeaders: false,
-            header: { text: '2018년' },
-            items: [
-                {
-                    name: 'year2018Material',
-                    hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['g1', 'g2', 'g3', 'g4', 'g5'],
-                },
-                'g6',
-            ],
-        },
-        {
-            name: 'year2019',
-            hideChildHeaders: false,
-            header: { text: '2019년' },
-            items: [
-                {
-                    name: 'year2019Material',
-                    hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['h1', 'h2', 'h3', 'h4', 'h5'],
-                },
-                'h6',
-            ],
-        },
-        {
-            name: 'year2020',
-            hideChildHeaders: false,
-            header: { text: '2020년' },
-            items: [
-                {
-                    name: 'year2020Material',
-                    hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['i1', 'i2', 'i3', 'i4', 'i5'],
-                },
-                'i6',
-            ],
-        },
-        {
-            name: 'year2021',
-            hideChildHeaders: false,
-            header: { text: '2021년' },
-            items: [
-                {
-                    name: 'year2021Material',
-                    hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['j1', 'j2', 'j3', 'j4', 'j5'],
-                },
-                'j6',
-            ],
-        },
-        {
-            name: 'year2022',
-            hideChildHeaders: false,
-            header: { text: '2022년' },
-            items: [
-                {
-                    name: 'year2022Material',
-                    hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['k1', 'k2', 'k3', 'k4', 'k5'],
-                },
-                'k6',
-            ],
-        },
-        {
-            name: 'year2023',
-            hideChildHeaders: false,
-            header: { text: '2023년' },
-            items: [
-                {
-                    name: 'year2023Material',
-                    hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['l1', 'l2', 'l3', 'l4', 'l5'],
-                },
-                'l6',
-            ],
-        },
-        {
-            name: 'year2024',
-            hideChildHeaders: false,
-            header: { text: '2024년' },
-            items: [
-                {
-                    name: 'year2024Material',
-                    hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['m1', 'm2', 'm3', 'm4', 'm5'],
-                },
-                'm6',
-            ],
-        },
-        {
-            name: 'year2025',
-            hideChildHeaders: false,
-            header: { text: '2025년' },
-            items: [
-                {
-                    name: 'year2025Material',
-                    hideChildHeaders: false,
-                    header: { text: '맨홀뚜껑 재질(개)' },
-                    items: ['n1', 'n2', 'n3', 'n4', 'n5'],
-                },
-                'n6',
-            ],
-        },
-        'z1',
-    ],
+        ...yearLayoutItems,
+        "rmrk",
+        "admdstCd",
+        "emphsMngSeCd",
+    ] as ColumnLayoutItem[],
     rowStartNum: 3,
     fixedColumns: 2,
-    tabKey: 'manholeStatusInp',
-    tabLabel: '맨홀 현황'
-};
\ No newline at end of file
+    tabKey: "ST00020005",
+    tabLabel: "맨홀 현황",
+};
diff --git a/apps/st/src/components/util/column/input/sewagePipe/PipeDiameterStatusInpColumn.ts b/apps/st/src/components/util/column/input/sewagePipe/PipeDiameterStatusInpColumn.ts
index af009e292..980260008 100644
--- a/apps/st/src/components/util/column/input/sewagePipe/PipeDiameterStatusInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewagePipe/PipeDiameterStatusInpColumn.ts
@@ -2,62 +2,153 @@ import { footerDecimal2 } from "@/components/util/grid/footerSummary";
 import { ValueType } from "realgrid";
 
 // 하수도 통계 관리 > 02.하수관로 > tab 4. 관경별 현황
+// SeweragePipeInputPipeDiameterStatusItem + commonInfo.ctpvNm (그리드 행에 병합)
 
 export const PipeDiameterStatusInpColumn = {
     columns: [
-        // 행정구역
-        { name: 'sido', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'sgg', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
-
-        // 관종
-        { name: 'swrgPipeCd', fieldName: '관종', header: { text: '관종' }, editable: false },
-
-        // 총계(m) - 계산
-        { name: 'totalDiameter', fieldName: '총계(m)', header: { text: '총계(m)' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-        // 원형(m)
-        { name: 'under200', fieldName: '200mm 미만', header: { text: '200mm 미만' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'over200Undev300', fieldName: '200mm이상~300mm미만', header: { text: '200mm이상~300mm미만' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'over300Undev500', fieldName: '300mm이상~500mm미만', header: { text: '300mm이상~500mm미만' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'over500Undev500', fieldName: '500mm이상~800mm미만', header: { text: '500mm이상~800mm미만' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'over800', fieldName: '800이상mm', header: { text: '800이상mm' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-        // 사각형(m)
-        { name: 'box', fieldName: '사각형(m)', header: { text: '사각형(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-        // 기타(측구 개거 등)
-        { name: 'etc', fieldName: '기타(측구 개거 등)', header: { text: '기타(측구 개거 등)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-        // 비고
-        { name: 'rmk', fieldName: '비고', header: { text: '비고' } },
+        {
+            name: "ctpvNm",
+            fieldName: "ctpvNm",
+            header: { text: "시도" },
+            footer: { text: "합계" },
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+        {
+            name: "sggNm",
+            fieldName: "sggNm",
+            header: { text: "시군구" },
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+        {
+            name: "pipeSeNm",
+            fieldName: "pipeSeNm",
+            header: { text: "관종" },
+            editable: false,
+        },
+        {
+            name: "admdstNm",
+            fieldName: "admdstNm",
+            header: { text: "행정구역명" },
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+        {
+            name: "pdmtByTsmWhol",
+            fieldName: "pdmtByTsmWhol",
+            header: { text: "총계(m)" },
+            footer: footerDecimal2,
+            editable: false,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+            computed: { fields: ['step1PdmtPrlg', 'step2PdmtPrlg', 'step3PdmtPrlg', 'step4PdmtPrlg', 'step5PdmtPrlg', 'sqrePdmtPrlg', 'etcPdmtPrlg'], type: 'sum' as const },
+        },
+        {
+            name: "step1PdmtPrlg",
+            fieldName: "step1PdmtPrlg",
+            header: { text: "200mm 미만" },
+            footer: footerDecimal2,
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+        },
+        {
+            name: "step2PdmtPrlg",
+            fieldName: "step2PdmtPrlg",
+            header: { text: "200mm이상~300mm미만" },
+            footer: footerDecimal2,
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+        },
+        {
+            name: "step3PdmtPrlg",
+            fieldName: "step3PdmtPrlg",
+            header: { text: "300mm이상~500mm미만" },
+            footer: footerDecimal2,
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+        },
+        {
+            name: "step4PdmtPrlg",
+            fieldName: "step4PdmtPrlg",
+            header: { text: "500mm이상~800mm미만" },
+            footer: footerDecimal2,
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+        },
+        {
+            name: "step5PdmtPrlg",
+            fieldName: "step5PdmtPrlg",
+            header: { text: "800mm 이상" },
+            footer: footerDecimal2,
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+        },
+        {
+            name: "sqrePdmtPrlg",
+            fieldName: "sqrePdmtPrlg",
+            header: { text: "사각형(m)" },
+            footer: footerDecimal2,
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+        },
+        {
+            name: "etcPdmtPrlg",
+            fieldName: "etcPdmtPrlg",
+            header: { text: "기타(측구 개거 등)" },
+            footer: footerDecimal2,
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+        },
+        { name: "rmrk", fieldName: "rmrk", header: { text: "비고" } },
+        {
+            name: "admdstCd",
+            fieldName: "admdstCd",
+            header: { text: "행정구역코드" },
+            visible: false,
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+        {
+            name: "pipeSeCd",
+            fieldName: "pipeSeCd",
+            header: { text: "관종코드" },
+            visible: false,
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
     ],
     columnLayout: [
         {
-            name: 'adminArea',
+            name: "adminArea",
             hideChildHeaders: false,
-            header: { text: '행정구역' },
-            items: ['sido', 'sgg'],
+            header: { text: "행정구역" },
+            items: [{ column: "ctpvNm", footerUserSpans: [{ colspan: 2 }] }, "sggNm"],
         },
-        'swrgPipeCd',
-        'totalDiameter',
+        "pipeSeNm",
+        "admdstNm",
+        "pdmtByTsmWhol",
         {
-            name: 'circular',
+            name: "circular",
             hideChildHeaders: false,
-            header: { text: '원형(m)' },
+            header: { text: "원형(m)" },
             items: [
-                'under200',
-                'over200Undev300',
-                'over300Undev500',
-                'over500Undev500',
-                'over800',
+                "step1PdmtPrlg",
+                "step2PdmtPrlg",
+                "step3PdmtPrlg",
+                "step4PdmtPrlg",
+                "step5PdmtPrlg",
             ],
         },
-        'box',
-        'etc',
-        'rmk',
+        "sqrePdmtPrlg",
+        "etcPdmtPrlg",
+        "rmrk",
+        "admdstCd",
+        "pipeSeCd",
     ],
     rowStartNum: 2,
-    fixedColumns: 1,
-    tabKey: 'pipeDiameterStatusInp',
-    tabLabel: '관경별 현황'
-};
\ No newline at end of file
+    fixedColumns: 2,
+    tabKey: "ST00020004",
+    tabLabel: "관경별 현황",
+};
diff --git a/apps/st/src/components/util/column/input/sewagePipe/PipeTypeStatusInpColumn.ts b/apps/st/src/components/util/column/input/sewagePipe/PipeTypeStatusInpColumn.ts
index e1e33a3c8..61ac482da 100644
--- a/apps/st/src/components/util/column/input/sewagePipe/PipeTypeStatusInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewagePipe/PipeTypeStatusInpColumn.ts
@@ -1,377 +1,222 @@
+import type { ColumnConfig, ColumnLayoutItem } from "@/components/type/DataGrid.type";
 import { footerDecimal2 } from "@/components/util/grid/footerSummary";
 import { ValueType } from "realgrid";
 
 // 하수도 통계 관리 > 02.하수관로 > tab 3. 관종별 현황
+// SeweragePipeInputPipeTypeStatusItem + commonInfo.ctpvNm (그리드 행에 병합)
+//
+// 연도 그룹: y1995 = 1996년 이전, y1996 = 1996년 …
+// 표시 구간: 1996년 ~ (현재 연도 − 1) 까지.
+
+/** 이 모듈이 로드될 때의 “데이터 기준 마지막 연도” (현재 연도 − 1) */
+const lastDataYear = new Date().getFullYear() - 1;
+const firstGroupedYear = 1995;
+const firstVisibleYear = 1996;
+
+const yearField = (year: number, suffix: "PrlgWhol" | "LyngPrlg" | "DmltnPrlg") =>
+    `y${year}${suffix}`;
+
+const yearCols = (
+    year: number,
+    opts: { footer?: typeof footerDecimal2; visible?: boolean } = {}
+): ColumnConfig[] => {
+    const whol = yearField(year, "PrlgWhol");
+    const lyng = yearField(year, "LyngPrlg");
+    const dmltn = yearField(year, "DmltnPrlg");
+    const vis = opts.visible === false ? ({ visible: false } as const) : {};
+    return [
+        {
+            name: whol,
+            fieldName: whol,
+            header: { text: "계" },
+            ...(opts.footer !== undefined ? { footer: opts.footer } : {}),
+            editable: false,
+            styleName: "rg-cell-total",
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+            computed: { fields: [lyng, dmltn], type: "difference" as const },
+            ...vis,
+        },
+        {
+            name: lyng,
+            fieldName: lyng,
+            header: { text: "매설연장(m)" },
+            ...(opts.footer !== undefined ? { footer: opts.footer } : {}),
+            editable: false,
+            styleName: "rg-cell-readonly",
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+            ...vis,
+        },
+        {
+            name: dmltn,
+            fieldName: dmltn,
+            header: { text: "철거연장(m)" },
+            ...(opts.footer !== undefined ? { footer: opts.footer } : {}),
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+            ...vis,
+        },
+    ];
+};
+
+const visibleYears =
+    lastDataYear < firstVisibleYear
+        ? []
+        : Array.from(
+            { length: lastDataYear - firstVisibleYear + 1 },
+            (_, i) => firstVisibleYear + i,
+        );
+
+const yearLayoutItems: ColumnLayoutItem[] = [];
+for (const y of visibleYears) {
+    yearLayoutItems.push({
+        name: `year${y}`,
+        hideChildHeaders: false,
+        header: { text: `${y}년` },
+        items: [
+            yearField(y, "PrlgWhol"),
+            yearField(y, "LyngPrlg"),
+            yearField(y, "DmltnPrlg"),
+        ],
+    });
+}
 
 export const PipeTypeStatusInpColumn = {
     columns: [
-            // 행정구역
-            { name: 'sido', fieldName: '시도', header: { text: '시도' }, editable: false },
-            { name: 'sgg', fieldName: '시군구', header: { text: '시군구' }, editable: false },
-
-            // 관종
-            { name: 'swrgPipeCd', fieldName: '관종', header: { text: '관종' }, footer: { text: '합계' }, editable: false },
-
-            // 총계
-            { name: 'totalSum', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'totalLayingExtn', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'totalRemvlExtn', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 1996년 이전 (footer 없음)
-            { name: 'totalExtn22y', fieldName: '계', header: { text: '계' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn22y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn22y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 1996년 
-            { name: 'totalExtn01y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn01y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn01y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 1997년
-            { name: 'totalExtn02y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn02y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn02y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 1998년
-            { name: 'totalExtn03y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn03y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn03y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 1999년
-            { name: 'totalExtn04y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn04y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn04y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2000년
-            { name: 'totalExtn05y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn05y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn05y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2001년
-            { name: 'totalExtn06y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn06y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn06y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2002년
-            { name: 'totalExtn07y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn07y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn07y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2003년
-            { name: 'totalExtn08y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn08y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn08y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2004년
-            { name: 'totalExtn09y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn09y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn09y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2005년
-            { name: 'totalExtn10y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn10y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn10y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2006년
-            { name: 'totalExtn11y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn11y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn11y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2007년
-            { name: 'totalExtn12y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn12y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn12y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2008년
-            { name: 'totalExtn13y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn13y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn13y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2009년
-            { name: 'totalExtn14y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn14y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn14y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2010년
-            { name: 'totalExtn15y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn15y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn15y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2011년
-            { name: 'totalExtn16y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn16y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn16y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2012년
-            { name: 'totalExtn17y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn17y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn17y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2013년
-            { name: 'totalExtn18y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn18y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn18y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2014년
-            { name: 'totalExtn19y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn19y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn19y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2015년
-            { name: 'totalExtn20y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn20y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn20y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2016년
-            { name: 'totalExtn21y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn21y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn21y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2017년
-            { name: 'totalExtn23y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn23y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn23y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2018년
-            { name: 'totalExtn24y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn24y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn24y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2019년
-            { name: 'totalExtn25y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn25y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn25y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2020년
-            { name: 'totalExtn26y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn26y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn26y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2021년
-            { name: 'totalExtn27y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn27y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn27y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2022년
-            { name: 'totalExtn28y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn28y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn28y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2023년
-            { name: 'totalExtn29y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn29y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn29y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2024년
-            { name: 'totalExtn30y', fieldName: '계', header: { text: '계' }, footer: footerDecimal2, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'layingExtn30y', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-            { name: 'remvlExtn30y', fieldName: '철거연장(m)', header: { text: '철거연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 2025년
-            { name: 'layingExtn', fieldName: '매설연장(m)', header: { text: '매설연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-
-            // 비고
-            { name: 'rmk', fieldName: '비고', header: { text: '비고' } },
-        ],
-        columnLayout: [
-            {
-                name: 'adminArea',
-                hideChildHeaders: false,
-                header: { text: '행정구역' },
-                items: ['sido', 'sgg'],
+        {
+            name: "ctpvNm",
+            fieldName: "ctpvNm",
+            header: { text: "시도" },
+            footer: { text: "합계" },
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+        {
+            name: "sggNm",
+            fieldName: "sggNm",
+            header: { text: "시군구" },
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+        {
+            name: "pipeSeNm",
+            fieldName: "pipeSeNm",
+            header: { text: "관종" },
+            footer: { text: "합계" },
+            editable: false,
+        },
+        {
+            name: "admdstNm",
+            fieldName: "admdstNm",
+            header: { text: "행정구역명" },
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+        {
+            name: "pipeByPrstWhol",
+            fieldName: "pipeByPrstWhol",
+            header: { text: "계" },
+            styleName: "rg-cell-total",
+            footer: footerDecimal2,
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+            computed: {
+                minuendFields: [
+                    yearField(firstGroupedYear, "LyngPrlg"),
+                    ...visibleYears.map((year) => yearField(year, "LyngPrlg")),
+                ],
+                subtrahendFields: [
+                    yearField(firstGroupedYear, "DmltnPrlg"),
+                    ...visibleYears.map((year) => yearField(year, "DmltnPrlg")),
+                ],
+                type: "differenceOfSums" as const,
             },
-            'swrgPipeCd',
-            {
-                name: 'totalGroup',
-                hideChildHeaders: false,
-                header: { text: '총계' },
-                items: ['totalSum', 'totalLayingExtn', 'totalRemvlExtn'],
+        },
+        {
+            name: "lyngPrlg",
+            fieldName: "lyngPrlg",
+            header: { text: "매설연장(m)" },
+            styleName: "rg-cell-total",
+            footer: footerDecimal2,
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+        },
+        {
+            name: "dmltnPrlg",
+            fieldName: "dmltnPrlg",
+            header: { text: "철거연장(m)" },
+            styleName: "rg-cell-total",
+            footer: footerDecimal2,
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: "#,##0.00",
+            computed: {
+                fields: [
+                    yearField(firstGroupedYear, "DmltnPrlg"),
+                    ...visibleYears.map((year) => yearField(year, "DmltnPrlg")),
+                ],
+                type: "sum" as const,
             },
-            {
-                name: 'year1996Before',
-                hideChildHeaders: false,
-                header: { text: '1996년 이전' },
-                items: ['totalExtn22y', 'layingExtn22y', 'remvlExtn22y'],
-            },
-            {
-                name: 'year1996',
-                hideChildHeaders: false,
-                header: { text: '1996년' },
-                items: ['totalExtn01y', 'layingExtn01y', 'remvlExtn01y'],
-            },
-            {
-                name: 'year1997',
-                hideChildHeaders: false,
-                header: { text: '1997년' },
-                items: ['totalExtn02y', 'layingExtn02y', 'remvlExtn02y'],
-            },
-            {
-                name: 'year1998',
-                hideChildHeaders: false,
-                header: { text: '1998년' },
-                items: ['totalExtn03y', 'layingExtn03y', 'remvlExtn03y'],
-            },
-            {
-                name: 'year1999',
-                hideChildHeaders: false,
-                header: { text: '1999년' },
-                items: ['totalExtn04y', 'layingExtn04y', 'remvlExtn04y'],
-            },
-            {
-                name: 'year2000',
-                hideChildHeaders: false,
-                header: { text: '2000년' },
-                items: ['totalExtn05y', 'layingExtn05y', 'remvlExtn05y'],
-            },
-            {
-                name: 'year2001',
-                hideChildHeaders: false,
-                header: { text: '2001년' },
-                items: ['totalExtn06y', 'layingExtn06y', 'remvlExtn06y'],
-            },
-            {
-                name: 'year2002',
-                hideChildHeaders: false,
-                header: { text: '2002년' },
-                items: ['totalExtn07y', 'layingExtn07y', 'remvlExtn07y'],
-            },
-            {
-                name: 'year2003',
-                hideChildHeaders: false,
-                header: { text: '2003년' },
-                items: ['totalExtn08y', 'layingExtn08y', 'remvlExtn08y'],
-            },
-            {
-                name: 'year2004',
-                hideChildHeaders: false,
-                header: { text: '2004년' },
-                items: ['totalExtn09y', 'layingExtn09y', 'remvlExtn09y'],
-            },
-            {
-                name: 'year2005',
-                hideChildHeaders: false,
-                header: { text: '2005년' },
-                items: ['totalExtn10y', 'layingExtn10y', 'remvlExtn10y'],
-            },
-            {
-                name: 'year2006',
-                hideChildHeaders: false,
-                header: { text: '2006년' },
-                items: ['totalExtn11y', 'layingExtn11y', 'remvlExtn11y'],
-            },
-            {
-                name: 'year2007',
-                hideChildHeaders: false,
-                header: { text: '2007년' },
-                items: ['totalExtn12y', 'layingExtn12y', 'remvlExtn12y'],
-            },
-            {
-                name: 'year2008',
-                hideChildHeaders: false,
-                header: { text: '2008년' },
-                items: ['totalExtn13y', 'layingExtn13y', 'remvlExtn13y'],
-            },
-            {
-                name: 'year2009',
-                hideChildHeaders: false,
-                header: { text: '2009년' },
-                items: ['totalExtn14y', 'layingExtn14y', 'remvlExtn14y'],
-            },
-            {
-                name: 'year2010',
-                hideChildHeaders: false,
-                header: { text: '2010년' },
-                items: ['totalExtn15y', 'layingExtn15y', 'remvlExtn15y'],
-            },
-            {
-                name: 'year2011',
-                hideChildHeaders: false,
-                header: { text: '2011년' },
-                items: ['totalExtn16y', 'layingExtn16y', 'remvlExtn16y'],
-            },
-            {
-                name: 'year2012',
-                hideChildHeaders: false,
-                header: { text: '2012년' },
-                items: ['totalExtn17y', 'layingExtn17y', 'remvlExtn17y'],
-            },
-            {
-                name: 'year2013',
-                hideChildHeaders: false,
-                header: { text: '2013년' },
-                items: ['totalExtn18y', 'layingExtn18y', 'remvlExtn18y'],
-            },
-            {
-                name: 'year2014',
-                hideChildHeaders: false,
-                header: { text: '2014년' },
-                items: ['totalExtn19y', 'layingExtn19y', 'remvlExtn19y'],
-            },
-            {
-                name: 'year2015',
-                hideChildHeaders: false,
-                header: { text: '2015년' },
-                items: ['totalExtn20y', 'layingExtn20y', 'remvlExtn20y'],
-            },
-            {
-                name: 'year2016',
-                hideChildHeaders: false,
-                header: { text: '2016년' },
-                items: ['totalExtn21y', 'layingExtn21y', 'remvlExtn21y'],
-            },
-            {
-                name: 'year2017',
-                hideChildHeaders: false,
-                header: { text: '2017년' },
-                items: ['totalExtn23y', 'layingExtn23y', 'remvlExtn23y'],
-            },
-            {
-                name: 'year2018',
-                hideChildHeaders: false,
-                header: { text: '2018년' },
-                items: ['totalExtn24y', 'layingExtn24y', 'remvlExtn24y'],
-            },
-            {
-                name: 'year2019',
-                hideChildHeaders: false,
-                header: { text: '2019년' },
-                items: ['totalExtn25y', 'layingExtn25y', 'remvlExtn25y'],
-            },
-            {
-                name: 'year2020',
-                hideChildHeaders: false,
-                header: { text: '2020년' },
-                items: ['totalExtn26y', 'layingExtn26y', 'remvlExtn26y'],
-            },
-            {
-                name: 'year2021',
-                hideChildHeaders: false,
-                header: { text: '2021년' },
-                items: ['totalExtn27y', 'layingExtn27y', 'remvlExtn27y'],
-            },
-            {
-                name: 'year2022',
-                hideChildHeaders: false,
-                header: { text: '2022년' },
-                items: ['totalExtn28y', 'layingExtn28y', 'remvlExtn28y'],
-            },
-            {
-                name: 'year2023',
-                hideChildHeaders: false,
-                header: { text: '2023년' },
-                items: ['totalExtn29y', 'layingExtn29y', 'remvlExtn29y'],
-            },
-            {
-                name: 'year2024',
-                hideChildHeaders: false,
-                header: { text: '2024년' },
-                items: ['totalExtn30y', 'layingExtn30y', 'remvlExtn30y'],
-            },
-            'layingExtn',
-            'rmk',
-        ],
-        rowStartNum: 2,
-        fixedColumns: 2,
-        tabKey: 'pipeTypeStatusInp',
-        tabLabel: '관종별 현황'
-    };
\ No newline at end of file
+        },
+        ...yearCols(firstGroupedYear, { footer: footerDecimal2 }),
+        ...visibleYears.map((year) =>
+            yearCols(year, {
+                footer: footerDecimal2,
+            }),
+        ).flat(),
+        { name: "rmrk", fieldName: "rmrk", header: { text: "비고" } },
+        {
+            name: "admdstCd",
+            fieldName: "admdstCd",
+            header: { text: "행정구역코드" },
+            visible: false,
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+        {
+            name: "pipeSeCd",
+            fieldName: "pipeSeCd",
+            header: { text: "관종코드" },
+            visible: false,
+            editable: false,
+            styleName: "rg-cell-readonly",
+        },
+    ] as ColumnConfig[],
+    columnLayout: [
+        {
+            name: "adminArea",
+            hideChildHeaders: false,
+            header: { text: "행정구역" },
+            items: [{ column: "ctpvNm", footerUserSpans: [{ colspan: 2 }] }, "sggNm"],
+        },
+        "pipeSeNm",
+        "admdstNm",
+        {
+            name: "totalGroup",
+            hideChildHeaders: false,
+            header: { text: "총계" },
+            items: ["pipeByPrstWhol", "lyngPrlg", "dmltnPrlg"],
+        },
+        {
+            name: "year1996Before",
+            hideChildHeaders: false,
+            header: { text: "1996년 이전" },
+            items: [
+                yearField(firstGroupedYear, "PrlgWhol"),
+                yearField(firstGroupedYear, "LyngPrlg"),
+                yearField(firstGroupedYear, "DmltnPrlg"),
+            ],
+        },
+        ...yearLayoutItems,
+        'rmrk',
+        'admdstCd',
+        'pipeSeCd'
+    ] as ColumnLayoutItem[],
+    rowStartNum: 2,
+    fixedColumns: 2,
+    tabKey: "ST00020003",
+    tabLabel: "관종별 현황",
+};
diff --git a/apps/st/src/components/util/column/input/sewagePipe/RegionalFactStatusInpColumn.ts b/apps/st/src/components/util/column/input/sewagePipe/RegionalFactStatusInpColumn.ts
index 50c16fe40..eca03bda2 100644
--- a/apps/st/src/components/util/column/input/sewagePipe/RegionalFactStatusInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewagePipe/RegionalFactStatusInpColumn.ts
@@ -9,19 +9,103 @@ export const RegionalFactStatusInpColumn = {
         { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false, styleName: 'rg-cell-readonly' },
         { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, editable: false, styleName: 'rg-cell-readonly' },
         { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, editable: false, styleName: 'rg-cell-readonly' },
-        
+
         // 기본 정보 
-        { name: 'goalYr', fieldName: 'goalYr', header: { text: '하수정비기본계획목표년도' }},
-        { name: 'wholPplMtncPlanPrlg', fieldName: 'wholPplMtncPlanPrlg', header: { text: '총관로정비계획연장(m)' }, footer: footerDecimal2, editable: false, styleName: 'rg-cell-readonly', valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'wholPlanPrlg', fieldName: 'wholPlanPrlg', header: { text: '총계획연장(m)' }, footer: footerDecimal2, editable: false, styleName: 'rg-cell-readonly', valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'wholFcltPrlg', fieldName: 'wholFcltPrlg', header: { text: '총시설연장(m)' }, footer: footerDecimal2, editable: false, styleName: 'rg-cell-readonly', valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'swagePplPsplyRt', fieldName: 'swagePplPsplyRt', header: { text: '하수관로보급률(%)' }, footer: footerDecimal1, editable: false, styleName: 'rg-cell-readonly', valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'goalYr', fieldName: 'goalYr', header: { text: '하수정비기본계획목표년도' } },
+        { 
+            name: 'wholPplMtncPlanPrlg', 
+            fieldName: 'wholPplMtncPlanPrlg', 
+            header: { text: '총관로정비계획연장(m)' }, 
+            footer: footerDecimal2, 
+            editable: false, 
+            styleName: 'rg-cell-total', 
+            valueType: ValueType.NUMBER, 
+            dataFormat: '#,##0.00',
+            computed: { fields: ['cbsysPplMtncPlanPrlg', 'drtwPplMtncPlanPrlg', 'exlnPplMtncPlanPrlg'], type: 'sum' as const },
+        },
+        {
+            name: 'wholPlanPrlg',
+            fieldName: 'wholPlanPrlg',
+            header: { text: '총계획연장(m)' },
+            footer: footerDecimal2,
+            editable: false,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+            computed: {
+                groups: [
+                    {
+                        baseField: 'cbsysPplMtncPlanPrlg',
+                        sumFields: ['cbsysSqrePrlg', 'cbsysCiclPrlg', 'cbsysOpnPrlg', 'cbsysGttrPrlg'],
+                    },
+                    {
+                        baseField: 'drtwPplMtncPlanPrlg',
+                        sumFields: ['drtwPplSqrePrlg', 'drtwPplCiclPrlg'],
+                    },
+                    {
+                        baseField: 'exlnPplMtncPlanPrlg',
+                        sumFields: ['exlnPplSqrePrlg', 'exlnPplCiclPrlg', 'exlnPplOpnPrlg', 'exlnPplGttrPrlg'],
+                    },
+                ],
+                type: 'sumOfMaxOfFieldAndSumGroups' as const,
+            },
+        },
+        { 
+            name: 'wholFcltPrlg', 
+            fieldName: 'wholFcltPrlg', 
+            header: { text: '총시설연장(m)' }, 
+            footer: footerDecimal2, 
+            editable: false, 
+            styleName: 'rg-cell-total', 
+            valueType: ValueType.NUMBER, 
+            dataFormat: '#,##0.00',
+            computed: { fields: ['cbsysSqrePrlg', 'cbsysCiclPrlg', 'cbsysOpnPrlg', 'cbsysGttrPrlg', 'drtwPplSqrePrlg', 'drtwPplCiclPrlg', 'exlnPplSqrePrlg', 'exlnPplCiclPrlg', 'exlnPplOpnPrlg', 'exlnPplGttrPrlg'], type: 'sum' as const },
+        },
+        {
+            name: 'swagePplPsplyRt',
+            fieldName: 'swagePplPsplyRt',
+            header: { text: '하수관로보급률(%)' },
+            footer: footerDecimal1,
+            editable: false,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            computed: {
+                numeratorFields: ['wholFcltPrlg'],
+                denominatorFields: ['wholPlanPrlg'],
+                type: 'pblswrgPopltnSuprtRate' as const,
+            },
+        },
 
         // 합류식(m)
         { name: 'cbsysPplMtncPlanArea', fieldName: 'cbsysPplMtncPlanArea', header: { text: '관로정비계획면적(㎢)' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
         { name: 'cbsysPplMtncPlanPrlg', fieldName: 'cbsysPplMtncPlanPrlg', header: { text: '관로정비계획연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'cbsysPlanPrlg', fieldName: 'cbsysPlanPrlg', header: { text: '계획연장(m)' }, footer: footerDecimal2, editable: false, styleName: 'rg-cell-readonly', valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'cbsysFcltPrlg', fieldName: 'cbsysFcltPrlg', header: { text: '시설연장(m)' }, footer: footerDecimal2, editable: false, styleName: 'rg-cell-readonly', valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        {
+            name: 'cbsysPlanPrlg',
+            fieldName: 'cbsysPlanPrlg',
+            header: { text: '계획연장(m)' },
+            footer: footerDecimal2,
+            editable: false,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+            computed: {
+                baseField: 'cbsysPplMtncPlanPrlg',
+                sumFields: ['cbsysSqrePrlg', 'cbsysCiclPrlg', 'cbsysOpnPrlg', 'cbsysGttrPrlg'],
+                type: 'maxOfFieldAndSum' as const,
+            },
+        },
+        {
+            name: 'cbsysFcltPrlg',
+            fieldName: 'cbsysFcltPrlg',
+            header: { text: '시설연장(m)' },
+            footer: footerDecimal2,
+            editable: false,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+            computed: { fields: ['cbsysSqrePrlg', 'cbsysCiclPrlg', 'cbsysOpnPrlg', 'cbsysGttrPrlg'], type: 'sum' as const },
+        },
         { name: 'cbsysSqrePrlg', fieldName: 'cbsysSqrePrlg', header: { text: '사각형(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
         { name: 'cbsysCiclPrlg', fieldName: 'cbsysCiclPrlg', header: { text: '원형(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
         { name: 'cbsysOpnPrlg', fieldName: 'cbsysOpnPrlg', header: { text: '개거(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
@@ -30,16 +114,64 @@ export const RegionalFactStatusInpColumn = {
         // 분류식(m) > 오수관로
         { name: 'drtwPplMtncPlanArea', fieldName: 'drtwPplMtncPlanArea', header: { text: '관로정비계획면적(㎢)' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
         { name: 'drtwPplMtncPlanPrlg', fieldName: 'drtwPplMtncPlanPrlg', header: { text: '관로정비계획연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'drtwPplPlanPrlg', fieldName: 'drtwPplPlanPrlg', header: { text: '계획연장(m)' }, footer: footerDecimal2, editable: false, styleName: 'rg-cell-readonly', valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'drtwPplFcltPrlg', fieldName: 'drtwPplFcltPrlg', header: { text: '시설연장(m)' }, footer: footerDecimal2, editable: false, styleName: 'rg-cell-readonly', valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        {
+            name: 'drtwPplPlanPrlg',
+            fieldName: 'drtwPplPlanPrlg',
+            header: { text: '계획연장(m)' },
+            footer: footerDecimal2,
+            editable: false,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+            computed: {
+                baseField: 'drtwPplMtncPlanPrlg',
+                sumFields: ['drtwPplSqrePrlg', 'drtwPplCiclPrlg'],
+                type: 'maxOfFieldAndSum' as const,
+            },
+        },
+        {
+            name: 'drtwPplFcltPrlg',
+            fieldName: 'drtwPplFcltPrlg',
+            header: { text: '시설연장(m)' },
+            footer: footerDecimal2,
+            editable: false,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+            computed: { fields: ['drtwPplSqrePrlg', 'drtwPplCiclPrlg'], type: 'sum' as const },
+        },
         { name: 'drtwPplSqrePrlg', fieldName: 'drtwPplSqrePrlg', header: { text: '사각형(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
         { name: 'drtwPplCiclPrlg', fieldName: 'drtwPplCiclPrlg', header: { text: '원형(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
 
         // 분류식(m) > 우수관로
         { name: 'exlnPplMtncPlanArea', fieldName: 'exlnPplMtncPlanArea', header: { text: '관로정비계획면적(㎢)' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
         { name: 'exlnPplMtncPlanPrlg', fieldName: 'exlnPplMtncPlanPrlg', header: { text: '관로정비계획연장(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'exlnPplPlanPrlg', fieldName: 'exlnPplPlanPrlg', header: { text: '계획연장(m)' }, footer: footerDecimal2, editable: false, styleName: 'rg-cell-readonly', valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        { name: 'exlnPplFcltPrlg', fieldName: 'exlnPplFcltPrlg', header: { text: '시설연장(m)' }, footer: footerDecimal2, editable: false, styleName: 'rg-cell-readonly', valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        {
+            name: 'exlnPplPlanPrlg',
+            fieldName: 'exlnPplPlanPrlg',
+            header: { text: '계획연장(m)' },
+            footer: footerDecimal2,
+            editable: false,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+            computed: {
+                baseField: 'exlnPplMtncPlanPrlg',
+                sumFields: ['exlnPplSqrePrlg', 'exlnPplCiclPrlg', 'exlnPplOpnPrlg', 'exlnPplGttrPrlg'],
+                type: 'maxOfFieldAndSum' as const,
+            },
+        },
+        {
+            name: 'exlnPplFcltPrlg',
+            fieldName: 'exlnPplFcltPrlg',
+            header: { text: '시설연장(m)' },
+            footer: footerDecimal2,
+            editable: false,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+            computed: { fields: ['exlnPplSqrePrlg', 'exlnPplCiclPrlg', 'exlnPplOpnPrlg', 'exlnPplGttrPrlg'], type: 'sum' as const },
+        },
         { name: 'exlnPplSqrePrlg', fieldName: 'exlnPplSqrePrlg', header: { text: '사각형(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
         { name: 'exlnPplCiclPrlg', fieldName: 'exlnPplCiclPrlg', header: { text: '원형(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
         { name: 'exlnPplOpnPrlg', fieldName: 'exlnPplOpnPrlg', header: { text: '개거(m)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
@@ -51,7 +183,7 @@ export const RegionalFactStatusInpColumn = {
         // 분류식 > 오수맨홀, 우수맨홀
         { name: 'sprsysDrtwMnhlCnt', fieldName: 'sprsysDrtwMnhlCnt', header: { text: '오수맨홀(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         { name: 'sprsysExlnMnhlCnt', fieldName: 'sprsysExlnMnhlCnt', header: { text: '우수맨홀(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        
+
         { name: 'drtwRcvprpCnt', fieldName: 'drtwRcvprpCnt', header: { text: '오수받이(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         { name: 'exlnRcvprpCnt', fieldName: 'exlnRcvprpCnt', header: { text: '빗물받이(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         { name: 'stofcbrCnt', fieldName: 'stofcbrCnt', header: { text: '우수토실(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
@@ -59,10 +191,25 @@ export const RegionalFactStatusInpColumn = {
 
         // 하수도대장 전산화
         { name: 'sewerLdgrEdpPrlg', fieldName: 'sewerLdgrEdpPrlg', header: { text: '하수도대장전산화연장(m)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'sewerLdgrEdpRt', fieldName: 'sewerLdgrEdpRt', header: { text: '하수도대장전산화율(%)' }, footer: footerDecimal1, editable: false, styleName: 'rg-cell-readonly', valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { 
+            name: 'sewerLdgrEdpRt', 
+            fieldName: 'sewerLdgrEdpRt', 
+            header: { text: '하수도대장전산화율(%)' }, 
+            footer: footerDecimal1, 
+            editable: false, 
+            styleName: 'rg-cell-total', 
+            valueType: ValueType.NUMBER, 
+            dataFormat: '#,##0.0',
+            computed: {
+                numeratorFields: ['sewerLdgrEdpPrlg'],
+                denominatorFields: ['cbsysPplMtncPlanPrlg', 'drtwPplMtncPlanPrlg', 'exlnPplMtncPlanPrlg'],
+                type: 'pblswrgPopltnSuprtRate' as const,
+            },
+        },
 
         // 비고
         { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정코드' }, visible: false },
     ],
     columnLayout: [
         {
@@ -156,6 +303,7 @@ export const RegionalFactStatusInpColumn = {
         'sewerLdgrEdpPrlg',
         'sewerLdgrEdpRt',
         'rmrk',
+        'admdstCd',
     ],
     rowStartNum: 4,
     fixedColumns: 1,
diff --git a/apps/st/src/components/util/column/input/sewagePipeMaintain/PipeDredgingStatusInpColumn.ts b/apps/st/src/components/util/column/input/sewagePipeMaintain/PipeDredgingStatusInpColumn.ts
index 983df126e..bdcac6d19 100644
--- a/apps/st/src/components/util/column/input/sewagePipeMaintain/PipeDredgingStatusInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewagePipeMaintain/PipeDredgingStatusInpColumn.ts
@@ -1,52 +1,115 @@
-import { footerInt, footerDecimal1, footerDecimal2 } from "@/components/util/grid/footerSummary";
 import { ValueType } from "realgrid";
 
+import { footerDecimal1, footerDecimal2, footerInt } from "@/components/util/grid/footerSummary";
+
 // 하수도 통계 관리 > 03.하수관로 유지관리 > tab 2. 관로준설
 export const PipeDredgingStatusInpColumn = {
     columns: [
         // 행정구역
-        { name: 'SIDO', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
-        
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구명' }, editable: false, footer: { text: '합계' }, styleName: 'rg-cell-readonly' },
+
         // 하수관로 총 시설연장
-        { name: 'PIPL_FCLTY_EXTN', fieldName: '하수관로총시설연장(m)', header: { text: '하수관로총시설연장(m)' }, editable: false, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
-        
+        { name: 'wholFcltPrlg', fieldName: 'wholFcltPrlg', header: { text: '하수관로총시설연장(m)' }, editable: false, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00', styleName: 'rg-cell-readonly' },
+
         // 준설연장 및 개소수 > 관로(m)
-        { name: 'DRDG_PIPE_SM', fieldName: '합계', header: { text: '합계' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'DRDG_CMBN_PIPE', fieldName: '합류식', header: { text: '합류식' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
+        {
+            name: 'wholSwagePpl',
+            fieldName: 'wholSwagePpl',
+            header: { text: '합계' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: ['cbsysPplPrlg', 'sprsysExlnPrlg', 'sprsysDrtwPrlg'],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'cbsysPplPrlg', fieldName: 'cbsysPplPrlg', header: { text: '합류식' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+
         // 준설연장 및 개소수 > 관로(m) > 분류식
-        { name: 'DRDG_RAINWTR_PIPE', fieldName: '우수', header: { text: '우수' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'DRDG_PLTWTR_PIPE', fieldName: '오수', header: { text: '오수' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
+        { name: 'sprsysExlnPrlg', fieldName: 'sprsysExlnPrlg', header: { text: '우수' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'sprsysDrtwPrlg', fieldName: 'sprsysDrtwPrlg', header: { text: '오수' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+
         // 준설연장 및 개소수 > 맨홀, 오·우수받이, 토실·토구
-        { name: 'MNHLE_SITE', fieldName: '맨홀(개소)', header: { text: '맨홀(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'PLTWTR_RCVR_SITE', fieldName: '오·우수받이(개소)', header: { text: '오·우수받이(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SOILSPLL_SOILHOLE_SITE', fieldName: '토실·토구(개소)', header: { text: '토실·토구(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'mnhlCnt', fieldName: 'mnhlCnt', header: { text: '맨홀(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnDrtwRcvprpCnt', fieldName: 'exlnDrtwRcvprpCnt', header: { text: '오·우수받이(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'stofcbrOtflCnt', fieldName: 'stofcbrOtflCnt', header: { text: '토실·토구(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 계획 & 비율 
-        { name: 'DRDG_TRGET_EXTN', fieldName: '준설 계획 연장(m)', header: { text: '준설 계획 연장(m)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'DRDG_TRGET_RT', fieldName: '계획대비 준설율(%)', header: { text: '계획대비 준설율(%)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'PIPL_FCLTY_RT', fieldName: '총시설연장대비 준설율(%)', header: { text: '총시설연장대비 준설율(%)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'drdgnPlanPrlg', fieldName: 'drdgnPlanPrlg', header: { text: '준설 계획 연장(m)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'drdgnTrgtCtrsDrdgnRt',
+            fieldName: 'drdgnTrgtCtrsDrdgnRt',
+            header: { text: '계획대비 준설율(%)' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                numeratorFields: ['cbsysPplPrlg', 'sprsysExlnPrlg', 'sprsysDrtwPrlg'],
+                denominatorFields: ['drdgnPlanPrlg'],
+                type: 'pblswrgPopltnSuprtRate' as const,
+            },
+        },
+        {
+            name: 'wholPrlgCtrsDrdgnRt',
+            fieldName: 'wholPrlgCtrsDrdgnRt',
+            header: { text: '총시설연장대비 준설율(%)' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                numeratorFields: ['drdgnPlanPrlg'],
+                denominatorFields: ['wholFcltPrlg'],
+                type: 'pblswrgPopltnSuprtRate' as const,
+            },
+        },
 
         // 준설실적
-        { name: 'DRDG_ACMSLT_AMOUNT', fieldName: '금액(백만원)', header: { text: '금액(백만원)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'DRDG_ACMSLT_QY', fieldName: '준설량(m³)', header: { text: '준설량(m³)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drdgnAmt', fieldName: 'drdgnAmt', header: { text: '금액(백만원)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drdgnQnt', fieldName: 'drdgnQnt', header: { text: '준설량(m³)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 준설토사처리 
-        { name: 'DRDG_ACMSLT_UNTPC', fieldName: '준설토처리비(백만원)', header: { text: '준설토처리비(백만원)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'DRDG_ETND_SM', fieldName: '처리량 계(톤)', header: { text: '처리량 계(톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'RCLM', fieldName: '매립', header: { text: '매립' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'OCEAN_DPSL', fieldName: '해양투기', header: { text: '해양투기' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'RUSE', fieldName: '재활용', header: { text: '재활용' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'ETC', fieldName: '기타(소각, 고형화, 시멘트원료 등)', header: { text: '기타(소각, 고형화, 시멘트원료 등)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
+        { name: 'drdgnUntprcAmt', fieldName: 'drdgnUntprcAmt', header: { text: '준설토처리비(백만원)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'wholDrdgnPrcsQnt',
+            fieldName: 'wholDrdgnPrcsQnt',
+            header: { text: '처리량 계(톤)' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: ['rclmQnt', 'oceanEmsnQnt', 'rcycQnt', 'etcQnt'],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'rclmQnt', fieldName: 'rclmQnt', header: { text: '매립' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'oceanEmsnQnt', fieldName: 'oceanEmsnQnt', header: { text: '해양투기' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'rcycQnt', fieldName: 'rcycQnt', header: { text: '재활용' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'etcQnt', fieldName: 'etcQnt', header: { text: '기타(소각, 고형화, 시멘트원료 등)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+
         // 비고
-        { name: 'RMK', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, editable: false, visible: false },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, editable: false, visible: false },
     ],
     columnLayout: [
-        { name: 'group_admin', header: { text: '행정구역' }, items: ['SIDO', 'GUGUN'] },
-        'PIPL_FCLTY_EXTN',
+        {
+            name: 'group_admin', header: { text: '행정구역' },
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
+        },
+        'wholFcltPrlg',
         {
             name: 'group_dredge_info',
             header: { text: '준설연장 및 개소수' },
@@ -55,28 +118,30 @@ export const PipeDredgingStatusInpColumn = {
                     name: 'group_pipe',
                     header: { text: '관로(m)' },
                     items: [
-                        'DRDG_PIPE_SM', 'DRDG_CMBN_PIPE',
-                        { name: 'group_sep', header: { text: '분류식' }, items: ['DRDG_RAINWTR_PIPE', 'DRDG_PLTWTR_PIPE'] }
+                        'wholSwagePpl', 'cbsysPplPrlg',
+                        { name: 'group_sep', header: { text: '분류식' }, items: ['sprsysExlnPrlg', 'sprsysDrtwPrlg'] }
                     ]
                 },
-                'MNHLE_SITE', 'PLTWTR_RCVR_SITE', 'SOILSPLL_SOILHOLE_SITE'
+                'mnhlCnt', 'exlnDrtwRcvprpCnt', 'stofcbrOtflCnt'
             ]
         },
-        'DRDG_TRGET_EXTN', 'DRDG_TRGET_RT', 'PIPL_FCLTY_RT',
+        'drdgnPlanPrlg', 'drdgnTrgtCtrsDrdgnRt', 'wholPrlgCtrsDrdgnRt',
         {
             name: 'group_perf',
             header: { text: '준설실적' },
-            items: ['DRDG_ACMSLT_AMOUNT', 'DRDG_ACMSLT_QY']
+            items: ['drdgnAmt', 'drdgnQnt']
         },
         {
             name: 'group_soil_treat',
             header: { text: '준설토사처리' },
-            items: ['DRDG_ACMSLT_UNTPC', 'DRDG_ETND_SM', 'RCLM', 'OCEAN_DPSL', 'RUSE', 'ETC']
+            items: ['drdgnUntprcAmt', 'wholDrdgnPrcsQnt', 'rclmQnt', 'oceanEmsnQnt', 'rcycQnt', 'etcQnt']
         },
-        'RMK'
+        'rmrk',
+        'admdstCd',
+        'admdstNm',
     ],
     rowStartNum: 4,
     fixedColumns: 1,
-    tabKey: 'pipeDredgingStatusInp',
+    tabKey: 'ST00030002',
     tabLabel: '관로준설'
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/sewagePipeMaintain/RepairStatusInpColumn.ts b/apps/st/src/components/util/column/input/sewagePipeMaintain/RepairStatusInpColumn.ts
index 5f22b373f..57fb2689c 100644
--- a/apps/st/src/components/util/column/input/sewagePipeMaintain/RepairStatusInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewagePipeMaintain/RepairStatusInpColumn.ts
@@ -5,51 +5,82 @@ import { ValueType } from "realgrid";
 export const RepairStatusInpColumn = {
     columns: [
         // 행정구역
-        { name: 'SIDO', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구명' }, editable: false, footer: { text: '합계' }, styleName: 'rg-cell-readonly' },
         
         // 개·보수관로 > 전체보수(m)
-        { name: 'RPAIR_PIPE_SM', fieldName: '소계', header: { text: '소계' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'RPAIR_CMBN_PIPE', fieldName: '합류식', header: { text: '합류식' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'mendngWhol',
+            fieldName: 'mendngWhol',
+            header: { text: '소계' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: ['cbsysMendngPrlg', 'sprsysExlnPrlg', 'sprsysDrtwPrlg'],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'cbsysMendngPrlg', fieldName: 'cbsysMendngPrlg', header: { text: '합류식' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
         
         // 개·보수관로 > 전체보수(m) > 분류식
-        { name: 'RPAIR_RAINWTR_PIPE', fieldName: '우수', header: { text: '우수' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'RPAIR_PLTWTR_PIPE', fieldName: '오수', header: { text: '오수' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'sprsysExlnPrlg', fieldName: 'sprsysExlnPrlg', header: { text: '우수' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'sprsysDrtwPrlg', fieldName: 'sprsysDrtwPrlg', header: { text: '오수' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
         
         // 개·보수관로 > 부분보수(개소)
-        { name: 'RPAIR_PIPE_SM2', fieldName: '소계', header: { text: '소계' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'RPAIR_CMBN_PIPE2', fieldName: '합류식', header: { text: '합류식' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'partMendngWhol',
+            fieldName: 'partMendngWhol',
+            header: { text: '소계' },
+            editable: false,
+            footer: footerInt,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: ['cbsysPartMendngPrlg', 'sprsysExlnMendngPrlg', 'sprsysDrtwMendngPrlg'],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'cbsysPartMendngPrlg', fieldName: 'cbsysPartMendngPrlg', header: { text: '합류식' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 개·보수관로 > 부분보수(개소) > 분류식
-        { name: 'RPAIR_RAINWTR_PIPE2', fieldName: '우수', header: { text: '우수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'RPAIR_PLTWTR_PIPE2', fieldName: '오수', header: { text: '오수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'sprsysExlnMendngPrlg', fieldName: 'sprsysExlnMendngPrlg', header: { text: '우수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'sprsysDrtwMendngPrlg', fieldName: 'sprsysDrtwMendngPrlg', header: { text: '오수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 맨홀(개소)
-        { name: 'MNHLE_SITE', fieldName: '합류식맨홀', header: { text: '합류식맨홀' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'cbsysMnhlCnt', fieldName: 'cbsysMnhlCnt', header: { text: '합류식맨홀' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 맨홀(개소) > 분류식
-        { name: 'PLTWTR_MNHLE_SITE', fieldName: '오수맨홀', header: { text: '오수맨홀' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'RAINWTR_MNHLE_SITE', fieldName: '우수맨홀', header: { text: '우수맨홀' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'sprsysDrtwMnhlCnt', fieldName: 'sprsysDrtwMnhlCnt', header: { text: '오수맨홀' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'sprsysExlnMnhlCnt', fieldName: 'sprsysExlnMnhlCnt', header: { text: '우수맨홀' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 받이
-        { name: 'PLTWTR_RCVR_SITE', fieldName: '오수받이(개소)', header: { text: '오수받이(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'RAINWTR_RCVR_SITE', fieldName: '빗물받이(개소)', header: { text: '빗물받이(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drtwRcvprpCnt', fieldName: 'drtwRcvprpCnt', header: { text: '오수받이(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnRcvprpCnt', fieldName: 'exlnRcvprpCnt', header: { text: '빗물받이(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 토실, 토구
-        { name: 'SOILSPLL_SITE', fieldName: '토실(개소)', header: { text: '토실(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SOILHOLE_SITE', fieldName: '토구(개소)', header: { text: '토구(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'stofcbrCnt', fieldName: 'stofcbrCnt', header: { text: '토실(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'otflCnt', fieldName: 'otflCnt', header: { text: '토구(개소)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
         
         // 수밀검사CCTV조사량(m)
-        { name: 'CCTV', fieldName: '수밀검사CCTV조사량(m)', header: { text: '수밀검사CCTV조사량(m)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'cctvExmnPrlg', fieldName: 'cctvExmnPrlg', header: { text: '수밀검사·CCTV조사량(m)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
         
         // 비고
-        { name: 'RMK', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, editable: false, visible: false },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, editable: false, visible: false },
     ],
     columnLayout: [
         {
             name: 'group_admin',
             header: { text: '행정구역' },
-            items: ['SIDO', 'GUGUN']
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
         },
         {
             name: 'group_repair_main',
@@ -59,12 +90,12 @@ export const RepairStatusInpColumn = {
                     name: 'group_full_repair',
                     header: { text: '전체보수(m)' },
                     items: [
-                        'RPAIR_PIPE_SM', 
-                        'RPAIR_CMBN_PIPE', 
+                        'mendngWhol',
+                        'cbsysMendngPrlg',
                         { 
                             name: 'group_full_sep', 
                             header: { text: '분류식' }, 
-                            items: ['RPAIR_RAINWTR_PIPE', 'RPAIR_PLTWTR_PIPE'] 
+                            items: ['sprsysExlnPrlg', 'sprsysDrtwPrlg']
                         }
                     ]
                 },
@@ -72,12 +103,12 @@ export const RepairStatusInpColumn = {
                     name: 'group_part_repair',
                     header: { text: '부분보수(개소)' },
                     items: [
-                        'RPAIR_PIPE_SM2', 
-                        'RPAIR_CMBN_PIPE2', 
+                        'partMendngWhol',
+                        'cbsysPartMendngPrlg',
                         { 
                             name: 'group_part_sep', 
                             header: { text: '분류식' }, 
-                            items: ['RPAIR_RAINWTR_PIPE2', 'RPAIR_PLTWTR_PIPE2'] 
+                            items: ['sprsysExlnMendngPrlg', 'sprsysDrtwMendngPrlg']
                         }
                     ]
                 }
@@ -87,29 +118,31 @@ export const RepairStatusInpColumn = {
             name: 'group_manhole',
             header: { text: '맨홀(개소)' },
             items: [
-                'MNHLE_SITE',
+                'cbsysMnhlCnt',
                 {
                     name: 'group_mh_sep',
                     header: { text: '분류식' },
-                    items: ['PLTWTR_MNHLE_SITE', 'RAINWTR_MNHLE_SITE']
+                    items: ['sprsysDrtwMnhlCnt', 'sprsysExlnMnhlCnt']
                 }
             ]
         },
         {
             name: 'group_inlet',
             header: { text: '받이' },
-            items: ['PLTWTR_RCVR_SITE', 'RAINWTR_RCVR_SITE']
+            items: ['drtwRcvprpCnt', 'exlnRcvprpCnt']
         },
         {
             name: 'group_chamber',
             header: { text: '토실,토구' },
-            items: ['SOILSPLL_SITE', 'SOILHOLE_SITE']
+            items: ['stofcbrCnt', 'otflCnt']
         },
-        'CCTV',
-        'RMK'
+        'cctvExmnPrlg',
+        'rmrk',
+        'admdstCd',
+        'admdstNm',
     ],
     rowStartNum: 4,
     fixedColumns: 1,
-    tabKey: 'repairStatusInp',
+    tabKey: 'ST00030001',
     tabLabel: '개보수'
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/sewageReservoirPump/RainfallPumpStationInpColumn.ts b/apps/st/src/components/util/column/input/sewageReservoirPump/RainfallPumpStationInpColumn.ts
index e000f4904..695fb8213 100644
--- a/apps/st/src/components/util/column/input/sewageReservoirPump/RainfallPumpStationInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewageReservoirPump/RainfallPumpStationInpColumn.ts
@@ -1,93 +1,159 @@
+import type { ColumnConfig } from "@/components/type/DataGrid.type";
 import { footerInt, footerDecimal1, footerDecimal2, footerDecimal3 } from "@/components/util/grid/footerSummary";
 import { ValueType } from "realgrid";
 
+const RAINFALL_PUMP_FCLTY_KIND_VALUES = ["해당없음", "제1종", "제2종", "제3종"] as const;
+const RAINFALL_PUMP_YN_VALUES = ["유", "무"] as const;
+
+function dropdownColumn(
+    col: Pick<ColumnConfig, "name" | "fieldName" | "header"> &
+        Partial<ColumnConfig>,
+    options: readonly string[],
+): ColumnConfig {
+    const values = [...options];
+    return {
+        ...col,
+        values,
+        labels: values,
+        lookupDisplay: true,
+        editor: {
+            type: "dropdown",
+            domainOnly: true,
+            textReadOnly: true,
+            commitOnSelect: true,
+            dropDownWhenClick: true,
+            values,
+            labels: values,
+        },
+    };
+}
+
  // 하수도 통계 관리 > 04.하수저류시설 및 빗물펌프장 > tab 2: 빗물펌프장
 export const RainfallPumpStationInpColumn = {
     columns: [
-        // Hidden Columns : 시스템 관리를 위한 값
-        { name: 'sidoCd', fieldName: '시도코드', header: { text: '시도코드' }, hidden: true },
-        { name: 'adstDstrCd', fieldName: '행정구역코드', header: { text: '행정구역코드' }, hidden: true },
-        { name: 'adstCd', fieldName: '행정코드', header: { text: '행정코드' }, hidden: true },
-        { name: 'swgeStrgeFctSeq', fieldName: '시설SEQ', header: { text: '시설SEQ' }, hidden: true },
-        { name: 'yr', fieldName: '년도', header: { text: '년도' }, hidden: true },
-        { name: 'odr', fieldName: '차수', header: { text: '차수' }, hidden: true },
-        { name: 'bsnmCd', fieldName: '사업자코드', header: { text: '사업자코드' }, hidden: true },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' } },
 
-        // Visible Columns
-        // 행정구역
-        { name: 'sido', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'gugun', fieldName: '시군구', header: { text: '시군구' }, footer: { text: '합계' } },
+        { name: 'fcltNm', fieldName: 'fcltNm', header: { text: '시설명' } },
+        { name: 'fcltPstnCn', fieldName: 'fcltPstnCn', header: { text: '위치' } },
 
-        // 시설명
-        { name: 'swgeStrgeNm', fieldName: '시설명', header: { text: '시설명' } },
+        dropdownColumn(
+            { name: 'fcltyKndCn', fieldName: 'fcltyKndCn', header: { text: '시설물종류' } },
+            RAINFALL_PUMP_FCLTY_KIND_VALUES,
+        ),
 
-        // 위치
-        { name: 'addr', fieldName: '위치', header: { text: '위치' } },
-
-        // 시설물종류
-        { name: 'facRes', fieldName: '시설물종류', header: { text: '시설물종류' } },
-
-        // 가동개시 년월일 yyyy-mm-dd
-        { name: 'rnDt', fieldName: '가동개시 년월일 yyyy-mm-dd', header: { text: '가동개시 년월일 yyyy-mm-dd' } },
-
-        // 계획설계빈도
-        { name: 'plDsgnFrqnc', fieldName: '계획설계빈도', header: { text: '계획설계빈도' } },
+        {
+            name: 'oprtngStrtYmd',
+            fieldName: 'oprtngStrtYmd',
+            header: { text: '가동개시 년월일 yyyy-mm-dd' },
+            datetimeFormat: 'yyyy-MM-dd',
+            editor: {
+                type: 'date',
+                dropDownWhenClick: true,
+                datetimeFormat: 'yyyy-MM-dd',
+            },
+        },
+        { name: 'planDesignFreqCnt', fieldName: 'planDesignFreqCnt', header: { text: '계획설계빈도' } },
 
         // 집수구역면적(㎢)
-        { name: 'dgrAr', fieldName: '집수구역면적(㎢)', header: { text: '집수구역면적(㎢)' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'wtrStrgZoneArea', fieldName: 'wtrStrgZoneArea', header: { text: '집수구역면적(㎢)' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
 
         // 유수지
-        { name: 'revFnnc', fieldName: '유수지유무(유,무)', header: { text: '유수지유무(유,무)' } },
-        { name: 'revCpcty', fieldName: '저류랑(m³)', header: { text: '저류랑(m³)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        dropdownColumn(
+            { name: 'rsvrYn', fieldName: 'rsvrYn', header: { text: '유수지유무(유,무)' } },
+            RAINFALL_PUMP_YN_VALUES,
+        ),
+        { name: 'rsvrImpndQnt', fieldName: 'rsvrImpndQnt', header: { text: '저류랑(m³)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 흡수정
-        { name: 'absCpcty', fieldName: '저류랑(m³)', header: { text: '저류랑(m³)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'abstnRgnImpdQnt', fieldName: 'abstnRgnImpdQnt', header: { text: '저류랑(m³)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 펌프시설 > 총양수량(m³/min)
-        { name: 'wpCpcty', fieldName: '총양수량(m³/min)', header: { text: '총양수량(m³/min)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'grssPpqty',
+            fieldName: 'grssPpqty',
+            header: { text: '총양수량(m³/min)' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                type: 'pumpGrossPpqty' as const,
+                pumpGroups: [
+                    {
+                        pumpCntField: 'pumpFcltN1PumpCnt',
+                        rsrvPumpCntField: 'pumpFcltN1RsrvPumpCnt',
+                        perPpqtyField: 'pumpFcltN1PerPpqty',
+                    },
+                    {
+                        pumpCntField: 'pumpFcltN2PumpCnt',
+                        rsrvPumpCntField: 'pumpFcltN2RsrvPumpCnt',
+                        perPpqtyField: 'pumpFcltN2PerPpqty',
+                    },
+                    {
+                        pumpCntField: 'pumpFcltN3PumpCnt',
+                        rsrvPumpCntField: 'pumpFcltN3RsrvPumpCnt',
+                        perPpqtyField: 'pumpFcltN3PerPpqty',
+                    },
+                ],
+            },
+        },
 
         // 펌프시설1
-        { name: 'pumpCalbr', fieldName: '구경(mm)', header: { text: '구경(mm)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'pumpHpCo', fieldName: '대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'pumpCo', fieldName: '펌프대수', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'pumpPreparCo', fieldName: '예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'pumpFcltN1DmtrExpln', fieldName: 'pumpFcltN1DmtrExpln', header: { text: '구경(mm)' } },
+        { name: 'pumpFcltN1PerPpqty', fieldName: 'pumpFcltN1PerPpqty', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'pumpFcltN1PumpCnt', fieldName: 'pumpFcltN1PumpCnt', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'pumpFcltN1RsrvPumpCnt', fieldName: 'pumpFcltN1RsrvPumpCnt', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 펌프시설2
-        { name: 'pumpCalbr2', fieldName: '구경(mm)', header: { text: '구경(mm)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'pumpHpCo2', fieldName: '대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'pumpCo2', fieldName: '펌프대수', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'pumpPreparCo2', fieldName: '예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'pumpFcltN2DmtrExpln', fieldName: 'pumpFcltN2DmtrExpln', header: { text: '구경(mm)' } },
+        { name: 'pumpFcltN2PerPpqty', fieldName: 'pumpFcltN2PerPpqty', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'pumpFcltN2PumpCnt', fieldName: 'pumpFcltN2PumpCnt', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'pumpFcltN2RsrvPumpCnt', fieldName: 'pumpFcltN2RsrvPumpCnt', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 펌프시설3
-        { name: 'pumpCalbr3', fieldName: '구경(mm)', header: { text: '구경(mm)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'pumpHpCo3', fieldName: '대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'pumpCo3', fieldName: '펌프대수', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'pumpPreparCo3', fieldName: '예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'pumpFcltN3DmtrExpln', fieldName: 'pumpFcltN3DmtrExpln', header: { text: '구경(mm)' } },
+        { name: 'pumpFcltN3PerPpqty', fieldName: 'pumpFcltN3PerPpqty', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'pumpFcltN3PumpCnt', fieldName: 'pumpFcltN3PumpCnt', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'pumpFcltN3RsrvPumpCnt', fieldName: 'pumpFcltN3RsrvPumpCnt', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 부대시설
-        { name: 'dorZeqpFnnc', fieldName: '전처리시설유무(유/무)', header: { text: '전처리시설유무(유/무)' } },
-        { name: 'selfEtrqFnnc', fieldName: '탈취설비유무(유/무)', header: { text: '탈취설비유무(유/무)' } },
-        { name: 'freFnnc', fieldName: '자가발전유무(유/무)', header: { text: '자가발전유무(유/무)' } },
+        dropdownColumn(
+            { name: 'prcsgFcltYn', fieldName: 'prcsgFcltYn', header: { text: '전처리시설유무(유/무)' } },
+            RAINFALL_PUMP_YN_VALUES,
+        ),
+        dropdownColumn(
+            { name: 'ddrztnEqpmYn', fieldName: 'ddrztnEqpmYn', header: { text: '탈취설비유무(유/무)' } },
+            RAINFALL_PUMP_YN_VALUES,
+        ),
+        dropdownColumn(
+            { name: 'oslfEtgtYn', fieldName: 'oslfEtgtYn', header: { text: '자가발전유무(유/무)' } },
+            RAINFALL_PUMP_YN_VALUES,
+        ),
 
         // 방류수역
-        { name: 'disWat', fieldName: '방류수역', header: { text: '방류수역' } },
+        { name: 'dschgWtrsExpln', fieldName: 'dschgWtrsExpln', header: { text: '방류수역' } },
 
         // 최종처분량(ton/년)
-        { name: 'sdmtTreCpcty', fieldName: '침사', header: { text: '침사' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'iprtTreCpcty', fieldName: '협잡물', header: { text: '협잡물' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'prcptnLastDspsQnt', fieldName: 'prcptnLastDspsQnt', header: { text: '침사' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'ctmnLastDspsQnt', fieldName: 'ctmnLastDspsQnt', header: { text: '협잡물' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 최종처분방법
-        { name: 'sdmtTreMth', fieldName: '침사', header: { text: '침사' } },
-        { name: 'iprtTreMth', fieldName: '협잡물', header: { text: '협잡물' } },
+        { name: 'prcptnLastDspsMthdExpln', fieldName: 'prcptnLastDspsMthdExpln', header: { text: '침사' } },
+        { name: 'ctmnLastDspsMthdExpln', fieldName: 'ctmnLastDspsMthdExpln', header: { text: '협잡물' } },
 
         // 운영실적
-        { name: 'yrstpRnDyn', fieldName: '가동일수(일/년)', header: { text: '가동일수(일/년)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' }, // 입력값 3자리만 가능
-        { name: 'dsplcmntAmnt', fieldName: '총배수량(m³/년)', header: { text: '총배수량(m³/년)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        { name: 'oprtngDayCnt', fieldName: 'oprtngDayCnt', header: { text: '가동일수(일/년)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' }, // 입력값 3자리만 가능
+        { name: 'grssMltvQnt', fieldName: 'grssMltvQnt', header: { text: '총배수량(m³/년)' }, footer: footerDecimal2, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
 
         // 비고
-        { name: 'rmk', fieldName: '비고', header: { text: '비고' } },
-        { name: 'chckerOpinion', fieldName: '검토자의견', header: { text: '검토자의견' } },
-        { name: 'wrterOpinion', fieldName: '사용자의견', header: { text: '사용자의견' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
+
+        // Hidden Columns : 시스템 관리를 위한 값
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, },
+        { name: 'fcltSn', fieldName: 'fcltSn', header: { text: '시설일련번호' }, visible: false, },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false },
     ],
 
     columnLayout: [
@@ -95,21 +161,24 @@ export const RainfallPumpStationInpColumn = {
             name: 'adminArea',
             hideChildHeaders: false,
             header: { text: '행정구역' },
-            items: ['sido', 'gugun'],
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 3 }] },
+                'sggNm',
+            ],
         },
-        'swgeStrgeNm',
-        'addr',
-        'facRes',
-        'rnDt',
-        'plDsgnFrqnc',
-        'dgrAr',
+        'fcltNm',
+        'fcltPstnCn',
+        'fcltyKndCn',
+        'oprtngStrtYmd',
+        'planDesignFreqCnt',
+        'wtrStrgZoneArea',
         {
             name: 'reservoir',
             hideChildHeaders: false,
             header: { text: '유수지' },
             items: [
-                'revFnnc',
-                'revCpcty',
+                'rsvrYn',
+                'rsvrImpndQnt',
             ],
         },
         {
@@ -117,7 +186,7 @@ export const RainfallPumpStationInpColumn = {
             hideChildHeaders: false,
             header: { text: '흡수정' },
             items: [
-                'absCpcty',
+                'abstnRgnImpdQnt',
             ],
         },
         {
@@ -125,16 +194,16 @@ export const RainfallPumpStationInpColumn = {
             hideChildHeaders: false,
             header: { text: '펌프시설' },
             items: [
-                'wpCpcty',
+                'grssPpqty',
                 {
                     name: 'pumpSystem1',
                     hideChildHeaders: false,
                     header: { text: '펌프시설1' },
                     items: [
-                        'pumpCalbr',
-                        'pumpHpCo',
-                        'pumpCo',
-                        'pumpPreparCo',
+                        'pumpFcltN1DmtrExpln',
+                        'pumpFcltN1PerPpqty',
+                        'pumpFcltN1PumpCnt',
+                        'pumpFcltN1RsrvPumpCnt',
                     ],
                 },
                 {
@@ -142,10 +211,10 @@ export const RainfallPumpStationInpColumn = {
                     hideChildHeaders: false,
                     header: { text: '펌프시설2' },
                     items: [
-                        'pumpCalbr2',
-                        'pumpHpCo2',
-                        'pumpCo2',
-                        'pumpPreparCo2',
+                        'pumpFcltN2DmtrExpln',
+                        'pumpFcltN2PerPpqty',
+                        'pumpFcltN2PumpCnt',
+                        'pumpFcltN2RsrvPumpCnt',
                     ],
                 },
                 {
@@ -153,10 +222,10 @@ export const RainfallPumpStationInpColumn = {
                     hideChildHeaders: false,
                     header: { text: '펌프시설3' },
                     items: [
-                        'pumpCalbr3',
-                        'pumpHpCo3',
-                        'pumpCo3',
-                        'pumpPreparCo3',
+                        'pumpFcltN3DmtrExpln',
+                        'pumpFcltN3PerPpqty',
+                        'pumpFcltN3PumpCnt',
+                        'pumpFcltN3RsrvPumpCnt',
                     ],
                 },
             ],
@@ -166,19 +235,19 @@ export const RainfallPumpStationInpColumn = {
             hideChildHeaders: false,
             header: { text: '부대시설' },
             items: [
-                'dorZeqpFnnc',
-                'selfEtrqFnnc',
-                'freFnnc',
+                'prcsgFcltYn',
+                'ddrztnEqpmYn',
+                'oslfEtgtYn',
             ],
         },
-        'disWat',
+        'dschgWtrsExpln',
         {
             name: 'finalDisposalAmount',
             hideChildHeaders: false,
             header: { text: '최종처분량(ton/년)' },
             items: [
-                'sdmtTreCpcty',
-                'iprtTreCpcty',
+                'prcptnLastDspsQnt',
+                'ctmnLastDspsQnt',
             ],
         },
         {
@@ -186,8 +255,8 @@ export const RainfallPumpStationInpColumn = {
             hideChildHeaders: false,
             header: { text: '최종처분방법' },
             items: [
-                'sdmtTreMth',
-                'iprtTreMth',
+                'prcptnLastDspsMthdExpln',
+                'ctmnLastDspsMthdExpln',
             ],
         },
         {
@@ -195,17 +264,18 @@ export const RainfallPumpStationInpColumn = {
             hideChildHeaders: false,
             header: { text: '운영실적' },
             items: [
-                'yrstpRnDyn',
-                'dsplcmntAmnt',
+                'oprtngDayCnt',
+                'grssMltvQnt',
             ],
         },
-        'rmk',
-        'chckerOpinion',
-        'wrterOpinion',
+        'rmrk',
+        'admdstCd',
+        'fcltSn',
+        'admdstNm'
     ],
 
     rowStartNum: 3,
     fixedColumns: 2,
-    tabKey: 'rainfallPumpStationInp',
+    tabKey: 'ST00040002',
     tabLabel: '빗물펌프장',
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/sewageReservoirPump/SewageReservoirInpColumn.ts b/apps/st/src/components/util/column/input/sewageReservoirPump/SewageReservoirInpColumn.ts
index 8dc69e5e9..8747c5204 100644
--- a/apps/st/src/components/util/column/input/sewageReservoirPump/SewageReservoirInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewageReservoirPump/SewageReservoirInpColumn.ts
@@ -1,92 +1,235 @@
+import type { ColumnConfig } from "@/components/type/DataGrid.type";
 import { footerInt, footerDecimal1, footerDecimal3 } from "@/components/util/grid/footerSummary";
 import { ValueType } from "realgrid";
 
+/** 설치목적 O/X 표기 */
+export const SEWAGE_RESERVOIR_OX_YN_VALUES = ["O", "X"] as const;
+
+/** 시설구조(ST00040001 `fcltStrctCn`) */
+export const SEWAGE_RESERVOIR_FCLT_STRCT_VALUES = [
+    "일반지하식",
+    "지하터널식",
+    "기타",
+] as const;
+export const SEWAGE_RESERVOIR_YN_VALUES = ["유", "무"] as const;
+export const SEWAGE_RESERVOIR_MLTV_MTH_VALUES = ["자연배수", "강제배수"] as const;
+export const SEWAGE_RESERVOIR_IMPD_MTH_VALUES = ["직렬", "병렬"] as const;
+export const SEWAGE_RESERVOIR_IMPD_PRCS_MTHD_VALUES = ["자체처리", "연계처리"] as const;
+
+function dropdownColumn(
+    col: Pick<ColumnConfig, "name" | "fieldName" | "header"> &
+        Partial<ColumnConfig>,
+    options: readonly string[],
+): ColumnConfig {
+    const values = [...options];
+    return {
+        ...col,
+        values,
+        labels: values,
+        lookupDisplay: true,
+        editor: {
+            type: "dropdown",
+            domainOnly: true,
+            textReadOnly: true,
+            commitOnSelect: true,
+            dropDownWhenClick: true,
+            values,
+            labels: values,
+        },
+    };
+}
+
+function oxYnDropdownColumn(
+    col: Pick<ColumnConfig, "name" | "fieldName" | "header"> &
+        Partial<ColumnConfig>,
+): ColumnConfig {
+    return dropdownColumn(col, SEWAGE_RESERVOIR_OX_YN_VALUES);
+}
+
  // 하수도 통계 관리 > 04.하수저류시설 및 빗물펌프장 > tab 1: 하수저류시설
 export const SewageReservoirInpColumn = {
     columns: [
-        // Hidden Columns : 시스템 관리를 위한 값
-        { name: 'sidoCd', fieldName: '시도코드', header: { text: '시도코드' }, hidden: true },
-        { name: 'adstDstrCd', fieldName: '행정구역코드', header: { text: '행정구역코드' }, hidden: true },
-        { name: 'adstCd', fieldName: '행정코드', header: { text: '행정코드' }, hidden: true },
-        { name: 'swgeStrgeFctSeq', fieldName: '시설SEQ', header: { text: '시설SEQ' }, hidden: true },
-
-        // Visible Columns 
-        // 행정구역
-        { name: 'sido', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'gugun', fieldName: '시군구', header: { text: '시군구' }, footer: { text: '합계' } },
-
+        // 행정구역 
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false, styleName: 'rg-cell-readonly' },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' } },
+        
         // 기본 정보
-        { name: 'swgeStrgeNm', fieldName: '시설명', header: { text: '시설명' } },
-        { name: 'addr', fieldName: '위치', header: { text: '위치' } },
-        { name: 'rnDt', fieldName: '가동개시 년월일 yyyy-mm-dd', header: { text: '가동개시 년월일 yyyy-mm-dd' } },
-        { name: 'designFrequency', fieldName: '계획설계빈도', header: { text: '계획설계빈도' } },
+        { name: 'fcltNm', fieldName: 'fcltNm', header: { text: '시설명' } },
+        { name: 'fcltPstnCn', fieldName: 'fcltPstnCn', header: { text: '위치' } },
+        {
+            name: 'oprtngStrtYmd',
+            fieldName: 'oprtngStrtYmd',
+            header: { text: '가동개시 년월일 yyyy-mm-dd' },
+            datetimeFormat: 'yyyy-MM-dd',
+            editor: {
+                type: 'date',
+                dropDownWhenClick: true,
+                datetimeFormat: 'yyyy-MM-dd',
+            },
+        },
+        { name: 'planDesignFreqCnt', fieldName: 'planDesignFreqCnt', header: { text: '계획설계빈도' } },
 
-        // 설치목적 
-        { name: 'floodingPrevention', fieldName: '침수예방', header: { text: '침수예방' } },
-        { name: 'waterQualityReduction', fieldName: '수질오염저감', header: { text: '수질오염저감' } },
-        { name: 'sewerageReuseUse', fieldName: '하수재이용용도', header: { text: '하수재이용용도' } },
+        // 설치목적 (O/X)
+        oxYnDropdownColumn({
+            name: "fldngPrvtnYn",
+            fieldName: "fldngPrvtnYn",
+            header: { text: "침수예방" },
+        }),
+        oxYnDropdownColumn({
+            name: "wqPlltnMtgtYn",
+            fieldName: "wqPlltnMtgtYn",
+            header: { text: "수질오염저감" },
+        }),
+        oxYnDropdownColumn({
+            name: "rtlztnUsgYn",
+            fieldName: "rtlztnUsgYn",
+            header: { text: "하수재이용용도" },
+        }),
 
         // 시설 구조
-        { name: 'facilityStructure', fieldName: '시설구조(일반지하식,지하터널식,기타)', header: { text: '시설구조(일반지하식,지하터널식,기타)' } },
+        dropdownColumn(
+            {
+                name: "fcltStrctCn",
+                fieldName: "fcltStrctCn",
+                header: { text: "시설구조" },
+            },
+            SEWAGE_RESERVOIR_FCLT_STRCT_VALUES,
+        ),
         
         // 집수구역면적
-        { name: 'catchmentAreaSize', fieldName: '집수구역면적(㎢)', header: { text: '집수구역면적(㎢)' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'wtrStrgZoneArea', fieldName: 'wtrStrgZoneArea', header: { text: '집수구역면적(㎢)' }, footer: footerDecimal3, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
         
         // 시설용량
-        { name: 'facilityCapacity', fieldName: '시설용량(m³)', header: { text: '시설용량(m³)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'impdFcltCpct', fieldName: 'impdFcltCpct', header: { text: '시설용량(m³)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 펌프시설 > 총양수량
-        { name: 'totalPumpingCapacity', fieldName: '총양수량(m³/min)', header: { text: '총양수량(m³/min)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'grssPpqty',
+            fieldName: 'grssPpqty',
+            header: { text: '총양수량(m³/min)' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                type: 'pumpGrossPpqty' as const,
+                pumpGroups: [
+                    {
+                        pumpCntField: 'pumpFcltN1PumpCnt',
+                        rsrvPumpCntField: 'pumpFcltN1RsrvPumpCnt',
+                        perPpqtyField: 'pumpFcltN1PerPpqty',
+                    },
+                    {
+                        pumpCntField: 'pumpFcltN2PumpCnt',
+                        rsrvPumpCntField: 'pumpFcltN2RsrvPumpCnt',
+                        perPpqtyField: 'pumpFcltN2PerPpqty',
+                    },
+                    {
+                        pumpCntField: 'pumpFcltN3PumpCnt',
+                        rsrvPumpCntField: 'pumpFcltN3RsrvPumpCnt',
+                        perPpqtyField: 'pumpFcltN3PerPpqty',
+                    },
+                ],
+            },
+        },
 
         // 펌프시설 1
-        { name: 'pump1Diameter', fieldName: '구경(mm)', header: { text: '구경(mm)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'pump1PumpingCapacity', fieldName: '대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'pump1Count', fieldName: '펌프대수', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'pump1StandbyCount', fieldName: '예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'pumpFcltN1DmtrExpln', fieldName: 'pumpFcltN1DmtrExpln', header: { text: '구경(mm)' } },
+        { name: 'pumpFcltN1PerPpqty', fieldName: 'pumpFcltN1PerPpqty', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'pumpFcltN1PumpCnt', fieldName: 'pumpFcltN1PumpCnt', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'pumpFcltN1RsrvPumpCnt', fieldName: 'pumpFcltN1RsrvPumpCnt', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 펌프시설 2
-        { name: 'pump2Diameter', fieldName: '구경(mm)', header: { text: '구경(mm)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'pump2PumpingCapacity', fieldName: '대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'pump2Count', fieldName: '펌프대수', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'pump2StandbyCount', fieldName: '예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'pumpFcltN2DmtrExpln', fieldName: 'pumpFcltN2DmtrExpln', header: { text: '구경(mm)' } },
+        { name: 'pumpFcltN2PerPpqty', fieldName: 'pumpFcltN2PerPpqty', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'pumpFcltN2PumpCnt', fieldName: 'pumpFcltN2PumpCnt', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'pumpFcltN2RsrvPumpCnt', fieldName: 'pumpFcltN2RsrvPumpCnt', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 펌프시설 3
-        { name: 'pump3Diameter', fieldName: '구경(mm)', header: { text: '구경(mm)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'pump3PumpingCapacity', fieldName: '대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'pump3Count', fieldName: '펌프대수', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'pump3StandbyCount', fieldName: '예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'pumpFcltN3DmtrExpln', fieldName: 'pumpFcltN3DmtrExpln', header: { text: '구경(mm)' } },
+        { name: 'pumpFcltN3PerPpqty', fieldName: 'pumpFcltN3PerPpqty', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'pumpFcltN3PumpCnt', fieldName: 'pumpFcltN3PumpCnt', header: { text: '펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'pumpFcltN3RsrvPumpCnt', fieldName: 'pumpFcltN3RsrvPumpCnt', header: { text: '예비펌프대수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 부대시설
-        { name: 'preprocessingFacility', fieldName: '전처리시설유무(유/무)', header: { text: '전처리시설유무(유/무)' } },
-        { name: 'odorRemovalEquipment', fieldName: '탈취설비유무(유/무)', header: { text: '탈취설비유무(유/무)' } },
-        { name: 'selfGenerationEquipment', fieldName: '자가발전유무(유/무)', header: { text: '자가발전유무(유/무)' } },
+        dropdownColumn(
+            {
+                name: "prcsgFcltYn",
+                fieldName: "prcsgFcltYn",
+                header: { text: "전처리시설유무(유/무)" },
+            },
+            SEWAGE_RESERVOIR_YN_VALUES,
+        ),
+        dropdownColumn(
+            {
+                name: "ddrztnEqpmYn",
+                fieldName: "ddrztnEqpmYn",
+                header: { text: "탈취설비유무(유/무)" },
+            },
+            SEWAGE_RESERVOIR_YN_VALUES,
+        ),
+        dropdownColumn(
+            {
+                name: "oslfEtgtYn",
+                fieldName: "oslfEtgtYn",
+                header: { text: "자가발전유무(유/무)" },
+            },
+            SEWAGE_RESERVOIR_YN_VALUES,
+        ),
 
         // 배수 방식
-        { name: 'drainageMethod', fieldName: '배수방식(자연배수,강제배수)', header: { text: '배수방식(자연배수,강제배수)' } },
-        
+        dropdownColumn(
+            {
+                name: "mltvMthCn",
+                fieldName: "mltvMthCn",
+                header: { text: "배수방식(자연배수,강제배수)" },
+            },
+            SEWAGE_RESERVOIR_MLTV_MTH_VALUES,
+        ),
+
         // 저류 방식
-        { name: 'storageMethod', fieldName: '저류방식(직렬,병렬)', header: { text: '저류방식(직렬,병렬)' } },
-        
+        dropdownColumn(
+            {
+                name: "impdMthCn",
+                fieldName: "impdMthCn",
+                header: { text: "저류방식(직렬,병렬)" },
+            },
+            SEWAGE_RESERVOIR_IMPD_MTH_VALUES,
+        ),
+
         // 저류수 처리방법
-        { name: 'storageWaterTreatmentMethod', fieldName: '저류수처리방법(자체처리,연계처리)', header: { text: '저류수처리방법(자체처리,연계처리)' } },
+        dropdownColumn(
+            {
+                name: "impdPrcsMthdCn",
+                fieldName: "impdPrcsMthdCn",
+                header: { text: "저류수처리방법(자체처리,연계처리)" },
+            },
+            SEWAGE_RESERVOIR_IMPD_PRCS_MTHD_VALUES,
+        ),
         
         // 방류 수역
-        { name: 'dischargeDestination', fieldName: '방류수역(또는 연계처리장명)', header: { text: '방류수역(또는 연계처리장명)' } },
+        { name: 'dschgWtrsExpln', fieldName: 'dschgWtrsExpln', header: { text: '방류수역(또는 연계처리장명)' } },
 
         // 최종처분량
-        { name: 'sedimentDisposalAmount', fieldName: '침사', header: { text: '침사' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'debrisDisposalAmount', fieldName: '협잡물', header: { text: '협잡물' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'prcptnLastDspsQnt', fieldName: 'prcptnLastDspsQnt', header: { text: '침사' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'ctmnLastDspsQnt', fieldName: 'ctmnLastDspsQnt', header: { text: '협잡물' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 최종처분방법
-        { name: 'sedimentDisposalMethod', fieldName: '침사', header: { text: '침사' } },
-        { name: 'debrisDisposalMethod', fieldName: '협잡물', header: { text: '협잡물' } },
+        { name: 'prcptnLastDspsMthdExpln', fieldName: 'prcptnLastDspsMthdExpln', header: { text: '침사' } },
+        { name: 'ctmnLastDspsMthdExpln', fieldName: 'ctmnLastDspsMthdExpln', header: { text: '협잡물' } },
 
         // 운영실적
-        { name: 'operationDaysPerYear', fieldName: '가동일수(일/년)', header: { text: '가동일수(일/년)' }, valueType: ValueType.NUMBER }, // 3자리 수만 입력 가능
-        { name: 'totalDischargePerYear', fieldName: '총배수량(m³/년)', header: { text: '총배수량(m³/년)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'oprtngDayCnt', fieldName: 'oprtngDayCnt', header: { text: '가동일수(일/년)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' }, // 3자리 수만 입력 가능
+        { name: 'grssMltvQnt', fieldName: 'grssMltvQnt', header: { text: '총배수량(m³/년)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
 
         // 비고
-        { name: 'remarks', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
+
+        // Hidden Columns : 시스템 관리를 위한 값
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, },
+        { name: 'fcltSn', fieldName: 'fcltSn', header: { text: '시설일련번호' }, visible: false, },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false },
     ],
 
     columnLayout: [
@@ -94,42 +237,45 @@ export const SewageReservoirInpColumn = {
             name: 'adminArea',
             hideChildHeaders: false,
             header: { text: '행정구역' },
-            items: ['sido', 'gugun'],
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 3 }] },
+                'sggNm',
+            ],
         },
-        'swgeStrgeNm',
-        'addr',
-        'rnDt',
-        'designFrequency',
+        'fcltNm',
+        'fcltPstnCn',
+        'oprtngStrtYmd',
+        'planDesignFreqCnt',
 
         {
             name: 'installationPurpose',
             hideChildHeaders: false,
             header: { text: '설치목적(O,X로 표기, 중복체크가능)' },
             items: [
-                'floodingPrevention',
-                'waterQualityReduction',
-                'sewerageReuseUse',
+                'fldngPrvtnYn',
+                'wqPlltnMtgtYn',
+                'rtlztnUsgYn',
             ],
         },
-        'facilityStructure',
-        'catchmentAreaSize',
-        'facilityCapacity',
+        'fcltStrctCn',
+        'wtrStrgZoneArea',
+        'impdFcltCpct',
 
         {
             name: 'pumpSystem',
             hideChildHeaders: false,
             header: { text: '펌프시설' },
             items: [
-                'totalPumpingCapacity',
+                'grssPpqty',
                 {
                     name: 'pumpSystem1',
                     hideChildHeaders: false,
                     header: { text: '펌프시설1' },
                     items: [
-                        'pump1Diameter',
-                        'pump1PumpingCapacity',
-                        'pump1Count',
-                        'pump1StandbyCount',
+                        'pumpFcltN1DmtrExpln',
+                        'pumpFcltN1PerPpqty',
+                        'pumpFcltN1PumpCnt',
+                        'pumpFcltN1RsrvPumpCnt',
                     ],
                 },
 
@@ -138,10 +284,10 @@ export const SewageReservoirInpColumn = {
                     hideChildHeaders: false,
                     header: { text: '펌프시설2' },
                     items: [
-                        'pump2Diameter',
-                        'pump2PumpingCapacity',
-                        'pump2Count',
-                        'pump2StandbyCount',
+                        'pumpFcltN2DmtrExpln',
+                        'pumpFcltN2PerPpqty',
+                        'pumpFcltN2PumpCnt',
+                        'pumpFcltN2RsrvPumpCnt',
                     ],
                 },
 
@@ -150,10 +296,10 @@ export const SewageReservoirInpColumn = {
                     hideChildHeaders: false,
                     header: { text: '펌프시설3' },
                     items: [
-                        'pump3Diameter',
-                        'pump3PumpingCapacity',
-                        'pump3Count',
-                        'pump3StandbyCount',
+                        'pumpFcltN3DmtrExpln',
+                        'pumpFcltN3PerPpqty',
+                        'pumpFcltN3PumpCnt',
+                        'pumpFcltN3RsrvPumpCnt',
                     ],
                 },
             ],
@@ -164,23 +310,23 @@ export const SewageReservoirInpColumn = {
             hideChildHeaders: false,
             header: { text: '부대시설' },
             items: [
-                'preprocessingFacility',
-                'odorRemovalEquipment',
-                'selfGenerationEquipment',
+                'prcsgFcltYn',
+                'ddrztnEqpmYn',
+                'oslfEtgtYn',
             ],
         },
-        'drainageMethod',
-        'storageMethod',
-        'storageWaterTreatmentMethod',
-        'dischargeDestination',
+        'mltvMthCn',
+        'impdMthCn',
+        'impdPrcsMthdCn',
+        'dschgWtrsExpln',
 
         {
             name: 'finalDisposalAmount',
             hideChildHeaders: false,
             header: { text: '최종처분량(ton/년)' },
             items: [
-                'sedimentDisposalAmount',
-                'debrisDisposalAmount',
+                'prcptnLastDspsQnt',
+                'ctmnLastDspsQnt',
             ],
         },
 
@@ -189,8 +335,8 @@ export const SewageReservoirInpColumn = {
             hideChildHeaders: false,
             header: { text: '최종처분방법' },
             items: [
-                'sedimentDisposalMethod',
-                'debrisDisposalMethod',
+                'prcptnLastDspsMthdExpln',
+                'ctmnLastDspsMthdExpln',
             ],
         },
 
@@ -199,15 +345,18 @@ export const SewageReservoirInpColumn = {
             hideChildHeaders: false,
             header: { text: '운영실적' },
             items: [
-                'operationDaysPerYear', 
-                'totalDischargePerYear',
+                'oprtngDayCnt', 
+                'grssMltvQnt',
             ],
         },
-        'remarks',
+        'rmrk',
+        'admdstCd',
+        'fcltSn',
+        'admdstNm'
     ],
 
     rowStartNum: 3,
     fixedColumns: 2,
-    tabKey: 'sewageReservoirInp',
+    tabKey: 'ST00040001',
     tabLabel: '하수저류시설',
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/sewerageFinance/CauserBurdenInpColumn.ts b/apps/st/src/components/util/column/input/sewerageFinance/CauserBurdenInpColumn.ts
index 419f00d9d..7ae03817e 100644
--- a/apps/st/src/components/util/column/input/sewerageFinance/CauserBurdenInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewerageFinance/CauserBurdenInpColumn.ts
@@ -5,46 +5,72 @@ import { ValueType } from "realgrid";
 export const CauserBurdenInpColumn = {
     columns: [
         // 행정구역
-        { name: 'SIDO', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' } },
 
         // 부과액
-        { name: 'LEVY_CO', fieldName: '건수', header: { text: '건수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'LEVY_AMOUNT', fieldName: '금액(백만원)', header: { text: '금액(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'levyEvntcsCnt', fieldName: 'levyEvntcsCnt', header: { text: '건수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'levyAmt', fieldName: 'levyAmt', header: { text: '금액(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 대상별 징수현황 > 계
-        { name: 'TRGET_LEV_STTUS_CO', fieldName: '건수', header: { text: '건수' }, editable: false, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'TRGET_LEV_STTUS_AMOUNT', fieldName: '금액(백만원)', header: { text: '금액(백만원)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'trgtByWholClctnEvntcsCnt',
+            fieldName: 'trgtByWholClctnEvntcsCnt',
+            header: { text: '건수' },
+            editable: false,
+            footer: footerInt,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+            computed: {
+                fields: ['mltvEqpmEvntcsCnt', 'othrCstrnOthrActrCnt'],
+                type: 'sum' as const,
+            },
+        },
+        {
+            name: 'trgtByWholClctnAmt',
+            fieldName: 'trgtByWholClctnAmt',
+            header: { text: '금액(백만원)' },
+            editable: false,
+            footer: footerDecimal1,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            computed: {
+                fields: ['mltvEqpmAmt', 'othrCstrnOthrActrAmt'],
+                type: 'sum' as const,
+            },
+        },
 
         // 대상별 징수현황 > 배수설비설치자
-        { name: 'DRNG_EQP_CO', fieldName: '건수', header: { text: '건수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'DRNG_EQP_AMOUNT', fieldName: '금액(백만원)', header: { text: '금액(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'mltvEqpmEvntcsCnt', fieldName: 'mltvEqpmEvntcsCnt', header: { text: '건수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'mltvEqpmAmt', fieldName: 'mltvEqpmAmt', header: { text: '금액(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 대상별 징수현황 > 타공사·타행위자
-        { name: 'CNTRWK_CO', fieldName: '건수', header: { text: '건수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'CNTRWK_AMOUNT', fieldName: '금액(백만원)', header: { text: '금액(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'othrCstrnOthrActrCnt', fieldName: 'othrCstrnOthrActrCnt', header: { text: '건수' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'othrCstrnOthrActrAmt', fieldName: 'othrCstrnOthrActrAmt', header: { text: '금액(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 비고
-        { name: 'RMK', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
         
         // hidden
-        { name: 'CHCKER_OPINION', fieldName: '검토자의견', header: { text: '검토자의견' } },
-        { name: 'WRTER_OPINION', fieldName: '사용자의견', header: { text: '사용자의견' } },
-
-        // 참조 필드
-        { name: 'AMNTBRNCSR', fieldName: 'AMNTBRNCSR', header: { text: 'AMNTBRNCSR' } },
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false },
     ],
 
     columnLayout: [
         {
             name: 'group_admin',
             header: { text: '행정구역' },
-            items: ['SIDO', 'GUGUN']
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
         },
         {
             name: 'group_assess',
             header: { text: '부과액' },
-            items: ['LEVY_CO', 'LEVY_AMOUNT']
+            items: ['levyEvntcsCnt', 'levyAmt']
         },
         {
             name: 'group_collection',
@@ -53,25 +79,27 @@ export const CauserBurdenInpColumn = {
                 {
                     name: 'coll_group_total',
                     header: { text: '계' },
-                    items: ['TRGET_LEV_STTUS_CO', 'TRGET_LEV_STTUS_AMOUNT']
+                    items: ['trgtByWholClctnEvntcsCnt', 'trgtByWholClctnAmt']
                 },
                 {
                     name: 'coll_group_inst',
                     header: { text: '배수설비설치자(하수도법 제61조 제1항)' },
-                    items: ['DRNG_EQP_CO', 'DRNG_EQP_AMOUNT']
+                    items: ['mltvEqpmEvntcsCnt', 'mltvEqpmAmt']
                 },
                 {
                     name: 'coll_group_otr',
                     header: { text: '타공사·타행위자(하수도법 제61조 제2항)' },
-                    items: ['CNTRWK_CO', 'CNTRWK_AMOUNT']
+                    items: ['othrCstrnOthrActrCnt', 'othrCstrnOthrActrAmt']
                 }
             ]
         },
-        'RMK'
+        'rmrk',
+        'admdstCd',
+        'admdstNm'
     ],
 
     rowStartNum: 3,
     fixedColumns: 1,
-    tabKey: 'causerBurdenInp',
+    tabKey: 'ST00090004',
     tabLabel: '원인자 부담금'
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/sewerageFinance/SewerageChargeInpColumn.ts b/apps/st/src/components/util/column/input/sewerageFinance/SewerageChargeInpColumn.ts
index 5940acc81..b44fad586 100644
--- a/apps/st/src/components/util/column/input/sewerageFinance/SewerageChargeInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewerageFinance/SewerageChargeInpColumn.ts
@@ -5,45 +5,86 @@ import { ValueType } from "realgrid";
 export const SewerageChargeInpColumn = {
     columns: [
         // 행정구역
-        { name: 'SIDO', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' } },
 
         // 요금 
-        { name: 'FYER_LEVY_QY', fieldName: '연간조정량(m³)(A)', header: { text: '연간조정량(m³)(A)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'LEVY_AMOUNT', fieldName: '하수도사용료수익(원)(B)', header: { text: '하수도사용료수익(원)(B)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'AVRG_UNTPC', fieldName: 'm³당요금(원/m³) C=(B/A)', header: { text: 'm³당요금(원/m³) C=(B/A)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'anlLevyQnt', fieldName: 'anlLevyQnt', header: { text: '연간조정량(m³)(A)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'levyAmt', fieldName: 'levyAmt', header: { text: '하수도사용료수익(원)(B)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'avgUntprcAmt',
+            fieldName: 'avgUntprcAmt',
+            header: { text: 'm³당요금(원/m³) C=(B/A)' },
+            editable: false,
+            footer: footerDecimal1,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            computed: {
+                fields: ['levyAmt', 'anlLevyQnt'],
+                type: 'quotient' as const,
+            },
+        },
         
-        { name: 'SMRIZE_PRMPC', fieldName: '총괄원가(원)(D)', header: { text: '총괄원가(원)(D)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'SMRIZE_UNIT_PRMPC', fieldName: 'm³당원가(원/m³) E=(D/A)', header: { text: 'm³당원가(원/m³) E=(D/A)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'RLTY_RT', fieldName: '요금현실화율(%) F=(C/E*100)', header: { text: '요금현실화율(%) F=(C/E*100)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'grssPrmcoAmt', fieldName: 'grssPrmcoAmt', header: { text: '총괄원가(원)(D)' }, footer: footerInt, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        {
+            name: 'grssUnitPrmcoAmt',
+            fieldName: 'grssUnitPrmcoAmt',
+            header: { text: 'm³당원가(원/m³) E=(D/A)' },
+            editable: false,
+            footer: footerDecimal1,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            computed: {
+                fields: ['grssPrmcoAmt', 'anlLevyQnt'],
+                type: 'quotient' as const,
+            },
+        },
+        {
+            name: 'rlztnRt',
+            fieldName: 'rlztnRt',
+            header: { text: '요금현실화율(%) F=(C/E*100)' },
+            editable: false,
+            footer: footerDecimal1,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            computed: {
+                numeratorQuotient: ['levyAmt', 'anlLevyQnt'] as [string, string],
+                denominatorQuotient: ['grssPrmcoAmt', 'anlLevyQnt'] as [string, string],
+                type: 'quotientRatioPercent' as const,
+            },
+        },
 
         // 비고
-        { name: 'RMK', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
         
         // hidden
-        { name: 'CHCKER_OPINION', fieldName: '검토자의견', header: { text: '검토자의견' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'WRTER_OPINION', fieldName: '사용자의견', header: { text: '사용자의견' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-
-        // 참조 필드
-        { name: 'SEWER_RNTFEE', fieldName: 'SEWER_RNTFEE', header: { text: 'SEWER_RNTFEE' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'C_LEVY_AMOUNT', fieldName: 'C_LEVY_AMOUNT', header: { text: 'C_LEVY_AMOUNT' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false },
     ],
     columnLayout: [
         {
             name: 'group_admin',
             header: { text: '행정구역' },
-            items: ['SIDO', 'GUGUN']
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
         },
-        'FYER_LEVY_QY',
-        'LEVY_AMOUNT',
-        'AVRG_UNTPC',
-        'SMRIZE_PRMPC',
-        'SMRIZE_UNIT_PRMPC',
-        'RLTY_RT',
-        'RMK'
+        'anlLevyQnt',
+        'levyAmt',
+        'avgUntprcAmt',
+        'grssPrmcoAmt',
+        'grssUnitPrmcoAmt',
+        'rlztnRt',
+        'rmrk',
+        'admdstCd',
+        'admdstNm'
     ],
     rowStartNum: 2,
     fixedColumns: 1,
-    tabKey: 'sewerageChargeInp',
+    tabKey: 'ST00090002',
     tabLabel: '하수도 요금'
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/sewerageFinance/SewerageFinanceSettleInpColumn.ts b/apps/st/src/components/util/column/input/sewerageFinance/SewerageFinanceSettleInpColumn.ts
index 24b46e1e6..5db0443df 100644
--- a/apps/st/src/components/util/column/input/sewerageFinance/SewerageFinanceSettleInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewerageFinance/SewerageFinanceSettleInpColumn.ts
@@ -5,146 +5,238 @@ import { ValueType } from "realgrid";
 export const SewerageFinanceSettleInpColumn = {
     columns: [
         // 행정구역
-        { name: 'SIDO', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' } },
 
         // 재정별 사업비
-        { name: 'FNANC_WCT_SM', fieldName: '계', header: { text: '계' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'NTNXPN', fieldName: '중앙정부지원액', header: { text: '중앙정부지원액' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        
+        {
+            name: 'fnnByWholPjtcoAmt',
+            fieldName: 'fnnByWholPjtcoAmt',
+            header: { text: '계' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: [
+                    'cnterGovSprtAmt',
+                    'mctpvLcexpAmt',
+                    'wareaSggLclAmt',
+                    'sewerUseAmt',
+                    'orgprBrdnAmt',
+                    'etcIncmAmt',
+                    'crfwAmt',
+                ],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'cnterGovSprtAmt', fieldName: 'cnterGovSprtAmt', header: { text: '중앙정부지원액' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+
         // 재정별 사업비 > 지방비
-        { name: 'LCLEXPNS', fieldName: '특·광역시, 도', header: { text: '특·광역시, 도' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'LCLTY_CT', fieldName: '시,군,구 지자체', header: { text: '시,군,구 지자체' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'mctpvLcexpAmt', fieldName: 'mctpvLcexpAmt', header: { text: '특·광역시, 도' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'wareaSggLclAmt', fieldName: 'wareaSggLclAmt', header: { text: '시,군,구 지자체' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 재정별 사업비
-        { name: 'SEWER_RNTFEE', fieldName: '하수도사용료', header: { text: '하수도사용료' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'AMNTBRNCSR', fieldName: '원인자부담금', header: { text: '원인자부담금' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'ETC_INCME', fieldName: '기타잡수입', header: { text: '기타잡수입' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'CYFD_AMOUNT', fieldName: '이월액', header: { text: '이월액' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'sewerUseAmt', fieldName: 'sewerUseAmt', header: { text: '하수도사용료' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'orgprBrdnAmt', fieldName: 'orgprBrdnAmt', header: { text: '원인자부담금' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'etcIncmAmt', fieldName: 'etcIncmAmt', header: { text: '기타잡수입' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'crfwAmt', fieldName: 'crfwAmt', header: { text: '이월액' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 부채액
-        { name: 'DEBT_AMOUNT', fieldName: '부채액(백만원)', header: { text: '부채액(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'lbltAmt', fieldName: 'lbltAmt', header: { text: '부채액(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 용도별사업비 > 계
-        { name: 'PRPOS_WCT_SM', fieldName: '계', header: { text: '계' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'usgByWholPjtcoAmt',
+            fieldName: 'usgByWholPjtcoAmt',
+            header: { text: '계' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+        },
 
         // 용도별사업비 > 처리장
-        { name: 'PRCPLT_SM', fieldName: '소계', header: { text: '소계' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'PRCPLT_FCLTY', fieldName: '시설비', header: { text: '시설비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'PRCPLT_RPAIR', fieldName: '개보수비', header: { text: '개보수비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'PRCPLT_ORPNS', fieldName: '운영유지비', header: { text: '운영유지비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'PRCPLT_ETC', fieldName: '기타', header: { text: '기타' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'tmplntWholAmt',
+            fieldName: 'tmplntWholAmt',
+            header: { text: '소계' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: ['tmplntFcltAmt', 'tmplntMendngAmt', 'tmplntOperKeepAmt', 'tmplntEtcAmt'],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'tmplntFcltAmt', fieldName: 'tmplntFcltAmt', header: { text: '시설비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'tmplntMendngAmt', fieldName: 'tmplntMendngAmt', header: { text: '개보수비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'tmplntOperKeepAmt', fieldName: 'tmplntOperKeepAmt', header: { text: '운영유지비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'tmplntEtcAmt', fieldName: 'tmplntEtcAmt', header: { text: '기타' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 용도별사업비 > 하수관로
-        { name: 'SEWAGE_SM', fieldName: '소계', header: { text: '소계' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'SEWAGE_FCLTY', fieldName: '시설비', header: { text: '시설비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'SEWAGE_RPAIR', fieldName: '개보수비', header: { text: '개보수비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'SEWAGE_ORPNS', fieldName: '운영유지비', header: { text: '운영유지비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'SEWAGE_ETC', fieldName: '기타', header: { text: '기타' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'wholSwagePplAmt',
+            fieldName: 'wholSwagePplAmt',
+            header: { text: '소계' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: [
+                    'swagePplFcltAmt',
+                    'swagePplMendngAmt',
+                    'swagePplOperKeepAmt',
+                    'swagePplEtcAmt',
+                ],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'swagePplFcltAmt', fieldName: 'swagePplFcltAmt', header: { text: '시설비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'swagePplMendngAmt', fieldName: 'swagePplMendngAmt', header: { text: '개보수비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'swagePplOperKeepAmt', fieldName: 'swagePplOperKeepAmt', header: { text: '운영유지비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'swagePplEtcAmt', fieldName: 'swagePplEtcAmt', header: { text: '기타' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 용도별사업비 > 하수저류시설
-        { name: 'SWGE_STRGE_SM', fieldName: '소계', header: { text: '소계' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'SWGE_STRGE_FCLTY', fieldName: '시설비', header: { text: '시설비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'SWGE_STRGE_RPAIR', fieldName: '개보수비', header: { text: '개보수비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'SWGE_STRGE_ORPNS', fieldName: '운영유지비', header: { text: '운영유지비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'SWGE_STRGE_ETC', fieldName: '기타', header: { text: '기타' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'wholSwageImpdFcltAmt',
+            fieldName: 'wholSwageImpdFcltAmt',
+            header: { text: '소계' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: [
+                    'swageImpdFcltAmt',
+                    'swageImpdMendngAmt',
+                    'swageImpdOperKeepAmt',
+                    'swageImpdFcltEtcAmt',
+                ],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'swageImpdFcltAmt', fieldName: 'swageImpdFcltAmt', header: { text: '시설비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'swageImpdMendngAmt', fieldName: 'swageImpdMendngAmt', header: { text: '개보수비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'swageImpdOperKeepAmt', fieldName: 'swageImpdOperKeepAmt', header: { text: '운영유지비' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'swageImpdFcltEtcAmt', fieldName: 'swageImpdFcltEtcAmt', header: { text: '기타' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 용도별사업비 > 기타
-        { name: 'ETC_SM', fieldName: '소계', header: { text: '소계' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'ACDNT_CYFD_AMOUNT', fieldName: '사고이월액', header: { text: '사고이월액' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'UNRCIV_AMOUNT', fieldName: '미수납액', header: { text: '미수납액' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'ETC_AMOUNT', fieldName: '기타', header: { text: '기타' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'etcWholAmt',
+            fieldName: 'etcWholAmt',
+            header: { text: '소계' },
+            editable: false,
+            footer: footerDecimal1,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            styleName: 'rg-cell-total',
+            computed: {
+                fields: ['etcAcdntCrfwAmt', 'etcNrcpAmt', 'etcAmt'],
+                type: 'sum' as const,
+            },
+        },
+        { name: 'etcAcdntCrfwAmt', fieldName: 'etcAcdntCrfwAmt', header: { text: '사고이월액' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'etcNrcpAmt', fieldName: 'etcNrcpAmt', header: { text: '미수납액' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'etcAmt', fieldName: 'etcAmt', header: { text: '기타' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
 
         // 비고
-        { name: 'RMK', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
 
         // hidden
-        { name: 'CHCKER_OPINION', fieldName: '검토자의견', header: { text: '검토자의견' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'WRTER_OPINION', fieldName: '사용자의견', header: { text: '사용자의견' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-
-        // 참조 필드
-        { name: 'B_LEVY_AMOUNT', fieldName: 'B_LEVY_AMOUNT', header: { text: 'B_LEVY_AMOUNT' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'C_LEVY_AMOUNT', fieldName: 'C_LEVY_AMOUNT', header: { text: 'C_LEVY_AMOUNT' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'D_LEVY_AMOUNT', fieldName: 'D_LEVY_AMOUNT', header: { text: 'D_LEVY_AMOUNT' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false },
     ],
     columnLayout: [
         {
             name: 'group_admin',
             header: { text: '행정구역' },
-            items: ['SIDO', 'GUGUN']
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
         },
         {
             name: 'group_finance',
             header: { text: '재정별 사업비(백만원)' },
             items: [
-                'FNANC_WCT_SM',
-                'NTNXPN',
+                'fnnByWholPjtcoAmt',
+                'cnterGovSprtAmt',
                 {
                     name: 'group_local_finance',
                     header: { text: '지방비' },
-                    items: ['LCLEXPNS', 'LCLTY_CT']
+                    items: ['mctpvLcexpAmt', 'wareaSggLclAmt']
                 },
-                'SEWER_RNTFEE',
-                'AMNTBRNCSR',
-                'ETC_INCME',
-                'CYFD_AMOUNT'
+                'sewerUseAmt',
+                'orgprBrdnAmt',
+                'etcIncmAmt',
+                'crfwAmt'
             ]
         },
-        'DEBT_AMOUNT',
+        'lbltAmt',
         {
             name: 'group_purpose',
             header: { text: '용도별사업비(백만원)' },
             items: [
-                'PRPOS_WCT_SM',
+                'usgByWholPjtcoAmt',
                 {
                     name: 'group_treatment',
                     header: { text: '처리장' },
                     items: [
-                        'PRCPLT_SM',
-                        'PRCPLT_FCLTY',
-                        'PRCPLT_RPAIR',
-                        'PRCPLT_ORPNS',
-                        'PRCPLT_ETC'
+                        'tmplntWholAmt',
+                        'tmplntFcltAmt',
+                        'tmplntMendngAmt',
+                        'tmplntOperKeepAmt',
+                        'tmplntEtcAmt'
                     ]
                 },
                 {
                     name: 'group_pipe',
                     header: { text: '하수관로' },
                     items: [
-                        'SEWAGE_SM',
-                        'SEWAGE_FCLTY',
-                        'SEWAGE_RPAIR',
-                        'SEWAGE_ORPNS',
-                        'SEWAGE_ETC'
+                        'wholSwagePplAmt',
+                        'swagePplFcltAmt',
+                        'swagePplMendngAmt',
+                        'swagePplOperKeepAmt',
+                        'swagePplEtcAmt'
                     ]
                 },
                 {
                     name: 'group_storage',
                     header: { text: '하수저류시설' },
                     items: [
-                        'SWGE_STRGE_SM',
-                        'SWGE_STRGE_FCLTY',
-                        'SWGE_STRGE_RPAIR',
-                        'SWGE_STRGE_ORPNS',
-                        'SWGE_STRGE_ETC'
+                        'wholSwageImpdFcltAmt',
+                        'swageImpdFcltAmt',
+                        'swageImpdMendngAmt',
+                        'swageImpdOperKeepAmt',
+                        'swageImpdFcltEtcAmt'
                     ]
                 },
                 {
                     name: 'group_etc_purpose',
                     header: { text: '기타' },
                     items: [
-                        'ETC_SM',
-                        'ACDNT_CYFD_AMOUNT',
-                        'UNRCIV_AMOUNT',
-                        'ETC_AMOUNT'
+                        'etcWholAmt',
+                        'etcAcdntCrfwAmt',
+                        'etcNrcpAmt',
+                        'etcAmt'
                     ]
                 }
             ]
         },
-        'RMK'
+        'rmrk',
+        'admdstCd',
+        'admdstNm'
     ],
     rowStartNum: 3,
     fixedColumns: 1,
-    tabKey: 'sewerageFinanceSettleInp',
+    tabKey: 'ST00090001',
     tabLabel: '하수도재정 결산'
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/input/sewerageFinance/SewerageUsageFeeInpColumn.ts b/apps/st/src/components/util/column/input/sewerageFinance/SewerageUsageFeeInpColumn.ts
index bd4be4668..2cd90446b 100644
--- a/apps/st/src/components/util/column/input/sewerageFinance/SewerageUsageFeeInpColumn.ts
+++ b/apps/st/src/components/util/column/input/sewerageFinance/SewerageUsageFeeInpColumn.ts
@@ -5,67 +5,108 @@ import { ValueType } from "realgrid";
 export const SewerageUsageFeeInpColumn = {
     columns: [
         // 행정구역
-        { name: 'SIDO', fieldName: '시도', header: { text: '시도' }, editable: false },
-        { name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, footer: { text: '합계' }, editable: false },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' } },
 
         // 총계 > 부과액
-        { name: 'LEVY_AMOUNT', fieldName: '(백만원)', header: { text: '(백만원)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'levyAmt',
+            fieldName: 'levyAmt',
+            header: { text: '(백만원)' },
+            editable: false,
+            footer: footerDecimal1,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            computed: {
+                fields: [
+                    'hshusLevyAmt',
+                    'taskFrLevyAmt',
+                    'fbuLevyAmt',
+                    'bthhsFrSpcs1LevyAmt',
+                    'bthhsFrSpcs2LevyAmt',
+                    'induLevyAmt',
+                    'etcLevyAmt',
+                ],
+                type: 'sum' as const,
+            },
+        },
         
         // 총계 > 부과량
-        { name: 'LEVY_QY', fieldName: '(천톤)', header: { text: '(천톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        {
+            name: 'levyQnt',
+            fieldName: 'levyQnt',
+            header: { text: '(천톤)' },
+            editable: false,
+            footer: footerDecimal1,
+            styleName: 'rg-cell-total',
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            computed: {
+                fields: [
+                    'hshusLevyQnt',
+                    'taskFrLevyQnt',
+                    'fbuLevyQnt',
+                    'bthhsFrSpcs1LevyQnt',
+                    'bthhsFrSpcs2LevyQnt',
+                    'induLevyQnt',
+                    'etcLevyQnt',
+                ],
+                type: 'sum' as const,
+            },
+        },
 
         // 가정용
-        { name: 'HOME_LEVY_AMOUNT', fieldName: '(백만원)', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'HOME_LEVY_QY', fieldName: '(천톤)', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'HOME_UNTPC', fieldName: '(원/톤)', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'hshusLevyAmt', fieldName: 'hshusLevyAmt', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'hshusLevyQnt', fieldName: 'hshusLevyQnt', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'hshusUntprcAmt', fieldName: 'hshusUntprcAmt', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
 
         // 업무용
-        { name: 'JOB_LEVY_AMOUNT', fieldName: '(백만원)', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'JOB_LEVY_QY', fieldName: '(천톤)', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'JOB_UNTPC', fieldName: '(원/톤)', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'taskFrLevyAmt', fieldName: 'taskFrLevyAmt', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'taskFrLevyQnt', fieldName: 'taskFrLevyQnt', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'taskFrUntprcAmt', fieldName: 'taskFrUntprcAmt', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
 
         // 영업용(일반용)
-        { name: 'BSN_LEVY_AMOUNT', fieldName: '(백만원)', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'BSN_LEVY_QY', fieldName: '(천톤)', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'BSN_UNTPC', fieldName: '(원/톤)', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'fbuLevyAmt', fieldName: 'fbuLevyAmt', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'fbuLevyQnt', fieldName: 'fbuLevyQnt', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'fbuUntprcAmt', fieldName: 'fbuUntprcAmt', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
 
         // 욕탕1종(대중탕용)
-        { name: 'BATHS1_LEVY_AMOUNT', fieldName: '(백만원)', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'BATHS1_LEVY_QY', fieldName: '(천톤)', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'BATHS1_UNTPC', fieldName: '(원/톤)', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'bthhsFrSpcs1LevyAmt', fieldName: 'bthhsFrSpcs1LevyAmt', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'bthhsFrSpcs1LevyQnt', fieldName: 'bthhsFrSpcs1LevyQnt', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'bthhsFrSpcs1UntprcAmt', fieldName: 'bthhsFrSpcs1UntprcAmt', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
 
         // 욕탕2종
-        { name: 'PBBATH_LEVY_AMOUNT', fieldName: '(백만원)', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'PBBATH_LEVY_QY', fieldName: '(천톤)', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'PBBATH_UNTPC', fieldName: '(원/톤)', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'bthhsFrSpcs2LevyAmt', fieldName: 'bthhsFrSpcs2LevyAmt', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'bthhsFrSpcs2LevyQnt', fieldName: 'bthhsFrSpcs2LevyQnt', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'bthhsFrSpcs2UntprcAmt', fieldName: 'bthhsFrSpcs2UntprcAmt', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
 
         // 산업 및 공업용
-        { name: 'INDUST_LEVY_AMOUNT', fieldName: '(백만원)', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'INDUST_LEVY_QY', fieldName: '(천톤)', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'INDUST_UNTPC', fieldName: '(원/톤)', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'induLevyAmt', fieldName: 'induLevyAmt', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'induLevyQnt', fieldName: 'induLevyQnt', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'induUntprcAmt', fieldName: 'induUntprcAmt', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
 
         // 기타
-        { name: 'ETC_LEVY_AMOUNT', fieldName: '(백만원)', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'ETC_LEVY_QY', fieldName: '(천톤)', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
-        { name: 'ETC_UNTPC', fieldName: '(원/톤)', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'etcLevyAmt', fieldName: 'etcLevyAmt', header: { text: '(백만원)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'etcLevyQnt', fieldName: 'etcLevyQnt', header: { text: '(천톤)' }, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'etcLevyUntprcAmt', fieldName: 'etcLevyUntprcAmt', header: { text: '(원/톤)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
 
         // 비고
-        { name: 'RMK', fieldName: '비고', header: { text: '비고' } },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
         
         // hidden
-        { name: 'CHCKER_OPINION', fieldName: '검토자의견', header: { text: '검토자의견' } },
-        { name: 'WRTER_OPINION', fieldName: '사용자의견', header: { text: '사용자의견' } },
-
-        // 참조 필드
-        { name: 'SEWER_RNTFEE', fieldName: 'SEWER_RNTFEE', header: { text: 'SEWER_RNTFEE' } },
-        { name: 'B_LEVY_AMOUNT', fieldName: 'B_LEVY_AMOUNT', header: { text: 'B_LEVY_AMOUNT' } },
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false, },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, visible: false },
     ],
 
     columnLayout: [
         {
             name: 'group_admin',
             header: { text: '행정구역' },
-            items: ['SIDO', 'GUGUN']
+            items: [
+                { column: 'ctpvNm', footerUserSpans: [{ colspan: 2 }] },
+                'sggNm',
+            ],
         },
         {
             name: 'group_total',
@@ -74,12 +115,12 @@ export const SewerageUsageFeeInpColumn = {
                 {
                     name: 'total_amount',
                     header: { text: '부과액' },
-                    items: ['LEVY_AMOUNT']
+                    items: ['levyAmt']
                 },
                 {
                     name: 'total_qty',
                     header: { text: '부과량' },
-                    items: ['LEVY_QY']
+                    items: ['levyQnt']
                 }
             ]
         },
@@ -90,17 +131,17 @@ export const SewerageUsageFeeInpColumn = {
                 {
                     name: 'home_amount',
                     header: { text: '부과액' },
-                    items: ['HOME_LEVY_AMOUNT']
+                    items: ['hshusLevyAmt']
                 },
                 {
                     name: 'home_qty',
                     header: { text: '부과량' },
-                    items: ['HOME_LEVY_QY']
+                    items: ['hshusLevyQnt']
                 },
                 {
                     name: 'home_price',
                     header: { text: '단가' },
-                    items: ['HOME_UNTPC']
+                    items: ['hshusUntprcAmt']
                 }
             ]
         },
@@ -111,17 +152,17 @@ export const SewerageUsageFeeInpColumn = {
                 {
                     name: 'job_amount',
                     header: { text: '부과액' },
-                    items: ['JOB_LEVY_AMOUNT']
+                    items: ['taskFrLevyAmt']
                 },
                 {
                     name: 'job_qty',
                     header: { text: '부과량' },
-                    items: ['JOB_LEVY_QY']
+                    items: ['taskFrLevyQnt']
                 },
                 {
                     name: 'job_price',
                     header: { text: '단가' },
-                    items: ['JOB_UNTPC']
+                    items: ['taskFrUntprcAmt']
                 }
             ]
         },
@@ -132,17 +173,17 @@ export const SewerageUsageFeeInpColumn = {
                 {
                     name: 'bsn_amount',
                     header: { text: '부과액' },
-                    items: ['BSN_LEVY_AMOUNT']
+                    items: ['fbuLevyAmt']
                 },
                 {
                     name: 'bsn_qty',
                     header: { text: '부과량' },
-                    items: ['BSN_LEVY_QY']
+                    items: ['fbuLevyQnt']
                 },
                 {
                     name: 'bsn_price',
                     header: { text: '단가' },
-                    items: ['BSN_UNTPC']
+                    items: ['fbuUntprcAmt']
                 }
             ]
         },
@@ -153,17 +194,17 @@ export const SewerageUsageFeeInpColumn = {
                 {
                     name: 'baths1_amount',
                     header: { text: '부과액' },
-                    items: ['BATHS1_LEVY_AMOUNT']
+                    items: ['bthhsFrSpcs1LevyAmt']
                 },
                 {
                     name: 'baths1_qty',
                     header: { text: '부과량' },
-                    items: ['BATHS1_LEVY_QY']
+                    items: ['bthhsFrSpcs1LevyQnt']
                 },
                 {
                     name: 'baths1_price',
                     header: { text: '단가' },
-                    items: ['BATHS1_UNTPC']
+                    items: ['bthhsFrSpcs1UntprcAmt']
                 }
             ]
         },
@@ -174,17 +215,17 @@ export const SewerageUsageFeeInpColumn = {
                 {
                     name: 'pbbath_amount',
                     header: { text: '부과액' },
-                    items: ['PBBATH_LEVY_AMOUNT']
+                    items: ['bthhsFrSpcs2LevyAmt']
                 },
                 {
                     name: 'pbbath_qty',
                     header: { text: '부과량' },
-                    items: ['PBBATH_LEVY_QY']
+                    items: ['bthhsFrSpcs2LevyQnt']
                 },
                 {
                     name: 'pbbath_price',
                     header: { text: '단가' },
-                    items: ['PBBATH_UNTPC']
+                    items: ['bthhsFrSpcs2UntprcAmt']
                 }
             ]
         },
@@ -195,17 +236,17 @@ export const SewerageUsageFeeInpColumn = {
                 {
                     name: 'indust_amount',
                     header: { text: '부과액' },
-                    items: ['INDUST_LEVY_AMOUNT']
+                    items: ['induLevyAmt']
                 },
                 {
                     name: 'indust_qty',
                     header: { text: '부과량' },
-                    items: ['INDUST_LEVY_QY']
+                    items: ['induLevyQnt']
                 },
                 {
                     name: 'indust_price',
                     header: { text: '단가' },
-                    items: ['INDUST_UNTPC']
+                    items: ['induUntprcAmt']
                 }
             ]
         },
@@ -216,25 +257,27 @@ export const SewerageUsageFeeInpColumn = {
                 {
                     name: 'etc_amount',
                     header: { text: '부과액' },
-                    items: ['ETC_LEVY_AMOUNT']
+                    items: ['etcLevyAmt']
                 },
                 {
                     name: 'etc_qty',
                     header: { text: '부과량' },
-                    items: ['ETC_LEVY_QY']
+                    items: ['etcLevyQnt']
                 },
                 {
                     name: 'etc_price',
                     header: { text: '단가' },
-                    items: ['ETC_UNTPC']
+                    items: ['etcLevyUntprcAmt']
                 }
             ]
         },
-        'RMK'
+        'rmrk',
+        'admdstCd',
+        'admdstNm'
     ],
 
     rowStartNum: 3,
     fixedColumns: 1,
-    tabKey: 'sewerageUsageFeeInp',
+    tabKey: 'ST00090003',
     tabLabel: '하수도 사용료'
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/management/LogHistoryColumn.ts b/apps/st/src/components/util/column/management/LogHistoryColumn.ts
index 74efa78b4..cef11bcc4 100644
--- a/apps/st/src/components/util/column/management/LogHistoryColumn.ts
+++ b/apps/st/src/components/util/column/management/LogHistoryColumn.ts
@@ -2,20 +2,26 @@ import { ValueType } from "realgrid";
 
 export const LogHistoryColumn = {
     columns: [
-        { name: 'statsLogSn', fieldName: 'statsLogSn', header: { text: '일련번호' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
-        { name: 'menuNm', fieldName: 'menuNm', header: { text: '메뉴명' }, editable: false },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, editable: false },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, editable: false },
+        { name: 'statsYr', fieldName: 'statsYr', header: { text: '연도' }, editable: false },
+        { name: 'statsLogSn', fieldName: 'statsLogSn', header: { text: '일련번호' }, editable: false, visible: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'menuNm', fieldName: 'menuNm', header: { text: '통계항목' }, editable: false },
         { name: 'tblNm', fieldName: 'tblNm', header: { text: '테이블명' }, visible: false, editable: false },
-        { name: 'dmndFwkNm', fieldName: 'dmndFwkNm', header: { text: '요청 기능명' }, editable: false },
-        { name: 'rgtrId', fieldName: 'rgtrId', header: { text: '등록자' }, editable: false },
+        { name: 'statsDataChgComNm', fieldName: 'statsDataChgComNm', header: { text: '요청 기능명' }, editable: false },
+        { name: 'rgtrId', fieldName: 'rgtrId', header: { text: '등록자' }, editable: false, visible: false },
         { name: 'regDt', fieldName: 'regDt', header: { text: '등록일' }, editable: false },
     ],
 
     columnLayout: [
-        'statsLogSn',
+        'ctpvNm',
+        'sggNm',
+        'statsYr',
         'menuNm',
         'tblNm',
-        'dmndFwkNm',
+        'statsDataChgComNm',
         'rgtrId',
-        'regDt'
+        'regDt',
+        'statsLogSn',
     ]
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/management/LogHistoryDetailColumn.ts b/apps/st/src/components/util/column/management/LogHistoryDetailColumn.ts
new file mode 100644
index 000000000..e8c93a45d
--- /dev/null
+++ b/apps/st/src/components/util/column/management/LogHistoryDetailColumn.ts
@@ -0,0 +1,91 @@
+import { ValueType } from "realgrid";
+
+import type { ColumnConfig, ColumnInfo } from "@/components/type/DataGrid.type";
+import type { StatisticsLogDetailRow } from "@/entities/statistics/model/statistics-interface";
+
+const COMMON_FIELD_ORDER = ["rmrk", "sggNm", "admdstCd", "admdstNm"] as const;
+
+const FIELD_HEADER: Record<string, string> = {
+    rmrk: "비고",
+    sggNm: "시군구",
+    admdstCd: "행정구역코드",
+    admdstNm: "행정구역명",
+};
+
+function collectFieldNames(rows: StatisticsLogDetailRow[]): string[] {
+    const keys = new Set<string>();
+    for (const row of rows) {
+        for (const key of Object.keys(row)) {
+            keys.add(key);
+        }
+    }
+    const common = COMMON_FIELD_ORDER.filter((k) => keys.has(k));
+    const rest = [...keys]
+        .filter((k) => !COMMON_FIELD_ORDER.includes(k as (typeof COMMON_FIELD_ORDER)[number]))
+        .sort((a, b) => a.localeCompare(b, "ko"));
+    return [...common, ...rest];
+}
+
+function isNumericField(rows: StatisticsLogDetailRow[], fieldName: string): boolean {
+    return rows.some((row) => {
+        const v = row[fieldName];
+        return typeof v === "number" && !Number.isNaN(v);
+    });
+}
+
+function buildColumns(rows: StatisticsLogDetailRow[]): ColumnConfig[] {
+    const fieldNames = collectFieldNames(rows);
+    if (fieldNames.length === 0) {
+        return COMMON_FIELD_ORDER.map((fieldName) => ({
+            name: fieldName,
+            fieldName,
+            header: { text: FIELD_HEADER[fieldName] ?? fieldName },
+            editable: false,
+            width: Math.min(340, Math.max(90, fieldName.length * 9 + 28))
+        }));
+    }
+
+    return fieldNames.map((fieldName) => {
+        const numeric = isNumericField(rows, fieldName);
+        return {
+            name: fieldName,
+            fieldName,
+            header: { text: FIELD_HEADER[fieldName] ?? fieldName },
+            editable: false,
+            valueType: numeric ? ValueType.NUMBER : undefined,
+            dataFormat: numeric ? "#,##0.###" : undefined,
+            width: Math.min(340, Math.max(90, fieldName.length * 9 + 28)),
+            visible: fieldName !== "admdstCd",
+        };
+    });
+}
+
+export function buildLogHistoryDetailColumnInfo(
+    rows: StatisticsLogDetailRow[],
+): ColumnInfo {
+    const columns = buildColumns(rows);
+    return {
+        columns,
+        columnLayout: columns.map((c) => c.fieldName),
+    };
+}
+
+/** 그리드 field 정의와 행 키를 맞춤 (누락 필드 → "") */
+export function alignLogDetailRowsToColumns(
+    rows: Record<string, string | number>[],
+    columnInfo: ColumnInfo,
+): Record<string, string | number>[] {
+    const fieldNames = columnInfo.columns.map((c) => c.fieldName);
+    return rows.map((row) => {
+        const aligned: Record<string, string | number> = {};
+        for (const fieldName of fieldNames) {
+            const value = row[fieldName];
+            aligned[fieldName] =
+                value === null || value === undefined ? "" : value;
+        }
+        return aligned;
+    });
+}
+
+export const emptyLogHistoryDetailColumnInfo =
+    buildLogHistoryDetailColumnInfo([]);
diff --git a/apps/st/src/components/util/column/review/PublicSewageFacilityRvwColumn.ts b/apps/st/src/components/util/column/review/PublicSewageFacilityRvwColumn.ts
index 8b3db0d16..d02b5360b 100644
--- a/apps/st/src/components/util/column/review/PublicSewageFacilityRvwColumn.ts
+++ b/apps/st/src/components/util/column/review/PublicSewageFacilityRvwColumn.ts
@@ -1,142 +1,190 @@
 import { ValueType } from "realgrid";
+import {
+    footerAvgDecimalArrayByDivision,
+    footerDecimal1ArrayByDivision,
+    footerDecimal3ArrayByDivision,
+    footerIntArrayByDivision,
+} from "@/components/util/grid/footerSummary";
+import type { GridView } from "@/components/type/DataGrid.type";
+
+const getDivisionFooterLabel = (grid: GridView, divisionIndex: number, withSuffix: boolean) => {
+    const dataSource = grid.getDataSource();
+    const uniqueValues = new Set<string>();
+
+    for (let i = 0; i < dataSource.getRowCount(); i++) {
+        const val = dataSource.getValue(i, "displayYear");
+        if (val) uniqueValues.add(String(val));
+    }
+
+    const divisionValues = Array.from(uniqueValues);
+    if (divisionValues.length <= divisionIndex) {
+        return withSuffix ? "합계" : "";
+    }
+
+    const label = divisionValues[divisionIndex] ?? "";
+    return withSuffix ? `${label}합계` : label;
+};
 
 // 하수도 통계 관리 06.공공하수처리시설
 export const rawPublicSewageFacilityInfoList = {
     columns: [
         /* 1. 기본 정보 */
-        { name: 'sido', fieldName: '시도', header: { text: '시도' } },
-        { name: 'sgg', fieldName: '시군구', header: { text: '시군구' } },
-        { name: 'GBN', fieldName: '구분', header: { text: '구분' } },
-        { name: 'ADDR', fieldName: '소재지', header: { text: '소재지' } },
-        { name: 'FCT_NM_GROUP', fieldName: '시설명(500m3/일이상/미만)', header: { text: '시설명(500m3/일이상/미만)' } },
+        {
+            name: 'ctpvNm',
+            fieldName: 'ctpvNm',
+            header: { text: '시도' },
+            footer: [
+                { valueCallback: (grid: GridView) => getDivisionFooterLabel(grid, 0, true) },
+                { valueCallback: (grid: GridView) => getDivisionFooterLabel(grid, 1, true) },
+            ],
+        },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' } },
+        {
+            name: 'displayYear',
+            fieldName: 'displayYear',
+            header: { text: '구분' },
+            footer: [
+                { valueCallback: (grid: GridView) => getDivisionFooterLabel(grid, 0, false) },
+                { valueCallback: (grid: GridView) => getDivisionFooterLabel(grid, 1, false) },
+            ],
+        },
+        { name: 'swtrmtFcltNm', fieldName: 'swtrmtFcltNm', header: { text: '시설명(500m³/일 이상/미만)' } },
+        { name: 'fcltPstnCn', fieldName: 'fcltPstnCn', header: { text: '소재지' } },
 
         /* 2. 시설용량 (㎥/일) */
-        { name: 'FCT_CPC_GROUP', fieldName: '시설용량(500m3/일이상/미만)_용량', header: { text: '시설용량(500m3/일이상/미만)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'FCT_CPC_PHY', fieldName: '물리적_용량', header: { text: '물리적' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'FCT_CPC_BIO', fieldName: '생물학적_용량', header: { text: '생물학적' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'FCT_CPC_ADV', fieldName: '고도_용량', header: { text: '고도' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'prcsFcltCpct', fieldName: 'prcsFcltCpct', header: { text: '시설용량(500m³/일 이상/미만)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'prcsFcltPhysCpct', fieldName: 'prcsFcltPhysCpct', header: { text: '물리적' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'prcsFcltBoilCpct', fieldName: 'prcsFcltBoilCpct', header: { text: '생물학적' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'prcsFcltAltdCpct', fieldName: 'prcsFcltAltdCpct', header: { text: '고도' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
         
         /* 3. 유입하수량 (㎥/일) */
-        { name: 'IN_QTY_GROUP', fieldName: '유입하수량(500m3/일이상/미만)', header: { text: '유입하수량(500m3/일이상/미만)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'IN_QTY_PHY', fieldName: '물리적_유입', header: { text: '물리적' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'IN_QTY_BIO', fieldName: '생물학적_유입', header: { text: '생물학적' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'IN_QTY_ADV', fieldName: '고도_유입', header: { text: '고도' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'inflwSwageQnt', fieldName: 'inflwSwageQnt', header: { text: '유입하수량(500m³/일 이상/미만)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'inflwSwagePhysQnt', fieldName: 'inflwSwagePhysQnt', header: { text: '물리적' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'inflwSwageBoilQnt', fieldName: 'inflwSwageBoilQnt', header: { text: '생물학적' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'inflwSwageAltdQnt', fieldName: 'inflwSwageAltdQnt', header: { text: '고도' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
         
         /* 4. 방류량 (㎥/일) */
-        { name: 'OUT_QTY_GROUP', fieldName: '방류량(500m3/일이상/미만)', header: { text: '방류량(500m3/일이상/미만)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'OUT_QTY_PHY', fieldName: '물리적_방류', header: { text: '물리적' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'OUT_QTY_BIO', fieldName: '생물학적_방류', header: { text: '생물학적' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'OUT_QTY_ADV', fieldName: '고도_방류', header: { text: '고도' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'prcsQnt', fieldName: 'prcsQnt', header: { text: '방류량(500m³/일 이상/미만)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'prcsPhysCpct', fieldName: 'prcsPhysCpct', header: { text: '물리적' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'prcsBoilCpct', fieldName: 'prcsBoilCpct', header: { text: '생물학적' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'prcsAltdCpct', fieldName: 'prcsAltdCpct', header: { text: '고도' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
 
         /* 5. 수질 및 처리효율 */
-        { name: 'IN_BOD', fieldName: '유입BOD', header: { text: '유입BOD' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'OUT_BOD', fieldName: '방류BOD', header: { text: '방류BOD' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'IN_TOC', fieldName: '유입TOC', header: { text: '유입TOC' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'OUT_TOC', fieldName: '방류TOC', header: { text: '방류TOC' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'IN_SS', fieldName: '유입SS', header: { text: '유입SS' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'OUT_SS', fieldName: '방류SS', header: { text: '방류SS' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'IN_TN', fieldName: '유입T-N', header: { text: '유입T-N' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
-        { name: 'OUT_TN', fieldName: '방류T-N', header: { text: '방류T-N' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
-        { name: 'IN_TP', fieldName: '유입T-P', header: { text: '유입T-P' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
-        { name: 'OUT_TP', fieldName: '방류T-P', header: { text: '방류T-P' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
-        { name: 'IN_COLI', fieldName: '유입총대장균군수', header: { text: '유입총대장균군수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'OUT_COLI', fieldName: '방대총대장균군수', header: { text: '방대총대장균군수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'TRT_EFF', fieldName: '처리효율(%)', header: { text: '처리효율(%)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'TRT_LOD', fieldName: '처리부하량(kgBOD/D)', header: { text: '처리부하량(kgBOD/D)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'TRT_MTHD', fieldName: '처리방법', header: { text: '처리방법' } },
+        { name: 'inflwBodVl', fieldName: 'inflwBodVl', header: { text: '유입BOD' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'dschgBodVl', fieldName: 'dschgBodVl', header: { text: '방류BOD' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'inflwTocQnt', fieldName: 'inflwTocQnt', header: { text: '유입TOC' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'dschgTocQnt', fieldName: 'dschgTocQnt', header: { text: '방류TOC' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'inflwSsQnt', fieldName: 'inflwSsQnt', header: { text: '유입SS' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'dschgSsQnt', fieldName: 'dschgSsQnt', header: { text: '방류SS' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'inflwTnVl', fieldName: 'inflwTnVl', header: { text: '유입T-N' }, footer: footerDecimal3ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
+        { name: 'dschgTnVl', fieldName: 'dschgTnVl', header: { text: '방류T-N' }, footer: footerDecimal3ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
+        { name: 'inflwTpVl', fieldName: 'inflwTpVl', header: { text: '유입T-P' }, footer: footerDecimal3ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
+        { name: 'dschgTpVl', fieldName: 'dschgTpVl', header: { text: '방류T-P' }, footer: footerDecimal3ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
+        { name: 'inflwGrssClfgVl', fieldName: 'inflwGrssClfgVl', header: { text: '유입총대장균군수' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'dschgGrssClfgVl', fieldName: 'dschgGrssClfgVl', header: { text: '방류총대장균군수' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'prcsRt', fieldName: 'prcsRt', header: { text: '처리효율(%)' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'prcsLodQnt', fieldName: 'prcsLodQnt', header: { text: '처리부하량(kgBOD/D)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'prcsMthdExpln', fieldName: 'prcsMthdExpln', header: { text: '처리방법' } },
 
         /* 6. 연계처리량 */
-        { name: 'LNK_EXC', fieldName: '분뇨', header: { text: '분뇨' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'LNK_LVS', fieldName: '축산', header: { text: '축산' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'LNK_LCH', fieldName: '침출수', header: { text: '침출수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'LNK_ETC', fieldName: '기타_연계', header: { text: '기타' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'wholHmnQnt', fieldName: 'wholHmnQnt', header: { text: '분뇨' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'wholLvstQnt', fieldName: 'wholLvstQnt', header: { text: '축산' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'wholEfntQnt', fieldName: 'wholEfntQnt', header: { text: '침출수' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'wholEtcQnt', fieldName: 'wholEtcQnt', header: { text: '기타' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
 
         /* 7. 상세 시설 정보 */
-        { name: 'TEL_NO', fieldName: '전화번호', header: { text: '전화번호' } },
-        { name: 'COMP_DT', fieldName: '준공일', header: { text: '준공일' } },
-        { name: 'RN_DT', fieldName: '가동개시일', header: { text: '가동개시일' } },
-        { name: 'BSNS_CT', fieldName: '사업비(백만원)', header: { text: '사업비(백만원)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'DSCH_DSF_MTHD', fieldName: '방류수소독방법', header: { text: '방류수소독방법' } },
+        { name: 'telNo', fieldName: 'telNo', header: { text: '전화번호' } },
+        { name: 'cmptnStrtYmd', fieldName: 'cmptnStrtYmd', header: { text: '준공일' } },
+        { name: 'oprtngStrtYmd', fieldName: 'oprtngStrtYmd', header: { text: '가동개시일' } },
+        { name: 'wholBizVl', fieldName: 'wholBizVl', header: { text: '사업비' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'eflntDsnfMthdExpln', fieldName: 'eflntDsnfMthdExpln', header: { text: '방류수 소독방법' } },
 
         /* 8. 방류수역 */
-        { name: 'WTR_SYS', fieldName: '수계', header: { text: '수계' } },
-        { name: 'STRM', fieldName: '지류', header: { text: '지류' } },
-        { name: 'DET_UNIT_ZONE', fieldName: '세부단위구역', header: { text: '세부단위구역' } },
-        { name: 'RGN_GBN', fieldName: '지역구분', header: { text: '지역구분' } },
-        { name: 'MID_ZONE_NM', fieldName: '명칭', header: { text: '명칭' } },
-        { name: 'MID_ZONE_BOD', fieldName: '목표수질(BOD)', header: { text: '목표수질(BOD)' } },
+        { name: 'wtsysNm', fieldName: 'wtsysNm', header: { text: '수계' } },
+        { name: 'trbtrNm', fieldName: 'trbtrNm', header: { text: '지류' } },
+        { name: 'dtlUnitZoneCn', fieldName: 'dtlUnitZoneCn', header: { text: '세부단위구역' } },
+        { name: 'rgnSeNm', fieldName: 'rgnSeNm', header: { text: '지역구분' } },
+        { name: 'msirbCn', fieldName: 'msirbCn', header: { text: '명칭' } },
+        { name: 'goalWqNo', fieldName: 'goalWqNo', header: { text: '목표수질(BOD)' } },
 
         /* 9. 에너지 및 환경 */
-        { name: 'ENG_SLF_RT', fieldName: '에너지자립율(%)', header: { text: '에너지자립율(%)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'ENG_SLF_QTY', fieldName: '에너지자체생산량(TOE)', header: { text: '에너지자체생산량(TOE)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'ENG_TOT_SUM', fieldName: '계(TOE)', header: { text: '계(TOE)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'ENG_TOT_PWR', fieldName: '총전력사용량(KWh)', header: { text: '총전력사용량(KWh)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'ENG_TOT_SLF', fieldName: '자체에너지사용량(TOE)', header: { text: '자체에너지사용량(TOE)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'CO2_EMISS', fieldName: '하수처리량당CO2배출량(KgCO2/m3)', header: { text: '하수처리량당CO2배출량(KgCO2/m3)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
+        { name: 'engySrlneRt', fieldName: 'engySrlneRt', header: { text: '에너지자립률(%)' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'engyItslfPrdctnQnt', fieldName: 'engyItslfPrdctnQnt', header: { text: '에너지자체생산량(TOE)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'anlEngyWholUseQnt', fieldName: 'anlEngyWholUseQnt', header: { text: '계(TOE)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'anlElpwrUseQnt', fieldName: 'anlElpwrUseQnt', header: { text: '총 전력사용량(kWh)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'itslfEngyUseQnt', fieldName: 'itslfEngyUseQnt', header: { text: '자체 에너지사용량(TOE)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'swtrmtEmsnQnt', fieldName: 'swtrmtEmsnQnt', header: { text: '하수처리량당 CO2배출량(kgCO2/m³)' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
 
         /* 10. 운영 및 위탁 */
-        { name: 'OPR_MBY', fieldName: '운영주체', header: { text: '운영주체' } },
-        { name: 'ENTRPS_NM', fieldName: '위탁업체명', header: { text: '위탁업체명' } },
-        { name: 'ENTRPS_CT', fieldName: '위탁비용(백만원/년)', header: { text: '위탁비용(백만원/년)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-        { name: 'ENTRPS_TERM', fieldName: '위탁계약기간', header: { text: '위탁계약기간' } },
-        { name: 'CTR_TRT_FCT', fieldName: '중심처리시설', header: { text: '중심처리시설' } },
-        { name: 'EMP_CNT', fieldName: '직원총수(명)', header: { text: '직원총수(명)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0' },
-        { name: 'ACC_CNT', fieldName: '안전사고건수', header: { text: '안전사고건수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0' },
-        { name: 'RMK', fieldName: '비고', header: { text: '비고' } },
+        { name: 'operMnbdCn', fieldName: 'operMnbdCn', header: { text: '운영주체(자체/공기업/민간대행)' } },
+        { name: 'prxyBzentyNmCn', fieldName: 'prxyBzentyNmCn', header: { text: '위탁업체명' } },
+        { name: 'cnsgnCstVl', fieldName: 'cnsgnCstVl', header: { text: '위탁비용(백만원/년)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+        { name: 'prxyCtrtCn', fieldName: 'prxyCtrtCn', header: { text: '위탁계약기간' } },
+        { name: 'intgPrcsFcltCn', fieldName: 'intgPrcsFcltCn', header: { text: '중심처리시설' } },
+        { name: 'wholNope', fieldName: 'wholNope', header: { text: '직원총수(명)' }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0' },
+        { name: 'sftyAcdntEvntcsCnt', fieldName: 'sftyAcdntEvntcsCnt', header: { text: '안전사고건수' }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0' },
+        { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
     ],
     columnLayout: [
-        { name: 'groupA', header: { text: '행정구역' }, items: ['sido', 'sgg'] },
-        'FCT_NM_GROUP', 'GBN', 'ADDR', 'FCT_CPC_GROUP',
+        {
+            name: 'groupA',
+            hideChildHeaders: false,
+            header: { text: '행정구역' },
+            items: [{ column: 'ctpvNm', footerUserSpans: [{ colspan: 3 }, { colspan: 3 }] }, 'sggNm'],
+        },
+        'displayYear', 'swtrmtFcltNm', 'fcltPstnCn', 'prcsFcltCpct',
         {
             name: 'groupB',
             header: { text: '시설용량(㎥/일)' },
-            items: ['FCT_CPC_PHY', 'FCT_CPC_BIO', 'FCT_CPC_ADV'],
+            items: ['prcsFcltPhysCpct', 'prcsFcltBoilCpct', 'prcsFcltAltdCpct'],
         },
-        'IN_QTY_GROUP',
+        'inflwSwageQnt',
         {
             name: 'groupC',
             header: { text: '유입하수량(㎥/일)' },
-            items: ['IN_QTY_PHY', 'IN_QTY_BIO', 'IN_QTY_ADV'],
+            items: ['inflwSwagePhysQnt', 'inflwSwageBoilQnt', 'inflwSwageAltdQnt'],
         },
-        'OUT_QTY_GROUP',
+        'prcsQnt',
         {
             name: 'groupD',
             header: { text: '방류량(㎥/일)' },
-            items: ['OUT_QTY_PHY', 'OUT_QTY_BIO', 'OUT_QTY_ADV'],
+            items: ['prcsPhysCpct', 'prcsBoilCpct', 'prcsAltdCpct'],
         },
-        'IN_BOD', 'OUT_BOD', 'IN_TOC', 'OUT_TOC', 'IN_SS', 'OUT_SS', 'IN_TN', 'OUT_TN', 'IN_TP', 'OUT_TP', 'IN_COLI', 'OUT_COLI',
-        'TRT_EFF', 'TRT_LOD', 'TRT_MTHD',
+        'inflwBodVl', 'dschgBodVl', 'inflwTocQnt', 'dschgTocQnt', 'inflwSsQnt', 'dschgSsQnt', 'inflwTnVl', 'dschgTnVl', 'inflwTpVl', 'dschgTpVl', 'inflwGrssClfgVl', 'dschgGrssClfgVl',
+        'prcsRt', 'prcsLodQnt', 'prcsMthdExpln',
         {
             name: 'groupE',
             header: { text: '연계처리량(㎥/일)' },
-            items: ['LNK_EXC', 'LNK_LVS', 'LNK_LCH', 'LNK_ETC'],
+            items: ['wholHmnQnt', 'wholLvstQnt', 'wholEfntQnt', 'wholEtcQnt'],
         },
-        'TEL_NO', 'COMP_DT', 'RN_DT', 'BSNS_CT', 'DSCH_DSF_MTHD',
+        'telNo', 'cmptnStrtYmd', 'oprtngStrtYmd', 'wholBizVl', 'eflntDsnfMthdExpln',
         {
             name: 'groupF',
             header: { text: '방류수역' },
-            items: ['WTR_SYS', 'STRM', 'DET_UNIT_ZONE', 'RGN_GBN',
+            items: ['wtsysNm', 'trbtrNm', 'dtlUnitZoneCn', 'rgnSeNm',
                 {
                     name: 'groupG',
                     header: { text: '중권역' },
-                    items: ['MID_ZONE_NM', 'MID_ZONE_BOD'],
+                    items: ['msirbCn', 'goalWqNo'],
                 },
             ],
         },
-        'ENG_SLF_RT', 'ENG_SLF_QTY',
+        'engySrlneRt', 'engyItslfPrdctnQnt',
         {
             name: 'groupH',
             header: { text: '연간 총 에너지 사용량(TOE)' },
-            items: ['ENG_TOT_SUM', 'ENG_TOT_PWR', 'ENG_TOT_SLF'],
+            items: ['anlEngyWholUseQnt', 'anlElpwrUseQnt', 'itslfEngyUseQnt'],
         },
-        'CO2_EMISS', 'OPR_MBY',
+        'swtrmtEmsnQnt', 'operMnbdCn',
         {
             name: 'groupI',
             header: { text: '위탁현황' },
-            items: ['ENTRPS_NM', 'ENTRPS_CT', 'ENTRPS_TERM'],
+            items: ['prxyBzentyNmCn', 'cnsgnCstVl', 'prxyCtrtCn'],
         },
-        'CTR_TRT_FCT', 'EMP_CNT', 'ACC_CNT', 'RMK'
-    ]
+        'intgPrcsFcltCn', 'wholNope', 'sftyAcdntEvntcsCnt', 'rmrk'
+    ],
+    fixedColumns: 3,
+    rowStartNum: 3
 };
 
 // 최종 Export 객체 (일괄 editable: false 적용)
@@ -144,6 +192,7 @@ export const PublicSewageFacilityInfoList = {
     ...rawPublicSewageFacilityInfoList,
     columns: rawPublicSewageFacilityInfoList.columns.map(col => ({
         ...col,
-        editable: false
+        editable: false,
+        styleName: "rg-cell-readonly"
     }))
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/review/SewagePipeRvwColumn.ts b/apps/st/src/components/util/column/review/SewagePipeRvwColumn.ts
index 0178b60e9..8d274d529 100644
--- a/apps/st/src/components/util/column/review/SewagePipeRvwColumn.ts
+++ b/apps/st/src/components/util/column/review/SewagePipeRvwColumn.ts
@@ -1,12 +1,18 @@
-import { ValueType } from "realgrid";
 import dayjs from 'dayjs';
-import { footerIntArrayByDivision, footerDecimal3ArrayByDivision, footerAvgDecimalArrayByDivision } from "@/components/util/grid/footerSummary";
+import { ValueType } from "realgrid";
+
 import type { GridView } from "@/components/type/DataGrid.type";
+import {
+    footerAvgDecimalArrayByDivision,
+    footerDecimal1ArrayByDivision,
+    footerDecimal3ArrayByDivision,
+    footerIntArrayByDivision,
+} from "@/components/util/grid/footerSummary";
 
 
 const currentYear = dayjs().year() - 1;
 const startYear = 1996;
-const totalCount = currentYear - startYear + 1 + 1;
+const totalCount = currentYear - startYear + 1;
 
 // 하수도 통계 관리 02. 하수관로
 const rawList = [
@@ -258,7 +264,7 @@ const rawList = [
             { name: 'prcsZoneArea', fieldName: 'prcsZoneArea', header: { text: '합계' }, footer: footerDecimal3ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
             { name: 'cbsysPrcsZoneArea', fieldName: 'cbsysPrcsZoneArea', header: { text: '합류식' }, footer: footerDecimal3ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
             { name: 'sprsysPrcsZoneArea', fieldName: 'sprsysPrcsZoneArea', header: { text: '분류식' }, footer: footerDecimal3ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
-            { name: 'sprsysVartnRt', fieldName: 'sprsysVartnRt', header: { text: '분류식화' }, footer: footerDecimal3ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
+            { name: 'sprsysVartnRt', fieldName: 'sprsysVartnRt', header: { text: '분류식화율' }, footer: footerDecimal3ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.000' },
             { name: 'mltvEqpmCnt', fieldName: 'mltvEqpmCnt', header: { text: '합계' }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0' },
             { name: 'cbsysMltvEqpmCnt', fieldName: 'cbsysMltvEqpmCnt', header: { text: '합류식' }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0' },
             { name: 'sprsysMltvEqpmCnt', fieldName: 'sprsysMltvEqpmCnt', header: { text: '분류식 합계' }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0' },
@@ -386,51 +392,52 @@ const rawList = [
                 ]
             },
 
-            { name: 'pipeByPrstWholSum', fieldName: 'pipeByPrstWhol', header: { text: '계' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-            { name: 'lyngPrlgSum', fieldName: 'lyngPrlg', header: { text: '매설연장(m)' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-            { name: 'dmltnPrlgSum', fieldName: 'dmltnPrlg', header: { text: '철거연장(m)' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+            { name: 'pipeByPrstWhol', fieldName: 'pipeByPrstWhol', header: { text: '계' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+            { name: 'lyngPrlg', fieldName: 'lyngPrlg', header: { text: '매설연장(m)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+            { name: 'dmltnPrlg', fieldName: 'dmltnPrlg', header: { text: '철거연장(m)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
 
 
             ...Array.from({ length: totalCount }, (_, i) => {
-                const dtoNum = totalCount - i;
+                const dtoNum = i + 1;
 
                 const wholField = `yy${dtoNum}PrlgWhol`;
                 const lyngField = `yy${dtoNum}LyngPrlg`;
                 const dmltnField = `yy${dtoNum}DmltnPrlg`;
 
                 return [
-                    { name: wholField, fieldName: wholField, header: { text: '계' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-                    { name: lyngField, fieldName: lyngField, header: { text: '매설연장(m)' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-                    { name: dmltnField, fieldName: dmltnField, header: { text: '철거연장(m)' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' }
+                    { name: wholField, fieldName: wholField, header: { text: '계' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+                    { name: lyngField, fieldName: lyngField, header: { text: '매설연장(m)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+                    { name: dmltnField, fieldName: dmltnField, header: { text: '철거연장(m)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' }
                 ];
             }).flat(),
 
             { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
         ], columnLayout: [
-            { 
-                name: 'areaGroup', 
-                header: { text: '행정구역' }, 
-                items: [{ column: 'ctpvNm', footerUserSpans: [{ colspan: 4 }, { colspan: 4 }] },
-                'sggNm', 'swrgPipeNm'
-            ] },
-            'displayYear',
-            { name: 'summaryGroup', header: { text: '총계' }, items: ['pipeByPrstWholSum', 'lyngPrlgSum', 'dmltnPrlgSum'] },
+            {
+                name: "areaGroup",
+                header: { text: "행정구역" },
+                items: [
+                    { column: "ctpvNm", footerUserSpans: [{ colspan: 3 }, { colspan: 3 }] },
+                    "sggNm",
+                    "swrgPipeNm",
+                ],
+            },
+            "displayYear",
+            { name: "summaryGroup", header: { text: "총계" }, items: ["pipeByPrstWhol", "lyngPrlg", "dmltnPrlg"] },
 
             ...Array.from({ length: totalCount }, (_, i) => {
-
-                const dtoNum = totalCount - i;
-                const yearLabel = i === 0
-                    ? '1996년이전'
-                    : `${startYear + (i - 1)}년`;
+                // const dtoNum = totalCount - i;
+                const dtoNum = i + 1;
+                const yearLabel = i === 0 ? "1996년이전" : `${startYear + (i - 1)}년`;
 
                 return {
                     name: `group_${yearLabel}`,
                     header: { text: yearLabel },
-                    items: [`yy${dtoNum}PrlgWhol`, `yy${dtoNum}LyngPrlg`, `yy${dtoNum}DmltnPrlg`]
+                    items: [`yy${dtoNum}PrlgWhol`, `yy${dtoNum}LyngPrlg`, `yy${dtoNum}DmltnPrlg`],
                 };
             }),
-            'rmrk'
-        ]
+            "rmrk",
+        ],
     },
 
     {
@@ -511,14 +518,14 @@ const rawList = [
             },
 
             /* 관경별 수치 필드 */
-            { name: 'pdmtByTsmWhol', fieldName: 'pdmtByTsmWhol', header: { text: '총계(m)' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-            { name: 'step1PdmtPrlg', fieldName: 'step1PdmtPrlg', header: { text: '200mm 미만' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-            { name: 'step2PdmtPrlg', fieldName: 'step2PdmtPrlg', header: { text: '200mm이상~\n300mm미만' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-            { name: 'step3PdmtPrlg', fieldName: 'step3PdmtPrlg', header: { text: '300mm이상~\n500mm미만' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-            { name: 'step4PdmtPrlg', fieldName: 'step4PdmtPrlg', header: { text: '500mm이상~\n800mm미만' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-            { name: 'step5PdmtPrlg', fieldName: 'step5PdmtPrlg', header: { text: '800mm 이상' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-            { name: 'sqrePdmtPrlg', fieldName: 'sqrePdmtPrlg', header: { text: '사각형(m)' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
-            { name: 'etcPdmtPrlg', fieldName: 'etcPdmtPrlg', header: { text: '기타\n(측구/개거 등)' }, footer: footerAvgDecimalArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+            { name: 'pdmtByTsmWhol', fieldName: 'pdmtByTsmWhol', header: { text: '총계(m)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+            { name: 'step1PdmtPrlg', fieldName: 'step1PdmtPrlg', header: { text: '200mm 미만' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+            { name: 'step2PdmtPrlg', fieldName: 'step2PdmtPrlg', header: { text: '200mm이상~\n300mm미만' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+            { name: 'step3PdmtPrlg', fieldName: 'step3PdmtPrlg', header: { text: '300mm이상~\n500mm미만' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+            { name: 'step4PdmtPrlg', fieldName: 'step4PdmtPrlg', header: { text: '500mm이상~\n800mm미만' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+            { name: 'step5PdmtPrlg', fieldName: 'step5PdmtPrlg', header: { text: '800mm 이상' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+            { name: 'sqrePdmtPrlg', fieldName: 'sqrePdmtPrlg', header: { text: '사각형(m)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
+            { name: 'etcPdmtPrlg', fieldName: 'etcPdmtPrlg', header: { text: '기타\n(측구/개거 등)' }, footer: footerDecimal1ArrayByDivision, valueType: ValueType.NUMBER, numberFormat: '#,##0.0' },
 
             { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } }, // rmk -> rmrk
         ],
@@ -544,7 +551,311 @@ const rawList = [
             'etcPdmtPrlg',
             'rmrk'
         ]
-    }
+    },
+
+    {
+        tabKey: "ST00020005",
+        tabLabel: "맨홀 현황",
+        rowStartNum: 3,
+        fixedColumns: 3,
+        columns: [
+            {
+                name: "ctpvNm",
+                fieldName: "ctpvNm",
+                header: { text: "시도" },
+                mergeCells: true,
+                sortdisable: true,
+                footer: [
+                    {
+                        valueCallback: (grid: GridView) => {
+                            const divisionIndex = 0;
+                            const dataSource = grid.getDataSource();
+                            const uniqueValues = new Set<string>();
+                            for (let i = 0; i < dataSource.getRowCount(); i++) {
+                                const val = dataSource.getValue(i, "displayYear");
+                                if (val) uniqueValues.add(String(val));
+                            }
+                            const divisionValues = Array.from(uniqueValues);
+                            return divisionValues.length > divisionIndex ? divisionValues[divisionIndex] + "합계" : "합계";
+                        }
+                    },
+                    {
+                        valueCallback: (grid: GridView) => {
+                            const divisionIndex = 1;
+                            const dataSource = grid.getDataSource();
+                            const uniqueValues = new Set<string>();
+                            for (let i = 0; i < dataSource.getRowCount(); i++) {
+                                const val = dataSource.getValue(i, "displayYear");
+                                if (val) uniqueValues.add(String(val));
+                            }
+                            const divisionValues = Array.from(uniqueValues);
+                            return divisionValues.length > divisionIndex ? divisionValues[divisionIndex] + "합계" : "합계";
+                        }
+                    }
+                ]
+            },
+            { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, mergeCells: true, sortdisable: true },
+            { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, mergeCells: true, sortdisable: true },
+            { name: "emphsMngSeNm", fieldName: "emphsMngSeNm", header: { text: "집중강우\n중점관리\n구역구분" }, mergeCells: true },
+            {
+                name: 'displayYear',
+                fieldName: 'displayYear',
+                header: { text: '구분' },
+                sortdisable: true,
+                footer: [
+                    {
+                        valueCallback: (grid: GridView) => {
+                            const divisionIndex = 0;
+                            const dataSource = grid.getDataSource();
+                            const uniqueValues = new Set<string>();
+                            for (let i = 0; i < dataSource.getRowCount(); i++) {
+                                const val = dataSource.getValue(i, 'displayYear');
+                                if (val) uniqueValues.add(String(val));
+                            }
+                            const divisionValues = Array.from(uniqueValues);
+                            return divisionValues.length > divisionIndex ? divisionValues[divisionIndex] + '합계' : '';
+                        }
+                    },
+                    {
+                        valueCallback: (grid: GridView) => {
+                            const divisionIndex = 1;
+                            const dataSource = grid.getDataSource();
+                            const uniqueValues = new Set<string>();
+                            for (let i = 0; i < dataSource.getRowCount(); i++) {
+                                const val = dataSource.getValue(i, 'displayYear');
+                                if (val) uniqueValues.add(String(val));
+                            }
+                            const divisionValues = Array.from(uniqueValues);
+                            return divisionValues.length > divisionIndex ? divisionValues[divisionIndex] + '합계' : '';
+                        }
+                    }
+                ]
+            },
+
+            { name: "totalWholMnhlCnt", fieldName: "totalWholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "totalStep1MnhlCnt", fieldName: "totalStep1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "totalStep2MnhlCnt", fieldName: "totalStep2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "totalStep3MnhlCnt", fieldName: "totalStep3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "totalStep4MnhlCnt", fieldName: "totalStep4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "totalStep5MnhlCnt", fieldName: "totalStep5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            // ── 2015년 이전 (yy14) ──────────────────────────────────
+            { name: "yy14WholMnhlCnt", fieldName: "yy14WholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy14Step1MnhlCnt", fieldName: "yy14Step1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy14Step2MnhlCnt", fieldName: "yy14Step2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy14Step3MnhlCnt", fieldName: "yy14Step3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy14Step4MnhlCnt", fieldName: "yy14Step4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy14Step5MnhlCnt", fieldName: "yy14Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            // ── 2015년 (yy15) ───────────────────────────────────────
+            { name: "yy15WholMnhlCnt", fieldName: "yy15WholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy15Step1MnhlCnt", fieldName: "yy15Step1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy15Step2MnhlCnt", fieldName: "yy15Step2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy15Step3MnhlCnt", fieldName: "yy15Step3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy15Step4MnhlCnt", fieldName: "yy15Step4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy15Step5MnhlCnt", fieldName: "yy15Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            // ── 2016년 (yy16) ───────────────────────────────────────
+            { name: "yy16WholMnhlCnt", fieldName: "yy16WholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy16Step1MnhlCnt", fieldName: "yy16Step1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy16Step2MnhlCnt", fieldName: "yy16Step2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy16Step3MnhlCnt", fieldName: "yy16Step3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy16Step4MnhlCnt", fieldName: "yy16Step4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy16Step5MnhlCnt", fieldName: "yy16Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            // ── 2017년 (yy17) ───────────────────────────────────────
+            { name: "yy17WholMnhlCnt", fieldName: "yy17WholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy17Step1MnhlCnt", fieldName: "yy17Step1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy17Step2MnhlCnt", fieldName: "yy17Step2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy17Step3MnhlCnt", fieldName: "yy17Step3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy17Step4MnhlCnt", fieldName: "yy17Step4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy17Step5MnhlCnt", fieldName: "yy17Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            // ── 2018년 (yy18) ───────────────────────────────────────
+            { name: "yy18WholMnhlCnt", fieldName: "yy18WholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy18Step1MnhlCnt", fieldName: "yy18Step1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy18Step2MnhlCnt", fieldName: "yy18Step2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy18Step3MnhlCnt", fieldName: "yy18Step3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy18Step4MnhlCnt", fieldName: "yy18Step4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy18Step5MnhlCnt", fieldName: "yy18Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            // ── 2019년 (yy19) ───────────────────────────────────────
+            { name: "yy19WholMnhlCnt", fieldName: "yy19WholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy19Step1MnhlCnt", fieldName: "yy19Step1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy19Step2MnhlCnt", fieldName: "yy19Step2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy19Step3MnhlCnt", fieldName: "yy19Step3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy19Step4MnhlCnt", fieldName: "yy19Step4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy19Step5MnhlCnt", fieldName: "yy19Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            // ── 2020년 (yy20) ───────────────────────────────────────
+            { name: "yy20WholMnhlCnt", fieldName: "yy20WholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy20Step1MnhlCnt", fieldName: "yy20Step1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy20Step2MnhlCnt", fieldName: "yy20Step2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy20Step3MnhlCnt", fieldName: "yy20Step3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy20Step4MnhlCnt", fieldName: "yy20Step4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy20Step5MnhlCnt", fieldName: "yy20Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            // ── 2021년 (yy21) ───────────────────────────────────────
+            { name: "yy21WholMnhlCnt", fieldName: "yy21WholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy21Step1MnhlCnt", fieldName: "yy21Step1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy21Step2MnhlCnt", fieldName: "yy21Step2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy21Step3MnhlCnt", fieldName: "yy21Step3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy21Step4MnhlCnt", fieldName: "yy21Step4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy21Step5MnhlCnt", fieldName: "yy21Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            // ── 2022년 (yy22) ───────────────────────────────────────
+            { name: "yy22WholMnhlCnt", fieldName: "yy22WholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy22Step1MnhlCnt", fieldName: "yy22Step1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy22Step2MnhlCnt", fieldName: "yy22Step2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy22Step3MnhlCnt", fieldName: "yy22Step3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy22Step4MnhlCnt", fieldName: "yy22Step4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy22Step5MnhlCnt", fieldName: "yy22Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            // ── 2023년 (yy23) ───────────────────────────────────────
+            { name: "yy23WholMnhlCnt", fieldName: "yy23WholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy23Step1MnhlCnt", fieldName: "yy23Step1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy23Step2MnhlCnt", fieldName: "yy23Step2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy23Step3MnhlCnt", fieldName: "yy23Step3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy23Step4MnhlCnt", fieldName: "yy23Step4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy23Step5MnhlCnt", fieldName: "yy23Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            // ── 2024년 (yy24) ───────────────────────────────────────
+            { name: "yy24WholMnhlCnt", fieldName: "yy24WholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy24Step1MnhlCnt", fieldName: "yy24Step1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy24Step2MnhlCnt", fieldName: "yy24Step2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy24Step3MnhlCnt", fieldName: "yy24Step3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy24Step4MnhlCnt", fieldName: "yy24Step4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy24Step5MnhlCnt", fieldName: "yy24Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            // ── 2025년 (yy25) ───────────────────────────────────────
+            { name: "yy25WholMnhlCnt", fieldName: "yy25WholMnhlCnt", header: { text: "계" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy25Step1MnhlCnt", fieldName: "yy25Step1MnhlCnt", header: { text: "주철" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy25Step2MnhlCnt", fieldName: "yy25Step2MnhlCnt", header: { text: "주철(조화)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy25Step3MnhlCnt", fieldName: "yy25Step3MnhlCnt", header: { text: "콘크리트" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy25Step4MnhlCnt", fieldName: "yy25Step4MnhlCnt", header: { text: "기타" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+            { name: "yy25Step5MnhlCnt", fieldName: "yy25Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, footer: footerIntArrayByDivision, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+            { name: "rmrk", fieldName: "rmrk", header: { text: "비고" }, editable: false },
+        ],
+        columnLayout: [
+            {
+                name: "addrGroup",
+                header: { text: "행정구역" },
+                items: [
+                    { column: "ctpvNm", footerUserSpans: [{ colspan: 5 }, { colspan: 5 }] },
+                    "sggNm",
+                    "admdstNm",
+                ],
+            },
+            "emphsMngSeNm",
+            "displayYear",
+            {
+                name: "totGroup",
+                header: { text: "총계" },
+                items: [
+                    { name: "totMtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["totalWholMnhlCnt", "totalStep1MnhlCnt", "totalStep2MnhlCnt", "totalStep3MnhlCnt", "totalStep4MnhlCnt"] },
+                    "totalStep5MnhlCnt",
+                ],
+            },
+            {
+                name: "yy14Group",
+                header: { text: "2015년 이전" },  // ← _14Y
+                items: [
+                    { name: "yy14MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy14WholMnhlCnt", "yy14Step1MnhlCnt", "yy14Step2MnhlCnt", "yy14Step3MnhlCnt", "yy14Step4MnhlCnt"] },
+                    "yy14Step5MnhlCnt",
+                ],
+            },
+            {
+                name: "yy15Group",
+                header: { text: "2015년" },       // ← _15Y
+                items: [
+                    { name: "yy15MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy15WholMnhlCnt", "yy15Step1MnhlCnt", "yy15Step2MnhlCnt", "yy15Step3MnhlCnt", "yy15Step4MnhlCnt"] },
+                    "yy15Step5MnhlCnt",
+                ],
+            },
+            {
+                name: "yy16Group",
+                header: { text: "2016년" },       // ← _16Y
+                items: [
+                    { name: "yy16MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy16WholMnhlCnt", "yy16Step1MnhlCnt", "yy16Step2MnhlCnt", "yy16Step3MnhlCnt", "yy16Step4MnhlCnt"] },
+                    "yy16Step5MnhlCnt",
+                ],
+            },
+            {
+                name: "yy17Group",
+                header: { text: "2017년" },
+                items: [
+                    { name: "yy17MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy17WholMnhlCnt", "yy17Step1MnhlCnt", "yy17Step2MnhlCnt", "yy17Step3MnhlCnt", "yy17Step4MnhlCnt"] },
+                    "yy17Step5MnhlCnt",
+                ],
+            },
+            {
+                name: "yy18Group",
+                header: { text: "2018년" },
+                items: [
+                    { name: "yy18MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy18WholMnhlCnt", "yy18Step1MnhlCnt", "yy18Step2MnhlCnt", "yy18Step3MnhlCnt", "yy18Step4MnhlCnt"] },
+                    "yy18Step5MnhlCnt",
+                ],
+            },
+            {
+                name: "yy19Group",
+                header: { text: "2019년" },
+                items: [
+                    { name: "yy19MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy19WholMnhlCnt", "yy19Step1MnhlCnt", "yy19Step2MnhlCnt", "yy19Step3MnhlCnt", "yy19Step4MnhlCnt"] },
+                    "yy19Step5MnhlCnt",
+                ],
+            },
+            {
+                name: "yy20Group",
+                header: { text: "2020년" },
+                items: [
+                    { name: "yy20MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy20WholMnhlCnt", "yy20Step1MnhlCnt", "yy20Step2MnhlCnt", "yy20Step3MnhlCnt", "yy20Step4MnhlCnt"] },
+                    "yy20Step5MnhlCnt",
+                ],
+            },
+            {
+                name: "yy21Group",
+                header: { text: "2021년" },
+                items: [
+                    { name: "yy21MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy21WholMnhlCnt", "yy21Step1MnhlCnt", "yy21Step2MnhlCnt", "yy21Step3MnhlCnt", "yy21Step4MnhlCnt"] },
+                    "yy21Step5MnhlCnt",
+                ],
+            },
+            {
+                name: "yy22Group",
+                header: { text: "2022년" },
+                items: [
+                    { name: "yy22MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy22WholMnhlCnt", "yy22Step1MnhlCnt", "yy22Step2MnhlCnt", "yy22Step3MnhlCnt", "yy22Step4MnhlCnt"] },
+                    "yy22Step5MnhlCnt",
+                ],
+            },
+            {
+                name: "yy23Group",
+                header: { text: "2023년" },
+                items: [
+                    { name: "yy23MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy23WholMnhlCnt", "yy23Step1MnhlCnt", "yy23Step2MnhlCnt", "yy23Step3MnhlCnt", "yy23Step4MnhlCnt"] },
+                    "yy23Step5MnhlCnt",
+                ],
+            },
+            {
+                name: "yy24Group",
+                header: { text: "2024년" },
+                items: [
+                    { name: "yy24MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy24WholMnhlCnt", "yy24Step1MnhlCnt", "yy24Step2MnhlCnt", "yy24Step3MnhlCnt", "yy24Step4MnhlCnt"] },
+                    "yy24Step5MnhlCnt",
+                ],
+            },
+            {
+                name: "yy25Group",
+                header: { text: "2025년" },
+                items: [
+                    { name: "yy25MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy25WholMnhlCnt", "yy25Step1MnhlCnt", "yy25Step2MnhlCnt", "yy25Step3MnhlCnt", "yy25Step4MnhlCnt"] },
+                    "yy25Step5MnhlCnt",
+                ],
+            },
+            "rmrk",
+        ],
+    },
 ];
 
 export const SewagePipeColumnInfoListRvw = rawList.map(tab => ({
diff --git a/apps/st/src/components/util/column/review/SewageReservoirPumpRvwColumn.ts b/apps/st/src/components/util/column/review/SewageReservoirPumpRvwColumn.ts
index d6bc43849..5cfd73070 100644
--- a/apps/st/src/components/util/column/review/SewageReservoirPumpRvwColumn.ts
+++ b/apps/st/src/components/util/column/review/SewageReservoirPumpRvwColumn.ts
@@ -1,8 +1,8 @@
 import { ValueType } from "realgrid";
-import { 
-    footerIntArrayByDivision, 
-    footerDecimal1ArrayByDivision, 
-    footerDecimal3ArrayByDivision 
+import {
+    footerIntArrayByDivision,
+    footerDecimal1ArrayByDivision,
+    footerDecimal3ArrayByDivision
 } from "@/components/util/grid/footerSummary";
 import type { GridView } from "@/components/type/DataGrid.type";
 
@@ -56,10 +56,9 @@ const rawReservoirList = [
                     }
                 ]
             },
-    { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, mergeCells: true, sortdisable: true },
-    { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, mergeCells: true },
-    { name: 'impdFcltNm',     fieldName: 'impdFcltNm',     header: { text: '저류시설명' },   mergeCells: true, sortdisable: true },
-    { name: 'impdFcltPstnCn', fieldName: 'impdFcltPstnCn', header: { text: '저류시설위치' }, mergeCells: true, sortdisable: true },
+            { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, mergeCells: true, sortdisable: true },
+            { name: 'fcltNm', fieldName: 'fcltNm', header: { text: '저류시설명' }, mergeCells: true, sortdisable: true },
+            { name: 'fcltPstnCn', fieldName: 'fcltPstnCn', header: { text: '저류시설위치' }, mergeCells: true, sortdisable: true },
             {
                 name: 'displayYear',
                 fieldName: 'displayYear',
@@ -101,7 +100,7 @@ const rawReservoirList = [
                 ]
             },
 
-          /* 2. 시설 제원 */
+            /* 2. 시설 제원 */
             { name: 'oprtngStrtYmd', fieldName: 'oprtngStrtYmd', header: { text: '가동개시 년월일' } },
             { name: 'planDesignFreqCnt', fieldName: 'planDesignFreqCnt', header: { text: '계획설계빈도' } },
             { name: 'fldngPrvtnYn', fieldName: 'fldngPrvtnYn', header: { text: '침수예방' } },
@@ -117,12 +116,12 @@ const rawReservoirList = [
             { name: 'pumpFcltN1PerPpqty', fieldName: 'pumpFcltN1PerPpqty', header: { text: '대당 양수량' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
             { name: 'pumpFcltN1PumpCnt', fieldName: 'pumpFcltN1PumpCnt', header: { text: '펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
             { name: 'pumpFcltN1RsrvPumpCnt', fieldName: 'pumpFcltN1RsrvPumpCnt', header: { text: '예비펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
-            
+
             { name: 'pumpFcltN2DmtrExpln', fieldName: 'pumpFcltN2DmtrExpln', header: { text: '구경(mm)' } },
             { name: 'pumpFcltN2PerPpqty', fieldName: 'pumpFcltN2PerPpqty', header: { text: '대당 양수량' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
             { name: 'pumpFcltN2PumpCnt', fieldName: 'pumpFcltN2PumpCnt', header: { text: '펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
             { name: 'pumpFcltN2RsrvPumpCnt', fieldName: 'pumpFcltN2RsrvPumpCnt', header: { text: '예비펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
-            
+
             { name: 'pumpFcltN3DmtrExpln', fieldName: 'pumpFcltN3DmtrExpln', header: { text: '구경(mm)' } },
             { name: 'pumpFcltN3PerPpqty', fieldName: 'pumpFcltN3PerPpqty', header: { text: '대당 양수량' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
             { name: 'pumpFcltN3PumpCnt', fieldName: 'pumpFcltN3PumpCnt', header: { text: '펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
@@ -151,11 +150,11 @@ const rawReservoirList = [
         columnLayout: [
             {
                 name: 'areaGroup', header: { text: '행정구역' }, items: [
-                    { column: 'ctpvNm', footerUserSpans: [{ colspan: 4 }, { colspan: 4 }] },
-                    'sggNm','admdstNm'
+                    { column: 'ctpvNm', footerUserSpans: [{ colspan: 5 }, { colspan: 5 }] },
+                    'sggNm'
                 ]
             },
-            'impdFcltNm', 'impdFcltPstnCn','displayYear', 'oprtngStrtYmd', 'planDesignFreqCnt',
+            'fcltNm', 'fcltPstnCn', 'displayYear', 'oprtngStrtYmd', 'planDesignFreqCnt',
             { name: 'purposeGroup', header: { text: '설치목적' }, items: ['fldngPrvtnYn', 'wqPlltnMtgtYn', 'rtlztnUsgYn'] },
             'fcltStrctCn', 'wtrStrgZoneArea', 'impdFcltCpct',
             {
@@ -175,167 +174,166 @@ const rawReservoirList = [
             'rmrk'
         ]
     },
-{
+    {
         tabKey: 'ST00040002',
         tabLabel: '빗물펌프장',
         rowStartNum: 3,
         fixedColumns: 2,
-         columns: [
-        {
-            name: 'ctpvNm',
-            fieldName: 'ctpvNm',
-            header: { text: '시도' },
-            mergeCells: true,
-            sortdisable: true,
-            footer: [
-                {
-                    valueCallback: (grid: GridView) => {
-                        const divisionIndex = 0;
-                        const dataSource = grid.getDataSource();
-                        const rowCount = dataSource.getRowCount();
-                        const uniqueValues = new Set<string>();
-                        for (let i = 0; i < rowCount; i++) {
-                            const divisionValue = dataSource.getValue(i, 'displayYear');
-                            if (divisionValue !== null && divisionValue !== undefined && divisionValue !== '') {
-                                uniqueValues.add(String(divisionValue));
+        columns: [
+            {
+                name: 'ctpvNm',
+                fieldName: 'ctpvNm',
+                header: { text: '시도' },
+                mergeCells: true,
+                sortdisable: true,
+                footer: [
+                    {
+                        valueCallback: (grid: GridView) => {
+                            const divisionIndex = 0;
+                            const dataSource = grid.getDataSource();
+                            const rowCount = dataSource.getRowCount();
+                            const uniqueValues = new Set<string>();
+                            for (let i = 0; i < rowCount; i++) {
+                                const divisionValue = dataSource.getValue(i, 'displayYear');
+                                if (divisionValue !== null && divisionValue !== undefined && divisionValue !== '') {
+                                    uniqueValues.add(String(divisionValue));
+                                }
                             }
+                            const divisionValues = Array.from(uniqueValues);
+                            if (divisionValues.length > divisionIndex) return divisionValues[divisionIndex] + ' 합계';
+                            return '합계';
                         }
-                        const divisionValues = Array.from(uniqueValues);
-                        if (divisionValues.length > divisionIndex) return divisionValues[divisionIndex] + ' 합계';
-                        return '합계';
-                    }
-                },
-                {
-                    valueCallback: (grid: GridView) => {
-                        const divisionIndex = 1;
-                        const dataSource = grid.getDataSource();
-                        const rowCount = dataSource.getRowCount();
-                        const uniqueValues = new Set<string>();
-                        for (let i = 0; i < rowCount; i++) {
-                            const divisionValue = dataSource.getValue(i, 'displayYear');
-                            if (divisionValue !== null && divisionValue !== undefined && divisionValue !== '') {
-                                uniqueValues.add(String(divisionValue));
+                    },
+                    {
+                        valueCallback: (grid: GridView) => {
+                            const divisionIndex = 1;
+                            const dataSource = grid.getDataSource();
+                            const rowCount = dataSource.getRowCount();
+                            const uniqueValues = new Set<string>();
+                            for (let i = 0; i < rowCount; i++) {
+                                const divisionValue = dataSource.getValue(i, 'displayYear');
+                                if (divisionValue !== null && divisionValue !== undefined && divisionValue !== '') {
+                                    uniqueValues.add(String(divisionValue));
+                                }
                             }
+                            const divisionValues = Array.from(uniqueValues);
+                            if (divisionValues.length > divisionIndex) return divisionValues[divisionIndex] + ' 합계';
+                            return '합계';
                         }
-                        const divisionValues = Array.from(uniqueValues);
-                        if (divisionValues.length > divisionIndex) return divisionValues[divisionIndex] + ' 합계';
-                        return '합계';
                     }
-                }
-            ]
-        },
-        { name: 'sggNm',         fieldName: 'sggNm',         header: { text: '시군구' },   mergeCells: true, sortdisable: true },
-        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' },   mergeCells: true },
-        { name: 'impdFcltNm',    fieldName: 'impdFcltNm',    header: { text: '시설명' },   mergeCells: true, sortdisable: true },
-        { name: 'impdFcltPstnCn',fieldName: 'impdFcltPstnCn',header: { text: '위치' },     mergeCells: true, sortdisable: true },
-        {
-            name: 'displayYear',
-            fieldName: 'displayYear',
-            header: { text: '구분' },
-            sortdisable: true,
-            footer: [
-                {
-                    valueCallback: (grid: GridView) => {
-                        const divisionIndex = 0;
-                        const dataSource = grid.getDataSource();
-                        const rowCount = dataSource.getRowCount();
-                        const uniqueValues = new Set<string>();
-                        for (let i = 0; i < rowCount; i++) {
-                            const divisionValue = dataSource.getValue(i, 'displayYear');
-                            if (divisionValue !== null && divisionValue !== undefined && divisionValue !== '') {
-                                uniqueValues.add(String(divisionValue));
+                ]
+            },
+            { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, mergeCells: true, sortdisable: true },
+            { name: 'fcltNm', fieldName: 'fcltNm', header: { text: '시설명' }, mergeCells: true, sortdisable: true },
+            { name: 'fcltPstnCn', fieldName: 'fcltPstnCn', header: { text: '위치' }, mergeCells: true, sortdisable: true },
+            {
+                name: 'displayYear',
+                fieldName: 'displayYear',
+                header: { text: '구분' },
+                sortdisable: true,
+                footer: [
+                    {
+                        valueCallback: (grid: GridView) => {
+                            const divisionIndex = 0;
+                            const dataSource = grid.getDataSource();
+                            const rowCount = dataSource.getRowCount();
+                            const uniqueValues = new Set<string>();
+                            for (let i = 0; i < rowCount; i++) {
+                                const divisionValue = dataSource.getValue(i, 'displayYear');
+                                if (divisionValue !== null && divisionValue !== undefined && divisionValue !== '') {
+                                    uniqueValues.add(String(divisionValue));
+                                }
                             }
+                            const divisionValues = Array.from(uniqueValues);
+                            return divisionValues.length > divisionIndex ? divisionValues[divisionIndex] + ' 합계' : '';
                         }
-                        const divisionValues = Array.from(uniqueValues);
-                        return divisionValues.length > divisionIndex ? divisionValues[divisionIndex] + ' 합계' : '';
-                    }
-                },
-                {
-                    valueCallback: (grid: GridView) => {
-                        const divisionIndex = 1;
-                        const dataSource = grid.getDataSource();
-                        const rowCount = dataSource.getRowCount();
-                        const uniqueValues = new Set<string>();
-                        for (let i = 0; i < rowCount; i++) {
-                            const divisionValue = dataSource.getValue(i, 'displayYear');
-                            if (divisionValue !== null && divisionValue !== undefined && divisionValue !== '') {
-                                uniqueValues.add(String(divisionValue));
+                    },
+                    {
+                        valueCallback: (grid: GridView) => {
+                            const divisionIndex = 1;
+                            const dataSource = grid.getDataSource();
+                            const rowCount = dataSource.getRowCount();
+                            const uniqueValues = new Set<string>();
+                            for (let i = 0; i < rowCount; i++) {
+                                const divisionValue = dataSource.getValue(i, 'displayYear');
+                                if (divisionValue !== null && divisionValue !== undefined && divisionValue !== '') {
+                                    uniqueValues.add(String(divisionValue));
+                                }
                             }
+                            const divisionValues = Array.from(uniqueValues);
+                            return divisionValues.length > divisionIndex ? divisionValues[divisionIndex] + ' 합계' : '';
                         }
-                        const divisionValues = Array.from(uniqueValues);
-                        return divisionValues.length > divisionIndex ? divisionValues[divisionIndex] + ' 합계' : '';
                     }
-                }
-            ]
-        },
+                ]
+            },
 
-        /* 2. 시설 제원 */
-        { name: 'fcltyKndCn',       fieldName: 'fcltyKndCn',       header: { text: '시설물종류' } },
-        { name: 'oprtngStrtYmd',     fieldName: 'oprtngStrtYmd',     header: { text: '가동개시 년월일' } },
-        { name: 'planDesignFreqCnt', fieldName: 'planDesignFreqCnt', header: { text: '계획설계빈도' } },
-        { name: 'wtrStrgZoneArea',   fieldName: 'wtrStrgZoneArea',   header: { text: '집수구역면적(㎢)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.000', footer: footerDecimal3ArrayByDivision },
-        { name: 'rsvrYn',            fieldName: 'rsvrYn',            header: { text: '유수지유무\n(유,무)' } },
-        { name: 'rsvrImpndQnt',      fieldName: 'rsvrImpndQnt',      header: { text: '저류량(㎥)' },       valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
-        { name: 'abstnRgnImdQnt',    fieldName: 'abstnRgnImdQnt',    header: { text: '저류량(㎥)' },       valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
-        { name: 'fcltCpct',          fieldName: 'fcltCpct',          header: { text: '시설용량(㎥)' },     valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
+            /* 2. 시설 제원 */
+            { name: 'fcltyKndCn', fieldName: 'fcltyKndCn', header: { text: '시설물종류' } },
+            { name: 'oprtngStrtYmd', fieldName: 'oprtngStrtYmd', header: { text: '가동개시 년월일' } },
+            { name: 'planDesignFreqCnt', fieldName: 'planDesignFreqCnt', header: { text: '계획설계빈도' } },
+            { name: 'wtrStrgZoneArea', fieldName: 'wtrStrgZoneArea', header: { text: '집수구역면적(㎢)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.000', footer: footerDecimal3ArrayByDivision },
+            { name: 'rsvrYn', fieldName: 'rsvrYn', header: { text: '유수지유무\n(유,무)' } },
+            { name: 'rsvrImpndQnt', fieldName: 'rsvrImpndQnt', header: { text: '저류량(㎥)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
+            { name: 'abstnRgnImdQnt', fieldName: 'abstnRgnImdQnt', header: { text: '저류량(㎥)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
+            { name: 'fcltCpct', fieldName: 'fcltCpct', header: { text: '시설용량(㎥)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
 
-        /* 3. 펌프시설 */
-        { name: 'pumpFcltN1DmtrExpln',   fieldName: 'pumpFcltN1DmtrExpln',   header: { text: '구경(mm)' } },
-        { name: 'pumpFcltN1PerPpqty',    fieldName: 'pumpFcltN1PerPpqty',    header: { text: '대당 양수량' },  valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
-        { name: 'pumpFcltN1PumpCnt',     fieldName: 'pumpFcltN1PumpCnt',     header: { text: '펌프대수' },    valueType: ValueType.NUMBER, numberFormat: '#,##0',   footer: footerIntArrayByDivision },
-        { name: 'pumpFcltN1RsrvPumpCnt', fieldName: 'pumpFcltN1RsrvPumpCnt', header: { text: '예비펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0',   footer: footerIntArrayByDivision },
+            /* 3. 펌프시설 */
+            { name: 'pumpFcltN1DmtrExpln', fieldName: 'pumpFcltN1DmtrExpln', header: { text: '구경(mm)' } },
+            { name: 'pumpFcltN1PerPpqty', fieldName: 'pumpFcltN1PerPpqty', header: { text: '대당 양수량' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
+            { name: 'pumpFcltN1PumpCnt', fieldName: 'pumpFcltN1PumpCnt', header: { text: '펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
+            { name: 'pumpFcltN1RsrvPumpCnt', fieldName: 'pumpFcltN1RsrvPumpCnt', header: { text: '예비펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
 
-        { name: 'pumpFcltN2DmtrExpln',   fieldName: 'pumpFcltN2DmtrExpln',   header: { text: '구경(mm)' } },
-        { name: 'pumpFcltN2PerPpqty',    fieldName: 'pumpFcltN2PerPpqty',    header: { text: '대당 양수량' },  valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
-        { name: 'pumpFcltN2PumpCnt',     fieldName: 'pumpFcltN2PumpCnt',     header: { text: '펌프대수' },    valueType: ValueType.NUMBER, numberFormat: '#,##0',   footer: footerIntArrayByDivision },
-        { name: 'pumpFcltN2RsrvPumpCnt', fieldName: 'pumpFcltN2RsrvPumpCnt', header: { text: '예비펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0',   footer: footerIntArrayByDivision },
+            { name: 'pumpFcltN2DmtrExpln', fieldName: 'pumpFcltN2DmtrExpln', header: { text: '구경(mm)' } },
+            { name: 'pumpFcltN2PerPpqty', fieldName: 'pumpFcltN2PerPpqty', header: { text: '대당 양수량' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
+            { name: 'pumpFcltN2PumpCnt', fieldName: 'pumpFcltN2PumpCnt', header: { text: '펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
+            { name: 'pumpFcltN2RsrvPumpCnt', fieldName: 'pumpFcltN2RsrvPumpCnt', header: { text: '예비펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
 
-        { name: 'pumpFcltN3DmtrExpln',   fieldName: 'pumpFcltN3DmtrExpln',   header: { text: '구경(mm)' } },
-        { name: 'pumpFcltN3PerPpqty',    fieldName: 'pumpFcltN3PerPpqty',    header: { text: '대당 양수량' },  valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
-        { name: 'pumpFcltN3PumpCnt',     fieldName: 'pumpFcltN3PumpCnt',     header: { text: '펌프대수' },    valueType: ValueType.NUMBER, numberFormat: '#,##0',   footer: footerIntArrayByDivision },
-        { name: 'pumpFcltN3RsrvPumpCnt', fieldName: 'pumpFcltN3RsrvPumpCnt', header: { text: '예비펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0',   footer: footerIntArrayByDivision },
+            { name: 'pumpFcltN3DmtrExpln', fieldName: 'pumpFcltN3DmtrExpln', header: { text: '구경(mm)' } },
+            { name: 'pumpFcltN3PerPpqty', fieldName: 'pumpFcltN3PerPpqty', header: { text: '대당 양수량' }, valueType: ValueType.NUMBER, numberFormat: '#,##0.0', footer: footerDecimal1ArrayByDivision },
+            { name: 'pumpFcltN3PumpCnt', fieldName: 'pumpFcltN3PumpCnt', header: { text: '펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
+            { name: 'pumpFcltN3RsrvPumpCnt', fieldName: 'pumpFcltN3RsrvPumpCnt', header: { text: '예비펌프대수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
 
-        /* 4. 부대시설 */
-        { name: 'prcsgFcltYn',   fieldName: 'prcsgFcltYn',   header: { text: '전처리시설' } },
-        { name: 'ddrztnEqpmYn',  fieldName: 'ddrztnEqpmYn',  header: { text: '탈취설비' } },
-        { name: 'oslfEtgtYn',    fieldName: 'oslfEtgtYn',    header: { text: '자가발전' } },
-        { name: 'dschgWtrsExpln',fieldName: 'dschgWtrsExpln',header: { text: '방류수역' } },
+            /* 4. 부대시설 */
+            { name: 'prcsgFcltYn', fieldName: 'prcsgFcltYn', header: { text: '전처리시설' } },
+            { name: 'ddrztnEqpmYn', fieldName: 'ddrztnEqpmYn', header: { text: '탈취설비' } },
+            { name: 'oslfEtgtYn', fieldName: 'oslfEtgtYn', header: { text: '자가발전' } },
+            { name: 'dschgWtrsExpln', fieldName: 'dschgWtrsExpln', header: { text: '방류수역' } },
 
-        /* 5. 최종처분량 */
-        { name: 'prcptnLastDspsQnt', fieldName: 'prcptnLastDspsQnt', header: { text: '침사(량)' },   valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
-        { name: 'ctmnLastDspsQnt',   fieldName: 'ctmnLastDspsQnt',   header: { text: '협잡물(량)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
+            /* 5. 최종처분량 */
+            { name: 'prcptnLastDspsQnt', fieldName: 'prcptnLastDspsQnt', header: { text: '침사(량)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
+            { name: 'ctmnLastDspsQnt', fieldName: 'ctmnLastDspsQnt', header: { text: '협잡물(량)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
 
-        /* 6. 운영실적 */
-        { name: 'oprtngDayCnt', fieldName: 'oprtngDayCnt', header: { text: '가동일수' },       valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
-        { name: 'grssMltvQnt',  fieldName: 'grssMltvQnt',  header: { text: '총배수량(㎥/년)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
-        { name: 'rmrk',         fieldName: 'rmrk',         header: { text: '비고' } },
-    ],
-    columnLayout: [
-        {
-            name: 'areaGroup', header: { text: '행정구역' }, items: [
-                { column: 'ctpvNm', footerUserSpans: [{ colspan: 4 }, { colspan: 4 }] },
-                'sggNm', 'admdstNm',
-            ]
-        },
-        'displayYear', 'fcltyKndCn', 'oprtngStrtYmd', 'planDesignFreqCnt', 'wtrStrgZoneArea',
-        { name: 'revGroup', header: { text: '유수지' },  items: ['rsvrYn', 'rsvrImpndQnt'] },
-        { name: 'absGroup', header: { text: '흡수정' },  items: ['abstnRgnImdQnt'] },
-        'fcltCpct',
-        {
-            name: 'pumpMainGroup', header: { text: '펌프시설' },
-            items: [
-                { name: 'p1Group', header: { text: '펌프시설1' }, items: ['pumpFcltN1DmtrExpln', 'pumpFcltN1PerPpqty', 'pumpFcltN1PumpCnt', 'pumpFcltN1RsrvPumpCnt'] },
-                { name: 'p2Group', header: { text: '펌프시설2' }, items: ['pumpFcltN2DmtrExpln', 'pumpFcltN2PerPpqty', 'pumpFcltN2PumpCnt', 'pumpFcltN2RsrvPumpCnt'] },
-                { name: 'p3Group', header: { text: '펌프시설3' }, items: ['pumpFcltN3DmtrExpln', 'pumpFcltN3PerPpqty', 'pumpFcltN3PumpCnt', 'pumpFcltN3RsrvPumpCnt'] }
-            ]
-        },
-        { name: 'subFacGroup', header: { text: '부대시설' }, items: ['prcsgFcltYn', 'ddrztnEqpmYn', 'oslfEtgtYn'] },
-        'dschgWtrsExpln',
-        { name: 'disposalAmtGroup', header: { text: '최종처분량(ton/년)' }, items: ['prcptnLastDspsQnt', 'ctmnLastDspsQnt'] },
-        { name: 'opGroup',          header: { text: '운영실적' },           items: ['oprtngDayCnt', 'grssMltvQnt'] },
-        'rmrk'
-    ]
-}
+            /* 6. 운영실적 */
+            { name: 'oprtngDayCnt', fieldName: 'oprtngDayCnt', header: { text: '가동일수' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
+            { name: 'grssMltvQnt', fieldName: 'grssMltvQnt', header: { text: '총배수량(㎥/년)' }, valueType: ValueType.NUMBER, numberFormat: '#,##0', footer: footerIntArrayByDivision },
+            { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
+        ],
+        columnLayout: [
+            {
+                name: 'areaGroup', header: { text: '행정구역' }, items: [
+                    { column: 'ctpvNm', footerUserSpans: [{ colspan: 4 }, { colspan: 4 }] },
+                    'sggNm', 'fcltNm'
+                ]
+            },
+            'displayYear', 'fcltyKndCn', 'oprtngStrtYmd', 'planDesignFreqCnt', 'wtrStrgZoneArea',
+            { name: 'revGroup', header: { text: '유수지' }, items: ['rsvrYn', 'rsvrImpndQnt'] },
+            { name: 'absGroup', header: { text: '흡수정' }, items: ['abstnRgnImdQnt'] },
+            'fcltCpct',
+            {
+                name: 'pumpMainGroup', header: { text: '펌프시설' },
+                items: [
+                    { name: 'p1Group', header: { text: '펌프시설1' }, items: ['pumpFcltN1DmtrExpln', 'pumpFcltN1PerPpqty', 'pumpFcltN1PumpCnt', 'pumpFcltN1RsrvPumpCnt'] },
+                    { name: 'p2Group', header: { text: '펌프시설2' }, items: ['pumpFcltN2DmtrExpln', 'pumpFcltN2PerPpqty', 'pumpFcltN2PumpCnt', 'pumpFcltN2RsrvPumpCnt'] },
+                    { name: 'p3Group', header: { text: '펌프시설3' }, items: ['pumpFcltN3DmtrExpln', 'pumpFcltN3PerPpqty', 'pumpFcltN3PumpCnt', 'pumpFcltN3RsrvPumpCnt'] }
+                ]
+            },
+            { name: 'subFacGroup', header: { text: '부대시설' }, items: ['prcsgFcltYn', 'ddrztnEqpmYn', 'oslfEtgtYn'] },
+            'dschgWtrsExpln',
+            { name: 'disposalAmtGroup', header: { text: '최종처분량(ton/년)' }, items: ['prcptnLastDspsQnt', 'ctmnLastDspsQnt'] },
+            { name: 'opGroup', header: { text: '운영실적' }, items: ['oprtngDayCnt', 'grssMltvQnt'] },
+            'rmrk'
+        ]
+    }
 ];
 
 export const SewageReservoirPumpInfoListRvw = rawReservoirList.map(tab => ({
diff --git a/apps/st/src/components/util/column/review/SeweragePenetrationRateRvwColumn.ts b/apps/st/src/components/util/column/review/SeweragePenetrationRateRvwColumn.ts
index 25449c6cc..0cc8caae6 100644
--- a/apps/st/src/components/util/column/review/SeweragePenetrationRateRvwColumn.ts
+++ b/apps/st/src/components/util/column/review/SeweragePenetrationRateRvwColumn.ts
@@ -76,7 +76,7 @@ const rawSeweragePenetrationRateInfoList = {
                 }
             ]
         },
-        { name: 'wtsysNm', fieldName: 'rvbsn', header: { text: '수계' } },
+        { name: 'rvbsn', fieldName: 'rvbsn', header: { text: '수계' } },
         { name: 'trbtrNm', fieldName: 'trbtrNm', header: { text: '지류' } },
         { name: 'mdbsn', fieldName: 'mdbsn', header: { text: '세부단위유역' } },
         { name: 'lgbsn', fieldName: 'lgbsn', header: { text: '중권역' } },
@@ -117,7 +117,7 @@ const rawSeweragePenetrationRateInfoList = {
             ]
         },
         'displayYear',
-        'wtsysNm',
+        'rvbsn',
         'trbtrNm',
         {
             name: 'groupB',
diff --git a/apps/st/src/components/util/column/review/StatsInputStatusRvwColumn.ts b/apps/st/src/components/util/column/review/StatsInputStatusRvwColumn.ts
index 9f280338c..bb6f6d984 100644
--- a/apps/st/src/components/util/column/review/StatsInputStatusRvwColumn.ts
+++ b/apps/st/src/components/util/column/review/StatsInputStatusRvwColumn.ts
@@ -1,113 +1,43 @@
-import { ValueType } from "realgrid";
-
 /**
  * 하수도 통계 검토 00. 통계 입력 현황
  */
 const StatsInputStatusInfoColumnRaw = {
     columns: [
         // 기본 정보
-        { name: 'chk', fieldName: 'chk', header: { text: '체크' }, width: 40 },
-        { name: 'sido', fieldName: 'sido', header: { text: '시도' }, width: 80,mergeCells: true},
-        { name: 'gugun', fieldName: 'gugun', header: { text: '시군구' }, width: 100 },
-        { name: 'status', fieldName: 'status', header: { text: '진행상태' }, width: 120 },
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, },
+        { name: 'sewerBzmnCd', fieldName: 'sewerBzmnCd', header: { text: '사업자코드' }, visible: false },
+        { name: 'statsCd', fieldName: 'statsCd', header: { text: '메뉴코드' }, visible: false },
+        { name: 'tabNm', fieldName: 'tabNm', header: { text: '구분' }, width: 220 },
+        {
+            name: 'reviewHistory',
+            fieldName: 'reviewHistory',
+            header: { text: '검토이력' },
+            width: 118,
+            styleName: 'rg-cell-outline-action-btn',
+        },
 
-        // 01. 하수도보급율 (supply)
-        { name: 'supplyCharger', fieldName: 'supplyCharger', header: { text: '제출자' } },
-        { name: 'supplyCttpc', fieldName: 'supplyCttpc', header: { text: '연락처' } },
-        { name: 'supplyStatusNm', fieldName: 'supplyStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'supplyStatus', fieldName: 'supplyStatus', header: { text: '진행상태' } },
-        { name: 'supplyCnt', fieldName: 'supplyCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
-
-        // 02. 하수관로 (facility) - 기존 3번
-        { name: 'facilityCharger', fieldName: 'facilityCharger', header: { text: '제출자' } },
-        { name: 'facilityCttpc', fieldName: 'facilityCttpc', header: { text: '연락처' } },
-        { name: 'facilityStatusNm', fieldName: 'facilityStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'facilityStatus', fieldName: 'facilityStatus', header: { text: '진행상태' } },
-        { name: 'facilityCnt', fieldName: 'facilityCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
-
-        // 03. 하수관로유지관리 (pipe) - 기존 4번
-        { name: 'pipeCharger', fieldName: 'pipeCharger', header: { text: '제출자' } },
-        { name: 'pipeCttpc', fieldName: 'pipeCttpc', header: { text: '연락처' } },
-        { name: 'pipeStatusNm', fieldName: 'pipeStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'pipeCnt', fieldName: 'pipeCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
-
-        // 04. 하수저류시설 (storage) - 기존 5번
-        { name: 'storageCharger', fieldName: 'storageCharger', header: { text: '제출자' } },
-        { name: 'storageCttpc', fieldName: 'storageCttpc', header: { text: '연락처' } },
-        { name: 'storageStatusNm', fieldName: 'storageStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'storageCnt', fieldName: 'storageCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
-
-        // 05. 펌프장 (pump) - 기존 6번
-        { name: 'pumpCharger', fieldName: 'pumpCharger', header: { text: '제출자' } },
-        { name: 'pumpCttpc', fieldName: 'pumpCttpc', header: { text: '연락처' } },
-        { name: 'pumpStatusNm', fieldName: 'pumpStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'pumpCnt', fieldName: 'pumpCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
-
-        // 06. 공공하수처리시설 (treat) - 기존 7번
-        { name: 'treatCharger', fieldName: 'treatCharger', header: { text: '제출자' } },
-        { name: 'treatCttpc', fieldName: 'treatCttpc', header: { text: '연락처' } },
-        { name: 'treatStatusNm', fieldName: 'treatStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'treatCnt', fieldName: 'treatCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
-
-        // 07. 분뇨처리시설 (small) - 기존 8번
-        { name: 'smallCharger', fieldName: 'smallCharger', header: { text: '제출자' } },
-        { name: 'smallCttpc', fieldName: 'smallCttpc', header: { text: '연락처' } },
-        { name: 'smallStatusNm', fieldName: 'smallStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'smallCnt', fieldName: 'smallCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
-
-        // 08. 개인하수처리시설 (private) - 기존 9번
-        { name: 'privateCharger', fieldName: 'privateCharger', header: { text: '제출자' } },
-        { name: 'privateCttpc', fieldName: 'privateCttpc', header: { text: '연락처' } },
-        { name: 'privateStatusNm', fieldName: 'privateStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'privateCnt', fieldName: 'privateCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
-
-        // 09. 하수도재정 (finance) - 기존 10번
-        { name: 'financeCharger', fieldName: 'financeCharger', header: { text: '제출자' } },
-        { name: 'financeCttpc', fieldName: 'financeCttpc', header: { text: '연락처' } },
-        { name: 'financeStatusNm', fieldName: 'financeStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'financeCnt', fieldName: 'financeCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
-
-        // 10. 물재이용 (reuse) - 기존 11번
-        { name: 'reuseCharger', fieldName: 'reuseCharger', header: { text: '제출자' } },
-        { name: 'reuseCttpc', fieldName: 'reuseCttpc', header: { text: '연락처' } },
-        { name: 'reuseStatusNm', fieldName: 'reuseStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'reuseCnt', fieldName: 'reuseCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
-
-        // 11. 하수및분뇨찌꺼기 (sludge) - 기존 12번
-        { name: 'sludgeCharger', fieldName: 'sludgeCharger', header: { text: '제출자' } },
-        { name: 'sludgeCttpc', fieldName: 'sludgeCttpc', header: { text: '연락처' } },
-        { name: 'sludgeStatusNm', fieldName: 'sludgeStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'sludgeCnt', fieldName: 'sludgeCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
-
-        // 12. 하수및분뇨관련산업 (excreta) - 기존 13번
-        { name: 'excretaCharger', fieldName: 'excretaCharger', header: { text: '제출자' } },
-        { name: 'excretaCttpc', fieldName: 'excretaCttpc', header: { text: '연락처' } },
-        { name: 'excretaStatusNm', fieldName: 'excretaStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'excretaCnt', fieldName: 'excretaCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
-
-        // 13. 하수도서비스수준 (complaint) - 기존 15번
-        { name: 'complaintCharger', fieldName: 'complaintCharger', header: { text: '제출자' } },
-        { name: 'complaintCttpc', fieldName: 'complaintCttpc', header: { text: '연락처' } },
-        { name: 'complaintStatusNm', fieldName: 'complaintStatusNm', header: { text: '지자체진행상태' } },
-        { name: 'complaintCnt', fieldName: 'complaintCnt', header: { text: '건수' }, valueType: ValueType.NUMBER },
+        { name: 'chargerNm', fieldName: 'chargerNm', header: { text: '제출자' } },
+        { name: 'chargerCttpc', fieldName: 'chargerCttpc', header: { text: '연락처' } },
+        { name: 'submitStatusNm', fieldName: 'submitStatusNm', header: { text: '지자체진행상태' } },
+        { name: 'submitStatusCd', fieldName: 'submitStatusCd', header: { text: '지자체진행상태코드' }, visible: false },
+        { name: 'prvnStatusNm', fieldName: 'prvnStatusNm', header: { text: '진행상태' } },
+        { name: 'prvnStatusCd', fieldName: 'prvnStatusCd', header: { text: '진행상태코드' }, visible: false },
     ],
 
     columnLayout: [
-        { name: 'addrGroup', header: { text: '구분' }, items: ['sido', 'gugun'] },
-        'status',
-        { name: 'group01', header: { text: '01. 하수도보급율' }, items: ['supplyCharger', 'supplyCttpc', 'supplyStatusNm', 'supplyStatus', 'supplyCnt'] },
-        { name: 'group02', header: { text: '02. 하수관로' }, items: ['facilityCharger', 'facilityCttpc', 'facilityStatusNm', 'facilityStatus', 'facilityCnt'] },
-        { name: 'group03', header: { text: '03. 하수관로유지관리' }, items: ['pipeCharger', 'pipeCttpc', 'pipeStatusNm', 'pipeCnt'] },
-        { name: 'group04', header: { text: '04. 하수저류시설' }, items: ['storageCharger', 'storageCttpc', 'storageStatusNm', 'storageCnt'] },
-        { name: 'group05', header: { text: '05. 펌프장' }, items: ['pumpCharger', 'pumpCttpc', 'pumpStatusNm', 'pumpCnt'] },
-        { name: 'group06', header: { text: '06. 공공하수처리시설' }, items: ['treatCharger', 'treatCttpc', 'treatStatusNm', 'treatCnt'] },
-        { name: 'group07', header: { text: '07. 분뇨처리시설' }, items: ['smallCharger', 'smallCttpc', 'smallStatusNm', 'smallCnt'] },
-        { name: 'group08', header: { text: '08. 개인하수처리시설' }, items: ['privateCharger', 'privateCttpc', 'privateStatusNm', 'privateCnt'] },
-        { name: 'group09', header: { text: '09. 하수도재정' }, items: ['financeCharger', 'financeCttpc', 'financeStatusNm', 'financeCnt'] },
-        { name: 'group10', header: { text: '10. 물재이용' }, items: ['reuseCharger', 'reuseCttpc', 'reuseStatusNm', 'reuseCnt'] },
-        { name: 'group11', header: { text: '11. 하수및분뇨찌꺼기' }, items: ['sludgeCharger', 'sludgeCttpc', 'sludgeStatusNm', 'sludgeCnt'] },
-        { name: 'group12', header: { text: '12. 하수및분뇨관련산업' }, items: ['excretaCharger', 'excretaCttpc', 'excretaStatusNm', 'excretaCnt'] },
-        { name: 'group13', header: { text: '13. 하수도서비스수준' }, items: ['complaintCharger', 'complaintCttpc', 'complaintStatusNm', 'complaintCnt'] }
+        'ctpvNm', 
+        'sggNm',
+        'tabNm',
+        'reviewHistory',
+        'chargerNm', 
+        'chargerCttpc', 
+        'submitStatusNm',
+        'prvnStatusNm', 
+        'statsCd',
+        'sewerBzmnCd',
+        'submitStatusCd',
+        'prvnStatusCd'
     ]
 };
 
@@ -116,6 +46,5 @@ export const StatsInputStatusInfoList = {
     columns: StatsInputStatusInfoColumnRaw.columns.map(col => ({
         ...col,
         editable: false,
-        styleName: "rg-cell-readonly"
     }))
 };
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/PublicSewageFacilityColumn.ts b/apps/st/src/components/util/column/total/PublicSewageFacilityColumn.ts
new file mode 100644
index 000000000..f4c0ddae2
--- /dev/null
+++ b/apps/st/src/components/util/column/total/PublicSewageFacilityColumn.ts
@@ -0,0 +1,298 @@
+import { ValueType } from "realgrid";
+/**
+ * 하수도 통계 관리 > 06. 공공하수처리시설
+ * 단일 Tab
+ */
+export const PublicSewageFacilityColumn = {
+    columns: [
+        // 행정구역
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, editable: false },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구' }, editable: false },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, editable: false },
+
+        // 시설명 (500㎥/일 이상/미만)
+        { name: 'swtrmtFcltNm', fieldName: 'swtrmtFcltNm', header: { text: '시설명\n(500㎥/일\n이상/미만)' }, editable: false },
+
+        // 소재지
+        { name: 'fcltPstnCn', fieldName: 'fcltPstnCn', header: { text: '소재지' }, editable: false },
+
+        // 시설용량 (㎥/일)
+        {
+            name: 'prcsFcltCpct',
+            fieldName: 'prcsFcltCpct',
+            header: { text: ' 시설용량 500㎥/일\n이상/미만' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+        },
+        {
+            name: 'prcsFcltPhysCpct',
+            fieldName: 'prcsFcltPhysCpct',
+            header: { text: '물리적' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+        },
+        {
+            name: 'prcsFcltBoilCpct',
+            fieldName: 'prcsFcltBoilCpct',
+            header: { text: '생물학적' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+        },
+        {
+            name: 'prcsFcltAltdCpct',
+            fieldName: 'prcsFcltAltdCpct',
+            header: { text: '고도' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+        },
+
+        // 유입하수량 (㎥/일)
+        {
+            name: 'inflwSwageQnt',
+            fieldName: 'inflwSwageQnt',
+            header: { text: '유입하수량 500㎥/일\n이상/미만' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+        },
+        {
+            name: 'inflwSwagePhysQnt',
+            fieldName: 'inflwSwagePhysQnt',
+            header: { text: '물리적' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+        },
+        {
+            name: 'inflwSwageBoilQnt',
+            fieldName: 'inflwSwageBoilQnt',
+            header: { text: '생물학적' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+        },
+        {
+            name: 'inflwSwageAltdQnt',
+            fieldName: 'inflwSwageAltdQnt',
+            header: { text: '고도' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+        },
+
+        // 방류량 (㎥/일)
+        {
+            name: 'prcsQnt',
+            fieldName: 'prcsQnt',
+            header: { text: '방류량 500㎥/일\n이상/미만' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+        },
+        {
+            name: 'prcsPhysCpct',
+            fieldName: 'prcsPhysCpct',
+            header: { text: '물리적' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+        },
+        {
+            name: 'prcsBoilCpct',
+            fieldName: 'prcsBoilCpct',
+            header: { text: '생물학적' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+        },
+        {
+            name: 'prcsAltdCpct',
+            fieldName: 'prcsAltdCpct',
+            header: { text: '고도' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.00',
+        },
+
+        // 수질 정보 - 유입/방류 교차
+        { name: 'inflwBodVl', fieldName: 'inflwBodVl', header: { text: '유입\nBOD' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'dschgBodVl', fieldName: 'dschgBodVl', header: { text: '방류\nBOD' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'inflwTocQnt', fieldName: 'inflwTocQnt', header: { text: '유입\nTOC' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'dschgTocQnt', fieldName: 'dschgTocQnt', header: { text: '방류\nTOC' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'inflwSsQnt', fieldName: 'inflwSsQnt', header: { text: '유입\nSS' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'dschgSsQnt', fieldName: 'dschgSsQnt', header: { text: '방류\nSS' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'inflwTnVl', fieldName: 'inflwTnVl', header: { text: '유입\nT-N' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'dschgTnVl', fieldName: 'dschgTnVl', header: { text: '방류\nT-N' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'inflwTpVl', fieldName: 'inflwTpVl', header: { text: '유입\nT-P' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'dschgTpVl', fieldName: 'dschgTpVl', header: { text: '방류\nT-P' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'inflwGrssClfgVl', fieldName: 'inflwGrssClfgVl', header: { text: '유입\n총대장균군수' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+        { name: 'dschgGrssClfgVl', fieldName: 'dschgGrssClfgVl', header: { text: '방류\n총대장균군수' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+
+        // 처리 효율 및 방법
+        {
+            name: 'prcsRt',
+            fieldName: 'prcsRt',
+            header: { text: '처리\n효율(%)' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+        },
+        {
+            name: 'prcsLodQnt',
+            fieldName: 'prcsLodQnt',
+            header: { text: '처리부하량\n(kg BOD/D)' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0',
+        },
+        { name: 'prcsMthdExpln', fieldName: 'prcsMthdExpln', header: { text: '처리\n방법' }, editable: false },
+
+        // 연계처리량 (㎥/일)
+        { name: 'wholHmnQnt', fieldName: 'wholHmnQnt', header: { text: '분뇨' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'wholLvstQnt', fieldName: 'wholLvstQnt', header: { text: '축산' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'wholEfntQnt', fieldName: 'wholEfntQnt', header: { text: '침출수' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'wholEtcQnt', fieldName: 'wholEtcQnt', header: { text: '기타' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+
+        // 부가 정보
+        { name: 'telNo', fieldName: 'telNo', header: { text: '전화번호' }, editable: false },
+        { name: 'cmptnStrtYmd', fieldName: 'cmptnStrtYmd', header: { text: '준공일' }, editable: false },
+        { name: 'oprtngStrtYmd', fieldName: 'oprtngStrtYmd', header: { text: '가동개시일' }, editable: false },
+        { name: 'wholBizVl', fieldName: 'wholBizVl', header: { text: '사업비\n(백만원)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        { name: 'eflntDsnfMthdExpln', fieldName: 'eflntDsnfMthdExpln', header: { text: '방류수\n소독방법' }, editable: false },
+
+        // 방류수역 정보
+        { name: 'wtsysNm', fieldName: 'wtsysNm', header: { text: '수계' }, editable: false },
+        { name: 'trbtrNm', fieldName: 'trbtrNm', header: { text: '지류' }, editable: false },
+        { name: 'dtlUnitZoneCn', fieldName: 'dtlUnitZoneCn', header: { text: '세부단위구역' }, editable: false },
+        { name: 'rgnSeNm', fieldName: 'rgnSeNm', header: { text: '지역구분' }, editable: false },
+
+        // 중권역
+        { name: 'msirbCn', fieldName: 'msirbCn', header: { text: '명칭' }, editable: false },
+        { name: 'goalWqNo', fieldName: 'goalWqNo', header: { text: '목표수질\n(BOD)' }, editable: false },
+
+        // 에너지
+        { name: 'engySrlneRt', fieldName: 'engySrlneRt', header: { text: '에너지\n자립율(%)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'engyItslfPrdctnQnt', fieldName: 'engyItslfPrdctnQnt', header: { text: '에너지\n자체생산량\n(TOE)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        { name: 'anlEngyWholUseQnt', fieldName: 'anlEngyWholUseQnt', header: { text: '계(TOE)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        { name: 'anlElpwrUseQnt', fieldName: 'anlElpwrUseQnt', header: { text: '총전력사용량\n(kWh)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        { name: 'itslfEngyUseQnt', fieldName: 'itslfEngyUseQnt', header: { text: '자체에너지\n사용량(TOE)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        { name: 'swtrmtEmsnQnt', fieldName: 'swtrmtEmsnQnt', header: { text: '하수처리량당\nCO2배출량\n(㎏CO2/㎥)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000' },
+
+        // 운영주체
+        { name: 'operMnbdCn', fieldName: 'operMnbdCn', header: { text: '운영주체\n(자체/공기업/\n민간대행)' }, editable: false },
+
+        // 위탁현황
+        { name: 'prxyBzentyNmCn', fieldName: 'prxyBzentyNmCn', header: { text: '위탁\n업체명' }, editable: false },
+        { name: 'cnsgnCstVl', fieldName: 'cnsgnCstVl', header: { text: '위탁비용\n(백만원/년)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        { name: 'prxyCtrtCn', fieldName: 'prxyCtrtCn', header: { text: '위탁계약기간\n(yyyy-mm-dd\n~\nyyyy-mm-dd)' }, editable: false },
+        { name: 'intgPrcsFcltCn', fieldName: 'intgPrcsFcltCn', header: { text: '중심처리시설' }, editable: false },
+        { name: 'wholNope', fieldName: 'wholNope', header: { text: '직원총수\n(명)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'sftyAcdntEvntcsCnt', fieldName: 'sftyAcdntEvntcsCnt', header: { text: '안전사고건수' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+
+        // hidden
+        { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정구역코드' }, visible: false },
+        { name: 'rowType', fieldName: 'rowType', header: { text: '데이터구분' }, visible: false },
+        { name: 'statsYr', fieldName: 'statsYr', header: { text: '통계연도' }, visible: false },
+    ].map((col) => ({ ...col, editable: false })),
+
+    columnLayout: [
+        {
+            name: 'groupA',
+            hideChildHeaders: false,
+            header: { text: '행정구역' },
+            items: ['ctpvNm', 'sggNm', 'admdstNm'],
+        },
+        'swtrmtFcltNm',
+        'fcltPstnCn',
+        'prcsFcltCpct',
+        {
+            name: 'groupCapacity',
+            hideChildHeaders: false,
+            header: { text: '(㎥/일)' },
+            items: [ 'prcsFcltPhysCpct', 'prcsFcltBoilCpct', 'prcsFcltAltdCpct'],
+        },
+        'inflwSwageQnt',
+        {
+            name: 'groupInflw',
+            hideChildHeaders: false,
+            header: { text: '(㎥/일)' },
+            items: [ 'inflwSwagePhysQnt', 'inflwSwageBoilQnt', 'inflwSwageAltdQnt'],
+        },
+        'prcsQnt',
+        {
+            name: 'groupPrcs',
+            hideChildHeaders: false,
+            header: { text: '(㎥/일)' },
+            items: [ 'prcsPhysCpct', 'prcsBoilCpct', 'prcsAltdCpct'],
+        },
+        'inflwBodVl',
+        'dschgBodVl',
+        'inflwTocQnt',
+        'dschgTocQnt',
+        'inflwSsQnt',
+        'dschgSsQnt',
+        'inflwTnVl',
+        'dschgTnVl',
+        'inflwTpVl',
+        'dschgTpVl',
+        'inflwGrssClfgVl',
+        'dschgGrssClfgVl',
+        'prcsRt',
+        'prcsLodQnt',
+        'prcsMthdExpln',
+        {
+            name: 'groupLinkPrcs',
+            hideChildHeaders: false,
+            header: { text: '연계처리량(㎥/일)\n(500㎥/일 이상/미만)' },
+            items: ['wholHmnQnt', 'wholLvstQnt', 'wholEfntQnt', 'wholEtcQnt'],
+        },
+        'telNo',
+        'cmptnStrtYmd',
+        'oprtngStrtYmd',
+        'wholBizVl',
+        'eflntDsnfMthdExpln',
+        {
+            name: 'groupDschgWater',
+            hideChildHeaders: false,
+            header: { text: '방류수역' },
+            items: [
+                'wtsysNm',
+                'trbtrNm',
+                'dtlUnitZoneCn',
+                'rgnSeNm',
+                {
+                    name: 'groupMsirbCn',
+                    hideChildHeaders: false,
+                    header: { text: '중권역' },
+                    items: ['msirbCn', 'goalWqNo'],
+                },
+            ],
+        },
+        'engySrlneRt',
+        'engyItslfPrdctnQnt',
+        {
+            name: 'groupEngyUse',
+            hideChildHeaders: false,
+            header: { text: '연간 총 에너지 사용량(TOE)' },
+            items: ['anlEngyWholUseQnt', 'anlElpwrUseQnt', 'itslfEngyUseQnt'],
+        },
+        'swtrmtEmsnQnt',
+        'operMnbdCn',
+        {
+            name: 'groupCnsgn',
+            hideChildHeaders: false,
+            header: { text: '위탁현황' },
+            items: ['prxyBzentyNmCn', 'cnsgnCstVl', 'prxyCtrtCn'],
+        },
+        'intgPrcsFcltCn',
+        'wholNope',
+        'sftyAcdntEvntcsCnt',
+        'admdstCd',
+        'rowType',
+        'statsYr',
+    ],
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/SewagePipeTotColumn.ts b/apps/st/src/components/util/column/total/SewagePipeTotColumn.ts
new file mode 100644
index 000000000..0cf31e2b1
--- /dev/null
+++ b/apps/st/src/components/util/column/total/SewagePipeTotColumn.ts
@@ -0,0 +1,1005 @@
+import { ValueType } from "realgrid";
+
+import type { ColumnInfoList } from "@/components/type/DataGrid.type";
+
+/**
+ * 하수도 통계 관리 > 02. 하수관로 (합계)
+ * 항목은 검토(SewagePipeRvwColumn)와 동일하나 footer·mergeCells·구분(displayYear)·비고(rmrk) 제외.
+ * 표시 형식은 SeweragePentrationRateTotColumn과 같이 dataFormat + editable: false.
+ */
+
+/** ST00020003 관종별: 입력 `SeweragePipeInputPipeTypeStatusItem`·합계 `SewagePipePipeTypeFacilityStatusItem`과 동일 (yy1=1996년 이전 … yy30) */
+// const YY_PIPE_TYPE_FACILITY_MAX = 30;
+
+const rawSewagePipeTotList = [
+    {
+        tabKey: "ST00020001",
+        tabLabel: "지역별 시설현황",
+        rowStartNum: 4,
+        fixedColumns: 2,
+        columns: [
+            { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+            { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+            { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+            { name: "goalYr", fieldName: "goalYr", header: { text: "하수정보기본계획목표년도" }, editable: false },
+            {
+                name: "wholPplMtncPlanPrlg",
+                fieldName: "wholPplMtncPlanPrlg",
+                header: { text: "총관로정비\n계획연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "wholPlanPrlg",
+                fieldName: "wholPlanPrlg",
+                header: { text: "총계획연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "wholFcltPrlg",
+                fieldName: "wholFcltPrlg",
+                header: { text: "총시설연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "swagePplPsplyRt",
+                fieldName: "swagePplPsplyRt",
+                header: { text: "하수관로\n보급률(%)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "cbsysPplMtncPlanArea",
+                fieldName: "cbsysPplMtncPlanArea",
+                header: { text: "관로정비\n계획면적(㎢)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.000",
+                editable: false,
+            },
+            {
+                name: "cbsysPplMtncPlanPrlg",
+                fieldName: "cbsysPplMtncPlanPrlg",
+                header: { text: "관로정비\n계획연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "cbsysPlanPrlg",
+                fieldName: "cbsysPlanPrlg",
+                header: { text: "계획연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "cbsysFcltPrlg",
+                fieldName: "cbsysFcltPrlg",
+                header: { text: "시설연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "cbsysSqrePrlg",
+                fieldName: "cbsysSqrePrlg",
+                header: { text: "사각형(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "cbsysCiclPrlg",
+                fieldName: "cbsysCiclPrlg",
+                header: { text: "원형(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "cbsysOpnPrlg",
+                fieldName: "cbsysOpnPrlg",
+                header: { text: "개거(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "cbsysGttrPrlg",
+                fieldName: "cbsysGttrPrlg",
+                header: { text: "측구(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "drtwPplMtncPlanArea",
+                fieldName: "drtwPplMtncPlanArea",
+                header: { text: "관로정비\n계획면적(㎢)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.000",
+                editable: false,
+            },
+            {
+                name: "drtwPplMtncPlanPrlg",
+                fieldName: "drtwPplMtncPlanPrlg",
+                header: { text: "관로정비\n계획연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "drtwPplPlanPrlg",
+                fieldName: "drtwPplPlanPrlg",
+                header: { text: "계획연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "drtwPplFcltPrlg",
+                fieldName: "drtwPplFcltPrlg",
+                header: { text: "시설연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "drtwPplSqrePrlg",
+                fieldName: "drtwPplSqrePrlg",
+                header: { text: "사각형(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "drtwPplCiclPrlg",
+                fieldName: "drtwPplCiclPrlg",
+                header: { text: "원형(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "exlnPplMtncPlanArea",
+                fieldName: "exlnPplMtncPlanArea",
+                header: { text: "관로정비\n계획면적(㎢)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.000",
+                editable: false,
+            },
+            {
+                name: "exlnPplMtncPlanPrlg",
+                fieldName: "exlnPplMtncPlanPrlg",
+                header: { text: "관로정비\n계획연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "exlnPplPlanPrlg",
+                fieldName: "exlnPplPlanPrlg",
+                header: { text: "계획연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "exlnPplFcltPrlg",
+                fieldName: "exlnPplFcltPrlg",
+                header: { text: "시설연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "exlnPplSqrePrlg",
+                fieldName: "exlnPplSqrePrlg",
+                header: { text: "사각형(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "exlnPplCiclPrlg",
+                fieldName: "exlnPplCiclPrlg",
+                header: { text: "원형(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "exlnPplOpnPrlg",
+                fieldName: "exlnPplOpnPrlg",
+                header: { text: "개거(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "exlnPplGttrPrlg",
+                fieldName: "exlnPplGttrPrlg",
+                header: { text: "측구(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "cbsysMnhlCnt",
+                fieldName: "cbsysMnhlCnt",
+                header: { text: "합류식맨홀(개소)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "sprsysDrtwMnhlCnt",
+                fieldName: "sprsysDrtwMnhlCnt",
+                header: { text: "오수맨홀(개소)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "sprsysExlnMnhlCnt",
+                fieldName: "sprsysExlnMnhlCnt",
+                header: { text: "우수맨홀(개소)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "drtwRcvprpCnt",
+                fieldName: "drtwRcvprpCnt",
+                header: { text: "오수받이(개소)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "exlnRcvprpCnt",
+                fieldName: "exlnRcvprpCnt",
+                header: { text: "우수받이(개소)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "stofcbrCnt",
+                fieldName: "stofcbrCnt",
+                header: { text: "우수토실(개소)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "exlnOtflCnt",
+                fieldName: "exlnOtflCnt",
+                header: { text: "우수토구(개소)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "sewerLdgrEdpPrlg",
+                fieldName: "sewerLdgrEdpPrlg",
+                header: { text: "하수도대장전산화연장(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "sewerLdgrEdpRt",
+                fieldName: "sewerLdgrEdpRt",
+                header: { text: "하수도대장전산화율(%)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.0",
+                editable: false,
+            },
+        ],
+        columnLayout: [
+            {
+                name: "areaGroup",
+                header: { text: "행정구역" },
+                items: ["ctpvNm", "sggNm", "admdstNm"],
+            },
+            "goalYr",
+            "wholPplMtncPlanPrlg",
+            "wholPlanPrlg",
+            "wholFcltPrlg",
+            "swagePplPsplyRt",
+            {
+                name: "combinedGroup",
+                header: { text: "합류식(m)" },
+                items: [
+                    "cbsysPplMtncPlanArea",
+                    "cbsysPplMtncPlanPrlg",
+                    "cbsysPlanPrlg",
+                    "cbsysFcltPrlg",
+                    { name: "cmbnAmGroup", header: { text: "암거" }, items: ["cbsysSqrePrlg", "cbsysCiclPrlg"] },
+                    "cbsysOpnPrlg",
+                    "cbsysGttrPrlg",
+                ],
+            },
+            {
+                name: "sepGroup",
+                header: { text: "분류식(m)" },
+                items: [
+                    {
+                        name: "foulPipeGroup",
+                        header: { text: "오수관로" },
+                        items: [
+                            "drtwPplMtncPlanArea",
+                            "drtwPplMtncPlanPrlg",
+                            "drtwPplPlanPrlg",
+                            "drtwPplFcltPrlg",
+                            { name: "foulAmGroup", header: { text: "암거" }, items: ["drtwPplSqrePrlg", "drtwPplCiclPrlg"] },
+                        ],
+                    },
+                    {
+                        name: "rainPipeGroup",
+                        header: { text: "우수관로" },
+                        items: [
+                            "exlnPplMtncPlanArea",
+                            "exlnPplMtncPlanPrlg",
+                            "exlnPplPlanPrlg",
+                            "exlnPplFcltPrlg",
+                            { name: "rainAmGroup", header: { text: "암거" }, items: ["exlnPplSqrePrlg", "exlnPplCiclPrlg"] },
+                            "exlnPplOpnPrlg",
+                            "exlnPplGttrPrlg",
+                        ],
+                    },
+                ],
+            },
+            "cbsysMnhlCnt",
+            { name: "fcltyGroup", header: { text: "분류식" }, items: ["sprsysDrtwMnhlCnt", "sprsysExlnMnhlCnt"] },
+            "drtwRcvprpCnt",
+            "exlnRcvprpCnt",
+            "stofcbrCnt",
+            "exlnOtflCnt",
+            "sewerLdgrEdpPrlg",
+            "sewerLdgrEdpRt",
+        ],
+    },
+
+    {
+        tabKey: "ST00020002",
+        tabLabel: "시설별 설치현황",
+        rowStartNum: 4,
+        fixedColumns: 3,
+        columns: [
+            { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+            { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+            { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+            { name: "swtrmtFcltNm", fieldName: "swtrmtFcltNm", header: { text: "하수처리시설 명" }, editable: false },
+            {
+                name: "prcsFcltCpct",
+                fieldName: "prcsFcltCpct",
+                header: { text: "하수처리\n시설용량\n(㎥/일)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.0",
+                editable: false,
+            },
+            {
+                name: "prcsZoneArea",
+                fieldName: "prcsZoneArea",
+                header: { text: "합계" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.000",
+                editable: false,
+            },
+            {
+                name: "cbsysPrcsZoneArea",
+                fieldName: "cbsysPrcsZoneArea",
+                header: { text: "합류식" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.000",
+                editable: false,
+            },
+            {
+                name: "sprsysPrcsZoneArea",
+                fieldName: "sprsysPrcsZoneArea",
+                header: { text: "분류식" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.000",
+                editable: false,
+            },
+            {
+                name: "sprsysVartnRt",
+                fieldName: "sprsysVartnRt",
+                header: { text: "분류식화율" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.000",
+                editable: false,
+            },
+            {
+                name: "mltvEqpmCnt",
+                fieldName: "mltvEqpmCnt",
+                header: { text: "합계" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "cbsysMltvEqpmCnt",
+                fieldName: "cbsysMltvEqpmCnt",
+                header: { text: "합류식" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "sprsysMltvEqpmCnt",
+                fieldName: "sprsysMltvEqpmCnt",
+                header: { text: "합계" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "sprsysMltvLnkgCnt",
+                fieldName: "sprsysMltvLnkgCnt",
+                header: { text: "연결" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "sprsysMltvYetLnkgCnt",
+                fieldName: "sprsysMltvYetLnkgCnt",
+                header: { text: "미연결" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "wholFcltPrlg",
+                fieldName: "wholFcltPrlg",
+                header: { text: "총\n시설연장\n(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "wholIcptgAtlfcPrlg",
+                fieldName: "wholIcptgAtlfcPrlg",
+                header: { text: "합계" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "icptgPrlg",
+                fieldName: "icptgPrlg",
+                header: { text: "차집" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "atlfcsPrlg",
+                fieldName: "atlfcsPrlg",
+                header: { text: "오수간선" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "cbsysStofcbrCnt",
+                fieldName: "cbsysStofcbrCnt",
+                header: { text: "우수토실(합류)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "sprsysStofcbrCnt",
+                fieldName: "sprsysStofcbrCnt",
+                header: { text: "우수토실(분류)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "sprsysExlnOtflCnt",
+                fieldName: "sprsysExlnOtflCnt",
+                header: { text: "우수토구(분류)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0",
+                editable: false,
+            },
+            {
+                name: "wholBrchlnPrlg",
+                fieldName: "wholBrchlnPrlg",
+                header: { text: "합계" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "cbsysBrchlnPrlg",
+                fieldName: "cbsysBrchlnPrlg",
+                header: { text: "합류식" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "exlnBrchlnPrlg",
+                fieldName: "exlnBrchlnPrlg",
+                header: { text: "우수" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+            {
+                name: "drtwBrchlnPrlg",
+                fieldName: "drtwBrchlnPrlg",
+                header: { text: "오수" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.00",
+                editable: false,
+            },
+        ],
+        columnLayout: [
+            {
+                name: "addrGroup",
+                header: { text: "행정구역" },
+                items: ["ctpvNm", "sggNm", "admdstNm"],
+            },
+            "swtrmtFcltNm",
+            "prcsFcltCpct",
+            {
+                name: "areaGroup",
+                header: { text: "처리구역면적(㎢)" },
+                items: ["prcsZoneArea", "cbsysPrcsZoneArea", "sprsysPrcsZoneArea"],
+            },
+            "sprsysVartnRt",
+            {
+                name: "drainGroup",
+                header: { text: "배수설비(개소)" },
+                items: [
+                    "mltvEqpmCnt",
+                    "cbsysMltvEqpmCnt",
+                    {
+                        name: "sprsysGroup",
+                        header: { text: "분류식" },
+                        items: [
+                            "sprsysMltvEqpmCnt", "sprsysMltvLnkgCnt", "sprsysMltvYetLnkgCnt"
+                        ]
+                    }
+                ],
+            },
+            {
+                name: "pipeGroup",
+                header: { text: "하수관로" },
+                items: [
+                    "wholFcltPrlg",
+                    {
+                        name: "trunkGroup",
+                        header: { text: "차집/오수간선(m)" },
+                        items: ["wholIcptgAtlfcPrlg", "icptgPrlg", "atlfcsPrlg"],
+                    },
+                    {
+                        name: "siteGroup",
+                        header: { text: "토실/토구(개소)" },
+                        items: [
+                            { name: "cmbnSiteGroup", header: { text: "합류식" }, items: ["cbsysStofcbrCnt"] },
+                            { name: "sepSiteGroup", header: { text: "분류식" }, items: ["sprsysStofcbrCnt", "sprsysExlnOtflCnt"] },
+                        ],
+                    },
+                    {
+                        name: "branchGroup",
+                        header: { text: "지선(m)" },
+                        items: [
+                            "wholBrchlnPrlg",
+                            "cbsysBrchlnPrlg",
+                            { name: "sepBranchGroup", header: { text: "분류식" }, items: ["exlnBrchlnPrlg", "drtwBrchlnPrlg"] },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        tabKey: "ST00020004",
+        tabLabel: "관경별 현황",
+        rowStartNum: 2,
+        fixedColumns: 1,
+        columns: [
+            { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+            { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+            { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+            { name: "swrgPipeNm", fieldName: "swrgPipeNm", header: { text: "관종" }, editable: false },
+            {
+                name: "pdmtByTsmWhol",
+                fieldName: "pdmtByTsmWhol",
+                header: { text: "총계(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.0",
+                editable: false,
+            },
+            {
+                name: "step1PdmtPrlg",
+                fieldName: "step1PdmtPrlg",
+                header: { text: "200mm 미만" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.0",
+                editable: false,
+            },
+            {
+                name: "step2PdmtPrlg",
+                fieldName: "step2PdmtPrlg",
+                header: { text: "200mm이상~\n300mm미만" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.0",
+                editable: false,
+            },
+            {
+                name: "step3PdmtPrlg",
+                fieldName: "step3PdmtPrlg",
+                header: { text: "300mm이상~\n500mm미만" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.0",
+                editable: false,
+            },
+            {
+                name: "step4PdmtPrlg",
+                fieldName: "step4PdmtPrlg",
+                header: { text: "500mm이상~\n800mm미만" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.0",
+                editable: false,
+            },
+            {
+                name: "step5PdmtPrlg",
+                fieldName: "step5PdmtPrlg",
+                header: { text: "800mm 이상" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.0",
+                editable: false,
+            },
+            {
+                name: "sqrePdmtPrlg",
+                fieldName: "sqrePdmtPrlg",
+                header: { text: "사각형(m)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.0",
+                editable: false,
+            },
+            {
+                name: "etcPdmtPrlg",
+                fieldName: "etcPdmtPrlg",
+                header: { text: "기타\n(측구/개거 등)" },
+                valueType: ValueType.NUMBER,
+                dataFormat: "#,##0.0",
+                editable: false,
+            },
+        ],
+        columnLayout: [
+            {
+                name: "addrGroup",
+                header: { text: "행정구역" },
+                items: ["ctpvNm", "sggNm", "admdstNm"],
+            },
+            "swrgPipeNm",
+            "pdmtByTsmWhol",
+            {
+                name: "circleGroup",
+                header: { text: "원형(m)" },
+                items: ["step1PdmtPrlg", "step2PdmtPrlg", "step3PdmtPrlg", "step4PdmtPrlg", "step5PdmtPrlg"],
+            },
+            "sqrePdmtPrlg",
+            "etcPdmtPrlg",
+        ],
+    },
+
+    {
+    tabKey: "ST00020005",
+    tabLabel: "맨홀 현황",
+    rowStartNum: 2,
+    fixedColumns: 2,
+    columns: [
+        { name: "ctpvNm",   fieldName: "ctpvNm",   header: { text: "시도" },       editable: false },
+        { name: "sggNm",    fieldName: "sggNm",     header: { text: "시군구" },     editable: false },
+        { name: "admdstNm", fieldName: "admdstNm",  header: { text: "행정구역명" }, editable: false },
+        { name: "emphsMngSeNm", fieldName: "emphsMngSeNm",  header: { text: "집중강우\n중점관리\n구역구분" },    editable: false },
+
+         { name: "totWholMnhlCnt",  fieldName: "totWholMnhlCnt",  header: { text: "계" },              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "totStep1MnhlCnt", fieldName: "totStep1MnhlCnt", header: { text: "주철" },            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "totStep2MnhlCnt", fieldName: "totStep2MnhlCnt", header: { text: "주철(조화)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "totStep3MnhlCnt", fieldName: "totStep3MnhlCnt", header: { text: "콘크리트" },        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "totStep4MnhlCnt", fieldName: "totStep4MnhlCnt", header: { text: "기타" },            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "totStep5MnhlCnt", fieldName: "totStep5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // ── 2015년 이전 (yy14) ──────────────────────────────────
+        { name: "yy14WholMnhlCnt",  fieldName: "yy14WholMnhlCnt",  header: { text: "계" },                              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy14Step1MnhlCnt", fieldName: "yy14Step1MnhlCnt", header: { text: "주철" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy14Step2MnhlCnt", fieldName: "yy14Step2MnhlCnt", header: { text: "주철(조화)" },                      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy14Step3MnhlCnt", fieldName: "yy14Step3MnhlCnt", header: { text: "콘크리트" },                        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy14Step4MnhlCnt", fieldName: "yy14Step4MnhlCnt", header: { text: "기타" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy14Step5MnhlCnt", fieldName: "yy14Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // ── 2015년 (yy15) ───────────────────────────────────────
+        { name: "yy15WholMnhlCnt",  fieldName: "yy15WholMnhlCnt",  header: { text: "계" },                              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy15Step1MnhlCnt", fieldName: "yy15Step1MnhlCnt", header: { text: "주철" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy15Step2MnhlCnt", fieldName: "yy15Step2MnhlCnt", header: { text: "주철(조화)" },                      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy15Step3MnhlCnt", fieldName: "yy15Step3MnhlCnt", header: { text: "콘크리트" },                        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy15Step4MnhlCnt", fieldName: "yy15Step4MnhlCnt", header: { text: "기타" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy15Step5MnhlCnt", fieldName: "yy15Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // ── 2016년 (yy16) ───────────────────────────────────────
+        { name: "yy16WholMnhlCnt",  fieldName: "yy16WholMnhlCnt",  header: { text: "계" },                              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy16Step1MnhlCnt", fieldName: "yy16Step1MnhlCnt", header: { text: "주철" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy16Step2MnhlCnt", fieldName: "yy16Step2MnhlCnt", header: { text: "주철(조화)" },                      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy16Step3MnhlCnt", fieldName: "yy16Step3MnhlCnt", header: { text: "콘크리트" },                        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy16Step4MnhlCnt", fieldName: "yy16Step4MnhlCnt", header: { text: "기타" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy16Step5MnhlCnt", fieldName: "yy16Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // ── 2017년 (yy17) ───────────────────────────────────────
+        { name: "yy17WholMnhlCnt",  fieldName: "yy17WholMnhlCnt",  header: { text: "계" },                              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy17Step1MnhlCnt", fieldName: "yy17Step1MnhlCnt", header: { text: "주철" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy17Step2MnhlCnt", fieldName: "yy17Step2MnhlCnt", header: { text: "주철(조화)" },                      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy17Step3MnhlCnt", fieldName: "yy17Step3MnhlCnt", header: { text: "콘크리트" },                        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy17Step4MnhlCnt", fieldName: "yy17Step4MnhlCnt", header: { text: "기타" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy17Step5MnhlCnt", fieldName: "yy17Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // ── 2018년 (yy18) ───────────────────────────────────────
+        { name: "yy18WholMnhlCnt",  fieldName: "yy18WholMnhlCnt",  header: { text: "계" },                              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy18Step1MnhlCnt", fieldName: "yy18Step1MnhlCnt", header: { text: "주철" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy18Step2MnhlCnt", fieldName: "yy18Step2MnhlCnt", header: { text: "주철(조화)" },                      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy18Step3MnhlCnt", fieldName: "yy18Step3MnhlCnt", header: { text: "콘크리트" },                        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy18Step4MnhlCnt", fieldName: "yy18Step4MnhlCnt", header: { text: "기타" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy18Step5MnhlCnt", fieldName: "yy18Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // ── 2019년 (yy19) ───────────────────────────────────────
+        { name: "yy19WholMnhlCnt",  fieldName: "yy19WholMnhlCnt",  header: { text: "계" },                              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy19Step1MnhlCnt", fieldName: "yy19Step1MnhlCnt", header: { text: "주철" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy19Step2MnhlCnt", fieldName: "yy19Step2MnhlCnt", header: { text: "주철(조화)" },                      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy19Step3MnhlCnt", fieldName: "yy19Step3MnhlCnt", header: { text: "콘크리트" },                        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy19Step4MnhlCnt", fieldName: "yy19Step4MnhlCnt", header: { text: "기타" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy19Step5MnhlCnt", fieldName: "yy19Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // ── 2020년 (yy20) ───────────────────────────────────────
+        { name: "yy20WholMnhlCnt",  fieldName: "yy20WholMnhlCnt",  header: { text: "계" },                              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy20Step1MnhlCnt", fieldName: "yy20Step1MnhlCnt", header: { text: "주철" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy20Step2MnhlCnt", fieldName: "yy20Step2MnhlCnt", header: { text: "주철(조화)" },                      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy20Step3MnhlCnt", fieldName: "yy20Step3MnhlCnt", header: { text: "콘크리트" },                        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy20Step4MnhlCnt", fieldName: "yy20Step4MnhlCnt", header: { text: "기타" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy20Step5MnhlCnt", fieldName: "yy20Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // ── 2021년 (yy21) ───────────────────────────────────────
+        { name: "yy21WholMnhlCnt",  fieldName: "yy21WholMnhlCnt",  header: { text: "계" },                              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy21Step1MnhlCnt", fieldName: "yy21Step1MnhlCnt", header: { text: "주철" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy21Step2MnhlCnt", fieldName: "yy21Step2MnhlCnt", header: { text: "주철(조화)" },                      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy21Step3MnhlCnt", fieldName: "yy21Step3MnhlCnt", header: { text: "콘크리트" },                        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy21Step4MnhlCnt", fieldName: "yy21Step4MnhlCnt", header: { text: "기타" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy21Step5MnhlCnt", fieldName: "yy21Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // ── 2022년 (yy22) ───────────────────────────────────────
+        { name: "yy22WholMnhlCnt",  fieldName: "yy22WholMnhlCnt",  header: { text: "계" },                              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy22Step1MnhlCnt", fieldName: "yy22Step1MnhlCnt", header: { text: "주철" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy22Step2MnhlCnt", fieldName: "yy22Step2MnhlCnt", header: { text: "주철(조화)" },                      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy22Step3MnhlCnt", fieldName: "yy22Step3MnhlCnt", header: { text: "콘크리트" },                        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy22Step4MnhlCnt", fieldName: "yy22Step4MnhlCnt", header: { text: "기타" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy22Step5MnhlCnt", fieldName: "yy22Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // ── 2023년 (yy23) ───────────────────────────────────────
+        { name: "yy23WholMnhlCnt",  fieldName: "yy23WholMnhlCnt",  header: { text: "계" },                              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy23Step1MnhlCnt", fieldName: "yy23Step1MnhlCnt", header: { text: "주철" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy23Step2MnhlCnt", fieldName: "yy23Step2MnhlCnt", header: { text: "주철(조화)" },                      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy23Step3MnhlCnt", fieldName: "yy23Step3MnhlCnt", header: { text: "콘크리트" },                        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy23Step4MnhlCnt", fieldName: "yy23Step4MnhlCnt", header: { text: "기타" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy23Step5MnhlCnt", fieldName: "yy23Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // ── 2024년 (yy24) ───────────────────────────────────────
+        { name: "yy24WholMnhlCnt",  fieldName: "yy24WholMnhlCnt",  header: { text: "계" },                              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy24Step1MnhlCnt", fieldName: "yy24Step1MnhlCnt", header: { text: "주철" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy24Step2MnhlCnt", fieldName: "yy24Step2MnhlCnt", header: { text: "주철(조화)" },                      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy24Step3MnhlCnt", fieldName: "yy24Step3MnhlCnt", header: { text: "콘크리트" },                        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy24Step4MnhlCnt", fieldName: "yy24Step4MnhlCnt", header: { text: "기타" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy24Step5MnhlCnt", fieldName: "yy24Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // ── 2025년 (yy25) ───────────────────────────────────────
+        { name: "yy25WholMnhlCnt",  fieldName: "yy25WholMnhlCnt",  header: { text: "계" },                              valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy25Step1MnhlCnt", fieldName: "yy25Step1MnhlCnt", header: { text: "주철" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy25Step2MnhlCnt", fieldName: "yy25Step2MnhlCnt", header: { text: "주철(조화)" },                      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy25Step3MnhlCnt", fieldName: "yy25Step3MnhlCnt", header: { text: "콘크리트" },                        valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy25Step4MnhlCnt", fieldName: "yy25Step4MnhlCnt", header: { text: "기타" },                            valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "yy25Step5MnhlCnt", fieldName: "yy25Step5MnhlCnt", header: { text: "추락방지시설\n설치맨홀(개)" },      valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        { name: "rmrk", fieldName: "rmrk", header: { text: "비고" }, editable: false },
+    ],
+    columnLayout: [
+    { name: "addrGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm"] },
+    "emphsMngSeNm",
+    {
+        name: "totGroup",
+        header: { text: "연도별총계" },
+        items: [
+            { name: "totMtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["totWholMnhlCnt", "totStep1MnhlCnt", "totStep2MnhlCnt", "totStep3MnhlCnt", "totStep4MnhlCnt"] },
+            "totStep5MnhlCnt",
+        ],
+    },
+    {
+        name: "yy14Group",
+        header: { text: "2015년 이전" },  // ← _14Y
+        items: [
+            { name: "yy14MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy14WholMnhlCnt", "yy14Step1MnhlCnt", "yy14Step2MnhlCnt", "yy14Step3MnhlCnt", "yy14Step4MnhlCnt"] },
+            "yy14Step5MnhlCnt",
+        ],
+    },
+    {
+        name: "yy15Group",
+        header: { text: "2015년" },       // ← _15Y
+        items: [
+            { name: "yy15MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy15WholMnhlCnt", "yy15Step1MnhlCnt", "yy15Step2MnhlCnt", "yy15Step3MnhlCnt", "yy15Step4MnhlCnt"] },
+            "yy15Step5MnhlCnt",
+        ],
+    },
+    {
+        name: "yy16Group",
+        header: { text: "2016년" },       // ← _16Y
+        items: [
+            { name: "yy16MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy16WholMnhlCnt", "yy16Step1MnhlCnt", "yy16Step2MnhlCnt", "yy16Step3MnhlCnt", "yy16Step4MnhlCnt"] },
+            "yy16Step5MnhlCnt",
+        ],
+    },
+    {
+        name: "yy17Group",
+        header: { text: "2017년" },
+        items: [
+            { name: "yy17MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy17WholMnhlCnt", "yy17Step1MnhlCnt", "yy17Step2MnhlCnt", "yy17Step3MnhlCnt", "yy17Step4MnhlCnt"] },
+            "yy17Step5MnhlCnt",
+        ],
+    },
+    {
+        name: "yy18Group",
+        header: { text: "2018년" },
+        items: [
+            { name: "yy18MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy18WholMnhlCnt", "yy18Step1MnhlCnt", "yy18Step2MnhlCnt", "yy18Step3MnhlCnt", "yy18Step4MnhlCnt"] },
+            "yy18Step5MnhlCnt",
+        ],
+    },
+    {
+        name: "yy19Group",
+        header: { text: "2019년" },
+        items: [
+            { name: "yy19MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy19WholMnhlCnt", "yy19Step1MnhlCnt", "yy19Step2MnhlCnt", "yy19Step3MnhlCnt", "yy19Step4MnhlCnt"] },
+            "yy19Step5MnhlCnt",
+        ],
+    },
+    {
+        name: "yy20Group",
+        header: { text: "2020년" },
+        items: [
+            { name: "yy20MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy20WholMnhlCnt", "yy20Step1MnhlCnt", "yy20Step2MnhlCnt", "yy20Step3MnhlCnt", "yy20Step4MnhlCnt"] },
+            "yy20Step5MnhlCnt",
+        ],
+    },
+    {
+        name: "yy21Group",
+        header: { text: "2021년" },
+        items: [
+            { name: "yy21MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy21WholMnhlCnt", "yy21Step1MnhlCnt", "yy21Step2MnhlCnt", "yy21Step3MnhlCnt", "yy21Step4MnhlCnt"] },
+            "yy21Step5MnhlCnt",
+        ],
+    },
+    {
+        name: "yy22Group",
+        header: { text: "2022년" },
+        items: [
+            { name: "yy22MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy22WholMnhlCnt", "yy22Step1MnhlCnt", "yy22Step2MnhlCnt", "yy22Step3MnhlCnt", "yy22Step4MnhlCnt"] },
+            "yy22Step5MnhlCnt",
+        ],
+    },
+    {
+        name: "yy23Group",
+        header: { text: "2023년" },
+        items: [
+            { name: "yy23MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy23WholMnhlCnt", "yy23Step1MnhlCnt", "yy23Step2MnhlCnt", "yy23Step3MnhlCnt", "yy23Step4MnhlCnt"] },
+            "yy23Step5MnhlCnt",
+        ],
+    },
+    {
+        name: "yy24Group",
+        header: { text: "2024년" },
+        items: [
+            { name: "yy24MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy24WholMnhlCnt", "yy24Step1MnhlCnt", "yy24Step2MnhlCnt", "yy24Step3MnhlCnt", "yy24Step4MnhlCnt"] },
+            "yy24Step5MnhlCnt",
+        ],
+    },
+    {
+        name: "yy25Group",
+        header: { text: "2025년" },
+        items: [
+            { name: "yy25MtrlGroup", header: { text: "맨홀뚜껑 재질(개)" }, items: ["yy25WholMnhlCnt", "yy25Step1MnhlCnt", "yy25Step2MnhlCnt", "yy25Step3MnhlCnt", "yy25Step4MnhlCnt"] },
+            "yy25Step5MnhlCnt",
+        ],
+    },
+    "rmrk",
+    ],
+},
+    
+];
+
+// 2. 동적 컬럼(ST00020003) 생성 함수
+export const getST00020003Config = (statsYr: string | number) => {
+    const startYear = 1995;
+    const endYear = Number(statsYr) || new Date().getFullYear();
+
+    return {
+        tabKey: "ST00020003",
+        tabLabel: "관종별 현황",
+        rowStartNum: 2,
+        fixedColumns: 2,
+        columns: [
+            { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+            { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+            { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+            { name: "swrgPipeNm", fieldName: "swrgPipeNm", header: { text: "관종" }, editable: false },
+
+            { name: "pipeByPrstWholSum", fieldName: "pipeByPrstWhol", header: { text: "계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+            { name: "lyngPrlgSum", fieldName: "lyngPrlg", header: { text: "매설연장(m)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+            { name: "dmltnPrlgSum", fieldName: "dmltnPrlg", header: { text: "철거연장(m)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+            { 
+                name: "oldPipeRt", 
+                fieldName: "oldPipeRt", 
+                header: { text: "노후하수관로율(%)" }, 
+                valueType: ValueType.NUMBER, 
+                dataFormat: "#,##0.0", 
+                editable: false,
+                excludeFromExcelExport: true,
+            },
+            ...(() => {
+                const yearColumns = [];
+                for (let yr = startYear; yr <= endYear; yr++) {
+                    yearColumns.push(
+                        { name: `prlg_whol_${yr}`, fieldName: `prlg_whol_${yr}`, header: { text: "계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+                        { name: `lyng_prlg_${yr}`, fieldName: `lyng_prlg_${yr}`, header: { text: "매설연장(m)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+                        { name: `dmltn_prlg_${yr}`, fieldName: `dmltn_prlg_${yr}`, header: { text: "철거연장(m)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+                    );
+                }
+                return yearColumns;
+            })(),
+        ],
+        columnLayout: [
+            { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+            "swrgPipeNm","oldPipeRt",
+            { name: "summaryGroup", header: { text: "총계" }, items: ["pipeByPrstWholSum", "lyngPrlgSum", "dmltnPrlgSum"] },
+            ...(() => {
+                const layouts = [];
+                for (let yr = startYear; yr <= endYear; yr++) {
+                    layouts.push({
+                        name: `group_${yr}`,
+                        header: { text: yr === 1995 ? "1996년이전" : `${yr}년` },
+                        items: [`prlg_whol_${yr}`, `lyng_prlg_${yr}`, `dmltn_prlg_${yr}`],
+                    });
+                }
+                return layouts;
+            })(),
+        ],
+    };
+};
+
+export const SewagePipeColumnInfoListTot: ColumnInfoList[] = rawSewagePipeTotList.map((tab) => ({
+    ...tab,
+    columns: tab.columns.map((col) => ({ ...col, editable: false as const })),
+}));
+
+const st00020003PlaceholderTab: ColumnInfoList = {
+    tabKey: "ST00020003",
+    tabLabel: "관종별 현황",
+    rowStartNum: 2,
+    fixedColumns: 2,
+    columns: [],
+    columnLayout: [],
+};
+
+SewagePipeColumnInfoListTot.splice(2, 0, st00020003PlaceholderTab);
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/SewerExcretaTreatmentStatusColumn.ts b/apps/st/src/components/util/column/total/SewerExcretaTreatmentStatusColumn.ts
new file mode 100644
index 000000000..0f5ded556
--- /dev/null
+++ b/apps/st/src/components/util/column/total/SewerExcretaTreatmentStatusColumn.ts
@@ -0,0 +1,63 @@
+import { ValueType } from "realgrid";
+
+export const ExcretaTreatmentStatusColumnConfig = {
+    tabKey: "ST00070001",
+    tabLabel: "분뇨처리시설",
+    rowStartNum: 2,
+    fixedColumns: 2,
+    columns: [
+        // 행정구역
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        // 기본 마스터 상세
+        { name: "fcltNm", fieldName: "fcltNm", header: { text: "시설명" }, editable: false },
+        { name: "fcltPstnCn", fieldName: "fcltPstnCn", header: { text: "소재지" }, editable: false },
+        { name: "telNo", fieldName: "telNo", header: { text: "전화번호" }, editable: false },
+        { name: "cmptnStrtYmd", fieldName: "cmptnStrtYmd", header: { text: "준공일" }, editable: false },
+        { name: "oprtngStrtYmd", fieldName: "oprtngStrtYmd", header: { text: "가동개시일" }, editable: false },
+        { name: "wholPjtcoAmt", fieldName: "wholPjtcoAmt", header: { text: "사업비\n(백만원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "prcsFcltCpct", fieldName: "prcsFcltCpct", header: { text: "시설용량\n(㎥/일)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "cpct", fieldName: "cpct", header: { text: "처리량\n(㎥/일)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "oprtngDayCnt", fieldName: "oprtngDayCnt", header: { text: "가동일수\n(일/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "prcsMthdExpln", fieldName: "prcsMthdExpln", header: { text: "처리공법" }, editable: false },
+        { name: "linkTmplntCn", fieldName: "linkTmplntCn", header: { text: "연계처리장명" }, editable: false },
+        { name: "linkPrcsQnt", fieldName: "linkPrcsQnt", header: { text: "연계처리량\n(㎥/일)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 유입수질(mg/L, 개/mL) 그룹 소속
+        { name: "inflwBodWqVl", fieldName: "inflwBodWqVl", header: { text: "BOD" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false },
+        { name: "inflwTocWqVl", fieldName: "inflwTocWqVl", header: { text: "TOC" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false },
+        { name: "inflwSsWqVl", fieldName: "inflwSsWqVl", header: { text: "SS" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false },
+        { name: "inflwTnWqVl", fieldName: "inflwTnWqVl", header: { text: "T-N" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false },
+        { name: "inflwTpWqVl", fieldName: "inflwTpWqVl", header: { text: "T-P" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.000", editable: false },
+        { name: "inflwClfgCnt", fieldName: "inflwClfgCnt", header: { text: "대장균\n군수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 방류수질(mg/L, 개/mL) 그룹 소속
+        { name: "dschgBodWqVl", fieldName: "dschgBodWqVl", header: { text: "BOD" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false },
+        { name: "dschgTocWqVl", fieldName: "dschgTocWqVl", header: { text: "TOC" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false },
+        { name: "dschgSsWqVl", fieldName: "dschgSsWqVl", header: { text: "SS" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false },
+        { name: "dschgTnWqVl", fieldName: "dschgTnWqVl", header: { text: "T-N" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false },
+        { name: "dschgTpWqVl", fieldName: "dschgTpWqVl", header: { text: "T-P" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.000", editable: false },
+        { name: "dschgClfgCnt", fieldName: "dschgClfgCnt", header: { text: "대장균\n군수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 방류수역 그룹 소속
+        { name: "wtsysNm", fieldName: "wtsysNm", header: { text: "수계" }, editable: false },
+        { name: "trbtrNm", fieldName: "trbtrNm", header: { text: "지류" }, editable: false },
+        { name: "msirbCn", fieldName: "msirbCn", header: { text: "중권역" }, editable: false },
+        { name: "ssirbCn", fieldName: "ssirbCn", header: { text: "소권역" }, editable: false },
+        
+        // 단일 미그룹 성격 컬럼들
+        { name: "operMthdCdCn", fieldName: "operMthdCdCn", header: { text: "운영주체\n(자체/공기업/\n민간위탁)" }, editable: false },
+        { name: "wholNope", fieldName: "wholNope", header: { text: "직원총수\n(명)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "sftyAcdntEvntcsCnt", fieldName: "sftyAcdntEvntcsCnt", header: { text: "안전사고\n건수\n(건/인/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "fcltNm", "fcltPstnCn", "telNo", "cmptnStrtYmd", "oprtngStrtYmd", "wholPjtcoAmt", "prcsFcltCpct", "cpct", "oprtngDayCnt", "prcsMthdExpln", "linkTmplntCn", "linkPrcsQnt",
+        { name: "inflwWqGroup", header: { text: "유입수질(mg/L, 개/mL)" }, items: ["inflwBodWqVl", "inflwTocWqVl", "inflwSsWqVl", "inflwTnWqVl", "inflwTpWqVl", "inflwClfgCnt"] },
+        { name: "dschgWqGroup", header: { text: "방류수질(mg/L, 개/mL)" }, items: ["dschgBodWqVl", "dschgTocWqVl", "dschgSsWqVl", "dschgTnWqVl", "dschgTpWqVl", "dschgClfgCnt"] },
+        { name: "wtrAreaGroup", header: { text: "방류수역" }, items: ["wtsysNm", "trbtrNm", "msirbCn", "ssirbCn"] },
+        "operMthdCdCn", "wholNope", "sftyAcdntEvntcsCnt"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/SewerMediationPumpStatusColumn.ts b/apps/st/src/components/util/column/total/SewerMediationPumpStatusColumn.ts
new file mode 100644
index 000000000..66451c04b
--- /dev/null
+++ b/apps/st/src/components/util/column/total/SewerMediationPumpStatusColumn.ts
@@ -0,0 +1,103 @@
+import { ValueType } from "realgrid";
+
+export const MediationPumpStatusColumnConfig = {
+    tabKey: "ST00050001",
+    tabLabel: "중계펌프장",
+    rowStartNum: 2,
+    fixedColumns: 3,
+    columns: [
+        // 행정구역 그룹 소속
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        // 단일 컬럼들
+        { name: "fcltNm", fieldName: "fcltNm", header: { text: "펌프장명" }, editable: false },
+        { name: "pumpSeNm", fieldName: "pumpSeNm", header: { text: "구분\n(합류식,\n분류식)" }, editable: false },
+        { name: "swtrmtFcltNm", fieldName: "swtrmtFcltNm", header: { text: "처리장명" }, editable: false },
+        { name: "fcltPstnCn", fieldName: "fcltPstnCn", header: { text: "위치" }, editable: false },
+        { name: "oprtngStrtYmd", fieldName: "oprtngStrtYmd", header: { text: "가동개시\n년월일\nyyyy-mm-dd" }, editable: false },
+        { name: "planMltvArea", fieldName: "planMltvArea", header: { text: "계획배수면적(㏊)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 계획시간대최대배수량(㎥/일) 그룹 소속
+        { name: "sndyArea", fieldName: "sndyArea", header: { text: "청천시" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "rainArea", fieldName: "rainArea", header: { text: "우천시" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "exlnQnt", fieldName: "exlnQnt", header: { text: "우수량" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 오수펌프 그룹 내부 소속
+        { name: "drtwPumpGrssPpqty", fieldName: "drtwPumpGrssPpqty", header: { text: "총양수량\n(㎥/min)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 오수펌프 > 오수펌프1 그룹 소속
+        { name: "drtwPumpN1DmtrArea", fieldName: "drtwPumpN1DmtrArea", header: { text: "구경(mm)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "drtwPumpN1Ppqty", fieldName: "drtwPumpN1Ppqty", header: { text: "양수량\n(㎥/min)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "drtwPumpN1Cnt", fieldName: "drtwPumpN1Cnt", header: { text: "펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "drtwPumpN1RsrvCnt", fieldName: "drtwPumpN1RsrvCnt", header: { text: "예비대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 오수펌프 > 오수펌프2 그룹 소속
+        { name: "drtwPumpN2DmtrArea", fieldName: "drtwPumpN2DmtrArea", header: { text: "구경(mm)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "drtwPumpN2Ppqty", fieldName: "drtwPumpN2Ppqty", header: { text: "양수량\n(㎥/min)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "drtwPumpN2Cnt", fieldName: "drtwPumpN2Cnt", header: { text: "펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "drtwPumpN2RsrvCnt", fieldName: "drtwPumpN2RsrvCnt", header: { text: "예비대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 오수펌프 > 오수펌프3 그룹 소속
+        { name: "drtwPumpN3DmtrArea", fieldName: "drtwPumpN3DmtrArea", header: { text: "구경(mm)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "drtwPumpN3Ppqty", fieldName: "drtwPumpN3Ppqty", header: { text: "양수량\n(㎥/min)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "drtwPumpN3Cnt", fieldName: "drtwPumpN3Cnt", header: { text: "펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "drtwPumpN3RsrvCnt", fieldName: "drtwPumpN3RsrvCnt", header: { text: "예비대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 우수펌프 그룹 내부 소속
+        { name: "exlnPumpGrssPpqty", fieldName: "exlnPumpGrssPpqty", header: { text: "총양수량\n(㎥/min)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 우수펌프 > 우수펌프1 그룹 소속
+        { name: "exlnPumpN1DmtrArea", fieldName: "exlnPumpN1DmtrArea", header: { text: "구경(mm)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "exlnPumpN1Ppqty", fieldName: "exlnPumpN1Ppqty", header: { text: "양수량\n(㎥/min)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "exlnPumpN1Cnt", fieldName: "exlnPumpN1Cnt", header: { text: "펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "exlnPumpN1RsrvCnt", fieldName: "exlnPumpN1RsrvCnt", header: { text: "예비대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 우수펌프 > 우수펌프2 그룹 소속
+        { name: "exlnPumpN2DmtrArea", fieldName: "exlnPumpN2DmtrArea", header: { text: "구경(mm)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "exlnPumpN2Ppqty", fieldName: "exlnPumpN2Ppqty", header: { text: "양수량\n(㎥/min)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "exlnPumpN2Cnt", fieldName: "exlnPumpN2Cnt", header: { text: "펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "exlnPumpN2RsrvCnt", fieldName: "exlnPumpN2RsrvCnt", header: { text: "예비대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 우수펌프 > 우수펌프3 그룹 소속
+        { name: "exlnPumpN3DmtrArea", fieldName: "exlnPumpN3DmtrArea", header: { text: "구경(mm)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "exlnPumpN3Ppqty", fieldName: "exlnPumpN3Ppqty", header: { text: "양수량\n(㎥/min)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "exlnPumpN3Cnt", fieldName: "exlnPumpN3Cnt", header: { text: "펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "exlnPumpN3RsrvCnt", fieldName: "exlnPumpN3RsrvCnt", header: { text: "예비대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 단일 컬럼
+        { name: "anlElpwrUseQnt", fieldName: "anlElpwrUseQnt", header: { text: "연간전력\n사용량\n(㎾h/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "swtrmtFcltNm",
+        "fcltNm", 
+        "pumpSeNm", 
+        "fcltPstnCn", 
+        "oprtngStrtYmd", 
+        "planMltvArea",
+        { name: "planDrainGroup", header: { text: "계획시간대최대배수량(㎥/일)" }, items: ["sndyArea", "rainArea", "exlnQnt"] },
+        {
+            name: "drtwPumpGroup",
+            header: { text: "오수펌프" },
+            items: [
+                "drtwPumpGrssPpqty",
+                { name: "drtwPumpN1Group", header: { text: "오수펌프(1)" }, items: ["drtwPumpN1DmtrArea", "drtwPumpN1Ppqty", "drtwPumpN1Cnt", "drtwPumpN1RsrvCnt"] },
+                { name: "drtwPumpN2Group", header: { text: "오수펌프(2)" }, items: ["drtwPumpN2DmtrArea", "drtwPumpN2Ppqty", "drtwPumpN2Cnt", "drtwPumpN2RsrvCnt"] },
+                { name: "drtwPumpN3Group", header: { text: "오수펌프(3)" }, items: ["drtwPumpN3DmtrArea", "drtwPumpN3Ppqty", "drtwPumpN3Cnt", "drtwPumpN3RsrvCnt"] }
+            ]
+        },
+        {
+            name: "exlnPumpGroup",
+            header: { text: "우수펌프" },
+            items: [
+                "exlnPumpGrssPpqty",
+                { name: "exlnPumpN1Group", header: { text: "우수펌프(1)" }, items: ["exlnPumpN1DmtrArea", "exlnPumpN1Ppqty", "exlnPumpN1Cnt", "exlnPumpN1RsrvCnt"] },
+                { name: "exlnPumpN2Group", header: { text: "우수펌프(2)" }, items: ["exlnPumpN2DmtrArea", "exlnPumpN2Ppqty", "exlnPumpN2Cnt", "exlnPumpN2RsrvCnt"] },
+                { name: "exlnPumpN3Group", header: { text: "우수펌프(3)" }, items: ["exlnPumpN3DmtrArea", "exlnPumpN3Ppqty", "exlnPumpN3Cnt", "exlnPumpN3RsrvCnt"] }
+            ]
+        },
+        "anlElpwrUseQnt"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/SeweragePentrationRateTotColumn.ts b/apps/st/src/components/util/column/total/SeweragePentrationRateTotColumn.ts
index d14c5b6c6..01b224322 100644
--- a/apps/st/src/components/util/column/total/SeweragePentrationRateTotColumn.ts
+++ b/apps/st/src/components/util/column/total/SeweragePentrationRateTotColumn.ts
@@ -12,7 +12,7 @@ export const SeweragePentrationRateTotColumn = {
 
         // 수계 및 권역
         { name: 'rvbsn', fieldName: 'rvbsn', header: { text: '수계' }, editable: false, },
-        { name: 'trbtrNm', fieldName: 'trbtrNm', header: { text: '지류' } },
+        { name: 'trbtrNm', fieldName: 'trbtrNm', header: { text: '지류' }, editable: false, },
 
         // 수계영향권별분류
         { name: 'mdbsn', fieldName: 'mdbsn', header: { text: '세부단위유역' }, editable: false, },
@@ -20,15 +20,7 @@ export const SeweragePentrationRateTotColumn = {
         { name: 'mdmbsn', fieldName: 'mdmbsn', header: { text: '소권역' }, editable: false, },
 
         // 특별대책지역
-        { name: 'spcCtpnRgnCn', fieldName: 'spcCtpnRgnCn', header: { text: '특별대책지역' } },
-
-        // 행정참고자료인구
-        { name: 'pbadmsWholPpltnCnt', fieldName: 'pbadmsWholPpltnCnt', header: { text: '총인구' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0', },
-        { name: 'domplWholPpltnCnt', fieldName: 'domplWholPpltnCnt', header: { text: '내국인' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0', },
-        { name: 'frgnrWholPpltnCnt', fieldName: 'frgnrWholPpltnCnt', header: { text: '외국인' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0', },
-
-        // 행정참고자료면적
-        { name: 'refArea', fieldName: 'refArea', header: { text: '행정참고자료면적(㎢)' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.000', },
+        { name: 'spcCtpnRgnCn', fieldName: 'spcCtpnRgnCn', header: { text: '특별대책지역' }, editable: false, },
 
         // 총인구
         { 
@@ -47,6 +39,7 @@ export const SeweragePentrationRateTotColumn = {
             header: { text: '총면적(㎢)' }, 
             valueType: ValueType.NUMBER, 
             dataFormat: '#,##0.000',
+            editable: false, 
         },
 
         // 하수처리구역 내 > 합계
@@ -134,13 +127,22 @@ export const SeweragePentrationRateTotColumn = {
             valueType: ValueType.NUMBER, 
             dataFormat: '#,##0.0',
         },
+        {
+            name: 'rurPsplyRt',
+            fieldName: 'rurPsplyRt',
+            header: { text: '농어촌하수도보급률(%)' },
+            editable: false,
+            valueType: ValueType.NUMBER,
+            dataFormat: '#,##0.0',
+            excludeFromExcelExport: true,
+        },
 
         // 비고
         { name: 'rmrk', fieldName: 'rmrk', header: { text: '비고' } },
 
         { name: 'swagePplPsplyRt', fieldName: 'swagePplPsplyRt', header: { text: '하수관로보급률(%)' }, visible: false },
         { name: 'admdstCd', fieldName: 'admdstCd', header: { text: '행정코드' }, visible: false },
-    ],
+    ].map((col) => ({ ...col, editable: false })),
 
     columnLayout: [
         {
@@ -162,13 +164,6 @@ export const SeweragePentrationRateTotColumn = {
             items: ['mdbsn', 'lgbsn', 'mdmbsn'],
         },
         'spcCtpnRgnCn',
-        {
-            name: 'groupC',
-            hideChildHeaders: false,
-            header: { text: '행정참고자료인구' },
-            items: ['pbadmsWholPpltnCnt', 'domplWholPpltnCnt', 'frgnrWholPpltnCnt'],
-        },
-        'refArea',
         'wholPpltnCnt',
         'wholArea',
         {
@@ -208,6 +203,7 @@ export const SeweragePentrationRateTotColumn = {
         'staaPsplyRt',
         'altdPrcsPsplyRt',
         'sewerInstlRt',
+        'rurPsplyRt',
         'rmrk',
         'swagePplPsplyRt',
         'admdstCd',
diff --git a/apps/st/src/components/util/column/total/sewageExcretaIndustry/HumanWasteCollectionTab3Column.ts b/apps/st/src/components/util/column/total/sewageExcretaIndustry/HumanWasteCollectionTab3Column.ts
new file mode 100644
index 000000000..666c671b8
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewageExcretaIndustry/HumanWasteCollectionTab3Column.ts
@@ -0,0 +1,31 @@
+import { ValueType } from "realgrid";
+
+export const HumanWasteCollectionTab3ColumnConfig = {
+    tabKey: "ST00120003",
+    tabLabel: "분뇨수집·운반업",
+    rowStartNum: 3,
+    fixedColumns: 3,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        { name: "bzentyCnt", fieldName: "bzentyCnt", header: { text: "업체수(개소)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "empNope", fieldName: "empNope", header: { text: "종사인원(명)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "fcltSecrPrstCnt", fieldName: "fcltSecrPrstCnt", header: { text: "계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "n3TonUdrCnt", fieldName: "n3TonUdrCnt", header: { text: "3톤이하" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "n4TonUdrCnt", fieldName: "n4TonUdrCnt", header: { text: "4.5톤이하" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "n8TonUdrCnt", fieldName: "n8TonUdrCnt", header: { text: "8톤이하" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "etcCnt", fieldName: "etcCnt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "clctCnvncPrfmncQnt", fieldName: "clctCnvncPrfmncQnt", header: { text: "수집·운반실적(m³/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "bzentyCnt", "empNope",
+        { 
+            name: "fcltGroup", 
+            header: { text: "시설(차량) 확보현황(대수)" }, 
+            items: ["fcltSecrPrstCnt", "n3TonUdrCnt", "n4TonUdrCnt", "n8TonUdrCnt", "etcCnt"] 
+        },
+        "clctCnvncPrfmncQnt"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewageExcretaIndustry/IndividualSewageTab4Column.ts b/apps/st/src/components/util/column/total/sewageExcretaIndustry/IndividualSewageTab4Column.ts
new file mode 100644
index 000000000..18d99e765
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewageExcretaIndustry/IndividualSewageTab4Column.ts
@@ -0,0 +1,25 @@
+import { ValueType } from "realgrid";
+
+export const IndividualSewageTab4ColumnConfig = {
+    tabKey: "ST00120004",
+    tabLabel: "개인하수처리관련업",
+    rowStartNum: 3,
+    fixedColumns: 1,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        { name: "designMdsrCnt", fieldName: "designMdsrCnt", header: { text: "업소수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "designMdsrNope", fieldName: "designMdsrNope", header: { text: "종사인원(명)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "mfbizCnt", fieldName: "mfbizCnt", header: { text: "업소수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "mfbizMdsrNope", fieldName: "mfbizMdsrNope", header: { text: "종사인원(명)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "mngCnt", fieldName: "mngCnt", header: { text: "업소수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "mngMdsrNope", fieldName: "mngMdsrNope", header: { text: "종사인원(명)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        { name: "designGroup", header: { text: "개인하수처리시설 설계·시공업" }, items: ["designMdsrCnt", "designMdsrNope"] },
+        { name: "mfbizGroup", header: { text: "개인하수처리시설 제조업" }, items: ["mfbizCnt", "mfbizMdsrNope"] },
+        { name: "mngGroup", header: { text: "개인하수처리시설 관리업" }, items: ["mngCnt", "mngMdsrNope"] }
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewageExcretaIndustry/PublicHumanWasteStaffTab2Column.ts b/apps/st/src/components/util/column/total/sewageExcretaIndustry/PublicHumanWasteStaffTab2Column.ts
new file mode 100644
index 000000000..99d35f1ba
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewageExcretaIndustry/PublicHumanWasteStaffTab2Column.ts
@@ -0,0 +1,36 @@
+import { ValueType } from "realgrid";
+
+export const PublicHumanWasteStaffTab2ColumnConfig = {
+    tabKey: "ST00120002",
+    tabLabel: "공공기관 분뇨분야",
+    rowStartNum: 3,
+    fixedColumns: 2,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        { name: "ognzNm", fieldName: "ognzNm", header: { text: "직제" }, editable: false },
+        { name: "empGrssCnt", fieldName: "empGrssCnt", header: { text: "직원총수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "pbadmsNope", fieldName: "pbadmsNope", header: { text: "행정직" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "techWholNope", fieldName: "techWholNope", header: { text: "계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "engrkCnt", fieldName: "engrkCnt", header: { text: "토목" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "mchnCnt", fieldName: "mchnCnt", header: { text: "기계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "prvtmCnt", fieldName: "prvtmCnt", header: { text: "전기" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "chmengCnt", fieldName: "chmengCnt", header: { text: "화공" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "envCnt", fieldName: "envCnt", header: { text: "환경" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "enjbEtcCnt", fieldName: "enjbEtcCnt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "etcCnt", fieldName: "etcCnt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "ognzNm", 
+        "empGrssCnt", 
+        "pbadmsNope",
+        { 
+            name: "techGroup", 
+            header: { text: "기술직" }, 
+            items: ["techWholNope", "engrkCnt", "mchnCnt", "prvtmCnt", "chmengCnt", "envCnt", "enjbEtcCnt"] 
+        },
+        "etcCnt"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewageExcretaIndustry/PublicSewageStaffTab1Column.ts b/apps/st/src/components/util/column/total/sewageExcretaIndustry/PublicSewageStaffTab1Column.ts
new file mode 100644
index 000000000..90c1a789b
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewageExcretaIndustry/PublicSewageStaffTab1Column.ts
@@ -0,0 +1,35 @@
+import { ValueType } from "realgrid";
+
+export const PublicSewageStaffTab1ColumnConfig = {
+    tabKey: "ST00120001",
+    tabLabel: "공공기관 하수분야",
+    rowStartNum: 3,
+    fixedColumns: 2,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        { name: "ognzNm", fieldName: "ognzNm", header: { text: "직제" }, editable: false },
+        { name: "empGrssCnt", fieldName: "empGrssCnt", header: { text: "직원총수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "pbadmsNope", fieldName: "pbadmsNope", header: { text: "행정직" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        // 기술직
+        { name: "techWholNope", fieldName: "techWholNope", header: { text: "계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "engrkCnt", fieldName: "engrkCnt", header: { text: "토목" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "mchnCnt", fieldName: "mchnCnt", header: { text: "기계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "prvtmCnt", fieldName: "prvtmCnt", header: { text: "전기" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "chmengCnt", fieldName: "chmengCnt", header: { text: "화공" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "envCnt", fieldName: "envCnt", header: { text: "환경" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "enjbEtcCnt", fieldName: "enjbEtcCnt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "etcCnt", fieldName: "etcCnt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "ognzNm", "empGrssCnt", "pbadmsNope",
+        { 
+            name: "techGroup", 
+            header: { text: "기술직" }, 
+            items: ["techWholNope", "engrkCnt", "mchnCnt", "prvtmCnt", "chmengCnt", "envCnt", "enjbEtcCnt"] 
+        },
+        "etcCnt"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewagePipeMaintain/PipeDredgingStatusTotColumn.ts b/apps/st/src/components/util/column/total/sewagePipeMaintain/PipeDredgingStatusTotColumn.ts
new file mode 100644
index 000000000..aec00f860
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewagePipeMaintain/PipeDredgingStatusTotColumn.ts
@@ -0,0 +1,79 @@
+import { ValueType } from "realgrid";
+
+// 하수도 통계 관리 > 03.하수관로 유지관리 > tab 2. 관로준설
+export const PipeDredgingStatusTotColumn = {
+    columns: [
+        // 행정구역
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' } },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구명' } },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' } },
+        
+        // 하수관로 총 시설연장
+        { name: 'wholFcltPrlg', fieldName: 'wholFcltPrlg', header: { text: '하수관로총시설연장(m)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.00' },
+        
+        // 준설연장 및 개소수 > 관로(m)
+        { name: 'wholSwagePpl', fieldName: 'wholSwagePpl', header: { text: '합계' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'cbsysPplPrlg', fieldName: 'cbsysPplPrlg', header: { text: '합류식' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        
+        // 준설연장 및 개소수 > 관로(m) > 분류식
+        { name: 'sprsysExlnPrlg', fieldName: 'sprsysExlnPrlg', header: { text: '우수' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'sprsysDrtwPrlg', fieldName: 'sprsysDrtwPrlg', header: { text: '오수' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        
+        // 준설연장 및 개소수 > 맨홀, 오·우수받이, 토실·토구
+        { name: 'mnhlCnt', fieldName: 'mnhlCnt', header: { text: '맨홀(개소)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnDrtwRcvprpCnt', fieldName: 'exlnDrtwRcvprpCnt', header: { text: '오·우수받이(개소)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'stofcbrOtflCnt', fieldName: 'stofcbrOtflCnt', header: { text: '토실·토구(개소)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+
+        // 계획 & 비율 
+        { name: 'drdgnPlanPrlg', fieldName: 'drdgnPlanPrlg', header: { text: '준설 계획 연장(m)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'drdgnTrgtCtrsDrdgnRt', fieldName: 'drdgnTrgtCtrsDrdgnRt', header: { text: '계획대비 준설율(%)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'wholPrlgCtrsDrdgnRt', fieldName: 'wholPrlgCtrsDrdgnRt', header: { text: '총시설연장대비 준설율(%)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+
+        // 준설실적
+        { name: 'drdgnAmt', fieldName: 'drdgnAmt', header: { text: '금액(백만원)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'drdgnQnt', fieldName: 'drdgnQnt', header: { text: '준설량(m³)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+
+        // 준설토사처리 
+        { name: 'drdgnUntprcAmt', fieldName: 'drdgnUntprcAmt', header: { text: '준설토처리비(백만원)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'wholDrdgnPrcsQnt', fieldName: 'wholDrdgnPrcsQnt', header: { text: '처리량 계(톤)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'rclmQnt', fieldName: 'rclmQnt', header: { text: '매립' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'oceanEmsnQnt', fieldName: 'oceanEmsnQnt', header: { text: '해양투기' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'rcycQnt', fieldName: 'rcycQnt', header: { text: '재활용' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'etcQnt', fieldName: 'etcQnt', header: { text: '기타(소각, 고형화, 시멘트원료 등)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        
+    ].map((col) => ({ ...col, editable: false })),
+    columnLayout: [
+        { name: 'group_admin', header: { text: '행정구역' }, items: ['ctpvNm', 'sggNm', 'admdstNm'] },
+        'wholFcltPrlg',
+        {
+            name: 'group_dredge_info',
+            header: { text: '준설연장 및 개소수' },
+            items: [
+                {
+                    name: 'group_pipe',
+                    header: { text: '관로(m)' },
+                    items: [
+                        'wholSwagePpl', 'cbsysPplPrlg',
+                        { name: 'group_sep', header: { text: '분류식' }, items: ['sprsysExlnPrlg', 'sprsysDrtwPrlg'] }
+                    ]
+                },
+                'mnhlCnt', 'exlnDrtwRcvprpCnt', 'stofcbrOtflCnt'
+            ]
+        },
+        'drdgnPlanPrlg', 'drdgnTrgtCtrsDrdgnRt', 'wholPrlgCtrsDrdgnRt',
+        {
+            name: 'group_perf',
+            header: { text: '준설실적' },
+            items: ['drdgnAmt', 'drdgnQnt']
+        },
+        {
+            name: 'group_soil_treat',
+            header: { text: '준설토사처리' },
+            items: ['drdgnUntprcAmt', 'wholDrdgnPrcsQnt', 'rclmQnt', 'oceanEmsnQnt', 'rcycQnt', 'etcQnt']
+        },
+    ],
+    rowStartNum: 4,
+    fixedColumns: 1,
+    tabKey: 'ST00030002',
+    tabLabel: '관로준설'
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewagePipeMaintain/RepairStatusTotColumn.ts b/apps/st/src/components/util/column/total/sewagePipeMaintain/RepairStatusTotColumn.ts
new file mode 100644
index 000000000..307253309
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewagePipeMaintain/RepairStatusTotColumn.ts
@@ -0,0 +1,112 @@
+import { ValueType } from "realgrid";
+
+// 하수도 통계 관리 > 03.하수관로 유지관리 > tab 1. 개보수
+export const RepairStatusTotColumn = {
+    columns: [
+        // 행정구역
+        { name: 'ctpvNm', fieldName: 'ctpvNm', header: { text: '시도' }, editable: false },
+        { name: 'sggNm', fieldName: 'sggNm', header: { text: '시군구명' }, editable: false },
+        { name: 'admdstNm', fieldName: 'admdstNm', header: { text: '행정구역명' }, editable: false },
+        
+        // 개·보수관로 > 전체보수(m)
+        { name: 'mendngWhol', fieldName: 'mendngWhol', header: { text: '계' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'cbsysMendngPrlg', fieldName: 'cbsysMendngPrlg', header: { text: '합류식' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        
+        // 개·보수관로 > 전체보수(m) > 분류식
+        { name: 'sprsysExlnPrlg', fieldName: 'sprsysExlnPrlg', header: { text: '우수' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        { name: 'sprsysDrtwPrlg', fieldName: 'sprsysDrtwPrlg', header: { text: '오수' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        
+        // 개·보수관로 > 부분보수(개소)
+        { name: 'partMendngWhol', fieldName: 'partMendngWhol', header: { text: '계' }, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'cbsysPartMendngPrlg', fieldName: 'cbsysPartMendngPrlg', header: { text: '합류식' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        
+        // 개·보수관로 > 부분보수(개소) > 분류식
+        { name: 'sprsysExlnMendngPrlg', fieldName: 'sprsysExlnMendngPrlg', header: { text: '우수' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'sprsysDrtwMendngPrlg', fieldName: 'sprsysDrtwMendngPrlg', header: { text: '오수' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        
+        // 맨홀(개소)
+        { name: 'cbsysMnhlCnt', fieldName: 'cbsysMnhlCnt', header: { text: '합류식맨홀' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        
+        // 맨홀(개소) > 분류식
+        { name: 'sprsysDrtwMnhlCnt', fieldName: 'sprsysDrtwMnhlCnt', header: { text: '오수맨홀' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'sprsysExlnMnhlCnt', fieldName: 'sprsysExlnMnhlCnt', header: { text: '우수맨홀' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        
+        // 받이
+        { name: 'drtwRcvprpCnt', fieldName: 'drtwRcvprpCnt', header: { text: '오수받이(개소)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'exlnRcvprpCnt', fieldName: 'exlnRcvprpCnt', header: { text: '빗물받이(개소)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        
+        // 토실, 토구
+        { name: 'stofcbrCnt', fieldName: 'stofcbrCnt', header: { text: '토실(개소)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        { name: 'otflCnt', fieldName: 'otflCnt', header: { text: '토구(개소)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
+        
+        // 수밀검사CCTV조사량(m)
+        { name: 'cctvExmnPrlg', fieldName: 'cctvExmnPrlg', header: { text: '수밀검사·CCTV조사량(m)' }, valueType: ValueType.NUMBER, dataFormat: '#,##0.0' },
+        
+    ].map((col) => ({ ...col, editable: false })),
+    columnLayout: [
+        {
+            name: 'group_admin',
+            header: { text: '행정구역' },
+            items: ['ctpvNm', 'sggNm', 'admdstNm']
+        },
+        {
+            name: 'group_repair_main',
+            header: { text: '개·보수관로' },
+            items: [
+                {
+                    name: 'group_full_repair',
+                    header: { text: '전체보수(m)' },
+                    items: [
+                        'mendngWhol',
+                        'cbsysMendngPrlg',
+                        { 
+                            name: 'group_full_sep', 
+                            header: { text: '분류식' }, 
+                            items: ['sprsysExlnPrlg', 'sprsysDrtwPrlg']
+                        }
+                    ]
+                },
+                {
+                    name: 'group_part_repair',
+                    header: { text: '부분보수(개소)' },
+                    items: [
+                        'partMendngWhol',
+                        'cbsysPartMendngPrlg',
+                        { 
+                            name: 'group_part_sep', 
+                            header: { text: '분류식' }, 
+                            items: ['sprsysExlnMendngPrlg', 'sprsysDrtwMendngPrlg']
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'group_manhole',
+            header: { text: '맨홀(개소)' },
+            items: [
+                'cbsysMnhlCnt',
+                {
+                    name: 'group_mh_sep',
+                    header: { text: '분류식' },
+                    items: ['sprsysDrtwMnhlCnt', 'sprsysExlnMnhlCnt']
+                }
+            ]
+        },
+        {
+            name: 'group_inlet',
+            header: { text: '받이' },
+            items: ['drtwRcvprpCnt', 'exlnRcvprpCnt']
+        },
+        {
+            name: 'group_chamber',
+            header: { text: '토실,토구' },
+            items: ['stofcbrCnt', 'otflCnt']
+        },
+        'cctvExmnPrlg',
+    ],
+    rowStartNum: 4,
+    fixedColumns: 1,
+    tabKey: 'ST00030001',
+    tabLabel: '개보수'
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewagePipeMaintain/sewagePipeMaintainColumn.ts b/apps/st/src/components/util/column/total/sewagePipeMaintain/sewagePipeMaintainColumn.ts
new file mode 100644
index 000000000..f8e13699c
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewagePipeMaintain/sewagePipeMaintainColumn.ts
@@ -0,0 +1,12 @@
+import { PipeDredgingStatusTotColumn } from "./PipeDredgingStatusTotColumn"
+import { RepairStatusTotColumn } from "./RepairStatusTotColumn"
+
+const sewagePipeMaintainColumn = [
+    RepairStatusTotColumn,
+    PipeDredgingStatusTotColumn
+];
+
+export const SewagePipeMaintainColumnListTot = sewagePipeMaintainColumn.map((tab) => ({
+    ...tab,
+    columns: tab.columns.map((col) => ({ ...col, editable: false as const })),
+}));
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts b/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts
new file mode 100644
index 000000000..c4af5d5a6
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts
@@ -0,0 +1,46 @@
+import { ValueType } from "realgrid";
+
+export const PrivateSewageTab1ColumnConfig = {
+    tabKey: "ST00080001",
+    tabLabel: "처리용량별 오수처리시설",
+    rowStartNum: 3,
+    fixedColumns: 3,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        { name: "wholDrtwPrcsFcltCnt", fieldName: "wholDrtwPrcsFcltCnt", header: { text: "총계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 하수처리구역 내
+        { name: "wholStaaCnt", fieldName: "wholStaaCnt", header: { text: "계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step1StaaPrcsQnt", fieldName: "step1StaaPrcsQnt", header: { text: "2이하" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step2StaaPrcsQnt", fieldName: "step2StaaPrcsQnt", header: { text: "3~10" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step3StaaPrcsQnt", fieldName: "step3StaaPrcsQnt", header: { text: "11~20" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step4StaaPrcsQnt", fieldName: "step4StaaPrcsQnt", header: { text: "21~50" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step5StaaPrcsQnt", fieldName: "step5StaaPrcsQnt", header: { text: "51~100" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step6StaaPrcsQnt", fieldName: "step6StaaPrcsQnt", header: { text: "101~500" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step7StaaPrcsQnt", fieldName: "step7StaaPrcsQnt", header: { text: "501이상" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 하수처리구역 외
+        { name: "staaExcpWhol", fieldName: "staaExcpWhol", header: { text: "계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step1StaaExcpPrcsQnt", fieldName: "step1StaaExcpPrcsQnt", header: { text: "2이하" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step2StaaExcpPrcsQnt", fieldName: "step2StaaExcpPrcsQnt", header: { text: "3~10" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step3StaaExcpPrcsQnt", fieldName: "step3StaaExcpPrcsQnt", header: { text: "11~20" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step4StaaExcpPrcsQnt", fieldName: "step4StaaExcpPrcsQnt", header: { text: "21~50" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step5StaaExcpPrcsQnt", fieldName: "step5StaaExcpPrcsQnt", header: { text: "51~100" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step6StaaExcpPrcsQnt", fieldName: "step6StaaExcpPrcsQnt", header: { text: "101~500" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step7StaaExcpPrcsQnt", fieldName: "step7StaaExcpPrcsQnt", header: { text: "501이상" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "wholDrtwPrcsFcltCnt",
+        {
+            name: "privateSewageFacilityGroup",
+            header: { text: "오수처리시설" },
+            items: [
+                { name: "insideGroup", header: { text: "하수처리구역 내(㎥/일)" }, items: ["wholStaaCnt", "step1StaaPrcsQnt", "step2StaaPrcsQnt", "step3StaaPrcsQnt", "step4StaaPrcsQnt", "step5StaaPrcsQnt", "step6StaaPrcsQnt", "step7StaaPrcsQnt"] },
+                { name: "outsideGroup", header: { text: "하수처리구역 외(㎥/일)" }, items: ["staaExcpWhol", "step1StaaExcpPrcsQnt", "step2StaaExcpPrcsQnt", "step3StaaExcpPrcsQnt", "step4StaaExcpPrcsQnt", "step5StaaExcpPrcsQnt", "step6StaaExcpPrcsQnt", "step7StaaExcpPrcsQnt"] }
+            ]
+        }
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab2Column.ts b/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab2Column.ts
new file mode 100644
index 000000000..19fc4d1fb
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab2Column.ts
@@ -0,0 +1,72 @@
+import { ValueType } from "realgrid";
+
+export const PrivateSewageTab2ColumnConfig = {
+    tabKey: "ST00080002",
+    tabLabel: "정화조현황",
+    rowStartNum: 4,
+    fixedColumns: 3,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        { name: "grssFcltCnt", fieldName: "grssFcltCnt", header: { text: "총 시설 수\n(A+D)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 하수처리구역 내 소속 항목들
+        { name: "staaInsdWhol", fieldName: "staaInsdWhol", header: { text: "총계\nA=(B+C)/2" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "staaInsdPrcsCpctByWhol", fieldName: "staaInsdPrcsCpctByWhol", header: { text: "계(C)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "staaInsdSttkNprsflCnt", fieldName: "staaInsdSttkNprsflCnt", header: { text: "자연유하" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step1StaaInsdSttkFrcCnt", fieldName: "step1StaaInsdSttkFrcCnt", header: { text: "강제펌핑식" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "staaInsdSprktpFltrtbCnt", fieldName: "staaInsdSprktpFltrtbCnt", header: { text: "살수여상" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "staaInsdAertMthdCnt", fieldName: "staaInsdAertMthdCnt", header: { text: "폭기방법" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "staaInsdCntcAertCnt", fieldName: "staaInsdCntcAertCnt", header: { text: "접촉폭기" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "staaInsdEtcCnt", fieldName: "staaInsdEtcCnt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step1StaaInsdNope", fieldName: "step1StaaInsdNope", header: { text: "10인조\n이하" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step2StaaInsdNope", fieldName: "step2StaaInsdNope", header: { text: "11~20" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step3StaaInsdNope", fieldName: "step3StaaInsdNope", header: { text: "21~30" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step4StaaInsdNope", fieldName: "step4StaaInsdNope", header: { text: "31~50" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step5StaaInsdNope", fieldName: "step5StaaInsdNope", header: { text: "51~199" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step6StaaInsdNope", fieldName: "step6StaaInsdNope", header: { text: "200~499" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step7StaaInsdNope", fieldName: "step7StaaInsdNope", header: { text: "500~999" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step8StaaInsdNope", fieldName: "step8StaaInsdNope", header: { text: "1,000이상" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+
+        // 하수처리구역 외 소속 항목들
+        { name: "staaExcpWhol", fieldName: "staaExcpWhol", header: { text: "총계\nD=(E+F)/2" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "staaExcpPrcsCpctByWhol", fieldName: "staaExcpPrcsCpctByWhol", header: { text: "계(F)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "staaExcpSttkNprsflCnt", fieldName: "staaExcpSttkNprsflCnt", header: { text: "자연유하" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step1StaaExcpSttkFrcCnt", fieldName: "step1StaaExcpSttkFrcCnt", header: { text: "강제펌핑식" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "staaExcpSprktpFltrtbCnt", fieldName: "staaExcpSprktpFltrtbCnt", header: { text: "살수여상" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "staaExcpAertMthdCnt", fieldName: "staaExcpAertMthdCnt", header: { text: "폭기방법" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "staaExcpCntcAertCnt", fieldName: "staaExcpCntcAertCnt", header: { text: "접촉폭기" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "staaExcpEtcCnt", fieldName: "staaExcpEtcCnt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step1StaaExcpNope", fieldName: "step1StaaExcpNope", header: { text: "10인조\n이하" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step2StaaExcpNope", fieldName: "step2StaaExcpNope", header: { text: "11~20" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step3StaaExcpNope", fieldName: "step3StaaExcpNope", header: { text: "21~30" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step4StaaExcpNope", fieldName: "step4StaaExcpNope", header: { text: "31~50" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step5StaaExcpNope", fieldName: "step5StaaExcpNope", header: { text: "51~199" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step6StaaExcpNope", fieldName: "step6StaaExcpNope", header: { text: "200~499" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step7StaaExcpNope", fieldName: "step7StaaExcpNope", header: { text: "500~999" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "step8StaaExcpNope", fieldName: "step8StaaExcpNope", header: { text: "1,000이상" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "grssFcltCnt",
+        {
+            name: "insideSewerGroup",
+            header: { text: "하수처리구역 내" },
+            items: [
+                "staaInsdWhol",
+                { name: "insdBGroup", header: { text: "계(B)" }, items: ["staaInsdSttkNprsflCnt", "step1StaaInsdSttkFrcCnt", "staaInsdSprktpFltrtbCnt", "staaInsdAertMthdCnt", "staaInsdCntcAertCnt", "staaInsdEtcCnt"] },
+                { name: "insdCGroup", header: { text: "처리용량별" }, items: ["staaInsdPrcsCpctByWhol", "step1StaaInsdNope", "step2StaaInsdNope", "step3StaaInsdNope", "step4StaaInsdNope", "step5StaaInsdNope", "step6StaaInsdNope", "step7StaaInsdNope", "step8StaaInsdNope"] }
+            ]
+        },
+        {
+            name: "outsideSewerGroup",
+            header: { text: "하수처리구역 외" },
+            items: [
+                "staaExcpWhol",
+                { name: "excpEGroup", header: { text: "계(E)" }, items: ["staaExcpSttkNprsflCnt", "step1StaaExcpSttkFrcCnt", "staaExcpSprktpFltrtbCnt", "staaExcpAertMthdCnt", "staaExcpCntcAertCnt", "staaExcpEtcCnt"] },
+                { name: "excpFGroup", header: { text: "처리용량별" }, items: ["staaExcpPrcsCpctByWhol", "step1StaaExcpNope", "step2StaaExcpNope", "step3StaaExcpNope", "step4StaaExcpNope", "step5StaaExcpNope", "step6StaaExcpNope", "step7StaaExcpNope", "step8StaaExcpNope"] }
+            ]
+        }
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab3Column.ts b/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab3Column.ts
new file mode 100644
index 000000000..98a629759
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab3Column.ts
@@ -0,0 +1,48 @@
+import { ValueType } from "realgrid";
+
+export const PrivateSewageTab3ColumnConfig = {
+    tabKey: "ST00080003", // 08번 개인하수처리시설 TAB3 매핑 키 고정
+    tabLabel: "개인하수도 관리지역 지정공고 현황",
+    rowStartNum: 3, // 3단 다단 레이아웃 스펙에 맞추어 3으로 설정합니다.
+    fixedColumns: 1,
+    columns: [
+        // 행정구역 그룹 소속 (시도, 시군구, 행정구역명)
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        // 마스터 단일 컬럼 영역 (개소, 면적)
+        { name: "indvSwagePbancRgnCnt", fieldName: "indvSwagePbancRgnCnt", header: { text: "공고지역\n(개소)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "indvSwageDsgnScpLen", fieldName: "indvSwageDsgnScpLen", header: { text: "지정범위\n(㎢)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false },
+        
+        // 정화조 그룹 소속 (개소수, 처리용량)
+        { name: "spctnkGrssFcltCnt", fieldName: "spctnkGrssFcltCnt", header: { text: "총시설수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "spctnkQnt", fieldName: "spctnkQnt", header: { text: "처리용량\n(인/일)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 오수처리시설 그룹 소속 (개소수, 처리용량)
+        { name: "drtwPrcsFcltGrssFcltCnt", fieldName: "drtwPrcsFcltGrssFcltCnt", header: { text: "총시설수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "drtwPrcsFcltQnt", fieldName: "drtwPrcsFcltQnt", header: { text: "처리용량\n(㎥/일)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        // 행정구역 묶음
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        
+        // 메인 마스터 지표
+        "indvSwagePbancRgnCnt",
+        "indvSwageDsgnScpLen",
+        
+        // 정화조 다단 묶음
+        { 
+            name: "septicTankGroup", 
+            header: { text: "정화조" }, 
+            items: ["spctnkGrssFcltCnt", "spctnkQnt"] 
+        },
+        
+        // 오수처리시설 다단 묶음
+        { 
+            name: "sewageTreatmentGroup", 
+            header: { text: "오수처리시설" }, 
+            items: ["drtwPrcsFcltGrssFcltCnt", "drtwPrcsFcltQnt"] 
+        }
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerReservoir/SewerPumpStationStatusColumn.ts b/apps/st/src/components/util/column/total/sewerReservoir/SewerPumpStationStatusColumn.ts
new file mode 100644
index 000000000..64ce85216
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerReservoir/SewerPumpStationStatusColumn.ts
@@ -0,0 +1,96 @@
+import { ValueType } from "realgrid";
+
+export const PumpStationStatusColumnConfig = {
+    tabKey: "ST00040002",
+    tabLabel: "빗물펌프장",
+    rowStartNum: 2,
+    fixedColumns: 2,
+    columns: [
+        // 행정구역 그룹 소속
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        // 단일 컬럼들
+        { name: "fcltNm", fieldName: "fcltNm", header: { text: "시설명" }, editable: false },
+        { name: "fcltPstnCn", fieldName: "fcltPstnCn", header: { text: "위치" }, editable: false },
+        { name: "fcltyKndCn", fieldName: "fcltyKndCn", header: { text: "시설물종류" }, editable: false },
+        { name: "oprtngStrtYmd", fieldName: "oprtngStrtYmd", header: { text: "가동개시\n년월일\nyyyy-mm-dd" }, editable: false },
+        { name: "planDesignFreqCnt", fieldName: "planDesignFreqCnt", header: { text: "계획설계빈도" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "wtrStrgZoneArea", fieldName: "wtrStrgZoneArea", header: { text: "집수구역면적(㎢)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false },
+        
+        // 유수지 그룹 소속
+        { name: "rsvrYn", fieldName: "rsvrYn", header: { text: "유수지유무\n(유,무)" }, editable: false },
+        { name: "rsvrImpndQnt", fieldName: "rsvrImpndQnt", header: { text: "저류량(㎥)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 흡수정 그룹 소속
+        { name: "abstnRgnImdQnt", fieldName: "abstnRgnImdQnt", header: { text: "저류량(㎥)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 단일 컬럼
+        { name: "grssPpqty", fieldName: "grssPpqty", header: { text: "총양수량\n(㎥/min)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 펌프시설 > 펌프시설1 그룹 소속
+        { name: "pumpFcltN1DmtrExpln", fieldName: "pumpFcltN1DmtrExpln", header: { text: "구경(mm)" }, editable: false },
+        { name: "pumpFcltN1PerPpqty", fieldName: "pumpFcltN1PerPpqty", header: { text: "대당 양수량\n(㎥/min·대)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "pumpFcltN1PumpCnt", fieldName: "pumpFcltN1PumpCnt", header: { text: "펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "pumpFcltN1RsrvPumpCnt", fieldName: "pumpFcltN1RsrvPumpCnt", header: { text: "예비펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 펌프시설 > 펌프시설2 그룹 소속
+        { name: "pumpFcltN2DmtrExpln", fieldName: "pumpFcltN2DmtrExpln", header: { text: "구경(mm)" }, editable: false },
+        { name: "pumpFcltN2PerPpqty", fieldName: "pumpFcltN2PerPpqty", header: { text: "대당 양수량\n(㎥/min·대)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "pumpFcltN2PumpCnt", fieldName: "pumpFcltN2PumpCnt", header: { text: "펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "pumpFcltN2RsrvPumpCnt", fieldName: "pumpFcltN2RsrvPumpCnt", header: { text: "예비펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 펌프시설 > 펌프시설3 그룹 소속
+        { name: "pumpFcltN3DmtrExpln", fieldName: "pumpFcltN3DmtrExpln", header: { text: "구경(mm)" }, editable: false },
+        { name: "pumpFcltN3PerPpqty", fieldName: "pumpFcltN3PerPpqty", header: { text: "대당 양수량\n(㎥/min·대)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "pumpFcltN3PumpCnt", fieldName: "pumpFcltN3PumpCnt", header: { text: "펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "pumpFcltN3RsrvPumpCnt", fieldName: "pumpFcltN3RsrvPumpCnt", header: { text: "예비펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 부대시설 그룹 소속
+        { name: "prcsgFcltYn", fieldName: "prcsgFcltYn", header: { text: "전처리\n시설\n유무\n(유/무)" }, editable: false },
+        { name: "ddrztnEqpmYn", fieldName: "ddrztnEqpmYn", header: { text: "탈취설비\n유무\n(유/무)" }, editable: false },
+        { name: "oslfEtgtYn", fieldName: "oslfEtgtYn", header: { text: "자가발전\n유무\n(유/무)" }, editable: false },
+        
+        // 단일 컬럼
+        { name: "dschgWtrsExpln", fieldName: "dschgWtrsExpln", header: { text: "방류수역" }, editable: false },
+        
+        // 최종처분량(ton/년) 그룹 소속
+        { name: "prcptnLastDspsQnt", fieldName: "prcptnLastDspsQnt", header: { text: "침사" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "ctmnLastDspsQnt", fieldName: "ctmnLastDspsQnt", header: { text: "협잡물" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 최종처분방법 그룹 소속
+        { name: "prcptnLastDspsMthdExpln", fieldName: "prcptnLastDspsMthdExpln", header: { text: "침사" }, editable: false },
+        { name: "ctmnLastDspsMthdExpln", fieldName: "ctmnLastDspsMthdExpln", header: { text: "협잡물" }, editable: false },
+        
+        // 운영실적 그룹 소속
+        { name: "oprtngDayCnt", fieldName: "oprtngDayCnt", header: { text: "가동일수\n(일/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "grssMltvQnt", fieldName: "grssMltvQnt", header: { text: "총배수량(㎡/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "fcltNm", 
+        "fcltPstnCn", 
+        "fcltyKndCn",
+        "oprtngStrtYmd", 
+        "planDesignFreqCnt",
+        "wtrStrgZoneArea",
+        { name: "rsvrGroup", header: { text: "유수지" }, items: ["rsvrYn", "rsvrImpndQnt"] },
+        { name: "abstnRgnGroup", header: { text: "흡수정" }, items: ["abstnRgnImdQnt"] },
+        { 
+            name: "pumpFcltyGroup", 
+            header: { text: "펌프시설" }, 
+            items: [
+                 "grssPpqty",
+                { name: "pump1SubGroup", header: { text: "펌프시설1" }, items: ["pumpFcltN1DmtrExpln", "pumpFcltN1PerPpqty", "pumpFcltN1PumpCnt", "pumpFcltN1RsrvPumpCnt"] },
+                { name: "pump2SubGroup", header: { text: "펌프시설2" }, items: ["pumpFcltN2DmtrExpln", "pumpFcltN2PerPpqty", "pumpFcltN2PumpCnt", "pumpFcltN2RsrvPumpCnt"] },
+                { name: "pump3SubGroup", header: { text: "펌프시설3" }, items: ["pumpFcltN3DmtrExpln", "pumpFcltN3PerPpqty", "pumpFcltN3PumpCnt", "pumpFcltN3RsrvPumpCnt"] }
+            ] 
+        },
+        { name: "subFcltGroup", header: { text: "부대시설" }, items: ["prcsgFcltYn", "ddrztnEqpmYn", "oslfEtgtYn"] },
+        "dschgWtrsExpln",
+        { name: "lastDspsGroup", header: { text: "최종처분량(ton/년)" }, items: ["prcptnLastDspsQnt", "ctmnLastDspsQnt"] },
+        { name: "lastMthdGroup", header: { text: "최종처분방법" }, items: ["prcptnLastDspsMthdExpln", "ctmnLastDspsMthdExpln"] },
+        { name: "oprtngGroup", header: { text: "운영실적" }, items: ["oprtngDayCnt", "grssMltvQnt"] }
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerReservoir/SewerReservoirStatusColumn.ts b/apps/st/src/components/util/column/total/sewerReservoir/SewerReservoirStatusColumn.ts
new file mode 100644
index 000000000..311cb6867
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerReservoir/SewerReservoirStatusColumn.ts
@@ -0,0 +1,101 @@
+import { ValueType } from "realgrid";
+
+export const ReservoirStatusColumnConfig = {
+    tabKey: "ST00040001",
+    tabLabel: "하수저류시설",
+    rowStartNum: 2,
+    fixedColumns: 2,
+    columns: [
+        // 행정구역 그룹 소속
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        // 단일 컬럼들
+        { name: "fcltNm", fieldName: "fcltNm", header: { text: "시설명" }, editable: false },
+        { name: "fcltPstnCn", fieldName: "fcltPstnCn", header: { text: "위치" }, editable: false },
+        { name: "oprtngStrtYmd", fieldName: "oprtngStrtYmd", header: { text: "가동개시\n년월일\nyyyy-mm-dd" }, editable: false },
+        { name: "planDesignFreqCnt", fieldName: "planDesignFreqCnt", header: { text: "계획설계빈도" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 설치목적 그룹 소속 (O,X로 표기, 중복체크가능)
+        { name: "fldngPrvtnYn", fieldName: "fldngPrvtnYn", header: { text: "침수예방" }, editable: false },
+        { name: "wqPlltnMtgtYn", fieldName: "wqPlltnMtgtYn", header: { text: "수질오염저감" }, editable: false },
+        { name: "rtlztnUsgYn", fieldName: "rtlztnUsgYn", header: { text: "하수\n재이용\n용도" }, editable: false },
+        
+        // 단일 컬럼들
+        { name: "fcltStrctCn", fieldName: "fcltStrctCn", header: { text: "시설구조\n(일반지하식,\n지하터널식,\n기타)" }, editable: false },
+        { name: "wtrStrgZoneArea", fieldName: "wtrStrgZoneArea", header: { text: "접수구역면적(㎢)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false },
+        { name: "impdFcltCpct", fieldName: "impdFcltCpct", header: { text: "시설용량(㎥)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "grssPpqty", fieldName: "grssPpqty", header: { text: "총양수량\n(㎥/min)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 펌프시설 > 펌프시설1 그룹 소속
+        { name: "pumpFcltN1DmtrExpln", fieldName: "pumpFcltN1DmtrExpln", header: { text: "구경(mm)" }, editable: false },
+        { name: "pumpFcltN1PerPpqty", fieldName: "pumpFcltN1PerPpqty", header: { text: "대당 양수량\n(㎥/min·대)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "pumpFcltN1PumpCnt", fieldName: "pumpFcltN1PumpCnt", header: { text: "펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "pumpFcltN1RsrvPumpCnt", fieldName: "pumpFcltN1RsrvPumpCnt", header: { text: "예비펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 펌프시설 > 펌프시설2 그룹 소속
+        { name: "pumpFcltN2DmtrExpln", fieldName: "pumpFcltN2DmtrExpln", header: { text: "구경(mm)" }, editable: false },
+        { name: "pumpFcltN2PerPpqty", fieldName: "pumpFcltN2PerPpqty", header: { text: "대당 양수량\n(㎥/min·대)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "pumpFcltN2PumpCnt", fieldName: "pumpFcltN2PumpCnt", header: { text: "펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "pumpFcltN2RsrvPumpCnt", fieldName: "pumpFcltN2RsrvPumpCnt", header: { text: "예비펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 펌프시설 > 펌프시설3 그룹 소속
+        { name: "pumpFcltN3DmtrExpln", fieldName: "pumpFcltN3DmtrExpln", header: { text: "구경(mm)" }, editable: false },
+        { name: "pumpFcltN3PerPpqty", fieldName: "pumpFcltN3PerPpqty", header: { text: "대당 양수량\n(㎥/min·대)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "pumpFcltN3PumpCnt", fieldName: "pumpFcltN3PumpCnt", header: { text: "펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "pumpFcltN3RsrvPumpCnt", fieldName: "pumpFcltN3RsrvPumpCnt", header: { text: "예비펌프대수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 부대시설 그룹 소속
+        { name: "prcsgFcltYn", fieldName: "prcsgFcltYn", header: { text: "전처리\n시설\n유무\n(유/무)" }, editable: false },
+        { name: "ddrztnEqpmYn", fieldName: "ddrztnEqpmYn", header: { text: "탈취설비\n유무\n(유/무)" }, editable: false },
+        { name: "oslfEtgtYn", fieldName: "oslfEtgtYn", header: { text: "자가발전\n유무\n(유/무)" }, editable: false },
+        
+        // 단일 컬럼들
+        { name: "mltvMthCn", fieldName: "mltvMthCn", header: { text: "배수방식\n(자연배수,\n강제배수)" }, editable: false },
+        { name: "impdMthCn", fieldName: "impdMthCn", header: { text: "저류방식\n(직렬,병렬)" }, editable: false },
+        { name: "impdPrcsMthdCn", fieldName: "impdPrcsMthdCn", header: { text: "저류수\n처리방법\n(자체처리,\n연계처리)" }, editable: false },
+        { name: "dschgWtrsExpln", fieldName: "dschgWtrsExpln", header: { text: "방류수역\n(또는\n연계처리장명)" }, editable: false },
+        
+        // 최종처분량(ton/년) 그룹 소속
+        { name: "prcptnLastDspsQnt", fieldName: "prcptnLastDspsQnt", header: { text: "침사" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "ctmnLastDspsQnt", fieldName: "ctmnLastDspsQnt", header: { text: "협잡물" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 최종처분방법 그룹 소속
+        { name: "prcptnLastDspsMthdExpln", fieldName: "prcptnLastDspsMthdExpln", header: { text: "침사" }, editable: false },
+        { name: "ctmnLastDspsMthdExpln", fieldName: "ctmnLastDspsMthdExpln", header: { text: "협잡물" }, editable: false },
+        
+        // 운영실적 그룹 소속
+        { name: "oprtngDayCnt", fieldName: "oprtngDayCnt", header: { text: "가동일수\n(일/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "grssMltvQnt", fieldName: "grssMltvQnt", header: { text: "총배수량(㎡/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "fcltNm", 
+        "fcltPstnCn", 
+        "oprtngStrtYmd", 
+        "planDesignFreqCnt",
+        { name: "purposeGroup", header: { text: "설치목적(O,X로 표기, 중복체크가능)" }, items: ["fldngPrvtnYn", "wqPlltnMtgtYn", "rtlztnUsgYn"] },
+        "fcltStrctCn", 
+        "wtrStrgZoneArea", 
+        "impdFcltCpct", 
+        { 
+            name: "pumpFcltyGroup", 
+            header: { text: "펌프시설" }, 
+            items: [
+                "grssPpqty",
+                { name: "pump1SubGroup", header: { text: "펌프시설1" }, items: ["pumpFcltN1DmtrExpln", "pumpFcltN1PerPpqty", "pumpFcltN1PumpCnt", "pumpFcltN1RsrvPumpCnt"] },
+                { name: "pump2SubGroup", header: { text: "펌프시설2" }, items: ["pumpFcltN2DmtrExpln", "pumpFcltN2PerPpqty", "pumpFcltN2PumpCnt", "pumpFcltN2RsrvPumpCnt"] },
+                { name: "pump3SubGroup", header: { text: "펌프시설3" }, items: ["pumpFcltN3DmtrExpln", "pumpFcltN3PerPpqty", "pumpFcltN3PumpCnt", "pumpFcltN3RsrvPumpCnt"] }
+            ] 
+        },
+        { name: "subFcltGroup", header: { text: "부대시설" }, items: ["prcsgFcltYn", "ddrztnEqpmYn", "oslfEtgtYn"] },
+        "mltvMthCn", 
+        "impdMthCn", 
+        "impdPrcsMthdCn", 
+        "dschgWtrsExpln",
+        { name: "lastDspsGroup", header: { text: "최종처분량(ton/년)" }, items: ["prcptnLastDspsQnt", "ctmnLastDspsQnt"] },
+        { name: "lastMthdGroup", header: { text: "최종처분방법" }, items: ["prcptnLastDspsMthdExpln", "ctmnLastDspsMthdExpln"] },
+        { name: "oprtngGroup", header: { text: "운영실적" }, items: ["oprtngDayCnt", "grssMltvQnt"] }
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerageFinancial/SewerageFeeTab2Column.ts b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageFeeTab2Column.ts
new file mode 100644
index 000000000..2424c4ce7
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageFeeTab2Column.ts
@@ -0,0 +1,24 @@
+import { ValueType } from "realgrid";
+
+export const SewerageFeeTab2ColumnConfig = {
+    tabKey: "ST00090002",
+    tabLabel: "하수도 요금",
+    rowStartNum: 2,
+    fixedColumns: 3,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        { name: "anlLevyQnt", fieldName: "anlLevyQnt", header: { text: "연간조정량(㎡)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "levyAmt", fieldName: "levyAmt", header: { text: "하수도사용료수익(원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "avgUntprcAmt", fieldName: "avgUntprcAmt", header: { text: "㎡당 요금(원/㎡)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "grssPrmcoAmt", fieldName: "grssPrmcoAmt", header: { text: "총관원가(원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "grssUnitPrmcoAmt", fieldName: "grssUnitPrmcoAmt", header: { text: "㎡당원가(원/㎡)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "rlztnRt", fieldName: "rlztnRt", header: { text: "현실화율(%)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "anlLevyQnt", "levyAmt", "avgUntprcAmt", "grssPrmcoAmt", "grssUnitPrmcoAmt", "rlztnRt"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerageFinancial/SewerageFinancialTab1Column.ts b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageFinancialTab1Column.ts
new file mode 100644
index 000000000..78589a22d
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageFinancialTab1Column.ts
@@ -0,0 +1,58 @@
+import { ValueType } from "realgrid";
+
+export const SewerageFinancialTab1ColumnConfig = {
+    tabKey: "ST00090001",
+    tabLabel: "하수도재정 결산",
+    rowStartNum: 3,
+    fixedColumns: 1,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        { name: "crfwAmt", fieldName: "crfwAmt", header: { text: "이월액" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "lbltAmt", fieldName: "lbltAmt", header: { text: "부채액\n(백만원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        { name: "usgByWholPjtcoAmt", fieldName: "usgByWholPjtcoAmt", header: { text: "계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        { name: "tmplntWholAmt", fieldName: "tmplntWholAmt", header: { text: "소계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "tmplntFcltAmt", fieldName: "tmplntFcltAmt", header: { text: "시설비" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "tmplntMendngAmt", fieldName: "tmplntMendngAmt", header: { text: "개보수비" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "tmplntOperKeepAmt", fieldName: "tmplntOperKeepAmt", header: { text: "운영\n유지비" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "tmplntEtcAmt", fieldName: "tmplntEtcAmt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        { name: "wholSwagePplAmt", fieldName: "wholSwagePplAmt", header: { text: "소계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "swagePplFcltAmt", fieldName: "swagePplFcltAmt", header: { text: "시설비" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "swagePplMendngAmt", fieldName: "swagePplMendngAmt", header: { text: "개보수비" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "swagePplOperKeepAmt", fieldName: "swagePplOperKeepAmt", header: { text: "운영\n유지비" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "swagePplEtcAmt", fieldName: "swagePplEtcAmt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        { name: "wholSwageImdpFcltAmt", fieldName: "wholSwageImdpFcltAmt", header: { text: "소계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "swageImpdFcltAmt", fieldName: "swageImpdFcltAmt", header: { text: "시설비" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "swageImpdMendngAmt", fieldName: "swageImpdMendngAmt", header: { text: "개보수비" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "swageImpdOperKeepAmt", fieldName: "swageImpdOperKeepAmt", header: { text: "운영\n유지비" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "swageImpdFcltEtcAmt", fieldName: "swageImpdFcltEtcAmt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        { name: "etcWholAmt", fieldName: "etcWholAmt", header: { text: "소계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "etcAcdntCrfwAmt", fieldName: "etcAcdntCrfwAmt", header: { text: "사고\n이월액" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "etcNrcpAmt", fieldName: "etcNrcpAmt", header: { text: "미수납액" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "etcAmt", fieldName: "etcAmt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "crfwAmt",
+  
+        {
+            name: "purposeGroup",
+            header: { text: "용도별사업비(백만원)" },
+            items: [
+                   
+                "usgByWholPjtcoAmt",
+                { name: "t1Group", header: { text: "처리장" }, items: ["tmplntWholAmt", "tmplntFcltAmt", "tmplntMendngAmt", "tmplntOperKeepAmt", "tmplntEtcAmt"] },
+                { name: "t2Group", header: { text: "하수관로" }, items: ["wholSwagePplAmt", "swagePplFcltAmt", "swagePplMendngAmt", "swagePplOperKeepAmt", "swagePplEtcAmt"] },
+                { name: "t3Group", header: { text: "유수지 및 배수펌프장" }, items: ["wholSwageImdpFcltAmt", "swageImpdFcltAmt", "swageImpdMendngAmt", "swageImpdOperKeepAmt", "swageImpdFcltEtcAmt"] },
+                { name: "t4Group", header: { text: "기타" }, items: ["etcWholAmt", "etcAcdntCrfwAmt", "etcNrcpAmt", "etcAmt"] }
+            ]
+        }
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerageFinancial/SewerageOrgCauseTab4Column.ts b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageOrgCauseTab4Column.ts
new file mode 100644
index 000000000..af0afc329
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageOrgCauseTab4Column.ts
@@ -0,0 +1,38 @@
+import { ValueType } from "realgrid";
+
+export const SewerageOrgCauseTab4ColumnConfig = {
+    tabKey: "ST00090004",
+    tabLabel: "원인자부담금",
+    rowStartNum: 3,
+    fixedColumns: 3,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        { name: "levyEvntcsCnt", fieldName: "levyEvntcsCnt", header: { text: "건수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "levyAmt", fieldName: "levyAmt", header: { text: "금액(백만원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        { name: "trgtByWholClctnEvntcsCnt", fieldName: "trgtByWholClctnEvntcsCnt", header: { text: "건수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "trgtByWholClctnAmt", fieldName: "trgtByWholClctnAmt", header: { text: "금액(백만원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        { name: "mltvEqpmEvntcsCnt", fieldName: "mltvEqpmEvntcsCnt", header: { text: "건수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "mltvEqpmAmt", fieldName: "mltvEqpmAmt", header: { text: "금액(백만원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        { name: "othrCstrnOthrActrCnt", fieldName: "othrCstrnOthrActrCnt", header: { text: "건수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "othrCstrnOthrActrAmt", fieldName: "othrCstrnOthrActrAmt", header: { text: "금액(백만원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        { name: "levyGroup", header: { text: "부과액" }, items: ["levyEvntcsCnt", "levyAmt"] },
+        {
+            name: "collectionStatusGroup",
+            header: { text: "대상별 징수현황" },
+            items: [
+                { name: "c1Group", header: { text: "계" }, items: ["trgtByWholClctnEvntcsCnt", "trgtByWholClctnAmt"] },
+                { name: "c2Group", header: { text: "배수설비설치자\n(하수도법 제61조 제1항)" }, items: ["mltvEqpmEvntcsCnt", "mltvEqpmAmt"] },
+                { name: "c3Group", header: { text: "타공사·타행위자\n(하수도법 제61조 제2항)" }, items: ["othrCstrnOthrActrCnt", "othrCstrnOthrActrAmt"] }
+            ]
+        }
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerageFinancial/SewerageUsageFeeTab3Column.ts b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageUsageFeeTab3Column.ts
new file mode 100644
index 000000000..5bfe56b94
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageUsageFeeTab3Column.ts
@@ -0,0 +1,62 @@
+import { ValueType } from "realgrid";
+
+export const SewerageUsageFeeTab3ColumnConfig = {
+    tabKey: "ST00090003",
+    tabLabel: "하수도 사용료",
+    rowStartNum: 3,
+    fixedColumns: 3,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        { name: "levyAmt", fieldName: "levyAmt", header: { text: "부과액(백만원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "levyQnt", fieldName: "levyQnt", header: { text: "부과량(천톤)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 가정용
+        { name: "hshusLevyAmt", fieldName: "hshusLevyAmt", header: { text: "부과액" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "hshusLevyQnt", fieldName: "hshusLevyQnt", header: { text: "부과량" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "hshusUntprcAmt", fieldName: "hshusUntprcAmt", header: { text: "단가" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 업무용
+        { name: "taskFrLevyAmt", fieldName: "taskFrLevyAmt", header: { text: "부과액" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "taskFrLevyQnt", fieldName: "taskFrLevyQnt", header: { text: "부과량" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "taskFrUntprcAmt", fieldName: "taskFrUntprcAmt", header: { text: "단가" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 영업용(일반용)
+        { name: "bsnGnrlLevyAmt", fieldName: "bsnGnrlLevyAmt", header: { text: "부과액(백만원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "bsnGnrlLevyQnt", fieldName: "bsnGnrlLevyQnt", header: { text: "부과량(천톤)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "bsnGnrlUntprcAmt", fieldName: "bsnGnrlUntprcAmt", header: { text: "단가(원/톤)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 욕탕 1종
+        { name: "massBthhsFrLevyAmt", fieldName: "massBthhsFrLevyAmt", header: { text: "부과액(백만원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "massBthhsFrLevyQnt", fieldName: "massBthhsFrLevyQnt", header: { text: "부과량(천톤)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "massBthhsFrUntprcAmt", fieldName: "massBthhsFrUntprcAmt", header: { text: "단가(원/톤)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 욕탕 2종
+        { name: "bthhsFrSpcs2LevyAmt", fieldName: "bthhsFrSpcs2LevyAmt", header: { text: "부과액" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "bthhsFrSpcs2LevyQnt", fieldName: "bthhsFrSpcs2LevyQnt", header: { text: "부과량" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "bthhsFrSpcs2UntprcAmt", fieldName: "bthhsFrSpcs2UntprcAmt", header: { text: "단가" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 산업 및 공업용
+        { name: "induMdsrLevyAmt", fieldName: "induMdsrLevyAmt", header: { text: "부과액(백만원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "induMdsrLevyQnt", fieldName: "induMdsrLevyQnt", header: { text: "부과량(천톤)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "induMdsrUntprcAmt", fieldName: "induMdsrUntprcAmt", header: { text: "단가(원/톤)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 기타
+        { name: "etcLevyAmt", fieldName: "etcLevyAmt", header: { text: "부과액" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "etcLevyQnt", fieldName: "etcLevyQnt", header: { text: "부과량" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "etcLevyUntprcAmt", fieldName: "etcLevyUntprcAmt", header: { text: "단가" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        { name: "totalGroup", header: { text: "총계" }, items: ["levyAmt", "levyQnt"] },
+        { name: "g1Group", header: { text: "가정용" }, items: ["hshusLevyAmt", "hshusLevyQnt", "hshusUntprcAmt"] },
+        { name: "g2Group", header: { text: "업무용" }, items: ["taskFrLevyAmt", "taskFrLevyQnt", "taskFrUntprcAmt"] },
+        { name: "g3Group", header: { text: "영업용(일반용)" }, items: ["bsnGnrlLevyAmt", "bsnGnrlLevyQnt", "bsnGnrlUntprcAmt"] },
+        { name: "g4Group", header: { text: "욕탕 1종(대중탕용)" }, items: ["massBthhsFrLevyAmt", "massBthhsFrLevyQnt", "massBthhsFrUntprcAmt"] },
+        { name: "g5Group", header: { text: "욕탕2종" }, items: ["bthhsFrSpcs2LevyAmt", "bthhsFrSpcs2LevyQnt", "bthhsFrSpcs2UntprcAmt"] },
+        { name: "g6Group", header: { text: "산업 및 공업용" }, items: ["induMdsrLevyAmt", "induMdsrLevyQnt", "induMdsrUntprcAmt"] },
+        { name: "g7Group", header: { text: "기타" }, items: ["etcLevyAmt", "etcLevyQnt", "etcLevyUntprcAmt"] }
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerageReuse/SewerageGrayWaterTab2Column.ts b/apps/st/src/components/util/column/total/sewerageReuse/SewerageGrayWaterTab2Column.ts
new file mode 100644
index 000000000..6987edb66
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerageReuse/SewerageGrayWaterTab2Column.ts
@@ -0,0 +1,48 @@
+import { ValueType } from "realgrid";
+
+export const SewerageGrayWaterTab2ColumnConfig = {
+    tabKey: "ST00100002",
+    tabLabel: "중수도 현황",
+    rowStartNum: 2, // 2단 그룹 헤더이므로 rowStartNum은 2로 지정합니다.
+    fixedColumns: 1,
+    columns: [
+        // 행정구역 그룹 소속
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        // 단일 마스터 컬럼들 (image_103ea5 스펙 반영)
+        { name: "fcltNm", fieldName: "fcltNm", header: { text: "건축물명/\n개발사업명" }, editable: false },
+        { name: "bldgSeCn", fieldName: "bldgSeCn", header: { text: "시설물용도/\n개발사업종류" }, editable: false },
+        { name: "fcltPstnCn", fieldName: "fcltPstnCn", header: { text: "주소" }, editable: false },
+        { name: "lglTrgtYn", fieldName: "lglTrgtYn", header: { text: "법적의무\n대상여부\n(대상/미대상)" }, editable: false },
+        { name: "cmptnStrtYmd", fieldName: "cmptnStrtYmd", header: { text: "설치완료일\nyyyy-mm-dd" }, editable: false },
+        { name: "oprtngStrtYmd", fieldName: "oprtngStrtYmd", header: { text: "가동개시일\nyyyy-mm-dd" }, editable: false },
+        
+        // 시설현황 그룹 소속
+        { name: "archWholArea", fieldName: "archWholArea", header: { text: "건축연면적\n(㎡)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "prcsCpct", fieldName: "prcsCpct", header: { text: "처리용량\n(㎡/일)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 이용 현황 소속 컬럼들
+        { name: "wtrUseQnt", fieldName: "wtrUseQnt", header: { text: "물 사용량\n(㎡/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "ruswtrUtztnQnt", fieldName: "ruswtrUtztnQnt", header: { text: "중수도\n이용량(㎡/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "sbstCntUtztnQnt", fieldName: "sbstCntUtztnQnt", header: { text: "대체수\n이용량(㎡/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "mnUsgCn", fieldName: "mnUsgCn", header: { text: "중수도용도" }, editable: false },
+        { name: "ruswtrOperAmt", fieldName: "ruswtrOperAmt", header: { text: "연간운영비\n(백만원/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "fcltNm", 
+        "bldgSeCn", 
+        "fcltPstnCn", 
+        "lglTrgtYn", 
+        "cmptnStrtYmd", 
+        "oprtngStrtYmd",
+        { name: "facilityStatusGroup", header: { text: "시설현황" }, items: ["archWholArea", "prcsCpct"] },
+        "wtrUseQnt", 
+        "ruswtrUtztnQnt", 
+        "sbstCntUtztnQnt", 
+        "mnUsgCn", 
+        "ruswtrOperAmt"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerageReuse/SewerageRainwaterTab3Column.ts b/apps/st/src/components/util/column/total/sewerageReuse/SewerageRainwaterTab3Column.ts
new file mode 100644
index 000000000..84d3d0a7e
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerageReuse/SewerageRainwaterTab3Column.ts
@@ -0,0 +1,33 @@
+import { ValueType } from "realgrid";
+
+export const SewerageRainwaterTab3ColumnConfig = {
+    tabKey: "ST00100003",
+    tabLabel: "빗물이용시설현황",
+    rowStartNum: 2,
+    fixedColumns: 3,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        { name: "fcltNm", fieldName: "fcltNm", header: { text: "시설명" }, editable: false },
+        { name: "bdstTypCn", fieldName: "bdstTypCn", header: { text: "건축물용도" }, editable: false },
+        { name: "fcltPstnCn", fieldName: "fcltPstnCn", header: { text: "위치(주소)" }, editable: false },
+        { name: "lglTrgtYn", fieldName: "lglTrgtYn", header: { text: "법적의무 대상여부\n(대상/미대상)" }, editable: false },
+        { name: "instlCmptnYmd", fieldName: "instlCmptnYmd", header: { text: "설치완료일\n(yyyy-mm-dd)" }, editable: false },
+        { name: "instlAmt", fieldName: "instlAmt", header: { text: "설치비\n(백만원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "rcptMynCn", fieldName: "rcptMynCn", header: { text: "집수면 종류" }, editable: false },
+        { name: "filtrPrcsFcltYnExpln", fieldName: "filtrPrcsFcltYnExpln", header: { text: "여과등 처리시설 유무" }, editable: false },
+        { name: "impdCpct", fieldName: "impdCpct", header: { text: "저류조 용량(㎥)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 이용 현황 그룹 소속
+        { name: "anlUseQnt", fieldName: "anlUseQnt", header: { text: "연간 이용량\n(㎥/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "exlnUtlzUsgExpln", fieldName: "exlnUtlzUsgExpln", header: { text: "이용용도" }, editable: false },
+        { name: "anlOperAmt", fieldName: "anlOperAmt", header: { text: "연간운영비\n(백만원/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "fcltNm", "bdstTypCn", "fcltPstnCn", "lglTrgtYn", "instlCmptnYmd", "instlAmt", "rcptMynCn", "filtrPrcsFcltYnExpln", "impdCpct",
+       "anlUseQnt", "exlnUtlzUsgExpln", "anlOperAmt"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerageReuse/SewerageReuseTab1Column.ts b/apps/st/src/components/util/column/total/sewerageReuse/SewerageReuseTab1Column.ts
new file mode 100644
index 000000000..6534fa651
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerageReuse/SewerageReuseTab1Column.ts
@@ -0,0 +1,89 @@
+import { ValueType } from "realgrid";
+
+export const SewerageReuseTab1ColumnConfig = {
+    tabKey: "ST00100001",
+    tabLabel: "공공하수처리수 재이용",
+    rowStartNum: 4, // 3단 계층 다단 헤더 구조이므로 4로 유지합니다.
+    fixedColumns: 1,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        // 하수처리장
+        { name: "swtrmtFcltNm", fieldName: "swtrmtFcltNm", header: { text: "시설명" }, editable: false },
+        { name: "sncnYmd", fieldName: "sncnYmd", header: { text: "인가일\n(년/월/일)" }, editable: false },
+        { name: "prcsFcltCpct", fieldName: "prcsFcltCpct", header: { text: "시설용량\n(㎥/일)" }, editable: false },
+        { name: "prcsQnt", fieldName: "prcsQnt", header: { text: "연간\n하수처리량\n(천톤/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "lglYn", fieldName: "lglYn", header: { text: "법적의무대상\n(대상/미대상)" }, editable: false },
+        
+        // 재이용시설 설치시 소속
+        { name: "instlYn", fieldName: "instlYn", header: { text: "설치유무\n(유/무)" }, editable: false },
+        { name: "oprtngStrtYmd", fieldName: "oprtngStrtYmd", header: { text: "가동개시일\nyyyy-mm-dd" }, editable: false },
+        { name: "instlAprvYmd", fieldName: "instlAprvYmd", header: { text: "설치승인일\nyyyy-mm-dd" }, editable: false },
+        { name: "rprcsFcltCpct", fieldName: "rprcsFcltCpct", header: { text: "용량(톤/일)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "mtcnsNm", fieldName: "mtcnsNm", header: { text: "공법/기자재" }, editable: false },
+        { name: "ruswtPplLen", fieldName: "ruswtPplLen", header: { text: "공급관로길이\n(km)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false },
+        { name: "ruswtPumpLen", fieldName: "ruswtPumpLen", header: { text: "공급펌프\n(톤/일)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 하수처리수 재이용현황
+        { name: "wholUseQnt", fieldName: "wholUseQnt", header: { text: "총계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "ithlWshwtrQnt", fieldName: "ithlWshwtrQnt", header: { text: "계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "ithlClnQty", fieldName: "ithlClnQty", header: { text: "세척수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "ithlFrzgQty", fieldName: "ithlFrzgQty", header: { text: "냉각수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "ithlLdhcUswtrQnt", fieldName: "ithlLdhcUswtrQnt", header: { text: "청소수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "ithlDltnUswtrQnt", fieldName: "ithlDltnUswtrQnt", header: { text: "조경용수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "ithlRuswtrQnt", fieldName: "ithlRuswtrQnt", header: { text: "희석용수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "ithlEtcQnt", fieldName: "ithlEtcQnt", header: { text: "장내중수도" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "ithlUnsdQnt", fieldName: "ithlUnsdQnt", header: { text: "장내기타용수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        { name: "otcntrUswtrWhol", fieldName: "otcntrUswtrWhol", header: { text: "계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otcntrClnRstrmQnt", fieldName: "otcntrClnRstrmQnt", header: { text: "청소·화장실\n용수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otcntrWshwtrQnt", fieldName: "otcntrWshwtrQnt", header: { text: "세척·살수용수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otcntrLdhcUswtrQnt", fieldName: "otcntrLdhcUswtrQnt", header: { text: "조경용수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otcntrHdrplUswtrQnt", fieldName: "otcntrHdrplUswtrQnt", header: { text: "친수용수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otcntrRvrKeepQnt", fieldName: "otcntrRvrKeepQnt", header: { text: "하천유지용수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "agrcltUswtrPstnQnt", fieldName: "agrcltUswtrPstnQnt", header: { text: "농업용수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "ugwtrChargQnt", fieldName: "ugwtrChargQnt", header: { text: "지하수충전" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "mdsrUswtrQnt", fieldName: "mdsrUswtrQnt", header: { text: "공업용수" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        { name: "rtlztnRt", fieldName: "rtlztnRt", header: { text: "재이용률\n(%)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        { name: "seweragePlantGroup", header: { text: "하수처리장" }, items: ["swtrmtFcltNm", "sncnYmd", "prcsFcltCpct", "prcsQnt", "lglYn"] },
+        {
+            name: "reuseFacilityGroup",
+            header: { text: "재이용시설" },
+            items: [
+                "instlYn",
+                { 
+                    name: "installationGroup", 
+                    header: { text: "재이용시설 설치시" }, 
+                    items: [
+                        "oprtngStrtYmd", 
+                        "instlAprvYmd", 
+                        {
+                            // ★ 핵심 교정: 이미지 명세에 맞춰 내부에 서브 그룹 헤더 추가 완료
+                            name: "reProcessingFacilityGroup",
+                            header: { text: "재처리시설" },
+                            items: ["rprcsFcltCpct", "mtcnsNm"]
+                        },
+                        "ruswtPplLen", 
+                        "ruswtPumpLen"
+                    ] 
+                }
+            ]
+        },
+        {
+            name: "reuseStatusGroup",
+            header: { text: "하수처리수 재이용현황(천톤/년)" },
+            items: [
+                "wholUseQnt",
+                { name: "internalWaterGroup", header: { text: "장내 용수" }, items: ["ithlWshwtrQnt", "ithlClnQty", "ithlFrzgQty", "ithlLdhcUswtrQnt", "ithlDltnUswtrQnt", "ithlRuswtrQnt", "ithlEtcQnt", "ithlUnsdQnt"] },
+                { name: "externalWaterGroup", header: { text: "장외 용수" }, items: ["otcntrUswtrWhol", "otcntrClnRstrmQnt", "otcntrWshwtrQnt", "otcntrLdhcUswtrQnt", "otcntrHdrplUswtrQnt", "otcntrRvrKeepQnt", "agrcltUswtrPstnQnt", "ugwtrChargQnt", "mdsrUswtrQnt"] }
+            ]
+        },
+        "rtlztnRt"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerageReuse/SewerageWwtRtlztnRegTab4Column.ts b/apps/st/src/components/util/column/total/sewerageReuse/SewerageWwtRtlztnRegTab4Column.ts
new file mode 100644
index 000000000..2d51a5354
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerageReuse/SewerageWwtRtlztnRegTab4Column.ts
@@ -0,0 +1,28 @@
+
+
+
+export const SewerageWwtRtlztnRegTab4ColumnConfig = {
+    tabKey: "ST00100004",
+    tabLabel: "하·폐수처리수재이용시설설계시공업등록현황",
+    rowStartNum: 2, // 행정구역 2단 묶음 헤더 구조이므로 2로 지정합니다.
+    fixedColumns: 1,
+    columns: [
+        // 행정구역 그룹 소속
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        // 메인 마스터 문자열 지표들 (화면 그리드 명세서 순서 100% 매칭)
+        { name: "bplcNm", fieldName: "bplcNm", header: { text: "상호(명칭)" }, editable: false },
+        { name: "rprsvNm", fieldName: "rprsvNm", header: { text: "대표자" }, editable: false },
+        { name: "bplcPstnCn", fieldName: "bplcPstnCn", header: { text: "주소" }, editable: false },
+        { name: "regDt", fieldName: "regDt", header: { text: "등록일\nyyyy-mm-dd" }, editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "bplcNm", 
+        "rprsvNm", 
+        "bplcPstnCn", 
+        "regDt"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerageReuse/SewerageWwtRtlztnSncnTab5Column.ts b/apps/st/src/components/util/column/total/sewerageReuse/SewerageWwtRtlztnSncnTab5Column.ts
new file mode 100644
index 000000000..148bc1927
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerageReuse/SewerageWwtRtlztnSncnTab5Column.ts
@@ -0,0 +1,25 @@
+export const SewerageWwtRtlztnSncnTab5ColumnConfig = {
+    tabKey: "ST00100005",
+    tabLabel: "하·폐수처리수재이용시설사업인가현황",
+    rowStartNum: 2, // 행정구역 2단 레이아웃에 최적화
+    fixedColumns: 1,
+    columns: [
+        // 행정구역 그룹 소속
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        
+        // 사업자 정보 필드 매핑
+        { name: "bplcNm", fieldName: "bplcNm", header: { text: "상호(명칭)" }, editable: false },
+        { name: "rprsvNm", fieldName: "rprsvNm", header: { text: "대표자" }, editable: false },
+        { name: "bplcPstnCn", fieldName: "bplcPstnCn", header: { text: "주소" }, editable: false },
+        { name: "coRegYmd", fieldName: "coRegYmd", header: { text: "인가일\n(년/월/일)" }, editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "bplcNm", 
+        "rprsvNm", 
+        "bplcPstnCn", 
+        "coRegYmd"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerageServiceLevel/ComplaintTotColumn.ts b/apps/st/src/components/util/column/total/sewerageServiceLevel/ComplaintTotColumn.ts
new file mode 100644
index 000000000..3d06e995a
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerageServiceLevel/ComplaintTotColumn.ts
@@ -0,0 +1,36 @@
+import { ValueType } from "realgrid";
+
+export const SewageComplaintTab1ColumnConfig = {
+    tabKey: "ST00130001",
+    tabLabel: "민원",
+    rowStartNum: 3, // 행정구역 3단 헤더
+    fixedColumns: 1,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        { name: "swtrmtPpltnCnt", fieldName: "swtrmtPpltnCnt", header: { text: "하수처리인구\n(명)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        // 민원유형
+        { name: "whol", fieldName: "whol", header: { text: "총계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "odorCnt", fieldName: "odorCnt", header: { text: "악취" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "swagePplCnt", fieldName: "swagePplCnt", header: { text: "하수관로" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "dschgWqCnt", fieldName: "dschgWqCnt", header: { text: "배수설비" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "ldsCnt", fieldName: "ldsCnt", header: { text: "맨홀" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "plltnAcdntCnt", fieldName: "plltnAcdntCnt", header: { text: "정화조" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "sewerCrgAmt", fieldName: "sewerCrgAmt", header: { text: "하수도요금" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "etcCnt", fieldName: "etcCnt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        
+        { name: "crtrPpltnCvlcptEvntcsCnt", fieldName: "crtrPpltnCvlcptEvntcsCnt", header: { text: "기준인구당\n민원건수\n(건/10,000명)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.00", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "swtrmtPpltnCnt",
+        { 
+            name: "complaintGroup", 
+            header: { text: "민원유형(건)" }, 
+            items: ["whol", "odorCnt", "swagePplCnt", "dschgWqCnt", "ldsCnt", "plltnAcdntCnt", "sewerCrgAmt", "etcCnt"] 
+        },
+        "crtrPpltnCvlcptEvntcsCnt"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sewerageServiceLevel/ResidentFriendlyFactTotColumn.ts b/apps/st/src/components/util/column/total/sewerageServiceLevel/ResidentFriendlyFactTotColumn.ts
new file mode 100644
index 000000000..82890e8b9
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sewerageServiceLevel/ResidentFriendlyFactTotColumn.ts
@@ -0,0 +1,34 @@
+import { ValueType } from "realgrid";
+
+export const ResidentFriendlyFacilityTab2ColumnConfig = {
+    tabKey: "ST00130002",
+    tabLabel: "주민친화시설",
+    rowStartNum: 3, // 행정구역 3단 헤더
+    fixedColumns: 1,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        { name: "swtrmtFcltNm", fieldName: "swtrmtFcltNm", header: { text: "처리장명" }, editable: false },
+        { name: "tmplntArea", fieldName: "tmplntArea", header: { text: "처리장\n면적(㎡)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        // 주민친화시설 면적
+        { name: "whol", fieldName: "whol", header: { text: "총계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "brkFcltArea", fieldName: "brkFcltArea", header: { text: "휴게시설" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "childFrshpSpacArea", fieldName: "childFrshpSpacArea", header: { text: "어린이놀이공간" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "bdySportsFcltArea", fieldName: "bdySportsFcltArea", header: { text: "체력단련시설" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "sportsFcltArea", fieldName: "sportsFcltArea", header: { text: "운동시설" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "pkltArea", fieldName: "pkltArea", header: { text: "주차장" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "eduMultiFcltArea", fieldName: "eduMultiFcltArea", header: { text: "교육 및\n문화시설" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "wtlndMakeArea", fieldName: "wtlndMakeArea", header: { text: "습지조성\n(생태공원)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "etcCnt", fieldName: "etcCnt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "swtrmtFcltNm", "tmplntArea",
+        { 
+            name: "facilityGroup", 
+            header: { text: "주민친화시설 면적(㎡)" }, 
+            items: ["whol", "brkFcltArea", "childFrshpSpacArea", "bdySportsFcltArea", "sportsFcltArea", "pkltArea", "eduMultiFcltArea", "wtlndMakeArea", "etcCnt"] 
+        }
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sludgeProcessing/DigestionTankTab2Column.ts b/apps/st/src/components/util/column/total/sludgeProcessing/DigestionTankTab2Column.ts
new file mode 100644
index 000000000..65b1c50bc
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sludgeProcessing/DigestionTankTab2Column.ts
@@ -0,0 +1,42 @@
+import { ValueType } from "realgrid";
+
+export const DigestionTankTab2ColumnConfig = {
+    tabKey: "ST00110002",
+    tabLabel: "소화조 운영현황",
+    rowStartNum: 3, // 행정구역, 하수처리장명 등 기본 정보 이후 다단 헤더가 있으므로 3단 지정
+    fixedColumns: 1,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        { name: "fcltNm", fieldName: "fcltNm", header: { text: "하수\n처리장명" }, editable: false },
+        
+        { name: "digesterYn", fieldName: "digesterYn", header: { text: "소화조 유/무\n(Y/N)선택" }, editable: false },
+        { name: "dsgnCpct", fieldName: "dsgnCpct", header: { text: "설계\n용량(㎥)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "actlOperCpct", fieldName: "actlOperCpct", header: { text: "실제운전\n용량(㎥)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "inputQnt", fieldName: "inputQnt", header: { text: "투입량\n(㎥/일)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "tsConc", fieldName: "tsConc", header: { text: "투입 TS 농도\n(%)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "oprtngDays", fieldName: "oprtngDays", header: { text: "가동일수\n(연간)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "gnrtGasQnt", fieldName: "gnrtGasQnt", header: { text: "발생가스량\n(㎥/일)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 소화가스 이용현황(하위 항목)
+        { name: "gasTotal", fieldName: "gasTotal", header: { text: "계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "gasSale", fieldName: "gasSale", header: { text: "판매" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "gasGen", fieldName: "gasGen", header: { text: "발전" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "gasSelf", fieldName: "gasSelf", header: { text: "자체활용" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "gasEtc", fieldName: "gasEtc", header: { text: "기타(CNG등)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        { name: "surplusGas", fieldName: "surplusGas", header: { text: "잉여가스량\n(㎥/일)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "fcltNm", 
+        { name: "operGroup", header: { text: "소화조 운영현황" }, items: ["digesterYn", "dsgnCpct", "actlOperCpct", "inputQnt", "tsConc", "oprtngDays", "gnrtGasQnt",
+             { 
+            name: "gasUsageGroup", 
+            header: { text: "소화가스 이용현황(㎥/일)" }, 
+            items: ["gasTotal", "gasSale", "gasGen", "gasSelf", "gasEtc"]
+        },"surplusGas"
+        ] },
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sludgeProcessing/HumanWasteSludgeTab4Column.ts b/apps/st/src/components/util/column/total/sludgeProcessing/HumanWasteSludgeTab4Column.ts
new file mode 100644
index 000000000..df6a57742
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sludgeProcessing/HumanWasteSludgeTab4Column.ts
@@ -0,0 +1,37 @@
+import { ValueType } from "realgrid";
+
+export const HumanWasteSludgeTab4ColumnConfig = {
+    tabKey: "ST00110004",
+    tabLabel: "분뇨찌꺼기(슬러지)처리현황",
+    rowStartNum: 2, // 행정구역 2단 레이아웃
+    fixedColumns: 1,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        { name: "fcltNm", fieldName: "fcltNm", header: { text: "분뇨\n처리장명" }, editable: false },
+        
+        { name: "gnam", fieldName: "gnam", header: { text: "발생량\n(A)=(B)+(C)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "wholDspsQnt", fieldName: "wholDspsQnt", header: { text: "계(B)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "rcycQnt", fieldName: "rcycQnt", header: { text: "재활용" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "olandLfvlm", fieldName: "olandLfvlm", header: { text: "육상매립" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "incnrQnt", fieldName: "incnrQnt", header: { text: "소각" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "oceanInputQnt", fieldName: "oceanInputQnt", header: { text: "해양투기" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "fuelQnt", fieldName: "fuelQnt", header: { text: "연료화" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "etcQnt", fieldName: "etcQnt", header: { text: "기타" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "nondspsQnt", fieldName: "nondspsQnt", header: { text: "미처분량\n(이월량)(C)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "swtrmtFcltNm", fieldName: "swtrmtFcltNm", header: { text: "타시설\n연계여부" }, editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "fcltNm",
+        "gnam",
+        { 
+            name: "dspsGroup", 
+            header: { text: "처분량" }, 
+            items: ["wholDspsQnt", "rcycQnt", "olandLfvlm", "incnrQnt", "oceanInputQnt", "fuelQnt", "etcQnt"] 
+        },
+        "nondspsQnt",
+        "swtrmtFcltNm"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sludgeProcessing/SewageSludgeOperTab3Column.ts b/apps/st/src/components/util/column/total/sludgeProcessing/SewageSludgeOperTab3Column.ts
new file mode 100644
index 000000000..c7a5786ce
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sludgeProcessing/SewageSludgeOperTab3Column.ts
@@ -0,0 +1,30 @@
+import { ValueType } from "realgrid";
+
+export const SewageSludgeOperTab3ColumnConfig = {
+    tabKey: "ST00110003",
+    tabLabel: "하수찌꺼기 처리시설 운영현황",
+    rowStartNum: 2,
+    fixedColumns: 1,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        { name: "fcltNm", fieldName: "fcltNm", header: { text: "찌꺼기처리\n시설명" }, editable: false },
+        
+        { name: "prcsMthExpln", fieldName: "prcsMthExpln", header: { text: "처리방식" }, editable: false },
+        { name: "fcltCpct", fieldName: "fcltCpct", header: { text: "시설용량\n(톤/일)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "anlPrcsQnt", fieldName: "anlPrcsQnt", header: { text: "연간처리량\n(톤/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "dayAvgOprtngHr", fieldName: "dayAvgOprtngHr", header: { text: "일평균\n가동시간\n(1~24)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "anlOprtngDayCnt", fieldName: "anlOprtngDayCnt", header: { text: "연중 가동일\n(1~330)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0", editable: false },
+        { name: "oprtngRt", fieldName: "oprtngRt", header: { text: "가동율(%)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "fcltNm",
+        { 
+            name: "operStatusGroup", 
+            header: { text: "처리시설 운영현황" }, 
+            items: ["prcsMthExpln", "fcltCpct", "anlPrcsQnt", "dayAvgOprtngHr", "anlOprtngDayCnt", "oprtngRt"] 
+        }
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/column/total/sludgeProcessing/SludgeProcessingTab1Column.ts b/apps/st/src/components/util/column/total/sludgeProcessing/SludgeProcessingTab1Column.ts
new file mode 100644
index 000000000..d61e6a535
--- /dev/null
+++ b/apps/st/src/components/util/column/total/sludgeProcessing/SludgeProcessingTab1Column.ts
@@ -0,0 +1,103 @@
+import { ValueType } from "realgrid";
+
+export const SludgeProcessingTab1ColumnConfig = {
+    tabKey: "ST00110001",
+    tabLabel: "찌꺼기(슬러지)처리시설현황",
+    rowStartNum: 4, // 3단 그룹 대단위 레이아웃 명세이므로 4로 바인딩합니다.
+    fixedColumns: 1,
+    columns: [
+        { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
+        { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
+        { name: "admdstNm", fieldName: "admdstNm", header: { text: "행정구역명" }, editable: false },
+        { name: "fcltNm", fieldName: "fcltNm", header: { text: "하수\n처리장명" }, editable: false },
+        
+        // 찌꺼기발생량
+        { name: "gnamWhol", fieldName: "gnamWhol", header: { text: "합계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "itslfQnt", fieldName: "itslfQnt", header: { text: "자체" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otsdInflwQnt", fieldName: "otsdInflwQnt", header: { text: "외부유입량" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 이송 및 함수율 지표들
+        { name: "transfTmplntNm", fieldName: "transfTmplntNm", header: { text: "이송처리장" }, editable: false },
+        { name: "transfPrcsQnt", fieldName: "transfPrcsQnt", header: { text: "이송처리량\n(㎥/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "srpFncRt", fieldName: "srpFncRt", header: { text: "함수율\n(%, 탈수기준)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "wholSrpPrcsQnt", fieldName: "wholSrpPrcsQnt", header: { text: "찌꺼기\n처리량 합계\n(톤/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 자체 처리 1차 대문 항목들
+        { name: "itslfTs1Whol", fieldName: "itslfTs1Whol", header: { text: "자체찌꺼기\n처리량 소계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "itslfTs1RclmQnt", fieldName: "itslfTs1RclmQnt", header: { text: "매립" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        
+        // 소각 후 처리(2차) 서브 항목들
+        { name: "itslfTs1IncnrQnt", fieldName: "itslfTs1IncnrQnt", header: { text: "소각" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "incnrPrcsWhol", fieldName: "incnrPrcsWhol", header: { text: "소계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "incnrPrcsLfvlm", fieldName: "incnrPrcsLfvlm", header: { text: "매립" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "incnrPrcsPrdctRmtrlQnt", fieldName: "incnrPrcsPrdctRmtrlQnt", header: { text: "제품원료" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "incnrPrcsFmlyrQnt", fieldName: "incnrPrcsFmlyrQnt", header: { text: "복토재" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "incnrPrcsFcltNm", fieldName: "incnrPrcsFcltNm", header: { text: "시설(업체명)" }, editable: false },
+        
+        // 고화 처리군
+        { name: "itslfTs1AltdQnt", fieldName: "itslfTs1AltdQnt", header: { text: "고화" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "stbznPrcsWhol", fieldName: "stbznPrcsWhol", header: { text: "소계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "stbznPrcsLfvlm", fieldName: "stbznPrcsLfvlm", header: { text: "매립" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "stbznPrcsFmlyrQnt", fieldName: "stbznPrcsFmlyrQnt", header: { text: "복토재" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "stbznPrcsFcltNm", fieldName: "stbznPrcsFcltNm", header: { text: "시설(업체명)" }, editable: false },
+        
+        // 건조 처리군
+        { name: "itslfTs1DryQnt", fieldName: "itslfTs1DryQnt", header: { text: "건조" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "dryPrcsWhol", fieldName: "dryPrcsWhol", header: { text: "소계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "dryPrcsLfvlm", fieldName: "dryPrcsLfvlm", header: { text: "매립" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "dryPrcsIncnrQnt", fieldName: "dryPrcsIncnrQnt", header: { text: "소각" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "dryPrcsFuelQnt", fieldName: "dryPrcsFuelQnt", header: { text: "연료" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "dryPrcsPrdctRmtrlQnt", fieldName: "dryPrcsPrdctRmtrlQnt", header: { text: "제품원료" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "dryPrcsFmlyrQnt", fieldName: "dryPrcsFmlyrQnt", header: { text: "복토재" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "dryPrcsCmpstgQnt", fieldName: "dryPrcsCmpstgQnt", header: { text: "퇴비화" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "dryPrcsFcltNm", fieldName: "dryPrcsFcltNm", header: { text: "시설(업체명)" }, editable: false },
+        
+        // 탄화 처리군
+        { name: "itslfTs1FuelQnt", fieldName: "itslfTs1FuelQnt", header: { text: "탄화" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "fuelPrcsWhol", fieldName: "fuelPrcsWhol", header: { text: "소계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "fuelPrcsIncnrQnt", fieldName: "fuelPrcsIncnrQnt", header: { text: "소각" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "fuelPrcsFuelQnt", fieldName: "fuelPrcsFuelQnt", header: { text: "연료" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "fuelPrcsFcltNm", fieldName: "fuelPrcsFcltNm", header: { text: "시설(업체명)" }, editable: false },
+        
+        // 퇴비화 독립군
+        { name: "itslfTs1CmpstgQnt", fieldName: "itslfTs1CmpstgQnt", header: { text: "퇴비화" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "cmpsPrcsFcltBzentyNm", fieldName: "cmpsPrcsFcltBzentyNm", header: { text: "시설(업체명)" }, editable: false },
+        
+        // 외부(민간) 위탁 처리현황
+        { name: "otsdCnsgnWhol", fieldName: "otsdCnsgnWhol", header: { text: "소계" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otsdCnsgnRclmQnt", fieldName: "otsdCnsgnRclmQnt", header: { text: "매립" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otsdCnsgnIncnrQnt", fieldName: "otsdCnsgnIncnrQnt", header: { text: "소각" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otsdCnsgnFuelPwplQnt", fieldName: "otsdCnsgnFuelPwplQnt", header: { text: "연료" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otsdCnsgnPrdctRmtrlQnt", fieldName: "otsdCnsgnPrdctRmtrlQnt", header: { text: "제품원료" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otsdCnsgnFmlyrQnt", fieldName: "otsdCnsgnFmlyrQnt", header: { text: "복토재" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otsdCnsgnCmpstgQnt", fieldName: "otsdCnsgnCmpstgQnt", header: { text: "퇴비화" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false },
+        { name: "otsdCnsgnFcltNm", fieldName: "otsdCnsgnFcltNm", header: { text: "시설(업체명)" }, editable: false },
+        
+        // 수도권 광역 위탁 처리량
+        { name: "cparTs2Whol", fieldName: "cparTs2Whol", header: { text: "수도권광역\n위탁처리량\n(톤/년)" }, valueType: ValueType.NUMBER, dataFormat: "#,##0.0", editable: false }
+    ],
+    columnLayout: [
+        { name: "areaGroup", header: { text: "행정구역" }, items: ["ctpvNm", "sggNm", "admdstNm"] },
+        "fcltNm",
+        { name: "gnamGroup", header: { text: "찌꺼기발생량(톤/년, 탈수기준)" }, items: ["gnamWhol", "itslfQnt", "otsdInflwQnt"] },
+        "transfTmplntNm", "transfPrcsQnt", "srpFncRt", "wholSrpPrcsQnt",
+        {
+            name: "itslfProcessingGroup",
+            header: { text: "자체 찌꺼기 처리량 현황(톤/년)" },
+            items: [
+                "itslfTs1Whol", "itslfTs1RclmQnt","itslfTs1IncnrQnt",
+                { name: "incnrGroup", header: { text: "소각 후 처리(2차)" }, items: ["incnrPrcsWhol", "incnrPrcsLfvlm", "incnrPrcsPrdctRmtrlQnt", "incnrPrcsFmlyrQnt", "incnrPrcsFcltNm"] },
+                "itslfTs1AltdQnt",
+                { name: "stbznGroup", header: { text: "고화 후 처리(2차)" }, items: [ "stbznPrcsWhol", "stbznPrcsLfvlm", "stbznPrcsFmlyrQnt", "stbznPrcsFcltNm"] },
+                "itslfTs1DryQnt", 
+                { name: "dryGroup", header: { text: "건조 후 처리(2차)" }, items: ["dryPrcsWhol", "dryPrcsLfvlm", "dryPrcsIncnrQnt", "dryPrcsFuelQnt", "dryPrcsPrdctRmtrlQnt", "dryPrcsFmlyrQnt", "dryPrcsCmpstgQnt", "dryPrcsFcltNm"] },
+                "itslfTs1FuelQnt",
+                { name: "fuelGroup", header: { text: "탄화 후 처리(2차)" }, items: ["fuelPrcsWhol", "fuelPrcsIncnrQnt", "fuelPrcsFuelQnt", "fuelPrcsFcltNm"] },
+                "itslfTs1CmpstgQnt",
+                { name: "cmpsGroup", header: { text: "퇴비화" }, items: ["cmpsPrcsFcltBzentyNm"] }
+            ]
+        },
+        { name: "otsdGroup", header: { text: "외부(민간) 위탁 처리량(톤/년)" }, items: ["otsdCnsgnWhol", "otsdCnsgnRclmQnt", "otsdCnsgnIncnrQnt", "otsdCnsgnFuelPwplQnt", "otsdCnsgnPrdctRmtrlQnt", "otsdCnsgnFmlyrQnt", "otsdCnsgnCmpstgQnt", "otsdCnsgnFcltNm"] },
+        "cparTs2Whol"
+    ]
+};
\ No newline at end of file
diff --git a/apps/st/src/components/util/grid/computedFieldCallbacks.ts b/apps/st/src/components/util/grid/computedFieldCallbacks.ts
index a19b9f7ea..f8c59f37a 100644
--- a/apps/st/src/components/util/grid/computedFieldCallbacks.ts
+++ b/apps/st/src/components/util/grid/computedFieldCallbacks.ts
@@ -8,6 +8,12 @@ function toNum(v: unknown): number {
     return isNaN(n) ? 0 : n;
 }
 
+/** 소수점 첫째 자리 이후 버림 (반올림 없음) */
+function truncateToFirstDecimal(value: number): number {
+    if (!Number.isFinite(value)) return 0;
+    return Math.floor(value * 10) / 10;
+}
+
 /** 합계용 valueCallback 생성 */
 export function createSumValueCallback(fieldNames: string[]): DataFieldValueCallback {
     return (_prod, _dataRow, _fieldName, fieldNamesArr, values) => {
@@ -37,6 +43,149 @@ export function createAvgValueCallback(fieldNames: string[]): DataFieldValueCall
     };
 }
 
+function sumFieldValues(
+    fields: string[],
+    fieldNamesArr: string[],
+    values: unknown[],
+): number {
+    let sum = 0;
+    for (const f of fields) {
+        const idx = fieldNamesArr.indexOf(f);
+        if (idx >= 0) sum += toNum(values[idx]);
+    }
+    return sum;
+}
+
+/** halfSumOfSums 한 건 — (sum(first) + sum(second)) / 2, 소수 내림 */
+function computeHalfSumOfSums(
+    firstSumFields: string[],
+    secondSumFields: string[],
+    fieldNamesArr: string[],
+    values: unknown[],
+): number {
+    const firstSum = sumFieldValues(firstSumFields, fieldNamesArr, values);
+    const secondSum = sumFieldValues(secondSumFields, fieldNamesArr, values);
+    return Math.floor((firstSum + secondSum) / 2);
+}
+
+export type HalfSumOfSumsGroup = {
+    firstSumFields: string[];
+    secondSumFields: string[];
+};
+
+/** 두 그룹 합계의 평균 — (sum(first) + sum(second)) / 2 */
+export function createHalfSumOfSumsValueCallback(
+    firstSumFields: string[],
+    secondSumFields: string[],
+): DataFieldValueCallback {
+    return (_prod, _dataRow, _fieldName, fieldNamesArr, values) =>
+        computeHalfSumOfSums(firstSumFields, secondSumFields, fieldNamesArr, values);
+}
+
+/** halfSumOfSums 2건의 합 — (B+C)/2 + (E+F)/2 */
+export function createSumOfTwoHalfSumOfSumsValueCallback(
+    firstGroup: HalfSumOfSumsGroup,
+    secondGroup: HalfSumOfSumsGroup,
+): DataFieldValueCallback {
+    return (_prod, _dataRow, _fieldName, fieldNamesArr, values) =>
+        computeHalfSumOfSums(
+            firstGroup.firstSumFields,
+            firstGroup.secondSumFields,
+            fieldNamesArr,
+            values,
+        ) +
+        computeHalfSumOfSums(
+            secondGroup.firstSumFields,
+            secondGroup.secondSumFields,
+            fieldNamesArr,
+            values,
+        );
+}
+
+/** 차이값: fields[0] − fields[1] (예: 매설연장 − 철거연장) */
+export function createDifferenceValueCallback(fields: string[]): DataFieldValueCallback {
+    const a = fields[0] ?? "";
+    const b = fields[1] ?? "";
+    return (_prod, _dataRow, _fieldName, fieldNamesArr, values) => {
+        if (!a || !b) return 0;
+        const ia = fieldNamesArr.indexOf(a);
+        const ib = fieldNamesArr.indexOf(b);
+        const va = ia >= 0 ? toNum(values[ia]) : 0;
+        const vb = ib >= 0 ? toNum(values[ib]) : 0;
+        return va - vb;
+    };
+}
+
+/** (여러 필드 합) - (여러 필드 합) */
+export function createDifferenceOfSumsValueCallback(
+    minuendFields: string[],
+    subtrahendFields: string[],
+): DataFieldValueCallback {
+    return (_prod, _dataRow, _fieldName, fieldNamesArr, values) => {
+        const sumOf = (fields: string[]) => {
+            let sum = 0;
+            for (const f of fields) {
+                const idx = fieldNamesArr.indexOf(f);
+                if (idx >= 0) sum += toNum(values[idx]);
+            }
+            return sum;
+        };
+        return sumOf(minuendFields) - sumOf(subtrahendFields);
+    };
+}
+
+/** 최대값용 valueCallback 생성 */
+export function createMaxValueCallback(fieldNames: string[]): DataFieldValueCallback {
+    return (_prod, _dataRow, _fieldName, fieldNamesArr, values) => {
+        let max = Number.NEGATIVE_INFINITY;
+        for (const f of fieldNames) {
+            const idx = fieldNamesArr.indexOf(f);
+            if (idx >= 0) {
+                const val = toNum(values[idx]);
+                max = Math.max(max, val);
+            }
+        }
+        return max === Number.NEGATIVE_INFINITY ? 0 : max;
+    };
+}
+
+/** 단일 필드값 vs 여러 필드 합계 중 최대값 */
+export function createMaxOfFieldAndSumValueCallback(
+    baseField: string,
+    sumFields: string[],
+): DataFieldValueCallback {
+    return (_prod, _dataRow, _fieldName, fieldNamesArr, values) => {
+        const baseIdx = fieldNamesArr.indexOf(baseField);
+        const baseVal = baseIdx >= 0 ? toNum(values[baseIdx]) : 0;
+        let sumVal = 0;
+        for (const f of sumFields) {
+            const idx = fieldNamesArr.indexOf(f);
+            if (idx >= 0) sumVal += toNum(values[idx]);
+        }
+        return Math.max(baseVal, sumVal);
+    };
+}
+
+/** 여러 그룹의 max(baseField, sum(sumFields)) 값을 모두 합산 */
+export function createSumOfMaxOfFieldAndSumGroupsValueCallback(
+    groups: Array<{ baseField: string; sumFields: string[] }>,
+): DataFieldValueCallback {
+    return (_prod, _dataRow, _fieldName, fieldNamesArr, values) => {
+        let total = 0;
+        for (const group of groups) {
+            const baseIdx = fieldNamesArr.indexOf(group.baseField);
+            const baseVal = baseIdx >= 0 ? toNum(values[baseIdx]) : 0;
+            let sumVal = 0;
+            for (const f of group.sumFields) {
+                const idx = fieldNamesArr.indexOf(f);
+                if (idx >= 0) sumVal += toNum(values[idx]);
+            }
+            total += Math.max(baseVal, sumVal);
+        }
+        return total;
+    };
+}
+
 // 공공하수처리구역인구보급률(%), 고도처리인구보급률(%) valueCallback
 export function createCoverageRateValueCallback(
     numeratorFields: string[],
@@ -57,7 +206,7 @@ export function createCoverageRateValueCallback(
     };
 }
 
-// 하수도 설치율(%) valueCallback
+// 하수도 설치율(%) valueCallback — 항목·중간·결과 모두 소수 첫째 자리 이후 버림(반올림 없음)
 export function createSwrgInstlrtRateValueCallback(
     numeratorFields: string[],
     denominatorFields: string[],
@@ -68,18 +217,100 @@ export function createSwrgInstlrtRateValueCallback(
             let sum = 0;
             for (const f of fields) {
                 const idx = fieldNamesArr.indexOf(f);
-                if (idx >= 0) sum += toNum(values[idx]);
+                if (idx >= 0) {
+                    sum += truncateToFirstDecimal(toNum(values[idx]));
+                }
             }
-            return sum;
+            return truncateToFirstDecimal(sum);
         };
         const sum1 = getSum(numeratorFields);
         const sum2 = getSum(denominatorFields);
 
-        const piplSupprt = toNum(values[fieldNamesArr.indexOf(thirdFields[0] || 'piplSupprt')]);
+        const piplSupprt = truncateToFirstDecimal(
+            toNum(values[fieldNamesArr.indexOf(thirdFields[0] || "piplSupprt")]),
+        );
 
-        const total1 = (sum1 === 0 ? 0 : Math.round(sum2 / sum1 * 100));
+        const ratioPercent =
+            sum1 === 0 ? 0 : truncateToFirstDecimal((sum2 / sum1) * 100);
+        const result = truncateToFirstDecimal((ratioPercent * piplSupprt) / 100);
 
-        return total1 * piplSupprt / 100;
+        return result;
+    };
+}
+
+/** 처리효율: (유입BOD − 방류BOD) / 유입BOD */
+export function createBodPrcsRtValueCallback(
+    inflwField: string,
+    dschgField: string,
+): DataFieldValueCallback {
+    return (_prod, _dataRow, _fieldName, fieldNamesArr, values) => {
+        const inflwIdx = fieldNamesArr.indexOf(inflwField);
+        const dschgIdx = fieldNamesArr.indexOf(dschgField);
+        const inflw = inflwIdx >= 0 ? toNum(values[inflwIdx]) : 0;
+        const dschg = dschgIdx >= 0 ? toNum(values[dschgIdx]) : 0;
+        if (inflw === 0) return 0;
+        return (inflw - dschg) / inflw;
+    };
+}
+
+/** 총양수량: Σ(펌프대수 + 예비펌프대수) × 대당 양수량 */
+export function createPumpGrossPpqtyValueCallback(
+    pumpGroups: Array<{
+        pumpCntField: string;
+        rsrvPumpCntField: string;
+        perPpqtyField: string;
+    }>,
+): DataFieldValueCallback {
+    return (_prod, _dataRow, _fieldName, fieldNamesArr, values) => {
+        let total = 0;
+        for (const group of pumpGroups) {
+            const pumpIdx = fieldNamesArr.indexOf(group.pumpCntField);
+            const rsrvIdx = fieldNamesArr.indexOf(group.rsrvPumpCntField);
+            const perIdx = fieldNamesArr.indexOf(group.perPpqtyField);
+            const pumpCnt = pumpIdx >= 0 ? toNum(values[pumpIdx]) : 0;
+            const rsrvCnt = rsrvIdx >= 0 ? toNum(values[rsrvIdx]) : 0;
+            const perPpqty = perIdx >= 0 ? toNum(values[perIdx]) : 0;
+            total += (pumpCnt + rsrvCnt) * perPpqty;
+        }
+        return total;
+    };
+}
+
+/** (a/b) / (c/d) × 100 — 각 quotient 분모 0이면 0 */
+export function createQuotientRatioPercentValueCallback(
+    numeratorQuotient: [string, string],
+    denominatorQuotient: [string, string],
+): DataFieldValueCallback {
+    const [numField, numDenField] = numeratorQuotient;
+    const [denNumField, denDenField] = denominatorQuotient;
+    return (_prod, _dataRow, _fieldName, fieldNamesArr, values) => {
+        const getVal = (field: string) => {
+            const idx = fieldNamesArr.indexOf(field);
+            return idx >= 0 ? toNum(values[idx]) : 0;
+        };
+        const numDen = getVal(numDenField);
+        const denDen = getVal(denDenField);
+        const denNum = getVal(denNumField);
+        if (numDen === 0 || denDen === 0 || denNum === 0) return 0;
+        const numerator = getVal(numField) / numDen;
+        const denominator = denNum / denDen;
+        if (denominator === 0) return 0;
+        return (numerator / denominator) * 100;
+    };
+}
+
+/** 나눗셈: fields[0] / fields[1] (분모 0이면 0) */
+export function createQuotientValueCallback(fields: string[]): DataFieldValueCallback {
+    const numeratorField = fields[0] ?? "";
+    const denominatorField = fields[1] ?? "";
+    return (_prod, _dataRow, _fieldName, fieldNamesArr, values) => {
+        if (!numeratorField || !denominatorField) return 0;
+        const numIdx = fieldNamesArr.indexOf(numeratorField);
+        const denIdx = fieldNamesArr.indexOf(denominatorField);
+        const numerator = numIdx >= 0 ? toNum(values[numIdx]) : 0;
+        const denominator = denIdx >= 0 ? toNum(values[denIdx]) : 0;
+        if (denominator === 0) return 0;
+        return numerator / denominator;
     };
 }
 
@@ -90,10 +321,49 @@ export function getComputedValueCallback(config: ComputedFieldConfig): DataField
             return createSumValueCallback(config.fields);
         case 'avg':
             return createAvgValueCallback(config.fields);
+        case 'max':
+            return createMaxValueCallback(config.fields);
+        case 'difference':
+            return createDifferenceValueCallback(config.fields);
+        case 'quotient':
+            return createQuotientValueCallback(config.fields);
+        case 'quotientRatioPercent':
+            return createQuotientRatioPercentValueCallback(
+                config.numeratorQuotient,
+                config.denominatorQuotient,
+            );
+        case 'differenceOfSums':
+            return createDifferenceOfSumsValueCallback(
+                config.minuendFields,
+                config.subtrahendFields,
+            );
+        case 'halfSumOfSums':
+            return createHalfSumOfSumsValueCallback(
+                config.firstSumFields,
+                config.secondSumFields,
+            );
+        case 'sumOfTwoHalfSumOfSums':
+            return createSumOfTwoHalfSumOfSumsValueCallback(
+                config.firstHalfSum,
+                config.secondHalfSum,
+            );
+        case 'maxOfFieldAndSum':
+            return createMaxOfFieldAndSumValueCallback(
+                config.baseField,
+                config.sumFields,
+            );
+        case 'sumOfMaxOfFieldAndSumGroups':
+            return createSumOfMaxOfFieldAndSumGroupsValueCallback(
+                config.groups,
+            );
         case 'pblswrgPopltnSuprtRate':
         case 'adtrtPopltnSuprtRate':
             return createCoverageRateValueCallback(config.numeratorFields, config.denominatorFields);
         case 'swrgInstlrtRate':
             return createSwrgInstlrtRateValueCallback(config.numeratorFields, config.denominatorFields, config.thirdFields);
+        case 'pumpGrossPpqty':
+            return createPumpGrossPpqtyValueCallback(config.pumpGroups);
+        case 'bodPrcsRt':
+            return createBodPrcsRtValueCallback(config.inflwField, config.dschgField);
     }
 }
diff --git a/apps/st/src/components/util/grid/ymdFormat.ts b/apps/st/src/components/util/grid/ymdFormat.ts
new file mode 100644
index 000000000..16c98384e
--- /dev/null
+++ b/apps/st/src/components/util/grid/ymdFormat.ts
@@ -0,0 +1,72 @@
+/** API·DB 8자리 일자(yyyyMMdd) → 그리드·date 편집기용 yyyy-MM-dd */
+export function formatCompactYmdForGrid(ymd: string | number | null | undefined): string {
+    const s = String(ymd ?? "").replace(/\D/g, "");
+    if (s.length !== 8) return String(ymd ?? "").trim();
+    return `${s.slice(0, 4)}-${s.slice(4, 6)}-${s.slice(6, 8)}`;
+}
+
+function isValidCompactYmdDigits(ymd: string): boolean {
+    if (!/^\d{8}$/.test(ymd)) return false;
+    const y = Number(ymd.slice(0, 4));
+    const m = Number(ymd.slice(4, 6));
+    const d = Number(ymd.slice(6, 8));
+    if (y < 1000 || y > 9999 || m < 1 || m > 12 || d < 1 || d > 31) return false;
+    const dt = new Date(y, m - 1, d);
+    return dt.getFullYear() === y && dt.getMonth() === m - 1 && dt.getDate() === d;
+}
+
+function formatDateToCompactYmd(date: Date): string {
+    if (Number.isNaN(date.getTime())) return "";
+    const y = date.getFullYear();
+    const m = date.getMonth() + 1;
+    const d = date.getDate();
+    if (y < 1000 || y > 9999) return "";
+    return `${y}${String(m).padStart(2, "0")}${String(d).padStart(2, "0")}`;
+}
+
+/**
+ * 그리드·API 값 → 8자리 일자(yyyyMMdd).
+ * RealGrid datetime은 Date 객체로 올 수 있어, 숫자만 이어붙이는 방식은 사용하지 않습니다.
+ */
+export function toCompactYmd(
+    value: string | number | Date | null | undefined,
+): string {
+    if (value == null || value === "") return "";
+
+    if (value instanceof Date) {
+        return formatDateToCompactYmd(value);
+    }
+
+    if (typeof value === "number" && Number.isFinite(value)) {
+        if (value >= 19000101 && value <= 21001231) {
+            const compact = String(Math.trunc(value)).padStart(8, "0").slice(-8);
+            return isValidCompactYmdDigits(compact) ? compact : "";
+        }
+        if (value > 1e11) {
+            return formatDateToCompactYmd(new Date(value));
+        }
+    }
+
+    const trimmed = String(value).trim();
+    const isoLike = trimmed.match(/^(\d{4})-(\d{2})-(\d{2})/);
+    if (isoLike) {
+        const compact = `${isoLike[1]}${isoLike[2]}${isoLike[3]}`;
+        return isValidCompactYmdDigits(compact) ? compact : "";
+    }
+
+    const digits = trimmed.replace(/\D/g, "");
+    if (digits.length === 8 && isValidCompactYmdDigits(digits)) {
+        return digits;
+    }
+
+    return "";
+}
+
+/** 설치목적 등 O/X 표기 → 대문자 O 또는 X (그 외는 원문 유지) */
+export function normalizeOxYnValue(
+    value: string | number | null | undefined,
+): string {
+    const v = String(value ?? "").trim().toUpperCase();
+    if (v === "O" || v === "X") return v;
+    return String(value ?? "").trim();
+}
diff --git a/apps/st/src/components/util/gridExcelExport.ts b/apps/st/src/components/util/gridExcelExport.ts
new file mode 100644
index 000000000..983d4ba5a
--- /dev/null
+++ b/apps/st/src/components/util/gridExcelExport.ts
@@ -0,0 +1,103 @@
+import type {
+    ColumnConfig,
+    ColumnLayoutItem,
+} from "@/components/type/DataGrid.type";
+import type { GridView } from "realgrid";
+
+function flattenColumnLayoutNames(layout: ColumnLayoutItem[]): string[] {
+    const result: string[] = [];
+    for (const item of layout) {
+        if (typeof item === "string") {
+            result.push(item);
+            continue;
+        }
+        if (item && typeof item === "object") {
+            if ("column" in item && typeof item.column === "string") {
+                result.push(item.column);
+                continue;
+            }
+            if ("items" in item && Array.isArray(item.items)) {
+                result.push(
+                    ...flattenColumnLayoutNames(
+                        item.items as ColumnLayoutItem[],
+                    ),
+                );
+            }
+        }
+    }
+    return result;
+}
+
+/** 엑셀 가져오기 — N번째 열을 그리드 N번째 fieldName에 매핑 (보내기 컬럼 순서와 동일) */
+export function getExcelImportColumnFieldNames(
+    columns: ColumnConfig[],
+    columnLayout?: ColumnLayoutItem[],
+): string[] {
+    const excludedNames = new Set(
+        columns.filter((c) => c.excludeFromExcelExport).map((c) => c.name),
+    );
+    const fieldByName = new Map(
+        columns
+            .filter((c) => c.fieldName)
+            .map((c) => [c.name, c.fieldName as string]),
+    );
+
+    const layoutNames =
+        columnLayout && columnLayout.length > 0
+            ? flattenColumnLayoutNames(columnLayout)
+            : columns.map((c) => c.name);
+
+    const seen = new Set<string>();
+    const fieldNames: string[] = [];
+    for (const name of layoutNames) {
+        if (excludedNames.has(name) || seen.has(name)) continue;
+        const fieldName = fieldByName.get(name);
+        if (!fieldName) continue;
+        seen.add(name);
+        fieldNames.push(fieldName);
+    }
+    return fieldNames;
+}
+
+export type ExcelExportVisibilitySnapshot = Map<string, boolean>;
+
+/** 엑셀보내기 직전: 제외 컬럼 숨김, 그리드용 숨김(visible:false) 컬럼은 export에만 표시 */
+export function prepareGridColumnsForExcelExport(
+    gridView: GridView,
+    columns: ColumnConfig[],
+): ExcelExportVisibilitySnapshot {
+    const excludedNames = new Set(
+        columns.filter((c) => c.excludeFromExcelExport).map((c) => c.name),
+    );
+    const snapshot = new Map<string, boolean>();
+
+    columns.forEach((col) => {
+        const gridCol = gridView.columnByName?.(col.name);
+        if (!gridCol) return;
+
+        const wasVisible = gridCol.visible !== false;
+        snapshot.set(col.name, wasVisible);
+
+        if (excludedNames.has(col.name)) {
+            gridCol.visible = false;
+        } else if (col.visible === false) {
+            gridCol.visible = true;
+        }
+    });
+
+    return snapshot;
+}
+
+export function restoreGridColumnsAfterExcelExport(
+    gridView: GridView,
+    snapshot: ExcelExportVisibilitySnapshot,
+): void {
+    snapshot.forEach((visible, name) => {
+        const gridCol = gridView.columnByName?.(name);
+        if (gridCol) gridCol.visible = visible;
+    });
+}
+
+export function shouldPrepareColumnsForExcelExport(columns: ColumnConfig[]): boolean {
+    return columns.some((c) => c.excludeFromExcelExport || c.visible === false);
+}
diff --git a/apps/st/src/entities/auth/api/auth-service.ts b/apps/st/src/entities/auth/api/auth-service.ts
new file mode 100644
index 000000000..0bef2fee3
--- /dev/null
+++ b/apps/st/src/entities/auth/api/auth-service.ts
@@ -0,0 +1,100 @@
+import {
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/shared/config";
+import { getCookie } from "@/shared/lib";
+import { getRemainingMs } from "@common/auth";
+
+import {
+    clearAuthToken,
+    setToken,
+    setupRefreshTimer,
+} from "../lib/token-manager";
+import type { AuthPayload, AuthService } from "../model/auth-interface";
+
+import { clearTabStorePersist } from "@/store/tab-store";
+
+async function login(payload: AuthPayload): Promise<void> {
+    const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+    });
+
+    const data = await response.json();
+
+    const accessToken = data[ACCESS_TOKEN];
+    const tokenId = data[AUTH_USER_ID];
+
+    if (!accessToken || !tokenId) {
+        throw new Error("인증 토큰을 받지 못했습니다.");
+    }
+
+    const prevTokenId = getCookie(AUTH_USER_ID);
+    if (prevTokenId !== undefined && prevTokenId !== tokenId) {
+        clearTabStorePersist();
+    }
+
+    setToken(CLAIM_NAME, accessToken);
+    setToken(AUTH_USER_ID, tokenId);
+
+    const remainingMs = getRemainingMs(accessToken);
+    if (remainingMs > 0) {
+        setupRefreshTimer(silentRefresh, remainingMs);
+    }
+}
+
+async function silentRefresh(): Promise<void> {
+    console.log(`[silentRefresh] Called at ${new Date().toISOString()}`);
+    try {
+        const response = await fetch(
+            `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
+            { method: "PUT" },
+        );
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error(data?.message ?? "토큰 갱신에 실패했습니다.");
+        }
+
+        const accessToken = data[ACCESS_TOKEN];
+        const tokenId = data[AUTH_USER_ID];
+
+        if (!accessToken || !tokenId) {
+            throw new Error("갱신된 인증 토큰을 받지 못했습니다.");
+        }
+
+        setToken(CLAIM_NAME, accessToken);
+        setToken(AUTH_USER_ID, tokenId);
+
+        const remainingMs = getRemainingMs(accessToken);
+        if (remainingMs > 0) {
+            setupRefreshTimer(silentRefresh, remainingMs);
+        }
+    } catch (error) {
+        console.error(
+            `[silentRefresh] Failed at ${new Date().toISOString()}`,
+            error,
+        );
+        clearAuthToken();
+        if (typeof window !== "undefined") {
+            window.dispatchEvent(new CustomEvent("auth:logout"));
+        }
+    }
+}
+
+export async function logout(): Promise<void> {
+    clearAuthToken();
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("auth:logout"));
+    }
+}
+
+export const authService: AuthService = {
+    login,
+    silentRefresh,
+    logout,
+};
diff --git a/apps/st/src/entities/auth/api/login-service.ts b/apps/st/src/entities/auth/api/login-service.ts
deleted file mode 100644
index 7fd87cc27..000000000
--- a/apps/st/src/entities/auth/api/login-service.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { AxiosError } from "axios";
-
-import {
-  ACCESS_TOKEN,
-  AUTH_USER_ID,
-  CLAIM_NAME,
-  ENDPOINT,
-  JWT_EXPIRATION_TIME,
-} from "@/shared/config";
-import { getCookie } from "@/shared/lib";
-
-import { tokenManager } from "../lib/token-manager";
-import type { ILogin,LoginService } from "../model/login-interface";
-
-import { clearTabStorePersist } from "@/store/tab-store";
-
-export class LoginApiService implements LoginService {
-  private static instance: LoginApiService;
-
-  private constructor() {}
-
-  public static getInstance(): LoginApiService {
-    if (!LoginApiService.instance) {
-      LoginApiService.instance = new LoginApiService();
-    }
-    return LoginApiService.instance;
-  }
-
-  public async login(payload: ILogin): Promise<void> {
-    try {
-      const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
-        method: "POST",
-        body: JSON.stringify({
-          userId: payload.userId,
-          password: payload.password,
-        }),
-      });
-
-      const data = await response.json();
-      const accessToken = data[ACCESS_TOKEN];
-      const tokenId = data[AUTH_USER_ID];
-
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-
-      const prevTokenId = getCookie(AUTH_USER_ID);
-      if (prevTokenId !== undefined && prevTokenId !== tokenId) {
-        clearTabStorePersist();
-      }
-
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-      tokenManager.setupRefreshTimer(
-        () => this.silentRefresh(),
-        JWT_EXPIRATION_TIME,
-      );
-    } catch (error) {
-      if (error instanceof AxiosError) {
-        throw new Error(`Login failed: ${error.response?.data?.message}`);
-      }
-      throw new Error(`Login failed: ${error}`);
-    }
-  }
-
-  public async silentRefresh(): Promise<void> {
-    try {
-      const response = await fetch(
-        `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-        { method: "PUT" },
-      );
-
-      const data = await response.json();
-      const accessToken = data[ACCESS_TOKEN];
-      const tokenId = data[AUTH_USER_ID];
-
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-    } catch (error) {
-      tokenManager.clearAuthToken();
-      if (error instanceof AxiosError) {
-        throw new Error(
-          `Silent refresh failed: ${error.response?.data?.message}`,
-        );
-      }
-      throw new Error(`Silent refresh failed: ${error}`);
-    }
-  }
-}
-
-export const LoginApi = LoginApiService.getInstance();
diff --git a/apps/st/src/entities/auth/index.ts b/apps/st/src/entities/auth/index.ts
index 97e142225..7f0d0081a 100644
--- a/apps/st/src/entities/auth/index.ts
+++ b/apps/st/src/entities/auth/index.ts
@@ -1,2 +1,3 @@
-export { LoginApi } from "./api/login-service";
+export { authService } from "./api/auth-service";
 export { AuthWrapper } from "./lib/auth-wrapper";
+export { tokenManager } from "./lib/token-manager";
diff --git a/apps/st/src/entities/auth/lib/auth-wrapper.tsx b/apps/st/src/entities/auth/lib/auth-wrapper.tsx
index c58581c2b..534e1c776 100644
--- a/apps/st/src/entities/auth/lib/auth-wrapper.tsx
+++ b/apps/st/src/entities/auth/lib/auth-wrapper.tsx
@@ -1,47 +1,85 @@
 "use client";
 
 import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+import { isAxiosError } from "axios";
+
 import { client } from "@/shared/api";
-import type { IUserInfo } from "@/shared/store";
-import { getCookie, useUserStore } from "@/shared/lib";
-import { isAtLoginRedirectUrl } from "@common/network";
 import {
-    ENDPOINT,
-    AUTH_USER_ID,
     AUTH_LOGIN_REDIRECT_URL,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
 } from "@/shared/config";
+import { useUserStore } from "@/shared/lib";
+import type { IUserInfo } from "@/shared/store";
+import { getRemainingMs } from "@common/auth";
+import { isAtLoginRedirectUrl } from "@common/network";
+
+import { authService } from "../api/auth-service";
+
+import { getToken, setupRefreshTimer } from "./token-manager";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-    const { userInfo, setUserInfo } = useUserStore((state) => state);
-
-    async function authCheck() {
-        if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
-            return;
-        }
-
-        const userId = getCookie(AUTH_USER_ID);
-        if (!userId) {
-            throw new Error("Missing required authentication tokens");
-        }
-
-        const response = await client.get<IUserInfo>(
-            `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
-        );
-        if (!userInfo) setUserInfo(response.data);
-    }
+    const router = useRouter();
+    const userInfo = useUserStore((state) => state.userInfo);
+    const setUserInfo = useUserStore((state) => state.setUserInfo);
 
     useEffect(() => {
-        (async () => {
-            try {
-                await authCheck();
-            } catch (error) {
-                console.error(error);
-                setUserInfo(null);
-                if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
-                    window.location.assign(AUTH_LOGIN_REDIRECT_URL);
-                }
+        // 페이지 새로고침 시 silentRefresh 타이머 복구
+        const token = getToken(CLAIM_NAME);
+        if (token) {
+            const remainingMs = getRemainingMs(token);
+            if (remainingMs > 0) {
+                console.log(
+                    `[AuthWrapper] Refresh timer set: ${remainingMs}ms (${remainingMs / 1000}s)`,
+                );
+                setupRefreshTimer(authService.silentRefresh, remainingMs);
             }
-        })();
+        }
+
+        if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) return;
+
+        async function authCheck() {
+            const userId = getToken(AUTH_USER_ID);
+            if (!userId) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+                return;
+            }
+
+            if (userInfo) return;
+
+            const response = await client.get<IUserInfo>(
+                `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
+            );
+            setUserInfo(response.data);
+        }
+
+        authCheck().catch((error) => {
+            // 401은 @common/network error-interceptor에서 이미 리다이렉트 처리됨
+            if (isAxiosError(error) && error.response?.status === 401) return;
+
+            console.error(error);
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        });
+    }, []);
+
+    // silentRefresh 실패 시 auth:logout 이벤트를 수신해 로그인으로 이동
+    useEffect(() => {
+        function handleAuthLogout() {
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        }
+
+        window.addEventListener("auth:logout", handleAuthLogout);
+        return () =>
+            window.removeEventListener("auth:logout", handleAuthLogout);
     }, []);
 
     return <>{children}</>;
diff --git a/apps/st/src/entities/auth/lib/token-manager.ts b/apps/st/src/entities/auth/lib/token-manager.ts
index 60cd47de5..d449e711b 100644
--- a/apps/st/src/entities/auth/lib/token-manager.ts
+++ b/apps/st/src/entities/auth/lib/token-manager.ts
@@ -1,85 +1,15 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config";
-import { getCookie, removeCookie,setCookie } from "@/shared/lib";
+import { authConfig } from "@/shared/config/auth";
+import { createTokenManager } from "@common/auth";
 
-import { clearTabStorePersist } from "@/store/tab-store";
+export const tokenManager = createTokenManager(authConfig);
 
-export class TokenManager {
-  private static instance: TokenManager;
-  private refreshTimer: NodeJS.Timeout | null = null;
-
-  private constructor() {}
-
-  public static getInstance(): TokenManager {
-    if (!TokenManager.instance) {
-      TokenManager.instance = new TokenManager();
-    }
-    return TokenManager.instance;
-  }
-
-  public getToken(key: string): string | undefined {
-    return getCookie(key);
-  }
-
-  public setToken(key: string, value: string): void {
-    const domain = this.getCookieDomain();
-    
-    setCookie(key, value, {
-      secure: window.location.protocol === "https:",
-      sameSite: "lax",
-      domain: domain,
-      path: "/", // 모든 경로에서 접근 가능
-    });
-  }
-
-  
-  private getCookieDomain(): string | undefined {
-    const hostname = window.location.hostname;
-    
-    // 개발 환경에서는 localhost 도메인 사용
-    if (hostname === "localhost" || hostname === "127.0.0.1") {
-      return undefined; // localhost에서는 도메인 설정하지 않음
-    }
-    
-    // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
-    if (hostname.includes("hasuon.or.kr")) {
-      return ".hasuon.or.kr";
-    }
-    
-    // 기타 환경에서는 현재 호스트명 사용
-    return hostname;
-  }
-
-  public removeToken(key: string): void {
-    const domain = this.getCookieDomain();
-    removeCookie(key, { domain, path: "/" });
-  }
-
-  public setupRefreshTimer(
-    callback: () => Promise<void>,
-    expirationTime: number,
-  ): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-    }
-
-    this.refreshTimer = setTimeout(() => {
-      callback().catch((error) => {
-        console.error("Silent refresh failed:", error);
-        this.clearAuthToken();
-      });
-    }, expirationTime - 60000);
-  }
-
-  public clearAuthToken(): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-
-    clearTabStorePersist();
-    this.removeToken(CLAIM_NAME);
-    this.removeToken(AUTH_USER_ID);
-  }
-}
-
-export const tokenManager = TokenManager.getInstance();
+export const {
+  getToken,
+  setToken,
+  removeToken,
+  setupRefreshTimer,
+  clearAuthToken,
+  getAccessToken,
+  getRefreshToken,
+  getUserId,
+} = tokenManager;
diff --git a/apps/st/src/entities/auth/model/auth-interface.ts b/apps/st/src/entities/auth/model/auth-interface.ts
new file mode 100644
index 000000000..9f76aaf35
--- /dev/null
+++ b/apps/st/src/entities/auth/model/auth-interface.ts
@@ -0,0 +1,10 @@
+export interface AuthPayload {
+    userId: string;
+    password: string;
+}
+
+export interface AuthService {
+    login(payload: AuthPayload): Promise<void>;
+    silentRefresh(): Promise<void>;
+    logout(): Promise<void>;
+}
diff --git a/apps/st/src/entities/auth/model/login-interface.ts b/apps/st/src/entities/auth/model/login-interface.ts
deleted file mode 100644
index 5aaf53044..000000000
--- a/apps/st/src/entities/auth/model/login-interface.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface ILogin {
-  userId: string;
-  password: string;
-}
-
-export interface LoginService {
-  login(payload: ILogin): Promise<void>;
-  silentRefresh(): Promise<void>;
-}
diff --git a/apps/st/src/entities/group-user/api/group-user-service.ts b/apps/st/src/entities/group-user/api/group-user-service.ts
new file mode 100644
index 000000000..85355a88f
--- /dev/null
+++ b/apps/st/src/entities/group-user/api/group-user-service.ts
@@ -0,0 +1,72 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  GroupUserService,
+  GroupUserSearchParams,
+  GroupUserListResponseDto,
+  GroupUserDetailResponse,
+  PageGroupUserList,
+  GroupUserSaveData,
+  GroupUserUpdateData,
+} from "../model/group-user-interface";
+
+export class GroupUsersApiService implements GroupUserService {
+  // 그룹 사용자 목록 조회
+  public async findPageGroupUser(
+    params: GroupUserSearchParams,
+  ): Promise<PageGroupUserList> {
+    const response = await client.get<PageGroupUserList>(
+      `${ENDPOINT.CMS_SERVICE.GROUP_USERS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  // 그룹 사용자 단건 조회
+  public async findByGroupAndUserId(
+    grpSn: number,
+    userUnqId: string,
+  ): Promise<GroupUserDetailResponse> {
+    const response = await client.get<GroupUserDetailResponse>(
+      `${ENDPOINT.CMS_SERVICE.GROUP_USERS}/${grpSn}/${userUnqId}`,
+    );
+    return response.data;
+  }
+
+  // 그룹 사용자 저장
+  public async saveGroupUser(
+    data: GroupUserSaveData[],
+  ): Promise<GroupUserListResponseDto[]> {
+    const response = await client.post<GroupUserListResponseDto[]>(
+      `${ENDPOINT.CMS_SERVICE.GROUP_USERS}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 그룹 사용자 수정
+  public async updateGroupUser(
+    grpSn: number,
+    userUnqId: string,
+    data: GroupUserUpdateData,
+  ): Promise<GroupUserDetailResponse> {
+    const response = await client.put<GroupUserDetailResponse>(
+      `${ENDPOINT.CMS_SERVICE.GROUP_USERS}/${grpSn}/${userUnqId}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 그룹 사용자 삭제
+  public async deleteGroupUser(
+    groupId: string,
+    userUnqId: string,
+  ): Promise<boolean> {
+    const response = await client.delete<boolean>(
+      `${ENDPOINT.CMS_SERVICE.GROUP_USERS}/${groupId}/${userUnqId}`,
+    );
+    return response.data;
+  }
+}
+
+export const GroupUsersApi = new GroupUsersApiService();
diff --git a/apps/st/src/entities/group-user/index.ts b/apps/st/src/entities/group-user/index.ts
new file mode 100644
index 000000000..349194a90
--- /dev/null
+++ b/apps/st/src/entities/group-user/index.ts
@@ -0,0 +1,5 @@
+export { GroupUsersApi } from "./api/group-user-service";
+export {
+  type GroupUserListResponseDto,
+  type GroupUserSaveData,
+} from "./model/group-user-interface";
diff --git a/apps/st/src/entities/group-user/lib/check-statistics-input-toolbar-group-membership.ts b/apps/st/src/entities/group-user/lib/check-statistics-input-toolbar-group-membership.ts
new file mode 100644
index 000000000..647442b2c
--- /dev/null
+++ b/apps/st/src/entities/group-user/lib/check-statistics-input-toolbar-group-membership.ts
@@ -0,0 +1,55 @@
+import { GroupUsersApi } from "../api/group-user-service";
+
+export const GRP_ST_INPUT = "GRP_ST_INPUT";
+export const GRP_ST_CONFIRM = "GRP_ST_CONFIRM";
+export const GRP_ADMIN = "GRP_ADMIN";
+
+const PAGE_SIZE = 500;
+
+/**
+ * 지정한 그룹(`keyword`)마다 `findPageGroupUser`를 호출하고,
+ * 응답 목록이 비어 있지 않으며 로그인 사용자 `userUnqId`와 일치하는 행이 있으면 true.
+ */
+export async function checkPageGroupUserMembershipForUser(
+    userName: string,
+    userUnqId: string,
+    groupKeywords: readonly string[],
+): Promise<boolean> {
+    const uid = userUnqId.trim();
+    const nm = userName.trim();
+    if (!uid || !nm) return false;
+
+    const paramsBase = { userNm: nm, page: 0, size: PAGE_SIZE };
+
+    for (const keyword of groupKeywords) {
+        const page = await GroupUsersApi.findPageGroupUser({
+            ...paramsBase,
+            keyword,
+        });
+        const rows = page.content ?? [];
+        if (rows.length > 0 && rows.some((r) => String(r.userUnqId ?? "").trim() === uid)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+/**
+ * 통계 입력 화면 상단 액션 — `GRP_ST_INPUT` / `GRP_ADMIN`.
+ */
+export async function checkStatisticsInputToolbarGroupMembership(
+    userName: string,
+    userUnqId: string,
+): Promise<boolean> {
+    return checkPageGroupUserMembershipForUser(userName, userUnqId, [GRP_ST_INPUT, GRP_ADMIN]);
+}
+
+/**
+ * 통계 입력 현황 승인 등 — `GRP_ST_CONFIRM` / `GRP_ADMIN`.
+ */
+export async function checkStatisticsInputStatusConfirmGroupMembership(
+    userName: string,
+    userUnqId: string,
+): Promise<boolean> {
+    return checkPageGroupUserMembershipForUser(userName, userUnqId, [GRP_ST_CONFIRM, GRP_ADMIN]);
+}
diff --git a/apps/st/src/entities/group-user/model/group-user-interface.ts b/apps/st/src/entities/group-user/model/group-user-interface.ts
new file mode 100644
index 000000000..52fa97fce
--- /dev/null
+++ b/apps/st/src/entities/group-user/model/group-user-interface.ts
@@ -0,0 +1,79 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+// 그룹 사용자 검색 파라미터 인터페이스
+export interface GroupUserSearchParams extends PageableParams {
+  keyword?: string;
+  userNm?: string;
+}
+
+// 그룹 사용자 목록 응답 인터페이스
+export interface GroupUserListResponseDto {
+  mode: string;
+  groupId: string;
+  userUnqId: string;
+  userId: string;
+  userName: string;
+  ogdpSeCd: string;
+  ogdpSeNm: string;
+  mphn: string;
+}
+
+// 그룹 사용자 페이지 응답 인터페이스
+export type PageGroupUserList = PageableList<GroupUserListResponseDto>;
+
+// 그룹 사용자 상세 응답 인터페이스
+export interface GroupUserDetailResponse {
+  grpSn: number;
+  userUnqId: string;
+  userId: string;
+  userName: string;
+  email: string;
+  mphn: string;
+  regDt: string;
+  rgtr: string;
+  mdfcnDt: string;
+  mdfr: string;
+  rgtrNm: string;
+  mdfrNm: string;
+}
+
+// 그룹 사용자 저장 데이터 인터페이스
+export interface GroupUserSaveData {
+  mode: string;
+  groupId: string;
+  userUnqId: string;
+}
+
+// 그룹 사용자 수정 데이터 인터페이스
+export interface GroupUserUpdateData {
+  userUnqId: string;
+}
+
+// 그룹 사용자 서비스 인터페이스
+export interface GroupUserService {
+  // 그룹 사용자 목록 조회
+  findPageGroupUser: (
+    params: GroupUserSearchParams,
+  ) => Promise<PageGroupUserList>;
+
+  // 그룹 사용자 단건 조회
+  findByGroupAndUserId: (
+    grpSn: number,
+    userUnqId: string,
+  ) => Promise<GroupUserDetailResponse>;
+
+  // 그룹 사용자 저장
+  saveGroupUser: (
+    data: GroupUserSaveData[],
+  ) => Promise<GroupUserListResponseDto[]>;
+
+  // 그룹 사용자 수정
+  updateGroupUser: (
+    grpSn: number,
+    userUnqId: string,
+    data: GroupUserUpdateData,
+  ) => Promise<GroupUserDetailResponse>;
+
+  // 그룹 사용자 삭제
+  deleteGroupUser: (groupId: string, userUnqId: string) => Promise<boolean>;
+}
diff --git a/apps/st/src/entities/post/api/post-queries.ts b/apps/st/src/entities/post/api/post-queries.ts
new file mode 100644
index 000000000..33809944c
--- /dev/null
+++ b/apps/st/src/entities/post/api/post-queries.ts
@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type { UserPostSearchParams } from "../model/post-interface";
+
+import { postApi } from "./post-service";
+
+export function useUserPostList(params?: UserPostSearchParams) {
+    return useQuery({
+        queryKey: [ENDPOINT.BOARD_SERVICE.POSTS, params],
+        queryFn: () => postApi.getUserPostList(params),
+        refetchOnWindowFocus: false,
+    });
+}
diff --git a/apps/st/src/entities/post/api/post-service.ts b/apps/st/src/entities/post/api/post-service.ts
new file mode 100644
index 000000000..da66f8462
--- /dev/null
+++ b/apps/st/src/entities/post/api/post-service.ts
@@ -0,0 +1,22 @@
+import { client } from "@/shared/api";
+import { ENDPOINT, ST_DASHBOARD_BBS_ID } from "@/shared/config";
+
+import type {
+    PostService,
+    UserPostListResponse,
+    UserPostSearchParams,
+} from "../model/post-interface";
+
+async function getUserPostList(
+    params?: UserPostSearchParams,
+): Promise<UserPostListResponse> {
+    const response = await client.get<UserPostListResponse>(
+        `${ENDPOINT.BOARD_SERVICE.POSTS}/user/${ST_DASHBOARD_BBS_ID}`,
+        { params },
+    );
+    return response.data;
+}
+
+export const postApi: PostService = {
+    getUserPostList,
+};
diff --git a/apps/st/src/entities/post/index.ts b/apps/st/src/entities/post/index.ts
new file mode 100644
index 000000000..cb9293561
--- /dev/null
+++ b/apps/st/src/entities/post/index.ts
@@ -0,0 +1,3 @@
+export { useUserPostList } from "./api/post-queries";
+export { postApi } from "./api/post-service";
+export { type PostService, type UserPost } from "./model/post-interface";
diff --git a/apps/st/src/entities/post/model/post-interface.ts b/apps/st/src/entities/post/model/post-interface.ts
new file mode 100644
index 000000000..fa9aa8fe5
--- /dev/null
+++ b/apps/st/src/entities/post/model/post-interface.ts
@@ -0,0 +1,42 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface UserPostSearchParams extends PageableParams {
+    keywordType?: string;
+    keyword?: string;
+    popupYn?: string;
+    upndFixYn?: string;
+    prdPstgYn?: string;
+    siteId?: string;
+    bbsTypeCd?: string;
+    ansUseYn?: string;
+}
+
+export interface UserPost {
+    rowNo: number;
+    bbsId: number;
+    pstNo: number;
+    pstTtl: string;
+    pstCn: string;
+    inqNocs: number;
+    rfrncUrl: string;
+    popupYn: string;
+    upndFixYn: string;
+    prdPstgYn: string;
+    rootPath: string;
+    pstPath: string;
+    ansPstn: number;
+    wrtrNm: string;
+    wrtrCplc: string;
+    atflCd: string;
+    regDt: string;
+    rgtrNm: string;
+    cmntCnt: number;
+}
+
+export type UserPostListResponse = PageableList<UserPost>;
+
+export interface PostService {
+    getUserPostList(
+        params?: UserPostSearchParams,
+    ): Promise<UserPostListResponse>;
+}
diff --git a/apps/st/src/entities/schedule/api/schedule-queries.ts b/apps/st/src/entities/schedule/api/schedule-queries.ts
new file mode 100644
index 000000000..b1b6d818f
--- /dev/null
+++ b/apps/st/src/entities/schedule/api/schedule-queries.ts
@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type { ScheduleSearchParams } from "../model/schedule-interface";
+
+import { scheduleApi } from "./schedule-service";
+
+export function useSchedules(params?: ScheduleSearchParams) {
+    return useQuery({
+        queryKey: createSchedulesQueryKey(params),
+        queryFn: () => scheduleApi.getSchedules(params),
+        refetchOnWindowFocus: false,
+    });
+}
+
+function createSchedulesQueryKey(params?: ScheduleSearchParams) {
+    return [
+        ENDPOINT.CMS_SERVICE.SCHEDULES,
+        "list",
+        params?.siteId ?? "",
+        params?.schdlTtl ?? "",
+        params?.schdlSeCd ?? "",
+        params?.schdlBgngYmd ?? "",
+        params?.schdlEndYmd ?? "",
+        params?.reptYn ?? "",
+        params?.commSchdlYn ?? "",
+    ];
+}
diff --git a/apps/st/src/entities/schedule/api/schedule-service.ts b/apps/st/src/entities/schedule/api/schedule-service.ts
new file mode 100644
index 000000000..d5b20ef02
--- /dev/null
+++ b/apps/st/src/entities/schedule/api/schedule-service.ts
@@ -0,0 +1,22 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+    Schedule,
+    ScheduleSearchParams,
+    ScheduleService,
+} from "../model/schedule-interface";
+
+async function getSchedules(
+    params?: ScheduleSearchParams,
+): Promise<Schedule[]> {
+    const response = await client.get<Schedule[]>(
+        ENDPOINT.CMS_SERVICE.SCHEDULES,
+        { params },
+    );
+    return response.data;
+}
+
+export const scheduleApi: ScheduleService = {
+    getSchedules,
+};
diff --git a/apps/st/src/entities/schedule/index.ts b/apps/st/src/entities/schedule/index.ts
new file mode 100644
index 000000000..2fda886ec
--- /dev/null
+++ b/apps/st/src/entities/schedule/index.ts
@@ -0,0 +1,7 @@
+export { useSchedules } from "./api/schedule-queries";
+export { scheduleApi } from "./api/schedule-service";
+export {
+    type Schedule,
+    type ScheduleSearchParams,
+    type ScheduleService,
+} from "./model/schedule-interface";
diff --git a/apps/st/src/entities/schedule/model/schedule-interface.ts b/apps/st/src/entities/schedule/model/schedule-interface.ts
new file mode 100644
index 000000000..827942d51
--- /dev/null
+++ b/apps/st/src/entities/schedule/model/schedule-interface.ts
@@ -0,0 +1,27 @@
+export interface ScheduleSearchParams {
+    siteId?: string;
+    schdlTtl?: string;
+    schdlSeCd?: string;
+    schdlBgngYmd?: string;
+    schdlEndYmd?: string;
+    reptYn?: string;
+    commSchdlYn?: string;
+}
+
+export interface Schedule {
+    schdlBgngDt: string;
+    schdlEndDt: string;
+    actualDate: string;
+    schdlSn: number;
+    siteId: string;
+    schdlTtl: string;
+    schdlSeCd: string;
+    schdlCn: string;
+    reptYn: string;
+    commSchdlYn: string;
+    atflCd: string;
+}
+
+export interface ScheduleService {
+    getSchedules(params?: ScheduleSearchParams): Promise<Schedule[]>;
+}
diff --git a/apps/st/src/entities/statistics/api/dashboard/dashboard-queries.ts b/apps/st/src/entities/statistics/api/dashboard/dashboard-queries.ts
new file mode 100644
index 000000000..5b4e124f8
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/dashboard/dashboard-queries.ts
@@ -0,0 +1,109 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type { DashboardSearchParams } from "../../model/dashboard/dashboard-interface";
+
+import { dashboardApi } from "./dashboard-service";
+
+// 이상치 선별보고서 조회
+export function useDashboardVrfcReport(params: DashboardSearchParams | null) {
+    return useQuery({
+        queryKey: createDashboardQueryKey("vrfc-report", params),
+        queryFn: async () => {
+            if (!params)
+                throw new Error("Dashboard search params are required.");
+            const response = await dashboardApi.getVrfcReport(params);
+            return response.data;
+        },
+        enabled: hasRequiredDashboardParams(params),
+        refetchOnWindowFocus: false,
+    });
+}
+
+// 검증오류 수 조회
+export function useDashboardVrfcErrCount(params: DashboardSearchParams | null) {
+    return useQuery({
+        queryKey: createDashboardQueryKey("vrfc-err-count", params),
+        queryFn: async () => {
+            if (!params)
+                throw new Error("Dashboard search params are required.");
+            const response = await dashboardApi.getVrfcErrCount(params);
+            return response.data;
+        },
+        enabled: hasRequiredDashboardParams(params),
+        refetchOnWindowFocus: false,
+    });
+}
+
+// 미제출 수 & 목록 조회
+export function useDashboardUnSubmitCount(
+    params: DashboardSearchParams | null,
+) {
+    return useQuery({
+        queryKey: createDashboardQueryKey("submission-status", params),
+        queryFn: async () => {
+            if (!params)
+                throw new Error("Dashboard search params are required.");
+            const response = await dashboardApi.getUnSubmitCount({
+                ...params,
+                unSubmitOnly: true,
+            });
+            return response.data;
+        },
+        enabled: hasRequiredDashboardParams(params),
+        refetchOnWindowFocus: false,
+    });
+}
+
+// 통계입력현황 조회
+export function useDashboardStatsSubmissionRate(
+    params: DashboardSearchParams | null,
+) {
+    return useQuery({
+        queryKey: createDashboardQueryKey("stats-submission-rate", params),
+        queryFn: async () => {
+            if (!params)
+                throw new Error("Dashboard search params are required.");
+            const response = await dashboardApi.getStatsSubmissionRate(params);
+            return response.data;
+        },
+        enabled: hasRequiredDashboardParams(params),
+        refetchOnWindowFocus: false,
+    });
+}
+
+// 예외신청 수 조회
+export function useDashboardEcptReqCount(params: DashboardSearchParams | null) {
+    return useQuery({
+        queryKey: createDashboardQueryKey("ecpt-req-count", params),
+        queryFn: async () => {
+            if (!params)
+                throw new Error("Dashboard search params are required.");
+            const response = await dashboardApi.getEcptReqCount(params);
+            return response.data;
+        },
+        enabled: hasRequiredDashboardParams(params),
+        refetchOnWindowFocus: false,
+    });
+}
+
+function createDashboardQueryKey(
+    name: string,
+    params: DashboardSearchParams | null,
+) {
+    return [
+        ENDPOINT.ST_SERVICE.DASHBOARD,
+        name,
+        params?.statsYr ?? "",
+        params?.dtlInstCd ?? "",
+        params?.enoCd ?? "",
+        params?.laeSeCd ?? "",
+    ];
+}
+
+function hasRequiredDashboardParams(
+    params: DashboardSearchParams | null,
+): params is DashboardSearchParams {
+    return Boolean(params?.statsYr && params.dtlInstCd);
+}
diff --git a/apps/st/src/entities/statistics/api/dashboard/dashboard-service.ts b/apps/st/src/entities/statistics/api/dashboard/dashboard-service.ts
new file mode 100644
index 000000000..0bb830e61
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/dashboard/dashboard-service.ts
@@ -0,0 +1,66 @@
+import { stClient } from "@/shared/api/client";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+    DashboardApiResponse,
+    DashboardSearchParams,
+    DashboardService,
+    EcptReqCountResponse,
+    StatsSubmissionResponse,
+    UnSubmitCountResponse,
+    VrfcErrCountResponse,
+    VrfcReportResponse,
+} from "../../model/dashboard/dashboard-interface";
+
+async function getVrfcReport(
+    params: DashboardSearchParams,
+): Promise<DashboardApiResponse<VrfcReportResponse>> {
+    const response = await stClient.get<
+        DashboardApiResponse<VrfcReportResponse>
+    >(`${ENDPOINT.ST_SERVICE.DASHBOARD}/vrfc-report`, { params });
+    return response.data;
+}
+
+async function getVrfcErrCount(
+    params: DashboardSearchParams,
+): Promise<DashboardApiResponse<VrfcErrCountResponse>> {
+    const response = await stClient.get<
+        DashboardApiResponse<VrfcErrCountResponse>
+    >(`${ENDPOINT.ST_SERVICE.DASHBOARD}/vrfc-err-count`, { params });
+    return response.data;
+}
+
+async function getUnSubmitCount(
+    params: DashboardSearchParams,
+): Promise<DashboardApiResponse<UnSubmitCountResponse>> {
+    const response = await stClient.get<
+        DashboardApiResponse<UnSubmitCountResponse>
+    >(`${ENDPOINT.ST_SERVICE.DASHBOARD}/submission-status`, { params });
+    return response.data;
+}
+
+async function getStatsSubmissionRate(
+    params: DashboardSearchParams,
+): Promise<DashboardApiResponse<StatsSubmissionResponse>> {
+    const response = await stClient.get<
+        DashboardApiResponse<StatsSubmissionResponse>
+    >(`${ENDPOINT.ST_SERVICE.DASHBOARD}/stats-submission-rate`, { params });
+    return response.data;
+}
+
+async function getEcptReqCount(
+    params: DashboardSearchParams,
+): Promise<DashboardApiResponse<EcptReqCountResponse>> {
+    const response = await stClient.get<
+        DashboardApiResponse<EcptReqCountResponse>
+    >(`${ENDPOINT.ST_SERVICE.DASHBOARD}/ecpt-req-count`, { params });
+    return response.data;
+}
+
+export const dashboardApi: DashboardService = {
+    getVrfcReport,
+    getVrfcErrCount,
+    getUnSubmitCount,
+    getStatsSubmissionRate,
+    getEcptReqCount,
+};
diff --git a/apps/st/src/entities/statistics/api/dashboard/schedule-info-queries.ts b/apps/st/src/entities/statistics/api/dashboard/schedule-info-queries.ts
new file mode 100644
index 000000000..055eba519
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/dashboard/schedule-info-queries.ts
@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type { ScheduleInfoSearchParams } from "../../model/dashboard/schedule-info-interface";
+
+import { scheduleInfoApi } from "./schedule-info-service";
+
+export function useScheduleInfo(params: ScheduleInfoSearchParams | null) {
+    return useQuery({
+        queryKey: createScheduleInfoQueryKey(params),
+        queryFn: async () => {
+            if (!params)
+                throw new Error("Schedule info search params are required.");
+            const response = await scheduleInfoApi.getScheduleInfo(params);
+            return response.data;
+        },
+        enabled: hasRequiredScheduleInfoParams(params),
+        refetchOnWindowFocus: false,
+    });
+}
+
+function createScheduleInfoQueryKey(params: ScheduleInfoSearchParams | null) {
+    return [
+        ENDPOINT.ST_SERVICE.DASHBOARD,
+        "schedule-info",
+        params?.statsYr ?? "",
+    ];
+}
+
+function hasRequiredScheduleInfoParams(
+    params: ScheduleInfoSearchParams | null,
+): params is ScheduleInfoSearchParams {
+    return Boolean(params?.statsYr);
+}
diff --git a/apps/st/src/entities/statistics/api/dashboard/schedule-info-service.ts b/apps/st/src/entities/statistics/api/dashboard/schedule-info-service.ts
new file mode 100644
index 000000000..b9b593d0b
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/dashboard/schedule-info-service.ts
@@ -0,0 +1,22 @@
+import { stClient } from "@/shared/api/client";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+    ScheduleInfoApiResponse,
+    ScheduleInfoResponse,
+    ScheduleInfoSearchParams,
+    ScheduleInfoService,
+} from "../../model/dashboard/schedule-info-interface";
+
+async function getScheduleInfo(
+    params: ScheduleInfoSearchParams,
+): Promise<ScheduleInfoApiResponse<ScheduleInfoResponse>> {
+    const response = await stClient.get<
+        ScheduleInfoApiResponse<ScheduleInfoResponse>
+    >(`${ENDPOINT.ST_SERVICE.DASHBOARD}/schedule-info`, { params });
+    return response.data;
+}
+
+export const scheduleInfoApi: ScheduleInfoService = {
+    getScheduleInfo,
+};
diff --git a/apps/st/src/entities/statistics/api/general-verification-service.ts b/apps/st/src/entities/statistics/api/general-verification-service.ts
index 96ff08d39..95c96b467 100644
--- a/apps/st/src/entities/statistics/api/general-verification-service.ts
+++ b/apps/st/src/entities/statistics/api/general-verification-service.ts
@@ -1,127 +1,169 @@
 import { stClient } from "@/shared/api/client";
 import { ENDPOINT } from "@/shared/config";
 
-import type { 
+import type {
+    CheckVerificationNameRequest,
+    CheckVerificationNameResponse,
+    CopyVerifyDataRequest,
+    DeleteVrfcMasterResponse,
+    GeneralverificationDetailResponse,
+    GeneralverificationInfoResponse,
     GeneralverificationRequest,
     GeneralverificationResponse,
     GeneralverificationService,
-    GeneralverificationInfoResponse,
-    CheckVerificationNameRequest,
-    CheckVerificationNameResponse,
-    UpdateVrfcMasterRequest,
-    UpdateVrfcMasterResponse,
     RegistVrfcMasterRequest,
     RegistVrfcMasterResponse,
-    DeleteVrfcMasterResponse,
-    VrfcOperatorsResponse,
-    GeneralverificationDetailResponse,
+    UpdateVrfcMasterRequest,
+    UpdateVrfcMasterResponse,
     VerifyColumnListRequest,
     VerifyColumnListResponse,
     VerifyDetailRegistRequest,
     VerifyDetailUpdateRequest,
-    CopyVerifyDataRequest,
+    VerifyResultListRequest,
+    VerifyResultListResponse,
+    VrfcOperatorsResponse,
 } from "../model/general-verification-interface";
 
 export class GeneralverificationApiService implements GeneralverificationService {
-    public async getGeneralverificationList(param: GeneralverificationRequest): Promise<GeneralverificationResponse> {
-        const response = await stClient.get<GeneralverificationResponse> (
+    public async getGeneralverificationList(
+        param: GeneralverificationRequest,
+    ): Promise<GeneralverificationResponse> {
+        const response = await stClient.get<GeneralverificationResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/masters`,
             { params: param },
         );
         return response.data;
     }
 
-    public async getGeneralverificationInfo(param: number): Promise<GeneralverificationInfoResponse> {
-        const response = await stClient.get<GeneralverificationInfoResponse> (
+    public async getGeneralverificationInfo(
+        param: number,
+    ): Promise<GeneralverificationInfoResponse> {
+        const response = await stClient.get<GeneralverificationInfoResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/masters/${param}`,
         );
         return response.data;
     }
 
-    public async checkVerificationName(param: CheckVerificationNameRequest): Promise<CheckVerificationNameResponse> {
-        const response = await stClient.get<CheckVerificationNameResponse> (
+    public async checkVerificationName(
+        param: CheckVerificationNameRequest,
+    ): Promise<CheckVerificationNameResponse> {
+        const response = await stClient.get<CheckVerificationNameResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/check-name`,
             { params: param },
         );
         return response.data;
     }
 
-    public async UpdateVrfcMaster(param: UpdateVrfcMasterRequest): Promise<UpdateVrfcMasterResponse> {
-        const response = await stClient.put<UpdateVrfcMasterResponse> (
+    public async UpdateVrfcMaster(
+        param: UpdateVrfcMasterRequest,
+    ): Promise<UpdateVrfcMasterResponse> {
+        const response = await stClient.put<UpdateVrfcMasterResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/masters/${param.vrfcSn}`,
             param,
         );
         return response.data;
     }
-    
-    public async RegistVrfcMaster(param: RegistVrfcMasterRequest): Promise<RegistVrfcMasterResponse> {
-        const response = await stClient.post<RegistVrfcMasterResponse> (
+
+    public async RegistVrfcMaster(
+        param: RegistVrfcMasterRequest,
+    ): Promise<RegistVrfcMasterResponse> {
+        const response = await stClient.post<RegistVrfcMasterResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/master`,
             param,
         );
         return response.data;
     }
 
-    public async DeleteVrfcMaster(param: number): Promise<DeleteVrfcMasterResponse> {
-        const response = await stClient.delete<DeleteVrfcMasterResponse> (
+    public async DeleteVrfcMaster(
+        param: number,
+    ): Promise<DeleteVrfcMasterResponse> {
+        const response = await stClient.delete<DeleteVrfcMasterResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/${param}`,
         );
         return response.data;
     }
 
     public async getVrfcOperators(): Promise<VrfcOperatorsResponse> {
-        const response = await stClient.get<VrfcOperatorsResponse> (
+        const response = await stClient.get<VrfcOperatorsResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/operators`,
         );
         return response.data;
     }
 
-    public async getVrfcDetail(param: number): Promise<GeneralverificationDetailResponse> {
-        const response = await stClient.get<GeneralverificationDetailResponse> (
+    public async getVrfcDetail(
+        param: number,
+    ): Promise<GeneralverificationDetailResponse> {
+        const response = await stClient.get<GeneralverificationDetailResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/${param}`,
         );
         return response.data;
     }
 
-    public async getVerifyColumnList(param: VerifyColumnListRequest): Promise<VerifyColumnListResponse> {
-        const response = await stClient.get<VerifyColumnListResponse> (
-            param.refStatsCd ? 
-            `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/columns/${param.trgtStatsCd}/${param.vrfcDtlSn}/?refStatsCd=${param.refStatsCd}`
-            :
-            `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/columns/${param.trgtStatsCd}/${param.vrfcDtlSn}`,
+    public async getVerifyColumnList(
+        param: VerifyColumnListRequest,
+    ): Promise<VerifyColumnListResponse> {
+        const response = await stClient.get<VerifyColumnListResponse>(
+            param.refStatsCd
+                ? `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/columns/${param.trgtStatsCd}/${param.vrfcDtlSn}/?refStatsCd=${param.refStatsCd}`
+                : `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/columns/${param.trgtStatsCd}/${param.vrfcDtlSn}`,
         );
         return response.data;
     }
 
-    public async getSelectedVerifyColumnList(param: string): Promise<VerifyColumnListResponse> {
-        const response = await stClient.get<VerifyColumnListResponse> (
+    public async getSelectedVerifyColumnList(
+        param: string,
+    ): Promise<VerifyColumnListResponse> {
+        const response = await stClient.get<VerifyColumnListResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/columns/${param}`,
         );
         return response.data;
     }
 
-    public async RegistVrfcDetail(param: VerifyDetailRegistRequest): Promise<RegistVrfcMasterResponse> {
-        const response = await stClient.post<RegistVrfcMasterResponse> (
+    public async RegistVrfcDetail(
+        param: VerifyDetailRegistRequest,
+    ): Promise<RegistVrfcMasterResponse> {
+        const response = await stClient.post<RegistVrfcMasterResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/${param.vrfcSn}/details`,
-            param
+            param,
         );
         return response.data;
     }
 
-    public async UpdateVrfcDetail(param: VerifyDetailUpdateRequest): Promise<RegistVrfcMasterResponse> {
-        const response = await stClient.put<RegistVrfcMasterResponse> (
+    public async UpdateVrfcDetail(
+        param: VerifyDetailUpdateRequest,
+    ): Promise<RegistVrfcMasterResponse> {
+        const response = await stClient.put<RegistVrfcMasterResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/${param.vrfcSn}/details`,
-            param
+            param,
         );
         return response.data;
     }
 
-    public async CopyVrfcData(param: CopyVerifyDataRequest): Promise<RegistVrfcMasterResponse> {
-        const response = await stClient.post<RegistVrfcMasterResponse> (
+    public async CopyVrfcData(
+        param: CopyVerifyDataRequest,
+    ): Promise<RegistVrfcMasterResponse> {
+        const response = await stClient.post<RegistVrfcMasterResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/${param.vrfcSn}/copy?targetStatsCd=${param.targetStatsCd}&rgtrId=${param.rgtrId}`,
         );
         return response.data;
     }
+
+    public async getVerifyResultList(
+        param: VerifyResultListRequest,
+    ): Promise<VerifyResultListResponse> {
+        const response = await stClient.get<VerifyResultListResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/results`,
+            {
+                params: {
+                    ...param.searchDto,
+                    page: param.page,
+                    size: param.size,
+                },
+            },
+        );
+        return response.data;
+    }
 }
 
-export const generalverificationApiService = new GeneralverificationApiService();
\ No newline at end of file
+export const generalverificationApiService =
+    new GeneralverificationApiService();
diff --git a/apps/st/src/entities/statistics/api/input/statistics-input-excreta-treatment-facility-service.ts b/apps/st/src/entities/statistics/api/input/statistics-input-excreta-treatment-facility-service.ts
new file mode 100644
index 000000000..e4489bc1a
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/input/statistics-input-excreta-treatment-facility-service.ts
@@ -0,0 +1,53 @@
+import { stClient } from "@/shared/api/client";
+import { withAuthHeader } from "@/shared/api/with-auth-header";
+import { ENDPOINT } from "@/shared/config";
+
+import {
+    type ExcretaTreatmentFacilityApiResponse,
+    type ExcretaTreatmentFacilityRequestParams,
+    type ExcretaTreatmentFacilitySaveRequest,
+    type ExcretaTreatmentFacilitySaveResponse,
+    type ExcretaTreatmentFacilitySubmitRequest,
+    type ExcretaTreatmentFacilitySubmitResponse,
+    type StatisticsInputExcretaTreatmentFacilityService,
+} from "../../model/input/statistics-input-excreta-treatment-facility-interface";
+
+export class StatisticsInputExcretaTreatmentFacilityApiService
+    implements StatisticsInputExcretaTreatmentFacilityService
+{
+    /** 분뇨처리시설 조회 — ST00070001 */
+    public async getExcretaTreatmentFacilityList(
+        params: ExcretaTreatmentFacilityRequestParams,
+    ): Promise<ExcretaTreatmentFacilityApiResponse> {
+        const response = await stClient.get<ExcretaTreatmentFacilityApiResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/excreta-treatment-facility`,
+            withAuthHeader({ params }),
+        );
+        return response.data;
+    }
+
+    /** 분뇨처리시설 저장 — ST00070001 */
+    public async saveExcretaTreatmentFacilityList(
+        request: ExcretaTreatmentFacilitySaveRequest,
+    ): Promise<ExcretaTreatmentFacilitySaveResponse> {
+        const response = await stClient.put<ExcretaTreatmentFacilitySaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/excreta-treatment-facility/save`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 분뇨처리시설 제출 — ST00070001 */
+    public async submitExcretaTreatmentFacilityList(
+        request: ExcretaTreatmentFacilitySubmitRequest,
+    ): Promise<ExcretaTreatmentFacilitySubmitResponse> {
+        const response = await stClient.put<ExcretaTreatmentFacilitySubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/excreta-treatment-facility/submit`,
+            request,
+        );
+        return response.data;
+    }
+}
+
+export const statisticsInputExcretaTreatmentFacilityApi =
+    new StatisticsInputExcretaTreatmentFacilityApiService();
diff --git a/apps/st/src/entities/statistics/api/input/statistics-input-private-sewage-facility-service.ts b/apps/st/src/entities/statistics/api/input/statistics-input-private-sewage-facility-service.ts
new file mode 100644
index 000000000..bcb23018c
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/input/statistics-input-private-sewage-facility-service.ts
@@ -0,0 +1,133 @@
+import { stClient } from "@/shared/api/client";
+import { withAuthHeader } from "@/shared/api/with-auth-header";
+import { ENDPOINT } from "@/shared/config";
+
+import {
+    type PrivateSewageDesigStatusApiResponse,
+    type PrivateSewageDesigStatusRequestParams,
+    type PrivateSewageDesigStatusSaveRequest,
+    type PrivateSewageDesigStatusSaveResponse,
+    type PrivateSewageDesigStatusSubmitRequest,
+    type PrivateSewageDesigStatusSubmitResponse,
+    type SepticTankStatusApiResponse,
+    type SepticTankStatusRequestParams,
+    type SepticTankStatusSaveRequest,
+    type SepticTankStatusSaveResponse,
+    type SepticTankStatusSubmitRequest,
+    type SepticTankStatusSubmitResponse,
+    type SewageTreatFactStatusApiResponse,
+    type SewageTreatFactStatusRequestParams,
+    type SewageTreatFactStatusSaveRequest,
+    type SewageTreatFactStatusSaveResponse,
+    type SewageTreatFactStatusSubmitRequest,
+    type SewageTreatFactStatusSubmitResponse,
+    type StatisticsInputPrivateSewageFacilityService,
+} from "../../model/input/statistics-input-private-sewage-facility-interface";
+
+const BASE = `${ENDPOINT.ST_SERVICE.INPUT}/private-sewage-facility`;
+
+export class StatisticsInputPrivateSewageFacilityApiService
+    implements StatisticsInputPrivateSewageFacilityService
+{
+    /** 처리용량별 오수처리시설 현황 조회 — ST00080001 */
+    public async getSewageTreatFactStatusList(
+        params: SewageTreatFactStatusRequestParams,
+    ): Promise<SewageTreatFactStatusApiResponse> {
+        const response = await stClient.get<SewageTreatFactStatusApiResponse>(
+            `${BASE}/sewage-treat-fact-status`,
+            withAuthHeader({ params }),
+        );
+        return response.data;
+    }
+
+    /** 처리용량별 오수처리시설 현황 저장 — ST00080001 */
+    public async saveSewageTreatFactStatus(
+        request: SewageTreatFactStatusSaveRequest,
+    ): Promise<SewageTreatFactStatusSaveResponse> {
+        const response = await stClient.put<SewageTreatFactStatusSaveResponse>(
+            `${BASE}/sewage-treat-fact-status/save`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 처리용량별 오수처리시설 현황 제출 — ST00080001 */
+    public async submitSewageTreatFactStatus(
+        request: SewageTreatFactStatusSubmitRequest,
+    ): Promise<SewageTreatFactStatusSubmitResponse> {
+        const response = await stClient.put<SewageTreatFactStatusSubmitResponse>(
+            `${BASE}/sewage-treat-fact-status/submit`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 정화조 현황 조회 — ST00080002 */
+    public async getSepticTankStatusList(
+        params: SepticTankStatusRequestParams,
+    ): Promise<SepticTankStatusApiResponse> {
+        const response = await stClient.get<SepticTankStatusApiResponse>(
+            `${BASE}/septic-tank-status`,
+            withAuthHeader({ params }),
+        );
+        return response.data;
+    }
+
+    /** 정화조 현황 저장 — ST00080002 */
+    public async saveSepticTankStatus(
+        request: SepticTankStatusSaveRequest,
+    ): Promise<SepticTankStatusSaveResponse> {
+        const response = await stClient.put<SepticTankStatusSaveResponse>(
+            `${BASE}/septic-tank-status/save`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 정화조 현황 제출 — ST00080002 */
+    public async submitSepticTankStatus(
+        request: SepticTankStatusSubmitRequest,
+    ): Promise<SepticTankStatusSubmitResponse> {
+        const response = await stClient.put<SepticTankStatusSubmitResponse>(
+            `${BASE}/septic-tank-status/submit`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 개인하수도 관리지역 지정공고 현황 조회 — ST00080003 */
+    public async getPrivateSewageDesigStatusList(
+        params: PrivateSewageDesigStatusRequestParams,
+    ): Promise<PrivateSewageDesigStatusApiResponse> {
+        const response = await stClient.get<PrivateSewageDesigStatusApiResponse>(
+            `${BASE}/desig-status`,
+            withAuthHeader({ params }),
+        );
+        return response.data;
+    }
+
+    /** 개인하수도 관리지역 지정공고 현황 저장 — ST00080003 */
+    public async savePrivateSewageDesigStatus(
+        request: PrivateSewageDesigStatusSaveRequest,
+    ): Promise<PrivateSewageDesigStatusSaveResponse> {
+        const response = await stClient.put<PrivateSewageDesigStatusSaveResponse>(
+            `${BASE}/desig-status/save`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 개인하수도 관리지역 지정공고 현황 제출 — ST00080003 */
+    public async submitPrivateSewageDesigStatus(
+        request: PrivateSewageDesigStatusSubmitRequest,
+    ): Promise<PrivateSewageDesigStatusSubmitResponse> {
+        const response = await stClient.put<PrivateSewageDesigStatusSubmitResponse>(
+            `${BASE}/desig-status/submit`,
+            request,
+        );
+        return response.data;
+    }
+}
+
+export const statisticsInputPrivateSewageFacilityApi =
+    new StatisticsInputPrivateSewageFacilityApiService();
diff --git a/apps/st/src/entities/statistics/api/input/statistics-input-pumping-station-service.ts b/apps/st/src/entities/statistics/api/input/statistics-input-pumping-station-service.ts
new file mode 100644
index 000000000..7538acb7d
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/input/statistics-input-pumping-station-service.ts
@@ -0,0 +1,50 @@
+import { stClient } from "@/shared/api/client";
+import { withAuthHeader } from "@/shared/api/with-auth-header";
+import { ENDPOINT } from "@/shared/config";
+
+import {
+    type PumpingStationApiResponse,
+    type PumpingStationRequestParams,
+    type PumpingStationSaveRequest,
+    type PumpingStationSaveResponse,
+    type PumpingStationSubmitRequest,
+    type PumpingStationSubmitResponse,
+    type StatisticsInputPumpingStationService,
+} from "../../model/input/statistics-input-pumping-station-interface";
+
+export class StatisticsInputPumpingStationApiService implements StatisticsInputPumpingStationService {
+    /** 펌프장 조회 — ST00050001 */
+    public async getPumpingStationList(
+        params: PumpingStationRequestParams,
+    ): Promise<PumpingStationApiResponse> {
+        const response = await stClient.get<PumpingStationApiResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/pumping-station`,
+            withAuthHeader({ params }),
+        );
+        return response.data;
+    }
+
+    /** 펌프장 저장 — ST00050001 */
+    public async savePumpingStationList(
+        request: PumpingStationSaveRequest,
+    ): Promise<PumpingStationSaveResponse> {
+        const response = await stClient.put<PumpingStationSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/pumping-station/save`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 펌프장 제출 — ST00050001 */
+    public async submitPumpingStationList(
+        request: PumpingStationSubmitRequest,
+    ): Promise<PumpingStationSubmitResponse> {
+        const response = await stClient.put<PumpingStationSubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/pumping-station/submit`,
+            request,
+        );
+        return response.data;
+    }
+}
+
+export const statisticsInputPumpingStationApi = new StatisticsInputPumpingStationApiService();
diff --git a/apps/st/src/entities/statistics/api/statistics-input-sew-supply-rate-service.ts b/apps/st/src/entities/statistics/api/input/statistics-input-sew-supply-rate-service.ts
similarity index 70%
rename from apps/st/src/entities/statistics/api/statistics-input-sew-supply-rate-service.ts
rename to apps/st/src/entities/statistics/api/input/statistics-input-sew-supply-rate-service.ts
index 7e4e23370..fce1895d4 100644
--- a/apps/st/src/entities/statistics/api/statistics-input-sew-supply-rate-service.ts
+++ b/apps/st/src/entities/statistics/api/input/statistics-input-sew-supply-rate-service.ts
@@ -1,5 +1,6 @@
-import { ENDPOINT } from "@/shared/config";
 import { stClient } from "@/shared/api/client";
+import { withAuthHeader } from "@/shared/api/with-auth-header";
+import { ENDPOINT } from "@/shared/config";
 
 import {
     type StatisticsInputSewSupplyRateService,
@@ -7,14 +8,15 @@ import {
     type SewerageSupplyRateApiResponse,
     type CheckInputPeriodResponse,
     type SewerageSupplyRateSaveRequest,
-    type SewerageSupplyRateSaveApiResponse,
-} from "../model/statistics-sewage-supply-rate-input-interface";
+    type SewerageSupplyRateSubmitResponse,
+    type SewerageSupplyRateSaveResponse,
+} from "../../model/input/statistics-sewage-supply-rate-input-interface";
 
 export class StatisticsInputSewSupplyRateApiService implements StatisticsInputSewSupplyRateService {
     public async getSewerageSupplyRateList(params: SewerageSupplyRateRequestParams): Promise<SewerageSupplyRateApiResponse> {
         const response = await stClient.get<SewerageSupplyRateApiResponse>(
             `${ENDPOINT.ST_SERVICE.INPUT}/sewerage-supply-rate`,
-            { params }
+            withAuthHeader({ params }),
         );
         return response.data;
     }
@@ -26,16 +28,16 @@ export class StatisticsInputSewSupplyRateApiService implements StatisticsInputSe
         return response.data;
     }
 
-    public async saveSewerageSupplyRate(params: SewerageSupplyRateSaveRequest): Promise<SewerageSupplyRateSaveApiResponse> {
-        const response = await stClient.post<SewerageSupplyRateSaveApiResponse>(
-            `${ENDPOINT.ST_SERVICE.INPUT}/sewerage-supply-rate`,
+    public async saveSewerageSupplyRate(params: SewerageSupplyRateSaveRequest): Promise<SewerageSupplyRateSaveResponse> {
+        const response = await stClient.put<SewerageSupplyRateSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewerage-supply-rate/save`,
             params,
         );
         return response.data;
     }
 
-    public async submitSewerageSupplyRate(params: SewerageSupplyRateSaveRequest): Promise<SewerageSupplyRateSaveApiResponse> {
-        const response = await stClient.post<SewerageSupplyRateSaveApiResponse>(
+    public async submitSewerageSupplyRate(params: SewerageSupplyRateSaveRequest): Promise<SewerageSupplyRateSubmitResponse> {
+        const response = await stClient.put<SewerageSupplyRateSubmitResponse>(
             `${ENDPOINT.ST_SERVICE.INPUT}/sewerage-supply-rate/submit`,
             params,
         );
diff --git a/apps/st/src/entities/statistics/api/input/statistics-input-sewage-pipe-maintain-service.ts b/apps/st/src/entities/statistics/api/input/statistics-input-sewage-pipe-maintain-service.ts
new file mode 100644
index 000000000..cc366f08d
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/input/statistics-input-sewage-pipe-maintain-service.ts
@@ -0,0 +1,78 @@
+import { stClient } from "@/shared/api/client";
+import { withAuthHeader } from "@/shared/api/with-auth-header";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+    SewagePipeMaintainDredgingResponse,
+    SewagePipeMaintainDredgingSaveRequest,
+    SewagePipeMaintainDredgingSaveResponse,
+    SewagePipeMaintainDredgingSubmitRequest,
+    SewagePipeMaintainDredgingSubmitResponse,
+    SewagePipeMaintainRepairResponse,
+    SewagePipeMaintainRepairSaveRequest,
+    SewagePipeMaintainRepairSaveResponse,
+    SewagePipeMaintainRepairSubmitRequest,
+    SewagePipeMaintainRepairSubmitResponse,
+    SewagePipeMaintainRequestParams,
+    SewagePipeMaintainService,
+} from "../../model/input/statistics-input-sewage-pipe-maintain-interface";
+
+export class SewagePipeMaintainApiService implements SewagePipeMaintainService {
+    public async getSewagePipeMaintainRepair(param: SewagePipeMaintainRequestParams): Promise<SewagePipeMaintainRepairResponse> {
+        const response = await stClient.get<SewagePipeMaintainRepairResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe-maintain/repair`,
+            withAuthHeader({ params: param })
+        );
+        return response.data;
+    };
+
+    public async getSewagePipeMaintainDredging(param: SewagePipeMaintainRequestParams): Promise<SewagePipeMaintainDredgingResponse> {
+        const response = await stClient.get<SewagePipeMaintainDredgingResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe-maintain/dredging`,
+            withAuthHeader({ params: param })
+        );
+        return response.data;
+    };
+
+    public async saveSewagePipeMaintainRepair(
+        param: SewagePipeMaintainRepairSaveRequest,
+    ): Promise<SewagePipeMaintainRepairSaveResponse> {
+        const response = await stClient.put<SewagePipeMaintainRepairSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe-maintain/repair/save`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async submitSewagePipeMaintainRepair(
+        param: SewagePipeMaintainRepairSubmitRequest,
+    ): Promise<SewagePipeMaintainRepairSubmitResponse> {
+        const response = await stClient.put<SewagePipeMaintainRepairSubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe-maintain/repair/submit`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async saveSewagePipeMaintainDredging(
+        param: SewagePipeMaintainDredgingSaveRequest,
+    ): Promise<SewagePipeMaintainDredgingSaveResponse> {
+        const response = await stClient.put<SewagePipeMaintainDredgingSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe-maintain/dredging/save`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async submitSewagePipeMaintainDredging(
+        param: SewagePipeMaintainDredgingSubmitRequest,
+    ): Promise<SewagePipeMaintainDredgingSubmitResponse> {
+        const response = await stClient.put<SewagePipeMaintainDredgingSubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe-maintain/dredging/submit`,
+            param,
+        );
+        return response.data;
+    }
+}
+
+export const  sewagePipeMaintainApiService = new SewagePipeMaintainApiService();
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/api/input/statistics-input-sewage-reservoir-pump-service.ts b/apps/st/src/entities/statistics/api/input/statistics-input-sewage-reservoir-pump-service.ts
new file mode 100644
index 000000000..9e187ce30
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/input/statistics-input-sewage-reservoir-pump-service.ts
@@ -0,0 +1,86 @@
+import { stClient } from "@/shared/api/client";
+import { withAuthHeader } from "@/shared/api/with-auth-header";
+import { ENDPOINT } from "@/shared/config";
+
+import {
+    type StatisticsInputSewageReservoirPumpService,
+    type SewageReservoirApiResponse,
+    type SewageReservoirRequestParams,
+    type SewageReservoirSaveRequest,
+    type SewageReservoirSaveResponse,
+    type SewageReservoirSubmitRequest,
+    type SewageReservoirSubmitResponse,
+    type RainfallPumpStationApiResponse,
+    type RainfallPumpStationSaveRequest,
+    type RainfallPumpStationSaveResponse,
+    type RainfallPumpStationSubmitRequest,
+    type RainfallPumpStationSubmitResponse,
+} from "../../model/input/statistics-input-sewage-reservoir-pump-interface";
+
+export class StatisticsInputSewageReservoirPumpApiService implements StatisticsInputSewageReservoirPumpService {
+    /** 하수저류시설 조회 — ST00040001 */
+    public async getSewageReservoirList(params: SewageReservoirRequestParams): Promise<SewageReservoirApiResponse> {
+        const response = await stClient.get<SewageReservoirApiResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-reservoir-pump/sewage-reservoir`,
+            withAuthHeader({ params }),
+        );
+        return response.data;
+    }
+
+    /** 빗물펌프장 조회 — ST00040002 */
+    public async getRainfallPumpStationList(
+        params: SewageReservoirRequestParams,
+    ): Promise<RainfallPumpStationApiResponse> {
+        const response = await stClient.get<RainfallPumpStationApiResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-reservoir-pump/rainfall-pump`,
+            withAuthHeader({ params }),
+        );
+        return response.data;
+    }
+
+    /** 하수저류시설 저장 — ST00040001 */
+    public async saveSewageReservoir(
+        request: SewageReservoirSaveRequest,
+    ): Promise<SewageReservoirSaveResponse> {
+        const response = await stClient.put<SewageReservoirSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-reservoir-pump/sewage-reservoir/save`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 하수저류시설 제출 — ST00040001 */
+    public async submitSewageReservoir(
+        request: SewageReservoirSubmitRequest,
+    ): Promise<SewageReservoirSubmitResponse> {
+        const response = await stClient.put<SewageReservoirSubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-reservoir-pump/sewage-reservoir/submit`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 빗물펌프장 저장 — ST00040002 */
+    public async saveRainfallPumpStation(
+        request: RainfallPumpStationSaveRequest,
+    ): Promise<RainfallPumpStationSaveResponse> {
+        const response = await stClient.put<RainfallPumpStationSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-reservoir-pump/rainfall-pump/save`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 빗물펌프장 제출 — ST00040002 */
+    public async submitRainfallPumpStation(
+        request: RainfallPumpStationSubmitRequest,
+    ): Promise<RainfallPumpStationSubmitResponse> {
+        const response = await stClient.put<RainfallPumpStationSubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-reservoir-pump/rainfall-pump/submit`,
+            request,
+        );
+        return response.data;
+    }
+}
+
+export const statisticsInputSewageReservoirPumpApi = new StatisticsInputSewageReservoirPumpApiService();
diff --git a/apps/st/src/entities/statistics/api/input/statistics-input-sewerage-finance-service.ts b/apps/st/src/entities/statistics/api/input/statistics-input-sewerage-finance-service.ts
new file mode 100644
index 000000000..8f1d97e13
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/input/statistics-input-sewerage-finance-service.ts
@@ -0,0 +1,120 @@
+import { stClient } from "@/shared/api/client";
+import { withAuthHeader } from "@/shared/api/with-auth-header";
+import { ENDPOINT } from "@/shared/config";
+
+import {
+    type CauserBurdenApiResponse,
+    type CauserBurdenRequestParams,
+    type CauserBurdenSaveRequest,
+    type CauserBurdenSaveResponse,
+    type SewerageChargeApiResponse,
+    type SewerageChargeRequestParams,
+    type SewerageChargeSaveRequest,
+    type SewerageChargeSaveResponse,
+    type SewerageFinanceSettleApiResponse,
+    type SewerageFinanceSettleRequestParams,
+    type SewerageFinanceSettleSaveRequest,
+    type SewerageFinanceSettleSaveResponse,
+    type SewerageUsageFeeApiResponse,
+    type SewerageUsageFeeRequestParams,
+    type SewerageUsageFeeSaveRequest,
+    type SewerageUsageFeeSaveResponse,
+    type StatisticsInputSewerageFinanceService,
+} from "../../model/input/statistics-input-sewerage-finance-interface";
+
+const BASE = `${ENDPOINT.ST_SERVICE.INPUT}/sewerage-finance`;
+
+export class StatisticsInputSewerageFinanceApiService
+    implements StatisticsInputSewerageFinanceService
+{
+    /** 하수도재정 결산 조회 — ST00090001 */
+    public async getSewerageFinanceSettleList(
+        params: SewerageFinanceSettleRequestParams,
+    ): Promise<SewerageFinanceSettleApiResponse> {
+        const response = await stClient.get<SewerageFinanceSettleApiResponse>(
+            `${BASE}/settle`,
+            withAuthHeader({ params }),
+        );
+        return response.data;
+    }
+
+    /** 하수도재정 결산 저장 — ST00090001 */
+    public async saveSewerageFinanceSettle(
+        request: SewerageFinanceSettleSaveRequest,
+    ): Promise<SewerageFinanceSettleSaveResponse> {
+        const response = await stClient.put<SewerageFinanceSettleSaveResponse>(
+            `${BASE}/settle/save`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 하수도 요금 조회 — ST00090002 */
+    public async getSewerageChargeList(
+        params: SewerageChargeRequestParams,
+    ): Promise<SewerageChargeApiResponse> {
+        const response = await stClient.get<SewerageChargeApiResponse>(
+            `${BASE}/charge`,
+            withAuthHeader({ params }),
+        );
+        return response.data;
+    }
+
+    /** 하수도 요금 저장 — ST00090002 */
+    public async saveSewerageCharge(
+        request: SewerageChargeSaveRequest,
+    ): Promise<SewerageChargeSaveResponse> {
+        const response = await stClient.put<SewerageChargeSaveResponse>(
+            `${BASE}/charge/save`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 하수도 사용료 조회 — ST00090003 */
+    public async getSewerageUsageFeeList(
+        params: SewerageUsageFeeRequestParams,
+    ): Promise<SewerageUsageFeeApiResponse> {
+        const response = await stClient.get<SewerageUsageFeeApiResponse>(
+            `${BASE}/usage-fee`,
+            withAuthHeader({ params }),
+        );
+        return response.data;
+    }
+
+    /** 하수도 사용료 저장 — ST00090003 */
+    public async saveSewerageUsageFee(
+        request: SewerageUsageFeeSaveRequest,
+    ): Promise<SewerageUsageFeeSaveResponse> {
+        const response = await stClient.put<SewerageUsageFeeSaveResponse>(
+            `${BASE}/usage-fee/save`,
+            request,
+        );
+        return response.data;
+    }
+
+    /** 원인자 부담금 조회 — ST00090004 */
+    public async getCauserBurdenList(
+        params: CauserBurdenRequestParams,
+    ): Promise<CauserBurdenApiResponse> {
+        const response = await stClient.get<CauserBurdenApiResponse>(
+            `${BASE}/causer-burden`,
+            withAuthHeader({ params }),
+        );
+        return response.data;
+    }
+
+    /** 원인자 부담금 저장 — ST00090004 */
+    public async saveCauserBurden(
+        request: CauserBurdenSaveRequest,
+    ): Promise<CauserBurdenSaveResponse> {
+        const response = await stClient.put<CauserBurdenSaveResponse>(
+            `${BASE}/causer-burden/save`,
+            request,
+        );
+        return response.data;
+    }
+}
+
+export const statisticsInputSewerageFinanceApi =
+    new StatisticsInputSewerageFinanceApiService();
diff --git a/apps/st/src/entities/statistics/api/statistics-input-status-service.ts b/apps/st/src/entities/statistics/api/input/statistics-input-status-service.ts
similarity index 72%
rename from apps/st/src/entities/statistics/api/statistics-input-status-service.ts
rename to apps/st/src/entities/statistics/api/input/statistics-input-status-service.ts
index cd3c55a5f..20e446d41 100644
--- a/apps/st/src/entities/statistics/api/statistics-input-status-service.ts
+++ b/apps/st/src/entities/statistics/api/input/statistics-input-status-service.ts
@@ -1,14 +1,16 @@
-import { ENDPOINT } from "@/shared/config";
 import { stClient } from "@/shared/api/client";
+import { ENDPOINT } from "@/shared/config";
 
 import type {
     StatisticsInputStatusService,
-    StatsInputStatusListRequestParams,
     StatsInputStatusListApiResponse,
-} from "../model/statistics-input-status-interface";
+    StatsInputStatusListRequestParams,
+} from "../../model/input/statistics-input-status-interface";
 
 export class StatisticsInputStatusApiService implements StatisticsInputStatusService {
-    public async getStatisticsInputStatusList(param: StatsInputStatusListRequestParams): Promise<StatsInputStatusListApiResponse> {
+    public async getStatisticsInputStatusList(
+        param: StatsInputStatusListRequestParams,
+    ): Promise<StatsInputStatusListApiResponse> {
         const response = await stClient.get<StatsInputStatusListApiResponse>(
             `${ENDPOINT.ST_SERVICE.INPUT}/stats-input-status`,
             { params: param },
@@ -17,4 +19,4 @@ export class StatisticsInputStatusApiService implements StatisticsInputStatusSer
     }
 }
 
-export const StatisticsInputStatusApi = new StatisticsInputStatusApiService();
\ No newline at end of file
+export const StatisticsInputStatusApi = new StatisticsInputStatusApiService();
diff --git a/apps/st/src/entities/statistics/api/input/statistics-public-sewage-facility-input-service.ts b/apps/st/src/entities/statistics/api/input/statistics-public-sewage-facility-input-service.ts
new file mode 100644
index 000000000..b0cd77d3a
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/input/statistics-public-sewage-facility-input-service.ts
@@ -0,0 +1,78 @@
+import { stClient } from "@/shared/api/client";
+import { withAuthHeader } from "@/shared/api/with-auth-header";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+    PublicSewageFacilityRequestParams,
+    PublicSewageFacilityResponse,
+    PublicSewageFacilitySaveRequest,
+    PublicSewageFacilitySaveResponse,
+    PublicSewageFacilitySubmitRequest,
+    PublicSewageFacilitySubmitResponse,
+    PublicSewageMainFacilityMappingSaveRequest,
+    PublicSewageMainFacilityMappingSaveResponse,
+    PublicSewageMainFacilityResponse,
+    PublicSewageMappingTargetsRequestParams,
+    PublicSewageMappingTargetsResponse,
+    StatisticsInputPublicSewageFacilityService,
+} from "../../model/input/statistics-public-sewage-facility-input-interface";
+
+export class StatisticsInputPublicSewageFacilityApiService implements StatisticsInputPublicSewageFacilityService {
+    public async getPublicSewageFacility(param: PublicSewageFacilityRequestParams): Promise<PublicSewageFacilityResponse> {
+        const response = await stClient.get<PublicSewageFacilityResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/public-sewage-facility/facility`,
+            withAuthHeader({ params: param }),
+        );
+        return response.data;
+    }
+
+    public async getPublicSewageMainFacility(param: PublicSewageFacilityRequestParams): Promise<PublicSewageMainFacilityResponse> {
+        const response = await stClient.get<PublicSewageMainFacilityResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/public-sewage-facility/main-facility`,
+            withAuthHeader({ params: param }),
+        );
+        return response.data;
+    }
+
+    public async getMappingTargets(
+        param: PublicSewageMappingTargetsRequestParams,
+    ): Promise<PublicSewageMappingTargetsResponse> {
+        const response = await stClient.get<PublicSewageMappingTargetsResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/public-sewage-facility/main-facility/mapping-targets`,
+            withAuthHeader({ params: param }),
+        );
+        return response.data;
+    }
+
+    public async saveMainFacilityMapping(
+        param: PublicSewageMainFacilityMappingSaveRequest,
+    ): Promise<PublicSewageMainFacilityMappingSaveResponse> {
+        const response = await stClient.put<PublicSewageMainFacilityMappingSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/public-sewage-facility/main-facility/save`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async savePublicSewageFacility(
+        param: PublicSewageFacilitySaveRequest,
+    ): Promise<PublicSewageFacilitySaveResponse> {
+        const response = await stClient.put<PublicSewageFacilitySaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/public-sewage-facility/facility/save`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async submitPublicSewageFacility(
+        param: PublicSewageFacilitySubmitRequest,
+    ): Promise<PublicSewageFacilitySubmitResponse> {
+        const response = await stClient.put<PublicSewageFacilitySubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/public-sewage-facility/facility/submit`,
+            param,
+        );
+        return response.data;
+    }
+}
+
+export const statisticsInputPublicSewageFacilityApiService = new StatisticsInputPublicSewageFacilityApiService();
diff --git a/apps/st/src/entities/statistics/api/input/statistics-sewage-pipe-input-service.ts b/apps/st/src/entities/statistics/api/input/statistics-sewage-pipe-input-service.ts
new file mode 100644
index 000000000..c506a5085
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/input/statistics-sewage-pipe-input-service.ts
@@ -0,0 +1,193 @@
+import { stClient } from "@/shared/api/client";
+import { withAuthHeader } from "@/shared/api/with-auth-header";
+import { ENDPOINT } from "@/shared/config";
+import type {
+    SeweragePipeFacilityAdminAreaListRequest,
+    SeweragePipeFacilityAdminAreaListResponse,
+    SeweragePipeFactConnectionSaveRequest,
+    SeweragePipeFactConnectionSaveResponse,
+    SeweragePipeFacilitiesListRequest,
+    SeweragePipeFacilitiesListResponse,
+    SeweragePipeInputConnectionStatusResponse,
+    SeweragePipeInputFactInstallResponse,
+    SeweragePipeInputManholeResponse,
+    SeweragePipeInputPipeDiameterResponse,
+    SeweragePipeInputPipeTypeResponse,
+    SeweragePipeInputRegionalFactStatusSaveRequest,
+    SeweragePipeInputRegionalFactStatusSaveResponse,
+    SeweragePipeInputRegionalFactStatusSubmitRequest,
+    SeweragePipeInputRegionalFactStatusSubmitResponse,
+    SeweragePipeInputFactInstallStatusSubmitRequest,
+    SeweragePipeInputFactInstallStatusSubmitResponse,
+    SeweragePipeInputRegionalResponse,
+    SeweragePipeRequestParams,
+    StatisticsInputSewPipeService,
+    SeweragePipeInputFactInstallStatusSaveRequest,
+    SeweragePipeInputFactInstallStatusSaveResponse,
+    SeweragePipeInputPipeTypeStatusSaveRequest,
+    SeweragePipeInputPipeTypeStatusSaveResponse,
+    SeweragePipeInputPipeTypeStatusSubmitRequest,
+    SeweragePipeInputPipeDiameterStatusSaveRequest,
+    SeweragePipeInputPipeDiameterStatusSaveResponse,
+    SeweragePipeInputPipeDiameterStatusSubmitRequest,
+    SeweragePipeInputManholeStatusSaveRequest,
+    SeweragePipeInputManholeStatusSaveResponse,
+    SeweragePipeInputManholeStatusSubmitRequest,
+    SeweragePipeInputSubmitResponse,
+} from "../../model/input/statistics-sewage-pipe-input-interface";
+
+export class StatisticsInputSewPipeApiService implements StatisticsInputSewPipeService {
+    public async getRegionalFactStatus(param: SeweragePipeRequestParams): Promise<SeweragePipeInputRegionalResponse> {
+        const response = await stClient.get<SeweragePipeInputRegionalResponse> (
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/regional-facility-status`,
+            withAuthHeader({ params: param }),
+        );
+        return response.data;
+    }
+
+    public async getFactInstallStatus(param: SeweragePipeRequestParams): Promise<SeweragePipeInputFactInstallResponse> {
+        const response = await stClient.get<SeweragePipeInputFactInstallResponse> (
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/facility-install-status`,
+            withAuthHeader({ params: param }),
+        );
+        return response.data;
+    }
+
+    public async getPipeTypeStatus(param: SeweragePipeRequestParams): Promise<SeweragePipeInputPipeTypeResponse> {
+        const response = await stClient.get<SeweragePipeInputPipeTypeResponse> (
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/pipe-type-status`,
+            withAuthHeader({ params: param }),
+        );
+        return response.data;
+    }
+
+    public async getPipeDiameterStatus(param: SeweragePipeRequestParams): Promise<SeweragePipeInputPipeDiameterResponse> {
+        const response = await stClient.get<SeweragePipeInputPipeDiameterResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/pipe-diameter-status`,
+            withAuthHeader({ params: param }),
+        );
+        return response.data;
+    }
+
+    public async getManholeStatus(param: SeweragePipeRequestParams): Promise<SeweragePipeInputManholeResponse> {
+        const response = await stClient.get<SeweragePipeInputManholeResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/manhole-status`,
+            withAuthHeader({ params: param }),
+        );
+        return response.data;
+    }
+
+    public async getConnectionStatus(param: SeweragePipeRequestParams): Promise<SeweragePipeInputConnectionStatusResponse> {
+        const response = await stClient.get<SeweragePipeInputConnectionStatusResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/facility-connection-status`,
+            withAuthHeader({ params: param }),
+        );
+        return response.data;
+    }
+
+    public async getFacilitiesList(param: SeweragePipeFacilitiesListRequest): Promise<SeweragePipeFacilitiesListResponse> {
+        const response = await stClient.get<SeweragePipeFacilitiesListResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/facility-connection-status/popup/facilities`,
+            withAuthHeader({ params: param }),
+        );
+        return response.data;
+    }
+
+    public async getFacilityAdminAreaList(param: SeweragePipeFacilityAdminAreaListRequest): Promise<SeweragePipeFacilityAdminAreaListResponse> {
+        const response = await stClient.get<SeweragePipeFacilityAdminAreaListResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/facility-connection-status/popup/areas`,
+            withAuthHeader({ params: param }),
+        );
+        return response.data;
+    }
+
+    public async saveFactConnection(param: SeweragePipeFactConnectionSaveRequest): Promise<SeweragePipeFactConnectionSaveResponse> {
+        const response = await stClient.put<SeweragePipeFactConnectionSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/facility-connection-status/popup/save`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async saveRegionalFactStatus(param: SeweragePipeInputRegionalFactStatusSaveRequest): Promise<SeweragePipeInputRegionalFactStatusSaveResponse> {
+        const response = await stClient.put<SeweragePipeInputRegionalFactStatusSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/regional-facility-status/save`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async submitRegionalFactStatus(param: SeweragePipeInputRegionalFactStatusSubmitRequest): Promise<SeweragePipeInputRegionalFactStatusSubmitResponse> {
+        const response = await stClient.put<SeweragePipeInputRegionalFactStatusSubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/regional-facility-status/submit`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async saveFactInstallStatus(param: SeweragePipeInputFactInstallStatusSaveRequest): Promise<SeweragePipeInputFactInstallStatusSaveResponse> {
+        const response = await stClient.put<SeweragePipeInputFactInstallStatusSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/facility-install-status/save`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async submitFactInstallStatus(param: SeweragePipeInputFactInstallStatusSubmitRequest): Promise<SeweragePipeInputFactInstallStatusSubmitResponse> {
+        const response = await stClient.put<SeweragePipeInputFactInstallStatusSubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/facility-install-status/submit`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async savePipeTypeStatus(param: SeweragePipeInputPipeTypeStatusSaveRequest): Promise<SeweragePipeInputPipeTypeStatusSaveResponse> {
+        const response = await stClient.put<SeweragePipeInputPipeTypeStatusSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/pipe-type-status/save`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async submitPipeTypeStatus(param: SeweragePipeInputPipeTypeStatusSubmitRequest): Promise<SeweragePipeInputSubmitResponse> {
+        const response = await stClient.put<SeweragePipeInputSubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/pipe-type-status/submit`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async savePipeDiameterStatus(param: SeweragePipeInputPipeDiameterStatusSaveRequest): Promise<SeweragePipeInputPipeDiameterStatusSaveResponse> {
+        const response = await stClient.put<SeweragePipeInputPipeDiameterStatusSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/pipe-diameter-status/save`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async submitPipeDiameterStatus(param: SeweragePipeInputPipeDiameterStatusSubmitRequest): Promise<SeweragePipeInputSubmitResponse> {
+        const response = await stClient.put<SeweragePipeInputSubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/pipe-diameter-status/submit`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async saveManholeStatus(param: SeweragePipeInputManholeStatusSaveRequest): Promise<SeweragePipeInputManholeStatusSaveResponse> {
+        const response = await stClient.put<SeweragePipeInputManholeStatusSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/manhole-status/save`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async submitManholeStatus(param: SeweragePipeInputManholeStatusSubmitRequest): Promise<SeweragePipeInputSubmitResponse> {
+        const response = await stClient.put<SeweragePipeInputSubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUT}/sewage-pipe/manhole-status/submit`,
+            param,
+        );
+        return response.data;
+    }
+};
+
+export const statisticsInputSewPipeApiService = new StatisticsInputSewPipeApiService();
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/api/notice-talk/notice-talk-sending-service.ts b/apps/st/src/entities/statistics/api/notice-talk/notice-talk-sending-service.ts
new file mode 100644
index 000000000..a770b45e2
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/notice-talk/notice-talk-sending-service.ts
@@ -0,0 +1,55 @@
+import { client } from "@/shared/api/client";
+import { ENDPOINT } from "@/shared/config";
+import type { PageableList } from "@/shared/model";
+
+import type {
+    BusinessSendRequest,
+    BusinessSendResponse,
+    NtftalkTemplate,
+    TemplateVariablesResponse,
+} from "../../model/notice-talk/notice-talk-sending-interface";
+
+export const NTFTALK_TEMPLATE_LIST_PARAMS = {
+    sort: "createdAt,desc",
+    senderKey: "",
+    inspectionStatus: "APR",
+    templateMessageType: "BA",
+    page: 0,
+    size: 10,
+};
+
+/**
+ * 알림톡 발송 화면용 Ntftalk API
+ */
+export class NoticeTalkSendingApiService {
+    async getTemplatePage(
+        params: typeof NTFTALK_TEMPLATE_LIST_PARAMS = NTFTALK_TEMPLATE_LIST_PARAMS,
+    ): Promise<PageableList<NtftalkTemplate>> {
+        const response = await client.get<PageableList<NtftalkTemplate>>(
+            ENDPOINT.NTFTALK_SERVICE.TEMP,
+            { params },
+        );
+        return response.data;
+    }
+
+    async getTemplateVariables(
+        templateCode: string,
+    ): Promise<TemplateVariablesResponse> {
+        const response = await client.get<TemplateVariablesResponse>(
+            `${ENDPOINT.NTFTALK_SERVICE.ATA_SEND}/template-variables/${templateCode}`,
+        );
+        return response.data;
+    }
+
+    async sendBusiness(
+        payload: BusinessSendRequest,
+    ): Promise<BusinessSendResponse> {
+        const response = await client.post<BusinessSendResponse>(
+            `${ENDPOINT.NTFTALK_SERVICE.ATA_SEND}/business`,
+            payload,
+        );
+        return response.data;
+    }
+}
+
+export const noticeTalkSendingApi = new NoticeTalkSendingApiService();
diff --git a/apps/st/src/entities/statistics/api/notice-talk/queries.ts b/apps/st/src/entities/statistics/api/notice-talk/queries.ts
new file mode 100644
index 000000000..20d28314d
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/notice-talk/queries.ts
@@ -0,0 +1,33 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import {
+    noticeTalkSendingApi,
+    NTFTALK_TEMPLATE_LIST_PARAMS,
+} from "./notice-talk-sending-service";
+
+export function useNtftalkTemplateList() {
+    return useQuery({
+        queryKey: [
+            ENDPOINT.NTFTALK_SERVICE.TEMP,
+            "ntitlk-sndng",
+            NTFTALK_TEMPLATE_LIST_PARAMS,
+        ],
+        queryFn: () =>
+            noticeTalkSendingApi.getTemplatePage(NTFTALK_TEMPLATE_LIST_PARAMS),
+    });
+}
+
+export function useNtftalkTemplateVariables(templateCode: string) {
+    return useQuery({
+        queryKey: [
+            ENDPOINT.NTFTALK_SERVICE.ATA_SEND,
+            "template-variables",
+            templateCode,
+        ],
+        queryFn: () =>
+            noticeTalkSendingApi.getTemplateVariables(templateCode),
+        enabled: Boolean(templateCode),
+    });
+}
diff --git a/apps/st/src/entities/statistics/api/queries.ts b/apps/st/src/entities/statistics/api/queries.ts
index 0f0a9b0fb..ff392a235 100644
--- a/apps/st/src/entities/statistics/api/queries.ts
+++ b/apps/st/src/entities/statistics/api/queries.ts
@@ -1,21 +1,33 @@
-import { useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 
 import { ENDPOINT } from "@/shared/config";
 
-import { stAnlsMstApi } from "./statistics-analysis-master-api";
+import type { VerifyResultPageData } from "../model/general-verification-interface";
+import type { SewerStUserSearchParams } from "../model/sewer-st-user-interface";
+import type {
+    StatisticsVerificationFilterState,
+    StatisticsVerificationSubFilterState,
+} from "../model/statistics-verification-report/statistics-verification-report-types";
+
+import { StatisticsInputStatusApi } from "./input/statistics-input-status-service";
+import { generalverificationApiService } from "./general-verification-service";
+import { sewerStUserApi } from "./sewer-st-user-service";
+import { statisticsAnalysisMasterService } from "./statistics-analysis-master-service";
 import { stAnlsRsltApi } from "./statistics-analysis-result-api";
 
+const DETAIL_PAGE_SIZE = 100;
+
 export const useStAnlsSidoCombo = () => {
     return useQuery({
         queryKey: [ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST, "sido"],
-        queryFn: () => stAnlsMstApi.getSidoCombo(),
+        queryFn: () => statisticsAnalysisMasterService.getSidoCombo(),
     });
 };
 
 export const useStAnlsSigunguCombo = (sidoCd: string) => {
     return useQuery({
         queryKey: [ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST, "sigungu", sidoCd],
-        queryFn: () => stAnlsMstApi.getSigunguCombo(sidoCd),
+        queryFn: () => statisticsAnalysisMasterService.getSigunguCombo(sidoCd),
         enabled: Boolean(sidoCd),
     });
 };
@@ -58,3 +70,102 @@ export const useStAnlsChartData = (
         enabled: !!anlsSn && !!vrfcTrgtSn,
     });
 };
+
+export const useStatsVrfcRptData = (
+    submittedMainFilters: StatisticsVerificationFilterState | null,
+) => {
+    return useQuery({
+        queryKey: [
+            ENDPOINT.ST_SERVICE.INPUT,
+            "statistics-input-status",
+            submittedMainFilters?.statsYr ?? "",
+            submittedMainFilters?.ctpvNm ?? "",
+            submittedMainFilters?.sggNm ?? "",
+            submittedMainFilters?.sewerBzmnCd ?? "",
+            submittedMainFilters?.statsCd ?? "",
+        ],
+        queryFn: async () => {
+            if (!submittedMainFilters) return [];
+            const response =
+                await StatisticsInputStatusApi.getStatisticsInputStatusList(
+                    submittedMainFilters,
+                );
+            if (response.status !== "success")
+                throw new Error(response.message);
+            return response.data ?? [];
+        },
+        enabled: Boolean(submittedMainFilters),
+        refetchOnWindowFocus: false,
+    });
+};
+
+export const useStatsVrfcRsltData = (
+    params: StatisticsVerificationSubFilterState | null,
+) => {
+    return useInfiniteQuery({
+        queryKey: [
+            ENDPOINT.ST_SERVICE.INPUTVERIFY,
+            "verify-results",
+            params?.statsYr ?? "",
+            params?.ctpvNm ?? "",
+            params?.sggNm ?? "",
+            params?.sewerBzmnCd ?? "",
+            params?.statsCd ?? "",
+            params?.prcsYnList ?? "",
+            params?.pbcpAprvYn ?? "",
+            params?.laeSbmsnSttsCd ?? "",
+        ],
+        initialPageParam: 1,
+        queryFn: async ({ pageParam }) => {
+            if (!params)
+                return {
+                    verifyResultList: [],
+                    pageInfo: {
+                        currentPage: 0,
+                        size: DETAIL_PAGE_SIZE,
+                        totalElements: 0,
+                        totalPages: 0,
+                    },
+                } satisfies VerifyResultPageData;
+
+            const response =
+                await generalverificationApiService.getVerifyResultList({
+                    page: pageParam,
+                    size: DETAIL_PAGE_SIZE,
+                    searchDto: {
+                        statsYr: params.statsYr,
+                        ctpvNm: params.ctpvNm,
+                        sggNm: params.sggNm,
+                        sewerBzmnCd: params.sewerBzmnCd,
+                        statsCd: params.statsCd,
+                        prcsYnList: params.prcsYnList,
+                        pbcpAprvYn: params.pbcpAprvYn,
+                        laeSbmsnSttsCd: params.laeSbmsnSttsCd,
+                    },
+                });
+
+            if (response.status !== "success")
+                throw new Error(response.message);
+            return response.data;
+        },
+        getNextPageParam: (lastPage) => {
+            const { currentPage, totalPages } = lastPage.pageInfo;
+            if (currentPage + 1 <= totalPages) return currentPage + 1;
+            return undefined;
+        },
+        enabled: Boolean(params),
+        refetchOnWindowFocus: false,
+    });
+};
+
+export const useSewerStUserList = (params: SewerStUserSearchParams) => {
+    return useQuery({
+        queryKey: [
+            ENDPOINT.STATVERIFY_SERVICE.SEWERST_USER,
+            "user-list",
+            params,
+        ],
+        queryFn: () => sewerStUserApi.getUserList(params),
+        enabled: Boolean(params.statsYr),
+    });
+};
diff --git a/apps/st/src/entities/statistics/api/sewer-st-user-service.ts b/apps/st/src/entities/statistics/api/sewer-st-user-service.ts
new file mode 100644
index 000000000..fb0184820
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/sewer-st-user-service.ts
@@ -0,0 +1,29 @@
+import { stClient } from "@/shared/api/client";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+    SewerStUserListResponse,
+    SewerStUserSearchParams,
+} from "../model/sewer-st-user-interface";
+
+/**
+ * 하수도 통계 사용자 목록 API 서비스
+ */
+export class SewerStUserApiService {
+    /**
+     * 하수도 통계 제출현황 사용자 목록 조회
+     * @param params 검색 조건 (statsYr, sewerBzmnCd, gubun)
+     * @returns 사용자 목록 (입력자·승인자·검토자)
+     */
+    public async getUserList(
+        params: SewerStUserSearchParams,
+    ): Promise<SewerStUserListResponse> {
+        const response = await stClient.get<SewerStUserListResponse>(
+            `${ENDPOINT.STATVERIFY_SERVICE.SEWERST_USER}/user-list`,
+            { params },
+        );
+        return response.data;
+    }
+}
+
+export const sewerStUserApi = new SewerStUserApiService();
diff --git a/apps/st/src/entities/statistics/api/statistics-analysis-detail-api.ts b/apps/st/src/entities/statistics/api/statistics-analysis-detail-api.ts
deleted file mode 100644
index 957680ec2..000000000
--- a/apps/st/src/entities/statistics/api/statistics-analysis-detail-api.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { client } from "@/shared/api";
-import { ENDPOINT } from "@/shared/config";
-
-import type {
-    StAnlsDtlListApiResponse,
-    StAnlsDtlResponse,
-    StAnlsDtlSearchParams,
-} from "../model/statistics-analysis/statistics-analysis-detail-interface";
-
-export class StAnlsDtlApiService {
-    public async getDetailList(
-        params: StAnlsDtlSearchParams,
-    ): Promise<StAnlsDtlListApiResponse> {
-        const response = await client.get<StAnlsDtlListApiResponse>(
-            `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_DTL}`,
-            {
-                params,
-            },
-        );
-
-        return response.data;
-    }
-
-    public async getDetail(
-        anlsSn: number,
-        vrfcTrgtSn: number,
-    ): Promise<StAnlsDtlResponse> {
-        const response = await client.get<StAnlsDtlResponse>(
-            `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_DTL}/${anlsSn}/${vrfcTrgtSn}`,
-        );
-
-        return response.data;
-    }
-}
-
-export const stAnlsDtlApi = new StAnlsDtlApiService();
diff --git a/apps/st/src/entities/statistics/api/statistics-analysis-detail-service.ts b/apps/st/src/entities/statistics/api/statistics-analysis-detail-service.ts
new file mode 100644
index 000000000..5d47c6925
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/statistics-analysis-detail-service.ts
@@ -0,0 +1,51 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+    StAnlsDtlConfirmRequest,
+    StAnlsDtlConfirmResponse,
+    StAnlsDtlListApiResponse,
+    StAnlsDtlResponse,
+    StAnlsDtlSearchParams,
+} from "../model/statistics-analysis/statistics-analysis-detail-interface";
+
+async function getDetailList(
+    params: StAnlsDtlSearchParams,
+): Promise<StAnlsDtlListApiResponse> {
+    const response = await client.get<StAnlsDtlListApiResponse>(
+        `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_DTL}`,
+        {
+            params,
+        },
+    );
+
+    return response.data;
+}
+
+async function getDetail(
+    anlsSn: number,
+    vrfcTrgtSn: number,
+): Promise<StAnlsDtlResponse> {
+    const response = await client.get<StAnlsDtlResponse>(
+        `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_DTL}/${anlsSn}/${vrfcTrgtSn}`,
+    );
+
+    return response.data;
+}
+
+async function confirmDetail(
+    request: StAnlsDtlConfirmRequest,
+): Promise<StAnlsDtlConfirmResponse> {
+    const response = await client.post<StAnlsDtlConfirmResponse>(
+        `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_DTL}/confirm`,
+        request,
+    );
+
+    return response.data;
+}
+
+export const statisticsAnalysisDetailService = {
+    getDetailList,
+    getDetail,
+    confirmDetail,
+};
diff --git a/apps/st/src/entities/statistics/api/statistics-analysis-master-api.ts b/apps/st/src/entities/statistics/api/statistics-analysis-master-api.ts
deleted file mode 100644
index dfe951e53..000000000
--- a/apps/st/src/entities/statistics/api/statistics-analysis-master-api.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { client } from "@/shared/api";
-import { ENDPOINT } from "@/shared/config";
-
-import type {
-    AdstZoneResponseDto,
-    StAnlsMstImrListApiResponse,
-    StAnlsMstListApiResponse,
-    StAnlsMstSearchParams,
-    StAnlsOutlierListResponse,
-} from "../model/statistics-analysis/statistics-analysis-master-interface";
-
-export class StAnlsMstApiService {
-    public async getAnalysisHistoryList(
-        params: StAnlsMstSearchParams,
-    ): Promise<StAnlsMstListApiResponse> {
-        const response = await client.get<StAnlsMstListApiResponse>(
-            `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST}`,
-            {
-                params,
-            },
-        );
-
-        return response.data;
-    }
-
-    public async getImrAnalysisMasterList(
-        params: StAnlsMstSearchParams,
-    ): Promise<StAnlsMstImrListApiResponse> {
-        const response = await client.get<StAnlsMstImrListApiResponse>(
-            `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST}/imr`,
-            {
-                params,
-            },
-        );
-
-        return response.data;
-    }
-
-    public async getOutlierList(
-        anlsSn: number,
-    ): Promise<StAnlsOutlierListResponse[]> {
-        const response = await client.get<StAnlsOutlierListResponse[]>(
-            `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST}/outlierList/${anlsSn}`,
-        );
-
-        return response.data;
-    }
-
-    public async getSidoCombo(): Promise<AdstZoneResponseDto[]> {
-        const response = await client.get<AdstZoneResponseDto[]>(
-            `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST}/sido`,
-        );
-
-        return response.data;
-    }
-
-    public async getSigunguCombo(
-        sidoCd: string,
-    ): Promise<AdstZoneResponseDto[]> {
-        const response = await client.get<AdstZoneResponseDto[]>(
-            `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST}/sigungu`,
-            { params: { sidoCd } },
-        );
-
-        return response.data;
-    }
-}
-
-export const stAnlsMstApi = new StAnlsMstApiService();
diff --git a/apps/st/src/entities/statistics/api/statistics-analysis-master-service.ts b/apps/st/src/entities/statistics/api/statistics-analysis-master-service.ts
new file mode 100644
index 000000000..a9e9d7918
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/statistics-analysis-master-service.ts
@@ -0,0 +1,71 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+    AdstZoneResponseDto,
+    StAnlsMstImrListApiResponse,
+    StAnlsMstListApiResponse,
+    StAnlsMstSearchParams,
+    StAnlsOutlierListResponse,
+} from "../model/statistics-analysis/statistics-analysis-master-interface";
+
+async function getAnalysisHistoryList(
+    params: StAnlsMstSearchParams,
+): Promise<StAnlsMstListApiResponse> {
+    const response = await client.get<StAnlsMstListApiResponse>(
+        `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST}`,
+        {
+            params,
+        },
+    );
+
+    return response.data;
+}
+
+async function getImrAnalysisMasterList(
+    params: StAnlsMstSearchParams,
+): Promise<StAnlsMstImrListApiResponse> {
+    const response = await client.get<StAnlsMstImrListApiResponse>(
+        `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST}/imr`,
+        {
+            params,
+        },
+    );
+
+    return response.data;
+}
+
+async function getOutlierList(
+    anlsSn: number,
+): Promise<StAnlsOutlierListResponse[]> {
+    const response = await client.get<StAnlsOutlierListResponse[]>(
+        `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST}/outlierList/${anlsSn}`,
+    );
+
+    return response.data;
+}
+
+async function getSidoCombo(): Promise<AdstZoneResponseDto[]> {
+    const response = await client.get<AdstZoneResponseDto[]>(
+        `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST}/sido`,
+    );
+
+    return response.data;
+}
+
+async function getSigunguCombo(sidoCd: string): Promise<AdstZoneResponseDto[]> {
+    const response = await client.get<AdstZoneResponseDto[]>(
+        `${ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST}/sigungu`,
+        { params: { sidoCd } },
+    );
+
+    return response.data;
+}
+
+export const statisticsAnalysisMasterService = {
+    getAnalysisHistoryList,
+    getImrAnalysisMasterList,
+    getOutlierList,
+    getSidoCombo,
+    getSigunguCombo,
+};
diff --git a/apps/st/src/entities/statistics/api/statistics-approval-service.ts b/apps/st/src/entities/statistics/api/statistics-approval-service.ts
new file mode 100644
index 000000000..2d961a66e
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/statistics-approval-service.ts
@@ -0,0 +1,33 @@
+import { stClient } from "@/shared/api/client";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+    ApprovalResponse,
+    ApproveRequest,
+    RejectRequest,
+    StatisticsApprovalService,
+} from "../model/statistics-approval-interface";
+
+class StatisticsApprovalApiService implements StatisticsApprovalService {
+    public async approveStats(
+        params: ApproveRequest[],
+    ): Promise<ApprovalResponse> {
+        const response = await stClient.post<ApprovalResponse>(
+            `${ENDPOINT.ST_SERVICE.APPROVAL}/approve?type=VRFC`,
+            params,
+        );
+        return response.data;
+    }
+
+    public async rejectStats(
+        params: RejectRequest[],
+    ): Promise<ApprovalResponse> {
+        const response = await stClient.post<ApprovalResponse>(
+            `${ENDPOINT.ST_SERVICE.APPROVAL}/reject?type=VRFC`,
+            params,
+        );
+        return response.data;
+    }
+}
+
+export const statisticsApprovalApi = new StatisticsApprovalApiService();
diff --git a/apps/st/src/entities/statistics/api/statistics-management-service.ts b/apps/st/src/entities/statistics/api/statistics-management-service.ts
index 99f7ea552..9bb1156e6 100644
--- a/apps/st/src/entities/statistics/api/statistics-management-service.ts
+++ b/apps/st/src/entities/statistics/api/statistics-management-service.ts
@@ -2,8 +2,10 @@ import { ENDPOINT } from "@/shared/config";
 import { stClient } from "@/shared/api/client";
 
 
-import {
-    type StatsInputStatusReviewApiResponse
+import type {
+    StatsInputStatusReviewApiResponse,
+    ReviewHistoryRequest,
+    ReviewHistoryResponse,
 } from "../model/statistics-input-review-interface";
 import {
     type SewerageSupplyRateReviewRequestParams,
@@ -15,6 +17,7 @@ import {
     type SewagePipeFacilityApiResponse,
     type SewerPipeTypeApiResponse,
     type SewerPipeDiamApiResponse,
+    type SewagePipeManholeApiResponse,
 } from "../model/statistics-sewage-pipe-review-interface";
 import {
     type SewerPipeMtcApiResponse,
@@ -28,6 +31,10 @@ import {
 import {
     type MediationPumpStationApiResponse,
 } from "../model/statistics-pumping-station-review-interface";
+import {
+    type PublicSewageFacilityReviewApiResponse,
+    type PublicSewageFacilityReviewRequestParams,
+} from "../model/statistics-public-sewage-facility-review-interface";
 
 
 export class StatisticsManagementApiService {
@@ -36,7 +43,7 @@ export class StatisticsManagementApiService {
      * @param params (yr, bsnmCd, sido, gugun)
      */
     public async getStatsInputStatusList(
-        params: { yr?: string; bsnmCd?: string; sido?: string; gugun?: string }
+        params: { statsYr?: string; sewerBzmnCd?: string; ctpvNm?: string; sggNm?: string }
     ): Promise<StatsInputStatusReviewApiResponse> {
         const response = await stClient.get<StatsInputStatusReviewApiResponse>(
             `${ENDPOINT.ST_SERVICE.REVIEW}/input-status`,
@@ -59,6 +66,20 @@ export class StatisticsManagementApiService {
         return response.data;
     }
 
+    /**
+     * 06. 공공하수처리시설 검토 목록 조회
+     * @param params (sido, gugun, yr, bsnmCd, fctName)
+     */
+    public async getPublicSewageFacilityReviewList(
+        params: PublicSewageFacilityReviewRequestParams
+    ): Promise<PublicSewageFacilityReviewApiResponse> {
+        const response = await stClient.get<PublicSewageFacilityReviewApiResponse>(
+            `${ENDPOINT.ST_SERVICE.REVIEW}/public-sewage`,
+            { params }
+        );
+        return response.data;
+    }
+
     /**
      * 02. 하수관로 지역별 시설현황 목록 조회 (Tab1)
      * @param params (sido, gugun, yr, bsnmCd)
@@ -115,6 +136,20 @@ export class StatisticsManagementApiService {
         return response.data;
     }
 
+    /**
+     * 02. 하수관로 맨홀 현황 조회 (Tab 5)
+     * @param params (sido, gugun, yr, bsnmCd)
+     */
+    public async getSewagePipeManholeList(
+        params: SewagePipeReviewRequestParams
+    ): Promise<SewagePipeManholeApiResponse> {
+        const response = await stClient.get<SewagePipeManholeApiResponse>(
+            `${ENDPOINT.ST_SERVICE.REVIEW}/sewer-pipe/manhole`,
+            { params }
+        );
+        return response.data;
+    }
+
     /**
      * 03. 하수관로 유지관리 개보수 현황 조회
      * @param params (yr, bsnmCd, sido, gugun)
@@ -190,6 +225,14 @@ export class StatisticsManagementApiService {
         );
         return response.data;
     }
+
+    public async getReviewHistory(params: ReviewHistoryRequest): Promise<ReviewHistoryResponse> {
+        const response = await stClient.get<ReviewHistoryResponse>(
+            `${ENDPOINT.ST_SERVICE.REVIEW}/history`,
+            { params }
+        );
+        return response.data;
+    }
 }
 
 // 통합 인스턴스 수출
diff --git a/apps/st/src/entities/statistics/api/statistics-service.ts b/apps/st/src/entities/statistics/api/statistics-service.ts
index 82ed85b83..f8171d885 100644
--- a/apps/st/src/entities/statistics/api/statistics-service.ts
+++ b/apps/st/src/entities/statistics/api/statistics-service.ts
@@ -1,39 +1,351 @@
+import { client, stClient } from "@/shared/api/client";
 import { ENDPOINT } from "@/shared/config";
-import { stClient } from "@/shared/api/client";
 
 import {
-    type StatisticsService,
-    type SearchCondition,
     type ApiResponse,
-    type Sgg,
     type cancelSubmitRequest,
     type cancelSubmitResponse,
+    type CheckStatusCodeRequest,
+    type CheckStatusCodeResponse,
+    type getReviewOpinionDetailRequest,
+    type getReviewOpinionDetailResponse,
+    type ImrRequest,
+    type ImrResponse,
+    type ImrStatusResponse,
+    type ReviewerInfoRequest,
+    type ReviewerInfoResponse,
+    type ReviewInputSaveRequest,
+    type ReviewOpinionSaveRequest,
+    type ReviewOpinionSaveResponse,
+    type ReviewReturnSaveRequest,
+    type ReviewReturnSaveResponse,
+    type ReviewSubmitRequest,
+    type ReviewSubmitResponse,
+    type SearchCondition,
+    type Sgg,
+    type StatiscicsExceptionResetRequest,
+    type StatiscicsExceptionResetResponse,
+    type StatiscicsManagementReviewHistoryRequest,
+    type StatiscicsManagementReviewHistoryResponse,
+    type StatisticsColumnGuideListResponse,
+    type StatisticsLogDetailResponse,
+    type StatisticsLogRequest,
+    type StatisticsLogResponse,
+    type StatisticsService,
+    type StatsInputPeriodDeleteApiResponse,
+    type StatsInputPeriodDeleteRequest,
+    type StatsInputPeriodDetailRequest,
+    type StatsInputPeriodDetailResponse,
+    type StatsInputPeriodListApiResponse,
+    type StatsInputPeriodListRequest,
+    type StatsInputPeriodSaveApiResponse,
+    type StatsInputPeriodSaveRequest,
+    type StatsInputStatusApproveBatchRequest,
+    type StatsInputStatusApproveKind,
+    type StatsInputStatusApproveResponse,
+    type SubmitExceptionRequest,
+    type SubmitExceptionResponse,
+    type SubmitVerifyExceptionRequest,
+    type SubmitVerifyExceptionResponse,
+    type unSubmitDataRequest,
+    type unSubmitDataResponse,
+    type VerificationResultListRequest,
+    type VerificationResultListResponse,
 } from "../model/statistics-interface";
 
-export class StatisticsAPiService implements StatisticsService {
-    public async getSidoList(): Promise<ApiResponse<SearchCondition>> {
+export class StatisticsApiService implements StatisticsService {
+    public async getSidoList(params?: {
+        instSeCd?: string;
+    }): Promise<ApiResponse<SearchCondition>> {
         const response = await stClient.get<ApiResponse<SearchCondition>>(
             `${ENDPOINT.ST_SERVICE.COMMON}/search-condition`,
+            { params },
         );
         return response.data;
     }
 
-    public async getSggList(sidoName: string): Promise<ApiResponse<Sgg[]>> {
+    public async getSggList(
+        sidoName: string,
+        params?: { instSeCd?: string; gugunSkipYn?: "Y" | "N" },
+    ): Promise<ApiResponse<Sgg[]>> {
         const response = await stClient.get<ApiResponse<Sgg[]>>(
             `${ENDPOINT.ST_SERVICE.COMMON}/sgg`,
-            { params: { sidoName } },
+            { params: { sidoName, ...params } },
+        );
+        return response.data;
+    }
+
+    public async getSggAllList(
+        sidoName: string,
+        params?: { instSeCd?: string; gugunSkipYn?: "Y" | "N" },
+    ): Promise<ApiResponse<Sgg[]>> {
+        const response = await stClient.get<ApiResponse<Sgg[]>>(
+            `${ENDPOINT.ST_SERVICE.COMMON}/sgg-all`,
+            { params: { sidoName, ...params } },
+        );
+        return response.data;
+    }
+
+    /** 통계 입력 기간(연도·분류별) 목록 조회 — 경로는 백엔드 스펙에 맞게 수정 */
+    public async getStatsInputPeriodList(
+        params?: StatsInputPeriodListRequest,
+    ): Promise<StatsInputPeriodListApiResponse> {
+        const response = await stClient.get<StatsInputPeriodListApiResponse>(
+            `${ENDPOINT.ST_SERVICE.DASHBOARD}/schedule-info/list`,
+            { params },
+        );
+        return response.data;
+    }
+
+    public async getStatsInputPeriodDetail(params: StatsInputPeriodDetailRequest): Promise<StatsInputPeriodDetailResponse> {
+        const response = await stClient.get<StatsInputPeriodDetailResponse>(
+            `${ENDPOINT.ST_SERVICE.DASHBOARD}/schedule-info/detail`,
+            { params },
+        );
+        return response.data;
+    }
+
+    /** 통계 입력 기간 저장 — 경로는 백엔드 스펙에 맞게 수정 */
+    public async saveStatsInputPeriod(
+        param: StatsInputPeriodSaveRequest,
+    ): Promise<StatsInputPeriodSaveApiResponse> {
+        const response = await stClient.post<StatsInputPeriodSaveApiResponse>(
+            `${ENDPOINT.ST_SERVICE.DASHBOARD}/schedule-info`,
+            param,
+        );
+        return response.data;
+    }
+
+    /** 통계 입력 기간 삭제 — JSON body. HTTP 메서드·URL은 백엔드 스펙에 맞게 수정 */
+    public async deleteStatsInputPeriod(
+        param: StatsInputPeriodDeleteRequest,
+    ): Promise<StatsInputPeriodDeleteApiResponse> {
+        const response = await stClient.delete<StatsInputPeriodDeleteApiResponse>(
+            `${ENDPOINT.ST_SERVICE.DASHBOARD}/schedule-info`,
+            { data: param },
         );
         return response.data;
     }
 
     // 입력 - 제출 취소
-    public async cancelSubmit(param: cancelSubmitRequest): Promise<cancelSubmitResponse> {
+    public async cancelSubmit(
+        param: cancelSubmitRequest,
+    ): Promise<cancelSubmitResponse> {
         const response = await stClient.put<cancelSubmitResponse>(
             `${ENDPOINT.ST_SERVICE.INPUTCOMMON}/cancel-submit`,
-            param
+            param,
+        );
+        return response.data;
+    }
+
+    public async callImrService(param: ImrRequest): Promise<ImrResponse> {
+        const response = await client.post<ImrResponse>(
+            `${ENDPOINT.STATVERIFY_SERVICE.IMR}`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async getImrStatus(param: string): Promise<ImrStatusResponse> {
+        const response = await client.get<ImrStatusResponse>(
+            `${ENDPOINT.STATVERIFY_SERVICE.IMR}/status/${param}`,
+        );
+        return response.data;
+    }
+
+    // 예외 제출
+    public async submitException(
+        param: SubmitExceptionRequest,
+    ): Promise<SubmitExceptionResponse> {
+        const response = await stClient.post<SubmitExceptionResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUTCOMMON}/submit-exception`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async getLogList(
+        param: StatisticsLogRequest,
+    ): Promise<StatisticsLogResponse> {
+        const response = await stClient.get<StatisticsLogResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUTCOMMON}/logs`,
+            { params: param },
+        );
+        return response.data;
+    }
+
+    public async getLogDetail(
+        param: string,
+    ): Promise<StatisticsLogDetailResponse> {
+        const response = await stClient.get<StatisticsLogDetailResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUTCOMMON}/logs/${param}`,
+        );
+        return response.data;
+    }
+
+    /** 컬럼 가이드 목록 조회 — GET `.../common/column-guides?statsCd=` */
+    public async getColumnGuides(
+        param: string,
+    ): Promise<StatisticsColumnGuideListResponse> {
+        const response = await stClient.get<StatisticsColumnGuideListResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUTCOMMON}/column-guides`,
+            { params: { statsCd: param } },
+        );
+        return response.data;
+    }
+
+    public async saveReviewOpinion(
+        param: ReviewOpinionSaveRequest,
+    ): Promise<ReviewOpinionSaveResponse> {
+        const response = await stClient.post<ReviewOpinionSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.REVIEW}/opinion-save`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async getReviewOpinionDetail(
+        param: getReviewOpinionDetailRequest,
+    ): Promise<getReviewOpinionDetailResponse> {
+        const response = await stClient.get<getReviewOpinionDetailResponse>(
+            `${ENDPOINT.ST_SERVICE.REVIEW}/opinion-select`,
+            { params: param },
+        );
+        return response.data;
+    }
+
+    public async saveReviewReturn(
+        param: ReviewReturnSaveRequest,
+    ): Promise<ReviewReturnSaveResponse> {
+        const { type, ...body } = param;
+        const response = await stClient.post<ReviewReturnSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.STATS}/reject`,
+            body,
+            { params: { type } },
+        );
+        return response.data;
+    }
+
+    /** 입력 반려 — JSON body는 `ReviewInputSaveRequest`(type 제외) 항목의 배열, `type`은 쿼리 */
+    public async saveInputReturn(
+        items: ReviewInputSaveRequest[],
+    ): Promise<ReviewReturnSaveResponse> {
+        if (items.length === 0) {
+            throw new Error("saveInputReturn: 항목이 비어 있습니다.");
+        }
+        const [first] = items;
+        if (!first) {
+            throw new Error("saveInputReturn: 항목이 비어 있습니다.");
+        }
+        const type = first.type;
+        if (!items.every((i) => i.type === type)) {
+            throw new Error("saveInputReturn: 모든 항목의 type이 같아야 합니다.");
+        }
+        const body = items.map(({ type: _t, rjctOpnnCn, ...rest }) => {
+            const row: Record<string, string> = {
+                statsYr: rest.statsYr,
+                sewerBzmnCd: rest.sewerBzmnCd,
+                statsCd: rest.statsCd,
+                mdfrId: rest.mdfrId,
+            };
+            if (rest.vrfcSn != null && String(rest.vrfcSn).trim() !== "") {
+                row.vrfcSn = String(rest.vrfcSn);
+            }
+            const trimmed = rjctOpnnCn?.trim();
+            if (trimmed) row.rjctOpnnCn = trimmed;
+            return row;
+        });
+        const response = await stClient.post<ReviewReturnSaveResponse>(
+            `${ENDPOINT.ST_SERVICE.STATS}/reject`,
+            body,
+            { params: { type } },
+        );
+        return response.data;
+    }
+
+    /** 통계 입력 현황 일괄 승인 — 쿼리 `type`(기본 `INPUT`), body는 `{ list }` */
+    public async approveStatsInputStatus(
+        param: StatsInputStatusApproveBatchRequest,
+        type: StatsInputStatusApproveKind = "INPUT",
+    ): Promise<StatsInputStatusApproveResponse> {
+        const response = await stClient.post<StatsInputStatusApproveResponse>(
+            `${ENDPOINT.ST_SERVICE.STATS}/approve`,
+            param.list,
+            { params: { type } },
+        );
+        return response.data;
+    }
+
+    public async submitReview(
+        param: ReviewSubmitRequest,
+    ): Promise<ReviewSubmitResponse> {
+        const response = await stClient.post<ReviewSubmitResponse>(
+            `${ENDPOINT.ST_SERVICE.REVIEW}/submit`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async getVerificationResultList(param: VerificationResultListRequest): Promise<VerificationResultListResponse> {
+        const { statsCd, ...rest } = param;
+        const params: VerificationResultListRequest = {
+            ...rest,
+            ...(statsCd && statsCd !== "ALL" ? { statsCd } : {}),
+        };
+        const response = await stClient.get<VerificationResultListResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/results/input`,
+            { params },
+        );
+        return response.data;
+    }
+
+    public async SubmitVerifyException(param: SubmitVerifyExceptionRequest): Promise<SubmitVerifyExceptionResponse> {
+        const response = await stClient.put<SubmitVerifyExceptionResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/results/exception`,
+            param,
+        );
+        return response.data;
+    }
+
+    public async getReviewerInfo(param: ReviewerInfoRequest): Promise<ReviewerInfoResponse> {
+        const response = await stClient.get<ReviewerInfoResponse>(
+            `${ENDPOINT.ST_SERVICE.REVIEW}/reviewer-info`,
+            { params: param },
+        );
+        return response.data;
+    }
+
+    public async getStatiscicsManagementReviewHistory(param: StatiscicsManagementReviewHistoryRequest): Promise<StatiscicsManagementReviewHistoryResponse> {
+        const response = await stClient.get<StatiscicsManagementReviewHistoryResponse>(
+            `${ENDPOINT.ST_SERVICE.REVIEW}/stats-review`,
+            { params: param },
+        );
+        return response.data;
+    }
+
+    public async StatiscicsExceptionReset(param: StatiscicsExceptionResetRequest): Promise<StatiscicsExceptionResetResponse> {
+        const response = await stClient.put<StatiscicsExceptionResetResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/results/exception/reset`,
+            param,
+        );
+        return response.data;
+    }
+    
+    public async CheckStatusCode(param: CheckStatusCodeRequest): Promise<CheckStatusCodeResponse> {
+        const response = await stClient.get<CheckStatusCodeResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUTCOMMON}/status-code`,
+            { params: param },
+        );
+        return response.data;
+    }
+    
+    public async getUnSubmitData(param: unSubmitDataRequest): Promise<unSubmitDataResponse> {
+        const response = await stClient.get<unSubmitDataResponse>(
+            `${ENDPOINT.ST_SERVICE.DASHBOARD}/submission-status`,
+            { params: param },
         );
         return response.data;
     }
 }
 
-export const statisticsAPi = new StatisticsAPiService();
\ No newline at end of file
+export const statisticsApi = new StatisticsApiService();
diff --git a/apps/st/src/entities/statistics/api/statistics-total-service.ts b/apps/st/src/entities/statistics/api/statistics-total-service.ts
new file mode 100644
index 000000000..be7f839b9
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/statistics-total-service.ts
@@ -0,0 +1,434 @@
+import { ENDPOINT } from "@/shared/config";
+import { stClient } from "@/shared/api/client";
+
+import type { SewerageSupplyRateRequest, SewerageSupplyRateResponse } from "../model/statistics-total/statistics-sewage-supply-rate-total-interface";
+import type {
+    SewagePipeMaintainDredgingTotalResponse,
+    SewagePipeMaintainTotalRequest,
+    SewagePipeMaintainRepairTotalResponse,
+} from "../model/statistics-total/statistics-sewage-pipe-maintain-total-interface";
+import type {
+    SewagePipeFactInstallStatusResponse,
+    SewagePipePipeDiamStatusResponse,
+    SewagePipePipeTypeFacilityStatusResponse,
+    FcltyManholeSummaryResponse,
+    SewagePipeTotalRequest,
+    SewagePipeTotalResponse,
+} from "../model/statistics-total/statistics-sewage-pipe-total-interface";
+import type { 
+    SewerageServiceLevelComplaintResponse,
+    SewerageServiceLevelRequest,
+    SewerageServiceLevelResidentFriendlyFactResponse
+} from "../model/statistics-total/statistics-service-level-total-interface";
+import type { 
+  PublicSewageInquirySummaryResponse
+} from "../model/statistics-total/statistics-sewage-public-total-interface";
+import type { 
+    SewerReservoirMaintainTotalRequest,
+    SewerReservoirStatusTotalResponse,
+    SewerPumpStationStatusTotalResponse
+} from "../model/statistics-total/statistics-sewage-reservoir-total-interface";
+
+import type {
+    MediationPumpMaintainTotalRequest,
+    MediationPumpStatusTotalResponse
+} from "../model/statistics-total/statistics-mediation-pump-total-interface";
+
+import type {
+    ExcretaTreatmentMaintainTotalRequest,
+    ExcretaTreatmentStatusTotalResponse
+} from "../model/statistics-total/statistics-excreta-treatment-total-interface";
+
+
+import type {
+    PrivateSewageFacilitySummaryRequest,
+    PrivateSewageTab1Response,
+    PrivateSewageTab2Response,
+    PrivateSewageTab3Response
+} from "../model/statistics-total/statistics-private-sewage-total-interface";
+
+import type {
+    SewerageFinanceSummaryRequest,
+    SewerageFinanceSettlementResponse,
+    SewerageFeeResponse,
+    SewerageUsageFeeResponse,
+    SewerageOrgCauseResponse
+} from "../model/statistics-total/statistics-sewerage-finance-total-interface";
+
+import type {
+    WaterReuseSummaryRequest,
+    SewerageReuseStatusTab1Response,
+    GrayWaterStatusTab2Response,
+    RainwaterUtilizationStatusTab3Response,
+    SewageWwtRtlztnRegStatusTab4Response,
+    SewageWwtRtlztnSncnStatusTab5Response
+} from "../model/statistics-total/statistics-sewerage-reuse-total-interface";
+
+import type {
+    SludgeSummaryRequest,
+    SludgeProcessingTab1Response,
+    DigestionTankOperTab2Response,
+    SewageSludgeOperTab3Response,
+   HumanWasteSludgeTab4Response
+} from "../model/statistics-total/statistics-sludge-total-interface";
+
+import type {
+    SewerageIndustry,
+    PublicSewageStaffTab1Response,
+    PublicHumanWasteStaffTab2Response,
+    HumanWasteCollectionTab3Response,
+    IndividualSewageTab4Response
+} from "../model/statistics-total/statistics-sewerage-industry-interface";
+
+
+export class StatisticsTotalApiService {
+    public async getSewerageSupplyRateList(params: SewerageSupplyRateRequest): Promise<SewerageSupplyRateResponse> {
+        const response = await stClient.get<SewerageSupplyRateResponse> (
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sewer-supply-rate/summary`,
+            { params: params }
+        );
+        return response.data;
+    }
+
+    public async getSewagePipeRegionalStatusList(params: SewagePipeTotalRequest): Promise<SewagePipeTotalResponse> {
+        const response = await stClient.get<SewagePipeTotalResponse> (
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sewer-pipe/regional-status`,
+            { params: params }
+        );
+        return response.data;
+    }
+
+
+    public async getSewagePipeFactInstallStatus(
+        params: SewagePipeTotalRequest,
+    ): Promise<SewagePipeFactInstallStatusResponse> {
+        const response = await stClient.get<SewagePipeFactInstallStatusResponse>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sewer-pipe/facility-installation-status`,
+            { params },
+        );
+        return response.data;
+    }
+
+    /** ST00020003 — 관종·관경별 시설현황(합계) */
+    public async getSewagePipePipeTypeFacilityStatus(
+        params: SewagePipeTotalRequest,
+    ): Promise<SewagePipePipeTypeFacilityStatusResponse> {
+        const response = await stClient.get<SewagePipePipeTypeFacilityStatusResponse>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sewer-pipe/pipe-type-facility-status`,
+            { params },
+        );
+        return response.data;
+    }
+
+    /** ST00020004 — 관경별 시설현황(합계) */
+    public async getSewagePipePipeDiamStatus(
+        params: SewagePipeTotalRequest,
+    ): Promise<SewagePipePipeDiamStatusResponse> {
+        const response = await stClient.get<SewagePipePipeDiamStatusResponse>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sewer-pipe/pipe-diam-status`,
+            { params },
+        );
+        return response.data;
+    }
+    /** ST00020005 — 맨홀 시설현황(합계) */
+    public async getSewagePipePipeMnhleStatus(
+        params: SewagePipeTotalRequest,
+    ): Promise<FcltyManholeSummaryResponse> {
+        const response = await stClient.get<FcltyManholeSummaryResponse>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sewer-pipe/manhle-status`,
+            { params },
+        );
+        return response.data;
+    }
+
+    /** ST00030001 — 하수관로 유지관리 > 개보수(합계) */
+    public async getSewagePipeMaintainRepairTotal(
+        params: SewagePipeMaintainTotalRequest,
+    ): Promise<SewagePipeMaintainRepairTotalResponse> {
+        const response = await stClient.get<SewagePipeMaintainRepairTotalResponse>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sewer-pipe-mtc/repair`,
+            { params },
+        );
+        return response.data;
+    }
+
+    /** ST00030002 — 하수관로 유지관리 > 관로준설(합계) */
+    public async getSewagePipeMaintainDredgingTotal(
+        params: SewagePipeMaintainTotalRequest,
+    ): Promise<SewagePipeMaintainDredgingTotalResponse> {
+        const response = await stClient.get<SewagePipeMaintainDredgingTotalResponse>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sewer-pipe-mtc/dredging`,
+            { params },
+        );
+        return response.data;
+    }
+
+    /** ★ ST00040001 — 하수저류시설 현황(합계) API */
+    public async getSewerReservoirStatusTotalList(
+        params: SewerReservoirMaintainTotalRequest,
+    ): Promise<SewerReservoirStatusTotalResponse> {
+        const response = await stClient.get<SewerReservoirStatusTotalResponse>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sewer-reservoir-pump/reservoir-status`,
+            { params },
+        );
+        return response.data;
+    }
+
+    /** ★ ST00040002 — 빗물펌프장 현황(합계) API */
+    public async getSewerPumpStationStatusTotalList(
+        params: SewerReservoirMaintainTotalRequest,
+    ): Promise<SewerPumpStationStatusTotalResponse> {
+        const response = await stClient.get<SewerPumpStationStatusTotalResponse>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sewer-reservoir-pump/pump-station-status`,
+            { params },
+        );
+        return response.data;
+    }
+
+    /** ST00050001 — 중계펌프장 현황(합계) API */
+    public async getMediationPumpStationStatusTotalList(
+        params: MediationPumpMaintainTotalRequest,
+    ): Promise<MediationPumpStatusTotalResponse> {
+        const response = await stClient.get<MediationPumpStatusTotalResponse>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/pump-station-status`,
+            { params },
+        );
+        return response.data;
+    }
+        /** 
+         * ST00060001 —공공하수처리시설 */
+    public async getSewagePublicFacillityTotal(
+        params: SewagePipeMaintainTotalRequest,
+    ): Promise<PublicSewageInquirySummaryResponse> {
+        const response = await stClient.get<PublicSewageInquirySummaryResponse>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/public-sewage`,
+            { params },
+        );
+        return response.data;
+    }
+
+
+    /** ST00070001 — 분뇨처리시설 현황(합계) API */
+    public async getExcretaTreatmentStatusTotalList(
+        params: ExcretaTreatmentMaintainTotalRequest,
+    ): Promise<ExcretaTreatmentStatusTotalResponse> {
+        const response = await stClient.get<ExcretaTreatmentStatusTotalResponse>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/excreta-treatment-status`,
+            { params },
+        );
+        return response.data;
+    }
+
+    /** ST00080001 — 개인하수처리시설 > 처리용량별 오수처리시설(Tab1) */
+    public async getPrivateSewageTab1List(
+        params: PrivateSewageFacilitySummaryRequest,
+    ): Promise<PrivateSewageTab1Response> {
+        const response = await stClient.get<PrivateSewageTab1Response>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/private-sevage`,
+            { params },
+        );
+        return response.data;
+    }
+
+    /** ST00080002 — 개인하수처리시설 > 정화조현황(Tab2) */
+    public async getPrivateSewageTab2List(
+        params: PrivateSewageFacilitySummaryRequest,
+    ): Promise<PrivateSewageTab2Response> {
+        const response = await stClient.get<PrivateSewageTab2Response>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/private-tank-status`,
+            { params },
+        );
+        return response.data;
+    }
+
+    /** ST00080003 — 개인하수처리시설 > 개인하수도 관리지역 지정공고 현황(Tab3) */
+    public async getPrivatePrivateMgmtAreaList(
+        params: PrivateSewageFacilitySummaryRequest,
+    ): Promise<PrivateSewageTab3Response> {
+        const response = await stClient.get<PrivateSewageTab3Response>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/private-mgmt-area`,
+            { params },
+        );
+        return response.data;
+    }
+
+        /** ST00090001 — 하수도 재정결산 조회(Tab1) */
+    public async getSewerageFinancialList(params: SewerageFinanceSummaryRequest): Promise<SewerageFinanceSettlementResponse> {
+        const response = await stClient.get<SewerageFinanceSettlementResponse>(`${ENDPOINT.ST_SERVICE.TOTAL}/sewerage-financial`, { params });
+        return response.data;
+    }
+
+    /** ST00090002 — 하수도 요금 조회(Tab2) */
+    public async getSewerageFeeList(params: SewerageFinanceSummaryRequest): Promise<SewerageFeeResponse> {
+        const response = await stClient.get<SewerageFeeResponse>(`${ENDPOINT.ST_SERVICE.TOTAL}/sewerage-fee`, { params });
+        return response.data;
+    }
+
+    /** ST00090003 — 하수도 사용료 조회(Tab3) */
+    public async getSewerageUsageList(params: SewerageFinanceSummaryRequest): Promise<SewerageUsageFeeResponse> {
+        const response = await stClient.get<SewerageUsageFeeResponse>(`${ENDPOINT.ST_SERVICE.TOTAL}/sewerage-usage`, { params });
+        return response.data;
+    }
+
+    /** ST00090004 — 원인자 부담금 조회(Tab4) */
+    public async getSewerageOrgCauseList(params: SewerageFinanceSummaryRequest): Promise<SewerageOrgCauseResponse> {
+        const response = await stClient.get<SewerageOrgCauseResponse>(`${ENDPOINT.ST_SERVICE.TOTAL}/sewerage-org-cause`, { params });
+        return response.data;
+    }
+
+        /** ST00100001 — 물재이용 > 공공하수처리수 재이용 현황 조회(Tab1) */
+    public async getSewerageReuseTab1List(
+        params: WaterReuseSummaryRequest,
+    ): Promise<SewerageReuseStatusTab1Response> {
+        const response = await stClient.get<SewerageReuseStatusTab1Response>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/pbl-swage-ruswt`,
+            { params },
+        );
+        return response.data;
+    }
+    /**
+     * ST00100002 — 물재이용 > TAB2 중수도 현황 조회
+     */
+    async getGrayWaterStatusTab2List(
+        params: WaterReuseSummaryRequest
+    ): Promise<GrayWaterStatusTab2Response> { 
+        const response = await stClient.get<GrayWaterStatusTab2Response>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/gray-water-status`,
+            { params },
+        );
+        return response.data;
+
+    }
+    /** ★ ST00100003 — 물재이용 > TAB3 빗물이용시설현황 조회  */
+    async getRainwaterStatusTab3List(params: WaterReuseSummaryRequest): Promise<RainwaterUtilizationStatusTab3Response> {
+        const response = await stClient.get<RainwaterUtilizationStatusTab3Response>(`${ENDPOINT.ST_SERVICE.TOTAL}/water-reuse`, { params });
+        return response.data;
+    }
+
+    /** ★ ST00100004 — 물재이용 > TAB4 하·폐수처리수 재이용시설 시공업 등록현황 조회 */
+    async getWwtRtlztnRegStatusTab4List(params: WaterReuseSummaryRequest): Promise<SewageWwtRtlztnRegStatusTab4Response> {
+        const response = await stClient.get<SewageWwtRtlztnRegStatusTab4Response>(`${ENDPOINT.ST_SERVICE.TOTAL}/wwt-rtlztn-reg`, { params });
+        return response.data;
+    }
+
+    /** ★ ST00100005 — 물재이용 > TAB5 하·폐수처리수 재이용시설 시공업 인가현황 조회 */
+    async getWwtRtlztnSncnStatusTab5List(params: WaterReuseSummaryRequest): Promise<SewageWwtRtlztnSncnStatusTab5Response> {
+        const response = await stClient.get<SewageWwtRtlztnSncnStatusTab5Response>(`${ENDPOINT.ST_SERVICE.TOTAL}/wwt-rtlztn-aprv`, { params });
+        return response.data;
+    }
+
+    /**
+     * ST00110001 — 하수및분뇨찌꺼기 > TAB1 찌꺼기처리시설현황 조회
+     */
+    async getSludgeProcessingTab1List(
+        params: SludgeSummaryRequest
+    ): Promise<SludgeProcessingTab1Response> {
+        const response = await stClient.get<SludgeProcessingTab1Response>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sludge-processing`,
+            { params },
+        );
+        return response.data;
+    }
+    /**
+     * ST00110002 — 하수및분뇨찌꺼기 > TAB2 소화조 운영현황 조회
+     */
+    async getSludgeTab2List(
+        params: SludgeSummaryRequest
+    ): Promise<DigestionTankOperTab2Response> {
+        const response = await stClient.get<DigestionTankOperTab2Response>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sludge-digestion-tank`,
+            { params },
+        );
+        return response.data;
+    }
+
+    /**
+     * ST00110003 — 하수및분뇨찌꺼기 > TAB3 하수찌꺼기 처리시설 운영현황 조회
+     */
+    async getSludgeTab3List(
+        params: SludgeSummaryRequest
+    ): Promise<SewageSludgeOperTab3Response> {
+        // <SewageSludgeOperTab3Response> 제네릭을 추가하여 unknown 에러를 해결합니다.
+        const response = await stClient.get<SewageSludgeOperTab3Response>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sludge-facility-oper`,
+            { params }
+        );
+        return response.data;
+    }
+    
+    /**
+     * ST00110004 — 하수및분뇨찌꺼기 > TAB4 분뇨찌꺼기(슬러지)처리현황
+     */
+    async getSludgeTab4List(
+    params: SludgeSummaryRequest
+    ): Promise<HumanWasteSludgeTab4Response> {
+    const response = await stClient.get<HumanWasteSludgeTab4Response>(
+        `${ENDPOINT.ST_SERVICE.TOTAL}/sludge-human-waste`,
+        { params },
+    );
+    return response.data;
+    }
+
+    /** ST00120001[TAB1] 공공기관 하수분야 조회 */
+    async getPublicSewageStaffTab1List(
+        params: SewerageIndustry
+    ): Promise<PublicSewageStaffTab1Response> {
+        const response = await stClient.get<PublicSewageStaffTab1Response>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/public-sewage-staff`,
+            { params }
+        );
+        return response.data;
+    }
+    /** ST00120002[TAB2] 공공기관 분뇨분야 조회 */
+    async getPublicHumanWasteStaffTab2List(
+        params: SewerageIndustry
+    ): Promise<PublicHumanWasteStaffTab2Response> {
+        const response = await stClient.get<PublicHumanWasteStaffTab2Response>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/public-human-waste-staff`,
+            { params }
+        );
+        return response.data;
+    }
+
+    /** [TAB3] 분뇨수집·운반업 조회 */
+    async getHumanWasteCollectionTab3List(
+        params: SewerageIndustry
+    ): Promise<HumanWasteCollectionTab3Response> {
+        const response = await stClient.get<HumanWasteCollectionTab3Response>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/human-waste-collection`,
+            { params }
+        );
+        return response.data;
+    }
+
+    /** [TAB4] 개인하수처리관련업 조회 */
+    async getIndividualSewageTab4List(
+        params: SewerageIndustry
+    ): Promise<IndividualSewageTab4Response> {
+        const response = await stClient.get<IndividualSewageTab4Response>(
+            `${ENDPOINT.ST_SERVICE.TOTAL}/indv-swtrmt-rel-bsns`,
+            { params }
+        );
+        return response.data;
+    }
+
+    /** [TAB1] 하수도서비스수준 - 민원 조회 */
+    public async getSewerageServiceLevelComplaint(params: SewerageServiceLevelRequest): Promise<SewerageServiceLevelComplaintResponse> {
+        const response = await stClient.get<SewerageServiceLevelComplaintResponse> (
+            `${ENDPOINT.ST_SERVICE.TOTAL}/sewage-complaint`,
+            { params: params }
+        );
+        return response.data;
+    }
+    /** [TAB1] 하수도서비스수준 - 주민친화시설 조회 */
+    public async getSewerageServiceLevelResidentFriendlyFact(params: SewerageServiceLevelRequest): Promise<SewerageServiceLevelResidentFriendlyFactResponse> {
+        const response = await stClient.get<SewerageServiceLevelResidentFriendlyFactResponse> (
+            `${ENDPOINT.ST_SERVICE.TOTAL}/resident-friendly-facility`,
+            { params: params }
+        );
+        return response.data;
+    }
+    }
+
+
+export const statisticsTotalStatusApi = new StatisticsTotalApiService();
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/api/verification-input-report-service.ts b/apps/st/src/entities/statistics/api/verification-input-report-service.ts
new file mode 100644
index 000000000..b8fba2b79
--- /dev/null
+++ b/apps/st/src/entities/statistics/api/verification-input-report-service.ts
@@ -0,0 +1,42 @@
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+
+import { stClient } from "@/shared/api/client";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+    VerificationInputReportRequest,
+    VerificationInputReportResponse,
+    VerificationInputReportService,
+} from "../model/verification-input-report-interface";
+
+/** 이 API 전용 헤더 키 (백엔드 스펙: `token-id`) */
+const TOKEN_ID_HEADER = "token-id";
+
+export class VerificationInputReportApiService implements VerificationInputReportService {
+    public async getVerificationInputReport(
+        param: VerificationInputReportRequest,
+    ): Promise<VerificationInputReportResponse> {
+        const userInfo = await getUserInfo();
+        const { statsCd, page, size, ...rest } = param;
+
+        const params: VerificationInputReportRequest = {
+            ...rest,
+            ...(statsCd && statsCd !== "ALL" ? { statsCd } : {}),
+            ...(page != null ? { page } : {}),
+            ...(size != null ? { size } : {}),
+        };
+
+        const response = await stClient.get<VerificationInputReportResponse>(
+            `${ENDPOINT.ST_SERVICE.INPUTVERIFY}/results/input/report`,
+            {
+                params,
+                headers: {
+                    [TOKEN_ID_HEADER]: userInfo.userUnqId,
+                },
+            },
+        );
+        return response.data;
+    }
+}
+
+export const verificationInputReportApi = new VerificationInputReportApiService();
diff --git a/apps/st/src/entities/statistics/index.ts b/apps/st/src/entities/statistics/index.ts
index 1b21259b5..c8045b1f3 100644
--- a/apps/st/src/entities/statistics/index.ts
+++ b/apps/st/src/entities/statistics/index.ts
@@ -1,3 +1,33 @@
+export { analysisApi } from "./api/analysis-api";
+export {
+    useDashboardEcptReqCount,
+    useDashboardStatsSubmissionRate,
+    useDashboardUnSubmitCount,
+    useDashboardVrfcErrCount,
+    useDashboardVrfcReport,
+} from "./api/dashboard/dashboard-queries";
+export { dashboardApi } from "./api/dashboard/dashboard-service";
+export { useScheduleInfo } from "./api/dashboard/schedule-info-queries";
+export { scheduleInfoApi } from "./api/dashboard/schedule-info-service";
+export { imrApi } from "./api/imr-api";
+export { noticeTalkSendingApi } from "./api/notice-talk/notice-talk-sending-service";
+export {
+    useNtftalkTemplateList,
+    useNtftalkTemplateVariables,
+} from "./api/notice-talk/queries";
+export {
+    useSewerStUserList,
+    useStAnlsSidoCombo,
+    useStAnlsSigunguCombo,
+    useStatsVrfcRptData,
+    useStatsVrfcRsltData,
+} from "./api/queries";
+export { sewerStUserApi } from "./api/sewer-st-user-service";
+export { statisticsAnalysisDetailService } from "./api/statistics-analysis-detail-service";
+export { statisticsAnalysisMasterService } from "./api/statistics-analysis-master-service";
+export { stAnlsRsltApi } from "./api/statistics-analysis-result-api";
+export { statisticsApprovalApi } from "./api/statistics-approval-service";
+export { verificationTargetManagementApi } from "./api/verification-target-management-service";
 export {
     type AnalysisHistoryListApiResponse,
     type AnalysisRequestPayload,
@@ -7,7 +37,30 @@ export {
     type JobStatusDto,
     type OutlierRecordDto,
 } from "./model/analysis/analysis-interface";
-export { imrDetailGridColumnInfo } from "./model/imr/imr-detail-grid-column-info";
+export {
+    type DashboardApiResponse,
+    type DashboardSearchParams,
+    type DashboardService,
+    type EcptReqCountResponse,
+    type StatsSubmissionResponse,
+    type UnSubmitCountResponse,
+    type UnSubmitStatsResponse,
+    type VrfcErrCountResponse,
+    type VrfcReportResponse,
+    type VrfcReportSelect,
+} from "./model/dashboard/dashboard-interface";
+export {
+    type ScheduleInfoApiResponse,
+    type ScheduleInfoResponse,
+    type ScheduleInfoSearchParams,
+    type ScheduleInfoService,
+} from "./model/dashboard/schedule-info-interface";
+export { type VerifyResultItem } from "./model/general-verification-interface";
+export {
+    IMR_DETAIL_VISIBLE_COLUMNS_BY_STATS_CD,
+    IMR_DETAIL_VISIBLE_COLUMNS_DEFAULT,
+    imrDetailGridColumnInfo,
+} from "./model/imr/imr-detail-grid-column-info";
 export {
     type ImrDetailRequest,
     type ImrDetailResponse,
@@ -22,6 +75,28 @@ export {
 } from "./model/imr/imr-interface";
 export { imrVerificationHistoryColumns } from "./model/imr/imr-verification-history-columns";
 export {
+    type StatsInputStatusApproveBatchRequest,
+    type StatsInputStatusApproveItem,
+    type StatsInputStatusApproveKind,
+    type StatsInputStatusApproveResponse,
+} from "./model/statistics-interface";
+export { type StatsInputStatusList } from "./model/input/statistics-input-status-interface";
+export { userListColumns } from "./model/notice-talk/notice-talk-sending-columns";
+export {
+    type BusinessSendRequest,
+    type BusinessSendResponse,
+    type NtftalkTemplate,
+    type SelectedRecipient,
+    type TemplateVariablesResponse,
+} from "./model/notice-talk/notice-talk-sending-interface";
+export {
+    type SewerStUserItem,
+    type SewerStUserListResponse,
+    type SewerStUserSearchParams,
+} from "./model/sewer-st-user-interface";
+export {
+    type StAnlsDtlConfirmRequest,
+    type StAnlsDtlConfirmResponse,
     type StAnlsDtlListApiResponse,
     type StAnlsDtlResponse,
     type StAnlsDtlSearchParams,
@@ -50,6 +125,19 @@ export {
 } from "./model/statistics-analysis/statistics-analysis-result-interface";
 export { verificationHistoryColumns } from "./model/statistics-analysis/verification-history-columns";
 export { getVerificationListColumns } from "./model/statistics-analysis/verification-list-columns";
+export {
+    type ApprovalResponse,
+    type ApproveRequest,
+    type RejectRequest,
+} from "./model/statistics-approval-interface";
+export {
+    statisticsVerificationReportColumnInfo,
+    statisticsVerificationResultColumnInfo,
+} from "./model/statistics-verification-report/statistics-verification-report-columns";
+export {
+    type StatisticsVerificationFilterState,
+    type StatisticsVerificationSubFilterState,
+} from "./model/statistics-verification-report/statistics-verification-report-types";
 export {
     hbArticleColumnInfo,
     imrArticleColumnInfo,
@@ -60,3 +148,4 @@ export {
     type IMRArticleItem,
     type ValidationArticleItem,
 } from "./model/verification-article/verification-article-interface";
+export { type VerificationTargetCodeResponse } from "./model/verification-target-management-interface";
diff --git a/apps/st/src/entities/statistics/model/dashboard/dashboard-interface.ts b/apps/st/src/entities/statistics/model/dashboard/dashboard-interface.ts
new file mode 100644
index 000000000..b0d9093a0
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/dashboard/dashboard-interface.ts
@@ -0,0 +1,84 @@
+export interface DashboardSearchParams {
+    statsYr: string;
+    dtlInstCd: string;
+    enoCd?: string;
+    laeSeCd?: string;
+    sewerBzmnCd?: string;
+    sido?: string;
+    sggNm?: string;
+    unSubmitOnly?: boolean;
+}
+
+export interface DashboardApiResponse<T> {
+    status: string;
+    message: string;
+    data: T;
+    code: string;
+    httpStatus: number;
+}
+
+export interface VrfcReportResponse {
+    typeCounts: Record<string, number>;
+    list: VrfcReportSelect[];
+}
+
+export interface VrfcReportSelect {
+    vrfcCd: string;
+    statsNm: string;
+    rsnExpln: string;
+    admdstNm: string;
+    nowVlCn: string;
+    compVlCn: string;
+}
+
+export interface VrfcErrCountResponse {
+    statsYr: string;
+    vrfcErrCount: number;
+}
+
+export interface UnSubmitCountResponse {
+    statsYr: string;
+    statusList: UnSubmitStatsResponse[];
+    submittedCount: number;
+    totalCount: number;
+    unSubmittedCount: number;
+}
+
+export interface UnSubmitStatsResponse {
+    sbmsnYn: string;
+    sidoSggNm: string;
+    statsCd: string;
+    statsNm: string;
+    statusCd: string;
+    statusNm: string;
+}
+
+export interface StatsSubmissionResponse {
+    totalCount: number;
+    submittedCount: number;
+    submissionRate: number;
+    statusLevel: string;
+}
+
+export interface EcptReqCountResponse {
+    statsYr: string;
+    ecptReqCount: number;
+}
+
+export interface DashboardService {
+    getVrfcReport(
+        params: DashboardSearchParams,
+    ): Promise<DashboardApiResponse<VrfcReportResponse>>;
+    getVrfcErrCount(
+        params: DashboardSearchParams,
+    ): Promise<DashboardApiResponse<VrfcErrCountResponse>>;
+    getUnSubmitCount(
+        params: DashboardSearchParams,
+    ): Promise<DashboardApiResponse<UnSubmitCountResponse>>;
+    getStatsSubmissionRate(
+        params: DashboardSearchParams,
+    ): Promise<DashboardApiResponse<StatsSubmissionResponse>>;
+    getEcptReqCount(
+        params: DashboardSearchParams,
+    ): Promise<DashboardApiResponse<EcptReqCountResponse>>;
+}
diff --git a/apps/st/src/entities/statistics/model/dashboard/schedule-info-interface.ts b/apps/st/src/entities/statistics/model/dashboard/schedule-info-interface.ts
new file mode 100644
index 000000000..f93d110c7
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/dashboard/schedule-info-interface.ts
@@ -0,0 +1,30 @@
+export interface ScheduleInfoSearchParams {
+    statsYr: string;
+}
+
+export interface ScheduleInfoApiResponse<T> {
+    status: string;
+    message: string;
+    data: T;
+    code: string;
+    httpStatus: number;
+}
+
+export interface ScheduleInfoResponse {
+    statsYr: string;
+    inptSeCd: number;
+    inptBgngYmd: string;
+    inptEndYmd: string;
+    vrfcSeCd: number;
+    vrfcBgngYmd: string;
+    vrfcEndYmd: string;
+    currentSe: string;
+    dday: string;
+    ddayLabel: string;
+}
+
+export interface ScheduleInfoService {
+    getScheduleInfo(
+        params: ScheduleInfoSearchParams,
+    ): Promise<ScheduleInfoApiResponse<ScheduleInfoResponse>>;
+}
diff --git a/apps/st/src/entities/statistics/model/general-verification-interface.ts b/apps/st/src/entities/statistics/model/general-verification-interface.ts
index daf822113..a3fcd66c0 100644
--- a/apps/st/src/entities/statistics/model/general-verification-interface.ts
+++ b/apps/st/src/entities/statistics/model/general-verification-interface.ts
@@ -86,7 +86,7 @@ export interface VrfcOperatorsResponse {
         opertSn: string;
         opertSymbl: string;
         opertKornNm: string;
-    }[]
+    }[];
 }
 
 /** 검증 상세 - 공통 정보 */
@@ -165,48 +165,135 @@ export interface SelectedVerifyColumnListResponseData {
 export interface SelectedVerifyColumnListResponse {
     status: string;
     message?: string;
-    data: VerifyColumnListResponseData
+    data: VerifyColumnListResponseData;
 }
 
 export interface VerifyDetailRegistData {
     trgtStatsCd: string;
     refStatsCd: string | null;
-    kornArtopnEqtnCn: string,
-    engArtopnEqtnCn: string,
+    kornArtopnEqtnCn: string;
+    engArtopnEqtnCn: string;
     cmprOpert: string | null;
-    eqtnCombSeq: number
+    eqtnCombSeq: number;
 }
 
 export interface VerifyDetailRegistRequest {
     vrfcSn: number | null;
-    detailList: VerifyDetailRegistData[]
+    detailList: VerifyDetailRegistData[];
     rgtrId: string;
 }
 
 export interface VerifyDetailUpdateRequest {
     vrfcSn: number | null;
-    detailList: VerifyDetailRegistData[]
-    mdfrId: string; 
+    detailList: VerifyDetailRegistData[];
+    mdfrId: string;
 }
 
 export interface CopyVerifyDataRequest {
     vrfcSn?: number | null;
-    targetStatsCd : string;
+    targetStatsCd: string;
     rgtrId: string;
 }
 
+export interface VerifyResultSearchRequest {
+    ctpvNm?: string | null;
+    sggNm?: string | null;
+    sewerBzmnCd?: string | null;
+    statsYr: string;
+    statsCd?: string | null;
+    laeSbmsnSttsCd?: string | null;
+    vrfcMthdCd?: string;
+    prcsYnList?: string; // 검증 상태 리스트 (0: 미검증, 1: 수정완료, 2:예외통과, 3: 반려)
+    pbcpAprvYn?: string; // 공단 승인 여부 (Y/N)
+}
+
+export interface VerifyResultListRequest {
+    searchDto: VerifyResultSearchRequest;
+    page?: number;
+    size?: number;
+}
+
+export interface VerifyResultItem {
+    statsYr?: string;
+    statsCd?: string;
+    statsNm?: string;
+    sewerBzmnCd?: string;
+    ctpvNm?: string;
+    sggNm?: string;
+    admdstNm?: string;
+    vrfcSn?: number;
+    vrfcMthdCd?: string;
+    vrfcMthdNm?: string;
+    vrfcTrgtNm?: string;
+    regDt?: string;
+    rsnExpln?: string;
+    nowVlCn?: string;
+    compVlCn?: string;
+    prcsYn?: string;
+    prcsYnNm?: string;
+    prcsOpnnExpln?: string;
+    prcrId?: string;
+    rjctOpnnCn?: string;
+    pbcpAprvYn?: string;
+    mdfrId?: string;
+    mdfcnDt?: string;
+}
+
+export interface VerifyResultPageInfo {
+    totalElements: number;
+    totalPages: number;
+    currentPage: number;
+    size: number;
+}
+
+export interface VerifyResultPageData {
+    verifyResultList: VerifyResultItem[];
+    pageInfo: VerifyResultPageInfo;
+}
+
+export interface VerifyResultListResponse {
+    status: string;
+    message?: string;
+    data: VerifyResultPageData;
+    code?: string;
+    httpStatus?: number;
+}
+
 export interface GeneralverificationService {
-    getGeneralverificationList(param: GeneralverificationRequest): Promise<GeneralverificationResponse>;
-    getGeneralverificationInfo(param: number): Promise<GeneralverificationInfoResponse>;
-    checkVerificationName(param: CheckVerificationNameRequest): Promise<CheckVerificationNameResponse>;
-    UpdateVrfcMaster(param: UpdateVrfcMasterRequest): Promise<UpdateVrfcMasterResponse>;
-    RegistVrfcMaster(param: RegistVrfcMasterRequest): Promise<RegistVrfcMasterResponse>;
+    getGeneralverificationList(
+        param: GeneralverificationRequest,
+    ): Promise<GeneralverificationResponse>;
+    getGeneralverificationInfo(
+        param: number,
+    ): Promise<GeneralverificationInfoResponse>;
+    checkVerificationName(
+        param: CheckVerificationNameRequest,
+    ): Promise<CheckVerificationNameResponse>;
+    UpdateVrfcMaster(
+        param: UpdateVrfcMasterRequest,
+    ): Promise<UpdateVrfcMasterResponse>;
+    RegistVrfcMaster(
+        param: RegistVrfcMasterRequest,
+    ): Promise<RegistVrfcMasterResponse>;
     DeleteVrfcMaster(param: number): Promise<DeleteVrfcMasterResponse>;
     getVrfcOperators(): Promise<VrfcOperatorsResponse>;
     getVrfcDetail(param: number): Promise<GeneralverificationDetailResponse>;
-    getVerifyColumnList(param: VerifyColumnListRequest): Promise<VerifyColumnListResponse>;
-    getSelectedVerifyColumnList(param: string): Promise<VerifyColumnListResponse>;
-    RegistVrfcDetail(param: VerifyDetailRegistRequest): Promise<RegistVrfcMasterResponse>;
-    UpdateVrfcDetail(param: VerifyDetailUpdateRequest): Promise<RegistVrfcMasterResponse>;
-    CopyVrfcData(param: CopyVerifyDataRequest): Promise<RegistVrfcMasterResponse>;
-}
\ No newline at end of file
+    getVerifyColumnList(
+        param: VerifyColumnListRequest,
+    ): Promise<VerifyColumnListResponse>;
+    getSelectedVerifyColumnList(
+        param: string,
+    ): Promise<VerifyColumnListResponse>;
+    RegistVrfcDetail(
+        param: VerifyDetailRegistRequest,
+    ): Promise<RegistVrfcMasterResponse>;
+    UpdateVrfcDetail(
+        param: VerifyDetailUpdateRequest,
+    ): Promise<RegistVrfcMasterResponse>;
+    CopyVrfcData(
+        param: CopyVerifyDataRequest,
+    ): Promise<RegistVrfcMasterResponse>;
+    getVerifyResultList(
+        param: VerifyResultListRequest,
+    ): Promise<VerifyResultListResponse>;
+}
diff --git a/apps/st/src/entities/statistics/model/imr/imr-detail-grid-column-info.ts b/apps/st/src/entities/statistics/model/imr/imr-detail-grid-column-info.ts
index 93fa450bc..4fe4c554a 100644
--- a/apps/st/src/entities/statistics/model/imr/imr-detail-grid-column-info.ts
+++ b/apps/st/src/entities/statistics/model/imr/imr-detail-grid-column-info.ts
@@ -2,8 +2,74 @@ import { ValueType } from "realgrid";
 
 import type { ColumnInfo } from "@/components/type/DataGrid.type";
 
+/** 공통: 시도·구군·행정구역·당해년도 */
+const IMR_VISIBLE_REGION_COLUMNS = [
+    "vrfcTrgtNm",
+    "sido",
+    "gugun",
+    "adstDong",
+    "cryrVl",
+] as const;
+
+/** ST00020003: 시도·구군·행정구역·관종구분·매설년도 */
+const IMR_VISIBLE_REGION_AND_PIPE_COLUMNS = [
+    ...IMR_VISIBLE_REGION_COLUMNS,
+    "pipeSeNm",
+    "lyngYr",
+] as const;
+
+/** ST00020005: 시도·구군·행정구역·중점관리구역구분·맨홀기준년도 */
+const IMR_VISIBLE_REGION_AND_MANH_COLUMNS = [
+    ...IMR_VISIBLE_REGION_COLUMNS,
+    "emphsMngSeNm",
+    "manhYr",
+] as const;
+
+/** ST00060001, ST00100001: 시도·구군·행정구역·시설코드·시설명·주소 */
+const IMR_VISIBLE_FACILITY_FULL_COLUMNS = [
+    ...IMR_VISIBLE_REGION_COLUMNS,
+    "admdstCd",
+    "fcltNm",
+    "addr",
+] as const;
+
+/** ST00040001, ST00040002, ST00050001, ST00070001: 시도·구군·행정구역·시설명·주소 */
+const IMR_VISIBLE_FACILITY_NAME_ADDR_COLUMNS = [
+    ...IMR_VISIBLE_REGION_COLUMNS,
+    "fcltNm",
+    "addr",
+] as const;
+
+/**
+ * statsCd별 표시 컬럼 name 목록.
+ * 그 외 코드는 {@link IMR_DETAIL_VISIBLE_COLUMNS_DEFAULT} 사용.
+ */
+export const IMR_DETAIL_VISIBLE_COLUMNS_BY_STATS_CD: Record<
+    string,
+    readonly string[]
+> = {
+    ST00020003: [...IMR_VISIBLE_REGION_AND_PIPE_COLUMNS],
+    ST00020005: [...IMR_VISIBLE_REGION_AND_MANH_COLUMNS],
+    ST00060001: [...IMR_VISIBLE_FACILITY_FULL_COLUMNS],
+    ST00100001: [...IMR_VISIBLE_FACILITY_FULL_COLUMNS],
+    ST00040001: [...IMR_VISIBLE_FACILITY_NAME_ADDR_COLUMNS],
+    ST00040002: [...IMR_VISIBLE_FACILITY_NAME_ADDR_COLUMNS],
+    ST00050001: [...IMR_VISIBLE_FACILITY_NAME_ADDR_COLUMNS],
+    ST00070001: [...IMR_VISIBLE_FACILITY_NAME_ADDR_COLUMNS],
+};
+
+/** 그 외 statsCd: 검증대상·시도·구군·행정구역만 표시 */
+export const IMR_DETAIL_VISIBLE_COLUMNS_DEFAULT: readonly string[] =
+    IMR_VISIBLE_REGION_COLUMNS;
+
 export const imrDetailGridColumnInfo: ColumnInfo = {
     columns: [
+        {
+            name: "vrfcTrgtNm",
+            fieldName: "vrfcTrgtNm",
+            header: { text: "검증대상" },
+            width: 150,
+        },
         {
             name: "sido",
             fieldName: "sido",
@@ -22,6 +88,18 @@ export const imrDetailGridColumnInfo: ColumnInfo = {
             header: { text: "행정구역" },
             width: 100,
         },
+        {
+            name: "emphsMngSeNm",
+            fieldName: "emphsMngSeNm",
+            header: { text: "중점관리구역구분" },
+            width: 80,
+        },
+        {
+            name: "manhYr",
+            fieldName: "manhYr",
+            header: { text: "맨홀기준년도" },
+            width: 100,
+        },
         {
             name: "admdstCd",
             fieldName: "admdstCd",
@@ -44,41 +122,44 @@ export const imrDetailGridColumnInfo: ColumnInfo = {
         {
             name: "pipeSeNm",
             fieldName: "pipeSeNm",
-            header: { text: "관로구분" },
+            header: { text: "관종구분" },
             width: 80,
         },
+        {
+            name: "lyngYr",
+            fieldName: "lyngYr",
+            header: { text: "매설년도" },
+            width: 100,
+        },
         {
             name: "vrfcTrgtSn",
             fieldName: "vrfcTrgtSn",
             header: { text: "항목번호" },
             width: 80,
         },
-        {
-            name: "vrfcTrgtNm",
-            fieldName: "vrfcTrgtNm",
-            header: { text: "항목명" },
-            width: 150,
-        },
         {
             name: "cryrVl",
             fieldName: "cryrVl",
             header: { text: "당해년도" },
             width: 100,
             valueType: ValueType.NUMBER,
-            dataFormat: "#,##0",
+            dataFormat: "#,##0.##",
             styleName: "right-column",
         },
     ],
     columnLayout: [
+        "vrfcTrgtNm",
         "sido",
         "gugun",
         "adstDong",
+        "emphsMngSeNm",
+        "manhYr",
         "admdstCd",
         "fcltNm",
         "addr",
         "pipeSeNm",
+        "lyngYr",
         "vrfcTrgtSn",
-        "vrfcTrgtNm",
         "cryrVl",
     ],
 };
diff --git a/apps/st/src/entities/statistics/model/imr/imr-interface.ts b/apps/st/src/entities/statistics/model/imr/imr-interface.ts
index ce134eb18..c94bbbeac 100644
--- a/apps/st/src/entities/statistics/model/imr/imr-interface.ts
+++ b/apps/st/src/entities/statistics/model/imr/imr-interface.ts
@@ -75,6 +75,15 @@ export interface ImrLogRequest {
     anlsSn: number; // 분석 일련번호
     vrfcTrgtSn: number; // 검증 대상 지표 일련번호
     admdstCd: string; // 행정동(행정구역) 코드
+    swtrmtFcltCd: string; // 하수처리시설 코드
+    pipeSeCd: string; // 관종 코드
+    fcltNm: string; // 시설명
+    fcltPstnCn: string; // 시설주소내용
+    fcltSn: number; // 시설일련번호
+    ognzNm: string; // 조직명
+    emphsMngSeCd: string; // 맨홀관리구분코드
+    lyngYr: string; // 매설년도
+    manhYr: string; // 맨홀기준년도
 }
 
 /**
@@ -116,4 +125,6 @@ export interface ImrLogResponse {
     controlRange: number; // 관리 전체 폭(CL)
     confidenceLevel: string; // 신뢰 구간 표기
     history: ImrLogDataParam[]; // 연도별 상세 추적 기록
+    lyngYr: string; // 매설년도
+    manhYr: string; // 맨홀기준년도
 }
diff --git a/apps/st/src/entities/statistics/model/imr/imr-verification-history-columns.tsx b/apps/st/src/entities/statistics/model/imr/imr-verification-history-columns.tsx
index 09370901f..c017916d0 100644
--- a/apps/st/src/entities/statistics/model/imr/imr-verification-history-columns.tsx
+++ b/apps/st/src/entities/statistics/model/imr/imr-verification-history-columns.tsx
@@ -72,7 +72,7 @@ export const imrVerificationHistoryColumns = [
         ),
     }),
     columnHelper.accessor("statsYr", {
-        header: "검증년도",
+        header: "통계년도",
         cell: (info) => (
             <div className="px-2 py-4 text-center">
                 {info.getValue() ?? "-"}
diff --git a/apps/st/src/entities/statistics/model/input/statistics-input-excreta-treatment-facility-interface.ts b/apps/st/src/entities/statistics/model/input/statistics-input-excreta-treatment-facility-interface.ts
new file mode 100644
index 000000000..662c2d30a
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/input/statistics-input-excreta-treatment-facility-interface.ts
@@ -0,0 +1,166 @@
+import type { ApiResponse, SewerageStatusInfo } from "../statistics-interface";
+
+/** 분뇨처리시설(ST00070001) — `ExcretaTreatFactInpColumn` */
+export const EXCRETA_TREATMENT_FACILITY_STATS_CD = "ST00070001" as const;
+
+/** 검증 결과 한 건 */
+export interface ExcretaTreatmentFacilityVerificationResultItem {
+    vrfcCd: string;
+    rsnExpln: string;
+    nowVlCn: string;
+    compVlCn: string;
+}
+
+/** 필드명 → 검증 결과 배열 */
+export type ExcretaTreatmentFacilityVerificationResult = Record<
+    string,
+    ExcretaTreatmentFacilityVerificationResultItem[]
+>;
+
+/** 분뇨처리시설 조회 `data.commonInfo` */
+export interface ExcretaTreatmentFacilityCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: ExcretaTreatmentFacilityVerificationResult;
+}
+
+/**
+ * 분뇨처리시설 조회 `data.excretaTreatmentFacilityList[]` 한 행.
+ * `ExcretaTreatFactInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 `commonInfo.ctpvNm` 시도명).
+ */
+export interface ExcretaTreatmentFacilityItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    fcltSn: string;
+    fcltNm: string;
+    fcltPstnCn: string;
+    telNo: string;
+    cmptnStrtYmd: string;
+    oprtngStrtYmd: string;
+    wholPjtcoAmt: number;
+    prcsFcltCpct: number;
+    cpct: number;
+    oprtngDayCnt: number;
+    prcsMthdExpln: string;
+    linkTmplntCn: string;
+    linkPrcsQnt: number;
+    inflwBodWqVl: number;
+    inflwTocWqVl: number;
+    inflwSsWqVl: number;
+    inflwTnWqVl: number;
+    inflwTpWqVl: number;
+    inflwClfgCnt: number;
+    dschgBodWqVl: number;
+    dschgTocWqVl: number;
+    dschgSsWqVl: number;
+    dschgTnWqVl: number;
+    dschgTpWqVl: number;
+    dschgClfgCnt: number;
+    wtsysNm: string;
+    trbtrNm: string;
+    msirbCn: string;
+    ssirbCn: string;
+    operMthdCdCn: string;
+    wholNope: number;
+    sftyAcdntEvntcsCnt: number;
+    rmrk: string | null;
+    verificationResult?: ExcretaTreatmentFacilityVerificationResult;
+}
+
+export interface ExcretaTreatmentFacilityResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: ExcretaTreatmentFacilityCommonInfo;
+    excretaTreatmentFacilityList: ExcretaTreatmentFacilityItem[];
+}
+
+export type ExcretaTreatmentFacilityApiResponse =
+    ApiResponse<ExcretaTreatmentFacilityResponseData> & {
+        message: string;
+    };
+
+/** 분뇨처리시설(ST00070001) 조회 요청 파라미터 */
+export interface ExcretaTreatmentFacilityRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+    fcltNm?: string;
+}
+
+/**
+ * 분뇨처리시설(ST00070001) 저장 — `saveList` / `deleteList` 항목.
+ * `sggNm`·검증결과는 저장 요청에서 제외.
+ */
+export type ExcretaTreatmentFacilitySaveItem = Omit<
+    ExcretaTreatmentFacilityItem,
+    "sggNm" | "verificationResult"
+>;
+
+/** 분뇨처리시설(ST00070001) 저장 API 요청 */
+export interface ExcretaTreatmentFacilitySaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    noApplicable?: boolean;
+    saveList: ExcretaTreatmentFacilitySaveItem[];
+    deleteList: ExcretaTreatmentFacilitySaveItem[];
+}
+
+export interface ExcretaTreatmentFacilitySaveResponse {
+    status: string;
+    message?: string;
+    data?: string;
+}
+
+export type ExcretaTreatmentFacilitySubmitItem = ExcretaTreatmentFacilitySaveItem;
+
+/** 분뇨처리시설(ST00070001) 제출 API 요청 */
+export interface ExcretaTreatmentFacilitySubmitRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+
+    laePicNm: string;
+    laePicTelNo: string;
+    laeKbrdrDeptNm: string;
+    laeKbrdrJbgdNm: string;
+    laeIdfrNm: string;
+    laeIdfrTelNo: string;
+    laeIdfrDeptNm: string;
+    laeIdfrJbgdNm: string;
+
+    superAdmin?: string;
+    noApplicable?: boolean;
+    submitList: ExcretaTreatmentFacilitySubmitItem[];
+    deleteList: ExcretaTreatmentFacilitySubmitItem[];
+}
+
+export interface ExcretaTreatmentFacilitySubmitResponse {
+    status: string;
+    message?: string;
+    data?: {
+        finalStatus: string;
+        nvpassed: boolean;
+    };
+}
+
+export interface StatisticsInputExcretaTreatmentFacilityService {
+    getExcretaTreatmentFacilityList(
+        params: ExcretaTreatmentFacilityRequestParams,
+    ): Promise<ExcretaTreatmentFacilityApiResponse>;
+    saveExcretaTreatmentFacilityList(
+        request: ExcretaTreatmentFacilitySaveRequest,
+    ): Promise<ExcretaTreatmentFacilitySaveResponse>;
+    submitExcretaTreatmentFacilityList(
+        request: ExcretaTreatmentFacilitySubmitRequest,
+    ): Promise<ExcretaTreatmentFacilitySubmitResponse>;
+}
diff --git a/apps/st/src/entities/statistics/model/input/statistics-input-private-sewage-facility-interface.ts b/apps/st/src/entities/statistics/model/input/statistics-input-private-sewage-facility-interface.ts
new file mode 100644
index 000000000..89179711b
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/input/statistics-input-private-sewage-facility-interface.ts
@@ -0,0 +1,453 @@
+import type { ApiResponse, SewerageStatusInfo } from "../statistics-interface";
+
+/** 처리용량별 오수처리시설 현황(ST00080001) — `SewageTreatFactStatusInpColumn.tabKey` */
+export const SEWAGE_TREAT_FACT_STATUS_STATS_CD = "ST00080001" as const;
+
+/** 검증 결과 한 건 */
+export interface PrivateSewageFacilityVerificationResultItem {
+    vrfcCd: string;
+    rsnExpln: string;
+    nowVlCn: string;
+    compVlCn: string;
+}
+
+/** 필드명 → 검증 결과 배열 */
+export type PrivateSewageFacilityVerificationResult = Record<
+    string,
+    PrivateSewageFacilityVerificationResultItem[]
+>;
+
+/** ST00080001 조회 `data.commonInfo` */
+export interface SewageTreatFactStatusCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: PrivateSewageFacilityVerificationResult;
+}
+
+/**
+ * ST00080001 조회 `data.sewageTreatFactStatusList[]` 한 행.
+ * `SewageTreatFactStatusInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 `commonInfo.ctpvNm` 시도명).
+ */
+export interface SewageTreatFactStatusItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    wholDrtwPrcsFcltCnt: number;
+    wholStaaCnt: number;
+    step1StaaPrcsQnt: number;
+    step2StaaPrcsQnt: number;
+    step3StaaPrcsQnt: number;
+    step4StaaPrcsQnt: number;
+    step5StaaPrcsQnt: number;
+    step6StaaPrcsQnt: number;
+    step7StaaPrcsQnt: number;
+    staaExcpWhol: number;
+    step1StaaExcpPrcsQnt: number;
+    step2StaaExcpPrcsQnt: number;
+    step3StaaExcpPrcsQnt: number;
+    step4StaaExcpPrcsQnt: number;
+    step5StaaExcpPrcsQnt: number;
+    step6StaaExcpPrcsQnt: number;
+    step7StaaExcpPrcsQnt: number;
+    rmrk: string | null;
+    verificationResult?: PrivateSewageFacilityVerificationResult;
+}
+
+export interface SewageTreatFactStatusResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SewageTreatFactStatusCommonInfo;
+    sewageTreatFactStatusList: SewageTreatFactStatusItem[];
+}
+
+export type SewageTreatFactStatusApiResponse = ApiResponse<SewageTreatFactStatusResponseData> & {
+    message: string;
+};
+
+/** ST00080001 조회 요청 파라미터 */
+export interface SewageTreatFactStatusRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+}
+
+/** 정화조 현황(ST00080002) — `SepticTankStatusInpColumn.tabKey` */
+export const SEPTIC_TANK_STATUS_STATS_CD = "ST00080002" as const;
+
+/** ST00080002 조회 `data.commonInfo` */
+export interface SepticTankStatusCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: PrivateSewageFacilityVerificationResult;
+}
+
+/**
+ * ST00080002 조회 `data.septicTankStatusList[]` 한 행.
+ * `SepticTankStatusInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 `commonInfo.ctpvNm` 시도명).
+ */
+export interface SepticTankStatusItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    grssFcltCnt: number;
+    staaInsdWhol: number;
+    staaInsdPrcsMthByWhol: number;
+    staaInsdSttkNprsflCnt: number;
+    step1StaaInsdSttkFrcCnt: number;
+    staaInsdSprktpFltrtbCnt: number;
+    staaInsdAertMthdCnt: number;
+    staaInsdCntcAertCnt: number;
+    staaInsdEtcCnt: number;
+    staaInsdPrcsCpctByWhol: number;
+    step1StaaInsdNope: number;
+    step2StaaInsdNope: number;
+    step3StaaInsdNope: number;
+    step4StaaInsdNope: number;
+    step5StaaInsdNope: number;
+    step6StaaInsdNope: number;
+    step7StaaInsdNope: number;
+    step8StaaInsdNope: number;
+    staaExcpWhol: number;
+    staaExcpPrcsMthByWhol: number;
+    staaExcpSttkNprsflCnt: number;
+    step1StaaExcpSttkFrcCnt: number;
+    staaExcpSprktpFltrtbCnt: number;
+    staaExcpAertMthdCnt: number;
+    staaExcpCntcAertCnt: number;
+    staaExcpEtcCnt: number;
+    staaExcpPrcsCpctByWhol: number;
+    step1StaaExcpNope: number;
+    step2StaaExcpNope: number;
+    step3StaaExcpNope: number;
+    step4StaaExcpNope: number;
+    step5StaaExcpNope: number;
+    step6StaaExcpNope: number;
+    step7StaaExcpNope: number;
+    step8StaaExcpNope: number;
+    rmrk: string | null;
+    verificationResult?: PrivateSewageFacilityVerificationResult;
+}
+
+export interface SepticTankStatusResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SepticTankStatusCommonInfo;
+    septicTankStatusList: SepticTankStatusItem[];
+}
+
+export type SepticTankStatusApiResponse = ApiResponse<SepticTankStatusResponseData> & {
+    message: string;
+};
+
+/** ST00080002 조회 요청 파라미터 */
+export interface SepticTankStatusRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+}
+
+/** 개인하수도 관리지역 지정공고 현황(ST00080003) — `PrivateSewageDesigStatusInpColumn` */
+export const PRIVATE_SEWAGE_DESIG_STATUS_STATS_CD = "ST00080003" as const;
+
+/** ST00080003 조회 `data.commonInfo` */
+export interface PrivateSewageDesigStatusCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: PrivateSewageFacilityVerificationResult;
+}
+
+/**
+ * ST00080003 조회 `data.privateSewageDesigStatusList[]` 한 행.
+ * `PrivateSewageDesigStatusInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 `commonInfo.ctpvNm` 시도명).
+ */
+export interface PrivateSewageDesigStatusItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    indvSwagePbancRgnCnt: number;
+    indvSwageDsgnScpLen: number;
+    spctnkGrssFcltCnt: number;
+    spctnkQnt: number;
+    drtwPrcsFcltGrssFcltCnt: number;
+    drtwPrcsFcltQnt: number;
+    rmrk: string | null;
+    verificationResult?: PrivateSewageFacilityVerificationResult;
+}
+
+export interface PrivateSewageDesigStatusResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: PrivateSewageDesigStatusCommonInfo;
+    privateSewageDesigStatusList: PrivateSewageDesigStatusItem[];
+}
+
+export type PrivateSewageDesigStatusApiResponse =
+    ApiResponse<PrivateSewageDesigStatusResponseData> & {
+        message: string;
+    };
+
+/** ST00080003 조회 요청 파라미터 */
+export interface PrivateSewageDesigStatusRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+}
+
+/**
+ * ST00080001 저장·제출 API `saveList` / `submitList` 한 행.
+ * `sggNm`·계산필드(`wholDrtwPrcsFcltCnt`, `wholStaaCnt`, `staaExcpWhol`)·검증결과는 제외.
+ */
+export interface SewageTreatFactStatusSaveItem {
+    admdstCd: string;
+    admdstNm: string;
+    step1StaaPrcsQnt: number;
+    step2StaaPrcsQnt: number;
+    step3StaaPrcsQnt: number;
+    step4StaaPrcsQnt: number;
+    step5StaaPrcsQnt: number;
+    step6StaaPrcsQnt: number;
+    step7StaaPrcsQnt: number;
+    step1StaaExcpPrcsQnt: number;
+    step2StaaExcpPrcsQnt: number;
+    step3StaaExcpPrcsQnt: number;
+    step4StaaExcpPrcsQnt: number;
+    step5StaaExcpPrcsQnt: number;
+    step6StaaExcpPrcsQnt: number;
+    step7StaaExcpPrcsQnt: number;
+    rmrk: string | null;
+}
+
+/** ST00080001 저장 API 요청 */
+export interface SewageTreatFactStatusSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    noApplicable?: boolean;
+    saveList: SewageTreatFactStatusSaveItem[];
+}
+
+export interface SewageTreatFactStatusSaveResponse {
+    status: string;
+    message?: string;
+    data?: string;
+}
+
+/** ST00080001 제출 API 요청 */
+export interface SewageTreatFactStatusSubmitRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    laePicNm: string;
+    laePicTelNo: string;
+    laeKbrdrDeptNm: string;
+    laeKbrdrJbgdNm: string;
+    laeIdfrNm: string;
+    laeIdfrTelNo: string;
+    laeIdfrDeptNm: string;
+    laeIdfrJbgdNm: string;
+    superAdmin?: string;
+    noApplicable?: boolean;
+    submitList: SewageTreatFactStatusSaveItem[];
+}
+
+export interface SewageTreatFactStatusSubmitResponse {
+    status: string;
+    message?: string;
+    data?: {
+        finalStatus: string;
+        nvpassed: boolean;
+    };
+}
+
+/**
+ * ST00080002 저장·제출 API `saveList` / `submitList` 한 행.
+ * `sggNm`·계산필드(`grssFcltCnt`, `staaInsdWhol`, `staaInsdPrcsMthByWhol`, `staaInsdPrcsCpctByWhol`,
+ * `staaExcpWhol`, `staaExcpPrcsMthByWhol`, `staaExcpPrcsCpctByWhol`)·검증결과는 제외.
+ */
+export interface SepticTankStatusSaveItem {
+    admdstCd: string;
+    admdstNm: string;
+    staaInsdSttkNprsflCnt: number;
+    step1StaaInsdSttkFrcCnt: number;
+    staaInsdSprktpFltrtbCnt: number;
+    staaInsdAertMthdCnt: number;
+    staaInsdCntcAertCnt: number;
+    staaInsdEtcCnt: number;
+    step1StaaInsdNope: number;
+    step2StaaInsdNope: number;
+    step3StaaInsdNope: number;
+    step4StaaInsdNope: number;
+    step5StaaInsdNope: number;
+    step6StaaInsdNope: number;
+    step7StaaInsdNope: number;
+    step8StaaInsdNope: number;
+    staaExcpSttkNprsflCnt: number;
+    step1StaaExcpSttkFrcCnt: number;
+    staaExcpSprktpFltrtbCnt: number;
+    staaExcpAertMthdCnt: number;
+    staaExcpCntcAertCnt: number;
+    staaExcpEtcCnt: number;
+    step1StaaExcpNope: number;
+    step2StaaExcpNope: number;
+    step3StaaExcpNope: number;
+    step4StaaExcpNope: number;
+    step5StaaExcpNope: number;
+    step6StaaExcpNope: number;
+    step7StaaExcpNope: number;
+    step8StaaExcpNope: number;
+    rmrk: string | null;
+}
+
+/** ST00080002 저장 API 요청 */
+export interface SepticTankStatusSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    noApplicable?: boolean;
+    saveList: SepticTankStatusSaveItem[];
+}
+
+export interface SepticTankStatusSaveResponse {
+    status: string;
+    message?: string;
+    data?: string;
+}
+
+/** ST00080002 제출 API 요청 */
+export interface SepticTankStatusSubmitRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    laePicNm: string;
+    laePicTelNo: string;
+    laeKbrdrDeptNm: string;
+    laeKbrdrJbgdNm: string;
+    laeIdfrNm: string;
+    laeIdfrTelNo: string;
+    laeIdfrDeptNm: string;
+    laeIdfrJbgdNm: string;
+    superAdmin?: string;
+    noApplicable?: boolean;
+    submitList: SepticTankStatusSaveItem[];
+}
+
+export interface SepticTankStatusSubmitResponse {
+    status: string;
+    message?: string;
+    data?: {
+        finalStatus: string;
+        nvpassed: boolean;
+    };
+}
+
+/**
+ * ST00080003 저장·제출 API `saveList` / `submitList` 한 행.
+ * `sggNm`·검증결과는 제외.
+ */
+export interface PrivateSewageDesigStatusSaveItem {
+    admdstCd: string;
+    admdstNm: string;
+    indvSwagePbancRgnCnt: number;
+    indvSwageDsgnScpLen: number;
+    spctnkGrssFcltCnt: number;
+    spctnkQnt: number;
+    drtwPrcsFcltGrssFcltCnt: number;
+    drtwPrcsFcltQnt: number;
+    rmrk: string | null;
+}
+
+/** ST00080003 저장 API 요청 */
+export interface PrivateSewageDesigStatusSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    noApplicable?: boolean;
+    saveList: PrivateSewageDesigStatusSaveItem[];
+}
+
+export interface PrivateSewageDesigStatusSaveResponse {
+    status: string;
+    message?: string;
+    data?: string;
+}
+
+/** ST00080003 제출 API 요청 */
+export interface PrivateSewageDesigStatusSubmitRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    laePicNm: string;
+    laePicTelNo: string;
+    laeKbrdrDeptNm: string;
+    laeKbrdrJbgdNm: string;
+    laeIdfrNm: string;
+    laeIdfrTelNo: string;
+    laeIdfrDeptNm: string;
+    laeIdfrJbgdNm: string;
+    superAdmin?: string;
+    noApplicable?: boolean;
+    submitList: PrivateSewageDesigStatusSaveItem[];
+}
+
+export interface PrivateSewageDesigStatusSubmitResponse {
+    status: string;
+    message?: string;
+    data?: {
+        finalStatus: string;
+        nvpassed: boolean;
+    };
+}
+
+export interface StatisticsInputPrivateSewageFacilityService {
+    getSewageTreatFactStatusList(
+        params: SewageTreatFactStatusRequestParams,
+    ): Promise<SewageTreatFactStatusApiResponse>;
+    saveSewageTreatFactStatus(
+        request: SewageTreatFactStatusSaveRequest,
+    ): Promise<SewageTreatFactStatusSaveResponse>;
+    submitSewageTreatFactStatus(
+        request: SewageTreatFactStatusSubmitRequest,
+    ): Promise<SewageTreatFactStatusSubmitResponse>;
+    getSepticTankStatusList(
+        params: SepticTankStatusRequestParams,
+    ): Promise<SepticTankStatusApiResponse>;
+    saveSepticTankStatus(
+        request: SepticTankStatusSaveRequest,
+    ): Promise<SepticTankStatusSaveResponse>;
+    submitSepticTankStatus(
+        request: SepticTankStatusSubmitRequest,
+    ): Promise<SepticTankStatusSubmitResponse>;
+    getPrivateSewageDesigStatusList(
+        params: PrivateSewageDesigStatusRequestParams,
+    ): Promise<PrivateSewageDesigStatusApiResponse>;
+    savePrivateSewageDesigStatus(
+        request: PrivateSewageDesigStatusSaveRequest,
+    ): Promise<PrivateSewageDesigStatusSaveResponse>;
+    submitPrivateSewageDesigStatus(
+        request: PrivateSewageDesigStatusSubmitRequest,
+    ): Promise<PrivateSewageDesigStatusSubmitResponse>;
+}
diff --git a/apps/st/src/entities/statistics/model/input/statistics-input-pumping-station-interface.ts b/apps/st/src/entities/statistics/model/input/statistics-input-pumping-station-interface.ts
new file mode 100644
index 000000000..4114fc728
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/input/statistics-input-pumping-station-interface.ts
@@ -0,0 +1,174 @@
+import type { ApiResponse, SewerageStatusInfo } from "../statistics-interface";
+
+/** 펌프장(ST00050001) — `PumpingStationInpColumn` tabKey */
+export const PUMPING_STATION_STATS_CD = "ST00050001" as const;
+
+/** 검증 결과 한 건 */
+export interface PumpingStationVerificationResultItem {
+    vrfcCd: string;
+    rsnExpln: string;
+    nowVlCn: string;
+    compVlCn: string;
+}
+
+/** 필드명 → 검증 결과 배열 */
+export type PumpingStationVerificationResult = Record<
+    string,
+    PumpingStationVerificationResultItem[]
+>;
+
+/** 펌프장 조회 `data.commonInfo` */
+export interface PumpingStationCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: PumpingStationVerificationResult;
+}
+
+/**
+ * 펌프장 조회 `data.pumpingStationList[]` 한 행.
+ * `PumpingStationInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 `commonInfo.ctpvNm` 시도명).
+ */
+export interface PumpingStationItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    fcltSn: string;
+    swtrmtFcltNm: string;
+    fcltNm: string;
+    pumpSeNm: string;
+    fcltPstnCn: string;
+    oprtngStrtYmd: string;
+    planMltvArea: number;
+    sndyArea: number;
+    rainArea: number;
+    exlnQnt: number;
+    drtwPumpGrssPpqty: number;
+    drtwPumpN1DmtrArea: number;
+    drtwPumpN1Ppqty: number;
+    drtwPumpN1Cnt: number;
+    drtwPumpN1RsrvCnt: number;
+    drtwPumpN2DmtrArea: number;
+    drtwPumpN2Ppqty: number;
+    drtwPumpN2Cnt: number;
+    drtwPumpN2RsrvCnt: number;
+    drtwPumpN3DmtrArea: number;
+    drtwPumpN3Ppqty: number;
+    drtwPumpN3Cnt: number;
+    drtwPumpN3RsrvCnt: number;
+    exlnPumpGrssPpqty: number;
+    exlnPumpN1DmtrArea: number;
+    exlnPumpN1Ppqty: number;
+    exlnPumpN1Cnt: number;
+    exlnPumpN1RsrvCnt: number;
+    exlnPumpN2DmtrArea: number;
+    exlnPumpN2Ppqty: number;
+    exlnPumpN2Cnt: number;
+    exlnPumpN2RsrvCnt: number;
+    exlnPumpN3DmtrArea: number;
+    exlnPumpN3Ppqty: number;
+    exlnPumpN3Cnt: number;
+    exlnPumpN3RsrvCnt: number;
+    anlElpwrUseQnt: number;
+    rmrk: string | null;
+    verificationResult?: PumpingStationVerificationResult;
+}
+
+export interface PumpingStationResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: PumpingStationCommonInfo;
+    pumpingStationList: PumpingStationItem[];
+}
+
+export type PumpingStationApiResponse = ApiResponse<PumpingStationResponseData> & {
+    message: string;
+};
+
+/** 펌프장(ST00050001) 조회 요청 파라미터 */
+export interface PumpingStationRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+    fcltNm?: string;
+}
+
+/**
+ * 펌프장(ST00050001) 저장 — `saveList` / `deleteList` 항목.
+ * `sggNm`·계산필드·검증결과는 저장 요청에서 제외.
+ */
+export type PumpingStationSaveItem = Omit<
+    PumpingStationItem,
+    | "sggNm"
+    | "verificationResult"
+    | "exlnQnt"
+    | "drtwPumpGrssPpqty"
+    | "exlnPumpGrssPpqty"
+>;
+
+/** 펌프장(ST00050001) 저장 API 요청 */
+export interface PumpingStationSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    noApplicable?: boolean;
+    saveList: PumpingStationSaveItem[];
+    deleteList: PumpingStationSaveItem[];
+}
+
+export interface PumpingStationSaveResponse {
+    status: string;
+    message?: string;
+    data?: string;
+}
+
+export type PumpingStationSubmitItem = PumpingStationSaveItem;
+
+/** 펌프장(ST00050001) 제출 API 요청 */
+export interface PumpingStationSubmitRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+
+    laePicNm: string;
+    laePicTelNo: string;
+    laeKbrdrDeptNm: string;
+    laeKbrdrJbgdNm: string;
+    laeIdfrNm: string;
+    laeIdfrTelNo: string;
+    laeIdfrDeptNm: string;
+    laeIdfrJbgdNm: string;
+
+    superAdmin?: string;
+    noApplicable?: boolean;
+    submitList: PumpingStationSubmitItem[];
+    deleteList: PumpingStationSubmitItem[];
+}
+
+export interface PumpingStationSubmitResponse {
+    status: string;
+    message?: string;
+    data?: {
+        finalStatus: string;
+        nvpassed: boolean;
+    };
+}
+
+export interface StatisticsInputPumpingStationService {
+    getPumpingStationList(
+        params: PumpingStationRequestParams,
+    ): Promise<PumpingStationApiResponse>;
+    savePumpingStationList(
+        request: PumpingStationSaveRequest,
+    ): Promise<PumpingStationSaveResponse>;
+    submitPumpingStationList(
+        request: PumpingStationSubmitRequest,
+    ): Promise<PumpingStationSubmitResponse>;
+}
diff --git a/apps/st/src/entities/statistics/model/input/statistics-input-sewage-pipe-maintain-interface.ts b/apps/st/src/entities/statistics/model/input/statistics-input-sewage-pipe-maintain-interface.ts
new file mode 100644
index 000000000..36743925e
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/input/statistics-input-sewage-pipe-maintain-interface.ts
@@ -0,0 +1,251 @@
+import type { ApiResponse, SewerageStatusInfo } from "../statistics-interface";
+
+export interface SewagePipeMaintainRepairVerificationResultItem {
+    vrfcCd: string;
+    rsnExpln: string;
+    nowVlCn?: string;
+    compVlCn?: string;
+}
+
+/** 필드명 -> 검증 결과 배열 */
+export type SewagePipeMaintainRepairVerificationResult = Record<
+    string,
+    SewagePipeMaintainRepairVerificationResultItem[]
+>;
+
+export interface SewagePipeMaintainRepairCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: SewagePipeMaintainRepairVerificationResult;
+}
+
+export interface SewagePipeMaintainRepairItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    mendngWhol: number;
+    cbsysMendngPrlg: number;
+    sprsysExlnPrlg: number;
+    sprsysDrtwPrlg: number;
+    partMendngWhol: number;
+    cbsysPartMendngPrlg: number;
+    sprsysExlnMendngPrlg: number;
+    sprsysDrtwMendngPrlg: number;
+    cbsysMnhlCnt: number;
+    sprsysDrtwMnhlCnt: number;
+    sprsysExlnMnhlCnt: number;
+    drtwRcvprpCnt: number;
+    exlnRcvprpCnt: number;
+    stofcbrCnt: number;
+    otflCnt: number;
+    cctvExmnPrlg: number;
+    rmrk: string | null;
+    verificationResult?: SewagePipeMaintainRepairVerificationResult;
+}
+
+export interface SewagePipeMaintainRepairData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SewagePipeMaintainRepairCommonInfo;
+    repairStatusList: SewagePipeMaintainRepairItem[];
+}
+
+export interface SewagePipeMaintainDredgingItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    wholFcltPrlg: number;
+    wholSwagePpl: number;
+    cbsysPplPrlg: number;
+    sprsysExlnPrlg: number;
+    sprsysDrtwPrlg: number;
+    mnhlCnt: number;
+    exlnDrtwRcvprpCnt: number;
+    stofcbrOtflCnt: number;
+    drdgnPlanPrlg: number;
+    drdgnTrgtCtrsDrdgnRt: number;
+    wholPrlgCtrsDrdgnRt: number;
+    drdgnAmt: number;
+    drdgnQnt: number;
+    drdgnUntprcAmt: number;
+    wholDrdgnPrcsQnt: number;
+    rclmQnt: number;
+    oceanEmsnQnt: number;
+    rcycQnt: number;
+    etcQnt: number;
+    rmrk: string | null;
+    verificationResult?: SewagePipeMaintainRepairVerificationResult;
+}
+
+export interface SewagePipeMaintainDredgingData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SewagePipeMaintainRepairCommonInfo;
+    pipeDredgingStatusList: SewagePipeMaintainDredgingItem[];
+}
+
+export interface SewagePipeMaintainRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+}
+
+export type SewagePipeMaintainRepairResponse = ApiResponse<SewagePipeMaintainRepairData>;
+export type SewagePipeMaintainDredgingResponse = ApiResponse<SewagePipeMaintainDredgingData>;
+
+/** ST00030001 하수관로 유지관리 > 개보수 저장·제출 API 행 */
+export interface SewagePipeMaintainRepairSaveItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    mendngWhol: number;
+    cbsysMendngPrlg: number;
+    sprsysExlnPrlg: number;
+    sprsysDrtwPrlg: number;
+    cbsysPartMendngPrlg: number;
+    sprsysExlnMendngPrlg: number;
+    sprsysDrtwMendngPrlg: number;
+    cbsysMnhlCnt: number;
+    sprsysDrtwMnhlCnt: number;
+    sprsysExlnMnhlCnt: number;
+    drtwRcvprpCnt: number;
+    exlnRcvprpCnt: number;
+    stofcbrCnt: number;
+    otflCnt: number;
+    cctvExmnPrlg: number;
+    rmrk: string | null;
+}
+
+/** ST00030001 하수관로 유지관리 > 개보수 저장 API 요청 */
+export interface SewagePipeMaintainRepairSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    saveList: SewagePipeMaintainRepairSaveItem[];
+}
+
+export interface SewagePipeMaintainRepairSaveResponse {
+    data?: string;
+    message?: string;
+    status: string;
+}
+
+/** ST00030001 하수관로 유지관리 > 개보수 제출 API 요청 */
+export interface SewagePipeMaintainRepairSubmitRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    laePicNm: string;
+    laePicTelNo: string;
+    laeKbrdrDeptNm: string;
+    laeKbrdrJbgdNm: string;
+    laeIdfrNm: string;
+    laeIdfrTelNo: string;
+    laeIdfrDeptNm: string;
+    laeIdfrJbgdNm: string;
+    submitList: SewagePipeMaintainRepairSaveItem[];
+}
+
+export interface SewagePipeMaintainRepairSubmitResponse {
+    data: {
+        finalStatus: string;
+        nvpassed: boolean;
+    };
+    message?: string;
+    status: string;
+}
+
+/** ST00030002 하수관로 유지관리 > 관로준설 저장·제출 API 행 */
+export interface SewagePipeMaintainDredgingSaveItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    wholFcltPrlg: number;
+    wholSwagePpl: number;
+    cbsysPplPrlg: number;
+    sprsysExlnPrlg: number;
+    sprsysDrtwPrlg: number;
+    mnhlCnt: number;
+    exlnDrtwRcvprpCnt: number;
+    stofcbrOtflCnt: number;
+    drdgnPlanPrlg: number;
+    drdgnTrgtCtrsDrdgnRt: number;
+    wholPrlgCtrsDrdgnRt: number;
+    drdgnAmt: number;
+    drdgnQnt: number;
+    drdgnUntprcAmt: number;
+    wholDrdgnPrcsQnt: number;
+    rclmQnt: number;
+    oceanEmsnQnt: number;
+    rcycQnt: number;
+    etcQnt: number;
+    rmrk: string | null;
+}
+
+/** ST00030002 하수관로 유지관리 > 관로준설 저장 API 요청 */
+export interface SewagePipeMaintainDredgingSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    saveList: SewagePipeMaintainDredgingSaveItem[];
+}
+
+export interface SewagePipeMaintainDredgingSaveResponse {
+    data?: string;
+    message?: string;
+    status: string;
+}
+
+/** ST00030002 하수관로 유지관리 > 관로준설 제출 API 요청 */
+export interface SewagePipeMaintainDredgingSubmitRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    laePicNm: string;
+    laePicTelNo: string;
+    laeKbrdrDeptNm: string;
+    laeKbrdrJbgdNm: string;
+    laeIdfrNm: string;
+    laeIdfrTelNo: string;
+    laeIdfrDeptNm: string;
+    laeIdfrJbgdNm: string;
+    submitList: SewagePipeMaintainDredgingSaveItem[];
+}
+
+export interface SewagePipeMaintainDredgingSubmitResponse {
+    data: {
+        finalStatus: string;
+        nvpassed: boolean;
+    };
+    message?: string;
+    status: string;
+}
+
+export interface SewagePipeMaintainService {
+    getSewagePipeMaintainRepair(param: SewagePipeMaintainRequestParams): Promise<SewagePipeMaintainRepairResponse>;
+    getSewagePipeMaintainDredging(param: SewagePipeMaintainRequestParams): Promise<SewagePipeMaintainDredgingResponse>;
+    saveSewagePipeMaintainRepair(
+        param: SewagePipeMaintainRepairSaveRequest,
+    ): Promise<SewagePipeMaintainRepairSaveResponse>;
+    submitSewagePipeMaintainRepair(
+        param: SewagePipeMaintainRepairSubmitRequest,
+    ): Promise<SewagePipeMaintainRepairSubmitResponse>;
+    saveSewagePipeMaintainDredging(
+        param: SewagePipeMaintainDredgingSaveRequest,
+    ): Promise<SewagePipeMaintainDredgingSaveResponse>;
+    submitSewagePipeMaintainDredging(
+        param: SewagePipeMaintainDredgingSubmitRequest,
+    ): Promise<SewagePipeMaintainDredgingSubmitResponse>;
+}
diff --git a/apps/st/src/entities/statistics/model/input/statistics-input-sewage-reservoir-pump-interface.ts b/apps/st/src/entities/statistics/model/input/statistics-input-sewage-reservoir-pump-interface.ts
new file mode 100644
index 000000000..9109f76e2
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/input/statistics-input-sewage-reservoir-pump-interface.ts
@@ -0,0 +1,294 @@
+import type { ApiResponse, SewerageStatusInfo } from "../statistics-interface";
+
+/** 하수저류시설 Tab1 — `SewageReservoirInpColumn.tabKey` */
+export const SEWAGE_RESERVOIR_STATS_CD = "ST00040001" as const;
+
+/** 검증 결과 한 건 */
+export interface SewageReservoirVerificationResultItem {
+    vrfcCd: string;
+    rsnExpln: string;
+    nowVlCn: string;
+    compVlCn: string;
+}
+
+/** 필드명 → 검증 결과 배열 */
+export type SewageReservoirVerificationResult = Record<
+    string,
+    SewageReservoirVerificationResultItem[]
+>;
+
+/** 하수저류시설 조회 `data.commonInfo` */
+export interface SewageReservoirCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: SewageReservoirVerificationResult;
+}
+
+/**
+ * 하수저류시설 조회 `data.sewageReservoirList[]` 한 행.
+ * `SewageReservoirInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 `commonInfo.ctpvNm` 시도명).
+ */
+export interface SewageReservoirItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    fcltSn: string;
+    fcltNm: string;
+    fcltPstnCn: string;
+    oprtngStrtYmd: string;
+    planDesignFreqCnt: number;
+    fldngPrvtnYn: string;
+    wqPlltnMtgtYn: string;
+    rtlztnUsgYn: string;
+    fcltStrctCn: string | null;
+    wtrStrgZoneArea: number;
+    impdFcltCpct: number;
+    grssPpqty: number;
+    pumpFcltN1DmtrExpln: string;
+    pumpFcltN1PerPpqty: number;
+    pumpFcltN1PumpCnt: number;
+    pumpFcltN1RsrvPumpCnt: number;
+    pumpFcltN2DmtrExpln: string;
+    pumpFcltN2PerPpqty: number;
+    pumpFcltN2PumpCnt: number;
+    pumpFcltN2RsrvPumpCnt: number;
+    pumpFcltN3DmtrExpln: string;
+    pumpFcltN3PerPpqty: number;
+    pumpFcltN3PumpCnt: number;
+    pumpFcltN3RsrvPumpCnt: number;
+    prcsgFcltYn: string;
+    ddrztnEqpmYn: string;
+    oslfEtgtYn: string;
+    mltvMthCn: string | null;
+    impdMthCn: string | null;
+    impdPrcsMthdCn: string | null;
+    dschgWtrsExpln: string;
+    prcptnLastDspsQnt: number;
+    ctmnLastDspsQnt: number;
+    prcptnLastDspsMthdExpln: string;
+    ctmnLastDspsMthdExpln: string;
+    oprtngDayCnt: number;
+    grssMltvQnt: number;
+    rmrk: string | null;
+    verificationResult?: SewageReservoirVerificationResult;
+}
+
+export interface SewageReservoirResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SewageReservoirCommonInfo;
+    sewageReservoirList: SewageReservoirItem[];
+}
+
+export type SewageReservoirApiResponse = ApiResponse<SewageReservoirResponseData> & {
+    message: string;
+};
+
+/** 빗물펌프장 Tab2 `data.commonInfo` */
+export interface RainfallPumpStationCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: SewageReservoirVerificationResult;
+}
+
+/**
+ * 빗물펌프장 조회 `data.rainfallPumpStationList[]` 한 행.
+ * `RainfallPumpStationInpColumn` fieldName과 동일 (ctpvNm은 commonInfo에서 그리드에 합침).
+ */
+export interface RainfallPumpStationItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    fcltSn: string;
+    fcltNm: string;
+    fcltPstnCn: string;
+    fcltyKndCn: string;
+    oprtngStrtYmd: string;
+    planDesignFreqCnt: number;
+    wtrStrgZoneArea: number;
+    rsvrYn: string;
+    rsvrImpndQnt: number;
+    abstnRgnImpdQnt: number;
+    grssPpqty: number;
+
+    pumpFcltN1DmtrExpln: string;
+    pumpFcltN1PerPpqty: number;
+    pumpFcltN1PumpCnt: number;
+    pumpFcltN1RsrvPumpCnt: number;
+
+    pumpFcltN2DmtrExpln: string;
+    pumpFcltN2PerPpqty: number;
+    pumpFcltN2PumpCnt: number;
+    pumpFcltN2RsrvPumpCnt: number;
+
+    pumpFcltN3DmtrExpln: string;
+    pumpFcltN3PerPpqty: number;
+    pumpFcltN3PumpCnt: number;
+    pumpFcltN3RsrvPumpCnt: number;
+
+    prcsgFcltYn: string;
+    ddrztnEqpmYn: string;
+    oslfEtgtYn: string;
+    dschgWtrsExpln: string;
+
+    prcptnLastDspsQnt: number;
+    ctmnLastDspsQnt: number;
+    prcptnLastDspsMthdExpln: string;
+    ctmnLastDspsMthdExpln: string;
+
+    oprtngDayCnt: number;
+    grssMltvQnt: number;
+
+    rmrk: string | null;
+    verificationResult?: SewageReservoirVerificationResult;
+}
+
+export interface RainfallPumpStationResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: RainfallPumpStationCommonInfo;
+    rainfallPumpStationList: RainfallPumpStationItem[];
+}
+
+export type RainfallPumpStationApiResponse = ApiResponse<RainfallPumpStationResponseData> & {
+    message: string;
+};
+
+/** 하수저류시설(ST00040001) 조회 요청 파라미터 */
+export interface SewageReservoirRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+    fcltNm?: string;
+}
+
+/**
+ * 하수저류시설(ST00040001) 저장 — `saveList` / `deleteList` 항목.
+ * `sggNm`·검증결과는 저장 요청에서 제외.
+ */
+export type SewageReservoirSaveItem = Omit<
+    SewageReservoirItem,
+    "sggNm" | "verificationResult"
+>;
+
+/** 하수저류시설(ST00040001) 저장 API 요청 */
+export interface SewageReservoirSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    noApplicable?: boolean;
+    saveList: SewageReservoirSaveItem[];
+    deleteList: SewageReservoirSaveItem[];
+}
+
+export interface SewageReservoirSaveResponse {
+    status: string;
+    message?: string;
+    data?: string;
+}
+
+/** 하수저류시설(ST00040001) 제출 API 요청 */
+export interface SewageReservoirSubmitRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    laePicNm: string;
+    laePicTelNo: string;
+    laeKbrdrDeptNm: string;
+    laeKbrdrJbgdNm: string;
+    laeIdfrNm: string;
+    laeIdfrTelNo: string;
+    laeIdfrDeptNm: string;
+    laeIdfrJbgdNm: string;
+    noApplicable?: boolean;
+    submitList: SewageReservoirSaveItem[];
+    deleteList: SewageReservoirSaveItem[];
+}
+
+export interface SewageReservoirSubmitResponse {
+    status: string;
+    message?: string;
+    data?: {
+        finalStatus: string;
+        nvpassed: boolean;
+    };
+}
+
+/**
+ * 빗물펌프장(ST00040002) 저장 — `saveList` / `deleteList` 항목.
+ * `sggNm`·검증결과는 저장 요청에서 제외.
+ */
+export type RainfallPumpStationSaveItem = Omit<
+    RainfallPumpStationItem,
+    "sggNm" | "verificationResult"
+>;
+
+/**
+ * 빗물펌프장(ST00040002) 저장 API 요청
+ * (요청 shape은 예시 JSON과 동일)
+ */
+export interface RainfallPumpStationSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    noApplicable?: boolean;
+    saveList: RainfallPumpStationSaveItem[];
+    deleteList: RainfallPumpStationSaveItem[];
+}
+
+/** 빗물펌프장(ST00040002) 저장 응답 */
+export type RainfallPumpStationSaveResponse = SewageReservoirSaveResponse;
+
+/** 빗물펌프장(ST00040002) 제출 API 요청 */
+export interface RainfallPumpStationSubmitRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    laePicNm: string;
+    laePicTelNo: string;
+    laeKbrdrDeptNm: string;
+    laeKbrdrJbgdNm: string;
+    laeIdfrNm: string;
+    laeIdfrTelNo: string;
+    laeIdfrDeptNm: string;
+    laeIdfrJbgdNm: string;
+    noApplicable?: boolean;
+    submitList: RainfallPumpStationSaveItem[];
+    deleteList: RainfallPumpStationSaveItem[];
+}
+
+/** 빗물펌프장(ST00040002) 제출 응답 */
+export type RainfallPumpStationSubmitResponse = SewageReservoirSubmitResponse;
+
+export interface StatisticsInputSewageReservoirPumpService {
+    getSewageReservoirList(params: SewageReservoirRequestParams): Promise<SewageReservoirApiResponse>;
+    getRainfallPumpStationList(
+        params: SewageReservoirRequestParams,
+    ): Promise<RainfallPumpStationApiResponse>;
+    saveSewageReservoir(request: SewageReservoirSaveRequest): Promise<SewageReservoirSaveResponse>;
+    submitSewageReservoir(
+        request: SewageReservoirSubmitRequest,
+    ): Promise<SewageReservoirSubmitResponse>;
+    /** 빗물펌프장 저장 — ST00040002 */
+    saveRainfallPumpStation(
+        request: RainfallPumpStationSaveRequest,
+    ): Promise<RainfallPumpStationSaveResponse>;
+    /** 빗물펌프장 제출 — ST00040002 */
+    submitRainfallPumpStation(
+        request: RainfallPumpStationSubmitRequest,
+    ): Promise<RainfallPumpStationSubmitResponse>;
+}
diff --git a/apps/st/src/entities/statistics/model/input/statistics-input-sewerage-finance-interface.ts b/apps/st/src/entities/statistics/model/input/statistics-input-sewerage-finance-interface.ts
new file mode 100644
index 000000000..e56a52858
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/input/statistics-input-sewerage-finance-interface.ts
@@ -0,0 +1,466 @@
+import type { ApiResponse, SewerageStatusInfo } from "../statistics-interface";
+
+/** 하수도재정 결산(ST00090001) — `SewerageFinanceSettleInpColumn.tabKey` */
+export const SEWERAGE_FINANCE_SETTLE_STATS_CD = "ST00090001" as const;
+
+/** 검증 결과 한 건 */
+export interface SewerageFinanceVerificationResultItem {
+    vrfcCd: string;
+    rsnExpln: string;
+    nowVlCn: string;
+    compVlCn: string;
+}
+
+/** 필드명 → 검증 결과 배열 */
+export type SewerageFinanceVerificationResult = Record<
+    string,
+    SewerageFinanceVerificationResultItem[]
+>;
+
+/** ST00090001 조회 `data.commonInfo` */
+export interface SewerageFinanceSettleCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: SewerageFinanceVerificationResult;
+}
+
+/**
+ * ST00090001 조회 `data.sewerageFinanceSettleList[]` 한 행.
+ * `SewerageFinanceSettleInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 `commonInfo.ctpvNm` 시도명).
+ */
+export interface SewerageFinanceSettleItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    fnnByWholPjtcoAmt: number;
+    cnterGovSprtAmt: number;
+    mctpvLcexpAmt: number;
+    wareaSggLclAmt: number;
+    sewerUseAmt: number;
+    orgprBrdnAmt: number;
+    etcIncmAmt: number;
+    crfwAmt: number;
+    lbltAmt: number;
+    usgByWholPjtcoAmt: number;
+    tmplntWholAmt: number;
+    tmplntFcltAmt: number;
+    tmplntMendngAmt: number;
+    tmplntOperKeepAmt: number;
+    tmplntEtcAmt: number;
+    wholSwagePplAmt: number;
+    swagePplFcltAmt: number;
+    swagePplMendngAmt: number;
+    swagePplOperKeepAmt: number;
+    swagePplEtcAmt: number;
+    wholSwageImpdFcltAmt: number;
+    swageImpdFcltAmt: number;
+    swageImpdMendngAmt: number;
+    swageImpdOperKeepAmt: number;
+    swageImpdFcltEtcAmt: number;
+    etcWholAmt: number;
+    etcAcdntCrfwAmt: number;
+    etcNrcpAmt: number;
+    etcAmt: number;
+    rmrk: string | null;
+    verificationResult?: SewerageFinanceVerificationResult;
+}
+
+export interface SewerageFinanceSettleResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SewerageFinanceSettleCommonInfo;
+    sewerageFinanceSettleList: SewerageFinanceSettleItem[];
+}
+
+export type SewerageFinanceSettleApiResponse = ApiResponse<SewerageFinanceSettleResponseData> & {
+    message: string;
+};
+
+/** ST00090001 조회 요청 파라미터 */
+export interface SewerageFinanceSettleRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+}
+
+/**
+ * ST00090001 저장 API `saveList[]` 한 행.
+ * `SewerageFinanceSettleInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 요청 `ctpvNm` 시도명).
+ */
+export interface SewerageFinanceSettleSaveItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    cnterGovSprtAmt: number;
+    mctpvLcexpAmt: number;
+    wareaSggLclAmt: number;
+    sewerUseAmt: number;
+    orgprBrdnAmt: number;
+    etcIncmAmt: number;
+    crfwAmt: number;
+    lbltAmt: number;
+    tmplntFcltAmt: number;
+    tmplntMendngAmt: number;
+    tmplntOperKeepAmt: number;
+    tmplntEtcAmt: number;
+    swagePplFcltAmt: number;
+    swagePplMendngAmt: number;
+    swagePplOperKeepAmt: number;
+    swagePplEtcAmt: number;
+    swageImpdFcltAmt: number;
+    swageImpdMendngAmt: number;
+    swageImpdOperKeepAmt: number;
+    swageImpdFcltEtcAmt: number;
+    etcAcdntCrfwAmt: number;
+    etcNrcpAmt: number;
+    etcAmt: number;
+    rmrk: string | null;
+    fnnByWholPjtcoAmt: number;
+    usgByWholPjtcoAmt: number;
+    tmplntWholAmt: number;
+    wholSwagePplAmt: number;
+    wholSwageImpdFcltAmt: number;
+    etcWholAmt: number;
+}
+
+/** ST00090001 저장 API 요청 */
+export interface SewerageFinanceSettleSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    saveList: SewerageFinanceSettleSaveItem[];
+}
+
+export interface SewerageFinanceSettleSaveResponse {
+    status: string;
+    message?: string;
+    data?: string;
+}
+
+/** 하수도 요금(ST00090002) — `SewerageChargeInpColumn.tabKey` */
+export const SEWERAGE_CHARGE_STATS_CD = "ST00090002" as const;
+
+/** ST00090002 조회 `data.commonInfo` */
+export interface SewerageChargeCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: SewerageFinanceVerificationResult;
+}
+
+/**
+ * ST00090002 조회 `data.sewerageChargeList[]` 한 행.
+ * `SewerageChargeInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 `commonInfo.ctpvNm` 시도명).
+ */
+export interface SewerageChargeItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    anlLevyQnt: number;
+    levyAmt: number;
+    avgUntprcAmt: number;
+    grssPrmcoAmt: number;
+    grssUnitPrmcoAmt: number;
+    rlztnRt: number;
+    rmrk: string | null;
+    verificationResult?: SewerageFinanceVerificationResult;
+}
+
+export interface SewerageChargeResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SewerageChargeCommonInfo;
+    sewerageChargeList: SewerageChargeItem[];
+}
+
+export type SewerageChargeApiResponse = ApiResponse<SewerageChargeResponseData> & {
+    message: string;
+};
+
+/** ST00090002 조회 요청 파라미터 */
+export interface SewerageChargeRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+}
+
+/**
+ * ST00090002 저장 API `saveList[]` 한 행.
+ * `SewerageChargeInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 요청 `ctpvNm` 시도명).
+ */
+export interface SewerageChargeSaveItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    anlLevyQnt: number;
+    levyAmt: number;
+    grssPrmcoAmt: number;
+    rmrk: string | null;
+    avgUntprcAmt: number;
+    grssUnitPrmcoAmt: number;
+    rlztnRt: number;
+}
+
+/** ST00090002 저장 API 요청 */
+export interface SewerageChargeSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    saveList: SewerageChargeSaveItem[];
+}
+
+export interface SewerageChargeSaveResponse {
+    status: string;
+    message?: string;
+    data?: string;
+}
+
+/** 하수도 사용료(ST00090003) — `SewerageUsageFeeInpColumn.tabKey` */
+export const SEWERAGE_USAGE_FEE_STATS_CD = "ST00090003" as const;
+
+/** ST00090003 조회 `data.commonInfo` */
+export interface SewerageUsageFeeCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: SewerageFinanceVerificationResult;
+}
+
+/**
+ * ST00090003 조회 `data.sewerageUsageFeeList[]` 한 행.
+ * `SewerageUsageFeeInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 `commonInfo.ctpvNm` 시도명).
+ */
+export interface SewerageUsageFeeItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    levyAmt: number;
+    levyQnt: number;
+    hshusLevyAmt: number;
+    hshusLevyQnt: number;
+    hshusUntprcAmt: number;
+    taskFrLevyAmt: number;
+    taskFrLevyQnt: number;
+    taskFrUntprcAmt: number;
+    fbuLevyAmt: number;
+    fbuLevyQnt: number;
+    fbuUntprcAmt: number;
+    bthhsFrSpcs1LevyAmt: number;
+    bthhsFrSpcs1LevyQnt: number;
+    bthhsFrSpcs1UntprcAmt: number;
+    bthhsFrSpcs2LevyAmt: number;
+    bthhsFrSpcs2LevyQnt: number;
+    bthhsFrSpcs2UntprcAmt: number;
+    induLevyAmt: number;
+    induLevyQnt: number;
+    induUntprcAmt: number;
+    etcLevyAmt: number;
+    etcLevyQnt: number;
+    etcLevyUntprcAmt: number;
+    rmrk: string | null;
+    verificationResult?: SewerageFinanceVerificationResult;
+}
+
+export interface SewerageUsageFeeResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SewerageUsageFeeCommonInfo;
+    sewerageUsageFeeList: SewerageUsageFeeItem[];
+}
+
+export type SewerageUsageFeeApiResponse = ApiResponse<SewerageUsageFeeResponseData> & {
+    message: string;
+};
+
+/** ST00090003 조회 요청 파라미터 */
+export interface SewerageUsageFeeRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+}
+
+/**
+ * ST00090003 저장 API `saveList[]` 한 행.
+ * `SewerageUsageFeeInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 요청 `ctpvNm` 시도명).
+ */
+export interface SewerageUsageFeeSaveItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    hshusLevyAmt: number;
+    hshusLevyQnt: number;
+    hshusUntprcAmt: number;
+    taskFrLevyAmt: number;
+    taskFrLevyQnt: number;
+    taskFrUntprcAmt: number;
+    fbuLevyAmt: number;
+    fbuLevyQnt: number;
+    fbuUntprcAmt: number;
+    bthhsFrSpcs1LevyAmt: number;
+    bthhsFrSpcs1LevyQnt: number;
+    bthhsFrSpcs1UntprcAmt: number;
+    bthhsFrSpcs2LevyAmt: number;
+    bthhsFrSpcs2LevyQnt: number;
+    bthhsFrSpcs2UntprcAmt: number;
+    induLevyAmt: number;
+    induLevyQnt: number;
+    induUntprcAmt: number;
+    etcLevyAmt: number;
+    etcLevyQnt: number;
+    etcLevyUntprcAmt: number;
+    rmrk: string | null;
+    levyAmt: number;
+    levyQnt: number;
+}
+
+/** ST00090003 저장 API 요청 */
+export interface SewerageUsageFeeSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    saveList: SewerageUsageFeeSaveItem[];
+}
+
+export interface SewerageUsageFeeSaveResponse {
+    status: string;
+    message?: string;
+    data?: string;
+}
+
+/** 원인자 부담금(ST00090004) — `CauserBurdenInpColumn.tabKey` */
+export const CAUSER_BURDEN_STATS_CD = "ST00090004" as const;
+
+/** ST00090004 조회 `data.commonInfo` */
+export interface CauserBurdenCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: SewerageFinanceVerificationResult;
+}
+
+/**
+ * ST00090004 조회 `data.causerBurdenList[]` 한 행.
+ * `CauserBurdenInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 `commonInfo.ctpvNm` 시도명).
+ */
+export interface CauserBurdenItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    levyEvntcsCnt: number;
+    levyAmt: number;
+    trgtByWholClctnEvntcsCnt: number;
+    trgtByWholClctnAmt: number;
+    mltvEqpmEvntcsCnt: number;
+    mltvEqpmAmt: number;
+    othrCstrnOthrActrCnt: number;
+    othrCstrnOthrActrAmt: number;
+    rmrk: string | null;
+    verificationResult?: SewerageFinanceVerificationResult;
+}
+
+export interface CauserBurdenResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: CauserBurdenCommonInfo;
+    causerBurdenList: CauserBurdenItem[];
+}
+
+export type CauserBurdenApiResponse = ApiResponse<CauserBurdenResponseData> & {
+    message: string;
+};
+
+/** ST00090004 조회 요청 파라미터 */
+export interface CauserBurdenRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+}
+
+/**
+ * ST00090004 저장 API `saveList[]` 한 행.
+ * `CauserBurdenInpColumn` fieldName과 동일 (`ctpvNm` 그리드 값은 요청 `ctpvNm` 시도명).
+ */
+export interface CauserBurdenSaveItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    levyEvntcsCnt: number;
+    levyAmt: number;
+    mltvEqpmEvntcsCnt: number;
+    mltvEqpmAmt: number;
+    othrCstrnOthrActrCnt: number;
+    othrCstrnOthrActrAmt: number;
+    rmrk: string | null;
+    trgtByWholClctnAmt: number;
+}
+
+/** ST00090004 저장 API 요청 */
+export interface CauserBurdenSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    saveList: CauserBurdenSaveItem[];
+}
+
+export interface CauserBurdenSaveResponse {
+    status: string;
+    message?: string;
+    data?: string;
+}
+
+/** 하수도재정 조회 공통 요청 파라미터 */
+export interface SewerageFinanceRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+}
+
+export interface StatisticsInputSewerageFinanceService {
+    getSewerageFinanceSettleList(
+        params: SewerageFinanceSettleRequestParams,
+    ): Promise<SewerageFinanceSettleApiResponse>;
+    saveSewerageFinanceSettle(
+        request: SewerageFinanceSettleSaveRequest,
+    ): Promise<SewerageFinanceSettleSaveResponse>;
+    getSewerageChargeList(
+        params: SewerageChargeRequestParams,
+    ): Promise<SewerageChargeApiResponse>;
+    saveSewerageCharge(
+        request: SewerageChargeSaveRequest,
+    ): Promise<SewerageChargeSaveResponse>;
+    getSewerageUsageFeeList(
+        params: SewerageUsageFeeRequestParams,
+    ): Promise<SewerageUsageFeeApiResponse>;
+    saveSewerageUsageFee(
+        request: SewerageUsageFeeSaveRequest,
+    ): Promise<SewerageUsageFeeSaveResponse>;
+    getCauserBurdenList(
+        params: CauserBurdenRequestParams,
+    ): Promise<CauserBurdenApiResponse>;
+    saveCauserBurden(
+        request: CauserBurdenSaveRequest,
+    ): Promise<CauserBurdenSaveResponse>;
+}
diff --git a/apps/st/src/entities/statistics/model/input/statistics-input-status-interface.ts b/apps/st/src/entities/statistics/model/input/statistics-input-status-interface.ts
new file mode 100644
index 000000000..93102dc27
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/input/statistics-input-status-interface.ts
@@ -0,0 +1,40 @@
+import type { ApiResponse } from "../statistics-interface";
+
+export interface StatsInputStatusListRequestParams {
+    ctpvNm?: string | null;
+    sggNm?: string | null;
+    sewerBzmnCd?: string | null;
+    statsYr: string;
+    statsCd?: string | null;
+    laeSbmsnSttsCd?: string | null;
+}
+
+export interface StatsInputStatusList {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsCd?: string;
+    sewerBzmnCd?: string;
+    menuTabName?: string;
+    laeSbmsnSttsNm?: string;
+    laeSbmsnSttsCd?: string;
+    laePicNm?: string;
+    laePicTelNo?: string;
+    laeKbrdrDeptNm?: string;
+    laeKbrdrJbgdNm?: string;
+    laeIdfrNm?: string;
+    laeIdfrDeptNm?: string;
+    laeIdfrJbgdNm?: string;
+    rjctOpnnCn?: string;
+}
+
+export type StatsInputStatusListApiResponse = ApiResponse<
+    StatsInputStatusList[]
+> & {
+    message: string;
+};
+
+export interface StatisticsInputStatusService {
+    getStatisticsInputStatusList(
+        param: StatsInputStatusListRequestParams,
+    ): Promise<StatsInputStatusListApiResponse>;
+}
diff --git a/apps/st/src/entities/statistics/model/input/statistics-public-sewage-facility-input-interface.ts b/apps/st/src/entities/statistics/model/input/statistics-public-sewage-facility-input-interface.ts
new file mode 100644
index 000000000..093ea859b
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/input/statistics-public-sewage-facility-input-interface.ts
@@ -0,0 +1,291 @@
+import type { SewerageStatusInfo } from "../statistics-interface";
+
+export interface PublicSewageFacilityRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    fcltNm?: string;
+    statsYr?: string;
+    mode?: string;
+}
+
+export interface PublicSewageFacilityVerifyResultItem {
+    vrfcCd: string;
+    rsnExpln: string;
+    nowVlCn?: string;
+    compVlCn?: string;
+}
+
+/** 필드명 -> 검증 결과 배열 */
+export type PublicSewageFacilityVerificationResult = Record<
+    string,
+    PublicSewageFacilityVerifyResultItem[]
+>;
+
+export interface PublicSewageFacilityCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: PublicSewageFacilityVerificationResult | null;
+}
+
+export interface PublicSewageFacilityItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    fcltSn: number;
+    swtrmtFcltCd: string;
+    swtrmtFcltNm: string;
+    fcltPstnCn: string | null;
+    prcsFcltCpct: number;
+    prcsFcltPhysCpct: number;
+    prcsFcltBoilCpct: number;
+    prcsFcltAltdCpct: number;
+    inflwSwageQnt: number;
+    inflwSwagePhysQnt: number;
+    inflwSwageBoilQnt: number;
+    inflwSwageAltdQnt: number;
+    prcsQnt: number;
+    prcsPhysCpct: number;
+    prcsBoilCpct: number;
+    prcsAltdCpct: number;
+    inflwBodVl: number;
+    dschgBodVl: number;
+    inflwTocQnt: number;
+    dschgTocQnt: number;
+    inflwSsQnt: number;
+    dschgSsQnt: number;
+    inflwTnVl: number;
+    dschgTnVl: number;
+    inflwTpVl: number;
+    dschgTpVl: number;
+    inflwGrssClfgVl: number;
+    dschgGrssClfgVl: number;
+    prcsRt: number;
+    prcsLodQnt: number;
+    prcsMthdExpln: string | null;
+    wholHmnQnt: number;
+    wholLvstQnt: number;
+    wholEfntQnt: number;
+    wholEtcQnt: number;
+    telNo: string | null;
+    cmptnStrtYmd: string | null;
+    oprtngStrtYmd: string | null;
+    wholBizVl: number;
+    eflntDsnfMthdExpln: string | null;
+    wtsysNm: string | null;
+    trbtrNm: string | null;
+    dtlUnitZoneCn: string | null;
+    rgnSeNm: string | null;
+    msirbCn: string | null;
+    goalWqNo: string | null;
+    engySrlneRt: number;
+    engyItslfPrdctnQnt: number;
+    anlEngyWholUseQnt: number;
+    anlElpwrUseQnt: number;
+    itslfEngyUseQnt: number;
+    swtrmtEmsnQnt: number;
+    operMnbdCn: string | null;
+    prxyBzentyNmCn: string | null;
+    cnsgnCstVl: number;
+    prxyCtrtCn: string | null;
+    intgPrcsFcltCn: string | null;
+    wholNope: number;
+    sftyAcdntEvntcsCnt: number;
+    rmrk: string | null;
+    verificationResult?: PublicSewageFacilityVerificationResult | null;
+}
+
+export interface PublicSewageFacilityResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: PublicSewageFacilityCommonInfo;
+    publicSewageFacilityList: PublicSewageFacilityItem[];
+}
+
+export interface PublicSewageFacilityResponse {
+    status: string;
+    message?: string;
+    data: PublicSewageFacilityResponseData;
+}
+
+/** ST00060002 지자체별 전체시설 목록 항목 */
+export interface PublicSewageMainFacilityItem {
+    admdstCd: string;
+    sggNm: string | null;
+    admdstNm: string;
+    isMainYn: string;
+    fcltSn: string;
+    swtrmtFcltCd: string;
+    swtrmtFcltNm: string;
+    fcltPstnCn: string | null;
+    prxyBzentyNmCn: string | null;
+    cnsgnCstVl: number;
+    prxyCtrtCn: string | null;
+    wholNope: number;
+}
+
+/** ST00060002 조회 응답 data */
+export interface PublicSewageMainFacilityResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: PublicSewageFacilityCommonInfo;
+    mainFacilityList: PublicSewageMainFacilityItem[];
+}
+
+/** ST00060002 조회 API 응답 */
+export interface PublicSewageMainFacilityResponse {
+    status: string;
+    message?: string;
+    data: PublicSewageMainFacilityResponseData;
+}
+
+/** ST00060002 메인시설 클릭 시 우측 매핑대상 조회 요청 */
+export interface PublicSewageMappingTargetsRequestParams {
+    sewerBzmnCd: string;
+    ctpvNm: string;
+    sggNm: string;
+    statsYr: string;
+    fcltSn: string;
+}
+
+/** ST00060002 메인시설 클릭 시 우측 매핑대상 조회 항목 */
+export interface PublicSewageMappingTargetItem {
+    fcltSn: string;
+    admdstCd?: string;
+    admdstNm: string;
+    swtrmtFcltCd: string;
+    swtrmtFcltNm: string;
+    fcltPstnCn: string;
+    mappedYn: string;
+    mainFcltSn: string;
+    isMainYn: string;
+}
+
+/** ST00060002 메인시설 클릭 시 우측 매핑대상 조회 응답 */
+export interface PublicSewageMappingTargetsResponse {
+    status: string;
+    message?: string;
+    data: PublicSewageMappingTargetItem[];
+}
+
+/** ST00060002 중심처리시설 매핑 저장 — saveList 항목 */
+export interface PublicSewageMainFacilityMappingSaveItem {
+    fcltSn: string;
+    admdstCd: string;
+    admdstNm: string;
+    swtrmtFcltCd: string;
+    swtrmtFcltNm: string;
+    isMainYn: string;
+}
+
+/** ST00060002 중심처리시설 매핑 저장 API 요청 */
+export interface PublicSewageMainFacilityMappingSaveRequest {
+    statsYr: string;
+    sewerBzmnCd: string;
+    /** 좌측에서 선택한 중심 처리 시설의 행정구역 */
+    admdstCd: string;
+    admdstNm: string;
+    mainFcltSn: string;
+    mainFcltNm: string;
+    /** 매핑 추가(saveList 있음) 시 입력. 매핑 삭제만 할 때는 요청에서 생략 가능 */
+    prxyBzentyNmCn?: string;
+    cnsgnCstVl?: number;
+    wholNope?: number;
+    prxyCtrtCn?: string;
+    userId: string;
+    saveList: PublicSewageMainFacilityMappingSaveItem[];
+    deleteList: string[];
+}
+
+export interface PublicSewageMainFacilityMappingSaveResponse {
+    status: string;
+    message?: string;
+    data?: string;
+}
+
+/** ST00060001 공공하수처리시설 저장 — saveList 항목 */
+export interface PublicSewageFacilitySaveItem {
+    admdstCd: string;
+    admdstNm: string;
+    swtrmtFcltCd: string;
+    swtrmtFcltNm: string;
+    fcltSn: string;
+    fcltPstnCn: string | null;
+
+    inflwSwagePhysQnt: number;
+    inflwSwageBoilQnt: number;
+    inflwSwageAltdQnt: number;
+
+    prcsPhysCpct: number;
+    prcsBoilCpct: number;
+    prcsAltdCpct: number;
+
+    prxyCtrtCn: string | null;
+    sftyAcdntEvntcsCnt: number;
+    rmrk: string | null;
+}
+
+/** ST00060001 공공하수처리시설 저장 API 요청 */
+export interface PublicSewageFacilitySaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+
+    /**
+     * 저장 요청에서 "해당없음" 처리 여부가 함께 전달되는 경우를 고려합니다.
+     * (백엔드 스펙에 따라 필수 여부는 달라질 수 있어 optional로 둡니다.)
+     */
+    noApplicable?: boolean;
+
+    saveList: PublicSewageFacilitySaveItem[];
+}
+
+export interface PublicSewageFacilitySaveResponse {
+    data?: string;
+    message?: string;
+    status: string;
+}
+
+/** 공공하수처리시설 입력 제출 공통 본문 (`submitList` 제외) */
+export interface PublicSewageFacilitySubmitRequestBase {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    noApplicable?: boolean;
+    laePicNm: string;
+    laePicTelNo: string;
+    laeKbrdrDeptNm: string;
+    laeKbrdrJbgdNm: string;
+    laeIdfrNm: string;
+    laeIdfrTelNo: string;
+    laeIdfrDeptNm: string;
+    laeIdfrJbgdNm: string;
+}
+
+/** ST00060001 공공하수처리시설 제출 API 요청 (`submitList` 행은 저장과 동일) */
+export interface PublicSewageFacilitySubmitRequest extends PublicSewageFacilitySubmitRequestBase {
+    submitList: PublicSewageFacilitySaveItem[];
+}
+
+export interface PublicSewageFacilitySubmitResponse {
+    data: {
+        finalStatus: string;
+        nvpassed: boolean;
+    }
+    message?: string;
+    status: string;
+}
+
+export interface StatisticsInputPublicSewageFacilityService {
+    getPublicSewageFacility(param: PublicSewageFacilityRequestParams): Promise<PublicSewageFacilityResponse>;
+    getPublicSewageMainFacility(param: PublicSewageFacilityRequestParams): Promise<PublicSewageMainFacilityResponse>;
+    getMappingTargets(param: PublicSewageMappingTargetsRequestParams): Promise<PublicSewageMappingTargetsResponse>;
+    saveMainFacilityMapping(param: PublicSewageMainFacilityMappingSaveRequest): Promise<PublicSewageMainFacilityMappingSaveResponse>;
+    savePublicSewageFacility(param: PublicSewageFacilitySaveRequest): Promise<PublicSewageFacilitySaveResponse>;
+    submitPublicSewageFacility(param: PublicSewageFacilitySubmitRequest): Promise<PublicSewageFacilitySubmitResponse>;
+}
diff --git a/apps/st/src/entities/statistics/model/input/statistics-sewage-pipe-input-interface.ts b/apps/st/src/entities/statistics/model/input/statistics-sewage-pipe-input-interface.ts
new file mode 100644
index 000000000..4076e5f4f
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/input/statistics-sewage-pipe-input-interface.ts
@@ -0,0 +1,624 @@
+import type { SewerageStatusInfo } from "../statistics-interface";
+
+export interface SeweragePipeRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    statsYr?: string;
+    mode?: string;
+}
+
+export interface VerifyResultItem {
+    vrfcCd: string;
+    rsnExpln: string;
+    /** 현재값(문자열로 내려오는 경우가 많음) */
+    nowVlCn?: string;
+    /** 비교값 */
+    compVlCn?: string;
+}
+
+/** 필드명 -> 검증 결과 배열 */
+export type SeweragePipeInputVerificationResult = Record<string, VerifyResultItem[]>;
+
+export interface SeweragePipeInputCommonInfo {
+    statsYr: string;
+    ctpvNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    verificationResult?: SeweragePipeInputVerificationResult;
+}
+
+export interface SeweragePipeInputRegionalFactStatusItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    goalYr: string;
+
+    wholPplMtncPlanPrlg: number;
+    wholPlanPrlg: number;
+    wholFcltPrlg: number;
+    swagePplPsplyRt: number;
+
+    cbsysPplMtncPlanArea: number;
+    cbsysPplMtncPlanPrlg: number;
+    cbsysPlanPrlg: number;
+    cbsysFcltPrlg: number;
+    cbsysSqrePrlg: number;
+    cbsysCiclPrlg: number;
+    cbsysOpnPrlg: number;
+    cbsysGttrPrlg: number;
+
+    drtwPplMtncPlanArea: number;
+    drtwPplMtncPlanPrlg: number;
+    drtwPplPlanPrlg: number;
+    drtwPplFcltPrlg: number;
+    drtwPplSqrePrlg: number;
+    drtwPplCiclPrlg: number;
+
+    exlnPplMtncPlanArea: number;
+    exlnPplMtncPlanPrlg: number;
+    exlnPplPlanPrlg: number;
+    exlnPplFcltPrlg: number;
+    exlnPplSqrePrlg: number;
+    exlnPplCiclPrlg: number;
+    exlnPplOpnPrlg: number;
+    exlnPplGttrPrlg: number;
+
+    cbsysMnhlCnt: number;
+    sprsysDrtwMnhlCnt: number;
+    sprsysExlnMnhlCnt: number;
+
+    drtwRcvprpCnt: number;
+    exlnRcvprpCnt: number;
+
+    stofcbrCnt: number;
+    exlnOtflCnt: number;
+
+    sewerLdgrEdpPrlg: number;
+    sewerLdgrEdpRt: number;
+
+    rmrk: string | null;
+    verificationResult?: SeweragePipeInputVerificationResult;
+}
+
+export interface SeweragePipeInputRegionalResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SeweragePipeInputCommonInfo;
+    regionalFactStatusList: SeweragePipeInputRegionalFactStatusItem[];
+}
+
+export interface SeweragePipeInputRegionalResponse {
+    status: string;
+    data: SeweragePipeInputRegionalResponseData;
+    message?: string;
+}
+
+/** 지역별 시설현황(Tab1) 저장 — saveList 행 (검증 결과 제외) */
+export type SeweragePipeInputRegionalFactStatusSaveItem = Omit<
+    SeweragePipeInputRegionalFactStatusItem,
+    "verificationResult"
+>;
+
+/** Tab2 저장 — saveList */
+export type SeweragePipeInputFactInstallStatusSaveItem = Omit<
+    SeweragePipeInputFactInstallStatusItem,
+    "verificationResult"
+>;
+
+/** 지역별 시설현황 저장 API 요청 */
+export interface SeweragePipeInputRegionalFactStatusSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    saveList: SeweragePipeInputRegionalFactStatusSaveItem[];
+}
+
+export interface SeweragePipeInputRegionalFactStatusSaveResponse {
+    data?: string;
+    message?: string;
+    status: string;
+}
+
+/** 하수관로 입력 제출 공통 본문 (`submitList` 제외) */
+export interface SeweragePipeInputSubmitRequestBase {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    laePicNm: string;
+    laePicTelNo: string;
+    laeKbrdrDeptNm: string;
+    laeKbrdrJbgdNm: string;
+    laeIdfrNm: string;
+    laeIdfrTelNo: string;
+    laeIdfrDeptNm: string;
+    laeIdfrJbgdNm: string;
+}
+
+/** ST00020001 지역별 시설현황 제출 API 요청 (`submitList` 행은 저장과 동일) */
+export interface SeweragePipeInputRegionalFactStatusSubmitRequest extends SeweragePipeInputSubmitRequestBase {
+    submitList: SeweragePipeInputRegionalFactStatusSaveItem[];
+}
+
+export interface SeweragePipeInputRegionalFactStatusSubmitResponse {
+    data: {
+        finalStatus: string;
+        nvpassed: boolean;
+    }
+    message?: string;
+    status: string;
+}
+
+export interface SeweragePipeInputFactInstallStatusSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    saveList: SeweragePipeInputFactInstallStatusSaveItem[];
+}
+
+export interface SeweragePipeInputFactInstallStatusSaveResponse {
+    data?: string;
+    message?: string;
+    status: string;
+}
+
+/** ST00020002 시설별 설치현황 제출 API 요청 (`submitList` 행은 Tab2 저장과 동일) */
+export interface SeweragePipeInputFactInstallStatusSubmitRequest extends SeweragePipeInputSubmitRequestBase {
+    submitList: SeweragePipeInputFactInstallStatusSaveItem[];
+}
+
+export interface SeweragePipeInputFactInstallStatusSubmitResponse {
+    data: {
+        finalStatus: string;
+        nvpassed: boolean;
+    }
+    message?: string;
+    status: string;
+}
+
+/** 하수관로 입력 제출 API 공통 응답 */
+export interface SeweragePipeInputSubmitResponse {
+    data: {
+        finalStatus: string;
+        nvpassed: boolean;
+    }
+    message?: string;
+    status: string;
+}
+
+/** 시설별 설치 현황 — 목록 항목 */
+export interface SeweragePipeInputFactInstallStatusItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    fcltSn: string;
+    swtrmtFcltCd: string;
+    swtrmtFcltNm: string;
+    prcsFcltCpct: number;
+    prcsZoneArea: number;
+    cbsysPrcsZoneArea: number;
+    sprsysPrcsZoneArea: number;
+    sprsysVartnRt: number;
+    mltvEqpmCnt: number;
+    cbsysMltvEqpmCnt: number;
+    sprsysMltvEqpmCnt: number;
+    sprsysMltvLnkgCnt: number;
+    sprsysMltvYetLnkgCnt: number;
+    wholFcltPrlg: number;
+    wholIcptgAtlfcsPrlg: number;
+    icptgPrlg: number;
+    atlfcsPrlg: number;
+    cbsysStofcbrCnt: number;
+    sprsysStofcbrCnt: number;
+    sprsysExlnOtflCnt: number;
+    wholBrchlnPrlg: number;
+    cbsysBrchlnPrlg: number;
+    exlnBrchlnPrlg: number;
+    drtwBrchlnPrlg: number;
+    rmrk: string;
+    verificationResult?: SeweragePipeInputVerificationResult;
+}
+
+/** 시설별 설치 현황 — data 본문 */
+export interface SeweragePipeInputFactInstallResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SeweragePipeInputCommonInfo;
+    factInstallStatusList: SeweragePipeInputFactInstallStatusItem[];
+}
+
+/** 시설별 설치 현황 — API 응답 */
+export interface SeweragePipeInputFactInstallResponse {
+    status: string;
+    data: SeweragePipeInputFactInstallResponseData;
+    message?: string;
+}
+
+/** 관종별 현황 - 연도별 통계 항목(신규 스펙) */
+export interface SeweragePipeInputPipeTypeYearlyStatItem {
+    lyngYr: string;
+    prlgWhol: number;
+    lyngPrlg: number;
+    dmltnPrlg: number;
+}
+
+/** 관종별 현황 — 목록 항목 */
+export interface SeweragePipeInputPipeTypeStatusItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    pipeSeCd: string;
+    pipeSeNm: string;
+    pipeByPrstWhol: number;
+    /** 구 스펙 */
+    lyngPrlg?: number;
+    dmltnPrlg?: number;
+    /** 신 스펙 */
+    lyngPrlgWhol?: number;
+    dmltnPrlgWhol?: number;
+    yearlyStatList?: SeweragePipeInputPipeTypeYearlyStatItem[];
+    rmrk: string;
+    verificationResult?: SeweragePipeInputVerificationResult;
+}
+
+/** 관종별 현황 — data 본문 */
+export interface SeweragePipeInputPipeTypeResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SeweragePipeInputCommonInfo;
+    pipeTypeStatusList: SeweragePipeInputPipeTypeStatusItem[];
+}
+
+/** 관종별 현황 — API 응답 */
+export interface SeweragePipeInputPipeTypeResponse {
+    status: string;
+    data: SeweragePipeInputPipeTypeResponseData;
+    message?: string;
+}
+
+/** 관종별 현황 저장 — saveList 항목 */
+export interface SeweragePipeInputPipeTypeStatusSaveItem {
+    admdstCd: string;
+    admdstNm: string;
+    pipeSeCd: string;
+    yearlyStatList: SeweragePipeInputPipeTypeYearlyStatItem[];
+    rmrk: string;
+    lyngPrlgWhol: number;
+    dmltnPrlgWhol: number;
+    pipeByPrstWhol: number;
+}
+
+/** 관종별 현황 저장 API 요청 */
+export interface SeweragePipeInputPipeTypeStatusSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    saveList: SeweragePipeInputPipeTypeStatusSaveItem[];
+}
+
+/** 관종별 현황 저장 API 응답 */
+export interface SeweragePipeInputPipeTypeStatusSaveResponse {
+    data?: string;
+    message?: string;
+    status: string;
+}
+
+/** ST00020003 관종별 현황 제출 API 요청 */
+export interface SeweragePipeInputPipeTypeStatusSubmitRequest extends SeweragePipeInputSubmitRequestBase {
+    submitList: SeweragePipeInputPipeTypeStatusSaveItem[];
+}
+
+/** 관경별 현황 — 목록 항목 */
+export interface SeweragePipeInputPipeDiameterStatusItem {
+    admdstCd: string;
+    sggNm: string;
+    admdstNm: string;
+    pipeSeCd: string;
+    pipeSeNm: string;
+    pdmtByTsmWhol: number;
+    step1PdmtPrlg: number;
+    step2PdmtPrlg: number;
+    step3PdmtPrlg: number;
+    step4PdmtPrlg: number;
+    step5PdmtPrlg: number;
+    sqrePdmtPrlg: number;
+    etcPdmtPrlg: number;
+    rmrk: string;
+    verificationResult?: SeweragePipeInputVerificationResult;
+}
+
+/** 관경별 현황 — data 본문 */
+export interface SeweragePipeInputPipeDiameterResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SeweragePipeInputCommonInfo;
+    pipeDiameterStatusList: SeweragePipeInputPipeDiameterStatusItem[];
+}
+
+/** 관경별 현황 — API 응답 */
+export interface SeweragePipeInputPipeDiameterResponse {
+    status: string;
+    data: SeweragePipeInputPipeDiameterResponseData;
+    message?: string;
+}
+
+/** 관경별 현황 저장 — saveList 항목 */
+export interface SeweragePipeInputPipeDiameterStatusSaveItem {
+    pipeSeCd: string;
+    step1PdmtPrlg: number;
+    step2PdmtPrlg: number;
+    step3PdmtPrlg: number;
+    step4PdmtPrlg: number;
+    step5PdmtPrlg: number;
+    sqrePdmtPrlg: number;
+    etcPdmtPrlg: number;
+    rmrk: string;
+    pdmtByTsmWhol: number;
+    admdstCd: string;
+    admdstNm: string;
+}
+
+/** 관경별 현황 저장 API 요청 */
+export interface SeweragePipeInputPipeDiameterStatusSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    saveList: SeweragePipeInputPipeDiameterStatusSaveItem[];
+}
+
+/** 관경별 현황 저장 API 응답 */
+export interface SeweragePipeInputPipeDiameterStatusSaveResponse {
+    data?: string;
+    message?: string;
+    status: string;
+}
+
+/** ST00020004 관경별 현황 제출 API 요청 */
+export interface SeweragePipeInputPipeDiameterStatusSubmitRequest extends SeweragePipeInputSubmitRequestBase {
+    submitList: SeweragePipeInputPipeDiameterStatusSaveItem[];
+}
+
+/** 맨홀 현황 — 연도별 통계 항목 */
+export interface SeweragePipeInputManholeYearlyStatItem {
+    manhYr: string;
+    wholMnhlCnt: number;
+    step1MnhlCnt: number;
+    step2MnhlCnt: number;
+    step3MnhlCnt: number;
+    step4MnhlCnt: number;
+    step5MnhlCnt: number;
+}
+
+type SeweragePipeInputManholeLegacyYy = 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25;
+type SeweragePipeInputManholeLegacySuffix =
+    | "WholMnhlCnt"
+    | "Step1MnhlCnt"
+    | "Step2MnhlCnt"
+    | "Step3MnhlCnt"
+    | "Step4MnhlCnt"
+    | "Step5MnhlCnt";
+type SeweragePipeInputManholeLegacyYearField =
+    `yy${SeweragePipeInputManholeLegacyYy}${SeweragePipeInputManholeLegacySuffix}`;
+
+/** 맨홀 현황 — 목록 항목 */
+export interface SeweragePipeInputManholeStatusItem
+    extends Partial<Record<SeweragePipeInputManholeLegacyYearField, number>> {
+    sggNm: string;
+    admdstCd: string;
+    admdstNm: string;
+    emphsMngSeCd: string;
+    emphsMngSeNm: string;
+    totalWholMnhlCnt: number;
+    totalStep1MnhlCnt: number;
+    totalStep2MnhlCnt: number;
+    totalStep3MnhlCnt: number;
+    totalStep4MnhlCnt: number;
+    totalStep5MnhlCnt: number;
+    yearlyStats?: SeweragePipeInputManholeYearlyStatItem[];
+    rmrk: string;
+    verificationResult?: SeweragePipeInputVerificationResult;
+}
+
+/** 맨홀 현황 — data 본문 */
+export interface SeweragePipeInputManholeResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SeweragePipeInputCommonInfo;
+    manholeStatusList: SeweragePipeInputManholeStatusItem[];
+}
+
+/** 맨홀 현황 — API 응답 */
+export interface SeweragePipeInputManholeResponse {
+    status: string;
+    data: SeweragePipeInputManholeResponseData;
+    message?: string;
+}
+
+/** 맨홀 현황 저장 — yearlyStats 항목 */
+export interface SeweragePipeInputManholeStatusSaveYearlyStatItem {
+    manhYr: string;
+    wholMnhlCnt: number;
+    step1MnhlCnt: number;
+    step2MnhlCnt: number;
+    step3MnhlCnt: number;
+    step4MnhlCnt: number;
+    step5MnhlCnt: number;
+}
+
+/** 맨홀 현황 저장 — saveList 항목 */
+export interface SeweragePipeInputManholeStatusSaveItem {
+    emphsMngSeCd: string;
+    admdstCd: string;
+    admdstNm: string;
+    yearlyStats: SeweragePipeInputManholeStatusSaveYearlyStatItem[];
+    rmrk: string;
+}
+
+/** 맨홀 현황 저장 API 요청 */
+export interface SeweragePipeInputManholeStatusSaveRequest {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    saveList: SeweragePipeInputManholeStatusSaveItem[];
+}
+
+/** 맨홀 현황 저장 API 응답 */
+export interface SeweragePipeInputManholeStatusSaveResponse {
+    data?: string;
+    message?: string;
+    status: string;
+}
+
+/** ST00020005 맨홀 현황 제출 API 요청 */
+export interface SeweragePipeInputManholeStatusSubmitRequest extends SeweragePipeInputSubmitRequestBase {
+    submitList: SeweragePipeInputManholeStatusSaveItem[];
+}
+
+/** 시설별 현황 관리 - 하수처리장별 연결 현황 목록 항목 */
+export interface SeweragePipeInputFacilityConnectionItem {
+    fcltNm: string;
+    fcltCpct: number;
+    fcltSn: string;
+    isConnection: string;
+    connectionAreaList: string;
+}
+
+/** 시설별 현황 관리 - 행정구역별 연결 현황 목록 항목 */
+export interface SeweragePipeInputAdminAreaConnectionItem {
+    ctpvNm: string;
+    sggNm: string;
+    admdstNm: string;
+    admdstCd: string;
+    isConnection: string;
+    connectionBscFctNmList: string;
+}
+
+/** 시설별 현황 관리 — data 본문 */
+export interface SeweragePipeInputConnectionStatusResponseData {
+    statusInfo: SewerageStatusInfo;
+    commonInfo: SeweragePipeInputCommonInfo;
+    facilityConnectionList: SeweragePipeInputFacilityConnectionItem[];
+    adminAreaConnectionList: SeweragePipeInputAdminAreaConnectionItem[];
+}
+
+/** 시설별 현황 관리 — API 응답 */
+export interface SeweragePipeInputConnectionStatusResponse {
+    status: string;
+    data: SeweragePipeInputConnectionStatusResponseData;
+    message?: string;
+}
+
+/** facilitiesList 요청 — statsYr 필수, 나머지 선택 */
+export interface SeweragePipeFacilitiesListRequest {
+    statsYr: string;
+    sewerBzmnCd?: string;
+    ctpvNm?: string;
+    sggNm?: string;
+    fcltyNm?: string;
+}
+
+/** facilitiesList 응답 — 목록 항목 */
+export interface SeweragePipeFacilitiesListItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    admdstCd: string;
+    fcltNm: string;
+    fcltCpct: number;
+    fcltCd: string;
+    fcltSn: string;
+}
+
+/** facilitiesList API 응답 */
+export interface SeweragePipeFacilitiesListResponse {
+    status: string;
+    data: SeweragePipeFacilitiesListItem[];
+    message?: string;
+}
+
+/** 처리시설 선택 후 행정구역(연결) 목록 조회 요청 */
+export interface SeweragePipeFacilityAdminAreaListRequest {
+    statsYr: string;
+    swtrmtFcltCd: string;
+    sewerBzmnCd: string;
+    ctpvNm: string;
+    sggNm?: string;
+}
+
+/** 처리시설별 행정구역 목록 항목 */
+export interface SeweragePipeFacilityAdminAreaItem {
+    ctpvNm: string;
+    sggNm: string;
+    admdstNm: string;
+    admdstCd: string;
+    isConnection: string;
+}
+
+/** 처리시설별 행정구역 목록 API 응답 */
+export interface SeweragePipeFacilityAdminAreaListResponse {
+    status: string;
+    data: SeweragePipeFacilityAdminAreaItem[];
+    message?: string;
+}
+
+/** 시설별 연결관계 저장 — saveList 항목 */
+export interface SeweragePipeFactConnectionSaveItem {
+    admdstCd: string;
+    admdstNm: string;
+}
+
+/** 시설별 연결관계 저장 요청 */
+export interface SeweragePipeFactConnectionSaveRequest {
+    ctpvNm: string;
+    sggNm: string;
+    fcltSn: string;
+    statsYr: string;
+    swtrmtFcltCd: string;
+    swtrmtFcltNm: string;
+    prcsFcltCpct: number;
+    sewerBzmnCd: string;
+    userId: string;
+    saveList: SeweragePipeFactConnectionSaveItem[];
+    deleteList: string[];
+}
+
+/** 시설별 연결관계 저장 응답 */
+export interface SeweragePipeFactConnectionSaveResponse {
+    status: string;
+    data?: string;
+    message?: string;
+}
+
+export interface StatisticsInputSewPipeService {
+    getRegionalFactStatus(param: SeweragePipeRequestParams): Promise<SeweragePipeInputRegionalResponse>;
+    getFactInstallStatus(param: SeweragePipeRequestParams): Promise<SeweragePipeInputFactInstallResponse>;
+    getPipeTypeStatus(param: SeweragePipeRequestParams): Promise<SeweragePipeInputPipeTypeResponse>;
+    getPipeDiameterStatus(param: SeweragePipeRequestParams): Promise<SeweragePipeInputPipeDiameterResponse>;
+    getManholeStatus(param: SeweragePipeRequestParams): Promise<SeweragePipeInputManholeResponse>;
+    getConnectionStatus(param: SeweragePipeRequestParams): Promise<SeweragePipeInputConnectionStatusResponse>;
+    getFacilitiesList(param: SeweragePipeFacilitiesListRequest): Promise<SeweragePipeFacilitiesListResponse>;
+    getFacilityAdminAreaList(param: SeweragePipeFacilityAdminAreaListRequest): Promise<SeweragePipeFacilityAdminAreaListResponse>;
+    saveFactConnection(param: SeweragePipeFactConnectionSaveRequest): Promise<SeweragePipeFactConnectionSaveResponse>;
+    saveRegionalFactStatus(param: SeweragePipeInputRegionalFactStatusSaveRequest): Promise<SeweragePipeInputRegionalFactStatusSaveResponse>;
+    submitRegionalFactStatus(param: SeweragePipeInputRegionalFactStatusSubmitRequest): Promise<SeweragePipeInputRegionalFactStatusSubmitResponse>;
+    saveFactInstallStatus(param: SeweragePipeInputFactInstallStatusSaveRequest): Promise<SeweragePipeInputFactInstallStatusSaveResponse>;
+    submitFactInstallStatus(param: SeweragePipeInputFactInstallStatusSubmitRequest): Promise<SeweragePipeInputFactInstallStatusSubmitResponse>;
+    savePipeTypeStatus(param: SeweragePipeInputPipeTypeStatusSaveRequest): Promise<SeweragePipeInputPipeTypeStatusSaveResponse>;
+    submitPipeTypeStatus(param: SeweragePipeInputPipeTypeStatusSubmitRequest): Promise<SeweragePipeInputSubmitResponse>;
+    savePipeDiameterStatus(param: SeweragePipeInputPipeDiameterStatusSaveRequest): Promise<SeweragePipeInputPipeDiameterStatusSaveResponse>;
+    submitPipeDiameterStatus(param: SeweragePipeInputPipeDiameterStatusSubmitRequest): Promise<SeweragePipeInputSubmitResponse>;
+    saveManholeStatus(param: SeweragePipeInputManholeStatusSaveRequest): Promise<SeweragePipeInputManholeStatusSaveResponse>;
+    submitManholeStatus(param: SeweragePipeInputManholeStatusSubmitRequest): Promise<SeweragePipeInputSubmitResponse>;
+}
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-sewage-supply-rate-input-interface.ts b/apps/st/src/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface.ts
similarity index 59%
rename from apps/st/src/entities/statistics/model/statistics-sewage-supply-rate-input-interface.ts
rename to apps/st/src/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface.ts
index b3f97fbb1..5744197f8 100644
--- a/apps/st/src/entities/statistics/model/statistics-sewage-supply-rate-input-interface.ts
+++ b/apps/st/src/entities/statistics/model/input/statistics-sewage-supply-rate-input-interface.ts
@@ -1,23 +1,6 @@
-import type { ApiResponse } from "./statistics-interface";
+import type { ApiResponse, SewerageStatusInfo } from "../statistics-interface";
 
 // 하수도 보급률 데이터 항목
-export interface SewerageSupplyRateStatusInfo {
-    laeSbmsnSttsCd: string | null;
-    laeSbmsnYmd: string | null;
-    laePicNm: string | null;
-    laePicTelNo: string | null;
-    laeKbrdrJbgdNm: string | null;
-    prvnStatus: string | null;
-    dcsnStatus: string | null;
-    wrterOpinionSm: string | null;
-    chckerOpinionSm: string | null;
-    laeIdfrDeptNm: string | null;
-    laeIdfrJbgdNm: string | null;
-    laeIdfrNm: string | null;
-    laeIdfrTelNo: string | null;
-    laeKbrdrDeptNm: string | null;
-}
-
 export interface SewerageSupplyRateCommonInfo {
     sewerBzmnArea: number;
     sewerBzmnCd: string;
@@ -26,7 +9,6 @@ export interface SewerageSupplyRateCommonInfo {
     sewerBzmnWholPpltnCnt: number;
     piplFcltyExtn: number;
     piplPlanExtn: number;
-    swagePplPsplyRt: number;
     ctpvNm: string;
     statsYr: string;
     statsCd: string;
@@ -36,6 +18,8 @@ export interface SewerageSupplyRateCommonInfo {
 export interface VerificationResultItem {
     vrfcCd: string;
     rsnExpln: string;
+    nowVlCn: string;
+    compVlCn: string;
 }
 
 /** 필드명 → 검증 결과 배열. 예: { popltnSm: [{ type, rsn }], wstrPrmTrt: [...] } */
@@ -77,12 +61,13 @@ export interface SewerageSupplyRateItem {
     staaPsplyRt: number;
     altdPrcsPsplyRt: number;
     sewerInstlRt: number;
+    swagePplPsplyRt: number;
     rmrk: string | null;
     verificationResult?: SewerageSupplyRateVerificationResult | null;
 }
 
 export interface SewerageSupplyRateResponseData {
-    statusInfo: SewerageSupplyRateStatusInfo;
+    statusInfo: SewerageStatusInfo;
     sewerageSupplyRateList: SewerageSupplyRateItem[];
     commonInfo: SewerageSupplyRateCommonInfo;
 }
@@ -102,9 +87,9 @@ export interface SewerageSupplyRateRequestParams {
 /** 하수도 보급률 저장 API 요청 body (한 행) */
 export interface SewerageSupplyRateSaveItem {
     sggNm: string | null;
-    admdstCd: string;
-    admdstNm: string;
-    trbtrNm: string;
+    admdstCd: string | null;
+    admdstNm: string | null;
+    trbtrNm: string | null;
     spcCtpnRgnCn: string | null;
     ts1SwtrmtPpltnCnt: number;
     ts2SwtrmtPpltnCnt: number;
@@ -118,7 +103,7 @@ export interface SewerageSupplyRateSaveItem {
     drtwPrcsPpltnCnt: number;
     spctnkPpltnCnt: number;
     staaExcpArea: number;
-    rmrk: string;
+    rmrk: string | null;
     wholPpltnCnt: number;
     wholArea: number;
     wholSwtrmtPpltnCnt: number;
@@ -150,23 +135,81 @@ export interface SewerageSupplyRateSaveRequest {
     superAdmin?: string;
 }
 
-export interface SewerageSupplyRateSaveData {
-    httpStatus?: number;
-    code?: string;
+export interface SewerageSupplyRateSaveResponse {
+    data: string;
+    message?: string;
+    status: string;
 }
 
-export type SewerageSupplyRateSaveApiResponse = ApiResponse<SewerageSupplyRateSaveData>;
+export interface SewerageSupplyRateSubmitResponse {
+    data: {
+        finalStatus: string;
+        nvpassed: boolean;
+    }
+    message?: string;
+    status: string;
+}
+
+// 하수도 통계 입력 기간 조회 (입력 INPT / 검증 VRFC 구간)
+export interface CheckInputPeriodItem {
+    statsYr: string;
+    seCd: number;
+    seType: string;
+    bgngYmd: string;
+    endYmd: string;
+    current: boolean;
+}
 
-// 하수도 통계 입력 기간 조회
 export interface CheckInputPeriodResponse {
     status: string;
     message: string;
-    data: boolean;
+    data: CheckInputPeriodItem[];
+}
+
+/** 입력기간(INPT) 중 현재 구간이면 true */
+export function isInputPeriodCurrent(periods: CheckInputPeriodItem[] | null | undefined): boolean {
+    return (periods ?? []).some((p) => p.seType === "INPT" && p.current === true);
+}
+
+/** `YYYYMMDD` → `yyyy-mm-dd` (그 외 형식은 그대로 반환) */
+export function formatCheckInputYmdAsDash(ymd: string | null | undefined): string {
+    if (ymd == null || ymd === "") return "";
+    if (ymd.length === 8 && /^\d{8}$/.test(ymd)) {
+        return `${ymd.slice(0, 4)}-${ymd.slice(4, 6)}-${ymd.slice(6, 8)}`;
+    }
+    return ymd;
+}
+
+/** 검증기간(VRFC) 중 `current`인 항목 (없으면 null) */
+export function getCurrentVerificationPeriod(
+    periods: CheckInputPeriodItem[] | null | undefined,
+): CheckInputPeriodItem | null {
+    return (periods ?? []).find((p) => p.seType === "VRFC" && p.current === true) ?? null;
+}
+
+/** 검증기간(VRFC) 중 현재 구간이면 true — 저장·제출·제출 취소 불가 */
+export function isVerificationPeriodCurrent(periods: CheckInputPeriodItem[] | null | undefined): boolean {
+    return getCurrentVerificationPeriod(periods) !== null;
+}
+
+/**
+ * 검증기간이면 차단 안내 문구(줄바꿈 + yyyy-mm-dd ~ yyyy-mm-dd), 아니면 null
+ */
+export function getVerificationPeriodActionBlockedMessage(
+    periods: CheckInputPeriodItem[] | null | undefined,
+): string | null {
+    const v = getCurrentVerificationPeriod(periods);
+    if (!v) return null;
+    const from = formatCheckInputYmdAsDash(v.bgngYmd);
+    const to = formatCheckInputYmdAsDash(v.endYmd);
+    const range =
+        from && to ? `${from} ~ ${to}` : [from, to].filter(Boolean).join(" ~ ");
+    return `검증기간에는 저장, 제출, 제출 취소를\n 할 수 없습니다.\n(검증기간: ${range})`;
 }
 
 export interface StatisticsInputSewSupplyRateService {
     getSewerageSupplyRateList(params: SewerageSupplyRateRequestParams): Promise<SewerageSupplyRateApiResponse>;
     checkInputPeriod(params: string): Promise<CheckInputPeriodResponse>;
-    saveSewerageSupplyRate(params: SewerageSupplyRateSaveRequest): Promise<SewerageSupplyRateSaveApiResponse>;
-    submitSewerageSupplyRate(params: SewerageSupplyRateSaveRequest): Promise<SewerageSupplyRateSaveApiResponse>;
+    saveSewerageSupplyRate(params: SewerageSupplyRateSaveRequest): Promise<SewerageSupplyRateSaveResponse>;
+    submitSewerageSupplyRate(params: SewerageSupplyRateSaveRequest): Promise<SewerageSupplyRateSubmitResponse>;
 }
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/notice-talk/notice-talk-sending-columns.tsx b/apps/st/src/entities/statistics/model/notice-talk/notice-talk-sending-columns.tsx
new file mode 100644
index 000000000..03a6663f8
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/notice-talk/notice-talk-sending-columns.tsx
@@ -0,0 +1,74 @@
+import type { ColumnDef } from "@tanstack/react-table";
+
+import { Checkbox } from "@common/components";
+
+import type { SewerStUserItem } from "../sewer-st-user-interface";
+
+export const userListColumns: ColumnDef<SewerStUserItem>[] = [
+    {
+        id: "select",
+        header: ({ table }) => (
+            <div
+                className="flex justify-center"
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={(e) => e.stopPropagation()}
+                role="presentation"
+            >
+                <Checkbox
+                    checked={
+                        table.getIsAllPageRowsSelected() ||
+                        (table.getIsSomePageRowsSelected() && "indeterminate")
+                    }
+                    onCheckedChange={(value) =>
+                        table.toggleAllPageRowsSelected(!!value)
+                    }
+                    aria-label="전체 선택"
+                />
+            </div>
+        ),
+        cell: ({ row }) => (
+            <div
+                className="flex justify-center"
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={(e) => e.stopPropagation()}
+                role="presentation"
+            >
+                <Checkbox
+                    checked={row.getIsSelected()}
+                    onCheckedChange={(value) => row.toggleSelected(!!value)}
+                    aria-label="행 선택"
+                />
+            </div>
+        ),
+        enableSorting: false,
+        enableHiding: false,
+    },
+    {
+        accessorKey: "userNm",
+        header: "이름",
+    },
+    {
+        accessorKey: "sido",
+        header: "시도",
+    },
+    {
+        accessorKey: "gugun",
+        header: "시군구",
+    },
+    {
+        accessorKey: "gubunNm",
+        header: "구분",
+    },
+    {
+        accessorKey: "deptNm",
+        header: "소속",
+    },
+    {
+        accessorKey: "jbgdNm",
+        header: "직급",
+    },
+    {
+        accessorKey: "telNo",
+        header: "전화번호",
+    },
+];
diff --git a/apps/st/src/entities/statistics/model/notice-talk/notice-talk-sending-interface.ts b/apps/st/src/entities/statistics/model/notice-talk/notice-talk-sending-interface.ts
new file mode 100644
index 000000000..e7cf89b58
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/notice-talk/notice-talk-sending-interface.ts
@@ -0,0 +1,30 @@
+import type { SewerStUserItem } from "../sewer-st-user-interface";
+
+export interface NtftalkTemplate {
+    templateCode: string;
+    templateName: string;
+    templateContent: string;
+}
+
+export interface TemplateVariablesResponse {
+    templateCode: string;
+    variables: string[];
+    count: number;
+}
+
+export interface BusinessSendRequest {
+    templateCode: string;
+    callback?: string;
+    fixedRecipientNum?: string;
+    recipients: Record<string, string>[];
+}
+
+export interface BusinessSendResponse {
+    success: boolean;
+    sentCount: number;
+    message: string;
+}
+
+export interface SelectedRecipient extends SewerStUserItem {
+    variableOverrides: Record<string, string>;
+}
diff --git a/apps/st/src/entities/statistics/model/regional-grid-columns.ts b/apps/st/src/entities/statistics/model/regional-grid-columns.ts
index 69eb9a316..cb52aa6a8 100644
--- a/apps/st/src/entities/statistics/model/regional-grid-columns.ts
+++ b/apps/st/src/entities/statistics/model/regional-grid-columns.ts
@@ -47,7 +47,7 @@ export const regionalGridColumnInfo: ColumnInfo = {
         {
             name: "chgRt",
             fieldName: "chgRt",
-            header: { text: "R" },
+            header: { text: "전년대비 비율" },
             width: 60,
             valueType: ValueType.NUMBER,
             dataFormat: "#,##0.00",
@@ -55,7 +55,7 @@ export const regionalGridColumnInfo: ColumnInfo = {
         {
             name: "trsfRt",
             fieldName: "trsfRt",
-            header: { text: "S" },
+            header: { text: "S_i" },
             width: 60,
             valueType: ValueType.NUMBER,
             dataFormat: "#,##0.00",
@@ -63,7 +63,7 @@ export const regionalGridColumnInfo: ColumnInfo = {
         {
             name: "otlrTrsfRt",
             fieldName: "otlrTrsfRt",
-            header: { text: "E" },
+            header: { text: "기준값" },
             width: 60,
             valueType: ValueType.NUMBER,
             dataFormat: "#,##0.00",
diff --git a/apps/st/src/entities/statistics/model/sewer-st-user-interface.ts b/apps/st/src/entities/statistics/model/sewer-st-user-interface.ts
new file mode 100644
index 000000000..b9af09c1c
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/sewer-st-user-interface.ts
@@ -0,0 +1,46 @@
+/**
+ * 하수도 통계 제출현황 사용자 목록 조회 인터페이스
+ */
+
+/**
+ * 하수도 통계 사용자 목록 검색 조건
+ */
+export interface SewerStUserSearchParams {
+    /** 통계연도 (예: "2024") */
+    statsYr?: string;
+    /** 하수도 사업자코드 (예: "4145000000") */
+    sewerBzmnCd?: string;
+    /** 구분 코드 (PIC: 입력자, IDFR: 승인자, MCTPV: 검토자, null: 전체) */
+    gubun?: string;
+}
+
+/**
+ * 하수도 통계 사용자 목록 한 행
+ */
+export interface SewerStUserItem {
+    /** 시도 */
+    sido: string;
+    /** 시군구 */
+    gugun: string;
+    /** 이름 */
+    userNm: string;
+    /** 전화번호 */
+    telNo: string;
+    /** 소속 */
+    deptNm: string;
+    /** 직급 */
+    jbgdNm: string;
+    /** 구분 코드 (PIC: 입력자, IDFR: 승인자, MCTPV: 검토자) */
+    gubun: string;
+    /** 구분명 (입력자 / 승인자 / 검토자) */
+    gubunNm: string;
+}
+
+/**
+ * 하수도 통계 사용자 목록 조회 API 응답
+ */
+export interface SewerStUserListResponse {
+    status: string;
+    message?: string;
+    data?: SewerStUserItem[];
+}
diff --git a/apps/st/src/entities/statistics/model/statistics-analysis/statistics-analysis-detail-interface.ts b/apps/st/src/entities/statistics/model/statistics-analysis/statistics-analysis-detail-interface.ts
index af0919b87..81d9c5840 100644
--- a/apps/st/src/entities/statistics/model/statistics-analysis/statistics-analysis-detail-interface.ts
+++ b/apps/st/src/entities/statistics/model/statistics-analysis/statistics-analysis-detail-interface.ts
@@ -18,6 +18,8 @@ export interface StAnlsDtlResponse {
     nmlDataNocs: number; // 정상 데이터 건수
     exclDataNocs: number; // 제외 데이터 건수
     otlrDataNocs: number; // 이상치 데이터 건수
+    cfmtnYn: string; // 확정여부 (Y/N)
+    cfmtnDt: string | null; // 확정일자 (yyyy-MM-dd HH:mm:ss)
     statsCd: string; // 통계 코드
     statsNm: string; // 통계 항목 명
     vrfcTrgtNm: string; // 검증대상명
@@ -30,3 +32,13 @@ export interface StAnlsDtlSearchParams extends PageableParams {
 }
 
 export type StAnlsDtlListApiResponse = PageableList<StAnlsDtlResponse>;
+
+export interface StAnlsDtlConfirmRequest {
+    anlsSn: number; // 분석 일련번호
+    vrfcTrgtSnList: number[]; // 검증 대상 일련번호 목록
+}
+
+export interface StAnlsDtlConfirmResponse {
+    anlsSn: number; // 분석 일련번호
+    processedCount: number; // 처리된 검증 대상 건수
+}
diff --git a/apps/st/src/entities/statistics/model/statistics-analysis/statistics-analysis-master-interface.ts b/apps/st/src/entities/statistics/model/statistics-analysis/statistics-analysis-master-interface.ts
index 1129c14a8..1e3e6836f 100644
--- a/apps/st/src/entities/statistics/model/statistics-analysis/statistics-analysis-master-interface.ts
+++ b/apps/st/src/entities/statistics/model/statistics-analysis/statistics-analysis-master-interface.ts
@@ -45,13 +45,15 @@ export interface StAnlsMstResponseDto {
     /** 검증대상명 */
     vrfcTrgtNm: string;
     /** 분석진행비율 */
-    anlsPrgrsRt: number;
+    anlsPrgrsRt: number | null;
     /** 하수도사업자코드 */
     sewerBzmnCd: string;
     /** 통계코드 */
     statsCd: string;
     /** 검증방법코드 */
     vrfcMthdCd: string;
+    /** 확정건수/총건수 (예: 3/10) */
+    cfmtnYnCntTotalCnt: string;
 }
 
 /**
@@ -132,7 +134,6 @@ export interface StAnlsOutlierListResponseDto {
     outlierDataList: StAnlsOutlierDataResponseDto[];
 }
 
-/** 기존 인터페이스 호환을 위한 별칭 (필요 시 유지) */
 export type StAnlsMstResponse = StAnlsMstResponseDto;
 export type StAnlsMstImrResponse = StAnlsMstImrResponseDto;
 export type StAnlsMstSearchParams = StAnlsMstSearchDto;
diff --git a/apps/st/src/entities/statistics/model/statistics-analysis/statistics-analysis-result-interface.ts b/apps/st/src/entities/statistics/model/statistics-analysis/statistics-analysis-result-interface.ts
index 6cce20316..ecf7341eb 100644
--- a/apps/st/src/entities/statistics/model/statistics-analysis/statistics-analysis-result-interface.ts
+++ b/apps/st/src/entities/statistics/model/statistics-analysis/statistics-analysis-result-interface.ts
@@ -11,19 +11,25 @@ export interface StAnlsRsltResponse {
     sido: string; // 시도
     gugun: string; // 시군구
     adstDong: string; // 행정동
+    ognzNm: string; // 조직명
     drngBzmnCd: string; // 하수도 사업자 코드
     sewerBzmnNm: string; // 하수도 사업자명
     swtrmtFcltCd: string; // 하수처리시설코드
     pipeSeCd: string; // 파이프 구분 코드
     pipeSeNm: string; // 파이프 구분 명
+    emphsMngSeCd: string; // 맨홀관리구분코드
+    fcltSn: number; // 시설일련번호
     fcltNm: string; // 시설명
-    addr: string; // 주소
+    fcltPstnCn: string; // 시설주소
     prvyrVl: number; // 전년도 값
     cryrVl: number; // 당해년도 값
     chgRt: number; // 변경율 (r_i)
     trsfRt: number; // 변환 비율 (s_i)
     otlrTrsfRt: number; // 이상치 변환 비율 (E_i)
     otlrYnCd: string; // 이상치 여부 (0: 정상, 1: 이상치, 2: 제외)
+    emphsMngSeNm: string; // 중점관리구역
+    lyngYr: string; // 매설년도
+    manhYr: string; // 맨홀기준년도
 }
 
 export interface StAnlsRsltSearchParams extends PageableParams {
@@ -33,6 +39,8 @@ export interface StAnlsRsltSearchParams extends PageableParams {
     admdstNm?: string; // 행정구역 명칭
     fcltNm?: string; // 시설명
     otlrYnCd?: string; // 이상치 여부 (0: 정상, 1: 이상치, 2: 제외)
+    lyngYr?: string; // 매설년도
+    manhYr?: string; // 맨홀기준년도
 }
 
 export type StAnlsRsltListApiResponse = PageableList<StAnlsRsltResponse>;
diff --git a/apps/st/src/entities/statistics/model/statistics-analysis/verification-history-columns.tsx b/apps/st/src/entities/statistics/model/statistics-analysis/verification-history-columns.tsx
index edd85652e..d83e415db 100644
--- a/apps/st/src/entities/statistics/model/statistics-analysis/verification-history-columns.tsx
+++ b/apps/st/src/entities/statistics/model/statistics-analysis/verification-history-columns.tsx
@@ -77,6 +77,12 @@ export const verificationHistoryColumns = [
             <div className="px-2 py-4">{info.getValue() ?? "-"}</div>
         ),
     }),
+    columnHelper.accessor("cfmtnYnCntTotalCnt", {
+        header: "확정건수/총",
+        cell: (info) => (
+            <div className="px-2 py-4">{info.getValue() ?? "-"}</div>
+        ),
+    }),
     columnHelper.accessor("nmlDataNocs", {
         header: "정상건수",
         cell: (info) => (
diff --git a/apps/st/src/entities/statistics/model/statistics-analysis/verification-list-columns.tsx b/apps/st/src/entities/statistics/model/statistics-analysis/verification-list-columns.tsx
index 05d0ddae5..864e64240 100644
--- a/apps/st/src/entities/statistics/model/statistics-analysis/verification-list-columns.tsx
+++ b/apps/st/src/entities/statistics/model/statistics-analysis/verification-list-columns.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import type { ColumnDef } from "@tanstack/react-table";
+import dayjs from "dayjs";
 
 import { Checkbox } from "@common/components";
 
@@ -16,94 +17,123 @@ export const getVerificationListColumns = ({
     rowData,
     checkedSns,
     onCheck,
-}: GetVerificationListColumnsParams): ColumnDef<StAnlsDtlResponse>[] => [
-    {
-        id: "checkbox",
-        header: () => {
-            const isAllChecked =
-                rowData.length > 0 && checkedSns.length === rowData.length;
-            return (
-                <div className="flex items-center justify-center">
-                    <Checkbox
-                        checked={isAllChecked}
-                        onCheckedChange={(value: boolean) => {
-                            if (value) {
-                                onCheck(
-                                    rowData.map((r) => String(r.vrfcTrgtSn)),
-                                    rowData,
+}: GetVerificationListColumnsParams): ColumnDef<StAnlsDtlResponse>[] => {
+    const selectableRows = rowData.filter((r) => r.cfmtnYn !== "Y");
+
+    return [
+        {
+            id: "checkbox",
+            header: () => {
+                const isAllChecked =
+                    selectableRows.length > 0 &&
+                    checkedSns.length === selectableRows.length;
+                return (
+                    <div className="flex items-center justify-center">
+                        <Checkbox
+                            checked={isAllChecked}
+                            disabled={selectableRows.length === 0}
+                            onCheckedChange={(value: boolean) => {
+                                if (value) {
+                                    onCheck(
+                                        selectableRows.map((r) =>
+                                            String(r.vrfcTrgtSn),
+                                        ),
+                                        selectableRows,
+                                    );
+                                } else {
+                                    onCheck([], []);
+                                }
+                            }}
+                            aria-label="Select all rows"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                if (row.original.cfmtnYn === "Y") {
+                    return <div className="flex items-center justify-center" />;
+                }
+                const rowId = String(row.original.vrfcTrgtSn);
+                const isChecked = checkedSns.includes(rowId);
+                return (
+                    <div className="flex items-center justify-center">
+                        <Checkbox
+                            checked={isChecked}
+                            onCheckedChange={(value: boolean) => {
+                                const newCheckedSns = value
+                                    ? [...checkedSns, rowId]
+                                    : checkedSns.filter((id) => id !== rowId);
+                                const newCheckedRows = selectableRows.filter(
+                                    (r) =>
+                                        newCheckedSns.includes(
+                                            String(r.vrfcTrgtSn),
+                                        ),
                                 );
-                            } else {
-                                onCheck([], []);
+                                onCheck(newCheckedSns, newCheckedRows);
+                            }}
+                            onClick={(e: React.MouseEvent) =>
+                                e.stopPropagation()
                             }
-                        }}
-                        aria-label="Select all rows"
-                    />
-                </div>
-            );
+                            aria-label={`Select row ${rowId}`}
+                        />
+                    </div>
+                );
+            },
+            enableSorting: false,
+            enableHiding: false,
         },
-        cell: ({ row }) => {
-            const rowId = String(row.original.vrfcTrgtSn);
-            const isChecked = checkedSns.includes(rowId);
-            return (
-                <div className="flex items-center justify-center">
-                    <Checkbox
-                        checked={isChecked}
-                        onCheckedChange={(value: boolean) => {
-                            const newCheckedSns = value
-                                ? [...checkedSns, rowId]
-                                : checkedSns.filter((id) => id !== rowId);
-                            const newCheckedRows = rowData.filter((r) =>
-                                newCheckedSns.includes(String(r.vrfcTrgtSn)),
-                            );
-                            onCheck(newCheckedSns, newCheckedRows);
-                        }}
-                        onClick={(e: React.MouseEvent) => e.stopPropagation()}
-                        aria-label={`Select row ${rowId}`}
-                    />
-                </div>
-            );
+        {
+            header: "통계 년도",
+            accessorKey: "statsYr",
         },
-        enableSorting: false,
-        enableHiding: false,
-    },
-    {
-        header: "통계 년도",
-        accessorKey: "statsYr",
-    },
-    {
-        header: "통계 항목",
-        accessorKey: "statsNm",
-    },
-    {
-        header: "검증 항목",
-        accessorKey: "vrfcTrgtNm",
-    },
-    {
-        header: "μ",
-        accessorKey: "ipcrCntVl",
-    },
-    {
-        header: "Percentile",
-        accessorKey: "pctlCrtrVl",
-    },
-    {
-        header: "A",
-        accessorKey: "scopAjmtCntVl",
-    },
-    {
-        header: "C",
-        accessorKey: "thrsCntVl",
-    },
-    {
-        header: "정상건수",
-        accessorKey: "nmlDataNocs",
-    },
-    {
-        header: "제외건수",
-        accessorKey: "exclDataNocs",
-    },
-    {
-        header: "이상건수",
-        accessorKey: "otlrDataNocs",
-    },
-];
+        {
+            header: "통계 항목",
+            accessorKey: "statsNm",
+        },
+        {
+            header: "검증 항목",
+            accessorKey: "vrfcTrgtNm",
+        },
+        {
+            header: "확정일자",
+            accessorKey: "cfmtnDt",
+            cell: ({ row }) => {
+                return (
+                    <div className="text-center">
+                        {row.original.cfmtnDt
+                            ? dayjs(row.original.cfmtnDt).format("YYYY-MM-DD")
+                            : "-"}
+                    </div>
+                );
+            },
+        },
+        {
+            header: "중요도 계수(μ)",
+            accessorKey: "ipcrCntVl",
+        },
+        {
+            header: "백분위수 기준값(pct)",
+            accessorKey: "pctlCrtrVl",
+        },
+        {
+            header: "스케일 조정 계수(A)",
+            accessorKey: "scopAjmtCntVl",
+        },
+        {
+            header: "임계 계수(c)",
+            accessorKey: "thrsCntVl",
+        },
+        {
+            header: "정상건수",
+            accessorKey: "nmlDataNocs",
+        },
+        {
+            header: "제외건수",
+            accessorKey: "exclDataNocs",
+        },
+        {
+            header: "이상건수",
+            accessorKey: "otlrDataNocs",
+        },
+    ];
+};
diff --git a/apps/st/src/entities/statistics/model/statistics-approval-interface.ts b/apps/st/src/entities/statistics/model/statistics-approval-interface.ts
new file mode 100644
index 000000000..4abf87b8d
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-approval-interface.ts
@@ -0,0 +1,31 @@
+export interface ApproveRequest {
+    statsYr: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    mdfrId: string;
+    lastCfmtnPicNm?: string;
+    lastCfmtnPicTelNo?: string;
+    lastCfmtnPicDeptNm?: string;
+    lastCfmtnPicJbgdNm?: string;
+}
+
+export interface RejectRequest {
+    vrfcSn: number;
+    statsYr: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    mdfrId: string;
+    rjctOpnnCn?: string;
+}
+
+export interface ApprovalResponse {
+    resultCode: string;
+    message: string;
+    updatedStts: string;
+    exceptionCnt: number;
+}
+
+export interface StatisticsApprovalService {
+    approveStats(params: ApproveRequest[]): Promise<ApprovalResponse>;
+    rejectStats(params: RejectRequest[]): Promise<ApprovalResponse>;
+}
diff --git a/apps/st/src/entities/statistics/model/statistics-input-review-interface.ts b/apps/st/src/entities/statistics/model/statistics-input-review-interface.ts
index ff86a8799..77f0b6dd4 100644
--- a/apps/st/src/entities/statistics/model/statistics-input-review-interface.ts
+++ b/apps/st/src/entities/statistics/model/statistics-input-review-interface.ts
@@ -4,96 +4,21 @@ import type { ApiResponse } from "./statistics-interface";
  * 검토-00.통계 입력현황 아이템 인터페이스
  */
 export interface StatsInputStatusReviewItem {
-    chk: string;
-    sido: string;
-    gugun: string;
-    yr: string;
-    bsnmCd: string;
-    status: string; 
-
-    // 01. 하수도보급율 (supply)
-    supplyCharger: string;
-    supplyCttpc: string;
-    supplyStatusNm: string;
-    supplyStatus: string;
-    supplyCnt: number;
-
-    // 02. 하수관로 (facility - 기존 3번)
-    facilityCharger: string;
-    facilityCttpc: string;
-    facilityStatusNm: string;
-    facilityStatus: string;
-    facilityCnt: number;
-
-    // 03. 하수관로유지관리 (pipe - 기존 4번)
-    pipeCharger: string;
-    pipeCttpc: string;
-    pipeStatusNm: string;
-    pipeCnt: number;
-
-    // 04. 하수저류시설 (storage - 기존 5번)
-    storageCharger: string;
-    storageCttpc: string;
-    storageStatusNm: string;
-    storageCnt: number;
-
-    // 05. 펌프장 (pump - 기존 6번)
-    pumpCharger: string;
-    pumpCttpc: string;
-    pumpStatusNm: string;
-    pumpCnt: number;
-
-    // 06. 공공하수처리시설 (treat - 기존 7번)
-    treatCharger: string;
-    treatCttpc: string;
-    treatStatusNm: string;
-    treatCnt: number;
-
-    // 07. 분뇨처리시설 (small - 기존 8번)
-    smallCharger: string;
-    smallCttpc: string;
-    smallStatusNm: string;
-    smallCnt: number;
-
-    // 08. 개인하수처리시설 (private - 기존 9번)
-    privateCharger: string;
-    privateCttpc: string;
-    privateStatusNm: string;
-    privateCnt: number;
-
-    // 09. 하수도재정 (finance - 기존 10번)
-    financeCharger: string;
-    financeCttpc: string;
-    financeStatusNm: string;
-    financeCnt: number;
-
-    // 10. 물재이용 (reuse - 기존 11번)
-    reuseCharger: string;
-    reuseCttpc: string;
-    reuseStatusNm: string;
-    reuseCnt: number;
-
-    // 11. 하수및분뇨찌꺼기 (sludge - 기존 12번)
-    sludgeCharger: string;
-    sludgeCttpc: string;
-    sludgeStatusNm: string;
-    sludgeCnt: number;
-
-    // 12. 하수및분뇨관련산업 (excreta - 기존 13번)
-    excretaCharger: string;
-    excretaCttpc: string;
-    excretaStatusNm: string;
-    excretaCnt: number;
-
-    // 13. 하수도서비스수준 (complaint - 기존 15번)
-    complaintCharger: string;
-    complaintCttpc: string;
-    complaintStatusNm: string;
-    complaintCnt: number;
+    ctpvNm?: string;
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    tabNm?: string;
+    statsCd?: string;
+    submitStatusNm?: string;
+    prvnStatusNm?: string;
+    chargerNm?: string;
+    chargerCttpc?: string;
+    submitStatusCd?: string;
+    prvnStatusCd?: string;
 }
 
 export interface StatsInputStatusReviewResponseData {
-    sewerageSupplyRateList: StatsInputStatusReviewItem[];
+    sewerageInputList: StatsInputStatusReviewItem[];
 }
 
 
@@ -102,6 +27,21 @@ export type StatsInputStatusReviewApiResponse = ApiResponse<StatsInputStatusRevi
 };
 
 
+export interface ReviewHistoryRequest {
+    statsCd: string;
+    statsYr: string;
+    sewerBzmnCd: string;
+}
+
+export interface ReviewHistoryResponse {
+    status: string;
+    message?: string;
+    data: {
+        logDt: string;
+        historyContent: string;
+    }[]
+}
+
 export interface StatsInputStatusReviewService {
     getStatsInputStatusList(params: {
         yr?: string;
@@ -109,4 +49,5 @@ export interface StatsInputStatusReviewService {
         sido?: string;
         gugun?: string;
     }): Promise<StatsInputStatusReviewApiResponse>;
+    getReviewHistory(param: ReviewHistoryRequest): Promise<ReviewHistoryResponse>;
 }
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-input-status-interface.ts b/apps/st/src/entities/statistics/model/statistics-input-status-interface.ts
deleted file mode 100644
index 9eb5e89af..000000000
--- a/apps/st/src/entities/statistics/model/statistics-input-status-interface.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { ApiResponse } from "./statistics-interface";
-
-export interface StatsInputStatusListRequestParams {
-    ctpvNm?: string;
-    sggNm?: string;
-    sewerBzmnCd?: string;
-    statsYr?: string;
-    mode?: string;
-}
-
-export interface StatsInputStatusList {
-    ctpvNm?: string;
-    sggNm?: string;
-    statsCd?: string;
-    menuTabName?: string;
-    locgStatusNm?: string;
-    inputRate?: number;
-    laePicNm?: string;
-    laePicTelNo?: string;
-    laeKbrdrDeptNm?: string;
-    laeKbrdrJbgdNm?: string;
-    laeIdfrNm?: string;
-    laeIdfrDeptNm?: string;
-    laeIdfrJbgdNm?: string;
-    rjctOpnnCn?: string;
-}
-
-export type StatsInputStatusListApiResponse = ApiResponse<StatsInputStatusList[]> & {
-    message: string;
-}
-
-export interface StatisticsInputStatusService {
-    getStatisticsInputStatusList(param: StatsInputStatusListRequestParams): Promise<StatsInputStatusListApiResponse>;
-}
diff --git a/apps/st/src/entities/statistics/model/statistics-interface.ts b/apps/st/src/entities/statistics/model/statistics-interface.ts
index edf5d264c..4b001c8a0 100644
--- a/apps/st/src/entities/statistics/model/statistics-interface.ts
+++ b/apps/st/src/entities/statistics/model/statistics-interface.ts
@@ -21,7 +21,7 @@ export interface cancelSubmitRequest {
     sggNm: string;
     sewerBzmnCd: string;
     statsCd: string;
-    userId: string;
+    mdfrId: string;
 }
 
 export interface cancelSubmitResponse {
@@ -35,8 +35,526 @@ export interface ApiResponse<T> {
     message?: string;
 }
 
+/** 통계 컬럼 가이드(영문 컬럼명·한글명·유형·계산 여부·가이드 문구) 한 행 */
+export interface StatisticsColumnGuideItem {
+    engColNm: string;
+    korColNm: string;
+    colType: string;
+    isCalcCol: string;
+    columnGuide: string;
+}
+
+/** 컬럼 가이드 정보 조회 응답 (`data`: 컬럼 가이드 배열) */
+export type StatisticsColumnGuideListResponse = ApiResponse<StatisticsColumnGuideItem[]>;
+
+/** 통계 입력 관리 등 — 연도·구분·분류(입력/검증)별 입력 기간 한 행 */
+export interface StatsInputPeriodItem {
+    statsYr: string;
+    seCd: number;
+    seType: string;
+    inptBgngYmd: string;
+    inptEndYmd: string;
+}
+
+/** `data`가 `StatsInputPeriodItem[]` 인 조회 응답 */
+export type StatsInputPeriodListApiResponse = ApiResponse<StatsInputPeriodItem[]>;
+
+/** 통계 입력 기간 목록 조회 요청 쿼리 */
+export interface StatsInputPeriodListRequest {
+    statsYr?: string;
+    seType?: string;
+}
+
+export interface StatsInputPeriodDetailRequest {
+    statsYr: string;
+    seType: string;
+    seCd: number;
+}
+
+export interface StatsInputPeriodDetailResponse {
+    status: string;
+    message?: string;
+    data: StatsInputPeriodItem;
+}
+
+/** 통계 입력 기간 등록·수정 등 요청 본문 */
+export interface StatsInputPeriodSaveRequest {
+    statsYr: string;
+    seType: string;
+    seCd?: number;
+    /** 시작일 (백엔드 형식 문자열, 예: YYYYMMDD) */
+    inptBgngYmd: string;
+    /** 종료일 (백엔드 형식 문자열, 예: YYYYMMDD) */
+    inptEndYmd: string;
+    rgtrId: string;
+}
+
+/** 통계 입력 기간 저장 응답 */
+export type StatsInputPeriodSaveApiResponse = ApiResponse<unknown>;
+
+/** 통계 입력 기간 삭제 요청 */
+export interface StatsInputPeriodDeleteRequest {
+    statsYr: string;
+    seType: string;
+    seCd: number;
+    inptBgngYmd: string;
+    inptEndYmd: string;
+    rgtrId: string;
+}
+
+/** 통계 입력 기간 삭제 응답 */
+export type StatsInputPeriodDeleteApiResponse = ApiResponse<unknown>;
+
+/** 하수 입력/보급률 등 조회 `data.statusInfo` 공통 (LAE 제출·담당자 정보) */
+export interface SewerageStatusInfo {
+    laePicNm: string | null;
+    laePicTelNo: string | null;
+    laeKbrdrDeptNm: string | null;
+    laeKbrdrJbgdNm: string | null;
+    laeIdfrNm: string | null;
+    laeIdfrTelNo: string | null;
+    laeIdfrDeptNm: string | null;
+    laeIdfrJbgdNm: string | null;
+    laeSbmsnSttsCd: string | null;
+    laeSbmsnYmd: string | null;
+    rjctOpnnCn: string | null;
+}
+
+export interface ImrRequest {
+    user_id?: string;
+    sewer_bzmn_cd: string;
+    stats_cd: string;
+    stats_yr: string;
+    lae_sbmsn_stts_cd: string;
+    gen_verify_stts_cd?: string;
+}
+
+export interface ImrResponse {
+    anls_sn: number;
+    job_id: string;
+    total_otlr_cnt: number;
+    status_code: string;
+    error_msg: string;
+    processing_time_ms: number;
+    job_prog: number;
+    queue_position: number;
+}
+
+export interface ImrStatusResponse {
+    job_id: string;
+    anls_sn: number;
+    status: string;
+    job_prog: number;
+    total_otlr_cnt: number;
+    total_nml_cnt: number;
+    total_excl_cnt: number;
+    processing_time_ms: number;
+    error_msg: string;
+    queue_position: string;
+}
+
+export interface VerificationResultListRequest {
+    statsYr: string;
+    sewerBzmnCd?: string;
+    ctpvNm?: string;
+    sggNm?: string;
+    statsCd?: string;
+    /** 검증 방법 코드 (예: NV, IMR, HB) */
+    vrfcMthdCd?: string;
+    /** 처리여부 코드 목록, 콤마 구분 (예: 0,2) */
+    prcsYnList?: string;
+    /** 반려상태 코드 목록, 콤마 구분 (예: 0,1,2) */
+    rejectCodeList?: string;
+    /** @deprecated 신규 API에서는 미사용 */
+    pbcpAprvYn?: string;
+    page?: number;
+    size?: number;
+}
+
+/** 검증 결과 리포트 목록 한 행 (`verifyResultList` 원소) */
+export interface VerificationResultReportItem {
+    statsYr: string;
+    statsCd: string;
+    sewerBzmnCd: string;
+    ctpvNm: string;
+    sggNm: string;
+    admdstNm: string;
+    vrfcSn: number;
+    vrfcMthdCd: string;
+    vrfcMthdNm: string;
+    vrfcTrgtNm: string;
+    rsnExpln: string;
+    nowVlCn: string;
+    compVlCn: string | null;
+    prcsYn: string;
+    prcsYnNm: string;
+    prcsOpnnExpln: string | null;
+    stVrfRjtComCd: string;
+    stVrfRjtComNm: string;
+    rjctOpnnCn: string | null;
+    regDt: string;
+    mdfcnDt: string;
+    /** 하위 호환: 일부 API/화면에서만 내려올 수 있음 */
+    statsNm?: string;
+    prcrId?: string | null;
+    pbcpAprvYn?: string;
+    mdfrId?: string | null;
+}
+
+export interface VerificationResultListPageInfo {
+    totalElements: number;
+    totalPages: number;
+    currentPage: number;
+    size: number;
+}
+
+export interface VerificationResultListData {
+    verifyResultList: VerificationResultReportItem[];
+    pageInfo: VerificationResultListPageInfo;
+}
+
+/** 검증 결과 리포트 조회 API 응답 */
+export interface VerificationResultListResponse {
+    status: string;
+    message?: string;
+    data?: VerificationResultListData;
+}
+
+export interface SubmitExceptionRequest {
+    statsYr: string;
+    statsCd: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    userId: string;
+    superAdmin?: string;
+    laePicNm: string;
+    laePicTelNo: string;
+    laeKbrdrDeptNm: string;
+    laeKbrdrJbgdNm: string;
+    laeIdfrNm: string;
+    laeIdfrTelNo: string;
+    laeIdfrDeptNm: string;
+    laeIdfrJbgdNm: string
+}
+
+export interface SubmitExceptionResponse {
+    status: string;
+    message?: string;
+}
+
+export interface StatisticsLog {
+    statsLogSn?: number;
+    menuNm?: string;
+    tabNm?: string;
+    tblNm?: string;
+    statsDataChgComCd?: string;
+    rgtrId?: string;
+    regDt?: string;
+    ctpvNm?: string;
+    sggNm?: string;
+    statsDataChgComNm?: string;
+    statsYr?: string;
+}
+
+export interface StatisticsLogRequest {
+    page: number;
+    size: number;
+    statsCd?: string;
+    startDate?: string;
+    endDate?: string;
+    /** 시도명 */
+    ctpvNm?: string;
+    /** 시군구명 */
+    sggNm?: string;
+    sewerBzmnCd?: string;
+    /** 요청 기능(통계 데이터 변경 공통코드) */
+    statsDataChgComCd?: string;
+}
+
+export interface StatisticsLogResponse {
+    status: string;
+    message?: string;
+    data?: {
+        statsLogList: StatisticsLog[];
+        pageInfo: {
+            totalElements: number;
+            totalPages: number;
+            currentPage: number;
+            size: number;
+        };
+    };
+}
+
+/**
+ * 통계 로그 데이터 상세조회 `data[]` 행.
+ * `rmrk`, `sggNm`, `admdstCd`, `admdstNm`는 공통이고, 그 외 키는 통계/탭에 따라 가변.
+ */
+export interface StatisticsLogDetailRow {
+    rmrk: string;
+    sggNm: string;
+    admdstCd: string;
+    admdstNm: string;
+    [key: string]: string | number | null | undefined;
+}
+
+export interface StatisticsLogDetailResponse {
+    status: string;
+    message?: string;
+    data?: StatisticsLogDetailRow[];
+}
+
+export interface getReviewOpinionDetailRequest {
+    statsYr: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+}
+
+export interface ReviewOpinionDetailItem {
+    statsYr: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    splmntOpnnCn: string | null;
+    wrterOpnnCn: string | null;
+}
+
+export interface getReviewOpinionDetailResponse {
+    status: string;
+    message?: string;
+    data?: ReviewOpinionDetailItem[];
+}
+
+/** 검토의견 저장 API body */
+export interface ReviewOpinionSaveRequest {
+    statsYr: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    splmntOpnnCn: string;
+    wrterOpnnCn: string;
+    mdfrId: string;
+}
+
+export interface ReviewOpinionSaveResponse {
+    status: string;
+    message?: string;
+}
+
+export interface ReviewReturnSaveRequest {
+    type: "REVIEW";
+    statsYr: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    rjctOpnnCn: string;
+    mdfrId: string;
+    vrfcSn?: string;
+}
+
+export interface ReviewReturnSaveResponse {
+    exceptionCnt: number;
+    message: string;
+    resultCode: string;
+    updatedStts: string;
+}
+
+export interface ReviewInputSaveRequest {
+    type: "INPUT";
+    statsYr: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    /** 미입력·빈 문자열이면 요청 body에 포함하지 않음 */
+    rjctOpnnCn?: string;
+    mdfrId: string;
+    vrfcSn?: string;
+}
+
+export interface ReviewSubmitRequest {
+    statsYr: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    mdfrId: string;
+    splmntOpnnCn: string;
+    wrterOpnnCn: string;
+}
+
+export interface ReviewSubmitResponse {
+    status: string;
+    message?: string;
+}
+
+/** 통계 일괄 승인 `/stats/approve` 쿼리 파라미터 `type` */
+export type StatsInputStatusApproveKind = "INPUT" | "REVIEW";
+
+/** 통계 입력 현황 승인 요청 항목 (행 단위) */
+export interface StatsInputStatusApproveItem {
+    statsYr: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    mdfrId: string;
+}
+
+/** 통계 입력 현황 일괄 승인 API 요청 본문 */
+export interface StatsInputStatusApproveBatchRequest {
+    list: StatsInputStatusApproveItem[];
+}
+
+/** 통계 입력 현황 일괄 승인 API 응답 */
+export interface StatsInputStatusApproveResponse {
+    exceptionCnt: number;
+    message: string;
+    resultCode: string;
+    updatedStts: string;
+}
+
+export interface SubmitVerifyExceptionItem {
+    vrfcSn: number;
+    prcsOpnnExpln: string;
+}
+
+export interface SubmitVerifyExceptionRequest {
+    sewerBzmnCd: string;
+    statsYr: string;
+    statsCd: string;
+    userId: string;
+    exceptionList: SubmitVerifyExceptionItem[];
+}
+
+export interface SubmitVerifyExceptionResponse {
+    status: string;
+    message?: string;
+}
+
+export interface ReviewerInfoRequest {
+    sewerBzmnCd: string;
+    statsYr: string;
+    statsCd: string;
+    instSeCd : string;
+}
+
+export interface ReviewerInfoResponse {
+    status: string;
+    data: {
+        userNm: string;
+        telOffrm: string;
+        dpmNm: string;
+        cps: string;
+        splmntOpnnCn: string;
+        wrterOpnnCn: string;
+    }
+}
+
+export interface StatiscicsManagementReviewHistoryRequest {
+    statsYr: string;
+    sewerBzmnCd?: string;
+    ctpvNm?: string;
+    statsCd?: string;
+}
+
+/** 통계관리 검토 이력 조회 API `data` 배열 요소 */
+export interface StatiscicsManagementReviewHistoryItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    menuNm: string;
+    wrterOpinionSm: string | null;
+    chckerOpinionSm: string | null;
+    returnOpinionSm: string | null;
+}
+
+export interface StatiscicsManagementReviewHistoryResponse {
+    status: string;
+    message?: string;
+    data: StatiscicsManagementReviewHistoryItem[];
+}
+
+export interface StatiscicsExceptionResetRequest {
+    statsYr: string;
+    sewerBzmnCd: string;
+    statsCd: string;
+    mdfrId: string,
+    vrfcSnList: number[]
+}
+
+export interface StatiscicsExceptionResetResponse {
+    status: string;
+    message?: string;
+}
+
+export interface CheckStatusCodeRequest {
+    statsCd: string;
+    statsYr: string;
+    sewerBzmnCd: string;
+}
+
+export interface CheckStatusCodeResponse {
+    status: string;
+    data: string;
+}
+
+export interface unSubmitDataRequest {
+    statsYr: string;
+    dtlInstCd: string;
+    enoCd: string;
+    laeSeCd: string;
+    sewerBzmnCd?: string;
+    sido: string;
+    sggNm: string;
+    unSubmitOnly: boolean;
+}
+
+export interface UnSubmitDataStatusItem {
+    sidoSggNm: string;
+    statsCd: string;
+    statsNm: string;
+    sbmsnYn: string;
+    statusCd: string;
+    statusNm: string;
+}
+
+export interface UnSubmitData {
+    statsYr: string;
+    totalCount: number;
+    submittedCount: number;
+    unSubmittedCount: number;
+    statusList: UnSubmitDataStatusItem[];
+}
+
+export interface unSubmitDataResponse {
+    status: string;
+    message?: string;
+    data: UnSubmitData;
+}
+
 export interface StatisticsService {
-    getSidoList(): Promise<ApiResponse<SearchCondition>>;
-    getSggList(sidoName: string): Promise<ApiResponse<Sgg[]>>;
+    getSidoList(params?: { instSeCd?: string }): Promise<ApiResponse<SearchCondition>>;
+    getSggList(sidoName: string, params?: { instSeCd?: string; gugunSkipYn?: "Y" | "N" }): Promise<ApiResponse<Sgg[]>>;
+    getSggAllList(sidoName: string, params?: { instSeCd?: string; gugunSkipYn?: "Y" | "N" }): Promise<ApiResponse<Sgg[]>>;
+    getStatsInputPeriodList(params?: StatsInputPeriodListRequest): Promise<StatsInputPeriodListApiResponse>;
+    getStatsInputPeriodDetail(param: StatsInputPeriodDetailRequest): Promise<StatsInputPeriodDetailResponse>;
+    saveStatsInputPeriod(param: StatsInputPeriodSaveRequest): Promise<StatsInputPeriodSaveApiResponse>;
+    deleteStatsInputPeriod(param: StatsInputPeriodDeleteRequest): Promise<StatsInputPeriodDeleteApiResponse>;
     cancelSubmit(param: cancelSubmitRequest): Promise<cancelSubmitResponse>;
+    callImrService(param: ImrRequest): Promise<ImrResponse>;
+    submitException(param: SubmitExceptionRequest): Promise<SubmitExceptionResponse>;
+    getLogList(param: StatisticsLogRequest): Promise<StatisticsLogResponse>;
+    getLogDetail(param: string): Promise<StatisticsLogDetailResponse>;
+    saveReviewOpinion(param: ReviewOpinionSaveRequest): Promise<ReviewOpinionSaveResponse>;
+    getReviewOpinionDetail(param: getReviewOpinionDetailRequest): Promise<getReviewOpinionDetailResponse>;
+    saveReviewReturn(param: ReviewReturnSaveRequest): Promise<ReviewReturnSaveResponse>;
+    saveInputReturn(items: ReviewInputSaveRequest[]): Promise<ReviewReturnSaveResponse>;
+    approveStatsInputStatus(
+        param: StatsInputStatusApproveBatchRequest,
+        type?: StatsInputStatusApproveKind,
+    ): Promise<StatsInputStatusApproveResponse>;
+    submitReview(param: ReviewSubmitRequest): Promise<ReviewSubmitResponse>;
+    getVerificationResultList(param: VerificationResultListRequest): Promise<VerificationResultListResponse>;
+    getImrStatus(param: string): Promise<ImrStatusResponse>;
+    SubmitVerifyException(param: SubmitVerifyExceptionRequest): Promise<SubmitVerifyExceptionResponse>;
+    getColumnGuides(param: string): Promise<StatisticsColumnGuideListResponse>;
+    getReviewerInfo(param: ReviewerInfoRequest): Promise<ReviewerInfoResponse>;
+    getStatiscicsManagementReviewHistory(param: StatiscicsManagementReviewHistoryRequest): Promise<StatiscicsManagementReviewHistoryResponse>;
+    StatiscicsExceptionReset(param: StatiscicsExceptionResetRequest): Promise<StatiscicsExceptionResetResponse>;
+    CheckStatusCode(param: CheckStatusCodeRequest): Promise<CheckStatusCodeResponse>;
+    getUnSubmitData(param: unSubmitDataRequest): Promise<unSubmitDataResponse>;
 }
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-public-sewage-facility-review-interface.ts b/apps/st/src/entities/statistics/model/statistics-public-sewage-facility-review-interface.ts
new file mode 100644
index 000000000..9f2605673
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-public-sewage-facility-review-interface.ts
@@ -0,0 +1,92 @@
+import type { ApiResponse } from "./statistics-interface";
+import type { StatsStatusInfo } from "./statistics-sewage-pipe-review-interface";
+
+export interface PublicSewageFacilityReviewItem {
+    ctpvNm: string;
+    sggNm: string;
+    statsYr: string;
+    admdstCd: string;
+    admdstNm: string;
+    swtrmtFcltNm: string;
+    displayYear: string;
+    rowType: "OLD" | "CURR";
+    fcltPstnCn: string | null;
+    prcsFcltCpct: number;
+    prcsFcltPhysCpct: number;
+    prcsFcltBoilCpct: number;
+    prcsFcltAltdCpct: number;
+    inflwSwageQnt: number;
+    inflwSwagePhysQnt: number;
+    inflwSwageBoilQnt: number;
+    inflwSwageAltdQnt: number;
+    prcsQnt: number;
+    prcsPhysCpct: number;
+    prcsBoilCpct: number;
+    prcsAltdCpct: number;
+    inflwBodVl: number;
+    dschgBodVl: number;
+    inflwTocQnt: number;
+    dschgTocQnt: number;
+    inflwSsQnt: number;
+    dschgSsQnt: number;
+    inflwTnVl: number;
+    dschgTnVl: number;
+    inflwTpVl: number;
+    dschgTpVl: number;
+    inflwGrssClfgVl: number;
+    dschgGrssClfgVl: number;
+    prcsRt: number;
+    prcsLodQnt: number;
+    prcsMthdExpln: string | null;
+    wholHmnQnt: number;
+    wholLvstQnt: number;
+    wholEfntQnt: number;
+    wholEtcQnt: number;
+    telNo: string | null;
+    cmptnStrtYmd: string | null;
+    oprtngStrtYmd: string | null;
+    wholBizVl: number;
+    eflntDsnfMthdExpln: string | null;
+    wtsysNm: string | null;
+    trbtrNm: string | null;
+    dtlUnitZoneCn: string | null;
+    rgnSeNm: string | null;
+    msirbCn: string | null;
+    goalWqNo: string | null;
+    engySrlneRt: number;
+    engyItslfPrdctnQnt: number;
+    anlEngyWholUseQnt: number;
+    anlElpwrUseQnt: number;
+    itslfEngyUseQnt: number;
+    swtrmtEmsnQnt: number;
+    operMnbdCn: string | null;
+    prxyBzentyNmCn: string | null;
+    cnsgnCstVl: number;
+    prxyCtrtCn: string | null;
+    intgPrcsFcltCn: string | null;
+    wholNope: number;
+    sftyAcdntEvntcsCnt: number;
+    rmrk: string | null;
+}
+
+export interface PublicSewageFacilityReviewResponseData {
+    publicSewageList: PublicSewageFacilityReviewItem[];
+    statsStatusInfo: StatsStatusInfo;
+}
+
+export interface PublicSewageFacilityReviewRequestParams {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    sewerBzmnCd?: string;
+    swtrmtFcltNm?: string;
+}
+
+export type PublicSewageFacilityReviewApiResponse =
+    ApiResponse<PublicSewageFacilityReviewResponseData>;
+
+export interface PublicSewageFacilityReviewService {
+    getPublicSewageFacilityReviewList(
+        params: PublicSewageFacilityReviewRequestParams,
+    ): Promise<PublicSewageFacilityReviewApiResponse>;
+}
diff --git a/apps/st/src/entities/statistics/model/statistics-sewage-pipe-mtc-review-interface.ts b/apps/st/src/entities/statistics/model/statistics-sewage-pipe-mtc-review-interface.ts
index 330403c73..29202d9c8 100644
--- a/apps/st/src/entities/statistics/model/statistics-sewage-pipe-mtc-review-interface.ts
+++ b/apps/st/src/entities/statistics/model/statistics-sewage-pipe-mtc-review-interface.ts
@@ -32,7 +32,8 @@ export interface SewerPipeMtcItem {
 }
 
 export interface SewerPipeMtcResponseData {
-    mtcStatusList: SewerPipeMtcItem[];
+    sewerPipeMtcList: SewerPipeMtcItem[];
+    statsStatusInfo: StatsStatusInfo;
 }
 
 export interface SewerPipeMtcRequestParams {
@@ -96,7 +97,8 @@ export interface SewerPipeDrdgItem {
 
 
 export interface SewerPipeDrdgResponseData {
-    drdgStatusList: SewerPipeDrdgItem[];
+    sewerPipeDrdgList: SewerPipeDrdgItem[];
+    statsStatusInfo: StatsStatusInfo;
 }
 
 
@@ -104,4 +106,13 @@ export type SewerPipeDrdgApiResponse = ApiResponse<SewerPipeDrdgResponseData>;
 
 export interface SewagePipeMtcService {
     getSewerPipeMtcDrdgItem(params: SewerPipeMtcRequestParams): Promise<SewerPipeDrdgApiResponse>;
+}
+
+export interface StatsStatusInfo {
+    statsCd?: string;
+    submitStatusCd?: string;
+    prvnStatusCd?: string;
+    rjctOpnnCn?: string;
+    splmntOpnnCn?: string;
+    wrterOpnnCn?: string;
 }
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-sewage-pipe-review-interface.ts b/apps/st/src/entities/statistics/model/statistics-sewage-pipe-review-interface.ts
index 6ffa91466..7347aa24c 100644
--- a/apps/st/src/entities/statistics/model/statistics-sewage-pipe-review-interface.ts
+++ b/apps/st/src/entities/statistics/model/statistics-sewage-pipe-review-interface.ts
@@ -63,7 +63,8 @@ export interface SewagePipeReviewrRegionalItem {
 }
 
 export interface SewagePipeReviewResponseData {
-    sewagePipeList: SewagePipeReviewrRegionalItem[];
+    regionalStatusList: SewagePipeReviewrRegionalItem[];
+    statsStatusInfo: StatsStatusInfo;
 }
 
 export interface SewagePipeReviewRequestParams {
@@ -73,7 +74,7 @@ export interface SewagePipeReviewRequestParams {
     sewerBzmnCd?: string;         
 }
 
-export type SewagePipeReviewRegionalApiResponse = ApiResponse<SewagePipeReviewrRegionalItem[]> & {
+export type SewagePipeReviewRegionalApiResponse = ApiResponse<SewagePipeReviewResponseData> & {
     message: string;
 };
 
@@ -132,10 +133,10 @@ export interface SewagePipeReviewFacilityItem {
 
 
 export interface SewagePipeFacilityResponseData {
-    facilityPipeList: SewagePipeReviewFacilityItem[];
+    facilityStatusList: SewagePipeReviewFacilityItem[];
+    statsStatusInfo: StatsStatusInfo;
 }
 
-
 export type SewagePipeFacilityApiResponse = ApiResponse<SewagePipeFacilityResponseData> & {
     message: string;
 };
@@ -170,14 +171,15 @@ export interface SewerPipeTypeItem {
 
 
 export interface SewerPipeTypeResponseData {
-    pipeTypeStatusList: SewerPipeTypeItem[];
+    pipeTypeList: SewerPipeTypeItem[];
+    statsStatusInfo: StatsStatusInfo;
 }
 
-export type SewerPipeTypeApiResponse = ApiResponse<SewerPipeTypeItem[]>;
+export type SewerPipeTypeApiResponse = ApiResponse<SewerPipeTypeResponseData>;
 
 export interface SewagePipeTypeService {
 
-    getSewagePipeTypeList(params: SewagePipeReviewRequestParams): Promise<SewagePipeFacilityApiResponse>;
+    getSewagePipeTypeList(params: SewagePipeReviewRequestParams): Promise<SewerPipeTypeApiResponse>;
 }
 
 /**
@@ -231,13 +233,134 @@ export interface SewerPipeDiamItem {
 
 
 export interface SewerPipeDiamResponseData {
-    pipeDiamStatusList: SewerPipeDiamItem[];
+    pipeDiamList: SewerPipeDiamItem[];
+    statsStatusInfo: StatsStatusInfo;
 }
 
-
 export type SewerPipeDiamApiResponse = ApiResponse<SewerPipeDiamResponseData>;
 
 
 export interface SewagePipeDiamService {
-    getSewagePipeDiamList(params: SewagePipeReviewRequestParams): Promise<SewagePipeFacilityApiResponse>;
+    getSewagePipeDiamList(params: SewagePipeReviewRequestParams): Promise<SewerPipeDiamApiResponse>;
+}
+
+/**
+ * 02. 하수관로 맨홀 현황 아이템 (Tab 5)
+ */
+export interface SewagePipeReviewManholeItem {
+    ctpvNm: string;
+    sggNm: string;
+    admdstNm: string;
+    admdstCd: string;
+    statsYr: string;
+    displayYear: string;
+    rowType: 'OLD' | 'CURR';
+    emphsMngSeCd: string;
+    emphsMngSeNm?: string;
+
+    yy14WholMnhlCnt: number;
+    yy14Step1MnhlCnt: number;
+    yy14Step2MnhlCnt: number;
+    yy14Step3MnhlCnt: number;
+    yy14Step4MnhlCnt: number;
+    yy14Step5MnhlCnt: number;
+
+    yy15WholMnhlCnt: number;
+    yy15Step1MnhlCnt: number;
+    yy15Step2MnhlCnt: number;
+    yy15Step3MnhlCnt: number;
+    yy15Step4MnhlCnt: number;
+    yy15Step5MnhlCnt: number;
+
+    yy16WholMnhlCnt: number;
+    yy16Step1MnhlCnt: number;
+    yy16Step2MnhlCnt: number;
+    yy16Step3MnhlCnt: number;
+    yy16Step4MnhlCnt: number;
+    yy16Step5MnhlCnt: number;
+
+    yy17WholMnhlCnt: number;
+    yy17Step1MnhlCnt: number;
+    yy17Step2MnhlCnt: number;
+    yy17Step3MnhlCnt: number;
+    yy17Step4MnhlCnt: number;
+    yy17Step5MnhlCnt: number;
+
+    yy18WholMnhlCnt: number;
+    yy18Step1MnhlCnt: number;
+    yy18Step2MnhlCnt: number;
+    yy18Step3MnhlCnt: number;
+    yy18Step4MnhlCnt: number;
+    yy18Step5MnhlCnt: number;
+
+    yy19WholMnhlCnt: number;
+    yy19Step1MnhlCnt: number;
+    yy19Step2MnhlCnt: number;
+    yy19Step3MnhlCnt: number;
+    yy19Step4MnhlCnt: number;
+    yy19Step5MnhlCnt: number;
+
+    yy20WholMnhlCnt: number;
+    yy20Step1MnhlCnt: number;
+    yy20Step2MnhlCnt: number;
+    yy20Step3MnhlCnt: number;
+    yy20Step4MnhlCnt: number;
+    yy20Step5MnhlCnt: number;
+
+    yy21WholMnhlCnt: number;
+    yy21Step1MnhlCnt: number;
+    yy21Step2MnhlCnt: number;
+    yy21Step3MnhlCnt: number;
+    yy21Step4MnhlCnt: number;
+    yy21Step5MnhlCnt: number;
+
+    yy22WholMnhlCnt: number;
+    yy22Step1MnhlCnt: number;
+    yy22Step2MnhlCnt: number;
+    yy22Step3MnhlCnt: number;
+    yy22Step4MnhlCnt: number;
+    yy22Step5MnhlCnt: number;
+
+    yy23WholMnhlCnt: number;
+    yy23Step1MnhlCnt: number;
+    yy23Step2MnhlCnt: number;
+    yy23Step3MnhlCnt: number;
+    yy23Step4MnhlCnt: number;
+    yy23Step5MnhlCnt: number;
+
+    yy24WholMnhlCnt: number;
+    yy24Step1MnhlCnt: number;
+    yy24Step2MnhlCnt: number;
+    yy24Step3MnhlCnt: number;
+    yy24Step4MnhlCnt: number;
+    yy24Step5MnhlCnt: number;
+
+    yy25WholMnhlCnt: number;
+    yy25Step1MnhlCnt: number;
+    yy25Step2MnhlCnt: number;
+    yy25Step3MnhlCnt: number;
+    yy25Step4MnhlCnt: number;
+    yy25Step5MnhlCnt: number;
+
+    rmrk: string | null;
+}
+
+export interface SewagePipeManholeResponseData {
+    manholeList: SewagePipeReviewManholeItem[];
+    statsStatusInfo: StatsStatusInfo;
+}
+
+export type SewagePipeManholeApiResponse = ApiResponse<SewagePipeManholeResponseData>;
+
+export interface SewagePipeManholeService {
+    getSewagePipeManholeList(params: SewagePipeReviewRequestParams): Promise<SewagePipeManholeApiResponse>;
+}
+
+export interface StatsStatusInfo {
+    statsCd?: string;
+    submitStatusCd?: string;
+    prvnStatusCd?: string;
+    rjctOpnnCn?: string;
+    splmntOpnnCn?: string;
+    wrterOpnnCn?: string;
 }
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-sewerage-penetration-review-interface.ts b/apps/st/src/entities/statistics/model/statistics-sewerage-penetration-review-interface.ts
index 9c4d0ac1e..6ca835c5c 100644
--- a/apps/st/src/entities/statistics/model/statistics-sewerage-penetration-review-interface.ts
+++ b/apps/st/src/entities/statistics/model/statistics-sewerage-penetration-review-interface.ts
@@ -2,59 +2,70 @@ import type { ApiResponse } from "./statistics-interface";
 
 // 검토 01.하수도 보급률 데이터 항목
 export interface SewerageSupplyRateReviewItem {
-ctpvNm: string;               
-    sggNm: string;                
-    statsYr: string;              
-    admdstNm: string;             
-    admdstCd: string;             
-    displayYear: string;          
-    rowType: 'OLD' | 'CURR';      
+    ctpvNm: string;
+    sggNm: string;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    displayYear: string;
+    rowType: 'OLD' | 'CURR';
 
-    lgbsn: string;                
-    mdbsn: string;                
-    mdmbsn: string;               
-    rvbsn: string | null;   
-    trbtrNm: string | null;       
-    spcCtpnRgnCn: string | null;  
+    lgbsn: string;
+    mdbsn: string;
+    mdmbsn: string;
+    rvbsn: string | null;
+    trbtrNm: string | null;
+    spcCtpnRgnCn: string | null;
 
-    wholPpltnCnt: number;         
-    wholArea: number;             
+    wholPpltnCnt: number;
+    wholArea: number;
 
-    wholSwtrmtPpltnCnt: number;      
-    wholPblSwtrmtPpltnCnt: number;   
-    ts1SwtrmtPpltnCnt: number;       
-    ts2SwtrmtPpltnCnt: number;       
-    ts3SwtrmtPpltnCnt: number;       
-    
-    wholWwtPrcsPpltnCnt: number;     
-    ts1WwtPrcsPpltnCnt: number | null; 
-    ts2WwtPrcsPpltnCnt: number | null; 
-    ts3WwtPrcsPpltnCnt: number | null; 
-    
-    yetCntnPpltnCnt: number;         
-    staaArea: number;                
+    wholSwtrmtPpltnCnt: number;
+    wholPblSwtrmtPpltnCnt: number;
+    ts1SwtrmtPpltnCnt: number;
+    ts2SwtrmtPpltnCnt: number;
+    ts3SwtrmtPpltnCnt: number;
 
-    wholStaaExcpPpltnCnt: number;    
-    unprcsPpltnCnt: number | null;   
-    drtwPrcsPpltnCnt: number | null; 
-    spctnkPpltnCnt: number | null;   
-    staaExcpArea: number;            
+    wholWwtPrcsPpltnCnt: number;
+    ts1WwtPrcsPpltnCnt: number | null;
+    ts2WwtPrcsPpltnCnt: number | null;
+    ts3WwtPrcsPpltnCnt: number | null;
 
-    staaPsplyRt: number;             
-    altdPrcsPsplyRt: number;         
-    sewerInstlRt: number;            
+    yetCntnPpltnCnt: number;
+    staaArea: number;
+
+    wholStaaExcpPpltnCnt: number;
+    unprcsPpltnCnt: number | null;
+    drtwPrcsPpltnCnt: number | null;
+    spctnkPpltnCnt: number | null;
+    staaExcpArea: number;
+
+    staaPsplyRt: number;
+    altdPrcsPsplyRt: number;
+    sewerInstlRt: number;
     rmrk: string | null;
 }
 
 export interface SewerageSupplyRateReviewRequestParams {
-    ctpvNm?: string;      
-    sggNm?: string;       
-    statsYr?: string;     
-    sewerBzmnCd?: string; 
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    sewerBzmnCd?: string;
+}
+
+export interface statsStatusInfo {
+    statsCd?: string;
+    submitStatusCd?: string;
+    prvnStatusCd?: string;
+    rjctOpnnCn?: string;
+    splmntOpnnCn?: string;
+    wrterOpnnCn?: string;
 }
 
 export interface SewerageSupplyRateReviewResponseData {
     sewerageSupplyRateList: SewerageSupplyRateReviewItem[];
+    statsStatusInfo: statsStatusInfo;
+    
 }
 
 export type SewerageSupplyRateReviewApiResponse = ApiResponse<SewerageSupplyRateReviewResponseData> & {
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-excreta-treatment-total-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-excreta-treatment-total-interface.ts
new file mode 100644
index 000000000..dc9446b32
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-excreta-treatment-total-interface.ts
@@ -0,0 +1,62 @@
+/** 07. 분뇨처리시설 현황 검색 조건 파라미터 DTO */
+export interface ExcretaTreatmentMaintainTotalRequest {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    swtrmtFcltNm?: string;
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+/** 분뇨처리시설 목록 데이터 행 구조 */
+export interface ExcretaTreatmentStatusTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    fcltNm: string;
+    rowType: string;
+    fcltPstnCn: string;
+    telNo: string;
+    cmptnStrtYmd: string;
+    oprtngStrtYmd: string;
+    wholPjtcoAmt: number;
+    prcsFcltCpct: number;
+    cpct: number;
+    oprtngDayCnt: number;
+    prcsMthdExpln: string;
+    linkTmplntCn: string;
+    linkPrcsQnt: number;
+    // 유입수질
+    inflwBodWqVl: number;
+    inflwTocWqVl: number;
+    inflwSsWqVl: number;
+    inflwTnWqVl: number;
+    inflwTpWqVl: number;
+    inflwClfgCnt: number;
+    // 방류수질
+    dschgBodWqVl: number;
+    dschgTocWqVl: number;
+    dschgSsWqVl: number;
+    dschgTnWqVl: number;
+    dschgTpWqVl: number;
+    dschgClfgCnt: number;
+    // 방류수역 및 기타 정보
+    wtsysNm: string;
+    trbtrNm: string;
+    msirbCn: string;
+    ssirbCn: string;
+    operMthdCdCn: string;
+    wholNope: number;
+    sftyAcdntEvntcsCnt: number;
+}
+
+/** 분뇨처리시설 API 응답 인터페이스 */
+export interface ExcretaTreatmentStatusTotalResponse {
+    status: string;
+    message?: string;
+    data: ExcretaTreatmentStatusTotalItem[];
+}
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-mediation-pump-total-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-mediation-pump-total-interface.ts
new file mode 100644
index 000000000..32c6cb5d3
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-mediation-pump-total-interface.ts
@@ -0,0 +1,67 @@
+/** 05. 중계펌프장 현황 검색 조건 파라미터 */
+export interface MediationPumpMaintainTotalRequest {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    pumpstNm?: string;
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+/** 중계펌프장 현황 목록 데이터 단위 */
+export interface MediationPumpStatusTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    fcltNm: string;
+    pumpSeNm: string;
+    swtrmtFcltNm: string;
+    fcltPstnCn: string;
+    oprtngStrtYmd: string;
+    planMltvArea: number;
+    sndyArea: number;
+    rainArea: number;
+    exlnQnt: number;
+    // 오수펌프
+    drtwPumpGrssPpqty: number;
+    drtwPumpN1DmtrArea: number;
+    drtwPumpN1Ppqty: number;
+    drtwPumpN1Cnt: number;
+    drtwPumpN1RsrvCnt: number;
+    drtwPumpN2DmtrArea: number;
+    drtwPumpN2Ppqty: number;
+    drtwPumpN2Cnt: number;
+    drtwPumpN2RsrvCnt: number;
+    drtwPumpN3DmtrArea: number;
+    drtwPumpN3Ppqty: number;
+    drtwPumpN3Cnt: number;
+    drtwPumpN3RsrvCnt: number;
+    // 우수펌프
+    exlnPumpGrssPpqty: number;
+    exlnPumpN1DmtrArea: number;
+    exlnPumpN1Ppqty: number;
+    exlnPumpN1Cnt: number;
+    exlnPumpN1RsrvCnt: number;
+    exlnPumpN2DmtrArea: number;
+    exlnPumpN2Ppqty: number;
+    exlnPumpN2Cnt: number;
+    exlnPumpN2RsrvCnt: number;
+    exlnPumpN3DmtrArea: number;
+    exlnPumpN3Ppqty: number;
+    exlnPumpN3Cnt: number;
+    exlnPumpN3RsrvCnt: number;
+    // 전력
+    anlElpwrUseQnt: number;
+}
+
+/** 중계펌프장 API 최종 응답 규격 */
+export interface MediationPumpStatusTotalResponse {
+    status: string;
+    message?: string;
+    data: MediationPumpStatusTotalItem[];
+}
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-private-sewage-total-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-private-sewage-total-interface.ts
new file mode 100644
index 000000000..43c4f4c9a
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-private-sewage-total-interface.ts
@@ -0,0 +1,109 @@
+/** 08. 개인하수처리시설 공통 요청 검색 파라미터 */
+export interface PrivateSewageFacilitySummaryRequest {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    swtrmtFcltNm?: string; // Controller 수신 규격
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+/** [Tab1] 오수처리시설 목록 항목 */
+export interface PrivateSewageTab1StatusItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstCd: string;
+    admdstNm: string;
+    sewerBzmnCd: string;
+    rowType: string;
+    wholDrtwPrcsFcltCnt: number;
+    // 하수처리구역 내
+    wholStaaCnt: number;
+    step1StaaPrcsQnt: number;
+    step2StaaPrcsQnt: number;
+    step3StaaPrcsQnt: number;
+    step4StaaPrcsQnt: number;
+    step5StaaPrcsQnt: number;
+    step6StaaPrcsQnt: number;
+    step7StaaPrcsQnt: number;
+    // 하수처리구역 외
+    staaExcpWhol: number;
+    step1StaaExcpPrcsQnt: number;
+    step2StaaExcpPrcsQnt: number;
+    step3StaaExcpPrcsQnt: number;
+    step4StaaExcpPrcsQnt: number;
+    step5StaaExcpPrcsQnt: number;
+    step6StaaExcpPrcsQnt: number;
+    step7StaaExcpPrcsQnt: number;
+}
+
+/** [Tab2] 정화조 현황 목록 항목 */
+export interface PrivateSewageTab2StatusItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstCd: string;
+    admdstNm: string;
+    sewerBzmnCd: string;
+    rowType: string;
+    grssFcltCnt: number;
+    // 하수처리구역 내
+    staaInsdWhol: number;
+    staaInsdSttkNprsflCnt: number;
+    step1StaaInsdSttkFrcCnt: number;
+    staaInsdSprktpFltrtbCnt: number;
+    staaInsdAertMthdCnt: number;
+    staaInsdCntcAertCnt: number;
+    staaInsdEtcCnt: number;
+    staaInsdPrcsCpctByWhol: number;
+    step1StaaInsdNope: number;
+    step2StaaInsdNope: number;
+    step3StaaInsdNope: number;
+    step4StaaInsdNope: number;
+    step5StaaInsdNope: number;
+    step6StaaInsdNope: number;
+    step7StaaInsdNope: number;
+    step8StaaInsdNope: number;
+    // 하수처리구역 외
+    staaExcpWhol: number;
+    staaExcpSttkNprsflCnt: number;
+    step1StaaExcpSttkFrcCnt: number;
+    staaExcpSprktpFltrtbCnt: number;
+    staaExcpAertMthdCnt: number;
+    staaExcpCntcAertCnt: number;
+    staaExcpEtcCnt: number;
+    staaExcpPrcsCpctByWhol: number;
+    step1StaaExcpNope: number;
+    step2StaaExcpNope: number;
+    step3StaaExcpNope: number;
+    step4StaaExcpNope: number;
+    step5StaaExcpNope: number;
+    step6StaaExcpNope: number;
+    step7StaaExcpNope: number;
+    step8StaaExcpNope: number;
+}
+
+/** [Tab3] 개인하수도 관리지역 지정공고 현황 목록 항목 */
+export interface PrivateSewageTab3StatusItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstCd: string;
+    admdstNm: string;
+    sewerBzmnCd: string;
+    rowType: string;
+    indvSwagePbancRgnCnt: number;
+    indvSwageDsgnScpLen: number;
+    spctnkGrssFcltCnt: number;
+    spctnkQnt: number;
+    drtwPrcsFcltGrssFcltCnt: number;
+    drtwPrcsFcltQnt: number;
+}
+
+/** 3개 탭 개별 API 응답 규격 정의 */
+export interface PrivateSewageTab1Response { status: string; message?: string; data: PrivateSewageTab1StatusItem[]; }
+export interface PrivateSewageTab2Response { status: string; message?: string; data: PrivateSewageTab2StatusItem[]; }
+export interface PrivateSewageTab3Response { status: string; message?: string; data: PrivateSewageTab3StatusItem[]; }
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-service-level-total-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-service-level-total-interface.ts
new file mode 100644
index 000000000..95a408ca4
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-service-level-total-interface.ts
@@ -0,0 +1,60 @@
+export interface SewerageServiceLevelRequest {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+export interface SewageComplaintSummaryItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    swtrmtPpltnCnt: number;
+    whol: number;
+    odorCnt: number;
+    swagePplCnt: number;
+    dschgWqCnt: number;
+    ldsCnt: number;
+    plltnAcdntCnt: number;
+    sewerCrgAmt: number;
+    etcCnt: number;
+    crtrPpltnCvlcptEvntcsCnt: number;
+}
+
+export interface SewerageServiceLevelComplaintResponse {
+    status: string;
+    message?: string;
+    data: SewageComplaintSummaryItem[];
+}
+
+export interface SewerageServiceLevelResidentFriendlyFactTotalItem {
+   statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    swtrmtFcltNm: string;
+    tmplntArea: number;
+    whol: number;
+    brkFcltArea: number;
+    childFrshpSpacArea: number;
+    bdySportsFcltArea: number;
+    sportsFcltArea: number;
+    pkltArea: number;
+    eduMultiFcltArea: number;
+    wtlndMakeArea: number;
+    etcCnt: number;
+}
+
+export interface SewerageServiceLevelResidentFriendlyFactResponse {
+    status: string;
+    message?: string;
+    data: SewerageServiceLevelResidentFriendlyFactTotalItem[];
+}
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-pipe-maintain-total-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-pipe-maintain-total-interface.ts
new file mode 100644
index 000000000..ca2c79b14
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-pipe-maintain-total-interface.ts
@@ -0,0 +1,79 @@
+export interface SewagePipeMaintainTotalRequest {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+export interface SewagePipeMaintainRepairTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    rowType: string;
+    sewerBzmnCd: string | null;
+    admdstNm: string;
+    mendngWhol: number;
+    cbsysMendngPrlg: number;
+    sprsysDrtwPrlg: number;
+    sprsysExlnPrlg: number;
+    partMendngWhol: number;
+    cbsysPartMendngPrlg: number;
+    sprsysDrtwMendngPrlg: number;
+    sprsysExlnMendngPrlg: number;
+    cbsysMnhlCnt: number;
+    sprsysDrtwMnhlCnt: number;
+    sprsysExlnMnhlCnt: number;
+    drtwRcvprpCnt: number;
+    exlnRcvprpCnt: number;
+    stofcbrCnt: number;
+    otflCnt: number;
+    cctvExmnPrlg: number;
+    rmrk: string | null;
+}
+
+export interface SewagePipeMaintainRepairTotalResponse {
+    status: string;
+    message?: string;
+    data: SewagePipeMaintainRepairTotalItem[];
+}
+
+/** `GET .../sewer-pipe-mtc/dredging` 목록 항목 */
+export interface SewagePipeMaintainDredgingTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    admdstNm: string;
+    admdstCd: string;
+    statsYr: string;
+    rowType: string;
+    sewerBzmnCd: string | null;
+    wholFcltPrlg: number;
+    wholSwagePpl: number;
+    cbsysPplPrlg: number;
+    sprsysDrtwPrlg: number;
+    sprsysExlnPrlg: number;
+    mnhlCnt: number;
+    exlnDrtwRcvprpCnt: number;
+    stofcbrOtflCnt: number;
+    drdgnPlanPrlg: number;
+    drdgnTrgtCtrsDrdgnRt: number;
+    wholPrlgCtrsDrdgnRt: number;
+    drdgnAmt: number;
+    drdgnQnt: number;
+    drdgnUntprcAmt: number;
+    wholDrdgnPrcsQnt: number;
+    rclmQnt: number;
+    oceanEmsnQnt: number;
+    rcycQnt: number;
+    etcQnt: number;
+    rmrk: string | null;
+}
+
+/** `GET .../sewer-pipe-mtc/dredging` 응답 */
+export interface SewagePipeMaintainDredgingTotalResponse {
+    status: string;
+    message?: string;
+    data: SewagePipeMaintainDredgingTotalItem[];
+}
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-pipe-total-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-pipe-total-interface.ts
new file mode 100644
index 000000000..053a5497d
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-pipe-total-interface.ts
@@ -0,0 +1,288 @@
+export interface SewagePipeTotalRequest {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+export interface SewagePipeTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    admdstNm: string;
+    admdstCd: string;
+    statsYr: string;
+    rowType: string;
+    goalYr: string;
+    wholPplMtncPlanPrlg: number;
+    wholPlanPrlg: number;
+    wholFcltPrlg: number;
+    swagePplPsplyRt: number;
+    cbsysPplMtncPlanArea: number;
+    cbsysPplMtncPlanPrlg: number;
+    cbsysPlanPrlg: number;
+    cbsysFcltPrlg: number;
+    cbsysSqrePrlg: number;
+    cbsysCiclPrlg: number;
+    cbsysOpnPrlg: number;
+    cbsysGttrPrlg: number;
+    drtwPplMtncPlanArea: number;
+    drtwPplMtncPlanPrlg: number;
+    drtwPplPlanPrlg: number;
+    drtwPplFcltPrlg: number;
+    drtwPplSqrePrlg: number;
+    drtwPplCiclPrlg: number;
+    exlnPplMtncPlanArea: number;
+    exlnPplMtncPlanPrlg: number;
+    exlnPplPlanPrlg: number;
+    exlnPplFcltPrlg: number;
+    exlnPplSqrePrlg: number;
+    exlnPplCiclPrlg: number;
+    exlnPplOpnPrlg: number;
+    exlnPplGttrPrlg: number;
+    cbsysMnhlCnt: number;
+    sprsysDrtwMnhlCnt: number;
+    sprsysExlnMnhlCnt: number;
+    drtwRcvprpCnt: number;
+    exlnRcvprpCnt: number;
+    stofcbrCnt: number;
+    exlnOtflCnt: number;
+    sewerLdgrEdpPrlg: number;
+    sewerLdgrEdpRt: number;
+    rmrk: string | null;
+}
+
+export interface SewagePipeTotalResponse {
+    status: string;
+    message: string;
+    data: SewagePipeTotalItem[];
+}
+
+export interface SewagePipeFactInstallStatusItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string | null;
+    admdstCd: string;
+    admdstNm: string;
+    swtrmtFcltNm: string;
+    prcsFcltCpct: number | null;
+    rowType: string;
+    prcsZoneArea: number;
+    cbsysPrcsZoneArea: number;
+    sprsysPrcsZoneArea: number;
+    sprsysVartnRt: number;
+    mltvEqpmCnt: number;
+    cbsysMltvEqpmCnt: number;
+    sprsysMltvEqpmCnt: number;
+    sprsysMltvLnkgCnt: number;
+    sprsysMltvYetLnkgCnt: number;
+    planPrcsZoneArea: number;
+    cbsysPlanPrcsZoneArea: number;
+    sprsysPlanPrcsZoneArea: number;
+    wholFcltPrlg: number;
+    wholIcptgAtlfcPrlg: number | null;
+    icptgPrlg: number;
+    atlfcsPrlg: number;
+    cbsysStofcbrCnt: number;
+    sprsysStofcbrCnt: number;
+    sprsysExlnOtflCnt: number;
+    wholBrchlnPrlg: number;
+    cbsysBrchlnPrlg: number;
+    exlnBrchlnPrlg: number;
+    drtwBrchlnPrlg: number;
+}
+
+export interface SewagePipeFactInstallStatusResponse {
+    status: string;
+    message?: string;
+    data: SewagePipeFactInstallStatusItem[];
+}
+
+/** ST00020003 합계 — `GET .../sewer-pipe/pipe-type-facility-status` */
+export interface SewagePipePipeTypeFacilityStatusItem {
+    // 고정 필드
+    ctpvNm: string;
+    sggNm: string | null;
+    admdstCd: string;
+    admdstNm: string;
+    swrgPipeNm: string;
+    statsYr: string;
+    rowType: string;
+    rmrk: string | null;
+
+    oldPipeRt: number;
+    
+    // 총계 필드
+    pipeByPrstWhol: number;
+    lyngPrlg: number;
+    dmltnPrlg: number;
+
+
+    /** 
+     * 연도별 동적 데이터 필드 
+  "prlg_whol_1995", "lyng_prlg_1995", "dmltn_prlg_1995",
+
+     */
+    [key: string]: string | number | null; 
+} 
+
+export interface SewagePipePipeTypeFacilityStatusResponse {
+    status: string;
+    message?: string;
+    data: SewagePipePipeTypeFacilityStatusItem[];
+}
+
+/** ST00020004 합계 — `GET .../sewer-pipe/pipe-diam-status` */
+export interface SewagePipePipeDiamStatusItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    admdstCd: string;
+    admdstNm: string;
+    statsYr: string;
+    swrgPipeNm: string;
+    rowType: string;
+    pdmtByTsmWhol: number;
+    step1PdmtPrlg: number;
+    step2PdmtPrlg: number;
+    step3PdmtPrlg: number;
+    step4PdmtPrlg: number;
+    step5PdmtPrlg: number;
+    sqrePdmtPrlg: number;
+    etcPdmtPrlg: number;
+    rmrk: string | null;
+}
+
+export interface SewagePipePipeDiamStatusResponse {
+    status: string;
+    message?: string;
+    data: SewagePipePipeDiamStatusItem[];
+}
+
+/**
+ * 맨홀 현황 응답 아이템 인터페이스
+ * DTO의 yy14(2014년 이전) ~ yy25(2024년) 필드를 모두 명시적으로 선언
+ */
+export interface FcltyManholeSummaryItem {
+    /* --- 기본 정보 및 행 제어 --- */
+    ctpvNm: string;           // 시도명
+    sggNm: string;            // 시군구명
+    admdstNm: string;         // 행정구역명
+    admdstCd: string;         // 행정구역코드
+    statsYr: string;          // 통계연도
+    rowType: string;          // 데이터 구분 (OLD, CURR, SUMMARY 등)
+    emphsMngSeCd: string;     // 중점관리구역구분코드
+    emphsMngSeNm: string;     // 중점관리구역구분명
+
+    totWholMnhlCnt: number;
+    totStep1MnhlCnt: number;
+    totStep2MnhlCnt: number;
+    totStep3MnhlCnt: number;
+    totStep4MnhlCnt: number;
+    totStep5MnhlCnt: number;
+    /* --- yy14 (2014년 이전) --- */
+    yy14WholMnhlCnt: number;  // 합계
+    yy14Step1MnhlCnt: number; // 1단계
+    yy14Step2MnhlCnt: number; // 2단계
+    yy14Step3MnhlCnt: number; // 3단계
+    yy14Step4MnhlCnt: number; // 4단계
+    yy14Step5MnhlCnt: number; // 5단계
+
+    /* --- yy15 (2014년) --- */
+    yy15WholMnhlCnt: number;
+    yy15Step1MnhlCnt: number;
+    yy15Step2MnhlCnt: number;
+    yy15Step3MnhlCnt: number;
+    yy15Step4MnhlCnt: number;
+    yy15Step5MnhlCnt: number;
+
+    /* --- yy16 (2015년) --- */
+    yy16WholMnhlCnt: number;
+    yy16Step1MnhlCnt: number;
+    yy16Step2MnhlCnt: number;
+    yy16Step3MnhlCnt: number;
+    yy16Step4MnhlCnt: number;
+    yy16Step5MnhlCnt: number;
+
+    /* --- yy17 (2016년) --- */
+    yy17WholMnhlCnt: number;
+    yy17Step1MnhlCnt: number;
+    yy17Step2MnhlCnt: number;
+    yy17Step3MnhlCnt: number;
+    yy17Step4MnhlCnt: number;
+    yy17Step5MnhlCnt: number;
+
+    /* --- yy18 (2017년) --- */
+    yy18WholMnhlCnt: number;
+    yy18Step1MnhlCnt: number;
+    yy18Step2MnhlCnt: number;
+    yy18Step3MnhlCnt: number;
+    yy18Step4MnhlCnt: number;
+    yy18Step5MnhlCnt: number;
+
+    /* --- yy19 (2018년) --- */
+    yy19WholMnhlCnt: number;
+    yy19Step1MnhlCnt: number;
+    yy19Step2MnhlCnt: number;
+    yy19Step3MnhlCnt: number;
+    yy19Step4MnhlCnt: number;
+    yy19Step5MnhlCnt: number;
+
+    /* --- yy20 (2019년) --- */
+    yy20WholMnhlCnt: number;
+    yy20Step1MnhlCnt: number;
+    yy20Step2MnhlCnt: number;
+    yy20Step3MnhlCnt: number;
+    yy20Step4MnhlCnt: number;
+    yy20Step5MnhlCnt: number;
+
+    /* --- yy21 (2020년) --- */
+    yy21WholMnhlCnt: number;
+    yy21Step1MnhlCnt: number;
+    yy21Step2MnhlCnt: number;
+    yy21Step3MnhlCnt: number;
+    yy21Step4MnhlCnt: number;
+    yy21Step5MnhlCnt: number;
+
+    /* --- yy22 (2021년) --- */
+    yy22WholMnhlCnt: number;
+    yy22Step1MnhlCnt: number;
+    yy22Step2MnhlCnt: number;
+    yy22Step3MnhlCnt: number;
+    yy22Step4MnhlCnt: number;
+    yy22Step5MnhlCnt: number;
+
+    /* --- yy23 (2022년) --- */
+    yy23WholMnhlCnt: number;
+    yy23Step1MnhlCnt: number;
+    yy23Step2MnhlCnt: number;
+    yy23Step3MnhlCnt: number;
+    yy23Step4MnhlCnt: number;
+    yy23Step5MnhlCnt: number;
+
+    /* --- yy24 (2023년) --- */
+    yy24WholMnhlCnt: number;
+    yy24Step1MnhlCnt: number;
+    yy24Step2MnhlCnt: number;
+    yy24Step3MnhlCnt: number;
+    yy24Step4MnhlCnt: number;
+    yy24Step5MnhlCnt: number;
+
+    /* --- yy25 (2024년) --- */
+    yy25WholMnhlCnt: number;
+    yy25Step1MnhlCnt: number;
+    yy25Step2MnhlCnt: number;
+    yy25Step3MnhlCnt: number;
+    yy25Step4MnhlCnt: number;
+    yy25Step5MnhlCnt: number;
+}
+
+/**
+ * 맨홀 현황 API 공통 응답 규격
+ */
+export interface FcltyManholeSummaryResponse {
+    status: string;           // success / error 등
+    message?: string;         // 오류 메시지 등
+    data: FcltyManholeSummaryItem[]; // 실제 리스트 데이터
+}
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-public-total-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-public-total-interface.ts
new file mode 100644
index 000000000..34edcebf9
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-public-total-interface.ts
@@ -0,0 +1,103 @@
+export interface PublicSewageInquirySummaryRequest {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    swtrmtFcltNm?: string;
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    capacityGbn?: string;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+export interface PublicSewageInquirySummaryItem {
+    // 기본 정보 및 행정구역
+    ctpvNm: string;
+    sggNm: string;
+    statsYr: string;
+    admdstCd: string;
+    admdstNm: string;
+    swtrmtFcltNm: string;
+    rowType: string;
+    fcltPstnCn: string;
+
+    // 시설 용량 (㎥/일)
+    prcsFcltCpct: number;
+    prcsFcltPhysCpct: number;
+    prcsFcltBoilCpct: number;
+    prcsFcltAltdCpct: number;
+
+    // 유입 및 처리량 (㎥/일)
+    inflwSwageQnt: number;
+    inflwSwagePhysQnt: number;
+    inflwSwageBoilQnt: number;
+    inflwSwageAltdQnt: number;
+
+    prcsQnt: number;
+    prcsPhysCpct: number;
+    prcsBoilCpct: number;
+    prcsAltdCpct: number;
+
+    // 수질 정보 (유입/방류)
+    inflwBodVl: number;
+    dschgBodVl: number;
+    inflwTocQnt: number;
+    dschgTocQnt: number;
+    inflwSsQnt: number;
+    dschgSsQnt: number;
+    inflwTnVl: number;
+    dschgTnVl: number;
+    inflwTpVl: number;
+    dschgTpVl: number;
+    inflwGrssClfgVl: number;
+    dschgGrssClfgVl: number;
+
+    // 처리 효율 및 방법
+    prcsRt: number;
+    prcsLodQnt: number;
+    prcsMthdExpln: string;
+
+    // 연계 처리량 (㎥/일)
+    wholHmnQnt: number;
+    wholLvstQnt: number;
+    wholEfntQnt: number;
+    wholEtcQnt: number;
+
+    // 부가 정보
+    telNo: string;
+    cmptnStrtYmd: string;
+    oprtngStrtYmd: string;
+    wholBizVl: number;
+    eflntDsnfMthdExpln: string;
+
+    // 방류수역 정보
+    wtsysNm: string;
+    trbtrNm: string;
+    dtlUnitZoneCn: string;
+    rgnSeNm: string;
+    msirbCn: string;
+    goalWqNo: string;
+
+    // 에너지 및 위탁현황
+    engySrlneRt: number;
+    engyItslfPrdctnQnt: number;
+    anlEngyWholUseQnt: number;
+    anlElpwrUseQnt: number;
+    itslfEngyUseQnt: number;
+    swtrmtEmsnQnt: number;
+    operMnbdCn: string;
+
+    // 위탁현황
+    prxyBzentyNmCn: string;
+    cnsgnCstVl: number;
+    prxyCtrtCn: string;
+    intgPrcsFcltCn: string;
+    wholNope: number;
+    sftyAcdntEvntcsCnt: number;
+}
+
+export interface PublicSewageInquirySummaryResponse {
+    status: string;
+    message: string;
+    data: PublicSewageInquirySummaryItem[];
+}
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-reservoir-total-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-reservoir-total-interface.ts
new file mode 100644
index 000000000..782875e34
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-reservoir-total-interface.ts
@@ -0,0 +1,114 @@
+export interface SewerReservoirMaintainTotalRequest {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+/** [Tab1] `GET .../reservoir-status` 목록 항목 */
+export interface SewerReservoirStatusTotalItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string | null;
+    admdstNm: string;
+    admdstCd: string;
+    sewerBzmnCd: string | null;
+    fcltNm: string;
+    fcltPstnCn: string;
+    rowType: string;
+    oprtngStrtYmd: string;
+    planDesignFreqCnt: number;
+    fldngPrvtnYn: string;
+    wqPlltnMtgtYn: string;
+    rtlztnUsgYn: string;
+    fcltStrctCn: string;
+    wtrStrgZoneArea: number;
+    impdFcltCpct: number;
+    grssPpqty: number;
+    pumpFcltN1DmtrExpln: string;
+    pumpFcltN1PerPpqty: number;
+    pumpFcltN1PumpCnt: number;
+    pumpFcltN1RsrvPumpCnt: number;
+    pumpFcltN2DmtrExpln: string;
+    pumpFcltN2PerPpqty: number;
+    pumpFcltN2PumpCnt: number;
+    pumpFcltN2RsrvPumpCnt: number;
+    pumpFcltN3DmtrExpln: string;
+    pumpFcltN3PerPpqty: number;
+    pumpFcltN3PumpCnt: number;
+    pumpFcltN3RsrvPumpCnt: number;
+    prcsgFcltYn: string;
+    ddrztnEqpmYn: string;
+    oslfEtgtYn: string;
+    mltvMthCn: string;
+    impdMthCn: string;
+    impdPrcsMthdCn: string;
+    dschgWtrsExpln: string;
+    prcptnLastDspsQnt: number;
+    ctmnLastDspsQnt: number;
+    prcptnLastDspsMthdExpln: string;
+    ctmnLastDspsMthdExpln: string;
+    oprtngDayCnt: number;
+    grssMltvQnt: number;
+    rmrk: string | null;
+}
+
+/** [Tab1] `GET .../reservoir-status` 응답 */
+export interface SewerReservoirStatusTotalResponse {
+    status: string;
+    message?: string;
+    data: SewerReservoirStatusTotalItem[];
+}
+
+/** [Tab2] `GET .../pump-station-status` 목록 항목 */
+export interface SewerPumpStationStatusTotalItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string | null;
+    admdstNm: string;
+    admdstCd: string;
+    sewerBzmnCd: string | null;
+    rowType: string;
+    fcltNm: string;
+    fcltPstnCn: string;
+    fcltyKndCn: string;
+    oprtngStrtYmd: string;
+    planDesignFreqCnt: number;
+    wtrStrgZoneArea: number;
+    rsvrYn: string;
+    rsvrImpndQnt: number;
+    abstnRgnImdQnt: number;
+    grssPpqty: number;
+    pumpFcltN1DmtrExpln: string;
+    pumpFcltN1PerPpqty: number;
+    pumpFcltN1PumpCnt: number;
+    pumpFcltN1RsrvPumpCnt: number;
+    pumpFcltN2DmtrExpln: string;
+    pumpFcltN2PerPpqty: number;
+    pumpFcltN2PumpCnt: number;
+    pumpFcltN2RsrvPumpCnt: number;
+    pumpFcltN3DmtrExpln: string;
+    pumpFcltN3PerPpqty: number;
+    pumpFcltN3PumpCnt: number;
+    pumpFcltN3RsrvPumpCnt: number;
+    prcsgFcltYn: string;
+    ddrztnEqpmYn: string;
+    oslfEtgtYn: string;
+    dschgWtrsExpln: string;
+    prcptnLastDspsQnt: number;
+    ctmnLastDspsQnt: number;
+    prcptnLastDspsMthdExpln: string;
+    ctmnLastDspsMthdExpln: string;
+    oprtngDayCnt: number;
+    grssMltvQnt: number;
+}
+
+/** [Tab2] `GET .../pump-station-status` 응답 */
+export interface SewerPumpStationStatusTotalResponse {
+    status: string;
+    message?: string;
+    data: SewerPumpStationStatusTotalItem[];
+}
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-supply-rate-total-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-supply-rate-total-interface.ts
new file mode 100644
index 000000000..bc5a8b5cc
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewage-supply-rate-total-interface.ts
@@ -0,0 +1,57 @@
+export interface SewerageSupplyRateRequest {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+export interface SewerageSupplyRateTotalItem {
+    ctpvNm: string;
+    sggNm: string;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    trbtrNm: string;
+    rvbsn: string;
+    mdbsn: string;
+    lgbsn: string;
+    mdmbsn: string;
+    spcCtpnRgnCn: string;
+    wholPpltnCnt: number;
+    wholArea: number;
+    wholSwtrmtPpltnCnt: number;
+    wholPblSwtrmtPpltnCnt: number;
+    ts1SwtrmtPpltnCnt: number;
+    ts2SwtrmtPpltnCnt: number;
+    ts3SwtrmtPpltnCnt: number;
+    wholWwtPrcsPpltnCnt: number;
+    ts1WwtPrcsPpltnCnt: number;
+    ts2WwtPrcsPpltnCnt: number;
+    ts3WwtPrcsPpltnCnt: number;
+    yetCntnPpltnCnt: number;
+    staaArea: number;
+    wholStaaExcpPpltnCnt: number;
+    unprcsPpltnCnt: number;
+    drtwPrcsPpltnCnt: number;
+    spctnkPpltnCnt: number;
+    staaExcpArea: number;
+    staaPsplyRt: number;
+    altdPrcsPsplyRt: number;
+    sewerInstlRt: number;
+    rmrk: string;
+    rurPsplyRt: number;
+}
+
+export interface SewerageSupplyRateResponse {
+    status: string;
+    message: string;
+    data: SewerageSupplyRateTotalItem[];
+}
+
+// export interface StatisticsTotalSewSupplyRateService {
+//     getSewerageSupplyRateList(params: SewerageSupplyRateRequest): Promise<SewerageSupplyRateResponse>;
+// }
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-sewerage-finance-total-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewerage-finance-total-interface.ts
new file mode 100644
index 000000000..1a430a911
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewerage-finance-total-interface.ts
@@ -0,0 +1,121 @@
+/** 09. 하수도 재정관리 검색 조건 공통 파라미터 */
+export interface SewerageFinanceSummaryRequest {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+/** [Tab1] 하수도재정 결산 목록 항목 */
+export interface SewerageFinanceSettlementTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    fnnByWholPjtcoAmt: number;
+    cnterGovSprtAmt: number;
+    mctpvLcexpAmt: number;
+    wareaSggLclAmt: number;
+    sewerUseAmt: number;
+    orgprBrdnAmt: number;
+    etcIncmAmt: number;
+    crfwAmt: number;
+    lbltAmt: number;
+    usgByWholPjtcoAmt: number;
+    tmplntWholAmt: number;
+    tmplntFcltAmt: number;
+    tmplntMendngAmt: number;
+    tmplntOperKeepAmt: number;
+    tmplntEtcAmt: number;
+    wholSwagePplAmt: number;
+    swagePplFcltAmt: number;
+    swagePplMendngAmt: number;
+    swagePplOperKeepAmt: number;
+    swagePplEtcAmt: number;
+    wholSwageImdpFcltAmt: number; // 스펙 대조 자동 매핑 보정 (SwageImpdFclt)
+    swageImpdFcltAmt: number;
+    swageImpdMendngAmt: number;
+    swageImpdOperKeepAmt: number;
+    swageImpdFcltEtcAmt: number;
+    etcWholAmt: number;
+    etcAcdntCrfwAmt: number;
+    etcNrcpAmt: number;
+    etcAmt: number;
+}
+
+/** [Tab2] 하수도 요금 목록 항목 */
+export interface SewerageFeeTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    anlLevyQnt: number;
+    levyAmt: number;
+    avgUntprcAmt: number;
+    grssPrmcoAmt: number;
+    grssUnitPrmcoAmt: number;
+    rlztnRt: number;
+}
+
+/** [Tab3] 하수도 사용료 목록 항목 */
+export interface SewerageUsageFeeTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    levyAmt: number;
+    levyQnt: number;
+    hshusLevyAmt: number;
+    hshusLevyQnt: number;
+    hshusUntprcAmt: number;
+    taskFrLevyAmt: number;
+    taskFrLevyQnt: number;
+    taskFrUntprcAmt: number;
+    bsnGnrlLevyAmt: number;
+    bsnGnrlLevyQnt: number;
+    bsnGnrlUntprcAmt: number;
+    massBthhsFrLevyAmt: number;
+    massBthhsFrLevyQnt: number;
+    massBthhsFrUntprcAmt: number;
+    bthhsFrSpcs2LevyAmt: number;
+    bthhsFrSpcs2LevyQnt: number;
+    bthhsFrSpcs2UntprcAmt: number;
+    induMdsrLevyAmt: number;
+    induMdsrLevyQnt: number;
+    induMdsrUntprcAmt: number;
+    etcLevyAmt: number;
+    etcLevyQnt: number;
+    etcLevyUntprcAmt: number;
+}
+
+/** [Tab4] 원인자 부담금 목록 항목 */
+export interface SewerageOrgCauseTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    levyEvntcsCnt: number;
+    levyAmt: number;
+    trgtByWholClctnEvntcsCnt: number;
+    trgtByWholClctnAmt: number;
+    mltvEqpmEvntcsCnt: number;
+    mltvEqpmAmt: number;
+    othrCstrnOthrActrCnt: number;
+    othrCstrnOthrActrAmt: number;
+}
+
+export interface SewerageFinanceSettlementResponse { status: string; message?: string; data: SewerageFinanceSettlementTotalItem[]; }
+export interface SewerageFeeResponse { status: string; message?: string; data: SewerageFeeTotalItem[]; }
+export interface SewerageUsageFeeResponse { status: string; message?: string; data: SewerageUsageFeeTotalItem[]; }
+export interface SewerageOrgCauseResponse { status: string; message?: string; data: SewerageOrgCauseTotalItem[]; }
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-sewerage-industry-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewerage-industry-interface.ts
new file mode 100644
index 000000000..dd3803817
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewerage-industry-interface.ts
@@ -0,0 +1,114 @@
+
+/** 12. 하수및분뇨관리사업 공통 검색 파라미터 DTO 규격 */
+export interface SewerageIndustry {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+/** [TAB1] 공공기관 하수분야 응답 DTO */
+export interface PublicSewageStaffTotalItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string | null;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    ognzNm: string;
+    empGrssCnt: number;
+    pbadmsNope: number;
+    techWholNope: number;
+    engrkCnt: number;
+    mchnCnt: number;
+    prvtmCnt: number;
+    chmengCnt: number;
+    envCnt: number;
+    enjbEtcCnt: number;
+    etcCnt: number;
+}
+
+/** [TAB1] 공공기관 하수분야 응답 DTO */
+export interface PublicSewageStaffTab1Response {
+    status: string;
+    message?: string;
+    data: PublicSewageStaffTotalItem[];
+}
+
+
+/** [TAB2] 공공기관 분뇨분야 응답 DTO */
+export interface PublicHumanWasteStaffTotalItem{
+      statsYr: string;
+    ctpvNm: string;
+    sggNm: string | null;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    ognzNm: string;
+    empGrssCnt: number;
+    pbadmsNope: number;
+    techWholNope: number;
+    engrkCnt: number;
+    mchnCnt: number;
+    prvtmCnt: number;
+    chmengCnt: number;
+    envCnt: number;
+    enjbEtcCnt: number;
+    etcCnt: number;
+}
+
+
+export interface PublicHumanWasteStaffTab2Response {
+    status: string;
+    message?: string;
+    data: PublicHumanWasteStaffTotalItem[];
+}
+
+
+/** [TAB3] 분뇨수집 .운반업 응답 DTO */
+export interface HumanWasteCollectionOperItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    bzentyCnt: number;
+    empNope: number;
+    fcltSecrPrstCnt: number;
+    n3TonUdrCnt: number;
+    n4TonUdrCnt: number;
+    n8TonUdrCnt: number;
+    etcCnt: number;
+    clctCnvncPrfmncQnt: number;
+}
+
+export interface HumanWasteCollectionTab3Response {
+    status: string;
+    message?: string;
+    data: HumanWasteCollectionOperItem[];
+}
+
+export interface IndividualSewageRelBusinessItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    designMdsrCnt: number;
+    designMdsrNope: number;
+    mfbizCnt: number;
+    mfbizMdsrNope: number;
+    mngCnt: number;
+    mngMdsrNope: number;
+}
+
+export interface IndividualSewageTab4Response {
+    status: string;
+    message?: string;
+    data: IndividualSewageRelBusinessItem[];
+}
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-sewerage-reuse-total-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewerage-reuse-total-interface.ts
new file mode 100644
index 000000000..6daaa773c
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-sewerage-reuse-total-interface.ts
@@ -0,0 +1,150 @@
+/** 10. 물재이용 검색 조건 공통 파라미터 DTO */
+export interface WaterReuseSummaryRequest {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+/** [Tab1] 공공하수처리수 재이용 목록 항목 인터페이스 */
+export interface SewerageReuseStatusTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    // 하수처리장
+    swtrmtFcltNm: string;
+    sncnYmd: string;
+    prcsFcltCpct: string;
+    prcsQnt: number;
+    lglYn: string;
+    // 재이용시설 설치시
+    instlYn: string;
+    oprtngStrtYmd: string;
+    instlAprvYmd: string;
+    rprcsFcltCpct: number;
+    mtcnsNm: string;
+    ruswtPplLen: number;
+    ruswtPumpLen: number;
+    // 하수처리수 재이용현황 - 장내용수
+    wholUseQnt: number;
+    ithlWshwtrQnt: number;
+    ithlClnQty: number;
+    ithlFrzgQty: number;
+    ithlLdhcUswtrQnt: number;
+    ithlDltnUswtrQnt: number;
+    ithlRuswtrQnt: number;
+    ithlEtcQnt: number;
+    ithlUnsdQnt: number;
+    // 하수처리수 재이용현황 - 장외용수
+    otcntrUswtrWhol: number;
+    otcntrClnRstrmQnt: number;
+    otcntrWshwtrQnt: number;
+    otcntrLdhcUswtrQnt: number;
+    otcntrHdrplUswtrQnt: number;
+    otcntrRvrKeepQnt: number;
+    agrcltUswtrPstnQnt: number;
+    ugwtrChargQnt: number;
+    mdsrUswtrQnt: number;
+    // 기타
+    rtlztnRt: number;
+}
+
+export interface SewerageReuseStatusTab1Response {
+    status: string;
+    message?: string;
+    data: SewerageReuseStatusTotalItem[];
+}
+
+// ============================================================================
+// ★ [TAB2] 중수도 현황 명세 (추가 취합 완료)
+// ============================================================================
+export interface GrayWaterStatusTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    fcltNm: string;
+    fcltPstnCn: string;
+    bldgSeCn: string;
+    lglTrgtYn: string;
+    cmptnStrtYmd: string;
+    oprtngStrtYmd: string;
+    archWholArea: number;
+    prcsCpct: number;
+    wtrUseQnt: number;
+    ruswtrUtztnQnt: number;
+    sbstCntUtztnQnt: number;
+    mnUsgCn: string;
+    ruswtrOperAmt: number;
+}
+
+export interface GrayWaterStatusTab2Response {
+    status: string;
+    message?: string;
+    data: GrayWaterStatusTotalItem[];
+}
+
+// ============================================================================
+// ★ [TAB3] 빗물이용시설현황 명세 (신규 추가)
+// ============================================================================
+export interface RainwaterUtilizationStatusTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    fcltNm: string;
+    bdstTypCn: string;
+    fcltPstnCn: string;
+    lglTrgtYn: string;
+    instlCmptnYmd: string;
+    instlAmt: number;
+    rcptMynCn: string;
+    filtrPrcsFcltYnExpln: string;
+    impdCpct: number;
+    anlUseQnt: number;
+    exlnUtlzUsgExpln: string;
+    anlOperAmt: number;
+}
+export interface RainwaterUtilizationStatusTab3Response { status: string; message?: string; data: RainwaterUtilizationStatusTotalItem[]; }
+
+
+export interface SewageWwtRtlztnRegStatusTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    bplcNm: string;
+    rprsvNm: string;
+    bplcPstnCn: string;
+    regDt: string;
+}
+export interface SewageWwtRtlztnRegStatusTab4Response { status: string; message?: string; data: SewageWwtRtlztnRegStatusTotalItem[]; }
+
+// ============================================================================
+// ★ [TAB5] 하·폐수처리수 재이용시설 시공업 인가현황 명세 (신규 추가)
+// ============================================================================
+export interface SewageWwtRtlztnSncnStatusTotalItem {
+    ctpvNm: string;
+    sggNm: string | null;
+    statsYr: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    bplcNm: string;
+    rprsvNm: string;
+    bplcPstnCn: string;
+    coRegYmd: string;
+}
+export interface SewageWwtRtlztnSncnStatusTab5Response { status: string; message?: string; data: SewageWwtRtlztnSncnStatusTotalItem[]; }
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-total/statistics-sludge-total-interface.ts b/apps/st/src/entities/statistics/model/statistics-total/statistics-sludge-total-interface.ts
new file mode 100644
index 000000000..bae596f83
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-total/statistics-sludge-total-interface.ts
@@ -0,0 +1,168 @@
+/** 11. 하수및분뇨찌꺼기 공통 검색 파라미터 DTO 규격 */
+export interface SludgeSummaryRequest {
+    ctpvNm?: string;
+    sggNm?: string;
+    statsYr?: string;
+    sewerBzmnCd?: string;
+    rowDataYn?: boolean;
+    summaryYn?: boolean;
+    summaryYearCnt?: number;
+}
+
+/** [TAB1] 찌꺼기(슬러지) 처리시설 현황 데이터 행 항목 인터페이스 */
+export interface SludgeProcessingTotalItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string | null;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    
+    // 기본 정보
+    fcltNm: string;
+    
+    // 찌꺼기 발생량(톤/년, 탈수기준)
+    gnamWhol: number;
+    itslfQnt: number;
+    otsdInflwQnt: number;
+    
+    // 이송 및 함수율
+    transfTmplntNm: string;
+    transfPrcsQnt: number;
+    srpFncRt: number;
+    wholSrpPrcsQnt: number;
+    
+    // 자체 찌꺼기 처리량 소계 및 매립
+    itslfTs1Whol: number;
+    itslfTs1RclmQnt: number;
+    
+    // 소각 후 처리(2차)
+    itslfTs1IncnrQnt: number;
+    incnrPrcsWhol: number;
+    incnrPrcsLfvlm: number;
+    incnrPrcsPrdctRmtrlQnt: number;
+    incnrPrcsFmlyrQnt: number;
+    incnrPrcsFcltNm: string;
+    
+    // 고화 후 2차
+    itslfTs1AltdQnt: number;
+    stbznPrcsWhol: number;
+    stbznPrcsLfvlm: number;
+    stbznPrcsFmlyrQnt: number;
+    stbznPrcsFcltNm: string;
+    
+    // 건조 후 2차
+    itslfTs1DryQnt: number;
+    dryPrcsWhol: number;
+    dryPrcsLfvlm: number;
+    dryPrcsIncnrQnt: number;
+    dryPrcsFuelQnt: number;
+    dryPrcsPrdctRmtrlQnt: number;
+    dryPrcsFmlyrQnt: number;
+    dryPrcsCmpstgQnt: number;
+    dryPrcsFcltNm: string;
+    
+    // 탄화 후 2차
+    itslfTs1FuelQnt: number;
+    fuelPrcsWhol: number;
+    fuelPrcsIncnrQnt: number;
+    fuelPrcsFuelQnt: number;
+    fuelPrcsFcltNm: string;
+    
+    // 퇴비화
+    itslfTs1CmpstgQnt: number;
+    cmpsPrcsFcltBzentyNm: string;
+    
+    // 외부(민간) 위탁 처리량
+    otsdCnsgnWhol: number;
+    otsdCnsgnRclmQnt: number;
+    otsdCnsgnIncnrQnt: number;
+    otsdCnsgnFuelPwplQnt: number;
+    otsdCnsgnPrdctRmtrlQnt: number;
+    otsdCnsgnFmlyrQnt: number;
+    otsdCnsgnCmpstgQnt: number;
+    otsdCnsgnFcltNm: string;
+    
+    // 수도권광역 위탁 처리량
+    cparTs2Whol: number;
+}
+
+/** TAB1 서버 단일 응답 랩퍼 규격 */
+export interface SludgeProcessingTab1Response {
+    status: string;
+    message?: string;
+    data: SludgeProcessingTotalItem[];
+}
+// ============================================================================
+// [TAB2] 소화조 운영현황 명세
+// ============================================================================
+export interface DigestionTankOperStatusTotalItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    admdstNm: string;
+    rowType: string;
+    fcltNm: string;
+    digesterYn: string;
+    dsgnCpct: number;
+    actlOperCpct: number;
+    inputQnt: number;
+    tsConc: number;
+    oprtngDays: number;
+    gnrtGasQnt: number;
+    gasTotal: number;
+    gasSale: number;
+    gasGen: number;
+    gasSelf: number;
+    gasEtc: number;
+    surplusGas: number;
+}
+export interface DigestionTankOperTab2Response { status: string; message?: string; data: DigestionTankOperStatusTotalItem[]; }
+
+export interface SewageSludgeOperStatusTotalItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    fcltNm: string;
+    prcsMthExpln: string;
+    fcltCpct: number;
+    anlPrcsQnt: number;
+    dayAvgOprtngHr: number;
+    anlOprtngDayCnt: number;
+    oprtngRt: number;
+}
+
+export interface SewageSludgeOperTab3Response { 
+    status: string; 
+    message?: string; 
+    data: SewageSludgeOperStatusTotalItem[]; 
+}
+
+export interface HumanWasteSludgeStatusTotalItem {
+    statsYr: string;
+    ctpvNm: string;
+    sggNm: string;
+    admdstNm: string;
+    admdstCd: string;
+    rowType: string;
+    fcltNm: string;
+    gnam: number;
+    wholDspsQnt: number;
+    rcycQnt: number;
+    olandLfvlm: number;
+    incnrQnt: number;
+    oceanInputQnt: number;
+    fuelQnt: number;
+    etcQnt: number;
+    nondspsQnt: number;
+    swtrmtFcltNm: string;
+}
+
+export interface HumanWasteSludgeTab4Response { 
+    status: string; 
+    message?: string; 
+    data: HumanWasteSludgeStatusTotalItem[]; 
+}
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-verification-report/statistics-verification-report-columns.ts b/apps/st/src/entities/statistics/model/statistics-verification-report/statistics-verification-report-columns.ts
new file mode 100644
index 000000000..d2f72bd2b
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-verification-report/statistics-verification-report-columns.ts
@@ -0,0 +1,244 @@
+import type { ColumnInfo } from "@/components/type/DataGrid.type";
+
+const READ_ONLY_STYLE = "rg-cell-readonly";
+
+export const statisticsVerificationReportColumnInfo: ColumnInfo = {
+    columns: [
+        {
+            name: "ctpvNm",
+            fieldName: "ctpvNm",
+            header: { text: "시도" },
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "sggNm",
+            fieldName: "sggNm",
+            header: { text: "시군구" },
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "menuTabName",
+            fieldName: "menuTabName",
+            header: { text: "구분" },
+            width: 150,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "laePicNm",
+            fieldName: "laePicNm",
+            header: { text: "작성자" },
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "laePicTelNo",
+            fieldName: "laePicTelNo",
+            header: { text: "작성자연락처" },
+            width: 130,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "laeKbrdrDeptNm",
+            fieldName: "laeKbrdrDeptNm",
+            header: { text: "부서" },
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "laeKbrdrJbgdNm",
+            fieldName: "laeKbrdrJbgdNm",
+            header: { text: "직급" },
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "laeIdfrNm",
+            fieldName: "laeIdfrNm",
+            header: { text: "승인자" },
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "laeIdfrDeptNm",
+            fieldName: "laeIdfrDeptNm",
+            header: { text: "부서" },
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "laeIdfrJbgdNm",
+            fieldName: "laeIdfrJbgdNm",
+            header: { text: "직급" },
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "rjctOpnnCn",
+            fieldName: "rjctOpnnCn",
+            header: { text: "반려사유" },
+            width: 220,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "sewerBzmnCd",
+            fieldName: "sewerBzmnCd",
+            header: { text: "sewerBzmnCd" },
+            visible: false,
+        },
+        {
+            name: "statsCd",
+            fieldName: "statsCd",
+            header: { text: "statsCd" },
+            visible: false,
+        },
+    ],
+    columnLayout: [
+        "ctpvNm",
+        "sggNm",
+        "menuTabName",
+        "laePicNm",
+        "laePicTelNo",
+        "laeKbrdrDeptNm",
+        "laeKbrdrJbgdNm",
+        "laeIdfrNm",
+        "laeIdfrDeptNm",
+        "laeIdfrJbgdNm",
+        "rjctOpnnCn",
+        "sewerBzmnCd",
+        "statsCd",
+    ],
+};
+
+export const statisticsVerificationResultColumnInfo: ColumnInfo = {
+    columns: [
+        {
+            name: "ctpvNm",
+            fieldName: "ctpvNm",
+            header: { text: "시도" },
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "sggNm",
+            fieldName: "sggNm",
+            header: { text: "시군구" },
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "statsNm",
+            fieldName: "statsNm",
+            header: { text: "지표" },
+            width: 140,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "vrfcTrgtNm",
+            fieldName: "vrfcTrgtNm",
+            header: { text: "세부항목" },
+            width: 180,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "regDt",
+            fieldName: "regDt",
+            header: { text: "검증날짜" },
+            width: 150,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "vrfcMthdNm",
+            fieldName: "vrfcMthdNm",
+            header: { text: "검증유형" },
+            width: 100,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },        
+        {
+            name: "rsnExpln",
+            fieldName: "rsnExpln",
+            header: { text: "오류내역" },
+            width: 200,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "nowVlCn",
+            fieldName: "nowVlCn",
+            header: { text: "입력값" },
+            width: 90,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "compVlCn",
+            fieldName: "compVlCn",
+            header: { text: "비교값" },
+            width: 90,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "prcsYnNm",
+            fieldName: "prcsYnNm",
+            header: { text: "상태" },
+            width: 90,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "prcsOpnnExpln",
+            fieldName: "prcsOpnnExpln",
+            header: { text: "예외사유" },
+            width: 170,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "rjctOpnnCn",
+            fieldName: "rjctOpnnCn",
+            header: { text: "반려의견" },
+            width: 170,
+            editable: true,
+        },
+        {
+            name: "pbcpAprvYn",
+            fieldName: "pbcpAprvYn",
+            header: { text: "승인여부" },
+            width: 90,
+            styleName: READ_ONLY_STYLE,
+            editable: false,
+        },
+        {
+            name: "vrfcSn",
+            fieldName: "vrfcSn",
+            header: { text: "vrfcSn" },
+            visible: false,
+            editable: false,
+        },
+    ],
+    columnLayout: [
+        "ctpvNm",
+        "sggNm",
+        "statsNm",
+        "vrfcTrgtNm",
+        "regDt",
+        "vrfcMthdNm",
+        "rsnExpln",
+        "nowVlCn",
+        "compVlCn",
+        "prcsYnNm",
+        "prcsOpnnExpln",
+        "rjctOpnnCn",
+        "pbcpAprvYn",
+        "vrfcSn",
+    ],
+};
\ No newline at end of file
diff --git a/apps/st/src/entities/statistics/model/statistics-verification-report/statistics-verification-report-types.ts b/apps/st/src/entities/statistics/model/statistics-verification-report/statistics-verification-report-types.ts
new file mode 100644
index 000000000..d81ee98ee
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/statistics-verification-report/statistics-verification-report-types.ts
@@ -0,0 +1,45 @@
+import type { VerifyResultSearchRequest } from "../general-verification-interface";
+import type { StatsInputStatusListRequestParams } from "../input/statistics-input-status-interface";
+
+export type StatisticsVerificationFilterState =
+    StatsInputStatusListRequestParams;
+
+export type StatisticsVerificationSubFilterState = VerifyResultSearchRequest;
+
+export interface StatisticsVerificationOption {
+    label: string;
+    value: string;
+}
+
+export interface StatisticsVerificationSummaryRow {
+    summaryId: number;
+    sido: string;
+    sigungu: string;
+    reportType: string;
+    progressStatus: string;
+    writerName: string;
+    writerContact: string;
+    writerDept: string;
+    writerPosition: string;
+    approverName: string;
+    approverDept: string;
+    approverPosition: string;
+    returnReason: string;
+}
+
+export interface StatisticsVerificationDetailRow {
+    detailId: number;
+    summaryId: number;
+    sido: string;
+    sigungu: string;
+    indicator: string;
+    detailItem: string;
+    verifyDate: string;
+    errorDetail: string;
+    inputValue: number;
+    compareValue: number;
+    status: string;
+    exceptionReason: string;
+    returnOpinion: string;
+    approvalYn: string;
+}
diff --git a/apps/st/src/entities/statistics/model/verification-article/verification-article-column.ts b/apps/st/src/entities/statistics/model/verification-article/verification-article-column.ts
index e9e237338..0462d5392 100644
--- a/apps/st/src/entities/statistics/model/verification-article/verification-article-column.ts
+++ b/apps/st/src/entities/statistics/model/verification-article/verification-article-column.ts
@@ -34,7 +34,7 @@ export const hbArticleColumnInfo: ColumnInfo = {
         {
             name: "ipcrCntVl",
             fieldName: "ipcrCntVl",
-            header: { text: "μ" },
+            header: { text: "중요도 계수(μ)" },
             editable: false,
             sortdisable: false,
             valueType: ValueType.NUMBER,
@@ -43,7 +43,7 @@ export const hbArticleColumnInfo: ColumnInfo = {
         {
             name: "pctlCrtrVl",
             fieldName: "pctlCrtrVl",
-            header: { text: "Percentile" },
+            header: { text: "백분위수 기준값(pct)" },
             editable: false,
             sortdisable: false,
             valueType: ValueType.NUMBER,
@@ -52,7 +52,7 @@ export const hbArticleColumnInfo: ColumnInfo = {
         {
             name: "scopCntCntVl",
             fieldName: "scopCntCntVl",
-            header: { text: "A" },
+            header: { text: "스케일 조정 계수(A)" },
             editable: false,
             sortdisable: false,
             valueType: ValueType.NUMBER,
@@ -61,12 +61,19 @@ export const hbArticleColumnInfo: ColumnInfo = {
         {
             name: "thrsCntVl",
             fieldName: "thrsCntVl",
-            header: { text: "C" },
+            header: { text: "임계 계수(c)" },
             editable: false,
             sortdisable: false,
             valueType: ValueType.NUMBER,
             dataFormat: "#,##0.###",
         },
+        {
+            name: "useYn",
+            fieldName: "useYn",
+            header: { text: "사용 여부" },
+            editable: false,
+            sortdisable: false,
+        },
         {
             name: "rgtrNm",
             fieldName: "rgtrNm",
@@ -91,6 +98,7 @@ export const hbArticleColumnInfo: ColumnInfo = {
         "pctlCrtrVl",
         "scopCntCntVl",
         "thrsCntVl",
+        "useYn",
         "rgtrNm",
         "regDt",
     ],
@@ -126,6 +134,13 @@ export const imrArticleColumnInfo: ColumnInfo = {
             editable: false,
             sortdisable: false,
         },
+        {
+            name: "useYn",
+            fieldName: "useYn",
+            header: { text: "사용 여부" },
+            editable: false,
+            sortdisable: false,
+        },
         {
             name: "rgtrNm",
             fieldName: "rgtrNm",
@@ -146,6 +161,7 @@ export const imrArticleColumnInfo: ColumnInfo = {
         "vrfcTrgtNm",
         "tblNm",
         "colNm",
+        "useYn",
         "rgtrNm",
         "regDt",
     ],
@@ -181,6 +197,13 @@ export const validationArticleColumnInfo: ColumnInfo = {
             editable: false,
             sortdisable: false,
         },
+        {
+            name: "useYn",
+            fieldName: "useYn",
+            header: { text: "사용 여부" },
+            editable: false,
+            sortdisable: false,
+        },
         {
             name: "rgtrNm",
             fieldName: "rgtrNm",
@@ -201,6 +224,7 @@ export const validationArticleColumnInfo: ColumnInfo = {
         "vrfcTrgtNm",
         "tblNm",
         "colNm",
+        "useYn",
         "rgtrNm",
         "regDt",
     ],
diff --git a/apps/st/src/entities/statistics/model/verification-input-report-interface.ts b/apps/st/src/entities/statistics/model/verification-input-report-interface.ts
new file mode 100644
index 000000000..0af515cbf
--- /dev/null
+++ b/apps/st/src/entities/statistics/model/verification-input-report-interface.ts
@@ -0,0 +1,58 @@
+/** 이상치 선별 보고서 조회 요청 (`GET .../results/input/report`) */
+export interface VerificationInputReportRequest {
+    statsYr: string;
+    vrfcMthdCd: string;
+    statsCd?: string;
+    page?: number;
+    size?: number;
+}
+
+export interface VerificationInputReportTypeCountingInfo {
+    nvCount: number;
+    imrCount: number;
+    hbCount: number;
+}
+
+/** 이상치 선별 보고서 목록 한 행 */
+export interface VerificationInputReportItem {
+    statsYr: string;
+    statsCd: string;
+    /** 통계코드명 (타이틀 표시용) */
+    statsNm?: string;
+    sewerBzmnCd: string;
+    ctpvNm: string;
+    sggNm: string | null;
+    vrfcSn: number;
+    vrfcMthdCd: string;
+    vrfcMthdNm: string;
+    vrfcTrgtNm: string;
+    rsnExpln: string;
+    nowVlCn: string;
+    compVlCn: string | null;
+    vrfcStatusNm: string;
+}
+
+export interface VerificationInputReportPageInfo {
+    totalElements: number;
+    totalPages: number;
+    currentPage: number;
+    size: number;
+}
+
+export interface VerificationInputReportData {
+    verifyTypeCountingInfo: VerificationInputReportTypeCountingInfo;
+    verifyResultList: VerificationInputReportItem[];
+    pageInfo: VerificationInputReportPageInfo;
+}
+
+export interface VerificationInputReportResponse {
+    status: string;
+    message?: string;
+    data?: VerificationInputReportData;
+}
+
+export interface VerificationInputReportService {
+    getVerificationInputReport(
+        param: VerificationInputReportRequest,
+    ): Promise<VerificationInputReportResponse>;
+}
diff --git a/apps/st/src/pages/auth/login/ui/login-page.tsx b/apps/st/src/pages/auth/login/ui/login-page.tsx
index 8d2b3300a..c81a6cdc4 100644
--- a/apps/st/src/pages/auth/login/ui/login-page.tsx
+++ b/apps/st/src/pages/auth/login/ui/login-page.tsx
@@ -1,129 +1,156 @@
 "use client";
 
+import { useState } from "react";
 import Image from "next/image";
+
+import { authService } from "@/entities/auth";
 import { images } from "@common/assets";
-import { LoginApi } from "@/entities/auth";
+
 import "./login.css";
 
 function LoginPage() {
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+    const [errorMessage, setErrorMessage] = useState<string>("");
 
-    const formData = new FormData(e.target as HTMLFormElement);
-    const userId = formData.get("id") as string;
-    const password = formData.get("password") as string;
+    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setErrorMessage("");
 
-    await LoginApi.login({ userId, password });
-    window.location.href = "/statistics";
-  };
+        const formData = new FormData(e.target as HTMLFormElement);
+        const userId = formData.get("id") as string;
+        const password = formData.get("password") as string;
 
-  return (
-    <div className="login fx">
-      <div className="left_box fx">
-        <div className="text">
-          <h1>
-            유역하수도통합플랫폼
-            <br />
-            <span>하수도통계 관리시스템</span>
-          </h1>
-          <p>유역하수도통합플랫폼 하수도통계 관리시스템에 오신 것을 환영합니다.</p>
-        </div>
-        <div className="img">
-          <Image src={images.logo} width={229} height={46} alt="logo" />
-        </div>
-      </div>
-      <form
-        id="loginForm"
-        name="loginForm"
-        method="post"
-        onSubmit={handleSubmit}
-      >
-        <div className="login_box fx">
-          <ul className="fx">
-            <li>
-              <h2>ID</h2>
-              <div className="input_st st1">
-                <i className="diveicon di-account-box" />
-                <input
-                  type="text"
-                  className="id"
-                  title="아이디를 입력하세요."
-                  id="id"
-                  name="id"
-                  maxLength={12}
-                />
-              </div>
-            </li>
-            <li>
-              <h2>PASSWORD</h2>
-              <div className="input_st st2">
-                <i className="diveicon di-key" />
-                <input
-                  type="password"
-                  className="input_style"
-                  maxLength={25}
-                  title="비밀번호를 입력하세요."
-                  id="password"
-                  name="password"
-                />
-              </div>
-            </li>
-          </ul>
-          <div className="bottom_box fx">
-            <div className="checks fx">
-              <input
-                type="checkbox"
-                name="checkId"
-                title="로그인ID 저장여부"
-                id="checkId"
-              />
-              <label htmlFor="checkId">아이디저장</label>
+        try {
+            await authService.login({ userId, password });
+            window.location.href = "/statistics";
+        } catch (error) {
+            const message =
+                error instanceof Error
+                    ? error.message
+                    : "로그인에 실패했습니다.";
+            setErrorMessage(message);
+        }
+    };
+
+    return (
+        <div className="login fx">
+            <div className="left_box fx">
+                <div className="text">
+                    <h1>
+                        유역하수도통합플랫폼
+                        <br />
+                        <span>하수도통계 관리시스템</span>
+                    </h1>
+                    <p>
+                        유역하수도통합플랫폼 하수도통계 관리시스템에 오신 것을
+                        환영합니다.
+                    </p>
+                </div>
+                <div className="img">
+                    <Image
+                        src={images.logo}
+                        width={229}
+                        height={46}
+                        alt="logo"
+                    />
+                </div>
             </div>
-            {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
-          </div>
-          <button type="submit" className="login_btn fx">
-            <span>LOGIN</span>
-          </button>
-          <div className="footer">
-            <div className="copy fx">
-              <p>copyright © 2023 KECO. All rights reserved.</p>
-            </div>
-            <div className="fot_btn fx">
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
-                target="_blank"
-              >
-                개인정보처리방침
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
-                target="_blank"
-              >
-                저작권정책안내
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
-                target="_blank"
-              >
-                이메일무단수집거부
-              </a>
-            </div>
-            <p className="addr fx">
-              <span>
-                주소 : (22689) 인천광역시 서구 환경로 42(경서동
-                종합환경연구단지)
-              </span>
-              <span>
-                전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
-                3722
-              </span>
-              <span>팩스 :032-590-3729</span>
-            </p>
-          </div>
+            <form
+                id="loginForm"
+                name="loginForm"
+                method="post"
+                onSubmit={handleSubmit}
+            >
+                <div className="login_box fx">
+                    <ul className="fx">
+                        <li>
+                            <h2>ID</h2>
+                            <div className="input_st st1">
+                                <i className="diveicon di-account-box" />
+                                <input
+                                    type="text"
+                                    className="id"
+                                    title="아이디를 입력하세요."
+                                    id="id"
+                                    name="id"
+                                    maxLength={12}
+                                />
+                            </div>
+                        </li>
+                        <li>
+                            <h2>PASSWORD</h2>
+                            <div className="input_st st2">
+                                <i className="diveicon di-key" />
+                                <input
+                                    type="password"
+                                    className="input_style"
+                                    maxLength={25}
+                                    title="비밀번호를 입력하세요."
+                                    id="password"
+                                    name="password"
+                                />
+                            </div>
+                        </li>
+                    </ul>
+                    <div className="bottom_box fx">
+                        <div className="checks fx">
+                            <input
+                                type="checkbox"
+                                name="checkId"
+                                title="로그인ID 저장여부"
+                                id="checkId"
+                            />
+                            <label htmlFor="checkId">아이디저장</label>
+                        </div>
+                        {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
+                    </div>
+                    {errorMessage && (
+                        <div className="error_message">
+                            <span>{errorMessage}</span>
+                        </div>
+                    )}
+                    <button type="submit" className="login_btn fx">
+                        <span>LOGIN</span>
+                    </button>
+                    <div className="footer">
+                        <div className="copy fx">
+                            <p>copyright © 2023 KECO. All rights reserved.</p>
+                        </div>
+                        <div className="fot_btn fx">
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
+                                target="_blank"
+                            >
+                                개인정보처리방침
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
+                                target="_blank"
+                            >
+                                저작권정책안내
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
+                                target="_blank"
+                            >
+                                이메일무단수집거부
+                            </a>
+                        </div>
+                        <p className="addr fx">
+                            <span>
+                                주소 : (22689) 인천광역시 서구 환경로 42(경서동
+                                종합환경연구단지)
+                            </span>
+                            <span>
+                                전화 : (시스템) 032-590-4321, 3752, 4314 / (통
+                                계) 032-590-3723, 3722
+                            </span>
+                            <span>팩스 :032-590-3729</span>
+                        </p>
+                    </div>
+                </div>
+            </form>
         </div>
-      </form>
-    </div>
-  );
+    );
 }
 
 export { LoginPage };
diff --git a/apps/st/src/pages/statistics/lib/hooks/use-dnd-sensors.ts b/apps/st/src/pages/statistics/lib/hooks/use-dnd-sensors.ts
new file mode 100644
index 000000000..f78c405a5
--- /dev/null
+++ b/apps/st/src/pages/statistics/lib/hooks/use-dnd-sensors.ts
@@ -0,0 +1,16 @@
+import {
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+
+export function useDndSensors() {
+  return useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+}
diff --git a/apps/st/src/pages/statistics/lib/hooks/use-panel-order.ts b/apps/st/src/pages/statistics/lib/hooks/use-panel-order.ts
new file mode 100644
index 000000000..51c18cd2c
--- /dev/null
+++ b/apps/st/src/pages/statistics/lib/hooks/use-panel-order.ts
@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+
+import type { DragEndEvent } from "@dnd-kit/core";
+import { arrayMove } from "@dnd-kit/sortable";
+
+import type { PanelItem } from "../../model/types";
+
+interface UsePanelOrderProps {
+    initialPanels: PanelItem[];
+    storageKey: string;
+}
+
+export function usePanelOrder({
+    initialPanels,
+    storageKey,
+}: UsePanelOrderProps) {
+    const [panels, setPanels] = useState<PanelItem[]>(initialPanels);
+    const [isInitialized, setIsInitialized] = useState(false);
+
+    useEffect(() => {
+        if (initialPanels.length === 0 || isInitialized) return;
+
+        const saved = localStorage.getItem(storageKey);
+        if (saved) {
+            try {
+                const savedIds = JSON.parse(saved);
+                const restoredPanels = savedIds
+                    .map((id: string) => initialPanels.find((p) => p.id === id))
+                    .filter(Boolean);
+                if (restoredPanels.length === initialPanels.length) {
+                    setPanels(restoredPanels);
+                }
+            } catch {
+                setPanels(initialPanels);
+            }
+        } else {
+            setPanels(initialPanels);
+        }
+        setIsInitialized(true);
+    }, [storageKey, initialPanels, isInitialized]);
+
+    const handleDragEnd = (event: DragEndEvent) => {
+        const { active, over } = event;
+
+        if (over && active.id !== over.id) {
+            setPanels((items) => {
+                const oldIndex = items.findIndex(
+                    (item) => item.id === active.id,
+                );
+                const newIndex = items.findIndex((item) => item.id === over.id);
+                const newItems = arrayMove(items, oldIndex, newIndex);
+
+                localStorage.setItem(
+                    storageKey,
+                    JSON.stringify(newItems.map((item) => item.id)),
+                );
+
+                return newItems;
+            });
+        }
+    };
+
+    return { panels, handleDragEnd };
+}
diff --git a/apps/st/src/pages/statistics/model/panel-config.tsx b/apps/st/src/pages/statistics/model/panel-config.tsx
new file mode 100644
index 000000000..98d4ea0f2
--- /dev/null
+++ b/apps/st/src/pages/statistics/model/panel-config.tsx
@@ -0,0 +1,60 @@
+import type { DashboardSearchParams } from "@/entities/statistics/model/dashboard/dashboard-interface";
+import type { ScheduleInfoSearchParams } from "@/entities/statistics/model/dashboard/schedule-info-interface";
+
+import { NoticePanel } from "../ui/panels/notice-panel";
+import { ScheduleCalendarPanel } from "../ui/panels/schedule-calendar-panel";
+import { ScheduleInfoPanel } from "../ui/panels/schedule-info-panel";
+import { StatsSubmissionPanel } from "../ui/panels/stats-submission-panel";
+import { UnSubmitPanel } from "../ui/panels/unsubmit-panel";
+// import { VrfcErrPanel } from "../ui/panels/vrfc-err-panel";
+import { VrfcReportPanel } from "../ui/panels/vrfc-report-panel";
+
+import type { PanelItem } from "./types";
+
+interface GetInitialPanelsParams {
+    dashboardParams: DashboardSearchParams | null;
+    scheduleInfoParams: ScheduleInfoSearchParams | null;
+}
+
+export function getInitialPanels({
+    dashboardParams,
+    scheduleInfoParams,
+}: GetInitialPanelsParams): PanelItem[] {
+    return [
+        {
+            id: "panel-a",
+            component: <StatsSubmissionPanel params={dashboardParams} />,
+            className: "",
+        },
+        {
+            id: "panel-b",
+            component: <ScheduleInfoPanel params={scheduleInfoParams} />,
+            className: "",
+        },
+        {
+            id: "panel-c",
+            component: <NoticePanel />,
+            className: "",
+        },
+        // {
+        //     id: "panel-d",
+        //     component: <VrfcErrPanel params={dashboardParams} />,
+        //     className: "",
+        // },
+        {
+            id: "panel-d",
+            component: <UnSubmitPanel params={dashboardParams} />,
+            className: "",
+        },
+        {
+            id: "panel-e",
+            component: <VrfcReportPanel params={dashboardParams} />,
+            className: "",
+        },
+        {
+            id: "panel-f",
+            component: <ScheduleCalendarPanel />,
+            className: "",
+        },
+    ];
+}
diff --git a/apps/st/src/pages/statistics/model/types.ts b/apps/st/src/pages/statistics/model/types.ts
new file mode 100644
index 000000000..34b1ea791
--- /dev/null
+++ b/apps/st/src/pages/statistics/model/types.ts
@@ -0,0 +1,5 @@
+export interface PanelItem {
+  id: string;
+  component: React.ReactNode;
+  className?: string;
+}
diff --git a/apps/st/src/pages/statistics/ui/panels/notice-panel.tsx b/apps/st/src/pages/statistics/ui/panels/notice-panel.tsx
new file mode 100644
index 000000000..bb3804b6c
--- /dev/null
+++ b/apps/st/src/pages/statistics/ui/panels/notice-panel.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { createColumnHelper, getCoreRowModel } from "@tanstack/react-table";
+import dayjs from "dayjs";
+
+import { ST_DASHBOARD_BBS_ID } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
+import { type UserPost, useUserPostList } from "@/entities/post";
+import { Button } from "@common/components";
+
+import { useDragHandle } from "../sortable-panel";
+
+export function NoticePanel() {
+    const { dragHandleProps, isDragging } = useDragHandle();
+    const router = useRouter();
+
+    const userPostListQuery = useUserPostList({
+        page: 0,
+        size: 4,
+        keywordType: "bbsTypeCd",
+        keyword: "BBSNOTICE",
+    });
+
+    const handleRowClick = (post: UserPost) => {
+        router.push(`/cms/bbsnotice/${ST_DASHBOARD_BBS_ID}/${post.pstNo}`);
+    };
+
+    const handleMoreClick = () => {
+        router.push(`/cms/bbsnotice/${ST_DASHBOARD_BBS_ID}`);
+    };
+
+    const { tableComponent } = useDataTable({
+        query: userPostListQuery,
+        tableOptions: {
+            columns: noticeColumns,
+            getCoreRowModel: getCoreRowModel(),
+        },
+        dataTableOptions: {
+            variant: "line",
+            onRowClick: handleRowClick,
+        },
+    });
+
+    return (
+        <div className="card card-border !m-0 h-full border-border bg-background text-foreground">
+            <div
+                className={`card-header cursor-grab border-border active:cursor-grabbing ${isDragging ? "opacity-50" : ""}`}
+                {...dragHandleProps}
+                title="헤더를 드래그하여 패널 순서 변경"
+            >
+                <h3 className="text-2xl font-semibold">공지사항</h3>
+            </div>
+            <div className="py-2 text-right">
+                <Button
+                    size="sm"
+                    color="white"
+                    className="!text-xl"
+                    onClick={handleMoreClick}
+                >
+                    더보기
+                </Button>
+            </div>
+            {tableComponent}
+        </div>
+    );
+}
+
+const columnHelper = createColumnHelper<UserPost>();
+
+const noticeColumns = [
+    columnHelper.accessor("pstTtl", {
+        header: () => <div className="text-left">제목</div>,
+        cell: ({ row }) => (
+            <div className="min-w-[20rem] truncate px-2 text-left">
+                {row.original.pstTtl}
+            </div>
+        ),
+    }),
+    columnHelper.accessor("wrtrNm", {
+        header: "작성자",
+    }),
+    columnHelper.accessor("regDt", {
+        header: "등록일",
+        cell: ({ row }) => formatDate(row.original.regDt),
+    }),
+];
+
+function formatDate(value: string) {
+    return dayjs(value).format("YYYY-MM-DD");
+}
diff --git a/apps/st/src/pages/statistics/ui/panels/schedule-calendar-panel.tsx b/apps/st/src/pages/statistics/ui/panels/schedule-calendar-panel.tsx
new file mode 100644
index 000000000..8f85b1351
--- /dev/null
+++ b/apps/st/src/pages/statistics/ui/panels/schedule-calendar-panel.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import dayjs from "dayjs";
+
+import { SITE_ID } from "@/shared/config";
+import { useSchedules } from "@/entities/schedule";
+import { LoadingWithAnimation } from "@common/components";
+
+import { useDragHandle } from "../sortable-panel";
+
+// FullCalendar는 클라이언트 전용이므로 dynamic import
+const FullCalendar = dynamic(() => import("@fullcalendar/react"), {
+    ssr: false,
+});
+
+export function ScheduleCalendarPanel() {
+    const { dragHandleProps, isDragging } = useDragHandle();
+
+    // TBD: 초기 날짜 범위 설정 로직
+    const today = dayjs();
+    const startOfMonth = today.startOf("month").format("YYYY-MM-DD");
+    const endOfMonth = today.endOf("month").format("YYYY-MM-DD");
+
+    const { data, isLoading } = useSchedules({
+        siteId: SITE_ID,
+        schdlBgngYmd: startOfMonth,
+        schdlEndYmd: endOfMonth,
+    });
+
+    return (
+        <div className="card card-border !m-0 h-full border-border bg-background text-foreground">
+            <div
+                className={`card-header cursor-grab border-border active:cursor-grabbing ${isDragging ? "opacity-50" : ""}`}
+                {...dragHandleProps}
+                title="헤더를 드래그하여 패널 순서 변경"
+            >
+                <h3 className="text-2xl font-semibold">일정관리</h3>
+            </div>
+            <div className="card-body max-h-[calc(100%-3.25rem)] py-2.5">
+                {isLoading && (
+                    <div className="flex h-full items-center justify-center">
+                        <div className="relative size-[5rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
+                    </div>
+                )}
+                {data && (
+                    <div className="h-[48rem]">
+                        <FullCalendar
+                            plugins={[dayGridPlugin, timeGridPlugin]}
+                            initialView="dayGridMonth"
+                            locale="ko"
+                            headerToolbar={{
+                                left: "prev,next",
+                                center: "title",
+                                right: "dayGridMonth,timeGridWeek",
+                            }}
+                            buttonText={{
+                                month: "월",
+                                week: "주",
+                            }}
+                            events={data.map((schedule) => ({
+                                id: schedule.schdlSn.toString(),
+                                title: schedule.schdlTtl,
+                                start: schedule.schdlBgngDt,
+                                end: schedule.schdlEndDt,
+                                // TBD: allDay 판단 기준 (1439분 이상?)
+                                allDay: true,
+                            }))}
+                            height="100%"
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/apps/st/src/pages/statistics/ui/panels/schedule-info-panel.tsx b/apps/st/src/pages/statistics/ui/panels/schedule-info-panel.tsx
new file mode 100644
index 000000000..6a5e3602d
--- /dev/null
+++ b/apps/st/src/pages/statistics/ui/panels/schedule-info-panel.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import dayjs from "dayjs";
+
+import type { ScheduleInfoSearchParams } from "@/entities/statistics";
+import { useScheduleInfo } from "@/entities/statistics";
+import {
+    Badge,
+    type BadgeProps,
+    LoadingWithAnimation,
+} from "@common/components";
+
+import { useDragHandle } from "../sortable-panel";
+
+interface ScheduleInfoPanelProps {
+    params: ScheduleInfoSearchParams | null;
+}
+
+const CURRENT_STATUS_LABEL_MAP = {
+    INPT: "입력중",
+    VRFC: "검증중",
+    NONE: "기간외",
+};
+
+const CURRENT_STATUS_COLOR_MAP = {
+    INPT: "",
+    VRFC: "gray",
+    NONE: "lightGray",
+};
+
+export function ScheduleInfoPanel({ params }: ScheduleInfoPanelProps) {
+    const { dragHandleProps, isDragging } = useDragHandle();
+    const { data, isLoading, error } = useScheduleInfo(params);
+
+    return (
+        <div className="card card-border !m-0 h-full border-border bg-background text-foreground">
+            <div
+                className={`card-header cursor-grab border-border active:cursor-grabbing ${isDragging ? "opacity-50" : ""}`}
+                {...dragHandleProps}
+                title="헤더를 드래그하여 패널 순서 변경"
+            >
+                <h3 className="text-2xl font-semibold">일정안내</h3>
+            </div>
+            <div className="card-body max-h-[calc(100%-3.25rem)] py-2.5">
+                {isLoading && (
+                    <div className="flex h-full items-center justify-center">
+                        <div className="relative size-[5rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
+                    </div>
+                )}
+                {error && (
+                    <div className="flex h-full items-center justify-center">
+                        데이터를 불러올 수 없습니다.
+                    </div>
+                )}
+                {data && (
+                    <>
+                        <div className="space-y-4">
+                            <div className="mt-2 flex items-center justify-between">
+                                <h4 className="px-2 text-2xl font-semibold tracking-tight text-label">
+                                    이번 주 주요 일정
+                                </h4>
+                                <div className="flex items-center gap-2">
+                                    <span className="tracking-tight text-label">
+                                        현재 진행 상태
+                                    </span>
+                                    <Badge
+                                        color={
+                                            CURRENT_STATUS_COLOR_MAP[
+                                                data.currentSe as keyof typeof CURRENT_STATUS_COLOR_MAP
+                                            ] as BadgeProps["color"]
+                                        }
+                                        className="rounded-full !px-3"
+                                    >
+                                        {
+                                            CURRENT_STATUS_LABEL_MAP[
+                                                data.currentSe as keyof typeof CURRENT_STATUS_LABEL_MAP
+                                            ]
+                                        }
+                                    </Badge>
+                                </div>
+                            </div>
+                            <div className="space-y-2">
+                                <div className="flex items-center justify-between rounded-sm border border-border p-3">
+                                    <Badge size="lg" className="font-semibold">
+                                        {data.inptSeCd}차 입력기간
+                                    </Badge>
+                                    <p className="text-2xl">
+                                        {dayjs(data.inptBgngYmd).format(
+                                            "YYYY.MM.DD",
+                                        )}{" "}
+                                        ~{" "}
+                                        {dayjs(data.inptEndYmd).format(
+                                            "YYYY.MM.DD",
+                                        )}
+                                    </p>
+                                </div>
+                                <div className="flex items-center justify-between rounded-sm border border-border p-3">
+                                    <Badge
+                                        size="lg"
+                                        color="gray"
+                                        className="font-semibold"
+                                    >
+                                        {data.vrfcSeCd}차 검증기간
+                                    </Badge>
+                                    <p className="text-2xl">
+                                        {dayjs(data.vrfcBgngYmd).format(
+                                            "YYYY.MM.DD",
+                                        )}{" "}
+                                        ~{" "}
+                                        {dayjs(data.vrfcEndYmd).format(
+                                            "YYYY.MM.DD",
+                                        )}
+                                    </p>
+                                </div>
+                            </div>
+                            <div className="flex items-center justify-center gap-4 py-4 tracking-tight">
+                                <span className="text-3xl font-semibold">
+                                    {data.ddayLabel}
+                                </span>
+                                <Badge
+                                    size="lg"
+                                    className="rounded-sm !py-4 !text-5xl font-bold"
+                                >
+                                    {data.dday}
+                                </Badge>
+                            </div>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/apps/st/src/pages/statistics/ui/panels/stats-submission-panel.tsx b/apps/st/src/pages/statistics/ui/panels/stats-submission-panel.tsx
new file mode 100644
index 000000000..e9743aaa9
--- /dev/null
+++ b/apps/st/src/pages/statistics/ui/panels/stats-submission-panel.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { Frown, Laugh, Meh, OctagonAlert, OctagonX, Smile } from "lucide-react";
+
+import {
+    useDashboardEcptReqCount,
+    useDashboardStatsSubmissionRate,
+    useDashboardVrfcErrCount,
+} from "@/entities/statistics";
+import type { DashboardSearchParams } from "@/entities/statistics/model/dashboard/dashboard-interface";
+import { LoadingWithAnimation, Progress } from "@common/components";
+
+import { useDragHandle } from "../sortable-panel";
+
+interface StatsSubmissionPanelProps {
+    params: DashboardSearchParams | null;
+}
+
+const STATUS_LEVEL_TEXT_COLOR = {
+    GREAT: "text-blue-500",
+    GOOD: "text-green-500",
+    WARNING: "text-yellow-500",
+    BAD: "text-red-500",
+};
+
+const STATUS_LEVEL_EMOJI = {
+    GREAT: <Laugh size={160} className={STATUS_LEVEL_TEXT_COLOR.GREAT} />,
+    GOOD: <Smile size={160} className={STATUS_LEVEL_TEXT_COLOR.GOOD} />,
+    WARNING: <Meh size={160} className={STATUS_LEVEL_TEXT_COLOR.WARNING} />,
+    BAD: <Frown size={160} className={STATUS_LEVEL_TEXT_COLOR.BAD} />,
+};
+
+export function StatsSubmissionPanel({ params }: StatsSubmissionPanelProps) {
+    const { dragHandleProps, isDragging } = useDragHandle();
+    const { data, isLoading, error } = useDashboardStatsSubmissionRate(params);
+    const vrfcErrQuery = useDashboardVrfcErrCount(params);
+    const ecptReqQuery = useDashboardEcptReqCount(params);
+
+    return (
+        <div className="card card-border !m-0 h-full border-border bg-background text-foreground">
+            {/* <div
+                className={`card-header cursor-grab border-border active:cursor-grabbing ${isDragging ? "opacity-50" : ""}`}
+                {...dragHandleProps}
+                title="헤더를 드래그하여 패널 순서 변경"
+            >
+                <h3 className="text-2xl font-semibold">통계입력현황</h3>
+            </div> */}
+            <div
+                className={`card-body cursor-grab py-2 active:cursor-grabbing ${isDragging ? "opacity-50" : ""}`}
+                {...dragHandleProps}
+            >
+                <div className="flex h-full gap-6 px-2">
+                    <div className="h-full flex-1 flex-col">
+                        <h3 className="text-2xl font-semibold">통계입력현황</h3>
+                        {isLoading && (
+                            <div className="flex h-full items-center justify-center">
+                                <div className="relative size-[5rem]">
+                                    <LoadingWithAnimation color="primary" />
+                                </div>
+                            </div>
+                        )}
+                        {error && (
+                            <div className="flex h-full items-center justify-center py-8 text-center">
+                                데이터를 불러올 수 없습니다.
+                            </div>
+                        )}
+                        <div className="h-full">
+                            {data && (
+                                <div className="flex h-full flex-col items-center gap-2">
+                                    {/* 통계제출률 상태 이모지 */}
+                                    <div className="flex justify-center">
+                                        {
+                                            STATUS_LEVEL_EMOJI[
+                                                data.statusLevel as keyof typeof STATUS_LEVEL_EMOJI
+                                            ]
+                                        }
+                                    </div>
+
+                                    {/* 통계제출률 프로그레스바 */}
+                                    <div className="w-full space-y-3">
+                                        <div className="flex w-full justify-between">
+                                            <span className="text-2xl">
+                                                통계제출률
+                                            </span>
+                                            <span className="text-2xl font-semibold">
+                                                {data.submissionRate?.toFixed(
+                                                    1,
+                                                )}
+                                                %
+                                                <span className="ml-1">
+                                                    ({data.submittedCount}/
+                                                    {data.totalCount})
+                                                </span>
+                                            </span>
+                                        </div>
+                                        <Progress
+                                            value={data.submissionRate}
+                                            className="h-10 bg-muted"
+                                        />
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <div className="h-full flex-[0.5]">
+                        <h3 className="text-2xl font-semibold">
+                            검증오류 및 예외
+                        </h3>
+                        <div className="mt-4 space-y-4">
+                            {/* 검증오류 수 카드 */}
+                            <div className="flex flex-col items-center justify-center gap-2 rounded-lg border border-red-200 bg-red-100 p-4 text-center">
+                                <div className="flex flex-col items-center gap-2">
+                                    <OctagonX
+                                        className="text-red-600"
+                                        size={20}
+                                    />
+                                    <span className="text-lg">검증오류 수</span>
+                                </div>
+                                {vrfcErrQuery.isLoading && (
+                                    <div className="text-2xl font-bold">-</div>
+                                )}
+                                {vrfcErrQuery.error && (
+                                    <div className="text-sm">
+                                        데이터를 불러올 수 없습니다.
+                                    </div>
+                                )}
+                                {vrfcErrQuery.data && (
+                                    <div className="text-5xl font-bold text-red-600">
+                                        {vrfcErrQuery.data.vrfcErrCount.toLocaleString()}
+                                    </div>
+                                )}
+                            </div>
+
+                            {/* 예외신청 수 카드 */}
+                            <div className="flex flex-col items-center justify-center gap-2 rounded-lg border border-orange-200 bg-orange-100 p-4 text-center">
+                                <div className="flex flex-col items-center gap-2">
+                                    <OctagonAlert
+                                        className="text-orange-600"
+                                        size={20}
+                                    />
+                                    <span className="text-lg">예외신청 수</span>
+                                </div>
+                                {ecptReqQuery.isLoading && (
+                                    <div className="text-2xl font-bold">-</div>
+                                )}
+                                {ecptReqQuery.error && (
+                                    <div className="text-sm">
+                                        데이터를 불러올 수 없습니다.
+                                    </div>
+                                )}
+                                {ecptReqQuery.data && (
+                                    <div className="text-5xl font-bold text-orange-600">
+                                        {ecptReqQuery.data.ecptReqCount.toLocaleString()}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/st/src/pages/statistics/ui/panels/unsubmit-panel.tsx b/apps/st/src/pages/statistics/ui/panels/unsubmit-panel.tsx
new file mode 100644
index 000000000..a7eeb6551
--- /dev/null
+++ b/apps/st/src/pages/statistics/ui/panels/unsubmit-panel.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useDashboardUnSubmitCount } from "@/entities/statistics";
+import type { DashboardSearchParams } from "@/entities/statistics/model/dashboard/dashboard-interface";
+import { Badge, LoadingWithAnimation } from "@common/components";
+
+import { useDragHandle } from "../sortable-panel";
+
+interface UnSubmitPanelProps {
+    params: DashboardSearchParams | null;
+}
+
+export function UnSubmitPanel({ params }: UnSubmitPanelProps) {
+    const { dragHandleProps, isDragging } = useDragHandle();
+    const { data, isLoading, error } = useDashboardUnSubmitCount(params);
+
+    return (
+        <div className="card card-border !m-0 h-full border-border bg-background text-foreground">
+            <div
+                className={`card-header cursor-grab border-border active:cursor-grabbing ${isDragging ? "opacity-50" : ""}`}
+                {...dragHandleProps}
+                title="헤더를 드래그하여 패널 순서 변경"
+            >
+                <h3 className="text-2xl font-semibold">미제출 지표</h3>
+                {data && (
+                    <Badge size="lg" className="rounded-full !px-3">
+                        {data.unSubmittedCount ?? 0}건
+                    </Badge>
+                )}
+            </div>
+            <div className="card-body max-h-[calc(100%-3.25rem)] py-2.5">
+                {isLoading && (
+                    <div className="flex h-full items-center justify-center">
+                        <div className="relative size-[5rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
+                    </div>
+                )}
+                {error && (
+                    <div className="flex h-full items-center justify-center">
+                        데이터를 불러올 수 없습니다.
+                    </div>
+                )}
+                {data && (
+                    <div className="h-full">
+                        {data.statusList.length === 0 ? (
+                            <div className="flex h-full items-center justify-center">
+                                미제출 지표가 없습니다.
+                            </div>
+                        ) : (
+                            <div className="max-h-[48rem] space-y-2 overflow-y-auto">
+                                {data.statusList.map((item, i) => (
+                                    <div
+                                        key={`${i}-${item.statsCd}`}
+                                        className="flex items-center justify-between gap-4 rounded-sm border border-border p-3"
+                                    >
+                                        <p className="font-medium">
+                                            {item.statsNm}
+                                        </p>
+                                        {params?.dtlInstCd !==
+                                            "ROLE_USER05" && (
+                                            <span className="whitespace-nowrap text-lg text-muted-foreground">
+                                                {item.sidoSggNm}
+                                            </span>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/apps/st/src/pages/statistics/ui/panels/vrfc-err-panel.tsx b/apps/st/src/pages/statistics/ui/panels/vrfc-err-panel.tsx
new file mode 100644
index 000000000..58fb11477
--- /dev/null
+++ b/apps/st/src/pages/statistics/ui/panels/vrfc-err-panel.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { OctagonAlert, OctagonX } from "lucide-react";
+
+import {
+    useDashboardEcptReqCount,
+    useDashboardVrfcErrCount,
+} from "@/entities/statistics";
+import type { DashboardSearchParams } from "@/entities/statistics/model/dashboard/dashboard-interface";
+
+import { useDragHandle } from "../sortable-panel";
+
+interface VrfcErrPanelProps {
+    params: DashboardSearchParams | null;
+}
+
+export function VrfcErrPanel({ params }: VrfcErrPanelProps) {
+    const { dragHandleProps, isDragging } = useDragHandle();
+    const vrfcErrQuery = useDashboardVrfcErrCount(params);
+    const ecptReqQuery = useDashboardEcptReqCount(params);
+
+    return (
+        <div className="card card-border !m-0 h-full border-border bg-background text-foreground">
+            <div
+                className={`card-header cursor-grab border-border active:cursor-grabbing ${isDragging ? "opacity-50" : ""}`}
+                {...dragHandleProps}
+                title="헤더를 드래그하여 패널 순서 변경"
+            >
+                <h3 className="text-2xl font-semibold">검증오류 및 예외</h3>
+            </div>
+            <div className="card-body max-h-[calc(100%-3.25rem)] py-2.5">
+                <div className="grid h-full grid-cols-2 gap-4">
+                    {/* 검증오류 수 카드 */}
+                    <div className="flex flex-col items-center justify-center gap-2 rounded-lg border border-red-200 bg-red-100 p-4 text-center">
+                        <div className="flex flex-col items-center gap-2">
+                            <OctagonX className="text-red-600" size={20} />
+                            <span className="text-lg">검증오류 수</span>
+                        </div>
+                        {vrfcErrQuery.isLoading && (
+                            <div className="text-2xl font-bold">-</div>
+                        )}
+                        {vrfcErrQuery.error && (
+                            <div className="text-sm">
+                                데이터를 불러올 수 없습니다.
+                            </div>
+                        )}
+                        {vrfcErrQuery.data && (
+                            <div className="text-5xl font-bold text-red-600">
+                                {vrfcErrQuery.data.vrfcErrCount.toLocaleString()}
+                            </div>
+                        )}
+                    </div>
+
+                    {/* 예외신청 수 카드 */}
+                    <div className="flex flex-col items-center justify-center gap-2 rounded-lg border border-orange-200 bg-orange-100 p-4 text-center">
+                        <div className="flex flex-col items-center gap-2">
+                            <OctagonAlert
+                                className="text-orange-600"
+                                size={20}
+                            />
+                            <span className="text-lg">예외신청 수</span>
+                        </div>
+                        {ecptReqQuery.isLoading && (
+                            <div className="text-2xl font-bold">-</div>
+                        )}
+                        {ecptReqQuery.error && (
+                            <div className="text-sm">
+                                데이터를 불러올 수 없습니다.
+                            </div>
+                        )}
+                        {ecptReqQuery.data && (
+                            <div className="text-5xl font-bold text-orange-600">
+                                {ecptReqQuery.data.ecptReqCount.toLocaleString()}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/st/src/pages/statistics/ui/panels/vrfc-report-panel.tsx b/apps/st/src/pages/statistics/ui/panels/vrfc-report-panel.tsx
new file mode 100644
index 000000000..1463cc035
--- /dev/null
+++ b/apps/st/src/pages/statistics/ui/panels/vrfc-report-panel.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { useDashboardVrfcReport } from "@/entities/statistics";
+import type { DashboardSearchParams } from "@/entities/statistics/model/dashboard/dashboard-interface";
+import {
+    Badge,
+    type BadgeProps,
+    LoadingWithAnimation,
+} from "@common/components";
+
+import { useDragHandle } from "../sortable-panel";
+
+interface VrfcReportPanelProps {
+    params: DashboardSearchParams | null;
+}
+
+const TYPE_CODE_NAME_MAP: Record<string, string> = {
+    NV: "일반",
+    IMR: "I-MR",
+    HB: "HB",
+};
+
+const TYPE_CODE_COLOR_MAP: Record<string, BadgeProps["color"]> = {
+    NV: "gray",
+    IMR: "red",
+    HB: "blue",
+};
+
+export function VrfcReportPanel({ params }: VrfcReportPanelProps) {
+    const { dragHandleProps, isDragging } = useDragHandle();
+    const { data, isLoading, error } = useDashboardVrfcReport(params);
+
+    return (
+        <div className="card card-border !m-0 h-full border-border bg-background text-foreground">
+            <div
+                className={`card-header cursor-grab border-border active:cursor-grabbing ${isDragging ? "opacity-50" : ""}`}
+                {...dragHandleProps}
+                title="헤더를 드래그하여 패널 순서 변경"
+            >
+                <h3 className="text-2xl font-semibold">이상치 선별보고서</h3>
+            </div>
+            <div className="card-body max-h-[calc(100%-3.25rem)] py-2.5">
+                {isLoading && (
+                    <div className="flex h-full items-center justify-center">
+                        <div className="relative size-[5rem]">
+                            <LoadingWithAnimation color="primary" />
+                        </div>
+                    </div>
+                )}
+                {error && (
+                    <div className="flex h-full items-center justify-center">
+                        데이터를 불러올 수 없습니다.
+                    </div>
+                )}
+                {data && (
+                    <div className="space-y-2">
+                        {/* TBD: typeCounts 표시 방법 (탭? 필터?) */}
+                        {data.typeCounts &&
+                            Object.keys(data.typeCounts).length > 0 && (
+                                <div className="flex flex-wrap gap-2">
+                                    {Object.entries(data.typeCounts).map(
+                                        ([type, count]) => (
+                                            <Badge
+                                                key={type}
+                                                color={
+                                                    TYPE_CODE_COLOR_MAP[type]
+                                                }
+                                                className="rounded-full px-2 py-1 text-lg"
+                                            >
+                                                {TYPE_CODE_NAME_MAP[type]}:{" "}
+                                                {count}
+                                            </Badge>
+                                        ),
+                                    )}
+                                </div>
+                            )}
+
+                        {/* TBD: 테이블 컬럼 정의, 증감 표시 방법 */}
+                        <div className="max-h-[44rem] overflow-y-auto">
+                            {data.list.length === 0 ? (
+                                <div className="flex h-full items-center justify-center">
+                                    이상치 항목이 없습니다.
+                                </div>
+                            ) : (
+                                <div className="space-y-2 tracking-tight">
+                                    {data.list.map((item, index) => (
+                                        <div
+                                            key={index}
+                                            className="flex flex-col rounded-sm border border-border p-3"
+                                        >
+                                            <div className="mb-2 flex items-center justify-between">
+                                                <span className="font-medium">
+                                                    {item.statsNm}
+                                                </span>
+                                                <Badge
+                                                    color={
+                                                        TYPE_CODE_COLOR_MAP[
+                                                            item.vrfcCd
+                                                        ]
+                                                    }
+                                                    className="text-sm"
+                                                >
+                                                    {
+                                                        TYPE_CODE_NAME_MAP[
+                                                            item.vrfcCd
+                                                        ]
+                                                    }
+                                                </Badge>
+                                            </div>
+                                            <p className="text-lg text-muted-foreground">
+                                                {item.rsnExpln}
+                                            </p>
+                                            <div className="flex justify-between text-lg text-muted-foreground">
+                                                <span>{item.admdstNm}</span>
+                                                <span>
+                                                    {/* TBD: 증감 표시 방법 (nowVlCn - compVlCn 계산?) */}
+                                                    현재: {item.nowVlCn ?? "-"}{" "}
+                                                    / 비교:{" "}
+                                                    {item.compVlCn ?? "-"}
+                                                </span>
+                                            </div>
+                                            {/* TBD: 등급/점수/단계/업데이트 시각 필드 미제공 */}
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/apps/st/src/pages/statistics/ui/sortable-panel.tsx b/apps/st/src/pages/statistics/ui/sortable-panel.tsx
new file mode 100644
index 000000000..89789d54b
--- /dev/null
+++ b/apps/st/src/pages/statistics/ui/sortable-panel.tsx
@@ -0,0 +1,60 @@
+import { createContext, useContext } from "react";
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+interface SortablePanelProps {
+    id: string;
+    children: React.ReactNode;
+    className?: string;
+}
+
+interface DragHandleContextValue {
+    dragHandleProps: React.HTMLAttributes<HTMLElement>;
+    isDragging: boolean;
+}
+
+const DragHandleContext = createContext<DragHandleContextValue | null>(null);
+
+export function SortablePanel({ id, children, className }: SortablePanelProps) {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+    } = useSortable({ id });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+    };
+
+    const contextValue: DragHandleContextValue = {
+        dragHandleProps: { ...attributes, ...listeners },
+        isDragging,
+    };
+
+    return (
+        <DragHandleContext.Provider value={contextValue}>
+            <div ref={setNodeRef} style={style} className={className}>
+                {children}
+            </div>
+        </DragHandleContext.Provider>
+    );
+}
+
+export function useDragHandle() {
+    const context = useContext(DragHandleContext);
+
+    if (!context) {
+        return {
+            dragHandleProps: {},
+            isDragging: false,
+        };
+    }
+
+    return context;
+}
diff --git a/apps/st/src/pages/statistics/ui/statistics-page.tsx b/apps/st/src/pages/statistics/ui/statistics-page.tsx
index a228a4d46..60db9d6be 100644
--- a/apps/st/src/pages/statistics/ui/statistics-page.tsx
+++ b/apps/st/src/pages/statistics/ui/statistics-page.tsx
@@ -1,26 +1,44 @@
 "use client";
 
-import { Suspense, useRef, useEffect } from "react";
+import { Suspense, useEffect, useMemo, useRef } from "react";
 import dynamic from "next/dynamic";
-import { useTabStore } from "@/store/tab-store";
-import { useAdminStore } from "@/store/admin-store";
-import Dashboard from "@/components/Dashboard";
+
 import { SkeletonPage } from "@/shared/ui/skeleton-page";
 
 import "@rsone/components/index.css";
 
+import Dashboard from "@/components/statistics/Dashboard";
+import { isBbsNoticeMenu } from "@/shared/lib/bbs-notice-menu";
+import {
+    parseStatisticsMenuUrlPath,
+    resolveStatisticsCategory,
+} from "@/shared/lib/statistics-menu-url";
+import { isVerificationSelectionReportMenu } from "@/shared/lib/verification-selection-report";
+import { useAdminStore } from "@/store/admin-store";
+import { useTabStore } from "@/store/tab-store";
+
 const StatisticsPage = () => {
     const { tabs, activeTabId } = useTabStore();
+
+    const tabsForBody = useMemo(
+        () =>
+            tabs.filter(
+                (tab) =>
+                    !isVerificationSelectionReportMenu(tab.menuItem) &&
+                    !isBbsNoticeMenu(tab.menuItem),
+            ),
+        [tabs],
+    );
     const fetchAdminInfo = useAdminStore((state) => state.fetchAdminInfo);
-    
+
     // 컴포넌트 캐시를 useRef로 유지 (재렌더링 시에도 유지됨)
     const componentCache = useRef(new Map<string, React.ComponentType>());
 
     // 닫힌 탭의 컴포넌트는 캐시에서 제거 (메모리 정리)
     useEffect(() => {
-        const currentTabIds = new Set(tabs.map(tab => tab.id));
+        const currentTabIds = new Set(tabs.map((tab) => tab.id));
         const cachedTabIds = Array.from(componentCache.current.keys());
-        
+
         cachedTabIds.forEach((cachedId) => {
             if (!currentTabIds.has(cachedId)) {
                 componentCache.current.delete(cachedId);
@@ -35,28 +53,32 @@ const StatisticsPage = () => {
     // 탭이 없으면 Dashboard 표시
     if (tabs.length === 0) {
         return (
-            <div className="card card-border !mt-6">
+            <div className="card card-border !mt-6 border-border bg-background">
                 <Dashboard />
             </div>
         );
     }
 
     return (
-        <div className="card card-border !mt-6">
-            {tabs.map((tab) => {
+        <div className="card card-border !mt-6 border-border bg-background">
+            {tabsForBody.map((tab) => {
                 // 렌더링 시점에 컴포넌트가 없으면 바로 로드
                 if (!componentCache.current.has(tab.id)) {
-                    const componentName = tab.urlPath;
-                    const parentComponentName = tab.parentEngNm;
-                    
-                    const DynamicComponent = dynamic(
-                        () => import(`@/components/statistics/${parentComponentName}/${componentName}`),
-                        { 
-                            ssr: false,
-                            loading: () => <SkeletonPage />
-                        }
+                    const { componentName } = parseStatisticsMenuUrlPath(tab.urlPath);
+                    const category = resolveStatisticsCategory(
+                        tab.urlPath,
+                        tab.parentEngNm,
                     );
-                    
+                    const resolvedComponentName = componentName || tab.urlPath;
+
+                    const DynamicComponent = dynamic(
+                        () =>
+                            import(
+                                `@/components/statistics/${category}/${resolvedComponentName}`
+                            ),
+                        { ssr: false, loading: () => <SkeletonPage /> },
+                    );
+
                     componentCache.current.set(tab.id, DynamicComponent);
                 }
 
@@ -68,7 +90,7 @@ const StatisticsPage = () => {
                 return (
                     <div
                         key={tab.id}
-                        style={{ display: isActive ? 'block' : 'none' }}
+                        style={{ display: isActive ? "block" : "none" }}
                     >
                         <Suspense fallback={<SkeletonPage />}>
                             <Component />
@@ -80,4 +102,4 @@ const StatisticsPage = () => {
     );
 };
 
-export default StatisticsPage;
\ No newline at end of file
+export default StatisticsPage;
diff --git a/apps/st/src/shared/api/client.ts b/apps/st/src/shared/api/client.ts
index 61368d875..b4f797764 100644
--- a/apps/st/src/shared/api/client.ts
+++ b/apps/st/src/shared/api/client.ts
@@ -1,4 +1,5 @@
 import { Client } from "@common/network";
+
 import { BASE_URL, ST_SERVICE_BASE_URL } from "../config/api";
 import { SITE_ID } from "../config/env";
 import { setCookie } from "../lib";
@@ -6,11 +7,11 @@ import { setCookie } from "../lib";
 setCookie("site-id-key", SITE_ID);
 
 export const client = Client.getInstance({
-  baseURL: BASE_URL,
-  siteId: SITE_ID,
+    baseURL: BASE_URL,
+    siteId: SITE_ID,
 });
 
 export const stClient = Client.getInstance({
-  baseURL: ST_SERVICE_BASE_URL,
-  siteId: SITE_ID,
-});
\ No newline at end of file
+    baseURL: ST_SERVICE_BASE_URL,
+    siteId: SITE_ID,
+});
diff --git a/apps/st/src/shared/api/index.ts b/apps/st/src/shared/api/index.ts
index b7b9d6121..4ccba4f0b 100644
--- a/apps/st/src/shared/api/index.ts
+++ b/apps/st/src/shared/api/index.ts
@@ -1 +1,2 @@
 export { client } from "./client";
+export { withAuthHeader } from "./with-auth-header";
diff --git a/apps/st/src/shared/api/with-auth-header.ts b/apps/st/src/shared/api/with-auth-header.ts
new file mode 100644
index 000000000..9f93d8407
--- /dev/null
+++ b/apps/st/src/shared/api/with-auth-header.ts
@@ -0,0 +1,16 @@
+import type { AxiosRequestConfig } from "axios";
+
+import { getToken } from "@/entities/auth/lib/token-manager";
+import { CLAIM_NAME } from "@/shared/config";
+
+export function withAuthHeader<T extends AxiosRequestConfig>(config: T = {} as T): T {
+    const authorization = getToken(CLAIM_NAME);
+    if (!authorization) return config;
+    return {
+        ...config,
+        headers: {
+            ...config.headers,
+            [CLAIM_NAME]: authorization,
+        },
+    };
+}
diff --git a/apps/st/src/shared/config/api.ts b/apps/st/src/shared/config/api.ts
index e00303d65..c7e0afcf6 100644
--- a/apps/st/src/shared/config/api.ts
+++ b/apps/st/src/shared/config/api.ts
@@ -70,8 +70,16 @@ export const ENDPOINT = {
         COMMON: "/st-management-service/api/v1/common",
         INPUT: "/st-input-service/api/v1/input",
         REVIEW: "/st-management-service/api/v1/review",
+        STATS: "/st-management-service/api/stats",
         INPUTCOMMON: "/st-input-service/api/v1/common",
         INPUTVERIFY: "/st-input-service/api/v1/verify",
+        TOTAL: "/st-management-service/api/v1/stats",
+        APPROVAL: "/st-management-service/api/stats",
+        DASHBOARD: "/st-management-service/api/v1/dashboard",
+    },
+    NTFTALK_SERVICE: {
+        TEMP: "/ntftalk-service/api/v1/ntftalk-temp",
+        ATA_SEND: "/ntftalk-service/api/v1/ata/send",
     },
     STATVERIFY_SERVICE: {
         VRFCTGT_MNG: "/statverify-service/api/v1/vrfc-trgt-mng",
@@ -80,6 +88,7 @@ export const ENDPOINT = {
         ST_ANLS_DTL: "/statverify-service/api/v1/st-anls-dtl",
         ST_ANLS_RSLT: "/statverify-service/api/v1/st-anls-rslt",
         IMR: "/statverify-service/api/v1/imr/outlier/detect",
+        SEWERST_USER: "/statverify-service/api/v1/sewerst",
     },
 };
 
diff --git a/apps/st/src/shared/config/auth.ts b/apps/st/src/shared/config/auth.ts
new file mode 100644
index 000000000..7c35ad9f0
--- /dev/null
+++ b/apps/st/src/shared/config/auth.ts
@@ -0,0 +1,17 @@
+import type { AuthConfig } from "@common/auth";
+
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  COOKIE_DOMAIN,
+  REFRESH_TOKEN,
+} from "./env";
+
+export const authConfig: AuthConfig = {
+  authUserId: AUTH_USER_ID || "token-id",
+  claimName: CLAIM_NAME || "Authorization",
+  cookieDomain: COOKIE_DOMAIN,
+  accessToken: ACCESS_TOKEN || "access-token",
+  refreshToken: REFRESH_TOKEN || "refresh-token",
+};
diff --git a/apps/st/src/shared/config/env.ts b/apps/st/src/shared/config/env.ts
index 560bf72e1..ea58d3f0d 100644
--- a/apps/st/src/shared/config/env.ts
+++ b/apps/st/src/shared/config/env.ts
@@ -1,7 +1,7 @@
 export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
 export const PROXY_HOST =
     process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL;
+export const SERVER_API_URL = process.env.SERVER_API_URL;
 export const AUTH_LOGIN_REDIRECT_URL =
     process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "ST";
@@ -13,3 +13,5 @@ export const REFRESH_TOKEN =
 export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
 export const ST_SERVICE_URL =
     process.env.NEXT_PUBLIC_ST_SERVICE_URL || "http://localhost:8080";
+export const COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
+export const ST_DASHBOARD_BBS_ID = process.env.NEXT_PUBLIC_ST_DASHBOARD_BBS_ID;
diff --git a/apps/st/src/shared/lib/bbs-notice-menu.ts b/apps/st/src/shared/lib/bbs-notice-menu.ts
new file mode 100644
index 000000000..b0f7cef27
--- /dev/null
+++ b/apps/st/src/shared/lib/bbs-notice-menu.ts
@@ -0,0 +1,12 @@
+import type { MenuItem } from "@/entities/menu";
+
+export const BBS_NOTICE_MENU_MARKER = "bbsnotice";
+
+export function isBbsNoticeMenu(item: MenuItem): boolean {
+    const marker = BBS_NOTICE_MENU_MARKER;
+    return (
+        item.urlPath?.toLowerCase().includes(marker) ||
+        item.menuEngNm?.toLowerCase().includes(marker) ||
+        item.menuPath?.toLowerCase().includes(marker)
+    );
+}
diff --git a/apps/st/src/shared/lib/index.ts b/apps/st/src/shared/lib/index.ts
index 5ac79bf08..b2175d7c7 100644
--- a/apps/st/src/shared/lib/index.ts
+++ b/apps/st/src/shared/lib/index.ts
@@ -2,7 +2,13 @@ export { getCookie, setCookie, removeCookie } from "./cookie";
 export { useMutationWrapper } from "./use-mutation-wrapper";
 export { useAlertStore } from "./use-alert-store";
 export { useDataTable } from "./use-data-table";
+export { useGlobalProgressStore } from "./use-global-progress-store";
 export { useMenuStore } from "./use-menu-store";
 export { useUserStore } from "./use-user-store";
+export {
+    isRegAuthorityAllowed,
+    useActiveTabRegAuthorityAllowed,
+    useStatisticsInputToolbarGroupGate,
+} from "./use-statistics-input-toolbar-group-gate";
 export { usePrompt } from "./use-prompt";
 export { useSelectPrompt } from "./use-select-prompt";
diff --git a/apps/st/src/shared/lib/statistics-menu-url.ts b/apps/st/src/shared/lib/statistics-menu-url.ts
new file mode 100644
index 000000000..fc9e74356
--- /dev/null
+++ b/apps/st/src/shared/lib/statistics-menu-url.ts
@@ -0,0 +1,73 @@
+import type { MenuItem } from "@/entities/menu";
+
+export type ParsedStatisticsMenuUrl = {
+    categoryFromPath: string | null;
+    componentName: string | null;
+    rawUrlPath: string;
+};
+
+/** 메뉴 `urlPath`에서 통계 화면 카테고리·컴포넌트명을 파싱합니다. */
+export function parseStatisticsMenuUrlPath(urlPath: string): ParsedStatisticsMenuUrl {
+    const trimmed = (urlPath ?? "").trim();
+    if (!trimmed) {
+        return { categoryFromPath: null, componentName: null, rawUrlPath: trimmed };
+    }
+
+    let pathPart = trimmed;
+    let queryString = "";
+    const queryIndex = trimmed.indexOf("?");
+    if (queryIndex >= 0) {
+        pathPart = trimmed.slice(0, queryIndex);
+        queryString = trimmed.slice(queryIndex + 1);
+    }
+
+    const tabParam = new URLSearchParams(queryString).get("tab")?.trim() || null;
+    const segments = pathPart.replace(/^\/+/, "").split("/").filter(Boolean);
+
+    let categoryFromPath: string | null = null;
+    if (segments[0] === "statistics" && segments.length >= 2) {
+        categoryFromPath = segments[1] ?? null;
+    }
+
+    let componentName = tabParam;
+    if (!componentName) {
+        if (!pathPart.includes("/") && !queryString) {
+            componentName = trimmed;
+        } else if (segments.length === 1 && segments[0] !== "statistics") {
+            componentName = segments[0] ?? null;
+        } else if (segments[0] === "statistics" && segments.length >= 3) {
+            componentName = segments[segments.length - 1] ?? null;
+        }
+    }
+
+    return { categoryFromPath, componentName, rawUrlPath: trimmed };
+}
+
+/** 동적 import용 카테고리 폴더명 (`input`, `review` 등) */
+export function resolveStatisticsCategory(urlPath: string, parentEngNm: string): string {
+    const { categoryFromPath } = parseStatisticsMenuUrlPath(urlPath);
+    return categoryFromPath || parentEngNm || "";
+}
+
+/** 탭 ID·URL `?tab=` 값 — 컴포넌트 파일명(확장자 제외) */
+export function resolveStatisticsTabId(urlPath: string): string {
+    const { componentName, rawUrlPath } = parseStatisticsMenuUrlPath(urlPath);
+    return componentName || rawUrlPath;
+}
+
+/** `@/components/statistics/{category}/{Component}` 경로 */
+export function buildStatisticsComponentImportPath(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { componentName } = parseStatisticsMenuUrlPath(urlPath);
+    const category = resolveStatisticsCategory(urlPath, parentEngNm);
+    const name = componentName || urlPath;
+    return `@/components/statistics/${category}/${name}`;
+}
+
+export function menuMatchesStatisticsTabId(menu: MenuItem, tabId: string): boolean {
+    if (!tabId) return false;
+    if (menu.urlPath === tabId) return true;
+    return resolveStatisticsTabId(menu.urlPath) === tabId;
+}
diff --git a/apps/st/src/shared/lib/statistics-tab-url.ts b/apps/st/src/shared/lib/statistics-tab-url.ts
new file mode 100644
index 000000000..c3588254f
--- /dev/null
+++ b/apps/st/src/shared/lib/statistics-tab-url.ts
@@ -0,0 +1,12 @@
+export const STATISTICS_ROUTE = "/statistics";
+export const STATISTICS_TAB_QUERY_KEY = "tab";
+
+export function buildStatisticsTabUrl(tabId: string): string {
+    return `${STATISTICS_ROUTE}?${STATISTICS_TAB_QUERY_KEY}=${encodeURIComponent(tabId)}`;
+}
+
+export function isStatisticsPathname(
+    pathname: string | null,
+): pathname is typeof STATISTICS_ROUTE {
+    return pathname === STATISTICS_ROUTE;
+}
diff --git a/apps/st/src/shared/lib/stats-cd-input-navigation.ts b/apps/st/src/shared/lib/stats-cd-input-navigation.ts
new file mode 100644
index 000000000..56b8c791d
--- /dev/null
+++ b/apps/st/src/shared/lib/stats-cd-input-navigation.ts
@@ -0,0 +1,108 @@
+import type { MenuItem } from "@/entities/menu";
+import type { SearchFormValues } from "@/components/type/SearchForm.type";
+import { doNameList } from "@/components/util/column/input/DoList";
+import { menuMatchesStatisticsTabId } from "@/shared/lib/statistics-menu-url";
+import {
+    SEWAGE_PIPE_INP_TAB_KEYS,
+    SEWAGE_PIPE_MAINTAIN_INP_TAB_KEYS,
+    SEWERAGE_PENETRATION_RATE_INP_TAB_KEYS,
+} from "@/components/util/MenuMatchList";
+
+/** 검증 결과에서 입력 화면 자동 조회에 사용하는 조건 */
+export type StatisticsInputPendingSearch = {
+    statsYr: string;
+    sewerBzmnCd: string;
+    ctpvNm: string;
+    sggNm: string;
+};
+
+export function verificationSearchToFormValues(
+    s: StatisticsInputPendingSearch,
+): SearchFormValues {
+    const ctpvNmTrimmed = s.ctpvNm?.trim() ?? "";
+    const sggNmTrimmed = s.sggNm?.trim() ?? "";
+    /** 시군구 필수 도(`DoList.ts`의 `doNameList`)일 때만 API `sggNm`을 검색폼에 반영 */
+    const useSggNm =
+        sggNmTrimmed.length > 0 && doNameList.includes(ctpvNmTrimmed);
+
+    return {
+        year: s.statsYr,
+        bsnmCd: s.sewerBzmnCd,
+        sido: s.ctpvNm,
+        gugun: useSggNm ? sggNmTrimmed : "ALL",
+    };
+}
+
+/** `statistics-page` 동적 import 경로의 파일명(확장자 제외)과 일치해야 함 */
+export const STATISTICS_INPUT_URL_PATH = {
+    SEWAGE_PIPE: "SewagePipeInp",
+    SEWAGE_PIPE_MAINTAIN: "SewagePipeMaintainInp",
+    SEWERAGE_PENETRATION_RATE: "SeweragePenetrationRateInp",
+    PUBLIC_SEWAGE_FACILITY: "PublicSewageFacilityInp",
+} as const;
+
+/** `PublicSewageFacilityInp.tsx` — 공공하수처리시설 탭 */
+const PUBLIC_SEWAGE_FACILITY_INP_TAB_KEYS = ["ST00060001"] as const;
+
+function normalizeSewagePipeTabKey(tabKey: string): string {
+    if (
+        tabKey === "adminAreaConnectionInp" ||
+        tabKey === "treatmentPlantConnectionInp"
+    ) {
+        return "ST00020006";
+    }
+    return tabKey;
+}
+
+const NAV_ROWS: { urlPath: string; tabKeys: readonly string[] }[] = [
+    { urlPath: STATISTICS_INPUT_URL_PATH.SEWAGE_PIPE, tabKeys: SEWAGE_PIPE_INP_TAB_KEYS },
+    {
+        urlPath: STATISTICS_INPUT_URL_PATH.SEWAGE_PIPE_MAINTAIN,
+        tabKeys: SEWAGE_PIPE_MAINTAIN_INP_TAB_KEYS,
+    },
+    {
+        urlPath: STATISTICS_INPUT_URL_PATH.SEWERAGE_PENETRATION_RATE,
+        tabKeys: SEWERAGE_PENETRATION_RATE_INP_TAB_KEYS,
+    },
+    {
+        urlPath: STATISTICS_INPUT_URL_PATH.PUBLIC_SEWAGE_FACILITY,
+        tabKeys: PUBLIC_SEWAGE_FACILITY_INP_TAB_KEYS,
+    },
+];
+
+/**
+ * 검증 결과 등의 `statsCd`(또는 입력 화면 탭 키와 동일한 코드)로
+ * 열 입력 화면 `urlPath`와 활성 탭 키를 반환합니다.
+ */
+export function resolveInputPageNavigationFromStatsCd(statsCd: string): {
+    urlPath: string;
+    tabKey: string;
+} | null {
+    const trimmed = statsCd.trim();
+    if (!trimmed) return null;
+
+    for (const row of NAV_ROWS) {
+        if (row.tabKeys.includes(trimmed)) {
+            const tabKey =
+                row.urlPath === STATISTICS_INPUT_URL_PATH.SEWAGE_PIPE
+                    ? normalizeSewagePipeTabKey(trimmed)
+                    : trimmed;
+            return { urlPath: row.urlPath, tabKey };
+        }
+    }
+    return null;
+}
+
+export function findMenuItemByUrlPath(
+    menus: MenuItem[],
+    urlPath: string,
+): MenuItem | null {
+    for (const item of menus) {
+        if (menuMatchesStatisticsTabId(item, urlPath)) return item;
+        if (item.children?.length) {
+            const found = findMenuItemByUrlPath(item.children, urlPath);
+            if (found) return found;
+        }
+    }
+    return null;
+}
diff --git a/apps/st/src/shared/lib/use-data-table.tsx b/apps/st/src/shared/lib/use-data-table.tsx
index 51638f746..906518f49 100644
--- a/apps/st/src/shared/lib/use-data-table.tsx
+++ b/apps/st/src/shared/lib/use-data-table.tsx
@@ -1,42 +1,46 @@
 import type { HTMLAttributes } from "react";
+
 import type { UseQueryResult } from "@tanstack/react-query";
-import { useReactTable, type TableOptions } from "@tanstack/react-table";
+import { type TableOptions, useReactTable } from "@tanstack/react-table";
+
 import { DataTable } from "@common/components";
-import { NoData } from "../ui/no-data";
+
 import type { PageableList } from "../model";
+import { NoData } from "../ui/no-data";
+
 import { matchQueryStatus } from "./match-query-status";
 
 type UseDataTableOptions<T> = {
-  query: UseQueryResult<PageableList<T>>;
-  tableOptions: Omit<TableOptions<T>, "data" | "rowCount">;
-  dataTableOptions?: DataTableOptions<T>;
+    query: UseQueryResult<PageableList<T>>;
+    tableOptions: Omit<TableOptions<T>, "data" | "rowCount">;
+    dataTableOptions?: DataTableOptions<T>;
 };
 
 type DataTableOptions<T> = {
-  variant?: "default" | "secondary" | "line";
-  className?: HTMLAttributes<HTMLTableElement>["className"];
-  viewPagination?: boolean;
-  onRowClick?: (row: T) => void;
+    variant?: "default" | "secondary" | "line";
+    className?: HTMLAttributes<HTMLTableElement>["className"];
+    viewPagination?: boolean;
+    onRowClick?: (row: T) => void;
 };
 
 export const useDataTable = <T,>({
-  query,
-  tableOptions,
-  dataTableOptions,
+    query,
+    tableOptions,
+    dataTableOptions,
 }: UseDataTableOptions<T>) => {
-  const table = useReactTable({
-    ...tableOptions,
-    data: query.data?.content ?? [],
-    rowCount: query.data?.totalElements ?? 0,
-  });
+    const table = useReactTable({
+        ...tableOptions,
+        data: query.data?.content ?? [],
+        rowCount: query.data?.totalElements ?? 0,
+    });
 
-  return {
-    tableComponent: matchQueryStatus(query, {
-      Empty: <NoData />,
-      Success: () => {
-        return <DataTable table={table} {...dataTableOptions} />;
-      },
-    }),
-    tableInstance: table,
-  };
+    return {
+        tableComponent: matchQueryStatus(query, {
+            Empty: <NoData />,
+            Success: () => {
+                return <DataTable table={table} {...dataTableOptions} />;
+            },
+        }),
+        tableInstance: table,
+    };
 };
diff --git a/apps/st/src/shared/lib/use-global-progress-store.ts b/apps/st/src/shared/lib/use-global-progress-store.ts
new file mode 100644
index 000000000..4161ad1d4
--- /dev/null
+++ b/apps/st/src/shared/lib/use-global-progress-store.ts
@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { useStore } from "zustand";
+import type { GlobalProgressStore } from "../store/global-progress-store";
+import { StoreContext } from "../providers/store-provider";
+
+export const useGlobalProgressStore = <T>(
+  selector: (store: GlobalProgressStore) => T,
+): T => {
+  const storeContext = useContext(StoreContext);
+
+  if (!storeContext) {
+    throw new Error("useGlobalProgressStore must be used within StoreProvider");
+  }
+
+  return useStore(storeContext.globalProgressStore, selector);
+};
diff --git a/apps/st/src/shared/lib/use-mutation-wrapper.tsx b/apps/st/src/shared/lib/use-mutation-wrapper.tsx
index cea1a8f83..7b378dc86 100644
--- a/apps/st/src/shared/lib/use-mutation-wrapper.tsx
+++ b/apps/st/src/shared/lib/use-mutation-wrapper.tsx
@@ -1,29 +1,30 @@
-import { AxiosError } from "axios";
 import { useMutation, type UseMutationOptions } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
 import { useAlertStore } from "./use-alert-store";
 
 export const useMutationWrapper = <
-  TData = unknown,
-  TError = unknown,
-  TVariables = void,
-  TContext = unknown,
+    TData = unknown,
+    TError = unknown,
+    TVariables = void,
+    TContext = unknown,
 >(
-  mutationOptions: UseMutationOptions<TData, TError, TVariables, TContext>,
+    mutationOptions: UseMutationOptions<TData, TError, TVariables, TContext>,
 ) => {
-  const alert = useAlertStore((state) => state.setMessage);
-  return useMutation({
-    ...mutationOptions,
-    onError: (error) => {
-      let errorMessage = "";
+    const alert = useAlertStore((state) => state.setMessage);
+    return useMutation({
+        ...mutationOptions,
+        onError: (error) => {
+            let errorMessage = "";
 
-      if (error instanceof AxiosError) {
-        if (error.response?.data?.message)
-          errorMessage += `${error.response.data.message}\n`;
-        if (error.response?.data?.errors[0]?.message)
-          errorMessage += `${error.response.data.errors[0].message}\n`;
-      }
+            if (error instanceof AxiosError) {
+                if (error.response?.data?.message)
+                    errorMessage += `${error.response.data.message}\n`;
+                if (error.response?.data?.errors[0]?.message)
+                    errorMessage += `${error.response.data.errors[0].message}\n`;
+            }
 
-      alert(`${errorMessage}`);
-    },
-  });
+            alert(`${errorMessage}`);
+        },
+    });
 };
diff --git a/apps/st/src/shared/lib/use-statistics-input-toolbar-group-gate.ts b/apps/st/src/shared/lib/use-statistics-input-toolbar-group-gate.ts
new file mode 100644
index 000000000..57f4a0782
--- /dev/null
+++ b/apps/st/src/shared/lib/use-statistics-input-toolbar-group-gate.ts
@@ -0,0 +1,28 @@
+"use client";
+
+import { useTabStore } from "@/store/tab-store";
+
+export function isRegAuthorityAllowed(
+    pageMenuAuthority: { regAuthrtYn: string } | null | undefined,
+): boolean {
+    return pageMenuAuthority?.regAuthrtYn === "Y";
+}
+
+/**
+ * 활성 탭의 `getPageMenuAuthority` 결과에서 `regAuthrtYn === "Y"`일 때만 true.
+ * 권한은 탭 추가·활성화 시 tab-store에서 조회합니다.
+ */
+export function useActiveTabRegAuthorityAllowed(): boolean {
+    const activeTabId = useTabStore((s) => s.activeTabId);
+    const pageMenuAuthority = useTabStore((s) => {
+        if (!activeTabId) return undefined;
+        return s.tabs.find((tab) => tab.id === activeTabId)?.pageMenuAuthority;
+    });
+
+    return isRegAuthorityAllowed(pageMenuAuthority);
+}
+
+/** 통계 입력 화면 상단 툴바용 — {@link useActiveTabRegAuthorityAllowed}와 동일 */
+export function useStatisticsInputToolbarGroupGate(): boolean {
+    return useActiveTabRegAuthorityAllowed();
+}
diff --git a/apps/st/src/shared/lib/use-statistics-tab-url-sync.ts b/apps/st/src/shared/lib/use-statistics-tab-url-sync.ts
new file mode 100644
index 000000000..9388438db
--- /dev/null
+++ b/apps/st/src/shared/lib/use-statistics-tab-url-sync.ts
@@ -0,0 +1,100 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+import type { MenuItem } from "@/entities/menu";
+import { isBbsNoticeMenu } from "@/shared/lib/bbs-notice-menu";
+import { findMenuItemByUrlPath } from "@/shared/lib/stats-cd-input-navigation";
+import { getTabStoreState } from "@/store/tab-store";
+
+import {
+    STATISTICS_ROUTE,
+    STATISTICS_TAB_QUERY_KEY,
+    buildStatisticsTabUrl,
+    isStatisticsPathname,
+} from "./statistics-tab-url";
+
+type UseStatisticsTabUrlSyncParams = {
+    pathname: string | null;
+    menuList: MenuItem[] | null;
+    activeTabId: string | null;
+    addTab: (menuItem: MenuItem) => boolean;
+    addTabForGrid: (menuItem: MenuItem) => void;
+    setCurrentMenuInfo: (item: MenuItem) => void;
+};
+
+/** `/statistics?tab=` ↔ Zustand 활성 탭 동기화 */
+export function useStatisticsTabUrlSync({
+    pathname,
+    menuList,
+    activeTabId,
+    addTab,
+    addTabForGrid,
+    setCurrentMenuInfo,
+}: UseStatisticsTabUrlSyncParams): {
+    syncTabToUrl: (tabId: string) => void;
+} {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const tabParam = searchParams?.get(STATISTICS_TAB_QUERY_KEY) ?? null;
+    const skipUrlToStoreRef = useRef(false);
+
+    const syncTabToUrl = (tabId: string) => {
+        if (!isStatisticsPathname(pathname)) {
+            router.push(buildStatisticsTabUrl(tabId));
+            return;
+        }
+        if (tabParam === tabId) return;
+        skipUrlToStoreRef.current = true;
+        router.replace(buildStatisticsTabUrl(tabId), { scroll: false });
+    };
+
+    // URL ?tab → 탭 스토어
+    useEffect(() => {
+        if (!isStatisticsPathname(pathname) || !menuList) return;
+        if (skipUrlToStoreRef.current) {
+            skipUrlToStoreRef.current = false;
+            return;
+        }
+
+        if (!tabParam) return;
+        if (getTabStoreState().activeTabId === tabParam) return;
+
+        const menu = findMenuItemByUrlPath(menuList, tabParam);
+        if (!menu || isBbsNoticeMenu(menu)) return;
+
+        setCurrentMenuInfo(menu);
+        const ok = addTab(menu);
+        if (ok) {
+            addTabForGrid(menu);
+        }
+    }, [
+        pathname,
+        menuList,
+        tabParam,
+        addTab,
+        addTabForGrid,
+        setCurrentMenuInfo,
+    ]);
+
+    // 활성 탭 → URL (탭 바 전환·persist 복원 포함)
+    useEffect(() => {
+        if (!isStatisticsPathname(pathname)) return;
+
+        if (!activeTabId) {
+            if (tabParam) {
+                skipUrlToStoreRef.current = true;
+                router.replace(STATISTICS_ROUTE, { scroll: false });
+            }
+            return;
+        }
+
+        if (tabParam === activeTabId) return;
+
+        skipUrlToStoreRef.current = true;
+        router.replace(buildStatisticsTabUrl(activeTabId), { scroll: false });
+    }, [pathname, activeTabId, tabParam, router]);
+
+    return { syncTabToUrl };
+}
diff --git a/apps/st/src/shared/lib/use-user-store.ts b/apps/st/src/shared/lib/use-user-store.ts
index 748caed4c..4dc360dfe 100644
--- a/apps/st/src/shared/lib/use-user-store.ts
+++ b/apps/st/src/shared/lib/use-user-store.ts
@@ -1,14 +1,16 @@
-import { useStore } from "zustand";
 import { useContext } from "react";
-import type { UserStore } from "../store/user-store";
+
+import { useStore } from "zustand";
+
 import { StoreContext } from "../providers/store-provider";
+import type { UserStore } from "../store/user-store";
 
 export const useUserStore = <T>(selector: (store: UserStore) => T): T => {
-  const storeContext = useContext(StoreContext);
+    const storeContext = useContext(StoreContext);
 
-  if (!storeContext) {
-    throw new Error("useUserStore must be used within StoreProvider");
-  }
+    if (!storeContext) {
+        throw new Error("useUserStore must be used within StoreProvider");
+    }
 
-  return useStore(storeContext.userStore, selector);
+    return useStore(storeContext.userStore, selector);
 };
diff --git a/apps/st/src/shared/lib/verification-selection-report.ts b/apps/st/src/shared/lib/verification-selection-report.ts
new file mode 100644
index 000000000..47424f88d
--- /dev/null
+++ b/apps/st/src/shared/lib/verification-selection-report.ts
@@ -0,0 +1,11 @@
+import type { MenuItem } from "@/entities/menu";
+
+export const VERIFICATION_SELECTION_REPORT_MARKER =
+    "VerificationSelectionReport";
+
+export function isVerificationSelectionReportMenu(item: MenuItem): boolean {
+    return (
+        item.menuEngNm === VERIFICATION_SELECTION_REPORT_MARKER ||
+        !!item.urlPath?.includes(VERIFICATION_SELECTION_REPORT_MARKER)
+    );
+}
diff --git a/apps/st/src/shared/providers/store-provider.tsx b/apps/st/src/shared/providers/store-provider.tsx
index a0ec17b61..44d6d89f0 100644
--- a/apps/st/src/shared/providers/store-provider.tsx
+++ b/apps/st/src/shared/providers/store-provider.tsx
@@ -4,6 +4,7 @@ import { createContext, useRef } from "react";
 import {
   createAlertStore,
   createAttachmentStore,
+  createGlobalProgressStore,
   createMenuStore,
   createUserStore,
 } from "../store";
@@ -11,6 +12,7 @@ import {
 type StoreContextType = {
   alertStore: ReturnType<typeof createAlertStore>;
   attachmentStore: ReturnType<typeof createAttachmentStore>;
+  globalProgressStore: ReturnType<typeof createGlobalProgressStore>;
   menuStore: ReturnType<typeof createMenuStore>;
   userStore: ReturnType<typeof createUserStore>;
 };
@@ -25,6 +27,7 @@ export const StoreProvider = ({ children }: { children: React.ReactNode }) => {
     storeRef.current = {
       alertStore: createAlertStore(),
       attachmentStore: createAttachmentStore(),
+      globalProgressStore: createGlobalProgressStore(),
       menuStore: createMenuStore(),
       userStore: createUserStore(),
     };
diff --git a/apps/st/src/shared/store/global-progress-store.ts b/apps/st/src/shared/store/global-progress-store.ts
new file mode 100644
index 000000000..70a08debf
--- /dev/null
+++ b/apps/st/src/shared/store/global-progress-store.ts
@@ -0,0 +1,45 @@
+import { createStore } from "zustand/vanilla";
+
+export type GlobalProgressState = {
+  visible: boolean;
+  label: string;
+  progress: number;
+};
+
+export type GlobalProgressActions = {
+  show: (payload?: { label?: string; progress?: number }) => void;
+  setLabel: (label: string) => void;
+  setProgress: (progress: number) => void;
+  hide: () => void;
+};
+
+export type GlobalProgressStore = GlobalProgressState & GlobalProgressActions;
+
+export const defaultGlobalProgressState: GlobalProgressState = {
+  visible: false,
+  label: "진행 중...",
+  progress: 0,
+};
+
+export const createGlobalProgressStore = (
+  initState: GlobalProgressState = defaultGlobalProgressState,
+) => {
+  return createStore<GlobalProgressStore>()((set) => ({
+    ...initState,
+    show: (payload) =>
+      set(() => ({
+        visible: true,
+        label: payload?.label ?? defaultGlobalProgressState.label,
+        progress: Math.max(0, Math.min(100, payload?.progress ?? 0)),
+      })),
+    setLabel: (label) => set(() => ({ label })),
+    setProgress: (progress) =>
+      set(() => ({ progress: Math.max(0, Math.min(100, progress)) })),
+    hide: () =>
+      set(() => ({
+        visible: false,
+        progress: 0,
+        label: defaultGlobalProgressState.label,
+      })),
+  }));
+};
diff --git a/apps/st/src/shared/store/index.ts b/apps/st/src/shared/store/index.ts
index a41d6f928..c5014150e 100644
--- a/apps/st/src/shared/store/index.ts
+++ b/apps/st/src/shared/store/index.ts
@@ -1,4 +1,5 @@
 export { createAlertStore } from "./alert-store";
 export { createAttachmentStore } from "./attachment-store";
+export { createGlobalProgressStore } from "./global-progress-store";
 export { createMenuStore, type BbsType } from "./menu-store";
 export { createUserStore, type IUserInfo } from "./user-store";
diff --git a/apps/st/src/shared/store/user-store.ts b/apps/st/src/shared/store/user-store.ts
index 65d897cf1..69d46ad11 100644
--- a/apps/st/src/shared/store/user-store.ts
+++ b/apps/st/src/shared/store/user-store.ts
@@ -1,57 +1,61 @@
 import { createStore } from "zustand/vanilla";
 
 export interface IUserInfo {
-  regDt: string;
-  mdfcnDt: string;
-  rgtr: string;
-  mdfr: string;
-  adminRoleYn: string;
-  userUnqId: string;
-  userId: string;
-  userName: string;
-  email: string;
-  encryptedPassword: string;
-  refreshToken: string;
-  userStateCode: string;
-  lastLoginDate: string;
-  loginFailCount: number;
-  pswdHnt: string;
-  pswdAns: string;
-  mphn: string;
-  telno: string;
-  zip: string;
-  addr: string;
-  daddr: string;
-  laeSeCd: string;
-  ogdpSeCd: string;
-  aprvYn: string;
-  autzrId: string;
-  expryYmd: string;
-  lastPswdChgDt: string;
-  googleId: string;
-  kakaoId: string;
-  naverId: string;
-  isSocialUser: boolean;
-  hasPassword: boolean;
+    regDt: string;
+    mdfcnDt: string;
+    rgtr: string;
+    mdfr: string;
+    adminRoleYn: string;
+    userUnqId: string;
+    userId: string;
+    userName: string;
+    email: string;
+    encryptedPassword: string;
+    enoCd: string;
+    refreshToken: string;
+    userStateCode: string;
+    lastLoginDate: string;
+    loginFailCount: number;
+    pswdHnt: string;
+    pswdAns: string;
+    mphn: string;
+    telno: string;
+    zip: string;
+    addr: string;
+    daddr: string;
+    dtlInstCd: string;
+    laeSeCd: string;
+    /** 기관 구분 코드 — 통계 공통 조회 등 query `instSeCd`로 전달 */
+    instSeCd?: string;
+    ogdpSeCd: string;
+    aprvYn: string;
+    autzrId: string;
+    expryYmd: string;
+    lastPswdChgDt: string;
+    googleId: string;
+    kakaoId: string;
+    naverId: string;
+    isSocialUser: boolean;
+    hasPassword: boolean;
 }
 
 export type UserState = {
-  userInfo: IUserInfo | null;
+    userInfo: IUserInfo | null;
 };
 
 export type UserActions = {
-  setUserInfo: (userInfo: IUserInfo | null) => void;
+    setUserInfo: (userInfo: IUserInfo | null) => void;
 };
 
 export type UserStore = UserState & UserActions;
 
 export const defaultInitState: UserState = {
-  userInfo: null,
+    userInfo: null,
 };
 
 export const createUserStore = (initState: UserState = defaultInitState) => {
-  return createStore<UserStore>()((set) => ({
-    ...initState,
-    setUserInfo: (userInfo: IUserInfo | null) => set(() => ({ userInfo })),
-  }));
+    return createStore<UserStore>()((set) => ({
+        ...initState,
+        setUserInfo: (userInfo: IUserInfo | null) => set(() => ({ userInfo })),
+    }));
 };
diff --git a/apps/st/src/shared/ui/global-progress-overlay.tsx b/apps/st/src/shared/ui/global-progress-overlay.tsx
new file mode 100644
index 000000000..c9007148b
--- /dev/null
+++ b/apps/st/src/shared/ui/global-progress-overlay.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { Progress } from "@common/components";
+import { useGlobalProgressStore } from "@/shared/lib";
+
+export const GlobalProgressOverlay = () => {
+  const visible = useGlobalProgressStore((state) => state.visible);
+  const label = useGlobalProgressStore((state) => state.label);
+  const progress = useGlobalProgressStore((state) => state.progress);
+
+  if (!visible) return null;
+
+  return (
+    <div className="fixed inset-0 z-[999] bg-black/35 [data-theme='black']:bg-black/55 backdrop-blur-[1px] rounded-lg p-10 flex justify-center items-center">
+      <div className="w-[34rem] rounded-md border border-border bg-background p-6 shadow-md">
+        <p className="mb-3 text-center text-[1.3rem] text-foreground">
+          {label} {progress}%
+        </p>
+        <Progress value={progress} />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/st/src/shared/ui/statistics-page-layout.tsx b/apps/st/src/shared/ui/statistics-page-layout.tsx
index d7d5b98b4..26a9d6ddc 100644
--- a/apps/st/src/shared/ui/statistics-page-layout.tsx
+++ b/apps/st/src/shared/ui/statistics-page-layout.tsx
@@ -5,12 +5,12 @@ import { TabBar } from "./tab-bar";
 function StatisticsPageLayout({ children }: { children: React.ReactNode }) {
     const { activeTabId, tabs } = useTabStore();
 
-    const pageTitle = tabs.find((t) => t.menuItem.urlPath === activeTabId);
+    const pageTitle = tabs.find((t) => t.id === activeTabId);
 
     const menuPaths = pageTitle?.path?.split(">").map((path) => path.trim());
 
     return (
-        <div className="h-auto min-h-full bg-container pb-2">
+        <div className="h-auto min-h-full bg-container pb-2 flex-1">
             <TabBar />
             <PageTitle
                 title={pageTitle?.label ?? ""}
diff --git a/apps/st/src/store/statistics-input-focus-store.ts b/apps/st/src/store/statistics-input-focus-store.ts
new file mode 100644
index 000000000..910aeed10
--- /dev/null
+++ b/apps/st/src/store/statistics-input-focus-store.ts
@@ -0,0 +1,41 @@
+import { create } from "zustand";
+
+import type { StatisticsInputPendingSearch } from "@/shared/lib/stats-cd-input-navigation";
+
+type Pending = {
+    urlPath: string;
+    tabKey: string;
+    search: StatisticsInputPendingSearch | null;
+};
+
+export interface StatisticsInputFocusStore {
+    pending: Pending | null;
+    /** `setPendingInputTab` 호출 시마다 증가 — 이미 해당 화면이 활성일 때도 탭 적용 effect가 돌도록 함 */
+    nonce: number;
+    setPendingInputTab: (
+        urlPath: string,
+        tabKey: string,
+        search?: StatisticsInputPendingSearch | null,
+    ) => void;
+    takePendingForUrl: (
+        urlPath: string,
+    ) => { tabKey: string; search: StatisticsInputPendingSearch | null } | undefined;
+}
+
+export const useStatisticsInputFocusStore = create<StatisticsInputFocusStore>(
+    (set, get) => ({
+        pending: null,
+        nonce: 0,
+        setPendingInputTab: (urlPath, tabKey, search = null) =>
+            set((state) => ({
+                pending: { urlPath, tabKey, search: search ?? null },
+                nonce: state.nonce + 1,
+            })),
+        takePendingForUrl: (urlPath) => {
+            const p = get().pending;
+            if (!p || p.urlPath !== urlPath) return undefined;
+            set({ pending: null });
+            return { tabKey: p.tabKey, search: p.search };
+        },
+    }),
+);
diff --git a/apps/st/src/store/tab-store.ts b/apps/st/src/store/tab-store.ts
index 640cada97..3a75f37aa 100644
--- a/apps/st/src/store/tab-store.ts
+++ b/apps/st/src/store/tab-store.ts
@@ -2,6 +2,10 @@ import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 
 import type { MenuItem } from "@/entities/menu";
+import { MenuAuthorityApi } from "@/entities/menu-authority";
+import type { PageMenuAuthority } from "@/entities/menu-authority/model/menu-authority-interface";
+import { isBbsNoticeMenu } from "@/shared/lib/bbs-notice-menu";
+import { resolveStatisticsTabId } from "@/shared/lib/statistics-menu-url";
 
 export interface Tab {
     id: string; // 고유 ID (urlPath)
@@ -10,6 +14,69 @@ export interface Tab {
     urlPath: string; // url 경로
     parentEngNm: string; // 부모 menuEngNm
     menuItem: MenuItem; // 메뉴 정보
+    /** undefined: 미조회, null: 조회했으나 없음/실패 */
+    pageMenuAuthority?: PageMenuAuthority | null;
+}
+
+async function fetchTabPageMenuAuthority(
+    menuCd: number,
+    apply: (authority: PageMenuAuthority | null) => void,
+): Promise<void> {
+    try {
+        const response = await MenuAuthorityApi.getPageMenuAuthority(menuCd);
+        apply(response?.[0] ?? null);
+    } catch {
+        apply(null);
+    }
+}
+
+function scheduleTabPageMenuAuthorityFetch(
+    get: () => TabStore,
+    set: (
+        partial:
+            | Partial<TabStore>
+            | ((state: TabStore) => Partial<TabStore>),
+    ) => void,
+    tabId: string,
+    menuCd: number,
+): void {
+    void fetchTabPageMenuAuthority(menuCd, (authority) => {
+        const { tabs } = get();
+        if (!tabs.some((tab) => tab.id === tabId)) return;
+        set((state) => ({
+            tabs: state.tabs.map((tab) =>
+                tab.id === tabId ? { ...tab, pageMenuAuthority: authority } : tab,
+            ),
+        }));
+    });
+}
+
+type TabStoreSetState = (
+    partial:
+        | Partial<TabStore>
+        | ((state: TabStore) => Partial<TabStore>),
+) => void;
+
+const tabStoreSetState: TabStoreSetState = (partial) => {
+    useTabStoreHook.setState(partial);
+};
+
+function ensureTabPageMenuAuthority(
+    get: () => TabStore,
+    set: TabStoreSetState,
+    tab: Tab,
+): void {
+    if (tab.pageMenuAuthority !== undefined) return;
+    scheduleTabPageMenuAuthorityFetch(get, set, tab.id, tab.menuItem.menuCd);
+}
+
+/** persist 복원·새로고침 후 활성 탭 메뉴 권한이 없으면 조회 */
+export function hydrateActiveTabPageMenuAuthority(): void {
+    const { tabs, activeTabId } = getTabStoreState();
+    if (!activeTabId) return;
+    const tab = tabs.find((t) => t.id === activeTabId);
+    if (!tab) return;
+    ensureTabPageMenuAuthority(getTabStoreState, tabStoreSetState, tab);
 }
 
 interface TabStore {
@@ -32,14 +99,22 @@ function tabForPersist(tab: Tab): Tab {
     return {
         ...tab,
         menuItem: { ...tab.menuItem, children: null },
+        pageMenuAuthority: undefined,
     };
 }
 
+function normalizePersistedTab(tab: Tab): Tab {
+    const tabId = resolveStatisticsTabId(tab.urlPath || tab.id);
+    return tabId === tab.id ? tab : { ...tab, id: tabId };
+}
+
 function sanitizePersistedTabsAndActive(
     tabs: Tab[],
     activeTabId: string | null,
 ): { tabs: Tab[]; activeTabId: string | null } {
-    let nextTabs = Array.isArray(tabs) ? tabs : [];
+    let nextTabs = Array.isArray(tabs)
+        ? tabs.filter((tab) => !isBbsNoticeMenu(tab.menuItem)).map(normalizePersistedTab)
+        : [];
     if (nextTabs.length > MAX_TABS) nextTabs = nextTabs.slice(0, MAX_TABS);
 
     if (nextTabs.length === 0) {
@@ -64,13 +139,18 @@ const useTabStoreHook = create<TabStore>()(
             activeTabId: null,
             menuList: null,
             addTab: (menuItem: MenuItem) => {
+                if (isBbsNoticeMenu(menuItem)) {
+                    return false;
+                }
+
                 const { tabs, menuList } = get();
-                const tabId = menuItem.urlPath || "";
+                const tabId = resolveStatisticsTabId(menuItem.urlPath || "");
 
                 const existingTab = tabs.find((tab) => tab.id === tabId);
 
                 if (existingTab) {
                     set({ activeTabId: tabId });
+                    ensureTabPageMenuAuthority(get, set, existingTab);
                     return true;
                 }
 
@@ -85,6 +165,7 @@ const useTabStoreHook = create<TabStore>()(
                                 (m) => m.menuCd === menuItem.parentId,
                             )?.menuEngNm || "",
                         menuItem,
+                        pageMenuAuthority: undefined,
                     };
 
                     set({
@@ -92,6 +173,13 @@ const useTabStoreHook = create<TabStore>()(
                         activeTabId: tabId,
                     });
 
+                    scheduleTabPageMenuAuthorityFetch(
+                        get,
+                        set,
+                        tabId,
+                        menuItem.menuCd,
+                    );
+
                     return true;
                 }
                 return false;
@@ -122,9 +210,15 @@ const useTabStoreHook = create<TabStore>()(
                     tabs: newTabs,
                     activeTabId: newActiveTabId,
                 });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
             },
             setActiveTab: (tabId: string) => {
                 set({ activeTabId: tabId });
+                const tab = get().tabs.find((t) => t.id === tabId);
+                if (tab) ensureTabPageMenuAuthority(get, set, tab);
             },
             setMenuList: (menuList: MenuItem[] | null) => {
                 set({ menuList });
@@ -173,6 +267,10 @@ const useTabStoreHook = create<TabStore>()(
                     activeTabId,
                 };
             },
+            onRehydrateStorage: () => (state, error) => {
+                if (error || !state) return;
+                queueMicrotask(() => hydrateActiveTabPageMenuAuthority());
+            },
         },
     ),
 );
diff --git a/apps/st/tsconfig.json b/apps/st/tsconfig.json
index 234373acb..7e8241dc4 100644
--- a/apps/st/tsconfig.json
+++ b/apps/st/tsconfig.json
@@ -1,48 +1,44 @@
 {
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "verbatimModuleSyntax": true,
-    "strictNullChecks": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "target": "ES2017",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "verbatimModuleSyntax": true,
+        "strictNullChecks": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "incremental": true,
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ],
+        "baseUrl": "./src",
+        "paths": {
+            "@/*": ["./*"]
+        }
+    },
+    "include": [
+        ".eslintrc.*",
+        "next-env.d.ts",
+        "**/*.ts",
+        "**/*.tsx",
+        "**/*.mts",
+        "**/*.js",
+        "**/*.cjs",
+        "**/*.mjs",
+        "**/*.jsx",
+        "**/*.json",
+        ".next/types/**/*.ts"
     ],
-    "baseUrl": "./src",
-    "paths": {
-      "@/*": ["./*"],
-      "@common/components": ["../../../packages/common/components/dist/"],
-      "@common/config": ["../../../packages/common/config/dist/"],
-      "@common/network": ["../../../packages/common/network/"],
-      "@rsone/components": ["../../../packages/rsone/dist/"]
-    }
-  },
-  "include": [
-    ".eslintrc.*",
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.mts",
-    "**/*.js",
-    "**/*.cjs",
-    "**/*.mjs",
-    "**/*.jsx",
-    "**/*.json",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": ["**/node_modules", "**/.*/*"]
+    "exclude": ["**/node_modules", "**/.*/*"]
 }
diff --git a/apps/wr/.env.local b/apps/wr/.env.local
index 3e79ce9d8..96b66b536 100644
--- a/apps/wr/.env.local
+++ b/apps/wr/.env.local
@@ -8,14 +8,15 @@ NEXT_PUBLIC_PROXY_HOST = http://localhost:3001
 NEXT_PUBLIC_SUB_DOMAIN = http://localhost:13000
 NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+# NEXT_PUBLIC_FO_SERVER_API_URL = http://localhost:8883/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_GEOSERVER_URL = https://hasudo.geo.rsonesoft.com/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
 NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
-#NEXT_PUBLIC_WR_SERVER_API_URL = http://192.168.1.222:8883/reuse-service/api/v1
+# NEXT_PUBLIC_WR_SERVER_API_URL = http://localhost:8883/reuse-service/api/v1
 NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
-# NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service
+# NEXT_PUBLIC_SEWERAGE_API_URL=http://localhost:8883/sewerage-service
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
 # NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
diff --git a/apps/wr/.env.mindone b/apps/wr/.env.mindone
index 8749fe39f..f5e3b6d7e 100644
--- a/apps/wr/.env.mindone
+++ b/apps/wr/.env.mindone
@@ -16,6 +16,7 @@ NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/ap
 NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
+NEXT_PUBLIC_CM_LOGIN_PAGE_URL = /auth/login
 NEXT_PUBLIC_HASUDOINFO = https://www.hasudoinfo.or.kr
 NEXT_PUBLIC_HASUDOINFO_IN = https://www.hasudoinfo.or.kr
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
diff --git a/apps/wr/.env.production b/apps/wr/.env.production
index a159d1aa4..934f1e6a5 100644
--- a/apps/wr/.env.production
+++ b/apps/wr/.env.production
@@ -20,5 +20,4 @@ NEXT_PUBLIC_NGII_PARAM = BDE2BEF39DAFEC293AB6730150F222AC&service=WMTS&request=G
 NEXT_PUBLIC_HASUDOINFO = https://www.hasudoinfo.or.kr
 NEXT_PUBLIC_HASUDOINFO_IN = http://10.101.163.102:8889
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
-NEXT_PRIVATE_WR_ADDRESS_KEY = U01TXOFVVEgyMDI1MDgyODE0MTAxNzExNjEyMjA=
-NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
\ No newline at end of file
+NEXT_PRIVATE_WR_ADDRESS_KEY = U01TXOFVVEgyMDI1MDgyODE0MTAxNzExNjEyMjA=
\ No newline at end of file
diff --git a/apps/wr/.eslintrc.ts b/apps/wr/.eslintrc.ts
new file mode 100644
index 000000000..9c0110d98
--- /dev/null
+++ b/apps/wr/.eslintrc.ts
@@ -0,0 +1,6 @@
+module.exports = {
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: "./tsconfig.eslint.json",
+  },
+};
\ No newline at end of file
diff --git a/apps/wr/AGENTS.md b/apps/wr/AGENTS.md
new file mode 100644
index 000000000..5b690843c
--- /dev/null
+++ b/apps/wr/AGENTS.md
@@ -0,0 +1,39 @@
+## 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 
+- 한글이 깨지지 않도록 주의할 것
+
+## 주석 comment
+- 한글 주석을 삭제하지 말 것
+- 신규 component나 함수 자동 생성시 주석을 추가할 것(기본 함수의 역할과 인수 설명)
+
+## Monorepo structure
+apps/
+  _template
+  as
+  cm
+  cs
+  dc
+  dm
+  dm_new
+  fo
+  sn
+  st
+  wr
+
diff --git a/apps/wr/app/(map-layout)/map/mainMap/page.tsx b/apps/wr/app/(map-layout)/map/mainMap/page.tsx
index 652fe1924..10421b48b 100644
--- a/apps/wr/app/(map-layout)/map/mainMap/page.tsx
+++ b/apps/wr/app/(map-layout)/map/mainMap/page.tsx
@@ -21,7 +21,8 @@ import WrOverLay from "@/components/ui/map/wrOverLay/wrOverLay";
 
 const Map = () => {
 
-  const { code, comMap, rainMapDetile, rswtMapDetile, getRuseMaplListReturn, pbnMapDetaile, ldrmntMapDetile, htdfMapDetile, coSttnMapDetail } = useWrStore((state) => state);
+  const { code, comMap, rainMapDetile, rswtMapDetile, getRuseMaplListReturn
+    , pbnMapDetaile, ldrmntMapDetile, htdfMapDetile, coSttnMapDetail, initCommonCodes } = useWrStore((state) => state);
   const { isFeatured } = comMap;
   const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
   const gisMaps = useRef<any | null>(null);
@@ -72,6 +73,11 @@ const Map = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (code.isInit) return;
+    initCommonCodes();
+  }, [code.isInit, initCommonCodes]);
+
   // 체크된 레이어 정보를 받는 핸들러
   const handleCheckedLayersChange = (
     checkedIds: string[],
@@ -385,6 +391,7 @@ const Map = () => {
       if (moveEndDebounceRef.current) { clearTimeout(moveEndDebounceRef.current); moveEndDebounceRef.current = null; }
     };
   }, [checkedLayers]);
+
   return (
     <div className="bg-container">
       <Gis
diff --git a/apps/wr/app/(map-layout)/service/map.ts b/apps/wr/app/(map-layout)/service/map.ts
index 326f10c75..0a5293d35 100644
--- a/apps/wr/app/(map-layout)/service/map.ts
+++ b/apps/wr/app/(map-layout)/service/map.ts
@@ -2,6 +2,8 @@
 /**
  * 관망도 API
  */
+import { SITE_ID } from "@/src/shared/config";
+
  const API_URL = `/sewerage-service/api/v1/map`
 //const API_URL = "http://con.mind-one.co.kr:11083/sewerage-service/api/v1/map";
 
@@ -35,6 +37,7 @@ export const mapService = {
       method: 'GET',
       headers: {
         'Accept': 'application/json',
+        'X-Site-Id': SITE_ID,
       },
     });
 
diff --git a/apps/wr/app/(popUp-layout)/constCostSimulation/page.tsx b/apps/wr/app/(popUp-layout)/constCostSimulation/page.tsx
new file mode 100644
index 000000000..c76e3d597
--- /dev/null
+++ b/apps/wr/app/(popUp-layout)/constCostSimulation/page.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+/**
+ * 표준공사비 시뮬레이션 Popup
+ */
+import { useForm } from "react-hook-form";
+import ConCostForm from "@/components/ui/form/coMat/conCostForm/conCostForm";
+import type { DmdCoReqType } from "@/app/store/matDmd/coMatRvw/type";
+import ListDiv from "@common/business_components/ui/list_div";
+
+export default function ConstCostSimulationPage() {
+  const form = useForm<DmdCoReqType>({
+    defaultValues: {
+      dmndQty: 0,
+      demandCst: { cstrnCst: 0, usgPrcsProcs: "", prcsFcltCpctCstrnCst: 0, fcltSbsdCstrnCst: 0 },
+      totalConstCost: 0
+    } as any
+  });
+
+  return (
+    <ListDiv>
+        <div className="card-header flex items-center justify-between">
+            <h3 className="text-2xl font-medium text-label">표준공사비 산정</h3>
+        </div>
+        <ConCostForm form={form} type="simulation" readonly={false} />
+    </ListDiv>
+  )    
+}
diff --git a/apps/wr/app/(popUp-layout)/splyPopup/selectedFcltList.tsx b/apps/wr/app/(popUp-layout)/splyPopup/selectedFcltList.tsx
index bdf4d7e2c..deb58b906 100644
--- a/apps/wr/app/(popUp-layout)/splyPopup/selectedFcltList.tsx
+++ b/apps/wr/app/(popUp-layout)/splyPopup/selectedFcltList.tsx
@@ -1,3 +1,6 @@
+/**
+ * 선택된 시설
+ */
 import React from "react";
 
 type FcltItem = {
@@ -20,52 +23,6 @@ export default function SelectedFcltList({
     onRemove(updatedList);
   };
 
-  const TableContent = (
-    <>
-      <thead className="bg-gray-100 text-gray-700 text-[13px]">
-        <tr>
-          <th className="px-3 py-2 text-left border-b">시설명</th>
-          <th className="px-3 py-2 text-right border-b">
-            하수처리량
-            <br />
-            (㎥/일)
-          </th>
-          <th className="px-3 py-2 text-right border-b">
-            재이용량
-            <br />
-            (㎥/일)
-          </th>
-          <th className="px-3 py-2 border-b">삭제</th>
-        </tr>
-      </thead>
-      <tbody>
-        {data.map((item) => (
-          <tr key={item.pbnstRuseFcltId} className="border-b last:border-none">
-            <td className="px-3 py-2 text-[12px]">{item.ruseUtztnFcltNm}</td>
-            <td className="px-3 py-2 text-right text-[12px]">
-              {Number(item.splyExtraCpct || 0).toLocaleString()}
-            </td>
-            <td className="px-3 py-2 text-right text-[12px]">
-              {Number(item.ruseCpct || 0).toLocaleString()}
-            </td>
-            <td className="px-3 py-2 text-center">
-              <button
-                onClick={() => handleDelete(item.pbnstRuseFcltId)}
-                className="text-red-500 hover:text-red-700 text-sm font-bold"
-                aria-label="삭제"
-                title="삭제"
-              >
-                ✕
-              </button>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </>
-  );
-
-  if (data.length === 0) return null;
-
   return (
     <div className="fixed right-40 top-[8rem] w-[40rem] max-h-[130rem] overflow-auto bg-white shadow-lg rounded p-4 border border-gray-300 z-50">
       <h3 className="bg-cyan-700 text-white text-xl font-bold mb-2 p-2">
@@ -73,7 +30,53 @@ export default function SelectedFcltList({
       </h3>
       <div className="overflow-x-auto">
         <table className="w-full text-sm text-gray-800 border border-gray-200">
-          {TableContent}
+          <thead className="bg-gray-100 text-gray-700 text-[13px]">
+            <tr>
+              <th className="px-3 py-2 text-left border-b">시설명</th>
+              <th className="px-3 py-2 text-right border-b">
+                하수처리량
+                <br />
+                (㎥/일)
+              </th>
+              <th className="px-3 py-2 text-right border-b">
+                재이용량
+                <br />
+                (㎥/일)
+              </th>
+              <th className="px-3 py-2 border-b">삭제</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.length > 0 ? (
+              data.map((item) => (
+                <tr key={item.pbnstRuseFcltId} className="border-b last:border-none">
+                  <td className="px-3 py-2 text-[12px]">{item.ruseUtztnFcltNm}</td>
+                  <td className="px-3 py-2 text-right text-[12px]">
+                    {Number(item.splyExtraCpct || 0).toLocaleString()}
+                  </td>
+                  <td className="px-3 py-2 text-right text-[12px]">
+                    {Number(item.ruseCpct || 0).toLocaleString()}
+                  </td>
+                  <td className="px-3 py-2 text-center">
+                    <button
+                      onClick={() => handleDelete(item.pbnstRuseFcltId)}
+                      className="text-red-500 hover:text-red-700 text-sm font-bold"
+                      aria-label="삭제"
+                      title="삭제"
+                    >
+                      ✕
+                    </button>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={4} className="px-3 py-6 text-center text-[12px] text-gray-500">
+                  선택된 시설이 없습니다.
+                </td>
+              </tr>
+            )}
+          </tbody>
         </table>
       </div>
     </div>
diff --git a/apps/wr/app/(popUp-layout)/splyPopup/service/map.ts b/apps/wr/app/(popUp-layout)/splyPopup/service/map.ts
index 605bae620..11d556468 100644
--- a/apps/wr/app/(popUp-layout)/splyPopup/service/map.ts
+++ b/apps/wr/app/(popUp-layout)/splyPopup/service/map.ts
@@ -3,6 +3,7 @@
  * 관망도 API
  */
  import { DEV_URL_WR, DEV_URL_SN } from "@/components/lib/config";
+import { SITE_ID } from "@/src/shared/config";
 
 export type LyrStngProps = {
   lyr_sn: string
@@ -34,6 +35,7 @@ export const mapService = {
       method: 'GET',
       headers: {
         'Accept': 'application/json',
+        'X-Site-Id': SITE_ID,
       },
     });
 
@@ -48,6 +50,7 @@ export const mapService = {
       method: 'GET',
       headers: {
         'Accept': 'application/json',
+        'X-Site-Id': SITE_ID,
       },
     });
 
diff --git a/apps/wr/app/(with-layout)/jwttest/page.tsx b/apps/wr/app/(with-layout)/jwttest/page.tsx
new file mode 100644
index 000000000..a0d9735a0
--- /dev/null
+++ b/apps/wr/app/(with-layout)/jwttest/page.tsx
@@ -0,0 +1,220 @@
+/**
+ * JWT를 decoding하면 만료시간을 읽을 수 있다.
+ * JWT는 3부분으로 구성 : Header.Payload.Signature
+ * Payload 부분에 만료시간(exp)이 있다.
+ */
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { LoginApi } from "@/src/entities/auth/api/login-service";
+import { CLAIM_NAME } from "@/src/shared/config";
+import { getCookie } from "@/src/shared/lib";
+
+interface JwtPayload {
+  sub?: string; // 토큰 subject. 일반적으로 사용자 식별자나 주체 정보
+  exp?: number; // 만료 시각(Unix timestamp, 초 단위)
+  iat?: number; // 토큰 발급 시각(Unix timestamp, 초 단위)
+  [key: string]: unknown; // 그 외 JWT payload에 포함될 수 있는 추가 클레임
+}
+
+interface JwtState {
+  token: string; // 쿠키에서 읽어온 JWT 원본 문자열
+  payload: JwtPayload | null; // JWT를 파싱한 payload 객체
+  exp: number | null; // payload에서 추출한 exp 값
+  expDateLocal: string | null; // exp를 로컬 시간 문자열로 변환한 값
+  remainingMs: number | null; // 현재 시각 기준 남은 시간(ms)
+  error: string | null; // 쿠키 없음, 파싱 실패 등 오류 메시지
+}
+
+const initialJwtState: JwtState = {
+  token: "",
+  payload: null,
+  exp: null,
+  expDateLocal: null,
+  remainingMs: null,
+  error: null,
+};
+
+function parseJwt(token: string): JwtPayload {
+  const parts = token.split(".");
+  if (parts.length !== 3) {
+    throw new Error("유효한 JWT 형식이 아닙니다.");
+  }
+
+  const base64Url = parts[1] ?? ""; // Payload를 가져온다.
+  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+  const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
+  const jsonPayload = decodeURIComponent(
+    atob(padded)
+      .split("")
+      .map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`)
+      .join("")
+  );
+
+  return JSON.parse(jsonPayload) as JwtPayload;
+}
+
+function formatRemainingMs(remainingMs: number | null): string {
+  if (remainingMs === null) return "-";
+  if (remainingMs <= 0) return "만료됨";
+
+  const totalSeconds = Math.floor(remainingMs / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return `${hours}시간 ${minutes}분 ${seconds}초`;
+}
+
+function readJwtState(): JwtState {
+  const token = getCookie(CLAIM_NAME) ?? "";
+
+  if (!token) {
+    return {
+      token: "",
+      payload: null,
+      exp: null,
+      expDateLocal: null,
+      remainingMs: null,
+      error: `${CLAIM_NAME} 쿠키가 없습니다.`,
+    };
+  }
+
+  try {
+    const payload = parseJwt(token);
+
+    if (typeof payload.exp !== "number") {
+      return {
+        token,
+        payload,
+        exp: null,
+        expDateLocal: null,
+        remainingMs: null,
+        error: "JWT payload에 exp 값이 없습니다.",
+      };
+    }
+
+    const expMs = payload.exp * 1000;
+
+    return {
+      token,
+      payload,
+      exp: payload.exp,
+      expDateLocal: new Date(expMs).toLocaleString(),
+      remainingMs: Math.max(expMs - Date.now(), 0),
+      error: null,
+    };
+  } catch (error) {
+    return {
+      token,
+      payload: null,
+      exp: null,
+      expDateLocal: null,
+      remainingMs: null,
+      error:
+        error instanceof Error
+          ? error.message
+          : "JWT 파싱 중 오류가 발생했습니다.",
+    };
+  }
+}
+
+export default function Page() {
+  const [jwtState, setJwtState] = useState<JwtState>(initialJwtState);
+  const isRefreshingRef = useRef(false);
+
+  const handleSilentRefresh = async () => {
+    try {
+      await LoginApi.silentRefresh();
+    } catch (error) {
+      console.error("Manual silent refresh failed:", error);
+    } finally {
+      setJwtState(readJwtState());
+    }
+  };
+
+  useEffect(() => {
+    const syncJwtState = async () => {
+      const nextState = readJwtState();
+
+      if (
+        nextState.remainingMs !== null &&
+        nextState.remainingMs > 0 &&
+        nextState.remainingMs < 5 * 60 * 1000 &&
+        !isRefreshingRef.current
+      ) {
+        isRefreshingRef.current = true;
+        try {
+          await LoginApi.silentRefresh();
+        } catch (error) {
+          console.error("JWT test silent refresh failed:", error);
+        }
+      }
+
+      setJwtState(readJwtState());
+
+      if (
+        nextState.remainingMs === null ||
+        nextState.remainingMs >= 5 * 60 * 1000 ||
+        nextState.remainingMs <= 0
+      ) {
+        isRefreshingRef.current = false;
+      }
+    };
+
+    void syncJwtState();
+    const timer = window.setInterval(() => {
+      void syncJwtState();
+    }, 1000);
+
+    return () => window.clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="space-y-4 p-8 text-base">
+      <h1 className="text-2xl font-bold">JWT Exp Test</h1>
+
+      <button
+        type="button"
+        className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+        onClick={() => {
+          void handleSilentRefresh();
+        }}
+      >
+        Silent Refresh 호출
+      </button>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">쿠키명</div>
+        <div>{CLAIM_NAME}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">exp</div>
+        <div>{jwtState.exp ?? "-"}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">만료시각</div>
+        <div>{jwtState.expDateLocal ?? "-"}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">남은시간</div>
+        <div>{formatRemainingMs(jwtState.remainingMs)}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">상태</div>
+        <div>{jwtState.error ?? "정상"}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">payload</div>
+        <pre className="overflow-auto whitespace-pre-wrap break-all text-sm">
+          {jwtState.payload ? JSON.stringify(jwtState.payload, null, 2) : "-"}
+        </pre>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/wr/app/(with-layout)/layout.tsx b/apps/wr/app/(with-layout)/layout.tsx
index 0367c77af..1e43f4c32 100644
--- a/apps/wr/app/(with-layout)/layout.tsx
+++ b/apps/wr/app/(with-layout)/layout.tsx
@@ -19,6 +19,7 @@
 
 "use client";
 import { BaseLayout } from "@common/components/ui";
+import { useQueryClient } from "@tanstack/react-query";
 import { useWrStore } from "../store";
 import { MainDiv } from "@common/business_components/ui";
 import type { MenuItem } from "../store/common/type/menu";
@@ -35,6 +36,7 @@ export default function RootLayout({
   const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);
   const router = useRouter();
   const pathname = usePathname();
+  const queryClient = useQueryClient();
 
   const changeMenu = (path: MenuItem) => {
     setCurrentMenuInfo(path);
@@ -46,7 +48,7 @@ export default function RootLayout({
     }
   };
   return (
-    <BaseLayout currentPath={pathname ?? ""} handleMenuClick={changeMenu}>
+    <BaseLayout queryClient={queryClient} currentPath={pathname ?? ""} handleMenuClick={changeMenu}>
       <PageLayout>
         <MainDiv>{children}</MainDiv>
       </PageLayout>
diff --git a/apps/wr/app/(with-layout)/matMng/coMat/coMatRvw/page.tsx b/apps/wr/app/(with-layout)/matMng/coMat/coMatRvw/page.tsx
index 0551b07a2..4996b1cd9 100644
--- a/apps/wr/app/(with-layout)/matMng/coMat/coMatRvw/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMat/coMatRvw/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 /**
- * 📄 CoMatRvw 수요매칭 검토
+ * 📄 CoMatRvw 수요처 매칭 검토
  * Next.js App Router (app/) 기반 페이지 컴포넌트 예시
  *
  * - 대민에서 신청하는 수요처의 수요등록 정보를 운영담당자가 수요 매칭 검토를 진행한다. 
@@ -8,12 +8,13 @@
  */
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
-import { usageProcData } from "@/app/store/matDmd/coMatRvw/headList";
+import { usageProcData } from "@/app/store/matDmd/coMatRvw/headList"; // 용도에 따른 처리공정
 import {
   DmdCoReqSchema,
   type DmdCoReqType,
   type DmdMatTableType,
 } from "@/app/store/matDmd/coMatRvw/type";
+import { DEFAULT_LIST_SIZE } from "@/src/shared/config";
 import { formH1Class } from "@/components/lib/class/comClass";
 import {
   formatPhoneNumber,
@@ -21,7 +22,7 @@ import {
   getdmdMatFlag,
   tableData,
   yearOptions,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
 import ConCostForm from "@/components/ui/form/coMat/conCostForm/conCostForm";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import {
@@ -44,21 +45,66 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import moment from "moment";
 import { useEffect, useRef, useState } from "react";
 import { useForm, useWatch } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
 import { z } from "zod";
 
+const formatNumberWithComma = (value: string | number | null | undefined) => {
+  if (value === null || value === undefined || value === "") return "";
+
+  const normalized =
+    typeof value === "string" ? Number(value.replace(/,/g, "")) : Number(value);
+
+  if (Number.isNaN(normalized)) {
+    return String(value);
+  }
+
+  return normalized.toLocaleString("ko-KR");
+};
+
+const EMPTY_DETAIL_FORM: Partial<DmdCoReqType> = {
+  dmdInfoSn: 0,
+  dmdInfoId: "",
+  dmndQty: undefined,
+  wntUntprc: undefined,
+  useUsgCd: "",
+  dmndTmng: undefined,
+  grssClfg: undefined,
+  combResdch: undefined,
+  trbt: undefined,
+  blgcOxygDmndQnt: undefined,
+  smll: undefined,
+  crmty: undefined,
+  tn: undefined,
+  tph: undefined,
+  ph: undefined,
+  clIonQnt: undefined,
+  cdtnv: undefined,
+  rmrk: undefined,
+  ruseUtztnFcltNm: "",
+  splyCndtList: [],
+  totalConstCost: 0,
+  demandCst: {
+    usgPrcsProcs: "",
+    cstrnCst: 0,
+    fcltSbsdCstrnCst: 0,
+    prcsFcltCpctCstrnCst: 0,
+  },
+  demandMatching: undefined,
+  demandCo: undefined,
+};
 
 export default function CoMatRvw() {
+  const readOnlyInputClass = "bg-slate-50 text-gray-700";
   const { auth, code, coRvw, coMatRvwInit, coMatRvwSearch, coMatRvwInqua } =
     useWrStore((state) => state);
   const { coMatRvwRes, coMatRvwCount } = coRvw;
+  // const [mounted, setMounted] = useState(false);
   const { regAuthrtYn } = auth;
   const alert = useAlertStore((state) => state.setMessage);
 
   //init, sub, match
   const initRef = useRef<boolean>(false);
   const { coRvwHeadList } = coRvw;
-  const [pageNation, setPageNatiion] = useState<number>(1);
+  // const [pageNation, setPageNatiion] = useState<number>(1);
 
   const [dmdCoNm, setDmdCoNm] = useState<string>("");
   const [dmdMatData, setDmdMtaData] = useState<DmdMatTableType[]>([]);
@@ -74,15 +120,25 @@ export default function CoMatRvw() {
   const [toDate, setToDate] = useState<string>(
     String(new Date().getFullYear())
   );
-  const [selectData, setSelectData] = useState<DmdCoReqType>(
-    {} as DmdCoReqType
-  );
+  const [selectedRowIndex, setSelectedRowIndex] = useState<number>(-1);
+  const [resetSelection, setResetSelection] = useState(false);
+  const [selectData, setSelectData] = useState<DmdCoReqType | null>(null); // selectData를 null로 초기화
   const [selectionVersion, setSelectionVersion] = useState(0);
   const bottomRef = useRef<HTMLDivElement | null>(null);
 
+  const getCurrentRegionCode = () => {
+    if (String(objSearch.sgg).length > 0 && String(objSearch.sgg) !== "0") {
+      return String(objSearch.sgg);
+    }
+    if (String(objSearch.city).length > 0) {
+      return String(objSearch.city);
+    }
+    return "";
+  };
 
   //수요 매칭 검색
   const getSearch = (
+    pageNo: number,
     startYear: number,
     endYear: number,
     sggCd: string,
@@ -90,15 +146,15 @@ export default function CoMatRvw() {
   ) => {
     if (dmdCoNm.length > 0) {
       coMatRvwSearch(
-        pageNation,
-        13,
+        pageNo,
+        DEFAULT_LIST_SIZE,
         String(startYear),
         String(endYear),
         sggCd,
         dmdCoNm
       );
     } else {
-      coMatRvwInqua(pageNation, 13, String(startYear), String(endYear), sggCd);
+      coMatRvwInqua(pageNo, DEFAULT_LIST_SIZE, String(startYear), String(endYear), sggCd);
     }
   };
 
@@ -110,21 +166,44 @@ export default function CoMatRvw() {
 
   const TableCellClick = (index: number) => {
     if (coMatRvwRes && coMatRvwRes[index]) {
+      setSelectedRowIndex(index);
+      setResetSelection(false);
       setSelectData(coMatRvwRes[index]);
       setSelectionVersion((v) => v + 1); // 행을 클릭할 때마다 버전을 1씩 증가
-      bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+      bottomRef.current?.scrollIntoView({ behavior: "smooth" }); // 화면 스크롤 처리
     }
   };
+
+  const resetDetailSections = () => {
+    setSelectedRowIndex(-1);
+    setResetSelection(true);
+    setSelectData(null);
+    form.reset(EMPTY_DETAIL_FORM);
+    setSelectionVersion((v) => v + 1);
+  };
+
   const useUsgCdWatch = useWatch({ control: form.control, name: "useUsgCd" });
+  const useUsgCdText =
+    code.sewageOutFclttUse?.find((item) => item.val === useUsgCdWatch)?.text ??
+    String(useUsgCdWatch ?? "");
   useEffect(() => {
     if (useUsgCdWatch) {
+      const normalizedUseUsgCd =
+        code.sewageOutFclttUse?.find((item) => item.val === useUsgCdWatch)?.val ??
+        code.sewageOutFclttUse?.find((item) => item.text === useUsgCdWatch)?.val ??
+        useUsgCdWatch;
+
+      if (normalizedUseUsgCd !== useUsgCdWatch) {
+        form.setValue("useUsgCd", normalizedUseUsgCd);
+      }
+
       form.setValue(
         "demandCst.usgPrcsProcs",
-        usageProcData?.find((item) => item.usage === useUsgCdWatch)?.process ??
+        usageProcData?.find((item) => item.useUsgCd === normalizedUseUsgCd)?.process ??
           ""
       );
     }
-  }, [useUsgCdWatch, form, selectionVersion]);
+  }, [useUsgCdWatch, form, selectionVersion, code.sewageOutFclttUse]);
 
   useEffect(() => {
     if (coMatRvwRes && coMatRvwRes.length > 0) {
@@ -145,6 +224,9 @@ export default function CoMatRvw() {
         };
       });
       setDmdMtaData(tableData(data, { code }));
+    } else {
+      setDmdMtaData([]);
+      setSelectData(null);
     }
   }, [coMatRvwRes]);
 
@@ -164,7 +246,8 @@ export default function CoMatRvw() {
 
   useEffect(() => {
     if (!initRef.current) {
-      coMatRvwInit(1, 13, fromDate, toDate);
+      coMatRvwInit(1, DEFAULT_LIST_SIZE, fromDate, toDate);
+      //setMounted(true);
       initRef.current = true;
     }
   }, [coMatRvwInit, initRef, fromDate, toDate]);
@@ -182,6 +265,20 @@ export default function CoMatRvw() {
       setSelectionVersion((v) => v + 1); // 강제로 바뀌었다고 알리기
     }
   }, [selectData, form]);
+
+  /**
+   * 하수 표준공사비 시뮬레이션(모의산정)
+   */
+  const constCostSimulation = () => {
+    const url = `/constCostSimulation`;
+    const width = Math.floor(window.screen.availWidth * 0.6);
+    const height = Math.floor(window.screen.availHeight * 0.6);
+    const left = Math.floor(window.screenX + (window.outerWidth - width) / 2);
+    const top = Math.floor(window.screenY + (window.outerHeight - height) / 2);
+    const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
+    window.open(url, "candidatePopup", popupOptions);
+  };
+
   return (
     <>
       <ContentsDiv>
@@ -258,23 +355,19 @@ export default function CoMatRvw() {
                               "시작년도가 종료년도 이후로 설정할 수 없습니다."
                             );
                           } else {
-                            let con: string | number = "";
-                            if (String(objSearch.city).length > 0) {
-                              con = String(objSearch.city);
-                            }
-                            if (
-                              String(objSearch.sgg).length > 0 &&
-                              String(objSearch.sgg) !== "0"
-                            ) {
-                              con = String(objSearch.sgg);
-                            }
-                            getSearch(fromNum, toNum, con, dmdCoNm);
+                            const con = getCurrentRegionCode();
+                            resetDetailSections();
+                            //setPageNatiion(1);
+                            getSearch(1, fromNum, toNum, con, dmdCoNm);
                           }
                         }
                       }}
                     >
                       조회
                     </Button>
+                    <Button className={btnClass} onClick={()=>constCostSimulation()} >
+                      표준공사비 모의산정
+                    </Button>
                   </div>
                 </div>
               </SearchFormRight>
@@ -289,21 +382,26 @@ export default function CoMatRvw() {
                 headName={"수요매칭검토현황"}
                 tableData={dmdMatData || []}
                 headlist={coRvwHeadList}
-                pageSize={20}
+                widthFixed={true}
+                pageSize={DEFAULT_LIST_SIZE}
                 total={coMatRvwCount}
+                resetSelection={resetSelection}
+                index={selectedRowIndex}
                 cellClick={(index: number | undefined) => {
                   if (index !== undefined && index >= 0) {
                     TableCellClick(index);
                   }
                 }}
                 onPageChange={(val) => {
-                  setPageNatiion(val);
+                  const con = getCurrentRegionCode();
+                  resetDetailSections();
+                  //setPageNatiion(val);
+                  getSearch(val, Number(fromDate), Number(toDate), con, dmdCoNm);
                 }}
               ></UiTable>
-              <div ref={bottomRef} />
+              <div ref={bottomRef} className="scroll-mt-[45px]"/>
             </ListDiv>
-            <br /><hr />
-            <br />
+            <hr className="my-4"/>
             {/* <ScrollArea className="h-[49vh]"> */}
             <ListDiv>
               <div className="card-header flex items-center justify-between">
@@ -325,10 +423,12 @@ export default function CoMatRvw() {
                             onChange={(e) => {
                               field.onChange(String(e.target.value));
                             }}
-                            value={
-                              moment(field.value).format("YYYY-MM-DD") ?? ""
+                            value={ // 값이 있을 때만 moment 실행, 없으면 빈 문자열
+                              field.value ? moment(field.value).format("YYYY-MM-DD") : ""
                             }
                             readOnly
+                            suppressHydrationWarning // 시간 차이로 인한 경고 무시
+                            className={readOnlyInputClass}
                           />
                         </FormUi>
                       )}
@@ -342,13 +442,13 @@ export default function CoMatRvw() {
                         <FormUi label="요구수량(m³/일)">
                           <Input
                             placeholder=""
-                            type="number"
-                            step="0.1"
+                            type="text"
                             onChange={(e) => {
                               field.onChange(Number(e.target.value));
                             }}
-                            value={field.value ?? 0}
+                            value={formatNumberWithComma(field.value)}
                             readOnly
+                            className={readOnlyInputClass}
                           />
                         </FormUi>
                       )}
@@ -367,8 +467,9 @@ export default function CoMatRvw() {
                             onChange={(e) => {
                               field.onChange(e.target.value);
                             }}
-                            value={field.value ?? ""}
+                            value={useUsgCdText}
                             readOnly
+                            className={readOnlyInputClass}
                           />
                         </FormUi>
                       )}
@@ -379,16 +480,16 @@ export default function CoMatRvw() {
                       control={form.control}
                       name="wntUntprc"
                       render={({ field }) => (
-                        <FormUi label="희망단가(원/m3)">
+                        <FormUi label="희망단가(원/m³)">
                           <Input
                             placeholder=""
-                            type="number"
-                            step="0.1"
+                            type="text"
                             onChange={(e) => {
                               field.onChange(Number(e.target.value));
                             }}
-                            value={field.value ?? 0}
+                            value={formatNumberWithComma(field.value)}
                             readOnly
+                            className={readOnlyInputClass}
                           />
                         </FormUi>
                       )}
@@ -402,17 +503,20 @@ export default function CoMatRvw() {
                       control={form.control}
                       name="grssClfg"
                       render={({ field }) => (
-                        <FormUi label={"총대장균군수(개/mg)"}>
+                        <FormUi label={"총대장균군수(개/100㎖)"}>
                           <div className="flex items-center gap-2">
                             <div className="relative flex-1 min-w-0">
                               <Input
                                 type="text"
-                                className="w-full pr-16 border py-2 text-right rounded-md"
+                                className={`w-full pr-16 border py-2 text-right rounded-md ${readOnlyInputClass}`}
                                 placeholder=""
                                 value={
-                                  field.value != -1 ||field.value != undefined
-                                    ? `${field.value}`
-                                    : "불검출" 
+                                  field.value === null ||
+                                  field.value === undefined
+                                    ? ""
+                                    : field.value === -1
+                                      ? "불검출"
+                                      : formatNumberWithComma(field.value)
                                 }
                                 readOnly
                               />
@@ -440,9 +544,9 @@ export default function CoMatRvw() {
                             <div className="relative flex-1 min-w-0">
                               <Input
                                 type="text"
-                                className="w-full pr-16 border py-2 text-right rounded-md"
+                                className={`w-full pr-16 border py-2 text-right rounded-md ${readOnlyInputClass}`}
                                 placeholder=""
-                                value={field.value ?? ""}
+                                value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
                               <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
@@ -464,9 +568,9 @@ export default function CoMatRvw() {
                             <div className="relative flex-1 min-w-0">
                               <Input
                                 placeholder=""
-                                className="w-full pr-16 border py-2 text-right rounded-md"
+                                className={`w-full pr-16 border py-2 text-right rounded-md ${readOnlyInputClass}`}
                                 type="text"
-                                value={field.value ?? 0}
+                                value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
                               <span className=" text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
@@ -489,12 +593,12 @@ export default function CoMatRvw() {
                               <Input
                                 placeholder=""
                                 type="text"
-                                className="w-full pr-16 border py-2 text-right rounded-md"
+                                className={`w-full pr-16 border py-2 text-right rounded-md ${readOnlyInputClass}`}
                                 step="0.1"
                                 onChange={(e) => {
                                   field.onChange(Number(e.target.value));
                                 }}
-                                value={field.value ?? ""}
+                                value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
                               <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
@@ -517,6 +621,7 @@ export default function CoMatRvw() {
                             type="text"
                             value={field.value ?? ""}
                             readOnly
+                            className={readOnlyInputClass}
                           />
                         </FormUi>
                       )}
@@ -532,10 +637,10 @@ export default function CoMatRvw() {
                             <div className="relative flex-1 min-w-0">
                               <Input
                                 placeholder=""
-                                className="w-full pr-16 border py-2 text-right rounded-md"
+                                className={`w-full pr-16 border py-2 text-right rounded-md ${readOnlyInputClass}`}
                                 type="text"
                                 step="0.1"
-                                value={field.value ?? ""}
+                                value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
                               <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
@@ -557,12 +662,12 @@ export default function CoMatRvw() {
                             <div className="relative flex-1 min-w-0">
                               <Input
                                 placeholder=""
-                                className="w-full pr-16 border py-2 text-right rounded-md"
+                                className={`w-full pr-16 border py-2 text-right rounded-md ${readOnlyInputClass}`}
                                 type="text"
                                 onChange={(e) => {
                                   field.onChange(Number(e.target.value));
                                 }}
-                                value={field.value ?? 0}
+                                value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
                               <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
@@ -584,12 +689,12 @@ export default function CoMatRvw() {
                             <div className="relative flex-1 min-w-0">
                               <Input
                                 placeholder=""
-                                className="w-full pr-16 border py-2 text-right rounded-md"
+                                className={`w-full pr-16 border py-2 text-right rounded-md ${readOnlyInputClass}`}
                                 type="text"
                                 onChange={(e) => {
                                   field.onChange(Number(e.target.value));
                                 }}
-                                value={field.value ?? 0}
+                                value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
                               <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
@@ -611,12 +716,12 @@ export default function CoMatRvw() {
                             <div className="relative flex-1 min-w-0">
                               <Input
                                 placeholder=""
-                                className="w-full pr-16 border py-2 text-right rounded-md"
+                                className={`w-full pr-16 border py-2 text-right rounded-md ${readOnlyInputClass}`}
                                 type="text"
                                 onChange={(e) => {
                                   field.onChange(Number(e.target.value));
                                 }}
-                                value={field.value ?? 0}
+                                value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
                             </div>
@@ -635,12 +740,12 @@ export default function CoMatRvw() {
                             <div className="relative flex-1 min-w-0">
                               <Input
                                 placeholder=""
-                                className="w-full pr-16 border py-2 text-right rounded-md"
+                                className={`w-full pr-16 border py-2 text-right rounded-md ${readOnlyInputClass}`}
                                 type="text"
                                 onChange={(e) => {
                                   field.onChange(Number(e.target.value));
                                 }}
-                                value={field.value ?? 0}
+                                value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
                               <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
@@ -662,12 +767,12 @@ export default function CoMatRvw() {
                             <div className="relative flex-1 min-w-0">
                               <Input
                                 placeholder=""
-                                className="w-full pr-16 border py-2 text-right rounded-md"
+                                className={`w-full pr-16 border py-2 text-right rounded-md ${readOnlyInputClass}`}
                                 type="text"
                                 onChange={(e) => {
                                   field.onChange(Number(e.target.value));
                                 }}
-                                value={field.value ?? 0}
+                                value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
                               <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
@@ -693,6 +798,7 @@ export default function CoMatRvw() {
                             }}
                             value={field.value ?? ""}
                             readOnly
+                            className={readOnlyInputClass}
                           />
                         </FormUi>
                       )}
@@ -717,10 +823,11 @@ export default function CoMatRvw() {
                                   ruseUtztnFcltNm: e.target.value,
                                 };
                                 field.onChange(newValue);
-                              }}
-                              value={field.value?.ruseUtztnFcltNm ?? ""}
-                              readOnly
-                            />
+                            }}
+                            value={field.value?.ruseUtztnFcltNm ?? ""}
+                            readOnly
+                            className={readOnlyInputClass}
+                          />
                           </FormUi>
                         )}
                       />
@@ -745,8 +852,6 @@ export default function CoMatRvw() {
           </div>
         </div>
       </ContentsDiv>
-      <Toaster position="top-center" />
     </>
   );
 }
-
diff --git a/apps/wr/app/(with-layout)/matMng/coMat/ruseCaseMng/page.tsx b/apps/wr/app/(with-layout)/matMng/coMat/ruseCaseMng/page.tsx
index d315b2c25..9fc636427 100644
--- a/apps/wr/app/(with-layout)/matMng/coMat/ruseCaseMng/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMat/ruseCaseMng/page.tsx
@@ -3,7 +3,7 @@
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import { ruseUtzType } from "@/app/store/matDmd/ruseCaseMng/headList";
-import { excelDownload, getCity } from "@/components/lib/func/commom";
+import { excelDownload, getCity } from "@/components/lib/func/common";
 import RuseCaseMngExcel from "@/components/ui/modal/coMat/ruseCaseMng/ruseCaseMngExcelModal";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import {
@@ -23,7 +23,6 @@ import ListDiv from "@common/business_components/ui/list_div";
 import { Button, Label } from "@common/components/ui";
 import { useAlertStore } from "@/src/shared/lib";
 import { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import * as XLSX from "xlsx";
 
@@ -44,6 +43,7 @@ export default function RuseCaseMng() {
   const [selectUtz, setSelectUtz] = useState<string>("");
   const [name, setName] = useState<string>("");
   const [resetPage, isResetPage] = useState(false);
+  const [displayRuseCaseMngList, setDisplayRuseCaseMngList] = useState(ruseCaseMngList);
   const { t } = useTranslation("base");
   const alert = useAlertStore((state) => state.setMessage);
 
@@ -56,6 +56,19 @@ export default function RuseCaseMng() {
     ruseCaseMngInit();
   }, []);
 
+  useEffect(() => {
+    const sewageOutUseCodeList = code.sewageOutFclttUse ?? [];
+
+    setDisplayRuseCaseMngList(
+      ruseCaseMngList.map((item) => ({
+        ...item,
+        grnteWqUsg:
+          sewageOutUseCodeList.find((codeItem) => codeItem.val === item.grnteWqUsg)?.text ??
+          item.grnteWqUsg,
+      }))
+    );
+  }, [code.sewageOutFclttUse, ruseCaseMngList]);
+
   // 시도 선택
   const getSelCity = (val: string | number) => {
     const cityValue = String(val);
@@ -133,7 +146,8 @@ export default function RuseCaseMng() {
           item.ruseFcltUsg,
           item.ruseFcltSplyCpct,
           item.ruseFcltPrcsMsrc,
-          item.grnteWqUsg,
+          code.sewageOutFclttUse.find((codeItem) => codeItem.val === item.grnteWqUsg)?.text ??
+            item.grnteWqUsg,
           item.grnteWqGrssClfg,
           item.grnteWqCombResdch,
           item.grnteWqTrbt,
@@ -313,8 +327,9 @@ export default function RuseCaseMng() {
               <div className="w-[350%]">
                 <UiTable
                   headName={"물재이용사례 현황"}
-                  tableData={ruseCaseMngList}
+                  tableData={displayRuseCaseMngList}
                   headlist={ruseCaseMng.ruseHeadList}
+                  widthFixed={true}
                   pageSize={20}
                   total={count}
                   cellClick={undefined}
@@ -341,7 +356,6 @@ export default function RuseCaseMng() {
           </div>
         </div>
       </ContentsDiv>
-      <Toaster position="top-center" />
       {/* 엑셀 등록 모달 */}
       <UiModal
         open={isExcelOpen}
@@ -354,3 +368,4 @@ export default function RuseCaseMng() {
     </>
   );
 }
+
diff --git a/apps/wr/app/(with-layout)/matMng/coMat/ruseRvwHstry/page.tsx b/apps/wr/app/(with-layout)/matMng/coMat/ruseRvwHstry/page.tsx
index 782becca9..b142bff16 100644
--- a/apps/wr/app/(with-layout)/matMng/coMat/ruseRvwHstry/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMat/ruseRvwHstry/page.tsx
@@ -1,16 +1,19 @@
+/**
+ * 수요처매칭 > 재이용검토이력
+ */
 "use client";
 
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import { type RvwHistTableType } from "@/app/store/matDmd/coMatRvw/type";
 import {
-  confirmToast,
   formatPhoneNumber,
   getCity,
   getdmdMatFlag,
   tableData,
   yearOptions,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import {
   ContentsDiv,
@@ -27,7 +30,6 @@ import { Button, Label } from "@common/components/ui";
 import { useAlertStore } from "@/src/shared/lib";
 import moment from "moment";
 import { useCallback, useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 export default function RuseRvwHstry() {
   const {
@@ -42,6 +44,7 @@ export default function RuseRvwHstry() {
   const { rvwHistRes, ruseHistHeadList, rvwHistCount } = ruseHist;
   const { regAuthrtYn } = auth;
   const alert = useAlertStore((state) => state.setMessage);
+  const { confirm } = useConfirm();
 
   const [pageNation, setPageNatiion] = useState<number>(1);
 
@@ -143,7 +146,7 @@ export default function RuseRvwHstry() {
     },
     [rvwHistData]
   );
-  const confrirmToast = () => {
+  const confrirmToast = async () => {
     const completeData = rvwHistData
       ?.map((item) => {
         if (item?.completeYn.chk && item.splyFcltFlg === "검토완료") {
@@ -153,31 +156,14 @@ export default function RuseRvwHstry() {
       .filter((item) => item !== undefined);
 
     if (completeData && completeData?.length > 0) {
-      confirmToast(t('isMatchFinishMsg'), () => ruseRvwComplete(completeData as number[]));
+      if (await confirm(t("isMatchFinishMsg"))) {
+        const message = await ruseRvwComplete(completeData as number[]);
+        alert(message);
+      }
 
     //   const handleConfirm = async () => {
     //     ruseRvwComplete(completeData as number[]);
     //  };
-      // toast((t) => (
-      //   <span className="flex flex-col items-center">
-      //    매칭완료를 진행하시겠습니까?  
-      //     <br />
-      //     <div className="mt-2 flex flex-row space-x-2">
-      //       <Button
-      //         size={"sm"}
-      //         onClick={() => {
-      //           toast.dismiss(t.id);
-      //           ruseRvwComplete(completeData as number[]);
-      //         }}
-      //       >
-      //         확인
-      //       </Button>
-      //       <Button size={"sm"} onClick={() => toast.dismiss(t.id)}>
-      //         취소
-      //       </Button>
-      //     </div>
-      //   </span>
-      // ));
     } else {
       alert(t('isNotMatchFinishMsg'));
     }
@@ -214,6 +200,9 @@ export default function RuseRvwHstry() {
           dmdCoNm: item.demandCo?.dmdCoNm,
           daddr: item.demandCo?.daddr,
           telno: formatPhoneNumber(item.demandCo?.telno || ""),
+          useUsgCd:
+            code.sewageOutFclttUse.find((codeItem) => codeItem.val === item.useUsgCd)?.text ??
+            item.useUsgCd,
           dmndTmng: item?.dmndTmng
             ? moment(item?.dmndTmng).format("YYYY-MM-DD")
             : "없음",
@@ -229,7 +218,7 @@ export default function RuseRvwHstry() {
 
       setRvwHistData(tableData(data, { code }));
     }
-  }, [rvwHistRes]);
+  }, [code.sewageOutFclttUse, rvwHistRes]);
 
 
   return (
@@ -314,7 +303,7 @@ export default function RuseRvwHstry() {
                   >
                     조회
                   </Button>
-                  <Button className={btnClass} onClick={confrirmToast} disabled={regAuthrtYn==='N'}>
+                  <Button className={btnClass} onClick={() => { void confrirmToast(); }} disabled={regAuthrtYn==='N'}>
                     저장
                   </Button>
                 </div>
@@ -331,6 +320,7 @@ export default function RuseRvwHstry() {
               headName={"재이용검토현황"}
               tableData={rvwHistData || []}
               headlist={ruseHistHeadList}
+              widthFixed={true}
               pageSize={20}
               total={rvwHistCount}
               cellClick={(index: number | undefined, headId: string) => {
@@ -344,8 +334,8 @@ export default function RuseRvwHstry() {
           </ListDiv>
         </div>
       </div>
-      <Toaster position="top-center" />
     </ContentsDiv>
   );
 }
 
+
diff --git a/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx b/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx
index 85d9ef635..71ec60cf0 100644
--- a/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx
@@ -1,16 +1,18 @@
-"use client";
+"use client";
 
+/**
+ * 수요처관리
+ */
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import { excelCoSttnParsing } from "@/app/store/matDmd/coSttn/excel";
 import { fetchType, getFetch } from "@/components/lib/api";
 import {
-  //confirmToast,
   excelDownload,
   formatPhoneNumber,
   getCity,
   tableData,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import {
   ContentsDiv,
@@ -29,7 +31,6 @@ import type { DemandCompType } from "@common/business_components/ui/sdmInsertFor
 import { Button } from "@common/components/ui";
 import moment from "moment";
 import { useCallback, useEffect, useState } from "react";
-// import toast, { Toaster } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useAlertStore } from "@/src/shared/lib";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
@@ -178,16 +179,55 @@ export default function CoSttn() {
         const message = await coSttnPwInit(dmdInfoId);
         alert(message);
       };
-      //confirmToast( t('isInitPw', { dmdInfoId: dmdInfoSliceId }), handleConfirm, 'text-2xl');
       if (await confirm(t('isInitPw', { dmdInfoId: dmdInfoSliceId }))) {
         await handleConfirm();
       }
     } else {
       alert("비밀번호 초기화를 원하는 행을 선택해주세요.");
-      // toast.error("비밀번호 초기화를 원하는 행을 선택해주세요.")
     }
   }
 
+  /**
+   * 등록/수정 : SdmInsertForm에서 저장 버튼을 눌렀을 때, 폼 데이터가 부모로 넘어오는 콜백
+   * @param data 
+   * @returns 
+   */
+  const handleRtnInputData = async (data: DemandCompType) => {
+    const con =
+      objSearch.sgg && objSearch.sgg !== "0"
+        ? objSearch.sgg
+        : objSearch.city;
+
+    if (updateData?.dmdInfoId) { // 수정
+      const message = await updateDemandCompany(data);
+      alert(message);
+      coSttnInit("1", "13", String(con));
+      setIsDmdModal({
+        isMoal: false,
+        data,
+      });
+      setIsResetSelection(true);
+      return;
+    }
+
+    const dmd = await getFetch(
+      fetchType.WR,
+      `/reuseFc/request/${data.dmdInfoId}`
+    );
+    if (dmd) {
+      alert(`사업자번호 ${dmd.dmdInfoId}는 이미 등록되었습니다. 다시등록해주세요`);
+      return;
+    }
+
+    const message = await regDemandCompany(data); // 등록
+    alert(message);
+    coSttnInit("1", "13", String(con));
+    setIsDmdModal({
+      isMoal: false,
+      data,
+    });
+  };
+
   return (
     <>
       <ContentsDiv>
@@ -284,12 +324,12 @@ export default function CoSttn() {
                 headlist={coSttn.coSttHeadList}
                 pageSize={13}
                 total={coSttnResCount || 0}
-                cellClick={ async(index: number | undefined) => {
-                const uuid = await getMyUUID();
-                const updateData  = coSttnRes[index as number];
-                if (updateData && typeof uuid === "string") {
-                  updateData.mdfr = uuid;
-                }
+                cellClick={async(index: number | undefined) => {
+                  const uuid = await getMyUUID();
+                  const updateData  = coSttnRes[index as number];
+                  if (updateData && typeof uuid === "string") {
+                    updateData.mdfr = uuid;
+                  }
                   setUpdateData(coSttnRes[index as number]);
                 }}
                 onPageChange={(page) => {
@@ -301,6 +341,7 @@ export default function CoSttn() {
                   coSttnSearch(String(page), "13", String(con));
                 }}
                 resetSelection={isResetSelection}
+                widthFixed={true}
               ></UiTable>
             </ListDiv>
           </div>
@@ -321,38 +362,7 @@ export default function CoSttn() {
               rtnValue={(searchText: string, pageCnt: number) => {
                 getDemandCompList(searchText, pageCnt);
               }}
-              rtnInputData={async (data) => {
-                const con =
-                  objSearch.sgg && objSearch.sgg !== "0"
-                    ? objSearch.sgg
-                    : objSearch.city;
-                if (updateData?.dmdInfoId) {
-                  const message = await updateDemandCompany(data as DemandCompType);
-                  alert(message);
-                  coSttnInit("1", "13", String(con));
-                  setIsDmdModal({
-                    isMoal: false,
-                    data: data as DemandCompType,
-                  });
-                  setIsResetSelection(true);
-                } else {
-                  const dmd = await getFetch(
-                    fetchType.WR,
-                    `/reuseFc/request/${data.dmdInfoId}`
-                  );
-                  if (dmd) {
-                    alert(`사업자번호 ${dmd.dmdInfoId}는 이미 등록되었습니다. 다시등록해주세요`);
-                    return;
-                  }
-                  const message = await regDemandCompany(data as DemandCompType);
-                  alert(message);
-                  coSttnInit("1", "13", String(con));
-                  setIsDmdModal({
-                    isMoal: false,
-                    data: data as DemandCompType,
-                  });
-                }
-              }}
+              rtnInputData={handleRtnInputData}
               bodyClassNm={"w-full mx-auto bg-white rounded-lg shadow-md p-6"}
               updateList={updateData}
               openNetwork={true}
@@ -360,7 +370,7 @@ export default function CoSttn() {
           }
         ></UiModal>
       </ContentsDiv>
-      {/* <Toaster position="top-center" /> */}
     </>
   );
 }
+
diff --git a/apps/wr/app/(with-layout)/matMng/coMng/drgtSttn/page.tsx b/apps/wr/app/(with-layout)/matMng/coMng/drgtSttn/page.tsx
index b4ca64268..1aafb4318 100644
--- a/apps/wr/app/(with-layout)/matMng/coMng/drgtSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMng/drgtSttn/page.tsx
@@ -3,7 +3,7 @@ import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import type { customDrgt } from "@/app/store/matDmd/drgtSttn";
 import { drgtHeadListExport } from "@/app/store/matDmd/drgtSttn/headList";
-import { getCity } from "@/components/lib/func/commom";
+import { getCity } from "@/components/lib/func/common";
 import DrgtDetailModal from "@/components/ui/modal/coMat/drgtDetailModal";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import { ContentsDiv, DateMonthPicker, downloadExcel, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, UiModal, UiTable, type SelectDataType } from "@common/business_components/ui";
@@ -11,7 +11,6 @@ import ListDiv from "@common/business_components/ui/list_div";
 import { Button, Label, ScrollArea } from "@common/components/ui";
 import { useAlertStore } from "@/src/shared/lib";
 import { useEffect, useState, useRef } from "react";
-import { Toaster } from "react-hot-toast";
 
 export default function DrgtSttn() {
     const { code, drgt, drgtSearch, drgtModalSearch, drgtInit } = useWrStore((state) => state);
@@ -292,8 +291,8 @@ export default function DrgtSttn() {
                     bodyClass={"w-[50vw] max-w-none h-[80vh]"}
                     body={<DrgtDetailModal data={drgtModal.data as customDrgt[]} />}
                 />
-                <Toaster position="top-center" />
             </ContentsDiv>
         </>
     )
 }
+
diff --git a/apps/wr/app/(with-layout)/matMng/coMng/ldrmntCoSttn/page.tsx b/apps/wr/app/(with-layout)/matMng/coMng/ldrmntCoSttn/page.tsx
index 13b596b5c..4bbaa3a43 100644
--- a/apps/wr/app/(with-layout)/matMng/coMng/ldrmntCoSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMng/ldrmntCoSttn/page.tsx
@@ -5,11 +5,10 @@ import { btnClass } from "@/app/store/common/code";
 import { type customLdrmnt } from "@/app/store/matDmd/ldrmntCoSttn";
 import { ldrmntHeadListExport } from "@/app/store/matDmd/ldrmntCoSttn/headList";
 import {
-  confirmToast,
   excelDownload,
   getCity,
   tableData
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
 import CoRegExcel from "@/components/ui/modal/coReg/coRegExcel/coRegExcelModal";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import CoDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/coDatailModal";
@@ -27,9 +26,9 @@ import {
 } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button } from "@common/components/ui";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { useAlertStore } from "@/src/shared/lib";
 import { useCallback, useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 
 export default function LdrmntCoSttn() {
@@ -48,6 +47,7 @@ export default function LdrmntCoSttn() {
   const [isDownloadClicked, setIsDownloadClicked] = useState(false);
   const { t } = useTranslation('base');
   const alert = useAlertStore((state) => state.setMessage);
+  const { confirm } = useConfirm();
   const { regAuthrtYn, mdfcnAuthrtYn } = auth;
 
   const excelClick = useCallback(() => {
@@ -248,7 +248,7 @@ export default function LdrmntCoSttn() {
         <div className="grid grid-cols-6 gap-4 ">
           <div className="col-span-6">
             <div className="overflow-x-auto">
-              <ListDiv className="min-w-max">
+              <ListDiv>
                 <UiTable
                   headName={[]}
                   tableData={bdstTable || []}
@@ -258,6 +258,7 @@ export default function LdrmntCoSttn() {
                   cellClick={(index: number | undefined) => { cellClick(index ?? undefined) }}
                   onPageChange={setPageNation}
                   resetPageNo={resetPage}
+                  widthFixed={true}
                 />
               </ListDiv>
             </div>
@@ -277,7 +278,9 @@ export default function LdrmntCoSttn() {
                   setDetailModal({ ...detailModal, isOpen: false });
                   ldrmntSearch(false, pageNation, '20', computeCityNm(), searchTxt || "");
                 };
-                confirmToast(t('isUpdateMsg'), handleConfirm);
+                if (await confirm(t("isUpdateMsg"))) {
+                  await handleConfirm();
+                }
               }} />}
           />
 
@@ -289,9 +292,9 @@ export default function LdrmntCoSttn() {
             bodyClass={"w-[40vw] max-w-none"}
             body={<CoRegExcel isModal={(isOpen) => setIsExcelOpen({ isModal: isOpen })} />}
           />
-          <Toaster position="top-center"></Toaster>
         </div>
       </ContentsDiv>
     </>
   )
 }
+
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/htdflReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/htdflReg/page.tsx
index 92abc7d24..cc892b6d1 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/htdflReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/htdflReg/page.tsx
@@ -3,9 +3,10 @@
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
-import { formatArchArea, tableData } from "@/components/lib/func/commom";
+import { formatArchArea, tableData } from "@/components/lib/func/common";
 import HtdflRegForm from "@/components/ui/form/fcltReg/htdflReg/htdflRegForm";
 import { BdstReg } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
+import { DEFAULT_LIST_SIZE } from "@/src/shared/config";
 import {
   ContentsDiv,
   ScrollArea,
@@ -18,7 +19,6 @@ import {
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button } from "@common/components";
 import { useEffect, useRef, useState } from "react";
-import { Toaster } from "react-hot-toast";
 
 export default function Home() {
   const {
@@ -137,12 +137,13 @@ export default function Home() {
         </div>
 
         <div className="grid grid-cols-6 gap-4 ">
-          <div className="col-span-4 h-full min-h-0">
-            <ListDiv className="min-h-0">
+          <div className="col-span-4">
+            <ListDiv>
+              <ScrollArea className="h-[75vh]">
               <UiTable
                 tableData={bdstTable || []}
                 headlist={htdfl.upHeadList}
-                pageSize={20}
+                pageSize={DEFAULT_LIST_SIZE}
                 total={htdflResCount}
                 headName={"시설물 목록"}
                 cellClick={(val) => {
@@ -154,11 +155,12 @@ export default function Home() {
                 index={htdfTableIndex}
                 resetPageNo={resetPageNo}
               ></UiTable>
+              </ScrollArea>
             </ListDiv>
           </div>
           <div className="col-span-2 max-h-full">
             <ListDiv>
-              <ScrollArea className="h-[65vh]">
+              <ScrollArea className="h-[75vh]">
                 <HtdflRegForm
                   htdflForm={htdflForm ?? ({} as customHtdflBdst)}
                   isModal={false}
@@ -183,9 +185,9 @@ export default function Home() {
           }}
         />
 
-        <Toaster position="top-center" />
       </ContentsDiv>
     </>
   );
 }
 
+
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/page.tsx
index 9ad16e84d..90a3d8185 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/page.tsx
@@ -15,6 +15,7 @@
  *  */
 
 "use client";
+import { DEFAULT_LIST_SIZE } from "@/src/shared/config";
 import {
   ContentsDiv,
   ScrollArea,
@@ -30,7 +31,6 @@ import { btnClass } from "@/app/store/common/code";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@common/components";
 import { useCallback, useEffect, useRef, useState } from "react";
 import ListDiv from "@common/business_components/ui/list_div";
-import { confirmToast, tableData } from "@/components/lib/func/commom";
 import type {
   customPbnst,
   fcBizType,
@@ -44,18 +44,17 @@ import {
 import { PbnstMngForm } from "@/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm";
 import { PbnstBuseForm } from "@/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm";
 import { PbnstRegModal } from "@/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal";
-import { Toaster } from "react-hot-toast";
 import { writeRgtrAndMdfr } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg";
 import { useFieldArray, useForm, type FieldErrors } from "react-hook-form"; // FieldErrors 타입 추가
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { createDefaultPbnstItem } from "./utilsZod";
 import { useTranslation } from "react-i18next";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { useAlertStore } from "@/src/shared/lib";
 export default function PublicReuseFaciltyInsert() {
   const {
     auth,
-    code,
     pbnst,
     pubHasuInit,
     pbnstInsert,
@@ -67,6 +66,7 @@ export default function PublicReuseFaciltyInsert() {
   } = useWrStore((state) => state);
 
   const { t } = useTranslation("base");
+  const { confirm } = useConfirm();
   const alert = useAlertStore((state) => state.setMessage);
   const { pubFacHeadList, pbnstHasuResCount, pbnstHasuRes, pbnstRes } = pbnst;
   const { regAuthrtYn, mdfcnAuthrtYn, laeSeCd } = auth;
@@ -80,6 +80,8 @@ export default function PublicReuseFaciltyInsert() {
   const [bdstTable, setbdstTable] = useState<pubHasuType[]>();
   const [selectRow, setSelectRow] = useState<pubHasuType>();
   const [resetPage, isResetPage] = useState(false);
+  const [selectedRowIndex, setSelectedRowIndex] = useState<number>(-1);
+  const [resetSelection, setResetSelection] = useState(false);
 
   const [pageNation, setPageNation] = useState<number>(1);
   const form = useForm<{
@@ -108,11 +110,11 @@ export default function PublicReuseFaciltyInsert() {
     useInitRef.current = true;
   }, []);
 
-  useEffect(() => {
-    if (useInitRef.current == true && laeSeCd !== undefined) {
-      pubHasuInit("1", laeSeCd); //page: string, sggOrCity: string
-    }
-  }, [useInitRef.current, laeSeCd]);
+  // useEffect(() => {
+  //     if (useInitRef.current == true && laeSeCd !== undefined) {
+  //     pubHasuInit(1, laeSeCd);
+  //   }
+  // }, [useInitRef.current, laeSeCd]);
 
   const onSubmit = async (valuse: { items: PbnstRegArrrayType }) => {
     const data = writeRgtrAndMdfr(valuse.items);
@@ -124,6 +126,13 @@ export default function PublicReuseFaciltyInsert() {
     const pbnst = data.map((fclt) => {
       return {
         pbnstRuseFcltId: fclt.pbnstRuseFcltId,
+        swtrmtFcltId: fclt.swtrmtFcltId,
+        swageTrtmfctId: fclt.swageTrtmfctId,
+        swageBscFctNm: fclt.swageBscFctNm,
+        swageRgnCd: fclt.swageRgnCd,
+        swageAdstDstrCd: fclt.swageAdstDstrCd,
+        swageRvbsnCd: fclt.swageRvbsnCd,
+        swageFctCpc: fclt.swageFctCpc,
         fcltCpct: fclt.fcltCpct,
         ruseCpct: fclt.ruseCpct,
         splyExtraCpct: fclt.splyExtraCpct,
@@ -135,30 +144,29 @@ export default function PublicReuseFaciltyInsert() {
     });
 
     const handleConfirm = async () => {
-      Promise.allSettled([
+      const [resFclt, resBiz] = await Promise.allSettled([
         pbnstRuseFcltUpdate(pbnst as customPbnst[]),
         pbnstRuseBizUpdate(bizs),
-      ]).then(([resFclt, resBiz]) => {
-        const isFcltSuccess = resFclt.status === "fulfilled";
-        const isBizSuccess = resBiz.status === "fulfilled";
-        if (isFcltSuccess && isBizSuccess) {
-          alert("하수 재이용 시설 및 사업이 수정되었습니다.");
-          // 메시지 표시, 페이지 이동 등
-        } else {
-          let message = "";
-          // ✅ 각각 어떤 항목이 실패했는지도 로그/알림 처리
-          if (!isFcltSuccess) {
-            message = "하수재이용 시설 ";
-          }
-          if (!isBizSuccess) {
-            message += "하수재이용 시설 사업 ";
-          }
-          alert(message + "오류 입니다 ");
-          pubHasuInit("1", laeSeCd);
+      ]);
+      const isFcltSuccess = resFclt.status === "fulfilled";
+      const isBizSuccess = resBiz.status === "fulfilled";
+      if (isFcltSuccess && isBizSuccess) {
+        alert("하수 재이용 시설 및 사업이 수정되었습니다.");
+      } else {
+        let message = "";
+        if (!isFcltSuccess) {
+          message = "하수재이용 시설 ";
         }
-      });
+        if (!isBizSuccess) {
+          message += "하수재이용 시설 사업 ";
+        }
+        alert(message + "오류 입니다 ");
+        pubHasuInit(1, laeSeCd);
+      }
     };
-    confirmToast(t("isUpdatetMsg"), handleConfirm);
+    if (await confirm(t("isUpdatetMsg"))) {
+      await handleConfirm();
+    }
   };
 
   // 폼 유효성 검사 실패 시 호출될 함수
@@ -230,14 +238,18 @@ export default function PublicReuseFaciltyInsert() {
   }, [items]);
 
   useEffect(() => {
-    if (code.sggCd.length && pbnstHasuRes.length > 0) {
-      setbdstTable(tableData(pbnstHasuRes, { code }));
+    if (pbnstHasuRes.length > 0) {
+      setbdstTable(pbnstHasuRes);
+    } else {
+      setbdstTable([]);
     }
-  }, [code, pbnstHasuRes]);
+  }, [pbnstHasuRes]);
 
   const cellClick = (val: number | undefined) => {
     if (val === undefined) return;
     const selectRow = pbnstHasuRes?.[val];
+    setSelectedRowIndex(val);
+    setResetSelection(false);
     setSelectRow(pbnstHasuRes?.[val]);
     if (selectRow) {
       pbnstRegClick(selectRow);
@@ -283,9 +295,13 @@ export default function PublicReuseFaciltyInsert() {
   }, [pbnstRes, append, selectRow]);
 
   useEffect(() => {
-    pubHasuInit(String(pageNation), laeSeCd);
+    if (laeSeCd === undefined) return;
+    pubHasuInit(pageNation, laeSeCd); // 해당 지자체의 하수처리시설 조회 
     isResetPage(false);
-  }, [pageNation, pubHasuInit]);
+    setSelectRow(undefined);
+    setSelectedRowIndex(-1);
+    setResetSelection(true);
+  }, [pageNation, pubHasuInit, laeSeCd]);
 
   return (
     <>
@@ -308,9 +324,9 @@ export default function PublicReuseFaciltyInsert() {
                     // size={"sm"}
                     onClick={() => {
                       if (searchTxt && searchTxt?.length > 0) {
-                        pubHasuSearch(String(pageNation), laeSeCd, searchTxt);
+                        pubHasuSearch(pageNation, laeSeCd, searchTxt);
                       } else {
-                        pubHasuInit(String(pageNation), laeSeCd);
+                        pubHasuInit(pageNation, laeSeCd);
                       }
                       isResetPage(true);
                     }}
@@ -323,9 +339,7 @@ export default function PublicReuseFaciltyInsert() {
                     onClick={() => {
                       //  pbnstMngData([] as customPbnst[]);
                       if (!selectRow) {
-                        alert(
-                          "재시용시설을 등록할 하수리시시설을 테이블에서 선택하고 등록버튼을 눌러주세요"
-                        );
+                        alert("재시용시설을 등록할 하수처리시설을 목록에서 선택하고\n 등록버튼을 눌러주세요");
                         return;
                       } else {
                         appendPbnstRuseFclt();
@@ -342,20 +356,28 @@ export default function PublicReuseFaciltyInsert() {
         </div>
 
         <div className="grid grid-cols-8 gap-4">
-          <div className="col-span-5 h-full min-h-0">
-            <ListDiv className="min-h-0">
-              {/* <ScrollArea className="h-[60vh]"> */} {/* 높이 조정 */}
+          <div className="col-span-5">
+            <ListDiv>
+              <ScrollArea className="h-[75vh]"> 
               <UiTable
                 tableData={bdstTable || []}
                 headlist={pubFacHeadList}
-                pageSize={10}
+                pageSize={DEFAULT_LIST_SIZE}
                 total={pbnstHasuResCount || 20}
                 headName={"공공 하수처리시설 목록"}
                 cellClick={cellClick}
-                onPageChange={setPageNation}
+                onPageChange={(page) => {
+                  setSelectRow(undefined);
+                  setSelectedRowIndex(-1);
+                  setResetSelection(true);
+                  setPageNation(page);
+                }}
                 resetPageNo={resetPage}
+                resetSelection={resetSelection}
+                index={selectedRowIndex}
+                curPage={pageNation}
               />
-              {/* </ScrollArea> */}
+              </ScrollArea>
             </ListDiv>
           </div>
           <ListDiv className="col-span-3 pr-6">
@@ -418,9 +440,7 @@ export default function PublicReuseFaciltyInsert() {
                     onClick={() => {
                       //  pbnstMngData([] as customPbnst[]);
                       if (!selectRow) {
-                        alert(
-                          "하수리시시설을 테이블을 선택하고 등록버튼을 눌러주세요"
-                        );
+                        alert("하수처리시설을 목록에서 선택하고\n 등록버튼을 눌러주세요");
                         return;
                       } else {
                         appendPbnstRuseFclt();
@@ -439,7 +459,16 @@ export default function PublicReuseFaciltyInsert() {
                 form={form} // form prop 전달
                 setPbnstInsert={(data) => {
                   if (data) {
-                    pbnstInsert(data); // pbnstInsert 함수 호출
+                    void (async () => {
+                      const message = await pbnstInsert(data);
+                      alert(message);
+
+                      if (searchTxt && searchTxt.trim().length > 0) {
+                        await pubHasuSearch(pageNation, laeSeCd, searchTxt);
+                      } else {
+                        await pubHasuInit(pageNation, laeSeCd);
+                      }
+                    })();
                     setIsRuseReg({ isModal: false });
                   }
                 }}
@@ -455,9 +484,9 @@ export default function PublicReuseFaciltyInsert() {
             }}
           />
         </div>
-        <Toaster position="top-center" />
       </ContentsDiv>
     </>
   );
 }
 
+
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/utilsZod.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/utilsZod.tsx
index f61697e7e..3f64e42c6 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/utilsZod.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/utilsZod.tsx
@@ -5,7 +5,13 @@ export function createDefaultPbnstItem(row: pubHasuType, index: number) {
 
   return JSON.parse(JSON.stringify({
     pbnstRuseFcltId: pk,
-    swtrmtFcltId: "",
+    swtrmtFcltId: row.bscFctCd ||"",
+    swageTrtmfctId: row.bscFctCd || "",
+    swageBscFctNm: row.bscFctNm || "",
+    swageRgnCd: row.rgnCd || "",
+    swageAdstDstrCd: row.adstDstrCd || "",
+    swageRvbsnCd: row.rvbsnCd || "",
+    swageFctCpc: Number(row.fctCpc) || 0,
     ruseUtztnFcltNm: "",
     fcltCpct: 0,
     ruseCpct: 0,
@@ -44,4 +50,4 @@ export function createDefaultPbnstItem(row: pubHasuType, index: number) {
       cycl,
       // 필요한 값 있으면 여기에 추가
     } as fcBizType;
-  }
\ No newline at end of file
+  }
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx
index ae6554b34..45fb636c6 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx
@@ -1,11 +1,11 @@
-"use client";
+"use client";
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import {
   rainRegSize,
   type customRainBdst,
 } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
-import { formatArchArea, tableData } from "@/components/lib/func/commom";
+import { formatArchArea, tableData } from "@/components/lib/func/common";
 import RainRegForm from "@/components/ui/form/fcltReg/rainReg/rainRegForm";
 import { BdstReg } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import {
@@ -20,7 +20,6 @@ import {
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button } from "@common/components";
 import { useEffect, useRef, useState } from "react";
-import { Toaster } from "react-hot-toast";
 
 
 
@@ -153,9 +152,9 @@ export default function Home() {
           </div>
         </div>
         <div className="grid grid-cols-6 gap-4">
-          <div className="col-span-4 h-full min-h-0">
-            <ListDiv className="min-h-0">
-              {/* <ScrollArea className="h-[60vh]"> */}
+          <div className="col-span-4">
+            <ListDiv>
+              <ScrollArea className="h-[75vh]">
               <UiTable
                 tableData={bdstTable || []}
                 headlist={rain.upHeadList}
@@ -169,7 +168,7 @@ export default function Home() {
                 index={rainTableIndex}
                 resetPageNo={resetPageNo}
               ></UiTable>
-              {/* </ScrollArea> */}
+              </ScrollArea>
             </ListDiv>
           </div>
           <div className="col-span-2 ">
@@ -199,9 +198,9 @@ export default function Home() {
           }}
         />
 
-        <Toaster position="top-center" />
       </ContentsDiv>
     </>
   );
 }
 
+
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx
index 1c7f38926..a4fa9b97b 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx
@@ -1,11 +1,11 @@
-"use client";
+"use client";
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import {
   rswtRegSize,
   type customRswtBdst,
 } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
-import { formatArchArea, tableData } from "@/components/lib/func/commom";
+import { formatArchArea, tableData } from "@/components/lib/func/common";
 import RswtrRegForm from "@/components/ui/form/fcltReg/rswtrReg/rswtrRegForm";
 import { BdstReg } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import {
@@ -20,7 +20,6 @@ import {
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button } from "@common/components";
 import { useEffect, useRef, useState } from "react";
-import { Toaster } from "react-hot-toast";
 
 
 /**
@@ -159,8 +158,9 @@ export default function Home() {
         </div>
 
         <div className="grid grid-cols-6 gap-4">
-          <div className="col-span-4 h-full min-h-0">
-            <ListDiv className="min-h-0">
+          <div className="col-span-4">
+            <ListDiv>
+              <ScrollArea className="h-[75vh]">
               <UiTable
                 tableData={bdstTable || []}
                 headlist={rswt.upHeadList}
@@ -172,6 +172,7 @@ export default function Home() {
                 index={rswtTableIndex}
                 resetPageNo={resetPageNo}
               ></UiTable>
+              </ScrollArea>
             </ListDiv>
           </div>
           <div className="col-span-2 max-h-full">
@@ -202,9 +203,9 @@ export default function Home() {
           }}
         />
 
-        <Toaster position="top-center" />
       </ContentsDiv>
     </>
   );
 }
 
+
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/htdflSttn/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/htdflSttn/page.tsx
index c17b7dca8..5705faabc 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/htdflSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/htdflSttn/page.tsx
@@ -1,4 +1,4 @@
-/**
+/**
  * 온배수시설 현황
  */
 "use client";
@@ -14,7 +14,7 @@ import {
   formatCommaNumber,
   getCity,
   tableData
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
 import { type SheetParameter } from "@common/business_components/ui";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import HeadChModal from "@/components/ui/modal/sttn/headChModal/headChModal";
@@ -34,20 +34,23 @@ import ListDiv from "@common/business_components/ui/list_div";
 import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
 import { Button, Label } from "@common/components/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
-import toast, { Toaster } from "react-hot-toast";
+import { useAlertStore } from "@/src/shared/lib";
 import { useTranslation } from "react-i18next";
 
+const defaultSigunOptions: SelectDataType[] = [{ text: "전체", val: "0" }];
+
 export default function HtdflSttn() {
-  const { auth, code, htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
+  const { auth, code, htdflSttn, htdflSttnSearch, initHtdfl, getLaeSeCdCheck } = useWrStore((state) => state);
   const { laeSeCd } = auth; // 지자체구분코드 
   const { htdflSttnRes, htdflSttnResCount } = htdflSttn;
   const isDownloadTriggered = useRef(false);
+  const skipNextSearchRef = useRef(true);
   const { t } = useTranslation('base');
   const [pageNation, setPageNation] = useState(1);
   const [isChHead, setIsChHead] = useState(false);
   const [resetPage, isResetPage] = useState(false);
   const [bdstTable, setBdstTable] = useState<customRainBdst[]>();
-  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>()
+  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>(defaultSigunOptions)
   const [objSearch, setObjSearch] = useState<objSearchType>({ sgg: "", city: "" });
   const [detailModal, setDetailModal] = useState<{
     isOpen: boolean;
@@ -58,22 +61,24 @@ export default function HtdflSttn() {
   //   chBuilding: chgBuilding[];
   // }>({ isOpen: false, chBuilding: [] });
   const [fcltNm, setFcltNm] = useState<string>("");
-
-  console.log("laeSeCd : ", laeSeCd);
-  useEffect(() => {
-    htdflSttnSearch(false, pageNation, htdflSttnSize, String(getConValue()), fcltNm, code.cityCd, code.sggCd);
-    isResetPage(false)
-  }, [pageNation]);
+  const alert = useAlertStore((state) => state.setMessage);
+  const isAllAreaUser = laeSeCd === "0";
+  const isLaeSeCdReady =
+    laeSeCd === "0" || laeSeCd.length === 2 || laeSeCd.length === 5;
+  const fixedSidoValue =
+    !isAllAreaUser && laeSeCd?.length ? laeSeCd.slice(0, 2) : "";
+  const fixedSigunValue =
+    !isAllAreaUser && laeSeCd?.length === 5 ? laeSeCd : "0";
 
   const getSelCity = (val: string | number) => {
     const cityValue = String(val);
 
     if (cityValue === "0") {
-      setSelectSgg([]);
+      setSelectSgg(defaultSigunOptions);
       setObjSearch({ city: cityValue, sgg: "" });
     } else {
       const data = getCity(cityValue, code.sggCd);
-      setSelectSgg(data);
+      setSelectSgg(data.length > 0 ? data : defaultSigunOptions);
 
       const firstSggVal = data.find(item => item.val === "0")?.val || (data[0]?.val ?? "");
       setObjSearch({ city: cityValue, sgg: firstSggVal });
@@ -84,16 +89,24 @@ export default function HtdflSttn() {
     setObjSearch({ ...objSearch, sgg: String(val) })
   };
 
-  const getConValue = () => {
+  const getConValue = (): string => {
     if (!objSearch.city || objSearch.city === "0") {
       return "0";
     }
     if (objSearch.sgg && objSearch.sgg !== "0") {
-      return objSearch.sgg;
+      return String(objSearch.sgg);
     }
-    return objSearch.city;
+    return String(objSearch.city);
   };
 
+  const getFixedConValue = useCallback((): string => {
+    if (laeSeCd === undefined || laeSeCd === "0") {
+      return getConValue();
+    }
+
+    return laeSeCd.length === 5 ? laeSeCd : laeSeCd.slice(0, 2);
+  }, [laeSeCd, objSearch]);
+
   const cellClick = (index: number | undefined, headId: string) => {
     if (
       headId !== "chBuildingYn" &&
@@ -105,9 +118,37 @@ export default function HtdflSttn() {
   };
 
   const excelClick = useCallback(() => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
     isDownloadTriggered.current = true;
-    htdflSttnSearch(true, 1, htdflSttnResCount, String(getConValue()), fcltNm, code.cityCd, code.sggCd);
-  }, [htdflSttnSearch, objSearch, code.cityCd, code.sggCd, fcltNm, htdflSttnResCount]);
+    htdflSttnSearch(true, 1, htdflSttnResCount, String(getFixedConValue()), fcltNm, code.cityCd, code.sggCd);
+  }, [htdflSttnSearch, fcltNm, htdflSttnResCount, code.cityCd, code.sggCd, getFixedConValue, isLaeSeCdReady]);
+
+  useEffect(() => {
+    getLaeSeCdCheck();
+  }, [getLaeSeCdCheck]);
+
+  useEffect(() => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    if (laeSeCd === "0") {
+      setSelectSgg(defaultSigunOptions);
+      setObjSearch({ city: "0", sgg: "" });
+      return;
+    }
+
+    const cityValue = laeSeCd.slice(0, 2);
+    const sigunOptions = getCity(cityValue, code.sggCd);
+    setSelectSgg(sigunOptions.length > 0 ? sigunOptions : defaultSigunOptions);
+    setObjSearch({
+      city: cityValue,
+      sgg: laeSeCd.length === 5 ? laeSeCd : "0",
+    });
+  }, [laeSeCd, code.sggCd, isLaeSeCdReady]);
 
   useEffect(() => {
     if (!isDownloadTriggered.current) {
@@ -128,16 +169,33 @@ export default function HtdflSttn() {
         sheetArray
       );
     } else {
-      toast.error(t('excelDownErrMsg'));
+      alert(t('excelDownErrMsg'));
     }
     isDownloadTriggered.current = false;
   }, [htdflSttn.excelList, code]);
 
   useEffect(() => {
-    if (!htdflSttn.isInit) {
-      initHtdfl(false, 1, htdflSttnSize, "0", fcltNm, code.cityCd, code.sggCd);
+    if (!isLaeSeCdReady || htdflSttn.isInit) {
+      return;
     }
-  }, [htdflSttn.isInit, initHtdfl]);
+
+    skipNextSearchRef.current = true;
+    initHtdfl(false, 1, htdflSttnSize, String(getFixedConValue()), fcltNm, code.cityCd, code.sggCd);
+  }, [htdflSttn.isInit, initHtdfl, fcltNm, code.cityCd, code.sggCd, getFixedConValue, isLaeSeCdReady]);
+
+  useEffect(() => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    if (skipNextSearchRef.current) {
+      skipNextSearchRef.current = false;
+      return;
+    }
+
+    htdflSttnSearch(false, pageNation, htdflSttnSize, String(getFixedConValue()), fcltNm, code.cityCd, code.sggCd);
+    isResetPage(false)
+  }, [pageNation, htdflSttnSearch, fcltNm, code.cityCd, code.sggCd, getFixedConValue, isLaeSeCdReady]);
 
   useEffect(() => {
     const data = tableData(htdflSttnRes, { code });
@@ -170,18 +228,27 @@ export default function HtdflSttn() {
                     className="col-span-2 w-1/6 h-full text-2xl"
                     label="시도"
                     selectClass={""}
-                    selectArray={code.cityCd}
+                    selectArray={
+                      !isAllAreaUser && fixedSidoValue
+                        ? code.cityCd.filter((item) => item.val === fixedSidoValue)
+                        : code.cityCd
+                    }
+                    value={objSearch.city || "0"}
                     onSelectValue={getSelCity}
                   />
                   <SelectBox
                     className="col-span-2 w-1/6 h-full text-2xl ml-4"
                     label="시군구"
                     selectClass={""}
-                    selectArray={selectSgg || []}
-                    value={objSearch.sgg} // value props 추가
+                    selectArray={
+                      !isAllAreaUser && laeSeCd?.length === 5
+                        ? (selectSgg || defaultSigunOptions).filter((item) => item.val === "0" || item.val === fixedSigunValue)
+                        : selectSgg || defaultSigunOptions
+                    }
+                    value={objSearch.sgg || "0"}
                     onSelectValue={getSgg}
                   />
-                  <div className="col-span-2 flex flex-row space-x-2 ml-3 mt-2">
+                  <div className="col-span-2 flex flex-row space-x-2 ml-3">
                     <Label className="w-28 mt-2 text-xl">
                       {"시설명"}
                     </Label>
@@ -200,7 +267,10 @@ export default function HtdflSttn() {
                   <Button
                     className={btnClass}
                     onClick={() => {
-                      htdflSttnSearch(false, 1,htdflSttnSize, String(getConValue()), fcltNm, code.cityCd, code.sggCd);
+                      if (!isLaeSeCdReady) {
+                        return;
+                      }
+                      htdflSttnSearch(false, 1,htdflSttnSize, String(getFixedConValue()), fcltNm, code.cityCd, code.sggCd);
                       isResetPage(true)
                     }}
                   >
@@ -241,6 +311,7 @@ export default function HtdflSttn() {
                     }}
                     onPageChange={setPageNation}
                     resetPageNo={resetPage}
+                    widthFixed={true}
                   >
                     <HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />
                   </UiTable>
@@ -275,7 +346,7 @@ export default function HtdflSttn() {
           body={<SttnDetailModal type={"HTB"} formObj={detailModal.data} />}
         />
       </ContentsDiv>
-      <Toaster position="top-center" />
     </>
   );
 }
+
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx
index ecedeb426..d9ca92126 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx
@@ -1,4 +1,4 @@
-/**
+/**
  *  하수재이용 시설 현황
  * 재이용시설 현황 - 하수재이용시설 현황
  * - layout.tsx에 의해 공통 레이아웃이 적용됨
@@ -10,10 +10,10 @@
 "use client";
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
-import { prfRegPageSize } from "@/app/store/prfmncReg/pbnstPrfmncReg";
+import { DEFAULT_LIST_SIZE } from "@/src/shared/config";
 import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
 import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
-import { excelDownloadNumStyle, yearOptions } from "@/components/lib/func/commom";
+import { excelDownloadNumStyle, yearOptions } from "@/components/lib/func/common";
 import { type SheetParameter } from "@common/business_components/ui";
 import HeadChModal from "@/components/ui/modal/sttn/headChModal/headChModal";
 import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
@@ -30,24 +30,24 @@ import ListDiv from "@common/business_components/ui/list_div";
 import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
 import { Button, Label } from "@common/components/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
-import toast, { Toaster } from "react-hot-toast";
+import { useAlertStore } from "@/src/shared/lib";
 import { useTranslation } from "react-i18next";
 
 
 export default function PbnstSttn() {
   const {
+    auth,
     code,
     pbnstSttn,
-    pbnstSttnSearch,
-    pbnSttnInit,
+    pbnstSttnList,
     getPbnStnDetail,
-    getFlcts,
     resetPbnstDetail,
+    getLaeSeCdCheck,
   } = useWrStore((state) => state);
 
-  const { pbnstSttnRes, fclts, pbnstSttnResCount } = pbnstSttn;
+  const { pbnstSttnRes, pbnstSttnResCount } = pbnstSttn;
+  const { laeSeCd } = auth; // 지자체구분코드
 
-  const [isReset, setIsReset] = useState(false);
   const ref = useRef<ReturnType>({} as ReturnType);
   const [searchYear, setSearchYear] = useState<string>(
     String(new Date().getFullYear())
@@ -59,20 +59,64 @@ export default function PbnstSttn() {
     data: customPbnst;
   }>({ isModal: false, data: {} as customPbnst });
   const isDownloadTriggered = useRef(false);
+  const useInitRef = useRef(false);
   const [pbnRuseNm, setPbnRuseNm] = useState<string>("");
   const { t } = useTranslation("base");
+  const alert = useAlertStore((state) => state.setMessage);
+  const isAllAreaUser = laeSeCd?.length != 5; // 모든 지자체 권한이 있는 경우
+  const fixedSidoValue =
+    !isAllAreaUser && laeSeCd?.length ? laeSeCd.slice(0, 2) : "";
+  const fixedSigunValue =
+    !isAllAreaUser && laeSeCd?.length === 5 ? laeSeCd : "0";
+  const getFixedSearchValue = useCallback(
+    (baseValue: ReturnType): ReturnType => {
+      const cleanedValue = { ...baseValue };
+
+      // 유역(R) 탭 선택 시, 이전 행정구역 탭에서 선택된 시군구 값이 남아있어
+      // 검색 결과가 시군구로 필터링되는 현상을 방지하기 위해 sigunValue를 '0'으로 초기화합니다.
+      // if (cleanedValue.partValue === "R"|| cleanedValue.partValue === "G") {
+      if (cleanedValue.partValue === "R") {
+        cleanedValue.sigunValue = "0";
+        cleanedValue.sigunText = "";
+      }
+
+      if (isAllAreaUser) {
+        // console.log("isAllAreaUser is true");
+        return cleanedValue;
+      }
+
+      const fixedSidoText =
+        code.cityCd.find((item) => item.val === fixedSidoValue)?.text ?? "";
+      const fixedSigunText =
+        fixedSigunValue !== "0"
+          ? code.sggCd.find((item) => item.val === fixedSigunValue)?.text ?? ""
+          : "";
+
+      return {
+        ...cleanedValue,
+        partValue: "A",
+        sidoValue: fixedSidoValue,
+        sigunValue: fixedSigunValue,
+        sidoText: fixedSidoText,
+        sigunText: fixedSigunText,
+      };
+    },
+    [isAllAreaUser, fixedSidoValue, fixedSigunValue, code.cityCd, code.sggCd]
+  );
+
   const excelClick = useCallback(() => {
     isDownloadTriggered.current = true;
-    pbnstSttnSearch(
+    const fixedSearchValue = getFixedSearchValue(ref.current);
+    pbnstSttnList(
       true,
       String(1),
       "100000",
-      ref.current,
+      fixedSearchValue,
       pbnRuseNm,
       searchYear,
-      fclts
+      []
     );
-  }, [pbnstSttnSearch, fclts, pbnRuseNm]);
+  }, [pbnstSttnList, pbnRuseNm, searchYear, getFixedSearchValue]);
 
   const cellCLick = useCallback(
     (index: number | undefined) => {
@@ -83,14 +127,36 @@ export default function PbnstSttn() {
     },
     [getPbnStnDetail, pbnstSttnRes]
   );
+
   useEffect(() => {
-    if (!pbnstSttn.isInit) {
-      getFlcts();
+    getLaeSeCdCheck();
+    useInitRef.current = true;
+  }, []);
+
+  useEffect(() => {
+    if (
+      useInitRef.current === true &&
+      laeSeCd !== undefined &&
+      !pbnstSttn.isTableLoaded
+    ) {
+      pbnstSttnList(
+        false,
+        "1",
+        String(DEFAULT_LIST_SIZE),
+        getFixedSearchValue(ref.current),
+        pbnRuseNm,
+        searchYear,
+        []
+      );
     }
-  }, [pbnstSttn.isInit]);
-  useEffect(() => {
-    pbnSttnInit("1", "15", ref.current, searchYear, fclts);
-  }, [fclts]);
+  }, [
+    laeSeCd,
+    pbnstSttn.isTableLoaded,
+    pbnRuseNm,
+    searchYear,
+    pbnstSttnList,
+    getFixedSearchValue,
+  ]);
 
   useEffect(() => {
     if (pbnstSttnRes && pbnstSttnRes.length > 0) {
@@ -119,7 +185,7 @@ export default function PbnstSttn() {
         sheetArray
       );
     } else {
-      toast.error(t("excelDownErrMsg"));
+      alert(t("excelDownErrMsg"));
     }
     isDownloadTriggered.current = false;
   }, [pbnstSttn.excelList]);
@@ -138,8 +204,16 @@ export default function PbnstSttn() {
         <div className="grid grid-cols-2 gap-4 ">
           <div className="col-span-2">
             <SearchBaseForm
-              selectSidoData={code.cityCd}
-              selectSigunData={code.sggCd}
+              selectSidoData={
+                !isAllAreaUser && fixedSidoValue
+                  ? code.cityCd.filter((item) => item.val === fixedSidoValue)
+                  : code.cityCd
+              }
+              selectSigunData={
+                laeSeCd?.length === 5
+                  ? code.sggCd.filter((item) => item.val === laeSeCd)
+                  : code.sggCd
+              }
               selectRegionData={code.rvbsnCd}
               selectUnitWaterShedData={code.lgbsnCd}
               selectMiddleRegionData={code.mdmbsnCd}
@@ -170,7 +244,7 @@ export default function PbnstSttn() {
                       setSearchYear(String(val))
                     }
                   />
-                  <Label className="w-full mt-2 ml-4 text-xl text-gray-600">
+                  <Label className="w-full ml-4 text-xl text-gray-600">
                     {"하수처리시설명"}
                   </Label>
                   <SearchInput
@@ -184,10 +258,16 @@ export default function PbnstSttn() {
                 </div>
               }
               queryClick={() => {
-                // pbnSearch(returnType);
-
-                //setTableIndex(0)
-                setIsReset(true);
+                const fixedSearchValue = getFixedSearchValue(ref.current);
+                pbnstSttnList(
+                  false,
+                  "1",
+                  String(DEFAULT_LIST_SIZE),
+                  fixedSearchValue,
+                  pbnRuseNm,
+                  searchYear,
+                  []
+                );
               }}
               excelClick={excelClick}
               initClick={function (): void {
@@ -195,38 +275,40 @@ export default function PbnstSttn() {
               }}
               btnClass={btnClass}
               ref={ref}
-              isAdmin={false}
+              isAdmin={!isAllAreaUser}
+              initSidoValue={fixedSidoValue}
+              initSigunValue={fixedSigunValue !== "0" ? fixedSigunValue : "0"}
             />
           </div>
         </div>
         <div className="grid grid-cols-6 gap-4 ">
           <div className="col-span-6">
             <ListDiv>
-              <div className="h-full w-full overflow-x-scroll min-[1900px]:overflow-x-hidden">
-                <div className="w-[160%] min-[1900px]:w-[100%]">
-                  <UiTable
-                    headName={undefined}
-                    tableData={bdstTable || []}
-                    headlist={pbnstSttn.pbnstSttHeadList}
-                    pageSize={15}
-                    total={pbnstSttnResCount}
-                    cellClick={(index: number | undefined) => {
-                      cellCLick(index);
-                    }}
-                    onPageChange={(page: number) => {
-                      pbnstSttnSearch(
-                        false,
-                        String(page),
-                        String(prfRegPageSize),
-                        ref.current,
-                        pbnRuseNm,
-                        searchYear,
-                        fclts
-                      );
-                      setIsReset(false);
-                    }}
-                    resetPageNo={isReset}
-                  >
+              <div className="h-full w-full overflow-x-scroll min-[2100px]:overflow-x-hidden">
+                <div className="w-[160%] min-[2100px]:w-[100%]">
+                    <UiTable
+                      headName={undefined}
+                      tableData={bdstTable || []}
+                      headlist={pbnstSttn.pbnstSttHeadList}
+                      pageSize={DEFAULT_LIST_SIZE}
+                      total={pbnstSttnResCount}
+                      cellClick={(index: number | undefined) => {
+                        cellCLick(index);
+                      }}
+                      onPageChange={(page: number) => {
+                        const fixedSearchValue = getFixedSearchValue(ref.current);
+                        pbnstSttnList(
+                          false,
+                          String(page),
+                          String(DEFAULT_LIST_SIZE),
+                          fixedSearchValue,
+                          pbnRuseNm,
+                          searchYear,
+                          []
+                        );
+                      }}
+                      widthFixed={true}
+                    >
                     <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />
                   </UiTable>
                 </div>
@@ -269,7 +351,6 @@ export default function PbnstSttn() {
           }}
         />
       </ContentsDiv>
-      <Toaster position="top-center" />
     </>
   );
 }
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/rainSttn/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/rainSttn/page.tsx
index 750491f8d..3d87dbbbf 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/rainSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/rainSttn/page.tsx
@@ -1,4 +1,4 @@
-/**
+/**
  * 빗물이용시설 현황
  */
 "use client";
@@ -12,7 +12,7 @@ import {
   excelDownloadNumStyle,
   getCity,
   tableData,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
 import { type SheetParameter } from "@common/business_components/ui";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import HeadChModal from "@/components/ui/modal/sttn/headChModal/headChModal";
@@ -32,21 +32,24 @@ import ListDiv from "@common/business_components/ui/list_div";
 import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
 import { Button, Label } from "@common/components/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
-import toast, { Toaster } from "react-hot-toast";
+import { useAlertStore } from "@/src/shared/lib";
 import { useTranslation } from "react-i18next";
 
+const defaultSigunOptions: SelectDataType[] = [{ text: "전체", val: "0" }];
+
 export default function RainSttn() {
-  const { code, rainSttn, rainSttnSearch, rainSttnInit } = useWrStore(
+  const { auth, code, rainSttn, rainSttnSearch, rainSttnInit, getLaeSeCdCheck } = useWrStore(
     (state) => state
   );
   const { rainSttnRes, rainSttnResCount } = rainSttn;
+  const { laeSeCd } = auth;
 
   const [pageNation, setPageNation] = useState(1);
   const [isChHead, setIsChHead] = useState(false);
   const [bdstTable, setBdstTable] = useState<customRainBdst[]>();
-  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
+  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>(defaultSigunOptions);
   const [resetPage, isResetPage] = useState(false);
-  const isDownloadTriggered = useRef(false);
+  const [isDownloadTriggered, setIsDownloadTriggered] = useState(false);
   const [objSearch, setObjSearch] = useState<objSearchType>({
     sgg: "",
     city: "",
@@ -57,7 +60,21 @@ export default function RainSttn() {
   }>({ data: undefined, isOpen: false });
 
   const [fcltNm, setFcltNm] = useState<string>("");
+  const [appliedSearch, setAppliedSearch] = useState({
+    conValue: "0",
+    fcltNm: "",
+  });
+  const [searchTrigger, setSearchTrigger] = useState(0);
   const { t } = useTranslation("base");
+  const alert = useAlertStore((state) => state.setMessage);
+  const skipNextSearchRef = useRef(true);
+  const isAllAreaUser = laeSeCd === "0";
+  const isLaeSeCdReady =
+    laeSeCd === "0" || laeSeCd.length === 2 || laeSeCd.length === 5;
+  const fixedSidoValue =
+    !isAllAreaUser && laeSeCd?.length ? laeSeCd.slice(0, 2) : "";
+  const fixedSigunValue =
+    !isAllAreaUser && laeSeCd?.length === 5 ? laeSeCd : "0";
 
   const cellClick = (index: number | undefined) => {
     if (index !== undefined && bdstTable !== undefined) {
@@ -68,11 +85,11 @@ export default function RainSttn() {
   const getSelCity = (val: string | number) => {
     const cityValue = String(val);
     if (cityValue === "0") {
-      setSelectSgg([]);
+      setSelectSgg(defaultSigunOptions);
       setObjSearch({ city: cityValue, sgg: "" });
     } else {
       const data = getCity(cityValue, code.sggCd);
-      setSelectSgg(data);
+      setSelectSgg(data.length > 0 ? data : defaultSigunOptions);
       const firstSggVal =
         data.find((item) => item.val === "0")?.val || (data[0]?.val ?? "");
       setObjSearch({ city: cityValue, sgg: firstSggVal });
@@ -83,21 +100,170 @@ export default function RainSttn() {
     setObjSearch({ ...objSearch, sgg: String(val) });
   };
 
-  const getConValue = () => {
+  const getConValue = (): string => {
     if (!objSearch.city || objSearch.city === "0") {
       return "0";
     }
     if (objSearch.sgg && objSearch.sgg !== "0") {
-      return objSearch.sgg;
+      return String(objSearch.sgg);
     }
-    return objSearch.city;
+    return String(objSearch.city);
   };
 
-  useEffect(() => {
-    if (!rainSttn.isInit) {
-      rainSttnInit(false, 1, rainSttnSize, "0", fcltNm, code as unknown as Record<string, SelectDataType[]>);
+  const getFixedConValue = useCallback((): string => {
+    if (laeSeCd === undefined || laeSeCd === "0") {
+      return getConValue();
     }
-  }, [rainSttn.isInit, rainSttnInit]);
+
+    return laeSeCd.length === 5 ? laeSeCd : laeSeCd.slice(0, 2);
+  }, [laeSeCd, objSearch]);
+
+  useEffect(() => {
+    getLaeSeCdCheck();
+  }, [getLaeSeCdCheck]);
+
+  useEffect(() => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    if (laeSeCd === "0") {
+      setSelectSgg(defaultSigunOptions);
+      setObjSearch({ city: "0", sgg: "" });
+      return;
+    }
+
+    const cityValue = laeSeCd.slice(0, 2);
+    const sigunOptions = getCity(cityValue, code.sggCd);
+    setSelectSgg(sigunOptions.length > 0 ? sigunOptions : defaultSigunOptions);
+    setObjSearch({
+      city: cityValue,
+      sgg: laeSeCd.length === 5 ? laeSeCd : "0",
+    });
+  }, [laeSeCd, code.sggCd, isLaeSeCdReady]);
+
+  useEffect(() => {
+    if (!isLaeSeCdReady || rainSttn.isInit) {
+      return;
+    }
+
+    const initialConValue =
+      laeSeCd === undefined || laeSeCd === "0"
+        ? "0"
+        : laeSeCd.length === 5
+          ? laeSeCd
+          : laeSeCd.slice(0, 2);
+
+    skipNextSearchRef.current = true;
+    setAppliedSearch({
+      conValue: initialConValue,
+      fcltNm: "",
+    });
+    rainSttnInit(
+      false,
+      1,
+      rainSttnSize,
+      initialConValue,
+      "",
+      code as unknown as Record<string, SelectDataType[]>
+    );
+  }, [rainSttn.isInit, rainSttnInit, code, isLaeSeCdReady, laeSeCd]);
+
+  useEffect(() => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    if (skipNextSearchRef.current) {
+      skipNextSearchRef.current = false;
+      return;
+    }
+
+    if (searchTrigger === 0) {
+      return;
+    }
+
+    rainSttnSearch(
+      false,
+      pageNation,
+      rainSttnSize,
+      appliedSearch.conValue,
+      appliedSearch.fcltNm,
+      code as unknown as Record<string, SelectDataType[]>
+    );
+    isResetPage(false);
+  }, [
+    pageNation,
+    searchTrigger,
+    rainSttnSearch,
+    code,
+    appliedSearch.conValue,
+    appliedSearch.fcltNm,
+    isLaeSeCdReady,
+  ]);
+
+  useEffect(() => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    if (!isDownloadTriggered) {
+      return;
+    }
+    if (rainSttn.excelList.length > 0) {
+      const sheetArray: SheetParameter[] = [{
+        data: rainSttn.excelList,
+        headerNum: 3,
+        headerRange: "A1:W3",
+        sheetName: 'sheet1',
+        startCol: 'A',
+        decimalArray0: [6,10,12,14,16] // 0부터 시작
+      }];
+      excelDownloadNumStyle(
+        "빗물이용시설 현황",
+        "sample_rainSttn.xlsx", // public 폴더에 있는 template 파일 경로
+        sheetArray
+      );
+    } else {
+      alert(t("excelDownErrMsg"));
+    }
+    setIsDownloadTriggered(false);
+  }, [rainSttn.excelList, isDownloadTriggered, alert, t, isLaeSeCdReady]);
+
+  const excelClick = useCallback(() => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    setIsDownloadTriggered(true);
+    rainSttnSearch(
+      true,
+      1,
+      rainSttnResCount,
+      appliedSearch.conValue,
+      appliedSearch.fcltNm,
+      code as unknown as Record<string, SelectDataType[]>
+    );
+  }, [
+    rainSttnSearch,
+    rainSttnResCount,
+    code,
+    appliedSearch.conValue,
+    appliedSearch.fcltNm,
+    isLaeSeCdReady,
+  ]);
+
+  const handleSearch = useCallback(() => {
+    const nextSearch = {
+      conValue: String(getFixedConValue()),
+      fcltNm,
+    };
+
+    setAppliedSearch(nextSearch);
+    isResetPage(true);
+    setPageNation(1);
+    setSearchTrigger((prev) => prev + 1);
+  }, [fcltNm, getFixedConValue]);
 
   useEffect(() => {
     const data = tableData(rainSttnRes, { code });
@@ -142,60 +308,6 @@ export default function RainSttn() {
     setBdstTable(chData);
   }, [code, rainSttnRes]);
 
-  useEffect(() => {
-    rainSttnSearch(
-      false,
-      pageNation,
-      rainSttnSize,
-      String(getConValue()),
-      fcltNm,
-      code as unknown as Record<string, SelectDataType[]>
-    );
-    isResetPage(false);
-  }, [pageNation]);
-
-  useEffect(() => {
-    if (!isDownloadTriggered.current) {
-      return;
-    }
-    if (rainSttn.excelList.length > 0) {
-      const sheetArray: SheetParameter[] = [{
-        data: rainSttn.excelList,
-        headerNum: 3,
-        headerRange: "A1:W3",
-        sheetName: 'sheet1',
-        startCol: 'A',
-        decimalArray0: [6,10,12,14,16] // 0부터 시작
-      }];
-      excelDownloadNumStyle(
-        "빗물이용시설 현황",
-        "sample_rainSttn.xlsx", // public 폴더에 있는 template 파일 경로
-        sheetArray
-      );
-    } else {
-      toast.error(t("excelDownErrMsg"));
-    }
-    isDownloadTriggered.current = false;
-  }, [rainSttn.excelList]);
-
-  const excelClick = useCallback(() => {
-    isDownloadTriggered.current = true;
-    rainSttnSearch(
-      true,
-      1,
-      rainSttnResCount,
-      String(getConValue()),
-      fcltNm,
-      code as unknown as Record<string, SelectDataType[]>
-    );
-  }, [
-    rainSttnSearch,
-    objSearch,
-    code.cityCd,
-    code.sggCd,
-    fcltNm,
-    rainSttnResCount,
-  ]);
 
   return (
     <>
@@ -209,18 +321,27 @@ export default function RainSttn() {
                     className="col-span-2 w-1/6 h-full text-2xl"
                     label="시도"
                     selectClass={""}
-                    selectArray={code.cityCd}
+                    selectArray={
+                      !isAllAreaUser && fixedSidoValue
+                        ? code.cityCd.filter((item) => item.val === fixedSidoValue)
+                        : code.cityCd
+                    }
+                    value={objSearch.city || "0"}
                     onSelectValue={getSelCity}
                   />
                   <SelectBox
                     className="col-span-2 w-1/6 h-full text-2xl ml-4"
                     label="시군구"
                     selectClass={""}
-                    selectArray={selectSgg || []}
-                    value={objSearch.sgg} // value props 추가
+                    selectArray={
+                      !isAllAreaUser && laeSeCd?.length === 5
+                        ? (selectSgg || defaultSigunOptions).filter((item) => item.val === "0" || item.val === fixedSigunValue)
+                        : selectSgg || defaultSigunOptions
+                    }
+                    value={objSearch.sgg || "0"}
                     onSelectValue={getSgg}
                   />
-                  <div className="col-span-2 flex flex-row space-x-2 ml-3 mt-2">
+                  <div className="col-span-2 flex flex-row space-x-2 ml-3">
                     <Label className="w-28 mt-2 text-xl">
                       {"시설명"}
                     </Label>
@@ -237,17 +358,7 @@ export default function RainSttn() {
                 <div className="flex flex-row space-x-2 items-center">
                   <Button
                     className={btnClass}
-                    onClick={() => {
-                      rainSttnSearch(
-                        false,
-                        1,
-                         rainSttnSize,
-                        String(getConValue()),
-                        fcltNm,
-                        code as unknown as Record<string, SelectDataType[]>
-                      );
-                      isResetPage(true);
-                    }}
+                    onClick={handleSearch}
                   >
                     조회
                   </Button>
@@ -286,6 +397,7 @@ export default function RainSttn() {
                     }}
                     onPageChange={setPageNation}
                     resetPageNo={resetPage}
+                    widthFixed={true}
                   >
                     <HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />
                   </UiTable>
@@ -318,7 +430,7 @@ export default function RainSttn() {
           body={<SttnDetailModal type={"RNB"} formObj={detailModal.data} />}
         />
       </ContentsDiv>
-      <Toaster position="top-center" />
     </>
   );
 }
+
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/rswtSttn/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/rswtSttn/page.tsx
index 0392c8f3f..4e76336c5 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/rswtSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/rswtSttn/page.tsx
@@ -1,4 +1,4 @@
-/**
+/**
  * 중수도시설 현황
  */
 "use client";
@@ -12,7 +12,7 @@ import {
   formatCommaNumber,
   getCity,
   tableData
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
 import { type SheetParameter } from "@common/business_components/ui";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import HeadChModal from "@/components/ui/modal/sttn/headChModal/headChModal";
@@ -32,26 +32,43 @@ import ListDiv from "@common/business_components/ui/list_div";
 import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
 import { Button, Label } from "@common/components/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
-import toast, { Toaster } from "react-hot-toast";
+import { useAlertStore } from "@/src/shared/lib";
 import { useTranslation } from "react-i18next";
 
+const defaultSigunOptions: SelectDataType[] = [{ text: "전체", val: "0" }];
+
 export default function RswtSttn() {
-  const { code, rswtSttn, rswtSttnSearch, rswtSttnInit } = useWrStore(
+  const { auth, code, rswtSttn, rswtSttnSearch, rswtSttnInit, getLaeSeCdCheck } = useWrStore(
     (state) => state
   );
 
   const [pageNation, setPageNation] = useState(1);
 
   const { rswtSttnRes, rswtSttnResCount } = rswtSttn;
+  const { laeSeCd } = auth;
   const [isChHead, setIsChHead] = useState(false);
   const [resetPage, isResetPage] = useState(false);
   const [bdstTable, setBdstTable] = useState<customRswtBdst[]>();
   const isDownloadTriggered = useRef(false);
-  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>()
+  const skipNextSearchRef = useRef(true);
+  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>(defaultSigunOptions)
   const [objSearch, setObjSearch] = useState<objSearchType>({ sgg: "", city: "" });
   const [detailModal, setDetailModal] = useState<{ isOpen: boolean, data: customRswtBdst | undefined }>({ data: undefined, isOpen: false })
   const [fcltNm, setFcltNm] = useState<string>("");
+  const [appliedSearch, setAppliedSearch] = useState({
+    conValue: "0",
+    fcltNm: "",
+  });
+  const [searchTrigger, setSearchTrigger] = useState(0);
   const { t } = useTranslation('base');
+  const alert = useAlertStore((state) => state.setMessage);
+  const isAllAreaUser = laeSeCd === "0";
+  const isLaeSeCdReady =
+    laeSeCd === "0" || laeSeCd.length === 2 || laeSeCd.length === 5;
+  const fixedSidoValue =
+    !isAllAreaUser && laeSeCd?.length ? laeSeCd.slice(0, 2) : "";
+  const fixedSigunValue =
+    !isAllAreaUser && laeSeCd?.length === 5 ? laeSeCd : "0";
   const cellClick = (index: number | undefined) => {
 
     if ( index !== undefined && bdstTable !== undefined) {
@@ -63,11 +80,11 @@ export default function RswtSttn() {
     const cityValue = String(val);
 
     if (cityValue === "0") {
-      setSelectSgg([]);
+      setSelectSgg(defaultSigunOptions);
       setObjSearch({ city: cityValue, sgg: "" });
     } else {
       const data = getCity(cityValue, code.sggCd);
-      setSelectSgg(data);
+      setSelectSgg(data.length > 0 ? data : defaultSigunOptions);
 
       const firstSggVal = data.find(item => item.val === "0")?.val || (data[0]?.val ?? "");
       setObjSearch({ city: cityValue, sgg: firstSggVal });
@@ -78,21 +95,74 @@ export default function RswtSttn() {
     setObjSearch({ ...objSearch, sgg: String(val) })
   };
 
-  const getConValue = () => {
+  const getConValue = (): string => {
     if (!objSearch.city || objSearch.city === "0") {
       return "0";
     }
     if (objSearch.sgg && objSearch.sgg !== "0") {
-      return objSearch.sgg;
+      return String(objSearch.sgg);
     }
-    return objSearch.city;
+    return String(objSearch.city);
   };
 
-  useEffect(() => {
-    if (!rswtSttn.isInit&&code) {
-      rswtSttnInit(false, 1, rswtSttnSize, code.userSiSggCd, fcltNm, code as unknown as Record<string, SelectDataType[]>);
+  const getFixedConValue = useCallback((): string => {
+    if (laeSeCd === undefined || laeSeCd === "0") {
+      return getConValue();
     }
-  }, [rswtSttn.isInit, rswtSttnInit]);
+
+    return laeSeCd.length === 5 ? laeSeCd : laeSeCd.slice(0, 2);
+  }, [laeSeCd, objSearch]);
+
+  useEffect(() => {
+    getLaeSeCdCheck();
+  }, [getLaeSeCdCheck]);
+
+  useEffect(() => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    if (laeSeCd === "0") {
+      setSelectSgg(defaultSigunOptions);
+      setObjSearch({ city: "0", sgg: "" });
+      return;
+    }
+
+    const cityValue = laeSeCd.slice(0, 2);
+    const sigunOptions = getCity(cityValue, code.sggCd);
+    setSelectSgg(sigunOptions.length > 0 ? sigunOptions : defaultSigunOptions);
+    setObjSearch({
+      city: cityValue,
+      sgg: laeSeCd.length === 5 ? laeSeCd : "0",
+    });
+  }, [laeSeCd, code.sggCd, isLaeSeCdReady]);
+
+  useEffect(() => {
+    if (!isLaeSeCdReady || rswtSttn.isInit) {
+      return;
+    }
+
+    const initialConValue =
+      laeSeCd === undefined || laeSeCd === "0"
+        ? "0"
+        : laeSeCd.length === 5
+          ? laeSeCd
+          : laeSeCd.slice(0, 2);
+
+    skipNextSearchRef.current = true;
+    setAppliedSearch({
+      conValue: initialConValue,
+      fcltNm: "",
+    });
+    rswtSttnInit(
+      false,
+      1,
+      rswtSttnSize,
+      initialConValue,
+      "",
+      code as unknown as Record<string, SelectDataType[]>
+    );
+  }, [rswtSttn.isInit, rswtSttnInit, code, isLaeSeCdReady, laeSeCd]);
 
   useEffect(() => {
     const data = tableData(rswtSttnRes, { code });
@@ -143,20 +213,53 @@ export default function RswtSttn() {
         sheetArray
       );
     } else {
-      toast.error(t('excelDownErrMsg'));
+      alert(t('excelDownErrMsg'));
     }
     isDownloadTriggered.current = false;
   }, [rswtSttn.excelList]);
 
   const excelClick = useCallback(() => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
     isDownloadTriggered.current = true;
-    rswtSttnSearch(true, 1, rswtSttnResCount, String(getConValue()), fcltNm, code as unknown as Record<string, SelectDataType[]>);
-  }, [rswtSttnSearch, objSearch, code.cityCd, code.sggCd, fcltNm, rswtSttnResCount]);
+    rswtSttnSearch(true, 1, rswtSttnResCount, appliedSearch.conValue, appliedSearch.fcltNm, code as unknown as Record<string, SelectDataType[]>);
+  }, [rswtSttnSearch, rswtSttnResCount, code, appliedSearch.conValue, appliedSearch.fcltNm, isLaeSeCdReady]);
 
   useEffect(() => {
-    rswtSttnSearch(false, pageNation, rswtSttnSize, String(getConValue()), fcltNm, code as unknown as Record<string, SelectDataType[]>);
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    if (skipNextSearchRef.current) {
+      skipNextSearchRef.current = false;
+      return;
+    }
+
+    if (searchTrigger === 0) {
+      return;
+    }
+
+    rswtSttnSearch(false, pageNation, rswtSttnSize, appliedSearch.conValue, appliedSearch.fcltNm, code as unknown as Record<string, SelectDataType[]>);
     isResetPage(false)
-  }, [pageNation]);
+  }, [pageNation, searchTrigger, rswtSttnSearch, code, appliedSearch.conValue, appliedSearch.fcltNm, isLaeSeCdReady]);
+
+  const handleSearch = useCallback(() => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    const nextSearch = {
+      conValue: String(getFixedConValue()),
+      fcltNm,
+    };
+
+    setAppliedSearch(nextSearch);
+    isResetPage(true);
+    setPageNation(1);
+    setSearchTrigger((prev) => prev + 1);
+  }, [fcltNm, getFixedConValue, isLaeSeCdReady]);
 
   return (
     <>
@@ -170,7 +273,12 @@ export default function RswtSttn() {
                     className="col-span-2 w-1/6 h-full text-2xl"
                     label="시도"
                     selectClass={""}
-                    selectArray={code.cityCd}
+                    selectArray={
+                      !isAllAreaUser && fixedSidoValue
+                        ? code.cityCd.filter((item) => item.val === fixedSidoValue)
+                        : code.cityCd
+                    }
+                    value={objSearch.city || "0"}
                     onSelectValue={
                       getSelCity
                     }
@@ -179,13 +287,17 @@ export default function RswtSttn() {
                     className="col-span-2 w-1/6 h-full text-2xl ml-4"
                     label="시군구"
                     selectClass={""}
-                    selectArray={selectSgg || []}
-                    value={objSearch.sgg} // value props 추가
+                    selectArray={
+                      !isAllAreaUser && laeSeCd?.length === 5
+                        ? (selectSgg || defaultSigunOptions).filter((item) => item.val === "0" || item.val === fixedSigunValue)
+                        : selectSgg || defaultSigunOptions
+                    }
+                    value={objSearch.sgg || "0"}
                     onSelectValue={
                       getSgg
                     }
                   />
-                  <div className="col-span-2 flex flex-row space-x-2 ml-3 mt-2">
+                  <div className="col-span-2 flex flex-row space-x-2 ml-3">
                     <Label className="w-28 mt-2 text-xl">
                       {"시설명"}
                     </Label>
@@ -203,10 +315,7 @@ export default function RswtSttn() {
                 <div className="flex flex-row space-x-2 items-center">
                   <Button
                     className={btnClass}
-                    onClick={() => {
-                      rswtSttnSearch(false, 1, rswtSttnSize, String(getConValue()), fcltNm, code as unknown as Record<string, SelectDataType[]>);
-                      isResetPage(true)
-                    }}
+                    onClick={handleSearch}
                   >
                     조회
                   </Button>
@@ -243,6 +352,7 @@ export default function RswtSttn() {
                     cellClick={(index: number | undefined) => { cellClick(index ?? undefined) }}
                     onPageChange={setPageNation}
                     resetPageNo={resetPage}
+                    widthFixed={true}
                   >
                     <HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />
                   </UiTable>
@@ -278,7 +388,7 @@ export default function RswtSttn() {
         />
 
       </ContentsDiv>
-      <Toaster position="top-center" />
     </>
   );
 }
+
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead.tsx
index 28ba6c512..72069f4d8 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead.tsx
@@ -17,6 +17,7 @@ export const headMakeprfmnc = (
                   className={`border border-gray-600 px-2 py-1 `}
                   rowSpan={2}
                   key={head.id}
+                  style={{ width: head.widthPercent ? `${head.widthPercent}%` : undefined }}
                 >
                   {head.title}
                 </TableHead>
@@ -28,6 +29,7 @@ export const headMakeprfmnc = (
                   colSpan={
                     makeHeadNm?.find((ch) => ch.headNm === head.upName)?.length
                   }
+                  style={{ width: head.widthPercent ? `${head.widthPercent}%` : undefined }}
                 >
                   {makeHeadNm?.find((ch) => ch.headNm === head.upName)?.text}
                 </TableHead>
@@ -43,6 +45,7 @@ export const headMakeprfmnc = (
                 <TableHead
                   className={`border border-gray-600 px-2 py-1 `}
                   key={head.id}
+                  style={{ width: head.widthPercent ? `${head.widthPercent}%` : undefined }}
                 >
                   {head.title}
                 </TableHead>
@@ -51,4 +54,4 @@ export const headMakeprfmnc = (
         </TableRow>
       </>
     );
-  };
\ No newline at end of file
+  };
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx
index 767bc8beb..d2fab71c2 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx
@@ -1,3 +1,7 @@
+/**
+ * 재이용실적등록 > 지도점검결과등록
+ */
+
 "use client";
 
 import { useWrStore } from "@/app/store";
@@ -11,11 +15,11 @@ import {
   type rswtrChkDetailsZodType,
 } from "@/app/store/prfmncReg/chkgdnReg/rswrtChkgdn";
 import {
-  confirmToast,
   excelArrayDownload,
   excelDownload,
   yearOptions,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import ChkgdExcel from "@/components/ui/modal/chkgd/chkgdExcel/chkgdExcel";
 import ChkgdModal from "@/components/ui/modal/chkgd/chkgdModal/chkgdModal";
 import RainChkgdTable from "@/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable";
@@ -38,34 +42,36 @@ import {
   TooltipTrigger,
 } from "@common/components/ui/tooltip";
 import { useCallback, useEffect, useRef, useState } from "react";
-import toast, { Toaster } from "react-hot-toast";
+import { useAlertStore } from "@/src/shared/lib";
 import { useTranslation } from "react-i18next";
 
 export default function Page() {
   const {
-    auth,
-    code,
-    rainChkgdn,
-    rswtChkgdn,
-    rainChkInit,
-    rainChkDetilUpdate,
-    rainChkDelete,
-    rainChkExcelDownload,
-    rainChkHeadChange,
-    rainChkNmSearch,
-    isRainSttn,
-    rswtChkgdnInit,
-    rswtChkNmSearch,
-    rswtChkPolInit,
-    rswtChkDetilsUpdate,
-    rswtChkDelete,
-    rswtrChkExcelDownload,
-    rswtChkHeadChange,
-    getLaeSeCdCheck
+    auth, // 사용자 권한 및 로그인 사용자 기준 정보
+    code, // 공통 코드 및 지역 코드 정보
+    rainChkgdn, // 빗물이용시설 지도점검 화면 상태
+    rswtChkgdn, // 중수도시설 지도점검 화면 상태
+    rainChkInit, // 빗물이용시설 지도점검 목록 초기 조회
+    rainChkDetilUpdate, // 빗물이용시설 지도점검 상세 수정 저장
+    rainChkDelete, // 빗물이용시설 지도점검 선택 건 삭제
+    rainChkExcelDownload, // 빗물이용시설 지도점검 엑셀 양식/데이터 조회
+    rainChkHeadChange, // 빗물이용시설 테이블 헤더 선택 상태 변경
+    rainChkNmSearch, // 빗물이용시설명으로 목록 조회
+    isRainSttn, // 빗물이용시설 상세/선택 상태 초기화
+    rswtChkgdnInit, // 중수도시설 지도점검 목록 초기 조회
+    rswtChkNmSearch, // 중수도시설명으로 목록 조회
+    rswtChkPolInit, // 중수도 시설구분 변경 시 조회조건 초기화
+    rswtChkDetilsUpdate, // 중수도시설 지도점검 상세 수정 저장
+    rswtChkDelete, // 중수도시설 지도점검 선택 건 삭제
+    rswtrChkExcelDownload, // 중수도시설 지도점검 엑셀 양식/데이터 조회
+    rswtChkHeadChange, // 중수도시설 테이블 헤더 선택 상태 변경
+    getLaeSeCdCheck, // 사용자 관할 기관 코드 조회
+    getCommonCodesByKeys, // 지도점검 화면에서 필요한 공통코드 보강 조회
   } = useWrStore((state) => {
     return state;
   });
   const { regAuthrtYn, mdfcnAuthrtYn, delAuthrtYn,laeSeCd } = auth;
+  const { confirm } = useConfirm();
   const [isRegExcel, setIsRegExcel] = useState(false);
   const [updateRainDetail, setUpdateRainDetail] = useState<rainChkZodType[]>([]);
   const [updateRswtDetail, setUpdateRSwtDetail] = useState<rswtrChkDetailsZodType[]>([]);
@@ -82,13 +88,21 @@ export default function Page() {
     String(new Date().getFullYear())
   );
 
-  const useInitRef = useRef(false);
+  // laeSeCd가 아직 준비되기 전 초기 렌더에서 rainChkInit, rswtChkgdnInit 같은 초기 조회 로직이 먼저 도는 것을 막는다.
+  const useInitRef = useRef(false); //초기 마운트가 한 번 끝났는지
 
 
   useEffect(() => {
     getLaeSeCdCheck();
-    useInitRef.current = true;
-  }, []);
+    const hasRequiredCodes =
+      code.rainRswtMng.length > 0 &&
+      code.rainFcltFlowRate.length > 0 &&
+      code.dmdUszCd.length > 0;
+    if (!hasRequiredCodes) {
+      void getCommonCodesByKeys(["WR014", "WR015", "WR016"]);
+    }
+    useInitRef.current = true; // getLaeSeCdCheck()를 호출한 뒤 true로 바뀜
+  }, [getLaeSeCdCheck, getCommonCodesByKeys, code.rainRswtMng, code.rainFcltFlowRate, code.dmdUszCd]);
 
 
 
@@ -96,75 +110,46 @@ export default function Page() {
     if (searchYear)
       if (selFcltDiv === "RNB") { // 빗물
         if (fcltNm) {
-          rainChkNmSearch(
-            rainPageNation,
-            rainPageSize,
-            searchYear,
-            laeSeCd,
-            fcltNm
-          );
+          rainChkNmSearch( rainPageNation, rainPageSize, searchYear, laeSeCd, fcltNm );
           setRainPageNation(1);
         } else {
           rainChkInit(rainPageNation, rainPageSize, searchYear, laeSeCd);
         }
       } else { // 중수도
         if (fcltNm) {
-          rswtChkNmSearch(
-            rainPageNation,
-            rainPageSize,
-            searchYear,
-            laeSeCd,
-            fcltNm
-          );
+          rswtChkNmSearch( rswtPageNation, rswtPageSize, searchYear, laeSeCd, fcltNm );
           setRswtPageNation(1);
         } else {
           rswtChkgdnInit(rswtPageNation, rswtPageSize, searchYear, laeSeCd);
         }
       }
   };
+
   const rainPageChange = (pageNo: number) => {
     if (pageNo > 0) {
       setRainPageNation(pageNo);
       if (fcltNm) {
-        rainChkNmSearch(
-          pageNo,
-          rainPageSize,
-          searchYear,
-          laeSeCd,
-          fcltNm
-        );
+        rainChkNmSearch( pageNo, rainPageSize, searchYear, laeSeCd, fcltNm );
       } else {
         rainChkInit(pageNo, rainPageSize, searchYear, laeSeCd);
       }
     }
   };
+
   const rswtPageChange = (pageNo: number) => {
     if (pageNo > 0) {
       setRswtPageNation(pageNo);
       if (fcltNm) {
-        rswtChkNmSearch(
-          pageNo,
-          rainPageSize,
-          searchYear,
-          laeSeCd,
-          fcltNm
-        );
+        rswtChkNmSearch( pageNo, rswtPageSize, searchYear, laeSeCd, fcltNm );
       } else {
         rswtChkgdnInit(pageNo, rswtPageSize, searchYear, laeSeCd);
       }
     }
   };
 
- 
-
   useEffect(() => {
     if (useInitRef.current == true && laeSeCd !== undefined&& !rainChkgdn.isInit) {
-      rainChkInit(
-        1,
-        rainPageSize,
-        new Date().getFullYear().toString(),
-        laeSeCd
-      );
+      rainChkInit( 1, rainPageSize, new Date().getFullYear().toString(), laeSeCd );
       isRainSttn(false);
       setIsModal({ data: {}, open: false });
       setIsRegExcel(false);
@@ -173,12 +158,7 @@ export default function Page() {
 
   useEffect(() => {
     if (useInitRef.current == true && laeSeCd !== undefined&&!rswtChkgdn.isInit) {
-      rswtChkgdnInit(
-        1,
-        rswtPageSize,
-        new Date().getFullYear().toString(),
-        laeSeCd
-      );
+      rswtChkgdnInit( 1, rswtPageSize, new Date().getFullYear().toString(), laeSeCd );
       setIsModal({ data: {}, open: false });
       setIsRegExcel(false);
     }
@@ -186,38 +166,24 @@ export default function Page() {
 
   useEffect(() => {
     if (rswtChkgdn.excelList[0] && rswtChkgdn.excelList[0]?.data.length > 1) {
-      excelArrayDownload(
-        "중수도시설 지도점검",
-        "sample_rs_chk.xlsx",
-        rswtChkgdn.excelList
-      );
+      excelArrayDownload( "중수도시설 지도점검", "sample_rs_chk.xlsx", rswtChkgdn.excelList );
     }
   }, [rswtChkgdn.excelList]);
 
   useEffect(() => {
     excelDownload(
-      rainChkgdn.excelList,
-      "빗물이용시설 지도점검",
-      "sample_rainy.xlsx",
-      "A1:AN1",
-      2
-    );
+      rainChkgdn.excelList, "빗물이용시설 지도점검", "sample_rainy.xlsx", "A1:AN1", 2 );
   }, [rainChkgdn.excelList]);
 
   const excelClick = useCallback(() => {
-    if (selFcltDiv === "RNB") {
-      rainChkExcelDownload(code.cityCd, code.sggCd,laeSeCd);
-    } else {
-      rswtrChkExcelDownload(code.cityCd, code.sggCd,laeSeCd);
-    }
-  }, [
-    rainChkExcelDownload,
-    rswtrChkExcelDownload,
-    code.cityCd,
-    code.sggCd,
-    selFcltDiv,
-    laeSeCd
-  ]);
+      if (selFcltDiv === "RNB") {
+        rainChkExcelDownload(code.cityCd, code.sggCd,laeSeCd);
+      } else {
+        rswtrChkExcelDownload(code.cityCd, code.sggCd,laeSeCd);
+      }
+    },
+    [ rainChkExcelDownload, rswtrChkExcelDownload, code.cityCd, code.sggCd, selFcltDiv, laeSeCd ]
+  );
 
   const handleClick = useCallback(
     (data: any) => {
@@ -236,33 +202,43 @@ export default function Page() {
   }, [rainChkgdn.isSttn, rswtChkgdn.isSttn]);
 
   const { t } = useTranslation('base');
-  const clickDelete = (data: number[], selFcltDiv: string) => {
+  const alert = useAlertStore((state) => state.setMessage);
+  const clickDelete = async (data: number[], selFcltDiv: string) => {
     if (data.length > 0) {
       if (selFcltDiv === "RNB") {
         const handleConfirm = async () => {
-          rainChkDelete(data, searchYear);
+          const message = await rainChkDelete(data, searchYear);
+          alert(message);
         };
-        confirmToast(t('isDeleteMsg'), handleConfirm);
+        if (await confirm(t("isDeleteMsg"))) {
+          await handleConfirm();
+        }
       } else {
         const handleConfirm = async () => {
-          rswtChkDelete(data, searchYear);
+          const message = await rswtChkDelete(data, searchYear);
+          alert(message);
         };
-        confirmToast(t('isDeleteMsg'), handleConfirm);
+        if (await confirm(t("isDeleteMsg"))) {
+          await handleConfirm();
+        }
       }
     }
   };
-  const chkUpdateTable = (selFcltDiv: string) => {
+  
+  const chkUpdateTable = async (selFcltDiv: string) => {
     if (selFcltDiv === "RNB") {
       if (updateRainDetail && updateRainDetail.length > 0) {
-        rainChkDetilUpdate(updateRainDetail, searchYear);
+        const message = await rainChkDetilUpdate(updateRainDetail, searchYear);
+        alert(message);
       } else {
-        toast.error("수정을 원하는 행을 선택하고 저장버튼을 눌러주세요 ");
+        alert("수정을 원하는 행을 선택하고 저장버튼을 눌러주세요 ");
       }
     } else {
       if (updateRswtDetail && updateRswtDetail.length > 0) {
-        rswtChkDetilsUpdate(updateRswtDetail, searchYear);
+        const message = await rswtChkDetilsUpdate(updateRswtDetail, searchYear);
+        alert(message);
       } else {
-        toast.error("수정을 원하는 행을 선택하고 저장버튼을 눌러주세요 ");
+        alert("수정을 원하는 행을 선택하고 저장버튼을 눌러주세요 ");
       }
     }
   };
@@ -330,7 +306,7 @@ export default function Page() {
                   <Button
                     className={btnClass}
                     onClick={() => {
-                      clickDelete(deleteIdx, selFcltDiv);
+                      void clickDelete(deleteIdx, selFcltDiv);
                     }}
                     disabled={delAuthrtYn === 'N'}
                   >
@@ -343,7 +319,7 @@ export default function Page() {
                         <Button
                           className={btnClass}
                           onClick={() => {
-                            chkUpdateTable(selFcltDiv);
+                            void chkUpdateTable(selFcltDiv);
                           }}
                           disabled={mdfcnAuthrtYn === 'N'}
                         >
@@ -402,6 +378,9 @@ export default function Page() {
                 readonly={mdfcnAuthrtYn === 'N'}
               />
             )}
+            <span className="text-2xl font-bold text-gray-500">
+              ☞ 연도별 점검일 최종 데이터를 기준으로 통계 작성합니다.
+            </span>
           </ListDiv>
         </div>
       </div>
@@ -434,8 +413,8 @@ export default function Page() {
           ></ChkgdExcel>
         }
       />
-      <Toaster position="top-center" />
     </ContentsDiv>
   );
 }
 
+
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx
index 8f093fea9..4838624a2 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx
@@ -1,3 +1,6 @@
+/**
+ * 재이용실적등록 > 하수재이용실적등록
+ */
 "use client";
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
@@ -11,11 +14,11 @@ import {
   type PrfType,
 } from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
 import {
-  confirmToast,
   excelDownload,
   yearOptions,
-} from "@/components/lib/func/commom";
-import { InputTableBody } from "@/components/lib/func/TableData";
+} from "@/components/lib/func/common";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { pbnstTableBody } from "@/components/lib/func/TableData";
 import PbnPrfExcelModal from "@/components/ui/modal/chkgd/pbnPrfExcelModal/pbnPrfExcelModal";
 import {
   ContentsDiv,
@@ -37,7 +40,7 @@ import {
   TableHeader,
 } from "@common/components/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
-import toast, { Toaster } from "react-hot-toast";
+import { useAlertStore } from "@/src/shared/lib";
 import { useTranslation } from "react-i18next";
 import { headMakeprfmnc } from "../chkgdnReg/TableHead";
 
@@ -72,6 +75,8 @@ export default function PrfmncPrfmncReg() {
   const [searchYear, setSearchYear] = useState<string>(
     String(new Date().getFullYear())
   );
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
 
   const useInitRef = useRef(false);
 
@@ -85,11 +90,11 @@ export default function PrfmncPrfmncReg() {
   }, [prfmnc.excelList]);
 
   const { t } = useTranslation("base");
-  const onSave = useCallback(() => {
+  const onSave = useCallback(async () => {
     const handleConfirm = async () => {
       if (!pbnstRuseFcltId) return;
 
-      prfmnRegData(
+      const message = await prfmnRegData(
         1,
         laeSeCd,
         excelToPbnPrfData(
@@ -100,10 +105,13 @@ export default function PrfmncPrfmncReg() {
         searchYear,
         prfPbnFclts
       );
+      alert(message);
     };
 
-    confirmToast(t("isUpdateMsg"), handleConfirm);
-  }, [inputData, searchYear, pbnstRuseFcltId, cellNum, prfPbnFclts]);
+    if (await confirm(t("isUpdateMsg"))) {
+      await handleConfirm();
+    }
+  }, [inputData, searchYear, pbnstRuseFcltId, cellNum, prfPbnFclts, confirm, t, laeSeCd, prfmnRegData]);
 
   const cellClick = useCallback(
     (index: number | undefined) => {
@@ -274,7 +282,7 @@ export default function PrfmncPrfmncReg() {
                     <Button
                       className={btnClass}
                       onClick={() => {
-                        onSave();
+                        void onSave();
                       }}
                       disabled={mdfcnAuthrtYn === "N"}
                     >
@@ -284,7 +292,7 @@ export default function PrfmncPrfmncReg() {
                       className={btnClass}
                       onClick={() => {
                         if (cellNum === undefined) {
-                          toast.error("하수처리재이용시설을 선택해주세요.");
+                          alert("하수처리재이용시설을 선택해주세요.");
                           return;
                         } else {
                           setIsExcelOPen({ ...isExcelOpen, isModal: true });
@@ -350,7 +358,7 @@ export default function PrfmncPrfmncReg() {
                   {headMakeprfmnc(monthHeadList, [])}
                 </TableHeader>
                 <TableBody key={prfmnc.pageKey + "pageKey"}>
-                  {InputTableBody(
+                  {pbnstTableBody(
                     inputData ?? [],
                     monthHeadList,
                     setInputData,
@@ -371,7 +379,8 @@ export default function PrfmncPrfmncReg() {
               setIsExcelOPen({ ...isExcelOpen, isModal: open });
             }}
             setModalExcelData={async (excelData) => {
-              await prfmnRegData(1, laeSeCd, excelData, searchYear, prfPbnFclts);
+              const message = await prfmnRegData(1, laeSeCd, excelData, searchYear, prfPbnFclts);
+              alert(message);
               // 데이터 저장 후 UI 업데이트는 useEffect가 감지하여 처리하므로 여기서는 호출하지 않습니다.
             }}
           ></PbnPrfExcelModal>
@@ -381,8 +390,8 @@ export default function PrfmncPrfmncReg() {
           setIsExcelOPen({ ...isExcelOpen, isModal: false });
         }}
       ></UiModal>
-      <Toaster position="top-center" />
     </>
   );
 }
 
+
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/chkgdnSttn/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/chkgdnSttn/page.tsx
index b5ba8cfff..ac3c72bc1 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/chkgdnSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/chkgdnSttn/page.tsx
@@ -1,10 +1,13 @@
-"use client";
+"use client";
 
+/**
+ * 재이용실적 현황 > 지도점검 현황
+ */
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import { rainPageSize } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn";
 import { rswtPageSize } from "@/app/store/prfmncReg/chkgdnReg/rswrtChkgdn";
-import { excelDownloadNumStyle, yearOptions } from "@/components/lib/func/commom";
+import { excelDownloadNumStyle, getCity, yearOptions } from "@/components/lib/func/common";
 import { type SheetParameter } from "@common/business_components/ui";
 import ChkgdModal from "@/components/ui/modal/chkgd/chkgdModal/chkgdModal";
 import RainChkgdTable from "@/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable";
@@ -17,16 +20,20 @@ import {
   SearchInput,
   SelectBox,
   UiModal,
+  type SelectDataType,
 } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button, Label } from "@common/components/ui";
-import { useCallback, useEffect, useState } from "react";
-import toast, { Toaster } from "react-hot-toast";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useAlertStore } from "@/src/shared/lib";
 import { useTranslation } from "react-i18next";
 
+const defaultSigunOptions: SelectDataType[] = [{ text: "전체", val: "0" }];
+
 export default function Page() {
   const {
     auth,
+    code,
     rainChkSttn,
     rswtChkSttn,
     rainChkSttnInit,
@@ -36,15 +43,28 @@ export default function Page() {
     isRainSttn,
     isRswtSttn,
     rswtChkPolInit,
+    getLaeSeCdCheck,
   } = useWrStore((state) => {
     return state;
   });
 
   const { laeSeCd } = auth;
+  const isAllAreaUser = laeSeCd === "0";
+  const isLaeSeCdReady =
+    laeSeCd === "0" || laeSeCd.length === 2 || laeSeCd.length === 5;
+  const fixedSidoValue =
+    !isAllAreaUser && laeSeCd?.length ? laeSeCd.slice(0, 2) : "";
+  const fixedSigunValue =
+    !isAllAreaUser && laeSeCd?.length === 5 ? laeSeCd : "0";
   const [selFcltDiv, setSelFcltDiv] = useState("RNB");
   const [rainPageNation, setRainPageNation] = useState(1);
   const [rswtPageNation, setRswtPageNation] = useState(1);
   const [fcltNm, setFcltNm] = useState<string>("");
+  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>(defaultSigunOptions);
+  const [objSearch, setObjSearch] = useState<{ city: string; sgg: string }>({
+    city: "",
+    sgg: "",
+  });
   const [isModal, setIsModal] = useState({
     open: false,
     data: {},
@@ -52,7 +72,51 @@ export default function Page() {
   const [searchYear, setSearchYear] = useState<string>(
     String(new Date().getFullYear())
   );
+  const useInitRef = useRef(false);
+  const skipNextSearchRef = useRef(true);
+
+  const getSelCity = (val: string | number) => {
+    const cityValue = String(val);
+    if (cityValue === "0") {
+      setSelectSgg(defaultSigunOptions);
+      setObjSearch({ city: cityValue, sgg: "" });
+    } else {
+      const data = getCity(cityValue, code.sggCd);
+      setSelectSgg(data.length > 0 ? data : defaultSigunOptions);
+      const firstSggVal =
+        data.find((item) => item.val === "0")?.val || (data[0]?.val ?? "");
+      setObjSearch({ city: cityValue, sgg: String(firstSggVal) });
+    }
+  };
+
+  const getSgg = (val: string | number) => {
+    setObjSearch((prev) => ({ ...prev, sgg: String(val) }));
+  };
+
+  const getConValue = (): string => {
+    if (!objSearch.city || objSearch.city === "0") {
+      return "0";
+    }
+    if (objSearch.sgg && objSearch.sgg !== "0") {
+      return objSearch.sgg;
+    }
+    return objSearch.city;
+  };
+
+  const getFixedConValue = useCallback((): string => {
+    if (laeSeCd === undefined || laeSeCd === "0") {
+      return getConValue();
+    }
+
+    return laeSeCd.length === 5 ? laeSeCd : laeSeCd.slice(0, 2);
+  }, [laeSeCd, objSearch]);
+
   const cellClick = () => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    const conValue = getFixedConValue();
     if (searchYear) {
       if (selFcltDiv === "RNB") {
         if (fcltNm) {
@@ -60,11 +124,11 @@ export default function Page() {
             rainPageNation,
             rainPageSize,
             searchYear,
-            laeSeCd,
+            conValue,
             fcltNm
           );
         } else {
-          rainChkSttnInit(rainPageNation, rainPageSize, searchYear, laeSeCd);
+          rainChkSttnInit(rainPageNation, rainPageSize, searchYear, conValue);
         }
       } else {
         if (fcltNm) {
@@ -72,63 +136,108 @@ export default function Page() {
             rswtPageNation,
             rswtPageSize,
             searchYear,
-            laeSeCd,
+            conValue,
             fcltNm
           );
         } else {
-          rswtChkSttnInit(rswtPageNation, rswtPageSize, searchYear, laeSeCd);
+          rswtChkSttnInit(rswtPageNation, rswtPageSize, searchYear, conValue);
         }
       }
     }
   };
 
   const rainPageChange = (pageNo: number) => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    const conValue = getFixedConValue();
     if (pageNo > 0) {
       setRainPageNation(pageNo);
       if (fcltNm) {
-        rainChkSttnNmSearch(pageNo, rainPageSize, searchYear, laeSeCd, fcltNm);
+        rainChkSttnNmSearch(pageNo, rainPageSize, searchYear, conValue, fcltNm);
       } else {
-        rainChkSttnInit(pageNo, rainPageSize, searchYear, laeSeCd);
+        rainChkSttnInit(pageNo, rainPageSize, searchYear, conValue);
       }
     }
   };
 
   const rswtPageChange = (pageNo: number) => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    const conValue = getFixedConValue();
     if (pageNo > 0) {
       setRswtPageNation(pageNo);
       if (fcltNm) {
-        rswtChkNmSttnSearch(pageNo, rainPageSize, searchYear, laeSeCd, fcltNm);
+        rswtChkNmSttnSearch(pageNo, rainPageSize, searchYear, conValue, fcltNm);
       } else {
-        rswtChkSttnInit(pageNo, rswtPageSize, searchYear, laeSeCd);
+        rswtChkSttnInit(pageNo, rswtPageSize, searchYear, conValue);
       }
     }
   };
 
   useEffect(() => {
+    getLaeSeCdCheck();
+    useInitRef.current = true;
+  }, [getLaeSeCdCheck]);
+
+  useEffect(() => {
+    if (!isLaeSeCdReady) {
+      return;
+    }
+
+    if (laeSeCd === "0") {
+      setSelectSgg(defaultSigunOptions);
+      setObjSearch({ city: "0", sgg: "" });
+      return;
+    }
+
+    const cityValue = laeSeCd.slice(0, 2);
+    const sigunOptions = getCity(cityValue, code.sggCd);
+    setSelectSgg(sigunOptions.length > 0 ? sigunOptions : defaultSigunOptions);
+    setObjSearch({
+      city: cityValue,
+      sgg: laeSeCd.length === 5 ? laeSeCd : "0",
+    });
+  }, [laeSeCd, code.sggCd, isLaeSeCdReady]);
+
+  useEffect(() => {
+    if (!useInitRef.current || !isLaeSeCdReady || rainChkSttn.isInit) {
+      return;
+    }
+
+    skipNextSearchRef.current = true;
     if (!rainChkSttn.isInit) {
       isRainSttn(true);
       rainChkSttnInit(
         1,
         rainPageSize,
         new Date().getFullYear().toString(),
-        laeSeCd
+        getFixedConValue()
       );
       setIsModal({ data: {}, open: false });
     }
-  }, [rainChkSttn.isInit, rainChkSttnInit, rainPageSize]);
+  }, [rainChkSttn.isInit, rainChkSttnInit, rainPageSize, isLaeSeCdReady, getFixedConValue, isRainSttn]);
 
   useEffect(() => {
+    if (!useInitRef.current || !isLaeSeCdReady || rswtChkSttn.isInit) {
+      return;
+    }
+
+    skipNextSearchRef.current = true;
     if (!rswtChkSttn.isInit) {
       setIsModal({ data: {}, open: false });
       rswtChkSttnInit(
         1,
         rswtPageSize,
         new Date().getFullYear().toString(),
-        laeSeCd
+        getFixedConValue()
       );
       isRswtSttn(true);
     }
-  }, [rswtChkSttn.isInit, rswtChkSttnInit, rswtPageSize]);
+  }, [rswtChkSttn.isInit, rswtChkSttnInit, rswtPageSize, isLaeSeCdReady, getFixedConValue, isRswtSttn]);
 
   const handleClick = useCallback(
     (data: any) => {
@@ -137,22 +246,24 @@ export default function Page() {
     [isModal]
   );
   const { t } = useTranslation("base");
+  const alert = useAlertStore((state) => state.setMessage);
   const excelDown = () => {
     if (rainChkSttn.sttnExcelList && selFcltDiv === "RNB") {
       if (
         !rainChkSttn.sttnExcelList ||
         rainChkSttn.sttnExcelList.length === 0
       ) {
-        toast.error(t("excelDownErrMsg"));
+        alert(t("excelDownErrMsg"));
         return;
       }
+      // console.log(rainChkSttn.sttnExcelList);
       const sheetArray: SheetParameter[] = [{
             data: rainChkSttn.sttnExcelList,
             headerNum: 2,
             headerRange: "A1:Q2",
             sheetName: 'sheet1',
             startCol: 'A',
-            decimalArray0: [5,6,7,9,10,11,12,13,16], // 0부터 시작
+            decimalArray0: [5,6,9,10,11,12,13,16], // 0부터 시작
         }];
       excelDownloadNumStyle(
         "빗물이용시설 지도점검 현황",
@@ -164,7 +275,7 @@ export default function Page() {
         !rswtChkSttn.sttnExcelList ||
         rswtChkSttn.sttnExcelList.length === 0
       ) {
-        toast.error(t("excelDownErrMsg"));
+        alert(t("excelDownErrMsg"));
         return;
       }
       const sheetArray: SheetParameter[] = [{
@@ -173,7 +284,7 @@ export default function Page() {
             headerRange: "A1:X2",
             sheetName: 'sheet1',
             startCol: 'A',
-            decimalArray0: [4,5,9,10,11,12,13,14,17,18,19,23], // 0부터 시작
+            decimalArray0: [4,5,9,10,11,12,13,14,17,18,19,20,23], // 0부터 시작
         }];
       excelDownloadNumStyle(
         "중수도시설 지도점검 현황",
@@ -189,6 +300,42 @@ export default function Page() {
         <div className="col-span-4">
           <SearchDiv>
             <SearchFormLeft>
+              <div className="col-span-2 flex flex-row space-x-2">
+                <Label className="w-28 mt-2 text-xl text-gray-600">
+                  {"시도"}
+                </Label>
+                <SelectBox
+                  className="w-full h-full text-2xl"
+                  label=""
+                  selectClass=""
+                  selectArray={
+                    !isAllAreaUser && fixedSidoValue
+                      ? code.cityCd.filter((item) => item.val === fixedSidoValue)
+                      : code.cityCd
+                  }
+                  value={objSearch.city || "0"}
+                  onSelectValue={getSelCity}
+                />
+              </div>
+              <div className="col-span-2 flex flex-row space-x-2">
+                <Label className="w-28 mt-2 text-xl text-gray-600">
+                  {"시군구"}
+                </Label>
+                <SelectBox
+                  className="w-full h-full text-2xl"
+                  label=""
+                  selectClass=""
+                  selectArray={
+                    !isAllAreaUser && laeSeCd?.length === 5
+                      ? (selectSgg || defaultSigunOptions).filter(
+                          (item) => item.val === "0" || item.val === fixedSigunValue
+                        )
+                      : selectSgg || defaultSigunOptions
+                  }
+                  value={objSearch.sgg || "0"}
+                  onSelectValue={getSgg}
+                />
+              </div>
               <div className="col-span-2 flex flex-row space-x-2">
                 <Label className="w-48 mt-2 text-xl text-gray-600">
                   {"지도점검년도"}
@@ -306,7 +453,7 @@ export default function Page() {
           />
         }
       ></UiModal>
-      <Toaster position="top-center" />
     </ContentsDiv>
   );
 }
+
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx
index 8165c834d..34d4a4ffe 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx
@@ -1,22 +1,23 @@
-"use client";
+"use client";
 
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import { initValInUsage, initValOutUsage, subTotalObj, totalObj, type FcPrfType, type PrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
 import { excelPrfmncSttnParsing } from "@/app/store/prfmncSttn/pbnstPrfmncSttn/excel";
-import { excelDownloadNumStyle, yearOptions } from "@/components/lib/func/commom";
+import { excelDownloadNumStyle, yearOptions } from "@/components/lib/func/common";
 import { type SheetParameter } from "@common/business_components/ui";
-import { InputTableBody } from "@/components/lib/func/TableData";
+import { pbnstTableBody } from "@/components/lib/func/TableData";
 import { CHART_FORM, ContentsDiv, MainChart, ScrollArea, SearchBaseForm, SearchInput, SelectBox, UiTable, type ChartConfig, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
 import { Label, Table, TableBody, TableHeader } from "@common/components/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
-import toast, { Toaster } from "react-hot-toast";
+import { useAlertStore } from "@/src/shared/lib";
 import { useTranslation } from "react-i18next";
 import { headMakeprfmnc } from "../../prfmncReg/chkgdnReg/TableHead";
 
 export default function PbnstPrfmncSttn() {
     const {
+        auth,
         code,
         tableHeadMaker,
         pbnstPrfmncSttn,
@@ -24,8 +25,10 @@ export default function PbnstPrfmncSttn() {
         pbnstPrfmncSearch,
         getFlctsSttn,
         prfmnc,
-        pbnNmSearch
+        pbnNmSearch,
+        getLaeSeCdCheck
     } = useWrStore((state) => state);
+    const { laeSeCd } = auth;
     const { monthHeadList } = prfmnc
     const { pbnstPrfHeadList, prfmncResCount, prfmncRes, rawData, selectYearList, fclts } = pbnstPrfmncSttn;
     // const [isChHead, setIsChHead] = useState(false);
@@ -37,14 +40,48 @@ export default function PbnstPrfmncSttn() {
     // const [swtrmtFcltNm, setSwtrmtFcltNm] = useState<string>();
     const [pbnRuseNm, setPbnRuseNm] = useState<string>("");
     const { t } = useTranslation('base');
+    const alert = useAlertStore((state) => state.setMessage);
     const searchYear = String(new Date().getFullYear());
     const [excelData, setExcelData] = useState<any[]>([]);
     const [pageNation, setPageNation] = useState(1);
     const [resetPage, isResetPage] = useState(false);
+    const skipNextSearchRef = useRef(true);
+    const isAllAreaUser = laeSeCd === "0";
+    const isLaeSeCdReady =
+        laeSeCd === "0" || laeSeCd.length === 2 || laeSeCd.length === 5;
+    const fixedSidoValue =
+        !isAllAreaUser && laeSeCd?.length ? laeSeCd.slice(0, 2) : "";
+    const fixedSigunValue =
+        !isAllAreaUser && laeSeCd?.length === 5 ? laeSeCd : "0";
+
+    const getFixedSearchValue = useCallback(
+        (baseValue: ReturnType): ReturnType => {
+            if (isAllAreaUser) {
+                return baseValue;
+            }
+
+            const fixedSidoText =
+                code.cityCd.find((item) => item.val === fixedSidoValue)?.text ?? "";
+            const fixedSigunText =
+                fixedSigunValue !== "0"
+                    ? code.sggCd.find((item) => item.val === fixedSigunValue)?.text ?? ""
+                    : "";
+
+            return {
+                ...baseValue,
+                partValue: "A",
+                sidoValue: fixedSidoValue,
+                sigunValue: fixedSigunValue,
+                sidoText: fixedSidoText,
+                sigunText: fixedSigunText,
+            };
+        },
+        [isAllAreaUser, fixedSidoValue, fixedSigunValue, code.cityCd, code.sggCd]
+    );
 
     const excelClick = useCallback(() => {
         if (!excelData || excelData.length === 0) {
-            toast.error(t('excelDownErrMsg'));
+            alert(t('excelDownErrMsg'));
             return;
         }
         const sheetArray: SheetParameter[] = [{
@@ -488,7 +525,18 @@ export default function PbnstPrfmncSttn() {
     }, [outLineData]);
 
     useEffect(() => {
-        const returnType: ReturnType = {
+        getLaeSeCdCheck();
+        tableHeadMaker(Number(searchYear), Number(searchYear));
+        getFlctsSttn();
+    }, [getLaeSeCdCheck, tableHeadMaker, searchYear, getFlctsSttn]);
+
+    useEffect(() => {
+        if (!isLaeSeCdReady || fclts.length === 0) {
+            return;
+        }
+
+        skipNextSearchRef.current = true;
+        const initialValue = getFixedSearchValue({
             sidoValue: "0",
             sigunValue: "0",
             partValue: "A",
@@ -497,17 +545,31 @@ export default function PbnstPrfmncSttn() {
             middleRegionValue: "",
             envPartValue: "",
             sidoText: "",
-            sigunText: ""
-        }
-        tableHeadMaker(Number(searchYear), Number(searchYear));
-        getFlctsSttn();
-        pbnstPrfmncSearch(1, returnType, "", searchYear, searchYear, fclts)
-    }, []);
+            sigunText: "",
+        });
+        pbnstPrfmncSearch(1, initialValue, "", searchYear, searchYear, fclts);
+    }, [fclts, isLaeSeCdReady, getFixedSearchValue, pbnstPrfmncSearch, searchYear]);
 
     useEffect(() => {
-        pbnstPrfmncSearch(pageNation, ref.current, pbnRuseNm, fromDate, toDate, pbnstPrfmncSttn.fclts);
+        if (!isLaeSeCdReady || fclts.length === 0) {
+            return;
+        }
+
+        if (skipNextSearchRef.current) {
+            skipNextSearchRef.current = false;
+            return;
+        }
+
+        pbnstPrfmncSearch(
+            pageNation,
+            getFixedSearchValue(ref.current),
+            pbnRuseNm,
+            fromDate,
+            toDate,
+            pbnstPrfmncSttn.fclts
+        );
         isResetPage(false)
-    }, [fclts, pageNation]);
+    }, [fclts, pageNation, pbnRuseNm, fromDate, toDate, pbnstPrfmncSttn.fclts, isLaeSeCdReady, getFixedSearchValue, pbnstPrfmncSearch]);
 
     useEffect(() => {
         const tableData = prfmncRes.map((e, idx) => {
@@ -524,8 +586,8 @@ export default function PbnstPrfmncSttn() {
 
     useEffect(() => {
         if (pbnRuseNm.length > 1)
-            pbnNmSearch("1", "23", ref.current, pbnRuseNm, searchYear, []);
-    }, [pbnRuseNm]);
+            pbnNmSearch("1", "23", getFixedSearchValue(ref.current), pbnRuseNm, searchYear, []);
+    }, [pbnRuseNm, getFixedSearchValue, pbnNmSearch, searchYear]);
 
     const cellClick = (index: number | undefined, headId: string) => {
         if (index !== undefined && headId !== undefined) {
@@ -538,8 +600,18 @@ export default function PbnstPrfmncSttn() {
                 <div className="grid grid-cols-4 gap-4 ">
                     <div className="col-span-4">
                         <SearchBaseForm
-                            selectSidoData={code.cityCd}
-                            selectSigunData={code.sggCd}
+                            selectSidoData={
+                                !isAllAreaUser && fixedSidoValue
+                                    ? code.cityCd.filter((item) => item.val === fixedSidoValue)
+                                    : code.cityCd
+                            }
+                            selectSigunData={
+                                !isAllAreaUser && laeSeCd?.length === 5
+                                    ? code.sggCd.filter((item) => item.val === laeSeCd)
+                                    : !isAllAreaUser && laeSeCd?.length
+                                        ? code.sggCd.filter((item) => item.val.slice(0, 2) === fixedSidoValue)
+                                        : code.sggCd
+                            }
                             selectRegionData={code.rvbsnCd}
                             selectUnitWaterShedData={code.lgbsnCd}
                             selectMiddleRegionData={code.mdmbsnCd}
@@ -573,7 +645,7 @@ export default function PbnstPrfmncSttn() {
                                             selectArray={yearOptions}
                                             value={toDate}
                                             onSelectValue={(val: string | number) => setToDate(String(val))} />
-                                        <Label className="w-28 mt-2 text-xl">
+                                        <Label className="w-28 text-xl">
                                             {"시설명"}
                                         </Label>
                                         <SearchInput
@@ -593,15 +665,19 @@ export default function PbnstPrfmncSttn() {
                                 </div>
                             </div>}
                             queryClick={function (returnType: ReturnType): void {
-                                pbnstPrfmncSearch(1, returnType, pbnRuseNm ?? "", fromDate, toDate, fclts);
+                                if (!isLaeSeCdReady || fclts.length === 0) {
+                                    return;
+                                }
+                                const fixedSearchValue = getFixedSearchValue(returnType);
+                                pbnstPrfmncSearch(1, fixedSearchValue, pbnRuseNm ?? "", fromDate, toDate, fclts);
                                 if (fromDate && toDate) {
                                     const fromNum = Number(fromDate);
                                     const toNum = Number(toDate);
                                     if (fromNum > toNum) {
-                                        toast.error("시작년도가 종료년도 이후로 설정할 수 없습니다.");
+                                        alert("시작년도가 종료년도 이후로 설정할 수 없습니다.");
                                     } else {
                                         if (toNum - fromNum > 4) {
-                                            toast.error("최대 5년까지 선택 가능합니다.");
+                                            alert("최대 5년까지 선택 가능합니다.");
                                         } else {
                                             tableHeadMaker(fromNum, toNum);
 
@@ -617,7 +693,11 @@ export default function PbnstPrfmncSttn() {
                                 setToDate(String(new Date().getFullYear()))
                             }}
                             btnClass={btnClass}
-                            ref={ref} isAdmin={false} />
+                            ref={ref}
+                            isAdmin={!isAllAreaUser}
+                            initSidoValue={fixedSidoValue}
+                            initSigunValue={fixedSigunValue !== "0" ? fixedSigunValue : ""}
+                        />
                     </div>
                 </div>
                 <div className="grid grid-cols-6 gap-4 ">
@@ -635,6 +715,7 @@ export default function PbnstPrfmncSttn() {
                                 onPageChange={setPageNation}
                                 index={0}
                                 resetPageNo={resetPage}
+                                widthFixed={true}
                             />
 
                             <hr />
@@ -712,8 +793,8 @@ export default function PbnstPrfmncSttn() {
                                             {headMakeprfmnc(monthHeadList, [])}
                                         </TableHeader>
                                         <TableBody>
-                                            {/* {InputTableBody(prfData ?? [], monthHeadList, setPrfData)} */}
-                                            {InputTableBody(prfData ?? [], monthHeadList, setPrfData, false)}
+                                            {/* {pbnstTableBody(prfData ?? [], monthHeadList, setPrfData)} */}
+                                            {pbnstTableBody(prfData ?? [], monthHeadList, setPrfData, false)}
                                         </TableBody>
                                     </Table>
                                 </ScrollArea>
@@ -722,8 +803,8 @@ export default function PbnstPrfmncSttn() {
                     </div>
                 </div>
             </ContentsDiv>
-            <Toaster position="top-center" />
         </>
     )
 }
 
+
diff --git a/apps/wr/app/(with-layout)/stats/rainStat/page.tsx b/apps/wr/app/(with-layout)/stats/rainStat/page.tsx
index 2cf0585be..332ae537f 100644
--- a/apps/wr/app/(with-layout)/stats/rainStat/page.tsx
+++ b/apps/wr/app/(with-layout)/stats/rainStat/page.tsx
@@ -1,9 +1,9 @@
-"use client";
+"use client";
 
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import type { RainStatProps } from "@/app/store/stats/rainStat";
-import { excelDownloadNumStyle, tableData, yearOptions } from "@/components/lib/func/commom";
+import { excelDownloadNumStyle, tableData, yearOptions } from "@/components/lib/func/common";
 import { type SheetParameter } from "@common/business_components/ui";
 import { downloadExcelFormat } from "@common/business_components";
 
@@ -17,7 +17,7 @@ import {
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button } from "@common/components/ui";
 import { useEffect, useState } from "react";
-import toast from "react-hot-toast";
+import { useAlertStore } from "@/src/shared/lib";
 import { useTranslation } from "react-i18next";
 
 export default function RainStat() {
@@ -30,6 +30,7 @@ export default function RainStat() {
   //const [exData, setExData] = useState<Array<Record<string, string | number>>>();
   const [bdstTable, setBdstTable] = useState<RainStatProps[]>();
   const { t } = useTranslation('base');
+  const alert = useAlertStore((state) => state.setMessage);
 
   useEffect(() => {
     searchRainStatList(searchYear ,code.cityCd);
@@ -184,7 +185,7 @@ export default function RainStat() {
       decimalArray0: [1,2,3,4,5,6,7,8,9,10,11,12], // 0부터 시작
     })
     }else{
-      toast.error(t('excelDownErrMsg'));
+      alert(t('excelDownErrMsg'));
     }
   }
 
@@ -293,3 +294,4 @@ export default function RainStat() {
     </>
   );
 }
+
diff --git a/apps/wr/app/(with-layout)/stats/rswtStat/page.tsx b/apps/wr/app/(with-layout)/stats/rswtStat/page.tsx
index a2b62fc6a..b8c7d735c 100644
--- a/apps/wr/app/(with-layout)/stats/rswtStat/page.tsx
+++ b/apps/wr/app/(with-layout)/stats/rswtStat/page.tsx
@@ -1,8 +1,8 @@
-"use client";
+"use client";
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import type { RswtStatProps } from "@/app/store/stats/rswtStat";
-import { excelDownloadNumStyle, tableData, yearOptions } from "@/components/lib/func/commom";
+import { excelDownloadNumStyle, tableData, yearOptions } from "@/components/lib/func/common";
 import { type SheetParameter } from "@common/business_components/ui";
 import { downloadExcelFormat } from "@common/business_components";
 import {
@@ -15,7 +15,7 @@ import {
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button } from "@common/components/ui";
 import { useEffect, useState } from "react";
-import toast, { Toaster } from "react-hot-toast";
+import { useAlertStore } from "@/src/shared/lib";
 import { useTranslation } from "react-i18next";
 
 export default function RswtStat() {
@@ -27,6 +27,7 @@ export default function RswtStat() {
   );
 
   const { t } = useTranslation('base');
+  const alert = useAlertStore((state) => state.setMessage);
   useEffect(() => {
     searchRswtStatList(searchYear, code.cityCd, code.rswtBdstType);
   }, [searchRswtStatList, code.cityCd])
@@ -40,7 +41,7 @@ export default function RswtStat() {
           "개소": item.ctpvCnt,
           // "건축연면적(m³)": item.archArea,
           "처리용량(m³)": item.filtrTrtmfctCpct,
-          "물사용량(m³/년)": item.wtrUsqty,
+          // "물사용량(m³/년)": item.wtrUsqty,
           "중수도+대체수이용량(m³/년)": item.rswtAltSum,
           "중수도이용량(m³/년)": item.rswtrUsqty,
           "대체수이용량(m³/년)": item.altUswtrUtztnQnt,
@@ -58,11 +59,11 @@ export default function RswtStat() {
         data: (data as unknown as JSON[]) ?? [],
         fileName: "중수도재이용통계",
         sheetNameArray: ["Sheet1"],
-        headerRange: "A1:N1",
-        decimalArray0: [1,2,3,4,5,6,7,8,9,10,11,12,13], // 0부터 시작
+        headerRange: "A1:M1",
+        decimalArray0: [1,2,3,4,5,6,7,8,9,10,11,12], // 0부터 시작
       })
     } else {
-      toast.error(t("excelDownErrMsg"))
+      alert(t("excelDownErrMsg"))
     }
   }
 
@@ -173,15 +174,9 @@ export default function RswtStat() {
           } else if (i == 12) {
             const value = Number(item[12]) || 0;
             sidoData[i] = (Number(sidoData[i]) + value) as string | number;
-          } else if (i == 13) {
-            const value = Number(item[13]) || 0;
-            sidoData[i] = (Number(sidoData[i]) + value) as string | number;
           } else if (i == 14) {
             const value = Number(item[14]) || 0;
             sidoData[i] = (Number(sidoData[i]) + value) as string | number;
-          } else if (i == 16) {
-            const value = Number(item[16]) || 0;
-            sidoData[i] = (Number(sidoData[i]) + value) as string | number;
           } else {
             sidoData[i] = '';
           }
@@ -208,7 +203,7 @@ export default function RswtStat() {
     });
 
     const sidoSummaryList = Array.from(sidoDataMap.values());
-    const sidoTotalSummary = [['전국', '', '합계', 0, '', '', 0, '', '', 0, 0, 0, 0, 0, 0, '']];
+    const sidoTotalSummary = [['전국', '', '합계', 0, '', '', 0, '', '', 0, 0, 0, 0, '', 0]];
     sidoSummaryList.forEach((item: (string | number)[]) => {
       item.forEach((value: string | number, index: number) => {
         if (typeof value === 'number') {
@@ -225,7 +220,7 @@ export default function RswtStat() {
     const sheetArray: SheetParameter[] = [{
         data: excelData,
         headerNum: 3,
-        headerRange: "A1:P3",
+        headerRange: "A1:O3",
         sheetName: 'sheet1',
         startCol: 'A',
         decimalArray0: [1,2,3,4,5,6,7,8,9,10,11,12], // 0부터 시작
@@ -296,9 +291,9 @@ export default function RswtStat() {
           </ListDiv>
         </div>
       </div>
-      <Toaster position="top-center"></Toaster>
     </ContentsDiv>
   </>
   );
 }
 
+
diff --git a/apps/wr/app/api/common-codes/route.ts b/apps/wr/app/api/common-codes/route.ts
new file mode 100644
index 000000000..ae0c175cd
--- /dev/null
+++ b/apps/wr/app/api/common-codes/route.ts
@@ -0,0 +1,219 @@
+export const dynamic = "force-dynamic";
+import { SITE_ID } from "@/src/shared/config";
+import { NextResponse } from "next/server";
+
+export const revalidate = 86400; //60 * 60 * 24;
+
+type SelectDataType = {
+  text: string;
+  val: string;
+};
+
+type EnvPartSelectDataType = SelectDataType & {
+  adstDliStrCd: string;
+};
+
+const codeMapping = {
+  WR001: "bdstUsgCd",
+  WR002: "rswtBdstType",
+  WR003: "rainFcltCd",
+  WR004: "bdstGrntchClass",
+  WR005: "rswtPrscCdMthdCd",
+  WR006: "orgwtKndCd",
+  WR007: "ruseMngMtd",
+  WR008: "rusePrcsMthdCd",
+  WR009: "erctUswtrPrcsMeth",
+  WR010: "ruseFcltSpot",
+  WR011: "pplQulity",
+  WR012: "pplLenght",
+  WR013: "bdstFilterYn",
+  WR014: "rainRswtMng",
+  WR015: "rainFcltFlowRate",
+  WR016: "dmdUszCd",
+  WR017: "sewageInFcltUse",
+  WR018: "sewageOutFclttUse",
+  WR019: "htdPowerMthdCd",
+  WR020: "htdUtztnUsgCd",
+} as const;
+
+const defaultHeaders = {
+  accept: "application/json",
+  "X-Site-Id": SITE_ID,
+};
+
+function getServerBaseUrl() {
+  const port = process.env.PORT ?? process.env.NEXT_PUBLIC_PORT ?? "3000";
+  const proxyHost = process.env.NEXT_PUBLIC_PROXY_HOST;
+
+  if (process.env.NODE_ENV === "production" && process.env.HOSTNAME) {
+    return `http://${process.env.HOSTNAME}:${port}`;
+  }
+
+  return proxyHost || `http://localhost:${port}`;
+}
+
+async function fetchJson(url: string, cookieHeader?: string) {
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      ...defaultHeaders,
+      ...(cookieHeader ? { cookie: cookieHeader } : {}),
+    },
+    next: { revalidate },
+  });
+
+  if (!response.ok) {
+    const responseText = await response.text();
+    throw new Error(
+      `Failed to fetch ${url}: ${response.status} ${response.statusText}${
+        responseText ? ` - ${responseText}` : ""
+      }`
+    );
+  }
+
+  return response.json();
+}
+
+async function fetchOperationData(path: string, cookieHeader?: string) {
+  const json = await fetchJson(
+    `${getServerBaseUrl()}/operation-service${path}`,
+    cookieHeader
+  );
+  return json.data;
+}
+
+async function fetchCmsData(path: string, cookieHeader?: string) {
+  return fetchJson(`${getServerBaseUrl()}${path}`, cookieHeader);
+}
+
+async function fetchCommonCodesByKeys(keys: string[], cookieHeader?: string) {
+  const targets = [...new Set(keys)].filter(
+    (cd) => Boolean(codeMapping[cd as keyof typeof codeMapping])
+  );
+
+  const entries = await Promise.all(
+    targets.map(async (cd) => {
+      const mapping = codeMapping[cd as keyof typeof codeMapping];
+      const lwCd = await fetchCmsData(
+        `/cms-service/api/v1/lwpo-cds/up-cd/${cd}`,
+        cookieHeader
+      );
+      const list = Array.isArray(lwCd) ? lwCd : (lwCd.content ?? []);
+
+      return [
+        mapping,
+        list.map((it: any) => ({
+          text: it.lwpoCdNm,
+          val: it.lwpoCd,
+        })),
+      ] as const;
+    })
+  );
+
+  return Object.fromEntries(entries) as Record<string, SelectDataType[]>;
+}
+
+export async function GET(request: Request) {
+  try {
+    const cookieHeader = request.headers.get("cookie") ?? "";
+    const [sgg, city, rvbsn, mdmbsn, lgbsn, lclgvrnmnt, upCd] =
+      await Promise.all([
+        fetchOperationData("/addr/sgg", cookieHeader),
+        fetchOperationData("/addr/city", cookieHeader),
+        fetchOperationData("/addr/sarea", cookieHeader),
+        fetchOperationData("/addr/midArea", cookieHeader),
+        fetchOperationData("/addr/largeArea", cookieHeader),
+        fetchOperationData("/addr/govArea", cookieHeader),
+        fetchCmsData(
+          "/cms-service/api/v1/up-codes?keyword=&upCd=&cdSe=&useYn=Y&siteId=WR&page=0&size=100&sort=string",
+          cookieHeader
+        ),
+      ]);
+
+    const upWrCode: string[] = (upCd.content ?? [])
+      .filter((item: any) => item.upCd.slice(0, 2) === "WR")
+      .map((cd: any) => cd.upCd);
+
+    const lwCds = await fetchCommonCodesByKeys(upWrCode, cookieHeader);
+
+    const payload = {
+      sggCd: [
+        ...((sgg ?? []).map((item: any) => ({
+          text: item.gugun || "",
+          val: String(item.adstDstrCd) || "",
+        })) as SelectDataType[]),
+      ],
+      cityCd: [
+        { val: "0", text: "전체" },
+        ...((city ?? []).map((item: any) => ({
+          val: item.adstDstrCd,
+          text: item.sido,
+        })) as SelectDataType[]),
+      ],
+      rvbsnCd: [
+        { val: "0", text: "전체" },
+        ...((rvbsn ?? []).map((item: any) => ({
+          val: item.rvbsnCd,
+          text: item.rvbsn,
+        })) as SelectDataType[]),
+      ],
+      mdmbsnCd: [
+        { val: "0", text: "전체" },
+        ...((mdmbsn ?? []).map((item: any) => ({
+          val: item.rvbsnCd,
+          text: item.mdmbsn,
+        })) as SelectDataType[]),
+      ],
+      lgbsnCd: [
+        { val: "0", text: "전체" },
+        ...((lgbsn ?? []).map((item: any) => ({
+          val: item.rvbsnCd,
+          text: item.lgbsn,
+        })) as SelectDataType[]),
+      ],
+      lclgvrnmntCd: [
+        { val: "0", text: "전체", adstDliStrCd: "" },
+        ...((lclgvrnmnt ?? []).map((item: any) => ({
+          val: item.lclgvrnmntCd,
+          text: item.lclgvrnmntNm,
+          adstDliStrCd: item.adstDliStrCd || "",
+        })) as EnvPartSelectDataType[]),
+      ],
+      rainFcltCd: lwCds["rainFcltCd"] ?? [],
+      bdstUsgCd: lwCds["bdstUsgCd"] ?? [],
+      orgwtKndCd: lwCds["orgwtKndCd"] ?? [],
+      pplQulity: lwCds["pplQulity"] ?? [],
+      pplLenght: lwCds["pplLenght"] ?? [],
+      dmdUszCd: lwCds["dmdUszCd"] ?? [],
+      sewageOutFclttUse: lwCds["sewageOutFclttUse"] ?? [],
+      rainRswtMng: lwCds["rainRswtMng"] ?? [],
+      rainFcltFlowRate: lwCds["rainFcltFlowRate"] ?? [],
+      ruseMngMtd: lwCds["ruseMngMtd"] ?? [],
+      rusePrcsMthdCd: lwCds["rusePrcsMthdCd"] ?? [],
+      erctUswtrPrcsMeth: lwCds["erctUswtrPrcsMeth"] ?? [],
+      bdstGrntchClass: lwCds["bdstGrntchClass"] ?? [],
+      htdPowerMthdCd: lwCds["htdPowerMthdCd"] ?? [],
+      htdUtztnUsgCd: lwCds["htdUtztnUsgCd"] ?? [],
+      rswtBdstType: lwCds["rswtBdstType"] ?? [],
+      bdstTotalUsgType: (lwCds["bdstUsgCd"] ?? []).concat(lwCds["rswtBdstType"] ?? []),
+    };
+
+    return NextResponse.json(payload, {
+      headers: {
+        "Cache-Control": "s-maxage=86400, stale-while-revalidate=3600",
+      },
+    });
+  } catch (error) {
+    console.error("Failed to load common codes:", error);
+    const message =
+      error instanceof Error ? error.message : "Failed to load common codes";
+
+    return NextResponse.json(
+      {
+        message: "Failed to load common codes",
+        detail:message ,
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/apps/wr/app/api/proxy/[...url]/route.ts b/apps/wr/app/api/proxy/[...url]/route.ts
index cf6447b1a..d779aec83 100644
--- a/apps/wr/app/api/proxy/[...url]/route.ts
+++ b/apps/wr/app/api/proxy/[...url]/route.ts
@@ -15,9 +15,10 @@ import { NextResponse } from "next/server";
 const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
 const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
 const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
+const COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
 const REFRESH_TOKEN = process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
 const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL || "";
-const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "SN";
+const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "WR";
 
 async function handler(
   request: Request,
@@ -35,6 +36,7 @@ async function handler(
   // silent refresh
   if (isRefreshHandler) {
     const refreshToken = cookieStore.get(REFRESH_TOKEN);
+    console.log("refreshToken", refreshToken?.value);
     headers[CLAIM_NAME] = refreshToken?.value ?? "";
 
     if (!headers[CLAIM_NAME]) {
@@ -52,12 +54,11 @@ async function handler(
       headers,
       body: JSON.stringify(body),
     });
-
+// console.log(result);
     if (!result.ok) {
-      console.log("Invalid Credentials ");
       return NextResponse.json(
-        { message: "Invalid Credentials" },
-        { status: 401 },
+        { message: "first Invalid Credentials" },
+        { status: result.status },
       );
     }
 
@@ -72,11 +73,13 @@ async function handler(
       });
 
       if (refreshToken) {
-        cookieStore.set(REFRESH_TOKEN, refreshToken, {
+        response.cookies.set(REFRESH_TOKEN, refreshToken, {
           httpOnly: true,
-          sameSite: "lax",
+          sameSite: "lax", // 다른 사이트에서 들어오는 모든 요청에 대해 쿠키를 보내지 않는 가장 강력한 설정
+          domain: getCookieDomain(),
           path: "/",
         });
+        console.log("refresh cookie setting : " + refreshToken);
       }
 
       return response;
@@ -109,3 +112,14 @@ export async function PUT(
   const params = await props.params;
   return handler(request, params, "PUT");
 }
+
+function getCookieDomain(): string | undefined {
+  if (typeof window === "undefined") return undefined;
+
+  if (COOKIE_DOMAIN) return COOKIE_DOMAIN;
+
+  const { hostname } = window.location;
+  if (hostname === "localhost" || hostname === "127.0.0.1") return undefined;
+
+  return hostname;
+}
diff --git a/apps/wr/app/loading.tsx b/apps/wr/app/loading.tsx
index 80b268890..73624ba56 100644
--- a/apps/wr/app/loading.tsx
+++ b/apps/wr/app/loading.tsx
@@ -1,4 +1,5 @@
 export default function Loading() {
-    return <div>페이지 불러오는 중입니다...</div>;
+    // return <div>페이지 불러오는 중입니다...</div>;
+    return <></>
   }
   
\ No newline at end of file
diff --git a/apps/wr/app/store/common/auth/index.tsx b/apps/wr/app/store/common/auth/index.tsx
index b553f0d41..fe99a02ae 100644
--- a/apps/wr/app/store/common/auth/index.tsx
+++ b/apps/wr/app/store/common/auth/index.tsx
@@ -1,7 +1,8 @@
 import { fetchType, getFetchWithCount } from "@/components/lib/api";
 import { getUserInfo } from "@common/components/api";
 import { getCookie } from "@common/components/lib";
-import toast from "react-hot-toast";
+// import toast from "react-hot-toast";
+import { redirect } from 'next/navigation';
 
 export type authState = {
   auth: {
@@ -11,7 +12,7 @@ export type authState = {
     mdfcnAuthrtYn: string;
     delAuthrtYn: string;
     laeSeCd: string; // 지자체구분코드
-     myUUID?: string;
+    myUUID?: string;
   };
 };
 
@@ -31,7 +32,7 @@ export const authStateExport: authState = {
 
 export type authActions = {
   getMenuAuthrts: (menuCd: number) => void;
-  getLaeSeCdCheck: () => Promise<void>;
+  getLaeSeCdCheck: () => Promise<void>; // 로그인 사용자 지역코드 laeSeCd를 조회 후 상태 update
   getMyUUID: () => Promise<string |undefined>; 
 };
 export const authActionsExport: (set: any, get: any) => authActions = (
@@ -51,31 +52,33 @@ export const authActionsExport: (set: any, get: any) => authActions = (
             auth: {
               ...state.auth,
               mngAuthrtYn: response[0].mngAuthrtYn,
-              inqAuthrtYn: response[0].mngAuthrtYn,
-              regAuthrtYn: response[0].mngAuthrtYn,
-              mdfcnAuthrtYn: response[0].mngAuthrtYn,
-              delAuthrtYn: response[0].mngAuthrtYn,
+              inqAuthrtYn: response[0].inqAuthrtYn,
+              regAuthrtYn: response[0].regAuthrtYn,
+              mdfcnAuthrtYn: response[0].mdfcnAuthrtYn,
+              delAuthrtYn: response[0].delAuthrtYn,
             },
           };
         });
       } catch (e) {
-        toast.error(
-          "권한 정보를 가져오는 중 오류가 발생했습니다. 관리자에게 문의하세요."
-        );
+        // toast.error(
+        //   "권한 정보를 가져오는 중 오류가 발생했습니다. 관리자에게 문의하세요."
+        // );
         console.error("Error fetching menu authorities:", e);
+        redirect("/");
       }
     },
+    // 로그인 사용자 지역코드 laeSeCd를 조회 후 상태 update
     getLaeSeCdCheck: async () => {
       try {
         const current = get().auth.laeSeCd;
         if (current && current !== "") {
           return;
         }
-        const infoMe = await getUserInfo();
-        //console.log(infoMe);
+        const infoMe = await getUserInfo(); // 로그인 사용자의 정보 조회
+        // console.log(infoMe);
         const isLaeSeCd =
-          infoMe.laeSeCd.slice(0, 2) === "G3" ? infoMe.laeSeCd.slice(2) : "0";
-
+          infoMe.laeSeCd.slice(0, 2) === "G3" ? infoMe.laeSeCd.slice(2) : "0"; //G341830
+        // console.log("isLaeSeCd",isLaeSeCd); 
         set((state: authState) => ({
           ...state,
           auth: {
diff --git a/apps/wr/app/store/common/code/index.ts b/apps/wr/app/store/common/code/index.ts
index f6e28339c..5e6600960 100644
--- a/apps/wr/app/store/common/code/index.ts
+++ b/apps/wr/app/store/common/code/index.ts
@@ -21,12 +21,12 @@ const codeMApping = {
   WR002: "rswtBdstType",
   WR003: "rainFcltCd",
   WR004: "bdstGrntchClass",
-  WR005: "rswtPrscCdMthdCd", // 아직 디 못바꿈
-  WR006: "orgwtKndCd", //작업 완ㅛ
-  WR007: "ruseMngMtd", // 작업완료
-  WR008: "rusePrcsMthdCd", //w작업완료
-  WR009: "erctUswtrPrcsMeth", //w작업완료
-  WR010: "ruseFcltSpot", // inout은 yn 만 사용해야 함으로 해당 코드는 사용안함.
+  WR005: "rswtPrscCdMthdCd", 
+  WR006: "orgwtKndCd", 
+  WR007: "ruseMngMtd", 
+  WR008: "rusePrcsMthdCd", 
+  WR009: "erctUswtrPrcsMeth", 
+  WR010: "ruseFcltSpot", 
   WR011: "pplQulity",
   WR012: "pplLenght",
   WR013: "bdstFilterYn", // 사용 불가 yn만 사용해야함으로 해당코드 사용 안함
@@ -40,7 +40,6 @@ const codeMApping = {
 };
 export const getCommonUpCd = async (set: any) => {
   try {
-    let lwCdCode: Record<string, SelectDataType[]> = {};
     const upCd = await getFetchWithCount(
       fetchType.CS,
       "/cms-service/api/v1/up-codes?keyword=&upCd=&cdSe=&useYn=Y&siteId=WR&page=0&size=100&sort=string"
@@ -50,24 +49,9 @@ export const getCommonUpCd = async (set: any) => {
       .filter((item: any) => item.upCd.slice(0, 2) === "WR")
       .map((cd: any) => cd.upCd);
 
-    await Promise.all(
-      upWrCode.map(async (cd) => {
-        const mapping = codeMApping[cd as keyof typeof codeMApping];
-        if (!mapping) return;
+    await fetchCommonCodesByKeys(upWrCode);
 
-        const lwCd = await getFetchWithCount(
-          fetchType.CS,
-          `/cms-service/api/v1/lwpo-cds/up-cd/${cd}`
-        );
-
-        const list = Array.isArray(lwCd) ? lwCd : (lwCd.content ?? []);
-        lwCds[mapping] = list.map((it: any) => ({
-          text: it.lwpoCdNm,
-          val: it.lwpoCd,
-        }));
-      })
-    );
-    lwCdCode = lwCds;
+    const lwCdCode = lwCds;
     set((state: comCodeState) => ({
       code: {
         ...state.code,
@@ -77,6 +61,9 @@ export const getCommonUpCd = async (set: any) => {
         pplQulity: lwCdCode["pplQulity"] ?? [],
         pplLenght: lwCdCode["pplLenght"] ?? [],
         dmdUszCd: lwCdCode["dmdUszCd"] ?? [],
+        sewageOutFclttUse: lwCdCode["sewageOutFclttUse"] ?? [],
+        rainRswtMng: lwCdCode["rainRswtMng"] ?? [],
+        rainFcltFlowRate: lwCdCode["rainFcltFlowRate"] ?? [],
         ruseMngMtd: lwCdCode["ruseMngMtd"] ?? [],
         rusePrcsMthdCd: lwCdCode["rusePrcsMthdCd"] ?? [],
         erctUswtrPrcsMeth: lwCdCode["erctUswtrPrcsMeth"] ?? [],
@@ -92,6 +79,30 @@ export const getCommonUpCd = async (set: any) => {
     console.log("com code error ", e);
   }
 };
+
+const fetchCommonCodesByKeys = async (keys: string[]) => {
+  const targets = [...new Set(keys)].filter(
+    (cd) => Boolean(codeMApping[cd as keyof typeof codeMApping])
+  );
+
+  await Promise.all(
+    targets.map(async (cd) => {
+      const mapping = codeMApping[cd as keyof typeof codeMApping];
+      if (!mapping) return;
+
+      const lwCd = await getFetchWithCount(
+        fetchType.CS,
+        `/cms-service/api/v1/lwpo-cds/up-cd/${cd}`
+      );
+
+      const list = Array.isArray(lwCd) ? lwCd : (lwCd.content ?? []);
+      lwCds[mapping] = list.map((it: any) => ({
+        text: it.lwpoCdNm,
+        val: it.lwpoCd,
+      }));
+    })
+  );
+};
 //물재이용 주소 코드: devU01TX0FVVEgyMDI1MDgyNTEwMzkwNDExNjEwNTM=
 export const buildingType = {
   RST: "RST",
@@ -218,40 +229,42 @@ export const getEnvPartCd = async (set: any) => {
 
 export type comCodeState = {
   code: {
-    isInit: boolean;
-    chBuCd: SelectDataType[];
-    rainFcltCd: SelectDataType[];
-    bdstUsgCd: SelectDataType[];
-    cityCd: SelectDataType[];
-    sggCd: SelectDataType[];
-    rvbsnCd: SelectDataType[];
-    mdmbsnCd: SelectDataType[];
-    lgbsnCd: SelectDataType[];
-    lclgvrnmntCd: EnvPartSelectDataType[];
-    orgwtKndCd: SelectDataType[];
-    yn: SelectDataType[];
-    pplQulity: SelectDataType[];
-    pplLenght: SelectDataType[];
-    dmdUszCd: SelectDataType[];
+    isInit: boolean; // 초기화 여부
+    chBuCd: SelectDataType[]; // 변경사업코드
+    rainFcltCd: SelectDataType[]; // 빗물시설코드
+    bdstUsgCd: SelectDataType[]; // 건물용도코드
+    cityCd: SelectDataType[]; // 시도코드
+    sggCd: SelectDataType[]; // 시군구코드
+    rvbsnCd: SelectDataType[]; // 대권역코드
+    mdmbsnCd: SelectDataType[]; // 중권역코드
+    lgbsnCd: SelectDataType[]; // 단위유역(대영역)코드
+    lclgvrnmntCd: EnvPartSelectDataType[]; // 지방환경청코드
+    orgwtKndCd: SelectDataType[]; // 원수종류코드
+    yn: SelectDataType[]; // 여부코드
+    pplQulity: SelectDataType[]; // 관저질
+    pplLenght: SelectDataType[]; // 관연장
+    dmdUszCd: SelectDataType[]; // 용도별코드
+    sewageOutFclttUse: SelectDataType[]; // 하수재이용 장외코드
+    rainRswtMng: SelectDataType[]; // 운영관리형태코드
+    rainFcltFlowRate: SelectDataType[]; // 유량측정방법코드
     buildingType: {
-      RST: string;
-      RNB: string;
-      HTB: string;
-    };
-    ruseMngMtd: SelectDataType[];
-    ruseSeCd: SelectDataType[];
-    ruseBizMthdCd: SelectDataType[];
-    rusePrcsMthdCd: SelectDataType[];
-    erctUswtrPrcsMeth: SelectDataType[];
-    bdstFilterYn: SelectDataType[];
-    bdstIncenYn: SelectDataType[];
-    bdstGrntchClass: SelectDataType[];
-    // rswtPrscCdMthdCd: SelectDataType[];
-    htdPowerMthdCd: SelectDataType[];
-    htdUtztnUsgCd: SelectDataType[];
-    rswtBdstType: SelectDataType[];
-    bdstTotalUsgType: SelectDataType[];
-    userSiSggCd: string;
+      RST: string; // 중수도시설 구분
+      RNB: string; // 빗물이용시설 구분
+      HTB: string; // 온배수시설 구분
+    }; // 시설구분
+    ruseMngMtd: SelectDataType[]; // 재이용관리방식코드
+    ruseSeCd: SelectDataType[]; // 재이용구분코드
+    ruseBizMthdCd: SelectDataType[]; // 재이용사업방식코드
+    rusePrcsMthdCd: SelectDataType[]; // 재이용처리공법코드
+    erctUswtrPrcsMeth: SelectDataType[]; // 하수처리공법코드
+    bdstFilterYn: SelectDataType[]; // 여과시설여부코드
+    bdstIncenYn: SelectDataType[]; // 인센티브여부코드
+    bdstGrntchClass: SelectDataType[]; // 보조금지원대상분류코드
+    htdPowerMthdCd: SelectDataType[]; // 온배수발전방식코드
+    htdUtztnUsgCd: SelectDataType[]; // 온배수이용용도코드
+    rswtBdstType: SelectDataType[]; // 중수도건물유형코드
+    bdstTotalUsgType: SelectDataType[]; // 전체건물용도유형코드
+    userSiSggCd: string; // 사용자 시군구코드
   };
 };
 
@@ -274,6 +287,9 @@ export const comCodeStateExport: comCodeState = {
     pplLenght: lwCds["pplLenght"] ?? [],
     yn: yn,
     dmdUszCd: lwCds["dmdUszCd"] ?? [],
+    sewageOutFclttUse: lwCds["sewageOutFclttUse"] ?? [],
+    rainRswtMng: lwCds["rainRswtMng"] ?? [],
+    rainFcltFlowRate: lwCds["rainFcltFlowRate"] ?? [],
     buildingType: buildingType,
     ruseMngMtd: lwCds["ruseMngMtd"] ?? [],
     ruseSeCd: ruseSeCd,
@@ -295,10 +311,52 @@ export const comCodeStateExport: comCodeState = {
 export type comCodeActions = {
   returnCodeText: (val: string, codeName: string) => string;
   returnTextCode: (text: string, codeName: string) => string;
+  getCommonCodesByKeys: (keys: string[]) => Promise<void>;
+  initCommonCodes:  () => Promise<void>;
 };
 
 export const codeActionExport: (set: any, get:any) => comCodeActions = (set: any, get:any) => {
   return {
+    getCommonCodesByKeys: async (keys: string[]) => {
+      try {
+        await fetchCommonCodesByKeys(keys);
+        const lwCdCode = lwCds;
+
+        set((state: comCodeState) => ({
+          code: {
+            ...state.code,
+            rainFcltCd: lwCdCode["rainFcltCd"] ?? state.code.rainFcltCd,
+            bdstUsgCd: lwCdCode["bdstUsgCd"] ?? state.code.bdstUsgCd,
+            orgwtKndCd: lwCdCode["orgwtKndCd"] ?? state.code.orgwtKndCd,
+            pplQulity: lwCdCode["pplQulity"] ?? state.code.pplQulity,
+            pplLenght: lwCdCode["pplLenght"] ?? state.code.pplLenght,
+            dmdUszCd: lwCdCode["dmdUszCd"] ?? state.code.dmdUszCd,
+            sewageOutFclttUse:
+              lwCdCode["sewageOutFclttUse"] ?? state.code.sewageOutFclttUse,
+            rainRswtMng: lwCdCode["rainRswtMng"] ?? state.code.rainRswtMng,
+            rainFcltFlowRate:
+              lwCdCode["rainFcltFlowRate"] ?? state.code.rainFcltFlowRate,
+            ruseMngMtd: lwCdCode["ruseMngMtd"] ?? state.code.ruseMngMtd,
+            rusePrcsMthdCd:
+              lwCdCode["rusePrcsMthdCd"] ?? state.code.rusePrcsMthdCd,
+            erctUswtrPrcsMeth:
+              lwCdCode["erctUswtrPrcsMeth"] ?? state.code.erctUswtrPrcsMeth,
+            bdstGrntchClass:
+              lwCdCode["bdstGrntchClass"] ?? state.code.bdstGrntchClass,
+            htdPowerMthdCd:
+              lwCdCode["htdPowerMthdCd"] ?? state.code.htdPowerMthdCd,
+            htdUtztnUsgCd:
+              lwCdCode["htdUtztnUsgCd"] ?? state.code.htdUtztnUsgCd,
+            rswtBdstType: lwCdCode["rswtBdstType"] ?? state.code.rswtBdstType,
+            bdstTotalUsgType:
+              lwCdCode["bdstUsgCd"]?.concat(lwCdCode["rswtBdstType"] || []) ??
+              state.code.bdstTotalUsgType,
+          },
+        }));
+      } catch (e) {
+        console.log("selected common code error ", e);
+      }
+    },
     returnCodeText: (val: string, codeName: string) => {
 
       const codeList = get().code[codeName] || [];
@@ -311,5 +369,102 @@ export const codeActionExport: (set: any, get:any) => comCodeActions = (set: any
         const found = codeList.find((item) => item.text === text);
         return found ? found.val : text;
     },
+    initCommonCodes: async () => {
+      if (get().code.isInit) return;
+      const response = await fetch("/api/common-codes", {
+        method: "GET",
+        headers: {
+          accept: "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        let errorMessage = `공통 코드 조회 실패: ${response.status}`;
+
+        try {
+          const errorBody = await response.json();
+          if (errorBody?.detail) {
+            errorMessage += ` - ${errorBody.detail}`;
+          } else if (errorBody?.message) {
+            errorMessage += ` - ${errorBody.message}`;
+          }
+        } catch {
+          const errorText = await response.text();
+          if (errorText) {
+            errorMessage += ` - ${errorText}`;
+          }
+        }
+
+        console.error("initCommonCodes failed:", errorMessage);
+        throw new Error(errorMessage);
+      }
+
+      const data = await response.json();
+
+      lwCds["rainFcltCd"] = data.rainFcltCd ?? lwCds["rainFcltCd"] ?? [];
+      lwCds["bdstUsgCd"] = data.bdstUsgCd ?? lwCds["bdstUsgCd"] ?? [];
+      lwCds["orgwtKndCd"] = data.orgwtKndCd ?? lwCds["orgwtKndCd"] ?? [];
+      lwCds["pplQulity"] = data.pplQulity ?? lwCds["pplQulity"] ?? [];
+      lwCds["pplLenght"] = data.pplLenght ?? lwCds["pplLenght"] ?? [];
+      lwCds["dmdUszCd"] = data.dmdUszCd ?? lwCds["dmdUszCd"] ?? [];
+      lwCds["sewageOutFclttUse"] =
+        data.sewageOutFclttUse ?? lwCds["sewageOutFclttUse"] ?? [];
+      lwCds["rainRswtMng"] = data.rainRswtMng ?? lwCds["rainRswtMng"] ?? [];
+      lwCds["rainFcltFlowRate"] =
+        data.rainFcltFlowRate ?? lwCds["rainFcltFlowRate"] ?? [];
+      lwCds["ruseMngMtd"] = data.ruseMngMtd ?? lwCds["ruseMngMtd"] ?? [];
+      lwCds["rusePrcsMthdCd"] =
+        data.rusePrcsMthdCd ?? lwCds["rusePrcsMthdCd"] ?? [];
+      lwCds["erctUswtrPrcsMeth"] =
+        data.erctUswtrPrcsMeth ?? lwCds["erctUswtrPrcsMeth"] ?? [];
+      lwCds["bdstGrntchClass"] =
+        data.bdstGrntchClass ?? lwCds["bdstGrntchClass"] ?? [];
+      lwCds["htdPowerMthdCd"] =
+        data.htdPowerMthdCd ?? lwCds["htdPowerMthdCd"] ?? [];
+      lwCds["htdUtztnUsgCd"] =
+        data.htdUtztnUsgCd ?? lwCds["htdUtztnUsgCd"] ?? [];
+      lwCds["rswtBdstType"] =
+        data.rswtBdstType ?? lwCds["rswtBdstType"] ?? [];
+      lwCds["bdstTotalUsgType"] =
+        data.bdstTotalUsgType ?? lwCds["bdstTotalUsgType"] ?? [];
+
+      set((state) => ({
+        code: {
+          ...state.code,
+          sggCd: data.sggCd ?? state.code.sggCd,
+          cityCd: data.cityCd ?? state.code.cityCd,
+          rvbsnCd: data.rvbsnCd ?? state.code.rvbsnCd,
+          mdmbsnCd: data.mdmbsnCd ?? state.code.mdmbsnCd,
+          lgbsnCd: data.lgbsnCd ?? state.code.lgbsnCd,
+          lclgvrnmntCd: data.lclgvrnmntCd ?? state.code.lclgvrnmntCd,
+          rainFcltCd: data.rainFcltCd ?? state.code.rainFcltCd,
+          bdstUsgCd: data.bdstUsgCd ?? state.code.bdstUsgCd,
+          orgwtKndCd: data.orgwtKndCd ?? state.code.orgwtKndCd,
+          pplQulity: data.pplQulity ?? state.code.pplQulity,
+          pplLenght: data.pplLenght ?? state.code.pplLenght,
+          dmdUszCd: data.dmdUszCd ?? state.code.dmdUszCd,
+          sewageOutFclttUse:
+            data.sewageOutFclttUse ?? state.code.sewageOutFclttUse,
+          rainRswtMng: data.rainRswtMng ?? state.code.rainRswtMng,
+          rainFcltFlowRate:
+            data.rainFcltFlowRate ?? state.code.rainFcltFlowRate,
+          ruseMngMtd: data.ruseMngMtd ?? state.code.ruseMngMtd,
+          rusePrcsMthdCd:
+            data.rusePrcsMthdCd ?? state.code.rusePrcsMthdCd,
+          erctUswtrPrcsMeth:
+            data.erctUswtrPrcsMeth ?? state.code.erctUswtrPrcsMeth,
+          bdstGrntchClass:
+            data.bdstGrntchClass ?? state.code.bdstGrntchClass,
+          htdPowerMthdCd:
+            data.htdPowerMthdCd ?? state.code.htdPowerMthdCd,
+          htdUtztnUsgCd:
+            data.htdUtztnUsgCd ?? state.code.htdUtztnUsgCd,
+          rswtBdstType: data.rswtBdstType ?? state.code.rswtBdstType,
+          bdstTotalUsgType:
+            data.bdstTotalUsgType ?? state.code.bdstTotalUsgType,
+          isInit: true,
+        },
+      }));
+    },
   };
 };
diff --git a/apps/wr/app/store/common/searchCode/index.ts b/apps/wr/app/store/common/searchCode/index.ts
index 1478b10a8..f1c46820d 100644
--- a/apps/wr/app/store/common/searchCode/index.ts
+++ b/apps/wr/app/store/common/searchCode/index.ts
@@ -18,6 +18,7 @@ export const comFcltStateExport: comFcltState = {
     bzmnNo: "",
     dmdCoNm: "",
     daddr: "",
+    daddr2: "",
     telno: "",
     rgtr: "",
     useUsgCd: "",
@@ -39,7 +40,8 @@ export const comFcltStateExport: comFcltState = {
     cdtnv: 0,
     crmty: 0,
     rmrk: "",
-    reqDt: ""
+    reqDt: "",
+    zip: "",
   },
   constCostRes:[],
   rateFeeRes:[],
@@ -51,17 +53,19 @@ export type comFcltState = {
   searchFclts: pubHasuType[];
   demandCompList: DemandCompType[];
   checkDemand: DemandCompType;
-  constCostRes:conCostFeeType[],
+  constCostRes:conCostFeeType[], // 표준사업비 (공사비 산정표)
   rateFeeRes:rateFeeType[],
   
 };
- type comFcltActions = {
+type comFcltActions = {
   getSwtrmtFcltNm: (searchNm: string) => void;
   getDemandCompList: (searchNm: string, cnt: number) => void;
   regDemandCompany: (data: DemandCompType) => Promise<string>;
   updateDemandCompany: (data: DemandCompType) => Promise<string>;
   getConstCostFee:  (year: string) => void;
   getRateFee:  (year: string) => void;
+  getRateFeeRtn: (year: string) => Promise<rateFeeType[]>;
+  getConstCostFeeRtn: (year: string) => Promise<conCostFeeType[]>;
 };
 
 export const comFcltSearchAction: (set: any) => comFcltActions = (set: any) => {
@@ -149,6 +153,7 @@ export const comFcltSearchAction: (set: any) => comFcltActions = (set: any) => {
         return "수요처 정보 변경 중 오류가 발생했습니다.";
       }
     },
+    // 요율정보 조회 : ONSEMIRO_NEW.EM_STD_COST_INC_EXP_RT 설치관리표준사업비 부대경비요율
     getRateFee: async (year: string) => {
       try {
         const url = `/prcsFclt/CstRt/${year}`;
@@ -164,7 +169,22 @@ export const comFcltSearchAction: (set: any) => comFcltActions = (set: any) => {
       } catch (e) {
         console.log(" error ", e);
       }
-    },getConstCostFee:  async (year: string) => {
+    },
+    // 요율정보 조회 : ONSEMIRO_NEW.EM_STD_COST_INC_EXP_RT 설치관리표준사업비 부대경비요율
+    // 팝업에서 연도 변경하여 볼 수 있도록 데이터를 return한다.
+    getRateFeeRtn: async (year: string) => {
+      try {
+        const url = `/prcsFclt/CstRt/${year}`;
+        const rateFeeRes = await getFetch(fetchType.COMMON, url);
+
+        return rateFeeRes;
+      } catch (e) {
+        console.log(" error ", e);
+        return [];
+      }
+    },
+    // 공사금액 (공사비 산정표) 조회 : ONSEMIRO_NEW.EM_STD_COST_REUSE 설치관리표준사업비 재이용시설 공사비
+    getConstCostFee:  async (year: string) => {
       try {
         const url = `/prcsFclt/CstRuse/${year}`;
         const constCost = await getFetch(fetchType.COMMON, url);
@@ -176,10 +196,22 @@ export const comFcltSearchAction: (set: any) => comFcltActions = (set: any) => {
           }
 
         });
-      }catch (e) {
-        console.log('getConstCostFee  ', e)
+      } catch (e) {
+        console.log('getConstCostFee  ', e);
+        
       }
 
+    },
+    // 공사금액 (공사비 산정표) 조회 : ONSEMIRO_NEW.EM_STD_COST_REUSE 설치관리표준사업비 재이용시설 공사비
+    getConstCostFeeRtn:  async (year: string): Promise<conCostFeeType[]> => {
+      try {
+        const url = `/prcsFclt/CstRuse/${year}`;
+        const constCost = await getFetch(fetchType.COMMON, url);
+        return constCost;
+      } catch (e) {
+        console.log('getConstCostFee  ', e);
+        return [];
+      }
     }
   };
 };
diff --git a/apps/wr/app/store/common/type/header.tsx b/apps/wr/app/store/common/type/header.tsx
index 75bf29433..9f116a9d1 100644
--- a/apps/wr/app/store/common/type/header.tsx
+++ b/apps/wr/app/store/common/type/header.tsx
@@ -3,6 +3,7 @@ export type CommonTableProps = {
   title: string;
   upName?: string;
   upSequnce?: number;
+  widthPercent?: number;
   row?: number;
   rowSpan?: number;
   colSpan?: number;
@@ -14,6 +15,7 @@ export type TableUpperProps = {
     title: string;
     upName?: string;
     upSequnce?: number;
+    widthPercent?: number;
     edit?:boolean;
     visible?:boolean; 
     rowSpan?: number;
diff --git a/apps/wr/app/store/map/pbnstMap/index.tsx b/apps/wr/app/store/map/pbnstMap/index.tsx
index 18f9abfe2..80eb2697a 100644
--- a/apps/wr/app/store/map/pbnstMap/index.tsx
+++ b/apps/wr/app/store/map/pbnstMap/index.tsx
@@ -9,13 +9,15 @@ import { excelHasuMapParsing } from "./excel";
 export const pbnMapTableSize = 20;
 
 const hasuListFetch = async (
+  get: any,
+  set: any,
   page: number,
   pageTotal: number,
   reurnValue: ReturnType,
   searchNm?: string
 ) => {
   let url = `/prcsFclt/ruseInfo/${page}/${pageTotal}/`;
-  const checkWrRegListRes = await checkWrRegList();
+  const checkWrRegListRes = await checkWrRegList(get, set);
 
   if (reurnValue.partValue === "A") {
     url += `${reurnValue.partValue}/${
@@ -92,7 +94,7 @@ export const pbnMapStateExport: pbnMapState = {
   },
 };
 
-export const pbnMapActionsExport: (set: any) => pbnMapActions = (set: any) => {
+export const pbnMapActionsExport: (set: any, get: any) => pbnMapActions = (set: any, get: any) => {
   return {
     pbnMapInit: async (
       page: number,
@@ -100,7 +102,7 @@ export const pbnMapActionsExport: (set: any) => pbnMapActions = (set: any) => {
       reurnValue: ReturnType
     ) => {
       try {
-        const pubMapRes = await hasuListFetch(page, pageTotal, reurnValue);
+        const pubMapRes = await hasuListFetch(get, set, page, pageTotal, reurnValue);
         set((state: pbnMapState) => {
           return {
             ...state,
@@ -144,7 +146,7 @@ export const pbnMapActionsExport: (set: any) => pbnMapActions = (set: any) => {
       txt: string,
     ) => {
       try {
-        const hasuMapRes = await hasuListFetch(page, pageTotal, reurnValue, txt);
+        const hasuMapRes = await hasuListFetch(get, set, page, pageTotal, reurnValue, txt);
         if (isExcel) {
           const hasuMapExcelList = excelHasuMapParsing(
             hasuMapRes
diff --git a/apps/wr/app/store/map/splyPop/index.tsx b/apps/wr/app/store/map/splyPop/index.tsx
index a3fcba03b..7ea586e63 100644
--- a/apps/wr/app/store/map/splyPop/index.tsx
+++ b/apps/wr/app/store/map/splyPop/index.tsx
@@ -1,6 +1,7 @@
 import { getFetch } from "@/components/lib/api";
 import type { FacilityInfo, SubsInfo } from "./type";
 import { DEV_URL_FO } from "@/components/lib/config";
+import { SITE_ID } from "@/src/shared/config";
 
 const checkWrRegList = async () => {
   const wrRegList = await getFetch("wr", `/reuseFc/pubFc`);
@@ -26,6 +27,7 @@ const getRuseFclt = async (
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      "X-Site-Id": SITE_ID,
     },
     body: JSON.stringify(ruseList),
   });
diff --git a/apps/wr/app/store/matDmd/coMatRvw/headList.tsx b/apps/wr/app/store/matDmd/coMatRvw/headList.tsx
index 16d2107c6..180e5dc5c 100644
--- a/apps/wr/app/store/matDmd/coMatRvw/headList.tsx
+++ b/apps/wr/app/store/matDmd/coMatRvw/headList.tsx
@@ -3,197 +3,55 @@ import type { CommonTableProps } from "../../common/type/header";
 
 
 export const coRvwHeadListExport: CommonTableProps[]= [
-  {
-    id: "cityText",
-    title: "시도",
-    visible: true,
-  },
-  {
-    id: "sggText",
-    title: "시군구",
-    visible: true,
-  },
-  {
-    id: "dmdCoNm",
-    title: "회사명",
-    visible: true,
-  },
-  {
-    id: "daddr",
-    title: "주소",
-    visible: true,
-  },
-  {
-    id: "telno",
-    title: "전화번호",
-    visible: true,
-  },
-  {
-    id: "dmndTmng", 
-    title: "신청일자",
-    visible: true,
-  },
-  {
-    id: "splyFcltFlg", 
-    title: "진행상태",
-    visible: true,
-  },
+  { id: "cityText", title: "시도", visible: true, widthPercent: 12, },
+  { id: "sggText", title: "시군구", visible: true, widthPercent: 8, },
+  { id: "dmdCoNm", title: "회사명", visible: true, widthPercent: 14, },
+  { id: "daddr", title: "주소", visible: true, widthPercent: 28, },
+  { id: "telno", title: "전화번호", visible: true, widthPercent: 12, },
+  { id: "dmndTmng", title: "신청일자", visible: true, widthPercent: 12, },
+  { id: "splyFcltFlg", title: "진행상태", visible: true, widthPercent: 14, },
 ];
 
 // id는 다확인해야함
 export const coRvwNodeListExport: CommonTableProps[] = [
-  {
-    id: "ctpv",
-    title: "시도",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "sgg",
-    title: "시군구",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "coNm",
-    title: "회사명",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "addr",
-    title: "공장주소",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "telNo",
-    title: "전화번호",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "regDt", //바꾸기
-    title: "신청일자",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "state", //바꾸기
-    title: "진행상태",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
+  { id: "ctpv", title: "시도", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "sgg", title: "시군구", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "coNm", title: "회사명", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "addr", title: "공장주소", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "telNo", title: "전화번호", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "regDt", title: "신청일자", visible: true, row: 1, rowSpan: 1, colSpan: 1, }, //바꾸기
+  { id: "state", title: "진행상태", visible: true, row: 1, rowSpan: 1, colSpan: 1, }, //바꾸기
 ];
 
 export const constCostHeadListExport: CommonTableProps[] = [
-  {
-    id: "gubun",
-    title: "구분",
-    visible: true,
-  },
-  {
-    id: "500",
-    title: "500",
-    visible: true,
-  },
-  {
-    id: "1000",
-    title: "1,000",
-    visible: true,
-  },
-  {
-    id: "2000",
-    title: "2,000",
-    visible: true,
-  },
-  {
-    id: "3000", //바꾸기
-    title: "3,000",
-    visible: true,
-  },
-  {
-    id: "5000", //바꾸기
-    title: "5,000",
-    visible: true,
-  },
-  {
-    id: "10000", //
-    title: "10,000",
-    visible: true,
-  },
-  {
-    id: "20000", //
-    title: "20,000",
-    visible: true,
-  },
-  {
-    id: "30000", //
-    title: "30,000",
-    visible: true,
-  },
-  {
-    id: "50000", //
-    title: "50,000",
-    visible: true,
-  },
-  {
-    id: "100000", //바꾸기
-    title: "100,000",
-    visible: true,
-  },
+  { id: "gubun", title: "구분", visible: true, row: 0, rowSpan: 2, colSpan: 1 },
+  { id: "A", title: "처리시설용량(m³)", visible: true, row: 0, rowSpan: 1, colSpan: 10 },
+  { id: "500", title: "500", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "1000", title: "1,000", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "2000", title: "2,000", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "3000", title: "3,000", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "5000", title: "5,000", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "10000", title: "10,000", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "20000", title: "20,000", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "30000", title: "30,000", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "50000", title: "50,000", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "100000", title: "100,000", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
 ];
 
 export const rateFeeHeadListExport: CommonTableProps[] = [
-  {
-    id: "gubun",
-    title: "공사비/구분",
-    visible: true,
-  },
-  {
-    id: "BD",
-    title: "기본조사설계비",
-    visible: true,
-  },
-  {
-    id: "WD",
-    title: "실시설계비",
-    visible: true,
-  },
-  {
-    id: "SE",
-    title: "공사감리비",
-    visible: true,
-  },
-  {
-    id: "CE",
-    title: "시설부대비",
-    visible: true,
-  },
+  { id: "gubun", title: "공사비/구분", visible: true, },
+  { id: "BD", title: "기본조사설계비", visible: true, },
+  { id: "WD", title: "실시설계비", visible: true, },
+  { id: "SE", title: "공사감리비", visible: true, },
+  { id: "CE", title: "시설부대비", visible: true, },
 ];
 
 export const usageProcData = [
-  { usage: "청소", process: "총인처리시설+염소소독" },
-  { usage: "화장실용수", process: "총인처리시설+염소소독" },
-  { usage: "세척", process: "총인처리시설+UV소독" },
-  { usage: "살수", process: "총인처리시설+UV소독" },
-  { usage: "조경", process: "총인처리시설+UV소독" },
-  { usage: "농업", process: "총인처리시설+UV소독" },
-  { usage: "하천", process: "총인처리시설+UV소독" },
-  { usage: "지하수", process: "전처리시설+RO" },
-  { usage: "공업", process: "전처리시설+RO" },
+  { useUsgCd: "01", usage: "청소화장실용수", process: "총인처리시설+염소소독" },
+  { useUsgCd: "02", usage: "세척살수용수", process: "총인처리시설+UV소독" },
+  { useUsgCd: "03", usage: "조경용수", process: "총인처리시설+UV소독" },
+  { useUsgCd: "05", usage: "지하수충전", process: "전처리시설+RO" },
+  { useUsgCd: "06", usage: "농업용수", process: "총인처리시설+UV소독" },
+  { useUsgCd: "07", usage: "하천등유지용수", process: "총인처리시설+UV소독" },
+  { useUsgCd: "08", usage: "공업용수", process: "전처리시설+RO" },
 ];
diff --git a/apps/wr/app/store/matDmd/coMatRvw/index.tsx b/apps/wr/app/store/matDmd/coMatRvw/index.tsx
index 0c58db9a6..afeb36fc1 100644
--- a/apps/wr/app/store/matDmd/coMatRvw/index.tsx
+++ b/apps/wr/app/store/matDmd/coMatRvw/index.tsx
@@ -1,4 +1,5 @@
 import { fetchType, getFetchWithCount, putFectch } from "@/components/lib/api";
+import { DEFAULT_LIST_SIZE } from "@/src/shared/config";
 import type { CommonTableProps } from "../../common/type/header";
 import {
   constCostHeadListExport,
@@ -12,6 +13,7 @@ const coRvwHeadList = coRvwHeadListExport;
 const coRvwNodeList = coRvwNodeListExport;
 const rateFeeHeadList = rateFeeHeadListExport;
 const constCostHeadList = constCostHeadListExport;
+
 export type coRvwState = {
   coRvw: {
     isInit: boolean;
@@ -66,7 +68,7 @@ type coRvwActions = {
     sggCd: string
   ) => void;
 };
-
+// 수요매칭검토현황 목록
 const coMatInit = async (
   pageNo: number,
   pageCnt: number,
@@ -99,9 +101,10 @@ export const coRvwActionsExport: (set: any) => coRvwActions = (set: any) => {
         },
       }));
     },
+    // 수요처 매칭 검토 저장
     coMatRvwUpdate: async (
-      splyCd: string,
-      dmdCd: string,
+      splyCd: string,  // 공공기관재사용시설아이디 - 하수재이용시설id : pbnst_ruse_fclt_id
+      dmdCd: string,   // 수요정보id dmd_info_id 
       data: DedMatUpdateType
     ): Promise<string> => {
       try {
@@ -117,7 +120,7 @@ export const coRvwActionsExport: (set: any) => coRvwActions = (set: any) => {
 
           const coMatRvwRes = await coMatInit(
             1,
-            10,
+            DEFAULT_LIST_SIZE,
             new Date().getFullYear().toString(),
             new Date().getFullYear().toString()
           );
@@ -139,6 +142,7 @@ export const coRvwActionsExport: (set: any) => coRvwActions = (set: any) => {
         return "매칭 검토 저장 오류입니다.";
       }
     },
+    // 수요처 매칭 검토 현황
     coMatRvwSearch: async (
       pageNo: number,
       pageCnt: number,
@@ -147,6 +151,7 @@ export const coRvwActionsExport: (set: any) => coRvwActions = (set: any) => {
       sggCd: string,
       dmdCoNm: string
     ) => {
+      // 수요처 년도별 정보 검색
       let url = `/reuseFc/request/infoList/Sub/${pageNo}/${pageCnt}/${startYear}/${endYear}`;
 
       if (sggCd.length > 0) {
@@ -160,7 +165,7 @@ export const coRvwActionsExport: (set: any) => coRvwActions = (set: any) => {
         url += `/0`;
       }
 
-      console.log(" url ", url);
+      // console.log(" url ", url);
       const coMatRvwRes = await getFetchWithCount(fetchType.WR, url);
 
       return set((state: coRvwState) => ({
diff --git a/apps/wr/app/store/matDmd/coMatRvw/type.tsx b/apps/wr/app/store/matDmd/coMatRvw/type.tsx
index ec0f0e09c..a505777ff 100644
--- a/apps/wr/app/store/matDmd/coMatRvw/type.tsx
+++ b/apps/wr/app/store/matDmd/coMatRvw/type.tsx
@@ -60,47 +60,47 @@ const DemandCoSchema = z.object({
 });
 
 const DemandCstSchema = z.object({
-  dmdInfoSn: z.number().nullish(),
-  usgPrcsProcs: z.string().nullish(),
-  cstrnCst: z.number().default(0),
-  fcltSbsdCstrnCst: z.number().default(0),
-  prcsFcltCpctCstrnCst: z.number().default(0),
+  dmdInfoSn: z.number().nullish(), // 수요정보 일련번호
+  usgPrcsProcs: z.string().nullish(), // 용도에 따른 처리공정
+  cstrnCst: z.number().default(0), // 공급관로 표준공사비（백만원）
+  fcltSbsdCstrnCst: z.number().default(0), // 시설부대경비
+  prcsFcltCpctCstrnCst: z.number().default(0), // 처리시설용량에 따른 공사비（백만원) - 처리시설용량공사비용
 });
 
 export const DmdCoReqSchema = z.object({
-  cityText: z.string().nullish(),
-  sggText: z.string().nullish(),
-  dmdInfoSn: z.number().default(0),
-  dmdInfoId: z.string().default(''),
-  dmndTmng: z.coerce.date().nullish(),
-  dmndQty: z.number().nullish(), // null 또는 undefined 허용
-  blgcOxygDmndQnt: z.number().nullish(),
-  wntUntprc: z.number().nullish(),
-  grssClfg: z.number().nullish(),
-  combResdch: z.number().nullish(),
-  trbt: z.number().nullish(),
-  smll: z.string().nullish(),
-  crmty: z.number().nullish(),
-  tn: z.number().nullish(),
-  tph: z.number().nullish(),
-  ph: z.string().nullish(),
-  clIonQnt: z.number().nullish(),
-  cdtnv: z.number().nullish(),
-  rmrk: z.string().nullish(),
-  useUsgCd: z.string().nullish(),
-  mtchnCmptnYmd: z.string().nullish(),
-  rvwCmptnYmd: z.string().nullish(),
-  demandCo: DemandCoSchema.nullish(),
-  demandMatching: DemandMatchingSchema.nullish(),
-  demandCst: DemandCstSchema.nullish(),
-  ruseUtztnFcltNm: z.string().nullish(),
+  cityText: z.string().nullish(), // 시도
+  sggText: z.string().nullish(), // 시군구
+  dmdInfoSn: z.number().default(0), // 수요정보 일련번호
+  dmdInfoId: z.string().default(''), // 수요정보 ID
+  dmndTmng: z.coerce.date().nullish(), // 요구시기
+  dmndQty: z.number().nullish(), // 요구수량(m³/일)
+  blgcOxygDmndQnt: z.number().nullish(), // 생물학적 산소요구량(BOD)(mg/L)
+  wntUntprc: z.number().nullish(), // 희망단가(원/m³)
+  grssClfg: z.number().nullish(), // 총대장균군수(개/100㎖)
+  combResdch: z.number().nullish(), // 결합잔류염소(mg/L)
+  trbt: z.number().nullish(), // 탁도(NTU)
+  smll: z.string().nullish(), // 냄새
+  crmty: z.number().nullish(), // 색도(도)
+  tn: z.number().nullish(), // 총질소(T-N)(mg/L)
+  tph: z.number().nullish(), // 총인(T-P)(mg/L)
+  ph: z.string().nullish(), // 수소이온농도(pH)
+  clIonQnt: z.number().nullish(), // 염화물(mgCL/L)
+  cdtnv: z.number().nullish(), // 전기전도도(㎲/cm)
+  rmrk: z.string().nullish(), // 비고
+  useUsgCd: z.string().nullish(), // 사용용도
+  mtchnCmptnYmd: z.string().nullish(), // 매칭완료일
+  rvwCmptnYmd: z.string().nullish(), // 검토완료일
+  demandCo: DemandCoSchema.nullish(), // 수요처 정보
+  demandMatching: DemandMatchingSchema.nullish(), // 매칭 정보
+  demandCst: DemandCstSchema.nullish(), // 공사비 정보
+  ruseUtztnFcltNm: z.string().nullish(), // 공급처명
   splyCndtList: z.array(
     z.object({
-      ruseUtztnFcltNm: z.string(),
-      ruseUtztnFcltCd: z.string(),
+      ruseUtztnFcltNm: z.string(), // 공급처명
+      ruseUtztnFcltCd: z.string(), // 공급처 코드
     }).nullish()
-  ).nullish(),
-  totalConstCost: z.number().nullish(),
+  ).nullish(), // 공급처 후보지 목록
+  totalConstCost: z.number().nullish(), // 처리시설 총사업비(백만원)
 });
 
 export type DmdCoReqType = z.infer<typeof DmdCoReqSchema>;
@@ -159,4 +159,4 @@ export type rateFeeType = {
 export type SupplyCandidate = {
   ruseUtztnFcltNm: string;
   ruseUtztnFcltCd: string;
-};
\ No newline at end of file
+};
diff --git a/apps/wr/app/store/matDmd/coSttn/excel.tsx b/apps/wr/app/store/matDmd/coSttn/excel.tsx
index 84c982292..38becb2d6 100644
--- a/apps/wr/app/store/matDmd/coSttn/excel.tsx
+++ b/apps/wr/app/store/matDmd/coSttn/excel.tsx
@@ -1,5 +1,9 @@
 import type { SelectDataType } from "@common/business_components/ui";
 import moment from "moment";
+import {
+  formatKoreanPhoneNumber,
+  formatValueByPattern,
+} from "@/components/lib/func/formatUtils";
 
 export const excelCoSttnParsing = (data: any[],sidoCode:SelectDataType[] , sggCode:SelectDataType[]): string[][] => {
     const excelExportData: string[][] = [];
@@ -9,8 +13,8 @@ export const excelCoSttnParsing = (data: any[],sidoCode:SelectDataType[] , sggCo
             sggCode.find((sgg) => sgg.val === item.sggCd.toString().trim() )?.text ?? "",
             item.dmdCoNm ?? "",
             item.daddr ?? "",
-            String(item.dmdInfoId ?? ""),
-            item.telno ?? "",
+            formatValueByPattern("000-00-00000-0000", String(item.dmdInfoId ?? "")),
+            formatKoreanPhoneNumber(String(item.telno ?? "")),
               moment(item.regDt).format("YYYY-MM-DD") ?? ""
         ]);
     });
diff --git a/apps/wr/app/store/matDmd/coSttn/headList.tsx b/apps/wr/app/store/matDmd/coSttn/headList.tsx
index b3b87aac8..7786be658 100644
--- a/apps/wr/app/store/matDmd/coSttn/headList.tsx
+++ b/apps/wr/app/store/matDmd/coSttn/headList.tsx
@@ -6,6 +6,7 @@ export const sttnHeadListType = z.array(
   id: z.string(),
   title: z.string(),
   visible: z.boolean(),
+  widthPercent: z.number().optional(),
   })
 );
 
@@ -14,90 +15,20 @@ export const coRegExcel = z.object({
 });
 
 export const coSttHeadListExport: z.infer<typeof sttnHeadListType> = [
-  {
-    id: "cityText",
-    title: "시도",
-    visible: true,
-  },
-  {
-    id: "sggText",
-    title: "시군구",
-    visible: true,
-  },
-  {
-    id: "dmdCoNm",
-    title: "회사명",
-    visible: true,
-  },
-  {
-    id: "daddr",
-    title: "주소",
-    visible: true,
-  },
-  {
-    id: "dmdInfoId",
-    title: "사업자번호",
-    visible: true,
-  },
-  {
-    id: "telno",
-    title: "전화번호",
-    visible: true,
-  },
-  {
-    id: "regDt",
-    title: "등록일자",
-    visible: true,
-  },
+  { id: "cityText", title: "시도", visible: true, widthPercent: 8 },
+  { id: "sggText", title: "시군구", visible: true, widthPercent: 8 },
+  { id: "dmdCoNm", title: "회사명", visible: true, widthPercent: 18 },
+  { id: "daddr", title: "주소", visible: true, widthPercent: 28 },
+  { id: "dmdInfoId", title: "사업자번호", visible: true, widthPercent: 14 },
+  { id: "telno", title: "전화번호", visible: true, widthPercent: 12 },
+  { id: "regDt", title: "등록일자", visible: true, widthPercent: 12, },
 ];
 
 export const coSttNodeListExport: CommonTableProps[] = [
-  {
-    id: "cityText",
-    title: "시도",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "sggText",
-    title: "시군구",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "dmdCoNm",
-    title: "회사명",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "daddr",
-    title: "주소",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "dmdInfoId",
-    title: "사업자번호",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "telno",
-    title: "전화번호",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-];
\ No newline at end of file
+  { id: "cityText", title: "시도", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "sggText", title: "시군구", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "dmdCoNm", title: "회사명", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "daddr", title: "주소", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "dmdInfoId", title: "사업자번호", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "telno", title: "전화번호", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+];
diff --git a/apps/wr/app/store/matDmd/drgtSttn/headList.tsx b/apps/wr/app/store/matDmd/drgtSttn/headList.tsx
index dcdc655b5..34fb7db6f 100644
--- a/apps/wr/app/store/matDmd/drgtSttn/headList.tsx
+++ b/apps/wr/app/store/matDmd/drgtSttn/headList.tsx
@@ -15,87 +15,17 @@ export const drgtZod = z.object({
 })
 
 export const drgtHeadListExport: CommonTableProps[] = [
-  {
-    id: "ctpvCd",
-    title: "시도",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "sggNm",
-    title: "시군구",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "normal",
-    title: "정상(횟수)",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "attention",
-    title: "관심(횟수)",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "caution",
-    title: "주의(횟수)",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "warning",
-    title: "관심+주의(횟수)",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "ranking",
-    title: "가뭄순위",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
+  { id: "ctpvCd", title: "시도", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "sggNm", title: "시군구", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "normal", title: "정상(횟수)", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "attention", title: "관심(횟수)", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "caution", title: "주의(횟수)", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "warning", title: "관심+주의(횟수)", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "ranking", title: "가뭄순위", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
 ];
 
 export const drgtDetailHeadListExport: CommonTableProps[] = [
-  {
-    id: "year",
-    title: "년",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "month",
-    title: "월",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "drgtState",
-    title: "가뭄상태",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-]
\ No newline at end of file
+  { id: "year", title: "년", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "month", title: "월", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+  { id: "drgtState", title: "가뭄상태", visible: true, row: 1, rowSpan: 1, colSpan: 1, },
+]
diff --git a/apps/wr/app/store/matDmd/ldrmntCoSttn/headList.tsx b/apps/wr/app/store/matDmd/ldrmntCoSttn/headList.tsx
index bb7c79024..88dbf1e4d 100644
--- a/apps/wr/app/store/matDmd/ldrmntCoSttn/headList.tsx
+++ b/apps/wr/app/store/matDmd/ldrmntCoSttn/headList.tsx
@@ -46,359 +46,51 @@ export const ldrmntZod = z.object({
 })
 
 export const ldrmntHeadListExport: CommonTableProps[] = [
- {
-    id: "ctpvCd",
-    title: "시도",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "sggCd",
-    title: "시군구",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "dmdCoNm",
-    title: "회사명",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "fctryAddr",
-    title: "회사주소",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "fctryMngNo",
-    title: "공장관리번호",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-   {
-    id: "telno",
-    title: "전화번호",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
+ { id: "ctpvCd", title: "시도", visible: true, row: 1, rowSpan: 1, colSpan: 1, widthPercent: 8, },
+  { id: "sggCd", title: "시군구", visible: true, row: 1, rowSpan: 1, colSpan: 1, widthPercent: 8 },
+  { id: "dmdCoNm", title: "회사명", visible: true, row: 1, rowSpan: 1, colSpan: 1, widthPercent: 18 },
+  { id: "fctryAddr", title: "회사주소", visible: true, row: 1, rowSpan: 1, colSpan: 1, widthPercent: 30 },
+  { id: "fctryMngNo", title: "공장관리번호", visible: true, row: 1, rowSpan: 1, colSpan: 1, widthPercent: 18 },
+  { id: "telno", title: "전화번호", visible: true, row: 1, rowSpan: 1, colSpan: 1, widthPercent: 18 },
 ]
 
 export const ldrmntNodeListExport: CommonTableProps[] = [
-  {
-    id: "ctpvCd",
-    title: "시도",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "sggCd",
-    title: "시군구",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "mngInstNm",
-    title: "관리기관",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "dmdCoNm",
-    title: "회사명",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "fctrySe",
-    title: "공장구분",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "cmpxNm",
-    title: "단지명",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "fndnSe",
-    title: "설립구분",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "mvnShp",
-    title: "입주형태",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "hldSe",
-    title: "보유구분",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "frstAprvYmd",
-    title: "최초승인일",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "frstRegYmd",
-    title: "최초등록일",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "regSe",
-    title: "등록구분",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "regYmd",
-    title: "등록일",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "telno",
-    title: "전화번호",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "maleEmpCnt",
-    title: "남자종업원",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "fmaleEmpCnt",
-    title: "여자종업원",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "frgnrMaleEmpCnt",
-    title: "외국인남자종업원",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "frgnrFmaleEmpCnt",
-    title: "외국인여자종업원",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "totalEmpCnt",
-    title: "종업원합계",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "prdctnItem",
-    title: "생산품",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "splyMtrl",
-    title: "원자재",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "fctryScl",
-    title: "공장규모",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "usgRgn",
-    title: "용도지역",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "ldcg",
-    title: "지목",
-    visible: true,
-    row: 1,
-    rowSpan: 1, 
-    colSpan: 1,
-  },
-  {
-    id: "usgRgnArea",
-    title: "용지면적(m²)",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "mnftrFcltArea",
-    title: "제조시설면적",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "sbsdFcltArea",
-    title: "부대시설면적",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "archArea",
-    title: "건축면적",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "knwlIndstCntrNm",
-    title: "지식산업센터명",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "rprsTpbiz",
-    title: "대표업종",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "tpbizNm",
-    title: "업종명",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "tpbizCd",
-    title: "업종코드",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "cycl",
-    title: "차수",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "corpAddr",
-    title: "법인주소",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "esntlIdx",
-    title: "필지수",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "fctryAddr",
-    title: "공장주소",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "fctryLotnoAddr",
-    title: "공장주소_지번",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-  {
-    id: "fctryMngNo",
-    title: "공장관리번호",
-    visible: true,
-    row: 1,
-    rowSpan: 1,
-    colSpan: 1,
-  },
-];
\ No newline at end of file
+  { id: "ctpvCd", title: "시도", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "sggCd", title: "시군구", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "mngInstNm", title: "관리기관", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "dmdCoNm", title: "회사명", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "fctrySe", title: "공장구분", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "cmpxNm", title: "단지명", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "fndnSe", title: "설립구분", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "mvnShp", title: "입주형태", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "hldSe", title: "보유구분", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "frstAprvYmd", title: "최초승인일", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "frstRegYmd", title: "최초등록일", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "regSe", title: "등록구분", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "regYmd", title: "등록일", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "telno", title: "전화번호", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "maleEmpCnt", title: "남자종업원", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "fmaleEmpCnt", title: "여자종업원", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "frgnrMaleEmpCnt", title: "외국인남자종업원", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "frgnrFmaleEmpCnt", title: "외국인여자종업원", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "totalEmpCnt", title: "종업원합계", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "prdctnItem", title: "생산품", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "splyMtrl", title: "원자재", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "fctryScl", title: "공장규모", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "usgRgn", title: "용도지역", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "ldcg", title: "지목", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "usgRgnArea", title: "용지면적(m²)", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "mnftrFcltArea", title: "제조시설면적", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "sbsdFcltArea", title: "부대시설면적", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "archArea", title: "건축면적", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "knwlIndstCntrNm", title: "지식산업센터명", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "rprsTpbiz", title: "대표업종", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "tpbizNm", title: "업종명", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "tpbizCd", title: "업종코드", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "cycl", title: "차수", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "corpAddr", title: "법인주소", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "esntlIdx", title: "필지수", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "fctryAddr", title: "공장주소", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "fctryLotnoAddr", title: "공장주소_지번", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+  { id: "fctryMngNo", title: "공장관리번호", visible: true, row: 1, rowSpan: 1, colSpan: 1 },
+];
diff --git a/apps/wr/app/store/matDmd/ruseCaseMng/headList.tsx b/apps/wr/app/store/matDmd/ruseCaseMng/headList.tsx
index c201f5d28..003b32caa 100644
--- a/apps/wr/app/store/matDmd/ruseCaseMng/headList.tsx
+++ b/apps/wr/app/store/matDmd/ruseCaseMng/headList.tsx
@@ -2,358 +2,63 @@ import type { SelectDataType } from "@common/business_components/ui";
 import type { TableUpperProps } from "../../common/type/header";
 
 export const ruseCaseHeadListExport: TableUpperProps[] = [
-  {
-    id: "ruseBizNm",
-    title: "사업명",
-    visible: true,
-    row: 0,
-    rowSpan: 2,
-  },
-  {
-    id: "bizBgngDate",
-    title: "사업시작년",
-    visible: true,
-    row: 0,
-    rowSpan: 2,
-  },
-  {
-    id: "bizEndDate",
-    title: "사업종료년",
-    visible: true,
-    row: 0,
-    rowSpan: 2,
-  },
-  {
-    id: "c",
-    title: "공급처",
-    visible: true,
-    row: 0,
-    colSpan: 3,
-  },
-  {
-    id: "splyFcltKnd",
-    title: "시설종류",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "splyFcltNm",
-    title: "공급처명",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "splyFcltCpct",
-    title: "시설용량(m³/일)",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "g",
-    title: "수요처",
-    visible: true,
-    row: 0,
-    colSpan: 2,
-  },
-  {
-    id: "dmdFcltNm",
-    title: "수요처명",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "dmdFcltAddr",
-    title: "주소",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "q",
-    title: "재이용시설",
-    visible: true,
-    row: 0,
-    colSpan: 5,
-  },
-  {
-    id: "ruseFcltCpct",
-    title: "시설용량(m³/일)",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "ruseFcltPplLen",
-    title: "관로(km)",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "ruseFcltUsg",
-    title: "용도",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "ruseFcltSplyCpct",
-    title: "공급량(m³/일)",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "ruseFcltPrcsMsrc",
-    title: "처리공법",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "k",
-    title: "보증수질",
-    visible: true,
-    row: 0,
-    colSpan: 13,
-  },
-  {
-    id: "grnteWqUsg",
-    title: "용도별",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "grnteWqGrssClfg",
-    title: "총대장균군수​(개/100ml)",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "grnteWqCombResdch",
-    title: "결합잔류염소(mg/L)",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "grnteWqTrbt",
-    title: "탁도(NTU)",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "grnteWqBod",
-    title: "생물학적​산소요구량(BOD)(mg/L)​",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "grnteWqSmll",
-    title: "냄새​",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "grnteWqCrmty",
-    title: "색도​",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "grnteWqTn",
-    title: "총질소(T-N)(mg/L)​",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "grnteWqTp",
-    title: "총인(T-P)(mg/L)",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "grnteWqPh",
-    title: "수소이온농도(pH)​",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "grnteWqClIonQnt",
-    title: "염화물",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "grnteWqCndctStat",
-    title: "전기전도도​(㎲/cm)",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "grnteWqRmrk",
-    title: "비고​",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "h",
-    title: "소요사업비(백만원)",
-    visible: true,
-    row: 0,
-    colSpan: 14,
-  },
-  {
-    id: "reqBizGrssCst",
-    title: "총",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizReuseFcltCst",
-    title: "토목재이용시설",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizPplCst",
-    title: "토목관로",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizArchCst",
-    title: "건축",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizMchnCst",
-    title: "기계",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizMtrngCst",
-    title: "전기・계측",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizGisCst",
-    title: "GIS・DB",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizCctvCst",
-    title: "CCTV",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizCmcnCst",
-    title: "시공및준공",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizWstCst",
-    title: "페기물",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizDesignCst",
-    title: "설계비",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizSpvsCst",
-    title: "감리비",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizSbsdCst",
-    title: "시설부대비",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "reqBizEtc",
-    title: "기타",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "i",
-    title: "자원조달계획(백만원)",
-    visible: true,
-    row: 0,
-    colSpan: 5,
-  },
-  {
-    id: "prcmPlanGrssCst",
-    title: "총",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "prcmPlanNlep",
-    title: "국비",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "prcmPlanLcep",
-    title: "지방비",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "prcmPlanBrdnCst",
-    title: "원인자부담",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "prcmPlanEcqrRt",
-    title: "국고비율(%)",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "j",
-    title: "사업비정산(백만원)",
-    visible: true,
-    row: 0,
-    colSpan: 5,
-  },
-  {
-    id: "clclnGrssCst",
-    title: "총",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "clclnNlep",
-    title: "국비",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "clclnLcep",
-    title: "지방비",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "clclnBrdnCst",
-    title: "원인자부담",
-    visible: true,
-    row: 1,
-  },
-  {
-    id: "clclnEcqrRt",
-    title: "국고비율(%)",
-    visible: true,
-    row: 1,
-  },
+  { id: "ruseBizNm", title: "사업명", visible: true, row: 0, rowSpan: 2, widthPercent: 6, },
+  { id: "bizBgngDate", title: "사업시작년", visible: true, row: 0, rowSpan: 2, widthPercent: 2, },
+  { id: "bizEndDate", title: "사업종료년", visible: true, row: 0, rowSpan: 2, widthPercent: 2, },
+  { id: "c", title: "공급처", visible: true, row: 0, colSpan: 3, },
+  { id: "splyFcltKnd", title: "시설종류", visible: true, row: 1, widthPercent: 2, },
+  { id: "splyFcltNm", title: "공급처명", visible: true, row: 1, widthPercent: 5, },
+  { id: "splyFcltCpct", title: "시설용량\n(m³/일)", visible: true, row: 1, widthPercent: 3, },
+  { id: "g", title: "수요처", visible: true, row: 0, colSpan: 2, },
+  { id: "dmdFcltNm", title: "수요처명", visible: true, row: 1, widthPercent: 4, },
+  { id: "dmdFcltAddr", title: "주소", visible: true, row: 1, widthPercent: 7, },
+  { id: "q", title: "재이용시설", visible: true, row: 0, colSpan: 5, },
+  { id: "ruseFcltCpct", title: "시설용량\n(m³/일)", visible: true, row: 1, widthPercent: 1.5, },
+  { id: "ruseFcltPplLen", title: "관로(km)", visible: true, row: 1, widthPercent: 1.5, },
+  { id: "ruseFcltUsg", title: "용도", visible: true, row: 1, widthPercent: 3, },
+  { id: "ruseFcltSplyCpct", title: "공급량\n(m³/일)", visible: true, row: 1, widthPercent: 2, },
+  { id: "ruseFcltPrcsMsrc", title: "처리공법", visible: true, row: 1, widthPercent: 3, },
+  { id: "k", title: "보증수질", visible: true, row: 0, colSpan: 13, },
+  { id: "grnteWqUsg", title: "용도별", visible: true, row: 1, widthPercent: 2, },
+  { id: "grnteWqGrssClfg", title: "총대장균군수​\n(개/100ml)", visible: true, row: 1, widthPercent: 1.92, },
+  { id: "grnteWqCombResdch", title: "결합잔류염소\n(mg/L)", visible: true, row: 1, widthPercent: 1.92, },
+  { id: "grnteWqTrbt", title: "탁도(NTU)", visible: true, row: 1, widthPercent: 1.92, },
+  { id: "grnteWqBod", title: "생물학적​산소요구량\n(BOD)(mg/L)​", visible: true, row: 1, widthPercent: 1.92, },
+  { id: "grnteWqSmll", title: "냄새​", visible: true, row: 1, widthPercent: 1.92, },
+  { id: "grnteWqCrmty", title: "색도​", visible: true, row: 1, widthPercent: 1.92, },
+  { id: "grnteWqTn", title: "총질소(T-N)(mg/L)​", visible: true, row: 1, widthPercent: 1.92, },
+  { id: "grnteWqTp", title: "총인(T-P)(mg/L)", visible: true, row: 1, widthPercent: 1.92, },
+  { id: "grnteWqPh", title: "수소이온농도(pH)​", visible: true, row: 1, widthPercent: 1.92, },
+  { id: "grnteWqClIonQnt", title: "염화물", visible: true, row: 1, widthPercent: 1.92, },
+  { id: "grnteWqCndctStat", title: "전기전도도​(㎲/cm)", visible: true, row: 1, widthPercent: 1.92, },
+  { id: "grnteWqRmrk", title: "비고​", visible: true, row: 1, widthPercent: 1.92, },
+  { id: "h", title: "소요사업비(백만원)", visible: true, row: 0, colSpan: 14, },
+  { id: "reqBizGrssCst", title: "총", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizReuseFcltCst", title: "토목재이용시설", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizPplCst", title: "토목관로", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizArchCst", title: "건축", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizMchnCst", title: "기계", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizMtrngCst", title: "전기・계측", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizGisCst", title: "GIS・DB", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizCctvCst", title: "CCTV", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizCmcnCst", title: "시공및준공", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizWstCst", title: "페기물", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizDesignCst", title: "설계비", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizSpvsCst", title: "감리비", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizSbsdCst", title: "시설부대비", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "reqBizEtc", title: "기타", visible: true, row: 1, widthPercent: 1.43, },
+  { id: "i", title: "자원조달계획(백만원)", visible: true, row: 0, colSpan: 5, },
+  { id: "prcmPlanGrssCst", title: "총", visible: true, row: 1, widthPercent: 1.6, },
+  { id: "prcmPlanNlep", title: "국비", visible: true, row: 1, widthPercent: 1.6, },
+  { id: "prcmPlanLcep", title: "지방비", visible: true, row: 1, widthPercent: 1.6, },
+  { id: "prcmPlanBrdnCst", title: "원인자부담", visible: true, row: 1, widthPercent: 1.6, },
+  { id: "prcmPlanEcqrRt", title: "국고비율(%)", visible: true, row: 1, widthPercent: 1.6, },
+  { id: "j", title: "사업비정산(백만원)", visible: true, row: 0, colSpan: 5, },
+  { id: "clclnGrssCst", title: "총", visible: true, row: 1, widthPercent: 2, },
+  { id: "clclnNlep", title: "국비", visible: true, row: 1, widthPercent: 1.5, },
+  { id: "clclnLcep", title: "지방비", visible: true, row: 1, widthPercent: 1.5, },
+  { id: "clclnBrdnCst", title: "원인자부담", visible: true, row: 1, widthPercent: 1.5, },
+  { id: "clclnEcqrRt", title: "국고비율(%)", visible: true, row: 1, widthPercent: 1.5, },
 ];
 
 export const ruseUtzType: SelectDataType[] = [
diff --git a/apps/wr/app/store/matDmd/ruseRvwHstry/headList.tsx b/apps/wr/app/store/matDmd/ruseRvwHstry/headList.tsx
index e2873d573..c7b1c2c53 100644
--- a/apps/wr/app/store/matDmd/ruseRvwHstry/headList.tsx
+++ b/apps/wr/app/store/matDmd/ruseRvwHstry/headList.tsx
@@ -2,71 +2,18 @@ import type {  TableUpperProps } from "../../common/type/header";
 
 
 export const ruseHstryHeadListExport:TableUpperProps[]= [
-  {
-    id: "cityText",
-    title: "시도",
-    visible: true,
-
-  },
-  {
-    id: "sggText",
-    title: "시군구",
-    visible: true,
-  },
-  {
-    id: "dmdCoNm",
-    title: "회사명",
-    visible: true,
-  },
-  {
-    id: "daddr",
-    title: "주소",
-    visible: true,
-  },
-  {
-    id: "telno",
-    title: "전화번호",
-    visible: true,
-  },
-  {
-    id: "dmndTmng", //바꾸기
-    title: "신청일자",
-    visible: true,
-  },
-  {
-    id: "rvwCmptnYmd", //바꾸기
-    title: "검토일자",
-    visible: true,
-  },
-  {
-    id: "mtchnCmptnYmd", //바꾸기
-    title: "매칭 완료일자",
-    visible: true,
-  },
-  {
-    id: "ruseUtztnFcltNm", //바꾸기
-    title: "공급처",
-    visible: true,
-  },
-  {
-    id: "dmndQty", //바꾸기
-    title: "요구수량(m³/일)",
-    visible: true,
-  },
-  {
-    id: "useUsgCd", //바꾸기
-    title: "사용용도",
-    visible: true,
-  },
-  {
-    id: "splyFcltFlg", //바꾸기
-    title: "진행상태",
-    visible: true,
-  },
-  {
-    id: "completeYn", //바꾸기
-    title: "매칭완료 여부",
-    visible: true,
-  },
+  { id: "cityText", title: "시도", visible: true, widthPercent: 8, },
+  { id: "sggText", title: "시군구", visible: true, widthPercent: 6, },
+  { id: "dmdCoNm", title: "회사명", visible: true, widthPercent: 10, },
+  { id: "daddr", title: "주소", visible: true, widthPercent: 16, },
+  { id: "telno", title: "전화번호", visible: true, widthPercent: 8, },
+  { id: "dmndTmng", title: "신청일자", visible: true, widthPercent: 7, }, //바꾸기
+  { id: "rvwCmptnYmd", title: "검토일자", visible: true, widthPercent: 7, }, //바꾸기
+  { id: "mtchnCmptnYmd", title: "매칭 완료일자", visible: true, widthPercent: 7, }, //바꾸기
+  { id: "ruseUtztnFcltNm", title: "공급처", visible: true, widthPercent: 10, }, //바꾸기
+  { id: "dmndQty", title: "요구수량\n(m³/일)", visible: true, widthPercent: 6, }, //바꾸기
+  { id: "useUsgCd", title: "사용용도", visible: true, widthPercent: 5, }, //바꾸기
+  { id: "splyFcltFlg", title: "진행상태", visible: true, widthPercent: 5, }, //바꾸기
+  { id: "completeYn", title: "매칭완료 여부", visible: true, widthPercent: 5, }, //바꾸기
 ];
 
diff --git a/apps/wr/app/store/matDmd/ruseRvwHstry/index.tsx b/apps/wr/app/store/matDmd/ruseRvwHstry/index.tsx
index c490dc399..352cbcadc 100644
--- a/apps/wr/app/store/matDmd/ruseRvwHstry/index.tsx
+++ b/apps/wr/app/store/matDmd/ruseRvwHstry/index.tsx
@@ -1,5 +1,4 @@
 import { fetchType, getFetchWithCount, postFectch, putFectch } from "@/components/lib/api";
-import toast from "react-hot-toast";
 import type {
   TableUpperProps
 } from "../../common/type/header";
@@ -52,7 +51,7 @@ type ruseHstryActions = {
     endYear: string,
     sggCd?: string
   ) => void;
-  ruseRvwCalUpdate: (data: DmdCoReqType) => void;
+  ruseRvwCalUpdate: (data: DmdCoReqType) => Promise<string>;
   ruseRvwSearch: (
     pageNo: number,
     pageCnt: number,
@@ -69,7 +68,7 @@ type ruseHstryActions = {
     endYear: string,
     sggCd: string
   ) => void;
-  ruseRvwComplete:( data: number[]) => void;
+  ruseRvwComplete:( data: number[]) => Promise<string>;
 };
 
 const irvwHistInit = async (
@@ -119,6 +118,8 @@ export const ruseHstryActionsExport: (set: any) => ruseHstryActions = (
       }));
     },
     ruseRvwCalUpdate: async (data: DmdCoReqType) => {
+      const successMessage = "매칭 계산 저장이 완료입니다.";
+      const failMessage = "매칭 계산 저장이 오류입니다.";
       try {
 
         const updatedData = addRgtrAndMdfrToDemandObj(data);
@@ -127,14 +128,13 @@ export const ruseHstryActionsExport: (set: any) => ruseHstryActions = (
          updatedData
         );
         if (update.status === 200) {
-          toast.success("매칭 계산 저장이 완료입니다.");
           const rvwHistRes = await irvwHistInit(
             1,
             13,
             new Date().getFullYear().toString(),
             new Date().getFullYear().toString(),
           );
-          return set((state: ruseHstryState) => ({
+          set((state: ruseHstryState) => ({
             ...state,
             ruseHist: {
               ...state.ruseHist,
@@ -142,10 +142,12 @@ export const ruseHstryActionsExport: (set: any) => ruseHstryActions = (
               rvwHistRes: rvwHistRes.data,
               rvwHistCount:rvwHistRes.count            },
           }));
+          return successMessage;
         }
+        return failMessage;
       } catch (e) {
-        toast.error("매칭 계산 저장이 오류입니다.");
         console.log(e);
+        return failMessage;
       }
     },
     ruseRvwSearch: async (
@@ -210,6 +212,8 @@ export const ruseHstryActionsExport: (set: any) => ruseHstryActions = (
       }
     },
     ruseRvwComplete: async (data: number[]) => {
+      const successMessage = "매칭완료가  완료되었습니다.";
+      const failMessage = "매칭 완료 처리 중 오류가 발생했습니다.";
       try {
         const complet = await postFectch(
           `/reuseFc/request/completeCheck`,
@@ -217,7 +221,6 @@ export const ruseHstryActionsExport: (set: any) => ruseHstryActions = (
           fetchType.WR
         );
         if (complet.status === 200) {
-          toast.success("매칭완료가  완료되었습니다.");
           const rvwHistRes = await irvwHistInit(
             1,
             13,
@@ -225,7 +228,7 @@ export const ruseHstryActionsExport: (set: any) => ruseHstryActions = (
             new Date().getFullYear().toString(),
           );
 
-          return set((state: ruseHstryState) => ({
+          set((state: ruseHstryState) => ({
             ...state,
             ruseHist: {
               ...state.ruseHist,
@@ -233,10 +236,12 @@ export const ruseHstryActionsExport: (set: any) => ruseHstryActions = (
               rvwHistCount:rvwHistRes.count  
             },
           }));
+          return successMessage;
         }
+        return failMessage;
       } catch (e) {
         console.log(" error ", e);
-        toast.error("매칭 완료 처리 중 오류가 발생했습니다.");
+        return failMessage;
       }
     },
   };
diff --git a/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/excel.tsx b/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/excel.tsx
index 2a4150a30..dc7612292 100644
--- a/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/excel.tsx
+++ b/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/excel.tsx
@@ -1,4 +1,4 @@
-import { TEST_UUID } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
+import { TEST_UUID } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import type { SelectDataType } from "@common/business_components";
 import type { rainChkZodType } from ".";
 import {
@@ -6,8 +6,7 @@ import {
   isInvalidNumber,
   parseRawValue,
 } from "@/components/lib/func/excelFunc";
-import toast from "react-hot-toast";
-import { codeToText, textToCode } from "@/components/lib/func/commom";
+import { codeToText, textToCode } from "@/components/lib/func/common";
 export const useTypes = [
   "조경용수",
   "청소화장실용수",
@@ -232,13 +231,21 @@ export const excelToRainChkData = (excelData: any, year: string) => {
         }
       });
     });
-  } else {
-    toast.error("데이터가 없습니다. 점검 데이터를 확인해주세요.");
   }
 
   if (issues.length > 0) {
-    return { rainChkgdData: [], issues };
+    return { rainChkgdData: [], issues, message: "" };
   }
 
-  return { rainChkgdData, issues: [] };
+  if (rainChkgdData.length === 0) {
+    return {
+      rainChkgdData: [],
+      issues: [],
+      message: "데이터가 없습니다. 점검 데이터를 확인해주세요.",
+    };
+  }
+
+  return { rainChkgdData, issues: [], message: "" };
 };
+
+
diff --git a/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx b/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx
index b615b6532..c70b821af 100644
--- a/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx
+++ b/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx
@@ -124,7 +124,7 @@ export const rainMainHeadNmExport: chHeadType[] = [
 export const rainRuseHeadNmExport: chHeadType[] = [
   { headNm: "useQuilty", text: "이용수질(필요시)", length: 3 },
   { headNm: "feeHist", text: "과태료 부과내역", length: 3 },
-  { headNm: "ruseWater", text: "연간대체수 이용량(m³)", length: 13 },
+  { headNm: "ruseWater", text: "연간빗물이용량(m³)", length: 13 },
   { headNm: "detailQulity", text: "분기", length: 11 },
 ];
 
@@ -133,72 +133,29 @@ export const rainSplHeadNmExport: chHeadType[] = [
   { headNm: "useQuilty", text: "이용수질(필요시)", length: 3 },
   { headNm: "feeHist", text: "과태료 부과내역", length: 3 },
   { headNm: "detailQulity", text: "분기", length: 11 },
-  { headNm: "splWater", text: "연간빗물 이용량(m³)", length: 13 },
+  { headNm: "splWater", text: "연간대체수이용량(m³)", length: 13 },
 ];
 
 export const rainChkgdnHeadListExport: TableUpperProps[] = [
-  { id: "order", title: "순번", mergeCell: true },
-  { id: "checkBox", title: "선택", mergeCell: true },
-  { id: "cityText", title: "시도", mergeCell: true },
-  { id: "sggText", title: "시군구", mergeCell: true },
-  { id: "bdstNm", title: "시설명", mergeCell: true },
-  { id: "operMngCdText", title: "운영관리형태", mergeCell: true },
-  { id: "oilqMeasMthdText", title: "유량측정방법", mergeCell: true },
-  { id: "anlOperCst", title: "연간운영비(원/년)", mergeCell: true },
-  { id: "dtfcltCpct", title: "빗물저류조용량(m³)", mergeCell: true },
-  { id: "chckYmd", title: "점검일", mergeCell: true },
-  { id: "utztnUsgCdText", title: "이용용도" },
-  { id: "totalSplyUswtrUtztnQnt", title: "연간대체수이용량(m³)" },
-  { id: "totalRuseFcltUtztnQnt", title: "연간빗물이용량(m³)" },
-  {
-    id: "ph",
-    title: "수소이온농도(pH)",
-    upName: "useQuilty",
-    upSequnce: 1,
-    type: "number",
-    edit: true,
-  },
-  {
-    id: "trbt",
-    title: "탁도(NTU)",
-    upName: "useQuilty",
-    upSequnce: 2,
-    type: "number",
-    edit: true,
-  },
-  {
-    id: "grssClfg",
-    title: "총대장균군수(개/mg)",
-    upName: "useQuilty",
-    upSequnce: 3,
-    type: "number",
-    edit: true,
-  },
-  
-  {
-    id: "vltnDt",
-    title: "부과일(위반일)",
-    upName: "feeHist",
-    upSequnce: 1,
-    type: "text",
-    edit: true,
-  },
-  {
-    id: "vltnMttr",
-    title: "위반사항",
-    upName: "feeHist",
-    upSequnce: 2,
-    type: "text",
-    edit: true,
-  },
-  {
-    id: "levyAmt",
-    title: "부과금액(천원)",
-    upName: "feeHist",
-    upSequnce: 3,
-    type: "text",
-    edit: true,
-  },
+  { id: "order", title: "순번", mergeCell: true, widthPercent: 4 },
+  { id: "checkBox", title: "선택", mergeCell: true, widthPercent: 4 },
+  { id: "cityText", title: "시도", mergeCell: true, widthPercent: 5 },
+  { id: "sggText", title: "시군구", mergeCell: true, widthPercent: 5 },
+  { id: "bdstNm", title: "시설명", mergeCell: true, widthPercent: 7 },
+  { id: "operMngCdText", title: "운영관리형태", mergeCell: true, widthPercent: 6 },
+  { id: "oilqMeasMthdText", title: "유량측정방법", mergeCell: true, widthPercent: 6 },
+  { id: "anlOperCst", title: "연간운영비(원/년)", mergeCell: true, widthPercent: 7 },
+  { id: "dtfcltCpct", title: "빗물저류조용량(m³)", mergeCell: true, widthPercent: 6 },
+  { id: "chckYmd", title: "점검일", mergeCell: true, widthPercent: 5 },
+  { id: "utztnUsgCdText", title: "이용용도", widthPercent: 5 },
+  { id: "totalSplyUswtrUtztnQnt", title: "연간대체수이용량(m³)", widthPercent: 7 },
+  { id: "totalRuseFcltUtztnQnt", title: "연간빗물이용량(m³)", widthPercent: 7 },
+  { id: "ph", title: "수소이온농도(pH)", upName: "useQuilty", upSequnce: 1, type: "number", edit: true, widthPercent: 5 },
+  { id: "trbt", title: "탁도(NTU)", upName: "useQuilty", upSequnce: 2, type: "number", edit: true, widthPercent: 4 },
+  { id: "grssClfg", title: "총대장균군수(개/100㎖)", upName: "useQuilty", upSequnce: 3, type: "number", edit: true, widthPercent: 5 },
+  { id: "vltnDt", title: "부과일(위반일)", upName: "feeHist", upSequnce: 1, type: "text", edit: true, widthPercent: 5 },
+  { id: "vltnMttr", title: "위반사항", upName: "feeHist", upSequnce: 2, type: "text", edit: true, widthPercent: 6 },
+  { id: "levyAmt", title: "부과금액(천원)", upName: "feeHist", upSequnce: 3, type: "text", edit: true, widthPercent: 5 },
 ];
 
 export const ruseHeadListExport: TableUpperProps[] = [
diff --git a/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/index.tsx b/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/index.tsx
index 9c36c4b57..42b1022df 100644
--- a/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/index.tsx
+++ b/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/index.tsx
@@ -1,4 +1,4 @@
-import { buildingType } from "@/app/store/common/code";
+import { buildingType } from "@/app/store/common/code";
 import type { TableUpperProps } from "@/app/store/common/type/header";
 import { TEST_UUID } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import {
@@ -10,7 +10,6 @@ import {
   putFectch,
 } from "@/components/lib/api";
 import type { SelectDataType } from "@common/business_components/ui";
-import toast from "react-hot-toast";
 import { z } from "zod";
 import { buildingToExcelType } from "./excel";
 import {
@@ -67,15 +66,15 @@ type rainChkgdnActions = {
     sggCd: string,
     searchTxt: string
   ) => void;
-  rainChkDetilUpdate(rainChk: rainChkZodType[] ,year:string) : Promise<void>;
-  rainChkGuidUpdate(rainChk: rainChkZodType): Promise<void>;
+  rainChkDetilUpdate(rainChk: rainChkZodType[] ,year:string) : Promise<string>;
+  rainChkGuidUpdate(rainChk: rainChkZodType): Promise<string>;
   rainChkExcelDownload(
     sidoCode: SelectDataType[],
     sggCode: SelectDataType[],
     sggCd:string
   ): Promise<void>;
-  rainChkExcelDataUPload(excelData: rainChkZodType[] ,year :string,laeSeCd:string) : Promise<void>;
-  rainChkDelete(chkgdnSns: number[] ,year :string): Promise<void>;
+  rainChkExcelDataUPload(excelData: rainChkZodType[] ,year :string,laeSeCd:string) : Promise<string>;
+  rainChkDelete(chkgdnSns: number[] ,year :string): Promise<string>;
   rainChkHeadChange: (rainChkgdn: rainChkgdnState, isEdit: boolean) => void;
   rainChkNmSearch: (
     pageNo: number,
@@ -168,6 +167,8 @@ export const rainChkgdnActionsExport: (set: any) => rainChkgdnActions = (
       }));
     },
     rainChkExcelDataUPload: async (excelData: rainChkZodType[] ,year:string,laeSeCd:string) => {
+      const successMessage = "지도점검 등록이 완료되었습니다.";
+      const failMessage = "지도점검 등록이 실패되었습니다.";
       set((state: rainChkgdnType) => (
         { rainChkgdn: { ...state.rainChkgdn, isLoading: true } }));
       try {
@@ -187,13 +188,12 @@ export const rainChkgdnActionsExport: (set: any) => rainChkgdnActions = (
               rainChkCount: rainChkRes.count,
             },
           }));
-          toast.success("지도점검 등록이 완료되었습니다.");
-        } else {
-          toast.error("지도점검 등록이 실패되었습니다.");
+          return successMessage;
         }
+        return failMessage;
       } catch (error) {
         console.log(error);
-        toast.error("지도점검 등록이 실패되었습니다.");
+        return failMessage;
       } finally {
         set((state: rainChkgdnType) => ({ rainChkgdn: { ...state.rainChkgdn, isLoading: false } }));
       }
@@ -257,21 +257,20 @@ export const rainChkgdnActionsExport: (set: any) => rainChkgdnActions = (
       }
     },
     rainChkDetilUpdate: async (rainChk: rainChkZodType[] ,year:string) => {
+      const successMessage = "지도점검 대체수 및 빗물이용량 수정이 완료되었습니다. ";
+      const failMessage = "지도점검 대체수 및 빗물이용량 수정 오류입니다.";
       try {
         const chData = await makeMdfrChk(rainChk, "rain");
 
         const res = await putFectch("/reuseChk/rainy/list", chData);
         if (res) {
-          toast.success(
-            "지도점검 대체수 및 빗물이용량 수정이 완료되었습니다. "
-          );
           const rainChkRes = await initFetch(
             1,
             rainPageSize,
             year,
             "41"
           );
-          return set((state: rainChkgdnState) => ({
+          set((state: rainChkgdnState) => ({
             ...state,
             rainChkgdn: {
               ...state.rainChkgdn,
@@ -279,21 +278,20 @@ export const rainChkgdnActionsExport: (set: any) => rainChkgdnActions = (
               rainChkCount: rainChkRes.count,
             },
           }));
-        } else {
-          toast.error("지도점검 대체수 및 빗물이용량 수정 오류입니다.");
+          return successMessage;
         }
+        return failMessage;
       } catch (error) {
         console.log(error);
-        toast.error("지도점검 대체수 및 빗물이용량 수정 오류입니다.");
+        return failMessage;
       }
     },
     rainChkGuidUpdate: async (rainChk: rainChkZodType) => {
+      const successMessage = "지도점검 수질 및 과태료 수정이 완료되었습니다. ";
+      const failMessage = "지도점검 수질 및 과태료 수정 오류입니다.";
       try {
-        //const chData = await makeMdfrChk(rainChk, "guideDetails", "rainDetil");
         const res = await putFectch("/reuseChk/rainy", rainChk);
         if (res.status === 200) {
-          toast.success("지도점검 수질 및 과태료 수정이 완료되었습니다. ");
-
           const currentYear = new Date().getFullYear().toString();
           const rainChkRes = await initFetch(
             1,
@@ -301,7 +299,7 @@ export const rainChkgdnActionsExport: (set: any) => rainChkgdnActions = (
             currentYear,
             "41"
           );
-          return set((state: rainChkgdnState) => ({
+          set((state: rainChkgdnState) => ({
             ...state,
             rainChkgdn: {
               ...state.rainChkgdn,
@@ -309,29 +307,28 @@ export const rainChkgdnActionsExport: (set: any) => rainChkgdnActions = (
               rainChkCount: rainChkRes.count,
             },
           }));
-        } else {
-          toast.error("지도점검 수질 및 과태료 수정 오류입니다.");
-
+          return successMessage;
         }
+        return failMessage;
       } catch (error) {
-        console.log(' 지도점검 수질 및 과태료 수정 오류', error)
-        toast.error("지도점검 수질 및 과태료 수정 오류입니다.");
+        console.log(" 지도점검 수질 및 과태료 수정 오류", error);
+        return failMessage;
       }
     },
     rainChkDelete: async (chkgdnSns: number[] ,year :string) => {
+      const successMessage = "삭제가 완료되었습니다. ";
+      const failMessage = "삭제시 오류가 발생하였습니다.. ";
       try {
         const res = await deleteFectch(`/reuseChk/rainy`, chkgdnSns);
 
         if (res) {
-          toast.success("삭제가 완료되었습니다. ");
-
           const rainChkRes = await initFetch(
             1,
             rainPageSize,
             year,
             "41"
           );
-          return set((state: rainChkgdnState) => ({
+          set((state: rainChkgdnState) => ({
             ...state,
             rainChkgdn: {
               ...state.rainChkgdn,
@@ -339,14 +336,12 @@ export const rainChkgdnActionsExport: (set: any) => rainChkgdnActions = (
               rainChkCount: rainChkRes.count,
             },
           }));
-        } else {
-          toast.error("삭제시 오류가 발생하였습니다.. ");
-
+          return successMessage;
         }
+        return failMessage;
       } catch (error) {
-        console.log(' 삭제시 오류가 발생하였습니다', error)
-
-        toast.error("삭제시 오류가 발생하였습니다.. ");
+        console.log(" 삭제시 오류가 발생하였습니다.", error);
+        return failMessage;
       }
     },
     rainChkHeadChange: async (rainChkgdn: rainChkgdnState, isEdit: boolean) => {
@@ -391,3 +386,4 @@ export const rainChkgdnActionsExport: (set: any) => rainChkgdnActions = (
 
   };
 };
+
diff --git a/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/excel.tsx b/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/excel.tsx
index 5edba24b5..cc5109000 100644
--- a/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/excel.tsx
+++ b/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/excel.tsx
@@ -11,7 +11,12 @@ import {
   useTypes,
   type Buildingtype
 } from "../rainChkgdn/excel";
-import { codeToText, textToCode } from "@/components/lib/func/commom";
+import { codeToText, textToCode } from "@/components/lib/func/common";
+
+const normalizeExcelDateInput = (value: unknown) => {
+  if (value === undefined || value === null) return "";
+  return String(value).replace(/[.\-\/\s]/g, "");
+};
 
 export const rswtMakeExcelSample = (
   buildings: Buildingtype[],
@@ -142,7 +147,9 @@ export const excelToRswtGuideData = (
   const rswtChkgdData: rswtChkZodType[] = excelData
     .map((item: any) => {
       if (item["점검일"] !== undefined) {
-        const checkYmd = item["점검일"].replace(/\./g, "");
+        const checkYmd = normalizeExcelDateInput(item["점검일"]);
+        const operMngCd = textToCode(item["운영관리형태"], "rainRswtMng") ?? item["운영관리형태"];
+        const utztnUsgCd = textToCode(item["이용용도"], "dmdUszCd") ?? item["이용용도"];
 
         const makeGuidDetail = Array.from({ length: 12 }, (_, i) => {
           let month = `${i + 1}`;
@@ -150,26 +157,27 @@ export const excelToRswtGuideData = (
           const rswtData = parseRawValue(item[`중수_${month}월`]);
           if (month.length < 2) month = "0" + month;
           return {
+            utztnUsgCd: utztnUsgCd,
             ym: year + month,
             chckYmd: checkYmd,
             splyUswtrUtztnQnt: splyData !== "" ? splyData : 0,
             ruseFcltUtztnQnt: rswtData !== "" ? rswtData : 0,
+            flg: "RST",
           };
         });
-        if (checkYmd.length > 7) {
-          return {
-            bdstRuseFcltSn: Number(item["NO"]),
-            operMngCd: textToCode(item["운영관리형태"], "rainRswtMng") ??item["운영관리형태"],
-            anlOperCst: parseCommaRawValue(item["연간운영비(원/년)"]),
-            prcsCpct: parseRawValue(item[`처리용량(m³)`]),
-            spwtPositn: item["채수지점"],
-            chckYmd: checkYmd,
-            utztnUsgCd: textToCode(item["이용용도"], "dmdUszCd")??item["이용용도"],
-            guideDetails: makeGuidDetail,
-            rgtr: TEST_UUID,
-            mdfr: TEST_UUID,
-          };
-        }
+        return {
+          bdstRuseFcltSn: Number(item["NO"]),
+          flg: "RST",
+          operMngCd: operMngCd,
+          anlOperCst: parseCommaRawValue(item["연간운영비(원/년)"]),
+          prcsCpct: parseRawValue(item[`처리용량(m³)`]),
+          spwtPositn: item["채수지점"],
+          chckYmd: checkYmd,
+          utztnUsgCd: utztnUsgCd,
+          guideDetails: makeGuidDetail,
+          rgtr: TEST_UUID,
+          mdfr: TEST_UUID,
+        };
       }
     })
     .filter((el: any) => el !== undefined);
@@ -186,11 +194,13 @@ export const excelToRswtPolution = (excelData: any) => {
   const rswtChkgdData: rswtChkZodType[] = excelData
     .map((item: any) => {
       if (item["점검일"] !== undefined) {
-        const checkYmd = item["점검일"].replace(/\./g, "");
-        let vltnDt = item["과태료 부과일(위반일)"];
-        if (vltnDt !== undefined) {
-          vltnDt = vltnDt.replace(/\./g, "");
-        }
+        const checkYmd = normalizeExcelDateInput(item["점검일"]);
+        const vltnDt = normalizeExcelDateInput(item["과태료 부과일(위반일)"]);
+        const operMngCd =
+          textToCode(item["운영관리형태"], "rainRswtMng") ??
+          item["운영관리형태"];
+        const utztnUsgCd =
+          textToCode(item["이용용도"], "dmdUszCd") ?? item["이용용도"];
 
         const makePoluttion = Array.from({ length: 4 }, (_, i) => {
           const quarter = `${i + 1}`;
@@ -207,6 +217,7 @@ export const excelToRswtPolution = (excelData: any) => {
           const ph = String(item[`${quarter}분기_PH`]) ;
           const clIonQnt = parseRawValue(item[`${quarter}분기_염화물`]);
           return {
+            utztnUsgCd: utztnUsgCd,
             node: quarter,
             chckYmd: checkYmd,
             grssClfgUswtr: grssClfgUswtr,
@@ -226,9 +237,10 @@ export const excelToRswtPolution = (excelData: any) => {
 
         return {
           bdstRuseFcltSn: Number(item["NO"]),
+          flg: "RST",
           chckYmd: checkYmd,
-          utztnUsgCd: textToCode(item["이용용도"], "dmdUszCd")??item["이용용도"],
-          operMngCd: item["운영관리형태"],
+          utztnUsgCd: utztnUsgCd,
+          operMngCd: operMngCd,
           anlOperCst: parseCommaRawValue(item["연간운영비(원/년)"]),
           prcsCpct: parseRawValue(item["처리용량(m³)"]),
           spwtPositn: item["채수지점"],
@@ -237,7 +249,7 @@ export const excelToRswtPolution = (excelData: any) => {
           mdfr: TEST_UUID,
           rswtrDetails: [
             {
-              utztnUsgCd: textToCode(item["이용용도"], "dmdUszCd")??item["이용용도"],
+              utztnUsgCd: utztnUsgCd,
               vltnDt: vltnDt,
               vltnMttr: item["위반사항"],
               levyAmt: Number(item["과태료 부과금액(천원)"]) ?? 0,
@@ -257,24 +269,26 @@ export const rswtExcelDataCheck = (
   rswtChkgdData: rswtChkZodType[],
   issues: string[]
 ) => {
-
+  // const chkMngType = { "01": "위탁", "02": "자체" };
+  //rainRswtMng: SelectDataType[]; // 운영관리형태코드
+  // console.log(rswtChkgdData);
   rswtChkgdData.forEach((rswt: any) => {
     const defaultMessage = `*중수도 수질  [NO: ${rswt.bdstRuseFcltSn}, 점검일: ${rswt.chckYmd}, 이용용도: ${codeToText(rswt.utztnUsgCd ,"dmdUszCd")??rswt.utztnUsgCd}] 항목에서  `;
 
     if (rswt.chckYmd && isInvalidDate(rswt.chckYmd)) {
       issues.push(defaultMessage + `점검일: 날짜 형식 아님 (${rswt.chckYmd})`);
     }
+    if (rswt.operMngCd?.length > 1 && !codeToText(rswt.operMngCd, "rainRswtMng")) {
+      issues.push( defaultMessage + `운영관리형태: 위탁 혹은 자체만 허용 (${rswt.operMngCd})` );
+    }
+    if (rswt.utztnUsgCd?.length > 2 && !codeToText(rswt.utztnUsgCd, "dmdUszCd")) {
+      issues.push( defaultMessage + `이용용도: 허용되지 않은 값 (${rswt.utztnUsgCd})` );
+    }
     if (rswt.anlOperCst.length > 2 && isInvalidNumber(rswt.anlOperCst)) {
-
-      issues.push(
-        defaultMessage +
-          ` 연간운영비(원/년): 숫자 형식 아님 (${rswt.anlOperCst})`
-      );
+      issues.push( defaultMessage + ` 연간운영비(원/년): 숫자 형식 아님 (${rswt.anlOperCst})` );
     }
     if (rswt.prcsCpct.length > 2 && isInvalidNumber(rswt.prcsCpct)) {
-      issues.push(
-        defaultMessage + ` 처리용량(m³): 숫자 형식 아님 (${rswt.prcsCpct})`
-      );
+      issues.push( defaultMessage + ` 처리용량(m³): 숫자 형식 아님 (${rswt.prcsCpct})` );
     }
     // if (
     //   rswt.spwtPositn.length > 1 &&
@@ -289,50 +303,31 @@ export const rswtExcelDataCheck = (
     if (rswt?.rswtrPollutions && rswt?.rswtrPollutions.length > 0) {
       rswt.rswtrPollutions.forEach((pol) => {
         if (isInvalidNumber(pol.grssClfgUswtr)) {
-          issues.push(
-            defaultMessage +
-              `${pol.node}분기_총대장균군수: 숫자 형식 아님 (${pol.grssClfgUswtr})`
-          );
+          issues.push( defaultMessage + `${pol.node}분기_총대장균군수: 숫자 형식 아님 (${pol.grssClfgUswtr})` );
         }
         if (isInvalidNumber(pol.combResdch)) {
-          issues.push(
-            defaultMessage +
-              `${pol.node}분기_결합잔류염소: 숫자 형식 아님 (${pol.combResdch})`
-          );
+          issues.push( defaultMessage + `${pol.node}분기_결합잔류염소: 숫자 형식 아님 (${pol.combResdch})` );
         }
         if (isInvalidNumber(pol.trbt)) {
-          issues.push(
-            defaultMessage +
-              `${pol.node}분기_탁도: 숫자 형식 아님 (${pol.trbt})`
-          );
+          issues.push( defaultMessage + `${pol.node}분기_탁도: 숫자 형식 아님 (${pol.trbt})` );
         }
         if (isInvalidNumber(pol.bod)) {
-          issues.push(
-            defaultMessage + `${pol.node}분기_BOD: 숫자 형식 아님 (${pol.bod})`
-          );
+          issues.push( defaultMessage + `${pol.node}분기_BOD: 숫자 형식 아님 (${pol.bod})` );
         }
         if (isInvalidNumber(pol.crmty)) {
-          issues.push(
-            defaultMessage +
-              `${pol.node}분기_색도: 숫자 형식 아님 (${pol.crmty})`
-          );
+          issues.push( defaultMessage + `${pol.node}분기_색도: 숫자 형식 아님 (${pol.crmty})` );
         }
         if (isInvalidNumber(pol.tph)) {
-          issues.push(
-            defaultMessage + `${pol.node}분기_T-P: 숫자 형식 아님 (${pol.tph})`
-          );
+          issues.push( defaultMessage + `${pol.node}분기_T-P: 숫자 형식 아님 (${pol.tph})` );
         }
         if (isInvalidNumber(pol.tn)) {
-          issues.push(
-            defaultMessage + `${pol.node}분기_T-N: 숫자 형식 아님 (${pol.tn})`
-          );
+          issues.push( defaultMessage + `${pol.node}분기_T-N: 숫자 형식 아님 (${pol.tn})` );
         }
-
-          if (isInvalidNumber(pol.clIonQnt)) {
-            issues.push(
-              defaultMessage +
-                `${pol.node}분기_염소이온량: 숫자 형식 아님 (${pol.clIonQnt})`
-            );
+        if (isInvalidNumber(pol.ph)) {
+          issues.push( defaultMessage + `${pol.node}분기_PH: 숫자 형식 아님 (${pol.ph})` );
+        }
+        if (isInvalidNumber(pol.clIonQnt)) {
+          issues.push( defaultMessage + `${pol.node}분기_염소이온량: 숫자 형식 아님 (${pol.clIonQnt})` );
         }
       });
     }
@@ -340,18 +335,43 @@ export const rswtExcelDataCheck = (
     if (rswt?.rswtrDetails && rswt?.rswtrDetails.length > 0) {
       rswt?.rswtrDetails.forEach((key) => {
         if (key.levyAmt?.length > 1 && isInvalidNumber(key.levyAmt)) {
-          issues.push(
-            defaultMessage +
-              `과태료부과금액(천원): 숫자 형식 아님 (${key.levyAmt})`
-          );
+          issues.push( defaultMessage + `과태료부과금액(천원): 숫자 형식 아님 (${key.levyAmt})` );
         }
         if (key.vltnDt?.length > 2 && isInvalidDate(key.vltnDt)) {
-          issues.push(
-            defaultMessage +
-              `과태료 부과일(위반일): 날짜 형식 아님 (${key.vltnDt})`
-          );
+          issues.push( defaultMessage + `과태료 부과일(위반일): 날짜 형식 아님 (${key.vltnDt})` );
         }
       });
     }
+
+    const polutionUseCodes = new Set<string>(
+      (rswt?.rswtrPollutions ?? [])
+        .map((pol) => pol.utztnUsgCd)
+        .filter((code): code is string => Boolean(code))
+    );
+    const guideDetailCodes = new Set<string>(
+      (rswt?.guideDetails ?? [])
+        .map((detail) => detail.utztnUsgCd)
+        .filter((code): code is string => Boolean(code))
+    );
+
+    polutionUseCodes.forEach((code) => {
+      if (!guideDetailCodes.has(code)) {
+        issues.push(
+          defaultMessage +
+            `중수도_점검결과_수질 sheet의 이용용도에 대응하는 중수도_점검결과_이용량현황sheet의 이용용도가 없습니다.`
+        );
+      }
+    });
+
+    guideDetailCodes.forEach((code) => {
+      if (!polutionUseCodes.has(code)) {
+        issues.push(
+          defaultMessage +
+            `중수도_점검결과_이용량현황sheet의 이용용도에 대응하는 중수도_점검결과_수질sheet의 이용용도가 없습니다.`
+        );
+      }
+    });
+
   });
 };
+
diff --git a/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/headList.tsx b/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/headList.tsx
index 6e94ec4e6..7cba87e82 100644
--- a/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/headList.tsx
+++ b/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/headList.tsx
@@ -53,61 +53,63 @@ const buildingZod = z.object({
 });
 
 export const rswtrPolutionsZode = z.object({
-  utztnUsgCdText:z.string().nullish(),
-  chkgdnDtlFk: z.string().nullish(),
-  utztnUsgCd: z.string().nullish(),
-  node: z.string().nullish(),
-  grssClfgUswtr: z.number(),
-  combResdch: z.number(),
-  trbt: z.number(),
-  bod: z.number(),
-  smll: z.number(),
-  crmty: z.number(),
-  tph: z.number(),
-  tn: z.number(),
-  ph: z.number(),
-  clIonQnt: z.number(),
-  regDt: z.string().nullish(),
-  rgtr: z.string().nullish(),
-  mdfcnDt: z.string().nullish(),
-  mdfr: z.string().nullish(),
-  edit:z.boolean().nullish()
+  utztnUsgCdText:z.string().nullish(), // 이용용도 코드의 화면 표시용 한글명
+  chkgdnDtlFk: z.string().nullish(), // 지도점검 상세 PK와 연결되는 FK
+  utztnUsgCd: z.string().nullish(), // 이용용도 코드
+  node: z.string().nullish(), // 분기 구분값(1~4분기)
+  grssClfgUswtr: z.number(), // 총대장균군수
+  combResdch: z.number(), // 결합잔류염소
+  trbt: z.number(), // 탁도
+  bod: z.number(), // BOD
+  smll: z.string(), // 냄새
+  crmty: z.number(), // 색도
+  tph: z.number(), // 총인(T-P)
+  tn: z.number(), // 총질소(T-N)
+  ph: z.number(), // 수소이온농도(pH)
+  clIonQnt: z.number(), // 염화물
+  regDt: z.string().nullish(), // 등록일시
+  rgtr: z.string().nullish(), // 등록자
+  mdfcnDt: z.string().nullish(), // 수정일시
+  mdfr: z.string().nullish(), // 수정자
+  edit:z.boolean().nullish() // 화면에서 수정 가능 여부
 });
 
 export const rswtrDetailsZod = z.object({
-  chkgdnDtlPk: z.string().nullish(),
-      chkgdnSn: z.string().nullish(),
-      utztnUsgCd: z.string(),
-      vltnDt: z.string(),
-      vltnMttr: z.string(),
-      levyAmt: z.number(),
-      regDt: z.string().nullish(),
-      rgtr: z.string().nullish(),
-      mdfcnDt: z.string().nullish(),
-      mdfr: z.string().nullish(),
+  chkgdnDtlPk: z.string().nullish(), // 지도점검 상세 PK
+  chkgdnSn: z.string().nullish(), // 지도점검 일련번호
+  utztnUsgCd: z.string(), // 이용용도 코드
+  vltnDt: z.string(), // 위반일
+  vltnMttr: z.string(), // 위반사항
+  levyAmt: z.number(), // 부과금액
+  regDt: z.string().nullish(), // 등록일시
+  rgtr: z.string().nullish(), // 등록자
+  mdfcnDt: z.string().nullish(), // 수정일시
+  mdfr: z.string().nullish(), // 수정자
 })
 
+// 중수도 점검 데이터를 검증하는 Zod 스키마
 export const rswtChkgdZod = z.object({
-  chkgdnSn: z.number().nullish(),
-  bdstRuseFcltSn: z.number().nullish(),
-  chckYmd: z.string(),
-  prcsCpct: z.number(),
-  dtfcltCpct: z.number(),
-  spwtPositn: z.string(),
-  regDt: z.string().nullish(),
-  rgtr: z.string().nullish(),
-  mdfcnDt: z.string().nullish(),
-  mdfr: z.string().nullish(),
-  anlOperCst:z.number(),
-  oilqMeasMthd: z.string().nullish(),
-  utztnUsgCd: z.string(),
-  building: buildingZod,
-  guideDetails: z.array(guideDetail),
-  reuseBuilding: reuseBuildingZod,
+  chkgdnSn: z.number().nullish(), // 점검 일련번호
+  bdstRuseFcltSn: z.number().nullish(), // 재이용시설 일련번호
+  chckYmd: z.string(), // 점검일자
+  prcsCpct: z.number(), // 처리용량
+  dtfcltCpct: z.number(), // 빗물저류조용량
+  spwtPositn: z.string(), // 채수 지점
+  regDt: z.string().nullish(), // 등록일시
+  rgtr: z.string().nullish(), // 등록자
+  mdfcnDt: z.string().nullish(), // 수정일시
+  mdfr: z.string().nullish(), // 수정자
+  flg: z.string().nullable(), // 플래그
+  anlOperCst: z.number(), // 연간 운영비
+  oilqMeasMthd: z.string().nullish(), // 유량측정방법
+  utztnUsgCd: z.string(), // 이용용도 코드
+  building: buildingZod, // 건물 정보
+  guideDetails: z.array(guideDetail), // 가이드 점검 상세 목록
+  reuseBuilding: reuseBuildingZod, // 재이용 건물 정보
   rswtrDetails: z.array(
     rswtrDetailsZod
-  ),
-  rswtrPollutions: z.array(rswtrPolutionsZode),
+  ), // 점검 위반/내역 상세 배열
+  rswtrPollutions: z.array(rswtrPolutionsZode), // 수질 오염 항목 배열
 });
 
 
@@ -134,117 +136,45 @@ export const rswtHeadNmExport: chHeadType[] = [
 ];
 
 export const rswtChkHeadListExport: TableUpperProps[] = [
-  { id: "order", title: "순번", mergeCell: true },
-  { id: "checkBox", title: "선택", mergeCell: true },
-  { id: "cityText", title: "시도" ,mergeCell: true },
-  { id: "sggText", title: "시군구",mergeCell: true },
-  { id: "bdstNm", title: "시설명" ,mergeCell: true},
-  { id: "operMngCd", title: "운영관리형태" ,mergeCell: true},
-  { id: "anlOperCst", title: "연간운영비(원/년)" ,mergeCell: true},
-  { id: "prcsCpct", title: "처리용량(m³)" ,mergeCell: true},
-  { id: "spwtPositn", title: "채수지점" ,mergeCell: true},
-  { id: "chckYmd", title: "점검일" ,mergeCell: true},
-  { id: "utztnUsgCdText", title: "이용용도" },
-  { id: "splyUswtrUtztnQnt", title: "연간대체수이용량(m³)" ,type: "number"},
-  { id: "ruseFcltUtztnQnt", title: "연간중수도이용량(m³)",type: "number"},
-
-  {
-    id: "grssClfgUswtr",
-    title: "총대장균군수(개/mg)",
-    upName: "useQuilty",
-    upSequnce: 1,
-    type: "number"
-  },
-  {
-    id: "combResdch",
-    title: "결합잔류염소(mh/L)",
-    upName: "useQuilty",
-    upSequnce: 2,
-    type: "number"
-  },
-  { id: "trbt", title: "탁도(NTU)", upName: "useQuilty", upSequnce: 3 ,type: "number"},
-  { id: "bod", title: "BOD(mg/L)", upName: "useQuilty", upSequnce: 4 ,type: "number"},
-  { id: "smll", title: "냄새", upName: "useQuilty", upSequnce: 5 ,type: "text"},
-  { id: "crmty", title: "색도(도)", upName: "useQuilty", upSequnce: 6 ,type: "number"},
-  { id: "tn", title: "총질소(T-N)(mg/L)", upName: "useQuilty", upSequnce: 7 ,type: "number"},
-  { id: "tph", title: "총인(T-P)(mg/L)", upName: "useQuilty", upSequnce: 8 ,type: "number"},
-  { id: "ph", title: "수소이온농도(pH)", upName: "useQuilty", upSequnce: 9,type: "text" },
-  { id: "clIonQnt", title: "염화물(mg/L)", upName: "useQuilty", upSequnce: 10 ,type: "number"},
-
-  {
-    id: "vltnDt",
-    title: "부과일(위반일)",
-    upName: "feeHist",
-    upSequnce: 1,
-    type: "text",
-    edit:true
-  },
-  {
-    id: "vltnMttr",
-    title: "위반사항",
-    upName: "feeHist",
-    upSequnce: 2,
-    type: "text",
-    edit:true
-  },
-  {
-    id: "levyAmt",
-    title: "부과금액(천원)",
-    upName: "feeHist",
-    upSequnce: 3,
-    type: "number",
-    edit:true
-  }];
+  { id: "order", title: "순번", mergeCell: true, widthPercent: 4 },
+  { id: "checkBox", title: "선택", mergeCell: true, widthPercent: 4 },
+  { id: "cityText", title: "시도" ,mergeCell: true, widthPercent: 7 },
+  { id: "sggText", title: "시군구",mergeCell: true, widthPercent: 5 },
+  { id: "bdstNm", title: "시설명" ,mergeCell: true, widthPercent: 10 },
+  { id: "operMngCd", title: "운영관리형태" ,mergeCell: true, widthPercent: 6 },
+  { id: "anlOperCst", title: "연간운영비(원/년)" ,mergeCell: true, widthPercent: 7 },
+  { id: "prcsCpct", title: "처리용량(m³)" ,mergeCell: true, widthPercent: 6 },
+  { id: "spwtPositn", title: "채수지점" ,mergeCell: true, widthPercent: 6 },
+  { id: "chckYmd", title: "점검일" ,mergeCell: true, widthPercent: 7 },
+  { id: "utztnUsgCdText", title: "이용용도", widthPercent: 7 },
+  { id: "splyUswtrUtztnQnt", title: "연간대체수이용량(m³)" ,type: "number", widthPercent: 5 },
+  { id: "ruseFcltUtztnQnt", title: "연간중수도이용량(m³)",type: "number", widthPercent: 5 },
+  { id: "grssClfgUswtr", title: "총대장균군수(개/100㎖)", upName: "useQuilty", upSequnce: 1 ,type: "number", widthPercent: 6 },
+  { id: "combResdch", title: "결합잔류염소(mh/L)", upName: "useQuilty", upSequnce: 2 ,type: "number", widthPercent: 6 },
+  { id: "trbt", title: "탁도(NTU)", upName: "useQuilty", upSequnce: 3 ,type: "number", widthPercent: 4 },
+  { id: "bod", title: "BOD\n(mg/L)", upName: "useQuilty", upSequnce: 4 ,type: "number", widthPercent: 4 },
+  { id: "smll", title: "냄새", upName: "useQuilty", upSequnce: 5 ,type: "text", widthPercent: 4 },
+  { id: "crmty", title: "색도(도)", upName: "useQuilty", upSequnce: 6 ,type: "number", widthPercent: 4 },
+  { id: "tn", title: "총질소(T-N)(mg/L)", upName: "useQuilty", upSequnce: 7 ,type: "number", widthPercent: 5 },
+  { id: "tph", title: "총인(T-P)(mg/L)", upName: "useQuilty", upSequnce: 8 ,type: "number", widthPercent: 5 },
+  { id: "ph", title: "수소이온농도(pH)", upName: "useQuilty", upSequnce: 9,type: "text", widthPercent: 5 },
+  { id: "clIonQnt", title: "염화물(mg/L)", upName: "useQuilty", upSequnce: 10 ,type: "number", widthPercent: 5 },
+  { id: "vltnDt", title: "부과일(위반일)", upName: "feeHist", upSequnce: 1, type: "text", edit:true, widthPercent: 5 },
+  { id: "vltnMttr", title: "위반사항", upName: "feeHist", upSequnce: 2, type: "text", edit:true, widthPercent: 6 },
+  { id: "levyAmt", title: "부과금액(천원)", upName: "feeHist", upSequnce: 3, type: "number", edit:true, widthPercent: 5 }];
 
 
   export const rswtDetailHeadListExport: TableUpperProps[] = [
-    { id: "utztnUsgCdText", title: "이용용도" },
-  
-    {
-      id: "grssClfgUswtr",
-      title: "총대장균군수",
-      upName: "detailQulity",
-      upSequnce: 2,
-      edit: true,
-    },
-    {
-      id: "combResdch",
-      title: "결합잔류염소",
-      upName: "detailQulity",
-      upSequnce: 3,
-      edit: true,
-    },
-    {
-      id: "trbt",
-      title: "탁도",
-      upName: "detailQulity",
-      upSequnce: 4,
-      edit: true,
-    },
-    { id: "bod", title: "BOD", upName: "detailQulity", upSequnce: 5, edit: true },
-    {
-      id: "smll",
-      title: "냄새",
-      upName: "detailQulity",
-      upSequnce: 6,
-      edit: true,
-    },
-    {
-      id: "crmty",
-      title: "색도",
-      upName: "detailQulity",
-      upSequnce: 7,
-      edit: true,
-    },
-    { id: "tn", title: "T-N", upName: "detailQulity", upSequnce: 8, edit: true },
-    { id: "tph", title: "T-P", upName: "detailQulity", upSequnce: 9, edit: true },
-    { id: "ph", title: "pH", upName: "detailQulity", upSequnce: 10, edit: true },
-    {
-      id: "clIonQnt",
-      title: "염화물",
-      upName: "detailQulity",
-      upSequnce: 11,
-      edit: true,
-    },
+    { id: "utztnUsgCdText", title: "이용용도", widthPercent: 20 },
+    { id: "grssClfgUswtr", title: "총대장균군수", upName: "detailQulity", upSequnce: 2, edit: true, widthPercent: 8 },
+    { id: "combResdch", title: "결합잔류염소", upName: "detailQulity", upSequnce: 3, edit: true, widthPercent: 8 },
+    { id: "trbt", title: "탁도", upName: "detailQulity", upSequnce: 4, edit: true, widthPercent: 8 },
+    { id: "bod", title: "BOD", upName: "detailQulity", upSequnce: 5, edit: true, widthPercent: 8 },
+    { id: "smll", title: "냄새", upName: "detailQulity", upSequnce: 6, edit: true, widthPercent: 8 },
+    { id: "crmty", title: "색도", upName: "detailQulity", upSequnce: 7, edit: true, widthPercent: 8 },
+    { id: "tn", title: "T-N", upName: "detailQulity", upSequnce: 8, edit: true, widthPercent: 8 },
+    { id: "tph", title: "T-P", upName: "detailQulity", upSequnce: 9, edit: true, widthPercent: 8 },
+    { id: "ph", title: "pH", upName: "detailQulity", upSequnce: 10, edit: true, widthPercent: 8 },
+    { id: "clIonQnt", title: "염화물", upName: "detailQulity", upSequnce: 11, edit: true, widthPercent: 8 },
   ];
-  
\ No newline at end of file
+  
diff --git a/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/index.tsx b/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/index.tsx
index cf2eca339..71ae80eda 100644
--- a/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/index.tsx
+++ b/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/index.tsx
@@ -1,3 +1,6 @@
+/**
+ * 중수도 지도점검 store
+ */
 import { buildingType } from "@/app/store/common/code";
 import type { TableUpperProps } from "@/app/store/common/type/header";
 import {
@@ -11,12 +14,10 @@ import {
   postFectch,
   putFectch,
 } from "@/components/lib/api";
-import { ToastFormUi } from "@/components/ui/toast/toastFromUi";
 import type {
   SelectDataType,
   SheetParameter,
 } from "@common/business_components";
-import toast from "react-hot-toast";
 import { z } from "zod";
 import { type chHeadType } from "../rainChkgdn/headList";
 import { rswtMakeExcelSample } from "./excel";
@@ -43,47 +44,32 @@ export type rswtChkZodType = z.infer<typeof rswtChkgdZod>;
 export type rswtrChkDetailsZodType = z.infer<typeof rswtrDetailsZod>;
 export type rswtChkgdnState = {
   rswtChkgdn: {
-    rswtChkHeadList: TableUpperProps[];
-    rswtDetailHeadList: TableUpperProps[];
-
-    rswtHeadNm: chHeadType[];
-    excelList: SheetParameter[];
-    rswtChkRes: rswtChkZodType[];
-    rswtChkPolGuide: rswtChkZodType[];
-    rswtSplHeadNm:chHeadType[]
-    rswtRuseHeadNm:chHeadType[]
-    isInit: boolean;
-    isSttn: boolean;
-    isLoading:boolean;
-    rswtChkCount: number;
+    rswtChkHeadList: TableUpperProps[]; // 중수도 지도점검 메인 목록 헤더
+    rswtDetailHeadList: TableUpperProps[]; // 중수도 지도점검 상세 목록 헤더
+ 
+    rswtHeadNm: chHeadType[]; // 메인 목록 다단 헤더명
+    excelList: SheetParameter[]; // 엑셀 다운로드용 시트 데이터
+    rswtChkRes: rswtChkZodType[]; // 중수도 지도점검 메인 목록 데이터
+    rswtChkPolGuide: rswtChkZodType[]; // 선택한 지도점검 1건의 수질/대체수 상세 데이터
+    rswtSplHeadNm:chHeadType[] // 공급량 관련 다단 헤더명
+    rswtRuseHeadNm:chHeadType[] // 재이용량 관련 다단 헤더명
+    isInit: boolean; // 초기 목록 조회 완료 여부
+    isSttn: boolean; // 테이블 선택/상세 상태 제어 플래그
+    isLoading:boolean; // 등록/업로드 등 비동기 처리 진행 여부
+    rswtChkCount: number; // 메인 목록 전체 건수 : 시설의 건수임
   };
 };
 
 type rswtChkgdnActions = {
-  rswtChkgdnInit: (
-    pageNo: number,
-    cnt: number,
-    year: string,
-    sggCd: string
-  ) => void;
-  rswtChkNmSearch: (
-    pageNo: number,
-    cnt: number,
-    year: string,
-    sggCd: string,
-    txt: string
-  ) => void;
-  rswtrChkExcelDownload(
-    sidoCode: SelectDataType[],
-    sggCode: SelectDataType[],
-    sggCd: string,
-  ): Promise<void>;
-  rswtChkExceDataUpload: (excelData: rswtChkZodType[],laeSeCd:string) => void;
-  rswtChkDelete: (chkgdnSns: number[] ,year:string) => void;
-  rswtChkDetilsUpdate: (rswtChkDetails: rswtrChkDetailsZodType[] ,year:string) => void;
+  rswtChkgdnInit: ( pageNo: number, cnt: number, year: string, sggCd: string ) => void;
+  rswtChkNmSearch: ( pageNo: number, cnt: number, year: string, sggCd: string, txt: string ) => void;
+  rswtrChkExcelDownload( sidoCode: SelectDataType[], sggCode: SelectDataType[], sggCd: string, ): Promise<void>;
+  rswtChkExceDataUpload: (excelData: rswtChkZodType[],laeSeCd:string) => Promise<string>;
+  rswtChkDelete: (chkgdnSns: number[] ,year:string) => Promise<string>;
+  rswtChkDetilsUpdate: (rswtChkDetails: rswtrChkDetailsZodType[] ,year:string) => Promise<string>;
   rswtChkPolAndGuide: (chkgdnSn: number) => void;
   rswtChkPolInit: () => void;
-  rwstPolAndGuideUpdate: (rswtChk: rswtChkZodType[]) => void;
+  rwstPolAndGuideUpdate: (rswtChk: rswtChkZodType[]) => Promise<string>;
   rswtChkHeadChange: (rswtChkgdn: rswtChkgdnState, isEdit: boolean) => void;
   setRswtChkLoading:(status:boolean) =>void
 };
@@ -191,8 +177,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
       // set((state: rswtChkgdnType) => ({ rswtChkgdn: { ...state.rswtChkgdn, isLoading: true } }));
       try {
         const rswtChkRes = await initFetch(pageNo, cnt, year, sggCd);
-
-
+        // console.log(rswtChkRes);
         set((state: rswtChkgdnState) => ({
           ...state,
           rswtChkgdn: {
@@ -244,29 +229,32 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
         console.log(error);
       }
     },
+    // 중수도 지도점검결과 upload
     rswtChkExceDataUpload: async (excelData: rswtChkZodType[],laeSeCd:string) => {
+      const successMessage = "지도점검 등록이 완료되었습니다.";
+      const failMessage = "지도점검 등록이 실패되었습니다.";
+      // console.log(excelData);
       try {
-   set((state: rswtChkgdnType) => (
-        { rswtChkgdn: { ...state.rswtChkgdn, isLoading: true } }));
+        set((state: rswtChkgdnType) => (
+          { rswtChkgdn: { ...state.rswtChkgdn, isLoading: true } }));
         const res = await postFectch("/reuseChk/reuseWater", excelData);
-        if (res.ok) {
-          ToastFormUi({
-            body: "지도점검 등록이 완료되었습니다.",
-            title: "지도점검 등록",
-          });
+        if (res.status === 200) {
+          const currentYear = new Date().getFullYear().toString();
+          const rswtChkRes = await initFetch(1, rswtPageSize, currentYear, laeSeCd);
+          set((state: rswtChkgdnState) => ({
+            ...state,
+            rswtChkgdn: {
+              ...state.rswtChkgdn,
+              rswtChkRes: rswtChkRes.data,
+              rswtChkCount: rswtChkRes.count,
+            },
+          }));
+          return successMessage;
         }
-        const currentYear = new Date().getFullYear().toString();
-        const rswtChkRes = await initFetch(1, rswtPageSize, currentYear, laeSeCd);
-        return set((state: rswtChkgdnState) => ({
-          ...state,
-          rswtChkgdn: {
-            ...state.rswtChkgdn,
-            rswtChkRes: rswtChkRes.data,
-            rswtChkCount: rswtChkRes.count,
-          },
-        }));
+        return failMessage;
       } catch (error) {
         console.log(error);
+        return failMessage;
       }finally{
         set((state: rswtChkgdnType) => (
           { rswtChkgdn: { ...state.rswtChkgdn, isLoading: false } }));
@@ -274,15 +262,17 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
 
     },
     rswtChkDetilsUpdate: async (rswtChk: rswtrChkDetailsZodType[] ,year:string) => {
+      const successMessage = "지도점검 과태료  수정이 완료되었습니다. ";
+      const failMessage = "지도점검 과태료  수정 오류입니다. ";
       try {
         const chData = await makeMdfrChk(rswtChk);
 
         const res = await putFectch("/reuseChk/reuseWater", chData);
-        if (res.ok) {
-          toast.success("지도점검 과태료  수정이 완료되었습니다. ",)
+        if (!res.ok) {
+          return failMessage;
         }
         const rswtChkRes = await initFetch(1, rswtPageSize, year, "0");
-        return set((state: rswtChkgdnState) => ({
+        set((state: rswtChkgdnState) => ({
           ...state,
           rswtChkgdn: {
             ...state.rswtChkgdn,
@@ -291,21 +281,24 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
 
           },
         }));
+        return successMessage;
       } catch (error) {
         console.log(error);
-        toast.error("지도점검 과태료  수정 오류입니다. ",)
+        return failMessage;
 
       }
     },
     rswtChkDelete: async (chkgdnSns: number[] ,year:string) => {
+      const successMessage = "삭제가 완료되었습니다.";
+      const failMessage = "삭제 오류입니다.";
       try {
         const res = await deleteFectch(`/reuseChk/reuseWater`, chkgdnSns);
 
-        if (res) {
-          toast.success("삭제가 완료되었습니다.") 
+        if (!res) {
+          return failMessage;
         }
         const rswtChkRes = await initFetch(1, rswtPageSize, year, "0");
-        return set((state: rswtChkgdnState) => ({
+        set((state: rswtChkgdnState) => ({
           ...state,
           rswtChkgdn: {
             ...state.rswtChkgdn,
@@ -313,9 +306,10 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
             rswtChkCount: rswtChkRes.count,
           },
         }));
+        return successMessage;
       } catch (error) {
-        toast.error("삭제 오류입니다.") 
         console.error(error);
+        return failMessage;
       }
     },
     rswtChkPolAndGuide: async (chkgdnSn: number) => {
@@ -350,18 +344,20 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
       }
     },
     rwstPolAndGuideUpdate: async (rswtChk: rswtChkZodType[]) => {
+      const successMessage = "지도점검 연간 수질 및 대체수/중수도 수정이 완료되었습니다.";
+      const failMessage = "지도점검 연간 수질 및 대체수/중수도 수정 오류입니다.";
       try {
         const chData = await makeMdfrChk(rswtChk);
         const res = await putFectch(
           `/reuseChk/reuseWater/${rswtChk[0]?.chkgdnSn}`,
           chData[0]
         );
-        if (res.ok) {
-          toast.success("지도점검 연간 수질 및 대체수/중수도 수정이 완료되었습니다.") 
+        if (!res.ok) {
+          return failMessage;
         }
         const currentYear = new Date().getFullYear().toString();
         const rswtChkRes = await initFetch(1, rswtPageSize, currentYear, "0");
-        return set((state: rswtChkgdnState) => ({
+        set((state: rswtChkgdnState) => ({
           ...state,
           rswtChkgdn: {
             ...state.rswtChkgdn,
@@ -369,10 +365,11 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
             rswtChkCount: rswtChkRes.count,
           },
         }));
+        return successMessage;
       } catch (error) {
         console.log(error);
 
-        toast.error("지도점검 연간 수질 및 대체수/중수도 수정 오류입니다.") 
+        return failMessage;
 
       }
     },
@@ -409,3 +406,4 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
 
   };
 };
+
diff --git a/apps/wr/app/store/prfmncReg/pbnstPrfmncReg/index.tsx b/apps/wr/app/store/prfmncReg/pbnstPrfmncReg/index.tsx
index 13429fbc7..83057114c 100644
--- a/apps/wr/app/store/prfmncReg/pbnstPrfmncReg/index.tsx
+++ b/apps/wr/app/store/prfmncReg/pbnstPrfmncReg/index.tsx
@@ -1,4 +1,4 @@
-/**
+/**
  * 재이용실적등록 > 하수재이용실적등록
  * 
  * 🔗 사용 API 
@@ -13,7 +13,6 @@ import { pbnstPrfmncHeadListExport, monthHeadListExport } from "./headList";
 import type { pubHasuType } from "../../ruseFcltMng/fcltReg/pbnstReg/type";
 import type { FcPrfType, PrfType } from "./type";
 import type { TableUpperProps } from "../../common/type/header";
-import toast from "react-hot-toast";
 
 const pbnstPrfmncHeadList = pbnstPrfmncHeadListExport;
 const monthHeadList = monthHeadListExport;
@@ -66,7 +65,7 @@ type pbnstPrfmncActions = {
     data: PrfType,
     year: string,
     prfPbnFclts: string[]
-  ) => void;
+  ) => Promise<string>;
   getPrfFmcRes: () => void;
 };
 
@@ -203,6 +202,7 @@ export const pbnstPrfmncActionsExport: (set: any) => pbnstPrfmncActions = (
       year: string,
       prfPbnFclts: string[]
     ) => {
+      const failMessage = "하수재이용 시설 실적 등록이 실패하였습니다.";
       try {
         const ressponse = await postFectch(
           "/reuseFc/pubFcPrf",
@@ -211,7 +211,6 @@ export const pbnstPrfmncActionsExport: (set: any) => pbnstPrfmncActions = (
         );
 
         if (ressponse.status === 200) {
-          toast.success("하수재이용 시설 실적 등록이 완료되었습니다.");
           const prfmncRes = await hasuListFetch(
             page,
             sggOrCity,
@@ -219,7 +218,7 @@ export const pbnstPrfmncActionsExport: (set: any) => pbnstPrfmncActions = (
             prfPbnFclts
           );
 
-          return set((state: pbnstPrfmncState) => ({
+          set((state: pbnstPrfmncState) => ({
             ...state,
             prfmnc: {
               ...state.prfmnc,
@@ -229,10 +228,12 @@ export const pbnstPrfmncActionsExport: (set: any) => pbnstPrfmncActions = (
               pageKey: state.prfmnc.pageKey + 1,
             },
           }));
+          return "하수재이용 시설 실적 등록이 완료되었습니다.";
         }
+        return failMessage;
       } catch (e) {
         console.log(e);
-        toast.error("하수재이용 시설 실적 등록이 실패하였습니다.");
+        return failMessage;
       }
     },
   };
diff --git a/apps/wr/app/store/prfmncSttn/chkgdnSttn/rainChkgdnSttn/excel.tsx b/apps/wr/app/store/prfmncSttn/chkgdnSttn/rainChkgdnSttn/excel.tsx
index cf1cd93a5..f002b8718 100644
--- a/apps/wr/app/store/prfmncSttn/chkgdnSttn/rainChkgdnSttn/excel.tsx
+++ b/apps/wr/app/store/prfmncSttn/chkgdnSttn/rainChkgdnSttn/excel.tsx
@@ -1,25 +1,30 @@
+import { codeToText, formatYyyymmdd } from "@/components/lib/func/common";
+const toExcelString = (value: unknown) => {
+  if (value === null || value === undefined) return "";
+  return String(value);
+};
 
 export const buildingExcelRainSttn = (excelList: any[]) => {
   const excelData: string[][] = [];
   excelList.forEach((item) => {
     excelData.push([
-      String(item.cityText) ?? "",
-      String(item.sggText) ?? "",
-      String(item.bdstNm) ?? "",
-      item.operMngCd ||  String(item.operMngCd)===null? String(item.operMngCd) : "",
-      String(item.oilqMeasMthd) ?? "",
-      String(item.anlOperCst) ?? "",
-      String(item.dtfcltCpct) ?? "",
-      String(item.chckYmd) ?? "",
-      String(item.utztnUsgCd) ?? "",
-      String(item.totalSplyUswtrUtztnQnt) ?? "",
-      String(item.totalRuseFcltUtztnQnt) ?? "",
-      String(item.ph) ?? "",
-      String(item.trbt) ?? "",
-      String(item.grssClfg) ?? "",
-      String(item.vltnDt) ?? "",
-      String(item.vltnMttr) ?? "",
-      String(item.levyAmt) ?? "",
+      toExcelString(item.cityText),
+      toExcelString(item.sggText),
+      toExcelString(item.bdstNm),
+      toExcelString(item.operMngCd),
+      toExcelString(item.oilqMeasMthd),
+      toExcelString(item.anlOperCst),
+      toExcelString(item.dtfcltCpct),
+      formatYyyymmdd(item.chckYmd), // 점검일
+      toExcelString(codeToText(item.utztnUsgCd, "dmdUszCd") ?? item.utztnUsgCd),
+      toExcelString(item.totalSplyUswtrUtztnQnt),
+      toExcelString(item.totalRuseFcltUtztnQnt),
+      toExcelString(item.ph),
+      toExcelString(item.trbt),
+      toExcelString(item.grssClfg),
+      toExcelString(item.vltnDt),
+      toExcelString(item.vltnMttr),
+      toExcelString(item.levyAmt),
     ]);
   });
 
diff --git a/apps/wr/app/store/prfmncSttn/chkgdnSttn/rainChkgdnSttn/headList.tsx b/apps/wr/app/store/prfmncSttn/chkgdnSttn/rainChkgdnSttn/headList.tsx
index 51b9634d3..48909e20e 100644
--- a/apps/wr/app/store/prfmncSttn/chkgdnSttn/rainChkgdnSttn/headList.tsx
+++ b/apps/wr/app/store/prfmncSttn/chkgdnSttn/rainChkgdnSttn/headList.tsx
@@ -1,61 +1,25 @@
 import type { TableUpperProps } from "@/app/store/common/type/header";
 
 export const rainChkgdnHeadSttnExport: TableUpperProps[] = [
-  { id: 'order', title: "순번", mergeCell: true },
-  { id: "cityText", title: "시도", mergeCell: true },
-  { id: "sggText", title: "시군구", mergeCell: true },
-  { id: "bdstNm", title: "시설명", mergeCell: true },
-  { id: "operMngCdText", title: "운영관리형태", mergeCell: true },
-  { id: "oilqMeasMthdText", title: "유량측정방법", mergeCell: true },
-  { id: "anlOperCst", title: "연간운영비(원/년)", mergeCell: true },
-  { id: "dtfcltCpct", title: "빗물저류조용량(m³)", mergeCell: true },
-  { id: "chckYmd", title: "점검일", mergeCell: true },
-  { id: "utztnUsgCdText", title: "이용용도" },
-  { id: "totalSplyUswtrUtztnQnt", title: "연간대체수이용량(m³)" },
-  { id: "totalRuseFcltUtztnQnt", title: "연간빗물이용량(m³)" },
-  {
-    id: "ph",
-    title: "수소이온농도(pH)",
-    upName: "useQuilty",
-    upSequnce: 1,
-    type: "number",
-  },
-  {
-    id: "trbt",
-    title: "탁도(NTU)",
-    upName: "useQuilty",
-    upSequnce: 2,
-    type: "number",
-  },
-  {
-    id: "grssClfg",
-    title: "총대장균군수(개/mg)",
-    upName: "useQuilty",
-    upSequnce: 3,
-    type: "number",
-  },
+  { id: 'order', title: "순번", mergeCell: true, widthPercent: 4 },
+  { id: "cityText", title: "시도", mergeCell: true, widthPercent: 5 },
+  { id: "sggText", title: "시군구", mergeCell: true, widthPercent: 5 },
+  { id: "bdstNm", title: "시설명", mergeCell: true, widthPercent: 7 },
+  { id: "operMngCdText", title: "운영관리형태", mergeCell: true, widthPercent: 6 },
+  { id: "oilqMeasMthdText", title: "유량측정방법", mergeCell: true, widthPercent: 6 },
+  { id: "anlOperCst", title: "연간운영비(원/년)", mergeCell: true, widthPercent: 7 },
+  { id: "dtfcltCpct", title: "빗물저류조용량(m³)", mergeCell: true, widthPercent: 6 },
+  { id: "chckYmd", title: "점검일", mergeCell: true, widthPercent: 5 },
+  { id: "utztnUsgCdText", title: "이용용도", widthPercent: 5 },
+  { id: "totalSplyUswtrUtztnQnt", title: "연간대체수이용량(m³)", widthPercent: 7 },
+  { id: "totalRuseFcltUtztnQnt", title: "연간빗물이용량(m³)", widthPercent: 7 },
+  { id: "ph", title: "수소이온농도(pH)", upName: "useQuilty", upSequnce: 1, type: "number", widthPercent: 5 },
+  { id: "trbt", title: "탁도(NTU)", upName: "useQuilty", upSequnce: 2, type: "number", widthPercent: 4 },
+  { id: "grssClfg", title: "총대장균군수(개/100㎖)", upName: "useQuilty", upSequnce: 3, type: "number", widthPercent: 5 },
 
-  {
-    id: "vltnDt",
-    title: "부과일(위반일)",
-    upName: "feeHist",
-    upSequnce: 1,
-    type: "text",
-  },
-  {
-    id: "vltnMttr",
-    title: "위반사항",
-    upName: "feeHist",
-    upSequnce: 2,
-    type: "text",
-  },
-  {
-    id: "levyAmt",
-    title: "부과금액(천원)",
-    upName: "feeHist",
-    upSequnce: 3,
-    type: "number",
-  },
+  { id: "vltnDt", title: "부과일(위반일)", upName: "feeHist", upSequnce: 1, type: "text", widthPercent: 5 },
+  { id: "vltnMttr", title: "위반사항", upName: "feeHist", upSequnce: 2, type: "text", widthPercent: 6 },
+  { id: "levyAmt", title: "부과금액(천원)", upName: "feeHist", upSequnce: 3, type: "number", widthPercent: 5 },
 ];
 
 export const ruseSttnHeadListExport: TableUpperProps[] = [
@@ -87,77 +51,62 @@ export const splSttnHeadListExport: TableUpperProps[] = [
   { id: "spl07", title: "7월", upName: "splWater", upSequnce: 8  },
   { id: "spl08", title: "8월", upName: "splWater", upSequnce: 9  },
   { id: "spl09", title: "9월", upName: "splWater", upSequnce: 10 },
-  {
-    id: "spl10",
-    title: "10월",
-    upName: "splWater",
-    upSequnce: 11,
-  },
-  {
-    id: "spl11",
-    title: "11월",
-    upName: "splWater",
-    upSequnce: 12,
-  },
-  {
-    id: "spl12",
-    title: "12월",
-    upName: "splWater",
-    upSequnce: 13,
-  },
+  { id: "spl10", title: "10월", upName: "splWater", upSequnce: 11 },
+  { id: "spl11", title: "11월", upName: "splWater", upSequnce: 12 },
+  { id: "spl12", title: "12월", upName: "splWater", upSequnce: 13 },
 ];
 
-export const rswtDetailHeadListExport: TableUpperProps[] = [
-  { id: "utztnUsgCdText", title: "이용용도" },
+// export const rswtDetailHeadListExport: TableUpperProps[] = [
+//   { id: "utztnUsgCdText", title: "이용용도" },
 
-  {
-    id: "grssClfgUswtr",
-    title: "총대장균군수",
-    upName: "detailQulity",
-    upSequnce: 2,
-  },
-  {
-    id: "combResdch",
-    title: "결합잔류염소",
-    upName: "detailQulity",
-    upSequnce: 3,
-  },
-  {
-    id: "trbt",
-    title: "탁도",
-    upName: "detailQulity",
-    upSequnce: 4,
-  },
-  {
-    id: "bod",
-    title: "BOD",
-    upName: "detailQulity",
-    upSequnce: 5,
-  },
-  {
-    id: "smll",
-    title: "냄새",
-    upName: "detailQulity",
-    upSequnce: 6,
-  },
-  {
-    id: "crmty",
-    title: "색도",
-    upName: "detailQulity",
-    upSequnce: 7,
-  },
-  { id: "tn", title: "T-N", upName: "detailQulity", upSequnce: 8},
-  {
-    id: "tph",
-    title: "T-P",
-    upName: "detailQulity",
-    upSequnce: 9,
-  },
-  { id: "ph", title: "pH", upName: "detailQulity", upSequnce: 10 },
-  {
-    id: "clIonQnt",
-    title: "염화물",
-    upName: "detailQulity",
-    upSequnce: 11,
-  },
-];
+//   {
+//     id: "grssClfgUswtr",
+//     title: "총대장균군수",
+//     upName: "detailQulity",
+//     upSequnce: 2,
+//   },
+//   {
+//     id: "combResdch",
+//     title: "결합잔류염소",
+//     upName: "detailQulity",
+//     upSequnce: 3,
+//   },
+//   {
+//     id: "trbt",
+//     title: "탁도",
+//     upName: "detailQulity",
+//     upSequnce: 4,
+//   },
+//   {
+//     id: "bod",
+//     title: "BOD",
+//     upName: "detailQulity",
+//     upSequnce: 5,
+//   },
+//   {
+//     id: "smll",
+//     title: "냄새",
+//     upName: "detailQulity",
+//     upSequnce: 6,
+//   },
+//   {
+//     id: "crmty",
+//     title: "색도",
+//     upName: "detailQulity",
+//     upSequnce: 7,
+//   },
+//   { id: "tn", title: "T-N", upName: "detailQulity", upSequnce: 8},
+//   {
+//     id: "tph",
+//     title: "T-P",
+//     upName: "detailQulity",
+//     upSequnce: 9,
+//   },
+//   { id: "ph", title: "pH", upName: "detailQulity", upSequnce: 10 },
+//   {
+//     id: "clIonQnt",
+//     title: "염화물",
+//     upName: "detailQulity",
+//     upSequnce: 11,
+//   },
+// ];
diff --git a/apps/wr/app/store/prfmncSttn/chkgdnSttn/rainChkgdnSttn/index.tsx b/apps/wr/app/store/prfmncSttn/chkgdnSttn/rainChkgdnSttn/index.tsx
index e99bdb7a8..7eb4f5396 100644
--- a/apps/wr/app/store/prfmncSttn/chkgdnSttn/rainChkgdnSttn/index.tsx
+++ b/apps/wr/app/store/prfmncSttn/chkgdnSttn/rainChkgdnSttn/index.tsx
@@ -43,16 +43,16 @@ export type rainChkSttnType = rainChkSttnState & rainChkSttnActions;
 
 export const rainChkSttnStateExport: rainChkSttnState = {
   rainChkSttn: {
-    rainChkRes: [],
-    fcltDiv: fcltDiv,
-    rainChkgdnHeadList: rainChkgdnHeadList,
-    ruseHeadList: ruseHeadList,
-    splHeadList: splHeadList,
-    rainHeadNm: rainHeadNm,
-    isInit: false,
-    sttnExcelList: [],
-    isSttn: false,
-    rainChkCount: 1,
+    rainChkRes: [], // 빗물이용시설 지도점검 현황 메인 목록 데이터
+    fcltDiv: fcltDiv, // 시설 구분 RST 중수도시설, RNB 빗물이용시설
+    rainChkgdnHeadList: rainChkgdnHeadList, // 메인 목록 테이블 헤더 정의
+    ruseHeadList: ruseHeadList, // 연간 빗물이용량 상세 테이블 헤더 정의
+    splHeadList: splHeadList, // 연간 대체수이용량 상세 테이블 헤더 정의
+    rainHeadNm: rainHeadNm, // 메인 목록 다단 헤더명 정의
+    isInit: false, // 현황 화면 초기 조회 완료 여부
+    sttnExcelList: [], // 엑셀 다운로드용 가공 데이터
+    isSttn: false, // 등록/현황 화면 구분 및 읽기 전용 제어 플래그
+    rainChkCount: 1, // 메인 목록 전체 건수
   },
 };
 
diff --git a/apps/wr/app/store/prfmncSttn/chkgdnSttn/rswtChkgdnSttn/excel.tsx b/apps/wr/app/store/prfmncSttn/chkgdnSttn/rswtChkgdnSttn/excel.tsx
index 55eaf2df1..579af0706 100644
--- a/apps/wr/app/store/prfmncSttn/chkgdnSttn/rswtChkgdnSttn/excel.tsx
+++ b/apps/wr/app/store/prfmncSttn/chkgdnSttn/rswtChkgdnSttn/excel.tsx
@@ -1,35 +1,40 @@
+import { codeToText, formatYyyymmdd } from "@/components/lib/func/common";
+const toExcelString = (value: unknown) => {
+  if (value === null || value === undefined) return "";
+  return String(value);
+};
 
 export const buildingExcelRswtSttn = (excelList: any[]) => {
-    const excelData: string[][] = [];
-    excelList.forEach((item) => {
-      excelData.push([
-        String(item.cityText) ?? "",
-        String(item.sggText) ?? "",
-        String(item.bdstNm) ?? "",
-        item.operMngCd===null ? "":item.operMngCd,
-        String(item.anlOperCst) ?? "",
-        String(item.prcsCpct) ?? "",
-        item.spwtPositn===null ? "":item.spwtPositn,
-        item.chckYmd ?? "",
-        String(item.utztnUsgCd) ?? "",
-        String(item.splyUswtrUtztnQnt) ?? "",
-        String(item.ruseFcltUtztnQnt) ?? "",
-        String(item.grssClfgUswtr) ?? "",
-        String(item.combResdch) ?? "",
-        String(item.trbt) ?? "",
-        String(item.bod) ?? "",
-        String(item.smll) ?? "",
-        String(item.crmty) ?? "",
-        String(item.tn) ?? "",
-        String(item.tph) ?? "",
-        String(item.ph) ?? "",
-        String(item.clIonQnt) ?? "",
-        String(item.vltnDt) ?? "",
-        String(item.vltnMttr) ?? "",
-        String(item.levyAmt) ?? "",
-      ]);
-    });
+  const excelData: string[][] = [];
+  excelList.forEach((item) => {
+    excelData.push([
+      toExcelString(item.cityText),
+      toExcelString(item.sggText),
+      toExcelString(item.bdstNm),
+      toExcelString(item.operMngCd),
+      toExcelString(item.anlOperCst),
+      toExcelString(item.prcsCpct),
+      toExcelString(item.spwtPositn),
+      formatYyyymmdd(item.chckYmd), // 점검일
+      toExcelString(codeToText(item.utztnUsgCd, "dmdUszCd") ?? item.utztnUsgCd), // 이용용도
+      toExcelString(item.splyUswtrUtztnQnt),
+      toExcelString(item.ruseFcltUtztnQnt),
+      toExcelString(item.grssClfgUswtr),
+      toExcelString(item.combResdch),
+      toExcelString(item.trbt),
+      toExcelString(item.bod),
+      toExcelString(item.smll),
+      toExcelString(item.crmty),
+      toExcelString(item.tn),
+      toExcelString(item.tph),
+      toExcelString(item.ph),
+      toExcelString(item.clIonQnt),
+      toExcelString(item.vltnDt),
+      toExcelString(item.vltnMttr),
+      toExcelString(item.levyAmt),
+    ]);
+  });
+
+  return excelData;
+};
   
-    return excelData;
-  };
-  
\ No newline at end of file
diff --git a/apps/wr/app/store/prfmncSttn/chkgdnSttn/rswtChkgdnSttn/headList.tsx b/apps/wr/app/store/prfmncSttn/chkgdnSttn/rswtChkgdnSttn/headList.tsx
index 831266e36..6a0a925d2 100644
--- a/apps/wr/app/store/prfmncSttn/chkgdnSttn/rswtChkgdnSttn/headList.tsx
+++ b/apps/wr/app/store/prfmncSttn/chkgdnSttn/rswtChkgdnSttn/headList.tsx
@@ -1,142 +1,45 @@
 import type { TableUpperProps } from "@/app/store/common/type/header";
 
 export const rswtChkSttnHeadListExport: TableUpperProps[] = [
-  { id: "order", title: "순번", mergeCell: true },
-  { id: "cityText", title: "시도", mergeCell: true },
-  { id: "sggText", title: "시군구", mergeCell: true },
-  { id: "bdstNm", title: "시설명", mergeCell: true },
-  { id: "operMngCd", title: "운영관리형태", mergeCell: true },
-  { id: "anlOperCst", title: "연간운영비(원/년)", mergeCell: true },
-  { id: "prcsCpct", title: "처리용량(m³)", mergeCell: true },
-  { id: "spwtPositn", title: "채수지점", mergeCell: true },
-  { id: "chckYmd", title: "점검일", mergeCell: true },
-  { id: "utztnUsgCdText", title: "이용용도" },
-  { id: "splyUswtrUtztnQnt", title: "연간보급수이용량(m³)", type: "number" },
-  { id: "ruseFcltUtztnQnt", title: "연간중수도이용량(m³)", type: "number" },
+  { id: "order", title: "순번", mergeCell: true, widthPercent: 4 },
+  { id: "cityText", title: "시도", mergeCell: true, widthPercent: 7 },
+  { id: "sggText", title: "시군구", mergeCell: true, widthPercent: 5 },
+  { id: "bdstNm", title: "시설명", mergeCell: true, widthPercent: 10 },
+  { id: "operMngCd", title: "운영관리형태", mergeCell: true, widthPercent: 6 },
+  { id: "anlOperCst", title: "연간운영비(원/년)", mergeCell: true, widthPercent: 7 },
+  { id: "prcsCpct", title: "처리용량(m³)", mergeCell: true, widthPercent: 6 },
+  { id: "spwtPositn", title: "채수지점", mergeCell: true, widthPercent: 6 },
+  { id: "chckYmd", title: "점검일", mergeCell: true, widthPercent: 7 },
+  { id: "utztnUsgCdText", title: "이용용도", widthPercent: 7 },
+  { id: "splyUswtrUtztnQnt", title: "연간보급수이용량(m³)", type: "number", widthPercent: 5 },
+  { id: "ruseFcltUtztnQnt", title: "연간중수도이용량(m³)", type: "number", widthPercent: 5 },
 
-  {
-    id: "grssClfgUswtr",
-    title: "총대장균군수(개/mg)",
-    upName: "useQuilty",
-    upSequnce: 1,
-    type: "number",
-  },
-  {
-    id: "combResdch",
-    title: "결합잔류염소(mh/L)",
-    upName: "useQuilty",
-    upSequnce: 2,
-    type: "number",
-  },
-  {
-    id: "trbt",
-    title: "탁도(NTU)",
-    upName: "useQuilty",
-    upSequnce: 3,
-    type: "number",
-  },
-  {
-    id: "bod",
-    title: "BOD(mg/L)",
-    upName: "useQuilty",
-    upSequnce: 4,
-    type: "number",
-  },
-  {
-    id: "smll",
-    title: "냄새",
-    upName: "useQuilty",
-    upSequnce: 5,
-    type: "text",
-  },
-  {
-    id: "crmty",
-    title: "색도(도)",
-    upName: "useQuilty",
-    upSequnce: 6,
-    type: "number",
-  },
-  { id: "tn", title: "총질소(T-N)(mg/L)", upName: "useQuilty", upSequnce: 7, type: "number" },
-  {
-    id: "tph",
-    title: "총인(T-P)(mg/L)",
-    upName: "useQuilty",
-    upSequnce: 8,
-    type: "number",
-  },
-  { id: "ph", title: "수소이온농도(pH)", upName: "useQuilty", upSequnce: 9, type: "text" },
-  {
-    id: "clIonQnt",
-    title: "염화물(mg/L)",
-    upName: "useQuilty",
-    upSequnce: 10,
-    type: "number",
-  },
+  { id: "grssClfgUswtr", title: "총대장균군수(개/100㎖)", upName: "useQuilty", upSequnce: 1, type: "number", widthPercent: 6 },
+  { id: "combResdch", title: "결합잔류염소(mh/L)", upName: "useQuilty", upSequnce: 2, type: "number", widthPercent: 6 },
+  { id: "trbt", title: "탁도(NTU)", upName: "useQuilty", upSequnce: 3, type: "number", widthPercent: 4 },
+  { id: "bod", title: "BOD (mg/L)", upName: "useQuilty", upSequnce: 4, type: "number", widthPercent: 4 },
+  { id: "smll", title: "냄새", upName: "useQuilty", upSequnce: 5, type: "text", widthPercent: 4 },
+  { id: "crmty", title: "색도(도)", upName: "useQuilty", upSequnce: 6, type: "number", widthPercent: 4 },
+  { id: "tn", title: "총질소(T-N)(mg/L)", upName: "useQuilty", upSequnce: 7, type: "number", widthPercent: 5 },
+  { id: "tph", title: "총인(T-P)(mg/L)", upName: "useQuilty", upSequnce: 8, type: "number", widthPercent: 5 },
+  { id: "ph", title: "수소이온농도(pH)", upName: "useQuilty", upSequnce: 9, type: "text", widthPercent: 5 },
+  { id: "clIonQnt", title: "염화물(mg/L)", upName: "useQuilty", upSequnce: 10, type: "number", widthPercent: 5 },
 
-  {
-    id: "vltnDt",
-    title: "부과일(위반일)",
-    upName: "feeHist",
-    upSequnce: 1,
-    type: "text",
-  },
-  {
-    id: "vltnMttr",
-    title: "위반사항",
-    upName: "feeHist",
-    upSequnce: 2,
-    type: "text",
-  },
-  {
-    id: "levyAmt",
-    title: "부과금액(천원)",
-    upName: "feeHist",
-    upSequnce: 3,
-    type: "number",
-  },
+  { id: "vltnDt", title: "부과일(위반일)", upName: "feeHist", upSequnce: 1, type: "text", widthPercent: 5 },
+  { id: "vltnMttr", title: "위반사항", upName: "feeHist", upSequnce: 2, type: "text", widthPercent: 6 },
+  { id: "levyAmt", title: "부과금액(천원)", upName: "feeHist", upSequnce: 3, type: "number", widthPercent: 5 },
 ];
 
 export const rswtDetailSttnHeadListExport: TableUpperProps[] = [
-  { id: "utztnUsgCd", title: "이용용도" },
-
-  {
-    id: "grssClfgUswtr",
-    title: "총대장균군수",
-    upName: "detailQulity",
-    upSequnce: 2,
-  },
-  {
-    id: "combResdch",
-    title: "결합잔류염소",
-    upName: "detailQulity",
-    upSequnce: 3,
-  },
-  {
-    id: "trbt",
-    title: "탁도",
-    upName: "detailQulity",
-    upSequnce: 4,
-  },
-  { id: "bod", title: "BOD", upName: "detailQulity", upSequnce: 5 },
-  {
-    id: "smll",
-    title: "냄새",
-    upName: "detailQulity",
-    upSequnce: 6,
-  },
-  {
-    id: "crmty",
-    title: "색도",
-    upName: "detailQulity",
-    upSequnce: 7,
-  },
-  { id: "tn", title: "T-N", upName: "detailQulity", upSequnce: 8},
-  { id: "tph", title: "T-P", upName: "detailQulity", upSequnce: 9 },
-  { id: "ph", title: "pH", upName: "detailQulity", upSequnce: 10 },
-  {
-    id: "clIonQnt",
-    title: "염화물",
-    upName: "detailQulity",
-    upSequnce: 11,
-  },
+  { id: "utztnUsgCd", title: "이용용도", widthPercent: 20 },
+  { id: "grssClfgUswtr", title: "총대장균군수", upName: "detailQulity", upSequnce: 2, widthPercent: 8 },
+  { id: "combResdch", title: "결합잔류염소", upName: "detailQulity", upSequnce: 3, widthPercent: 8 },
+  { id: "trbt", title: "탁도", upName: "detailQulity", upSequnce: 4, widthPercent: 8 },
+  { id: "bod", title: "BOD", upName: "detailQulity", upSequnce: 5, widthPercent: 8 },
+  { id: "smll", title: "냄새", upName: "detailQulity", upSequnce: 6, widthPercent: 8 },
+  { id: "crmty", title: "색도", upName: "detailQulity", upSequnce: 7, widthPercent: 8 },
+  { id: "tn", title: "T-N", upName: "detailQulity", upSequnce: 8, widthPercent: 8 },
+  { id: "tph", title: "T-P", upName: "detailQulity", upSequnce: 9, widthPercent: 8 },
+  { id: "ph", title: "pH", upName: "detailQulity", upSequnce: 10, widthPercent: 8 },
+  { id: "clIonQnt", title: "염화물", upName: "detailQulity", upSequnce: 11, widthPercent: 8 },
 ];
diff --git a/apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/headList.tsx b/apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/headList.tsx
index b6641a796..0df7ec37c 100644
--- a/apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/headList.tsx
+++ b/apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/headList.tsx
@@ -5,31 +5,36 @@ export const pbnstPrfmncSttnHeadListExport: TableUpperProps[] = [
         id: "number",
         title: "No",
         rowSpan: 2,
-        row: 0
+        row: 0,
+        widthPercent: 4,
     },
     {
         id: "sido",
         title: "시도",
         rowSpan: 2,
-        row: 0
+        row: 0,
+        widthPercent: 6,
     },
     {
         id: "gugun",
         title: "시군구",
         rowSpan: 2,
-        row: 0
+        row: 0,
+        widthPercent: 6,
     },
     {
         id: "bscFctNm",
         title: "시설명",
         rowSpan: 2,
-        row: 0
+        row: 0,
+        widthPercent: 10,
     },
     {
         id: "ruseUtztnFcltNm",
         title: "재이용시설명",
         rowSpan: 2,
-        row: 0
+        row: 0,
+        widthPercent: 12,
     },
 
 ]
@@ -39,22 +44,26 @@ export const pbnstYearHeadListExport: TableUpperProps[] = [
         id: "year",
         title: "년도",
         colSpan: 3,
-        row: 0
+        row: 0,
+        widthPercent: 18,
     },
     {
         id: "total",
         title: "계(m³)",
-        row: 1
+        row: 1,
+        widthPercent: 6,
     },
     {
         id: "inUsage",
         title: "장내용수(m³)",
-        row: 1
+        row: 1,
+        widthPercent: 6,
     },
     {
         id: "outUsage",
         title: "장외용수(m³)",
-        row: 1
+        row: 1,
+        widthPercent: 6,
     },
 ]
 
@@ -78,4 +87,4 @@ export const monthSttnHeadListExport: TableUpperProps[] = [
   { id: "10월", title: "10"  },
   { id: "11월", title: "11월" },
   { id: "12월", title: "12월",  },
-];
\ No newline at end of file
+];
diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx
index 0dc6e3f75..9f1901f07 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx
@@ -1,7 +1,7 @@
-import { getFetchWithCount, postFectch, putFectch, deleteFectch } from "@/components/lib/api";
+import { getFetchWithCount, postFectch, putFectch, deleteFectch } from "@/components/lib/api";
 
+import { DEFAULT_LIST_SIZE } from "@/src/shared/config";
 import type { TableUpperProps } from "@/app/store/common/type/header";
-import toast from "react-hot-toast";
 import { z } from "zod";
 import { makeMdfr, makeRstr } from "../bdstReg";
 import {
@@ -100,9 +100,9 @@ export type htdflFacState = {
 type htdflFacSActions = {
   initHtdflReg: (code: string) => void;
   htdflNmSearch: (code: string | number, fcltNm:string) => void;
-  htdflBdstUpdate: (data: customHtdflBdst, code: string | number,myUUID:string) => void;
-  htdflBdstReg: (data: customHtdflBdst, code: string | number,myUUID:string) => void;
-  htdflBdstDelete: (data: customHtdflBdst, code: string | number) => void;
+  htdflBdstUpdate: (data: customHtdflBdst, code: string | number,myUUID:string) => Promise<string>;
+  htdflBdstReg: (data: customHtdflBdst, code: string | number,myUUID:string) => Promise<string>;
+  htdflBdstDelete: (data: customHtdflBdst, code: string | number) => Promise<string>;
   getHtdflBdstData: (pageNation: number, code: string | number) => void;
   resetHtdflTableIndex:(index:number)=>void;
 };
@@ -122,7 +122,7 @@ export const htdflFacStateExport: htdflFacState = {
 
 const initFetch = async (code: string) => {
 
-  let url = `/drain/facilityList/1/11` 
+    let url = `/drain/facilityList/1/${DEFAULT_LIST_SIZE}`
     
     url+=`/${code}`
 
@@ -138,7 +138,7 @@ export const htdflFacActionsExport: (set: any) => htdflFacSActions = (
       try {
         const htdflRes = await getFetchWithCount(
           "wr",
-          `/drain/facilityList/${pageNation}/11/${code}`
+          `/drain/facilityList/${pageNation}/${DEFAULT_LIST_SIZE}/${code}`
         );
         return set((state: htdflFacState) => ({
           ...state,
@@ -172,15 +172,17 @@ export const htdflFacActionsExport: (set: any) => htdflFacSActions = (
       }
     },
     htdflBdstUpdate: async (data: customHtdflBdst, code: string | number,myUUID:string) => {
+      const successMessage = "온배수 시설물 수정이 완료되었습니다.";
+      const failMessage = "온배수 시설물 수정 오류입니다..";
       try {
         const chData = await makeMdfr(data,myUUID);
         const res = await putFectch("/drain/facility", chData);
-        if (res.status) {
-          toast.success("온배수 시설물 수정이 완료되었습니다.");
+        if (!res.status) {
+          return failMessage;
         }
         const htdflRes = await getFetchWithCount(
           "wr",
-          `/drain/facilityList/1/11/${code}`
+          `/drain/facilityList/1/${DEFAULT_LIST_SIZE}/${code}`
         );
         set((state: htdflFacState) => ({
           ...state,
@@ -191,20 +193,23 @@ export const htdflFacActionsExport: (set: any) => htdflFacSActions = (
             isInit: false,
           },
         }));
+        return successMessage;
       } catch (errorUpdate) {
-        toast.error("온배수 시설물 수정 오류입니다..");
         console.log(errorUpdate);
+        return failMessage;
       }
     },
     htdflBdstReg: async (data: customHtdflBdst, code: string | number,myUUID:string) => {
+      const successMessage = "온배수 시설 등록이 완료되었습니다.";
+      const failMessage = "온배수 시설물 등록 오류입니다..";
       try {
         // data는 단일 객체이므로 .map을 사용할 수 없습니다.
         // 등록 시에는 건축물 변경 이력이 없으므로 chgBuilding을 빈 배열로 설정하고,
         // API가 배열을 기대하므로 단일 객체를 배열로 감싸줍니다.
         const chData = makeRstr(data,myUUID);
         const res = await postFectch("/drain/facility", chData);
-        if (res.status ===200) {
-            toast.success("온배수 시설 등록이 완료되었습니다.");
+        if (res.status !== 200) {
+          return failMessage;
         }
         const htdflRes = await initFetch(String(code));
         set((state: htdflFacState) => ({
@@ -216,17 +221,18 @@ export const htdflFacActionsExport: (set: any) => htdflFacSActions = (
             isInit: false,
           },
         }));
+        return successMessage;
       } catch (errorReg) {
-        toast.error("온배수 시설물 등록 오류입니다..");
         console.log(errorReg);
-
+        return failMessage;
       }
     },
     // 온배수시설을 삭제한다.
     htdflBdstDelete: async (data: customHtdflBdst, code: string | number) => {
+      const successMessage = `${data.bdstNm} 시설이 삭제되었습니다.`;
+      const failMessage = "삭제 중 오류가 발생했습니다.";
       try {
         await deleteFectch(`/drain/facility/${data.reuseBuilding?.[0]?.bdstRuseFcltSn}`);
-        toast.success(`${data.bdstNm} 시설이 삭제되었습니다.`);
 
         const htdflRes = await initFetch(String(code));
         set((state: htdflFacState) => ({
@@ -237,16 +243,16 @@ export const htdflFacActionsExport: (set: any) => htdflFacSActions = (
             htdflResCount: htdflRes.count,
           },
         }));
+        return successMessage;
       } catch (e) {
         console.log("e", e);
-        const errorMessage = e instanceof Error ? e.message : "삭제 중 오류가 발생했습니다.";
-        toast.error(errorMessage);
+        return e instanceof Error ? e.message : failMessage;
       } finally {
       }
     },
     htdflNmSearch :async(code:string | number, fcltNm:string) =>{
       try {
-        const htdflRes = await getFetchWithCount("wr", `/drain/facilityList/1/11/${code}/${fcltNm}`);
+        const htdflRes = await getFetchWithCount("wr", `/drain/facilityList/1/${DEFAULT_LIST_SIZE}/${code}/${fcltNm}`);
         set((state: htdflFacState) => {
           return {
             ...state,
@@ -279,3 +285,4 @@ export const htdflFacActionsExport: (set: any) => htdflFacSActions = (
 
   };
 };
+
diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx
index 5d77c64ca..1c50b63e1 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx
@@ -151,7 +151,7 @@ export const businessSttnInfo: formDetailType[] = [
 
 export const ruseWaterQulityList: formDetailType[] = [
   { id: "bod", lable: "BOD(mg/L)", type: "text", maxLenght:numSize },
-  { id: "grssClfg", lable: "총대장균군수(개/mg)", type: "text" , maxLenght:numSize},
+  { id: "grssClfg", lable: "총대장균군수(개/100㎖)", type: "text" , maxLenght:numSize},
   { id: "combResdch", lable: "결합잔류염소(mh/L)", type: "text" , maxLenght:numSize},
   { id: "trbt", lable: "탁도(NTU)", type: "text" , maxLenght:numSize},
   { id: "smll", lable: "냄새", type: "text", maxLenght:numSize },
diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx
index d595a0624..0b395d1b3 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx
@@ -1,11 +1,13 @@
-import { TEST_UUID } from "../rainReg";
+import { TEST_UUID } from "../rainReg";
 import {
   deleteFectch,
   fetchType,
   getFetch,
   postFectch,
   putFectch,
+  getFetchWithCount
 } from "@/components/lib/api";
+import { DEFAULT_LIST_SIZE, SITE_ID } from "@/src/shared/config";
 import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList";
 import {
   type customPbnst,
@@ -24,7 +26,6 @@ import {
   fcOrgwtsHeadListExport,
 } from "./headList";
 import type { TableUpperProps } from "@/app/store/common/type/header";
-import toast from "react-hot-toast";
 
 /**
  *   하수재이용시설 등록 (스토어)
@@ -61,18 +62,20 @@ export type pubFacState = {
     dmdComList: any[];
     apiMessage: string;
     pbnstHasuResCount: number;
+    fclts: any[] | null;
   };
 };
 type pubFacActions = {
-  pubHasuInit: (page: string, sggOrCity: string) => void;
+  pubHasuInit: (page: number, sggOrCity: string) => void;
   pbnstRegClick: (pubHasuRes: pubHasuType) => void;
   //pbnstReg: (txt: string | undefined) => void;
-  pbnstInsert(pbnstRes: customPbnst): Promise<void>;
+  pbnstInsert(pbnstRes: customPbnst): Promise<string>;
   fileDelete: (atflCd: string) => void;
   fileDownLoad: (atflCd: string) => void;
+  fileDownLoadName: (atflCd: string, fileName: string) => void;
   pbnstRuseFcltUpdate: (ruseRes: customPbnst[]) => void;
   pbnstRuseBizUpdate: (ruseRes: fcBizType[]) => void;
-  pubHasuSearch: (page: string, sggOrCity: string, searchTxt: string) => void;
+  pubHasuSearch: (page: number, sggOrCity: string, searchTxt: string) => void;
   getFcOrgwts: (fcltPkList: string[], size: number) => void;
 };
 export type pubFacType = pubFacState & pubFacActions;
@@ -97,38 +100,59 @@ export const pubFacStateExport: pubFacState = {
     dmdComList: [],
     apiMessage: "",
     pbnstHasuResCount: 1,
+    fclts: null,
   },
 };
+// 재사용시설에 대한 정보 조회
+export const checkWrRegList = async (get: any, set: any) => {
+  const { pbnst } = get();
+
+  if (Array.isArray(pbnst.fclts)) {
+    return pbnst.fclts;
+  }
 
-export const checkWrRegList = async () => {
   const wrRegList = await getFetch("wr", `/reuseFc/pubFc`);
-  return wrRegList;
-};
+  const fclts = Array.isArray(wrRegList) ? wrRegList : [];
 
+  set((state: pubFacState) => ({
+    ...state,
+    pbnst: {
+      ...state.pbnst,
+      fclts,
+    },
+  }));
+
+  return fclts;
+};
+// 하수처리시설 정보 조회
 const hasuListFetch = async (
-  page: string,
-  sggOrCity: string,
+  get: any,
+  set: any,
+  page: number = 1,
+  sggOrCity: string, // 해당 지자체의 하수처리시설 조회
   searchTxt?: string
 ) => {
-  const checkWrRegListRes = await checkWrRegList();
+  const wrData = await checkWrRegList(get, set); // 재사용시설에 대한 정보 조회
+  const wrBscFctCdSet = new Set(
+    wrData
+      .map((wrItem: any) => (typeof wrItem === "string" ? wrItem.trim() : ""))
+  );
 
-  let url = `/prcsFclt/ruseInfo/${page ? page : 1}/11/A/${sggOrCity ? sggOrCity : "11"}/0/1/SW`;
-
-  const data = checkWrRegListRes.filter((item: string) => item !== "");
-  if (searchTxt) {
-    url = url + `/${searchTxt}`;
+  let url = `/prcsFclt/ruseInfo/reg/${page}/${DEFAULT_LIST_SIZE}/A/${sggOrCity ? sggOrCity : "0"}/0/1/SW`;
+  if (searchTxt?.trim()) {
+    url += `?swtrmtFcltNm=${encodeURIComponent(searchTxt.trim())}`;
   }
-  const rainRes = await postFectch(url, data, fetchType.COMMON); // fo
+  const fcltRes = await getFetchWithCount(fetchType.COMMON, url); // fo
 
-  const hasuList = rainRes.data.map((item: any) => {
+  const hasuList = fcltRes.data.map((item: any) => {
     return {
       ...item,
       fctCpc: Number(item.fctCpc) || 0,
-      ruse: item.ruse === false ? "N" : "Y",
+      ruse: item?.bscFctCd && wrBscFctCdSet.has(item.bscFctCd) ? "Y" : "N",
     };
   });
 
-  return { data: hasuList, count: rainRes.count };
+  return { data: hasuList, count: fcltRes.count };
 };
 
 const initFetch = async (ruseFcltPk: string | undefined) => {
@@ -171,12 +195,12 @@ export const writeRgtrAndMdfr = (data: customPbnst[]) => {
 
   return data;
 };
-export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
+export const pubFacActionsExport: (set: any, get: any) => pubFacActions = (set: any, get: any) => {
   return {
     // 하수처리시설을 조회한다(운영실태)
-    pubHasuInit: async (page: string, sggOrCity: string) => {
+    pubHasuInit: async (page: number, sggOrCity: string) => {
       try {
-        const pbnstHasuRes = await hasuListFetch(page, sggOrCity); // /prcsFclt/ruseInfo
+        const pbnstHasuRes = await hasuListFetch(get, set, page, sggOrCity); // /prcsFclt/ruseInfo
         return set((state: pubFacState) => ({
           ...state,
           pbnst: {
@@ -191,12 +215,12 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
     },
     // 하수처리시설을 조회한다(운영실태) (처리시설명 포함)
     pubHasuSearch: async (
-      page: string,
+      page: number,
       sggOrCity: string,
       searchTxt: string
     ) => {
       try {
-        const pbnstHasuRes = await hasuListFetch(page, sggOrCity, searchTxt);
+        const pbnstHasuRes = await hasuListFetch(get, set, page, sggOrCity, searchTxt);
         return set((state: pubFacState) => ({
           ...state,
           pbnst: {
@@ -226,26 +250,31 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
     },
     // 하수재이용시설을 등록한다.
     pbnstInsert: async (pbnstRes: customPbnst) => {
+      const successMessage = `${pbnstRes.ruseUtztnFcltNm}  하수재이용 시설이 등록되었습니다.`;
+      const failMessage = "하수재이용 시설 등록 중 오류가 발생했습니다.";
       try {
         const response = await postFectch(`/reuseFc/pubFc`, pbnstRes);
-        if (response.status === 200) {
-          toast.success(
-            `${pbnstRes.ruseUtztnFcltNm}  하수재이용 시설이 등록되었습니다.`
-          );
+        if (response.status !== 200) {
+          return failMessage;
         }
 
         const newPbnstRes = await initFetch(
           pbnstRes.pbnstRuseFcltId.slice(0, 11)
         );
-        return set((state: pubFacState) => ({
+        const wrRegList = await getFetch("wr", `/reuseFc/pubFc`);
+        const fclts = Array.isArray(wrRegList) ? wrRegList : [];
+        set((state: pubFacState) => ({
           ...state,
           pbnst: {
             ...state.pbnst,
             pbnstRes: newPbnstRes,
+            fclts,
           },
         }));
+        return successMessage;
       } catch (error) {
         console.error("Error updating pbnst:", error);
+        return failMessage;
       }
     },
     // 하수재이용시설을 업데이트한다.(사업제외) 다르게하는 이유는 객체가 너무커서 분활 처리하려고
@@ -296,6 +325,35 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
         throw new Error(`Error downloading file: ${error}`);
       }
     },
+    // 파일다운로드(원본 파일명 지정) : 화면에 보여지는 파일명으로 저장
+    fileDownLoadName: async (atflCd: string, fileName: string) => {
+      try {
+        const response = await fetch(
+          `/attach-service/api/v1/atflcd/download/${atflCd}`,
+          {
+            method: "GET",
+            headers: {
+              accept: "application/octet-stream",
+              "X-Site-Id": SITE_ID,
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`오류 발생: ${response.status}`);
+        }
+        console.log(response);
+        const blob = await response.blob();
+        const blobUrl = window.URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = blobUrl;
+        a.download = fileName || "downloaded_file";
+        a.click();
+        window.URL.revokeObjectURL(blobUrl);
+      } catch (error) {
+        console.error("Error downloading file with name:", error);
+        throw new Error(`Error downloading file with name: ${error}`);
+      }
+    },
     //원수취수 팝업의 하수처리 시설 리스트 조회
     getFcOrgwts: async (fcltPkList: string[], size: number) => {
       const fcOrgwtsNmList = await postFectch(
@@ -314,3 +372,4 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
     },
   };
 };
+
diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx
index 226de8f17..c39d3d72b 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx
@@ -62,12 +62,20 @@ export type PbnstDemandComType = {
 export const pubHasuZod = z.object({
   choose: z.boolean().default(false),
   bscFctCd: z.string(),
-  sido: z.string().default(""),
-  gugun: z.string().default(""),
-  bscFctNm: z.string().default(""),
-  efflWqltStndrdNm: z.string().default(""),
-  fctCpc: z.number().default(0),
-  addr: z.string().nullish(),
+  rvbsnCd: z.string().default(""),          // 권역코드
+  rvbsn: z.string().default(""),
+  lgbsn: z.string().default(""),
+  mdmbsn: z.string().default(""),
+  rgnNm: z.string().default(""),
+  rgnCd: z.string().default(""),            // 지역코드
+  adstDstrCd: z.string().default(""),       // 행정구역코드
+  sido: z.string().default(""),             // 시도
+  gugun: z.string().default(""),            // 구군 
+  bscFctNm: z.string().default(""),         // 시설명
+  efflWqltStndrdNm: z.string().default(""), // 지역구분
+  tel: z.string().default(""),
+  fctCpc: z.number().default(0),            // 시설용량
+  addr: z.string().nullish(),               // 위치
 });
 
 export type pubHasuType = z.infer<typeof pubHasuZod>;
@@ -258,6 +266,15 @@ const PrfSchema = z.object({
 export const pbnstRegZod = z.object({
   pbnstRuseFcltId: z.string().default(""),
   swtrmtFcltId: z.string().default(""),
+  swageTrtmfctId: z.string().default(""),
+  swageBscFctNm: z.string().default(""),
+  swageRgnCd: z.string().default(""),
+  swageAdstDstrCd: z.string().default(""),
+  swageRvbsnCd: z.string().default(""),
+  swageFctCpc: z.preprocess(
+    (v) => (v !== null && v !== undefined ? Number(v) : v),
+    z.number().default(0)
+  ),
   ruseUtztnFcltNm: //z.string().default(''),
   z.preprocess(
     (v) => (v !== null && v !== undefined ? String(v).trim() : ""), // null/undefined → "", 공백 제거
diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx
index e95c4c48d..ce6da6334 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx
@@ -1,4 +1,4 @@
-import type { TableUpperProps } from "@/app/store/common/type/header";
+import type { TableUpperProps } from "@/app/store/common/type/header";
 import {
   deleteFectch,
   fetchType,
@@ -6,7 +6,7 @@ import {
   postFectch,
   putFectch,
 } from "@/components/lib/api";
-import toast from "react-hot-toast";
+import { DEFAULT_LIST_SIZE } from "@/src/shared/config";
 import { z } from "zod";
 import { makeMdfr, makeRstr } from "../bdstReg";
 import {
@@ -15,7 +15,7 @@ import {
   validationMessages,
 } from "./type";
 export const TEST_UUID = "2d4b151d-1828-41e0-91d9-4cd28ea1cc7e";
-export const rainRegSize = 15;
+export const rainRegSize = DEFAULT_LIST_SIZE;
 
 /**
  *   밧물이용시설 등록 (스토어)
@@ -96,9 +96,9 @@ type rainFacSActions = {
   initRain: (code: string | number) => void;
   getRainData: (pageNation: number, code: string | number) => void;
   rainSearch: (txt: string, pageNation: number, code: string) => void;
-  rainBdstReg: (data: customRainBdst, code: string | number,myUUID:string) => void;
-  rainBdstUpdate: (data: customRainBdst, code: string | number,myUUID:string) => void;
-  rainBdstDelete: (data: customRainBdst, code: string | number) => void;
+  rainBdstReg: (data: customRainBdst, code: string | number,myUUID:string) => Promise<string>;
+  rainBdstUpdate: (data: customRainBdst, code: string | number,myUUID:string) => Promise<string>;
+  rainBdstDelete: (data: customRainBdst, code: string | number) => Promise<string>;
   resetRainTableIndex:(index:number)=>void;
 };
 
@@ -187,9 +187,13 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = (
     },
     // 빗물 이용시설을 등록한다.
     rainBdstReg: async (data: customRainBdst, code: string | number,myUUID:string) => {
+      const successMessage = "건축물 등록이 완료되었습니다.";
+      const failMessage = "등록시 오류가 발생하였습니다.";
+      const changeBuildingFailMessage = "건축물 증축/개축/재축 오류입니다.";
       try {
         const test = await makeRstr(data,myUUID);
         const res = await postFectch("/reuseFc/rainyInfo", test);
+        let message = failMessage;
         if (res.status === 200) {
           if (data.chgBuilding.length > 0) {
             const chPK = res?.data?.bdstInfoSn;
@@ -200,15 +204,13 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = (
             const chch = await postFectch("/reuseFc/chgBuilding", makeCh);
 
             if (chch.status === 200) {
-              toast.success("건축물 등록이 완료되었습니다.");
+              message = successMessage;
             } else {
-              toast.error("건축물 증축/개축/재축 오류입니다.");
+              message = changeBuildingFailMessage;
             }
           } else {
-            toast.success("건축물 등록이 완료되었습니다.");
+            message = successMessage;
           }
-        } else {
-          toast.error("건축물 등록이 완료되었습니다.");
         }
         const rainRes = await initFetch(code);
         set((state: rainFacState) => ({
@@ -219,17 +221,21 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = (
             rainResCount: rainRes.count,
           },
         }));
+        return message;
       } catch (e) {
         console.log("e", e);
-        toast.error("등록시 오류가 발생하였습니다.");
-      } finally {
+        return failMessage;
       }
     },
     // 빗물이용시설 시설에 대한 사항을 업데이트한다
     rainBdstUpdate: async (data: customRainBdst, code: string | number,myUUID:string) => {
+      const successMessage = "건축물 수정이 완료되었습니다.";
+      const failMessage = "수정시 오류가 발생하였습니다.";
+      const changeBuildingFailMessage = "건축물 증축/개축/재축 오류입니다.";
       try {
         const chData = await makeMdfr(data,myUUID);
         const res = await putFectch("/reuseFc/rainyInfo", chData);
+        let message = failMessage;
         if (res.status === 200) {
           if (data.chgBuilding.length > 0) {
             const chPK = data?.bdstInfoSn;
@@ -240,17 +246,14 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = (
             const chch = await postFectch("/reuseFc/chgBuilding", makeCh);
 
             if (chch.status === 200) {
-              toast.success("건축물 수정이 완료되었습니다.");
+              message = successMessage;
             } else {
-              toast.error("건축물 증축/개축/재축 오류입니다.");
+              message = changeBuildingFailMessage;
             }
           } else {
-
            await deleteFectch("/reuseFc/DeleteChgBuilding" , data.bdstInfoSn);
-            toast.success("건축물 수정이 완료되었습니다.");
+            message = successMessage;
           }
-        } else {
-          toast.error("건축물 수정이 완료되었습니다.");
         }
 
         const rainRes = await initFetch(code);
@@ -262,17 +265,18 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = (
             rainResCount: rainRes.count,
           },
         }));
+        return message;
       } catch (e) {
         console.log("e", e);
-        toast.error("수정시 오류가 발생하였습니다.");
-      } finally {
+        return failMessage;
       }
     },
     // 빗물 이용시설을 삭제한다.
     rainBdstDelete: async (data: customRainBdst, code: string | number) => {
+      const successMessage = `${data.bdstNm} 시설이 삭제되었습니다.`;
+      const failMessage = "삭제 중 오류가 발생했습니다.";
       try {
         await deleteFectch(`/reuseFc/rainyInfo/${data.reuseBuilding?.[0]?.bdstRuseFcltSn}`);
-        toast.success(`${data.bdstNm} 시설이 삭제되었습니다.`);
 
         const rainRes = await initFetch(code);
         set((state: rainFacState) => ({
@@ -283,10 +287,10 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = (
             rainResCount: rainRes.count,
           },
         }));
+        return successMessage;
       } catch (e) {
         console.log("e", e);
-        const errorMessage = e instanceof Error ? e.message : "삭제 중 오류가 발생했습니다.";
-        toast.error(errorMessage);
+        return e instanceof Error ? e.message : failMessage;
       } finally {
       }
     },
@@ -306,3 +310,4 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = (
     },
   };
 };
+
diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx
index f38636507..816d6ab52 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx
@@ -1,8 +1,8 @@
-import { deleteFectch, getFetchWithCount, postFectch, putFectch } from "@/components/lib/api";
+import { deleteFectch, getFetchWithCount, postFectch, putFectch } from "@/components/lib/api";
 import { upHeadList, type chgBuilding } from "../rainReg";
 
+import { DEFAULT_LIST_SIZE } from "@/src/shared/config";
 import type { TableUpperProps } from "@/app/store/common/type/header";
-import toast from "react-hot-toast";
 import { z } from "zod";
 import { makeMdfr, makeRstr } from "../bdstReg";
 import { baseReuseBuildingSchema, chgBuildingSchema, validationMessages } from "../rainReg/type";
@@ -15,7 +15,7 @@ import { baseReuseBuildingSchema, chgBuildingSchema, validationMessages } from "
  * 재이용시설 등록 - 중수도시설 등록
  *  중수도시설에서 사용하는 api 및 타입 등을 관리한다.
  *  */
-export const rswtRegSize =15;
+export const rswtRegSize = DEFAULT_LIST_SIZE;
 const rswtrObjSchema = z.object({
   bdstRuseFcltSn: z.number().nullish(),
   orgwtKndCd: z.string({ required_error: validationMessages.requiredSelect("원수 종류") }).min(1, { message: validationMessages.requiredSelect("원수 종류") }),
@@ -67,15 +67,15 @@ export type rswtFacState = {
 };
 type rswtFacSActions = {
   initRswt: (code: string | number) => void;
-  rswtBdstUpdate: (data: customRswtBdst, code: string | number,myUUID:string) => void;
+  rswtBdstUpdate: (data: customRswtBdst, code: string | number,myUUID:string) => Promise<string>;
   getRswtBdstData: (pageNation: number, code: string | number) => void;
   rswtBdstSearch: (
     txt: string,
     pageNation: number,
     code: string | number
   ) => void;
-  rswtBdstReg: (data: customRswtBdst, code: string | number,myUUID:string) => void;
-  rswtBdstDelete: (data: customRswtBdst, code: string | number) => void;
+  rswtBdstReg: (data: customRswtBdst, code: string | number,myUUID:string) => Promise<string>;
+  rswtBdstDelete: (data: customRswtBdst, code: string | number) => Promise<string>;
   resetRswtTableIndex:(index:number)=>void;
 };
 
@@ -162,9 +162,13 @@ export const rswtFacActionsExport: (set: any) => rswtFacSActions = (
     },
           // 중수도 시설에 대한 사항을 업데이트한다 
     rswtBdstUpdate: async (data: customRswtBdst, code: string | number,myUUID:string) => {
+      const successMessage = "중수도 건축물 수정이 완료되었습니다.";
+      const failMessage = "중수도 건축물 수정 오류입니다.";
+      const changeBuildingFailMessage = "중수도 건축물 증축/개축/재축 오류입니다.";
       try {
         const chData = await makeMdfr(data,myUUID);
         const res = await putFectch("/reuseFc/waterreuseFc", chData);
+        let message = failMessage;
         if (res.status === 200) {
           if (data.chgBuilding.length > 0) {
             const chPK = data?.bdstInfoSn;
@@ -177,16 +181,14 @@ export const rswtFacActionsExport: (set: any) => rswtFacSActions = (
             const chch = await postFectch("/reuseFc/chgBuilding", makeCh);
 
             if (chch.status === 200) {
-              toast.success("중수도 건축물 수정이 완료되었습니다.");
+              message = successMessage;
             } else {
-              toast.error("중수도 건축물 증축/개축/재축 오류입니다.");
+              message = changeBuildingFailMessage;
             }
           } else {
             await deleteFectch("/reuseFc/DeleteChgBuilding" , data.bdstInfoSn);
-            toast.success("중수도 건축물 수정이 완료되었습니다.");
+            message = successMessage;
           }
-        } else {
-          toast.error("중수도 건축물 수정이 완료되었습니다.");
         }
         const rswtRes = await initFetch(code);
         set((state: rswtFacState) => ({
@@ -197,18 +199,23 @@ export const rswtFacActionsExport: (set: any) => rswtFacSActions = (
             rswtResCount: rswtRes.count,
           },
         }));
+        return message;
 
       } catch (errorUpdate) {
-        toast.error("중수도 건축물 수정 오류입니다.");
         console.error(errorUpdate);
-      } finally {
+        return failMessage;
       }
     },
               // 중수도 시설을 등록한다.
     rswtBdstReg: async (data: customRswtBdst, code: string | number,myUUID:string) => {
+      const successMessage = "건축물(중수도) 등록이 완료되었습니다.";
+      const successWithChangeMessage = "건축물(중수도) 및  증축/개축/재축 등록이 완료되었습니다.";
+      const failMessage = "등록시 오류가 발생하였습니다.";
+      const changeBuildingFailMessage = "건축물(중수도) 증축/개축/재축 오류입니다.";
       try {
         const chData = await makeRstr(data,myUUID);
         const res = await postFectch("/reuseFc/waterreuseFc", chData);
+        let message = failMessage;
         if (res.status === 200) {
           if (data.chgBuilding.length > 0) {
 
@@ -223,15 +230,13 @@ export const rswtFacActionsExport: (set: any) => rswtFacSActions = (
 
             if (chch.status === 200) {
 
-              toast.success("건축물(중수도) 및  증축/개축/재축 등록이 완료되었습니다.");
+              message = successWithChangeMessage;
             } else {
-              toast.error("건축물(중수도) 증축/개축/재축 오류입니다.");
+              message = changeBuildingFailMessage;
             }
           } else {
-            toast.success("건축물(중수도) 등록이 완료되었습니다.");
+            message = successMessage;
           }
-        } else {
-          toast.error("건축물(중수도) 등록이 완료하였습니다.");
         }
         const rswtRes = await initFetch(code);
         set((state: rswtFacState) => ({
@@ -242,17 +247,18 @@ export const rswtFacActionsExport: (set: any) => rswtFacSActions = (
             rswtResCount: rswtRes.count,
           },
         }));
+        return message;
       } catch (e) {
         console.log("e", e);
-        toast.error("등록시 오류가 발생하였습니다.");
-      } finally {
+        return failMessage;
       }
     },
     // 중수도시설을 삭제한다.
     rswtBdstDelete: async (data: customRswtBdst, code: string | number) => {
+      const successMessage = `${data.bdstNm} 시설이 삭제되었습니다.`;
+      const failMessage = "삭제 중 오류가 발생했습니다.";
       try {
         await deleteFectch(`/reuseFc/waterreuseFc/${data.reuseBuilding?.[0]?.bdstRuseFcltSn}`);
-        toast.success(`${data.bdstNm} 시설이 삭제되었습니다.`);
 
         const rswtRes = await initFetch(code);
         set((state: rswtFacState) => ({
@@ -263,10 +269,10 @@ export const rswtFacActionsExport: (set: any) => rswtFacSActions = (
             rswtResCount: rswtRes.count,
           },
         }));
+        return successMessage;
       } catch (e) {
         console.log("e", e);
-        const errorMessage = e instanceof Error ? e.message : "삭제 중 오류가 발생했습니다.";
-        toast.error(errorMessage);
+        return e instanceof Error ? e.message : failMessage;
       } finally {
       }
     },
@@ -286,3 +292,4 @@ export const rswtFacActionsExport: (set: any) => rswtFacSActions = (
         },
   };
 };
+
diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/htdflSttn/headList.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/htdflSttn/headList.tsx
index a37067775..76049d5c9 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltSttn/htdflSttn/headList.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/htdflSttn/headList.tsx
@@ -7,94 +7,112 @@ export const htdflSttHeadListExport: z.infer<typeof sttnHeadListType> = [
     id: "cityText",
     title: "시도",
     visible: true,
+    widthPercent: 4,
   },
   {
     id: "sggText",
     title: "시군구",
     visible: true,
+    widthPercent: 4,
   },
   {
     id: "bdstNm",
     title: "발전소명",
     visible: true,
+    widthPercent: 7,
   },
   {
     id: "daddr",
     title: "주소",
     visible: true,
+    widthPercent: 9,
   },
   {
     id: "frstArchPrmsnDt",
     title: "준공년월",
     visible: true,
+    widthPercent: 5,
   },
   {
     id: "etgtType",
     title: "발전유형",
     visible: true,
+    widthPercent: 4,
   },
   {
     id: "fclCpct",
     title: "설비용량(KW)",
     visible: true,
+    widthPercent: 5,
   },
   {
     id: "plwtYn",
     title: "담수화여부",
     visible: true,
+    widthPercent: 4,
   },
   {
     id: "orgwtWtritSpt",
     title: "원수취수지점",
     visible: true,
+    widthPercent: 5,
   },
   {
     id: "wtritEntrcTp",
     title: "취수구온도(℃)",
     visible: true,
+    widthPercent: 5,
   },
 
   {
     id: "orgwtOcrnProcs",
     title: "원수발생공정",
     visible: true,
+    widthPercent: 6,
   },
 
   {
     id: "amtgnr",
     title: "발생량",
     visible: true,
+    widthPercent: 5,
   },
   {
     id: "prcsProcsYn",
     title: "처리공정여부",
     visible: true,
+    widthPercent: 4,
   },
   {
     id: "prcsFcltCpct",
     title: "처리시설용량(m³)",
     visible: true,
+    widthPercent: 6,
   },
   {
     id: "fmYn",
     title: "유량계여부",
     visible: true,
+    widthPercent: 4,
   },
   {
     id: "utztnCpct",
     title: "이용량(m³)",
     visible: true,
+    widthPercent: 5,
   },
   {
     id: "utztnUsg",
     title: "이용용도",
     visible: true,
+    widthPercent: 4,
   },
 
   {
     id: "emsnExitTp",
     title: "배출구온도(℃)",
     visible: true,
+    widthPercent: 4,
   },
  
 ];
diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx
index ac766b0b3..cca75609f 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx
@@ -6,31 +6,31 @@ import type {
 import { z } from "zod";
 
 export const pbnSttHeadListExport: z.infer<typeof sttnHeadListType> = [
-  { id: "rvbsn", title: "권역", visible: true },
-  { id: "lgbsn", title: "단위유역", visible: true, },
-  { id: "mdmbsn", title: "중권역", visible: true, },
-  { id: "rgnNm", title: "환경청", visible: true },
-  { id: "sido", title: "시도", visible: true, },
-  { id: "gugun", title: "시군구", visible: true, },
-  { id: "bscFctNm", title: "시설명", visible: true },
-  { id: "efflWqltStndrdNm", title: "지역구분", visible: true },
+  { id: "rvbsn", title: "권역", visible: true, widthPercent: 4 },
+  { id: "lgbsn", title: "단위유역", visible: true, widthPercent: 4 },
+  { id: "mdmbsn", title: "중권역", visible: true, widthPercent: 4 },
+  { id: "rgnNm", title: "환경청", visible: true, widthPercent: 5 },
+  { id: "sido", title: "시도", visible: true, widthPercent: 4 },
+  { id: "gugun", title: "시군구", visible: true, widthPercent: 4 },
+  { id: "bscFctNm", title: "시설명", visible: true, widthPercent: 7 },
+  { id: "efflWqltStndrdNm", title: "지역구분", visible: true, widthPercent: 5 },
 
-  { id: "tel", title: "전화번호", visible: true },
-  { id: "fctCpc", title: "시설용량(톤/일)", visible: true },
-  { id: "ruseUtztnFcltNm", title: "재이용시설명", visible: true },
+  { id: "tel", title: "전화번호", visible: true, widthPercent: 6 },
+  { id: "fctCpc", title: "시설용량(톤/일)", visible: true, widthPercent: 5 },
+  { id: "ruseUtztnFcltNm", title: "재이용시설명", visible: true, widthPercent: 7 },
 
-  { id: "fcltCpct", title: "시설용량(m³/일)", visible: true, },
-  { id: "splyExtraCpct", title: "하수처리량(m³/일)", visible: true, },
-  { id: "ruseCpct", title: "재이용량(m³/일)", visible: true, },
+  { id: "fcltCpct", title: "시설용량(m³/일)", visible: true, widthPercent: 5 },
+  { id: "splyExtraCpct", title: "하수처리량(m³/일)", visible: true, widthPercent: 5 },
+  { id: "ruseCpct", title: "재이용량(m³/일)", visible: true, widthPercent: 5 },
 
-  { id: "usageTotal", title: "합계", visible: true, },
-  { id: "inUsage", title: "장내용수", visible: true, },
-  { id: "outUsage", title: "장외용수", visible: true, },
+  { id: "usageTotal", title: "합계", visible: true, widthPercent: 4 },
+  { id: "inUsage", title: "장내용수", visible: true, widthPercent: 4 },
+  { id: "outUsage", title: "장외용수", visible: true, widthPercent: 4 },
 
-  { id: "operMthd", title: "운영방식", visible: true, },
-  { id: "rprtvBzenty", title: "대행업체", visible: true, },
-  { id: "bgngDt", title: "시작일", visible: true, },
-  { id: "endDt", title: "종료일", visible: true, },
+  { id: "operMthd", title: "운영방식", visible: true, widthPercent: 4 },
+  { id: "rprtvBzenty", title: "대행업체", visible: true, widthPercent: 5 },
+  { id: "bgngDt", title: "시작일", visible: true, widthPercent: 4 },
+  { id: "endDt", title: "종료일", visible: true, widthPercent: 4 },
 ];
 
 // id는 다확인해야함
@@ -102,7 +102,7 @@ export const rusePplHeadListExport: TableUpperProps[] = [
 export const ruseGuranteeHeadListExport: TableUpperProps[] = [
   { id: "cycl", title: "차수", visible: true },
   { id: "bod", title: "BOD(mg/L)", visible: true },
-  { id: "grssClfg", title: "총대장균군수(개/mg)", visible: true },
+  { id: "grssClfg", title: "총대장균군수(개/100㎖)", visible: true },
   { id: "combResdch", title: "결합잔류염소(mh/L)", visible: true },
   { id: "trbt", title: "탁도(NTU)", visible: true },
   { id: "smll", title: "냄새", visible: true },
diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx
index 9e2c47a04..5b2a72acf 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx
@@ -3,7 +3,7 @@ import type {
   TableUpperProps,
 } from "@/app/store/common/type/header";
 import type { FcPrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
-import { fetchType, getFetch, postFectch } from "@/components/lib/api";
+import { fetchType, getFetch, getFetchWithCount, postFectch } from "@/components/lib/api";
 import type { ReturnType } from "@common/business_components/ui";
 import moment from "moment";
 import { type z } from "zod";
@@ -47,12 +47,22 @@ export type pbnstSttnState = {
     pbnstSttnResCount: number;
     excelList: [];
     fclts: string[];
-    isInit: boolean;
+    isFcltsLoaded: boolean; // wr 하수재이용시설 목록 조회 여부
+    isTableLoaded: boolean; // 현황 테이블 초기 조회 여부
   };
 };
 
 type pbnstSttnActions = {
   pbnstChSttnHead: (headList: z.infer<typeof sttnHeadListType>) => void;
+  pbnstSttnList: (
+    isExcel: boolean,
+    page: string,
+    total: string,
+    reurnValue: ReturnType,
+    searchNm: string | undefined,
+    year: string,
+    fclts: string[]
+  ) => void;
   pbnstSttnSearch: (
     isExcel: boolean,
     page: string,
@@ -100,7 +110,8 @@ export const pbnstSttnStateExport: pbnstSttnState = {
     pbnstSearchData: [],
     excelList: [],
     fclts: [],
-    isInit: false,
+    isFcltsLoaded: false,
+    isTableLoaded: false,
   },
 };
 
@@ -112,74 +123,70 @@ export const hasuListFetch = async (
   year: string,
   flcts: string[]
 ) => {
+
+  // 시설 코드가 없으면 FO 조회를 호출하지 않고 빈 결과 반환
+  if (flcts.length === 0) {
+    return { data: [], count: 0 };
+  }
+
   let url = ``;
   let filteredFclt = flcts;
-  const filterData =
-    reurnValue.sigunValue !== "0"
-      ? reurnValue.sigunValue
-      : reurnValue.sidoValue;
-
-  if (filterData !== "0")
-    filteredFclt = flcts.filter((fclt: string) => {
-      return filterData.length == 2
-        ? fclt.slice(0, 2) === filterData
-        : fclt.slice(0, 5) === filterData;
-    });
-  if (reurnValue.partValue === "A") {
-    url += `${reurnValue.partValue}/${
-      // reurnValue.sidoValue ? reurnValue.sidoValue : reurnValue.sigunValue
-      reurnValue.sigunValue !== "0"
-        ? reurnValue.sigunValue
-        : reurnValue.sidoValue
-    }/0/1/SW`;
-
-    if (filterData !== "0")
-      filteredFclt = flcts.filter((fclt: string) => {
-        return filterData.length == 2
-          ? fclt.slice(0, 2) === filterData
-          : fclt.slice(0, 5) === filterData;
-      });
-  } else if (reurnValue.partValue === "R") {
-    url += `${reurnValue.partValue}/${
-      reurnValue.regionValue
-        ? reurnValue.regionValue
-        : reurnValue.unitWaterShedValue
-          ? reurnValue.unitWaterShedValue
-          : reurnValue.middleRegionValue
-    }/0/1/SW`;
-  } else if (reurnValue.partValue === "G") {
-    url += `${reurnValue.envPartValue}/${reurnValue.sigunValue !== "0" ? reurnValue.sigunValue : reurnValue.sidoValue}/0/1/SW`;
-    if (filterData !== "0")
-      filteredFclt = flcts.filter((fclt: string) => {
-        return filterData.length == 2
-          ? fclt.slice(0, 2) === filterData
-          : fclt.slice(0, 5) === filterData;
-      });
-  } else {
-    url += `A/0/0/1/SW`;
+  let nameCd="0", partStr="A", sidogunValue="0";
+  switch (reurnValue.partValue) {
+    case 'R': // 유역별
+      if (reurnValue.regionValue !== '0') {
+        if(reurnValue.unitWaterShedValue==='0') nameCd = reurnValue.regionValue;
+        else if (reurnValue.middleRegionValue==='0') nameCd = reurnValue.unitWaterShedValue;
+        else nameCd = reurnValue.middleRegionValue;
+      }
+      partStr = reurnValue.partValue;
+      break;
+    default:
+      if(reurnValue.sidoValue && reurnValue.sidoValue !== '0') nameCd = reurnValue.sidoValue;
+      if(reurnValue.sigunValue &&reurnValue.sigunValue !== '0') nameCd = reurnValue.sigunValue;
+      sidogunValue = nameCd;
+      partStr = reurnValue.envPartValue !== '0' ? reurnValue.envPartValue:'A';
+      break;
   }
 
+  if (sidogunValue && sidogunValue !== "0") { // 시도, 시군구 조회 조건이 있다면
+    filteredFclt = flcts.filter((fclt: string) => {
+      return sidogunValue.length == 2
+        ? fclt.slice(0, 2) === sidogunValue
+        : fclt.slice(0, 5) === sidogunValue;
+    });
+  }
+   
+  url = `${partStr}/${nameCd}/0/1/SW`; 
+
   if (searchNm && searchNm?.length > 0) {
     url += "/" + searchNm;
   }
+  // console.log(url);
 
+  // 시설 코드가 없으면 FO 조회를 호출하지 않고 빈 결과 반환
+  if (filteredFclt.length === 0) {
+    return { data: [], count: 0 };
+  }
+  
+  // fo의 하수처리시설을 조회
   const pbnList = await postFectch(
     `/prcsFclt/ruseInfo/1/${filteredFclt.length}/` + url,
     filteredFclt,
     fetchType.COMMON // FO
   );
 
-  const checkRuseFcltList =
-    searchNm && searchNm?.length > 0
-      ? pbnList.data.map((item) => item.bscFctCd)
-      : filteredFclt;
-      
+  const checkRuseFcltList = pbnList.data.map((item) => item.bscFctCd);
+  // console.log(checkRuseFcltList);
+  
+
   const getRuseList = await postFectch(
-    `/reuseFc/pubDetailList/${year}/${filterData}/${page}/${total}`,
+    `/reuseFc/pubDetailList/${year}/${sidogunValue}/${page}/${total}`,
     checkRuseFcltList,
     fetchType.WR
   );
   const checkWrRegListRes = getRuseList.data;
+  // console.log(getRuseList);
 
   const data: WaterReuseFacility[] = checkWrRegListRes
     .map((item: FcPrfType) => {
@@ -248,6 +255,119 @@ export const hasuListFetch = async (
   return { data: data, count: getRuseList.count };
 };
 
+export const pbnstListFetch = async (
+  page: string,
+  total: string,
+  reurnValue: ReturnType,
+  searchNm: string | undefined,
+  year: string
+) => {
+  let nameCd = "0";
+  let partStr = "A";
+
+  switch (reurnValue.partValue) {
+    case "R":
+      if (reurnValue.regionValue !== "0") {
+        if (reurnValue.unitWaterShedValue === "0") nameCd = reurnValue.regionValue;
+        else if (reurnValue.middleRegionValue === "0") nameCd = reurnValue.unitWaterShedValue;
+        else nameCd = reurnValue.middleRegionValue;
+      }
+      partStr = reurnValue.partValue;
+      break;
+    default:
+      if (reurnValue.sidoValue && reurnValue.sidoValue !== "0") nameCd = reurnValue.sidoValue;
+      if (reurnValue.sigunValue && reurnValue.sigunValue !== "0") nameCd = reurnValue.sigunValue;
+      partStr = reurnValue.envPartValue !== "0" ? reurnValue.envPartValue : "A";
+      break;
+  }
+
+  let url = `/reuseFc/pbnstList/${year}/${page}/${total}/${partStr}/${nameCd}/0/1/SW`;
+  if (searchNm && searchNm.length > 0) {
+    url += `?swtrmtFcltNm=${searchNm}`;
+  }
+
+  const response = await getFetchWithCount(fetchType.WR, url);
+  const wrList: WaterReuseFacility[] = Array.isArray(response.data)
+    ? response.data
+    : [];
+
+  const swtrmtFcltIds = [
+    ...new Set(
+      wrList
+        .map((item: WaterReuseFacility) => {
+          if (item.swtrmtFcltId && item.swtrmtFcltId.length > 0) {
+            return item.swtrmtFcltId;
+          }
+
+          if (item.pbnstRuseFcltId && item.pbnstRuseFcltId.length >= 11) {
+            return item.pbnstRuseFcltId.substring(0, 11);
+          }
+
+          return "";
+        })
+        .filter(Boolean)
+    ),
+  ];
+
+  let pbnListData: pubHasuType[] = [];
+
+  if (swtrmtFcltIds.length > 0) {
+    let foUrl = `/prcsFclt/ruseInfo/1/${swtrmtFcltIds.length + 1}`;
+    if (searchNm && searchNm.length > 0) {
+      foUrl += `/${searchNm}`;
+    }
+
+    const pbnList = await postFectch(
+      foUrl,
+      swtrmtFcltIds,
+      fetchType.COMMON
+    );
+
+    pbnListData = Array.isArray(pbnList?.data) ? pbnList.data : [];
+  }
+
+  const data: WaterReuseFacility[] = wrList.map((item: WaterReuseFacility) => {
+    const swtrmtFcltId =
+      item.swtrmtFcltId && item.swtrmtFcltId.length > 0
+        ? item.swtrmtFcltId
+        : item.pbnstRuseFcltId?.substring(0, 11) ?? "";
+
+    const findData = pbnListData.find(
+      (fclt: pubHasuType) => fclt.bscFctCd === swtrmtFcltId
+    );
+
+    return {
+      ...item,
+      swtrmtFcltId,
+      rvbsn: findData?.rvbsn || item.rvbsn || "-",
+      lgbsn: findData?.lgbsn || item.lgbsn || "-",
+      mdmbsn: findData?.mdmbsn || item.mdmbsn || "-",
+      rgnNm: findData?.rgnNm || item.rgnNm || "-",
+      sido: findData?.sido || item.sido || "-",
+      gugun: findData?.gugun || item.gugun || "-",
+      bscFctNm: findData?.bscFctNm || item.bscFctNm || "-",
+      efflWqltStndrdNm:
+        findData?.efflWqltStndrdNm || item.efflWqltStndrdNm || "-",
+      tel: findData?.tel || item.tel || "-",
+      fctCpc: Number(findData?.fctCpc ?? item.fctCpc) || 0,
+      ruseUtztnFcltNm: item.ruseUtztnFcltNm || "-",
+      fcltCpct: Number(item.fcltCpct) || 0,
+      splyExtraCpct: Number(item.splyExtraCpct) || 0,
+      ruseCpct: Number(item.ruseCpct) || 0,
+      usageTotal: Number(item.usageTotal) || 0,
+      inUsage: Number(item.inUsage) || 0,
+      outUsage: Number(item.outUsage) || 0,
+      operMthd: item.operMthd || "-",
+      rprtvBzenty: item.rprtvBzenty || "-",
+      bgngDt: item.bgngDt || "",
+      endDt: item.endDt || "",
+      prfList: item.prfList ?? [],
+    };
+  });
+
+  return { data, count: response.count };
+};
+
 export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
   set: any
 ) => {
@@ -255,12 +375,56 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
     //등록된 하수재이용시설을 조회한다.
     getFlcts: async () => {
       const fclts = await getFetch(fetchType.WR, "/reuseFc/pubFc");
-      return set((state: pbnstSttnState) => ({
-        pbnstSttn: {
-          ...state.pbnstSttn,
-          fclts: fclts,
-        },
-      }));
+        return set((state: pbnstSttnState) => ({
+          pbnstSttn: {
+            ...state.pbnstSttn,
+            isFcltsLoaded: true,
+            fclts: fclts,
+          },
+        }));
+    },
+    pbnstSttnList: async (
+      isExcel: boolean,
+      page: string,
+      total: string,
+      reurnValue: ReturnType,
+      searchNm: string | undefined,
+      year: string,
+      // _fclts: string[]
+    ) => {
+      try {
+        const pbnstSttnRes = await pbnstListFetch(
+          page,
+          total,
+          reurnValue,
+          searchNm,
+          year
+        );
+
+        if (isExcel) {
+          const pbnstExcel = excelPbnstSttnParsing(pbnstSttnRes.data);
+          set((state: pbnstSttnState) => ({
+            ...state,
+            pbnstSttn: {
+              ...state.pbnstSttn,
+              excelList: pbnstExcel,
+            },
+          }));
+        } else {
+          set((state: pbnstSttnState) => ({
+            ...state,
+            pbnstSttn: {
+              ...state.pbnstSttn,
+              pbnstSttnRes: pbnstSttnRes.data,
+              pbnstSttnResCount: pbnstSttnRes.count,
+              pbnstDetail: {} as customPbnst,
+              isTableLoaded: true,
+            },
+          }));
+        }
+      } catch (error) {
+        console.log("error", error);
+      }
     },
     //테이블 헤드를 조정한다.
     pbnstChSttnHead: async (
@@ -281,12 +445,13 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
       isExcel: boolean,
       page: string,
       total: string,
-      reurnValue: ReturnType,
+      reurnValue: ReturnType, // 검색조건
       searchNm: string | undefined,
       year: string,
       fclts: string[]
     ) => {
       try {
+        // console.log(reurnValue);
         const pbnstSttnRes = await hasuListFetch(
           page,
           total,
@@ -316,7 +481,7 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
                 ...state.pbnstSttn,
                 pbnstSttnRes: pbnstSttnRes.data,
                 pbnstSttnResCount: pbnstSttnRes.count,
-                // isInit: false,
+                isTableLoaded: true,
               },
             };
           });
@@ -350,8 +515,8 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
               ...state.pbnstSttn,
               pbnstSttnRes: pbnstSttnRes.data,
               pbnstSttnResCount: pbnstSttnRes.count,
-              isInit: false,
               pbnstDetail: {} as customPbnst,
+              isTableLoaded: true,
             },
           };
         });
diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type.tsx
index 7d0f8a068..ee202d4f6 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type.tsx
@@ -1,10 +1,11 @@
 import type { PrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
 
 export type WaterReuseFacility = {
+  swtrmtFcltId?: string;
   bscFctNm: string; // 기본시설명 (예: "난지")
   efflWqltStndrdNm: string; // 방류수 수질 기준명 (예: "500톤 이상(Ⅲ지역)")
   fcltCpct: number; // 시설 용량 (숫자형, 예: 1)
-  fctCpc: string; // 시설 처리 능력 (예: "2360000")
+  fctCpc: number; // 시설 처리 능력 (예: 2360000)
   gugun: string; // 구군 정보 (예: " ")
   inUsage: number; // 유입량 (예: 1387)
   lgbsn: string; // 대수계 (예: "한강본류")
diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/rainSttn/headList.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/rainSttn/headList.tsx
index a461b3336..5eae0cbfc 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltSttn/rainSttn/headList.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/rainSttn/headList.tsx
@@ -6,41 +6,43 @@ export const sttnHeadListType = z.array(
     id: z.string(),
     title: z.string(),
     visible: z.boolean(),
+    widthPercent: z.number().optional(),
   })
 );
 
+// 빗물이용시설
 export const rainSttHeadListExport: z.infer<typeof sttnHeadListType> = [
-  { id: "cityText", title: "시도", visible: true, },
-  { id: "sggText", title: "시군구", visible: true, },
-  { id: "bdstNm", title: "건축물명", visible: true, },
-  { id: "daddr", title: "주소", visible: true, },
-  { id: "bdsgUsgText", title: "건축물용도", visible: true, },
-  { id: "frstArchPrmsnDt", title: "최초건축허가일시", visible: true, },
-  { id: "archArea", title: "건축면적", visible: true, },
-  { id: "chBuildingYn", title: "증축・개축・재축여부", visible: true, },
-  { id: "lawTrgtYn", title: "법적의무대상여부", visible: true, },
-  { id: "instlCmptnDt", title: "설치완료일시", visible: true, },
+  { id: "cityText", title: "시도", visible: true, widthPercent: 4 },
+  { id: "sggText", title: "시군구", visible: true, widthPercent: 4 },
+  { id: "bdstNm", title: "건축물명", visible: true, widthPercent: 6 },
+  { id: "daddr", title: "주소", visible: true, widthPercent: 8 },
+  { id: "bdsgUsgText", title: "건축물용도", visible: true, widthPercent: 5 },
+  { id: "frstArchPrmsnDt", title: "최초건축허가일시", visible: true, widthPercent: 6 },
+  { id: "archArea", title: "건축면적", visible: true, widthPercent: 4 },
+  { id: "chBuildingYn", title: "증축・개축・재축여부", visible: true, widthPercent: 4 },
+  { id: "lawTrgtYn", title: "법적의무대상여부", visible: true, widthPercent: 4 },
+  { id: "instlCmptnDt", title: "설치완료일시", visible: true, widthPercent: 5 },
 
-  { id: "instlCst", title: "설치비용", visible: true, },
+  { id: "instlCst", title: "설치비용", visible: true, widthPercent: 6 },
 
-  { id: "pntfColKnd", title: "집수지점종류", visible: true, },
-  { id: "pntfColArea", title: "집수지점면적", visible: true, },
+  { id: "pntfColKnd", title: "집수지점종류", visible: true, widthPercent: 3 },
+  { id: "pntfColArea", title: "집수지점면적", visible: true, widthPercent: 4 },
 
-  { id: "dtfcltCpct", title: "저류조용량", visible: true, },
-  { id: "filtrTrtmfctYn", title: "여과처리시설유무", visible: true, },
-  { id: "filtrTrtmfctCpct", title: "여과처리시설용량", visible: true, },
-  { id: "filtrTrtmfctPrs", title: "여과처리시설처리공정", visible: true, },
+  { id: "dtfcltCpct", title: "저류조용량", visible: true, widthPercent: 4 },
+  { id: "filtrTrtmfctYn", title: "여과처리시설유무", visible: true, widthPercent: 4 },
+  { id: "filtrTrtmfctCpct", title: "여과처리시설용량", visible: true, widthPercent: 5 },
+  { id: "filtrTrtmfctPrs", title: "여과처리시설처리공정", visible: true, widthPercent: 6 },
 
-  { id: "instlCstSprtYn", title: "설치지원비용여부", visible: true, },
-  { id: "instlCstSprtAmt", title: "설치지원비용", visible: true, },
+  { id: "instlCstSprtYn", title: "설치지원비용여부", visible: true, widthPercent: 4 },
+  { id: "instlCstSprtAmt", title: "설치지원비용", visible: true, widthPercent: 5 },
 
-  { id: "grntchBdstCertYn", title: "녹색건축물인증여부", visible: true, },
-  { id: "grntchBdstCertYr", title: "녹색건축물인증년도", visible: true, },
-  { id: "grntchBdstCertNo", title: "녹색건축물인증번호", visible: true, },
-  { id: "grntchBdstCertGrdText", title: "녹색건축물인증등급", visible: true, },
+  { id: "grntchBdstCertYn", title: "녹색건축물인증여부", visible: true, widthPercent: 3 },
+  { id: "grntchBdstCertYr", title: "녹색건축물인증년도", visible: true, widthPercent: 3 },
+  { id: "grntchBdstCertNo", title: "녹색건축물인증번호", visible: true, widthPercent: 4 },
+  { id: "grntchBdstCertGrdText", title: "녹색건축물인증등급", visible: true, widthPercent: 4 },
 ];
 
-// id는 다확인해야함
+// 
 export const rainSttNodeListExport: CommonTableProps[] = [
   { id: "bdnstInfo", title: "건축물정보", visible: true, row: 1, rowSpan: 1, colSpan: 10, },
   { id: "rainFcltInfo", title: "빗물이용시설정보", visible: true, row: 1, rowSpan: 1, colSpan: 7, },
diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/rainSttn/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/rainSttn/index.tsx
index b278a9a22..67de7f687 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltSttn/rainSttn/index.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/rainSttn/index.tsx
@@ -149,6 +149,7 @@ export const rainSttnActionsExport: (set: any) => rainSttnActions = (
               rainSttn: {
                 ...state.rainSttn,
                 excelList: rainExcel,
+                rainSttnResCount: rainSttnRes.count,
               },
             };
           });
@@ -159,6 +160,7 @@ export const rainSttnActionsExport: (set: any) => rainSttnActions = (
               rainSttn: {
                 ...state.rainSttn,
                 rainSttnRes: rainSttnRes.data,
+                rainSttnResCount: rainSttnRes.count,
                 isInit: false,
               },
             };
diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/rswtSttn/headList.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/rswtSttn/headList.tsx
index 5c9dbd638..1702154e7 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltSttn/rswtSttn/headList.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/rswtSttn/headList.tsx
@@ -7,36 +7,43 @@ export const rswtSttHeadListExport: z.infer<typeof sttnHeadListType> = [
     id: "cityText",
     title: "시도",
     visible: true,
+    widthPercent: 4,
   },
   {
     id: "sggText",
     title: "시군구",
     visible: true,
+    widthPercent: 4,
   },
   {
     id: "bdstNm",
     title: "건축물명",
     visible: true,
+    widthPercent: 6,
   },
   {
     id: "daddr",
     title: "주소",
     visible: true,
+    widthPercent: 8,
   },
   {
     id: "bdsgUsgText",
     title: "건축물용도",
     visible: true,
+    widthPercent: 5,
   },
   {
     id: "frstArchPrmsnDt",
     title: "최초건축허가일시",
     visible: true,
+    widthPercent: 6,
   },
   {
     id: "archArea",
     title: "건축면적",
     visible: true,
+    widthPercent: 4,
   },
   // {
   //   id: "wtrUsqty",
@@ -47,12 +54,14 @@ export const rswtSttHeadListExport: z.infer<typeof sttnHeadListType> = [
     id: "chBuildingYn",
     title: "증축・개축・재축여부",
     visible: true,
+    widthPercent: 4,
   },
 
   {
     id: "lawTrgtYn",
     title: "법적의무대상여부",
     visible: true,
+    widthPercent: 4,
   },
   // {
   //   id: "oblgTrgtWtrUsqty",
@@ -63,65 +72,77 @@ export const rswtSttHeadListExport: z.infer<typeof sttnHeadListType> = [
     id: "instlCmptnDt",
     title: "설치완료일시",
     visible: true,
+    widthPercent: 5,
   },
   {
     id: "instlCst",
     title: "설치비용",
     visible: true,
+    widthPercent: 4,
   },
 
   {
     id: "orgwtKndCd",
     title: "원수종류",
     visible: true,
+    widthPercent: 4,
   },
 
   {
     id: "filtrTrtmfctCpct",
     title: "처리시설용량",
     visible: true,
+    widthPercent: 5,
   },
   {
     id: "filtrTrtmfctProcs",
     title: "주요처리공정",
     visible: true,
+    widthPercent: 6,
   },
   {
     id: "filtrTrtmfctUsgCd",
     title: "이용용도",
     visible: true,
+    widthPercent: 4,
   },
 
   {
     id: "instlCstSprtYn",
     title: "설치지원비용여부",
     visible: true,
+    widthPercent: 4,
   },
   {
     id: "instlCstSprtAmt",
     title: "설치지원비용",
     visible: true,
+    widthPercent: 5,
   },
 
   {
     id: "grntchBdstCertYn",
     title: "녹색건축물인증여부",
     visible: true,
+    widthPercent: 3,
   },
   {
     id: "grntchBdstCertYr",
     title: "녹색건축물인증년도",
     visible: true,
+    widthPercent: 3,
   },
   {
     id: "grntchBdstCertNo",
     title: "녹색건축물인증번호",
     visible: true,
+    widthPercent: 4,
   },
   {
     id: "grntchBdstCertGrdText",
     title: "녹색건축물인증등급",
     visible: true,
+    widthPercent: 5,
   },
 ];
 
diff --git a/apps/wr/app/store/stats/rainStat/excel.tsx b/apps/wr/app/store/stats/rainStat/excel.tsx
index db2099d9a..2405872bb 100644
--- a/apps/wr/app/store/stats/rainStat/excel.tsx
+++ b/apps/wr/app/store/stats/rainStat/excel.tsx
@@ -1,41 +1,51 @@
-import type { RainStatProps } from ".";
+import { codeToText } from "@/components/lib/func/common";
+import type { RainStatProps } from ".";
 
-export const excelRainStat = (excelList:RainStatProps[]) : (string | number)[][] => {
+const toUseTypeText = (val: string) =>
+  val
+    .split(",")
+    .map((code) => code.trim())
+    .filter(Boolean)
+    .map((code) => codeToText(code, "dmdUszCd") ?? code)
+    .join(", ");
+
+export const excelRainStat = (
+  excelList: RainStatProps[]
+): (string | number)[][] => {
   const excelData: (string | number)[][] = [];
-    excelList.forEach((item) => {
+  excelList.forEach((item) => {
       excelData.push([
         //시도
         item.ctpvCd ?? "",
         //시군구
         item.sggCd ?? "",
-        //행정구역명
-        String(item.areaNm) ?? "",
+      //행정구역명
+      String(item.areaNm) ?? "",
         //시설명
         String(item.bdstNm) ?? "",
         //건축물용도코드 (값 없음)
-        //String(item.bdstUsgCd) ?? "",
-        "",
+        codeToText(String(item.bdstUsgCd ?? ""), "bdstUsgCd") ?? String(item.bdstUsgCd ?? ""),
         //주소
         String(item.daddr) ?? "",
         //법적의무대상여부
-        String(item.lawTrgtYn)==="Y" ? "대상" : "미대상",
+        String(item.lawTrgtYn) === "Y" ? "대상" : "미대상",
         //설치완료일자
         String(item.instlCmptnDt).substring(0, 10) ?? "",
         //설치비용
         item.instlCst ?? "",
-        //접수면종류
-        String(item.pntfColKnd) ?? "",
+        //집수면종류
+        codeToText(String(item.pntfColKnd ?? ""), "rainFcltCd") ?? String(item.pntfColKnd ?? ""),
         //여과등처리시설유무
         String(item.filtrTrtmfctYn) ?? "",
-        //처리용량(저류조용량)
-        item.dtfcltCpct ?? "",
-        //연간사용량
-        item.wtrUsqty ?? "",
-        //이용용도코드
-        item.utztnUsgCd ?? "",
-        //연간운영비
-        item.anlOperCst ?? "",
-      ]);
-    });
+      //처리용량(저류조용량)
+      item.dtfcltCpct ?? "",
+      //연간사용량
+      item.wtrUsqty ?? "",
+      //이용용도코드
+      toUseTypeText(item.utztnUsgCd ?? ""),
+      //연간운영비
+      item.anlOperCst ?? "",
+    ]);
+  });
   return excelData;
-}
\ No newline at end of file
+};
diff --git a/apps/wr/app/store/stats/rainStat/headList.tsx b/apps/wr/app/store/stats/rainStat/headList.tsx
index 7601919d5..47737635b 100644
--- a/apps/wr/app/store/stats/rainStat/headList.tsx
+++ b/apps/wr/app/store/stats/rainStat/headList.tsx
@@ -1,158 +1,34 @@
 import type { TableUpperProps } from "../../common/type/header";
 
 export const rainStatHeadListExport: TableUpperProps[] = [
-  {
-    id: "ctpvCd",
-    title: "시도",
-    row:0,
-    rowSpan:2
-  },
-  {
-    id: "tmp",
-    title: "개소",
-    row:0,
-    rowSpan:2
-  },
-  {
-    id: "instlCst",
-    title: "설치비(백만원)",
-    row:0,
-    rowSpan:2
-  },
-  {
-    id: "dtfcltCpct",
-    title: "저류조용량(m³/년)",
-    row:0,
-    rowSpan:2
-  },
-  {
-    id: "wtrUsqty",
-    title: "연간사용량(㎥/년)",
-    row:0,
-    rowSpan:2
-  },
-  {
-    id: "a",
-    title: "이용용도",
-    row:0,
-    colSpan:7
-  },
-  {
-    id: "lndwtr",
-    title: "조경용수",
-    commonCode : "01",
-    row:1,
-  },
-  {
-    id: "cleanToilUswtr",
-    title: "청소화장실용수",
-    commonCode : "02",
-    row:1,
-  },
-  {
-    id:"resn",
-    title:"세척살수용수",
-    commonCode : "03",
-    row:1,
-  },
-  {
-    id: "farmUswtr",
-    title: "농업용수",
-    commonCode : "04",
-    row:1,
-  },
-  {
-    id: "indstUswtr",
-    title: "공업용수",
-    commonCode : "05",
-    row:1,
-  },
-  {
-    id: "hydUswtr",
-    title: "친수용수",
-    commonCode : "06",
-    row:1,
-  },
-  {
-    id: "ithlEtcUswtr",
-    title: "기타",
-    commonCode : "07",
-    row:1,
-  },
-  {
-    id: "anlOperCst",
-    title: "연간운영비(백만원/년)",
-    row:0,
-    rowSpan:2
-  },
+  { id: "ctpvCd", title: "시도", row:0, rowSpan:2 },
+  { id: "tmp", title: "개소", row:0, rowSpan:2 },
+  { id: "instlCst", title: "설치비(백만원)", row:0, rowSpan:2 },
+  { id: "dtfcltCpct", title: "저류조용량(m³/년)", row:0, rowSpan:2 },
+  { id: "wtrUsqty", title: "연간사용량(㎥/년)", row:0, rowSpan:2 },
+  { id: "a", title: "이용용도", row:0, colSpan:7 },
+  { id: "lndwtr", title: "조경용수", commonCode : "01", row:1 },
+  { id: "cleanToilUswtr", title: "청소화장실용수", commonCode : "02", row:1 },
+  { id: "resn", title: "세척살수용수", commonCode : "03", row:1 },
+  { id: "farmUswtr", title: "농업용수", commonCode : "04", row:1 },
+  { id: "indstUswtr", title: "공업용수", commonCode : "05", row:1 },
+  { id: "hydUswtr", title: "친수용수", commonCode : "06", row:1 },
+  { id: "ithlEtcUswtr", title: "기타", commonCode : "07", row:1 },
+  { id: "anlOperCst", title: "연간운영비(백만원/년)", row:0, rowSpan:2 },
 ];
 
 export const rainStatDetailHeadListExport: TableUpperProps[] = [
-  {
-    id: "ctpvCd",
-    title: "시도",
-    row:0,
-  },
-  {
-    id: "sggCd",
-    title: "시군구",
-    row:0,
-  },
-  {
-    id: "areaNm",
-    title: "행정구역명",
-    row:0,
-  },
-  {
-    id: "",
-    title: "시설명",
-    row:0,
-  },
-  {
-    id: "이용용도",
-    title: "이용용도",
-    row:0,
-    colSpan:7
-  },
-  {
-    id: "조경용수",
-    title: "조경용수",
-    row:1,
-  },
-  {
-    id: "청소화장실용수",
-    title: "청소화장실용수",
-    row:1,
-  },
-  {
-    id:"세척살수용수",
-    title:"세척살수용수",
-    row:1,
-  },
-  {
-    id: "농업용수",
-    title: "농업용수",
-    row:1,
-  },
-  {
-    id: "공업용수",
-    title: "공업용수",
-    row:1,
-  },
-  {
-    id: "친수용수",
-    title: "친수용수",
-    row:1,
-  },
-  {
-    id: "기타",
-    title: "기타",
-    row:1,
-  },
-  {
-    id: "연간운영비",
-    title: "연간운영비(백만원/년)",
-    row:0,
-    rowSpan:2
-  },
+  { id: "ctpvCd", title: "시도", row:0 },
+  { id: "sggCd", title: "시군구", row:0 },
+  { id: "areaNm", title: "행정구역명", row:0 },
+  { id: "", title: "시설명", row:0 },
+  { id: "이용용도", title: "이용용도", row:0, colSpan:7 },
+  { id: "조경용수", title: "조경용수", row:1 },
+  { id: "청소화장실용수", title: "청소화장실용수", row:1 },
+  { id: "세척살수용수", title: "세척살수용수", row:1 },
+  { id: "농업용수", title: "농업용수", row:1 },
+  { id: "공업용수", title: "공업용수", row:1 },
+  { id: "친수용수", title: "친수용수", row:1 },
+  { id: "기타", title: "기타", row:1 },
+  { id: "연간운영비", title: "연간운영비(백만원/년)", row:0, rowSpan:2 },
 ];
\ No newline at end of file
diff --git a/apps/wr/app/store/stats/rainStat/index.tsx b/apps/wr/app/store/stats/rainStat/index.tsx
index d08db404d..084d6e938 100644
--- a/apps/wr/app/store/stats/rainStat/index.tsx
+++ b/apps/wr/app/store/stats/rainStat/index.tsx
@@ -89,6 +89,7 @@ export const rainStatActionsExport = (
     searchRainStatList: async (year: string, city: SelectDataType[]) => {
       const res = await fetchRainStatList(year);
       const cityArr: any[] = [];
+      excelDownList.length = 0;
 
       res.filter((resFilter: RainStatProps) =>
         city.some((cityCd) =>
@@ -104,7 +105,6 @@ export const rainStatActionsExport = (
           if (obj) {
             obj.instlCst += item.instlCst;
             obj.dtfcltCpct += item.dtfcltCpct;
-            obj.wtrUsqty += item.wtrUsqty;
             obj.anlOperCst += item.anlOperCst;
             obj.tmp += 1;
           } else {
@@ -113,7 +113,7 @@ export const rainStatActionsExport = (
             obj.instlCst = item.instlCst;
             obj.tmp = 1;
             obj.dtfcltCpct = item.dtfcltCpct;
-            obj.wtrUsqty = item.wtrUsqty;
+            obj.wtrUsqty = 0;
             obj.anlOperCst = item.anlOperCst;
             obj.lndwtr = 0; //조경용수
             obj.cleanToilUswtr = 0; //청소화장실용수
@@ -138,6 +138,15 @@ export const rainStatActionsExport = (
               });
             });
           }
+
+          obj.wtrUsqty =
+            obj.lndwtr +
+            obj.cleanToilUswtr +
+            obj.resn +
+            obj.farmUswtr +
+            obj.indstUswtr +
+            obj.hydUswtr +
+            obj.ithlEtcUswtr;
         });
 
       const totalObj = {
@@ -145,7 +154,7 @@ export const rainStatActionsExport = (
         tmp: 0,
         instlCst: 0, //설치비
         dtfcltCpct: 0, //저류조용량
-        bdstUsgCd: 0, //연간사용량
+        wtrUsqty: 0, //연간사용량
         lndwtr: 0, //조경용수
         cleanToilUswtr: 0, //청소화장실용수
         resn: 0, //세척살수용수
@@ -165,8 +174,8 @@ export const rainStatActionsExport = (
         totalObj.dtfcltCpct += !isNaN(Number(item.dtfcltCpct))
           ? Number(item.dtfcltCpct)
           : 0;
-        totalObj.bdstUsgCd += !isNaN(Number(item.bdstUsgCd))
-          ? Number(item.bdstUsgCd)
+        totalObj.wtrUsqty += !isNaN(Number(item.wtrUsqty))
+          ? Number(item.wtrUsqty)
           : 0;
         totalObj.lndwtr += !isNaN(Number(item.lndwtr))
           ? Number(item.lndwtr)
@@ -196,7 +205,7 @@ export const rainStatActionsExport = (
           tmp: item.tmp,
           instlCst: item.instlCst, //설치비
           dtfcltCpct: item.dtfcltCpct, //저류조용량
-          bdstUsgCd: item.bdstUsgCd, //연간사용량
+          wtrUsqty: item.wtrUsqty, //연간사용량
           lndwtr: item.lndwtr, //조경용수
           cleanToilUswtr: item.cleanToilUswtr, //청소화장실용수
           resn: item.resn, //세척살수용수
@@ -208,17 +217,30 @@ export const rainStatActionsExport = (
         });
       });
 
+      cityArr.forEach((item) => {
+        item.instlCst = Math.round(Number(item.instlCst) / 1000000);
+        item.anlOperCst = Math.round(Number(item.anlOperCst) / 1000000);
+      });
+
+      totalObj.instlCst = Math.round(Number(totalObj.instlCst) / 1000000);
+      totalObj.anlOperCst = Math.round(Number(totalObj.anlOperCst) / 1000000);
+
 
       //상세
       const rainDetailList: RainStatProps[] = [];
       res.forEach((item: RainStatProps) => {
         const utztnUsgArray = new Array<string>();
+        let wtrUsqty = 0;
         item.guideStats.forEach((guideStat) => {
           utztnUsgArray.push(guideStat.utztnUsgCd);
+          wtrUsqty += Number(guideStat.ruseFcltUtztnQnt) || 0;
         });
         rainDetailList.push({
           ...item,
+          instlCst: Math.round(Number(item.instlCst) / 1000000),
+          wtrUsqty,
           utztnUsgCd: utztnUsgArray.join(", "),
+          anlOperCst: Math.round(Number(item.anlOperCst) / 1000000),
         });
       });
 
diff --git a/apps/wr/app/store/stats/rswtStat/excel.tsx b/apps/wr/app/store/stats/rswtStat/excel.tsx
index 4bd698ad0..eb9eba6da 100644
--- a/apps/wr/app/store/stats/rswtStat/excel.tsx
+++ b/apps/wr/app/store/stats/rswtStat/excel.tsx
@@ -1,50 +1,53 @@
-import type { SelectDataType } from "@common/business_components/ui";
+import { codeToText } from "@/components/lib/func/common";
 import type { RswtStatProps } from ".";
 
-export const excelRswtStat = (excelList: RswtStatProps[], rswtBdstType : SelectDataType[] ) : (string | number)[][] => {
+const toUseTypeText = (val: string) =>
+  val
+    .split(",")
+    .map((code) => code.trim())
+    .filter(Boolean)
+    .map((code) => codeToText(code, "dmdUszCd") ?? code)
+    .join(", ");
 
-
-  console.log('bdstUsgCd ', rswtBdstType)
+export const excelRswtStat = (
+  excelList: RswtStatProps[]
+): (string | number)[][] => {
   const excelData: (string | number)[][] = [];
-    excelList.forEach((item) => {
-      excelData.push([
-        //시도
-        String(item.ctpvCd) ?? "",
-        //시군구
-        String(item.sggCd) ?? "",
-        //행정구역명
-        String(item.areaNm) ?? "",
-        //건축물명
-        String(item.bdstNm) ?? "",
-        //건축물용도코드(빈칸)
-        //String(item.bdstUsgCd) ?? "",
-        rswtBdstType?.find((cd)=> cd.val === item.bdstUsgCd.toString())?.text ?? "",   //건축물용도
-        //주소
-        String(item.daddr) ?? "",
-        //법적의무대상여부
-        String(item.lawTrgtYn)==="Y" ? "대상" : "미대상",
-        //설치완료일자
-        item.instlCmptnDt ? String(item.instlCmptnDt).substring(0, 10) : "",
-        //가동개시일(빈칸)
-        //String(item.instlCst) ?? "",
-        "",
-        //건축물면적
-        // item.archArea ?? "",
-        //처리용량
-        item.filtrTrtmfctCpct ?? "",
-        //물사용량
-        item.wtrUsqty ?? "",
-        //중수도+대체수이용량
-        item.rswtAltSum ?? "",
-        //중수도이용량
-        item.rswtrUsqty ?? "",
-        //대체수이용량
-        item.altUswtrUtztnQnt ?? "",
-        //중수도용도
-        String(item.utztnUsgCd) ?? "",
-        //연간운영비
-        item.anlOperCst ?? "",
-      ]);
-    });
+  excelList.forEach((item) => {
+    excelData.push([
+      //시도
+      String(item.ctpvCd) ?? "",
+      //시군구
+      String(item.sggCd) ?? "",
+      //행정구역명
+      String(item.areaNm) ?? "",
+      //건축물명
+      String(item.bdstNm) ?? "",
+      //건축물용도코드
+      codeToText(String(item.bdstUsgCd ?? ""), "rswtBdstType") ?? String(item.bdstUsgCd ?? ""),
+      //주소
+      String(item.daddr) ?? "",
+      //법적의무대상여부
+      String(item.lawTrgtYn) === "Y" ? "대상" : "미대상",
+      //설치완료일자
+      item.instlCmptnDt ? String(item.instlCmptnDt).substring(0, 10) : "",
+      //가동개시일(빈칸)
+      "",
+      //처리용량
+      item.filtrTrtmfctCpct ?? "",
+      //물사용량
+      // item.wtrUsqty ?? "",
+      //중수도+대체수이용량
+      item.rswtAltSum ?? "",
+      //중수도이용량
+      item.rswtrUsqty ?? "",
+      //대체수이용량
+      item.altUswtrUtztnQnt ?? "",
+      //중수도용도
+      toUseTypeText(String(item.utztnUsgCd ?? "")),
+      //연간운영비
+      item.anlOperCst ?? "",
+    ]);
+  });
   return excelData;
-}
\ No newline at end of file
+};
diff --git a/apps/wr/app/store/stats/rswtStat/headList.tsx b/apps/wr/app/store/stats/rswtStat/headList.tsx
index 47aeca57b..609a155cd 100644
--- a/apps/wr/app/store/stats/rswtStat/headList.tsx
+++ b/apps/wr/app/store/stats/rswtStat/headList.tsx
@@ -30,12 +30,12 @@ export const rswtStatHeadListExport :TableUpperProps[]=[
         row:0,
         rowSpan:2
       },
-      {
-        id: "wtrUsqty",
-        title: "물사용량(m³/년)",
-        row:0,
-        rowSpan:2
-      },
+      // {
+      //   id: "wtrUsqty",
+      //   title: "물사용량(m³/년)",
+      //   row:0,
+      //   rowSpan:2
+      // },
       {
         id: "rswtAltSum",
         title: "중수도+대체수이용량(m³/년)",
@@ -105,4 +105,4 @@ export const rswtStatHeadListExport :TableUpperProps[]=[
       },
 
 
-]
\ No newline at end of file
+]
diff --git a/apps/wr/app/store/stats/rswtStat/index.tsx b/apps/wr/app/store/stats/rswtStat/index.tsx
index fa183f1a2..9be8ddcad 100644
--- a/apps/wr/app/store/stats/rswtStat/index.tsx
+++ b/apps/wr/app/store/stats/rswtStat/index.tsx
@@ -35,6 +35,7 @@ export type RswtStatProps = {
 
 export type GuideStatProps = {
     utztnUsgCd: string
+    splyUswtrUtztnQnt: number
     ruseFcltUtztnQnt: number
 }
 
@@ -73,14 +74,22 @@ export const rswtStatActionsExport: (set: any) => rswtStatActions = (
     set: any
 ) => {
     return {
-        searchRswtStatList: async (year: string, city: SelectDataType[] , rswtBdstType:SelectDataType[]) => {
+        searchRswtStatList: async (year: string, city: SelectDataType[]) => {
             const res = await getFetch(fetchType.WR, `/reuseChk/reuseWater/stat/${year}`)
             const data = res.filter(item => {
                 const code = item.ctpvCd.trim();
                 return city.some(el => el.val === code);
             });
             const cityArr: any[] = [];
+            excelDownList.length = 0;
             data.forEach((item: RswtStatProps) => {
+                const itemAltUswtrUtztnQnt =
+                    item.guideStats && item.guideStats.length > 0
+                        ? item.guideStats.reduce(
+                            (sum, guide) => sum + (Number(guide.splyUswtrUtztnQnt) || 0),
+                            0
+                        )
+                        : Number(item.altUswtrUtztnQnt) || 0;
                 let obj = cityArr.find((e) => {
                     return e.ctpvCd == item.ctpvCd
                 })
@@ -90,9 +99,7 @@ export const rswtStatActionsExport: (set: any) => rswtStatActions = (
                     // obj.archArea += item.archArea 건축면적 삭제
                     obj.filtrTrtmfctCpct += item.filtrTrtmfctCpct                   //처리용량 
                     obj.wtrUsqty += item.wtrUsqty                                   //물사용량
-                    obj.rswtAltSum += (item.rswtrUsqty + item.altUswtrUtztnQnt)     //중수도+대체수
-                    obj.rswtrUsqty += item.rswtrUsqty                               //중수도사용량
-                    obj.altUswtrUtztnQnt += item.altUswtrUtztnQnt                   //대체수이용량
+                    obj.altUswtrUtztnQnt += itemAltUswtrUtztnQnt                    //대체수이용량
                     obj.anlOperCst += item.anlOperCst                               //연간운영비용
                 } else {
                     obj = {
@@ -100,9 +107,9 @@ export const rswtStatActionsExport: (set: any) => rswtStatActions = (
                         ctpvCnt: 1,
                         filtrTrtmfctCpct: item.filtrTrtmfctCpct,
                         wtrUsqty: item.wtrUsqty,
-                        rswtAltSum: item.rswtrUsqty + item.altUswtrUtztnQnt,
-                        rswtrUsqty: item.rswtrUsqty,
-                        altUswtrUtztnQnt: item.altUswtrUtztnQnt,
+                        rswtAltSum: 0,
+                        rswtrUsqty: 0,
+                        altUswtrUtztnQnt: itemAltUswtrUtztnQnt,
                         anlOperCst: item.anlOperCst,
                         lndwtr: 0,
                         cleanToilUswtr: 0,
@@ -127,6 +134,15 @@ export const rswtStatActionsExport: (set: any) => rswtStatActions = (
                         });
                     })
                 }
+
+                obj.rswtrUsqty =
+                    obj.lndwtr +
+                    obj.cleanToilUswtr +
+                    obj.farmUswtr +
+                    obj.indstUswtr +
+                    obj.hydUswtr +
+                    obj.ithlEtcUswtr;
+                obj.rswtAltSum = obj.rswtrUsqty + obj.altUswtrUtztnQnt;
             });
 
             const total: any = {
@@ -163,6 +179,11 @@ export const rswtStatActionsExport: (set: any) => rswtStatActions = (
                 total.ithlEtcUswtr += item.ithlEtcUswtr;
             });
 
+            cityArr.forEach(item => {
+                item.anlOperCst = Math.round(Number(item.anlOperCst) / 1000000);
+            });
+            total.anlOperCst = Math.round(Number(total.anlOperCst) / 1000000);
+
             cityArr.unshift(total);
 
             cityArr.forEach(item => {
@@ -189,16 +210,23 @@ export const rswtStatActionsExport: (set: any) => rswtStatActions = (
             const rswtDetailList: RswtStatProps[] = [];
             res.forEach((item: RswtStatProps) => {
                 const utztnUsgArray = new Array<string>();
+                let rswtrUsqty = 0;
+                let altUswtrUtztnQnt = 0;
                 item.guideStats.forEach((guideStat) => {
                     utztnUsgArray.push(guideStat.utztnUsgCd);
+                    rswtrUsqty += Number(guideStat.ruseFcltUtztnQnt) || 0;
+                    altUswtrUtztnQnt += Number(guideStat.splyUswtrUtztnQnt) || 0;
                 })
                 rswtDetailList.push({
                     ...item,
-                    rswtAltSum: item.rswtrUsqty + item.altUswtrUtztnQnt,
+                    rswtAltSum: rswtrUsqty + altUswtrUtztnQnt,
+                    rswtrUsqty,
+                    altUswtrUtztnQnt,
                     utztnUsgCd: utztnUsgArray.join(', '),
+                    anlOperCst: Math.round(Number(item.anlOperCst) / 1000000),
                 })
             });
-            const excelDetailData = excelRswtStat(rswtDetailList,rswtBdstType);
+            const excelDetailData = excelRswtStat(rswtDetailList);
             set((state: rswtStatState) => ({
                 rswtStat: {
                     ...state.rswtStat,
@@ -209,4 +237,4 @@ export const rswtStatActionsExport: (set: any) => rswtStatActions = (
             }));
         }
     }
-}
\ No newline at end of file
+}
diff --git a/apps/wr/app/store/store.tsx b/apps/wr/app/store/store.tsx
index fbb3434d9..268be198b 100644
--- a/apps/wr/app/store/store.tsx
+++ b/apps/wr/app/store/store.tsx
@@ -2,13 +2,6 @@ import { createStore } from "zustand/vanilla";
 import {
   codeActionExport,
   comCodeStateExport,
-  getCityCd,
-  getCommonUpCd,
-  getEnvPartCd,
-  getMiddleRegionCd,
-  getRegionCd,
-  getSggCd,
-  getUnitWaterShedCd,
   type comCodeState,
   type comCodeType,
 } from "./common/code";
@@ -336,17 +329,17 @@ export const StoreZus = (
   }
 ) => {
   return createStore<WrStore>()((set ,get) => {
-    getSggCd(set);
-    getCityCd(set);
-    getRegionCd(set);
-    getMiddleRegionCd(set);
-    getUnitWaterShedCd(set);
-    getEnvPartCd(set);
-    getCommonUpCd(set)
+    // getSggCd(set);
+    // getCityCd(set);
+    // getRegionCd(set);
+    // getMiddleRegionCd(set);
+    // getUnitWaterShedCd(set);
+    // getEnvPartCd(set);
+    // getCommonUpCd(set);
     return {
       ...initState,
       ...comFcltSearchAction(set),
-      ...pubFacActionsExport(set),
+      ...pubFacActionsExport(set, get),
       ...rainFacActionsExport(set),
       ...rswtFacActionsExport(set),
       ...matDmdActionsExport(set),
@@ -373,7 +366,7 @@ export const StoreZus = (
       ...rswtStatActionsExport(set),
       ...authActionsExport(set,get),
       ...commonMapActionsExport(set),
-      ...pbnMapActionsExport(set),
+      ...pbnMapActionsExport(set, get),
       ...rainMapActionsExport(set),
       ...rswtMapActionsExport(set),
       ...htdfMapActionsExport(set),
diff --git a/apps/wr/components/lib/api/index.ts b/apps/wr/components/lib/api/index.ts
index 6ff75f5a6..44eef5924 100644
--- a/apps/wr/components/lib/api/index.ts
+++ b/apps/wr/components/lib/api/index.ts
@@ -1,4 +1,6 @@
 import { DEV_URL_FO, DEV_URL_WR, LOCAL_URL } from "../config/";
+import { CLAIM_NAME, SITE_ID } from "@/src/shared/config";
+import { tokenManager } from "@/src/entities/auth/lib/token-manager";
 
 export const fetchType = {
   COMMON: "common",
@@ -7,6 +9,33 @@ export const fetchType = {
   CS: "CS",
 };
 
+const LOGIN_PAGE_URL =
+  process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
+
+const getDefaultHeaders = (headers: HeadersInit = {}) => ({
+  ...headers,
+  "X-Site-Id": SITE_ID,
+});
+
+const handleUnauthorizedResponse = () => {
+  if (typeof window === "undefined") return;
+
+  const remainingMs = tokenManager.getRemainingMsFromToken(CLAIM_NAME);
+  const isExpired = remainingMs === null || remainingMs <= 0;
+
+  if (!isExpired) return;
+
+  tokenManager.clearAuthToken();
+
+  const isLoginPage =
+    window.location.pathname === "/auth/login" ||
+    window.location.pathname.startsWith("/auth/login/");
+
+  if (!isLoginPage) {
+    window.location.assign(LOGIN_PAGE_URL);
+  }
+};
+
 export const getFetch = async (type: string, url: string) => {
   const div =
     type === fetchType.COMMON
@@ -19,11 +48,15 @@ export const getFetch = async (type: string, url: string) => {
   const apiUrl = div + url;
   const response = await fetch(apiUrl, {
     method: "GET",
-    headers: {
+    headers: getDefaultHeaders({
       accept: "application/json",
-    },
+    }),
   });
 
+  if (response.status === 401) {
+    handleUnauthorizedResponse();
+  }
+
   if (!response.ok) {
     console.log(`오류 발생: ${response.status}`);
   }
@@ -67,11 +100,15 @@ export const getFetchWithCount = async (type: string, url: string) => {
 
   const response = await fetch(apiUrl, {
     method: "GET",
-    headers: {
+    headers: getDefaultHeaders({
       accept: "application/json",
-    },
+    }),
   });
 
+  if (response.status === 401) {
+    handleUnauthorizedResponse();
+  }
+
   if (!response.ok) {
     console.log(`오류 발생: ${response.status}`);
   }
@@ -108,12 +145,15 @@ export const postFectch = async (url: string, params: any, type?: string) => {
   const apiUrl = div + url;
   const response = await fetch(apiUrl, {
     method: "POST",
-    headers: {
+    headers: getDefaultHeaders({
       accept: "application/json",
       "Content-Type": "application/json",
-    },
+    }),
     body: JSON.stringify(params),
   });
+  if (response.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if (!response.ok) {
     throw new Error(`오류 발생: ${response.status}`);
   }
@@ -133,11 +173,14 @@ export const putFectch = async (url: string, params: any, type?: string) => {
 
   const response = await fetch(apiUrl, {
     method: "PUT",
-    headers: {
+    headers: getDefaultHeaders({
       "Content-Type": "application/json",
-    },
+    }),
     body: JSON.stringify(params),
   });
+  if (response.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if (!response.ok) {
     throw new Error(`오류 발생: ${response.status}`);
   }
@@ -161,11 +204,14 @@ export const deleteFectch = async (
 
   const response = await fetch(apiUrl, {
     method: "DELETE",
-    headers: {
+    headers: getDefaultHeaders({
       "Content-Type": "application/json",
-    },
+    }),
     body: params ? JSON.stringify(params) : undefined,
   });
+  if (response.status === 401) {
+    handleUnauthorizedResponse();
+  }
   if (!response.ok) {
     // 에러 응답 본문 파싱
     const errorText = await response.text();
diff --git a/apps/wr/components/lib/func/TableData.tsx b/apps/wr/components/lib/func/TableData.tsx
index 0c613bed0..03c000dd6 100644
--- a/apps/wr/components/lib/func/TableData.tsx
+++ b/apps/wr/components/lib/func/TableData.tsx
@@ -14,7 +14,7 @@ import {
   formatCommaNumber,
   formatYyyymmdd,
   handleCommaNumberChange
-} from "./commom";
+} from "./common";
 
 export const rainChkTableData = (chkData: rainChkZodType[]) => {
   // 1. chkgdnSn + utztnUsgCd 기준 누계 정보 만들기
@@ -29,8 +29,8 @@ export const rainChkTableData = (chkData: rainChkZodType[]) => {
         totalRuseFcltUtztnQnt: 0,
       };
 
-      acc[key].totalSplyUswtrUtztnQnt += cur.splyUswtrUtztnQnt;
-      acc[key].totalRuseFcltUtztnQnt += cur.ruseFcltUtztnQnt;
+      acc[key].totalSplyUswtrUtztnQnt += cur.splyUswtrUtztnQnt;  // 연간대체수이용량(m³)
+      acc[key].totalRuseFcltUtztnQnt += cur.ruseFcltUtztnQnt;    // 연간빗물이용량(m³)
 
       return acc;
     }, {});
@@ -94,6 +94,7 @@ export const rswtChkTableData = (chkData: rswtChkZodType[]) => {
   return makeRswtData;
 };
 
+// 재이용시설등록 > 지도점검결과 등록 - table body
 export const chRowspanTable = (
   makeTableData: any[],
   headList: TableUpperProps[],
@@ -111,6 +112,7 @@ export const chRowspanTable = (
   // rowspan된 셀 렌더링 여부 추적용
   const renderedMap = new Map<string, Set<number>>();
 
+  // console.log(makeTableData);
   return (
     <>
       {/* {makeTableData.map((row, rowIndex) => ( */}
@@ -138,7 +140,8 @@ export const chRowspanTable = (
                   <TableCell
                     key={key}
                     rowSpan={rowspan}
-                    className="align-middle text-center whitespace-nowrap"
+                    className="align-middle text-center whitespace-normal break-words"
+                    style={{ width: head.widthPercent ? `${head.widthPercent}%` : undefined }}
                   >
                     {key === "checkBox" ? (
                       <Checkbox
@@ -151,7 +154,7 @@ export const chRowspanTable = (
                     ) : key === "order" ? (
                       ++order
                     ) : // value
-                      ["anlOperCst", "dtfcltCpct", "prcsCpct"].includes(
+                      ["anlOperCst", "dtfcltCpct", "prcsCpct"].includes( //연간운영비, 저류조용량, 처리용량
                         head.id
                       ) ? (
                         formatCommaNumber(value)
@@ -169,8 +172,9 @@ export const chRowspanTable = (
               return (
                 <TableCell
                   key={key}
-                  className="text-center whitespace-nowrap"
+                  className="text-center whitespace-normal break-words"
                   onClick={() => handleCellClick(rowIndex, head.id)}
+                  style={{ width: head.widthPercent ? `${head.widthPercent}%` : undefined }}
                 >
                   {head.edit === true ? (
                     [
@@ -231,7 +235,7 @@ export const chRowspanTable = (
                         }}
                       />
                     )
-                  ) : ["smll", "ph"].includes(head.id) && head.type === "text" ? (
+                  ) : ["smll"].includes(head.id) && head.type === "text" ? (
                     <>-</>
                   ) : [
                     "totalSplyUswtrUtztnQnt",
@@ -309,6 +313,28 @@ const handleChange = (
     })
   );
 };
+
+const handleTextChange = (
+  rowIndex: number,
+  field: any,
+  value: string,
+  setInputData: (data: any) => void
+) => {
+  setInputData((prevData: any) =>
+    prevData?.map((row: any, index: number) => {
+      if (index === rowIndex) {
+        return {
+          ...row,
+          [field]: value,
+        };
+      }
+      return row;
+    })
+  );
+};
+
+
+// 재이용실적등록 > 지도점검결과 등록 - 상세 modal의 body
 export const InputTableBody = (
   chgRes: any[] | [],
   headList: TableUpperProps[],
@@ -334,6 +360,164 @@ export const InputTableBody = (
         const isSubTotal = data["용수명"] === "소계";
         const isTotal = data["구분"] === 0;
 
+        const bgClass = isTotal
+          ? "bg-[#d5e1eb] font-bold"
+          : isSubTotal
+            ? "bg-[#e6eef5] font-semibold"
+            : "";
+
+        return (
+          <TableRow key={dataIndex + "row"}>
+            {headList.map((head, headIndex) => {
+              
+              const isTextColumn = head.id === "구분" || head.id === "utztnUsgCdText";
+              const textAlignClass = isTextColumn
+                ? "text-center"
+                : "text-right";
+
+              // 총합계 행이면 "구분"에서 colSpan=2로 병합
+              if ( (data["구분"] === 0 || data["용수명"] === 0) && head.id === "구분" ) {
+                return (
+                  <TableCell
+                    key={head.id + headIndex}
+                    colSpan={2}
+                    className="font-bold text-center bg-[#d5e1eb]"
+                  >
+                    총합계
+                  </TableCell>
+                );
+              }
+              // 총합계(합계) 행이면 "용수명" 컬럼은 렌더링하지 않음
+              if ( (data["구분"] === 0 || data["용수명"] === 0) && head.id === "용수명" ) {
+                return null;
+              }
+
+              // 총합계 행의 나머지 셀에도 색상 적용
+              if (data["구분"] === 0 || data["용수명"] === 0) {
+                return (
+                  <TableCell
+                    key={head.id + headIndex}
+                    className="bg-[#d5e1eb] font-bold text-right"
+                  >
+                    {Number(data[head.id])
+                      ? formatCommaNumber(data[head.id as keyof any])
+                      : (data[head.id as keyof any] ?? "")}
+                  </TableCell>
+                );
+              }
+              // mergeCell 처리
+              if (head.mergeCell) {
+                const rowSpan = getRowSpan(chgRes, head.id, dataIndex);
+                if (rowSpan === 0) return null;
+                return (
+                  <TableCell
+                    key={head.id + headIndex}
+                    rowSpan={rowSpan}
+                    className={`w-36 align-middle text-center whitespace-nowrap ${bgClass}`}
+                  >
+                    {Number(data[head.id])
+                      ? formatCommaNumber(data[head.id as keyof any])
+                      : (data[head.id as keyof any] ?? "")}
+                  </TableCell>
+                );
+              }
+              // 기본 셀
+              // return head.edit === true && data.edit !== false ? (
+              return isEditable && head.edit === true && data.edit !== false ? (
+                <TableCell
+                  key={head.id + headIndex}
+                  className={`w-36 ${bgClass}`}
+                >
+                  {head.id === "smll" ? (
+                    <Input
+                      className="text-center !text-xl h-10 w-full"
+                      type="text"
+                      onChange={(e) =>
+                        handleTextChange(
+                          dataIndex,
+                          head.id,
+                          e.target.value,
+                          setInputData
+                        )
+                      }
+                      value={String(data[head.id as keyof any] ?? "")}
+                      maxLength={numSize}
+                    />
+                  ) : (
+                    <Input
+                      // className={`${head.id !== "utztnUsgCd" ? "text-right" : "text-center"} !text-xl h-10 w-full`}
+                      className={`${textAlignClass} !text-xl h-10 w-full`}
+                      onChange={(e) =>
+                        handleCommaNumberChange(e, (val) =>
+                          handleChange(
+                            dataIndex,
+                            head.id,
+                            String(val),
+                            setInputData
+                          )
+                        )
+                      }
+                      value={formatCommaNumber(data[head.id as keyof any]) ?? ""}
+                      maxLength={numSize}
+                    />
+                  )}
+                </TableCell>
+              ) : (
+                <TableCell
+                  key={head.id + headIndex}
+                  className={`w-36 ${bgClass}`}
+                >
+                  <div className={`${textAlignClass} !text-xl w-full h-10`}>
+                    {Number(data[head.id])
+                      ? formatCommaNumber(data[head.id as keyof any])
+                      : (data[head.id as keyof any] ?? "")}
+                  </div>
+                </TableCell>
+              );
+            })}
+          </TableRow>
+        );
+      })}
+      {chgRes.length === 0 && (
+        <TableRow>
+          <TableCell
+            colSpan={headList.length}
+            className="h-24 text-center text-gray-500"
+          >
+            조회된 결과가 없습니다.
+          </TableCell>
+        </TableRow>
+      )}
+    </>
+  );
+};
+
+// 재이용실적등록 > 하수재이용실적등록 목록 body - 하수처리수재이용 실적(m³) 등록결과
+export const pbnstTableBody = (
+  chgRes: any[] | [],
+  headList: TableUpperProps[],
+  setInputData: (data: any[]) => void,
+  isEditable: boolean = true
+) => {
+  // mergeCell 처리용
+  const getRowSpan = (data: any[], key: string, rowIndex: number) => {
+    if (rowIndex > 0 && data[rowIndex][key] === data[rowIndex - 1][key]) {
+      return 0; // 이전과 같으면 셀을 그리지 않음
+    }
+    let span = 1;
+    for (let i = rowIndex + 1; i < data.length; i++) {
+      if (data[i][key] === data[rowIndex][key]) span++;
+      else break;
+    }
+    return span;
+  };
+  return (
+    <>
+      {chgRes.map((data, dataIndex) => {
+        // 소계/총합계 행 판별
+        const isSubTotal = data["용수명"] === "소계";
+        const isTotal = data["구분"] === 0;
+
         const bgClass = isTotal
           ? "bg-[#d5e1eb] font-bold"
           : isSubTotal
diff --git a/apps/wr/components/lib/func/calculateConstCost .tsx b/apps/wr/components/lib/func/calculateConstCost .tsx
index 5e9387385..2c2ec48ae 100644
--- a/apps/wr/components/lib/func/calculateConstCost .tsx	
+++ b/apps/wr/components/lib/func/calculateConstCost .tsx	
@@ -1,3 +1,18 @@
+/**
+ * 주어진 코드와 수량 기준으로 보간 계산에 사용할 하한/상한 구간 데이터를 찾는다.
+ *
+ * 같은 코드(`fctCd`)를 가진 데이터만 추린 뒤,
+ * `qtyCode` 값이 현재 수량(`qty`) 이하인 항목 중 가장 큰 값을 `lower`,
+ * 초과인 항목 중 가장 작은 값을 `upper`로 반환한다.
+ * 한쪽 경계만 존재하면 같은 값을 상/하한에 보정해 반환한다.
+ *
+ * @param data 전체 기준 데이터 목록
+ * @param fctCd 찾고 싶은 시설/구분 코드 값
+ * @param dataCode 코드 비교에 사용할 객체 속성명
+ * @param qtyCode 수량 비교에 사용할 객체 속성명
+ * @param qty 현재 비교 기준 수량
+ * @returns 보간 계산에 사용할 하한(lower), 상한(upper) 데이터
+ */
 export const findBounds = (
   data: any[],
   fctCd: string,
diff --git a/apps/wr/components/lib/func/commom.tsx b/apps/wr/components/lib/func/common.tsx
similarity index 94%
rename from apps/wr/components/lib/func/commom.tsx
rename to apps/wr/components/lib/func/common.tsx
index e8a034b62..7afeda993 100644
--- a/apps/wr/components/lib/func/commom.tsx
+++ b/apps/wr/components/lib/func/common.tsx
@@ -66,9 +66,9 @@ export const tableData = (data: any, code: comCodeState) => {
           ...item,
           sggText: sggText ?? "없음",
           cityText: cityText ?? "없음",
-          bdsgUsgText: bdsgUsgText,
-          lawTrgtYn: lawTrgtYn,
-          grntchBdstCertGrdText: grntchBdstCertGrdText,
+          bdsgUsgText: bdsgUsgText, // 건물용도명
+          lawTrgtYn: lawTrgtYn,     // 법정대상 여부
+          grntchBdstCertGrdText: grntchBdstCertGrdText, // 녹색건축인증등급명 
         };
       } else {
         returnData = {
@@ -94,6 +94,22 @@ export const excelDownload = (
     if (!response.ok) {
       throw Error(response.statusText);
     }
+
+    const isTemplateOnlyDownload =
+      excelList.length === 1 &&
+      Array.isArray(excelList[0]) &&
+      excelList[0].length === 0;
+
+    if (isTemplateOnlyDownload) {
+      const blob = await response.blob();
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = fileNm.endsWith(".xlsx") ? fileNm : `${fileNm}.xlsx`;
+      link.click();
+      URL.revokeObjectURL(link.href);
+      return;
+    }
+
     // 받은 파일 바인너리 처리
     const blobRet = await response.arrayBuffer();
     // 버퍼에 있는 엑셀데이터 전달 후 json으로 변환
@@ -406,4 +422,4 @@ export function handleLaeSeCdChange(
     isCityCd,
     isSggCd: [{ text: "전체", val: "0" }, ...sggOrdered],
   };
-}
\ No newline at end of file
+}
diff --git a/apps/wr/components/lib/func/formatUtils.ts b/apps/wr/components/lib/func/formatUtils.ts
new file mode 100644
index 000000000..c4ae02784
--- /dev/null
+++ b/apps/wr/components/lib/func/formatUtils.ts
@@ -0,0 +1,68 @@
+
+/**
+ * 전화번호에 - 처리
+ * @param value '-'없는 전화번호
+ * @returns 
+ */
+export const formatKoreanPhoneNumber = (value: string) => {
+  const digits = value.replace(/\D/g, "").slice(0, 11); // 숫자만 추출하고 최대 11자리까지만 사용
+  if (!digits) return ""; // 입력이 비어 있으면 빈 문자열 반환
+
+  if (/^1\d{0,7}$/.test(digits)) { // 15xx/16xx/18xx 같은 대표번호 패턴
+    if (digits.length <= 4) return digits; // 아직 뒷자리가 부족하면 원문 유지
+    return `${digits.slice(0, 4)}-${digits.slice(4, 8)}`; // xxxx-xxxx
+  }
+
+  if (digits.startsWith("02")) { // 서울 지역번호(02)
+    const rest = digits.slice(2); // 국번/가입자번호 구간
+    if (!rest) return "02"; // 02만 입력된 상태
+    if (rest.length <= 3) return `02-${rest}`; // 02-xxx
+    if (rest.length <= 7) return `02-${rest.slice(0, 3)}-${rest.slice(3)}`; // 02-xxx-xxxx
+    return `02-${rest.slice(0, 4)}-${rest.slice(4, 8)}`; // 02-xxxx-xxxx
+  }
+
+  if (digits.startsWith("0")) { // 02 제외 일반 지역번호/휴대폰(010 포함)
+    const area = digits.slice(0, 3); // 앞 3자리 식별자
+    const rest = digits.slice(3); // 나머지 번호
+    if (!rest) return area; // 식별자만 입력된 상태
+    if (rest.length <= 3) return `${area}-${rest}`; // 0xx-xxx
+    if (rest.length <= 7) return `${area}-${rest.slice(0, 3)}-${rest.slice(3)}`; // 0xx-xxx-xxxx
+    return `${area}-${rest.slice(0, 4)}-${rest.slice(4, 8)}`; // 0xx-xxxx-xxxx
+  }
+
+  if (digits.length <= 4) return digits; // 예외 입력: 앞 4자리까지
+  if (digits.length <= 8) return `${digits.slice(0, 4)}-${digits.slice(4)}`; // xxxx-xxxx
+  return `${digits.slice(0, 4)}-${digits.slice(4, 8)}-${digits.slice(8, 11)}`; // xxxx-xxxx-xxx
+};
+
+/**
+ * 숫자 문자열에 형식 문자열을 적용합니다.
+ * @param format 하이픈 위치를 포함한 형식 문자열. 예: 000-00-00000-0000
+ * @param value 형식을 적용할 원본 값
+ * @returns 형식이 적용된 문자열
+ */
+export const formatValueByPattern = (format: string, value: string) => {
+  const digits = value.replace(/\D/g, "");
+  if (!digits) return "";
+
+  let digitIndex = 0;
+  let result = "";
+
+  for (const char of format) {
+    if (char === "0") {
+      if (digitIndex >= digits.length) break;
+      result += digits[digitIndex];
+      digitIndex += 1;
+      continue;
+    }
+
+    if (digitIndex >= digits.length) break;
+    result += char;
+  }
+
+  if (digitIndex < digits.length) {
+    result += digits.slice(digitIndex);
+  }
+
+  return result;
+};
diff --git a/apps/wr/components/lib/func/mapUtil.ts b/apps/wr/components/lib/func/mapUtil.ts
index c49dea69f..61b97a679 100644
--- a/apps/wr/components/lib/func/mapUtil.ts
+++ b/apps/wr/components/lib/func/mapUtil.ts
@@ -1,4 +1,4 @@
-import { formatCommaNumber, formatPhoneNumber } from "./commom";
+import { formatCommaNumber, formatPhoneNumber } from "./common";
 
 const wrLayerList = [
   { text: "tb_il_swage_prcs_fclt", val: "bscFctCd" },       //하수처리시설
@@ -229,3 +229,4 @@ export const getOverLayObj = (fclType: string, data: any, code?: any) => {
 
   return { title, newObj };
 };
+
diff --git a/apps/wr/components/ui/form/coMat/conCostForm/conCostForm.tsx b/apps/wr/components/ui/form/coMat/conCostForm/conCostForm.tsx
index cfb388264..2b567979c 100644
--- a/apps/wr/components/ui/form/coMat/conCostForm/conCostForm.tsx
+++ b/apps/wr/components/ui/form/coMat/conCostForm/conCostForm.tsx
@@ -20,20 +20,34 @@ import {
   Form,
   FormField,
   FormUi,
+  SelectBox,
   UiTable,
 } from "@common/business_components/ui";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import PopoverUi from "@common/business_components/ui/popover_ui";
 import { Button, Checkbox, Input, Label } from "@common/components/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { type UseFormReturn } from "react-hook-form";
-import toast from "react-hot-toast";
+import { useForm, type UseFormReturn } from "react-hook-form";
+
+const formatNumberWithComma = (value: string | number | null | undefined) => {
+  if (value === null || value === undefined || value === "") return "";
+
+  const normalized =
+    typeof value === "string" ? Number(value.replace(/,/g, "")) : Number(value);
+
+  if (Number.isNaN(normalized)) {
+    return String(value);
+  }
+
+  return normalized.toLocaleString("ko-KR");
+};
 /**
- *   ConCostForm 
- * 호출: (with-layout)/matMng/coMat/coMatRvw 에서 호출
+ * ConCostForm
+ * 호출: (with-layout)/matMng/coMat/coMatRvw
  *
- *  공사비를 산정하고  
- *  
- * */
+ * @param form - 외부에서 전달된 폼 객체 (없을 경우 시뮬레이션용 로컬 폼 사용)
+ * @param type - "mat": 매칭, "hist": 이력, "simulation": 모의산정
+ */
 
 export default function ConCostForm({
   form,
@@ -41,20 +55,39 @@ export default function ConCostForm({
   selectionVersion,
   readonly = false,
 }: {
-  form: UseFormReturn<DmdCoReqType>;
+  form?: UseFormReturn<DmdCoReqType>;
   type: string;
-  selectionVersion: number;
-  readonly: boolean;
+  selectionVersion?: number;
+  readonly?: boolean;
 }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // 시뮬레이션 모드를 위한 로컬 폼 생성
+  const localForm = useForm<DmdCoReqType>({
+    defaultValues: {
+      dmndQty: 0,
+      demandCst: { cstrnCst: 0, usgPrcsProcs: "" }
+    } as any
+  });
+
+  const activeForm = form || localForm;
+  const isSim = type === "simulation";
+
+  const readOnlyInputClass = "bg-slate-50 text-gray-700";
   const {
-    constCostRes,
-    rateFeeRes,
+    constCostRes, // 표준사업비
+    rateFeeRes,   // 부대경비요율
     coMatRvwUpdate,
     ruseRvwCalUpdate,
     getRateFee,
     getConstCostFee,
+    code,
   } = useWrStore((state) => state);
   const alert = useAlertStore((state) => state.setMessage);
+  const { confirm } = useConfirm();
 
   const ref = useRef<boolean>(false);
 
@@ -102,13 +135,56 @@ export default function ConCostForm({
       link.click();
     });
   };
-  const usgPrcsProcsWatch = form.watch("demandCst.usgPrcsProcs");
-  const dmndQtyWatch = form.watch("dmndQty");
-  const totalConstCost = form.watch("totalConstCost");
-  const cstrnCst = form.watch("demandCst.cstrnCst");
-  const splyList = form.watch("splyCndtList");
+  const usgPrcsProcsWatch = activeForm.watch("demandCst.usgPrcsProcs"); // 용도에 따른 처리공정
+  const dmndQtyWatch = activeForm.watch("dmndQty"); // 요구수량(m³/일)
+  const totalConstCost = activeForm.watch("totalConstCost"); // 처리시설 총사업비(백만원)
+  const cstrnCst = activeForm.watch("demandCst.cstrnCst") || 0; // 공급관로 표준공사비(백만원)
+  const prcsFcltCpctCstrnCst = activeForm.watch("demandCst.prcsFcltCpctCstrnCst") || 0; // 처리시설용량에 따른 공사비(백만원)
+  const fcltSbsdCstrnCst = activeForm.watch("demandCst.fcltSbsdCstrnCst") || 0; // 시설부대경비
+  const splyList = activeForm.watch("splyCndtList"); // 공급처 후보지 목록
+  const useUsgCdWatch = activeForm.watch("useUsgCd"); // 사용 용도 코드
+  const ruseUtztnFcltNmWatch = activeForm.watch("ruseUtztnFcltNm"); // 선정된 공급처 명
+  const useUsgCdLabel =
+    code.sewageOutFclttUse?.find((item) => item.val === useUsgCdWatch)?.text ?? // 사용 용도 명칭(라벨)
+    String(useUsgCdWatch ?? "");
+
+  useEffect(() => {
+    const calculatedTotalConstCost = Number(prcsFcltCpctCstrnCst) + Number(fcltSbsdCstrnCst);
+
+    if ((totalConstCost ?? 0) !== calculatedTotalConstCost) {
+      activeForm.setValue("totalConstCost", calculatedTotalConstCost);
+    }
+  }, [
+    activeForm,
+    prcsFcltCpctCstrnCst,
+    fcltSbsdCstrnCst,
+    totalConstCost,
+    selectionVersion,
+  ]);
+
+  // 용도 변경 시 처리공정 자동 매핑 (시뮬레이션 대응)
+  useEffect(() => {
+    if (useUsgCdWatch) {
+      const matched = usageProcData.find((item) => item.useUsgCd === useUsgCdWatch);
+      if (matched && matched.process !== usgPrcsProcsWatch) {
+        activeForm.setValue("demandCst.usgPrcsProcs", matched.process);
+      }
+    }
+  }, [useUsgCdWatch, activeForm, usgPrcsProcsWatch]);
+
+  /**
+   * 표준공산비 산정 : "계산"버튼 click시
+   */
   const calculateConstCost = useCallback(() => {
     const usgPrcsProcs = usgPrcsProcsWatch;
+    if (!isSim && selectionVersion == 0) {
+      alert("목록에서 수요신청 건을 선택하세요.");
+      return;
+    }
+    if (!useUsgCdWatch) {
+      alert("용도 값이 없습니다.");
+      return;
+    }
     if (!dmndQtyWatch) {
       alert("요구수량(m³/일)을 확인해주세요 계산할수 없습니다. ");
       return;
@@ -119,23 +195,30 @@ export default function ConCostForm({
       );
       return;
     }
+    if (constCostRes?.length === 0) {
+      alert("표준공사비 데이터가 없습니다.");
+      return;
+    }
+    if (rateFeeRes?.length === 0) {
+      alert("표준공사비 데이터가 없습니다.");
+      return;
+    }    
 
     const dmndQtyYear = dmndQtyWatch;
     if (usgPrcsProcs && usgPrcsProcs?.length > 0) {
-      const firstProc =
-        getConstFctCode(usgPrcsProcs?.split("+")[0] || "") || "";
-      const secondProc =
-        getConstFctCode(usgPrcsProcs?.split("+")[1] || "") || "";
+      const firstProc = getConstFctCode(usgPrcsProcs?.split("+")[0] || "") || "";  // 첫번째 공정
+      const secondProc = getConstFctCode(usgPrcsProcs?.split("+")[1] || "") || ""; // 두번째 공정 
 
+      // 첫번째 처리공정 코드에 해당하는 표준공사비 테이블에서 요구수량을 감싸는 하한/상한 구간을 찾는 부분이다.  
       const { lower: firstLower, upper: firstUpper } = findBounds(
-        constCostRes,
+        constCostRes, // 표준공사비
         firstProc || "",
         "fctCd",
         "fctCpc",
         Number(dmndQtyYear)
       );
       const { lower: secondLower, upper: secondUpper } = findBounds(
-        constCostRes,
+        constCostRes, // 표준공사비
         secondProc || "",
         "fctCd",
         "fctCpc",
@@ -158,7 +241,7 @@ export default function ConCostForm({
       const groupedBounds: { [key: string]: { lower?: any; upper?: any } } = {};
       for (const code of groupCodes) {
         groupedBounds[code] = findBounds(
-          rateFeeRes,
+          rateFeeRes, // 부대경비요율
           code,
           "incExpCd",
           "stdCost",
@@ -172,76 +255,56 @@ export default function ConCostForm({
         100;
       const realResult = result + fcltSbsdCstrnCst;
 
-      form.setValue("demandCst.prcsFcltCpctCstrnCst", Math.round(result));
-      form.setValue("demandCst.fcltSbsdCstrnCst", Math.round(fcltSbsdCstrnCst));
-      form.setValue("totalConstCost", Math.round(realResult));
+      activeForm.setValue("demandCst.prcsFcltCpctCstrnCst", Math.round(result));
+      activeForm.setValue("demandCst.fcltSbsdCstrnCst", Math.round(fcltSbsdCstrnCst));
+      activeForm.setValue("totalConstCost", Math.round(realResult));
+      alert("표준공산비 산정이 완료되었습니다.");
     }
-  }, [constCostRes, rateFeeRes, usgPrcsProcsWatch, dmndQtyWatch]);
+  }, [constCostRes, rateFeeRes, usgPrcsProcsWatch, dmndQtyWatch, isSim, selectionVersion, activeForm]);
+
+  /**
+   * 저장 버튼 click 시 실행
+   * @param value 
+   * @returns 
+   */
   const onSubmit = async (value: DmdCoReqType) => {
     if (value.demandCst && !value.demandCst.prcsFcltCpctCstrnCst) {
       alert("공사비 계산 진행 후 저장을 눌러주새요");
       return;
     }
 
-    // const pk =
-    //   splycd && splycd[0]?.ruseUtztnFcltCd
-    //     ? splycd[0]?.ruseUtztnFcltCd
-    //     : "11000SW001R1";
+    // 1순위: 팝업에서 새로 선택한 코드 (lastSub)
+    // 2순위: 기존 DB에서 불러와 폼에 저장된 코드 (demandMatching.pbnstRuseFcltId)
+    const pk =
+      lastSub?.ruseUtztnFcltCd ??
+      activeForm.getValues("demandMatching.pbnstRuseFcltId") ??
+      null;
 
-        const pk =lastSub?.ruseUtztnFcltCd??null
-  
     if (type === "mat") {
       if (value.demandCst) {
         const data: DedMatUpdateType = {
-          dmdInfoSn: value.dmdInfoSn,
-          usgPrcsProcs: value.demandCst.usgPrcsProcs || "",
-          cstrnCst: value.demandCst.cstrnCst || 0,
-          fcltSbsdCstrnCst: value.demandCst.fcltSbsdCstrnCst || 0,
-          prcsFcltCpctCstrnCst: value.demandCst.prcsFcltCpctCstrnCst || 0,
-          flg: checkFinish ? "Checked" : "Sub",
+          dmdInfoSn: value.dmdInfoSn, // 수요정보 일련번호
+          usgPrcsProcs: value.demandCst.usgPrcsProcs || "", // 용도에 따른 처리공정
+          cstrnCst: value.demandCst.cstrnCst || 0, // 공급관로 표준공사비（백만원）
+          fcltSbsdCstrnCst: value.demandCst.fcltSbsdCstrnCst || 0, // 시설부대경비
+          prcsFcltCpctCstrnCst: value.demandCst.prcsFcltCpctCstrnCst || 0, // 처리시설용량에 따른 공사비（백만원)
+          flg: checkFinish ? "Checked" : "Sub", // "Sub": 검토중, "Checked": 검토완료(재이용검토이력 화면에 나타남)
           rgtr: TEST_UUID,
         };
 
         if(pk !==null){
 
           if (checkFinish) {
-            toast((t) => (
-              <span className="flex flex-col items-center text-2xl">
-                검토완료 변경시 공사비는 변경할수 없습니다.
-                <br />
-                진행하시겠습니까?
-                <div className="flex gap-2 mt-2">
-                  <Button
-                    size="sm"
-                    onClick={async () => {
-                      toast.dismiss(t.id);
-
-                      const message = await coMatRvwUpdate(
-                        pk,
-                        form.getValues("dmdInfoId"),
-                        data
-                      );
-                      alert(message);
-                    }}
-                  >
-                    확인
-                  </Button>
-                  <Button size="sm" onClick={() => toast.dismiss(t.id)}>
-                    취소
-                  </Button>
-                </div>
-              </span>
-            ));
+            if (await confirm("검토완료 변경시 공사비는 변경할수 없습니다.\n진행하시겠습니까?")) {
+              const message = await coMatRvwUpdate( pk, activeForm.getValues("dmdInfoId"), data );
+              alert(message);
+            }
           } else {
-            const message = await coMatRvwUpdate(
-              pk,
-              form.getValues("dmdInfoId"),
-              data
-            );
+            const message = await coMatRvwUpdate( pk, activeForm.getValues("dmdInfoId"), data );
             alert(message);
           }
         }else{
-          alert('후보지를 먼저 선택해주세요')
+          alert('후보지를 먼저 선택해주세요');
         }
       }
     } else if (type === "hist") {
@@ -249,7 +312,8 @@ export default function ConCostForm({
       delete value.ruseUtztnFcltNm;
       console.log("onSubmit data ", pk);
 
-      ruseRvwCalUpdate(value);
+      const message = await ruseRvwCalUpdate(value);
+      alert(message);
     }
   };
 
@@ -289,17 +353,25 @@ export default function ConCostForm({
 
 
   useEffect(() => {
-    form.register("dmdInfoSn");
-    form.register("dmdInfoId");
-    form.register("ruseUtztnFcltNm");
-  }, []);
+    if (!activeForm) return;
+    activeForm.register("dmdInfoSn");
+    activeForm.register("dmdInfoId");
+    activeForm.register("ruseUtztnFcltNm");
+  }, [activeForm]);
 
   
+  /**
+   * 후보지 조회 
+   * @param e 
+   */
   const searchCandidate = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-
-    const dmdInfoId = form.getValues("dmdInfoId");
+    if (selectionVersion == 0) {
+      alert("먼저 목록에서 수요신청 건을 선택하세요.");
+      return;
+    }
+    const dmdInfoId = activeForm.getValues("dmdInfoId");
     console.log(dmdInfoId)
 
     const url = `/splyPopup?dmdInfoId=${encodeURIComponent(dmdInfoId)}`;
@@ -311,10 +383,12 @@ export default function ConCostForm({
     window.open(url, "candidatePopup", popupOptions);
   };
 
+  if (!mounted) return null; // 서버 사이드 렌더링 시에는 아무것도 그리지 않음 (선택 사항)
+
   return (
     <>
       
-      <Form {...form}>
+      <Form {...activeForm}>
         {/* <h3 className="mt-4 ml-2 text-2xl font-medium text-label">
           표준공사비 산정
         </h3> */}
@@ -324,75 +398,89 @@ export default function ConCostForm({
           <Button className="mx-3" size={"sm"} onClick={calculateConstCost}>
             계산
           </Button>
-          <Button
-            className="mr-3"
-            size={"sm"}
-            onClick={form.handleSubmit(onSubmit)}
-            disabled={readonly}
-          >
-            저장
-          </Button>
-          <Label>검토완료</Label>
-          <Checkbox
-            className="ml-3 mr-6"
-            checked={checkFinish}
-            onCheckedChange={
-              (checked) => {
-                if (readonly) return;
-                setCheckFinish(checked === true);
-              }
-
-              // 'indeterminate' 상태를 무시하고 순수 boolean 값으로만 상태를 업데이트합니다.
-            }
-          ></Checkbox>
-          <Label>관로 표준공사비 산정 프로그램</Label>
-          <Button
-            color="green"
-            size={"sm"}
-            onClick={zipDowonLoad}
-            className="bg-none ml-6"
-          >
-            다운로드
-          </Button>
-        </div>
-        <div className="col-span-12 w-full">
-          <h1 className={formH1Class}>기본사항</h1>
+          {!isSim && (
+            <>
+              <Button
+                className="mr-3"
+                size={"sm"}
+                onClick={activeForm.handleSubmit(onSubmit)}
+                disabled={readonly}
+              >
+                저장
+              </Button>
+              <Label>검토완료</Label>
+              <Checkbox
+                className="ml-3 mr-6"
+                checked={checkFinish}
+                onCheckedChange={(checked) => {
+                  if (readonly) return;
+                  setCheckFinish(checked === true);
+                }}
+              />
+            </>
+          )}
+          {!isSim && (
+            <>
+            <Label>관로 표준공사비 산정 프로그램</Label>
+            <Button color="green" size={"sm"} onClick={zipDowonLoad} className="bg-none ml-6">
+              다운로드
+            </Button>
+            </>
+          )}
         </div>
+        
         <div className="grid grid-cols-12 gap-4 ml-4 mr-4">
+          <div className="col-span-12  w-full">
+            <h1 className={formH1Class}>기본사항</h1>
+          </div>
           <div className="col-span-3 mt-4">
             <FormField
-              control={form.control}
+              control={activeForm.control}
               name="useUsgCd"
               render={({ field }) => (
                 <FormUi label="용도">
-                  <Input
-                    placeholder=""
-                    type="text"
-                    onChange={(e) => {
-                      field.onChange(e.target.value);
-                    }}
-                    value={field.value ?? ""}
-                    readOnly={true}
-                  />
+                  {isSim ? (
+                    <SelectBox
+                      label=""
+                      selectClass="rounded-md"
+                      selectArray={code.sewageOutFclttUse || []}
+                      onSelectValue={field.onChange}
+                      value={field.value ?? ""}
+                      className=""
+                    />
+                  ) : (
+                    <Input
+                      placeholder=""
+                      type="text"
+                      value={useUsgCdLabel}
+                      readOnly
+                      className={readOnlyInputClass}
+                    />
+                  )}
                 </FormUi>
               )}
             />
           </div>
           <div className="col-span-3 mt-4">
             <FormField
-              control={form.control}
+              control={activeForm.control}
               name="dmndQty"
               render={({ field }) => (
                 <FormUi label="요구수량(m³/일)">
                   <Input
                     placeholder=""
-                    type="number"
-                    step="0.1"
+                    type={isSim ? "number" : "text"}
+                    step={isSim ? "0.1" : undefined}
                     onChange={(e) => {
                       field.onChange(Number(e.target.value));
                     }}
-                    value={field.value ?? 0}
-                    readOnly={true}
+                    value={
+                      isSim
+                        ? field.value ?? 0
+                        : formatNumberWithComma(field.value)
+                    }
+                    readOnly={!isSim}
+                    className={!isSim ? readOnlyInputClass : ""}
                   />
                 </FormUi>
               )}
@@ -420,15 +508,16 @@ export default function ConCostForm({
                     ]}
                     pageSize={0}
                     total={0}
+                    isHideCount={true}
                     cellClick={undefined}
                     onPageChange={() => {}}
                   />
                 </>
               }
-              bodyClassName={"w-[25vw] max-w-none h-[54vh]"}
+              bodyClassName={"w-[25vw] max-w-none"}
             ></PopoverUi>
             <FormField
-              control={form.control}
+              control={activeForm.control}
               name="demandCst.usgPrcsProcs"
               render={({ field }) => (
                 <FormUi label="">
@@ -437,7 +526,7 @@ export default function ConCostForm({
                     type="text"
                     onChange={field.onChange}
                     value={field.value ?? ""}
-                    className="mt-2"
+                    className={`mt-2 ${readOnlyInputClass}`}
                     readOnly={true}
                   />
                 </FormUi>
@@ -446,21 +535,21 @@ export default function ConCostForm({
           </div>
           <div className="col-span-3 mt-4">
             <FormField
-              control={form.control}
+              control={activeForm.control}
               name="dmndQty"
               render={({ field }) => (
                 <FormUi label="처리시설용량(m³/일)">
                   <Input
                     placeholder=""
-                    type="number"
-                    step="0.001"
+                    type="text"
                     onChange={(e) => {
                       console.log("dmndQty ", e);
                       //field.onChange(Number(e.target.value) * 365 );
                     }}
                     // value={Number(field.value) * 365 || 0}
-                    value={Number(field.value) || 0}
+                    value={formatNumberWithComma(Number(field.value) || 0)}
                     readOnly
+                    className={readOnlyInputClass}
                   />
                 </FormUi>
               )}
@@ -470,7 +559,7 @@ export default function ConCostForm({
             <h1 className={formH1Class}>공사비 입력사항</h1>
           </div>
 
-          <div className="col-span-2 mt-4">
+          <div className="col-span-3 mt-4">
             <div className="flex items-center justify-between">
               <PopoverUi
                 childrenTriger={
@@ -486,11 +575,11 @@ export default function ConCostForm({
                     <ConstCostFeeTable />
                   </>
                 }
-                bodyClassName={"w-[40vw] h-full"}
+                bodyClassName={"w-fit max-w-[400] overflow-x-auto"}
               ></PopoverUi>
             </div>
             <FormField
-              control={form.control}
+              control={activeForm.control}
               name="demandCst.prcsFcltCpctCstrnCst"
               render={({ field }) => (
                 <FormUi label="">
@@ -503,6 +592,7 @@ export default function ConCostForm({
                     }}
                     value={field.value ?? 0}
                     readOnly
+                    className={`mt-2 ${readOnlyInputClass}`}
                   />
                 </FormUi>
               )}
@@ -523,11 +613,11 @@ export default function ConCostForm({
                     <RateFeeTableModal />
                   </>
                 }
-                bodyClassName={"w-[22vw]"}
+                bodyClassName={"w-fit max-w-[100] overflow-x-auto"}
               ></PopoverUi>
             </div>
             <FormField
-              control={form.control}
+              control={activeForm.control}
               name="demandCst.fcltSbsdCstrnCst"
               render={({ field }) => (
                 <FormUi label="">
@@ -540,6 +630,7 @@ export default function ConCostForm({
                     }}
                     value={field.value ?? 0}
                     readOnly
+                    className={`mt-2 ${readOnlyInputClass}`}
                   />
                 </FormUi>
               )}
@@ -571,13 +662,13 @@ export default function ConCostForm({
               bodyClassName={"w-[22vw]"}
             ></PopoverUi>
             <FormField
-              control={form.control}
+              control={activeForm.control}
               name="totalConstCost"
               render={({ field }) => (
                 <FormUi label="">
                   <Input
                     placeholder=""
-                    className="mt-2"
+                    className={`mt-2 ${readOnlyInputClass}`}
                     type="number"
                     step="0.01"
                     onChange={(e) => {
@@ -590,34 +681,30 @@ export default function ConCostForm({
               )}
             />
           </div>
-          <div className="col-span-3 mt-4">
-            <div className="flex items-center justify-between">
-              <Label>공급처 선정</Label>
-              <Button
-                size={"sm"}
-                onClick={(e) => {
-                  searchCandidate(e);
- 
-                  //splyList => 해당객체가 대민에서 선택한 후보처 리스트
-                  //setLastSub => 해당 스테이트가 선택한 마지막 후보처를 넣어야하는 스테이트
-                }}
-                className="bg-none"
-              >
-                후보지 조회
-              </Button>
+          {!isSim && (
+            <div className="col-span-3 mt-4">
+              <div className="flex items-center justify-between">
+                <Label>공급처 선정</Label>
+                <Button size={"xs"} onClick={searchCandidate} className="bg-none">
+                  후보지 조회
+                </Button>
+              </div>
+              <FormUi label="">
+                  <Input
+                    placeholder="공급처를 선정해주세요"
+                    type="text"
+                    // 1순위: 팝업에서 새로 선택한 값(lastSub)
+                    // 2순위: 기존 DB에서 불러온 값(ruseUtztnFcltNmWatch)
+                    value={lastSub?.ruseUtztnFcltNm || ruseUtztnFcltNmWatch || ""}
+                    readOnly
+                    className={`mt-2 ${readOnlyInputClass}`}
+                  />
+              </FormUi>
             </div>
-            <FormUi label="">
-              <Input
-                placeholder=""
-                type="text"
-                value={lastSub?.ruseUtztnFcltNm || ""}
-                readOnly
-              />
-            </FormUi>
-          </div>
-          <div className="col-span-3 mt-4">
+          )}
+          <div className="col-span-2 mt-4">
             <FormField
-              control={form.control}
+              control={activeForm.control}
               name="demandCst.cstrnCst"
               render={({ field }) => (
                 <FormUi label="공급관로 표준공사비（백만원）">
@@ -626,7 +713,7 @@ export default function ConCostForm({
                     type="number"
                     step="0.01"
                     onChange={(e) => {
-                      if (readonly) return;
+                      if (readonly && !isSim) return;
 
                       field.onChange(Number(e.target.value));
                     }}
@@ -637,16 +724,16 @@ export default function ConCostForm({
             />
           </div>
           <div className="col-span-3 mt-4 mb-3">
-            <Label className="text-xl">
-              처리시설 + 공급관로 총사업비（백만원)
-            </Label>
-            <Input
-              placeholder=""
-              type="number"
-              step="0.001"
-              readOnly={true}
-              value={(totalConstCost ?? 0) + (cstrnCst ?? 0)}
-            />
+            <FormUi label="처리시설 + 공급관로 총사업비（백만원)">
+              <Input
+                placeholder=""
+                type="number"
+                step="0.001"
+                readOnly={true}
+                value={(totalConstCost ?? 0) + (cstrnCst ?? 0)}
+                className={readOnlyInputClass}
+              />
+            </FormUi>
           </div>
         </div>
       </Form>
diff --git a/apps/wr/components/ui/form/fcltReg/bdstReg/bdstAdd.tsx b/apps/wr/components/ui/form/fcltReg/bdstReg/bdstAdd.tsx
index df5aaca77..b644112b3 100644
--- a/apps/wr/components/ui/form/fcltReg/bdstReg/bdstAdd.tsx
+++ b/apps/wr/components/ui/form/fcltReg/bdstReg/bdstAdd.tsx
@@ -4,7 +4,7 @@ import { useWrStore } from "@/app/store";
 import { numSize } from "@/app/store/common/code/basicCode";
 import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import { formH1Class } from "@/components/lib/class/comClass";
-import { safeDate } from "@/components/lib/func/commom";
+import { safeDate } from "@/components/lib/func/common";
 import { DatePicker, FormField, FormUi, SelectBox } from "@common/business_components";
 import { Button, Checkbox, Input } from "@common/components";
 import { useRef, useState } from "react";
@@ -154,4 +154,4 @@ export default function BdstAdd({ form, readonly }: { form: any; readonly?: bool
             <div ref={bottomRef} className="border-b border-gray-300 my-4"> </div>
         </>
     )
-}
\ No newline at end of file
+}
diff --git a/apps/wr/components/ui/form/fcltReg/htdflReg/htdflRegForm.tsx b/apps/wr/components/ui/form/fcltReg/htdflReg/htdflRegForm.tsx
index 72ec5e7e7..0a147ac4b 100644
--- a/apps/wr/components/ui/form/fcltReg/htdflReg/htdflRegForm.tsx
+++ b/apps/wr/components/ui/form/fcltReg/htdflReg/htdflRegForm.tsx
@@ -9,11 +9,12 @@ import {
 import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import { formH1Class } from "@/components/lib/class/comClass";
 import {
-  confirmToast,
   formatCommaNumber,
   handleCommaNumberChange,
   handleOnlyNumberChange,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useAlertStore } from "@/src/shared/lib";
 import {
   Form,
   FormField,
@@ -24,7 +25,6 @@ import { Button, Input, Label, ScrollArea } from "@common/components/ui";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import BdstReg from "../bdstReg/bdstReg";
@@ -54,6 +54,8 @@ export default function HtdflRegForm({
     defaultValues: defaultValues,
   });
   const { laeSeCd } = auth;
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
 
   const [regCtpvCd, regSggcd] = form.watch(["ctpvCd", "sggCd"]);
 
@@ -65,33 +67,42 @@ export default function HtdflRegForm({
     const myUUID = await getMyUUID();
 
     if (!myUUID) {
-      toast.error(t('noUserInfoMsg'));
+      alert(t('noUserInfoMsg'));
       return;
     } 
     if (isModal) {
       const data = regCtpvCd ? regCtpvCd : regSggcd ? regSggcd : "noCd";
       if (data === "noCd") {
-        toast.error("시도/시군구 코드를 선택해야합니다.");
+        alert("시도/시군구 코드를 선택해야합니다.");
         return;
       }
       const handleConfirm = async () => {
-        htdflBdstReg(values, data,myUUID);
+        const message = await htdflBdstReg(values, data,myUUID);
+        alert(message);
         if (setIsModal) setIsModal(false);
       };
-      confirmToast(t("isInsertMsg"), handleConfirm);
+      if (await confirm(t("isInsertMsg"))) {
+        await handleConfirm();
+      }
     } else {
       const handleConfirm = async () => {
-        await htdflBdstUpdate(values, laeSeCd,myUUID);
+        const message = await htdflBdstUpdate(values, laeSeCd,myUUID);
+        alert(message);
         console.log(' htdflBdstUpdate ')
         resetHtdflTableIndex(0);
       };
-      confirmToast(t("isUpdateMsg"), handleConfirm);
+      if (await confirm(t("isUpdateMsg"))) {
+        await handleConfirm();
+      }
     }
   };
 
   const onDelete = async () => {
     const code = htdflForm.ctpvCd ? htdflForm.ctpvCd : htdflForm.sggCd ? htdflForm.sggCd : "noCd";
-    confirmToast(`정말 ${htdflForm.bdstNm} 시설을 삭제하시겠습니까?`, () => htdflBdstDelete(htdflForm, code));
+    if (await confirm(`정말 ${htdflForm.bdstNm} 시설을 삭제하시겠습니까?`)) {
+      const message = await htdflBdstDelete(htdflForm, code);
+      alert(message);
+    }
   }
 
   const cleanHtdflData = (raw: any): z.infer<typeof hdtflZod> => {
@@ -922,3 +933,4 @@ export default function HtdflRegForm({
     </div>
   );
 }
+
diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx
index 1fffe2cdb..57f737a9d 100644
--- a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx
+++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx
@@ -28,18 +28,16 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useFieldArray, type UseFormReturn } from "react-hook-form";
 import MngRegFormDetail from "../mngReg/mngRegFormDetail/mngRegFormDetail";
 import {
-  //confirmToast,
   formatCommaNumber,
   handleCommaNumberChange,
   safeDate,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
 import SearchInputText from "@/components/ui/searchInput/searchInput";
 import SdmInsertForm from "@common/business_components/ui/sdmInsertForm";
 import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
 import RuseMngTableForm from "@/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm";
 import type { SelectDataType } from "@common/business_components";
 import { BuseWaterQulity } from "./buseWaterQulity/buseWaterQulity";
-// import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useAlertStore } from "@/src/shared/lib";
 //import { useTranslation } from "react-i18next";
@@ -815,3 +813,4 @@ export function PbnstBuseForm({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/buseWaterQulity/buseWaterQulity.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/buseWaterQulity/buseWaterQulity.tsx
index dd43658d1..545fe62d1 100644
--- a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/buseWaterQulity/buseWaterQulity.tsx
+++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/buseWaterQulity/buseWaterQulity.tsx
@@ -151,7 +151,7 @@ export function BuseWaterQulity({
             name={`items.${indexMng}.fcBizs.${indexBiz}.grssClfg`}
             key={`items.${indexMng}.fcBizs.${indexBiz}.grssClfg-key`}
             render={({ field }) => (
-              <FormUi label="총대장균군수(개/mg)">
+              <FormUi label="총대장균군수(개/100㎖)">
                 <div className="flex items-center gap-2">
                   <div className="relative flex-1 min-w-0">
                     <Input
diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx
index d4e7fe940..85364f0d1 100644
--- a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx
+++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx
@@ -28,7 +28,7 @@ import RuseMngTableForm from "@/components/ui/table/pbnstReg/ruseMngTableForm/ru
 import {
   handleCommaNumberChange,
   formatCommaNumber,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
 import { numSize, txtSize } from "@/app/store/common/code/basicCode";
 export type FilesType = {
   atflCd: string;
@@ -44,7 +44,7 @@ const diagramFileTypes = ".pdf,.jpg,.jpeg,.png,.bmp";
  * - with-layout 적용
  * - 하수처리시설에 하수재이용 시설 시설 정보를 등록한다.
  * - form으로 시설정보 및 차수별 정보의 컴포넌트 데이터를 관리한다
- * indexMng: 시설정보
+ * indexMng: 재이용시설정보
  * indexBiz: 차수별 정보
  * 로 하수재이용 시설에 등록된 시설 및 차수별 정보를 관리한다.
  *  */
@@ -61,7 +61,7 @@ export function PbnstMngForm({
   setIndexMng: (index: number) => void;
   readonly: boolean;
 }) {
-  const { code, pbnst, fileDelete, fileDownLoad } = useWrStore(
+  const { code, pbnst, fileDelete, fileDownLoadName } = useWrStore(
     (state) => state
   );
   const [planFiles, setPlanFiles] = useState<FilesType[] | null>(null);
@@ -150,10 +150,10 @@ export function PbnstMngForm({
       } else {
         fileList?.forEach((item, index) => {
           const idx = files?.indexOf(item.file);
-          if (idx < 0) {
-            setReFiles.splice(index);
-            fileDelete(item.atflCd as string);
-          }
+            if (idx < 0) {
+              setReFiles.splice(index, 1);
+              fileDelete(item.atflCd as string);
+            }
         });
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-expressions
@@ -183,7 +183,7 @@ export function PbnstMngForm({
   useEffect(() => {
     setRelationFiles([]);
     setPlanFiles([]);
-    console.log("indexMng ", indexMng);
+    // console.log("indexMng ", indexMng);
 
     const currentItem = form.getValues(`items.${indexMng}`);
     const defaultFiles = currentItem?.fcFiles || [];
@@ -443,7 +443,7 @@ export function PbnstMngForm({
                           <span
                             key={index + "plan"}
                             className="text-2xl block cursor-pointer text-blue-600 hover:underline"
-                            onClick={() => fileDownLoad(item.atflCd)}
+                            onClick={() => fileDownLoadName(item.atflCd, item.file.name)}
                           >
                             {item.file.name}
                           </span>
@@ -462,11 +462,12 @@ export function PbnstMngForm({
                         }}
                         fileTypes={diagramFileTypes}
                         onFileClick={(index) => {
-                          fileDownLoad(
-                            relationfiles?.find(
-                              (item, fileIndex) => fileIndex === index
-                            )?.atflCd as string
+                          const target = relationfiles?.find(
+                            (item, fileIndex) => fileIndex === index
                           );
+                          if (target?.atflCd) {
+                            fileDownLoadName(target.atflCd, target.file.name);
+                          }
                         }}
                       ></FileUpload>
                     </FormUi>
@@ -481,7 +482,7 @@ export function PbnstMngForm({
                           <span
                             key={index + "plan"}
                             className="text-2xl block cursor-pointer text-blue-600 hover:underline"
-                            onClick={() => fileDownLoad(item.atflCd)}
+                            onClick={() => fileDownLoadName(item.atflCd, item.file.name)}
                           >
                             {item.file.name}
                           </span>
@@ -500,11 +501,12 @@ export function PbnstMngForm({
                         }}
                         fileTypes={diagramFileTypes}
                         onFileClick={(index) => {
-                          fileDownLoad(
-                            planFiles?.find(
-                              (item, fileIndex) => fileIndex === index
-                            )?.atflCd as string
+                          const target = planFiles?.find(
+                            (item, fileIndex) => fileIndex === index
                           );
+                          if (target?.atflCd) {
+                            fileDownLoadName(target.atflCd, target.file.name);
+                          }
                         }}
                       ></FileUpload>
                     </FormUi>
@@ -518,3 +520,4 @@ export function PbnstMngForm({
     </div>
   );
 }
+
diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegFormDetail/mngRegFormDetail.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegFormDetail/mngRegFormDetail.tsx
index 554f66daf..4d2f2b904 100644
--- a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegFormDetail/mngRegFormDetail.tsx
+++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegFormDetail/mngRegFormDetail.tsx
@@ -3,7 +3,7 @@ import { useWrStore } from "@/app/store";
 import { numSize, txtSize } from "@/app/store/common/code/basicCode";
 import type { formDetailType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/headList";
 import { formH1Class } from "@/components/lib/class/comClass";
-import { formatCommaNumber, handleCommaNumberChange, safeDate } from "@/components/lib/func/commom";
+import { formatCommaNumber, handleCommaNumberChange, safeDate } from "@/components/lib/func/common";
 import {
   DatePicker,
   FormField,
@@ -138,3 +138,4 @@ export default function MngRegFormDetail({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/form/fcltReg/rainReg/rainRegForm.tsx b/apps/wr/components/ui/form/fcltReg/rainReg/rainRegForm.tsx
index f2a9d2f6d..27033d0e2 100644
--- a/apps/wr/components/ui/form/fcltReg/rainReg/rainRegForm.tsx
+++ b/apps/wr/components/ui/form/fcltReg/rainReg/rainRegForm.tsx
@@ -8,10 +8,11 @@ import {
 } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import { formH1Class, formH2Class } from "@/components/lib/class/comClass";
 import {
-  confirmToast,
   formatCommaNumber,
   handleMinusNumberChange,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useAlertStore } from "@/src/shared/lib";
 import { DatePicker, FormUi } from "@common/business_components";
 import { Form, FormField, SelectBox } from "@common/business_components/ui";
 import { Button,  Input } from "@common/components/ui";
@@ -20,7 +21,6 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import BdstReg from "../bdstReg/bdstReg";
-import toast from "react-hot-toast";
 import BdstAdd from "../bdstReg/bdstAdd";
 import { useTranslation } from "react-i18next";
 import { numSize, txtSize } from "@/app/store/common/code/basicCode";
@@ -48,6 +48,8 @@ export default function RainRegForm({
     // defaultValues: defaultValues,
   });
   const { t } = useTranslation('base');
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
 
   const [grntchBdstCertYn, instlCstSprtYn, filtrTrtmfctYn] = form.watch([
     "reuseBuilding.0.grntchBdstCertYn",
@@ -134,7 +136,7 @@ export default function RainRegForm({
     const myUUID = await getMyUUID();
 
     if (!myUUID) {
-      toast.error(t('noUserInfoMsg'));
+      alert(t('noUserInfoMsg'));
       return;
     } 
 
@@ -142,26 +144,35 @@ export default function RainRegForm({
       const data = regCtpvCd ? regCtpvCd : regSggcd ? regSggcd : "noCd";
   
       if (data === "noCd") {
-        toast.error("시도/시군구 코드를 선택해야합니다.");
+        alert("시도/시군구 코드를 선택해야합니다.");
         return;
       }
       const handleConfirm = async () => {
-        rainBdstReg(values, data,myUUID);
+        const message = await rainBdstReg(values, data,myUUID);
+        alert(message);
         if (setIsModal) setIsModal(false);
       };
-      confirmToast(t('isInsertMsg'), handleConfirm);
+      if (await confirm(t("isInsertMsg"))) {
+        await handleConfirm();
+      }
     } else {
       const handleConfirm = async () => {
-       await  rainBdstUpdate(values, laeSeCd,myUUID);
+       const message = await rainBdstUpdate(values, laeSeCd,myUUID);
+       alert(message);
        resetRainTableIndex(0)
       };
-      confirmToast(t('isUpdateMsg'), handleConfirm);
+      if (await confirm(t("isUpdateMsg"))) {
+        await handleConfirm();
+      }
     }
   };
 
   const onDelete = async () => {
     const code = rainForm.ctpvCd ? rainForm.ctpvCd : rainForm.sggCd ? rainForm.sggCd : "noCd";
-    confirmToast(`정말 ${rainForm.bdstNm} 시설을 삭제하시겠습니까?`, () => rainBdstDelete(rainForm, code));
+    if (await confirm(`정말 ${rainForm.bdstNm} 시설을 삭제하시겠습니까?`)) {
+      const message = await rainBdstDelete(rainForm, code);
+      alert(message);
+    }
   }
 
   useEffect(() => {
@@ -643,3 +654,4 @@ export default function RainRegForm({
     </div>
   );
 }
+
diff --git a/apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx b/apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx
index 95b4915be..61014d796 100644
--- a/apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx
+++ b/apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx
@@ -8,10 +8,10 @@ import {
 } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
 import { formH1Class, formH2Class } from "@/components/lib/class/comClass";
 import {
-  confirmToast,
   formatCommaNumber,
   handleMinusNumberChange,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
   DatePicker,
   Form,
@@ -28,7 +28,7 @@ import BdstAdd from "../bdstReg/bdstAdd";
 import BdstReg from "../bdstReg/bdstReg";
 import { useTranslation } from "react-i18next";
 import { numSize, txtSize } from "@/app/store/common/code/basicCode";
-import toast from "react-hot-toast";
+import { useAlertStore } from "@/src/shared/lib";
 
 export default function RswtrRegForm({
   rswtForm,
@@ -52,6 +52,8 @@ export default function RswtrRegForm({
   }, [isMap]);
   // const defaultValues: z.infer<typeof rswtZod> = rswtZod.parse({});
   const { t } = useTranslation("base");
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
 
   const form = useForm<z.infer<typeof rswtZod>>({
     resolver: zodResolver(rswtZod),
@@ -72,32 +74,41 @@ export default function RswtrRegForm({
       const myUUID = await getMyUUID();
   
       if (!myUUID) {
-        toast.error(t('noUserInfoMsg'));
+        alert(t('noUserInfoMsg'));
         return;
       } 
     if (isModal) {
       const data = regCtpvCd ? regCtpvCd : regSggcd ? regSggcd : "noCd";
       if (data === "noCd") {
-        toast.error("시도/시군구 코드를 선택해야합니다.");
+        alert("시도/시군구 코드를 선택해야합니다.");
         return;
       }
       const handleConfirm = async () => {
-        rswtBdstReg(values, data,myUUID);
+        const message = await rswtBdstReg(values, data,myUUID);
+        alert(message);
         if (setIsModal) setIsModal(false);
       };
-      confirmToast(t("isInsertMsg"), handleConfirm);
+      if (await confirm(t("isInsertMsg"))) {
+        await handleConfirm();
+      }
     } else {
       const handleConfirm = async () => {
-        rswtBdstUpdate(values, laeSeCd,myUUID);
+        const message = await rswtBdstUpdate(values, laeSeCd,myUUID);
+        alert(message);
         resetRswtTableIndex(0)
       };
-      confirmToast(t("isUpdateMsg"), handleConfirm);
+      if (await confirm(t("isUpdateMsg"))) {
+        await handleConfirm();
+      }
     }
   };
 
   const onDelete = async () => {
     const code = rswtForm.ctpvCd ? rswtForm.ctpvCd : rswtForm.sggCd ? rswtForm.sggCd : "noCd";
-    confirmToast(`정말 ${rswtForm.bdstNm} 시설을 삭제하시겠습니까?`, () => rswtBdstDelete(rswtForm, code));
+    if (await confirm(`정말 ${rswtForm.bdstNm} 시설을 삭제하시겠습니까?`)) {
+      const message = await rswtBdstDelete(rswtForm, code);
+      alert(message);
+    }
   }
 
   const cleanRswtData = (raw: any): z.infer<typeof rswtZod> => {
@@ -539,3 +550,4 @@ export default function RswtrRegForm({
     </div>
   );
 }
+
diff --git a/apps/wr/components/ui/map/LayerPopUp/CoSttnMap/CoSttnMap.tsx b/apps/wr/components/ui/map/LayerPopUp/CoSttnMap/CoSttnMap.tsx
index 13e928506..d73007764 100644
--- a/apps/wr/components/ui/map/LayerPopUp/CoSttnMap/CoSttnMap.tsx
+++ b/apps/wr/components/ui/map/LayerPopUp/CoSttnMap/CoSttnMap.tsx
@@ -4,7 +4,7 @@ import {
   formatPhoneNumber,
   getCity,
   tableData,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import {
   ContentsDiv,
@@ -193,3 +193,4 @@ export function CoSttnMap({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/map/LayerPopUp/HasuFacilty/HasuFacility.tsx b/apps/wr/components/ui/map/LayerPopUp/HasuFacilty/HasuFacility.tsx
index dfeeed2ea..beaf26b81 100644
--- a/apps/wr/components/ui/map/LayerPopUp/HasuFacilty/HasuFacility.tsx
+++ b/apps/wr/components/ui/map/LayerPopUp/HasuFacilty/HasuFacility.tsx
@@ -1,8 +1,11 @@
+/**
+ * map 시설물 layer > 하수처리시설 modal
+ */
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import { pbnMapTableSize } from "@/app/store/map/pbnstMap";
 import type { pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
-import { excelDownload, tableData } from "@/components/lib/func/commom";
+import { excelDownload, tableData } from "@/components/lib/func/common";
 import {
   ContentsDiv,
   SearchBaseForm,
@@ -132,3 +135,4 @@ export function HasuFacility({rtnFeature}:{rtnFeature:(feature:any)=>void } ) {
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/map/LayerPopUp/HedfFacilty/HtdfFacilty.tsx b/apps/wr/components/ui/map/LayerPopUp/HedfFacilty/HtdfFacilty.tsx
index 0e30572f8..86da242d7 100644
--- a/apps/wr/components/ui/map/LayerPopUp/HedfFacilty/HtdfFacilty.tsx
+++ b/apps/wr/components/ui/map/LayerPopUp/HedfFacilty/HtdfFacilty.tsx
@@ -1,3 +1,6 @@
+/**
+ * map 시설물 layer > 온배수시설 modal
+ */
 import { useWrStore } from "@/app/store";
 import { htdfMapSize } from "@/app/store/map/htdflMap";
 import { rainMapSize } from "@/app/store/map/rainMap";
@@ -6,7 +9,7 @@ import {
   excelDownload,
   getCity,
   tableData,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import {
   ContentsDiv,
@@ -250,3 +253,4 @@ export function HtdflFacility({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/map/LayerPopUp/LdrmntCoMap/LdrmntCoMap.tsx b/apps/wr/components/ui/map/LayerPopUp/LdrmntCoMap/LdrmntCoMap.tsx
index 56e42368f..f9f85d86a 100644
--- a/apps/wr/components/ui/map/LayerPopUp/LdrmntCoMap/LdrmntCoMap.tsx
+++ b/apps/wr/components/ui/map/LayerPopUp/LdrmntCoMap/LdrmntCoMap.tsx
@@ -1,7 +1,7 @@
 import { useWrStore } from "@/app/store";
 import { ldrmntMapSize } from "@/app/store/map/ldrmntCoMap";
 import type { customLdrmnt } from "@/app/store/matDmd/ldrmntCoSttn";
-import { getCity, tableData } from "@/components/lib/func/commom";
+import { getCity, tableData } from "@/components/lib/func/common";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import {
   ContentsDiv,
@@ -187,3 +187,4 @@ export function LdrmntCoMap({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/map/LayerPopUp/PbnFacility/reuseMngFacility.tsx b/apps/wr/components/ui/map/LayerPopUp/PbnFacility/reuseMngFacility.tsx
index 9030493ff..1f3a90dcd 100644
--- a/apps/wr/components/ui/map/LayerPopUp/PbnFacility/reuseMngFacility.tsx
+++ b/apps/wr/components/ui/map/LayerPopUp/PbnFacility/reuseMngFacility.tsx
@@ -1,5 +1,5 @@
 import { useWrStore } from '@/app/store';
-import { tableData, formatPhoneNumber } from '@/components/lib/func/commom';
+import { tableData, formatPhoneNumber } from '@/components/lib/func/common';
 import { Title, UiTable } from '@common/business_components/ui';
 import type { DemandCompType } from '@common/business_components/ui/sdmInsertForm/form';
 import moment from 'moment';
@@ -100,4 +100,4 @@ const ReuseMngFacility = ({seletectedLayerNm, viewMode, onFeatureSelect, onClose
     )
 }
 
-export default ReuseMngFacility
\ No newline at end of file
+export default ReuseMngFacility
diff --git a/apps/wr/components/ui/map/LayerPopUp/RainFacility/RainFacility.tsx b/apps/wr/components/ui/map/LayerPopUp/RainFacility/RainFacility.tsx
index 09ff83774..74bf0aa55 100644
--- a/apps/wr/components/ui/map/LayerPopUp/RainFacility/RainFacility.tsx
+++ b/apps/wr/components/ui/map/LayerPopUp/RainFacility/RainFacility.tsx
@@ -1,7 +1,10 @@
+/**
+ * map 시설물 layer > 빗물이용시설 modal
+ */
 import { useWrStore } from "@/app/store";
 import { rainMapSize } from "@/app/store/map/rainMap";
 import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
-import { excelDownload, getCity, tableData } from "@/components/lib/func/commom";
+import { excelDownload, getCity, tableData } from "@/components/lib/func/common";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import {
   ContentsDiv,
@@ -264,3 +267,4 @@ export function RainFacility({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/map/LayerPopUp/RswtFacilty/RswtFacilty.tsx b/apps/wr/components/ui/map/LayerPopUp/RswtFacilty/RswtFacilty.tsx
index 5c3c238d6..4fe818568 100644
--- a/apps/wr/components/ui/map/LayerPopUp/RswtFacilty/RswtFacilty.tsx
+++ b/apps/wr/components/ui/map/LayerPopUp/RswtFacilty/RswtFacilty.tsx
@@ -1,7 +1,10 @@
+/**
+ * map 시설물 layer > 중수도시설 modal
+ */
 import { useWrStore } from "@/app/store";
 import { rainMapSize } from "@/app/store/map/rainMap";
 import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
-import { excelDownload, getCity, tableData } from "@/components/lib/func/commom";
+import { excelDownload, getCity, tableData } from "@/components/lib/func/common";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
 import {
   ContentsDiv,
@@ -251,3 +254,4 @@ export function RswtFacility({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/map/LayerPopUp/RuseFacilty/RuseFacility.tsx b/apps/wr/components/ui/map/LayerPopUp/RuseFacilty/RuseFacility.tsx
index 231667898..8ed06293b 100644
--- a/apps/wr/components/ui/map/LayerPopUp/RuseFacilty/RuseFacility.tsx
+++ b/apps/wr/components/ui/map/LayerPopUp/RuseFacilty/RuseFacility.tsx
@@ -1,8 +1,11 @@
+/**
+ * map 시설물 layer > 하수재이용시설 modal
+ */
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import { ruseMapSize } from "@/app/store/map/ruseMap";
 import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
-import { excelDownload, yearOptions } from "@/components/lib/func/commom";
+import { excelDownload, yearOptions } from "@/components/lib/func/common";
 import {
   ContentsDiv,
   SearchBaseForm,
@@ -181,3 +184,4 @@ export function RuseFacility({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/modal/chkgd/chkgdExcel/chkgdExcel.tsx b/apps/wr/components/ui/modal/chkgd/chkgdExcel/chkgdExcel.tsx
index 4b84491a2..0e4152db6 100644
--- a/apps/wr/components/ui/modal/chkgd/chkgdExcel/chkgdExcel.tsx
+++ b/apps/wr/components/ui/modal/chkgd/chkgdExcel/chkgdExcel.tsx
@@ -1,3 +1,6 @@
+/**
+ * 지도점검 결과등록 엑셀 업로드 모달
+ */
 import { useWrStore } from "@/app/store";
 import { type rainChkZodType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn";
 import { excelToRainChkData } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/excel";
@@ -8,7 +11,7 @@ import {
   excelToRswtPolution,
   rswtExcelDataCheck,
 } from "@/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/excel";
-import { showConfirmToast } from "@/components/lib/func/commom";
+import { useAlertStore } from "@/src/shared/lib";
 import {
   filePicked,
   filePickedArray,
@@ -23,7 +26,6 @@ import { Button, Input } from "@common/components/ui";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
-import toast from "react-hot-toast";
 import type { z } from "zod";
 
 export default function ChkgdExcel({
@@ -46,6 +48,7 @@ export default function ChkgdExcel({
   } = useWrStore((state) => {
     return state;
   });
+  const alert = useAlertStore((state) => state.setMessage);
   const [excelData, setExcelData] = useState<
     rswtChkZodType[] | rainChkZodType[]
   >();
@@ -60,6 +63,8 @@ export default function ChkgdExcel({
   };
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = e.target.files?.[0];
+    setExcelData(undefined);
+    setExcelRswtData(undefined);
     if (selectedFile) {
       setFile(selectedFile);
     }
@@ -89,7 +94,7 @@ export default function ChkgdExcel({
   useEffect(() => {
     if (file) {
       if (form.getValues("chckYr").length < 1) {
-        toast.error("파일업로드 이전에 등록년도를 작성해주세요 ");
+        alert("파일업로드 이전에 등록년도를 작성해주세요 ");
         setFile(null);
         return;
       }
@@ -102,11 +107,17 @@ export default function ChkgdExcel({
                 res,
                 form.getValues("chckYr")
               );
+              if (excelData.message) {
+                alert(excelData.message);
+                setExcelData(undefined);
+              }
               if (excelData.issues && excelData.issues.length > 0) {
                 excelData.issues.some((err, index) => {
-                  showConfirmToast(err);
+                  // showConfirmToast(err);
+                  alert(err);
                   return index === 4; // true 반환 시 반복 종료
                 });
+                setExcelData(undefined);
                 clearFile();
               } else {
                 setExcelData(excelData.rainChkgdData);
@@ -119,6 +130,7 @@ export default function ChkgdExcel({
           setRswtChkLoading(true);
           filePickedArray(file, 0)
             .then((res) => {
+              setExcelRswtData(undefined);
               if (res && res?.length > 1) {
                 const guideData = excelToRswtGuideData(
                   res[0],
@@ -163,16 +175,24 @@ export default function ChkgdExcel({
 
                 if (issues && issues.length > 0) {
                   issues.some((err, index) => {
-                    showConfirmToast(err);
-                    return index === 6; // true 반환 시 반복 종료
+                    // showConfirmToast(err);
+                    alert(err);
+                    return index === 4; // true 반환 시 반복 종료
                   });
+                  console.log(issues.join("\n"));
+                  setExcelRswtData(undefined);
                   clearFile();
                 } else {
                   setExcelRswtData(listTotalData);
                 }
+              } else {
+                alert("중수도 엑셀은 2개 시트가 필요합니다. 양식을 확인해주세요.");
+                setExcelRswtData(undefined);
+                clearFile();
               }
             })
             .finally(() => setRswtChkLoading(false));
+          // console.log("업로드파일 점검 완료");
         }
     }
   }, [file]);
@@ -190,33 +210,35 @@ export default function ChkgdExcel({
   //   );
   // }
 
-  const onSubmit = (values: z.infer<typeof chkgdRegExcel>) => {
+  const onSubmit = async (values: z.infer<typeof chkgdRegExcel>) => {
     if (values.chckYr === "") {
-      toast.error("등록년도를 작성해주세요");
+      alert("등록년도를 작성해주세요");
       return;
     }
 
     if (type === "RNB") {
       if (excelData === undefined || excelData?.length === 0) {
-        toast.error("빈 파일 및 파일 오류 입니다.");
+        alert("빈 파일 및 파일 오류 입니다.");
 
         return;
       } else {
-        rainChkExcelDataUPload(
+        const message = await rainChkExcelDataUPload(
           excelData as rainChkZodType[],
           form.getValues("chckYr"),
           laeSeCd
         );
+        alert(message);
         setIsRegExcel(false);
         setYearChange(form.getValues("chckYr"));
       }
     } else if (type === "RST") {
       if (excelRswtData === undefined || excelRswtData?.length === 0) {
-        toast.error("빈 파일 및 파일 오류 입니다.");
+        alert("빈 파일 및 파일 오류 입니다.");
 
         return;
       } else {
-        rswtChkExceDataUpload(excelRswtData as rswtChkZodType[], laeSeCd);
+        const message = await rswtChkExceDataUpload(excelRswtData as rswtChkZodType[], laeSeCd);
+        alert(message);
         setIsRegExcel(false);
         setYearChange(form.getValues("chckYr"));
       }
@@ -296,3 +318,4 @@ export default function ChkgdExcel({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/modal/chkgd/chkgdModal/chkgdModal.tsx b/apps/wr/components/ui/modal/chkgd/chkgdModal/chkgdModal.tsx
index d6f0e3a26..c5ba35e17 100644
--- a/apps/wr/components/ui/modal/chkgd/chkgdModal/chkgdModal.tsx
+++ b/apps/wr/components/ui/modal/chkgd/chkgdModal/chkgdModal.tsx
@@ -1,19 +1,23 @@
+/**
+ * 지도점검 상세조회/상세수정용 모달
+ */
 import { useWrStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common/type/header";
 import type { splRuseWaterType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList";
 import type { rswtrPolutionsZode } from "@/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/headList";
-import { codeToText } from "@/components/lib/func/commom";
+import { codeToText } from "@/components/lib/func/common";
 import { GuideDetailsTable } from "@/components/ui/table/chkgdTable/guideDetailTable/guideDetailTable";
+import { useAlertStore } from "@/src/shared/lib";
 import { ScrollArea, Title } from "@common/business_components/ui";
 import { Button } from "@common/components/ui";
 import React, {  useEffect, useState } from "react";
 import type { z } from "zod";
 
 export default function ChkgdModal({
-  type,
-  obj,
-  setIsModal,
-  readonly,
+  type, // 시설 구분값. "RNB"이면 빗물, 그 외는 중수도 상세 모달로 처리
+  obj, // 목록에서 선택한 1건의 상세 데이터. 가이드/수질/과태료 정보 렌더링과 저장에 사용
+  setIsModal, // 모달 열림 상태를 제어하는 함수. 저장 완료 시 false로 닫는다
+  readonly, // 편집 가능 여부. true면 입력 가능, false면 조회 전용으로 렌더링
 }: {
   type: string;
   obj: any;
@@ -28,6 +32,7 @@ export default function ChkgdModal({
     rainChkGuidUpdate,
     rwstPolAndGuideUpdate,
   } = useWrStore((state) => state);
+  const alert = useAlertStore((state) => state.setMessage);
   const [guidData, setGuidData] = useState<splRuseWaterType[]>();
   const [headList, setHeadList] = useState<{
     splHeadList: TableUpperProps[];
@@ -55,7 +60,7 @@ export default function ChkgdModal({
     combResdch: 0,
     trbt: 0,
     bod: 0,
-    smll: 0,
+    smll: '-',
     crmty: 0,
     tph: 0,
     tn: 0,
@@ -67,7 +72,7 @@ export default function ChkgdModal({
   useEffect(() => {
     if (rainChkSttn.isSttn) {
       setHeadList({
-        splHeadList: rainChkSttn.splHeadList,
+        splHeadList: rainChkSttn.splHeadList, // 연간 대체수이용량 헤더 정의
         ruseHeadList: rainChkSttn.ruseHeadList,
         rswtDetailHeadList:
           type === "RNB" ? [] : rswtChkSttn.rswtDetailSttnHeadList,
@@ -80,9 +85,12 @@ export default function ChkgdModal({
       });
     }
   }, [
+    type,
     rainChkSttn.isSttn,
     rainChkgdn.splHeadList,
+    rainChkgdn.ruseHeadList,
     rainChkSttn.splHeadList,
+    rainChkSttn.ruseHeadList,
     rswtChkgdn.rswtDetailHeadList,
     rswtChkSttn.rswtDetailSttnHeadList,
   ]);
@@ -154,12 +162,13 @@ export default function ChkgdModal({
         if (onlyData.length === 0) return;
         const total = initStats();
 
+        // 분기별 원본 수질 데이터를 모두 더해 평균 계산의 분모/분자를 만든다.
         onlyData.forEach((item) => {
           total.grssClfgUswtr += item.grssClfgUswtr;
           total.combResdch += item.combResdch;
           total.trbt += item.trbt;
           total.bod += item.bod;
-          total.smll += item.smll;
+          // 냄새(smll)는 수치 평균 대상이 아니라 누적하지 않는다.
           total.crmty += item.crmty;
           total.tph += item.tph;
           total.tn += item.tn;
@@ -167,6 +176,7 @@ export default function ChkgdModal({
           total.clIonQnt += item.clIonQnt;
         });
 
+        // 누적 합계를 항목 개수로 나눠 화면에 표시할 평균 행을 만든다.
         const average = {
           utztnUsgCdText: "평균",
           edit: false,
@@ -174,7 +184,7 @@ export default function ChkgdModal({
           combResdch: (total.combResdch / onlyData.length).toFixed(1),
           trbt: (total.trbt / onlyData.length).toFixed(1),
           bod: (total.bod / onlyData.length).toFixed(1),
-          smll: (total.smll / onlyData.length).toFixed(1),
+          smll: '-',
           crmty: (total.crmty / onlyData.length).toFixed(1),
           tph: (total.tph / onlyData.length).toFixed(1),
           tn: (total.tn / onlyData.length).toFixed(1),
@@ -206,7 +216,7 @@ export default function ChkgdModal({
     }
   };
 
-  const allDataUpdate = () => {
+  const allDataUpdate = async () => {
     const realGuideDetail = obj.guideDetails;
 
     if (updateData === undefined || updateData.length === 0) return;
@@ -233,14 +243,16 @@ export default function ChkgdModal({
     });
     obj.guideDetails = realGuideDetail;
     if (type === "RNB") {
-      rainChkGuidUpdate(obj);
+      const message = await rainChkGuidUpdate(obj);
+      alert(message);
       setIsModal(false);
     } else {
       const polution = Object.values(upPolutionData)
         .flat()
         .filter((item) => item.utztnUsgCd !== "평균");
       obj.rswtrPollutions = polution;
-      rwstPolAndGuideUpdate([obj]);
+      const message = await rwstPolAndGuideUpdate([obj]);
+      alert(message);
       setIsModal(false);
     }
   };
@@ -358,3 +370,4 @@ export default function ChkgdModal({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/modal/chkgd/pbnPrfExcelModal/pbnPrfExcelModal.tsx b/apps/wr/components/ui/modal/chkgd/pbnPrfExcelModal/pbnPrfExcelModal.tsx
index 8f2446099..0857340e3 100644
--- a/apps/wr/components/ui/modal/chkgd/pbnPrfExcelModal/pbnPrfExcelModal.tsx
+++ b/apps/wr/components/ui/modal/chkgd/pbnPrfExcelModal/pbnPrfExcelModal.tsx
@@ -1,10 +1,13 @@
+/**
+ * 재이용실적등록> 하수재이용 실적등록 파일등록 modal
+ */
 import { excelToPbnPrfData } from "@/app/store/prfmncReg/pbnstPrfmncReg/excel";
 import { pbnPrfRegExcelZod } from "@/app/store/prfmncReg/pbnstPrfmncReg/headList";
 import type {
   FcPrfType,
   PrfType,
 } from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
-import { yearOptions } from "@/components/lib/func/commom";
+import { yearOptions } from "@/components/lib/func/common";
 import {
   FormField,
   FormUi,
@@ -17,8 +20,9 @@ import { Button, Input } from "@common/components/ui";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import toast from "react-hot-toast";
+// import toast from "react-hot-toast";
 import type { z } from "zod";
+import { useAlertStore } from "@/src/shared/lib";
 
 export default function PbnPrfExcelModal({
   data,
@@ -29,6 +33,7 @@ export default function PbnPrfExcelModal({
   setIsExcelOPen: (open: boolean) => void;
   setModalExcelData: (excelData: PrfType) => void;
 }) {
+  const alert = useAlertStore((state) => state.setMessage);
   const [file, setFile] = useState<File | null>(null);
   const [excelData, setExcelData] = useState<PrfType[]>();
   const form = useForm<z.infer<typeof pbnPrfRegExcelZod>>({
@@ -65,7 +70,8 @@ export default function PbnPrfExcelModal({
     if (file) {
       const isFile = file;
       if (form.getValues("ym").length < 1) {
-        toast.error("파일업로드 이전에 등록년도를 작성해주세요 ");
+        // toast.error("파일업로드 이전에 등록년도를 작성해주세요 ");
+        alert("파일업로드 이전에 등록년도를 작성해주세요 ");
         setFile(null);
         return;
       }
@@ -190,3 +196,4 @@ export default function PbnPrfExcelModal({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/modal/coMat/constCostFeeTable.tsx b/apps/wr/components/ui/modal/coMat/constCostFeeTable.tsx
index 94f088d0e..d3f02e278 100644
--- a/apps/wr/components/ui/modal/coMat/constCostFeeTable.tsx
+++ b/apps/wr/components/ui/modal/coMat/constCostFeeTable.tsx
@@ -1,3 +1,6 @@
+/**
+ * 공사비 산정표
+ */
 "use client";
 
 import { useWrStore } from "@/app/store";
@@ -5,28 +8,24 @@ import type {
   conCostFeeType,
   ContCostMap,
 } from "@/app/store/common/searchCode/type";
-import { UiTable } from "@common/business_components/ui";
+import { SelectBox, UiTable } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
 import { Label, } from "@common/components/ui";
 import { useEffect, useState } from "react";
+
 export function ConstCostFeeTable() {
-  const { coRvw, constCostRes } = useWrStore((state) => state);
+  const { coRvw, constCostRes, getConstCostFeeRtn } = useWrStore((state) => state);
 
   const [constCostData, setConstCostData] = useState<ContCostMap[]>([]);
+  const [selectedYear, setSelectedYear] = useState<string>(String(new Date().getFullYear()));
 
+  // 연도 선택을 위한 옵션 생성 (예: 현재 연도부터 10년 전까지)
+  const yearOptions = Array.from({ length: 10 }, (_, i) => {
+    const year = new Date().getFullYear() - i;
+    return { val: String(year), text: String(year) };
+  });
 
-  const getFctDescription = (fctCd: string) => {
-    const fctMap: { [key: string]: string } = {
-      "001": "총인처리시설",
-      "002": "염소소독",
-      "003": "UV소독",
-      "004": "전처리시설",
-      "005": "RO",
-    };
-
-    return fctMap[fctCd];
-  }
-  useEffect(() => {
+  const fetchData = async (constCostRes: conCostFeeType[]) => {
     const tableData = constCostRes?.reduce(
       (acc: ContCostMap[], cur: conCostFeeType) => {
         const key = cur.fctCd;
@@ -47,7 +46,7 @@ export function ConstCostFeeTable() {
           };
           acc?.push(target);
         }
-        target[cur.fctCpc] = cur.stdCost;
+        target[cur.fctCpc] = Number(cur.stdCost);
 
         return acc;
       },
@@ -59,19 +58,66 @@ export function ConstCostFeeTable() {
         gubun: getFctDescription(item.gubun) || item.gubun,
       };
     });
-    setConstCostData(formattedTableData);
+
+    return formattedTableData;
+  };
+
+  const getFctDescription = (fctCd: string) => {
+    const fctMap: { [key: string]: string } = {
+      "001": "총인처리시설",
+      "002": "염소소독",
+      "003": "UV소독",
+      "004": "전처리시설",
+      "005": "RO",
+    };
+
+    return fctMap[fctCd];
+  }
+
+  useEffect(() => {
+    const fetchConstCost = async () => {
+      const data = await fetchData(constCostRes);
+      setConstCostData(data);
+    };
+    fetchConstCost();
   }, [constCostRes]);
 
+  useEffect(() => {
+    const fetchConstCost = async () => {
+      if (selectedYear) {
+        const result = await getConstCostFeeRtn(selectedYear);
+        if (result && result.length > 0) {
+          const data = await fetchData(result);
+          setConstCostData(data);
+        } else {
+          alert(selectedYear+'년 데이터가 없습니다.');
+        }
+      } 
+    }
+    fetchConstCost(); 
+  }, [selectedYear]);
+
   return (
-    <>
-      <ListDiv className="h-[calc(100vh-60vh)] overflow-auto">
-        <h3 className="mt-4 ml-2 text-2xl font-medium text-label">
+    <ListDiv className="min-w-[600px] h-[48vh]  overflow-auto">
+      <div className="p-4">
+        <h3 className="text-2xl font-medium text-label">
           공사비 산정표 보기
         </h3>
-        <hr />
-        <div className="col-span-5 flex items-center">
-          <Label className="ml-2 mr-1 text-xl text-gray-600">기준년도</Label>
-          <span>{new Date().getFullYear() || ""}</span>
+        <hr className="mt-4 mb-4"/>
+        <div className="col-span-5 flex items-center justify-between">
+          <div className="flex items-center">
+            <Label className="mr-1 text-xl text-gray-600">기준년도</Label>
+            <SelectBox
+              className="h-full w-32 text-2xl"
+              label=""
+              selectClass={""}
+              selectArray={yearOptions}
+              value={selectedYear}
+              onSelectValue={(val) => setSelectedYear(String(val))
+              }
+            />
+          </div>
+          <span className="mr-2 text-xl text-gray-600">단위: 백만원</span>
         </div>
         <UiTable
           headName={""}
@@ -82,7 +128,10 @@ export function ConstCostFeeTable() {
           cellClick={undefined}
           onPageChange={() => { }}
         />
-      </ListDiv>
-    </>
+        <div className="px-3 text-lg text-gray-700 leading-relaxed">
+          시설용량 구간내 공사비는 직선보간법에 의하여 산출
+        </div>
+      </div>
+    </ListDiv>
   );
 }
diff --git a/apps/wr/components/ui/modal/coMat/rateFeeModal.tsx b/apps/wr/components/ui/modal/coMat/rateFeeModal.tsx
index f67a70b1a..5439d489c 100644
--- a/apps/wr/components/ui/modal/coMat/rateFeeModal.tsx
+++ b/apps/wr/components/ui/modal/coMat/rateFeeModal.tsx
@@ -2,14 +2,24 @@
 
 import { useWrStore } from "@/app/store";
 import type { rateFeeType } from "@/app/store/common/searchCode/type";
-import { UiTable } from "@common/business_components/ui";
+import { SelectBox, UiTable } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
 import {  Label } from "@common/components/ui";
 import { useEffect, useState } from "react";
 
 export function RateFeeTableModal() {
-  const { coRvw, rateFeeRes } = useWrStore((state) => state);
-  const [reateFeeTable, setRateFeeTable] = useState<rateFeeType[]>([]);
+  const { coRvw, rateFeeRes, getRateFeeRtn } = useWrStore((state) => state);
+  const [rateFeeTable, setRateFeeTable] = useState<rateFeeType[]>([]);
+  const [selectedYear, setSelectedYear] = useState<string>(String(new Date().getFullYear()));
+
+  // 연도 선택을 위한 옵션 생성 (예: 현재 연도부터 10년 전까지)
+  const yearOptions = Array.from({ length: 10 }, (_, i) => {
+    const year = new Date().getFullYear() - i;
+    return { val: String(year), text: String(year) };
+  });
+
+  // const 기준년도 = rateFeeRes?.[0]?.yr ?? selectedYear; // 실제 데이터의 기준년도 또는 선택된 연도
+  // setSelectedYear(rateFeeRes?.[0]?.yr ?? selectedYear);
 
   const gubunLabelMap: Record<number, string> = {
     50: "5천만원까지",
@@ -31,6 +41,11 @@ export function RateFeeTableModal() {
     500000: "5000억원까지",
   };
 
+  /**
+   * rateFeeRes 데이터를 가공하여 테이블에 표시하기 적합한 형태로 변환합니다.
+   * - 'SS' 코드를 제외하고, stdCost 기준으로 그룹화하여 BD, SE, CE 요율을 컬럼으로 피벗합니다.
+   * - gubunLabelMap을 사용하여 stdCost에 해당하는 한글 라벨을 추가합니다.
+   */
   const fetchData = async (rateFeeRes: rateFeeType[]) => {
     const data = await rateFeeRes
       ?.filter((item: rateFeeType) => {
@@ -64,40 +79,68 @@ export function RateFeeTableModal() {
 
   useEffect(() => {
     if (rateFeeRes?.length >= 0) {
+      setSelectedYear(rateFeeRes?.[0]?.yr ?? selectedYear);
       fetchData(rateFeeRes).then((data) => {
         setRateFeeTable(data);
       });
     }
   }, [rateFeeRes]);
 
-  return (
-    <>
-      <ListDiv className="min-w-[600px] h-[calc(100vh-60vh)]  overflow-auto">
-        <div className="sticky top-0 z-10 grid grid-cols-6 gap-4 p-4 bg-white">
-          <h3 className="col-span-6 text-2xl font-medium text-label">
-            요율표 보기
-          </h3>
-          <hr className="col-span-6 border-gray-300" />
+  // 컴포넌트 마운트 시 또는 선택된 연도가 변경될 때 데이터 조회
+  useEffect(() => {
+    const fetchRateFee = async () => {
+      if (selectedYear) {
+        const result = await getRateFeeRtn(selectedYear);
+        if (result && result.length > 0) {
+          const data = await fetchData(result);
+          setRateFeeTable(data);
+        } else {
+          alert(selectedYear+'년 데이터가 없습니다.');
+        }
+      } 
+    }
+    fetchRateFee(); 
+  }, [selectedYear]);
 
-          <div className="col-span-5 flex items-center">
-            <Label className="mr-1 text-xl text-gray-600">기준년도</Label>
-            <span>{new Date().getFullYear() || ""}</span>
-          </div>
-          <div className="col-span-6 pr-6">
-            <UiTable
-              className="min-w-full pr-12"
-              key={"rateTable" + reateFeeTable?.length}
-              headName={""}
-              tableData={reateFeeTable || []}
-              headlist={coRvw.rateFeeHeadList}
-              onPageChange={() => {}}
-              pageSize={0}
-              total={0}
-              cellClick={undefined}
-            />
-          </div>
+  return (
+    <ListDiv className="min-w-[460px] h-[50vh]  overflow-auto">
+      <div className="sticky top-0 z-10 grid grid-cols-6 gap-4 p-4 bg-white">
+        <h3 className="col-span-6 text-2xl font-medium text-label">
+          시설부대경비 요율(%)
+        </h3>
+        <hr className="col-span-6 border-gray-300" />
+
+        <div className="col-span-5 flex items-center">
+          <Label className="mr-1 text-xl text-gray-600">기준년도</Label>
+          <SelectBox
+            className="h-full w-32 text-2xl"
+            label=""
+            selectClass={""}
+            selectArray={yearOptions}
+            value={selectedYear}
+            onSelectValue={(val) => setSelectedYear(String(val))
+            }
+          />
         </div>
-      </ListDiv>
-    </>
+        <div className="col-span-6 pr-6">
+          <UiTable
+            className="min-w-full pr-12"
+            key={"rateTable" + rateFeeTable?.length}
+            headName={""}
+            tableData={rateFeeTable || []}
+            headlist={coRvw.rateFeeHeadList}
+            onPageChange={() => {}}
+            pageSize={0}
+            total={0}
+            cellClick={undefined}
+          />
+        </div>
+        <div className="col-span-6 px-3 text-lg text-gray-700 leading-relaxed">
+          출처 : 하수도분야 보조금 편성 및 실무요령
+          <br />
+          시설부대경비 및 감리비 요율적용시 공사비가 요율표의 중간에 있을 때는 직선보간법에 의하여 산출
+        </div>
+      </div>
+    </ListDiv>
   );
 }
diff --git a/apps/wr/components/ui/modal/coMat/ruseCaseMng/ruseCaseMngExcelModal.tsx b/apps/wr/components/ui/modal/coMat/ruseCaseMng/ruseCaseMngExcelModal.tsx
index 78cbd30ec..8f0445cd6 100644
--- a/apps/wr/components/ui/modal/coMat/ruseCaseMng/ruseCaseMngExcelModal.tsx
+++ b/apps/wr/components/ui/modal/coMat/ruseCaseMng/ruseCaseMngExcelModal.tsx
@@ -1,7 +1,7 @@
 import { useWrStore } from "@/app/store";
 import { coRegExcel } from "@/app/store/matDmd/coSttn/headList";
 import { mapAndValidateRow,  type ruseCaseMngExcelProps } from "@/app/store/matDmd/ruseCaseMng/excel";
-import { showConfirmToast } from "@/components/lib/func/commom";
+import { showConfirmToast } from "@/components/lib/func/common";
 import { useAlertStore } from "@/src/shared/lib";
 import { filePicked, Title } from "@common/business_components/ui";
 import { Form } from "@common/business_components/ui/form";
@@ -12,13 +12,14 @@ import { useForm } from "react-hook-form";
 import type { z } from "zod";
 
 export default function RuseCaseMngExcel({setIsExcelOpen}:{setIsExcelOpen: (isOpen:boolean)=>void}) {
-  const { insertRuseCaseMng } = useWrStore((state) => state);
+  const { insertRuseCaseMng, code } = useWrStore((state) => state);
   const alert = useAlertStore((state) => state.setMessage);
   const form = useForm<z.infer<typeof coRegExcel>>({
     resolver: zodResolver(coRegExcel),
   });
 
   const [file, setFiles] = useState<File | undefined>();
+  const sewageOutUseCodeList = code.sewageOutFclttUse ?? [];
 
   const onSubmit = () => {
     if (file) {
@@ -125,7 +126,25 @@ export default function RuseCaseMngExcel({setIsExcelOpen}:{setIsExcelOpen: (isOp
 
 
             if(parsingExcel.ok&&parsingExcel.value){
-              newArray.push(parsingExcel.value);
+              const parsedValue = { ...parsingExcel.value };
+              const usageText = parsedValue.grnteWqUsg?.toString().trim();
+
+              if (usageText) {
+                const usageCode = sewageOutUseCodeList.find(
+                  (codeItem) => codeItem.text.trim() === usageText
+                )?.val;
+
+                if (!usageCode) {
+                  isError.push([
+                    `${parsedValue.ruseBizNm || "행"} => [보증수질_용도별] '${usageText}' 에 해당하는 WR018 코드가 없습니다.`,
+                  ]);
+                  return;
+                }
+
+                parsedValue.grnteWqUsg = usageCode;
+              }
+
+              newArray.push(parsedValue);
             }else if(parsingExcel.errors){
               isError.push(parsingExcel.errors);
             }
@@ -192,3 +211,4 @@ export default function RuseCaseMngExcel({setIsExcelOpen}:{setIsExcelOpen: (isOp
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/modal/coReg/coRegExcel/coRegExcelModal.tsx b/apps/wr/components/ui/modal/coReg/coRegExcel/coRegExcelModal.tsx
index bc625ec78..c1bfda0ff 100644
--- a/apps/wr/components/ui/modal/coReg/coRegExcel/coRegExcelModal.tsx
+++ b/apps/wr/components/ui/modal/coReg/coRegExcel/coRegExcelModal.tsx
@@ -8,9 +8,10 @@ import { Button, Input } from "@common/components/ui";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import toast from "react-hot-toast";
+// import toast from "react-hot-toast";
 import type { z } from "zod";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useAlertStore } from "@/src/shared/lib";
 
 export default function CoRegExcel({
   isModal,
@@ -18,6 +19,7 @@ export default function CoRegExcel({
   isModal: (open: boolean) => void;
 }) {
   const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
   const { ldrmnt, loadingOpen } = useWrStore((state) => state);
   const { isLoading } = ldrmnt;
   const form = useForm<z.infer<typeof coRegExcel>>({
@@ -76,11 +78,12 @@ export default function CoRegExcel({
             await ldrmntRegData(array);
             isModal(false);
             loadingOpen(false);
-            toast.success(`잠재수요처 등록이 요청되었습니다.`);
-          } catch (e) {
+            // toast.success(`잠재수요처 등록이 요청되었습니다.`);
+            alert("잠재수요처 등록이 요청되었습니다.");
+          } catch (e: any) {
             console.log(e);
             loadingOpen(false);
-            alert(e);
+            // alert(e.message);
             return true;
           }
         })
@@ -90,6 +93,8 @@ export default function CoRegExcel({
         });
     } else {
       loadingOpen(false);
+      // toast.error(`엑셀 파일을 선택해 주세요.`);
+      alert("엑셀 파일을 선택해 주세요.");
     }
   };
 
diff --git a/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx b/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx
index 9d349a6dd..236797711 100644
--- a/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx
+++ b/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx
@@ -6,7 +6,7 @@ import {
   type customRainBdst,
 } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
-import { tableData } from "@/components/lib/func/commom";
+import { tableData } from "@/components/lib/func/common";
 import HtdflRegForm from "@/components/ui/form/fcltReg/htdflReg/htdflRegForm";
 import RainRegForm from "@/components/ui/form/fcltReg/rainReg/rainRegForm";
 import RswtrRegForm from "@/components/ui/form/fcltReg/rswtrReg/rswtrRegForm";
@@ -18,7 +18,8 @@ import {
 } from "@common/business_components";
 import { Button, Input, Label } from "@common/components";
 import { useEffect, useState } from "react";
-import toast from "react-hot-toast";
+// import toast from "react-hot-toast";
+import { useAlertStore } from "@/src/shared/lib";
 
 export type objSearchType = {
   sgg: string | number;
@@ -47,7 +48,7 @@ export function BdstReg<T extends MoType>({
   const { code, bdst, auth, findBdst } = useWrStore((state) => {
     return state;
   });
-
+  const alert = useAlertStore((state) => state.setMessage);
   const { laeSeCd } = auth;
 
   const [bdstTable, setBdstTable] = useState<BdstTypeMap[T][]>();
@@ -73,7 +74,8 @@ export function BdstReg<T extends MoType>({
 
       findBdst(String(data), searchTxt || "", moType);
     }else{
-      toast.error("시도 또는 시군구를 선택하여 주십시오.");
+      // toast.error("시도 또는 시군구를 선택하여 주십시오.");
+      alert("시도 또는 시군구를 선택하여 주십시오.");
     }
   };
 
@@ -255,3 +257,4 @@ export function BdstReg<T extends MoType>({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx b/apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx
index 7762e96dc..3be1806f8 100644
--- a/apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx
+++ b/apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx
@@ -1,10 +1,13 @@
+/**
+ * 재이용시설등록 > 하수재이용시설등록 - 취수하수처리장 추가 modal
+ */
 "use client";
 import { useWrStore } from "@/app/store";
 import type {
   pubHasuType,
   fcOrgwtType,
 } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
-import { tableData } from "@/components/lib/func/commom";
+import { tableData } from "@/components/lib/func/common";
 import RuseMngTable from "@/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable";
 import { Title } from "@common/business_components/ui";
 import { Label } from "@common/business_components/ui/form/lib/label";
@@ -12,7 +15,8 @@ import { Button } from "@common/business_components/ui/table/lib/button";
 import { Input } from "@common/components/ui";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import toast from "react-hot-toast";
+// import toast from "react-hot-toast";
+import { useAlertStore } from "@/src/shared/lib";
 
 export default function FcOrgwtsRegModal({
   onRightSet,
@@ -23,6 +27,7 @@ export default function FcOrgwtsRegModal({
   closeModal?: (val: boolean) => void;
   initTableData?: any[];
 }) {
+  const alert = useAlertStore((state) => state.setMessage);
   const { code, pbnst, getSwtrmtFcltNm, searchFclts } = useWrStore(
     (state) => state
   );
@@ -53,7 +58,8 @@ export default function FcOrgwtsRegModal({
       closeModal?.(false)
     }
     else {
-      toast.error("취수하수처리장 목록을 선택해주세요.")
+      // toast.error("취수하수처리장 목록을 선택해주세요.");
+      alert("취수하수처리장 목록을 선택해주세요.");
     }
   }
 
@@ -201,3 +207,4 @@ export default function FcOrgwtsRegModal({
     </div>
   );
 }
+
diff --git a/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx b/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx
index ec79dd42b..fcb6fe392 100644
--- a/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx
+++ b/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx
@@ -18,7 +18,7 @@ import { PbnstBuseForm } from "@/components/ui/form/fcltReg/pbnstReg/buseReg/bug
 import { type FieldErrors, type UseFormReturn } from "react-hook-form";
 import { writeRgtrAndMdfr } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg";
 import type { z } from "zod";
-import { confirmToast } from "@/components/lib/func/commom";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { useTranslation } from "react-i18next";
 
 export function PbnstRegModal({
@@ -35,6 +35,7 @@ export function PbnstRegModal({
   newIndexMng:number
 }) {
   const { t } = useTranslation("base");
+  const { confirm } = useConfirm();
 
   //TODO: 유즈 스테이트에 set만해도 되나?
   const [, setCurrentTab] = useState<string>("mng");
@@ -50,7 +51,9 @@ export function PbnstRegModal({
         setPbnstInsert(data[0]);
       }
     };
-    confirmToast(t("isInsertMsg"), handleConfirm);
+    if (await confirm(t("isInsertMsg"))) {
+      handleConfirm();
+    }
   };
 
   const handleTabChange = (value: string) => {
@@ -114,3 +117,4 @@ export function PbnstRegModal({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx b/apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx
index 4c06f5722..1a07720a7 100644
--- a/apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx
+++ b/apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx
@@ -15,7 +15,7 @@ import {
   type fcBizType,
 } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
 import { formH1Class } from "@/components/lib/class/comClass";
-import { InputTableBody } from "@/components/lib/func/TableData";
+import { pbnstTableBody } from "@/components/lib/func/TableData";
 import { PbnstMngForm } from "@/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm";
 import { ScrollArea, Title, UiTable } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
@@ -341,7 +341,7 @@ export function PbnstSttnModal({ data, titleVisible,isMap}: { data: customPbnst;
                           {headMakeprfmnc(pbnstPrfmncSttn.monthSttnHeadList, [])}
                         </TableHeader>
                         <TableBody key={prfmnc.pageKey + 'pageKey'}>
-                          {InputTableBody(prfData[ruseTab as keyof typeof prfData] || [], pbnstPrfmncSttn.monthSttnHeadList, setPrfData as any)}
+                          {pbnstTableBody(prfData[ruseTab as keyof typeof prfData] || [], pbnstPrfmncSttn.monthSttnHeadList, setPrfData as any)}
                         </TableBody>
                       </Table>
                     {/* </ScrollArea> */}
diff --git a/apps/wr/components/ui/modal/sttn/sttnDetailModal/coDatailModal.tsx b/apps/wr/components/ui/modal/sttn/sttnDetailModal/coDatailModal.tsx
index b23cad340..15fcdd1e2 100644
--- a/apps/wr/components/ui/modal/sttn/sttnDetailModal/coDatailModal.tsx
+++ b/apps/wr/components/ui/modal/sttn/sttnDetailModal/coDatailModal.tsx
@@ -3,7 +3,7 @@ import { txtSize } from "@/app/store/common/code/basicCode";
 import type { customLdrmnt } from "@/app/store/matDmd/ldrmntCoSttn";
 import { ldrmntZod } from "@/app/store/matDmd/ldrmntCoSttn/headList";
 import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
-import { formatCommaNumber, handleCommaNumberChange } from "@/components/lib/func/commom";
+import { formatCommaNumber, handleCommaNumberChange } from "@/components/lib/func/common";
 import { Form, FormField, FormUi, ScrollArea } from "@common/business_components/ui";
 import { Button, Input } from "@common/components/ui";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -877,3 +877,4 @@ export default function CoDetailModal({
     </div>
   );
 }
+
diff --git a/apps/wr/components/ui/table/chkgdTable/guideDetailTable/guideDetailTable.tsx b/apps/wr/components/ui/table/chkgdTable/guideDetailTable/guideDetailTable.tsx
index 4ff4ab14e..35745077c 100644
--- a/apps/wr/components/ui/table/chkgdTable/guideDetailTable/guideDetailTable.tsx
+++ b/apps/wr/components/ui/table/chkgdTable/guideDetailTable/guideDetailTable.tsx
@@ -1,3 +1,6 @@
+/**
+ * 재이용실적등록 > 지도점검결과등록 - 연간대체수이용량, 연간중수도이용량 click시 상세 model의 table body
+ */
 "use client";
 import { headMakeprfmnc } from "@/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
 import type { TableUpperProps } from "@/app/store/common/type/header";
@@ -41,7 +44,17 @@ export function GuideDetailsTable({
   return (
     <>
       <div className={`card !m-[1.2rem] !p-0r `}>
-        <Table variant="secondary">
+        <Table variant="secondary" className="table-fixed">
+          <colgroup>
+            {headList
+              .filter((head) => head.visible !== false)
+              .map((head) => (
+                <col
+                  key={head.id}
+                  style={{ width: head.widthPercent ? `${head.widthPercent}%` : undefined }}
+                />
+              ))}
+          </colgroup>
           <TableHeader className="font-bold">{headMakeprfmnc(headList, upheadList)}</TableHeader>
           <TableBody >
             {InputTableBody(inputData ?? [], headList, setInputData, readonly)}
diff --git a/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx b/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx
index a8ed0608c..76e32425e 100644
--- a/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx
+++ b/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx
@@ -4,7 +4,7 @@ import { useWrStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common/type/header";
 import { rainPageSize, type rainChkZodType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn";
 import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList";
-import { codeToText, tableData } from "@/components/lib/func/commom";
+import { codeToText, tableData } from "@/components/lib/func/common";
 import {
   chRowspanTable,
   rainChkTableData
@@ -63,8 +63,8 @@ export default function RainChkgdTable({
 
   const handleCellClick = useCallback((index: number, headId: string) => {
     if (
-      headId === "totalSplyUswtrUtztnQnt" ||
-      headId === "totalRuseFcltUtztnQnt"
+      headId === "totalSplyUswtrUtztnQnt" || // 연간대체수이용량(m³)
+      headId === "totalRuseFcltUtztnQnt" // 연간빗물이용량(m³)
     ) {
 
       handleClick(makeTableData[index])
@@ -190,7 +190,21 @@ export default function RainChkgdTable({
 
   return (
     <>
-      <Table variant="secondary">
+      <Table variant="secondary" className="table-fixed">
+        <colgroup>
+          {headList.headList
+            .filter((head) => head.visible !== false)
+            .map((head) => (
+              <col
+                key={head.id}
+                style={{
+                  width: head.widthPercent
+                    ? `${head.widthPercent}%`
+                    : undefined,
+                }}
+              />
+            ))}
+        </colgroup>
         <TableHeader className="font-bold">
           {headMakeprfmnc(
             headList?.headList,
@@ -219,3 +233,4 @@ export default function RainChkgdTable({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable.tsx b/apps/wr/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable.tsx
index 3a59edb49..bac0e71a3 100644
--- a/apps/wr/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable.tsx
+++ b/apps/wr/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable.tsx
@@ -1,3 +1,6 @@
+/**
+ * 재이용실적등록 > 지도점검결과 등록 - 중수도 table 목록
+ */
 "use client";
 import { headMakeprfmnc } from "@/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
 import { useWrStore } from "@/app/store";
@@ -8,12 +11,12 @@ import {
   type rswtChkZodType,
   type rswtrChkDetailsZodType,
 } from "@/app/store/prfmncReg/chkgdnReg/rswrtChkgdn";
-import { tableData } from "@/components/lib/func/commom";
+import { tableData } from "@/components/lib/func/common";
 import {
   chRowspanTable,
   rswtChkTableData,
 } from "@/components/lib/func/TableData";
-import { codeToText } from "@/components/lib/func/commom";
+import { codeToText } from "@/components/lib/func/common";
 import UiPageNations from "@common/business_components/ui/table/uiPageNations";
 import { Table, TableBody, TableHeader } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
@@ -145,7 +148,17 @@ export default function RswtChkgdTable({
 
   return (
     <>
-      <Table variant="secondary">
+      <Table variant="secondary" className="table-fixed">
+        <colgroup>
+          {headList.headList
+            .filter((head) => head.visible !== false)
+            .map((head) => (
+              <col
+                key={head.id}
+                style={{ width: head.widthPercent ? `${head.widthPercent}%` : undefined, }}
+              />
+            ))}
+        </colgroup>
         <TableHeader className="font-bold">
           {headMakeprfmnc(headList?.headList, headList?.upHeadList)}
         </TableHeader>
@@ -171,3 +184,4 @@ export default function RswtChkgdTable({
     </>
   );
 }
+
diff --git a/apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx b/apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx
index fb243010e..298c2bf5e 100644
--- a/apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx
+++ b/apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx
@@ -5,7 +5,7 @@ import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import {
   formatCommaNumber,
   handleCommaNumberChange,
-} from "@/components/lib/func/commom";
+} from "@/components/lib/func/common";
 
 import {
  // DatePicker,
@@ -225,3 +225,4 @@ const RuseMngTableForm = React.forwardRef<any, RuseMngTableProps>(
 RuseMngTableForm.displayName = "RuseMngTableForm";
 
 export default RuseMngTableForm;
+
diff --git a/apps/wr/middleware.ts b/apps/wr/middleware.ts
index d1e96dacc..498e45fed 100644
--- a/apps/wr/middleware.ts
+++ b/apps/wr/middleware.ts
@@ -30,6 +30,7 @@ function buildAuthHeaders(req: NextRequest): Headers {
   const requestHeaders = new Headers(req.headers);
   const token = req.cookies.get(CLAIM_NAME)?.value;
   const userId = req.cookies.get(AUTH_USER_ID)?.value;
+
   if (token) requestHeaders.set(CLAIM_NAME, token);
   if (userId) requestHeaders.set(AUTH_USER_ID, userId);
   return requestHeaders;
@@ -38,7 +39,9 @@ function buildAuthHeaders(req: NextRequest): Headers {
 /** 공통: rewrite 응답 생성 (헤더 주입 여부 선택) */
 function rewriteWith(url: string, req: NextRequest, withAuth = false): NextResponse {
   return withAuth
-    ? NextResponse.rewrite(new URL(url), { headers: buildAuthHeaders(req) })
+    ? NextResponse.rewrite(new URL(url), {
+        headers: buildAuthHeaders(req),
+      })
     : NextResponse.rewrite(new URL(url));
 }
 
diff --git a/apps/wr/next-env.d.ts b/apps/wr/next-env.d.ts
index 1b3be0840..830fb594c 100644
--- a/apps/wr/next-env.d.ts
+++ b/apps/wr/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/wr/package.json b/apps/wr/package.json
index 68ce5f1c5..662585887 100644
--- a/apps/wr/package.json
+++ b/apps/wr/package.json
@@ -30,7 +30,7 @@
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.474.0",
     "moment": "^2.30.1",
-    "next": "15.3.8",
+    "next": "15.5.18",
     "ol": "^7.3.0",
     "ol-ext": "^4.0.11",
     "proj4": "^2.9.0",
@@ -51,7 +51,7 @@
     "@eslint/eslintrc": "^3",
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
-    "eslint-config-next": "15.1.7",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
diff --git a/apps/wr/public/images/help.png b/apps/wr/public/images/help.png
index e872802e4..977ef9d38 100644
Binary files a/apps/wr/public/images/help.png and b/apps/wr/public/images/help.png differ
diff --git a/apps/wr/public/sample_ruseCaseMng.xlsx b/apps/wr/public/sample_ruseCaseMng.xlsx
index 3676b4f71..6c6abd4c0 100644
Binary files a/apps/wr/public/sample_ruseCaseMng.xlsx and b/apps/wr/public/sample_ruseCaseMng.xlsx differ
diff --git a/apps/wr/src/app/providers/app-provider.tsx b/apps/wr/src/app/providers/app-provider.tsx
index 0497e1f52..f54dfea52 100644
--- a/apps/wr/src/app/providers/app-provider.tsx
+++ b/apps/wr/src/app/providers/app-provider.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect } from "react";
 import { DndProvider } from "react-dnd";
 import { MultiBackend, getBackendOptions } from "@minoru/react-dnd-treeview";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -14,11 +15,18 @@ import { ConfirmDialog } from "../../shared/ui/confirm-dialog";
 // import "./globals.css";
 import i18next from "i18next";
 import { I18nextProvider } from "react-i18next";
+import { Toaster } from "react-hot-toast";
 import koBase from "@/public/locales/ko/message.json";
-import { StoreProvider as WrStoreProvider } from "@/app/store";
+import {
+  StoreProvider as WrStoreProvider,
+  useWrStore,
+} from "@/app/store";
+import { usePathname } from "next/navigation";
 //import { LoginApi } from "@/src/entities/auth";
 //import { useEffect } from "react";
+import { setCookie } from "@/src/shared/lib/cookie";
 
+setCookie("site-id-key", process.env.NEXT_PUBLIC_SITE_ID || "WR");
 
 const i18n = i18next.createInstance();
 i18n.init({
@@ -31,6 +39,22 @@ i18n.init({
   },
 });
 
+function CommonCodeInitializer() {
+  const isInit = useWrStore((state) => state.code.isInit);
+  const initCommonCodes = useWrStore((state) => state.initCommonCodes);
+  const pathname = usePathname();
+  const isLoginPage =
+    pathname === "/auth/login" || pathname?.startsWith("/auth/login/");
+
+  useEffect(() => {
+    if (isLoginPage) return;
+    if (isInit) return;
+    initCommonCodes();
+  }, [isInit, initCommonCodes, isLoginPage]);
+
+  return null;
+}
+
 const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   const queryClient = new QueryClient();
   return (
@@ -46,6 +70,7 @@ const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
                 >
                   <I18nextProvider i18n={i18n}>
                     <WrStoreProvider>
+                      <CommonCodeInitializer />
                       {children}
                     </WrStoreProvider>
                   </I18nextProvider>
@@ -54,6 +79,7 @@ const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
               <AlertDialog />
               <PromptDialog />
               <ConfirmDialog />
+              <Toaster position="top-center" />
             </AuthWrapper>
           </ConfirmProvider>
         </PromptProvider>
diff --git a/apps/wr/src/app/styles/components.css b/apps/wr/src/app/styles/components.css
index 4dc30bafd..fd651fe6c 100644
--- a/apps/wr/src/app/styles/components.css
+++ b/apps/wr/src/app/styles/components.css
@@ -21,6 +21,62 @@
     .card-header {
       @apply border-b-[#3f4042];
     }
+
+    .gis-layer-panel {
+      background: #111214;
+      border-right-color: #2f3136;
+      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
+    }
+
+    .gis-layer-panel-title {
+      color: #f3f4f6;
+    }
+
+    .gis-layer-panel hr {
+      border-color: #2f3136;
+    }
+
+    .gis-layer-row {
+      color: #e5e7eb;
+    }
+
+    .gis-layer-row:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    .gis-layer-row span,
+    .gis-layer-row label {
+      color: #e5e7eb !important;
+    }
+
+    .gis-layer-row input[type="checkbox"] {
+      accent-color: #c026d3;
+    }
+
+    .gis-layer-action-button {
+      background: #1a1c20;
+      border-color: #3b82f6;
+      color: #cfe3ff;
+    }
+
+    .gis-layer-action-button:hover {
+      background: #23262b;
+    }
+
+    .gis-layer-setting {
+      background: #111214;
+      border-top: 1px solid #2f3136;
+    }
+
+    .gis-layer-toggle {
+      background: #111214;
+      border-color: #2f3136;
+      color: #f3f4f6;
+    }
+
+    .gis-layer-toggle:hover {
+      background: #1a1c20;
+    }
   }
 
   input[type="file"] {
diff --git a/apps/wr/src/entities/auth/api/login-service.ts b/apps/wr/src/entities/auth/api/login-service.ts
index 77d114004..94be8b53f 100644
--- a/apps/wr/src/entities/auth/api/login-service.ts
+++ b/apps/wr/src/entities/auth/api/login-service.ts
@@ -17,8 +17,13 @@ export class LoginApiService implements LoginService {
 
   public async login(payload: ILogin): Promise<void> {
     try {
+      tokenManager.clearAuthToken();
       const response = await fetch( PROXY_HOST+ ENDPOINT.USER_SERVICE.LOGIN, {
         method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Site-Id": SITE_ID,
+        },
         body: JSON.stringify({
           userId: payload.userId,
           password: payload.password,
@@ -51,7 +56,12 @@ export class LoginApiService implements LoginService {
     try {
       const response = await fetch(PROXY_HOST+
         `${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-        { method: "PUT" },
+        {
+          method: "PUT",
+          headers: {
+            "X-Site-Id": SITE_ID,
+          },
+        },
       );
 
       const data = await response.json();
diff --git a/apps/wr/src/entities/auth/lib/token-manager.ts b/apps/wr/src/entities/auth/lib/token-manager.ts
index 40d32f33e..919386622 100644
--- a/apps/wr/src/entities/auth/lib/token-manager.ts
+++ b/apps/wr/src/entities/auth/lib/token-manager.ts
@@ -1,6 +1,13 @@
 import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config";
 import { getCookie, removeCookie, setCookie } from "@/src/shared/lib/cookie";
 
+type JwtPayload = {
+  sub?: string; // 토큰 subject
+  exp?: number; // 만료 시각(초 단위)
+  iat?: number; // 발급 시각(초 단위)
+  [key: string]: unknown;
+};
+
 export class TokenManager {
   private static instance: TokenManager;
   private refreshTimer: NodeJS.Timeout | null = null;
@@ -18,6 +25,49 @@ export class TokenManager {
     return getCookie(key);
   }
 
+  private parseJwt(token: string): JwtPayload {
+    const parts = token.split(".");
+    if (parts.length !== 3) {
+      throw new Error("유효한 JWT 형식이 아닙니다.");
+    }
+
+    const base64Url = parts[1] ?? ""; // Payload를 가져온다.
+    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+    const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
+    const jsonPayload = decodeURIComponent(
+      atob(padded)
+        .split("")
+        .map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`)
+        .join("")
+    );
+
+    return JSON.parse(jsonPayload) as JwtPayload;
+  }
+
+  public getRemainingMsFromToken(key: string = CLAIM_NAME): number | null {
+    const token = this.getToken(key);
+    if (!token) {
+      return null;
+    }
+
+    try {
+      const payload = this.parseJwt(token);
+      if (typeof payload.exp !== "number") {
+        return null;
+      }
+
+      return payload.exp * 1000 - Date.now();
+    } catch (error) {
+      console.error("JWT 파싱 오류:", error);
+      return null;
+    }
+  }
+
+  public isExpiredToken(key: string = CLAIM_NAME): boolean {
+    const remainingMs = this.getRemainingMsFromToken(key);
+    return remainingMs === null || remainingMs <= 0;
+  }
+
   public setToken(key: string, value: string): void {
     setCookie(key, value, {
       secure: window.location.protocol === "https:",
diff --git a/apps/wr/src/features/auth/login/ui/OtpModal.tsx b/apps/wr/src/features/auth/login/ui/OtpModal.tsx
deleted file mode 100644
index 2c216faaf..000000000
--- a/apps/wr/src/features/auth/login/ui/OtpModal.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { useState } from "react";
-import { ACCESS_TOKEN, AUTH_USER_ID, REFRESH_TOKEN, CLAIM_NAME } from "@/src/shared/config";
-import { tokenManager } from "@/src/entities/auth/lib/token-manager";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-} from "@common/components";
-
-interface OtpModalProps {
-  onClose: () => void;
-  onSuccess: () => void;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export default function OtpModal({ onClose, onSuccess, open, onOpenChange }: OtpModalProps) {
-  const [otp, setOtp] = useState("");
-  const [error, setError] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleSubmit = async () => {
-    try {
-      setIsLoading(true);
-      setError("");
-      
-      const tempToken = localStorage.getItem("tempToken");
-      console.log("tempToken from localStorage:", tempToken);
-      
-      if (!tempToken) {
-        setError("임시 토큰이 없습니다. 로그인을 다시 시도해주세요.");
-        return;
-      }
-
-      // Proxy를 통해 OTP 인증 처리
-      const response = await fetch(`/api/proxy/user-service/api/v1/auth/2fa/verify`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          otpCode: otp,
-          tempToken
-        }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        let errorMsg = errorData.message || 'OTP 인증 실패';
-        if (Array.isArray(errorData.errors) && errorData.errors.length > 0) {
-          errorMsg = errorData.errors.map((e: { message: string }) => e.message).join(', ');
-        }
-        throw new Error(errorMsg);
-      }
-
-      const data = await response.json();
-      console.log("OTP verification response:", data);
-      console.log("Response headers:", Object.fromEntries(response.headers.entries()));
-      console.log("Response data keys:", Object.keys(data));
-      console.log("Full response data:", JSON.stringify(data, null, 2));
-      
-      // 2FA 응답에서는 access-token만 있고 token-id는 없을 수 있음
-      const accessToken = data[ACCESS_TOKEN] || data.accessToken || data.access_token || data.token || data['ss-token'];
-      
-      console.log("Extracted accessToken:", !!accessToken);
-      console.log("Token value - accessToken:", accessToken?.substring(0, 20) + "...");
-      
-      // access-token이 있는 경우 저장
-      if (accessToken) {
-        console.log("Saving access token from OTP verification");
-        tokenManager.setToken(CLAIM_NAME, accessToken); // Authorization으로 저장
-        
-        // 리프레시 토큰도 확인
-        const refreshToken = data[REFRESH_TOKEN] || data.refreshToken || data.refresh_token;
-        if (refreshToken) {
-          console.log("Saving refresh token");
-          tokenManager.setToken(REFRESH_TOKEN, refreshToken);
-        }
-        
-        // userId는 원래 로그인 응답에서 가져온 값 사용
-        const originalUserId = data.userId;
-        if (originalUserId) {
-          console.log("Saving userId from original login response");
-          tokenManager.setToken(AUTH_USER_ID, originalUserId);
-        }
-        
-        console.log("All tokens saved successfully");
-      } else {
-        console.log("No access token in OTP response");
-        console.log("Available data keys:", Object.keys(data));
-        console.log("Data values:", Object.entries(data).map(([k, v]) => `${k}: ${typeof v === 'string' ? v.substring(0, 20) + '...' : v}`));
-      }
-      
-      onSuccess();
-    } catch (error: unknown) {
-      console.error("OTP verification error:", error);
-      if (error instanceof Error) {
-        setError(error.message);
-      } else {
-        setError("OTP 인증 실패");
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleClose = () => {
-    onOpenChange(false);
-    onClose();
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md">
-        <div className="pt-8 text-center">
-          <h2 className="text-[1.3rem] font-semibold mb-6">OTP 인증</h2>
-          
-          <div className="space-y-4">
-            <input
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg"
-              placeholder="OTP 코드를 입력하세요"
-              value={otp}
-              onChange={(e) => setOtp(e.target.value)}
-              disabled={isLoading}
-            />
-            
-            {error && (
-              <div className="text-red-500 text-sm text-center">
-                {error}
-              </div>
-            )}
-            
-            <div className="flex space-x-2 pt-4">
-              <Button 
-                onClick={handleSubmit}
-                disabled={isLoading || !otp.trim()}
-                className="flex-1"
-              >
-                {isLoading ? "인증 중..." : "인증"}
-              </Button>
-              <Button 
-                variant="outline"
-                onClick={handleClose}
-                disabled={isLoading}
-                className="flex-1"
-              >
-                닫기
-              </Button>
-            </div>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/apps/wr/src/features/auth/login/ui/SignupModal.tsx b/apps/wr/src/features/auth/login/ui/SignupModal.tsx
deleted file mode 100644
index 00a244e13..000000000
--- a/apps/wr/src/features/auth/login/ui/SignupModal.tsx
+++ /dev/null
@@ -1,701 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import type { UserSaveData } from "@/src/entities/user";
-import { ENDPOINT, BASE_URL } from "@/src/shared/config";
-import { SignupClient } from "@/src/shared/api/signup-client";
-import "./signup-modal.css";
-
-interface SignupModalProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onClose: () => void;
-  onSuccess: () => void;
-}
-
-function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
-  const [currentStep, setCurrentStep] = useState<'agreement' | 'signup'>('agreement');
-  const [agreed, setAgreed] = useState(false);
-  const [formData, setFormData] = useState({
-    userId: "",
-    userName: "",
-    email: "",
-    password: "",
-    confirmPassword: "",
-    pswdHnt: "",
-    pswdAns: "",
-    mphn: "",
-    telno: "",
-    zip: "",
-    addr: "",
-    daddr: "",
-    laeSeCd: "",
-    ogdpSeCd: "",
-    expryYmd: "",
-    instSeCd: "",
-    dtlInstCd: "",
-    enoCd: "",
-  });
-
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [isLoading, setIsLoading] = useState(false);
-  const [isCheckingId, setIsCheckingId] = useState(false);
-  const [isCheckingEmail, setIsCheckingEmail] = useState(false);
-  const [idAvailable, setIdAvailable] = useState<boolean | null>(null);
-  const [emailAvailable, setEmailAvailable] = useState<boolean | null>(null);
-
-  // 모달이 닫힐 때 초기화
-  useEffect(() => {
-    if (!open) {
-      setCurrentStep('agreement');
-      setAgreed(false);
-      setFormData({
-        userId: "",
-        userName: "",
-        email: "",
-        password: "",
-        confirmPassword: "",
-        pswdHnt: "",
-        pswdAns: "",
-        mphn: "",
-        telno: "",
-        zip: "",
-        addr: "",
-        daddr: "",
-        laeSeCd: "",
-        ogdpSeCd: "",
-        expryYmd: "",
-        instSeCd: "",
-        dtlInstCd: "",
-        enoCd: "",
-      });
-      setErrors({});
-      setIdAvailable(null);
-      setEmailAvailable(null);
-    }
-  }, [open]);
-
-  const handleAgreementChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setAgreed(e.target.checked);
-  };
-
-  const handleNextStep = () => {
-    if (agreed) {
-      setCurrentStep('signup');
-    }
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
-    
-    // 에러 초기화
-    if (errors[name]) {
-      setErrors(prev => ({ ...prev, [name]: "" }));
-    }
-  };
-
-  const validateForm = () => {
-    const newErrors: Record<string, string> = {};
-
-    // 필수 필드 검증
-    if (!formData.userId) newErrors.userId = "아이디를 입력해주세요.";
-    if (!formData.userName) newErrors.userName = "이름을 입력해주세요.";
-    if (!formData.password) newErrors.password = "비밀번호를 입력해주세요.";
-    if (!formData.confirmPassword) newErrors.confirmPassword = "비밀번호 확인을 입력해주세요.";
-    if (!formData.pswdHnt) newErrors.pswdHnt = "비밀번호 힌트를 입력해주세요.";
-    if (!formData.laeSeCd) newErrors.laeSeCd = "법인구분을 선택해주세요.";
-    if (!formData.ogdpSeCd) newErrors.ogdpSeCd = "기관구분을 선택해주세요.";
-
-    // 비밀번호 확인
-    if (formData.password && formData.confirmPassword && formData.password !== formData.confirmPassword) {
-      newErrors.confirmPassword = "비밀번호가 일치하지 않습니다.";
-    }
-
-    // 비밀번호 정규식 검증
-    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/;
-    if (formData.password && !passwordRegex.test(formData.password)) {
-      newErrors.password = "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.";
-    }
-
-    // 이메일 형식 검증
-    if (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-      newErrors.email = "올바른 이메일 형식을 입력해주세요.";
-    }
-
-    // 중복 체크 검증
-    if (idAvailable === false) newErrors.userId = "이미 사용 중인 아이디입니다.";
-    if (emailAvailable === false) newErrors.email = "이미 사용 중인 이메일입니다.";
-
-    setErrors(newErrors);
-    const isValid = Object.keys(newErrors).length === 0;
-    console.log("폼 검증 결과:", { isValid, errors: newErrors, formData });
-    return isValid;
-  };
-
-  const checkUserIdDuplicate = async () => {
-    if (!formData.userId) {
-      setErrors(prev => ({ ...prev, userId: "아이디를 입력해주세요." }));
-      return;
-    }
-
-    setIsCheckingId(true);
-    try {
-      // SignupClient를 통해 중복 체크 API 호출
-      const signupClient = SignupClient.getInstance({
-        baseURL: BASE_URL,
-      });
-      const response = await signupClient.post<boolean>(
-        `${ENDPOINT.USER_SERVICE.USERS}/existsUserId`,
-        { userId: formData.userId }
-      );
-
-      const exists = response.data;
-      setIdAvailable(!exists);
-      if (exists) {
-        setErrors(prev => ({ ...prev, userId: "이미 사용 중인 아이디입니다." }));
-      } else {
-        setErrors(prev => ({ ...prev, userId: "" }));
-      }
-    } catch (error) {
-      console.error("아이디 중복 체크 오류:", error);
-      setErrors(prev => ({ ...prev, userId: "아이디 중복 체크 중 오류가 발생했습니다." }));
-    } finally {
-      setIsCheckingId(false);
-    }
-  };
-
-  const checkEmailDuplicate = async () => {
-    if (!formData.email) {
-      setErrors(prev => ({ ...prev, email: "이메일을 입력해주세요." }));
-      return;
-    }
-
-    setIsCheckingEmail(true);
-    try {
-      // SignupClient를 통해 중복 체크 API 호출
-      const signupClient = SignupClient.getInstance({
-        baseURL: BASE_URL,
-      });
-      const response = await signupClient.post<boolean>(
-        `${ENDPOINT.USER_SERVICE.USERS}/exists`,
-        { email: formData.email }
-      );
-
-      const exists = response.data;
-      setEmailAvailable(!exists);
-      if (exists) {
-        setErrors(prev => ({ ...prev, email: "이미 사용 중인 이메일입니다." }));
-      } else {
-        setErrors(prev => ({ ...prev, email: "" }));
-      }
-    } catch (error) {
-      console.error("이메일 중복 체크 오류:", error);
-      setErrors(prev => ({ ...prev, email: "이메일 중복 체크 중 오류가 발생했습니다." }));
-    } finally {
-      setIsCheckingEmail(false);
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    console.log("회원가입 버튼 클릭됨");
-    
-    if (!validateForm()) {
-      console.log("폼 검증 실패");
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const signupData: UserSaveData = {
-        userId: formData.userId,
-        userName: formData.userName,
-        email: formData.email || undefined,
-        password: formData.password,
-        pswdHnt: formData.pswdHnt,
-        pswdAns: formData.pswdAns || undefined,
-        mphn: formData.mphn || undefined,
-        telno: formData.telno || undefined,
-        zip: formData.zip || undefined,
-        addr: formData.addr || undefined,
-        daddr: formData.daddr || undefined,
-        laeSeCd: formData.laeSeCd,
-        ogdpSeCd: formData.ogdpSeCd,
-        expryYmd: "",
-        instSeCd: formData.instSeCd || undefined,
-        dtlInstCd: formData.dtlInstCd || undefined,
-        enoCd: formData.enoCd || undefined,
-      };
-
-      // SignupClient를 통해 익명사용자 회원가입 API 호출
-      const signupClient = SignupClient.getInstance({
-        baseURL: BASE_URL
-      });
-      const response = await signupClient.post(
-        `${ENDPOINT.USER_SERVICE.USERS}/anonymouse/users/join`,
-        signupData
-      );
-
-      console.log("회원가입 성공:", response.data);
-      
-      // 성공 시 모달 닫기 및 콜백 호출
-      onSuccess();
-      onClose();
-      
-      // 폼 초기화
-      setFormData({
-        userId: "",
-        userName: "",
-        email: "",
-        password: "",
-        confirmPassword: "",
-        pswdHnt: "",
-        pswdAns: "",
-        mphn: "",
-        telno: "",
-        zip: "",
-        addr: "",
-        daddr: "",
-        laeSeCd: "",
-        ogdpSeCd: "",
-        expryYmd: "",
-        instSeCd: "",
-        dtlInstCd: "",
-        enoCd: "",
-      });
-      setErrors({});
-      setIdAvailable(null);
-      setEmailAvailable(null);
-
-    } catch (error: unknown) {
-      console.error("회원가입 오류:", error);
-      if (error instanceof Error) {
-        setErrors(prev => ({ ...prev, submit: error.message }));
-      } else {
-        setErrors(prev => ({ ...prev, submit: "회원가입에 실패했습니다." }));
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  if (!open) return null;
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-header">
-          <h2>{currentStep === 'agreement' ? '개인정보제공동의' : '회원가입'}</h2>
-          <button className="close-button" onClick={onClose}>×</button>
-        </div>
-        
-        {currentStep === 'agreement' ? (
-          <div className="agreement-content">
-            <div className="agreement-text">
-              <h3>개인정보 수집 및 이용 동의</h3>
-              <p>회원가입을 위해 다음과 같이 개인정보를 수집 및 이용합니다.</p>
-              
-              <h4>1. 수집하는 개인정보 항목</h4>
-              <ul>
-                <li>필수항목: 아이디, 이름, 비밀번호, 비밀번호 힌트, 법인구분, 기관구분</li>
-                <li>선택항목: 이메일, 휴대폰번호, 전화번호, 주소, 기관코드, 상세기관코드, 사업자등록번호</li>
-              </ul>
-              
-              <h4>2. 개인정보의 수집 및 이용목적</h4>
-              <ul>
-                <li>회원가입 및 관리</li>
-                <li>서비스 제공 및 운영</li>
-                <li>고객상담 및 문의응답</li>
-              </ul>
-              
-              <h4>3. 개인정보의 보유 및 이용기간</h4>
-              <p>회원탈퇴 시까지 (단, 관련 법령에 따라 보존이 필요한 경우 해당 기간까지)</p>
-              
-              <h4>4. 동의 거부권 및 거부 시 불이익</h4>
-              <p>개인정보 수집 및 이용에 대한 동의를 거부할 수 있으며, 동의 거부 시 회원가입이 제한됩니다.</p>
-            </div>
-            
-            <div className="agreement-checkbox">
-              <label>
-                <input
-                  type="checkbox"
-                  checked={agreed}
-                  onChange={handleAgreementChange}
-                />
-                <span>개인정보 수집 및 이용에 동의합니다.</span>
-              </label>
-            </div>
-            
-            <div className="agreement-actions">
-              <button
-                type="button"
-                onClick={onClose}
-                className="cancel-button"
-              >
-                취소
-              </button>
-              <button
-                type="button"
-                onClick={handleNextStep}
-                className="next-button"
-                disabled={!agreed}
-              >
-                다음
-              </button>
-            </div>
-          </div>
-        ) : (
-          <form onSubmit={handleSubmit} className="signup-form">
-            <div className="form-section">
-              <h3>기본 정보</h3>
-              
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="userId">아이디 *</label>
-                  <div className="input-with-button">
-                    <input
-                      type="text"
-                      id="userId"
-                      name="userId"
-                      value={formData.userId}
-                      onChange={handleInputChange}
-                      placeholder="아이디를 입력하세요"
-                      maxLength={12}
-                      disabled={isLoading}
-                    />
-                    <button
-                      type="button"
-                      onClick={checkUserIdDuplicate}
-                      disabled={isCheckingId || isLoading || !formData.userId}
-                      className="check-button"
-                    >
-                      {isCheckingId ? "확인중..." : "중복확인"}
-                    </button>
-                  </div>
-                  {idAvailable === true && <span className="success-message">사용 가능한 아이디입니다.</span>}
-                  {errors.userId && <span className="error-message">{errors.userId}</span>}
-                </div>
-              </div>
-
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="userName">이름 *</label>
-                  <input
-                    type="text"
-                    id="userName"
-                    name="userName"
-                    value={formData.userName}
-                    onChange={handleInputChange}
-                    placeholder="이름을 입력하세요"
-                    disabled={isLoading}
-                  />
-                  {errors.userName && <span className="error-message">{errors.userName}</span>}
-                </div>
-              </div>
-
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="email">이메일</label>
-                  <div className="input-with-button">
-                    <input
-                      type="email"
-                      id="email"
-                      name="email"
-                      value={formData.email}
-                      onChange={handleInputChange}
-                      placeholder="이메일을 입력하세요"
-                      disabled={isLoading}
-                    />
-                    <button
-                      type="button"
-                      onClick={checkEmailDuplicate}
-                      disabled={isCheckingEmail || isLoading || !formData.email}
-                      className="check-button"
-                    >
-                      {isCheckingEmail ? "확인중..." : "중복확인"}
-                    </button>
-                  </div>
-                  {emailAvailable === true && <span className="success-message">사용 가능한 이메일입니다.</span>}
-                  {errors.email && <span className="error-message">{errors.email}</span>}
-                </div>
-              </div>
-
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="password">비밀번호 *</label>
-                  <input
-                    type="password"
-                    id="password"
-                    name="password"
-                    value={formData.password}
-                    onChange={handleInputChange}
-                    placeholder="8~20자, 영문/숫자/특수기호 포함"
-                    maxLength={20}
-                    disabled={isLoading}
-                  />
-                  {errors.password && <span className="error-message">{errors.password}</span>}
-                </div>
-              </div>
-
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="confirmPassword">비밀번호 확인 *</label>
-                  <input
-                    type="password"
-                    id="confirmPassword"
-                    name="confirmPassword"
-                    value={formData.confirmPassword}
-                    onChange={handleInputChange}
-                    placeholder="비밀번호를 다시 입력하세요"
-                    maxLength={20}
-                    disabled={isLoading}
-                  />
-                  {errors.confirmPassword && <span className="error-message">{errors.confirmPassword}</span>}
-                </div>
-              </div>
-
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="pswdHnt">비밀번호 힌트 *</label>
-                  <input
-                    type="text"
-                    id="pswdHnt"
-                    name="pswdHnt"
-                    value={formData.pswdHnt}
-                    onChange={handleInputChange}
-                    placeholder="비밀번호 힌트를 입력하세요"
-                    maxLength={10}
-                    disabled={isLoading}
-                  />
-                  {errors.pswdHnt && <span className="error-message">{errors.pswdHnt}</span>}
-                </div>
-              </div>
-
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="pswdAns">비밀번호 답변</label>
-                  <input
-                    type="text"
-                    id="pswdAns"
-                    name="pswdAns"
-                    value={formData.pswdAns}
-                    onChange={handleInputChange}
-                    placeholder="비밀번호 답변을 입력하세요"
-                    maxLength={100}
-                    disabled={isLoading}
-                  />
-                  {errors.pswdAns && <span className="error-message">{errors.pswdAns}</span>}
-                </div>
-              </div>
-            </div>
-
-            <div className="form-section">
-              <h3>연락처 정보</h3>
-              
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="mphn">휴대폰 번호</label>
-                  <input
-                    type="tel"
-                    id="mphn"
-                    name="mphn"
-                    value={formData.mphn}
-                    onChange={handleInputChange}
-                    placeholder="휴대폰 번호를 입력하세요"
-                    maxLength={11}
-                    disabled={isLoading}
-                  />
-                  {errors.mphn && <span className="error-message">{errors.mphn}</span>}
-                </div>
-              </div>
-
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="telno">전화번호</label>
-                  <input
-                    type="tel"
-                    id="telno"
-                    name="telno"
-                    value={formData.telno}
-                    onChange={handleInputChange}
-                    placeholder="전화번호를 입력하세요"
-                    maxLength={11}
-                    disabled={isLoading}
-                  />
-                  {errors.telno && <span className="error-message">{errors.telno}</span>}
-                </div>
-              </div>
-            </div>
-
-            <div className="form-section">
-              <h3>주소 정보</h3>
-              
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="zip">우편번호</label>
-                  <input
-                    type="text"
-                    id="zip"
-                    name="zip"
-                    value={formData.zip}
-                    onChange={handleInputChange}
-                    placeholder="우편번호를 입력하세요"
-                    maxLength={5}
-                    disabled={isLoading}
-                  />
-                  {errors.zip && <span className="error-message">{errors.zip}</span>}
-                </div>
-              </div>
-
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="addr">주소</label>
-                  <input
-                    type="text"
-                    id="addr"
-                    name="addr"
-                    value={formData.addr}
-                    onChange={handleInputChange}
-                    placeholder="주소를 입력하세요"
-                    maxLength={200}
-                    disabled={isLoading}
-                  />
-                  {errors.addr && <span className="error-message">{errors.addr}</span>}
-                </div>
-              </div>
-
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="daddr">상세주소</label>
-                  <input
-                    type="text"
-                    id="daddr"
-                    name="daddr"
-                    value={formData.daddr}
-                    onChange={handleInputChange}
-                    placeholder="상세주소를 입력하세요"
-                    maxLength={200}
-                    disabled={isLoading}
-                  />
-                  {errors.daddr && <span className="error-message">{errors.daddr}</span>}
-                </div>
-              </div>
-            </div>
-
-            <div className="form-section">
-              <h3>기관 정보</h3>
-              
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="laeSeCd">법인구분 *</label>
-                  <select
-                    id="laeSeCd"
-                    name="laeSeCd"
-                    value={formData.laeSeCd}
-                    onChange={handleInputChange}
-                    disabled={isLoading}
-                  >
-                    <option value="">법인구분을 선택하세요</option>
-                    <option value="01">공공기관</option>
-                    <option value="02">민간기업</option>
-                    <option value="03">개인</option>
-                  </select>
-                  {errors.laeSeCd && <span className="error-message">{errors.laeSeCd}</span>}
-                </div>
-              </div>
-
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="ogdpSeCd">기관구분 *</label>
-                  <select
-                    id="ogdpSeCd"
-                    name="ogdpSeCd"
-                    value={formData.ogdpSeCd}
-                    onChange={handleInputChange}
-                    disabled={isLoading}
-                  >
-                    <option value="">기관구분을 선택하세요</option>
-                    <option value="01">환경부</option>
-                    <option value="02">지방자치단체</option>
-                    <option value="03">공공기관</option>
-                    <option value="04">민간기업</option>
-                  </select>
-                  {errors.ogdpSeCd && <span className="error-message">{errors.ogdpSeCd}</span>}
-                </div>
-              </div>
-
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="instSeCd">기관코드</label>
-                  <input
-                    type="text"
-                    id="instSeCd"
-                    name="instSeCd"
-                    value={formData.instSeCd}
-                    onChange={handleInputChange}
-                    placeholder="기관코드를 입력하세요"
-                    maxLength={10}
-                    disabled={isLoading}
-                  />
-                  {errors.instSeCd && <span className="error-message">{errors.instSeCd}</span>}
-                </div>
-              </div>
-
-              <div className="form-row">
-                <div className="form-group">
-                  <label htmlFor="dtlInstCd">상세기관코드</label>
-                  <input
-                    type="text"
-                    id="dtlInstCd"
-                    name="dtlInstCd"
-                    value={formData.dtlInstCd}
-                    onChange={handleInputChange}
-                    placeholder="상세기관코드를 입력하세요"
-                    maxLength={10}
-                    disabled={isLoading}
-                  />
-                  {errors.dtlInstCd && <span className="error-message">{errors.dtlInstCd}</span>}
-                </div>
-              </div>
-            </div>
-
-            {errors.submit && (
-              <div className="form-row">
-                <div className="error-message submit-error">{errors.submit}</div>
-              </div>
-            )}
-
-            <div className="form-actions">
-              <button
-                type="button"
-                onClick={() => setCurrentStep('agreement')}
-                className="back-button"
-                disabled={isLoading}
-              >
-                이전
-              </button>
-              <button
-                type="button"
-                onClick={onClose}
-                className="cancel-button"
-                disabled={isLoading}
-              >
-                취소
-              </button>
-              <button
-                type="submit"
-                className="submit-button"
-                disabled={isLoading}
-              >
-                {isLoading ? "가입 중..." : "회원가입"}
-              </button>
-            </div>
-          </form>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default SignupModal;
diff --git a/apps/wr/src/features/auth/login/ui/TwoFAModal.tsx b/apps/wr/src/features/auth/login/ui/TwoFAModal.tsx
deleted file mode 100644
index d66747b0c..000000000
--- a/apps/wr/src/features/auth/login/ui/TwoFAModal.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import { useEffect, useState } from "react";
-import Image from "next/image";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-} from "@common/components";
-
-interface TwoFAModalProps {
-  onClose: () => void;
-  onSuccess: () => void;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export default function TwoFAModal({ onClose, onSuccess, open, onOpenChange }: TwoFAModalProps) {
-  const [qrImage, setQrImage] = useState("");
-  const [secret, setSecret] = useState("");
-  const [otp, setOtp] = useState("");
-  const [error, setError] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSetupLoading, setIsSetupLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchQR = async () => {
-      try {
-        setIsSetupLoading(true);
-        setError("");
-        
-        const tempToken = localStorage.getItem("tempToken");
-        if (!tempToken) {
-          setError("임시 토큰이 없습니다");
-          return;
-        }
-
-        // Proxy를 통해 2FA setup 처리
-        const response = await fetch(`/api/proxy/user-service/api/v1/auth/2fa/setup`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ tempToken }),
-        });
-
-        if (!response.ok) {
-          const errorData = await response.json();
-          let errorMsg = errorData.message || 'QR코드 발급 실패';
-          if (Array.isArray(errorData.errors) && errorData.errors.length > 0) {
-            errorMsg = errorData.errors.map((e: { message: string }) => e.message).join(', ');
-          }
-          throw new Error(errorMsg);
-        }
-
-        const data = await response.json();
-        console.log("2FA setup response:", data);
-        console.log("Response headers:", Object.fromEntries(response.headers.entries()));
-        
-        // Proxy 응답에서 QR 데이터 추출
-        setQrImage(data.qrImage);
-        setSecret(data.secret);
-      } catch (error: unknown) {
-        console.error("2FA setup error:", error);
-        if (error instanceof Error) {
-          setError(error.message);
-        } else {
-          setError("QR코드 발급 실패");
-        }
-      } finally {
-        setIsSetupLoading(false);
-      }
-    };
-    
-    if (open) {
-      fetchQR();
-    }
-  }, [open]);
-
-  const handleEnable2FA = async () => {
-    try {
-      setIsLoading(true);
-      setError("");
-      
-      const tempToken = localStorage.getItem("tempToken");
-      if (!tempToken) {
-        setError("임시 토큰이 없습니다");
-        return;
-      }
-
-      // Proxy를 통해 2FA enable 처리
-      const response = await fetch(`/api/proxy/user-service/api/v1/auth/2fa/enable`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': tempToken,
-        },
-        body: JSON.stringify({
-          otpCode: otp,
-          tempToken: tempToken,
-          secret: secret,
-        }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        let errorMsg = errorData.message || '2FA 등록 실패';
-        if (Array.isArray(errorData.errors) && errorData.errors.length > 0) {
-          errorMsg = errorData.errors.map((e: { message: string }) => e.message).join(', ');
-        }
-        throw new Error(errorMsg);
-      }
-
-      const data = await response.json();
-      console.log("2FA enable response:", data);
-      console.log("Response headers:", Object.fromEntries(response.headers.entries()));
-      console.log("Response data keys:", Object.keys(data));
-      
-      // 2FA 설정 완료 후에는 토큰을 저장하지 않음 (실제 로그인은 OTP에서 처리)
-      console.log("2FA setup completed successfully");
-      
-      onSuccess();
-    } catch (error: unknown) {
-      console.error("2FA enable error:", error);
-      if (error instanceof Error) {
-        setError(error.message);
-      } else {
-        setError("2FA 등록 실패");
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleClose = () => {
-    onOpenChange(false);
-    onClose();
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md">
-        <div className="pt-8 text-center">
-          <h2 className="text-[1.3rem] font-semibold mb-6">2FA 등록</h2>
-          
-          {isSetupLoading ? (
-            <div className="py-8">
-              <div className="text-gray-500">QR코드 로딩 중...</div>
-            </div>
-          ) : (
-            <>
-              {qrImage && (
-                <div className="flex justify-center mb-4">
-                  <Image
-                    src={`data:image/png;base64,${qrImage}`}
-                    alt="QR코드"
-                    width={200}
-                    height={200}
-                  />
-                </div>
-              )}
-              
-              <div className="space-y-4">
-                <input
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg"
-                  placeholder="OTP 코드를 입력하세요"
-                  value={otp}
-                  onChange={(e) => setOtp(e.target.value)}
-                  disabled={isLoading}
-                />
-                
-                {error && (
-                  <div className="text-red-500 text-sm text-center">
-                    {error}
-                  </div>
-                )}
-                
-                <div className="flex space-x-2 pt-4">
-                  <Button 
-                    onClick={handleEnable2FA}
-                    disabled={isLoading || !otp.trim()}
-                    className="flex-1"
-                  >
-                    {isLoading ? "2FA 활성화 중..." : "2FA 활성화"}
-                  </Button>
-                  <Button 
-                    variant="outline"
-                    onClick={handleClose}
-                    disabled={isLoading}
-                    className="flex-1"
-                  >
-                    닫기
-                  </Button>
-                </div>
-              </div>
-            </>
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/apps/wr/src/features/auth/login/ui/UserSignupModal.tsx b/apps/wr/src/features/auth/login/ui/UserSignupModal.tsx
deleted file mode 100644
index 8d3220e8e..000000000
--- a/apps/wr/src/features/auth/login/ui/UserSignupModal.tsx
+++ /dev/null
@@ -1,901 +0,0 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
-import { SignupClient } from "@/src/shared/api/signup-client";
-import { BASE_URL, ENDPOINT } from "@/src/shared/config";
-import "./user-signup-modal.css";
-
-interface UserSignupModalProps {
-  open: boolean;
-  onClose: () => void;
-  onSuccess: () => void;
-}
-
-interface UserSignupData {
-  userId: string;
-  userName: string;
-  email?: string;
-  password: string;
-  pswdHnt: string;
-  pswdAns?: string;
-  mphn?: string;
-  telno?: string;
-  zip?: string;
-  addr?: string;
-  daddr?: string;
-  laeSeCd: string;
-  ogdpSeCd: string;
-  instSeCd?: string;
-  dtlInstCd?: string;
-  enoCd?: string;
-}
-
-// 익명 사용자용 CodeSelect 컴포넌트
-interface AnonymousCodeSelectProps {
-  upCd: string;
-  value: string;
-  onValueChange: (value: string) => void;
-  disabled?: boolean;
-  placeholder?: string;
-}
-
-function AnonymousCodeSelect({
-  upCd,
-  value,
-  onValueChange,
-  disabled,
-  placeholder = "선택",
-}: AnonymousCodeSelectProps) {
-  const [codes, setCodes] = useState<
-    Array<{ lwpoCd: string; lwpoCdNm: string }>
-  >([]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    const fetchCodes = async () => {
-      if (!upCd) return;
-
-      setIsLoading(true);
-      try {
-        const signupClient = SignupClient.getInstance({
-          baseURL: BASE_URL,
-        });
-
-        const response = await signupClient.get(
-          `${ENDPOINT.CMS_SERVICE.CODE}/${upCd}`,
-        );
-
-        if (response.data && Array.isArray(response.data)) {
-          setCodes(response.data);
-        } else {
-          setCodes([]);
-        }
-      } catch (error) {
-        console.error(`공통 코드 로드 실패 (${upCd}):`, error);
-        setCodes([]);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchCodes();
-  }, [upCd]);
-
-  return (
-    <select
-      value={value}
-      onChange={(e) => onValueChange(e.target.value)}
-      disabled={disabled || isLoading}
-      className="user-signup-select"
-    >
-      <option value="">{isLoading ? "로딩 중..." : placeholder}</option>
-      {codes.map((code) => (
-        <option key={code.lwpoCd} value={code.lwpoCd}>
-          {code.lwpoCdNm}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-function UserSignupModal({ open, onClose, onSuccess }: UserSignupModalProps) {
-  const [currentStep, setCurrentStep] = useState<"agreement" | "signup">(
-    "agreement",
-  );
-  const [agreed, setAgreed] = useState(false);
-  const [formData, setFormData] = useState({
-    userId: "",
-    userName: "",
-    email: "",
-    password: "",
-    confirmPassword: "",
-    pswdHnt: "",
-    pswdAns: "",
-    mphn: "",
-    telno: "",
-    zip: "",
-    addr: "",
-    daddr: "",
-    laeSeCd: "",
-    ogdpSeCd: "",
-    instSeCd: "",
-    dtlInstCd: "",
-    enoCd: "",
-  });
-
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [isLoading, setIsLoading] = useState(false);
-  const [isCheckingId, setIsCheckingId] = useState(false);
-  const [isCheckingEmail, setIsCheckingEmail] = useState(false);
-  const [idAvailable, setIdAvailable] = useState<boolean | null>(null);
-  const [emailAvailable, setEmailAvailable] = useState<boolean | null>(null);
-
-  // 모달이 닫힐 때 초기화
-  useEffect(() => {
-    if (!open) {
-      setCurrentStep("agreement");
-      setAgreed(false);
-      setFormData({
-        userId: "",
-        userName: "",
-        email: "",
-        password: "",
-        confirmPassword: "",
-        pswdHnt: "",
-        pswdAns: "",
-        mphn: "",
-        telno: "",
-        zip: "",
-        addr: "",
-        daddr: "",
-        laeSeCd: "",
-        ogdpSeCd: "",
-        instSeCd: "",
-        dtlInstCd: "",
-        enoCd: "",
-      });
-      setErrors({});
-      setIdAvailable(null);
-      setEmailAvailable(null);
-    }
-  }, [open]);
-
-  const handleAgreementChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setAgreed(e.target.checked);
-  };
-
-  const handleNextStep = () => {
-    if (agreed) {
-      setCurrentStep("signup");
-    }
-  };
-
-  const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-
-    // 에러 초기화
-    if (errors[name]) {
-      setErrors((prev) => ({ ...prev, [name]: "" }));
-    }
-  };
-
-  const validateForm = () => {
-    const newErrors: Record<string, string> = {};
-
-    console.log("폼 검증 시작:", formData);
-
-    // 필수 필드 검증
-    if (!formData.userId) newErrors.userId = "아이디를 입력해주세요.";
-    if (!formData.userName) newErrors.userName = "이름을 입력해주세요.";
-    if (!formData.password) newErrors.password = "비밀번호를 입력해주세요.";
-    if (!formData.confirmPassword)
-      newErrors.confirmPassword = "비밀번호 확인을 입력해주세요.";
-    if (!formData.pswdHnt) newErrors.pswdHnt = "비밀번호 힌트를 선택해주세요.";
-    if (!formData.laeSeCd) newErrors.laeSeCd = "법인구분을 선택해주세요.";
-    if (!formData.ogdpSeCd) newErrors.ogdpSeCd = "기관구분을 선택해주세요.";
-
-    // 비밀번호 확인
-    if (
-      formData.password &&
-      formData.confirmPassword &&
-      formData.password !== formData.confirmPassword
-    ) {
-      newErrors.confirmPassword = "비밀번호가 일치하지 않습니다.";
-    }
-
-    // 비밀번호 정규식 검증
-    const passwordRegex =
-      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/;
-    if (formData.password && !passwordRegex.test(formData.password)) {
-      newErrors.password =
-        "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.";
-    }
-
-    // 이메일 형식 검증
-    if (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-      newErrors.email = "올바른 이메일 형식을 입력해주세요.";
-    }
-
-    // 중복 체크 검증
-    if (idAvailable === false)
-      newErrors.userId = "이미 사용 중인 아이디입니다.";
-    if (emailAvailable === false)
-      newErrors.email = "이미 사용 중인 이메일입니다.";
-
-    setErrors(newErrors);
-    const isValid = Object.keys(newErrors).length === 0;
-    console.log("폼 검증 결과:", { isValid, errors: newErrors, formData });
-    return isValid;
-  };
-
-  const checkUserIdDuplicate = async () => {
-    if (!formData.userId) {
-      setErrors((prev) => ({ ...prev, userId: "아이디를 입력해주세요." }));
-      return;
-    }
-
-    setIsCheckingId(true);
-    try {
-      const signupClient = SignupClient.getInstance({
-        baseURL: BASE_URL,
-      });
-      const response = await signupClient.post<boolean>(
-        `${ENDPOINT.USER_SERVICE.USERS}/existsUserId`,
-        { userId: formData.userId },
-      );
-
-      const exists = response.data;
-      setIdAvailable(!exists);
-      if (exists) {
-        setErrors((prev) => ({
-          ...prev,
-          userId: "이미 사용 중인 아이디입니다.",
-        }));
-      } else {
-        setErrors((prev) => ({ ...prev, userId: "" }));
-      }
-    } catch (error) {
-      console.error("아이디 중복 체크 오류:", error);
-      setErrors((prev) => ({
-        ...prev,
-        userId: "아이디 중복 체크 중 오류가 발생했습니다.",
-      }));
-    } finally {
-      setIsCheckingId(false);
-    }
-  };
-
-  const checkEmailDuplicate = async () => {
-    if (!formData.email) {
-      setErrors((prev) => ({ ...prev, email: "이메일을 입력해주세요." }));
-      return;
-    }
-
-    setIsCheckingEmail(true);
-    try {
-      const signupClient = SignupClient.getInstance({
-        baseURL: BASE_URL,
-      });
-      const response = await signupClient.post<boolean>(
-        `${ENDPOINT.USER_SERVICE.USERS}/exists`,
-        { email: formData.email },
-      );
-
-      const exists = response.data;
-      setEmailAvailable(!exists);
-      if (exists) {
-        setErrors((prev) => ({
-          ...prev,
-          email: "이미 사용 중인 이메일입니다.",
-        }));
-      } else {
-        setErrors((prev) => ({ ...prev, email: "" }));
-      }
-    } catch (error) {
-      console.error("이메일 중복 체크 오류:", error);
-      setErrors((prev) => ({
-        ...prev,
-        email: "이메일 중복 체크 중 오류가 발생했습니다.",
-      }));
-    } finally {
-      setIsCheckingEmail(false);
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    console.log("회원가입 버튼 클릭됨 - handleSubmit");
-    console.log("현재 폼 데이터:", formData);
-
-    if (!validateForm()) {
-      console.log("폼 검증 실패");
-      return;
-    }
-
-    console.log("폼 검증 성공, 회원가입 API 호출 시작");
-    setIsLoading(true);
-    try {
-      const signupData: UserSignupData = {
-        userId: formData.userId,
-        userName: formData.userName,
-        email: formData.email || undefined,
-        password: formData.password,
-        pswdHnt: formData.pswdHnt,
-        pswdAns: formData.pswdAns || undefined,
-        mphn: formData.mphn || undefined,
-        telno: formData.telno || undefined,
-        zip: formData.zip || undefined,
-        addr: formData.addr || undefined,
-        daddr: formData.daddr || undefined,
-        laeSeCd: formData.laeSeCd,
-        ogdpSeCd: formData.ogdpSeCd,
-        instSeCd: formData.instSeCd || undefined,
-        dtlInstCd: formData.dtlInstCd || undefined,
-        enoCd: formData.enoCd || undefined,
-      };
-
-      // SignupClient를 통해 익명사용자 회원가입 API 호출
-      console.log("SignupClient 생성 및 API 호출:", {
-        baseURL: BASE_URL,
-        endpoint: ENDPOINT.USER_SERVICE.USER_JOIN,
-        data: signupData,
-      });
-
-      const signupClient = SignupClient.getInstance({
-        baseURL: BASE_URL,
-      });
-      const response = await signupClient.post(
-        ENDPOINT.USER_SERVICE.USER_JOIN,
-        signupData,
-      );
-
-      console.log("회원가입 성공:", response.data);
-
-      // 성공 시 모달 닫기 및 콜백 호출
-      onSuccess();
-      onClose();
-
-      // 폼 초기화
-      setFormData({
-        userId: "",
-        userName: "",
-        email: "",
-        password: "",
-        confirmPassword: "",
-        pswdHnt: "",
-        pswdAns: "",
-        mphn: "",
-        telno: "",
-        zip: "",
-        addr: "",
-        daddr: "",
-        laeSeCd: "",
-        ogdpSeCd: "",
-        instSeCd: "",
-        dtlInstCd: "",
-        enoCd: "",
-      });
-      setErrors({});
-      setIdAvailable(null);
-      setEmailAvailable(null);
-    } catch (error: unknown) {
-      console.error("회원가입 오류:", error);
-      if (error instanceof Error) {
-        setErrors((prev) => ({ ...prev, submit: error.message }));
-      } else {
-        setErrors((prev) => ({ ...prev, submit: "회원가입에 실패했습니다." }));
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  if (!open) return null;
-
-  return (
-    <div className="user-signup-modal-overlay">
-      <div className="user-signup-modal-content">
-        <div className="user-signup-modal-header">
-          <h2>
-            {currentStep === "agreement" ? "개인정보제공동의" : "회원가입"}
-          </h2>
-          <button className="user-signup-close-button" onClick={onClose}>
-            ×
-          </button>
-        </div>
-
-        {currentStep === "agreement" ? (
-          <div className="user-signup-agreement-content">
-            <div className="user-signup-agreement-text">
-              <h3>개인정보 수집 및 이용 동의</h3>
-              <p>회원가입을 위해 다음과 같이 개인정보를 수집 및 이용합니다.</p>
-
-              <h4>1. 수집하는 개인정보 항목</h4>
-              <ul>
-                <li>
-                  필수항목: 아이디, 이름, 비밀번호, 비밀번호 힌트, 법인구분,
-                  기관구분
-                </li>
-                <li>
-                  선택항목: 이메일, 휴대폰번호, 전화번호, 주소, 기관코드,
-                  상세기관코드, 사업자등록번호
-                </li>
-              </ul>
-
-              <h4>2. 개인정보의 수집 및 이용목적</h4>
-              <ul>
-                <li>회원가입 및 관리</li>
-                <li>서비스 제공 및 운영</li>
-                <li>고객상담 및 문의응답</li>
-              </ul>
-
-              <h4>3. 개인정보의 보유 및 이용기간</h4>
-              <p>
-                회원탈퇴 시까지 (단, 관련 법령에 따라 보존이 필요한 경우 해당
-                기간까지)
-              </p>
-
-              <h4>4. 동의 거부권 및 거부 시 불이익</h4>
-              <p>
-                개인정보 수집 및 이용에 대한 동의를 거부할 수 있으며, 동의 거부
-                시 회원가입이 제한됩니다.
-              </p>
-            </div>
-
-            <div className="user-signup-agreement-checkbox">
-              <label>
-                <input
-                  type="checkbox"
-                  checked={agreed}
-                  onChange={handleAgreementChange}
-                />
-                <span>개인정보 수집 및 이용에 동의합니다.</span>
-              </label>
-            </div>
-
-            <div className="user-signup-agreement-actions">
-              <button
-                type="button"
-                onClick={onClose}
-                className="user-signup-cancel-button"
-              >
-                취소
-              </button>
-              <button
-                type="button"
-                onClick={handleNextStep}
-                className="user-signup-next-button"
-                disabled={!agreed}
-              >
-                다음
-              </button>
-            </div>
-          </div>
-        ) : (
-          <form onSubmit={handleSubmit} className="user-signup-form">
-            <div className="user-signup-form-section">
-              <h3>기본 정보</h3>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="userId">아이디 *</label>
-                  <div className="user-signup-input-with-button">
-                    <input
-                      type="text"
-                      id="userId"
-                      name="userId"
-                      value={formData.userId}
-                      onChange={handleInputChange}
-                      placeholder="아이디를 입력하세요"
-                      maxLength={12}
-                      disabled={isLoading}
-                    />
-                    <button
-                      type="button"
-                      onClick={checkUserIdDuplicate}
-                      disabled={isCheckingId || isLoading || !formData.userId}
-                      className="user-signup-check-button"
-                    >
-                      {isCheckingId ? "확인중..." : "중복확인"}
-                    </button>
-                  </div>
-                  {idAvailable === true && (
-                    <span className="user-signup-success-message">
-                      사용 가능한 아이디입니다.
-                    </span>
-                  )}
-                  {errors.userId && (
-                    <span className="user-signup-error-message">
-                      {errors.userId}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="userName">이름 *</label>
-                  <input
-                    type="text"
-                    id="userName"
-                    name="userName"
-                    value={formData.userName}
-                    onChange={handleInputChange}
-                    placeholder="이름을 입력하세요"
-                    disabled={isLoading}
-                  />
-                  {errors.userName && (
-                    <span className="user-signup-error-message">
-                      {errors.userName}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="email">이메일</label>
-                  <div className="user-signup-input-with-button">
-                    <input
-                      type="email"
-                      id="email"
-                      name="email"
-                      value={formData.email}
-                      onChange={handleInputChange}
-                      placeholder="이메일을 입력하세요"
-                      disabled={isLoading}
-                    />
-                    <button
-                      type="button"
-                      onClick={checkEmailDuplicate}
-                      disabled={isCheckingEmail || isLoading || !formData.email}
-                      className="user-signup-check-button"
-                    >
-                      {isCheckingEmail ? "확인중..." : "중복확인"}
-                    </button>
-                  </div>
-                  {emailAvailable === true && (
-                    <span className="user-signup-success-message">
-                      사용 가능한 이메일입니다.
-                    </span>
-                  )}
-                  {errors.email && (
-                    <span className="user-signup-error-message">
-                      {errors.email}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="password">비밀번호 *</label>
-                  <input
-                    type="password"
-                    id="password"
-                    name="password"
-                    value={formData.password}
-                    onChange={handleInputChange}
-                    placeholder="8~20자, 영문/숫자/특수기호 포함"
-                    maxLength={20}
-                    disabled={isLoading}
-                  />
-                  {errors.password && (
-                    <span className="user-signup-error-message">
-                      {errors.password}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="confirmPassword">비밀번호 확인 *</label>
-                  <input
-                    type="password"
-                    id="confirmPassword"
-                    name="confirmPassword"
-                    value={formData.confirmPassword}
-                    onChange={handleInputChange}
-                    placeholder="비밀번호를 다시 입력하세요"
-                    maxLength={20}
-                    disabled={isLoading}
-                  />
-                  {errors.confirmPassword && (
-                    <span className="user-signup-error-message">
-                      {errors.confirmPassword}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="pswdHnt">비밀번호 힌트 *</label>
-                  <AnonymousCodeSelect
-                    upCd="PSWDHNT"
-                    value={formData.pswdHnt}
-                    onValueChange={(value: string) =>
-                      setFormData((prev) => ({ ...prev, pswdHnt: value }))
-                    }
-                    disabled={isLoading}
-                    placeholder="비밀번호 힌트를 선택하세요"
-                  />
-                  {errors.pswdHnt && (
-                    <span className="user-signup-error-message">
-                      {errors.pswdHnt}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="pswdAns">비밀번호 답변</label>
-                  <input
-                    type="text"
-                    id="pswdAns"
-                    name="pswdAns"
-                    value={formData.pswdAns}
-                    onChange={handleInputChange}
-                    placeholder="비밀번호 답변을 입력하세요"
-                    maxLength={100}
-                    disabled={isLoading}
-                  />
-                  {errors.pswdAns && (
-                    <span className="user-signup-error-message">
-                      {errors.pswdAns}
-                    </span>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            <div className="user-signup-form-section">
-              <h3>연락처 정보</h3>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="mphn">휴대폰 번호</label>
-                  <input
-                    type="tel"
-                    id="mphn"
-                    name="mphn"
-                    value={formData.mphn}
-                    onChange={handleInputChange}
-                    placeholder="휴대폰 번호를 입력하세요"
-                    maxLength={11}
-                    disabled={isLoading}
-                  />
-                  {errors.mphn && (
-                    <span className="user-signup-error-message">
-                      {errors.mphn}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="telno">전화번호</label>
-                  <input
-                    type="tel"
-                    id="telno"
-                    name="telno"
-                    value={formData.telno}
-                    onChange={handleInputChange}
-                    placeholder="전화번호를 입력하세요"
-                    maxLength={11}
-                    disabled={isLoading}
-                  />
-                  {errors.telno && (
-                    <span className="user-signup-error-message">
-                      {errors.telno}
-                    </span>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            <div className="user-signup-form-section">
-              <h3>주소 정보</h3>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="zip">우편번호</label>
-                  <input
-                    type="text"
-                    id="zip"
-                    name="zip"
-                    value={formData.zip}
-                    onChange={handleInputChange}
-                    placeholder="우편번호를 입력하세요"
-                    maxLength={5}
-                    disabled={isLoading}
-                  />
-                  {errors.zip && (
-                    <span className="user-signup-error-message">
-                      {errors.zip}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="addr">주소</label>
-                  <input
-                    type="text"
-                    id="addr"
-                    name="addr"
-                    value={formData.addr}
-                    onChange={handleInputChange}
-                    placeholder="주소를 입력하세요"
-                    maxLength={200}
-                    disabled={isLoading}
-                  />
-                  {errors.addr && (
-                    <span className="user-signup-error-message">
-                      {errors.addr}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="daddr">상세주소</label>
-                  <input
-                    type="text"
-                    id="daddr"
-                    name="daddr"
-                    value={formData.daddr}
-                    onChange={handleInputChange}
-                    placeholder="상세주소를 입력하세요"
-                    maxLength={200}
-                    disabled={isLoading}
-                  />
-                  {errors.daddr && (
-                    <span className="user-signup-error-message">
-                      {errors.daddr}
-                    </span>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            <div className="user-signup-form-section">
-              <h3>기관 정보</h3>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="laeSeCd">법인구분 *</label>
-                  <AnonymousCodeSelect
-                    upCd="LAESECD"
-                    value={formData.laeSeCd}
-                    onValueChange={(value: string) =>
-                      setFormData((prev) => ({ ...prev, laeSeCd: value }))
-                    }
-                    disabled={isLoading}
-                    placeholder="법인구분을 선택하세요"
-                  />
-                  {errors.laeSeCd && (
-                    <span className="user-signup-error-message">
-                      {errors.laeSeCd}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="ogdpSeCd">기관구분 *</label>
-                  <AnonymousCodeSelect
-                    upCd="OGDPSECD"
-                    value={formData.ogdpSeCd}
-                    onValueChange={(value: string) =>
-                      setFormData((prev) => ({ ...prev, ogdpSeCd: value }))
-                    }
-                    disabled={isLoading}
-                    placeholder="기관구분을 선택하세요"
-                  />
-                  {errors.ogdpSeCd && (
-                    <span className="user-signup-error-message">
-                      {errors.ogdpSeCd}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="instSeCd">기관코드</label>
-                  <input
-                    type="text"
-                    id="instSeCd"
-                    name="instSeCd"
-                    value={formData.instSeCd}
-                    onChange={handleInputChange}
-                    placeholder="기관코드를 입력하세요"
-                    maxLength={10}
-                    disabled={isLoading}
-                  />
-                  {errors.instSeCd && (
-                    <span className="user-signup-error-message">
-                      {errors.instSeCd}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="user-signup-form-row">
-                <div className="user-signup-form-group">
-                  <label htmlFor="dtlInstCd">상세기관코드</label>
-                  <input
-                    type="text"
-                    id="dtlInstCd"
-                    name="dtlInstCd"
-                    value={formData.dtlInstCd}
-                    onChange={handleInputChange}
-                    placeholder="상세기관코드를 입력하세요"
-                    maxLength={10}
-                    disabled={isLoading}
-                  />
-                  {errors.dtlInstCd && (
-                    <span className="user-signup-error-message">
-                      {errors.dtlInstCd}
-                    </span>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {errors.submit && (
-              <div className="user-signup-form-row">
-                <div className="user-signup-error-message user-signup-submit-error">
-                  {errors.submit}
-                </div>
-              </div>
-            )}
-
-            <div className="user-signup-form-actions">
-              <button
-                type="button"
-                onClick={() => setCurrentStep("agreement")}
-                className="user-signup-back-button"
-                disabled={isLoading}
-              >
-                이전
-              </button>
-              <button
-                type="button"
-                onClick={onClose}
-                className="user-signup-cancel-button"
-                disabled={isLoading}
-              >
-                취소
-              </button>
-              <button
-                type="submit"
-                className="user-signup-submit-button"
-                disabled={isLoading}
-                onClick={(e) => {
-                  e.preventDefault();
-                  console.log("회원가입 버튼 클릭됨 - onClick");
-                  handleSubmit(e);
-                }}
-              >
-                {isLoading ? "가입 중..." : "회원가입"}
-              </button>
-            </div>
-          </form>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default UserSignupModal;
diff --git a/apps/wr/src/features/auth/login/ui/login-page.tsx b/apps/wr/src/features/auth/login/ui/login-page.tsx
index 955ddd24d..4c340f78e 100644
--- a/apps/wr/src/features/auth/login/ui/login-page.tsx
+++ b/apps/wr/src/features/auth/login/ui/login-page.tsx
@@ -1,13 +1,20 @@
 "use client";
 
 import Image from "next/image";
+import { useEffect } from "react";
 import { images } from "@common/assets";
 import { LoginApi } from "@/src/entities/auth";
 import "./login.css";
 
 function LoginPage() {
-  const hostname = window.location.hostname;
-  if (hostname.includes("hasuon.or.kr")) window.location.href = process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL||'/auth/login';
+  useEffect(() => {
+    const hostname = window.location.hostname;
+    if (hostname.includes("hasuon.or.kr")) {
+      window.location.href =
+        process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
+    }
+  }, []);
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -129,4 +136,3 @@ function LoginPage() {
 }
 
 export { LoginPage };
-
diff --git a/apps/wr/src/features/auth/login/ui/signup-modal.css b/apps/wr/src/features/auth/login/ui/signup-modal.css
deleted file mode 100644
index 0fb1585c9..000000000
--- a/apps/wr/src/features/auth/login/ui/signup-modal.css
+++ /dev/null
@@ -1,277 +0,0 @@
-/* 모달 오버레이 */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  padding: 20px;
-}
-
-/* 모달 컨텐츠 */
-.modal-content {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  max-width: 800px;
-  width: 100%;
-  max-height: 90vh;
-  overflow-y: auto;
-  position: relative;
-}
-
-/* 모달 헤더 */
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 24px;
-  border-bottom: 1px solid #e5e7eb;
-  background-color: #f9fafb;
-  border-radius: 8px 8px 0 0;
-}
-
-.modal-header h2 {
-  margin: 0;
-  font-size: 1.8rem;
-  font-weight: 600;
-  color: #1f2937;
-}
-
-.close-button {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: #6b7280;
-  padding: 4px;
-  border-radius: 4px;
-  transition: color 0.2s;
-}
-
-.close-button:hover {
-  color: #374151;
-}
-
-/* 폼 스타일 */
-.signup-form {
-  padding: 24px;
-}
-
-.form-section {
-  margin-bottom: 32px;
-}
-
-.form-section h3 {
-  margin: 0 0 16px 0;
-  font-size: 1.4rem;
-  font-weight: 600;
-  color: #374151;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #e5e7eb;
-}
-
-.form-row {
-  margin-bottom: 16px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.form-group label {
-  margin-bottom: 6px;
-  font-weight: 500;
-  color: #374151;
-  font-size: 1.1rem;
-}
-
-.form-group input,
-.form-group select {
-  padding: 12px 14px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  font-size: 1.1rem;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  background-color: white;
-}
-
-.form-group input:focus,
-.form-group select:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.form-group input:disabled,
-.form-group select:disabled {
-  background-color: #f3f4f6;
-  color: #6b7280;
-  cursor: not-allowed;
-}
-
-/* 입력 필드와 버튼이 함께 있는 경우 */
-.input-with-button {
-  display: flex;
-  gap: 8px;
-  align-items: flex-end;
-}
-
-.input-with-button input {
-  flex: 1;
-}
-
-.check-button {
-  padding: 10px 16px;
-  background-color: #6b7280;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-size: 0.8rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  white-space: nowrap;
-  min-width: 80px;
-}
-
-.check-button:hover:not(:disabled) {
-  background-color: #4b5563;
-}
-
-.check-button:disabled {
-  background-color: #d1d5db;
-  cursor: not-allowed;
-}
-
-/* 메시지 스타일 */
-.error-message {
-  color: #dc2626;
-  font-size: 0.8rem;
-  margin-top: 4px;
-  display: block;
-}
-
-.success-message {
-  color: #059669;
-  font-size: 0.8rem;
-  margin-top: 4px;
-  display: block;
-}
-
-.submit-error {
-  background-color: #fef2f2;
-  border: 1px solid #fecaca;
-  color: #dc2626;
-  padding: 12px;
-  border-radius: 6px;
-  margin-bottom: 16px;
-  text-align: center;
-}
-
-/* 폼 액션 버튼 */
-.form-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  padding-top: 20px;
-  border-top: 1px solid #e5e7eb;
-  margin-top: 24px;
-}
-
-.cancel-button,
-.submit-button {
-  padding: 12px 24px;
-  border-radius: 6px;
-  font-weight: 500;
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.2s;
-  border: none;
-  min-width: 100px;
-}
-
-.cancel-button {
-  background-color: #f3f4f6;
-  color: #374151;
-  border: 1px solid #d1d5db;
-}
-
-.cancel-button:hover:not(:disabled) {
-  background-color: #e5e7eb;
-}
-
-.submit-button {
-  background-color: #3b82f6;
-  color: white;
-}
-
-.submit-button:hover:not(:disabled) {
-  background-color: #2563eb;
-}
-
-.cancel-button:disabled,
-.submit-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* 반응형 디자인 */
-@media (max-width: 768px) {
-  .modal-content {
-    margin: 10px;
-    max-height: 95vh;
-  }
-  
-  .modal-header {
-    padding: 16px 20px;
-  }
-  
-  .signup-form {
-    padding: 20px;
-  }
-  
-  .form-actions {
-    flex-direction: column;
-  }
-  
-  .cancel-button,
-  .submit-button {
-    width: 100%;
-  }
-  
-  .input-with-button {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .check-button {
-    width: 100%;
-    margin-top: 8px;
-  }
-}
-
-/* 스크롤바 스타일 */
-.modal-content::-webkit-scrollbar {
-  width: 6px;
-}
-
-.modal-content::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
-}
-
-.modal-content::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-
-.modal-content::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
diff --git a/apps/wr/src/features/auth/login/ui/user-signup-modal.css b/apps/wr/src/features/auth/login/ui/user-signup-modal.css
deleted file mode 100644
index 241929a2a..000000000
--- a/apps/wr/src/features/auth/login/ui/user-signup-modal.css
+++ /dev/null
@@ -1,436 +0,0 @@
-/* 신규 사용자 가입 모달 오버레이 */
-.user-signup-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  padding: 20px;
-}
-
-/* 신규 사용자 가입 모달 컨텐츠 */
-.user-signup-modal-content {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  max-width: 800px;
-  width: 100%;
-  max-height: 90vh;
-  overflow-y: auto;
-  position: relative;
-}
-
-/* 신규 사용자 가입 모달 헤더 */
-.user-signup-modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 24px;
-  border-bottom: 1px solid #e5e7eb;
-  background-color: #f9fafb;
-  border-radius: 8px 8px 0 0;
-}
-
-.user-signup-modal-header h2 {
-  margin: 0;
-  font-size: 1.8rem;
-  font-weight: 600;
-  color: #1f2937;
-}
-
-.user-signup-close-button {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: #6b7280;
-  padding: 4px;
-  border-radius: 4px;
-  transition: color 0.2s;
-}
-
-.user-signup-close-button:hover {
-  color: #374151;
-}
-
-/* 신규 사용자 가입 폼 스타일 */
-.user-signup-form {
-  padding: 24px;
-}
-
-.user-signup-form-section {
-  margin-bottom: 32px;
-}
-
-.user-signup-form-section h3 {
-  margin: 0 0 16px 0;
-  font-size: 1.4rem;
-  font-weight: 600;
-  color: #374151;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #e5e7eb;
-}
-
-.user-signup-form-row {
-  margin-bottom: 16px;
-}
-
-.user-signup-form-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.user-signup-form-group label {
-  margin-bottom: 6px;
-  font-weight: 500;
-  color: #374151;
-  font-size: 1.1rem;
-}
-
-.user-signup-form-group input,
-.user-signup-form-group select {
-  padding: 12px 14px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  font-size: 1.1rem;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  background-color: white;
-}
-
-/* CodeSelect 컴포넌트 스타일링 */
-.user-signup-form-group .CodeSelect {
-  width: 100%;
-}
-
-.user-signup-form-group .CodeSelect select {
-  width: 100%;
-  padding: 12px 14px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  font-size: 1.1rem;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  background-color: white;
-}
-
-.user-signup-form-group .CodeSelect select:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.user-signup-form-group .CodeSelect select:disabled {
-  background-color: #f3f4f6;
-  color: #6b7280;
-  cursor: not-allowed;
-}
-
-/* Select 요소 스타일링 */
-.user-signup-select {
-  width: 100%;
-  padding: 12px 14px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  font-size: 1.1rem;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  background-color: white;
-  cursor: pointer;
-}
-
-.user-signup-select:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.user-signup-select:disabled {
-  background-color: #f3f4f6;
-  color: #6b7280;
-  cursor: not-allowed;
-}
-
-.user-signup-select option {
-  padding: 8px;
-  font-size: 1rem;
-}
-
-.user-signup-form-group input:focus,
-.user-signup-form-group select:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.user-signup-form-group input:disabled,
-.user-signup-form-group select:disabled {
-  background-color: #f3f4f6;
-  color: #6b7280;
-  cursor: not-allowed;
-}
-
-/* 입력 필드와 버튼이 함께 있는 경우 */
-.user-signup-input-with-button {
-  display: flex;
-  gap: 8px;
-  align-items: flex-end;
-}
-
-.user-signup-input-with-button input {
-  flex: 1;
-}
-
-.user-signup-check-button {
-  padding: 10px 16px;
-  background-color: #6b7280;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-size: 0.8rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  white-space: nowrap;
-  min-width: 80px;
-}
-
-.user-signup-check-button:hover:not(:disabled) {
-  background-color: #4b5563;
-}
-
-.user-signup-check-button:disabled {
-  background-color: #d1d5db;
-  cursor: not-allowed;
-}
-
-/* 메시지 스타일 */
-.user-signup-error-message {
-  color: #dc2626;
-  font-size: 0.8rem;
-  margin-top: 4px;
-  display: block;
-}
-
-.user-signup-success-message {
-  color: #059669;
-  font-size: 0.8rem;
-  margin-top: 4px;
-  display: block;
-}
-
-.user-signup-submit-error {
-  background-color: #fef2f2;
-  border: 1px solid #fecaca;
-  color: #dc2626;
-  padding: 12px;
-  border-radius: 6px;
-  margin-bottom: 16px;
-  text-align: center;
-}
-
-/* 폼 액션 버튼 */
-.user-signup-form-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  padding-top: 20px;
-  border-top: 1px solid #e5e7eb;
-  margin-top: 24px;
-}
-
-.user-signup-cancel-button,
-.user-signup-submit-button,
-.user-signup-back-button {
-  padding: 12px 24px;
-  border-radius: 6px;
-  font-weight: 500;
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.2s;
-  border: none;
-  min-width: 100px;
-}
-
-.user-signup-cancel-button {
-  background-color: #f3f4f6;
-  color: #374151;
-  border: 1px solid #d1d5db;
-}
-
-.user-signup-cancel-button:hover:not(:disabled) {
-  background-color: #e5e7eb;
-}
-
-.user-signup-submit-button {
-  background-color: #3b82f6;
-  color: white;
-}
-
-.user-signup-submit-button:hover:not(:disabled) {
-  background-color: #2563eb;
-}
-
-.user-signup-back-button {
-  background-color: #6b7280;
-  color: white;
-}
-
-.user-signup-back-button:hover:not(:disabled) {
-  background-color: #4b5563;
-}
-
-.user-signup-cancel-button:disabled,
-.user-signup-submit-button:disabled,
-.user-signup-back-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* 개인정보제공동의 스타일 */
-.user-signup-agreement-content {
-  padding: 24px;
-}
-
-.user-signup-agreement-text {
-  margin-bottom: 24px;
-}
-
-.user-signup-agreement-text h3 {
-  margin: 0 0 16px 0;
-  font-size: 1.4rem;
-  font-weight: 600;
-  color: #374151;
-}
-
-.user-signup-agreement-text h4 {
-  margin: 20px 0 8px 0;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: #374151;
-}
-
-.user-signup-agreement-text p {
-  margin: 8px 0;
-  color: #6b7280;
-  line-height: 1.5;
-}
-
-.user-signup-agreement-text ul {
-  margin: 8px 0;
-  padding-left: 20px;
-  color: #6b7280;
-}
-
-.user-signup-agreement-text li {
-  margin: 4px 0;
-  line-height: 1.5;
-}
-
-.user-signup-agreement-checkbox {
-  margin-bottom: 24px;
-  padding: 16px;
-  background-color: #f9fafb;
-  border-radius: 6px;
-  border: 1px solid #e5e7eb;
-}
-
-.user-signup-agreement-checkbox label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  font-weight: 500;
-  color: #374151;
-}
-
-.user-signup-agreement-checkbox input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  margin: 0;
-}
-
-.user-signup-agreement-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-}
-
-.user-signup-next-button {
-  padding: 12px 24px;
-  background-color: #3b82f6;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-weight: 500;
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  min-width: 100px;
-}
-
-.user-signup-next-button:hover:not(:disabled) {
-  background-color: #2563eb;
-}
-
-.user-signup-next-button:disabled {
-  background-color: #d1d5db;
-  cursor: not-allowed;
-}
-
-/* 반응형 디자인 */
-@media (max-width: 768px) {
-  .user-signup-modal-content {
-    margin: 10px;
-    max-height: 95vh;
-  }
-  
-  .user-signup-modal-header {
-    padding: 16px 20px;
-  }
-  
-  .user-signup-form {
-    padding: 20px;
-  }
-  
-  .user-signup-form-actions {
-    flex-direction: column;
-  }
-  
-  .user-signup-cancel-button,
-  .user-signup-submit-button,
-  .user-signup-back-button {
-    width: 100%;
-  }
-  
-  .user-signup-input-with-button {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .user-signup-check-button {
-    width: 100%;
-    margin-top: 8px;
-  }
-}
-
-/* 스크롤바 스타일 */
-.user-signup-modal-content::-webkit-scrollbar {
-  width: 6px;
-}
-
-.user-signup-modal-content::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
-}
-
-.user-signup-modal-content::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-
-.user-signup-modal-content::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
diff --git a/apps/wr/src/shared/config/api.ts b/apps/wr/src/shared/config/api.ts
index eebb15c19..73bbab9cf 100644
--- a/apps/wr/src/shared/config/api.ts
+++ b/apps/wr/src/shared/config/api.ts
@@ -82,4 +82,4 @@ export const ENDPOINT = {
 
 };
 
-export const JWT_EXPIRATION_TIME = 1800000;
+export const JWT_EXPIRATION_TIME = 3600000;
diff --git a/apps/wr/src/shared/config/index.ts b/apps/wr/src/shared/config/index.ts
index cd83447d5..04e4f2df5 100644
--- a/apps/wr/src/shared/config/index.ts
+++ b/apps/wr/src/shared/config/index.ts
@@ -1,2 +1,4 @@
 export * from "./api";
 export * from "./env";
+
+export const DEFAULT_LIST_SIZE = 10;
diff --git a/apps/wr/src/shared/providers/prompt-provider.tsx b/apps/wr/src/shared/providers/prompt-provider.tsx
index 10338c338..7724d0326 100644
--- a/apps/wr/src/shared/providers/prompt-provider.tsx
+++ b/apps/wr/src/shared/providers/prompt-provider.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useState } from "react";
 
 interface PromptContext {
diff --git a/docs/IIPBS_단어목록.md b/docs/IIPBS_단어목록.md
index 9424814d3..dfd272edd 100644
--- a/docs/IIPBS_단어목록.md
+++ b/docs/IIPBS_단어목록.md
@@ -1,4757 +1,4757 @@
 # 단어목록
 
-| 단어명 | 영문약어명 | 영문명 |
-|--------|------------|--------|
-| 값 | VL | Value |
-| 강 | BICLSS | (Biological) Class |
-| 건 | EVNTCS | (Event) Case |
-| 계 | BIKNDM | (Biological) Kingdom |
-| 과 | BIFMLY | (Biological) Family |
-| 구 | OLD | Old |
-| 국 | TELOFC | Telephone Office |
-| 길 |  |  |
-| 널 | NUL | Null |
-| 논 | PDFLD | Paddy Field |
-| 답 |  |  |
-| 댐 | DM | Dam |
-| 률 |  |  |
-| 리 | LI | Li |
-| 명 | NM | Name |
-| 목 | BIORDR | (Biological) Order |
-| 문 | BIPHLM | (Biological) Phylum |
-| 물 | WTR | Water |
-| 밭 | FILD | (Farm) Field |
-| 법 | LAW | Law |
-| 보 | WEIR | Weir |
-| 분 | MI | Minute |
-| 뷰 | VIEW | View |
-| 산 | MTN | Mountain |
-| 선 | LINE | Line |
-| 속 | BIGNUS | (Biological) Genus |
-| 수 | CNT | Count |
-| 열 | HEAT | Heat |
-| 원 |  |  |
-| 월 | MM | Month |
-| 웹 | WEB | Web |
-| 율 |  |  |
-| 일 | DAY | Day |
-| 전 |  |  |
-| 종 | BISPCS | (Biological) Species |
-| 좌 | LFT | Left |
-| 주 | MN | Main |
-| 쪽 | PAGE | Page |
-| 책 |  |  |
-| 초 | SS | (Time) Second |
-| 층 | FLR | Floor |
-| 타 | OTHR | Other |
-| 팀 | TEAM | Team |
-| 폭 | WDT | Width |
-| 호 |  |  |
-| 후 |  |  |
-| 가감 | ADSB | Addition And Subtraction |
-| 가격 | PRC | Price |
-| 가공 | MNFCT | Manufacture |
-| 가구 | HSHD | Household |
-| 가능 | PSBLTY | Possibility |
-| 가동 | OPRTNG | Operating |
-| 가로 | WDTH | Width |
-| 가뭄 | DRGHT | Drought |
-| 가산 | ADTN | Addition |
-| 가상 | VR | Virtual |
-| 가스 | GAS | Gas |
-| 가액 | EQVL | Equivalent Value |
-| 가용 | AVL | Available |
-| 가입 | JOIN | Join |
-| 가점 |  |  |
-| 가족 | FAM | Family |
-| 가치 | WRTH | Worth |
-| 각도 | ANGL | Angle |
-| 각서 | MRND | Memorandum |
-| 각하 | RJTN | Rejection |
-| 간격 | GAP | Gap |
-| 간부 | EXCTV | Excutive |
-| 간사 | ORGNZR | Organizer |
-| 간이 | SMPLF | Simplified |
-| 간접 | IDRT | Indirect |
-| 간편 | SMP | Simplicity |
-| 감독 | SUP | Supervision |
-| 감리 | SPVS | Supervision |
-| 감면 | RDCT | Reduction |
-| 감사 | ADT | Audit |
-| 감소 | DCRS | Decrease |
-| 감시 | SVLNC | Surveillance |
-| 감액 | RDAMT | Reduction Amount |
-| 감점 | SBPT | Subtract Points |
-| 감정 | APRS | Appraisal |
-| 감지 | SNSNG | Sensing |
-| 감축 | RDC | Reduction |
-| 강도 | STRTH | Strength |
-| 강변 | RVSD | Riverside |
-| 강사 | INSTR | Instructor |
-| 강수 | PRCP | Precipitation |
-| 강우 | RAIN | Rain |
-| 강의 | LCTR | Lecture |
-| 강제 | FRC | Force |
-| 개관 | OPNNG | Opening |
-| 개도 | OPRAD | Opening The Road |
-| 개량 | IMPRVM | Improvement |
-| 개문 | OPGTE | Opening The Gate |
-| 개발 | DVLP | Development |
-| 개방 | OPN | Open |
-| 개별 | INDIV | Individual |
-| 개봉 | OPEN | Open |
-| 개선 | IMPV | Improvement |
-| 개설 | ESTBL | Establishment |
-| 개수 |  |  |
-| 개시 | STRT | Start |
-| 개업 | OPBIZ | Opening Of Business |
-| 개요 | OTLN | Outline |
-| 개인 | INDV | Individuals |
-| 개점 | OPSTR | Open Store |
-| 개정 | RVSN | Revision |
-| 개찰 | BDOPN | Bid Opening |
-| 개체 | INDVL | Individual |
-| 개최 | HDMT | Hold A Meeting |
-| 개통 | OPNG | Opening |
-| 개폐 | SWCHG | Switching |
-| 객석 | ADTRM | Auditorium |
-| 객실 | GSRM | Guest Room |
-| 객체 | OBJT | Object |
-| 갯벌 | MDF | Mud Flat |
-| 갱생 | RGNR | Regeneration |
-| 갱신 | UPDT | Update |
-| 거래 | DLNG | Dealings |
-| 거리 | DSTNC | Distance |
-| 거부 | RFUS | Refuse |
-| 거절 | RFSL | Refusal |
-| 거점 | POSITN | Position |
-| 거주 | HAB | Habitation |
-| 거치 | DFMT | Deferment |
-| 건강 | HLTH | Health |
-| 건물 | BLDG | Building |
-| 건설 | BLDP | Build Up |
-| 건수 | NOCS | The Number Of Cases |
-| 건의 | SGST | Suggestion |
-| 건조 | DRY | Dry |
-| 건축 | ARCH | Architecture |
-| 검사 | INSP | Inspection |
-| 검색 | SRCH | Search |
-| 검수 | IGI | Incoming Goods Inspection |
-| 검정 | RCGN | Recognition |
-| 검증 | VRFC | Verification |
-| 검진 | CKUP | Checkup |
-| 검체 | SPCMN | Specimen |
-| 검출 | DTCT | Detection |
-| 검침 | MTRD | Meter Reading |
-| 검토 | RVW | Review |
-| 게시 | PSTG | Posting |
-| 게임 | GAME | Game |
-| 격자 | LATC | Lattice |
-| 견적 | ESTMT | Estimate |
-| 결과 | RSLT | Result |
-| 결근 | ABSWK | Absence From Work |
-| 결산 | SOA | Settlement Of Accounts |
-| 결석 | ABSNC | Absence |
-| 결의 | RSLTN | Resolution |
-| 결재 | ATRZ | Authorization |
-| 결정 | DCSN | Decision |
-| 결제 | STLM | Settlement |
-| 결측 | MSNG | Missing |
-| 결함 | DFC | Defect |
-| 결합 | COMB | Combination |
-| 결혼 | MRG | Marriage |
-| 겸업 | SDJB | Side Job |
-| 겸직 | CCPS | Concurrent Position |
-| 경감 | RDUCT | Reduction |
-| 경계 | MGNL | Marginal |
-| 경고 | WARN | Warning |
-| 경과 | ELPS | Elapse |
-| 경도 | LOT | Longitude |
-| 경력 | CRR | Career |
-| 경로 | PATH | Path |
-| 경매 | AUCTN | Auction |
-| 경보 | ART | Alert |
-| 경비 | EPS | Expense |
-| 경영 | MNGM | Management |
-| 경위 | CHIST | Case History |
-| 경작 | CLVT | Cultivation |
-| 경쟁 | CMPET | Competition |
-| 경제 | ECNM | Economy |
-| 경조 | CGCD | Congratulations And Condolences |
-| 경차 | LVHC | Light Vehicles |
-| 경품 | GVW | Giveaway |
-| 경향 | TNDNC | Tendency |
-| 경험 | EXPRNC | Experience |
-| 계급 | ECHLN | Echelon |
-| 계단 | STAIR | Stair |
-| 계대 | SCDNG | Succeeding |
-| 계량 | MSR | Measuring |
-| 계산 | CAL | Calculation |
-| 계수 | CFC | Coefficient |
-| 계약 | CTRT | Contract |
-| 계열 | SERS | Series |
-| 계절 | SSN | Season |
-| 계정 | ACNT | Account |
-| 계좌 | BACNT | Bank Account |
-| 계측 | MSRG | Measuring |
-| 계층 | LYR | Layer |
-| 계통 | PSYS | Power System/Circuit |
-| 계획 | PLAN | Plan |
-| 고객 | CUST | Customer |
-| 고교 |  |  |
-| 고도 | ALTD | Altitude |
-| 고발 | ACSTN | Accusation |
-| 고시 | ANCMNT | Announcement |
-| 고용 | EPM | Employment |
-| 고유 | UNQ | Unique |
-| 고장 | BKDN | Breakdown |
-| 고정 | FIX | Fixation |
-| 고지 | INFRM | Inform |
-| 고철 | STSCP | Steel Scrap |
-| 고충 | DSTRS | Distress |
-| 곡선 | CURVE | Curve |
-| 골재 | AGGRGT | Aggregates |
-| 공간 | SPAC | Space |
-| 공개 | RLS | Release |
-| 공고 | PBANC | Public Announcement |
-| 공공 | PUB | Public |
-| 공급 | SPLY | Supply |
-| 공기 | AIR | Air |
-| 공단 | IDTCMP | Industrial Complex |
-| 공동 | JNT | Joint |
-| 공란 | BLNK | Blank |
-| 공람 | PDSP | Public Display |
-| 공매 | PBAC | Public Auction |
-| 공모 | PBCNTS | Public Contest |
-| 공문 | OFDOC | Official Document |
-| 공백 |  |  |
-| 공법 | MTCNS | Method Of Construction |
-| 공부 | OFBK | Official Book |
-| 공사 | CSTRN | Construction |
-| 공시 | PBLNT | Public Notice |
-| 공실 | EPRM | Empty Room |
-| 공업 | MDSR | (Manufacturing) Industry |
-| 공연 | PRFR | Performance |
-| 공용 | CMNUS | Common Use |
-| 공원 | PARK | Park |
-| 공유 | SHRN | Sharing |
-| 공인 | PBFG | Public Figure |
-| 공장 | FCTRY | Factory |
-| 공적 | CNTRB | Contribution |
-| 공정 | PROCS | Process |
-| 공제 | DDC | Deduction |
-| 공지 | NTC | Notice |
-| 공채 | ONTPM | Open invitation of applications for employment |
-| 공탁 | DPOST | Deposit |
-| 공통 | COM | Common |
-| 공포 | PRMG | Promulgation |
-| 공표 | OFANC | Official Announcement |
-| 과거 | PAST | Past |
-| 과락 | FLSBJ | Fail A Subject |
-| 과목 | SBJCT | Subject |
-| 과세 | TXTN | Taxation |
-| 과정 | CRS | Course |
-| 과제 | ASMT | Assignment |
-| 과학 | SCNC | Science |
-| 관경 | PDMT | Pipe Diameter |
-| 관계 | REL | Relation |
-| 관광 | TOURSM | Tourism |
-| 관급 | GVSP | Government Supply |
-| 관내 | WTJR | Within The Jurisdiction |
-| 관람 | VWNG | Viewing |
-| 관련 |  |  |
-| 관로 | PPL | Pipe Line |
-| 관리 | MNG | Management |
-| 관목 | SHRUB | Shrub |
-| 관서 | GVMNFC | Government Office |
-| 관심 | ITRST | Interest |
-| 관압 | PIPS | Pipe Press |
-| 관정 | GWEL | Groundwater Well |
-| 관찰 | OBSR | Observation |
-| 관청 | GVMNTC | Government Office |
-| 관측 | OBSRVN | Observation |
-| 관할 | CMPTNC | Competence |
-| 광역 | WAREA | Wide Area |
-| 교과 |  |  |
-| 교란 | DSTRB | Disturb |
-| 교량 | BRG | Bridge |
-| 교목 | CHPLAN | Chaplain |
-| 교부 | DTBN | Distribution |
-| 교수 | PRFSR | Professor |
-| 교육 | EDU | Education |
-| 교재 | TCMTR | Teaching Materials |
-| 교점 | NODE | Node |
-| 교정 | RCTF | Rectification |
-| 교체 | RPLC | Replacement |
-| 교통 | TRFC | Traffic |
-| 교환 | EXCH | Exchange |
-| 교훈 | LSSN | Lesson |
-| 구간 | ISEG | Interval Segment |
-| 구내 | PRMS | Premises |
-| 구매 | PRCHS | Purchase |
-| 구분 | SE | Section |
-| 구성 | CPST | Composition |
-| 구역 | ZONE | Zone |
-| 구입 |  |  |
-| 구제 | RLF | Relief |
-| 구조 | STRC | Structure |
-| 구축 | ETBL | Establish |
-| 국가 | NTN | Nation |
-| 국고 | NTTR | National Treasury |
-| 국내 | DMST | Domestic |
-| 국도 | NARO | National Road |
-| 국비 | NLEP | National Expenditure |
-| 국산 | DMPRD | Domestic Product |
-| 국외 | OVRSEA | Oversea |
-| 국장 | DRTR | Director |
-| 국적 | NTNLTY | Nationality |
-| 국정 | NTAD | National Administration |
-| 국제 | INTL | International |
-| 국회 | NLASM | The National Assembly |
-| 군락 | CLN | Colony |
-| 군집 | BCMNT | (Biotic) Community |
-| 군필 | MSVCF | Military Service Fulfilled |
-| 굴뚝 | CHMN | Chimney |
-| 굴착 | DGG | Digging |
-| 권고 | RCMND | Recommendation |
-| 권리 | RGHT | Right |
-| 권역 | SAREA | Sub-Area |
-| 권한 | AUTHRT | Authority |
-| 권호 | EDTN | Edition |
-| 귀속 | BLN | Belonging |
-| 규격 | SPCFCT | Specification |
-| 규모 | SCL | Scale |
-| 규정 | RULE | Rule |
-| 규제 | RGL | Regulation |
-| 규칙 | RUL | Rule |
-| 균등 | EQLTY | Equality |
-| 균주 | STN | Strain |
-| 그룹 | GROUP | Group |
-| 근거 | BSS | Basis |
-| 근로 | LBR | Labor |
-| 근무 | WORK | Work |
-| 근속 | CNSVC | Continuous Service |
-| 근태 | ATAB | Attendance And Absence |
-| 글꼴 | FONT | Font |
-| 금강 | GMRVR | Geum River |
-| 금리 | IRT | Interest Rate |
-| 금속 | MTAL | Metal |
-| 금액 | AMT | Amount |
-| 금연 | NSMK | No Smoking |
-| 금융 | FNNC | Finance |
-| 금회 | TSTM | This Time |
-| 급속 | RAP | Rapid |
-| 급수 | WATSUP | Water Supply |
-| 급여 | SLRY | Salary |
-| 기각 | RJC | Reject |
-| 기간 | PRD | Period |
-| 기계 | MCHN | Machine |
-| 기고 | CTB | Contribution (From) |
-| 기관 | INST | Institution |
-| 기구 | ORGZN | Organization |
-| 기금 |  |  |
-| 기기 | ISTR | Instrument |
-| 기념 | CMMRT | Commemoration |
-| 기능 | FWK | Functional Work |
-| 기대 | EXPT | Expectation |
-| 기록 | RCD | Record |
-| 기반 | BAS | BASE |
-| 기본 | BSC | Basic |
-| 기부 | DNTN | Donation |
-| 기사 | ARTC | Article |
-| 기산 | RCK | Reckoning |
-| 기상 | WTH | Weather |
-| 기술 | TECH | Technology |
-| 기안 | DRFT | Drafting |
-| 기압 | ATMPR | Atmospheric Pressure |
-| 기업 | ENT | Enterprise |
-| 기여 | CTRBT | Contribution |
-| 기온 | ARTMP | Air Temperature |
-| 기원 | ORGN | Origin |
-| 기자 | JRNLST | Journalist |
-| 기재 | FLLN | Filling In |
-| 기저 | BASIS | Basis |
-| 기존 | EXS | Existing |
-| 기종 | MKND | Machine Kind (Model) |
-| 기준 | CRTR | Criteria |
-| 기초 | BSCS | Basics |
-| 기출 | PVEX | Previous Examination |
-| 기타 | ETC | Etc |
-| 기통 | CYLN | Cylinder |
-| 기표 | BLTG | Balloting |
-| 기한 | TERM | Term |
-| 기호 | SMBL | Symbol |
-| 기획 | PLN | Planning |
-| 기후 | CLIMT | Climate |
-| 긴급 | EMRG | Emergency |
-| 길이 | LEN | Length |
-| 깊이 | DPTH | Depth |
-| 나라 |  |  |
-| 나쁨 | BD | Bad |
-| 나이 |  |  |
-| 나지 | BLD | Bare Land |
-| 낙차 | FLHD | Fall Head |
-| 낙찰 | SCSBD | Successful Bid |
-| 난간 | HDRL | Handrail |
-| 난방 | HTNG | Heating |
-| 날씨 | WTHR | Weather |
-| 남성 | ML | Male |
-| 남쪽 | STHRN | Southern |
-| 납기 | DUDT | Due Date |
-| 납부 | PAY | Payment |
-| 납입 |  |  |
-| 납품 | DLVGDS | Delivery Of Goods |
-| 낭비 | WASTE | Waste |
-| 내륙 | INLND | Inland |
-| 내부 | INSD | Inside |
-| 내선 | EXT | Extension |
-| 내성 | TLRNC | Tolerance |
-| 내역 | DSCTN | Description |
-| 내용 | CN | Content |
-| 내원 | VSHSP | Visit A Hospital |
-| 내일 | TMRW | Tomorrow |
-| 내진 | ETRS | Earthquake Resistant |
-| 냄새 | SMLL | Smell |
-| 냉각 | CLNG | Cooling |
-| 냉동 | REFRIG | Refrigeration |
-| 냉매 | RERGRT | Refrigerant |
-| 냉방 | COOL | Cooling |
-| 너비 |  |  |
-| 년도 |  |  |
-| 년수 | YYCNT | Year Count |
-| 년월 |  |  |
-| 노드 |  |  |
-| 노력 | EFFORT | Effort |
-| 노선 | RTE | Route |
-| 노인 | SNCTZ | Senior Citizen |
-| 노임 | WGS | Wages |
-| 노장 | OBSVF | Observation Field |
-| 노점 |  |  |
-| 노조 |  |  |
-| 노출 | EXPSR | Exposure |
-| 노트 |  |  |
-| 노후 | OBSLT | Obsolete |
-| 녹취 | TRSC | Transcript |
-| 논리 | LGC | Logic |
-| 논문 | THSS | Thesis |
-| 농가 | FRMHS | Farmhouse |
-| 농도 | DNST | Density |
-| 농약 | AGRPST | Agricultural Pesticides |
-| 농업 | FARM | Farming |
-| 농장 | FARMS | Farms |
-| 농지 | AGLN | Agricultural Land |
-| 농축 | ERCT | Enrichment |
-| 높이 | HGT | Height |
-| 누가 | CMTAD | Cumulative Addition |
-| 누계 | ACTOT | Accumulated Total |
-| 누락 | OMIT | Omit |
-| 누수 | WTLKG | Water Leakage |
-| 누적 | ACML | Accumulation |
-| 누출 | LKG | Leakage |
-| 뉴스 | NEWS | News |
-| 능력 | ABLT | Ability |
-| 다량 | BULK | Bulk |
-| 다음 | NEXT | Next |
-| 다중 | MLT | Multiple |
-| 단가 | UNTPRC | Unit Price |
-| 단계 | STP | Step |
-| 단기 | SRTPD | Short Period |
-| 단독 | SNGL | Single |
-| 단면 | CRSCN | Cross Section |
-| 단속 | CRDN | Crackdown |
-| 단수 | SPWTSP | Suspension of Water Supply |
-| 단어 | WORD | Word |
-| 단위 | UNIT | Unit |
-| 단일 | SINGL | Singleness |
-| 단지 | CMPX | Complex |
-| 단체 | GRP | Group |
-| 단축 | SHRTN | Shortening |
-| 달력 | CLDR | Calendar |
-| 달성 | ACHV | Achievement |
-| 담당 | TKCG | Taking Charge |
-| 담보 | CLTR | Collateral |
-| 담수 | PLWT | Plain Water |
-| 답글 | PRPLY | (Post) Reply |
-| 답변 | ANS | Answer |
-| 답안 | ANSW | Answer |
-| 답장 | RPL | Reply |
-| 당기 | THTM | This Term |
-| 당시 | TTM | That Time |
-| 당월 | TSMM | This Month |
-| 당일 | THDY | This Day |
-| 당직 | ONDT | On Duty |
-| 당첨 | PRWN | Prize Winning |
-| 당초 | OGN | Origin |
-| 당해 | TYY | This Year |
-| 대가 | PYMNT | Payment |
-| 대금 | PYMT | Payment |
-| 대기 | WTNG | Waiting |
-| 대량 | LQTY | Large Quantity |
-| 대륙 | CNTNT | Continent |
-| 대리 | SBT | Substitution |
-| 대면 | FTF | Face To Face |
-| 대민 | FCVLN | (For) Civilians |
-| 대변 | CRSD | The Credit Side |
-| 대비 | CTRS | Contrast |
-| 대상 | TRGT | Target |
-| 대수 | CNTOM | Count Of Machines |
-| 대여 | RNTL | Rental |
-| 대역 | BAND | Band |
-| 대원 | CRW | Crew |
-| 대응 | CRSP | Correspondence |
-| 대장 | LDGR | Ledger |
-| 대지 | ERTH | Earth |
-| 대책 | CTPN | Counterplan |
-| 대체 | SBST | Substitution |
-| 대출 | LOAN | Loan |
-| 대치 | RPMNT | Replacement |
-| 대표 | RPRS | Representation |
-| 대행 | PRXY | Proxy |
-| 대형 | LGSZ | Large Size |
-| 대화 | CNVRS | Conversation |
-| 대회 | CNFRN | Conference |
-| 댓글 | CMNT | Comment |
-| 덮개 | COVR | Cover |
-| 도구 | TOOL | Tool |
-| 도급 | CTRC | Contract |
-| 도달 | RCHNG | Reaching |
-| 도래 | MGRTR | Migratory |
-| 도로 | ROAD | Road |
-| 도면 | FLRPLN | Floor Plan |
-| 도색 | PAINT | Painting |
-| 도서 | BOOK | Book |
-| 도시 | CTY | City |
-| 도엽 | MAPSHT | Map Sheet |
-| 도입 | INTR | Introduction |
-| 도착 | ARVL | Arrival |
-| 도출 | DDUC | Deduction |
-| 독려 | ENCR | Encouragement |
-| 독성 | TOXC | Toxicity |
-| 독촉 | URG | Urge |
-| 돌풍 | GUST | Gust |
-| 동거 | CHBTN | Cohabitation |
-| 동결 | FRZG | Freezing |
-| 동기 | MTV | Motive |
-| 동력 | POWER | Power |
-| 동물 | ANML | Animal |
-| 동반 | ACMP | Accompany |
-| 동시 | SMLTN | Simultaneous |
-| 동압 | DNMPRS | Dynamic Pressure |
-| 동의 | AGRE | Agreement |
-| 동일 | SAME | Same |
-| 동작 | MOTN | Motion |
-| 동쪽 | ESTRN | Eastern |
-| 동파 | FRZBUR | Frozen To Burst |
-| 동향 |  |  |
-| 두께 | THICK | Thickness |
-| 두수 | NOHD | The Number Of Heads |
-| 둔치 | ESPD | Esplanade |
-| 둘레 | CRCF | Circumference |
-| 뒷면 | BKSD | Back Side |
-| 드론 | DRN | Drone |
-| 등급 | GRD | Grade |
-| 등기 | RG | Registered |
-| 등록 | REG | Registration |
-| 등재 | REGST | Registration |
-| 뚜껑 | LID | Lid |
-| 라벨 | LBL | Label |
-| 라틴 | LTN | Latin |
-| 레벨 | LVL | Level |
-| 로그 | LOG | Log |
-| 로트 | LT | Lot |
-| 리셋 |  |  |
-| 링크 |  |  |
-| 마감 | DDLN | Deadline |
-| 마을 | VLG | Village |
-| 만기 | MTRY | Maturity |
-| 만료 | EXPRY | Expiry |
-| 만족 | STFC | Satisfaction |
-| 말소 | ERSR | Erasure |
-| 맞춤 | CSTMZ | Custmizing |
-| 매각 | DSPSL | Disposal |
-| 매도 | SLL | Sell |
-| 매립 | RCLM | Reclamation |
-| 매매 | TRD | Trading |
-| 매설 | LAYING | Laying |
-| 매수 | BYNG | Buying |
-| 매입 |  |  |
-| 매장 | SHOP | Shop |
-| 매출 | SLS | Sales |
-| 매핑 | MPNG | Mapping |
-| 맨홀 | MNHL | Manhole |
-| 먼지 | DST | Dust |
-| 메뉴 | MENU | Menu |
-| 메모 | MEMO | Memo |
-| 메인 |  |  |
-| 메일 |  |  |
-| 메타 | META | Meta |
-| 메탄 | METHN | Methane |
-| 면담 | ITVW | Interview |
-| 면세 | TXEX | Tax Exemption |
-| 면적 | AREA | Area |
-| 면접 | INTV | Interview |
-| 면제 | EXMPTN | Exemption |
-| 면책 | EXRS | Exemption From Responsibility |
-| 면허 | LCNS | License |
-| 멸균 | STZ | Sterilization |
-| 명령 | CMD | Command |
-| 명명 | NMNG | Naming |
-| 명세 | PRTCLR | Particulars |
-| 명수 |  |  |
-| 명예 | HNR | Honor |
-| 명의 | NMNL | Nominal |
-| 명칭 |  |  |
-| 모델 | MDL | Model |
-| 모듈 | MODL | Module |
-| 모래 | SAND | Sand |
-| 모레 | DATMRW | Day After Tomorrow |
-| 모양 | SHAPE | Shape |
-| 모집 | RCRT | Recruitment |
-| 모형 |  |  |
-| 목록 | LIST | List |
-| 목재 | TIMBER | Timber |
-| 목적 | PRPS | Purpose |
-| 목차 | TOC | Table Of Contents |
-| 목표 | GOAL | Goal |
-| 묘지 | GRVYD | Graveyard |
-| 무게 |  |  |
-| 무료 | FREE | Free |
-| 무상 | FRE | Free |
-| 무선 | WRLS | (Network) Wireless |
-| 무형 | ITN | Intangible |
-| 무효 | INVLD | Invalidity |
-| 묶음 | BNDL | Bundle |
-| 문구 | PHRS | Phrase |
-| 문서 | DOC | Document |
-| 문의 | ENQY | Enquiry |
-| 문자 | LTR | Letter |
-| 문제 | PRBLM | Problem |
-| 문항 | QITEM | Question Item |
-| 문헌 | LTRT | Literature |
-| 문화 | CTR | Culture |
-| 물가 | PRCO | Prices Of Commodities |
-| 물건 | THING | Thing |
-| 물류 | LOGIS | Logistics |
-| 물리 | PHYS | Physics |
-| 물빛 | DYCLR | Dye Color |
-| 물적 | SBSTE | Substance |
-| 물질 | SBSTN | Substance |
-| 물품 | CMDTY | Commodity |
-| 미결 | PND | Pendency |
-| 미납 | UNPAID | Unpaid |
-| 미달 | BLSTD | BelowStandard |
-| 미만 | UDR | Under |
-| 미수 | UCLT | Uncollected |
-| 미투 | METOO | Metoo Movement |
-| 미필 | INCMP | Incompletion |
-| 미흡 | INSF | Insufficiency |
-| 민간 | PRVTO | Private (Non-Official) |
-| 민감 | SST | Sensitive |
-| 민원 | CVLCPT | Civil Complaint |
-| 밀도 | SMPVM | Substance's Math Per Volume |
-| 밀폐 | SEALG | Sealing |
-| 바닥 | BTM | Bottom |
-| 바람 | WIND | Wind |
-| 반경 | RDIS | Radius |
-| 반기 | HT | Half Term |
-| 반납 | RTN | Return |
-| 반대 | OPST | Opposition |
-| 반려 | RJCT | Reject |
-| 반복 | REPT | Repetition |
-| 반송 | SNDBK | Send Back |
-| 반영 | RFLT | Reflection |
-| 반응 | RACT | Reaction |
-| 반입 | CRYN | Carry In |
-| 반출 | SHPGOT | Shipping Out |
-| 반품 | RTGD | Returned Goods |
-| 반환 | GVBK | Giving Back |
-| 받는 |  |  |
-| 발간 | PBLS | Publish |
-| 발견 | DSCV | Discovery |
-| 발광 | LMNS | Luminous |
-| 발급 | ISSU | Issue |
-| 발령 | APNT | Appoint |
-| 발명 | INVN | Invention |
-| 발병 | ONST | Onset |
-| 발부 | ISUE | Issue |
-| 발생 | OCRN | Occurrence |
-| 발송 | SNDNG | Sending |
-| 발신 | DSPTCH | Dispatch |
-| 발암 | CCGS | Carcinogenesis |
-| 발열 | FVR | Fever |
-| 발의 | PRPSL | Proposal |
-| 발전 | ETGT | Electricity Generation |
-| 발주 | ORDER | Order |
-| 발표 | PRSNTN | Presentation |
-| 발행 | PBLCN | Publication |
-| 발효 | EFCTN | Effectuation |
-| 방류 | DSCHG | Discharge |
-| 방문 | VST | Visit |
-| 방법 | MTHD | Method |
-| 방송 | BRDC | Broadcast |
-| 방수 | WPROF | Waterproof |
-| 방식 | MTH | Method |
-| 방안 | MSRS | Measures |
-| 방어 | DFS | Defense |
-| 방위 | DRTN | Direction |
-| 방재 | PVOD | Prevention Of Disasters |
-| 방제 | INPS | Insect Pests |
-| 방지 | PRV | Prevention |
-| 방침 | PRCPL | Principle |
-| 방향 | DCTN | Direction |
-| 배경 | BKGR | Background |
-| 배관 | PIPE | Pipe |
-| 배너 | BNR | Banner |
-| 배당 | ALCTN | Allocation |
-| 배부 | HNDT | Handout |
-| 배분 | APRT | Apportionment |
-| 배상 | RPN | Reparation |
-| 배송 | DLVR | Delivery |
-| 배수 |  |  |
-| 배양 | CLTVT | Cultivate |
-| 배점 | SCOR | Scoring |
-| 배정 | ALTMNT | Allotment |
-| 배제 | EXCLU | Exclusion |
-| 배지 | CTRMD | Culture Medium |
-| 배차 | CRAL | Car Allocation |
-| 배출 | EMSN | Emission |
-| 배치 | BTCH | Batch |
-| 배포 | CRLTN | Circulation |
-| 백신 | VACN | Vaccine |
-| 백업 | BKUP | Backup |
-| 밸브 | VALVE | Valve |
-| 버전 | VER | Version |
-| 버튼 | BTN | Button |
-| 번역 | TRSL | Translation |
-| 번호 | NO | Number |
-| 벌금 | FNE | Fine |
-| 벌점 | DEM | Demerit Mark |
-| 범례 | LGND | Legend |
-| 범위 | SCP | Scope |
-| 범주 | CTGRY | Category |
-| 법규 | LWRG | Laws And Regulations |
-| 법령 | STT | Statute |
-| 법무 | JDAF | Judicial Affairs |
-| 법안 | LBIL | (Law) Bill |
-| 법원 | CT | Court |
-| 법인 | CORP | Corporation |
-| 법적 | LGL | Legal |
-| 법정 | STTY | Statutory |
-| 변경 | CHG | Change |
-| 변동 | FLCTN | Fluctuation |
-| 변수 | VRBL | Variable |
-| 변이 | MTTN | Mutation |
-| 변제 | REPAY | Repayment |
-| 변종 | VRY | (Biological) Variety |
-| 변형 | DFRMT | Deformation |
-| 변화 | VARTN | Variation |
-| 변환 | TRSF | Transformation |
-| 별도 | APART | Apart |
-| 별명 |  |  |
-| 별칭 | NCNM | Nickname |
-| 별표 | ASTK | Asterisk |
-| 병가 | SKLV | Sick Leave |
-| 병과 | BR | Branch (Of Service) |
-| 병상 | SCKBD | Sickbed |
-| 병설 | ESANX | Establish Sth As An Annex |
-| 병원 | HSPTL | Hospital |
-| 병합 | MRGER | Merger |
-| 보강 | REINFC | Reinforcement |
-| 보건 | HLTHCR | Health Care |
-| 보고 | RPT | Report |
-| 보관 | KPNG | Keeping |
-| 보급 | PSPLY | Public Supply |
-| 보기 | EXMCS | (Example) Case |
-| 보도 | NSCVRG | News Coverage |
-| 보류 | HLDOF | Hold Off |
-| 보상 | CMPN | Compensation |
-| 보세 | BOND | Bonded |
-| 보수 |  |  |
-| 보안 | SCRTY | Security |
-| 보완 | SPLMNT | Supplementation |
-| 보유 | HLD | Holding |
-| 보전 | PRSRV | Preservation |
-| 보정 | CRCT | Correction |
-| 보조 | ASST | Assistance |
-| 보존 | PRSV | Preservation |
-| 보증 | GRNTE | Guarantee |
-| 보직 | APPNT | Appointment |
-| 보통 | USL | Usual / Neutral |
-| 보험 | INSRNC | Insurance |
-| 보호 | PRTC | Protection |
-| 보훈 | PV | Patriots And Veterans |
-| 복개 | RCVG | River Covering |
-| 복구 | RSTR | Restoration |
-| 복무 | SERVC | Service |
-| 복본 | DPLC | Duplication |
-| 복사 | COPY | Copy |
-| 복원 | RSTRT | Restoration |
-| 복지 | WLFR | Welfare |
-| 복직 | RINST | Reinstatement |
-| 복토 | CWTH | Covering With Soil |
-| 복합 | MULTI | Multiplex |
-| 본류 | MNSTM | The Main Stream |
-| 본문 | MTXT | Main Text |
-| 본번 | MNO | Main Number |
-| 본부 | HQ | Headquarters |
-| 본사 | HDOFC | Head Office |
-| 본세 | MNTX | Main Tax |
-| 본인 | ONSLF | Oneself |
-| 본점 | MNBR | Main Branch |
-| 봉사 | SVC | Service |
-| 부가 | ADDTN | Addition |
-| 부과 | LEVY | Levy |
-| 부담 | BRDN | Burden |
-| 부당 | UNFAR | Unfair |
-| 부대 | SBSD | Subsidiary |
-| 부도 | ISVC | Insolvency |
-| 부모 | PRNT | Parent |
-| 부문 | SECT | Sector |
-| 부번 | SNO | Sub Number |
-| 부분 | PART | Part |
-| 부상 | INJR | Injury |
-| 부서 | DEPT | Department |
-| 부설 | LAY | Lay |
-| 부속 | ANX | Annex |
-| 부수 | NOCP | Number Of Copies |
-| 부식 | CORRSN | Corrosion |
-| 부양 | SPT | Support |
-| 부여 | GRNT | Grant |
-| 부위 | REGN | Region |
-| 부임 | ACSN | Accession |
-| 부재 | ABSN | Absence |
-| 부제 |  |  |
-| 부족 | SHTG | Shortage |
-| 부지 | LND | Land |
-| 부착 | STIK | Sticking |
-| 부채 | LBLT | Liabilities |
-| 부처 | MAO | Ministry And Office |
-| 부품 | PRTS | Parts |
-| 부호 | SYMBL | Symbol |
-| 북쪽 | NRTRN | Northern |
-| 분개 | JRNL | Journalizing |
-| 분과 | SCMT | Subcommittee |
-| 분기 | QTR | Quarter |
-| 분납 | ISPY | Installment Payment |
-| 분뇨 | HMN | Humanure |
-| 분담 | SHARE | Share |
-| 분당 | PRMI | Per Minute |
-| 분류 | CLSF | Classification |
-| 분리 | SPR | Separate |
-| 분배 |  |  |
-| 분석 | ANLS | Analysis |
-| 분쇄 | CRSH | Crush |
-| 분수 | WTRDVN | Water Diversion |
-| 분실 | LOST | Lost |
-| 분야 | FLD | Field |
-| 분양 | LTOT | Lotting-Out |
-| 분자 | MOCL | Molecule |
-| 분쟁 | DISPT | Dispute |
-| 분포 | DSTB | Distribution |
-| 분할 | PRTTN | Partition |
-| 분해 | DCOMP | Decomposition |
-| 불가 | IMPS | Impossible |
-| 불능 | INBL | Inability |
-| 불량 | BAD | Bad |
-| 불만 | DSCNTT | Discontent |
-| 불법 | UNLAW | Unlawfulness |
-| 불복 | DSBDNC | Disobedience |
-| 불용 | DUSE | Disuse |
-| 불입 | PAYMNT | Payment |
-| 불참 | NATT | Nonattendance |
-| 불출 | RELS | Release |
-| 블록 | BLCK | Block |
-| 비고 | RMRK | Remarks |
-| 비교 | CMPR | Compare |
-| 비닐 | VINYL | Vinyl |
-| 비료 | FERT | Fertilizer |
-| 비목 | ITMEXP | Item Of Expenditure |
-| 비밀 | SCRET | Secret |
-| 비산 | ASCTR | Air Scatter |
-| 비상 | EMRGY | Emergency |
-| 비용 | CST | Cost |
-| 비위 | VIOL | Violation |
-| 비율 | RT | Rate |
-| 비중 | SPGR | Specific Gravity |
-| 비치 | FRNSH | Furnishing |
-| 비품 | FXTRS | Fixtures |
-| 비행 | FLYNG | Flying |
-| 빈도 | FREQ | Frequency |
-| 사건 | INCDNT | Incident |
-| 사고 | ACDNT | Accident |
-| 사령 | DTOF | Duty Officer |
-| 사례 | CASE | Case |
-| 사료 | FEED | Feed |
-| 사망 | DTH | Death |
-| 사면 | PRDN | Pardon |
-| 사무 | OFCW | Office Work |
-| 사수 | DWTR | Dead Water |
-| 사실 | FACT | Fact |
-| 사업 | BIZ | Business |
-| 사용 | USE | Use |
-| 사원 |  |  |
-| 사유 | RSN | Reason |
-| 사육 | BRED | Breed |
-| 사전 | BFHD | Beforehand |
-| 사주 | SNDBR | Sand Bar |
-| 사진 | PHOTO | Photograph |
-| 사체 | CORPSE | Corpse |
-| 사항 | MTTR | Matter |
-| 사회 | SOCTY | Society |
-| 사후 | EPFC | Ex Post Facto |
-| 삭감 | CTBK | Cutback |
-| 삭제 | DEL | Deletion |
-| 산간 | MNTNS | Mountainous |
-| 산림 | FORST | Forest |
-| 산소 | OXYG | Oxygen |
-| 산식 | FMLA | Formula |
-| 산업 | INDST | Industry |
-| 산입 | INCLSN | Inclusion |
-| 산재 | IA | Industrial Accident |
-| 산정 | CMPTTN | Computation |
-| 산지 | MTLND | Mountain Land |
-| 산출 | CALC | Calculation |
-| 산하 | AFLTD | Affiliated |
-| 살수 | SPRKL | Sprinkling |
-| 살포 | SPRAY | Spray |
-| 상가 | STORE | Store (Section) |
-| 상각 | AMTZ | Amortization |
-| 상계 | STFF | Setoff |
-| 상관 | CRLT | Correlation |
-| 상금 | AWARD | Award |
-| 상단 | UPEND | Upper End |
-| 상담 | DSCSN | Discussion |
-| 상대 | RLT | Relative |
-| 상류 | UPSTM | Upstream |
-| 상벌 | RWPN | Reward And Punishment |
-| 상부 | UPPRT | Upper Part |
-| 상세 | DTL | Details |
-| 상소 | APLH | Appeal To A Higher Court |
-| 상속 | IHRT | Inheritance |
-| 상쇄 | OFSTG | Offsetting |
-| 상승 | ASND | Ascending |
-| 상시 | ODTM | Ordinary Times |
-| 상신 | RTSO | Report To Superior Official |
-| 상실 | LOSE | Lose |
-| 상압 | NMPS | Normal Pressure |
-| 상업 | CMC | Commerce |
-| 상영 | SCRG | Screening |
-| 상온 | RMTMP | Room Temperature |
-| 상용 | CMCUS | Commercial Use |
-| 상위 | UP | Upper |
-| 상장 | LSTG | Listing |
-| 상주 | RESD | Reside |
-| 상층 | UPCL | Upper Class |
-| 상태 | STTS | Status |
-| 상표 | TDMK | Trademark |
-| 상품 | GDS | Goods |
-| 상한 | UPLMT | The Upper Limit |
-| 상해 | BHRM | Bodily Harm |
-| 상향 | UPWRD | Upward |
-| 상호 | CONM | Company Name |
-| 상환 | RPMT | Repayment |
-| 상황 | STTN | Situation |
-| 상훈 | PZDC | Prizes And Decorations |
-| 새창 | NPAG | New Page |
-| 색도 | CRMTY | Chromaticity |
-| 색맹 | ACHRM | Achromatopsia |
-| 색상 | COLR | Color |
-| 색인 | INDX | Index |
-| 샘플 | SMPLE | Sample |
-| 생물 | CRTURE | Creature |
-| 생산 | PRDCTN | Production |
-| 생성 | CRT | Creation |
-| 생식 | PRTN | Procreation |
-| 생존 | SRVL | Survival |
-| 생태 | ECLG | Ecology |
-| 생활 | LVNG | Living |
-| 서가 | BKSH | Bookshelf |
-| 서류 | DCMNT | Document |
-| 서면 | WRTN | Written |
-| 서명 | SIGN | Signature |
-| 서무 | GNAFR | General Affairs |
-| 서버 | SRVR | Server |
-| 서식 | TMPLT | Template |
-| 서약 | OATH | Oath |
-| 서쪽 | WSTRN | Western |
-| 서체 |  |  |
-| 석면 | ABSTS | Asbestos |
-| 석식 | DNNR | Dinner |
-| 석축 | STNWRK | Stonework |
-| 선고 | ADJ | Adjudication |
-| 선납 | PRPY | Prepayment |
-| 선로 | RLWY | Railway |
-| 선박 | VSL | Vessel |
-| 선발 | PICK | Pick |
-| 선별 | SLCF | Select And Classify |
-| 선원 | CREW | Crew |
-| 선임 |  |  |
-| 선장 | CPTN | Captain |
-| 선적 | SHPG | Shipping |
-| 선정 | SLCTN | Selection |
-| 선택 | CHC | Choice |
-| 선행 | PRCD | Preceding |
-| 선호 | PRFRC | Preferance |
-| 설계 | DESIGN | Design |
-| 설립 | FNDN | Foundation |
-| 설명 | EXPLN | Explanation |
-| 설문 | SRVY | Survey |
-| 설비 | FCL | (Equipment) Facility |
-| 설정 | STNG | Setting |
-| 설치 | INSTL | Installation |
-| 섭식 | FED | Feeding |
-| 성격 | PRSNL | Personality |
-| 성공 | SCS | Success |
-| 성과 | OTCM | Outcome |
-| 성능 | PRFRNC | (Machine) Performance |
-| 성명 | FLNM | Full Name |
-| 성별 | GNDR | Gender |
-| 성분 | IGRD | Ingredient |
-| 성상 | TMPSTE | Temperamnet And State |
-| 성인 | ADLT | Adult |
-| 성장 | GROW | Growth |
-| 성적 | PGRD | Performance Grade |
-| 성향 |  |  |
-| 세공 | CRFTS | Craftsmanship |
-| 세관 | CSTMHS | Customs-House |
-| 세균 | GERM | Germ |
-| 세금 | TX | Tax |
-| 세대 | HH | Households |
-| 세로 | VRTC | Vertical |
-| 세목 | TXITM | Tax Item |
-| 세무 | TXBIZ | Taxation Business |
-| 세부 |  |  |
-| 세션 | SYSSN | System Session |
-| 세액 | TXAMT | Tax Amount |
-| 세입 | ANRVN | Annual Revenue |
-| 세전 | BFTX | Before Tax |
-| 세척 | CLNSG | Cleansing |
-| 세출 | ANEXP | Annual Expenditure |
-| 세포 | BCLL | Biology Cell |
-| 센서 | SNSR | Sensor |
-| 센터 | CNTR | Center |
-| 소각 | INCNR | Incineration |
-| 소개 | INTDC | Introducion |
-| 소계 | STOT | Subtotal |
-| 소관 | JRSD | Jurisdiction |
-| 소급 | RTRCT | Retroactivity |
-| 소독 | STLZ | Sterilze |
-| 소득 | EARN | Earnings |
-| 소량 | SMLQ | Small Quantity |
-| 소리 | SOUND | Sound |
-| 소멸 | EXTSH | Extinguishment |
-| 소명 | VNDC | Vindicate |
-| 소모 | CSMT | Consumption |
-| 소방 | FRFG | Firefighting |
-| 소비 | CNSM | Consume |
-| 소생 |  |  |
-| 소속 | OGDP | Organization/Department |
-| 소송 | LWS | Lawsuit |
-| 소액 | SAMT | Small Amount |
-| 소요 | REQ | Required |
-| 소유 | PSN | Possession |
-| 소음 | NOIS | Noise |
-| 소재 |  |  |
-| 소집 | CNVC | Convocation |
-| 소형 | STYP | Small Type |
-| 속도 | SPD | Speed |
-| 속성 | ATRB | Attribute |
-| 손실 | LOSS | Loss |
-| 손익 | PFLS | Profit And Loss |
-| 손해 | HRM | Harm |
-| 송금 | RMT | Remittance |
-| 송달 | TMTL | Transmittal |
-| 송부 | SNDG | Sending |
-| 송수 | WTSUPL | Water Supply |
-| 송신 |  |  |
-| 송장 | INVC | Invoice |
-| 송치 | TRNSR | Transference |
-| 수강 | ATNLC | Attendance Lecture |
-| 수거 | CLT | Collect |
-| 수계 | WTST | Water System |
-| 수관 | ASCTL | Assumption Of Control |
-| 수급 | RECIPT | Receipt |
-| 수기 | HWRT | Handwriting |
-| 수납 | RCVMT | Receiving Money (Or Thing) |
-| 수단 | MNS | Means |
-| 수당 | ALW | Allowance |
-| 수도 |  |  |
-| 수동 | MANL | Manual |
-| 수락 | ACPT | Acceptance |
-| 수량 | QTY | Quantity |
-| 수령 | RCV | Receive |
-| 수로 | WTRWY | Waterway |
-| 수료 | FNSH | Finish |
-| 수리 | RPR | Repair |
-| 수립 | FNDG | Founding |
-| 수면 | WTSF | Water Surface |
-| 수명 | LIFES | Lifespan |
-| 수몰 | SBMRG | Be Submerged |
-| 수문 | WTGT | Water Gate |
-| 수변 | WTRSD | Waterside |
-| 수분 | MSTR | Moisture |
-| 수산 | MRP | Marine Products |
-| 수상 | WNAWD | Winning Award |
-| 수선 | MNDG | Mending |
-| 수소 | HYDR | Hydrogen |
-| 수술 | SRGR | Surgery |
-| 수습 | PRBT | Probation |
-| 수식 |  |  |
-| 수신 | RCPTN | Reception |
-| 수심 | WTDTH | Water Depth |
-| 수압 | WTRPRS | Water Pressure |
-| 수여 | CNFR | Conferment |
-| 수역 | WTRS | Waters |
-| 수온 | WTTM | Water Temperature |
-| 수요 | DMD | Demand |
-| 수용 | ACTC | Acceptance |
-| 수원 | WTRSRC | Water Source |
-| 수위 | WTLV | Water Level |
-| 수은 | MRCR | Mercury |
-| 수임 | ACAP | Acceptance Of Appointment |
-| 수입 | INCM | Income |
-| 수정 | MDFCN | Modification |
-| 수조 | WATNK | Water Tank |
-| 수종 | TRSPC | Tree Species |
-| 수준 | LV | Level |
-| 수직 | VTCL | Vertical |
-| 수질 | WQ | Water Quality |
-| 수집 | CLCT | Collection |
-| 수차 | WTRBN | Water Turbine |
-| 수출 | EXP | Export |
-| 수치 | NVL | Numerical Value |
-| 수탁 | TRST | Trust |
-| 수표 | CHECK | Check |
-| 수풀 | WDLND | Woodland |
-| 수행 | FLFMT | Fulfillment |
-| 수험 | TKEXM | Taking An Exam |
-| 숙박 | LDG | Lodge |
-| 숙소 | ACMD | Accommodations |
-| 순간 | MMNT | Moment |
-| 순도 | PURDG | Purity Degree |
-| 순번 |  |  |
-| 순서 | SEQ | Sequence |
-| 순수 | PURE | Pure |
-| 순위 | RNK | Ranking |
-| 순찰 | PTL | Patrol |
-| 순환 | CRCL | Circulation |
-| 순회 | RNDS | Rounds |
-| 숨김 | HIDE | Hide |
-| 숫자 | NUM | Numeral |
-| 쉼터 | SHLTR | Shelter |
-| 스팸 | SPAM | Spam |
-| 습도 | HUM | Humidity |
-| 습지 | WTLND | Wetland |
-| 승계 | SCSN | Succession |
-| 승급 | ADVN | Advancement |
-| 승선 | EMKT | Embarkation |
-| 승용 | PSNGR | Passenger |
-| 승인 | APRV | Approval |
-| 승진 | PRMT | Promotion |
-| 승차 | RIDE | Ride |
-| 시가 | MPRC | Market Price |
-| 시각 | TM | Time |
-| 시간 | HR | Hour |
-| 시공 | CNST | Construct |
-| 시군 | SIGUN | Si/Gun |
-| 시기 | TMNG | Timing |
-| 시도 | CTPV | Cities And Provinces |
-| 시료 | SPCM | Specimen |
-| 시범 | DMSTR | Demonstration |
-| 시분 | HM | Hour And Minute |
-| 시상 | WNARD | Winning Award |
-| 시설 | FCLT | Facilities |
-| 시작 | BGNG | Beginning |
-| 시장 | MRKT | Market |
-| 시정 | CRC | Correction |
-| 시추 | DRLL | Drilling |
-| 시트 | SHEET | Sheet |
-| 시행 | ENFC | Enforcement |
-| 시험 | TEST | Test |
-| 식단 | DIET | Diet |
-| 식당 | RSTNT | Restaurants |
-| 식물 | PLNT | Plant |
-| 식별 | IDNTF | Identification |
-| 식비 | FDEXP | Food Expenses |
-| 식사 | MEAL | Meal |
-| 식생 | VGTTN | Vegetation |
-| 식성 | TASTE | Taste |
-| 식수 | DRWT | Drinking Water |
-| 식품 | FOOD | Food |
-| 신고 | DCLR | Declaration |
-| 신규 | NEW | New |
-| 신뢰 | CNFDNC | Confidence |
-| 신설 | NBLDP | New Build Up |
-| 신속 | RPD | Rapid |
-| 신용 | CRDT | Credit |
-| 신원 | IDTY | Identity |
-| 신청 | APLY | Apply |
-| 신체 | BDY | Body |
-| 신축 | NWCN | New Constuction |
-| 신탁 | TRUST | Trust |
-| 신호 | SGNL | Signal |
-| 실내 | IND | Indoor |
-| 실명 | RLNM | Real Name |
-| 실무 | PWRK | Practical Work |
-| 실사 | ACINSP | Actual Inspection |
-| 실습 | PRCTC | Practice |
-| 실시 | ENFRC | Enforcement |
-| 실외 | TOSD | The Outside |
-| 실장 | DVSLD | Division Leader |
-| 실적 | PRFMNC | Performance |
-| 실제 | ACTL | Actual |
-| 실측 | RLMSR | Real Measurement |
-| 실태 | ACCND | Actual Condition |
-| 실패 | FAIL | Failure |
-| 실행 | EXCN | Execution |
-| 실황 | LIVE | Live |
-| 실효 | ACEF | Actual Effect |
-| 심각 | SRUS | Serious |
-| 심사 | SRNG | Screening |
-| 심의 | DLBR | Deliberation |
-| 심층 | DEPTHS | The Depths |
-| 아동 | CHLDRN | Children |
-| 아종 | SSPECS | (Biological) Subspecies |
-| 악성 | MLGN | Malignant |
-| 악취 | ODOR | Odor |
-| 안개 | FOG | Fog |
-| 안건 | AGND | Agenda |
-| 안내 | GD | Guide |
-| 안분 | PRDV | Proportional Division |
-| 안전 | SFTY | Safety |
-| 알람 | ALRM | Alarm |
-| 알림 | NTI | Notice |
-| 암거 | UNDDRN | Underdrain |
-| 암반 | BLOCK | Bedlock |
-| 암석 | ROK | Rock |
-| 압력 | PRSUR | Pressure |
-| 압류 | SZR | Seizure |
-| 압축 | CMPRS | Compression |
-| 애로 | DFCL | Difficulty |
-| 액비 | LIQFER | Liquid Fertilizer |
-| 액상 |  |  |
-| 액체 | LQD | Liquid |
-| 야간 | NGHT | Night |
-| 야생 | WLDNS | Wildness |
-| 약관 | TRMS | Terms |
-| 약국 | PMCY | Pharmacy |
-| 약도 | RGHMP | Rough Map |
-| 약식 | INFML | Informality |
-| 약어 | ABBR | Abbreviation |
-| 약정 | STPL | Stipulation |
-| 약품 | MDCN | Medicine |
-| 양도 | CNVYN | Conveyance |
-| 양력 | SLCL | Solar Calendar |
-| 양성 | NRTR | Nurture |
-| 양수 | AQST | Acquisition |
-| 양식 | FORM | Form |
-| 양육 | BRUP | Bringing-Up |
-| 어도 | FSHWY | A Fishway |
-| 어류 | FSH | Fish |
-| 어선 | FSBT | Fishing Boat |
-| 어업 | FSHRY | Fishery |
-| 어음 | PRMNT | Promissory Note |
-| 어종 | KDFSH | Kind Of Fish |
-| 언론 | MSSMD | Mass Media |
-| 언어 | LANG | Language |
-| 업무 | TASK | Task |
-| 업소 | BIZEST | Business Establishment |
-| 업종 | TPBIZ | Type Of Business |
-| 업체 | BZENTY | Business Entity |
-| 업태 | BZSTAT | Business Status |
-| 엑셀 | EXCEL | Excel |
-| 엔진 | ENGN | Engine |
-| 여과 | FILTR | Filteration |
-| 여부 | YN | Yes Or No |
-| 여비 | TRVEXP | Traveling Expenses |
-| 여성 | FML | Female |
-| 여울 | RPDS | Rapids (Ina River) |
-| 여유 | RLXD | Relaxed |
-| 여행 | TRVL | Travel |
-| 역량 | CPBL | Capability |
-| 역률 | PWRFTR | Power Factor |
-| 역할 | ROLE | Role |
-| 연간 | ANL | Annual |
-| 연결 | LNKG | Linkage |
-| 연계 | LINK | Link |
-| 연관 |  |  |
-| 연구 | RSCH | Research |
-| 연금 | PN | Pension |
-| 연대 | SLDT | Solidarity |
-| 연도 | YR | Year |
-| 연동 | ITRCK | Interlock |
-| 연락 | CNCT | Contact |
-| 연령 | AGE | Age |
-| 연료 | FUEL | Fuel |
-| 연못 | POND | Pond |
-| 연번 |  |  |
-| 연보 | ANNLS | Annuals |
-| 연봉 | ANLSL | Annual Salary |
-| 연산 | ARTOPN | Arithmetic Operation |
-| 연소 | BURN | Burning |
-| 연속 | CNTIN | Continue |
-| 연수 | STDTRN | Study And Training |
-| 연식 | MDLYY | Model Year |
-| 연안 | COAST | Coast |
-| 연월 | YM | Year And Month |
-| 연임 | RPNTM | Reappointment |
-| 연장 | PRLG | Prolongation |
-| 연차 | ORDYR | Order Of Year |
-| 연체 | ARG | Arrearage |
-| 연혁 | CRNCL | Chronicle |
-| 열람 | PRSL | Perusal |
-| 열차 | TRAIN | Train |
-| 염도 | SLDNS | Salt Density |
-| 염소 | CHLOR | Chlorine |
-| 영구 | PRMCE | Permanence |
-| 영농 | FARMG | Farming |
-| 영문 | ENG | English |
-| 영업 | SALS | Sales |
-| 영역 | RLM | Realm |
-| 영치 | CSDY | Custody |
-| 영향 | IMPCT | Impact |
-| 영화 | MOVIE | Movie |
-| 예규 | ESTRL | Established Rule |
-| 예금 | SVG | Savings |
-| 예년 | AVRYR | Average Year |
-| 예문 | EXSNT | Example Sentence |
-| 예방 | PRVTN | Prevention |
-| 예보 | FRCST | Forecast |
-| 예비 | RSRV | Reserve |
-| 예산 | BGT | Budget |
-| 예상 | EXPC | Expect |
-| 예시 | EXM | Example |
-| 예약 | RSVT | Reservation |
-| 예외 | EXCP | Exception |
-| 예정 | PRNMNT | Prearrangement |
-| 예제 | EXRC | Exercise |
-| 예측 | PREDC | Prediction |
-| 예치 | DEPST | Deposit |
-| 예탁 | DPSTG | Depositing |
-| 오너 |  |  |
-| 오늘 | TD | Today |
-| 오니 |  |  |
-| 오류 | ERR | Error |
-| 오수 | DRTW | Dirty Water |
-| 오염 | PLLTN | Pollution |
-| 오일 | OIL | Oil |
-| 오전 | AM | Ante Meridiem |
-| 오존 | OZON | Ozone |
-| 오차 | EGAP | Error Gap |
-| 오픈 | OP | Open |
-| 오후 | AFN | Afternoon |
-| 옥내 | INDR | Indoor |
-| 옥외 | OTDR | Outdoor |
-| 온도 | TP | Temperature |
-| 와류 | VORTEX | Vortex |
-| 완납 | FLPY | Full Payment |
-| 완료 | CMPTN | Completion |
-| 완성 | FNL | Finalization |
-| 완제 | FLRPY | Full Repayment |
-| 외관 | APPRNC | Appearance |
-| 외국 | FRGN | Foreign Nation |
-| 외기 | OTAIR | Outside Air |
-| 외래 | FREGN | Foreign |
-| 외부 | OTSD | Outside |
-| 외상 | ONCR | On Credit |
-| 외식 | EATOUT | Eat Out |
-| 외자 | FRCPTL | Foreign Capital |
-| 외출 | GNOT | Going Out |
-| 외화 | FRCNCY | Foreign Currency |
-| 왼쪽 |  |  |
-| 요건 | RQMT | Requirement |
-| 요구 | RQT | Request |
-| 요금 | CRG | Charge |
-| 요령 | TCK | Trick |
-| 요소 | ELM | Element |
-| 요약 | SMRY | Summary |
-| 요양 | RCPR | Recuperation |
-| 요율 | TRF | Tariff |
-| 요인 | FCT | (Cause) Factor |
-| 요일 | DOW | Day Of The Week |
-| 요청 | DMND | Demand |
-| 욕실 | BTHRM | Bathroom |
-| 용기 | BOWL | Bowl |
-| 용도 | USG | Usage |
-| 용량 | CPCT | Capacity |
-| 용수 | USWTR | Using Water |
-| 용어 | TRM | Terminology |
-| 용역 | LBSVC | Labor Service |
-| 용지 | LDPL | Land Parcel |
-| 용출 | RSRGN | Resurgence |
-| 우려 | CNCRN | Concern |
-| 우선 | PRRTY | Priority |
-| 우수 | EXLN | Excellence |
-| 우안 | RGTBK | Right Bank |
-| 우점 | DMNC | Dominance |
-| 우측 | RGSD | Right Side |
-| 우편 | MAIL | Mail |
-| 우화 | EMRN | Emergence |
-| 운고 | HFTC | Height Of The Cloud |
-| 운동 | MVM | Movement |
-| 운량 | CLDQ | Cloud (Amount) |
-| 운반 | CRRG | Carriage |
-| 운송 | TRNSP | Transportation |
-| 운수 | TRANSP | Transportation |
-| 운영 | OPER | Operation |
-| 운임 | FARE | Fare |
-| 운전 | OPRN | Operation |
-| 운항 | NVGT | Navigation |
-| 운행 | OPR | Operation |
-| 운형 | CLDS | Cloud Designs |
-| 원가 | PRMCO | Prime Cost |
-| 원격 | REMT | Remote |
-| 원경 | DSTNVW | Distant View |
-| 원고 | PLNTF | Plaintiff |
-| 원금 | PRN | Principal |
-| 원료 | BMTRL | Base Material |
-| 원리 | PRNCP | Principle |
-| 원문 | ORGTXT | Original Text |
-| 원본 | ORGNL | Original |
-| 원수 | ORGWT | Origin'S Water |
-| 원시 | PRMTV | Primitive |
-| 원인 | CS | Cause |
-| 원장 | GNLGR | General Ledger |
-| 원점 | TRGNPT | Trigon Point |
-| 원천 | SOU | Source |
-| 원화 | KCUR | Korean Currency |
-| 월간 | MTHL | Monthly |
-| 월류 | WORFLW | (Water) Overflow |
-| 월별 | BMM | By Month To Month |
-| 월세 | MRNT | Monthly Rent |
-| 위도 | LAT | Latitude |
-| 위반 | VLTN | Violation |
-| 위배 |  |  |
-| 위생 | HGEN | Hygiene |
-| 위성 | STLT | Satellite |
-| 위원 | MBCMT | Member Of Committee |
-| 위임 | DLGT | Delegation |
-| 위촉 | ENTRST | Entrusting |
-| 위치 | PSTN | Position |
-| 위탁 | CNSGN | Consign |
-| 위험 | DNGR | Danger |
-| 유가 | OILPRC | Oil Price |
-| 유관 |  |  |
-| 유량 | VLFL | Volume Of Flow |
-| 유로 | FLWCNL | Flow Channel |
-| 유료 | CHRG | Charged |
-| 유리 | GLASS | Glass |
-| 유무 | EN | Existence And Nonexistence |
-| 유물 | RLC | Relic |
-| 유발 | INDC | Induce |
-| 유보 | DFR | Defer |
-| 유사 | SMLR | Similar |
-| 유상 | CMPNS | (Pay) Compensation |
-| 유선 | WRD | Wired |
-| 유속 | FVLC | Flow Velocity(Velocity Of A Moving Fluid) |
-| 유실 | LSWTR | Loss In Water |
-| 유압 | OLPRSR | Oil Pressure |
-| 유역 | BSN | Basin |
-| 유예 | PSTP | Postponement |
-| 유의 | CTN | Caution |
-| 유입 | INFLW | Inflow |
-| 유저 |  |  |
-| 유지 | KEEP | Keep |
-| 유찰 | FLBD | Failure In Bidding |
-| 유체 | FLUID | Fluid |
-| 유출 | OTFLW | Outflow |
-| 유통 | RTL | Retail |
-| 유해 | HRMFL | Harmful |
-| 유형 | TYPE | Type |
-| 유효 | VLD | Validity |
-| 육상 | OLAND | Overland |
-| 윤달 | LPMM | Leap Month |
-| 은행 | BANK | Bank |
-| 음력 | LNCL | Lunar Calendar |
-| 음성 | VOICE | Voice |
-| 음식 |  |  |
-| 음용 | DKPP | Drinking Purpose |
-| 음원 | SDSRC | A Sound Source |
-| 음주 | DRNK | Drinking |
-| 응급 | EMGNCY | Emergency |
-| 응답 | RSPNS | Response |
-| 응모 | ENTRY | Entry |
-| 응시 | TKEX | Take An Exam |
-| 의견 | OPNN | Opinion |
-| 의결 | DCS | Decision |
-| 의뢰 | RQST | Request |
-| 의료 | MDLCR | Medical Care |
-| 의류 | CLTHS | Clothes |
-| 의무 | OBLG | Obligation |
-| 의미 | MNNG | Meaning |
-| 의사 | DR | Doctor |
-| 의안 | PBIL | (Proposal) Bill |
-| 의제 |  |  |
-| 이격 | SEPR | Separation (Clearance) |
-| 이관 | TRNSF | Transfer |
-| 이내 | WTHN | Within |
-| 이동 | MVMN | Movement |
-| 이력 | HSTRY | History |
-| 이름 |  |  |
-| 이사 | MVHS | Move House |
-| 이상 | ANMLY | Anomaly |
-| 이송 | TRNFR | Transferred |
-| 이수 | CMCRS | Completion Of Course |
-| 이슈 | ISSUE | Issue |
-| 이연 | DFRD | Deferred |
-| 이온 | ION | Ion |
-| 이용 | UTZTN | Utilization |
-| 이월 | CRFW | Carry Forward |
-| 이유 |  |  |
-| 이윤 | PRFT | Profit |
-| 이율 | INRT | Interest Rate |
-| 이의 | OBJC | Objection |
-| 이익 | PRF | Profit |
-| 이자 | INT | Interest Charge |
-| 이전 | BFR | Before |
-| 이주 | MV | Move |
-| 이첩 | FRWD | Forwarding |
-| 이체 | TFR | Transfer |
-| 이하 | LSST | Less Than |
-| 이행 | IMPLT | Implementation |
-| 이혼 | DVRC | Divorce |
-| 이후 | AFTR | After |
-| 익명 | ANMT | Anonymity |
-| 익일 | NXDD | Next Day |
-| 인가 | SNCN | Sanction |
-| 인계 | HNOV | Handover |
-| 인공 | ARTFC | Artificial |
-| 인구 | PPLTN | Population |
-| 인근 | NRBY | Nearby |
-| 인당 | PS | Person |
-| 인도 | CNVYNC | Conveyance |
-| 인력 | MNPW | Manpower |
-| 인명 | HNL | Human Life |
-| 인물 | PRSN | Personage |
-| 인사 | HMRS | Human Resource |
-| 인산 | PHACID | Phosphoric Acid |
-| 인쇄 | PRINT | Print |
-| 인수 | ACPTN | Acceptance |
-| 인식 | AWRNS | Awareness |
-| 인원 | PEPL | People |
-| 인자 | FCTR | Factor |
-| 인접 | ADJC | Adjacent |
-| 인정 | RCG | Recognition |
-| 인증 | CERT | Certification |
-| 인지 | PRCPT | Perception |
-| 인체 | HMBD | Human Body |
-| 인허 |  |  |
-| 일괄 | EBLC | En Bloc |
-| 일기 |  |  |
-| 일문 | JPNS | Japanese Sentence |
-| 일반 | GNRL | General |
-| 일별 | BDAY | By Day |
-| 일본 | JPN | Japan |
-| 일비 | DLYEXP | Daily Expenses |
-| 일사 | SOLRD | Solar Radiation |
-| 일선 | FRLN | First Line |
-| 일시 | DT | Date And Time |
-| 일일 | DAILY | Daily |
-| 일자 | YMD | Year Month Day |
-| 일정 | SCHDL | Schedule |
-| 일조 | SNSH | Sunshine |
-| 일지 | DLYD | Daily Report |
-| 일치 | CCRNC | Concurrence |
-| 일터 |  |  |
-| 일할 | DBAS | Daily Basis |
-| 임기 | TNR | Tenure |
-| 임대 | RENT | Rent |
-| 임명 | NMNT | Nomination |
-| 임무 | MSSN | Mission |
-| 임시 | TMPR | Temporary |
-| 임신 | PRGN | Pregnancy |
-| 임야 | FSTLND | Forest Land |
-| 임업 | FSTR | Forestry |
-| 임용 | APNTMN | Appointment |
-| 임원 | EXC | Executive |
-| 임의 | RNDM | Random |
-| 임차 | HIRE | Hire |
-| 입고 | WRHS | Warehousing |
-| 입교 | ENTSCH | Entrance Into A School |
-| 입국 | ENTCNY | Entering A Country |
-| 입금 | DPST | Deposit |
-| 입대 | ENLSTM | Enlistment |
-| 입도 | GRNSZ | Grain Size |
-| 입력 | INPT | Input |
-| 입사 | JNCMP | Joining A Company |
-| 입산 | MTCG | Mountain-Climbing |
-| 입소 | ENTRC | Entrance |
-| 입수 | OBTN | Obtain |
-| 입실 | ENTRM | Entering A Room |
-| 입양 | ADP | Adoption |
-| 입원 | HSPTLZ | Hospitalization |
-| 입자 | PARTCL | Particle |
-| 입장 | ADMS | Admission |
-| 입주 | MVN | Moving In |
-| 입증 | PROV | Prove |
-| 입지 | PSTST | (Site) Position |
-| 입찰 | BID | Bid |
-| 입학 | MTCLTN | Matriculation |
-| 입항 | PTENT | Port Entry |
-| 입회 | ATWT | Attend And Witness |
-| 잉여 | SURPLS | Surplus |
-| 자가 | OSLF | Oneself |
-| 자갈 | GRVL | Gravel |
-| 자격 | QLFC | Qualification |
-| 자금 | FNDS | Funds |
-| 자녀 | CHLD | Children |
-| 자동 | AUTO | Automatic |
-| 자료 | DATA | Data |
-| 자립 | SRLNE | Self-Reliance |
-| 자막 | CAPTN | Caption |
-| 자문 | CNSTN | Consultation |
-| 자본 | CPT | Capital |
-| 자사 | MYCOMP | My Company |
-| 자산 | AST | Asset |
-| 자연 | NATR | Nature |
-| 자원 | RSRC | Resources |
-| 자율 | SLCR | Self-Control |
-| 자재 | MTRL | Materials |
-| 자체 | ONLF | Oneself |
-| 자택 | HOME | Home |
-| 작동 | OPRTG | Operating |
-| 작물 | CROP | Crop |
-| 작성 | WRT | Writing |
-| 작업 | JOB | Job |
-| 작품 | WRKS | Works |
-| 잔금 | BALNC | Balance |
-| 잔량 | RSDQNT | Residual Quantity |
-| 잔류 | REMN | Remaining |
-| 잔반 | LTVRS | Leftovers |
-| 잔식 | UNTFD | Uneaten Food |
-| 잔액 | BLNC | Balance |
-| 잔여 | RMND | Remainder |
-| 잔존 | RMN | Remain |
-| 잠금 | LCK | Locking |
-| 잠재 | LDRMNT | Lie Dormant |
-| 잡비 | MSEXP | Miscellaneous Expenses |
-| 잡종 | CRHY | Crossbreed Hybrid |
-| 장관 | MNST | Minister |
-| 장기 | LTRM | Long Term |
-| 장내 | ITHL | In The Hall |
-| 장부 |  |  |
-| 장비 | EQPMNT | Equipment |
-| 장소 | PLC | Place |
-| 장애 | DSBLTY | Disability |
-| 장외 | OTCNTR | Over The Counter |
-| 장착 | MNTNG | Mounting |
-| 장치 | DVC | Device |
-| 재개 | RSMP | Resumption |
-| 재결 | ADJD | Adjudication |
-| 재고 | INVT | Inventory |
-| 재난 | CLMTY | Calamity |
-| 재료 | MATRL | Material |
-| 재무 | FNNR | Financial Affair |
-| 재물 | RCHS | Riches |
-| 재발 | RECUR | Recur |
-| 재배 | CTVT | Cultivation |
-| 재산 | PRPT | Property |
-| 재원 | FNRS | Financial Resource |
-| 재정 | FNN | (Economy) Finance |
-| 재직 | HDOF | Hold Office |
-| 재진 | REXM | Re-Examination |
-| 재질 | MQLT | Material Quality |
-| 재택 | ATHM | At Home |
-| 재학 | INSCH | In School |
-| 재해 | DSTR | Disaster |
-| 쟁점 |  |  |
-| 저감 | MTGT | Mitigation |
-| 저류 | IMPD | Impound |
-| 저서 | WRBK | Writing Book |
-| 저자 | AUT | Author |
-| 저장 | STRG | Storage |
-| 저항 | RS | Resistance |
-| 적격 | ELGB | Eligibility |
-| 적발 | DSCL | Disclose |
-| 적산 |  |  |
-| 적설 | DSNW | Deep Snow |
-| 적요 | ABSTR | Abstract |
-| 적용 | APLCN | Application |
-| 적재 | LOAD | Load |
-| 적정 | RSNB | Reasonable |
-| 적중 | CMTR | Come True |
-| 적합 | STBLT | Suitability |
-| 전거 |  |  |
-| 전결 | DCARB | Deciding Arbitrarily |
-| 전공 | MJR | Major |
-| 전국 | NTWDE | Nationwide |
-| 전기 | PRVTM | Previous Term |
-| 전년 | PRYY | Previous Year |
-| 전단 | FRDED | Forward Edge |
-| 전달 | CNVY | Convey |
-| 전담 | EXCHG | Exclusive Charge |
-| 전도 | CDTN | Conduction |
-| 전등 |  |  |
-| 전략 | STRTG | Strategy |
-| 전력 | ELPWR | Electric Power |
-| 전류 | ERCRT | Electric Current |
-| 전망 | PRSPT | Prospect |
-| 전문 | TELGM | Telegram |
-| 전산 | EDP | Electronic Data Processing |
-| 전세 | LODB | Lease Of Deposit Basis |
-| 전송 | TRSM | Transmission |
-| 전시 | EXHB | Exhibition |
-| 전압 | VLTGE | Voltage |
-| 전역 | DCRG | Discharge |
-| 전용 | EXUSE | Exclusive Use |
-| 전원 | SELCT | Source Of Electricity |
-| 전월 | PRVMM | The Previous Month |
-| 전일 | PRVDY | The Previous Day |
-| 전입 | MVIN | Move In |
-| 전자 | ELTR | Electron |
-| 전주 | LSWEEK | Last Week |
-| 전지 | BATT | Battery |
-| 전체 | WHOL | Whole |
-| 전출 | MVOUT | Moving Out |
-| 전표 | SLIP | Slip |
-| 전화 | TEL | Telephone |
-| 전환 | SWTC | Switching |
-| 전회 | PRTRN | Previous Turn |
-| 절감 | RTRC | Retrenchment |
-| 절대 | CMPLTL | Completely |
-| 절사 | TRNC | Truncation |
-| 절약 | ECNMY | Economy(Save) |
-| 절차 | PROC | Procedure |
-| 점검 | CHCK | Check |
-| 점도 | VSC | Viscosity |
-| 점수 | SCR | Score |
-| 점용 | OCPY | Occupy |
-| 점유 |  |  |
-| 점포 | STOR | Store |
-| 접근 | ACS | Access |
-| 접속 | CNTN | Connection |
-| 접수 | RCPT | Receipt |
-| 접종 | INCLN | Inoculation |
-| 접촉 | CNTC | Contact |
-| 정격 | RGLT | Regularity |
-| 정기 | REGL | Regular |
-| 정년 | RTAG | Retirement Age |
-| 정답 | CRANS | Correct Answer |
-| 정당 | PLTPT | Political Party |
-| 정도 | ABT | About |
-| 정량 | QNTV | Quantitive |
-| 정렬 | SORT | Sort |
-| 정리 | ARNGMT | Arrangement |
-| 정면 | FRNT | Front |
-| 정밀 | PRCIS | Precision |
-| 정보 | INFO | Information |
-| 정부 | GOV | Government |
-| 정비 | MTNC | Maintenance |
-| 정산 | CLCLN | Calculation |
-| 정상 | NML | Normal |
-| 정수 | CLWR | Clean Water |
-| 정액 | FXAMT | Fixed Amount |
-| 정원 | PSCP | Personnel Capacity |
-| 정의 | DEF | Definition |
-| 정전 | OTG | Outage |
-| 정정 | CRCTN | Correction |
-| 정제 | REFINE | Refining |
-| 정지 | STOP | Stop |
-| 정책 | PLCY | Policy |
-| 정체 | STGNTN | Stagnation |
-| 정화 | PRFCTN | Purification |
-| 제거 | RMVL | Removal |
-| 제곱 | SQ | Square (Of) |
-| 제공 | PVSN | Provision |
-| 제기 | RAIS | Raise |
-| 제도 | SYST | (Policy) System |
-| 제목 | TTL | Title |
-| 제방 | LEV | Levee |
-| 제보 | TPOF | Tip Off |
-| 제안 | PRP | Proposal |
-| 제약 | RSTRCT | Restriction |
-| 제어 | CNTL | Control |
-| 제외 | EXCL | Exclusion |
-| 제원 | SPEC | Specifications |
-| 제작 | FBCTN | Fabrication |
-| 제재 | RSTRC | Restriction |
-| 제정 | ENCT | Enactment |
-| 제조 | MNFTR | Manufacture |
-| 제체 | LVBD | Levee Body |
-| 제출 | SBMSN | Submission |
-| 제품 | PRDCT | Product |
-| 제한 | LMT | Limit |
-| 제휴 | AFLT | Affiliation |
-| 조건 | CND | Condition |
-| 조경 | LDHC | Landscape Architecture |
-| 조기 | ERLY | Early |
-| 조달 | PRCM | Procurement |
-| 조류 | BIRDS | Birds |
-| 조명 | LGHT | Light |
-| 조문 | LPRVS | Legal Provision |
-| 조사 | EXMN | Examination |
-| 조석 | TIDE | Tide |
-| 조성 | MKNG | Making |
-| 조식 | BRKF | Breakfast |
-| 조위 | TDLV | Tide Level |
-| 조작 | HNDLG | Handling |
-| 조절 | RGLTE | Regulate |
-| 조정 | AJMT | Adjustment |
-| 조직 | OGNZ | Organization |
-| 조치 | ACTN | Action |
-| 조합 | ASCT | Association |
-| 조항 | CLUS | Clause |
-| 조회 | INQ | Inquiry |
-| 존속 | CNEXS | Continue To Exist |
-| 존재 | EXST | Existence |
-| 존폐 | MTNABN | Maintenance Or Abolition |
-| 졸업 | GRDTN | Graduation |
-| 종결 | TRMN | Termination |
-| 종교 | RLGN | Religion |
-| 종료 | END | End |
-| 종류 | KND | Kind |
-| 종목 | CLS | Class |
-| 종별 | BKND | By Kind |
-| 종이 | PPR | Paper |
-| 종일 | ALDY | All Day |
-| 종자 | SEED | Seed |
-| 종점 | EDPNT | End Point |
-| 종합 | SNTHS | Synthesize |
-| 좋음 | GOOD | Good |
-| 좌석 | SEAT | Seat |
-| 좌안 | LFTBK | Left Bank |
-| 좌측 | LSD | Left Side |
-| 주간 | DDTM | Daytime |
-| 주거 |  |  |
-| 주관 | SPRVSN | Supervision |
-| 주기 | CYCLE | Cycle |
-| 주말 | WKND | Weekend |
-| 주무 | ICHG | In Charge Of |
-| 주문 | ORDR | Order |
-| 주민 | RSDR | Resident Person |
-| 주변 | ARND | Around |
-| 주석 | ANTN | Annotation |
-| 주소 | ADDR | Address |
-| 주수 | WKCNT | Week Count |
-| 주식 | STCK | Stock |
-| 주심 | CRFR | Chief Referee |
-| 주요 | MAIN | Main |
-| 주유 | RFL | Refueling |
-| 주의 | CUTN | Caution |
-| 주입 | INJCT | Injection |
-| 주제 | TPC | Topic |
-| 주주 | STHD | Stockholder |
-| 주차 | PRK | Parking |
-| 주체 | MNBD | Main Body |
-| 주최 | HST | Host |
-| 주키 |  |  |
-| 주택 | HS | House |
-| 준공 | CMCN | Completion Of Construction |
-| 준비 | PREPR | Preparation |
-| 준설 | DRDGN | Dredging |
-| 준수 | CMPLY | Comply |
-| 중간 | MD | Middle |
-| 중개 | MDT | Mediation |
-| 중계 | RLY | Relay |
-| 중고 | USED | Used |
-| 중국 | CHIN | China |
-| 중기 | MLTRM | Middle Term |
-| 중단 | ITRP | Interruption |
-| 중도 | MDWY | Midway |
-| 중량 | WGHT | Weight |
-| 중문 | CHNS | Chinese Sentence |
-| 중복 | DPCN | Duplication |
-| 중식 | LUNCH | Lunch |
-| 중심 | CEN | Central |
-| 중앙 | CTRL | Central |
-| 중요 | IMPT | Important |
-| 중점 | EMPHS | Emphasis |
-| 중증 | SVRLY | Severely |
-| 중지 | HLT | Halt |
-| 중층 | MDCL | Middle Class |
-| 증가 | INCRS | Increase |
-| 증감 | ICDC | Increase And Decrease |
-| 증권 | SCRT | Securities |
-| 증기 | STM | Steam |
-| 증량 | AGMNT | Augmentation |
-| 증명 | ECTFN | (Evidence) Certification |
-| 증발 | VPRZN | Vaporization |
-| 증빙 | EVDNC | Evidence |
-| 증상 | SMPTM | Symptom |
-| 증설 | XBLDP | Extension Build Up |
-| 증식 | PRLRT | Proliferation |
-| 증액 | ICAMT | Increased Amount |
-| 지구 | DSTRCT | District |
-| 지급 | GIVE | Give |
-| 지도 | MAP | Map |
-| 지령 | DRTV | Directive |
-| 지로 | GIRO | Giro |
-| 지류 | TRBTR | Tributary |
-| 지면 | GROND | Ground |
-| 지목 | LDCG | Land Category |
-| 지반 | BSGR | Base Ground |
-| 지방 | LCL | Local |
-| 지번 | LOTNO | Lot Number |
-| 지분 | SHR | Share |
-| 지불 | DFRY | Defrayal |
-| 지붕 | ROOF | Roof |
-| 지사 | BROF | Branch Office |
-| 지상 | GRND | Ground |
-| 지세 | TPGPH | Topography |
-| 지속 | SSTN | Sustain |
-| 지수 | IDX | Index |
-| 지시 | DRCTN | Direction |
-| 지식 | KNWL | Knowledge |
-| 지역 | RGN | Region |
-| 지연 | DLY | Delay |
-| 지열 | TRHT | Terrestrial Heat |
-| 지원 | SPRT | Support |
-| 지적 | PTOUT | Point Out |
-| 지점 | BRNCH | Branch |
-| 지정 | DSGN | Designation |
-| 지진 | ERTHQK | Earthquake |
-| 지질 | GEOLG | Geology |
-| 지체 |  |  |
-| 지출 | EXPND | Expenditure |
-| 지침 | GUIDNC | Guidance |
-| 지표 | IDCT | Indicator |
-| 지하 | UDGD | Underground |
-| 지형 | TRRN | Terrain |
-| 직경 | DIA | Diameter |
-| 직군 | JGRP | Job Group |
-| 직급 | JBGD | Job Grade |
-| 직렬 | JBSRS | Job Series |
-| 직류 | TPOC | Type Of Occupation |
-| 직무 | DUTY | Duty |
-| 직업 | CR | Career |
-| 직영 | DROPER | Direct Operation |
-| 직원 | EMP | Employee |
-| 직위 | JBPS | Job Position |
-| 직인 | OFSL | Office Seal |
-| 직장 | WRC | Workplace |
-| 직접 | DRCT | Direct |
-| 직제 | OFORG | Office Organization |
-| 직종 | OCPT | Occupation |
-| 직책 | JBTTL | Job Title |
-| 직통 | DRLN | Direct Line |
-| 진단 | DGNS | Diagnosis |
-| 진도 | PRGD | Progress Degree |
-| 진동 | VBRT | Vibration |
-| 진료 | MDEXM | Medical Examination |
-| 진입 | ACCS | Access |
-| 진행 | PRGRS | Progress |
-| 질량 | MSS | Mass |
-| 질문 | QSTN | Question |
-| 질병 | DSS | Disease |
-| 질의 | INQRY | Inquiry |
-| 집계 | TOT | Total |
-| 집광 | CRTL | Concentrate Light |
-| 집중 | FCUS | Focus |
-| 집행 | IMPL | Implementation |
-| 집회 | GTHR | Gathering |
-| 징계 | DSPN | Disciplinary Punishment |
-| 징구 | CLRQ | Collection Request |
-| 징수 | CLCTN | Collection |
-| 쪽지 | NOTE | Note |
-| 차감 | SBTR | Subtraction |
-| 차관 | VMNST | Vice-Minister |
-| 차기 | NXTM | Next Term |
-| 차단 | SHTOT | Shut Out |
-| 차량 | VHCL | Vehicle |
-| 차로 | LANE | Lane |
-| 차변 | DBSD | The Debit Side |
-| 차선 | TRFLN | Traffic Lane |
-| 차수 | CYCL | Cycle |
-| 차압 | PSD | Pressure Difference |
-| 차액 | DFAMT | Difference Amount |
-| 차이 | DIFF | Difference |
-| 차입 | BRW | Borrowing |
-| 차종 | CARMDL | Car Model |
-| 차집 | ICPTG | Intercepting |
-| 차축 | AXLE | An Axle |
-| 차트 | CHRT | Chart |
-| 착공 | BGNCST | Begin Construction |
-| 착수 | OTST | Outset |
-| 착정 | BRNG | Boring |
-| 찬반 | FRAGN | For And Against |
-| 참고 | REF | Reference |
-| 참석 | ATND | Attendance |
-| 참여 | PTCP | Participation |
-| 참조 | RFRNC | Reference |
-| 창고 | WRHUS | Warehouse |
-| 창업 | STUP | Start Up |
-| 채광 | BWL | Be Well-Lighted |
-| 채권 | BND | Bond |
-| 채널 | CHNL | Channel |
-| 채무 | DBT | Debt |
-| 채수 | WTSMP | Water Sampling |
-| 채용 | RCRUT | Recruit |
-| 채점 | GRDG | Grading |
-| 채집 | CLLT | Collect |
-| 채취 | PCKNG | Picking |
-| 채택 | ADPT | Adoption |
-| 채혈 | BLDGTH | Blood-Gathering |
-| 책임 | RSP | Responsibility |
-| 책자 | BKLET | Booklet |
-| 처리 | PRCS | Process |
-| 처방 | PRSC | Prescription |
-| 처분 | DSPS | Disposition |
-| 척도 | YDST | Yardstick |
-| 철거 | DMLTN | Demolition |
-| 철관 | IRPP | An Iron Pipe |
-| 철회 | RCNTT | Recantation |
-| 첨두 | PEAK | Peak |
-| 첨부 | ATCH | Attachment |
-| 청구 | CLM | Claim |
-| 청렴 | INTGRT | Integrity |
-| 청문 | HRNG | Hearing |
-| 청소 | CLEAN | Cleaning |
-| 청약 | SBSC | Subscription |
-| 청정 | CLEN | Clean |
-| 청취 | LSTN | Listening |
-| 청탁 | SLCT | Solicitation |
-| 체결 | CNCLS | Conclusion |
-| 체계 | SYSTM | System |
-| 체납 | NPMNT | Nonpayment |
-| 체류 | STAY | Stay |
-| 체적 | VLM | (Capacity) Volume |
-| 체크 | BCHCK | (Basic) Check |
-| 체험 | EXPRN | Experience |
-| 초과 | EXCS | Excess |
-| 초기 | INITL | Initial |
-| 초당 | PRSEC | Per Second |
-| 초록 | ABST | Abstract |
-| 초상 | FRSTSS | First Frost Of Season |
-| 초지 | GRSLND | Grassland |
-| 초진 | FMEXM | First Medical Examination |
-| 총계 | TSM | Summation |
-| 총괄 | OVRL | Overall |
-| 총서 | SRS | Series |
-| 총액 |  |  |
-| 총인 | TPH | Total Phosphorus |
-| 총종 | TNSPCS | Total Species |
-| 총쪽 | TPAGE | Total Pages |
-| 촬영 | SHT | Shooting |
-| 최고 | HGHST | Highest |
-| 최근 | RCNT | Recent |
-| 최대 | MAX | Maximum |
-| 최소 | MIN | Minimum |
-| 최신 | LTST | Latest |
-| 최저 | LOWST | Lowest |
-| 최적 | OPTMM | Optimum |
-| 최종 | LAST | Last |
-| 최초 | FRST | First |
-| 추가 | ADD | Addition |
-| 추계 | ESTM | Estimating |
-| 추세 | TRND | Trend |
-| 추심 | EXCT | Exaction |
-| 추인 | CNFRM | Confirmation |
-| 추적 | TRC | Trace |
-| 추정 | PRSMP | Presumption |
-| 추진 | PRPL | Propulsion |
-| 추천 | RCMDTN | Recommendation |
-| 추첨 | LTRY | Lottery |
-| 추출 | EXTR | Extraction |
-| 축냉 | CLDST | Cold Storage |
-| 축분 | LIVEMR | Livestock Manure |
-| 축사 | CTSHD | Cattle Shed |
-| 축산 | LVST | Livestock |
-| 축제 | FSTVL | Festival |
-| 축종 | DASPCS | Domestic Animal Species |
-| 축척 | RDSCL | Reduced Scale |
-| 출고 | SPMT | Shipment |
-| 출구 | EXIT | Exit |
-| 출국 | DPTCNY | Departure From A Country |
-| 출근 | GTWK | Go To Work |
-| 출금 | TKMNY | Taking Out Money |
-| 출동 | DSPT | Dispatched |
-| 출력 | OTPT | Output |
-| 출발 | DPTRE | Departure |
-| 출산 | CHLDB | Childbirth |
-| 출생 | BRTH | Birth |
-| 출석 | ATNDC | Attendance |
-| 출시 | RELSE | Release |
-| 출연 | CTRB | Contribution |
-| 출원 | APPL | Application |
-| 출입 | ENEX | Entrance And Exit |
-| 출자 | INVST | Investment |
-| 출장 | BZTRP | Business Trip |
-| 출제 | STXQ | Setting Exam Questions |
-| 출처 | SRC | Source |
-| 출판 | PBLSG | Publishing |
-| 출하 | CON | Con |
-| 출항 | DFPT | Departure From Port |
-| 출현 | APRC | Appearance |
-| 충당 | APRP | Appropriation |
-| 충돌 | CRASH | Crash |
-| 충전 | CHARG | Charging |
-| 충족 | STSF | Satisfaction |
-| 취급 | HNDL | Handling |
-| 취득 | ACQS | Acquisition |
-| 취미 | HBY | Hobby |
-| 취소 | RTRCN | Retraction |
-| 취수 | WTRIT | Water-Intake |
-| 취약 | FRGLTY | Fragility |
-| 취업 | EMPM | Employment |
-| 취임 | INGR | Inauguration |
-| 취지 | INTN | Intent |
-| 취하 | DISCON | Discontinuance |
-| 취합 | GTRG | Gathering |
-| 측량 | SVY | Surveying |
-| 측면 | SIDE | Side |
-| 측선 | SDTRCK | Sidetrack |
-| 측점 | MSREPT | A Measuring Point |
-| 측정 | MSRMT | Measurement |
-| 층수 | NOFL | The Number Of Floors |
-| 치료 | MDTRT | Medical Treatment |
-| 치어 | YGFISH | Young Of Fishes |
-| 친수 | HDRPL | Hydrophile |
-| 친화 | FRSHP | Friendship |
-| 침수 | FLDNG | Flooding |
-| 침하 | SSDCE | Subsidence |
-| 침해 | INFR | Infringement |
-| 카드 | CARD | Card |
-| 커버 |  |  |
-| 컬럼 | COL | Column |
-| 코드 | CD | Code |
-| 콘도 | CONDO | Condominium |
-| 쿠폰 | CPN | Coupon |
-| 쿼터 | QTA | Quota |
-| 퀴즈 | QZ | Quiz |
-| 크기 | SZ | Size |
-| 클릭 | CLCK | Click |
-| 타사 | OCMP | Other Company |
-| 탁도 | TRBT | Turbidity |
-| 탄소 | CRBN | Carbon |
-| 탈거 | CRYOFF | Carry Off |
-| 탈락 | ELMT | Elimination |
-| 탈수 | DHDR | Dehydration |
-| 탈착 | DPTN | Desorption |
-| 탈퇴 | WHDWL | Withdrawal |
-| 탐사 | EXPLR | Exploration |
-| 탑승 | BRDG | Boarding |
-| 태그 | TAG | Tag |
-| 태풍 | TYPHN | Typhoon |
-| 터널 | TNL | Tunnel |
-| 토론 | DSCS | Discussion |
-| 토목 | ENGRK | Engineering Works |
-| 토사 | ETND | Earth And Sand |
-| 토양 | SOIL | Soil |
-| 토익 | TOEIC | Test Of English For International Communication |
-| 토지 | LAND | Land |
-| 톤수 | TON | Tonnage |
-| 통계 | STATS | Statistics |
-| 통과 | PAS | Pass |
-| 통관 | CSCL | Customs Clearance |
-| 통보 | NTFCTN | Notification |
-| 통신 | CMN | Communication |
-| 통일 | UNFCTN | Unification |
-| 통제 | CNTRL | Control |
-| 통지 | AVTSMT | Avertissement |
-| 통합 | INTG | Integration |
-| 통화 | CALL | Call |
-| 퇴거 | EVCT | Eviction |
-| 퇴근 | LVWK | Leave Work |
-| 퇴비 | CMPS | Compost |
-| 퇴사 | RSGNTN | Resignation |
-| 퇴소 | DSCG | Discharge |
-| 퇴실 | LVRM | Leaving The Room |
-| 퇴원 | DFHSP | Discharged From Hospital |
-| 퇴직 | RTRM | Retirement |
-| 투과 | PENTR | Penetration |
-| 투약 | MDCT | Medication |
-| 투입 | INPUT | Input |
-| 투자 | IVST | Investment |
-| 투찰 | BDNG | Bidding |
-| 투표 | VOTE | Vote |
-| 트럭 | TRCK | Truck |
-| 특기 | SPCLT | Specialty |
-| 특례 | SPCS | Special Case |
-| 특별 | SPC | Special |
-| 특보 | SPNWS | Special News |
-| 특성 | CHRTC | Characteristic |
-| 특수 | SPCL | Special |
-| 특약 | SPPRV | Special Provision |
-| 특이 | EXCPTN | Exception |
-| 특정 | PTCLR | Particular |
-| 특징 | GNCHC | (General) Characteristic |
-| 특허 | PTNT | Patent |
-| 팀장 | TMLDR | Team Leader |
-| 파견 | SND | Send |
-| 파고 | WVHGT | Wave Height |
-| 파기 | DSTRC | Destruction |
-| 파산 | BNKRP | Bankruptcy |
-| 파손 | BRKG | Breakage |
-| 파일 | FILE | File |
-| 판결 | JDGM | Judgment |
-| 판독 | INTERP | Interpretation |
-| 판매 | NTSL | Net Sales |
-| 판정 | JGMT | Judgement |
-| 팝업 | POPUP | Popup |
-| 패류 | SHLFSH | Shellfish |
-| 패소 | LSCS | Lose A Case |
-| 패스 |  |  |
-| 패턴 | PTTN | Pattern |
-| 팩스 | FAX | Fax |
-| 펀드 | FUND | Fund |
-| 펌프 | PUMP | Pump |
-| 페놀 | PHNL | Phenol |
-| 편성 | FRMT | Formation |
-| 편입 | ENRL | Enrollment |
-| 편집 | EDIT | Edit/ Editing |
-| 편차 | DVT | Deviation |
-| 평가 | EVL | Evaluation |
-| 평균 | AVG | Average |
-| 평면 | PLANE | Plane |
-| 폐간 | DSCT | Discontinuation |
-| 폐강 | CLCTR | Closing Lecture |
-| 폐국 |  |  |
-| 폐기 | DSCD | Discard |
-| 폐쇄 | CLSG | Closing |
-| 폐수 | WWT | Waste Water |
-| 폐업 | CLSBIZ | Closing Of Business |
-| 폐열 | EXSH | Exhaust Heat |
-| 폐지 | ABL | Abolition |
-| 포괄 | CMPH | Comprehend |
-| 포기 | ABND | Abandonment |
-| 포럼 | FRUM | Forum |
-| 포맷 |  |  |
-| 포상 | RWRD | Reward |
-| 포장 | PCKGN | Packaging |
-| 포집 | SPCR | Speicherung |
-| 포트 | PORT | Port |
-| 포함 | INCL | Inclusion |
-| 포화 | STRN | Saturation |
-| 포획 | CPTR | Capture |
-| 폭발 | EPLS | Explosion |
-| 폰트 | FNT | Font |
-| 폴더 | FLDR | Folder |
-| 표고 | ELVTN | Elevation |
-| 표기 | MARK | Marking |
-| 표면 | SRFC | Surface |
-| 표본 | SAMPLE | Sample |
-| 표시 | INDCT | Indication |
-| 표준 | STD | Standard |
-| 표지 | CVR | Cover |
-| 표출 | EXPRS | Expression |
-| 품목 | ITEM | Item |
-| 품의 | CNSL | Consultation |
-| 품종 | VRTY | Variety |
-| 품질 | QLT | Quality |
-| 풍력 | WPWR | Wind Power |
-| 풍속 | WSPD | Wind Speed |
-| 풍정 | WDDST | Wind Drift Distance |
-| 풍향 | WDRCT | Wind Direction |
-| 피고 | DFND | Defendant |
-| 피도 | CVRAGE | Cover (Age) |
-| 피해 | DAM | Damage |
-| 피혁 | LTHR | Leather |
-| 픽셀 | PXL | Pixel |
-| 필기 | NTTK | Note-Taking |
-| 필수 | ESNTL | Essential |
-| 필요 | NEED | Need |
-| 필지 | LTLND | Lot Of Land |
-| 필터 | FILT | Filter |
-| 하구 | RVMTH | River Mouth |
-| 하단 | LWND | Lower End |
-| 하도 | RVCRS | River Course |
-| 하류 | DNSTM | Downsteam |
-| 하상 | RVBD | A River Bed |
-| 하수 | SWAGE | Sewage |
-| 하안 | RVRSD | Riverside |
-| 하역 | LNL | Loading And Unloading |
-| 하위 | LWR | Lower |
-| 하자 | FLW | Flaw |
-| 하천 | RVR | River |
-| 하층 | LWCL | Lower Class |
-| 하폭 | WR | Width Of River |
-| 하한 | LLMT | The Lower Limit |
-| 하향 | DWNWRD | Downward |
-| 학과 | SCSBJT | School Subject |
-| 학교 | SCHL | School |
-| 학급 | CLAS | Class |
-| 학년 | SCYR | School Year |
-| 학력 | ACBG | Academic Background |
-| 학명 | STNM | Scientific Name |
-| 학생 | STDNT | Student |
-| 학술 | ACDM | Academic |
-| 학습 | LRN | Learning |
-| 학원 | PEIT | Private Educational Institute |
-| 학위 | DGR | Degree |
-| 학회 | ACSCT | Academic Society |
-| 한강 | HNRVR | Han River |
-| 한계 | MLMT | (Max) Limit |
-| 한국 | KOR | Korea |
-| 한글 | KORN | Korean (Language) |
-| 한도 | LIM | Limit |
-| 한문 | CLSCHN | Classical Chinese |
-| 한발 |  |  |
-| 한자 | CHNCRT | Chinese Character |
-| 할당 | ALOT | Allotment |
-| 할부 | IS | Installment |
-| 할인 | DSCNT | Discount |
-| 할증 | EXCHRG | Extra Charge |
-| 함량 |  |  |
-| 함수 | FNC | Function |
-| 함유 | CONTN | Contain |
-| 합격 | PASS | Pass |
-| 합계 | SUM | Sum |
-| 합병 | MERG | Merger |
-| 합산 | ADUP | Adding Up |
-| 합숙 | LDTG | Lodge Together |
-| 합의 | ACRD | Accord |
-| 항공 | AVTN | Aviation |
-| 항구 | PRT | Port |
-| 항만 | HRBR | Harbor |
-| 항목 | ARTCL | Article |
-| 항소 | APL | Appeal |
-| 항속 | CRSPD | Cruise Speed |
-| 항차 | VYG | Voyage |
-| 해당 | RLVT | Relevant |
-| 해면 | SSRFC | Sea Surface |
-| 해발 | ELVT | Elevation |
-| 해산 | DSBND | Disband |
-| 해석 | INTPR | Interpret |
-| 해설 | EXPL | Explain |
-| 해소 | RSLV | Resolve |
-| 해수 | SEAW | Seawater |
-| 해약 | CNCL | Cancellation |
-| 해양 | OCEAN | Ocean |
-| 해역 | OCE | Ocean |
-| 해외 | OVSEA | Overseas |
-| 해임 | DSMSL | Dismissal |
-| 해제 | RMV | Remove |
-| 해지 | CNCLTN | Cancellation |
-| 해체 | DSMT | Dismantlement |
-| 해촉 | DSMS | Dismissal |
-| 핵심 | KPNT | Key Point |
-| 행망 |  |  |
-| 행사 | EVNT | Event |
-| 행위 | ACT | Act |
-| 행정 | PBADMS | Public Administration |
-| 향후 | HCFH | Henceforth |
-| 허가 | PRMSN | Permission |
-| 허용 | PRM | Permit |
-| 현금 | CASH | Cash |
-| 현상 | PRSST | Present State |
-| 현안 | PDISS | Pending Issue |
-| 현원 | ACNO | Actual Number Of Employee |
-| 현장 | GRNDS | Grounds |
-| 현재 | NOW | Now |
-| 현지 | LOCAL | Local |
-| 현행 | EXSTN | Existing |
-| 현황 | PRST | Present Situation |
-| 혈압 | BDPR | Blood Pressure |
-| 협력 | CLBR | Collaboration |
-| 협약 | CVTN | Convention |
-| 협의 | CNSLTN | Consultation |
-| 협회 | ASOC | Association |
-| 형사 | CMLC | Criminal Case |
-| 형상 | CONF | Configuration |
-| 형식 | FRM | Formality |
-| 형태 | SHP | Shape |
-| 호봉 | SLCLS | Salary Class |
-| 호소 | LKMR | Lakes And Marshes |
-| 호안 | RVTMNT | Revetment |
-| 호우 | HRAIN | Heavy Rain |
-| 호출 | CLOT | Call Out |
-| 혼인 |  |  |
-| 혼입 | MIXTR | Mixture |
-| 혼합 | MIX | Mix |
-| 홍보 | PBRL | Public Relations |
-| 홍수 | FLOOD | Flood |
-| 화력 | THPWR | Thermal Power |
-| 화면 | SCRN | Screen |
-| 화물 | FRGHT | Freight |
-| 화소 |  |  |
-| 화일 |  |  |
-| 화재 | FIRE | Fire |
-| 화주 | SHPPR | Shipper |
-| 화폐 | CRNC | Currency |
-| 화학 | CHEM | Chemistry |
-| 확대 | EXPD | Expand |
-| 확률 | PRBBT | Probability |
-| 확보 | SECR | Secure |
-| 확산 | DFFSN | Diffusion |
-| 확인 | IDNTY | Identify |
-| 확장 | EXTND | Extend |
-| 확정 | CFMTN | Confirmation |
-| 환경 | ENV | Environment |
-| 환급 | RMBR | Reimbursement |
-| 환기 | VNTL | Ventilation |
-| 환매 | RPRCH | Repurchase |
-| 환불 | RFND | Refundment |
-| 환산 | CNVS | Conversion |
-| 환수 | RDM | Redemption |
-| 환원 | RVERT | Revert |
-| 환율 | EXCHRT | Exchange Rate |
-| 환입 | RTRN | Returns |
-| 환자 | PTN | Patient |
-| 환전 | CREX | Currency Exchange |
-| 활동 | ACTV | Activity |
-| 활성 | ACTVTN | Activation |
-| 활용 | UTLZ | Utilize |
-| 황사 | YLDST | Yellow Dust[Sand] |
-| 회계 | ACNTG | Accounting |
-| 회기 | SESN | Session |
-| 회복 | RCVRY | Recovery |
-| 회비 | MFEE | Membership Fee |
-| 회사 | CO | Company |
-| 회생 | RVVL | Revival |
-| 회선 | CRCUT | (Telephone/Telegraph) Circuit |
-| 회수 | RTRVL | Retrieval |
-| 회신 | RPLY | Reply |
-| 회원 | MBR | Member |
-| 회의 | MTG | Meeting |
-| 회장 | CHRMN | Chairman |
-| 회차 |  |  |
-| 횟수 | NMTM | Number Of Times |
-| 효과 | EFCT | Effect |
-| 효력 | EFECT | Effect |
-| 효율 | EFFC | Efficiency |
-| 후기 | LATP | The Latter Part |
-| 후보 | CNDT | Candidate |
-| 후원 | SPN | Sponsor |
-| 훈련 | TRNG | Training |
-| 훼손 | DMG | Damage |
-| 휴가 | VCT | Vacation |
-| 휴관 | CLSR | Closure |
-| 휴대 | MBL | Mobile |
-| 휴면 | DRMC | Dormancy |
-| 휴무 | DYOFF | Day Off |
-| 휴식 | RELX | Relax |
-| 휴양 | RLX | Relax |
-| 휴업 | TCBIZ | Temporary Close Of Business |
-| 휴일 | HLDY | Holiday |
-| 휴지 | PAUS | Pause |
-| 휴직 | LVABSN | Leave Of Absence |
-| 흡수 | ABSTN | Absorption |
-| 흡연 | SMK | Smoking |
-| 흡입 | INHL | Inhalation |
-| 희망 | HOPE | Hope |
-| 희석 | DLTN | Dilution |
-| 힌트 | HNT | Hint |
-| 가능량 | PSBQTY | Possible Quantity |
-| 가능성 | PSBTY | Possibility |
-| 가동률 | OPRT | Operation Rate |
-| 가동보 | OPRWR | Operating Weir |
-| 가두리 | CAGE | Cage |
-| 가맹점 | FRCS | Franchise |
-| 가산세 | ADDTX | Additional Tax |
-| 가산점 | ADSC | Additional Score |
-| 가속도 | ACCT | Acceleration |
-| 가수금 | SPRCP | Suspense Receipt |
-| 가압류 | PRAT | Provisional Attachment |
-| 가연성 | CMBSTB | Combustibility |
-| 가이드 | GUIDE | Guide |
-| 가입자 | SBSR | Subscriber |
-| 가정용 | HSHUS | Household Use |
-| 가중치 | WGVL | Weighted Value |
-| 가지급 | PRVPY | Provisional Payment |
-| 가지불 |  |  |
-| 가해자 | ASLNT | Assailant |
-| 간소화 | SMPLFC | Simplification |
-| 간접비 | IDRCO | Indirect Cost |
-| 간접세 | IDTX | indirect tax |
-| 간행물 | PBLC | Publication |
-| 간호사 | NRS | Nurse |
-| 갈수위 | DWTRLV | Droughty Water Level |
-| 감독자 | SPVSR | Supervisor |
-| 감리원 | SPVR | Supervisor |
-| 감리자 |  |  |
-| 감면율 | RDCRT | Reduction Rate |
-| 감사인 | ADTR | Auditor |
-| 감사자 |  |  |
-| 감정가 | APPRC | Appraised Price |
-| 감정값 |  |  |
-| 감축량 | RQTY | Reduction Quantity |
-| 강기슭 | RVRBNK | Riverbank |
-| 강수량 | RN | Rainfall |
-| 강우량 | AMRF | (The Amount Of) Rainfall |
-| 강의실 | LCTRM | Lecture Room |
-| 개발비 | DVLCO | Development Cost |
-| 개발자 | DVLPR | Developer |
-| 개월수 | MCNT | Month Count |
-| 개인별 | BINDV | By Individuals |
-| 객관식 | MLCH | Multiple Choice |
-| 거래소 | STCNG | Stock Exchange |
-| 거래자 | DLR | Dealer |
-| 거래처 | CNPT | Counterparty |
-| 거주지 | RSDC | Residence |
-| 건강성 | HLTHY | Healthy |
-| 건축물 | BDST | Buildings & Structures |
-| 건축주 | OWNER | (Architecture) Owner |
-| 건폐율 | BDCVRT | Building Coverage Ratio |
-| 검보정 | CVACT | Cal/Val Activity |
-| 검사소 | INSOFC | Inspection Office |
-| 검사원 | INSPTR | Inspector |
-| 검사자 | TSTR | Tester |
-| 검색어 | SRWRD | Search Word |
-| 검수자 | CHCKR | Checker |
-| 검증자 | VRIFER | Verifier |
-| 검토자 | RVWR | Reviewer |
-| 게시글 | PSTAT | Post Article |
-| 게시물 | PST | Post |
-| 게시자 | PBLR | Publisher |
-| 게시판 | BBS | Bulletin Board System |
-| 격자선 | GLINE | Grid Line |
-| 결과서 | RSTRPT | Results Report |
-| 결의서 | RSDOC | Resolution Document |
-| 결재선 | APLN | Approval Line |
-| 결재자 | APRVR | Approver |
-| 결측치 | MSVAL | Missing Value |
-| 경년관 | AGPIP | Aged Pipes |
-| 경사도 | GRAD | Gradient |
-| 경상자 | SLIPR | Slightly Injured Person |
-| 경영체 | BIZORG | Business Organization |
-| 경유국 | TRCTRY | Transit Country |
-| 경유지 | STPV | Stopover |
-| 경작면 |  |  |
-| 경제성 | ECNMFB | Economic Feasibility |
-| 경찰서 | POLSTN | Police Station |
-| 계곡수 | VLLWTR | Valley Water |
-| 계근대 |  |  |
-| 계량기 | MSINS | Measuring Instrument |
-| 계량대 | SCAL | Scale |
-| 계산서 | BLL | Bill |
-| 계산식 | CALFM | Calculation Formula |
-| 계수기 | COUNTR | Counter |
-| 계약서 | CTRTD | Contract Document |
-| 계약자 | CTRTR | Contractor |
-| 계약직 | CTWK | Contract Work |
-| 계측기 | MSRINS | Measuring Instrument |
-| 계통도 | SDGRM | System Diagram |
-| 계획량 | PLNQTY | Planned Quantity |
-| 계획서 | PLDOC | Planning Document |
-| 고농도 | HCNTR | High Concentration |
-| 고수위 | HWL | High Water Level |
-| 고유종 | ESP | Endemic Species |
-| 고지서 | NTDOC | Notice Document |
-| 고혈압 | HBPR | High Blood Pressure |
-| 고형물 | SLD | Solid |
-| 곡선식 | CRVFM | Curve Formula |
-| 골프장 | GC | Golf Course |
-| 공고자 | NOTIF | Notifier |
-| 공급량 | SQTY | Supply Quantity |
-| 공급원 | SRCSL | Source Of Supply |
-| 공급자 | SPLR | Supplier |
-| 공람자 | PDSPR | Public Display Person |
-| 공모전 | CNTEXH | Contest Exhibit |
-| 공무원 | PBOFC | Public Official |
-| 공문서 |  |  |
-| 공사비 | CNSCO | Construction Cost |
-| 공시가 | OFPRC | Official Notice Price |
-| 공용량 | EMPCPT | Empty Capacity |
-| 공작물 | STRCT | Structures |
-| 공정도 | PRCSDG | Process Diagram |
-| 공정률 | PRCRT | Process Rate |
-| 공휴일 | LHLDY | Legal Holiday |
-| 과부족 | OVSRT | Overs And Shorts |
-| 과수원 | OCD | Orchard |
-| 과오납 | OEPY | Overpayment Or Erroneous Payment |
-| 과징금 | SRCHG | Surcharge |
-| 과태료 | FFNLG | Fine For Negligence |
-| 관개전 | RFLD | Irrigation Field |
-| 관계식 | RLEXP | Relational Expression |
-| 관계인 |  |  |
-| 관계자 | RLPR | Related Person |
-| 관공서 | GVMNTF | Government Office |
-| 관광지 | TRSPT | Tourist Spot |
-| 관리비 | MNCO | Maintenance Cost |
-| 관리자 | MNGR | Manager |
-| 관리청 | MNAGC | Management Agency |
-| 관서장 | CGO | Chief Of Government Office |
-| 관세율 | TRFRT | Tariff Rate |
-| 관측소 | OBSVTR | Observatory |
-| 광화학 | PHTCH | Photochemistry |
-| 교부세 | SHTX | Shared Tax |
-| 교육비 | EDUCO | Educational Cost |
-| 교육생 | TRNE | Trainee |
-| 교육세 | EDUTX | Education Tax |
-| 교직원 | TSTF | The Teaching Staff |
-| 교통량 | TRFV | Traffic Volume |
-| 교통비 | TRNSCO | Transportation Cost |
-| 교통세 | TRTAX | Transportation Tax |
-| 교환국 |  |  |
-| 구매량 | PCHQTY | Purchased Quantity |
-| 구매자 | PRCHR | Purchaser |
-| 구매처 | PCPL | Purchasing Place |
-| 구성원 | GMBR | (Group) Member |
-| 구역내 | WTZN | Within Zone |
-| 구조물 | STRTS | Structures |
-| 구체성 | CCRTNS | Concreteness |
-| 국고금 | NTFND | National Funds |
-| 국내산 |  |  |
-| 권리금 | PRMM | Premium |
-| 권리자 | RTHDR | Rights Holder |
-| 귀화종 | NTSPCS | Naturalized Species |
-| 균등도 | EVNS | Evenness |
-| 그리드 | GRID | Grid |
-| 근로자 | WRKR | Worker |
-| 근무일 | WRKDY | Working Day |
-| 근무자 | STF | Staff |
-| 근무조 | WKTM | Working Team |
-| 근무지 | POWK | Place Of Work |
-| 근무처 | OPLEMP | One'S Place Of Employment |
-| 근저당 | FXCL | Fixed Collateral |
-| 글쓴이 |  |  |
-| 금수성 | WRPLCY | Water repellency (of waste) |
-| 금요일 | FRI | Friday |
-| 금칙어 | PHWRD | Prohibited Words |
-| 급수관 | FEEDP | Feed Pipe |
-| 급수량 | AMWTSP | Amount of Water Supply |
-| 급수전 | WTSTP | Water Supply Tap |
-| 기간별 | BPRD | By Period |
-| 기계식 | MCNCL | Mechanical |
-| 기관장 | INLDR | Institution Leader |
-| 기납부 | PVPY | Previously Payment |
-| 기념일 | ANVS | Anniversary |
-| 기능직 | TCJB | Technical Service Jobs |
-| 기록물 | RCDS | Records |
-| 기록부 | REGI | Register |
-| 기록자 | RCDR | Recorder |
-| 기본도 | BSDG | Basic Diagram |
-| 기본키 | PK | Primary Key |
-| 기부금 | AOD | Amount Of Donation |
-| 기부자 | CTBTR | Contributor |
-| 기부처 | CTBPL | Contribution Place |
-| 기상청 | KMA | Korea Meteorological Administration |
-| 기수종 | BRSPC | Brackish Species |
-| 기숙사 | DMTRY | Dormitory |
-| 기술료 | RLTY | Royalty |
-| 기술성 | TYFCY | Technology Efficiency |
-| 기술자 | ENGNR | Engineer |
-| 기술직 | ENJB | Engineering Jobs |
-| 기안자 | DRFR | Drafter |
-| 기압계 | MNMTR | Manometer |
-| 기업체 |  |  |
-| 기울기 |  |  |
-| 기자재 | MCMTR | Machinery And Materials |
-| 기준율 | STDRT | Standard Rate |
-| 기준점 | CRLPT | Control Point |
-| 기준치 | STDVAL | Standard Value |
-| 기증자 | DNR | Donor |
-| 기환급 | ARFND | Already Refund |
-| 기후부 |  |  |
-| 꼬리말 | FTR | Footer (Comment) |
-| 끓는점 | BPNT | Boiling Point |
-| 낙동강 | NDRVR | Nakdong River |
-| 낙차공 | DSTC | Drop Structure |
-| 낙찰률 | SCBRT | Successful Bid Rate |
-| 낙찰자 | SCBDR | Successful Bidder |
-| 난이도 | DFCTY | Difficulty (Degree) |
-| 남북한 | SANK | South And North Korea |
-| 남조류 | BLAL | Blue-Green Algae |
-| 납부자 | RTPYR | Ratepayer |
-| 납세자 | TXPR | Taxpayer |
-| 내국인 | DOMPL | Domestic People |
-| 내륙수 | INTWTR | Interior Waters |
-| 내부망 |  |  |
-| 내성종 | TRSPCS | Tolerance Species |
-| 내역서 | DTSTMN | Detailed Statement |
-| 냉각수 | CULWTR | Cooling Water |
-| 냉난방 | HAC | Heating And Cooling |
-| 노무비 | LBCO | Labor Cost |
-| 노트북 | NTBK | Notebook (Computer) |
-| 녹는점 | MPNT | Melting Point |
-| 농경지 | FMLND | Farmland |
-| 농어촌 | FFV | Farming And Fishing Villages |
-| 농업인 | FRMR | Farmer |
-| 농작물 | CRPS | Crops |
-| 농장주 | FRMER | Farm Owner |
-| 농축산 | AGST | Agriculture And Stockbreeding |
-| 농축조 | THCKNR | Thickener |
-| 누리집 | HMPG | Homepage |
-| 누수량 | LKQTY | Leakage Quantity |
-| 누출량 | LKGQTY | Leakage Quantity |
-| 닉네임 | NICK | Nick Name |
-| 다기능 | MTFN | Multifunctional |
-| 다양성 | DVRST | Diversity |
-| 다자녀 | MCHLD | Multi-Child |
-| 단계별 | BSTP | By Step |
-| 단답형 | SRQT | Short Questions |
-| 단말기 | TRMNL | Terminal |
-| 단면적 | CRSA | Cross Sectional Areas |
-| 단백질 | PROTN | Protein |
-| 단속자 | RGLTR | Regulator |
-| 단위별 | BUNIT | By Unit |
-| 달성도 | ACHDGR | Achievement Degree |
-| 달성량 | ACHQTY | Achieved Quantity |
-| 달성률 | ACMTRT | Achievement Rate |
-| 담당인 |  |  |
-| 담당자 | PIC | Person In Charge |
-| 담수화 | WTCON | Water Conversion |
-| 답변서 | ANSDOC | Answer Document |
-| 답변자 | ANSWR | Answerer |
-| 당사자 | CNCPR | Concerned Person |
-| 당직자 | DTPR | Duty Person |
-| 당첨자 | PZWNR | Prize Winner |
-| 대국민 | TNATN | To The Nation |
-| 대권역 | LSIRB | Large Sphere Of Influence In A River Basin |
-| 대기업 | LCO | Large Company |
-| 대기자 | WAITR | Waiting Person |
-| 대기질 | ARQLT | Air Quality |
-| 대리인 | AGT | Agent |
-| 대리자 |  |  |
-| 대리점 | AGNC | Agency |
-| 대분류 | LCLSF | Large-Scale Classification |
-| 대블록 | LBLK | Large Block |
-| 대상자 | TRPR | Target Person |
-| 대여자 | LNDR | Lender |
-| 대장균 | CLBCL | Colon Bacillus |
-| 대집행 | EBRXY | Execution By Proxy |
-| 대표자 | RPRSV | Representative |
-| 대학교 | UNIV | University |
-| 대학생 | UNVST | University Student |
-| 대학원 | GDSCHL | Graduate School |
-| 데이터 |  |  |
-| 도래지 | SSNH | Seasonal Home |
-| 도메인 | DMN | Domain |
-| 도서관 | LIB | Library |
-| 도수관 | WCNVP | Water Conveyance Pipe |
-| 도식도 | SCDG | Schema Diagram |
-| 도움말 | HLP | Help |
-| 도입종 |  |  |
-| 도착지 | DEST | Destination |
-| 도착항 | ARPT | Arrival Port |
-| 돌망태 | WRCLDR | Wire Cylinder |
-| 동거자 | RMMT | Roommate |
-| 동기화 | SYNC | Synchronization |
-| 동승자 | FLPS | Fellow Passenger |
-| 동식물 | ANPL | Animals And Plants |
-| 동영상 | VDO | Video |
-| 동의서 | WTCS | Written Consent |
-| 동의어 | SYNM | Synonym |
-| 동의자 | ASNTR | Assentor |
-| 동호회 | CLUB | Club |
-| 드렛지 | DRDG | Dredge |
-| 등기소 | RGOFC | Registry Office |
-| 등록세 | RGTX | Registration Tax |
-| 등록인 |  |  |
-| 등록자 | RGTR | Registrant |
-| 등록증 | REGC | Registration Certificate |
-| 디자인 | DDSGN | (Drawing) Design |
-| 디지털 | DGTL | Digital |
-| 디폴트 |  |  |
-| 레이더 | RADR | Radar |
-| 레이어 |  |  |
-| 레코드 | RCRD | Record |
-| 레포트 |  |  |
-| 로그인 | LGN | Login |
-| 리소스 | RSC | Resource |
-| 만수위 | FWTLV | Full Water Level |
-| 만족도 | DGSTFN | Degree Of Satisfaction |
-| 맞벌이 | DLICM | Dual Income |
-| 매뉴얼 | MNL | Manual |
-| 매립량 | LFDQTY | Landfilled Quantity |
-| 매립장 | GRLNDF | Garbage Landfill |
-| 매립지 | RCMLND | Reclaimed Land |
-| 매수인 |  |  |
-| 매수자 | BYR | Buyer |
-| 머리말 | PRFC | Preface |
-| 메모리 | MMRY | Memory |
-| 메세지 |  |  |
-| 메시지 | MSG | Message |
-| 면담자 | ITVWR | Interviewer |
-| 명명일 | NMCLT | Nomenclate |
-| 명명자 | NMCLTR | Nomenclator |
-| 명세서 | SPCFCD | Specification Document |
-| 모니터 | MNT | Monitor |
-| 모델링 | MDLN | Modelling |
-| 모바일 | MOBL | Mobile |
-| 모식도 | MIMIC | Mimic |
-| 목요일 | THUR | Thursday |
-| 목욕탕 | BTHHS | Bathhouse |
-| 목적세 |  |  |
-| 목적어 | OBJECT | Object |
-| 목적지 | DSTNST | Destination |
-| 목표량 | GLQTY | Goal Quantity |
-| 목표물 | MRK | Mark |
-| 무역업 | TRDB | Trade Business |
-| 무응답 | NRPLY | No Reply |
-| 무이자 | ZINT | Zero Interest |
-| 무제한 | UNLMT | Unlimit |
-| 무주택 | HMLS | Homeless |
-| 무피해 | NDMGE | Nothing Damage |
-| 문의처 | INQPL | Inquiring Place |
-| 문제점 | PBPT | Problem Point |
-| 문화재 | CLTPTY | Cultural Property |
-| 물건지 | RELC | Real Estate Location |
-| 물리적 | PHYSCL | Physical |
-| 미가동 | NORUN | No Run |
-| 미개설 | UDVLP | Undeveloped |
-| 미개통 | UOPN | UnOpened |
-| 미검사 | NINSP | No Inspection |
-| 미구축 | NBULD | Unbuilt |
-| 미급수 | NWSPLY | Non Water Supply |
-| 미달성 | NCHV | Nonachievement |
-| 미등록 | UNREG | Unregistration |
-| 미디어 | CMDIA | (Content) Media |
-| 미반영 | URFT | Unreflection |
-| 미반출 | NSHPGT | Non Shipping Out |
-| 미부과 | NLVY | Not Levy |
-| 미부착 | NTASN | Not Adhesion |
-| 미사용 | UNUSE | Unused |
-| 미상각 | UAMTZ | Unamortized |
-| 미상환 | NRPY | Non Repayment |
-| 미생물 | MCROG | Microorganism |
-| 미선정 | NSLCT | Non-Selection |
-| 미설치 | NOINS | No Installation |
-| 미수금 | ACNRCV | Accounts Receivable |
-| 미수납 | NRCP | Non-Receipt |
-| 미승인 | UNAPRV | Unapproved |
-| 미신고 | UNDCLR | Undeclared |
-| 미신청 | UNAPL | Unappplied |
-| 미실행 | NEXCN | Non Execution |
-| 미완료 | INCPL | Incomplete |
-| 미운행 | NOPRTN | Non Operation |
-| 미이행 | NFLFL | Non-Fulfillment |
-| 미작성 | NOSPEC | Not Specified |
-| 미적용 | DNAP | Does Not Apply |
-| 미전송 | NTST | Not Sent |
-| 미점검 | NPCTD | Uninspected |
-| 미제출 | UNSBM | Unsubmitted |
-| 미지급 | OTSPY | Outstanding Payment |
-| 미지정 | NDSN | Not Designation |
-| 미집행 | UNEX | Unexecuted |
-| 미처리 | UNPRCS | Unprocessed |
-| 미첨부 | UTCH | Unattachment |
-| 미추진 | UPMT | Unpromoted |
-| 미취득 | UCQS | Unacquisition |
-| 미포함 | NINCLS | Noninclusion |
-| 미허가 | UPRMSN | Un Permission |
-| 미확정 | UDTM | Undetermined |
-| 미환급 | UNRFND | Unrefunded |
-| 미활용 | UNUTL | Unutilized |
-| 미회수 | UNRT | Un-Retrieval |
-| 민감종 | STSPCS | Sensitiveness Species |
-| 민원인 | CVLPR | Civil Petitioner |
-| 바이오 | BIO | Bio |
-| 바코드 | BARCD | Bar-Code |
-| 박물관 | MSM | Museum |
-| 반송자 | RTRNR | Returner |
-| 반영량 | RFLQTY | Reflected Quantity |
-| 반올림 | ROUND | Rounding |
-| 반응조 | RETNK | Reactant  Tank |
-| 반입량 | CIVLM | Carry-In Volume |
-| 반출량 | COVLM | Carry-Out Volume |
-| 반출입 | CRRYIO | Carry In And Out |
-| 발간물 |  |  |
-| 발견지 | DCVRST | Discovery Site |
-| 발급자 | ISPR | Issuing  Person |
-| 발명자 | INVTR | Inventor |
-| 발생량 | AMTGNR | Amount Generated |
-| 발송인 |  |  |
-| 발송자 | SNDR | Sender |
-| 발신인 |  |  |
-| 발신자 | SNDPTY | Sending Party |
-| 발신처 | DSPL | Dispatch Place |
-| 발열량 | CLRVAL | Calorific Value |
-| 발원지 | SRCE | Source (Of A River) |
-| 발전기 | GNRTR | Generator |
-| 발전량 | ELTQTY | Electricity Generation Quantity |
-| 발전소 | PWPL | Power Plant |
-| 발주자 | ORDERR | Orderer |
-| 발주처 | ORDPL | Ordering Place |
-| 발표자 | PRSNTR | Presenter |
-| 발행인 |  |  |
-| 발행자 | ISR | Issuer |
-| 발행처 | ISPL | Issue Place |
-| 발화점 | IGPT | Ignition Point |
-| 방류구 | DWOT | Dewatering Outlets |
-| 방류량 | OTFL | Outflow |
-| 방류수 | EFLNT | Effluent |
-| 방문객 |  |  |
-| 방문자 | VSTR | Visitor |
-| 방법론 | MHDLG | Methodology |
-| 방사능 | RDACT | Radioactivity |
-| 방수로 | SPWY | A Spillway |
-| 방수위 | WTELV | Tailwater Elevation |
-| 방화벽 | FRWL | Firewall |
-| 배기량 | DSVLM | Displacement Volume |
-| 배달처 | DLDTN | Delivery Destination |
-| 배당금 | DVDND | Dividend |
-| 배송지 | DLVRPL | Delivery Place |
-| 배수관 | DRNP | Drain Pipe |
-| 배수문 | DRGT | Drainage Gate |
-| 배수지 | DTBRSV | Distribution Reservoir |
-| 배양체 | EBDY | Embryoid Body |
-| 배우자 | SPS | Spouse |
-| 배정자 | ALTMTR | Allotment Person |
-| 배출구 | OTLT | Outlet |
-| 배출권 | EMCRD | Emmision Credit |
-| 배출량 | EHQTY | Exhaust Quantity |
-| 배출수 | DCGWTR | Discharge Water |
-| 배출원 | EMSRC | Emission Source |
-| 배출자 | EMTR | Emitter |
-| 배치도 | LSKC | Layout Sketch |
-| 배터리 | BTRY | Battery |
-| 번역문 | TRNSN | Translation Sentence |
-| 번호판 | NOPLT | Number Plate |
-| 범람원 | FLDPLN | Flood Plain |
-| 법무사 | JDSCR | Judicial Scrivener |
-| 법인세 | COTX | Corporate Tax |
-| 법정동 | STDG | Statutory Dong(Administrative District) |
-| 법정리 | STLI | Statutory Li(Administrative District) |
-| 변경자 | CHNRG | Changer |
-| 변동량 | FLCQTY | Fluctuation Quantity |
-| 변동률 | FLCTNR | Fluctuation Rate |
-| 변호사 | LWYR | Lawyer |
-| 변화량 | CHQTY | Change Quantity |
-| 변환기 |  |  |
-| 병해충 | DIP | Disease And Insect Pest |
-| 보건소 | PHC | Public Health Center |
-| 보고량 | RPTQTY | Repoted Quantity |
-| 보고서 | RPTP | Report Paper |
-| 보고자 | RPTR | Reporter |
-| 보관량 | HDQTY | Held Quantity |
-| 보상금 | CPMNY | Compensation Money |
-| 보수자 | MENDER | Mender |
-| 보수적 | CSVT | Conservative |
-| 보안성 | PSCRTY | (Property) Security |
-| 보유량 | HLDQTY | Holding Quantity |
-| 보일러 | BLR | Boiler |
-| 보조금 | SBSIDY | Subsidy |
-| 보조비 | SBSDY | Subsidy |
-| 보좌관 | AIDE | Aide |
-| 보증금 | GTN | Guaranty Money |
-| 보증료 | GRFE | Guarantee Fee |
-| 보증서 | WTGR | Written Guarantee |
-| 보증인 | GRNR | Guarantor |
-| 보험료 | ISPM | Insurance Premium |
-| 보호자 | PRTCR | Protector |
-| 보호종 | PRSPCS | Protected Species |
-| 복잡성 | CMPXTY | Complexity |
-| 복호화 | DECD | Decoding |
-| 본거지 | STRHLD | Stronghold |
-| 본예산 | MBGT | Main Budget |
-| 봉사료 | SVCHG | Service Charge |
-| 부과금 | LVYAMT | Levy  Amount |
-| 부과량 | BMCPT | Billed metered consumption |
-| 부녀자 | WMAN | Woman |
-| 부담금 | BDNC | Burden Charge |
-| 부동산 | REST | Real Estate |
-| 부산물 | BYPRD | By-Product |
-| 부상자 | INJPSN | Injured Person |
-| 부서별 | BDPT | By Department |
-| 부서장 | DH | Department Head |
-| 부속서 | ANXD | Annex Document |
-| 부식성 | CRRS | Corrosiveness |
-| 부유물 |  |  |
-| 부유사 | SPDSMT | Suspended Sediment |
-| 부적격 | INDQ | Inadequacy |
-| 부적정 | IMPRTY | Impropriety |
-| 부적합 | ICPT | Incompatibility |
-| 부전공 | MNR | Minor |
-| 부정당 | DSQ | Disqualified |
-| 부제목 | SBTTL | Subtitle |
-| 부존량 | PTTQTY | Potential Quantity |
-| 부하량 | LDQTY | Loading Quantity |
-| 부하율 | ALFT | A Load Factor |
-| 북마크 |  |  |
-| 분기별 | BQTR | By Quarte |
-| 분류군 | TXGRP | Taxonomic Group |
-| 분류식 | SPRSYS | Separate System |
-| 분석서 | ANLRPT | Analysis Report |
-| 분석자 | ANLSR | Analysis Person (Analyst) |
-| 분야별 | BFLD | By Field |
-| 분양가 | LTOTPR | Lotting-Out Price |
-| 분자량 | MWT | Molecular Weight |
-| 분자식 | MCFM | Molecular Formula |
-| 불가능 | IMPSBL | Impossible |
-| 불공정 | UNFAIR | Unfair |
-| 불만족 | DSTF | Dissatisfaction |
-| 불연성 | NFLY | Incombustibility, Noninflammability |
-| 불완전 | IPRFCT | Imperfection |
-| 불이행 | NFUFL | No Fulfill Or Execute |
-| 불인정 | NRCG | Nonrecognition |
-| 불일치 | NCNSN | Non-Consensus |
-| 불투수 | IMPMB | Impermeable |
-| 불합격 | FAL | Fail |
-| 불확도 | UNCTDG | Uncertainty Degree |
-| 불활성 | INCTVY | Inactivity |
-| 블로그 | BLOG | Blog |
-| 비공개 | PRVT | Private |
-| 비과세 | TXFR | Tax-Free |
-| 비관리 | UCTL | Uncontrolled |
-| 비대상 | NTRGT | Non-Target |
-| 비도로 | NROAD | Non Road |
-| 비동의 | DSAG | Disagree |
-| 비디오 |  |  |
-| 비산업 | NINDS | No Industry |
-| 비상용 | EUSE | Emergency Use |
-| 비영리 | NPRF | Non-Profit |
-| 비인가 | NAPR | Non Approval |
-| 비정상 | ABNML | Abnormal |
-| 비추천 | DCMD | Decommendation |
-| 비포장 | UNPVD | Unpaved |
-| 비표준 | NSTNRD | Non-Standard |
-| 비할당 | USGN | Unassignment |
-| 비활성 | IACTV | Inactive |
-| 비회원 | NMBR | Non Member |
-| 빈용기 | ECNTNR | Empty Container |
-| 사망인 |  |  |
-| 사망자 | DCSD | The Deceased |
-| 사무소 | OFCE | Office |
-| 사무실 | OFC | Office |
-| 사무직 | OFJB | Office Jobs |
-| 사분면 | QDRNT | Quadrant |
-| 사상자 | CSLTS | Casualties |
-| 사수량 | DWTVLM | Dead Water Volume |
-| 사수위 | DSRL | Dead Storage Level |
-| 사업비 | PJTCO | Project Cost |
-| 사업소 |  |  |
-| 사업자 | BZMN | Businessman |
-| 사업장 | BPLC | Business Place |
-| 사업체 | BZENT | Business Enterprise |
-| 사용권 | TROU | The Right Of Using |
-| 사용량 | USQTY | Usage Quantity |
-| 사용료 | USFE | Use Fee |
-| 사용률 | USGRT | Usage Rate |
-| 사용인 |  |  |
-| 사용자 | USER | User |
-| 사용처 | PLCUS | Place Of Use |
-| 사원증 | EMPC | Employee Card |
-| 사유서 | LTFRSN | Letter For The Reason |
-| 사이즈 |  |  |
-| 사이트 | SITE | Site |
-| 삭제자 | DLTR | Deleter |
-| 산번지 | MLNO | Mountain Lot Number |
-| 산소량 | OXYQTY | Oxygen Quantity |
-| 산업군 | INDGRP | Industry Group |
-| 산정식 | CCTFM | Calculating Formula |
-| 산출물 | OTPTS | Outputs |
-| 산출식 | CFML | Calculating Formula |
-| 산화성 | OXDZ | Oxidizing |
-| 살포자 | SEDER | Seeder |
-| 살포지 | SPRPLC | Spray Place |
-| 상담원 | CNSLR | Counselor |
-| 상담자 |  |  |
-| 상대방 | CNTPT | Counterpart |
-| 상반기 | FRHFYR | First Half Of The Year |
-| 상소인 | APLNT | Appellant |
-| 상속인 | IHTR | Inheritor |
-| 상수도 | WTSPL | Water Supply |
-| 상수원 | WTSRC | Water Source |
-| 상여금 | BONUS | Bonus |
-| 상주종 | RSSPCS | Residing Species |
-| 상품권 | GFTCD | Gift Card |
-| 상호명 |  |  |
-| 생물군 | BIOTA | Biota |
-| 생물량 | CRTQTY | Creature Quantity |
-| 생산량 | OUTTRN | Outturn |
-| 생산자 | PRDCR | Producer |
-| 생산지 | PRDLC | Production Location |
-| 생산품 | PRDT | Product |
-| 생성자 | CREATR | Creator |
-| 생장형 | GRWFM | Growth Form |
-| 생태계 | ESSTM | Ecosystem |
-| 생활관 | DTUNIT | Dormitory Unit |
-| 서명자 | SIGR | A Signer |
-| 서비스 | SRVC | Service |
-| 서술형 | DPTV | Descriptive |
-| 서식지 | HBTAT | Habitat |
-| 서약서 | WROT | Written Oath |
-| 서한문 | EPST | Epistle |
-| 선급금 | PRPAMT | Prepayments Amount |
-| 선다형 | MTPC | Multiple-Choice |
-| 선수금 | ADPYR | Advance Payment Received |
-| 선순위 | PRORD | Prior Order |
-| 선적항 | POL | Port Of Loading |
-| 선정자 | CHCR | Choice Person |
-| 선지급 | ADPY | Advance Payment |
-| 선호도 | DPRFRC | Degree Of Preferance |
-| 설계자 | DSGNR | Designer |
-| 설명서 |  |  |
-| 설명회 | BRFN | Briefing |
-| 설문자 | SRVYR | Survey Person |
-| 설문지 | SRVPP | Survey Paper |
-| 설치자 | INSTLR | Installer |
-| 성과물 | OUTCM | Outcome |
-| 성수기 | PKSN | Peak Season |
-| 성적서 | SCRPT | Score Report |
-| 세대원 | FMBR | Family Members |
-| 세대주 | HSHLDR | Householder |
-| 세무서 | TXOFC | Tax Office |
-| 세분류 | DCLSF | Detailed Classification |
-| 세수입 | TXRVN | Tax Revenue |
-| 세척수 | WSHWTR | Wash Water |
-| 소각량 | INCQTY | Incineration Quantity |
-| 소각로 | INCNRT | Incinerator |
-| 소각열 | INCH | Incineration Heat |
-| 소각재 | INCRSH | Incineration Ash |
-| 소권역 | SSIRB | Small Sphere Of Influence In A River Basin |
-| 소규모 | SMSCL | Small Scale |
-| 소독제 | DSINF | Disinfectant |
-| 소득세 | INCTX | Income Tax |
-| 소득자 | INERN | Income Earner |
-| 소모품 | CSGD | Consumable Goods |
-| 소방서 | FRSTN | Fire Station |
-| 소분류 | SCLSF | Small-Scale Classification |
-| 소블록 | SBLK | Small Block |
-| 소비량 | CNSQTY | Consumption Quantity |
-| 소비자 | CNSMR | Consumer |
-| 소송인 | LTGNT | Litigant |
-| 소수력 | SMH | Small Hydro |
-| 소수점 | DCPT | Decimal Point |
-| 소유권 | OWNSHP | Ownership |
-| 소유역 | SBBSN | Sub Basin |
-| 소유인 |  |  |
-| 소유자 | OWNR | Owner |
-| 소유주 |  |  |
-| 소장품 | CLCN | Collection |
-| 소재지 | LCTN | Location |
-| 소제기 | FLGLW | Filing A Lawsuit |
-| 소하천 | SMLRVR | Small River |
-| 송달지 | DLPL | Delivery Place |
-| 송수관 | WPP | Water Pipe |
-| 송수신 | TRRC | Transmit And Receive |
-| 송신자 |  |  |
-| 쇼핑몰 | SOPMAL | Shopping Mall |
-| 수거식 | TASYS | Take Away System |
-| 수검자 | EXAMNE | Examinee |
-| 수계별 | BWTST | By Water System |
-| 수급자 | RECPNT | Recipient |
-| 수납인 |  |  |
-| 수납자 | RCPN | Recipient |
-| 수령자 | RCPNT | Recipient |
-| 수령지 | RCPL | Receipt Place |
-| 수료자 | CMPCSR | Completer |
-| 수료장 |  |  |
-| 수료증 | DPLM | Diploma |
-| 수목원 | ARBRT | Arboretum |
-| 수상자 | AWRDR | Awardee |
-| 수상작 | AWRT | Award Art |
-| 수생태 | AE | Aquatic Ecology |
-| 수수료 | FEE | Fee |
-| 수신인 |  |  |
-| 수신자 | RCVR | Receiver |
-| 수신처 | RCOFC | Receiving Office |
-| 수업료 | TTFE | Tuition Fee |
-| 수요일 | WED | Wednesday |
-| 수용가 | RCPTR | Receptor |
-| 수위계 | WTGG | A Water Gauge |
-| 수위표 | WLTBL | Water Level Table |
-| 수익률 | ERNRT | Earnings Rate |
-| 수익자 | BNFR | Benefiter |
-| 수입국 | ICNTRY | Importing Country |
-| 수입량 | IMPQTY | Import Quantity |
-| 수입자 | INCMR | Income Person |
-| 수입항 | POE | Port Of Entry |
-| 수자원 | WTRSC | Water Resource |
-| 수작업 | HNWK | Hand Work |
-| 수정인 |  |  |
-| 수정자 | MDFR | Modifier |
-| 수진자 | MDEXME | Medical Examinee |
-| 수처리 | WTRMT | Water Treatment |
-| 수출국 | ECNTRY | Exporting Country |
-| 수출량 | EXPQTY | Export Quantity |
-| 수출입 | IMPEXP | Imports And Exports |
-| 수출자 | EXPR | Export Person |
-| 수출항 | EPRT | Export Port |
-| 수취인 | ADDRSE | Addressee |
-| 수행사 | EXCMP | Execution Company |
-| 수행자 | PRFMR | Performer |
-| 수험자 | EXMNE | Examinee |
-| 수혜자 | BNFCR | Beneficiary |
-| 숙련도 | SKLVL | Skill Level |
-| 순이익 | NETPF | Net Profit |
-| 순자산 | NAST | Net Assets |
-| 순찰자 | PTLR | Patroller |
-| 쉬는날 |  |  |
-| 스레드 | THRED | Thread |
-| 스케줄 |  |  |
-| 스크랩 | SCRP | Scrap |
-| 스키마 | SCHM | Schema |
-| 슬러지 | SLUDGE | Sludge |
-| 승강기 | ELVTR | Elevator |
-| 승용차 | PCAR | (Passenger) Car |
-| 승인자 | AUTZR | Authorizer |
-| 승하차 | GNGF | Get On Or Get Off |
-| 승합차 | VAN | (Passenger) Van |
-| 시가지 | CTYD | City District |
-| 시가화 | UBNZTN | Urbanization |
-| 시간당 | PRHR | Per Hour |
-| 시간대 | TMZON | Time Zone |
-| 시간별 | BHR | By Hour |
-| 시간외 | OVTM | Overtime |
-| 시공자 | BLDR | Builder |
-| 시군구 | SGG | Si/Gun/Gu |
-| 시료량 | SPCQTY | Specimen Quantity |
-| 시멘트 | CEMT | Cement |
-| 시설물 | FCLTY | Facility |
-| 시설별 | BFCLTY | By Facility |
-| 시스템 | SYS | System |
-| 시운전 | TSTRN | Test Run |
-| 시퀀스 |  |  |
-| 시행자 | DVLR | Developer |
-| 식물상 | FLORA | Flora |
-| 식별자 | UID | Unique Identifier |
-| 신고량 | DCLQTY | Declared Quantity |
-| 신고서 | RPDCD | Report Or Declare Document |
-| 신고인 |  |  |
-| 신고자 | DCL | Declarer |
-| 신기술 | NTCH | New Technology |
-| 신뢰도 | CRRL | Credibility Reliability |
-| 신뢰성 | RLBL | Reliability |
-| 신용장 | LC | Letter Of Credit |
-| 신인도 | RCGDGR | Recognition Degree |
-| 신재생 | NRNW | New And Renewable |
-| 신적설 | FSNCVR | Fresh Snow Cover |
-| 신증설 | NBXB | New Build Up And Extension Build Up |
-| 신청량 | APLQTY | Applied Quantity |
-| 신청서 | APFR | Application Form |
-| 신청인 |  |  |
-| 신청자 | APLCNT | Applicant |
-| 신호등 | SGNLG | Signal Light |
-| 실린더 |  |  |
-| 실무자 | HWKR | Hands-On Worker |
-| 실수령 | RLRC | Real Receipt |
-| 실시간 | RLTM | Realtime |
-| 실업률 | UMRT | Unemployment Rate |
-| 실적량 | PFMQTY | Performance Quantity |
-| 실지급 | ACTPY | Actual Payment |
-| 실행자 | OPERTR | Operator |
-| 실험실 | LAB | Laboratory |
-| 실효성 | EFTNS | Effectiveness |
-| 심사자 | JDG | Judge |
-| 심층수 | DPWT | Deep Water |
-| 썸네일 | THMB | Thumbnail |
-| 아이디 | ID | ID |
-| 아이콘 | ICON | Icon |
-| 아이템 |  |  |
-| 아이피 |  |  |
-| 아이핀 | IPN | IPIN |
-| 아파트 | APT | Apartment |
-| 아황산 | SLFAC | Sulfurous Acid |
-| 안내문 | GDNTC | Guidance Notice |
-| 안내소 | INFDSK | Information Desk |
-| 안전모 | SFHM | Safety Helmet |
-| 안전성 | SFT | Safety |
-| 안정화 | STBZN | Stabilization |
-| 알림창 | NTWIN | Notice Window |
-| 암호화 | ENCPT | Encryption |
-| 앙상블 | ESBL | Ensemble |
-| 앞자리 | FRDGT | Front Digit |
-| 액면가 | FVAL | Face Value |
-| 액비화 | LIQFZR | Liquefaction for Fertilizer |
-| 액세스 |  |  |
-| 양도량 | TRSQTY | Transferred Quantity |
-| 양도인 | TRSFR | Transferor |
-| 양도자 | HNOVR | Hand Over Person |
-| 양서류 | AMPHBN | Amphibian |
-| 양성화 | LGLZTN | Legalization |
-| 양수량 | RCVQTY | Received Quantity |
-| 양수인 | GRNE | Grantee |
-| 양수자 |  |  |
-| 양수장 | PMPSTN | Pumping Station |
-| 양식장 | NRSFM | Nursery Farm |
-| 양어장 | FSHFM | Fishing Farm |
-| 어린이 | CHILD | Child |
-| 언론사 | PRESS | Press |
-| 업로드 | ULD | Upload |
-| 업무망 | BNSNW | Business Network |
-| 에너지 | ENGY | Energy |
-| 에디터 |  |  |
-| 엔터티 | ENTTY | Entity |
-| 엠바고 | EBRG | Embargo |
-| 여과지 | FLTPR | Filter Paper |
-| 여수로 | SPWAY | Spillway |
-| 역분개 | RJRNL | Reverse Journalizing |
-| 역삼투 | ROSMS | Reverse Osmosis |
-| 연구비 | RSCO | Research Cost |
-| 연구소 | RSINS | Research Institute |
-| 연구원 | RSCR | Researcher |
-| 연도별 | BYRG | By Year Group |
-| 연락처 | CNPL | Contact Place |
-| 연령대 | AGGR | Age Group |
-| 연령별 | BAG | By Age |
-| 연료량 | FLQTY | Fuel Quantity |
-| 연료화 | FUELZ | Fuelize |
-| 연면적 |  |  |
-| 연체율 | DLQRT | Delinquent Rate |
-| 연평균 | ANAVG | Annual Average |
-| 연회비 | ANFE | Annual Fee |
-| 열람자 | RDR | Reader |
-| 엽록소 | CLO | Chiorophyll |
-| 영문자 |  |  |
-| 영산강 | YSRVR | Yeongsan River |
-| 영상실 | THTR | Theater |
-| 영수증 | RCET | Receipt |
-| 영양염 | NTRNT | Nutrient |
-| 영업비 | BIZEXP | Business Expenses |
-| 영업소 | BIZOFC | Business Office |
-| 영업점 | SLSBR | Sales Branch |
-| 예금자 |  |  |
-| 예금주 | DPSTR | Depositor |
-| 예보관 | FRCSTR | Forecaster |
-| 예상량 | EXDQTY | Expected Quantity |
-| 예약자 | BKR | Booker |
-| 예정지 | PSITE | Planned Site |
-| 오른쪽 |  |  |
-| 오염원 | PLTSRC | Pollution Sources |
-| 온나라 | NNR | Onnara |
-| 온라인 | ONLN | Online |
-| 외국어 | FRLAN | Foreign Language |
-| 외국인 | FRGNR | Foreigner |
-| 외래종 | INSPCS | Introduced Species |
-| 외부망 |  |  |
-| 외수위 | EZWTL | External Water Level |
-| 외필지 | BYLT | Bylot |
-| 요주의 | ATNT | Attention |
-| 요청서 | REQDOC | Request Document |
-| 요청인 |  |  |
-| 요청자 | RQSTR | Requester |
-| 용수량 | USWQTY | Using Water Quantity |
-| 용적률 | FART | Floor Area Ratio |
-| 용천수 | SPRWTR | Spring Water |
-| 용해도 | SLBL | Solubility |
-| 우량계 | RNGUG | A Raingauge |
-| 우선권 | PRTY | Priority |
-| 우점도 | DMNCD | Dominance (Degree) |
-| 우점종 | DSPCS | Dominant Species |
-| 우체국 | PSTOFC | Post Office |
-| 우편물 | POSTM | Postal Matter |
-| 운동성 | MOTILE | Motile |
-| 운반량 | CRDQTY | Carried Quantity |
-| 운반업 | TRBIZ | Transportation Business |
-| 운반자 | TRSPR | Transposer |
-| 운반증 | TRNLCS | Transport License |
-| 운송비 | LGCO | Logistics Cost |
-| 운송장 | WYBL | Waybill |
-| 운영자 | SYSOP | System Operator |
-| 운전자 | DRVR | Driver |
-| 원거래 | ORGDL | Original Deal |
-| 원동기 | MTR | Motor |
-| 원리금 | PNI | Principal And Interest |
-| 원산지 | PLOR | The Place Of Origin |
-| 원승인 | ORGAPR | Original Approval |
-| 원인자 | ORGPR | The Origin Person |
-| 원재료 | RAWM | Raw Materials |
-| 원파일 | ORGNFL | Original File |
-| 월류언 | OVFLWE | Overflow Weir |
-| 월요일 | MON | Monday |
-| 월평균 | MAVG | Month Average |
-| 위약금 | PNLT | Penalty |
-| 위원장 | CHRPR | Chairperson |
-| 위원회 | CMT | Committee |
-| 위치도 | LOCMP | Location Map |
-| 위탁금 | TRMNY | Trust Money |
-| 위탁자 | CSNR | Consignor |
-| 위험물 | DGROB | A Dangerous Object |
-| 위험성 | RSKNS | Riskiness |
-| 유기인 | OGPS | Organic Phosphorus |
-| 유량계 | FMT | Flowmeter |
-| 유류비 | FLCO | Fuel Cost |
-| 유사량 | SMTDC | Sediment Discharge |
-| 유수성 | EPTMC | Eupotamic |
-| 유수식 | RUNWTR | Running Water |
-| 유원지 | AMMP | Amusement Park |
-| 유입구 | INLET | Inlet |
-| 유입량 | INFLR | Inflow Rate |
-| 유입원 | INFCAU | Inflow Cause |
-| 유전자 | GENE | Gene |
-| 유지비 | MNTFE | Maintenance Fee |
-| 유출량 | OTDRG | Outflow Discharge |
-| 유출부 | EFXCTN | Efflux Section |
-| 유형별 | BTYPE | By Type |
-| 유효성 | VLDTY | Validity |
-| 육식성 | CRNVRS | Carnivorous |
-| 음식물 | FDNK | Food And Drink |
-| 읍면동 | EMD | Eup/Myun/Dong |
-| 응답자 | RSPDNT | Respondent |
-| 의견서 | WROPN | Written Opinion |
-| 의견자 | OPNR | Opinion Person |
-| 의뢰인 | RQSR | Requestor |
-| 의뢰자 |  |  |
-| 의료비 | MDEXP | Medical Expenses |
-| 의료인 | HCWKR | Healthcare Worker |
-| 의무자 | OBLGR | Obligator |
-| 이동량 | MVDQTY | Moved Quantity |
-| 이동식 | RVGN | Rovingness |
-| 이륜차 | BIKE | Bike |
-| 이메일 | EML | Email |
-| 이물질 | ALSBTN | Alien Substance |
-| 이미지 | IMG | Image |
-| 이벤트 | SEVNT | System Event |
-| 이상치 | OUTLR | Outliers |
-| 이송량 | TRQTY | Transfer Quantity |
-| 이슬점 | DWPNT | Dewpoint |
-| 이용량 | UTQTY | Utilization Quantity |
-| 이재민 | DSVCTM | Disaster Victims |
-| 이중화 | DPLX | Duplexing |
-| 인건비 | LBRCO | Labor Cost |
-| 인계서 | HDOVDC | Handover Document |
-| 인계자 | HVPRSN | Handover Person |
-| 인사말 | GRTG | Greeting |
-| 인상률 | INCRT | Increase Rate |
-| 인솔자 | LDR | Leader |
-| 인쇄비 | PRNTC | Printing Cost |
-| 인수인 |  |  |
-| 인수자 | ACPTR | Acceptor |
-| 인원수 | NOPE | The Number Of Persons |
-| 인정량 | RCGQTY | Recognized Quantity |
-| 인증량 | CRFQTY | Certification Quantity |
-| 인증서 | CRTF | Certificate |
-| 인지세 | STMTX | Stamp Tax |
-| 인터넷 | ITNT | Internet |
-| 인허가 | LCPMT | Licenses And Permits |
-| 인화성 | FLMABT | Flammability |
-| 인화점 | FSPN | Fiashing Point |
-| 일기도 | WTHCT | Weather Chart |
-| 일사량 | SRQTY | Solar Radiation Quantity |
-| 일시금 | LSMPY | A Lump Sum Payment |
-| 일시적 | MMTR | Momentary |
-| 일요일 | SUN | Sunday |
-| 일조량 | ASNSH | Amount Of Sunshine |
-| 일치성 | CNFMTY | Conformity |
-| 일평균 | DYRG | Day Average |
-| 임대료 | RTFE | Rental Fee |
-| 임대인 | LSR | Lessor |
-| 임진강 | IJRV | Imjin River |
-| 임차료 | LSFE | Lease Fee |
-| 임차인 | HIRER | Hirer |
-| 입고량 | WHSQTY | Warehousing Quantity |
-| 입고자 | WRHSGR | Warehousing Person |
-| 입금자 | PYR | Payer |
-| 입력자 | KBRDR | Keyboarder |
-| 입주자 | OCPNT | Occupant |
-| 입찰자 | BDDER | Bidder |
-| 입출고 | PIPO | Put-In, Put-Out |
-| 입학금 | ADMFE | Admission Fee |
-| 입회자 | OBSRVR | Observer |
-| 잉여금 | SRAMT | Surplus Amount |
-| 자격증 | CRTFCT | Certificate |
-| 자국어 | OLANG | One'S Own Language |
-| 자동차 | CAR | Car |
-| 자동화 | ATMTN | Automation |
-| 자료실 | RPSTR | Repository |
-| 자릿수 | DGT | Digit |
-| 자발적 | VLNTR | Voluntary |
-| 자본금 | CPTL | Capital |
-| 자부담 | PHW | Pay His Way |
-| 자연성 | NTRLTY | Naturality |
-| 자주식 | SFPRPL | Self-Propelled |
-| 작성자 | WRTR | Writer |
-| 작업자 | OPRTR | Operator |
-| 잔반량 | LTRQTY | Leftover Quantity |
-| 잔식량 | UNFQTY | Uneaten Food Quantity |
-| 잔여량 | RMNQTY | Remainder |
-| 잡식성 | OMNVRT | Omnivority |
-| 잡종지 | MCLNAR | Miscellaneous Area |
-| 장려금 | SUBSD | Subsidy |
-| 장애인 | PWDBS | People With Disabilities |
-| 장차관 | MAVM | A Minister And Vice Minister |
-| 재개업 | ROBIZ | Reopening Of Business |
-| 재검사 | RTST | Retest |
-| 재검토 | REVLT | Re-Evaluation |
-| 재계산 | RECAL | Recalculation |
-| 재고량 | INVQTY | Inventory Quantity |
-| 재공고 | RANC | Re-Announcement |
-| 재교부 | RISU | Reissue |
-| 재등록 | RRG | Re-Registration |
-| 재료비 | MTCO | Material Cost |
-| 재반입 | RCRYN | Re Carry In |
-| 재발급 | RISSU | Reissuance |
-| 재발송 | RSND | Resend |
-| 재발행 | RPBLC | Republication |
-| 재배부 | RDTBN | Redistribution |
-| 재배종 | CULTVR | Cultivar |
-| 재배지 | CLTLND | Cultivation Land |
-| 재부착 | RMNT | Remount |
-| 재사용 | RUSE | Reuse |
-| 재산세 | PRPTX | Property Tax |
-| 재산정 | RCTN | Recomputation |
-| 재설문 | RSRVY | Resurvey |
-| 재설정 | RSET | Reset |
-| 재수신 | RCAG | Receiving Again |
-| 재수행 | REDO | Redo |
-| 재승인 | REAPR | Reapproval |
-| 재시도 | RTRY | Retry |
-| 재시험 | REEXM | Reexamination |
-| 재신청 | RQAG | Request Again |
-| 재심사 | REXAM | Reexamination |
-| 재요청 | RDMND | Redemand |
-| 재이용 | RTLZTN | Reutiliztion |
-| 재입찰 | REBID | Rebid |
-| 재작성 | REWRT | Rewrite |
-| 재전송 | RTRSM | Retransmission |
-| 재제출 | RSMN | Resubmission |
-| 재처리 | RPRCS | Reprocess |
-| 재판부 | JSDP | Justice Department |
-| 재평가 | REVL | Revaluation |
-| 재할당 | RSGN | Reassignment |
-| 재해자 | DVCTM | Disaster Victim |
-| 재확인 | RECFM | Reconfirmation |
-| 재활용 | REUTIL | Reutilization |
-| 저감량 | DCQTY | Decrease Quantity |
-| 저공해 | LPOLU | Low Pollution |
-| 저배출 | LESN | Low Emission |
-| 저서종 | BTHSPC | Benthic Species |
-| 저수량 | RSQTY | Reservoir Quantity |
-| 저수로 | LWATCH | Low Water Channel |
-| 저수위 | LWLV | Low-Water Level |
-| 저수지 | RSRVR | Reservoir |
-| 저작권 | CPRGT | Copyright |
-| 저작물 | WRTS | Writings |
-| 저작자 | AUTHR | Author |
-| 저장량 | STRQTY | Stored Quantity |
-| 저장소 | STRGP | Storage Place |
-| 저장조 | REPO | Repository |
-| 적립금 | RSEV | Reserve |
-| 적설량 | SNWFL | Snowfall |
-| 적절성 | APTNS | Appropriateness |
-| 전광판 | ELTRD | Electronic Display (Board) |
-| 전기료 | ELCHG | Electricity Charges |
-| 전년도 |  |  |
-| 전도식 | CDTNT | Conduction Type |
-| 전력량 | ELCEG | Electric Energy |
-| 전문가 | EXPRT | Expert |
-| 전문성 | PFSNL | Professionality |
-| 전송자 | TRSMR | Transmitter |
-| 전송처 | TRSPL | Transmission Place |
-| 전처리 | PRCSG | Preprocessing |
-| 전화국 |  |  |
-| 절감량 | SVQTY | Saving Quantity |
-| 절차서 | PROCD | Procedure Document |
-| 점검자 | INSCTR | Inspector |
-| 점검표 | CKLST | Check List |
-| 점유율 | PCSHR | Percentage Share |
-| 접속자 | ACSR | Accessor |
-| 접수인 |  |  |
-| 접수자 | CLR | Clerk |
-| 정규직 | PMEMP | Permanent Employee |
-| 정밀도 | PRCDGR | Precision Degree |
-| 정보화 | INFMZ | Informatization |
-| 정수성 | LNTIC | Lentic |
-| 정수장 | FTTP | A Filtration Plant |
-| 정의서 | DEFDOC | Definition Document |
-| 정착금 | RSTFND | Resettlement Funds |
-| 정형화 | PTNG | Patterning |
-| 정화조 | SPCTNK | Septic Tank |
-| 정확도 | ACCR | Accuracy |
-| 제개정 | ENAM | Enactment And Amendment |
-| 제경비 | OVEXP | Overhead Expenses |
-| 제공자 | OFFR | Offerer |
-| 제내지 | PRLL | Protected Lowland |
-| 제방고 | LVHGT | Levee Height |
-| 제보자 | INFMT | Informant |
-| 제삼자 |  |  |
-| 제수당 | SALW | Sundry Allowances |
-| 제안서 | PRPSD | Proposal Document |
-| 제안자 | PRPSR | Proposer |
-| 제어기 | CTRLR | Controller |
-| 제외지 | RVRSL | River Side Land |
-| 제작사 | MNFCTR | Manufacturer |
-| 제작자 | PDCR | Producer |
-| 제조물 | PRODCT | Product |
-| 제조사 | MKR | Maker |
-| 제조업 | MFBIZ | Manufacturing Business |
-| 제출자 | PRSNR | Presenter |
-| 제출처 | SMPL | Submission Place |
-| 제품군 | PDGP | Product Group |
-| 조건부 | CNDL | Conditional |
-| 조달청 | PPS | Public Procuerment Service |
-| 조사서 | INVD | Investigation Ducument |
-| 조사원 |  |  |
-| 조사자 | EXMNR | Examiner |
-| 조정량 | ADJQTY | Adjustment Quantity |
-| 조직도 | ORGCHT | Organization Chart |
-| 조치자 | ACTPR | Action Person |
-| 조합원 | MBRAS | Member Of Association |
-| 조회자 | INQPR | Inquiry Person |
-| 종량제 | MRST | The Meter-Rate System |
-| 종사자 | PRCTR | Practicioner |
-| 종업원 |  |  |
-| 좋아요 | LIKES | Likes |
-| 좋은물 | WSWTR | Wholesome Water |
-| 좌표계 | CDSSTM | Coordinate System |
-| 주관식 | SBJV | Subjective |
-| 주문자 | ORDRR | Orderer |
-| 주민세 | RSDTX | Resident Tax |
-| 주부속 | MANX | Main Annex |
-| 주소록 | ADBK | Address Book |
-| 주유소 | GSTN | Gas Station |
-| 주의보 | WTC | Watch |
-| 주입량 | INJQTY | Injected Quantity |
-| 주저자 | PRAUT | Primary Author |
-| 주제도 | THEME | Thematic Map |
-| 주차장 | PKLT | Parking Lot |
-| 준비물 | SPPLS | Supplies |
-| 중간종 | ITRMDM | Intermedium |
-| 중권역 | MSIRB | Middle Sphere Of Influence In A River Basin |
-| 중도금 | ITRPY | Interim Payment |
-| 중분류 | MCLSF | Medium-Scale Classification |
-| 중블록 | MBLK | Middle Block |
-| 중상자 | SRIPR | Seriously Injured Person |
-| 중수도 | RUSWTR | Reusing Water |
-| 중요도 | IMPDG | Important Degree |
-| 중장비 | HVEQP | Heavy Equipment |
-| 중하층 | LMCL | Lower Middle Classes |
-| 증가율 | GRWRT | Growth Rate |
-| 증기압 | STPS | Steam Pressure |
-| 증명서 | PRDOC | Proof Documentation |
-| 증발량 | EVAMT | Evaporation Amount |
-| 지급인 | PAYR | Payer |
-| 지급자 |  |  |
-| 지급처 | PMPL | Payment Place |
-| 지방비 | LCEP | Local Expense |
-| 지방세 | LCLTX | Local Tax |
-| 지방채 | MCPBND | Municipal Bond |
-| 지방청 | LGVOFC | Local Government Office |
-| 지분율 | SHRT | Share Ratio |
-| 지수식 | WTRBLK | Water Block |
-| 지역별 | BRGN | By Region |
-| 지은이 |  |  |
-| 지자체 |  |  |
-| 지적부 |  |  |
-| 지정자 | ASNR | Assigner |
-| 지표면 | LNDSF | Land Surface |
-| 지표수 | SRFWTR | Surface Water |
-| 지하수 | UGWTR | Underground Water |
-| 직접비 | DRCO | Direct Cost |
-| 직접세 | DRTX | direct tax |
-| 진입로 | ACCRD | Access Road |
-| 진행률 | PRGRT | Progress Rate |
-| 질문자 | QSTNR | Questioner |
-| 질의자 |  |  |
-| 집약도 | INTSDG | Intensive Degree |
-| 징수관 | CLTOR | Collector |
-| 차감량 | SBDQTY | Subtracted Quantity |
-| 차상위 | SHGHRK | The Second Highest Rank |
-| 차수벽 | SDMBN | Shielding Membrane |
-| 참가비 | ENTFE | Entry Fee |
-| 참가자 | PRTPT | Participant |
-| 참석자 | ATD | Attendee |
-| 참여율 | PTRT | Participation Rate |
-| 참여자 | PRTPNT | Participant |
-| 참조자 | RFPR | Reference Person |
-| 창업자 | FNDR | Founder |
-| 채권자 | CRDTR | Creditor |
-| 채무자 | DBTR | Debtor |
-| 채수구 | WTRLT | Water Inlet |
-| 채수병 | WSBT | Water Sample Bottle |
-| 채집자 | CLTNR | Collecter |
-| 채집지 | CLTNG | Collect Ground |
-| 채취량 | CLTQTY | Collected Quantity |
-| 채취자 | CLCTOR | Collector |
-| 책임자 | RBPRSN | Responsible Person |
-| 처리량 | PRCQTY | Processing Quantity |
-| 처리율 | PRSRT | Processing Rate |
-| 처리인 |  |  |
-| 처리자 | PRCR | Processor |
-| 처리장 | TMPLNT | Treatment Plant |
-| 첨가제 | ADTV | Additive |
-| 청구인 | CLMT | Claimant |
-| 청구자 |  |  |
-| 청구지 | BLADR | Billing Address |
-| 체납자 | DFLTR | Defaulter |
-| 초기화 | INIT | Initialization |
-| 초식성 | HRBVR | Herbivory |
-| 총가구 | THSHD | Total Household |
-| 총개체 | TNINDV | TotalIndividual |
-| 총거래 | TDLNG | Total Dealings |
-| 총건수 | TNOCS | Total Number Of Cases |
-| 총결제 | TSTLM | Total Settlement |
-| 총계약 | TCTRT | Total Contract |
-| 총공급 | TSPLY | Total Supply |
-| 총공사 | TCSTRN | Total Construction |
-| 총구매 | TPRCH | Total Purchase |
-| 총군집 | TNCMNT | Total Communities |
-| 총근무 | TWRK | Total Working |
-| 총금액 | GRAMT | Gross Amount |
-| 총급여 | TSL | Total Salary |
-| 총길이 | TLEN | Total Length |
-| 총납부 | TPY | Total Payment |
-| 총대출 | TLOAN | Total Loan |
-| 총매출 | TSLS | Total Sales |
-| 총면적 | GFA | Gross Floor Area |
-| 총명수 |  |  |
-| 총배당 | TDVD | Total Dividends |
-| 총배정 | TALTM | Total Allotment |
-| 총보유 | THLD | Total Holding |
-| 총보증 | TGRNT | Total Guarantee |
-| 총부채 | TLBLT | Total Liabilities |
-| 총비용 | TCO | Total Cost |
-| 총사용 | TUSE | Total Use |
-| 총상환 | TRPY | Total Repayment |
-| 총세포 | TBCLL | Total Biology Cell |
-| 총소요 | TREQ | Total Requirement |
-| 총수납 | TPYRC | Total Payments Received |
-| 총수입 | TICM | Total Income |
-| 총승인 | TAPRV | Total Approval |
-| 총시설 | TFCLT | Total Facilities |
-| 총신청 | TRQST | Total Request |
-| 총업소 | TBZEST | Total Business Establishments |
-| 총여신 | TCRDT | Total Credit |
-| 총예산 | TBGT | Total Budget |
-| 총이익 | TPRF | Total Profit |
-| 총자산 | TAST | Total Assets |
-| 총정원 | TCPC | Total Capacity |
-| 총조회 | TINQ | Total Inquiry |
-| 총주차 | TPKCT | Total Parking Capacity |
-| 총주행 | TDRVG | Total Driving |
-| 총중량 | TWGHT | Total Weight |
-| 총지급 | TPMT | Total Payment |
-| 총지출 | TEXPND | Total Expenditure |
-| 총차입 | TBRW | Total Borrowings |
-| 총채권 | TRCVB | Total Receivables |
-| 총채무 | TDBT | Total Debt |
-| 총처리 | TPRCS | Total Processing |
-| 총청구 | TCLM | Total Claims |
-| 총투자 | TIVST | Total Investment |
-| 총평가 | TEVL | Total Evaluation |
-| 총품목 | TITEM | Total Items |
-| 총환수 | TRDM | Total Redemption |
-| 총회수 | TRTRVL | Total Retrieval |
-| 최고가 | HGPRC | The Highest Price |
-| 최상위 | HGHRK | The Highest Rank |
-| 최저가 | LWPRC | The Lowest Price |
-| 최하위 | LWTRK | The Lowest Rank |
-| 추천인 | RCMDR | Recommender |
-| 추천자 |  |  |
-| 출고량 | OBDQTY | Outbound Quantity |
-| 출력량 | OTPPW | Output Power |
-| 출력물 | PRNOT | Printout |
-| 출발지 | DPPL | Departure Place |
-| 출원인 | APLT | Applicant |
-| 출입구 | GATE | Gate |
-| 출입증 | ADPS | Admission Pass |
-| 출장비 | BTEXP | Business Trip Expenses |
-| 출장소 | LCOFC | Local Office |
-| 출장자 | BZTRVR | Business Traveler |
-| 출장지 | BTDST | Business Trip Destination |
-| 출제자 | STXQR | Setting Exam Questions Person |
-| 출판사 | PBLCO | Publishing Company |
-| 충당금 | APAMT | Appropriation Amount |
-| 충식성 | INSCTS | Insectivorous |
-| 충전소 | CHRS | Charging Station |
-| 취급량 | HDLQTY | Handling Quantity |
-| 취급자 | HDLR | Handler |
-| 취소자 | CNCLR | Canceler |
-| 취수량 | WITQTY | Water-Intake Quantity |
-| 취수원 | SWSP | Resource of Water Supply |
-| 취수장 | ITKPL | Intake Plant |
-| 취업자 | EMPR | Employed Person |
-| 측정기 | MSINST | Measuring Instrument |
-| 측정량 | MSQTY | Measured Quantity |
-| 측정망 | MNTNW | Monitoring Network |
-| 측정소 | MSRSTN | Measuring Station |
-| 측정자 | MSRPSN | Measurement Person |
-| 친환경 | ECFRD | Eco-Friendly |
-| 침사지 | GRCHMB | Grit Chamber |
-| 침전수 | PRPW | Precipitation-Water |
-| 침출수 | EFNT | Effluent |
-| 침투수 | PCLTWT | Percolating Water |
-| 카드뮴 | CDMM | Cadmium |
-| 캐노피 | CNPY | Canopy |
-| 캠페인 | CMPGN | Campaign |
-| 컨버터 | CNVRTR | Converter |
-| 컨설팅 | CNSLT | Consulting |
-| 컨텐츠 |  |  |
-| 컬러맵 | CRMP | Colormap |
-| 컴퓨터 | PC | Personal Computer |
-| 콘텐츠 | CONTS | Contents |
-| 콜센터 | CLLR | Call Center |
-| 쿼터량 | QTAQTY | Quota Quantity |
-| 크롤링 | CRWLG | Crawling |
-| 키워드 | KYWD | Keyword |
-| 타기관 | OINST | Other Institution |
-| 타당성 | WSDM | Wisdom |
-| 타원체 | ELPSD | Ellipsoid |
-| 탈수기 | DEHYM | Dehydration  Machine |
-| 탈퇴자 | SCDR | Seceder |
-| 탐지기 | DTOR | Detector |
-| 탑승자 | PSGR | Passenger |
-| 태양광 | SLRLG | Solar Light |
-| 태양열 | SLREG | Solar Energy |
-| 테스트 |  |  |
-| 테이블 | TBL | Table |
-| 텍스트 | TXT | Text |
-| 템플릿 |  |  |
-| 토요일 | SAT | Saturday |
-| 토지계 | LNDCRL | Land Circles |
-| 토출관 | DELP | Delivery Pipe |
-| 통계청 | NSO | National Statistical Office |
-| 통보서 | NTFCTD | Notification Document |
-| 통보자 | ANCR | Announcer |
-| 통신사 | TLCMCO | Telecommunication Company |
-| 통신실 | OPRRM | An Operating Room |
-| 통제소 | CNRPT | Control Post |
-| 통지서 | WRNTC | Written Notice |
-| 통행량 | TRFVLM | Traffic Volume |
-| 통화자 | CALR | Caller |
-| 퇴비화 | CMPSTG | Composting |
-| 퇴적물 | SDM | Sediment |
-| 특별세 | SPTX | Special Tax |
-| 특수지 | SPAREA | Special Area |
-| 파충류 | RPTL | Reptile |
-| 판결문 | RLNG | Ruling |
-| 판매량 | SLQTY | Sales Quantity |
-| 판매자 | SLR | Seller |
-| 판매처 | SLPL | Sales Place |
-| 팝업창 |  |  |
-| 패키지 | PKG | Package |
-| 팽창률 | EXPSRT | Expansion Rate |
-| 펌웨어 | FW | Firmware |
-| 펌프장 | PUMPST | Pump Station |
-| 페이지 |  |  |
-| 편집기 | EDTR | Editor |
-| 평가군 | EVLGRP | Evaluation Group |
-| 평가자 | EVLTR | Evaluator |
-| 평가표 | EVLSHT | Evaluation Sheet |
-| 평균량 | AVGQTY | Average Quantity |
-| 폐기물 | WST | Waste |
-| 폐사체 | DBDY | Dead Body |
-| 폐쇄망 | CLSDNW | Closed Network |
-| 포유류 | MNM | Manmal |
-| 포장재 | PACKNG | Packing |
-| 포지션 |  |  |
-| 폭발성 | EXPSV | Explosiveness |
-| 표류수 | SFCWT | Surface Water |
-| 표준화 | STDZ | Standardize |
-| 품목량 | ITMQTY | Item Quantity |
-| 풍부도 | ABDNC | Abundance |
-| 풍속계 | ANMTR | Anemometer |
-| 풍향도 | WDDRM | Wind Direction Diagram |
-| 프레임 | FRAME | Frame |
-| 프로필 | PRFL | Profile |
-| 플랫폼 | PLTFM | Platform |
-| 피의자 | SSPCT | Suspect |
-| 피해량 | DAMQTY | Damaged Quantity |
-| 피해자 | VCTM | Victim |
-| 하도급 | SBCTR | Subcontract |
-| 하반기 | SHYR | Second Half Of The Year |
-| 하수도 | SEWER | Sewer |
-| 하수량 | SWQTY | Sewage Quantity |
-| 하역항 | PULDG | Port Of Unloading |
-| 하천수 | RWTR | River Water |
-| 학술지 | ACJRNL | Academic Journal |
-| 학습자 | LRNR | Learning Person (Learner) |
-| 한부모 | SGPRN | Single Parent |
-| 할당량 | QT | Quota |
-| 할인율 | DSCRT | Discount Rate |
-| 함수율 | MOSRT | Moisture Rate |
-| 함유량 | CTQTY | Content Quantity |
-| 합격자 | PASSR | Passed Person(Successful Candidate) |
-| 합류식 | CBSYS | Combined Sewer System |
-| 합류점 | CNFLN | Confluence |
-| 합리화 | RTNZ | Rationalization |
-| 항공기 | ARPLN | Airplane |
-| 항공사 | ARLN | Airline |
-| 해상도 | RSLU | (Display) Resolution |
-| 해수면 |  |  |
-| 해양수 | OCWTRS | Ocean Waters |
-| 해조류 | SWD | Seaweed |
-| 행정동 | DONG | Dong (Administrative District) |
-| 허가량 | PRMQTY | Permitted Quantity |
-| 허가서 | PERMD | Permit Document |
-| 허가증 | PERMC | Permission Certificate |
-| 허용량 | ALWQTY | Allowed Quantity |
-| 현미경 | MCPE | Microscope |
-| 현실화 | RLZTN | Realization |
-| 혈액형 | BLDTY | Blood Type |
-| 협의회 | CUNCL | Council |
-| 협잡물 | CTMN | Contaminants |
-| 협조자 | HLPR | Helper |
-| 형태별 | BSHP | By Shape |
-| 호소수 | PNWTR | Pond Water |
-| 호스트 | HOST | (Facility) Host |
-| 홍수기 | FLDSN | Flood Season |
-| 홍수량 | FLDSC | Flood Discharge |
-| 홍수위 | FLDEL | Flood Elevation |
-| 화요일 | TUE | Tuesday |
-| 확약서 | DFPRD | Definite Promise Document |
-| 확인서 | CNFDOC | Confirmation Document |
-| 확인자 | IDFR | Identifier |
-| 확장자 | EXTN | Extension |
-| 확정자 | DTMR | Determiner |
-| 환경부 | MOE | Ministry Of Environment |
-| 환경성 | ENVL | Environmental |
-| 환경처 | OMOE | (Old) Ministry Of Environment |
-| 환경청 | ENVO | Environmental Office |
-| 환산량 | CNVQTY | Converted Quantity |
-| 환승역 | TRFSTN | Transfer Station |
-| 활성화 | VTLZ | Vitalization |
-| 회수량 | RTVQTY | Retrieved Quantity |
-| 회신자 | RPLYR | Reply Person |
-| 회원사 | MBRCO | Member Company |
-| 회의실 | CFRM | Conference Room |
-| 회전율 | RTTRT | Rotation Rate |
-| 효율성 | EFFCTV | Effectiveness |
-| 후처리 | PSTC | Post-Cleaning |
-| 휘발성 | VLATIL | Volatility |
-| 휴폐업 | SCBIZ | Suspension Or Closing Of Business |
-| 희귀종 | RSPCS | Rare Species |
-| 가능면적 | PMSBAR | Permissible Area |
-| 가성소다 | NAOH | Caustic Soda(NACH) |
-| 가조시간 | PDOSN | Possible Duration Of Sunshine |
-| 가중평균 | WGAVG | Weighted Average |
-| 가축분뇨 | LVEXTN | Livestock Excretions |
-| 간선시설 | ATLFCS | Arterial Facilities |
-| 감가상각 | DPRC | Depreciation |
-| 감시수량 | MTRWQT | Monitoring Water Quantity |
-| 강수확률 | POR | Probability Of Rainfall |
-| 개발면적 | DVLPAR | Developed Area |
-| 개인식별 | PRIDTF | Personal Identification |
-| 개인정보 | PRVC | Privacy |
-| 객체면적 | OBJTAR | Object Area |
-| 거주면적 | HABAR | Habitation Area |
-| 거치연수 | DFYRS | Deferment Years |
-| 건물면적 |  |  |
-| 건물번호 | BNO | Building Number |
-| 건물본번 | BMNO | Building Main Number |
-| 건물부번 | BSNO | Building Sub Number |
-| 건설기계 | CTCQ | Construction Equipment |
-| 건축면적 | BDAR | Building Area |
-| 검정곡선 | CLBCV | Calibration Curve |
-| 겨울철새 | WNTVST | Winter Visitor |
-| 결정계수 | RSQR | R-Squared |
-| 경과연수 | ELYRS | Elapsed Years |
-| 경로우대 | SNPR | Senior Preference |
-| 경상이익 | ORDPF | Ordinary Profit |
-| 경작면적 | CLTVAR | Cultivation Area |
-| 경지정리 | ROEL | Readjustment Of Erable Land |
-| 경합채권 | CMPCLM | Competition Claims |
-| 계약면적 | CTRTAR | Contract Area |
-| 계정과목 | ACNTL | Account Title |
-| 계좌번호 | ACTNO | Account Number |
-| 계좌이체 | ACTRSF | Account Transfer |
-| 계획수량 | DSNWQT | Design Water Quantity |
-| 고도처리 | AWTR | Advanced Water Treatment |
-| 고등균류 | HGF | Higher Fungi |
-| 고등학교 | HGSCHL | High School |
-| 고속도로 | HWAY | Express Highway |
-| 고수부지 |  |  |
-| 고시면적 | NTFAR | Notified Area |
-| 고용보험 | EPIS | Employment Insurance |
-| 고정비율 | FARTO | Fixed Assets Ratio |
-| 고체연료 | HTTBS | Heat Tabs |
-| 공간정보 | SPTINF | Spatial Information |
-| 공공기관 | PBNST | Public Institution |
-| 공공누리 | KOGL | Korea Open Government License |
-| 공공수량 | PBCWQT | public water quantity |
-| 공급면적 | SPLYAR | Supply Area |
-| 공급설비 | SPLFC | Supply Facilities |
-| 공동명의 | JNTNM | Joint Name |
-| 공동수급 | JSD | Joint Supply And Demand |
-| 공동주택 | APTCPX | Apartment Complex |
-| 공부면적 | PBRGAR | Public Register Area |
-| 공시지가 | OALP | Officially Announced Land Price |
-| 공업용수 | IWTR | Industrial Water |
-| 공용면적 | CMAR | Common Area |
-| 공원면적 | PRKAR | Park Area |
-| 공유면적 | SHRAR | Shared Area |
-| 공통비용 |  |  |
-| 과세면적 | TXAR | Taxable Area |
-| 과세표준 | TXBS | Tax Base |
-| 과오납금 | OVPMNT | Overpayments |
-| 관개용수 | WTFIR | Water For Irrigation |
-| 관리기관 | MGC | Management Agency |
-| 관리주체 | MNATH | Management Authority |
-| 광역시도 | MCTPV | Metropolitan Cities And Provinces |
-| 교류전류 | AC | Alternating Current |
-| 교육과정 | CRCLM | Curriculum |
-| 교육기관 | EDNST | Education Institution |
-| 교육연수 | EDTRN | Education And Training |
-| 구름저항 | RLGRS | Rolling Resistance |
-| 구비서류 | RQDOC | Required Documents |
-| 구상채권 | RIDNT | Right Of Indemnity |
-| 국립공원 | NTPK | National Park |
-| 국민연금 | NPN | National Pension |
-| 국회의원 | MTNA | Member Of The National Assembly |
-| 군립공원 | CNTRPK | Country Park |
-| 규제개혁 | RGRF | Regulatory Reform |
-| 그룹웨어 | GRPWR | Groupware |
-| 근로소득 | ERICM | Earned Income |
-| 근무연수 | SVCYRS | Service Years |
-| 근속연수 | CSYRS | Continuous Service Years |
-| 금융기관 | FNST | Financial Institution |
-| 급속여과 | RPDFTR | Rapidity Filtration |
-| 기능점수 | FP | Function_Point |
-| 기록물철 | RCDSF | Records Files |
-| 기말잔액 | EBLNC | Ending Balance |
-| 기준면적 | RFAR | Reference Area |
-| 기초잔액 | OPBLNC | Opening Balance |
-| 기타면적 | OTHRAR | Other Area |
-| 기후대기 | CLAIR | Climate And Air |
-| 내부면적 | INTNAR | Internal Area |
-| 내용년수 |  |  |
-| 내용연수 | SVLF | Service Life |
-| 네트워크 | NTWRK | Network |
-| 노동조합 | LBUN | Labor Union |
-| 노출면적 | EXPDAR | Exposed Area |
-| 녹색제품 | GPRDC | Green Product |
-| 녹지면적 | GRNAR | Green Area |
-| 녹피면적 | GRCVAR | Green Covered Area |
-| 뉴스레터 | NEWSL | Newsletter |
-| 다면평가 | MSEVL | Multisource Evaluation |
-| 다운로드 | DWNLD | Download |
-| 단과대학 | CLG | College |
-| 단기자금 | SRTF | Short Term Fund |
-| 담수어류 | FWF | Freshwater Fish |
-| 담수조류 | ALG | Algae |
-| 당좌예금 | CKACNT | Checking Account |
-| 대기발령 | PLWTLS | Being Placed On The Waiting List |
-| 대기배출 | ATEMS | Atmospheric Emission |
-| 대기오염 | ARPLT | Air Pollution |
-| 대기환경 | ATENV | Atmospheric Environment |
-| 대상업체 | TBET | Target Business Entity |
-| 대위변제 | SBRG | Subrogation |
-| 대장균군 | CLFG | Coliform Group |
-| 대지면적 | SIAR | Site Area |
-| 대표이사 | CEO | Chief Executive Officer |
-| 데이터셋 | DTST | Data Set |
-| 도서지역 | ISLND | Islands |
-| 도전양식 | CCRF | Cultivation Of Carp In Rice Fields |
-| 독성물질 | TOXST | Toxic Substance |
-| 독성지수 | TXIDX | Toxicity Index |
-| 등기원인 | RGCS | Registration Cause |
-| 디바이스 | DVCE | Device |
-| 라이선스 | LCS | License |
-| 로그아웃 | LGT | Log Out |
-| 마일리지 | MLG | Mileage |
-| 매개변수 | PARM | Parameter |
-| 매우만족 | HSTFY | Highly Satisfy |
-| 매입세액 | IPTXAM | Input Tax Amount |
-| 메인화면 | MSCRN | Main Screen |
-| 멸종위기 | CRETN | Crisis Of Extinction |
-| 명품마을 | MPVLLG | Myeongpum Village |
-| 모니터링 | MNTR | Monitoring |
-| 무기물질 | NRGNC | Nonorganic |
-| 무수수량 | NRVWTR | Non Revenue Water |
-| 무효수량 | INFWQT | Ineffective Water Quantity |
-| 물가지수 | PRIDX | Price Index |
-| 미리보기 | PRVW | Preview |
-| 미성년자 | LMNR | Legally a Minor |
-| 미세먼지 | PM | Particulate Matter |
-| 미소입지 | MCRST | Micro Site |
-| 민원서류 | CADOC | Civil Affair Documents |
-| 바로가기 | SCUT | Shortcut |
-| 바이러스 | VRS | Virus |
-| 바탕시료 | BLSMPL | Blank Sample |
-| 박테리아 | BCTR | Bacteria |
-| 발행기관 | PBINS | Publish Institute |
-| 방지시설 | PRVFCT | Prevention Facility |
-| 배당요구 | DVDMND | Dividend Demand |
-| 배수방식 | DRGPTN | Drainage Pattern |
-| 배수암거 | DGCVT | Drainge Culvert |
-| 배수통관 | CGC | Circular Gate Culvert |
-| 배출수량 | DCWQTY | Discharge Water Qauntity |
-| 배출수지 | EMTWTR | Emit Drain Water |
-| 배출활동 | EMAT | Emission Activity |
-| 배후습지 | RRSMLD | Rear Swampy Land |
-| 백두대간 | BDMTRG | Baekdudaegan Mountain Range |
-| 법인세율 | CPTXRT | Corporate Tax Rate |
-| 베셀함수 | BSFUN | Bessel Function |
-| 벤처기업 | VENT | Venture Enterprise |
-| 벤치마크 | BCHM | Benchmark |
-| 보수월액 | MRAMT | Monthly Remuneration Amount |
-| 보정계수 | COFC | Correction Factor |
-| 보증료율 | GRNRT | Guarantee Rate |
-| 보험료율 | PMRT | Premium Rate |
-| 보훈번호 | PVNO | Patriots And Veterans Number |
-| 본류면적 | MNSTAR | The Main Stream Area |
-| 부외자산 | NLAST | Non-Ledger Assets |
-| 부유물질 | SPNS | Suspended Solid |
-| 부재지주 | ABLD | Absentee Landlord |
-| 부정수급 | ILRCP | Illegal Receipt |
-| 부지면적 | PLTAR | Plottage Area |
-| 부착조류 | ATAG | Attached Algae |
-| 분류체계 | TXNM | Taxonomy |
-| 분양면적 | LTOTAR | Lotting-Out Area |
-| 불감수량 | URCWQT | Under Recognition Water Qauntity |
-| 불납결손 | LSNPY | Loss By Nonpayment |
-| 불이행량 | UFDQTY | Unfulfilled Quantity |
-| 불쾌지수 | DCFIDX | Discomfort Index |
-| 불투수면 | IVAREA | Impervious Area |
-| 불확실도 | UCTMR | Uncertainty Of Measurement |
-| 불활성화 | INCTVN | Inactivation |
-| 브라우저 | BRWSR | Browser |
-| 블랙박스 | BLBOX | Black Box |
-| 비내식성 | NCNRT | Non Corrosion Resistant |
-| 비밀번호 | PSWD | Password |
-| 비시가지 | UCTARA | Un City Area |
-| 비정규직 | IREMP | Irregular Employee |
-| 사고수습 | ACDRES | Accident Response |
-| 사업면적 | BZAR | Business Area |
-| 사업분야 | BSR | Business Area |
-| 사업유형 | BTYP | Biz Type |
-| 사용수량 | USEWQT | Use Water Quantity |
-| 산림면적 | FRSTAR | Forest Area |
-| 산재보험 | IACI | Industrial Accident Compensation Insurance |
-| 산하기관 | AFINS | Affiliated Institute |
-| 상관계수 | CORR | Correlation Coefficient |
-| 상류면적 | USTRAR | Upstream Area |
-| 상세주소 | DADDR | Detailed Address |
-| 상호명칭 |  |  |
-| 상호작용 | INTRCN | Interaction |
-| 상황전파 | STCM | Situation Communication |
-| 생년월일 | BRDT | Birth Date |
-| 생리학적 | PSLG | Physiologic |
-| 생물학적 | BOIL | Biological |
-| 생태관광 | ECTRSM | Eco-Tourism |
-| 생활하수 | DSWAG | Domestic Sewage |
-| 선수수익 | UNRV | Unearned Revenue |
-| 선하증권 | BL | Bill Of Lading |
-| 선화증권 |  |  |
-| 성과지표 | PI | Performance Indicator |
-| 세계은행 | WB | World Bank |
-| 소득공제 | ICMDCT | Income Deduction |
-| 소득세율 | ICTXRT | Income Tax Rate |
-| 소득월액 | MINAMT | Monthly Income Amount |
-| 소멸시효 | ETPRSC | Extinctive Prescription |
-| 소상공인 | SBO | Small Business Owner |
-| 수도꼭지 | SPGT | Spigot |
-| 수량징수 | WQTCLT | Water Quantity Collection |
-| 수로면적 | WTRAR | Waterway Area |
-| 수리시설 | WTUF | Water Utilization Facilities |
-| 수몰면적 | SBMGAR | Submerged Area |
-| 수문곡선 | HDRGPH | Hydrograph |
-| 수변식생 | RPVGTN | Riparian Vegetation |
-| 수소이온 | HION | Hydrogen Ion |
-| 수수료율 | CMRT | Commission Rate |
-| 수의계약 | PVCT | Private Contract |
-| 수입업체 | IMPTR | Importer |
-| 수입인지 | RVSTM | Revenue Stamp |
-| 수준거표 | LSTND | Level Standard |
-| 수질오염 | WTPLT | Water Pollution |
-| 수혜면적 | BNFAR | Benefitted Area |
-| 순발열량 | NCFV | Net Calorific Value |
-| 순환골재 | RCLAGT | Recycling Aggregate |
-| 승차정원 | RDCPCT | Ride Capacity |
-| 시나리오 | SCNR | Scenario |
-| 시설면적 | FCAR | Facility Area |
-| 시험회차 | TSCYCL | Test Cycle |
-| 식물뿌리 | PLTRT | Plant Root |
-| 식별정보 |  |  |
-| 식생면적 | VGTNAR | Vegetation Area |
-| 식생피복 | VGTCVR | Vegetation Cover |
-| 신용카드 | CRCD | Credit Card |
-| 신용평가 | CRDRTG | Credit Rating |
-| 신적설량 | FSQTY | Fresh Snow Quantity |
-| 실거주지 | RLRSD | Real Residence |
-| 실효세율 | EFTXRT | Effective Tax Rate |
-| 아스팔트 | ASPT | Asphalt |
-| 아우점종 | SBSPCS | Subdominant Species |
-| 아이디어 | IDEA | Idea |
-| 아주좋음 | VRGD | Very Good |
-| 알고리즘 | ALGR | Algorithm |
-| 암거면적 | UDRAR | Underdrain Area |
-| 액면가격 |  |  |
-| 액티비티 |  |  |
-| 야생동물 | WANMLS | Wild Animals |
-| 야생생물 | WLDF | Wildlife |
-| 양해각서 | MOU | Memorandum Of Understanding |
-| 업데이트 |  |  |
-| 업무분장 | TSKASN | Task Assignment |
-| 여권번호 | PNO | Passport Number |
-| 여성기업 | FOBIZ | Female-Owned Business |
-| 여울면적 | RPDSAR | Rapids Area |
-| 연립주택 | TNHS | Town House |
-| 연말정산 | YTXADJ | Year-End Tax Adjustment |
-| 연차휴가 | ANVCT | Annual Vacation |
-| 염지하수 | SLTUGW | Salty Underground Water |
-| 영점표고 | ZRELV | Zero Elevation |
-| 예산전용 | DVSBGT | Diversion Of Budget |
-| 오브젝트 |  |  |
-| 오수처리 | SWGDPL | Sewage Disposal |
-| 오염물질 | PLTT | Pollutant |
-| 오프라인 | OFLN | Offline |
-| 온실가스 | GRGS | Greenhouse Gas |
-| 완료면적 | CMPTAR | Completed Area |
-| 완료수량 | CMPWQT | Complete Water Quantity |
-| 완속여과 | SLWFTR | Slow Filtration |
-| 외래생물 | ALSP | Alien Species |
-| 외부면적 | EXTNAR | External Area |
-| 요금수량 | CRGWQT | Charge Water Quantity |
-| 용도지역 | ZNG | Zoning |
-| 용존산소 | DOX | Dissolved Oxygen |
-| 용존총인 | DTP | Dissolved Total Phosphorus |
-| 용지면적 | LANDAR | Land Area |
-| 용해성철 | SI | Soluble Iron |
-| 우편번호 | ZIP | Zip Code |
-| 운영체제 | OS | Operating System |
-| 원도급자 | ORGCTR | Original Contractor |
-| 원소유자 | ORGOWN | Original Owner |
-| 원천징수 | WTHD | Withholding |
-| 웹사이트 |  |  |
-| 유가증권 | MSCRT | Marketable Securities |
-| 유기물질 | ORGMT | Organic Matter |
-| 유기탄소 | ORGCB | Organic Carbon |
-| 유동부채 | CRLBL | Current Liability |
-| 유동비율 | CRRT | Current Ratio |
-| 유동자산 | CRAST | Current Asset |
-| 유류탱크 | OLTNK | Oil Tank |
-| 유수수량 | RVNWTR | Revenue Water |
-| 유역면적 | DRAR | Drainage Area |
-| 유전자원 | GRSC | Genetic Resources |
-| 유지관리 | MNTMNG | Maintenance Management |
-| 유지보수 | MNTN | Maintenance |
-| 유효수량 | EFTWQT | Effective Water Quantity |
-| 육상면적 | LDBSAR | Land Based Area |
-| 이격거리 | SPDST | Seperated Distance |
-| 이노비즈 | INOBIZ | Innovation Business |
-| 이용면적 | USGAR | Usage Area |
-| 이자수익 | INTRV | Interest Revenues |
-| 이전신청 | RCTAPL | Relocation  Apllication |
-| 이전연도 | PRVYR | Previous Year |
-| 인공증식 | CPPGN | Captive Propagation |
-| 인산염인 | PO4P | Phosphate Phosphorus |
-| 인센티브 | ICNTV | Incentive |
-| 인터넷망 | ITNTNW | Internet Network |
-| 일기개황 | WTHST | Weather Situation |
-| 일련번호 | SN | Serial Number |
-| 일상감사 | DLADT | Daily Audit |
-| 임대면적 | RNTAR | Rent Area |
-| 임차면적 | LSAR | Leased Area |
-| 자금이체 | FNDTR | Fund Transfer |
-| 자기소개 | SLFINT | Self Introduction |
-| 자기자본 | EQCPTL | Equity Capital |
-| 자기평가 | SLFEVL | Self Evaluation |
-| 자동이체 | ATTR | Automatic Transfer |
-| 자동차세 | AMTX | Automobile Tax |
-| 자본조정 | CPAD | Capital Adjustment |
-| 자연보호 | CTNT | Conservation Of Nautre |
-| 자원봉사 | VLTR | Volunteering |
-| 자치단체 |  |  |
-| 장바구니 | SHPBS | Shopping Basket |
-| 장부가액 | BKVL | Book Value |
-| 재무제표 | FNSTM | Financial Statements |
-| 재배작물 | CRTLVN | Crops Of Cultivation |
-| 재사용량 | RSDQTY | Reused Quantity |
-| 재수출국 | RPGCNY | Reexporting Country |
-| 재이용수 | RUSWT | Reuse Water |
-| 재충전량 | RCRQTY | Recharged Quantity |
-| 재택근무 | TLCM | Telecommuting |
-| 재활용량 | RCYQTY | Recycled Quantity |
-| 저소득층 | LINBR | Low Income Bracket |
-| 저수면적 | IMPDAR | Impoundment Area |
-| 저수용량 | RSCPT | Reservoir Capacity |
-| 저작권자 | CPRGTR | Copyright Holder |
-| 저장매체 | STRMDA | Storage Media |
-| 적색목록 | RLST | Redlist |
-| 적용세율 | APTXRT | Applied Tax Rates |
-| 전기탐사 | ELCRST | Electrical Resistivity |
-| 전문분야 | ARSP | Area Of Specialty |
-| 전용면적 | XUAR | Exclusive Use Area |
-| 전자결재 | ELAPR | Electronic Approval |
-| 전자계약 | ELCT | Electronic Contract |
-| 전자문서 | ELDOC | Electronic Document |
-| 전자발행 | ELPBL | Electronic Publication |
-| 전자서명 | ELSGN | Electronic Signature |
-| 전자우편 |  |  |
-| 전자접수 | ELRCP | Electronic Receipt |
-| 전체면적 | WHLAR | Whole Area |
-| 전통시장 | TRMKT | Traditional Market |
-| 전화번호 | TELNO | Telephone Number |
-| 점오염원 | PTPSRC | Point Pollution Source |
-| 정격전압 | RVLT | Rating Voltage |
-| 정격출력 | RTOPUT | Rated Output |
-| 정량평가 | QTEVL | Quantitative Evaluation |
-| 정성평가 | QLEVL | Qualitative Evaluation |
-| 정수처리 | WTRTRM | Water Treatment |
-| 정유공정 | RFPC | Refining Process |
-| 제약시장 | PHMRKT | Pharmaceutical Market |
-| 제조업체 | MNFCO | Manufacture Company |
-| 제조회사 |  |  |
-| 조경면적 | LAAR | Landscape Architecture Area |
-| 조도계수 | RGHCF | Roughness Coefficient |
-| 종사업장 | MRBPL | Minor Business Place |
-| 주건축물 | MBLD | Main Building |
-| 주계약자 | MCNTR | Main Contractor |
-| 주담당자 | MPIC | Main Person In Charge |
-| 주무관청 | CMPADG | Competent Administrative Agency/Office |
-| 주민번호 |  |  |
-| 주민세율 | RSTXRT | Residence Tax Rate |
-| 주사업자 | MBPR | Main Business Person |
-| 주사업장 | MBPL | Main Business Place |
-| 주상복합 | MUBLD | Mixed-Use Buildings |
-| 주생산품 | MPRD | Main Product |
-| 주택면적 | HSAR | House Area |
-| 주행모드 | DSCHDL | Drive Schedule |
-| 중부원점 | CTRMRD | Central Meridian |
-| 중소기업 | SME | Small And Medium Enterprise |
-| 즐겨찾기 | BKMK | Bookmark |
-| 증발산량 | EVTRTN | Evapotranspiration |
-| 증발잠열 | LHOV | Latent Heat Of Vaporization |
-| 지도교수 | ACAVSR | Academic Adviser |
-| 지류면적 | TRBAR | Tributary Area |
-| 지목면적 | LDCGAR | Land Category Area |
-| 지번본번 |  |  |
-| 지번부번 |  |  |
-| 지역지구 | ZNDST | Zoning District |
-| 지오서버 | GSVR | Geoserver |
-| 지적대장 |  |  |
-| 지적면적 | PBCDAR | Public Cadastre Area |
-| 지중온도 | SLTMPR | Soil Temperature |
-| 지체상금 | LQDMG | Liquidated Damages |
-| 지형지물 | FTRE | Feature |
-| 질의응답 | QNA | Question And Answer |
-| 집수구역 | CHMARA | Catchment Area |
-| 집합건물 | CNBD | Condominium Buildings |
-| 차대번호 | VIN | Vehicle Identification Number |
-| 차량번호 |  |  |
-| 처리수량 | PRCWQT | Process Water Quantity |
-| 처리효율 | DSPEFC | Disposal Efficiency |
-| 청정연료 | CLNRFL | Cleaner Fuel |
-| 체크카드 | CKCRD | Check Card |
-| 초등학교 | ELSCHL | Elementary School |
-| 총가입자 | TNSBSR | Total Subscribers |
-| 총감축량 | TRNQTY | Total Reduction Quantity |
-| 총경년관 | TNAGP | Total Aged Pipes |
-| 총계획량 | TPLQTY | Total Planned Quantity |
-| 총매립량 | TLFQTY | Total Landfilled Quantity |
-| 총발열량 | TCLVL | Total Calorific Value |
-| 총방류량 | TOTFL | Total Outflow |
-| 총방문자 | TVSTR | Total Visitors |
-| 총배출권 | TEMCRD | Total Emmision Credit |
-| 총배출량 | TEHQTY | Total Exhaust Quantity |
-| 총부존량 | TPTQTY | Total Potential Quantity |
-| 총사업비 | TPCO | Total Project Cost |
-| 총사용량 | TUQTY | Total Usage Quantity |
-| 총세대수 | TNOHSH | Total Number Of Households |
-| 총신청량 | TAPQTY | Total Applied Quantity |
-| 총연구비 | TRSCO | Total Research Cost |
-| 총이동량 | TMVQTY | Total Moved Quantity |
-| 총인구수 | TPPL | Total Population |
-| 총인원수 | TNOPE | Total Number Of People |
-| 총인정량 | TRGQTY | Total Recognized Quantity |
-| 총자본금 | TEQCP | Total Equity Capital |
-| 총저수량 | TREQTY | Total Reservoir Quantity |
-| 총직원수 | TNOEMP | Total Number Of Employees |
-| 총하수량 | TSWQTY | Total Sewage Quantity |
-| 총할당량 | TQTY | Total Quota |
-| 총회수량 | TRVQTY | Total Retrieved Quantity |
-| 출제회차 | SQCYCL | Set Exam Questions Cycle |
-| 취득면적 | ACQAR | Acquired Area |
-| 침수면적 | FLDAR | Flooded Area |
-| 침엽수림 | CFF | Coniferous Forests |
-| 카카오톡 | KATLK | Kakao Talk |
-| 카탈로그 | CTLG | Catalog |
-| 카테고리 |  |  |
-| 캠벨선도 | CAMPDG | Campbell Diagram |
-| 커뮤니티 | CMNTY | Community |
-| 컨설턴트 | CNSLTT | Consultant |
-| 컨트롤러 | PCTLR | (Program) Controllor |
-| 콘크리트 | CNCRT | Concrete |
-| 큐알코드 |  |  |
-| 클라우드 | CLD | Cloud (Computing) |
-| 토지대장 | LNDRG | Land Register |
-| 토지면적 | LDAR | Land Area |
-| 토지이동 | AOCR | Alteration Of Cadastral Record |
-| 토지피복 | LCV | Land Cover |
-| 통근버스 | CMBUS | Commuter Bus |
-| 통상임금 | ORWG | Ordinary Wage |
-| 투수면적 | PRMBAR | Permeable Area |
-| 파라미터 |  |  |
-| 파트너십 | PTNS | Partnership |
-| 팝업메뉴 |  |  |
-| 패스워드 |  |  |
-| 팩스번호 | FXNO | Fax Number |
-| 편의시설 | CVNFCL | Convenient Facilities |
-| 편입면적 | ICLAR | Included Area |
-| 폐수처리 | WSWT | Wastewater Treatment |
-| 표준편차 | STDDV | Standard Deviation |
-| 프로그램 | PRGRM | Program |
-| 프로세스 | PRCSS | Process |
-| 프로젝트 |  |  |
-| 플라스틱 | PLSTIC | Plastic |
-| 플랑크톤 | PLNKTN | Plankton |
-| 피보험자 | ISRT | Insurant |
-| 피승계인 | SCSR | Successor |
-| 피신청인 |  |  |
-| 피신청자 | RQPRSN | Requested Person |
-| 필지면적 | LPAR | Land Parcel Area |
-| 하구면적 | ESTNAR | Estuarine Area |
-| 하드웨어 | HW | Hardware |
-| 하상면적 | RVBDAR | Riverbed Area |
-| 하수처리 | SWTRMT | Sewage Treatment |
-| 하자보수 | WRP | Warranty Repair |
-| 학술대회 | SMPSM | Symposium |
-| 합계면적 | SUMAR | Sum Area |
-| 합성수지 | SYRSN | Synthetic Resin |
-| 해시태그 | HSTG | Hashtag |
-| 해양투기 | OCDU | Ocean Dumping |
-| 행정구역 | ADMDST | Administrative District |
-| 행정기관 | ADMNST | Administrative Institution |
-| 행정처분 | ADMDSP | Administrative Disposition |
-| 허가면적 | PMTAR | Permitted Area |
-| 현장소장 | STMGR | Site Manager |
-| 홈페이지 |  |  |
-| 홍수사상 | FLDEV | Flood Event |
-| 환경매체 | ENVMDA | Environment Media |
-| 환경청장 | AOEO | Administrator Of Environmental Office |
-| 활동자료 | ATTD | Activity Data |
-| 활엽수림 | BDF | A Broadleaf Forest |
-| 회계연도 | FYR | Fiscal Year |
-| 회수시설 | RTFT | Retrieval Facilities |
-| 후기내용 | RVCN | Review Contents |
-| 휴대전화 | MPHN | Mobilephone |
-| 간접생산비 |  |  |
-| 감가상각률 | DPRT | Depreciation Rate |
-| 감가상각비 | DPCO | Depreciation Cost |
-| 건강보험증 | HIC | Health Insurance Card |
-| 건축물대장 | BDRG | Building Register |
-| 계면활성제 | SRFCT | Surfactant |
-| 계약보증금 | CRYMY | Contract Guaranty Money |
-| 계획하상고 | PLNRB | Planned River Bed |
-| 고도처리량 | AWTVLM | Advanced Water Treatment Volume |
-| 고용보험료 | EPISPM | Employment Insurance Premium |
-| 골재채취업 | AGPKBS | Aggregate Picking Business |
-| 공간데이터 | SPCDT | Space Data |
-| 공급받는자 | SPLRCP | Supply Recipient |
-| 공인인증서 | PCRTF | Public Certificate |
-| 과불화탄소 | PFCS | Perfluoro Carbon |
-| 과학기술인 | SCEGNR | Scientists And Engineers |
-| 구우편번호 | OZIP | Old Zip Code |
-| 구조물면적 | STRTAR | Structures Area |
-| 국가정보원 | NIS | National Intelligence Service |
-| 국고보조금 | GVSBS | Government Subsidy |
-| 기초배출량 | BSCEMS | Basic Emissions |
-| 납세의무자 |  |  |
-| 냉난방면적 | HACAR | Heating And Cooling Area |
-| 농축수산물 | ARLSFS | Agricultural And Livestock And Fishery |
-| 다세대주택 | MLTPHS | Multiplex House |
-| 다양도지수 | DVRIDX | Diversity Index |
-| 대권역면적 | LSRBAR | Large Sphere Of Influence In A River Basin Area |
-| 대유역면적 | LRBAR | Large River Basin Area |
-| 만수위면적 | FWLVAR | Full Water Level Area |
-| 매우불만족 | HDSTFY | Highly Dissatisfy |
-| 매출원가율 | COGSRT | Cost Of Goods Sold (Cogs) Ratio |
-| 메타데이터 | MTDAT | Metadata |
-| 멤버스카드 | MBSCR | Members Card |
-| 면적강우량 | ARRF | Areal Rainfall |
-| 멸종위기종 | EGSPCS | Endangered Species |
-| 무척추동물 | INVTB | Invertebrates |
-| 문자메시지 | TMSG | Text Message (Service) |
-| 미구축면적 | UNBTAR | Unbuilt Area |
-| 미수납수량 | NPDWQT | Non Paid Water Quantity |
-| 바이오가스 | BGS | Biogas |
-| 바이오매스 | BMSS | Biomass |
-| 방사성물질 | RATSBT | Radioactive Substance |
-| 배슬러지지 | EMSLDG | Emit Sludge |
-| 배출허용량 | EMSALW | Emission Allowances |
-| 법정보호종 | LPRSP | Legally Protected Species |
-| 복리후생비 | WLFCO | Welfare Cost |
-| 부가가치세 | VAT | Value Added Tax |
-| 부유물질량 | SPNQTY | Suspended Solid Quantity |
-| 부착돌말류 | ATTDM | Attached Diatom |
-| 불투수면적 | IMPBAR | Impermeable Area |
-| 비유동부채 | NCLBL | Non-Current Liabilities |
-| 비유동자산 | NCAST | Non-Current Assets |
-| 비점오염원 | NPTLS | Nonpoint Pollution Source |
-| 사업소면적 |  |  |
-| 사업자번호 |  |  |
-| 사업장면적 | BZSTAR | Business Site Area |
-| 사전할당량 | PRALC | Pre-Allocation |
-| 사회적기업 | SCENT | Social Enterprise |
-| 상쇄배출권 | KCU | Korean Credit Unit |
-| 상시만수위 | NHWL | Normal High Water Level |
-| 생물다양성 | BODVS | Biodiversity |
-| 생물측정망 | AEM | Aquatic Ecology Monitering Network |
-| 생태자연도 | ENM | Ecological And Natural Map |
-| 섭식기능군 | FFG | Funtional Feeding Groups |
-| 세계측지계 | WGS84 | World Geodetic System |
-| 세금계산서 | TXIV | Tax Invoice |
-| 소수력발전 | SMHPWR | Small Hydropower |
-| 소유권이전 | OWNTRS | Ownership Transfer |
-| 소유역면적 | SBAREA | Sub Basin Area |
-| 소프트웨어 | SW | Software |
-| 수리모델링 | MTMD | Mathematical Modeling |
-| 수리안전답 | IRPDY | Irrigated Rice Paddy |
-| 수리전도도 | HYDCON | Hydraulic Conductivity |
-| 수질측정망 | WQMN | Water Quality Monitoring Network |
-| 숙련도시험 | PFTSTG | Proficiency Testing |
-| 스트레이너 | STRENE | Strainer |
-| 시뮬레이션 | SMLT | Simulation |
-| 시장조성자 | MRMKR | Market Maker |
-| 아산화질소 | NTRXD | Nitrous Oxide |
-| 아이핀번호 | IPIN | Internet Personal Identification Number |
-| 아황산가스 | SPDX | Sulphur Dioxide |
-| 양서파충류 | AMPHRP | Amphibian Reptile |
-| 업그레이드 | UPGRAD | Upgrade |
-| 연속지적도 | CCDM | Continuous Cadastral Map |
-| 열병합발전 | CHP | Combined Heat And Power |
-| 영업외비용 | NOCO | Non-Operating Cost |
-| 영업외수익 | NOICM | Non-Operating Income |
-| 오수처리량 | SWDQTY | Sewage Disposal Quantity |
-| 외국인번호 |  |  |
-| 용존고형물 | TDS | Total Dissolved Solide |
-| 용존산소량 | DOQTY | Dissolved Oxygen Quantity |
-| 용존총질소 | DTN | Dissolved Total Nitrogen |
-| 우점종면적 | DMSPAR | Dominant Species Area |
-| 워크플로우 | WFLW | Workflow |
-| 웹맵서비스 | WMS | Web Map Service |
-| 유기물질량 | OMQTY | Organic Matter Quantity |
-| 이산화질소 | NTDX | Nitrogen Dioxide |
-| 이산화탄소 | CBDX | Carbon Dioxide |
-| 이해관계인 |  |  |
-| 이해관계자 | STHDR | Stakeholder |
-| 인증배출량 | CRTEMS | Certified Emissions |
-| 인터페이스 | IF | Interface |
-| 일산화탄소 | CBMX | Carbon Monoxide |
-| 임금피크제 | SLPK | Salary Peak |
-| 임대차계약 | LSCT | Lease Contract |
-| 잉여배출권 | SPSEMP | Supplus Emission Permits |
-| 자본적지출 | CPEX | Capital Expenditure |
-| 자연발화성 | PYHRC | Pyropholic |
-| 전기자동차 | ELCAR | Electric Car |
-| 전기전도도 | ELCD | Electrical Conductivity |
-| 전자기록물 | ERCDS | Electronic Records |
-| 정수여과지 | WTFB | Water Treatment Filter Basin |
-| 조류측정망 | SWMN | Sea Weed Mesure Network |
-| 주거래은행 | MBNK | Main Bank |
-| 주차장면적 | PKLTAR | Parking Lot Area |
-| 중권역면적 | MSRBAR | Middle Sphere Of Influence In A River Basin Area |
-| 지식재산권 | IPR | Intellectual Property Rights |
-| 질소산화물 | NOX | Nitrogen Oxide |
-| 차상위계층 | LICLS | Low Income Class |
-| 채무불이행 | DFOBL | Default On An Obligation |
-| 천연기념물 | NTM | Natural Monument |
-| 체크리스트 |  |  |
-| 초미세먼지 | FPM | Fine Particulate Matter |
-| 총교육시간 | TTRHR | Total Training Hours |
-| 총근로자수 | TNOWK | Total Number Of Workers |
-| 총근무시간 | TWKHR | Total Work Hours |
-| 총대장균군 | CFBCTR | Coliform Bacteria |
-| 총등록건수 | TRGCNT | Total Registration Count |
-| 총사업비용 |  |  |
-| 총유기탄소 | TORGCB | Total Organic Carbon |
-| 총재사용량 | TRDQTY | Total Reused Quantity |
-| 총저수용량 | TRSCPT | Total Reservoir Capacity |
-| 최심하상고 | LRB | The Lowest River Bed |
-| 최종할당량 | FNALC | Final Allocation |
-| 추가할당량 | ADDALC | Additional Allocation |
-| 추곡수매량 | AGPQTY | Autumn Grain Purchase Quantity |
-| 측정망면적 | MTNTAR | Monitoring Network Area |
-| 친환경마을 | ECVL | Eco-Friendly Village |
-| 클라이언트 | CLNT | Client |
-| 테스트베드 | TSTBD | Test Bed |
-| 투수량계수 | TRSMI | Transmissivity |
-| 평가배출량 | ASDEMS | Assessed Emissions |
-| 평균하상고 | AVGRB | Average River Bed |
-| 평형하상고 | EBRB | Equilibrium River Bed |
-| 폐기물처리 | WSTDSP | Waste Disposal |
-| 풍부도지수 | RCNIDX | Richness Index |
-| 하수미처리 | USWTMT | Un Sewage Treatment |
-| 하수처리량 | SWTQTY | Sewage Treatment Quantity |
-| 하수처리수 | STWTR | Sewage Treatment Water |
-| 하수처리장 | STPLNT | Sewage Treatment Plant |
-| 하이브리드 | HYB | Hybrid |
-| 할당배출권 | KAU | Korean Allownce Unit |
-| 할당취소량 | ALCRVC | Allocation Revocation |
-| 해산어류종 | MFSPCS | Marine Fishes Species |
-| 헬프데스크 | HDESK | Helpdesk |
-| 현금매도율 | CSSRT | Cash Selling Rate |
-| 현금영수증 | CSRT | Cash Receipt |
-| 환경주제도 | ENVTHM | Environmental Thematic Map |
-| 활동자료량 | ADQTY | Activity Data Quantity |
-| 회유성어종 | DRMSPC | Diadromous Species |
-| 경사면일사량 | SRDINC | Solar Radiation Quantity On Inclined Surface |
-| 고유식별정보 | UII | Unique Identifier Information |
-| 과불화탄소량 | PFCQTY | Perfluoro Carbon Quantity |
-| 국지수집장치 | LAU | Local Area Observation Unit |
-| 굴뚝자동측정 | CMAM | Chimney Automatic Measurement |
-| 기초구역번호 |  |  |
-| 기한이익상실 | TRGCLS | Trigger Clause |
-| 기후변화협약 | UNFCCC | United Nations Framework Convention On Climate Change |
-| 놀이시설면적 | PFCAR | Play Facility Area |
-| 농어촌특별세 | ASRDTX | ACT ON SPECIAL RURAL DEVELOPMENT TAX |
-| 대기오염물질 | ARPLTS | Air Pollutants |
-| 데이터베이스 | DB | Database |
-| 동물플랑크톤 | ZPLKTN | Zooplankton |
-| 명품마을면적 | MPVAR | Myeongpum Village Area |
-| 물이용부담금 | WUALMT | Water Utilization Allotment |
-| 미활용확약서 | LCNM | Letter of Commitment on Nullification of Mitigations |
-| 바이오에너지 | BENRG | Bioenergy |
-| 배출권이월량 | BKEMP | Banking of Emission Permits |
-| 배출권제출량 | SRDEMP | surrender of emission permits |
-| 배출권차입량 | BRWEMP | Borrowing of Emission Permits |
-| 배출권총수량 | TEA | Total Emission Allowances |
-| 배출허용기준 | EQS | Effluent Quality Standard |
-| 배출허용총량 | EMSCAP | (Emission) Cap |
-| 법인등록번호 | CRNO | Corporation Registration Number |
-| 보호구역면적 | RTNAR | Retention Area |
-| 부가가치세율 | VATRT | Value Added Tax Rate |
-| 부대시설면적 | SFAR | Subsidiary Facilities Area |
-| 비점오염물질 | NPLTS | Nonpoint Pollutions |
-| 산림보호구역 | FRSTPA | Forest Protection Area |
-| 생태계교란종 | DISP | Ecological Disruption Species |
-| 수관그늘면적 | WPSHAR | Water Pipe Shade Area |
-| 수리불안전답 | PIRPDY | Partially Irrigated Rice Paddy |
-| 수소이온농도 | PH | Hydrogen Ion Concentration |
-| 수질오염물질 | WTPLTS | Water Pollutants |
-| 수질평가지수 | WQI | Water Quality Index |
-| 슬러지케이크 | SLDGCK | Sludge Cake |
-| 식물플랑크톤 | PTPKTN | Phytoplankton |
-| 신용평가기관 | CRBU | Credit Bureau |
-| 애프터서비스 | AS | After-Sales Service |
-| 애플리케이션 | APP | Application (App) |
-| 어류평가지수 | FAI | Fish Assessment Index |
-| 어플리케이션 |  |  |
-| 우편일련번호 |  |  |
-| 운전면허번호 | DLN | Driver'S License Number |
-| 율리우스날짜 | JLSDY | Julius Day |
-| 일제관측수위 | SWL | Simultanous Water Level |
-| 저서동물지수 | BMI | Benthic Macroinvrtebrates Index |
-| 전도식가동보 | RVOPW | Reversal Operating Weir |
-| 전문처리분야 | SPCFLD | Specialized Field |
-| 전신환매도율 | TTSRT | Telegraphic Transfer Selling Rate |
-| 전신환매입률 | TTBRT | Telegraphic Transfer Buying Rate |
-| 전자납부번호 | EPAYNO | Electronic Payment Number |
-| 전자수입인지 | ERSTP | E-Revenue Stamp |
-| 조정감액수량 | DCMWQT | Decrement Water Quantity |
-| 종합주가지수 | KOSPI | Korean Composite Stock Price Index |
-| 주거공용면적 | DCAR | Dwelling Common Area |
-| 주민등록번호 | RRNO | Resident Registration Number |
-| 주요생산제품 |  |  |
-| 지방자치단체 | LCLGV | Local Government |
-| 지역내총생산 | GRDP | Gross Regional Domestic Product |
-| 총발행주식수 | TSHOSD | Total Shares Outstanding |
-| 토양오염물질 | SLCTMS | Soil Contaminants |
-| 토지이용규제 | LURGLT | Land Use Regulation |
-| 토지피복면적 | LCVAR | Land Cover Area |
-| 토지피복지도 | LCM | Land Cover Map |
-| 특정유해물질 | SHCH | Specified Hazardous Chemicals |
-| 하수종말처리 | FNTRMT | Final Treatment |
-| 하수처리구역 | STAA | Sewage Treatment Area |
-| 핵심성과지표 | KPI | Key Performance Indicator |
-| 행정구역면적 | ADSTAR | Administrative District Area |
-| 환경생태유량 | ENVFLW | Environmental Flow |
-| 환경영향평가 | EIA | Environmental Impact Assessment |
-| 공간정보데이터 | GEOM | (Data) Geometry |
-| 국외반출승인종 | OEASP | Overseas Export Approval Species |
-| 기초생활수급자 | ROBL | Recipients Of Basic Livelihood |
-| 도로명상세주소 |  |  |
-| 분원성대장균군 | FCFS | Fecal Coliforms |
-| 사업자등록번호 | BRNO | Business Registration Number |
-| 사회적협동조합 | SCCP | Social Cooperative |
-| 생태계교란생물 |  |  |
-| 스마트워크센터 | SWC | Smart Work Center |
-| 식생자연도지수 | VNI | Vegetation Naturalness Index |
-| 암모니아성질소 | AMNG | Ammonium Nitrogen |
-| 암호화계좌번호 | ENACNO | Encrypted Account Number |
-| 암호화비밀번호 | ENPSWD | Encrypted Password |
-| 외국인등록번호 | FRNO | Foreigner Registration Number |
-| 자동기상관측소 | AWS | Automatic Weather Station |
-| 자동차등록번호 | VHRNO | Vehicle Registration Number |
-| 전자세금계산서 | ETXIV | Electronic Tax Invoice |
-| 지구온난화지수 | GWPTN | Global Warming Potential |
-| 지상기상관측소 | MTRST | Meteorological Station |
-| 철새도래지면적 | MBDHAR | Migratory Bird Habitat Area |
-| 총트리할로메탄 | THMS | Total Trihalomethane |
-| 탄소중립포인트 | CNPNT | Carbon Neutral Point |
-| 트리클로로에탄 | TCRN | Trichloroethane |
-| 표준지공시지가 |  |  |
-| 하수미처리구역 | RSAA | Raw Sewage Area |
-| 하수처리장면적 | STPAR | Sewage Treatment Plant Area |
-| 한국십진분류법 | KDC | Korea Decimal Classification |
-| 항공화물운송장 | AIRBL | Air Waybill |
-| 국제적멸종위기종 | CSPCS | Cites Species |
-| 국제표준도서번호 | ISBN | International Standard Book Number |
-| 기초생활수급권자 |  |  |
-| 기후에너지환경부 | MCEE | Ministry of Climate, Energy and Environment |
-| 배출량산정계획서 | ECPD | Emission Computation Plan Document |
-| 상쇄배출권전환량 | KCUCVT | KCUS Converted |
-| 서식수변환경지수 | HRI | Haitat And Riparian Index |
-| 서식지적합도지수 | HIS | Habitat Suitability Indexes |
-| 석면함유가능물질 | ACM | Asbestos Containing Materials |
-| 선행토양함수조건 | AMC | Antecedent Moisture Condition |
-| 옥탄올물분배계수 | OWPC | Octanol-Water Partition Coefficient |
-| 외부사업인증실적 | KOC | Korean Offset Credit |
-| 우편번호일련번호 |  |  |
-| 최소검출가능농도 | MDA | Minimum Detectable Activity |
-| 한국표준산업분류 | KSIC | Korean Standard Industrial Classification |
-| 행정정보공동이용 | ADINSR | Administrative Information Sharing |
-| 화학적산소요구량 | COD | Chemical Oxygen Demand |
-| 환경기초조사사업 | EBSP | Environmental Basis Survey Project |
-| 휘발성유기화합물 | VOCS | Volatile Organic Compounds |
-| 미국연방통신위원회 | FCC | Federal Communications Commission |
-| 암호화법인등록번호 | ENCRNO | Encrypted Corporation Registration Number |
-| 암호화주민등록번호 | ENRRNO | Encrypted Resident Registration Number |
-| 개인정보수집이용동의 | PICUC | Personal Information Collection/Use Consent |
-| 생물화학적산소요구량 | BOD | Biochemical Oxygen Demand |
-| 생태계교란야생동식물 |  |  |
-| 암호화사업자등록번호 | ENBRNO | Encrypted Business Registration Number |
-| 저서성대형무척추동물 | BMCRIB | Benthic Macroinvertebrate |
-| 국제표준연속간행물번호 | ISSN | International Standard Serial Number |
-| 총생물화학적산소요구량 | TBOD | Total Biochemical Oxygen Demand |
-| 1회섭취참고량 | RAFOS | Reference Amount For One Serving |
-| 14세 | YO14 | 14 Years Old |
-| 코로나19 | COVID | Covid19 |
-| 차량2부제 | ATNDS | Alternate No-Driving System |
-| 2차원 | DMS2 | Two Dimensions |
-| 제3자 | TDPTY | Third Party |
-| 제3채무자 | GRNS | Garnishee |
-| 3차원 | DMS3 | Three Dimensions |
-| 4대강 | FMRVR | Four Major Rivers |
-| 오픈API | OPAPI | Open Application Programming Interface |
-| API | API | Application Programming Interface |
-| ARS | ARS | Automatic Response System |
-| CAS | CAS | Chemical Abstract Service |
-| CCTV | CCTV | Closed Circuit Television |
-| CI | CI | Connecting Information |
-| CMS | CMS | Cash Management Service |
-| COP | COP | Community Of Practice |
-| CP | CP | Capacity Parameter |
-| CPU | CPU | Central Processing Unit |
-| DB |  |  |
-| DI | DI | Duplicated Joining Verification Information |
-| DN | DN | Distinguish Name |
-| DRM | DRM | Digital Rights Management |
-| EAI | EAI | Enterprise Application Integration |
-| e-mail |  |  |
-| EMAIL |  |  |
-| FAQ | FAQ | Frequently Asked Question |
-| FAX번호 |  |  |
-| FILE |  |  |
-| G2B | G2B | Government-To-Business |
-| GIS | GIS | Geographic Information System |
-| GOTP | GOTP | Government One Time Password |
-| GPKI | GPKI | Government Public Key Infrastructure |
-| GPS | GPS | Global Positioning System |
-| GVPN | GVPN | Government Virtual Private Network |
-| HS | HSYS | Harmonized System |
-| HSK | HSK | Harmonized System Korea |
-| HTML | HTML | Hypertext Markup Language |
-| ID |  |  |
-| IEA | IEA | International Energy Agency |
-| IP | IP | Internet Protocol |
-| IPCC | IPCC | Intergovernmental Panel On Climate Change |
-| ISBN |  |  |
-| JSON | JSON | Javascript Object Notation |
-| KTSN | KTSN | Korea Taxonomic Serial Number |
-| LAN | LAN | Local Area Network |
-| LULUCF | LULUCF | Land Use, Land Use Change And Forestry |
-| MAC | MAC | Medium Access Control |
-| MMS | MMS | Multimedia Messaging Service |
-| MOU |  |  |
-| NCBI | NCBI | National Center For Biotechnology Information |
-| NULL |  |  |
-| OCR | OCR | Optical Character Reader |
-| OECD | OECD | Organization For Economic Cooperation And Development |
-| PC |  |  |
-| PDF | PDF | Portable Document Format |
-| PG | PG | Payment Gateway |
-| PK |  |  |
-| POS | POS | Point Of Sales |
-| QA | QA | Quality Assurance |
-| QC | QC | Quality Control |
-| QR코드 | QRCD | Quick Response Code |
-| RFID | RFID | Radio Frequency Identification |
-| RPA | RPA | Robotics Process Automation |
-| RSS | RSS | Really Simple Syndication |
-| RSSI | RSSI | Received Signal Strength Indication |
-| SMS | SMS | Short Message Service |
-| SNS | SNS | Social Networking Service |
-| SQL | SQL | Structured Query Language |
-| SSID | SSID | Service Set Identifier |
-| SSL | SSL | Secure Sockets Layer |
-| TMS | TMS | Tele Monitoring System |
-| TV수신료 | TVSFE | TV Subscription Fee |
-| UID |  |  |
-| UPS | UPS | Uninterruptible Power Supply |
-| URI | URI | Uniform Resource Identifier |
-| URL | URL | Uniform Resource Locator |
-| USB | USB | Universial Serial Bus |
-| UUID | UUID | Universal Unique Identifier |
-| VOC | VOC | Voice Of Customer |
-| VOD | VOD | Video On Demand |
-| WBS | WBS | Work Breakdown Structure |
-| WRI | WRI | World Resource Institute |
-| WSI | WSI | Water Safety Index |
-| X좌표 | XCRD | X-Coordinate |
-| XML | XML | Extensible Mark-Up Language |
-| Y좌표 | YCRD | Y-Coordinate |
-| Z좌표 | ZCRD | Z-Coordinate |
\ No newline at end of file
+| 단어명                 | 영문약어명 | 영문명                                                |
+| ---------------------- | ---------- | ----------------------------------------------------- |
+| 값                     | VL         | Value                                                 |
+| 강                     | BICLSS     | (Biological) Class                                    |
+| 건                     | EVNTCS     | (Event) Case                                          |
+| 계                     | BIKNDM     | (Biological) Kingdom                                  |
+| 과                     | BIFMLY     | (Biological) Family                                   |
+| 구                     | OLD        | Old                                                   |
+| 국                     | TELOFC     | Telephone Office                                      |
+| 길                     |            |                                                       |
+| 널                     | NUL        | Null                                                  |
+| 논                     | PDFLD      | Paddy Field                                           |
+| 답                     |            |                                                       |
+| 댐                     | DM         | Dam                                                   |
+| 률                     |            |                                                       |
+| 리                     | LI         | Li                                                    |
+| 명                     | NM         | Name                                                  |
+| 목                     | BIORDR     | (Biological) Order                                    |
+| 문                     | BIPHLM     | (Biological) Phylum                                   |
+| 물                     | WTR        | Water                                                 |
+| 밭                     | FILD       | (Farm) Field                                          |
+| 법                     | LAW        | Law                                                   |
+| 보                     | WEIR       | Weir                                                  |
+| 분                     | MI         | Minute                                                |
+| 뷰                     | VIEW       | View                                                  |
+| 산                     | MTN        | Mountain                                              |
+| 선                     | LINE       | Line                                                  |
+| 속                     | BIGNUS     | (Biological) Genus                                    |
+| 수                     | CNT        | Count                                                 |
+| 열                     | HEAT       | Heat                                                  |
+| 원                     |            |                                                       |
+| 월                     | MM         | Month                                                 |
+| 웹                     | WEB        | Web                                                   |
+| 율                     |            |                                                       |
+| 일                     | DAY        | Day                                                   |
+| 전                     |            |                                                       |
+| 종                     | BISPCS     | (Biological) Species                                  |
+| 좌                     | LFT        | Left                                                  |
+| 주                     | MN         | Main                                                  |
+| 쪽                     | PAGE       | Page                                                  |
+| 책                     |            |                                                       |
+| 초                     | SS         | (Time) Second                                         |
+| 층                     | FLR        | Floor                                                 |
+| 타                     | OTHR       | Other                                                 |
+| 팀                     | TEAM       | Team                                                  |
+| 폭                     | WDT        | Width                                                 |
+| 호                     |            |                                                       |
+| 후                     |            |                                                       |
+| 가감                   | ADSB       | Addition And Subtraction                              |
+| 가격                   | PRC        | Price                                                 |
+| 가공                   | MNFCT      | Manufacture                                           |
+| 가구                   | HSHD       | Household                                             |
+| 가능                   | PSBLTY     | Possibility                                           |
+| 가동                   | OPRTNG     | Operating                                             |
+| 가로                   | WDTH       | Width                                                 |
+| 가뭄                   | DRGHT      | Drought                                               |
+| 가산                   | ADTN       | Addition                                              |
+| 가상                   | VR         | Virtual                                               |
+| 가스                   | GAS        | Gas                                                   |
+| 가액                   | EQVL       | Equivalent Value                                      |
+| 가용                   | AVL        | Available                                             |
+| 가입                   | JOIN       | Join                                                  |
+| 가점                   |            |                                                       |
+| 가족                   | FAM        | Family                                                |
+| 가치                   | WRTH       | Worth                                                 |
+| 각도                   | ANGL       | Angle                                                 |
+| 각서                   | MRND       | Memorandum                                            |
+| 각하                   | RJTN       | Rejection                                             |
+| 간격                   | GAP        | Gap                                                   |
+| 간부                   | EXCTV      | Excutive                                              |
+| 간사                   | ORGNZR     | Organizer                                             |
+| 간이                   | SMPLF      | Simplified                                            |
+| 간접                   | IDRT       | Indirect                                              |
+| 간편                   | SMP        | Simplicity                                            |
+| 감독                   | SUP        | Supervision                                           |
+| 감리                   | SPVS       | Supervision                                           |
+| 감면                   | RDCT       | Reduction                                             |
+| 감사                   | ADT        | Audit                                                 |
+| 감소                   | DCRS       | Decrease                                              |
+| 감시                   | SVLNC      | Surveillance                                          |
+| 감액                   | RDAMT      | Reduction Amount                                      |
+| 감점                   | SBPT       | Subtract Points                                       |
+| 감정                   | APRS       | Appraisal                                             |
+| 감지                   | SNSNG      | Sensing                                               |
+| 감축                   | RDC        | Reduction                                             |
+| 강도                   | STRTH      | Strength                                              |
+| 강변                   | RVSD       | Riverside                                             |
+| 강사                   | INSTR      | Instructor                                            |
+| 강수                   | PRCP       | Precipitation                                         |
+| 강우                   | RAIN       | Rain                                                  |
+| 강의                   | LCTR       | Lecture                                               |
+| 강제                   | FRC        | Force                                                 |
+| 개관                   | OPNNG      | Opening                                               |
+| 개도                   | OPRAD      | Opening The Road                                      |
+| 개량                   | IMPRVM     | Improvement                                           |
+| 개문                   | OPGTE      | Opening The Gate                                      |
+| 개발                   | DVLP       | Development                                           |
+| 개방                   | OPN        | Open                                                  |
+| 개별                   | INDIV      | Individual                                            |
+| 개봉                   | OPEN       | Open                                                  |
+| 개선                   | IMPV       | Improvement                                           |
+| 개설                   | ESTBL      | Establishment                                         |
+| 개수                   |            |                                                       |
+| 개시                   | STRT       | Start                                                 |
+| 개업                   | OPBIZ      | Opening Of Business                                   |
+| 개요                   | OTLN       | Outline                                               |
+| 개인                   | INDV       | Individuals                                           |
+| 개점                   | OPSTR      | Open Store                                            |
+| 개정                   | RVSN       | Revision                                              |
+| 개찰                   | BDOPN      | Bid Opening                                           |
+| 개체                   | INDVL      | Individual                                            |
+| 개최                   | HDMT       | Hold A Meeting                                        |
+| 개통                   | OPNG       | Opening                                               |
+| 개폐                   | SWCHG      | Switching                                             |
+| 객석                   | ADTRM      | Auditorium                                            |
+| 객실                   | GSRM       | Guest Room                                            |
+| 객체                   | OBJT       | Object                                                |
+| 갯벌                   | MDF        | Mud Flat                                              |
+| 갱생                   | RGNR       | Regeneration                                          |
+| 갱신                   | UPDT       | Update                                                |
+| 거래                   | DLNG       | Dealings                                              |
+| 거리                   | DSTNC      | Distance                                              |
+| 거부                   | RFUS       | Refuse                                                |
+| 거절                   | RFSL       | Refusal                                               |
+| 거점                   | POSITN     | Position                                              |
+| 거주                   | HAB        | Habitation                                            |
+| 거치                   | DFMT       | Deferment                                             |
+| 건강                   | HLTH       | Health                                                |
+| 건물                   | BLDG       | Building                                              |
+| 건설                   | BLDP       | Build Up                                              |
+| 건수                   | NOCS       | The Number Of Cases                                   |
+| 건의                   | SGST       | Suggestion                                            |
+| 건조                   | DRY        | Dry                                                   |
+| 건축                   | ARCH       | Architecture                                          |
+| 검사                   | INSP       | Inspection                                            |
+| 검색                   | SRCH       | Search                                                |
+| 검수                   | IGI        | Incoming Goods Inspection                             |
+| 검정                   | RCGN       | Recognition                                           |
+| 검증                   | VRFC       | Verification                                          |
+| 검진                   | CKUP       | Checkup                                               |
+| 검체                   | SPCMN      | Specimen                                              |
+| 검출                   | DTCT       | Detection                                             |
+| 검침                   | MTRD       | Meter Reading                                         |
+| 검토                   | RVW        | Review                                                |
+| 게시                   | PSTG       | Posting                                               |
+| 게임                   | GAME       | Game                                                  |
+| 격자                   | LATC       | Lattice                                               |
+| 견적                   | ESTMT      | Estimate                                              |
+| 결과                   | RSLT       | Result                                                |
+| 결근                   | ABSWK      | Absence From Work                                     |
+| 결산                   | SOA        | Settlement Of Accounts                                |
+| 결석                   | ABSNC      | Absence                                               |
+| 결의                   | RSLTN      | Resolution                                            |
+| 결재                   | ATRZ       | Authorization                                         |
+| 결정                   | DCSN       | Decision                                              |
+| 결제                   | STLM       | Settlement                                            |
+| 결측                   | MSNG       | Missing                                               |
+| 결함                   | DFC        | Defect                                                |
+| 결합                   | COMB       | Combination                                           |
+| 결혼                   | MRG        | Marriage                                              |
+| 겸업                   | SDJB       | Side Job                                              |
+| 겸직                   | CCPS       | Concurrent Position                                   |
+| 경감                   | RDUCT      | Reduction                                             |
+| 경계                   | MGNL       | Marginal                                              |
+| 경고                   | WARN       | Warning                                               |
+| 경과                   | ELPS       | Elapse                                                |
+| 경도                   | LOT        | Longitude                                             |
+| 경력                   | CRR        | Career                                                |
+| 경로                   | PATH       | Path                                                  |
+| 경매                   | AUCTN      | Auction                                               |
+| 경보                   | ART        | Alert                                                 |
+| 경비                   | EPS        | Expense                                               |
+| 경영                   | MNGM       | Management                                            |
+| 경위                   | CHIST      | Case History                                          |
+| 경작                   | CLVT       | Cultivation                                           |
+| 경쟁                   | CMPET      | Competition                                           |
+| 경제                   | ECNM       | Economy                                               |
+| 경조                   | CGCD       | Congratulations And Condolences                       |
+| 경차                   | LVHC       | Light Vehicles                                        |
+| 경품                   | GVW        | Giveaway                                              |
+| 경향                   | TNDNC      | Tendency                                              |
+| 경험                   | EXPRNC     | Experience                                            |
+| 계급                   | ECHLN      | Echelon                                               |
+| 계단                   | STAIR      | Stair                                                 |
+| 계대                   | SCDNG      | Succeeding                                            |
+| 계량                   | MSR        | Measuring                                             |
+| 계산                   | CAL        | Calculation                                           |
+| 계수                   | CFC        | Coefficient                                           |
+| 계약                   | CTRT       | Contract                                              |
+| 계열                   | SERS       | Series                                                |
+| 계절                   | SSN        | Season                                                |
+| 계정                   | ACNT       | Account                                               |
+| 계좌                   | BACNT      | Bank Account                                          |
+| 계측                   | MSRG       | Measuring                                             |
+| 계층                   | LYR        | Layer                                                 |
+| 계통                   | PSYS       | Power System/Circuit                                  |
+| 계획                   | PLAN       | Plan                                                  |
+| 고객                   | CUST       | Customer                                              |
+| 고교                   |            |                                                       |
+| 고도                   | ALTD       | Altitude                                              |
+| 고발                   | ACSTN      | Accusation                                            |
+| 고시                   | ANCMNT     | Announcement                                          |
+| 고용                   | EPM        | Employment                                            |
+| 고유                   | UNQ        | Unique                                                |
+| 고장                   | BKDN       | Breakdown                                             |
+| 고정                   | FIX        | Fixation                                              |
+| 고지                   | INFRM      | Inform                                                |
+| 고철                   | STSCP      | Steel Scrap                                           |
+| 고충                   | DSTRS      | Distress                                              |
+| 곡선                   | CURVE      | Curve                                                 |
+| 골재                   | AGGRGT     | Aggregates                                            |
+| 공간                   | SPAC       | Space                                                 |
+| 공개                   | RLS        | Release                                               |
+| 공고                   | PBANC      | Public Announcement                                   |
+| 공공                   | PUB        | Public                                                |
+| 공급                   | SPLY       | Supply                                                |
+| 공기                   | AIR        | Air                                                   |
+| 공단                   | IDTCMP     | Industrial Complex                                    |
+| 공동                   | JNT        | Joint                                                 |
+| 공란                   | BLNK       | Blank                                                 |
+| 공람                   | PDSP       | Public Display                                        |
+| 공매                   | PBAC       | Public Auction                                        |
+| 공모                   | PBCNTS     | Public Contest                                        |
+| 공문                   | OFDOC      | Official Document                                     |
+| 공백                   |            |                                                       |
+| 공법                   | MTCNS      | Method Of Construction                                |
+| 공부                   | OFBK       | Official Book                                         |
+| 공사                   | CSTRN      | Construction                                          |
+| 공시                   | PBLNT      | Public Notice                                         |
+| 공실                   | EPRM       | Empty Room                                            |
+| 공업                   | MDSR       | (Manufacturing) Industry                              |
+| 공연                   | PRFR       | Performance                                           |
+| 공용                   | CMNUS      | Common Use                                            |
+| 공원                   | PARK       | Park                                                  |
+| 공유                   | SHRN       | Sharing                                               |
+| 공인                   | PBFG       | Public Figure                                         |
+| 공장                   | FCTRY      | Factory                                               |
+| 공적                   | CNTRB      | Contribution                                          |
+| 공정                   | PROCS      | Process                                               |
+| 공제                   | DDC        | Deduction                                             |
+| 공지                   | NTC        | Notice                                                |
+| 공채                   | ONTPM      | Open invitation of applications for employment        |
+| 공탁                   | DPOST      | Deposit                                               |
+| 공통                   | COM        | Common                                                |
+| 공포                   | PRMG       | Promulgation                                          |
+| 공표                   | OFANC      | Official Announcement                                 |
+| 과거                   | PAST       | Past                                                  |
+| 과락                   | FLSBJ      | Fail A Subject                                        |
+| 과목                   | SBJCT      | Subject                                               |
+| 과세                   | TXTN       | Taxation                                              |
+| 과정                   | CRS        | Course                                                |
+| 과제                   | ASMT       | Assignment                                            |
+| 과학                   | SCNC       | Science                                               |
+| 관경                   | PDMT       | Pipe Diameter                                         |
+| 관계                   | REL        | Relation                                              |
+| 관광                   | TOURSM     | Tourism                                               |
+| 관급                   | GVSP       | Government Supply                                     |
+| 관내                   | WTJR       | Within The Jurisdiction                               |
+| 관람                   | VWNG       | Viewing                                               |
+| 관련                   |            |                                                       |
+| 관로                   | PPL        | Pipe Line                                             |
+| 관리                   | MNG        | Management                                            |
+| 관목                   | SHRUB      | Shrub                                                 |
+| 관서                   | GVMNFC     | Government Office                                     |
+| 관심                   | ITRST      | Interest                                              |
+| 관압                   | PIPS       | Pipe Press                                            |
+| 관정                   | GWEL       | Groundwater Well                                      |
+| 관찰                   | OBSR       | Observation                                           |
+| 관청                   | GVMNTC     | Government Office                                     |
+| 관측                   | OBSRVN     | Observation                                           |
+| 관할                   | CMPTNC     | Competence                                            |
+| 광역                   | WAREA      | Wide Area                                             |
+| 교과                   |            |                                                       |
+| 교란                   | DSTRB      | Disturb                                               |
+| 교량                   | BRG        | Bridge                                                |
+| 교목                   | CHPLAN     | Chaplain                                              |
+| 교부                   | DTBN       | Distribution                                          |
+| 교수                   | PRFSR      | Professor                                             |
+| 교육                   | EDU        | Education                                             |
+| 교재                   | TCMTR      | Teaching Materials                                    |
+| 교점                   | NODE       | Node                                                  |
+| 교정                   | RCTF       | Rectification                                         |
+| 교체                   | RPLC       | Replacement                                           |
+| 교통                   | TRFC       | Traffic                                               |
+| 교환                   | EXCH       | Exchange                                              |
+| 교훈                   | LSSN       | Lesson                                                |
+| 구간                   | ISEG       | Interval Segment                                      |
+| 구내                   | PRMS       | Premises                                              |
+| 구매                   | PRCHS      | Purchase                                              |
+| 구분                   | SE         | Section                                               |
+| 구성                   | CPST       | Composition                                           |
+| 구역                   | ZONE       | Zone                                                  |
+| 구입                   |            |                                                       |
+| 구제                   | RLF        | Relief                                                |
+| 구조                   | STRC       | Structure                                             |
+| 구축                   | ETBL       | Establish                                             |
+| 국가                   | NTN        | Nation                                                |
+| 국고                   | NTTR       | National Treasury                                     |
+| 국내                   | DMST       | Domestic                                              |
+| 국도                   | NARO       | National Road                                         |
+| 국비                   | NLEP       | National Expenditure                                  |
+| 국산                   | DMPRD      | Domestic Product                                      |
+| 국외                   | OVRSEA     | Oversea                                               |
+| 국장                   | DRTR       | Director                                              |
+| 국적                   | NTNLTY     | Nationality                                           |
+| 국정                   | NTAD       | National Administration                               |
+| 국제                   | INTL       | International                                         |
+| 국회                   | NLASM      | The National Assembly                                 |
+| 군락                   | CLN        | Colony                                                |
+| 군집                   | BCMNT      | (Biotic) Community                                    |
+| 군필                   | MSVCF      | Military Service Fulfilled                            |
+| 굴뚝                   | CHMN       | Chimney                                               |
+| 굴착                   | DGG        | Digging                                               |
+| 권고                   | RCMND      | Recommendation                                        |
+| 권리                   | RGHT       | Right                                                 |
+| 권역                   | SAREA      | Sub-Area                                              |
+| 권한                   | AUTHRT     | Authority                                             |
+| 권호                   | EDTN       | Edition                                               |
+| 귀속                   | BLN        | Belonging                                             |
+| 규격                   | SPCFCT     | Specification                                         |
+| 규모                   | SCL        | Scale                                                 |
+| 규정                   | RULE       | Rule                                                  |
+| 규제                   | RGL        | Regulation                                            |
+| 규칙                   | RUL        | Rule                                                  |
+| 균등                   | EQLTY      | Equality                                              |
+| 균주                   | STN        | Strain                                                |
+| 그룹                   | GROUP      | Group                                                 |
+| 근거                   | BSS        | Basis                                                 |
+| 근로                   | LBR        | Labor                                                 |
+| 근무                   | WORK       | Work                                                  |
+| 근속                   | CNSVC      | Continuous Service                                    |
+| 근태                   | ATAB       | Attendance And Absence                                |
+| 글꼴                   | FONT       | Font                                                  |
+| 금강                   | GMRVR      | Geum River                                            |
+| 금리                   | IRT        | Interest Rate                                         |
+| 금속                   | MTAL       | Metal                                                 |
+| 금액                   | AMT        | Amount                                                |
+| 금연                   | NSMK       | No Smoking                                            |
+| 금융                   | FNNC       | Finance                                               |
+| 금회                   | TSTM       | This Time                                             |
+| 급속                   | RAP        | Rapid                                                 |
+| 급수                   | WATSUP     | Water Supply                                          |
+| 급여                   | SLRY       | Salary                                                |
+| 기각                   | RJC        | Reject                                                |
+| 기간                   | PRD        | Period                                                |
+| 기계                   | MCHN       | Machine                                               |
+| 기고                   | CTB        | Contribution (From)                                   |
+| 기관                   | INST       | Institution                                           |
+| 기구                   | ORGZN      | Organization                                          |
+| 기금                   |            |                                                       |
+| 기기                   | ISTR       | Instrument                                            |
+| 기념                   | CMMRT      | Commemoration                                         |
+| 기능                   | FWK        | Functional Work                                       |
+| 기대                   | EXPT       | Expectation                                           |
+| 기록                   | RCD        | Record                                                |
+| 기반                   | BAS        | BASE                                                  |
+| 기본                   | BSC        | Basic                                                 |
+| 기부                   | DNTN       | Donation                                              |
+| 기사                   | ARTC       | Article                                               |
+| 기산                   | RCK        | Reckoning                                             |
+| 기상                   | WTH        | Weather                                               |
+| 기술                   | TECH       | Technology                                            |
+| 기안                   | DRFT       | Drafting                                              |
+| 기압                   | ATMPR      | Atmospheric Pressure                                  |
+| 기업                   | ENT        | Enterprise                                            |
+| 기여                   | CTRBT      | Contribution                                          |
+| 기온                   | ARTMP      | Air Temperature                                       |
+| 기원                   | ORGN       | Origin                                                |
+| 기자                   | JRNLST     | Journalist                                            |
+| 기재                   | FLLN       | Filling In                                            |
+| 기저                   | BASIS      | Basis                                                 |
+| 기존                   | EXS        | Existing                                              |
+| 기종                   | MKND       | Machine Kind (Model)                                  |
+| 기준                   | CRTR       | Criteria                                              |
+| 기초                   | BSCS       | Basics                                                |
+| 기출                   | PVEX       | Previous Examination                                  |
+| 기타                   | ETC        | Etc                                                   |
+| 기통                   | CYLN       | Cylinder                                              |
+| 기표                   | BLTG       | Balloting                                             |
+| 기한                   | TERM       | Term                                                  |
+| 기호                   | SMBL       | Symbol                                                |
+| 기획                   | PLN        | Planning                                              |
+| 기후                   | CLIMT      | Climate                                               |
+| 긴급                   | EMRG       | Emergency                                             |
+| 길이                   | LEN        | Length                                                |
+| 깊이                   | DPTH       | Depth                                                 |
+| 나라                   |            |                                                       |
+| 나쁨                   | BD         | Bad                                                   |
+| 나이                   |            |                                                       |
+| 나지                   | BLD        | Bare Land                                             |
+| 낙차                   | FLHD       | Fall Head                                             |
+| 낙찰                   | SCSBD      | Successful Bid                                        |
+| 난간                   | HDRL       | Handrail                                              |
+| 난방                   | HTNG       | Heating                                               |
+| 날씨                   | WTHR       | Weather                                               |
+| 남성                   | ML         | Male                                                  |
+| 남쪽                   | STHRN      | Southern                                              |
+| 납기                   | DUDT       | Due Date                                              |
+| 납부                   | PAY        | Payment                                               |
+| 납입                   |            |                                                       |
+| 납품                   | DLVGDS     | Delivery Of Goods                                     |
+| 낭비                   | WASTE      | Waste                                                 |
+| 내륙                   | INLND      | Inland                                                |
+| 내부                   | INSD       | Inside                                                |
+| 내선                   | EXT        | Extension                                             |
+| 내성                   | TLRNC      | Tolerance                                             |
+| 내역                   | DSCTN      | Description                                           |
+| 내용                   | CN         | Content                                               |
+| 내원                   | VSHSP      | Visit A Hospital                                      |
+| 내일                   | TMRW       | Tomorrow                                              |
+| 내진                   | ETRS       | Earthquake Resistant                                  |
+| 냄새                   | SMLL       | Smell                                                 |
+| 냉각                   | CLNG       | Cooling                                               |
+| 냉동                   | REFRIG     | Refrigeration                                         |
+| 냉매                   | RERGRT     | Refrigerant                                           |
+| 냉방                   | COOL       | Cooling                                               |
+| 너비                   |            |                                                       |
+| 년도                   |            |                                                       |
+| 년수                   | YYCNT      | Year Count                                            |
+| 년월                   |            |                                                       |
+| 노드                   |            |                                                       |
+| 노력                   | EFFORT     | Effort                                                |
+| 노선                   | RTE        | Route                                                 |
+| 노인                   | SNCTZ      | Senior Citizen                                        |
+| 노임                   | WGS        | Wages                                                 |
+| 노장                   | OBSVF      | Observation Field                                     |
+| 노점                   |            |                                                       |
+| 노조                   |            |                                                       |
+| 노출                   | EXPSR      | Exposure                                              |
+| 노트                   |            |                                                       |
+| 노후                   | OBSLT      | Obsolete                                              |
+| 녹취                   | TRSC       | Transcript                                            |
+| 논리                   | LGC        | Logic                                                 |
+| 논문                   | THSS       | Thesis                                                |
+| 농가                   | FRMHS      | Farmhouse                                             |
+| 농도                   | DNST       | Density                                               |
+| 농약                   | AGRPST     | Agricultural Pesticides                               |
+| 농업                   | FARM       | Farming                                               |
+| 농장                   | FARMS      | Farms                                                 |
+| 농지                   | AGLN       | Agricultural Land                                     |
+| 농축                   | ERCT       | Enrichment                                            |
+| 높이                   | HGT        | Height                                                |
+| 누가                   | CMTAD      | Cumulative Addition                                   |
+| 누계                   | ACTOT      | Accumulated Total                                     |
+| 누락                   | OMIT       | Omit                                                  |
+| 누수                   | WTLKG      | Water Leakage                                         |
+| 누적                   | ACML       | Accumulation                                          |
+| 누출                   | LKG        | Leakage                                               |
+| 뉴스                   | NEWS       | News                                                  |
+| 능력                   | ABLT       | Ability                                               |
+| 다량                   | BULK       | Bulk                                                  |
+| 다음                   | NEXT       | Next                                                  |
+| 다중                   | MLT        | Multiple                                              |
+| 단가                   | UNTPRC     | Unit Price                                            |
+| 단계                   | STP        | Step                                                  |
+| 단기                   | SRTPD      | Short Period                                          |
+| 단독                   | SNGL       | Single                                                |
+| 단면                   | CRSCN      | Cross Section                                         |
+| 단속                   | CRDN       | Crackdown                                             |
+| 단수                   | SPWTSP     | Suspension of Water Supply                            |
+| 단어                   | WORD       | Word                                                  |
+| 단위                   | UNIT       | Unit                                                  |
+| 단일                   | SINGL      | Singleness                                            |
+| 단지                   | CMPX       | Complex                                               |
+| 단체                   | GRP        | Group                                                 |
+| 단축                   | SHRTN      | Shortening                                            |
+| 달력                   | CLDR       | Calendar                                              |
+| 달성                   | ACHV       | Achievement                                           |
+| 담당                   | TKCG       | Taking Charge                                         |
+| 담보                   | CLTR       | Collateral                                            |
+| 담수                   | PLWT       | Plain Water                                           |
+| 답글                   | PRPLY      | (Post) Reply                                          |
+| 답변                   | ANS        | Answer                                                |
+| 답안                   | ANSW       | Answer                                                |
+| 답장                   | RPL        | Reply                                                 |
+| 당기                   | THTM       | This Term                                             |
+| 당시                   | TTM        | That Time                                             |
+| 당월                   | TSMM       | This Month                                            |
+| 당일                   | THDY       | This Day                                              |
+| 당직                   | ONDT       | On Duty                                               |
+| 당첨                   | PRWN       | Prize Winning                                         |
+| 당초                   | OGN        | Origin                                                |
+| 당해                   | TYY        | This Year                                             |
+| 대가                   | PYMNT      | Payment                                               |
+| 대금                   | PYMT       | Payment                                               |
+| 대기                   | WTNG       | Waiting                                               |
+| 대량                   | LQTY       | Large Quantity                                        |
+| 대륙                   | CNTNT      | Continent                                             |
+| 대리                   | SBT        | Substitution                                          |
+| 대면                   | FTF        | Face To Face                                          |
+| 대민                   | FCVLN      | (For) Civilians                                       |
+| 대변                   | CRSD       | The Credit Side                                       |
+| 대비                   | CTRS       | Contrast                                              |
+| 대상                   | TRGT       | Target                                                |
+| 대수                   | CNTOM      | Count Of Machines                                     |
+| 대여                   | RNTL       | Rental                                                |
+| 대역                   | BAND       | Band                                                  |
+| 대원                   | CRW        | Crew                                                  |
+| 대응                   | CRSP       | Correspondence                                        |
+| 대장                   | LDGR       | Ledger                                                |
+| 대지                   | ERTH       | Earth                                                 |
+| 대책                   | CTPN       | Counterplan                                           |
+| 대체                   | SBST       | Substitution                                          |
+| 대출                   | LOAN       | Loan                                                  |
+| 대치                   | RPMNT      | Replacement                                           |
+| 대표                   | RPRS       | Representation                                        |
+| 대행                   | PRXY       | Proxy                                                 |
+| 대형                   | LGSZ       | Large Size                                            |
+| 대화                   | CNVRS      | Conversation                                          |
+| 대회                   | CNFRN      | Conference                                            |
+| 댓글                   | CMNT       | Comment                                               |
+| 덮개                   | COVR       | Cover                                                 |
+| 도구                   | TOOL       | Tool                                                  |
+| 도급                   | CTRC       | Contract                                              |
+| 도달                   | RCHNG      | Reaching                                              |
+| 도래                   | MGRTR      | Migratory                                             |
+| 도로                   | ROAD       | Road                                                  |
+| 도면                   | FLRPLN     | Floor Plan                                            |
+| 도색                   | PAINT      | Painting                                              |
+| 도서                   | BOOK       | Book                                                  |
+| 도시                   | CTY        | City                                                  |
+| 도엽                   | MAPSHT     | Map Sheet                                             |
+| 도입                   | INTR       | Introduction                                          |
+| 도착                   | ARVL       | Arrival                                               |
+| 도출                   | DDUC       | Deduction                                             |
+| 독려                   | ENCR       | Encouragement                                         |
+| 독성                   | TOXC       | Toxicity                                              |
+| 독촉                   | URG        | Urge                                                  |
+| 돌풍                   | GUST       | Gust                                                  |
+| 동거                   | CHBTN      | Cohabitation                                          |
+| 동결                   | FRZG       | Freezing                                              |
+| 동기                   | MTV        | Motive                                                |
+| 동력                   | POWER      | Power                                                 |
+| 동물                   | ANML       | Animal                                                |
+| 동반                   | ACMP       | Accompany                                             |
+| 동시                   | SMLTN      | Simultaneous                                          |
+| 동압                   | DNMPRS     | Dynamic Pressure                                      |
+| 동의                   | AGRE       | Agreement                                             |
+| 동일                   | SAME       | Same                                                  |
+| 동작                   | MOTN       | Motion                                                |
+| 동쪽                   | ESTRN      | Eastern                                               |
+| 동파                   | FRZBUR     | Frozen To Burst                                       |
+| 동향                   |            |                                                       |
+| 두께                   | THICK      | Thickness                                             |
+| 두수                   | NOHD       | The Number Of Heads                                   |
+| 둔치                   | ESPD       | Esplanade                                             |
+| 둘레                   | CRCF       | Circumference                                         |
+| 뒷면                   | BKSD       | Back Side                                             |
+| 드론                   | DRN        | Drone                                                 |
+| 등급                   | GRD        | Grade                                                 |
+| 등기                   | RG         | Registered                                            |
+| 등록                   | REG        | Registration                                          |
+| 등재                   | REGST      | Registration                                          |
+| 뚜껑                   | LID        | Lid                                                   |
+| 라벨                   | LBL        | Label                                                 |
+| 라틴                   | LTN        | Latin                                                 |
+| 레벨                   | LVL        | Level                                                 |
+| 로그                   | LOG        | Log                                                   |
+| 로트                   | LT         | Lot                                                   |
+| 리셋                   |            |                                                       |
+| 링크                   |            |                                                       |
+| 마감                   | DDLN       | Deadline                                              |
+| 마을                   | VLG        | Village                                               |
+| 만기                   | MTRY       | Maturity                                              |
+| 만료                   | EXPRY      | Expiry                                                |
+| 만족                   | STFC       | Satisfaction                                          |
+| 말소                   | ERSR       | Erasure                                               |
+| 맞춤                   | CSTMZ      | Custmizing                                            |
+| 매각                   | DSPSL      | Disposal                                              |
+| 매도                   | SLL        | Sell                                                  |
+| 매립                   | RCLM       | Reclamation                                           |
+| 매매                   | TRD        | Trading                                               |
+| 매설                   | LAYING     | Laying                                                |
+| 매수                   | BYNG       | Buying                                                |
+| 매입                   |            |                                                       |
+| 매장                   | SHOP       | Shop                                                  |
+| 매출                   | SLS        | Sales                                                 |
+| 매핑                   | MPNG       | Mapping                                               |
+| 맨홀                   | MNHL       | Manhole                                               |
+| 먼지                   | DST        | Dust                                                  |
+| 메뉴                   | MENU       | Menu                                                  |
+| 메모                   | MEMO       | Memo                                                  |
+| 메인                   |            |                                                       |
+| 메일                   |            |                                                       |
+| 메타                   | META       | Meta                                                  |
+| 메탄                   | METHN      | Methane                                               |
+| 면담                   | ITVW       | Interview                                             |
+| 면세                   | TXEX       | Tax Exemption                                         |
+| 면적                   | AREA       | Area                                                  |
+| 면접                   | INTV       | Interview                                             |
+| 면제                   | EXMPTN     | Exemption                                             |
+| 면책                   | EXRS       | Exemption From Responsibility                         |
+| 면허                   | LCNS       | License                                               |
+| 멸균                   | STZ        | Sterilization                                         |
+| 명령                   | CMD        | Command                                               |
+| 명명                   | NMNG       | Naming                                                |
+| 명세                   | PRTCLR     | Particulars                                           |
+| 명수                   |            |                                                       |
+| 명예                   | HNR        | Honor                                                 |
+| 명의                   | NMNL       | Nominal                                               |
+| 명칭                   |            |                                                       |
+| 모델                   | MDL        | Model                                                 |
+| 모듈                   | MODL       | Module                                                |
+| 모래                   | SAND       | Sand                                                  |
+| 모레                   | DATMRW     | Day After Tomorrow                                    |
+| 모양                   | SHAPE      | Shape                                                 |
+| 모집                   | RCRT       | Recruitment                                           |
+| 모형                   |            |                                                       |
+| 목록                   | LIST       | List                                                  |
+| 목재                   | TIMBER     | Timber                                                |
+| 목적                   | PRPS       | Purpose                                               |
+| 목차                   | TOC        | Table Of Contents                                     |
+| 목표                   | GOAL       | Goal                                                  |
+| 묘지                   | GRVYD      | Graveyard                                             |
+| 무게                   |            |                                                       |
+| 무료                   | FREE       | Free                                                  |
+| 무상                   | FRE        | Free                                                  |
+| 무선                   | WRLS       | (Network) Wireless                                    |
+| 무형                   | ITN        | Intangible                                            |
+| 무효                   | INVLD      | Invalidity                                            |
+| 묶음                   | BNDL       | Bundle                                                |
+| 문구                   | PHRS       | Phrase                                                |
+| 문서                   | DOC        | Document                                              |
+| 문의                   | ENQY       | Enquiry                                               |
+| 문자                   | LTR        | Letter                                                |
+| 문제                   | PRBLM      | Problem                                               |
+| 문항                   | QITEM      | Question Item                                         |
+| 문헌                   | LTRT       | Literature                                            |
+| 문화                   | CTR        | Culture                                               |
+| 물가                   | PRCO       | Prices Of Commodities                                 |
+| 물건                   | THING      | Thing                                                 |
+| 물류                   | LOGIS      | Logistics                                             |
+| 물리                   | PHYS       | Physics                                               |
+| 물빛                   | DYCLR      | Dye Color                                             |
+| 물적                   | SBSTE      | Substance                                             |
+| 물질                   | SBSTN      | Substance                                             |
+| 물품                   | CMDTY      | Commodity                                             |
+| 미결                   | PND        | Pendency                                              |
+| 미납                   | UNPAID     | Unpaid                                                |
+| 미달                   | BLSTD      | BelowStandard                                         |
+| 미만                   | UDR        | Under                                                 |
+| 미수                   | UCLT       | Uncollected                                           |
+| 미투                   | METOO      | Metoo Movement                                        |
+| 미필                   | INCMP      | Incompletion                                          |
+| 미흡                   | INSF       | Insufficiency                                         |
+| 민간                   | PRVTO      | Private (Non-Official)                                |
+| 민감                   | SST        | Sensitive                                             |
+| 민원                   | CVLCPT     | Civil Complaint                                       |
+| 밀도                   | SMPVM      | Substance's Math Per Volume                           |
+| 밀폐                   | SEALG      | Sealing                                               |
+| 바닥                   | BTM        | Bottom                                                |
+| 바람                   | WIND       | Wind                                                  |
+| 반경                   | RDIS       | Radius                                                |
+| 반기                   | HT         | Half Term                                             |
+| 반납                   | RTN        | Return                                                |
+| 반대                   | OPST       | Opposition                                            |
+| 반려                   | RJCT       | Reject                                                |
+| 반복                   | REPT       | Repetition                                            |
+| 반송                   | SNDBK      | Send Back                                             |
+| 반영                   | RFLT       | Reflection                                            |
+| 반응                   | RACT       | Reaction                                              |
+| 반입                   | CRYN       | Carry In                                              |
+| 반출                   | SHPGOT     | Shipping Out                                          |
+| 반품                   | RTGD       | Returned Goods                                        |
+| 반환                   | GVBK       | Giving Back                                           |
+| 받는                   |            |                                                       |
+| 발간                   | PBLS       | Publish                                               |
+| 발견                   | DSCV       | Discovery                                             |
+| 발광                   | LMNS       | Luminous                                              |
+| 발급                   | ISSU       | Issue                                                 |
+| 발령                   | APNT       | Appoint                                               |
+| 발명                   | INVN       | Invention                                             |
+| 발병                   | ONST       | Onset                                                 |
+| 발부                   | ISUE       | Issue                                                 |
+| 발생                   | OCRN       | Occurrence                                            |
+| 발송                   | SNDNG      | Sending                                               |
+| 발신                   | DSPTCH     | Dispatch                                              |
+| 발암                   | CCGS       | Carcinogenesis                                        |
+| 발열                   | FVR        | Fever                                                 |
+| 발의                   | PRPSL      | Proposal                                              |
+| 발전                   | ETGT       | Electricity Generation                                |
+| 발주                   | ORDER      | Order                                                 |
+| 발표                   | PRSNTN     | Presentation                                          |
+| 발행                   | PBLCN      | Publication                                           |
+| 발효                   | EFCTN      | Effectuation                                          |
+| 방류                   | DSCHG      | Discharge                                             |
+| 방문                   | VST        | Visit                                                 |
+| 방법                   | MTHD       | Method                                                |
+| 방송                   | BRDC       | Broadcast                                             |
+| 방수                   | WPROF      | Waterproof                                            |
+| 방식                   | MTH        | Method                                                |
+| 방안                   | MSRS       | Measures                                              |
+| 방어                   | DFS        | Defense                                               |
+| 방위                   | DRTN       | Direction                                             |
+| 방재                   | PVOD       | Prevention Of Disasters                               |
+| 방제                   | INPS       | Insect Pests                                          |
+| 방지                   | PRV        | Prevention                                            |
+| 방침                   | PRCPL      | Principle                                             |
+| 방향                   | DCTN       | Direction                                             |
+| 배경                   | BKGR       | Background                                            |
+| 배관                   | PIPE       | Pipe                                                  |
+| 배너                   | BNR        | Banner                                                |
+| 배당                   | ALCTN      | Allocation                                            |
+| 배부                   | HNDT       | Handout                                               |
+| 배분                   | APRT       | Apportionment                                         |
+| 배상                   | RPN        | Reparation                                            |
+| 배송                   | DLVR       | Delivery                                              |
+| 배수                   |            |                                                       |
+| 배양                   | CLTVT      | Cultivate                                             |
+| 배점                   | SCOR       | Scoring                                               |
+| 배정                   | ALTMNT     | Allotment                                             |
+| 배제                   | EXCLU      | Exclusion                                             |
+| 배지                   | CTRMD      | Culture Medium                                        |
+| 배차                   | CRAL       | Car Allocation                                        |
+| 배출                   | EMSN       | Emission                                              |
+| 배치                   | BTCH       | Batch                                                 |
+| 배포                   | CRLTN      | Circulation                                           |
+| 백신                   | VACN       | Vaccine                                               |
+| 백업                   | BKUP       | Backup                                                |
+| 밸브                   | VALVE      | Valve                                                 |
+| 버전                   | VER        | Version                                               |
+| 버튼                   | BTN        | Button                                                |
+| 번역                   | TRSL       | Translation                                           |
+| 번호                   | NO         | Number                                                |
+| 벌금                   | FNE        | Fine                                                  |
+| 벌점                   | DEM        | Demerit Mark                                          |
+| 범례                   | LGND       | Legend                                                |
+| 범위                   | SCP        | Scope                                                 |
+| 범주                   | CTGRY      | Category                                              |
+| 법규                   | LWRG       | Laws And Regulations                                  |
+| 법령                   | STT        | Statute                                               |
+| 법무                   | JDAF       | Judicial Affairs                                      |
+| 법안                   | LBIL       | (Law) Bill                                            |
+| 법원                   | CT         | Court                                                 |
+| 법인                   | CORP       | Corporation                                           |
+| 법적                   | LGL        | Legal                                                 |
+| 법정                   | STTY       | Statutory                                             |
+| 변경                   | CHG        | Change                                                |
+| 변동                   | FLCTN      | Fluctuation                                           |
+| 변수                   | VRBL       | Variable                                              |
+| 변이                   | MTTN       | Mutation                                              |
+| 변제                   | REPAY      | Repayment                                             |
+| 변종                   | VRY        | (Biological) Variety                                  |
+| 변형                   | DFRMT      | Deformation                                           |
+| 변화                   | VARTN      | Variation                                             |
+| 변환                   | TRSF       | Transformation                                        |
+| 별도                   | APART      | Apart                                                 |
+| 별명                   |            |                                                       |
+| 별칭                   | NCNM       | Nickname                                              |
+| 별표                   | ASTK       | Asterisk                                              |
+| 병가                   | SKLV       | Sick Leave                                            |
+| 병과                   | BR         | Branch (Of Service)                                   |
+| 병상                   | SCKBD      | Sickbed                                               |
+| 병설                   | ESANX      | Establish Sth As An Annex                             |
+| 병원                   | HSPTL      | Hospital                                              |
+| 병합                   | MRGER      | Merger                                                |
+| 보강                   | REINFC     | Reinforcement                                         |
+| 보건                   | HLTHCR     | Health Care                                           |
+| 보고                   | RPT        | Report                                                |
+| 보관                   | KPNG       | Keeping                                               |
+| 보급                   | PSPLY      | Public Supply                                         |
+| 보기                   | EXMCS      | (Example) Case                                        |
+| 보도                   | NSCVRG     | News Coverage                                         |
+| 보류                   | HLDOF      | Hold Off                                              |
+| 보상                   | CMPN       | Compensation                                          |
+| 보세                   | BOND       | Bonded                                                |
+| 보수                   |            |                                                       |
+| 보안                   | SCRTY      | Security                                              |
+| 보완                   | SPLMNT     | Supplementation                                       |
+| 보유                   | HLD        | Holding                                               |
+| 보전                   | PRSRV      | Preservation                                          |
+| 보정                   | CRCT       | Correction                                            |
+| 보조                   | ASST       | Assistance                                            |
+| 보존                   | PRSV       | Preservation                                          |
+| 보증                   | GRNTE      | Guarantee                                             |
+| 보직                   | APPNT      | Appointment                                           |
+| 보통                   | USL        | Usual / Neutral                                       |
+| 보험                   | INSRNC     | Insurance                                             |
+| 보호                   | PRTC       | Protection                                            |
+| 보훈                   | PV         | Patriots And Veterans                                 |
+| 복개                   | RCVG       | River Covering                                        |
+| 복구                   | RSTR       | Restoration                                           |
+| 복무                   | SERVC      | Service                                               |
+| 복본                   | DPLC       | Duplication                                           |
+| 복사                   | COPY       | Copy                                                  |
+| 복원                   | RSTRT      | Restoration                                           |
+| 복지                   | WLFR       | Welfare                                               |
+| 복직                   | RINST      | Reinstatement                                         |
+| 복토                   | CWTH       | Covering With Soil                                    |
+| 복합                   | MULTI      | Multiplex                                             |
+| 본류                   | MNSTM      | The Main Stream                                       |
+| 본문                   | MTXT       | Main Text                                             |
+| 본번                   | MNO        | Main Number                                           |
+| 본부                   | HQ         | Headquarters                                          |
+| 본사                   | HDOFC      | Head Office                                           |
+| 본세                   | MNTX       | Main Tax                                              |
+| 본인                   | ONSLF      | Oneself                                               |
+| 본점                   | MNBR       | Main Branch                                           |
+| 봉사                   | SVC        | Service                                               |
+| 부가                   | ADDTN      | Addition                                              |
+| 부과                   | LEVY       | Levy                                                  |
+| 부담                   | BRDN       | Burden                                                |
+| 부당                   | UNFAR      | Unfair                                                |
+| 부대                   | SBSD       | Subsidiary                                            |
+| 부도                   | ISVC       | Insolvency                                            |
+| 부모                   | PRNT       | Parent                                                |
+| 부문                   | SECT       | Sector                                                |
+| 부번                   | SNO        | Sub Number                                            |
+| 부분                   | PART       | Part                                                  |
+| 부상                   | INJR       | Injury                                                |
+| 부서                   | DEPT       | Department                                            |
+| 부설                   | LAY        | Lay                                                   |
+| 부속                   | ANX        | Annex                                                 |
+| 부수                   | NOCP       | Number Of Copies                                      |
+| 부식                   | CORRSN     | Corrosion                                             |
+| 부양                   | SPT        | Support                                               |
+| 부여                   | GRNT       | Grant                                                 |
+| 부위                   | REGN       | Region                                                |
+| 부임                   | ACSN       | Accession                                             |
+| 부재                   | ABSN       | Absence                                               |
+| 부제                   |            |                                                       |
+| 부족                   | SHTG       | Shortage                                              |
+| 부지                   | LND        | Land                                                  |
+| 부착                   | STIK       | Sticking                                              |
+| 부채                   | LBLT       | Liabilities                                           |
+| 부처                   | MAO        | Ministry And Office                                   |
+| 부품                   | PRTS       | Parts                                                 |
+| 부호                   | SYMBL      | Symbol                                                |
+| 북쪽                   | NRTRN      | Northern                                              |
+| 분개                   | JRNL       | Journalizing                                          |
+| 분과                   | SCMT       | Subcommittee                                          |
+| 분기                   | QTR        | Quarter                                               |
+| 분납                   | ISPY       | Installment Payment                                   |
+| 분뇨                   | HMN        | Humanure                                              |
+| 분담                   | SHARE      | Share                                                 |
+| 분당                   | PRMI       | Per Minute                                            |
+| 분류                   | CLSF       | Classification                                        |
+| 분리                   | SPR        | Separate                                              |
+| 분배                   |            |                                                       |
+| 분석                   | ANLS       | Analysis                                              |
+| 분쇄                   | CRSH       | Crush                                                 |
+| 분수                   | WTRDVN     | Water Diversion                                       |
+| 분실                   | LOST       | Lost                                                  |
+| 분야                   | FLD        | Field                                                 |
+| 분양                   | LTOT       | Lotting-Out                                           |
+| 분자                   | MOCL       | Molecule                                              |
+| 분쟁                   | DISPT      | Dispute                                               |
+| 분포                   | DSTB       | Distribution                                          |
+| 분할                   | PRTTN      | Partition                                             |
+| 분해                   | DCOMP      | Decomposition                                         |
+| 불가                   | IMPS       | Impossible                                            |
+| 불능                   | INBL       | Inability                                             |
+| 불량                   | BAD        | Bad                                                   |
+| 불만                   | DSCNTT     | Discontent                                            |
+| 불법                   | UNLAW      | Unlawfulness                                          |
+| 불복                   | DSBDNC     | Disobedience                                          |
+| 불용                   | DUSE       | Disuse                                                |
+| 불입                   | PAYMNT     | Payment                                               |
+| 불참                   | NATT       | Nonattendance                                         |
+| 불출                   | RELS       | Release                                               |
+| 블록                   | BLCK       | Block                                                 |
+| 비고                   | RMRK       | Remarks                                               |
+| 비교                   | CMPR       | Compare                                               |
+| 비닐                   | VINYL      | Vinyl                                                 |
+| 비료                   | FERT       | Fertilizer                                            |
+| 비목                   | ITMEXP     | Item Of Expenditure                                   |
+| 비밀                   | SCRET      | Secret                                                |
+| 비산                   | ASCTR      | Air Scatter                                           |
+| 비상                   | EMRGY      | Emergency                                             |
+| 비용                   | CST        | Cost                                                  |
+| 비위                   | VIOL       | Violation                                             |
+| 비율                   | RT         | Rate                                                  |
+| 비중                   | SPGR       | Specific Gravity                                      |
+| 비치                   | FRNSH      | Furnishing                                            |
+| 비품                   | FXTRS      | Fixtures                                              |
+| 비행                   | FLYNG      | Flying                                                |
+| 빈도                   | FREQ       | Frequency                                             |
+| 사건                   | INCDNT     | Incident                                              |
+| 사고                   | ACDNT      | Accident                                              |
+| 사령                   | DTOF       | Duty Officer                                          |
+| 사례                   | CASE       | Case                                                  |
+| 사료                   | FEED       | Feed                                                  |
+| 사망                   | DTH        | Death                                                 |
+| 사면                   | PRDN       | Pardon                                                |
+| 사무                   | OFCW       | Office Work                                           |
+| 사수                   | DWTR       | Dead Water                                            |
+| 사실                   | FACT       | Fact                                                  |
+| 사업                   | BIZ        | Business                                              |
+| 사용                   | USE        | Use                                                   |
+| 사원                   |            |                                                       |
+| 사유                   | RSN        | Reason                                                |
+| 사육                   | BRED       | Breed                                                 |
+| 사전                   | BFHD       | Beforehand                                            |
+| 사주                   | SNDBR      | Sand Bar                                              |
+| 사진                   | PHOTO      | Photograph                                            |
+| 사체                   | CORPSE     | Corpse                                                |
+| 사항                   | MTTR       | Matter                                                |
+| 사회                   | SOCTY      | Society                                               |
+| 사후                   | EPFC       | Ex Post Facto                                         |
+| 삭감                   | CTBK       | Cutback                                               |
+| 삭제                   | DEL        | Deletion                                              |
+| 산간                   | MNTNS      | Mountainous                                           |
+| 산림                   | FORST      | Forest                                                |
+| 산소                   | OXYG       | Oxygen                                                |
+| 산식                   | FMLA       | Formula                                               |
+| 산업                   | INDST      | Industry                                              |
+| 산입                   | INCLSN     | Inclusion                                             |
+| 산재                   | IA         | Industrial Accident                                   |
+| 산정                   | CMPTTN     | Computation                                           |
+| 산지                   | MTLND      | Mountain Land                                         |
+| 산출                   | CALC       | Calculation                                           |
+| 산하                   | AFLTD      | Affiliated                                            |
+| 살수                   | SPRKL      | Sprinkling                                            |
+| 살포                   | SPRAY      | Spray                                                 |
+| 상가                   | STORE      | Store (Section)                                       |
+| 상각                   | AMTZ       | Amortization                                          |
+| 상계                   | STFF       | Setoff                                                |
+| 상관                   | CRLT       | Correlation                                           |
+| 상금                   | AWARD      | Award                                                 |
+| 상단                   | UPEND      | Upper End                                             |
+| 상담                   | DSCSN      | Discussion                                            |
+| 상대                   | RLT        | Relative                                              |
+| 상류                   | UPSTM      | Upstream                                              |
+| 상벌                   | RWPN       | Reward And Punishment                                 |
+| 상부                   | UPPRT      | Upper Part                                            |
+| 상세                   | DTL        | Details                                               |
+| 상소                   | APLH       | Appeal To A Higher Court                              |
+| 상속                   | IHRT       | Inheritance                                           |
+| 상쇄                   | OFSTG      | Offsetting                                            |
+| 상승                   | ASND       | Ascending                                             |
+| 상시                   | ODTM       | Ordinary Times                                        |
+| 상신                   | RTSO       | Report To Superior Official                           |
+| 상실                   | LOSE       | Lose                                                  |
+| 상압                   | NMPS       | Normal Pressure                                       |
+| 상업                   | CMC        | Commerce                                              |
+| 상영                   | SCRG       | Screening                                             |
+| 상온                   | RMTMP      | Room Temperature                                      |
+| 상용                   | CMCUS      | Commercial Use                                        |
+| 상위                   | UP         | Upper                                                 |
+| 상장                   | LSTG       | Listing                                               |
+| 상주                   | RESD       | Reside                                                |
+| 상층                   | UPCL       | Upper Class                                           |
+| 상태                   | STTS       | Status                                                |
+| 상표                   | TDMK       | Trademark                                             |
+| 상품                   | GDS        | Goods                                                 |
+| 상한                   | UPLMT      | The Upper Limit                                       |
+| 상해                   | BHRM       | Bodily Harm                                           |
+| 상향                   | UPWRD      | Upward                                                |
+| 상호                   | CONM       | Company Name                                          |
+| 상환                   | RPMT       | Repayment                                             |
+| 상황                   | STTN       | Situation                                             |
+| 상훈                   | PZDC       | Prizes And Decorations                                |
+| 새창                   | NPAG       | New Page                                              |
+| 색도                   | CRMTY      | Chromaticity                                          |
+| 색맹                   | ACHRM      | Achromatopsia                                         |
+| 색상                   | COLR       | Color                                                 |
+| 색인                   | INDX       | Index                                                 |
+| 샘플                   | SMPLE      | Sample                                                |
+| 생물                   | CRTURE     | Creature                                              |
+| 생산                   | PRDCTN     | Production                                            |
+| 생성                   | CRT        | Creation                                              |
+| 생식                   | PRTN       | Procreation                                           |
+| 생존                   | SRVL       | Survival                                              |
+| 생태                   | ECLG       | Ecology                                               |
+| 생활                   | LVNG       | Living                                                |
+| 서가                   | BKSH       | Bookshelf                                             |
+| 서류                   | DCMNT      | Document                                              |
+| 서면                   | WRTN       | Written                                               |
+| 서명                   | SIGN       | Signature                                             |
+| 서무                   | GNAFR      | General Affairs                                       |
+| 서버                   | SRVR       | Server                                                |
+| 서식                   | TMPLT      | Template                                              |
+| 서약                   | OATH       | Oath                                                  |
+| 서쪽                   | WSTRN      | Western                                               |
+| 서체                   |            |                                                       |
+| 석면                   | ABSTS      | Asbestos                                              |
+| 석식                   | DNNR       | Dinner                                                |
+| 석축                   | STNWRK     | Stonework                                             |
+| 선고                   | ADJ        | Adjudication                                          |
+| 선납                   | PRPY       | Prepayment                                            |
+| 선로                   | RLWY       | Railway                                               |
+| 선박                   | VSL        | Vessel                                                |
+| 선발                   | PICK       | Pick                                                  |
+| 선별                   | SLCF       | Select And Classify                                   |
+| 선원                   | CREW       | Crew                                                  |
+| 선임                   |            |                                                       |
+| 선장                   | CPTN       | Captain                                               |
+| 선적                   | SHPG       | Shipping                                              |
+| 선정                   | SLCTN      | Selection                                             |
+| 선택                   | CHC        | Choice                                                |
+| 선행                   | PRCD       | Preceding                                             |
+| 선호                   | PRFRC      | Preferance                                            |
+| 설계                   | DESIGN     | Design                                                |
+| 설립                   | FNDN       | Foundation                                            |
+| 설명                   | EXPLN      | Explanation                                           |
+| 설문                   | SRVY       | Survey                                                |
+| 설비                   | FCL        | (Equipment) Facility                                  |
+| 설정                   | STNG       | Setting                                               |
+| 설치                   | INSTL      | Installation                                          |
+| 섭식                   | FED        | Feeding                                               |
+| 성격                   | PRSNL      | Personality                                           |
+| 성공                   | SCS        | Success                                               |
+| 성과                   | OTCM       | Outcome                                               |
+| 성능                   | PRFRNC     | (Machine) Performance                                 |
+| 성명                   | FLNM       | Full Name                                             |
+| 성별                   | GNDR       | Gender                                                |
+| 성분                   | IGRD       | Ingredient                                            |
+| 성상                   | TMPSTE     | Temperamnet And State                                 |
+| 성인                   | ADLT       | Adult                                                 |
+| 성장                   | GROW       | Growth                                                |
+| 성적                   | PGRD       | Performance Grade                                     |
+| 성향                   |            |                                                       |
+| 세공                   | CRFTS      | Craftsmanship                                         |
+| 세관                   | CSTMHS     | Customs-House                                         |
+| 세균                   | GERM       | Germ                                                  |
+| 세금                   | TX         | Tax                                                   |
+| 세대                   | HH         | Households                                            |
+| 세로                   | VRTC       | Vertical                                              |
+| 세목                   | TXITM      | Tax Item                                              |
+| 세무                   | TXBIZ      | Taxation Business                                     |
+| 세부                   |            |                                                       |
+| 세션                   | SYSSN      | System Session                                        |
+| 세액                   | TXAMT      | Tax Amount                                            |
+| 세입                   | ANRVN      | Annual Revenue                                        |
+| 세전                   | BFTX       | Before Tax                                            |
+| 세척                   | CLNSG      | Cleansing                                             |
+| 세출                   | ANEXP      | Annual Expenditure                                    |
+| 세포                   | BCLL       | Biology Cell                                          |
+| 센서                   | SNSR       | Sensor                                                |
+| 센터                   | CNTR       | Center                                                |
+| 소각                   | INCNR      | Incineration                                          |
+| 소개                   | INTDC      | Introducion                                           |
+| 소계                   | STOT       | Subtotal                                              |
+| 소관                   | JRSD       | Jurisdiction                                          |
+| 소급                   | RTRCT      | Retroactivity                                         |
+| 소독                   | STLZ       | Sterilze                                              |
+| 소득                   | EARN       | Earnings                                              |
+| 소량                   | SMLQ       | Small Quantity                                        |
+| 소리                   | SOUND      | Sound                                                 |
+| 소멸                   | EXTSH      | Extinguishment                                        |
+| 소명                   | VNDC       | Vindicate                                             |
+| 소모                   | CSMT       | Consumption                                           |
+| 소방                   | FRFG       | Firefighting                                          |
+| 소비                   | CNSM       | Consume                                               |
+| 소생                   |            |                                                       |
+| 소속                   | OGDP       | Organization/Department                               |
+| 소송                   | LWS        | Lawsuit                                               |
+| 소액                   | SAMT       | Small Amount                                          |
+| 소요                   | REQ        | Required                                              |
+| 소유                   | PSN        | Possession                                            |
+| 소음                   | NOIS       | Noise                                                 |
+| 소재                   |            |                                                       |
+| 소집                   | CNVC       | Convocation                                           |
+| 소형                   | STYP       | Small Type                                            |
+| 속도                   | SPD        | Speed                                                 |
+| 속성                   | ATRB       | Attribute                                             |
+| 손실                   | LOSS       | Loss                                                  |
+| 손익                   | PFLS       | Profit And Loss                                       |
+| 손해                   | HRM        | Harm                                                  |
+| 송금                   | RMT        | Remittance                                            |
+| 송달                   | TMTL       | Transmittal                                           |
+| 송부                   | SNDG       | Sending                                               |
+| 송수                   | WTSUPL     | Water Supply                                          |
+| 송신                   |            |                                                       |
+| 송장                   | INVC       | Invoice                                               |
+| 송치                   | TRNSR      | Transference                                          |
+| 수강                   | ATNLC      | Attendance Lecture                                    |
+| 수거                   | CLT        | Collect                                               |
+| 수계                   | WTST       | Water System                                          |
+| 수관                   | ASCTL      | Assumption Of Control                                 |
+| 수급                   | RECIPT     | Receipt                                               |
+| 수기                   | HWRT       | Handwriting                                           |
+| 수납                   | RCVMT      | Receiving Money (Or Thing)                            |
+| 수단                   | MNS        | Means                                                 |
+| 수당                   | ALW        | Allowance                                             |
+| 수도                   |            |                                                       |
+| 수동                   | MANL       | Manual                                                |
+| 수락                   | ACPT       | Acceptance                                            |
+| 수량                   | QTY        | Quantity                                              |
+| 수령                   | RCV        | Receive                                               |
+| 수로                   | WTRWY      | Waterway                                              |
+| 수료                   | FNSH       | Finish                                                |
+| 수리                   | RPR        | Repair                                                |
+| 수립                   | FNDG       | Founding                                              |
+| 수면                   | WTSF       | Water Surface                                         |
+| 수명                   | LIFES      | Lifespan                                              |
+| 수몰                   | SBMRG      | Be Submerged                                          |
+| 수문                   | WTGT       | Water Gate                                            |
+| 수변                   | WTRSD      | Waterside                                             |
+| 수분                   | MSTR       | Moisture                                              |
+| 수산                   | MRP        | Marine Products                                       |
+| 수상                   | WNAWD      | Winning Award                                         |
+| 수선                   | MNDG       | Mending                                               |
+| 수소                   | HYDR       | Hydrogen                                              |
+| 수술                   | SRGR       | Surgery                                               |
+| 수습                   | PRBT       | Probation                                             |
+| 수식                   |            |                                                       |
+| 수신                   | RCPTN      | Reception                                             |
+| 수심                   | WTDTH      | Water Depth                                           |
+| 수압                   | WTRPRS     | Water Pressure                                        |
+| 수여                   | CNFR       | Conferment                                            |
+| 수역                   | WTRS       | Waters                                                |
+| 수온                   | WTTM       | Water Temperature                                     |
+| 수요                   | DMD        | Demand                                                |
+| 수용                   | ACTC       | Acceptance                                            |
+| 수원                   | WTRSRC     | Water Source                                          |
+| 수위                   | WTLV       | Water Level                                           |
+| 수은                   | MRCR       | Mercury                                               |
+| 수임                   | ACAP       | Acceptance Of Appointment                             |
+| 수입                   | INCM       | Income                                                |
+| 수정                   | MDFCN      | Modification                                          |
+| 수조                   | WATNK      | Water Tank                                            |
+| 수종                   | TRSPC      | Tree Species                                          |
+| 수준                   | LV         | Level                                                 |
+| 수직                   | VTCL       | Vertical                                              |
+| 수질                   | WQ         | Water Quality                                         |
+| 수집                   | CLCT       | Collection                                            |
+| 수차                   | WTRBN      | Water Turbine                                         |
+| 수출                   | EXP        | Export                                                |
+| 수치                   | NVL        | Numerical Value                                       |
+| 수탁                   | TRST       | Trust                                                 |
+| 수표                   | CHECK      | Check                                                 |
+| 수풀                   | WDLND      | Woodland                                              |
+| 수행                   | FLFMT      | Fulfillment                                           |
+| 수험                   | TKEXM      | Taking An Exam                                        |
+| 숙박                   | LDG        | Lodge                                                 |
+| 숙소                   | ACMD       | Accommodations                                        |
+| 순간                   | MMNT       | Moment                                                |
+| 순도                   | PURDG      | Purity Degree                                         |
+| 순번                   |            |                                                       |
+| 순서                   | SEQ        | Sequence                                              |
+| 순수                   | PURE       | Pure                                                  |
+| 순위                   | RNK        | Ranking                                               |
+| 순찰                   | PTL        | Patrol                                                |
+| 순환                   | CRCL       | Circulation                                           |
+| 순회                   | RNDS       | Rounds                                                |
+| 숨김                   | HIDE       | Hide                                                  |
+| 숫자                   | NUM        | Numeral                                               |
+| 쉼터                   | SHLTR      | Shelter                                               |
+| 스팸                   | SPAM       | Spam                                                  |
+| 습도                   | HUM        | Humidity                                              |
+| 습지                   | WTLND      | Wetland                                               |
+| 승계                   | SCSN       | Succession                                            |
+| 승급                   | ADVN       | Advancement                                           |
+| 승선                   | EMKT       | Embarkation                                           |
+| 승용                   | PSNGR      | Passenger                                             |
+| 승인                   | APRV       | Approval                                              |
+| 승진                   | PRMT       | Promotion                                             |
+| 승차                   | RIDE       | Ride                                                  |
+| 시가                   | MPRC       | Market Price                                          |
+| 시각                   | TM         | Time                                                  |
+| 시간                   | HR         | Hour                                                  |
+| 시공                   | CNST       | Construct                                             |
+| 시군                   | SIGUN      | Si/Gun                                                |
+| 시기                   | TMNG       | Timing                                                |
+| 시도                   | CTPV       | Cities And Provinces                                  |
+| 시료                   | SPCM       | Specimen                                              |
+| 시범                   | DMSTR      | Demonstration                                         |
+| 시분                   | HM         | Hour And Minute                                       |
+| 시상                   | WNARD      | Winning Award                                         |
+| 시설                   | FCLT       | Facilities                                            |
+| 시작                   | BGNG       | Beginning                                             |
+| 시장                   | MRKT       | Market                                                |
+| 시정                   | CRC        | Correction                                            |
+| 시추                   | DRLL       | Drilling                                              |
+| 시트                   | SHEET      | Sheet                                                 |
+| 시행                   | ENFC       | Enforcement                                           |
+| 시험                   | TEST       | Test                                                  |
+| 식단                   | DIET       | Diet                                                  |
+| 식당                   | RSTNT      | Restaurants                                           |
+| 식물                   | PLNT       | Plant                                                 |
+| 식별                   | IDNTF      | Identification                                        |
+| 식비                   | FDEXP      | Food Expenses                                         |
+| 식사                   | MEAL       | Meal                                                  |
+| 식생                   | VGTTN      | Vegetation                                            |
+| 식성                   | TASTE      | Taste                                                 |
+| 식수                   | DRWT       | Drinking Water                                        |
+| 식품                   | FOOD       | Food                                                  |
+| 신고                   | DCLR       | Declaration                                           |
+| 신규                   | NEW        | New                                                   |
+| 신뢰                   | CNFDNC     | Confidence                                            |
+| 신설                   | NBLDP      | New Build Up                                          |
+| 신속                   | RPD        | Rapid                                                 |
+| 신용                   | CRDT       | Credit                                                |
+| 신원                   | IDTY       | Identity                                              |
+| 신청                   | APLY       | Apply                                                 |
+| 신체                   | BDY        | Body                                                  |
+| 신축                   | NWCN       | New Constuction                                       |
+| 신탁                   | TRUST      | Trust                                                 |
+| 신호                   | SGNL       | Signal                                                |
+| 실내                   | IND        | Indoor                                                |
+| 실명                   | RLNM       | Real Name                                             |
+| 실무                   | PWRK       | Practical Work                                        |
+| 실사                   | ACINSP     | Actual Inspection                                     |
+| 실습                   | PRCTC      | Practice                                              |
+| 실시                   | ENFRC      | Enforcement                                           |
+| 실외                   | TOSD       | The Outside                                           |
+| 실장                   | DVSLD      | Division Leader                                       |
+| 실적                   | PRFMNC     | Performance                                           |
+| 실제                   | ACTL       | Actual                                                |
+| 실측                   | RLMSR      | Real Measurement                                      |
+| 실태                   | ACCND      | Actual Condition                                      |
+| 실패                   | FAIL       | Failure                                               |
+| 실행                   | EXCN       | Execution                                             |
+| 실황                   | LIVE       | Live                                                  |
+| 실효                   | ACEF       | Actual Effect                                         |
+| 심각                   | SRUS       | Serious                                               |
+| 심사                   | SRNG       | Screening                                             |
+| 심의                   | DLBR       | Deliberation                                          |
+| 심층                   | DEPTHS     | The Depths                                            |
+| 아동                   | CHLDRN     | Children                                              |
+| 아종                   | SSPECS     | (Biological) Subspecies                               |
+| 악성                   | MLGN       | Malignant                                             |
+| 악취                   | ODOR       | Odor                                                  |
+| 안개                   | FOG        | Fog                                                   |
+| 안건                   | AGND       | Agenda                                                |
+| 안내                   | GD         | Guide                                                 |
+| 안분                   | PRDV       | Proportional Division                                 |
+| 안전                   | SFTY       | Safety                                                |
+| 알람                   | ALRM       | Alarm                                                 |
+| 알림                   | NTI        | Notice                                                |
+| 암거                   | UNDDRN     | Underdrain                                            |
+| 암반                   | BLOCK      | Bedlock                                               |
+| 암석                   | ROK        | Rock                                                  |
+| 압력                   | PRSUR      | Pressure                                              |
+| 압류                   | SZR        | Seizure                                               |
+| 압축                   | CMPRS      | Compression                                           |
+| 애로                   | DFCL       | Difficulty                                            |
+| 액비                   | LIQFER     | Liquid Fertilizer                                     |
+| 액상                   |            |                                                       |
+| 액체                   | LQD        | Liquid                                                |
+| 야간                   | NGHT       | Night                                                 |
+| 야생                   | WLDNS      | Wildness                                              |
+| 약관                   | TRMS       | Terms                                                 |
+| 약국                   | PMCY       | Pharmacy                                              |
+| 약도                   | RGHMP      | Rough Map                                             |
+| 약식                   | INFML      | Informality                                           |
+| 약어                   | ABBR       | Abbreviation                                          |
+| 약정                   | STPL       | Stipulation                                           |
+| 약품                   | MDCN       | Medicine                                              |
+| 양도                   | CNVYN      | Conveyance                                            |
+| 양력                   | SLCL       | Solar Calendar                                        |
+| 양성                   | NRTR       | Nurture                                               |
+| 양수                   | AQST       | Acquisition                                           |
+| 양식                   | FORM       | Form                                                  |
+| 양육                   | BRUP       | Bringing-Up                                           |
+| 어도                   | FSHWY      | A Fishway                                             |
+| 어류                   | FSH        | Fish                                                  |
+| 어선                   | FSBT       | Fishing Boat                                          |
+| 어업                   | FSHRY      | Fishery                                               |
+| 어음                   | PRMNT      | Promissory Note                                       |
+| 어종                   | KDFSH      | Kind Of Fish                                          |
+| 언론                   | MSSMD      | Mass Media                                            |
+| 언어                   | LANG       | Language                                              |
+| 업무                   | TASK       | Task                                                  |
+| 업소                   | BIZEST     | Business Establishment                                |
+| 업종                   | TPBIZ      | Type Of Business                                      |
+| 업체                   | BZENTY     | Business Entity                                       |
+| 업태                   | BZSTAT     | Business Status                                       |
+| 엑셀                   | EXCEL      | Excel                                                 |
+| 엔진                   | ENGN       | Engine                                                |
+| 여과                   | FILTR      | Filteration                                           |
+| 여부                   | YN         | Yes Or No                                             |
+| 여비                   | TRVEXP     | Traveling Expenses                                    |
+| 여성                   | FML        | Female                                                |
+| 여울                   | RPDS       | Rapids (Ina River)                                    |
+| 여유                   | RLXD       | Relaxed                                               |
+| 여행                   | TRVL       | Travel                                                |
+| 역량                   | CPBL       | Capability                                            |
+| 역률                   | PWRFTR     | Power Factor                                          |
+| 역할                   | ROLE       | Role                                                  |
+| 연간                   | ANL        | Annual                                                |
+| 연결                   | LNKG       | Linkage                                               |
+| 연계                   | LINK       | Link                                                  |
+| 연관                   |            |                                                       |
+| 연구                   | RSCH       | Research                                              |
+| 연금                   | PN         | Pension                                               |
+| 연대                   | SLDT       | Solidarity                                            |
+| 연도                   | YR         | Year                                                  |
+| 연동                   | ITRCK      | Interlock                                             |
+| 연락                   | CNCT       | Contact                                               |
+| 연령                   | AGE        | Age                                                   |
+| 연료                   | FUEL       | Fuel                                                  |
+| 연못                   | POND       | Pond                                                  |
+| 연번                   |            |                                                       |
+| 연보                   | ANNLS      | Annuals                                               |
+| 연봉                   | ANLSL      | Annual Salary                                         |
+| 연산                   | ARTOPN     | Arithmetic Operation                                  |
+| 연소                   | BURN       | Burning                                               |
+| 연속                   | CNTIN      | Continue                                              |
+| 연수                   | STDTRN     | Study And Training                                    |
+| 연식                   | MDLYY      | Model Year                                            |
+| 연안                   | COAST      | Coast                                                 |
+| 연월                   | YM         | Year And Month                                        |
+| 연임                   | RPNTM      | Reappointment                                         |
+| 연장                   | PRLG       | Prolongation                                          |
+| 연차                   | ORDYR      | Order Of Year                                         |
+| 연체                   | ARG        | Arrearage                                             |
+| 연혁                   | CRNCL      | Chronicle                                             |
+| 열람                   | PRSL       | Perusal                                               |
+| 열차                   | TRAIN      | Train                                                 |
+| 염도                   | SLDNS      | Salt Density                                          |
+| 염소                   | CHLOR      | Chlorine                                              |
+| 영구                   | PRMCE      | Permanence                                            |
+| 영농                   | FARMG      | Farming                                               |
+| 영문                   | ENG        | English                                               |
+| 영업                   | SALS       | Sales                                                 |
+| 영역                   | RLM        | Realm                                                 |
+| 영치                   | CSDY       | Custody                                               |
+| 영향                   | IMPCT      | Impact                                                |
+| 영화                   | MOVIE      | Movie                                                 |
+| 예규                   | ESTRL      | Established Rule                                      |
+| 예금                   | SVG        | Savings                                               |
+| 예년                   | AVRYR      | Average Year                                          |
+| 예문                   | EXSNT      | Example Sentence                                      |
+| 예방                   | PRVTN      | Prevention                                            |
+| 예보                   | FRCST      | Forecast                                              |
+| 예비                   | RSRV       | Reserve                                               |
+| 예산                   | BGT        | Budget                                                |
+| 예상                   | EXPC       | Expect                                                |
+| 예시                   | EXM        | Example                                               |
+| 예약                   | RSVT       | Reservation                                           |
+| 예외                   | EXCP       | Exception                                             |
+| 예정                   | PRNMNT     | Prearrangement                                        |
+| 예제                   | EXRC       | Exercise                                              |
+| 예측                   | PREDC      | Prediction                                            |
+| 예치                   | DEPST      | Deposit                                               |
+| 예탁                   | DPSTG      | Depositing                                            |
+| 오너                   |            |                                                       |
+| 오늘                   | TD         | Today                                                 |
+| 오니                   |            |                                                       |
+| 오류                   | ERR        | Error                                                 |
+| 오수                   | DRTW       | Dirty Water                                           |
+| 오염                   | PLLTN      | Pollution                                             |
+| 오일                   | OIL        | Oil                                                   |
+| 오전                   | AM         | Ante Meridiem                                         |
+| 오존                   | OZON       | Ozone                                                 |
+| 오차                   | EGAP       | Error Gap                                             |
+| 오픈                   | OP         | Open                                                  |
+| 오후                   | AFN        | Afternoon                                             |
+| 옥내                   | INDR       | Indoor                                                |
+| 옥외                   | OTDR       | Outdoor                                               |
+| 온도                   | TP         | Temperature                                           |
+| 와류                   | VORTEX     | Vortex                                                |
+| 완납                   | FLPY       | Full Payment                                          |
+| 완료                   | CMPTN      | Completion                                            |
+| 완성                   | FNL        | Finalization                                          |
+| 완제                   | FLRPY      | Full Repayment                                        |
+| 외관                   | APPRNC     | Appearance                                            |
+| 외국                   | FRGN       | Foreign Nation                                        |
+| 외기                   | OTAIR      | Outside Air                                           |
+| 외래                   | FREGN      | Foreign                                               |
+| 외부                   | OTSD       | Outside                                               |
+| 외상                   | ONCR       | On Credit                                             |
+| 외식                   | EATOUT     | Eat Out                                               |
+| 외자                   | FRCPTL     | Foreign Capital                                       |
+| 외출                   | GNOT       | Going Out                                             |
+| 외화                   | FRCNCY     | Foreign Currency                                      |
+| 왼쪽                   |            |                                                       |
+| 요건                   | RQMT       | Requirement                                           |
+| 요구                   | RQT        | Request                                               |
+| 요금                   | CRG        | Charge                                                |
+| 요령                   | TCK        | Trick                                                 |
+| 요소                   | ELM        | Element                                               |
+| 요약                   | SMRY       | Summary                                               |
+| 요양                   | RCPR       | Recuperation                                          |
+| 요율                   | TRF        | Tariff                                                |
+| 요인                   | FCT        | (Cause) Factor                                        |
+| 요일                   | DOW        | Day Of The Week                                       |
+| 요청                   | DMND       | Demand                                                |
+| 욕실                   | BTHRM      | Bathroom                                              |
+| 용기                   | BOWL       | Bowl                                                  |
+| 용도                   | USG        | Usage                                                 |
+| 용량                   | CPCT       | Capacity                                              |
+| 용수                   | USWTR      | Using Water                                           |
+| 용어                   | TRM        | Terminology                                           |
+| 용역                   | LBSVC      | Labor Service                                         |
+| 용지                   | LDPL       | Land Parcel                                           |
+| 용출                   | RSRGN      | Resurgence                                            |
+| 우려                   | CNCRN      | Concern                                               |
+| 우선                   | PRRTY      | Priority                                              |
+| 우수                   | EXLN       | Excellence                                            |
+| 우안                   | RGTBK      | Right Bank                                            |
+| 우점                   | DMNC       | Dominance                                             |
+| 우측                   | RGSD       | Right Side                                            |
+| 우편                   | MAIL       | Mail                                                  |
+| 우화                   | EMRN       | Emergence                                             |
+| 운고                   | HFTC       | Height Of The Cloud                                   |
+| 운동                   | MVM        | Movement                                              |
+| 운량                   | CLDQ       | Cloud (Amount)                                        |
+| 운반                   | CRRG       | Carriage                                              |
+| 운송                   | TRNSP      | Transportation                                        |
+| 운수                   | TRANSP     | Transportation                                        |
+| 운영                   | OPER       | Operation                                             |
+| 운임                   | FARE       | Fare                                                  |
+| 운전                   | OPRN       | Operation                                             |
+| 운항                   | NVGT       | Navigation                                            |
+| 운행                   | OPR        | Operation                                             |
+| 운형                   | CLDS       | Cloud Designs                                         |
+| 원가                   | PRMCO      | Prime Cost                                            |
+| 원격                   | REMT       | Remote                                                |
+| 원경                   | DSTNVW     | Distant View                                          |
+| 원고                   | PLNTF      | Plaintiff                                             |
+| 원금                   | PRN        | Principal                                             |
+| 원료                   | BMTRL      | Base Material                                         |
+| 원리                   | PRNCP      | Principle                                             |
+| 원문                   | ORGTXT     | Original Text                                         |
+| 원본                   | ORGNL      | Original                                              |
+| 원수                   | ORGWT      | Origin'S Water                                        |
+| 원시                   | PRMTV      | Primitive                                             |
+| 원인                   | CS         | Cause                                                 |
+| 원장                   | GNLGR      | General Ledger                                        |
+| 원점                   | TRGNPT     | Trigon Point                                          |
+| 원천                   | SOU        | Source                                                |
+| 원화                   | KCUR       | Korean Currency                                       |
+| 월간                   | MTHL       | Monthly                                               |
+| 월류                   | WORFLW     | (Water) Overflow                                      |
+| 월별                   | BMM        | By Month To Month                                     |
+| 월세                   | MRNT       | Monthly Rent                                          |
+| 위도                   | LAT        | Latitude                                              |
+| 위반                   | VLTN       | Violation                                             |
+| 위배                   |            |                                                       |
+| 위생                   | HGEN       | Hygiene                                               |
+| 위성                   | STLT       | Satellite                                             |
+| 위원                   | MBCMT      | Member Of Committee                                   |
+| 위임                   | DLGT       | Delegation                                            |
+| 위촉                   | ENTRST     | Entrusting                                            |
+| 위치                   | PSTN       | Position                                              |
+| 위탁                   | CNSGN      | Consign                                               |
+| 위험                   | DNGR       | Danger                                                |
+| 유가                   | OILPRC     | Oil Price                                             |
+| 유관                   |            |                                                       |
+| 유량                   | VLFL       | Volume Of Flow                                        |
+| 유로                   | FLWCNL     | Flow Channel                                          |
+| 유료                   | CHRG       | Charged                                               |
+| 유리                   | GLASS      | Glass                                                 |
+| 유무                   | EN         | Existence And Nonexistence                            |
+| 유물                   | RLC        | Relic                                                 |
+| 유발                   | INDC       | Induce                                                |
+| 유보                   | DFR        | Defer                                                 |
+| 유사                   | SMLR       | Similar                                               |
+| 유상                   | CMPNS      | (Pay) Compensation                                    |
+| 유선                   | WRD        | Wired                                                 |
+| 유속                   | FVLC       | Flow Velocity(Velocity Of A Moving Fluid)             |
+| 유실                   | LSWTR      | Loss In Water                                         |
+| 유압                   | OLPRSR     | Oil Pressure                                          |
+| 유역                   | BSN        | Basin                                                 |
+| 유예                   | PSTP       | Postponement                                          |
+| 유의                   | CTN        | Caution                                               |
+| 유입                   | INFLW      | Inflow                                                |
+| 유저                   |            |                                                       |
+| 유지                   | KEEP       | Keep                                                  |
+| 유찰                   | FLBD       | Failure In Bidding                                    |
+| 유체                   | FLUID      | Fluid                                                 |
+| 유출                   | OTFLW      | Outflow                                               |
+| 유통                   | RTL        | Retail                                                |
+| 유해                   | HRMFL      | Harmful                                               |
+| 유형                   | TYPE       | Type                                                  |
+| 유효                   | VLD        | Validity                                              |
+| 육상                   | OLAND      | Overland                                              |
+| 윤달                   | LPMM       | Leap Month                                            |
+| 은행                   | BANK       | Bank                                                  |
+| 음력                   | LNCL       | Lunar Calendar                                        |
+| 음성                   | VOICE      | Voice                                                 |
+| 음식                   |            |                                                       |
+| 음용                   | DKPP       | Drinking Purpose                                      |
+| 음원                   | SDSRC      | A Sound Source                                        |
+| 음주                   | DRNK       | Drinking                                              |
+| 응급                   | EMGNCY     | Emergency                                             |
+| 응답                   | RSPNS      | Response                                              |
+| 응모                   | ENTRY      | Entry                                                 |
+| 응시                   | TKEX       | Take An Exam                                          |
+| 의견                   | OPNN       | Opinion                                               |
+| 의결                   | DCS        | Decision                                              |
+| 의뢰                   | RQST       | Request                                               |
+| 의료                   | MDLCR      | Medical Care                                          |
+| 의류                   | CLTHS      | Clothes                                               |
+| 의무                   | OBLG       | Obligation                                            |
+| 의미                   | MNNG       | Meaning                                               |
+| 의사                   | DR         | Doctor                                                |
+| 의안                   | PBIL       | (Proposal) Bill                                       |
+| 의제                   |            |                                                       |
+| 이격                   | SEPR       | Separation (Clearance)                                |
+| 이관                   | TRNSF      | Transfer                                              |
+| 이내                   | WTHN       | Within                                                |
+| 이동                   | MVMN       | Movement                                              |
+| 이력                   | HSTRY      | History                                               |
+| 이름                   |            |                                                       |
+| 이사                   | MVHS       | Move House                                            |
+| 이상                   | ANMLY      | Anomaly                                               |
+| 이송                   | TRNFR      | Transferred                                           |
+| 이수                   | CMCRS      | Completion Of Course                                  |
+| 이슈                   | ISSUE      | Issue                                                 |
+| 이연                   | DFRD       | Deferred                                              |
+| 이온                   | ION        | Ion                                                   |
+| 이용                   | UTZTN      | Utilization                                           |
+| 이월                   | CRFW       | Carry Forward                                         |
+| 이유                   |            |                                                       |
+| 이윤                   | PRFT       | Profit                                                |
+| 이율                   | INRT       | Interest Rate                                         |
+| 이의                   | OBJC       | Objection                                             |
+| 이익                   | PRF        | Profit                                                |
+| 이자                   | INT        | Interest Charge                                       |
+| 이전                   | BFR        | Before                                                |
+| 이주                   | MV         | Move                                                  |
+| 이첩                   | FRWD       | Forwarding                                            |
+| 이체                   | TFR        | Transfer                                              |
+| 이하                   | LSST       | Less Than                                             |
+| 이행                   | IMPLT      | Implementation                                        |
+| 이혼                   | DVRC       | Divorce                                               |
+| 이후                   | AFTR       | After                                                 |
+| 익명                   | ANMT       | Anonymity                                             |
+| 익일                   | NXDD       | Next Day                                              |
+| 인가                   | SNCN       | Sanction                                              |
+| 인계                   | HNOV       | Handover                                              |
+| 인공                   | ARTFC      | Artificial                                            |
+| 인구                   | PPLTN      | Population                                            |
+| 인근                   | NRBY       | Nearby                                                |
+| 인당                   | PS         | Person                                                |
+| 인도                   | CNVYNC     | Conveyance                                            |
+| 인력                   | MNPW       | Manpower                                              |
+| 인명                   | HNL        | Human Life                                            |
+| 인물                   | PRSN       | Personage                                             |
+| 인사                   | HMRS       | Human Resource                                        |
+| 인산                   | PHACID     | Phosphoric Acid                                       |
+| 인쇄                   | PRINT      | Print                                                 |
+| 인수                   | ACPTN      | Acceptance                                            |
+| 인식                   | AWRNS      | Awareness                                             |
+| 인원                   | PEPL       | People                                                |
+| 인자                   | FCTR       | Factor                                                |
+| 인접                   | ADJC       | Adjacent                                              |
+| 인정                   | RCG        | Recognition                                           |
+| 인증                   | CERT       | Certification                                         |
+| 인지                   | PRCPT      | Perception                                            |
+| 인체                   | HMBD       | Human Body                                            |
+| 인허                   |            |                                                       |
+| 일괄                   | EBLC       | En Bloc                                               |
+| 일기                   |            |                                                       |
+| 일문                   | JPNS       | Japanese Sentence                                     |
+| 일반                   | GNRL       | General                                               |
+| 일별                   | BDAY       | By Day                                                |
+| 일본                   | JPN        | Japan                                                 |
+| 일비                   | DLYEXP     | Daily Expenses                                        |
+| 일사                   | SOLRD      | Solar Radiation                                       |
+| 일선                   | FRLN       | First Line                                            |
+| 일시                   | DT         | Date And Time                                         |
+| 일일                   | DAILY      | Daily                                                 |
+| 일자                   | YMD        | Year Month Day                                        |
+| 일정                   | SCHDL      | Schedule                                              |
+| 일조                   | SNSH       | Sunshine                                              |
+| 일지                   | DLYD       | Daily Report                                          |
+| 일치                   | CCRNC      | Concurrence                                           |
+| 일터                   |            |                                                       |
+| 일할                   | DBAS       | Daily Basis                                           |
+| 임기                   | TNR        | Tenure                                                |
+| 임대                   | RENT       | Rent                                                  |
+| 임명                   | NMNT       | Nomination                                            |
+| 임무                   | MSSN       | Mission                                               |
+| 임시                   | TMPR       | Temporary                                             |
+| 임신                   | PRGN       | Pregnancy                                             |
+| 임야                   | FSTLND     | Forest Land                                           |
+| 임업                   | FSTR       | Forestry                                              |
+| 임용                   | APNTMN     | Appointment                                           |
+| 임원                   | EXC        | Executive                                             |
+| 임의                   | RNDM       | Random                                                |
+| 임차                   | HIRE       | Hire                                                  |
+| 입고                   | WRHS       | Warehousing                                           |
+| 입교                   | ENTSCH     | Entrance Into A School                                |
+| 입국                   | ENTCNY     | Entering A Country                                    |
+| 입금                   | DPST       | Deposit                                               |
+| 입대                   | ENLSTM     | Enlistment                                            |
+| 입도                   | GRNSZ      | Grain Size                                            |
+| 입력                   | INPT       | Input                                                 |
+| 입사                   | JNCMP      | Joining A Company                                     |
+| 입산                   | MTCG       | Mountain-Climbing                                     |
+| 입소                   | ENTRC      | Entrance                                              |
+| 입수                   | OBTN       | Obtain                                                |
+| 입실                   | ENTRM      | Entering A Room                                       |
+| 입양                   | ADP        | Adoption                                              |
+| 입원                   | HSPTLZ     | Hospitalization                                       |
+| 입자                   | PARTCL     | Particle                                              |
+| 입장                   | ADMS       | Admission                                             |
+| 입주                   | MVN        | Moving In                                             |
+| 입증                   | PROV       | Prove                                                 |
+| 입지                   | PSTST      | (Site) Position                                       |
+| 입찰                   | BID        | Bid                                                   |
+| 입학                   | MTCLTN     | Matriculation                                         |
+| 입항                   | PTENT      | Port Entry                                            |
+| 입회                   | ATWT       | Attend And Witness                                    |
+| 잉여                   | SURPLS     | Surplus                                               |
+| 자가                   | OSLF       | Oneself                                               |
+| 자갈                   | GRVL       | Gravel                                                |
+| 자격                   | QLFC       | Qualification                                         |
+| 자금                   | FNDS       | Funds                                                 |
+| 자녀                   | CHLD       | Children                                              |
+| 자동                   | AUTO       | Automatic                                             |
+| 자료                   | DATA       | Data                                                  |
+| 자립                   | SRLNE      | Self-Reliance                                         |
+| 자막                   | CAPTN      | Caption                                               |
+| 자문                   | CNSTN      | Consultation                                          |
+| 자본                   | CPT        | Capital                                               |
+| 자사                   | MYCOMP     | My Company                                            |
+| 자산                   | AST        | Asset                                                 |
+| 자연                   | NATR       | Nature                                                |
+| 자원                   | RSRC       | Resources                                             |
+| 자율                   | SLCR       | Self-Control                                          |
+| 자재                   | MTRL       | Materials                                             |
+| 자체                   | ONLF       | Oneself                                               |
+| 자택                   | HOME       | Home                                                  |
+| 작동                   | OPRTG      | Operating                                             |
+| 작물                   | CROP       | Crop                                                  |
+| 작성                   | WRT        | Writing                                               |
+| 작업                   | JOB        | Job                                                   |
+| 작품                   | WRKS       | Works                                                 |
+| 잔금                   | BALNC      | Balance                                               |
+| 잔량                   | RSDQNT     | Residual Quantity                                     |
+| 잔류                   | REMN       | Remaining                                             |
+| 잔반                   | LTVRS      | Leftovers                                             |
+| 잔식                   | UNTFD      | Uneaten Food                                          |
+| 잔액                   | BLNC       | Balance                                               |
+| 잔여                   | RMND       | Remainder                                             |
+| 잔존                   | RMN        | Remain                                                |
+| 잠금                   | LCK        | Locking                                               |
+| 잠재                   | LDRMNT     | Lie Dormant                                           |
+| 잡비                   | MSEXP      | Miscellaneous Expenses                                |
+| 잡종                   | CRHY       | Crossbreed Hybrid                                     |
+| 장관                   | MNST       | Minister                                              |
+| 장기                   | LTRM       | Long Term                                             |
+| 장내                   | ITHL       | In The Hall                                           |
+| 장부                   |            |                                                       |
+| 장비                   | EQPMNT     | Equipment                                             |
+| 장소                   | PLC        | Place                                                 |
+| 장애                   | DSBLTY     | Disability                                            |
+| 장외                   | OTCNTR     | Over The Counter                                      |
+| 장착                   | MNTNG      | Mounting                                              |
+| 장치                   | DVC        | Device                                                |
+| 재개                   | RSMP       | Resumption                                            |
+| 재결                   | ADJD       | Adjudication                                          |
+| 재고                   | INVT       | Inventory                                             |
+| 재난                   | CLMTY      | Calamity                                              |
+| 재료                   | MATRL      | Material                                              |
+| 재무                   | FNNR       | Financial Affair                                      |
+| 재물                   | RCHS       | Riches                                                |
+| 재발                   | RECUR      | Recur                                                 |
+| 재배                   | CTVT       | Cultivation                                           |
+| 재산                   | PRPT       | Property                                              |
+| 재원                   | FNRS       | Financial Resource                                    |
+| 재정                   | FNN        | (Economy) Finance                                     |
+| 재직                   | HDOF       | Hold Office                                           |
+| 재진                   | REXM       | Re-Examination                                        |
+| 재질                   | MQLT       | Material Quality                                      |
+| 재택                   | ATHM       | At Home                                               |
+| 재학                   | INSCH      | In School                                             |
+| 재해                   | DSTR       | Disaster                                              |
+| 쟁점                   |            |                                                       |
+| 저감                   | MTGT       | Mitigation                                            |
+| 저류                   | IMPD       | Impound                                               |
+| 저서                   | WRBK       | Writing Book                                          |
+| 저자                   | AUT        | Author                                                |
+| 저장                   | STRG       | Storage                                               |
+| 저항                   | RS         | Resistance                                            |
+| 적격                   | ELGB       | Eligibility                                           |
+| 적발                   | DSCL       | Disclose                                              |
+| 적산                   |            |                                                       |
+| 적설                   | DSNW       | Deep Snow                                             |
+| 적요                   | ABSTR      | Abstract                                              |
+| 적용                   | APLCN      | Application                                           |
+| 적재                   | LOAD       | Load                                                  |
+| 적정                   | RSNB       | Reasonable                                            |
+| 적중                   | CMTR       | Come True                                             |
+| 적합                   | STBLT      | Suitability                                           |
+| 전거                   |            |                                                       |
+| 전결                   | DCARB      | Deciding Arbitrarily                                  |
+| 전공                   | MJR        | Major                                                 |
+| 전국                   | NTWDE      | Nationwide                                            |
+| 전기                   | PRVTM      | Previous Term                                         |
+| 전년                   | PRYY       | Previous Year                                         |
+| 전단                   | FRDED      | Forward Edge                                          |
+| 전달                   | CNVY       | Convey                                                |
+| 전담                   | EXCHG      | Exclusive Charge                                      |
+| 전도                   | CDTN       | Conduction                                            |
+| 전등                   |            |                                                       |
+| 전략                   | STRTG      | Strategy                                              |
+| 전력                   | ELPWR      | Electric Power                                        |
+| 전류                   | ERCRT      | Electric Current                                      |
+| 전망                   | PRSPT      | Prospect                                              |
+| 전문                   | TELGM      | Telegram                                              |
+| 전산                   | EDP        | Electronic Data Processing                            |
+| 전세                   | LODB       | Lease Of Deposit Basis                                |
+| 전송                   | TRSM       | Transmission                                          |
+| 전시                   | EXHB       | Exhibition                                            |
+| 전압                   | VLTGE      | Voltage                                               |
+| 전역                   | DCRG       | Discharge                                             |
+| 전용                   | EXUSE      | Exclusive Use                                         |
+| 전원                   | SELCT      | Source Of Electricity                                 |
+| 전월                   | PRVMM      | The Previous Month                                    |
+| 전일                   | PRVDY      | The Previous Day                                      |
+| 전입                   | MVIN       | Move In                                               |
+| 전자                   | ELTR       | Electron                                              |
+| 전주                   | LSWEEK     | Last Week                                             |
+| 전지                   | BATT       | Battery                                               |
+| 전체                   | WHOL       | Whole                                                 |
+| 전출                   | MVOUT      | Moving Out                                            |
+| 전표                   | SLIP       | Slip                                                  |
+| 전화                   | TEL        | Telephone                                             |
+| 전환                   | SWTC       | Switching                                             |
+| 전회                   | PRTRN      | Previous Turn                                         |
+| 절감                   | RTRC       | Retrenchment                                          |
+| 절대                   | CMPLTL     | Completely                                            |
+| 절사                   | TRNC       | Truncation                                            |
+| 절약                   | ECNMY      | Economy(Save)                                         |
+| 절차                   | PROC       | Procedure                                             |
+| 점검                   | CHCK       | Check                                                 |
+| 점도                   | VSC        | Viscosity                                             |
+| 점수                   | SCR        | Score                                                 |
+| 점용                   | OCPY       | Occupy                                                |
+| 점유                   |            |                                                       |
+| 점포                   | STOR       | Store                                                 |
+| 접근                   | ACS        | Access                                                |
+| 접속                   | CNTN       | Connection                                            |
+| 접수                   | RCPT       | Receipt                                               |
+| 접종                   | INCLN      | Inoculation                                           |
+| 접촉                   | CNTC       | Contact                                               |
+| 정격                   | RGLT       | Regularity                                            |
+| 정기                   | REGL       | Regular                                               |
+| 정년                   | RTAG       | Retirement Age                                        |
+| 정답                   | CRANS      | Correct Answer                                        |
+| 정당                   | PLTPT      | Political Party                                       |
+| 정도                   | ABT        | About                                                 |
+| 정량                   | QNTV       | Quantitive                                            |
+| 정렬                   | SORT       | Sort                                                  |
+| 정리                   | ARNGMT     | Arrangement                                           |
+| 정면                   | FRNT       | Front                                                 |
+| 정밀                   | PRCIS      | Precision                                             |
+| 정보                   | INFO       | Information                                           |
+| 정부                   | GOV        | Government                                            |
+| 정비                   | MTNC       | Maintenance                                           |
+| 정산                   | CLCLN      | Calculation                                           |
+| 정상                   | NML        | Normal                                                |
+| 정수                   | CLWR       | Clean Water                                           |
+| 정액                   | FXAMT      | Fixed Amount                                          |
+| 정원                   | PSCP       | Personnel Capacity                                    |
+| 정의                   | DEF        | Definition                                            |
+| 정전                   | OTG        | Outage                                                |
+| 정정                   | CRCTN      | Correction                                            |
+| 정제                   | REFINE     | Refining                                              |
+| 정지                   | STOP       | Stop                                                  |
+| 정책                   | PLCY       | Policy                                                |
+| 정체                   | STGNTN     | Stagnation                                            |
+| 정화                   | PRFCTN     | Purification                                          |
+| 제거                   | RMVL       | Removal                                               |
+| 제곱                   | SQ         | Square (Of)                                           |
+| 제공                   | PVSN       | Provision                                             |
+| 제기                   | RAIS       | Raise                                                 |
+| 제도                   | SYST       | (Policy) System                                       |
+| 제목                   | TTL        | Title                                                 |
+| 제방                   | LEV        | Levee                                                 |
+| 제보                   | TPOF       | Tip Off                                               |
+| 제안                   | PRP        | Proposal                                              |
+| 제약                   | RSTRCT     | Restriction                                           |
+| 제어                   | CNTL       | Control                                               |
+| 제외                   | EXCL       | Exclusion                                             |
+| 제원                   | SPEC       | Specifications                                        |
+| 제작                   | FBCTN      | Fabrication                                           |
+| 제재                   | RSTRC      | Restriction                                           |
+| 제정                   | ENCT       | Enactment                                             |
+| 제조                   | MNFTR      | Manufacture                                           |
+| 제체                   | LVBD       | Levee Body                                            |
+| 제출                   | SBMSN      | Submission                                            |
+| 제품                   | PRDCT      | Product                                               |
+| 제한                   | LMT        | Limit                                                 |
+| 제휴                   | AFLT       | Affiliation                                           |
+| 조건                   | CND        | Condition                                             |
+| 조경                   | LDHC       | Landscape Architecture                                |
+| 조기                   | ERLY       | Early                                                 |
+| 조달                   | PRCM       | Procurement                                           |
+| 조류                   | BIRDS      | Birds                                                 |
+| 조명                   | LGHT       | Light                                                 |
+| 조문                   | LPRVS      | Legal Provision                                       |
+| 조사                   | EXMN       | Examination                                           |
+| 조석                   | TIDE       | Tide                                                  |
+| 조성                   | MKNG       | Making                                                |
+| 조식                   | BRKF       | Breakfast                                             |
+| 조위                   | TDLV       | Tide Level                                            |
+| 조작                   | HNDLG      | Handling                                              |
+| 조절                   | RGLTE      | Regulate                                              |
+| 조정                   | AJMT       | Adjustment                                            |
+| 조직                   | OGNZ       | Organization                                          |
+| 조치                   | ACTN       | Action                                                |
+| 조합                   | ASCT       | Association                                           |
+| 조항                   | CLUS       | Clause                                                |
+| 조회                   | INQ        | Inquiry                                               |
+| 존속                   | CNEXS      | Continue To Exist                                     |
+| 존재                   | EXST       | Existence                                             |
+| 존폐                   | MTNABN     | Maintenance Or Abolition                              |
+| 졸업                   | GRDTN      | Graduation                                            |
+| 종결                   | TRMN       | Termination                                           |
+| 종교                   | RLGN       | Religion                                              |
+| 종료                   | END        | End                                                   |
+| 종류                   | KND        | Kind                                                  |
+| 종목                   | CLS        | Class                                                 |
+| 종별                   | BKND       | By Kind                                               |
+| 종이                   | PPR        | Paper                                                 |
+| 종일                   | ALDY       | All Day                                               |
+| 종자                   | SEED       | Seed                                                  |
+| 종점                   | EDPNT      | End Point                                             |
+| 종합                   | SNTHS      | Synthesize                                            |
+| 좋음                   | GOOD       | Good                                                  |
+| 좌석                   | SEAT       | Seat                                                  |
+| 좌안                   | LFTBK      | Left Bank                                             |
+| 좌측                   | LSD        | Left Side                                             |
+| 주간                   | DDTM       | Daytime                                               |
+| 주거                   |            |                                                       |
+| 주관                   | SPRVSN     | Supervision                                           |
+| 주기                   | CYCLE      | Cycle                                                 |
+| 주말                   | WKND       | Weekend                                               |
+| 주무                   | ICHG       | In Charge Of                                          |
+| 주문                   | ORDR       | Order                                                 |
+| 주민                   | RSDR       | Resident Person                                       |
+| 주변                   | ARND       | Around                                                |
+| 주석                   | ANTN       | Annotation                                            |
+| 주소                   | ADDR       | Address                                               |
+| 주수                   | WKCNT      | Week Count                                            |
+| 주식                   | STCK       | Stock                                                 |
+| 주심                   | CRFR       | Chief Referee                                         |
+| 주요                   | MAIN       | Main                                                  |
+| 주유                   | RFL        | Refueling                                             |
+| 주의                   | CUTN       | Caution                                               |
+| 주입                   | INJCT      | Injection                                             |
+| 주제                   | TPC        | Topic                                                 |
+| 주주                   | STHD       | Stockholder                                           |
+| 주차                   | PRK        | Parking                                               |
+| 주체                   | MNBD       | Main Body                                             |
+| 주최                   | HST        | Host                                                  |
+| 주키                   |            |                                                       |
+| 주택                   | HS         | House                                                 |
+| 준공                   | CMCN       | Completion Of Construction                            |
+| 준비                   | PREPR      | Preparation                                           |
+| 준설                   | DRDGN      | Dredging                                              |
+| 준수                   | CMPLY      | Comply                                                |
+| 중간                   | MD         | Middle                                                |
+| 중개                   | MDT        | Mediation                                             |
+| 중계                   | RLY        | Relay                                                 |
+| 중고                   | USED       | Used                                                  |
+| 중국                   | CHIN       | China                                                 |
+| 중기                   | MLTRM      | Middle Term                                           |
+| 중단                   | ITRP       | Interruption                                          |
+| 중도                   | MDWY       | Midway                                                |
+| 중량                   | WGHT       | Weight                                                |
+| 중문                   | CHNS       | Chinese Sentence                                      |
+| 중복                   | DPCN       | Duplication                                           |
+| 중식                   | LUNCH      | Lunch                                                 |
+| 중심                   | CEN        | Central                                               |
+| 중앙                   | CTRL       | Central                                               |
+| 중요                   | IMPT       | Important                                             |
+| 중점                   | EMPHS      | Emphasis                                              |
+| 중증                   | SVRLY      | Severely                                              |
+| 중지                   | HLT        | Halt                                                  |
+| 중층                   | MDCL       | Middle Class                                          |
+| 증가                   | INCRS      | Increase                                              |
+| 증감                   | ICDC       | Increase And Decrease                                 |
+| 증권                   | SCRT       | Securities                                            |
+| 증기                   | STM        | Steam                                                 |
+| 증량                   | AGMNT      | Augmentation                                          |
+| 증명                   | ECTFN      | (Evidence) Certification                              |
+| 증발                   | VPRZN      | Vaporization                                          |
+| 증빙                   | EVDNC      | Evidence                                              |
+| 증상                   | SMPTM      | Symptom                                               |
+| 증설                   | XBLDP      | Extension Build Up                                    |
+| 증식                   | PRLRT      | Proliferation                                         |
+| 증액                   | ICAMT      | Increased Amount                                      |
+| 지구                   | DSTRCT     | District                                              |
+| 지급                   | GIVE       | Give                                                  |
+| 지도                   | MAP        | Map                                                   |
+| 지령                   | DRTV       | Directive                                             |
+| 지로                   | GIRO       | Giro                                                  |
+| 지류                   | TRBTR      | Tributary                                             |
+| 지면                   | GROND      | Ground                                                |
+| 지목                   | LDCG       | Land Category                                         |
+| 지반                   | BSGR       | Base Ground                                           |
+| 지방                   | LCL        | Local                                                 |
+| 지번                   | LOTNO      | Lot Number                                            |
+| 지분                   | SHR        | Share                                                 |
+| 지불                   | DFRY       | Defrayal                                              |
+| 지붕                   | ROOF       | Roof                                                  |
+| 지사                   | BROF       | Branch Office                                         |
+| 지상                   | GRND       | Ground                                                |
+| 지세                   | TPGPH      | Topography                                            |
+| 지속                   | SSTN       | Sustain                                               |
+| 지수                   | IDX        | Index                                                 |
+| 지시                   | DRCTN      | Direction                                             |
+| 지식                   | KNWL       | Knowledge                                             |
+| 지역                   | RGN        | Region                                                |
+| 지연                   | DLY        | Delay                                                 |
+| 지열                   | TRHT       | Terrestrial Heat                                      |
+| 지원                   | SPRT       | Support                                               |
+| 지적                   | PTOUT      | Point Out                                             |
+| 지점                   | BRNCH      | Branch                                                |
+| 지정                   | DSGN       | Designation                                           |
+| 지진                   | ERTHQK     | Earthquake                                            |
+| 지질                   | GEOLG      | Geology                                               |
+| 지체                   |            |                                                       |
+| 지출                   | EXPND      | Expenditure                                           |
+| 지침                   | GUIDNC     | Guidance                                              |
+| 지표                   | IDCT       | Indicator                                             |
+| 지하                   | UDGD       | Underground                                           |
+| 지형                   | TRRN       | Terrain                                               |
+| 직경                   | DIA        | Diameter                                              |
+| 직군                   | JGRP       | Job Group                                             |
+| 직급                   | JBGD       | Job Grade                                             |
+| 직렬                   | JBSRS      | Job Series                                            |
+| 직류                   | TPOC       | Type Of Occupation                                    |
+| 직무                   | DUTY       | Duty                                                  |
+| 직업                   | CR         | Career                                                |
+| 직영                   | DROPER     | Direct Operation                                      |
+| 직원                   | EMP        | Employee                                              |
+| 직위                   | JBPS       | Job Position                                          |
+| 직인                   | OFSL       | Office Seal                                           |
+| 직장                   | WRC        | Workplace                                             |
+| 직접                   | DRCT       | Direct                                                |
+| 직제                   | OFORG      | Office Organization                                   |
+| 직종                   | OCPT       | Occupation                                            |
+| 직책                   | JBTTL      | Job Title                                             |
+| 직통                   | DRLN       | Direct Line                                           |
+| 진단                   | DGNS       | Diagnosis                                             |
+| 진도                   | PRGD       | Progress Degree                                       |
+| 진동                   | VBRT       | Vibration                                             |
+| 진료                   | MDEXM      | Medical Examination                                   |
+| 진입                   | ACCS       | Access                                                |
+| 진행                   | PRGRS      | Progress                                              |
+| 질량                   | MSS        | Mass                                                  |
+| 질문                   | QSTN       | Question                                              |
+| 질병                   | DSS        | Disease                                               |
+| 질의                   | INQRY      | Inquiry                                               |
+| 집계                   | TOT        | Total                                                 |
+| 집광                   | CRTL       | Concentrate Light                                     |
+| 집중                   | FCUS       | Focus                                                 |
+| 집행                   | IMPL       | Implementation                                        |
+| 집회                   | GTHR       | Gathering                                             |
+| 징계                   | DSPN       | Disciplinary Punishment                               |
+| 징구                   | CLRQ       | Collection Request                                    |
+| 징수                   | CLCTN      | Collection                                            |
+| 쪽지                   | NOTE       | Note                                                  |
+| 차감                   | SBTR       | Subtraction                                           |
+| 차관                   | VMNST      | Vice-Minister                                         |
+| 차기                   | NXTM       | Next Term                                             |
+| 차단                   | SHTOT      | Shut Out                                              |
+| 차량                   | VHCL       | Vehicle                                               |
+| 차로                   | LANE       | Lane                                                  |
+| 차변                   | DBSD       | The Debit Side                                        |
+| 차선                   | TRFLN      | Traffic Lane                                          |
+| 차수                   | CYCL       | Cycle                                                 |
+| 차압                   | PSD        | Pressure Difference                                   |
+| 차액                   | DFAMT      | Difference Amount                                     |
+| 차이                   | DIFF       | Difference                                            |
+| 차입                   | BRW        | Borrowing                                             |
+| 차종                   | CARMDL     | Car Model                                             |
+| 차집                   | ICPTG      | Intercepting                                          |
+| 차축                   | AXLE       | An Axle                                               |
+| 차트                   | CHRT       | Chart                                                 |
+| 착공                   | BGNCST     | Begin Construction                                    |
+| 착수                   | OTST       | Outset                                                |
+| 착정                   | BRNG       | Boring                                                |
+| 찬반                   | FRAGN      | For And Against                                       |
+| 참고                   | REF        | Reference                                             |
+| 참석                   | ATND       | Attendance                                            |
+| 참여                   | PTCP       | Participation                                         |
+| 참조                   | RFRNC      | Reference                                             |
+| 창고                   | WRHUS      | Warehouse                                             |
+| 창업                   | STUP       | Start Up                                              |
+| 채광                   | BWL        | Be Well-Lighted                                       |
+| 채권                   | BND        | Bond                                                  |
+| 채널                   | CHNL       | Channel                                               |
+| 채무                   | DBT        | Debt                                                  |
+| 채수                   | WTSMP      | Water Sampling                                        |
+| 채용                   | RCRUT      | Recruit                                               |
+| 채점                   | GRDG       | Grading                                               |
+| 채집                   | CLLT       | Collect                                               |
+| 채취                   | PCKNG      | Picking                                               |
+| 채택                   | ADPT       | Adoption                                              |
+| 채혈                   | BLDGTH     | Blood-Gathering                                       |
+| 책임                   | RSP        | Responsibility                                        |
+| 책자                   | BKLET      | Booklet                                               |
+| 처리                   | PRCS       | Process                                               |
+| 처방                   | PRSC       | Prescription                                          |
+| 처분                   | DSPS       | Disposition                                           |
+| 척도                   | YDST       | Yardstick                                             |
+| 철거                   | DMLTN      | Demolition                                            |
+| 철관                   | IRPP       | An Iron Pipe                                          |
+| 철회                   | RCNTT      | Recantation                                           |
+| 첨두                   | PEAK       | Peak                                                  |
+| 첨부                   | ATCH       | Attachment                                            |
+| 청구                   | CLM        | Claim                                                 |
+| 청렴                   | INTGRT     | Integrity                                             |
+| 청문                   | HRNG       | Hearing                                               |
+| 청소                   | CLEAN      | Cleaning                                              |
+| 청약                   | SBSC       | Subscription                                          |
+| 청정                   | CLEN       | Clean                                                 |
+| 청취                   | LSTN       | Listening                                             |
+| 청탁                   | SLCT       | Solicitation                                          |
+| 체결                   | CNCLS      | Conclusion                                            |
+| 체계                   | SYSTM      | System                                                |
+| 체납                   | NPMNT      | Nonpayment                                            |
+| 체류                   | STAY       | Stay                                                  |
+| 체적                   | VLM        | (Capacity) Volume                                     |
+| 체크                   | BCHCK      | (Basic) Check                                         |
+| 체험                   | EXPRN      | Experience                                            |
+| 초과                   | EXCS       | Excess                                                |
+| 초기                   | INITL      | Initial                                               |
+| 초당                   | PRSEC      | Per Second                                            |
+| 초록                   | ABST       | Abstract                                              |
+| 초상                   | FRSTSS     | First Frost Of Season                                 |
+| 초지                   | GRSLND     | Grassland                                             |
+| 초진                   | FMEXM      | First Medical Examination                             |
+| 총계                   | TSM        | Summation                                             |
+| 총괄                   | OVRL       | Overall                                               |
+| 총서                   | SRS        | Series                                                |
+| 총액                   |            |                                                       |
+| 총인                   | TPH        | Total Phosphorus                                      |
+| 총종                   | TNSPCS     | Total Species                                         |
+| 총쪽                   | TPAGE      | Total Pages                                           |
+| 촬영                   | SHT        | Shooting                                              |
+| 최고                   | HGHST      | Highest                                               |
+| 최근                   | RCNT       | Recent                                                |
+| 최대                   | MAX        | Maximum                                               |
+| 최소                   | MIN        | Minimum                                               |
+| 최신                   | LTST       | Latest                                                |
+| 최저                   | LOWST      | Lowest                                                |
+| 최적                   | OPTMM      | Optimum                                               |
+| 최종                   | LAST       | Last                                                  |
+| 최초                   | FRST       | First                                                 |
+| 추가                   | ADD        | Addition                                              |
+| 추계                   | ESTM       | Estimating                                            |
+| 추세                   | TRND       | Trend                                                 |
+| 추심                   | EXCT       | Exaction                                              |
+| 추인                   | CNFRM      | Confirmation                                          |
+| 추적                   | TRC        | Trace                                                 |
+| 추정                   | PRSMP      | Presumption                                           |
+| 추진                   | PRPL       | Propulsion                                            |
+| 추천                   | RCMDTN     | Recommendation                                        |
+| 추첨                   | LTRY       | Lottery                                               |
+| 추출                   | EXTR       | Extraction                                            |
+| 축냉                   | CLDST      | Cold Storage                                          |
+| 축분                   | LIVEMR     | Livestock Manure                                      |
+| 축사                   | CTSHD      | Cattle Shed                                           |
+| 축산                   | LVST       | Livestock                                             |
+| 축제                   | FSTVL      | Festival                                              |
+| 축종                   | DASPCS     | Domestic Animal Species                               |
+| 축척                   | RDSCL      | Reduced Scale                                         |
+| 출고                   | SPMT       | Shipment                                              |
+| 출구                   | EXIT       | Exit                                                  |
+| 출국                   | DPTCNY     | Departure From A Country                              |
+| 출근                   | GTWK       | Go To Work                                            |
+| 출금                   | TKMNY      | Taking Out Money                                      |
+| 출동                   | DSPT       | Dispatched                                            |
+| 출력                   | OTPT       | Output                                                |
+| 출발                   | DPTRE      | Departure                                             |
+| 출산                   | CHLDB      | Childbirth                                            |
+| 출생                   | BRTH       | Birth                                                 |
+| 출석                   | ATNDC      | Attendance                                            |
+| 출시                   | RELSE      | Release                                               |
+| 출연                   | CTRB       | Contribution                                          |
+| 출원                   | APPL       | Application                                           |
+| 출입                   | ENEX       | Entrance And Exit                                     |
+| 출자                   | INVST      | Investment                                            |
+| 출장                   | BZTRP      | Business Trip                                         |
+| 출제                   | STXQ       | Setting Exam Questions                                |
+| 출처                   | SRC        | Source                                                |
+| 출판                   | PBLSG      | Publishing                                            |
+| 출하                   | CON        | Con                                                   |
+| 출항                   | DFPT       | Departure From Port                                   |
+| 출현                   | APRC       | Appearance                                            |
+| 충당                   | APRP       | Appropriation                                         |
+| 충돌                   | CRASH      | Crash                                                 |
+| 충전                   | CHARG      | Charging                                              |
+| 충족                   | STSF       | Satisfaction                                          |
+| 취급                   | HNDL       | Handling                                              |
+| 취득                   | ACQS       | Acquisition                                           |
+| 취미                   | HBY        | Hobby                                                 |
+| 취소                   | RTRCN      | Retraction                                            |
+| 취수                   | WTRIT      | Water-Intake                                          |
+| 취약                   | FRGLTY     | Fragility                                             |
+| 취업                   | EMPM       | Employment                                            |
+| 취임                   | INGR       | Inauguration                                          |
+| 취지                   | INTN       | Intent                                                |
+| 취하                   | DISCON     | Discontinuance                                        |
+| 취합                   | GTRG       | Gathering                                             |
+| 측량                   | SVY        | Surveying                                             |
+| 측면                   | SIDE       | Side                                                  |
+| 측선                   | SDTRCK     | Sidetrack                                             |
+| 측점                   | MSREPT     | A Measuring Point                                     |
+| 측정                   | MSRMT      | Measurement                                           |
+| 층수                   | NOFL       | The Number Of Floors                                  |
+| 치료                   | MDTRT      | Medical Treatment                                     |
+| 치어                   | YGFISH     | Young Of Fishes                                       |
+| 친수                   | HDRPL      | Hydrophile                                            |
+| 친화                   | FRSHP      | Friendship                                            |
+| 침수                   | FLDNG      | Flooding                                              |
+| 침하                   | SSDCE      | Subsidence                                            |
+| 침해                   | INFR       | Infringement                                          |
+| 카드                   | CARD       | Card                                                  |
+| 커버                   |            |                                                       |
+| 컬럼                   | COL        | Column                                                |
+| 코드                   | CD         | Code                                                  |
+| 콘도                   | CONDO      | Condominium                                           |
+| 쿠폰                   | CPN        | Coupon                                                |
+| 쿼터                   | QTA        | Quota                                                 |
+| 퀴즈                   | QZ         | Quiz                                                  |
+| 크기                   | SZ         | Size                                                  |
+| 클릭                   | CLCK       | Click                                                 |
+| 타사                   | OCMP       | Other Company                                         |
+| 탁도                   | TRBT       | Turbidity                                             |
+| 탄소                   | CRBN       | Carbon                                                |
+| 탈거                   | CRYOFF     | Carry Off                                             |
+| 탈락                   | ELMT       | Elimination                                           |
+| 탈수                   | DHDR       | Dehydration                                           |
+| 탈착                   | DPTN       | Desorption                                            |
+| 탈퇴                   | WHDWL      | Withdrawal                                            |
+| 탐사                   | EXPLR      | Exploration                                           |
+| 탑승                   | BRDG       | Boarding                                              |
+| 태그                   | TAG        | Tag                                                   |
+| 태풍                   | TYPHN      | Typhoon                                               |
+| 터널                   | TNL        | Tunnel                                                |
+| 토론                   | DSCS       | Discussion                                            |
+| 토목                   | ENGRK      | Engineering Works                                     |
+| 토사                   | ETND       | Earth And Sand                                        |
+| 토양                   | SOIL       | Soil                                                  |
+| 토익                   | TOEIC      | Test Of English For International Communication       |
+| 토지                   | LAND       | Land                                                  |
+| 톤수                   | TON        | Tonnage                                               |
+| 통계                   | STATS      | Statistics                                            |
+| 통과                   | PAS        | Pass                                                  |
+| 통관                   | CSCL       | Customs Clearance                                     |
+| 통보                   | NTFCTN     | Notification                                          |
+| 통신                   | CMN        | Communication                                         |
+| 통일                   | UNFCTN     | Unification                                           |
+| 통제                   | CNTRL      | Control                                               |
+| 통지                   | AVTSMT     | Avertissement                                         |
+| 통합                   | INTG       | Integration                                           |
+| 통화                   | CALL       | Call                                                  |
+| 퇴거                   | EVCT       | Eviction                                              |
+| 퇴근                   | LVWK       | Leave Work                                            |
+| 퇴비                   | CMPS       | Compost                                               |
+| 퇴사                   | RSGNTN     | Resignation                                           |
+| 퇴소                   | DSCG       | Discharge                                             |
+| 퇴실                   | LVRM       | Leaving The Room                                      |
+| 퇴원                   | DFHSP      | Discharged From Hospital                              |
+| 퇴직                   | RTRM       | Retirement                                            |
+| 투과                   | PENTR      | Penetration                                           |
+| 투약                   | MDCT       | Medication                                            |
+| 투입                   | INPUT      | Input                                                 |
+| 투자                   | IVST       | Investment                                            |
+| 투찰                   | BDNG       | Bidding                                               |
+| 투표                   | VOTE       | Vote                                                  |
+| 트럭                   | TRCK       | Truck                                                 |
+| 특기                   | SPCLT      | Specialty                                             |
+| 특례                   | SPCS       | Special Case                                          |
+| 특별                   | SPC        | Special                                               |
+| 특보                   | SPNWS      | Special News                                          |
+| 특성                   | CHRTC      | Characteristic                                        |
+| 특수                   | SPCL       | Special                                               |
+| 특약                   | SPPRV      | Special Provision                                     |
+| 특이                   | EXCPTN     | Exception                                             |
+| 특정                   | PTCLR      | Particular                                            |
+| 특징                   | GNCHC      | (General) Characteristic                              |
+| 특허                   | PTNT       | Patent                                                |
+| 팀장                   | TMLDR      | Team Leader                                           |
+| 파견                   | SND        | Send                                                  |
+| 파고                   | WVHGT      | Wave Height                                           |
+| 파기                   | DSTRC      | Destruction                                           |
+| 파산                   | BNKRP      | Bankruptcy                                            |
+| 파손                   | BRKG       | Breakage                                              |
+| 파일                   | FILE       | File                                                  |
+| 판결                   | JDGM       | Judgment                                              |
+| 판독                   | INTERP     | Interpretation                                        |
+| 판매                   | NTSL       | Net Sales                                             |
+| 판정                   | JGMT       | Judgement                                             |
+| 팝업                   | POPUP      | Popup                                                 |
+| 패류                   | SHLFSH     | Shellfish                                             |
+| 패소                   | LSCS       | Lose A Case                                           |
+| 패스                   |            |                                                       |
+| 패턴                   | PTTN       | Pattern                                               |
+| 팩스                   | FAX        | Fax                                                   |
+| 펀드                   | FUND       | Fund                                                  |
+| 펌프                   | PUMP       | Pump                                                  |
+| 페놀                   | PHNL       | Phenol                                                |
+| 편성                   | FRMT       | Formation                                             |
+| 편입                   | ENRL       | Enrollment                                            |
+| 편집                   | EDIT       | Edit/ Editing                                         |
+| 편차                   | DVT        | Deviation                                             |
+| 평가                   | EVL        | Evaluation                                            |
+| 평균                   | AVG        | Average                                               |
+| 평면                   | PLANE      | Plane                                                 |
+| 폐간                   | DSCT       | Discontinuation                                       |
+| 폐강                   | CLCTR      | Closing Lecture                                       |
+| 폐국                   |            |                                                       |
+| 폐기                   | DSCD       | Discard                                               |
+| 폐쇄                   | CLSG       | Closing                                               |
+| 폐수                   | WWT        | Waste Water                                           |
+| 폐업                   | CLSBIZ     | Closing Of Business                                   |
+| 폐열                   | EXSH       | Exhaust Heat                                          |
+| 폐지                   | ABL        | Abolition                                             |
+| 포괄                   | CMPH       | Comprehend                                            |
+| 포기                   | ABND       | Abandonment                                           |
+| 포럼                   | FRUM       | Forum                                                 |
+| 포맷                   |            |                                                       |
+| 포상                   | RWRD       | Reward                                                |
+| 포장                   | PCKGN      | Packaging                                             |
+| 포집                   | SPCR       | Speicherung                                           |
+| 포트                   | PORT       | Port                                                  |
+| 포함                   | INCL       | Inclusion                                             |
+| 포화                   | STRN       | Saturation                                            |
+| 포획                   | CPTR       | Capture                                               |
+| 폭발                   | EPLS       | Explosion                                             |
+| 폰트                   | FNT        | Font                                                  |
+| 폴더                   | FLDR       | Folder                                                |
+| 표고                   | ELVTN      | Elevation                                             |
+| 표기                   | MARK       | Marking                                               |
+| 표면                   | SRFC       | Surface                                               |
+| 표본                   | SAMPLE     | Sample                                                |
+| 표시                   | INDCT      | Indication                                            |
+| 표준                   | STD        | Standard                                              |
+| 표지                   | CVR        | Cover                                                 |
+| 표출                   | EXPRS      | Expression                                            |
+| 품목                   | ITEM       | Item                                                  |
+| 품의                   | CNSL       | Consultation                                          |
+| 품종                   | VRTY       | Variety                                               |
+| 품질                   | QLT        | Quality                                               |
+| 풍력                   | WPWR       | Wind Power                                            |
+| 풍속                   | WSPD       | Wind Speed                                            |
+| 풍정                   | WDDST      | Wind Drift Distance                                   |
+| 풍향                   | WDRCT      | Wind Direction                                        |
+| 피고                   | DFND       | Defendant                                             |
+| 피도                   | CVRAGE     | Cover (Age)                                           |
+| 피해                   | DAM        | Damage                                                |
+| 피혁                   | LTHR       | Leather                                               |
+| 픽셀                   | PXL        | Pixel                                                 |
+| 필기                   | NTTK       | Note-Taking                                           |
+| 필수                   | ESNTL      | Essential                                             |
+| 필요                   | NEED       | Need                                                  |
+| 필지                   | LTLND      | Lot Of Land                                           |
+| 필터                   | FILT       | Filter                                                |
+| 하구                   | RVMTH      | River Mouth                                           |
+| 하단                   | LWND       | Lower End                                             |
+| 하도                   | RVCRS      | River Course                                          |
+| 하류                   | DNSTM      | Downsteam                                             |
+| 하상                   | RVBD       | A River Bed                                           |
+| 하수                   | SWAGE      | Sewage                                                |
+| 하안                   | RVRSD      | Riverside                                             |
+| 하역                   | LNL        | Loading And Unloading                                 |
+| 하위                   | LWR        | Lower                                                 |
+| 하자                   | FLW        | Flaw                                                  |
+| 하천                   | RVR        | River                                                 |
+| 하층                   | LWCL       | Lower Class                                           |
+| 하폭                   | WR         | Width Of River                                        |
+| 하한                   | LLMT       | The Lower Limit                                       |
+| 하향                   | DWNWRD     | Downward                                              |
+| 학과                   | SCSBJT     | School Subject                                        |
+| 학교                   | SCHL       | School                                                |
+| 학급                   | CLAS       | Class                                                 |
+| 학년                   | SCYR       | School Year                                           |
+| 학력                   | ACBG       | Academic Background                                   |
+| 학명                   | STNM       | Scientific Name                                       |
+| 학생                   | STDNT      | Student                                               |
+| 학술                   | ACDM       | Academic                                              |
+| 학습                   | LRN        | Learning                                              |
+| 학원                   | PEIT       | Private Educational Institute                         |
+| 학위                   | DGR        | Degree                                                |
+| 학회                   | ACSCT      | Academic Society                                      |
+| 한강                   | HNRVR      | Han River                                             |
+| 한계                   | MLMT       | (Max) Limit                                           |
+| 한국                   | KOR        | Korea                                                 |
+| 한글                   | KORN       | Korean (Language)                                     |
+| 한도                   | LIM        | Limit                                                 |
+| 한문                   | CLSCHN     | Classical Chinese                                     |
+| 한발                   |            |                                                       |
+| 한자                   | CHNCRT     | Chinese Character                                     |
+| 할당                   | ALOT       | Allotment                                             |
+| 할부                   | IS         | Installment                                           |
+| 할인                   | DSCNT      | Discount                                              |
+| 할증                   | EXCHRG     | Extra Charge                                          |
+| 함량                   |            |                                                       |
+| 함수                   | FNC        | Function                                              |
+| 함유                   | CONTN      | Contain                                               |
+| 합격                   | PASS       | Pass                                                  |
+| 합계                   | SUM        | Sum                                                   |
+| 합병                   | MERG       | Merger                                                |
+| 합산                   | ADUP       | Adding Up                                             |
+| 합숙                   | LDTG       | Lodge Together                                        |
+| 합의                   | ACRD       | Accord                                                |
+| 항공                   | AVTN       | Aviation                                              |
+| 항구                   | PRT        | Port                                                  |
+| 항만                   | HRBR       | Harbor                                                |
+| 항목                   | ARTCL      | Article                                               |
+| 항소                   | APL        | Appeal                                                |
+| 항속                   | CRSPD      | Cruise Speed                                          |
+| 항차                   | VYG        | Voyage                                                |
+| 해당                   | RLVT       | Relevant                                              |
+| 해면                   | SSRFC      | Sea Surface                                           |
+| 해발                   | ELVT       | Elevation                                             |
+| 해산                   | DSBND      | Disband                                               |
+| 해석                   | INTPR      | Interpret                                             |
+| 해설                   | EXPL       | Explain                                               |
+| 해소                   | RSLV       | Resolve                                               |
+| 해수                   | SEAW       | Seawater                                              |
+| 해약                   | CNCL       | Cancellation                                          |
+| 해양                   | OCEAN      | Ocean                                                 |
+| 해역                   | OCE        | Ocean                                                 |
+| 해외                   | OVSEA      | Overseas                                              |
+| 해임                   | DSMSL      | Dismissal                                             |
+| 해제                   | RMV        | Remove                                                |
+| 해지                   | CNCLTN     | Cancellation                                          |
+| 해체                   | DSMT       | Dismantlement                                         |
+| 해촉                   | DSMS       | Dismissal                                             |
+| 핵심                   | KPNT       | Key Point                                             |
+| 행망                   |            |                                                       |
+| 행사                   | EVNT       | Event                                                 |
+| 행위                   | ACT        | Act                                                   |
+| 행정                   | PBADMS     | Public Administration                                 |
+| 향후                   | HCFH       | Henceforth                                            |
+| 허가                   | PRMSN      | Permission                                            |
+| 허용                   | PRM        | Permit                                                |
+| 현금                   | CASH       | Cash                                                  |
+| 현상                   | PRSST      | Present State                                         |
+| 현안                   | PDISS      | Pending Issue                                         |
+| 현원                   | ACNO       | Actual Number Of Employee                             |
+| 현장                   | GRNDS      | Grounds                                               |
+| 현재                   | NOW        | Now                                                   |
+| 현지                   | LOCAL      | Local                                                 |
+| 현행                   | EXSTN      | Existing                                              |
+| 현황                   | PRST       | Present Situation                                     |
+| 혈압                   | BDPR       | Blood Pressure                                        |
+| 협력                   | CLBR       | Collaboration                                         |
+| 협약                   | CVTN       | Convention                                            |
+| 협의                   | CNSLTN     | Consultation                                          |
+| 협회                   | ASOC       | Association                                           |
+| 형사                   | CMLC       | Criminal Case                                         |
+| 형상                   | CONF       | Configuration                                         |
+| 형식                   | FRM        | Formality                                             |
+| 형태                   | SHP        | Shape                                                 |
+| 호봉                   | SLCLS      | Salary Class                                          |
+| 호소                   | LKMR       | Lakes And Marshes                                     |
+| 호안                   | RVTMNT     | Revetment                                             |
+| 호우                   | HRAIN      | Heavy Rain                                            |
+| 호출                   | CLOT       | Call Out                                              |
+| 혼인                   |            |                                                       |
+| 혼입                   | MIXTR      | Mixture                                               |
+| 혼합                   | MIX        | Mix                                                   |
+| 홍보                   | PBRL       | Public Relations                                      |
+| 홍수                   | FLOOD      | Flood                                                 |
+| 화력                   | THPWR      | Thermal Power                                         |
+| 화면                   | SCRN       | Screen                                                |
+| 화물                   | FRGHT      | Freight                                               |
+| 화소                   |            |                                                       |
+| 화일                   |            |                                                       |
+| 화재                   | FIRE       | Fire                                                  |
+| 화주                   | SHPPR      | Shipper                                               |
+| 화폐                   | CRNC       | Currency                                              |
+| 화학                   | CHEM       | Chemistry                                             |
+| 확대                   | EXPD       | Expand                                                |
+| 확률                   | PRBBT      | Probability                                           |
+| 확보                   | SECR       | Secure                                                |
+| 확산                   | DFFSN      | Diffusion                                             |
+| 확인                   | IDNTY      | Identify                                              |
+| 확장                   | EXTND      | Extend                                                |
+| 확정                   | CFMTN      | Confirmation                                          |
+| 환경                   | ENV        | Environment                                           |
+| 환급                   | RMBR       | Reimbursement                                         |
+| 환기                   | VNTL       | Ventilation                                           |
+| 환매                   | RPRCH      | Repurchase                                            |
+| 환불                   | RFND       | Refundment                                            |
+| 환산                   | CNVS       | Conversion                                            |
+| 환수                   | RDM        | Redemption                                            |
+| 환원                   | RVERT      | Revert                                                |
+| 환율                   | EXCHRT     | Exchange Rate                                         |
+| 환입                   | RTRN       | Returns                                               |
+| 환자                   | PTN        | Patient                                               |
+| 환전                   | CREX       | Currency Exchange                                     |
+| 활동                   | ACTV       | Activity                                              |
+| 활성                   | ACTVTN     | Activation                                            |
+| 활용                   | UTLZ       | Utilize                                               |
+| 황사                   | YLDST      | Yellow Dust[Sand]                                     |
+| 회계                   | ACNTG      | Accounting                                            |
+| 회기                   | SESN       | Session                                               |
+| 회복                   | RCVRY      | Recovery                                              |
+| 회비                   | MFEE       | Membership Fee                                        |
+| 회사                   | CO         | Company                                               |
+| 회생                   | RVVL       | Revival                                               |
+| 회선                   | CRCUT      | (Telephone/Telegraph) Circuit                         |
+| 회수                   | RTRVL      | Retrieval                                             |
+| 회신                   | RPLY       | Reply                                                 |
+| 회원                   | MBR        | Member                                                |
+| 회의                   | MTG        | Meeting                                               |
+| 회장                   | CHRMN      | Chairman                                              |
+| 회차                   |            |                                                       |
+| 횟수                   | NMTM       | Number Of Times                                       |
+| 효과                   | EFCT       | Effect                                                |
+| 효력                   | EFECT      | Effect                                                |
+| 효율                   | EFFC       | Efficiency                                            |
+| 후기                   | LATP       | The Latter Part                                       |
+| 후보                   | CNDT       | Candidate                                             |
+| 후원                   | SPN        | Sponsor                                               |
+| 훈련                   | TRNG       | Training                                              |
+| 훼손                   | DMG        | Damage                                                |
+| 휴가                   | VCT        | Vacation                                              |
+| 휴관                   | CLSR       | Closure                                               |
+| 휴대                   | MBL        | Mobile                                                |
+| 휴면                   | DRMC       | Dormancy                                              |
+| 휴무                   | DYOFF      | Day Off                                               |
+| 휴식                   | RELX       | Relax                                                 |
+| 휴양                   | RLX        | Relax                                                 |
+| 휴업                   | TCBIZ      | Temporary Close Of Business                           |
+| 휴일                   | HLDY       | Holiday                                               |
+| 휴지                   | PAUS       | Pause                                                 |
+| 휴직                   | LVABSN     | Leave Of Absence                                      |
+| 흡수                   | ABSTN      | Absorption                                            |
+| 흡연                   | SMK        | Smoking                                               |
+| 흡입                   | INHL       | Inhalation                                            |
+| 희망                   | HOPE       | Hope                                                  |
+| 희석                   | DLTN       | Dilution                                              |
+| 힌트                   | HNT        | Hint                                                  |
+| 가능량                 | PSBQTY     | Possible Quantity                                     |
+| 가능성                 | PSBTY      | Possibility                                           |
+| 가동률                 | OPRT       | Operation Rate                                        |
+| 가동보                 | OPRWR      | Operating Weir                                        |
+| 가두리                 | CAGE       | Cage                                                  |
+| 가맹점                 | FRCS       | Franchise                                             |
+| 가산세                 | ADDTX      | Additional Tax                                        |
+| 가산점                 | ADSC       | Additional Score                                      |
+| 가속도                 | ACCT       | Acceleration                                          |
+| 가수금                 | SPRCP      | Suspense Receipt                                      |
+| 가압류                 | PRAT       | Provisional Attachment                                |
+| 가연성                 | CMBSTB     | Combustibility                                        |
+| 가이드                 | GUIDE      | Guide                                                 |
+| 가입자                 | SBSR       | Subscriber                                            |
+| 가정용                 | HSHUS      | Household Use                                         |
+| 가중치                 | WGVL       | Weighted Value                                        |
+| 가지급                 | PRVPY      | Provisional Payment                                   |
+| 가지불                 |            |                                                       |
+| 가해자                 | ASLNT      | Assailant                                             |
+| 간소화                 | SMPLFC     | Simplification                                        |
+| 간접비                 | IDRCO      | Indirect Cost                                         |
+| 간접세                 | IDTX       | indirect tax                                          |
+| 간행물                 | PBLC       | Publication                                           |
+| 간호사                 | NRS        | Nurse                                                 |
+| 갈수위                 | DWTRLV     | Droughty Water Level                                  |
+| 감독자                 | SPVSR      | Supervisor                                            |
+| 감리원                 | SPVR       | Supervisor                                            |
+| 감리자                 |            |                                                       |
+| 감면율                 | RDCRT      | Reduction Rate                                        |
+| 감사인                 | ADTR       | Auditor                                               |
+| 감사자                 |            |                                                       |
+| 감정가                 | APPRC      | Appraised Price                                       |
+| 감정값                 |            |                                                       |
+| 감축량                 | RQTY       | Reduction Quantity                                    |
+| 강기슭                 | RVRBNK     | Riverbank                                             |
+| 강수량                 | RN         | Rainfall                                              |
+| 강우량                 | AMRF       | (The Amount Of) Rainfall                              |
+| 강의실                 | LCTRM      | Lecture Room                                          |
+| 개발비                 | DVLCO      | Development Cost                                      |
+| 개발자                 | DVLPR      | Developer                                             |
+| 개월수                 | MCNT       | Month Count                                           |
+| 개인별                 | BINDV      | By Individuals                                        |
+| 객관식                 | MLCH       | Multiple Choice                                       |
+| 거래소                 | STCNG      | Stock Exchange                                        |
+| 거래자                 | DLR        | Dealer                                                |
+| 거래처                 | CNPT       | Counterparty                                          |
+| 거주지                 | RSDC       | Residence                                             |
+| 건강성                 | HLTHY      | Healthy                                               |
+| 건축물                 | BDST       | Buildings & Structures                                |
+| 건축주                 | OWNER      | (Architecture) Owner                                  |
+| 건폐율                 | BDCVRT     | Building Coverage Ratio                               |
+| 검보정                 | CVACT      | Cal/Val Activity                                      |
+| 검사소                 | INSOFC     | Inspection Office                                     |
+| 검사원                 | INSPTR     | Inspector                                             |
+| 검사자                 | TSTR       | Tester                                                |
+| 검색어                 | SRWRD      | Search Word                                           |
+| 검수자                 | CHCKR      | Checker                                               |
+| 검증자                 | VRIFER     | Verifier                                              |
+| 검토자                 | RVWR       | Reviewer                                              |
+| 게시글                 | PSTAT      | Post Article                                          |
+| 게시물                 | PST        | Post                                                  |
+| 게시자                 | PBLR       | Publisher                                             |
+| 게시판                 | BBS        | Bulletin Board System                                 |
+| 격자선                 | GLINE      | Grid Line                                             |
+| 결과서                 | RSTRPT     | Results Report                                        |
+| 결의서                 | RSDOC      | Resolution Document                                   |
+| 결재선                 | APLN       | Approval Line                                         |
+| 결재자                 | APRVR      | Approver                                              |
+| 결측치                 | MSVAL      | Missing Value                                         |
+| 경년관                 | AGPIP      | Aged Pipes                                            |
+| 경사도                 | GRAD       | Gradient                                              |
+| 경상자                 | SLIPR      | Slightly Injured Person                               |
+| 경영체                 | BIZORG     | Business Organization                                 |
+| 경유국                 | TRCTRY     | Transit Country                                       |
+| 경유지                 | STPV       | Stopover                                              |
+| 경작면                 |            |                                                       |
+| 경제성                 | ECNMFB     | Economic Feasibility                                  |
+| 경찰서                 | POLSTN     | Police Station                                        |
+| 계곡수                 | VLLWTR     | Valley Water                                          |
+| 계근대                 |            |                                                       |
+| 계량기                 | MSINS      | Measuring Instrument                                  |
+| 계량대                 | SCAL       | Scale                                                 |
+| 계산서                 | BLL        | Bill                                                  |
+| 계산식                 | CALFM      | Calculation Formula                                   |
+| 계수기                 | COUNTR     | Counter                                               |
+| 계약서                 | CTRTD      | Contract Document                                     |
+| 계약자                 | CTRTR      | Contractor                                            |
+| 계약직                 | CTWK       | Contract Work                                         |
+| 계측기                 | MSRINS     | Measuring Instrument                                  |
+| 계통도                 | SDGRM      | System Diagram                                        |
+| 계획량                 | PLNQTY     | Planned Quantity                                      |
+| 계획서                 | PLDOC      | Planning Document                                     |
+| 고농도                 | HCNTR      | High Concentration                                    |
+| 고수위                 | HWL        | High Water Level                                      |
+| 고유종                 | ESP        | Endemic Species                                       |
+| 고지서                 | NTDOC      | Notice Document                                       |
+| 고혈압                 | HBPR       | High Blood Pressure                                   |
+| 고형물                 | SLD        | Solid                                                 |
+| 곡선식                 | CRVFM      | Curve Formula                                         |
+| 골프장                 | GC         | Golf Course                                           |
+| 공고자                 | NOTIF      | Notifier                                              |
+| 공급량                 | SQTY       | Supply Quantity                                       |
+| 공급원                 | SRCSL      | Source Of Supply                                      |
+| 공급자                 | SPLR       | Supplier                                              |
+| 공람자                 | PDSPR      | Public Display Person                                 |
+| 공모전                 | CNTEXH     | Contest Exhibit                                       |
+| 공무원                 | PBOFC      | Public Official                                       |
+| 공문서                 |            |                                                       |
+| 공사비                 | CNSCO      | Construction Cost                                     |
+| 공시가                 | OFPRC      | Official Notice Price                                 |
+| 공용량                 | EMPCPT     | Empty Capacity                                        |
+| 공작물                 | STRCT      | Structures                                            |
+| 공정도                 | PRCSDG     | Process Diagram                                       |
+| 공정률                 | PRCRT      | Process Rate                                          |
+| 공휴일                 | LHLDY      | Legal Holiday                                         |
+| 과부족                 | OVSRT      | Overs And Shorts                                      |
+| 과수원                 | OCD        | Orchard                                               |
+| 과오납                 | OEPY       | Overpayment Or Erroneous Payment                      |
+| 과징금                 | SRCHG      | Surcharge                                             |
+| 과태료                 | FFNLG      | Fine For Negligence                                   |
+| 관개전                 | RFLD       | Irrigation Field                                      |
+| 관계식                 | RLEXP      | Relational Expression                                 |
+| 관계인                 |            |                                                       |
+| 관계자                 | RLPR       | Related Person                                        |
+| 관공서                 | GVMNTF     | Government Office                                     |
+| 관광지                 | TRSPT      | Tourist Spot                                          |
+| 관리비                 | MNCO       | Maintenance Cost                                      |
+| 관리자                 | MNGR       | Manager                                               |
+| 관리청                 | MNAGC      | Management Agency                                     |
+| 관서장                 | CGO        | Chief Of Government Office                            |
+| 관세율                 | TRFRT      | Tariff Rate                                           |
+| 관측소                 | OBSVTR     | Observatory                                           |
+| 광화학                 | PHTCH      | Photochemistry                                        |
+| 교부세                 | SHTX       | Shared Tax                                            |
+| 교육비                 | EDUCO      | Educational Cost                                      |
+| 교육생                 | TRNE       | Trainee                                               |
+| 교육세                 | EDUTX      | Education Tax                                         |
+| 교직원                 | TSTF       | The Teaching Staff                                    |
+| 교통량                 | TRFV       | Traffic Volume                                        |
+| 교통비                 | TRNSCO     | Transportation Cost                                   |
+| 교통세                 | TRTAX      | Transportation Tax                                    |
+| 교환국                 |            |                                                       |
+| 구매량                 | PCHQTY     | Purchased Quantity                                    |
+| 구매자                 | PRCHR      | Purchaser                                             |
+| 구매처                 | PCPL       | Purchasing Place                                      |
+| 구성원                 | GMBR       | (Group) Member                                        |
+| 구역내                 | WTZN       | Within Zone                                           |
+| 구조물                 | STRTS      | Structures                                            |
+| 구체성                 | CCRTNS     | Concreteness                                          |
+| 국고금                 | NTFND      | National Funds                                        |
+| 국내산                 |            |                                                       |
+| 권리금                 | PRMM       | Premium                                               |
+| 권리자                 | RTHDR      | Rights Holder                                         |
+| 귀화종                 | NTSPCS     | Naturalized Species                                   |
+| 균등도                 | EVNS       | Evenness                                              |
+| 그리드                 | GRID       | Grid                                                  |
+| 근로자                 | WRKR       | Worker                                                |
+| 근무일                 | WRKDY      | Working Day                                           |
+| 근무자                 | STF        | Staff                                                 |
+| 근무조                 | WKTM       | Working Team                                          |
+| 근무지                 | POWK       | Place Of Work                                         |
+| 근무처                 | OPLEMP     | One'S Place Of Employment                             |
+| 근저당                 | FXCL       | Fixed Collateral                                      |
+| 글쓴이                 |            |                                                       |
+| 금수성                 | WRPLCY     | Water repellency (of waste)                           |
+| 금요일                 | FRI        | Friday                                                |
+| 금칙어                 | PHWRD      | Prohibited Words                                      |
+| 급수관                 | FEEDP      | Feed Pipe                                             |
+| 급수량                 | AMWTSP     | Amount of Water Supply                                |
+| 급수전                 | WTSTP      | Water Supply Tap                                      |
+| 기간별                 | BPRD       | By Period                                             |
+| 기계식                 | MCNCL      | Mechanical                                            |
+| 기관장                 | INLDR      | Institution Leader                                    |
+| 기납부                 | PVPY       | Previously Payment                                    |
+| 기념일                 | ANVS       | Anniversary                                           |
+| 기능직                 | TCJB       | Technical Service Jobs                                |
+| 기록물                 | RCDS       | Records                                               |
+| 기록부                 | REGI       | Register                                              |
+| 기록자                 | RCDR       | Recorder                                              |
+| 기본도                 | BSDG       | Basic Diagram                                         |
+| 기본키                 | PK         | Primary Key                                           |
+| 기부금                 | AOD        | Amount Of Donation                                    |
+| 기부자                 | CTBTR      | Contributor                                           |
+| 기부처                 | CTBPL      | Contribution Place                                    |
+| 기상청                 | KMA        | Korea Meteorological Administration                   |
+| 기수종                 | BRSPC      | Brackish Species                                      |
+| 기숙사                 | DMTRY      | Dormitory                                             |
+| 기술료                 | RLTY       | Royalty                                               |
+| 기술성                 | TYFCY      | Technology Efficiency                                 |
+| 기술자                 | ENGNR      | Engineer                                              |
+| 기술직                 | ENJB       | Engineering Jobs                                      |
+| 기안자                 | DRFR       | Drafter                                               |
+| 기압계                 | MNMTR      | Manometer                                             |
+| 기업체                 |            |                                                       |
+| 기울기                 |            |                                                       |
+| 기자재                 | MCMTR      | Machinery And Materials                               |
+| 기준율                 | STDRT      | Standard Rate                                         |
+| 기준점                 | CRLPT      | Control Point                                         |
+| 기준치                 | STDVAL     | Standard Value                                        |
+| 기증자                 | DNR        | Donor                                                 |
+| 기환급                 | ARFND      | Already Refund                                        |
+| 기후부                 |            |                                                       |
+| 꼬리말                 | FTR        | Footer (Comment)                                      |
+| 끓는점                 | BPNT       | Boiling Point                                         |
+| 낙동강                 | NDRVR      | Nakdong River                                         |
+| 낙차공                 | DSTC       | Drop Structure                                        |
+| 낙찰률                 | SCBRT      | Successful Bid Rate                                   |
+| 낙찰자                 | SCBDR      | Successful Bidder                                     |
+| 난이도                 | DFCTY      | Difficulty (Degree)                                   |
+| 남북한                 | SANK       | South And North Korea                                 |
+| 남조류                 | BLAL       | Blue-Green Algae                                      |
+| 납부자                 | RTPYR      | Ratepayer                                             |
+| 납세자                 | TXPR       | Taxpayer                                              |
+| 내국인                 | DOMPL      | Domestic People                                       |
+| 내륙수                 | INTWTR     | Interior Waters                                       |
+| 내부망                 |            |                                                       |
+| 내성종                 | TRSPCS     | Tolerance Species                                     |
+| 내역서                 | DTSTMN     | Detailed Statement                                    |
+| 냉각수                 | CULWTR     | Cooling Water                                         |
+| 냉난방                 | HAC        | Heating And Cooling                                   |
+| 노무비                 | LBCO       | Labor Cost                                            |
+| 노트북                 | NTBK       | Notebook (Computer)                                   |
+| 녹는점                 | MPNT       | Melting Point                                         |
+| 농경지                 | FMLND      | Farmland                                              |
+| 농어촌                 | FFV        | Farming And Fishing Villages                          |
+| 농업인                 | FRMR       | Farmer                                                |
+| 농작물                 | CRPS       | Crops                                                 |
+| 농장주                 | FRMER      | Farm Owner                                            |
+| 농축산                 | AGST       | Agriculture And Stockbreeding                         |
+| 농축조                 | THCKNR     | Thickener                                             |
+| 누리집                 | HMPG       | Homepage                                              |
+| 누수량                 | LKQTY      | Leakage Quantity                                      |
+| 누출량                 | LKGQTY     | Leakage Quantity                                      |
+| 닉네임                 | NICK       | Nick Name                                             |
+| 다기능                 | MTFN       | Multifunctional                                       |
+| 다양성                 | DVRST      | Diversity                                             |
+| 다자녀                 | MCHLD      | Multi-Child                                           |
+| 단계별                 | BSTP       | By Step                                               |
+| 단답형                 | SRQT       | Short Questions                                       |
+| 단말기                 | TRMNL      | Terminal                                              |
+| 단면적                 | CRSA       | Cross Sectional Areas                                 |
+| 단백질                 | PROTN      | Protein                                               |
+| 단속자                 | RGLTR      | Regulator                                             |
+| 단위별                 | BUNIT      | By Unit                                               |
+| 달성도                 | ACHDGR     | Achievement Degree                                    |
+| 달성량                 | ACHQTY     | Achieved Quantity                                     |
+| 달성률                 | ACMTRT     | Achievement Rate                                      |
+| 담당인                 |            |                                                       |
+| 담당자                 | PIC        | Person In Charge                                      |
+| 담수화                 | WTCON      | Water Conversion                                      |
+| 답변서                 | ANSDOC     | Answer Document                                       |
+| 답변자                 | ANSWR      | Answerer                                              |
+| 당사자                 | CNCPR      | Concerned Person                                      |
+| 당직자                 | DTPR       | Duty Person                                           |
+| 당첨자                 | PZWNR      | Prize Winner                                          |
+| 대국민                 | TNATN      | To The Nation                                         |
+| 대권역                 | LSIRB      | Large Sphere Of Influence In A River Basin            |
+| 대기업                 | LCO        | Large Company                                         |
+| 대기자                 | WAITR      | Waiting Person                                        |
+| 대기질                 | ARQLT      | Air Quality                                           |
+| 대리인                 | AGT        | Agent                                                 |
+| 대리자                 |            |                                                       |
+| 대리점                 | AGNC       | Agency                                                |
+| 대분류                 | LCLSF      | Large-Scale Classification                            |
+| 대블록                 | LBLK       | Large Block                                           |
+| 대상자                 | TRPR       | Target Person                                         |
+| 대여자                 | LNDR       | Lender                                                |
+| 대장균                 | CLBCL      | Colon Bacillus                                        |
+| 대집행                 | EBRXY      | Execution By Proxy                                    |
+| 대표자                 | RPRSV      | Representative                                        |
+| 대학교                 | UNIV       | University                                            |
+| 대학생                 | UNVST      | University Student                                    |
+| 대학원                 | GDSCHL     | Graduate School                                       |
+| 데이터                 |            |                                                       |
+| 도래지                 | SSNH       | Seasonal Home                                         |
+| 도메인                 | DMN        | Domain                                                |
+| 도서관                 | LIB        | Library                                               |
+| 도수관                 | WCNVP      | Water Conveyance Pipe                                 |
+| 도식도                 | SCDG       | Schema Diagram                                        |
+| 도움말                 | HLP        | Help                                                  |
+| 도입종                 |            |                                                       |
+| 도착지                 | DEST       | Destination                                           |
+| 도착항                 | ARPT       | Arrival Port                                          |
+| 돌망태                 | WRCLDR     | Wire Cylinder                                         |
+| 동거자                 | RMMT       | Roommate                                              |
+| 동기화                 | SYNC       | Synchronization                                       |
+| 동승자                 | FLPS       | Fellow Passenger                                      |
+| 동식물                 | ANPL       | Animals And Plants                                    |
+| 동영상                 | VDO        | Video                                                 |
+| 동의서                 | WTCS       | Written Consent                                       |
+| 동의어                 | SYNM       | Synonym                                               |
+| 동의자                 | ASNTR      | Assentor                                              |
+| 동호회                 | CLUB       | Club                                                  |
+| 드렛지                 | DRDG       | Dredge                                                |
+| 등기소                 | RGOFC      | Registry Office                                       |
+| 등록세                 | RGTX       | Registration Tax                                      |
+| 등록인                 |            |                                                       |
+| 등록자                 | RGTR       | Registrant                                            |
+| 등록증                 | REGC       | Registration Certificate                              |
+| 디자인                 | DDSGN      | (Drawing) Design                                      |
+| 디지털                 | DGTL       | Digital                                               |
+| 디폴트                 |            |                                                       |
+| 레이더                 | RADR       | Radar                                                 |
+| 레이어                 |            |                                                       |
+| 레코드                 | RCRD       | Record                                                |
+| 레포트                 |            |                                                       |
+| 로그인                 | LGN        | Login                                                 |
+| 리소스                 | RSC        | Resource                                              |
+| 만수위                 | FWTLV      | Full Water Level                                      |
+| 만족도                 | DGSTFN     | Degree Of Satisfaction                                |
+| 맞벌이                 | DLICM      | Dual Income                                           |
+| 매뉴얼                 | MNL        | Manual                                                |
+| 매립량                 | LFDQTY     | Landfilled Quantity                                   |
+| 매립장                 | GRLNDF     | Garbage Landfill                                      |
+| 매립지                 | RCMLND     | Reclaimed Land                                        |
+| 매수인                 |            |                                                       |
+| 매수자                 | BYR        | Buyer                                                 |
+| 머리말                 | PRFC       | Preface                                               |
+| 메모리                 | MMRY       | Memory                                                |
+| 메세지                 |            |                                                       |
+| 메시지                 | MSG        | Message                                               |
+| 면담자                 | ITVWR      | Interviewer                                           |
+| 명명일                 | NMCLT      | Nomenclate                                            |
+| 명명자                 | NMCLTR     | Nomenclator                                           |
+| 명세서                 | SPCFCD     | Specification Document                                |
+| 모니터                 | MNT        | Monitor                                               |
+| 모델링                 | MDLN       | Modelling                                             |
+| 모바일                 | MOBL       | Mobile                                                |
+| 모식도                 | MIMIC      | Mimic                                                 |
+| 목요일                 | THUR       | Thursday                                              |
+| 목욕탕                 | BTHHS      | Bathhouse                                             |
+| 목적세                 |            |                                                       |
+| 목적어                 | OBJECT     | Object                                                |
+| 목적지                 | DSTNST     | Destination                                           |
+| 목표량                 | GLQTY      | Goal Quantity                                         |
+| 목표물                 | MRK        | Mark                                                  |
+| 무역업                 | TRDB       | Trade Business                                        |
+| 무응답                 | NRPLY      | No Reply                                              |
+| 무이자                 | ZINT       | Zero Interest                                         |
+| 무제한                 | UNLMT      | Unlimit                                               |
+| 무주택                 | HMLS       | Homeless                                              |
+| 무피해                 | NDMGE      | Nothing Damage                                        |
+| 문의처                 | INQPL      | Inquiring Place                                       |
+| 문제점                 | PBPT       | Problem Point                                         |
+| 문화재                 | CLTPTY     | Cultural Property                                     |
+| 물건지                 | RELC       | Real Estate Location                                  |
+| 물리적                 | PHYSCL     | Physical                                              |
+| 미가동                 | NORUN      | No Run                                                |
+| 미개설                 | UDVLP      | Undeveloped                                           |
+| 미개통                 | UOPN       | UnOpened                                              |
+| 미검사                 | NINSP      | No Inspection                                         |
+| 미구축                 | NBULD      | Unbuilt                                               |
+| 미급수                 | NWSPLY     | Non Water Supply                                      |
+| 미달성                 | NCHV       | Nonachievement                                        |
+| 미등록                 | UNREG      | Unregistration                                        |
+| 미디어                 | CMDIA      | (Content) Media                                       |
+| 미반영                 | URFT       | Unreflection                                          |
+| 미반출                 | NSHPGT     | Non Shipping Out                                      |
+| 미부과                 | NLVY       | Not Levy                                              |
+| 미부착                 | NTASN      | Not Adhesion                                          |
+| 미사용                 | UNUSE      | Unused                                                |
+| 미상각                 | UAMTZ      | Unamortized                                           |
+| 미상환                 | NRPY       | Non Repayment                                         |
+| 미생물                 | MCROG      | Microorganism                                         |
+| 미선정                 | NSLCT      | Non-Selection                                         |
+| 미설치                 | NOINS      | No Installation                                       |
+| 미수금                 | ACNRCV     | Accounts Receivable                                   |
+| 미수납                 | NRCP       | Non-Receipt                                           |
+| 미승인                 | UNAPRV     | Unapproved                                            |
+| 미신고                 | UNDCLR     | Undeclared                                            |
+| 미신청                 | UNAPL      | Unappplied                                            |
+| 미실행                 | NEXCN      | Non Execution                                         |
+| 미완료                 | INCPL      | Incomplete                                            |
+| 미운행                 | NOPRTN     | Non Operation                                         |
+| 미이행                 | NFLFL      | Non-Fulfillment                                       |
+| 미작성                 | NOSPEC     | Not Specified                                         |
+| 미적용                 | DNAP       | Does Not Apply                                        |
+| 미전송                 | NTST       | Not Sent                                              |
+| 미점검                 | NPCTD      | Uninspected                                           |
+| 미제출                 | UNSBM      | Unsubmitted                                           |
+| 미지급                 | OTSPY      | Outstanding Payment                                   |
+| 미지정                 | NDSN       | Not Designation                                       |
+| 미집행                 | UNEX       | Unexecuted                                            |
+| 미처리                 | UNPRCS     | Unprocessed                                           |
+| 미첨부                 | UTCH       | Unattachment                                          |
+| 미추진                 | UPMT       | Unpromoted                                            |
+| 미취득                 | UCQS       | Unacquisition                                         |
+| 미포함                 | NINCLS     | Noninclusion                                          |
+| 미허가                 | UPRMSN     | Un Permission                                         |
+| 미확정                 | UDTM       | Undetermined                                          |
+| 미환급                 | UNRFND     | Unrefunded                                            |
+| 미활용                 | UNUTL      | Unutilized                                            |
+| 미회수                 | UNRT       | Un-Retrieval                                          |
+| 민감종                 | STSPCS     | Sensitiveness Species                                 |
+| 민원인                 | CVLPR      | Civil Petitioner                                      |
+| 바이오                 | BIO        | Bio                                                   |
+| 바코드                 | BARCD      | Bar-Code                                              |
+| 박물관                 | MSM        | Museum                                                |
+| 반송자                 | RTRNR      | Returner                                              |
+| 반영량                 | RFLQTY     | Reflected Quantity                                    |
+| 반올림                 | ROUND      | Rounding                                              |
+| 반응조                 | RETNK      | Reactant Tank                                         |
+| 반입량                 | CIVLM      | Carry-In Volume                                       |
+| 반출량                 | COVLM      | Carry-Out Volume                                      |
+| 반출입                 | CRRYIO     | Carry In And Out                                      |
+| 발간물                 |            |                                                       |
+| 발견지                 | DCVRST     | Discovery Site                                        |
+| 발급자                 | ISPR       | Issuing Person                                        |
+| 발명자                 | INVTR      | Inventor                                              |
+| 발생량                 | AMTGNR     | Amount Generated                                      |
+| 발송인                 |            |                                                       |
+| 발송자                 | SNDR       | Sender                                                |
+| 발신인                 |            |                                                       |
+| 발신자                 | SNDPTY     | Sending Party                                         |
+| 발신처                 | DSPL       | Dispatch Place                                        |
+| 발열량                 | CLRVAL     | Calorific Value                                       |
+| 발원지                 | SRCE       | Source (Of A River)                                   |
+| 발전기                 | GNRTR      | Generator                                             |
+| 발전량                 | ELTQTY     | Electricity Generation Quantity                       |
+| 발전소                 | PWPL       | Power Plant                                           |
+| 발주자                 | ORDERR     | Orderer                                               |
+| 발주처                 | ORDPL      | Ordering Place                                        |
+| 발표자                 | PRSNTR     | Presenter                                             |
+| 발행인                 |            |                                                       |
+| 발행자                 | ISR        | Issuer                                                |
+| 발행처                 | ISPL       | Issue Place                                           |
+| 발화점                 | IGPT       | Ignition Point                                        |
+| 방류구                 | DWOT       | Dewatering Outlets                                    |
+| 방류량                 | OTFL       | Outflow                                               |
+| 방류수                 | EFLNT      | Effluent                                              |
+| 방문객                 |            |                                                       |
+| 방문자                 | VSTR       | Visitor                                               |
+| 방법론                 | MHDLG      | Methodology                                           |
+| 방사능                 | RDACT      | Radioactivity                                         |
+| 방수로                 | SPWY       | A Spillway                                            |
+| 방수위                 | WTELV      | Tailwater Elevation                                   |
+| 방화벽                 | FRWL       | Firewall                                              |
+| 배기량                 | DSVLM      | Displacement Volume                                   |
+| 배달처                 | DLDTN      | Delivery Destination                                  |
+| 배당금                 | DVDND      | Dividend                                              |
+| 배송지                 | DLVRPL     | Delivery Place                                        |
+| 배수관                 | DRNP       | Drain Pipe                                            |
+| 배수문                 | DRGT       | Drainage Gate                                         |
+| 배수지                 | DTBRSV     | Distribution Reservoir                                |
+| 배양체                 | EBDY       | Embryoid Body                                         |
+| 배우자                 | SPS        | Spouse                                                |
+| 배정자                 | ALTMTR     | Allotment Person                                      |
+| 배출구                 | OTLT       | Outlet                                                |
+| 배출권                 | EMCRD      | Emmision Credit                                       |
+| 배출량                 | EHQTY      | Exhaust Quantity                                      |
+| 배출수                 | DCGWTR     | Discharge Water                                       |
+| 배출원                 | EMSRC      | Emission Source                                       |
+| 배출자                 | EMTR       | Emitter                                               |
+| 배치도                 | LSKC       | Layout Sketch                                         |
+| 배터리                 | BTRY       | Battery                                               |
+| 번역문                 | TRNSN      | Translation Sentence                                  |
+| 번호판                 | NOPLT      | Number Plate                                          |
+| 범람원                 | FLDPLN     | Flood Plain                                           |
+| 법무사                 | JDSCR      | Judicial Scrivener                                    |
+| 법인세                 | COTX       | Corporate Tax                                         |
+| 법정동                 | STDG       | Statutory Dong(Administrative District)               |
+| 법정리                 | STLI       | Statutory Li(Administrative District)                 |
+| 변경자                 | CHNRG      | Changer                                               |
+| 변동량                 | FLCQTY     | Fluctuation Quantity                                  |
+| 변동률                 | FLCTNR     | Fluctuation Rate                                      |
+| 변호사                 | LWYR       | Lawyer                                                |
+| 변화량                 | CHQTY      | Change Quantity                                       |
+| 변환기                 |            |                                                       |
+| 병해충                 | DIP        | Disease And Insect Pest                               |
+| 보건소                 | PHC        | Public Health Center                                  |
+| 보고량                 | RPTQTY     | Repoted Quantity                                      |
+| 보고서                 | RPTP       | Report Paper                                          |
+| 보고자                 | RPTR       | Reporter                                              |
+| 보관량                 | HDQTY      | Held Quantity                                         |
+| 보상금                 | CPMNY      | Compensation Money                                    |
+| 보수자                 | MENDER     | Mender                                                |
+| 보수적                 | CSVT       | Conservative                                          |
+| 보안성                 | PSCRTY     | (Property) Security                                   |
+| 보유량                 | HLDQTY     | Holding Quantity                                      |
+| 보일러                 | BLR        | Boiler                                                |
+| 보조금                 | SBSIDY     | Subsidy                                               |
+| 보조비                 | SBSDY      | Subsidy                                               |
+| 보좌관                 | AIDE       | Aide                                                  |
+| 보증금                 | GTN        | Guaranty Money                                        |
+| 보증료                 | GRFE       | Guarantee Fee                                         |
+| 보증서                 | WTGR       | Written Guarantee                                     |
+| 보증인                 | GRNR       | Guarantor                                             |
+| 보험료                 | ISPM       | Insurance Premium                                     |
+| 보호자                 | PRTCR      | Protector                                             |
+| 보호종                 | PRSPCS     | Protected Species                                     |
+| 복잡성                 | CMPXTY     | Complexity                                            |
+| 복호화                 | DECD       | Decoding                                              |
+| 본거지                 | STRHLD     | Stronghold                                            |
+| 본예산                 | MBGT       | Main Budget                                           |
+| 봉사료                 | SVCHG      | Service Charge                                        |
+| 부과금                 | LVYAMT     | Levy Amount                                           |
+| 부과량                 | BMCPT      | Billed metered consumption                            |
+| 부녀자                 | WMAN       | Woman                                                 |
+| 부담금                 | BDNC       | Burden Charge                                         |
+| 부동산                 | REST       | Real Estate                                           |
+| 부산물                 | BYPRD      | By-Product                                            |
+| 부상자                 | INJPSN     | Injured Person                                        |
+| 부서별                 | BDPT       | By Department                                         |
+| 부서장                 | DH         | Department Head                                       |
+| 부속서                 | ANXD       | Annex Document                                        |
+| 부식성                 | CRRS       | Corrosiveness                                         |
+| 부유물                 |            |                                                       |
+| 부유사                 | SPDSMT     | Suspended Sediment                                    |
+| 부적격                 | INDQ       | Inadequacy                                            |
+| 부적정                 | IMPRTY     | Impropriety                                           |
+| 부적합                 | ICPT       | Incompatibility                                       |
+| 부전공                 | MNR        | Minor                                                 |
+| 부정당                 | DSQ        | Disqualified                                          |
+| 부제목                 | SBTTL      | Subtitle                                              |
+| 부존량                 | PTTQTY     | Potential Quantity                                    |
+| 부하량                 | LDQTY      | Loading Quantity                                      |
+| 부하율                 | ALFT       | A Load Factor                                         |
+| 북마크                 |            |                                                       |
+| 분기별                 | BQTR       | By Quarte                                             |
+| 분류군                 | TXGRP      | Taxonomic Group                                       |
+| 분류식                 | SPRSYS     | Separate System                                       |
+| 분석서                 | ANLRPT     | Analysis Report                                       |
+| 분석자                 | ANLSR      | Analysis Person (Analyst)                             |
+| 분야별                 | BFLD       | By Field                                              |
+| 분양가                 | LTOTPR     | Lotting-Out Price                                     |
+| 분자량                 | MWT        | Molecular Weight                                      |
+| 분자식                 | MCFM       | Molecular Formula                                     |
+| 불가능                 | IMPSBL     | Impossible                                            |
+| 불공정                 | UNFAIR     | Unfair                                                |
+| 불만족                 | DSTF       | Dissatisfaction                                       |
+| 불연성                 | NFLY       | Incombustibility, Noninflammability                   |
+| 불완전                 | IPRFCT     | Imperfection                                          |
+| 불이행                 | NFUFL      | No Fulfill Or Execute                                 |
+| 불인정                 | NRCG       | Nonrecognition                                        |
+| 불일치                 | NCNSN      | Non-Consensus                                         |
+| 불투수                 | IMPMB      | Impermeable                                           |
+| 불합격                 | FAL        | Fail                                                  |
+| 불확도                 | UNCTDG     | Uncertainty Degree                                    |
+| 불활성                 | INCTVY     | Inactivity                                            |
+| 블로그                 | BLOG       | Blog                                                  |
+| 비공개                 | PRVT       | Private                                               |
+| 비과세                 | TXFR       | Tax-Free                                              |
+| 비관리                 | UCTL       | Uncontrolled                                          |
+| 비대상                 | NTRGT      | Non-Target                                            |
+| 비도로                 | NROAD      | Non Road                                              |
+| 비동의                 | DSAG       | Disagree                                              |
+| 비디오                 |            |                                                       |
+| 비산업                 | NINDS      | No Industry                                           |
+| 비상용                 | EUSE       | Emergency Use                                         |
+| 비영리                 | NPRF       | Non-Profit                                            |
+| 비인가                 | NAPR       | Non Approval                                          |
+| 비정상                 | ABNML      | Abnormal                                              |
+| 비추천                 | DCMD       | Decommendation                                        |
+| 비포장                 | UNPVD      | Unpaved                                               |
+| 비표준                 | NSTNRD     | Non-Standard                                          |
+| 비할당                 | USGN       | Unassignment                                          |
+| 비활성                 | IACTV      | Inactive                                              |
+| 비회원                 | NMBR       | Non Member                                            |
+| 빈용기                 | ECNTNR     | Empty Container                                       |
+| 사망인                 |            |                                                       |
+| 사망자                 | DCSD       | The Deceased                                          |
+| 사무소                 | OFCE       | Office                                                |
+| 사무실                 | OFC        | Office                                                |
+| 사무직                 | OFJB       | Office Jobs                                           |
+| 사분면                 | QDRNT      | Quadrant                                              |
+| 사상자                 | CSLTS      | Casualties                                            |
+| 사수량                 | DWTVLM     | Dead Water Volume                                     |
+| 사수위                 | DSRL       | Dead Storage Level                                    |
+| 사업비                 | PJTCO      | Project Cost                                          |
+| 사업소                 |            |                                                       |
+| 사업자                 | BZMN       | Businessman                                           |
+| 사업장                 | BPLC       | Business Place                                        |
+| 사업체                 | BZENT      | Business Enterprise                                   |
+| 사용권                 | TROU       | The Right Of Using                                    |
+| 사용량                 | USQTY      | Usage Quantity                                        |
+| 사용료                 | USFE       | Use Fee                                               |
+| 사용률                 | USGRT      | Usage Rate                                            |
+| 사용인                 |            |                                                       |
+| 사용자                 | USER       | User                                                  |
+| 사용처                 | PLCUS      | Place Of Use                                          |
+| 사원증                 | EMPC       | Employee Card                                         |
+| 사유서                 | LTFRSN     | Letter For The Reason                                 |
+| 사이즈                 |            |                                                       |
+| 사이트                 | SITE       | Site                                                  |
+| 삭제자                 | DLTR       | Deleter                                               |
+| 산번지                 | MLNO       | Mountain Lot Number                                   |
+| 산소량                 | OXYQTY     | Oxygen Quantity                                       |
+| 산업군                 | INDGRP     | Industry Group                                        |
+| 산정식                 | CCTFM      | Calculating Formula                                   |
+| 산출물                 | OTPTS      | Outputs                                               |
+| 산출식                 | CFML       | Calculating Formula                                   |
+| 산화성                 | OXDZ       | Oxidizing                                             |
+| 살포자                 | SEDER      | Seeder                                                |
+| 살포지                 | SPRPLC     | Spray Place                                           |
+| 상담원                 | CNSLR      | Counselor                                             |
+| 상담자                 |            |                                                       |
+| 상대방                 | CNTPT      | Counterpart                                           |
+| 상반기                 | FRHFYR     | First Half Of The Year                                |
+| 상소인                 | APLNT      | Appellant                                             |
+| 상속인                 | IHTR       | Inheritor                                             |
+| 상수도                 | WTSPL      | Water Supply                                          |
+| 상수원                 | WTSRC      | Water Source                                          |
+| 상여금                 | BONUS      | Bonus                                                 |
+| 상주종                 | RSSPCS     | Residing Species                                      |
+| 상품권                 | GFTCD      | Gift Card                                             |
+| 상호명                 |            |                                                       |
+| 생물군                 | BIOTA      | Biota                                                 |
+| 생물량                 | CRTQTY     | Creature Quantity                                     |
+| 생산량                 | OUTTRN     | Outturn                                               |
+| 생산자                 | PRDCR      | Producer                                              |
+| 생산지                 | PRDLC      | Production Location                                   |
+| 생산품                 | PRDT       | Product                                               |
+| 생성자                 | CREATR     | Creator                                               |
+| 생장형                 | GRWFM      | Growth Form                                           |
+| 생태계                 | ESSTM      | Ecosystem                                             |
+| 생활관                 | DTUNIT     | Dormitory Unit                                        |
+| 서명자                 | SIGR       | A Signer                                              |
+| 서비스                 | SRVC       | Service                                               |
+| 서술형                 | DPTV       | Descriptive                                           |
+| 서식지                 | HBTAT      | Habitat                                               |
+| 서약서                 | WROT       | Written Oath                                          |
+| 서한문                 | EPST       | Epistle                                               |
+| 선급금                 | PRPAMT     | Prepayments Amount                                    |
+| 선다형                 | MTPC       | Multiple-Choice                                       |
+| 선수금                 | ADPYR      | Advance Payment Received                              |
+| 선순위                 | PRORD      | Prior Order                                           |
+| 선적항                 | POL        | Port Of Loading                                       |
+| 선정자                 | CHCR       | Choice Person                                         |
+| 선지급                 | ADPY       | Advance Payment                                       |
+| 선호도                 | DPRFRC     | Degree Of Preferance                                  |
+| 설계자                 | DSGNR      | Designer                                              |
+| 설명서                 |            |                                                       |
+| 설명회                 | BRFN       | Briefing                                              |
+| 설문자                 | SRVYR      | Survey Person                                         |
+| 설문지                 | SRVPP      | Survey Paper                                          |
+| 설치자                 | INSTLR     | Installer                                             |
+| 성과물                 | OUTCM      | Outcome                                               |
+| 성수기                 | PKSN       | Peak Season                                           |
+| 성적서                 | SCRPT      | Score Report                                          |
+| 세대원                 | FMBR       | Family Members                                        |
+| 세대주                 | HSHLDR     | Householder                                           |
+| 세무서                 | TXOFC      | Tax Office                                            |
+| 세분류                 | DCLSF      | Detailed Classification                               |
+| 세수입                 | TXRVN      | Tax Revenue                                           |
+| 세척수                 | WSHWTR     | Wash Water                                            |
+| 소각량                 | INCQTY     | Incineration Quantity                                 |
+| 소각로                 | INCNRT     | Incinerator                                           |
+| 소각열                 | INCH       | Incineration Heat                                     |
+| 소각재                 | INCRSH     | Incineration Ash                                      |
+| 소권역                 | SSIRB      | Small Sphere Of Influence In A River Basin            |
+| 소규모                 | SMSCL      | Small Scale                                           |
+| 소독제                 | DSINF      | Disinfectant                                          |
+| 소득세                 | INCTX      | Income Tax                                            |
+| 소득자                 | INERN      | Income Earner                                         |
+| 소모품                 | CSGD       | Consumable Goods                                      |
+| 소방서                 | FRSTN      | Fire Station                                          |
+| 소분류                 | SCLSF      | Small-Scale Classification                            |
+| 소블록                 | SBLK       | Small Block                                           |
+| 소비량                 | CNSQTY     | Consumption Quantity                                  |
+| 소비자                 | CNSMR      | Consumer                                              |
+| 소송인                 | LTGNT      | Litigant                                              |
+| 소수력                 | SMH        | Small Hydro                                           |
+| 소수점                 | DCPT       | Decimal Point                                         |
+| 소유권                 | OWNSHP     | Ownership                                             |
+| 소유역                 | SBBSN      | Sub Basin                                             |
+| 소유인                 |            |                                                       |
+| 소유자                 | OWNR       | Owner                                                 |
+| 소유주                 |            |                                                       |
+| 소장품                 | CLCN       | Collection                                            |
+| 소재지                 | LCTN       | Location                                              |
+| 소제기                 | FLGLW      | Filing A Lawsuit                                      |
+| 소하천                 | SMLRVR     | Small River                                           |
+| 송달지                 | DLPL       | Delivery Place                                        |
+| 송수관                 | WPP        | Water Pipe                                            |
+| 송수신                 | TRRC       | Transmit And Receive                                  |
+| 송신자                 |            |                                                       |
+| 쇼핑몰                 | SOPMAL     | Shopping Mall                                         |
+| 수거식                 | TASYS      | Take Away System                                      |
+| 수검자                 | EXAMNE     | Examinee                                              |
+| 수계별                 | BWTST      | By Water System                                       |
+| 수급자                 | RECPNT     | Recipient                                             |
+| 수납인                 |            |                                                       |
+| 수납자                 | RCPN       | Recipient                                             |
+| 수령자                 | RCPNT      | Recipient                                             |
+| 수령지                 | RCPL       | Receipt Place                                         |
+| 수료자                 | CMPCSR     | Completer                                             |
+| 수료장                 |            |                                                       |
+| 수료증                 | DPLM       | Diploma                                               |
+| 수목원                 | ARBRT      | Arboretum                                             |
+| 수상자                 | AWRDR      | Awardee                                               |
+| 수상작                 | AWRT       | Award Art                                             |
+| 수생태                 | AE         | Aquatic Ecology                                       |
+| 수수료                 | FEE        | Fee                                                   |
+| 수신인                 |            |                                                       |
+| 수신자                 | RCVR       | Receiver                                              |
+| 수신처                 | RCOFC      | Receiving Office                                      |
+| 수업료                 | TTFE       | Tuition Fee                                           |
+| 수요일                 | WED        | Wednesday                                             |
+| 수용가                 | RCPTR      | Receptor                                              |
+| 수위계                 | WTGG       | A Water Gauge                                         |
+| 수위표                 | WLTBL      | Water Level Table                                     |
+| 수익률                 | ERNRT      | Earnings Rate                                         |
+| 수익자                 | BNFR       | Benefiter                                             |
+| 수입국                 | ICNTRY     | Importing Country                                     |
+| 수입량                 | IMPQTY     | Import Quantity                                       |
+| 수입자                 | INCMR      | Income Person                                         |
+| 수입항                 | POE        | Port Of Entry                                         |
+| 수자원                 | WTRSC      | Water Resource                                        |
+| 수작업                 | HNWK       | Hand Work                                             |
+| 수정인                 |            |                                                       |
+| 수정자                 | MDFR       | Modifier                                              |
+| 수진자                 | MDEXME     | Medical Examinee                                      |
+| 수처리                 | WTRMT      | Water Treatment                                       |
+| 수출국                 | ECNTRY     | Exporting Country                                     |
+| 수출량                 | EXPQTY     | Export Quantity                                       |
+| 수출입                 | IMPEXP     | Imports And Exports                                   |
+| 수출자                 | EXPR       | Export Person                                         |
+| 수출항                 | EPRT       | Export Port                                           |
+| 수취인                 | ADDRSE     | Addressee                                             |
+| 수행사                 | EXCMP      | Execution Company                                     |
+| 수행자                 | PRFMR      | Performer                                             |
+| 수험자                 | EXMNE      | Examinee                                              |
+| 수혜자                 | BNFCR      | Beneficiary                                           |
+| 숙련도                 | SKLVL      | Skill Level                                           |
+| 순이익                 | NETPF      | Net Profit                                            |
+| 순자산                 | NAST       | Net Assets                                            |
+| 순찰자                 | PTLR       | Patroller                                             |
+| 쉬는날                 |            |                                                       |
+| 스레드                 | THRED      | Thread                                                |
+| 스케줄                 |            |                                                       |
+| 스크랩                 | SCRP       | Scrap                                                 |
+| 스키마                 | SCHM       | Schema                                                |
+| 슬러지                 | SLUDGE     | Sludge                                                |
+| 승강기                 | ELVTR      | Elevator                                              |
+| 승용차                 | PCAR       | (Passenger) Car                                       |
+| 승인자                 | AUTZR      | Authorizer                                            |
+| 승하차                 | GNGF       | Get On Or Get Off                                     |
+| 승합차                 | VAN        | (Passenger) Van                                       |
+| 시가지                 | CTYD       | City District                                         |
+| 시가화                 | UBNZTN     | Urbanization                                          |
+| 시간당                 | PRHR       | Per Hour                                              |
+| 시간대                 | TMZON      | Time Zone                                             |
+| 시간별                 | BHR        | By Hour                                               |
+| 시간외                 | OVTM       | Overtime                                              |
+| 시공자                 | BLDR       | Builder                                               |
+| 시군구                 | SGG        | Si/Gun/Gu                                             |
+| 시료량                 | SPCQTY     | Specimen Quantity                                     |
+| 시멘트                 | CEMT       | Cement                                                |
+| 시설물                 | FCLTY      | Facility                                              |
+| 시설별                 | BFCLTY     | By Facility                                           |
+| 시스템                 | SYS        | System                                                |
+| 시운전                 | TSTRN      | Test Run                                              |
+| 시퀀스                 |            |                                                       |
+| 시행자                 | DVLR       | Developer                                             |
+| 식물상                 | FLORA      | Flora                                                 |
+| 식별자                 | UID        | Unique Identifier                                     |
+| 신고량                 | DCLQTY     | Declared Quantity                                     |
+| 신고서                 | RPDCD      | Report Or Declare Document                            |
+| 신고인                 |            |                                                       |
+| 신고자                 | DCL        | Declarer                                              |
+| 신기술                 | NTCH       | New Technology                                        |
+| 신뢰도                 | CRRL       | Credibility Reliability                               |
+| 신뢰성                 | RLBL       | Reliability                                           |
+| 신용장                 | LC         | Letter Of Credit                                      |
+| 신인도                 | RCGDGR     | Recognition Degree                                    |
+| 신재생                 | NRNW       | New And Renewable                                     |
+| 신적설                 | FSNCVR     | Fresh Snow Cover                                      |
+| 신증설                 | NBXB       | New Build Up And Extension Build Up                   |
+| 신청량                 | APLQTY     | Applied Quantity                                      |
+| 신청서                 | APFR       | Application Form                                      |
+| 신청인                 |            |                                                       |
+| 신청자                 | APLCNT     | Applicant                                             |
+| 신호등                 | SGNLG      | Signal Light                                          |
+| 실린더                 |            |                                                       |
+| 실무자                 | HWKR       | Hands-On Worker                                       |
+| 실수령                 | RLRC       | Real Receipt                                          |
+| 실시간                 | RLTM       | Realtime                                              |
+| 실업률                 | UMRT       | Unemployment Rate                                     |
+| 실적량                 | PFMQTY     | Performance Quantity                                  |
+| 실지급                 | ACTPY      | Actual Payment                                        |
+| 실행자                 | OPERTR     | Operator                                              |
+| 실험실                 | LAB        | Laboratory                                            |
+| 실효성                 | EFTNS      | Effectiveness                                         |
+| 심사자                 | JDG        | Judge                                                 |
+| 심층수                 | DPWT       | Deep Water                                            |
+| 썸네일                 | THMB       | Thumbnail                                             |
+| 아이디                 | ID         | ID                                                    |
+| 아이콘                 | ICON       | Icon                                                  |
+| 아이템                 |            |                                                       |
+| 아이피                 |            |                                                       |
+| 아이핀                 | IPN        | IPIN                                                  |
+| 아파트                 | APT        | Apartment                                             |
+| 아황산                 | SLFAC      | Sulfurous Acid                                        |
+| 안내문                 | GDNTC      | Guidance Notice                                       |
+| 안내소                 | INFDSK     | Information Desk                                      |
+| 안전모                 | SFHM       | Safety Helmet                                         |
+| 안전성                 | SFT        | Safety                                                |
+| 안정화                 | STBZN      | Stabilization                                         |
+| 알림창                 | NTWIN      | Notice Window                                         |
+| 암호화                 | ENCPT      | Encryption                                            |
+| 앙상블                 | ESBL       | Ensemble                                              |
+| 앞자리                 | FRDGT      | Front Digit                                           |
+| 액면가                 | FVAL       | Face Value                                            |
+| 액비화                 | LIQFZR     | Liquefaction for Fertilizer                           |
+| 액세스                 |            |                                                       |
+| 양도량                 | TRSQTY     | Transferred Quantity                                  |
+| 양도인                 | TRSFR      | Transferor                                            |
+| 양도자                 | HNOVR      | Hand Over Person                                      |
+| 양서류                 | AMPHBN     | Amphibian                                             |
+| 양성화                 | LGLZTN     | Legalization                                          |
+| 양수량                 | RCVQTY     | Received Quantity                                     |
+| 양수인                 | GRNE       | Grantee                                               |
+| 양수자                 |            |                                                       |
+| 양수장                 | PMPSTN     | Pumping Station                                       |
+| 양식장                 | NRSFM      | Nursery Farm                                          |
+| 양어장                 | FSHFM      | Fishing Farm                                          |
+| 어린이                 | CHILD      | Child                                                 |
+| 언론사                 | PRESS      | Press                                                 |
+| 업로드                 | ULD        | Upload                                                |
+| 업무망                 | BNSNW      | Business Network                                      |
+| 에너지                 | ENGY       | Energy                                                |
+| 에디터                 |            |                                                       |
+| 엔터티                 | ENTTY      | Entity                                                |
+| 엠바고                 | EBRG       | Embargo                                               |
+| 여과지                 | FLTPR      | Filter Paper                                          |
+| 여수로                 | SPWAY      | Spillway                                              |
+| 역분개                 | RJRNL      | Reverse Journalizing                                  |
+| 역삼투                 | ROSMS      | Reverse Osmosis                                       |
+| 연구비                 | RSCO       | Research Cost                                         |
+| 연구소                 | RSINS      | Research Institute                                    |
+| 연구원                 | RSCR       | Researcher                                            |
+| 연도별                 | BYRG       | By Year Group                                         |
+| 연락처                 | CNPL       | Contact Place                                         |
+| 연령대                 | AGGR       | Age Group                                             |
+| 연령별                 | BAG        | By Age                                                |
+| 연료량                 | FLQTY      | Fuel Quantity                                         |
+| 연료화                 | FUELZ      | Fuelize                                               |
+| 연면적                 |            |                                                       |
+| 연체율                 | DLQRT      | Delinquent Rate                                       |
+| 연평균                 | ANAVG      | Annual Average                                        |
+| 연회비                 | ANFE       | Annual Fee                                            |
+| 열람자                 | RDR        | Reader                                                |
+| 엽록소                 | CLO        | Chiorophyll                                           |
+| 영문자                 |            |                                                       |
+| 영산강                 | YSRVR      | Yeongsan River                                        |
+| 영상실                 | THTR       | Theater                                               |
+| 영수증                 | RCET       | Receipt                                               |
+| 영양염                 | NTRNT      | Nutrient                                              |
+| 영업비                 | BIZEXP     | Business Expenses                                     |
+| 영업소                 | BIZOFC     | Business Office                                       |
+| 영업점                 | SLSBR      | Sales Branch                                          |
+| 예금자                 |            |                                                       |
+| 예금주                 | DPSTR      | Depositor                                             |
+| 예보관                 | FRCSTR     | Forecaster                                            |
+| 예상량                 | EXDQTY     | Expected Quantity                                     |
+| 예약자                 | BKR        | Booker                                                |
+| 예정지                 | PSITE      | Planned Site                                          |
+| 오른쪽                 |            |                                                       |
+| 오염원                 | PLTSRC     | Pollution Sources                                     |
+| 온나라                 | NNR        | Onnara                                                |
+| 온라인                 | ONLN       | Online                                                |
+| 외국어                 | FRLAN      | Foreign Language                                      |
+| 외국인                 | FRGNR      | Foreigner                                             |
+| 외래종                 | INSPCS     | Introduced Species                                    |
+| 외부망                 |            |                                                       |
+| 외수위                 | EZWTL      | External Water Level                                  |
+| 외필지                 | BYLT       | Bylot                                                 |
+| 요주의                 | ATNT       | Attention                                             |
+| 요청서                 | REQDOC     | Request Document                                      |
+| 요청인                 |            |                                                       |
+| 요청자                 | RQSTR      | Requester                                             |
+| 용수량                 | USWQTY     | Using Water Quantity                                  |
+| 용적률                 | FART       | Floor Area Ratio                                      |
+| 용천수                 | SPRWTR     | Spring Water                                          |
+| 용해도                 | SLBL       | Solubility                                            |
+| 우량계                 | RNGUG      | A Raingauge                                           |
+| 우선권                 | PRTY       | Priority                                              |
+| 우점도                 | DMNCD      | Dominance (Degree)                                    |
+| 우점종                 | DSPCS      | Dominant Species                                      |
+| 우체국                 | PSTOFC     | Post Office                                           |
+| 우편물                 | POSTM      | Postal Matter                                         |
+| 운동성                 | MOTILE     | Motile                                                |
+| 운반량                 | CRDQTY     | Carried Quantity                                      |
+| 운반업                 | TRBIZ      | Transportation Business                               |
+| 운반자                 | TRSPR      | Transposer                                            |
+| 운반증                 | TRNLCS     | Transport License                                     |
+| 운송비                 | LGCO       | Logistics Cost                                        |
+| 운송장                 | WYBL       | Waybill                                               |
+| 운영자                 | SYSOP      | System Operator                                       |
+| 운전자                 | DRVR       | Driver                                                |
+| 원거래                 | ORGDL      | Original Deal                                         |
+| 원동기                 | MTR        | Motor                                                 |
+| 원리금                 | PNI        | Principal And Interest                                |
+| 원산지                 | PLOR       | The Place Of Origin                                   |
+| 원승인                 | ORGAPR     | Original Approval                                     |
+| 원인자                 | ORGPR      | The Origin Person                                     |
+| 원재료                 | RAWM       | Raw Materials                                         |
+| 원파일                 | ORGNFL     | Original File                                         |
+| 월류언                 | OVFLWE     | Overflow Weir                                         |
+| 월요일                 | MON        | Monday                                                |
+| 월평균                 | MAVG       | Month Average                                         |
+| 위약금                 | PNLT       | Penalty                                               |
+| 위원장                 | CHRPR      | Chairperson                                           |
+| 위원회                 | CMT        | Committee                                             |
+| 위치도                 | LOCMP      | Location Map                                          |
+| 위탁금                 | TRMNY      | Trust Money                                           |
+| 위탁자                 | CSNR       | Consignor                                             |
+| 위험물                 | DGROB      | A Dangerous Object                                    |
+| 위험성                 | RSKNS      | Riskiness                                             |
+| 유기인                 | OGPS       | Organic Phosphorus                                    |
+| 유량계                 | FMT        | Flowmeter                                             |
+| 유류비                 | FLCO       | Fuel Cost                                             |
+| 유사량                 | SMTDC      | Sediment Discharge                                    |
+| 유수성                 | EPTMC      | Eupotamic                                             |
+| 유수식                 | RUNWTR     | Running Water                                         |
+| 유원지                 | AMMP       | Amusement Park                                        |
+| 유입구                 | INLET      | Inlet                                                 |
+| 유입량                 | INFLR      | Inflow Rate                                           |
+| 유입원                 | INFCAU     | Inflow Cause                                          |
+| 유전자                 | GENE       | Gene                                                  |
+| 유지비                 | MNTFE      | Maintenance Fee                                       |
+| 유출량                 | OTDRG      | Outflow Discharge                                     |
+| 유출부                 | EFXCTN     | Efflux Section                                        |
+| 유형별                 | BTYPE      | By Type                                               |
+| 유효성                 | VLDTY      | Validity                                              |
+| 육식성                 | CRNVRS     | Carnivorous                                           |
+| 음식물                 | FDNK       | Food And Drink                                        |
+| 읍면동                 | EMD        | Eup/Myun/Dong                                         |
+| 응답자                 | RSPDNT     | Respondent                                            |
+| 의견서                 | WROPN      | Written Opinion                                       |
+| 의견자                 | OPNR       | Opinion Person                                        |
+| 의뢰인                 | RQSR       | Requestor                                             |
+| 의뢰자                 |            |                                                       |
+| 의료비                 | MDEXP      | Medical Expenses                                      |
+| 의료인                 | HCWKR      | Healthcare Worker                                     |
+| 의무자                 | OBLGR      | Obligator                                             |
+| 이동량                 | MVDQTY     | Moved Quantity                                        |
+| 이동식                 | RVGN       | Rovingness                                            |
+| 이륜차                 | BIKE       | Bike                                                  |
+| 이메일                 | EML        | Email                                                 |
+| 이물질                 | ALSBTN     | Alien Substance                                       |
+| 이미지                 | IMG        | Image                                                 |
+| 이벤트                 | SEVNT      | System Event                                          |
+| 이상치                 | OUTLR      | Outliers                                              |
+| 이송량                 | TRQTY      | Transfer Quantity                                     |
+| 이슬점                 | DWPNT      | Dewpoint                                              |
+| 이용량                 | UTQTY      | Utilization Quantity                                  |
+| 이재민                 | DSVCTM     | Disaster Victims                                      |
+| 이중화                 | DPLX       | Duplexing                                             |
+| 인건비                 | LBRCO      | Labor Cost                                            |
+| 인계서                 | HDOVDC     | Handover Document                                     |
+| 인계자                 | HVPRSN     | Handover Person                                       |
+| 인사말                 | GRTG       | Greeting                                              |
+| 인상률                 | INCRT      | Increase Rate                                         |
+| 인솔자                 | LDR        | Leader                                                |
+| 인쇄비                 | PRNTC      | Printing Cost                                         |
+| 인수인                 |            |                                                       |
+| 인수자                 | ACPTR      | Acceptor                                              |
+| 인원수                 | NOPE       | The Number Of Persons                                 |
+| 인정량                 | RCGQTY     | Recognized Quantity                                   |
+| 인증량                 | CRFQTY     | Certification Quantity                                |
+| 인증서                 | CRTF       | Certificate                                           |
+| 인지세                 | STMTX      | Stamp Tax                                             |
+| 인터넷                 | ITNT       | Internet                                              |
+| 인허가                 | LCPMT      | Licenses And Permits                                  |
+| 인화성                 | FLMABT     | Flammability                                          |
+| 인화점                 | FSPN       | Fiashing Point                                        |
+| 일기도                 | WTHCT      | Weather Chart                                         |
+| 일사량                 | SRQTY      | Solar Radiation Quantity                              |
+| 일시금                 | LSMPY      | A Lump Sum Payment                                    |
+| 일시적                 | MMTR       | Momentary                                             |
+| 일요일                 | SUN        | Sunday                                                |
+| 일조량                 | ASNSH      | Amount Of Sunshine                                    |
+| 일치성                 | CNFMTY     | Conformity                                            |
+| 일평균                 | DYRG       | Day Average                                           |
+| 임대료                 | RTFE       | Rental Fee                                            |
+| 임대인                 | LSR        | Lessor                                                |
+| 임진강                 | IJRV       | Imjin River                                           |
+| 임차료                 | LSFE       | Lease Fee                                             |
+| 임차인                 | HIRER      | Hirer                                                 |
+| 입고량                 | WHSQTY     | Warehousing Quantity                                  |
+| 입고자                 | WRHSGR     | Warehousing Person                                    |
+| 입금자                 | PYR        | Payer                                                 |
+| 입력자                 | KBRDR      | Keyboarder                                            |
+| 입주자                 | OCPNT      | Occupant                                              |
+| 입찰자                 | BDDER      | Bidder                                                |
+| 입출고                 | PIPO       | Put-In, Put-Out                                       |
+| 입학금                 | ADMFE      | Admission Fee                                         |
+| 입회자                 | OBSRVR     | Observer                                              |
+| 잉여금                 | SRAMT      | Surplus Amount                                        |
+| 자격증                 | CRTFCT     | Certificate                                           |
+| 자국어                 | OLANG      | One'S Own Language                                    |
+| 자동차                 | CAR        | Car                                                   |
+| 자동화                 | ATMTN      | Automation                                            |
+| 자료실                 | RPSTR      | Repository                                            |
+| 자릿수                 | DGT        | Digit                                                 |
+| 자발적                 | VLNTR      | Voluntary                                             |
+| 자본금                 | CPTL       | Capital                                               |
+| 자부담                 | PHW        | Pay His Way                                           |
+| 자연성                 | NTRLTY     | Naturality                                            |
+| 자주식                 | SFPRPL     | Self-Propelled                                        |
+| 작성자                 | WRTR       | Writer                                                |
+| 작업자                 | OPRTR      | Operator                                              |
+| 잔반량                 | LTRQTY     | Leftover Quantity                                     |
+| 잔식량                 | UNFQTY     | Uneaten Food Quantity                                 |
+| 잔여량                 | RMNQTY     | Remainder                                             |
+| 잡식성                 | OMNVRT     | Omnivority                                            |
+| 잡종지                 | MCLNAR     | Miscellaneous Area                                    |
+| 장려금                 | SUBSD      | Subsidy                                               |
+| 장애인                 | PWDBS      | People With Disabilities                              |
+| 장차관                 | MAVM       | A Minister And Vice Minister                          |
+| 재개업                 | ROBIZ      | Reopening Of Business                                 |
+| 재검사                 | RTST       | Retest                                                |
+| 재검토                 | REVLT      | Re-Evaluation                                         |
+| 재계산                 | RECAL      | Recalculation                                         |
+| 재고량                 | INVQTY     | Inventory Quantity                                    |
+| 재공고                 | RANC       | Re-Announcement                                       |
+| 재교부                 | RISU       | Reissue                                               |
+| 재등록                 | RRG        | Re-Registration                                       |
+| 재료비                 | MTCO       | Material Cost                                         |
+| 재반입                 | RCRYN      | Re Carry In                                           |
+| 재발급                 | RISSU      | Reissuance                                            |
+| 재발송                 | RSND       | Resend                                                |
+| 재발행                 | RPBLC      | Republication                                         |
+| 재배부                 | RDTBN      | Redistribution                                        |
+| 재배종                 | CULTVR     | Cultivar                                              |
+| 재배지                 | CLTLND     | Cultivation Land                                      |
+| 재부착                 | RMNT       | Remount                                               |
+| 재사용                 | RUSE       | Reuse                                                 |
+| 재산세                 | PRPTX      | Property Tax                                          |
+| 재산정                 | RCTN       | Recomputation                                         |
+| 재설문                 | RSRVY      | Resurvey                                              |
+| 재설정                 | RSET       | Reset                                                 |
+| 재수신                 | RCAG       | Receiving Again                                       |
+| 재수행                 | REDO       | Redo                                                  |
+| 재승인                 | REAPR      | Reapproval                                            |
+| 재시도                 | RTRY       | Retry                                                 |
+| 재시험                 | REEXM      | Reexamination                                         |
+| 재신청                 | RQAG       | Request Again                                         |
+| 재심사                 | REXAM      | Reexamination                                         |
+| 재요청                 | RDMND      | Redemand                                              |
+| 재이용                 | RTLZTN     | Reutiliztion                                          |
+| 재입찰                 | REBID      | Rebid                                                 |
+| 재작성                 | REWRT      | Rewrite                                               |
+| 재전송                 | RTRSM      | Retransmission                                        |
+| 재제출                 | RSMN       | Resubmission                                          |
+| 재처리                 | RPRCS      | Reprocess                                             |
+| 재판부                 | JSDP       | Justice Department                                    |
+| 재평가                 | REVL       | Revaluation                                           |
+| 재할당                 | RSGN       | Reassignment                                          |
+| 재해자                 | DVCTM      | Disaster Victim                                       |
+| 재확인                 | RECFM      | Reconfirmation                                        |
+| 재활용                 | REUTIL     | Reutilization                                         |
+| 저감량                 | DCQTY      | Decrease Quantity                                     |
+| 저공해                 | LPOLU      | Low Pollution                                         |
+| 저배출                 | LESN       | Low Emission                                          |
+| 저서종                 | BTHSPC     | Benthic Species                                       |
+| 저수량                 | RSQTY      | Reservoir Quantity                                    |
+| 저수로                 | LWATCH     | Low Water Channel                                     |
+| 저수위                 | LWLV       | Low-Water Level                                       |
+| 저수지                 | RSRVR      | Reservoir                                             |
+| 저작권                 | CPRGT      | Copyright                                             |
+| 저작물                 | WRTS       | Writings                                              |
+| 저작자                 | AUTHR      | Author                                                |
+| 저장량                 | STRQTY     | Stored Quantity                                       |
+| 저장소                 | STRGP      | Storage Place                                         |
+| 저장조                 | REPO       | Repository                                            |
+| 적립금                 | RSEV       | Reserve                                               |
+| 적설량                 | SNWFL      | Snowfall                                              |
+| 적절성                 | APTNS      | Appropriateness                                       |
+| 전광판                 | ELTRD      | Electronic Display (Board)                            |
+| 전기료                 | ELCHG      | Electricity Charges                                   |
+| 전년도                 |            |                                                       |
+| 전도식                 | CDTNT      | Conduction Type                                       |
+| 전력량                 | ELCEG      | Electric Energy                                       |
+| 전문가                 | EXPRT      | Expert                                                |
+| 전문성                 | PFSNL      | Professionality                                       |
+| 전송자                 | TRSMR      | Transmitter                                           |
+| 전송처                 | TRSPL      | Transmission Place                                    |
+| 전처리                 | PRCSG      | Preprocessing                                         |
+| 전화국                 |            |                                                       |
+| 절감량                 | SVQTY      | Saving Quantity                                       |
+| 절차서                 | PROCD      | Procedure Document                                    |
+| 점검자                 | INSCTR     | Inspector                                             |
+| 점검표                 | CKLST      | Check List                                            |
+| 점유율                 | PCSHR      | Percentage Share                                      |
+| 접속자                 | ACSR       | Accessor                                              |
+| 접수인                 |            |                                                       |
+| 접수자                 | CLR        | Clerk                                                 |
+| 정규직                 | PMEMP      | Permanent Employee                                    |
+| 정밀도                 | PRCDGR     | Precision Degree                                      |
+| 정보화                 | INFMZ      | Informatization                                       |
+| 정수성                 | LNTIC      | Lentic                                                |
+| 정수장                 | FTTP       | A Filtration Plant                                    |
+| 정의서                 | DEFDOC     | Definition Document                                   |
+| 정착금                 | RSTFND     | Resettlement Funds                                    |
+| 정형화                 | PTNG       | Patterning                                            |
+| 정화조                 | SPCTNK     | Septic Tank                                           |
+| 정확도                 | ACCR       | Accuracy                                              |
+| 제개정                 | ENAM       | Enactment And Amendment                               |
+| 제경비                 | OVEXP      | Overhead Expenses                                     |
+| 제공자                 | OFFR       | Offerer                                               |
+| 제내지                 | PRLL       | Protected Lowland                                     |
+| 제방고                 | LVHGT      | Levee Height                                          |
+| 제보자                 | INFMT      | Informant                                             |
+| 제삼자                 |            |                                                       |
+| 제수당                 | SALW       | Sundry Allowances                                     |
+| 제안서                 | PRPSD      | Proposal Document                                     |
+| 제안자                 | PRPSR      | Proposer                                              |
+| 제어기                 | CTRLR      | Controller                                            |
+| 제외지                 | RVRSL      | River Side Land                                       |
+| 제작사                 | MNFCTR     | Manufacturer                                          |
+| 제작자                 | PDCR       | Producer                                              |
+| 제조물                 | PRODCT     | Product                                               |
+| 제조사                 | MKR        | Maker                                                 |
+| 제조업                 | MFBIZ      | Manufacturing Business                                |
+| 제출자                 | PRSNR      | Presenter                                             |
+| 제출처                 | SMPL       | Submission Place                                      |
+| 제품군                 | PDGP       | Product Group                                         |
+| 조건부                 | CNDL       | Conditional                                           |
+| 조달청                 | PPS        | Public Procuerment Service                            |
+| 조사서                 | INVD       | Investigation Ducument                                |
+| 조사원                 |            |                                                       |
+| 조사자                 | EXMNR      | Examiner                                              |
+| 조정량                 | ADJQTY     | Adjustment Quantity                                   |
+| 조직도                 | ORGCHT     | Organization Chart                                    |
+| 조치자                 | ACTPR      | Action Person                                         |
+| 조합원                 | MBRAS      | Member Of Association                                 |
+| 조회자                 | INQPR      | Inquiry Person                                        |
+| 종량제                 | MRST       | The Meter-Rate System                                 |
+| 종사자                 | PRCTR      | Practicioner                                          |
+| 종업원                 |            |                                                       |
+| 좋아요                 | LIKES      | Likes                                                 |
+| 좋은물                 | WSWTR      | Wholesome Water                                       |
+| 좌표계                 | CDSSTM     | Coordinate System                                     |
+| 주관식                 | SBJV       | Subjective                                            |
+| 주문자                 | ORDRR      | Orderer                                               |
+| 주민세                 | RSDTX      | Resident Tax                                          |
+| 주부속                 | MANX       | Main Annex                                            |
+| 주소록                 | ADBK       | Address Book                                          |
+| 주유소                 | GSTN       | Gas Station                                           |
+| 주의보                 | WTC        | Watch                                                 |
+| 주입량                 | INJQTY     | Injected Quantity                                     |
+| 주저자                 | PRAUT      | Primary Author                                        |
+| 주제도                 | THEME      | Thematic Map                                          |
+| 주차장                 | PKLT       | Parking Lot                                           |
+| 준비물                 | SPPLS      | Supplies                                              |
+| 중간종                 | ITRMDM     | Intermedium                                           |
+| 중권역                 | MSIRB      | Middle Sphere Of Influence In A River Basin           |
+| 중도금                 | ITRPY      | Interim Payment                                       |
+| 중분류                 | MCLSF      | Medium-Scale Classification                           |
+| 중블록                 | MBLK       | Middle Block                                          |
+| 중상자                 | SRIPR      | Seriously Injured Person                              |
+| 중수도                 | RUSWTR     | Reusing Water                                         |
+| 중요도                 | IMPDG      | Important Degree                                      |
+| 중장비                 | HVEQP      | Heavy Equipment                                       |
+| 중하층                 | LMCL       | Lower Middle Classes                                  |
+| 증가율                 | GRWRT      | Growth Rate                                           |
+| 증기압                 | STPS       | Steam Pressure                                        |
+| 증명서                 | PRDOC      | Proof Documentation                                   |
+| 증발량                 | EVAMT      | Evaporation Amount                                    |
+| 지급인                 | PAYR       | Payer                                                 |
+| 지급자                 |            |                                                       |
+| 지급처                 | PMPL       | Payment Place                                         |
+| 지방비                 | LCEP       | Local Expense                                         |
+| 지방세                 | LCLTX      | Local Tax                                             |
+| 지방채                 | MCPBND     | Municipal Bond                                        |
+| 지방청                 | LGVOFC     | Local Government Office                               |
+| 지분율                 | SHRT       | Share Ratio                                           |
+| 지수식                 | WTRBLK     | Water Block                                           |
+| 지역별                 | BRGN       | By Region                                             |
+| 지은이                 |            |                                                       |
+| 지자체                 |            |                                                       |
+| 지적부                 |            |                                                       |
+| 지정자                 | ASNR       | Assigner                                              |
+| 지표면                 | LNDSF      | Land Surface                                          |
+| 지표수                 | SRFWTR     | Surface Water                                         |
+| 지하수                 | UGWTR      | Underground Water                                     |
+| 직접비                 | DRCO       | Direct Cost                                           |
+| 직접세                 | DRTX       | direct tax                                            |
+| 진입로                 | ACCRD      | Access Road                                           |
+| 진행률                 | PRGRT      | Progress Rate                                         |
+| 질문자                 | QSTNR      | Questioner                                            |
+| 질의자                 |            |                                                       |
+| 집약도                 | INTSDG     | Intensive Degree                                      |
+| 징수관                 | CLTOR      | Collector                                             |
+| 차감량                 | SBDQTY     | Subtracted Quantity                                   |
+| 차상위                 | SHGHRK     | The Second Highest Rank                               |
+| 차수벽                 | SDMBN      | Shielding Membrane                                    |
+| 참가비                 | ENTFE      | Entry Fee                                             |
+| 참가자                 | PRTPT      | Participant                                           |
+| 참석자                 | ATD        | Attendee                                              |
+| 참여율                 | PTRT       | Participation Rate                                    |
+| 참여자                 | PRTPNT     | Participant                                           |
+| 참조자                 | RFPR       | Reference Person                                      |
+| 창업자                 | FNDR       | Founder                                               |
+| 채권자                 | CRDTR      | Creditor                                              |
+| 채무자                 | DBTR       | Debtor                                                |
+| 채수구                 | WTRLT      | Water Inlet                                           |
+| 채수병                 | WSBT       | Water Sample Bottle                                   |
+| 채집자                 | CLTNR      | Collecter                                             |
+| 채집지                 | CLTNG      | Collect Ground                                        |
+| 채취량                 | CLTQTY     | Collected Quantity                                    |
+| 채취자                 | CLCTOR     | Collector                                             |
+| 책임자                 | RBPRSN     | Responsible Person                                    |
+| 처리량                 | PRCQTY     | Processing Quantity                                   |
+| 처리율                 | PRSRT      | Processing Rate                                       |
+| 처리인                 |            |                                                       |
+| 처리자                 | PRCR       | Processor                                             |
+| 처리장                 | TMPLNT     | Treatment Plant                                       |
+| 첨가제                 | ADTV       | Additive                                              |
+| 청구인                 | CLMT       | Claimant                                              |
+| 청구자                 |            |                                                       |
+| 청구지                 | BLADR      | Billing Address                                       |
+| 체납자                 | DFLTR      | Defaulter                                             |
+| 초기화                 | INIT       | Initialization                                        |
+| 초식성                 | HRBVR      | Herbivory                                             |
+| 총가구                 | THSHD      | Total Household                                       |
+| 총개체                 | TNINDV     | TotalIndividual                                       |
+| 총거래                 | TDLNG      | Total Dealings                                        |
+| 총건수                 | TNOCS      | Total Number Of Cases                                 |
+| 총결제                 | TSTLM      | Total Settlement                                      |
+| 총계약                 | TCTRT      | Total Contract                                        |
+| 총공급                 | TSPLY      | Total Supply                                          |
+| 총공사                 | TCSTRN     | Total Construction                                    |
+| 총구매                 | TPRCH      | Total Purchase                                        |
+| 총군집                 | TNCMNT     | Total Communities                                     |
+| 총근무                 | TWRK       | Total Working                                         |
+| 총금액                 | GRAMT      | Gross Amount                                          |
+| 총급여                 | TSL        | Total Salary                                          |
+| 총길이                 | TLEN       | Total Length                                          |
+| 총납부                 | TPY        | Total Payment                                         |
+| 총대출                 | TLOAN      | Total Loan                                            |
+| 총매출                 | TSLS       | Total Sales                                           |
+| 총면적                 | GFA        | Gross Floor Area                                      |
+| 총명수                 |            |                                                       |
+| 총배당                 | TDVD       | Total Dividends                                       |
+| 총배정                 | TALTM      | Total Allotment                                       |
+| 총보유                 | THLD       | Total Holding                                         |
+| 총보증                 | TGRNT      | Total Guarantee                                       |
+| 총부채                 | TLBLT      | Total Liabilities                                     |
+| 총비용                 | TCO        | Total Cost                                            |
+| 총사용                 | TUSE       | Total Use                                             |
+| 총상환                 | TRPY       | Total Repayment                                       |
+| 총세포                 | TBCLL      | Total Biology Cell                                    |
+| 총소요                 | TREQ       | Total Requirement                                     |
+| 총수납                 | TPYRC      | Total Payments Received                               |
+| 총수입                 | TICM       | Total Income                                          |
+| 총승인                 | TAPRV      | Total Approval                                        |
+| 총시설                 | TFCLT      | Total Facilities                                      |
+| 총신청                 | TRQST      | Total Request                                         |
+| 총업소                 | TBZEST     | Total Business Establishments                         |
+| 총여신                 | TCRDT      | Total Credit                                          |
+| 총예산                 | TBGT       | Total Budget                                          |
+| 총이익                 | TPRF       | Total Profit                                          |
+| 총자산                 | TAST       | Total Assets                                          |
+| 총정원                 | TCPC       | Total Capacity                                        |
+| 총조회                 | TINQ       | Total Inquiry                                         |
+| 총주차                 | TPKCT      | Total Parking Capacity                                |
+| 총주행                 | TDRVG      | Total Driving                                         |
+| 총중량                 | TWGHT      | Total Weight                                          |
+| 총지급                 | TPMT       | Total Payment                                         |
+| 총지출                 | TEXPND     | Total Expenditure                                     |
+| 총차입                 | TBRW       | Total Borrowings                                      |
+| 총채권                 | TRCVB      | Total Receivables                                     |
+| 총채무                 | TDBT       | Total Debt                                            |
+| 총처리                 | TPRCS      | Total Processing                                      |
+| 총청구                 | TCLM       | Total Claims                                          |
+| 총투자                 | TIVST      | Total Investment                                      |
+| 총평가                 | TEVL       | Total Evaluation                                      |
+| 총품목                 | TITEM      | Total Items                                           |
+| 총환수                 | TRDM       | Total Redemption                                      |
+| 총회수                 | TRTRVL     | Total Retrieval                                       |
+| 최고가                 | HGPRC      | The Highest Price                                     |
+| 최상위                 | HGHRK      | The Highest Rank                                      |
+| 최저가                 | LWPRC      | The Lowest Price                                      |
+| 최하위                 | LWTRK      | The Lowest Rank                                       |
+| 추천인                 | RCMDR      | Recommender                                           |
+| 추천자                 |            |                                                       |
+| 출고량                 | OBDQTY     | Outbound Quantity                                     |
+| 출력량                 | OTPPW      | Output Power                                          |
+| 출력물                 | PRNOT      | Printout                                              |
+| 출발지                 | DPPL       | Departure Place                                       |
+| 출원인                 | APLT       | Applicant                                             |
+| 출입구                 | GATE       | Gate                                                  |
+| 출입증                 | ADPS       | Admission Pass                                        |
+| 출장비                 | BTEXP      | Business Trip Expenses                                |
+| 출장소                 | LCOFC      | Local Office                                          |
+| 출장자                 | BZTRVR     | Business Traveler                                     |
+| 출장지                 | BTDST      | Business Trip Destination                             |
+| 출제자                 | STXQR      | Setting Exam Questions Person                         |
+| 출판사                 | PBLCO      | Publishing Company                                    |
+| 충당금                 | APAMT      | Appropriation Amount                                  |
+| 충식성                 | INSCTS     | Insectivorous                                         |
+| 충전소                 | CHRS       | Charging Station                                      |
+| 취급량                 | HDLQTY     | Handling Quantity                                     |
+| 취급자                 | HDLR       | Handler                                               |
+| 취소자                 | CNCLR      | Canceler                                              |
+| 취수량                 | WITQTY     | Water-Intake Quantity                                 |
+| 취수원                 | SWSP       | Resource of Water Supply                              |
+| 취수장                 | ITKPL      | Intake Plant                                          |
+| 취업자                 | EMPR       | Employed Person                                       |
+| 측정기                 | MSINST     | Measuring Instrument                                  |
+| 측정량                 | MSQTY      | Measured Quantity                                     |
+| 측정망                 | MNTNW      | Monitoring Network                                    |
+| 측정소                 | MSRSTN     | Measuring Station                                     |
+| 측정자                 | MSRPSN     | Measurement Person                                    |
+| 친환경                 | ECFRD      | Eco-Friendly                                          |
+| 침사지                 | GRCHMB     | Grit Chamber                                          |
+| 침전수                 | PRPW       | Precipitation-Water                                   |
+| 침출수                 | EFNT       | Effluent                                              |
+| 침투수                 | PCLTWT     | Percolating Water                                     |
+| 카드뮴                 | CDMM       | Cadmium                                               |
+| 캐노피                 | CNPY       | Canopy                                                |
+| 캠페인                 | CMPGN      | Campaign                                              |
+| 컨버터                 | CNVRTR     | Converter                                             |
+| 컨설팅                 | CNSLT      | Consulting                                            |
+| 컨텐츠                 |            |                                                       |
+| 컬러맵                 | CRMP       | Colormap                                              |
+| 컴퓨터                 | PC         | Personal Computer                                     |
+| 콘텐츠                 | CONTS      | Contents                                              |
+| 콜센터                 | CLLR       | Call Center                                           |
+| 쿼터량                 | QTAQTY     | Quota Quantity                                        |
+| 크롤링                 | CRWLG      | Crawling                                              |
+| 키워드                 | KYWD       | Keyword                                               |
+| 타기관                 | OINST      | Other Institution                                     |
+| 타당성                 | WSDM       | Wisdom                                                |
+| 타원체                 | ELPSD      | Ellipsoid                                             |
+| 탈수기                 | DEHYM      | Dehydration Machine                                   |
+| 탈퇴자                 | SCDR       | Seceder                                               |
+| 탐지기                 | DTOR       | Detector                                              |
+| 탑승자                 | PSGR       | Passenger                                             |
+| 태양광                 | SLRLG      | Solar Light                                           |
+| 태양열                 | SLREG      | Solar Energy                                          |
+| 테스트                 |            |                                                       |
+| 테이블                 | TBL        | Table                                                 |
+| 텍스트                 | TXT        | Text                                                  |
+| 템플릿                 |            |                                                       |
+| 토요일                 | SAT        | Saturday                                              |
+| 토지계                 | LNDCRL     | Land Circles                                          |
+| 토출관                 | DELP       | Delivery Pipe                                         |
+| 통계청                 | NSO        | National Statistical Office                           |
+| 통보서                 | NTFCTD     | Notification Document                                 |
+| 통보자                 | ANCR       | Announcer                                             |
+| 통신사                 | TLCMCO     | Telecommunication Company                             |
+| 통신실                 | OPRRM      | An Operating Room                                     |
+| 통제소                 | CNRPT      | Control Post                                          |
+| 통지서                 | WRNTC      | Written Notice                                        |
+| 통행량                 | TRFVLM     | Traffic Volume                                        |
+| 통화자                 | CALR       | Caller                                                |
+| 퇴비화                 | CMPSTG     | Composting                                            |
+| 퇴적물                 | SDM        | Sediment                                              |
+| 특별세                 | SPTX       | Special Tax                                           |
+| 특수지                 | SPAREA     | Special Area                                          |
+| 파충류                 | RPTL       | Reptile                                               |
+| 판결문                 | RLNG       | Ruling                                                |
+| 판매량                 | SLQTY      | Sales Quantity                                        |
+| 판매자                 | SLR        | Seller                                                |
+| 판매처                 | SLPL       | Sales Place                                           |
+| 팝업창                 |            |                                                       |
+| 패키지                 | PKG        | Package                                               |
+| 팽창률                 | EXPSRT     | Expansion Rate                                        |
+| 펌웨어                 | FW         | Firmware                                              |
+| 펌프장                 | PUMPST     | Pump Station                                          |
+| 페이지                 |            |                                                       |
+| 편집기                 | EDTR       | Editor                                                |
+| 평가군                 | EVLGRP     | Evaluation Group                                      |
+| 평가자                 | EVLTR      | Evaluator                                             |
+| 평가표                 | EVLSHT     | Evaluation Sheet                                      |
+| 평균량                 | AVGQTY     | Average Quantity                                      |
+| 폐기물                 | WST        | Waste                                                 |
+| 폐사체                 | DBDY       | Dead Body                                             |
+| 폐쇄망                 | CLSDNW     | Closed Network                                        |
+| 포유류                 | MNM        | Manmal                                                |
+| 포장재                 | PACKNG     | Packing                                               |
+| 포지션                 |            |                                                       |
+| 폭발성                 | EXPSV      | Explosiveness                                         |
+| 표류수                 | SFCWT      | Surface Water                                         |
+| 표준화                 | STDZ       | Standardize                                           |
+| 품목량                 | ITMQTY     | Item Quantity                                         |
+| 풍부도                 | ABDNC      | Abundance                                             |
+| 풍속계                 | ANMTR      | Anemometer                                            |
+| 풍향도                 | WDDRM      | Wind Direction Diagram                                |
+| 프레임                 | FRAME      | Frame                                                 |
+| 프로필                 | PRFL       | Profile                                               |
+| 플랫폼                 | PLTFM      | Platform                                              |
+| 피의자                 | SSPCT      | Suspect                                               |
+| 피해량                 | DAMQTY     | Damaged Quantity                                      |
+| 피해자                 | VCTM       | Victim                                                |
+| 하도급                 | SBCTR      | Subcontract                                           |
+| 하반기                 | SHYR       | Second Half Of The Year                               |
+| 하수도                 | SEWER      | Sewer                                                 |
+| 하수량                 | SWQTY      | Sewage Quantity                                       |
+| 하역항                 | PULDG      | Port Of Unloading                                     |
+| 하천수                 | RWTR       | River Water                                           |
+| 학술지                 | ACJRNL     | Academic Journal                                      |
+| 학습자                 | LRNR       | Learning Person (Learner)                             |
+| 한부모                 | SGPRN      | Single Parent                                         |
+| 할당량                 | QT         | Quota                                                 |
+| 할인율                 | DSCRT      | Discount Rate                                         |
+| 함수율                 | MOSRT      | Moisture Rate                                         |
+| 함유량                 | CTQTY      | Content Quantity                                      |
+| 합격자                 | PASSR      | Passed Person(Successful Candidate)                   |
+| 합류식                 | CBSYS      | Combined Sewer System                                 |
+| 합류점                 | CNFLN      | Confluence                                            |
+| 합리화                 | RTNZ       | Rationalization                                       |
+| 항공기                 | ARPLN      | Airplane                                              |
+| 항공사                 | ARLN       | Airline                                               |
+| 해상도                 | RSLU       | (Display) Resolution                                  |
+| 해수면                 |            |                                                       |
+| 해양수                 | OCWTRS     | Ocean Waters                                          |
+| 해조류                 | SWD        | Seaweed                                               |
+| 행정동                 | DONG       | Dong (Administrative District)                        |
+| 허가량                 | PRMQTY     | Permitted Quantity                                    |
+| 허가서                 | PERMD      | Permit Document                                       |
+| 허가증                 | PERMC      | Permission Certificate                                |
+| 허용량                 | ALWQTY     | Allowed Quantity                                      |
+| 현미경                 | MCPE       | Microscope                                            |
+| 현실화                 | RLZTN      | Realization                                           |
+| 혈액형                 | BLDTY      | Blood Type                                            |
+| 협의회                 | CUNCL      | Council                                               |
+| 협잡물                 | CTMN       | Contaminants                                          |
+| 협조자                 | HLPR       | Helper                                                |
+| 형태별                 | BSHP       | By Shape                                              |
+| 호소수                 | PNWTR      | Pond Water                                            |
+| 호스트                 | HOST       | (Facility) Host                                       |
+| 홍수기                 | FLDSN      | Flood Season                                          |
+| 홍수량                 | FLDSC      | Flood Discharge                                       |
+| 홍수위                 | FLDEL      | Flood Elevation                                       |
+| 화요일                 | TUE        | Tuesday                                               |
+| 확약서                 | DFPRD      | Definite Promise Document                             |
+| 확인서                 | CNFDOC     | Confirmation Document                                 |
+| 확인자                 | IDFR       | Identifier                                            |
+| 확장자                 | EXTN       | Extension                                             |
+| 확정자                 | DTMR       | Determiner                                            |
+| 환경부                 | MOE        | Ministry Of Environment                               |
+| 환경성                 | ENVL       | Environmental                                         |
+| 환경처                 | OMOE       | (Old) Ministry Of Environment                         |
+| 환경청                 | ENVO       | Environmental Office                                  |
+| 환산량                 | CNVQTY     | Converted Quantity                                    |
+| 환승역                 | TRFSTN     | Transfer Station                                      |
+| 활성화                 | VTLZ       | Vitalization                                          |
+| 회수량                 | RTVQTY     | Retrieved Quantity                                    |
+| 회신자                 | RPLYR      | Reply Person                                          |
+| 회원사                 | MBRCO      | Member Company                                        |
+| 회의실                 | CFRM       | Conference Room                                       |
+| 회전율                 | RTTRT      | Rotation Rate                                         |
+| 효율성                 | EFFCTV     | Effectiveness                                         |
+| 후처리                 | PSTC       | Post-Cleaning                                         |
+| 휘발성                 | VLATIL     | Volatility                                            |
+| 휴폐업                 | SCBIZ      | Suspension Or Closing Of Business                     |
+| 희귀종                 | RSPCS      | Rare Species                                          |
+| 가능면적               | PMSBAR     | Permissible Area                                      |
+| 가성소다               | NAOH       | Caustic Soda(NACH)                                    |
+| 가조시간               | PDOSN      | Possible Duration Of Sunshine                         |
+| 가중평균               | WGAVG      | Weighted Average                                      |
+| 가축분뇨               | LVEXTN     | Livestock Excretions                                  |
+| 간선시설               | ATLFCS     | Arterial Facilities                                   |
+| 감가상각               | DPRC       | Depreciation                                          |
+| 감시수량               | MTRWQT     | Monitoring Water Quantity                             |
+| 강수확률               | POR        | Probability Of Rainfall                               |
+| 개발면적               | DVLPAR     | Developed Area                                        |
+| 개인식별               | PRIDTF     | Personal Identification                               |
+| 개인정보               | PRVC       | Privacy                                               |
+| 객체면적               | OBJTAR     | Object Area                                           |
+| 거주면적               | HABAR      | Habitation Area                                       |
+| 거치연수               | DFYRS      | Deferment Years                                       |
+| 건물면적               |            |                                                       |
+| 건물번호               | BNO        | Building Number                                       |
+| 건물본번               | BMNO       | Building Main Number                                  |
+| 건물부번               | BSNO       | Building Sub Number                                   |
+| 건설기계               | CTCQ       | Construction Equipment                                |
+| 건축면적               | BDAR       | Building Area                                         |
+| 검정곡선               | CLBCV      | Calibration Curve                                     |
+| 겨울철새               | WNTVST     | Winter Visitor                                        |
+| 결정계수               | RSQR       | R-Squared                                             |
+| 경과연수               | ELYRS      | Elapsed Years                                         |
+| 경로우대               | SNPR       | Senior Preference                                     |
+| 경상이익               | ORDPF      | Ordinary Profit                                       |
+| 경작면적               | CLTVAR     | Cultivation Area                                      |
+| 경지정리               | ROEL       | Readjustment Of Erable Land                           |
+| 경합채권               | CMPCLM     | Competition Claims                                    |
+| 계약면적               | CTRTAR     | Contract Area                                         |
+| 계정과목               | ACNTL      | Account Title                                         |
+| 계좌번호               | ACTNO      | Account Number                                        |
+| 계좌이체               | ACTRSF     | Account Transfer                                      |
+| 계획수량               | DSNWQT     | Design Water Quantity                                 |
+| 고도처리               | AWTR       | Advanced Water Treatment                              |
+| 고등균류               | HGF        | Higher Fungi                                          |
+| 고등학교               | HGSCHL     | High School                                           |
+| 고속도로               | HWAY       | Express Highway                                       |
+| 고수부지               |            |                                                       |
+| 고시면적               | NTFAR      | Notified Area                                         |
+| 고용보험               | EPIS       | Employment Insurance                                  |
+| 고정비율               | FARTO      | Fixed Assets Ratio                                    |
+| 고체연료               | HTTBS      | Heat Tabs                                             |
+| 공간정보               | SPTINF     | Spatial Information                                   |
+| 공공기관               | PBNST      | Public Institution                                    |
+| 공공누리               | KOGL       | Korea Open Government License                         |
+| 공공수량               | PBCWQT     | public water quantity                                 |
+| 공급면적               | SPLYAR     | Supply Area                                           |
+| 공급설비               | SPLFC      | Supply Facilities                                     |
+| 공동명의               | JNTNM      | Joint Name                                            |
+| 공동수급               | JSD        | Joint Supply And Demand                               |
+| 공동주택               | APTCPX     | Apartment Complex                                     |
+| 공부면적               | PBRGAR     | Public Register Area                                  |
+| 공시지가               | OALP       | Officially Announced Land Price                       |
+| 공업용수               | IWTR       | Industrial Water                                      |
+| 공용면적               | CMAR       | Common Area                                           |
+| 공원면적               | PRKAR      | Park Area                                             |
+| 공유면적               | SHRAR      | Shared Area                                           |
+| 공통비용               |            |                                                       |
+| 과세면적               | TXAR       | Taxable Area                                          |
+| 과세표준               | TXBS       | Tax Base                                              |
+| 과오납금               | OVPMNT     | Overpayments                                          |
+| 관개용수               | WTFIR      | Water For Irrigation                                  |
+| 관리기관               | MGC        | Management Agency                                     |
+| 관리주체               | MNATH      | Management Authority                                  |
+| 광역시도               | MCTPV      | Metropolitan Cities And Provinces                     |
+| 교류전류               | AC         | Alternating Current                                   |
+| 교육과정               | CRCLM      | Curriculum                                            |
+| 교육기관               | EDNST      | Education Institution                                 |
+| 교육연수               | EDTRN      | Education And Training                                |
+| 구름저항               | RLGRS      | Rolling Resistance                                    |
+| 구비서류               | RQDOC      | Required Documents                                    |
+| 구상채권               | RIDNT      | Right Of Indemnity                                    |
+| 국립공원               | NTPK       | National Park                                         |
+| 국민연금               | NPN        | National Pension                                      |
+| 국회의원               | MTNA       | Member Of The National Assembly                       |
+| 군립공원               | CNTRPK     | Country Park                                          |
+| 규제개혁               | RGRF       | Regulatory Reform                                     |
+| 그룹웨어               | GRPWR      | Groupware                                             |
+| 근로소득               | ERICM      | Earned Income                                         |
+| 근무연수               | SVCYRS     | Service Years                                         |
+| 근속연수               | CSYRS      | Continuous Service Years                              |
+| 금융기관               | FNST       | Financial Institution                                 |
+| 급속여과               | RPDFTR     | Rapidity Filtration                                   |
+| 기능점수               | FP         | Function_Point                                        |
+| 기록물철               | RCDSF      | Records Files                                         |
+| 기말잔액               | EBLNC      | Ending Balance                                        |
+| 기준면적               | RFAR       | Reference Area                                        |
+| 기초잔액               | OPBLNC     | Opening Balance                                       |
+| 기타면적               | OTHRAR     | Other Area                                            |
+| 기후대기               | CLAIR      | Climate And Air                                       |
+| 내부면적               | INTNAR     | Internal Area                                         |
+| 내용년수               |            |                                                       |
+| 내용연수               | SVLF       | Service Life                                          |
+| 네트워크               | NTWRK      | Network                                               |
+| 노동조합               | LBUN       | Labor Union                                           |
+| 노출면적               | EXPDAR     | Exposed Area                                          |
+| 녹색제품               | GPRDC      | Green Product                                         |
+| 녹지면적               | GRNAR      | Green Area                                            |
+| 녹피면적               | GRCVAR     | Green Covered Area                                    |
+| 뉴스레터               | NEWSL      | Newsletter                                            |
+| 다면평가               | MSEVL      | Multisource Evaluation                                |
+| 다운로드               | DWNLD      | Download                                              |
+| 단과대학               | CLG        | College                                               |
+| 단기자금               | SRTF       | Short Term Fund                                       |
+| 담수어류               | FWF        | Freshwater Fish                                       |
+| 담수조류               | ALG        | Algae                                                 |
+| 당좌예금               | CKACNT     | Checking Account                                      |
+| 대기발령               | PLWTLS     | Being Placed On The Waiting List                      |
+| 대기배출               | ATEMS      | Atmospheric Emission                                  |
+| 대기오염               | ARPLT      | Air Pollution                                         |
+| 대기환경               | ATENV      | Atmospheric Environment                               |
+| 대상업체               | TBET       | Target Business Entity                                |
+| 대위변제               | SBRG       | Subrogation                                           |
+| 대장균군               | CLFG       | Coliform Group                                        |
+| 대지면적               | SIAR       | Site Area                                             |
+| 대표이사               | CEO        | Chief Executive Officer                               |
+| 데이터셋               | DTST       | Data Set                                              |
+| 도서지역               | ISLND      | Islands                                               |
+| 도전양식               | CCRF       | Cultivation Of Carp In Rice Fields                    |
+| 독성물질               | TOXST      | Toxic Substance                                       |
+| 독성지수               | TXIDX      | Toxicity Index                                        |
+| 등기원인               | RGCS       | Registration Cause                                    |
+| 디바이스               | DVCE       | Device                                                |
+| 라이선스               | LCS        | License                                               |
+| 로그아웃               | LGT        | Log Out                                               |
+| 마일리지               | MLG        | Mileage                                               |
+| 매개변수               | PARM       | Parameter                                             |
+| 매우만족               | HSTFY      | Highly Satisfy                                        |
+| 매입세액               | IPTXAM     | Input Tax Amount                                      |
+| 메인화면               | MSCRN      | Main Screen                                           |
+| 멸종위기               | CRETN      | Crisis Of Extinction                                  |
+| 명품마을               | MPVLLG     | Myeongpum Village                                     |
+| 모니터링               | MNTR       | Monitoring                                            |
+| 무기물질               | NRGNC      | Nonorganic                                            |
+| 무수수량               | NRVWTR     | Non Revenue Water                                     |
+| 무효수량               | INFWQT     | Ineffective Water Quantity                            |
+| 물가지수               | PRIDX      | Price Index                                           |
+| 미리보기               | PRVW       | Preview                                               |
+| 미성년자               | LMNR       | Legally a Minor                                       |
+| 미세먼지               | PM         | Particulate Matter                                    |
+| 미소입지               | MCRST      | Micro Site                                            |
+| 민원서류               | CADOC      | Civil Affair Documents                                |
+| 바로가기               | SCUT       | Shortcut                                              |
+| 바이러스               | VRS        | Virus                                                 |
+| 바탕시료               | BLSMPL     | Blank Sample                                          |
+| 박테리아               | BCTR       | Bacteria                                              |
+| 발행기관               | PBINS      | Publish Institute                                     |
+| 방지시설               | PRVFCT     | Prevention Facility                                   |
+| 배당요구               | DVDMND     | Dividend Demand                                       |
+| 배수방식               | DRGPTN     | Drainage Pattern                                      |
+| 배수암거               | DGCVT      | Drainge Culvert                                       |
+| 배수통관               | CGC        | Circular Gate Culvert                                 |
+| 배출수량               | DCWQTY     | Discharge Water Qauntity                              |
+| 배출수지               | EMTWTR     | Emit Drain Water                                      |
+| 배출활동               | EMAT       | Emission Activity                                     |
+| 배후습지               | RRSMLD     | Rear Swampy Land                                      |
+| 백두대간               | BDMTRG     | Baekdudaegan Mountain Range                           |
+| 법인세율               | CPTXRT     | Corporate Tax Rate                                    |
+| 베셀함수               | BSFUN      | Bessel Function                                       |
+| 벤처기업               | VENT       | Venture Enterprise                                    |
+| 벤치마크               | BCHM       | Benchmark                                             |
+| 보수월액               | MRAMT      | Monthly Remuneration Amount                           |
+| 보정계수               | COFC       | Correction Factor                                     |
+| 보증료율               | GRNRT      | Guarantee Rate                                        |
+| 보험료율               | PMRT       | Premium Rate                                          |
+| 보훈번호               | PVNO       | Patriots And Veterans Number                          |
+| 본류면적               | MNSTAR     | The Main Stream Area                                  |
+| 부외자산               | NLAST      | Non-Ledger Assets                                     |
+| 부유물질               | SPNS       | Suspended Solid                                       |
+| 부재지주               | ABLD       | Absentee Landlord                                     |
+| 부정수급               | ILRCP      | Illegal Receipt                                       |
+| 부지면적               | PLTAR      | Plottage Area                                         |
+| 부착조류               | ATAG       | Attached Algae                                        |
+| 분류체계               | TXNM       | Taxonomy                                              |
+| 분양면적               | LTOTAR     | Lotting-Out Area                                      |
+| 불감수량               | URCWQT     | Under Recognition Water Qauntity                      |
+| 불납결손               | LSNPY      | Loss By Nonpayment                                    |
+| 불이행량               | UFDQTY     | Unfulfilled Quantity                                  |
+| 불쾌지수               | DCFIDX     | Discomfort Index                                      |
+| 불투수면               | IVAREA     | Impervious Area                                       |
+| 불확실도               | UCTMR      | Uncertainty Of Measurement                            |
+| 불활성화               | INCTVN     | Inactivation                                          |
+| 브라우저               | BRWSR      | Browser                                               |
+| 블랙박스               | BLBOX      | Black Box                                             |
+| 비내식성               | NCNRT      | Non Corrosion Resistant                               |
+| 비밀번호               | PSWD       | Password                                              |
+| 비시가지               | UCTARA     | Un City Area                                          |
+| 비정규직               | IREMP      | Irregular Employee                                    |
+| 사고수습               | ACDRES     | Accident Response                                     |
+| 사업면적               | BZAR       | Business Area                                         |
+| 사업분야               | BSR        | Business Area                                         |
+| 사업유형               | BTYP       | Biz Type                                              |
+| 사용수량               | USEWQT     | Use Water Quantity                                    |
+| 산림면적               | FRSTAR     | Forest Area                                           |
+| 산재보험               | IACI       | Industrial Accident Compensation Insurance            |
+| 산하기관               | AFINS      | Affiliated Institute                                  |
+| 상관계수               | CORR       | Correlation Coefficient                               |
+| 상류면적               | USTRAR     | Upstream Area                                         |
+| 상세주소               | DADDR      | Detailed Address                                      |
+| 상호명칭               |            |                                                       |
+| 상호작용               | INTRCN     | Interaction                                           |
+| 상황전파               | STCM       | Situation Communication                               |
+| 생년월일               | BRDT       | Birth Date                                            |
+| 생리학적               | PSLG       | Physiologic                                           |
+| 생물학적               | BOIL       | Biological                                            |
+| 생태관광               | ECTRSM     | Eco-Tourism                                           |
+| 생활하수               | DSWAG      | Domestic Sewage                                       |
+| 선수수익               | UNRV       | Unearned Revenue                                      |
+| 선하증권               | BL         | Bill Of Lading                                        |
+| 선화증권               |            |                                                       |
+| 성과지표               | PI         | Performance Indicator                                 |
+| 세계은행               | WB         | World Bank                                            |
+| 소득공제               | ICMDCT     | Income Deduction                                      |
+| 소득세율               | ICTXRT     | Income Tax Rate                                       |
+| 소득월액               | MINAMT     | Monthly Income Amount                                 |
+| 소멸시효               | ETPRSC     | Extinctive Prescription                               |
+| 소상공인               | SBO        | Small Business Owner                                  |
+| 수도꼭지               | SPGT       | Spigot                                                |
+| 수량징수               | WQTCLT     | Water Quantity Collection                             |
+| 수로면적               | WTRAR      | Waterway Area                                         |
+| 수리시설               | WTUF       | Water Utilization Facilities                          |
+| 수몰면적               | SBMGAR     | Submerged Area                                        |
+| 수문곡선               | HDRGPH     | Hydrograph                                            |
+| 수변식생               | RPVGTN     | Riparian Vegetation                                   |
+| 수소이온               | HION       | Hydrogen Ion                                          |
+| 수수료율               | CMRT       | Commission Rate                                       |
+| 수의계약               | PVCT       | Private Contract                                      |
+| 수입업체               | IMPTR      | Importer                                              |
+| 수입인지               | RVSTM      | Revenue Stamp                                         |
+| 수준거표               | LSTND      | Level Standard                                        |
+| 수질오염               | WTPLT      | Water Pollution                                       |
+| 수혜면적               | BNFAR      | Benefitted Area                                       |
+| 순발열량               | NCFV       | Net Calorific Value                                   |
+| 순환골재               | RCLAGT     | Recycling Aggregate                                   |
+| 승차정원               | RDCPCT     | Ride Capacity                                         |
+| 시나리오               | SCNR       | Scenario                                              |
+| 시설면적               | FCAR       | Facility Area                                         |
+| 시험회차               | TSCYCL     | Test Cycle                                            |
+| 식물뿌리               | PLTRT      | Plant Root                                            |
+| 식별정보               |            |                                                       |
+| 식생면적               | VGTNAR     | Vegetation Area                                       |
+| 식생피복               | VGTCVR     | Vegetation Cover                                      |
+| 신용카드               | CRCD       | Credit Card                                           |
+| 신용평가               | CRDRTG     | Credit Rating                                         |
+| 신적설량               | FSQTY      | Fresh Snow Quantity                                   |
+| 실거주지               | RLRSD      | Real Residence                                        |
+| 실효세율               | EFTXRT     | Effective Tax Rate                                    |
+| 아스팔트               | ASPT       | Asphalt                                               |
+| 아우점종               | SBSPCS     | Subdominant Species                                   |
+| 아이디어               | IDEA       | Idea                                                  |
+| 아주좋음               | VRGD       | Very Good                                             |
+| 알고리즘               | ALGR       | Algorithm                                             |
+| 암거면적               | UDRAR      | Underdrain Area                                       |
+| 액면가격               |            |                                                       |
+| 액티비티               |            |                                                       |
+| 야생동물               | WANMLS     | Wild Animals                                          |
+| 야생생물               | WLDF       | Wildlife                                              |
+| 양해각서               | MOU        | Memorandum Of Understanding                           |
+| 업데이트               |            |                                                       |
+| 업무분장               | TSKASN     | Task Assignment                                       |
+| 여권번호               | PNO        | Passport Number                                       |
+| 여성기업               | FOBIZ      | Female-Owned Business                                 |
+| 여울면적               | RPDSAR     | Rapids Area                                           |
+| 연립주택               | TNHS       | Town House                                            |
+| 연말정산               | YTXADJ     | Year-End Tax Adjustment                               |
+| 연차휴가               | ANVCT      | Annual Vacation                                       |
+| 염지하수               | SLTUGW     | Salty Underground Water                               |
+| 영점표고               | ZRELV      | Zero Elevation                                        |
+| 예산전용               | DVSBGT     | Diversion Of Budget                                   |
+| 오브젝트               |            |                                                       |
+| 오수처리               | SWGDPL     | Sewage Disposal                                       |
+| 오염물질               | PLTT       | Pollutant                                             |
+| 오프라인               | OFLN       | Offline                                               |
+| 온실가스               | GRGS       | Greenhouse Gas                                        |
+| 완료면적               | CMPTAR     | Completed Area                                        |
+| 완료수량               | CMPWQT     | Complete Water Quantity                               |
+| 완속여과               | SLWFTR     | Slow Filtration                                       |
+| 외래생물               | ALSP       | Alien Species                                         |
+| 외부면적               | EXTNAR     | External Area                                         |
+| 요금수량               | CRGWQT     | Charge Water Quantity                                 |
+| 용도지역               | ZNG        | Zoning                                                |
+| 용존산소               | DOX        | Dissolved Oxygen                                      |
+| 용존총인               | DTP        | Dissolved Total Phosphorus                            |
+| 용지면적               | LANDAR     | Land Area                                             |
+| 용해성철               | SI         | Soluble Iron                                          |
+| 우편번호               | ZIP        | Zip Code                                              |
+| 운영체제               | OS         | Operating System                                      |
+| 원도급자               | ORGCTR     | Original Contractor                                   |
+| 원소유자               | ORGOWN     | Original Owner                                        |
+| 원천징수               | WTHD       | Withholding                                           |
+| 웹사이트               |            |                                                       |
+| 유가증권               | MSCRT      | Marketable Securities                                 |
+| 유기물질               | ORGMT      | Organic Matter                                        |
+| 유기탄소               | ORGCB      | Organic Carbon                                        |
+| 유동부채               | CRLBL      | Current Liability                                     |
+| 유동비율               | CRRT       | Current Ratio                                         |
+| 유동자산               | CRAST      | Current Asset                                         |
+| 유류탱크               | OLTNK      | Oil Tank                                              |
+| 유수수량               | RVNWTR     | Revenue Water                                         |
+| 유역면적               | DRAR       | Drainage Area                                         |
+| 유전자원               | GRSC       | Genetic Resources                                     |
+| 유지관리               | MNTMNG     | Maintenance Management                                |
+| 유지보수               | MNTN       | Maintenance                                           |
+| 유효수량               | EFTWQT     | Effective Water Quantity                              |
+| 육상면적               | LDBSAR     | Land Based Area                                       |
+| 이격거리               | SPDST      | Seperated Distance                                    |
+| 이노비즈               | INOBIZ     | Innovation Business                                   |
+| 이용면적               | USGAR      | Usage Area                                            |
+| 이자수익               | INTRV      | Interest Revenues                                     |
+| 이전신청               | RCTAPL     | Relocation Apllication                                |
+| 이전연도               | PRVYR      | Previous Year                                         |
+| 인공증식               | CPPGN      | Captive Propagation                                   |
+| 인산염인               | PO4P       | Phosphate Phosphorus                                  |
+| 인센티브               | ICNTV      | Incentive                                             |
+| 인터넷망               | ITNTNW     | Internet Network                                      |
+| 일기개황               | WTHST      | Weather Situation                                     |
+| 일련번호               | SN         | Serial Number                                         |
+| 일상감사               | DLADT      | Daily Audit                                           |
+| 임대면적               | RNTAR      | Rent Area                                             |
+| 임차면적               | LSAR       | Leased Area                                           |
+| 자금이체               | FNDTR      | Fund Transfer                                         |
+| 자기소개               | SLFINT     | Self Introduction                                     |
+| 자기자본               | EQCPTL     | Equity Capital                                        |
+| 자기평가               | SLFEVL     | Self Evaluation                                       |
+| 자동이체               | ATTR       | Automatic Transfer                                    |
+| 자동차세               | AMTX       | Automobile Tax                                        |
+| 자본조정               | CPAD       | Capital Adjustment                                    |
+| 자연보호               | CTNT       | Conservation Of Nautre                                |
+| 자원봉사               | VLTR       | Volunteering                                          |
+| 자치단체               |            |                                                       |
+| 장바구니               | SHPBS      | Shopping Basket                                       |
+| 장부가액               | BKVL       | Book Value                                            |
+| 재무제표               | FNSTM      | Financial Statements                                  |
+| 재배작물               | CRTLVN     | Crops Of Cultivation                                  |
+| 재사용량               | RSDQTY     | Reused Quantity                                       |
+| 재수출국               | RPGCNY     | Reexporting Country                                   |
+| 재이용수               | RUSWT      | Reuse Water                                           |
+| 재충전량               | RCRQTY     | Recharged Quantity                                    |
+| 재택근무               | TLCM       | Telecommuting                                         |
+| 재활용량               | RCYQTY     | Recycled Quantity                                     |
+| 저소득층               | LINBR      | Low Income Bracket                                    |
+| 저수면적               | IMPDAR     | Impoundment Area                                      |
+| 저수용량               | RSCPT      | Reservoir Capacity                                    |
+| 저작권자               | CPRGTR     | Copyright Holder                                      |
+| 저장매체               | STRMDA     | Storage Media                                         |
+| 적색목록               | RLST       | Redlist                                               |
+| 적용세율               | APTXRT     | Applied Tax Rates                                     |
+| 전기탐사               | ELCRST     | Electrical Resistivity                                |
+| 전문분야               | ARSP       | Area Of Specialty                                     |
+| 전용면적               | XUAR       | Exclusive Use Area                                    |
+| 전자결재               | ELAPR      | Electronic Approval                                   |
+| 전자계약               | ELCT       | Electronic Contract                                   |
+| 전자문서               | ELDOC      | Electronic Document                                   |
+| 전자발행               | ELPBL      | Electronic Publication                                |
+| 전자서명               | ELSGN      | Electronic Signature                                  |
+| 전자우편               |            |                                                       |
+| 전자접수               | ELRCP      | Electronic Receipt                                    |
+| 전체면적               | WHLAR      | Whole Area                                            |
+| 전통시장               | TRMKT      | Traditional Market                                    |
+| 전화번호               | TELNO      | Telephone Number                                      |
+| 점오염원               | PTPSRC     | Point Pollution Source                                |
+| 정격전압               | RVLT       | Rating Voltage                                        |
+| 정격출력               | RTOPUT     | Rated Output                                          |
+| 정량평가               | QTEVL      | Quantitative Evaluation                               |
+| 정성평가               | QLEVL      | Qualitative Evaluation                                |
+| 정수처리               | WTRTRM     | Water Treatment                                       |
+| 정유공정               | RFPC       | Refining Process                                      |
+| 제약시장               | PHMRKT     | Pharmaceutical Market                                 |
+| 제조업체               | MNFCO      | Manufacture Company                                   |
+| 제조회사               |            |                                                       |
+| 조경면적               | LAAR       | Landscape Architecture Area                           |
+| 조도계수               | RGHCF      | Roughness Coefficient                                 |
+| 종사업장               | MRBPL      | Minor Business Place                                  |
+| 주건축물               | MBLD       | Main Building                                         |
+| 주계약자               | MCNTR      | Main Contractor                                       |
+| 주담당자               | MPIC       | Main Person In Charge                                 |
+| 주무관청               | CMPADG     | Competent Administrative Agency/Office                |
+| 주민번호               |            |                                                       |
+| 주민세율               | RSTXRT     | Residence Tax Rate                                    |
+| 주사업자               | MBPR       | Main Business Person                                  |
+| 주사업장               | MBPL       | Main Business Place                                   |
+| 주상복합               | MUBLD      | Mixed-Use Buildings                                   |
+| 주생산품               | MPRD       | Main Product                                          |
+| 주택면적               | HSAR       | House Area                                            |
+| 주행모드               | DSCHDL     | Drive Schedule                                        |
+| 중부원점               | CTRMRD     | Central Meridian                                      |
+| 중소기업               | SME        | Small And Medium Enterprise                           |
+| 즐겨찾기               | BKMK       | Bookmark                                              |
+| 증발산량               | EVTRTN     | Evapotranspiration                                    |
+| 증발잠열               | LHOV       | Latent Heat Of Vaporization                           |
+| 지도교수               | ACAVSR     | Academic Adviser                                      |
+| 지류면적               | TRBAR      | Tributary Area                                        |
+| 지목면적               | LDCGAR     | Land Category Area                                    |
+| 지번본번               |            |                                                       |
+| 지번부번               |            |                                                       |
+| 지역지구               | ZNDST      | Zoning District                                       |
+| 지오서버               | GSVR       | Geoserver                                             |
+| 지적대장               |            |                                                       |
+| 지적면적               | PBCDAR     | Public Cadastre Area                                  |
+| 지중온도               | SLTMPR     | Soil Temperature                                      |
+| 지체상금               | LQDMG      | Liquidated Damages                                    |
+| 지형지물               | FTRE       | Feature                                               |
+| 질의응답               | QNA        | Question And Answer                                   |
+| 집수구역               | CHMARA     | Catchment Area                                        |
+| 집합건물               | CNBD       | Condominium Buildings                                 |
+| 차대번호               | VIN        | Vehicle Identification Number                         |
+| 차량번호               |            |                                                       |
+| 처리수량               | PRCWQT     | Process Water Quantity                                |
+| 처리효율               | DSPEFC     | Disposal Efficiency                                   |
+| 청정연료               | CLNRFL     | Cleaner Fuel                                          |
+| 체크카드               | CKCRD      | Check Card                                            |
+| 초등학교               | ELSCHL     | Elementary School                                     |
+| 총가입자               | TNSBSR     | Total Subscribers                                     |
+| 총감축량               | TRNQTY     | Total Reduction Quantity                              |
+| 총경년관               | TNAGP      | Total Aged Pipes                                      |
+| 총계획량               | TPLQTY     | Total Planned Quantity                                |
+| 총매립량               | TLFQTY     | Total Landfilled Quantity                             |
+| 총발열량               | TCLVL      | Total Calorific Value                                 |
+| 총방류량               | TOTFL      | Total Outflow                                         |
+| 총방문자               | TVSTR      | Total Visitors                                        |
+| 총배출권               | TEMCRD     | Total Emmision Credit                                 |
+| 총배출량               | TEHQTY     | Total Exhaust Quantity                                |
+| 총부존량               | TPTQTY     | Total Potential Quantity                              |
+| 총사업비               | TPCO       | Total Project Cost                                    |
+| 총사용량               | TUQTY      | Total Usage Quantity                                  |
+| 총세대수               | TNOHSH     | Total Number Of Households                            |
+| 총신청량               | TAPQTY     | Total Applied Quantity                                |
+| 총연구비               | TRSCO      | Total Research Cost                                   |
+| 총이동량               | TMVQTY     | Total Moved Quantity                                  |
+| 총인구수               | TPPL       | Total Population                                      |
+| 총인원수               | TNOPE      | Total Number Of People                                |
+| 총인정량               | TRGQTY     | Total Recognized Quantity                             |
+| 총자본금               | TEQCP      | Total Equity Capital                                  |
+| 총저수량               | TREQTY     | Total Reservoir Quantity                              |
+| 총직원수               | TNOEMP     | Total Number Of Employees                             |
+| 총하수량               | TSWQTY     | Total Sewage Quantity                                 |
+| 총할당량               | TQTY       | Total Quota                                           |
+| 총회수량               | TRVQTY     | Total Retrieved Quantity                              |
+| 출제회차               | SQCYCL     | Set Exam Questions Cycle                              |
+| 취득면적               | ACQAR      | Acquired Area                                         |
+| 침수면적               | FLDAR      | Flooded Area                                          |
+| 침엽수림               | CFF        | Coniferous Forests                                    |
+| 카카오톡               | KATLK      | Kakao Talk                                            |
+| 카탈로그               | CTLG       | Catalog                                               |
+| 카테고리               |            |                                                       |
+| 캠벨선도               | CAMPDG     | Campbell Diagram                                      |
+| 커뮤니티               | CMNTY      | Community                                             |
+| 컨설턴트               | CNSLTT     | Consultant                                            |
+| 컨트롤러               | PCTLR      | (Program) Controllor                                  |
+| 콘크리트               | CNCRT      | Concrete                                              |
+| 큐알코드               |            |                                                       |
+| 클라우드               | CLD        | Cloud (Computing)                                     |
+| 토지대장               | LNDRG      | Land Register                                         |
+| 토지면적               | LDAR       | Land Area                                             |
+| 토지이동               | AOCR       | Alteration Of Cadastral Record                        |
+| 토지피복               | LCV        | Land Cover                                            |
+| 통근버스               | CMBUS      | Commuter Bus                                          |
+| 통상임금               | ORWG       | Ordinary Wage                                         |
+| 투수면적               | PRMBAR     | Permeable Area                                        |
+| 파라미터               |            |                                                       |
+| 파트너십               | PTNS       | Partnership                                           |
+| 팝업메뉴               |            |                                                       |
+| 패스워드               |            |                                                       |
+| 팩스번호               | FXNO       | Fax Number                                            |
+| 편의시설               | CVNFCL     | Convenient Facilities                                 |
+| 편입면적               | ICLAR      | Included Area                                         |
+| 폐수처리               | WSWT       | Wastewater Treatment                                  |
+| 표준편차               | STDDV      | Standard Deviation                                    |
+| 프로그램               | PRGRM      | Program                                               |
+| 프로세스               | PRCSS      | Process                                               |
+| 프로젝트               |            |                                                       |
+| 플라스틱               | PLSTIC     | Plastic                                               |
+| 플랑크톤               | PLNKTN     | Plankton                                              |
+| 피보험자               | ISRT       | Insurant                                              |
+| 피승계인               | SCSR       | Successor                                             |
+| 피신청인               |            |                                                       |
+| 피신청자               | RQPRSN     | Requested Person                                      |
+| 필지면적               | LPAR       | Land Parcel Area                                      |
+| 하구면적               | ESTNAR     | Estuarine Area                                        |
+| 하드웨어               | HW         | Hardware                                              |
+| 하상면적               | RVBDAR     | Riverbed Area                                         |
+| 하수처리               | SWTRMT     | Sewage Treatment                                      |
+| 하자보수               | WRP        | Warranty Repair                                       |
+| 학술대회               | SMPSM      | Symposium                                             |
+| 합계면적               | SUMAR      | Sum Area                                              |
+| 합성수지               | SYRSN      | Synthetic Resin                                       |
+| 해시태그               | HSTG       | Hashtag                                               |
+| 해양투기               | OCDU       | Ocean Dumping                                         |
+| 행정구역               | ADMDST     | Administrative District                               |
+| 행정기관               | ADMNST     | Administrative Institution                            |
+| 행정처분               | ADMDSP     | Administrative Disposition                            |
+| 허가면적               | PMTAR      | Permitted Area                                        |
+| 현장소장               | STMGR      | Site Manager                                          |
+| 홈페이지               |            |                                                       |
+| 홍수사상               | FLDEV      | Flood Event                                           |
+| 환경매체               | ENVMDA     | Environment Media                                     |
+| 환경청장               | AOEO       | Administrator Of Environmental Office                 |
+| 활동자료               | ATTD       | Activity Data                                         |
+| 활엽수림               | BDF        | A Broadleaf Forest                                    |
+| 회계연도               | FYR        | Fiscal Year                                           |
+| 회수시설               | RTFT       | Retrieval Facilities                                  |
+| 후기내용               | RVCN       | Review Contents                                       |
+| 휴대전화               | MPHN       | Mobilephone                                           |
+| 간접생산비             |            |                                                       |
+| 감가상각률             | DPRT       | Depreciation Rate                                     |
+| 감가상각비             | DPCO       | Depreciation Cost                                     |
+| 건강보험증             | HIC        | Health Insurance Card                                 |
+| 건축물대장             | BDRG       | Building Register                                     |
+| 계면활성제             | SRFCT      | Surfactant                                            |
+| 계약보증금             | CRYMY      | Contract Guaranty Money                               |
+| 계획하상고             | PLNRB      | Planned River Bed                                     |
+| 고도처리량             | AWTVLM     | Advanced Water Treatment Volume                       |
+| 고용보험료             | EPISPM     | Employment Insurance Premium                          |
+| 골재채취업             | AGPKBS     | Aggregate Picking Business                            |
+| 공간데이터             | SPCDT      | Space Data                                            |
+| 공급받는자             | SPLRCP     | Supply Recipient                                      |
+| 공인인증서             | PCRTF      | Public Certificate                                    |
+| 과불화탄소             | PFCS       | Perfluoro Carbon                                      |
+| 과학기술인             | SCEGNR     | Scientists And Engineers                              |
+| 구우편번호             | OZIP       | Old Zip Code                                          |
+| 구조물면적             | STRTAR     | Structures Area                                       |
+| 국가정보원             | NIS        | National Intelligence Service                         |
+| 국고보조금             | GVSBS      | Government Subsidy                                    |
+| 기초배출량             | BSCEMS     | Basic Emissions                                       |
+| 납세의무자             |            |                                                       |
+| 냉난방면적             | HACAR      | Heating And Cooling Area                              |
+| 농축수산물             | ARLSFS     | Agricultural And Livestock And Fishery                |
+| 다세대주택             | MLTPHS     | Multiplex House                                       |
+| 다양도지수             | DVRIDX     | Diversity Index                                       |
+| 대권역면적             | LSRBAR     | Large Sphere Of Influence In A River Basin Area       |
+| 대유역면적             | LRBAR      | Large River Basin Area                                |
+| 만수위면적             | FWLVAR     | Full Water Level Area                                 |
+| 매우불만족             | HDSTFY     | Highly Dissatisfy                                     |
+| 매출원가율             | COGSRT     | Cost Of Goods Sold (Cogs) Ratio                       |
+| 메타데이터             | MTDAT      | Metadata                                              |
+| 멤버스카드             | MBSCR      | Members Card                                          |
+| 면적강우량             | ARRF       | Areal Rainfall                                        |
+| 멸종위기종             | EGSPCS     | Endangered Species                                    |
+| 무척추동물             | INVTB      | Invertebrates                                         |
+| 문자메시지             | TMSG       | Text Message (Service)                                |
+| 미구축면적             | UNBTAR     | Unbuilt Area                                          |
+| 미수납수량             | NPDWQT     | Non Paid Water Quantity                               |
+| 바이오가스             | BGS        | Biogas                                                |
+| 바이오매스             | BMSS       | Biomass                                               |
+| 방사성물질             | RATSBT     | Radioactive Substance                                 |
+| 배슬러지지             | EMSLDG     | Emit Sludge                                           |
+| 배출허용량             | EMSALW     | Emission Allowances                                   |
+| 법정보호종             | LPRSP      | Legally Protected Species                             |
+| 복리후생비             | WLFCO      | Welfare Cost                                          |
+| 부가가치세             | VAT        | Value Added Tax                                       |
+| 부유물질량             | SPNQTY     | Suspended Solid Quantity                              |
+| 부착돌말류             | ATTDM      | Attached Diatom                                       |
+| 불투수면적             | IMPBAR     | Impermeable Area                                      |
+| 비유동부채             | NCLBL      | Non-Current Liabilities                               |
+| 비유동자산             | NCAST      | Non-Current Assets                                    |
+| 비점오염원             | NPTLS      | Nonpoint Pollution Source                             |
+| 사업소면적             |            |                                                       |
+| 사업자번호             |            |                                                       |
+| 사업장면적             | BZSTAR     | Business Site Area                                    |
+| 사전할당량             | PRALC      | Pre-Allocation                                        |
+| 사회적기업             | SCENT      | Social Enterprise                                     |
+| 상쇄배출권             | KCU        | Korean Credit Unit                                    |
+| 상시만수위             | NHWL       | Normal High Water Level                               |
+| 생물다양성             | BODVS      | Biodiversity                                          |
+| 생물측정망             | AEM        | Aquatic Ecology Monitering Network                    |
+| 생태자연도             | ENM        | Ecological And Natural Map                            |
+| 섭식기능군             | FFG        | Funtional Feeding Groups                              |
+| 세계측지계             | WGS84      | World Geodetic System                                 |
+| 세금계산서             | TXIV       | Tax Invoice                                           |
+| 소수력발전             | SMHPWR     | Small Hydropower                                      |
+| 소유권이전             | OWNTRS     | Ownership Transfer                                    |
+| 소유역면적             | SBAREA     | Sub Basin Area                                        |
+| 소프트웨어             | SW         | Software                                              |
+| 수리모델링             | MTMD       | Mathematical Modeling                                 |
+| 수리안전답             | IRPDY      | Irrigated Rice Paddy                                  |
+| 수리전도도             | HYDCON     | Hydraulic Conductivity                                |
+| 수질측정망             | WQMN       | Water Quality Monitoring Network                      |
+| 숙련도시험             | PFTSTG     | Proficiency Testing                                   |
+| 스트레이너             | STRENE     | Strainer                                              |
+| 시뮬레이션             | SMLT       | Simulation                                            |
+| 시장조성자             | MRMKR      | Market Maker                                          |
+| 아산화질소             | NTRXD      | Nitrous Oxide                                         |
+| 아이핀번호             | IPIN       | Internet Personal Identification Number               |
+| 아황산가스             | SPDX       | Sulphur Dioxide                                       |
+| 양서파충류             | AMPHRP     | Amphibian Reptile                                     |
+| 업그레이드             | UPGRAD     | Upgrade                                               |
+| 연속지적도             | CCDM       | Continuous Cadastral Map                              |
+| 열병합발전             | CHP        | Combined Heat And Power                               |
+| 영업외비용             | NOCO       | Non-Operating Cost                                    |
+| 영업외수익             | NOICM      | Non-Operating Income                                  |
+| 오수처리량             | SWDQTY     | Sewage Disposal Quantity                              |
+| 외국인번호             |            |                                                       |
+| 용존고형물             | TDS        | Total Dissolved Solide                                |
+| 용존산소량             | DOQTY      | Dissolved Oxygen Quantity                             |
+| 용존총질소             | DTN        | Dissolved Total Nitrogen                              |
+| 우점종면적             | DMSPAR     | Dominant Species Area                                 |
+| 워크플로우             | WFLW       | Workflow                                              |
+| 웹맵서비스             | WMS        | Web Map Service                                       |
+| 유기물질량             | OMQTY      | Organic Matter Quantity                               |
+| 이산화질소             | NTDX       | Nitrogen Dioxide                                      |
+| 이산화탄소             | CBDX       | Carbon Dioxide                                        |
+| 이해관계인             |            |                                                       |
+| 이해관계자             | STHDR      | Stakeholder                                           |
+| 인증배출량             | CRTEMS     | Certified Emissions                                   |
+| 인터페이스             | IF         | Interface                                             |
+| 일산화탄소             | CBMX       | Carbon Monoxide                                       |
+| 임금피크제             | SLPK       | Salary Peak                                           |
+| 임대차계약             | LSCT       | Lease Contract                                        |
+| 잉여배출권             | SPSEMP     | Supplus Emission Permits                              |
+| 자본적지출             | CPEX       | Capital Expenditure                                   |
+| 자연발화성             | PYHRC      | Pyropholic                                            |
+| 전기자동차             | ELCAR      | Electric Car                                          |
+| 전기전도도             | ELCD       | Electrical Conductivity                               |
+| 전자기록물             | ERCDS      | Electronic Records                                    |
+| 정수여과지             | WTFB       | Water Treatment Filter Basin                          |
+| 조류측정망             | SWMN       | Sea Weed Mesure Network                               |
+| 주거래은행             | MBNK       | Main Bank                                             |
+| 주차장면적             | PKLTAR     | Parking Lot Area                                      |
+| 중권역면적             | MSRBAR     | Middle Sphere Of Influence In A River Basin Area      |
+| 지식재산권             | IPR        | Intellectual Property Rights                          |
+| 질소산화물             | NOX        | Nitrogen Oxide                                        |
+| 차상위계층             | LICLS      | Low Income Class                                      |
+| 채무불이행             | DFOBL      | Default On An Obligation                              |
+| 천연기념물             | NTM        | Natural Monument                                      |
+| 체크리스트             |            |                                                       |
+| 초미세먼지             | FPM        | Fine Particulate Matter                               |
+| 총교육시간             | TTRHR      | Total Training Hours                                  |
+| 총근로자수             | TNOWK      | Total Number Of Workers                               |
+| 총근무시간             | TWKHR      | Total Work Hours                                      |
+| 총대장균군             | CFBCTR     | Coliform Bacteria                                     |
+| 총등록건수             | TRGCNT     | Total Registration Count                              |
+| 총사업비용             |            |                                                       |
+| 총유기탄소             | TORGCB     | Total Organic Carbon                                  |
+| 총재사용량             | TRDQTY     | Total Reused Quantity                                 |
+| 총저수용량             | TRSCPT     | Total Reservoir Capacity                              |
+| 최심하상고             | LRB        | The Lowest River Bed                                  |
+| 최종할당량             | FNALC      | Final Allocation                                      |
+| 추가할당량             | ADDALC     | Additional Allocation                                 |
+| 추곡수매량             | AGPQTY     | Autumn Grain Purchase Quantity                        |
+| 측정망면적             | MTNTAR     | Monitoring Network Area                               |
+| 친환경마을             | ECVL       | Eco-Friendly Village                                  |
+| 클라이언트             | CLNT       | Client                                                |
+| 테스트베드             | TSTBD      | Test Bed                                              |
+| 투수량계수             | TRSMI      | Transmissivity                                        |
+| 평가배출량             | ASDEMS     | Assessed Emissions                                    |
+| 평균하상고             | AVGRB      | Average River Bed                                     |
+| 평형하상고             | EBRB       | Equilibrium River Bed                                 |
+| 폐기물처리             | WSTDSP     | Waste Disposal                                        |
+| 풍부도지수             | RCNIDX     | Richness Index                                        |
+| 하수미처리             | USWTMT     | Un Sewage Treatment                                   |
+| 하수처리량             | SWTQTY     | Sewage Treatment Quantity                             |
+| 하수처리수             | STWTR      | Sewage Treatment Water                                |
+| 하수처리장             | STPLNT     | Sewage Treatment Plant                                |
+| 하이브리드             | HYB        | Hybrid                                                |
+| 할당배출권             | KAU        | Korean Allownce Unit                                  |
+| 할당취소량             | ALCRVC     | Allocation Revocation                                 |
+| 해산어류종             | MFSPCS     | Marine Fishes Species                                 |
+| 헬프데스크             | HDESK      | Helpdesk                                              |
+| 현금매도율             | CSSRT      | Cash Selling Rate                                     |
+| 현금영수증             | CSRT       | Cash Receipt                                          |
+| 환경주제도             | ENVTHM     | Environmental Thematic Map                            |
+| 활동자료량             | ADQTY      | Activity Data Quantity                                |
+| 회유성어종             | DRMSPC     | Diadromous Species                                    |
+| 경사면일사량           | SRDINC     | Solar Radiation Quantity On Inclined Surface          |
+| 고유식별정보           | UII        | Unique Identifier Information                         |
+| 과불화탄소량           | PFCQTY     | Perfluoro Carbon Quantity                             |
+| 국지수집장치           | LAU        | Local Area Observation Unit                           |
+| 굴뚝자동측정           | CMAM       | Chimney Automatic Measurement                         |
+| 기초구역번호           |            |                                                       |
+| 기한이익상실           | TRGCLS     | Trigger Clause                                        |
+| 기후변화협약           | UNFCCC     | United Nations Framework Convention On Climate Change |
+| 놀이시설면적           | PFCAR      | Play Facility Area                                    |
+| 농어촌특별세           | ASRDTX     | ACT ON SPECIAL RURAL DEVELOPMENT TAX                  |
+| 대기오염물질           | ARPLTS     | Air Pollutants                                        |
+| 데이터베이스           | DB         | Database                                              |
+| 동물플랑크톤           | ZPLKTN     | Zooplankton                                           |
+| 명품마을면적           | MPVAR      | Myeongpum Village Area                                |
+| 물이용부담금           | WUALMT     | Water Utilization Allotment                           |
+| 미활용확약서           | LCNM       | Letter of Commitment on Nullification of Mitigations  |
+| 바이오에너지           | BENRG      | Bioenergy                                             |
+| 배출권이월량           | BKEMP      | Banking of Emission Permits                           |
+| 배출권제출량           | SRDEMP     | surrender of emission permits                         |
+| 배출권차입량           | BRWEMP     | Borrowing of Emission Permits                         |
+| 배출권총수량           | TEA        | Total Emission Allowances                             |
+| 배출허용기준           | EQS        | Effluent Quality Standard                             |
+| 배출허용총량           | EMSCAP     | (Emission) Cap                                        |
+| 법인등록번호           | CRNO       | Corporation Registration Number                       |
+| 보호구역면적           | RTNAR      | Retention Area                                        |
+| 부가가치세율           | VATRT      | Value Added Tax Rate                                  |
+| 부대시설면적           | SFAR       | Subsidiary Facilities Area                            |
+| 비점오염물질           | NPLTS      | Nonpoint Pollutions                                   |
+| 산림보호구역           | FRSTPA     | Forest Protection Area                                |
+| 생태계교란종           | DISP       | Ecological Disruption Species                         |
+| 수관그늘면적           | WPSHAR     | Water Pipe Shade Area                                 |
+| 수리불안전답           | PIRPDY     | Partially Irrigated Rice Paddy                        |
+| 수소이온농도           | PH         | Hydrogen Ion Concentration                            |
+| 수질오염물질           | WTPLTS     | Water Pollutants                                      |
+| 수질평가지수           | WQI        | Water Quality Index                                   |
+| 슬러지케이크           | SLDGCK     | Sludge Cake                                           |
+| 식물플랑크톤           | PTPKTN     | Phytoplankton                                         |
+| 신용평가기관           | CRBU       | Credit Bureau                                         |
+| 애프터서비스           | AS         | After-Sales Service                                   |
+| 애플리케이션           | APP        | Application (App)                                     |
+| 어류평가지수           | FAI        | Fish Assessment Index                                 |
+| 어플리케이션           |            |                                                       |
+| 우편일련번호           |            |                                                       |
+| 운전면허번호           | DLN        | Driver'S License Number                               |
+| 율리우스날짜           | JLSDY      | Julius Day                                            |
+| 일제관측수위           | SWL        | Simultanous Water Level                               |
+| 저서동물지수           | BMI        | Benthic Macroinvrtebrates Index                       |
+| 전도식가동보           | RVOPW      | Reversal Operating Weir                               |
+| 전문처리분야           | SPCFLD     | Specialized Field                                     |
+| 전신환매도율           | TTSRT      | Telegraphic Transfer Selling Rate                     |
+| 전신환매입률           | TTBRT      | Telegraphic Transfer Buying Rate                      |
+| 전자납부번호           | EPAYNO     | Electronic Payment Number                             |
+| 전자수입인지           | ERSTP      | E-Revenue Stamp                                       |
+| 조정감액수량           | DCMWQT     | Decrement Water Quantity                              |
+| 종합주가지수           | KOSPI      | Korean Composite Stock Price Index                    |
+| 주거공용면적           | DCAR       | Dwelling Common Area                                  |
+| 주민등록번호           | RRNO       | Resident Registration Number                          |
+| 주요생산제품           |            |                                                       |
+| 지방자치단체           | LCLGV      | Local Government                                      |
+| 지역내총생산           | GRDP       | Gross Regional Domestic Product                       |
+| 총발행주식수           | TSHOSD     | Total Shares Outstanding                              |
+| 토양오염물질           | SLCTMS     | Soil Contaminants                                     |
+| 토지이용규제           | LURGLT     | Land Use Regulation                                   |
+| 토지피복면적           | LCVAR      | Land Cover Area                                       |
+| 토지피복지도           | LCM        | Land Cover Map                                        |
+| 특정유해물질           | SHCH       | Specified Hazardous Chemicals                         |
+| 하수종말처리           | FNTRMT     | Final Treatment                                       |
+| 하수처리구역           | STAA       | Sewage Treatment Area                                 |
+| 핵심성과지표           | KPI        | Key Performance Indicator                             |
+| 행정구역면적           | ADSTAR     | Administrative District Area                          |
+| 환경생태유량           | ENVFLW     | Environmental Flow                                    |
+| 환경영향평가           | EIA        | Environmental Impact Assessment                       |
+| 공간정보데이터         | GEOM       | (Data) Geometry                                       |
+| 국외반출승인종         | OEASP      | Overseas Export Approval Species                      |
+| 기초생활수급자         | ROBL       | Recipients Of Basic Livelihood                        |
+| 도로명상세주소         |            |                                                       |
+| 분원성대장균군         | FCFS       | Fecal Coliforms                                       |
+| 사업자등록번호         | BRNO       | Business Registration Number                          |
+| 사회적협동조합         | SCCP       | Social Cooperative                                    |
+| 생태계교란생물         |            |                                                       |
+| 스마트워크센터         | SWC        | Smart Work Center                                     |
+| 식생자연도지수         | VNI        | Vegetation Naturalness Index                          |
+| 암모니아성질소         | AMNG       | Ammonium Nitrogen                                     |
+| 암호화계좌번호         | ENACNO     | Encrypted Account Number                              |
+| 암호화비밀번호         | ENPSWD     | Encrypted Password                                    |
+| 외국인등록번호         | FRNO       | Foreigner Registration Number                         |
+| 자동기상관측소         | AWS        | Automatic Weather Station                             |
+| 자동차등록번호         | VHRNO      | Vehicle Registration Number                           |
+| 전자세금계산서         | ETXIV      | Electronic Tax Invoice                                |
+| 지구온난화지수         | GWPTN      | Global Warming Potential                              |
+| 지상기상관측소         | MTRST      | Meteorological Station                                |
+| 철새도래지면적         | MBDHAR     | Migratory Bird Habitat Area                           |
+| 총트리할로메탄         | THMS       | Total Trihalomethane                                  |
+| 탄소중립포인트         | CNPNT      | Carbon Neutral Point                                  |
+| 트리클로로에탄         | TCRN       | Trichloroethane                                       |
+| 표준지공시지가         |            |                                                       |
+| 하수미처리구역         | RSAA       | Raw Sewage Area                                       |
+| 하수처리장면적         | STPAR      | Sewage Treatment Plant Area                           |
+| 한국십진분류법         | KDC        | Korea Decimal Classification                          |
+| 항공화물운송장         | AIRBL      | Air Waybill                                           |
+| 국제적멸종위기종       | CSPCS      | Cites Species                                         |
+| 국제표준도서번호       | ISBN       | International Standard Book Number                    |
+| 기초생활수급권자       |            |                                                       |
+| 기후에너지환경부       | MCEE       | Ministry of Climate, Energy and Environment           |
+| 배출량산정계획서       | ECPD       | Emission Computation Plan Document                    |
+| 상쇄배출권전환량       | KCUCVT     | KCUS Converted                                        |
+| 서식수변환경지수       | HRI        | Haitat And Riparian Index                             |
+| 서식지적합도지수       | HIS        | Habitat Suitability Indexes                           |
+| 석면함유가능물질       | ACM        | Asbestos Containing Materials                         |
+| 선행토양함수조건       | AMC        | Antecedent Moisture Condition                         |
+| 옥탄올물분배계수       | OWPC       | Octanol-Water Partition Coefficient                   |
+| 외부사업인증실적       | KOC        | Korean Offset Credit                                  |
+| 우편번호일련번호       |            |                                                       |
+| 최소검출가능농도       | MDA        | Minimum Detectable Activity                           |
+| 한국표준산업분류       | KSIC       | Korean Standard Industrial Classification             |
+| 행정정보공동이용       | ADINSR     | Administrative Information Sharing                    |
+| 화학적산소요구량       | COD        | Chemical Oxygen Demand                                |
+| 환경기초조사사업       | EBSP       | Environmental Basis Survey Project                    |
+| 휘발성유기화합물       | VOCS       | Volatile Organic Compounds                            |
+| 미국연방통신위원회     | FCC        | Federal Communications Commission                     |
+| 암호화법인등록번호     | ENCRNO     | Encrypted Corporation Registration Number             |
+| 암호화주민등록번호     | ENRRNO     | Encrypted Resident Registration Number                |
+| 개인정보수집이용동의   | PICUC      | Personal Information Collection/Use Consent           |
+| 생물화학적산소요구량   | BOD        | Biochemical Oxygen Demand                             |
+| 생태계교란야생동식물   |            |                                                       |
+| 암호화사업자등록번호   | ENBRNO     | Encrypted Business Registration Number                |
+| 저서성대형무척추동물   | BMCRIB     | Benthic Macroinvertebrate                             |
+| 국제표준연속간행물번호 | ISSN       | International Standard Serial Number                  |
+| 총생물화학적산소요구량 | TBOD       | Total Biochemical Oxygen Demand                       |
+| 1회섭취참고량          | RAFOS      | Reference Amount For One Serving                      |
+| 14세                   | YO14       | 14 Years Old                                          |
+| 코로나19               | COVID      | Covid19                                               |
+| 차량2부제              | ATNDS      | Alternate No-Driving System                           |
+| 2차원                  | DMS2       | Two Dimensions                                        |
+| 제3자                  | TDPTY      | Third Party                                           |
+| 제3채무자              | GRNS       | Garnishee                                             |
+| 3차원                  | DMS3       | Three Dimensions                                      |
+| 4대강                  | FMRVR      | Four Major Rivers                                     |
+| 오픈API                | OPAPI      | Open Application Programming Interface                |
+| API                    | API        | Application Programming Interface                     |
+| ARS                    | ARS        | Automatic Response System                             |
+| CAS                    | CAS        | Chemical Abstract Service                             |
+| CCTV                   | CCTV       | Closed Circuit Television                             |
+| CI                     | CI         | Connecting Information                                |
+| CMS                    | CMS        | Cash Management Service                               |
+| COP                    | COP        | Community Of Practice                                 |
+| CP                     | CP         | Capacity Parameter                                    |
+| CPU                    | CPU        | Central Processing Unit                               |
+| DB                     |            |                                                       |
+| DI                     | DI         | Duplicated Joining Verification Information           |
+| DN                     | DN         | Distinguish Name                                      |
+| DRM                    | DRM        | Digital Rights Management                             |
+| EAI                    | EAI        | Enterprise Application Integration                    |
+| e-mail                 |            |                                                       |
+| EMAIL                  |            |                                                       |
+| FAQ                    | FAQ        | Frequently Asked Question                             |
+| FAX번호                |            |                                                       |
+| FILE                   |            |                                                       |
+| G2B                    | G2B        | Government-To-Business                                |
+| GIS                    | GIS        | Geographic Information System                         |
+| GOTP                   | GOTP       | Government One Time Password                          |
+| GPKI                   | GPKI       | Government Public Key Infrastructure                  |
+| GPS                    | GPS        | Global Positioning System                             |
+| GVPN                   | GVPN       | Government Virtual Private Network                    |
+| HS                     | HSYS       | Harmonized System                                     |
+| HSK                    | HSK        | Harmonized System Korea                               |
+| HTML                   | HTML       | Hypertext Markup Language                             |
+| ID                     |            |                                                       |
+| IEA                    | IEA        | International Energy Agency                           |
+| IP                     | IP         | Internet Protocol                                     |
+| IPCC                   | IPCC       | Intergovernmental Panel On Climate Change             |
+| ISBN                   |            |                                                       |
+| JSON                   | JSON       | Javascript Object Notation                            |
+| KTSN                   | KTSN       | Korea Taxonomic Serial Number                         |
+| LAN                    | LAN        | Local Area Network                                    |
+| LULUCF                 | LULUCF     | Land Use, Land Use Change And Forestry                |
+| MAC                    | MAC        | Medium Access Control                                 |
+| MMS                    | MMS        | Multimedia Messaging Service                          |
+| MOU                    |            |                                                       |
+| NCBI                   | NCBI       | National Center For Biotechnology Information         |
+| NULL                   |            |                                                       |
+| OCR                    | OCR        | Optical Character Reader                              |
+| OECD                   | OECD       | Organization For Economic Cooperation And Development |
+| PC                     |            |                                                       |
+| PDF                    | PDF        | Portable Document Format                              |
+| PG                     | PG         | Payment Gateway                                       |
+| PK                     |            |                                                       |
+| POS                    | POS        | Point Of Sales                                        |
+| QA                     | QA         | Quality Assurance                                     |
+| QC                     | QC         | Quality Control                                       |
+| QR코드                 | QRCD       | Quick Response Code                                   |
+| RFID                   | RFID       | Radio Frequency Identification                        |
+| RPA                    | RPA        | Robotics Process Automation                           |
+| RSS                    | RSS        | Really Simple Syndication                             |
+| RSSI                   | RSSI       | Received Signal Strength Indication                   |
+| SMS                    | SMS        | Short Message Service                                 |
+| SNS                    | SNS        | Social Networking Service                             |
+| SQL                    | SQL        | Structured Query Language                             |
+| SSID                   | SSID       | Service Set Identifier                                |
+| SSL                    | SSL        | Secure Sockets Layer                                  |
+| TMS                    | TMS        | Tele Monitoring System                                |
+| TV수신료               | TVSFE      | TV Subscription Fee                                   |
+| UID                    |            |                                                       |
+| UPS                    | UPS        | Uninterruptible Power Supply                          |
+| URI                    | URI        | Uniform Resource Identifier                           |
+| URL                    | URL        | Uniform Resource Locator                              |
+| USB                    | USB        | Universial Serial Bus                                 |
+| UUID                   | UUID       | Universal Unique Identifier                           |
+| VOC                    | VOC        | Voice Of Customer                                     |
+| VOD                    | VOD        | Video On Demand                                       |
+| WBS                    | WBS        | Work Breakdown Structure                              |
+| WRI                    | WRI        | World Resource Institute                              |
+| WSI                    | WSI        | Water Safety Index                                    |
+| X좌표                  | XCRD       | X-Coordinate                                          |
+| XML                    | XML        | Extensible Mark-Up Language                           |
+| Y좌표                  | YCRD       | Y-Coordinate                                          |
+| Z좌표                  | ZCRD       | Z-Coordinate                                          |
diff --git a/docs/auth-service-refactoring-guide.md b/docs/auth-service-refactoring-guide.md
new file mode 100644
index 000000000..8f06974e8
--- /dev/null
+++ b/docs/auth-service-refactoring-guide.md
@@ -0,0 +1,177 @@
+# 서비스별 인증 처리 리팩토링 가이드
+
+## 1) 문서 목적
+
+여러 서비스 앱에서 중복 구현된 인증 로직을 공통 모듈(`@common/auth`) 기반으로 통일하기 위한 표준 가이드
+
+핵심 원칙:
+
+- 인증 정책은 공통 모듈에 모은다.
+- 서비스별 차이는 설정(`authConfig`)으로만 표현한다.
+- 토큰 갱신 타이머는 JWT `exp` 기준으로 계산한다.
+
+## 2) 공통 아키텍처
+
+인증 관련 책임을 아래처럼 분리한다.
+
+- `shared/config/env.ts`: 환경 변수 노출
+- `shared/config/auth.ts`: 서비스별 인증 키/도메인 설정
+- `entities/auth/lib/token-manager.ts`: 공통 토큰 매니저 생성/re-export
+- `entities/auth/api/*`: 로그인/토큰 갱신 API 오케스트레이션
+- 레이아웃: BaseLayout 컴포넌트에 `tokenManager` 주입
+
+## 3) 단계별 리팩토링 방법
+
+### 3-1. 환경 변수 정의 통일 (`shared/config/env.ts`)
+
+서비스마다 이름이 다른 인증 환경 변수를 한 곳에서 노출한다.
+
+예시 코드:
+
+```ts
+export const CLAIM_NAME =
+  process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
+export const AUTH_USER_ID =
+  process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
+export const ACCESS_TOKEN =
+  process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
+export const REFRESH_TOKEN =
+  process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
+export const COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
+```
+
+### 3-2. 서비스별 인증 설정 분리 (`shared/config/auth.ts`)
+
+하드코딩된 키명을 제거하고 `AuthConfig`로 매핑한다.
+
+예시 코드:
+
+```ts
+import type { AuthConfig } from "@common/auth";
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  COOKIE_DOMAIN,
+  REFRESH_TOKEN,
+} from "./env";
+
+export const authConfig: AuthConfig = {
+  authUserId: AUTH_USER_ID,
+  claimName: CLAIM_NAME,
+  cookieDomain: COOKIE_DOMAIN,
+  accessToken: ACCESS_TOKEN,
+  refreshToken: REFRESH_TOKEN,
+};
+```
+
+### 3-3. 토큰 매니저 공통화 (`entities/auth/lib/token-manager.ts`)
+
+서비스 고유 `TokenManager` 구현을 제거하고 `createTokenManager`를 사용한다.
+
+예시 코드:
+
+```ts
+import { authConfig } from "@/shared/config/auth";
+import { createTokenManager } from "@common/auth";
+
+export const tokenManager = createTokenManager(authConfig);
+
+export const {
+  getToken,
+  setToken,
+  removeToken,
+  setupRefreshTimer,
+  clearAuthToken,
+  getAccessToken,
+  getRefreshToken,
+  getUserId,
+} = tokenManager;
+```
+
+### 3-4. 로그인 성공 처리 표준화 (`entities/auth/api/login-service.ts`)
+
+로그인 성공 시 토큰 저장과 자동 갱신 타이머 설정을 한 흐름으로 고정한다.
+
+예시 코드:
+
+```ts
+import { getRemainingMs } from "@common/auth";
+import { setToken, setupRefreshTimer } from "../lib/token-manager";
+
+async function onLoginSuccess(params: {
+  accessToken: string;
+  tokenId: string;
+  refresh: () => Promise<void>;
+}) {
+  setToken(authConfig.claimName, params.accessToken);
+  setToken(authConfig.authUserId, params.tokenId);
+
+  const remainingMs = getRemainingMs(params.accessToken);
+  if (remainingMs <= 0) return;
+
+  setupRefreshTimer(params.refresh, remainingMs);
+}
+```
+
+### 3-5. 토큰 갱신 실패 처리 표준화
+
+토큰 갱신 실패 시 인증 토큰을 일괄 정리한다.
+
+예시 코드:
+
+```ts
+import { clearAuthToken } from "../lib/token-manager";
+
+async function silentRefresh() {
+  try {
+    ...
+  } catch (error) {
+    clearAuthToken();
+    throw error;
+  }
+}
+```
+
+### 3-6. 공통 레이아웃/쉘에 토큰 매니저 주입
+
+공통 컴포넌트가 인증 기능을 직접 사용할 수 있도록 주입한다.
+
+예시 코드:
+
+```tsx
+import { tokenManager } from "@/entities/auth";
+
+export function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <BaseLayout
+      tokenManager={tokenManager}
+      ...
+    >
+      {children}
+    </BaseLayout>
+  );
+}
+```
+
+### 3-7. 배럴 파일 re-export 정리 (`entities/auth/index.ts`)
+
+외부에서 인증 엔티티를 일관된 경로로 사용하도록 re-export한다.
+
+예시 코드:
+
+```ts
+export { LoginApi } from "./api/login-service";
+export { AuthWrapper } from "./lib/auth-wrapper";
+export { tokenManager } from "./lib/token-manager";
+```
+
+## 4) 서비스별 적용 체크리스트
+
+각 서비스 담당자는 아래 항목을 모두 충족해야 한다.
+
+- `authConfig`에 서비스별 키명이 정확히 매핑되어 있다.
+- 서비스 내부 커스텀 TokenManager 클래스가 제거되었다.
+- 로그인/갱신 로직이 `getRemainingMs` 기반 타이머를 사용한다.
+- BaseLayout 컴포넌트에 `tokenManager`가 주입되어 있다.
+- 외부 참조 경로가 `entities/auth` 배럴 경로로 통일되어 있다.
diff --git a/docs/st/01.총평.md b/docs/st/01.총평.md
new file mode 100644
index 000000000..bcd057151
--- /dev/null
+++ b/docs/st/01.총평.md
@@ -0,0 +1,60 @@
+# ST 앱 총평 (Architecture Overview)
+
+> 하수도 통계 관리 시스템 (ST: Statistics) 프론트엔드 앱의 전체 구조 및 기술 평가 리포트
+
+---
+
+## 1. 앱 개요
+
+| 항목 | 내용 |
+|------|------|
+| **앱 이름** | `st` (Statistics) |
+| **목적** | 하수도 통계 관리 시스템 - 통계 입력, 검토, 승인, 관리 기능 제공 |
+| **프레임워크** | Next.js 15 (App Router) |
+| **언어** | TypeScript |
+| **패키지 관리** | pnpm Workspace (모노레포 구조) |
+
+---
+
+## 2. 전체 평가 요약
+
+### ✅ 강점
+
+1. **FSD(Feature-Sliced Design) 아키텍처 도입**  
+   `shared → entities → components → pages → app` 레이어 계층 구조를 적용하여 관심사 분리가 명확합니다.
+
+2. **서버 API 프록시 패턴 (Middleware)**  
+   Next.js Middleware를 활용해 백엔드 API 호출을 프록시 처리하므로, 클라이언트에서 직접 API 서버를 노출하지 않는 보안 구조를 갖추고 있습니다.
+
+3. **멀티 백엔드 분리 구조**  
+   일반 서버 API(`/server/*`)와 ST 전용 서비스(`st-management-service`, `st-input-service`) 경로를 분리하여 URL 기반 라우팅으로 독립성을 확보하였습니다.
+
+4. **글로벌 상태 관리 일관성**  
+   Zustand를 통한 전역 상태(사용자 정보, 메뉴, 알림, 탭)와 TanStack Query/SWR을 활용한 서버 상태 관리를 목적에 맞게 분리하였습니다.
+
+5. **재사용 가능한 공통 컴포넌트**  
+   `DataGrid`, `SearchForm`, `ApproveButton`, `RejectButton` 등 업무 공통 컴포넌트를 `components/module`에 집중하여 중복 개발을 최소화하였습니다.
+
+### ⚠️ 개선 권고 사항
+
+1. **데이터 페칭 라이브러리 혼용**  
+   SWR과 TanStack Query를 동시에 사용하고 있습니다. 용도 기준이 명확하지 않으면 유지보수 시 혼란이 생길 수 있습니다. 가급적 하나의 라이브러리로 통일하거나, 사용 기준을 문서화하는 것을 권장합니다.
+
+2. **미구현 업무 함수**  
+   일부 컴포넌트에서 `rejectFunc`, `approveFunc` 등의 함수가 빈 상태로 남아 있습니다. 서비스 커버리지 확인이 필요합니다.
+
+3. **`src/store` 와 `src/shared/store` 이중 스토어 경로**  
+   탭 관련 스토어(`tab-store`)가 `src/store`에, 그 외 공통 스토어는 `src/shared/store`에 나뉘어 있습니다. FSD 원칙상 `src/shared/store`로 통일하는 것을 권장합니다.
+
+---
+
+## 3. 문서 목차
+
+| 문서 | 내용 |
+|------|------|
+| [02.디렉토리구조.md](./02.디렉토리구조.md) | 전체 소스 폴더 구조 설명 |
+| [03.기술스택.md](./03.기술스택.md) | 사용 라이브러리 및 기술 상세 |
+| [04.아키텍처패턴.md](./04.아키텍처패턴.md) | FSD 아키텍처 구조 및 데이터 흐름 |
+| [05.상태관리.md](./05.상태관리.md) | Zustand 전역 상태 관리 패턴 |
+| [06.데이터페칭.md](./06.데이터페칭.md) | SWR / TanStack Query 데이터 페칭 패턴 |
+| [07.용어정리.md](./07.용어정리.md) | 프로젝트 주요 용어 정의 |
diff --git a/docs/st/02.디렉토리구조.md b/docs/st/02.디렉토리구조.md
new file mode 100644
index 000000000..479c974b5
--- /dev/null
+++ b/docs/st/02.디렉토리구조.md
@@ -0,0 +1,157 @@
+# 02. 디렉토리 구조
+
+ST 앱의 전체 폴더 구조와 각 디렉토리의 역할을 설명합니다.
+
+---
+
+## 루트 디렉토리 구조
+
+```
+apps/st/
+├── app/                    # Next.js App Router 라우팅 루트
+├── pages/                  # Next.js Pages Router (일부 페이지)
+├── src/                    # 소스 코드 메인 디렉토리
+├── public/                 # 정적 파일 (이미지, 아이콘 등)
+├── docs/                   # 앱 내부 문서
+├── middleware.ts           # Next.js 미들웨어 (API 프록시, 인증)
+├── next.config.ts          # Next.js 설정 파일
+├── tailwind.config.ts      # Tailwind CSS 설정
+├── tsconfig.json           # TypeScript 설정
+└── package.json            # 의존성 관리
+```
+
+---
+
+## `app/` - App Router 라우팅
+
+```
+app/
+├── (with-base-layout)/     # 공통 레이아웃을 공유하는 라우트 그룹
+├── api/                    # Next.js API Route Handler
+├── auth/                   # 인증 관련 페이지 (로그인 등)
+└── layout.tsx              # 앱 전체 루트 레이아웃
+```
+
+> **참고**: Next.js의 라우트 그룹 `(with-base-layout)`은 URL에는 영향을 주지 않고 레이아웃만 공유하는 방식입니다.
+
+---
+
+## `src/` - 소스 코드 (FSD 구조)
+
+FSD(Feature-Sliced Design) 아키텍처 원칙에 따라 레이어 계층이 구분되어 있습니다.
+
+```
+src/
+├── shared/                 # 레이어 1: 공통 기반 (어디서나 재사용 가능)
+├── entities/               # 레이어 2: 비즈니스 도메인 엔티티
+├── components/             # 레이어 3: UI 컴포넌트 (비즈니스 UI)
+├── pages/                  # 레이어 4: 페이지 컴포넌트
+├── store/                  # 앱 레벨 전역 상태 (tab 관리)
+└── app/                    # 앱 초기화 / 프로바이더 구성
+```
+
+---
+
+## `src/shared/` - 공통 기반 레이어
+
+```
+shared/
+├── api/
+│   └── client.ts           # Axios HTTP 클라이언트 인스턴스 (일반/ST서비스 분리)
+├── config/
+│   ├── api.ts              # API 엔드포인트 URL 상수
+│   └── env.ts              # 환경변수 로드 및 타입 관리
+├── lib/
+│   ├── use-mutation-wrapper.tsx    # TanStack Query useMutation 래퍼 (에러 공통 처리)
+│   ├── use-alert-store.ts          # Alert 전역 상태 훅
+│   ├── use-user-store.ts           # 사용자 정보 전역 상태 훅
+│   ├── use-menu-store.ts           # 메뉴 전역 상태 훅
+│   ├── use-attachment-store.ts     # 첨부파일 전역 상태 훅
+│   ├── use-mutation-wrapper.tsx    # Mutation 공통 에러 처리 래퍼
+│   ├── use-tus.ts                  # 대용량 파일 업로드 (TUS 프로토콜)
+│   ├── cookie.ts                   # 쿠키 유틸리티
+│   ├── match-query-status.ts       # SWR/Query 상태 매핑 유틸
+│   └── csp-monitor.ts              # CSP 보안 정책 모니터링
+├── model/                  # 공통 타입 정의
+├── providers/
+│   ├── store-provider.tsx  # Zustand 스토어 Provider
+│   └── prompt-provider.tsx # 모달 프롬프트 Provider
+├── store/
+│   ├── alert-store.ts      # 알림(Alert) 전역 상태
+│   ├── user-store.ts       # 사용자 정보 전역 상태
+│   ├── menu-store.ts       # 메뉴/권한 전역 상태
+│   └── attachment-store.ts # 첨부파일 전역 상태
+└── ui/                     # 공통 UI 원시 컴포넌트
+```
+
+---
+
+## `src/entities/` - 비즈니스 도메인 레이어
+
+각 도메인 별로 `api/`(서비스 호출)과 `model/`(타입 정의)로 구성됩니다.
+
+```
+entities/
+├── auth/                   # 인증 도메인
+├── code/                   # 공통 코드(코드 관리) 도메인
+├── menu/                   # 메뉴 도메인
+├── menu-authority/         # 메뉴 권한 도메인
+├── statistics/             # 통계 도메인
+│   ├── api/
+│   │   └── statistics-input-status-service.ts  # 통계 입력 현황 API 서비스
+│   └── model/
+│       └── statistics-input-status-interface.ts # 요청/응답 타입 정의
+└── user/                   # 사용자 도메인
+```
+
+---
+
+## `src/components/` - UI 컴포넌트 레이어
+
+업무 화면을 구성하는 UI 컴포넌트들이 위치합니다.
+
+```
+components/
+├── module/                 # 재사용 공통 업무 컴포넌트
+│   ├── DataGrid.tsx        # RealGrid 기반 메인 데이터 그리드 (57KB, 핵심 컴포넌트)
+│   ├── TabDataGrid.tsx     # 탭 형태 데이터 그리드
+│   ├── CompactDataGrid.tsx # 압축형 데이터 그리드
+│   ├── SearchForm.tsx      # 공통 검색 폼
+│   └── SplitDataGrid.tsx   # 분할형 데이터 그리드
+├── button/                 # 공통 버튼 컴포넌트
+│   ├── ApproveButton.tsx   # 승인 버튼
+│   └── RejectButton.tsx    # 반려 버튼
+├── statistics/             # 하수도 통계 관련 화면 컴포넌트
+│   ├── input/              # 통계 입력 관련 화면
+│   ├── management/         # 통계 관리 화면
+│   ├── review/             # 통계 검토 화면
+│   ├── total/              # 통계 합계 화면
+│   └── verification/       # 통계 검증 화면
+├── type/                   # 컴포넌트 타입 정의
+├── util/                   # 컴포넌트 유틸리티
+│   ├── column/             # DataGrid 컬럼 정의 모음
+│   └── grid/               # 그리드 관련 유틸 함수
+├── css/                    # 컴포넌트 전용 CSS
+└── Dashboard.tsx           # 대시보드 컴포넌트
+```
+
+---
+
+## `src/store/` - 앱 레벨 전역 상태
+
+```
+store/
+├── tab-store.ts            # 탭 UI 관리 (탭 목록, 현재 활성 탭)
+└── admin-store.ts          # 관리자 관련 상태
+```
+
+---
+
+## 주요 개별 파일
+
+| 파일 | 설명 |
+|------|------|
+| `middleware.ts` | API 프록시, JWT 토큰 헤더 주입, CSP 보안 헤더 설정 |
+| `next.config.ts` | 서브 도메인 리라이트, CSP 헤더 설정 |
+| `tailwind.config.ts` | Tailwind CSS 커스텀 테마 |
+| `.env.example` | 환경변수 예시 파일 |
diff --git a/docs/st/03.기술스택.md b/docs/st/03.기술스택.md
new file mode 100644
index 000000000..f61a35618
--- /dev/null
+++ b/docs/st/03.기술스택.md
@@ -0,0 +1,134 @@
+# 03. 기술 스택
+
+ST 앱에서 사용하는 라이브러리 및 기술 목록과 각각의 역할을 정리합니다.
+
+---
+
+## 핵심 프레임워크
+
+| 라이브러리 | 버전 | 역할 |
+|-----------|------|------|
+| **Next.js** | 15.3.8 | React 기반 풀스택 프레임워크. App Router + Pages Router 혼용. SSR, 라우팅, API Route, Middleware 제공 |
+| **React** | (Next.js 내장) | UI 컴포넌트 렌더링 기반 |
+| **TypeScript** | ^5 | 정적 타입 시스템으로 코드 안정성 확보 |
+
+---
+
+## 상태 관리
+
+| 라이브러리 | 버전 | 역할 |
+|-----------|------|------|
+| **Zustand** | ^5.0.3 | 전역 클라이언트 상태 관리 (사용자 정보, 메뉴, 탭, 알림 등) |
+| **SWR** | ^2.3.7 | 서버 상태 데이터 페칭 및 캐싱 (주로 조회성 데이터) |
+| **@tanstack/react-query** | ^5.67.1 | 서버 상태 mutation(생성/수정/삭제) 처리, devtools 포함 |
+
+---
+
+## 폼 및 유효성 검증
+
+| 라이브러리 | 버전 | 역할 |
+|-----------|------|------|
+| **react-hook-form** | ^7.54.2 | 성능 최적화된 폼 상태 관리 |
+| **@hookform/resolvers** | ^4.1.3 | react-hook-form과 Zod 연결 어댑터 |
+| **zod** | ^3.24.2 | 스키마 기반 런타임 유효성 검증 및 타입 추론 |
+
+---
+
+## HTTP 통신
+
+| 라이브러리 | 버전 | 역할 |
+|-----------|------|------|
+| **axios** | ^1.8.1 | Promise 기반 HTTP 클라이언트. 인터셉터를 통한 토큰 자동 주입 |
+| **tus-js-client** | ^4.3.1 | 대용량 파일 업로드 (TUS 프로토콜 - 재개 가능한 업로드) |
+
+---
+
+## UI 컴포넌트 & 스타일링
+
+| 라이브러리 | 버전 | 역할 |
+|-----------|------|------|
+| **Tailwind CSS** | ^3.4.1 | 유틸리티 기반 CSS 프레임워크 |
+| **tailwindcss-animate** | ^1.0.7 | Tailwind CSS 애니메이션 플러그인 |
+| **@radix-ui/react-label** | ^2.1.2 | 접근성을 고려한 Label 원시 컴포넌트 |
+| **@radix-ui/react-slot** | ^1.1.2 | Slot 기반 컴포넌트 합성 패턴 |
+| **@radix-ui/react-tooltip** | ^1.1.8 | 접근성 있는 툴팁 컴포넌트 |
+| **@radix-ui/react-icons** | ^1.3.2 | Radix UI 아이콘 세트 |
+| **lucide-react** | ^0.474.0 | 오픈소스 SVG 아이콘 라이브러리 |
+| **remixicon** | ^4.7.0 | 리믹스 아이콘 세트 |
+| **next-themes** | ^0.4.6 | 다크모드/라이트모드 테마 전환 |
+| **sonner** | ^2.0.1 | 경량 토스트(Toast) 알림 컴포넌트 |
+
+---
+
+## 데이터 그리드
+
+| 라이브러리 | 버전 | 역할 |
+|-----------|------|------|
+| **realgrid** | ^2.9.5 | 대용량 데이터 처리에 특화된 엔터프라이즈 그리드 라이브러리 |
+| **realgrid-react** | ^0.9.7 | RealGrid React 바인딩 |
+| **@tanstack/react-table** | ^8.21.2 | 헤드리스 테이블 라이브러리 (일부 보조 테이블에서 사용) |
+
+---
+
+## 차트 & 시각화
+
+| 라이브러리 | 버전 | 역할 |
+|-----------|------|------|
+| **chart.js** | ^4.4.8 | 기반 차트 라이브러리 |
+| **react-chartjs-2** | ^5.3.0 | Chart.js의 React 컴포넌트 래퍼 |
+| **chartjs-plugin-zoom** | ^2.2.0 | 차트 줌/팬 기능 플러그인 |
+
+---
+
+## 날짜 & 유틸리티
+
+| 라이브러리 | 버전 | 역할 |
+|-----------|------|------|
+| **dayjs** | ^1.11.13 | 경량 날짜 처리 라이브러리 |
+| **js-cookie** | ^3.0.5 | 쿠키 읽기/쓰기 유틸리티 |
+| **jszip** | ^3.10.1 | ZIP 파일 생성/압축 |
+| **xlsx** | ^0.18.5 | 엑셀 파일 읽기/쓰기 |
+
+---
+
+## 캘린더 & 드래그앤드롭
+
+| 라이브러리 | 버전 | 역할 |
+|-----------|------|------|
+| **@fullcalendar/react** | ^6.1.17 | 풀칼린더 React 컴포넌트 (일정/달력 UI) |
+| **@fullcalendar/daygrid** | ^6.1.17 | 월별 달력 뷰 |
+| **@fullcalendar/timegrid** | ^6.1.17 | 시간별 달력 뷰 |
+| **react-dnd** | ^16.0.1 | 드래그 앤 드롭 기능 |
+| **@minoru/react-dnd-treeview** | 3.5.1-alpha.1 | 트리 뷰 DnD 컴포넌트 |
+
+---
+
+## 에디터 & 기타
+
+| 라이브러리 | 버전 | 역할 |
+|-----------|------|------|
+| **@tinymce/tinymce-react** | ^5.1.1 | 리치 텍스트 에디터 (게시판 등) |
+| **next-qrcode** | ^2.5.1 | QR 코드 생성 |
+| **@faker-js/faker** | ^9.9.0 | 테스트용 가짜 데이터 생성 |
+
+---
+
+## 공유 패키지 (모노레포 내부)
+
+| 패키지 | 설명 |
+|-------|------|
+| `@common/assets` | 공통 이미지/아이콘 에셋 |
+| `@common/components` | 공통 React 컴포넌트 (LoadingWithAnimation 등) |
+| `@common/config` | 공통 설정값 |
+| `@rsone/components` | 내부 공통 DS(Design System) 컴포넌트 |
+
+---
+
+## 개발 도구
+
+| 도구 | 역할 |
+|------|------|
+| **steiger** | FSD 아키텍처 규칙 검사 도구 |
+| **prettier** | 코드 포맷터 |
+| **ESLint** | 코드 품질 검사 |
+| **@tanstack/react-query-devtools** | TanStack Query 개발자 도구 |
diff --git a/docs/st/04.아키텍처패턴.md b/docs/st/04.아키텍처패턴.md
new file mode 100644
index 000000000..3cdbf620b
--- /dev/null
+++ b/docs/st/04.아키텍처패턴.md
@@ -0,0 +1,155 @@
+# 04. 아키텍처 패턴
+
+ST 앱이 채택한 FSD(Feature-Sliced Design) 아키텍처 및 전체 데이터 흐름을 설명합니다.
+
+---
+
+## 1. FSD(Feature-Sliced Design) 아키텍처
+
+FSD는 레이어(Layer) 계층 간 단방향 의존성을 강제하는 프론트엔드 아키텍처 방법론입니다.  
+**"하위 레이어는 상위 레이어를 참조할 수 없다"** 는 규칙이 핵심입니다.
+
+```
+┌─────────────────────────────────────────┐
+│          app / pages (라우팅)            │  ← 최상위 (조합)
+├─────────────────────────────────────────┤
+│          components (업무 UI)            │
+├─────────────────────────────────────────┤
+│          entities (도메인 엔티티)         │  ← API 서비스 + 타입
+├─────────────────────────────────────────┤
+│          shared (공통 기반)              │  ← 최하위 (재사용)
+└─────────────────────────────────────────┘
+```
+
+각 레이어는 내부적으로 슬라이스(Slice)와 세그먼트(Segment)로 세분화됩니다.
+
+```
+레이어/슬라이스/세그먼트
+예시: entities/statistics/api/
+     entities/statistics/model/
+```
+
+---
+
+## 2. 레이어별 역할과 의존성 방향
+
+### 🔷 `shared` - 공통 기반 레이어
+- **역할**: 모든 레이어에서 공유 가능한 순수 유틸리티, API 클라이언트, 타입, 훅, 스토어 정의
+- **의존성**: 다른 레이어를 참조하지 않음 (최하위)
+- **주요 내용**: `client.ts`, `use-mutation-wrapper`, Zustand 스토어 정의, 환경변수 설정
+
+### 🔶 `entities` - 비즈니스 도메인 레이어
+- **역할**: 하나의 비즈니스 도메인(auth, menu, statistics 등)을 API 서비스와 타입으로 캡슐화
+- **의존성**: `shared`만 참조 가능
+- **주요 내용**: API 서비스 함수, 요청/응답 인터페이스 타입
+
+### 🟩 `components` - UI 컴포넌트 레이어  
+- **역할**: 업무 화면을 구성하는 React 컴포넌트. 서버 데이터 페칭 로직 포함
+- **의존성**: `shared`, `entities` 참조 가능
+- **주요 내용**: 화면별 컴포넌트, module 공통 컴포넌트(DataGrid, SearchForm 등)
+
+### 🟦 `app / pages` - 라우팅 레이어
+- **역할**: Next.js 라우팅 연결. 컴포넌트를 조합하여 최종 페이지 구성
+- **의존성**: 모든 하위 레이어 참조 가능
+
+---
+
+## 3. 미들웨어 기반 API 프록시 아키텍처
+
+클라이언트가 백엔드 API를 직접 호출하지 않고 **Next.js Middleware를 통해 프록시**합니다.
+
+```
+Browser
+  │
+  │  요청: /server/st-management-service/...
+  ▼
+Next.js Middleware (middleware.ts)
+  │
+  ├─ /server/st-management-service/* → ST 전용 백엔드 서버
+  ├─ /server/st-input-service/*      → ST 입력 서비스 서버
+  ├─ /server/*                       → 일반 백엔드 서버 (Spring Boot 등)
+  ├─ /attach-service/*               → 파일 첨부 서비스
+  └─ /api/link/*                     → 외부 링크 백엔드 API
+```
+
+**핵심 동작:**
+1. 요청 URL 경로(`pathname`)를 패턴 매칭
+2. 쿠키에서 JWT 토큰(`CLAIM_NAME`)과 사용자 ID(`AUTH_USER_ID`) 추출
+3. 해당 값을 요청 헤더에 주입 후 실제 백엔드로 URL 재작성(`NextResponse.rewrite`)
+4. 응답에 CSP 보안 헤더 추가
+
+---
+
+## 4. 멀티 백엔드 분리 구조
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    ST 프론트엔드 앱                       │
+│                                                         │
+│  src/shared/api/client.ts                               │
+│  ┌──────────────────┐   ┌──────────────────────────┐   │
+│  │   client         │   │   stClient                │   │
+│  │  (일반 API)       │   │  (ST 서비스 전용 API)     │   │
+│  └──────────────────┘   └──────────────────────────┘   │
+└─────────────────────────────────────────────────────────┘
+         │                           │
+         ▼                           ▼
+ 일반 백엔드 (Spring)          ST 전용 백엔드 서비스
+ BASE_URL                      ST_SERVICE_BASE_URL
+```
+
+---
+
+## 5. 컴포넌트 데이터 흐름
+
+통계 화면을 예시로 데이터 흐름을 설명합니다.
+
+```
+app/(with-base-layout)/...              ← 라우팅 진입
+         │
+         ▼
+components/statistics/input/
+  StatsInputStatusInp.tsx               ← 페이지 컴포넌트
+         │
+         ├── [검색 이벤트] handleSearch()
+         │          │
+         │          ▼
+         │   entities/statistics/api/
+         │     statistics-input-status-service.ts   ← API 서비스
+         │          │
+         │          ▼
+         │   shared/api/client.ts (stClient)         ← Axios 인스턴스
+         │          │
+         │          ▼
+         │   middleware.ts                           ← Next.js 프록시
+         │          │
+         │          ▼
+         │   ST 백엔드 API 서버
+         │
+         ├── [상태 관리] useSWR / useTabStore / useAlertStore
+         │
+         └── [렌더링] SearchForm + DataGrid(RealGrid) + 버튼
+```
+
+---
+
+## 6. 탭 기반 네비게이션 패턴
+
+ST 앱은 메뉴를 클릭하면 새 페이지로 이동하는 것이 아니라, **탭(Tab)을 추가하는 방식**으로 내비게이션이 동작합니다.
+
+```
+메뉴 클릭
+   │
+   ▼
+useTabStore.addTab()
+   │
+   ├── 이미 열린 탭이면 → 해당 탭 활성화 전환만
+   └── 새 탭이면 → 탭 목록에 추가 (최대 10개 제한)
+          │
+          ▼
+   activeTabId 변경
+          │
+          ▼
+   각 화면 컴포넌트:
+   useEffect([activeTabId]) → 탭 포커스 감지 → mutate() 데이터 갱신
+```
diff --git a/docs/st/05.상태관리.md b/docs/st/05.상태관리.md
new file mode 100644
index 000000000..4828e5be7
--- /dev/null
+++ b/docs/st/05.상태관리.md
@@ -0,0 +1,138 @@
+# 05. 상태 관리
+
+ST 앱의 상태 관리 전략과 Zustand 기반 전역 상태 설계를 설명합니다.
+
+---
+
+## 1. 상태 관리 전략 개요
+
+ST 앱은 상태의 **성격(클라이언트 vs 서버)**에 따라 다른 도구를 사용합니다.
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                     상태 관리 분리                       │
+├────────────────────────┬────────────────────────────────┤
+│  클라이언트 상태        │  서버 상태                     │
+│  (UI, 세션 데이터)     │  (API 응답 데이터)             │
+│                        │                                │
+│  ✅ Zustand            │  ✅ SWR (조회)                 │
+│                        │  ✅ TanStack Query (변경)      │
+└────────────────────────┴────────────────────────────────┘
+```
+
+---
+
+## 2. Zustand - 전역 클라이언트 상태
+
+Zustand는 보일러플레이트가 없는 경량 전역 상태 관리 라이브러리입니다.
+
+### 스토어 목록
+
+| 스토어 파일 | 관리 상태 | 주요 위치 |
+|------------|---------|---------|
+| `user-store.ts` | 로그인 사용자 정보 (이름, ID 등) | `shared/store/` |
+| `menu-store.ts` | 현재 메뉴 정보, BBS 설정, 페이지 권한 | `shared/store/` |
+| `alert-store.ts` | 전역 알림(Alert) 메시지 | `shared/store/` |
+| `attachment-store.ts` | 첨부파일 상태 | `shared/store/` |
+| `tab-store.ts` | 탭 목록 및 현재 활성 탭 | `store/` |
+| `admin-store.ts` | 관리자 관련 상태 | `store/` |
+
+---
+
+### 2-1. 스토어 생성 패턴
+
+**Vanilla 스토어 패턴** (`shared/store/` 내 스토어들):
+
+```typescript
+// shared/store/menu-store.ts
+import { createStore } from "zustand/vanilla";
+
+export const createMenuStore = (initState = defaultInitState) => {
+  return createStore<MenuStore>()((set) => ({
+    ...initState,
+    setCurrentMenuInfo: (menu) => set({ currentMenuInfo: menu }),
+    // ...
+  }));
+};
+```
+
+- `zustand/vanilla`를 사용하여 React에 종속되지 않는 순수 스토어를 생성
+- `store-provider.tsx`에서 React Context와 연결하여 컴포넌트에서 사용
+
+**React 스토어 패턴** (`store/tab-store.ts`):
+
+```typescript
+// store/tab-store.ts
+import { create } from "zustand";
+
+const useTabStoreHook = create<TabStore>((set, get) => ({
+  tabs: [],
+  activeTabId: null,
+  addTab: (menuItem) => { /* ... */ },
+  removeTab: (tabId) => { /* ... */ },
+}));
+
+export const useTabStore = useTabStoreHook;
+```
+
+- `create`를 사용하여 직접 React Hook 형태로 사용
+
+
+---
+
+### 2-2. 스토어 사용 패턴
+
+```typescript
+// 컴포넌트에서 사용
+const { setMessage: alert } = useAlertStore((state) => state);
+const activeTabId = useTabStore((state) => state.activeTabId);
+const userInfo = useUserStore((state) => state.userInfo);
+```
+
+> `(state) => state.xxx` 셀렉터 패턴을 사용하여 필요한 상태만 구독하고, 불필요한 리렌더링을 방지합니다.
+
+---
+
+## 3. tab-store 설계 - 탭 UI 관리
+
+탭 기반 내비게이션의 핵심 스토어입니다.
+
+### 주요 상태
+
+| 상태 | 타입 | 설명 |
+|------|------|------|
+| `tabs` | `Tab[]` | 현재 열린 탭 목록 |
+| `activeTabId` | `string \| null` | 현재 활성화된 탭 ID |
+| `menuList` | `MenuItem[] \| null` | 전체 메뉴 목록 |
+
+### 주요 액션
+
+| 액션 | 설명 |
+|------|------|
+| `addTab(menuItem)` | 탭 추가 (이미 있으면 활성화, 최대 10개 제한) |
+| `removeTab(tabId)` | 탭 닫기 (이전/다음 탭으로 자동 전환) |
+| `setActiveTab(tabId)` | 탭 활성화 전환 |
+| `closeAllTabs()` | 모든 탭 닫기 |
+| `closeOtherTabs(tabId)` | 현재 탭 외 모두 닫기 |
+
+---
+
+## 4. 화면 탭 포커스 감지 패턴
+
+각 화면 컴포넌트에서 탭 전환을 감지하여 데이터를 자동 갱신하는 패턴입니다.
+
+```typescript
+const activeTabId = useTabStore((state) => state.activeTabId);
+
+useEffect(() => {
+    // 이 컴포넌트의 탭이 활성화되면 데이터 새로고침
+    if (activeTabId === 'StatsInputStatusInp' && swrKey) {
+        mutate(swrKey);
+    }
+}, [activeTabId]);
+```
+
+**동작 원리:**
+1. `activeTabId`가 변경될 때마다 `useEffect`가 실행됨
+2. 현재 컴포넌트의 탭 ID와 일치하는지 확인
+3. 일치하면 SWR의 `mutate()`로 최신 데이터를 서버에서 다시 가져옴
diff --git a/docs/st/06.데이터페칭.md b/docs/st/06.데이터페칭.md
new file mode 100644
index 000000000..b2bc15929
--- /dev/null
+++ b/docs/st/06.데이터페칭.md
@@ -0,0 +1,152 @@
+# 06. 데이터 페칭
+
+ST 앱에서 서버 데이터를 가져오고 변경하는 패턴(SWR, TanStack Query)을 설명합니다.
+
+---
+
+## 1. 개요 - 두 가지 라이브러리 사용 이유
+
+| 구분 | 라이브러리 | 사용 목적 |
+|------|-----------|---------|
+| **조회 (Read)** | SWR | 데이터 조회, 캐싱, 자동 갱신 |
+| **변경 (Write)** | TanStack Query (`useMutation`) | 생성, 수정, 삭제 후 성공/실패 처리 |
+
+---
+
+## 2. SWR - 서버 데이터 조회 패턴
+
+SWR은 `stale-while-revalidate` 전략을 구현한 데이터 페칭 라이브러리입니다.  
+캐시된 데이터를 즉시 반환하면서 백그라운드에서 최신 데이터로 갱신합니다.
+
+### 기본 사용 패턴
+
+```typescript
+// 1. Fetcher 함수 정의 (key 배열을 인자로 받음)
+const getStatsInputStatusFetcher = async (
+  key: [string, StatsInputStatusListRequestParams]
+): Promise<StatsInputStatusListApiResponse> => {
+  return StatisticsInputStatusApi.getStatisticsInputStatusList(key[1]);
+};
+
+// 2. SWR Key 정의 (null이면 데이터 페칭 중지)
+const swrKey = searchParams
+  ? (["stats-input-status", searchParams] as const)
+  : null;
+
+// 3. useSWR 훅 사용
+const { isLoading } = useSWR<StatsInputStatusListApiResponse>(
+  swrKey,           // 키 (null이면 페칭 안 함)
+  getStatsInputStatusFetcher,
+  {
+    revalidateOnFocus: true,    // 탭 포커스 시 자동 갱신
+    onSuccess: (data) => {
+      if (data.status === "success" && data.data) {
+        setRowData(toGridRows(data.data));
+      } else {
+        alert(data.message ?? "조회에 실패했습니다.");
+      }
+    },
+    onError: () => {
+      alert("데이터 조회 중 오류가 발생했습니다.");
+    },
+  }
+);
+```
+
+### SWR Key 전략
+
+SWR Key는 데이터의 고유 식별자입니다.
+
+```typescript
+// 문자열 + 파라미터 배열 조합
+["stats-input-status", { ctpvNm: "서울", statsYr: "2024" }]
+```
+
+- **배열 형태**: Key의 첫 번째 요소는 식별 문자열, 두 번째는 파라미터 객체
+- **null Key**: 페칭 일시 정지 (조건부 페칭)
+- **객체가 달라지면**: 새로운 API 호출 트리거
+
+### `mutate` - 수동 캐시 무효화
+
+```typescript
+const { mutate } = useSWRConfig();
+
+// 특정 key의 데이터를 서버에서 다시 가져옴
+mutate(["stats-input-status", params]);
+```
+
+주로 두 가지 상황에서 사용합니다.
+1. **검색 버튼 클릭 시**: 새로운 파라미터로 즉시 조회
+2. **탭 포커스 시**: 화면으로 돌아왔을 때 데이터 갱신
+
+---
+
+## 3. TanStack Query - 데이터 변경 패턴
+
+생성, 수정, 삭제 등 서버 상태를 변경하는 작업에는 `useMutation`을 사용합니다.
+
+### `useMutationWrapper` - 공통 에러 처리 래퍼
+
+```typescript
+// shared/lib/use-mutation-wrapper.tsx
+export const useMutationWrapper = <TData, TError, TVariables, TContext>(
+  mutationOptions: UseMutationOptions<TData, TError, TVariables, TContext>
+) => {
+  const alert = useAlertStore((state) => state.setMessage);
+
+  return useMutation({
+    ...mutationOptions,
+    onError: (error) => {
+      // AxiosError 공통 에러 메시지 처리
+      if (error instanceof AxiosError) {
+        if (error.response?.data?.message) errorMessage += `...`;
+      }
+      alert(`${errorMessage}`);
+    },
+  });
+};
+```
+
+**설계 목적**: `onError` 공통 처리를 래퍼에서 중앙화하여, 각 컴포넌트에서 Axios 에러를 반복해서 처리하지 않아도 됩니다.
+
+### `mutateAsync` vs `mutate` 비교
+
+```typescript
+const { mutateAsync: createPost } = useMutationWrapper({
+  mutationFn: (data: PostFormData) => PostApi.createPost(data),
+  onSuccess: () => {
+    alert("등록되었습니다.", router.back);
+  },
+});
+```
+
+| 구분 | `mutate` | `mutateAsync` |
+|------|---------|---------------|
+| **반환값** | `void` | `Promise<TData>` |
+| **에러 처리** | `onError` 콜백만 가능 | `try/catch` 또는 `.catch()` 가능 |
+| **await 사용** | ❌ 불가 | ✅ 가능 |
+| **사용 시나리오** | 단순 저장 후 콜백 처리 | 자식 컴포넌트에 전달하거나 순서 제어 필요 시 |
+
+> `mutateAsync`를 쓰는 주된 이유: `<PostForm handleSave={createPost} />`처럼 하위 컴포넌트에 실행 함수를 전달할 때, 하위 컴포넌트가 완료 시점을 `await`로 기다릴 수 있어야 하기 때문입니다.
+
+---
+
+## 4. 패턴 요약 - 어떤 상황에서 무엇을 쓰나?
+
+```
+사용자 인터랙션 흐름
+   │
+   ├── [데이터 조회] 검색 버튼 클릭
+   │       └── setSearchParams() → SWR Key 변경 → useSWR 자동 재조회
+   │                                   또는
+   │                          mutate(swrKey) → 강제 재조회
+   │
+   ├── [데이터 저장/수정/삭제]
+   │       └── useMutationWrapper({ mutationFn: ... })
+   │               └── mutateAsync() / mutate() 호출
+   │                       ├── onSuccess: 성공 후처리 (Alert, 화면 이동 등)
+   │                       └── onError: 자동 공통 에러 Alert 표시
+   │
+   └── [탭 전환 시 데이터 갱신]
+           └── useEffect([activeTabId]) → mutate(swrKey)
+```
diff --git a/docs/st/07.용어정리.md b/docs/st/07.용어정리.md
new file mode 100644
index 000000000..1e29336d0
--- /dev/null
+++ b/docs/st/07.용어정리.md
@@ -0,0 +1,107 @@
+# 07. 용어 정리
+
+ST 앱 소스코드 및 문서에서 자주 등장하는 주요 용어를 알파벳·가나다 순으로 정리합니다.
+
+---
+
+## 아키텍처 & 패턴 용어
+
+| 용어 | 설명 |
+|------|------|
+| **FSD** (Feature-Sliced Design) | 레이어(Layer) 간 단방향 의존성을 강제하는 프론트엔드 아키텍처 방법론. `shared → entities → components → pages → app` 순으로 하위 레이어만 참조 가능 |
+| **App Router** | Next.js 13+에서 도입된 파일시스템 기반 라우팅 방식. `app/` 디렉토리를 사용하며 Server Component, Layout 등 최신 기능을 지원 |
+| **Pages Router** | Next.js의 기존 라우팅 방식. `pages/` 디렉토리를 사용 |
+| **Route Group** | Next.js App Router에서 `(폴더명)` 형태로 URL 경로에는 영향 없이 레이아웃만 공유하는 폴더. 예: `(with-base-layout)` |
+| **Middleware** | Next.js에서 요청이 실제 페이지/API에 도달하기 전에 실행되는 함수. `middleware.ts` 파일에 정의. 프록시, 인증 처리 등에 활용 |
+| **CSP** (Content Security Policy) | XSS 공격을 방지하기 위한 HTTP 보안 헤더. 어떤 리소스(이미지, 스크립트 등)를 로드할 수 있는지 정의 |
+| **Monorepo** | 여러 앱과 패키지를 하나의 저장소에서 관리하는 방식. pnpm Workspace를 사용하여 `@common/*`, `@rsone/*` 등 내부 패키지를 공유 |
+
+---
+
+## 상태 관리 용어
+
+| 용어 | 설명 |
+|------|------|
+| **Zustand** | 경량 전역 상태 관리 라이브러리. Redux보다 보일러플레이트가 적고, 훅 기반으로 사용이 간편함 |
+| **Store** | Zustand에서 상태(State)와 액션(Action)을 담고 있는 단위. `create()` 또는 `createStore()`로 생성 |
+| **Selector** | `useStore((state) => state.xxx)` 패턴으로 스토어에서 필요한 값만 구독하는 함수. 불필요한 리렌더링을 방지 |
+| **Vanilla Store** | `zustand/vanilla`의 `createStore()`로 생성한 React에 무관한 순수 스토어. Provider 패턴과 함께 사용 |
+| **activeTabId** | 현재 활성화(포커스)된 탭의 고유 ID. 각 화면 컴포넌트는 이 값을 감지하여 데이터를 자동 갱신함 |
+| **Tab** | 탭 UI의 단위 객체. `id`(탭 ID), `label`(탭명), `urlPath`(URL), `menuItem`(메뉴 정보) 를 포함 |
+
+---
+
+## 데이터 페칭 용어
+
+| 용어 | 설명 |
+|------|------|
+| **SWR** (Stale-While-Revalidate) | 캐시된 데이터를 즉시 반환하면서 백그라운드로 서버 데이터를 갱신하는 전략. 데이터 조회에 사용 |
+| **SWR Key** | SWR에서 데이터를 식별하고 캐싱하는 고유 키. `null`이면 페칭이 일시 중지됨. 보통 `[식별문자열, 파라미터]` 배열 형태 사용 |
+| **mutate** (SWR) | SWR 캐시를 수동으로 무효화하고 서버에서 최신 데이터를 즉시 가져오는 함수 |
+| **TanStack Query** | 서버 상태(비동기 데이터) 관리 라이브러리. 구 이름은 React Query. 캐싱, 리트라이, 데이터 동기화 등을 지원 |
+| **useMutation** | TanStack Query에서 데이터 생성/수정/삭제(Write) 작업에 사용하는 훅. `mutate`, `mutateAsync` 함수를 반환 |
+| **mutate** (TanStack Query) | `useMutation`이 반환하는 실행 함수. 반환값이 `void`이며, 결과는 콜백(`onSuccess`, `onError`)으로만 처리 가능 |
+| **mutateAsync** | `useMutation`이 반환하는 비동기 실행 함수. `Promise`를 반환하므로 `await`로 결과를 기다리거나 `try/catch`로 에러 처리 가능 |
+| **Fetcher** | SWR에서 데이터를 가져오는 비동기 함수. SWR Key를 인자로 받아 API를 호출하고 데이터를 반환 |
+| **Revalidation** | 캐시가 오래된 경우 서버에서 최신 데이터를 다시 가져오는 과정. SWR의 핵심 동작 원리 |
+| **invalidateQueries** | TanStack Query에서 특정 쿼리의 캐시를 무효화하여 자동 재조회를 유발하는 함수 |
+
+---
+
+## HTTP & API 용어
+
+| 용어 | 설명 |
+|------|------|
+| **Axios** | Promise 기반 HTTP 클라이언트. 인터셉터(Interceptor)를 통해 토큰 자동 주입, 에러 핸들링 등을 설정 가능 |
+| **AxiosError** | Axios에서 HTTP 에러(4xx, 5xx 응답 등) 발생 시 던지는 에러 객체. `error.response.data`로 서버 에러 메시지에 접근 가능 |
+| **API 프록시** | 클라이언트가 `/server/*` 경로로 요청하면 Middleware가 실제 백엔드 URL로 재작성(Rewrite)하는 패턴 |
+| **Rewrite** | Next.js Middleware 또는 `next.config.ts`에서 요청 URL을 다른 URL로 투명하게 변환하는 기능 |
+| **TUS 프로토콜** | 대용량 파일 업로드를 지원하는 개방형 프로토콜. 업로드 중 네트워크 오류가 발생해도 중단된 지점부터 재개(Resume) 가능 |
+| **stClient** | ST 전용 백엔드 서비스(`st-management-service`, `st-input-service`)와 통신하는 Axios 인스턴스 |
+| **client** | 일반 백엔드 API 서버와 통신하는 기본 Axios 인스턴스 |
+
+---
+
+## UI 컴포넌트 용어
+
+| 용어 | 설명 |
+|------|------|
+| **RealGrid** | 대용량 데이터 처리에 특화된 상용 엔터프라이즈 그리드 라이브러리. 인메모리 데이터 처리로 수십만 행도 빠르게 렌더링 가능 |
+| **DataGrid** | RealGrid를 기반으로 프로젝트 사양에 맞게 구현한 공통 그리드 컴포넌트 (`components/module/DataGrid.tsx`) |
+| **SearchForm** | 시도, 시군구, 연도, 사업장 등 공통 검색 조건을 가진 공유 폼 컴포넌트 |
+| **FullCalendar** | 월별·주별·시간별 달력 UI를 제공하는 오픈소스 캘린더 라이브러리 |
+| **TinyMCE** | 웹 기반 WYSIWYG 리치 텍스트 에디터. 게시판 본문 입력 등에 활용 |
+| **Radix UI** | 접근성(a11y)을 준수하는 헤드리스(스타일이 없는) UI 원시 컴포넌트 라이브러리 |
+| **Sonner** | 경량 토스트(Toast) 알림 컴포넌트 라이브러리 |
+
+---
+
+## 폼 & 유효성 검증 용어
+
+| 용어 | 설명 |
+|------|------|
+| **react-hook-form** | 비제어 컴포넌트(Uncontrolled Component) 방식으로 폼 상태를 관리하여 불필요한 리렌더링을 최소화하는 라이브러리 |
+| **Zod** | TypeScript 우선 스키마 선언 및 런타임 유효성 검증 라이브러리. 스키마 정의에서 TypeScript 타입을 자동 추론 |
+| **zodResolver** | react-hook-form과 Zod를 연결해주는 어댑터. 폼 제출 시 Zod 스키마로 자동 유효성 검증 |
+| **Schema** | Zod에서 데이터 구조와 유효성 규칙을 정의한 것. `postFormSchema`, `loginSchema` 등 |
+
+---
+
+## 업무 도메인 용어
+
+| 약어/영문 | 설명 |
+|---------|------|
+| **ST** | Statistics - 통계 관리 시스템 |
+| **ctpvNm** | 특별/광역시도명 (시도명) |
+| **sggNm** | 시군구명 |
+| **sewerBzmnCd** | 하수도 사업자 코드 |
+| **statsYr** | 통계 연도 |
+| **vrfcMthdCd** | 검증 방법 코드 |
+| **mngAuthrtYn** | 관리 권한 여부 |
+| **inqAuthrtYn** | 조회 권한 여부 |
+| **regAuthrtYn** | 등록 권한 여부 |
+| **mdfcnAuthrtYn** | 수정 권한 여부 |
+| **delAuthrtYn** | 삭제 권한 여부 |
+| **CLAIM_NAME** | JWT 토큰을 저장하는 쿠키/헤더 키 이름 |
+| **AUTH_USER_ID** | 사용자 ID를 저장하는 쿠키/헤더 키 이름 |
+| **SITE_ID** | 멀티 사이트 구분을 위한 사이트 식별자 |
diff --git a/docs/st/08.리얼그리드활용.md b/docs/st/08.리얼그리드활용.md
new file mode 100644
index 000000000..42dccf8f7
--- /dev/null
+++ b/docs/st/08.리얼그리드활용.md
@@ -0,0 +1,169 @@
+# 08. 리얼그리드(RealGrid) 활용
+
+ST 앱에서 사용하는 엔터프라이즈급 그리드 라이브러리인 **RealGrid 2**의 구현 방식과 주요 함수, 속성을 정리합니다.
+
+---
+
+## 1. 개요 및 구조
+
+ST 앱은 `realgrid-react`를 사용하여 리액트 환경에서 그리드를 구현하고 있으며, 공통 모듈인 `DataGrid.tsx`에서 복잡한 설정을 추상화하여 제공합니다.
+
+### 주요 컴포넌트
+- **`DataGrid.tsx`**: 가장 핵심이 되는 공통 그리드 컴포넌트.
+- **`TabDataGrid.tsx`**: 탭별로 독립적인 `DataGrid`를 렌더링.
+- **`SplitDataGrid.tsx`**: 좌우 5:5 분할 화면에 두 개의 그리드를 배치.
+- **`CompactDataGrid.tsx`**: 간소화된 형태의 그리드.
+
+---
+
+## 2. 주요 설정 및 속성 (Props)
+
+`DataGridProps` 인터페이스를 통해 그리드의 동작을 제어합니다.
+
+| 속성명 | 타입 | 설명 |
+|-------|------|------|
+| `columnInfo` | `ColumnInfo` | 컬럼 정의(`columns`)와 레이아웃(`columnLayout`) 정보 |
+| `rowData` | `Record[]` | 그리드에 표시할 실제 데이터 배열 |
+| `fixedColumns` | `number` | 좌측에 고정할 컬럼 수 |
+| `rowStartNum` | `number` | 엑셀 임포트 시 헤더가 시작되는 행 번호 |
+| `isExcelImport` | `boolean` | 엑셀 가져오기 버튼 표시 여부 |
+| `isExcelExport` | `boolean` | 엑셀 내보내기 버튼 표시 여부 |
+| `showHeaderCheckbox`| `boolean` | 헤더 체크박스(CheckBar) 표시 여부 |
+| `cellStyleCallback` | `Function` | 실시간 조건부 셀 스타일 적용 콜백 |
+| `cellTooltipCallback`| `Function` | 셀 호버 시 표시할 툴팁 메시지 콜백 |
+| `onRowClick` | `Function` | 행 클릭 시 실행될 이벤트 핸들러 |
+
+---
+
+## 3. 컬럼 정의 (`ColumnConfig`)
+
+`src/components/type/DataGrid.type.ts`에 정의된 주요 컬럼 속성입니다.
+
+```typescript
+export type ColumnConfig = {
+    name: string;          // 컬럼 고유 이름
+    fieldName: string;     // 데이터 필드명
+    header: { text: string }; // 헤더 표시 텍스트
+    width?: number;        // 컬럼 너비 (px)
+    editable?: boolean;    // 편집 가능 여부
+    visible?: boolean;     // 숨김 여부
+    styleName?: string;    // 적용할 CSS 클래스
+    mergeCells?: boolean;  // 셀 병합 여부 (내용이 같을 때)
+    valueType?: ValueType; // 데이터 타입 (TEXT, NUMBER 등)
+    footer?: FooterConfig; // 푸터 설정 (합계 등)
+    computed?: Computed;   // 계산 필드 설정 (합계/평균/비율 등)
+};
+```
+
+---
+
+## 4. 핵심 기능 구현 상세
+
+### 4-1. 커스텀 정렬 (`onSorting`)
+기본 정렬 사용 시 "시군구" 등 병합된 셀의 그룹 순서가 깨지는 문제를 해결하기 위해 전용 핸들러를 사용합니다.
+- **`createOnSortingHandler`**: 정렬 시 그룹(시군구) 내의 순서를 유지하며 그룹 간 정렬을 수행합니다.
+- **`createNumberComparer`**: 숫자에 포함된 쉼표(,)를 제거하고 순수 숫자 값으로 비교하여 정확한 정렬을 보장합니다.
+
+### 4-2. 계산 필드 (`Computed Field`)
+`dataProvider.setFields` 시 `valueCallback`을 통해 실시간 계산 값을 생성합니다.
+- **지원 유형**: 단순 합계(`sum`), 평균(`avg`), 보급률(`pblswrgPopltnSuprtRate`) 등 특수 비즈니스 로직.
+- **매커니즘**: `getComputedValueCallback` 유틸을 통해 여러 필드의 값을 조합하여 결과를 반환합니다.
+
+### 4-3. 엑셀 임포트/익스포트 (Smart Mapping)
+일반적인 그리드와 달리, 엑셀 파일과 그리드 간의 정확한 필드 매칭을 위해 특수한 기법을 사용합니다.
+- **익스포트 시**: 엑셀 헤더 텍스트 뒤에 `(fieldName)`을 임시로 붙여서 내보냅니다. (예: `인구수 (popltnCnt)`)
+- **임포트 시**: 정규표현식 `/\(([a-zA-Z0-9_]+)\)$/`을 사용하여 헤더에서 `fieldName`을 추출, 데이터 파싱 시 정확한 객체 키로 매핑합니다.
+
+### 4-4. 푸터(Footer) 및 레이아웃 합병
+- **`footerUserSpans`**: `columnLayout` 설정을 통해 푸터 영역에서 여러 셀을 하나로 합치는 기능을 지원합니다.
+- **멀티 푸터**: `gridView.setFooters`를 통해 2행 이상의 푸터를 설정하고, 각 행마다 다른 통계(합계, 평균 등)를 보여줍니다.
+
+---
+
+## 5. 자주 사용하는 유틸리티 함수
+
+### `toGridRows<T>`
+API 응답 객체 배열을 RealGrid가 처리하기 좋은 형태로 변환합니다.
+- `null` 또는 `undefined` 값을 빈 문자열(`""`)로 치환하여 그리드 상에서 `null` 문구가 노출되지 않도록 합니다.
+
+---
+
+## 6. 스타일 가이드 (`styleName`)
+
+그리드 셀에 적용되는 주요 CSS 클래스입니다 (프로젝트 관례).
+- `rg-cell-readonly`: 읽기 전용 셀 배경색 처리
+- `rg-cell-total`: 합계 행/열 강조
+- `rg-cell-error`: 검증 오류 발생 셀 (빨간색 테두리 등)
+- `rg-cell-required`: 필수 입력 셀 표시
+
+---
+
+## 7. RealGrid 원천 API 상세 (Native API)
+
+프로젝트 코드(`DataGrid.tsx`, `CompactDataGrid.tsx`)에서 실제로 호출하고 있는 RealGrid의 원천 함수와 속성 목록입니다.
+
+### 7-1. 전역 설정 (`realgrid`)
+- **`RealGrid.setLicenseKey(key: string)`**: 라이선스 키를 등록합니다.
+- **`ValueType`**: 필드 데이터 타입을 지정하는 열거형 (예: `ValueType.TEXT`, `ValueType.NUMBER`).
+- **`GridFitStyle`**: 그리드 너비 맞춤 스타일 (예: `GridFitStyle.EVEN`).
+
+### 7-2. 그리드 뷰 (`GridView`)
+그리드의 시각적 요소와 이벤트를 제어합니다.
+
+| API | 설명 |
+|-----|-----|
+| `setOptions(options)` | 그리드 전역 옵션 설정 (`checkBar.visible`, `summaryMode` 등) |
+| `setDisplayOptions(options)` | 화면 표시 상세 설정 (`fitStyle`, `rowHeight` 등) |
+| `setFixedOptions(options)` | 고정 컬럼 설정 (`colCount`) |
+| `setFooters(heights)` | 멀티 푸터 행들의 높이를 배열로 설정 |
+| `setColumns(columns)` | 컬럼 구성을 동적으로 재설정 |
+| `setColumnLayout(layout)` | 컬럼의 시각적 배치(그룹 헤더 등) 적용 |
+| `setColumnProperty(col, prop, val)` | 특정 컬럼의 속성(예: `renderer`)을 개별 변경 |
+| `exportGrid(options)` | 엑셀 파일 내보내기 실행 |
+| `setCurrent(index)` | 특정 행/셀로 포커스 이동 (`itemIndex` 사용) |
+| `setFocus()` | 그리드 자체에 포커스 부여 |
+| `refresh()` | 그리드 화면 강제 다시 그리기 (스타일 변경 시 유용) |
+| `columnByName(name)` | 이름으로 특정 컬럼 객체 반환 |
+
+**주요 이벤트 핸들러:**
+- `onSorting`: 정렬 시점 발생. (커스텀 그룹 정렬 구현 시 사용)
+- `onCellClicked`: 셀 클릭 시 발생. (행 선택 로직 구현)
+- `onShowTooltip`: 툴팁 표시 직전 발생. (동적 툴팁 내용 생성)
+
+### 7-3. 데이터 프로바이더 (`LocalDataProvider`)
+그리드 내부의 실제 데이터를 관리합니다.
+
+| API | 설명 |
+|-----|-----|
+| `setFields(fields)` | 데이터 필드(데이터 모델) 구조 정의 |
+| `setRows(rows)` | 전체 데이터 로드 |
+| `getRowCount()` | 전체 데이터 행 수 반환 |
+| `getValue(row, field)` | 특정 행/필드의 데이터 값 조회 |
+| `setDataComparer(field, fn)` | 특정 필드의 정렬 로직을 사용자 정의 함수로 위임 |
+
+---
+
+## 8. RealGrid-React 컴포넌트 (`realgrid-react`)
+
+### 8-1. `<RealGridReact />` (메인 컨테이너)
+- **`ref`**: 내부 `gridView`와 `dataProvider` 객체에 접근하기 위해 사용.
+- **`rows`**: 리액트 상태(`rowData`)를 그리드 데이터와 바인딩.
+- **`layout`**: 정의된 `columnLayout`을 적용.
+- **`autoGenerateField`**: `true` 설정 시 행 데이터를 바탕으로 필드를 자동 생성.
+- **`onInitialized(grid)`**: 그리드 초기화 완료 후 실행되는 콜백.
+
+### 8-2. `<RGDataColumn />` (컬럼 속성 정의)
+JSX 형태로 각 컬럼의 세부 속성을 설정합니다.
+
+| 주요 Props | 설명 |
+|-----------|-----|
+| `name` / `fieldName` | 컬럼/필드 식별자 |
+| `valueType` | 데이터 타입 (`TEXT`, `NUMBER`) |
+| `numberFormat` | 숫자 표시 형식 (예: `#,##0.000`) |
+| `header` | 헤더 설정 객체 (`{ text: "제목" }`) |
+| `editable` | 해당 컬럼의 편집 가능 여부 |
+| `styleName` | 해당 컬럼에 적용할 CSS 클래스명 |
+| `renderer` | 셀 렌더러 설정 (예: `{ showTooltip: true }`) |
+| `footer` | 푸터 합계/수식 설정 |
+| `mergeRule` | 셀 병합 규칙 (`{ criteria: "value" }`) |
+| `sortable` | 정렬 가능 여부 |
diff --git a/docs/st/10.FSD_구조하에_CS_프로그램.md b/docs/st/10.FSD_구조하에_CS_프로그램.md
new file mode 100644
index 000000000..36b402053
--- /dev/null
+++ b/docs/st/10.FSD_구조하에_CS_프로그램.md
@@ -0,0 +1,700 @@
+# 10. FSD 구조하에 CS 프로그램
+
+> **FSD(Feature-Sliced Design)**: 레이어(Layer) 간 단방향 의존성을 강제하는 프론트엔드 아키텍처 방법론.  
+> `shared → entities → widgets → pages → app` 순서로 **하위 레이어만 참조 가능**.
+
+---
+
+## 1. FSD란 무엇인가
+
+FSD(Feature-Sliced Design)는 기능 중심으로 코드를 조직화하는 프론트엔드 아키텍처입니다.  
+가장 중요한 원칙은 **"상위 레이어가 하위 레이어를 참조하고, 하위 레이어는 절대 상위 레이어를 참조할 수 없다"** 입니다.
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    app (애플리케이션 진입점)               │  ← 최상위: 모든 레이어 조합
+├─────────────────────────────────────────────────────────┤
+│                pages (Next.js 라우트 페이지)              │  ← 라우팅 연결 + 페이지 컴포넌트
+├─────────────────────────────────────────────────────────┤
+│                widgets (독립 UI 블록)                     │  ← 여러 entities 조합한 복합 UI
+├─────────────────────────────────────────────────────────┤
+│                entities (도메인 엔티티)                   │  ← 비즈니스 도메인 단위 캡슐화
+├─────────────────────────────────────────────────────────┤
+│                shared (공통 기반 인프라)                   │  ← 최하위: 재사용 가능한 순수 기능
+└─────────────────────────────────────────────────────────┘
+
+        ↑ 상위 레이어만 아래를 참조 (단방향)
+```
+
+### 레이어 내부 구조: 슬라이스(Slice) + 세그먼트(Segment)
+
+각 레이어는 `슬라이스(도메인/기능 단위)` → `세그먼트(역할 단위)`로 세분화됩니다.
+
+```
+레이어/슬라이스/세그먼트
+예시: entities/user/api/
+     entities/user/model/
+     entities/user/ui/
+     entities/user/index.ts   ← 공개 API (Public API)
+```
+
+---
+
+## 2. CS 앱 실제 디렉터리 구조
+
+### 전체 구조
+
+```
+apps/cs/
+├── app/                          # Next.js App Router (라우팅 레이어)
+│   ├── (auth)/                   # 인증 없는 공개 라우트
+│   │   └── login/
+│   ├── (main)/                   # 인증이 필요한 메인 라우트
+│   │   ├── layout.tsx            # 메인 레이아웃 래퍼
+│   │   ├── (with-base-layout)/   # 헤더/LNB 포함 레이아웃
+│   │   │   ├── layout.tsx        # BaseLayout + PageLayout 조합
+│   │   │   ├── users/            # 사용자 관리 라우트
+│   │   │   │   ├── page.tsx      # → UsersPage 컴포넌트 연결
+│   │   │   │   ├── register/
+│   │   │   │   └── [userUnqId]/
+│   │   │   ├── bbs/              # 게시판 관리 라우트
+│   │   │   ├── dashboard/
+│   │   │   ├── menu/
+│   │   │   └── ...
+│   │   └── (without-base-layout)/ # LNB 없는 전체화면
+│   └── api/                      # Next.js API Routes
+│
+├── src/                          # FSD 소스 레이어
+│   ├── app/                      # App 레이어 (글로벌 설정)
+│   │   ├── index.tsx             # App 루트 컴포넌트
+│   │   ├── providers/
+│   │   │   └── app-provider.tsx  # 전역 Provider 조합
+│   │   └── styles/               # 글로벌 CSS
+│   │
+│   ├── pages/                    # Pages 레이어 (페이지 컴포넌트)
+│   │   ├── users/
+│   │   │   ├── model/            # 테이블 컬럼 정의 등
+│   │   │   ├── ui/               # 페이지 컴포넌트
+│   │   │   └── index.ts          # Public API
+│   │   ├── bbs/
+│   │   ├── dashboard/
+│   │   ├── menu/
+│   │   ├── role/
+│   │   ├── site/
+│   │   └── ...
+│   │
+│   ├── widgets/                  # Widgets 레이어 (복합 UI 블록)
+│   │   ├── dnd-tree/             # 드래그앤드롭 트리 위젯
+│   │   ├── form-wrapper/         # 폼 래퍼 위젯
+│   │   └── post/                 # 게시물 관련 복합 위젯
+│   │
+│   ├── entities/                 # Entities 레이어 (도메인 엔티티)
+│   │   ├── auth/                 # 인증 도메인
+│   │   ├── user/                 # 사용자 도메인
+│   │   ├── board/                # 게시판 도메인
+│   │   ├── code/                 # 공통코드 도메인
+│   │   ├── menu/                 # 메뉴 도메인
+│   │   ├── role/                 # 권한 도메인
+│   │   ├── site/                 # 사이트 도메인
+│   │   ├── group/                # 그룹 도메인
+│   │   ├── organization/         # 조직 도메인
+│   │   ├── attachment/           # 파일첨부 도메인
+│   │   └── ...
+│   │
+│   └── shared/                   # Shared 레이어 (공통 기반)
+│       ├── api/                  # API 클라이언트
+│       ├── config/               # 환경변수, 엔드포인트 상수
+│       ├── lib/                  # 공통 커스텀 훅
+│       ├── model/                # 공통 타입 (PageableList 등)
+│       ├── providers/            # 공통 Context Provider
+│       ├── store/                # Zustand 스토어 정의
+│       └── ui/                   # CS 앱 전용 공통 UI 컴포넌트
+│
+├── packages/common/              # 모노레포 공통 패키지
+│   ├── components/               # @common/components - UI 컴포넌트 라이브러리
+│   ├── business_components/      # 업무용 공통 컴포넌트
+│   ├── auth/                     # @common/auth - 인증 유틸리티
+│   ├── network/                  # @common/network - 네트워크 유틸리티
+│   └── config/                   # 공통 설정
+│
+└── packages/rsone/               # 추가 공통 컴포넌트 패키지
+    └── components/
+```
+
+---
+
+## 3. 레이어별 상세 역할
+
+### 🔵 `shared` - 공통 기반 레이어
+
+**위치**: `src/shared/`  
+**의존성**: 다른 어떤 레이어도 참조하지 않음 (최하위)  
+**역할**: 앱 전체에서 재사용 가능한 순수 유틸리티, 인프라, 타입 정의
+
+| 세그먼트 | 경로 | 내용 |
+|--------|------|------|
+| `api` | `src/shared/api/` | Axios 인스턴스 (`client.ts`), 공통 request 설정 |
+| `config` | `src/shared/config/` | 환경변수(`env.ts`), API 엔드포인트 상수(`api.ts`), 인증 설정 |
+| `lib` | `src/shared/lib/` | 커스텀 훅 (`useDataTable`, `useUserStore`, `useMutationWrapper` 등) |
+| `model` | `src/shared/model/` | 공통 인터페이스 (`PageableList`, `PageableParams`) |
+| `store` | `src/shared/store/` | Zustand 스토어 정의 (`userStore`, `menuStore`, `alertStore`) |
+| `providers` | `src/shared/providers/` | Context Provider (`StoreProvider`, `PromptProvider`) |
+| `ui` | `src/shared/ui/` | 앱 전용 공통 UI (`AlertDialog`, `ConfirmDialog`, `PageLayout`, `GridViewDataTable` 등) |
+
+**코드 예시 (`src/shared/api/client.ts`)**:
+```typescript
+// @/shared/api 로 임포트
+import { client } from "@/shared/api";
+```
+
+---
+
+### 🟢 `entities` - 비즈니스 도메인 레이어
+
+**위치**: `src/entities/`  
+**의존성**: `shared`만 참조 가능  
+**역할**: 하나의 비즈니스 도메인(user, board, auth 등)을 API 서비스와 타입으로 캡슐화
+
+각 엔티티는 다음 세그먼트로 구성됩니다:
+
+```
+entities/user/
+├── api/
+│   └── user-service.ts     # API 서비스 클래스 (CRUD 메서드)
+├── model/
+│   └── user-interface.ts   # TypeScript 타입, Zod 스키마, 상수
+├── ui/
+│   └── password-reset-dialog.tsx  # 해당 도메인 전용 UI (선택적)
+└── index.ts                # Public API - 외부에서 사용할 것만 export
+```
+
+**코드 예시 (`src/entities/user/api/user-service.ts`)**:
+```typescript
+import { client } from "@/shared/api";           // shared 참조 OK
+import { ENDPOINT } from "@/shared/config";       // shared 참조 OK
+import type { UserService, UserSearchParams } from "../model/user-interface";
+
+export class UserApiService implements UserService {
+  public async findPageUser(params: UserSearchParams): Promise<UserList> {
+    const response = await client.get<UserList>(
+      `${ENDPOINT.USER_SERVICE.USERS}`,
+      { params },
+    );
+    return response.data;
+  }
+}
+```
+
+**엔티티 간 참조 (`@x` 패턴)**:  
+동일 레이어(entities) 내 다른 슬라이스를 참조할 때는 `@x` 폴더를 통해 명시적으로 허용합니다.
+
+```
+entities/board/@x/
+└── post.ts   # board 엔티티가 post 엔티티에서 필요한 것만 re-export
+```
+
+---
+
+### 🟡 `widgets` - 독립 UI 블록 레이어
+
+**위치**: `src/widgets/`  
+**의존성**: `shared`, `entities` 참조 가능  
+**역할**: 여러 entities를 조합하여 독립적으로 동작하는 복합 UI 블록
+
+| 슬라이스 | 내용 |
+|--------|------|
+| `dnd-tree` | 드래그앤드롭 트리 컴포넌트 (메뉴 관리 등에 활용) |
+| `form-wrapper` | 폼 공통 래퍼 (저장/취소 버튼 패턴 표준화) |
+| `post` | 게시물 관련 복합 UI 블록 |
+
+---
+
+### 🟠 `pages` - 페이지 컴포넌트 레이어
+
+**위치**: `src/pages/`  
+**의존성**: `shared`, `entities`, `widgets` 참조 가능  
+**역할**: 실제 화면 UI 구현. Next.js App Router의 `page.tsx`에서 이 컴포넌트를 import하여 연결
+
+각 페이지 슬라이스 구조:
+```
+pages/users/
+├── model/
+│   └── table-columns.tsx   # TanStack Table 컬럼 정의
+├── ui/
+│   ├── users-page.tsx      # 목록 페이지 메인 컴포넌트
+│   ├── create-page.tsx     # 등록 페이지
+│   ├── modify-page.tsx     # 수정 페이지
+│   ├── user-detail.tsx     # 상세 컴포넌트
+│   └── users-form.tsx      # 등록/수정 공통 폼
+└── index.ts                # Public API
+```
+
+**코드 예시 (`src/pages/users/ui/users-page.tsx`)**:
+```typescript
+import { UserApi } from "@/entities/user";        // entities 참조 OK
+import { CodeApi } from "@/entities/code";        // entities 참조 OK
+import { ENDPOINT } from "@/shared/config";       // shared 참조 OK
+import { useDataTable } from "@/shared/lib";      // shared 참조 OK
+import { Button } from "@common/components";      // 공통 패키지 참조 OK
+// ❌ import { something } from "@/app/...";      // 상위 레이어 참조 불가
+```
+
+---
+
+### 🔴 `app` - 애플리케이션 레이어
+
+**위치**: `src/app/`  
+**의존성**: 모든 하위 레이어 참조 가능  
+**역할**: 앱 초기화, 전역 Provider 설정, 글로벌 스타일 적용
+
+```typescript
+// src/app/providers/app-provider.tsx
+const AppProvider = ({ children }) => {
+  return (
+    <QueryClientProvider client={queryClient}>   // React Query 설정
+      <StoreProvider>                            // Zustand Store 초기화
+        <PromptProvider>
+          <ConfirmProvider>
+            <AuthWrapper>                        // entities/auth - 인증 처리
+              <MenuWrapper>                      // entities/menu - 메뉴 초기화
+                <DndProvider ...>
+                  {children}
+                </DndProvider>
+              </MenuWrapper>
+              <AlertDialog />                    // shared/ui - 전역 다이얼로그
+              <PromptDialog />
+              <ConfirmDialog />
+              <Toaster />
+            </AuthWrapper>
+          </ConfirmProvider>
+        </PromptProvider>
+      </StoreProvider>
+      <ReactQueryDevtools />
+    </QueryClientProvider>
+  );
+};
+```
+
+---
+
+## 4. Next.js App Router와 FSD 통합 방식
+
+Next.js App Router의 라우팅 파일(`app/` 디렉토리)과 FSD의 `pages` 레이어는 **별도로 분리**됩니다.
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  Next.js App Router (app/)                              │
+│                                                         │
+│  app/(main)/(with-base-layout)/users/page.tsx           │
+│  ┌─────────────────────────────────────────────────┐   │
+│  │  import { UsersPage } from "@/pages/users";     │   │
+│  │  export default UsersPage;                      │   │
+│  └─────────────────────────────────────────────────┘   │
+│                    │                                    │
+│                    │ (딱 1줄 연결)                       │
+└────────────────────┼────────────────────────────────────┘
+                     ▼
+┌─────────────────────────────────────────────────────────┐
+│  FSD pages 레이어 (src/pages/)                          │
+│                                                         │
+│  src/pages/users/ui/users-page.tsx                      │
+│  → 실제 화면 로직과 UI 구현                               │
+└─────────────────────────────────────────────────────────┘
+```
+
+**핵심 패턴**: `app/` 폴더의 `page.tsx`는 단순히 FSD `pages` 레이어 컴포넌트를 **re-export**만 합니다.
+
+```typescript
+// app/(main)/(with-base-layout)/users/page.tsx
+import { UsersPage } from "@/pages/users";
+export default UsersPage;  // 딱 1줄!
+```
+
+### 레이아웃 계층 구조
+
+```
+app/(main)/layout.tsx
+  └── App (src/app/index.tsx)
+       └── AppProvider (QueryClient, Auth, Menu, Store 등)
+
+app/(main)/(with-base-layout)/layout.tsx
+  └── BaseLayout (@common/components)     ← 헤더 + LNB
+       └── PageLayout (src/shared/ui)     ← 콘텐츠 영역
+            └── {children}               ← 각 page.tsx 컴포넌트
+```
+
+---
+
+## 5. 모노레포 패키지와의 관계
+
+CS 앱은 `packages/` 아래의 공통 패키지를 `shared` 레이어의 하위 개념으로 활용합니다.
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                      apps/cs                            │
+│                                                         │
+│  ┌──────────────────────────────────────────────────┐  │
+│  │  src/shared  (앱 전용 공통)                       │  │
+│  │  - @/shared/api    → Axios 클라이언트            │  │
+│  │  - @/shared/config → 엔드포인트 상수             │  │
+│  │  - @/shared/lib    → 커스텀 훅                   │  │
+│  │  - @/shared/ui     → 앱 전용 공통 UI             │  │
+│  └──────────────────────────────────────────────────┘  │
+│          ↑ 참조                                         │
+│  ┌──────────────────────────────────────────────────┐  │
+│  │  packages/common (모노레포 공통 패키지)            │  │
+│  │  - @common/components → 기반 UI 컴포넌트 라이브러리 │  │
+│  │  - @common/auth       → JWT, 쿠키 유틸리티       │  │
+│  │  - @common/network    → 에러 인터셉터, 리다이렉트  │  │
+│  └──────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────┘
+```
+
+| 패키지 | Import 경로 | 역할 |
+|--------|------------|------|
+| `packages/common/components` | `@common/components` | Button, Input, Table, Dialog 등 기반 UI |
+| `packages/common/auth` | `@common/auth` | JWT 파싱, getRemainingMs, 쿠키 관리 |
+| `packages/common/network` | `@common/network` | 401 에러 인터셉터, isAtLoginRedirectUrl |
+| `packages/rsone/components` | `@rsone/components` | 추가 UI 컴포넌트 |
+
+---
+
+## 6. 미들웨어 기반 API 프록시 아키텍처
+
+CS 앱은 클라이언트가 백엔드를 직접 호출하지 않고 **Next.js Middleware를 통해 프록시**합니다.
+
+```
+Browser (React 컴포넌트)
+   │
+   │  axios.get('/server/user-service/users')
+   ▼
+Next.js Middleware (middleware.ts)
+   │  - 쿠키에서 JWT 토큰 추출 → 요청 헤더에 주입
+   │  - URL 패턴 매칭 → 실제 백엔드 URL로 rewrite
+   │  - CSP 보안 헤더 추가
+   ▼
+실제 백엔드 API 서버 (Spring Boot)
+   │
+   └── 응답 반환
+```
+
+---
+
+## 7. 의존성 규칙 요약
+
+```
+❌ 금지: 하위 레이어 → 상위 레이어 참조
+✅ 허용: 상위 레이어 → 하위 레이어 참조
+
+shared     ─────────────────────────── (다른 레이어 참조 불가)
+entities   → shared
+widgets    → shared, entities
+pages      → shared, entities, widgets
+app        → shared, entities, widgets, pages
+```
+
+**동일 레이어 내 참조 규칙**:
+- `entities` 내 다른 슬라이스 참조 시: `@x` 폴더를 통해 명시적으로 허용
+- `pages` 내 다른 슬라이스 참조: 원칙적으로 금지 (widgets로 추출해야 함)
+
+---
+
+## 8. UI 추가 시 프로그램 UI 및 액션 흐름
+
+### 8-1. 신규 도메인 UI 추가 순서
+
+```
+Step 1: entities 레이어에 도메인 추가
+  src/entities/{도메인}/
+  ├── api/{도메인}-service.ts     ← API CRUD 클래스 작성
+  ├── model/{도메인}-interface.ts ← TypeScript 타입/인터페이스/Zod 스키마 정의
+  ├── ui/ (선택)                  ← 도메인 전용 UI (예: 검색 다이얼로그)
+  └── index.ts                   ← Public API export
+
+Step 2: pages 레이어에 페이지 컴포넌트 추가
+  src/pages/{도메인}/
+  ├── model/table-columns.tsx    ← 테이블 컬럼 정의 (TanStack Table)
+  ├── ui/{도메인}-page.tsx       ← 목록 페이지
+  ├── ui/create-page.tsx         ← 등록 페이지
+  ├── ui/modify-page.tsx         ← 수정 페이지
+  └── index.ts                   ← Public API export
+
+Step 3: Next.js 라우트 연결
+  app/(main)/(with-base-layout)/{도메인}/
+  ├── page.tsx                   ← import { XxxPage } from "@/pages/{도메인}"; export default XxxPage;
+  ├── register/page.tsx
+  └── [id]/page.tsx
+```
+
+### 8-2. 목록 페이지 UI 액션 흐름
+
+사용자 관리(`/users`) 페이지를 예시로 전체 액션 흐름을 설명합니다.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                    UsersPage (src/pages/users/ui/users-page.tsx) │
+│                                                                  │
+│  [초기 렌더링]                                                    │
+│  useQuery({ queryKey: [ENDPOINT.USER_SERVICE.USERS, ...] })      │
+│    └── UserApi.findPageUser(params) → 사용자 목록 API 호출        │
+│                                                                  │
+│  ┌──────────────────────────────────────────────────────────┐   │
+│  │  검색 폼 영역                                              │   │
+│  │  - 기간 선택: InputDateRangePicker (shared/ui)           │   │
+│  │  - 상태 선택: Select + CodeApi.getCodeList() (entities)  │   │
+│  │  - 키워드: Input (공통 컴포넌트)                           │   │
+│  │  - [검색] 버튼 → handleSubmit() → setSearchParams()      │   │
+│  │  - [초기화] 버튼 → handleReset() → 상태 초기화           │   │
+│  └──────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│  ┌──────────────────────────────────────────────────────────┐   │
+│  │  통계 현황 영역                                             │   │
+│  │  - useQuery(userSttsStats) → UserApi.selectUserSttsStats() │  │
+│  │  - 상태별 카운트 표시 (대기/정상/정지/탈퇴/삭제)            │   │
+│  └──────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│  ┌──────────────────────────────────────────────────────────┐   │
+│  │  데이터 테이블 영역 (useDataTable hook - shared/lib)       │   │
+│  │  - DataTable (@common/components) 렌더링                 │   │
+│  │  - 컬럼 정의: table-columns.tsx (pages/users/model/)     │   │
+│  │  - 행 클릭 → router.push('/users/{userUnqId}')           │   │
+│  │  - 페이지네이션 → setPagination() → 재쿼리               │   │
+│  └──────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│  [우상단 버튼]                                                    │
+│  - [등록] 버튼 → router.push('/users/register')                  │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+**액션 흐름 상세**:
+
+```
+[검색 버튼 클릭]
+      │
+      ▼
+handleSubmit(e)
+  e.preventDefault()
+  setPagination({ pageIndex: 0 })  ← 1페이지로 리셋
+  setSearchParams({                ← 검색 파라미터 업데이트
+    keywordType, keyword, userStateCode, ...
+  })
+      │
+      ▼ (React 상태 변경 → 리렌더링)
+useQuery 재실행 (queryKey에 searchParams 포함)
+      │
+      ▼
+UserApi.findPageUser(params)
+      │
+      ▼
+axios.get('/server/user-service/users?page=0&size=10&...')
+      │
+      ▼
+middleware.ts → JWT 헤더 주입 → 백엔드로 rewrite
+      │
+      ▼
+Spring Boot 백엔드 API
+      │
+      ▼ 응답
+DataTable 리렌더링
+```
+
+### 8-3. 등록/수정 페이지 UI 액션 흐름
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│              CreatePage / ModifyPage                          │
+│                                                               │
+│  [폼 초기화]                                                  │
+│  - react-hook-form useForm() 초기화                          │
+│  - Zod resolver로 유효성 검사 스키마 연결                      │
+│  - (수정 시) useQuery로 상세 데이터 로드 → form.reset()       │
+│                                                               │
+│  ┌─────────────────────────────────────────────────────┐    │
+│  │  입력 폼 (FormWrapper 위젯 or 직접 구성)              │    │
+│  │  - FormField + Input, Select, DatePicker 등          │    │
+│  │  - 유효성 에러 메시지 자동 표시                        │    │
+│  └─────────────────────────────────────────────────────┘    │
+│                                                               │
+│  [저장 버튼 클릭]                                             │
+│  form.handleSubmit(onSubmit)                                  │
+│    └── Zod 유효성 검사 통과 여부 확인                         │
+│         │                                                     │
+│         ├── 실패 → 에러 메시지 표시                           │
+│         └── 성공 → useMutationWrapper 실행                    │
+│                   → UserApi.saveUser(data) 호출               │
+│                   → 성공 시 목록 페이지 이동                  │
+│                   → 실패 시 AlertDialog 표시                  │
+└──────────────────────────────────────────────────────────────┘
+```
+
+**액션 흐름 상세**:
+
+```
+[저장 버튼 클릭]
+      │
+      ▼
+form.handleSubmit(onSubmit)
+      │
+      ├── Zod 유효성 검사 실패
+      │     └── 필드별 에러 메시지 표시 (react-hook-form)
+      │
+      └── Zod 유효성 검사 성공
+            │
+            ▼
+      useMutationWrapper / useMutation
+            │
+            ▼
+      UserApi.saveUser(data)  [entities/user/api]
+            │
+            ▼
+      axios.post('/server/user-service/users', data)
+            │
+            ▼
+      middleware.ts → JWT 주입 → 백엔드로 rewrite
+            │
+            ├── 성공 응답
+            │     ├── useAlertStore.showAlert('저장되었습니다')
+            │     ├── queryClient.invalidateQueries(...)  ← 캐시 무효화
+            │     └── router.push('/users')               ← 목록으로 이동
+            │
+            └── 실패 응답
+                  └── useAlertStore.showAlert(에러 메시지)
+```
+
+### 8-4. 전체 데이터 흐름 다이어그램
+
+```
+사용자 인터랙션 (브라우저 UI)
+        │
+        ▼
+app/(main)/.../(with-base-layout)/users/page.tsx
+  [Next.js App Router - 라우팅 진입점]
+        │ (re-export)
+        ▼
+src/pages/users/ui/users-page.tsx
+  [FSD pages 레이어 - 화면 컴포넌트]
+  - useState: 검색 파라미터, 페이지네이션 상태
+  - useQuery: 데이터 조회 (React Query)
+        │
+        ├──(UI 조합)──────────────────────────────┐
+        │                                         │
+        ▼                                         ▼
+@common/components                    src/shared/ui/
+  Button, Input, Select, DataTable      GridViewDataTable, InputDateRangePicker
+        │                                         │
+        └──────────────┬──────────────────────────┘
+                       │
+                       ▼
+              src/entities/user/api/user-service.ts
+              src/entities/code/api/code-service.ts
+              [FSD entities 레이어 - API 서비스]
+                       │
+                       ▼
+              src/shared/api/client.ts
+              [Axios 인스턴스]
+                       │
+                       ▼
+              middleware.ts
+              [Next.js Middleware - 프록시 + JWT 주입]
+                       │
+                       ▼
+              Spring Boot 백엔드 API
+                       │
+                       ▼ 응답 반환
+              React Query 캐시 업데이트
+                       │
+                       ▼
+              UI 리렌더링
+```
+
+### 8-5. 인증 및 메뉴 초기화 흐름
+
+```
+앱 최초 로드
+      │
+      ▼
+src/app/providers/app-provider.tsx (AppProvider)
+      │
+      ▼
+entities/auth/lib/auth-wrapper.tsx (AuthWrapper)
+      │
+      ├── 쿠키에서 JWT 토큰 확인
+      │     ├── 토큰 없음 → /login 리다이렉트
+      │     └── 토큰 있음
+      │           ├── getRemainingMs() → 남은 시간 계산
+      │           └── setupRefreshTimer() → 자동 갱신 타이머 설정
+      │
+      ├── /users/info/me API 호출 → 로그인 사용자 정보 조회
+      │     └── useUserStore.setUserInfo() → Zustand 전역 상태 저장
+      │
+      └── entities/menu/lib/menu-wrapper.tsx (MenuWrapper)
+            │
+            ├── 메뉴 목록 API 호출
+            └── useMenuStore → Zustand에 메뉴 데이터 저장
+                  │
+                  ▼
+            BaseLayout에 메뉴 렌더링 (LNB)
+                  │
+                  ▼
+            메뉴 클릭 → router.push(item.urlPath)
+            → 해당 page.tsx로 이동
+```
+
+---
+
+## 9. 공통 패키지 (`packages/common`) 역할
+
+### `packages/common/components` → `@common/components`
+
+모든 앱에서 공유하는 기반 UI 컴포넌트 라이브러리:
+
+```
+components/src/ui/
+├── button/          # Button 컴포넌트 (variant: default, outline, ghost 등)
+├── input/           # Input 텍스트 입력
+├── select/          # Select 드롭다운
+├── data-table/      # DataTable (TanStack Table 기반 페이지네이션 테이블)
+├── dialog/          # Dialog 모달
+├── date-picker/     # DatePicker 날짜 선택
+├── sidebar/         # Sidebar (LNB)
+├── header/          # Header 헤더
+├── lnb/             # LNB 좌측 네비게이션
+├── layout/          # BaseLayout (Header + LNB + Content 조합)
+├── tree/            # Tree 트리 컴포넌트
+├── pagination/      # Pagination 페이지네이션
+├── tabs/            # Tabs 탭
+├── badge/           # Badge 배지
+└── ...
+```
+
+### `packages/common/business_components` (업무용 공통 컴포넌트)
+
+```
+business_components/src/ui/
+├── form/            # Form 공통 래퍼
+├── table/           # 업무용 테이블
+├── search_form/     # 검색 폼 레이아웃
+├── date_picker/     # 업무용 날짜 선택
+├── excel/           # 엑셀 다운로드 버튼
+├── file-upload/     # 파일 업로드
+├── map/             # 지도 컴포넌트
+└── ...
+```
+
+---
+
+## 10. FSD 준수 체크리스트
+
+새로운 기능을 추가할 때 다음 사항을 확인합니다:
+
+| 체크 항목 | 기준 |
+|----------|------|
+| ✅ `shared`에 비즈니스 로직 없음 | shared는 순수 유틸/인프라만 포함 |
+| ✅ `entities`가 `pages`를 import 안 함 | 단방향 의존성 준수 |
+| ✅ `entities` 간 참조는 `@x` 폴더 사용 | 명시적 교차 참조 |
+| ✅ `app/page.tsx`는 re-export만 함 | 1줄 연결 패턴 |
+| ✅ 각 슬라이스에 `index.ts` 존재 | Public API 캡슐화 |
+| ✅ 타입은 `model/` 세그먼트에 위치 | 타입 중앙화 |
+| ✅ API 호출은 `entities/api/` 세그먼트에 위치 | 서비스 분리 |
+| ✅ 전역 상태는 `shared/store/`에 정의 | 스토어 중앙화 |
+| ✅ 복수 entities 조합 UI는 `widgets`로 추출 | 레이어 역할 준수 |
diff --git a/ecosystem.config.js b/ecosystem.config.js
index 497e040bc..80a252714 100644
--- a/ecosystem.config.js
+++ b/ecosystem.config.js
@@ -52,6 +52,18 @@ module.exports = {
       error_file: './logs/cm-error.log',
       out_file: './logs/cm-out.log',
     },
+    {
+      ...common,
+      
+      name: 'as-app',
+      cwd: './apps/as',
+      
+      script: 'node_modules/next/dist/bin/next',
+      args: 'start -p 3003',
+      
+      error_file: './logs/cm-error.log',
+      out_file: './logs/cm-out.log',
+    },
     {
       ...common,
 
diff --git a/package.json b/package.json
index 7c0fdf369..872758b31 100644
--- a/package.json
+++ b/package.json
@@ -8,28 +8,30 @@
     "apps/*",
     "packages/*"
   ],
-"scripts": {
-  "build": "turbo run build",
-  "build:common": "turbo run build --filter=@common/*",
-  "dev": "turbo run dev",
-  "build:cm": "turbo run build --filter=cm",
-  "build:cs": "turbo run build --filter=cs",
-  "build:sn": "turbo run build --filter=sn",
-  "build:wr": "turbo run build --filter=wr",
-  "build:fo": "turbo run build --filter=fo",
-  "build:dm": "turbo run build --filter=dm",
-  "build:dm_new": "turbo run build --filter=dm_new",
-  "dev:cm": "turbo run dev --filter=cm",
-  "dev:cs": "turbo run dev --filter=cs",
-  "dev:sn": "turbo run dev --filter=sn",
-  "dev:wr": "turbo run dev --filter=wr",
-  "dev:fo": "turbo run dev --filter=fo",
-  "dev:dm": "turbo run dev --filter=dm",
-  "dev:dm_new": "turbo run dev --filter=dm_new",
-  "preview:components": "turbo run storybook --filter=@common/components",
-  "preinstall": "npx only-allow pnpm",
-  "prepare": "husky"
-},
+  "scripts": {
+    "build": "turbo run build",
+    "build:common": "turbo run build --filter=@common/*",
+    "dev": "turbo run dev",
+    "build:as": "turbo run build --filter=as",
+    "build:cm": "turbo run build --filter=cm",
+    "build:cs": "turbo run build --filter=cs",
+    "build:sn": "turbo run build --filter=sn",
+    "build:wr": "turbo run build --filter=wr",
+    "build:fo": "turbo run build --filter=fo",
+    "build:dm": "turbo run build --filter=dm",
+    "build:st": "turbo run build --filter=st",
+    "dev:as": "turbo run dev --filter=as",
+    "dev:cm": "turbo run dev --filter=cm",
+    "dev:cs": "turbo run dev --filter=cs",
+    "dev:sn": "turbo run dev --filter=sn",
+    "dev:wr": "turbo run dev --filter=wr",
+    "dev:fo": "turbo run dev --filter=fo",
+    "dev:dm": "turbo run dev --filter=dm",
+    "dev:st": "turbo run dev --filter=st",
+    "preview:components": "turbo run storybook --filter=@common/components",
+    "preinstall": "npx only-allow pnpm",
+    "prepare": "husky"
+  },
   "dependencies": {
     "chart.js": "^4.4.8",
     "react": "^19.2.1",
@@ -39,6 +41,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@next/eslint-plugin-next": "^15.3.8",
     "@types/node": "^22.13.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
diff --git a/packages/common/auth/README.md b/packages/common/auth/README.md
new file mode 100644
index 000000000..5cd54d787
--- /dev/null
+++ b/packages/common/auth/README.md
@@ -0,0 +1,492 @@
+# @common/auth
+
+인증 관련 공통 기능을 제공하는 독립 패키지입니다. 의존성 주입 패턴을 통해 각 앱의 환경변수를 주입받아 재사용 가능한 토큰 관리 기능을 제공합니다.
+
+## 특징
+
+- **의존성 주입**: 환경변수를 직접 참조하지 않고 설정 객체를 주입받음
+- **재사용성**: 모든 앱에서 동일한 로직 사용 가능
+- **타입 안정성**: TypeScript 인터페이스로 계약 보장
+- **테스트 가능성**: Mock 설정 주입으로 단위 테스트 용이
+
+## 패키지 구조
+
+```
+packages/common/auth/
+├── package.json          # 패키지 정의
+├── tsconfig.json         # TypeScript 설정
+├── index.ts             # 진입점 (Public API)
+├── types.ts             # 타입 정의
+├── token-manager.ts     # 토큰 관리 로직
+├── cookie.ts           # 쿠키 유틸리티
+├── jwt-utils.ts        # JWT 유틸리티
+└── README.md           # 문서
+```
+
+## 설치
+
+각 앱의 `package.json`에 의존성을 추가합니다:
+
+```json
+{
+  "dependencies": {
+    "@common/auth": "workspace:*"
+  }
+}
+```
+
+## 사용 방법
+
+### 1. 설정 파일 생성
+
+각 앱에서 자신의 환경변수로 `AuthConfig` 객체를 생성합니다.
+
+```typescript
+// apps/cs/src/shared/config/auth.ts
+import type { AuthConfig } from "@common/auth/types";
+
+export const authConfig: AuthConfig = {
+  authUserId: process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id",
+  claimName: process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization",
+  cookieDomain: process.env.NEXT_PUBLIC_COOKIE_DOMAIN,
+  accessToken: process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token",
+  refreshToken: process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token",
+};
+```
+
+### 2. TokenManager 인스턴스 생성
+
+설정을 주입하여 토큰 매니저 인스턴스를 생성합니다.
+
+```typescript
+// apps/cs/src/entities/auth/lib/token-manager.ts
+import { createTokenManager } from "@common/auth";
+import { authConfig } from "@/shared/config/auth";
+
+export const tokenManager = createTokenManager(authConfig);
+
+// 편의를 위한 re-export
+export const {
+  getToken,
+  setToken,
+  removeToken,
+  setupRefreshTimer,
+  clearAuthToken,
+  getAccessToken,
+  getRefreshToken,
+  getUserId,
+} = tokenManager;
+```
+
+### 3. 컴포넌트에서 사용
+
+```typescript
+// apps/cs/src/features/auth/ui/LoginForm.tsx
+import { tokenManager } from "@/entities/auth/lib/token-manager";
+import { authConfig } from "@/shared/config/auth";
+
+export function LoginForm() {
+  const handleLogin = async (credentials: LoginCredentials) => {
+    const response = await loginApi(credentials);
+    
+    // 토큰 저장
+    tokenManager.setToken(authConfig.claimName, response.accessToken);
+    tokenManager.setToken(authConfig.refreshToken, response.refreshToken);
+    
+    // 또는 편의 메서드 사용
+    // tokenManager.getAccessToken();
+    // tokenManager.getRefreshToken();
+    // tokenManager.getUserId();
+  };
+
+  return (
+    // ... JSX
+  );
+}
+```
+
+## API 문서
+
+### `createTokenManager(config: AuthConfig): TokenManager`
+
+토큰 매니저 인스턴스를 생성하는 팩토리 함수입니다.
+
+**Parameters:**
+- `config: AuthConfig` - 인증 설정 객체
+
+**Returns:**
+- `TokenManager` - 토큰 관리 메서드를 포함한 객체
+
+### TokenManager 메서드
+
+#### `getToken(key: string): string | undefined`
+
+지정된 키의 쿠키 값을 가져옵니다.
+
+```typescript
+const token = tokenManager.getToken("access-token");
+```
+
+#### `setToken(key: string, value: string): void`
+
+토큰을 쿠키에 저장합니다. 자동으로 도메인, secure, sameSite 설정을 적용합니다.
+
+```typescript
+tokenManager.setToken("access-token", "eyJhbGc...");
+```
+
+#### `removeToken(key: string): void`
+
+지정된 키의 쿠키를 삭제합니다.
+
+```typescript
+tokenManager.removeToken("access-token");
+```
+
+#### `setupRefreshTimer(callback: () => Promise<void>, delayMs: number): void`
+
+토큰 갱신 타이머를 설정합니다.
+
+```typescript
+tokenManager.setupRefreshTimer(async () => {
+  await refreshAccessToken();
+}, 3600000); // 1시간 후
+```
+
+#### `clearAuthToken(): void`
+
+모든 인증 토큰을 삭제하고 타이머를 정리합니다.
+
+```typescript
+tokenManager.clearAuthToken();
+```
+
+#### `getAccessToken(): string | undefined`
+
+액세스 토큰을 가져오는 편의 메서드입니다.
+
+```typescript
+const accessToken = tokenManager.getAccessToken();
+```
+
+#### `getRefreshToken(): string | undefined`
+
+리프레시 토큰을 가져오는 편의 메서드입니다.
+
+```typescript
+const refreshToken = tokenManager.getRefreshToken();
+```
+
+#### `getUserId(): string | undefined`
+
+사용자 ID 토큰을 가져오는 편의 메서드입니다.
+
+```typescript
+const userId = tokenManager.getUserId();
+```
+
+### JWT 유틸리티
+
+#### `getJwtExpiry(token: string): number | null`
+
+JWT 토큰의 만료 시간(Unix timestamp, 초 단위)을 반환합니다.
+
+```typescript
+import { getJwtExpiry } from "@common/auth";
+
+const expiry = getJwtExpiry(token);
+if (expiry) {
+  console.log("Token expires at:", new Date(expiry * 1000));
+}
+```
+
+#### `getRemainingMs(token: string): number`
+
+토큰 만료 1분 전까지 남은 시간(밀리초)을 반환합니다.
+
+```typescript
+import { getRemainingMs } from "@common/auth";
+
+const remaining = getRemainingMs(token);
+if (remaining > 0) {
+  console.log("Token valid for:", remaining, "ms");
+}
+```
+
+### 쿠키 유틸리티
+
+#### `getCookie(name: string): string | undefined`
+
+쿠키 값을 가져옵니다.
+
+```typescript
+import { getCookie } from "@common/auth";
+
+const value = getCookie("my-cookie");
+```
+
+#### `setCookie(name: string, value: string, options?: CookieOptions): void`
+
+쿠키를 설정합니다.
+
+```typescript
+import { setCookie } from "@common/auth";
+
+setCookie("my-cookie", "value", {
+  secure: true,
+  sameSite: "lax",
+  path: "/",
+});
+```
+
+#### `removeCookie(name: string, options?: CookieOptions): void`
+
+쿠키를 삭제합니다.
+
+```typescript
+import { removeCookie } from "@common/auth";
+
+removeCookie("my-cookie", { path: "/" });
+```
+
+## 타입 정의
+
+### `AuthConfig`
+
+```typescript
+interface AuthConfig {
+  authUserId: string;        // 사용자 ID 토큰 키
+  claimName: string;         // 액세스 토큰 키
+  cookieDomain?: string;     // 쿠키 도메인 (선택)
+  accessToken?: string;      // 액세스 토큰 키 (선택)
+  refreshToken?: string;     // 리프레시 토큰 키 (선택)
+}
+```
+
+### `CookieOptions`
+
+```typescript
+interface CookieOptions {
+  secure?: boolean;
+  sameSite?: "strict" | "lax" | "none";
+  domain?: string;
+  path?: string;
+  expires?: number | Date;
+}
+```
+
+## 마이그레이션 가이드
+
+### 기존 앱에서 @common/auth로 마이그레이션
+
+#### 1. 의존성 추가
+
+```bash
+# 앱 디렉토리에서
+cd apps/your-app
+```
+
+`package.json`에 추가:
+```json
+{
+  "dependencies": {
+    "@common/auth": "workspace:*"
+  }
+}
+```
+
+```bash
+pnpm install
+```
+
+#### 2. 설정 파일 생성
+
+```typescript
+// apps/your-app/src/shared/config/auth.ts
+import type { AuthConfig } from "@common/auth/types";
+
+export const authConfig: AuthConfig = {
+  authUserId: process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id",
+  claimName: process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization",
+  cookieDomain: process.env.NEXT_PUBLIC_COOKIE_DOMAIN,
+  accessToken: process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token",
+  refreshToken: process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token",
+};
+```
+
+#### 3. TokenManager 수정
+
+**Before (기존 코드):**
+```typescript
+// apps/your-app/src/entities/auth/lib/token-manager.ts
+import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config";
+import { getCookie, setCookie, removeCookie } from "@/shared/lib";
+
+export function getToken(key: string): string | undefined {
+  return getCookie(key);
+}
+
+export function clearAuthToken(): void {
+  removeToken(CLAIM_NAME);
+  removeToken(AUTH_USER_ID);
+}
+```
+
+**After (@common/auth 사용):**
+```typescript
+// apps/your-app/src/entities/auth/lib/token-manager.ts
+import { createTokenManager } from "@common/auth";
+import { authConfig } from "@/shared/config/auth";
+
+export const tokenManager = createTokenManager(authConfig);
+
+// 기존 코드와의 호환성을 위한 re-export
+export const {
+  getToken,
+  setToken,
+  removeToken,
+  setupRefreshTimer,
+  clearAuthToken,
+  getAccessToken,
+  getRefreshToken,
+  getUserId,
+} = tokenManager;
+```
+
+#### 4. 사용처 업데이트
+
+**클래스 기반 (st, cm 앱):**
+```typescript
+// Before
+import { TokenManager } from "@/entities/auth/lib/token-manager";
+const tokenManager = TokenManager.getInstance();
+
+// After
+import { tokenManager } from "@/entities/auth/lib/token-manager";
+// 그대로 사용 가능
+```
+
+**함수형 (cs 앱):**
+```typescript
+// Before
+import { getToken, setToken, clearAuthToken } from "@/entities/auth/lib/token-manager";
+
+// After
+import { getToken, setToken, clearAuthToken } from "@/entities/auth/lib/token-manager";
+// 그대로 사용 가능 (re-export 덕분)
+```
+
+## 다른 앱에서 사용 예시
+
+### AS 앱
+
+```typescript
+// apps/as/src/shared/config/auth.ts
+import type { AuthConfig } from "@common/auth/types";
+
+export const authConfig: AuthConfig = {
+  authUserId: process.env.NEXT_PUBLIC_AS_AUTH_USER_ID || "as-token-id",
+  claimName: process.env.NEXT_PUBLIC_AS_CLAIM_NAME || "X-AS-Auth",
+  cookieDomain: process.env.NEXT_PUBLIC_AS_COOKIE_DOMAIN,
+  accessToken: process.env.NEXT_PUBLIC_AS_ACCESS_TOKEN || "as-access-token",
+  refreshToken: process.env.NEXT_PUBLIC_AS_REFRESH_TOKEN || "as-refresh-token",
+};
+```
+
+### ST 앱
+
+```typescript
+// apps/st/src/shared/config/auth.ts
+import type { AuthConfig } from "@common/auth/types";
+
+export const authConfig: AuthConfig = {
+  authUserId: process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id",
+  claimName: process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization",
+  cookieDomain: ".hasuon.or.kr", // 하드코딩된 도메인도 설정으로 이동
+  accessToken: process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token",
+  refreshToken: process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token",
+};
+```
+
+## 환경변수 설정
+
+각 앱의 `.env.local` 파일:
+
+```bash
+# CS 앱
+NEXT_PUBLIC_CLAIM_NAME=Authorization
+NEXT_PUBLIC_ACCESS_TOKEN=access-token
+NEXT_PUBLIC_REFRESH_TOKEN=refresh-token
+NEXT_PUBLIC_AUTH_USER_ID=token-id
+NEXT_PUBLIC_COOKIE_DOMAIN=.example.com
+
+# AS 앱 (다른 설정 사용 가능)
+NEXT_PUBLIC_AS_CLAIM_NAME=X-AS-Auth
+NEXT_PUBLIC_AS_ACCESS_TOKEN=as-access-token
+NEXT_PUBLIC_AS_REFRESH_TOKEN=as-refresh-token
+NEXT_PUBLIC_AS_AUTH_USER_ID=as-token-id
+NEXT_PUBLIC_AS_COOKIE_DOMAIN=.as.example.com
+```
+
+## 테스트 예시
+
+```typescript
+import { createTokenManager } from "@common/auth";
+import type { AuthConfig } from "@common/auth/types";
+
+describe("TokenManager", () => {
+  const mockConfig: AuthConfig = {
+    authUserId: "test-user-id",
+    claimName: "test-claim",
+    cookieDomain: ".test.com",
+    accessToken: "test-access",
+    refreshToken: "test-refresh",
+  };
+
+  it("should create token manager with config", () => {
+    const tokenManager = createTokenManager(mockConfig);
+    expect(tokenManager).toBeDefined();
+    expect(tokenManager.getToken).toBeDefined();
+  });
+
+  it("should use injected config", () => {
+    const tokenManager = createTokenManager(mockConfig);
+    // 테스트 로직...
+  });
+});
+```
+
+## 주의사항
+
+1. **환경변수는 빌드 타임에 주입됩니다**: `process.env.NEXT_PUBLIC_*` 값은 빌드 시점에 정적으로 치환됩니다.
+
+2. **쿠키 도메인 자동 감지**: `cookieDomain`을 설정하지 않으면 자동으로 현재 호스트명을 사용합니다.
+   - `localhost` / `127.0.0.1`: 도메인 설정 안 함
+   - 기타: 현재 호스트명 사용
+
+3. **HTTPS 자동 감지**: `secure` 옵션은 현재 프로토콜에 따라 자동 설정됩니다.
+
+4. **타이머 관리**: `setupRefreshTimer`는 이전 타이머를 자동으로 정리합니다.
+
+## 문제 해결
+
+### TypeScript 오류: "Cannot find module '@common/auth'"
+
+1. `pnpm install` 실행
+2. TypeScript 서버 재시작
+3. `tsconfig.json`의 `paths` 설정 확인
+
+### 쿠키가 저장되지 않음
+
+1. 브라우저 개발자 도구에서 쿠키 확인
+2. `cookieDomain` 설정 확인
+3. HTTPS 환경에서 `secure: true` 확인
+
+### 토큰이 다른 앱에서 공유되지 않음
+
+1. `cookieDomain` 설정이 공통 도메인(예: `.example.com`)인지 확인
+2. 각 앱의 토큰 키 이름이 다른지 확인 (충돌 방지)
+
+## 라이선스
+
+ISC
diff --git a/packages/common/auth/cookie.ts b/packages/common/auth/cookie.ts
new file mode 100644
index 000000000..8f5d0011b
--- /dev/null
+++ b/packages/common/auth/cookie.ts
@@ -0,0 +1,29 @@
+import Cookies from "js-cookie";
+
+export function getCookie(name: string): string | undefined {
+  if (typeof window === "undefined") {
+    return undefined;
+  }
+  return Cookies.get(name);
+}
+
+export function setCookie(
+  name: string,
+  value: string,
+  options?: Cookies.CookieAttributes,
+): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  Cookies.set(name, value, options);
+}
+
+export function removeCookie(
+  name: string,
+  options?: Cookies.CookieAttributes,
+): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  Cookies.remove(name, options);
+}
diff --git a/packages/common/auth/index.ts b/packages/common/auth/index.ts
new file mode 100644
index 000000000..04fb01bb4
--- /dev/null
+++ b/packages/common/auth/index.ts
@@ -0,0 +1,7 @@
+export { createTokenManager } from "./token-manager";
+export type { TokenManager } from "./token-manager";
+
+export { getCookie, setCookie, removeCookie } from "./cookie";
+export { getJwtExpiry, getRemainingMs } from "./jwt-utils";
+
+export type { AuthConfig, CookieOptions } from "./types";
diff --git a/packages/common/auth/jwt-utils.ts b/packages/common/auth/jwt-utils.ts
new file mode 100644
index 000000000..05d2b0ff8
--- /dev/null
+++ b/packages/common/auth/jwt-utils.ts
@@ -0,0 +1,32 @@
+interface JwtPayload {
+  exp?: number;
+  [key: string]: unknown;
+}
+
+/**
+ * JWT 토큰의 exp 클레임(Unix timestamp, 초 단위)을 반환합니다.
+ * 파싱 실패 시 null을 반환합니다.
+ */
+export function getJwtExpiry(token: string): number | null {
+  try {
+    const base64Payload = token.split(".")[1];
+    if (!base64Payload) return null;
+
+    const payload = JSON.parse(atob(base64Payload)) as JwtPayload;
+    return typeof payload.exp === "number" ? payload.exp : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * 토큰 만료 1분 전까지 남은 시간(ms)을 반환합니다.
+ * 이미 만료됐거나 파싱 실패 시 0을 반환합니다.
+ */
+export function getRemainingMs(token: string): number {
+  const exp = getJwtExpiry(token);
+  if (!exp) return 0;
+
+  const remainingMs = exp * 1000 - Date.now() - 60_000;
+  return Math.max(0, remainingMs);
+}
diff --git a/packages/common/auth/package.json b/packages/common/auth/package.json
new file mode 100644
index 000000000..4baa26d35
--- /dev/null
+++ b/packages/common/auth/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@common/auth",
+  "version": "1.0.0",
+  "private": true,
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "dependencies": {
+    "js-cookie": "^3.0.5"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^22.13.1",
+    "typescript": "^5.7.2"
+  }
+}
diff --git a/packages/common/auth/token-manager.ts b/packages/common/auth/token-manager.ts
new file mode 100644
index 000000000..fed36c366
--- /dev/null
+++ b/packages/common/auth/token-manager.ts
@@ -0,0 +1,76 @@
+import { getCookie, removeCookie, setCookie } from "./cookie";
+import type { AuthConfig } from "./types";
+
+export function createTokenManager(config: AuthConfig) {
+  let refreshTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const getCookieDomain = (): string | undefined => {
+    if (typeof window === "undefined") return undefined;
+
+    if (config.cookieDomain) return config.cookieDomain;
+
+    return undefined;
+  };
+
+  return {
+    getToken(key: string): string | undefined {
+      return getCookie(key);
+    },
+
+    setToken(key: string, value: string): void {
+      const domain = getCookieDomain();
+      const isHttps =
+        typeof window !== "undefined" && window.location.protocol === "https:";
+
+      setCookie(key, value, {
+        secure: isHttps,
+        sameSite: "lax",
+        domain,
+        path: "/",
+      });
+    },
+
+    removeToken(key: string): void {
+      const domain = getCookieDomain();
+      removeCookie(key, { domain, path: "/" });
+    },
+
+    setupRefreshTimer(callback: () => Promise<void>, delayMs: number): void {
+      if (refreshTimer) {
+        clearTimeout(refreshTimer);
+      }
+
+      refreshTimer = setTimeout(() => {
+        callback().catch((error) => {
+          console.error("Silent refresh timer callback failed:", error);
+        });
+      }, delayMs);
+    },
+
+    clearAuthToken(): void {
+      if (refreshTimer) {
+        clearTimeout(refreshTimer);
+        refreshTimer = null;
+      }
+
+      this.removeToken(config.claimName);
+      this.removeToken(config.authUserId);
+    },
+
+    getAccessToken(): string | undefined {
+      return this.getToken(config.claimName);
+    },
+
+    getRefreshToken(): string | undefined {
+      return config.refreshToken
+        ? this.getToken(config.refreshToken)
+        : undefined;
+    },
+
+    getUserId(): string | undefined {
+      return this.getToken(config.authUserId);
+    },
+  };
+}
+
+export type TokenManager = ReturnType<typeof createTokenManager>;
diff --git a/packages/common/auth/tsconfig.json b/packages/common/auth/tsconfig.json
new file mode 100644
index 000000000..04a0208c5
--- /dev/null
+++ b/packages/common/auth/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/common/auth/types.ts b/packages/common/auth/types.ts
new file mode 100644
index 000000000..077eb821f
--- /dev/null
+++ b/packages/common/auth/types.ts
@@ -0,0 +1,15 @@
+export interface AuthConfig {
+  authUserId: string;
+  claimName: string;
+  cookieDomain?: string;
+  accessToken?: string;
+  refreshToken?: string;
+}
+
+export interface CookieOptions {
+  secure?: boolean;
+  sameSite?: "strict" | "lax" | "none";
+  domain?: string;
+  path?: string;
+  expires?: number | Date;
+}
diff --git a/packages/common/business_components/README.md b/packages/common/business_components/README.md
index 3cda94c58..108752b6b 100644
--- a/packages/common/business_components/README.md
+++ b/packages/common/business_components/README.md
@@ -1,8 +1,13 @@
 ## business_components 패키지
-### 원앤올에서 제공받는 컴포넌트 외에 업무 파트에서 사용할 수 있는 별도 components 패키지지
+
+### 원앤올에서 제공받는 컴포넌트 외에 업무 파트에서 사용할 수 있는 별도 components 패키지
+
+> 하수관로 운영관리 시스템 `sn` 작업에서는 이 패키지만 직접 수정 가능한 공통 비즈니스 컴포넌트 범위이다. `@common/components`, `@common/network`, `@common/auth`, `@common/config` 수정이 필요해 보이면 직접 수정하지 말고 원인과 영향 범위를 먼저 정리한다.
+
 &emsp; 1) 환경설정
 
 &emsp; &emsp; (1) tsconfig.json 'path'에 '@common/business_components' 변수를 추가
+
 ```json
 "paths": {
   "@/*": ["./*"],
@@ -13,16 +18,19 @@
   "@common/business_components": ["../../packages/common/business_components/src/index"]
 }
 ```
+
 &emsp; &emsp; (2) package.json 'dependencies'에 '@common/business_components' 추가
+
 ```json
 "dependencies": {
   "@common/business_components": "workspace:*",
-  "next": "15.3.6"
+  "next": "15.5.18"
 },
 ```
 
 &emsp; &emsp; (3) tailwind.config.ts 추가
-``` json
+
+```json
 content: [
   "./app/**/*.{js,ts,jsx,tsx,mdx}",
   "../../packages/common/components/src/ui/**/*.{js,ts,jsx,tsx,mdx}",
@@ -30,4 +38,3 @@ content: [
   "../../packages/common/business_components/src/ui/**/*.{js,ts,jsx,tsx,mdx}",
 ],
 ```
-
diff --git a/packages/common/business_components/src/chart.md b/packages/common/business_components/src/chart.md
index f2d989375..f8ade24b7 100644
--- a/packages/common/business_components/src/chart.md
+++ b/packages/common/business_components/src/chart.md
@@ -31,14 +31,14 @@ const chartData = [
   { label: "June", val: 214},
 ]
 ```
-&emsp; &emsp; &emsp; (4) Chart생성에 필요한 chartConfig 정의
+&emsp; &emsp; &emsp; (4) Chart 생성에 필요한 chartConfig 정의
 ``` js
 /**
  * 차트 Config
  */
-const chartConfig = chartData.reduce((config,>>element) => {
-      label: element.label,
+const chartConfig = chartData.reduce((config, element) => {
     config[element.label] = {
+      label: element.label,
       color : "hsl(var(--chart-1))"
     };
     return config;
@@ -51,4 +51,4 @@ return (
       <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData}></MainChart>
     </div>
   );
-```
\ No newline at end of file
+```
diff --git a/packages/common/business_components/src/form.md b/packages/common/business_components/src/form.md
index 4e9b786cf..0d1ff92fe 100644
--- a/packages/common/business_components/src/form.md
+++ b/packages/common/business_components/src/form.md
@@ -1,6 +1,6 @@
 ## form 모듈
 
-### 공통 모듈 중 chart를 다양한 테마로 적용시킬 수 있도록 해주는 모듈
+### 공통 모듈 중 업무 화면의 입력 폼과 검증 흐름을 구성할 수 있도록 해주는 모듈
 
 &emsp; 1. 폼 모듈 사용법
 
@@ -11,7 +11,7 @@ https://zod.dev/?id=introduction
 
 &emsp; &emsp; 1-2) 호출방법
 
-&emsp; &emsp; &emsp; (1) form에 필요한 Form,FormField,useForm useForm,z, zodResolver import
+&emsp; &emsp; &emsp; (1) form에 필요한 Form, FormField, useForm, z, zodResolver import
 
 ```js
 import {
diff --git a/packages/common/business_components/src/ui/excel/excelStyle.tsx b/packages/common/business_components/src/ui/excel/excelStyle.tsx
index 221e1387c..1a654775c 100644
--- a/packages/common/business_components/src/ui/excel/excelStyle.tsx
+++ b/packages/common/business_components/src/ui/excel/excelStyle.tsx
@@ -70,7 +70,8 @@ export const excelStyleWithKoreanHeaders = async (
   range: string = "A1:V3", 
   fileNm: string,
   headerMapping: { [key: string]: string },
-  sampleData: any
+  sampleData: any,
+  mergeRanges?: string[]
 ) => {
   const workbook = await XlsxPopulate.Workbook.fromData(data);
   const sheet = workbook.activeSheet();
@@ -83,7 +84,7 @@ export const excelStyleWithKoreanHeaders = async (
   const englishHeaders = Object.keys(sampleData);
   englishHeaders.forEach((englishHeader, index) => {
     const koreanHeader = headerMapping[englishHeader] || englishHeader;
-    const cellAddress = String.fromCharCode(65 + index) + '1'; // A1, B1, C1, ...
+    const cellAddress = `${getExcelColumnLetter(index + 1)}1`;
     sheet.cell(cellAddress).value(koreanHeader);
   });
 
@@ -98,13 +99,20 @@ export const excelStyleWithKoreanHeaders = async (
   const numRows = sheet.usedRange()?.endCell()?.rowNumber() || 1;
   
   if (numRows > 1) {
-    const dataRange = sheet.range(`A1:${String.fromCharCode(65 + numCols - 1)}${numRows}`);
+    const lastColLetter = getExcelColumnLetter(numCols);
+    const dataRange = sheet.range(`A1:${lastColLetter}${numRows}`);
     dataRange?.style((styleQ) => {
       styleQ.verticalAlignment("center");
       styleQ.borderEach({ style: "thin", color: { rgb: "CCCCCC" } });
     });
   }
 
+  if (mergeRanges && mergeRanges.length > 0) {
+    mergeRanges.forEach((mergeRange) => {
+      sheet.range(mergeRange).merged(true);
+    });
+  }
+
   // 4. 파일 다운로드
   await makeExcelFile(workbook, fileNm);
 };
diff --git a/packages/common/business_components/src/ui/excel/index.tsx b/packages/common/business_components/src/ui/excel/index.tsx
index 23dfd0fea..ef753f976 100644
--- a/packages/common/business_components/src/ui/excel/index.tsx
+++ b/packages/common/business_components/src/ui/excel/index.tsx
@@ -246,7 +246,7 @@ export const filePickedArray=(oFile: File, headerNum:number=0):Promise<JSON[] |
       wb.SheetNames.forEach(function (sheetName) {
           const sheet = wb.Sheets[sheetName];
           if (sheet) {
-            console.log(sheet)
+            // console.log(sheet)
             jsonXls = XLSX.utils.sheet_to_json(sheet, { range: headerNum, raw:false }) as unknown as JSON;
             arrayXls.push(jsonXls)
           } else {
@@ -407,6 +407,7 @@ type ExcelDownloadWithHeaderProps = {
   sheetNameArray: string[];
   headerRange?: string;
   headerMapping: { [key: string]: string };
+  mergeRanges?: string[];
 }
 
 export const downloadExcelWithKoreanHeaders = async ({ 
@@ -414,7 +415,8 @@ export const downloadExcelWithKoreanHeaders = async ({
   fileName = new Date().getTime().toString() + '.xlsx', 
   sheetNameArray = ["Sheet1"], 
   headerRange = 'A1:V3',
-  headerMapping 
+  headerMapping,
+  mergeRanges,
 }: ExcelDownloadWithHeaderProps) => {
   
   const dataArray = Array.isArray(data) ? data : [data];
@@ -432,5 +434,5 @@ export const downloadExcelWithKoreanHeaders = async ({
   const buffer = XLSX.write(workbook, { bookType: "xlsx", type: "buffer" });
 
   // 3. 헤더만 한글로 교체하는 커스텀 스타일 함수 호출
-  await excelStyleWithKoreanHeaders(buffer, headerRange, fileName, headerMapping, dataArray[0]);
+  await excelStyleWithKoreanHeaders(buffer, headerRange, fileName, headerMapping, dataArray[0], mergeRanges);
 };
diff --git a/packages/common/business_components/src/ui/file-upload/index.tsx b/packages/common/business_components/src/ui/file-upload/index.tsx
index af63af7e7..6836691e2 100644
--- a/packages/common/business_components/src/ui/file-upload/index.tsx
+++ b/packages/common/business_components/src/ui/file-upload/index.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { CloudUpload, Paperclip } from "lucide-react";
 import { FileInput, FileUploader, FileUploaderContent, FileUploaderItem } from "./lib/file_upload";
+
 const dropZoneConfig = {
     maxFiles: 5,
     maxSize: 1024 * 1024 * 100,
@@ -9,14 +10,19 @@ const dropZoneConfig = {
 
 
   interface FileUploadProps {
-    files: File[];             // 파일 배열
-    setFiles: (files: File[] | null) => void; // 파일 배열 세터
-    fileTypes?: string;        // 옵션 (파일 확장자 문자열)
-    onFileClick?:(index:number)=> void;
-    maxFiles?: number;          // 파일 클릭 핸들러
-    
+    files: File[]; // 화면에 표시할 현재 파일 목록
+    setFiles: (files: File[] | null) => void; // 추가/삭제 후 변경된 파일 목록을 부모에 전달
+    fileTypes?: string; // 허용할 확장자 문자열(ex: ".pdf,.jpg")
+    onFileClick?:(index:number)=> void; // 파일명 영역 클릭 시 현재 목록 기준 index 전달
+    maxFiles?: number; // 업로드 가능한 최대 파일 수
+     
   }
 
+/**
+ * 공통 파일 업로드 UI
+ * - 실제 파일 상태는 부모가 관리하고, 이 컴포넌트는 목록 표시/추가/삭제 이벤트만 위임한다.
+ * - 삭제 아이콘 클릭 시 FileUploader 내부에서 index 기준으로 파일을 제외한 배열을 만든 뒤 setFiles로 전달한다.
+ */
 export const FileUpload = 
 ({ files, setFiles, fileTypes ,onFileClick, maxFiles}: FileUploadProps) => {
     if(maxFiles){
@@ -51,6 +57,7 @@ export const FileUpload =
             {files&&
                 files.length > 0 &&
                 files.map((file:File, i:number) => (
+                // i는 현재 files 배열 순번이며, 삭제/클릭 이벤트에서 같은 순번값을 사용한다.
                 <FileUploaderItem key={i} index={i} onFileClick={onFileClick  }>
                     <Paperclip className="h-4 w-4 stroke-current" />
                     <span className="w-72 truncate">{file.name}</span>
@@ -59,4 +66,4 @@ export const FileUpload =
             </FileUploaderContent>
         </FileUploader>
     )
-}
\ No newline at end of file
+}
diff --git a/packages/common/business_components/src/ui/file-upload/lib/file_upload.tsx b/packages/common/business_components/src/ui/file-upload/lib/file_upload.tsx
index 030ddda95..9e47d296e 100644
--- a/packages/common/business_components/src/ui/file-upload/lib/file_upload.tsx
+++ b/packages/common/business_components/src/ui/file-upload/lib/file_upload.tsx
@@ -37,6 +37,7 @@ type FileUploaderContextType = {
 
 const FileUploaderContext = createContext<FileUploaderContextType | null>(null);
 
+// FileUploader 하위 컴포넌트들이 공통 상태와 핸들러를 사용할 수 있도록 context를 노출한다.
 export const useFileUpload = () => {
   const context = useContext(FileUploaderContext);
   if (!context) {
@@ -54,7 +55,10 @@ type FileUploaderProps = {
 };
 
 /**
- * File upload Docs: {@link: https://localhost:3000/docs/file-upload}
+ * 파일 업로드의 공통 동작을 담당하는 컨테이너 컴포넌트
+ * - 현재 파일 목록(value)을 기준으로 drag & drop / 선택 / 삭제를 처리한다.
+ * - 실제 파일 상태는 부모가 관리하며, 변경 결과는 onValueChange로만 전달한다.
+ * - FileInput, FileUploaderContent, FileUploaderItem은 이 context를 통해 같은 상태를 공유한다.
  */
 
 export const FileUploader = forwardRef<
@@ -80,7 +84,7 @@ export const FileUploader = forwardRef<
     const [isLOF, setIsLOF] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
 
-    // MIME 타입 매핑 함수 추가
+    // ".pdf,.jpg" 형태의 확장자 문자열을 react-dropzone accept 객체로 변환한다.
     const getAcceptObject = (fileTypes?: string): Record<string, string[]> => {
       if (!fileTypes) {
         return { "image/*": [".jpg", ".jpeg", ".png", ".gif"] };
@@ -131,6 +135,7 @@ export const FileUploader = forwardRef<
     const reSelectAll = maxFiles === 1 ? true : reSelect;
     const direction: DirectionOptions = dir === "rtl" ? "rtl" : "ltr";
 
+    // 현재 value 배열에서 index 위치 파일만 제외한 새 배열을 부모로 전달한다.
     const removeFileFromSet = useCallback(
       (i: number) => {
         if (!value) return;
@@ -140,6 +145,7 @@ export const FileUploader = forwardRef<
       [value, onValueChange],
     );
 
+    // 키보드로 파일 목록 탐색 및 삭제를 지원한다.
     const handleKeyDown = useCallback(
       (e: React.KeyboardEvent<HTMLDivElement>) => {
         e.preventDefault();
@@ -196,6 +202,7 @@ export const FileUploader = forwardRef<
       [value, activeIndex, removeFileFromSet],
     );
 
+    // 드롭/선택된 파일을 현재 목록과 합쳐서 부모 상태로 반영한다.
     const onDrop = useCallback(
       (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
         const files = acceptedFiles;
@@ -238,6 +245,7 @@ export const FileUploader = forwardRef<
       [reSelectAll, value],
     );
 
+    // 최대 파일 수에 도달하면 입력 영역을 비활성화한다.
     useEffect(() => {
       if (!value) return;
       if (value.length === maxFiles) {
@@ -247,6 +255,7 @@ export const FileUploader = forwardRef<
       setIsLOF(false);
     }, [value, maxFiles]);
 
+    // react-dropzone에 넘길 최종 옵션 구성
     const opts = dropzoneOptions
       ? { ...dropzoneOptions, accept: getAcceptObject(acceptName) }
       : { accept, maxFiles, maxSize, multiple };
@@ -311,7 +320,7 @@ export const FileUploaderContent = forwardRef<
         {...props}
         ref={ref}
         className={cn(
-          "w-full flex rounded-xl gap-1",
+          "w-full flex rounded-xl gap-0",
           orientation === "horizontal" ? "flex-raw flex-wrap" : "flex-col",
           className,
         )}
@@ -335,26 +344,31 @@ export const FileUploaderItem = forwardRef<
       ref={ref}
       className={cn(
         buttonVariants({ variant: "ghost" }),
-        "h-6 p-1 justify-between cursor-pointer relative w-full",
+        "h-9 justify-between cursor-pointer relative w-full",
         className,
         isSelected ? "bg-muted" : "",
       )}
       {...props}
    
     >
-      <div className="font-medium leading-none tracking-tight flex items-center gap-1.5 h-full !w-4/5 overflow-hidden "
+      <div className="font-medium leading-normal tracking-tight flex items-center gap-1.5 h-full !w-4/5 overflow-hidden "
          onClick={() =>{onFileClick?.(index)
              }}>
         {children}
       </div>
       <button
+        type="button"
         className={cn(
           "absolute",
           "!w-1/5 z-50",
-          direction === "rtl" ? "top-1 left-1" : "top-1 right-1",
+          direction === "rtl"
+            ? "left-1 top-1/2 -translate-y-1/2"
+            : "right-1 top-1/2 -translate-y-1/2",
           
         )}
-        onClick={() =>{
+        onClick={(e) =>{
+          e.preventDefault();
+          e.stopPropagation();
           removeFileFromSet(index)}}
       >
         <span className="sr-only">remove item {index}</span>
diff --git a/packages/common/business_components/src/ui/form/index.tsx b/packages/common/business_components/src/ui/form/index.tsx
index d2f955244..fc9bf5b8c 100644
--- a/packages/common/business_components/src/ui/form/index.tsx
+++ b/packages/common/business_components/src/ui/form/index.tsx
@@ -42,22 +42,24 @@ const FormField = <
 }
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  // 필드명으로 필드의 상태를 가져옴.
+  // errors, isDirty, dirtyFields, touchedFields, isSubmitted, isSubmitSuccessful, isValid, defaultValues, disabled
+  const fieldState = getFieldState(fieldContext.name, formState); 
 
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>")
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
     name: fieldContext.name,
-    formItemId: `${id}-form-item`,
+    formItemId: `${id}-form-item`, // 접근성 속성 연결용
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
@@ -86,6 +88,8 @@ const FormItem = React.forwardRef<
 })
 FormItem.displayName = "FormItem"
 
+// React.forwardRef를 사용해서 부모가 Label DOM ref를 직접 받을 수 있게 하고,
+// 현재 FormField의 에러 상태와 form item id를 연결해 접근성(htmlFor)과 에러 스타일을 함께 처리한다.
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js
index 249c94a13..4b903d087 100644
--- a/packages/common/business_components/src/ui/map/Gis.js
+++ b/packages/common/business_components/src/ui/map/Gis.js
@@ -32,6 +32,9 @@ export const GisContext = createContext({
 });
 export const useGisContext = () => useContext(GisContext);
 
+/**
+ * @param {any} props
+ */
 function Gis({
   isOpen, //우측 상세 레이어 팝업
   gisMaps,
@@ -49,17 +52,28 @@ function Gis({
   setIsSearchModalOpen,
   onCheckedLayersChange,
   searchBar: SearchBar,
-  waterDepth: WaterDepth,
+  waterDepth: WaterDepth = null,
+  layerSettingView: LayerSettingView = null,
+  inlineLayerSettingView,
+  layerIconVisible,
   isPlaying = false,
   setIsPlaying = () => { },
   targetLayerTypes = [],
   checkInterval = 3000,
+  // 체크 변경 콜백 지연 시간. 기본값은 기존 동작 유지, sn 유하방향처럼 즉시 반응이 필요한 화면은 0으로 전달한다.
+  checkedLayerChangeDelay = 1000,
   height: height = "h-[calc(100vh-5rem)]",
   onOpenPopup = (data) => { },
   droughtDates = { startYmd: '', endYmd: '' },
   defaultZoom = 15,
   defaultLonLat = [127.4875, 37.4916],
+  viewExtent,
+  viewMinZoom,
   showZoomLevel = false,
+  zoomGuide,
+  showFloatingSearchButton = true,
+  treeTogglePosition = "center",
+  showZoomScaleInfo = false,
 }) {
   const mapRef = useRef();
   const [mapObject, setMapObject] = useState({});
@@ -137,8 +151,9 @@ function Gis({
             GisApp.FROM_PROJ,
             GisApp.TO_PROJ,
           ),
-          minZoom: gisCore.defaults.minZoom,
+          minZoom: viewMinZoom ?? gisCore.defaults.minZoom,
           maxZoom: gisCore.defaults.maxZoom,
+          extent: viewExtent,
         }),
       });
     } else {
@@ -245,13 +260,17 @@ function Gis({
   // 체크된 레이어 정보를 처리하는 함수
   const handleCheckedLayersChange = useCallback(
     (checkedIds, checkedNodesData) => {
-      setTimeout(() => {
+      // 콜백 지연 옵션을 한 곳에서 처리해 기존 화면과 즉시 반응 화면의 동작 차이를 prop으로 제어한다.
+      const applyCheckedLayersChange = () => {
         setCheckedLayers(checkedIds);
         setCheckedLayersData(checkedNodesData);
         onCheckedLayersChange?.(checkedIds, checkedNodesData);
-      }, 1000);
+      };
+
+      const delayMs = Math.max(0, Number(checkedLayerChangeDelay) || 0);
+      setTimeout(applyCheckedLayersChange, delayMs);
     },
-    [onCheckedLayersChange],
+    [checkedLayerChangeDelay, onCheckedLayersChange],
   );
 
   // 진행률 변경 핸들러
@@ -281,18 +300,22 @@ function Gis({
               visible={tabVisible}
               setVisible={setTabVisible}
               onCheckedChange={handleCheckedLayersChange}
-              onLayerIconClick={(layerNm) => {
+              onLayerIconClick={(layerNm, node) => {
                 layerNmRef.current = layerNm;
                 setLayerNm(layerNm);
-                setIsOpen(true);
-                onOpenPopup(layerNm)
+                const shouldOpenDetail = onOpenPopup(layerNm, node)
+                if (shouldOpenDetail !== false) setIsOpen(true);
               }}
               imageVisible={imgVisble}
+              layerIconVisible={layerIconVisible}
               isPlaying={isPlaying}
               setIsPlaying={setIsPlaying}
               targetLayerTypes={targetLayerTypes}
               checkInterval={checkInterval}
               onProgressChange={handleProgressChange}
+              layerSettingView={LayerSettingView}
+              inlineLayerSettingView={inlineLayerSettingView}
+              toggleButtonPosition={treeTogglePosition}
             />
 
             {typeof WaterDepth === "function" && (
@@ -327,14 +350,16 @@ function Gis({
               </div>
             )}
             <GisToolBar />
-            {showZoomLevel && <GisZoomLevel />}
+            {showZoomLevel && (
+              <GisZoomLevel zoomGuide={zoomGuide} showZoomScaleInfo={showZoomScaleInfo} />
+            )}
             <GisMapToggle />
             <GisSelect onFeatureSelect={handleFeatureSelect} />
           </div>
         </div>
 
-        {isSearch && (
-          <div className="absolute right-8 top-[305px] z-20">
+        {isSearch && showFloatingSearchButton && (
+          <div className="absolute right-8 top-[248px] z-20">
             <button
               onClick={() => setIsSearchModalOpen(true)}
               title="정보 검색"
diff --git a/packages/common/business_components/src/ui/map/GisTree.js b/packages/common/business_components/src/ui/map/GisTree.js
index 197827010..5f9510bb5 100644
--- a/packages/common/business_components/src/ui/map/GisTree.js
+++ b/packages/common/business_components/src/ui/map/GisTree.js
@@ -27,6 +27,8 @@ import GisApp from "./lib/gis.core";
  * - orderedLayers: 레이어 재생 순서를 지정하는 id 배열 (lyrSn)
  * - checkInterval: 자동 애니메이션 토글 간격(ms)
  * - onProgressChange(total, current): 애니메이션 진행상태 콜백
+ * - layerSettingView: (선택) 좌측 레이어 트리 하단에 표시할 설정 영역
+ * - layerIconVisible: (선택) 레이어 행 우측 액션 아이콘 노출 여부를 결정하는 함수
  */
 export default React.memo(function GisTree({
 	checkedNodes = [],
@@ -41,6 +43,10 @@ export default React.memo(function GisTree({
 	targetLayerTypes = [],
 	checkInterval = 3000,
 	onProgressChange = () => { },
+	layerSettingView: LayerSettingView = null,
+	layerIconVisible,
+	inlineLayerSettingView,
+	toggleButtonPosition = "center",
 }) {
 	const { gisCore, treeData } = useGisContext();
 
@@ -494,9 +500,9 @@ export default React.memo(function GisTree({
 	/**
 	 * 각 레이어 행의 아이콘 클릭 시 호출. 선택되지 않은 레이어면 경고, 선택된 경우 콜백 전달.
 	 */
-	const handleLayerImgClick = (nodeNm, nodeId) => {
+	const handleLayerImgClick = (nodeNm, nodeId, node) => {
 		if (!checked.includes(nodeId)) alert("시설을 선택해주세요");
-		else onLayerIconClick(nodeNm);
+		else onLayerIconClick(nodeNm, node);
 	};
 
 	// =====================
@@ -505,11 +511,14 @@ export default React.memo(function GisTree({
 
 	if (!treeData || treeData.length === 0) return null;
 
+	const toggleButtonPositionClass =
+		toggleButtonPosition === "top" ? "top-[5.5rem]" : "top-1/2 -translate-y-1/2";
+
 	return (
 		<>
 			{/* 사이드 패널 */}
 			<div
-				className={`absolute left-0 top-0 z-40 flex h-full w-[250px] flex-col overflow-hidden border-r border-gray-300 bg-white transition-all duration-300 ${visible
+				className={`gis-layer-panel absolute left-0 top-0 z-40 flex h-full w-[250px] flex-col overflow-hidden border-r border-gray-300 bg-white transition-all duration-300 ${visible
 					? "translate-x-0 opacity-100"
 					: "pointer-events-none -translate-x-full opacity-0"
 					}`}
@@ -518,7 +527,7 @@ export default React.memo(function GisTree({
 					className={`grow overflow-y-auto border-none p-2 pt-0 shadow-none ${activeTab === "layers" ? "block" : "hidden"
 						}`}
 				>
-					<h3 className="mx-2 my-4 text-3xl font-bold text-gray-600 text-center">시설물</h3>
+					<h3 className="gis-layer-panel-title mx-2 my-4 text-3xl font-bold text-gray-600 text-center">시설물</h3>
 					<hr className="mb-4" />
 					{/* DnD Tree */}
 					<DndProvider backend={MultiBackend} options={getBackendOptions()}>
@@ -533,49 +542,78 @@ export default React.memo(function GisTree({
 									(child) =>
 										child.parent === node.id && child.data.exprsYn === "Y"
 								);
+								const showLayerActionButton = layerIconVisible?.(node);
+								const showLayerActionIcon = depth > 0 && imageVisible;
+
+								const inlineLayerSetting = inlineLayerSettingView?.(node);
 
 								return (
-									<div
-										className="flex items-center gap-2 rounded px-2 py-1 hover:bg-gray-100"
-										style={{
-											marginInlineStart: depth * 16,
-											display: isVisible ? "flex" : "none",
-										}}
-									>
-										{hasVisibleChildren ? (
-											<i
-												onClick={onToggle}
-												className={`diveicon di-arrow-forward mr-2 text-base text-label ${isOpen ? "rotate-90" : ""
-													}`}
-												title={isOpen ? "닫기" : "열기"}
+									<div style={{ display: isVisible ? "block" : "none" }}>
+										<div
+											className="gis-layer-row flex items-center gap-2 rounded px-2 py-1 hover:bg-gray-100"
+											style={{
+												marginInlineStart: depth * 16,
+											}}
+										>
+											{hasVisibleChildren ? (
+												<i
+													onClick={onToggle}
+													className={`diveicon di-arrow-forward mr-2 text-base text-label ${isOpen ? "rotate-90" : ""
+														}`}
+													title={isOpen ? "닫기" : "열기"}
+												/>
+											) : (
+												<span style={{ display: "inline-block", width: 16 }} />
+											)}
+											<input
+												type="checkbox"
+												checked={checked.includes(node.id)}
+												onChange={() => handleCheck(node.id)}
+												className="cursor-pointer"
 											/>
-										) : (
-											<span style={{ display: "inline-block", width: 16 }} />
-										)}
-										<input
-											type="checkbox"
-											checked={checked.includes(node.id)}
-											onChange={() => handleCheck(node.id)}
-											className="cursor-pointer"
-										/>
-										{node.icon && <span>{node.icon}</span>}
-										<span className="text-[1.3rem] font-medium text-label">
-											{node.text}
-										</span>
-										{imageVisible && depth > 0 && (
-											<span>
-												<img
-													className="h-5 w-5 cursor-pointer"
-													src="/images/map/layericon/Layer_Select_BTN.png"
+											{node.icon && <span>{node.icon}</span>}
+											<span className="text-[1.3rem] font-medium text-label">
+												{node.text}
+											</span>
+											{showLayerActionButton && (
+												<button
+													type="button"
+													className="gis-layer-action-button ml-1 shrink-0 rounded-sm border border-[#9cc6f0] bg-white px-2 py-[1px] text-[1.1rem] font-medium leading-5 text-[#2c6fb7] transition-colors hover:bg-[#eef6ff]"
 													onClick={() =>
 														handleLayerImgClick(
 															node.data.lyrTyNm,
-															node.id
+															node.id,
+															node
 														)
 													}
-													alt={node.text}
-												/>
-											</span>
+													title={`${node.text} 목록보기`}
+												>
+													목록보기
+												</button>
+											)}
+											{!showLayerActionButton && showLayerActionIcon && (
+												<span className="shrink-0">
+													<img
+														className="h-5 w-5 cursor-pointer"
+														src="/images/map/layericon/Layer_Select_BTN.png"
+														onClick={() =>
+															handleLayerImgClick(
+																node.data.lyrTyNm,
+																node.id,
+																node
+															)
+														}
+														alt={node.text}
+													/>
+												</span>
+											)}
+										</div>
+										{inlineLayerSetting && (
+											<div className="mt-2 pb-3 pr-1" style={{ marginInlineStart: depth * 8 + 12 }}>
+												{typeof inlineLayerSetting === "function"
+													? React.createElement(inlineLayerSetting)
+													: inlineLayerSetting}
+											</div>
 										)}
 									</div>
 								);
@@ -588,9 +626,14 @@ export default React.memo(function GisTree({
 						/>
 					</DndProvider>
 				</div>
+				{LayerSettingView && (
+					<div className="gis-layer-setting shrink-0 bg-white px-2 pb-3">
+						<LayerSettingView />
+					</div>
+				)}
 				<button
 					onClick={() => setVisible(false)}
-					className="absolute right-[-3px] top-1/2 z-50 -translate-y-1/2 transform rounded-l-none rounded-r border border-l border-gray-300 bg-white px-1 py-2 shadow-sm"
+					className={`gis-layer-toggle absolute right-[-3px] z-50 transform rounded-l-none rounded-r border border-l border-gray-300 bg-white px-1 py-2 shadow-sm ${toggleButtonPositionClass}`}
 				>
 					<ChevronLeft size={16} />
 				</button>
@@ -598,7 +641,7 @@ export default React.memo(function GisTree({
 			{!visible && (
 				<button
 					onClick={() => setVisible(true)}
-					className="absolute left-[-3px] top-1/2 z-50 -translate-y-1/2 transform rounded-r border border-r border-gray-300 bg-white px-1 py-2 shadow-sm"
+					className={`gis-layer-toggle absolute left-[-3px] z-50 transform rounded-r border border-r border-gray-300 bg-white px-1 py-2 shadow-sm ${toggleButtonPositionClass}`}
 				>
 					<ChevronRight size={16} />
 				</button>
diff --git a/packages/common/business_components/src/ui/map/GisZoomLevel.js b/packages/common/business_components/src/ui/map/GisZoomLevel.js
index 34d74f252..4409ece9c 100644
--- a/packages/common/business_components/src/ui/map/GisZoomLevel.js
+++ b/packages/common/business_components/src/ui/map/GisZoomLevel.js
@@ -1,13 +1,22 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useGisContext } from './Gis';
 
-export default React.memo(function GisZoomLevel() {
+const DPI = 25.4 / 0.28;
+const INCHES_PER_METER = 39.37;
+
+const formatScaleValue = scale => {
+	if (!Number.isFinite(scale) || scale <= 0) return '-';
+	return `1:${Math.round(scale).toLocaleString()}`;
+};
+
+export default React.memo(function GisZoomLevel({ zoomGuide, showZoomScaleInfo = false }) {
 	const { gisMap } = useGisContext();
 	const trackRef = useRef(null);
 	const [zoomInfo, setZoomInfo] = useState({
 		zoom: 0,
 		minZoom: 0,
 		maxZoom: 0,
+		scale: 0,
 	});
 
 	useEffect(() => {
@@ -17,10 +26,16 @@ export default React.memo(function GisZoomLevel() {
 		if (!view) return undefined;
 
 		const updateZoomInfo = () => {
+			const resolution = view.getResolution?.() ?? 0;
+			const projection = view.getProjection?.();
+			const metersPerUnit = projection?.getMetersPerUnit?.() ?? 1;
+			const scale = resolution * metersPerUnit * INCHES_PER_METER * DPI;
+
 			setZoomInfo({
 				zoom: view.getZoom() ?? 0,
 				minZoom: view.getMinZoom?.() ?? 0,
 				maxZoom: view.getMaxZoom?.() ?? 20,
+				scale,
 			});
 		};
 
@@ -34,11 +49,30 @@ export default React.memo(function GisZoomLevel() {
 
 	if (!gisMap) return <></>;
 
-	const { zoom, minZoom, maxZoom } = zoomInfo;
+	const { zoom, minZoom, maxZoom, scale } = zoomInfo;
 	const range = Math.max(maxZoom - minZoom, 1);
 	const normalized = Math.min(Math.max((zoom - minZoom) / range, 0), 1);
 	const fillHeight = `${normalized * 100}%`;
 	const thumbBottom = `calc(${fillHeight} - 1px)`;
+	const guideZoom = Number(zoomGuide?.zoom);
+	const hasGuide =
+		Boolean(zoomGuide?.label) &&
+		Number.isFinite(guideZoom) &&
+		zoomGuide?.visible !== false;
+	const guideNormalized = hasGuide
+		? Math.min(Math.max((guideZoom - minZoom) / range, 0), 1)
+		: 0;
+	const guideBottom = `calc(${guideNormalized * 100}% - 1px)`;
+	const isGuideActive = hasGuide ? zoom >= guideZoom : false;
+	const titleParts = [`현재 줌 레벨 ${zoom.toFixed(1)}`];
+
+	if (hasGuide) {
+		titleParts.push(
+			`${zoomGuide.label} 줌 ${guideZoom}${isGuideActive ? ' 이상' : ' 미만'}`,
+		);
+	}
+
+	const controlTitle = titleParts.join(' / ');
 
 	const updateZoomFromClientY = clientY => {
 		if (!gisMap || !trackRef.current) return;
@@ -89,7 +123,22 @@ export default React.memo(function GisZoomLevel() {
 	};
 
 	return (
-		<div className="zoom-level-control" title={`현재 줌 레벨 ${zoom.toFixed(1)}`}>
+		<div
+			className={`zoom-level-control ${hasGuide ? 'has-zoom-guide' : ''}`}
+			title={controlTitle}
+		>
+			{showZoomScaleInfo && (
+				<div className="zoom-level-summary" aria-live="polite">
+					<div className="zoom-level-summary-row">
+						<span className="zoom-level-summary-label">줌레벨</span>
+						<span className="zoom-level-summary-value">{zoom.toFixed(1)}</span>
+					</div>
+					<div className="zoom-level-summary-row">
+						<span className="zoom-level-summary-label">축척</span>
+						<span className="zoom-level-summary-value">{formatScaleValue(scale)}</span>
+					</div>
+				</div>
+			)}
 			<div className="zoom-level-panel">
 				<button type="button" className="zoom-level-btn" onClick={zoomIn} aria-label="확대">
 					+
@@ -100,6 +149,16 @@ export default React.memo(function GisZoomLevel() {
 						className="zoom-level-track"
 						onPointerDown={handleTrackPointerDown}
 					>
+						{hasGuide && (
+							<div
+								className={`zoom-level-guide ${isGuideActive ? 'is-active' : 'is-inactive'}`}
+								style={{ bottom: guideBottom }}
+								aria-hidden="true"
+							>
+								<span className="zoom-level-guide-label">{zoomGuide.label}</span>
+								<span className="zoom-level-guide-dot" />
+							</div>
+						)}
 						<div className="zoom-level-fill" style={{ height: fillHeight }} />
 						<div className="zoom-level-thumb" style={{ bottom: thumbBottom }} />
 					</div>
diff --git a/packages/common/business_components/src/ui/map/lib/css/gis.common.css b/packages/common/business_components/src/ui/map/lib/css/gis.common.css
index 5ce46a912..1ecf520ab 100644
--- a/packages/common/business_components/src/ui/map/lib/css/gis.common.css
+++ b/packages/common/business_components/src/ui/map/lib/css/gis.common.css
@@ -180,8 +180,44 @@
 	z-index: 2;
 }
 
+.zoom-level-summary {
+	position: absolute;
+	right: 56px;
+	bottom: 6px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 126px;
+	padding: 7px 10px;
+	border: 1px solid #9aa7b8;
+	border-radius: 6px;
+	background: rgba(255, 255, 255, 0.96);
+	box-shadow: 0 0 5px #999;
+	box-sizing: border-box;
+}
+
+.zoom-level-summary-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	font-size: 11px;
+	line-height: 1.2;
+	color: #334155;
+}
+
+.zoom-level-summary-label {
+	font-weight: 700;
+	color: #1d4f91;
+}
+
+.zoom-level-summary-value {
+	font-weight: 600;
+	color: #334155;
+}
+
 .zoom-level-panel {
-	overflow: hidden;
+	overflow: visible;
 	width: 40px;
 	background: #fff;
 	border: 1px solid #9aa7b8;
@@ -217,12 +253,14 @@
 }
 
 .zoom-level-gauge {
+	position: relative;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 40px;
 	height: 128px;
 	background: #fff;
+	overflow: visible;
 }
 
 .zoom-level-track {
@@ -232,6 +270,7 @@
 	border-radius: 6px;
 	cursor: ns-resize;
 	touch-action: none;
+	overflow: visible;
 	background:
 		linear-gradient(to top, #b8b8b8, #b8b8b8) center / 4px 100% no-repeat,
 		repeating-linear-gradient(
@@ -267,6 +306,61 @@
 	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
 }
 
+.zoom-level-guide {
+	position: absolute;
+	left: 50%;
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	transform: translate(calc(-100% - 10px), 50%);
+	pointer-events: none;
+	white-space: nowrap;
+}
+
+.zoom-level-guide::after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	right: -10px;
+	width: 10px;
+	height: 2px;
+	background: currentColor;
+	transform: translateY(-50%);
+	opacity: 0.9;
+}
+
+.zoom-level-guide-label {
+	display: inline-flex;
+	align-items: center;
+	height: 20px;
+	padding: 0 8px;
+	border: 1px solid currentColor;
+	border-radius: 999px;
+	background: rgba(255, 255, 255, 0.96);
+	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
+	font-size: 11px;
+	font-weight: 700;
+	line-height: 1;
+	color: inherit;
+}
+
+.zoom-level-guide-dot {
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	border-radius: 999px;
+	background: currentColor;
+	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.94);
+}
+
+.zoom-level-guide.is-active {
+	color: #d9363e;
+}
+
+.zoom-level-guide.is-inactive {
+	color: #9ca3af;
+}
+
 .ol-scale-line {
 	background: rgba(0, 60, 136, 0.3);
 	border-radius: 4px;	
diff --git a/packages/common/business_components/src/ui/map/lib/gis.core.js b/packages/common/business_components/src/ui/map/lib/gis.core.js
index 2e97e8af5..b136cdcee 100644
--- a/packages/common/business_components/src/ui/map/lib/gis.core.js
+++ b/packages/common/business_components/src/ui/map/lib/gis.core.js
@@ -1,25 +1,28 @@
-import MousePosition from 'ol/control/MousePosition';
-import ScaleLine from 'ol/control/ScaleLine';
-import Feature from 'ol/Feature';
-import WKT from 'ol/format/WKT';
-import LinearRing from 'ol/geom/LinearRing';
-import Draw from 'ol/interaction/Draw';
-import TileLayer from 'ol/layer/Tile';
-import * as olProj from 'ol/proj';
-import VectorSource from 'ol/source/Vector';
-import XYZ from 'ol/source/XYZ';
-import GeoSJON from 'ol/format/GeoJSON';
-import { Fill, Stroke, Style } from 'ol/style';
-import CircleStyle from 'ol/style/Circle';
-import VectorLayer from 'ol/layer/Vector';
+import MousePosition from 'ol/control/MousePosition'; // 마우스 좌표 표시
+import ScaleLine from 'ol/control/ScaleLine';	        // 지도 축척(스케일 바) 표시
+import Feature from 'ol/Feature';                     // 지도 위 객체- 점, 선, 폴리곤
+import WKT from 'ol/format/WKT';                      // WKT 문자열 기반 공간 데이터 포맷
+import LinearRing from 'ol/geom/LinearRing';          // 선형 고리(폴리곤의 외곽선 또는 내부 구멍을 나타냄)
+import Draw from 'ol/interaction/Draw';							  // 지도 위에 점, 선, 폴리곤 등의 피처를 그리는 인터랙션
+import TileLayer from 'ol/layer/Tile';                // 타일 레이어(배경 지도) 클래스
+import * as olProj from 'ol/proj';                    // 좌표 변환을 위한 모듈
+import VectorSource from 'ol/source/Vector';          // VectorLayer의 실제 데이터 저장소
+import XYZ from 'ol/source/XYZ';                      // {z}/{x}/{y} Google, OpenStreetMap 등에서 타일을 가져올 때 사용
+import GeoSJON from 'ol/format/GeoJSON';              // JSON 형태 공간 데이터 포맷
+import { Fill, Stroke, Style } from 'ol/style';       // 내부 색상 (폴리곤), 선 색상 및 두께 (점, 선), 스타일 정의
+import CircleStyle from 'ol/style/Circle';            // 점 스타일 정의 클래스 : 점을 원으로 표현
+import VectorLayer from 'ol/layer/Vector';            // 점, 선, 폴리곤 등의 피처를 지도에 표시하는 레이어
 import { Point } from 'ol/geom';
-import { getTopLeft } from 'ol/extent';
-import TileWMTS from 'ol/source/WMTS';
-import WMTSTileGrid from 'ol/tilegrid/WMTS';
-import proj4 from 'proj4';
-import { register } from 'ol/proj/proj4';
-import GisOlEditLayer from './gis.edit';
-import GisOlLayer from './gis.layer';
+import { getTopLeft } from 'ol/extent';               // extent의 좌측 상단 좌표 반환
+// WMTS 타일(국토정보 배경지도용)
+import TileWMTS from 'ol/source/WMTS';                // WMTS 서비스에서 타일을 가져와 지도에 표시하는 역할 (국토부 / 공공 GIS에서 사용)
+import WMTSTileGrid from 'ol/tilegrid/WMTS';          // WMTS 타일의 해상도 resolutions, 행렬 ID matrixIds, 타일 크기 등을 정의
+// 좌표계 등록(proj4 + OpenLayers 연동)
+import proj4 from 'proj4';                            // 사용자 정의 좌표계 정의
+import { register } from 'ol/proj/proj4';             // proj4 좌표계를 OpenLayers에 등록
+// 내부 모듈(레이어/편집)
+import GisOlEditLayer from './gis.edit';              // 편집 레이어 생성/관리 커스텀 로직
+import GisOlLayer from './gis.layer';                 // 레이어 생성/관리 커스텀 로직
 
 const GisApp = {};
 /**
@@ -51,7 +54,7 @@ GisApp.VWORLD_SATELLITE_URL = 'https://xdworld.vworld.kr/2d/Satellite/service/{z
 GisApp.OPENSTREET_URL = '//tile.openstreetmap.org/{z}/{x}/{y}.png';
 GisApp.BASE_MAP_TYPES = [];
 
-GisApp.FROM_PROJ = 'EPSG:4326';
+GisApp.FROM_PROJ = 'EPSG:4326'; // 위경도 좌표계
 GisApp.TO_PROJ = 'EPSG:5179'; //ngii 좌표계
 GisApp.TO_DATA_PROJ = 'EPSG:4326';
 GisApp.CONTEXT_LAYER_PATH = '/images/map/layericon/';
diff --git a/packages/common/business_components/src/ui/map/lib/gis.select.js b/packages/common/business_components/src/ui/map/lib/gis.select.js
index ed4f9a2a7..a1dab024e 100644
--- a/packages/common/business_components/src/ui/map/lib/gis.select.js
+++ b/packages/common/business_components/src/ui/map/lib/gis.select.js
@@ -57,6 +57,40 @@ GisOlSelect.prototype = {
 				width : 10,
 			})
 		});
+		let focusedLineStyle = [
+			new Style({
+				stroke : new Stroke({
+					color : 'rgba(88, 28, 135, 0.26)',
+					width : 18,
+					lineCap : 'round',
+					lineJoin : 'round',
+				}),
+			}),
+			new Style({
+				stroke : new Stroke({
+					color : 'rgba(255, 255, 255, 0.96)',
+					width : 12,
+					lineCap : 'round',
+					lineJoin : 'round',
+				}),
+			}),
+			new Style({
+				stroke : new Stroke({
+					color : 'rgba(109, 40, 217, 0.98)',
+					width : 8,
+					lineCap : 'round',
+					lineJoin : 'round',
+				}),
+			}),
+			new Style({
+				stroke : new Stroke({
+					color : 'rgba(216, 180, 254, 0.92)',
+					width : 3,
+					lineCap : 'round',
+					lineJoin : 'round',
+				}),
+			}),
+		];
 
 		this.selectInteraction = new Select({
 			style: function (feature, resolution) {
@@ -72,7 +106,12 @@ GisOlSelect.prototype = {
 						styles.push(style);
 					}
 				}
-				styles.push(baseStyle);
+				const geometryType = feature?.getGeometry?.()?.getType?.();
+				if (geometryType === 'LineString' || geometryType === 'MultiLineString') {
+					styles.push(...focusedLineStyle);
+				} else {
+					styles.push(baseStyle);
+				}
 				return styles;
 			},
 			layers: function (layer) {
@@ -90,13 +129,16 @@ GisOlSelect.prototype = {
 		this.selectInteraction.on('select', function (e) {
 			const feature = e.selected[0];
 			if (feature) {
+				const selectedLayer = e.target?.getLayer(feature) || feature.getLayer?.();
+				const clckZoom = Number(selectedLayer?.get('clckZoom'));
+				const targetZoom = Number.isFinite(clckZoom) && clckZoom > 0 ? clckZoom : 16;
 				const geometry = feature.getGeometry();
 				if (geometry) {
 					const extent = geometry.getExtent();
 					map.getView().fit(extent, {
 						duration: 300,
 						padding: [50, 50, 50, 50],
-						maxZoom: 16
+						maxZoom: targetZoom
 					});
 				}
 			}
diff --git a/packages/common/business_components/src/ui/map/lib/gis.style.js b/packages/common/business_components/src/ui/map/lib/gis.style.js
index f38853962..4ad75c386 100644
--- a/packages/common/business_components/src/ui/map/lib/gis.style.js
+++ b/packages/common/business_components/src/ui/map/lib/gis.style.js
@@ -206,7 +206,7 @@ GisOlStyle.prototype = {
 			element: overlayContainer,
 			positioning: 'bottom-center',
 			stopEvent: false,
-			offset: overLayOffset ? overLayOffset : [80, 0], // 오프셋 설정 (위치 조정)
+			offset: overLayOffset ? overLayOffset : [65, 0], // 오프셋 설정 (위치 조정)
 		});
 		this.overlays[overLayId] = overlay;
 
diff --git a/packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx b/packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx
index 31500959b..6d042f62a 100644
--- a/packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx
+++ b/packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx
@@ -16,13 +16,18 @@ const FACILITY_TYPE_URL_MAP: Record<string, string> = {
 interface SearchBarProps {
   gisMaps: React.RefObject<any>;
   facilityTypes: { text: string; val: string }[];
+  sidoSearchZoom?: number;
 }
 
 interface CenterSelectDataType extends SelectDataType {
   center?: [number, number]; // 좌표 중심 위치
 }
 
-export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
+export const ProcSearchBar = ({
+  gisMaps,
+  facilityTypes,
+  sidoSearchZoom = 11,
+}: SearchBarProps) => {
   const [sidoValue, setSidoValue] = useState("0");
   const [sigunValue, setSigunValue] = useState("0");
   const [sidoData, setSidoData] = useState<CenterSelectDataType[]>([
@@ -271,8 +276,8 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
       }
     }
 
-    moveMapToCenter(gisMaps, selectedSido.center, 11);
-  }, [gisMaps, sidoValue, sigunValue, sidoData, filteredSigunData, sigunData]);
+    moveMapToCenter(gisMaps, selectedSido.center, sidoSearchZoom);
+  }, [gisMaps, sidoValue, sigunValue, sidoData, filteredSigunData, sigunData, sidoSearchZoom]);
 
   const handleFeatureFocus = (data: any) => {
     const map = gisMaps.current;
diff --git a/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx b/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx
index a663feabf..e13965768 100644
--- a/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx
+++ b/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx
@@ -4,7 +4,7 @@ import { Button } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
 import SearchInputText from "./SearchInputText";
 import GisApp from "../lib/gis.core";
-import { moveMapToCenter, sidoCenter, sigunguCenter } from "./utils";
+import { getSigunguCenter, moveMapToCenter, sidoCenter } from "./utils";
 
 const FACILITY_TYPE_URL_MAP: Record<string, string> = {
   tb_il_swage_prcs_fclt:
@@ -112,9 +112,9 @@ export const SearchBar = ({
       .map((item: any) => ({
         val: item.lwpoCd,
         text: item.lwpoCdNm,
-        center: sigunguCenter[item.lwpoCd?.trim()],
-      }))
-      .sort((a: any, b: any) => a.text.localeCompare(b.text, 'ko'));
+        center: getSigunguCenter(item.lwpoCd),
+      }));
+      //.sort((a: any, b: any) => a.text.localeCompare(b.text, 'ko'));
     setSidoData([{ text: "시도", val: "0" }, ...sidoList]);
     setSigunData(sigunList);
   };
@@ -168,7 +168,10 @@ export const SearchBar = ({
       const selectedSido = sidoData.find((item) => item.val === sidoValue);
       if (!selectedSido?.center) return;
 
+      // console.log("시도 : " +sidoValue);
+      // console.log("시군구 : " + sigunValue);
       if (sigunValue !== "0") {
+        console.log(sigunData.filter((item) => item.val == sigunValue));
         const selectedSigun =
           filteredSigunData.find((item) => item.val === sigunValue) ??
           sigunData.find((item) => item.val === sigunValue);
diff --git a/packages/common/business_components/src/ui/map/searchBar/utils.ts b/packages/common/business_components/src/ui/map/searchBar/utils.ts
index 57528d6b9..5c9aef350 100644
--- a/packages/common/business_components/src/ui/map/searchBar/utils.ts
+++ b/packages/common/business_components/src/ui/map/searchBar/utils.ts
@@ -2,6 +2,11 @@ import type { RefObject } from "react";
 import { transform } from "ol/proj";
 import GisApp from "../lib/gis.core";
 
+/**
+ * 
+ * @param geometry 
+ * @returns 
+ */
 export const getGeometryCenter = (geometry: any): [number, number] | null => {
   if (!geometry?.coordinates) return null;
 
@@ -42,22 +47,34 @@ export const getGeometryCenter = (geometry: any): [number, number] | null => {
   return [(minX + maxX) / 2, (minY + maxY) / 2];
 };
 
+/**
+ * 이미 5179좌표계이면 변환하지 않음.
+ * @param centerCoord 
+ * @returns 
+ */
 export const getMapCenterCoordinate = (centerCoord: [number, number]): [number, number] => {
   const [x, y] = centerCoord;
-  const looksLikeLonLat = Math.abs(x) <= 180 && Math.abs(y) <= 90;
-  const looksLikeLatLonSwapped = Math.abs(x) <= 90 && Math.abs(y) <= 180;
+  const looksLikeLonLat = Math.abs(x) <= 180 && Math.abs(y) <= 90; // 경위도
+  const looksLikeLatLonSwapped = Math.abs(x) <= 90 && Math.abs(y) <= 180; // 위경도
 
-  if (looksLikeLonLat) {
-    return transform(centerCoord, GisApp.FROM_PROJ, GisApp.TO_PROJ) as [number, number];
+  if (looksLikeLonLat) { 
+    return transform(centerCoord, GisApp.FROM_PROJ, GisApp.TO_PROJ) as [number, number]; // 4326 -> 5179
   }
 
   if (looksLikeLatLonSwapped) {
-    return transform([y, x], GisApp.FROM_PROJ, GisApp.TO_PROJ) as [number, number];
+    return transform([y, x], GisApp.FROM_PROJ, GisApp.TO_PROJ) as [number, number]; // 4326 -> 5179
   }
 
   return centerCoord;
 };
 
+/**
+ * 
+ * @param gisMaps 
+ * @param centerCoord 
+ * @param zoom 
+ * @returns 
+ */
 export const moveMapToCenter = (
   gisMaps: RefObject<any>,
   centerCoord?: [number, number],
@@ -69,7 +86,7 @@ export const moveMapToCenter = (
   if (!map?.getView) return;
 
   const view = map.getView();
-  const center = getMapCenterCoordinate(centerCoord);
+  const center = getMapCenterCoordinate(centerCoord); // 4326 -> 5179
   if (!Number.isFinite(center[0]) || !Number.isFinite(center[1])) return;
 
   const projection = view.getProjection?.();
@@ -89,7 +106,28 @@ export const moveMapToCenter = (
   });
 };
 
+/**
+ * 시군구 코드에 해당하는 중심 좌표를 반환한다.
+ * 먼저 전체 코드로 정확히 조회하고, 값이 없으면 앞 4자리가 같은 다른 시군구 코드의 좌표를 대체로 사용한다.
+ *
+ * @param lwpoCd 행정구역 코드. 예: "41110"
+ * @returns 시군구 중심 좌표. 조회 결과가 없으면 undefined
+ */
+export const getSigunguCenter = (lwpoCd?: string | null): [number, number] | undefined => {
+  const code = lwpoCd?.trim();
+  if (!code) return undefined;
 
+  const exactCenter = sigunguCenter[code];
+  if (exactCenter) return exactCenter;
+
+  const prefix = code.slice(0, 4);
+  if (prefix.length < 4) return undefined;
+
+  const fallbackCode = Object.keys(sigunguCenter).find((key) => key.startsWith(prefix));
+  return fallbackCode ? sigunguCenter[fallbackCode] : undefined;
+};
+
+// EPSG:5179 기준
 export const sidoCenter: Record<string, [number, number]> = {
   "11": [953551.4119216551, 1951826.357686395], // 서울특별시
   "26": [1139616.39795744, 1683535.70569214], // 부산광역시
@@ -98,23 +136,25 @@ export const sidoCenter: Record<string, [number, number]> = {
   "29": [939294.465052485, 1684630.0528689548], // 광주광역시
   "30": [991301.069516585, 1816039.953510165], // 대전광역시
   "31": [1155621.6870651902, 1727062.69578941], // 울산광역시
-  "36": [979381.304388835, 1841430.83666584], // 세종특별자치시
+  // "36": [979381.304388835, 1841430.83666584], // 세종특별자치시
   "41": [965621.8990488851, 1954345.5683645], // 경기도
-  "51": [1065114.938094025, 1980661.8453088552], // 강원특별자치도
+  "42": [1065114.938094025, 1980661.8453088552], // 강원특별자치도
   "43": [1041183.7558293699, 1848671.9260201901], // 충청북도
   "44": [918689.7963483699, 1836216.9375309348], // 충청남도
-  "52": [949568.330647045, 1748060.215177075], // 전북특별자치도
+  "45": [949568.330647045, 1748060.215177075], // 전북특별자치도
   "46": [906934.38266853, 1637218.959990745], // 전라남도
   "47": [1207219.543276005, 1843195.136606685], // 경상북도
   "48": [1081504.77257488, 1690185.644486565], // 경상남도
-  "50": [912295.3285630699, 1508716.724020285], // 제주특별자치도
+  "49": [909678.884, 1485988.314],  // [912295.3285630699, 1508716.724020285], // 제주특별자치도
+  "50": [979381.304388835, 1841430.83666584], // 세종특별자치시
 };
 
+// EPSG:5179 기준, 구코드 기준임. 즉, 하수도정보시스템 기준, tb_ms_sgg는 신코드 기준임.
 export const sigunguCenter: Record<string, [number, number]> = {
   "41820": [994886.197272545, 1979052.53325589], // 가평군
   "11680": [961673.31210415, 1944170.63969123], // 강남구
   "11740": [968769.7482373801, 1950018.61637764], // 강동구
-  "51150": [1117008.10469879, 1968660.393087245], // 강릉시
+  "42150": [1117008.10469879, 1968660.393087245], // 강릉시
   "11305": [957184.89551525, 1960948.17897649], // 강북구
   "11500": [940169.1006571399, 1952038.261591505], // 강서구
   "26440": [1125722.34144724, 1680630.4026719849], // 강서구
@@ -128,11 +168,11 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "28245": [932663.7165225251, 1951314.751646345], // 계양구
   "47830": [1074241.6005863552, 1748726.26930297], // 고령군
   "48820": [1073144.623548525, 1668111.92215727], // 고성군
-  "51820": [1079906.976889925, 2044841.96337935], // 고성군
+  "42820": [1079906.976889925, 2044841.96337935], // 고성군
   "41281": [945034.57886003, 1962467.607140625], // 고양시 덕양구
   "41285": [937759.4023643399, 1964877.5403761598], // 고양시 일산동구
   "41287": [931767.42700348, 1964473.38259711], // 고양시 일산서구
-  "52790": [918393.62804468, 1716132.826828825], // 고창군
+  "45790": [918393.62804468, 1716132.826828825], // 고창군
   "46770": [982955.40283695, 1619845.06015117], // 고흥군
   "46720": [976956.4637679299, 1689787.68075054], // 곡성군
   "44150": [962642.898486655, 1831283.240475945], // 공주시
@@ -148,14 +188,14 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "11530": [943255.85156361, 1944224.7496726601], // 구로구
   "41310": [967836.346287095, 1955821.725581055], // 구리시
   "47190": [1076297.5737083051, 1801900.2253747801], // 구미시
-  "52130": [904674.42544751, 1767715.183037305], // 군산시
+  "45130": [904674.42544751, 1767715.183037305], // 군산시
   "27720": [1103849.611897755, 1797204.1944948], // 군위군
   "41410": [948411.5776788951, 1927135.757437655], // 군포시
   "44710": [998110.87580872, 1792026.97835628], // 금산군
   "26410": [1144696.85330015, 1697028.92074261], // 금정구
   "11545": [946955.492372005, 1940271.753176735], // 금천구
   "26710": [1155182.296211175, 1700204.308554315], // 기장군
-  "52210": [935224.890489175, 1755205.56953502], // 김제시
+  "45210": [935224.890489175, 1755205.56953502], // 김제시
   "47150": [1052988.6733146599, 1783129.650228145], // 김천시
   "41570": [925936.0119416551, 1965389.1203246699], // 김포시
   "48250": [1123054.361467805, 1698359.11561172], // 김해시
@@ -166,7 +206,7 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "31140": [1164388.02782853, 1725008.616189565], // 남구
   "28200": [931330.60305263, 1937119.742216935], // 남동구
   "41360": [976250.43203106, 1960416.01281481], // 남양주시
-  "52190": [993534.846345315, 1715101.9621615452], // 남원시
+  "45190": [993534.846345315, 1715101.9621615452], // 남원시
   "48840": [1042145.28987352, 1636788.3540021451], // 남해군
   "11350": [962686.53614943, 1961831.238915105], // 노원구
   "44230": [969310.08745166, 1800569.86826501], // 논산시
@@ -187,20 +227,20 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "41250": [963148.54470934, 1991284.1699954001], // 동두천시
   "26260": [1143854.4548997101, 1691107.4825817398], // 동래구
   "11590": [950875.3949149849, 1944274.8505625948], // 동작구
-  "51170": [1137915.778823135, 1947378.462972425], // 동해시
+  "42170": [1137915.778823135, 1947378.462972425], // 동해시
   "11440": [947783.55349907, 1951598.7669664049], // 마포구
   "46110": [897040.76889998, 1645038.46904772], // 목포시
   "46840": [899587.661355305, 1664175.9893810651], // 무안군
-  "52730": [1019648.0651991949, 1770211.22681309], // 무주군
+  "45730": [1019648.0651991949, 1770211.22681309], // 무주군
   "47280": [1055620.11152262, 1855147.380883595], // 문경시
-  "28177": [926226.3594373399, 1940093.5607894901], // 미추홀구
+  "28170": [926226.3594373399, 1940093.5607894901], // 미추홀구
   "48270": [1117632.749546145, 1722736.830743895], // 밀양시
   "44180": [896412.984839845, 1817364.412693855], // 보령시
   "46780": [974939.082074685, 1646364.3864357], // 보성군
   "43720": [1018843.696119875, 1832681.50774474], // 보은군
   "47920": [1125627.975921425, 1881676.019098885], // 봉화군
   "26230": [1140857.032737495, 1686905.10585393], // 부산진구
-  "52800": [906904.98605649, 1743711.597374285], // 부안군
+  "45800": [906904.98605649, 1743711.597374285], // 부안군
   "44760": [943835.889385045, 1803731.764881715], // 부여군
   "41194": [937043.513148805, 1941917.36078241], // 부천시 소사구
   "41196": [937651.62357278, 1948088.650724335], // 부천시 오정구
@@ -214,14 +254,14 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "48240": [1048464.90586407, 1669923.18795966], // 사천시
   "26380": [1134089.12930976, 1669378.70600097], // 사하구
   "48860": [1036496.214687915, 1711373.1111203502], // 산청군
-  "51230": [1142435.56217199, 1918978.17539709], // 삼척시
+  "42230": [1142435.56217199, 1918978.17539709], // 삼척시
   "47250": [1050861.110185015, 1827830.141259105], // 상주시
   "26140": [1137931.5983933099, 1678744.3981297952], // 서구
   "27170": [1094695.438967345, 1764784.74637237], // 서구
   "28260": [922809.601799805, 1950975.3525035651], // 서구
   "29140": [941246.057711575, 1682370.2693891348], // 서구
   "30170": [985795.240808525, 1808929.24401602], // 서구
-  "50130": [912245.46105533, 1478972.2801259952], // 서귀포시
+  "49130": [912245.46105533, 1478972.2801259952], // 서귀포시
   "11410": [950162.9458121, 1953864.48715979], // 서대문구
   "44210": [909519.454637895, 1868915.7895147852], // 서산시
   "44770": [925279.862903135, 1788678.070235445], // 서천군
@@ -233,7 +273,7 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "11290": [957924.54027983, 1956512.99273417], // 성북구
   "47840": [1065227.20912238, 1769071.96163128], // 성주군
   "36110": [979381.304388835, 1841430.83666584], // 세종특별자치시
-  "51210": [1089137.1194603802, 2019900.279034885], // 속초시
+  "42210": [1089137.1194603802, 2019900.279034885], // 속초시
   "11710": [965928.83189988, 1945132.495701395], // 송파구
   "27260": [1104712.551021275, 1760363.086093105], // 수성구
   "26500": [1146933.8448469099, 1686288.07716536], // 수영구
@@ -241,7 +281,7 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "41117": [961096.623048695, 1919787.236461525], // 수원시 영통구
   "41111": [955699.294199125, 1924459.3724800851], // 수원시 장안구
   "41115": [956709.41575029, 1919672.72074137], // 수원시 팔달구
-  "52770": [962532.77503817, 1714757.02288094], // 순창군
+  "45770": [962532.77503817, 1714757.02288094], // 순창군
   "46150": [989441.17839757, 1668074.09581569], // 순천시
   "41390": [934025.6249972349, 1932609.450570995], // 시흥시
   "46910": [837068.838454425, 1628081.7615658198], // 신안군
@@ -252,14 +292,14 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "41550": [983047.68986298, 1891835.77152603], // 안성시
   "41173": [951774.092625505, 1933701.863194715], // 안양시 동안구
   "41171": [947757.35105343, 1934091.7197804102], // 안양시 만안구
-  "51800": [1044799.8868826301, 2018930.475621245], // 양구군
+  "42800": [1044799.8868826301, 2018930.475621245], // 양구군
   "48330": [1140452.0009971252, 1713003.89300298], // 양산시
-  "51830": [1097181.1822994999, 2001875.93591869], // 양양군
-  "41630": [957059.65493005, 1978556.8707086649], // 양주시
+  "42830": [1097181.1822994999, 2001875.93591869], // 양양군
+  "41710": [957059.65493005, 1978556.8707086649], // 양주시
   "11470": [943115.85871501, 1947726.50098438], // 양천구
   "41830": [1006799.81121338, 1946640.3454016], // 양평군
   "46130": [1005710.6789662449, 1606473.622557845], // 여수시
-  "41670": [1007389.488139985, 1920986.5590416798], // 여주시
+  "41730": [1007389.488139985, 1920986.5590416798], // 여주시
   "28185": [924301.1973107599, 1932716.5874987599], // 연수구
   "26470": [1143967.4104618952, 1688206.29479672], // 연제구
   "41800": [955142.1788103101, 2011772.731874695], // 연천군
@@ -270,7 +310,7 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "11560": [948221.9355719599, 1946989.433783595], // 영등포구
   "46830": [918568.42419672, 1645644.03685685], // 영암군
   "47760": [1147157.8720550952, 1855483.55416634], // 영양군
-  "51750": [1089601.7085692, 1913792.65877573], // 영월군
+  "42750": [1089601.7085692, 1913792.65877573], // 영월군
   "47210": [1096747.798418135, 1876468.75553605], // 영주시
   "47230": [1128168.955619915, 1779896.3669964802], // 영천시
   "44810": [935536.49511435, 1852175.0178411552], // 예산군
@@ -279,7 +319,7 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "43730": [1016925.1630849349, 1812306.15335931], // 옥천군
   "28720": [831017.06725137, 1941763.7671776651], // 옹진군
   "46890": [934681.072970785, 1580260.96434381], // 완도군
-  "52710": [971714.974980355, 1764297.860421155], // 완주군
+  "45710": [971714.974980355, 1764297.860421155], // 완주군
   "11170": [954152.265892775, 1948105.11473188], // 용산구
   "41463": [966362.167328945, 1919086.059435395], // 용인시 기흥구
   "41465": [962751.309054115, 1926067.760215145], // 용인시 수지구
@@ -287,7 +327,7 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "47940": [1339459.86503077, 1939972.251018405], // 울릉군
   "31710": [1152103.383022245, 1727062.6953479801], // 울주군
   "47930": [1158508.6557213152, 1879083.142978875], // 울진군
-  "51130": [1042675.604280725, 1925192.470561375], // 원주시
+  "42130": [1042675.604280725, 1925192.470561375], // 원주시
   "30200": [985050.9636310451, 1820539.200680445], // 유성구
   "11380": [949045.72456328, 1957730.2124330248], // 은평구
   "43770": [1010863.03644352, 1888460.954926385], // 음성군
@@ -296,17 +336,18 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "41430": [954677.940289845, 1928890.756176705], // 의왕시
   "41150": [962517.29720437, 1970466.861837395], // 의정부시
   "41500": [998578.52141335, 1911408.9081171248], // 이천시
-  "52140": [954517.27659099, 1780482.64843965], // 익산시
-  "51810": [1065461.7186508449, 2010839.9914423148], // 인제군
-  "52750": [978229.1338949, 1735882.14962747], // 임실군
+  "45140": [954517.27659099, 1780482.64843965], // 익산시
+  "42810": [1065461.7186508449, 2010839.9914423148], // 인제군
+  "45750": [978229.1338949, 1735882.14962747], // 임실군
   "46880": [932255.0392670301, 1705063.362106785], // 장성군
-  "52740": [1002766.6532682499, 1739693.270420835], // 장수군
+  "45740": [1002766.6532682499, 1739693.270420835], // 장수군
   "46800": [946864.73876017, 1628580.0165673052], // 장흥군
+  "45110": [965336.86328101, 1761811.9640769851], // 전주시
   "52113": [965336.86328101, 1761811.9640769851], // 전주시 덕진구
   "52111": [966893.605588815, 1754468.0213283598], // 전주시 완산구
-  "51770": [1110360.32014753, 1931013.538670365], // 정선군
-  "52180": [947098.239651715, 1735070.37728938], // 정읍시
-  "50110": [912295.3285630699, 1517557.88079664], // 제주시
+  "42770": [1110360.32014753, 1931013.538670365], // 정선군
+  "45180": [947098.239651715, 1735070.37728938], // 정읍시
+  "49110": [910293.463, 1500596.952], //[912295.3285630699, 1517557.88079664], // 제주시
   "43150": [1055671.53255738, 1893115.04197246], // 제천시
   "11110": [954639.31671291, 1955652.65017071], // 종로구
   "11140": [955326.326625775, 1951065.0090038702], // 중구
@@ -318,7 +359,7 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "11260": [964157.58830932, 1955182.665424475], // 중랑구
   "43745": [1009013.34585424, 1864734.46162539], // 증평군
   "46900": [870540.7578711801, 1597916.46618356], // 진도군
-  "52720": [995028.62264954, 1758625.23076353], // 진안군
+  "45720": [995028.62264954, 1758625.23076353], // 진안군
   "48170": [1057167.869451315, 1689727.04548209], // 진주시
   "43750": [994342.7517215649, 1875793.7535851048], // 진천군
   "48740": [1090841.266427235, 1726085.44764784], // 창녕군
@@ -329,7 +370,7 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "48129": [1111617.62626141, 1680996.6599733299], // 창원시 진해구
   "44131": [974478.67761805, 1862026.08139811], // 천안시 동남구
   "44133": [971707.02854063, 1875704.530427825], // 천안시 서북구
-  "51780": [997447.306165415, 2024301.05104793], // 철원군
+  "42780": [997447.306165415, 2024301.05104793], // 철원군
   "47820": [1116479.97088183, 1746481.442573125], // 청도군
   "47750": [1139213.58132652, 1821067.804006115], // 청송군
   "44790": [941752.03871163, 1827462.3607307798], // 청양군
@@ -337,16 +378,16 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "43112": [994258.23710022, 1838908.2251619152], // 청주시 서원구
   "43114": [997183.756680205, 1857171.4242312452], // 청주시 청원구
   "43113": [989161.30366111, 1849501.26145491], // 청주시 흥덕구
-  "51110": [1023515.451806125, 1986727.7291947599], // 춘천시
+  "42110": [1023515.451806125, 1986727.7291947599], // 춘천시
   "43130": [1034982.8699803599, 1889790.67989893], // 충주시
   "47850": [1086736.697665845, 1779277.075473485], // 칠곡군
-  "51190": [1131634.14282853, 1912631.8063723398], // 태백시
+  "42190": [1131634.14282853, 1912631.8063723398], // 태백시
   "44825": [864678.84145598, 1854929.12571281], // 태안군
   "48220": [1085316.421521755, 1640596.827168765], // 통영시
   "41480": [941812.744809255, 1983528.9263305948], // 파주시
-  "51760": [1088652.567431635, 1949959.4658569149], // 평창군
+  "42760": [1088652.567431635, 1949959.4658569149], // 평창군
   "41220": [952557.5035727851, 1891740.1058186102], // 평택시
-  "41650": [979667.7288193901, 1996457.8400075398], // 포천시
+  "41810": [979667.7288193901, 1996457.8400075398], // 포천시
   "47111": [1173941.15980316, 1776164.6804896551], // 포항시 남구
   "47113": [1155413.511896325, 1798939.39325854], // 포항시 북구
   "41450": [974619.56368595, 1947933.69704679], // 하남시
@@ -358,10 +399,10 @@ export const sigunguCenter: Record<string, [number, number]> = {
   "46820": [907157.24936254, 1615346.232287635], // 해남군
   "26350": [1151062.0301465848, 1690808.34175552], // 해운대구
   "44800": [919404.43702764, 1841255.1935457601], // 홍성군
-  "51720": [1049442.09422194, 1972233.65191397], // 홍천군
+  "42720": [1049442.09422194, 1972233.65191397], // 홍천군
   "41590": [941810.22622111, 1906896.59289364], // 화성시
   "46790": [955520.512544285, 1669429.020528105], // 화순군
-  "51790": [1015098.9945956401, 2015706.532260655], // 화천군
-  "51730": [1046904.40402372, 1943541.6685614302], // 횡성군
+  "42790": [1015098.9945956401, 2015706.532260655], // 화천군
+  "42730": [1046904.40402372, 1943541.6685614302], // 횡성군
 };
 
diff --git a/packages/common/business_components/src/ui/popover_ui/index.tsx b/packages/common/business_components/src/ui/popover_ui/index.tsx
index 39094bc24..bc7cb0b76 100644
--- a/packages/common/business_components/src/ui/popover_ui/index.tsx
+++ b/packages/common/business_components/src/ui/popover_ui/index.tsx
@@ -13,7 +13,7 @@ export default function PopoverUi({
       <>
         <Popover>
            <PopoverTrigger>{childrenTriger}</PopoverTrigger>
-          <PopoverContent className={bodyClassName}>
+          <PopoverContent className={bodyClassName} onOpenAutoFocus={(e) => e.preventDefault()}>
           {childrenBody}
           </PopoverContent>
         </Popover>
diff --git a/packages/common/business_components/src/ui/sdmInsertForm/form.tsx b/packages/common/business_components/src/ui/sdmInsertForm/form.tsx
index b2499ab43..c5c9ef809 100644
--- a/packages/common/business_components/src/ui/sdmInsertForm/form.tsx
+++ b/packages/common/business_components/src/ui/sdmInsertForm/form.tsx
@@ -15,6 +15,7 @@ export type DemandCompType = {
   bzmnNo: string | "";
   dmdCoNm: string | "";
   daddr: string | "";
+  daddr2: string | "";
   telno: string | "";
   rgtr: string | "";
   mdfr?: string;
@@ -38,6 +39,7 @@ export type DemandCompType = {
   crmty: number | "";
   rmrk: string | "";
   reqDt: string | "";
+  zip: string | "";
 };
 
 type SelectDataType = {
@@ -50,9 +52,11 @@ interface FormSchema {
   sggCd: string;
   dmdCoNm: string;
   dmdInfoId: string;
+  zip?: string;
   daddr: string;
+  daddr2?: string;
   telno: string;
-  bznmTotNo?: string;
+  bznmTotNo?: string; // 종사업자등록번호
   rgtr?: string | "";
   mdfr?: string | null;
   dmdAplyPswd?: string;
@@ -62,9 +66,9 @@ interface FormSchema {
 interface SdmRegFormProps {
   form: UseFormReturn<FormSchema>;
   onCheckboxChange?: (checked: boolean) => void;
-  selectSidoData: SelectDataType[];
-  selectSigunData: SelectDataType[];
-  dataList: DemandCompType[];
+  selectSidoData: SelectDataType[];  //시/도 데이터
+  selectSigunData: SelectDataType[]; //시/군/구 데이터
+  dataList: DemandCompType[];        //수요처 목록
   rtnValue: (searchText: string, pageCnt: number) => void;
   setIsDuplicate: (value: boolean) => void;
   updateList?: DemandCompType;
@@ -97,7 +101,7 @@ export function SdmRegForm({
   const [orgBznmNo, setOrgBznmNo] = useState<string>("");
   const [updateCoNm, setUpdateNm] = useState<string>("");
   const [isZipModalOpen, setIsZipModalOpen] = useState<boolean>(false);
-  const [zipId, setZipId] = useState<number | undefined>(undefined);
+  const [zoneNo, setZoneNo] = useState<string>("");
   const [address, setAddress] = useState<string | undefined>("");
   const [detailedAddress, setDetailedAddress] = useState<string>("");
 
@@ -219,7 +223,12 @@ export function SdmRegForm({
         handleCheckboxChange(false);
       }
 
+      setZoneNo(rtnCompData?.zip || "");
+      form.setValue("zip", rtnCompData?.zip || "");
+      setAddress(rtnCompData?.daddr || "");
+      setDetailedAddress(rtnCompData?.daddr2 || "");
       form.setValue("daddr", rtnCompData?.daddr || "");
+      form.setValue("daddr2", rtnCompData?.daddr2 || "");
       form.setValue("telno", rtnCompData?.telno || "");
 
       // 선택을 했을 때 중복 상태를 true로 설정
@@ -235,6 +244,47 @@ export function SdmRegForm({
     [form],
   );
 
+  const applyZipRegion = useCallback(
+    (ctpvNm?: string, sggNm?: string) => {
+      const normalizeRegionName = (value?: string) =>
+        value?.replace(/\s+/g, "").trim() ?? "";
+
+      const sidoName = normalizeRegionName(ctpvNm);
+      const sigunName = normalizeRegionName(sggNm);
+      if (!sidoName) return;
+
+      const matchedSido = selectSidoData.find(
+        (item) => normalizeRegionName(item.text) === sidoName,
+      );
+      if (!matchedSido) return;
+
+      setSidoValue(matchedSido.val);
+      form.setValue("ctpvCd", matchedSido.val, { shouldValidate: true });
+      initializeSigunData(matchedSido.val);
+
+      if (!sigunName) return;
+
+      const sigunCandidates = selectSigunData.filter(
+        (item) => item.val.substring(0, 2) === matchedSido.val,
+      );
+
+      const matchedSigun =
+        sigunCandidates.find(
+          (item) => normalizeRegionName(item.text) === sigunName,
+        ) ??
+        sigunCandidates.find((item) => {
+          const itemName = normalizeRegionName(item.text);
+          return itemName.includes(sigunName) || sigunName.includes(itemName);
+        });
+
+      if (!matchedSigun) return;
+
+      setSigunValue(matchedSigun.val);
+      form.setValue("sggCd", matchedSigun.val, { shouldValidate: true });
+    },
+    [form, initializeSigunData, selectSidoData, selectSigunData],
+  );
+
   const bznNoChange = useCallback(
     (
       e: React.ChangeEvent<HTMLInputElement>,
@@ -275,9 +325,18 @@ export function SdmRegForm({
         handleCheckboxChange(true);
       }
       form.setValue("dmdInfoId", updateList?.dmdInfoId.slice(0, 10));
+      setZoneNo(updateList?.zip || "");
+      form.setValue("zip", updateList?.zip || "");
+      setAddress(updateList?.daddr || "");
+      setDetailedAddress(updateList?.daddr2 || "");
+      form.setValue("daddr2", updateList?.daddr2 || "");
       setUpdateNm(updateList?.dmdCoNm);
       // setSigunValue(updateList?.sggCd)
     } else {
+      setZoneNo("");
+      setAddress("");
+      setDetailedAddress("");
+      form.setValue("daddr2", "");
       handleCheckboxChange(true);
     }
   }, [updateList, form]);
@@ -286,14 +345,18 @@ export function SdmRegForm({
     console.log("form.formState.errors ", form.formState.errors);
   }, [form.formState.errors]);
 
-  // 폼 제출 전에 주소 합치기
+  // 주소와 상세주소를 각각 별도 필드로 유지합니다.
   useEffect(() => {
-    // address와 detailedAddress를 합쳐서 daddr에 설정
-    if (address) {
-      const fullAddress = `${address || ""} ${detailedAddress || ""}`.trim();
-      form.setValue("daddr", fullAddress, {shouldValidate: true });
-    }
-  }, [address, detailedAddress, form]);
+    form.setValue("daddr", address || "", { shouldValidate: true });
+  }, [address, form]);
+
+  useEffect(() => {
+    form.setValue("daddr2", detailedAddress || "", { shouldValidate: true });
+  }, [detailedAddress, form]);
+
+  useEffect(() => {
+    form.setValue("zip", zoneNo, { shouldValidate: true });
+  }, [form, zoneNo]);
 
 
   const formFields: Array<{
@@ -427,10 +490,10 @@ export function SdmRegForm({
                   type="text"
                   className="!text-xl text-gray-600 w-64"
                   readOnly={true}
-                  value={zipId?.toString() ?? ""}
+                  value={form.watch("zip") ?? ""}
                   placeholder="우편번호"
                 />
-                <Button className="px-4 py-2 rounded-md" onClick={() => setIsZipModalOpen(true)}>우편번호 검색</Button>
+                <Button type="button" className="px-4 py-2 rounded-md" onClick={() => setIsZipModalOpen(true)}>우편번호 검색</Button>
               </div>
               {/* 주소 */}
               <Input
@@ -449,6 +512,7 @@ export function SdmRegForm({
                 onChange={(e) => {
                   const value = e.target.value;
                   setDetailedAddress(value);
+                  form.setValue("daddr2", value, { shouldValidate: true });
                 }}
                 value={detailedAddress ?? ""}
               />
@@ -581,9 +645,12 @@ export function SdmRegForm({
         open={isZipModalOpen}
         onOpenChange={setIsZipModalOpen}
         onSelect={(zip) => {
-          setZipId(zip.zipId);
+          setZoneNo(zip.zoneNo || "");
           setAddress(zip.zipAddr || "");
           setDetailedAddress("");
+          form.setValue("zip", zip.zoneNo || "", { shouldValidate: true });
+          form.setValue("daddr2", "", { shouldValidate: true });
+          applyZipRegion(zip.ctpvNm, zip.sggNm);
         }}
       />
     </>
diff --git a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx
index ef9dbeed2..09c357c41 100644
--- a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx
+++ b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx
@@ -32,6 +32,7 @@ const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean ,up
     .min(1, "사업자등록번호를 입력해주세요")
     .regex(/^\d{10}$/, "사업자등록번호는 10자리 숫자만 입력 가능합니다")
     .refine(() => isBznmTotNoDisabled ? !isDuplicate : true, "이미 등록된 사업자등록번호입니다"),
+  zip: z.string().optional(),
   bznmTotNo: isBznmTotNoDisabled 
     ? z.string().optional()
     : z.string()
@@ -41,6 +42,7 @@ const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean ,up
     .min(1, "주소를 입력해주세요")
     // .min(6, "주소는 6자 이상 입력해주세요")
     .max(40, "주소는 40자 이내로 입력해주세요"),
+  daddr2: z.string().optional(),
   telno: z.string()
     .min(8, "전화번호는 8자 이상 입력해주세요")
     .max(11, "전화번호는 11자 이내로 입력해주세요")
@@ -73,8 +75,10 @@ const defaultValues: FormSchema = {
   sggCd: '',
   dmdCoNm: '',
   dmdInfoId: '',
+  zip: '',
   bznmTotNo: '',
   daddr: '',
+  daddr2: '',
   telno: '',
   rgtr: '',
   mdfr: '',
@@ -88,13 +92,13 @@ const defaultValues: FormSchema = {
  * @param selectSigunData 시/군/구 데이터
  * @param dataList 수요처 목록
  * @param rtnValue 검색 결과(텍스트) 콜백
- * @param rtnInputData 수요처 리스트 콜백
+ * @param rtnInputData 수요처관리 콜백 : 등록/수정 처리
  * @returns 
  */
+export default function SdmInsertForm({selectSidoData, selectSigunData, dataList, rtnValue, rtnInputData
+  , bodyClassNm, updateList, readOnly, openNetwork}: thisProps) {
 
-export default function SdmInsertForm({selectSidoData, selectSigunData, dataList, rtnValue, rtnInputData,bodyClassNm, updateList,readOnly,openNetwork}: thisProps) {
-
-  const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false);
+  const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false); // 종사업자등록번호 해당없음
   const [isDuplicate, setIsDuplicate] = useState(false);
   const formSchema = createFormSchema(isBznmTotNoDisabled, isDuplicate, updateList  );
 
@@ -139,12 +143,14 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
         ...data,
         dmdInfoId,
         bzmnNo: data.dmdInfoId,
+        daddr: data.daddr?.trim() || "",
+        daddr2: data.daddr2?.trim() || "",
         rgtr: myUUID ,
       };
 
       
       /* await insertSdmData(formData); */
-      rtnInputData(formData as unknown as DemandCompType);
+      rtnInputData(formData as unknown as DemandCompType); // 수요처 등록/수정 처리
       
 
       //router.push(`/pages/sdmMng/sdmInfoInsert?${queryParams.toString()}`);
@@ -157,7 +163,7 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
     <>
       <div className="text-center mb-8">
         <h1 className="text-4xl font-bold text-gray-900 underline">
-        {readOnly==true? '수요처 정보':'수요처 등록'}
+        {!updateList? '수요처 등록' :readOnly==true? '수요처 정보':'수요처 수정'}
         </h1>
       </div>
 
@@ -194,4 +200,4 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
       <Toaster position="top-center" />
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/common/business_components/src/ui/search_address/SearchAddressModal.tsx b/packages/common/business_components/src/ui/search_address/SearchAddressModal.tsx
index 699d3cc50..013cb7a38 100644
--- a/packages/common/business_components/src/ui/search_address/SearchAddressModal.tsx
+++ b/packages/common/business_components/src/ui/search_address/SearchAddressModal.tsx
@@ -1,9 +1,17 @@
-import { Button, Input, Label, cn } from "@common/components";
+/**
+ * 주소검색
+ */
+import { Button, Input, cn } from "@common/components";
 import React, { useState, useEffect } from "react";
 import { UiModal } from "../dialog_ui";
 import { UiTable } from "../table";
-import type { Zip, ZipSearchParams } from "./zipService";
-import { findAddress } from "./findAddress";
+import {
+  fetchPostcodeSuggestions,
+  findAddress,
+  parseZipSearchInput,
+  type Zip,
+  type ZipSearchParams,
+} from "./zipService";
 
 interface SearchAddressModalProps {
   open: boolean;
@@ -11,20 +19,35 @@ interface SearchAddressModalProps {
   onSelect: (zip: Zip) => void;
 }
 
+/**
+ * 주소 검색 값 감시
+ * @param value 
+ * @param delay 
+ * @returns 
+ */
+function useDebouncedValue<T>(value: T, delay = 250) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timeoutId);
+  }, [delay, value]);
+
+  return debouncedValue;
+}
+
 export function SearchAddressModal({ open, onOpenChange, onSelect }: SearchAddressModalProps) {
   const PAGE_SIZE = 10;
   const [curPage, setCurPage] = useState<number>(1);
+  const [searchInput, setSearchInput] = useState<string>("");
+  const debouncedSearchInput = useDebouncedValue(searchInput, 250);
   const [zipSearchResults, setZipSearchResults] = useState<Zip[]>([]);
-  const [zipTotalElements, setZipTotalElements] = useState<number>(-1);
-  const [searchQuery, setSearchQuery] = useState<ZipSearchParams>({
-    roadNm: "",
-    bldgNoMno: null,
-    bldgNoSno: null,
-    page: 1,
-    size: PAGE_SIZE
-  });
+  const [zipTotalElements, setZipTotalElements] = useState<number>(-1); //주소 검색 결과 건수
+  const [searchMessage, setSearchMessage] = useState<string>("");
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState<boolean>(true);
+  const [searchQuery, setSearchQuery] = useState<ZipSearchParams | undefined>(undefined);
   const [isResetPage, setIsResetPage] = useState<boolean>(false);
-  const [isResetSelection] = useState<boolean>(false);
   const [selectedRowIndex, setSelectedRowIndex] = useState<number | undefined>(undefined);
   const [selectedZip, setSelectedZip] = useState<Zip>();
   const [isSelectedZip, setIsSelectedZip] = useState<boolean>(false);
@@ -33,15 +56,13 @@ export function SearchAddressModal({ open, onOpenChange, onSelect }: SearchAddre
   useEffect(() => {
     if (open) {
       setCurPage(1);
+      setSearchInput("");
       setZipSearchResults([]);
       setZipTotalElements(-1);
-      setSearchQuery({
-        roadNm: "",
-        bldgNoMno: null,
-        bldgNoSno: null,
-        page: 0,
-        size: PAGE_SIZE
-      });
+      setSearchMessage("");
+      setSuggestions([]);
+      setShowSuggestions(true);
+      setSearchQuery(undefined);
       setSelectedZip(undefined);
       setIsSelectedZip(false);
       setSelectedRowIndex(undefined);
@@ -50,42 +71,119 @@ export function SearchAddressModal({ open, onOpenChange, onSelect }: SearchAddre
     }
   }, [open]);
 
+  useEffect(() => {
+    if (!open) return;
+
+    const keyword = debouncedSearchInput.trim();
+    if (!keyword) {
+      setSuggestions([]);
+      return;
+    }
+    if (!showSuggestions) {
+      setSuggestions([]);
+      return;
+    }
+
+    let alive = true;
+
+    const fetchSuggestions = async () => {
+      try {
+        const nextSuggestions = await fetchPostcodeSuggestions(keyword);
+        if (!alive) return;
+        setSuggestions(nextSuggestions);
+      } catch {
+        if (!alive) return;
+        setSuggestions([]);
+      }
+    };
+
+    void fetchSuggestions();
+
+    return () => {
+      alive = false;
+    };
+  }, [debouncedSearchInput, open, showSuggestions]);
+
   // Pagination Effect
   useEffect(() => {
-    if (!open || zipTotalElements === -1) return;
+    if (!open || zipTotalElements === -1 || !searchQuery) return; //  주소 검색 결과 건수 초기값이 -1일 때는 아직 검색 전 상태
 
     // Correctly update query for pagination without mutation
     const nextPage = curPage - 1;
     if (searchQuery.page !== nextPage) {
-        const newQuery = { ...searchQuery, page: nextPage };
-        setSearchQuery(newQuery);
+      const newQuery = { ...searchQuery, page: nextPage };
+      setSearchQuery(newQuery);
+      setSelectedZip(undefined);
+      setIsSelectedZip(false);
+      setSelectedRowIndex(undefined);
 
-        const fetchAddress = async () => {
+      const fetchAddressByPage = async () => {
+        try {
           const result = await findAddress(newQuery);
-          setZipSearchResults(result?.content || []);
-        };
-        fetchAddress();
+          setSearchMessage("");
+          setZipSearchResults(result?.content || []); // 주소검색결과
+        } catch {
+          setZipSearchResults([]);
+          setSearchMessage("주소 검색 중 오류가 발생했습니다.");
+        }
+      };
+      void fetchAddressByPage();
     }
-  }, [curPage, open, zipTotalElements]);
+  }, [curPage, open, searchQuery, zipTotalElements]);
 
-  const handleCellClick = (index: any) => {
-    setSelectedZip(zipSearchResults[index]);
+  const handleCellClick = (index: number | undefined) => {
+    if (index === undefined) return;
+    const zip = zipSearchResults[index];
+    if (!zip) return;
+    setSelectedZip(zip);
     setIsSelectedZip(true);
     setSelectedRowIndex(index);
+    onSelect(zip);
+    onOpenChange(false);
   };
 
   const handleSearch = async (e: React.FormEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+    e.preventDefault(); // 폼 제출 동작을 막음.
+    e.stopPropagation(); // 이벤트 버블링을 막음. 이벤트가 부모 컴포넌트나 바깥쪽 핸들러로 올라가지 않도록 막음.
+    setShowSuggestions(false);
+    setSuggestions([]);
 
-    const query = { ...searchQuery, page: 0 };
+    const parsed = parseZipSearchInput(searchInput, 1);
+    if (!parsed.ok) {
+      setSearchMessage(parsed.message);
+      setZipSearchResults([]);
+      setZipTotalElements(-1);
+      setSelectedZip(undefined);
+      setIsSelectedZip(false);
+      setSelectedRowIndex(undefined);
+      return;
+    }
+
+    const query: ZipSearchParams = {
+      roadNm: parsed.value.roadNm,
+      bldgNoMno: parsed.value.bldgNoMno,
+      bldgNoSno: parsed.value.bldgNoSno,
+      page: parsed.value.page - 1,
+      size: PAGE_SIZE,
+    };
+
+    setSearchMessage("");
     setSearchQuery(query);
     setCurPage(1);
     setIsResetPage(true);
+    setSelectedZip(undefined);
+    setIsSelectedZip(false);
+    setSelectedRowIndex(undefined);
 
-    const result = await findAddress(query);
-    setZipSearchResults(result?.content || []);
-    setZipTotalElements(result?.totalElements || 0);
+    try {
+      const result = await findAddress(query);
+      setZipSearchResults(result?.content || []);
+      setZipTotalElements(result?.totalElements ?? 0); //주소 검색 결과 건수
+    } catch {
+      setZipSearchResults([]);
+      setZipTotalElements(-1);
+      setSearchMessage("주소 검색 중 오류가 발생했습니다.");
+    }
 
     setTimeout(() => setIsResetPage(false), 100);
   };
@@ -97,6 +195,8 @@ export function SearchAddressModal({ open, onOpenChange, onSelect }: SearchAddre
     }
   };
 
+  const showSuggest = open && showSuggestions && searchInput.trim().length >= 1 && suggestions.length > 0;
+
   return (
     <UiModal
       headerTitle="주소 검색"
@@ -123,83 +223,69 @@ export function SearchAddressModal({ open, onOpenChange, onSelect }: SearchAddre
         <>
           <form
             onSubmit={handleSearch}
-            className="mb-4 space-y-2"
+            className="mb-4 w-full space-y-2"
           >
-            <div className="card card-border !m-0 flex flex-col gap-4 p-4">
-              <div className="grid grid-cols-3 gap-4">
-                <div className="flex flex-col">
-                  <Label className="mb-1 font-bold text-base">도로명</Label>
-                  <Input
-                    value={searchQuery.roadNm || ""}
-                    onChange={(e) =>
-                      setSearchQuery({
-                        ...searchQuery,
-                        roadNm: e.target.value,
-                      })
-                    }
-                    placeholder="예: 테헤란로"
-                    className="!text-[1.3rem]"
-                  />
-                </div>
-
-                <div className="flex flex-col">
-                  <Label className="mb-1 text-base">건물본번</Label>
-                  <Input
-                    type="number"
-                    value={searchQuery.bldgNoMno ?? ""}
-                    onChange={(e) => {
-                      const value = e.target.value
-                        ? parseInt(e.target.value)
-                        : null;
-                      setSearchQuery({
-                        ...searchQuery,
-                        bldgNoMno: value,
-                      });
-                    }}
-                    placeholder="예: 123"
-                    className="!text-[1.3rem]"
-                  />
-                </div>
-
-                <div className="flex flex-col">
-                  <Label className="mb-1 text-base">건물부번</Label>
-                  <Input
-                    type="number"
-                    value={searchQuery.bldgNoSno ?? ""}
-                    onChange={(e) => {
-                      const value = e.target.value
-                        ? parseInt(e.target.value)
-                        : null;
-                      setSearchQuery({
-                        ...searchQuery,
-                        bldgNoSno: value,
-                      });
-                    }}
-                    placeholder="예: 45"
-                    className="!text-[1.3rem]"
-                  />
+            <div className="card card-border !m-0 flex flex-col gap-3 p-4">
+              <div className="relative">
+                <div className="flex items-center gap-4">
+                  <div className="relative flex-1">
+                    <Input
+                      value={searchInput}
+                      onChange={(e) => {
+                        setSearchInput(e.target.value);
+                        setShowSuggestions(true);
+                      }}
+                      placeholder="예) 테헤란로 152-1"
+                      className="!text-[1.3rem]"
+                    />
+                    {showSuggest && (
+                      <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-50 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg">
+                        {suggestions.map((suggestion) => (
+                          <button
+                            key={suggestion}
+                            type="button"
+                            className="flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-gray-50"
+                            onClick={() => {
+                              setSearchInput(suggestion);
+                              setShowSuggestions(false);
+                              setSuggestions([]);
+                            }}
+                          >
+                            <span className="truncate text-gray-800">{suggestion}</span>
+                            <span className="ml-4 text-gray-400">↵</span>
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                  <Button className="rounded-md shrink-0" type="submit">검색</Button>
                 </div>
               </div>
-
-              <div className="flex justify-end">
-                <Button className="rounded-md" type="submit">검색</Button>
+              <div className="text-sm text-gray-600">
+                {searchMessage || "도로명과 건물번호를 함께 입력해 주세요. 예) 테헤란로 152-1"}
               </div>
             </div>
           </form>
 
           {zipTotalElements > 0 && (
-            <UiTable
-              headName=''
-              tableData={zipSearchResults}
-              headlist={[{ id: 'zoneNo', title: '우편번호' }, { id: 'zipAddr', title: '주소' }]}
-              pageSize={PAGE_SIZE}
-              total={zipTotalElements}
-              cellClick={handleCellClick}
-              onPageChange={setCurPage}
-              resetPageNo={isResetPage}
-              resetSelection={isResetSelection}
-              index={selectedRowIndex}
-            />
+            <div className="w-full">
+              <UiTable
+                headName=""
+                tableData={zipSearchResults}
+                headlist={[
+                  { id: "zoneNo", title: "우편번호", widthPercent: 18 },
+                  { id: "zipAddr", title: "주소", widthPercent: 82 },
+                ]}
+                pageSize={PAGE_SIZE}
+                total={zipTotalElements}
+                cellClick={handleCellClick}
+                onPageChange={setCurPage}
+                resetPageNo={isResetPage}
+                index={selectedRowIndex}
+                widthFixed={true}
+                className="!m-0 w-auto"
+              />
+            </div>
           )}
           {zipTotalElements === 0 && (
             <div className={cn("flex h-96 flex-col items-center justify-center gap-4")}>
diff --git a/packages/common/business_components/src/ui/search_address/findAddress.ts b/packages/common/business_components/src/ui/search_address/findAddress.ts
deleted file mode 100644
index 5e5ba4360..000000000
--- a/packages/common/business_components/src/ui/search_address/findAddress.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-
-// const Key = 'U01TX0FVVEgyMDI1MDgyODE0MTAxNzExNjEyMjA'
-// const addresssKey = 'devU01TX0FVVEgyMDI1MDgyNTEwMzkwNDExNjEwNTM='; //인증키 만료일은  2025-11-23
-
-import type { Zip, ZipSearchParams } from "./zipService";
-
-/**
- * 주소 API 응답 타입
- * https://business.juso.go.kr/addrlink/main.do 해당 사이트 참조
- */
-export type AddressApiResponse = {
-    results: {
-        common: {
-            errorMessage: string;
-            countPerPage: string;
-            totalCount: string;
-            errorCode: string;
-            currentPage: string;
-        };
-        juso: addressType[];
-    };
-}
-
-export type addressType = {
-    detBdNmList: string;
-    engAddr: string;
-    rn: string;
-    emdNm: string;
-    zipNo: string;
-    roadAddrPart2: string;
-    emdNo: string;
-    sggNm: string;
-    jibunAddr: string;
-    siNm: string;
-    roadAddrPart1: string;
-    bdNm: string;
-    admCd: string;
-    udrtYn: string;
-    lnbrMnnm: string;
-    roadAddr: string;
-    lnbrSlno: string;
-    buldMnnm: string;
-    bdKdcd: string;
-    liNm: string;
-    rnMgtSn: string;
-    mtYn: string;
-    bdMgtSn: string;
-    buldSlno: string;
-}
-
-/**
- * 주소에 따른 검색
- * @param search : 검색어
- * @returns  addressType[]  주소 배열
- */
-export const findAddress = async (searchQuery: ZipSearchParams): Promise<any> => {
-    if (!searchQuery) return [];
-
-    // 쿼리 파라미터 생성
-    const params = new URLSearchParams();
-    if (searchQuery.roadNm) params.append('roadNm', searchQuery.roadNm);
-    if (searchQuery.bldgNoMno != null) params.append('bldgNoMno', searchQuery.bldgNoMno.toString());
-    if (searchQuery.bldgNoSno != null) params.append('bldgNoSno', searchQuery.bldgNoSno.toString());
-    if (searchQuery.page != null) params.append('page', searchQuery.page.toString());
-    if (searchQuery.size != null) params.append('size', searchQuery.size.toString());
-
-    const url = `/cms-service/api/v1/zips?${params.toString()}`;
-    try {
-        const response = await fetch(url);
-        if (!response.ok) throw new Error('Network response was not ok');
-
-        const data = await response.json();
-        if (data) return data
-        else return [];
-    } catch (error) {
-        console.error('Error fetching address data:', error);
-        return [];
-    }
-
-}
-
-
-
-export const searchFilter = (search: string) => {
-
-
-    if (search.length > 0) {
-        //특수문자 제거
-        const expText = /[%=><]/;
-        if (expText.test(search) == true) {
-            alert("특수문자를 입력 할수 없습니다.");
-            search = search.split(expText).join("");
-            return false;
-        }
-
-        //특정문자열(sql예약어의 앞뒤공백포함) 제거
-        const sqlArray = [
-            //sql 예약어
-            "OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE", "DROP", "EXEC",
-            "UNION", "FETCH", "DECLARE", "TRUNCATE"
-        ]
-
-        let regex;
-        for (let i = 0; i < sqlArray.length; i++) {
-            regex = new RegExp(sqlArray[i] as string, "gi");
-
-            if (regex.test(search)) {
-                alert("\"" + sqlArray[i] + "\"와(과) 같은 특정문자로 검색할 수 없습니다.");
-                search = search.replace(regex, "");
-                return false;
-            }
-        }
-    }
-    return true;
-
-
-
-}
diff --git a/packages/common/business_components/src/ui/search_address/index.ts b/packages/common/business_components/src/ui/search_address/index.ts
index b790bb492..60b20e82c 100644
--- a/packages/common/business_components/src/ui/search_address/index.ts
+++ b/packages/common/business_components/src/ui/search_address/index.ts
@@ -1,3 +1,2 @@
 export * from "./SearchAddressModal";
-export * from "./findAddress";
 export * from "./zipService";
diff --git a/packages/common/business_components/src/ui/search_address/zipService.ts b/packages/common/business_components/src/ui/search_address/zipService.ts
index 03e4a8ccc..7cdba0992 100644
--- a/packages/common/business_components/src/ui/search_address/zipService.ts
+++ b/packages/common/business_components/src/ui/search_address/zipService.ts
@@ -64,3 +64,275 @@ export interface Zip {
 }
 
 export type ZipList = PageableList<Zip>;
+
+export interface ParsedZipSearchParams {
+    roadNm: string;
+    bldgNoMno: number;
+    bldgNoSno: number | null;
+    page: number;
+}
+
+export type ParseZipSearchInputResult =
+    | { ok: true; value: ParsedZipSearchParams; keyword: string }
+    | { ok: false; message: string };
+
+type SuggestionSeed = {
+    roadNm: string;
+    bldgNoMno: number;
+};
+
+/**
+ * 주소 검색 API를 호출해 우편번호/주소 목록을 조회한다.
+ * @param searchQuery 조회 조건 객체
+ * @param searchQuery.roadNm 검색할 도로명
+ * @param searchQuery.bldgNoMno 건물 본번
+ * @param searchQuery.bldgNoSno 건물 부번
+ * @param searchQuery.page 0부터 시작하는 페이지 번호
+ * @param searchQuery.size 페이지당 조회 건수
+ * @returns 검색 결과 목록과 전체 건수를 포함한 페이징 응답
+ */
+export async function findAddress(searchQuery: ZipSearchParams): Promise<ZipList | undefined> {
+    if (!searchQuery) return undefined;
+
+    const params = new URLSearchParams();
+    if (searchQuery.roadNm) params.append("roadNm", searchQuery.roadNm);
+    if (searchQuery.bldgNoMno != null) params.append("bldgNoMno", searchQuery.bldgNoMno.toString());
+    if (searchQuery.bldgNoSno != null) params.append("bldgNoSno", searchQuery.bldgNoSno.toString());
+    if (searchQuery.page != null) params.append("page", searchQuery.page.toString());
+    if (searchQuery.size != null) params.append("size", searchQuery.size.toString());
+
+    const url = `/cms-service/api/v1/zips?${params.toString()}`;
+    const response = await fetch(url);
+    if (!response.ok) throw new Error("Network response was not ok");
+
+    return (await response.json()) as ZipList;
+}
+
+/**
+ * 입력 문자열에서 자동완성 조회용 도로명만 추출한다.
+ * 마지막 토큰이 숫자 또는 숫자-숫자 형식이면 건물번호로 보고 제외한다.
+ * @param input 사용자가 입력창에 입력한 원본 문자열
+ * @returns 자동완성 조회에 사용할 도로명
+ */
+export function extractRoadNameForSuggestion(input: string): string {
+    const normalized = input.replace(/\s+/g, " ").trim();
+    if (!normalized) return "";
+
+    const parts = normalized.split(" ");
+    const tail = parts[parts.length - 1] ?? "";
+
+    if (/^\d+(?:-\d+)?$/.test(tail) && parts.length > 1) {
+        return parts.slice(0, -1).join(" ").trim();
+    }
+
+    return normalized;
+}
+
+/**
+ * 검색어에 허용되지 않는 특수문자나 SQL 예약어가 포함되어 있는지 검사한다.
+ * @param search 사용자가 입력한 검색 문자열
+ * @returns 검색 가능하면 true, 차단 대상이면 false
+ */
+export function searchFilter(search: string): boolean {
+    if (search.length === 0) return true;
+
+    const expText = /[%=><]/;
+    if (expText.test(search)) {
+        alert("특수문자를 입력 할수 없습니다.");
+        return false;
+    }
+
+    const sqlArray = [
+        "OR",
+        "SELECT",
+        "INSERT",
+        "DELETE",
+        "UPDATE",
+        "CREATE",
+        "DROP",
+        "EXEC",
+        "UNION",
+        "FETCH",
+        "DECLARE",
+        "TRUNCATE",
+    ];
+
+    for (const sqlWord of sqlArray) {
+        const regex = new RegExp(sqlWord, "gi");
+        if (regex.test(search)) {
+            alert(`"${sqlWord}"와(과) 같은 특정문자로 검색할 수 없습니다.`);
+            return false;
+        }
+    }
+
+    return true;
+}
+
+/**
+ * 자동완성 후보 생성을 위해 주소 항목에서 도로명과 건물 본번을 추출한다.
+ * 우선 응답 필드를 사용하고, 값이 없으면 표시 주소 문자열을 파싱해 보정한다.
+ * @param item 주소 검색 결과 1건
+ * @returns 자동완성 생성에 사용할 도로명/건물본번 또는 추출 실패 시 null
+ */
+export function extractSuggestionSeed(item: Zip): SuggestionSeed | null {
+    const mnoByField = Number(item.bldgNoMno);
+    const roadNmByField = (item.roadNm ?? "").trim();
+    if (roadNmByField && Number.isInteger(mnoByField) && mnoByField > 0) {
+        return { roadNm: roadNmByField, bldgNoMno: mnoByField };
+    }
+
+    const firstSegment = (item.zipAddr ?? "").split(",")[0]?.trim() ?? "";
+    if (!firstSegment) return null;
+
+    const parts = firstSegment.split(/\s+/);
+    const bldgToken = parts[parts.length - 1] ?? "";
+    const matched = bldgToken.match(/^(\d+)(?:-\d+)?$/);
+    if (!matched) return null;
+
+    const bldgNoMno = Number(matched[1]);
+    const roadNm = parts.slice(0, -1).join(" ").trim();
+    if (!roadNm || !Number.isInteger(bldgNoMno) || bldgNoMno <= 0) {
+        return null;
+    }
+
+    return { roadNm, bldgNoMno };
+}
+
+/**
+ * 단일 입력 주소 문자열을 "도로명 + 건물번호" 형식으로 파싱해 API 조회 파라미터로 변환한다.
+ * 예) "테헤란로 152-1" -> { roadNm: "테헤란로", bldgNoMno: 152, bldgNoSno: 1, page }
+ * @param input 사용자가 입력한 주소 검색어
+ * @param page 1부터 시작하는 화면 페이지 번호
+ * @returns 파싱 성공 시 조회 파라미터와 정규화된 검색어, 실패 시 오류 메시지
+ */
+export function parseZipSearchInput(
+    input: string,
+    page = 1,
+): ParseZipSearchInputResult {
+    const normalized = input.replace(/\s+/g, " ").trim();
+
+    if (!normalized) {
+        return {
+            ok: false,
+            message: "도로명과 건물번호를 입력해 주세요. 예) 테헤란로 152-1",
+        };
+    }
+
+    if (!searchFilter(normalized)) {
+        return {
+            ok: false,
+            message: "검색어를 다시 확인해 주세요.",
+        };
+    }
+
+    const parts = normalized.split(" ");
+    if (parts.length < 2) {
+        if (/^\d+(?:-\d+)?$/.test(normalized)) {
+            return { ok: false, message: "도로명을 입력해 주세요." };
+        }
+        if (/[가-힣]/.test(normalized) && !/\d/.test(normalized)) {
+            return { ok: false, message: "건물번호를 입력해 주세요." };
+        }
+        return {
+            ok: false,
+            message: "도로명과 건물번호를 공백으로 구분해 주세요. 예) 테헤란로 152-1",
+        };
+    }
+
+    const bldgToken = parts[parts.length - 1] ?? "";
+    const roadNm = parts.slice(0, -1).join(" ").trim();
+
+    if (!roadNm || !/[가-힣]/.test(roadNm)) {
+        return {
+            ok: false,
+            message: "도로명을 입력해 주세요.",
+        };
+    }
+
+    if (!/\d/.test(bldgToken)) {
+        return { ok: false, message: "건물번호를 입력해 주세요." };
+    }
+
+    if (!/^\d+(?:-\d+)?$/.test(bldgToken)) {
+        return {
+            ok: false,
+            message: "건물번호는 숫자 또는 숫자-숫자 형식으로 입력해 주세요. 예) 152 또는 152-1",
+        };
+    }
+
+    const [mnoStr, snoStr] = bldgToken.split("-");
+    const bldgNoMno = Number(mnoStr);
+    const bldgNoSno = snoStr ? Number(snoStr) : null;
+
+    if (!Number.isInteger(bldgNoMno) || bldgNoMno <= 0) {
+        return { ok: false, message: "건물본번은 1 이상의 숫자로 입력해 주세요." };
+    }
+
+    if (bldgNoSno !== null && (!Number.isInteger(bldgNoSno) || bldgNoSno <= 0)) {
+        return { ok: false, message: "건물부번은 1 이상의 숫자로 입력해 주세요." };
+    }
+
+    return {
+        ok: true,
+        value: {
+            roadNm,
+            bldgNoMno,
+            bldgNoSno,
+            page,
+        },
+        keyword: `${roadNm} ${bldgNoMno}${bldgNoSno ? `-${bldgNoSno}` : ""}`,
+    };
+}
+
+/**
+ * 도로명 주소 문자열에서 재검색에 사용할 "도로명 건물번호" 입력값만 추출한다.
+ * 예) "테헤란로 152, OO빌딩" -> "테헤란로 152"
+ * @param roadAddr 화면에 표시된 도로명 주소 문자열
+ * @returns 입력란에 다시 넣을 수 있는 문자열, 추출 실패 시 빈 문자열
+ */
+export function extractSearchInputFromRoadAddr(roadAddr: string): string {
+    const firstSegment = roadAddr.split(",")[0]?.trim() ?? "";
+    if (!firstSegment) return "";
+
+    const parts = firstSegment.split(/\s+/);
+    const bldgToken = parts[parts.length - 1] ?? "";
+    if (!/^\d+(?:-\d+)?$/.test(bldgToken)) return "";
+
+    return `${parts.slice(0, -1).join(" ")} ${bldgToken}`.trim();
+}
+
+/**
+ * 사용자가 입력 중인 주소 문자열을 기준으로 도로명 후보를 조회한다.
+ * 건물번호가 함께 입력된 경우에는 마지막 숫자 토큰을 제외한 도로명만으로 후보를 찾는다.
+ * @param input 사용자가 입력창에 입력한 원본 문자열
+ * @returns 최대 5개의 "도로명 건물본번" 자동완성 문자열 목록
+ */
+export async function fetchPostcodeSuggestions(input: string): Promise<string[]> {
+    const roadNm = extractRoadNameForSuggestion(input);
+    if (!roadNm) return [];
+    if (!searchFilter(roadNm)) return [];
+
+    const data = await findAddress({
+        roadNm,
+        page: 0,
+        size: 50,
+    });
+
+    const list = Array.isArray(data?.content) ? data.content : [];
+    const suggestions: string[] = [];
+    const seen = new Set<string>();
+
+    for (const item of list) {
+        const seed = extractSuggestionSeed(item);
+        if (!seed) continue;
+
+        const label = `${seed.roadNm} ${seed.bldgNoMno}`;
+        if (seen.has(label)) continue;
+
+        seen.add(label);
+        suggestions.push(label);
+        if (suggestions.length >= 5) break;
+    }
+
+    return suggestions;
+}
diff --git a/packages/common/business_components/src/ui/search_base_form/index.tsx b/packages/common/business_components/src/ui/search_base_form/index.tsx
index 9cef315c3..a42e6f548 100644
--- a/packages/common/business_components/src/ui/search_base_form/index.tsx
+++ b/packages/common/business_components/src/ui/search_base_form/index.tsx
@@ -10,9 +10,9 @@ type SearchBaseType = {
     rightChildren:React.ReactNode;
     selectSidoData?: SelectDataType[] | [];
     selectSigunData?: SelectDataType[] | [];
-    selectRegionData?: SelectDataType[] | [];
-    selectUnitWaterShedData?: SelectDataType[] | [];
-    selectMiddleRegionData?: SelectDataType[] | [];
+    selectRegionData?: SelectDataType[] | [];    // 유역 코드 
+    selectUnitWaterShedData?: SelectDataType[] | [];   // 단위유역 코드
+    selectMiddleRegionData?: SelectDataType[] | [];    // 중권역 코드
     selectEnvPartData?: EnvPartSelectDataType[] | [];
     queryClick:(returnType:ReturnType) => void;
     excelName?:string;
@@ -26,18 +26,19 @@ type SearchBaseType = {
     leftSelectClassName?: string;
     buttonOrder?: ("query" | "init" | "excel")[];
     initSidoValue?: string | '';
+    initSigunValue?: string | '';
     excelDisabled?: boolean;
 }
 export type ReturnType = {
-    partValue: string;
-    sidoValue: string;
-    sigunValue: string;
-    regionValue: string;
-    unitWaterShedValue: string;
-    middleRegionValue: string;
-    envPartValue: string;
-    sidoText: string;
-    sigunText: string;
+    partValue: string; // 조회 구분값(A: 행정, R: 유역, G: 환경청)
+    sidoValue: string; // 선택된 시도 코드
+    sigunValue: string; // 선택된 시군구 코드
+    regionValue: string; // 선택된 권역(유역) 코드
+    unitWaterShedValue: string; // 선택된 단위유역 코드
+    middleRegionValue: string; // 선택된 중권역 코드
+    envPartValue: string; // 선택된 환경청 코드
+    sidoText: string; // 선택된 시도명
+    sigunText: string; // 선택된 시군구명
 }
 
 function SearchBaseForm ({
@@ -61,11 +62,12 @@ function SearchBaseForm ({
     leftSelectClassName,
     buttonOrder,
     initSidoValue='',
+    initSigunValue='',
     excelDisabled=false,
     }: SearchBaseType) {
         const [partValue, setPartValue] = useState<string>("A");
         const [sidoValue, setSidoValue] = useState<string>(initSidoValue?initSidoValue:"0");
-        const [sigunValue, setSigunValue] = useState<string>("0");
+        const [sigunValue, setSigunValue] = useState<string>(initSigunValue?initSigunValue:"0");
         const [sidoText, setSidoText] = useState<string>("");
         const [sigunText, setSigunText] = useState<string>("");
         const [regionValue, setRegionValue] = useState<string>("0");
@@ -115,18 +117,24 @@ function SearchBaseForm ({
             if(initSidoValue){
               setSidoValue(initSidoValue);
             }
+            if(initSigunValue){
+              setSigunValue(initSigunValue);
+            }
             setResetTrigger(true);
             initClick();
-        }, [initSidoValue, setResetTrigger, initClick]);
+        }, [initSidoValue, initSigunValue, setResetTrigger, initClick]);
         useEffect(() => {
             if (resetTrigger) {
                 if(initSidoValue!=""){
                   setSidoValue(initSidoValue);  
                 }
+                if(initSigunValue!=""){
+                  setSigunValue(initSigunValue);
+                }
                 
                 setResetTrigger(false);
             }
-        }, [resetTrigger]);
+        }, [resetTrigger, initSidoValue, initSigunValue]);
         const excelDownload = () => {
             excelClick({
                 partValue: partValue,
@@ -179,6 +187,7 @@ function SearchBaseForm ({
             leftClassName={leftClassName}
             leftSelectClassName={leftSelectClassName}
             initSidoValue={initSidoValue}
+            initSigunValue={initSigunValue}
           >
             {leftChildren}
           </SearchFormLeft>
diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx
index 04537ec5e..451b313b9 100644
--- a/packages/common/business_components/src/ui/search_form_left/index.tsx
+++ b/packages/common/business_components/src/ui/search_form_left/index.tsx
@@ -47,6 +47,7 @@ type SearchFormLeftProps = {
   leftClassName?: string;
   leftSelectClassName?: string;
   initSidoValue?: string;
+  initSigunValue?: string;
 }
 
 export type EnvPartSelectDataType = SelectDataType & {
@@ -59,12 +60,12 @@ const selectPartData:SelectDataType[] = [
   { text: "환경청별", val: 'G' },
 ];
 
-function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSidoText, setRtnSigunValue, setRtnSigunText, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false, isAdmin = false, leftClassName, leftSelectClassName, initSidoValue }: SearchFormLeftProps) {
+function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSidoText, setRtnSigunValue, setRtnSigunText, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false, isAdmin = false, leftClassName, leftSelectClassName, initSidoValue, initSigunValue }: SearchFormLeftProps) {
   /******************선택된 데이터******************/
   const [partValue, setPartValue] = useState<string>('A');
   //행정별 시도 시군구
   const [sidoValue, setSidoValue] = useState<string>(initSidoValue?initSidoValue : '0');
-  const [sigunValue, setSigunValue] = useState<string>('0');
+  const [sigunValue, setSigunValue] = useState<string>(initSigunValue?initSigunValue : '0');
   const [sidoText, setSidoText] = useState<string>('');
   const [sigunText, setSigunText] = useState<string>('');
   //유역별
@@ -87,6 +88,39 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
   const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
 
   const [initTrigger, setInitTrigger] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!initSidoValue) return;
+    if (!selectSidoData.some((item) => item.val === initSidoValue)) return;
+
+    const selectedSido = selectSidoData.find((item) => item.val === initSidoValue);
+    setSidoValue(initSidoValue);
+    setSidoText(selectedSido?.text || "");
+    if (setRtnSidoValue) setRtnSidoValue(initSidoValue);
+    if (setRtnSidoText) setRtnSidoText(selectedSido?.text || "");
+    initializeSigunData(initSidoValue);
+  }, [initSidoValue, selectSidoData]);
+
+  useEffect(() => {
+    if (!initSidoValue || !initSigunValue) return;
+
+    const initializedSigunData = [
+      { text: "전체", val: '0' },
+      ...selectSigunData.filter(
+        (item: SelectDataType) => item.val.substring(0, 2) === initSidoValue
+      )
+    ];
+    const selectedSigun = initializedSigunData.find((item) => item.val === initSigunValue);
+
+    if (!selectedSigun) return;
+
+    setFilteredSigunData(initializedSigunData);
+    setSigunValue(initSigunValue);
+    setSigunText(selectedSigun.text || "");
+    if (setRtnSigunValue) setRtnSigunValue(initSigunValue);
+    if (setRtnSigunText) setRtnSigunText(selectedSigun.text || "");
+  }, [initSidoValue, initSigunValue, selectSigunData, setRtnSigunText, setRtnSigunValue]);
+
   // 시군구 세팅
   const initializeSigunData = (sidoCd: string) => {
     if (sidoCd === '0') {
@@ -167,31 +201,51 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
     let selectedEnvPartSido;
     let selectedEnvPartSigun;
 
+    const resetSelectStateByPartChange = () => {
+      setSidoValue('0');
+      setSigunValue('0');
+      setSidoText('');
+      setSigunText('');
+      setRegionValue('0');
+      setUnitWaterShedValue('0');
+      setMiddleRegionValue('0');
+      setEnvPartValue('0');
+
+      setFilteredSigunData([{ text: "전체", val: '0' }]);
+      setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
+      setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
+      setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd:'' }]);
+      setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd:'' }]);
+      setFilteredEnvPartSigunData([{ text: "전체", val: '0' }]);
+      setFilteredEnvPartSigunDataSelected([]);
+
+      if (setRtnSidoValue) setRtnSidoValue('0');
+      if (setRtnSigunValue) setRtnSigunValue('0');
+      if (setRtnSidoText) setRtnSidoText('');
+      if (setRtnSigunText) setRtnSigunText('');
+      if (setRtnRegionValue) setRtnRegionValue('0');
+      if (setRtnUnitWaterShedValue) setRtnUnitWaterShedValue('0');
+      if (setRtnMiddleRegionValue) setRtnMiddleRegionValue('0');
+      if (setRtnEnvPartValue) setRtnEnvPartValue('0');
+      if (setRtnEnvPartSidoValue) setRtnEnvPartSidoValue('0');
+      if (setRtnEnvPartSigunValue) setRtnEnvPartSigunValue('0');
+    };
+
     switch(type) {
       case 'part':
         setPartValue(val);
         if (setRtnPartValue) {
           setRtnPartValue(val);
         }
-        // 구분
-        if(val == 'R') {
-          initializeMiddleRegionData('0');
-          initializeUnitWaterShedData('0');
-        } else if(val == 'G') {
+
+        resetSelectStateByPartChange();
+
+        if (val == 'G') {
           setFilteredEnvPartData([
             { text: "전체", val: '0', adstDliStrCd:'' },
             ...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '')
           ]);
-          setEnvPartValue('0');
-          initializeCityDataByEnvPartSido('0');
-        } else {
-          initializeSigunData('0');
-          onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
         }
-
-        // 다른 selectbox 전체로 초기화
-        onSelectValue(selectSidoData[0]?.val || '0', 'sido');
-        onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
         break;
       case 'sido':
         setSidoValue(val);
@@ -204,7 +258,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
           setRtnSidoText(selectedSido?.text || '');
         }
         initializeSigunData(val);
-        onSelectValue('0', 'sigun');
+        onSelectValue(val === initSidoValue && initSigunValue ? initSigunValue : '0', 'sigun');
         break;
       case 'sigun':
         if (setRtnSigunValue) {
@@ -276,7 +330,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
   const resetAllValues = () => {
     setPartValue('A');
     setSidoValue(initSidoValue?initSidoValue:'0');
-    setSigunValue('0');
+    setSigunValue(initSigunValue?initSigunValue:'0');
     setRegionValue('0');
     setUnitWaterShedValue('0');
     setMiddleRegionValue('0');
@@ -291,7 +345,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
 
     if (setRtnPartValue) setRtnPartValue('A');
     if (setRtnSidoValue) setRtnSidoValue(initSidoValue?initSidoValue:'0');
-    if (setRtnSigunValue) setRtnSigunValue('0');
+    if (setRtnSigunValue) setRtnSigunValue(initSigunValue?initSigunValue:'0');
     if (setRtnRegionValue) setRtnRegionValue('0');
     if (setRtnUnitWaterShedValue) setRtnUnitWaterShedValue('0');
     if (setRtnMiddleRegionValue) setRtnMiddleRegionValue('0');
diff --git a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md
index 04531c27f..d820f1d03 100644
--- a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md
+++ b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md
@@ -1,5 +1,8 @@
 ## SearchFormLeft 모듈
 #### 검색영역 좌측 모듈로 행정별, 유역별, 환경청을 선택했을 때 검색 영역을 세팅해주고 childnode를 붙여서 출력해주는 모듈
+
+> 아래 예시는 기존 `fo` 기준 API/store 사용 예시이다. `sn` 작업에서 사용할 때는 `apps/sn`의 API 호출 방식, store 구조, 백엔드 `sewerage-service` 계약을 먼저 확인한 뒤 필요한 값과 타입만 맞춰 적용한다.
+
 #### 1. 컴포넌트 호출방법
 ```js
 import { SearchFormLeft } from "@common/business_components";
diff --git a/packages/common/business_components/src/ui/search_input/index.tsx b/packages/common/business_components/src/ui/search_input/index.tsx
index 06ffce4ff..503322559 100644
--- a/packages/common/business_components/src/ui/search_input/index.tsx
+++ b/packages/common/business_components/src/ui/search_input/index.tsx
@@ -22,7 +22,7 @@ const SearchInput = React.forwardRef<HTMLInputElement, {className:string, label:
     return (
         <div className={className+" flex items-center"} >
             {label && <Label className="w-20 text-xl text-gray-600">{label}</Label>}
-            <Input className="!text-lg flex-1 w-3/4 h-14 border rounded" value={textValue} onChange={changeText} onKeyUp={keyUp}></Input>
+            <Input className="!text-lg flex-1 w-3/4 h-13 border rounded" value={textValue} onChange={changeText} onKeyUp={keyUp}></Input>
         </div>
     )
 });
diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index e5fc933ae..ed05a7f19 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -36,6 +36,7 @@ type UiTableProps<T extends object> = {
   curPage?: number;
   headButton?: React.ReactNode | undefined;
   widthFixed?: boolean;
+  isHideCount?: boolean; // 총 건수 default false
 };
 
 type UiHeadProps = {
@@ -67,7 +68,8 @@ export function UiTable<T extends object = Record<string, unknown>>({
   index = -1,
   curPage = 1,
   headButton = undefined,
-  widthFixed = false
+  widthFixed = false,
+  isHideCount = false, // 총 건수
 }: UiTableProps<T>) {
   const [cur, setCur] = useState<number>(curPage);
   const [idx, setIdx] = useState<number>(index);
@@ -132,12 +134,18 @@ export function UiTable<T extends object = Record<string, unknown>>({
       {headName ? (
         headButton ? (
           <div className="card-header flex items-center justify-between">
-            <h3 className="text-2xl font-medium text-label">{headName}  총 {totalLabel}건</h3>
+            <h3 className="text-2xl font-medium text-label">
+              {headName}
+              {isHideCount ? "" : `  총 ${totalLabel}건`}
+            </h3>
             <>{headButton}</>
           </div>
         ) : (
           <div className="card-header">
-            <h3 className="text-2xl font-medium text-label">{headName}  총 {totalLabel}건</h3>
+            <h3 className="text-2xl font-medium text-label">
+              {headName}
+              {isHideCount ? "" : `  총 ${totalLabel}건`}
+            </h3>
           </div>
         )
       ) : (
diff --git a/packages/common/components/package.json b/packages/common/components/package.json
index 3cef3b0f0..b975242d0 100644
--- a/packages/common/components/package.json
+++ b/packages/common/components/package.json
@@ -5,7 +5,7 @@
   "sideEffects": false,
   "type": "module",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist/**"
@@ -13,7 +13,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
     "./index.css": "./dist/index.css"
@@ -26,8 +26,11 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
+    "@base-ui/react": "^1.4.0",
     "@common/assets": "workspace:*",
+    "@common/auth": "workspace:*",
     "@common/config": "workspace:*",
+    "@common/network": "workspace:*",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@minoru/react-dnd-treeview": "^3.5.0",
     "@radix-ui/react-accordion": "^1.2.3",
diff --git a/packages/common/components/src/api/client.ts b/packages/common/components/src/api/client.ts
index 46d5291fd..0226a4f9a 100644
--- a/packages/common/components/src/api/client.ts
+++ b/packages/common/components/src/api/client.ts
@@ -1,17 +1,14 @@
 import { Client } from "@common/network";
 import { getConfig } from "@common/config";
-import { getCookie } from "../lib";
-
-const siteId = getCookie("site-id-key") ?? "";
 
 const getClientInstance = () => {
   const config = getConfig();
-  const { PROXY_HOST } = config;
+  const { PROXY_HOST, SITE_ID } = config;
   const BASE_URL = `${PROXY_HOST}/server`;
 
   return Client.getInstance({
     baseURL: BASE_URL,
-    siteId,
+    siteId: SITE_ID ?? "",
   });
 };
 
diff --git a/packages/common/components/src/ui/combobox/index.tsx b/packages/common/components/src/ui/combobox/index.tsx
new file mode 100644
index 000000000..64298bc4e
--- /dev/null
+++ b/packages/common/components/src/ui/combobox/index.tsx
@@ -0,0 +1,315 @@
+"use client";
+
+import * as React from "react";
+import {
+  Combobox as ComboboxPrimitive,
+  type ComboboxRootProps,
+} from "@base-ui/react";
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "../input-group";
+
+const Combobox = ({ ...props }: ComboboxRootProps<string, boolean>) => {
+  return <ComboboxPrimitive.Root {...props} />;
+};
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  );
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      className={cn(className)}
+      {...props}
+      render={
+        <InputGroupButton variant="ghost" size="icon-xs">
+          <XIcon className="pointer-events-none" />
+        </InputGroupButton>
+      }
+    />
+  );
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          />
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  );
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(
+            "group/combobox-content max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) ring-foreground/10 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-sm border-input bg-popover text-popover-foreground shadow-md duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none",
+            className,
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar data-empty:p-0 max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain rounded-sm border border-input p-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1 pl-1.5 pr-16 text-[1.2rem] hover:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+            <CheckIcon className="pointer-events-none" />
+          </span>
+        }
+      />
+    </ComboboxPrimitive.Item>
+  );
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  );
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "group-data-empty/combobox-content:flex hidden w-full justify-center py-2 text-center text-sm text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 flex min-h-[3.2rem] !w-full flex-wrap items-center gap-1 rounded-sm border bg-form bg-clip-padding px-2 py-1.5 text-sm transition-colors focus-within:border-ring",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean;
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 flex h-[2.4rem] w-fit items-center justify-center gap-1.5 whitespace-nowrap rounded-sm bg-muted px-2.5 text-[1.2rem] font-medium text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+          render={
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-6 !bg-transparent"
+            >
+              <XIcon className="pointer-events-none !size-5" />
+            </Button>
+          }
+        />
+      )}
+    </ComboboxPrimitive.Chip>
+  );
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn(
+        "h-full min-w-16 flex-1 text-[1.3rem] outline-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null);
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+};
diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx
index 69e2a7196..4f6c61c56 100644
--- a/packages/common/components/src/ui/header/index.tsx
+++ b/packages/common/components/src/ui/header/index.tsx
@@ -3,9 +3,10 @@ import "./header.css";
 import { useEffect, useCallback, useState, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { images } from "@common/assets";
+import type { TokenManager } from "@common/auth";
 import { getConfig } from "@common/config";
 import { ENDPOINT } from "../../config";
-import { setCookie, getCookie, removeCookie } from "../../lib";
+import { setCookie, getCookie } from "../../lib";
 import {
   getPopupInfo,
   getUserPopupList,
@@ -28,7 +29,7 @@ const userId = getCookie(appConfig.AUTH_USER_ID ?? "");
 const siteId = getCookie("site-id-key") ?? "";
 const isLoggedIn = !!userId;
 
-export function Header({ viewOnly }: { viewOnly?: boolean }) {
+export function Header({ tokenManager, viewOnly }: { tokenManager?: TokenManager; viewOnly?: boolean }) {
   const [mounted, setMounted] = useState(false);
   const [logoWidth, setLogoWidth] = useState(0);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -85,10 +86,10 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
       clearClientCookies();
 
       // 3. 로컬/세션 스토리지 정리
-      if (typeof window !== "undefined") {
-        localStorage.clear();
-        sessionStorage.clear();
-      }
+      // if (typeof window !== "undefined") {
+      //   localStorage.clear();
+      //   sessionStorage.clear();
+      // }
 
       // 4. 로그인 페이지로 리다이렉트
       window.location.href = "/auth/login";
@@ -133,12 +134,8 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
     cookiesToDelete.forEach((cookieName) => {
       if (!cookieName) return;
 
-      // 방법 1: removeCookie 함수 사용
-      if (domain === "localhost") {
-        removeCookie(cookieName, {});
-      } else {
-        removeCookie(cookieName, { domain });
-      }
+      // 방법 1: removeToken 함수 사용
+      tokenManager?.removeToken(cookieName);
 
       // 방법 2: 직접 document.cookie 설정 (도메인 포함)
       if (domain !== "localhost") {
diff --git a/packages/common/components/src/ui/index.ts b/packages/common/components/src/ui/index.ts
index ae913e79a..22f020837 100644
--- a/packages/common/components/src/ui/index.ts
+++ b/packages/common/components/src/ui/index.ts
@@ -5,6 +5,8 @@ export * from "./button-group";
 export * from "./calendar";
 export * from "./carousel";
 export * from "./checkbox";
+export * from "./collapsible";
+export * from "./combobox";
 export * from "./data-table";
 export * from "./date-picker";
 export * from "./input-date-picker";
diff --git a/packages/common/components/src/ui/input-date-picker/index.tsx b/packages/common/components/src/ui/input-date-picker/index.tsx
index 93d2caf7c..e5ec1eac3 100644
--- a/packages/common/components/src/ui/input-date-picker/index.tsx
+++ b/packages/common/components/src/ui/input-date-picker/index.tsx
@@ -12,7 +12,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import "./input-date-picker.css";
 
 export interface InputDatePickerProps {
-  value?: Date;
+  value?: Date | null;
   defaultValue?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
@@ -34,7 +34,7 @@ export function InputDatePicker({
   const [internalDate, setInternalDate] = useState<Date | undefined>(
     defaultValue,
   );
-  const [month, setMonth] = useState<Date | undefined>(
+  const [month, setMonth] = useState<Date | null | undefined>(
     isControlled ? controlledValue : defaultValue,
   );
 
@@ -112,9 +112,9 @@ export function InputDatePicker({
           >
             <Calendar
               mode="single"
-              selected={date}
+              selected={date ?? undefined}
               captionLayout="dropdown"
-              month={month}
+              month={month ?? undefined}
               onMonthChange={setMonth}
               onSelect={(newDate) => {
                 handleDateChange(newDate);
diff --git a/packages/common/components/src/ui/input-group/index.tsx b/packages/common/components/src/ui/input-group/index.tsx
new file mode 100644
index 000000000..a6ff3e187
--- /dev/null
+++ b/packages/common/components/src/ui/input-group/index.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+import { Input } from "../input";
+import { Textarea } from "../textarea";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input outline-none transition-colors has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-start]]:h-auto has-[>textarea]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  },
+);
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "aria-invalid:ring-0 flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent dark:bg-transparent dark:disabled:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "aria-invalid:ring-0 flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent dark:bg-transparent dark:disabled:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};
diff --git a/packages/common/components/src/ui/layout/base.tsx b/packages/common/components/src/ui/layout/base.tsx
index e80a47533..d48b80196 100644
--- a/packages/common/components/src/ui/layout/base.tsx
+++ b/packages/common/components/src/ui/layout/base.tsx
@@ -1,3 +1,4 @@
+import type { TokenManager } from "@common/auth";
 import type { QueryClient } from "@tanstack/react-query";
 import { QueryProvider } from "../../provider/query-provider";
 import { PopupProvider } from "../../provider/popup-provider";
@@ -13,11 +14,13 @@ import "./common.css";
 export function BaseLayout({
   children,
   queryClient,
+  tokenManager,
   currentPath,
   handleMenuClick,
 }: {
   children: React.ReactNode;
   queryClient?: QueryClient;
+  tokenManager?: TokenManager;
   currentPath?: string;
   handleMenuClick?: (item: MenuItem) => void;
 }) {
@@ -28,7 +31,7 @@ export function BaseLayout({
           <HelpDialogProvider>
             <SidebarProvider>
             <div className="flex-1">
-              <Header />
+              <Header tokenManager={tokenManager} />
               <div className="flex">
                 <LNB
                   currentPath={currentPath}
diff --git a/packages/common/components/src/ui/lnb/index.tsx b/packages/common/components/src/ui/lnb/index.tsx
index 3339a6f26..1c7722a36 100644
--- a/packages/common/components/src/ui/lnb/index.tsx
+++ b/packages/common/components/src/ui/lnb/index.tsx
@@ -94,7 +94,7 @@ export function LNB({
     enabled: !isLoggedIn,
   });
 
-  const menuList = isLoggedIn
+  const menuList: MenuItem[] | undefined = isLoggedIn
     ? previewMode
       ? previewTreeMenuListData
       : menuListData
diff --git a/packages/common/components/tsconfig.json b/packages/common/components/tsconfig.json
index 5db0dadbc..9fa9e88ee 100644
--- a/packages/common/components/tsconfig.json
+++ b/packages/common/components/tsconfig.json
@@ -14,9 +14,7 @@
     "strict": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
-      "@common/config": ["../config/dist/"],
-      "@common/network": ["../network/"]
+      "@/*": ["src/*"]
     }
   },
   "exclude": ["**/node_modules", "**/.*/*", "dist"],
diff --git a/packages/common/network/utils.ts b/packages/common/network/utils.ts
index 010bf2fe2..ac92db852 100644
--- a/packages/common/network/utils.ts
+++ b/packages/common/network/utils.ts
@@ -7,14 +7,14 @@ export function getAuthLoginRedirectUrl(): string {
 }
 
 export function isAtLoginRedirectUrl(loginRedirectUrl: string): boolean {
-  if (typeof window === "undefined") return false;
+  if (typeof window === "undefined") return false; // 서버 환경에서는 현재 브라우저 URL을 알 수 없으므로 false 반환
   try {
-    const target = new URL(loginRedirectUrl, window.location.href);
+    const target = new URL(loginRedirectUrl, window.location.href); // 상대경로/절대경로 모두 현재 주소 기준의 완전한 URL로 변환
     return (
-      target.origin === window.location.origin &&
-      target.pathname === window.location.pathname
+      target.origin === window.location.origin && // 도메인(프로토콜 + 호스트 + 포트)이 같은지 확인
+      target.pathname === window.location.pathname // 현재 페이지 경로가 로그인 이동 경로와 같은지 확인
     );
   } catch {
-    return false;
+    return false; // 잘못된 URL 문자열이면 비교할 수 없으므로 false 반환
   }
 }
diff --git a/packages/rsone/components/grid/css/DataGrid.css b/packages/rsone/components/grid/css/DataGrid.css
index 6aa237533..daee3ad61 100644
--- a/packages/rsone/components/grid/css/DataGrid.css
+++ b/packages/rsone/components/grid/css/DataGrid.css
@@ -23,7 +23,6 @@
     border-radius: 0.5rem !important;
     /* box-shadow: 0 0 10px -1px rgba(0, 0, 0, 0.06); */
 }
-
 /* 헤더 스타일 */
 .rg-header,
 .rg-head,
@@ -115,4 +114,4 @@
 .rg-cell-verify-error {
     background-color: #ffe6e6 !important;
     color: #c00 !important;
-}
\ No newline at end of file
+}
diff --git a/packages/rsone/components/type/computedFieldCallbacks.ts b/packages/rsone/components/type/computedFieldCallbacks.ts
index 362d0da7f..1207696d9 100644
--- a/packages/rsone/components/type/computedFieldCallbacks.ts
+++ b/packages/rsone/components/type/computedFieldCallbacks.ts
@@ -8,6 +8,12 @@ function toNum(v: unknown): number {
     return isNaN(n) ? 0 : n;
 }
 
+/** 소수점 첫째 자리 이후 버림 (반올림 없음) */
+function truncateToFirstDecimal(value: number): number {
+    if (!Number.isFinite(value)) return 0;
+    return Math.floor(value * 10) / 10;
+}
+
 /** 합계용 valueCallback 생성 */
 export function createSumValueCallback(fieldNames: string[]): DataFieldValueCallback {
     return (_prod, _dataRow, _fieldName, fieldNamesArr, values) => {
@@ -57,7 +63,7 @@ export function createCoverageRateValueCallback(
     };
 }
 
-// 하수도 설치율(%) valueCallback
+// 하수도 설치율(%) valueCallback — 항목·중간·결과 모두 소수 첫째 자리 이후 버림(반올림 없음)
 export function createSwrgInstlrtRateValueCallback(
     numeratorFields: string[],
     denominatorFields: string[],
@@ -68,18 +74,24 @@ export function createSwrgInstlrtRateValueCallback(
             let sum = 0;
             for (const f of fields) {
                 const idx = fieldNamesArr.indexOf(f);
-                if (idx >= 0) sum += toNum(values[idx]);
+                if (idx >= 0) {
+                    sum += truncateToFirstDecimal(toNum(values[idx]));
+                }
             }
-            return sum;
+            return truncateToFirstDecimal(sum);
         };
         const sum1 = getSum(numeratorFields);
         const sum2 = getSum(denominatorFields);
 
-        const piplSupprt = toNum(values[fieldNamesArr.indexOf(thirdFields[0] || 'piplSupprt')]);
+        const piplSupprt = truncateToFirstDecimal(
+            toNum(values[fieldNamesArr.indexOf(thirdFields[0] || "piplSupprt")]),
+        );
 
-        const total1 = (sum1 === 0 ? 0 : Math.round(sum2 / sum1 * 100));
+        const ratioPercent =
+            sum1 === 0 ? 0 : truncateToFirstDecimal((sum2 / sum1) * 100);
+        const result = truncateToFirstDecimal((ratioPercent * piplSupprt) / 100);
 
-        return total1 * piplSupprt / 100;
+        return result;
     };
 }
 
diff --git a/packages/rsone/package.json b/packages/rsone/package.json
index b5e7f6c3d..b7c5eab57 100644
--- a/packages/rsone/package.json
+++ b/packages/rsone/package.json
@@ -1,41 +1,41 @@
 {
-    "name": "@rsone/components",
-    "version": "1.0.0",
-    "private": true,
-    "sideEffects": false,
-    "type": "module",
-    "main": "./dist/index.js",
-    "module": "./dist/index.mjs",
-    "types": "./dist/index.d.ts",
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/index.mjs",
-            "require": "./dist/index.js"
-        },
-        "./index.css": "./dist/index.css"
+  "name": "@rsone/components",
+  "version": "1.0.0",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
     },
-    "files": [
-        "dist/**"
-    ],
-    "scripts": {
-        "build": "tsup",
-        "clean": "rm -rf dist"
-    },
-    "dependencies": {
-        "@common/components": "workspace:*",
-        "realgrid": "^2.9.5",
-        "realgrid-react": "^0.9.7",
-        "jszip": "^3.10.1",
-        "xlsx": "^0.18.5",
-        "zustand": "^5.0.3"
-    },
-    "peerDependencies": {
-        "react": "^19.2.1",
-        "react-dom": "^19.2.1"
-    },
-    "devDependencies": {
-        "tsup": "8.3.6",
-        "typescript": "~5.6.2"
-    }
-}
\ No newline at end of file
+    "./index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@common/components": "workspace:*",
+    "realgrid": "^2.9.5",
+    "realgrid-react": "^0.9.7",
+    "jszip": "^3.10.1",
+    "xlsx": "^0.18.5",
+    "zustand": "^5.0.3"
+  },
+  "peerDependencies": {
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
+  },
+  "devDependencies": {
+    "tsup": "8.3.6",
+    "typescript": "~5.6.2"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e39d4b41f..b20d42ab4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,19 +1,18 @@
-lockfileVersion: '9.0'
+lockfileVersion: "9.0"
 
 settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
 overrides:
-  '@types/react': ^19.2.7
-  '@types/react-dom': ^19.2.3
+  "@types/react": ^19.2.7
+  "@types/react-dom": ^19.2.3
   react: ^19.2.1
   react-dom: ^19.2.1
   lodash.isequal: ^4.5.0
   source-map: ^0.7.4
 
 importers:
-
   .:
     dependencies:
       chart.js:
@@ -21,171 +20,283 @@ importers:
         version: 4.5.1
       react:
         specifier: ^19.2.1
-        version: 19.2.3
+        version: 19.2.4
       react-chartjs-2:
         specifier: ^5.3.0
-        version: 5.3.1(chart.js@4.5.1)(react@19.2.3)
+        version: 5.3.1(chart.js@4.5.1)(react@19.2.4)
       react-dom:
         specifier: ^19.2.1
-        version: 19.2.3(react@19.2.3)
+        version: 19.2.4(react@19.2.4)
       zustand:
         specifier: ^5.0.3
-        version: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
+        version: 5.0.12(@types/react@19.2.14)(immer@10.2.0)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
     devDependencies:
-      '@eslint/eslintrc':
+      "@eslint/eslintrc":
         specifier: ^3
-        version: 3.3.3
-      '@types/node':
+        version: 3.3.5
+      "@next/eslint-plugin-next":
+        specifier: ^15.3.8
+        version: 15.3.8
+      "@types/node":
         specifier: ^22.13.1
-        version: 22.19.2
-      '@types/react':
+        version: 22.19.15
+      "@types/react":
         specifier: ^19.2.7
-        version: 19.2.7
-      '@types/react-dom':
+        version: 19.2.14
+      "@types/react-dom":
         specifier: ^19.2.3
-        version: 19.2.3(@types/react@19.2.7)
-      '@typescript-eslint/parser':
+        version: 19.2.3(@types/react@19.2.14)
+      "@typescript-eslint/parser":
         specifier: ^8.56.1
-        version: 8.56.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       eslint-plugin-simple-import-sort:
         specifier: ^12.1.1
-        version: 12.1.1(eslint@9.39.2(jiti@2.6.1))
+        version: 12.1.1(eslint@9.39.4(jiti@2.6.1))
       husky:
         specifier: ^9.1.7
         version: 9.1.7
       lint-staged:
         specifier: ^16.2.7
-        version: 16.2.7
+        version: 16.4.0
       turbo:
         specifier: 2.4.2
         version: 2.4.2
 
   apps/_template:
     dependencies:
-      '@common/assets':
+      "@common/assets":
         specifier: workspace:*
         version: link:../../packages/common/assets
-      '@common/components':
+      "@common/components":
         specifier: workspace:*
         version: link:../../packages/common/components
-      '@common/network':
+      "@common/network":
         specifier: workspace:*
         version: link:../../packages/common/network
-      '@hookform/resolvers':
+      "@hookform/resolvers":
         specifier: ^4.1.3
-        version: 4.1.3(react-hook-form@7.68.0(react@19.2.3))
-      '@tanstack/react-query':
+        version: 4.1.3(react-hook-form@7.72.0(react@19.2.4))
+      "@tanstack/react-query":
         specifier: ^5.75.5
-        version: 5.90.12(react@19.2.3)
-      '@tanstack/react-query-devtools':
+        version: 5.95.2(react@19.2.4)
+      "@tanstack/react-query-devtools":
         specifier: ^5.75.5
-        version: 5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)
-      '@tanstack/react-table':
+        version: 5.95.2(@tanstack/react-query@5.95.2(react@19.2.4))(react@19.2.4)
+      "@tanstack/react-table":
         specifier: ^8.21.2
-        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       axios:
         specifier: ^1.8.1
         version: 1.8.1
       dayjs:
         specifier: ^1.11.13
-        version: 1.11.19
+        version: 1.11.20
       next:
-        specifier: 15.3.8
-        version: 15.3.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 15.5.18
+        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
-        version: 7.68.0(react@19.2.3)
+        version: 7.72.0(react@19.2.4)
       zod:
         specifier: ^3.24.2
         version: 3.25.76
     devDependencies:
       eslint:
         specifier: ^9.0.0
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.4(jiti@1.21.7)
       eslint-config-next:
-        specifier: 15.4.0
-        version: 15.4.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        specifier: 15.3.8
+        version: 15.3.8(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
       postcss:
         specifier: ^8.4.49
-        version: 8.5.6
+        version: 8.5.8
       prettier:
         specifier: ^3.4.2
-        version: 3.7.4
+        version: 3.8.1
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.14(prettier@3.7.4)
+        version: 0.6.14(prettier@3.8.1)
       steiger:
         specifier: ^0.5.11
         version: 0.5.11(typescript@5.9.3)
       tailwindcss:
         specifier: ^3.4.14
-        version: 3.4.19(yaml@2.8.2)
+        version: 3.4.19(yaml@2.8.3)
+      typescript:
+        specifier: ^5.7.2
+        version: 5.9.3
+
+  apps/as:
+    dependencies:
+      "@common/assets":
+        specifier: workspace:*
+        version: link:../../packages/common/assets
+      "@common/auth":
+        specifier: workspace:*
+        version: link:../../packages/common/auth
+      "@common/components":
+        specifier: workspace:*
+        version: link:../../packages/common/components
+      "@common/network":
+        specifier: workspace:*
+        version: link:../../packages/common/network
+      "@dnd-kit/core":
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@dnd-kit/sortable":
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
+      "@dnd-kit/utilities":
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.2.4)
+      "@faker-js/faker":
+        specifier: ^9.9.0
+        version: 9.9.0
+      "@frontend-opensource/use-react-hooks":
+        specifier: ^1.1.4
+        version: 1.1.4
+      "@hookform/resolvers":
+        specifier: ^4.1.3
+        version: 4.1.3(react-hook-form@7.72.0(react@19.2.4))
+      "@tanstack/react-query":
+        specifier: ^5.75.5
+        version: 5.95.2(react@19.2.4)
+      "@tanstack/react-query-devtools":
+        specifier: ^5.75.5
+        version: 5.95.2(@tanstack/react-query@5.95.2(react@19.2.4))(react@19.2.4)
+      "@tanstack/react-table":
+        specifier: ^8.21.2
+        version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      axios:
+        specifier: ^1.8.1
+        version: 1.8.1
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.20
+      js-cookie:
+        specifier: ^3.0.5
+        version: 3.0.5
+      lucide-react:
+        specifier: ^0.474.0
+        version: 0.474.0(react@19.2.4)
+      next:
+        specifier: 15.5.18
+        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react-hook-form:
+        specifier: ^7.54.2
+        version: 7.72.0(react@19.2.4)
+      tus-js-client:
+        specifier: ^4.3.1
+        version: 4.3.1
+      zod:
+        specifier: ^3.24.2
+        version: 3.25.76
+    devDependencies:
+      "@eslint/eslintrc":
+        specifier: ^3
+        version: 3.3.5
+      "@types/js-cookie":
+        specifier: ^3.0.6
+        version: 3.0.6
+      eslint:
+        specifier: ^9.0.0
+        version: 9.39.4(jiti@2.6.1)
+      eslint-config-next:
+        specifier: 15.3.8
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      eslint-plugin-react-hooks:
+        specifier: ^5.0.0
+        version: 5.2.0(eslint@9.39.4(jiti@2.6.1))
+      postcss:
+        specifier: ^8.4.49
+        version: 8.5.8
+      prettier:
+        specifier: ^3.4.2
+        version: 3.8.1
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.11
+        version: 0.6.14(prettier@3.8.1)
+      steiger:
+        specifier: ^0.5.11
+        version: 0.5.11(typescript@5.9.3)
+      tailwindcss:
+        specifier: ^3.4.14
+        version: 3.4.19(yaml@2.8.3)
       typescript:
         specifier: ^5.7.2
         version: 5.9.3
 
   apps/cm:
     dependencies:
-      '@common/assets':
+      "@common/assets":
         specifier: workspace:*
         version: link:../../packages/common/assets
-      '@common/components':
+      "@common/components":
         specifier: workspace:*
         version: link:../../packages/common/components
-      '@common/config':
+      "@common/config":
         specifier: workspace:*
         version: link:../../packages/common/config
-      '@fontsource-variable/noto-sans-kr':
+      "@dnd-kit/core":
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@dnd-kit/sortable":
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
+      "@dnd-kit/utilities":
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.2.4)
+      "@fontsource-variable/noto-sans-kr":
         specifier: ^5.2.5
-        version: 5.2.9
-      '@frontend-opensource/use-react-hooks':
+        version: 5.2.10
+      "@frontend-opensource/use-react-hooks":
         specifier: ^1.1.4
         version: 1.1.4
-      '@fullcalendar/core':
+      "@fullcalendar/core":
         specifier: ^6.1.17
-        version: 6.1.19
-      '@fullcalendar/daygrid':
+        version: 6.1.20
+      "@fullcalendar/daygrid":
         specifier: ^6.1.17
-        version: 6.1.19(@fullcalendar/core@6.1.19)
-      '@fullcalendar/interaction':
+        version: 6.1.20(@fullcalendar/core@6.1.20)
+      "@fullcalendar/interaction":
         specifier: ^6.1.17
-        version: 6.1.19(@fullcalendar/core@6.1.19)
-      '@fullcalendar/react':
+        version: 6.1.20(@fullcalendar/core@6.1.20)
+      "@fullcalendar/react":
         specifier: ^6.1.17
-        version: 6.1.19(@fullcalendar/core@6.1.19)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@fullcalendar/timegrid':
+        version: 6.1.20(@fullcalendar/core@6.1.20)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@fullcalendar/timegrid":
         specifier: ^6.1.17
-        version: 6.1.19(@fullcalendar/core@6.1.19)
-      '@hookform/resolvers':
+        version: 6.1.20(@fullcalendar/core@6.1.20)
+      "@hookform/resolvers":
         specifier: ^4.1.3
-        version: 4.1.3(react-hook-form@7.68.0(react@19.2.3))
-      '@minoru/react-dnd-treeview':
+        version: 4.1.3(react-hook-form@7.72.0(react@19.2.4))
+      "@minoru/react-dnd-treeview":
         specifier: 3.5.1-alpha.1
-        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-icons':
+        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-icons":
         specifier: ^1.3.2
-        version: 1.3.2(react@19.2.3)
-      '@radix-ui/react-label':
+        version: 1.3.2(react@19.2.4)
+      "@radix-ui/react-label":
         specifier: ^2.1.2
-        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot':
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot":
         specifier: ^1.1.2
-        version: 1.2.4(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-tooltip':
+        version: 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-tooltip":
         specifier: ^1.1.8
-        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@tanstack/react-query':
+        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@tanstack/react-query":
         specifier: ^5.75.5
-        version: 5.90.12(react@19.2.3)
-      '@tanstack/react-query-devtools':
+        version: 5.95.2(react@19.2.4)
+      "@tanstack/react-query-devtools":
         specifier: ^5.75.5
-        version: 5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)
-      '@tanstack/react-table':
+        version: 5.95.2(@tanstack/react-query@5.95.2(react@19.2.4))(react@19.2.4)
+      "@tanstack/react-table":
         specifier: ^8.21.2
-        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@tinymce/tinymce-react':
+        version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@tinymce/tinymce-react":
         specifier: ^5.1.1
-        version: 5.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 5.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       axios:
         specifier: ^1.8.1
         version: 1.8.1
@@ -194,37 +305,37 @@ importers:
         version: 4.5.1
       dayjs:
         specifier: ^1.11.13
-        version: 1.11.19
+        version: 1.11.20
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
       lucide-react:
         specifier: ^0.474.0
-        version: 0.474.0(react@19.2.3)
+        version: 0.474.0(react@19.2.4)
       next:
-        specifier: 15.3.8
-        version: 15.3.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 15.5.18
+        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-qrcode:
         specifier: ^2.5.1
-        version: 2.5.1(react@19.2.3)
+        version: 2.5.1(react@19.2.4)
       next-themes:
         specifier: ^0.4.6
-        version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react-chartjs-2:
         specifier: ^5.3.0
-        version: 5.3.1(chart.js@4.5.1)(react@19.2.3)
+        version: 5.3.1(chart.js@4.5.1)(react@19.2.4)
       react-dnd:
         specifier: ^16.0.1
-        version: 16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3)
+        version: 16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
-        version: 7.68.0(react@19.2.3)
+        version: 7.72.0(react@19.2.4)
       sonner:
         specifier: ^2.0.1
-        version: 2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 2.0.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.2))
+        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.3))
       tus-js-client:
         specifier: ^4.3.1
         version: 4.3.1
@@ -233,92 +344,92 @@ importers:
         version: 3.25.76
       zustand:
         specifier: ^5.0.3
-        version: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
+        version: 5.0.12(@types/react@19.2.14)(immer@10.2.0)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
     devDependencies:
-      '@eslint/eslintrc':
+      "@eslint/eslintrc":
         specifier: ^3.0.0
-        version: 3.3.3
-      '@types/js-cookie':
+        version: 3.3.5
+      "@types/js-cookie":
         specifier: ^3.0.6
         version: 3.0.6
-      '@types/node':
+      "@types/node":
         specifier: ^22.13.1
-        version: 22.19.2
-      '@types/webpack':
+        version: 22.19.15
+      "@types/webpack":
         specifier: ^5.28.5
         version: 5.28.5
       eslint:
         specifier: ^9.0.0
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.4(jiti@2.6.1)
       eslint-config-next:
-        specifier: 15.4.0
-        version: 15.4.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        specifier: 15.3.8
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       postcss:
         specifier: ^8.4.49
-        version: 8.5.6
+        version: 8.5.8
       prettier:
         specifier: ^3.4.2
-        version: 3.7.4
+        version: 3.8.1
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.14(prettier@3.7.4)
+        version: 0.6.14(prettier@3.8.1)
       steiger:
         specifier: ^0.5.5
         version: 0.5.11(typescript@5.9.3)
       tailwindcss:
         specifier: ^3.4.14
-        version: 3.4.19(yaml@2.8.2)
+        version: 3.4.19(yaml@2.8.3)
       typescript:
         specifier: ^5.7.2
         version: 5.9.3
 
   apps/common/features:
     dependencies:
-      '@common/assets':
+      "@common/assets":
         specifier: workspace:*
         version: link:../../../packages/common/assets
-      '@common/components':
+      "@common/components":
         specifier: workspace:*
         version: link:../../../packages/common/components
-      '@common/config':
+      "@common/config":
         specifier: workspace:*
         version: link:../../../packages/common/config
-      '@common/network':
+      "@common/network":
         specifier: workspace:*
         version: link:../../../packages/common/network
-      '@fontsource-variable/noto-sans-kr':
+      "@fontsource-variable/noto-sans-kr":
         specifier: ^5.2.5
-        version: 5.2.9
-      '@frontend-opensource/use-react-hooks':
+        version: 5.2.10
+      "@frontend-opensource/use-react-hooks":
         specifier: ^1.1.4
         version: 1.1.4
-      '@hookform/resolvers':
+      "@hookform/resolvers":
         specifier: ^4.1.3
-        version: 4.1.3(react-hook-form@7.68.0(react@19.2.3))
-      '@minoru/react-dnd-treeview':
+        version: 4.1.3(react-hook-form@7.72.0(react@19.2.4))
+      "@minoru/react-dnd-treeview":
         specifier: ^3.5.0
-        version: 3.5.3(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-icons':
+        version: 3.5.3(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-icons":
         specifier: ^1.3.2
-        version: 1.3.2(react@19.2.3)
-      '@radix-ui/react-label':
+        version: 1.3.2(react@19.2.4)
+      "@radix-ui/react-label":
         specifier: ^2.1.2
-        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot':
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot":
         specifier: ^1.1.2
-        version: 1.2.4(@types/react@19.2.7)(react@19.2.3)
-      '@tanstack/react-query':
+        version: 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      "@tanstack/react-query":
         specifier: ^5.67.1
-        version: 5.90.12(react@19.2.3)
-      '@tanstack/react-query-devtools':
+        version: 5.95.2(react@19.2.4)
+      "@tanstack/react-query-devtools":
         specifier: ^5.75.5
-        version: 5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)
-      '@tanstack/react-table':
+        version: 5.95.2(@tanstack/react-query@5.95.2(react@19.2.4))(react@19.2.4)
+      "@tanstack/react-table":
         specifier: ^8.21.2
-        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@tinymce/tinymce-react':
+        version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@tinymce/tinymce-react":
         specifier: ^5.1.1
-        version: 5.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 5.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       axios:
         specifier: ^1.8.1
         version: 1.8.1
@@ -327,31 +438,31 @@ importers:
         version: 4.5.1
       dayjs:
         specifier: ^1.11.13
-        version: 1.11.19
+        version: 1.11.20
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
       next:
-        specifier: 15.3.8
-        version: 15.3.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 15.5.18
+        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-themes:
         specifier: ^0.4.6
-        version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react-chartjs-2:
         specifier: ^5.3.0
-        version: 5.3.1(chart.js@4.5.1)(react@19.2.3)
+        version: 5.3.1(chart.js@4.5.1)(react@19.2.4)
       react-dnd:
         specifier: ^16.0.1
-        version: 16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3)
+        version: 16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
-        version: 7.68.0(react@19.2.3)
+        version: 7.72.0(react@19.2.4)
       sonner:
         specifier: ^2.0.1
-        version: 2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 2.0.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.2))
+        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.3))
       tus-js-client:
         specifier: ^4.3.1
         version: 4.3.1
@@ -363,107 +474,110 @@ importers:
         version: 3.25.76
       zustand:
         specifier: ^5.0.3
-        version: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
+        version: 5.0.12(@types/react@19.2.14)(immer@10.2.0)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
     devDependencies:
-      '@eslint/eslintrc':
+      "@eslint/eslintrc":
         specifier: ^3
-        version: 3.3.3
-      '@types/js-cookie':
+        version: 3.3.5
+      "@types/js-cookie":
         specifier: ^3.0.6
         version: 3.0.6
-      '@types/node':
+      "@types/node":
         specifier: ^22.13.1
-        version: 22.19.2
-      '@types/webpack':
+        version: 22.19.15
+      "@types/webpack":
         specifier: ^5.28.5
         version: 5.28.5
       eslint:
         specifier: ^9
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.4(jiti@2.6.1)
       eslint-config-next:
-        specifier: 15.1.7
-        version: 15.1.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        specifier: 15.3.8
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       postcss:
         specifier: ^8
-        version: 8.5.6
+        version: 8.5.8
       prettier:
         specifier: ^3.4.2
-        version: 3.7.4
+        version: 3.8.1
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.14(prettier@3.7.4)
+        version: 0.6.14(prettier@3.8.1)
       steiger:
         specifier: ^0.5.5
         version: 0.5.11(typescript@5.9.3)
       tailwindcss:
         specifier: ^3.4.1
-        version: 3.4.19(yaml@2.8.2)
+        version: 3.4.19(yaml@2.8.3)
       typescript:
         specifier: ^5
         version: 5.9.3
 
   apps/cs:
     dependencies:
-      '@common/assets':
+      "@common/assets":
         specifier: workspace:*
         version: link:../../packages/common/assets
-      '@common/components':
+      "@common/auth":
+        specifier: workspace:*
+        version: link:../../packages/common/auth
+      "@common/components":
         specifier: workspace:*
         version: link:../../packages/common/components
-      '@common/config':
+      "@common/config":
         specifier: workspace:*
         version: link:../../packages/common/config
-      '@fontsource-variable/noto-sans-kr':
+      "@fontsource-variable/noto-sans-kr":
         specifier: ^5.2.5
-        version: 5.2.9
-      '@frontend-opensource/use-react-hooks':
+        version: 5.2.10
+      "@frontend-opensource/use-react-hooks":
         specifier: ^1.1.4
         version: 1.1.4
-      '@fullcalendar/core':
+      "@fullcalendar/core":
         specifier: ^6.1.17
-        version: 6.1.19
-      '@fullcalendar/daygrid':
+        version: 6.1.20
+      "@fullcalendar/daygrid":
         specifier: ^6.1.17
-        version: 6.1.19(@fullcalendar/core@6.1.19)
-      '@fullcalendar/interaction':
+        version: 6.1.20(@fullcalendar/core@6.1.20)
+      "@fullcalendar/interaction":
         specifier: ^6.1.17
-        version: 6.1.19(@fullcalendar/core@6.1.19)
-      '@fullcalendar/react':
+        version: 6.1.20(@fullcalendar/core@6.1.20)
+      "@fullcalendar/react":
         specifier: ^6.1.17
-        version: 6.1.19(@fullcalendar/core@6.1.19)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@fullcalendar/timegrid':
+        version: 6.1.20(@fullcalendar/core@6.1.20)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@fullcalendar/timegrid":
         specifier: ^6.1.17
-        version: 6.1.19(@fullcalendar/core@6.1.19)
-      '@hookform/resolvers':
+        version: 6.1.20(@fullcalendar/core@6.1.20)
+      "@hookform/resolvers":
         specifier: ^4.1.3
-        version: 4.1.3(react-hook-form@7.68.0(react@19.2.3))
-      '@minoru/react-dnd-treeview':
+        version: 4.1.3(react-hook-form@7.72.0(react@19.2.4))
+      "@minoru/react-dnd-treeview":
         specifier: 3.5.1-alpha.1
-        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-icons':
+        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-icons":
         specifier: ^1.3.2
-        version: 1.3.2(react@19.2.3)
-      '@radix-ui/react-label':
+        version: 1.3.2(react@19.2.4)
+      "@radix-ui/react-label":
         specifier: ^2.1.2
-        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot':
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot":
         specifier: ^1.1.2
-        version: 1.2.4(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-tooltip':
+        version: 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-tooltip":
         specifier: ^1.1.8
-        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@tanstack/react-query':
+        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@tanstack/react-query":
         specifier: ^5.75.5
-        version: 5.90.12(react@19.2.3)
-      '@tanstack/react-query-devtools':
+        version: 5.95.2(react@19.2.4)
+      "@tanstack/react-query-devtools":
         specifier: ^5.75.5
-        version: 5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)
-      '@tanstack/react-table':
+        version: 5.95.2(@tanstack/react-query@5.95.2(react@19.2.4))(react@19.2.4)
+      "@tanstack/react-table":
         specifier: ^8.21.2
-        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@tinymce/tinymce-react':
+        version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@tinymce/tinymce-react":
         specifier: ^5.1.1
-        version: 5.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 5.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       axios:
         specifier: ^1.8.1
         version: 1.8.1
@@ -472,37 +586,37 @@ importers:
         version: 4.5.1
       dayjs:
         specifier: ^1.11.13
-        version: 1.11.19
+        version: 1.11.20
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
       lucide-react:
         specifier: ^0.474.0
-        version: 0.474.0(react@19.2.3)
+        version: 0.474.0(react@19.2.4)
       next:
-        specifier: 15.3.8
-        version: 15.3.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 15.5.18
+        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-qrcode:
         specifier: ^2.5.1
-        version: 2.5.1(react@19.2.3)
+        version: 2.5.1(react@19.2.4)
       next-themes:
         specifier: ^0.4.6
-        version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react-chartjs-2:
         specifier: ^5.3.0
-        version: 5.3.1(chart.js@4.5.1)(react@19.2.3)
+        version: 5.3.1(chart.js@4.5.1)(react@19.2.4)
       react-dnd:
         specifier: ^16.0.1
-        version: 16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3)
+        version: 16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
-        version: 7.68.0(react@19.2.3)
+        version: 7.72.0(react@19.2.4)
       sonner:
         specifier: ^2.0.1
-        version: 2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 2.0.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.2))
+        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.3))
       tus-js-client:
         specifier: ^4.3.1
         version: 4.3.1
@@ -511,74 +625,77 @@ importers:
         version: 3.25.76
       zustand:
         specifier: ^5.0.3
-        version: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
+        version: 5.0.12(@types/react@19.2.14)(immer@10.2.0)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
     devDependencies:
-      '@eslint/eslintrc':
+      "@eslint/eslintrc":
         specifier: ^3.0.0
-        version: 3.3.3
-      '@types/js-cookie':
+        version: 3.3.5
+      "@types/js-cookie":
         specifier: ^3.0.6
         version: 3.0.6
-      '@types/node':
+      "@types/node":
         specifier: ^22.13.1
-        version: 22.19.2
-      '@types/webpack':
+        version: 22.19.15
+      "@types/webpack":
         specifier: ^5.28.5
         version: 5.28.5
       eslint:
         specifier: ^9.0.0
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.4(jiti@2.6.1)
       eslint-config-next:
-        specifier: 15.4.0
-        version: 15.4.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        specifier: 15.3.8
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      eslint-plugin-react-hooks:
+        specifier: ^5.2.0
+        version: 5.2.0(eslint@9.39.4(jiti@2.6.1))
       postcss:
         specifier: ^8.4.49
-        version: 8.5.6
+        version: 8.5.8
       prettier:
         specifier: ^3.4.2
-        version: 3.7.4
+        version: 3.8.1
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.14(prettier@3.7.4)
+        version: 0.6.14(prettier@3.8.1)
       steiger:
         specifier: ^0.5.5
         version: 0.5.11(typescript@5.9.3)
       tailwindcss:
         specifier: ^3.4.14
-        version: 3.4.19(yaml@2.8.2)
+        version: 3.4.19(yaml@2.8.3)
       typescript:
         specifier: ^5.7.2
         version: 5.9.3
 
   apps/dc:
     dependencies:
-      '@common/assets':
+      "@common/assets":
         specifier: workspace:*
         version: link:../../packages/common/assets
-      '@common/components':
+      "@common/components":
         specifier: workspace:*
         version: link:../../packages/common/components
-      '@frontend-opensource/use-react-hooks':
+      "@frontend-opensource/use-react-hooks":
         specifier: ^1.1.4
         version: 1.1.4
-      '@hookform/resolvers':
+      "@hookform/resolvers":
         specifier: ^4.1.3
-        version: 4.1.3(react-hook-form@7.68.0(react@19.2.3))
-      '@minoru/react-dnd-treeview':
+        version: 4.1.3(react-hook-form@7.72.0(react@19.2.4))
+      "@minoru/react-dnd-treeview":
         specifier: ^3.5.0
-        version: 3.5.3(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-label':
+        version: 3.5.3(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-label":
         specifier: ^2.1.2
-        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot':
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot":
         specifier: ^1.1.2
-        version: 1.2.4(@types/react@19.2.7)(react@19.2.3)
-      '@tanstack/react-query':
+        version: 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      "@tanstack/react-query":
         specifier: ^5.75.5
-        version: 5.90.12(react@19.2.3)
-      '@tanstack/react-table':
+        version: 5.95.2(react@19.2.4)
+      "@tanstack/react-table":
         specifier: ^8.21.2
-        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       axios:
         specifier: ^1.8.1
         version: 1.8.1
@@ -587,98 +704,98 @@ importers:
         version: 4.5.1
       dayjs:
         specifier: ^1.11.13
-        version: 1.11.19
+        version: 1.11.20
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
       lucide-react:
         specifier: ^0.474.0
-        version: 0.474.0(react@19.2.3)
+        version: 0.474.0(react@19.2.4)
       next:
-        specifier: 15.3.8
-        version: 15.3.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 15.5.18
+        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       picocolors:
         specifier: ^1.1.1
         version: 1.1.1
       react-chartjs-2:
         specifier: ^5.3.0
-        version: 5.3.1(chart.js@4.5.1)(react@19.2.3)
+        version: 5.3.1(chart.js@4.5.1)(react@19.2.4)
       react-dnd:
         specifier: ^16.0.1
-        version: 16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3)
+        version: 16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4)
       react-dropzone:
         specifier: ^14.3.8
-        version: 14.3.8(react@19.2.3)
+        version: 14.4.1(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
-        version: 7.68.0(react@19.2.3)
+        version: 7.72.0(react@19.2.4)
       react-qr-code:
         specifier: ^2.0.18
-        version: 2.0.18(react@19.2.3)
+        version: 2.0.18(react@19.2.4)
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.2))
+        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.3))
       zod:
         specifier: ^3.24.2
         version: 3.25.76
       zustand:
         specifier: ^5.0.3
-        version: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
+        version: 5.0.12(@types/react@19.2.14)(immer@10.2.0)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
     devDependencies:
-      '@eslint/eslintrc':
+      "@eslint/eslintrc":
         specifier: ^3.0.0
-        version: 3.3.3
-      '@faker-js/faker':
+        version: 3.3.5
+      "@faker-js/faker":
         specifier: ^9.5.0
         version: 9.9.0
-      '@types/js-cookie':
+      "@types/js-cookie":
         specifier: ^3.0.6
         version: 3.0.6
-      '@types/node':
+      "@types/node":
         specifier: ^22.17.0
-        version: 22.19.2
-      '@types/webpack':
+        version: 22.19.15
+      "@types/webpack":
         specifier: ^5.28.5
         version: 5.28.5
       eslint:
         specifier: ^9.0.0
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.4(jiti@2.6.1)
       eslint-config-next:
-        specifier: 15.4.0
-        version: 15.4.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        specifier: 15.3.8
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       postcss:
         specifier: ^8.4.49
-        version: 8.5.6
+        version: 8.5.8
       prettier:
         specifier: ^3.4.2
-        version: 3.7.4
+        version: 3.8.1
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.14(prettier@3.7.4)
+        version: 0.6.14(prettier@3.8.1)
       steiger:
         specifier: ^0.5.5
         version: 0.5.11(typescript@5.9.3)
       tailwindcss:
         specifier: ^3.4.14
-        version: 3.4.19(yaml@2.8.2)
+        version: 3.4.19(yaml@2.8.3)
       typescript:
         specifier: ^5.7.2
         version: 5.9.3
 
   apps/dm:
     dependencies:
-      '@common/assets':
+      "@common/assets":
         specifier: workspace:*
         version: link:../../packages/common/assets
-      '@common/business_components':
+      "@common/business_components":
         specifier: workspace:*
         version: link:../../packages/common/business_components
-      '@common/components':
+      "@common/components":
         specifier: workspace:*
         version: link:../../packages/common/components
-      '@hookform/resolvers':
+      "@hookform/resolvers":
         specifier: ^4.1.3
-        version: 4.1.3(react-hook-form@7.68.0(react@19.2.3))
+        version: 4.1.3(react-hook-form@7.72.0(react@19.2.4))
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -693,153 +810,83 @@ importers:
         version: 0.9.0
       lucide-react:
         specifier: ^0.474.0
-        version: 0.474.0(react@19.2.3)
+        version: 0.474.0(react@19.2.4)
       next:
-        specifier: 15.3.8
-        version: 15.3.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 15.5.18
+        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
-        version: 7.68.0(react@19.2.3)
+        version: 7.72.0(react@19.2.4)
       react-hot-toast:
         specifier: ^2.5.2
-        version: 2.6.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 2.6.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       tailwind-merge:
         specifier: ^3.0.1
-        version: 3.4.0
+        version: 3.5.0
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.2))
+        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.3))
       zod:
         specifier: ^3.24.2
         version: 3.25.76
     devDependencies:
-      '@eslint/eslintrc':
+      "@eslint/eslintrc":
         specifier: ^3
-        version: 3.3.3
-      '@types/webpack':
+        version: 3.3.5
+      "@types/webpack":
         specifier: ^5.28.5
         version: 5.28.5
       eslint:
         specifier: ^9
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.4(jiti@2.6.1)
       eslint-config-next:
-        specifier: 15.1.7
-        version: 15.1.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      postcss:
-        specifier: ^8
-        version: 8.5.6
-      tailwindcss:
-        specifier: ^3.4.1
-        version: 3.4.19(yaml@2.8.2)
-      typescript:
-        specifier: ^5
-        version: 5.9.3
-
-  apps/dm_new:
-    dependencies:
-      '@common/assets':
-        specifier: workspace:*
-        version: link:../../packages/common/assets
-      '@common/business_components':
-        specifier: workspace:*
-        version: link:../../packages/common/business_components
-      '@common/components':
-        specifier: workspace:*
-        version: link:../../packages/common/components
-      '@hookform/resolvers':
-        specifier: ^4.1.3
-        version: 4.1.3(react-hook-form@7.68.0(react@19.2.3))
-      class-variance-authority:
-        specifier: ^0.7.1
-        version: 0.7.1
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
-      js-cookie:
-        specifier: ^3.0.5
-        version: 3.0.5
-      js-sha512:
-        specifier: ^0.9.0
-        version: 0.9.0
-      lucide-react:
-        specifier: ^0.474.0
-        version: 0.474.0(react@19.2.3)
-      next:
         specifier: 15.3.8
-        version: 15.3.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react-hook-form:
-        specifier: ^7.54.2
-        version: 7.68.0(react@19.2.3)
-      react-hot-toast:
-        specifier: ^2.5.2
-        version: 2.6.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      tailwind-merge:
-        specifier: ^3.0.1
-        version: 3.4.0
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.2))
-      zod:
-        specifier: ^3.24.2
-        version: 3.25.76
-    devDependencies:
-      '@eslint/eslintrc':
-        specifier: ^3
-        version: 3.3.3
-      '@types/webpack':
-        specifier: ^5.28.5
-        version: 5.28.5
-      eslint:
-        specifier: ^9
-        version: 9.39.2(jiti@2.6.1)
-      eslint-config-next:
-        specifier: 15.1.7
-        version: 15.1.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       postcss:
         specifier: ^8
-        version: 8.5.6
+        version: 8.5.8
       tailwindcss:
         specifier: ^3.4.1
-        version: 3.4.19(yaml@2.8.2)
+        version: 3.4.19(yaml@2.8.3)
       typescript:
         specifier: ^5
         version: 5.9.3
 
   apps/fo:
     dependencies:
-      '@common/assets':
+      "@common/assets":
         specifier: workspace:*
         version: link:../../packages/common/assets
-      '@common/business_components':
+      "@common/business_components":
         specifier: workspace:*
         version: link:../../packages/common/business_components
-      '@common/components':
+      "@common/components":
         specifier: workspace:*
         version: link:../../packages/common/components
-      '@fontsource-variable/noto-sans-kr':
+      "@fontsource-variable/noto-sans-kr":
         specifier: ^5.2.5
-        version: 5.2.9
-      '@frontend-opensource/use-react-hooks':
+        version: 5.2.10
+      "@frontend-opensource/use-react-hooks":
         specifier: ^1.1.4
         version: 1.1.4
-      '@hookform/resolvers':
+      "@hookform/resolvers":
         specifier: ^4.1.3
-        version: 4.1.3(react-hook-form@7.68.0(react@19.2.3))
-      '@minoru/react-dnd-treeview':
+        version: 4.1.3(react-hook-form@7.72.0(react@19.2.4))
+      "@minoru/react-dnd-treeview":
         specifier: 3.5.1-alpha.1
-        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@tailwindcss/vite':
+        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@tailwindcss/vite":
         specifier: ^4.0.10
-        version: 4.1.18(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
-      '@tanstack/react-query':
+        version: 4.2.2(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))
+      "@tanstack/react-query":
         specifier: ^5.67.1
-        version: 5.90.12(react@19.2.3)
-      '@tanstack/react-query-devtools':
+        version: 5.95.2(react@19.2.4)
+      "@tanstack/react-query-devtools":
         specifier: ^5.75.5
-        version: 5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)
-      '@tanstack/react-table':
+        version: 5.95.2(@tanstack/react-query@5.95.2(react@19.2.4))(react@19.2.4)
+      "@tanstack/react-table":
         specifier: ^8.21.2
-        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       axios:
         specifier: ^1.8.1
         version: 1.8.1
@@ -850,93 +897,96 @@ importers:
         specifier: ^3.0.5
         version: 3.0.5
       next:
-        specifier: 15.3.8
-        version: 15.3.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 15.5.18
+        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       ol:
         specifier: ^7.3.0
         version: 7.5.2
       ol-ext:
         specifier: ^4.0.11
-        version: 4.0.37(ol@7.5.2)
+        version: 4.0.38(ol@7.5.2)
       proj4:
         specifier: ^2.9.0
-        version: 2.20.2
+        version: 2.20.4
       react-dnd:
         specifier: ^16.0.1
-        version: 16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3)
+        version: 16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
-        version: 7.68.0(react@19.2.3)
+        version: 7.72.0(react@19.2.4)
       select:
         specifier: ^1.1.2
         version: 1.1.2
       webpack:
         specifier: ^5.98.0
-        version: 5.103.0
+        version: 5.105.4
       zod:
         specifier: ^3.24.2
         version: 3.25.76
       zustand:
         specifier: ^5.0.3
-        version: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
+        version: 5.0.12(@types/react@19.2.14)(immer@10.2.0)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
     devDependencies:
-      '@eslint/eslintrc':
+      "@eslint/eslintrc":
         specifier: ^3
-        version: 3.3.3
+        version: 3.3.5
       eslint:
         specifier: ^9
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.4(jiti@2.6.1)
       eslint-config-next:
-        specifier: 15.1.7
-        version: 15.1.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        specifier: 15.3.8
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       postcss:
         specifier: ^8
-        version: 8.5.6
+        version: 8.5.8
       tailwindcss:
         specifier: ^3.4.17
-        version: 3.4.19(yaml@2.8.2)
+        version: 3.4.19(yaml@2.8.3)
       typescript:
         specifier: ^5.6.3
         version: 5.9.3
 
   apps/sn:
     dependencies:
-      '@common/assets':
+      "@common/assets":
         specifier: workspace:*
         version: link:../../packages/common/assets
-      '@common/business_components':
+      "@common/business_components":
         specifier: workspace:*
         version: link:../../packages/common/business_components
-      '@common/components':
+      "@common/components":
         specifier: workspace:*
         version: link:../../packages/common/components
-      '@fontsource-variable/noto-sans-kr':
+      "@common/config":
+        specifier: workspace:*
+        version: link:../../packages/common/config
+      "@fontsource-variable/noto-sans-kr":
         specifier: ^5.2.5
-        version: 5.2.9
-      '@frontend-opensource/use-react-hooks':
+        version: 5.2.10
+      "@frontend-opensource/use-react-hooks":
         specifier: ^1.1.4
         version: 1.1.4
-      '@hookform/resolvers':
+      "@hookform/resolvers":
         specifier: ^4.1.3
-        version: 4.1.3(react-hook-form@7.68.0(react@19.2.3))
-      '@minoru/react-dnd-treeview':
+        version: 4.1.3(react-hook-form@7.72.0(react@19.2.4))
+      "@minoru/react-dnd-treeview":
         specifier: 3.5.1-alpha.1
-        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-label':
+        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-label":
         specifier: ^2.1.2
-        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot':
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot":
         specifier: ^1.1.2
-        version: 1.2.4(@types/react@19.2.7)(react@19.2.3)
-      '@tanstack/react-query':
+        version: 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      "@tanstack/react-query":
         specifier: ^5.67.1
-        version: 5.90.12(react@19.2.3)
-      '@tanstack/react-query-devtools':
+        version: 5.95.2(react@19.2.4)
+      "@tanstack/react-query-devtools":
         specifier: ^5.75.5
-        version: 5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)
-      '@tanstack/react-table':
+        version: 5.95.2(@tanstack/react-query@5.95.2(react@19.2.4))(react@19.2.4)
+      "@tanstack/react-table":
         specifier: ^8.21.2
-        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       axios:
         specifier: ^1.8.1
         version: 1.8.1
@@ -945,7 +995,7 @@ importers:
         version: 4.5.1
       dayjs:
         specifier: ^1.11.13
-        version: 1.11.19
+        version: 1.11.20
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
@@ -953,32 +1003,32 @@ importers:
         specifier: ^2.30.1
         version: 2.30.1
       next:
-        specifier: 15.3.8
-        version: 15.3.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 15.5.18
+        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       ol:
         specifier: ^7.3.0
         version: 7.5.2
       ol-ext:
         specifier: ^4.0.11
-        version: 4.0.37(ol@7.5.2)
+        version: 4.0.38(ol@7.5.2)
       proj4:
         specifier: ^2.9.0
-        version: 2.20.2
+        version: 2.20.4
       react-chartjs-2:
         specifier: ^5.3.0
-        version: 5.3.1(chart.js@4.5.1)(react@19.2.3)
+        version: 5.3.1(chart.js@4.5.1)(react@19.2.4)
       react-dnd:
         specifier: ^16.0.1
-        version: 16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3)
+        version: 16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
-        version: 7.68.0(react@19.2.3)
+        version: 7.72.0(react@19.2.4)
       react-hot-toast:
         specifier: ^2.5.2
-        version: 2.6.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 2.6.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.2))
+        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.3))
       tus-js-client:
         specifier: ^4.3.1
         version: 4.3.1
@@ -993,117 +1043,132 @@ importers:
         version: 3.25.76
       zustand:
         specifier: ^5.0.3
-        version: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
+        version: 5.0.12(@types/react@19.2.14)(immer@10.2.0)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
     devDependencies:
-      '@eslint/eslintrc':
+      "@eslint/eslintrc":
         specifier: ^3
-        version: 3.3.3
-      '@faker-js/faker':
+        version: 3.3.5
+      "@faker-js/faker":
         specifier: ^9.5.0
         version: 9.9.0
-      '@types/js-cookie':
+      "@types/js-cookie":
         specifier: ^3.0.6
         version: 3.0.6
-      '@types/node':
+      "@types/node":
         specifier: ^22.13.1
-        version: 22.19.2
-      '@types/webpack':
+        version: 22.19.15
+      "@types/webpack":
         specifier: ^5.28.5
         version: 5.28.5
       eslint:
         specifier: ^9
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.4(jiti@2.6.1)
       eslint-config-next:
-        specifier: 15.1.7
-        version: 15.1.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        specifier: 15.3.8
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       postcss:
         specifier: ^8
-        version: 8.5.6
+        version: 8.5.8
       prettier:
         specifier: ^3.4.2
-        version: 3.7.4
+        version: 3.8.1
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.14(prettier@3.7.4)
+        version: 0.6.14(prettier@3.8.1)
       steiger:
         specifier: ^0.5.5
         version: 0.5.11(typescript@5.9.3)
       tailwindcss:
         specifier: ^3.4.1
-        version: 3.4.19(yaml@2.8.2)
+        version: 3.4.19(yaml@2.8.3)
       typescript:
         specifier: ^5
         version: 5.9.3
 
   apps/st:
     dependencies:
-      '@common/assets':
+      "@common/assets":
         specifier: workspace:*
         version: link:../../packages/common/assets
-      '@common/components':
+      "@common/auth":
+        specifier: workspace:*
+        version: link:../../packages/common/auth
+      "@common/components":
         specifier: workspace:*
         version: link:../../packages/common/components
-      '@common/config':
+      "@common/config":
         specifier: workspace:*
         version: link:../../packages/common/config
-      '@faker-js/faker':
+      "@common/network":
+        specifier: workspace:*
+        version: link:../../packages/common/network
+      "@dnd-kit/core":
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@dnd-kit/sortable":
+        specifier: ^8.0.0
+        version: 8.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
+      "@dnd-kit/utilities":
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.2.4)
+      "@faker-js/faker":
         specifier: ^9.9.0
         version: 9.9.0
-      '@fontsource-variable/noto-sans-kr':
+      "@fontsource-variable/noto-sans-kr":
         specifier: ^5.2.5
-        version: 5.2.9
-      '@frontend-opensource/use-react-hooks':
+        version: 5.2.10
+      "@frontend-opensource/use-react-hooks":
         specifier: ^1.1.4
         version: 1.1.4
-      '@fullcalendar/core':
+      "@fullcalendar/core":
         specifier: ^6.1.17
-        version: 6.1.19
-      '@fullcalendar/daygrid':
+        version: 6.1.20
+      "@fullcalendar/daygrid":
         specifier: ^6.1.17
-        version: 6.1.19(@fullcalendar/core@6.1.19)
-      '@fullcalendar/interaction':
+        version: 6.1.20(@fullcalendar/core@6.1.20)
+      "@fullcalendar/interaction":
         specifier: ^6.1.17
-        version: 6.1.19(@fullcalendar/core@6.1.19)
-      '@fullcalendar/react':
+        version: 6.1.20(@fullcalendar/core@6.1.20)
+      "@fullcalendar/react":
         specifier: ^6.1.17
-        version: 6.1.19(@fullcalendar/core@6.1.19)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@fullcalendar/timegrid':
+        version: 6.1.20(@fullcalendar/core@6.1.20)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@fullcalendar/timegrid":
         specifier: ^6.1.17
-        version: 6.1.19(@fullcalendar/core@6.1.19)
-      '@hookform/resolvers':
+        version: 6.1.20(@fullcalendar/core@6.1.20)
+      "@hookform/resolvers":
         specifier: ^4.1.3
-        version: 4.1.3(react-hook-form@7.68.0(react@19.2.3))
-      '@minoru/react-dnd-treeview':
+        version: 4.1.3(react-hook-form@7.72.0(react@19.2.4))
+      "@minoru/react-dnd-treeview":
         specifier: 3.5.1-alpha.1
-        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-icons':
+        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-icons":
         specifier: ^1.3.2
-        version: 1.3.2(react@19.2.3)
-      '@radix-ui/react-label':
+        version: 1.3.2(react@19.2.4)
+      "@radix-ui/react-label":
         specifier: ^2.1.2
-        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot':
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot":
         specifier: ^1.1.2
-        version: 1.2.4(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-tooltip':
+        version: 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-tooltip":
         specifier: ^1.1.8
-        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@rsone/components':
+        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@rsone/components":
         specifier: workspace:*
         version: link:../../packages/rsone
-      '@tanstack/react-query':
+      "@tanstack/react-query":
         specifier: ^5.67.1
-        version: 5.90.12(react@19.2.3)
-      '@tanstack/react-query-devtools':
+        version: 5.95.2(react@19.2.4)
+      "@tanstack/react-query-devtools":
         specifier: ^5.75.5
-        version: 5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)
-      '@tanstack/react-table':
+        version: 5.95.2(@tanstack/react-query@5.95.2(react@19.2.4))(react@19.2.4)
+      "@tanstack/react-table":
         specifier: ^8.21.2
-        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@tinymce/tinymce-react':
+        version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@tinymce/tinymce-react":
         specifier: ^5.1.1
-        version: 5.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@types/xlsx':
+        version: 5.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@types/xlsx":
         specifier: ^0.0.36
         version: 0.0.36
       axios:
@@ -1117,7 +1182,7 @@ importers:
         version: 2.2.0(chart.js@4.5.1)
       dayjs:
         specifier: ^1.11.13
-        version: 1.11.19
+        version: 1.11.20
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
@@ -1126,43 +1191,43 @@ importers:
         version: 3.10.1
       lucide-react:
         specifier: ^0.474.0
-        version: 0.474.0(react@19.2.3)
+        version: 0.474.0(react@19.2.4)
       next:
-        specifier: 15.3.8
-        version: 15.3.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 15.5.18
+        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-qrcode:
         specifier: ^2.5.1
-        version: 2.5.1(react@19.2.3)
+        version: 2.5.1(react@19.2.4)
       next-themes:
         specifier: ^0.4.6
-        version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react-chartjs-2:
         specifier: ^5.3.0
-        version: 5.3.1(chart.js@4.5.1)(react@19.2.3)
+        version: 5.3.1(chart.js@4.5.1)(react@19.2.4)
       react-dnd:
         specifier: ^16.0.1
-        version: 16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3)
+        version: 16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
-        version: 7.68.0(react@19.2.3)
+        version: 7.72.0(react@19.2.4)
       realgrid:
         specifier: ^2.9.5
-        version: 2.9.6
+        version: 2.9.7
       realgrid-react:
         specifier: ^0.9.7
-        version: 0.9.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 0.9.9(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       remixicon:
         specifier: ^4.7.0
-        version: 4.7.0
+        version: 4.9.1
       sonner:
         specifier: ^2.0.1
-        version: 2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 2.0.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       swr:
         specifier: ^2.3.7
-        version: 2.3.8(react@19.2.3)
+        version: 2.4.1(react@19.2.4)
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.2))
+        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.3))
       tus-js-client:
         specifier: ^4.3.1
         version: 4.3.1
@@ -1174,86 +1239,86 @@ importers:
         version: 3.25.76
       zustand:
         specifier: ^5.0.3
-        version: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
+        version: 5.0.12(@types/react@19.2.14)(immer@10.2.0)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
     devDependencies:
-      '@eslint/eslintrc':
+      "@eslint/eslintrc":
         specifier: ^3
-        version: 3.3.3
-      '@types/js-cookie':
+        version: 3.3.5
+      "@types/js-cookie":
         specifier: ^3.0.6
         version: 3.0.6
-      '@types/node':
+      "@types/node":
         specifier: ^22.13.1
-        version: 22.19.2
-      '@types/webpack':
+        version: 22.19.15
+      "@types/webpack":
         specifier: ^5.28.5
         version: 5.28.5
       eslint:
         specifier: ^9
-        version: 9.39.2(jiti@1.21.7)
+        version: 9.39.4(jiti@2.6.1)
       eslint-config-next:
-        specifier: 15.1.7
-        version: 15.1.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+        specifier: 15.3.8
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       eslint-plugin-react-hooks:
         specifier: ^5.0.0
-        version: 5.2.0(eslint@9.39.2(jiti@1.21.7))
+        version: 5.2.0(eslint@9.39.4(jiti@2.6.1))
       postcss:
         specifier: ^8
-        version: 8.5.6
+        version: 8.5.8
       prettier:
         specifier: ^3.4.2
-        version: 3.7.4
+        version: 3.8.1
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.14(prettier@3.7.4)
+        version: 0.6.14(prettier@3.8.1)
       steiger:
         specifier: ^0.5.5
         version: 0.5.11(typescript@5.9.3)
       tailwindcss:
         specifier: ^3.4.1
-        version: 3.4.19(yaml@2.8.2)
+        version: 3.4.19(yaml@2.8.3)
       typescript:
         specifier: ^5
         version: 5.9.3
 
   apps/wr:
     dependencies:
-      '@common/assets':
+      "@common/assets":
         specifier: workspace:*
         version: link:../../packages/common/assets
-      '@common/business_components':
+      "@common/business_components":
         specifier: workspace:*
         version: link:../../packages/common/business_components
-      '@common/components':
+      "@common/components":
         specifier: workspace:*
         version: link:../../packages/common/components
-      '@fontsource-variable/noto-sans-kr':
+      "@fontsource-variable/noto-sans-kr":
         specifier: ^5.2.5
-        version: 5.2.9
-      '@frontend-opensource/use-react-hooks':
+        version: 5.2.10
+      "@frontend-opensource/use-react-hooks":
         specifier: ^1.1.4
         version: 1.1.4
-      '@hookform/resolvers':
+      "@hookform/resolvers":
         specifier: ^4.1.3
-        version: 4.1.3(react-hook-form@7.68.0(react@19.2.3))
-      '@minoru/react-dnd-treeview':
+        version: 4.1.3(react-hook-form@7.72.0(react@19.2.4))
+      "@minoru/react-dnd-treeview":
         specifier: 3.5.1-alpha.1
-        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-label':
+        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-label":
         specifier: ^2.1.2
-        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot':
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot":
         specifier: ^1.1.2
-        version: 1.2.4(@types/react@19.2.7)(react@19.2.3)
-      '@tanstack/react-query':
+        version: 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      "@tanstack/react-query":
         specifier: ^5.67.1
-        version: 5.90.12(react@19.2.3)
-      '@tanstack/react-query-devtools':
+        version: 5.95.2(react@19.2.4)
+      "@tanstack/react-query-devtools":
         specifier: ^5.75.5
-        version: 5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)
-      '@tanstack/react-table':
+        version: 5.95.2(@tanstack/react-query@5.95.2(react@19.2.4))(react@19.2.4)
+      "@tanstack/react-table":
         specifier: ^8.21.2
-        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       axios:
         specifier: ^1.8.1
         version: 1.8.1
@@ -1265,49 +1330,49 @@ importers:
         version: 2.1.1
       i18next:
         specifier: ^25.3.2
-        version: 25.7.2(typescript@5.9.3)
+        version: 25.10.9(typescript@5.9.3)
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
       lucide-react:
         specifier: ^0.474.0
-        version: 0.474.0(react@19.2.3)
+        version: 0.474.0(react@19.2.4)
       moment:
         specifier: ^2.30.1
         version: 2.30.1
       next:
-        specifier: 15.3.8
-        version: 15.3.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 15.5.18
+        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       ol:
         specifier: ^7.3.0
         version: 7.5.2
       ol-ext:
         specifier: ^4.0.11
-        version: 4.0.37(ol@7.5.2)
+        version: 4.0.38(ol@7.5.2)
       proj4:
         specifier: ^2.9.0
-        version: 2.20.2
+        version: 2.20.4
       react-dnd:
         specifier: ^16.0.1
-        version: 16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3)
+        version: 16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4)
       react-draggable:
         specifier: ^4.5.0
-        version: 4.5.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 4.5.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
-        version: 7.68.0(react@19.2.3)
+        version: 7.72.0(react@19.2.4)
       react-hot-toast:
         specifier: ^2.5.2
-        version: 2.6.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 2.6.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react-i18next:
         specifier: ^15.6.0
-        version: 15.7.4(i18next@25.7.2(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+        version: 15.7.4(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       tailwind-merge:
         specifier: ^3.0.1
-        version: 3.4.0
+        version: 3.5.0
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.2))
+        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.3))
       tus-js-client:
         specifier: ^4.3.1
         version: 4.3.1
@@ -1322,65 +1387,81 @@ importers:
         version: 3.25.76
       zustand:
         specifier: ^5.0.3
-        version: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
+        version: 5.0.12(@types/react@19.2.14)(immer@10.2.0)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
     devDependencies:
-      '@eslint/eslintrc':
+      "@eslint/eslintrc":
         specifier: ^3
-        version: 3.3.3
-      '@types/webpack':
+        version: 3.3.5
+      "@types/webpack":
         specifier: ^5.28.5
         version: 5.28.5
       eslint:
         specifier: ^9
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.4(jiti@2.6.1)
       eslint-config-next:
-        specifier: 15.1.7
-        version: 15.1.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        specifier: 15.3.8
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       postcss:
         specifier: ^8
-        version: 8.5.6
+        version: 8.5.8
       tailwindcss:
         specifier: ^3.4.1
-        version: 3.4.19(yaml@2.8.2)
+        version: 3.4.19(yaml@2.8.3)
       typescript:
         specifier: ^5
         version: 5.9.3
 
   packages/common/assets:
     devDependencies:
-      '@types/node':
+      "@types/node":
         specifier: ^20.11.0
-        version: 20.19.26
+        version: 20.19.37
       tsup:
         specifier: ^8.0.1
-        version: 8.3.6(jiti@2.6.1)(postcss@8.5.6)(typescript@5.9.3)(yaml@2.8.2)
+        version: 8.3.6(jiti@2.6.1)(postcss@8.5.8)(typescript@5.9.3)(yaml@2.8.3)
       typescript:
         specifier: ^5.3.3
         version: 5.9.3
 
+  packages/common/auth:
+    dependencies:
+      js-cookie:
+        specifier: ^3.0.5
+        version: 3.0.5
+    devDependencies:
+      "@types/js-cookie":
+        specifier: ^3.0.6
+        version: 3.0.6
+      "@types/node":
+        specifier: ^22.13.1
+        version: 22.19.15
+      typescript:
+        specifier: ^5.7.2
+        version: 5.9.3
+
   packages/common/business_components:
     dependencies:
-      '@common/components':
+      "@common/components":
         specifier: workspace:*
         version: link:../components
-      '@hookform/resolvers':
+      "@hookform/resolvers":
         specifier: ^4.1.3
-        version: 4.1.3(react-hook-form@7.68.0(react@19.2.3))
-      '@minoru/react-dnd-treeview':
+        version: 4.1.3(react-hook-form@7.72.0(react@19.2.4))
+      "@minoru/react-dnd-treeview":
         specifier: 3.5.1-alpha.1
-        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-label':
+        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-label":
         specifier: ^2.1.2
-        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-scroll-area':
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-scroll-area":
         specifier: ^1.2.3
-        version: 1.2.10(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-select':
+        version: 1.2.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-select":
         specifier: ^2.1.6
-        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot':
+        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot":
         specifier: ^1.1.2
-        version: 1.2.4(@types/react@19.2.7)(react@19.2.3)
+        version: 1.2.4(@types/react@19.2.14)(react@19.2.4)
       axios:
         specifier: 1.8.1
         version: 1.8.1
@@ -1395,46 +1476,46 @@ importers:
         version: 3.6.0
       libphonenumber-js:
         specifier: ^1.12.9
-        version: 1.12.31
+        version: 1.12.40
       lucide-react:
         specifier: ^0.474.0
-        version: 0.474.0(react@19.2.3)
+        version: 0.474.0(react@19.2.4)
       ol:
         specifier: ^7.3.0
         version: 7.5.2
       ol-ext:
         specifier: ^4.0.11
-        version: 4.0.37(ol@7.5.2)
+        version: 4.0.38(ol@7.5.2)
       path:
         specifier: ^0.12.7
         version: 0.12.7
       proj4:
         specifier: ^2.9.0
-        version: 2.20.2
+        version: 2.20.4
       react-day-picker:
         specifier: ^8.10.1
-        version: 8.10.1(date-fns@3.6.0)(react@19.2.3)
+        version: 8.10.1(date-fns@3.6.0)(react@19.2.4)
       react-dnd:
         specifier: ^16.0.1
-        version: 16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3)
+        version: 16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4)
       react-dropzone:
         specifier: ^14.3.8
-        version: 14.3.8(react@19.2.3)
+        version: 14.4.1(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
-        version: 7.68.0(react@19.2.3)
+        version: 7.72.0(react@19.2.4)
       recharts:
         specifier: ^2.15.1
-        version: 2.15.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 2.15.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       sonner:
         specifier: ^2.0.1
-        version: 2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 2.0.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       tailwind-merge:
         specifier: ^3.0.1
-        version: 3.4.0
+        version: 3.5.0
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.2))
+        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.3))
       xlsx:
         specifier: ^0.18.5
         version: 0.18.5
@@ -1445,172 +1526,181 @@ importers:
         specifier: ^3.24.2
         version: 3.25.76
     devDependencies:
-      '@eslint/js':
+      "@eslint/js":
         specifier: ^9.17.0
-        version: 9.39.2
-      '@storybook/addon-essentials':
+        version: 9.39.4
+      "@storybook/addon-essentials":
         specifier: ^8.5.3
-        version: 8.6.14(@types/react@19.2.7)(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-interactions':
+        version: 8.6.14(@types/react@19.2.14)(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-interactions":
         specifier: ^8.5.3
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-onboarding':
+        version: 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-onboarding":
         specifier: ^8.5.3
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-themes':
+        version: 8.6.18(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-themes":
         specifier: ^8.5.4
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/blocks':
+        version: 8.6.18(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/blocks":
         specifier: ^8.5.3
-        version: 8.6.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/manager-api':
+        version: 8.6.14(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/manager-api":
         specifier: ^8.5.5
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/react':
+        version: 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/react":
         specifier: ^8.5.3
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@8.6.14(prettier@3.7.4))(typescript@5.6.3)
-      '@storybook/react-vite':
+        version: 8.6.18(@storybook/test@8.6.15(storybook@8.6.18(prettier@3.8.1)))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@8.6.18(prettier@3.8.1))(typescript@5.6.3)
+      "@storybook/react-vite":
         specifier: ^8.5.3
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(rollup@4.53.3)(storybook@8.6.14(prettier@3.7.4))(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
-      '@storybook/test':
+        version: 8.6.18(@storybook/test@8.6.15(storybook@8.6.18(prettier@3.8.1)))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(rollup@4.60.0)(storybook@8.6.18(prettier@3.8.1))(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))
+      "@storybook/test":
         specifier: ^8.5.3
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/theming':
+        version: 8.6.15(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/theming":
         specifier: ^8.5.5
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@vitejs/plugin-react':
+        version: 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@vitejs/plugin-react":
         specifier: ^4.3.4
-        version: 4.7.0(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
-      '@xlsx/xlsx-populate':
+        version: 4.7.0(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))
+      "@xlsx/xlsx-populate":
         specifier: ^0.0.8
         version: 0.0.8
       autoprefixer:
         specifier: ^10.4.20
-        version: 10.4.22(postcss@8.5.6)
+        version: 10.4.27(postcss@8.5.8)
       eslint:
         specifier: ^9.17.0
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.4(jiti@2.6.1)
       eslint-plugin-react-hooks:
         specifier: ^5.0.0
-        version: 5.2.0(eslint@9.39.2(jiti@2.6.1))
+        version: 5.2.0(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-react-refresh:
         specifier: ^0.4.16
-        version: 0.4.24(eslint@9.39.2(jiti@2.6.1))
+        version: 0.4.26(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-storybook:
         specifier: ^0.11.2
-        version: 0.11.6(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)
+        version: 0.11.6(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)
       globals:
         specifier: ^15.14.0
         version: 15.15.0
       postcss:
         specifier: ^8.5.3
-        version: 8.5.6
+        version: 8.5.8
       prettier:
         specifier: ^3.4.2
-        version: 3.7.4
+        version: 3.8.1
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.14(prettier@3.7.4)
+        version: 0.6.14(prettier@3.8.1)
       storybook:
         specifier: ^8.5.3
-        version: 8.6.14(prettier@3.7.4)
+        version: 8.6.18(prettier@3.8.1)
       tailwindcss:
         specifier: ^3.4.17
-        version: 3.4.19(yaml@2.8.2)
+        version: 3.4.19(yaml@2.8.3)
       tsup:
         specifier: 8.3.6
-        version: 8.3.6(jiti@2.6.1)(postcss@8.5.6)(typescript@5.6.3)(yaml@2.8.2)
+        version: 8.3.6(jiti@2.6.1)(postcss@8.5.8)(typescript@5.6.3)(yaml@2.8.3)
       typescript:
         specifier: ~5.6.2
         version: 5.6.3
       typescript-eslint:
         specifier: ^8.18.2
-        version: 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)
+        version: 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)
       vite:
         specifier: ^6.0.5
-        version: 6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2)
+        version: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3)
       vite-tsconfig-paths:
         specifier: 5.1.4
-        version: 5.1.4(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
+        version: 5.1.4(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))
 
   packages/common/components:
     dependencies:
-      '@common/assets':
+      "@base-ui/react":
+        specifier: ^1.4.0
+        version: 1.4.1(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@3.6.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@common/assets":
         specifier: workspace:*
         version: link:../assets
-      '@common/config':
+      "@common/auth":
+        specifier: workspace:*
+        version: link:../auth
+      "@common/config":
         specifier: workspace:*
         version: link:../config
-      '@frontend-opensource/use-react-hooks':
+      "@common/network":
+        specifier: workspace:*
+        version: link:../network
+      "@frontend-opensource/use-react-hooks":
         specifier: ^1.1.4
         version: 1.1.4
-      '@minoru/react-dnd-treeview':
+      "@minoru/react-dnd-treeview":
         specifier: ^3.5.0
-        version: 3.5.3(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-accordion':
+        version: 3.5.3(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-accordion":
         specifier: ^1.2.3
-        version: 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-checkbox':
+        version: 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-checkbox":
         specifier: ^1.1.4
-        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-collapsible':
+        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-collapsible":
         specifier: ^1.1.3
-        version: 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-dialog':
+        version: 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-dialog":
         specifier: ^1.1.6
-        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-dropdown-menu':
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-dropdown-menu":
         specifier: ^2.1.6
-        version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-icons':
+        version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-icons":
         specifier: ^1.3.2
-        version: 1.3.2(react@19.2.3)
-      '@radix-ui/react-label':
+        version: 1.3.2(react@19.2.4)
+      "@radix-ui/react-label":
         specifier: ^2.1.2
-        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-popover':
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-popover":
         specifier: ^1.1.6
-        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-progress':
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-progress":
         specifier: ^1.1.2
-        version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-radio-group':
+        version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-radio-group":
         specifier: ^1.2.2
-        version: 1.3.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-scroll-area':
+        version: 1.3.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-scroll-area":
         specifier: ^1.2.3
-        version: 1.2.10(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-select':
+        version: 1.2.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-select":
         specifier: ^2.1.6
-        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-separator':
+        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-separator":
         specifier: ^1.1.2
-        version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slider':
+        version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slider":
         specifier: ^1.2.3
-        version: 1.3.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot':
+        version: 1.3.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot":
         specifier: ^1.1.2
-        version: 1.2.4(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-switch':
+        version: 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-switch":
         specifier: ^1.1.3
-        version: 1.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-tabs':
+        version: 1.2.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-tabs":
         specifier: ^1.1.3
-        version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-tooltip':
+        version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-tooltip":
         specifier: ^1.1.8
-        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-visually-hidden':
+        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-visually-hidden":
         specifier: ^1.1.2
-        version: 1.2.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@tanstack/react-query':
+        version: 1.2.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@tanstack/react-query":
         specifier: ^5.67.1
-        version: 5.90.12(react@19.2.3)
-      '@tanstack/react-table':
+        version: 5.95.2(react@19.2.4)
+      "@tanstack/react-table":
         specifier: ^8.21.2
-        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@types/js-cookie':
+        version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@types/js-cookie":
         specifier: ^3.0.6
         version: 3.0.6
       axios:
@@ -1630,147 +1720,147 @@ importers:
         version: 3.6.0
       dayjs:
         specifier: ^1.11.13
-        version: 1.11.19
+        version: 1.11.20
       embla-carousel-autoplay:
         specifier: ^8.6.0
         version: 8.6.0(embla-carousel@8.6.0)
       embla-carousel-react:
         specifier: ^8.6.0
-        version: 8.6.0(react@19.2.3)
+        version: 8.6.0(react@19.2.4)
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
       lucide-react:
         specifier: ^0.474.0
-        version: 0.474.0(react@19.2.3)
+        version: 0.474.0(react@19.2.4)
       react-chartjs-2:
         specifier: ^5.3.0
-        version: 5.3.1(chart.js@4.5.1)(react@19.2.3)
+        version: 5.3.1(chart.js@4.5.1)(react@19.2.4)
       react-day-picker:
         specifier: ^9.7.0
-        version: 9.12.0(react@19.2.3)
+        version: 9.14.0(react@19.2.4)
       react-dnd:
         specifier: ^16.0.1
-        version: 16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3)
+        version: 16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4)
       react-dnd-html5-backend:
         specifier: ^16.0.1
         version: 16.0.1
       tailwind-merge:
         specifier: ^3.0.1
-        version: 3.4.0
+        version: 3.5.0
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.2))
+        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.3))
     devDependencies:
-      '@eslint/js':
+      "@eslint/js":
         specifier: ^9.17.0
-        version: 9.39.2
-      '@faker-js/faker':
+        version: 9.39.4
+      "@faker-js/faker":
         specifier: ^9.5.0
         version: 9.9.0
-      '@storybook/addon-essentials':
+      "@storybook/addon-essentials":
         specifier: ^8.5.3
-        version: 8.6.14(@types/react@19.2.7)(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-interactions':
+        version: 8.6.14(@types/react@19.2.14)(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-interactions":
         specifier: ^8.5.3
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-onboarding':
+        version: 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-onboarding":
         specifier: ^8.5.3
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-themes':
+        version: 8.6.18(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-themes":
         specifier: ^8.5.4
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/blocks':
+        version: 8.6.18(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/blocks":
         specifier: ^8.5.3
-        version: 8.6.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/manager-api':
+        version: 8.6.14(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/manager-api":
         specifier: ^8.5.5
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/react':
+        version: 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/react":
         specifier: ^8.5.3
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@8.6.14(prettier@3.7.4))(typescript@5.6.3)
-      '@storybook/react-vite':
+        version: 8.6.18(@storybook/test@8.6.15(storybook@8.6.18(prettier@3.8.1)))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@8.6.18(prettier@3.8.1))(typescript@5.6.3)
+      "@storybook/react-vite":
         specifier: ^8.5.3
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(rollup@4.53.3)(storybook@8.6.14(prettier@3.7.4))(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
-      '@storybook/test':
+        version: 8.6.18(@storybook/test@8.6.15(storybook@8.6.18(prettier@3.8.1)))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(rollup@4.60.0)(storybook@8.6.18(prettier@3.8.1))(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))
+      "@storybook/test":
         specifier: ^8.5.3
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/theming':
+        version: 8.6.15(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/theming":
         specifier: ^8.5.5
-        version: 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@types/node':
+        version: 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@types/node":
         specifier: ^22.13.1
-        version: 22.19.2
-      '@vitejs/plugin-react':
+        version: 22.19.15
+      "@vitejs/plugin-react":
         specifier: ^4.3.4
-        version: 4.7.0(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
+        version: 4.7.0(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))
       autoprefixer:
         specifier: ^10.4.20
-        version: 10.4.22(postcss@8.5.6)
+        version: 10.4.27(postcss@8.5.8)
       eslint:
         specifier: ^9.17.0
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.4(jiti@2.6.1)
       eslint-plugin-react-hooks:
         specifier: ^5.0.0
-        version: 5.2.0(eslint@9.39.2(jiti@2.6.1))
+        version: 5.2.0(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-react-refresh:
         specifier: ^0.4.16
-        version: 0.4.24(eslint@9.39.2(jiti@2.6.1))
+        version: 0.4.26(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-storybook:
         specifier: ^0.11.2
-        version: 0.11.6(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)
+        version: 0.11.6(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)
       globals:
         specifier: ^15.14.0
         version: 15.15.0
       postcss:
         specifier: ^8.5.1
-        version: 8.5.6
+        version: 8.5.8
       prettier:
         specifier: ^3.4.2
-        version: 3.7.4
+        version: 3.8.1
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.14(prettier@3.7.4)
+        version: 0.6.14(prettier@3.8.1)
       storybook:
         specifier: ^8.5.3
-        version: 8.6.14(prettier@3.7.4)
+        version: 8.6.18(prettier@3.8.1)
       tailwindcss:
         specifier: ^3.4.17
-        version: 3.4.19(yaml@2.8.2)
+        version: 3.4.19(yaml@2.8.3)
       tsup:
         specifier: 8.3.6
-        version: 8.3.6(jiti@2.6.1)(postcss@8.5.6)(typescript@5.6.3)(yaml@2.8.2)
+        version: 8.3.6(jiti@2.6.1)(postcss@8.5.8)(typescript@5.6.3)(yaml@2.8.3)
       typescript:
         specifier: ~5.6.2
         version: 5.6.3
       typescript-eslint:
         specifier: ^8.18.2
-        version: 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)
+        version: 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)
       vite:
         specifier: ^6.0.5
-        version: 6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2)
+        version: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3)
       vite-tsconfig-paths:
         specifier: 5.1.4
-        version: 5.1.4(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
+        version: 5.1.4(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))
 
   packages/common/config:
     devDependencies:
       eslint:
         specifier: ^9.8.0
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.4(jiti@2.6.1)
       tsup:
         specifier: ^8.2.3
-        version: 8.3.6(jiti@2.6.1)(postcss@8.5.6)(typescript@5.9.3)(yaml@2.8.2)
+        version: 8.3.6(jiti@2.6.1)(postcss@8.5.8)(typescript@5.9.3)(yaml@2.8.3)
       typescript:
         specifier: ^5.5.3
         version: 5.9.3
       vite:
         specifier: ^5.3.5
-        version: 5.4.21(@types/node@22.19.2)(lightningcss@1.30.2)(terser@5.44.1)
+        version: 5.4.21(@types/node@22.19.15)(lightningcss@1.32.0)(terser@5.46.1)
 
   packages/common/network:
     dependencies:
-      '@types/js-cookie':
+      "@types/js-cookie":
         specifier: ^3.0.6
         version: 3.0.6
       axios:
@@ -1780,16 +1870,16 @@ importers:
         specifier: ^3.0.5
         version: 3.0.5
     devDependencies:
-      '@types/node':
+      "@types/node":
         specifier: ^20.11.19
-        version: 20.19.26
+        version: 20.19.37
       typescript:
         specifier: ^5.3.3
         version: 5.9.3
 
   packages/rsone:
     dependencies:
-      '@common/components':
+      "@common/components":
         specifier: workspace:*
         version: link:../common/components
       jszip:
@@ -1797,1745 +1887,2693 @@ importers:
         version: 3.10.1
       react:
         specifier: ^19.2.1
-        version: 19.2.3
+        version: 19.2.4
       react-dom:
         specifier: ^19.2.1
-        version: 19.2.3(react@19.2.3)
+        version: 19.2.4(react@19.2.4)
       realgrid:
         specifier: ^2.9.5
-        version: 2.9.6
+        version: 2.9.7
       realgrid-react:
         specifier: ^0.9.7
-        version: 0.9.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 0.9.9(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       xlsx:
         specifier: ^0.18.5
         version: 0.18.5
       zustand:
         specifier: ^5.0.3
-        version: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
+        version: 5.0.12(@types/react@19.2.14)(immer@10.2.0)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
     devDependencies:
       tsup:
         specifier: 8.3.6
-        version: 8.3.6(jiti@2.6.1)(postcss@8.5.6)(typescript@5.6.3)(yaml@2.8.2)
+        version: 8.3.6(jiti@2.6.1)(postcss@8.5.8)(typescript@5.6.3)(yaml@2.8.3)
       typescript:
         specifier: ~5.6.2
         version: 5.6.3
 
 packages:
+  "@adobe/css-tools@4.4.4":
+    resolution:
+      {
+        integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==,
+      }
 
-  '@adobe/css-tools@4.4.4':
-    resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
+  "@alloc/quick-lru@5.2.0":
+    resolution:
+      {
+        integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==,
+      }
+    engines: { node: ">=10" }
 
-  '@alloc/quick-lru@5.2.0':
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
+  "@babel/code-frame@7.29.0":
+    resolution:
+      {
+        integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/code-frame@7.27.1':
-    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
-    engines: {node: '>=6.9.0'}
+  "@babel/compat-data@7.29.0":
+    resolution:
+      {
+        integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/compat-data@7.28.5':
-    resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
-    engines: {node: '>=6.9.0'}
+  "@babel/core@7.29.0":
+    resolution:
+      {
+        integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/core@7.28.5':
-    resolution: {integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==}
-    engines: {node: '>=6.9.0'}
+  "@babel/generator@7.29.1":
+    resolution:
+      {
+        integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/generator@7.28.5':
-    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
-    engines: {node: '>=6.9.0'}
+  "@babel/helper-compilation-targets@7.28.6":
+    resolution:
+      {
+        integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/helper-compilation-targets@7.27.2':
-    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
-    engines: {node: '>=6.9.0'}
+  "@babel/helper-globals@7.28.0":
+    resolution:
+      {
+        integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/helper-globals@7.28.0':
-    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
-    engines: {node: '>=6.9.0'}
+  "@babel/helper-module-imports@7.28.6":
+    resolution:
+      {
+        integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/helper-module-imports@7.27.1':
-    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-transforms@7.28.3':
-    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
-    engines: {node: '>=6.9.0'}
+  "@babel/helper-module-transforms@7.28.6":
+    resolution:
+      {
+        integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==,
+      }
+    engines: { node: ">=6.9.0" }
     peerDependencies:
-      '@babel/core': ^7.0.0
+      "@babel/core": ^7.0.0
 
-  '@babel/helper-plugin-utils@7.27.1':
-    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
-    engines: {node: '>=6.9.0'}
+  "@babel/helper-plugin-utils@7.28.6":
+    resolution:
+      {
+        integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/helper-string-parser@7.27.1':
-    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
-    engines: {node: '>=6.9.0'}
+  "@babel/helper-string-parser@7.27.1":
+    resolution:
+      {
+        integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/helper-validator-identifier@7.28.5':
-    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
-    engines: {node: '>=6.9.0'}
+  "@babel/helper-validator-identifier@7.28.5":
+    resolution:
+      {
+        integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/helper-validator-option@7.27.1':
-    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
-    engines: {node: '>=6.9.0'}
+  "@babel/helper-validator-option@7.27.1":
+    resolution:
+      {
+        integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/helpers@7.28.4':
-    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
-    engines: {node: '>=6.9.0'}
+  "@babel/helpers@7.29.2":
+    resolution:
+      {
+        integrity: sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/parser@7.28.5':
-    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
-    engines: {node: '>=6.0.0'}
+  "@babel/parser@7.29.2":
+    resolution:
+      {
+        integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==,
+      }
+    engines: { node: ">=6.0.0" }
     hasBin: true
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1':
-    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
-    engines: {node: '>=6.9.0'}
+  "@babel/plugin-transform-react-jsx-self@7.27.1":
+    resolution:
+      {
+        integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==,
+      }
+    engines: { node: ">=6.9.0" }
     peerDependencies:
-      '@babel/core': ^7.0.0-0
+      "@babel/core": ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx-source@7.27.1':
-    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
-    engines: {node: '>=6.9.0'}
+  "@babel/plugin-transform-react-jsx-source@7.27.1":
+    resolution:
+      {
+        integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==,
+      }
+    engines: { node: ">=6.9.0" }
     peerDependencies:
-      '@babel/core': ^7.0.0-0
+      "@babel/core": ^7.0.0-0
 
-  '@babel/runtime@7.28.4':
-    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
-    engines: {node: '>=6.9.0'}
+  "@babel/runtime@7.29.2":
+    resolution:
+      {
+        integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/template@7.27.2':
-    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
-    engines: {node: '>=6.9.0'}
+  "@babel/template@7.28.6":
+    resolution:
+      {
+        integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/traverse@7.28.5':
-    resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
-    engines: {node: '>=6.9.0'}
+  "@babel/traverse@7.29.0":
+    resolution:
+      {
+        integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@babel/types@7.28.5':
-    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
-    engines: {node: '>=6.9.0'}
+  "@babel/types@7.29.0":
+    resolution:
+      {
+        integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==,
+      }
+    engines: { node: ">=6.9.0" }
 
-  '@clack/core@0.4.1':
-    resolution: {integrity: sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==}
+  "@base-ui/react@1.4.1":
+    resolution:
+      {
+        integrity: sha512-Ab5/LIhcmL8BQcsBUYiOfkSDRdLpvgUBzMK30cu684JPcLclYlztharvCZyNNgzJtbAiREzI9q0pI5erHCMgCw==,
+      }
+    engines: { node: ">=14.0.0" }
+    peerDependencies:
+      "@date-fns/tz": ^1.2.0
+      "@types/react": ^19.2.7
+      date-fns: ^4.0.0
+      react: ^19.2.1
+      react-dom: ^19.2.1
+    peerDependenciesMeta:
+      "@date-fns/tz":
+        optional: true
+      "@types/react":
+        optional: true
+      date-fns:
+        optional: true
 
-  '@clack/prompts@0.9.1':
-    resolution: {integrity: sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==}
+  "@base-ui/utils@0.2.8":
+    resolution:
+      {
+        integrity: sha512-jvOi+c+ftGlGotNcKnzPVg2IhCaDTB6/6R3JeqdjdXktuAJi3wKH9T7+svuaKh1mmfVU11UWzUZVH74JDfi/wQ==,
+      }
+    peerDependencies:
+      "@types/react": ^19.2.7
+      react: ^19.2.1
+      react-dom: ^19.2.1
+    peerDependenciesMeta:
+      "@types/react":
+        optional: true
 
-  '@date-fns/tz@1.4.1':
-    resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
+  "@clack/core@0.4.1":
+    resolution:
+      {
+        integrity: sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==,
+      }
 
-  '@dependents/detective-less@5.0.1':
-    resolution: {integrity: sha512-Y6+WUMsTFWE5jb20IFP4YGa5IrGY/+a/FbOSjDF/wz9gepU2hwCYSXRHP/vPwBvwcY3SVMASt4yXxbXNXigmZQ==}
-    engines: {node: '>=18'}
+  "@clack/prompts@0.9.1":
+    resolution:
+      {
+        integrity: sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==,
+      }
 
-  '@emnapi/core@1.7.1':
-    resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
+  "@date-fns/tz@1.4.1":
+    resolution:
+      {
+        integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==,
+      }
 
-  '@emnapi/runtime@1.7.1':
-    resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
+  "@dependents/detective-less@5.0.1":
+    resolution:
+      {
+        integrity: sha512-Y6+WUMsTFWE5jb20IFP4YGa5IrGY/+a/FbOSjDF/wz9gepU2hwCYSXRHP/vPwBvwcY3SVMASt4yXxbXNXigmZQ==,
+      }
+    engines: { node: ">=18" }
 
-  '@emnapi/wasi-threads@1.1.0':
-    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
+  "@dnd-kit/accessibility@3.1.1":
+    resolution:
+      {
+        integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==,
+      }
+    peerDependencies:
+      react: ^19.2.1
 
-  '@esbuild/aix-ppc64@0.21.5':
-    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
-    engines: {node: '>=12'}
+  "@dnd-kit/core@6.3.1":
+    resolution:
+      {
+        integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==,
+      }
+    peerDependencies:
+      react: ^19.2.1
+      react-dom: ^19.2.1
+
+  "@dnd-kit/sortable@10.0.0":
+    resolution:
+      {
+        integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==,
+      }
+    peerDependencies:
+      "@dnd-kit/core": ^6.3.0
+      react: ^19.2.1
+
+  "@dnd-kit/sortable@8.0.0":
+    resolution:
+      {
+        integrity: sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==,
+      }
+    peerDependencies:
+      "@dnd-kit/core": ^6.1.0
+      react: ^19.2.1
+
+  "@dnd-kit/utilities@3.2.2":
+    resolution:
+      {
+        integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==,
+      }
+    peerDependencies:
+      react: ^19.2.1
+
+  "@emnapi/core@1.9.1":
+    resolution:
+      {
+        integrity: sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==,
+      }
+
+  "@emnapi/runtime@1.9.1":
+    resolution:
+      {
+        integrity: sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==,
+      }
+
+  "@emnapi/wasi-threads@1.2.0":
+    resolution:
+      {
+        integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==,
+      }
+
+  "@esbuild/aix-ppc64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==,
+      }
+    engines: { node: ">=12" }
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/aix-ppc64@0.24.2':
-    resolution: {integrity: sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==}
-    engines: {node: '>=18'}
+  "@esbuild/aix-ppc64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==,
+      }
+    engines: { node: ">=18" }
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/aix-ppc64@0.25.12':
-    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
-    engines: {node: '>=18'}
+  "@esbuild/aix-ppc64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==,
+      }
+    engines: { node: ">=18" }
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.21.5':
-    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
-    engines: {node: '>=12'}
+  "@esbuild/android-arm64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==,
+      }
+    engines: { node: ">=12" }
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm64@0.24.2':
-    resolution: {integrity: sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==}
-    engines: {node: '>=18'}
+  "@esbuild/android-arm64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm64@0.25.12':
-    resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
-    engines: {node: '>=18'}
+  "@esbuild/android-arm64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.21.5':
-    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
-    engines: {node: '>=12'}
+  "@esbuild/android-arm@0.21.5":
+    resolution:
+      {
+        integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==,
+      }
+    engines: { node: ">=12" }
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-arm@0.24.2':
-    resolution: {integrity: sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==}
-    engines: {node: '>=18'}
+  "@esbuild/android-arm@0.24.2":
+    resolution:
+      {
+        integrity: sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-arm@0.25.12':
-    resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
-    engines: {node: '>=18'}
+  "@esbuild/android-arm@0.25.12":
+    resolution:
+      {
+        integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.21.5':
-    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
-    engines: {node: '>=12'}
+  "@esbuild/android-x64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==,
+      }
+    engines: { node: ">=12" }
     cpu: [x64]
     os: [android]
 
-  '@esbuild/android-x64@0.24.2':
-    resolution: {integrity: sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==}
-    engines: {node: '>=18'}
+  "@esbuild/android-x64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [android]
 
-  '@esbuild/android-x64@0.25.12':
-    resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
-    engines: {node: '>=18'}
+  "@esbuild/android-x64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.21.5':
-    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
-    engines: {node: '>=12'}
+  "@esbuild/darwin-arm64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==,
+      }
+    engines: { node: ">=12" }
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-arm64@0.24.2':
-    resolution: {integrity: sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==}
-    engines: {node: '>=18'}
+  "@esbuild/darwin-arm64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-arm64@0.25.12':
-    resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
-    engines: {node: '>=18'}
+  "@esbuild/darwin-arm64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.21.5':
-    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
-    engines: {node: '>=12'}
+  "@esbuild/darwin-x64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==,
+      }
+    engines: { node: ">=12" }
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.24.2':
-    resolution: {integrity: sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==}
-    engines: {node: '>=18'}
+  "@esbuild/darwin-x64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.25.12':
-    resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
-    engines: {node: '>=18'}
+  "@esbuild/darwin-x64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.21.5':
-    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
-    engines: {node: '>=12'}
+  "@esbuild/freebsd-arm64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==,
+      }
+    engines: { node: ">=12" }
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-arm64@0.24.2':
-    resolution: {integrity: sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==}
-    engines: {node: '>=18'}
+  "@esbuild/freebsd-arm64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-arm64@0.25.12':
-    resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
-    engines: {node: '>=18'}
+  "@esbuild/freebsd-arm64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.21.5':
-    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
-    engines: {node: '>=12'}
+  "@esbuild/freebsd-x64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==,
+      }
+    engines: { node: ">=12" }
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.24.2':
-    resolution: {integrity: sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==}
-    engines: {node: '>=18'}
+  "@esbuild/freebsd-x64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.25.12':
-    resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
-    engines: {node: '>=18'}
+  "@esbuild/freebsd-x64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.21.5':
-    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
-    engines: {node: '>=12'}
+  "@esbuild/linux-arm64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==,
+      }
+    engines: { node: ">=12" }
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm64@0.24.2':
-    resolution: {integrity: sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-arm64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm64@0.25.12':
-    resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-arm64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.21.5':
-    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
-    engines: {node: '>=12'}
+  "@esbuild/linux-arm@0.21.5":
+    resolution:
+      {
+        integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==,
+      }
+    engines: { node: ">=12" }
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-arm@0.24.2':
-    resolution: {integrity: sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-arm@0.24.2":
+    resolution:
+      {
+        integrity: sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-arm@0.25.12':
-    resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-arm@0.25.12":
+    resolution:
+      {
+        integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.21.5':
-    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
-    engines: {node: '>=12'}
+  "@esbuild/linux-ia32@0.21.5":
+    resolution:
+      {
+        integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==,
+      }
+    engines: { node: ">=12" }
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.24.2':
-    resolution: {integrity: sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-ia32@0.24.2":
+    resolution:
+      {
+        integrity: sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==,
+      }
+    engines: { node: ">=18" }
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.25.12':
-    resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-ia32@0.25.12":
+    resolution:
+      {
+        integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==,
+      }
+    engines: { node: ">=18" }
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.21.5':
-    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
-    engines: {node: '>=12'}
+  "@esbuild/linux-loong64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==,
+      }
+    engines: { node: ">=12" }
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.24.2':
-    resolution: {integrity: sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-loong64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==,
+      }
+    engines: { node: ">=18" }
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.25.12':
-    resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-loong64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==,
+      }
+    engines: { node: ">=18" }
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.21.5':
-    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
-    engines: {node: '>=12'}
+  "@esbuild/linux-mips64el@0.21.5":
+    resolution:
+      {
+        integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==,
+      }
+    engines: { node: ">=12" }
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.24.2':
-    resolution: {integrity: sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-mips64el@0.24.2":
+    resolution:
+      {
+        integrity: sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==,
+      }
+    engines: { node: ">=18" }
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.25.12':
-    resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-mips64el@0.25.12":
+    resolution:
+      {
+        integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==,
+      }
+    engines: { node: ">=18" }
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.21.5':
-    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
-    engines: {node: '>=12'}
+  "@esbuild/linux-ppc64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==,
+      }
+    engines: { node: ">=12" }
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.24.2':
-    resolution: {integrity: sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-ppc64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==,
+      }
+    engines: { node: ">=18" }
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.25.12':
-    resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-ppc64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==,
+      }
+    engines: { node: ">=18" }
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.21.5':
-    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
-    engines: {node: '>=12'}
+  "@esbuild/linux-riscv64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==,
+      }
+    engines: { node: ">=12" }
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.24.2':
-    resolution: {integrity: sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-riscv64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==,
+      }
+    engines: { node: ">=18" }
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.25.12':
-    resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-riscv64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==,
+      }
+    engines: { node: ">=18" }
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.21.5':
-    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
-    engines: {node: '>=12'}
+  "@esbuild/linux-s390x@0.21.5":
+    resolution:
+      {
+        integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==,
+      }
+    engines: { node: ">=12" }
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.24.2':
-    resolution: {integrity: sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-s390x@0.24.2":
+    resolution:
+      {
+        integrity: sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==,
+      }
+    engines: { node: ">=18" }
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.25.12':
-    resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-s390x@0.25.12":
+    resolution:
+      {
+        integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==,
+      }
+    engines: { node: ">=18" }
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.21.5':
-    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
-    engines: {node: '>=12'}
+  "@esbuild/linux-x64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==,
+      }
+    engines: { node: ">=12" }
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/linux-x64@0.24.2':
-    resolution: {integrity: sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-x64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/linux-x64@0.25.12':
-    resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
-    engines: {node: '>=18'}
+  "@esbuild/linux-x64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-arm64@0.24.2':
-    resolution: {integrity: sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==}
-    engines: {node: '>=18'}
+  "@esbuild/netbsd-arm64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-arm64@0.25.12':
-    resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
-    engines: {node: '>=18'}
+  "@esbuild/netbsd-arm64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.21.5':
-    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
-    engines: {node: '>=12'}
+  "@esbuild/netbsd-x64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==,
+      }
+    engines: { node: ">=12" }
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.24.2':
-    resolution: {integrity: sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==}
-    engines: {node: '>=18'}
+  "@esbuild/netbsd-x64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.25.12':
-    resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
-    engines: {node: '>=18'}
+  "@esbuild/netbsd-x64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-arm64@0.24.2':
-    resolution: {integrity: sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==}
-    engines: {node: '>=18'}
+  "@esbuild/openbsd-arm64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-arm64@0.25.12':
-    resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
-    engines: {node: '>=18'}
+  "@esbuild/openbsd-arm64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.21.5':
-    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
-    engines: {node: '>=12'}
+  "@esbuild/openbsd-x64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==,
+      }
+    engines: { node: ">=12" }
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.24.2':
-    resolution: {integrity: sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==}
-    engines: {node: '>=18'}
+  "@esbuild/openbsd-x64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.25.12':
-    resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
-    engines: {node: '>=18'}
+  "@esbuild/openbsd-x64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openharmony-arm64@0.25.12':
-    resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
-    engines: {node: '>=18'}
+  "@esbuild/openharmony-arm64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/sunos-x64@0.21.5':
-    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
-    engines: {node: '>=12'}
+  "@esbuild/sunos-x64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==,
+      }
+    engines: { node: ">=12" }
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/sunos-x64@0.24.2':
-    resolution: {integrity: sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==}
-    engines: {node: '>=18'}
+  "@esbuild/sunos-x64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/sunos-x64@0.25.12':
-    resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
-    engines: {node: '>=18'}
+  "@esbuild/sunos-x64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.21.5':
-    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
-    engines: {node: '>=12'}
+  "@esbuild/win32-arm64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==,
+      }
+    engines: { node: ">=12" }
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-arm64@0.24.2':
-    resolution: {integrity: sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==}
-    engines: {node: '>=18'}
+  "@esbuild/win32-arm64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-arm64@0.25.12':
-    resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
-    engines: {node: '>=18'}
+  "@esbuild/win32-arm64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==,
+      }
+    engines: { node: ">=18" }
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.21.5':
-    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
-    engines: {node: '>=12'}
+  "@esbuild/win32-ia32@0.21.5":
+    resolution:
+      {
+        integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==,
+      }
+    engines: { node: ">=12" }
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.24.2':
-    resolution: {integrity: sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==}
-    engines: {node: '>=18'}
+  "@esbuild/win32-ia32@0.24.2":
+    resolution:
+      {
+        integrity: sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==,
+      }
+    engines: { node: ">=18" }
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.25.12':
-    resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
-    engines: {node: '>=18'}
+  "@esbuild/win32-ia32@0.25.12":
+    resolution:
+      {
+        integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==,
+      }
+    engines: { node: ">=18" }
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.21.5':
-    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
-    engines: {node: '>=12'}
+  "@esbuild/win32-x64@0.21.5":
+    resolution:
+      {
+        integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==,
+      }
+    engines: { node: ">=12" }
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.24.2':
-    resolution: {integrity: sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==}
-    engines: {node: '>=18'}
+  "@esbuild/win32-x64@0.24.2":
+    resolution:
+      {
+        integrity: sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.25.12':
-    resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
-    engines: {node: '>=18'}
+  "@esbuild/win32-x64@0.25.12":
+    resolution:
+      {
+        integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==,
+      }
+    engines: { node: ">=18" }
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.9.0':
-    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  "@eslint-community/eslint-utils@4.9.1":
+    resolution:
+      {
+        integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==,
+      }
+    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.12.2':
-    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+  "@eslint-community/regexpp@4.12.2":
+    resolution:
+      {
+        integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==,
+      }
+    engines: { node: ^12.0.0 || ^14.0.0 || >=16.0.0 }
 
-  '@eslint/config-array@0.21.1':
-    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@eslint/config-array@0.21.2":
+    resolution:
+      {
+        integrity: sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@eslint/config-helpers@0.4.2':
-    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@eslint/config-helpers@0.4.2":
+    resolution:
+      {
+        integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@eslint/core@0.17.0':
-    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@eslint/core@0.17.0":
+    resolution:
+      {
+        integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@eslint/eslintrc@3.3.3':
-    resolution: {integrity: sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@eslint/eslintrc@3.3.5":
+    resolution:
+      {
+        integrity: sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@eslint/js@9.39.2':
-    resolution: {integrity: sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@eslint/js@9.39.4":
+    resolution:
+      {
+        integrity: sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@eslint/object-schema@2.1.7':
-    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@eslint/object-schema@2.1.7":
+    resolution:
+      {
+        integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@eslint/plugin-kit@0.4.1':
-    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@eslint/plugin-kit@0.4.1":
+    resolution:
+      {
+        integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@faker-js/faker@9.9.0':
-    resolution: {integrity: sha512-OEl393iCOoo/z8bMezRlJu+GlRGlsKbUAN7jKB6LhnKoqKve5DXRpalbItIIcwnCjs1k/FOPjFzcA6Qn+H+YbA==}
-    engines: {node: '>=18.0.0', npm: '>=9.0.0'}
+  "@faker-js/faker@9.9.0":
+    resolution:
+      {
+        integrity: sha512-OEl393iCOoo/z8bMezRlJu+GlRGlsKbUAN7jKB6LhnKoqKve5DXRpalbItIIcwnCjs1k/FOPjFzcA6Qn+H+YbA==,
+      }
+    engines: { node: ">=18.0.0", npm: ">=9.0.0" }
 
-  '@feature-sliced/filesystem@3.0.1':
-    resolution: {integrity: sha512-RlrfjhaX81o6E5OBc2A0tOLG/cZSOvcM+FpPlzEhTraIzBz8JmhxgwrYQbafMqiC+TOrqhd2pTLkU7PFQG1QdQ==}
+  "@feature-sliced/filesystem@3.0.1":
+    resolution:
+      {
+        integrity: sha512-RlrfjhaX81o6E5OBc2A0tOLG/cZSOvcM+FpPlzEhTraIzBz8JmhxgwrYQbafMqiC+TOrqhd2pTLkU7PFQG1QdQ==,
+      }
 
-  '@feature-sliced/steiger-plugin@0.5.7':
-    resolution: {integrity: sha512-xENW2fvfU+UyMgcB3S+CCMPrH2Tq/BG1W9IxGp5B8+j0TtbgmbzT3DIj3A2HG4kouVYUjzgWA6JIuHbGo3lDzg==}
+  "@feature-sliced/steiger-plugin@0.5.7":
+    resolution:
+      {
+        integrity: sha512-xENW2fvfU+UyMgcB3S+CCMPrH2Tq/BG1W9IxGp5B8+j0TtbgmbzT3DIj3A2HG4kouVYUjzgWA6JIuHbGo3lDzg==,
+      }
 
-  '@floating-ui/core@1.7.3':
-    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+  "@floating-ui/core@1.7.5":
+    resolution:
+      {
+        integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==,
+      }
 
-  '@floating-ui/dom@1.7.4':
-    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+  "@floating-ui/dom@1.7.6":
+    resolution:
+      {
+        integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==,
+      }
 
-  '@floating-ui/react-dom@2.1.6':
-    resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
+  "@floating-ui/react-dom@2.1.8":
+    resolution:
+      {
+        integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
 
-  '@floating-ui/utils@0.2.10':
-    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+  "@floating-ui/utils@0.2.11":
+    resolution:
+      {
+        integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==,
+      }
 
-  '@fontsource-variable/noto-sans-kr@5.2.9':
-    resolution: {integrity: sha512-g1BnJdJbnAgRUP8YxyPIm8npZVUbtt6VgtLnkGR7poa/RVbVGd27i+9138DmwRvtbKhJG1fPLQ/V3BonvFykRQ==}
+  "@fontsource-variable/noto-sans-kr@5.2.10":
+    resolution:
+      {
+        integrity: sha512-UZOO7HF44Rt5+7SCeFMHYVgbKu36Jet6IxrAd7jjEkQMVDmeefwd0H8V5pSZydvBOOxClk3V5cQsujJqGHhQMw==,
+      }
 
-  '@frontend-opensource/use-react-hooks@1.1.4':
-    resolution: {integrity: sha512-otCSyciL5MVCNNYmdDdg2lEL6rbZ3XX1meYQCzapUSC4V6qx2YxMk1kUbhwEM/+vdxhYzBHsVBGD0rZWl5cgrw==}
+  "@frontend-opensource/use-react-hooks@1.1.4":
+    resolution:
+      {
+        integrity: sha512-otCSyciL5MVCNNYmdDdg2lEL6rbZ3XX1meYQCzapUSC4V6qx2YxMk1kUbhwEM/+vdxhYzBHsVBGD0rZWl5cgrw==,
+      }
 
-  '@fullcalendar/core@6.1.19':
-    resolution: {integrity: sha512-z0aVlO5e4Wah6p6mouM0UEqtRf1MZZPt4mwzEyU6kusaNL+dlWQgAasF2cK23hwT4cmxkEmr4inULXgpyeExdQ==}
+  "@fullcalendar/core@6.1.20":
+    resolution:
+      {
+        integrity: sha512-1cukXLlePFiJ8YKXn/4tMKsy0etxYLCkXk8nUCFi11nRONF2Ba2CD5b21/ovtOO2tL6afTJfwmc1ed3HG7eB1g==,
+      }
 
-  '@fullcalendar/daygrid@6.1.19':
-    resolution: {integrity: sha512-IAAfnMICnVWPjpT4zi87i3FEw0xxSza0avqY/HedKEz+l5MTBYvCDPOWDATpzXoLut3aACsjktIyw9thvIcRYQ==}
+  "@fullcalendar/daygrid@6.1.20":
+    resolution:
+      {
+        integrity: sha512-AO9vqhkLP77EesmJzuU+IGXgxNulsA8mgQHynclJ8U70vSwAVnbcLG9qftiTAFSlZjiY/NvhE7sflve6cJelyQ==,
+      }
     peerDependencies:
-      '@fullcalendar/core': ~6.1.19
+      "@fullcalendar/core": ~6.1.20
 
-  '@fullcalendar/interaction@6.1.19':
-    resolution: {integrity: sha512-GOciy79xe8JMVp+1evAU3ytdwN/7tv35t5i1vFkifiuWcQMLC/JnLg/RA2s4sYmQwoYhTw/p4GLcP0gO5B3X5w==}
+  "@fullcalendar/interaction@6.1.20":
+    resolution:
+      {
+        integrity: sha512-p6txmc5txL0bMiPaJxe2ip6o0T384TyoD2KGdsU6UjZ5yoBlaY+dg7kxfnYKpYMzEJLG58n+URrHr2PgNL2fyA==,
+      }
     peerDependencies:
-      '@fullcalendar/core': ~6.1.19
+      "@fullcalendar/core": ~6.1.20
 
-  '@fullcalendar/react@6.1.19':
-    resolution: {integrity: sha512-FP78vnyylaL/btZeHig8LQgfHgfwxLaIG6sKbNkzkPkKEACv11UyyBoTSkaavPsHtXvAkcTED1l7TOunAyPEnA==}
+  "@fullcalendar/react@6.1.20":
+    resolution:
+      {
+        integrity: sha512-1w0pZtceaUdfAnxMSCGHCQalhi+mR1jOe76sXzyAXpcPz/Lf0zHSdcGK/U2XpZlnQgQtBZW+d+QBnnzVQKCxAA==,
+      }
     peerDependencies:
-      '@fullcalendar/core': ~6.1.19
+      "@fullcalendar/core": ~6.1.20
       react: ^19.2.1
       react-dom: ^19.2.1
 
-  '@fullcalendar/timegrid@6.1.19':
-    resolution: {integrity: sha512-OuzpUueyO9wB5OZ8rs7TWIoqvu4v3yEqdDxZ2VcsMldCpYJRiOe7yHWKr4ap5Tb0fs7Rjbserc/b6Nt7ol6BRg==}
+  "@fullcalendar/timegrid@6.1.20":
+    resolution:
+      {
+        integrity: sha512-4H+/MWbz3ntA50lrPif+7TsvMeX3R1GSYjiLULz0+zEJ7/Yfd9pupZmAwUs/PBpA6aAcFmeRr0laWfcz1a9V1A==,
+      }
     peerDependencies:
-      '@fullcalendar/core': ~6.1.19
+      "@fullcalendar/core": ~6.1.20
 
-  '@hookform/resolvers@4.1.3':
-    resolution: {integrity: sha512-Jsv6UOWYTrEFJ/01ZrnwVXs7KDvP8XIo115i++5PWvNkNvkrsTfGiLS6w+eJ57CYtUtDQalUWovCZDHFJ8u1VQ==}
+  "@hookform/resolvers@4.1.3":
+    resolution:
+      {
+        integrity: sha512-Jsv6UOWYTrEFJ/01ZrnwVXs7KDvP8XIo115i++5PWvNkNvkrsTfGiLS6w+eJ57CYtUtDQalUWovCZDHFJ8u1VQ==,
+      }
     peerDependencies:
       react-hook-form: ^7.0.0
 
-  '@humanfs/core@0.19.1':
-    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
-    engines: {node: '>=18.18.0'}
+  "@humanfs/core@0.19.1":
+    resolution:
+      {
+        integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==,
+      }
+    engines: { node: ">=18.18.0" }
 
-  '@humanfs/node@0.16.7':
-    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
-    engines: {node: '>=18.18.0'}
+  "@humanfs/node@0.16.7":
+    resolution:
+      {
+        integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==,
+      }
+    engines: { node: ">=18.18.0" }
 
-  '@humanwhocodes/module-importer@1.0.1':
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
+  "@humanwhocodes/module-importer@1.0.1":
+    resolution:
+      {
+        integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==,
+      }
+    engines: { node: ">=12.22" }
 
-  '@humanwhocodes/retry@0.4.3':
-    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
-    engines: {node: '>=18.18'}
+  "@humanwhocodes/retry@0.4.3":
+    resolution:
+      {
+        integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==,
+      }
+    engines: { node: ">=18.18" }
 
-  '@img/colour@1.0.0':
-    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
-    engines: {node: '>=18'}
+  "@img/colour@1.1.0":
+    resolution:
+      {
+        integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==,
+      }
+    engines: { node: ">=18" }
 
-  '@img/sharp-darwin-arm64@0.34.5':
-    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-darwin-arm64@0.34.5":
+    resolution:
+      {
+        integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-darwin-x64@0.34.5':
-    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-darwin-x64@0.34.5":
+    resolution:
+      {
+        integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-arm64@1.2.4':
-    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
+  "@img/sharp-libvips-darwin-arm64@1.2.4":
+    resolution:
+      {
+        integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==,
+      }
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-x64@1.2.4':
-    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
+  "@img/sharp-libvips-darwin-x64@1.2.4":
+    resolution:
+      {
+        integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==,
+      }
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-linux-arm64@1.2.4':
-    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
+  "@img/sharp-libvips-linux-arm64@1.2.4":
+    resolution:
+      {
+        integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==,
+      }
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-libvips-linux-arm@1.2.4':
-    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
+  "@img/sharp-libvips-linux-arm@1.2.4":
+    resolution:
+      {
+        integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==,
+      }
     cpu: [arm]
     os: [linux]
 
-  '@img/sharp-libvips-linux-ppc64@1.2.4':
-    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
+  "@img/sharp-libvips-linux-ppc64@1.2.4":
+    resolution:
+      {
+        integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==,
+      }
     cpu: [ppc64]
     os: [linux]
 
-  '@img/sharp-libvips-linux-riscv64@1.2.4':
-    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
+  "@img/sharp-libvips-linux-riscv64@1.2.4":
+    resolution:
+      {
+        integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==,
+      }
     cpu: [riscv64]
     os: [linux]
 
-  '@img/sharp-libvips-linux-s390x@1.2.4':
-    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
+  "@img/sharp-libvips-linux-s390x@1.2.4":
+    resolution:
+      {
+        integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==,
+      }
     cpu: [s390x]
     os: [linux]
 
-  '@img/sharp-libvips-linux-x64@1.2.4':
-    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
+  "@img/sharp-libvips-linux-x64@1.2.4":
+    resolution:
+      {
+        integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==,
+      }
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
-    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
+  "@img/sharp-libvips-linuxmusl-arm64@1.2.4":
+    resolution:
+      {
+        integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==,
+      }
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
-    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
+  "@img/sharp-libvips-linuxmusl-x64@1.2.4":
+    resolution:
+      {
+        integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==,
+      }
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-linux-arm64@0.34.5':
-    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-linux-arm64@0.34.5":
+    resolution:
+      {
+        integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-linux-arm@0.34.5':
-    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-linux-arm@0.34.5":
+    resolution:
+      {
+        integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [arm]
     os: [linux]
 
-  '@img/sharp-linux-ppc64@0.34.5':
-    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-linux-ppc64@0.34.5":
+    resolution:
+      {
+        integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [ppc64]
     os: [linux]
 
-  '@img/sharp-linux-riscv64@0.34.5':
-    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-linux-riscv64@0.34.5":
+    resolution:
+      {
+        integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [riscv64]
     os: [linux]
 
-  '@img/sharp-linux-s390x@0.34.5':
-    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-linux-s390x@0.34.5":
+    resolution:
+      {
+        integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [s390x]
     os: [linux]
 
-  '@img/sharp-linux-x64@0.34.5':
-    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-linux-x64@0.34.5":
+    resolution:
+      {
+        integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-linuxmusl-arm64@0.34.5':
-    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-linuxmusl-arm64@0.34.5":
+    resolution:
+      {
+        integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-linuxmusl-x64@0.34.5':
-    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-linuxmusl-x64@0.34.5":
+    resolution:
+      {
+        integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-wasm32@0.34.5':
-    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-wasm32@0.34.5":
+    resolution:
+      {
+        integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [wasm32]
 
-  '@img/sharp-win32-arm64@0.34.5':
-    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-win32-arm64@0.34.5":
+    resolution:
+      {
+        integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [arm64]
     os: [win32]
 
-  '@img/sharp-win32-ia32@0.34.5':
-    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-win32-ia32@0.34.5":
+    resolution:
+      {
+        integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [ia32]
     os: [win32]
 
-  '@img/sharp-win32-x64@0.34.5':
-    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  "@img/sharp-win32-x64@0.34.5":
+    resolution:
+      {
+        integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
     cpu: [x64]
     os: [win32]
 
-  '@isaacs/cliui@8.0.2':
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
-    engines: {node: '>=12'}
+  "@isaacs/cliui@8.0.2":
+    resolution:
+      {
+        integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==,
+      }
+    engines: { node: ">=12" }
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0':
-    resolution: {integrity: sha512-qYDdL7fPwLRI+bJNurVcis+tNgJmvWjH4YTBGXTA8xMuxFrnAz6E5o35iyzyKbq5J5Lr8mJGfrR5GXl+WGwhgQ==}
+  "@joshwooding/vite-plugin-react-docgen-typescript@0.5.0":
+    resolution:
+      {
+        integrity: sha512-qYDdL7fPwLRI+bJNurVcis+tNgJmvWjH4YTBGXTA8xMuxFrnAz6E5o35iyzyKbq5J5Lr8mJGfrR5GXl+WGwhgQ==,
+      }
     peerDependencies:
-      typescript: '>= 4.3.x'
+      typescript: ">= 4.3.x"
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@jridgewell/gen-mapping@0.3.13':
-    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+  "@jridgewell/gen-mapping@0.3.13":
+    resolution:
+      {
+        integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==,
+      }
 
-  '@jridgewell/remapping@2.3.5':
-    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+  "@jridgewell/remapping@2.3.5":
+    resolution:
+      {
+        integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==,
+      }
 
-  '@jridgewell/resolve-uri@3.1.2':
-    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
-    engines: {node: '>=6.0.0'}
+  "@jridgewell/resolve-uri@3.1.2":
+    resolution:
+      {
+        integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==,
+      }
+    engines: { node: ">=6.0.0" }
 
-  '@jridgewell/source-map@0.3.11':
-    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
+  "@jridgewell/source-map@0.3.11":
+    resolution:
+      {
+        integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==,
+      }
 
-  '@jridgewell/sourcemap-codec@1.5.5':
-    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+  "@jridgewell/sourcemap-codec@1.5.5":
+    resolution:
+      {
+        integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==,
+      }
 
-  '@jridgewell/trace-mapping@0.3.31':
-    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+  "@jridgewell/trace-mapping@0.3.31":
+    resolution:
+      {
+        integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==,
+      }
 
-  '@juggle/resize-observer@3.4.0':
-    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
+  "@juggle/resize-observer@3.4.0":
+    resolution:
+      {
+        integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==,
+      }
 
-  '@kurkle/color@0.3.4':
-    resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
+  "@kurkle/color@0.3.4":
+    resolution:
+      {
+        integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==,
+      }
 
-  '@mapbox/jsonlint-lines-primitives@2.0.2':
-    resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==}
-    engines: {node: '>= 0.6'}
+  "@mapbox/jsonlint-lines-primitives@2.0.2":
+    resolution:
+      {
+        integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==,
+      }
+    engines: { node: ">= 0.6" }
 
-  '@mapbox/mapbox-gl-style-spec@13.28.0':
-    resolution: {integrity: sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==}
+  "@mapbox/mapbox-gl-style-spec@13.28.0":
+    resolution:
+      {
+        integrity: sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==,
+      }
     hasBin: true
 
-  '@mapbox/point-geometry@0.1.0':
-    resolution: {integrity: sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==}
+  "@mapbox/point-geometry@0.1.0":
+    resolution:
+      {
+        integrity: sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==,
+      }
 
-  '@mapbox/unitbezier@0.0.0':
-    resolution: {integrity: sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==}
+  "@mapbox/unitbezier@0.0.0":
+    resolution:
+      {
+        integrity: sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==,
+      }
 
-  '@mdx-js/react@3.1.1':
-    resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
+  "@mdx-js/react@3.1.1":
+    resolution:
+      {
+        integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
 
-  '@minoru/react-dnd-treeview@3.5.1-alpha.1':
-    resolution: {integrity: sha512-XEKBjhyltG0gzn+ioZRwhlV7+Q/uVZqTMS/tAO3On/rPNuNgqWHROFsyGdHQS/DYoENGOG8JX03chCxExOgEpA==}
+  "@minoru/react-dnd-treeview@3.5.1-alpha.1":
+    resolution:
+      {
+        integrity: sha512-XEKBjhyltG0gzn+ioZRwhlV7+Q/uVZqTMS/tAO3On/rPNuNgqWHROFsyGdHQS/DYoENGOG8JX03chCxExOgEpA==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dnd: 15.x || 16.x
       react-dom: ^19.2.1
 
-  '@minoru/react-dnd-treeview@3.5.3':
-    resolution: {integrity: sha512-k9Hz99pLWR/0AMWYR4Hyda4jQjhfBz0dqqqLpk9apfbB7RthamjIJsKKobxgvA8d7ykbVRLCOlrWlRckP1uSkw==}
+  "@minoru/react-dnd-treeview@3.5.3":
+    resolution:
+      {
+        integrity: sha512-k9Hz99pLWR/0AMWYR4Hyda4jQjhfBz0dqqqLpk9apfbB7RthamjIJsKKobxgvA8d7ykbVRLCOlrWlRckP1uSkw==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dnd: 15.x || 16.x
       react-dom: ^19.2.1
 
-  '@napi-rs/wasm-runtime@0.2.12':
-    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
+  "@napi-rs/wasm-runtime@0.2.12":
+    resolution:
+      {
+        integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==,
+      }
 
-  '@next/env@15.3.8':
-    resolution: {integrity: sha512-SAfHg0g91MQVMPioeFeDjE+8UPF3j3BvHjs8ZKJAUz1BG7eMPvfCKOAgNWJ6s1MLNeP6O2InKQRTNblxPWuq+Q==}
+  "@next/env@15.5.18":
+    resolution:
+      {
+        integrity: sha512-hAV85Ckd9QR6RvH04MEKwsfLTksvFpO47j9xwtoIuvuPnlwecpSi+uZTtm8HirVbtlI2Fnz//xpcSTjFdyJk+g==,
+      }
 
-  '@next/eslint-plugin-next@15.1.7':
-    resolution: {integrity: sha512-kRP7RjSxfTO13NE317ek3mSGzoZlI33nc/i5hs1KaWpK+egs85xg0DJ4p32QEiHnR0mVjuUfhRIun7awqfL7pQ==}
+  "@next/eslint-plugin-next@15.3.8":
+    resolution:
+      {
+        integrity: sha512-CKpvDZhNXPUjUHmjHddcsqjwj46oQblFms2hr2uA79C0kVTiSXQEQxkawUsDNSofHhTI31IbSeBdVyuk/U1nKw==,
+      }
 
-  '@next/eslint-plugin-next@15.4.0':
-    resolution: {integrity: sha512-dlGuj2B76ltswtpdDFQJfTlu6ux0v+EUYzsAYR1IqxqHi5iMPWhPRztgu8eqQZo4uNYkABKzLCmVeGDwbTYTiw==}
-
-  '@next/swc-darwin-arm64@15.3.5':
-    resolution: {integrity: sha512-lM/8tilIsqBq+2nq9kbTW19vfwFve0NR7MxfkuSUbRSgXlMQoJYg+31+++XwKVSXk4uT23G2eF/7BRIKdn8t8w==}
-    engines: {node: '>= 10'}
+  "@next/swc-darwin-arm64@15.5.18":
+    resolution:
+      {
+        integrity: sha512-w0WvQf1n+txiwns/9pwIQteCJpZTbxzO2SE0FLcwuD4v0WEh1JPOjdyxWL21XwJsdpx8cFRjyzxzCS/siP7HcQ==,
+      }
+    engines: { node: ">= 10" }
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@15.3.5':
-    resolution: {integrity: sha512-WhwegPQJ5IfoUNZUVsI9TRAlKpjGVK0tpJTL6KeiC4cux9774NYE9Wu/iCfIkL/5J8rPAkqZpG7n+EfiAfidXA==}
-    engines: {node: '>= 10'}
+  "@next/swc-darwin-x64@15.5.18":
+    resolution:
+      {
+        integrity: sha512-znn71QmDuxm+BOaglihMZfvyySMnNljkVIY5Z2TCssBmm+WqL6c19VhtH5ktFkHa8EZ2bnTUpcNcmNSQsg67og==,
+      }
+    engines: { node: ">= 10" }
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@15.3.5':
-    resolution: {integrity: sha512-LVD6uMOZ7XePg3KWYdGuzuvVboxujGjbcuP2jsPAN3MnLdLoZUXKRc6ixxfs03RH7qBdEHCZjyLP/jBdCJVRJQ==}
-    engines: {node: '>= 10'}
+  "@next/swc-linux-arm64-gnu@15.5.18":
+    resolution:
+      {
+        integrity: sha512-yPPe5MNL+igZUa+OsqQJisqSfh6oarIuA1Q0BDxljGJhRQyZeP+WRHh7rs/jZUGMh5aY0YdIjXZG0VohkKkUdw==,
+      }
+    engines: { node: ">= 10" }
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@15.3.5':
-    resolution: {integrity: sha512-k8aVScYZ++BnS2P69ClK7v4nOu702jcF9AIHKu6llhHEtBSmM2zkPGl9yoqbSU/657IIIb0QHpdxEr0iW9z53A==}
-    engines: {node: '>= 10'}
+  "@next/swc-linux-arm64-musl@15.5.18":
+    resolution:
+      {
+        integrity: sha512-glaCczEWIrHsokFZ3pP08U4BpKxwIdnT+txdOM32OBgpL9Yw4aqx8NejmgtZQZOdstQ5f0L3CasIZudzCuD+nw==,
+      }
+    engines: { node: ">= 10" }
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@15.3.5':
-    resolution: {integrity: sha512-2xYU0DI9DGN/bAHzVwADid22ba5d/xrbrQlr2U+/Q5WkFUzeL0TDR963BdrtLS/4bMmKZGptLeg6282H/S2i8A==}
-    engines: {node: '>= 10'}
+  "@next/swc-linux-x64-gnu@15.5.18":
+    resolution:
+      {
+        integrity: sha512-oUfg2EgJmU3R0OCOWiokGFUTvZiPfXtriXiuF3YNxRoROCdgvTedHIzYoeKH34gsZxS/V7mHbfq2hpAHwhH1/A==,
+      }
+    engines: { node: ">= 10" }
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@15.3.5':
-    resolution: {integrity: sha512-TRYIqAGf1KCbuAB0gjhdn5Ytd8fV+wJSM2Nh2is/xEqR8PZHxfQuaiNhoF50XfY90sNpaRMaGhF6E+qjV1b9Tg==}
-    engines: {node: '>= 10'}
+  "@next/swc-linux-x64-musl@15.5.18":
+    resolution:
+      {
+        integrity: sha512-JLxSP3KTd9iu/bvUMQxH7RJo9xKSHf55/6RPE4a6FTSZygGn7uvZbCej0AHXydwkggQGSD9UddSjwv6Xz5ESfA==,
+      }
+    engines: { node: ">= 10" }
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@15.3.5':
-    resolution: {integrity: sha512-h04/7iMEUSMY6fDGCvdanKqlO1qYvzNxntZlCzfE8i5P0uqzVQWQquU1TIhlz0VqGQGXLrFDuTJVONpqGqjGKQ==}
-    engines: {node: '>= 10'}
+  "@next/swc-win32-arm64-msvc@15.5.18":
+    resolution:
+      {
+        integrity: sha512-ir1v7enP52K2HNz3tQQvwF+x7VNxBk1ciiZ18WBPvxf4C59IqdfmHPJYK3vH7rSxpuCVw/8C712wTXNAtEp+NA==,
+      }
+    engines: { node: ">= 10" }
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@15.3.5':
-    resolution: {integrity: sha512-5fhH6fccXxnX2KhllnGhkYMndhOiLOLEiVGYjP2nizqeGWkN10sA9taATlXwake2E2XMvYZjjz0Uj7T0y+z1yw==}
-    engines: {node: '>= 10'}
+  "@next/swc-win32-x64-msvc@15.5.18":
+    resolution:
+      {
+        integrity: sha512-LIu5me6QTANCd25E7I5uIEfvgQ06RK7tvHAbYo3zCb3VpxQEPvMcSpd87NwUABDT6MbGPdEGR5VRiK4PPTJhQg==,
+      }
+    engines: { node: ">= 10" }
     cpu: [x64]
     os: [win32]
 
-  '@nodelib/fs.scandir@2.1.5':
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
+  "@nodelib/fs.scandir@2.1.5":
+    resolution:
+      {
+        integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==,
+      }
+    engines: { node: ">= 8" }
 
-  '@nodelib/fs.stat@2.0.5':
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
+  "@nodelib/fs.stat@2.0.5":
+    resolution:
+      {
+        integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==,
+      }
+    engines: { node: ">= 8" }
 
-  '@nodelib/fs.walk@1.2.8':
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
+  "@nodelib/fs.walk@1.2.8":
+    resolution:
+      {
+        integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==,
+      }
+    engines: { node: ">= 8" }
 
-  '@nolyfill/is-core-module@1.0.39':
-    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
-    engines: {node: '>=12.4.0'}
+  "@nolyfill/is-core-module@1.0.39":
+    resolution:
+      {
+        integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==,
+      }
+    engines: { node: ">=12.4.0" }
 
-  '@petamoriken/float16@3.9.3':
-    resolution: {integrity: sha512-8awtpHXCx/bNpFt4mt2xdkgtgVvKqty8VbjHI/WWWQuEw+KLzFot3f4+LkQY9YmOtq7A5GdOnqoIC8Pdygjk2g==}
+  "@petamoriken/float16@3.9.3":
+    resolution:
+      {
+        integrity: sha512-8awtpHXCx/bNpFt4mt2xdkgtgVvKqty8VbjHI/WWWQuEw+KLzFot3f4+LkQY9YmOtq7A5GdOnqoIC8Pdygjk2g==,
+      }
 
-  '@pkgjs/parseargs@0.11.0':
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
-    engines: {node: '>=14'}
+  "@pkgjs/parseargs@0.11.0":
+    resolution:
+      {
+        integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==,
+      }
+    engines: { node: ">=14" }
 
-  '@radix-ui/number@1.1.1':
-    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+  "@radix-ui/number@1.1.1":
+    resolution:
+      {
+        integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==,
+      }
 
-  '@radix-ui/primitive@1.1.3':
-    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+  "@radix-ui/primitive@1.1.3":
+    resolution:
+      {
+        integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==,
+      }
 
-  '@radix-ui/react-accordion@1.2.12':
-    resolution: {integrity: sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==}
+  "@radix-ui/react-accordion@1.2.12":
+    resolution:
+      {
+        integrity: sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-arrow@1.1.7':
-    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+  "@radix-ui/react-arrow@1.1.7":
+    resolution:
+      {
+        integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-checkbox@1.3.3':
-    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
+  "@radix-ui/react-checkbox@1.3.3":
+    resolution:
+      {
+        integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-collapsible@1.1.12':
-    resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
+  "@radix-ui/react-collapsible@1.1.12":
+    resolution:
+      {
+        integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-collection@1.1.7':
-    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+  "@radix-ui/react-collection@1.1.7":
+    resolution:
+      {
+        integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-compose-refs@1.1.2':
-    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+  "@radix-ui/react-compose-refs@1.1.2":
+    resolution:
+      {
+        integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-context@1.1.2':
-    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+  "@radix-ui/react-context@1.1.2":
+    resolution:
+      {
+        integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-context@1.1.3':
-    resolution: {integrity: sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==}
+  "@radix-ui/react-context@1.1.3":
+    resolution:
+      {
+        integrity: sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-dialog@1.1.15':
-    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+  "@radix-ui/react-dialog@1.1.15":
+    resolution:
+      {
+        integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-direction@1.1.1':
-    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+  "@radix-ui/react-direction@1.1.1":
+    resolution:
+      {
+        integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-dismissable-layer@1.1.11':
-    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+  "@radix-ui/react-dismissable-layer@1.1.11":
+    resolution:
+      {
+        integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-dropdown-menu@2.1.16':
-    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
+  "@radix-ui/react-dropdown-menu@2.1.16":
+    resolution:
+      {
+        integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-focus-guards@1.1.3':
-    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+  "@radix-ui/react-focus-guards@1.1.3":
+    resolution:
+      {
+        integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-focus-scope@1.1.7':
-    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+  "@radix-ui/react-focus-scope@1.1.7":
+    resolution:
+      {
+        integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-icons@1.3.2':
-    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
+  "@radix-ui/react-icons@1.3.2":
+    resolution:
+      {
+        integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==,
+      }
     peerDependencies:
       react: ^19.2.1
 
-  '@radix-ui/react-id@1.1.1':
-    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+  "@radix-ui/react-id@1.1.1":
+    resolution:
+      {
+        integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-label@2.1.8':
-    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
+  "@radix-ui/react-label@2.1.8":
+    resolution:
+      {
+        integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-menu@2.1.16':
-    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
+  "@radix-ui/react-menu@2.1.16":
+    resolution:
+      {
+        integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-popover@1.1.15':
-    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
+  "@radix-ui/react-popover@1.1.15":
+    resolution:
+      {
+        integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-popper@1.2.8':
-    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+  "@radix-ui/react-popper@1.2.8":
+    resolution:
+      {
+        integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-portal@1.1.9':
-    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+  "@radix-ui/react-portal@1.1.9":
+    resolution:
+      {
+        integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-presence@1.1.5':
-    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+  "@radix-ui/react-presence@1.1.5":
+    resolution:
+      {
+        integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-primitive@2.1.3':
-    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+  "@radix-ui/react-primitive@2.1.3":
+    resolution:
+      {
+        integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-primitive@2.1.4':
-    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+  "@radix-ui/react-primitive@2.1.4":
+    resolution:
+      {
+        integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-progress@1.1.8':
-    resolution: {integrity: sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==}
+  "@radix-ui/react-progress@1.1.8":
+    resolution:
+      {
+        integrity: sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-radio-group@1.3.8':
-    resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
+  "@radix-ui/react-radio-group@1.3.8":
+    resolution:
+      {
+        integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-roving-focus@1.1.11':
-    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+  "@radix-ui/react-roving-focus@1.1.11":
+    resolution:
+      {
+        integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-scroll-area@1.2.10':
-    resolution: {integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==}
+  "@radix-ui/react-scroll-area@1.2.10":
+    resolution:
+      {
+        integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-select@2.2.6':
-    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+  "@radix-ui/react-select@2.2.6":
+    resolution:
+      {
+        integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-separator@1.1.8':
-    resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
+  "@radix-ui/react-separator@1.1.8":
+    resolution:
+      {
+        integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-slider@1.3.6':
-    resolution: {integrity: sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==}
+  "@radix-ui/react-slider@1.3.6":
+    resolution:
+      {
+        integrity: sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-slot@1.2.3':
-    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+  "@radix-ui/react-slot@1.2.3":
+    resolution:
+      {
+        integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-slot@1.2.4':
-    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+  "@radix-ui/react-slot@1.2.4":
+    resolution:
+      {
+        integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-switch@1.2.6':
-    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
+  "@radix-ui/react-switch@1.2.6":
+    resolution:
+      {
+        integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-tabs@1.1.13':
-    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
+  "@radix-ui/react-tabs@1.1.13":
+    resolution:
+      {
+        integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-tooltip@1.2.8':
-    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
+  "@radix-ui/react-tooltip@1.2.8":
+    resolution:
+      {
+        integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-use-callback-ref@1.1.1':
-    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+  "@radix-ui/react-use-callback-ref@1.1.1":
+    resolution:
+      {
+        integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-use-controllable-state@1.2.2':
-    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+  "@radix-ui/react-use-controllable-state@1.2.2":
+    resolution:
+      {
+        integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-use-effect-event@0.0.2':
-    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+  "@radix-ui/react-use-effect-event@0.0.2":
+    resolution:
+      {
+        integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-use-escape-keydown@1.1.1':
-    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+  "@radix-ui/react-use-escape-keydown@1.1.1":
+    resolution:
+      {
+        integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-use-layout-effect@1.1.1':
-    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+  "@radix-ui/react-use-layout-effect@1.1.1":
+    resolution:
+      {
+        integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-use-previous@1.1.1':
-    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+  "@radix-ui/react-use-previous@1.1.1":
+    resolution:
+      {
+        integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-use-rect@1.1.1':
-    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+  "@radix-ui/react-use-rect@1.1.1":
+    resolution:
+      {
+        integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-use-size@1.1.1':
-    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+  "@radix-ui/react-use-size@1.1.1":
+    resolution:
+      {
+        integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
-  '@radix-ui/react-visually-hidden@1.2.3':
-    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+  "@radix-ui/react-visually-hidden@1.2.3":
+    resolution:
+      {
+        integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/react-visually-hidden@1.2.4':
-    resolution: {integrity: sha512-kaeiyGCe844dkb9AVF+rb4yTyb1LiLN/e3es3nLiRyN4dC8AduBYPMnnNlDjX2VDOcvDEiPnRNMJeWCfsX0txg==}
+  "@radix-ui/react-visually-hidden@1.2.4":
+    resolution:
+      {
+        integrity: sha512-kaeiyGCe844dkb9AVF+rb4yTyb1LiLN/e3es3nLiRyN4dC8AduBYPMnnNlDjX2VDOcvDEiPnRNMJeWCfsX0txg==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
-      '@types/react-dom': ^19.2.3
+      "@types/react": ^19.2.7
+      "@types/react-dom": ^19.2.3
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
-      '@types/react-dom':
+      "@types/react-dom":
         optional: true
 
-  '@radix-ui/rect@1.1.1':
-    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+  "@radix-ui/rect@1.1.1":
+    resolution:
+      {
+        integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==,
+      }
 
-  '@react-dnd/asap@5.0.2':
-    resolution: {integrity: sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==}
+  "@react-dnd/asap@5.0.2":
+    resolution:
+      {
+        integrity: sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==,
+      }
 
-  '@react-dnd/invariant@4.0.2':
-    resolution: {integrity: sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==}
+  "@react-dnd/invariant@4.0.2":
+    resolution:
+      {
+        integrity: sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==,
+      }
 
-  '@react-dnd/shallowequal@4.0.2':
-    resolution: {integrity: sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==}
+  "@react-dnd/shallowequal@4.0.2":
+    resolution:
+      {
+        integrity: sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==,
+      }
 
-  '@rolldown/pluginutils@1.0.0-beta.27':
-    resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
+  "@rolldown/pluginutils@1.0.0-beta.27":
+    resolution:
+      {
+        integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==,
+      }
 
-  '@rollup/pluginutils@5.3.0':
-    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
-    engines: {node: '>=14.0.0'}
+  "@rollup/pluginutils@5.3.0":
+    resolution:
+      {
+        integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==,
+      }
+    engines: { node: ">=14.0.0" }
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.53.3':
-    resolution: {integrity: sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==}
+  "@rollup/rollup-android-arm-eabi@4.60.0":
+    resolution:
+      {
+        integrity: sha512-WOhNW9K8bR3kf4zLxbfg6Pxu2ybOUbB2AjMDHSQx86LIF4rH4Ft7vmMwNt0loO0eonglSNy4cpD3MKXXKQu0/A==,
+      }
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.53.3':
-    resolution: {integrity: sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==}
+  "@rollup/rollup-android-arm64@4.60.0":
+    resolution:
+      {
+        integrity: sha512-u6JHLll5QKRvjciE78bQXDmqRqNs5M/3GVqZeMwvmjaNODJih/WIrJlFVEihvV0MiYFmd+ZyPr9wxOVbPAG2Iw==,
+      }
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.53.3':
-    resolution: {integrity: sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==}
+  "@rollup/rollup-darwin-arm64@4.60.0":
+    resolution:
+      {
+        integrity: sha512-qEF7CsKKzSRc20Ciu2Zw1wRrBz4g56F7r/vRwY430UPp/nt1x21Q/fpJ9N5l47WWvJlkNCPJz3QRVw008fi7yA==,
+      }
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.53.3':
-    resolution: {integrity: sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==}
+  "@rollup/rollup-darwin-x64@4.60.0":
+    resolution:
+      {
+        integrity: sha512-WADYozJ4QCnXCH4wPB+3FuGmDPoFseVCUrANmA5LWwGmC6FL14BWC7pcq+FstOZv3baGX65tZ378uT6WG8ynTw==,
+      }
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.53.3':
-    resolution: {integrity: sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==}
+  "@rollup/rollup-freebsd-arm64@4.60.0":
+    resolution:
+      {
+        integrity: sha512-6b8wGHJlDrGeSE3aH5mGNHBjA0TTkxdoNHik5EkvPHCt351XnigA4pS7Wsj/Eo9Y8RBU6f35cjN9SYmCFBtzxw==,
+      }
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.53.3':
-    resolution: {integrity: sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==}
+  "@rollup/rollup-freebsd-x64@4.60.0":
+    resolution:
+      {
+        integrity: sha512-h25Ga0t4jaylMB8M/JKAyrvvfxGRjnPQIR8lnCayyzEjEOx2EJIlIiMbhpWxDRKGKF8jbNH01NnN663dH638mA==,
+      }
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.53.3':
-    resolution: {integrity: sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==}
+  "@rollup/rollup-linux-arm-gnueabihf@4.60.0":
+    resolution:
+      {
+        integrity: sha512-RzeBwv0B3qtVBWtcuABtSuCzToo2IEAIQrcyB/b2zMvBWVbjo8bZDjACUpnaafaxhTw2W+imQbP2BD1usasK4g==,
+      }
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.53.3':
-    resolution: {integrity: sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==}
+  "@rollup/rollup-linux-arm-musleabihf@4.60.0":
+    resolution:
+      {
+        integrity: sha512-Sf7zusNI2CIU1HLzuu9Tc5YGAHEZs5Lu7N1ssJG4Tkw6e0MEsN7NdjUDDfGNHy2IU+ENyWT+L2obgWiguWibWQ==,
+      }
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.53.3':
-    resolution: {integrity: sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==}
+  "@rollup/rollup-linux-arm64-gnu@4.60.0":
+    resolution:
+      {
+        integrity: sha512-DX2x7CMcrJzsE91q7/O02IJQ5/aLkVtYFryqCjduJhUfGKG6yJV8hxaw8pZa93lLEpPTP/ohdN4wFz7yp/ry9A==,
+      }
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.53.3':
-    resolution: {integrity: sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==}
+  "@rollup/rollup-linux-arm64-musl@4.60.0":
+    resolution:
+      {
+        integrity: sha512-09EL+yFVbJZlhcQfShpswwRZ0Rg+z/CsSELFCnPt3iK+iqwGsI4zht3secj5vLEs957QvFFXnzAT0FFPIxSrkQ==,
+      }
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-loong64-gnu@4.53.3':
-    resolution: {integrity: sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==}
+  "@rollup/rollup-linux-loong64-gnu@4.60.0":
+    resolution:
+      {
+        integrity: sha512-i9IcCMPr3EXm8EQg5jnja0Zyc1iFxJjZWlb4wr7U2Wx/GrddOuEafxRdMPRYVaXjgbhvqalp6np07hN1w9kAKw==,
+      }
     cpu: [loong64]
     os: [linux]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.53.3':
-    resolution: {integrity: sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==}
+  "@rollup/rollup-linux-loong64-musl@4.60.0":
+    resolution:
+      {
+        integrity: sha512-DGzdJK9kyJ+B78MCkWeGnpXJ91tK/iKA6HwHxF4TAlPIY7GXEvMe8hBFRgdrR9Ly4qebR/7gfUs9y2IoaVEyog==,
+      }
+    cpu: [loong64]
+    os: [linux]
+
+  "@rollup/rollup-linux-ppc64-gnu@4.60.0":
+    resolution:
+      {
+        integrity: sha512-RwpnLsqC8qbS8z1H1AxBA1H6qknR4YpPR9w2XX0vo2Sz10miu57PkNcnHVaZkbqyw/kUWfKMI73jhmfi9BRMUQ==,
+      }
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.53.3':
-    resolution: {integrity: sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==}
+  "@rollup/rollup-linux-ppc64-musl@4.60.0":
+    resolution:
+      {
+        integrity: sha512-Z8pPf54Ly3aqtdWC3G4rFigZgNvd+qJlOE52fmko3KST9SoGfAdSRCwyoyG05q1HrrAblLbk1/PSIV+80/pxLg==,
+      }
+    cpu: [ppc64]
+    os: [linux]
+
+  "@rollup/rollup-linux-riscv64-gnu@4.60.0":
+    resolution:
+      {
+        integrity: sha512-3a3qQustp3COCGvnP4SvrMHnPQ9d1vzCakQVRTliaz8cIp/wULGjiGpbcqrkv0WrHTEp8bQD/B3HBjzujVWLOA==,
+      }
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-musl@4.53.3':
-    resolution: {integrity: sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==}
+  "@rollup/rollup-linux-riscv64-musl@4.60.0":
+    resolution:
+      {
+        integrity: sha512-pjZDsVH/1VsghMJ2/kAaxt6dL0psT6ZexQVrijczOf+PeP2BUqTHYejk3l6TlPRydggINOeNRhvpLa0AYpCWSQ==,
+      }
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.53.3':
-    resolution: {integrity: sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==}
+  "@rollup/rollup-linux-s390x-gnu@4.60.0":
+    resolution:
+      {
+        integrity: sha512-3ObQs0BhvPgiUVZrN7gqCSvmFuMWvWvsjG5ayJ3Lraqv+2KhOsp+pUbigqbeWqueGIsnn+09HBw27rJ+gYK4VQ==,
+      }
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.53.3':
-    resolution: {integrity: sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==}
+  "@rollup/rollup-linux-x64-gnu@4.60.0":
+    resolution:
+      {
+        integrity: sha512-EtylprDtQPdS5rXvAayrNDYoJhIz1/vzN2fEubo3yLE7tfAw+948dO0g4M0vkTVFhKojnF+n6C8bDNe+gDRdTg==,
+      }
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.53.3':
-    resolution: {integrity: sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==}
+  "@rollup/rollup-linux-x64-musl@4.60.0":
+    resolution:
+      {
+        integrity: sha512-k09oiRCi/bHU9UVFqD17r3eJR9bn03TyKraCrlz5ULFJGdJGi7VOmm9jl44vOJvRJ6P7WuBi/s2A97LxxHGIdw==,
+      }
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-openharmony-arm64@4.53.3':
-    resolution: {integrity: sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==}
+  "@rollup/rollup-openbsd-x64@4.60.0":
+    resolution:
+      {
+        integrity: sha512-1o/0/pIhozoSaDJoDcec+IVLbnRtQmHwPV730+AOD29lHEEo4F5BEUB24H0OBdhbBBDwIOSuf7vgg0Ywxdfiiw==,
+      }
+    cpu: [x64]
+    os: [openbsd]
+
+  "@rollup/rollup-openharmony-arm64@4.60.0":
+    resolution:
+      {
+        integrity: sha512-pESDkos/PDzYwtyzB5p/UoNU/8fJo68vcXM9ZW2V0kjYayj1KaaUfi1NmTUTUpMn4UhU4gTuK8gIaFO4UGuMbA==,
+      }
     cpu: [arm64]
     os: [openharmony]
 
-  '@rollup/rollup-win32-arm64-msvc@4.53.3':
-    resolution: {integrity: sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==}
+  "@rollup/rollup-win32-arm64-msvc@4.60.0":
+    resolution:
+      {
+        integrity: sha512-hj1wFStD7B1YBeYmvY+lWXZ7ey73YGPcViMShYikqKT1GtstIKQAtfUI6yrzPjAy/O7pO0VLXGmUVWXQMaYgTQ==,
+      }
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.53.3':
-    resolution: {integrity: sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==}
+  "@rollup/rollup-win32-ia32-msvc@4.60.0":
+    resolution:
+      {
+        integrity: sha512-SyaIPFoxmUPlNDq5EHkTbiKzmSEmq/gOYFI/3HHJ8iS/v1mbugVa7dXUzcJGQfoytp9DJFLhHH4U3/eTy2Bq4w==,
+      }
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-gnu@4.53.3':
-    resolution: {integrity: sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==}
+  "@rollup/rollup-win32-x64-gnu@4.60.0":
+    resolution:
+      {
+        integrity: sha512-RdcryEfzZr+lAr5kRm2ucN9aVlCCa2QNq4hXelZxb8GG0NJSazq44Z3PCCc8wISRuCVnGs0lQJVX5Vp6fKA+IA==,
+      }
     cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.53.3':
-    resolution: {integrity: sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==}
+  "@rollup/rollup-win32-x64-msvc@4.60.0":
+    resolution:
+      {
+        integrity: sha512-PrsWNQ8BuE00O3Xsx3ALh2Df8fAj9+cvvX9AIA6o4KpATR98c9mud4XtDWVvsEuyia5U4tVSTKygawyJkjm60w==,
+      }
     cpu: [x64]
     os: [win32]
 
-  '@rtsao/scc@1.1.0':
-    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+  "@rtsao/scc@1.1.0":
+    resolution:
+      {
+        integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==,
+      }
 
-  '@rushstack/eslint-patch@1.15.0':
-    resolution: {integrity: sha512-ojSshQPKwVvSMR8yT2L/QtUkV5SXi/IfDiJ4/8d6UbTPjiHVmxZzUAzGD8Tzks1b9+qQkZa0isUOvYObedITaw==}
+  "@rushstack/eslint-patch@1.16.1":
+    resolution:
+      {
+        integrity: sha512-TvZbIpeKqGQQ7X0zSCvPH9riMSFQFSggnfBjFZ1mEoILW+UuXCKwOoPcgjMwiUtRqFZ8jWhPJc4um14vC6I4ag==,
+      }
 
-  '@sindresorhus/merge-streams@2.3.0':
-    resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
-    engines: {node: '>=18'}
+  "@sindresorhus/merge-streams@2.3.0":
+    resolution:
+      {
+        integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==,
+      }
+    engines: { node: ">=18" }
 
-  '@standard-schema/utils@0.3.0':
-    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+  "@standard-schema/utils@0.3.0":
+    resolution:
+      {
+        integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==,
+      }
 
-  '@storybook/addon-actions@8.6.14':
-    resolution: {integrity: sha512-mDQxylxGGCQSK7tJPkD144J8jWh9IU9ziJMHfB84PKpI/V5ZgqMDnpr2bssTrUaGDqU5e1/z8KcRF+Melhs9pQ==}
+  "@storybook/addon-actions@8.6.14":
+    resolution:
+      {
+        integrity: sha512-mDQxylxGGCQSK7tJPkD144J8jWh9IU9ziJMHfB84PKpI/V5ZgqMDnpr2bssTrUaGDqU5e1/z8KcRF+Melhs9pQ==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/addon-backgrounds@8.6.14':
-    resolution: {integrity: sha512-l9xS8qWe5n4tvMwth09QxH2PmJbCctEvBAc1tjjRasAfrd69f7/uFK4WhwJAstzBTNgTc8VXI4w8ZR97i1sFbg==}
+  "@storybook/addon-backgrounds@8.6.14":
+    resolution:
+      {
+        integrity: sha512-l9xS8qWe5n4tvMwth09QxH2PmJbCctEvBAc1tjjRasAfrd69f7/uFK4WhwJAstzBTNgTc8VXI4w8ZR97i1sFbg==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/addon-controls@8.6.14':
-    resolution: {integrity: sha512-IiQpkNJdiRyA4Mq9mzjZlvQugL/aE7hNgVxBBGPiIZG6wb6Ht9hNnBYpap5ZXXFKV9p2qVI0FZK445ONmAa+Cw==}
+  "@storybook/addon-controls@8.6.14":
+    resolution:
+      {
+        integrity: sha512-IiQpkNJdiRyA4Mq9mzjZlvQugL/aE7hNgVxBBGPiIZG6wb6Ht9hNnBYpap5ZXXFKV9p2qVI0FZK445ONmAa+Cw==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/addon-docs@8.6.14':
-    resolution: {integrity: sha512-Obpd0OhAF99JyU5pp5ci17YmpcQtMNgqW2pTXV8jAiiipWpwO++hNDeQmLmlSXB399XjtRDOcDVkoc7rc6JzdQ==}
+  "@storybook/addon-docs@8.6.14":
+    resolution:
+      {
+        integrity: sha512-Obpd0OhAF99JyU5pp5ci17YmpcQtMNgqW2pTXV8jAiiipWpwO++hNDeQmLmlSXB399XjtRDOcDVkoc7rc6JzdQ==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/addon-essentials@8.6.14':
-    resolution: {integrity: sha512-5ZZSHNaW9mXMOFkoPyc3QkoNGdJHETZydI62/OASR0lmPlJ1065TNigEo5dJddmZNn0/3bkE8eKMAzLnO5eIdA==}
+  "@storybook/addon-essentials@8.6.14":
+    resolution:
+      {
+        integrity: sha512-5ZZSHNaW9mXMOFkoPyc3QkoNGdJHETZydI62/OASR0lmPlJ1065TNigEo5dJddmZNn0/3bkE8eKMAzLnO5eIdA==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/addon-highlight@8.6.14':
-    resolution: {integrity: sha512-4H19OJlapkofiE9tM6K/vsepf4ir9jMm9T+zw5L85blJZxhKZIbJ6FO0TCG9PDc4iPt3L6+aq5B0X29s9zicNQ==}
+  "@storybook/addon-highlight@8.6.14":
+    resolution:
+      {
+        integrity: sha512-4H19OJlapkofiE9tM6K/vsepf4ir9jMm9T+zw5L85blJZxhKZIbJ6FO0TCG9PDc4iPt3L6+aq5B0X29s9zicNQ==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/addon-interactions@8.6.14':
-    resolution: {integrity: sha512-8VmElhm2XOjh22l/dO4UmXxNOolGhNiSpBcls2pqWSraVh4a670EyYBZsHpkXqfNHo2YgKyZN3C91+9zfH79qQ==}
+  "@storybook/addon-interactions@8.6.14":
+    resolution:
+      {
+        integrity: sha512-8VmElhm2XOjh22l/dO4UmXxNOolGhNiSpBcls2pqWSraVh4a670EyYBZsHpkXqfNHo2YgKyZN3C91+9zfH79qQ==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/addon-measure@8.6.14':
-    resolution: {integrity: sha512-1Tlyb72NX8aAqm6I6OICsUuGOP6hgnXcuFlXucyhKomPa6j3Eu2vKu561t/f0oGtAK2nO93Z70kVaEh5X+vaGw==}
+  "@storybook/addon-measure@8.6.14":
+    resolution:
+      {
+        integrity: sha512-1Tlyb72NX8aAqm6I6OICsUuGOP6hgnXcuFlXucyhKomPa6j3Eu2vKu561t/f0oGtAK2nO93Z70kVaEh5X+vaGw==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/addon-onboarding@8.6.14':
-    resolution: {integrity: sha512-bHdHiGJFigVcSzMIsNLHY5IODZHr+nKwyz5/QOZLMkLcGH2IaUbOJfm4RyGOaTTPsUtAKbdsVXNEG3Otf+qO9A==}
+  "@storybook/addon-onboarding@8.6.18":
+    resolution:
+      {
+        integrity: sha512-F0rpD5GwIpstQlRaPYQNroIPECB//yy0v2hHQOjFtH5OnCfJXpih4M5pFYcwXsMStRwLVJWS5ywfz+Xea0hmgg==,
+      }
+    peerDependencies:
+      storybook: ^8.6.18
+
+  "@storybook/addon-outline@8.6.14":
+    resolution:
+      {
+        integrity: sha512-CW857JvN6OxGWElqjlzJO2S69DHf+xO3WsEfT5mT3ZtIjmsvRDukdWfDU9bIYUFyA2lFvYjncBGjbK+I91XR7w==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/addon-outline@8.6.14':
-    resolution: {integrity: sha512-CW857JvN6OxGWElqjlzJO2S69DHf+xO3WsEfT5mT3ZtIjmsvRDukdWfDU9bIYUFyA2lFvYjncBGjbK+I91XR7w==}
+  "@storybook/addon-themes@8.6.18":
+    resolution:
+      {
+        integrity: sha512-v+Xcxo/XB2ayw9E/RygGOqUIaPOXp9XEFv6EF7DRt41/RQkQ846yJBARTC2cH8kCb+7FYcvDLD3GN/ms7i8wNg==,
+      }
+    peerDependencies:
+      storybook: ^8.6.18
+
+  "@storybook/addon-toolbars@8.6.14":
+    resolution:
+      {
+        integrity: sha512-W/wEXT8h3VyZTVfWK/84BAcjAxTdtRiAkT2KAN0nbSHxxB5KEM1MjKpKu2upyzzMa3EywITqbfy4dP6lpkVTwQ==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/addon-themes@8.6.14':
-    resolution: {integrity: sha512-/HJCgskA3OFGectuoLEBQ3JX1nQhE7lnpSv5gH13CWyyaMEk/mP8JYF1uO25YQqwGuSgL2gaEox+aK7UmglAmQ==}
+  "@storybook/addon-viewport@8.6.14":
+    resolution:
+      {
+        integrity: sha512-gNzVQbMqRC+/4uQTPI2ZrWuRHGquTMZpdgB9DrD88VTEjNudP+J6r8myLfr2VvGksBbUMHkGHMXHuIhrBEnXYA==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/addon-toolbars@8.6.14':
-    resolution: {integrity: sha512-W/wEXT8h3VyZTVfWK/84BAcjAxTdtRiAkT2KAN0nbSHxxB5KEM1MjKpKu2upyzzMa3EywITqbfy4dP6lpkVTwQ==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/addon-viewport@8.6.14':
-    resolution: {integrity: sha512-gNzVQbMqRC+/4uQTPI2ZrWuRHGquTMZpdgB9DrD88VTEjNudP+J6r8myLfr2VvGksBbUMHkGHMXHuIhrBEnXYA==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/blocks@8.6.14':
-    resolution: {integrity: sha512-rBMHAfA39AGHgkrDze4RmsnQTMw1ND5fGWobr9pDcJdnDKWQWNRD7Nrlxj0gFlN3n4D9lEZhWGdFrCbku7FVAQ==}
+  "@storybook/blocks@8.6.14":
+    resolution:
+      {
+        integrity: sha512-rBMHAfA39AGHgkrDze4RmsnQTMw1ND5fGWobr9pDcJdnDKWQWNRD7Nrlxj0gFlN3n4D9lEZhWGdFrCbku7FVAQ==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
@@ -3546,653 +4584,1081 @@ packages:
       react-dom:
         optional: true
 
-  '@storybook/builder-vite@8.6.14':
-    resolution: {integrity: sha512-ajWYhy32ksBWxwWHrjwZzyC0Ii5ZTeu5lsqA95Q/EQBB0P5qWlHWGM3AVyv82Mz/ND03ebGy123uVwgf6olnYQ==}
+  "@storybook/builder-vite@8.6.18":
+    resolution:
+      {
+        integrity: sha512-XLqnOv4C36jlTd4uC8xpWBxv+7GV4/05zWJ0wAcU4qflorropUTirt4UQPGkwIzi+BVAhs9pJj+m4k0IWJtpHg==,
+      }
     peerDependencies:
-      storybook: ^8.6.14
+      storybook: ^8.6.18
       vite: ^4.0.0 || ^5.0.0 || ^6.0.0
 
-  '@storybook/components@8.6.14':
-    resolution: {integrity: sha512-HNR2mC5I4Z5ek8kTrVZlIY/B8gJGs5b3XdZPBPBopTIN6U/YHXiDyOjY3JlaS4fSG1fVhp/Qp1TpMn1w/9m1pw==}
+  "@storybook/components@8.6.18":
+    resolution:
+      {
+        integrity: sha512-55yViiZzPS/cPBuOeW4QGxGqrusjXVyxuknmbYCIwDtFyyvI/CgbjXRHdxNBaIjz+IlftxvBmmSaOqFG5+/dkA==,
+      }
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@storybook/core@8.6.14':
-    resolution: {integrity: sha512-1P/w4FSNRqP8j3JQBOi3yGt8PVOgSRbP66Ok520T78eJBeqx9ukCfl912PQZ7SPbW3TIunBwLXMZOjZwBB/JmA==}
+  "@storybook/core@8.6.18":
+    resolution:
+      {
+        integrity: sha512-dRBP2TnX6fGdS0T2mXBHjkS/3Nlu1ra1huovZVFuM67CYMzrhM/3hX/zru1vWSC5rqY93ZaAhjMciPW4pK5mMQ==,
+      }
     peerDependencies:
       prettier: ^2 || ^3
     peerDependenciesMeta:
       prettier:
         optional: true
 
-  '@storybook/csf-plugin@8.6.14':
-    resolution: {integrity: sha512-dErtc9teAuN+eelN8FojzFE635xlq9cNGGGEu0WEmMUQ4iJ8pingvBO1N8X3scz4Ry7KnxX++NNf3J3gpxS8qQ==}
+  "@storybook/csf-plugin@8.6.14":
+    resolution:
+      {
+        integrity: sha512-dErtc9teAuN+eelN8FojzFE635xlq9cNGGGEu0WEmMUQ4iJ8pingvBO1N8X3scz4Ry7KnxX++NNf3J3gpxS8qQ==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/csf@0.1.13':
-    resolution: {integrity: sha512-7xOOwCLGB3ebM87eemep89MYRFTko+D8qE7EdAAq74lgdqRR5cOUtYWJLjO2dLtP94nqoOdHJo6MdLLKzg412Q==}
+  "@storybook/csf-plugin@8.6.18":
+    resolution:
+      {
+        integrity: sha512-x1ioz/L0CwaelCkHci3P31YtvwayN3FBftvwQOPbvRh9qeb4Cpz5IdVDmyvSxxYwXN66uAORNoqgjTi7B4/y5Q==,
+      }
+    peerDependencies:
+      storybook: ^8.6.18
 
-  '@storybook/global@5.0.0':
-    resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
+  "@storybook/csf@0.1.13":
+    resolution:
+      {
+        integrity: sha512-7xOOwCLGB3ebM87eemep89MYRFTko+D8qE7EdAAq74lgdqRR5cOUtYWJLjO2dLtP94nqoOdHJo6MdLLKzg412Q==,
+      }
 
-  '@storybook/icons@1.6.0':
-    resolution: {integrity: sha512-hcFZIjW8yQz8O8//2WTIXylm5Xsgc+lW9ISLgUk1xGmptIJQRdlhVIXCpSyLrQaaRiyhQRaVg7l3BD9S216BHw==}
-    engines: {node: '>=14.0.0'}
+  "@storybook/global@5.0.0":
+    resolution:
+      {
+        integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==,
+      }
+
+  "@storybook/icons@1.6.0":
+    resolution:
+      {
+        integrity: sha512-hcFZIjW8yQz8O8//2WTIXylm5Xsgc+lW9ISLgUk1xGmptIJQRdlhVIXCpSyLrQaaRiyhQRaVg7l3BD9S216BHw==,
+      }
+    engines: { node: ">=14.0.0" }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
 
-  '@storybook/instrumenter@8.6.14':
-    resolution: {integrity: sha512-iG4MlWCcz1L7Yu8AwgsnfVAmMbvyRSk700Mfy2g4c8y5O+Cv1ejshE1LBBsCwHgkuqU0H4R0qu4g23+6UnUemQ==}
+  "@storybook/instrumenter@8.6.14":
+    resolution:
+      {
+        integrity: sha512-iG4MlWCcz1L7Yu8AwgsnfVAmMbvyRSk700Mfy2g4c8y5O+Cv1ejshE1LBBsCwHgkuqU0H4R0qu4g23+6UnUemQ==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/manager-api@8.6.14':
-    resolution: {integrity: sha512-ez0Zihuy17udLbfHZQXkGqwtep0mSGgHcNzGN7iZrMP1m+VmNo+7aGCJJdvXi7+iU3yq8weXSQFWg5DqWgLS7g==}
+  "@storybook/instrumenter@8.6.15":
+    resolution:
+      {
+        integrity: sha512-TvHR/+yyIAOp/1bLulFai2kkhIBtAlBw7J6Jd9DKyInoGhTWNE1G1Y61jD5GWXX29AlwaHfzGUaX5NL1K+FJpg==,
+      }
+    peerDependencies:
+      storybook: ^8.6.15
+
+  "@storybook/manager-api@8.6.14":
+    resolution:
+      {
+        integrity: sha512-ez0Zihuy17udLbfHZQXkGqwtep0mSGgHcNzGN7iZrMP1m+VmNo+7aGCJJdvXi7+iU3yq8weXSQFWg5DqWgLS7g==,
+      }
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@storybook/preview-api@8.6.14':
-    resolution: {integrity: sha512-2GhcCd4dNMrnD7eooEfvbfL4I83qAqEyO0CO7JQAmIO6Rxb9BsOLLI/GD5HkvQB73ArTJ+PT50rfaO820IExOQ==}
+  "@storybook/manager-api@8.6.18":
+    resolution:
+      {
+        integrity: sha512-BjIp12gEMgzFkEsgKpDIbZdnSWTZpm2dlws8WiPJCpgJtG+HWSxZ0/Ms30Au9yfwzQEKRSbV/5zpsKMGc2SIJw==,
+      }
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@storybook/react-dom-shim@8.6.14':
-    resolution: {integrity: sha512-0hixr3dOy3f3M+HBofp3jtMQMS+sqzjKNgl7Arfuj3fvjmyXOks/yGjDImySR4imPtEllvPZfhiQNlejheaInw==}
+  "@storybook/preview-api@8.6.18":
+    resolution:
+      {
+        integrity: sha512-joXRXh3GdVvzhbfIgmix1xs90p8Q/nja7AhEAC2egn5Pl7SKsIYZUCYI6UdrQANb2myg9P552LKXfPect8llKg==,
+      }
+    peerDependencies:
+      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+
+  "@storybook/react-dom-shim@8.6.14":
+    resolution:
+      {
+        integrity: sha512-0hixr3dOy3f3M+HBofp3jtMQMS+sqzjKNgl7Arfuj3fvjmyXOks/yGjDImySR4imPtEllvPZfhiQNlejheaInw==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
       storybook: ^8.6.14
 
-  '@storybook/react-vite@8.6.14':
-    resolution: {integrity: sha512-FZU0xMPxa4/TO87FgcWwappOxLBHZV5HSRK5K+2bJD7rFJAoNorbHvB4Q1zvIAk7eCMjkr2GPCPHx9PRB9vJFg==}
-    engines: {node: '>=18.0.0'}
+  "@storybook/react-dom-shim@8.6.18":
+    resolution:
+      {
+        integrity: sha512-N4xULcAWZQTUv4jy1/d346Tyb4gufuC3UaLCuU/iVSZ1brYF4OW3ANr+096btbMxY8pR/65lmtoqr5CTGwnBvA==,
+      }
     peerDependencies:
-      '@storybook/test': 8.6.14
       react: ^19.2.1
       react-dom: ^19.2.1
-      storybook: ^8.6.14
+      storybook: ^8.6.18
+
+  "@storybook/react-vite@8.6.18":
+    resolution:
+      {
+        integrity: sha512-qpSYyH2IizlEsI95MJTdIL6xpLSgiNCMoJpHu+IEqLnyvmecRR/YEZvcHalgdtawuXlimH0bAYuwIu3l8Vo6FQ==,
+      }
+    engines: { node: ">=18.0.0" }
+    peerDependencies:
+      "@storybook/test": 8.6.18
+      react: ^19.2.1
+      react-dom: ^19.2.1
+      storybook: ^8.6.18
       vite: ^4.0.0 || ^5.0.0 || ^6.0.0
     peerDependenciesMeta:
-      '@storybook/test':
+      "@storybook/test":
         optional: true
 
-  '@storybook/react@8.6.14':
-    resolution: {integrity: sha512-BOepx5bBFwl/CPI+F+LnmMmsG1wQYmrX/UQXgUbHQUU9Tj7E2ndTnNbpIuSLc8IrM03ru+DfwSg1Co3cxWtT+g==}
-    engines: {node: '>=18.0.0'}
+  "@storybook/react@8.6.18":
+    resolution:
+      {
+        integrity: sha512-BuLpzMkKtF+UCQCbi+lYVX9cdcAMG86Lu2dDn7UFkPi5HRNFq/zHPSvlz1XDgL0OYMtcqB1aoVzFzcyzUBhhjw==,
+      }
+    engines: { node: ">=18.0.0" }
     peerDependencies:
-      '@storybook/test': 8.6.14
+      "@storybook/test": 8.6.18
       react: ^19.2.1
       react-dom: ^19.2.1
-      storybook: ^8.6.14
-      typescript: '>= 4.2.x'
+      storybook: ^8.6.18
+      typescript: ">= 4.2.x"
     peerDependenciesMeta:
-      '@storybook/test':
+      "@storybook/test":
         optional: true
       typescript:
         optional: true
 
-  '@storybook/test@8.6.14':
-    resolution: {integrity: sha512-GkPNBbbZmz+XRdrhMtkxPotCLOQ1BaGNp/gFZYdGDk2KmUWBKmvc5JxxOhtoXM2703IzNFlQHSSNnhrDZYuLlw==}
+  "@storybook/test@8.6.14":
+    resolution:
+      {
+        integrity: sha512-GkPNBbbZmz+XRdrhMtkxPotCLOQ1BaGNp/gFZYdGDk2KmUWBKmvc5JxxOhtoXM2703IzNFlQHSSNnhrDZYuLlw==,
+      }
     peerDependencies:
       storybook: ^8.6.14
 
-  '@storybook/theming@8.6.14':
-    resolution: {integrity: sha512-r4y+LsiB37V5hzpQo+BM10PaCsp7YlZ0YcZzQP1OCkPlYXmUAFy2VvDKaFRpD8IeNPKug2u4iFm/laDEbs03dg==}
+  "@storybook/test@8.6.15":
+    resolution:
+      {
+        integrity: sha512-EwquDRUDVvWcZds3T2abmB5wSN/Vattal4YtZ6fpBlIUqONV4o/cOBX39cFfQSUCBrIXIjQ6RmapQCHK/PvBYw==,
+      }
+    peerDependencies:
+      storybook: ^8.6.15
+
+  "@storybook/theming@8.6.14":
+    resolution:
+      {
+        integrity: sha512-r4y+LsiB37V5hzpQo+BM10PaCsp7YlZ0YcZzQP1OCkPlYXmUAFy2VvDKaFRpD8IeNPKug2u4iFm/laDEbs03dg==,
+      }
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@swc/counter@0.1.3':
-    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+  "@storybook/theming@8.6.18":
+    resolution:
+      {
+        integrity: sha512-n6OEjEtHupa2PdTwWzRepr7cO8NkDd4rgF6BKLitRbujOspLxzMBEqdphs+QLcuiCIgf33SqmEA64QWnbSMhPw==,
+      }
+    peerDependencies:
+      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@swc/helpers@0.5.15':
-    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+  "@swc/helpers@0.5.15":
+    resolution:
+      {
+        integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==,
+      }
 
-  '@tailwindcss/node@4.1.18':
-    resolution: {integrity: sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==}
+  "@tabby_ai/hijri-converter@1.0.5":
+    resolution:
+      {
+        integrity: sha512-r5bClKrcIusDoo049dSL8CawnHR6mRdDwhlQuIgZRNty68q0x8k3Lf1BtPAMxRf/GgnHBnIO4ujd3+GQdLWzxQ==,
+      }
+    engines: { node: ">=16.0.0" }
 
-  '@tailwindcss/oxide-android-arm64@4.1.18':
-    resolution: {integrity: sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==}
-    engines: {node: '>= 10'}
+  "@tailwindcss/node@4.2.2":
+    resolution:
+      {
+        integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==,
+      }
+
+  "@tailwindcss/oxide-android-arm64@4.2.2":
+    resolution:
+      {
+        integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==,
+      }
+    engines: { node: ">= 20" }
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.18':
-    resolution: {integrity: sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==}
-    engines: {node: '>= 10'}
+  "@tailwindcss/oxide-darwin-arm64@4.2.2":
+    resolution:
+      {
+        integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==,
+      }
+    engines: { node: ">= 20" }
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.1.18':
-    resolution: {integrity: sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==}
-    engines: {node: '>= 10'}
+  "@tailwindcss/oxide-darwin-x64@4.2.2":
+    resolution:
+      {
+        integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==,
+      }
+    engines: { node: ">= 20" }
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.18':
-    resolution: {integrity: sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==}
-    engines: {node: '>= 10'}
+  "@tailwindcss/oxide-freebsd-x64@4.2.2":
+    resolution:
+      {
+        integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==,
+      }
+    engines: { node: ">= 20" }
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
-    resolution: {integrity: sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==}
-    engines: {node: '>= 10'}
+  "@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2":
+    resolution:
+      {
+        integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==,
+      }
+    engines: { node: ">= 20" }
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
-    resolution: {integrity: sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==}
-    engines: {node: '>= 10'}
+  "@tailwindcss/oxide-linux-arm64-gnu@4.2.2":
+    resolution:
+      {
+        integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==,
+      }
+    engines: { node: ">= 20" }
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
-    resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
-    engines: {node: '>= 10'}
+  "@tailwindcss/oxide-linux-arm64-musl@4.2.2":
+    resolution:
+      {
+        integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==,
+      }
+    engines: { node: ">= 20" }
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
-    resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
-    engines: {node: '>= 10'}
+  "@tailwindcss/oxide-linux-x64-gnu@4.2.2":
+    resolution:
+      {
+        integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==,
+      }
+    engines: { node: ">= 20" }
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
-    resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
-    engines: {node: '>= 10'}
+  "@tailwindcss/oxide-linux-x64-musl@4.2.2":
+    resolution:
+      {
+        integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==,
+      }
+    engines: { node: ">= 20" }
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
-    resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
-    engines: {node: '>=14.0.0'}
+  "@tailwindcss/oxide-wasm32-wasi@4.2.2":
+    resolution:
+      {
+        integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==,
+      }
+    engines: { node: ">=14.0.0" }
     cpu: [wasm32]
     bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
+      - "@napi-rs/wasm-runtime"
+      - "@emnapi/core"
+      - "@emnapi/runtime"
+      - "@tybys/wasm-util"
+      - "@emnapi/wasi-threads"
       - tslib
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
-    resolution: {integrity: sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==}
-    engines: {node: '>= 10'}
+  "@tailwindcss/oxide-win32-arm64-msvc@4.2.2":
+    resolution:
+      {
+        integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==,
+      }
+    engines: { node: ">= 20" }
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
-    resolution: {integrity: sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==}
-    engines: {node: '>= 10'}
+  "@tailwindcss/oxide-win32-x64-msvc@4.2.2":
+    resolution:
+      {
+        integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==,
+      }
+    engines: { node: ">= 20" }
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide@4.1.18':
-    resolution: {integrity: sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==}
-    engines: {node: '>= 10'}
+  "@tailwindcss/oxide@4.2.2":
+    resolution:
+      {
+        integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==,
+      }
+    engines: { node: ">= 20" }
 
-  '@tailwindcss/vite@4.1.18':
-    resolution: {integrity: sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==}
+  "@tailwindcss/vite@4.2.2":
+    resolution:
+      {
+        integrity: sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==,
+      }
     peerDependencies:
-      vite: ^5.2.0 || ^6 || ^7
+      vite: ^5.2.0 || ^6 || ^7 || ^8
 
-  '@tanstack/query-core@5.90.12':
-    resolution: {integrity: sha512-T1/8t5DhV/SisWjDnaiU2drl6ySvsHj1bHBCWNXd+/T+Hh1cf6JodyEYMd5sgwm+b/mETT4EV3H+zCVczCU5hg==}
+  "@tanstack/query-core@5.95.2":
+    resolution:
+      {
+        integrity: sha512-o4T8vZHZET4Bib3jZ/tCW9/7080urD4c+0/AUaYVpIqOsr7y0reBc1oX3ttNaSW5mYyvZHctiQ/UOP2PfdmFEQ==,
+      }
 
-  '@tanstack/query-devtools@5.91.1':
-    resolution: {integrity: sha512-l8bxjk6BMsCaVQH6NzQEE/bEgFy1hAs5qbgXl0xhzezlaQbPk6Mgz9BqEg2vTLPOHD8N4k+w/gdgCbEzecGyNg==}
+  "@tanstack/query-devtools@5.95.2":
+    resolution:
+      {
+        integrity: sha512-QfaoqBn9uAZ+ICkA8brd1EHj+qBF6glCFgt94U8XP5BT6ppSsDBI8IJ00BU+cAGjQzp6wcKJL2EmRYvxy0TWIg==,
+      }
 
-  '@tanstack/react-query-devtools@5.91.1':
-    resolution: {integrity: sha512-tRnJYwEbH0kAOuToy8Ew7bJw1lX3AjkkgSlf/vzb+NpnqmHPdWM+lA2DSdGQSLi1SU0PDRrrCI1vnZnci96CsQ==}
+  "@tanstack/react-query-devtools@5.95.2":
+    resolution:
+      {
+        integrity: sha512-AFQFmbznVkbtfpx8VJ2DylW17wWagQel/qLstVLkYmNRo2CmJt3SNej5hvl6EnEeljJIdC3BTB+W7HZtpsH+3g==,
+      }
     peerDependencies:
-      '@tanstack/react-query': ^5.90.10
+      "@tanstack/react-query": ^5.95.2
       react: ^19.2.1
 
-  '@tanstack/react-query@5.90.12':
-    resolution: {integrity: sha512-graRZspg7EoEaw0a8faiUASCyJrqjKPdqJ9EwuDRUF9mEYJ1YPczI9H+/agJ0mOJkPCJDk0lsz5QTrLZ/jQ2rg==}
+  "@tanstack/react-query@5.95.2":
+    resolution:
+      {
+        integrity: sha512-/wGkvLj/st5Ud1Q76KF1uFxScV7WeqN1slQx5280ycwAyYkIPGaRZAEgHxe3bjirSd5Zpwkj6zNcR4cqYni/ZA==,
+      }
     peerDependencies:
       react: ^19.2.1
 
-  '@tanstack/react-table@8.21.3':
-    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
-    engines: {node: '>=12'}
+  "@tanstack/react-table@8.21.3":
+    resolution:
+      {
+        integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==,
+      }
+    engines: { node: ">=12" }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
 
-  '@tanstack/table-core@8.21.3':
-    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
-    engines: {node: '>=12'}
+  "@tanstack/table-core@8.21.3":
+    resolution:
+      {
+        integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==,
+      }
+    engines: { node: ">=12" }
 
-  '@testing-library/dom@10.4.0':
-    resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
-    engines: {node: '>=18'}
+  "@testing-library/dom@10.4.0":
+    resolution:
+      {
+        integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==,
+      }
+    engines: { node: ">=18" }
 
-  '@testing-library/jest-dom@6.5.0':
-    resolution: {integrity: sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==}
-    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+  "@testing-library/jest-dom@6.5.0":
+    resolution:
+      {
+        integrity: sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==,
+      }
+    engines: { node: ">=14", npm: ">=6", yarn: ">=1" }
 
-  '@testing-library/user-event@14.5.2':
-    resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
-    engines: {node: '>=12', npm: '>=6'}
+  "@testing-library/user-event@14.5.2":
+    resolution:
+      {
+        integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==,
+      }
+    engines: { node: ">=12", npm: ">=6" }
     peerDependencies:
-      '@testing-library/dom': '>=7.21.4'
+      "@testing-library/dom": ">=7.21.4"
 
-  '@tinymce/tinymce-react@5.1.1':
-    resolution: {integrity: sha512-DQ0wpvnf/9z8RsOEAmrWZ1DN1PKqcQHfU+DpM3llLze7FHmxVtzuN8O+FYh0oAAF4stzAXwiCIVacfqjMwRieQ==}
+  "@tinymce/tinymce-react@5.1.1":
+    resolution:
+      {
+        integrity: sha512-DQ0wpvnf/9z8RsOEAmrWZ1DN1PKqcQHfU+DpM3llLze7FHmxVtzuN8O+FYh0oAAF4stzAXwiCIVacfqjMwRieQ==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
 
-  '@tybys/wasm-util@0.10.1':
-    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+  "@tybys/wasm-util@0.10.1":
+    resolution:
+      {
+        integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==,
+      }
 
-  '@types/aria-query@5.0.4':
-    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+  "@types/aria-query@5.0.4":
+    resolution:
+      {
+        integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==,
+      }
 
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+  "@types/babel__core@7.20.5":
+    resolution:
+      {
+        integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==,
+      }
 
-  '@types/babel__generator@7.27.0':
-    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+  "@types/babel__generator@7.27.0":
+    resolution:
+      {
+        integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==,
+      }
 
-  '@types/babel__template@7.4.4':
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+  "@types/babel__template@7.4.4":
+    resolution:
+      {
+        integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==,
+      }
 
-  '@types/babel__traverse@7.28.0':
-    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+  "@types/babel__traverse@7.28.0":
+    resolution:
+      {
+        integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==,
+      }
 
-  '@types/d3-array@3.2.2':
-    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+  "@types/d3-array@3.2.2":
+    resolution:
+      {
+        integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==,
+      }
 
-  '@types/d3-color@3.1.3':
-    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+  "@types/d3-color@3.1.3":
+    resolution:
+      {
+        integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==,
+      }
 
-  '@types/d3-ease@3.0.2':
-    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+  "@types/d3-ease@3.0.2":
+    resolution:
+      {
+        integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==,
+      }
 
-  '@types/d3-interpolate@3.0.4':
-    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+  "@types/d3-interpolate@3.0.4":
+    resolution:
+      {
+        integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==,
+      }
 
-  '@types/d3-path@3.1.1':
-    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+  "@types/d3-path@3.1.1":
+    resolution:
+      {
+        integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==,
+      }
 
-  '@types/d3-scale@4.0.9':
-    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+  "@types/d3-scale@4.0.9":
+    resolution:
+      {
+        integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==,
+      }
 
-  '@types/d3-shape@3.1.7':
-    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+  "@types/d3-shape@3.1.8":
+    resolution:
+      {
+        integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==,
+      }
 
-  '@types/d3-time@3.0.4':
-    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+  "@types/d3-time@3.0.4":
+    resolution:
+      {
+        integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==,
+      }
 
-  '@types/d3-timer@3.0.2':
-    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+  "@types/d3-timer@3.0.2":
+    resolution:
+      {
+        integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==,
+      }
 
-  '@types/doctrine@0.0.9':
-    resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
+  "@types/doctrine@0.0.9":
+    resolution:
+      {
+        integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==,
+      }
 
-  '@types/eslint-scope@3.7.7':
-    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
+  "@types/eslint-scope@3.7.7":
+    resolution:
+      {
+        integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==,
+      }
 
-  '@types/eslint@9.6.1':
-    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
+  "@types/eslint@9.6.1":
+    resolution:
+      {
+        integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==,
+      }
 
-  '@types/estree@1.0.8':
-    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+  "@types/estree@1.0.8":
+    resolution:
+      {
+        integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==,
+      }
 
-  '@types/hammerjs@2.0.46':
-    resolution: {integrity: sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==}
+  "@types/hammerjs@2.0.46":
+    resolution:
+      {
+        integrity: sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==,
+      }
 
-  '@types/js-cookie@3.0.6':
-    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
+  "@types/js-cookie@3.0.6":
+    resolution:
+      {
+        integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==,
+      }
 
-  '@types/json-schema@7.0.15':
-    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+  "@types/json-schema@7.0.15":
+    resolution:
+      {
+        integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==,
+      }
 
-  '@types/json5@0.0.29':
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+  "@types/json5@0.0.29":
+    resolution:
+      {
+        integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==,
+      }
 
-  '@types/mdx@2.0.13':
-    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
+  "@types/mdx@2.0.13":
+    resolution:
+      {
+        integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==,
+      }
 
-  '@types/node@20.19.26':
-    resolution: {integrity: sha512-0l6cjgF0XnihUpndDhk+nyD3exio3iKaYROSgvh/qSevPXax3L8p5DBRFjbvalnwatGgHEQn2R88y2fA3g4irg==}
+  "@types/node@20.19.37":
+    resolution:
+      {
+        integrity: sha512-8kzdPJ3FsNsVIurqBs7oodNnCEVbni9yUEkaHbgptDACOPW04jimGagZ51E6+lXUwJjgnBw+hyko/lkFWCldqw==,
+      }
 
-  '@types/node@22.19.2':
-    resolution: {integrity: sha512-LPM2G3Syo1GLzXLGJAKdqoU35XvrWzGJ21/7sgZTUpbkBaOasTj8tjwn6w+hCkqaa1TfJ/w67rJSwYItlJ2mYw==}
+  "@types/node@22.19.15":
+    resolution:
+      {
+        integrity: sha512-F0R/h2+dsy5wJAUe3tAU6oqa2qbWY5TpNfL/RGmo1y38hiyO1w3x2jPtt76wmuaJI4DQnOBu21cNXQ2STIUUWg==,
+      }
 
-  '@types/react-dom@19.2.3':
-    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+  "@types/react-dom@19.2.3":
+    resolution:
+      {
+        integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==,
+      }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
 
-  '@types/react@19.2.7':
-    resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}
+  "@types/react@19.2.14":
+    resolution:
+      {
+        integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==,
+      }
 
-  '@types/resolve@1.20.6':
-    resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
+  "@types/resolve@1.20.6":
+    resolution:
+      {
+        integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==,
+      }
 
-  '@types/uuid@9.0.8':
-    resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==}
+  "@types/uuid@9.0.8":
+    resolution:
+      {
+        integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==,
+      }
 
-  '@types/webpack@5.28.5':
-    resolution: {integrity: sha512-wR87cgvxj3p6D0Crt1r5avwqffqPXUkNlnQ1mjU93G7gCuFjufZR4I6j8cz5g1F1tTYpfOOFvly+cmIQwL9wvw==}
+  "@types/webpack@5.28.5":
+    resolution:
+      {
+        integrity: sha512-wR87cgvxj3p6D0Crt1r5avwqffqPXUkNlnQ1mjU93G7gCuFjufZR4I6j8cz5g1F1tTYpfOOFvly+cmIQwL9wvw==,
+      }
 
-  '@types/xlsx@0.0.36':
-    resolution: {integrity: sha512-mvfrKiKKMErQzLMF8ElYEH21qxWCZtN59pHhWGmWCWFJStYdMWjkDSAy6mGowFxHXaXZWe5/TW7pBUiWclIVOw==}
+  "@types/xlsx@0.0.36":
+    resolution:
+      {
+        integrity: sha512-mvfrKiKKMErQzLMF8ElYEH21qxWCZtN59pHhWGmWCWFJStYdMWjkDSAy6mGowFxHXaXZWe5/TW7pBUiWclIVOw==,
+      }
     deprecated: This is a stub types definition for xlsx (https://github.com/sheetjs/js-xlsx). xlsx provides its own type definitions, so you don't need @types/xlsx installed!
 
-  '@typescript-eslint/eslint-plugin@8.49.0':
-    resolution: {integrity: sha512-JXij0vzIaTtCwu6SxTh8qBc66kmf1xs7pI4UOiMDFVct6q86G0Zs7KRcEoJgY3Cav3x5Tq0MF5jwgpgLqgKG3A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@typescript-eslint/eslint-plugin@8.57.2":
+    resolution:
+      {
+        integrity: sha512-NZZgp0Fm2IkD+La5PR81sd+g+8oS6JwJje+aRWsDocxHkjyRw0J5L5ZTlN3LI1LlOcGL7ph3eaIUmTXMIjLk0w==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
-      '@typescript-eslint/parser': ^8.49.0
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      "@typescript-eslint/parser": ^8.57.2
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: ">=4.8.4 <6.0.0"
 
-  '@typescript-eslint/parser@8.49.0':
-    resolution: {integrity: sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/parser@8.56.1':
-    resolution: {integrity: sha512-klQbnPAAiGYFyI02+znpBRLyjL4/BrBd0nyWkdC0s/6xFLkXYQ8OoRrSkqacS1ddVxf/LDyODIKbQ5TgKAf/Fg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@typescript-eslint/parser@8.57.2":
+    resolution:
+      {
+        integrity: sha512-30ScMRHIAD33JJQkgfGW1t8CURZtjc2JpTrq5n2HFhOefbAhb7ucc7xJwdWcrEtqUIYJ73Nybpsggii6GtAHjA==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: ">=4.8.4 <6.0.0"
 
-  '@typescript-eslint/project-service@8.49.0':
-    resolution: {integrity: sha512-/wJN0/DKkmRUMXjZUXYZpD1NEQzQAAn9QWfGwo+Ai8gnzqH7tvqS7oNVdTjKqOcPyVIdZdyCMoqN66Ia789e7g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@typescript-eslint/project-service@8.57.2":
+    resolution:
+      {
+        integrity: sha512-FuH0wipFywXRTHf+bTTjNyuNQQsQC3qh/dYzaM4I4W0jrCqjCVuUh99+xd9KamUfmCGPvbO8NDngo/vsnNVqgw==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: ">=4.8.4 <6.0.0"
 
-  '@typescript-eslint/project-service@8.56.1':
-    resolution: {integrity: sha512-TAdqQTzHNNvlVFfR+hu2PDJrURiwKsUvxFn1M0h95BB8ah5jejas08jUWG4dBA68jDMI988IvtfdAI53JzEHOQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@typescript-eslint/scope-manager@8.57.2":
+    resolution:
+      {
+        integrity: sha512-snZKH+W4WbWkrBqj4gUNRIGb/jipDW3qMqVJ4C9rzdFc+wLwruxk+2a5D+uoFcKPAqyqEnSb4l2ULuZf95eSkw==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+
+  "@typescript-eslint/tsconfig-utils@8.57.2":
+    resolution:
+      {
+        integrity: sha512-3Lm5DSM+DCowsUOJC+YqHHnKEfFh5CoGkj5Z31NQSNF4l5wdOwqGn99wmwN/LImhfY3KJnmordBq/4+VDe2eKw==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: ">=4.8.4 <6.0.0"
 
-  '@typescript-eslint/scope-manager@8.49.0':
-    resolution: {integrity: sha512-npgS3zi+/30KSOkXNs0LQXtsg9ekZ8OISAOLGWA/ZOEn0ZH74Ginfl7foziV8DT+D98WfQ5Kopwqb/PZOaIJGg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/scope-manager@8.56.1':
-    resolution: {integrity: sha512-YAi4VDKcIZp0O4tz/haYKhmIDZFEUPOreKbfdAN3SzUDMcPhJ8QI99xQXqX+HoUVq8cs85eRKnD+rne2UAnj2w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/tsconfig-utils@8.49.0':
-    resolution: {integrity: sha512-8prixNi1/6nawsRYxet4YOhnbW+W9FK/bQPxsGB1D3ZrDzbJ5FXw5XmzxZv82X3B+ZccuSxo/X8q9nQ+mFecWA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@typescript-eslint/type-utils@8.57.2":
+    resolution:
+      {
+        integrity: sha512-Co6ZCShm6kIbAM/s+oYVpKFfW7LBc6FXoPXjTRQ449PPNBY8U0KZXuevz5IFuuUj2H9ss40atTaf9dlGLzbWZg==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: ">=4.8.4 <6.0.0"
 
-  '@typescript-eslint/tsconfig-utils@8.56.1':
-    resolution: {integrity: sha512-qOtCYzKEeyr3aR9f28mPJqBty7+DBqsdd63eO0yyDwc6vgThj2UjWfJIcsFeSucYydqcuudMOprZ+x1SpF3ZuQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@typescript-eslint/types@8.57.2":
+    resolution:
+      {
+        integrity: sha512-/iZM6FnM4tnx9csuTxspMW4BOSegshwX5oBDznJ7S4WggL7Vczz5d2W11ecc4vRrQMQHXRSxzrCsyG5EsPPTbA==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+
+  "@typescript-eslint/typescript-estree@8.57.2":
+    resolution:
+      {
+        integrity: sha512-2MKM+I6g8tJxfSmFKOnHv2t8Sk3T6rF20A1Puk0svLK+uVapDZB/4pfAeB7nE83uAZrU6OxW+HmOd5wHVdXwXA==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: ">=4.8.4 <6.0.0"
 
-  '@typescript-eslint/type-utils@8.49.0':
-    resolution: {integrity: sha512-KTExJfQ+svY8I10P4HdxKzWsvtVnsuCifU5MvXrRwoP2KOlNZ9ADNEWWsQTJgMxLzS5VLQKDjkCT/YzgsnqmZg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@typescript-eslint/utils@8.57.2":
+    resolution:
+      {
+        integrity: sha512-krRIbvPK1ju1WBKIefiX+bngPs+odIQUtR7kymzPfo1POVw3jlF+nLkmexdSSd4UCbDcQn+wMBATOOmpBbqgKg==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: ">=4.8.4 <6.0.0"
 
-  '@typescript-eslint/types@8.49.0':
-    resolution: {integrity: sha512-e9k/fneezorUo6WShlQpMxXh8/8wfyc+biu6tnAqA81oWrEic0k21RHzP9uqqpyBBeBKu4T+Bsjy9/b8u7obXQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  "@typescript-eslint/visitor-keys@8.57.2":
+    resolution:
+      {
+        integrity: sha512-zhahknjobV2FiD6Ee9iLbS7OV9zi10rG26odsQdfBO/hjSzUQbkIYgda+iNKK1zNiW2ey+Lf8MU5btN17V3dUw==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@typescript-eslint/types@8.56.1':
-    resolution: {integrity: sha512-dbMkdIUkIkchgGDIv7KLUpa0Mda4IYjo4IAMJUZ+3xNoUXxMsk9YtKpTHSChRS85o+H9ftm51gsK1dZReY9CVw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/typescript-estree@8.49.0':
-    resolution: {integrity: sha512-jrLdRuAbPfPIdYNppHJ/D0wN+wwNfJ32YTAm10eJVsFmrVpXQnDWBn8niCSMlWjvml8jsce5E/O+86IQtTbJWA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/typescript-estree@8.56.1':
-    resolution: {integrity: sha512-qzUL1qgalIvKWAf9C1HpvBjif+Vm6rcT5wZd4VoMb9+Km3iS3Cv9DY6dMRMDtPnwRAFyAi7YXJpTIEXLvdfPxg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/utils@8.49.0':
-    resolution: {integrity: sha512-N3W7rJw7Rw+z1tRsHZbK395TWSYvufBXumYtEGzypgMUthlg0/hmCImeA8hgO2d2G4pd7ftpxxul2J8OdtdaFA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/visitor-keys@8.49.0':
-    resolution: {integrity: sha512-LlKaciDe3GmZFphXIc79THF/YYBugZ7FS1pO581E/edlVVNbZKDy93evqmrfQ9/Y4uN0vVhX4iuchq26mK/iiA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/visitor-keys@8.56.1':
-    resolution: {integrity: sha512-KiROIzYdEV85YygXw6BI/Dx4fnBlFQu6Mq4QE4MOH9fFnhohw6wX/OAvDY2/C+ut0I3RSPKenvZJIVYqJNkhEw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
-    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
+  "@unrs/resolver-binding-android-arm-eabi@1.11.1":
+    resolution:
+      {
+        integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==,
+      }
     cpu: [arm]
     os: [android]
 
-  '@unrs/resolver-binding-android-arm64@1.11.1':
-    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
+  "@unrs/resolver-binding-android-arm64@1.11.1":
+    resolution:
+      {
+        integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==,
+      }
     cpu: [arm64]
     os: [android]
 
-  '@unrs/resolver-binding-darwin-arm64@1.11.1':
-    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
+  "@unrs/resolver-binding-darwin-arm64@1.11.1":
+    resolution:
+      {
+        integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==,
+      }
     cpu: [arm64]
     os: [darwin]
 
-  '@unrs/resolver-binding-darwin-x64@1.11.1':
-    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
+  "@unrs/resolver-binding-darwin-x64@1.11.1":
+    resolution:
+      {
+        integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==,
+      }
     cpu: [x64]
     os: [darwin]
 
-  '@unrs/resolver-binding-freebsd-x64@1.11.1':
-    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
+  "@unrs/resolver-binding-freebsd-x64@1.11.1":
+    resolution:
+      {
+        integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==,
+      }
     cpu: [x64]
     os: [freebsd]
 
-  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
-    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
+  "@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1":
+    resolution:
+      {
+        integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==,
+      }
     cpu: [arm]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
-    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
+  "@unrs/resolver-binding-linux-arm-musleabihf@1.11.1":
+    resolution:
+      {
+        integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==,
+      }
     cpu: [arm]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
-    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
+  "@unrs/resolver-binding-linux-arm64-gnu@1.11.1":
+    resolution:
+      {
+        integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==,
+      }
     cpu: [arm64]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
-    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
+  "@unrs/resolver-binding-linux-arm64-musl@1.11.1":
+    resolution:
+      {
+        integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==,
+      }
     cpu: [arm64]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
-    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
+  "@unrs/resolver-binding-linux-ppc64-gnu@1.11.1":
+    resolution:
+      {
+        integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==,
+      }
     cpu: [ppc64]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
-    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
+  "@unrs/resolver-binding-linux-riscv64-gnu@1.11.1":
+    resolution:
+      {
+        integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==,
+      }
     cpu: [riscv64]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
-    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
+  "@unrs/resolver-binding-linux-riscv64-musl@1.11.1":
+    resolution:
+      {
+        integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==,
+      }
     cpu: [riscv64]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
-    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
+  "@unrs/resolver-binding-linux-s390x-gnu@1.11.1":
+    resolution:
+      {
+        integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==,
+      }
     cpu: [s390x]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
-    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
+  "@unrs/resolver-binding-linux-x64-gnu@1.11.1":
+    resolution:
+      {
+        integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==,
+      }
     cpu: [x64]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
-    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
+  "@unrs/resolver-binding-linux-x64-musl@1.11.1":
+    resolution:
+      {
+        integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==,
+      }
     cpu: [x64]
     os: [linux]
 
-  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
-    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
-    engines: {node: '>=14.0.0'}
+  "@unrs/resolver-binding-wasm32-wasi@1.11.1":
+    resolution:
+      {
+        integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==,
+      }
+    engines: { node: ">=14.0.0" }
     cpu: [wasm32]
 
-  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
-    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
+  "@unrs/resolver-binding-win32-arm64-msvc@1.11.1":
+    resolution:
+      {
+        integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==,
+      }
     cpu: [arm64]
     os: [win32]
 
-  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
-    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
+  "@unrs/resolver-binding-win32-ia32-msvc@1.11.1":
+    resolution:
+      {
+        integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==,
+      }
     cpu: [ia32]
     os: [win32]
 
-  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
-    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
+  "@unrs/resolver-binding-win32-x64-msvc@1.11.1":
+    resolution:
+      {
+        integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==,
+      }
     cpu: [x64]
     os: [win32]
 
-  '@vitejs/plugin-react@4.7.0':
-    resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  "@vitejs/plugin-react@4.7.0":
+    resolution:
+      {
+        integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==,
+      }
+    engines: { node: ^14.18.0 || >=16.0.0 }
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
-  '@vitest/expect@2.0.5':
-    resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==}
+  "@vitest/expect@2.0.5":
+    resolution:
+      {
+        integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==,
+      }
 
-  '@vitest/pretty-format@2.0.5':
-    resolution: {integrity: sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==}
+  "@vitest/pretty-format@2.0.5":
+    resolution:
+      {
+        integrity: sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==,
+      }
 
-  '@vitest/pretty-format@2.1.9':
-    resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
+  "@vitest/pretty-format@2.1.9":
+    resolution:
+      {
+        integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==,
+      }
 
-  '@vitest/spy@2.0.5':
-    resolution: {integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==}
+  "@vitest/spy@2.0.5":
+    resolution:
+      {
+        integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==,
+      }
 
-  '@vitest/utils@2.0.5':
-    resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==}
+  "@vitest/utils@2.0.5":
+    resolution:
+      {
+        integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==,
+      }
 
-  '@vitest/utils@2.1.9':
-    resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==}
+  "@vitest/utils@2.1.9":
+    resolution:
+      {
+        integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==,
+      }
 
-  '@vue/compiler-core@3.5.25':
-    resolution: {integrity: sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==}
+  "@vue/compiler-core@3.5.30":
+    resolution:
+      {
+        integrity: sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw==,
+      }
 
-  '@vue/compiler-dom@3.5.25':
-    resolution: {integrity: sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==}
+  "@vue/compiler-dom@3.5.30":
+    resolution:
+      {
+        integrity: sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g==,
+      }
 
-  '@vue/compiler-sfc@3.5.25':
-    resolution: {integrity: sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==}
+  "@vue/compiler-sfc@3.5.30":
+    resolution:
+      {
+        integrity: sha512-LqmFPDn89dtU9vI3wHJnwaV6GfTRD87AjWpTWpyrdVOObVtjIuSeZr181z5C4PmVx/V3j2p+0f7edFKGRMpQ5A==,
+      }
 
-  '@vue/compiler-ssr@3.5.25':
-    resolution: {integrity: sha512-ritPSKLBcParnsKYi+GNtbdbrIE1mtuFEJ4U1sWeuOMlIziK5GtOL85t5RhsNy4uWIXPgk+OUdpnXiTdzn8o3A==}
+  "@vue/compiler-ssr@3.5.30":
+    resolution:
+      {
+        integrity: sha512-NsYK6OMTnx109PSL2IAyf62JP6EUdk4Dmj6AkWcJGBvN0dQoMYtVekAmdqgTtWQgEJo+Okstbf/1p7qZr5H+bA==,
+      }
 
-  '@vue/shared@3.5.25':
-    resolution: {integrity: sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==}
+  "@vue/shared@3.5.30":
+    resolution:
+      {
+        integrity: sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ==,
+      }
 
-  '@webassemblyjs/ast@1.14.1':
-    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
+  "@webassemblyjs/ast@1.14.1":
+    resolution:
+      {
+        integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==,
+      }
 
-  '@webassemblyjs/floating-point-hex-parser@1.13.2':
-    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
+  "@webassemblyjs/floating-point-hex-parser@1.13.2":
+    resolution:
+      {
+        integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==,
+      }
 
-  '@webassemblyjs/helper-api-error@1.13.2':
-    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
+  "@webassemblyjs/helper-api-error@1.13.2":
+    resolution:
+      {
+        integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==,
+      }
 
-  '@webassemblyjs/helper-buffer@1.14.1':
-    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
+  "@webassemblyjs/helper-buffer@1.14.1":
+    resolution:
+      {
+        integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==,
+      }
 
-  '@webassemblyjs/helper-numbers@1.13.2':
-    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
+  "@webassemblyjs/helper-numbers@1.13.2":
+    resolution:
+      {
+        integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==,
+      }
 
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
-    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
+  "@webassemblyjs/helper-wasm-bytecode@1.13.2":
+    resolution:
+      {
+        integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==,
+      }
 
-  '@webassemblyjs/helper-wasm-section@1.14.1':
-    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
+  "@webassemblyjs/helper-wasm-section@1.14.1":
+    resolution:
+      {
+        integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==,
+      }
 
-  '@webassemblyjs/ieee754@1.13.2':
-    resolution: {integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==}
+  "@webassemblyjs/ieee754@1.13.2":
+    resolution:
+      {
+        integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==,
+      }
 
-  '@webassemblyjs/leb128@1.13.2':
-    resolution: {integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==}
+  "@webassemblyjs/leb128@1.13.2":
+    resolution:
+      {
+        integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==,
+      }
 
-  '@webassemblyjs/utf8@1.13.2':
-    resolution: {integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==}
+  "@webassemblyjs/utf8@1.13.2":
+    resolution:
+      {
+        integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==,
+      }
 
-  '@webassemblyjs/wasm-edit@1.14.1':
-    resolution: {integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==}
+  "@webassemblyjs/wasm-edit@1.14.1":
+    resolution:
+      {
+        integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==,
+      }
 
-  '@webassemblyjs/wasm-gen@1.14.1':
-    resolution: {integrity: sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==}
+  "@webassemblyjs/wasm-gen@1.14.1":
+    resolution:
+      {
+        integrity: sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==,
+      }
 
-  '@webassemblyjs/wasm-opt@1.14.1':
-    resolution: {integrity: sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==}
+  "@webassemblyjs/wasm-opt@1.14.1":
+    resolution:
+      {
+        integrity: sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==,
+      }
 
-  '@webassemblyjs/wasm-parser@1.14.1':
-    resolution: {integrity: sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==}
+  "@webassemblyjs/wasm-parser@1.14.1":
+    resolution:
+      {
+        integrity: sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==,
+      }
 
-  '@webassemblyjs/wast-printer@1.14.1':
-    resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
+  "@webassemblyjs/wast-printer@1.14.1":
+    resolution:
+      {
+        integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==,
+      }
 
-  '@xlsx/xlsx-populate@0.0.8':
-    resolution: {integrity: sha512-6yu24ePaO3cnAuti77FhVPZvKkzUt6s6x3zJ9wiuBSjR0ImWu7l/SgePelZaf8Oty4SP4rg4vznQVCGQtfzu2A==}
-    engines: {node: '>=16'}
+  "@xlsx/xlsx-populate@0.0.8":
+    resolution:
+      {
+        integrity: sha512-6yu24ePaO3cnAuti77FhVPZvKkzUt6s6x3zJ9wiuBSjR0ImWu7l/SgePelZaf8Oty4SP4rg4vznQVCGQtfzu2A==,
+      }
+    engines: { node: ">=16" }
 
-  '@xtuc/ieee754@1.2.0':
-    resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
+  "@xtuc/ieee754@1.2.0":
+    resolution:
+      {
+        integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==,
+      }
 
-  '@xtuc/long@4.2.2':
-    resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
+  "@xtuc/long@4.2.2":
+    resolution:
+      {
+        integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==,
+      }
 
   acorn-import-phases@1.0.4:
-    resolution: {integrity: sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==}
-    engines: {node: '>=10.13.0'}
+    resolution:
+      {
+        integrity: sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==,
+      }
+    engines: { node: ">=10.13.0" }
     peerDependencies:
       acorn: ^8.14.0
 
   acorn-jsx@5.3.2:
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    resolution:
+      {
+        integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==,
+      }
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn@8.15.0:
-    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
-    engines: {node: '>=0.4.0'}
+  acorn@8.16.0:
+    resolution:
+      {
+        integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==,
+      }
+    engines: { node: ">=0.4.0" }
     hasBin: true
 
   adler-32@1.3.1:
-    resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==}
-    engines: {node: '>=0.8'}
+    resolution:
+      {
+        integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==,
+      }
+    engines: { node: ">=0.8" }
 
   ajv-formats@2.1.1:
-    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    resolution:
+      {
+        integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==,
+      }
     peerDependencies:
       ajv: ^8.0.0
     peerDependenciesMeta:
@@ -4200,762 +5666,1314 @@ packages:
         optional: true
 
   ajv-keywords@5.1.0:
-    resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
+    resolution:
+      {
+        integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==,
+      }
     peerDependencies:
       ajv: ^8.8.2
 
-  ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+  ajv@6.14.0:
+    resolution:
+      {
+        integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==,
+      }
 
-  ajv@8.17.1:
-    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+  ajv@8.18.0:
+    resolution:
+      {
+        integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==,
+      }
 
   ansi-escapes@7.3.0:
-    resolution: {integrity: sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==,
+      }
+    engines: { node: ">=18" }
 
   ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==,
+      }
+    engines: { node: ">=8" }
 
   ansi-regex@6.2.2:
-    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==,
+      }
+    engines: { node: ">=12" }
 
   ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==,
+      }
+    engines: { node: ">=8" }
 
   ansi-styles@5.2.0:
-    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==,
+      }
+    engines: { node: ">=10" }
 
   ansi-styles@6.2.3:
-    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==,
+      }
+    engines: { node: ">=12" }
 
   any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+    resolution:
+      {
+        integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==,
+      }
 
   anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
+    resolution:
+      {
+        integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==,
+      }
+    engines: { node: ">= 8" }
 
   arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+    resolution:
+      {
+        integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==,
+      }
 
   argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    resolution:
+      {
+        integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==,
+      }
 
   aria-hidden@1.2.6:
-    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==,
+      }
+    engines: { node: ">=10" }
 
   aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+    resolution:
+      {
+        integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==,
+      }
 
   aria-query@5.3.2:
-    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==,
+      }
+    engines: { node: ">= 0.4" }
 
   array-buffer-byte-length@1.0.2:
-    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==,
+      }
+    engines: { node: ">= 0.4" }
 
   array-includes@3.1.9:
-    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   array.prototype.findlast@1.2.5:
-    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   array.prototype.findlastindex@1.2.6:
-    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   array.prototype.flat@1.3.3:
-    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==,
+      }
+    engines: { node: ">= 0.4" }
 
   array.prototype.flatmap@1.3.3:
-    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==,
+      }
+    engines: { node: ">= 0.4" }
 
   array.prototype.tosorted@1.1.4:
-    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==,
+      }
+    engines: { node: ">= 0.4" }
 
   arraybuffer.prototype.slice@1.0.4:
-    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   assertion-error@2.0.1:
-    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==,
+      }
+    engines: { node: ">=12" }
 
   ast-module-types@6.0.1:
-    resolution: {integrity: sha512-WHw67kLXYbZuHTmcdbIrVArCq5wxo6NEuj3hiYAWr8mwJeC+C2mMCIBIWCiDoCye/OF/xelc+teJ1ERoWmnEIA==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-WHw67kLXYbZuHTmcdbIrVArCq5wxo6NEuj3hiYAWr8mwJeC+C2mMCIBIWCiDoCye/OF/xelc+teJ1ERoWmnEIA==,
+      }
+    engines: { node: ">=18" }
 
   ast-types-flow@0.0.8:
-    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
+    resolution:
+      {
+        integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==,
+      }
 
   ast-types@0.16.1:
-    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
-    engines: {node: '>=4'}
+    resolution:
+      {
+        integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==,
+      }
+    engines: { node: ">=4" }
 
   async-function@1.0.0:
-    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==,
+      }
+    engines: { node: ">= 0.4" }
 
   async-wave@1.8.6:
-    resolution: {integrity: sha512-wqWvr0Mrc1TrY92hN9MV0Xebxa6kt+T7QtjZ7FEMv+RUBa/Hfpz/UOgz0rB+7uqVK8TuBSXykOyU/k9gogdLkw==}
+    resolution:
+      {
+        integrity: sha512-wqWvr0Mrc1TrY92hN9MV0Xebxa6kt+T7QtjZ7FEMv+RUBa/Hfpz/UOgz0rB+7uqVK8TuBSXykOyU/k9gogdLkw==,
+      }
 
   asynckit@0.4.0:
-    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    resolution:
+      {
+        integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==,
+      }
 
   attr-accept@2.2.5:
-    resolution: {integrity: sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==}
-    engines: {node: '>=4'}
+    resolution:
+      {
+        integrity: sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==,
+      }
+    engines: { node: ">=4" }
 
-  autoprefixer@10.4.22:
-    resolution: {integrity: sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==}
-    engines: {node: ^10 || ^12 || >=14}
+  autoprefixer@10.4.27:
+    resolution:
+      {
+        integrity: sha512-NP9APE+tO+LuJGn7/9+cohklunJsXWiaWEfV3si4Gi/XHDwVNgkwr1J3RQYFIvPy76GmJ9/bW8vyoU1LcxwKHA==,
+      }
+    engines: { node: ^10 || ^12 || >=14 }
     hasBin: true
     peerDependencies:
       postcss: ^8.1.0
 
   available-typed-arrays@1.0.7:
-    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==,
+      }
+    engines: { node: ">= 0.4" }
 
-  axe-core@4.11.0:
-    resolution: {integrity: sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==}
-    engines: {node: '>=4'}
+  axe-core@4.11.1:
+    resolution:
+      {
+        integrity: sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==,
+      }
+    engines: { node: ">=4" }
 
   axios@1.8.1:
-    resolution: {integrity: sha512-NN+fvwH/kV01dYUQ3PTOZns4LWtWhOFCAhQ/pHb88WQ1hNe5V/dvFwc4VJcDL11LT9xSX0QtsR8sWUuyOuOq7g==}
+    resolution:
+      {
+        integrity: sha512-NN+fvwH/kV01dYUQ3PTOZns4LWtWhOFCAhQ/pHb88WQ1hNe5V/dvFwc4VJcDL11LT9xSX0QtsR8sWUuyOuOq7g==,
+      }
 
   axobject-query@4.1.0:
-    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    resolution:
+      {
+        integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==,
+      }
 
   balanced-match@4.0.4:
-    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
-    engines: {node: 18 || 20 || >=22}
+    resolution:
+      {
+        integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==,
+      }
+    engines: { node: 18 || 20 || >=22 }
 
   base64-arraybuffer@1.0.2:
-    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
-    engines: {node: '>= 0.6.0'}
+    resolution:
+      {
+        integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==,
+      }
+    engines: { node: ">= 0.6.0" }
 
-  baseline-browser-mapping@2.9.7:
-    resolution: {integrity: sha512-k9xFKplee6KIio3IDbwj+uaCLpqzOwakOgmqzPezM0sFJlFKcg30vk2wOiAJtkTSfx0SSQDSe8q+mWA/fSH5Zg==}
+  baseline-browser-mapping@2.10.10:
+    resolution:
+      {
+        integrity: sha512-sUoJ3IMxx4AyRqO4MLeHlnGDkyXRoUG0/AI9fjK+vS72ekpV0yWVY7O0BVjmBcRtkNcsAO2QDZ4tdKKGoI6YaQ==,
+      }
+    engines: { node: ">=6.0.0" }
     hasBin: true
 
   better-opn@3.0.2:
-    resolution: {integrity: sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==}
-    engines: {node: '>=12.0.0'}
+    resolution:
+      {
+        integrity: sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==,
+      }
+    engines: { node: ">=12.0.0" }
 
   binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==,
+      }
+    engines: { node: ">=8" }
 
   brace-expansion@1.1.12:
-    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+    resolution:
+      {
+        integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==,
+      }
 
   brace-expansion@2.0.2:
-    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+    resolution:
+      {
+        integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==,
+      }
 
-  brace-expansion@5.0.4:
-    resolution: {integrity: sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==}
-    engines: {node: 18 || 20 || >=22}
+  brace-expansion@5.0.5:
+    resolution:
+      {
+        integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==,
+      }
+    engines: { node: 18 || 20 || >=22 }
 
   braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==,
+      }
+    engines: { node: ">=8" }
 
   browser-assert@1.2.1:
-    resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==}
+    resolution:
+      {
+        integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==,
+      }
 
   browserslist@4.28.1:
-    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    resolution:
+      {
+        integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==,
+      }
+    engines: { node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 }
     hasBin: true
 
   buffer-from@1.1.2:
-    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+    resolution:
+      {
+        integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==,
+      }
 
   bundle-require@5.1.0:
-    resolution: {integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    resolution:
+      {
+        integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==,
+      }
+    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
     peerDependencies:
-      esbuild: '>=0.18'
-
-  busboy@1.6.0:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
+      esbuild: ">=0.18"
 
   cac@6.7.14:
-    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==,
+      }
+    engines: { node: ">=8" }
 
   call-bind-apply-helpers@1.0.2:
-    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   call-bind@1.0.8:
-    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==,
+      }
+    engines: { node: ">= 0.4" }
 
   call-bound@1.0.4:
-    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==,
+      }
+    engines: { node: ">= 0.4" }
 
   callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==,
+      }
+    engines: { node: ">=6" }
 
   camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
+    resolution:
+      {
+        integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==,
+      }
+    engines: { node: ">= 6" }
 
   camelcase@5.3.1:
-    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==,
+      }
+    engines: { node: ">=6" }
 
-  caniuse-lite@1.0.30001760:
-    resolution: {integrity: sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==}
+  caniuse-lite@1.0.30001781:
+    resolution:
+      {
+        integrity: sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw==,
+      }
 
   cfb@1.2.2:
-    resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
-    engines: {node: '>=0.8'}
+    resolution:
+      {
+        integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==,
+      }
+    engines: { node: ">=0.8" }
 
   chai@5.3.3:
-    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==,
+      }
+    engines: { node: ">=18" }
 
   chalk@3.0.0:
-    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==,
+      }
+    engines: { node: ">=8" }
 
   chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==,
+      }
+    engines: { node: ">=10" }
 
   chart.js@4.5.1:
-    resolution: {integrity: sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==}
-    engines: {pnpm: '>=8'}
+    resolution:
+      {
+        integrity: sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==,
+      }
+    engines: { pnpm: ">=8" }
 
   chartjs-plugin-zoom@2.2.0:
-    resolution: {integrity: sha512-in6kcdiTlP6npIVLMd4zXZ08PDUXC52gZ4FAy5oyjk1zX3gKarXMAof7B9eFiisf9WOC3bh2saHg+J5WtLXZeA==}
+    resolution:
+      {
+        integrity: sha512-in6kcdiTlP6npIVLMd4zXZ08PDUXC52gZ4FAy5oyjk1zX3gKarXMAof7B9eFiisf9WOC3bh2saHg+J5WtLXZeA==,
+      }
     peerDependencies:
-      chart.js: '>=3.2.0'
+      chart.js: ">=3.2.0"
 
-  check-error@2.1.1:
-    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
-    engines: {node: '>= 16'}
+  check-error@2.1.3:
+    resolution:
+      {
+        integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==,
+      }
+    engines: { node: ">= 16" }
 
   chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
+    resolution:
+      {
+        integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==,
+      }
+    engines: { node: ">= 8.10.0" }
 
   chokidar@4.0.3:
-    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
-    engines: {node: '>= 14.16.0'}
+    resolution:
+      {
+        integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==,
+      }
+    engines: { node: ">= 14.16.0" }
 
   chrome-trace-event@1.0.4:
-    resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
-    engines: {node: '>=6.0'}
+    resolution:
+      {
+        integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==,
+      }
+    engines: { node: ">=6.0" }
 
   class-variance-authority@0.7.1:
-    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+    resolution:
+      {
+        integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==,
+      }
 
   cli-cursor@5.0.0:
-    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==,
+      }
+    engines: { node: ">=18" }
 
-  cli-truncate@5.1.1:
-    resolution: {integrity: sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A==}
-    engines: {node: '>=20'}
+  cli-truncate@5.2.0:
+    resolution:
+      {
+        integrity: sha512-xRwvIOMGrfOAnM1JYtqQImuaNtDEv9v6oIYAs4LIHwTiKee8uwvIi363igssOC0O5U04i4AlENs79LQLu9tEMw==,
+      }
+    engines: { node: ">=20" }
 
   client-only@0.0.1:
-    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+    resolution:
+      {
+        integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==,
+      }
 
   cliui@6.0.0:
-    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+    resolution:
+      {
+        integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==,
+      }
 
   cliui@8.0.1:
-    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==,
+      }
+    engines: { node: ">=12" }
 
   cliui@9.0.1:
-    resolution: {integrity: sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==}
-    engines: {node: '>=20'}
+    resolution:
+      {
+        integrity: sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==,
+      }
+    engines: { node: ">=20" }
 
   clsx@2.1.1:
-    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==,
+      }
+    engines: { node: ">=6" }
 
   codepage@1.15.0:
-    resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
-    engines: {node: '>=0.8'}
+    resolution:
+      {
+        integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==,
+      }
+    engines: { node: ">=0.8" }
 
   color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
+    resolution:
+      {
+        integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==,
+      }
+    engines: { node: ">=7.0.0" }
 
   color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    resolution:
+      {
+        integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==,
+      }
 
   colorette@2.0.20:
-    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+    resolution:
+      {
+        integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==,
+      }
 
   combine-errors@3.0.3:
-    resolution: {integrity: sha512-C8ikRNRMygCwaTx+Ek3Yr+OuZzgZjduCOfSQBjbM8V3MfgcjSTeto/GXP6PAwKvJz/v15b7GHZvx5rOlczFw/Q==}
+    resolution:
+      {
+        integrity: sha512-C8ikRNRMygCwaTx+Ek3Yr+OuZzgZjduCOfSQBjbM8V3MfgcjSTeto/GXP6PAwKvJz/v15b7GHZvx5rOlczFw/Q==,
+      }
 
   combined-stream@1.0.8:
-    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
-    engines: {node: '>= 0.8'}
+    resolution:
+      {
+        integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==,
+      }
+    engines: { node: ">= 0.8" }
 
   commander@12.1.0:
-    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==,
+      }
+    engines: { node: ">=18" }
 
   commander@14.0.3:
-    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
-    engines: {node: '>=20'}
+    resolution:
+      {
+        integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==,
+      }
+    engines: { node: ">=20" }
 
   commander@2.20.3:
-    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+    resolution:
+      {
+        integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==,
+      }
 
   commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
+    resolution:
+      {
+        integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==,
+      }
+    engines: { node: ">= 6" }
 
   concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    resolution:
+      {
+        integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==,
+      }
 
   consola@3.4.2:
-    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
-    engines: {node: ^14.18.0 || >=16.10.0}
+    resolution:
+      {
+        integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==,
+      }
+    engines: { node: ^14.18.0 || >=16.10.0 }
 
   convert-source-map@2.0.0:
-    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+    resolution:
+      {
+        integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==,
+      }
 
   core-util-is@1.0.3:
-    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    resolution:
+      {
+        integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==,
+      }
 
-  cosmiconfig@9.0.0:
-    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
-    engines: {node: '>=14'}
+  cosmiconfig@9.0.1:
+    resolution:
+      {
+        integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==,
+      }
+    engines: { node: ">=14" }
     peerDependencies:
-      typescript: '>=4.9.5'
+      typescript: ">=4.9.5"
     peerDependenciesMeta:
       typescript:
         optional: true
 
   crc-32@1.2.2:
-    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
-    engines: {node: '>=0.8'}
+    resolution:
+      {
+        integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==,
+      }
+    engines: { node: ">=0.8" }
     hasBin: true
 
   cross-spawn@7.0.6:
-    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
-    engines: {node: '>= 8'}
+    resolution:
+      {
+        integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==,
+      }
+    engines: { node: ">= 8" }
 
   css-line-break@2.1.0:
-    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+    resolution:
+      {
+        integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==,
+      }
 
   css.escape@1.5.1:
-    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+    resolution:
+      {
+        integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==,
+      }
 
   csscolorparser@1.0.3:
-    resolution: {integrity: sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==}
+    resolution:
+      {
+        integrity: sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==,
+      }
 
   cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
+    resolution:
+      {
+        integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==,
+      }
+    engines: { node: ">=4" }
     hasBin: true
 
   csstype@3.2.3:
-    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+    resolution:
+      {
+        integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==,
+      }
 
   custom-error-instance@2.1.1:
-    resolution: {integrity: sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg==}
+    resolution:
+      {
+        integrity: sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg==,
+      }
 
   d3-array@3.2.4:
-    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==,
+      }
+    engines: { node: ">=12" }
 
   d3-color@3.1.0:
-    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==,
+      }
+    engines: { node: ">=12" }
 
   d3-ease@3.0.1:
-    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==,
+      }
+    engines: { node: ">=12" }
 
-  d3-format@3.1.0:
-    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
-    engines: {node: '>=12'}
+  d3-format@3.1.2:
+    resolution:
+      {
+        integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==,
+      }
+    engines: { node: ">=12" }
 
   d3-interpolate@3.0.1:
-    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==,
+      }
+    engines: { node: ">=12" }
 
   d3-path@3.1.0:
-    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==,
+      }
+    engines: { node: ">=12" }
 
   d3-scale@4.0.2:
-    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==,
+      }
+    engines: { node: ">=12" }
 
   d3-shape@3.2.0:
-    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==,
+      }
+    engines: { node: ">=12" }
 
   d3-time-format@4.1.0:
-    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==,
+      }
+    engines: { node: ">=12" }
 
   d3-time@3.1.0:
-    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==,
+      }
+    engines: { node: ">=12" }
 
   d3-timer@3.0.1:
-    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==,
+      }
+    engines: { node: ">=12" }
 
   damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
+    resolution:
+      {
+        integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==,
+      }
 
   data-view-buffer@1.0.2:
-    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   data-view-byte-length@1.0.2:
-    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   data-view-byte-offset@1.0.1:
-    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   date-fns-jalali@4.1.0-0:
-    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+    resolution:
+      {
+        integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==,
+      }
 
   date-fns@3.6.0:
-    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
+    resolution:
+      {
+        integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==,
+      }
 
   date-fns@4.1.0:
-    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+    resolution:
+      {
+        integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==,
+      }
 
-  dayjs@1.11.19:
-    resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
+  dayjs@1.11.20:
+    resolution:
+      {
+        integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==,
+      }
 
   debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    resolution:
+      {
+        integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==,
+      }
     peerDependencies:
-      supports-color: '*'
+      supports-color: "*"
     peerDependenciesMeta:
       supports-color:
         optional: true
 
   debug@4.4.3:
-    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
-    engines: {node: '>=6.0'}
+    resolution:
+      {
+        integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==,
+      }
+    engines: { node: ">=6.0" }
     peerDependencies:
-      supports-color: '*'
+      supports-color: "*"
     peerDependenciesMeta:
       supports-color:
         optional: true
 
   decamelize@1.2.0:
-    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==,
+      }
+    engines: { node: ">=0.10.0" }
 
   decimal.js-light@2.5.1:
-    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+    resolution:
+      {
+        integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==,
+      }
 
   deep-eql@5.0.2:
-    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==,
+      }
+    engines: { node: ">=6" }
 
   deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    resolution:
+      {
+        integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==,
+      }
 
   define-data-property@1.1.4:
-    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==,
+      }
+    engines: { node: ">= 0.4" }
 
   define-lazy-prop@2.0.0:
-    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==,
+      }
+    engines: { node: ">=8" }
 
   define-properties@1.2.1:
-    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==,
+      }
+    engines: { node: ">= 0.4" }
 
   delayed-stream@1.0.0:
-    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
-    engines: {node: '>=0.4.0'}
+    resolution:
+      {
+        integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==,
+      }
+    engines: { node: ">=0.4.0" }
 
   dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==,
+      }
+    engines: { node: ">=6" }
 
   detect-libc@2.1.2:
-    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==,
+      }
+    engines: { node: ">=8" }
 
   detect-node-es@1.1.0:
-    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+    resolution:
+      {
+        integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==,
+      }
 
   detective-amd@6.0.1:
-    resolution: {integrity: sha512-TtyZ3OhwUoEEIhTFoc1C9IyJIud3y+xYkSRjmvCt65+ycQuc3VcBrPRTMWoO/AnuCyOB8T5gky+xf7Igxtjd3g==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-TtyZ3OhwUoEEIhTFoc1C9IyJIud3y+xYkSRjmvCt65+ycQuc3VcBrPRTMWoO/AnuCyOB8T5gky+xf7Igxtjd3g==,
+      }
+    engines: { node: ">=18" }
     hasBin: true
 
-  detective-cjs@6.0.1:
-    resolution: {integrity: sha512-tLTQsWvd2WMcmn/60T2inEJNhJoi7a//PQ7DwRKEj1yEeiQs4mrONgsUtEJKnZmrGWBBmE0kJ1vqOG/NAxwaJw==}
-    engines: {node: '>=18'}
+  detective-cjs@6.1.0:
+    resolution:
+      {
+        integrity: sha512-Qt3S4IddVNDb+71lm+jmt5NznIsgcKlibTnrw9Zr91rT9vRwKp+73+ImqLTNrQj4YuOxnzrC7GwIAVwF7136XQ==,
+      }
+    engines: { node: ">=18" }
 
   detective-es6@5.0.1:
-    resolution: {integrity: sha512-XusTPuewnSUdoxRSx8OOI6xIA/uld/wMQwYsouvFN2LAg7HgP06NF1lHRV3x6BZxyL2Kkoih4ewcq8hcbGtwew==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-XusTPuewnSUdoxRSx8OOI6xIA/uld/wMQwYsouvFN2LAg7HgP06NF1lHRV3x6BZxyL2Kkoih4ewcq8hcbGtwew==,
+      }
+    engines: { node: ">=18" }
 
   detective-postcss@7.0.1:
-    resolution: {integrity: sha512-bEOVpHU9picRZux5XnwGsmCN4+8oZo7vSW0O0/Enq/TO5R2pIAP2279NsszpJR7ocnQt4WXU0+nnh/0JuK4KHQ==}
-    engines: {node: ^14.0.0 || >=16.0.0}
+    resolution:
+      {
+        integrity: sha512-bEOVpHU9picRZux5XnwGsmCN4+8oZo7vSW0O0/Enq/TO5R2pIAP2279NsszpJR7ocnQt4WXU0+nnh/0JuK4KHQ==,
+      }
+    engines: { node: ^14.0.0 || >=16.0.0 }
     peerDependencies:
       postcss: ^8.4.47
 
   detective-sass@6.0.1:
-    resolution: {integrity: sha512-jSGPO8QDy7K7pztUmGC6aiHkexBQT4GIH+mBAL9ZyBmnUIOFbkfZnO8wPRRJFP/QP83irObgsZHCoDHZ173tRw==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-jSGPO8QDy7K7pztUmGC6aiHkexBQT4GIH+mBAL9ZyBmnUIOFbkfZnO8wPRRJFP/QP83irObgsZHCoDHZ173tRw==,
+      }
+    engines: { node: ">=18" }
 
   detective-scss@5.0.1:
-    resolution: {integrity: sha512-MAyPYRgS6DCiS6n6AoSBJXLGVOydsr9huwXORUlJ37K3YLyiN0vYHpzs3AdJOgHobBfispokoqrEon9rbmKacg==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-MAyPYRgS6DCiS6n6AoSBJXLGVOydsr9huwXORUlJ37K3YLyiN0vYHpzs3AdJOgHobBfispokoqrEon9rbmKacg==,
+      }
+    engines: { node: ">=18" }
 
   detective-stylus@5.0.1:
-    resolution: {integrity: sha512-Dgn0bUqdGbE3oZJ+WCKf8Dmu7VWLcmRJGc6RCzBgG31DLIyai9WAoEhYRgIHpt/BCRMrnXLbGWGPQuBUrnF0TA==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-Dgn0bUqdGbE3oZJ+WCKf8Dmu7VWLcmRJGc6RCzBgG31DLIyai9WAoEhYRgIHpt/BCRMrnXLbGWGPQuBUrnF0TA==,
+      }
+    engines: { node: ">=18" }
 
   detective-typescript@14.0.0:
-    resolution: {integrity: sha512-pgN43/80MmWVSEi5LUuiVvO/0a9ss5V7fwVfrJ4QzAQRd3cwqU1SfWGXJFcNKUqoD5cS+uIovhw5t/0rSeC5Mw==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-pgN43/80MmWVSEi5LUuiVvO/0a9ss5V7fwVfrJ4QzAQRd3cwqU1SfWGXJFcNKUqoD5cS+uIovhw5t/0rSeC5Mw==,
+      }
+    engines: { node: ">=18" }
     peerDependencies:
       typescript: ^5.4.4
 
   detective-vue2@2.2.0:
-    resolution: {integrity: sha512-sVg/t6O2z1zna8a/UIV6xL5KUa2cMTQbdTIIvqNM0NIPswp52fe43Nwmbahzj3ww4D844u/vC2PYfiGLvD3zFA==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-sVg/t6O2z1zna8a/UIV6xL5KUa2cMTQbdTIIvqNM0NIPswp52fe43Nwmbahzj3ww4D844u/vC2PYfiGLvD3zFA==,
+      }
+    engines: { node: ">=18" }
     peerDependencies:
       typescript: ^5.4.4
 
   didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+    resolution:
+      {
+        integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==,
+      }
 
   dijkstrajs@1.0.3:
-    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+    resolution:
+      {
+        integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==,
+      }
 
   dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+    resolution:
+      {
+        integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==,
+      }
 
   dnd-core@16.0.1:
-    resolution: {integrity: sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==}
+    resolution:
+      {
+        integrity: sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==,
+      }
 
   dnd-multi-backend@8.1.2:
-    resolution: {integrity: sha512-KPDVEsiM+6gNEegqZYTWJQgJxYV4vB91tUrvoKJjaS0wwWqT/jNU0P7xJAwCue/cbasJNvk2dFZH7tC+bjX1Rg==}
+    resolution:
+      {
+        integrity: sha512-KPDVEsiM+6gNEegqZYTWJQgJxYV4vB91tUrvoKJjaS0wwWqT/jNU0P7xJAwCue/cbasJNvk2dFZH7tC+bjX1Rg==,
+      }
     peerDependencies:
       dnd-core: ^16.0.1
 
   doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==,
+      }
+    engines: { node: ">=0.10.0" }
 
   doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
+    resolution:
+      {
+        integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==,
+      }
+    engines: { node: ">=6.0.0" }
 
   dom-accessibility-api@0.5.16:
-    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+    resolution:
+      {
+        integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==,
+      }
 
   dom-accessibility-api@0.6.3:
-    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+    resolution:
+      {
+        integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==,
+      }
 
   dom-helpers@5.2.1:
-    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+    resolution:
+      {
+        integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==,
+      }
 
   dunder-proto@1.0.1:
-    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==,
+      }
+    engines: { node: ">= 0.4" }
 
   earcut@2.2.4:
-    resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
+    resolution:
+      {
+        integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==,
+      }
 
   eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+    resolution:
+      {
+        integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==,
+      }
 
   effector@23.4.4:
-    resolution: {integrity: sha512-QkZboRN28K/iwxigDhlJcI3ux3aNbt8kYGGH/GkqWG0OlGeyuBhb7PdM89Iu+ogV8Lmz16xIlwnXR2UNWI6psg==}
-    engines: {node: '>=11.0.0'}
+    resolution:
+      {
+        integrity: sha512-QkZboRN28K/iwxigDhlJcI3ux3aNbt8kYGGH/GkqWG0OlGeyuBhb7PdM89Iu+ogV8Lmz16xIlwnXR2UNWI6psg==,
+      }
+    engines: { node: ">=11.0.0" }
 
-  electron-to-chromium@1.5.267:
-    resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
+  electron-to-chromium@1.5.323:
+    resolution:
+      {
+        integrity: sha512-oQm+FxbazvN2WICCbvJgj3IYPKV8awip57+W5VP+Aatk4kFU4pDYCPHZOX22Z27zpw8uttBehEqgK+VTJAYrVw==,
+      }
 
   embla-carousel-autoplay@8.6.0:
-    resolution: {integrity: sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==}
+    resolution:
+      {
+        integrity: sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==,
+      }
     peerDependencies:
       embla-carousel: 8.6.0
 
   embla-carousel-react@8.6.0:
-    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
+    resolution:
+      {
+        integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==,
+      }
     peerDependencies:
       react: ^19.2.1
 
   embla-carousel-reactive-utils@8.6.0:
-    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    resolution:
+      {
+        integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==,
+      }
     peerDependencies:
       embla-carousel: 8.6.0
 
   embla-carousel@8.6.0:
-    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+    resolution:
+      {
+        integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==,
+      }
 
   emoji-regex@10.6.0:
-    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+    resolution:
+      {
+        integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==,
+      }
 
   emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+    resolution:
+      {
+        integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==,
+      }
 
   emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+    resolution:
+      {
+        integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==,
+      }
 
   empathic@1.1.0:
-    resolution: {integrity: sha512-rsPft6CK3eHtrlp9Y5ALBb+hfK+DWnA4WFebbazxjWyx8vSm3rZeoM3z9irsjcqO3PYRzlfv27XIB4tz2DV7RA==}
-    engines: {node: '>=14'}
+    resolution:
+      {
+        integrity: sha512-rsPft6CK3eHtrlp9Y5ALBb+hfK+DWnA4WFebbazxjWyx8vSm3rZeoM3z9irsjcqO3PYRzlfv27XIB4tz2DV7RA==,
+      }
+    engines: { node: ">=14" }
 
-  enhanced-resolve@5.18.4:
-    resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
-    engines: {node: '>=10.13.0'}
+  enhanced-resolve@5.20.1:
+    resolution:
+      {
+        integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==,
+      }
+    engines: { node: ">=10.13.0" }
 
-  entities@4.5.0:
-    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
-    engines: {node: '>=0.12'}
+  entities@7.0.1:
+    resolution:
+      {
+        integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==,
+      }
+    engines: { node: ">=0.12" }
 
   env-paths@2.2.1:
-    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==,
+      }
+    engines: { node: ">=6" }
 
   environment@1.1.0:
-    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==,
+      }
+    engines: { node: ">=18" }
 
   error-ex@1.3.4:
-    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+    resolution:
+      {
+        integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==,
+      }
 
-  es-abstract@1.24.0:
-    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
-    engines: {node: '>= 0.4'}
+  es-abstract@1.24.1:
+    resolution:
+      {
+        integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==,
+      }
+    engines: { node: ">= 0.4" }
 
   es-define-property@1.0.1:
-    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==,
+      }
+    engines: { node: ">= 0.4" }
 
   es-errors@1.3.0:
-    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==,
+      }
+    engines: { node: ">= 0.4" }
 
-  es-iterator-helpers@1.2.1:
-    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
-    engines: {node: '>= 0.4'}
+  es-iterator-helpers@1.3.1:
+    resolution:
+      {
+        integrity: sha512-zWwRvqWiuBPr0muUG/78cW3aHROFCNIQ3zpmYDpwdbnt2m+xlNyRWpHBpa2lJjSBit7BQ+RXA1iwbSmu5yJ/EQ==,
+      }
+    engines: { node: ">= 0.4" }
 
-  es-module-lexer@1.7.0:
-    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+  es-module-lexer@2.0.0:
+    resolution:
+      {
+        integrity: sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==,
+      }
 
   es-object-atoms@1.1.1:
-    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==,
+      }
+    engines: { node: ">= 0.4" }
 
   es-set-tostringtag@2.1.0:
-    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==,
+      }
+    engines: { node: ">= 0.4" }
 
   es-shim-unscopables@1.1.0:
-    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==,
+      }
+    engines: { node: ">= 0.4" }
 
   es-to-primitive@1.3.0:
-    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==,
+      }
+    engines: { node: ">= 0.4" }
 
   esbuild-register@3.6.0:
-    resolution: {integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==}
+    resolution:
+      {
+        integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==,
+      }
     peerDependencies:
-      esbuild: '>=0.12 <1'
+      esbuild: ">=0.12 <1"
 
   esbuild@0.21.5:
-    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==,
+      }
+    engines: { node: ">=12" }
     hasBin: true
 
   esbuild@0.24.2:
-    resolution: {integrity: sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==,
+      }
+    engines: { node: ">=18" }
     hasBin: true
 
   esbuild@0.25.12:
-    resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==,
+      }
+    engines: { node: ">=18" }
     hasBin: true
 
   escalade@3.2.0:
-    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==,
+      }
+    engines: { node: ">=6" }
 
   escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==,
+      }
+    engines: { node: ">=10" }
 
   escodegen@2.1.0:
-    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
-    engines: {node: '>=6.0'}
+    resolution:
+      {
+        integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==,
+      }
+    engines: { node: ">=6.0" }
     hasBin: true
 
-  eslint-config-next@15.1.7:
-    resolution: {integrity: sha512-zXoMnYUIy3XHaAoOhrcYkT9UQWvXqWju2K7NNsmb5wd/7XESDwof61eUdW4QhERr3eJ9Ko/vnXqIrj8kk/drYw==}
+  eslint-config-next@15.3.8:
+    resolution:
+      {
+        integrity: sha512-s/imi0g/LQZsXif8RhlwhgryyqyMhEIMkUL0Yvj0l16ByEAqve4wodS8al+bt+utxf68fgfb1EXlOpuZKqOjlg==,
+      }
     peerDependencies:
       eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  eslint-config-next@15.4.0:
-    resolution: {integrity: sha512-OFkQ8br0wuZNRlXDyLpfaCwzW+qayzNaiHNcLHDMW874/1Nktb2+cCUMlItXdzDvNS/QY5jggKlYXEH2+vz1BA==}
-    peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
-      typescript: '>=3.3.1'
+      typescript: ">=3.3.1"
     peerDependenciesMeta:
       typescript:
         optional: true
 
   eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+    resolution:
+      {
+        integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==,
+      }
 
   eslint-import-resolver-typescript@3.10.1:
-    resolution: {integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+    resolution:
+      {
+        integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==,
+      }
+    engines: { node: ^14.18.0 || >=16.0.0 }
     peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-      eslint-plugin-import-x: '*'
+      eslint: "*"
+      eslint-plugin-import: "*"
+      eslint-plugin-import-x: "*"
     peerDependenciesMeta:
       eslint-plugin-import:
         optional: true
@@ -4963,16 +6981,19 @@ packages:
         optional: true
 
   eslint-module-utils@2.12.1:
-    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
-    engines: {node: '>=4'}
+    resolution:
+      {
+        integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==,
+      }
+    engines: { node: ">=4" }
     peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
+      "@typescript-eslint/parser": "*"
+      eslint: "*"
+      eslint-import-resolver-node: "*"
+      eslint-import-resolver-typescript: "*"
+      eslint-import-resolver-webpack: "*"
     peerDependenciesMeta:
-      '@typescript-eslint/parser':
+      "@typescript-eslint/parser":
         optional: true
       eslint:
         optional: true
@@ -4984,158 +7005,263 @@ packages:
         optional: true
 
   eslint-plugin-import@2.32.0:
-    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
-    engines: {node: '>=4'}
+    resolution:
+      {
+        integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==,
+      }
+    engines: { node: ">=4" }
     peerDependencies:
-      '@typescript-eslint/parser': '*'
+      "@typescript-eslint/parser": "*"
       eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
     peerDependenciesMeta:
-      '@typescript-eslint/parser':
+      "@typescript-eslint/parser":
         optional: true
 
   eslint-plugin-jsx-a11y@6.10.2:
-    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
-    engines: {node: '>=4.0'}
+    resolution:
+      {
+        integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==,
+      }
+    engines: { node: ">=4.0" }
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
 
   eslint-plugin-react-hooks@5.2.0:
-    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==,
+      }
+    engines: { node: ">=10" }
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
 
-  eslint-plugin-react-refresh@0.4.24:
-    resolution: {integrity: sha512-nLHIW7TEq3aLrEYWpVaJ1dRgFR+wLDPN8e8FpYAql/bMV2oBEfC37K0gLEGgv9fy66juNShSMV8OkTqzltcG/w==}
+  eslint-plugin-react-refresh@0.4.26:
+    resolution:
+      {
+        integrity: sha512-1RETEylht2O6FM/MvgnyvT+8K21wLqDNg4qD51Zj3guhjt433XbnnkVttHMyaVyAFD03QSV4LPS5iE3VQmO7XQ==,
+      }
     peerDependencies:
-      eslint: '>=8.40'
+      eslint: ">=8.40"
 
   eslint-plugin-react@7.37.5:
-    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
-    engines: {node: '>=4'}
+    resolution:
+      {
+        integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==,
+      }
+    engines: { node: ">=4" }
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
   eslint-plugin-simple-import-sort@12.1.1:
-    resolution: {integrity: sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==}
+    resolution:
+      {
+        integrity: sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==,
+      }
     peerDependencies:
-      eslint: '>=5.0.0'
+      eslint: ">=5.0.0"
 
   eslint-plugin-storybook@0.11.6:
-    resolution: {integrity: sha512-3WodYD6Bs9ACqnB+TP2TuLh774c/nacAjxSKOP9bHJ2c8rf+nrhocxjjeAWNmO9IPkFIzTKlcl0vNXI2yYpVOw==}
-    engines: {node: '>= 18'}
+    resolution:
+      {
+        integrity: sha512-3WodYD6Bs9ACqnB+TP2TuLh774c/nacAjxSKOP9bHJ2c8rf+nrhocxjjeAWNmO9IPkFIzTKlcl0vNXI2yYpVOw==,
+      }
+    engines: { node: ">= 18" }
     peerDependencies:
-      eslint: '>=8'
+      eslint: ">=8"
 
   eslint-scope@5.1.1:
-    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
-    engines: {node: '>=8.0.0'}
+    resolution:
+      {
+        integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==,
+      }
+    engines: { node: ">=8.0.0" }
 
   eslint-scope@8.4.0:
-    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    resolution:
+      {
+        integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
   eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    resolution:
+      {
+        integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==,
+      }
+    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
 
   eslint-visitor-keys@4.2.1:
-    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    resolution:
+      {
+        integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
   eslint-visitor-keys@5.0.1:
-    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    resolution:
+      {
+        integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==,
+      }
+    engines: { node: ^20.19.0 || ^22.13.0 || >=24 }
 
-  eslint@9.39.2:
-    resolution: {integrity: sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  eslint@9.39.4:
+    resolution:
+      {
+        integrity: sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     hasBin: true
     peerDependencies:
-      jiti: '*'
+      jiti: "*"
     peerDependenciesMeta:
       jiti:
         optional: true
 
   espree@10.4.0:
-    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    resolution:
+      {
+        integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
   esprima@4.0.1:
-    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
-    engines: {node: '>=4'}
+    resolution:
+      {
+        integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==,
+      }
+    engines: { node: ">=4" }
     hasBin: true
 
-  esquery@1.6.0:
-    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
-    engines: {node: '>=0.10'}
+  esquery@1.7.0:
+    resolution:
+      {
+        integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==,
+      }
+    engines: { node: ">=0.10" }
 
   esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
+    resolution:
+      {
+        integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==,
+      }
+    engines: { node: ">=4.0" }
 
   estraverse@4.3.0:
-    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
-    engines: {node: '>=4.0'}
+    resolution:
+      {
+        integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==,
+      }
+    engines: { node: ">=4.0" }
 
   estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
+    resolution:
+      {
+        integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==,
+      }
+    engines: { node: ">=4.0" }
 
   estree-walker@2.0.2:
-    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    resolution:
+      {
+        integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==,
+      }
 
   estree-walker@3.0.3:
-    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+    resolution:
+      {
+        integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==,
+      }
 
   esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==,
+      }
+    engines: { node: ">=0.10.0" }
 
   eventemitter3@4.0.7:
-    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+    resolution:
+      {
+        integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==,
+      }
 
   eventemitter3@5.0.4:
-    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+    resolution:
+      {
+        integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==,
+      }
 
   events@3.3.0:
-    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
-    engines: {node: '>=0.8.x'}
+    resolution:
+      {
+        integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==,
+      }
+    engines: { node: ">=0.8.x" }
 
   fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+    resolution:
+      {
+        integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==,
+      }
 
-  fast-equals@5.3.4:
-    resolution: {integrity: sha512-d+yU9iNQbbC098NOuMlAIth/g+owbpX/uuOkH/DQcC2fMMyjOlX292Op29DrUKq388m4UUyOdWakUH/msGypOg==}
-    engines: {node: '>=6.0.0'}
+  fast-equals@5.4.0:
+    resolution:
+      {
+        integrity: sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==,
+      }
+    engines: { node: ">=6.0.0" }
 
   fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
+    resolution:
+      {
+        integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==,
+      }
+    engines: { node: ">=8.6.0" }
 
   fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
-    engines: {node: '>=8.6.0'}
+    resolution:
+      {
+        integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==,
+      }
+    engines: { node: ">=8.6.0" }
 
   fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+    resolution:
+      {
+        integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==,
+      }
 
   fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    resolution:
+      {
+        integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==,
+      }
 
   fast-uri@3.1.0:
-    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+    resolution:
+      {
+        integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==,
+      }
 
   fastest-levenshtein@1.0.16:
-    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
-    engines: {node: '>= 4.9.1'}
+    resolution:
+      {
+        integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==,
+      }
+    engines: { node: ">= 4.9.1" }
 
-  fastq@1.19.1:
-    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+  fastq@1.20.1:
+    resolution:
+      {
+        integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==,
+      }
 
   fdir@6.5.0:
-    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
-    engines: {node: '>=12.0.0'}
+    resolution:
+      {
+        integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==,
+      }
+    engines: { node: ">=12.0.0" }
     peerDependencies:
       picomatch: ^3 || ^4
     peerDependenciesMeta:
@@ -5143,68 +7269,110 @@ packages:
         optional: true
 
   file-entry-cache@8.0.0:
-    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
-    engines: {node: '>=16.0.0'}
+    resolution:
+      {
+        integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==,
+      }
+    engines: { node: ">=16.0.0" }
 
   file-selector@2.1.2:
-    resolution: {integrity: sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==}
-    engines: {node: '>= 12'}
+    resolution:
+      {
+        integrity: sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==,
+      }
+    engines: { node: ">= 12" }
 
   fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==,
+      }
+    engines: { node: ">=8" }
 
   find-up@4.1.0:
-    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==,
+      }
+    engines: { node: ">=8" }
 
   find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==,
+      }
+    engines: { node: ">=10" }
 
   flat-cache@4.0.1:
-    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
-    engines: {node: '>=16'}
+    resolution:
+      {
+        integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==,
+      }
+    engines: { node: ">=16" }
 
-  flatted@3.3.3:
-    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+  flatted@3.4.2:
+    resolution:
+      {
+        integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==,
+      }
 
   follow-redirects@1.15.11:
-    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
-    engines: {node: '>=4.0'}
+    resolution:
+      {
+        integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==,
+      }
+    engines: { node: ">=4.0" }
     peerDependencies:
-      debug: '*'
+      debug: "*"
     peerDependenciesMeta:
       debug:
         optional: true
 
   for-each@0.3.5:
-    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==,
+      }
+    engines: { node: ">= 0.4" }
 
   foreground-child@3.3.1:
-    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
-    engines: {node: '>=14'}
+    resolution:
+      {
+        integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==,
+      }
+    engines: { node: ">=14" }
 
   form-data@4.0.5:
-    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
-    engines: {node: '>= 6'}
+    resolution:
+      {
+        integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==,
+      }
+    engines: { node: ">= 6" }
 
   frac@1.1.2:
-    resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
-    engines: {node: '>=0.8'}
+    resolution:
+      {
+        integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==,
+      }
+    engines: { node: ">=0.8" }
 
   fraction.js@5.3.4:
-    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+    resolution:
+      {
+        integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==,
+      }
 
   framer-motion@11.18.2:
-    resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
+    resolution:
+      {
+        integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==,
+      }
     peerDependencies:
-      '@emotion/is-prop-valid': '*'
+      "@emotion/is-prop-valid": "*"
       react: ^19.2.1
       react-dom: ^19.2.1
     peerDependenciesMeta:
-      '@emotion/is-prop-valid':
+      "@emotion/is-prop-valid":
         optional: true
       react:
         optional: true
@@ -5212,1005 +7380,1742 @@ packages:
         optional: true
 
   fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    resolution:
+      {
+        integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==,
+      }
+    engines: { node: ^8.16.0 || ^10.6.0 || >=11.0.0 }
     os: [darwin]
 
   function-bind@1.1.2:
-    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+    resolution:
+      {
+        integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==,
+      }
 
   function.prototype.name@1.1.8:
-    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==,
+      }
+    engines: { node: ">= 0.4" }
 
   functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+    resolution:
+      {
+        integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==,
+      }
 
   generator-function@2.0.1:
-    resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==,
+      }
+    engines: { node: ">= 0.4" }
 
   gensync@1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
+    resolution:
+      {
+        integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==,
+      }
+    engines: { node: ">=6.9.0" }
 
   geotiff@2.1.3:
-    resolution: {integrity: sha512-PT6uoF5a1+kbC3tHmZSUsLHBp2QJlHasxxxxPW47QIY1VBKpFB+FcDvX+MxER6UzgLQZ0xDzJ9s48B9JbOCTqA==}
-    engines: {node: '>=10.19'}
+    resolution:
+      {
+        integrity: sha512-PT6uoF5a1+kbC3tHmZSUsLHBp2QJlHasxxxxPW47QIY1VBKpFB+FcDvX+MxER6UzgLQZ0xDzJ9s48B9JbOCTqA==,
+      }
+    engines: { node: ">=10.19" }
 
   get-amd-module-type@6.0.1:
-    resolution: {integrity: sha512-MtjsmYiCXcYDDrGqtNbeIYdAl85n+5mSv2r3FbzER/YV3ZILw4HNNIw34HuV5pyl0jzs6GFYU1VHVEefhgcNHQ==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-MtjsmYiCXcYDDrGqtNbeIYdAl85n+5mSv2r3FbzER/YV3ZILw4HNNIw34HuV5pyl0jzs6GFYU1VHVEefhgcNHQ==,
+      }
+    engines: { node: ">=18" }
 
   get-caller-file@2.0.5:
-    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
-    engines: {node: 6.* || 8.* || >= 10.*}
-
-  get-east-asian-width@1.4.0:
-    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==,
+      }
+    engines: { node: 6.* || 8.* || >= 10.* }
 
   get-east-asian-width@1.5.0:
-    resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==,
+      }
+    engines: { node: ">=18" }
 
   get-intrinsic@1.3.0:
-    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   get-nonce@1.0.1:
-    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==,
+      }
+    engines: { node: ">=6" }
 
   get-proto@1.0.1:
-    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==,
+      }
+    engines: { node: ">= 0.4" }
 
   get-symbol-description@1.1.0:
-    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==,
+      }
+    engines: { node: ">= 0.4" }
 
-  get-tsconfig@4.13.0:
-    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
+  get-tsconfig@4.13.7:
+    resolution:
+      {
+        integrity: sha512-7tN6rFgBlMgpBML5j8typ92BKFi2sFQvIdpAqLA2beia5avZDrMs0FLZiM5etShWq5irVyGcGMEA1jcDaK7A/Q==,
+      }
 
   glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
+    resolution:
+      {
+        integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==,
+      }
+    engines: { node: ">= 6" }
 
   glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
+    resolution:
+      {
+        integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==,
+      }
+    engines: { node: ">=10.13.0" }
 
   glob-to-regexp@0.4.1:
-    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
+    resolution:
+      {
+        integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==,
+      }
 
   glob@10.5.0:
-    resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
+    resolution:
+      {
+        integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==,
+      }
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   globals@14.0.0:
-    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==,
+      }
+    engines: { node: ">=18" }
 
   globals@15.15.0:
-    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==,
+      }
+    engines: { node: ">=18" }
 
   globalthis@1.0.4:
-    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   globby@14.1.0:
-    resolution: {integrity: sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==,
+      }
+    engines: { node: ">=18" }
 
   globrex@0.1.2:
-    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+    resolution:
+      {
+        integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==,
+      }
 
   gonzales-pe@4.3.0:
-    resolution: {integrity: sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==}
-    engines: {node: '>=0.6.0'}
+    resolution:
+      {
+        integrity: sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==,
+      }
+    engines: { node: ">=0.6.0" }
     hasBin: true
 
   goober@2.1.18:
-    resolution: {integrity: sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw==}
+    resolution:
+      {
+        integrity: sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw==,
+      }
     peerDependencies:
       csstype: ^3.0.10
 
   gopd@1.2.0:
-    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==,
+      }
+    engines: { node: ">= 0.4" }
 
   graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+    resolution:
+      {
+        integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==,
+      }
 
   hammerjs@2.0.8:
-    resolution: {integrity: sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==}
-    engines: {node: '>=0.8.0'}
+    resolution:
+      {
+        integrity: sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==,
+      }
+    engines: { node: ">=0.8.0" }
 
   has-bigints@1.1.0:
-    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==,
+      }
+    engines: { node: ">= 0.4" }
 
   has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==,
+      }
+    engines: { node: ">=8" }
 
   has-property-descriptors@1.0.2:
-    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+    resolution:
+      {
+        integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==,
+      }
 
   has-proto@1.2.0:
-    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   has-symbols@1.1.0:
-    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   has-tostringtag@1.0.2:
-    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==,
+      }
+    engines: { node: ">= 0.4" }
 
   hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   hoist-non-react-statics@3.3.2:
-    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+    resolution:
+      {
+        integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==,
+      }
 
   html-parse-stringify@3.0.1:
-    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
+    resolution:
+      {
+        integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==,
+      }
 
   html2canvas@1.4.1:
-    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
-    engines: {node: '>=8.0.0'}
+    resolution:
+      {
+        integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==,
+      }
+    engines: { node: ">=8.0.0" }
 
   husky@9.1.7:
-    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==,
+      }
+    engines: { node: ">=18" }
     hasBin: true
 
-  i18next@25.7.2:
-    resolution: {integrity: sha512-58b4kmLpLv1buWUEwegMDUqZVR5J+rT+WTRFaBGL7lxDuJQQ0NrJFrq+eT2N94aYVR1k1Sr13QITNOL88tZCuw==}
+  i18next@25.10.9:
+    resolution:
+      {
+        integrity: sha512-hQY9/bFoQKGlSKMlaCuLR8w1h5JjieqrsnZvEmj1Ja6Ec7fbyc4cTrCsY9mb9Sd8YQ/swsrKz1S9M8AcvVI70w==,
+      }
     peerDependencies:
-      typescript: ^5
+      typescript: ^5 || ^6
     peerDependenciesMeta:
       typescript:
         optional: true
 
   ieee754@1.2.1:
-    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+    resolution:
+      {
+        integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==,
+      }
 
   ignore@5.3.2:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
-    engines: {node: '>= 4'}
+    resolution:
+      {
+        integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==,
+      }
+    engines: { node: ">= 4" }
 
   ignore@7.0.5:
-    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
-    engines: {node: '>= 4'}
+    resolution:
+      {
+        integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==,
+      }
+    engines: { node: ">= 4" }
 
   immediate@3.0.6:
-    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+    resolution:
+      {
+        integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==,
+      }
 
   immer@10.2.0:
-    resolution: {integrity: sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==}
+    resolution:
+      {
+        integrity: sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==,
+      }
 
   import-fresh@3.3.1:
-    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==,
+      }
+    engines: { node: ">=6" }
 
   imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
+    resolution:
+      {
+        integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==,
+      }
+    engines: { node: ">=0.8.19" }
 
   indent-string@4.0.0:
-    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==,
+      }
+    engines: { node: ">=8" }
 
   inherits@2.0.3:
-    resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
+    resolution:
+      {
+        integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==,
+      }
 
   inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    resolution:
+      {
+        integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==,
+      }
 
   internal-slot@1.1.0:
-    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==,
+      }
+    engines: { node: ">= 0.4" }
 
   internmap@2.0.3:
-    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==,
+      }
+    engines: { node: ">=12" }
 
   is-arguments@1.2.0:
-    resolution: {integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-array-buffer@3.0.5:
-    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-arrayish@0.2.1:
-    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+    resolution:
+      {
+        integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==,
+      }
 
   is-async-function@2.1.1:
-    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-bigint@1.1.0:
-    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==,
+      }
+    engines: { node: ">=8" }
 
   is-boolean-object@1.2.2:
-    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-bun-module@2.0.0:
-    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
+    resolution:
+      {
+        integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==,
+      }
 
   is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-data-view@1.0.2:
-    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-date-object@1.1.0:
-    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-docker@2.2.1:
-    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==,
+      }
+    engines: { node: ">=8" }
     hasBin: true
 
   is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==,
+      }
+    engines: { node: ">=0.10.0" }
 
   is-finalizationregistry@1.1.1:
-    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==,
+      }
+    engines: { node: ">=8" }
 
   is-fullwidth-code-point@5.1.0:
-    resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==,
+      }
+    engines: { node: ">=18" }
 
   is-generator-function@1.1.2:
-    resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==,
+      }
+    engines: { node: ">=0.10.0" }
 
   is-map@2.0.3:
-    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-negative-zero@2.0.3:
-    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-number-object@1.1.1:
-    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
+    resolution:
+      {
+        integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==,
+      }
+    engines: { node: ">=0.12.0" }
 
   is-promise@4.0.0:
-    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+    resolution:
+      {
+        integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==,
+      }
 
   is-regex@1.2.1:
-    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-set@2.0.3:
-    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-shared-array-buffer@1.0.4:
-    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-stream@2.0.1:
-    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==,
+      }
+    engines: { node: ">=8" }
 
   is-string@1.1.1:
-    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-symbol@1.1.1:
-    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-typed-array@1.1.15:
-    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-url-superb@4.0.0:
-    resolution: {integrity: sha512-GI+WjezhPPcbM+tqE9LnmsY5qqjwHzTvjJ36wxYX5ujNXefSUJ/T17r5bqDV8yLhcgB59KTPNOc9O9cmHTPWsA==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-GI+WjezhPPcbM+tqE9LnmsY5qqjwHzTvjJ36wxYX5ujNXefSUJ/T17r5bqDV8yLhcgB59KTPNOc9O9cmHTPWsA==,
+      }
+    engines: { node: ">=10" }
 
   is-url@1.2.4:
-    resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
+    resolution:
+      {
+        integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==,
+      }
 
   is-weakmap@2.0.2:
-    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-weakref@1.1.1:
-    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-weakset@2.0.4:
-    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   is-wsl@2.2.0:
-    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==,
+      }
+    engines: { node: ">=8" }
 
   isarray@1.0.0:
-    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+    resolution:
+      {
+        integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==,
+      }
 
   isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+    resolution:
+      {
+        integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==,
+      }
 
   isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    resolution:
+      {
+        integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==,
+      }
 
   iterator.prototype@1.1.5:
-    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==,
+      }
+    engines: { node: ">= 0.4" }
 
   jackspeak@3.4.3:
-    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+    resolution:
+      {
+        integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==,
+      }
 
   jest-worker@27.5.1:
-    resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
-    engines: {node: '>= 10.13.0'}
+    resolution:
+      {
+        integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==,
+      }
+    engines: { node: ">= 10.13.0" }
 
   jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    resolution:
+      {
+        integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==,
+      }
     hasBin: true
 
   jiti@2.6.1:
-    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    resolution:
+      {
+        integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==,
+      }
     hasBin: true
 
   joycon@3.1.1:
-    resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==,
+      }
+    engines: { node: ">=10" }
 
   js-base64@3.7.8:
-    resolution: {integrity: sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==}
+    resolution:
+      {
+        integrity: sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==,
+      }
 
   js-cookie@3.0.5:
-    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
-    engines: {node: '>=14'}
+    resolution:
+      {
+        integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==,
+      }
+    engines: { node: ">=14" }
 
   js-sha512@0.9.0:
-    resolution: {integrity: sha512-mirki9WS/SUahm+1TbAPkqvbCiCfOAAsyXeHxK1UkullnJVVqoJG2pL9ObvT05CN+tM7fxhfYm0NbXn+1hWoZg==}
+    resolution:
+      {
+        integrity: sha512-mirki9WS/SUahm+1TbAPkqvbCiCfOAAsyXeHxK1UkullnJVVqoJG2pL9ObvT05CN+tM7fxhfYm0NbXn+1hWoZg==,
+      }
 
   js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    resolution:
+      {
+        integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==,
+      }
 
   js-yaml@4.1.1:
-    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    resolution:
+      {
+        integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==,
+      }
     hasBin: true
 
   jsdoc-type-pratt-parser@4.8.0:
-    resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
-    engines: {node: '>=12.0.0'}
+    resolution:
+      {
+        integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==,
+      }
+    engines: { node: ">=12.0.0" }
 
   jsesc@3.1.0:
-    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==,
+      }
+    engines: { node: ">=6" }
     hasBin: true
 
   json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    resolution:
+      {
+        integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==,
+      }
 
   json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+    resolution:
+      {
+        integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==,
+      }
 
   json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    resolution:
+      {
+        integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==,
+      }
 
   json-schema-traverse@1.0.0:
-    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+    resolution:
+      {
+        integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==,
+      }
 
   json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+    resolution:
+      {
+        integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==,
+      }
 
   json-stringify-pretty-compact@2.0.0:
-    resolution: {integrity: sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==}
+    resolution:
+      {
+        integrity: sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==,
+      }
 
   json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    resolution:
+      {
+        integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==,
+      }
     hasBin: true
 
   json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==,
+      }
+    engines: { node: ">=6" }
     hasBin: true
 
   jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
+    resolution:
+      {
+        integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==,
+      }
+    engines: { node: ">=4.0" }
 
   jszip@3.10.1:
-    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
+    resolution:
+      {
+        integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==,
+      }
 
   keyv@4.5.4:
-    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+    resolution:
+      {
+        integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==,
+      }
 
   language-subtag-registry@0.3.23:
-    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
+    resolution:
+      {
+        integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==,
+      }
 
   language-tags@1.0.9:
-    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
-    engines: {node: '>=0.10'}
+    resolution:
+      {
+        integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==,
+      }
+    engines: { node: ">=0.10" }
 
   lerc@3.0.0:
-    resolution: {integrity: sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==}
+    resolution:
+      {
+        integrity: sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==,
+      }
 
   levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
+    resolution:
+      {
+        integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==,
+      }
+    engines: { node: ">= 0.8.0" }
 
-  libphonenumber-js@1.12.31:
-    resolution: {integrity: sha512-Z3IhgVgrqO1S5xPYM3K5XwbkDasU67/Vys4heW+lfSBALcUZjeIIzI8zCLifY+OCzSq+fpDdywMDa7z+4srJPQ==}
+  libphonenumber-js@1.12.40:
+    resolution:
+      {
+        integrity: sha512-HKGs7GowShNls3Zh+7DTr6wYpPk5jC78l508yQQY3e8ZgJChM3A9JZghmMJZuK+5bogSfuTafpjksGSR3aMIEg==,
+      }
 
   lie@3.3.0:
-    resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
+    resolution:
+      {
+        integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==,
+      }
 
-  lightningcss-android-arm64@1.30.2:
-    resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss-android-arm64@1.32.0:
+    resolution:
+      {
+        integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==,
+      }
+    engines: { node: ">= 12.0.0" }
     cpu: [arm64]
     os: [android]
 
-  lightningcss-darwin-arm64@1.30.2:
-    resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss-darwin-arm64@1.32.0:
+    resolution:
+      {
+        integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==,
+      }
+    engines: { node: ">= 12.0.0" }
     cpu: [arm64]
     os: [darwin]
 
-  lightningcss-darwin-x64@1.30.2:
-    resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss-darwin-x64@1.32.0:
+    resolution:
+      {
+        integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==,
+      }
+    engines: { node: ">= 12.0.0" }
     cpu: [x64]
     os: [darwin]
 
-  lightningcss-freebsd-x64@1.30.2:
-    resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss-freebsd-x64@1.32.0:
+    resolution:
+      {
+        integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==,
+      }
+    engines: { node: ">= 12.0.0" }
     cpu: [x64]
     os: [freebsd]
 
-  lightningcss-linux-arm-gnueabihf@1.30.2:
-    resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution:
+      {
+        integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==,
+      }
+    engines: { node: ">= 12.0.0" }
     cpu: [arm]
     os: [linux]
 
-  lightningcss-linux-arm64-gnu@1.30.2:
-    resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution:
+      {
+        integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==,
+      }
+    engines: { node: ">= 12.0.0" }
     cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-arm64-musl@1.30.2:
-    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution:
+      {
+        integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==,
+      }
+    engines: { node: ">= 12.0.0" }
     cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-x64-gnu@1.30.2:
-    resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution:
+      {
+        integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==,
+      }
+    engines: { node: ">= 12.0.0" }
     cpu: [x64]
     os: [linux]
 
-  lightningcss-linux-x64-musl@1.30.2:
-    resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution:
+      {
+        integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==,
+      }
+    engines: { node: ">= 12.0.0" }
     cpu: [x64]
     os: [linux]
 
-  lightningcss-win32-arm64-msvc@1.30.2:
-    resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution:
+      {
+        integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==,
+      }
+    engines: { node: ">= 12.0.0" }
     cpu: [arm64]
     os: [win32]
 
-  lightningcss-win32-x64-msvc@1.30.2:
-    resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution:
+      {
+        integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==,
+      }
+    engines: { node: ">= 12.0.0" }
     cpu: [x64]
     os: [win32]
 
-  lightningcss@1.30.2:
-    resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss@1.32.0:
+    resolution:
+      {
+        integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==,
+      }
+    engines: { node: ">= 12.0.0" }
 
   lilconfig@3.1.3:
-    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
-    engines: {node: '>=14'}
+    resolution:
+      {
+        integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==,
+      }
+    engines: { node: ">=14" }
 
   lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+    resolution:
+      {
+        integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==,
+      }
 
-  lint-staged@16.2.7:
-    resolution: {integrity: sha512-lDIj4RnYmK7/kXMya+qJsmkRFkGolciXjrsZ6PC25GdTfWOAWetR0ZbsNXRAj1EHHImRSalc+whZFg56F5DVow==}
-    engines: {node: '>=20.17'}
+  lint-staged@16.4.0:
+    resolution:
+      {
+        integrity: sha512-lBWt8hujh/Cjysw5GYVmZpFHXDCgZzhrOm8vbcUdobADZNOK/bRshr2kM3DfgrrtR1DQhfupW9gnIXOfiFi+bw==,
+      }
+    engines: { node: ">=20.17" }
     hasBin: true
 
   listr2@9.0.5:
-    resolution: {integrity: sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==}
-    engines: {node: '>=20.0.0'}
+    resolution:
+      {
+        integrity: sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==,
+      }
+    engines: { node: ">=20.0.0" }
 
   load-tsconfig@0.2.5:
-    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    resolution:
+      {
+        integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==,
+      }
+    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
 
   loader-runner@4.3.1:
-    resolution: {integrity: sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==}
-    engines: {node: '>=6.11.5'}
+    resolution:
+      {
+        integrity: sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==,
+      }
+    engines: { node: ">=6.11.5" }
 
   locate-path@5.0.0:
-    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==,
+      }
+    engines: { node: ">=8" }
 
   locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==,
+      }
+    engines: { node: ">=10" }
 
-  lodash-es@4.17.21:
-    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+  lodash-es@4.17.23:
+    resolution:
+      {
+        integrity: sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==,
+      }
 
   lodash._baseiteratee@4.7.0:
-    resolution: {integrity: sha512-nqB9M+wITz0BX/Q2xg6fQ8mLkyfF7MU7eE+MNBNjTHFKeKaZAPEzEg+E8LWxKWf1DQVflNEn9N49yAuqKh2mWQ==}
+    resolution:
+      {
+        integrity: sha512-nqB9M+wITz0BX/Q2xg6fQ8mLkyfF7MU7eE+MNBNjTHFKeKaZAPEzEg+E8LWxKWf1DQVflNEn9N49yAuqKh2mWQ==,
+      }
 
   lodash._basetostring@4.12.0:
-    resolution: {integrity: sha512-SwcRIbyxnN6CFEEK4K1y+zuApvWdpQdBHM/swxP962s8HIxPO3alBH5t3m/dl+f4CMUug6sJb7Pww8d13/9WSw==}
+    resolution:
+      {
+        integrity: sha512-SwcRIbyxnN6CFEEK4K1y+zuApvWdpQdBHM/swxP962s8HIxPO3alBH5t3m/dl+f4CMUug6sJb7Pww8d13/9WSw==,
+      }
 
   lodash._baseuniq@4.6.0:
-    resolution: {integrity: sha512-Ja1YevpHZctlI5beLA7oc5KNDhGcPixFhcqSiORHNsp/1QTv7amAXzw+gu4YOvErqVlMVyIJGgtzeepCnnur0A==}
+    resolution:
+      {
+        integrity: sha512-Ja1YevpHZctlI5beLA7oc5KNDhGcPixFhcqSiORHNsp/1QTv7amAXzw+gu4YOvErqVlMVyIJGgtzeepCnnur0A==,
+      }
 
   lodash._createset@4.0.3:
-    resolution: {integrity: sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA==}
+    resolution:
+      {
+        integrity: sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA==,
+      }
 
   lodash._root@3.0.1:
-    resolution: {integrity: sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ==}
+    resolution:
+      {
+        integrity: sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ==,
+      }
 
   lodash._stringtopath@4.8.0:
-    resolution: {integrity: sha512-SXL66C731p0xPDC5LZg4wI5H+dJo/EO4KTqOMwLYCH3+FmmfAKJEZCm6ohGpI+T1xwsDsJCfL4OnhorllvlTPQ==}
+    resolution:
+      {
+        integrity: sha512-SXL66C731p0xPDC5LZg4wI5H+dJo/EO4KTqOMwLYCH3+FmmfAKJEZCm6ohGpI+T1xwsDsJCfL4OnhorllvlTPQ==,
+      }
 
   lodash.add@3.7.0:
-    resolution: {integrity: sha512-/uxUZkB6vYiPoGSXADJJE+Ee4W2vU+bxZOFdvJdx+mDgv+qyAO76sWD84Q4FxsMgTjC1+gVFC9YNhdG243QRDw==}
+    resolution:
+      {
+        integrity: sha512-/uxUZkB6vYiPoGSXADJJE+Ee4W2vU+bxZOFdvJdx+mDgv+qyAO76sWD84Q4FxsMgTjC1+gVFC9YNhdG243QRDw==,
+      }
 
   lodash.clonedeep@4.5.0:
-    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
+    resolution:
+      {
+        integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==,
+      }
 
   lodash.isequal@4.5.0:
-    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    resolution:
+      {
+        integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==,
+      }
     deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
 
   lodash.isfunction@3.0.9:
-    resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
+    resolution:
+      {
+        integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==,
+      }
 
   lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    resolution:
+      {
+        integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==,
+      }
 
   lodash.size@4.2.0:
-    resolution: {integrity: sha512-wbu3SF1XC5ijqm0piNxw59yCbuUf2kaShumYBLWUrcCvwh6C8odz6SY/wGVzCWTQTFL/1Ygbvqg2eLtspUVVAQ==}
+    resolution:
+      {
+        integrity: sha512-wbu3SF1XC5ijqm0piNxw59yCbuUf2kaShumYBLWUrcCvwh6C8odz6SY/wGVzCWTQTFL/1Ygbvqg2eLtspUVVAQ==,
+      }
 
   lodash.throttle@4.1.1:
-    resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
+    resolution:
+      {
+        integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==,
+      }
 
   lodash.uniqby@4.5.0:
-    resolution: {integrity: sha512-IRt7cfTtHy6f1aRVA5n7kT8rgN3N1nH6MOWLcHfpWG2SH19E3JksLK38MktLxZDhlAjCP9jpIXkOnRXlu6oByQ==}
+    resolution:
+      {
+        integrity: sha512-IRt7cfTtHy6f1aRVA5n7kT8rgN3N1nH6MOWLcHfpWG2SH19E3JksLK38MktLxZDhlAjCP9jpIXkOnRXlu6oByQ==,
+      }
 
-  lodash@4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+  lodash@4.17.23:
+    resolution:
+      {
+        integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==,
+      }
 
   log-update@6.1.0:
-    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==,
+      }
+    engines: { node: ">=18" }
 
   loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    resolution:
+      {
+        integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==,
+      }
     hasBin: true
 
   loupe@3.2.1:
-    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+    resolution:
+      {
+        integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==,
+      }
 
   lru-cache@10.4.3:
-    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+    resolution:
+      {
+        integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==,
+      }
 
   lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+    resolution:
+      {
+        integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==,
+      }
 
   lucide-react@0.474.0:
-    resolution: {integrity: sha512-CmghgHkh0OJNmxGKWc0qfPJCYHASPMVSyGY8fj3xgk4v84ItqDg64JNKFZn5hC6E0vHi6gxnbCgwhyVB09wQtA==}
+    resolution:
+      {
+        integrity: sha512-CmghgHkh0OJNmxGKWc0qfPJCYHASPMVSyGY8fj3xgk4v84ItqDg64JNKFZn5hC6E0vHi6gxnbCgwhyVB09wQtA==,
+      }
     peerDependencies:
       react: ^19.2.1
 
   lz-string@1.5.0:
-    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    resolution:
+      {
+        integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==,
+      }
     hasBin: true
 
   magic-string@0.27.0:
-    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==,
+      }
+    engines: { node: ">=12" }
 
   magic-string@0.30.21:
-    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+    resolution:
+      {
+        integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==,
+      }
 
   map-or-similar@1.5.0:
-    resolution: {integrity: sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==}
+    resolution:
+      {
+        integrity: sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==,
+      }
 
   mapbox-to-css-font@2.4.5:
-    resolution: {integrity: sha512-VJ6nB8emkO9VODI0Fk+TQ/0zKBTqmf/Pkt8Xv0kHstoc0iXRajA00DAid4Kc3K5xeFIOoiZrVxijEzj0GLVO2w==}
+    resolution:
+      {
+        integrity: sha512-VJ6nB8emkO9VODI0Fk+TQ/0zKBTqmf/Pkt8Xv0kHstoc0iXRajA00DAid4Kc3K5xeFIOoiZrVxijEzj0GLVO2w==,
+      }
 
   math-intrinsics@1.1.0:
-    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==,
+      }
+    engines: { node: ">= 0.4" }
 
   memoizerific@1.11.3:
-    resolution: {integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==}
+    resolution:
+      {
+        integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==,
+      }
 
   merge-stream@2.0.0:
-    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+    resolution:
+      {
+        integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==,
+      }
 
   merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
+    resolution:
+      {
+        integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==,
+      }
+    engines: { node: ">= 8" }
 
   mgrs@1.0.0:
-    resolution: {integrity: sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==}
+    resolution:
+      {
+        integrity: sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==,
+      }
 
   micromatch@4.0.8:
-    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
-    engines: {node: '>=8.6'}
+    resolution:
+      {
+        integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==,
+      }
+    engines: { node: ">=8.6" }
 
   mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
+    resolution:
+      {
+        integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==,
+      }
+    engines: { node: ">= 0.6" }
 
   mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
+    resolution:
+      {
+        integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==,
+      }
+    engines: { node: ">= 0.6" }
 
   mimic-function@5.0.1:
-    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==,
+      }
+    engines: { node: ">=18" }
 
   min-indent@1.0.1:
-    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
-    engines: {node: '>=4'}
+    resolution:
+      {
+        integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==,
+      }
+    engines: { node: ">=4" }
 
   minimatch@10.2.4:
-    resolution: {integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==}
-    engines: {node: 18 || 20 || >=22}
+    resolution:
+      {
+        integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==,
+      }
+    engines: { node: 18 || 20 || >=22 }
 
-  minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+  minimatch@3.1.5:
+    resolution:
+      {
+        integrity: sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==,
+      }
 
-  minimatch@9.0.5:
-    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  minimatch@9.0.9:
+    resolution:
+      {
+        integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==,
+      }
+    engines: { node: ">=16 || 14 >=14.17" }
 
   minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+    resolution:
+      {
+        integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==,
+      }
 
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  minipass@7.1.3:
+    resolution:
+      {
+        integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==,
+      }
+    engines: { node: ">=16 || 14 >=14.17" }
 
   module-definition@6.0.1:
-    resolution: {integrity: sha512-FeVc50FTfVVQnolk/WQT8MX+2WVcDnTGiq6Wo+/+lJ2ET1bRVi3HG3YlJUfqagNMc/kUlFSoR96AJkxGpKz13g==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-FeVc50FTfVVQnolk/WQT8MX+2WVcDnTGiq6Wo+/+lJ2ET1bRVi3HG3YlJUfqagNMc/kUlFSoR96AJkxGpKz13g==,
+      }
+    engines: { node: ">=18" }
     hasBin: true
 
   moment@2.30.1:
-    resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
+    resolution:
+      {
+        integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==,
+      }
 
   motion-dom@11.18.1:
-    resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
+    resolution:
+      {
+        integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==,
+      }
 
   motion-utils@11.18.1:
-    resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
+    resolution:
+      {
+        integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==,
+      }
 
   ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+    resolution:
+      {
+        integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==,
+      }
 
   mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
-  nano-spawn@2.0.0:
-    resolution: {integrity: sha512-tacvGzUY5o2D8CBh2rrwxyNojUsZNU2zjNTzKQrkgGJQTbGAfArVWXSKMBokBeeg6C7OLRGUEyoFlYbfeWQIqw==}
-    engines: {node: '>=20.17'}
+    resolution:
+      {
+        integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==,
+      }
 
   nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    resolution:
+      {
+        integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==,
+      }
+    engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 }
     hasBin: true
 
   napi-postinstall@0.3.4:
-    resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    resolution:
+      {
+        integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==,
+      }
+    engines: { node: ^12.20.0 || ^14.18.0 || >=16.0.0 }
     hasBin: true
 
   natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+    resolution:
+      {
+        integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==,
+      }
 
   neo-async@2.6.2:
-    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+    resolution:
+      {
+        integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==,
+      }
 
   next-qrcode@2.5.1:
-    resolution: {integrity: sha512-ibiS1+p+myjurC1obVIgo7UCjFhxm0SNYTkikahQVmnyzlfREOdUCf2f77Vbz6W6q2zfx5Eww2/20vbgkLNdLw==}
-    engines: {node: '>=8', npm: '>=5'}
+    resolution:
+      {
+        integrity: sha512-ibiS1+p+myjurC1obVIgo7UCjFhxm0SNYTkikahQVmnyzlfREOdUCf2f77Vbz6W6q2zfx5Eww2/20vbgkLNdLw==,
+      }
+    engines: { node: ">=8", npm: ">=5" }
     peerDependencies:
       react: ^19.2.1
 
   next-themes@0.4.6:
-    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    resolution:
+      {
+        integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
 
-  next@15.3.8:
-    resolution: {integrity: sha512-L+4c5Hlr84fuaNADZbB9+ceRX9/CzwxJ+obXIGHupboB/Q1OLbSUapFs4bO8hnS/E6zV/JDX7sG1QpKVR2bguA==}
-    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+  next@15.5.18:
+    resolution:
+      {
+        integrity: sha512-eKL8zUJkX9Y5lE+RX/2YJoItVdGlIscyVyboeD9wSpp0PaGqjoA4tTpT2qPqz9ax+5IzGESyLSeZ/RCwbSZ2uQ==,
+      }
+    engines: { node: ^18.18.0 || ^19.8.0 || >= 20.0.0 }
     hasBin: true
     peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      '@playwright/test': ^1.41.2
-      babel-plugin-react-compiler: '*'
+      "@opentelemetry/api": ^1.1.0
+      "@playwright/test": ^1.51.1
+      babel-plugin-react-compiler: "*"
       react: ^19.2.1
       react-dom: ^19.2.1
       sass: ^1.3.0
     peerDependenciesMeta:
-      '@opentelemetry/api':
+      "@opentelemetry/api":
         optional: true
-      '@playwright/test':
+      "@playwright/test":
         optional: true
       babel-plugin-react-compiler:
         optional: true
       sass:
         optional: true
 
-  node-releases@2.0.27:
-    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+  node-exports-info@1.6.0:
+    resolution:
+      {
+        integrity: sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==,
+      }
+    engines: { node: ">= 0.4" }
+
+  node-releases@2.0.36:
+    resolution:
+      {
+        integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==,
+      }
 
   node-source-walk@7.0.1:
-    resolution: {integrity: sha512-3VW/8JpPqPvnJvseXowjZcirPisssnBuDikk6JIZ8jQzF7KJQX52iPFX4RYYxLycYH7IbMRSPUOga/esVjy5Yg==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-3VW/8JpPqPvnJvseXowjZcirPisssnBuDikk6JIZ8jQzF7KJQX52iPFX4RYYxLycYH7IbMRSPUOga/esVjy5Yg==,
+      }
+    engines: { node: ">=18" }
 
   normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-
-  normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==,
+      }
+    engines: { node: ">=0.10.0" }
 
   object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==,
+      }
+    engines: { node: ">=0.10.0" }
 
   object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
+    resolution:
+      {
+        integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==,
+      }
+    engines: { node: ">= 6" }
 
   object-inspect@1.13.4:
-    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==,
+      }
+    engines: { node: ">= 0.4" }
 
   object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==,
+      }
+    engines: { node: ">= 0.4" }
 
   object.assign@4.1.7:
-    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==,
+      }
+    engines: { node: ">= 0.4" }
 
   object.entries@1.1.9:
-    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==,
+      }
+    engines: { node: ">= 0.4" }
 
   object.fromentries@2.0.8:
-    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   object.groupby@1.0.3:
-    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   object.values@1.2.1:
-    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==,
+      }
+    engines: { node: ">= 0.4" }
 
-  ol-ext@4.0.37:
-    resolution: {integrity: sha512-RxzdgMWnNBDP9VZCza3oS3rl1+OCl+1SJLMjt7ATyDDLZl/zzrsQELfJ25WAL6HIWgjkQ2vYDh3nnHFupxOH4w==}
+  ol-ext@4.0.38:
+    resolution:
+      {
+        integrity: sha512-fJmMcUYV8tfNhaHTl93eV1esBo1L8QHdOjJsBzapomgpmXiW7PGv91i6tmvXU4mL2z0gFrupuzs8BMLGi6T0QQ==,
+      }
     peerDependencies:
-      ol: '>= 5.3.0'
+      ol: ">= 5.3.0"
 
   ol-mapbox-style@10.7.0:
-    resolution: {integrity: sha512-S/UdYBuOjrotcR95Iq9AejGYbifKeZE85D9VtH11ryJLQPTZXZSW1J5bIXcr4AlAH6tyjPPHTK34AdkwB32Myw==}
+    resolution:
+      {
+        integrity: sha512-S/UdYBuOjrotcR95Iq9AejGYbifKeZE85D9VtH11ryJLQPTZXZSW1J5bIXcr4AlAH6tyjPPHTK34AdkwB32Myw==,
+      }
 
   ol@7.5.2:
-    resolution: {integrity: sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==}
+    resolution:
+      {
+        integrity: sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==,
+      }
 
   onetime@7.0.0:
-    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==,
+      }
+    engines: { node: ">=18" }
 
   open@8.4.2:
-    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==,
+      }
+    engines: { node: ">=12" }
 
   optionator@0.9.4:
-    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
-    engines: {node: '>= 0.8.0'}
+    resolution:
+      {
+        integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==,
+      }
+    engines: { node: ">= 0.8.0" }
 
   own-keys@1.0.1:
-    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==,
+      }
+    engines: { node: ">= 0.4" }
 
   p-limit@2.3.0:
-    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==,
+      }
+    engines: { node: ">=6" }
 
   p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==,
+      }
+    engines: { node: ">=10" }
 
   p-locate@4.1.0:
-    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==,
+      }
+    engines: { node: ">=8" }
 
   p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==,
+      }
+    engines: { node: ">=10" }
 
   p-try@2.2.0:
-    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==,
+      }
+    engines: { node: ">=6" }
 
   package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+    resolution:
+      {
+        integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==,
+      }
 
   pako@1.0.11:
-    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
+    resolution:
+      {
+        integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==,
+      }
 
   pako@2.1.0:
-    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+    resolution:
+      {
+        integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==,
+      }
 
   parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==,
+      }
+    engines: { node: ">=6" }
 
   parse-headers@2.0.6:
-    resolution: {integrity: sha512-Tz11t3uKztEW5FEVZnj1ox8GKblWn+PvHY9TmJV5Mll2uHEwRdR/5Li1OlXoECjLYkApdhWy44ocONwXLiKO5A==}
+    resolution:
+      {
+        integrity: sha512-Tz11t3uKztEW5FEVZnj1ox8GKblWn+PvHY9TmJV5Mll2uHEwRdR/5Li1OlXoECjLYkApdhWy44ocONwXLiKO5A==,
+      }
 
   parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==,
+      }
+    engines: { node: ">=8" }
 
   path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==,
+      }
+    engines: { node: ">=8" }
 
   path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==,
+      }
+    engines: { node: ">=8" }
 
   path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    resolution:
+      {
+        integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==,
+      }
 
   path-scurry@1.11.1:
-    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
-    engines: {node: '>=16 || 14 >=14.18'}
+    resolution:
+      {
+        integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==,
+      }
+    engines: { node: ">=16 || 14 >=14.18" }
 
   path-type@6.0.0:
-    resolution: {integrity: sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==,
+      }
+    engines: { node: ">=18" }
 
   path@0.12.7:
-    resolution: {integrity: sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==}
+    resolution:
+      {
+        integrity: sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==,
+      }
 
   pathval@2.0.1:
-    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
-    engines: {node: '>= 14.16'}
+    resolution:
+      {
+        integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==,
+      }
+    engines: { node: ">= 14.16" }
 
   patronum@2.3.0:
-    resolution: {integrity: sha512-BfKIOpoymVz6XnkOn8Fi5QZ1a3r/3lXdd8BcdHmYDbIXPTIRnD1EPFBFev/DheWnOge6/ZswEqgNF2ANLGOxLw==}
+    resolution:
+      {
+        integrity: sha512-BfKIOpoymVz6XnkOn8Fi5QZ1a3r/3lXdd8BcdHmYDbIXPTIRnD1EPFBFev/DheWnOge6/ZswEqgNF2ANLGOxLw==,
+      }
     peerDependencies:
       effector: ^23
 
   pbf@3.2.1:
-    resolution: {integrity: sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==}
+    resolution:
+      {
+        integrity: sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==,
+      }
     hasBin: true
 
   picocolors@1.1.1:
-    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+    resolution:
+      {
+        integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==,
+      }
 
-  picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
+  picomatch@2.3.2:
+    resolution:
+      {
+        integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==,
+      }
+    engines: { node: ">=8.6" }
 
-  picomatch@4.0.3:
-    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
-    engines: {node: '>=12'}
-
-  pidtree@0.6.0:
-    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
-    engines: {node: '>=0.10'}
-    hasBin: true
+  picomatch@4.0.4:
+    resolution:
+      {
+        integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==,
+      }
+    engines: { node: ">=12" }
 
   pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==,
+      }
+    engines: { node: ">=0.10.0" }
 
   pirates@4.0.7:
-    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
-    engines: {node: '>= 6'}
+    resolution:
+      {
+        integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==,
+      }
+    engines: { node: ">= 6" }
 
   pluralize@8.0.0:
-    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
-    engines: {node: '>=4'}
+    resolution:
+      {
+        integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==,
+      }
+    engines: { node: ">=4" }
 
   pngjs@5.0.0:
-    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
-    engines: {node: '>=10.13.0'}
+    resolution:
+      {
+        integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==,
+      }
+    engines: { node: ">=10.13.0" }
 
   polished@4.3.1:
-    resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==,
+      }
+    engines: { node: ">=10" }
 
   possible-typed-array-names@1.1.0:
-    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==,
+      }
+    engines: { node: ">= 0.4" }
 
   postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
+    resolution:
+      {
+        integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==,
+      }
+    engines: { node: ">=14.0.0" }
     peerDependencies:
       postcss: ^8.0.0
 
   postcss-js@4.1.0:
-    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
-    engines: {node: ^12 || ^14 || >= 16}
+    resolution:
+      {
+        integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==,
+      }
+    engines: { node: ^12 || ^14 || >= 16 }
     peerDependencies:
       postcss: ^8.4.21
 
   postcss-load-config@6.0.1:
-    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
-    engines: {node: '>= 18'}
+    resolution:
+      {
+        integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==,
+      }
+    engines: { node: ">= 18" }
     peerDependencies:
-      jiti: '>=1.21.0'
-      postcss: '>=8.0.9'
+      jiti: ">=1.21.0"
+      postcss: ">=8.0.9"
       tsx: ^4.8.1
       yaml: ^2.4.2
     peerDependenciesMeta:
@@ -6224,81 +9129,111 @@ packages:
         optional: true
 
   postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
+    resolution:
+      {
+        integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==,
+      }
+    engines: { node: ">=12.0" }
     peerDependencies:
       postcss: ^8.2.14
 
   postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
+    resolution:
+      {
+        integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==,
+      }
+    engines: { node: ">=4" }
 
   postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    resolution:
+      {
+        integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==,
+      }
 
   postcss-values-parser@6.0.2:
-    resolution: {integrity: sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==,
+      }
+    engines: { node: ">=10" }
     peerDependencies:
       postcss: ^8.2.9
 
   postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
-    engines: {node: ^10 || ^12 || >=14}
+    resolution:
+      {
+        integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==,
+      }
+    engines: { node: ^10 || ^12 || >=14 }
 
-  postcss@8.5.6:
-    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
-    engines: {node: ^10 || ^12 || >=14}
+  postcss@8.5.8:
+    resolution:
+      {
+        integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==,
+      }
+    engines: { node: ^10 || ^12 || >=14 }
 
   preact@10.12.1:
-    resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
+    resolution:
+      {
+        integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==,
+      }
 
   precinct@12.2.0:
-    resolution: {integrity: sha512-NFBMuwIfaJ4SocE9YXPU/n4AcNSoFMVFjP72nvl3cx69j/ke61/hPOWFREVxLkFhhEGnA8ZuVfTqJBa+PK3b5w==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-NFBMuwIfaJ4SocE9YXPU/n4AcNSoFMVFjP72nvl3cx69j/ke61/hPOWFREVxLkFhhEGnA8ZuVfTqJBa+PK3b5w==,
+      }
+    engines: { node: ">=18" }
     hasBin: true
 
   prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
+    resolution:
+      {
+        integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==,
+      }
+    engines: { node: ">= 0.8.0" }
 
   prettier-plugin-tailwindcss@0.6.14:
-    resolution: {integrity: sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==}
-    engines: {node: '>=14.21.3'}
+    resolution:
+      {
+        integrity: sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==,
+      }
+    engines: { node: ">=14.21.3" }
     peerDependencies:
-      '@ianvs/prettier-plugin-sort-imports': '*'
-      '@prettier/plugin-hermes': '*'
-      '@prettier/plugin-oxc': '*'
-      '@prettier/plugin-pug': '*'
-      '@shopify/prettier-plugin-liquid': '*'
-      '@trivago/prettier-plugin-sort-imports': '*'
-      '@zackad/prettier-plugin-twig': '*'
+      "@ianvs/prettier-plugin-sort-imports": "*"
+      "@prettier/plugin-hermes": "*"
+      "@prettier/plugin-oxc": "*"
+      "@prettier/plugin-pug": "*"
+      "@shopify/prettier-plugin-liquid": "*"
+      "@trivago/prettier-plugin-sort-imports": "*"
+      "@zackad/prettier-plugin-twig": "*"
       prettier: ^3.0
-      prettier-plugin-astro: '*'
-      prettier-plugin-css-order: '*'
-      prettier-plugin-import-sort: '*'
-      prettier-plugin-jsdoc: '*'
-      prettier-plugin-marko: '*'
-      prettier-plugin-multiline-arrays: '*'
-      prettier-plugin-organize-attributes: '*'
-      prettier-plugin-organize-imports: '*'
-      prettier-plugin-sort-imports: '*'
-      prettier-plugin-style-order: '*'
-      prettier-plugin-svelte: '*'
+      prettier-plugin-astro: "*"
+      prettier-plugin-css-order: "*"
+      prettier-plugin-import-sort: "*"
+      prettier-plugin-jsdoc: "*"
+      prettier-plugin-marko: "*"
+      prettier-plugin-multiline-arrays: "*"
+      prettier-plugin-organize-attributes: "*"
+      prettier-plugin-organize-imports: "*"
+      prettier-plugin-sort-imports: "*"
+      prettier-plugin-style-order: "*"
+      prettier-plugin-svelte: "*"
     peerDependenciesMeta:
-      '@ianvs/prettier-plugin-sort-imports':
+      "@ianvs/prettier-plugin-sort-imports":
         optional: true
-      '@prettier/plugin-hermes':
+      "@prettier/plugin-hermes":
         optional: true
-      '@prettier/plugin-oxc':
+      "@prettier/plugin-oxc":
         optional: true
-      '@prettier/plugin-pug':
+      "@prettier/plugin-pug":
         optional: true
-      '@shopify/prettier-plugin-liquid':
+      "@shopify/prettier-plugin-liquid":
         optional: true
-      '@trivago/prettier-plugin-sort-imports':
+      "@trivago/prettier-plugin-sort-imports":
         optional: true
-      '@zackad/prettier-plugin-twig':
+      "@zackad/prettier-plugin-twig":
         optional: true
       prettier-plugin-astro:
         optional: true
@@ -6323,160 +9258,256 @@ packages:
       prettier-plugin-svelte:
         optional: true
 
-  prettier@3.7.4:
-    resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
-    engines: {node: '>=14'}
+  prettier@3.8.1:
+    resolution:
+      {
+        integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==,
+      }
+    engines: { node: ">=14" }
     hasBin: true
 
   pretty-format@27.5.1:
-    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    resolution:
+      {
+        integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==,
+      }
+    engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
 
   prexit@2.3.0:
-    resolution: {integrity: sha512-mX+LIbtS0anKtl2PykYabxninwloblUQMRO6CubeSmjxb+kKlATuJoH9UeN8NLE4TgIEFWfBXw7V3GkWbBrSmg==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-mX+LIbtS0anKtl2PykYabxninwloblUQMRO6CubeSmjxb+kKlATuJoH9UeN8NLE4TgIEFWfBXw7V3GkWbBrSmg==,
+      }
+    engines: { node: ">=12" }
 
   process-nextick-args@2.0.1:
-    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+    resolution:
+      {
+        integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==,
+      }
 
   process@0.11.10:
-    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
-    engines: {node: '>= 0.6.0'}
+    resolution:
+      {
+        integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==,
+      }
+    engines: { node: ">= 0.6.0" }
 
-  proj4@2.20.2:
-    resolution: {integrity: sha512-ipfBRfQly0HhHTO7hnC1GfaX8bvroO7VV4KH889ehmADSE8C/qzp2j+Jj6783S9Tj6c2qX/hhYm7oH0kgXzBAA==}
+  proj4@2.20.4:
+    resolution:
+      {
+        integrity: sha512-/EEBoXjBw+zW1Lofinw0YFQ4OFOqC6XThnwRAgjEHw8WBN+wSy/6aeqRRdjy4b2igy3X0k3RNDuwcYqcQq7nDw==,
+      }
 
   prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+    resolution:
+      {
+        integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==,
+      }
 
   proper-lockfile@4.1.2:
-    resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
+    resolution:
+      {
+        integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==,
+      }
 
   protocol-buffers-schema@3.6.0:
-    resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
+    resolution:
+      {
+        integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==,
+      }
 
   proxy-from-env@1.1.0:
-    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    resolution:
+      {
+        integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==,
+      }
 
   punycode@2.3.1:
-    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==,
+      }
+    engines: { node: ">=6" }
 
   qr.js@0.0.0:
-    resolution: {integrity: sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==}
+    resolution:
+      {
+        integrity: sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==,
+      }
 
   qrcode@1.5.4:
-    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
-    engines: {node: '>=10.13.0'}
+    resolution:
+      {
+        integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==,
+      }
+    engines: { node: ">=10.13.0" }
     hasBin: true
 
   querystringify@2.2.0:
-    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+    resolution:
+      {
+        integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==,
+      }
 
   queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+    resolution:
+      {
+        integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==,
+      }
 
   quick-lru@6.1.2:
-    resolution: {integrity: sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==,
+      }
+    engines: { node: ">=12" }
 
   quickselect@2.0.0:
-    resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
+    resolution:
+      {
+        integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==,
+      }
 
   quote-unquote@1.0.0:
-    resolution: {integrity: sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg==}
-
-  randombytes@2.1.0:
-    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+    resolution:
+      {
+        integrity: sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg==,
+      }
 
   rbush@3.0.1:
-    resolution: {integrity: sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==}
+    resolution:
+      {
+        integrity: sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==,
+      }
 
   react-chartjs-2@5.3.1:
-    resolution: {integrity: sha512-h5IPXKg9EXpjoBzUfyWJvllMjG2mQ4EiuHQFhms/AjUm0XSZHhyRy2xVmLXHKrtcdrPO4mnGqRtYoD0vp95A0A==}
+    resolution:
+      {
+        integrity: sha512-h5IPXKg9EXpjoBzUfyWJvllMjG2mQ4EiuHQFhms/AjUm0XSZHhyRy2xVmLXHKrtcdrPO4mnGqRtYoD0vp95A0A==,
+      }
     peerDependencies:
       chart.js: ^4.1.1
       react: ^19.2.1
 
   react-day-picker@8.10.1:
-    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
+    resolution:
+      {
+        integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==,
+      }
     peerDependencies:
       date-fns: ^2.28.0 || ^3.0.0
       react: ^19.2.1
 
-  react-day-picker@9.12.0:
-    resolution: {integrity: sha512-t8OvG/Zrciso5CQJu5b1A7yzEmebvST+S3pOVQJWxwjjVngyG/CA2htN/D15dLI4uTEuLLkbZyS4YYt480FAtA==}
-    engines: {node: '>=18'}
+  react-day-picker@9.14.0:
+    resolution:
+      {
+        integrity: sha512-tBaoDWjPwe0M5pGrum4H0SR6Lyk+BO9oHnp9JbKpGKW2mlraNPgP9BMfsg5pWpwrssARmeqk7YBl2oXutZTaHA==,
+      }
+    engines: { node: ">=18" }
     peerDependencies:
       react: ^19.2.1
 
   react-dnd-html5-backend@16.0.1:
-    resolution: {integrity: sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==}
+    resolution:
+      {
+        integrity: sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==,
+      }
 
   react-dnd-touch-backend@16.0.1:
-    resolution: {integrity: sha512-NonoCABzzjyWGZuDxSG77dbgMZ2Wad7eQiCd/ECtsR2/NBLTjGksPUx9UPezZ1nQ/L7iD130Tz3RUshL/ClKLA==}
+    resolution:
+      {
+        integrity: sha512-NonoCABzzjyWGZuDxSG77dbgMZ2Wad7eQiCd/ECtsR2/NBLTjGksPUx9UPezZ1nQ/L7iD130Tz3RUshL/ClKLA==,
+      }
 
   react-dnd@16.0.1:
-    resolution: {integrity: sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==}
+    resolution:
+      {
+        integrity: sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==,
+      }
     peerDependencies:
-      '@types/hoist-non-react-statics': '>= 3.3.1'
-      '@types/node': '>= 12'
-      '@types/react': ^19.2.7
+      "@types/hoist-non-react-statics": ">= 3.3.1"
+      "@types/node": ">= 12"
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/hoist-non-react-statics':
+      "@types/hoist-non-react-statics":
         optional: true
-      '@types/node':
+      "@types/node":
         optional: true
-      '@types/react':
+      "@types/react":
         optional: true
 
   react-docgen-typescript@2.4.0:
-    resolution: {integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==}
+    resolution:
+      {
+        integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==,
+      }
     peerDependencies:
-      typescript: '>= 4.3.x'
+      typescript: ">= 4.3.x"
 
   react-docgen@7.1.1:
-    resolution: {integrity: sha512-hlSJDQ2synMPKFZOsKo9Hi8WWZTC7POR8EmWvTSjow+VDgKzkmjQvFm2fk0tmRw+f0vTOIYKlarR0iL4996pdg==}
-    engines: {node: '>=16.14.0'}
+    resolution:
+      {
+        integrity: sha512-hlSJDQ2synMPKFZOsKo9Hi8WWZTC7POR8EmWvTSjow+VDgKzkmjQvFm2fk0tmRw+f0vTOIYKlarR0iL4996pdg==,
+      }
+    engines: { node: ">=16.14.0" }
 
-  react-dom@19.2.3:
-    resolution: {integrity: sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==}
+  react-dom@19.2.4:
+    resolution:
+      {
+        integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==,
+      }
     peerDependencies:
       react: ^19.2.1
 
   react-draggable@4.5.0:
-    resolution: {integrity: sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw==}
+    resolution:
+      {
+        integrity: sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
 
-  react-dropzone@14.3.8:
-    resolution: {integrity: sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==}
-    engines: {node: '>= 10.13'}
+  react-dropzone@14.4.1:
+    resolution:
+      {
+        integrity: sha512-QDuV76v3uKbHiH34SpwifZ+gOLi1+RdsCO1kl5vxMT4wW8R82+sthjvBw4th3NHF/XX6FBsqDYZVNN+pnhaw0g==,
+      }
+    engines: { node: ">= 10.13" }
     peerDependencies:
       react: ^19.2.1
 
-  react-hook-form@7.68.0:
-    resolution: {integrity: sha512-oNN3fjrZ/Xo40SWlHf1yCjlMK417JxoSJVUXQjGdvdRCU07NTFei1i1f8ApUAts+IVh14e4EdakeLEA+BEAs/Q==}
-    engines: {node: '>=18.0.0'}
+  react-hook-form@7.72.0:
+    resolution:
+      {
+        integrity: sha512-V4v6jubaf6JAurEaVnT9aUPKFbNtDgohj5CIgVGyPHvT9wRx5OZHVjz31GsxnPNI278XMu+ruFz+wGOscHaLKw==,
+      }
+    engines: { node: ">=18.0.0" }
     peerDependencies:
       react: ^19.2.1
 
   react-hot-toast@2.6.0:
-    resolution: {integrity: sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==,
+      }
+    engines: { node: ">=10" }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
 
   react-i18next@15.7.4:
-    resolution: {integrity: sha512-nyU8iKNrI5uDJch0z9+Y5XEr34b0wkyYj3Rp+tfbahxtlswxSCjcUL9H0nqXo9IR3/t5Y5PKIA3fx3MfUyR9Xw==}
+    resolution:
+      {
+        integrity: sha512-nyU8iKNrI5uDJch0z9+Y5XEr34b0wkyYj3Rp+tfbahxtlswxSCjcUL9H0nqXo9IR3/t5Y5PKIA3fx3MfUyR9Xw==,
+      }
     peerDependencies:
-      i18next: '>= 23.4.0'
+      i18next: ">= 23.4.0"
       react: ^19.2.1
-      react-dom: '*'
-      react-native: '*'
+      react-dom: "*"
+      react-native: "*"
       typescript: ^5
     peerDependenciesMeta:
       react-dom:
@@ -6487,67 +9518,100 @@ packages:
         optional: true
 
   react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+    resolution:
+      {
+        integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==,
+      }
 
   react-is@17.0.2:
-    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+    resolution:
+      {
+        integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==,
+      }
 
   react-is@18.3.1:
-    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+    resolution:
+      {
+        integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==,
+      }
 
   react-qr-code@2.0.18:
-    resolution: {integrity: sha512-v1Jqz7urLMhkO6jkgJuBYhnqvXagzceg3qJUWayuCK/c6LTIonpWbwxR1f1APGd4xrW/QcQEovNrAojbUz65Tg==}
+    resolution:
+      {
+        integrity: sha512-v1Jqz7urLMhkO6jkgJuBYhnqvXagzceg3qJUWayuCK/c6LTIonpWbwxR1f1APGd4xrW/QcQEovNrAojbUz65Tg==,
+      }
     peerDependencies:
       react: ^19.2.1
 
   react-refresh@0.17.0:
-    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==,
+      }
+    engines: { node: ">=0.10.0" }
 
   react-remove-scroll-bar@2.3.8:
-    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==,
+      }
+    engines: { node: ">=10" }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
   react-remove-scroll@2.7.2:
-    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==,
+      }
+    engines: { node: ">=10" }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
   react-smooth@4.0.4:
-    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
+    resolution:
+      {
+        integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
 
   react-style-singleton@2.2.3:
-    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==,
+      }
+    engines: { node: ">=10" }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
   react-transition-group@4.4.5:
-    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    resolution:
+      {
+        integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
 
   react-use-measure@2.1.7:
-    resolution: {integrity: sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==}
+    resolution:
+      {
+        integrity: sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
@@ -6555,281 +9619,504 @@ packages:
       react-dom:
         optional: true
 
-  react@19.2.3:
-    resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
-    engines: {node: '>=0.10.0'}
+  react@19.2.4:
+    resolution:
+      {
+        integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==,
+      }
+    engines: { node: ">=0.10.0" }
 
   read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    resolution:
+      {
+        integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==,
+      }
 
   readable-stream@2.3.8:
-    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+    resolution:
+      {
+        integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==,
+      }
 
   readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
+    resolution:
+      {
+        integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==,
+      }
+    engines: { node: ">=8.10.0" }
 
   readdirp@4.1.2:
-    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
-    engines: {node: '>= 14.18.0'}
+    resolution:
+      {
+        integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==,
+      }
+    engines: { node: ">= 14.18.0" }
 
-  realgrid-react@0.9.8:
-    resolution: {integrity: sha512-kmWphRkOEo/jFZz5oVemjrwHdYoYwj2Lfb+kFv5U7zkhWfuOfWZU0oacIX9g9GDhF4Bq+Ab5rKd2GzURKlySzw==}
+  realgrid-react@0.9.9:
+    resolution:
+      {
+        integrity: sha512-1zvD9eM45kMViOdMT6cLag7+riiu7vGq3FXf0/9Se/O8MRj86d3PpPCYfyrCV5Xo37cUZZHyEJ86sZsMj6VoBA==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
 
-  realgrid@2.9.6:
-    resolution: {integrity: sha512-6QpaN6vCw6rxGXvjxOS5CSRnnvyS77raZnChNkNqfMw2BSVJxjYhRu928wHwhYHs4Iwjazgm5PIMEDrHuIpdMg==}
+  realgrid@2.9.7:
+    resolution:
+      {
+        integrity: sha512-gPn2Ol10gomZw6KH7HgRXEe8O67XfPb35BrgCmWF0/GzlJEqb1XzdAKzuVYmoQuj6eXVwsnjP0w5RaE3O1DoNg==,
+      }
 
   recast@0.23.11:
-    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
-    engines: {node: '>= 4'}
+    resolution:
+      {
+        integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==,
+      }
+    engines: { node: ">= 4" }
 
   recharts-scale@0.4.5:
-    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+    resolution:
+      {
+        integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==,
+      }
 
   recharts@2.15.4:
-    resolution: {integrity: sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==}
-    engines: {node: '>=14'}
+    resolution:
+      {
+        integrity: sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==,
+      }
+    engines: { node: ">=14" }
+    deprecated: 1.x and 2.x branches are no longer active. Bump to Recharts v3 to receive latest features and bugfixes. See https://github.com/recharts/recharts/wiki/3.0-migration-guide
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
 
   redent@3.0.0:
-    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==,
+      }
+    engines: { node: ">=8" }
 
   redux@4.2.1:
-    resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==}
+    resolution:
+      {
+        integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==,
+      }
 
   reflect.getprototypeof@1.0.10:
-    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==,
+      }
+    engines: { node: ">= 0.4" }
 
   regexp.prototype.flags@1.5.4:
-    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==,
+      }
+    engines: { node: ">= 0.4" }
 
-  remixicon@4.7.0:
-    resolution: {integrity: sha512-g2pHOofQWARWpxdbrQu5+K3C8ZbqguQFzE54HIMWFCpFa63pumaAltIgZmFMRQpKKBScRWQASQfWxS9asNCcHQ==}
+  remixicon@4.9.1:
+    resolution:
+      {
+        integrity: sha512-36gLSoujkabnCFZFDyP17VNh9piuBA/rsXUb4auSJWLGsHVXtmxLj/EM5FjaEAGnk8oIAj1Azob/DZ2N+90lAQ==,
+      }
 
   require-directory@2.1.1:
-    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==,
+      }
+    engines: { node: ">=0.10.0" }
 
   require-from-string@2.0.2:
-    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==,
+      }
+    engines: { node: ">=0.10.0" }
 
   require-main-filename@2.0.0:
-    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+    resolution:
+      {
+        integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==,
+      }
 
   requires-port@1.0.0:
-    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+    resolution:
+      {
+        integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==,
+      }
+
+  reselect@5.1.1:
+    resolution:
+      {
+        integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==,
+      }
 
   resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
+    resolution:
+      {
+        integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==,
+      }
+    engines: { node: ">=4" }
 
   resolve-from@5.0.0:
-    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==,
+      }
+    engines: { node: ">=8" }
 
   resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+    resolution:
+      {
+        integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==,
+      }
 
   resolve-protobuf-schema@2.1.0:
-    resolution: {integrity: sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==}
+    resolution:
+      {
+        integrity: sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==,
+      }
 
   resolve@1.22.11:
-    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==,
+      }
+    engines: { node: ">= 0.4" }
     hasBin: true
 
-  resolve@2.0.0-next.5:
-    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
+  resolve@2.0.0-next.6:
+    resolution:
+      {
+        integrity: sha512-3JmVl5hMGtJ3kMmB3zi3DL25KfkCEyy3Tw7Gmw7z5w8M9WlwoPFnIvwChzu1+cF3iaK3sp18hhPz8ANeimdJfA==,
+      }
+    engines: { node: ">= 0.4" }
     hasBin: true
 
   restore-cursor@5.1.0:
-    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==,
+      }
+    engines: { node: ">=18" }
 
   retry@0.12.0:
-    resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==}
-    engines: {node: '>= 4'}
+    resolution:
+      {
+        integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==,
+      }
+    engines: { node: ">= 4" }
 
   reusify@1.1.0:
-    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==,
+      }
+    engines: { iojs: ">=1.0.0", node: ">=0.10.0" }
 
   rfdc@1.4.1:
-    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+    resolution:
+      {
+        integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==,
+      }
 
-  rollup@4.53.3:
-    resolution: {integrity: sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+  rollup@4.60.0:
+    resolution:
+      {
+        integrity: sha512-yqjxruMGBQJ2gG4HtjZtAfXArHomazDHoFwFFmZZl0r7Pdo7qCIXKqKHZc8yeoMgzJJ+pO6pEEHa+V7uzWlrAQ==,
+      }
+    engines: { node: ">=18.0.0", npm: ">=8.0.0" }
     hasBin: true
 
   run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+    resolution:
+      {
+        integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==,
+      }
 
   rw@1.3.3:
-    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+    resolution:
+      {
+        integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==,
+      }
 
   safe-array-concat@1.1.3:
-    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
-    engines: {node: '>=0.4'}
+    resolution:
+      {
+        integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==,
+      }
+    engines: { node: ">=0.4" }
 
   safe-buffer@5.1.2:
-    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
-
-  safe-buffer@5.2.1:
-    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+    resolution:
+      {
+        integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==,
+      }
 
   safe-push-apply@1.0.0:
-    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==,
+      }
+    engines: { node: ">= 0.4" }
 
   safe-regex-test@1.1.0:
-    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==,
+      }
+    engines: { node: ">= 0.4" }
 
-  sax@1.4.3:
-    resolution: {integrity: sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==}
+  sax@1.6.0:
+    resolution:
+      {
+        integrity: sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==,
+      }
+    engines: { node: ">=11.0.0" }
 
   scheduler@0.27.0:
-    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+    resolution:
+      {
+        integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==,
+      }
 
   schema-utils@4.3.3:
-    resolution: {integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==}
-    engines: {node: '>= 10.13.0'}
+    resolution:
+      {
+        integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==,
+      }
+    engines: { node: ">= 10.13.0" }
 
   select@1.1.2:
-    resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==}
+    resolution:
+      {
+        integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==,
+      }
 
   semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    resolution:
+      {
+        integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==,
+      }
     hasBin: true
 
-  semver@7.7.3:
-    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
-    engines: {node: '>=10'}
+  semver@7.7.4:
+    resolution:
+      {
+        integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==,
+      }
+    engines: { node: ">=10" }
     hasBin: true
 
-  serialize-javascript@6.0.2:
-    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
-
   set-blocking@2.0.0:
-    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+    resolution:
+      {
+        integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==,
+      }
 
   set-function-length@1.2.2:
-    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==,
+      }
+    engines: { node: ">= 0.4" }
 
   set-function-name@2.0.2:
-    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   set-proto@1.0.0:
-    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==,
+      }
+    engines: { node: ">= 0.4" }
 
   setimmediate@1.0.5:
-    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+    resolution:
+      {
+        integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==,
+      }
 
   sharp@0.34.5:
-    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    resolution:
+      {
+        integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==,
+      }
+    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
 
   shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==,
+      }
+    engines: { node: ">=8" }
 
   shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==,
+      }
+    engines: { node: ">=8" }
 
   side-channel-list@1.0.0:
-    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==,
+      }
+    engines: { node: ">= 0.4" }
 
   side-channel-map@1.0.1:
-    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==,
+      }
+    engines: { node: ">= 0.4" }
 
   side-channel-weakmap@1.0.2:
-    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==,
+      }
+    engines: { node: ">= 0.4" }
 
   side-channel@1.1.0:
-    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==,
+      }
+    engines: { node: ">= 0.4" }
 
   signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+    resolution:
+      {
+        integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==,
+      }
 
   signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
-    engines: {node: '>=14'}
+    resolution:
+      {
+        integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==,
+      }
+    engines: { node: ">=14" }
 
   sisteransi@1.0.5:
-    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+    resolution:
+      {
+        integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==,
+      }
 
   slash@5.1.0:
-    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
-    engines: {node: '>=14.16'}
+    resolution:
+      {
+        integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==,
+      }
+    engines: { node: ">=14.16" }
 
   slice-ansi@7.1.2:
-    resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==,
+      }
+    engines: { node: ">=18" }
+
+  slice-ansi@8.0.0:
+    resolution:
+      {
+        integrity: sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==,
+      }
+    engines: { node: ">=20" }
 
   sonner@2.0.7:
-    resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
+    resolution:
+      {
+        integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==,
+      }
     peerDependencies:
       react: ^19.2.1
       react-dom: ^19.2.1
 
   sort-asc@0.1.0:
-    resolution: {integrity: sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==,
+      }
+    engines: { node: ">=0.10.0" }
 
   sort-desc@0.1.1:
-    resolution: {integrity: sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==,
+      }
+    engines: { node: ">=0.10.0" }
 
   sort-object@0.3.2:
-    resolution: {integrity: sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==,
+      }
+    engines: { node: ">=0.10.0" }
 
   source-map-js@1.2.1:
-    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==,
+      }
+    engines: { node: ">=0.10.0" }
 
   source-map-support@0.5.21:
-    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+    resolution:
+      {
+        integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==,
+      }
 
   source-map@0.7.6:
-    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
-    engines: {node: '>= 12'}
+    resolution:
+      {
+        integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==,
+      }
+    engines: { node: ">= 12" }
 
   ssf@0.11.2:
-    resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==}
-    engines: {node: '>=0.8'}
+    resolution:
+      {
+        integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==,
+      }
+    engines: { node: ">=0.8" }
 
   stable-hash@0.0.5:
-    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+    resolution:
+      {
+        integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==,
+      }
 
   steiger@0.5.11:
-    resolution: {integrity: sha512-Sv6ovPX8tVlUufvAvGSUnwDQLupccYjcgfK5pbqECGP5KCe9M257U0IbRdjuLfUXfey4FprZWQQtnIz3qOPpWA==}
+    resolution:
+      {
+        integrity: sha512-Sv6ovPX8tVlUufvAvGSUnwDQLupccYjcgfK5pbqECGP5KCe9M257U0IbRdjuLfUXfey4FprZWQQtnIz3qOPpWA==,
+      }
     hasBin: true
 
   stop-iteration-iterator@1.1.0:
-    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==,
+      }
+    engines: { node: ">= 0.4" }
 
-  storybook@8.6.14:
-    resolution: {integrity: sha512-sVKbCj/OTx67jhmauhxc2dcr1P+yOgz/x3h0krwjyMgdc5Oubvxyg4NYDZmzAw+ym36g/lzH8N0Ccp4dwtdfxw==}
+  storybook@8.6.18:
+    resolution:
+      {
+        integrity: sha512-p8seiSI6FiVY6P3V0pG+5v7c8pDMehMAFRWEhG5XqIBSQszzOjDnW2rNvm3odoLKfo3V3P6Cs6Hv9ILzymULyQ==,
+      }
     hasBin: true
     peerDependencies:
       prettier: ^2 || ^3
@@ -6837,217 +10124,352 @@ packages:
       prettier:
         optional: true
 
-  streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
-
   string-argv@0.3.2:
-    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
-    engines: {node: '>=0.6.19'}
+    resolution:
+      {
+        integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==,
+      }
+    engines: { node: ">=0.6.19" }
 
   string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==,
+      }
+    engines: { node: ">=8" }
 
   string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==,
+      }
+    engines: { node: ">=12" }
 
   string-width@7.2.0:
-    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==,
+      }
+    engines: { node: ">=18" }
 
   string-width@8.2.0:
-    resolution: {integrity: sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw==}
-    engines: {node: '>=20'}
+    resolution:
+      {
+        integrity: sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw==,
+      }
+    engines: { node: ">=20" }
 
   string.prototype.includes@2.0.1:
-    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==,
+      }
+    engines: { node: ">= 0.4" }
 
   string.prototype.matchall@4.0.12:
-    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==,
+      }
+    engines: { node: ">= 0.4" }
 
   string.prototype.repeat@1.0.0:
-    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+    resolution:
+      {
+        integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==,
+      }
 
   string.prototype.trim@1.2.10:
-    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==,
+      }
+    engines: { node: ">= 0.4" }
 
   string.prototype.trimend@1.0.9:
-    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   string.prototype.trimstart@1.0.8:
-    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==,
+      }
+    engines: { node: ">= 0.4" }
 
   string_decoder@1.1.1:
-    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+    resolution:
+      {
+        integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==,
+      }
 
   strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==,
+      }
+    engines: { node: ">=8" }
 
-  strip-ansi@7.1.2:
-    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
-    engines: {node: '>=12'}
+  strip-ansi@7.2.0:
+    resolution:
+      {
+        integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==,
+      }
+    engines: { node: ">=12" }
 
   strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
+    resolution:
+      {
+        integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==,
+      }
+    engines: { node: ">=4" }
 
   strip-indent@3.0.0:
-    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==,
+      }
+    engines: { node: ">=8" }
 
   strip-indent@4.1.1:
-    resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==,
+      }
+    engines: { node: ">=12" }
 
   strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==,
+      }
+    engines: { node: ">=8" }
 
   styled-jsx@5.1.6:
-    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
-    engines: {node: '>= 12.0.0'}
+    resolution:
+      {
+        integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==,
+      }
+    engines: { node: ">= 12.0.0" }
     peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
+      "@babel/core": "*"
+      babel-plugin-macros: "*"
       react: ^19.2.1
     peerDependenciesMeta:
-      '@babel/core':
+      "@babel/core":
         optional: true
       babel-plugin-macros:
         optional: true
 
   sucrase@3.35.1:
-    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
-    engines: {node: '>=16 || 14 >=14.17'}
+    resolution:
+      {
+        integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==,
+      }
+    engines: { node: ">=16 || 14 >=14.17" }
     hasBin: true
 
   supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==,
+      }
+    engines: { node: ">=8" }
 
   supports-color@8.1.1:
-    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==,
+      }
+    engines: { node: ">=10" }
 
   supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==,
+      }
+    engines: { node: ">= 0.4" }
 
-  swr@2.3.8:
-    resolution: {integrity: sha512-gaCPRVoMq8WGDcWj9p4YWzCMPHzE0WNl6W8ADIx9c3JBEIdMkJGMzW+uzXvxHMltwcYACr9jP+32H8/hgwMR7w==}
+  swr@2.4.1:
+    resolution:
+      {
+        integrity: sha512-2CC6CiKQtEwaEeNiqWTAw9PGykW8SR5zZX8MZk6TeAvEAnVS7Visz8WzphqgtQ8v2xz/4Q5K+j+SeMaKXeeQIA==,
+      }
     peerDependencies:
       react: ^19.2.1
 
-  tailwind-merge@3.4.0:
-    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+  tailwind-merge@3.5.0:
+    resolution:
+      {
+        integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==,
+      }
 
   tailwindcss-animate@1.0.7:
-    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    resolution:
+      {
+        integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==,
+      }
     peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
+      tailwindcss: ">=3.0.0 || insiders"
 
   tailwindcss@3.4.19:
-    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
-    engines: {node: '>=14.0.0'}
+    resolution:
+      {
+        integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==,
+      }
+    engines: { node: ">=14.0.0" }
     hasBin: true
 
-  tailwindcss@4.1.18:
-    resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
+  tailwindcss@4.2.2:
+    resolution:
+      {
+        integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==,
+      }
 
-  tapable@2.3.0:
-    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
-    engines: {node: '>=6'}
+  tapable@2.3.2:
+    resolution:
+      {
+        integrity: sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==,
+      }
+    engines: { node: ">=6" }
 
-  terser-webpack-plugin@5.3.16:
-    resolution: {integrity: sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==}
-    engines: {node: '>= 10.13.0'}
+  terser-webpack-plugin@5.4.0:
+    resolution:
+      {
+        integrity: sha512-Bn5vxm48flOIfkdl5CaD2+1CiUVbonWQ3KQPyP7/EuIl9Gbzq/gQFOzaMFUEgVjB1396tcK0SG8XcNJ/2kDH8g==,
+      }
+    engines: { node: ">= 10.13.0" }
     peerDependencies:
-      '@swc/core': '*'
-      esbuild: '*'
-      uglify-js: '*'
+      "@swc/core": "*"
+      esbuild: "*"
+      uglify-js: "*"
       webpack: ^5.1.0
     peerDependenciesMeta:
-      '@swc/core':
+      "@swc/core":
         optional: true
       esbuild:
         optional: true
       uglify-js:
         optional: true
 
-  terser@5.44.1:
-    resolution: {integrity: sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==}
-    engines: {node: '>=10'}
+  terser@5.46.1:
+    resolution:
+      {
+        integrity: sha512-vzCjQO/rgUuK9sf8VJZvjqiqiHFaZLnOiimmUuOKODxWL8mm/xua7viT7aqX7dgPY60otQjUotzFMmCB4VdmqQ==,
+      }
+    engines: { node: ">=10" }
     hasBin: true
 
   text-segmentation@1.0.3:
-    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+    resolution:
+      {
+        integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==,
+      }
 
   thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
+    resolution:
+      {
+        integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==,
+      }
+    engines: { node: ">=0.8" }
 
   thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+    resolution:
+      {
+        integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==,
+      }
 
   tiny-invariant@1.3.3:
-    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+    resolution:
+      {
+        integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==,
+      }
 
   tinyexec@0.3.2:
-    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+    resolution:
+      {
+        integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==,
+      }
+
+  tinyexec@1.0.4:
+    resolution:
+      {
+        integrity: sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==,
+      }
+    engines: { node: ">=18" }
 
   tinyglobby@0.2.15:
-    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
-    engines: {node: '>=12.0.0'}
+    resolution:
+      {
+        integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==,
+      }
+    engines: { node: ">=12.0.0" }
 
-  tinymce@7.9.1:
-    resolution: {integrity: sha512-zaOHwmiP1EqTeLRXAvVriDb00JYnfEjWGPdKEuac7MiZJ5aiDMZ4Unc98Gmajn+PBljOmO1GKV6G0KwWn3+k8A==}
+  tinymce@7.9.2:
+    resolution:
+      {
+        integrity: sha512-zS2gn2CPQmZhUqLzkhwYH+WGsx/DIRY/mS18RVzsIcuQg2lN2uzaqoHSJU6DdMUpvXBtBFnLNpumC3QrDwLBzA==,
+      }
 
   tinyrainbow@1.2.0:
-    resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
-    engines: {node: '>=14.0.0'}
+    resolution:
+      {
+        integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==,
+      }
+    engines: { node: ">=14.0.0" }
 
   tinyspy@3.0.2:
-    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
-    engines: {node: '>=14.0.0'}
+    resolution:
+      {
+        integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==,
+      }
+    engines: { node: ">=14.0.0" }
 
   to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
+    resolution:
+      {
+        integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==,
+      }
+    engines: { node: ">=8.0" }
 
   tree-kill@1.2.2:
-    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    resolution:
+      {
+        integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==,
+      }
     hasBin: true
 
-  ts-api-utils@2.1.0:
-    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
-    engines: {node: '>=18.12'}
+  ts-api-utils@2.5.0:
+    resolution:
+      {
+        integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==,
+      }
+    engines: { node: ">=18.12" }
     peerDependencies:
-      typescript: '>=4.8.4'
-
-  ts-api-utils@2.4.0:
-    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
-    engines: {node: '>=18.12'}
-    peerDependencies:
-      typescript: '>=4.8.4'
+      typescript: ">=4.8.4"
 
   ts-dedent@2.2.0:
-    resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
-    engines: {node: '>=6.10'}
+    resolution:
+      {
+        integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==,
+      }
+    engines: { node: ">=6.10" }
 
   ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+    resolution:
+      {
+        integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==,
+      }
 
   tsconfck@3.1.6:
-    resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
-    engines: {node: ^18 || >=20}
+    resolution:
+      {
+        integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==,
+      }
+    engines: { node: ^18 || >=20 }
     hasBin: true
     peerDependencies:
       typescript: ^5.0.0
@@ -7056,28 +10478,40 @@ packages:
         optional: true
 
   tsconfig-paths@3.15.0:
-    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+    resolution:
+      {
+        integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==,
+      }
 
   tsconfig-paths@4.2.0:
-    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==,
+      }
+    engines: { node: ">=6" }
 
   tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+    resolution:
+      {
+        integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==,
+      }
 
   tsup@8.3.6:
-    resolution: {integrity: sha512-XkVtlDV/58S9Ye0JxUUTcrQk4S+EqlOHKzg6Roa62rdjL1nGWNUstG0xgI4vanHdfIpjP448J8vlN0oK6XOJ5g==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-XkVtlDV/58S9Ye0JxUUTcrQk4S+EqlOHKzg6Roa62rdjL1nGWNUstG0xgI4vanHdfIpjP448J8vlN0oK6XOJ5g==,
+      }
+    engines: { node: ">=18" }
     hasBin: true
     peerDependencies:
-      '@microsoft/api-extractor': ^7.36.0
-      '@swc/core': ^1
+      "@microsoft/api-extractor": ^7.36.0
+      "@swc/core": ^1
       postcss: ^8.4.12
-      typescript: '>=4.5.0'
+      typescript: ">=4.5.0"
     peerDependenciesMeta:
-      '@microsoft/api-extractor':
+      "@microsoft/api-extractor":
         optional: true
-      '@swc/core':
+      "@swc/core":
         optional: true
       postcss:
         optional: true
@@ -7085,181 +10519,289 @@ packages:
         optional: true
 
   turbo-darwin-64@2.4.2:
-    resolution: {integrity: sha512-HFfemyWB60CJtEvVQj9yby5rkkWw9fLAdLtAPGtPQoU3tKh8t/uzCAZKso2aPVbib9vGUuGbPGoGpaRXdVhj5g==}
+    resolution:
+      {
+        integrity: sha512-HFfemyWB60CJtEvVQj9yby5rkkWw9fLAdLtAPGtPQoU3tKh8t/uzCAZKso2aPVbib9vGUuGbPGoGpaRXdVhj5g==,
+      }
     cpu: [x64]
     os: [darwin]
 
   turbo-darwin-arm64@2.4.2:
-    resolution: {integrity: sha512-uwSx1dsBSSFeEC0nxyx2O219FEsS/haiESaWwE9JI8mHkQK61s6w6fN2G586krKxyNam4AIxRltleL+O2Em94g==}
+    resolution:
+      {
+        integrity: sha512-uwSx1dsBSSFeEC0nxyx2O219FEsS/haiESaWwE9JI8mHkQK61s6w6fN2G586krKxyNam4AIxRltleL+O2Em94g==,
+      }
     cpu: [arm64]
     os: [darwin]
 
   turbo-linux-64@2.4.2:
-    resolution: {integrity: sha512-Fy/uL8z/LAYcPbm7a1LwFnTY9pIi5FAi12iuHsgB7zHjdh4eeIKS2NIg4nroAmTcUTUZ0/cVTo4bDOCUcS3aKw==}
+    resolution:
+      {
+        integrity: sha512-Fy/uL8z/LAYcPbm7a1LwFnTY9pIi5FAi12iuHsgB7zHjdh4eeIKS2NIg4nroAmTcUTUZ0/cVTo4bDOCUcS3aKw==,
+      }
     cpu: [x64]
     os: [linux]
 
   turbo-linux-arm64@2.4.2:
-    resolution: {integrity: sha512-AEA0d8h5W/K6iiXfEgiNwWt0yqRL1NpBs8zQCLdc4/L7WeYeJW3sORWX8zt7xhutF/KW9gTm8ehKpiK6cCIsAA==}
+    resolution:
+      {
+        integrity: sha512-AEA0d8h5W/K6iiXfEgiNwWt0yqRL1NpBs8zQCLdc4/L7WeYeJW3sORWX8zt7xhutF/KW9gTm8ehKpiK6cCIsAA==,
+      }
     cpu: [arm64]
     os: [linux]
 
   turbo-windows-64@2.4.2:
-    resolution: {integrity: sha512-CybtIZ9wRgnnNFVN9En9G+rxsO+mwU81fvW4RpE8BWyNEkhQ8J28qYf4PaimueMxGHHp/28i/G7Kcdn2GAWG0g==}
+    resolution:
+      {
+        integrity: sha512-CybtIZ9wRgnnNFVN9En9G+rxsO+mwU81fvW4RpE8BWyNEkhQ8J28qYf4PaimueMxGHHp/28i/G7Kcdn2GAWG0g==,
+      }
     cpu: [x64]
     os: [win32]
 
   turbo-windows-arm64@2.4.2:
-    resolution: {integrity: sha512-7V0yneVPL8Y3TgrkUIjw7Odmwu1tHnyIiPHFM7eFcA7U+H6hPXyCxge7nC3wOKfjhKCQqUm+Vf/k6kjmLz5G4g==}
+    resolution:
+      {
+        integrity: sha512-7V0yneVPL8Y3TgrkUIjw7Odmwu1tHnyIiPHFM7eFcA7U+H6hPXyCxge7nC3wOKfjhKCQqUm+Vf/k6kjmLz5G4g==,
+      }
     cpu: [arm64]
     os: [win32]
 
   turbo@2.4.2:
-    resolution: {integrity: sha512-Qxi0ioQCxMRUCcHKHZkTnYH8e7XCpNfg9QiJcyfWIc+ZXeaCjzV5rCGlbQlTXMAtI8qgfP8fZADv3CFtPwqdPQ==}
+    resolution:
+      {
+        integrity: sha512-Qxi0ioQCxMRUCcHKHZkTnYH8e7XCpNfg9QiJcyfWIc+ZXeaCjzV5rCGlbQlTXMAtI8qgfP8fZADv3CFtPwqdPQ==,
+      }
     hasBin: true
 
   tus-js-client@4.3.1:
-    resolution: {integrity: sha512-ZLeYmjrkaU1fUsKbIi8JML52uAocjEZtBx4DKjRrqzrZa0O4MYwT6db+oqePlspV+FxXJAyFBc/L5gwUi2OFsg==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-ZLeYmjrkaU1fUsKbIi8JML52uAocjEZtBx4DKjRrqzrZa0O4MYwT6db+oqePlspV+FxXJAyFBc/L5gwUi2OFsg==,
+      }
+    engines: { node: ">=18" }
 
   type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
+    resolution:
+      {
+        integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==,
+      }
+    engines: { node: ">= 0.8.0" }
 
   type-fest@2.19.0:
-    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
-    engines: {node: '>=12.20'}
+    resolution:
+      {
+        integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==,
+      }
+    engines: { node: ">=12.20" }
 
   typed-array-buffer@1.0.3:
-    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==,
+      }
+    engines: { node: ">= 0.4" }
 
   typed-array-byte-length@1.0.3:
-    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==,
+      }
+    engines: { node: ">= 0.4" }
 
   typed-array-byte-offset@1.0.4:
-    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==,
+      }
+    engines: { node: ">= 0.4" }
 
   typed-array-length@1.0.7:
-    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==,
+      }
+    engines: { node: ">= 0.4" }
 
-  typescript-eslint@8.49.0:
-    resolution: {integrity: sha512-zRSVH1WXD0uXczCXw+nsdjGPUdx4dfrs5VQoHnUWmv1U3oNlAKv4FUNdLDhVUg+gYn+a5hUESqch//Rv5wVhrg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  typescript-eslint@8.57.2:
+    resolution:
+      {
+        integrity: sha512-VEPQ0iPgWO/sBaZOU1xo4nuNdODVOajPnTIbog2GKYr31nIlZ0fWPoCQgGfF3ETyBl1vn63F/p50Um9Z4J8O8A==,
+      }
+    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: ">=4.8.4 <6.0.0"
 
   typescript@5.6.3:
-    resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
-    engines: {node: '>=14.17'}
+    resolution:
+      {
+        integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==,
+      }
+    engines: { node: ">=14.17" }
     hasBin: true
 
   typescript@5.9.3:
-    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
-    engines: {node: '>=14.17'}
+    resolution:
+      {
+        integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==,
+      }
+    engines: { node: ">=14.17" }
     hasBin: true
 
   unbox-primitive@1.1.0:
-    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==,
+      }
+    engines: { node: ">= 0.4" }
 
   undici-types@6.21.0:
-    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+    resolution:
+      {
+        integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==,
+      }
 
   unicorn-magic@0.3.0:
-    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==,
+      }
+    engines: { node: ">=18" }
 
   unplugin@1.16.1:
-    resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
-    engines: {node: '>=14.0.0'}
+    resolution:
+      {
+        integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==,
+      }
+    engines: { node: ">=14.0.0" }
 
   unrs-resolver@1.11.1:
-    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+    resolution:
+      {
+        integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==,
+      }
 
-  update-browserslist-db@1.2.2:
-    resolution: {integrity: sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==}
+  update-browserslist-db@1.2.3:
+    resolution:
+      {
+        integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==,
+      }
     hasBin: true
     peerDependencies:
-      browserslist: '>= 4.21.0'
+      browserslist: ">= 4.21.0"
 
   uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+    resolution:
+      {
+        integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==,
+      }
 
   url-parse@1.5.10:
-    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+    resolution:
+      {
+        integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==,
+      }
 
   use-callback-ref@1.3.3:
-    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==,
+      }
+    engines: { node: ">=10" }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
   use-sidecar@1.1.3:
-    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==,
+      }
+    engines: { node: ">=10" }
     peerDependencies:
-      '@types/react': ^19.2.7
+      "@types/react": ^19.2.7
       react: ^19.2.1
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
 
   use-sync-external-store@1.6.0:
-    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    resolution:
+      {
+        integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==,
+      }
     peerDependencies:
       react: ^19.2.1
 
   util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+    resolution:
+      {
+        integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==,
+      }
 
   util@0.10.4:
-    resolution: {integrity: sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==}
+    resolution:
+      {
+        integrity: sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==,
+      }
 
   util@0.12.5:
-    resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
+    resolution:
+      {
+        integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==,
+      }
 
   utrie@1.0.2:
-    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+    resolution:
+      {
+        integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==,
+      }
 
   uuid@9.0.1:
-    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    resolution:
+      {
+        integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==,
+      }
     hasBin: true
 
   victory-vendor@36.9.2:
-    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+    resolution:
+      {
+        integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==,
+      }
 
   vite-tsconfig-paths@5.1.4:
-    resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
+    resolution:
+      {
+        integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==,
+      }
     peerDependencies:
-      vite: '*'
+      vite: "*"
     peerDependenciesMeta:
       vite:
         optional: true
 
   vite@5.4.21:
-    resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+    resolution:
+      {
+        integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==,
+      }
+    engines: { node: ^18.0.0 || >=20.0.0 }
     hasBin: true
     peerDependencies:
-      '@types/node': ^18.0.0 || >=20.0.0
-      less: '*'
+      "@types/node": ^18.0.0 || >=20.0.0
+      less: "*"
       lightningcss: ^1.21.0
-      sass: '*'
-      sass-embedded: '*'
-      stylus: '*'
-      sugarss: '*'
+      sass: "*"
+      sass-embedded: "*"
+      stylus: "*"
+      sugarss: "*"
       terser: ^5.4.0
     peerDependenciesMeta:
-      '@types/node':
+      "@types/node":
         optional: true
       less:
         optional: true
@@ -7277,23 +10819,26 @@ packages:
         optional: true
 
   vite@6.4.1:
-    resolution: {integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    resolution:
+      {
+        integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==,
+      }
+    engines: { node: ^18.0.0 || ^20.0.0 || >=22.0.0 }
     hasBin: true
     peerDependencies:
-      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      jiti: '>=1.21.0'
-      less: '*'
+      "@types/node": ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: ">=1.21.0"
+      less: "*"
       lightningcss: ^1.21.0
-      sass: '*'
-      sass-embedded: '*'
-      stylus: '*'
-      sugarss: '*'
+      sass: "*"
+      sass-embedded: "*"
+      stylus: "*"
+      sugarss: "*"
       terser: ^5.16.0
       tsx: ^4.8.1
       yaml: ^2.4.2
     peerDependenciesMeta:
-      '@types/node':
+      "@types/node":
         optional: true
       jiti:
         optional: true
@@ -7317,94 +10862,157 @@ packages:
         optional: true
 
   void-elements@3.1.0:
-    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==,
+      }
+    engines: { node: ">=0.10.0" }
 
-  watchpack@2.4.4:
-    resolution: {integrity: sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==}
-    engines: {node: '>=10.13.0'}
+  watchpack@2.5.1:
+    resolution:
+      {
+        integrity: sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==,
+      }
+    engines: { node: ">=10.13.0" }
 
   web-worker@1.5.0:
-    resolution: {integrity: sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw==}
+    resolution:
+      {
+        integrity: sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw==,
+      }
 
-  webpack-sources@3.3.3:
-    resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
-    engines: {node: '>=10.13.0'}
+  webpack-sources@3.3.4:
+    resolution:
+      {
+        integrity: sha512-7tP1PdV4vF+lYPnkMR0jMY5/la2ub5Fc/8VQrrU+lXkiM6C4TjVfGw7iKfyhnTQOsD+6Q/iKw0eFciziRgD58Q==,
+      }
+    engines: { node: ">=10.13.0" }
 
   webpack-virtual-modules@0.6.2:
-    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+    resolution:
+      {
+        integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==,
+      }
 
-  webpack@5.103.0:
-    resolution: {integrity: sha512-HU1JOuV1OavsZ+mfigY0j8d1TgQgbZ6M+J75zDkpEAwYeXjWSqrGJtgnPblJjd/mAyTNQ7ygw0MiKOn6etz8yw==}
-    engines: {node: '>=10.13.0'}
+  webpack@5.105.4:
+    resolution:
+      {
+        integrity: sha512-jTywjboN9aHxFlToqb0K0Zs9SbBoW4zRUlGzI2tYNxVYcEi/IPpn+Xi4ye5jTLvX2YeLuic/IvxNot+Q1jMoOw==,
+      }
+    engines: { node: ">=10.13.0" }
     hasBin: true
     peerDependencies:
-      webpack-cli: '*'
+      webpack-cli: "*"
     peerDependenciesMeta:
       webpack-cli:
         optional: true
 
   which-boxed-primitive@1.1.1:
-    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==,
+      }
+    engines: { node: ">= 0.4" }
 
   which-builtin-type@1.2.1:
-    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==,
+      }
+    engines: { node: ">= 0.4" }
 
   which-collection@1.0.2:
-    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
-    engines: {node: '>= 0.4'}
+    resolution:
+      {
+        integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==,
+      }
+    engines: { node: ">= 0.4" }
 
   which-module@2.0.1:
-    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+    resolution:
+      {
+        integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==,
+      }
 
-  which-typed-array@1.1.19:
-    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
-    engines: {node: '>= 0.4'}
+  which-typed-array@1.1.20:
+    resolution:
+      {
+        integrity: sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==,
+      }
+    engines: { node: ">= 0.4" }
 
   which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
+    resolution:
+      {
+        integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==,
+      }
+    engines: { node: ">= 8" }
     hasBin: true
 
-  wkt-parser@1.5.2:
-    resolution: {integrity: sha512-1ZUiV1FTwSiSrgWzV9KXJuOF2BVW91KY/mau04BhnmgOdroRQea7Q0s5TVqwGLm0D2tZwObd/tBYXW49sSxp3Q==}
+  wkt-parser@1.5.4:
+    resolution:
+      {
+        integrity: sha512-heRp3QBynj8SAGepAkE8h2k4KhUGRqzgwlSRgqNhxjmSIeSvE5ZrV8n1uy5jk+iJO2jmfffIwjdAaTirBOOx0A==,
+      }
 
   wmf@1.0.2:
-    resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
-    engines: {node: '>=0.8'}
+    resolution:
+      {
+        integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==,
+      }
+    engines: { node: ">=0.8" }
 
   word-wrap@1.2.5:
-    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
-    engines: {node: '>=0.10.0'}
+    resolution:
+      {
+        integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==,
+      }
+    engines: { node: ">=0.10.0" }
 
   word@0.3.0:
-    resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==}
-    engines: {node: '>=0.8'}
+    resolution:
+      {
+        integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==,
+      }
+    engines: { node: ">=0.8" }
 
   wrap-ansi@6.2.0:
-    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==,
+      }
+    engines: { node: ">=8" }
 
   wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==,
+      }
+    engines: { node: ">=10" }
 
   wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==,
+      }
+    engines: { node: ">=12" }
 
   wrap-ansi@9.0.2:
-    resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
-    engines: {node: '>=18'}
+    resolution:
+      {
+        integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==,
+      }
+    engines: { node: ">=18" }
 
-  ws@8.18.3:
-    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
-    engines: {node: '>=10.0.0'}
+  ws@8.20.0:
+    resolution:
+      {
+        integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==,
+      }
+    engines: { node: ">=10.0.0" }
     peerDependencies:
       bufferutil: ^4.0.1
-      utf-8-validate: '>=5.0.2'
+      utf-8-validate: ">=5.0.2"
     peerDependenciesMeta:
       bufferutil:
         optional: true
@@ -7412,81 +11020,135 @@ packages:
         optional: true
 
   xlsx-populate@1.21.0:
-    resolution: {integrity: sha512-8v2Gm8BehXo6LU7KT802QoXTPkYY1SKk5V8g/UuYZnNB3JzXqud/P99Pxr2yXeKyt+sKlCatmidz6jQNie1hRw==}
+    resolution:
+      {
+        integrity: sha512-8v2Gm8BehXo6LU7KT802QoXTPkYY1SKk5V8g/UuYZnNB3JzXqud/P99Pxr2yXeKyt+sKlCatmidz6jQNie1hRw==,
+      }
 
   xlsx@0.18.5:
-    resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==}
-    engines: {node: '>=0.8'}
+    resolution:
+      {
+        integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==,
+      }
+    engines: { node: ">=0.8" }
     hasBin: true
 
   xml-utils@1.10.2:
-    resolution: {integrity: sha512-RqM+2o1RYs6T8+3DzDSoTRAUfrvaejbVHcp3+thnAtDKo8LskR+HomLajEy5UjTz24rpka7AxVBRR3g2wTUkJA==}
+    resolution:
+      {
+        integrity: sha512-RqM+2o1RYs6T8+3DzDSoTRAUfrvaejbVHcp3+thnAtDKo8LskR+HomLajEy5UjTz24rpka7AxVBRR3g2wTUkJA==,
+      }
 
   y18n@4.0.3:
-    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+    resolution:
+      {
+        integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==,
+      }
 
   y18n@5.0.8:
-    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==,
+      }
+    engines: { node: ">=10" }
 
   yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+    resolution:
+      {
+        integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==,
+      }
 
-  yaml@2.8.2:
-    resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
-    engines: {node: '>= 14.6'}
+  yaml@2.8.3:
+    resolution:
+      {
+        integrity: sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==,
+      }
+    engines: { node: ">= 14.6" }
     hasBin: true
 
   yargs-parser@18.1.3:
-    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
-    engines: {node: '>=6'}
+    resolution:
+      {
+        integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==,
+      }
+    engines: { node: ">=6" }
 
   yargs-parser@21.1.1:
-    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==,
+      }
+    engines: { node: ">=12" }
 
   yargs-parser@22.0.0:
-    resolution: {integrity: sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
+    resolution:
+      {
+        integrity: sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==,
+      }
+    engines: { node: ^20.19.0 || ^22.12.0 || >=23 }
 
   yargs@15.4.1:
-    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
-    engines: {node: '>=8'}
+    resolution:
+      {
+        integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==,
+      }
+    engines: { node: ">=8" }
 
   yargs@17.7.2:
-    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
-    engines: {node: '>=12'}
+    resolution:
+      {
+        integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==,
+      }
+    engines: { node: ">=12" }
 
   yargs@18.0.0:
-    resolution: {integrity: sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
+    resolution:
+      {
+        integrity: sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==,
+      }
+    engines: { node: ^20.19.0 || ^22.12.0 || >=23 }
 
   yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
+    resolution:
+      {
+        integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==,
+      }
+    engines: { node: ">=10" }
 
   zod-validation-error@3.5.4:
-    resolution: {integrity: sha512-+hEiRIiPobgyuFlEojnqjJnhFvg4r/i3cqgcm67eehZf/WBaK3g6cD02YU9mtdVxZjv8CzCA9n/Rhrs3yAAvAw==}
-    engines: {node: '>=18.0.0'}
+    resolution:
+      {
+        integrity: sha512-+hEiRIiPobgyuFlEojnqjJnhFvg4r/i3cqgcm67eehZf/WBaK3g6cD02YU9mtdVxZjv8CzCA9n/Rhrs3yAAvAw==,
+      }
+    engines: { node: ">=18.0.0" }
     peerDependencies:
       zod: ^3.24.4
 
   zod@3.25.76:
-    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+    resolution:
+      {
+        integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==,
+      }
 
   zstddec@0.1.0:
-    resolution: {integrity: sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg==}
+    resolution:
+      {
+        integrity: sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg==,
+      }
 
-  zustand@5.0.9:
-    resolution: {integrity: sha512-ALBtUj0AfjJt3uNRQoL1tL2tMvj6Gp/6e39dnfT6uzpelGru8v1tPOGBzayOWbPJvujM8JojDk3E1LxeFisBNg==}
-    engines: {node: '>=12.20.0'}
+  zustand@5.0.12:
+    resolution:
+      {
+        integrity: sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==,
+      }
+    engines: { node: ">=12.20.0" }
     peerDependencies:
-      '@types/react': ^19.2.7
-      immer: '>=9.0.6'
+      "@types/react": ^19.2.7
+      immer: ">=9.0.6"
       react: ^19.2.1
-      use-sync-external-store: '>=1.2.0'
+      use-sync-external-store: ">=1.2.0"
     peerDependenciesMeta:
-      '@types/react':
+      "@types/react":
         optional: true
       immer:
         optional: true
@@ -7496,31 +11158,30 @@ packages:
         optional: true
 
 snapshots:
+  "@adobe/css-tools@4.4.4": {}
 
-  '@adobe/css-tools@4.4.4': {}
+  "@alloc/quick-lru@5.2.0": {}
 
-  '@alloc/quick-lru@5.2.0': {}
-
-  '@babel/code-frame@7.27.1':
+  "@babel/code-frame@7.29.0":
     dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
+      "@babel/helper-validator-identifier": 7.28.5
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/compat-data@7.28.5': {}
+  "@babel/compat-data@7.29.0": {}
 
-  '@babel/core@7.28.5':
+  "@babel/core@7.29.0":
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.5
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
-      '@babel/helpers': 7.28.4
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-      '@jridgewell/remapping': 2.3.5
+      "@babel/code-frame": 7.29.0
+      "@babel/generator": 7.29.1
+      "@babel/helper-compilation-targets": 7.28.6
+      "@babel/helper-module-transforms": 7.28.6(@babel/core@7.29.0)
+      "@babel/helpers": 7.29.2
+      "@babel/parser": 7.29.2
+      "@babel/template": 7.28.6
+      "@babel/traverse": 7.29.0
+      "@babel/types": 7.29.0
+      "@jridgewell/remapping": 2.3.5
       convert-source-map: 2.0.0
       debug: 4.4.3
       gensync: 1.0.0-beta.2
@@ -7529,410 +11190,467 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.28.5':
+  "@babel/generator@7.29.1":
     dependencies:
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
+      "@babel/parser": 7.29.2
+      "@babel/types": 7.29.0
+      "@jridgewell/gen-mapping": 0.3.13
+      "@jridgewell/trace-mapping": 0.3.31
       jsesc: 3.1.0
 
-  '@babel/helper-compilation-targets@7.27.2':
+  "@babel/helper-compilation-targets@7.28.6":
     dependencies:
-      '@babel/compat-data': 7.28.5
-      '@babel/helper-validator-option': 7.27.1
+      "@babel/compat-data": 7.29.0
+      "@babel/helper-validator-option": 7.27.1
       browserslist: 4.28.1
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-globals@7.28.0': {}
+  "@babel/helper-globals@7.28.0": {}
 
-  '@babel/helper-module-imports@7.27.1':
+  "@babel/helper-module-imports@7.28.6":
     dependencies:
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
+      "@babel/traverse": 7.29.0
+      "@babel/types": 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
+  "@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)":
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.28.5
+      "@babel/core": 7.29.0
+      "@babel/helper-module-imports": 7.28.6
+      "@babel/helper-validator-identifier": 7.28.5
+      "@babel/traverse": 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-plugin-utils@7.27.1': {}
+  "@babel/helper-plugin-utils@7.28.6": {}
 
-  '@babel/helper-string-parser@7.27.1': {}
+  "@babel/helper-string-parser@7.27.1": {}
 
-  '@babel/helper-validator-identifier@7.28.5': {}
+  "@babel/helper-validator-identifier@7.28.5": {}
 
-  '@babel/helper-validator-option@7.27.1': {}
+  "@babel/helper-validator-option@7.27.1": {}
 
-  '@babel/helpers@7.28.4':
+  "@babel/helpers@7.29.2":
     dependencies:
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
+      "@babel/template": 7.28.6
+      "@babel/types": 7.29.0
 
-  '@babel/parser@7.28.5':
+  "@babel/parser@7.29.2":
     dependencies:
-      '@babel/types': 7.28.5
+      "@babel/types": 7.29.0
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.5)':
+  "@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.0)":
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-plugin-utils': 7.27.1
+      "@babel/core": 7.29.0
+      "@babel/helper-plugin-utils": 7.28.6
 
-  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.28.5)':
+  "@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.29.0)":
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-plugin-utils': 7.27.1
+      "@babel/core": 7.29.0
+      "@babel/helper-plugin-utils": 7.28.6
 
-  '@babel/runtime@7.28.4': {}
+  "@babel/runtime@7.29.2": {}
 
-  '@babel/template@7.27.2':
+  "@babel/template@7.28.6":
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
+      "@babel/code-frame": 7.29.0
+      "@babel/parser": 7.29.2
+      "@babel/types": 7.29.0
 
-  '@babel/traverse@7.28.5':
+  "@babel/traverse@7.29.0":
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.5
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
+      "@babel/code-frame": 7.29.0
+      "@babel/generator": 7.29.1
+      "@babel/helper-globals": 7.28.0
+      "@babel/parser": 7.29.2
+      "@babel/template": 7.28.6
+      "@babel/types": 7.29.0
       debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.28.5':
+  "@babel/types@7.29.0":
     dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
+      "@babel/helper-string-parser": 7.27.1
+      "@babel/helper-validator-identifier": 7.28.5
 
-  '@clack/core@0.4.1':
+  "@base-ui/react@1.4.1(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@3.6.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
+    dependencies:
+      "@babel/runtime": 7.29.2
+      "@base-ui/utils": 0.2.8(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@floating-ui/react-dom": 2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@floating-ui/utils": 0.2.11
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    optionalDependencies:
+      "@date-fns/tz": 1.4.1
+      "@types/react": 19.2.14
+      date-fns: 3.6.0
+
+  "@base-ui/utils@0.2.8(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
+    dependencies:
+      "@babel/runtime": 7.29.2
+      "@floating-ui/utils": 0.2.11
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      reselect: 5.1.1
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    optionalDependencies:
+      "@types/react": 19.2.14
+
+  "@clack/core@0.4.1":
     dependencies:
       picocolors: 1.1.1
       sisteransi: 1.0.5
 
-  '@clack/prompts@0.9.1':
+  "@clack/prompts@0.9.1":
     dependencies:
-      '@clack/core': 0.4.1
+      "@clack/core": 0.4.1
       picocolors: 1.1.1
       sisteransi: 1.0.5
 
-  '@date-fns/tz@1.4.1': {}
+  "@date-fns/tz@1.4.1": {}
 
-  '@dependents/detective-less@5.0.1':
+  "@dependents/detective-less@5.0.1":
     dependencies:
       gonzales-pe: 4.3.0
       node-source-walk: 7.0.1
 
-  '@emnapi/core@1.7.1':
+  "@dnd-kit/accessibility@3.1.1(react@19.2.4)":
     dependencies:
-      '@emnapi/wasi-threads': 1.1.0
+      react: 19.2.4
+      tslib: 2.8.1
+
+  "@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
+    dependencies:
+      "@dnd-kit/accessibility": 3.1.1(react@19.2.4)
+      "@dnd-kit/utilities": 3.2.2(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      tslib: 2.8.1
+
+  "@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)":
+    dependencies:
+      "@dnd-kit/core": 6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@dnd-kit/utilities": 3.2.2(react@19.2.4)
+      react: 19.2.4
+      tslib: 2.8.1
+
+  "@dnd-kit/sortable@8.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)":
+    dependencies:
+      "@dnd-kit/core": 6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@dnd-kit/utilities": 3.2.2(react@19.2.4)
+      react: 19.2.4
+      tslib: 2.8.1
+
+  "@dnd-kit/utilities@3.2.2(react@19.2.4)":
+    dependencies:
+      react: 19.2.4
+      tslib: 2.8.1
+
+  "@emnapi/core@1.9.1":
+    dependencies:
+      "@emnapi/wasi-threads": 1.2.0
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.7.1':
+  "@emnapi/runtime@1.9.1":
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/wasi-threads@1.1.0':
+  "@emnapi/wasi-threads@1.2.0":
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@esbuild/aix-ppc64@0.21.5':
+  "@esbuild/aix-ppc64@0.21.5":
     optional: true
 
-  '@esbuild/aix-ppc64@0.24.2':
+  "@esbuild/aix-ppc64@0.24.2":
     optional: true
 
-  '@esbuild/aix-ppc64@0.25.12':
+  "@esbuild/aix-ppc64@0.25.12":
     optional: true
 
-  '@esbuild/android-arm64@0.21.5':
+  "@esbuild/android-arm64@0.21.5":
     optional: true
 
-  '@esbuild/android-arm64@0.24.2':
+  "@esbuild/android-arm64@0.24.2":
     optional: true
 
-  '@esbuild/android-arm64@0.25.12':
+  "@esbuild/android-arm64@0.25.12":
     optional: true
 
-  '@esbuild/android-arm@0.21.5':
+  "@esbuild/android-arm@0.21.5":
     optional: true
 
-  '@esbuild/android-arm@0.24.2':
+  "@esbuild/android-arm@0.24.2":
     optional: true
 
-  '@esbuild/android-arm@0.25.12':
+  "@esbuild/android-arm@0.25.12":
     optional: true
 
-  '@esbuild/android-x64@0.21.5':
+  "@esbuild/android-x64@0.21.5":
     optional: true
 
-  '@esbuild/android-x64@0.24.2':
+  "@esbuild/android-x64@0.24.2":
     optional: true
 
-  '@esbuild/android-x64@0.25.12':
+  "@esbuild/android-x64@0.25.12":
     optional: true
 
-  '@esbuild/darwin-arm64@0.21.5':
+  "@esbuild/darwin-arm64@0.21.5":
     optional: true
 
-  '@esbuild/darwin-arm64@0.24.2':
+  "@esbuild/darwin-arm64@0.24.2":
     optional: true
 
-  '@esbuild/darwin-arm64@0.25.12':
+  "@esbuild/darwin-arm64@0.25.12":
     optional: true
 
-  '@esbuild/darwin-x64@0.21.5':
+  "@esbuild/darwin-x64@0.21.5":
     optional: true
 
-  '@esbuild/darwin-x64@0.24.2':
+  "@esbuild/darwin-x64@0.24.2":
     optional: true
 
-  '@esbuild/darwin-x64@0.25.12':
+  "@esbuild/darwin-x64@0.25.12":
     optional: true
 
-  '@esbuild/freebsd-arm64@0.21.5':
+  "@esbuild/freebsd-arm64@0.21.5":
     optional: true
 
-  '@esbuild/freebsd-arm64@0.24.2':
+  "@esbuild/freebsd-arm64@0.24.2":
     optional: true
 
-  '@esbuild/freebsd-arm64@0.25.12':
+  "@esbuild/freebsd-arm64@0.25.12":
     optional: true
 
-  '@esbuild/freebsd-x64@0.21.5':
+  "@esbuild/freebsd-x64@0.21.5":
     optional: true
 
-  '@esbuild/freebsd-x64@0.24.2':
+  "@esbuild/freebsd-x64@0.24.2":
     optional: true
 
-  '@esbuild/freebsd-x64@0.25.12':
+  "@esbuild/freebsd-x64@0.25.12":
     optional: true
 
-  '@esbuild/linux-arm64@0.21.5':
+  "@esbuild/linux-arm64@0.21.5":
     optional: true
 
-  '@esbuild/linux-arm64@0.24.2':
+  "@esbuild/linux-arm64@0.24.2":
     optional: true
 
-  '@esbuild/linux-arm64@0.25.12':
+  "@esbuild/linux-arm64@0.25.12":
     optional: true
 
-  '@esbuild/linux-arm@0.21.5':
+  "@esbuild/linux-arm@0.21.5":
     optional: true
 
-  '@esbuild/linux-arm@0.24.2':
+  "@esbuild/linux-arm@0.24.2":
     optional: true
 
-  '@esbuild/linux-arm@0.25.12':
+  "@esbuild/linux-arm@0.25.12":
     optional: true
 
-  '@esbuild/linux-ia32@0.21.5':
+  "@esbuild/linux-ia32@0.21.5":
     optional: true
 
-  '@esbuild/linux-ia32@0.24.2':
+  "@esbuild/linux-ia32@0.24.2":
     optional: true
 
-  '@esbuild/linux-ia32@0.25.12':
+  "@esbuild/linux-ia32@0.25.12":
     optional: true
 
-  '@esbuild/linux-loong64@0.21.5':
+  "@esbuild/linux-loong64@0.21.5":
     optional: true
 
-  '@esbuild/linux-loong64@0.24.2':
+  "@esbuild/linux-loong64@0.24.2":
     optional: true
 
-  '@esbuild/linux-loong64@0.25.12':
+  "@esbuild/linux-loong64@0.25.12":
     optional: true
 
-  '@esbuild/linux-mips64el@0.21.5':
+  "@esbuild/linux-mips64el@0.21.5":
     optional: true
 
-  '@esbuild/linux-mips64el@0.24.2':
+  "@esbuild/linux-mips64el@0.24.2":
     optional: true
 
-  '@esbuild/linux-mips64el@0.25.12':
+  "@esbuild/linux-mips64el@0.25.12":
     optional: true
 
-  '@esbuild/linux-ppc64@0.21.5':
+  "@esbuild/linux-ppc64@0.21.5":
     optional: true
 
-  '@esbuild/linux-ppc64@0.24.2':
+  "@esbuild/linux-ppc64@0.24.2":
     optional: true
 
-  '@esbuild/linux-ppc64@0.25.12':
+  "@esbuild/linux-ppc64@0.25.12":
     optional: true
 
-  '@esbuild/linux-riscv64@0.21.5':
+  "@esbuild/linux-riscv64@0.21.5":
     optional: true
 
-  '@esbuild/linux-riscv64@0.24.2':
+  "@esbuild/linux-riscv64@0.24.2":
     optional: true
 
-  '@esbuild/linux-riscv64@0.25.12':
+  "@esbuild/linux-riscv64@0.25.12":
     optional: true
 
-  '@esbuild/linux-s390x@0.21.5':
+  "@esbuild/linux-s390x@0.21.5":
     optional: true
 
-  '@esbuild/linux-s390x@0.24.2':
+  "@esbuild/linux-s390x@0.24.2":
     optional: true
 
-  '@esbuild/linux-s390x@0.25.12':
+  "@esbuild/linux-s390x@0.25.12":
     optional: true
 
-  '@esbuild/linux-x64@0.21.5':
+  "@esbuild/linux-x64@0.21.5":
     optional: true
 
-  '@esbuild/linux-x64@0.24.2':
+  "@esbuild/linux-x64@0.24.2":
     optional: true
 
-  '@esbuild/linux-x64@0.25.12':
+  "@esbuild/linux-x64@0.25.12":
     optional: true
 
-  '@esbuild/netbsd-arm64@0.24.2':
+  "@esbuild/netbsd-arm64@0.24.2":
     optional: true
 
-  '@esbuild/netbsd-arm64@0.25.12':
+  "@esbuild/netbsd-arm64@0.25.12":
     optional: true
 
-  '@esbuild/netbsd-x64@0.21.5':
+  "@esbuild/netbsd-x64@0.21.5":
     optional: true
 
-  '@esbuild/netbsd-x64@0.24.2':
+  "@esbuild/netbsd-x64@0.24.2":
     optional: true
 
-  '@esbuild/netbsd-x64@0.25.12':
+  "@esbuild/netbsd-x64@0.25.12":
     optional: true
 
-  '@esbuild/openbsd-arm64@0.24.2':
+  "@esbuild/openbsd-arm64@0.24.2":
     optional: true
 
-  '@esbuild/openbsd-arm64@0.25.12':
+  "@esbuild/openbsd-arm64@0.25.12":
     optional: true
 
-  '@esbuild/openbsd-x64@0.21.5':
+  "@esbuild/openbsd-x64@0.21.5":
     optional: true
 
-  '@esbuild/openbsd-x64@0.24.2':
+  "@esbuild/openbsd-x64@0.24.2":
     optional: true
 
-  '@esbuild/openbsd-x64@0.25.12':
+  "@esbuild/openbsd-x64@0.25.12":
     optional: true
 
-  '@esbuild/openharmony-arm64@0.25.12':
+  "@esbuild/openharmony-arm64@0.25.12":
     optional: true
 
-  '@esbuild/sunos-x64@0.21.5':
+  "@esbuild/sunos-x64@0.21.5":
     optional: true
 
-  '@esbuild/sunos-x64@0.24.2':
+  "@esbuild/sunos-x64@0.24.2":
     optional: true
 
-  '@esbuild/sunos-x64@0.25.12':
+  "@esbuild/sunos-x64@0.25.12":
     optional: true
 
-  '@esbuild/win32-arm64@0.21.5':
+  "@esbuild/win32-arm64@0.21.5":
     optional: true
 
-  '@esbuild/win32-arm64@0.24.2':
+  "@esbuild/win32-arm64@0.24.2":
     optional: true
 
-  '@esbuild/win32-arm64@0.25.12':
+  "@esbuild/win32-arm64@0.25.12":
     optional: true
 
-  '@esbuild/win32-ia32@0.21.5':
+  "@esbuild/win32-ia32@0.21.5":
     optional: true
 
-  '@esbuild/win32-ia32@0.24.2':
+  "@esbuild/win32-ia32@0.24.2":
     optional: true
 
-  '@esbuild/win32-ia32@0.25.12':
+  "@esbuild/win32-ia32@0.25.12":
     optional: true
 
-  '@esbuild/win32-x64@0.21.5':
+  "@esbuild/win32-x64@0.21.5":
     optional: true
 
-  '@esbuild/win32-x64@0.24.2':
+  "@esbuild/win32-x64@0.24.2":
     optional: true
 
-  '@esbuild/win32-x64@0.25.12':
+  "@esbuild/win32-x64@0.25.12":
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.2(jiti@1.21.7))':
+  "@eslint-community/eslint-utils@4.9.1(eslint@9.39.4(jiti@1.21.7))":
     dependencies:
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.4(jiti@1.21.7)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.2(jiti@2.6.1))':
+  "@eslint-community/eslint-utils@4.9.1(eslint@9.39.4(jiti@2.6.1))":
     dependencies:
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.4(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.12.2': {}
+  "@eslint-community/regexpp@4.12.2": {}
 
-  '@eslint/config-array@0.21.1':
+  "@eslint/config-array@0.21.2":
     dependencies:
-      '@eslint/object-schema': 2.1.7
+      "@eslint/object-schema": 2.1.7
       debug: 4.4.3
-      minimatch: 3.1.2
+      minimatch: 3.1.5
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/config-helpers@0.4.2':
+  "@eslint/config-helpers@0.4.2":
     dependencies:
-      '@eslint/core': 0.17.0
+      "@eslint/core": 0.17.0
 
-  '@eslint/core@0.17.0':
+  "@eslint/core@0.17.0":
     dependencies:
-      '@types/json-schema': 7.0.15
+      "@types/json-schema": 7.0.15
 
-  '@eslint/eslintrc@3.3.3':
+  "@eslint/eslintrc@3.3.5":
     dependencies:
-      ajv: 6.12.6
+      ajv: 6.14.0
       debug: 4.4.3
       espree: 10.4.0
       globals: 14.0.0
       ignore: 5.3.2
       import-fresh: 3.3.1
       js-yaml: 4.1.1
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.39.2': {}
+  "@eslint/js@9.39.4": {}
 
-  '@eslint/object-schema@2.1.7': {}
+  "@eslint/object-schema@2.1.7": {}
 
-  '@eslint/plugin-kit@0.4.1':
+  "@eslint/plugin-kit@0.4.1":
     dependencies:
-      '@eslint/core': 0.17.0
+      "@eslint/core": 0.17.0
       levn: 0.4.1
 
-  '@faker-js/faker@9.9.0': {}
+  "@faker-js/faker@9.9.0": {}
 
-  '@feature-sliced/filesystem@3.0.1':
+  "@feature-sliced/filesystem@3.0.1":
     dependencies:
       typescript: 5.9.3
 
-  '@feature-sliced/steiger-plugin@0.5.7(typescript@5.9.3)':
+  "@feature-sliced/steiger-plugin@0.5.7(typescript@5.9.3)":
     dependencies:
-      '@feature-sliced/filesystem': 3.0.1
+      "@feature-sliced/filesystem": 3.0.1
       fastest-levenshtein: 1.0.16
-      lodash-es: 4.17.21
+      lodash-es: 4.17.23
       pluralize: 8.0.0
       precinct: 12.2.0
       tsconfck: 3.1.6(typescript@5.9.3)
@@ -7940,1085 +11658,1090 @@ snapshots:
       - supports-color
       - typescript
 
-  '@floating-ui/core@1.7.3':
+  "@floating-ui/core@1.7.5":
     dependencies:
-      '@floating-ui/utils': 0.2.10
+      "@floating-ui/utils": 0.2.11
 
-  '@floating-ui/dom@1.7.4':
+  "@floating-ui/dom@1.7.6":
     dependencies:
-      '@floating-ui/core': 1.7.3
-      '@floating-ui/utils': 0.2.10
+      "@floating-ui/core": 1.7.5
+      "@floating-ui/utils": 0.2.11
 
-  '@floating-ui/react-dom@2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@floating-ui/react-dom@2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@floating-ui/dom': 1.7.4
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@floating-ui/dom": 1.7.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
-  '@floating-ui/utils@0.2.10': {}
+  "@floating-ui/utils@0.2.11": {}
 
-  '@fontsource-variable/noto-sans-kr@5.2.9': {}
+  "@fontsource-variable/noto-sans-kr@5.2.10": {}
 
-  '@frontend-opensource/use-react-hooks@1.1.4':
+  "@frontend-opensource/use-react-hooks@1.1.4":
     dependencies:
       async-wave: 1.8.6
       fast-deep-equal: 3.1.3
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
-  '@fullcalendar/core@6.1.19':
+  "@fullcalendar/core@6.1.20":
     dependencies:
       preact: 10.12.1
 
-  '@fullcalendar/daygrid@6.1.19(@fullcalendar/core@6.1.19)':
+  "@fullcalendar/daygrid@6.1.20(@fullcalendar/core@6.1.20)":
     dependencies:
-      '@fullcalendar/core': 6.1.19
+      "@fullcalendar/core": 6.1.20
 
-  '@fullcalendar/interaction@6.1.19(@fullcalendar/core@6.1.19)':
+  "@fullcalendar/interaction@6.1.20(@fullcalendar/core@6.1.20)":
     dependencies:
-      '@fullcalendar/core': 6.1.19
+      "@fullcalendar/core": 6.1.20
 
-  '@fullcalendar/react@6.1.19(@fullcalendar/core@6.1.19)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@fullcalendar/react@6.1.20(@fullcalendar/core@6.1.20)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@fullcalendar/core': 6.1.19
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@fullcalendar/core": 6.1.20
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
-  '@fullcalendar/timegrid@6.1.19(@fullcalendar/core@6.1.19)':
+  "@fullcalendar/timegrid@6.1.20(@fullcalendar/core@6.1.20)":
     dependencies:
-      '@fullcalendar/core': 6.1.19
-      '@fullcalendar/daygrid': 6.1.19(@fullcalendar/core@6.1.19)
+      "@fullcalendar/core": 6.1.20
+      "@fullcalendar/daygrid": 6.1.20(@fullcalendar/core@6.1.20)
 
-  '@hookform/resolvers@4.1.3(react-hook-form@7.68.0(react@19.2.3))':
+  "@hookform/resolvers@4.1.3(react-hook-form@7.72.0(react@19.2.4))":
     dependencies:
-      '@standard-schema/utils': 0.3.0
-      react-hook-form: 7.68.0(react@19.2.3)
+      "@standard-schema/utils": 0.3.0
+      react-hook-form: 7.72.0(react@19.2.4)
 
-  '@humanfs/core@0.19.1': {}
+  "@humanfs/core@0.19.1": {}
 
-  '@humanfs/node@0.16.7':
+  "@humanfs/node@0.16.7":
     dependencies:
-      '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.4.3
+      "@humanfs/core": 0.19.1
+      "@humanwhocodes/retry": 0.4.3
 
-  '@humanwhocodes/module-importer@1.0.1': {}
+  "@humanwhocodes/module-importer@1.0.1": {}
 
-  '@humanwhocodes/retry@0.4.3': {}
+  "@humanwhocodes/retry@0.4.3": {}
 
-  '@img/colour@1.0.0':
+  "@img/colour@1.1.0":
     optional: true
 
-  '@img/sharp-darwin-arm64@0.34.5':
+  "@img/sharp-darwin-arm64@0.34.5":
     optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.2.4
+      "@img/sharp-libvips-darwin-arm64": 1.2.4
     optional: true
 
-  '@img/sharp-darwin-x64@0.34.5':
+  "@img/sharp-darwin-x64@0.34.5":
     optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.2.4
+      "@img/sharp-libvips-darwin-x64": 1.2.4
     optional: true
 
-  '@img/sharp-libvips-darwin-arm64@1.2.4':
+  "@img/sharp-libvips-darwin-arm64@1.2.4":
     optional: true
 
-  '@img/sharp-libvips-darwin-x64@1.2.4':
+  "@img/sharp-libvips-darwin-x64@1.2.4":
     optional: true
 
-  '@img/sharp-libvips-linux-arm64@1.2.4':
+  "@img/sharp-libvips-linux-arm64@1.2.4":
     optional: true
 
-  '@img/sharp-libvips-linux-arm@1.2.4':
+  "@img/sharp-libvips-linux-arm@1.2.4":
     optional: true
 
-  '@img/sharp-libvips-linux-ppc64@1.2.4':
+  "@img/sharp-libvips-linux-ppc64@1.2.4":
     optional: true
 
-  '@img/sharp-libvips-linux-riscv64@1.2.4':
+  "@img/sharp-libvips-linux-riscv64@1.2.4":
     optional: true
 
-  '@img/sharp-libvips-linux-s390x@1.2.4':
+  "@img/sharp-libvips-linux-s390x@1.2.4":
     optional: true
 
-  '@img/sharp-libvips-linux-x64@1.2.4':
+  "@img/sharp-libvips-linux-x64@1.2.4":
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+  "@img/sharp-libvips-linuxmusl-arm64@1.2.4":
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+  "@img/sharp-libvips-linuxmusl-x64@1.2.4":
     optional: true
 
-  '@img/sharp-linux-arm64@0.34.5':
+  "@img/sharp-linux-arm64@0.34.5":
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.2.4
+      "@img/sharp-libvips-linux-arm64": 1.2.4
     optional: true
 
-  '@img/sharp-linux-arm@0.34.5':
+  "@img/sharp-linux-arm@0.34.5":
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.2.4
+      "@img/sharp-libvips-linux-arm": 1.2.4
     optional: true
 
-  '@img/sharp-linux-ppc64@0.34.5':
+  "@img/sharp-linux-ppc64@0.34.5":
     optionalDependencies:
-      '@img/sharp-libvips-linux-ppc64': 1.2.4
+      "@img/sharp-libvips-linux-ppc64": 1.2.4
     optional: true
 
-  '@img/sharp-linux-riscv64@0.34.5':
+  "@img/sharp-linux-riscv64@0.34.5":
     optionalDependencies:
-      '@img/sharp-libvips-linux-riscv64': 1.2.4
+      "@img/sharp-libvips-linux-riscv64": 1.2.4
     optional: true
 
-  '@img/sharp-linux-s390x@0.34.5':
+  "@img/sharp-linux-s390x@0.34.5":
     optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.2.4
+      "@img/sharp-libvips-linux-s390x": 1.2.4
     optional: true
 
-  '@img/sharp-linux-x64@0.34.5':
+  "@img/sharp-linux-x64@0.34.5":
     optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.2.4
+      "@img/sharp-libvips-linux-x64": 1.2.4
     optional: true
 
-  '@img/sharp-linuxmusl-arm64@0.34.5':
+  "@img/sharp-linuxmusl-arm64@0.34.5":
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+      "@img/sharp-libvips-linuxmusl-arm64": 1.2.4
     optional: true
 
-  '@img/sharp-linuxmusl-x64@0.34.5':
+  "@img/sharp-linuxmusl-x64@0.34.5":
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+      "@img/sharp-libvips-linuxmusl-x64": 1.2.4
     optional: true
 
-  '@img/sharp-wasm32@0.34.5':
+  "@img/sharp-wasm32@0.34.5":
     dependencies:
-      '@emnapi/runtime': 1.7.1
+      "@emnapi/runtime": 1.9.1
     optional: true
 
-  '@img/sharp-win32-arm64@0.34.5':
+  "@img/sharp-win32-arm64@0.34.5":
     optional: true
 
-  '@img/sharp-win32-ia32@0.34.5':
+  "@img/sharp-win32-ia32@0.34.5":
     optional: true
 
-  '@img/sharp-win32-x64@0.34.5':
+  "@img/sharp-win32-x64@0.34.5":
     optional: true
 
-  '@isaacs/cliui@8.0.2':
+  "@isaacs/cliui@8.0.2":
     dependencies:
       string-width: 5.1.2
       string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.2
+      strip-ansi: 7.2.0
       strip-ansi-cjs: strip-ansi@6.0.1
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))':
+  "@joshwooding/vite-plugin-react-docgen-typescript@0.5.0(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))":
     dependencies:
       glob: 10.5.0
       magic-string: 0.27.0
       react-docgen-typescript: 2.4.0(typescript@5.6.3)
-      vite: 6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3)
     optionalDependencies:
       typescript: 5.6.3
 
-  '@jridgewell/gen-mapping@0.3.13':
+  "@jridgewell/gen-mapping@0.3.13":
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.31
+      "@jridgewell/sourcemap-codec": 1.5.5
+      "@jridgewell/trace-mapping": 0.3.31
 
-  '@jridgewell/remapping@2.3.5':
+  "@jridgewell/remapping@2.3.5":
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
+      "@jridgewell/gen-mapping": 0.3.13
+      "@jridgewell/trace-mapping": 0.3.31
 
-  '@jridgewell/resolve-uri@3.1.2': {}
+  "@jridgewell/resolve-uri@3.1.2": {}
 
-  '@jridgewell/source-map@0.3.11':
+  "@jridgewell/source-map@0.3.11":
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
+      "@jridgewell/gen-mapping": 0.3.13
+      "@jridgewell/trace-mapping": 0.3.31
 
-  '@jridgewell/sourcemap-codec@1.5.5': {}
+  "@jridgewell/sourcemap-codec@1.5.5": {}
 
-  '@jridgewell/trace-mapping@0.3.31':
+  "@jridgewell/trace-mapping@0.3.31":
     dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
+      "@jridgewell/resolve-uri": 3.1.2
+      "@jridgewell/sourcemap-codec": 1.5.5
 
-  '@juggle/resize-observer@3.4.0': {}
+  "@juggle/resize-observer@3.4.0": {}
 
-  '@kurkle/color@0.3.4': {}
+  "@kurkle/color@0.3.4": {}
 
-  '@mapbox/jsonlint-lines-primitives@2.0.2': {}
+  "@mapbox/jsonlint-lines-primitives@2.0.2": {}
 
-  '@mapbox/mapbox-gl-style-spec@13.28.0':
+  "@mapbox/mapbox-gl-style-spec@13.28.0":
     dependencies:
-      '@mapbox/jsonlint-lines-primitives': 2.0.2
-      '@mapbox/point-geometry': 0.1.0
-      '@mapbox/unitbezier': 0.0.0
+      "@mapbox/jsonlint-lines-primitives": 2.0.2
+      "@mapbox/point-geometry": 0.1.0
+      "@mapbox/unitbezier": 0.0.0
       csscolorparser: 1.0.3
       json-stringify-pretty-compact: 2.0.0
       minimist: 1.2.8
       rw: 1.3.3
       sort-object: 0.3.2
 
-  '@mapbox/point-geometry@0.1.0': {}
+  "@mapbox/point-geometry@0.1.0": {}
 
-  '@mapbox/unitbezier@0.0.0': {}
+  "@mapbox/unitbezier@0.0.0": {}
 
-  '@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.3)':
+  "@mdx-js/react@3.1.1(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      '@types/mdx': 2.0.13
-      '@types/react': 19.2.7
-      react: 19.2.3
+      "@types/mdx": 2.0.13
+      "@types/react": 19.2.14
+      react: 19.2.4
 
-  '@minoru/react-dnd-treeview@3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@minoru/react-dnd-treeview@3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@juggle/resize-observer': 3.4.0
+      "@juggle/resize-observer": 3.4.0
       dnd-multi-backend: 8.1.2(dnd-core@16.0.1)
-      framer-motion: 11.18.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dnd: 16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3)
+      framer-motion: 11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dnd: 16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4)
       react-dnd-html5-backend: 16.0.1
       react-dnd-touch-backend: 16.0.1
-      react-dom: 19.2.3(react@19.2.3)
-      react-use-measure: 2.1.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react-dom: 19.2.4(react@19.2.4)
+      react-use-measure: 2.1.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     transitivePeerDependencies:
-      - '@emotion/is-prop-valid'
+      - "@emotion/is-prop-valid"
       - dnd-core
 
-  '@minoru/react-dnd-treeview@3.5.3(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@minoru/react-dnd-treeview@3.5.3(dnd-core@16.0.1)(react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@juggle/resize-observer': 3.4.0
+      "@juggle/resize-observer": 3.4.0
       dnd-multi-backend: 8.1.2(dnd-core@16.0.1)
-      framer-motion: 11.18.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dnd: 16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3)
+      framer-motion: 11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dnd: 16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4)
       react-dnd-html5-backend: 16.0.1
       react-dnd-touch-backend: 16.0.1
-      react-dom: 19.2.3(react@19.2.3)
-      react-use-measure: 2.1.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react-dom: 19.2.4(react@19.2.4)
+      react-use-measure: 2.1.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     transitivePeerDependencies:
-      - '@emotion/is-prop-valid'
+      - "@emotion/is-prop-valid"
       - dnd-core
 
-  '@napi-rs/wasm-runtime@0.2.12':
+  "@napi-rs/wasm-runtime@0.2.12":
     dependencies:
-      '@emnapi/core': 1.7.1
-      '@emnapi/runtime': 1.7.1
-      '@tybys/wasm-util': 0.10.1
+      "@emnapi/core": 1.9.1
+      "@emnapi/runtime": 1.9.1
+      "@tybys/wasm-util": 0.10.1
     optional: true
 
-  '@next/env@15.3.8': {}
+  "@next/env@15.5.18": {}
 
-  '@next/eslint-plugin-next@15.1.7':
+  "@next/eslint-plugin-next@15.3.8":
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/eslint-plugin-next@15.4.0':
+  "@next/swc-darwin-arm64@15.5.18":
+    optional: true
+
+  "@next/swc-darwin-x64@15.5.18":
+    optional: true
+
+  "@next/swc-linux-arm64-gnu@15.5.18":
+    optional: true
+
+  "@next/swc-linux-arm64-musl@15.5.18":
+    optional: true
+
+  "@next/swc-linux-x64-gnu@15.5.18":
+    optional: true
+
+  "@next/swc-linux-x64-musl@15.5.18":
+    optional: true
+
+  "@next/swc-win32-arm64-msvc@15.5.18":
+    optional: true
+
+  "@next/swc-win32-x64-msvc@15.5.18":
+    optional: true
+
+  "@nodelib/fs.scandir@2.1.5":
     dependencies:
-      fast-glob: 3.3.1
-
-  '@next/swc-darwin-arm64@15.3.5':
-    optional: true
-
-  '@next/swc-darwin-x64@15.3.5':
-    optional: true
-
-  '@next/swc-linux-arm64-gnu@15.3.5':
-    optional: true
-
-  '@next/swc-linux-arm64-musl@15.3.5':
-    optional: true
-
-  '@next/swc-linux-x64-gnu@15.3.5':
-    optional: true
-
-  '@next/swc-linux-x64-musl@15.3.5':
-    optional: true
-
-  '@next/swc-win32-arm64-msvc@15.3.5':
-    optional: true
-
-  '@next/swc-win32-x64-msvc@15.3.5':
-    optional: true
-
-  '@nodelib/fs.scandir@2.1.5':
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
+      "@nodelib/fs.stat": 2.0.5
       run-parallel: 1.2.0
 
-  '@nodelib/fs.stat@2.0.5': {}
+  "@nodelib/fs.stat@2.0.5": {}
 
-  '@nodelib/fs.walk@1.2.8':
+  "@nodelib/fs.walk@1.2.8":
     dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.19.1
+      "@nodelib/fs.scandir": 2.1.5
+      fastq: 1.20.1
 
-  '@nolyfill/is-core-module@1.0.39': {}
+  "@nolyfill/is-core-module@1.0.39": {}
 
-  '@petamoriken/float16@3.9.3': {}
+  "@petamoriken/float16@3.9.3": {}
 
-  '@pkgjs/parseargs@0.11.0':
+  "@pkgjs/parseargs@0.11.0":
     optional: true
 
-  '@radix-ui/number@1.1.1': {}
+  "@radix-ui/number@1.1.1": {}
 
-  '@radix-ui/primitive@1.1.3': {}
+  "@radix-ui/primitive@1.1.3": {}
 
-  '@radix-ui/react-accordion@1.2.12(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-accordion@1.2.12(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-collapsible": 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-collection": 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-direction": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-id": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-presence": 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-previous": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-size": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-id": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-presence": 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-layout-effect": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot": 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-context@1.1.2(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-context@1.1.2(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-context@1.1.3(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-context@1.1.3(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-dismissable-layer": 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-focus-guards": 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-focus-scope": 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-id": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-portal": 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-presence": 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot": 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
       aria-hidden: 1.2.6
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-direction@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-callback-ref": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-escape-keydown": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-id": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-menu": 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-callback-ref": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-icons@1.3.2(react@19.2.3)':
+  "@radix-ui/react-icons@1.3.2(react@19.2.4)":
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
 
-  '@radix-ui/react-id@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
+      "@radix-ui/react-use-layout-effect": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-label@2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-label@2.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/react-primitive": 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-collection": 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-direction": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-dismissable-layer": 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-focus-guards": 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-focus-scope": 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-id": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-popper": 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-portal": 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-presence": 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-roving-focus": 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot": 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-callback-ref": 1.1.1(@types/react@19.2.14)(react@19.2.4)
       aria-hidden: 1.2.6
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-dismissable-layer": 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-focus-guards": 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-focus-scope": 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-id": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-popper": 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-portal": 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-presence": 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot": 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
       aria-hidden: 1.2.6
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/rect': 1.1.1
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@floating-ui/react-dom": 2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-arrow": 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-callback-ref": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-layout-effect": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-rect": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-size": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/rect": 1.1.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-layout-effect": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-layout-effect": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/react-slot": 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/react-slot": 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-progress@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-progress@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-context': 1.1.3(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/react-context": 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-direction": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-presence": 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-roving-focus": 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-previous": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-size": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-collection": 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-direction": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-id": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-callback-ref": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/number": 1.1.1
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-direction": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-presence": 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-callback-ref": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-layout-effect": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      "@radix-ui/number": 1.1.1
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-collection": 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-direction": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-dismissable-layer": 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-focus-guards": 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-focus-scope": 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-id": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-popper": 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-portal": 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot": 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-callback-ref": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-layout-effect": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-previous": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-visually-hidden": 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       aria-hidden: 1.2.6
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/react-primitive": 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-slider@1.3.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-slider@1.3.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/number": 1.1.1
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-collection": 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-direction": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-layout-effect": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-previous": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-size": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-slot@1.2.3(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-slot@1.2.4(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-slot@1.2.4(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-switch@1.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-switch@1.2.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-previous": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-size": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-direction": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-id": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-presence": 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-roving-focus": 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/primitive": 1.1.3
+      "@radix-ui/react-compose-refs": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-context": 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-dismissable-layer": 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-id": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-popper": 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-portal": 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-presence": 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      "@radix-ui/react-slot": 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-controllable-state": 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-visually-hidden": 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.2.3)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
+      "@radix-ui/react-use-effect-event": 0.0.2(@types/react@19.2.14)(react@19.2.4)
+      "@radix-ui/react-use-layout-effect": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
+      "@radix-ui/react-use-layout-effect": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
+      "@radix-ui/react-use-callback-ref": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-use-previous@1.1.1(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      '@radix-ui/rect': 1.1.1
-      react: 19.2.3
+      "@radix-ui/rect": 1.1.1
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+  "@radix-ui/react-use-size@1.1.1(@types/react@19.2.14)(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
-      react: 19.2.3
+      "@radix-ui/react-use-layout-effect": 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/react-primitive": 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-visually-hidden@1.2.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@radix-ui/react-visually-hidden@1.2.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@radix-ui/react-primitive": 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      "@types/react": 19.2.14
+      "@types/react-dom": 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/rect@1.1.1': {}
+  "@radix-ui/rect@1.1.1": {}
 
-  '@react-dnd/asap@5.0.2': {}
+  "@react-dnd/asap@5.0.2": {}
 
-  '@react-dnd/invariant@4.0.2': {}
+  "@react-dnd/invariant@4.0.2": {}
 
-  '@react-dnd/shallowequal@4.0.2': {}
+  "@react-dnd/shallowequal@4.0.2": {}
 
-  '@rolldown/pluginutils@1.0.0-beta.27': {}
+  "@rolldown/pluginutils@1.0.0-beta.27": {}
 
-  '@rollup/pluginutils@5.3.0(rollup@4.53.3)':
+  "@rollup/pluginutils@5.3.0(rollup@4.60.0)":
     dependencies:
-      '@types/estree': 1.0.8
+      "@types/estree": 1.0.8
       estree-walker: 2.0.2
-      picomatch: 4.0.3
+      picomatch: 4.0.4
     optionalDependencies:
-      rollup: 4.53.3
+      rollup: 4.60.0
 
-  '@rollup/rollup-android-arm-eabi@4.53.3':
+  "@rollup/rollup-android-arm-eabi@4.60.0":
     optional: true
 
-  '@rollup/rollup-android-arm64@4.53.3':
+  "@rollup/rollup-android-arm64@4.60.0":
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.53.3':
+  "@rollup/rollup-darwin-arm64@4.60.0":
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.53.3':
+  "@rollup/rollup-darwin-x64@4.60.0":
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.53.3':
+  "@rollup/rollup-freebsd-arm64@4.60.0":
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.53.3':
+  "@rollup/rollup-freebsd-x64@4.60.0":
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.53.3':
+  "@rollup/rollup-linux-arm-gnueabihf@4.60.0":
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.53.3':
+  "@rollup/rollup-linux-arm-musleabihf@4.60.0":
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.53.3':
+  "@rollup/rollup-linux-arm64-gnu@4.60.0":
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.53.3':
+  "@rollup/rollup-linux-arm64-musl@4.60.0":
     optional: true
 
-  '@rollup/rollup-linux-loong64-gnu@4.53.3':
+  "@rollup/rollup-linux-loong64-gnu@4.60.0":
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.53.3':
+  "@rollup/rollup-linux-loong64-musl@4.60.0":
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.53.3':
+  "@rollup/rollup-linux-ppc64-gnu@4.60.0":
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.53.3':
+  "@rollup/rollup-linux-ppc64-musl@4.60.0":
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.53.3':
+  "@rollup/rollup-linux-riscv64-gnu@4.60.0":
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.53.3':
+  "@rollup/rollup-linux-riscv64-musl@4.60.0":
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.53.3':
+  "@rollup/rollup-linux-s390x-gnu@4.60.0":
     optional: true
 
-  '@rollup/rollup-openharmony-arm64@4.53.3':
+  "@rollup/rollup-linux-x64-gnu@4.60.0":
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.53.3':
+  "@rollup/rollup-linux-x64-musl@4.60.0":
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.53.3':
+  "@rollup/rollup-openbsd-x64@4.60.0":
     optional: true
 
-  '@rollup/rollup-win32-x64-gnu@4.53.3':
+  "@rollup/rollup-openharmony-arm64@4.60.0":
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.53.3':
+  "@rollup/rollup-win32-arm64-msvc@4.60.0":
     optional: true
 
-  '@rtsao/scc@1.1.0': {}
+  "@rollup/rollup-win32-ia32-msvc@4.60.0":
+    optional: true
 
-  '@rushstack/eslint-patch@1.15.0': {}
+  "@rollup/rollup-win32-x64-gnu@4.60.0":
+    optional: true
 
-  '@sindresorhus/merge-streams@2.3.0': {}
+  "@rollup/rollup-win32-x64-msvc@4.60.0":
+    optional: true
 
-  '@standard-schema/utils@0.3.0': {}
+  "@rtsao/scc@1.1.0": {}
 
-  '@storybook/addon-actions@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@rushstack/eslint-patch@1.16.1": {}
+
+  "@sindresorhus/merge-streams@2.3.0": {}
+
+  "@standard-schema/utils@0.3.0": {}
+
+  "@storybook/addon-actions@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@storybook/global': 5.0.0
-      '@types/uuid': 9.0.8
+      "@storybook/global": 5.0.0
+      "@types/uuid": 9.0.8
       dequal: 2.0.3
       polished: 4.3.1
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
       uuid: 9.0.1
 
-  '@storybook/addon-backgrounds@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/addon-backgrounds@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@storybook/global': 5.0.0
+      "@storybook/global": 5.0.0
       memoizerific: 1.11.3
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-controls@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/addon-controls@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@storybook/global': 5.0.0
+      "@storybook/global": 5.0.0
       dequal: 2.0.3
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-docs@8.6.14(@types/react@19.2.7)(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/addon-docs@8.6.14(@types/react@19.2.14)(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@mdx-js/react': 3.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@storybook/blocks': 8.6.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/csf-plugin': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/react-dom-shim': 8.6.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@8.6.14(prettier@3.7.4))
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      storybook: 8.6.14(prettier@3.7.4)
+      "@mdx-js/react": 3.1.1(@types/react@19.2.14)(react@19.2.4)
+      "@storybook/blocks": 8.6.14(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/csf-plugin": 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/react-dom-shim": 8.6.14(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@8.6.18(prettier@3.8.1))
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      storybook: 8.6.18(prettier@3.8.1)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
-      - '@types/react'
+      - "@types/react"
 
-  '@storybook/addon-essentials@8.6.14(@types/react@19.2.7)(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/addon-essentials@8.6.14(@types/react@19.2.14)(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@storybook/addon-actions': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-backgrounds': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-controls': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-docs': 8.6.14(@types/react@19.2.7)(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-highlight': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-measure': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-outline': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-toolbars': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/addon-viewport': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      storybook: 8.6.14(prettier@3.7.4)
+      "@storybook/addon-actions": 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-backgrounds": 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-controls": 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-docs": 8.6.14(@types/react@19.2.14)(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-highlight": 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-measure": 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-outline": 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-toolbars": 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/addon-viewport": 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      storybook: 8.6.18(prettier@3.8.1)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
-      - '@types/react'
+      - "@types/react"
 
-  '@storybook/addon-highlight@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/addon-highlight@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@storybook/global': 5.0.0
-      storybook: 8.6.14(prettier@3.7.4)
+      "@storybook/global": 5.0.0
+      storybook: 8.6.18(prettier@3.8.1)
 
-  '@storybook/addon-interactions@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/addon-interactions@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/test': 8.6.14(storybook@8.6.14(prettier@3.7.4))
+      "@storybook/global": 5.0.0
+      "@storybook/instrumenter": 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/test": 8.6.14(storybook@8.6.18(prettier@3.8.1))
       polished: 4.3.1
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-measure@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/addon-measure@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@storybook/global': 5.0.0
-      storybook: 8.6.14(prettier@3.7.4)
+      "@storybook/global": 5.0.0
+      storybook: 8.6.18(prettier@3.8.1)
       tiny-invariant: 1.3.3
 
-  '@storybook/addon-onboarding@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/addon-onboarding@8.6.18(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
 
-  '@storybook/addon-outline@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/addon-outline@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@storybook/global': 5.0.0
-      storybook: 8.6.14(prettier@3.7.4)
+      "@storybook/global": 5.0.0
+      storybook: 8.6.18(prettier@3.8.1)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-themes@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/addon-themes@8.6.18(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-toolbars@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/addon-toolbars@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
 
-  '@storybook/addon-viewport@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/addon-viewport@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
       memoizerific: 1.11.3
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
 
-  '@storybook/blocks@8.6.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/blocks@8.6.14(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@storybook/icons': 1.6.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      storybook: 8.6.14(prettier@3.7.4)
+      "@storybook/icons": 1.6.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      storybook: 8.6.18(prettier@3.8.1)
       ts-dedent: 2.2.0
     optionalDependencies:
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
-  '@storybook/builder-vite@8.6.14(storybook@8.6.14(prettier@3.7.4))(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))':
+  "@storybook/builder-vite@8.6.18(storybook@8.6.18(prettier@3.8.1))(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))":
     dependencies:
-      '@storybook/csf-plugin': 8.6.14(storybook@8.6.14(prettier@3.7.4))
+      "@storybook/csf-plugin": 8.6.18(storybook@8.6.18(prettier@3.8.1))
       browser-assert: 1.2.1
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
       ts-dedent: 2.2.0
-      vite: 6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3)
 
-  '@storybook/components@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/components@8.6.18(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
 
-  '@storybook/core@8.6.14(prettier@3.7.4)(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/core@8.6.18(prettier@3.8.1)(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@storybook/theming': 8.6.14(storybook@8.6.14(prettier@3.7.4))
+      "@storybook/theming": 8.6.18(storybook@8.6.18(prettier@3.8.1))
       better-opn: 3.0.2
       browser-assert: 1.2.1
       esbuild: 0.25.12
@@ -9026,864 +12749,848 @@ snapshots:
       jsdoc-type-pratt-parser: 4.8.0
       process: 0.11.10
       recast: 0.23.11
-      semver: 7.7.3
+      semver: 7.7.4
       util: 0.12.5
-      ws: 8.18.3
+      ws: 8.20.0
     optionalDependencies:
-      prettier: 3.7.4
+      prettier: 3.8.1
     transitivePeerDependencies:
       - bufferutil
       - storybook
       - supports-color
       - utf-8-validate
 
-  '@storybook/csf-plugin@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/csf-plugin@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
       unplugin: 1.16.1
 
-  '@storybook/csf@0.1.13':
+  "@storybook/csf-plugin@8.6.18(storybook@8.6.18(prettier@3.8.1))":
+    dependencies:
+      storybook: 8.6.18(prettier@3.8.1)
+      unplugin: 1.16.1
+
+  "@storybook/csf@0.1.13":
     dependencies:
       type-fest: 2.19.0
 
-  '@storybook/global@5.0.0': {}
+  "@storybook/global@5.0.0": {}
 
-  '@storybook/icons@1.6.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@storybook/icons@1.6.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
-  '@storybook/instrumenter@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/instrumenter@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@storybook/global': 5.0.0
-      '@vitest/utils': 2.1.9
-      storybook: 8.6.14(prettier@3.7.4)
+      "@storybook/global": 5.0.0
+      "@vitest/utils": 2.1.9
+      storybook: 8.6.18(prettier@3.8.1)
 
-  '@storybook/manager-api@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/instrumenter@8.6.15(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      "@storybook/global": 5.0.0
+      "@vitest/utils": 2.1.9
+      storybook: 8.6.18(prettier@3.8.1)
 
-  '@storybook/preview-api@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/manager-api@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
 
-  '@storybook/react-dom-shim@8.6.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/manager-api@8.6.18(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
 
-  '@storybook/react-vite@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(rollup@4.53.3)(storybook@8.6.14(prettier@3.7.4))(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))':
+  "@storybook/preview-api@8.6.18(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.5.0(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
-      '@rollup/pluginutils': 5.3.0(rollup@4.53.3)
-      '@storybook/builder-vite': 8.6.14(storybook@8.6.14(prettier@3.7.4))(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
-      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@8.6.14(prettier@3.7.4))(typescript@5.6.3)
+      storybook: 8.6.18(prettier@3.8.1)
+
+  "@storybook/react-dom-shim@8.6.14(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@8.6.18(prettier@3.8.1))":
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      storybook: 8.6.18(prettier@3.8.1)
+
+  "@storybook/react-dom-shim@8.6.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@8.6.18(prettier@3.8.1))":
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      storybook: 8.6.18(prettier@3.8.1)
+
+  "@storybook/react-vite@8.6.18(@storybook/test@8.6.15(storybook@8.6.18(prettier@3.8.1)))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(rollup@4.60.0)(storybook@8.6.18(prettier@3.8.1))(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))":
+    dependencies:
+      "@joshwooding/vite-plugin-react-docgen-typescript": 0.5.0(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))
+      "@rollup/pluginutils": 5.3.0(rollup@4.60.0)
+      "@storybook/builder-vite": 8.6.18(storybook@8.6.18(prettier@3.8.1))(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))
+      "@storybook/react": 8.6.18(@storybook/test@8.6.15(storybook@8.6.18(prettier@3.8.1)))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@8.6.18(prettier@3.8.1))(typescript@5.6.3)
       find-up: 5.0.0
       magic-string: 0.30.21
-      react: 19.2.3
+      react: 19.2.4
       react-docgen: 7.1.1
-      react-dom: 19.2.3(react@19.2.3)
+      react-dom: 19.2.4(react@19.2.4)
       resolve: 1.22.11
-      storybook: 8.6.14(prettier@3.7.4)
+      storybook: 8.6.18(prettier@3.8.1)
       tsconfig-paths: 4.2.0
-      vite: 6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3)
     optionalDependencies:
-      '@storybook/test': 8.6.14(storybook@8.6.14(prettier@3.7.4))
+      "@storybook/test": 8.6.15(storybook@8.6.18(prettier@3.8.1))
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  '@storybook/react@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@8.6.14(prettier@3.7.4))(typescript@5.6.3)':
+  "@storybook/react@8.6.18(@storybook/test@8.6.15(storybook@8.6.18(prettier@3.8.1)))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@8.6.18(prettier@3.8.1))(typescript@5.6.3)":
     dependencies:
-      '@storybook/components': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/global': 5.0.0
-      '@storybook/manager-api': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/preview-api': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/react-dom-shim': 8.6.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@8.6.14(prettier@3.7.4))
-      '@storybook/theming': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      storybook: 8.6.14(prettier@3.7.4)
+      "@storybook/components": 8.6.18(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/global": 5.0.0
+      "@storybook/manager-api": 8.6.18(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/preview-api": 8.6.18(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/react-dom-shim": 8.6.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@8.6.18(prettier@3.8.1))
+      "@storybook/theming": 8.6.18(storybook@8.6.18(prettier@3.8.1))
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      storybook: 8.6.18(prettier@3.8.1)
     optionalDependencies:
-      '@storybook/test': 8.6.14(storybook@8.6.14(prettier@3.7.4))
+      "@storybook/test": 8.6.15(storybook@8.6.18(prettier@3.8.1))
       typescript: 5.6.3
 
-  '@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/test@8.6.14(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.6.14(storybook@8.6.14(prettier@3.7.4))
-      '@testing-library/dom': 10.4.0
-      '@testing-library/jest-dom': 6.5.0
-      '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
-      '@vitest/expect': 2.0.5
-      '@vitest/spy': 2.0.5
-      storybook: 8.6.14(prettier@3.7.4)
+      "@storybook/global": 5.0.0
+      "@storybook/instrumenter": 8.6.14(storybook@8.6.18(prettier@3.8.1))
+      "@testing-library/dom": 10.4.0
+      "@testing-library/jest-dom": 6.5.0
+      "@testing-library/user-event": 14.5.2(@testing-library/dom@10.4.0)
+      "@vitest/expect": 2.0.5
+      "@vitest/spy": 2.0.5
+      storybook: 8.6.18(prettier@3.8.1)
 
-  '@storybook/theming@8.6.14(storybook@8.6.14(prettier@3.7.4))':
+  "@storybook/test@8.6.15(storybook@8.6.18(prettier@3.8.1))":
     dependencies:
-      storybook: 8.6.14(prettier@3.7.4)
+      "@storybook/global": 5.0.0
+      "@storybook/instrumenter": 8.6.15(storybook@8.6.18(prettier@3.8.1))
+      "@testing-library/dom": 10.4.0
+      "@testing-library/jest-dom": 6.5.0
+      "@testing-library/user-event": 14.5.2(@testing-library/dom@10.4.0)
+      "@vitest/expect": 2.0.5
+      "@vitest/spy": 2.0.5
+      storybook: 8.6.18(prettier@3.8.1)
 
-  '@swc/counter@0.1.3': {}
+  "@storybook/theming@8.6.14(storybook@8.6.18(prettier@3.8.1))":
+    dependencies:
+      storybook: 8.6.18(prettier@3.8.1)
 
-  '@swc/helpers@0.5.15':
+  "@storybook/theming@8.6.18(storybook@8.6.18(prettier@3.8.1))":
+    dependencies:
+      storybook: 8.6.18(prettier@3.8.1)
+
+  "@swc/helpers@0.5.15":
     dependencies:
       tslib: 2.8.1
 
-  '@tailwindcss/node@4.1.18':
+  "@tabby_ai/hijri-converter@1.0.5": {}
+
+  "@tailwindcss/node@4.2.2":
     dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.18.4
+      "@jridgewell/remapping": 2.3.5
+      enhanced-resolve: 5.20.1
       jiti: 2.6.1
-      lightningcss: 1.30.2
+      lightningcss: 1.32.0
       magic-string: 0.30.21
       source-map-js: 1.2.1
-      tailwindcss: 4.1.18
+      tailwindcss: 4.2.2
 
-  '@tailwindcss/oxide-android-arm64@4.1.18':
+  "@tailwindcss/oxide-android-arm64@4.2.2":
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.18':
+  "@tailwindcss/oxide-darwin-arm64@4.2.2":
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.1.18':
+  "@tailwindcss/oxide-darwin-x64@4.2.2":
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.18':
+  "@tailwindcss/oxide-freebsd-x64@4.2.2":
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
+  "@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2":
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
+  "@tailwindcss/oxide-linux-arm64-gnu@4.2.2":
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
+  "@tailwindcss/oxide-linux-arm64-musl@4.2.2":
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
+  "@tailwindcss/oxide-linux-x64-gnu@4.2.2":
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
+  "@tailwindcss/oxide-linux-x64-musl@4.2.2":
     optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
+  "@tailwindcss/oxide-wasm32-wasi@4.2.2":
     optional: true
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
+  "@tailwindcss/oxide-win32-arm64-msvc@4.2.2":
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
+  "@tailwindcss/oxide-win32-x64-msvc@4.2.2":
     optional: true
 
-  '@tailwindcss/oxide@4.1.18':
+  "@tailwindcss/oxide@4.2.2":
     optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.18
-      '@tailwindcss/oxide-darwin-arm64': 4.1.18
-      '@tailwindcss/oxide-darwin-x64': 4.1.18
-      '@tailwindcss/oxide-freebsd-x64': 4.1.18
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.18
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.18
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.18
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.18
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.18
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.18
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
+      "@tailwindcss/oxide-android-arm64": 4.2.2
+      "@tailwindcss/oxide-darwin-arm64": 4.2.2
+      "@tailwindcss/oxide-darwin-x64": 4.2.2
+      "@tailwindcss/oxide-freebsd-x64": 4.2.2
+      "@tailwindcss/oxide-linux-arm-gnueabihf": 4.2.2
+      "@tailwindcss/oxide-linux-arm64-gnu": 4.2.2
+      "@tailwindcss/oxide-linux-arm64-musl": 4.2.2
+      "@tailwindcss/oxide-linux-x64-gnu": 4.2.2
+      "@tailwindcss/oxide-linux-x64-musl": 4.2.2
+      "@tailwindcss/oxide-wasm32-wasi": 4.2.2
+      "@tailwindcss/oxide-win32-arm64-msvc": 4.2.2
+      "@tailwindcss/oxide-win32-x64-msvc": 4.2.2
 
-  '@tailwindcss/vite@4.1.18(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))':
+  "@tailwindcss/vite@4.2.2(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))":
     dependencies:
-      '@tailwindcss/node': 4.1.18
-      '@tailwindcss/oxide': 4.1.18
-      tailwindcss: 4.1.18
-      vite: 6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2)
+      "@tailwindcss/node": 4.2.2
+      "@tailwindcss/oxide": 4.2.2
+      tailwindcss: 4.2.2
+      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3)
 
-  '@tanstack/query-core@5.90.12': {}
+  "@tanstack/query-core@5.95.2": {}
 
-  '@tanstack/query-devtools@5.91.1': {}
+  "@tanstack/query-devtools@5.95.2": {}
 
-  '@tanstack/react-query-devtools@5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)':
+  "@tanstack/react-query-devtools@5.95.2(@tanstack/react-query@5.95.2(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@tanstack/query-devtools': 5.91.1
-      '@tanstack/react-query': 5.90.12(react@19.2.3)
-      react: 19.2.3
+      "@tanstack/query-devtools": 5.95.2
+      "@tanstack/react-query": 5.95.2(react@19.2.4)
+      react: 19.2.4
 
-  '@tanstack/react-query@5.90.12(react@19.2.3)':
+  "@tanstack/react-query@5.95.2(react@19.2.4)":
     dependencies:
-      '@tanstack/query-core': 5.90.12
-      react: 19.2.3
+      "@tanstack/query-core": 5.95.2
+      react: 19.2.4
 
-  '@tanstack/react-table@8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@tanstack/react-table@8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
-      '@tanstack/table-core': 8.21.3
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      "@tanstack/table-core": 8.21.3
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
-  '@tanstack/table-core@8.21.3': {}
+  "@tanstack/table-core@8.21.3": {}
 
-  '@testing-library/dom@10.4.0':
+  "@testing-library/dom@10.4.0":
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/runtime': 7.28.4
-      '@types/aria-query': 5.0.4
+      "@babel/code-frame": 7.29.0
+      "@babel/runtime": 7.29.2
+      "@types/aria-query": 5.0.4
       aria-query: 5.3.0
       chalk: 4.1.2
       dom-accessibility-api: 0.5.16
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/jest-dom@6.5.0':
+  "@testing-library/jest-dom@6.5.0":
     dependencies:
-      '@adobe/css-tools': 4.4.4
+      "@adobe/css-tools": 4.4.4
       aria-query: 5.3.2
       chalk: 3.0.0
       css.escape: 1.5.1
       dom-accessibility-api: 0.6.3
-      lodash: 4.17.21
+      lodash: 4.17.23
       redent: 3.0.0
 
-  '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
+  "@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)":
     dependencies:
-      '@testing-library/dom': 10.4.0
+      "@testing-library/dom": 10.4.0
 
-  '@tinymce/tinymce-react@5.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  "@tinymce/tinymce-react@5.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)":
     dependencies:
       prop-types: 15.8.1
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      tinymce: 7.9.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      tinymce: 7.9.2
 
-  '@tybys/wasm-util@0.10.1':
+  "@tybys/wasm-util@0.10.1":
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@types/aria-query@5.0.4': {}
+  "@types/aria-query@5.0.4": {}
 
-  '@types/babel__core@7.20.5':
+  "@types/babel__core@7.20.5":
     dependencies:
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-      '@types/babel__generator': 7.27.0
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.28.0
+      "@babel/parser": 7.29.2
+      "@babel/types": 7.29.0
+      "@types/babel__generator": 7.27.0
+      "@types/babel__template": 7.4.4
+      "@types/babel__traverse": 7.28.0
 
-  '@types/babel__generator@7.27.0':
+  "@types/babel__generator@7.27.0":
     dependencies:
-      '@babel/types': 7.28.5
+      "@babel/types": 7.29.0
 
-  '@types/babel__template@7.4.4':
+  "@types/babel__template@7.4.4":
     dependencies:
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
+      "@babel/parser": 7.29.2
+      "@babel/types": 7.29.0
 
-  '@types/babel__traverse@7.28.0':
+  "@types/babel__traverse@7.28.0":
     dependencies:
-      '@babel/types': 7.28.5
+      "@babel/types": 7.29.0
 
-  '@types/d3-array@3.2.2': {}
+  "@types/d3-array@3.2.2": {}
 
-  '@types/d3-color@3.1.3': {}
+  "@types/d3-color@3.1.3": {}
 
-  '@types/d3-ease@3.0.2': {}
+  "@types/d3-ease@3.0.2": {}
 
-  '@types/d3-interpolate@3.0.4':
+  "@types/d3-interpolate@3.0.4":
     dependencies:
-      '@types/d3-color': 3.1.3
+      "@types/d3-color": 3.1.3
 
-  '@types/d3-path@3.1.1': {}
+  "@types/d3-path@3.1.1": {}
 
-  '@types/d3-scale@4.0.9':
+  "@types/d3-scale@4.0.9":
     dependencies:
-      '@types/d3-time': 3.0.4
+      "@types/d3-time": 3.0.4
 
-  '@types/d3-shape@3.1.7':
+  "@types/d3-shape@3.1.8":
     dependencies:
-      '@types/d3-path': 3.1.1
+      "@types/d3-path": 3.1.1
 
-  '@types/d3-time@3.0.4': {}
+  "@types/d3-time@3.0.4": {}
 
-  '@types/d3-timer@3.0.2': {}
+  "@types/d3-timer@3.0.2": {}
 
-  '@types/doctrine@0.0.9': {}
+  "@types/doctrine@0.0.9": {}
 
-  '@types/eslint-scope@3.7.7':
+  "@types/eslint-scope@3.7.7":
     dependencies:
-      '@types/eslint': 9.6.1
-      '@types/estree': 1.0.8
+      "@types/eslint": 9.6.1
+      "@types/estree": 1.0.8
 
-  '@types/eslint@9.6.1':
+  "@types/eslint@9.6.1":
     dependencies:
-      '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
+      "@types/estree": 1.0.8
+      "@types/json-schema": 7.0.15
 
-  '@types/estree@1.0.8': {}
+  "@types/estree@1.0.8": {}
 
-  '@types/hammerjs@2.0.46': {}
+  "@types/hammerjs@2.0.46": {}
 
-  '@types/js-cookie@3.0.6': {}
+  "@types/js-cookie@3.0.6": {}
 
-  '@types/json-schema@7.0.15': {}
+  "@types/json-schema@7.0.15": {}
 
-  '@types/json5@0.0.29': {}
+  "@types/json5@0.0.29": {}
 
-  '@types/mdx@2.0.13': {}
+  "@types/mdx@2.0.13": {}
 
-  '@types/node@20.19.26':
+  "@types/node@20.19.37":
     dependencies:
       undici-types: 6.21.0
 
-  '@types/node@22.19.2':
+  "@types/node@22.19.15":
     dependencies:
       undici-types: 6.21.0
 
-  '@types/react-dom@19.2.3(@types/react@19.2.7)':
+  "@types/react-dom@19.2.3(@types/react@19.2.14)":
     dependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  '@types/react@19.2.7':
+  "@types/react@19.2.14":
     dependencies:
       csstype: 3.2.3
 
-  '@types/resolve@1.20.6': {}
+  "@types/resolve@1.20.6": {}
 
-  '@types/uuid@9.0.8': {}
+  "@types/uuid@9.0.8": {}
 
-  '@types/webpack@5.28.5':
+  "@types/webpack@5.28.5":
     dependencies:
-      '@types/node': 22.19.2
-      tapable: 2.3.0
-      webpack: 5.103.0
+      "@types/node": 22.19.15
+      tapable: 2.3.2
+      webpack: 5.105.4
     transitivePeerDependencies:
-      - '@swc/core'
+      - "@swc/core"
       - esbuild
       - uglify-js
       - webpack-cli
 
-  '@types/xlsx@0.0.36':
+  "@types/xlsx@0.0.36":
     dependencies:
       xlsx: 0.18.5
 
-  '@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+  "@typescript-eslint/eslint-plugin@8.57.2(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)":
     dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/type-utils': 8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.49.0
-      eslint: 9.39.2(jiti@1.21.7)
+      "@eslint-community/regexpp": 4.12.2
+      "@typescript-eslint/parser": 8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
+      "@typescript-eslint/scope-manager": 8.57.2
+      "@typescript-eslint/type-utils": 8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
+      "@typescript-eslint/utils": 8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
+      "@typescript-eslint/visitor-keys": 8.57.2
+      eslint: 9.39.4(jiti@1.21.7)
       ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.9.3)
+      ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)':
+  "@typescript-eslint/eslint-plugin@8.57.2(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)":
     dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)
-      '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/type-utils': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 8.49.0
-      eslint: 9.39.2(jiti@2.6.1)
+      "@eslint-community/regexpp": 4.12.2
+      "@typescript-eslint/parser": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)
+      "@typescript-eslint/scope-manager": 8.57.2
+      "@typescript-eslint/type-utils": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)
+      "@typescript-eslint/utils": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)
+      "@typescript-eslint/visitor-keys": 8.57.2
+      eslint: 9.39.4(jiti@2.6.1)
       ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.6.3)
+      ts-api-utils: 2.5.0(typescript@5.6.3)
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  "@typescript-eslint/eslint-plugin@8.57.2(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)":
     dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/type-utils': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.49.0
-      eslint: 9.39.2(jiti@2.6.1)
+      "@eslint-community/regexpp": 4.12.2
+      "@typescript-eslint/parser": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      "@typescript-eslint/scope-manager": 8.57.2
+      "@typescript-eslint/type-utils": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      "@typescript-eslint/utils": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      "@typescript-eslint/visitor-keys": 8.57.2
+      eslint: 9.39.4(jiti@2.6.1)
       ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.9.3)
+      ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+  "@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)":
     dependencies:
-      '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.49.0
+      "@typescript-eslint/scope-manager": 8.57.2
+      "@typescript-eslint/types": 8.57.2
+      "@typescript-eslint/typescript-estree": 8.57.2(typescript@5.9.3)
+      "@typescript-eslint/visitor-keys": 8.57.2
       debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.4(jiti@1.21.7)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)':
+  "@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)":
     dependencies:
-      '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 8.49.0
+      "@typescript-eslint/scope-manager": 8.57.2
+      "@typescript-eslint/types": 8.57.2
+      "@typescript-eslint/typescript-estree": 8.57.2(typescript@5.6.3)
+      "@typescript-eslint/visitor-keys": 8.57.2
       debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.4(jiti@2.6.1)
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  "@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)":
     dependencies:
-      '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.49.0
+      "@typescript-eslint/scope-manager": 8.57.2
+      "@typescript-eslint/types": 8.57.2
+      "@typescript-eslint/typescript-estree": 8.57.2(typescript@5.9.3)
+      "@typescript-eslint/visitor-keys": 8.57.2
       debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.4(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.56.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  "@typescript-eslint/project-service@8.57.2(typescript@5.6.3)":
     dependencies:
-      '@typescript-eslint/scope-manager': 8.56.1
-      '@typescript-eslint/types': 8.56.1
-      '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.56.1
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/project-service@8.49.0(typescript@5.6.3)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.6.3)
-      '@typescript-eslint/types': 8.49.0
+      "@typescript-eslint/tsconfig-utils": 8.57.2(typescript@5.6.3)
+      "@typescript-eslint/types": 8.57.2
       debug: 4.4.3
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.49.0(typescript@5.9.3)':
+  "@typescript-eslint/project-service@8.57.2(typescript@5.9.3)":
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.49.0
+      "@typescript-eslint/tsconfig-utils": 8.57.2(typescript@5.9.3)
+      "@typescript-eslint/types": 8.57.2
       debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.56.1(typescript@5.9.3)':
+  "@typescript-eslint/scope-manager@8.57.2":
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.56.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.56.1
-      debug: 4.4.3
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
+      "@typescript-eslint/types": 8.57.2
+      "@typescript-eslint/visitor-keys": 8.57.2
 
-  '@typescript-eslint/scope-manager@8.49.0':
-    dependencies:
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/visitor-keys': 8.49.0
-
-  '@typescript-eslint/scope-manager@8.56.1':
-    dependencies:
-      '@typescript-eslint/types': 8.56.1
-      '@typescript-eslint/visitor-keys': 8.56.1
-
-  '@typescript-eslint/tsconfig-utils@8.49.0(typescript@5.6.3)':
+  "@typescript-eslint/tsconfig-utils@8.57.2(typescript@5.6.3)":
     dependencies:
       typescript: 5.6.3
 
-  '@typescript-eslint/tsconfig-utils@8.49.0(typescript@5.9.3)':
+  "@typescript-eslint/tsconfig-utils@8.57.2(typescript@5.9.3)":
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/tsconfig-utils@8.56.1(typescript@5.9.3)':
+  "@typescript-eslint/type-utils@8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)":
     dependencies:
-      typescript: 5.9.3
-
-  '@typescript-eslint/type-utils@8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      "@typescript-eslint/types": 8.57.2
+      "@typescript-eslint/typescript-estree": 8.57.2(typescript@5.9.3)
+      "@typescript-eslint/utils": 8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
       debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      ts-api-utils: 2.1.0(typescript@5.9.3)
+      eslint: 9.39.4(jiti@1.21.7)
+      ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)':
+  "@typescript-eslint/type-utils@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)":
     dependencies:
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)
+      "@typescript-eslint/types": 8.57.2
+      "@typescript-eslint/typescript-estree": 8.57.2(typescript@5.6.3)
+      "@typescript-eslint/utils": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)
       debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
-      ts-api-utils: 2.1.0(typescript@5.6.3)
+      eslint: 9.39.4(jiti@2.6.1)
+      ts-api-utils: 2.5.0(typescript@5.6.3)
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  "@typescript-eslint/type-utils@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)":
     dependencies:
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      "@typescript-eslint/types": 8.57.2
+      "@typescript-eslint/typescript-estree": 8.57.2(typescript@5.9.3)
+      "@typescript-eslint/utils": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
-      ts-api-utils: 2.1.0(typescript@5.9.3)
+      eslint: 9.39.4(jiti@2.6.1)
+      ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.49.0': {}
+  "@typescript-eslint/types@8.57.2": {}
 
-  '@typescript-eslint/types@8.56.1': {}
-
-  '@typescript-eslint/typescript-estree@8.49.0(typescript@5.6.3)':
+  "@typescript-eslint/typescript-estree@8.57.2(typescript@5.6.3)":
     dependencies:
-      '@typescript-eslint/project-service': 8.49.0(typescript@5.6.3)
-      '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.6.3)
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/visitor-keys': 8.49.0
-      debug: 4.4.3
-      minimatch: 9.0.5
-      semver: 7.7.3
-      tinyglobby: 0.2.15
-      ts-api-utils: 2.1.0(typescript@5.6.3)
-      typescript: 5.6.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/typescript-estree@8.49.0(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.49.0(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/visitor-keys': 8.49.0
-      debug: 4.4.3
-      minimatch: 9.0.5
-      semver: 7.7.3
-      tinyglobby: 0.2.15
-      ts-api-utils: 2.1.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/typescript-estree@8.56.1(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.56.1(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.56.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.56.1
-      '@typescript-eslint/visitor-keys': 8.56.1
+      "@typescript-eslint/project-service": 8.57.2(typescript@5.6.3)
+      "@typescript-eslint/tsconfig-utils": 8.57.2(typescript@5.6.3)
+      "@typescript-eslint/types": 8.57.2
+      "@typescript-eslint/visitor-keys": 8.57.2
       debug: 4.4.3
       minimatch: 10.2.4
-      semver: 7.7.3
+      semver: 7.7.4
       tinyglobby: 0.2.15
-      ts-api-utils: 2.4.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@1.21.7))
-      '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.6.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      ts-api-utils: 2.5.0(typescript@5.6.3)
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  "@typescript-eslint/typescript-estree@8.57.2(typescript@5.9.3)":
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      "@typescript-eslint/project-service": 8.57.2(typescript@5.9.3)
+      "@typescript-eslint/tsconfig-utils": 8.57.2(typescript@5.9.3)
+      "@typescript-eslint/types": 8.57.2
+      "@typescript-eslint/visitor-keys": 8.57.2
+      debug: 4.4.3
+      minimatch: 10.2.4
+      semver: 7.7.4
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.49.0':
+  "@typescript-eslint/utils@8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)":
     dependencies:
-      '@typescript-eslint/types': 8.49.0
-      eslint-visitor-keys: 4.2.1
-
-  '@typescript-eslint/visitor-keys@8.56.1':
-    dependencies:
-      '@typescript-eslint/types': 8.56.1
-      eslint-visitor-keys: 5.0.1
-
-  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-android-arm64@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-darwin-arm64@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-darwin-x64@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-freebsd-x64@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.2.12
-    optional: true
-
-  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
-    optional: true
-
-  '@vitejs/plugin-react@4.7.0(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.5)
-      '@rolldown/pluginutils': 1.0.0-beta.27
-      '@types/babel__core': 7.20.5
-      react-refresh: 0.17.0
-      vite: 6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2)
+      "@eslint-community/eslint-utils": 4.9.1(eslint@9.39.4(jiti@1.21.7))
+      "@typescript-eslint/scope-manager": 8.57.2
+      "@typescript-eslint/types": 8.57.2
+      "@typescript-eslint/typescript-estree": 8.57.2(typescript@5.9.3)
+      eslint: 9.39.4(jiti@1.21.7)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/expect@2.0.5':
+  "@typescript-eslint/utils@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)":
     dependencies:
-      '@vitest/spy': 2.0.5
-      '@vitest/utils': 2.0.5
+      "@eslint-community/eslint-utils": 4.9.1(eslint@9.39.4(jiti@2.6.1))
+      "@typescript-eslint/scope-manager": 8.57.2
+      "@typescript-eslint/types": 8.57.2
+      "@typescript-eslint/typescript-estree": 8.57.2(typescript@5.6.3)
+      eslint: 9.39.4(jiti@2.6.1)
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
+  "@typescript-eslint/utils@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)":
+    dependencies:
+      "@eslint-community/eslint-utils": 4.9.1(eslint@9.39.4(jiti@2.6.1))
+      "@typescript-eslint/scope-manager": 8.57.2
+      "@typescript-eslint/types": 8.57.2
+      "@typescript-eslint/typescript-estree": 8.57.2(typescript@5.9.3)
+      eslint: 9.39.4(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  "@typescript-eslint/visitor-keys@8.57.2":
+    dependencies:
+      "@typescript-eslint/types": 8.57.2
+      eslint-visitor-keys: 5.0.1
+
+  "@unrs/resolver-binding-android-arm-eabi@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-android-arm64@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-darwin-arm64@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-darwin-x64@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-freebsd-x64@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-linux-arm-musleabihf@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-linux-arm64-gnu@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-linux-arm64-musl@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-linux-ppc64-gnu@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-linux-riscv64-gnu@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-linux-riscv64-musl@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-linux-s390x-gnu@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-linux-x64-gnu@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-linux-x64-musl@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-wasm32-wasi@1.11.1":
+    dependencies:
+      "@napi-rs/wasm-runtime": 0.2.12
+    optional: true
+
+  "@unrs/resolver-binding-win32-arm64-msvc@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-win32-ia32-msvc@1.11.1":
+    optional: true
+
+  "@unrs/resolver-binding-win32-x64-msvc@1.11.1":
+    optional: true
+
+  "@vitejs/plugin-react@4.7.0(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))":
+    dependencies:
+      "@babel/core": 7.29.0
+      "@babel/plugin-transform-react-jsx-self": 7.27.1(@babel/core@7.29.0)
+      "@babel/plugin-transform-react-jsx-source": 7.27.1(@babel/core@7.29.0)
+      "@rolldown/pluginutils": 1.0.0-beta.27
+      "@types/babel__core": 7.20.5
+      react-refresh: 0.17.0
+      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  "@vitest/expect@2.0.5":
+    dependencies:
+      "@vitest/spy": 2.0.5
+      "@vitest/utils": 2.0.5
       chai: 5.3.3
       tinyrainbow: 1.2.0
 
-  '@vitest/pretty-format@2.0.5':
+  "@vitest/pretty-format@2.0.5":
     dependencies:
       tinyrainbow: 1.2.0
 
-  '@vitest/pretty-format@2.1.9':
+  "@vitest/pretty-format@2.1.9":
     dependencies:
       tinyrainbow: 1.2.0
 
-  '@vitest/spy@2.0.5':
+  "@vitest/spy@2.0.5":
     dependencies:
       tinyspy: 3.0.2
 
-  '@vitest/utils@2.0.5':
+  "@vitest/utils@2.0.5":
     dependencies:
-      '@vitest/pretty-format': 2.0.5
+      "@vitest/pretty-format": 2.0.5
       estree-walker: 3.0.3
       loupe: 3.2.1
       tinyrainbow: 1.2.0
 
-  '@vitest/utils@2.1.9':
+  "@vitest/utils@2.1.9":
     dependencies:
-      '@vitest/pretty-format': 2.1.9
+      "@vitest/pretty-format": 2.1.9
       loupe: 3.2.1
       tinyrainbow: 1.2.0
 
-  '@vue/compiler-core@3.5.25':
+  "@vue/compiler-core@3.5.30":
     dependencies:
-      '@babel/parser': 7.28.5
-      '@vue/shared': 3.5.25
-      entities: 4.5.0
+      "@babel/parser": 7.29.2
+      "@vue/shared": 3.5.30
+      entities: 7.0.1
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.25':
+  "@vue/compiler-dom@3.5.30":
     dependencies:
-      '@vue/compiler-core': 3.5.25
-      '@vue/shared': 3.5.25
+      "@vue/compiler-core": 3.5.30
+      "@vue/shared": 3.5.30
 
-  '@vue/compiler-sfc@3.5.25':
+  "@vue/compiler-sfc@3.5.30":
     dependencies:
-      '@babel/parser': 7.28.5
-      '@vue/compiler-core': 3.5.25
-      '@vue/compiler-dom': 3.5.25
-      '@vue/compiler-ssr': 3.5.25
-      '@vue/shared': 3.5.25
+      "@babel/parser": 7.29.2
+      "@vue/compiler-core": 3.5.30
+      "@vue/compiler-dom": 3.5.30
+      "@vue/compiler-ssr": 3.5.30
+      "@vue/shared": 3.5.30
       estree-walker: 2.0.2
       magic-string: 0.30.21
-      postcss: 8.5.6
+      postcss: 8.5.8
       source-map-js: 1.2.1
 
-  '@vue/compiler-ssr@3.5.25':
+  "@vue/compiler-ssr@3.5.30":
     dependencies:
-      '@vue/compiler-dom': 3.5.25
-      '@vue/shared': 3.5.25
+      "@vue/compiler-dom": 3.5.30
+      "@vue/shared": 3.5.30
 
-  '@vue/shared@3.5.25': {}
+  "@vue/shared@3.5.30": {}
 
-  '@webassemblyjs/ast@1.14.1':
+  "@webassemblyjs/ast@1.14.1":
     dependencies:
-      '@webassemblyjs/helper-numbers': 1.13.2
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      "@webassemblyjs/helper-numbers": 1.13.2
+      "@webassemblyjs/helper-wasm-bytecode": 1.13.2
 
-  '@webassemblyjs/floating-point-hex-parser@1.13.2': {}
+  "@webassemblyjs/floating-point-hex-parser@1.13.2": {}
 
-  '@webassemblyjs/helper-api-error@1.13.2': {}
+  "@webassemblyjs/helper-api-error@1.13.2": {}
 
-  '@webassemblyjs/helper-buffer@1.14.1': {}
+  "@webassemblyjs/helper-buffer@1.14.1": {}
 
-  '@webassemblyjs/helper-numbers@1.13.2':
+  "@webassemblyjs/helper-numbers@1.13.2":
     dependencies:
-      '@webassemblyjs/floating-point-hex-parser': 1.13.2
-      '@webassemblyjs/helper-api-error': 1.13.2
-      '@xtuc/long': 4.2.2
+      "@webassemblyjs/floating-point-hex-parser": 1.13.2
+      "@webassemblyjs/helper-api-error": 1.13.2
+      "@xtuc/long": 4.2.2
 
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2': {}
+  "@webassemblyjs/helper-wasm-bytecode@1.13.2": {}
 
-  '@webassemblyjs/helper-wasm-section@1.14.1':
+  "@webassemblyjs/helper-wasm-section@1.14.1":
     dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-buffer': 1.14.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/wasm-gen': 1.14.1
+      "@webassemblyjs/ast": 1.14.1
+      "@webassemblyjs/helper-buffer": 1.14.1
+      "@webassemblyjs/helper-wasm-bytecode": 1.13.2
+      "@webassemblyjs/wasm-gen": 1.14.1
 
-  '@webassemblyjs/ieee754@1.13.2':
+  "@webassemblyjs/ieee754@1.13.2":
     dependencies:
-      '@xtuc/ieee754': 1.2.0
+      "@xtuc/ieee754": 1.2.0
 
-  '@webassemblyjs/leb128@1.13.2':
+  "@webassemblyjs/leb128@1.13.2":
     dependencies:
-      '@xtuc/long': 4.2.2
+      "@xtuc/long": 4.2.2
 
-  '@webassemblyjs/utf8@1.13.2': {}
+  "@webassemblyjs/utf8@1.13.2": {}
 
-  '@webassemblyjs/wasm-edit@1.14.1':
+  "@webassemblyjs/wasm-edit@1.14.1":
     dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-buffer': 1.14.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/helper-wasm-section': 1.14.1
-      '@webassemblyjs/wasm-gen': 1.14.1
-      '@webassemblyjs/wasm-opt': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      '@webassemblyjs/wast-printer': 1.14.1
+      "@webassemblyjs/ast": 1.14.1
+      "@webassemblyjs/helper-buffer": 1.14.1
+      "@webassemblyjs/helper-wasm-bytecode": 1.13.2
+      "@webassemblyjs/helper-wasm-section": 1.14.1
+      "@webassemblyjs/wasm-gen": 1.14.1
+      "@webassemblyjs/wasm-opt": 1.14.1
+      "@webassemblyjs/wasm-parser": 1.14.1
+      "@webassemblyjs/wast-printer": 1.14.1
 
-  '@webassemblyjs/wasm-gen@1.14.1':
+  "@webassemblyjs/wasm-gen@1.14.1":
     dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/ieee754': 1.13.2
-      '@webassemblyjs/leb128': 1.13.2
-      '@webassemblyjs/utf8': 1.13.2
+      "@webassemblyjs/ast": 1.14.1
+      "@webassemblyjs/helper-wasm-bytecode": 1.13.2
+      "@webassemblyjs/ieee754": 1.13.2
+      "@webassemblyjs/leb128": 1.13.2
+      "@webassemblyjs/utf8": 1.13.2
 
-  '@webassemblyjs/wasm-opt@1.14.1':
+  "@webassemblyjs/wasm-opt@1.14.1":
     dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-buffer': 1.14.1
-      '@webassemblyjs/wasm-gen': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
+      "@webassemblyjs/ast": 1.14.1
+      "@webassemblyjs/helper-buffer": 1.14.1
+      "@webassemblyjs/wasm-gen": 1.14.1
+      "@webassemblyjs/wasm-parser": 1.14.1
 
-  '@webassemblyjs/wasm-parser@1.14.1':
+  "@webassemblyjs/wasm-parser@1.14.1":
     dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-api-error': 1.13.2
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/ieee754': 1.13.2
-      '@webassemblyjs/leb128': 1.13.2
-      '@webassemblyjs/utf8': 1.13.2
+      "@webassemblyjs/ast": 1.14.1
+      "@webassemblyjs/helper-api-error": 1.13.2
+      "@webassemblyjs/helper-wasm-bytecode": 1.13.2
+      "@webassemblyjs/ieee754": 1.13.2
+      "@webassemblyjs/leb128": 1.13.2
+      "@webassemblyjs/utf8": 1.13.2
 
-  '@webassemblyjs/wast-printer@1.14.1':
+  "@webassemblyjs/wast-printer@1.14.1":
     dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@xtuc/long': 4.2.2
+      "@webassemblyjs/ast": 1.14.1
+      "@xtuc/long": 4.2.2
 
-  '@xlsx/xlsx-populate@0.0.8': {}
+  "@xlsx/xlsx-populate@0.0.8": {}
 
-  '@xtuc/ieee754@1.2.0': {}
+  "@xtuc/ieee754@1.2.0": {}
 
-  '@xtuc/long@4.2.2': {}
+  "@xtuc/long@4.2.2": {}
 
-  acorn-import-phases@1.0.4(acorn@8.15.0):
+  acorn-import-phases@1.0.4(acorn@8.16.0):
     dependencies:
-      acorn: 8.15.0
+      acorn: 8.16.0
 
-  acorn-jsx@5.3.2(acorn@8.15.0):
+  acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
-      acorn: 8.15.0
+      acorn: 8.16.0
 
-  acorn@8.15.0: {}
+  acorn@8.16.0: {}
 
   adler-32@1.3.1: {}
 
-  ajv-formats@2.1.1(ajv@8.17.1):
+  ajv-formats@2.1.1(ajv@8.18.0):
     optionalDependencies:
-      ajv: 8.17.1
+      ajv: 8.18.0
 
-  ajv-keywords@5.1.0(ajv@8.17.1):
+  ajv-keywords@5.1.0(ajv@8.18.0):
     dependencies:
-      ajv: 8.17.1
+      ajv: 8.18.0
       fast-deep-equal: 3.1.3
 
-  ajv@6.12.6:
+  ajv@6.14.0:
     dependencies:
       fast-deep-equal: 3.1.3
       fast-json-stable-stringify: 2.1.0
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
-  ajv@8.17.1:
+  ajv@8.18.0:
     dependencies:
       fast-deep-equal: 3.1.3
       fast-uri: 3.1.0
@@ -9911,7 +13618,7 @@ snapshots:
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
-      picomatch: 2.3.1
+      picomatch: 2.3.2
 
   arg@5.0.2: {}
 
@@ -9937,7 +13644,7 @@ snapshots:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
       is-string: 1.1.1
@@ -9947,7 +13654,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       es-shim-unscopables: 1.1.0
@@ -9957,7 +13664,7 @@ snapshots:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       es-shim-unscopables: 1.1.0
@@ -9966,21 +13673,21 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-shim-unscopables: 1.1.0
 
   array.prototype.flatmap@1.3.3:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-shim-unscopables: 1.1.0
 
   array.prototype.tosorted@1.1.4:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-shim-unscopables: 1.1.0
 
@@ -9989,7 +13696,7 @@ snapshots:
       array-buffer-byte-length: 1.0.2
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       is-array-buffer: 3.0.5
@@ -10019,21 +13726,20 @@ snapshots:
 
   attr-accept@2.2.5: {}
 
-  autoprefixer@10.4.22(postcss@8.5.6):
+  autoprefixer@10.4.27(postcss@8.5.8):
     dependencies:
       browserslist: 4.28.1
-      caniuse-lite: 1.0.30001760
+      caniuse-lite: 1.0.30001781
       fraction.js: 5.3.4
-      normalize-range: 0.1.2
       picocolors: 1.1.1
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.1.0
 
-  axe-core@4.11.0: {}
+  axe-core@4.11.1: {}
 
   axios@1.8.1:
     dependencies:
@@ -10051,7 +13757,7 @@ snapshots:
 
   base64-arraybuffer@1.0.2: {}
 
-  baseline-browser-mapping@2.9.7: {}
+  baseline-browser-mapping@2.10.10: {}
 
   better-opn@3.0.2:
     dependencies:
@@ -10068,7 +13774,7 @@ snapshots:
     dependencies:
       balanced-match: 1.0.2
 
-  brace-expansion@5.0.4:
+  brace-expansion@5.0.5:
     dependencies:
       balanced-match: 4.0.4
 
@@ -10080,11 +13786,11 @@ snapshots:
 
   browserslist@4.28.1:
     dependencies:
-      baseline-browser-mapping: 2.9.7
-      caniuse-lite: 1.0.30001760
-      electron-to-chromium: 1.5.267
-      node-releases: 2.0.27
-      update-browserslist-db: 1.2.2(browserslist@4.28.1)
+      baseline-browser-mapping: 2.10.10
+      caniuse-lite: 1.0.30001781
+      electron-to-chromium: 1.5.323
+      node-releases: 2.0.36
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
 
   buffer-from@1.1.2: {}
 
@@ -10093,10 +13799,6 @@ snapshots:
       esbuild: 0.24.2
       load-tsconfig: 0.2.5
 
-  busboy@1.6.0:
-    dependencies:
-      streamsearch: 1.1.0
-
   cac@6.7.14: {}
 
   call-bind-apply-helpers@1.0.2:
@@ -10122,7 +13824,7 @@ snapshots:
 
   camelcase@5.3.1: {}
 
-  caniuse-lite@1.0.30001760: {}
+  caniuse-lite@1.0.30001781: {}
 
   cfb@1.2.2:
     dependencies:
@@ -10132,7 +13834,7 @@ snapshots:
   chai@5.3.3:
     dependencies:
       assertion-error: 2.0.1
-      check-error: 2.1.1
+      check-error: 2.1.3
       deep-eql: 5.0.2
       loupe: 3.2.1
       pathval: 2.0.1
@@ -10149,15 +13851,15 @@ snapshots:
 
   chart.js@4.5.1:
     dependencies:
-      '@kurkle/color': 0.3.4
+      "@kurkle/color": 0.3.4
 
   chartjs-plugin-zoom@2.2.0(chart.js@4.5.1):
     dependencies:
-      '@types/hammerjs': 2.0.46
+      "@types/hammerjs": 2.0.46
       chart.js: 4.5.1
       hammerjs: 2.0.8
 
-  check-error@2.1.1: {}
+  check-error@2.1.3: {}
 
   chokidar@3.6.0:
     dependencies:
@@ -10185,9 +13887,9 @@ snapshots:
     dependencies:
       restore-cursor: 5.1.0
 
-  cli-truncate@5.1.1:
+  cli-truncate@5.2.0:
     dependencies:
-      slice-ansi: 7.1.2
+      slice-ansi: 8.0.0
       string-width: 8.2.0
 
   client-only@0.0.1: {}
@@ -10207,7 +13909,7 @@ snapshots:
   cliui@9.0.1:
     dependencies:
       string-width: 7.2.0
-      strip-ansi: 7.1.2
+      strip-ansi: 7.2.0
       wrap-ansi: 9.0.2
 
   clsx@2.1.1: {}
@@ -10247,7 +13949,7 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
-  cosmiconfig@9.0.0(typescript@5.9.3):
+  cosmiconfig@9.0.1(typescript@5.9.3):
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.1
@@ -10286,7 +13988,7 @@ snapshots:
 
   d3-ease@3.0.1: {}
 
-  d3-format@3.1.0: {}
+  d3-format@3.1.2: {}
 
   d3-interpolate@3.0.1:
     dependencies:
@@ -10297,7 +13999,7 @@ snapshots:
   d3-scale@4.0.2:
     dependencies:
       d3-array: 3.2.4
-      d3-format: 3.1.0
+      d3-format: 3.1.2
       d3-interpolate: 3.0.1
       d3-time: 3.1.0
       d3-time-format: 4.1.0
@@ -10342,7 +14044,7 @@ snapshots:
 
   date-fns@4.1.0: {}
 
-  dayjs@1.11.19: {}
+  dayjs@1.11.20: {}
 
   debug@3.2.7:
     dependencies:
@@ -10389,7 +14091,7 @@ snapshots:
       get-amd-module-type: 6.0.1
       node-source-walk: 7.0.1
 
-  detective-cjs@6.0.1:
+  detective-cjs@6.1.0:
     dependencies:
       ast-module-types: 6.0.1
       node-source-walk: 7.0.1
@@ -10398,11 +14100,11 @@ snapshots:
     dependencies:
       node-source-walk: 7.0.1
 
-  detective-postcss@7.0.1(postcss@8.5.6):
+  detective-postcss@7.0.1(postcss@8.5.8):
     dependencies:
       is-url: 1.2.4
-      postcss: 8.5.6
-      postcss-values-parser: 6.0.2(postcss@8.5.6)
+      postcss: 8.5.8
+      postcss-values-parser: 6.0.2(postcss@8.5.8)
 
   detective-sass@6.0.1:
     dependencies:
@@ -10418,7 +14120,7 @@ snapshots:
 
   detective-typescript@14.0.0(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3)
+      "@typescript-eslint/typescript-estree": 8.57.2(typescript@5.9.3)
       ast-module-types: 6.0.1
       node-source-walk: 7.0.1
       typescript: 5.9.3
@@ -10427,8 +14129,8 @@ snapshots:
 
   detective-vue2@2.2.0(typescript@5.9.3):
     dependencies:
-      '@dependents/detective-less': 5.0.1
-      '@vue/compiler-sfc': 3.5.25
+      "@dependents/detective-less": 5.0.1
+      "@vue/compiler-sfc": 3.5.30
       detective-es6: 5.0.1
       detective-sass: 6.0.1
       detective-scss: 5.0.1
@@ -10446,8 +14148,8 @@ snapshots:
 
   dnd-core@16.0.1:
     dependencies:
-      '@react-dnd/asap': 5.0.2
-      '@react-dnd/invariant': 4.0.2
+      "@react-dnd/asap": 5.0.2
+      "@react-dnd/invariant": 4.0.2
       redux: 4.2.1
 
   dnd-multi-backend@8.1.2(dnd-core@16.0.1):
@@ -10468,7 +14170,7 @@ snapshots:
 
   dom-helpers@5.2.1:
     dependencies:
-      '@babel/runtime': 7.28.4
+      "@babel/runtime": 7.29.2
       csstype: 3.2.3
 
   dunder-proto@1.0.1:
@@ -10483,17 +14185,17 @@ snapshots:
 
   effector@23.4.4: {}
 
-  electron-to-chromium@1.5.267: {}
+  electron-to-chromium@1.5.323: {}
 
   embla-carousel-autoplay@8.6.0(embla-carousel@8.6.0):
     dependencies:
       embla-carousel: 8.6.0
 
-  embla-carousel-react@8.6.0(react@19.2.3):
+  embla-carousel-react@8.6.0(react@19.2.4):
     dependencies:
       embla-carousel: 8.6.0
       embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
-      react: 19.2.3
+      react: 19.2.4
 
   embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
     dependencies:
@@ -10509,12 +14211,12 @@ snapshots:
 
   empathic@1.1.0: {}
 
-  enhanced-resolve@5.18.4:
+  enhanced-resolve@5.20.1:
     dependencies:
       graceful-fs: 4.2.11
-      tapable: 2.3.0
+      tapable: 2.3.2
 
-  entities@4.5.0: {}
+  entities@7.0.1: {}
 
   env-paths@2.2.1: {}
 
@@ -10524,7 +14226,7 @@ snapshots:
     dependencies:
       is-arrayish: 0.2.1
 
-  es-abstract@1.24.0:
+  es-abstract@1.24.1:
     dependencies:
       array-buffer-byte-length: 1.0.2
       arraybuffer.prototype.slice: 1.0.4
@@ -10579,18 +14281,18 @@ snapshots:
       typed-array-byte-offset: 1.0.4
       typed-array-length: 1.0.7
       unbox-primitive: 1.1.0
-      which-typed-array: 1.1.19
+      which-typed-array: 1.1.20
 
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
 
-  es-iterator-helpers@1.2.1:
+  es-iterator-helpers@1.3.1:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-set-tostringtag: 2.1.0
       function-bind: 1.1.2
@@ -10602,9 +14304,10 @@ snapshots:
       has-symbols: 1.1.0
       internal-slot: 1.1.0
       iterator.prototype: 1.1.5
+      math-intrinsics: 1.1.0
       safe-array-concat: 1.1.3
 
-  es-module-lexer@1.7.0: {}
+  es-module-lexer@2.0.0: {}
 
   es-object-atoms@1.1.1:
     dependencies:
@@ -10636,86 +14339,86 @@ snapshots:
 
   esbuild@0.21.5:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.21.5
-      '@esbuild/android-arm': 0.21.5
-      '@esbuild/android-arm64': 0.21.5
-      '@esbuild/android-x64': 0.21.5
-      '@esbuild/darwin-arm64': 0.21.5
-      '@esbuild/darwin-x64': 0.21.5
-      '@esbuild/freebsd-arm64': 0.21.5
-      '@esbuild/freebsd-x64': 0.21.5
-      '@esbuild/linux-arm': 0.21.5
-      '@esbuild/linux-arm64': 0.21.5
-      '@esbuild/linux-ia32': 0.21.5
-      '@esbuild/linux-loong64': 0.21.5
-      '@esbuild/linux-mips64el': 0.21.5
-      '@esbuild/linux-ppc64': 0.21.5
-      '@esbuild/linux-riscv64': 0.21.5
-      '@esbuild/linux-s390x': 0.21.5
-      '@esbuild/linux-x64': 0.21.5
-      '@esbuild/netbsd-x64': 0.21.5
-      '@esbuild/openbsd-x64': 0.21.5
-      '@esbuild/sunos-x64': 0.21.5
-      '@esbuild/win32-arm64': 0.21.5
-      '@esbuild/win32-ia32': 0.21.5
-      '@esbuild/win32-x64': 0.21.5
+      "@esbuild/aix-ppc64": 0.21.5
+      "@esbuild/android-arm": 0.21.5
+      "@esbuild/android-arm64": 0.21.5
+      "@esbuild/android-x64": 0.21.5
+      "@esbuild/darwin-arm64": 0.21.5
+      "@esbuild/darwin-x64": 0.21.5
+      "@esbuild/freebsd-arm64": 0.21.5
+      "@esbuild/freebsd-x64": 0.21.5
+      "@esbuild/linux-arm": 0.21.5
+      "@esbuild/linux-arm64": 0.21.5
+      "@esbuild/linux-ia32": 0.21.5
+      "@esbuild/linux-loong64": 0.21.5
+      "@esbuild/linux-mips64el": 0.21.5
+      "@esbuild/linux-ppc64": 0.21.5
+      "@esbuild/linux-riscv64": 0.21.5
+      "@esbuild/linux-s390x": 0.21.5
+      "@esbuild/linux-x64": 0.21.5
+      "@esbuild/netbsd-x64": 0.21.5
+      "@esbuild/openbsd-x64": 0.21.5
+      "@esbuild/sunos-x64": 0.21.5
+      "@esbuild/win32-arm64": 0.21.5
+      "@esbuild/win32-ia32": 0.21.5
+      "@esbuild/win32-x64": 0.21.5
 
   esbuild@0.24.2:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.24.2
-      '@esbuild/android-arm': 0.24.2
-      '@esbuild/android-arm64': 0.24.2
-      '@esbuild/android-x64': 0.24.2
-      '@esbuild/darwin-arm64': 0.24.2
-      '@esbuild/darwin-x64': 0.24.2
-      '@esbuild/freebsd-arm64': 0.24.2
-      '@esbuild/freebsd-x64': 0.24.2
-      '@esbuild/linux-arm': 0.24.2
-      '@esbuild/linux-arm64': 0.24.2
-      '@esbuild/linux-ia32': 0.24.2
-      '@esbuild/linux-loong64': 0.24.2
-      '@esbuild/linux-mips64el': 0.24.2
-      '@esbuild/linux-ppc64': 0.24.2
-      '@esbuild/linux-riscv64': 0.24.2
-      '@esbuild/linux-s390x': 0.24.2
-      '@esbuild/linux-x64': 0.24.2
-      '@esbuild/netbsd-arm64': 0.24.2
-      '@esbuild/netbsd-x64': 0.24.2
-      '@esbuild/openbsd-arm64': 0.24.2
-      '@esbuild/openbsd-x64': 0.24.2
-      '@esbuild/sunos-x64': 0.24.2
-      '@esbuild/win32-arm64': 0.24.2
-      '@esbuild/win32-ia32': 0.24.2
-      '@esbuild/win32-x64': 0.24.2
+      "@esbuild/aix-ppc64": 0.24.2
+      "@esbuild/android-arm": 0.24.2
+      "@esbuild/android-arm64": 0.24.2
+      "@esbuild/android-x64": 0.24.2
+      "@esbuild/darwin-arm64": 0.24.2
+      "@esbuild/darwin-x64": 0.24.2
+      "@esbuild/freebsd-arm64": 0.24.2
+      "@esbuild/freebsd-x64": 0.24.2
+      "@esbuild/linux-arm": 0.24.2
+      "@esbuild/linux-arm64": 0.24.2
+      "@esbuild/linux-ia32": 0.24.2
+      "@esbuild/linux-loong64": 0.24.2
+      "@esbuild/linux-mips64el": 0.24.2
+      "@esbuild/linux-ppc64": 0.24.2
+      "@esbuild/linux-riscv64": 0.24.2
+      "@esbuild/linux-s390x": 0.24.2
+      "@esbuild/linux-x64": 0.24.2
+      "@esbuild/netbsd-arm64": 0.24.2
+      "@esbuild/netbsd-x64": 0.24.2
+      "@esbuild/openbsd-arm64": 0.24.2
+      "@esbuild/openbsd-x64": 0.24.2
+      "@esbuild/sunos-x64": 0.24.2
+      "@esbuild/win32-arm64": 0.24.2
+      "@esbuild/win32-ia32": 0.24.2
+      "@esbuild/win32-x64": 0.24.2
 
   esbuild@0.25.12:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.12
-      '@esbuild/android-arm': 0.25.12
-      '@esbuild/android-arm64': 0.25.12
-      '@esbuild/android-x64': 0.25.12
-      '@esbuild/darwin-arm64': 0.25.12
-      '@esbuild/darwin-x64': 0.25.12
-      '@esbuild/freebsd-arm64': 0.25.12
-      '@esbuild/freebsd-x64': 0.25.12
-      '@esbuild/linux-arm': 0.25.12
-      '@esbuild/linux-arm64': 0.25.12
-      '@esbuild/linux-ia32': 0.25.12
-      '@esbuild/linux-loong64': 0.25.12
-      '@esbuild/linux-mips64el': 0.25.12
-      '@esbuild/linux-ppc64': 0.25.12
-      '@esbuild/linux-riscv64': 0.25.12
-      '@esbuild/linux-s390x': 0.25.12
-      '@esbuild/linux-x64': 0.25.12
-      '@esbuild/netbsd-arm64': 0.25.12
-      '@esbuild/netbsd-x64': 0.25.12
-      '@esbuild/openbsd-arm64': 0.25.12
-      '@esbuild/openbsd-x64': 0.25.12
-      '@esbuild/openharmony-arm64': 0.25.12
-      '@esbuild/sunos-x64': 0.25.12
-      '@esbuild/win32-arm64': 0.25.12
-      '@esbuild/win32-ia32': 0.25.12
-      '@esbuild/win32-x64': 0.25.12
+      "@esbuild/aix-ppc64": 0.25.12
+      "@esbuild/android-arm": 0.25.12
+      "@esbuild/android-arm64": 0.25.12
+      "@esbuild/android-x64": 0.25.12
+      "@esbuild/darwin-arm64": 0.25.12
+      "@esbuild/darwin-x64": 0.25.12
+      "@esbuild/freebsd-arm64": 0.25.12
+      "@esbuild/freebsd-x64": 0.25.12
+      "@esbuild/linux-arm": 0.25.12
+      "@esbuild/linux-arm64": 0.25.12
+      "@esbuild/linux-ia32": 0.25.12
+      "@esbuild/linux-loong64": 0.25.12
+      "@esbuild/linux-mips64el": 0.25.12
+      "@esbuild/linux-ppc64": 0.25.12
+      "@esbuild/linux-riscv64": 0.25.12
+      "@esbuild/linux-s390x": 0.25.12
+      "@esbuild/linux-x64": 0.25.12
+      "@esbuild/netbsd-arm64": 0.25.12
+      "@esbuild/netbsd-x64": 0.25.12
+      "@esbuild/openbsd-arm64": 0.25.12
+      "@esbuild/openbsd-x64": 0.25.12
+      "@esbuild/openharmony-arm64": 0.25.12
+      "@esbuild/sunos-x64": 0.25.12
+      "@esbuild/win32-arm64": 0.25.12
+      "@esbuild/win32-ia32": 0.25.12
+      "@esbuild/win32-x64": 0.25.12
 
   escalade@3.2.0: {}
 
@@ -10729,19 +14432,19 @@ snapshots:
     optionalDependencies:
       source-map: 0.7.6
 
-  eslint-config-next@15.1.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3):
+  eslint-config-next@15.3.8(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3):
     dependencies:
-      '@next/eslint-plugin-next': 15.1.7
-      '@rushstack/eslint-patch': 1.15.0
-      '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
+      "@next/eslint-plugin-next": 15.3.8
+      "@rushstack/eslint-patch": 1.16.1
+      "@typescript-eslint/eslint-plugin": 8.57.2(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
+      "@typescript-eslint/parser": 8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.4(jiti@1.21.7)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-react: 7.37.5(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-react-hooks: 5.2.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@1.21.7))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.4(jiti@1.21.7))
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.4(jiti@1.21.7))
+      eslint-plugin-react: 7.37.5(eslint@9.39.4(jiti@1.21.7))
+      eslint-plugin-react-hooks: 5.2.0(eslint@9.39.4(jiti@1.21.7))
     optionalDependencies:
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -10749,39 +14452,19 @@ snapshots:
       - eslint-plugin-import-x
       - supports-color
 
-  eslint-config-next@15.1.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
+  eslint-config-next@15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@next/eslint-plugin-next': 15.1.7
-      '@rushstack/eslint-patch': 1.15.0
-      '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      "@next/eslint-plugin-next": 15.3.8
+      "@rushstack/eslint-patch": 1.16.1
+      "@typescript-eslint/eslint-plugin": 8.57.2(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      "@typescript-eslint/parser": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.4(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-react: 7.37.5(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-react-hooks: 5.2.0(eslint@9.39.2(jiti@2.6.1))
-    optionalDependencies:
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - eslint-plugin-import-x
-      - supports-color
-
-  eslint-config-next@15.4.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
-    dependencies:
-      '@next/eslint-plugin-next': 15.4.0
-      '@rushstack/eslint-patch': 1.15.0
-      '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-react: 7.37.5(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-react-hooks: 5.2.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-react: 7.37.5(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-react-hooks: 5.2.0(eslint@9.39.4(jiti@2.6.1))
     optionalDependencies:
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -10797,74 +14480,74 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@1.21.7)):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@1.21.7)):
     dependencies:
-      '@nolyfill/is-core-module': 1.0.39
+      "@nolyfill/is-core-module": 1.0.39
       debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      get-tsconfig: 4.13.0
+      eslint: 9.39.4(jiti@1.21.7)
+      get-tsconfig: 4.13.7
       is-bun-module: 2.0.0
       stable-hash: 0.0.5
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.4(jiti@1.21.7))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1)):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
-      '@nolyfill/is-core-module': 1.0.39
+      "@nolyfill/is-core-module": 1.0.39
       debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
-      get-tsconfig: 4.13.0
+      eslint: 9.39.4(jiti@2.6.1)
+      get-tsconfig: 4.13.7
       is-bun-module: 2.0.0
       stable-hash: 0.0.5
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@1.21.7)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
+      "@typescript-eslint/parser": 8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.4(jiti@1.21.7)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@1.21.7))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@1.21.7))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      "@typescript-eslint/parser": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.4(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.4(jiti@1.21.7)):
     dependencies:
-      '@rtsao/scc': 1.1.0
+      "@rtsao/scc": 1.1.0
       array-includes: 3.1.9
       array.prototype.findlastindex: 1.2.6
       array.prototype.flat: 1.3.3
       array.prototype.flatmap: 1.3.3
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.4(jiti@1.21.7)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@1.21.7))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       object.fromentries: 2.0.8
       object.groupby: 1.0.3
       object.values: 1.2.1
@@ -10872,28 +14555,28 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.49.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      "@typescript-eslint/parser": 8.57.2(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
-      '@rtsao/scc': 1.1.0
+      "@rtsao/scc": 1.1.0
       array-includes: 3.1.9
       array.prototype.findlastindex: 1.2.6
       array.prototype.flat: 1.3.3
       array.prototype.flatmap: 1.3.3
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.4(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.6.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       object.fromentries: 2.0.8
       object.groupby: 1.0.3
       object.values: 1.2.1
@@ -10901,115 +14584,115 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      "@typescript-eslint/parser": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.2(jiti@1.21.7)):
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.4(jiti@1.21.7)):
     dependencies:
       aria-query: 5.3.2
       array-includes: 3.1.9
       array.prototype.flatmap: 1.3.3
       ast-types-flow: 0.0.8
-      axe-core: 4.11.0
+      axe-core: 4.11.1
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.4(jiti@1.21.7)
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       object.fromentries: 2.0.8
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       aria-query: 5.3.2
       array-includes: 3.1.9
       array.prototype.flatmap: 1.3.3
       ast-types-flow: 0.0.8
-      axe-core: 4.11.0
+      axe-core: 4.11.1
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.4(jiti@2.6.1)
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       object.fromentries: 2.0.8
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-react-hooks@5.2.0(eslint@9.39.2(jiti@1.21.7)):
+  eslint-plugin-react-hooks@5.2.0(eslint@9.39.4(jiti@1.21.7)):
     dependencies:
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.4(jiti@1.21.7)
 
-  eslint-plugin-react-hooks@5.2.0(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-react-hooks@5.2.0(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.4(jiti@2.6.1)
 
-  eslint-plugin-react-refresh@0.4.24(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-react-refresh@0.4.26(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.4(jiti@2.6.1)
 
-  eslint-plugin-react@7.37.5(eslint@9.39.2(jiti@1.21.7)):
+  eslint-plugin-react@7.37.5(eslint@9.39.4(jiti@1.21.7)):
     dependencies:
       array-includes: 3.1.9
       array.prototype.findlast: 1.2.5
       array.prototype.flatmap: 1.3.3
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
-      es-iterator-helpers: 1.2.1
-      eslint: 9.39.2(jiti@1.21.7)
+      es-iterator-helpers: 1.3.1
+      eslint: 9.39.4(jiti@1.21.7)
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       object.entries: 1.1.9
       object.fromentries: 2.0.8
       object.values: 1.2.1
       prop-types: 15.8.1
-      resolve: 2.0.0-next.5
+      resolve: 2.0.0-next.6
       semver: 6.3.1
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-react@7.37.5(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-react@7.37.5(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       array-includes: 3.1.9
       array.prototype.findlast: 1.2.5
       array.prototype.flatmap: 1.3.3
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
-      es-iterator-helpers: 1.2.1
-      eslint: 9.39.2(jiti@2.6.1)
+      es-iterator-helpers: 1.3.1
+      eslint: 9.39.4(jiti@2.6.1)
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       object.entries: 1.1.9
       object.fromentries: 2.0.8
       object.values: 1.2.1
       prop-types: 15.8.1
-      resolve: 2.0.0-next.5
+      resolve: 2.0.0-next.6
       semver: 6.3.1
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-simple-import-sort@12.1.1(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-simple-import-sort@12.1.1(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.4(jiti@2.6.1)
 
-  eslint-plugin-storybook@0.11.6(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3):
+  eslint-plugin-storybook@0.11.6(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3):
     dependencies:
-      '@storybook/csf': 0.1.13
-      '@typescript-eslint/utils': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      "@storybook/csf": 0.1.13
+      "@typescript-eslint/utils": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)
+      eslint: 9.39.4(jiti@2.6.1)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - supports-color
@@ -11031,21 +14714,21 @@ snapshots:
 
   eslint-visitor-keys@5.0.1: {}
 
-  eslint@9.39.2(jiti@1.21.7):
+  eslint@9.39.4(jiti@1.21.7):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@1.21.7))
-      '@eslint-community/regexpp': 4.12.2
-      '@eslint/config-array': 0.21.1
-      '@eslint/config-helpers': 0.4.2
-      '@eslint/core': 0.17.0
-      '@eslint/eslintrc': 3.3.3
-      '@eslint/js': 9.39.2
-      '@eslint/plugin-kit': 0.4.1
-      '@humanfs/node': 0.16.7
-      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.3
-      '@types/estree': 1.0.8
-      ajv: 6.12.6
+      "@eslint-community/eslint-utils": 4.9.1(eslint@9.39.4(jiti@1.21.7))
+      "@eslint-community/regexpp": 4.12.2
+      "@eslint/config-array": 0.21.2
+      "@eslint/config-helpers": 0.4.2
+      "@eslint/core": 0.17.0
+      "@eslint/eslintrc": 3.3.5
+      "@eslint/js": 9.39.4
+      "@eslint/plugin-kit": 0.4.1
+      "@humanfs/node": 0.16.7
+      "@humanwhocodes/module-importer": 1.0.1
+      "@humanwhocodes/retry": 0.4.3
+      "@types/estree": 1.0.8
+      ajv: 6.14.0
       chalk: 4.1.2
       cross-spawn: 7.0.6
       debug: 4.4.3
@@ -11053,7 +14736,7 @@ snapshots:
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
-      esquery: 1.6.0
+      esquery: 1.7.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 8.0.0
@@ -11064,7 +14747,7 @@ snapshots:
       is-glob: 4.0.3
       json-stable-stringify-without-jsonify: 1.0.1
       lodash.merge: 4.6.2
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       natural-compare: 1.4.0
       optionator: 0.9.4
     optionalDependencies:
@@ -11072,21 +14755,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint@9.39.2(jiti@2.6.1):
+  eslint@9.39.4(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
-      '@eslint-community/regexpp': 4.12.2
-      '@eslint/config-array': 0.21.1
-      '@eslint/config-helpers': 0.4.2
-      '@eslint/core': 0.17.0
-      '@eslint/eslintrc': 3.3.3
-      '@eslint/js': 9.39.2
-      '@eslint/plugin-kit': 0.4.1
-      '@humanfs/node': 0.16.7
-      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.3
-      '@types/estree': 1.0.8
-      ajv: 6.12.6
+      "@eslint-community/eslint-utils": 4.9.1(eslint@9.39.4(jiti@2.6.1))
+      "@eslint-community/regexpp": 4.12.2
+      "@eslint/config-array": 0.21.2
+      "@eslint/config-helpers": 0.4.2
+      "@eslint/core": 0.17.0
+      "@eslint/eslintrc": 3.3.5
+      "@eslint/js": 9.39.4
+      "@eslint/plugin-kit": 0.4.1
+      "@humanfs/node": 0.16.7
+      "@humanwhocodes/module-importer": 1.0.1
+      "@humanwhocodes/retry": 0.4.3
+      "@types/estree": 1.0.8
+      ajv: 6.14.0
       chalk: 4.1.2
       cross-spawn: 7.0.6
       debug: 4.4.3
@@ -11094,7 +14777,7 @@ snapshots:
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
-      esquery: 1.6.0
+      esquery: 1.7.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 8.0.0
@@ -11105,7 +14788,7 @@ snapshots:
       is-glob: 4.0.3
       json-stable-stringify-without-jsonify: 1.0.1
       lodash.merge: 4.6.2
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       natural-compare: 1.4.0
       optionator: 0.9.4
     optionalDependencies:
@@ -11115,13 +14798,13 @@ snapshots:
 
   espree@10.4.0:
     dependencies:
-      acorn: 8.15.0
-      acorn-jsx: 5.3.2(acorn@8.15.0)
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
       eslint-visitor-keys: 4.2.1
 
   esprima@4.0.1: {}
 
-  esquery@1.6.0:
+  esquery@1.7.0:
     dependencies:
       estraverse: 5.3.0
 
@@ -11137,7 +14820,7 @@ snapshots:
 
   estree-walker@3.0.3:
     dependencies:
-      '@types/estree': 1.0.8
+      "@types/estree": 1.0.8
 
   esutils@2.0.3: {}
 
@@ -11149,20 +14832,20 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
-  fast-equals@5.3.4: {}
+  fast-equals@5.4.0: {}
 
   fast-glob@3.3.1:
     dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
+      "@nodelib/fs.stat": 2.0.5
+      "@nodelib/fs.walk": 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.8
 
   fast-glob@3.3.3:
     dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
+      "@nodelib/fs.stat": 2.0.5
+      "@nodelib/fs.walk": 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.8
@@ -11175,13 +14858,13 @@ snapshots:
 
   fastest-levenshtein@1.0.16: {}
 
-  fastq@1.19.1:
+  fastq@1.20.1:
     dependencies:
       reusify: 1.1.0
 
-  fdir@6.5.0(picomatch@4.0.3):
+  fdir@6.5.0(picomatch@4.0.4):
     optionalDependencies:
-      picomatch: 4.0.3
+      picomatch: 4.0.4
 
   file-entry-cache@8.0.0:
     dependencies:
@@ -11207,10 +14890,10 @@ snapshots:
 
   flat-cache@4.0.1:
     dependencies:
-      flatted: 3.3.3
+      flatted: 3.4.2
       keyv: 4.5.4
 
-  flatted@3.3.3: {}
+  flatted@3.4.2: {}
 
   follow-redirects@1.15.11: {}
 
@@ -11235,14 +14918,14 @@ snapshots:
 
   fraction.js@5.3.4: {}
 
-  framer-motion@11.18.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  framer-motion@11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       motion-dom: 11.18.1
       motion-utils: 11.18.1
       tslib: 2.8.1
     optionalDependencies:
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
   fsevents@2.3.3:
     optional: true
@@ -11266,7 +14949,7 @@ snapshots:
 
   geotiff@2.1.3:
     dependencies:
-      '@petamoriken/float16': 3.9.3
+      "@petamoriken/float16": 3.9.3
       lerc: 3.0.0
       pako: 2.1.0
       parse-headers: 2.0.6
@@ -11282,8 +14965,6 @@ snapshots:
 
   get-caller-file@2.0.5: {}
 
-  get-east-asian-width@1.4.0: {}
-
   get-east-asian-width@1.5.0: {}
 
   get-intrinsic@1.3.0:
@@ -11312,7 +14993,7 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
-  get-tsconfig@4.13.0:
+  get-tsconfig@4.13.7:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
@@ -11330,8 +15011,8 @@ snapshots:
     dependencies:
       foreground-child: 3.3.1
       jackspeak: 3.4.3
-      minimatch: 9.0.5
-      minipass: 7.1.2
+      minimatch: 9.0.9
+      minipass: 7.1.3
       package-json-from-dist: 1.0.1
       path-scurry: 1.11.1
 
@@ -11346,7 +15027,7 @@ snapshots:
 
   globby@14.1.0:
     dependencies:
-      '@sindresorhus/merge-streams': 2.3.0
+      "@sindresorhus/merge-streams": 2.3.0
       fast-glob: 3.3.3
       ignore: 7.0.5
       path-type: 6.0.0
@@ -11406,9 +15087,9 @@ snapshots:
 
   husky@9.1.7: {}
 
-  i18next@25.7.2(typescript@5.9.3):
+  i18next@25.10.9(typescript@5.9.3):
     dependencies:
-      '@babel/runtime': 7.28.4
+      "@babel/runtime": 7.29.2
     optionalDependencies:
       typescript: 5.9.3
 
@@ -11479,7 +15160,7 @@ snapshots:
 
   is-bun-module@2.0.0:
     dependencies:
-      semver: 7.7.3
+      semver: 7.7.4
 
   is-callable@1.2.7: {}
 
@@ -11510,7 +15191,7 @@ snapshots:
 
   is-fullwidth-code-point@5.1.0:
     dependencies:
-      get-east-asian-width: 1.4.0
+      get-east-asian-width: 1.5.0
 
   is-generator-function@1.1.2:
     dependencies:
@@ -11565,7 +15246,7 @@ snapshots:
 
   is-typed-array@1.1.15:
     dependencies:
-      which-typed-array: 1.1.19
+      which-typed-array: 1.1.20
 
   is-url-superb@4.0.0: {}
 
@@ -11603,13 +15284,13 @@ snapshots:
 
   jackspeak@3.4.3:
     dependencies:
-      '@isaacs/cliui': 8.0.2
+      "@isaacs/cliui": 8.0.2
     optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
+      "@pkgjs/parseargs": 0.11.0
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 22.19.2
+      "@types/node": 22.19.15
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -11684,78 +15365,77 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  libphonenumber-js@1.12.31: {}
+  libphonenumber-js@1.12.40: {}
 
   lie@3.3.0:
     dependencies:
       immediate: 3.0.6
 
-  lightningcss-android-arm64@1.30.2:
+  lightningcss-android-arm64@1.32.0:
     optional: true
 
-  lightningcss-darwin-arm64@1.30.2:
+  lightningcss-darwin-arm64@1.32.0:
     optional: true
 
-  lightningcss-darwin-x64@1.30.2:
+  lightningcss-darwin-x64@1.32.0:
     optional: true
 
-  lightningcss-freebsd-x64@1.30.2:
+  lightningcss-freebsd-x64@1.32.0:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.30.2:
+  lightningcss-linux-arm-gnueabihf@1.32.0:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.30.2:
+  lightningcss-linux-arm64-gnu@1.32.0:
     optional: true
 
-  lightningcss-linux-arm64-musl@1.30.2:
+  lightningcss-linux-arm64-musl@1.32.0:
     optional: true
 
-  lightningcss-linux-x64-gnu@1.30.2:
+  lightningcss-linux-x64-gnu@1.32.0:
     optional: true
 
-  lightningcss-linux-x64-musl@1.30.2:
+  lightningcss-linux-x64-musl@1.32.0:
     optional: true
 
-  lightningcss-win32-arm64-msvc@1.30.2:
+  lightningcss-win32-arm64-msvc@1.32.0:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.30.2:
+  lightningcss-win32-x64-msvc@1.32.0:
     optional: true
 
-  lightningcss@1.30.2:
+  lightningcss@1.32.0:
     dependencies:
       detect-libc: 2.1.2
     optionalDependencies:
-      lightningcss-android-arm64: 1.30.2
-      lightningcss-darwin-arm64: 1.30.2
-      lightningcss-darwin-x64: 1.30.2
-      lightningcss-freebsd-x64: 1.30.2
-      lightningcss-linux-arm-gnueabihf: 1.30.2
-      lightningcss-linux-arm64-gnu: 1.30.2
-      lightningcss-linux-arm64-musl: 1.30.2
-      lightningcss-linux-x64-gnu: 1.30.2
-      lightningcss-linux-x64-musl: 1.30.2
-      lightningcss-win32-arm64-msvc: 1.30.2
-      lightningcss-win32-x64-msvc: 1.30.2
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
 
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
 
-  lint-staged@16.2.7:
+  lint-staged@16.4.0:
     dependencies:
       commander: 14.0.3
       listr2: 9.0.5
-      micromatch: 4.0.8
-      nano-spawn: 2.0.0
-      pidtree: 0.6.0
+      picomatch: 4.0.4
       string-argv: 0.3.2
-      yaml: 2.8.2
+      tinyexec: 1.0.4
+      yaml: 2.8.3
 
   listr2@9.0.5:
     dependencies:
-      cli-truncate: 5.1.1
+      cli-truncate: 5.2.0
       colorette: 2.0.20
       eventemitter3: 5.0.4
       log-update: 6.1.0
@@ -11774,7 +15454,7 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
-  lodash-es@4.17.21: {}
+  lodash-es@4.17.23: {}
 
   lodash._baseiteratee@4.7.0:
     dependencies:
@@ -11814,14 +15494,14 @@ snapshots:
       lodash._baseiteratee: 4.7.0
       lodash._baseuniq: 4.6.0
 
-  lodash@4.17.21: {}
+  lodash@4.17.23: {}
 
   log-update@6.1.0:
     dependencies:
       ansi-escapes: 7.3.0
       cli-cursor: 5.0.0
       slice-ansi: 7.1.2
-      strip-ansi: 7.1.2
+      strip-ansi: 7.2.0
       wrap-ansi: 9.0.2
 
   loose-envify@1.4.0:
@@ -11836,19 +15516,19 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@0.474.0(react@19.2.3):
+  lucide-react@0.474.0(react@19.2.4):
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
 
   lz-string@1.5.0: {}
 
   magic-string@0.27.0:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
+      "@jridgewell/sourcemap-codec": 1.5.5
 
   magic-string@0.30.21:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
+      "@jridgewell/sourcemap-codec": 1.5.5
 
   map-or-similar@1.5.0: {}
 
@@ -11869,7 +15549,7 @@ snapshots:
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
-      picomatch: 2.3.1
+      picomatch: 2.3.2
 
   mime-db@1.52.0: {}
 
@@ -11883,19 +15563,19 @@ snapshots:
 
   minimatch@10.2.4:
     dependencies:
-      brace-expansion: 5.0.4
+      brace-expansion: 5.0.5
 
-  minimatch@3.1.2:
+  minimatch@3.1.5:
     dependencies:
       brace-expansion: 1.1.12
 
-  minimatch@9.0.5:
+  minimatch@9.0.9:
     dependencies:
       brace-expansion: 2.0.2
 
   minimist@1.2.8: {}
 
-  minipass@7.1.2: {}
+  minipass@7.1.3: {}
 
   module-definition@6.0.1:
     dependencies:
@@ -11918,8 +15598,6 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
-  nano-spawn@2.0.0: {}
-
   nanoid@3.3.11: {}
 
   napi-postinstall@0.3.4: {}
@@ -11928,51 +15606,54 @@ snapshots:
 
   neo-async@2.6.2: {}
 
-  next-qrcode@2.5.1(react@19.2.3):
+  next-qrcode@2.5.1(react@19.2.4):
     dependencies:
       qrcode: 1.5.4
-      react: 19.2.3
+      react: 19.2.4
 
-  next-themes@0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  next-themes@0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
-  next@15.3.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  next@15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
-      '@next/env': 15.3.8
-      '@swc/counter': 0.1.3
-      '@swc/helpers': 0.5.15
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001760
+      "@next/env": 15.5.18
+      "@swc/helpers": 0.5.15
+      caniuse-lite: 1.0.30001781
       postcss: 8.4.31
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      styled-jsx: 5.1.6(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      styled-jsx: 5.1.6(react@19.2.4)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 15.3.5
-      '@next/swc-darwin-x64': 15.3.5
-      '@next/swc-linux-arm64-gnu': 15.3.5
-      '@next/swc-linux-arm64-musl': 15.3.5
-      '@next/swc-linux-x64-gnu': 15.3.5
-      '@next/swc-linux-x64-musl': 15.3.5
-      '@next/swc-win32-arm64-msvc': 15.3.5
-      '@next/swc-win32-x64-msvc': 15.3.5
+      "@next/swc-darwin-arm64": 15.5.18
+      "@next/swc-darwin-x64": 15.5.18
+      "@next/swc-linux-arm64-gnu": 15.5.18
+      "@next/swc-linux-arm64-musl": 15.5.18
+      "@next/swc-linux-x64-gnu": 15.5.18
+      "@next/swc-linux-x64-musl": 15.5.18
+      "@next/swc-win32-arm64-msvc": 15.5.18
+      "@next/swc-win32-x64-msvc": 15.5.18
       sharp: 0.34.5
     transitivePeerDependencies:
-      - '@babel/core'
+      - "@babel/core"
       - babel-plugin-macros
 
-  node-releases@2.0.27: {}
+  node-exports-info@1.6.0:
+    dependencies:
+      array.prototype.flatmap: 1.3.3
+      es-errors: 1.3.0
+      object.entries: 1.1.9
+      semver: 6.3.1
+
+  node-releases@2.0.36: {}
 
   node-source-walk@7.0.1:
     dependencies:
-      '@babel/parser': 7.28.5
+      "@babel/parser": 7.29.2
 
   normalize-path@3.0.0: {}
 
-  normalize-range@0.1.2: {}
-
   object-assign@4.1.1: {}
 
   object-hash@3.0.0: {}
@@ -12001,14 +15682,14 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-object-atoms: 1.1.1
 
   object.groupby@1.0.3:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
 
   object.values@1.2.1:
     dependencies:
@@ -12017,13 +15698,13 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
-  ol-ext@4.0.37(ol@7.5.2):
+  ol-ext@4.0.38(ol@7.5.2):
     dependencies:
       ol: 7.5.2
 
   ol-mapbox-style@10.7.0:
     dependencies:
-      '@mapbox/mapbox-gl-style-spec': 13.28.0
+      "@mapbox/mapbox-gl-style-spec": 13.28.0
       mapbox-to-css-font: 2.4.5
       ol: 7.5.2
 
@@ -12092,7 +15773,7 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.27.1
+      "@babel/code-frame": 7.29.0
       error-ex: 1.3.4
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -12106,7 +15787,7 @@ snapshots:
   path-scurry@1.11.1:
     dependencies:
       lru-cache: 10.4.3
-      minipass: 7.1.2
+      minipass: 7.1.3
 
   path-type@6.0.0: {}
 
@@ -12128,11 +15809,9 @@ snapshots:
 
   picocolors@1.1.1: {}
 
-  picomatch@2.3.1: {}
+  picomatch@2.3.2: {}
 
-  picomatch@4.0.3: {}
-
-  pidtree@0.6.0: {}
+  picomatch@4.0.4: {}
 
   pify@2.3.0: {}
 
@@ -12144,41 +15823,41 @@ snapshots:
 
   polished@4.3.1:
     dependencies:
-      '@babel/runtime': 7.28.4
+      "@babel/runtime": 7.29.2
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-import@15.1.0(postcss@8.5.6):
+  postcss-import@15.1.0(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.11
 
-  postcss-js@4.1.0(postcss@8.5.6):
+  postcss-js@4.1.0(postcss@8.5.8):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.5.6
+      postcss: 8.5.8
 
-  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.6)(yaml@2.8.2):
+  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.8)(yaml@2.8.3):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 1.21.7
-      postcss: 8.5.6
-      yaml: 2.8.2
+      postcss: 8.5.8
+      yaml: 2.8.3
 
-  postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.6)(yaml@2.8.2):
+  postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.8)(yaml@2.8.3):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 2.6.1
-      postcss: 8.5.6
-      yaml: 2.8.2
+      postcss: 8.5.8
+      yaml: 2.8.3
 
-  postcss-nested@6.2.0(postcss@8.5.6):
+  postcss-nested@6.2.0(postcss@8.5.8):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       postcss-selector-parser: 6.1.2
 
   postcss-selector-parser@6.1.2:
@@ -12188,11 +15867,11 @@ snapshots:
 
   postcss-value-parser@4.2.0: {}
 
-  postcss-values-parser@6.0.2(postcss@8.5.6):
+  postcss-values-parser@6.0.2(postcss@8.5.8):
     dependencies:
       color-name: 1.1.4
       is-url-superb: 4.0.0
-      postcss: 8.5.6
+      postcss: 8.5.8
       quote-unquote: 1.0.0
 
   postcss@8.4.31:
@@ -12201,7 +15880,7 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  postcss@8.5.6:
+  postcss@8.5.8:
     dependencies:
       nanoid: 3.3.11
       picocolors: 1.1.1
@@ -12211,12 +15890,12 @@ snapshots:
 
   precinct@12.2.0:
     dependencies:
-      '@dependents/detective-less': 5.0.1
+      "@dependents/detective-less": 5.0.1
       commander: 12.1.0
       detective-amd: 6.0.1
-      detective-cjs: 6.0.1
+      detective-cjs: 6.1.0
       detective-es6: 5.0.1
-      detective-postcss: 7.0.1(postcss@8.5.6)
+      detective-postcss: 7.0.1(postcss@8.5.8)
       detective-sass: 6.0.1
       detective-scss: 5.0.1
       detective-stylus: 5.0.1
@@ -12224,18 +15903,18 @@ snapshots:
       detective-vue2: 2.2.0(typescript@5.9.3)
       module-definition: 6.0.1
       node-source-walk: 7.0.1
-      postcss: 8.5.6
+      postcss: 8.5.8
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-tailwindcss@0.6.14(prettier@3.7.4):
+  prettier-plugin-tailwindcss@0.6.14(prettier@3.8.1):
     dependencies:
-      prettier: 3.7.4
+      prettier: 3.8.1
 
-  prettier@3.7.4: {}
+  prettier@3.8.1: {}
 
   pretty-format@27.5.1:
     dependencies:
@@ -12249,10 +15928,10 @@ snapshots:
 
   process@0.11.10: {}
 
-  proj4@2.20.2:
+  proj4@2.20.4:
     dependencies:
       mgrs: 1.0.0
-      wkt-parser: 1.5.2
+      wkt-parser: 1.5.4
 
   prop-types@15.8.1:
     dependencies:
@@ -12290,30 +15969,27 @@ snapshots:
 
   quote-unquote@1.0.0: {}
 
-  randombytes@2.1.0:
-    dependencies:
-      safe-buffer: 5.2.1
-
   rbush@3.0.1:
     dependencies:
       quickselect: 2.0.0
 
-  react-chartjs-2@5.3.1(chart.js@4.5.1)(react@19.2.3):
+  react-chartjs-2@5.3.1(chart.js@4.5.1)(react@19.2.4):
     dependencies:
       chart.js: 4.5.1
-      react: 19.2.3
+      react: 19.2.4
 
-  react-day-picker@8.10.1(date-fns@3.6.0)(react@19.2.3):
+  react-day-picker@8.10.1(date-fns@3.6.0)(react@19.2.4):
     dependencies:
       date-fns: 3.6.0
-      react: 19.2.3
+      react: 19.2.4
 
-  react-day-picker@9.12.0(react@19.2.3):
+  react-day-picker@9.14.0(react@19.2.4):
     dependencies:
-      '@date-fns/tz': 1.4.1
+      "@date-fns/tz": 1.4.1
+      "@tabby_ai/hijri-converter": 1.0.5
       date-fns: 4.1.0
       date-fns-jalali: 4.1.0-0
-      react: 19.2.3
+      react: 19.2.4
 
   react-dnd-html5-backend@16.0.1:
     dependencies:
@@ -12321,20 +15997,20 @@ snapshots:
 
   react-dnd-touch-backend@16.0.1:
     dependencies:
-      '@react-dnd/invariant': 4.0.2
+      "@react-dnd/invariant": 4.0.2
       dnd-core: 16.0.1
 
-  react-dnd@16.0.1(@types/node@22.19.2)(@types/react@19.2.7)(react@19.2.3):
+  react-dnd@16.0.1(@types/node@22.19.15)(@types/react@19.2.14)(react@19.2.4):
     dependencies:
-      '@react-dnd/invariant': 4.0.2
-      '@react-dnd/shallowequal': 4.0.2
+      "@react-dnd/invariant": 4.0.2
+      "@react-dnd/shallowequal": 4.0.2
       dnd-core: 16.0.1
       fast-deep-equal: 3.1.3
       hoist-non-react-statics: 3.3.2
-      react: 19.2.3
+      react: 19.2.4
     optionalDependencies:
-      '@types/node': 22.19.2
-      '@types/react': 19.2.7
+      "@types/node": 22.19.15
+      "@types/react": 19.2.14
 
   react-docgen-typescript@2.4.0(typescript@5.6.3):
     dependencies:
@@ -12342,57 +16018,57 @@ snapshots:
 
   react-docgen@7.1.1:
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-      '@types/babel__core': 7.20.5
-      '@types/babel__traverse': 7.28.0
-      '@types/doctrine': 0.0.9
-      '@types/resolve': 1.20.6
+      "@babel/core": 7.29.0
+      "@babel/traverse": 7.29.0
+      "@babel/types": 7.29.0
+      "@types/babel__core": 7.20.5
+      "@types/babel__traverse": 7.28.0
+      "@types/doctrine": 0.0.9
+      "@types/resolve": 1.20.6
       doctrine: 3.0.0
       resolve: 1.22.11
       strip-indent: 4.1.1
     transitivePeerDependencies:
       - supports-color
 
-  react-dom@19.2.3(react@19.2.3):
+  react-dom@19.2.4(react@19.2.4):
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
       scheduler: 0.27.0
 
-  react-draggable@4.5.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  react-draggable@4.5.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       clsx: 2.1.1
       prop-types: 15.8.1
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
-  react-dropzone@14.3.8(react@19.2.3):
+  react-dropzone@14.4.1(react@19.2.4):
     dependencies:
       attr-accept: 2.2.5
       file-selector: 2.1.2
       prop-types: 15.8.1
-      react: 19.2.3
+      react: 19.2.4
 
-  react-hook-form@7.68.0(react@19.2.3):
+  react-hook-form@7.72.0(react@19.2.4):
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
 
-  react-hot-toast@2.6.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  react-hot-toast@2.6.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       csstype: 3.2.3
       goober: 2.1.18(csstype@3.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
-  react-i18next@15.7.4(i18next@25.7.2(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3):
+  react-i18next@15.7.4(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3):
     dependencies:
-      '@babel/runtime': 7.28.4
+      "@babel/runtime": 7.29.2
       html-parse-stringify: 3.0.1
-      i18next: 25.7.2(typescript@5.9.3)
-      react: 19.2.3
+      i18next: 25.10.9(typescript@5.9.3)
+      react: 19.2.4
     optionalDependencies:
-      react-dom: 19.2.3(react@19.2.3)
+      react-dom: 19.2.4(react@19.2.4)
       typescript: 5.9.3
 
   react-is@16.13.1: {}
@@ -12401,65 +16077,65 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  react-qr-code@2.0.18(react@19.2.3):
+  react-qr-code@2.0.18(react@19.2.4):
     dependencies:
       prop-types: 15.8.1
       qr.js: 0.0.0
-      react: 19.2.3
+      react: 19.2.4
 
   react-refresh@0.17.0: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.3):
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.4):
     dependencies:
-      react: 19.2.3
-      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.4
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  react-remove-scroll@2.7.2(@types/react@19.2.7)(react@19.2.3):
+  react-remove-scroll@2.7.2(@types/react@19.2.14)(react@19.2.4):
     dependencies:
-      react: 19.2.3
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.7)(react@19.2.3)
-      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.4
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.14)(react@19.2.4)
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.2.7)(react@19.2.3)
-      use-sidecar: 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.4)
+      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.4)
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  react-smooth@4.0.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  react-smooth@4.0.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
-      fast-equals: 5.3.4
+      fast-equals: 5.4.0
       prop-types: 15.8.1
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      react-transition-group: 4.4.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-transition-group: 4.4.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
 
-  react-style-singleton@2.2.3(@types/react@19.2.7)(react@19.2.3):
+  react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.4):
     dependencies:
       get-nonce: 1.0.1
-      react: 19.2.3
+      react: 19.2.4
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  react-transition-group@4.4.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  react-transition-group@4.4.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
-      '@babel/runtime': 7.28.4
+      "@babel/runtime": 7.29.2
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
-  react-use-measure@2.1.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  react-use-measure@2.1.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
     optionalDependencies:
-      react-dom: 19.2.3(react@19.2.3)
+      react-dom: 19.2.4(react@19.2.4)
 
-  react@19.2.3: {}
+  react@19.2.4: {}
 
   read-cache@1.0.0:
     dependencies:
@@ -12477,17 +16153,17 @@ snapshots:
 
   readdirp@3.6.0:
     dependencies:
-      picomatch: 2.3.1
+      picomatch: 2.3.2
 
   readdirp@4.1.2: {}
 
-  realgrid-react@0.9.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  realgrid-react@0.9.9(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      realgrid: 2.9.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      realgrid: 2.9.7
 
-  realgrid@2.9.6: {}
+  realgrid@2.9.7: {}
 
   recast@0.23.11:
     dependencies:
@@ -12501,15 +16177,15 @@ snapshots:
     dependencies:
       decimal.js-light: 2.5.1
 
-  recharts@2.15.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  recharts@2.15.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       clsx: 2.1.1
       eventemitter3: 4.0.7
-      lodash: 4.17.21
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      lodash: 4.17.23
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
       react-is: 18.3.1
-      react-smooth: 4.0.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react-smooth: 4.0.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       recharts-scale: 0.4.5
       tiny-invariant: 1.3.3
       victory-vendor: 36.9.2
@@ -12521,13 +16197,13 @@ snapshots:
 
   redux@4.2.1:
     dependencies:
-      '@babel/runtime': 7.28.4
+      "@babel/runtime": 7.29.2
 
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
@@ -12543,7 +16219,7 @@ snapshots:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
-  remixicon@4.7.0: {}
+  remixicon@4.9.1: {}
 
   require-directory@2.1.1: {}
 
@@ -12553,6 +16229,8 @@ snapshots:
 
   requires-port@1.0.0: {}
 
+  reselect@5.1.1: {}
+
   resolve-from@4.0.0: {}
 
   resolve-from@5.0.0: {}
@@ -12569,9 +16247,12 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  resolve@2.0.0-next.5:
+  resolve@2.0.0-next.6:
     dependencies:
+      es-errors: 1.3.0
       is-core-module: 2.16.1
+      node-exports-info: 1.6.0
+      object-keys: 1.1.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
@@ -12586,32 +16267,35 @@ snapshots:
 
   rfdc@1.4.1: {}
 
-  rollup@4.53.3:
+  rollup@4.60.0:
     dependencies:
-      '@types/estree': 1.0.8
+      "@types/estree": 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.53.3
-      '@rollup/rollup-android-arm64': 4.53.3
-      '@rollup/rollup-darwin-arm64': 4.53.3
-      '@rollup/rollup-darwin-x64': 4.53.3
-      '@rollup/rollup-freebsd-arm64': 4.53.3
-      '@rollup/rollup-freebsd-x64': 4.53.3
-      '@rollup/rollup-linux-arm-gnueabihf': 4.53.3
-      '@rollup/rollup-linux-arm-musleabihf': 4.53.3
-      '@rollup/rollup-linux-arm64-gnu': 4.53.3
-      '@rollup/rollup-linux-arm64-musl': 4.53.3
-      '@rollup/rollup-linux-loong64-gnu': 4.53.3
-      '@rollup/rollup-linux-ppc64-gnu': 4.53.3
-      '@rollup/rollup-linux-riscv64-gnu': 4.53.3
-      '@rollup/rollup-linux-riscv64-musl': 4.53.3
-      '@rollup/rollup-linux-s390x-gnu': 4.53.3
-      '@rollup/rollup-linux-x64-gnu': 4.53.3
-      '@rollup/rollup-linux-x64-musl': 4.53.3
-      '@rollup/rollup-openharmony-arm64': 4.53.3
-      '@rollup/rollup-win32-arm64-msvc': 4.53.3
-      '@rollup/rollup-win32-ia32-msvc': 4.53.3
-      '@rollup/rollup-win32-x64-gnu': 4.53.3
-      '@rollup/rollup-win32-x64-msvc': 4.53.3
+      "@rollup/rollup-android-arm-eabi": 4.60.0
+      "@rollup/rollup-android-arm64": 4.60.0
+      "@rollup/rollup-darwin-arm64": 4.60.0
+      "@rollup/rollup-darwin-x64": 4.60.0
+      "@rollup/rollup-freebsd-arm64": 4.60.0
+      "@rollup/rollup-freebsd-x64": 4.60.0
+      "@rollup/rollup-linux-arm-gnueabihf": 4.60.0
+      "@rollup/rollup-linux-arm-musleabihf": 4.60.0
+      "@rollup/rollup-linux-arm64-gnu": 4.60.0
+      "@rollup/rollup-linux-arm64-musl": 4.60.0
+      "@rollup/rollup-linux-loong64-gnu": 4.60.0
+      "@rollup/rollup-linux-loong64-musl": 4.60.0
+      "@rollup/rollup-linux-ppc64-gnu": 4.60.0
+      "@rollup/rollup-linux-ppc64-musl": 4.60.0
+      "@rollup/rollup-linux-riscv64-gnu": 4.60.0
+      "@rollup/rollup-linux-riscv64-musl": 4.60.0
+      "@rollup/rollup-linux-s390x-gnu": 4.60.0
+      "@rollup/rollup-linux-x64-gnu": 4.60.0
+      "@rollup/rollup-linux-x64-musl": 4.60.0
+      "@rollup/rollup-openbsd-x64": 4.60.0
+      "@rollup/rollup-openharmony-arm64": 4.60.0
+      "@rollup/rollup-win32-arm64-msvc": 4.60.0
+      "@rollup/rollup-win32-ia32-msvc": 4.60.0
+      "@rollup/rollup-win32-x64-gnu": 4.60.0
+      "@rollup/rollup-win32-x64-msvc": 4.60.0
       fsevents: 2.3.3
 
   run-parallel@1.2.0:
@@ -12630,8 +16314,6 @@ snapshots:
 
   safe-buffer@5.1.2: {}
 
-  safe-buffer@5.2.1: {}
-
   safe-push-apply@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -12643,26 +16325,22 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
-  sax@1.4.3: {}
+  sax@1.6.0: {}
 
   scheduler@0.27.0: {}
 
   schema-utils@4.3.3:
     dependencies:
-      '@types/json-schema': 7.0.15
-      ajv: 8.17.1
-      ajv-formats: 2.1.1(ajv@8.17.1)
-      ajv-keywords: 5.1.0(ajv@8.17.1)
+      "@types/json-schema": 7.0.15
+      ajv: 8.18.0
+      ajv-formats: 2.1.1(ajv@8.18.0)
+      ajv-keywords: 5.1.0(ajv@8.18.0)
 
   select@1.1.2: {}
 
   semver@6.3.1: {}
 
-  semver@7.7.3: {}
-
-  serialize-javascript@6.0.2:
-    dependencies:
-      randombytes: 2.1.0
+  semver@7.7.4: {}
 
   set-blocking@2.0.0: {}
 
@@ -12692,34 +16370,34 @@ snapshots:
 
   sharp@0.34.5:
     dependencies:
-      '@img/colour': 1.0.0
+      "@img/colour": 1.1.0
       detect-libc: 2.1.2
-      semver: 7.7.3
+      semver: 7.7.4
     optionalDependencies:
-      '@img/sharp-darwin-arm64': 0.34.5
-      '@img/sharp-darwin-x64': 0.34.5
-      '@img/sharp-libvips-darwin-arm64': 1.2.4
-      '@img/sharp-libvips-darwin-x64': 1.2.4
-      '@img/sharp-libvips-linux-arm': 1.2.4
-      '@img/sharp-libvips-linux-arm64': 1.2.4
-      '@img/sharp-libvips-linux-ppc64': 1.2.4
-      '@img/sharp-libvips-linux-riscv64': 1.2.4
-      '@img/sharp-libvips-linux-s390x': 1.2.4
-      '@img/sharp-libvips-linux-x64': 1.2.4
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
-      '@img/sharp-linux-arm': 0.34.5
-      '@img/sharp-linux-arm64': 0.34.5
-      '@img/sharp-linux-ppc64': 0.34.5
-      '@img/sharp-linux-riscv64': 0.34.5
-      '@img/sharp-linux-s390x': 0.34.5
-      '@img/sharp-linux-x64': 0.34.5
-      '@img/sharp-linuxmusl-arm64': 0.34.5
-      '@img/sharp-linuxmusl-x64': 0.34.5
-      '@img/sharp-wasm32': 0.34.5
-      '@img/sharp-win32-arm64': 0.34.5
-      '@img/sharp-win32-ia32': 0.34.5
-      '@img/sharp-win32-x64': 0.34.5
+      "@img/sharp-darwin-arm64": 0.34.5
+      "@img/sharp-darwin-x64": 0.34.5
+      "@img/sharp-libvips-darwin-arm64": 1.2.4
+      "@img/sharp-libvips-darwin-x64": 1.2.4
+      "@img/sharp-libvips-linux-arm": 1.2.4
+      "@img/sharp-libvips-linux-arm64": 1.2.4
+      "@img/sharp-libvips-linux-ppc64": 1.2.4
+      "@img/sharp-libvips-linux-riscv64": 1.2.4
+      "@img/sharp-libvips-linux-s390x": 1.2.4
+      "@img/sharp-libvips-linux-x64": 1.2.4
+      "@img/sharp-libvips-linuxmusl-arm64": 1.2.4
+      "@img/sharp-libvips-linuxmusl-x64": 1.2.4
+      "@img/sharp-linux-arm": 0.34.5
+      "@img/sharp-linux-arm64": 0.34.5
+      "@img/sharp-linux-ppc64": 0.34.5
+      "@img/sharp-linux-riscv64": 0.34.5
+      "@img/sharp-linux-s390x": 0.34.5
+      "@img/sharp-linux-x64": 0.34.5
+      "@img/sharp-linuxmusl-arm64": 0.34.5
+      "@img/sharp-linuxmusl-x64": 0.34.5
+      "@img/sharp-wasm32": 0.34.5
+      "@img/sharp-win32-arm64": 0.34.5
+      "@img/sharp-win32-ia32": 0.34.5
+      "@img/sharp-win32-x64": 0.34.5
     optional: true
 
   shebang-command@2.0.0:
@@ -12769,10 +16447,15 @@ snapshots:
       ansi-styles: 6.2.3
       is-fullwidth-code-point: 5.1.0
 
-  sonner@2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  slice-ansi@8.0.0:
     dependencies:
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 5.1.0
+
+  sonner@2.0.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
   sort-asc@0.1.0: {}
 
@@ -12800,16 +16483,16 @@ snapshots:
 
   steiger@0.5.11(typescript@5.9.3):
     dependencies:
-      '@clack/prompts': 0.9.1
-      '@feature-sliced/steiger-plugin': 0.5.7(typescript@5.9.3)
+      "@clack/prompts": 0.9.1
+      "@feature-sliced/steiger-plugin": 0.5.7(typescript@5.9.3)
       chokidar: 4.0.3
-      cosmiconfig: 9.0.0(typescript@5.9.3)
+      cosmiconfig: 9.0.1(typescript@5.9.3)
       effector: 23.4.4
       empathic: 1.1.0
       fastest-levenshtein: 1.0.16
       globby: 14.1.0
       immer: 10.2.0
-      lodash-es: 4.17.21
+      lodash-es: 4.17.23
       micromatch: 4.0.8
       patronum: 2.3.0(effector@23.4.4)
       picocolors: 1.1.1
@@ -12826,18 +16509,16 @@ snapshots:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
-  storybook@8.6.14(prettier@3.7.4):
+  storybook@8.6.18(prettier@3.8.1):
     dependencies:
-      '@storybook/core': 8.6.14(prettier@3.7.4)(storybook@8.6.14(prettier@3.7.4))
+      "@storybook/core": 8.6.18(prettier@3.8.1)(storybook@8.6.18(prettier@3.8.1))
     optionalDependencies:
-      prettier: 3.7.4
+      prettier: 3.8.1
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  streamsearch@1.1.0: {}
-
   string-argv@0.3.2: {}
 
   string-width@4.2.3:
@@ -12850,31 +16531,31 @@ snapshots:
     dependencies:
       eastasianwidth: 0.2.0
       emoji-regex: 9.2.2
-      strip-ansi: 7.1.2
+      strip-ansi: 7.2.0
 
   string-width@7.2.0:
     dependencies:
       emoji-regex: 10.6.0
-      get-east-asian-width: 1.4.0
-      strip-ansi: 7.1.2
+      get-east-asian-width: 1.5.0
+      strip-ansi: 7.2.0
 
   string-width@8.2.0:
     dependencies:
       get-east-asian-width: 1.5.0
-      strip-ansi: 7.1.2
+      strip-ansi: 7.2.0
 
   string.prototype.includes@2.0.1:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
 
   string.prototype.matchall@4.0.12:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
@@ -12888,7 +16569,7 @@ snapshots:
   string.prototype.repeat@1.0.0:
     dependencies:
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
 
   string.prototype.trim@1.2.10:
     dependencies:
@@ -12896,7 +16577,7 @@ snapshots:
       call-bound: 1.0.4
       define-data-property: 1.1.4
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-object-atoms: 1.1.1
       has-property-descriptors: 1.0.2
 
@@ -12921,7 +16602,7 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
-  strip-ansi@7.1.2:
+  strip-ansi@7.2.0:
     dependencies:
       ansi-regex: 6.2.2
 
@@ -12935,14 +16616,14 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
-  styled-jsx@5.1.6(react@19.2.3):
+  styled-jsx@5.1.6(react@19.2.4):
     dependencies:
       client-only: 0.0.1
-      react: 19.2.3
+      react: 19.2.4
 
   sucrase@3.35.1:
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
+      "@jridgewell/gen-mapping": 0.3.13
       commander: 4.1.1
       lines-and-columns: 1.2.4
       mz: 2.7.0
@@ -12960,21 +16641,21 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  swr@2.3.8(react@19.2.3):
+  swr@2.4.1(react@19.2.4):
     dependencies:
       dequal: 2.0.3
-      react: 19.2.3
-      use-sync-external-store: 1.6.0(react@19.2.3)
+      react: 19.2.4
+      use-sync-external-store: 1.6.0(react@19.2.4)
 
-  tailwind-merge@3.4.0: {}
+  tailwind-merge@3.5.0: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.19(yaml@2.8.2)):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.19(yaml@2.8.3)):
     dependencies:
-      tailwindcss: 3.4.19(yaml@2.8.2)
+      tailwindcss: 3.4.19(yaml@2.8.3)
 
-  tailwindcss@3.4.19(yaml@2.8.2):
+  tailwindcss@3.4.19(yaml@2.8.3):
     dependencies:
-      '@alloc/quick-lru': 5.2.0
+      "@alloc/quick-lru": 5.2.0
       arg: 5.0.2
       chokidar: 3.6.0
       didyoumean: 1.2.2
@@ -12988,11 +16669,11 @@ snapshots:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.1.1
-      postcss: 8.5.6
-      postcss-import: 15.1.0(postcss@8.5.6)
-      postcss-js: 4.1.0(postcss@8.5.6)
-      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.6)(yaml@2.8.2)
-      postcss-nested: 6.2.0(postcss@8.5.6)
+      postcss: 8.5.8
+      postcss-import: 15.1.0(postcss@8.5.8)
+      postcss-js: 4.1.0(postcss@8.5.8)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.8)(yaml@2.8.3)
+      postcss-nested: 6.2.0(postcss@8.5.8)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.11
       sucrase: 3.35.1
@@ -13000,23 +16681,22 @@ snapshots:
       - tsx
       - yaml
 
-  tailwindcss@4.1.18: {}
+  tailwindcss@4.2.2: {}
 
-  tapable@2.3.0: {}
+  tapable@2.3.2: {}
 
-  terser-webpack-plugin@5.3.16(webpack@5.103.0):
+  terser-webpack-plugin@5.4.0(webpack@5.105.4):
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.31
+      "@jridgewell/trace-mapping": 0.3.31
       jest-worker: 27.5.1
       schema-utils: 4.3.3
-      serialize-javascript: 6.0.2
-      terser: 5.44.1
-      webpack: 5.103.0
+      terser: 5.46.1
+      webpack: 5.105.4
 
-  terser@5.44.1:
+  terser@5.46.1:
     dependencies:
-      '@jridgewell/source-map': 0.3.11
-      acorn: 8.15.0
+      "@jridgewell/source-map": 0.3.11
+      acorn: 8.16.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -13036,12 +16716,14 @@ snapshots:
 
   tinyexec@0.3.2: {}
 
+  tinyexec@1.0.4: {}
+
   tinyglobby@0.2.15:
     dependencies:
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
 
-  tinymce@7.9.1: {}
+  tinymce@7.9.2: {}
 
   tinyrainbow@1.2.0: {}
 
@@ -13053,15 +16735,11 @@ snapshots:
 
   tree-kill@1.2.2: {}
 
-  ts-api-utils@2.1.0(typescript@5.6.3):
+  ts-api-utils@2.5.0(typescript@5.6.3):
     dependencies:
       typescript: 5.6.3
 
-  ts-api-utils@2.1.0(typescript@5.9.3):
-    dependencies:
-      typescript: 5.9.3
-
-  ts-api-utils@2.4.0(typescript@5.9.3):
+  ts-api-utils@2.5.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
 
@@ -13079,7 +16757,7 @@ snapshots:
 
   tsconfig-paths@3.15.0:
     dependencies:
-      '@types/json5': 0.0.29
+      "@types/json5": 0.0.29
       json5: 1.0.2
       minimist: 1.2.8
       strip-bom: 3.0.0
@@ -13092,7 +16770,7 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsup@8.3.6(jiti@2.6.1)(postcss@8.5.6)(typescript@5.6.3)(yaml@2.8.2):
+  tsup@8.3.6(jiti@2.6.1)(postcss@8.5.8)(typescript@5.6.3)(yaml@2.8.3):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.24.2)
       cac: 6.7.14
@@ -13102,16 +16780,16 @@ snapshots:
       esbuild: 0.24.2
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.6)(yaml@2.8.2)
+      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.8)(yaml@2.8.3)
       resolve-from: 5.0.0
-      rollup: 4.53.3
+      rollup: 4.60.0
       source-map: 0.7.6
       sucrase: 3.35.1
       tinyexec: 0.3.2
       tinyglobby: 0.2.15
       tree-kill: 1.2.2
     optionalDependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       typescript: 5.6.3
     transitivePeerDependencies:
       - jiti
@@ -13119,7 +16797,7 @@ snapshots:
       - tsx
       - yaml
 
-  tsup@8.3.6(jiti@2.6.1)(postcss@8.5.6)(typescript@5.9.3)(yaml@2.8.2):
+  tsup@8.3.6(jiti@2.6.1)(postcss@8.5.8)(typescript@5.9.3)(yaml@2.8.3):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.24.2)
       cac: 6.7.14
@@ -13129,16 +16807,16 @@ snapshots:
       esbuild: 0.24.2
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.6)(yaml@2.8.2)
+      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.8)(yaml@2.8.3)
       resolve-from: 5.0.0
-      rollup: 4.53.3
+      rollup: 4.60.0
       source-map: 0.7.6
       sucrase: 3.35.1
       tinyexec: 0.3.2
       tinyglobby: 0.2.15
       tree-kill: 1.2.2
     optionalDependencies:
-      postcss: 8.5.6
+      postcss: 8.5.8
       typescript: 5.9.3
     transitivePeerDependencies:
       - jiti
@@ -13222,13 +16900,13 @@ snapshots:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
-  typescript-eslint@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3):
+  typescript-eslint@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)
-      '@typescript-eslint/parser': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.49.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.6.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      "@typescript-eslint/eslint-plugin": 8.57.2(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)
+      "@typescript-eslint/parser": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)
+      "@typescript-eslint/typescript-estree": 8.57.2(typescript@5.6.3)
+      "@typescript-eslint/utils": 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.6.3)
+      eslint: 9.39.4(jiti@2.6.1)
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
@@ -13250,34 +16928,34 @@ snapshots:
 
   unplugin@1.16.1:
     dependencies:
-      acorn: 8.15.0
+      acorn: 8.16.0
       webpack-virtual-modules: 0.6.2
 
   unrs-resolver@1.11.1:
     dependencies:
       napi-postinstall: 0.3.4
     optionalDependencies:
-      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
-      '@unrs/resolver-binding-android-arm64': 1.11.1
-      '@unrs/resolver-binding-darwin-arm64': 1.11.1
-      '@unrs/resolver-binding-darwin-x64': 1.11.1
-      '@unrs/resolver-binding-freebsd-x64': 1.11.1
-      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
-      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
-      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
-      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
-      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
-      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
-      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
-      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
-      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+      "@unrs/resolver-binding-android-arm-eabi": 1.11.1
+      "@unrs/resolver-binding-android-arm64": 1.11.1
+      "@unrs/resolver-binding-darwin-arm64": 1.11.1
+      "@unrs/resolver-binding-darwin-x64": 1.11.1
+      "@unrs/resolver-binding-freebsd-x64": 1.11.1
+      "@unrs/resolver-binding-linux-arm-gnueabihf": 1.11.1
+      "@unrs/resolver-binding-linux-arm-musleabihf": 1.11.1
+      "@unrs/resolver-binding-linux-arm64-gnu": 1.11.1
+      "@unrs/resolver-binding-linux-arm64-musl": 1.11.1
+      "@unrs/resolver-binding-linux-ppc64-gnu": 1.11.1
+      "@unrs/resolver-binding-linux-riscv64-gnu": 1.11.1
+      "@unrs/resolver-binding-linux-riscv64-musl": 1.11.1
+      "@unrs/resolver-binding-linux-s390x-gnu": 1.11.1
+      "@unrs/resolver-binding-linux-x64-gnu": 1.11.1
+      "@unrs/resolver-binding-linux-x64-musl": 1.11.1
+      "@unrs/resolver-binding-wasm32-wasi": 1.11.1
+      "@unrs/resolver-binding-win32-arm64-msvc": 1.11.1
+      "@unrs/resolver-binding-win32-ia32-msvc": 1.11.1
+      "@unrs/resolver-binding-win32-x64-msvc": 1.11.1
 
-  update-browserslist-db@1.2.2(browserslist@4.28.1):
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
     dependencies:
       browserslist: 4.28.1
       escalade: 3.2.0
@@ -13292,24 +16970,24 @@ snapshots:
       querystringify: 2.2.0
       requires-port: 1.0.0
 
-  use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.2.3):
+  use-callback-ref@1.3.3(@types/react@19.2.14)(react@19.2.4):
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  use-sidecar@1.1.3(@types/react@19.2.7)(react@19.2.3):
+  use-sidecar@1.1.3(@types/react@19.2.14)(react@19.2.4):
     dependencies:
       detect-node-es: 1.1.0
-      react: 19.2.3
+      react: 19.2.4
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
 
-  use-sync-external-store@1.6.0(react@19.2.3):
+  use-sync-external-store@1.6.0(react@19.2.4):
     dependencies:
-      react: 19.2.3
+      react: 19.2.4
 
   util-deprecate@1.0.2: {}
 
@@ -13323,7 +17001,7 @@ snapshots:
       is-arguments: 1.2.0
       is-generator-function: 1.1.2
       is-typed-array: 1.1.15
-      which-typed-array: 1.1.19
+      which-typed-array: 1.1.20
 
   utrie@1.0.2:
     dependencies:
@@ -13333,13 +17011,13 @@ snapshots:
 
   victory-vendor@36.9.2:
     dependencies:
-      '@types/d3-array': 3.2.2
-      '@types/d3-ease': 3.0.2
-      '@types/d3-interpolate': 3.0.4
-      '@types/d3-scale': 4.0.9
-      '@types/d3-shape': 3.1.7
-      '@types/d3-time': 3.0.4
-      '@types/d3-timer': 3.0.2
+      "@types/d3-array": 3.2.2
+      "@types/d3-ease": 3.0.2
+      "@types/d3-interpolate": 3.0.4
+      "@types/d3-scale": 4.0.9
+      "@types/d3-shape": 3.1.8
+      "@types/d3-time": 3.0.4
+      "@types/d3-timer": 3.0.2
       d3-array: 3.2.4
       d3-ease: 3.0.1
       d3-interpolate: 3.0.1
@@ -13348,71 +17026,71 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vite-tsconfig-paths@5.1.4(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2)):
+  vite-tsconfig-paths@5.1.4(typescript@5.6.3)(vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3)):
     dependencies:
       debug: 4.4.3
       globrex: 0.1.2
       tsconfck: 3.1.6(typescript@5.6.3)
     optionalDependencies:
-      vite: 6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@5.4.21(@types/node@22.19.2)(lightningcss@1.30.2)(terser@5.44.1):
+  vite@5.4.21(@types/node@22.19.15)(lightningcss@1.32.0)(terser@5.46.1):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.5.6
-      rollup: 4.53.3
+      postcss: 8.5.8
+      rollup: 4.60.0
     optionalDependencies:
-      '@types/node': 22.19.2
+      "@types/node": 22.19.15
       fsevents: 2.3.3
-      lightningcss: 1.30.2
-      terser: 5.44.1
+      lightningcss: 1.32.0
+      terser: 5.46.1
 
-  vite@6.4.1(@types/node@22.19.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2):
+  vite@6.4.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3):
     dependencies:
       esbuild: 0.25.12
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
-      postcss: 8.5.6
-      rollup: 4.53.3
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+      postcss: 8.5.8
+      rollup: 4.60.0
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 22.19.2
+      "@types/node": 22.19.15
       fsevents: 2.3.3
       jiti: 2.6.1
-      lightningcss: 1.30.2
-      terser: 5.44.1
-      yaml: 2.8.2
+      lightningcss: 1.32.0
+      terser: 5.46.1
+      yaml: 2.8.3
 
   void-elements@3.1.0: {}
 
-  watchpack@2.4.4:
+  watchpack@2.5.1:
     dependencies:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
 
   web-worker@1.5.0: {}
 
-  webpack-sources@3.3.3: {}
+  webpack-sources@3.3.4: {}
 
   webpack-virtual-modules@0.6.2: {}
 
-  webpack@5.103.0:
+  webpack@5.105.4:
     dependencies:
-      '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/wasm-edit': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      acorn: 8.15.0
-      acorn-import-phases: 1.0.4(acorn@8.15.0)
+      "@types/eslint-scope": 3.7.7
+      "@types/estree": 1.0.8
+      "@types/json-schema": 7.0.15
+      "@webassemblyjs/ast": 1.14.1
+      "@webassemblyjs/wasm-edit": 1.14.1
+      "@webassemblyjs/wasm-parser": 1.14.1
+      acorn: 8.16.0
+      acorn-import-phases: 1.0.4(acorn@8.16.0)
       browserslist: 4.28.1
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.18.4
-      es-module-lexer: 1.7.0
+      enhanced-resolve: 5.20.1
+      es-module-lexer: 2.0.0
       eslint-scope: 5.1.1
       events: 3.3.0
       glob-to-regexp: 0.4.1
@@ -13422,12 +17100,12 @@ snapshots:
       mime-types: 2.1.35
       neo-async: 2.6.2
       schema-utils: 4.3.3
-      tapable: 2.3.0
-      terser-webpack-plugin: 5.3.16(webpack@5.103.0)
-      watchpack: 2.4.4
-      webpack-sources: 3.3.3
+      tapable: 2.3.2
+      terser-webpack-plugin: 5.4.0(webpack@5.105.4)
+      watchpack: 2.5.1
+      webpack-sources: 3.3.4
     transitivePeerDependencies:
-      - '@swc/core'
+      - "@swc/core"
       - esbuild
       - uglify-js
 
@@ -13453,7 +17131,7 @@ snapshots:
       isarray: 2.0.5
       which-boxed-primitive: 1.1.1
       which-collection: 1.0.2
-      which-typed-array: 1.1.19
+      which-typed-array: 1.1.20
 
   which-collection@1.0.2:
     dependencies:
@@ -13464,7 +17142,7 @@ snapshots:
 
   which-module@2.0.1: {}
 
-  which-typed-array@1.1.19:
+  which-typed-array@1.1.20:
     dependencies:
       available-typed-arrays: 1.0.7
       call-bind: 1.0.8
@@ -13478,7 +17156,7 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
-  wkt-parser@1.5.2: {}
+  wkt-parser@1.5.4: {}
 
   wmf@1.0.2: {}
 
@@ -13502,22 +17180,22 @@ snapshots:
     dependencies:
       ansi-styles: 6.2.3
       string-width: 5.1.2
-      strip-ansi: 7.1.2
+      strip-ansi: 7.2.0
 
   wrap-ansi@9.0.2:
     dependencies:
       ansi-styles: 6.2.3
       string-width: 7.2.0
-      strip-ansi: 7.1.2
+      strip-ansi: 7.2.0
 
-  ws@8.18.3: {}
+  ws@8.20.0: {}
 
   xlsx-populate@1.21.0:
     dependencies:
       cfb: 1.2.2
       jszip: 3.10.1
-      lodash: 4.17.21
-      sax: 1.4.3
+      lodash: 4.17.23
+      sax: 1.6.0
 
   xlsx@0.18.5:
     dependencies:
@@ -13537,7 +17215,7 @@ snapshots:
 
   yallist@3.1.1: {}
 
-  yaml@2.8.2: {}
+  yaml@2.8.3: {}
 
   yargs-parser@18.1.3:
     dependencies:
@@ -13591,9 +17269,9 @@ snapshots:
 
   zstddec@0.1.0: {}
 
-  zustand@5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3)):
+  zustand@5.0.12(@types/react@19.2.14)(immer@10.2.0)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4)):
     optionalDependencies:
-      '@types/react': 19.2.7
+      "@types/react": 19.2.14
       immer: 10.2.0
-      react: 19.2.3
-      use-sync-external-store: 1.6.0(react@19.2.3)
+      react: 19.2.4
+      use-sync-external-store: 1.6.0(react@19.2.4)